/* Custom CSS */
/**************************************/
:root {
    /* --mtx-input-focus-border-color: unset;
    --mtx-input-focus-box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); */
    --mtx-input-focus-border-color: #F59942;
    --mtx-input-focus-box-shadow: unset;
}
/**
 * Bootstrap style overwrites
 * TODO: Move to more appropriate stylesheet
 */
a {
    text-decoration: none;
}

table {
    border-spacing: 0;
}

.navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 9h22M4 15h22M4 21h22'/%3e%3c/svg%3e");
}
.navbar-dark {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb%28255, 255, 255%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 9h22M4 15h22M4 21h22'/%3e%3c/svg%3e");
}

.navbar .navbar-toggler-icon {
    width: 30px;
    height: 30px;
}

@media only screen and (max-width: 991px) {
    #fixedFooterBar ul li .btn{
        background: transparent !important;
        border: none !important;
        color: #bac2c8 !important;
        font-size: .9268rem !important;
        text-shadow: none !important;
    }
}

@media only screen and (min-width: 992px) {
    #fixedFooterBar {
        position: fixed;
        bottom: 0px;
        height: auto !important;
        display: block !important;
        visibility: visible !important;
        overflow: visible !important;
    }
    #fixedFooterBar ul li{
        display: inline-block;
    }
}

/* Suppress the automatic icon, since we always add one in the HTML where appropriate */
.dropdown-toggle::after {
    display: none;
}

.dropdown-menu {
    --bs-dropdown-padding-y: 5px;
}
/**
 * END: Bootstrap style overwrites
 */

#modalSpinner {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999300;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: url('../../img/loaders/black45.png');
    background: rgba(0, 0, 0, 0.5);
}

.spinner{
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    background:url(../../img/loaders/ajax-loader2.gif) no-repeat center center;
    margin-left: -50px;
    margin-top: -50px;
    overflow: auto;
}

.hide{
    display: none !important;
}
.clearBoth{
    clear: both;
}

/*small loader gif beside the input field (check if username exists)) */
.smallLoader{
    display: inline-block;
    width:16px;
    height: 16px;
    background:url(img/loaders/loading.gif) no-repeat center center;
/*    margin-left: -8px;
    margin-top: -8px;*/
    overflow: auto;
}

.spanLabel {
    margin-bottom: 4px;
    font-weight: bolder;
    font-size: 14px;
}

.spanLabel.col-form-label {
    font-size: inherit;
}

.spanValue {
    color: #555;
    font-weight: normal;
    font-size: 14px;
}

/* DAMAGE DETAILS */
/*Start of Damage Tab */
.cbxDamageA{
    position: absolute;
    top: 60px;
    left: 0;
}

.cbxDamageB{
    position: absolute;
    top: 0;
    left: 0;
}

.cbxDamageC{
    position: absolute;
    top: 0;
    left: 150px;
}

.cbxDamageD{
    position: absolute;
    top: 0;
    right: 0;
}

.cbxDamageE{
    position: absolute;
    top: 60px;
    right: 0;
}

.cbxDamageF{
    position: absolute;
    bottom: 0;
    left: 0;
}

.cbxDamageG{
    position: absolute;
    bottom: 0;
    left: 150px;
}

.cbxDamageH{
    position: absolute;
    bottom: 0;
    right: 0;
}

.cbxDamageI{
    position: absolute;
    top: 60px;
    left: 150px;
}
.vehicle-impact-cbxgroup-cbxcontainer{
    display: inline-block;
    /*border: 1px black solid;*/
    width:32%;
    height:33%;
    text-align: center;
    position: relative;
}
.vehicleImpacCbox{
/*    font-weight: bold;
    font-size: 1.3em;*/
    vertical-align: middle;
    position: absolute;
/*    top: 0;
    bottom: 0;
    left: 0;
    right: 0;*/
    top: 30%;
    left: 45px;
}

.vehicleWrapperCanvasParent {
    pointer-events: none;
}

.vehicleWrapperCanvasParent.vehicleWrapperCanvasIsEditing {
    pointer-events: auto;
}

#specific-comments-container-textarea{
    width:100%;
    height:100%;
    resize:none;
    /*overflow:scroll;*/
}

/* Override element using "wysiwyg-editor"'s CSS */
#specific-comments-container-textarea.wysiwyg-editor{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
/* END: Override element using "wysiwyg-editor"'s CSS */

#vehicle-lookup-button{
    margin-left:100%;
}

/* Custom btn-group CSS */
/* Set parent btn-group with flex */
.btnGroupFlex{
    display: flex;
    gap: 2px;
}
/* Make each flex item width 100% and add border to create some space between them. */
.btnGroupFlex .btn{
    width: 100%;
}
/* Reset border-bottom to default */
.btnGroupFlex .btn.active:after{
    border-bottom: initial;
}

.btnGroupFlex .btn:has(.btn-check:focus-visible) {
    box-shadow: var(--mtx-input-focus-box-shadow, none);
	outline: 1px solid var(--mtx-input-focus-border-color, transparent);
    outline-offset: 1px;
}

/* END: Custom btn-group CSS */

/**
    By Default Bootstrap switch has a disabled effect on the switch when setting the switch to indeterminate, if the bootstrap-switch-indeterminate-opacity-full is on a parent, ensure this "feature" is not displayed
 */
.bootstrap-switch-indeterminate-opacity-full .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
.bootstrap-switch-indeterminate-opacity-full .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off {
    opacity: 1;
}

.bootstrap-switch-indeterminate-cursor-pointer .bootstrap-switch.bootstrap-switch-indeterminate,
.bootstrap-switch-indeterminate-cursor-pointer .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-label,
.bootstrap-switch-indeterminate-cursor-pointer .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-on,
.bootstrap-switch-indeterminate-cursor-pointer .bootstrap-switch.bootstrap-switch-indeterminate .bootstrap-switch-handle-off {
    cursor: pointer !important;
}

/*#vehicle-impact-other-details{
    //border: 1px red solid;
    width:50%;
    float:right;
}*/
#vehicle-damage{
    clear:both;
}

.paddingAround-5{
    padding: 5px 5px 5px 5px !important;
}
.paddingAround-10{
    padding: 10px 10px 10px 10px !important;
}
.paddingAround-12{
    padding: 12px 12px 12px 12px !important;
}
.paddingAround-15{
    padding: 15px 15px 15px 15px !important;
}

