/*
* Gartan Technologies (http://www.gartantech.com/)
*/
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 13px;
}

/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v13-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Open Sans'), local('OpenSans'), url('../fonts/open-sans-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsfers */
    url('../fonts/open-sans-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/open-sans-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/open-sans-v13-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

table .fa-lg, .input-group-addon .fa-lg, .input-group-btn .fa-lg {
    font-size: 1.18em;
}

h4.page-title {
    padding-bottom: 5px;
    margin: 0 0 11px;
    border-bottom: 1px solid #eee;
    font-size: 16px;
}

/* END FONT */

.margin-top-sm {
    margin-top: 0.5em;
}

.margin-top-md {
    margin-top: 1.0em;
}

.margin-top-lg {
    margin-top: 1.5em;
}

.breach {
    color: #ffffff !important;
    background-color: #F05133 !important;
}

.seatCell {
    cursor: pointer;
}

.seatBreach {
    font-weight: bold;
    color: #ff6c00;
    font-size: 13px;
    cursor: pointer;
}


    .seatBreach:hover {
        background-color: #F6F6F6;
    }


    .seatBreach.over {
        color: #00456E !important;
        background-color: #FAFFBD;
    }

    .seatBreach.over {
        color: #337ab7 !important;
        background-color: #FAFFBD;
    }

        .seatBreach.over > div.seatBreachIcon {
            color: #337ab7 !important;
            background-color: #FAFFBD;
        }

td.seatBreach.over {
    color: #337ab7 !important;
    background-color: #FAFFBD !important;
}

.seatBreachIcon {
    display: inline-block;
    width: 35px;
    background-color: #f6f6f6;
    border-right: solid 1px #ddd;
    background-color: #f6f6f6;
    color: #ff6c00;
    margin-right: 5px;
    text-align: center;
    cursor: pointer;
    padding: 3px;
    font-size: 14px;
}

.vehicleSeatCell {
    display: inline-block;
    width: 35px;
    margin-right: 5px;
    font-weight: bold;
    text-align: center;
    padding: 5px;
    cursor: pointer !important;
}

    .vehicleSeatCell.on {
        border-right: solid 1px #ddd;
        background-color: #f6f6f6;
    }

        .vehicleSeatCell.on:hover {
            color: #337ab7;
        }

    .vehicleSeatCell.over {
        background-color: #f6f6f6 !important;
        color: #00456E !important;
    }


    .vehicleSeatCell.selected {
        background-color: #0082CC !important;
        color: #ffffff !important;
    }

.applianceGroupHeader.over {
    color: #00456E !important;
    background-color: #FAFFBD;
}

.grabbable {
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

    /* (Optional) Apply a "closed-hand" cursor during drag operation. */
    .grabbable:active {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
    }

[draggable=true] {
    -khtml-user-drag: element;
}



.breachMin {
    color: #ffffff !important;
    background-color: #E9B008 !important;
}

.overstaffed {
    color: #ffffff !important;
    background-color: #32CD32 !important;
}

.special {
    border-top: solid #fba200 3px !important;
    cursor: pointer;
}

.special-black {
    border-top: solid #000000 3px !important;
    cursor: pointer;
}

.special-grey {
    border-top: solid #444444 3px !important;
    cursor: pointer;
}

.special-yellow > div:first-child {
    margin-top: -4px;
    border-top: solid #38761D 3px !important;
    cursor: pointer;
}

.special-green > div:first-child {
    margin-top: -4px;
    border-top: solid #38761D 3px !important;
    cursor: pointer;
}

.special-teal > div:first-child {
    margin-top: -4px;
    border-top: solid #134F5C 3px !important;
    cursor: pointer;
}

.special-blue > div:first-child {
    margin-top: -4px;
    border-top: solid #0B5394 3px !important;
    cursor: pointer;
}

.special-indigo > div:first-child {
    margin-top: -4px;
    border-top: solid #351C75 3px !important;
    cursor: pointer;
}

.special-darkpink > div:first-child {
    border-top: solid #741B47 3px !important;
    cursor: pointer;
}

.plus {
    background-color: #92D050;
}

.neg {
    background-color: #FF0000;
    color: white;
}

div.empDetailsCell {
    padding-right: 10px;
}

.grid-employee-label {
    text-transform: uppercase;
}

    .grid-employee-label.adjusted:before {
        font-family: "Font Awesome 5 Pro";
        content: "\f356";
        padding-left: 2px;
        padding-right: 5px;
        color: orange;
    }

.grid-appliance-label:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f207";
    padding-left: 2px;
    padding-right: 5px;
}


.grid-employee-label.temp-vehicle-contract:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f017";
    padding-left: 2px;
    padding-right: 5px;
    color: orange;
}



.adjusted:after {
    /* symbol for shift adjustments */
    /*font-family: "Font Awesome 5 Pro";   essential for enabling glyphicon 
    content: "\f347";     adjust as needed, taken from bootstrap.css 
    padding-left:2px;seatBreachIcon
    padding-right:5px;
    color: orange;*/
}



.sa {
    background-color: #bcdcec !important;
}

.note {
    position: relative;
}

    .note:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top: 12px solid #337AB7;
    }

.note-black {
    position: relative;
}

    .note-black:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top: 12px solid #000000;
    }

.note-grey {
    position: relative;
}

    .note-grey:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top: 12px solid #444444;
    }

.note-yellow {
    position: relative;
}

    .note-yellow:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top: 12px solid #FBA200;
    }

.note-green {
    position: relative;
}

    .note-green:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top: 12px solid #38761D;
    }

.note-teal {
    position: relative;
}

    .note-teal:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top: 12px solid #134F5C;
    }

.note-blue {
    position: relative;
}

    .note-blue:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top: 12px solid #0B5394;
    }

.note-indigo {
    position: relative;
}

    .note-indigo:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top: 12px solid #351C75;
    }

.note-darkpink {
    position: relative;
}

    .note-darkpink:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        display: block;
        border-left: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-top: 12px solid #741B47;
    }

.note:after.orange {
    border-top: 12px solid #351C75 !important;
}

a {
    color: #337ab7;
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }


span.control-label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 600;
    color: #5f646e;
}

label.control-label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 600 !important;
    color: #5f646e;
}

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

.LoadingDiv {
    text-align: center;
    padding: 8px;
    background-color: #FFF;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    font-size: 12px;
    background-color: #ffffcc;
    border: solid 1px #ffcc66;
}

.infoMessage {
    text-align: center;
    padding: 4px 10px;
    background-color: #FFF;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    font-size: 12px;
    background-color: #ffffcc;
    border: solid 1px #ffcc66;
}

.div-inline {
    display: inline-block;
}

.form-control[disabled], fieldset[disabled] .form-control {
    cursor: default !important;
}

/* Test Site Panel */
.testSitePanel {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    z-index: 1;
}

.testSitePanelMessage {
    padding: 5px 30px 5px 30px;
    font-size: 14px !Important;
    color: #FFFFFF;
    font-weight: bold;
    border: solid 1px #D2232A;
    background-color: #FAFFBD;
    color: #D2232A;
    border-radius: 6px;
    z-index: 900;
}
/* End Site Panel */

/* Start Install Panel */

.installPanel {
    padding-top: 50px;
}

    .installPanel h1 {
        color: #F15731;
        font-size: 14px;
        font-weight: bold;
        margin-top: 7px;
    }

    .installPanel h2 {
        color: #003F5F;
        font-size: 12px;
        font-weight: bold;
        padding-bottom: 10px;
    }

/* End Install Panel */


/* Custom Buttons */

button.btn:focus {
    outline: 0 !important;
}

button:focus {
    outline: 0;
}

.btn-grey {
    /*background-color: #F4F4F4;
    
	*/
    background-color: transparent;
    background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
    background-image: -webkit-linear-gradient(to bottom,#f5f5f5,#f1f1f1);
    background-image: linear-gradient(to bottom,#f5f5f5,#f1f1f1);
    border-color: #d9d9d9;
    color: #6e6e6e;
}

    .btn-grey:hover {
        border-color: #b2b2b2;
    }

/* New Buttons */
.btn-roster {
    color: #FFFFFF;
    background-color: #F05133;
    border-color: #C9654C;
}

.btn-default-addon {
    color: #999999;
    background-color: #eee;
    border-color: #ccc;
}

    .btn-default-addon:hover {
        color: #337ab7 !important;
        border-color: #ccc;
    }

.btn-roster:hover,
.btn-roster:focus,
.btn-roster:active,
.btn-roster.active,
.open .dropdown-toggle.btn-roster {
    color: #FFFFFF;
    background-color: #F06F48;
    border-color: #C9654C;
}

.btn-roster:active,
.btn-roster.active,
.open .dropdown-toggle.btn-roster {
    background-image: none;
}

.btn-roster.disabled,
.btn-roster[disabled],
fieldset[disabled] .btn-roster,
.btn-roster.disabled:hover,
.btn-roster[disabled]:hover,
fieldset[disabled] .btn-roster:hover,
.btn-roster.disabled:focus,
.btn-roster[disabled]:focus,
fieldset[disabled] .btn-roster:focus,
.btn-roster.disabled:active,
.btn-roster[disabled]:active,
fieldset[disabled] .btn-roster:active,
.btn-roster.disabled.active,
.btn-roster[disabled].active,
fieldset[disabled] .btn-roster.active {
    background-color: #F05133;
    border-color: #C9654C;
}

.btn-roster .badge {
    color: #F05133;
    background-color: #FFFFFF;
}


.btn-login {
    color: #FFFFFF;
    background-color: #013A57;
    border-color: #013A57;
}

    .btn-login:hover,
    .btn-login:focus,
    .btn-login:active,
    .btn-login.active,
    .open .dropdown-toggle.btn-login {
        color: #FFFFFF;
        background-color: #014f76;
        border-color: #013A57;
    }

    .btn-login:active,
    .btn-login.active,
    .open .dropdown-toggle.btn-login {
        background-image: none;
    }




.btn-navy {
    color: #FFFFFF;
    background-color: #013A57;
    border-color: #013A57;
}

    .btn-navy:hover,
    .btn-navy:focus,
    .btn-navy:active,
    .btn-navy.active,
    .open .dropdown-toggle.btn-navy {
        color: #FFFFFF;
        background-color: #014f76;
        border-color: #013A57;
    }

    .btn-navy:active,
    .btn-navy.active,
    .open .dropdown-toggle.btn-navy {
        background-image: none;
    }

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: default;
}

/* End Custom Buttons*/

/* Custom Panels*/
.panel-summary {
    border-radius: 4px;
}

.panel-summary-heading {
    padding: 5px 10px;
}

    .panel-summary-heading i {
        font-size: 14px;
    }

.panel-summary-body {
    padding: 10px;
}
/* End Custom Panels*/

/* Toggle Styles */

#wrapper {
    padding-top: 68px;
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    #wrapper.toggled {
        padding-left: 230px;
    }

/* Layout */
.wrapper {
    height: 100%;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
}

    .wrapper:before,
    .wrapper:after {
        content: " ";
        display: table;
    }

    .wrapper:after {
        clear: both;
    }

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 230px;
    width: 0;
    padding-top: 3px;
    margin-left: -230px;
    overflow-y: auto;
    background: #F5F5F5;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border-right: solid 1px #adadad;
    top: 73px;
    bottom: 0;
}

#wrapper.toggled #sidebar-wrapper {
    width: 230px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px 5px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -230px;
}

.content-wrapper {
    min-height: 100%;
    z-index: 800;
}


.main-header {
    position: relative;
    max-height: 100px;
    z-index: 1030;
}

    .main-header .navbar {
        -webkit-transition: margin-left 0.3s ease-in-out;
        -o-transition: margin-left 0.3s ease-in-out;
        transition: margin-left 0.3s ease-in-out;
        margin-bottom: 0;
        /*margin-left: 230px;*/
        border: none;
        min-height: 50px;
        border-radius: 0;
    }

    .main-header .navbar-custom-menu {
        float: right;
    }

@media (max-width: 991px) {
    .main-header .navbar-custom-menu a {
        color: inherit;
        background: transparent;
    }
}

.main-header .sidebar-toggle {
    float: left;
    background-color: transparent;
    background-image: none;
    font-family: "Font Awesome 5 Pro";
    color: #ffffff;
}

    .main-header .sidebar-toggle:before {
        content: "\f0c9";
    }

    .main-header .sidebar-toggle:hover {
        color: #fff;
    }

    .main-header .sidebar-toggle:focus,
    .main-header .sidebar-toggle:active {
        background: transparent;
    }

.main-header .navbar .nav > li > a > .label {
    position: absolute;
    top: 9px;
    right: 7px;
    text-align: center;
    font-size: 9px;
    padding: 2px 3px;
    line-height: .9;
}

.main-header .navbar-brand {
    color: #fff;
}

@media (max-width: 991px) {
    .navbar-custom-menu .navbar-nav > li {
        float: left;
    }

    .navbar-custom-menu .navbar-nav {
        margin: 0;
        float: left;
    }

        .navbar-custom-menu .navbar-nav > li > a {
            padding-top: 15px;
            padding-bottom: 15px;
            line-height: 20px;
        }
}

@media (max-width: 767px) {
    .main-header {
        position: relative;
    }

        .main-header .navbar {
            width: 100%;
            float: none;
        }

        .main-header .navbar {
            margin: 0;
        }

        .main-header .navbar-custom-menu {
            float: right;
        }
}


.dropdown-menu {
    box-shadow: none;
    border-color: #eee;
}

    .dropdown-menu > li > a {
        color: #777;
    }

        .dropdown-menu > li > a:hover {
            background-color: #e1e3e9;
            color: #333;
        }

.navbar-nav > .messages-menu > .dropdown-menu {
    width: 280px;
    padding: 0 0 0 0;
    margin: 0;
    top: 100%;
}

.navbar-nav > .notifications-menu > .dropdown-menu {
    width: 185px;
    margin: 0;
    top: 100%;
}

    .navbar-nav > .notifications-menu > .dropdown-menu > li,
    .navbar-nav > .messages-menu > .dropdown-menu > li {
        position: relative;
    }

        .navbar-nav > .notifications-menu > .dropdown-menu > li.header,
        .navbar-nav > .messages-menu > .dropdown-menu > li.header {
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            background-color: #ffffff;
            padding: 7px 10px;
            border-bottom: 1px solid #f4f4f4;
            color: #444444;
            font-size: 14px;
        }

        .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
        .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 4px;
            border-bottom-left-radius: 4px;
            font-size: 12px;
            background-color: #fff;
            padding: 7px 10px;
            border-bottom: 1px solid #eeeeee;
            color: #444 !important;
            text-align: center;
        }

@media (max-width: 991px) {
    .navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
    .navbar-nav > .messages-menu > .dropdown-menu > li.footer > a {
        background: #fff !important;
        color: #444 !important;
    }
}

.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a:hover,
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a:hover {
    text-decoration: none;
    font-weight: normal;
}

.navbar-nav > .notifications-menu > .dropdown-menu > li .menu,
.navbar-nav > .messages-menu > .dropdown-menu > li .menu {
    max-height: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: hidden;
}

    .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a,
    .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
        display: block;
        white-space: nowrap;
        /* Prevent text from breaking */
        border-bottom: 1px solid #f4f4f4;
    }

        .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a:hover,
        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:hover {
            background: #f4f4f4;
            text-decoration: none;
        }

    .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a {
        color: #444444;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 10px;
    }

        .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa {
            width: 20px;
        }

    .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a {
        margin: 0;
        padding: 10px 10px;
    }

        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > div > img {
            margin: auto 10px auto auto;
            width: 40px;
            height: 40px;
        }

        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
            padding: 0;
            margin: 0 0 0 45px;
            color: #444444;
            font-size: 15px;
            position: relative;
        }

            .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 > small {
                color: #999999;
                font-size: 10px;
                position: absolute;
                top: 0;
                right: 0;
            }

        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
            margin: 0 0 0 45px;
            font-size: 12px;
            color: #888888;
        }

        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:before,
        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
            content: " ";
            display: table;
        }

        .navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a:after {
            clear: both;
        }

.navbar-nav > .user-menu > .dropdown-menu {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    padding: 1px 0 0 0;
    border-top-width: 0;
}

    .navbar-nav > .user-menu > .dropdown-menu,
    .navbar-nav > .user-menu > .dropdown-menu > .user-body {
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
    }

        .navbar-nav > .user-menu > .dropdown-menu > li.user-header {
            height: 175px;
            padding: 10px;
            text-align: center;
        }

            .navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
                z-index: 5;
                height: 90px;
                width: 90px;
                border: 3px solid;
                border-color: transparent;
                border-color: rgba(255, 255, 255, 0.2);
            }

            .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p {
                z-index: 5;
                color: #fff;
                color: rgba(255, 255, 255, 0.8);
                font-size: 17px;
                margin-top: 10px;
            }

                .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p > small {
                    display: block;
                    font-size: 12px;
                }

        .navbar-nav > .user-menu > .dropdown-menu > .user-body {
            padding: 15px;
            border-bottom: 1px solid #f4f4f4;
            border-top: 1px solid #dddddd;
        }

            .navbar-nav > .user-menu > .dropdown-menu > .user-body:before,
            .navbar-nav > .user-menu > .dropdown-menu > .user-body:after {
                content: " ";
                display: table;
            }

            .navbar-nav > .user-menu > .dropdown-menu > .user-body:after {
                clear: both;
            }

            .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
                color: #444 !important;
            }

@media (max-width: 991px) {
    .navbar-nav > .user-menu > .dropdown-menu > .user-body a {
        background: #fff !important;
        color: #444 !important;
    }
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background-color: #f9f9f9;
    padding: 10px;
}

    .navbar-nav > .user-menu > .dropdown-menu > .user-footer:before,
    .navbar-nav > .user-menu > .dropdown-menu > .user-footer:after {
        content: " ";
        display: table;
    }

    .navbar-nav > .user-menu > .dropdown-menu > .user-footer:after {
        clear: both;
    }

    .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default {
        color: #666666;
    }

@media (max-width: 991px) {
    .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default:hover {
        background-color: #f9f9f9;
    }
}

.navbar-nav > .user-menu .user-image {
    float: left;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: -2px;
}

