/* RESPONSIVE LAYOUT
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
}

p {
    font-size: 0.85rem;
}


/* INTERNAL THEME
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
body#INT {
    background-color: #E5E5E5;
}

body#INT header nav {
    background-color: #FFFFFF;
    color: #00558D;
}

body#INT header #titleBar {
    background-color: #F1F1F1;
    color: #00558D;
}

body#INT header #titleBar .dropdown .dropdown-menu {
    background-color: #F1F1F1;
}


/* EXTERNAL THEME
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
body#EXT {
    background-color: #CCEBF8;
}

body#EXT header nav {
    background-size: cover;
    background-image: url('/../Content/Images/whhHeadBackground.jpg');
    color: #FFFFFF;
}

body#EXT header #titleBar {
    background-color: #7FCDEE;
    color: #00558D;
}

body#EXT header nav a#userMenu {
    color: #FFFFFF;
}


body#EXT header #titleBar .dropdown .dropdown-menu {
    background-color: #7FCDEE;
}


/* BREAKOUT PAGE
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
#layout_basic_TEST header.breakoutPage #titleBar {
    background-color: #d9534f !important;
    border-bottom-color: #c9302c;
    color: #FFFFFF;
}

#layout_basic #titleBar {
    background-color: #FFF;
    border-bottom: 1px solid #EDEDED;
}

#layout_basic #titleBar #viewTitle,
#layout_basic_TEST #titleBar #viewTitle {
    font-size: calc(0.8rem + .6vw);
    font-weight: 700;
}

#layout_basic #contentContainer,
#layout_basic_TEST #contentContainer {
    margin-bottom: 15px;
}




/* NAVIGATION
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
header nav p {
    font-size: 0.75rem;
}

header #titleBar .dropdown button {
    border: none;
    background-color: transparent;
    color: #00558D;
}

header #titleBar .dropdown button i {
    font-size: 1.5rem;
}

header #titleBar .dropdown .dropdown-menu {
    font-size: 0.85rem;
    border-color: rgba(255, 255, 255, 0.1);
    border-left: none;
    border-right: none;
    border-bottom: none;
}

header #titleBar .dropdown .dropdown-menu .divider {
    height: 1px;
    background-color: #FFF;
    opacity: 0.2;
}

header #titleBar .dropdown .dropdown-menu a {
    color: #204D74;
}

header #titleBar .dropdown .dropdown-menu a:active {
    color: #FFFFFF;
    background-color: #204D74;
}




/* HOME OVERRIDES
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

/* NAVBAR */
/* ------------------------------- */
body header nav.navbar {
    background-color: #CBEAF7;
    color: #006299;
}


body header nav.navbar .navbar-nav > li > a {
    color: #006299;
}

body header nav.navbar .navbar-nav > li > a.show {
    background-color: #006299 !important;
    color: #FFFFFF;
}

body header nav.navbar .navbar-nav a.dropdown-item:active {
    color: #1e2125;
    background-color: #DDD;
}

body header nav.navbar .navbar-nav a.nav-link:hover,
body header .navbar-toggler:hover {
    background-color: #006299;
    color: #FFFFFF;
}

body header nav.navbar .navbar-nav ul.dropdown-menu {
    padding: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

body header nav.navbar .navbar-nav ul.dropdown-menu > li.divider {
    margin: 0;
}

body header nav.navbar .navbar-nav ul.dropdown-menu > li:last-child > a {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

body header nav.navbar .navbar-nav ul.dropdown-menu > li > a {
    padding: 10px 15px;
}

body header nav.navbar .navbar-nav ul.dropdown-menu > li > a .glyphicon {
    margin-right: 5px;
}

body .dropdown-toggle::after {
    vertical-align: middle !important;
}

body .navbar-toggler:focus,
body .navbar-toggler:active {
    outline: none !important;
    box-shadow: none;
}

body header #mainMenu {
    margin-right: -12px;
}


















/* LOADING OVERLAYS
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
#Loading,
.LoadingSmall {
    bottom: 0;
    background-image: url('/../Content/Images/LoadingBG.png');
    background-repeat: repeat;
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
}

#Loading img,
.LoadingSmall img {
    left: 50%;
    position: absolute;
    top: 50%;
    z-index: 1001;
}

#Loading img {
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

.LoadingSmall img {
    margin-top: -20px;
    margin-left: -20px;
}


@keyframes placeHolderShimmer {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}

.loadingBgGradient {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #F5F5F5 8%, #E5E5E5 18%, #F5F5F5 33%);
    background-size: 1000px 104px;
    object-fit: cover;
    position: relative;
    overflow: hidden;
}

.loadingBg {
    aspect-ratio: 1/1;
    display: block;
}


/* CSS SPINNER */
/* https://loading.io/css/ */
/* ---------------------------------------------- */
#loadingSpinner {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(100, 100, 100, 0.2);
    z-index: 10000;
}