.paddingTop-7{
    padding-top: 7px !important;
}
.paddingTop-8{
    padding-top: 8px !important;
}
.paddingTop-9{
    padding-top: 9px !important;
}
.paddingTop-10{
    padding-top: 10px !important;
}
.paddingTop-11{
    padding-top: 11px !important;
}
.paddingTop-12{
    padding-top: 12px !important;
}
.paddingTop-13{
    padding-top: 13px !important;
}
.paddingTop-20{
    padding-top: 20px !important;
}
.paddingTop-30{
    padding-top: 30px !important;
}
.paddingTop-40{
    padding-top: 40px !important;
}
.paddingTop-45{
    padding-top: 45px !important;
}
.paddingTop-50{
    padding-top: 50px !important;
}
.paddingTop-70{
    padding-top: 70px !important;
}
.paddingTop-90{
    padding-top: 90px !important;
}
.paddingTop-100{
    padding-top: 100px !important;
}
.paddingTop-110{
    padding-top: 110px !important;
}
.paddingTop-120{
    padding-top: 120px !important;
}
.paddingTop-130{
    padding-top: 130px !important;
}
.paddingTop-140{
    padding-top: 140px !important;
}
.paddingTop-150{
    padding-top: 150px !important;
}
.paddingTop-160{
    padding-top: 160px !important;
}
.paddingTop-170{
    padding-top: 170px !important;
}
.paddingTop-180{
    padding-top: 180px !important;
}

.paddingLeft-0{
    padding-left: 0px !important;
}

.paddingLeft-12{
    padding-left: 12px !important;
}

.paddingLeft-24{
    padding-left: 24px !important;
}

.paddingLeft-90{
    padding-left: 90px !important;
}

.paddingRight-10{
    padding-right: 10px !important;
}

.paddingRight-12{
    padding-right: 12px !important;
}

.paddingRight-45{
    padding-right: 45px !important;
}

.paddingRight-50{
    padding-right: 50px !important;
}

.fontSize14{
    font-size: 14px !important;
}

.fontSize16{
    font-size: 16px !important;
}
/***************** Height custom heights *****************/
/* vh */
.h-55vh {
    height: 55vh !important;
}

/***************** Width custom heights *****************/
/**
Width Px
*/
.w-50px{
    width: 50px;
}
.w-100px{
    width: 100px;
}
.w-150px{
    width: 150px;
}
.w-200px{
    width: 200px;
}
.w-275px {
    width: 275px;
}

.max-w-200px {
    max-width: 200px !important;
}

.max-w-450px {
    max-width: 450px !important;
}

/**
 * Set the max-width of a tooltip
 * Use with `data-bs-custom-class`
 */
.tooltip-max-w-320px {
    --bs-tooltip-max-width: 320px;
}

@media (min-width: 576px) {
    .w-sm-auto {
        width: auto !important;
    }

    .w-sm-100 {
        width: 100% !important;
    }
}
/*****************  Background for the search criteria *****************/
.criteriaBg {
    padding: 20px;
    position: relative;
    zoom: 1;
    color: white;
    border-top: 1px solid #666666;
    border-bottom: 1px solid #666666;
    background: #33373a;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.25)), to(rgba(0, 0, 0, 0.25)), color-stop(0.4, rgba(0, 0, 0, 0)), color-stop(0.6, rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, left bottom, from(#5e6165), to(#33373a));
    background:-webkit-linear-gradient(left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25)), -webkit-linear-gradient(top, #5e6165, #33373a);
    background:-moz-linear-gradient(left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25)), -moz-linear-gradient(top, #5e6165, #33373a);
    background:-ms-linear-gradient(left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25)), -ms-linear-gradient(top, #5e6165, #33373a);
    background:-o-linear-gradient(left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25)), -o-linear-gradient(top, #5e6165, #33373a);
    background:linear-gradient(left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25)), linear-gradient(top, #5e6165, #33373a);
}
.criteriaBg a {
    color: white;
}
.criteriaBg:before,
.criteriaBg:after {
    display: block;
    content: ' ';
    position: absolute;
    left: 0;
    right: 0;
}
.criteriaBg:before {
    top: -10px;
    height: 20px;
/*    background: url(/img/effects/dashboard-top-shadow.png) no-repeat center top;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;*/
}
.criteriaBg:after {
    bottom: 0;
    height: 5px;
/*    background: url(/img/effects/dashboard-bottom-shadow.png) no-repeat center bottom;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;*/
}
#main.no-bg-for-mobile .criteriaBg {
    border-top-color: #26282a;
    border-top-color: rgba(0, 0, 0, 0.15);
    border-bottom-color: #65686a;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}
/* IE7 */
.criteriaBg + .with-padding {
    zoom: 1;
}

/*NOTIFICATION AREA */
/*nav-search (quick search)*/
#quickSearch{
    width: 230px !important;
    height: 30px !important;
    margin-top: 5px !important;
    border-radius: 0px !important;
}
#quickSearchFrom i.nav-search-icon{
    top: 5px !important;
}
/************************/
.dropdown-menu{
    min-width: 300px !important;
}
div.datepicker.dropdown-menu{
    min-width: inherit !important;
}
#neirCustMobileContainer .dropdown-menu,
#neirPolicyHolderMobileContainer .dropdown-menu{
    min-width: 160px !important;
    left: inherit !important;
}
#neirSendSmsToMobileDropdown{
    min-width: 160px !important;
    left: inherit !important;
}

#modalNewMessageText{
    width:100%;
    height:100%;
    resize:none;
    /*overflow:scroll;*/
}

/*PAGE LAYOUT */

/**
BEGIN: Page Content CSS
*/
.pageContentTabs{
    position: sticky;
    top: 45px;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    padding: 15px 0 0 0;
    -webkit-box-shadow: 0px 5px 5px -1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 5px 5px -1px rgba(0,0,0,0.1);
    box-shadow: 0px 5px 5px -1px rgba(0,0,0,0.1);
}

/**
END: Page CSS
*/