@media (max-width: 767px) {
    .navbar-nav > .user-menu .user-image {
        float: none;
        margin-right: 0;
        margin-top: -8px;
        line-height: 10px;
    }
}
/* Add fade animation to dropdown menus by appending
 the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
/* Fix dropdown menu in navbars */
.navbar-custom-menu > .navbar-nav > li {
    position: relative;
}

    .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
        position: absolute;
        right: 0;
        left: auto;
    }

@media (max-width: 991px) {
    .navbar-custom-menu > .navbar-nav {
        float: right;
    }

        .navbar-custom-menu > .navbar-nav > li {
            position: static;
        }

            .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
                position: absolute;
                left: auto;
                border: 1px solid #ddd;
                background: #fff;
            }
}

.main-footer {
    background: #fff;
    padding: 15px;
    color: #444;
    border-top: 1px solid #d2d6de;
}
/* Fixed layout */
.hold-transition .content-wrapper,
.hold-transition .main-footer,
.hold-transition .main-sidebar,
.hold-transition .main-header .navbar {
    /* Fix for IE */
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}



/* Toolbar Toolbar Styles */
.toolbar {
    padding: 12px 15px;
    margin-top: 3px;
    background-color: #FAFAFA;
    border-bottom: solid 1px #E1E1E1;
    white-space: nowrap;
    width: 100%;
    z-index: 4;
}

.toolbarMap {
    position: fixed;
    padding: 12px 15px;
    margin-top: 3px;
    width: 100%;
    z-index: 4;
}


/* End Toolbar Styles */

/* Filter bar Styles */
.filterBar {
    padding-bottom: 15px;
}


/* End Filter bar  Styles */


/* modal dialog styles*/

.modal-content {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.modalContentPanels {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 400px;
    word-break: break-all;
    word-wrap: break-word;
    padding-right: 3px;
    border: solid 1px #f6f6f6;
}

    .modalContentPanels.borderless {
        border: none;
    }

/* end modal dialog styles*/

/* Sub Header Menu Styles */
.headerSubMenu {
    background-color: #003F5F;
    border: none;
    position: fixed;
    width: 100%;
}

    .headerSubMenu > ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        .headerSubMenu > ul > li {
            float: left;
        }

            .headerSubMenu > ul > li a {
                position: relative;
                display: block;
                padding: 6px 15px;
                color: #ccc;
                text-decoration: none;
            }

                .headerSubMenu > ul > li a:hover {
                    color: #ffffff;
                }

                .headerSubMenu > ul > li a.active {
                    color: #ffffff;
                }

                .headerSubMenu > ul > li a.active {
                    color: #ffffff;
                }

/*End Sub Menu Styles */


/* Logo Styles */
@media(min-width:768px) {
    #logo-group > span {
        display: inline-block;
        height: 43px;
        float: left;
    }
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 45px;
    width: 230px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sidebar-nav li {
        text-indent: 3px;
        line-height: 40px;
    }

        .sidebar-nav li a {
            display: block;
            text-decoration: none;
            color: #999999;
        }

            .sidebar-nav li a:hover {
                text-decoration: none;
                color: #717171;
                background: rgba(255,255,255,0.2);
            }

            .sidebar-nav li a:active,
            .sidebar-nav li a:focus {
                text-decoration: none;
            }

    .sidebar-nav > .sidebar-brand {
        height: 65px;
        font-size: 18px;
        line-height: 60px;
    }

        .sidebar-nav > .sidebar-brand a {
            color: #999999;
        }

            .sidebar-nav > .sidebar-brand a:hover {
                color: #fff;
                background: none;
            }


.input-disabled-date {
    background-color: #ffffff !important;
}



@media(min-width:768px) {
    #wrapper {
        padding-left: 0;
    }

        #wrapper.toggled {
            padding-left: 225px;
        }

    #sidebar-wrapper {
        width: 0;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 230px;
    }

    #page-content-wrapper {
        padding-bottom: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }

    .login-info {
        display: block;
        font-size: 12px;
        height: 39px;
        color: #fff;
        border: solid transparent;
        border-width: 1px 0;
        box-shadow: inset 1px 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.07);
        width: 100%;
        margin: 0 !important;
        border-bottom: 1px solid #525151;
    }

        .login-info img {
            height: 38px;
        }

    .imgOpenIdConnect {
        background: url(../img/openIdConnect.png) no-repeat
    }

    .input-date-xsm {
        width: 100px !important;
    }

    .input-daterange input {
        text-align: left;
        border-radius: 0px !important;
    }

    .datepicker table {
        font-size: 12px !important;
    }

    select.input-xsm {
        font-size: 12px !important;
        padding: 2px;
        height: 25px;
        line-height: 25px;
    }

    input.input-xsm {
        font-size: 12px !important;
        padding: 2px;
        padding-left: 6px;
        height: 24px;
        line-height: 20px;
    }
}


.datetime-spacer {
    padding: 0 !important;
    border: 0;
}

.datetimePicker input.date {
    max-width: 105px !important;
}

.datetimePicker input.time {
    max-width: 65px !important;
}

.time-picker-addon {
    padding: 6px 8px !important;
    background-color: transparent !important;
    border: 0 !important;
}

.page-footer {
    padding: 15px 15px;
    position: relative;
    bottom: 0;
    width: 100%;
}

    .page-footer img {
        float: right;
        height: 38px;
    }

    .page-footer p {
        font-size: 9px;
        float: right;
    }


/** Form **/
.form-control {
    font-size: 13px;
    border-color: #ddd;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
    border-radius: 0;
}


    .form-control:focus {
        border-color: #3c8dbc;
        box-shadow: none;
    }

/*.form-group .checkbox{margin-left: 0; padding-left: 0;}*/

.form-group-compact .form-group {
    margin-bottom: 10px;
}

#panelControlPanel .form-horizontal .control-label {
    text-align: left;
    text-transform: uppercase;
    font-size: 11px;
}


.placeholder {
    color: #a4a3a3;
}

.form-padded {
    padding-bottom: 10px;
}

.invisibleControl {
    display: none;
}

label {
    font-weight: normal !important;
}

.label-small {
    font-weight: normal !important;
    font-size: 10px;
}

.label-red {
    background-color: #F06F48;
}

.label-green {
    background-color: #51C558;
}

.label-lg.label-green {
    padding-top: 3px;
    padding-bottom: 3px;
}

.label-lg.label-overstaffed {
    padding-top: 3px;
    padding-left: 10px;
    padding-right: 10px;
}

.label-overstaffed {
    background-color: #366cb3;
}

.label-lg {
    font-size: 12px;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-left: 4px;
    margin-right: 10px;
}

.label-skill-breach {
    font-size: 15px;
    font-weight: bold;
    color: #337ab7;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    padding-left: 10px;
}

.input-group-addon {
    font-size: 12px;
}

.input-group-addon-xsm {
    font-size: 10px;
    padding: 3px 10px !important;
}

.input-group-white span {
    background-color: #FFF;
    border-color: #dddddd;
}

.input-group-white input {
    border-right-style: none;
}

/* File Input */
.btn-file {
    margin-top: 4px;
    position: relative;
    overflow: hidden;
}

    .btn-file input[type=file] {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 100%;
        min-height: 100%;
        font-size: 100px;
        text-align: right;
        filter: alpha(opacity=0);
        opacity: 0;
        outline: none;
        background: white;
        cursor: inherit;
        display: block;
    }

/* End File Input */

/* Tabs panel */
.tabbable-panel {
    padding: 10px;
}

/* Default mode */

.employee-dialog-tabs > li > a {
    font-size: 0.9em;
    padding: 8px 15px;
}

.tabbable-line > .nav-tabs {
    border: none;
    margin: 0px;
}

    .tabbable-line > .nav-tabs > li {
        margin-right: 2px;
    }

        .tabbable-line > .nav-tabs > li > a {
            border: 0;
            margin-right: 0;
            color: #737373;
            font-size: 90%;
        }

            .tabbable-line > .nav-tabs > li > a > i {
                color: #a6a6a6;
            }

        .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover, .tabbable-line > .nav-tabs > li.active {
            border-bottom: 2px solid #F05133;
        }

            .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
                border: 0;
                background: none !important;
                color: #333333;
            }

                .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
                    color: #a6a6a6;
                }

            .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
                margin-top: 0px;
            }

            .tabbable-line > .nav-tabs > li.active > a {
                border: 0;
                color: #333333;
            }

                .tabbable-line > .nav-tabs > li.active > a > i {
                    color: #404040;
                }

.tabbable-line > .tab-content {
    margin-top: -3px;
    background-color: #fff;
    border: 0;
    border-top: 1px solid #eee;
    padding: 15px 0;
}

.portlet .tabbable-line > .tab-content {
    padding-bottom: 0;
}

/* End Tabs panel */




.bootstrap-datetimepicker-widget table td.day {
    padding: 0;
}

.table {
    border: 1px solid #dddddd;
}

    .table > thead > tr > th, .gridAdminHeader_td {
        background-color: #F6F6ED;
        border-bottom: 0;
    }

    .table a {
        color: #1d69b6;
    }

        .table a:hover {
            color: #F15731;
            text-decoration: none;
        }

.table-rowbordered {
    border: 0;
}

    .table-rowbordered > tbody > tr > td {
        border-top: none;
        border-bottom: 1px solid #ddd;
    }

tr.gridAdminHeader > td, tr.gridAdminHeader > th {
    background-color: #f6f6ed;
    font-weight: 600;
}

tr.gridAdminPager > td > table > tbody > tr > td {
    font-size: 12px;
    padding: 2px;
}


tr.gridAdminHeader > td a {
}

/*Converts default pager to bootstap pager and repositions to allow for tables wider than the screen */
.gridAdminPager {
    background-color: #f6f6ed;
    font-weight: normal;
    color: #666666;
}

    .gridAdminPager td {
        background-color: #f6f6ed;
    }

    .gridAdminPager a {
        font-weight: normal;
    }

/* added custom pager */
.gridAdminPager {
    display: none;
}



/*locked to table footer*/
.gridAdminPagerLocked {
    background-color: #f6f6ed;
    font-weight: normal;
    color: #666666;
}

    .gridAdminPagerLocked td {
        background-color: #f6f6ed;
    }

    .gridAdminPagerLocked a {
        font-weight: normal;
    }


.pagination > .active-page > span {
    z-index: 3;
    color: #88898a;
    background-color: #e6e4e4;
    border-color: #ddd;
    cursor: default;
}

.pagination > .active-page > a {
    z-index: 3;
    color: #88898a;
    background-color: #e6e4e4;
    border-color: #ddd;
    cursor: default;
}


.gridEllipsisLabel {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    overflow: hidden;
}

.btn-group-xsm > .btn, .btn-xsm {
    padding: 5px 10px;
    font-size: 11px;
    line-height: 1.1;
    border-radius: 2px;
}

@media (max-width: 767px) {
    .btn-group-xsm > .btn, .btn-xsm {
        padding: 10px 10px;
    }
}

.schedule-button-group > button, .schedule-button-group > div > button {
    font-size: 12px;
}

@media (max-width: 767px) {
    .schedule-button-group > button, .schedule-button-group > div > button {
        font-size: 11px;
    }
}



.checkbox-sm {
    font-size: 12px;
}

.bookingCreated {
    background-color: #83e87e !important;
}

/* Start New Sidebar */
.sidebar {
    padding-bottom: 10px;
    padding-top: 8px;
}

.sidebar-menu > li.header {
    padding: 0 9px 10px 15px;
    margin-top: 15px;
    font-size: 11px;
    color: #F05133;
}

    .sidebar-menu > li.header > i {
        color: #337ab7;
        padding-top: 3px;
        cursor: pointer;
    }

.sidebar-menu > li.searchNavMenuControl {
    padding: 0 5px 5px 12px;
}

    .sidebar-menu > li.searchNavMenuControl > div > input {
        background-color: #dddcdc;
        color: #444444;
        border-radius: 3px;
        font-size: 12px !important;
        font-family: "Open Sans",Arial,Helvetica,Sans-Serif;
    }


        .sidebar-menu > li.searchNavMenuControl > div > input:focus {
            background-color: #ffffff;
            border-color: #E0E0E0;
        }


.sidebar-menu > li.header > i:hover {
    color: #F05133;
}


.sidebar-menu > li.profile > div > img.img-thumbnail, .sidebar-menu > li.profile > div > span > img {
    height: 45px;
    width: 45px;
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 2px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd !important;
    border-radius: 2px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    width: 45px;
    margin-right: 10px;
}

.sidebar-menu > li.profile {
    padding: 0 0 10px 15px;
    margin-top: 15px;
    min-width: 130px;
    white-space: nowrap;
}

    .sidebar-menu > li.profile > .profile-name > div > .username {
        color: #F05133;
        width: 150px;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sidebar-menu > li.profile div > a {
        color: #337ab7;
        border: none;
        padding-right: 5px;
    }

        .sidebar-menu > li.profile div > a:hover {
            color: #003f5f;
        }


    .sidebar-menu > li.profile > div > img {
    }

.sidebar-menu > li.profile {
    white-space: nowrap;
    display: inline-block;
    width: 200px
}

.sidebar-menu > li.button-item {
    padding: 0 25px 15px 15px;
}

    .sidebar-menu > li.button-item .btn-sm {
        width: 100%
    }

.sidebar-form input:focus {
    border-color: transparent;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sidebar-menu > li {
        position: relative;
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

        .sidebar-menu > li > a {
            padding: 8px 5px 8px 15px;
            display: block;
            font-size: 12px;
        }

            .sidebar-menu > li > a > .fa,
            .sidebar-menu > li > a > .glyphicon,
            .sidebar-menu > li > a > .ion {
                width: 20px;
            }

        .sidebar-menu > li .label,
        .sidebar-menu > li .badge {
            margin-top: 3px;
            margin-right: 5px;
        }

    .sidebar-menu li > a > .fa-angle-left {
        width: auto;
        height: auto;
        padding: 0;
        margin-right: 10px;
        margin-top: 3px;
    }

    .sidebar-menu li.active > a > .fa-angle-left {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .sidebar-menu li.active > .treeview-menu {
        display: block;
    }

    .sidebar-menu .treeview-menu {
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        padding-left: 5px;
    }

        .sidebar-menu .treeview-menu > li {
            margin: 0;
        }

            .sidebar-menu .treeview-menu > li.active a {
                color: #F15731;
            }

            .sidebar-menu .treeview-menu > li > a {
                padding: 5px 5px 5px 15px;
                display: block;
                font-size: 0.96em;
                background: #eee;
                margin-left: -5px;
                border-left: 3px solid #eee;
                font-size: 12px;
            }

    .sidebar-menu li > .treeview-menu a:hover {
        background: #FAFAFA;
        color: #F15731;
    }

    .sidebar-menu .treeview-menu > li > a > .fa,
    .sidebar-menu .treeview-menu > li > a > .glyphicon,
    .sidebar-menu .treeview-menu > li > a > .ion {
        width: 20px;
    }

    .sidebar-menu .treeview-menu > li > a > .fa-angle-left,
    .sidebar-menu .treeview-menu > li > a > .fa-angle-down {
        width: auto;
    }

    .sidebar-menu a {
        color: #003F5F;
        text-decoration: none;
        border-left: 3px solid transparent;
    }

    .sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
        color: #000000;
        background: #E0E0E0;
        border-left-color: #F05133;
    }

    .sidebar-menu > li > a > i {
        margin-top: 4px;
    }

    .sidebar-menu li.active > div > .treeview-menu a:hover {
        color: #F15731;
    }

.sidebar-form {
    border-radius: 3px;
    border: 1px solid #b2b2b2;
    margin: 6px 10px;
}

    .sidebar-form input[type="text"],
    .sidebar-form .btn {
        box-shadow: none;
        background-color: #F5F5F5;
        border: 1px solid transparent;
        -webkit-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .sidebar-form input[type="text"]:focus,
        .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
            background-color: #fff;
            color: #666;
        }

            .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
                border-left-color: #fff;
            }

.sidebar-menu > li > div > b {
    position: absolute !important;
    right: 10px;
    top: 10px;
    float: right;
    font-size: 11px;
    color: #003F5F;
}


.employeeProfileName {
    width: 50px;
}
/* End New Sidebar */

/* contact menu*/
.contact-menu div {
    color: #003F5F;
    text-decoration: none;
    border-left: 3px solid transparent;
    cursor: pointer;
}

.contact-menu > li > div {
    padding: 8px 5px 8px 15px;
    display: block;
}

.contact-menu > li:hover > div, .contact-menu > li.active > div {
    color: #000000;
    background: #E0E0E0;
    border-left-color: #F05133;
}

a.iconLink {
    color: #999999;
}

    a.iconLink:hover {
        color: #337ab7 !important;
    }

a.iconLink-warning {
    color: #999999;
}

    a.iconLink-warning:hover {
        color: #F06F48 !important;
    }


/* end contact menu*/

.dropdown-menu {
    font-size: 12px;
}

#effect_iGartan {
    font-weight: normal;
    display: none;
    background-color: #003F5F;
    border-left: 1px solid #999999;
    top: 70px;
    bottom: 0px;
    position: fixed;
}



.breadcrumb {
    background: none;
    margin-bottom: 0;
    padding-top: 0;
    padding-left: 0;
    font-size: 12px !important;
}

    .breadcrumb > li > a {
        color: #337ab7;
        text-decoration: none;
        display: inline-block;
    }


    .breadcrumb > li > span {
        color: #6f6d6d;
    }

.breadcrumb {
    position: relative;
    top: 0;
    right: 0;
    float: none;
    padding-top: 6px;
    padding-left: 0;
    margin-bottom: 10px;
}


@media (max-width: 767px) {

    .breadcrumb {
        background: #ECF0F5;
    }

        .breadcrumb > li {
            margin-left: 5px;
        }

    .filterBar .btn {
        width: 100%;
        padding: 10px;
    }

    .form-control .date input {
        width: 100%;
    }

    .toolbar {
        margin-top: 8px;
    }

    .headerSubMenu > ul > li a {
        color: #ffffff;
    }
}

hr.no-margin {
    margin-top: 0;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.ui-widget.ui-widget-content {
    z-index: 9999;
}


/* Message Centre Dropdown */

.dropdown-message {
    padding-top: 0;
}

.dropdown-menu.dropdown-message li a {
    padding-top: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.dropdown-menu.dropdown-message li.dropdown-footer a {
    border-bottom: none !important;
    padding-bottom: 3px;
}

.unread {
    color: #337ab7;
    font-weight: bold;
}

/* End Message Centre Dropdown */


/* Text Colours */
.text-red {
    color: #F06F48;
}

.text-green {
    color: #51C558;
}

.text-grey {
    color: #acacac;
}

.text-lightgrey {
    color: #eeeeee;
}

.text-darkgrey {
    color: #646e7b;
}

.text-purple {
    color: #94006B;
}

.text-orange {
    color: #FFA500;
}

.text-darkorange {
    color: #F15731 !important;
}

.text-darkblue {
    color: #1b5486 !important;
}

.text-white {
    color: #ffffff;
}

.text-overstaffed {
    color: #366cb3;
}

.text-darkgrey a:hover {
    color: #337ab7;
}

/* End Text Colours */

/* Text Size */
.text-sm {
    font-size: 11px;
}

.text-xsm {
    font-size: 10px;
}
/* Text Size */


@media (min-width: 767px) {
    .no-padding-lg {
        padding: 0 !important;
    }
}

.dialog-logo {
    width: 40px;
    float: left;
    padding-right: 10px;
}

.dialog-logo-multiline {
    margin-top: 5px;
}


.dialog-header {
    padding-top: 4px;
}

/* Datetime Picker  */
.ui-timepicker-div .ui-widget-header {
    margin-bottom: 8px;
}

.ui-timepicker-div dl {
    text-align: left;
}

    .ui-timepicker-div dl dt {
        float: left;
        clear: left;
        padding: 0 0 0 5px;
    }

    .ui-timepicker-div dl dd {
        margin: 0 10px 10px 40%;
    }

.ui-timepicker-div td {
    font-size: 90%;
}

.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.ui-timepicker-div .ui_tpicker_unit_hide {
    display: none;
}

.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
    background: none;
    color: inherit;
    border: none;
    outline: none;
    border-bottom: solid 1px #555;
    width: 95%;
}

    .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus {
        border-bottom-color: #aaa;
    }

.ui-timepicker-rtl {
    direction: rtl;
}

    .ui-timepicker-rtl dl {
        text-align: right;
        padding: 0 5px 0 0;
    }

        .ui-timepicker-rtl dl dt {
            float: right;
            clear: right;
        }

        .ui-timepicker-rtl dl dd {
            margin: 0 40% 10px 10px;
        }

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine {
    padding-right: 2px;
}

    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
    .ui-timepicker-div.ui-timepicker-oneLine dt {
        display: none;
    }

    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
        display: block;
        padding-top: 2px;
    }

    .ui-timepicker-div.ui-timepicker-oneLine dl {
        text-align: right;
    }

        .ui-timepicker-div.ui-timepicker-oneLine dl dd,
        .ui-timepicker-div.ui-timepicker-oneLine dl dd > div {
            display: inline-block;
            margin: 0;
        }

            .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
            .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before {
                content: ':';
                display: inline-block;
            }

            .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
            .ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before {
                content: '.';
                display: inline-block;
            }

    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
    .ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
        display: none;
    }