#loadingSpinner .lds-roller {
    display: inline-block;
    left: 50%;
    top: 50%;
    position: relative;
    width: 80px;
    height: 80px;
    margin-top: -40px;
    margin-left: -40px;
}

#loadingSpinner .lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

#loadingSpinner .lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #006299;
    margin: -4px 0 0 -4px;
}

#loadingSpinner .lds-roller div:nth-child(1) { animation-delay: -0.036s; }
#loadingSpinner .lds-roller div:nth-child(2) { animation-delay: -0.072s; }
#loadingSpinner .lds-roller div:nth-child(3) { animation-delay: -0.108s; }
#loadingSpinner .lds-roller div:nth-child(4) { animation-delay: -0.144s; }
#loadingSpinner .lds-roller div:nth-child(5) { animation-delay: -0.18s;  }
#loadingSpinner .lds-roller div:nth-child(6) { animation-delay: -0.216s; }
#loadingSpinner .lds-roller div:nth-child(7) { animation-delay: -0.252s; }
#loadingSpinner .lds-roller div:nth-child(8) { animation-delay: -0.288s; }

#loadingSpinner .lds-roller div:nth-child(1):after { top: 63px; left: 63px; }
#loadingSpinner .lds-roller div:nth-child(2):after { top: 68px; left: 56px; }
#loadingSpinner .lds-roller div:nth-child(3):after { top: 71px; left: 48px; }
#loadingSpinner .lds-roller div:nth-child(4):after { top: 72px; left: 40px; }
#loadingSpinner .lds-roller div:nth-child(5):after { top: 71px; left: 32px; }
#loadingSpinner .lds-roller div:nth-child(6):after { top: 68px; left: 24px; }
#loadingSpinner .lds-roller div:nth-child(7):after { top: 63px; left: 17px; }
#loadingSpinner .lds-roller div:nth-child(8):after { top: 56px; left: 12px; }

@keyframes lds-roller {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* FORM VALIDATION
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
.formVal,
.formMsg,
.serverVal {
    display: none;
    font-size: 0.65rem;
    cursor: default;
    border: none;
    border-radius: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.formVal,
.serverVal {
    background-color: #d9534f;
    color: #FFFFFF;
}

.formMsgSuccess {
    background-color: #5cb85c;
}

.formMsgInfo {
    background-color: #5bc0de;
}

.formMsgError {
    background-color: #d9534f;
}

.formVal ul,
.serverVal ul {
    margin: 0;
    padding: 0;
}

.formVal ul li,
.serverVal ul li {
    list-style: none;
}

.validationSummary ul {
    color: #dc3545;
    list-style: none;
    padding: 0;
    font-size: 0.75rem;
}

.custom-tooltip {
    --bs-tooltip-bg: #337AB7;
}

/* ERROR MESSAGE
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/*
#errorMessage {
    background-color: #F6FCFE;
    padding: 15px;
}

#errorMessage h4,
#errorMessage h5 {
    margin: 0;
}

#errorMessage h4 {
    margin-bottom: 5px;
}
*/

#errorMessage {
    color: #666666;
}

#errorMessage .glyphicon {
    color: #CCCCCC;
}

#errorMessage p {
    font-size: 16px;
}

#errorMessage img {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    margin-bottom: 10px;
}

#popupErrorListContainer ul {
    list-style: none;
    padding: 0;
}


/* BACKGROUND IMAGES
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
img.bgFullScreen {
    height: auto;
    left: 0;
    min-height: 100%;
    min-width: 1024px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}


/* CARDS
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
.card .table {
    border-bottom-left-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

/* card colours */
.card.bg-navy {
    border-color: #204D74 !important;
}

.card.bg-navy .card-header {
    background-color: #204D74 !important;
}

.card.bg-blue {
    border-color: #337ab7 !important;
}

.card.bg-blue .card-header {
    background-color: #337ab7 !important;
}

.card.bg-orange {
    border-color: #eea236 !important;
}