/* Headers for data tables */
/* .dataTables_wrapper .row:first-child{
    padding-top: 7px !important;
    padding-bottom: 3px !important;
    background-color: #307ecc;
    color: #ffffff;
} */
/* Footers for data tables */
/* .dataTables_wrapper .row:last-child{
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    background-color: #2a91d8;
    color: #ffffff;
} */

/* .dataTable.table > thead > tr{
    color: #ffffff !important;
    background: #666666 !important;
} */

/* .dataTable > thead > tr > th[class*=sort]:after {
    color: #ffffff !important;
}
.dataTable > thead > tr > th[class*=sort]:hover {
    color: #f2bb46 !important;
} */
/* .dataTable > thead > tr > th[class*=sorting_] {
    color: #307ecc !important;
    color: #f2bb46 !important;
    color: #ffffff !important;
} */
/* .dataTable > thead > tr > th.sorting_desc,
.dataTable > thead > tr > th.sorting_asc {
    color: #ffffff !important;
    background: #999999 !important;
}
.dataTable > thead > tr > th.sorting_desc:after {
    content: "\f0dd";
    top: -6px;
    color: #ffffff !important;
}
.dataTable > thead > tr > th.sorting_asc:after {
    content: "\f0de";
    top: 4px;
    color: #ffffff !important;
} */

table.dataTable td, table.dataTable th {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

.dataTables_scrollHead .dataTables_scrollHeadInner table.dataTable{
    margin-top: 0px !important;
}

/*
 * We want row tooltips positioned relative to the row in dataTables.
 * So if the row is scrolled out of view while its tooltip is showing, the tooltip doesn't remain visible.
 */
.dataTable tr[data-bs-toggle="tooltip"] {
    position: relative;
}

/**
 * If `.align-middle` is used on a Bootstrap `.table`,
 * ensure it overwrites the cells' top alignment added by the `.table`
 */
.table.align-middle > * > tr > td,
.table .align-middle > tr > td,
.table .align-middle > td {
    vertical-align: middle;
}

#sidebar .interventionIconSectionSidebar .inspect-icon-search {
    top: 50%;
    right: 8%;
    font-size: .675em;
}

#sidebar .interventionIconSectionSidebar .inspect-icon-circle {
    top: 43%;
    right: 7%;
    font-size: 0.9em;
}

#sidebar.menu-min .interventionIconSectionSidebar .inspect-icon-search {
    top: 50%;
    right: 21%;
}

#sidebar.menu-min .interventionIconSectionSidebar .inspect-icon-circle {
    top: 43%;
    right: 21%;
}

.nav-list > li a .menu-icon.interventionIconSectionSidebar .inspect-icon-circle {
    color: var(--color-secondary);
}

.nav-list > li:hover a:not(.active) .menu-icon.interventionIconSectionSidebar .inspect-icon-circle {
    color: #37373a;
}

.nav-list > li a.active .menu-icon.interventionIconSectionSidebar .inspect-icon-circle {
    color: #f1f1f2;
}

.nav-list > li .submenu > li a > .menu-icon{
    left: 0px;
}

/* Fix Bootstrap .modal compatibility with jQuery UI Autocomplete,
see http://stackoverflow.com/questions/10957781/google-maps-autocomplete-result-in-bootstrap-modal-dialog */
.pac-container {
  z-index: 2000 !important;
}

.cursor-help {
    cursor: help;
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}

.pointer,
.cursor-pointer {
    cursor: pointer !important;
}

.cursor-wait {
    cursor: wait !important
}

/*New Location Modal Styles*/
#newLocationReq .modal-dialog,
#newPrDealerModal .modal-dialog {
    --bs-modal-max-width: 75%;
}

#newEngineerInspectionRequestModal .modal-dialog {
    --bs-modal-max-width: 90%;
}

#nlrVehicleRegInput{
    text-transform: uppercase;
}

#nlrFooterBar, #nprFooterBar{
    position:relative;
    bottom: 1px;
    left: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 62px;
    width: 100%;
    background:#2c6aa0;
}

#neirFooterBar {
    padding-top: 10px;
    padding-bottom: 10px;
    background:#2c6aa0;
}

.box-sizing-border {
    box-sizing: border-box !important;
}

.height30{
    height:30px !important;
}
.height50{
    height:50px !important;
}
.height80{
    height:80px !important;
}
.height100{
    height:100px !important;
}
.height150{
    height:150px !important;
}
.height200{
    height:200px !important;
}
.height250{
    height:250px !important;
}
.height300{
    height:300px !important;
}
.height350{
    height:350px !important;
}
.height400{
    height:400px !important;
}
.height450{
    height:450px !important;
}
.height500{
    height:500px !important;
}

.alignContentCenterMiddle{
  display:flex;
  align-items:center;
  justify-content:center;
}

.displayBlock{
    display: block !important;
}

.displayInlineBlock{
    display: inline-block;
}

.displayTable{
    display: table;
}

/**
    Display flex properties
*/

.displayFlex{
    display: flex;
}
.flexBasis0 {
    flex-basis: 0 !important;
}

.flexBasis100 {
    flex-basis: 100% !important;
}

@media (min-width: 1500px) {
    .d-1500px-flex {
        display: flex !important;
    }
}

/****** Common Styles - Spacing (horizontal, vertical) **********/
.hspacer-5{
    margin: 0px 5px 0px 5px !important;
}
.hspacer-l-5{
    margin: 0px 0px 0px 5px !important;
}
.hspacer-r-5{
    margin: 0px 5px 0px 0px !important;
}
.hspacer-10{
    margin: 0px 10px 0px 10px !important;
}
.hspacer-l-10{
    margin: 0px 0px 0px 10px !important;
}
.hspacer-r-10{
    margin: 0px 10px 0px 0px !important;
}
.hspacer-20{
    margin: 0px 20px 0px 20px !important;
}
.hspacer-l-20{
    margin: 0px 0px 0px 20px !important;
}
.hspacer-r-20{
    margin: 0px 20px 0px 0px !important;
}
.hspacer-50{
    margin: 0px 50px 0px 50px !important;
}
.hspacer-l-50{
    margin: 0px 0px 0px 50px !important;
}
.hspacer-r-50{
    margin: 0px 50px 0px 0px !important;
}
/**Vertical**/
.vspacer-5{
    margin: 5px 0px 5px 0px !important;
}
.vspacer-t-5{
    margin: 5px 0px 0px 0px !important;
}
.vspacer-b-5{
    margin: 0px 0px 5px 0px !important;
}
.vspacer-10{
    margin: 10px 0px 10px 0px !important;
}
.vspacer-t-10{
    margin: 10px 0px 0px 0px !important;
}
.vspacer-b-10{
    margin: 0px 0px 10px 0px !important;
}
.vspacer-20{
    margin: 20px 0px 20px 0px !important;
}
.vspacer-t-20{
    margin: 20px 0px 0px 0px !important;
}
.vspacer-b-20{
    margin: 0px 0px 20px 0px !important;
}
.vspacer-50{
    margin: 50px 0px 50px 0px !important;
}
.vspacer-t-50{
    margin: 50px 0px 0px 0px !important;
}
.vspacer-b-50{
    margin: 0px 0px 50px 0px !important;
}

