/*-----------------------------------------------------------------*/
/* DEFAULT CSS Code */
/*-----------------------------------------------------------------*/

/* all - text */
html, body { color: #777; height: 100%; }

/* all - heading 1 to 4 */
h1, h2, h3, h4 { color: #000; }

/* all - links (hover underlining visible in portal) */ 
a { color: #336494; } /* ---------- DOESN'T SEEM TO DO ANYTHING ---------- */
a:hover, a:focus { color: #668baf; }

/* all - loader - bkgnd doughnut colur, then spinning arc colour */
.loader { border-color: #f3f3f3; border-top-color: #88b9d1; }

/*-----------------------------------------------------------------*/
/* Topbar */
/*-----------------------------------------------------------------*/

/* topbar text colour (as different from page text colour) */
.navbar-nav__item .item-icon.item-icon__navbar-icon,
    .navbar-default .navbar-nav > li > a { color: #777; }
.navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus { color: #333; }

/* all - margin + padding for logo within topbar block */
.navbar-brand, .navbar .navbar-collapse .navbar-brand { margin: 0; padding: 0; }
#navbar {margin-left: 0px;}

/* login + logout - topbar bkgnd (+ optional other bkgnd img) */
.login-layout__header { background: #fff/* url(../../Images/xxx/UGL_Percep_5_HTML_topBar_other.png) top right no-repeat; */; }

/* portal - topbar bkgnd (+ optional other bkgnd img) */
.navbar { background: #fff/* url(../../Images/xxx/UGL_Percep_5_HTML_topBar_other.png) top right no-repeat; */; }

/* portal - padding for topbar block */
.navbar-brand, .navbar .container-fluid { padding-left: 0; }
.navbar-collapse { padding-left: 0; } /* keep this separate. If need padding, set on line above. Otherwise, doubles padding when logged in.*/

/* gap on topBar right to allow for logo in right-aligned other image (Default = -15px) */
.navbar-nav.navbar-right:last-child { margin-right: -15px !important; }

/* ---------- Resizing login + logout topbar logo for different screensizes ---------- */

/* login + logout - re-size topbar logo - screen size: monitor */
.login-layout__header .navbar-brand > img { max-height: 70px; }

/* login + logout - re-size topbar logo - screen size: 965px wide (iPad) */
@media (max-width: 965px) { .login-layout__header .navbar-brand > img { max-height: 56px; } }

/* login + logout - re-size topbar logo - screen size: 775px wide */
@media (max-width: 775px) { .login-layout__header .navbar-brand > img { max-height: 45px; } }

/* login + logout - re-size topbar logo - screen size: 630px wide */
@media (max-width: 630px) { .login-layout__header .navbar-brand > img { max-height: 35px; } }

/* login + logout - re-size topbar logo - screen size: 495px wide */
@media (max-width: 495px) { .login-layout__header .navbar-brand > img { max-height: 25px; } }

/* login + logout - re-size topbar logo - screen size: 355px wide */
@media (max-width: 355px) { .login-layout__header .navbar-brand > img  { max-height: 15px; } }

/* login + logout - re-size topbar logo - screen size: 220px wide */
@media all and (max-width: 220px) { .login-layout__header .navbar-brand > img { max-height: 10px; } }

/* ---------- Resizing portal topbar logo for different screensizes ---------- */

/* portal - re-size topbar logo - screen size: monitor */
.navbar-brand > img { max-height: 70px; }

/* portal - re-size topbar logo - screen size: 1340px wide (iPad) */
@media (max-width: 1340px) { .navbar-brand > img { max-height: 56px; }
    .navbar .navbar-collapse .navbar-brand img { max-width: none; } }

/* portal - re-size topbar logo - screen size: 850px wide */
@media (max-width: 850px) { .navbar-brand > img { max-height: 45px; }
    .navbar .navbar-collapse .navbar-brand img { max-width: none; } }

/* portal - re-size topbar logo - screen size: 685px wide */
@media (max-width: 685px) { .navbar-brand > img { max-height: 35px; }
    .navbar .navbar-collapse .navbar-brand img { max-width: none; } }

/* portal - re-size topbar logo - screen size: 550px wide */
@media (max-width: 550px) { .navbar-brand > img { max-height: 25px; }
    .navbar .navbar-collapse .navbar-brand img { max-width: none; } }

/* portal - re-size topbar logo - screen size: 415px wide */
@media (max-width: 415px) { .navbar-brand > img { max-height: 15px; }
    .navbar .navbar-collapse .navbar-brand img { max-width: none; } }

/* portal - re-size topbar logo - screen size: 285px wide */
@media all and (max-width: 285px) { .navbar-brand > img { max-height: 10px; }
    .navbar .navbar-collapse .navbar-brand img { max-width: none; } }

/*-----------------------------------------------------------------*/
/* Login + logout pages */
/*-----------------------------------------------------------------*/

/* login + logout - bkgnd */
.login-layout { background-color: #f8f8f8; }

/* login + logout - left panel bkgnd image - screensize: monitor */
.column_lcol { background-image: url(../../Images/0a903e5b-cd9a-4dbc-b000-a25ae56b3e34/UGL_Percep_5_HTML_loginPage_img.jpg); }

/* login + logout - left panel bkgnd image - screensize: iPad or less */
@media (max-width: 991px) { .login-layout .mob-customer-content-section { background-image: url(../../Images/0a903e5b-cd9a-4dbc-b000-a25ae56b3e34/UGL_Percep_5_HTML_loginPage_img.jpg); } }

/* login + logout - box around custom text */
.customer-content { width: 80%; margin: 16% auto auto auto; }
.customer-content__shade { background-color: #fff; opacity: 0.7; }

/* login - text (eg. "Please enter your username and password") */
.login-field-container { color: #444; }

/* login + logout - custom text */
.customer-content { color: #444; }

/* login - error text */
.text-danger { color: #a00; }

/* login - buttons */
.p-btn { color: #88b9d1; background-color: #f4f4f4; border-color: #88b9d1; }
.p-btn:hover, .p-btn:active, .p-btn:focus { color: #fff; background-color: #88b9d1 !important; border-color: #88b9d1 !important; }

/* login - buttons that look like links (ie. "return" + "back") */
.p-link { color: #88b9d1; background-color: #f8f8f8; border-color: #f8f8f8; }
.p-link:hover, .p-link:active, .p-link:focus { color: #668baf !important; background-color: #f8f8f8 !important; border-color: #f8f8f8 !important; text-decoration: underline; box-shadow: none; }

/* login - text links (eg. "forgot username-password") */
.login .login-form .form-group .form-group .panel-body .login-field-container a,
    .login .login-form .form-group .form-group .panel-body .login-field-container label { color: #336494; }
.login .login-form .form-group .form-group .panel-body .login-field-container a:hover,
    .login .login-form .form-group .form-group .panel-body .login-field-container label:hover { color: #668baf; }

/* logout - link pretending to be a button (ie. "log back in") */
.logout__header .p-link { color: #88b9d1; background-color: #f4f4f4; border: 1px solid #88b9d1; padding: 15px 25px; }
.logout__header .p-link:hover, .logout__header .p-link:active, .logout__header .p-link:focus { color: #fff !important; background-color: #88b9d1 !important; border-color: #88b9d1 !important; text-decoration: none; }

/* logout - header text margin - pushes "log back in" button down from header text */
.logout h1 { margin-bottom: 40px; }

/* forms - fields that are not the focus */
.form-control { color: #444; background-color: #fff; border: 1px solid #ccc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
.has-error .form-control { border-color: #a00; }

/* forms - fields that are the focus */
.form-control:focus { border-color: #88b9d1; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(136, 185, 209, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(136, 185, 209, 0.6); }
.has-error .form-control:focus { border-color: #a00; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(170, 0, 0, 0.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(170, 0, 0, 0.6); }

/* forms - disabled form fields */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { color: #aaa; background-color: #eee; }

/* forms - select language drop box background */
.login-field-container__select-language { background-color: #f4f4f4; }

/*-----------------------------------------------------------------*/
/* My settings pop-open */
/*-----------------------------------------------------------------*/

.personal-settings__select-image, .personal-settings__delete-image { color: #336494; }
.personal-settings__user-image-block div:hover { color: #668baf; }

/*-----------------------------------------------------------------*/
/* Breadcrumb - menu path bar */
/*-----------------------------------------------------------------*/

.breadcrumb .breadcrumb-link{
color: #2d2d2d;}

.breadcrumb .breadcrumb-item:first-child{
color: #2d2d2d;}

/* breadcrumb - bar (see pc-wrapper in main page section for bottom 1px line) */
.breadcrumb { background-color: #003d79; border-top: 1px solid #ccc; }

/* breadcrumb bar - bottom line of breadcrumb bar - some bits actually top line of main page and sidebar */
.pc-wrapper, .HubMenu, .tree-menu__buttons { border-top: 1px solid #ccc; }

/* default button - not last button */
.breadcrumb .btn { color: #fff; background-color: #003d79; }

/* default button end bits */
.breadcrumb .btn.btn-info:not(:last-child)::after,
    .breadcrumb .btn.btn-info:not(:first-child)::after { border-left: 10px solid #003d79; }

/* default button end bit outlines */
.breadcrumb .btn.btn-info:not(:last-child)::before,
    .breadcrumb .btn.btn-info:not(:first-child)::before {border-left: 10px solid #ccc; }

/* first button (ie. "back" arrow) */
.breadcrumb .btn:first-child { color: #fff; }

/* first button end bit outline */
.breadcrumb .btn.btn-info:first-child { border-right: 1px solid #ccc; }

/* last button */
.breadcrumb .btn:last-child { color: #fff; background-color: #336494; }

/* last button - end bit */
.breadcrumb .btn:not(:first-child):after { border-left: 10px solid #336494; }

/* last button - end bit outline */
.breadcrumb .btn:not(:first-child):before { border-left: 10px solid #ccc; }

/* hover default button + last button - not end bit outlines */
.breadcrumb .btn:hover, .breadcrumb :last-child.btn:hover { background-color: #668baf; }


/* hover default button + last button - end bits */
.breadcrumb .btn.btn-info:hover:not(:last-child)::after,
    .breadcrumb .btn.btn-info:hover:not(:first-child)::after,
    .breadcrumb :last-child.btn:hover::after { border-left: 10px solid #668baf; }

/*-----------------------------------------------------------------*/
/* Hubmenu - sidebar - screensize: monitor */
/*-----------------------------------------------------------------*/

/* In IE 10+, hide the 2nd hub in the mobile portal sidebar (ie. the "Full Site" hub). */
/* @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    .hub-menu-item-wrap a:nth-child(2) { display: none; }
} /*

/* For UGL - make sure site name is capitalised in ALL browsers. */
.hub-menu__user-title { text-transform: uppercase; }

/* Hide site or username text in portal sidebar */
.hub-menu__user-title { display:none; }

/* Make site or username image square - max size: 196 x 90px */
.hub-menu__user-thumbnail { border-radius: 0; width: 90px; height: 90px; box-shadow: none; }

/* Sidebar text (eg. username) + bkgnd */
.sidebar, .HubMenu { color: #333; background-color: #f5f6f6; }
.HubMenu { border-top: 1px solid #ccc; }

/* Hubs */
.hub-menu__item .item-icon { color: #333; }
.hub-menu__item .item-title,
    .hub-menu__item .hub-menu__item-arrow { color: #333; }

/* Selected hub */
.hub-menu__item.active { background-color: #569bbe; border-left-color: #003d79; }
.hub-menu__item.active .item-icon,
    .hub-menu__item.active .item-title { color: #fff; }
/* Active arrow not required. */

/* Hovered hub */
.hub-menu__item:hover { background-color: #88b9d1; border-left-color: #4c77a1; }
.hub-menu__item:hover .item-icon,
    .hub-menu__item:hover .item-title,
    .hub-menu__item:hover .hub-menu__item-arrow { color: #fff; }

/* ---------- Sidebar tree menu (eg. catalogues) ---------- */

/* Tree menu - sidebar text (eg. "Collpase all" text) + bkgnd */
.tree-menu { color: #333; background: #f5f6f6; }

/* Tree menu - top header divider line */
.tree-menu__buttons { box-shadow: inset 0 -1px 0 0 #333; }

/* Tree menu - divider line between expand + collapse */
.tree-menu__buttons-separator { border-left: 1px solid #333; }

/* Tree menu - hubs */
.tree-menu__item-arrow { color: #333; }
.tree-menu__text { color: #333; }

/* Tree menu - selected hub within tree - bkgnd colour only seems to work in IE */
.tree-menu__item_selected > .tree-menu__item-content { background: #569bbe; }
.tree-menu__text:focus { color: #fff; }
.tree-menu__item_selected > .tree-menu__item-content > .tree-menu__item-content-wrap > .tree-menu__text,
	.tree-menu__item_selected > .tree-menu__item-content > .tree-menu__item-content-wrap >
	.tree-menu__item-arrow-wrap > .tree-menu__item-arrow { color: #fff; }

/* Tree menu - hovered hub */
.tree-menu__item-content:hover { background: #88b9d1; }
.tree-menu__item-content:hover > .tree-menu__item-content-wrap >
	.tree-menu__item-arrow-wrap > .tree-menu__item-arrow { color: #fff; }
.tree-menu__item-content:hover > .tree-menu__item-content-wrap > .tree-menu__text { color: #fff; }

/*-----------------------------------------------------------------*/
/* Hubmenu - at bottom of screen - screensize: iPad or less */
/*-----------------------------------------------------------------*/

@media (max-width: 991px) {

    /* Selected hub */
    .hub-menu__item.active { border-top-color: #003d79; }

    /* Hovered hub */
    .hub-menu__item:hover { border-top-color: #4c77a1; }

    /* ---------- MEDIA POP-UP "MORE" MENU ---------- */

    /* Pop-up menu bkgnd */
    .sidebar { background-color: #f5f6f6; }

    /* Pop-up menu hubs */
    .mobile-menu .flow-menu-item .item-icon { color: #333; }
    .mobile-menu .flow-menu-item .item-title { color: #333; }

    /* Selected pop-up menu hub */
    .mobile-menu .flow-menu-item.active { background-color: #569bbe; border-left-color: #003d79; }
    .mobile-menu .flow-menu-item.active .item-icon,
        .mobile-menu .flow-menu-item.active .item-title { color: #fff; }

    /* Hovered pop-up menu hub */
    .mobile-menu .flow-menu-item:hover { background-color: #88b9d1; border-left-color: #4c77a1; }
    .mobile-menu .flow-menu-item:hover .item-icon,
        .mobile-menu .flow-menu-item:hover .item-title,
        .mobile-menu .flow-menu-item:hover .hub-menu__item-arrow { color: #fff; }
}

/*-----------------------------------------------------------------*/
/* Mobile deep menu */
/*-----------------------------------------------------------------*/

/* Deep menu - bar background */
.hub-menu_mobile-deep-level { background-color: #dedfe0; }

/* Deep menu hubs */
.hub-menu_mobile-deep-level .hub-menu__item,
    .hub-menu_mobile-deep-level .flow-menu-item { background-color: #dedfe0; }

/* Selected deep menu hub */
.hub-menu_mobile-deep-level .hub-menu__item.active,
    .hub-menu_mobile-deep-level .flow-menu-item.active { background-color: #569bbe; }

/* Hovered deep menu hub */
.hub-menu_mobile-deep-level .hub-menu__item:hover,
    .hub-menu_mobile-deep-level .flow-menu-item:hover { background-color: #88b9d1; }

/*-----------------------------------------------------------------*/
/* Footer */
/*-----------------------------------------------------------------*/

footer { background: #569bbe; color: #fff; }

/*-----------------------------------------------------------------*/
/* Main page */
/*-----------------------------------------------------------------*/

/* This block of code forces text on the dashboard to be lowercase (eg. OVERVIEW, MY THINGS TO DO, CALENDAR) */
/* .pc-wrapper__dashboard-header { text-transform: none; }
.dashboard-tile-block__header-text,
    .item-text .pull-left { text-transform: lowercase; }
.dashboard-block__panel-heading span { display: inline-block; }
.dashboard-block__panel-heading span::first-letter { text-transform: uppercase; }
/*

/* Main page bkgnd (including main page title area) */
.primary-content { color: #444; background-color: #fff; }

/* main page background image + bottom border of breadcrumb bar
.pc-wrapper {background: url("https://services.percepium.com/LMS/Images/...CLIENT_HTMLportal_mainPage_bkgnd.png") right bottom no-repeat; }
*/

/* Main page - tile and table view bkgnd (ie. main page content bkgnd) */
.tile-view-wrapper { background-color: #f8f8f8; }

/* carousel background */
.dashboard-block, .dashboard-block__carusel { background-color: #e4e4e4; }
/* carousel dots + arrows */
.dashboard-block__carousel-indicators li { background-color: #fff; }
/* carousel selected dot */
.dashboard-block__carousel-indicators li.active { background-color: #003d79; }
/* carousel - fit image. Only works in IE. Options: cover or contain */
.dashboard-block__carousel-inner__img { background-size: contain; }

/* Search button + hover search button*/
.btn-success { color: #fff; background-color: #569bbe; border-color: #569bbe; }
.btn.btn-success:hover,
	.btn.btn-success:active,
	.btn.btn-success:focus { color: #fff; background-color: #88b9d1; border-color: #88b9d1; }

/* Selected filter button + hover selected filter button */
.content-filter__search-btn-choosen { border-bottom-color: #569bbe; }
.content-filter__search-btn:active,
	.content-filter__search-btn:focus,
	.content-filter__search-btn-choosen:hover,
	.content-filter__search-btn-choosen:active,
	.content-filter__search-btn-choosen:focus { border-bottom-color: #88b9d1; }

/* Selected view switcher button */
.view-switcher__btn_selected { color: #fff; background-color: #569bbe; border-color: #569bbe; }
.view-switcher__btn_selected:active,
	.view-switcher__btn_selected:hover,
	.view-switcher__btn_selected:focus { color: #fff; background-color: #88b9d1; border-color: #88b9d1; }

/* Links in tile view */
.tile h2 { color: #336494; }
.tile:hover h2 { color: #668baf; }

/* Links in table view */
.hub-grid-table-container__text { color: #336494; }
.hub-grid-table-container__text:hover { color: #668baf; }

/* Next-Previous page links */
.page-btn { color: #336494; }
.page-btn:hover,
    .page-btn:active,
    .page-btn:focus { color: #668baf; }

/* Underscrores */
.info-block-header__underscore {border-bottom: 2px solid #88b9d1; }
.dashboard-tile-block__header-text::before { border-bottom: 2px solid #88b9d1; }
.personal-settings__tab_active { border-bottom-color: #ffbb33; }
.content-filter__filter-btn-choosen { border-bottom-color: #599cbf; }

/* Rating stars - hollow not-selected + active */
.rating,
    .rating_editable:hover { color: #d7d7d7; }

/* Rating stars - selected */
.rating_value-1 > .rating__star-1::before, .rating_value-1 > .rating__star-1 ~ .rating__star::before,
    .rating_value-2 > .rating__star-2::before,
    .rating_value-2 > .rating__star-2 ~ .rating__star::before,
    .rating_value-3 > .rating__star-3::before,
    .rating_value-3 > .rating__star-3 ~ .rating__star::before,
    .rating_value-4 > .rating__star-4::before,
    .rating_value-4 > .rating__star-4 ~ .rating__star::before,
    .rating_value-5 > .rating__star-5::before,
    .rating_value-5 > .rating__star-5 ~ .rating__star::before { color: #569bbe; }

/* Rating stars - hovered */
.rating_editable > .rating__star:hover:before,
    .rating_editable > .rating__star:hover ~ .rating__star:before { color:#88b9d1; }

/* On activity information pages show line returns in multi-line text boxes 
.info-row-item__value { white-space: pre-line; }
*/

/* Colour of circle in "TO-DO" heading on Overview page */
.circle-things-todo { background-color: #ec2031; }

/* Hide search on [Catalogues] page, but NOT in [My Learning] OR inside any of the [Catalogues > catalogueNames] pages 
form[action="/LMS/Catalogues/Catalogues"] .search-input { display: none; }
*/

/*-----------------------------------------------------------------*/
/* HTML ADMIN  */
/*-----------------------------------------------------------------*/

/*@media all and (max-width:991px)*/                                                                
.admin-hub-menu.hub-menu_mobile-deep-level .hub-menu__item:hover, 
.admin-hub-menu.hub-menu_mobile-deep-level .flow-menu-item:hover, 
.admin-hub-menu.hub-menu_mobile-deep-level .hub-menu__item.active, 
.admin-hub-menu.hub-menu_mobile-deep-level .flow-menu-item.active { background-color: #f4f4f4; } 
                                                                                
/*@media all and (max-width:991px)*/                                                                
.admin-hub-menu.hub-menu_mobile-deep-level .hub-menu__item, 
.admin-hub-menu.hub-menu_mobile-deep-level .flow-menu-item { background-color: #424242; }

.admin-hub-menu .hub-menu__item:hover .item-icon { background-color: transparent; }

.admin-hub-menu .hub-menu__user-title { display: block; }