.card.bg-orange .card-header {
    background-color: #f0ad4e !important;
    border-color: #eea236;
}

.card.bg-red {
    border-color: #b02a37 !important;
}

.card.bg-red .card-header {
    background-color: #dc3545 !important;
    border-color: #b02a37;
}

.dataLbl {
    width: 165px;
}

/* FORM INPUTS
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

/* INPUT TYPE : FILE
---------------------------------------- */
/* custom file fields
   www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3 */
.btn-file {
    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;
}


/* INPUT PLACEHOLDERS
---------------------------------------- */
::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}

::placeholder { /* Recent browsers */
    text-transform: none;
}

/* prevent ms edge password reveal */
::-ms-reveal {
    display: none;
}

/* prevent textare resize */
textarea {
    resize: vertical;
}

/* TOAST MESSAGES
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
.toastMsg {
    padding: 8px 14px;
    max-width: 500px;
    font-size: 13px;
    margin: 0 auto;
    z-index: 1000000;
    position: fixed;
    top: 40px;
    left: 50%;
    box-shadow: 0px 0px 5px #AAA;
    display: none;
    cursor: default;
    color: #FFFFFF;
    border: none;
    font-family: sans-serif;
}

.toastMsg.alert-success {
    background-color: #5cb85c;
}

.toastMsg.alert-warning {
    background-color: #f0ad4e;
}

.toastMsg.alert-error {
    background-color: #dc3545;
}

.toastMsg.alert-info {
    background-color: #5bc0de;
}


/* GRID / TOOLBAR / PAGING
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
.gridToolbar,
.gridFooterToolbar {
    background: #F5F5F5;
}

.gridToolbar label {
    font-size: 0.75rem;
}

.gridCell_noWrap {
    white-space: nowrap;
}

.gridToolbar .form-control-sm,
.gridToolbar .form-select-sm {
    font-size: 0.75rem !important;
    padding: 0.25rem !important;
}

.gridToolbar .k-picker,
.gridToolbar .k-input-inner {
    font-size: 0.75rem !important;
}

.gridToolbar .k-input-inner,
.gridToolbar .k-input-button {
    padding: 0.25rem !important;
    min-height: 26px;
}

.gridToolbar .k-input-button {
    height: 26px;
}

.gridToolbar .k-input,
.gridToolbar .k-picker {
    min-height: 26px !important;
}

.gridToolbar .form-check {
    margin-top: 24px;
}

.gridToolbar .btn,
.gridFooterToolbar .btn,
#footerToolbar .btn {
    font-size: 0.75rem !important;
}

.gridToolbar .k-input-value-text {
    max-height: 17px;
}

.mergedHeader .k-column-title {
    margin: 0 auto;
    font-weight: bold;
}

.centerHeader .k-column-title {
    margin: 0 auto;
}

.gridCell_noWrap {
    white-space: nowrap;
}

.pageResults {
    background-color: #EEEEEE;
    border: 1px solid #DDD;
    border-top: none;
}

.gridToolbar .toolbarField:has(.form-control-sm:disabled),
.gridToolbar .toolbarField:has(.form-select-sm:disabled),
.gridToolbar .toolbarField:has(.form-check-input:disabled),
.gridToolbar .toolbarField:has(.btn-check:disabled),
.gridToolbar .toolbarField:has(.k-disabled) {
    opacity: 0.25;
}


/* K-GRID */
/* ------------------------------- */
.k-grid {
    border-radius: 0;
}

.k-grid .k-grid-norecords {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    color: #CCCCCC;
    font-size: 13px;
}

/* K-GRID HEADER */
/* ------------------------------- */
.k-grid .k-grid-header th {
    font-size: 12px;
}

    .k-grid .k-grid-header tr th:last-child {
        border-width: 0 1px 1px 1px;
    }

.k-grid-header-wrap {
    border-color: transparent;
}

.k-grid .k-table {
    border-color: #DDDDDD !important;
}


/* K-GRID FOOTER */
/* ------------------------------- */
#footerToolbar {
    padding: 4px;
    border-top: 1px solid #ddd;
    color: #a6a6a6;
    background-color: #f5f5f5;
}

#footerToolbar .k-pager, #footerToolbar .k-pager-md {
    padding: 0 !important;
    border: none;
}

/* K-GRID CONTENT */
/* ------------------------------- */
.k-grid .k-grid-content {
    font-size: 12px;
}

.k-grid td,
.k-grid th {
    font-size: 0.9em !important;
    padding: 0.4em !important;
}