/**
 * Position classes
 */
.inset-0 {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

.bottom-1em {
    bottom: 1em !important;
}

/**************** GRITTER NOTIFICATIONS **********************/
/* Don't overlap the usermenu in the navbar */
#gritter-notice-wrapper {
    top: 45px;
    right: 15px;
}

.gritter-top-center {
    position: fixed;
    left: 33%;
    right: 33%;
    top: 0px;
}
@media only screen and (max-width: 767px) {
    .gritter-top-center {
        left: 16%;
        right: 16%;
        top: 0px;
    }
}
@media only screen and (max-width: 480px) {
    .gritter-top-center {
        left: 30px;
        right: 30px;
        top: 0px;
    }
}
@media only screen and (max-width: 320px) {
    .gritter-top-center {
        left: 10px;
        right: 10px;
        top: 0px;
    }
}


.gritter-top-left {
    position: fixed;
    left: 20px;
    top: 20px;
    width: 300px;
}

.gritter-center-left {
    position: fixed;
    left: 20px;
    /*right: 33%;*/
    top: 33%;
    width: 300px;
}
@media only screen and (max-width: 767px) {
    .gritter-center-left {
        left: 20px;
        /*right: 16%;*/
        top: 33%;
    }
}
@media only screen and (max-width: 480px) {
    .gritter-center-left {
        left: 10px;
        /*right: 30px;*/
    }
}
@media only screen and (max-width: 320px) {
    .gritter-center-left {
        left: 5px;
        /*right: 10px;*/
    }
}

.gritter-center-right {
    position: fixed;
    /*left: 33%;*/
    right: 20px;
    top: 33%;
    width: 300px;
}
@media only screen and (max-width: 767px) {
    .gritter-center-right {
        /*left: 16%;*/
        right: 20px;
        top: 33%;
    }
}
@media only screen and (max-width: 480px) {
    .gritter-center-right {
        /*left: 30px;*/
        right: 10px;
    }
}
@media only screen and (max-width: 320px) {
    .gritter-center-right {
        /*left: 10px;*/
        right: 5px;
    }
}

.gritter-bottom-center {
    position: fixed;
    left: 33%;
    right: 33%;
    bottom: 0px;
}
@media only screen and (max-width: 767px) {
    .gritter-bottom-center {
        left: 16%;
        right: 16%;
        bottom: 0px;
    }
}
@media only screen and (max-width: 480px) {
    .gritter-bottom-center {
        left: 30px;
        right: 30px;
        bottom: 0px;
    }
}
@media only screen and (max-width: 320px) {
    .gritter-bottom-center {
        left: 10px;
        right: 10px;
        bottom: 0px;
    }
}

.gritter-bottom-left {
    position: fixed;
    left: 20px;
    /*right: 33%;*/
    bottom: 0px;
    width: 300px;
}
@media only screen and (max-width: 767px) {
    .gritter-bottom-left {
        left: 20px;
        /*right: 16%;*/
        bottom: 0px;
    }
}
@media only screen and (max-width: 480px) {
    .gritter-bottom-left {
        left: 10px;
        /*right: 30px;*/
        bottom: 0px;
    }
}
@media only screen and (max-width: 320px) {
    .gritter-bottom-left {
        left: 5px;
        /*right: 10px;*/
        bottom: 0px;
    }
}

.gritter-bottom-right {
    position: fixed;
    /*left: 33%;*/
    right: 20px;
    bottom: 0px;
    width: 300px;
}
@media only screen and (max-width: 767px) {
    .gritter-bottom-right {
        /*left: 16%;*/
        right: 20px;
        bottom: 0px;
    }
}
@media only screen and (max-width: 480px) {
    .gritter-bottom-right {
        /*left: 30px;*/
        right: 10px;
        bottom: 0px;
    }
}
@media only screen and (max-width: 320px) {
    .gritter-bottom-right {
        /*left: 10px;*/
        right: 5px;
        bottom: 0px;
    }
}

/************* New location request modal *******************************/
#nlrVehicleRegInput-error{
    position:absolute;
    left: -100px;
    top: 30px;
}

/************* Block UI *************/
.blockPage h1{
    margin-top: 10px;
}

label {
    font-weight: bold !important;
}
/********** Margins *****************/
.margin-top-5{
    margin-top: 5px !important;
}
.margin-bottom-5{
    margin-bottom: 5px !important;
}
.margin-left-5{
    margin-left: 5px !important;
}
.margin-right-5{
    margin-right: 5px !important;
}
.margin-top-10{
    margin-top: 10px !important;
}
.margin-bottom-10{
    margin-bottom: 10px !important;
}
.margin-left-10{
    margin-left: 10px !important;
}
.margin-right-10{
    margin-right: 10px !important;
}
.margin-top-20{
    margin-top: 20px !important;
}
.margin-bottom-20{
    margin-bottom: 20px !important;
}
.margin-left-20{
    margin-left: 20px !important;
}
.margin-right-20{
    margin-right: 20px !important;
}
.margin-top-30{
    margin-top: 30px !important;
}
.margin-bottom-30{
    margin-bottom: 30px !important;
}
.margin-left-30{
    margin-left: 30px !important;
}
.margin-right-30{
    margin-right: 30px !important;
}
.margin-top-40{
    margin-top: 40px !important;
}
.margin-bottom-40{
    margin-bottom: 40px !important;
}
.margin-left-40{
    margin-left: 40px !important;
}
.margin-right-40{
    margin-right: 40px !important;
}
.margin-top-50{
    margin-top: 50px !important;
}
.margin-bottom-50{
    margin-bottom: 50px !important;
}
.margin-left-50{
    margin-left: 50px !important;
}
.margin-right-100{
    margin-right: 100px !important;
}
.margin-top-100{
    margin-top: 100px !important;
}
.margin-bottom-100{
    margin-bottom: 100px !important;
}
.margin-left-100{
    margin-left: 100px !important;
}
.margin-right-100{
    margin-right: 100px !important;
}
/********** Paddings **************/
.padding-top-10{
    padding-top: 10px !important;
}
.padding-bottom-10{
    padding-bottom: 10px !important;
}
.padding-left-6{
    padding-left: 6px !important;
}
.padding-left-10{
    padding-left: 10px !important;
}
.padding-left-15{
    padding-left: 15px !important;
}
.padding-left-20{
    padding-left: 20px !important;
}
.padding-right-10{
    padding-right: 10px !important;
}