.ui-datepicker {
    display: none;
    padding: 0.2em 0.2em 0;
    width: 17em;
}

    .ui-datepicker .ui-datepicker-header {
        padding: 0.2em 0;
        position: relative;
        background: #003F5F !important;
        color: White !important;
    }

.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_cd0a0a_256x240.png") !important;
}
/*End Datetime Picker  */




@media (min-width: 992px) {
    .sidebar-menu .dropdown-menu {
        position: relative;
        z-index: inherit;
        left: 0;
        margin: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        background: #E0E0E0;
        visibility: visible;
    }
}

.sidebar-menu .dropdown-menu {
    position: static;
    z-index: 2001;
    float: none;
    margin: 0;
    border: 0;
    padding: 0;
    visibility: visible;
    -webkit-box-shadow: none;
    background-color: #FFFFFF;
}

    .sidebar-menu .dropdown-menu a {
        background: #FFFFFF;
    }

        .sidebar-menu .dropdown-menu a:hover {
            color: #F15731;
            background-color: transparent;
        }

        .sidebar-menu .dropdown-menu a.active {
            color: #F15731;
        }

    .sidebar-menu .dropdown-menu > li.active > a {
        color: #F15731;
    }

.sidebar-menu > li > a:focus {
    background-color: transparent;
}

.sidebar-menu > li.active > a:focus {
    background-color: #E0E0E0;
}


.sidebar-menu .dropdown-menu > .active > a, .sidebar-menu .dropdown-menu > .active > a:focus {
    background-color: transparent;
}

.sidebar-menu .dropdown-menu {
    box-shadow: none;
}


.sidebar-menu .submenu-item {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

    .sidebar-menu .submenu-item:hover {
    }

.expand-icon {
    position: absolute !important;
    right: 10px;
    top: 10px;
}


/* JQuery Tweaks */
.ui-widget-header {
    background: #2F8DC5 !important;
}

.ui-widget.ui-widget-content {
    z-index: 9999;
}

#accordion .ui-widget.ui-widget-content {
    z-index: 1 !important;
}

/*End JQuery Tweaks */

/* Accordians */
.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: "Font Awesome 5 Pro"; /* essential for enabling glyphicon */
    content: "\f078"; /* adjust as needed, taken from bootstrap.css */
    float: right; /* adjust as needed */
    color: grey; /* adjust as needed */
}

.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\f054"; /* adjust as needed, taken from bootstrap.css */
}

.panel-title {
    font-size: 12px;
}
/* Wnd Accordians */

/*Install and Setup Pages*/
.configValueField {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.editableform .form-control {
    min-width: 300px;
}
/* Scrollable pre */
.pre-x-scrollable {
    overflow: auto;
    word-wrap: normal;
    white-space: pre;
}

.UploadTitle {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 15px;
}

.UploadSelectedFile {
    color: #337ab7;
    margin-top: 2px;
    margin-left: 2px;
}

.dateTimePickerControls {
    /*white-space: nowrap;*/
}


/* Shift Adjustment */

.empCard {
}

.ui-datepicker-trigger {
    margin-left: 5px;
}

.rotaText {
    width: 250px;
    /*font-family: Verdana, Arial, Helvetica, sans-serif;*/
    font-size: 11px;
}

.shiftPattern {
    /*font-family: Verdana,Arial,Helvetica,sans-serif;*/
    font-size: 10px;
}

.shiftOffBreachDay {
    /*font-family: Verdana,Arial,Helvetica,sans-serif;*/
    font-size: 11px;
    padding: 3px 12px 3px 12px;
    background-color: #EAE9E9;
    border: 2px Solid #F05133;
}

.shiftOnBreachDay {
    /*font-family: Verdana,Arial,Helvetica,sans-serif;*/
    font-size: 11px;
    padding: 3px 7px 3px 7px;
    background-color: #9bd4ea;
    border: 2px Solid #F05133;
}

.shiftOn {
    /*font-family: Verdana,Arial,Helvetica,sans-serif;*/
    font-size: 11px;
    padding: 3px 6px 3px 6px;
    background-color: #9bd4ea;
    border: 1px Solid Grey;
}

.shiftOff {
    /*font-family: Verdana,Arial,Helvetica,sans-serif;*/
    font-size: 11px;
    padding: 3px 12px 3px 12px;
    background-color: #EAE9E9 !important;
    border: 1px Solid Grey;
}

.rosterEmployee {
    background-image: url(../../images/employee_or.png);
    float: left;
    background-repeat: no-repeat;
    background-position: center;
    width: 25px;
    height: 19px;
}

.hr {
    background-color: #bcbbbb;
    width: 100%;
    height: 1px;
    margin-top: 5px;
    margin-bottom: 5px;
}
/* End Shift Adjustment */


.imgOpenIdConnect {
    background-image: url('../img/openIdConnect.png');
    height: 30px;
    width: 122px;
    background-repeat: no-repeat;
    border: none;
    background-color: #ffffff;
    cursor: pointer;
}

.headerText {
    font-weight: bold;
    color: #003F60;
    font-size: 14px;
}

.border-top {
    border-top: 1px solid #f15832;
}

.application-enviornment-panel {
    border: 1px solid #A8A6A6;
    padding-top: 4px;
    padding-bottom: 3px;
    border-top: none;
    margin-top: -2px;
    display: none;
    text-align: center;
    background: #FAFFBD;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    color: #F15731;
}

.table-rotagrid {
    font-size: 12px;
}

    .table-rotagrid.table-bordered > thead > tr > th,
    .table-rotagrid.table-bordered > tbody > tr > th,
    .table-rotagrid.table-bordered > tfoot > tr > th,
    .table-rotagrid.table-bordered > thead > tr > td,
    .table-rotagrid.table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #c5c4c4;
    }

.poptable-rotagrid {
    font-size: 12px;
}

    .poptable-rotagrid.table-bordered > thead > tr > th,
    .poptable-rotagrid.table-bordered > tbody > tr > th,
    .poptable-rotagrid.table-bordered > tfoot > tr > th,
    .poptable-rotagrid.table-bordered > thead > tr > td,
    .poptable-rotagrid.table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #c5c4c4 !important;
    }



/*table.table-rotagrid tr:nth-child(even) {
    border-color: #000000 !important;
}*/

.gridHeader {
    padding: 5px;
    background-color: #F4F4F4;
    border-bottom: 0;
    font-weight: bold;
    font-size: 105%;
}

.gridHeaderUpdated {
    padding: 5px;
    background-color: #F4F4F4;
    border-bottom: 0;
    font-weight: bold;
    font-size: 105%;
}


.table-rotagridUpdated {
    font-size: 12px;
    overflow: hidden;
}

    .table-rotagridUpdated.table-bordered > thead > tr > th,
    .table-rotagridUpdated.table-bordered > tbody > tr > th,
    .table-rotagridUpdated.table-bordered > tfoot > tr > th,
    .table-rotagridUpdated.table-bordered > thead > tr > td,
    .table-rotagridUpdated.table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #c5c4c4;
    }


    .table-rotagridUpdated td.viewVacationCell  {
        padding: 6px;
        position: relative;
        outline: 0;
        font-size: small;
        font-weight: 100;
        color: white;
        text-align:center;
    }
    
body:not(.nohover) .table-rotagridUpdated tbody  tr:hover {
    background-color: powderblue;
    cursor: pointer;
}
body:not(.nohover) .table-rotagridUpdated th:hover {
    background-color: powderblue;
    cursor: pointer;
}
.table-rotagridUpdated td.viewVacationCell:hover::after,
.table-rotagridUpdated thead th.VacationDayCell:not(:empty):hover::after,
.table-rotagridUpdated td.viewVacationCell:focus::after,
.table-rotagridUpdated thead th.VacationDayCell:not(:empty):focus::after {
    content: '';
    height: 5000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}

.table-rotagridUpdated td.viewVacationCell:hover::after,
.table-rotagridUpdated th.VacationDayCell:hover::after {
    background-color: powderblue;
    cursor: pointer;
}

.table-rotagridUpdated td.viewVacationCell:focus::after,
.table-rotagridUpdated th.VacationDayCell:focus::after {
    background-color: RED;
}




.poptable-rotagridUpdated {
    font-size: 12px;
    overflow: hidden;
}

    .poptable-rotagridUpdated.table-bordered > thead > tr > th,
    .poptable-rotagridUpdated.table-bordered > tbody > tr > th,
    .poptable-rotagridUpdated.table-bordered > tfoot > tr > th,
    .poptable-rotagridUpdated.table-bordered > thead > tr > td,
    .poptable-rotagridUpdated.table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 1px solid #c5c4c4;
    }


    .poptable-rotagridUpdated td.viewVacationCell {
        padding: 6px;
        position: relative;
        outline: 0;
        font-size: small;
        font-weight: 100;
        color: white;
        text-align: center;
    }

body:not(.nohover) .poptable-rotagridUpdated tbody tr:hover {
    background-color: powderblue;
    cursor: pointer;
}

body:not(.nohover) .poptable-rotagridUpdated th:hover {
    background-color: powderblue;
    cursor: pointer;
}

.poptable-rotagridUpdated td.viewVacationCell:hover::after,
.poptable-rotagridUpdated thead th.VacationDayCell:not(:empty):hover::after,
.poptable-rotagridUpdated td.viewVacationCell:focus::after,
.poptable-rotagridUpdated thead th.VacationDayCell:not(:empty):focus::after {
    content: '';
    height: 5000px;
    left: 0;
    position: absolute;
    top: -5000px;
    width: 100%;
    z-index: -1;
}

.poptable-rotagridUpdated td.viewVacationCell:hover::after,
.poptable-rotagridUpdated th.VacationDayCell:hover::after {
    background-color: powderblue;
    cursor: pointer;
}

.poptable-rotagridUpdated td.viewVacationCell:focus::after,
.poptable-rotagridUpdated th.VacationDayCell:focus::after {
    background-color: RED;
}


.rosterHeader {
    cursor: pointer;
}


.gridSubHeader {
    background-color: #fcfcf4;
    border-bottom: 0;
    font-weight: bold;
}

.gridSubHeader2 {
    background-color: #ffffff;
    border-bottom: 0;
    font-weight: bold;
    color: #00456E;
}

.gridDivider {
    padding: 0px;
    height: 10px;
}

    .gridDivider > td {
        display: none;
    }

table.table-rotagrid tr:hover td.empDetailsCell {
    background-color: #f6f6f6;
    color: #F15731;
    cursor: pointer;
    max-width: 300px !important;
}

table.table-rotagrid tr:hover td.viewVacationCell {
    background-color: #f6f6f6;
    color: #F15731;
    cursor: pointer;
    max-width: 300px !important;
}

table.poptable-rotagrid tr:hover td.empDetailsCell {
    background-color: #f6f6f6;
    color: #F15731;
    cursor: pointer;
    max-width: 300px !important;
}

table.poptable-rotagrid tr:hover td.viewVacationCell {
    background-color: #f6f6f6;
    color: #F15731;
    cursor: pointer;
    max-width: 300px !important;
}

.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
    border: 1px solid #ddd;
}

.empRow {
    color: #003F5F;
}

.empCell {
    color: #003F5F;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 30px;
}

    .empCell:hover {
        background-color: #fcf8e3 !important;
        color: #000000;
        background-image: none;
    }

.popempCell {
    color: #003F5F;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 14% !important;
    max-width: 14% !important;
    width: 14% !important;
}

    .popempCell:hover {
        color: #000000;
        background-image: none;
    }

td.part {
    text-decoration: underline;
    text-decoration-style: dotted;
}


/* first shift */
th.fs, td.fs {
    border: 1px solid #333;
    border-left: 2px solid #c3c3c3 !important;
}

/* last shift */
th.ls, td.ls {
    border: 1px solid #333;
    border-right: 2px solid #c3c3c3 !important;
}


.table-rotagrid > thead > tr > th {
    padding: 2px;
    vertical-align: middle;
    text-align: center;
    border-bottom-width: 1px;
    min-width: 30px;
    white-space: nowrap;
    background-color: #F4F4F4;
}


    .table-rotagrid > thead > tr > th:nth-child(1) {
        text-align: left !important;
        border-bottom-width: 1px;
        white-space: nowrap;
    }

.table-rotagrid > tbody > tr > td {
    padding: 2px;
    text-align: center;
    border-bottom-width: 1px;
    min-width: 20px;
    white-space: nowrap;
}


