/* Minification failed. Returning unminified contents.
(1546,23): run-time error CSS1034: Expected closing parenthesis, found ','
(1546,23): run-time error CSS1042: Expected function, found ','
(1546,29): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
.k-header h1 {
    margin: 0;
    padding: 30px 15px;
    font-size: 32px;
    font-weight: lighter;
}

/* Sticky footer styles
            -------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

.noBottomBorder {
    border-bottom: 0;
}

body {
    font-family: sans-serif, Arial, Helvetica;
}

.clearfix {
    clear: both;
}

.slideUp {
    top: -50px
}

.slideDown {
    top: 0;
}

.k-grid {
    font-family: sans-serif, Arial, Helvetica;
    border: 0;
}

.fancyFonts {
    font-family: sans-serif, Arial, Helvetica;
    /*font-family: 'HandelGothic BT', sans-serif, Arial, Helvetica;*/
}

.simpleFonts {
    font-family: sans-serif, Arial, Helvetica;
}

#marketing {
    float: right;
    background-image: none, linear-gradient(to bottom, #0089cf 1%, #007bc9 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089cf', endColorstr='#007bc9',GradientType=0 );
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
}

@media (max-width: 768px) {
    #marketing {
        float: none;
    }
}
/*exportAndSave*/
@media (min-width: 769px) {
    .exportAndSave {
        align: right;
    }
}

#Menu {
    background-image: none, linear-gradient(to bottom, #0089cf 1%, #007bc9 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089cf', endColorstr='#007bc9',GradientType=0 );
}

.marketingChatWithUs::before {
    background: url("../../images/hssSprites.png") no-repeat scroll 0 -221px;
    content: "";
    position: relative;
    left: 5px;
    top: 5px;
    width: 24px;
    height: 22px;
    float: left;
}

.marketingChatWithUs {
    width: 150px;
}

.contactUsPannel {
    height: 80px;
}

/*#marketing > li > span {
    padding-left: 30px !important;
    width:120px;
}*/
.contactUs li div div div {
    font-size: 14px;
    font-weight: 200;
}

.marketingCallUs::before {
    background: url("../../images/hssSprites.png") no-repeat scroll 0 -174px;
    content: "";
    position: relative;
    left: 10px;
    top: -2px;
    width: 40px;
    height: 22px;
    float: left;
}

/*.marketingCallUs {
    width: 165px;
}*/

#hssReportsMenu {
    background-image: none, linear-gradient(to bottom, #0089cf 1%, #007bc9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089cf', endColorstr='#007bc9',GradientType=0 );
}

.placeholders {
    margin: 30px auto;
}

.placeholder img {
    display: inline-block;
}

p .k-button {
    margin: 0 15px 0 0;
}

.btn-toggle {
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: none;
    height: 48px;
}

    .btn-toggle .k-icon {
        opacity: 1;
    }

    .btn-toggle,
    .k-primary.btn-toggle:hover,
    .btn-toggle:focus:active:not(.k-state-disabled):not([disabled]),
    .btn-toggle:focus:not(.k-state-disabled):not([disabled]) {
        box-shadow: none;
        border-radius: 0;
    }

        .btn-toggle .k-i-hbars,
        .k-primary.btn-toggle:hover .k-i-hbars,
        .btn-toggle:focus:active:not(.k-state-disabled):not([disabled]) .k-i-hbars,
        .btn-toggle:focus:not(.k-state-disabled):not([disabled]) .k-i-hbars {
            background-position: -80px -32px;
        }

@media (max-width: 767px) {
    .k-item {
        display: block;
        clear: both;
        float: none;
        width: 100%;
    }

    .k-header h1 {
        margin: 0;
        padding: 16px 15px 14px 60px;
        font-size: 18px;
        font-weight: lighter;
    }
}

.k-menu .multicolumn {
    width: 390px;
}

#marketing .multicolumn .k-item {
    float: left;
    width: 20px;
    background-color: transparent;
}

    #marketing .multicolumn .k-item .k-content {
        background-color: transparent;
    }

#marketing .multicolumn .k-last {
    width: 220px;
}

#marketing .multicolumn .k-first {
    float: left;
    width: 150px;
}

.hssIconColour {
    color: #0080c8; /*RGB(0,137,207); #0089CF*/
}

.hssYellowButton, .hssYellowButton:hover, .hssYellowButton:focus {
    color: #0080c8; /*RGB (0,237,207); #004288;*/
    background-color: #FFFAA0; /*#ffd50f;*/ /*RGB(255,212,28)#ffd800;*/
    border-color: #d7d278; /*RGB(255,212,28) !important; #ffd800*/
    border-radius: 4px;
    /*background-image: linear-gradient(rgb(255, 216, 0) 1%, rgb(255, 202, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd800', endColorstr='#ffca00',GradientType=0 );*/
}