.noData {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    color: #CCCCCC;
    font-size: 13px;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-top: none;
}

.k-dropdowngrid-popup {
    font-size: 0.75rem !important;
}

.k-list {
    font-size: 0.75rem !important;
}

/* EDITABLE CELLS */
/* ------------------------------- */
.k-grid td.k-edit-cell {
    padding: 2px !important;
}

.k-grid td.k-edit-cell .k-input input,
.k-grid td.k-edit-cell .k-picker .k-input-inner {
    font-size: 0.75rem !important;
    padding: 0.25rem !important;
}

.k-grid td.k-edit-cell .k-input,
.k-grid td.k-edit-cell .k-picker {
    min-height: auto !important;
}

.k-dirt {
    border-color: transparent;
}

.k-input-button, .k-input-button.k-button {
    height: 26px !important;
}

.k-grid .k-grid-content tr:last-child td {
    border-bottom-width: 1px;
}

.k-table-tbody tr:last-child td {
    border-bottom: 1px solid #dddddd !important;
}

.k-grid .k-grid-content tr td:last-child {
    border-right-width: 1px;
}

/* DISABLE KENDO SPINNER/WAIT CURSOR */
.k-loading-image {
    background-image: none;
}

.k-loading-image {
    background-image: none;
}

.k-loading-color,
.k-loading-mask {
    opacity: 0;
}


.k-pager-numbers-wrap .k-button-flat {
    border: 1px solid #dddddd !important;
    border-right: none !important;
}

    .k-pager-numbers-wrap .k-button-flat.k-pager-last {
        border-right: 1px solid #dddddd !important;
    }

    .k-pager-numbers-wrap .k-button-flat.k-disabled {
        opacity: 1 !important;
        background-color: #e5e5e5 !important;
    }

        .k-pager-numbers-wrap .k-button-flat.k-disabled span {
            opacity: 0.25 !important;
        }

.k-pager-numbers-wrap .k-button-flat {
    color: #428bca;
}

    .k-pager-numbers-wrap .k-button-flat.k-selected {
        background-color: #428bca !important;
        border-color: #428bca !important;
        color: #ffffff !important;
    }

.k-pager-info {
    color: #aaaaaa;
}



/* STRIPED COLUMNS */
/* ------------------------------- */
.table thead th.colStripeHeader {
    background-color: #E9E9E9;
}

.table tbody td.colStripe {
    background-color: #F5F5F5;
}







/* BOOTSTRAP OVERRIDES
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* ALERTS
---------------------------------------- */
.alert {
    border-radius: 0.25rem !important;
}


/* BUTTONS
---------------------------------------- */
.btn {
    /*border-radius: 0.25rem !important;*/
}

.btn-primary {
    color: #FFF !important;
    background-color: #337AB7 !important;
    border-color: #2E6DA4 !important;
}

.btn-primary:hover {
    background-color: #286090 !important;
    border-color: #204D74 !important;
}

.btn-primary:active,
.btn-primary.active {
    background-color: #204D74 !important;
    border-color: #122B40 !important;
}

.btn-outline-primary {
    color: #337AB7 !important;
    background-color: #FFF !important;
    border-color: #2E6DA4 !important;
}

.btn-outline-primary:hover {
    color: #FFF !important;
    background-color: #337AB7 !important;
    border-color: #337AB7 !important;
}

.btn-outline-primary:active {
    color: #FFF !important;
    background-color: #204D74 !important;
    border-color: #122B40 !important;
}

.btn-whhMenu {
    font-size: 0.85rem;
    color: #FFFFFF !important;
    background-color: #337AB7 !important;
    border-color: #2E6DA4 !important;
    display: block;
    border-radius: 0.25rem !important;
    text-align: left;
    padding: 0.75rem !important;
}

.btn-whhMenu:hover {
    color: #FFFFFF !important;
    background-color: #286090 !important;
    border-color: #204D74 !important;
}

.btn-whhMenu:active {
    color: #FFFFFF !important;
    background-color: #204D74 !important;
    border-color: #122B40 !important;
}

.btn:disabled,
a.btn.disabled {
    background-color: #adb5bd !important;
    border-color: #adb5bd !important;
    color: #ffffff !important;
}


/* INPUTS
---------------------------------------- */
.form-control {
    /*border-radius: 0.25rem !important;*/
}

/* checkboxes 
.form-check-input[type=checkbox] {
    border-radius: 0.15em;
}*/
.form-check-input:checked {
    background-color: #337AB7;
    border-color: #337AB7;
}