table.table-rotagrid tr > td.on.startsLate {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eae9e9+0,eae9e9+50,c4ebff+51,c4ebff+100,c4ebff+100 */
    background: rgb(234,233,233); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(234,233,233,1) 0%, rgba(234,233,233,1) 50%, rgba(196,235,255,1) 51%, rgba(196,235,255,1) 100%, rgba(196,235,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(234,233,233,1) 0%,rgba(234,233,233,1) 50%,rgba(196,235,255,1) 51%,rgba(196,235,255,1) 100%,rgba(196,235,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(234,233,233,1) 0%,rgba(234,233,233,1) 50%,rgba(196,235,255,1) 51%,rgba(196,235,255,1) 100%,rgba(196,235,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eae9e9', endColorstr='#c4ebff',GradientType=1 ); /* IE6-9 */
}

table.table-rotagrid tr > td.on.endsEarly {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c4ebff+50,eae9e9+50 */
    background: rgb(196,235,255); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(196,235,255,1) 50%, rgba(234,233,233,1) 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(196,235,255,1) 50%,rgba(234,233,233,1) 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(196,235,255,1) 50%,rgba(234,233,233,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4ebff', endColorstr='#eae9e9',GradientType=1 ); /* IE6-9 */
}

table.table-rotagrid tr > td.off {
    background-color: #EAE9E9;
}

table.table-rotagrid tr > td.shiftoff {
    background-color: #FCFCF4;
}





.poptable-rotagrid > thead > tr > th {
    padding: 2px;
    vertical-align: middle;
    text-align: center;
    border-bottom-width: 1px;
    white-space: nowrap;
    background-color: #F4F4F4;
}


    /*.poptable-rotagrid > thead > tr > th:nth-child(1) {
        border-bottom-width: 1px;
        white-space: nowrap;
    }*/

.poptable-rotagrid > tbody > tr > td {
    padding: 2px;
    text-align: center;
    border-bottom-width: 1px;
    white-space: nowrap;
    min-width: 14% !important;
    max-width: 14% !important;
    width: 14% !important;
}


table.poptable-rotagrid tr > td.on.startsLate {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eae9e9+0,eae9e9+50,c4ebff+51,c4ebff+100,c4ebff+100 */
    background: rgb(234,233,233); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(234,233,233,1) 0%, rgba(234,233,233,1) 50%, rgba(196,235,255,1) 51%, rgba(196,235,255,1) 100%, rgba(196,235,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(234,233,233,1) 0%,rgba(234,233,233,1) 50%,rgba(196,235,255,1) 51%,rgba(196,235,255,1) 100%,rgba(196,235,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(234,233,233,1) 0%,rgba(234,233,233,1) 50%,rgba(196,235,255,1) 51%,rgba(196,235,255,1) 100%,rgba(196,235,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eae9e9', endColorstr='#c4ebff',GradientType=1 ); /* IE6-9 */
}

table.poptable-rotagrid tr > td.on.endsEarly {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c4ebff+50,eae9e9+50 */
    background: rgb(196,235,255); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(196,235,255,1) 50%, rgba(234,233,233,1) 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(196,235,255,1) 50%,rgba(234,233,233,1) 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(196,235,255,1) 50%,rgba(234,233,233,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4ebff', endColorstr='#eae9e9',GradientType=1 ); /* IE6-9 */
}

table.poptable-rotagrid tr > td.off {
    background-color: #EAE9E9;
}

table.poptable-rotagrid tr > td.shiftoff {
    background-color: #FCFCF4;
}

.currentDayCell {
    color: #0082CC;
}

.rowHeader {
    text-align: left !important;
}

.stationEmployee {
    cursor: pointer;
}

    .stationEmployee:hover {
        color: #F05133;
    }

.stationHeader, .applianceHeader {
    cursor: pointer;
}

.dayCell.over {
    background-color: #286090;
    color: #FFFFFF;
}

.no-padding {
    padding: 0 !important;
}

.hdr {
    max-width: 130px !important;
}

.table-rotagrid > tbody > tr > td:nth-child(1) {
    vertical-align: middle;
    text-align: left !important;
    border-bottom-width: 1px;
    white-space: nowrap;
}

/*.poptable-rotagrid > tbody > tr > td:nth-child(1) {
    vertical-align: middle;
    border-bottom-width: 1px;
    white-space: nowrap;
    min-width: 14% !important;
    max-width: 14% !important;
    width: 14% !important;
}*/

th.rosterHeaderDay {
    border-right: 0 !important;
}

th.rosterHeader {
    cursor: pointer;
    border-right: 0 !important;
    max-width: 130px !important;
}

    th.rosterHeader:before {
        content: "\f0fe";
        font-weight: 600;
        font-family: "Font Awesome 5 Pro";
        font-size: 11px;
        color: #9FA1A4;
        padding-right: 5px;
    }

th.rosterUpdatedHeader {
    cursor: pointer;
    border-right: 0 !important;
    max-width: 130px !important;
}

    th.rosterUpdatedHeader:before {
        font-weight: 600;
        font-family: "Font Awesome 5 Pro";
        font-size: 11px;
        color: #9FA1A4;
        padding-right: 5px;
    }

.stationGroupHeader, .applianceGroupHeader, .summaryTableHeader, .availSummaryTableHeader {
    padding-left: 5px !important;
    cursor: pointer;
    border-right: 0 !important;
    max-width: 130px !important;
}

    .stationGroupHeader:before, .applianceGroupHeader:before, .summaryTableHeader:before, .availSummaryTableHeader:before {
        content: "\f0fe";
        font-weight: 600;
        font-family: "Font Awesome 5 Pro";
        font-size: 11px;
        color: #9FA1A4;
        padding-right: 5px;
    }

.applianceDivider {
    border-top: 3px Solid #a2a2a2;
}

.expanded.stationGroupHeader:before, .expanded.applianceGroupHeader:before, .expanded.rosterHeader:before, .expanded.summaryTableHeader:before, .expanded.availSummaryTableHeader:before {
    content: "\f146";
}

.floatTable {
    border-bottom: 1px solid #ddd !important;
}

.table-rotagrid > thead > tr > th, .table-rotagrid > tbody > tr > td {
    padding: 4px;
}

.table-rotagrid > tbody > tr.altRow > td {
    background-color: rgba(139, 139, 139, 0.05);
}

table.table-rotagrid tr > td.on {
    background-color: #def4ff;
}

.poptable-rotagrid > thead > tr > th, .poptable-rotagrid > tbody > tr > td {
    padding: 4px;
}

.poptable-rotagrid > tbody > tr.altRow > td {
    background-color: rgba(139, 139, 139, 0.05);
}

table.poptable-rotagrid tr > td.on {
    background-color: #def4ff;
}


td.empty {
    border-left: 0 !important;
    border-right: 0 !important;
    width: 2px;
}

th.empty {
    border-left: 0 !important;
    border-right: 0 !important;
    width: 2px;
}

.grid-wrapper-div {
    overflow: auto;
    border: 1px solid #f6f6f6;
    margin-right: -15px !important;
    min-height: 300px;
}

.popgrid-wrapper-div {
    /*overflow: auto;*/
    border: 1px solid #f6f6f6;
    margin-right: -15px !important;
    min-height: 90px;
}

.grid-wrapper1-div {
    overflow: auto;
    border: 1px solid #f6f6f6;
    margin-right: -15px !important;
    min-height: 200px;
    min-width:200px;
}
#preload-01 {
    background: url(../img/person.png) no-repeat -9999px -9999px;
}

.pageOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter: alpha(opacity=20);
    -moz-opacity: 0.2;
    -khtml-opacity: 0.2;
    opacity: 0.2;
    z-index: 100001;
}

.pageOverlayLoader {
    background-image: url(../img/ajax-loader.gif);
    background-repeat: no-repeat;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 301;
}


.application-enviornment-panel {
    border: 1px solid #A8A6A6;
    padding-top: 4px;
    padding-bottom: 3px;
    border-top: none;
    margin-top: -2px;
    display: none;
    text-align: center;
    background: #FAFFBD;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    color: #F15731;
}

.tooltip > .tooltip-inner {
    background-color: #000000;
    color: #FFFFFF;
    border: none;
    padding: 5px;
}

/* hide tooltip of smaller devices - they cause a double click requirement */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .tooltip {
        display: none !important;
    }
}


#rightPanel {
    font-weight: normal;
    display: none;
    background-color: #003F5F;
    border-left: 1px solid #999999;
    top: 0px;
    bottom: 0px;
    position: fixed;
    opacity: 0.95;
    filter: alpha(opacity=95);
    width: 330px;
    height: 100%;
    right: 0px;
    z-index: 99999;
}

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR
*******************************/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
    z-index: 99999;
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
    left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
    -o-transition: opacity 0.3s linear, right 0.3s ease-out;
    transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
}

/*******************************
* END MODAL AS LEFT/RIGHT SIDEBAR
*******************************/

/*******************************
* LEGENDS
*******************************/

#scheduleLegend .legendCell {
    border: solid 1px #999;
    text-align: center;
    height: 25px;
    width: 25px;
    padding: 2px;
    margin-right: 5px;
}

#scheduleLegend .list-group-item {
    border: 0;
    padding: 5px 5px;
}

#scheduleLegend .title {
    padding-top: 3px;
    margin-left: 10px;
    border: 0;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11px;
    color: #2b4256;
}


#scheduleLegend .skillCell {
    padding-top: 3px;
    margin-left: 3px;
    border: 0;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 11px;
    border-radius: 25px;
}

/*******************************
* END LEGEND
*******************************/

/*******************************
* STATUS COLOURS
*******************************/

.onduty {
    background-color: #9bd4ea;
}

.offduty {
    background-color: #EAE9E9;
}

.overstaffed {
    background-color: #0F9D58;
}

.crewed {
    background-color: #FFFFFF;
}

.minimum {
    background-color: #FFFFFF;
}

.breached {
    background-color: #FF0000;
}

.ph {
    background-color: #C8A2C8;
}


.expired {
    background-color: #A4E560;
}

.expired-90 {
    background-color: #EBB71F;
}

.expired-365 {
    background-color: #FC5050;
}

.expired-366 {
    background-color: #C8A2C8;
}


/*******************************
* END STATUS COLOURS
*******************************/


/*******************************
* START BOTTOM PANEL
*******************************/


.panelControlPanel {
    background-color: #003F5F;
    border-top: 4px solid #003F5F;
    width: 99.9%;
    height: auto;
    min-height: 360px;
    z-index: 10;
    left: 0px;
    position: fixed;
    bottom: 0px;
    opacity: 0.95 !important;
    filter: alpha(opacity=95) !important;
}


.QAMenuToggle {
    background-image: url(../images/QAmenu_show.png);
    background-position: center;
    background-repeat: no-repeat;
    bottom: 0;
    cursor: pointer;
    float: left;
    height: 15px;
    left: 3px;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 1;
    opacity: .3;
    filter: alpha(opacity=70);
}

    .QAMenuToggle:hover {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important;
    }

.QA_menu_sub_icon_general, .QA_menu_super_icon_bookings {
    background-image: url(../images/menu_bookings.png);
}

.QA_menu_super_icon_VacCover {
    background-image: url(../images/menu_vc.png);
}

.QA_menu_super_icon_SA {
    background-image: url(../images/menu_sa.png);
}

.QA_menu_super_icon_Officers {
    background-image: url(../images/menu_officers.png);
}

.QA_menu_super_icon_Employee {
    background-image: url(../images/iconUser.png);
}

.QA_menu_sub_icon_Standard {
    background-image: url(../images/menu_bookings.png);
}

.QA_menu_sub_icon_VacCover {
    background-image: url(../images/menu_vc.png);
}

.QA_menu_sub_icon_Sickness {
    background-image: url(../images/therm1.png);
}

.QA_menu_sub_icon_Scale {
    background-image: url(../images/menu_sun.png);
}

.QA_menu_sub_icon_PH {
    background-image: url(../images/menu_cal.png);
}

.QA_menu_sub_icon_TOIL {
    background-image: url(../images/menu_toil.png);
}

.QA_menu_sub_icon_OT {
    background-image: url(../images/menu_ot.png);
}

.QA_menu_sub_icon_SA {
    background-image: url(../images/menu_sa.png);
}

.QA_menu_sub_icon_Officers {
    background-image: url(../images/menu_officers.png);
}

.QA_menu_sub_icon_oncall {
    background-image: url(../images/menu_oncall.png);
}

.QA_menu_super_icon_altershift {
    background-image: url(../images/menu_altersh.png);
}

.QA_menu_sub_icon_xduty {
    background-image: url(../images/menu_xduty.png);
}

.QA_menu_sub_icon_managehours {
    background-image: url(../images/menu_managehours.png);
}

.QA_menu_sub_icon_Employee {
    background-image: url(../images/iconUser.png);
}

.QA_menu_super {
    color: #fff;
    float: left;
    width: 205px;
    font-size: 11px;
    margin-bottom: 0;
    padding: 10px 5px 10px 15px;
    border: 0 solid #fff;
    cursor: pointer;
    text-transform: uppercase;
}

.QA_menu_super_active {
    color: #fff;
    float: left;
    width: 205px;
    font-size: 11px;
    margin-bottom: 0;
    padding: 10px 5px 10px 15px;
    border: 0 solid #fff;
    cursor: pointer;
    text-transform: uppercase;
    background-color: #356883;
    border-left: 3px solid #F05133;
    padding-left: 12px;
}

.QA_menu_sub {
    color: #fff;
    float: left;
    width: 225px;
    font-size: 11px;
    margin-bottom: 5px;
    margin-left: 15px;
    padding: 0;
    border: 0 solid #fff;
    text-transform: uppercase;
}

.QA_menu_actionPanel {
    color: #fff;
    float: left;
    font-size: 17px;
    margin-bottom: 5px;
    margin-left: 15px;
    padding: 0;
    border: 0 solid #fff;
    line-height: 26px;
}

.QA_menu_super:hover {
    background-color: #356883;
}

.QA_menu_super_title {
    float: left;
    margin-top: 7px;
}

.QA_menu_super_icon {
    float: left;
    height: 30px;
    width: 30px;
    margin-right: 15px;
    background-repeat: no-repeat;
    background-position: left 5px center;
}

.menu_close2 {
    background-image: url(../images/QAmenu_hide.png);
    background-repeat: no-repeat;
    background-position: center center;
    height: 40px;
    margin-top: -32px;
    width: 100%;
    cursor: pointer;
}

.menu_close {
    float: right;
    background-image: url(../images/menu_close.png);
    background-repeat: no-repeat;
    height: 40px;
    margin-top: 5px;
    width: 40px;
    cursor: pointer;
}

    .menu_close:hover {
        background-image: url(../images/menu_close_h.png);
    }

.menu_min {
    float: right;
    background-image: url(../images/menu_min.png);
    background-repeat: no-repeat;
    height: 40px;
    margin-top: 5px;
    width: 40px;
    cursor: pointer;
}

    .menu_min:hover {
        background-image: url(../images/menu_min_h.png);
    }

.menu_max {
    float: right;
    background-image: url(../images/menu_max.png);
    background-repeat: no-repeat;
    height: 40px;
    margin-top: 5px;
    width: 40px;
    cursor: pointer;
}

    .menu_max:hover {
        background-image: url(../images/menu_max_h.png);
    }

.menu_DayView {
    float: right;
    background-image: url(../images/menu_dayview.png);
    background-repeat: no-repeat;
    height: 40px;
    margin-top: 5px;
    width: 40px;
    cursor: pointer;
}

    .menu_DayView:hover {
        background-image: url(../images/menu_dayview_h.png);
    }

.QA_menu_super_SV:hover:before {
    content: "Reply!"
}

.QA_menu_sub_icon {
    float: left;
    height: 30px;
    width: 30px;
    margin-right: 10px;
    background-repeat: no-repeat;
    background-position: left 5px center;
}


/*******************************
* END BOTTOM PANEL
*******************************/


.modal-search-control {
    width: 90%;
    border: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    padding-left: 0;
    background: none;
    font-size: 12px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
}


/*******************************
* TOOLTIP
*******************************/

.tooltip-inner {
    max-width: none;
    white-space: nowrap;
}

.default-tooltip + .tooltip > .tooltip-inner {
    background-color: #003F5F;
}

/*******************************
* END TOOLTIP
*******************************/

/*******************************
* LIST GROUP ITEM
*******************************/

li.borderless {
    border: 0 none;
}

.list-group-item-condensed {
    padding: 5px 10px;
}

.list-group-item-heading {
    background-color: #f5f5f5;
}

.list-group-item-clickable:hover {
    cursor: pointer;
}

.list-group-item-clickable:hover {
    background-color: #f5f5f5;
}

.list-group-item-grey {
    background-color: #f5f5f5;
}

/*******************************
* END LIST GROUP ITEM
*******************************/

/*******************************
* AVATAR
*******************************/

.kv-avatar .file-preview-frame, .kv-avatar .file-preview-frame:hover {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    text-align: center;
}

.file-preview-frame {
    height: auto !important;
}

.kv-avatar .file-input {
    display: table-cell;
    max-width: 220px;
}

.avatar-container {
    position: relative;
}

.avatar-image {
    width: 160px;
    height: auto;
    max-height: 200px;
}

.avatar-image-small {
    width: 80px;
    height: auto;
    max-height: 100px;
}

.avatar-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #F05133;
    cursor: pointer;
}

.avatar-container:hover .avatar-overlay {
    opacity: 0.5;
}

.avatar-text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.file-thumbnail-footer {
    display: none;
}

.fileinput-remove-button {
    margin-top: 5px;
    padding: 3px 6px;
    color: #ddd;
}

.kv-avatar .file-input {
    display: table-cell;
    width: 213px;
}

.kv-file-content img {
    max-width: 200px;
    height: auto;
}

.file-preview-other {
    width: 200px;
}

.file-other-icon {
    font-size: 6em;
    color: #999999;
}

/*******************************
* END AVATAR
*******************************/


.station-image {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    width: 120px;
    display: inline-block;
}

.rotaTitle {
    padding-top: 2px;
    padding-left: 3px;
}



.tableMessages {
    font-size: 13px;
}



/*******************************
* USER MESSAGES
*******************************/
.inbox-info-bar {
    padding: 10px 0;
}

    .inbox-info-bar img {
        width: 45px;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        margin-right: 7px;
        margin-left: 2px;
        border-left: 3px solid #fff;
    }

.email-open-header {
    margin: -10px 0 0 -12px;
    font-size: 20px;
    padding: 10px 3px;
    border-bottom: 1px solid #e5e5e5;
}

.inbox-message {
    padding: 5px 4px;
}

.messageHistory {
    margin-top: 30px;
    border-top: 1px solid #e5e5e5;
}

.select2-container {
    margin: 0;
    position: relative;
    display: inline-block;
    zoom: 1;
    vertical-align: middle;
}

.select2-container-multi .select2-choices {
    min-height: 35px;
}

    .select2-container-multi .select2-choices .select2-search-choice {
        padding: 1px 28px 1px 8px;
        margin: 4px 0 3px 5px;
        position: relative;
        line-height: 18px;
        color: #353535;
        cursor: default;
        border: 1px solid #ddd;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #ededed;
    }

.select2-container-multi .select2-search-choice-close {
    display: block;
    top: 0;
    right: 0;
    padding: 3px 4px 3px 6px;
}

.select2-search-choice-close {
    display: block;
    min-width: 21px;
    min-height: 20px;
    position: absolute;
    right: 3px;
    top: 3px;
    margin: 0;
    padding: 0;
    font-size: 15px;
    text-decoration: none !important;
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.select2-container-multi .select2-choices {
    height: auto !important;
    height: 1%;
    margin: 0;
    padding: 0;
    position: relative;
    border: 1px solid #ddd;
    cursor: text;
    overflow: hidden;
    background-color: #fff;
}

    .select2-container-multi .select2-choices .select2-search-field {
        margin: 0;
        padding: 0;
        white-space: nowrap;
    }

    .select2-container-multi .select2-choices li {
        float: left;
        list-style: none;
    }

.select2-search-choice-close:before {
    color: #aaaaaa;
    content: "\f057";
}

.recipientList {
    height: 250px;
    overflow-y: scroll;
    overflow-x: hidden;
    border: 1px solid #e5e5e5;
}

    .recipientList table td {
        padding: 5px;
    }

    .recipientList table tr {
        border-bottom: 1px solid #e5e5e5;
    }

    .recipientList img {
        width: 35px;
        height: auto;
        display: inline-block;
        vertical-align: middle;
        margin-right: 7px;
        margin-left: 2px;
    }

.addon-btn {
    cursor: pointer;
}

    .addon-btn:hover {
        color: #003F5F;
    }

.selectedRecipients {
    padding-top: 10px;
}

.messageRecipients {
    max-height: 150px;
    overflow-y: auto;
}

/*******************************
* END USER MESSAGES
*******************************/


/*******************************
* CUSTOM MARGINS
*******************************/
.margin-bottom-xsm {
    margin-bottom: 2px;
}

.margin-bottom-sm {
    margin-bottom: 5px;
}

.margin-bottom-md {
    margin-bottom: 10px;
}

.margin-bottom-lg {
    margin-bottom: 15px;
}

.margin-top-xsm {
    margin-top: 2px;
}

.margin-top-sm {
    margin-top: 5px;
}

.margin-top-md {
    margin-top: 10px;
}

.margin-top-lg {
    margin-top: 15px;
}

.margin-right-sm {
    margin-right: 5px;
}

.margin-right-md {
    margin-right: 10px;
}

.margin-left-sm {
    margin-left: 5px;
}

.margin-left-md {
    margin-left: 10px;
}

.margin-left-lg {
    margin-left: 20px;
}

/*******************************
* END CUSTOM MARGINS
*******************************/

/*******************************
* Contacts
*******************************/

.img-contact {
    width: 35px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    margin-right: 7px;
    margin-left: 2px;
}

.tableUsers td {
    vertical-align: middle !important;
}

.tableUsers th {
    vertical-align: middle !important;
}


.table-clickableRow tr {
    cursor: pointer;
}

.table-nowrap tr {
    white-space: nowrap;
}

.table-clickableRow tr:hover {
    color: #337AB7
}

tr.gridAdminHeader {
    cursor: default;
}

    tr.gridAdminHeader:hover {
        color: #333
    }


.table-middle-align td {
    vertical-align: middle !important;
}

.pagination {
    margin: 5px 0px !important;
}

/*******************************
* End Contacts
*******************************/

.hidden {
    display: none;
}

/*******************************
* PROGRESS BAR
*******************************/

.progress {
    border: 0 none;
    width: 65px;
    height: 18px;
    margin: 0;
    padding: 0px;
    background: rgba(224, 221, 221, 1);
    background: -webkit-linear-gradient(top, rgba(245, 245, 245, 1) 0%, rgba(224, 221, 221, 1) 100%);
    background: linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%, rgba(224, 221, 221, 1) 100%);
    border: 0px solid rgba(245, 245, 245, 1);
    border-radius: 4px;
}