.padding-x-25 {
    padding-left: 25px !important;
    padding-right: 25px !important;
}
/********* WIDTHS ****************/

.widthPx-20 {
    width: 20px !important;
}
.widthPx-25 {
    width: 25px !important;
}
.widthPx-30 {
    width: 30px !important;
}
.widthPx-35 {
    width: 35px !important;
}
.widthPx-40 {
    width: 40px !important;
}
.widthPx-45 {
    width: 45px !important;
}
.widthPx-50 {
    width: 50px !important;
}
.widthPx-55 {
    width: 55px !important;
}
.widthPx-60 {
    width: 60px !important;
}
.widthPx-65 {
    width: 65px !important;
}
.widthPx-70 {
    width: 70px !important;
}
.widthPx-75 {
    width: 75px !important;
}
.widthPx-80 {
    width: 80px !important;
}
.widthPx-85 {
    width: 85px !important;
}
.widthPx-90 {
    width: 90px !important;
}
.widthPx-95 {
    width: 95px !important;
}
.widthPx-100 {
    width: 100px !important;
}
.widthPx-130 {
    width: 130px !important;
}
.widthPx-150 {
    width: 150px !important;
}
.widthPx-160 {
    width: 160px !important;
}
.widthPx-200 {
    width: 200px !important;
}
.widthPx-250 {
    width: 250px !important;
}
.widthPx-300 {
    width: 300px !important;
}
.widthPx-350 {
    width: 350px !important;
}

.minWidthPx-150{
    min-width: 150px !important;
}

.minWidthPx-200{
    min-width: 200px !important;
}
.minWidthPx-250{
    min-width: 250px !important;
}

.maxWidthPx-240px {
    max-width: 240px;
}

@media (min-width: 1200px) {
    .maxWidthPx-xl-180px {
        max-width: 180px;
    }

    .maxWidthPx-xl-275px {
        max-width: 275px;
    }
}
/********* HEIGHTS ****************/
.heightPx-60 {
    height: 60px !important;
}

.heightPx-80 {
    height: 80px !important;
}

.heightPx-150 {
    height: 150px !important;
}

/********* Colours ***********/
.bg-gray-transparent {
    background-color: #9999;
}
.bg-none {
    background: none !important;
}
.bg-inherit{
    background-color: inherit !important;
}
a.bg-white:hover {
    background-color: #eeeeee;
}
.bg-default {
    background-color: #dde0e2;
}
a.bg-default:hover {
    background-color: #b3b5b6;
}
.bg-default-important {
    background-color: #dde0e2 !important;
}
.white-important {
    color: #ffffff !important;
}
/*********** EIR ****************/
/* Needs to be higher than modal z-index */
.bootstrap-timepicker-widget{
    z-index: 1057 !important;
}
.z-5 {
    z-index: 5 !important;
}
.calendarBox{
    position: relative;
    padding: 6px 12px 8px 12px;
    margin-left: -1px;
    top: 7px;
    color: #555555;
    text-align: center;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
}
.bigger-125 {
    font-size: 122% !important;
}

#cboxContent{
    border: 4px solid #000 !important;
    padding: 0px !important;
}
#cboxCurrent{
    bottom: 0px !important;
}
#cboxClose{
    top: 5px;
}

/*
CSS for index/login page
*/
.logoContainer{
    background: var(--theme-logo-login) 50% no-repeat;
    background-size: contain;
}

select:disabled, textarea:disabled {
    color: #848484 !important;
    background-color: #eeeeee !important;
}

.border-top{
    border-top: 1px solid black !important;
}
.border-top-2{
    border-top: 2px solid black !important;
}
.border-right{
    border-right: 1px solid black !important;
}
.border-bottom{
    border-bottom: 1px solid black !important;
}
.border-left{
    border-left: 1px solid black !important;
}
.border-left-2{
    border-left: 2px solid black !important;
}
.border-all{
    border: 1px solid #333 !important;
}
.border-white{
    border-color: #ffffff !important;
}
.border-gray {
    border-color: #aaa !important;
}
.border-light-gray {
    border-color: #C5D0DC !important;
}
.border-red{
    border-color: #ff0000 !important;
}
.border-primary{
    border-color: var(--color-primary) !important;
}
.border-secondary{
    border-color: var(--color-secondary) !important;
}
.border-all-2{
    border: 2px solid #333 !important;
}
.border-only{
    border: 1px solid !important;
}
.border-only-2{
    border: 2px solid !important;
}
.border-top-none{
    border-top: none !important;
}
.border-bottom-none{
    border-bottom: none !important;
}
.border-none{
    border: none !important;
}

.border-dotted {
    border-style: dotted !important;
}
.rounded {
    border-radius: .25rem !important;
}

.fnUploaderWrapper{
    min-height: 80px !important;
}
/*
FnUploader Sample Images CSS: End
*/
#auctionCompleteForm div.infobox.infobox-small{
    height: auto;
}

.privateFileIcon{
    position: absolute !important;
    top: 0px;
    right: 0px;
    text-align: center;
    color: #FFF;
}

.privateFileIcon:empty {
    display: none;
}

.privateFileIcon.hasMainImageCheckbox{
    top: 26px;
}

.galleryItemPrivateFileIcon{
    position: absolute !important;
    top: 4px;
    right: 4px;
    text-align: center;
    color: #FFF;
}