/* TABS
---------------------------------------- */
.tab-pane {
    background-color: #FFF;
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}


/* TABLES
---------------------------------------- */
.table thead th {
    background-color: #F5F5F5;
}

.table td, 
.table th {
    font-size: 0.9em !important;
    padding: 0.4em !important;
}

.table th {
    font-weight: normal !important;
}


/* TEXT
---------------------------------------- */
.text-black-25 {
    opacity: 0.25;
}

.text-navy {
    color: #204D74 !important;
}


/* HELPERS
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* SM */
@media (min-width: 576px) {

    .flex-sm-even { flex: 1 !important; }

    /* NO BORDERS */
    /* ------------------------------- */
    .border-sm-0        { border: 0 !important; }
    .border-top-sm-0    { border-top: 0 !important; }
    .border-end-sm-0    { border-right: 0 !important; }
    .border-bottom-sm-0 { border-bottom: 0 !important; }
    .border-start-sm-0  { border-left: 0 !important; }

    /* BORDERS */
    /* ------------------------------- */
    .border-sm { border: 1px solid #dee2e6 !important; }
    .border-top-sm { border-top: 1px solid #dee2e6 !important; }
    .border-end-sm { border-right: 1px solid #dee2e6 !important; }
    .border-bottom-sm { border-bottom: 1px solid #dee2e6 !important; }
    .border-start-sm { border-left: 1px solid #dee2e6 !important; }

    /* WIDTH */
    /* ------------------------------- */
    .w-sm-25 { width: 25% !important; }
    .w-sm-50 { width: 50% !important; }
    .w-sm-75 { width: 75% !important; }
    .w-sm-100 { width: 100% !important; }
    .w-sm-auto { width: auto !important; }
}

/* MD */
@media (min-width: 768px) {

    .flex-md-even { flex: 1 !important; }

    /* NO BORDERS */
    /* ------------------------------- */
    .border-md-0 { border: 0 !important; }
    .border-top-md-0 { border-top: 0 !important; }
    .border-end-md-0 { border-right: 0 !important; }
    .border-bottom-md-0 { border-bottom: 0 !important; }
    .border-start-md-0 { border-left: 0 !important; }

    /* BORDERS */
    /* ------------------------------- */
    .border-md { border: 1px solid #dee2e6 !important; }
    .border-top-md { border-top: 1px solid #dee2e6 !important; }
    .border-end-md { border-right: 1px solid #dee2e6 !important; }
    .border-bottom-md { border-bottom: 1px solid #dee2e6 !important; }
    .border-start-md { border-left: 1px solid #dee2e6 !important; }

    /* WIDTH */
    /* ------------------------------- */
    .w-md-25 { width: 25% !important; }
    .w-md-50 { width: 50% !important; }
    .w-md-75 { width: 75% !important; }
    .w-md-100 { width: 100% !important; }
    .w-md-auto { width: auto !important; }
}

/* LG */
@media (min-width: 992px) {

    .flex-lg-even { flex: 1 !important; }

    /* NO BORDERS */
    /* ------------------------------- */
    .border-lg-0 { border: 0 !important; }
    .border-top-lg-0 { border-top: 0 !important; }
    .border-end-lg-0 { border-right: 0 !important; }
    .border-bottom-lg-0 { border-bottom: 0 !important; }
    .border-start-lg-0 { border-left: 0 !important; }

    /* BORDERS */
    /* ------------------------------- */
    .border-lg { border: 1px solid #dee2e6 !important; }
    .border-top-lg { border-top: 1px solid #dee2e6 !important; }
    .border-end-lg { border-right: 1px solid #dee2e6 !important; }
    .border-bottom-lg { border-bottom: 1px solid #dee2e6 !important; }
    .border-start-lg { border-left: 1px solid #dee2e6 !important; }

    /* WIDTH */
    /* ------------------------------- */
    .w-lg-25 { width: 25% !important; }
    .w-lg-50 { width: 50% !important; }
    .w-lg-75 { width: 75% !important; }
    .w-lg-100 { width: 100% !important; }
    .w-lg-auto { width: auto !important; }
}

/* XL */
@media (min-width: 1200px) {

    .flex-xl-even { flex: 1 !important; }

    /* NO BORDERS */
    /* ------------------------------- */
    .border-xl-0 { border: 0 !important; }
    .border-top-xl-0 { border-top: 0 !important; }
    .border-end-xl-0 { border-right: 0 !important; }
    .border-bottom-xl-0 { border-bottom: 0 !important; }
    .border-start-xl-0 { border-left: 0 !important; }

    /* BORDERS */
    /* ------------------------------- */
    .border-xl { border: 1px solid #dee2e6 !important; }
    .border-top-xl { border-top: 1px solid #dee2e6 !important; }
    .border-end-xl { border-right: 1px solid #dee2e6 !important; }
    .border-bottom-xl { border-bottom: 1px solid #dee2e6 !important; }
    .border-start-xl { border-left: 1px solid #dee2e6 !important; }

    /* WIDTH */
    /* ------------------------------- */
    .w-xl-25 { width: 25% !important; }
    .w-xl-50 { width: 50% !important; }
    .w-xl-75 { width: 75% !important; }
    .w-xl-100 { width: 100% !important; }
    .w-xl-auto { width: auto !important; }
}

/* XXL */
@media (min-width: 1400px) {

    .flex-xxl-even { flex: 1 !important; }

    /* NO BORDERS */
    /* ------------------------------- */
    .border-xxl-0 { border: 0 !important; }
    .border-top-xxl-0 { border-top: 0 !important; }
    .border-end-xxl-0 { border-right: 0 !important; }
    .border-bottom-xxl-0 { border-bottom: 0 !important; }
    .border-start-xxl-0 { border-left: 0 !important; }

    /* BORDERS */
    /* ------------------------------- */
    .border-xxl { border: 1px solid #dee2e6 !important; }
    .border-top-xxl { border-top: 1px solid #dee2e6 !important; }
    .border-end-xxl { border-right: 1px solid #dee2e6 !important; }
    .border-bottom-xxl { border-bottom: 1px solid #dee2e6 !important; }
    .border-start-xxl { border-left: 1px solid #dee2e6 !important; }

    /* WIDTH */
    /* ------------------------------- */
    .w-xxl-25   { width: 25% !important; }
    .w-xxl-50   { width: 50% !important; }
    .w-xxl-75   { width: 75% !important; }
    .w-xxl-100  { width: 100% !important;}
    .w-xxl-auto { width: auto !important;}
}




/* PAGE STYLES
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */



/* HOME
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

/* MAIN MENU BUTTONS
---------------------------------------- */
a.btn-mainMenu {
    display: block;
    color: #FFFFFF;
    cursor: pointer;
    
    text-decoration: none;
    
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    -moz-transition: all 0.2s;
    border-radius: 4px;
}

a.btn-mainMenu:hover {
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
}

a.btn-mainMenu p {
    font-size: 18px;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}

a.btn-mainMenu p.badge {
    font-size: 8px;
    border-radius: 4px;
}

a.btn-INT,
a.btn-CUS {
    background-color: #0071BC;
}

a.btn-INT:hover,
a.btn-CUS:hover {
    background-color: #00558D;
}

a.btn-mainMenu .btnImg {
    background-color: #FFFFFF;
    width: 48px;
    height: 48px;
    border-radius: 24px;
}

a.btn-mainMenu .btnImg img {
    width: 30px;
    height: 30px;
}

a.btn-mainMenu .btnImg {
    color: #006299;
}








/* ACCOUNT
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* ACCOUNT - CHANGE ORG
---------------------------------------- */
/* ACCOUNT - CHANGE PASSWORD
---------------------------------------- */
/* ACCOUNT - FORGOT PASSWORD
---------------------------------------- */
/* ACCOUNT - LOGIN
---------------------------------------- */
#loginHeader {
    background-image: url(/../Content/Images/whhHeadBackground.jpg);
    background-size: 200%;
    width: 100%;
}

/* show/hide password value */
.revealPassword {
    position: absolute;
    top: 41px;
    right: 13px;
    width: 42px;
    height: 36px;
    border: none;
    background-color: transparent;
    font-size: 1rem;
}

/* ACCOUNT - SET PASSWORD
---------------------------------------- */


/* ADMIN
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* ADMIN - EVENT LOG
---------------------------------------- */
.eventLog_error {
    color: #d9534f;
    background-color: #fcf1f1 !important;
}


/* APP MGMT
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* APP MGMT - DEVICES
---------------------------------------- */
.copyGuid:hover {
    font-weight: bold;
    color: #337AB7;
}



/* RECTIFICATION
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* RECT - CATEGORY FAULTS
---------------------------------------- */
.ko_grid_sm {
    padding: 4px !important;
    font-size: 0.75rem !important;
}

.col_status .badge {
    display: block;
    width: 14px;
    height: 14px;
    padding: 0 !important;
    border-radius: 2px;
    margin: 0 auto;
}

.col_scarWO .badge {
    font-size: 90% !important;
    display: block !important;
    padding: 5px 10px 4px 10px !important;
    border-radius: 2px;
}

/* SCAR / Works Order Badges */
.badge-SCAR {
    background-color: #c71a96;
}

.badge-EXWO,
.badge-INWO {
    background-color: #8a1ac7;
}

.badge-SCAR,
.badge-EXWO,
.badge-INWO {
    color: #FFFFFF;
}

.badge-outs {
    background-color: #d9534f;
}

.badge-rect {
    background-color: #F0AD46;
}

.badge-PA {
    background-color: #5cb85c;
}

.badge-FL {
    background-color: #d9534f;
}

.badge-PA,
.badge-FL {
    color: #FFFFFF;
}

.gridBadge {
    width: 108px;
    display: block;
    border-radius: 2px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
}

#modal_success li {
    background-color: transparent !important;
}

/* PDI
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* PDI - Rectification Faults
---------------------------------------- */

/* SCAR / Works Order Badges */
.label-SCAR {
    background-color: #c71a96;
}

.label-EXWO,
.label-INWO {
    background-color: #8a1ac7;
}

.label-warning {
    background-color: #f0ad4e;
}

.label-danger {
    background-color: #dc3545;
}

.label-SCAR,
.label-EXWO,
.label-INWO,
.label-warning,
.label-danger {
    font-size: 100% !important;
    padding: 0.3em 0.6em !important;
}

/* PDR
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* PDR - PDR VANS LIST
---------------------------------------- */
#PDRVansListGrid td {
    vertical-align: middle !important;
}

.label-pdr-preprod {
    background-color: #FEC13D;
    color: #111111;
}

.label-pdr-inprod {
    background-color: #3FA9F5;
}

.label-pdr-finished {
    background-color: #7AC943;
}

.label-pdr-unknown {
    background-color: #d9534f;
}

.label-pdr-preprod,
.label-pdr-inprod,
.label-pdr-finished,
.label-pdr-unknown {
    font-size: 11px;
    padding: 4px !important;
    display: inline-block;
    margin: 0;
    width: 100%;
}



.status_can-complete .faultDetail {
    background-color: #fbd4b4;
}

.status_can-complete:hover .faultDetail {
    background-color: #e2bfa2;
}

.status_due-to-complete .faultDetail {
    background-color: #ffcc00;
}

.status_due-to-complete:hover .faultDetail {
    background-color: #e6b800;
}

.status_eta-date-provided .faultDetail {
    background-color: #ffff00;
}

.status_eta-date-provided:hover .faultDetail {
    background-color: #e6e600;
}

.status_awaiting-eta .faultDetail {
    background-color: #00ffff;
}

.status_awaiting-eta:hover .faultDetail {
    background-color: #00e6e6;
}


/* PDR - VAN FAULTS
---------------------------------------- */
.panel-pdrFault {
    border-color: #d9534f;
}

.panel-pdrFault > .card-header {
    color: #fff;
    background-color: #d9534f;
    border-color: #d9534f;
}

.panel-pdrRect {
    border-color: #FC9B23;
}

.panel-pdrRect > .card-header {
    color: #fff;
    background-color: #FC9B23;
    border-color: #FC9B23;
}

.btnPdrMoreDetails,
.btnPdiMoreDetails {
    cursor: pointer;
    color: #337ab7;
}

.btnPdrMoreDetails:hover,
.btnPdiMoreDetails:hover {
    cursor: pointer;
    color: #23527c;
    text-decoration: underline;
}

.pdrMoreDetails,
.pdiMoreDetails {
    display: none;
}

.tblRectDetails {
    background-color: #FEEFDC;
}

.tblRectDetails th,
.tblRectDetails td {
    border-color: #FED7A7 !important;
}

#grid_vanFaults tr.rowStatus_1 td.col_status {
    background-color: #d9534f;
    color: #FFFFFF;
}

#grid_vanFaults tr.rowStatus_2 td.col_status {
    background-color: #FC9B23;
    color: #FFFFFF;
}

#grid_vanFaults tr.rowStatus_1:hover td {
    background-color: #f7dddc !important;
}

#grid_vanFaults tr.rowStatus_1:hover td:first-child {
    background-color: #ac2925 !important;
}

#grid_vanFaults tr.rowStatus_2:hover td {
    background-color: #fcefdc !important;
}

#grid_vanFaults tr.rowStatus_2:hover td:first-child {
    background-color: #d58512 !important;
}







#inProductionList .faults_outstanding td:nth-child(1),
#inProductionList .faults_outstanding td:nth-child(2),
#productionHistoryList .faults_outstanding td:nth-child(1) {
    background-color: #d9534f;
    color: #000000;
}

#inProductionList .faults_rectified td:nth-child(1),
#inProductionList .faults_rectified td:nth-child(2),
#productionHistoryList .faults_rectified td:nth-child(1) {
    background-color: #f0ad4e;
    color: #000000;
}

#inProductionList .faults_none td:nth-child(1),
#inProductionList .faults_none td:nth-child(2),
#productionHistoryList .faults_none td:nth-child(1) {
    background-color: #5cb85c;
    color: #000000;
}

#inProductionList tr:hover,
#productionHistoryList tr:hover {
    cursor: pointer;
}

#inProductionList tr.faults_outstanding:hover,
#inProductionList tr.faults_outstanding:hover > td:nth-child(1),
#inProductionList tr.faults_outstanding:hover > td:nth-child(2),
#productionHistoryList tr.faults_outstanding:hover,
#productionHistoryList tr.faults_outstanding:hover > td:nth-child(1) {
    background-color: #c9302c;
    color: #FFFFFF;
}

#productionHistoryList tr:hover i {
    color: #FFFFFF !important;
}

#inProductionList tr.faults_rectified:hover,
#inProductionList tr.faults_rectified:hover > td:nth-child(1),
#inProductionList tr.faults_rectified:hover > td:nth-child(2),
#productionHistoryList tr.faults_rectified:hover,
#productionHistoryList tr.faults_rectified:hover > td:nth-child(1) {
    background-color: #E87E00;
    color: #FFFFFF;
}

#inProductionList tr.faults_none:hover,
#inProductionList tr.faults_none:hover > td:nth-child(1),
#inProductionList tr.faults_none:hover > td:nth-child(2),
#productionHistoryList tr.faults_none:hover,
#productionHistoryList tr.faults_none:hover > td:nth-child(1) {
    background-color: #449d44;
    color: #FFFFFF;
}

























/* VAN LOCATOR
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

/* VAN LOCATOR - INDEX
---------------------------------------- */
/* google maps custom info window */
.gmInfoWindowTitle {
    font-size: large;
    font-weight: bold;
}

.gmInfoWindowContent .vanDesc {
    margin-bottom: 5px;
}

.gmInfoWindowContent .vanZone {
    font-weight: bold;
}


/* STOCKTAKE
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

#selectedZonesGrid tbody tr {
    vertical-align: middle;
}

#selectedZonesGrid tbody tr:last-child td {
    border-bottom: none;
}

#selectedZonesGrid tbody tr td:last-child {
    text-align: end;
}

#selectedZonesGrid tbody tr .btnRemoveZone {
    --bs-btn-padding-y: .25rem;
    --bs-btn-padding-x: .45rem;
    --bs-btn-font-size: .65rem;
}

#selectedZonesGrid tbody tr .btnRemoveZone:hover {
    color: red;
    background-color: #EEEEEE;
}

#selectedZonesGrid tbody tr .btnRemoveZone:active {
    background-color: #DDDDDD;
    border-color: #DDDDDD;
}


/* UNIT PHOTOS
--------------------------------------------------------------------------------
------------------------------------------------------------------------------*/

/* UNIT PHOTOS - INDEX 
---------------------------------------- */
#view_unitPhotos .thumbnail {
    padding: 0;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    position: relative; /* If you want content inside of it */
    border: none !important;
    background-color: #FFFFFF;
}

#view_unitPhotos .thumbnail:hover {
    background-color: #337ab7;
}

#view_unitPhotos .thumbnail a {
    position: absolute;
    top: 4px;
    left: 4px;
    bottom: 4px;
    right: 4px;
}


@media (min-width: 1200px) {

    #modal_photoViewer #photoContainer {
        height: 75vh;
    }
}

@media (max-width: 1199px) {

    #modal_photoViewer #photoContainer {
        height: 50vh;
    }
}

#modal_photoViewer #photoDisplay {
    max-height: 100%;
}