.progress-bar {
}


.progress-bar-custom-pending {
    background: #f5f5f5;
    background: -webkit-linear-gradient(top, #f5f5f5 0%, #555 100%);
    background: linear-gradient(to bottom, #f5f5f5 0%, #555 100%);
}

.progress-bar-custom-blue {
    background: rgba(66, 139, 202, 1);
    background: -webkit-linear-gradient(top, rgba(133, 188, 237, 1) 0%, rgba(66, 139, 202, 1) 100%);
    background: linear-gradient(to bottom, rgba(133, 188, 237, 1) 0%, rgba(66, 139, 202, 1) 100%);
    /*#428bca #85bced*/
}

.progress-bar-custom-green {
    background: rgba(74, 158, 63, 1);
    background: -webkit-linear-gradient(top, rgba(169, 230, 161, 1) 0%, rgba(74, 158, 63, 1) 100%);
    background: linear-gradient(to bottom, rgba(169, 230, 161, 1) 0%, rgba(74, 158, 63, 1) 100%);
}

.progress-bar-custom-red {
    background: rgba(240, 45, 45, 1);
    background: -webkit-linear-gradient(top, rgba(224, 147, 132, 1) 0%, rgba(240, 45, 45, 1) 100%);
    background: linear-gradient(to bottom, rgba(224, 147, 132, 1) 0%, rgba(240, 45, 45, 1) 100%);
}

.progress-bar-custom-amber {
    background: rgba(212, 205, 15, 1);
    background: -webkit-linear-gradient(top, rgba(248, 255, 117, 1) 0%, rgba(212, 205, 15, 1) 100%);
    background: linear-gradient(to bottom, rgba(248, 255, 117, 1) 0%, rgba(212, 205, 15, 1) 100%);
}

/*******************************
* END PROGRESS BAR
*******************************/

/*******************************
* ACTIVITIES BAR
*******************************/
.tableActivities td {
    font-size: 13px;
    vertical-align: middle !important;
}

/*******************************
* END ACTIVITIES BAR
*******************************/

/*******************************
* PAYROLLS HISTORY BAR
*******************************/
.tablePayrollsHistory td {
    font-size: 13px;
    vertical-align: middle !important;
}

/*******************************
* END PAYROLLS HISTORY BAR
*******************************/

@media (min-width: 768px) {
    .responsive-tabs.nav-tabs {
        border-bottom: 1px solid #ddd;
    }
}

.responsive-tabs.nav-tabs span.glyphicon {
    position: absolute;
    top: 14px;
    right: 22px;
    color: #C7C5C7;
}

    .responsive-tabs.nav-tabs span.glyphicon.glyphicon-triangle-top {
        display: none;
    }

@media (min-width: 768px) {
    .responsive-tabs.nav-tabs span.glyphicon {
        display: none;
    }
}

.responsive-tabs.nav-tabs > li {
    display: none;
    float: none;
    text-align: center;
}

    .responsive-tabs.nav-tabs > li:last-of-type > a {
        margin-right: 0;
    }

    .responsive-tabs.nav-tabs > li > a {
        margin-right: 0;
        background: #fff;
        border: 1px solid #DDDDDD;
    }

@media (min-width: 768px) {
    .responsive-tabs.nav-tabs > li > a {
        margin-right: 4px;
    }
}

.responsive-tabs.nav-tabs > li.active {
    display: block;
}

    .responsive-tabs.nav-tabs > li.active a {
        border: 1px solid #DDDDDD;
        border-radius: 2px;
    }

@media (min-width: 768px) {
    .responsive-tabs.nav-tabs > li.active a {
        border-bottom-color: transparent;
    }
}

@media (min-width: 768px) {
    .responsive-tabs.nav-tabs > li {
        display: block;
        float: left;
    }
}

.responsive-tabs.nav-tabs.open span.glyphicon.glyphicon-triangle-top {
    display: block;
}

@media (min-width: 768px) {
    .responsive-tabs.nav-tabs.open span.glyphicon.glyphicon-triangle-top {
        display: none;
    }
}

.responsive-tabs.nav-tabs.open span.glyphicon.glyphicon-triangle-bottom {
    display: none;
}

.responsive-tabs.nav-tabs.open > li {
    display: block;
}

    .responsive-tabs.nav-tabs.open > li a {
        border-radius: 0;
    }

    .responsive-tabs.nav-tabs.open > li:first-of-type a {
        border-radius: 2px 2px 0 0;
    }

    .responsive-tabs.nav-tabs.open > li:last-of-type a {
        border-radius: 0 0 2px 2px;
    }


/* The toast - position it at the bottom and in the middle of the screen */
#toast {
    display: none; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 10px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
    z-index: 99999;
}

    /* Show the snackbar when clicking on a button (class added with JavaScript) */
    #toast.show {
        visibility: visible; /* Show the snackbar */
        /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
However, delay the fade out process for 2.5 seconds */
        -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
        animation: fadein 0.5s, fadeout 0.5s 2.5s;
    }

/* Animations to fade the snackbar in and out 
@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}*/
}

/* End Toast */


/* START  STEPPER */
/*body {
  padding: 20px;
  background: #F3F1EE;
}*/

/*background: #fff;
F3F1EE
F5F5F5
	*/

/*@media (min-width: 48em) {
  .wrapper {
    max-width: 1500px;
  }
}

.stepper {
  padding: 10px;
  font-size: 13px;
}
@media (min-width: 48em) {
  .stepper {
    padding: 10px;
  }
}
.stepper__list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
@media (min-width: 48em) {
  .stepper__list {
    display: flex;
    justify-content: space-between;
  }
}
.stepper__list__item {
  padding: 3px 5px;
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
}
@media (min-width: 48em) {
  .stepper__list__item {
    padding: 10px;
    flex-direction: column;
    flex: 1;
  }
}
.stepper__list__item:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
}
@media (min-width: 48em) {
  .stepper__list__item:after {
    width: calc(100% - 100px);
    top: 28%;
    left: calc(50% + 50px);
    border-top: 2px dotted #E2DFDA;
  }
}
.stepper__list__item--done {
  color: #178A00;
  transition: all .1s;
}
@media (min-width: 48em) {
  .stepper__list__item--done:after {
    border-top-style: solid;
    border-top-width: 1px;
  }
}
.stepper__list__item--done:hover, .stepper__list__item--done:focus {
  text-decoration: underline;
  cursor: pointer;
}
.stepper__list__item--current {
  color: #006DFF;
}
.stepper__list__item--current:last-of-type:after, .stepper__list__item--current:only-of-type:after {
  height: 30%;
}
.stepper__list__item:last-of-type:after {
  display: none;
}
.stepper__list__item--pending {
  color: #807370;
}
.stepper__list__item--pending:after {
  height: 30%;
}
.stepper__list__title {
  margin: 1px 0 0;
}
@media (min-width: 48em) {
  .stepper__list__title {
    margin: 0;
  }
}
.stepper__list__icon {
  margin: 0 10px 0 0;
  height: 2em;
  width: 2em;
}
@media (min-width: 48em) {
  .stepper__list__icon {
    margin: 0 0 15px;
  }
}
.stepper__list__icon path {
  fill: currentColor;
}
.stepper__list__icon ellipse,
.stepper__list__icon circle {
  stroke: currentColor;
}*/

/* END STEPPER */


/***************** START STEPPER ***************/

.mdl-wrapper {
    margin: 0px auto;
    background: #F5F5F5;
    border: 1px solid #dad0ca;
    border-radius: 3px;
}

.mdl-card {
    width: 550px;
    min-height: 0;
    margin: 10px auto;
}

.mdl-card__supporting-text {
    width: 100%;
    padding: 0;
}

.mdl-stepper-horizontal-alternative .mdl-stepper-step {
    width: 20%;
    /*width: 25%;*/
    /* 100 / no_of_steps */
}



/* Begin actual mdl-stepper css styles */