.hssBlueButton, .hssBlueButton:hover, .hssBlueButton:focus {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.hssGreyButton, .hssGreyButton:hover, .hssGreyButton:focus {
    color: #005da3;
    background: linear-gradient(rgb(226, 226, 226) 0%, rgb(204, 204, 204) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#cccccc',GradientType=0 );
}

/*.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #0080c8;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer img {
    max-height: 50px;*/ /* Adjust the size as needed */
/*}*/

#bdy {
    padding-bottom: 80px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: #0080c8;
}

.blue-bar {
    width: 100%;
    height: 32px; /* Adjust the height as needed */
    background-color: #0080FF;
}

.footer-contentNew {
    align-items: center;
}

.footer-contentNew img {
    max-height: 50px; /* Adjust the size as needed */
}

    /* Default link color within the specific div */
    .footer-link-div a {
        color: white; /* Change to your desired color */
        text-decoration: none; /* Remove underline if desired */
        margin-right: 15px;
    }

    /* Link color on hover within the specific div */
        .footer-link-div a:hover {
            color: #FFC107; /* Change to your desired hover color */
        }


.footer_bottom .footer_menu ul li a {
    font-family: 'montserrat', Arial, Helvetica, sans-serif;
    display: block;
    color: #777777;
    font-size: 0.8125rem;
}

.footer_bottom {
    background: #292929;
    padding: 15px 0;
}

    .footer_bottom p {
        font-family: 'montserrat', Arial, Helvetica, sans-serif;
        font-size: 12px;
        margin: 5px 0;
        color: #777777;
        font-weight: 100;
        line-height: 18px;
    }

    .footer_bottom .footer_menu {
        padding: 0;
        margin-top: 15px;
    }

        .footer_bottom .footer_menu ul {
            margin: 5px 0;
            float: left;
        }

            .footer_bottom .footer_menu ul li {
                float: left;
                padding-right: 30px;
                padding-left: 0px;
            }

.visa-master-cards {
    text-align: right;
    margin-bottom: 15px;
}

    .visa-master-cards ul li {
        display: inline-block;
        position: relative;
        height: 44px;
        width: 70px;
        margin-right: 5px;
        border-radius: 8px;
        padding: 0px;
    }

        .visa-master-cards ul li img {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            width: 100%;
            height: auto;
            object-fit: initial;
            margin: auto;
            border-radius: 5px;
            max-width: 70px;
        }

    .visa-master-cards h3 {
        font-family: 'montserrat', Arial, Helvetica, sans-serif;
        color: #cccccc;
        display: block;
        padding: 0;
        margin: 5px 0;
        margin-bottom: 8px;
        margin-top: 15px;
        font-size: 1.125rem;
    }

    .visa-master-cards ul li:nth-child(4), .visa-master-cards ul li:nth-child(5) {
        background: #fff;
    }

        .visa-master-cards ul li:nth-child(4) img, .visa-master-cards ul li:nth-child(5) img {
            max-width: 60px;
        }

    .visa-master-cards ul li:nth-child(4), .visa-master-cards ul li:nth-child(5) {
        background: #fff;
    }

        .visa-master-cards ul li:nth-child(4) img, .visa-master-cards ul li:nth-child(5) img {
            max-width: 60px;
        }

.mobile-foot-logo.mobile_social {
    display: none;
}

@media screen and (max-width: 479px) {
    .footer_bottom p {
        padding-right: 80px;
    }
}

@media screen and (max-width: 767px) {
    .footer_bottom p {
        color: #FFFFFF;
    }

    .footer_bottom .footer_menu ul li a {
        color: #cccccc;
    }

    .visa-master-cards ul li {
        height: 25px;
        width: 45px;
        border-radius: 5px;
    }
}

@media screen and (max-width: 768px) {
    .mobile-foot-logo.mobile_social .footer_logo {
        margin: auto;
        text-align: center;
        width: 50%;
    }

    .footer_bottom p {
        text-align: center;
        padding-right: 0;
        color: #cccccc;
    }

    .footer_bottom .footer_menu ul {
        display: flex;
        float: none;
        justify-content: center;
    }

    .mobile_social .social_icons ul li {
        float: left;
        padding: 0 28px 0 0;
    }

        .mobile_social .social_icons ul li.fb a {
            background: url(../../Images/facebook-2x.png) no-repeat;
        }

        .mobile_social .social_icons ul li.twt a {
            background: url(../../Images/Twitter-2x.png) no-repeat;
        }

        .mobile_social .social_icons ul li.insta a {
            background: url(../../Images/Instagram-2x.png) no-repeat;
        }

        .mobile_social .social_icons ul li.ytube a {
            background: url(../../Images/youtube-2x.png) no-repeat;
        }

    .mobile_social .social_icons {
        margin: 20px 0 0;
        display: inline-block;
        display: flex;
        width: 100%;
        justify-content: center;
    }

        .mobile_social .social_icons ul li a {
            display: block;
            height: 25px;
            width: 25px;
            background-size: contain !important;
            background-position: center center;
            -webkit-transition: .1s ease-in-out background;
            -moz-transition: .1s ease-in-out background;
            -o-transition: .1s ease-in-out background;
            transition: .1s ease-in-out background;
        }

    .visa-master-cards {
        text-align: center;
        margin-bottom: 20px;
    }

        .visa-master-cards h3 {
            font-size: 14px;
            margin-bottom: 20px;
        }

    .mobile-foot-logo.mobile_social {
        display: block;
    }
}

@media (max-width: 991px) {
    .visa-master-cards ul li {
        height: 34px;
        width: 55px;
    }
}

.footer_content .mobile-foot-logo .footer_logo img {
    width: 58%;
}

.footer_content .footer_logo {
    max-width: 230px;
    margin-top: 100px;
}

    .footer_content .footer_logo a {
        display: block;
        margin: 0 0 10px;
    }

.footer_content .social_icons {
    margin: 30px 0 0;
    display: inline-block;
}

    .footer_content .social_icons ul li {
        float: left;
        padding: 0 28px 0 0;
    }

#hamburgerContainer {
    z-index: 1001;
    background-color: #fff;
    top: 8px;
    transition: all .1s ease;
}