/**
CSS to pre wrap label
*/
.labelPreWrap{
    white-space: pre-wrap;
    height: auto;
}
.labelPreWrap::after{
    height: 100%;
}

.select2-drop li {
  white-space: pre-line;
}
.width50px{
    width: 50px !important;
}

.width60px{
    width: 60px !important;
}

.width70px{
    width: 70px !important;
}

.width80px{
    width: 80px !important;
}

.width90px{
    width: 90px !important;
}

.width100px{
    width: 100px !important;
}

.width110px{
    width: 110px !important;
}

.width120px{
    width: 120px !important;
}

.width130px{
    width: 130px !important;
}

.width140px{
    width: 140px !important;
}

.width150px{
    width: 150px !important;
}

.width180px{
    width: 180px !important;
}

.width200px{
    width: 200px !important;
}

.width250px{
    width: 250px !important;
}

input[type=checkbox].ace.ace-switch + .lbl {
    margin: 0px;
}

#newFnolAuxCaseModal.modal .modal-dialog {
    --bs-modal-max-width: 80%;
}

/**
 * Styles for scrollable tables
 * - make sure the `tbody` is scrollable
 * - make sure the columns in the `thead` line up with columns in the `tbody`
 */
.table-scrollable > thead,
.table-scrollable > tbody {
    /* Allow for vertical scrollbar */
    display: block;
    overflow-y: auto;
    /* Leave space for scrollbar, even if it doesn't show */
    scrollbar-gutter: stable;
}

.table-scrollable > tbody {
    max-height: 180px;
}

.table-scrollable > thead > tr,
.table-scrollable > tbody > tr {
    /* Make sure the head and body are the same width */
    width: 100%;
    /* Make sure the columns are the same width between the head and foot */
    display: table;
    table-layout: fixed;
}

#faExistVehicleTable thead,
#faExistVehicleTable thead th {
    background-color: #666;
    color: #fff;
}

#faExistVehicleTable td{
    word-wrap: break-word;
}

.nav-pills {
    --bs-nav-pills-border-radius: 0;
    --bs-nav-pills-link-active-bg: var(--color-primary);
}

.table {
    --bs-table-striped-bg: #f1f1f1;
}

.even,
.even > td {
    background-color: var(--bs-table-striped-bg);
}

td .label {
    height: auto;
}

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

.termsConditionsCheckBox {
    transform: scale(1.3);
}

/**
    Fix navbar position issue in small screen
 */
@media only screen and (max-width: 479px){
    .navbar:not(.navbar-collapse) .navbar-header.pull-left {
        float: left !important;
    }

    .navbar:not(.navbar-collapse) .navbar-header.navbar-buttons.pull-right {
        float: right !important;
    }
}

@media only screen and (max-width: 991px){
    .sidebar.responsive {
        z-index: 1029 !important;
    }
}

/**
    CSS for weather details
**/

/* The time rows will have a larger font size */
.weatherDatatable tbody > tr > td:first-child, .weatherDatatable thead > tr > th:first-child{
    font-size: 1.25rem;
}

.weatherMainRow > .weatherRow .weatherDatatableRow > .dataTables_wrapper >.row {
    background-color: unset;
    border: none;
}