.mdl-stepper-horizontal-alternative {
    display: table;
    width: 100%;
    margin: 0 auto;
}

    .mdl-stepper-horizontal-alternative .mdl-stepper-step {
        display: table-cell;
        position: relative;
        padding: 24px;
    }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step:hover,
        .mdl-stepper-horizontal-alternative .mdl-stepper-step:active {
            /*background-color: rgba(0, 0, 0, .06);*/
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step:active {
            border-radius: 15% / 75%;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step:first-child:active {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step:last-child:active {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step:hover .mdl-stepper-circle {
            /*background-color: #757575;*/
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step:first-child .mdl-stepper-bar-left,
        .mdl-stepper-horizontal-alternative .mdl-stepper-step:last-child .mdl-stepper-bar-right {
            display: none;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-circle {
            width: 24px;
            height: 24px;
            margin: 0 auto;
            background-color: #9E9E9E;
            border-radius: 50%;
            text-align: center;
            line-height: 2em;
            font-size: 12px;
            color: white;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step .mdl-stepper-circle {
            background-color: rgb(33, 150, 243);
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step.step-done .mdl-stepper-circle {
            background-color: rgb(23, 138, 0);
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step.step-done .mdl-stepper-circle:before {
            content: "\2714";
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step.step-done .mdl-stepper-circle *,
        .mdl-stepper-horizontal-alternative .mdl-stepper-step.editable-step .mdl-stepper-circle * {
            display: none;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step.editable-step .mdl-stepper-circle {
            -moz-transform: scaleX(-1);
            /* Gecko */
            -o-transform: scaleX(-1);
            /* Opera */
            -webkit-transform: scaleX(-1);
            /* Webkit */
            transform: scaleX(-1);
            /* Standard */
        }

            .mdl-stepper-horizontal-alternative .mdl-stepper-step.editable-step .mdl-stepper-circle:before {
                content: "\270E";
            }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-title {
            margin-top: 16px;
            font-size: 14px;
            font-weight: normal;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-title,
        .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-optional {
            text-align: center;
            color: rgba(0, 0, 0, .45);
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step .mdl-stepper-title {
            font-weight: 500;
            color: rgba(0, 0, 0, .87);
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step.step-done .mdl-stepper-title,
        .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step.editable-step .mdl-stepper-title {
            font-weight: 300;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-optional {
            font-size: 12px;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step.active-step .mdl-stepper-optional {
            color: rgba(0, 0, 0, .54);
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-left,
        .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-right {
            position: absolute;
            top: 36px;
            height: 1px;
            border-top: 1px solid #BDBDBD;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-right {
            right: 0;
            left: 50%;
            margin-left: 20px;
        }

        .mdl-stepper-horizontal-alternative .mdl-stepper-step .mdl-stepper-bar-left {
            left: 0;
            right: 50%;
            margin-right: 20px;
        }


/***************** END STEPPER ***************/

/* Shift Adjustment Circles */
.redCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    width: 30px;
    height: 30px;
    padding: 4px;
    background: #F06F48;
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

.greenCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    font-size: 13px;
    width: 30px;
    height: 30px;
    padding: 4px;
    font-weight: bold;
    background: #51C558;
    color: #fff;
    text-align: center;
    vertical-align: middle;
}

.greyCircle {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
    font-size: 13px;
    width: 30px;
    height: 30px;
    padding: 4px;
    font-weight: bold;
    background: #EAE9E9;
    color: #fff;
    text-align: center;
    vertical-align: middle;
}
/* End Shift Adjustment Circles */

.tree-item-icon-color {
    color: #dfba49 !important;
}

.jstree-disabled {
    background: none !important;
}

.control-error-label {
    font-size: 12px;
    color: #ff0000;
}

.autocomplete-label-header {
    font-size: 12px;
    color: #337ab7;
}

.autocomplete-label {
    text-transform: uppercase;
    font-size: 10px;
}

.navbar-search {
    margin-left: 1px;
    margin-right: 1px;
}

.input-navbar-search {
    border-radius: 5px;
}

.search-box-container {
    padding-top: 2px;
}

    .search-box-container input {
        padding: 5px 20px 5px 5px;
        background-color: #b73800;
        color: #ffffff;
        border: hidden;
    }

    .search-box-container:after {
        content: "\f002";
        font-weight: 900;
        font-family: "Font Awesome 5 Pro";
        font-size: 11px;
        color: #cccccc;
        margin-left: -25px;
        margin-right: 25px;
    }

.breachDayText {
    border-radius: 25px;
}

.fc-body {
    cursor: pointer;
}

.breach-tooltip + .tooltip > .tooltip-inner {
    background-color: #003F5F;
}

.breach-tooltip + .tooltip.top > .tooltip-arrow {
    background-color: #003F5F;
}

.mobileMenuItem {
    color: #003F5F
}

/* Auto Complete */
.ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: none;
    min-width: 160px;
    _width: 160px;
    padding: 4px 0;
    margin: 2px 0 0 0;
    list-style: none;
    background-color: #fff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    *border-right-width: 2px;
    *border-bottom-width: 2px;
    font-size: 12px;
}

    .ui-autocomplete .ui-menu-item > a.ui-corner-all {
        display: block;
        padding: 3px 15px;
        clear: both;
        font-weight: normal;
        line-height: 18px;
        color: #555;
        white-space: nowrap;
    }

        .ui-autocomplete .ui-menu-item > a.ui-corner-all.ui-state-hover, .ui-autocomplete .ui-menu-item > a.ui-corner-all.ui-state-active {
            color: #fff;
            text-decoration: none;
            background-color: #428BCA !important;
            border-radius: 0px;
            -webkit-border-radius: 0px;
            -moz-border-radius: 0px;
            background-image: none;
        }

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
    border: 1px solid transparent;
    background: #EAE9E9;
    font-weight: normal;
    color: #000000;
}

/* End Auto Complete */

.btn-view-picker {
    background-color: #e9e9e9;
    border-color: #d9d9d9;
    color: #6e6e6e
}

    .btn-view-picker:hover {
        color: #0082CC;
    }

    .btn-view-picker.view-active {
        background: none !important;
        border: 1px solid #EAE9E9;
        color: #0082CC;
    }

.btn-view-picker {
}

    .btn-view-picker:hover {
        background: none !important;
    }

.view-picker-dropdown, .view-picker-dropdown:hover, .view-picker-dropdown:active, .view-picker-dropdown:focus {
    background-color: #FFFFFF !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.grid-wrapper-div {
    position: relative;
}

.popgrid-wrapper-div {
    position: relative;
}

.grid-loading:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background: transparent center center no-repeat url('data:image/gif;base64,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');
}

.popgrid-loading:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background: transparent center center no-repeat url('data:image/gif;base64,R0lGODlhgAAPAPIAAP///1qCntni6MzY4YSitlqCngAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAgAAPAAAD5wiyC/6sPRfFpPGqfKv2HTeBowiZGLORq1lJqfuW7Gud9YzLud3zQNVOGCO2jDZaEHZk+nRFJ7R5i1apSuQ0OZT+nleuNetdhrfob1kLXrvPariZLGfPuz66Hr8f8/9+gVh4YoOChYhpd4eKdgwDkJEDE5KRlJWTD5iZDpuXlZ+SoZaamKOQp5wAm56loK6isKSdprKotqqttK+7sb2zq6y8wcO6xL7HwMbLtb+3zrnNycKp1bjW0NjT0cXSzMLK3uLd5Mjf5uPo5eDa5+Hrz9vt6e/qosO/GvjJ+sj5F/sC+uMHcCCoBAAh+QQJCgAAACwAAAAAgAAPAAAD/wi0C/4ixgeloM5erDHonOWBFFlJoxiiTFtqWwa/Jhx/86nKdc7vuJ6mxaABbUaUTvljBo++pxO5nFQFxMY1aW12pV+q9yYGk6NlW5bAPQuh7yl6Hg/TLeu2fssf7/19Zn9meYFpd3J1bnCMiY0RhYCSgoaIdoqDhxoFnJ0FFAOhogOgo6GlpqijqqKspw+mrw6xpLCxrrWzsZ6duL62qcCrwq3EsgC0v7rBy8PNorycysi3xrnUzNjO2sXPx8nW07TRn+Hm3tfg6OLV6+fc37vR7Nnq8Ont9/Tb9v3yvPu66Xvnr16+gvwO3gKIIdszDw65Qdz2sCFFiRYFVmQFIAEBACH5BAkKAAAALAAAAACAAA8AAAP/CLQL/qw9J2qd1AoM9MYeF4KaWJKWmaJXxEyulI3zWa/39Xh6/vkT3q/DC/JiBFjMSCM2hUybUwrdFa3Pqw+pdEVxU3AViKVqwz30cKzmQpZl8ZlNn9uzeLPH7eCrv2l1eXKDgXd6Gn5+goiEjYaFa4eOFopwZJh/cZCPkpGAnhoFo6QFE6WkEwOrrAOqrauvsLKttKy2sQ+wuQ67rrq7uAOoo6fEwsjAs8q1zLfOvAC+yb3B0MPHD8Sm19TS1tXL4c3jz+XR093X28ao3unnv/Hv4N/i9uT45vqr7NrZ89QFHMhPXkF69+AV9OeA4UGBDwkqnFiPYsJg7jBktMXhD165jvk+YvCoD+Q+kRwTAAAh+QQJCgAAACwAAAAAgAAPAAAD/wi0C/6sPRfJdCLnC/S+nsCFo1dq5zeRoFlJ1Du91hOq3b3qNo/5OdZPGDT1QrSZDLIcGp2o47MYheJuImmVer0lmRVlWNslYndm4Jmctba5gm9sPI+gp2v3fZuH78t4Xk0Kg3J+bH9vfYtqjWlIhZF0h3qIlpWYlJpYhp2DjI+BoXyOoqYaBamqBROrqq2urA8DtLUDE7a1uLm3s7y7ucC2wrq+wca2sbIOyrCuxLTQvQ680wDV0tnIxdS/27TND+HMsdrdx+fD39bY6+bX3um14wD09O3y0e77+ezx8OgAqutnr5w4g/3e4RPIjaG+hPwc+stV8NlBixAzSlT4bxqhx46/MF5MxUGkPA4BT15IyRDlwG0uG55MAAAh+QQJCgAAACwAAAAAgAAPAAAD/wi0C/6sPRfJpPECwbnu3gUKH1h2ZziNKVlJWDW9FvSuI/nkusPjrF0OaBIGfTna7GaTNTPGIvK4GUZRV1WV+ssKlE/G0hmDTqVbdPeMZWvX6XacAy6LwzAF092b9+GAVnxEcjx1emSIZop3g16Eb4J+kH+ShnuMeYeHgVyWn56hakmYm6WYnaOihaCqrh0FsbIFE7Oytba0D7m6DgO/wAMTwcDDxMIPx8i+x8bEzsHQwLy4ttWz17fJzdvP3dHfxeG/0uTjywDK1Lu52bHuvenczN704Pbi+Ob66MrlA+scBAQwcKC/c/8SIlzI71/BduysRcTGUF49i/cw5tO4jytjv3keH0oUCJHkSI8KG1Y8qLIlypMm312ASZCiNA0X8eHMqPNCTo07iyUAACH5BAkKAAAALAAAAACAAA8AAAP/CLQL/qw9F8mk8ap8hffaB3ZiWJKfmaJgJWHV5FqQK9uPuDr6yPeTniAIzBV/utktVmPCOE8GUTc9Ia0AYXWXPXaTuOhr4yRDzVIjVY3VsrnuK7ynbJ7rYlp+6/u2vXF+c2tyHnhoY4eKYYJ9gY+AkYSNAotllneMkJObf5ySIphpe3ajiHqUfENvjqCDniIFsrMFE7Sztre1D7q7Dr0TA8LDA8HEwsbHycTLw83ID8fCwLy6ubfXtNm40dLPxd3K4czjzuXQDtID1L/W1djv2vHc6d7n4PXi+eT75v3oANSxAzCwoLt28P7hC2hP4beH974ZTEjwYEWKA9VBdBixLSNHhRPlIRR5kWTGhgz1peS30l9LgBojUhzpa56GmSVr9tOgcueFni15styZAAAh+QQJCgAAACwAAAAAgAAPAAAD/wi0C/6sPRfJpPGqfKsWIPiFwhia4kWWKrl5UGXFMFa/nJ0Da+r0rF9vAiQOH0DZTMeYKJ0y6O2JPApXRmxVe3VtSVSmRLzENWm7MM+65ra93dNXHgep71H0mSzdFec+b3SCgX91AnhTeXx6Y2aOhoRBkllwlICIi49liWmaapGhbKJuSZ+niqmeN6SWrYOvIAWztAUTtbS3uLYPu7wOvrq4EwPFxgPEx8XJyszHzsbQxcG9u8K117nVw9vYD8rL3+DSyOLN5s/oxtTA1t3a7dzx3vPwAODlDvjk/Orh+uDYARBI0F29WdkQ+st3b9zCfgDPRTxWUN5AgxctVqTXUDNix3QToz0cGXIaxo32UCo8+OujyJIM95F0+Y8mMov1NODMuPKdTo4hNXgMemGoS6HPEgAAIfkECQoAAAAsAAAAAIAADwAAA/8ItAv+rD0XyaTxqnyr9pcgitpIhmaZouMGYq/LwbPMTJVE34/Z9j7BJCgE+obBnAWSwzWZMaUz+nQQkUfjyhrEmqTQGnins5XH5iU3u94Crtpfe4SuV9NT8R0Nn5/8RYBedHuFVId6iDyCcX9vXY2Bjz52imeGiZmLk259nHKfjkSVmpeWanhhm56skIyABbGyBROzsrW2tA+5ug68uLbAsxMDxcYDxMfFycrMx87Gv7u5wrfTwdfD2da+1A/Ky9/g0OEO4MjiytLd2Oza7twA6/Le8LHk6Obj6c/8xvjzAtaj147gO4Px5p3Dx9BfOQDnBBaUeJBiwoELHeaDuE8uXzONFu9tE2mvF0KSJ00q7Mjxo8d+L/9pRKihILyaB29esEnzgkt/Gn7GDPosAQAh+QQJCgAAACwAAAAAgAAPAAAD/wi0C/6sPRfJpPGqfKv2HTcJJKmV5oUKJ7qBGPyKMzNVUkzjFoSPK9YjKHQQgSve7eeTKZs7ps4GpRqDSNcQu01Kazlwbxp+ksfipezY1V5X2ZI5XS1/5/j7l/12A/h/QXlOeoSGUYdWgXBtJXEpfXKFiJSKg5V2a1yRkIt+RJeWk6KJmZhogKmbniUFrq8FE7CvsrOxD7a3Drm1s72wv7QPA8TFAxPGxcjJx8PMvLi2wa7TugDQu9LRvtvAzsnL4N/G4cbY19rZ3Ore7MLu1N3v6OsAzM0O9+XK48Xn/+notRM4D2C9c/r6Edu3UOEAgwMhFgwoMR48awnzMWOIzyfeM4ogD4aMOHJivYwexWlUmZJcPXcaXhKMORDmBZkyWa5suE8DuAQAIfkECQoAAAAsAAAAAIAADwAAA/8ItAv+rD0XyaTxqnyr9h03gZNgmtqJXqqwka8YM2NlQXYN2ze254/WyiF0BYU8nSyJ+zmXQB8UViwJrS2mlNacerlbSbg3E5fJ1WMLq9KeleB3N+6uR+XEq1rFPtmfdHd/X2aDcWl5a3t+go2AhY6EZIZmiACWRZSTkYGPm55wlXqJfIsmBaipBROqqaytqw+wsQ6zr623qrmusrATA8DBA7/CwMTFtr24yrrMvLW+zqi709K0AMkOxcYP28Pd29nY0dDL5c3nz+Pm6+jt6uLex8LzweL35O/V6fv61/js4m2rx01buHwA3SWEh7BhwHzywBUjOGBhP4v/HCrUyJAbXUSDEyXSY5dOA8l3Jt2VvHCypUoAIetpmJgAACH5BAkKAAAALAAAAACAAA8AAAP/CLQL/qw9F8mk8ap8q/YdN4Gj+AgoqqVqJWHkFrsW5Jbzbee8yaaTH4qGMxF3Rh0s2WMUnUioQygICo9LqYzJ1WK3XiX4Na5Nhdbfdy1mN8nuLlxMTbPi4be5/Jzr+3tfdSdXbYZ/UX5ygYeLdkCEao15jomMiFmKlFqDZz8FoKEFE6KhpKWjD6ipDqunpa+isaaqqLOgEwO6uwO5vLqutbDCssS0rbbGuMqsAMHIw9DFDr+6vr/PzsnSx9rR3tPg3dnk2+LL1NXXvOXf7eHv4+bx6OfN1b0P+PTN/Lf98wK6ExgO37pd/pj9W6iwIbd6CdP9OmjtGzcNFsVhDHfxDELGjxw1Xpg4kheABAAh+QQJCgAAACwAAAAAgAAPAAAD/wi0C/6sPRfJpPGqfKv2HTeBowiZjqCqG9malYS5sXXScYnvcP6swJqux2MMjTeiEjlbyl5MAHAlTEarzasv+8RCu9uvjTuWTgXedFhdBLfLbGf5jF7b30e3PA+/739ncVp4VnqDf2R8ioBTgoaPfYSJhZGIYhN0BZqbBROcm56fnQ+iow6loZ+pnKugpKKtmrGmAAO2twOor6q7rL2up7C/ssO0usG8yL7KwLW4tscA0dPCzMTWxtXS2tTJ297P0Nzj3t3L3+fmzerX6M3hueTp8uv07ezZ5fa08Piz/8UAYhPo7t6+CfDcafDGbOG5hhcYKoz4cGIrh80cPAOQAAAh+QQJCgAAACwAAAAAgAAPAAAD5wi0C/6sPRfJpPGqfKv2HTeBowiZGLORq1lJqfuW7Gud9YzLud3zQNVOGCO2jDZaEHZk+nRFJ7R5i1apSuQ0OZT+nleuNetdhrfob1kLXrvPariZLGfPuz66Hr8f8/9+gVh4YoOChYhpd4eKdgwFkJEFE5KRlJWTD5iZDpuXlZ+SoZaamKOQp5wAm56loK6isKSdprKotqqttK+7sb2zq6y8wcO6xL7HwMbLtb+3zrnNycKp1bjW0NjT0cXSzMLK3uLd5Mjf5uPo5eDa5+Hrz9vt6e/qosO/GvjJ+sj5F/sC+uMHcCCoBAA7AAAAAAAAAAAA');
}



.dropdown-form {
    min-width: 200px !important;
}

    .dropdown-form li > span {
        padding-left: 3px;
    }

.check-list {
    list-style: none;
    padding: 5px 5px;
    margin: 2px 0 0;
}

.check-list-item {
    padding: 1px 10px 6px 24px;
    position: relative;
    font-size: 12px;
    white-space: nowrap;
}

    .check-list-item input {
        margin: 2px 0 0;
        position: absolute;
        left: 5px;
    }

.dropdown-form-grey {
    background-color: #FAFAFA;
}

.dropdown-form-white {
    background-color: #FFFFFF;
}

.dropdown-form .button-row {
    padding: 5px 6px 3px 0;
    border-top: 1px solid #ddd;
}

.dropdown-form li > div {
    padding: 2px 8px 2px 8px;
}

.dropdown-form li > h6 {
    padding-left: 4px;
    padding-bottom: 1px;
}


/* Multi-select Dropdown*/

.multiselect-container {
    width: auto;
}

button.multiselect-btn {
    font-size: 13px !important;
    height: 34px;
    margin-top: 2px;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 3px 3px 2px 15px;
    color: #555;
    background-color: #ffffff;
}


@media (max-width: 768px) {
    button.multiselect-btn {
        height: 34px !important;
        font-size: 16px !important;
    }
}


button.multiselect-btn.disabled {
    font-size: 13px !important;
    height: 34px;
    margin-top: 2px;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 3px 3px 2px 15px;
    color: #555;
    background-color: #eee;
}

button.multiselect-btn-sm {
    font-size: 13px !important;
    height: 30px;
    margin-top: 2px;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 3px 3px 2px 11px;
    color: #555;
    background-color: #ffffff;
}

button.multiselect-btn-xsm {
    font-size: 12px !important;
    margin-top: 2px;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 3px 3px 2px 3px;
    padding-left: 6px;
    color: #555;
    background-color: #ffffff;
    height: 25px;
}

span.multiselect-native-select > div.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

button.multiselect > span > b.caret {
    width: 6px;
    padding-bottom: 4px;
    border-top: 5px dashed;
    border-right: 2.5px solid transparent;
    border-left: 2.5px solid transparent;
}

ul.multiselect-container li > a {
    padding-bottom: 4px;
}

    ul.multiselect-container li > a > label > input[type="checkbox"] {
        margin-top: 2px !important;
    }

/********************************************************************/
/* Staffing Summary styles */

.table-rotasummary {
    font-size: 12px;
}

table.table-rotasummary table.vehicleGroup tr:hover td.empDetailsCell, table.table-rotasummary table.vehicleGroup tr:hover td.empDetailsCell > div > div.empDetailsCell {
    background-color: #f6f6f6;
    color: #F15731;
    cursor: pointer;
}

.table-rotasummary > thead > tr > th {
    padding: 2px;
    vertical-align: middle;
    text-align: center;
    border-bottom-width: 1px;
    min-width: 30px;
    white-space: nowrap;
    background-color: #F4F4F4;
}


    .table-rotasummary > thead > tr > th:nth-child(1) {
        padding-left: 5px;
        text-align: left !important;
        border-bottom-width: 1px;
        white-space: nowrap;
    }

.table-rotasummary table.vehicleGroup > tbody > tr > td {
    padding: 4px;
    text-align: left;
    border-bottom-width: 1px;
    min-width: 20px;
    white-space: nowrap;
}


table.table-rotasummary tr > td.on.startsLate {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eae9e9+0,eae9e9+50,c4ebff+51,c4ebff+100,c4ebff+100 */
    background: rgb(234,233,233); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(234,233,233,1) 0%, rgba(234,233,233,1) 50%, rgba(196,235,255,1) 51%, rgba(196,235,255,1) 100%, rgba(196,235,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(234,233,233,1) 0%,rgba(234,233,233,1) 50%,rgba(196,235,255,1) 51%,rgba(196,235,255,1) 100%,rgba(196,235,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(234,233,233,1) 0%,rgba(234,233,233,1) 50%,rgba(196,235,255,1) 51%,rgba(196,235,255,1) 100%,rgba(196,235,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eae9e9', endColorstr='#c4ebff',GradientType=1 ); /* IE6-9 */
}

table.table-rotasummary tr > td.on.endsEarly {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c4ebff+50,eae9e9+50 */
    background: rgb(196,235,255); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(196,235,255,1) 50%, rgba(234,233,233,1) 50%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(196,235,255,1) 50%,rgba(234,233,233,1) 50%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(196,235,255,1) 50%,rgba(234,233,233,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4ebff', endColorstr='#eae9e9',GradientType=1 ); /* IE6-9 */
}

table.table-rotasummary tr > td.off {
    background-color: #EAE9E9;
}

table.table-rotasummary tr > td.shiftoff {
    background-color: #FCFCF4;
}

.table-rotasummary > tbody > tr > td:nth-child(1) {
    vertical-align: middle;
    text-align: left !important;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.table-rotasummary > tbody > tr.altRow > td {
    background-color: rgba(139, 139, 139, 0.05);
}

table.table-rotasummary tr > td.on {
    background-color: #C4EBFF;
}

.vehicleGroup {
    float: left;
    border: 1px solid #999999;
    margin: 0px 10px 10px 0px;
}

.stationVehiclesRow {
}

.dvOkState {
    float: left;
    cursor: pointer;
    border-radius: 5px;
    background-color: #8ABA58;
    padding: 2px;
    width: 20px;
    margin-right: 5px;
    text-align: center;
    border: 1px solid #87A16C;
    color: #f1f1f1;
    font-size: 8px;
}

.dvShortageState {
    float: left;
    cursor: pointer;
    border-radius: 5px;
    background-color: #d2232a;
    padding: 2px;
    width: 20px;
    margin-right: 5px;
    text-align: center;
    border: 1px solid #6E3838;
    color: #f1f1f1;
    font-size: 8px;
}

.dvOverState {
    float: left;
    cursor: pointer;
    border-radius: 5px;
    background-color: #366cb3;
    padding: 2px;
    width: 20px;
    margin-right: 5px;
    text-align: center;
    border: 1px solid #4F3447;
    color: #f1f1f1;
    font-size: 8px;
}

.dvOffStationState {
    float: left;
    cursor: pointer;
    border-radius: 5px;
    background-color: #9C9E9C;
    padding: 2px;
    width: 20px;
    margin-right: 5px;
    text-align: center;
    border: 1px solid #4F3447;
    color: #f1f1f1;
    font-size: 8px;
}

.ticker {
    position: relative;
    overflow: hidden;
    /*height:42vw;*/
    width: 132px;
    border-top: 5px #999;
    border-bottom: 5px #999;
}


/* End Multi-select Dropdown*/


.booking-control-panel {
    position: fixed;
    top: 80px;
    left: 10px;
    z-index: 99999;
    color: #555;
    padding: 5px;
    padding-left: 15px;
    background: #FAFAFA;
    display: none;
    width: 100%;
    text-align: center;
}

    .booking-control-panel > div {
        display: inline-block;
        padding-right: 15px;
    }


.booking-control-panel-btn.done {
    display: none;
}

.booking-control-panel-btn.over {
    color: #337AB7;
}

.booking-control-panel-btn.delete.over {
    color: #ED141C;
}

.copy-mode {
    cursor: copy;
}

/* Booking Alerts */

.booking-alert {
    padding-bottom: 6px;
    float: left;
    padding-right: 30px;
}

.booking-alert-header {
}

.booking-alert-header {
    border-bottom: 1px solid #ddd;
    color: #1b5486;
    font-weight: bold;
    margin-top: 10px;
    padding-bottom: 2px;
}

.booking-alert-code {
    color: #F15731;
    font-weight: bold;
    font-size: 12px;
    padding-right: 15px;
    padding-top: 3px;
}

.booking-alert-name {
    color: #1b5486;
    font-weight: bold;
    font-size: 12px;
    padding-right: 15px;
    padding-top: 3px;
}

.booking-alert-dates {
    display: inline-block;
    font-size: 90%;
}

.booking-alert-warning {
    color: #f15731;
    font-weight: bold;
    margin-top: 10px;
}

/* EndBooking Alerts */


/* Employee Widget */
.employee-widget {
    width: 800px;
    height: 500px;
    background: #ffffff;
    position: fixed;
    bottom: 1px;
    right: 2px;
    border: 1px solid #999999;
    z-index: 99999 !important;
}

    .employee-widget.toggled {
        bottom: 0;
        height: 40px;
        width: 300px;
    }

.employee-widget-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
    padding: 10px;
    border-bottom: 1px solid #e5e5e5;
    height: 38px;
    cursor: pointer;
}

.widget-header {
    padding-left: 5px;
    font-size: 13px;
}

.employee-widget-header > button {
    font-size: 16px;
    margin-left: 6px;
}

.employee-widget-body {
    padding: 10px;
}

.employee-widget-footer {
    height: 40px;
    background: #F5F5F5;
    bottom: 0;
    position: absolute;
    width: 100%;
    border-top: 1px solid #ddd;
}

    .employee-widget-footer.toggled {
        display: none;
    }

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
    padding: 15px;
    border-bottom: 1px solid #e5e5e5;
}


.panel-item {
    border-bottom: 1px solid #e8e8e8;
    padding: 6px 4px 6px 0;
}

.panel-item-clickable {
    cursor: pointer;
}

    .panel-item-clickable:hover {
        background-color: #FAFAFA;
    }

.panel-header {
    color: #1b5486;
    font-weight: bold;
    padding-bottom: 2px;
    padding-bottom: 6px;
}

.panel-header-bordered {
    border-bottom: 1px solid #ddd;
    margin-bottom: 5px;
}

.panel-header.small {
    margin-top: 3px;
    padding-bottom: 2px;
    text-transform: uppercase;
}


.panel-details {
    font-weight: bold;
    font-size: 12px;
}


h5.panel-header {
    padding-top: 10px;
    margin: 0;
}

h6.panel-details {
    font-weight: bold;
    font-size: 12px;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.table-sm {
    font-size: 90%;
}

.panel {
    border-radius: 0;
}


/* Station Shift View */
#panelVehicles {
    font-size: 90%;
}

#panelRoasterView {
    font-size: 90%;
}

.aligncenter {
    text-align: center !important;
}

.panel-station {
    /*border: 1px solid #6f7c84;
    margin-bottom:4px;*/
}

    .panel-station.over {
        background-color: #fcf8e3;
    }

.panel-station-header.over {
    background-color: #fcf8e3;
}

.panel-station-header1 {
    /*background-color: #6f7c84;
    padding:2px;*/
}

.station-box-header.dropzone {
    /*background-color: #FAFFBD !important;*/
    cursor: pointer;
}

.station-box-header.over {
    color: #D2232A !important;
    background-color: #FAFFBD !important;
}

.panel-station-details {
    padding: 5px 5px 0 0;
    border-top: 0 solid transparent;
    margin: 5px 0 0 0;
}

div.panel-station-header > div {
    /*font-size:110%;
   margin:0;
   padding:0 0 8px 8px;
   text-align: center;
   
   padding-top:8px;*/
    font-weight: bold;
    color: #6f7c84;
}

    div.panel-station-header > div:before {
        content: "\f0fe";
        font-weight: 600;
        font-family: "Font Awesome 5 Pro";
        font-size: 11px;
        color: #9FA1A4;
        padding-right: 5px;
        cursor: pointer;
    }

div.panel-station-header.expanded > div:before {
    content: "\f146";
}

.panel-heading-sm {
    height: 28px;
    padding: 4px 10px;
}

.panel-body-sm {
    padding: 5px 10px;
}

.applianceCard {
    float: left;
    width: 33%;
    min-width: 220px;
    margin-bottom: 10px;
}

.applianceCardRoaster {
    float: left;
    width: 33%;
    min-width: 180px;
    margin-bottom: 0px;
}

@media only screen and (max-width : 1030px) and (min-width : 600px) {
    .applianceCard {
        width: 50%;
    }
}


@media (max-width: 599px) {
    .applianceCard {
        width: 100%;
    }
}

@media print {
    .applianceCard {
        width: 220px;
    }
}

.panel-employee-Roaster {
    text-transform: uppercase;
    font-size: 11px;
    padding-top: 0px;
    padding-bottom: 0px
}

.applianceCardRoaster > h5 {
    margin: 0 10px 0 10px;
    font-weight: bold;
    color: #337ab7;
    text-align: center;
    border: 1px solid #EAE9E9;
    padding: 1px;
}

.applianceCard > h5 {
    margin: 0 10px 0 10px;
    font-weight: bold;
    color: #337ab7;
    text-align: center;
    border: 1px solid #EAE9E9;
    padding: 3px;
}

.vehicle-panel-seat {
    padding: 5px 5px 2px 5px;
    border-radius: 4px;
    background-color: #E9E9E9;
    margin: 10px;
    margin-bottom: 2px;
    border: 2px solid transparent;
}

.vehicle-panel-seatRoaster {
    border-radius: 4px;
    background-color: #FFFFFF;
    margin: 2px;
    margin-bottom: 2px;
    border: 2px solid #f1f1f1;
}

.vehicle-panel-seat.over {
    /*background-color:#FAFFBD;*/
    border: 2px solid #337ab7;
}


.vehicle-panel-seat-header {
    margin-bottom: 4px;
    padding: 3px 5px 2px 5px;
    border-radius: 2px;
    margin-top: -2px;
}

.vehicle-panel-seat-headerRoaster {
    margin-bottom: 0px;
    border-radius: 2px;
    margin-top: -2px;
    text-align: center;
}

.vehicle-panel-seat-header.dropzone {
    /*background-color: #fcffdb;*/
}

    .vehicle-panel-seat-header.dropzone:hover {
        /*background-color: rgba(196,235,255,1) !important;*/
    }

.vehicle-panel-seat-empty {
    text-align: center;
    display: none;
    font-size: 20px;
    color: orange;
    padding: 2px;
    border-radius: 4px;
    background-color: #fcffdb;
    z-index: 100;
    margin-bottom: 8px;
}

.add-seat-icon {
    /*margin-left: -3px;*/
    /*padding-right: 4px;*/
    padding-left: 3px;
    padding-top: 3px;
    color: orange;
    display: none;
    color: orange;
    padding: 2px 4px 2px 4px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    background: #fcffdb;
    margin-left: 4px;
    margin-right: -5px;
    cursor: pointer;
    display: block;
    top: -3px;
    position: relative;
}

.dropzone {
    display: none;
}

.station-panel.dropzone {
    display: none;
    font-size: 17px;
    color: orange;
    padding: 0 10px 0 10px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    background: #fcffdb;
    cursor: pointer;
}



.vehicle-panel-employee {
    padding: 5px;
    border-radius: 4px;
    background-color: #ffffff;
    z-index: 100;
    margin-bottom: 8px;
}

.vehicle-panel-employeeRoster {
    padding: 0px;
    border-radius: 0px;
    background-color: #ffffff;
    z-index: 100;
    margin-bottom: 0px;
}

.vehicle-panel-employee.clickable {
    cursor: move;
}

    .vehicle-panel-employee.clickable.over {
        background-color: #FAFFBD;
    }

    .vehicle-panel-employee.clickable:hover {
        background-color: #fcf8e3;
    }

    .vehicle-panel-employee.clickable.active {
        background-color: #FAFFBD;
    }


.vehicle-panel-deficiency {
    padding: 10px 3px 10px 3px;
    border-radius: 4px;
    z-index: 100;
    margin-bottom: 8px;
    background: #797878;
    border: 2px solid #797878;
    color: #F06F48;
    font-size: 1.08em;
}

    .vehicle-panel-deficiency.over {
        background: #FAFFBD;
    }

.vehicle-panel-deficiency-icon {
    color: #337ab7;
    cursor: pointer;
    padding: 2px;
    border: 1px solid #ddd;
    margin-top: 5px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

    .vehicle-panel-deficiency-icon > .default-image {
        background: #CCD6DF;
        background-size: 35px 35px;
        width: 35px !important;
        height: 35px !important;
    }

    .vehicle-panel-deficiency-icon a {
        display: block;
        position: absolute;
        top: 40%;
        position: absolute;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        font-size: 14px;
        color: #FF0000;
    }

div.shift-times {
    font-size: 1.1em;
    font-weight: bold;
    color: #646e7b;
    /*border-left:1px solid #908f8f;*/
    padding-left: 6px;
    margin-top: 3px;
}

    div.shift-times > .header {
        font-size: 0.8em;
        font-weight: bold;
    }

.panel-employee {
    padding-top: 4px;
    padding-bottom: 5px;
    text-transform: uppercase;
    font-size: 12px;
}

    .panel-employee:hover {
        /*color: #D2232A;
    cursor: pointer;*/
    }

.media-left.media-employee-image {
    padding-right: 6px;
}

.panel-employee-icon {
    color: #337ab7;
    cursor: pointer;
    padding: 2px;
    border: 1px solid #ddd;
    margin-top: 5px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

    .panel-employee-icon:hover {
        border: 1px solid #337ab7;
        color: #337ab7;
    }

    .panel-employee-icon.read-only:hover {
        border: 1px solid #ddd;
        cursor: default;
    }


    .panel-employee-icon > img {
        width: 35px !important;
        height: 35px !important;
    }

    .panel-employee-icon > .default-image {
        background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCABGAEYDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD1dmORwv3R/CPSk3n0X/vkUP1H0H8qbWpkO3n0X/vkUbj6L/3yKjkkSKNpHYKijJJ7CuTv9dubpysDNDD2C8MfqaEriudhuPov/fIo3n0X/vkV555sm7d5j7vXcc1q6dr09u6pdMZYTwSfvL/jTsFzrt59F/75FG8+i/8AfIpisGUMpBUjII70tIZPbufMPC9P7ooptv8A6w/SigBj9R9B/Km05+o+g/lTaAMXxLMyWEcS8CR/m+g5rla6zxHbtLp6yqM+S24/Q8VydUtiWFFFFMR13h2dpdL2Mc+U5UfTqK1qy9At2g0tSww0rF8e3atSoZRLb/6w/Sii3/1h+lFIYx+o+g/lTac/UfQfyqC5uI7W3eeU4RBz7+1MCQqGUqwBUjBB71zOoeHZUcvZ/PGefLJ+Zfp61n32qXN/LuZykYOVjU8D/E1atfEV3AoSULOo7tw3507NE3RS/s2+3bfsk2f92tbTvDrmRZb3AUHIiByT9ak/4SlNv/Ho+f8AfGKo3fiC7uVKR4gQ9dnU/jT1DQ67oMAYHaiuN03WJ7GQK7NJAT8yE5x7iuwjkSaJZI2DIwyCO9S1Ydye3/1h+lFFv/rD9KKQxj9R9B/KuW8S3Ze5S0U/LGNze7H/AOt/OupfqPoP5VkXGgWtzcSTySTb3OTgjH8qaEzkKK6v/hGbL/nrP/30P8KP+EZsv+es/wD30P8ACquhWOUorq/+EZsv+es//fQ/wo/4Rmy/56z/APfQ/wAKLoLHKV0nhm7LLJaMfu/On9RU/wDwjNl/z1n/AO+h/hU9noltZXKzxSSlgCMMRg5/Ck2gSNe3/wBYfpRRb/6w/SipKFMDHByOVH8qT7O/qtFFMA+zv6rR9nf1WiikAfZ39Vo+zv6rRRQAfZ39Vo+zv6rRRQBLb27+YeV6UUUUwP/Z) no-repeat left center;
        background-size: 35px 35px;
        width: 35px !important;
        height: 35px !important;
    }

    .panel-employee-icon:hover img {
        opacity: 0.4
    }

    .panel-employee-icon:hover div.default-image {
        opacity: 0.4
    }

    .panel-employee-icon.read-only:hover img {
        opacity: 1
    }

    .panel-employee-icon.read-only:hover div.default-image {
        opacity: 1
    }

    .panel-employee-icon:hover a {
        opacity: 1;
        top: 0;
        z-index: 500;
    }

    .panel-employee-icon.read-only:hover a {
        opacity: 0;
        cursor: default;
    }

    .panel-employee-icon:hover a span {
        top: 50%;
        position: absolute;
        left: 0;
        right: 0;
        transform: translateY(-50%);
    }

    .panel-employee-icon a {
        display: block;
        position: absolute;
        top: -100%;
        opacity: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        color: inherit;
    }


tr.import-employee-row > td {
    cursor: move !important;
}

tr.import-employee-row.active > td {
    background-color: #FAFFBD !important;
}

.appliance-role-header {
    font-size: 110%;
    font-weight: bold;
}

.employee-status {
    display: block;
    margin-top: 4px;
    border: 1px solid #ddd;
    padding: 3px;
    background-color: #BCDCEC;
    font-weight: bold;
    width: 45px;
    max-width: 50px;
    min-width: 20px;
    min-height: 20px;
    float: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 2px;
}

    .employee-status.active {
        cursor: pointer;
    }

        .employee-status.active:hover {
            background-color: #fcf8e3 !important;
        }

    .employee-status.part {
        text-decoration: underline;
    }

.vehicle-panel-employee > div.on {
    background-color: #def4ff;
}

.selectedOffer {
    background-color: #def4ff !important;
}

/*.selectedOffer:before {
    content: "\f058";
    font-weight: 600;
    font-family: "Font Awesome 5 Pro"; 
    font-size:14px;    
    padding-right:5px;    
    cursor:pointer;
    float:left;
    color:#337ab7;
}*/

.employeeOfferTable {
    max-height: 200px;
}

.offerCard {
    width: 100%;
}

    .offerCard > h5 {
        margin: 0 10px 0 10px;
        font-weight: bold;
        color: #337ab7;
        text-align: center;
        border: 1px solid #EAE9E9;
        padding: 5px;
    }

.panel-offer {
    /*padding:5px 5px 0 0;*/
    /*border: 1px solid #E9E9E9;*/
    border-top: 0 solid transparent;
    /*margin:5px 10px 0 10px;*/
}

.panel-offer-item {
    padding: 5px 5px 2px 5px;
    border-radius: 4px;
    background-color: #E9E9E9;
    margin: 5px 0 5px 0;
    border: 2px solid transparent;
}

    .panel-offer-item.over {
        /*background-color:#FAFFBD;*/
        border: 2px solid #337ab7;
    }

.offer-toolbar {
    float: right;
    padding-right: 8px;
}

    .offer-toolbar a {
        margin-right: 6px;
        font-size: 115%;
    }

        .offer-toolbar a:hover {
            text-decoration: none;
        }

        .offer-toolbar a.linked {
            color: #449d44;
        }

        .offer-toolbar a.unlinked {
            color: #ddd;
        }

        .offer-toolbar a:hover {
            text-decoration: none !important;
        }

        .offer-toolbar a:focus {
            text-decoration: none !important;
        }





.vehicle-panel-seat.over {
    /*background-color:#FAFFBD;*/
    border: 2px solid #337ab7;
}

div.panel-offer-header > h3 {
    font-size: 100%;
    margin: 0;
    padding: 0 0 8px 8px;
    /*text-align: center;*/
    color: #ffffff;
    font-weight: bold;
    padding-top: 8px;
    background-color: #6f7c84;
}

    div.panel-offer-header > h3:before {
        content: "\f0fe";
        font-weight: 600;
        font-family: "Font Awesome 5 Pro";
        font-size: 11px;
        color: #ffffff;
        padding-right: 5px;
        cursor: pointer;
    }

div.panel-offer-header.expanded > h3:before {
    content: "\f146";
}

div.panel-offer-header > h4 {
    font-size: 90%;
    margin: 0;
    padding: 0 0 8px 8px;
    /*text-align: center;*/
    color: #ffffff;
    font-weight: bold;
    padding-top: 8px;
    background-color: #6f7c84;
}

    div.panel-offer-header > h4:before {
        content: "\f0fe";
        font-weight: 600;
        font-family: "Font Awesome 5 Pro";
        font-size: 11px;
        color: #ffffff;
        padding-right: 5px;
        cursor: pointer;
    }

div.panel-offer-header.expanded > h4:before {
    content: "\f146";
}

.offer-role-header {
    margin-left: 10px;
    font-size: 100%;
    font-weight: bold;
}

.breachDeficiencyCard {
    width: 100%;
    border: 1px solid #ccc5c5;
    /*border-top: 0 solid transparent;*/
}

    .breachDeficiencyCard > h5 {
        margin: 0;
        font-weight: bold;
        color: #337ab7;
        text-align: center;
        padding: 5px;
    }

div.breachDeficiencyCard.expanded > h5:before {
    float: left;
    content: "\f146";
}

div.breachDeficiencyCard > h5:before {
    float: left;
    content: "\f0fe";
    font-weight: 600;
    font-family: "Font Awesome 5 Pro";
    font-size: 11px;
    color: #ffffff;
    padding-right: 5px;
    cursor: pointer;
}

.offer-panel-employee {
    padding: 5px;
    border-radius: 4px;
    background-color: #ffffff;
    z-index: 100;
    margin-bottom: 5px;
}

    .offer-panel-employee.over {
        background-color: #FAFFBD;
    }

    .offer-panel-employee:hover {
        background-color: #fcf8e3;
    }

    .offer-panel-employee.active {
        background-color: #FAFFBD;
    }

div.adjusted:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f356";
    padding-right: 2px;
    color: orange;
}

div.adjusted-spacer {
    padding-left: 17px;
}

.highlightadjusted {
    border-color: orange;
    border-style: solid;
}

.clock-panel {
    width: 90px !important;
    color: #D2232A;
}

.expiredTime {
    color: #F06F48;
}

/* End Station Shift View */















/*
 * Component: Box
 * --------------
 */
.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border: 1px solid #d2d6de;
    border-top: 3px solid #d2d6de;
}

.thin-border {
    border-top: 1px solid #d2d6de;
}

.box.box-no-margin {
    margin-bottom: 0;
}

.box.box-primary {
    border-top-color: #3c8dbc;
}

.box.box-info {
    border-top-color: #00c0ef;
}

.box.box-danger {
    border-top-color: #dd4b39;
}

.box.box-warning {
    border-top-color: #f39c12;
}

.box.box-success {
    border-top-color: #00a65a;
}

.box.box-default {
    border-top-color: #d2d6de;
}

.box.collapsed-box .box-body,
.box.collapsed-box .box-footer {
    display: none;
}

.box .nav-stacked > li {
    border-bottom: 1px solid #f4f4f4;
    margin: 0;
}

    .box .nav-stacked > li:last-of-type {
        border-bottom: none;
    }

.box.height-control .box-body {
    max-height: 300px;
    overflow: auto;
}

.box .border-right {
    border-right: 1px solid #f4f4f4;
}

.box .border-left {
    border-left: 1px solid #f4f4f4;
}

.box.box-solid {
    border-top: 0;
}

    .box.box-solid > .box-header .btn.btn-default {
        background: transparent;
    }

    .box.box-solid > .box-header .btn:hover,
    .box.box-solid > .box-header a:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    .box.box-solid.box-default {
        border: 1px solid #d2d6de;
    }

        .box.box-solid.box-default > .box-header {
            color: #444444;
            background: #f1f1f1;
            background-color: #f1f1f1;
        }

            .box.box-solid.box-default > .box-header a,
            .box.box-solid.box-default > .box-header .btn {
                color: #444444;
            }

    .box.box-solid.box-primary {
        border: 1px solid #3c8dbc;
    }

        .box.box-solid.box-primary > .box-header {
            color: #ffffff;
            background: #3c8dbc;
            background-color: #3c8dbc;
        }

            .box.box-solid.box-primary > .box-header a,
            .box.box-solid.box-primary > .box-header .btn {
                color: #ffffff;
            }

    .box.box-solid.box-dark {
        border: 1px solid #d2d6de;
    }

        .box.box-solid.box-dark > .box-header {
            color: #FFFFFF;
            background: #f1f1f1;
            background-color: #344149;
        }

            .box.box-solid.box-dark > .box-header a,
            .box.box-solid.box-dark > .box-header .btn {
                color: #ffffff;
            }

    .box.box-solid.box-info {
        border: 1px solid #00c0ef;
    }

        .box.box-solid.box-info > .box-header {
            color: #ffffff;
            background: #00c0ef;
            background-color: #00c0ef;
        }

            .box.box-solid.box-info > .box-header a,
            .box.box-solid.box-info > .box-header .btn {
                color: #ffffff;
            }

    .box.box-solid.box-danger {
        border: 1px solid #dd4b39;
    }

        .box.box-solid.box-danger > .box-header {
            color: #ffffff;
            background: #dd4b39;
            background-color: #dd4b39;
        }

            .box.box-solid.box-danger > .box-header a,
            .box.box-solid.box-danger > .box-header .btn {
                color: #ffffff;
            }

    .box.box-solid.box-warning {
        border: 1px solid #f39c12;
    }

        .box.box-solid.box-warning > .box-header {
            color: #ffffff;
            background: #f39c12;
            background-color: #f39c12;
        }

            .box.box-solid.box-warning > .box-header a,
            .box.box-solid.box-warning > .box-header .btn {
                color: #ffffff;
            }

    .box.box-solid.box-success {
        border: 1px solid #00a65a;
    }

        .box.box-solid.box-success > .box-header {
            color: #ffffff;
            background: #00a65a;
            background-color: #00a65a;
        }

            .box.box-solid.box-success > .box-header a,
            .box.box-solid.box-success > .box-header .btn {
                color: #ffffff;
            }

    .box.box-solid > .box-header > .box-tools .btn {
        border: 0;
        box-shadow: none;
    }

    .box.box-solid[class*='bg'] > .box-header {
        color: #fff;
    }

.box .box-group > .box {
    margin-bottom: 5px;
}

.box .knob-label {
    text-align: center;
    color: #333;
    font-weight: 100;
    font-size: 12px;
    margin-bottom: 0.3em;
}

.box > .overlay,
.overlay-wrapper > .overlay,
.box > .loading-img,
.overlay-wrapper > .loading-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.box .overlay,
.overlay-wrapper .overlay {
    z-index: 50;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 3px;
}

    .box .overlay > .fa,
    .overlay-wrapper .overlay > .fa {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -15px;
        margin-top: -15px;
        color: #000;
        font-size: 30px;
    }

    .box .overlay.dark,
    .overlay-wrapper .overlay.dark {
        background: rgba(0, 0, 0, 0.5);
    }

.box-header:before,
.box-body:before,
.box-footer:before,
.box-header:after,
.box-body:after,
.box-footer:after {
    content: " ";
    display: table;
}

.box-header:after,
.box-body:after,
.box-footer:after {
    clear: both;
}

.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
}

    .box-header.with-border {
        border-bottom: 1px solid #d4d4d4;
    }

.collapsed-box .box-header.with-border {
    border-bottom: none;
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion,
.box-header .box-title {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    line-height: 1;
    font-weight: bold;
}

.box-sub-title {
    font-size: 12px;
    color: #6F7C84;
}

.box-header > .fa,
.box-header > .glyphicon,
.box-header > .ion {
    margin-right: 5px;
}

.box-header > .box-tools {
    position: absolute;
    right: 10px;
    top: 5px;
}

    .box-header > .box-tools [data-toggle="tooltip"] {
        position: relative;
    }

    .box-header > .box-tools.pull-right .dropdown-menu {
        right: 0;
        left: auto;
    }

    .box-header > .box-tools .dropdown-menu > li > a {
        color: #444 !important;
    }

.btn-box-tool {
    padding: 5px;
    font-size: 14px;
    background: transparent;
    color: #97a0b3;
}

    .open .btn-box-tool,
    .btn-box-tool:hover {
        color: #606c84;
    }

    .btn-box-tool.btn:active {
        box-shadow: none;
    }

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

.no-header .box-body {
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.box-body > .table {
    margin-bottom: 0;
}

.box-body .fc {
    margin-top: 5px;
}

.box-body .full-width-chart {
    margin: -19px;
}

.box-body.no-padding .full-width-chart {
    margin: -9px;
}

.box-body .box-pane {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 3px;
}

.box-body .box-pane-right {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 0;
}

.box-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #f4f4f4;
    padding: 10px;
    background-color: #ffffff;
}

.chart-legend {
    margin: 10px 0;
}

@media (max-width: 991px) {
    .chart-legend > li {
        float: left;
        margin-right: 10px;
    }
}

.box-comments {
    background: #f7f7f7;
}

    .box-comments .box-comment {
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }

        .box-comments .box-comment:before,
        .box-comments .box-comment:after {
            content: " ";
            display: table;
        }

        .box-comments .box-comment:after {
            clear: both;
        }

        .box-comments .box-comment:last-of-type {
            border-bottom: 0;
        }

        .box-comments .box-comment:first-of-type {
            padding-top: 0;
        }

        .box-comments .box-comment img {
            float: left;
        }

    .box-comments .comment-text {
        margin-left: 40px;
        color: #555;
    }

    .box-comments .username {
        color: #444;
        display: block;
        font-weight: 600;
    }

    .box-comments .text-muted {
        font-weight: 400;
        font-size: 12px;
    }

.box-title.box-employee-search:before {
    font-family: "Font Awesome 5 Pro";
    content: "\f002";
    padding-left: 2px;
    padding-right: 5px;
    color: orange;
}

.box-title.box-employee-selected {
    display: none;
    text-transform: uppercase;
}

    .box-title.box-employee-selected:before {
        font-family: "Font Awesome 5 Pro";
        content: "\f356";
        padding-left: 2px;
        padding-right: 5px;
        color: orange;
    }

.box-header-icon {
    width: 35px;
    height: auto;
    float: left;
    padding-top: 3px;
}

.btn-box-tool > .label {
    top: 2px;
    left: 40px;
    position: absolute;
    text-align: center;
    font-size: 9px;
    padding: 2px 3px;
    line-height: .9;
}


#panelImportEmployees {
    position: fixed;
    right: 5px;
    z-index: 1030;
    bottom: 0;
    left: 50%;
    right: 5px;
    z-index: 1030;
    bottom: 0;
}

    #panelImportEmployees.collapsed {
        position: fixed;
        z-index: 1030;
        bottom: 0;
        right: 5px;
        left: 70%;
    }

@media (min-width: 641px) {
    #panelImportEmployees.fixed-left {
        left: 5px;
        right: 50%;
    }

        #panelImportEmployees.fixed-left.collapsed {
            right: 70%;
        }
}

@media (max-width: 1024px) {

    #panelImportEmployees, #panelImportEmployees.collapsed {
        left: 0;
        right: 0;
    }
}

@media (max-width: 600px) {

    #panelImportEmployees, #panelImportEmployees.collapsed {
        left: 0;
        right: 0;
    }
}

.region-title {
    padding: 0 0 10px 10px;
    font-size: 16px;
    display: none;
}

.search-panel-employees {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 9999;
    bottom: 0;
    background-color: #ddd;
    padding: 20px;
}

.employee-status-readonly.employee-status {
    margin: 0;
    font-size: 90%;
    min-height: 0;
    padding: 2px;
    float: none;
}


.search-panel-booking.employee-status.active:hover {
    background-color: #BCDCEC !important;
}

.input-group-field {
    display: table-cell;
    vertical-align: middle;
    border-radius: 4px;
}

    .input-group-field .form-control, .input-group-field .form-control {
        border-radius: inherit !important;
    }

    .input-group-field:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

        .input-group-field:not(:first-child):not(:last-child) .form-control {
            border-left-width: 0;
            border-right-width: 0;
        }

    .input-group-field:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.label-md {
    margin-top: 3px;
    font-size: 11px !important;
    padding: 1px 3px 1px 3px !important;
}

.label-navy {
    background-color: #003f5f !important;
    color: #ffffff;
}

.updateAlert {
    position: fixed;
    bottom: 25px;
    right: 25px;
    color: #ffffff;
    background-color: #6f7c84;
    border-radius: 0px;
    z-index: 105;
    padding: 15px;
}


@media only screen and (min-width : 1200px) {
    .offerGrid {
        width: 70%;
        padding: 10px;
        float: right;
    }
}

@media only screen and (min-width : 1200px) {
    .offerPanel {
        width: 30%;
        padding: 10px;
    }
}

.highlight-deficiency {
    cursor: pointer;
}

/* NAV TABS */
.nav-tabs-custom {
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

    .nav-tabs-custom .nav-tabs-sm {
        font-size: 85%;
    }

    .nav-tabs-custom > .nav-tabs {
        margin: 0;
        border-bottom-color: #f4f4f4;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
    }

        .nav-tabs-custom > .nav-tabs > li {
            border-bottom: 2px solid transparent;
            margin-bottom: -1px;
            margin-right: 5px;
        }

            .nav-tabs-custom > .nav-tabs > li.disabled > a {
                color: #777;
            }

            .nav-tabs-custom > .nav-tabs > li > a {
                color: #444;
                border-radius: 0;
                padding-top: 4px;
                padding-bottom: 4px;
            }

                .nav-tabs-custom > .nav-tabs > li > a.text-muted {
                    color: #999;
                }

                .nav-tabs-custom > .nav-tabs > li > a,
                .nav-tabs-custom > .nav-tabs > li > a:hover {
                    background: transparent;
                    margin: 0;
                }

                    .nav-tabs-custom > .nav-tabs > li > a:hover {
                        color: #999;
                    }

            .nav-tabs-custom > .nav-tabs > li:not(.active) > a:hover,
            .nav-tabs-custom > .nav-tabs > li:not(.active) > a:focus,
            .nav-tabs-custom > .nav-tabs > li:not(.active) > a:active {
                border-color: transparent;
            }

            .nav-tabs-custom > .nav-tabs > li.active {
                border-bottom-color: #3c8dbc;
            }

                .nav-tabs-custom > .nav-tabs > li.active > a,
                .nav-tabs-custom > .nav-tabs > li.active:hover > a {
                    background-color: #fff;
                    color: #444;
                }

                .nav-tabs-custom > .nav-tabs > li.active > a {
                    border-top-color: #f4f4f4;
                    border-left-color: #f4f4f4;
                    border-right-color: #f4f4f4;
                }

            .nav-tabs-custom > .nav-tabs > li:first-of-type {
                margin-left: 0;
            }

                .nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
                    border-left-color: transparent;
                }

        .nav-tabs-custom > .nav-tabs.pull-right {
            float: none !important;
        }

            .nav-tabs-custom > .nav-tabs.pull-right > li {
                float: right;
            }

                .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type {
                    margin-right: 0;
                }

                    .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type > a {
                        border-left-width: 1px;
                    }

                    .nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
                        border-left-color: #f4f4f4;
                        border-right-color: transparent;
                    }

        .nav-tabs-custom > .nav-tabs > li.header {
            line-height: 35px;
            padding: 0 10px;
            font-size: 20px;
            color: #444;
        }

            .nav-tabs-custom > .nav-tabs > li.header > .fa,
            .nav-tabs-custom > .nav-tabs > li.header > .glyphicon,
            .nav-tabs-custom > .nav-tabs > li.header > .ion {
                margin-right: 5px;
            }

    .nav-tabs-custom > .tab-content {
        background: #fff;
        padding: 10px 3px 5px 3px;
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .nav-tabs-custom .dropdown.open > a:active,
    .nav-tabs-custom .dropdown.open > a:focus {
        background: transparent;
        color: #999;
    }

    .nav-tabs-custom.tab-primary > .nav-tabs > li.active {
        border-top-color: #3c8dbc;
    }

    .nav-tabs-custom.tab-info > .nav-tabs > li.active {
        border-top-color: #00c0ef;
    }

    .nav-tabs-custom.tab-danger > .nav-tabs > li.active {
        border-top-color: #dd4b39;
    }

    .nav-tabs-custom.tab-warning > .nav-tabs > li.active {
        border-top-color: #f39c12;
    }

    .nav-tabs-custom.tab-success > .nav-tabs > li.active {
        border-top-color: #00a65a;
    }

    .nav-tabs-custom.tab-default > .nav-tabs > li.active {
        border-top-color: #d2d6de;
    }




















.panel-employeedialog-icon.edit-enabled {
    color: #337ab7;
    cursor: pointer;
    padding: 2px;
    border: 1px solid #ddd;
    margin-top: 5px;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

    .panel-employeedialog-icon.edit-enabled:hover {
        border: 1px solid #337ab7;
        color: #337ab7;
    }


        .panel-employeedialog-icon.edit-enabled:hover img {
            opacity: 0.4
        }

        .panel-employeedialog-icon.edit-enabled:hover div.default-image {
            opacity: 0.4
        }

        .panel-employeedialog-icon.edit-enabled:hover a {
            opacity: 1;
            top: 0;
            z-index: 500;
        }

            .panel-employeedialog-icon.edit-enabled:hover a span {
                top: 50%;
                position: absolute;
                left: 0;
                right: 0;
                transform: translateY(-50%);
            }

.panel-employeedialog-icon a {
    display: block;
    position: absolute;
    top: -100%;
    opacity: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: inherit;
}


.bookingInfo-floating-panel {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1029;
}

    .bookingInfo-floating-panel.hidden {
        display: none;
    }

@media only screen and (max-width: 768px) {
    .bookingInfo-floating-panel {
        display: none;
    }
}

.bookingInfo-list {
    list-style-type: none;
    margin: 0;
}

    .bookingInfo-list li {
        float: left;
        padding: 2px 10px 2px 10px;
        border: solid 1px #f6f6f6;
        margin: 4px 0 4px 4px;
        min-width: 80px;
        background-color: #337ab7;
        color: #ffffff;
        filter: drop-shadow(0 2px 4px rgba(34,36,38,0.35));
        -webkit-filter: drop-shadow(0 2px 4px rgba(34,36,38,0.35));
    }


.datetime-range-picker {
    border: 1px solid #ddd;
    float: left;
}

.datetime-range-spacer {
    float: left;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    font-size: 16px;
}

.datetime-range-table {
    padding: 0;
    border: none;
    /*margin-bottom: 0;
    font-size: 12px;
    padding: 0;
    margin-right: 20px;*/
}

    .datetime-range-table td {
        /*padding: 6px !important;
    text-align: center;
    color: #868b92;
    background-color: #FAFAFA;
    cursor: pointer;*/
        padding: 0 3px 3px 3px;
    }

        .datetime-range-table td > button {
            width: 100%;
        }

        .datetime-range-table td.active {
            /*color: #0082CC;*/
        }

        .datetime-range-table td:hover {
            /*color: #0082CC;*/
        }

.datetime-range-picker input[type="text"] {
    height: 28px;
    padding: 5px 10px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 0;
    font-size: 12px;
    border-color: #ddd;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);
    border-radius: 0;
}

    .datetime-range-picker input[type="text"].date {
        width: 100px;
        font-size: 12px;
        text-align: center;
    }

    .datetime-range-picker input[type="text"].time {
        width: 100px;
        font-size: 13px;
        text-align: center;
    }


/* Roster/Event Builder */

table.table-pattern-builder > tbody > tr > td.dayCell {
    padding: 2px !important;
    min-width: 40px;
    text-align: center;
}


    table.table-pattern-builder > tbody > tr > td.dayCell.selected {
        padding: 2px !important;
    }

    table.table-pattern-builder > tbody > tr > td.dayCell:hover {
        background-color: #cbebfb;
        cursor: pointer;
    }

table.table-pattern-builder > tbody > tr > td.copy-mode {
    cursor: copy !important;
}

table.table-pattern-builder > tbody > tr > td.selected {
    border: 2px solid #13abff !important;
}



table.table-pattern-builder > tbody > tr > td > div.dayCellPanel {
    height: 30px;
    min-width: 20px;
    background-color: transparent;
    border: solid 2px transparent;
    font-size: 11px;
}

    table.table-pattern-builder > tbody > tr > td > div.dayCellPanel.selected {
        border: solid 2px #37bcff;
    }

table.table-pattern-builder > tbody > tr > td.inactiveShift {
    background-color: #cfcfcf;
}

table.table-pattern-builder > tbody > tr > td.shift-header-cell {
    background-color: #f6f6ed;
    cursor: pointer;
    font-weight: bold;
    min-width: 150px;
}

    table.table-pattern-builder > tbody > tr > td.shift-header-cell.row-selected {
        background-color: #37bcff;
        color: #ffffff;
    }

.shift-picker, .shift-picker-toolbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    margin-right: 10px;
}

    .shift-picker li {
        float: left;
        padding: 5px 10px 5px 10px;
        border: solid 2px #ffffff;
        cursor: pointer;
        font-weight: bold;
        font-size: 12px;
        border-radius: 4px;
    }

        .shift-picker li.active {
            border: solid 2px #65b0dc;
        }

.shift-picker-toolbar {
    display: none;
}

    .shift-picker-toolbar li {
        float: left;
        padding: 5px 10px 5px 10px;
        cursor: pointer;
        font-weight: bold;
        font-size: 12px;
        border-radius: 4px;
        border: solid 1px #ccc;
        background-color: #ffffff;
        color: #646e7b;
        border-radius: 0;
    }

        .shift-picker-toolbar li:hover {
            color: #337ab7;
        }

.stationSummary i, .rosterSummary i {
    text-align: center;
    color: lightgray
}

.textarea {
    max-width: 100%;
    max-height: 100%
}

/* End Roster/Event Builder */