#hamburger {
    z-index: 2;
    border-bottom: 2px solid #337ab7;
}

#myHssReportsHeader {
    border-top: 4px solid #007bc9;
    border-bottom: 4px solid #007bc9;
    height: 50px;
    width: 100%;
    z-index: 10001;
    transition: all .1s ease;
    overflow: hidden;
}

.hssHeaderBreadcrumbContainer {
    padding-top: 5px;
}

    .hssHeaderBreadcrumbContainer span {
        line-height: 35px;
        font-size: 18px;
    }

/*.k-menu .k-item, .k-widget.k-menu-horizontal > .k-item {
    padding-top: 5px;
    padding-bottom: 5px;
}*/
#Menu .k-menu .k-item, .k-widget.k-menu-horizontal > .k-item > ul > .k-item { /*menuitems*/
    padding-top: 2px;
    padding-bottom: 2px;
    /*font-family: sans-serif, Arial, Helvetica;*/
}

#showColumn .k-menu .k-item, .k-widget.k-menu-horizontal > .k-item > ul > .k-item { /*menuitems*/
    padding-top: 5px;
    padding-bottom: 10px;
    /*font-family: sans-serif, Arial, Helvetica;*/
}

.k-menu .k-menu-group > .dropdownMenuChildren {
    font-family: sans-serif, Arial, Helvetica;
    color: rgb(98,97,102);
    border-bottom-color: rgb(223,223,223);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: rgb(223,223,223);
    border-top-style: solid;
    border-top-width: 1px;
    background-color: white;
}

    .k-menu .k-menu-group > .dropdownMenuChildren:hover {
        background-color: #f7f7f7; /*#89d6f7;*/
    }

.k-menu .k-menu-group > .k-state-selected, .k-menu .k-menu-group > .k-state-selected:hover {
    background-color: #13688c;
}

.dropdownMenuChildren .k-link:link, .dropdownMenuChildren .k-link:visited {
    color: rgb(98,97,102);
}

.k-state-selected .k-link:link, .k-state-selected .k-link:visited {
    color: white;
}

.contactUs > li > div {
    width: 400px;
    height: 80px;
    background-color: #00569a;
    color: white;
}

.contactUs div {
    padding-top: 0;
    padding-bottom: 0;
}

.contactUs > li {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px;
    background-color: #00569a;
    color: white;
    margin-top: -10px;
    margin-bottom: -5px;
}

.contactUs label {
    color: #ffd200;
}

.contactUs a {
    color: white;
}

.k-state-active, .k-state-active:hover, .k-active-filter, .k-tabstrip .k-state-active {
    background-color: #3f9fd6;
}

#responsive-panel .k-state-active, #responsive-panel .k-state-active:hover {
    background-color: transparent;
}

#Menu > .k-state-border-down, #marketing > .k-state-border-down {
    background-color: #00569a;
}