.weatherMainRow > .weatherRow .weatherDatatableRow .weatherDatatable > thead > tr > th, .weatherDatatable tbody td {
    border: none;
    height: 15%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.text-bg-fourth {
    color: #fff !important;
    background-color: #145c7c !important;
}

/**
    CSS for vehicle impact image
**/
.vehicleImpactAreaAspectRatioContainer {
    width: 100%;
    padding-top: 40%;
    position: relative;
}

.vehicleImpactAreaWrapper {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.vehicleImpactAreaWrapper.vehicleImpactContainerChangeable {
    cursor: pointer;
}

.vehicleImpactAreaWrapper .vehicleImpactContainer {
    height: 33.33%;
}

.vehicleImpactAreaWrapper .vehicleImpactContainer .vehicleImpactImageB {
    background-image: url('/img/vehicleImpactPoints/inactive/vehicleImpactImageB.jpg');
}

.vehicleImpactAreaWrapper .vehicleImpactContainer .vehicleImpactImageC {
    background-image: url('/img/vehicleImpactPoints/inactive/vehicleImpactImageC.jpg');
}

.vehicleImpactAreaWrapper .vehicleImpactContainer .vehicleImpactImageD {
    background-image: url('/img/vehicleImpactPoints/inactive/vehicleImpactImageD.jpg');
}

.vehicleImpactAreaWrapper .vehicleImpactContainer .vehicleImpactImageA {
    background-image: url('/img/vehicleImpactPoints/inactive/vehicleImpactImageA.jpg');
}

.vehicleImpactAreaWrapper .vehicleImpactContainer .vehicleImpactImageI {
    background-image: url('/img/vehicleImpactPoints/inactive/vehicleImpactImageI.jpg');
}

.vehicleImpactAreaWrapper .vehicleImpactContainer .vehicleImpactImageE {
    background-image: url('/img/vehicleImpactPoints/inactive/vehicleImpactImageE.jpg');
}

.vehicleImpactAreaWrapper .vehicleImpactContainer .vehicleImpactImageF {
    background-image: url('/img/vehicleImpactPoints/inactive/vehicleImpactImageF.jpg');
}

.vehicleImpactAreaWrapper .vehicleImpactContainer .vehicleImpactImageG {
    background-image: url('/img/vehicleImpactPoints/inactive/vehicleImpactImageG.jpg');
}

.vehicleImpactAreaWrapper .vehicleImpactContainer .vehicleImpactImageH {
    background-image: url('/img/vehicleImpactPoints/inactive/vehicleImpactImageH.jpg');
}

.vehicleImpactAreaWrapper .vehicleImpactContainer .vehicleImpactImage {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-transition:all .2s ease-out;
    -moz-transition:all .2s ease-out;
    -o-transition:all .2s ease-out;
    -ms-transition:all .2s ease-out;
    transition:all .2s ease-out;
}

/**
* Adjust select2 CSS to match multiselect
*/
.select2DropAdjust{
    border: 1px solid #8fbcd9;
    border-width: 0 1px 3px;
}

.caseSummarySpan{
    font-size: 130%;
    font-weight: bolder;
}

/**
* Multiselect CSS
*/
.multiselect-container .multiselect-group{
    background-color: #333333;
    color: #ffffff;
}

/* Highlight dropdown item when checkbox is focused */
.multiselect-container .dropdown-item:has(:focus) {
    background-color: var(--color-primary);
    color: #fff;
}

.multiselect-clear-filter:focus:not(focus-visible) {
    outline: 1px solid var(--mtx-input-focus-border-color);
}

.multiselect-container>li {
    width: 100%;
}

/**
* Auction case pav example
*/
.acpeTableColumn{
    width: 20%;
    word-break: break-all;
}

/**
CSS for box shadow
*/
.boxShadow-0-2px-4px{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.boxShadow-0-5px-10px{
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}

/**
White-space helpers
*/
.whiteSpacePreLine{
    white-space: pre-line;
}

/**
CSS for transitions e.g. fade out effect
*/
.transitionFadeOut{
    transition: all 1s ease-out;
}

/**
    BEGIN: CSS for custom checkbox
*/

input[type=checkbox].ace.aceCheckboxCustom + .lbl::before,
input[type=radio].ace.aceCheckboxCustom + .lbl::before{
    color: #ABBAC3;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

/**
    Checkbox hover border colour
*/
input[type=checkbox].ace.aceCheckboxCustom + .lbl:hover::before,
input[type=radio].ace.aceCheckboxCustom + .lbl:hover::before {
    border-color: #434347;
}

/**
    Checkbox sizes
*/
input[type=checkbox].ace.aceCheckboxCustom + .lbl.aceCheckboxLabel20px::before,
input[type=radio].ace.aceCheckboxCustom + .lbl.aceCheckboxLabel20px::before {
    font-size: 20px !important;
    height: 22px !important;
    min-width: 22px !important;
    line-height: 20px !important;
}

input[type=checkbox].ace.aceCheckboxCustom + .lbl.aceCheckboxLabel30px::before,
input[type=radio].ace.aceCheckboxCustom + .lbl.aceCheckboxLabel30px::before {
    font-size: 30px !important;
    height: 32px !important;
    min-width: 32px !important;
    line-height: 30px !important;
}

input[type=checkbox].ace.aceCheckboxCustom + .lbl.aceCheckboxLabel40px::before,
input[type=radio].ace.aceCheckboxCustom + .lbl.aceCheckboxLabel40px::before {
    font-size: 40px !important;
    height: 42px !important;
    min-width: 42px !important;
    line-height: 40px !important;
}

input[type=checkbox].ace.aceCheckboxCustom + .lbl.aceCheckboxLabel50px::before,
input[type=radio].ace.aceCheckboxCustom + .lbl.aceCheckboxLabel50px::before {
    font-size: 50px !important;
    height: 52px !important;
    min-width: 52px !important;
    line-height: 50px !important;
}

/**
    Checkbox active colour
*/
input[type=checkbox].ace.aceCheckboxCustom:checked + .lbl.aceCheckboxLabelPrimary::before,
input[type=radio].ace.aceCheckboxCustom:checked + .lbl.aceCheckboxLabelPrimary::before {
    background-color: #434347;
    border-color: #434347;
    color: #FFF;
}
/**
    END: CSS for custom checkbox
*/

/**
    CSS for word break
*/
.wordBreakAll{
    -ms-word-break: break-all;
     word-break: break-all;
}
.wordBreakWord{
    -ms-word-break: break-word;
     word-break: break-word;
}

.textUppercase {
    text-transform: uppercase;
}
.textUppercase::-webkit-input-placeholder { /* WebKit browsers */
    text-transform: none;
}
.textUppercase:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    text-transform: none;
}
.textUppercase::-moz-placeholder { /* Mozilla Firefox 19+ */
    text-transform: none;
}
.textUppercase:-ms-input-placeholder { /* Internet Explorer 10+ */
    text-transform: none;
}
.textUppercase::placeholder { /* Recent browsers */
    text-transform: none;
}

/**
 * Bootstrap changed how blockquotes are emphasised from using a border (ruler) to using a larger font size.
 * Use this class if you need to use the older form of emphasis.
 */
.blockquote-ruled {
    font-size: 1rem;
    border-inline-start: 4px solid var(--bs-border-color);
    padding-top: .75rem;
    padding-inline-start: 1rem;
    padding-bottom: .75rem;
}

/** Unordered List **/
.ulItemSuccess, .ulItemDanger{
    list-style: none;
}
.ulItemSuccess li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: green; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.ulItemDanger li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: red; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.btnBulkSelects, .btnBulkConfirm {
    margin-top: -10px;
}

/**
    CSS copied from casecreatecss.css
*/
.regAndChassis {
    min-width: 216px;
    text-transform: uppercase;
}
.regAndChassis::-webkit-input-placeholder {
   text-transform: none;
}

.regAndChassis:-moz-placeholder { /* Firefox 18- */
   text-transform: none;
}

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

.regAndChassis:-ms-input-placeholder {
   text-transform: none;
}

.label.label-white.label-success {
    color: #7b9e6c !important;
    border-color: #9fbf92 !important;
    background-color: #edf3ea !important;
}

.label-success-darker {
    /* Same BG Colour as .progress-bar-success */
    background-color: #59A84B !important;
}

.label-warning-lighter {
    /* Same BG Colour as .progress-bar-warning */
    background-color: #FFBC30 !important;
}

.label-danger-lighter {
    /* Same BG Colour as .progress-bar-danger */
    background-color: #CA5952 !important;
}

.label.label-white {
    color: #879da9;
    border: 1px solid #ABBAC3;
    border-right-width: 1px;
    border-left-width: 6px;
}

/* START: Auction Activity Styles */
.label.label-view {
    background-color: #434347 !important;
}

.label.label-bid {
    background-color: #5aa85adb !important;
}
/* END: Auction Activity Styles */

/* ----------------------------------------------
 * Generated by Animista
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
.slide-in-bottom {
    animation: slide-in-bottom 1.4s cubic-bezier(0.445, 0.050, 0.550, 0.950) both;
}

.slide-out-top {
    animation: slide-out-top 1s cubic-bezier(0.445, 0.050, 0.550, 0.950) both;
}

.spin-3s {
    animation: spin 3s linear infinite;
}
/**
 * ----------------------------------------
 * Animation Keyframes
 * ----------------------------------------
 */
@keyframes slide-in-bottom {
    0% {
        transform: translateY(32px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 100%;
    }
}

@keyframes slide-out-top {
    0% {
        transform: translateY(0);
        opacity: 100%;
    }
    100% {
        transform: translateY(-32px);
        opacity: 0;
    }
}

/**
 * ----------------------------------------
 * Gallery Styles
 * ----------------------------------------
 */
.ace-thumbnails > li {
    border: 2px solid #ffffff;
    margin: 5px 2px;
    padding: 2px;
}

.galleryHover {
    width: 100px;
    height: 100px;
}

.galleryHoverFileFade {
    position: absolute;
    opacity: 0.2;
    width: 100px;
    height: 100px;
    background-color: black;
    z-index: 2;
}

.galleryHoverCheckbox {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 3;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}




/**
 * ----------------------------------------
 * lightGallery customisation
 * ----------------------------------------
 */
/* Modals that can be invoked from within a lightGallery that should appear on top of it. */
.modal-lightGallery,
.lg-on .bootbox.modal {
    z-index: 1100;
}

 /** light gallery backdrop opacity */
 .lg-outer{
    z-index: 1050 !important;
}
.lg-outer .lg-video .lg-object {
    top: 50px !important;
    margin: 0 0 100px 0 !important;
}

.lg-outer .lg-video .lg-object.iefix {
    top: -175px !important;
}
@media only screen and (max-width: 767px) {
    .lg-outer .lg-video {
        padding-top: 100% !important;
        padding-bottom: 100% !important;
    }
}
.lg-backdrop.in {
    opacity: 0.87 !important;
}
#lg-counter{
    color: #fff !important;
}
.lg-toolbar .lg-icon{
    color: #fff !important;
}

/*
    Fix video tag controls disappear in mobile/tablets
*/
@media only screen and (min-width: 600px) and (max-width: 767px) {
    .lg-outer .lg .lg-inner .lg-item .lg-video-cont .lg-video video.lg-video-object{
        height: 35% !important;
        top: 5% !important;
    }
}

@media only screen and (min-width: 471px) and (max-width: 599px) {
    .lg-outer .lg .lg-inner .lg-item .lg-video-cont .lg-video video.lg-video-object{
        height: 35% !important;
        top: 20% !important;
    }
}

@media only screen and (min-width: 426px) and (max-width: 470px) {
    .lg-outer .lg .lg-inner .lg-item .lg-video-cont .lg-video video.lg-video-object{
        height: 35% !important;
        top: 25% !important;
    }
}

@media only screen and (max-width: 425px) {
    .lg-outer .lg .lg-inner .lg-item .lg-video-cont .lg-video video.lg-video-object{
        height: 35% !important;
        top: 30% !important;
    }
}

/*
    Fix iFrame overflow
*/
.lg-outer .lg .lg-inner .lg-item .lg-has-iframe .lg-video {
    overflow: unset;
}

.lg-with-aside .lg-sub-html,
.lgSidePanel {
    background: #fff;
    color: #222;
    font-size: 13px;
    overflow-y: auto;
    padding: 16px;
    position: fixed;
    text-align: left;
    z-index: 1051; /* go on top of .lg-outer */
}

@media only screen and (min-width: 1001px) {
    /* lightGalleries with this class will have a panel on the right-hand-side. */
    .lg-with-aside {
        padding-right: 400px;
    }

    .lg-with-aside .lg-sub-html, .lgSidePanel {
        height: 100vh;
        width: 400px;
        top: 0;
        left: calc(100% - 400px);
    }
}

@media only screen and (max-width: 1000px) {
    .lg-with-aside {
        padding-bottom: 250px;
    }

    .lg-with-aside .lg-sub-html, .lgSidePanel {
        height: 250px;
        width: 100%;
        bottom: 0;
        left: 0;
    }
}

.lg-with-aside.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html {
    bottom: 0;
}

.lg-with-aside .lg-sub-html h4,
.lgSidePanel h4 {
    font-size: 18px;
    font-weight: 400;
}

.lg-with-aside .lg-sub-html p,
.lgSidePanel p {
    font-size: inherit;
}

/*
 * Hide body scrollbars when the gallery is open.
 */
.lg-on {
    overflow: hidden;
}

/**
 * Give an element an animation as its height changes.
 *
 * This only works when changing between explicit heights.
 * e.g. `height: 0px` to `height: 500px` will have a transition animation.
 *      `height: auto` to `height: 0px` will not have a transition animation.
 */
.slide-animation {
    overflow-y: hidden;
    transition: height .4s ease-in-out;
}

/**
 * ----------------------------------------
 * Contextual action menu
 * ----------------------------------------
 */
 .contextualActionMenu {
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 6px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.contextualActionMenu .btn-close {
    --bs-btn-close-opacity: 1;
}



/**
 * ----------------------------------------
 * Grid
 * ----------------------------------------
 */
 /**
 * Make each column in the grid at least 250px-wide.
 * Columns will also stretch to fill available space.
 *
 *
 * Examples
 ** A 1000px section will fit four 250px columns exactly.
 ** A 1200px section will fit four 250px columns. Each column will stretch to 300px to fill the available space.
 ** A 1000px section with 20px gaps will fit three columns; 320px + 20px + 320px + 20px + 320px
 */
.grid-min-column-width-110px {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
}
.grid-min-column-width-200px {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}
.grid-min-column-width-250px {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
}
.grid-min-column-width-300px {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}
.grid-min-column-width-350px {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
}

/* Space between rows and columns in flex/grid layout. */
.gaps-3px {
    gap: 3px !important;
}

.gaps-10px {
    gap: 10px !important;
}

.gaps-20px {
    gap: 20px !important;
}

.justify-items-center {
    justify-items: center;
}

/* Remove outline from the info window marker button. */
.btnInfoWindow {
    outline: none !important;
}

/**
 * ----------------------------------------
 * Misc
 * ----------------------------------------
 */
/**
 * Ensure cloaked attributes are hidden before Vue renders.
 * (So user doesn't see a flash of unparsed syntax.)
 */
[v-cloak] {
    display: none !important;
}

/**
Snowflake - Christmas
**/
.snowflake {
    pointer-events: none;
}