#Menu > .k-state-hover, #marketing > .k-state-hover {
    background-color: #00569a;
}

/*.k-link:link, .k-link:visited, .k-nav-current.k-state-hover .k-link*/
#Menu > li > .k-link, #marketing > li > .k-link {
    color: #ffffff;
    padding: .5em 1.1em .4em;
    line-height: 1.34em;
    height: 35px;
}

.k-menu-group .k-menu-link {
    padding: 10px 20px;
}

.k-state-highlight {
    background-image: none, linear-gradient(to bottom, #0089cf 1%, #007bc9 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089cf', endColorstr='#007bc9',GradientType=0 );
}

#Menu {
    float: left;
    border-bottom: 0;
    border-top: 0;
    border-right: 0;
}

.k-grid .k-grid-container {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.k-grouping-header {
    color: #0070b3;
    background-color: #e3eef4;
    border: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.k-grid-header th {
    color: #0070b3;
    background-color: #e3eef4 !important;
    font-weight: bold;
    border: 0;
}

.k-grid .k-table-thead, .k-grid .k-table-tbody, .k-grid .k-table-tfoot {
    border: 0;
}

.k-treemap-title, .k-grid-header .k-header > .k-link {
    color: white;
    font-weight: bold;
}

.k-grid-top {
    color: white;
    /*Might need to remove this as this make every title bar coloured */
    background-color: #0080c9 !important;
}

/*Overwriting min height */
.k-no-data {
    min-height: 0px;
}

.toolbar {
    width: 100%;
}

/*.k-header
{
        color: white;
        background-color: #0080c9 !important;
}*/
.k-pager-wrap {
    background-color: #0080c9 !important;
}

.k-pager-sizes, .k-pager-info {
    color: #0070b3;
    font-weight: bold;
}

.exportToExcel:hover, .exportToExcel:focus {
    background-color: #e9ecef;
    /*background-color: #00569a;*/
}

/*.k-icon {
    background-image: url('../../images/kendoSprite.png');
    border-color: transparent;
}*/
@media (max-width: 1024px) {
    /*.k-icon:not(.k-loading) {
        background-image: url('../../images/kendoSprite_2x.png');
        border-color: transparent;
    }*/
    .exportToExcel .k-icon:not(.k-loading) {
        background-image: url('../../images/kendoSprite.png');
        border-color: transparent;
    }
    /*#showColumn .k-icon:not(.k-loading){
        background-image: url('../../images/kendoSprite.png');
        border-color: transparent;
    }*/
    /*date picker for hire history*/
    .k-picker-wrap > .k-select > .k-icon:not(.k-loading) {
        background-image: url('../../images/kendoSprite.png');
        border-color: transparent;
    }
}

/*.top-refresh .k-icon {
    background-image: url('../../images/blueOpalSprite.png');
    border-color: transparent;
}*/

/*.k-i-more-vertical {
    background-image: url('../../images/kendoSprite.png');
    border-color: transparent;
    background-position: 0px -32px;
}*/

.k-group-indicator > .k-link {
    color: white;
    font-weight: bold;
}
/* Calendar styling*/
.dateToolbar {
    color: #fff;
    margin-left: 8px;
}

.k-calendar-container > .k-calendar > .k-header {
    background-color: #00569a;
}
    /*Month*/
    .k-calendar-container > .k-calendar > .k-header > .k-nav-fast {
        /*font-family: 'HandelGothic BT', sans-serif, Arial, Helvetica;*/
        color: white;
    }
/* week */
.k-calendar-container > .k-calendar > table {
    width: 101%;
}

    .k-calendar-container > .k-calendar > table > thead {
        background-color: #0070b3;
        border-color: #0070b3;
    }

        .k-calendar-container > .k-calendar > table > thead > tr, .k-calendar-container > .k-calendar > table > thead > tr > th {
            color: white;
            /*font-family: 'HandelGothic BT', sans-serif, Arial, Helvetica;*/
            background-color: #0070b3;
            border-color: #0070b3;
        }
    /* not selected */
    .k-calendar-container > .k-calendar > table > tbody tr .k-link {
        color: darkgrey;
    }
    /* Selected */
    .k-calendar-container > .k-calendar > table > tbody tr .k-state-selected, .k-calendar-container > .k-calendar > table > tbody tr .k-state-selected .k-link {
        color: #004288;
        background-color: #ffd800;
    }
    /*other month */
    .k-calendar-container > .k-calendar > table > tbody tr .k-other-month .k-link {
        color: lightgrey;
    }
/* footer */
.k-calendar-container > .k-calendar > .k-footer .k-link {
    color: #101010;
}

div > .k-date-picker > span > span {
    background-color: #0070b3;
}

#showColumnToolbar {
    color: #0070b3;
}

/*#showColumn > a > span {
    background-color: #0070b3;
}*/

#hssReportsMobileMenu nav {
    background-image: none, linear-gradient(to bottom, #0089cf 1%, #007bc9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0089cf', endColorstr='#007bc9',GradientType=0 );
}

.SumoSelect, .SumoSelect > .CaptionCont {
    width: 100%;
}

    .SumoSelect, .SumoSelect > .CaptionCont {
        width: 100%;
    }

        .SumoSelect .optWrapper .select-all {
            height: auto;
            max-height: 250px;
            /*because the line is crossing through the label*/
        }

        .SumoSelect .optWrapper .MultiControls p, .SumoSelect .optWrapper p:hover, .SumoSelect .optWrapper p:focus {
            margin-bottom: 0;
            border-right: 1px solid white;
            border-left: 0;
            color: white;
            font-weight: bold;
            background-color: #0070b3;
            background-image: linear-gradient(rgb(0, 112, 179) 0%, rgb(0, 112, 179) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0070b3', endColorstr='#0070b3',GradientType=0 );
        }

            .SumoSelect .optWrapper .MultiControls p:nth-last-of-type(1), .SumoSelect .optWrapper .MultiControls p:nth-last-of-type(1):hover, .SumoSelect .optWrapper .MultiControls p:nth-last-of-type(1):focus {
                color: #004288;
                border-left: 1px solid white;
                border-right: 0;
                background-image: linear-gradient(rgb(255, 216, 00) 0%, rgb(255, 216, 0) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd800', endColorstr='#ffd800',GradientType=0 );
            }

.collapsedCell {
    display: none;
}

.financialSearch {
    max-width: 200px;
    padding-bottom: 10px;
}

/*.financialSearch input {
        width: 70%;
    }*/

.k-hierarchy-cell .k-icon {
    background-image: url('../../images/blueOpalSprite.png');
    border-color: transparent;
}

@media screen and (max-width:767px) {
    /**/
    .financialSearch {
        max-width: 50%;
        font-size: 20px;
    }

    .SumoSelect, .SumoSelect > .CaptionCont {
        width: 100%;
        margin-bottom: 5px;
    }
}

.siteListArea .tooltip > .tooltip-inner, h2 .tooltip > .tooltip-inner {
    color: RGB(0,137,207); /*#004288*/
    background-color: RGB(255,212,28); /*#ffd800*/
    font-weight: bold;
    padding-top: 5px;
    z-index: 2000;
}

h2 .tooltip {
    width: 50%;
}

    h2 .tooltip > .tooltip-inner {
        max-width: 100%;
        margin-left: 0px;
        margin-top: 20px;
        display: inline-block;
    }

.logisticsSummary label {
    font-weight: bold;
}

.k-grid-header th.k-header > .k-link {
    overflow-x: visible;
}

#internalsearch > div > ul > li {
    width: 175px;
}

/* column menu*/
/*.k-animation-container  .k-column-menu ul li  {
    height:15px;
}

.k-column-menu > ul > li > span {
    color: #00569a;
}*/


.k-grid-filter.k-state-active {
    background-color: #0089cf;
}
/* Nav bar*/
.navbar-toggle {
    position: relative;
    float: right;
    padding: 2px 10px;
    margin-top: 0;
    margin-right: 15px;
    margin-bottom: 0;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* SOH highlight in red est end date in past */
.expired {
    color: red;
    font-weight: bold;
}
/*Contract alert colours Jira 114*/
.contractAlertLive {
    color: RGB(61,155,54 );
    font-weight: bold;
}

.contractAlertSuspended {
    color: red;
}

.contractAlertProposed {
    color: red;
}

.italics {
    font-style: italic;
}
/*Header login details*/
.userSalutation {
    color: #5c5c5e;
    font-size: 14px;
    font-weight: bold;
}

.logoutArea {
    background: url(../../images/account-settings.png) no-repeat scroll 0 -960px rgba(0,0,0,0);
}
/* view Contract */
.spaceBottom {
    margin-bottom: 10px;
}


/*login box*/
.accountTitle {
    height: 50px;
}

.loggedBox .accountTitle {
    line-height: 50px;
    margin-bottom: 0px;
}

.loggedBox .accountTitle.switchAccount {
    background: url(../../images/account-settings.png) no-repeat scroll 0 14px rgba(0,0,0,0);
}
.loggedBox .accountTitle.switchVersion {
    background: url(../../images/account-settings.png) no-repeat scroll 0 14px rgba(0,0,0,0);
}

.mobileSwitchAccount {
    background: url(../../images/account-settings.png) no-repeat scroll 0 14px rgba(0,0,0,0);
    /*background: url(../../images/account-settings.png) no-repeat scroll 0 14px rgba(0,0,0,0);*/
    width: 100%;
    background-color: whitesmoke !important;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.mobileSelectAccountGroup {
    background: url(../../images/account-settings.png) no-repeat scroll 0 -222px rgba(0,0,0,0);
    width: 100%;
    background-color: whitesmoke !important;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

.mobileLogOut {
    background: url(../../images/account-settings.png) no-repeat scroll 0 -960px rgba(0,0,0,0);
    background-color: whitesmoke !important;
    padding-bottom: 10px;
}

.loggedBox .accountTitle.selectAccount {
    background: url(../../images/account-settings.png) no-repeat scroll 0 -222px rgba(0,0,0,0);
}

.loggedBox .accountTitle.logout {
    background: url(../../images/account-settings.png) no-repeat scroll 0 -960px rgba(0,0,0,0);
}

    .loggedBox .accountTitle.logout a {
        padding: 0px 0px 0px 65px
    }

.loggedBox .accountTitle.switchAccount a {
    padding: 0px 0px 0px 65px
}

.loggedBox .accountTitle.switchVersion a {
    padding: 0px 0px 0px 65px
}

.loggedBox .accountTitle.selectAccount a {
    padding: 0px 0px 0px 65px
}

#options_arrow {
    background: url(../../Images/blueOpalSprite.png) no-repeat scroll 0px -40px rgba(0,0,0,0);
    width: 13px;
    height: 13px;
    margin-top: 0px;
    display: inline-block;
    margin-left: 5px;
}

.loggedBox {
    z-index: 10;
    position: absolute;
    background-color: white;
    padding-right: 10px;
    border: solid;
    border-color: black;
    border-width: 1px;
}

/* 
 * MultiSelect CSS stolen from https://github.com/isteven/angular-multi-select
* for the account selection drop down typeahead thingy
* Don't modify things marked with ! - unless you know what you're doing
*/

/* ! vertical layout */
.multiSelect .vertical {
    float: none;
}

/* ! horizontal layout */
.multiSelect .horizontal:not(.multiSelectGroup) {
    float: left;
}

/* ! create a "row" */
.multiSelect .line {
    padding: 2px 0px 4px 0px;
    max-height: 30px;
    overflow: hidden;
    box-sizing: content-box;
}

/* ! create a "column" */
.multiSelect .acol {
    display: inline-block;
    min-width: 12px;
}

/* ! */
.multiSelect .inlineBlock {
    display: inline-block;
}

/* the multiselect button */
.multiSelect > button {
    display: inline-block;
    position: relative;
    text-align: center;
    cursor: pointer;
    border: 1px solid #c6c6c6;
    padding: 1px 8px 1px 8px;
    font-size: 14px;
    min-height: 38px !important;
    border-radius: 4px;
    color: #555;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    white-space: normal;
    background-color: #fff;
    background-image: linear-gradient(#fff, #f7f7f7);
}

    /* button: hover */
    .multiSelect > button:hover {
        background-image: linear-gradient(#fff, #e9e9e9);
    }

    /* button: disabled */
    .multiSelect > button:disabled {
        background-image: linear-gradient(#fff, #fff);
        border: 1px solid #ddd;
        color: #999;
    }

/* button: clicked */
.multiSelect .buttonClicked {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* labels on the button */
.multiSelect .buttonLabel {
    display: inline-block;
    padding: 5px 0px 5px 0px;
}

/* downward pointing arrow */
.multiSelect .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0px 0px 1px 12px !important;
    vertical-align: middle;
    border-top: 4px solid #333;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-bottom: 0 dotted;
}

/* the main checkboxes and helper layer */
.multiSelect .checkboxLayer {
    background-color: #fff;
    position: absolute;
    z-index: 999;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    min-width: 278px;
    display: none !important;
}

/* container of helper elements */
.multiSelect .helperContainer {
    border-bottom: 1px solid #ddd;
    padding: 8px 8px 0px 8px;
}

/* helper buttons (select all, none, reset); */
.multiSelect .helperButton {
    display: inline;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    height: 26px;
    font-size: 13px;
    border-radius: 2px;
    color: #666;
    background-color: #f1f1f1;
    line-height: 1.6;
    margin: 0px 0px 8px 0px;
}

.multiSelect .reset,
.multiSelect .closeButton {
    float: right;
    margin-left: 4px;
    margin-right: 0px;
    border-radius: 4px;
}

.multiSelect .selectNone,
.multiSelect .selectAll {
    margin-right: 4px;
}

/* clear button */
.multiSelect .clearButton {
    position: absolute;
    display: inline;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ccc;
    height: 22px;
    width: 22px;
    font-size: 13px;
    border-radius: 2px;
    color: #666;
    background-color: #f1f1f1;
    line-height: 1.4;
    right: 2px;
    top: 4px;
}

/* filter */
.multiSelect .inputFilter {
    border-radius: 2px;
    border: 1px solid #ccc;
    height: 26px;
    font-size: 14px;
    width: 100%;
    padding-left: 7px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
    color: #888;
    margin: 0px 0px 8px 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

/* helper elements on hover & focus */
.multiSelect .clearButton:hover,
.multiSelect .helperButton:hover {
    border: 1px solid #ccc;
    color: #999;
    background-color: #f4f4f4;
}

.multiSelect .helperButton:disabled {
    color: #ccc;
    border: 1px solid #ddd;
}

.multiSelect .clearButton:focus,
.multiSelect .helperButton:focus,
.multiSelect .inputFilter:focus {
    border: 1px solid #66AFE9 !important;
    outline: 0;
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important;
    box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important;
}

/* container of multi select items */
.multiSelect .checkBoxContainer {
    display: block;
    padding: 8px;
    overflow: hidden;
}

/* ! to show / hide the checkbox layer above */
.multiSelect .show {
    display: block !important;
}

/* item labels */
.multiSelect .multiSelectItem {
    display: block;
    padding: 3px;
    color: #444;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    position: relative;
    min-width: 278px;
    min-height: 32px;
}

    /* Styling on selected items */
    .multiSelect .multiSelectItem:not(.multiSelectGroup).selected {
        background-image: linear-gradient( #e9e9e9, #f1f1f1 );
        color: #555;
        cursor: pointer;
        border-top: 1px solid #e4e4e4;
        border-left: 1px solid #e4e4e4;
        border-right: 1px solid #d9d9d9;
    }

    .multiSelect .multiSelectItem .acol label {
        display: inline-block;
        padding-right: 30px;
        margin: 0px;
        font-weight: normal;
        line-height: normal;
    }

    /* item labels focus on mouse hover */
    .multiSelect .multiSelectItem:hover,
    .multiSelect .multiSelectGroup:hover {
        background-image: linear-gradient( #c1c1c1, #999 ) !important;
        color: #fff !important;
        cursor: pointer;
        border: 1px solid #ccc !important;
    }

/* item labels focus using keyboard */
.multiSelect .multiSelectFocus {
    background-image: linear-gradient( #c1c1c1, #999 ) !important;
    color: #fff !important;
    cursor: pointer;
    border: 1px solid #ccc !important;
}

/* change mouse pointer into the pointing finger */
.multiSelect .multiSelectItem span:hover,
.multiSelect .multiSelectGroup span:hover {
    cursor: pointer;
}

/* ! group labels */
.multiSelect .multiSelectGroup {
    display: block;
    clear: both;
}

/* right-align the tick mark (✔) */
.tickMarkChecked {
    background: url(../../Images/xcheck-box-img.png) no-repeat 0px -18px;
    width: 18px;
    height: 18px;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 10px;
}

.tickMarkUnChecked {
    background: url(../../Images/xcheck-box-img.png) no-repeat 0px 0px;
    width: 18px;
    height: 18px;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 10px;
}

.tickMarkCheckedMobile {
    background: url(../../Images/xcheck-box-img.png) no-repeat 0px -18px;
    width: 18px;
    height: 18px;
    display: inline-block;
    /*position: absolute;*/
    right: 10px;
    top: 7px;
    font-size: 10px;
}

.tickMarkUnCheckedMobile {
    background: url(../../Images/xcheck-box-img.png) no-repeat 0px 0px;
    width: 18px;
    height: 18px;
    display: inline-block;
    /*position: absolute;*/
    right: 10px;
    top: 7px;
    font-size: 10px;
}



/* hide the original HTML checkbox away */
.multiSelect .checkbox {
    color: #ddd !important;
    position: absolute;
    left: -9999px;
    cursor: pointer;
}

/* checkboxes currently disabled */
.multiSelect .disabled,
.multiSelect .disabled:hover,
.multiSelect .disabled label input:hover ~ span {
    color: #c4c4c4 !important;
    cursor: not-allowed !important;
}

/* If you use images in button / checkbox label, you might want to change the image style here. */
.multiSelect img {
    vertical-align: middle;
    margin-bottom: 0px;
    max-height: 22px;
    max-width: 22px;
}


/*set a height and a scroll for the account selection*/
#accountSelectionUnitsInfo {
    max-height: 280px;
    height: auto;
    margin-bottom: 15px;
    overflow-y: scroll;
}


.inset4 {
    margin-left: -210px;
}

.blueText {
    color: #005da3 !important;
    font-weight: bold;
}

/*#mobileAccountSelectArea button {
    width: 46%;
    margin-bottom: 10px;
    margin: 5px;
}*/

/*#mobileAccountSelectArea .closeButton {
    float: right;
}*/

#mobileAccountSelectArea {
    overflow:scroll;
}

#mobileSearchBox {
    width: 90%;
    color: darkgrey;
    margin: auto;
}

#accountSwitchTable td {
    padding: 10px;
}


/* Change text size on account selection placeholders for mobile view */
/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    #internalSearchCode, #internalSearchName, #internalSearchGroup {
        font-size: 60%;
    }
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    #internalSearchCode, #internalSearchName, #internalSearchGroup {
        font-size: 60%;
    }
}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    #internalSearchCode, #internalSearchName, #internalSearchGroup {
        font-size: 60%;
    }
}

.whitesmoke {
    background-color: whitesmoke;
}


.hssAlignRight {
    text-align: right;
}



/* grid Column Headers style*/
.resetColumns {
    margin-left: 5px;
}

.k-grid .k-grid-header .k-header .k-link {
    /* With the style below, allows multiline column headers */
    height: auto;
    color: #0070b3;
    font-weight: bold;
    border:0;
}

.k-grid .k-table-row {
    border-color: white !important;
    color: #000;
}

.k-grid-toolbar {
    background-color: transparent !important;
    color: #0080c9;
    border: 0;
}

.k-grid .k-grid-header .k-header {
    /* With the style above, allows multiline column headers */
    vertical-align: top;
    white-space: normal;
}

.k-list-content {
    background-color: #e4f1f7;
}

/* hide grid grouping area below 767px */
@media (max-width: 767px) {
    .k-grouping-header {
        display: none;
    }

    .k-grid-toolbar {
        display: none;
    }
}

@media (min-width: 768px) {
    .k-grid-toolbar {
        display: block;
    }
}

.toolbar label {
    color: #0080c9;
}

.toolbar span {
    color: #0080c9;
}

.text-navgray {
    color: rgb(0, 0, 0, 0.55);
}

#accountNameArea {
    text-overflow: ellipsis;
    overflow: hidden;
    height: 20px;
    white-space: nowrap;
}

.accountWrapper {
    font-size: 0.7rem;
}

.navbar {
    padding: 0;
}

.k-pager {
    background-color: transparent !important;
}

.k-grid-pager {
    border:0;
}

.k-grid td, .k-grid .k-table-td, .k-grid .k-grid-content, .k-grid .k-grid-header-locked, .k-grid .k-grid-content-locked {
    border-color:transparent;
}

.k-table-md {
    font-size: 0.7rem !important;
}

.k-column-title {
    font-size: 0.8rem !important;
    color: #0070b3;
}

.k-i-arrow-rotate-cw {
    color: #fff !important;
}

.k-icon {
    color: #0070b3 !important;
}

.k-button-flat-primary {
    color: #0070b3 !important;
}

.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    background-color: #0080c9 !important;
}

.k-loading-image {
    display: none !important;
}

.submit-progress-bg {
    background-color: lightgray;
    opacity: .5;
}

.k-calendar-nav-fast {
    color: #fff !important;
}

.k-input .k-icon {
    margin-left: 5px;
    order: 2;
}

.k-searchbox {
    float: right;
}

label {
    font-weight:bold;
}

@media (min-width: 1200px) {
    .row-cols-xl-8 > * {
        flex: 0 0 auto;
        width: 12.5%; /* 100/8 */
    }
}

.mw-300px {
    max-width: 18.75rem;
}

.height-30px {
    height: 30px;
}

.k-button-solid-base {
    background-color: #e3eef4;
}

.k-pager-refresh {
    margin-inline-start: 10px;
}

.k-picker-solid {
    background-color: #e3eef4 !important;
    color: #0080c9;
}

select.k-dropdown {
    border-color: #0080c9;
    background-color: #e3eef4;
    color: #0080c9;
}

.grid-not-loaded {
    margin-bottom: 100px;
}

.k-grid-header .k-grid-header-menu.k-active {
    background: #8ebbd3 !important;
}

.k-i-excel {
    color: #fff !important;
}

.max-height-50px {
    max-height: 50px !important;
}