/*
Font Styling and Icon styling
--------------------------------------------------
*/
:root {
    --font: 'Inter', sans-serif;
    --font-color: #252525;
    --root-font-size: 16px;
    --success: #74c686;
    --danger: #dc3545;
    --danger-btn: #EB3331;
    --active-input: #A6CBF3;
    --active-border: #A6CBF3 1px solid;
    --readonly-background: #F7F9FC !important;
    --readonly-color: #808D95 !important;
    --readonly-border: 1px solid #CED4DA;
    --success-border: #28A745 1px solid;
    --error-danger-border: #DC3545 1px solid;
    --primary: #007BFF;
    --btn-light: #F8F9FA;
    --btn-light-blue: #E0EFFF;
    --dark: #343A40;
    --light-hover-e2e6ea: #E2E6EA;
    --box-shadow-standard: #D1D5DF80 0px 10px 30px;
}
body {
    background-color: #F2F8FF !important;
}
main{
background-color:#fff;
}
/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
#side-bar {
    width: 369px;
    color: #FFF;
    min-height: 100vh;
    position:sticky;
}
.main-menu {
    height: 100%;
    background: #182E38 !important;
}
.custom-padding {
    padding: 0;
}
#side-bar .user-highlight {
    width: 100%;
    border-radius: 0px 0px 0px 80px;
    height: 301px;
    padding: 56px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
    #side-bar .user-highlight.dealer-role-highlight,
    #side-bar .user-highlight.admin-role-highlight {
        background: #EB3331;
    }

    #side-bar .user-highlight.captain-role-highlight {
        background: #FBAD18;
    }

    .user-highlight i.fa-user {
        padding: 20px 21px;
        border-radius: 50%;
       
    }
        .user-highlight.dealer-role-highlight i.fa-user,
        .user-highlight.admin-role-highlight i.fa-user {
            background: #95191E;
            color: #EB3331;
        }
        .user-highlight.captain-role-highlight i.fa-user {
            background: rgb(18 35 43 / 20%);
            color: #12232B;
        }

        .user-highlight.dealer-role-highlight p.user-name,
        .user-highlight.admin-role-highlight p.user-name,
        .user-highlight.dealer-role-highlight p.user-role,
        .user-highlight.admin-role-highlight p.user-role {
            color: #FFFFFF;
        }
.user-highlight.captain-role-highlight p.user-name,
.user-highlight.captain-role-highlight p.user-role {
    color: #12232B;
}
    p.user-name {
        letter-spacing: 0px;
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
        margin-top: 17px;
        margin-bottom: 4px;
    }
        p.user-name i{
            font-size: 15px;
        }
    p.user-role {
        letter-spacing: 0px;
        font-size: 14px;
        line-height: 20px;
    }

p.menu-title {

    letter-spacing: 0.28px;
    color: #F7F9FC;
    font-size: 14px;
    font-weight: 800;
    line-height: 16px;
    text-transform: uppercase;
    margin-bottom: 31px;
    margin-left: 20px;
}

a.navbar-brand.logo {
    white-space: normal;
    text-align: center;
    word-break: break-all;
    font-weight: 900;
    font-size: 28px;
    line-height: 33px;
    text-decoration: none;
    border-bottom: 4px solid #F00000;
    font-family: 'Raleway', sans-serif;
    letter-spacing: 0.84px;
    padding-bottom: 0;
    color: #000000;
}

a.navbar-brand.menu {
    white-space: normal;
    text-align: center;
    word-break: break-all;
    font-weight: 400;
    font-size: 16px;
    line-height: 33px;
    text-decoration: none !important;
    letter-spacing: 0.84px;
    padding-bottom: 0;
    color: #ffff;

    transition: left 0.3s ease-in;
}
.navbar-toggler i{
    color:#fff;
    font-size:42px;
}
    a.navbar-brand.menu:hover{
    color:#fff;
    }

    .navbar.navbar-expand-sm.navbar-toggleable-sm.navbar-light.bg-white.border-bottom.box-shadow {
        padding-left: 2em;
        padding-right: 2em;
    }

/*navbar responsive*/
.navbar.navbar-expand-xl.navbar-toggleable-xl.navbar-light.bg-white.border-bottom.responsive-menu-design.show {
    padding-bottom: 77px;
    border-radius: 0px 0px 0px 80px !important;
    position: absolute;
    width: inherit;
    z-index: 1000;
}
/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}
.navbar-light{
    padding: 16px 30px;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
    color: #000000;
}

.navbar-toggler{
    border:none !important;
}

span.brand-title-grey {
    color: #B0B6BA;
}
.navbar-light ul.navbar-nav li .text-dark {
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: #6C757D;
}
span.name-initial {
    padding: 7px;
    border-radius: 50%;
    letter-spacing: 0.42px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-right: 5px;
}
    span.name-initial.dealer.dealer-name-highlight,
    span.name-initial.admin.admin-name-highlight {
        background: #EB3331;
        color: #FFFFFF;
    }

    span.name-initial.captain.captain-name-highlight {
        background: #FBAD18;
        color: #FFFFFF;
    }
    span.name-initial.user.user-name-highlight {
        background-color: #007BFF;
        color: #FFF;
    }
    .menu-items .dropdown-menu {
        position: initial !important;
        transform: none !important;
        background-color: transparent;
        margin-top: 0;
        padding: 0;
        width: 100%;
        background: #E0262C;
    }
    .menu-items .dropdown-menu .dropdown-item {
        color: #FFF;
        letter-spacing: 0px;
        font-size: 14px;
        font-weight: 400;
        line-height: 17px;
        transition: all .5s ease-in-out;
        position: relative;
        padding: 14px 67px;
    }
        .menu-items .dropdown-menu .dropdown-item span.underline{
            position: relative;
        }
            .menu-items .dropdown-menu .dropdown-item span.underline:after {
                background: none repeat scroll 0 0 transparent;
                bottom: 0;
                content: "";
                display: block;
                height: 1px;
                left: 0%;
                position: absolute;
                background: #fff;
                transition: width 0.3s ease 0s, left 0.3s ease 0s;
                width: 0;
            }
        .menu-items .dropdown-menu .dropdown-item span.underline:hover:after {
            width: 100%;
            left: 0;
        }
            .menu-items .dropdown-menu .dropdown-item:focus,
            .menu-items .dropdown-menu .dropdown-item:hover {
                background-color: transparent;
            }

            /* QUICK FIX FOR BUTTONS */
            button:focus:not(:focus-visible){
            outline:none;
            }
            .navbar-toggler:focus{
            box-shadow:none !important;
            }
.ml-neg-2{
margin-left:-2em;
}
.full-screen-top-nav i.fa-bell {
    position: relative;
    font-size: 25px;
    color: #7A7E83;
    margin-right: 28px;
}
   .bell-notif-count-red{
        font-size: 8px;
        background: #DC3545 0% 0% no-repeat padding-box;
        border-radius: 20px;
        color: #fff;
        padding: 4px 5px;
        line-height: 8px;
        font-family: 'Inter';
        position: absolute;
        z-index: 2;
        left: 20px;
    }
.header-notification-dropdown {
    position: relative;
}
.right-notif-flyout {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    width: 400px;
    background: #FFF;
    height: 100%;
    padding-left: 30px;
    /*border: 1px solid #E2E6EA;
    border-radius: 15px;*/
}
    /*.right-dealer-notif-flyout:before {
        content: "";
        position: absolute;
        top: -7px;
        left: 62%;
        width: 12px;
        height: 12px;
        border-top: 1px solid #E2E6EA;
        border-left: 1px solid #E2E6EA;
        background-color: #fff;
        transform: rotate( 45deg );
    }
    .right-dealer-notif-flyout p.panel-title {
        margin-top: 20px;
        margin-left: 25px;
    }*/
/*.header-notification-dropdown .right-dealer-notif,
.header-notification-dropdown .right-customer-notif,
.header-notification-dropdown .right-captain-notif {
    border: none;
    width: 100%;
    right: -10rem;
    min-width: 20rem;
    background-color: #fff;
}
    .header-notification-dropdown .right-dealer-notif:before,
    .header-notification-dropdown .right-customer-notif:before,
    .header-notification-dropdown .right-customer-captain:before {
        content: "";
        position: absolute;
        top: 2px;
        left: 34%;
        width: 12px;
        height: 12px;
        border-top: 1px solid #E2E6EA;
        border-left: 1px solid #E2E6EA;
        background-color: #fff;
        transform: rotate( 45deg );
    }
    */

    @media (max-width: 1150px) {
        .full-screen-top-nav {
        display: none;
    }

        .responsive-menu-design {
            display: flex !important;
            background-color: #182E38 !important;
            color: #E9EFF6CC !important;
            
        }
            .responsive-menu-design.show {
                border-radius: 0 0 0 80px;
            }
            .navbar-brand.menu {
                margin-left:4.6em;
            }
    .responsive-menu-design .dropdown-item.collapsed {
        background-color: #182E38 !important;
        color: #E9EFF6CC !important;
    }

            .responsive-menu-design .dropdown-item.nav-item .dropdown-item.account{
            background-color: #182E38;
            color: #E9EFF6CC;
    }
        .responsive-menu-design .dropdown-item.nav-item a {
            color: #E9EFF6CC;
        }
        .responsive-menu-design .dropdown-logout {
            color: #E9EFF6CC !important;
        }

        .responsive-menu-design .dropdown-item.nav-item .dropdown-item.show, .responsive-menu-design .dropdown-logout.show {
            background-color: #95191E;
            color: #fff !important;
        }
        .responsive-menu-design li.dropdown-item.nav-item .dropdown-item.active {
            background-color: #FFFFFF1A !important;
        }

            .responsive-menu-design li.dropdown-item.nav-item .dropdown-item.active .nav-icon{
             color: #E0262C;
            }

            .responsive-menu-design li.dropdown-item.nav-item .dropdown-item {
                padding: 20px 16px 16px 77px;
            }

        .responsive-menu-design .navbar-collapse.top-bar-responsive .dropdown-item.nav-item .collapse .dropdown-item{
            background-color: #95191E !important;
            color: #fff !important;
        }
            .responsive-menu-design .navbar-collapse.top-bar-responsive .dropdown-item.nav-item .collapse .dropdown-item.captain {
                background-color: #FBAD18 !important;
                color: #FFF !important;
            }
            .responsive-menu-design .collapse .dropdown-item .collapse .dropdown-item {
                padding: 20px 16px 16px 77px;
                color: #fff;
                font-size: 14px;
                font-weight: 400;
            }

        .responsive-menu-design .dropdown-item {
            padding:0;
            color: #fff;
            font-size: 14px;
            font-weight: 400;
        }

        .responsive-menu-design .navbar-collapse.top-bar-responsive .dropdown-item.nav-item .collapse .dropdown-item:hover, .responsive-menu-design .navbar-collapse.top-bar-responsive .dropdown-item.nav-item .collapse .dropdown-item:focus {
            background-color: #95191E;
        }

        .responsive-menu-design .navbar-collapse.top-bar-responsive .dropdown-item.nav-item .collapse .dropdown-item.active {
            background-color: #E0262C !important;
        }

        .responsive-menu-design .navbar-collapse.top-bar-responsive .dropdown-item.nav-item .collapse .dropdown-item.active {
            background-color: #E0262C !important;
        }
            .responsive-menu-design .navbar-collapse.top-bar-responsive .dropdown-item.nav-item .collapse .dropdown-item.active.captain {
                background-color: #FFD200 !important;
            }

            .responsive-menu-design .navbar-collapse.top-bar-responsive .dropdown-item.nav-item .collapse .dropdown-item:hover {
                background-color: #95191E;
            }

        a.dropdown-item.title i.admin,
        a.dropdown-item.title i.dealer,
        a.dropdown-item.active i.non-dropdown.admin,
        a.dropdown-item.active i.non-dropdown.dealer,
        a.dropdown-item.identity-active i.non-dropdown.dealer,
        a.dropdown-item.identity-active i.non-dropdown.admin,
        .responsive-menu-design .dropdown-item.nav-item.active,
        .dropdown-item.account span.fa-stack.small,
        li.identity-active .dropdown-item.account.dealer i,
        li.identity-active .dropdown-item.account.admin i {
            color: #fff !important;
        }

        a.dropdown-item.title.collapsed i.admin, 
        a.dropdown-item.title.collapsed i.dealer, 
        a.dropdown-item i.non-dropdown.admin, 
        a.dropdown-item i.non-dropdown.dealer, 
        .responsive-menu-design .dropdown-item.nav-item 
        .dropdown-item.account span.fa-stack.small {
            color: #E0262C !important;
        }

    .nav-item
    .responsive-menu-design .nav-item i.fa-angle-down,
    .responsive-menu-design .nav-item i.fa-angle-up {
        color: #E9EFF6CC;
        font-size: 12px;
        float: right;
    }

        .responsive-menu-design .top-bar-responsive.collapse.show li.dropdown-item.nav-item a.dropdown-item.title, .responsive-menu-design .top-bar-responsive.collapsing li.dropdown-item.nav-item a.dropdown-item.title {
            background-color: #E0262C !important;
            color: #fff !important;
        }
        .responsive-menu-design .top-bar-responsive.collapse.show li.dropdown-item.nav-item a.dropdown-item.title.captain {
            background-color: #FFD200 !important;
            color: #FFF !important;
        }

        .responsive-menu-design .top-bar-responsive.collapse.show li.dropdown-item.nav-item a.dropdown-item.title.collapsed {
            background-color: #182E38 !important;
            color: #E9EFF6CC !important;
            width: 100%
        }

        .responsive-menu-design .nav-item .dropdown-item.collapsed i.fa-angle-up {
            /*display: none !important;*/
            color: #182E38;
        }
            
            .responsive-menu-design .nav-item .dropdown-item.collapsed i.fa-angle-down {
                display: inline-block !important;
                color: #fff;
                float: right;
                font-weight: 400;
            }

        .responsive-menu-design .nav-item .dropdown-item i.fa-angle-down {
            display: none;
            color: #E0262C;
            float: right;
        }

        .responsive-menu-design .nav-item .dropdown-item i.fa-angle-up{
            display: inline-block;
            color: #fff;
            margin-left: -1em;
        }
        .responsive-menu-design .nav-item .dropdown-item.captain i.nav-icon.captain {
            /*color: #FFF !important;*/
        }
        .responsive-menu-design .nav-item .dropdown-item.collapsed.captain i.nav-icon.captain,
        .responsive-menu-design .nav-item .dropdown-item.non-dropdown-link.captain i.nav-icon.captain {
            /*color: #FFF !important;*/
        }

            .collapsing {
                -webkit-transition: all 0.0s;
                -moz-transition: all 0.3s;
                -ms-transition: all 0.3s;
                -o-transition: all 0.3s;
                transition: all 0.3s !important;
                color: #fff !important;
                transition-property: height, visibility;
            }
    .responsive-menu-design .dropdown-item.nav-item .collapsing .dropdown-item {
        background-color: #95191E !important;
        color: #fff !important;
        padding: 20px 16px 16px 77px;
    }
    .collapsing.dropdown-item {
        background-color: #95191E !important;
        color: #fff !important;
    }
    .responsive-menu-design li.dropdown-item.nav-item .dropdown-item:hover {
        color: #fff;
        background-color: #182E38 !important;
    }

    /*NEED TO ADD CAPTAIN LATER AS YELLOW*/
    .responsive-menu-design li.dropdown-item.nav-item .dropdown-item.active.dealer,
    .responsive-menu-design .collapsing li.dropdown-item.nav-item .dropdown-item.active.dealer,
    .responsive-menu-design li.dropdown-item.nav-item.identity-active .dropdown-item.account.dealer,
    .responsive-menu-design li.dropdown-item.nav-item .dropdown-item.active.admin,
    .responsive-menu-design .collapsing li.dropdown-item.nav-item .dropdown-item.active.admin,
    .responsive-menu-design li.dropdown-item.nav-item.identity-active .dropdown-item.account.admin {
        color: #fff;
        background-color: #E0262C !important;
    }

        .responsive-menu-design li.dropdown-item.nav-item a.dropdown-item.active.captain,
        .responsive-menu-design .dropdown-item.nav-item.identity-active .dropdown-item.account.captain,
        .responsive-menu-design .dropdown-item.nav-item.identity-active .dropdown-item.account.captain i {
            color: #FFF !important;
            background-color: #FFD200 !important;
        }
    .responsive-menu-design .top-bar-responsive.collapsing li.dropdown-item.nav-item a.dropdown-item.title.collapsed.dealer {
        color: #fff;
        background-color: #182E38 !important;
    }
    .navbar{
        border-bottom: none !important;
    }
    .user-mobile-info {
        display: block !important;
        padding-left: 70px;
        padding-top: 35px;
        padding-bottom: 35px;
        width: 100%;
        background-color: #182E38;
        padding-right: 70px;
    }
    p.user-name-mobile {
        letter-spacing: 0px;
        color: #FFFFFF;
        font-size: 24px;
        line-height: 32px;
        font-weight: 700;
        margin-bottom: 18px;
        width: 100%;
        display: block;
    }
    p.user-text-mobile{
        color: #fff;
    }
    .full-screen-desktop{
        display: none !important;
    }
    .full-screen-mobile {
        background: #F2F8FF;
        height: 100vh;
        padding: 0;
        display: block;
    }
    .black-corner {
        background: #182E38;
        width: 100%;
        height: 80px;
    }
    .fullscreen-white {
        background: #FFF;
        box-shadow: 0px 5px 30px #0000000d;
        border-radius: 0px 80px 30px 30px;
        margin-bottom: 50px;
        margin-top: -80px;
    }
    .white-content-items-mobile {
        margin: 0px 36px;
    }
    .white-content-items-mobile h3 {
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
        letter-spacing: 0px;
        color: #252525;
        margin-bottom: 0;
    }
    .white-content-items-mobile ul.menu-icons {
        margin-left: 0;
        margin-bottom: 60px;
        padding-left: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: 60px;
    }

        .white-content-items-mobile ul.menu-icons li {
            list-style: none;
            width: 33%;
        }

            .white-content-items-mobile ul.menu-icons li.border-bottom-row {
                border-bottom: 1px solid #DEE4EB;
                margin-bottom: 30px;
                padding-bottom: 30px;
            }
            .white-content-items-mobile ul.menu-icons li a{
                text-decoration: none;
            }
            .white-content-items-mobile ul.menu-icons li i {
                line-height: 16px;
                color: #A6BCD0;
                display: block;
                text-align: center;
                font-size: 30px;
                letter-spacing: 0.6px;
            }
              
                .white-content-items-mobile ul.menu-icons li span {
                    display: block;
                    text-align: center;
                    margin-top: 10px;
                    letter-spacing: 0px;
                    color: #182E38;
                    font-size: 12px;
                    line-height: 16px;
                    font-weight: 600;
                }
    main {
        background-color: #F2F8FF;
    }
    .inner-dealer-container {
        padding-bottom: 44px;
        box-shadow: 0px 5px 30px #0000000d;
        border-radius: 0px 0px 36px 36px;
        height: 100%;
    }
    .footer-mobile-full-screen {
        position: absolute;
        z-index: 1;
        display: block !important;
        text-align: center;
        left: 0;
        overflow: hidden;
    }
        .right-notif-flyout{
            display: none !important;
        }
   
}
@media (min-width: 1149px) {

}

    /* Provide sufficient contrast against white background */
    a {
        color: #0366d6;
    }

    .primary {
        color: var(--primary);
    }

    .modal-title i {
        font-size: 1.2em;
    }

    .modal-footer {
        border-top: none;
    }

    .btn-primary {
        color: #fff;
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .btn-light {
        background-color: var(--btn-light);
        color: var(--dark);
    }

.btn-light-blue {
    background-color: var(--btn-light-blue);
    color: var(--primary);
}

    .btn {
        font: normal normal normal 16px/20px;
        padding: .6em 1em .6em 1em;
    }

    .btn-danger {
        background-color: var(--danger-btn);
    }

    .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
        background-color: transparent;
        border-color: none;
    }

    h1 {
        /*margin-left: .8em;*/
        font-size: 24px;
    }

    .row div h1, .row h1 {
        margin-left: -.4em;
    }

    .header-right {
        text-align: right;
        margin-top: -3.8em;
    }

    .pull-right {
        text-align: right;
    }

    label {
        font-weight: bold;
    }

input:focus{
    border: var(--active-border);
}
input:read-only{
    border: var(--readonly-border) !important;
    background-color: var(--readonly-background) !important;
    color: var(--readonly-color) !important;
}
input.display:read-only{
    border:none;
    background:none;
}
input.success{
    border: var(--success-border);
}
input.error{
    border: var(--error-danger-border) !important;
}
select.error {
    border: var(--error-danger-border) !important;
}

    .ErrorMessageBox.ui.container {
        border: 1px solid red;
        margin-top: 1em;
        margin-bottom: 1em;
        padding: .30em;
        background: #FFF;
        color: #AC3232;
        font-weight: normal;
        font-size: 1rem;
        text-align: center;
    }

.NotificationMessageBox.ui.container {
    border: 1px solid #FBAD18;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: .3em;
    background: #fffcf4;
    color: #FBAD18;
    font-weight: normal;
    font-size: 1rem;
    text-align: center;
}
.alert-danger {
    color: #E0262C !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
.text-danger {
    color: ##E0262C !important;
}

.validation-summary-errors{

}



a.dashboard-link i {
    font-weight: 300;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: var(--root-font-size) !important;
    font: var(--font);
    color: var(--font-color)
}

    .menu-items .nav-item li {
        margin-bottom: 0;
    }

    .menu-items .nav-item .nav-link {
        padding: 0;
        letter-spacing: 0px;
        color: #E9EFF6CC;
        font-size: 16px;
        line-height: 16px;
        font-weight: 400;
        border-radius: 0;
        padding: 20px 16px 16px 43px;
    }

    .nav-item .nav-link.notification, .nav-item .nav-link.add-item {
        font-size: 1.5em;
    }

    .nav-item .nav-icon {
        margin-right: 11px;
    }

    /* ******** TEXT UNDERLINES ******** */
    .underline {
        text-decoration: underline !important;
    }

    /* ******** CARROT DOWN ICON FOR IDENTITY TOP NAVBAR FULL SCREEN ******** */
    .text-dark i.fa-angle-down {
        color: #0000008C;
        font-weight: 700;
        display: contents;
    }
.text-dark::after {
    content: "\f078";
    font-family: 'Font Awesome 6 Pro';
    color: #7A7E83;
    margin-left: 5px;
    border: none;
    vertical-align: middle;
}

.text-dark i.fa-angle-down:before {
    margin-left: 5px;
}

    /* ******** SQUARE FOR FULL SCREEN IDENTITY DROP DOWN MENU ******** */
    .square {
        position: absolute;
        top: -6px;
        left: 8em;
        width: 12px;
        height: 12px;
        border-top: 1px solid rgba(0,0,0,.15);
        border-left: 1px solid rgba(0,0,0,.15);
        background-color: #fff;
        transform: rotate(45deg);
    }

    /* ******** FULL SCREEN NAV ******** */
.navigation-full {
    background-color: #fff;
    color: #12232B !important;
    font-size:14px;
}

    .navigation-full li a, .navigation-full li button {
        color: #12232B;
    }

    .navigation-full li:nth-child(2) {
        border-bottom: 1px solid #D9DFE6;
        padding-bottom: .5em;
    }
    .navigation-full li:last-child {
        padding-top: .5em;
    }
    /*Drop Down Color for Navigation Menu*/
    /*.navigation-full.admin li a i {
        color: #E0262C;
    }*/

    .navigation-full li i {
        color: #7A7E83 !important;
    }

    /*navigation side bar colors*/
.menu-items .nav-link .admin, .menu-items .nav-link .dealer {
    /*color: #EB3331*/
}

.menu-items .nav-link .captain {
    color: #12232B !important;
}

    .dropdown-logout {
    padding:0;
    }


    @media (min-width: 1150 px) {
        /*hide side bar*/
        /*hamburger menu show for responsive screen hide full screen*/
        /*change color to the dark grey blue of the side bar just for the hamburger menu*/
        

        
    }

    /* Sticky footer styles
-------------------------------------------------- */
    html {
        font-size: 14px;
    }

    @media (min-width: 768px) {
        html {
            font-size: 14px;
        }
    }

  

    .box-shadow {
        box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    }

/*    .container {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        max-width: 100% !important;
        overflow-y: auto;
    }*/

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

    body {
        /* Margin bottom by footer height */
        margin-bottom: 60px;
        font-family: var(--font);
        color: var(--font-color);
        font-weight: normal;
        min-height: -webkit-fill-available;
        overflow-x: hidden;
    }

.inner-container {
    padding-top: 44px;
    padding-left: 3em;
    padding-right: 3em;
    background: #FFFFFF 0% 0% no-repeat padding-box;
}
/*    .inner-container {
        margin-top: 44px;
        padding-left: 2em;
        padding-right: 2em;
    }*/

    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        white-space: nowrap;
        line-height: 60px; /* Vertically center the text there */
    }
.desktop-footer-icons ul.footer-icons-grey {
    margin-bottom: 30px;
    margin-left: 0;
    width: 100%;
    display: flex;
    padding-left: 0;
}
.desktop-footer-icons ul.footer-icons-grey li {
    list-style: none;
}
    /* Data tables styling
--------------------------------------------------------
*/
    .dataTables_wrapper.no-footer {
        overflow-x: auto !important;
        /*Linh add this line since the scroll of tha table show in the mobile menu*/
        z-index: 1;
        scroll-margin-bottom:1em;
    }

.dt-table-list .dataTables_wrapper .dataTables_info {
    display: none;
}

.dt-table-list .dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box;
    display: inline-block;
    min-width: 1.5em;
    padding: 8px 14px;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    color: #748A9D !important;
    border: 1px solid transparent;
    border-radius: 2px;
    font-size: 14px;
    line-height: 20px;
    margin: auto;
}
    .dt-table-list .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #E9EFF6 0% 0% no-repeat padding-box;
        border-radius: 5px;
    }
    .dt-table-list .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dt-table-list .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    .dt-table-list .dataTables_wrapper .dataTables_paginate .paginate_button.current:active,
    .dt-table-list .dataTables_wrapper .dataTables_paginate .paginate_button.current:focus,
    .dt-table-list .dataTables_wrapper .dataTables_paginate .paginate_button.current:visited {
        background: transparent;
        border: 0;
        color: #FFF !important;
        font-weight: 400;
        border-radius: 5px;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: transparent;
        border: 0;
    }

    .dataTables_paginate paging_simple_numbers {
        color: #000 !important;
    }

    table .dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc {
        position: relative;
        background-image: none !important;
    }

    .territory-location-list {
        margin-top: 2em;
        box-shadow: var(--box-shadow-standard);
        border-radius: 5px 5px 0 0;
        border: 1px solid #E2E6EA;
    }

    .list-table {
        margin-left: -.8em !important;
        margin-right: -.8em !important;
        margin-bottom: 2em;
    }

/*        .list-table .table {
            width: 100% !important;
            font-size:12px;
        }*/

        .list-table.territory-location-list .dataTables_wrapper {
            margin-left: .8em;
            margin-right: .8em;
            margin-bottom: .8em;
        }

        .list-table .table th:first-child {
            /*border-radius: 5px 0 0 0;*/
            /*border-left: 1px solid #E2E6EA;*/
        }

/*    .territory-location-list.list-table .table th:nth-child(2) {
        border-radius: 5px 0 0 0;
        border-left: 1px solid #E2E6EA;
    }*/

/*    .list-table .table th:last-child {
        border-radius: 0 5px 0 0;
        border-right: 1px solid #E2E6EA;
    }*/

    .list-table .table th {
        border-left: none;
        border-right: none;
        border-top: none;
        font-size: 12px;
        line-height: 24px;
        /*border-top: 1px solid #E2E6EA;*/
        border-bottom: 1px solid #E2E6EA !important;
        background-color: #fff;
        color: #000;
        font-weight: bold
    }

    .list-table td {
        border-bottom: 1px solid #E2E6EA;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        padding: 10px 18px !important;
    }

/*    .list-table tr td:last-child {
        border-right: 1px solid #dee2e6 !important;
    }*/

    .list-table tr td.align-right-col {
        text-align: right;
    }

   /* .list-table tr td:first-child {
        border-left: 1px solid #dee2e6 !important;
    }*/

   /* .territory-location-list.list-table tr td:nth-child(2) {
        border-left: 1px solid #dee2e6 !important;
    }*/

        .list-table tr {
            background: #fff !important;
            border-radius: 10px;
        }
        .list-table tr th:first-child {
            border-radius: 10px 0px 0px 0px;
        }

        .list-table tr th:last-child {
            border-radius: 0px 10px 0px 0px;
        }
            .list-table.territory-location-list tr th:nth-child(2){
                border-radius: 10px 0px 0px 0px;
            }
            .list-table.territory-location-list tr th:last-child {
                border-radius: 0px 10px 0px 0px;
            }
        .list-table.territory-location-list tr:last-child td:nth-child(2) {
            border-radius: 0px 0px 0px 10px;
        }
        .list-table.territory-location-list tr:last-child td:last-child {
            border-radius: 0px 0px 10px 0px;
        }
            .list-table tr:hover {
                cursor: pointer;
            }

    .dt-table-list {
        position: relative;
        margin-top: 26px;
    }

    .dataTables_filter label {
        margin-top: -3px;
        margin-bottom: 8px;
    }

        .dataTables_filter label input {
            border: 1px solid #E0E0E0 !important;
            border-radius: 5px !important;
            background-color: #fff !important;
            margin-top: .2em;
        }

            .dataTables_filter label input::-webkit-input-placeholder {
                margin-left: 2em;
            }

    .dataTables_filter input:focus-visible {
        outline: #A6CBF3 auto 1px;
    }

    .dt-table-list .dataTables_filter {
        background-color: #fff !important;
        display: none !important;
    }

    .list-table table {
        /*border: none;*/
        border-bottom: none !important;
        border-radius: 10px;
        width:99.5%!important;
    }
        .list-table table.terr-man {
            border-top: 1px solid #E2E6EA !important;
            border-left: 1px solid #E2E6EA !important;
            border-right: 1px solid #E2E6EA !important;
        }
            
            .list-table table.terr-man thead tr th, .list-table table.terr-man tbody tr td {
                line-height: 20px;
                padding: 20px !important;
                border-left:none;
                border-right:none;
            }

.dt-table-list .table-bordered {
    border-radius: 5px 5px 0px 0px;
    border-top: 1px solid #E2E6EA !important;
    border-left: 1px solid #E2E6EA !important;
    border-right: 1px solid #E2E6EA !important;
    margin-bottom: 10px;
}

/*    .dt-table-list thead,
    .dt-table-list .table th {

        border-radius: 5px 5px 0px 0px;
    }*/


    .dt-table-list table.dataTable thead .sorting {
        background-image: none;
    }

    .dt-table-list table.dataTable thead th {
        position: relative;
        border-top:none!important;
    }

        .dt-table-list table.dataTable thead th:after,
        .dt-table-list table.dataTable thead .sorting_desc:after {
            content: "\f0dc";
            font-family: "Font Awesome 6 Pro";
            position: absolute;
            margin-left: 4px;
            color: #B0B6BA;
            border: 1px solid #00000000;
        }

        .dt-table-list table.dataTable thead th.edit-column:after {
            content: "";
        }

    .dataTables_info,
    .list-table .dataTables_length {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        color: #676668;
    }

        .list-table .dataTables_length select {
            border: #E2E6EA solid 1px;
            border-radius: 4px;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 5px;
            background-color: #fff;
            color: #676668;
        }

.dt-table-list table.dataTable tbody tr,
.dt-table-list table.dataTable thead tr {
    background-color: #FFF;
    border-radius: 5px 5px 0px 0px;
    border-bottom: 1px solid #E2E6EA;
}

.dt-table-list table.dataTable thead th {
    padding: 19px 16px;
    font-size: 12px;
    line-height: 20px;
    color: #252525;
    border-top: 1px solid #E2E6EA;
    border-bottom: none;
}
.dt-table-list table.dataTable tbody td {
    padding: 20px !important;
    font-size: 12px;
    line-height: 20px;
    color: #252525;
    border-bottom: 1px solid #E2E6EA;
    white-space: nowrap;
}

    .dt-table-list .table-hover tbody tr:hover {
        background-color: #FFF;
        color: #252525;
    }

    .dt-table-list table.dataTable thead th,
    .dt-table-list table.dataTable tfoot th {
        font-weight: bold;
        font-size: 12px;
        color: #12232B;
        line-height: 15px;
        white-space: nowrap;
    }

    

    .dt-table-list .table-bordered td, .table-bordered th {
        border: none;
    }

    .dt-table-list .table td,
    .dt-table-list .table th {
        padding: .75rem;
        vertical-align: middle;
    }

    .dt-table-list table.dataTable.no-footer {
        border-bottom: 1px solid #E2E6EA;
    }

.dt-table-list .dataTables_length {
    color: #182E38 !important;
    font-size: 14px;
    line-height: 20px;
    position: relative;
    margin-bottom: 15px;
}
.dt-table-list .dataTables_length label{
   font-weight: 400;
}

        /*.dt-table-list .dataTables_length:after {
            content: '\f107';
            color: #6C757D;
            right: 55px;
            top: 13px;
            border-bottom: none;
            position: absolute;
            pointer-events: none;
            display: flex;
            justify-content: center;
            align-items: center;

            font-size: 20px;
            font-weight: 300;
        }*/

    .dt-table-list .dataTables_wrapper .dataTables_length select {
        border: 1px solid #E2E6EA;
        border-radius: 4px;
        background-color: transparent;
        padding: 11px;
        color: #6C757D;
        line-height: 20px;
        /*-webkit-appearance: none;
        -moz-appearance: none;*/
    }

    .dt-table-list .top-table-controls {
        position: absolute;
        right: 0;
        margin-bottom: 15px;
        z-index: 2;
    }

    .dt-table-list .search-input {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 1px solid #CED4DA;
        border-radius: 4px;
        padding: 11px 14px;

        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        outline: none;
    }

        .dt-table-list .search-input::placeholder {
            color: #b0b6ba;
        }

    .dt-table-list .edit-icon i,
    .edit-icon i {
        color: #7A7E83;
        font-size: 12px;
        line-height: 20px;
        letter-spacing: -.12px;
    }

table tr td i span {
    font-family: var(--font) !important;
    color: var(--font-color);
    font-size: var(--font);
    font-weight: normal;
}

.margin-table-add {
    margin-left: 0em !important;
    margin-right: 0em !important;
}

.list-table a.paginate_button.current {
    background: #007BFF !important;
    border-radius: 5px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
color:#fff !important;
}
tr.rqBackground {
    background: rgb(255 212 222 / 20%) !important;
}

    .margin-table-add{
    margin-left:0em !important;
    margin-right:0em !important;
    }
.export-icon{
    text-align: right;
}
a.export-btn {
    background: #F7F9FC 0% 0% no-repeat padding-box;
    border: 1px solid #E9EFF6;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 12px;
    letter-spacing: 0px;
    color: #7A7E83;
    line-height: 15px;
    text-decoration: none;
    text-align: center;
}
    a.export-btn i {
        margin-left: 5px;
        display: inline-block;
        vertical-align: middle;
    }

    /* HEADER STYLING
----------------------------------------------------------
*/
h1 {
    font-weight: 700;
    font-size: 30px;
    color: #12232B;
    line-height: 36px;
}

    h2 {
        font-size: 18px;
        letter-spacing: 0px;
        line-height: 24px;
        color: #252525;
        font-weight: 700;
        margin-bottom: 0;
    }
h1.inner-container-header {
    font-weight: 700;
    font-size: clamp(20px,2vw,30px);
    color: #12232B;
    line-height: 36px;
}
.title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    .title-row a.btn {
        padding: 11px 31px;
        border-radius: 4px;
        font-size: 16px;
        line-height: 21px;
    }

a.red-link {
    color: #E0262C !important;
    font-size: 13px;
    line-height: 17px;
    font-weight: 600;
    cursor: pointer;
}
a.red-link-light-weight{
    font-weight: 400;
}
a.red-link-no-underline{
    text-decoration: none;
}
.text-left {
    text-align: left;
}



/* FORM STYLING
----------------------------------------------------------
*/
.form-container {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    /*border: 1px solid #E2E6EA;
    border-radius: 4px;*/
    /* padding: 33px 0px 10px 0;*/
    margin-top: 26px;
}
     .form-container .form-group h2 {
            margin-top: 55px;
     }
.form-container .form-group {
    margin-bottom: 30px;
}
.form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}
.form-style label {
    font-size: 13px;
    font-weight: 700;
    color: #182E38;
    line-height: 16px;
    /*display: flex;
    justify-content: flex-start;
    align-items: center;*/
    margin-bottom: 5px;
}
.form-style .radio-label {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    vertical-align: middle;
    margin-right: 55px;
}
.form-label {
    font-size: 13px;
    font-weight: 700;
    color: #182E38;
    line-height: 16px;
    margin-bottom: 5px;
}
.form-label-flex {
    font-size: 13px;
    font-weight: 700;
    color: #182E38;
    line-height: 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5px;
}
.form-control::placeholder {
    color:#B0B6BA!important;
}
.cancel-link,
a.cancel-link,
a.edit-link,
a.cancel-edit-link {
    text-decoration: underline;
    letter-spacing: 0px;
    color: #808D95;
    font-size: 13px;
    line-height: 16px;
    margin-left: 34px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    background-color: transparent;
    border: none;
}


.checkbox-group,
.checkbox-item {
    display: flex;
    align-items: center;
}
    .checkbox-item{
        margin-right: 31px;
    }
        .checkbox-item label{
            margin-bottom: 0;
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
        }
        .checkbox-item input {
            width: 18px;
            height: 17px;
            margin-right: 7px;
        }


#export-report-form{
    text-align: right;
    margin-bottom: 50px;
}
.report-filter {
    position: absolute;
    right: 0;
    top: -35px;
    z-index: 2;
}
    #export-report-form .btn-export-mobile{
        width: 20%;
    }
    .header-form {
        justify-content: space-between;
        flex-wrap: wrap;
    }
#transaction-table tbody td,
#transaction-table thead th,
#fuel-report tbody td,
#fuel-report thead th {
    white-space: nowrap;
}
.transaction-report td.light-grey-text-report {
    color: #7A7E83 !important;
}
.transaction-report td.blue-text-report {
    color: #007BFF !important;
    font-weight: 700 !important;
}

.header-form-items a.btn {
    width: 20%;
    padding: 14px 0;
}
.header-form-items .date {
    margin: 0 11px;
    width: 40%;
}
.form-style input[type=radio] {
    height: 10px;
    width: 10px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #DEE4EB !important;
    color: #FFFFFF;
    -webkit-appearance: none;
    position: relative;
    border-radius: 50%;
    padding: 10px;
    background: #FFFFFF !important;
}

    .form-style input[type=radio]:checked::before {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        font-weight: 500;
        position: absolute;
        -webkit-appearance: radio;
        top: 0;
        content: "";
        left: 0;
        background: #FFFFFF;
        border: 5px solid #007BFF;
    }
    .form-style .radio-input-check:checked::before {
        border: 6px solid #007BFF !important;
    }
.inner-dealer-container .form-style input[type=radio].disabled {
    border: 1px solid #B0B6BA;
}
    .inner-dealer-container .form-style input[type=radio].disabled:checked:before {
        border: 6px solid #B0B6BA !important;
    }
.form-style i.label-icon {
    margin-bottom: 0;
    margin-left: 5px;
    color: #7A7E83;
}

.float-container{
    position: relative;
}
    .float-container .label-floating-inside {
        position: absolute;
        right: 25px;
        padding: 14px 0;
        line-height: 24px;
        font-size: 12px;
        margin-bottom: 0;
    }
    .float-container input,
    .float-container select {
        font-size: 14px;
        line-height: 22px;
        color: #182E38;
    }

.from-group-btn{
    margin-top: 50px;
}

.manage-payment-mobile {
    display:none !important;
}
@media only screen and (max-width: 1151px) {
    .list-group.manage-billing {
        margin-left:auto;
    }
    .user-mobile-error{
        margin-left:auto;
        margin-right:auto;
    }
    .manage-payment-desktop {
        display:none;
    }

    .manage-payment-mobile {
        display: inline !important;
    }
    .delete-payment-card {
        text-align:center
    }
}
@media only screen and (max-width: 925px) {
    .list-group.manage-billing {
        width: 70% !important;
        
    }
}
@media only screen and (max-width: 635px) {
    .list-group.manage-billing{
        width:100% !important;
        margin-left: 0;
        margin-right:0;
    }
}
/*
COLORS
----------------------------------------------------------
*/
.success {
    color: var(--success);
}

    .danger {
        color: var(--danger);
    }

    /*
ICON STYLING
----------------------------------------------------------
*/
    .fa-solid.fa-pen-to-square {
        font-size: var(--root-font-size);
        color: #7a7e83;
        opacity: 1;
        letter-spacing: -0.12px;
        text-align: right;
        font-weight: 300;
    }

    /*
FORM LAYOUT
---------------------------------------------------------
*/
    .container-form {
        border: 1px solid var(--light-hover-e2e6ea);
        margin-top: 30px;
        padding: 18px;
        border-radius: 4px;
        background-color: #fff;
    }

    .container-block {
        border: 1px solid var(--light-hover-e2e6ea);
        padding: 18px;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: var(--box-shadow-standard);
    }



.form-style input,
input.form-control{
    color: #343A40;
    background-clip: padding-box;
    border-radius: 5px;
    line-height: 24px;
    font-size: 16px;
    border: 1px solid #E9EFF6;
    padding: 14px 12px;
    height: 52px;
}
.display-box {
    color: #343A40;
    background-clip: padding-box;
    border-radius: 5px;
    line-height: 24px;
    font-size: 16px;
    border: 1px solid #E9EFF6;
    padding: 14px 12px;
    height: auto;
}
.form-style textarea {
    color: #343A40;
    background-clip: padding-box;
    border-radius: 5px;
    line-height: 24px;
    font-size: 16px;
    border: 1px solid #E9EFF6;
    padding: 14px 12px;
}
.form-style select {
    background-clip: padding-box;
    border-radius: 5px;
    line-height: 24px;
    font-size: 16px;
    border: 1px solid #E9EFF6;
    padding: 14px 12px;
    height: 52px;
    color: #B0B6BA;
    /*-webkit-appearance: none;
    -moz-appearance: none;*/

}
.form-style input[type="checkbox"] {
    height: 17px;
    width: 18px;
    background-color: #FFF !important;
    border: 1px solid #DEE4EB !important;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}
.form-style input::placeholder,
.form-style textarea::placeholder {
    color: #B0B6BA;
    font-weight: 400;
}

    .form-style select option {
        color: #343A40;
    }
.select-container {
    position: relative;
}

 /*.select-container:after {
    content: '\f107';
    color: #182E38;
    right: 10px;
    bottom: 15%;
    border-bottom: none;
    position: absolute;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 300;
}*/
.form-style .input-group-text {
    padding: 14px 16px;
    background: #F7F9FC;
    border: 1px solid #E9EFF6;
    color: #B0B6BA;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
}
.input-group-prepend .input-group-text {
    border-radius: 5px 0px 0px 5px;
}
.input-group-append .input-group-text {
    border-radius: 0px 5px 5px 0px;
    color: #7A7E83 !important;
    font-style: italic !important;
    font-size: 13px !important;
}
.input-group-text i {
    background: #F7F9FC;
    color: #B0B6BA;
    font-size: 20px;
    font-weight: 300;
    line-height: 22px;
}
span.required {
    letter-spacing: 0px;
    color: #DC3545;
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    margin-left: 3px;
}
label.error {
    color: #E0262C;
}
span.note {
    letter-spacing: 0px;
    color: #223345;
    font-size: 13px;
    line-height: 17px;
}
span a.link-name {
    color: #007BFF;
}
.radio-toolbar {
    margin-top: 15px;
    margin-bottom: 30px;
}
    .radio-toolbar button.radio-btn {
        display: inline-block;
        background-color: #F2F8FF;
        padding: 21px 64px;
        font-size: 12px;
        border-radius: 5px;
        margin-right: 6px;
        line-height: 16px;
        font-weight: 600;
        color: #748A9D;
        border: none;
        outline: none;
    }
    .radio-toolbar button.btn-radio-check {
        background-color: #007BFF;
        color: #FFFFFF;
    }
    
.add-gray-water label {
    font-weight: 400;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 22px;
}
span.yellow-hightlight {
    color: #252525;
    font-weight: 700;
    padding: 2px 4px;
    background-color: #FBAD18;
    border-radius: 2px;
    font-size: 12px;
    line-height: 16px;
}
span.red-text {
    letter-spacing: 0px;
    color: #EB3331;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}
a.link-submit-grey,
a.link-submit-grey-dt {
    margin: 30px 0;
    text-align: center;
    color: #748A9D;
    font-size: 13px;
    line-height: 16px;
    display: block;
    font-weight: 600;
    cursor: pointer;
}

/* BUTTONS STYLING
----------------------------------------------------------
*/
.edit-btn {
    background: #E9EFF6;
    color: #A6BCD0;
    font-weight: 600;
    padding: 10px 16px;
    font-size: 16px;
    border-radius: 5px;
    transition: all .5s ease-in-out;
}

        .edit-btn:hover {
            text-decoration: none;
            background: #6C757D;
            color: #FFFFFF;
        }

        .edit-btn i {
            margin-left: 10px;
        }

    .form-style .btn {
        color: #FFF;
        transition: all .3s ease-in-out;
        font-size: 16px;
        line-height: 20px;
        padding: 14px 30px;
        border-radius: 4px;
    }
.form-style .btn-round-blue {
    background-color: #007BFF;
    color: #fff;
    font-size: 12px !important;
    line-height: 22px !important;
    border-radius: 36px;
    padding: 16px 123px;
    width: auto;
}

.btn-blue {
    background: #007BFF;
    color: #FFF;
    padding: 12px 28px;
}
.btn-square-red {
    background-color: #DC3545;
    padding: 12px 28px;
}

.btn-square-yellow {
    background: #FBAD18;
    color: #12232B;
    padding: 12px 28px;
}
.btn-blue:hover {
    box-shadow: 0 5px 20px #2699FB;
    color: #fff;
    text-decoration: none;
}
.btn-blue-border {
    border: 1px solid #006ADC;
    border-radius: 30px;
    background: transparent;
    color: #007BFF;
    font-size: 12px;
    line-height: 15px;
    padding: 14px 30px;
    outline: none;
}

.btn-blue-square-border {
    border: 1px solid #007BFF;
    border-radius: 4px;
    color: #007BFF !important;
    padding: 12px 28px;
}
    .btn-blue-square-border:hover,
    .btn-blue-square-border:focus,
    .btn-blue-square-border:visited {
        color: #007BFF;
    }

.btn-red-square-border {
    border: 1px solid #E0262C;
    border-radius: 4px;
    color: #E0262C !important;
    padding: 12px 28px;
}
    .btn-red-square-border:hover,
    .btn-red-square-border:focus,
    .btn-red-square-border:visited {
        color: #E0262C;
    }




.btn-blue-border:visited,
.btn-blue-border:focus,
.btn-blue-border:active {
    outline: none;
}
.btn-red {
    color: #FFF;
    background: #EB3331;
    font-weight: 700;
    font-size: 12px;
    line-height: 22px;
}
    .btn-red:hover,
    .btn-blue:hover {
        color: #FFF;
    }
    .btn-round {
        border-radius: 36px !important;
    }
.btn-text-uppercase{
    text-transform: uppercase;
}

.btn-md {
    font-size: 16px;
    border-radius: 5px;
}

    .btn-sumit {
        margin-top: 40px;
    }

    .btn-primary {
        background-color: var(--primary);
    }

.btn-refresh {
    background: none;
    border: none;
    outline: none;
    color: #7A7E83;
    font-size: 16px;
    font-weight: 300;
    bottom: 20px;
    right: 20px;
    position: absolute;
}
.btn-icon i{
    margin-right: 11px;

}

.btn-off-white {
    color: #182E38 !important;
    background: #F7F9FC 0% 0% no-repeat padding-box;
    border: 1px solid #B0B6BA80;
    border-radius: 4px;
    margin-right: 15px;
    padding: 12px 28px;
}

.btn-borer-grey {
    border: 1px solid #748A9D;
    border-radius: 4px;
    color: #748A9D !important;
}



/* MODALS STYLING
----------------------------------------------------------
*/
.danger-model {
    top: 25vh;
}
.danger-model .modal-content {
    padding: 40px 16px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 30px #0000000D;
    border-radius: 5px;
    border: none;
}
.danger-model .modal-body p.confirm-delete-text {
    letter-spacing: 0px;
    color: #EB3331;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
}
.danger-model .modal-footer {
    text-align: center;
    display: block;
}
    .danger-model .btn-block {
        width: 100%;
        padding: 20px 0;
    }
    .danger-model .modal-footer a.cancel-modal-link {
        display: block;
        margin-top: 30px;
        /* font: normal normal bold 13px/16px Inter V; */
        letter-spacing: 0px;
        color: #748A9D;
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
        cursor: pointer;
    }
.cancel-modal-large-link {
    font-weight: 600;
    font-size: 16px !important;
    line-height: 20px !important;
    color: #748A9D;

}



/* DASHBOARD PANELS
----------------------------------------------------------
*/
.dashboard-row {
    margin-top: 24px;
    display: flex;
}
.dashboard-panels {
    background: #FFFFFF;
    box-shadow: 0px 10px 30px #d1d5df80;
    border: 1px solid #E9EFF6;
    border-radius: 12px;
    height: 100%;
    min-height: 304px;
    position: relative;
    overflow: auto;
}
    .dashboard-panels hr {
        color: #E2E6EA;
        background-color: #E2E6EA;
        opacity: .5;
        margin-bottom: 17px;
        margin-top: 0;
    }
    .dashboard-panels a.blue-link{
        font-size: 13px;
        line-height: 16px;
        text-decoration: none;
    }
    .dashboard-panels p{
        margin-bottom: 0;
    }
    .panel-section {
        padding: 24px 19px;
    }
        .panel-section p {
            font-size: 13px;
            line-height: 16px;
            color: #12232B;
            font-weight: 700;
        }
.panel-section.no-unassign p {
    font: normal normal normal 13px/16px Inter;
    letter-spacing: 0px;
    color: #7A7E83;
    text-align: center;
}
            .panel-section p.panel-title {
                margin-bottom: 0;
            }
        .panel-section span {
            color: #182E38;
            font-size: 12px;
            line-height: 16px;
        }
.no-assign p {
    font-size: 13px;
    line-height: 16px;   
    color: #7A7E83;
    text-align: center;
  
}
.unassign-panel span i {
    color: #7A7E83;
    font-size: 4px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}
.unassign-panel span.email{
    text-decoration: underline;
}
span.panel-num-count {
    background: #7A7E83;
    border-radius: 100px;
    color: #fff;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 12px;
    margin-left: 7px;
}
.panel-border-bottom {
    border-bottom: 1px solid #E9EFF6;
}
.group-btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.add-fuel-fee,
.view-all-fee {
    margin-top: 37px;
}
#addFee{
    margin-top: 20px;
}

.dsb-table,
.dsb-table td,
.dsb-table th {
    border: 1px solid #E2E6EA;
}
    .dsb-table th {
        border-bottom: none;
    }
.panel-section .dsb-table td,
.panel-section .dsb-table th {
    white-space: nowrap;
}


/* BODY MANAGEMENT/ADD/EDIT STYLING
----------------------------------------------------------
*/
.pull-right {
    float: right;
}

    .pull-left {
        float: left;
    }

    .margin-top-30 {
        margin-top: 30px;
    }

    .hide {
        display: none;
    }

    .dropdown-toggle {
        width: 100%;
    }

    .select-container .btn-group {
        width: 100%;
        border: 1px solid #E9EFF6;
        border-radius: 5px;
    }

    .select-container span.multiselect-selected-text {
        color: #182E38;
        font-size: 16px;
        line-height: 24px;
    }

    .select-container select.form-control[multiple],
    .select-container select.form-control[size] {
        height: 52px;
    }

.select-container ul.dropdown-menu {
    width: auto;
}
.select-container .dropdown-menu.show {
    display: block;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    columns: 5;
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    height: 30vh;
    transform: none !important;
    top: 55px !important;
}
.select-container .multiselect-container > li {
    width: 33%;
    list-style: none;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

        .select-container .multiselect-container > li a:hover {
            text-decoration: none;
        }

        .select-container .multiselect-container > li > a > label {
            margin: 0;
            height: 100%;
            cursor: pointer;
            font-weight: 400;
            padding: 5px 15px;
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: 700;
            color: #182E38;
            line-height: 16px;
        }

            .select-container .multiselect-container > li > a > label > input[type=checkbox] {
                margin-bottom: 0;
                margin-right: 10px;
            }

    .dropdown-toggle .caret {
        display: none;
    }

    #save-body-water .btn-group {
        display: flex;
        width: 100%;
        height: auto;
        padding: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    /* TERRITORY MANAGEMENT/ADD/EDIT STYLING
----------------------------------------------------------
*/

    .tr-management-table .edit-column {
        padding: 15px 10px;
    }

/*   MEDIA QUERIES
----------------------------------------------------------
*/
@media only screen and (max-width: 1185px) {

    .cp-management-table{
        width:96%
    }
}
@media only screen and (max-width: 1420px) {

    .report-filter{
    margin-right:4%;
    }
}
@media only screen and (max-width: 1380px) {
    .dlloc-management-table{
     width: 95%;
    }
}
@media only screen and (max-width: 1340px) {
    .dlloc-management-table {
        width: 92%;
    }
}
@media only screen and (max-width: 1300px) {
    .transaction-report {
        width: 79%
    }

    .inner-dealer-container .list-table .form-style .transaction-export .form-group {
        width: 79%;
    }
}
@media only screen and (max-width: 1195px) {
    .dlloc-management-table {
        width: 90%;
    }
}
@media only screen and (max-width: 1170px) {
    .dlloc-management-table {
        width: 88%;
    }
}
@media only screen and (max-width: 1150px) {
    .transaction-report {
        width: 99.5%
    }

    .cp-management-table {
        width: 99.5%
    }

    .dlloc-management-table {
        width: 99.5%;
    }

    .inner-dealer-container .list-table .form-style .transaction-export .form-group {
        width: 99.5%;
    }
}

@media only screen and (max-width: 1599px) {
    table.recent-transaction-tbl td.time-column-yellow,
    table.recent-transaction-tbl td.time-column-green,
    table.recent-transaction-tbl td.time-column-dgrey {
        width: 18% !important;
    }
}

@media only screen and (max-width: 1537px) {
    .right-dealer-notif{
        flex: 0 0 25vw !important;
    }
}
@media only screen and (max-width: 1410px){
    a.export-btn {
        display: flex !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: baseline !important;
    }
    .transaction-panel table.recent-transaction-tbl p.colum-bar span:first-child {
        display: block !important;
    }
    table.recent-transaction-tbl td p span.circle-border{
        margin-top: 15px !important;
    }
    table.recent-transaction-tbl td p.abs-pos{
        margin-top: -40px !important;
    }
}
@media only screen and (min-width:1151px) and (max-width: 1599px) {
    .full-screen-desktop ul.desktop-menu-icons li {
        width: 40% !important;
    }

    .container-flex > .notification-container {
        flex: 0 0 25vw !important;
    }
    .left-dashboard .dashboard-row [class*="col-"] {
        width: 100%;
        margin-bottom: 30px;
    }
    .inner-customer-container .form-style form .form-group [class*="col-"],
    .inner-dealer-container .form-style form .form-group [class*="col-"] {
        width: 100%;
        margin-bottom: 30px;
    }
}

@media only screen and (min-width:1151px) and (max-width: 1499px) {
    #territory-overview-table{
        position: relative;
    }
    #territory-overview-table .title-row.title-row-filter-mobile {
        white-space: nowrap;
        overflow-x: auto;
    }
    #territory-overview-table .title-row.title-row-filter-mobile h2{
        margin-right: 20px;
    }
}

    @media only screen and (min-width:1151px) and (max-width: 1355px) {
        .inner-dealer-container .form-style form .form-group {
            display: block;
            /* width: 100%; */
        }

        .dl-pending-panel .panel-content-row span.fuel-remaining {
            margin-left: 2px;
        }
        /*.inner-dealer-container .form-style form .form-group [class*="col-"] {
        width: 100%;
        margin-bottom: 30px;
    }*/
    }


    @media only screen and (max-width: 1299px) {
        .transaction-panel table.recent-transaction-tbl dataTable td:nth-child(3) {
            width: 50% !important;
        }

        .transaction-panel table.recent-transaction-tbl dataTable td:nth-child(4) {
            width: 35% !important;
        }

        .transaction-panel table.recent-transaction-tbl p.column-cricle span:nth-child(2) {
            display: block !important;
        }
    }

    @media only screen and (min-width:1151px) and (max-width: 1299px) {
        #side-bar {
            width: 250px !important;
        }

        .block-notif p,
        .block-notif span {
            font-size: 10px !important;
        }

        .dashboard-content-column h1 {
            font-size: 28px !important;
        }

        .notification-content-column h3 {
            font-size: 16px !important;
        }
    }

    @media only screen and (min-width:1151px) and (max-width: 1239px) {
        table.recent-transaction-tbl td.time-column-yellow,
        table.recent-transaction-tbl td.time-column-green,
        table.recent-transaction-tbl td.time-column-dgrey {
            width: 21% !important;
        }
    }

    @media (min-width: 1151px) {
        main {
            display: flex;
            flex-wrap: nowrap;
        }
        /*hide side bar*/
        /*hamburger menu show for responsive screen hide full screen*/
        /*change color to the dark grey blue of the side bar just for the hamburger menu*/
        .full-screen-mobile {
            display: none;
        }

            .full-screen-mobile .modal {
                display: block;
            }

        .mobile-container {
            display: flex;
            background: #F2F8FF;
        }

        .full-screen-desktop .modal.show {
            display: block;
        }

        .main-title-moblie {
            display: none;
        }

        .title-row-mobile {
            display: none;
        }

        .btn-group-row-mobile {
            display: none !important;
        }

        .footer-mobile {
            display: none;
        }

        .custom-padding {
            background: #FFF;
        }

        .fullscreen-height-model .modal-dialog {
            height: 100%;
            float: right;
            background: #FFF;
            width: 50vw;
            margin: auto;
            transform: translateX(0%) !important;
        }

            .fullscreen-height-model .modal-dialog .modal-content {
                border: none;
                margin-top: 90px;
            }

        .content-items {
            padding-bottom: 60px;
        }

        .customer-container-flex {
            background: #FFF;
            padding-bottom: 44px;
        }

        .inner-table-list table td.more-action ul.dropdown-menu.show:before {
            content: "";
            position: absolute;
            top: -7px;
            left: 10px;
            width: 12px;
            height: 12px;
            border-top: 1px solid #E2E6EA;
            border-left: 1px solid #E2E6EA;
            background-color: #fff;
            transform: rotate( 45deg );
        }

        .right-customer-notif {
            background: #F2F8FF;
        }

        .photos-display {
            justify-content: flex-start !important;
        }
    }

    @media (max-width: 1150px) {
        .full-screen-blue-mobile {
            padding: 0;
            height: 100vh;
            background: #F2F8FF;
            text-align: center;
            padding-right: 0;
            padding-left: 0;
            min-height: 100%;
        }

        .stacked-footer {
            display: inherit !important;
        }

        .stack-content-footer {
            background-color: #F2F8FF;
            height: 100%;
        }

        .stacked-content {
            box-shadow: 0px 5px 30px #0000000D;
            background: white;
            border-radius: 0px 0px 36px 36px;
        }

        .identity-footer {
            background-color: #F2F8FF;
            padding-top: 5em;
        }

        .copyright-tacpp-footer {
            background-color: #F2F8FF;
        }

        .mobile-footer {
            background-color: #F2F8FF;
        }

        .row.justify-content-center.media-icons {
            background-color: #F2F8FF;
        }

        .top-black-mobile {
            background: #FFF;
            padding: 15px 20px;
            position: relative;
        }

        .top-black-mobile-border-radius:after {
            content: "";
            border-radius: 0px 0px 0px 80px;
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: #182E38;
            z-index: 1;
        }

        .top-black-mobile .main-title-moblie {
            margin-bottom: 37px;
        }

        .top-black-mobile h2.main-title-margin {
            color: #FAFAFA;
            position: relative;
            z-index: 2;
            margin-left: 45px;
        }

        .top-black-mobile h2.main-title {
            color: #FAFAFA;
            position: relative;
            z-index: 2;
        }

        .top-black-mobile p {
            font-size: 14px !important;
            line-height: 20px !important;
            color: #FAFAFA !important;
            font-weight: 400 !important;
            margin-top: 18px;
            margin-bottom: 0;
            position: relative;
            z-index: 2;
            padding: 0px 45px;
        }

        .top-black-mobile a.go-back-icon {
            color: #FFF;
            padding: 0 10px;
        }

        .bottom-white-mobile {
            background-color: #FFF;
            padding: 40px 37px;
            box-shadow: 0px 15px 15px #0000000d;
            border-radius: 0px 0px 36px 36px;
            position: relative;
        }

            .bottom-white-mobile a.blue-link {
                font-size: 12px;
                line-height: 18px;
                font-weight: 600;
                text-decoration: underline;
            }

        .title-row-desktop {
            display: none;
        }

        .btn-group-row-desktop {
            display: none !important;
        }

        .right-dealer-notif,
        .right-customer-notif {
            display: none;
        }

        .notification-page {
            display: block !important;
        }

        .left-dashboard,
        .inner-dealer-container .form-style {
            margin-right: 0 !important;
        }

        .container-block-mobile {
            width: 100%;
            display: block !important;
        }

        .pending-location-more-information {
            margin-top: 90px;
        }

            .pending-location-more-information .customer-location-photos .pending-location-photodisplay {
                flex-wrap: wrap !important;
            }

        .customer-notif-desktop {
            display: none;
        }

        .container-flex-block .form-style {
            padding-right: 0 !important;
        }

        .inner-table-list table td.more-action ul.dropdown-menu.show:before {
            content: "";
            position: absolute;
            top: -7px;
            right: 10px;
            width: 12px;
            height: 12px;
            border-top: 1px solid #E2E6EA;
            border-left: 1px solid #E2E6EA;
            background-color: #fff;
            transform: rotate( 45deg );
        }

        .title-row-filter-mobile {
            display: block;
        }

        #territory-overview-table .title-row-filter-mobile {
            margin-top: 30px;
        }
    }

    @media (max-width: 991px) {
        .header-form-items {
            width: 100%;
            flex-wrap: wrap;
        }

            .header-form-items .date {
                margin: 0;
                width: 100%;
            }

                .header-form-items .date:nth-child(2) {
                    margin-left: 0;
                    margin-top: 24px;
                }

            .header-form-items a.btn {
                width: auto;
                padding: 14px 25px;
                margin-top: 24px;
            }

        #locationModal .modal-header-mobile {
            display: block;
        }

            #locationModal .modal-header-mobile .transaction-button-group {
                margin-top: 30px;
            }

        #locationModal .modal-btn-group-modal {
            text-align: left !important;
        }

        #locationModal .locationModelbody {
            padding: 0 35px !important;
        }
    }

    @media (max-width: 990px) {
        .header-right {
            margin-top: 0em;
            text-align: left;
        }


        #export-report-form .btn-export-mobile {
            width: auto;
            margin: 24px 0;
        }
        /*table.recent-transaction-tbl td span.text-small,
        table.recent-transaction-tbl td p.text-small{
            display: flex !important;
            justify-content: flex-start !important;
        }
            table.recent-transaction-tbl td span.text-small.text-small-bold.yellow-opa,
            table.recent-transaction-tbl td span.text-small.text-small-bold.green-opa {
                display: inline-block !important;
            }*/
    }

    @media (min-width: 767px) and (max-width: 991px) {
        .form-style .mt-md-4 {
            margin-top: 1.875rem !important;
        }
    }

    @media (max-width: 767px) {
        #locationModal .container {
            max-width: -webkit-fill-available;
        }

        #location .card .card-header .btn-header-link,
        #vessel .card .card-header .btn-header-link,
        #inactive-vessel .card .card-header .btn-header-link {
            font-size: 16px !important;
        }

        span.vessel-text-grey {
            display: none;
        }

        .title-row-dashboard {
            display: block !important;
        }

        .territory-assigned-display {
            float: none !important;
            margin-left: -15px;
        }

        table.recent-transaction-tbl td span.text-small.text-small-bold.yellow-opa,
        table.recent-transaction-tbl td span.text-small.text-small-bold.green-opa {
            display: block !important;
            margin: auto !important;
            width: max-content !important;
        }

        #export-report-form {
            margin-bottom: 30px !important;
        }

        .report-filter {
            position: initial !important;
        }
    }

    @media (max-width: 664px) {
        .header-right .bottom-btn {
           /* margin-top: 1em;*/
        }


        .order-sm-1 {
            -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
            order: 1;
        }

        .order-sm-2 {
            -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
            order: 2;
        }

        .dt-table-list .dataTables_length {
            text-align: left;
        }
    }


    @media (min-width: 576px) and (max-width: 767px) {
        .form-style .mt-sm-4 {
            margin-top: 1.875rem !important;
        }
    }

    @media (max-width: 575px) {
        .form-style .custom-small-margin {
            margin-top: 30px;
        }

        .dashboard-row .custom-small-margin {
            margin-top: 24px;
        }

        .content-items .btn-block,
        .content-items .btn-lock-smmrg {
            display: block;
            width: 100% !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .form-style-mobile input,
        .form-style-mobile textarea,
        .form-style-mobile select,
        .form-style-mobile input::placeholder,
        .form-style-mobile textarea::placeholder {
            font-size: 14px;
            line-height: 24px;
        }

        .mt-xs-5 {
            margin-top: 3rem !important;
        }

        .mt-xs-4 {
            margin-top: 1.5rem !important;
        }

        #locationModal .btn-notice {
            display: block;
            margin-bottom: 30px;
            width: 100%;
        }

        .territory-assigned-display {
            display: block !important;
        }

            .territory-assigned-display .display-assigned {
                margin: 15px !important;
            }

            .territory-assigned-display a {
                line-height: 35px !important;
            }

        #locationModal .modal-header-mobile .transaction-button-group span,
        #locationModal .modal-header-mobile .transaction-button-group button {
            margin: 10px 0;
        }

        .btn-send-notice .btn-notice {
            display: block;
            margin: 30px 10px;
            width: 100%;
        }
    }

    @media (max-width: 390px) {
        .radio-toolbar button.radio-btn {
            padding: 15px 45px;
        }
    }


    @media (max-width: 465px) {
        .dt-table-list .top-table-controls {
            position: initial;
            text-align: center;
        }

        .dt-table-list .dataTables_length {
            text-align: center;
        }

        #territory-overview-table .dt-table-list .top-table-controls,
        #territory-overview-table .dt-table-list .dataTables_length {
            text-align: left !important;
            position: initial;
        }
    }

    @media (max-width: 405px) {
        .tank-info-column {
            margin-left: 10px;
        }

            .tank-info-column .fuel-remaining {
                margin-left: 0px !important;
            }
    }

@media (max-width: 388px) {
    .location-list.inner-table-list td.td-tooltip {
        padding: 0 !important;
    }
}

    @media (max-width: 340px) {
        .float-container {
            padding: 0;
        }

            .float-container .label-floating-inside {
                right: 5px;
                font-size: 9px;
            }

            .float-container input,
            .float-container select {
                font-size: 11px;
            }

        .select-loc-container:after {
            right: 12px !important;
        }
        .location-list.inner-table-list td.vessel-name span {
            margin-left: 0 !important;
        }
        .location-list.inner-table-list td.vessel-name {
            padding-right: 0 !important;
        }
        .location-list.inner-table-list td.more-action {
            padding-left: 0 !important;
        }
    }



    /* DEALER, DEALER LOCATION MANAGEMENT/ADD/EDIT STYLING
----------------------------------------------------------
*/
    /*DEALER NOTIF PANEL*/
    .panel-row-mr {
        margin-top: 30px;
    }

    .pending-panel {
        box-shadow: 0px 10px 30px #d1d5df80;
        border-left: 1px solid #E2E6EA;
        border-right: 1px solid #E2E6EA;
        border-radius: 12px;
        padding: 0;
    }

    .notification-page .dl-pending-panel .panel-content-row {
        justify-content: flex-start
    }

        .notification-page .dl-pending-panel .panel-content-row span.fuel-perc {
            margin-right: 50px;
        }

    .dl-pending-panel {
        border-top: 1px solid #E2E6EA;
    }

        .dl-pending-panel .panel-content-row {
            width: 100%;
            justify-content: space-around;
        }

    .panel-content-row {
        display: flex;
    }

        .panel-content-row span.fuel-perc {
            background: #DC3545;
            color: #fff;
            font-size: 16px;
            line-height: 24px;
            padding: 11px 6px;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            margin-right: 10px;
        }

    .dl-pending-panel .panel-content-row span.fuel-perc {
        margin-right: 0;
    }

    .panel-content-row span.fuel-perc i {
        color: #fff;
        font-size: 13px;
        line-height: 16px;
        margin: auto;
    }

    .panel-content-row span.fuel-remaining {
        margin-left: 24px;
        background: #FBE4E7;
        font-weight: 400;
        padding: 2px 5px;
        border-radius: 6px;
        white-space: nowrap;
    }

    .panel-content-row p.name-title-location {
        margin: 7px 0;
        color: #007BFF;
        font-weight: 400;
        text-decoration: underline;
    }

    .right-panel-section p.name-title-location {
        font-size: 11px;
        line-height: 14px;
        color: #182E38;
    }

    .panel-content-row p.last-transaction {
        letter-spacing: 0px;
        color: #B0B6BA;
        font-size: 11px;
        line-height: 14px;
        font-weight: 400;
        font-style: italic;
    }

    .right-panel-section p.last-transaction {
        color: #00000099;
        font-size: 11px;
        line-height: 20px;
    }

    p.panel-title {
        letter-spacing: 0px;
        color: #12232B;
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        margin-bottom: 10px;
    }

    p.panel-grey {
        color: #7A7E83;
    }

    .right-dealer-notif,
    .right-captain-notif {
        flex: 0 0 20vw;
    }

    .dealer-notif .info-icons {
        text-align: right;
    }

    .info-icons i {
        margin-bottom: 20px;
    }

    .notif-count {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 22px 21px;
        border-bottom: 1px solid #E2E6EA;
        background: #FFF;
        border-radius: 12px 12px 0 0;
        position: relative;
    }

        .notif-count p {
            /* font: normal normal bold 13px/16px Inter V; */
            letter-spacing: 0px;
            color: #223345;
            font-size: 13px;
            line-height: 16px;
            font-weight: 700;
            margin-bottom: 0;
        }

        .notif-count i,
        .info-icons i {
            color: #7A7E83;
        }

    .grey p {
        color: #B0B6BA !important;
    }

    .grey i {
        color: #C3C6D1 !important;
    }

    span.count-num {
        border-radius: 10px;
        text-align: center;
        letter-spacing: 0px;
        font-size: 11px;
        font-weight: 400;
        padding: 3px 8px;
        line-height: 10px;
        margin-left: 8px;
    }

        span.count-num.count-num-yellow {
            color: #12232B;
            background: #FBAD18;
        }

        span.count-num.count-num-grey {
            color: #FFFFFF;
            background: #748A9D;
        }

        span.count-num.count-num-red {
            background: #DC3545;
            color: #FFF;
        }

    span.count-num-lgrey {
        color: #FFF;
        background-color: #B0B6BA;
    }

    .grey span.count-num {
        background: #B0B6BA !important;
    }


    span.time-sent {
        font-size: 10px;
        letter-spacing: 0px;
        color: #B0B6BA;
        line-height: 16px;
        font-style: italic;
    }

    a.see-all {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 13px;
        line-height: 16px;
        background: #FFF;
        padding: 22px 21px;
        border-radius: 0 0 12px 12px;
    }

    a.blue-link {
        color: #007BFF;
        font-size: 13px;
        line-height: 16px;
    }

    a.blue-link-light-weight {
        font-weight: 400 !important;
    }

    a.blue-link-no-underline {
        text-decoration: none;
    }

    a.grey-link {
        text-decoration: underline;
        font-size: 16px;
        line-height: 20px;
        color: #748A9D;
        font-weight: 700;
        cursor: pointer;
    }

    .edit-enable {
        background-color: transparent;
        border: none;
        outline: none;
        color: #007BFF;
        font-size: 13px;
        line-height: 16px;
        text-decoration: underline;
    }

    .edit-disabled {
        background-color: transparent;
        border: none;
        outline: none;
        color: #808D95;
        font-size: 13px;
        line-height: 16px;
        text-decoration: underline;
        margin-left: 38px;
    }

    .pending-content {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        background: #FFF;
        padding: 20px 21px;
        border-bottom: 1px solid #E2E6EA;
    }

    ul.pending-info {
        padding-left: 0;
    }

        ul.pending-info li {
            font-size: 12px;
            list-style: none;
            line-height: 18px;
        }

            ul.pending-info li.name {
                font-weight: 600;
                margin-bottom: 8px;
                font-size: 13px;
                line-height: 16px;
                color: #252525;
            }

            ul.pending-info li.address {
                color: #999999;
            }

    .transaction-panel {
        padding: 24px 19px;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
    }

    table.recent-transaction-tbl td {
        color: #182E38;
        font-size: 12px;
        line-height: 15px;
    }

        table.recent-transaction-tbl td p span.circle-border {
            background: #FFFFFF 0% 0% no-repeat padding-box;
            width: 16px;
            height: 16px;
            display: block;
            border-radius: 50%;
            margin-top: 25px;
        }

            table.recent-transaction-tbl td p span.circle-border.border-green {
                border: 2px solid #17A2B8;
            }

            table.recent-transaction-tbl td p span.circle-border.border-yellow {
                border: 2px solid #FBAD18;
            }

            table.recent-transaction-tbl td p span.circle-border.border-grey {
                border: 2px solid #B0B6BA;
            }

        table.recent-transaction-tbl td p span.bar-border {
            background: #E9EFF6 0% 0% no-repeat padding-box;
            width: 2px;
            height: 35px;
            display: block;
            margin-left: 7px;
            margin-top: 1px;
        }

        table.recent-transaction-tbl td .colum-bar {
            margin-bottom: 23px;
            margin-top: 7px;
        }

        table.recent-transaction-tbl td p.abs-pos {
            margin: -30px 15px 0 15px;
        }

        table.recent-transaction-tbl td span.text-small,
        table.recent-transaction-tbl td p.text-small {
            font-size: 11px;
            line-height: 14px;
        }

        table.recent-transaction-tbl td span.time-text {
            display: inline-block;
            vertical-align: middle;
        }

        table.recent-transaction-tbl td span.text-small-bold {
            font-weight: 700;
        }

        table.recent-transaction-tbl td span.blue-text {
            color: #007BFF;
        }

        table.recent-transaction-tbl td span.grey-text {
            color: #B0B6BA;
        }

        table.recent-transaction-tbl td a.view-transaction-grey {
            color: #7A7E83;
            font-size: 18px;
            font-weight: 700;
        }

        table.recent-transaction-tbl td span.text-small.text-small-bold.yellow-opa {
            background: #FEEDC7 0% 0% no-repeat padding-box;
            border-radius: 6px;
            padding: 3px 5px;
            margin-left: 13px;
        }

        table.recent-transaction-tbl td span.text-small.text-small-bold.green-opa {
            background: rgb(23 162 184 / 20%);
            border-radius: 6px;
            padding: 3px 5px;
            margin-left: 13px;
        }

        table.recent-transaction-tbl td span.text-small.text-small-bold.grey-opa {
            background: #7777771A;
            border-radius: 6px;
            padding: 3px 5px;
            margin-left: 13px;
        }

        table.recent-transaction-tbl td.time-column-yellow {
            width: 10%;
        }

        table.recent-transaction-tbl td.time-column-green,
        table.recent-transaction-tbl td.time-column-dgrey {
            width: 13%;
        }

        table.recent-transaction-tbl td span.yellow-badge {
            font-size: 10px;
            line-height: 16px;
            color: #252525;
            background: #FFD200 0% 0% no-repeat padding-box;
            border-radius: 10px;
            padding: 2px 8px 3px 8px;
            margin-right: 10px;
            margin-left: 33px;
        }

        table.recent-transaction-tbl td span.yellow-dot {
            background: #FFD200;
            width: 8px;
            height: 8px;
            display: inline-block;
            border-radius: 50%;
            margin-right: 9px;
            margin-left: 70px;
        }

        table.recent-transaction-tbl td span.green-badge {
            font-size: 10px;
            line-height: 16px;
            color: #FFF;
            background: #17A2B8 0% 0% no-repeat padding-box;
            border-radius: 10px;
            padding: 2px 8px 3px 8px;
            margin-right: 10px;
            margin-left: 15px;
        }

        table.recent-transaction-tbl td span.green-dot {
            background: #17A2B8;
            width: 8px;
            height: 8px;
            display: inline-block;
            border-radius: 50%;
            margin-right: 9px;
            margin-left: 70px;
        }

        table.recent-transaction-tbl td span.grey-badge {
            font-size: 10px;
            line-height: 16px;
            color: #6C757D;
            background: #E2E6EA 0% 0% no-repeat padding-box;
            border-radius: 10px;
            padding: 2px 8px 3px 8px;
            margin-right: 10px;
            margin-left: 15px;
        }

        table.recent-transaction-tbl td span.grey-dot {
            background: #B0B6BA;
            width: 8px;
            height: 8px;
            display: inline-block;
            border-radius: 50%;
            margin-right: 9px;
            margin-left: 70px;
        }


    /* END DEALER NOTIF PANELS*/
    .inner-dealer-container {
        margin-bottom: 60px;
        padding-left: 2em;
        padding-right: 2em;
    }

    .toggle-group-btn {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        /*margin-right: 50px;*/
    }

        .toggle-group-btn input {
            -webkit-appearance: none;
            border-radius: 36px;
            border: 1px solid #E9EFF6;
            width: 30px;
            height: 30px;
            flex: none;
            display: inline-block;
            vertical-align: middle;
            position: relative;
            margin-left: 2px;
            background: #FFF;
            cursor: pointer;
        }

    .unlocked-text {
        font-weight: 400 !important;
        color: #AFB8C3 !important;
    }

    .locked {
        color: #5A6268 !important;
        font-weight: 400 !important;
    }

    .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
        margin-right: 11px;
    }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #E9EFF6;
        -webkit-transition: .4s;
        transition: .4s;
    }

        .slider:before {
            position: absolute;
            content: "\f3c1";
            height: 24px;
            width: 24px;
            left: 0;
            bottom: 0;
            background-color: #FFFFFF;
            -webkit-transition: .4s;
            transition: .4s;
            border: 1px solid #E9EFF6;
            font-weight: 400;
            font-size: 12px;
            color: #AFB8C3;
            margin: auto;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-family: 'Font Awesome 6 Pro';
        }

    input:checked + .slider,
    .locked-check {
        background-color: #007BFF;
    }

    input:focus + .slider,
    .locked-check {
        box-shadow: 0 0 1px #007BFF;
    }

        input:checked + .slider:before,
        .locked-check:before {
            -webkit-transform: translateX(24px);
            -ms-transform: translateX(24px);
            transform: translateX(24px);
            content: "\f023";
            color: #007BFF;
            font-weight: 600;
            border: 1px solid #007BFF;
        }

    .pump-out-toggle {
        margin-top: 23px;
    }

    .pump-out {
        box-shadow: 0 0 1px #007BFF;
        background-color: #007BFF;
        height: 32px;
        width: 50px;
    }

    .pump-out-slide,
    .pumpout-cva-slide {
        height: 32px;
        width: 59px;
    }

        .pump-out-slide:before,
        .pumpout-cva-slide:before {
            content: "";
            height: 32px;
            width: 32px;
        }

    .pump-out:before,
    .pumpoutCVA:before {
        -webkit-transform: translateX(24px);
        -ms-transform: translateX(24px);
        transform: translateX(24px);
        content: "" !important;
        border: 2px solid #007BFF !important;
        height: 32px;
        width: 32px;
    }

    input:checked + .pump-out-slide:before,
    input:checked + .pumpout-cva-slide:before {
        -webkit-transform: translateX(32px);
        -ms-transform: translateX(32px);
        transform: translateX(32px);
        content: "";
        color: #007BFF;
        border: 1px solid #007BFF;
    }

    .pump-out-disabled,
    .pumpout-cva-disabled {
        margin-left: 14px;
        font-size: 14px !important;
        line-height: 17px !important;
        font-weight: 400 !important;
        letter-spacing: 0px;
        margin-bottom: 0 !important;
        color: #B0B6BA;
        font-style: italic;
    }

    .pump-out-text,
    .pumpout-cva-text {
        margin-left: 14px;
        font-size: 14px !important;
        line-height: 17px !important;
        font-weight: 400 !important;
        letter-spacing: 0px;
        color: #007BFF;
        margin-bottom: 0 !important;
    }

    .pumpout-title {
        margin-bottom: 0 !important;
        margin-right: 25px;
    }
    /* Rounded sliders */
    .slider.round {
        border-radius: 36px;
    }

        .slider.round:before {
            border-radius: 50%;
        }



    .well-gray {
        background: #E9EFF6;
        border-radius: 4px;
        display: block;
        padding: 31px 0;
        text-align: center;
    }

        .well-gray p {
            font-size: 12px;
            letter-spacing: 0px;
            color: #252525;
            line-height: 16px;
            font-weight: 700;
        }



    span.need-assign-alert {
        background: #DC3545 0% 0% no-repeat padding-box;
        border-radius: 4px;
        padding: 3px 8px;
        color: #fff;
        white-space: nowrap;
        cursor: default;
    }

    .pump-out-offer {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

        .pump-out-offer label {
            background: #F2F8FF 0% 0% no-repeat padding-box;
            border-radius: 5px;
            color: #748A9D;
            padding: 21px 64px;
            margin-right: 6px;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            cursor: pointer;
        }

        .pump-out-offer input {
            -webkit-appearance: none;
            border: none;
            padding: 0;
            height: auto;
        }

        .pump-out-offer label.checked {
            color: #007BFF;
            font-weight: 600;
            border: 1px solid #007BFF66;
        }

    span.rate-note {
        color: #252525;
        font-size: 12px;
        line-height: 16px;
        background: #F2F8FF;
        padding: 2px 6px;
        font-weight: 400;
        margin-left: 17px;
    }

    .dt-table-list table td.service-time {
        letter-spacing: 0px;
        color: #B0B6BA !important;
        font-size: 11px;
        line-height: 16px;
        text-align: right;
    }

        .dt-table-list table td.service-time span.sameday {
            background: #58AAFF 0% 0% no-repeat padding-box;
            border-radius: 20px;
            color: #FFF;
            padding: 5px 10px;
            margin-right: 13px;
        }

        .dt-table-list table td.service-time span.daybefore {
            background: #FFC107 0% 0% no-repeat padding-box;
            border-radius: 20px;
            color: #FFF;
            padding: 5px 10px;
            margin-right: 13px;
        }

        .dt-table-list table td.service-time span.notsameday {
            background: #E2E6EA 0% 0% no-repeat padding-box;
            border-radius: 20px;
            color: ##6C757D;
            padding: 5px 10px;
            margin-right: 13px;
        }

        .dt-table-list table td.service-time i.blue-ts {
            color: #58AAFF;
            margin-right: 12px;
        }

        .dt-table-list table td.service-time i.yellow-ts {
            color: #FFC107;
            margin-right: 12px;
        }

.NoInput {
    color: #fff !important;
    background-color: #DC3545 !important;
    border-radius: 4px !important;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .8em;
    padding-right: .8em;
    margin-left:-.5em;
}

        tr.highlight {
            background-color: #fbe4e7 !important;
        }


    /* USER/CUSTOMER STYLING
----------------------------------------------------------
*/
    #side-bar .user-role-highlight i.fa-user {
        color: #FFF;
        background: #00000033;
    }

    #side-bar .user-role-highlight {
        background-color: #007BFF;
    }

    ul.admin li.dropdown-item:hover, ul.dealer li.dropdown-item:hover, ul.admin li.dropdown-item, ul.dealer li.dropdown-item, ul.admin li.dropdown-item a, ul.dealer li.dropdown-item a {
        background-color: #182E38 !important;
    }

    ul.admin li.dashboard-active, ul.dealer li.dashboard-active, ul.admin li.dashboard-active:hover, ul.dealer li.dashboard-active:hover {
        color: #FFF !important;
        background-color: #e0262c !important;
    }

    .dropdown-item.account:hover {
        color: #E9EFF6CC !important;
        font-weight: normal;
    }

    .dropdown-item.non-dropdown-link:hover {
        color: #E9EFF6CC !important;
    }

    ul.admin li.dashboard-active a.dashboard-active, ul.dealer li.dashboard-active a.dashboard-active, ul.admin li.dashboard-active a.dashboard-active:hover, ul.dealer li.dashboard-active a.dashboard-active:hover {
        background-color: #e0262c !important;
    }

        ul.admin li.dashboard-active a.dashboard-active i, ul.dealer li.dashboard-active a.dashboard-active i {
            color: #fff !important;
        }

    ul.user li a.dashboard-active {
        background: #FFFFFF1A !important;
        color: #FFF !important;
    }

ul.user li a.active,
ul.user li a.identity-active {
    background-color: #FFFFFF1A !important;
    color: #fff !important;
}

    ul.user li a.active i,
    ul.user li a.identity-active i {
        color: #E0262C;
    }

    .user p.menu-title {
        margin-bottom: 17px;
    }

    a.nav-link i,
    ul.user li a i {
        color: #E0262C;
    }

    .user-mobile-info {
        display: none;
    }

    .dashboard-content-column h1 {
        margin-left: 0 !important;
    }

    .full-screen-desktop ul.desktop-menu-icons {
        margin-bottom: 0;
        padding-left: 0;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 30px;
    }

        .full-screen-desktop ul.desktop-menu-icons li {
            list-style: none;
            width: 25%;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #E9EFF6;
            border-radius: 5px;
            padding: 49px 91px;
            margin-bottom: 26px;
            max-height: 187px;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 30px;
        }



            .full-screen-desktop ul.desktop-menu-icons li a {
                text-decoration: none;
                transition: all .5s ease-out;
            }

                .full-screen-desktop ul.desktop-menu-icons li a:hover i {
                    color: #007BFF;
                }

            .full-screen-desktop ul.desktop-menu-icons li i,
            .full-screen-desktop ul.desktop-menu-icons li span {
                display: block;
                white-space: nowrap;
                transition: all .5s ease-out;
            }

            .full-screen-desktop ul.desktop-menu-icons li i {
                font-size: 50px;
                line-height: 46px;
                letter-spacing: 1px;
                text-align: center;
                color: #A6BCD0;
            }

            .full-screen-desktop ul.desktop-menu-icons li span {
                text-align: center;
                letter-spacing: 0px;
                color: #12232B;
                font-size: 16px;
                line-height: 20px;
                font-weight: 700;
                margin-top: 20px;
            }

    .container-flex {
        display: flex;
        flex: 1;
    }

    .container-flex-block {
        position: relative;
    }

    .container-flex > .dashboard-container {
        flex: 1;
    }

    .container-flex > .notification-container {
        flex: 0 0 20vw;
        background: #FFF;
        padding: 0;
        height: 100%;
    }

    .notification-content-column {
        padding: 40px 30px 30px 30px;
    }

        .notification-content-column .title-row {
            margin-bottom: 30px;
        }

        .notification-content-column h3 {
            font-size: 20px;
            line-height: 24px;
            font-weight: 700;
            color: #223345;
            margin-bottom: 0;
        }

        .notification-content-column .title-row a {
            background-color: transparent;
            justify-content: center;
            padding: 0;
            text-decoration: none;
        }

    .notification-panel {
        margin-bottom: 50px;
    }

        .notification-panel .block-notif {
            border-radius: 10px;
            padding: 16px;
            margin-bottom: 15px;
        }

    .block-white-notif {
        border: 1px solid #DEE4EB;
        background: #FFF;
    }

    .block-yellow-notif {
        background: #FFF9EC;
        border: 1px solid #FBAD18;
    }

    .block-notif p.loc-name,
    .block-notif p.notice-title {
        letter-spacing: 0px;
        color: #000000;
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
    }

    .block-notif p.notice-text {
        font-size: 14px;
        line-height: 20px;
        color: #223345;
    }

    .block-notif p.gps-coords {
        letter-spacing: 0px;
        color: #223345;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 10px;
        margin-top: 15px;
    }

    p.datetime-notif {
        letter-spacing: 0px;
        color: #00000099;
        font-size: 12px !important;
        line-height: 20px;
        font-style: italic;
    }

        p.datetime-notif a.see-detail {
            font-style: normal;
            float: right;
            font-weight: 400;
        }

        p.datetime-notif button.mark-read {
            color: #007BFF;
            font-size: 13px;
            line-height: 16px;
            border: none;
            background: none;
            float: right;
            text-decoration: underline;
        }

    .block-notif p.loc-name span.pending-alert {
        float: right;
        color: #FFF;
        background: #58AAFF;
        padding: 2px 10px;
        border-radius: 20px;
        line-height: 16px;
        font-size: 12px;
        letter-spacing: 0.24px;
    }

    .block-notif p.loc-name span.approved-alert {
        float: right;
        color: #FFF;
        background: #58AAFF;
        padding: 2px 10px;
        border-radius: 20px;
        line-height: 16px;
        font-size: 12px;
        letter-spacing: 0.24px;
    }

    .block-notif p.loc-name span.denied-alert {
        float: right;
        color: #FFF;
        background: #EB3331;
        padding: 2px 10px;
        border-radius: 20px;
        line-height: 16px;
        font-size: 12px;
        letter-spacing: 0.24px;
    }

    .block-notif span.notice-alert {
        float: right;
        letter-spacing: 0.34px;
        color: #FBAD18;
        font-size: 17px;
        line-height: 15px;
    }

    .header-logo {
        position: relative;
        z-index: 2;
        width: 146px;
        height: auto;
        margin-bottom: 35px;
        margin-left: 15px;
        display: block;
    }

    .full-screen-blue {
        height: 100vh;
        background: #F2F8FF;
        text-align: center;
        padding-right: 0;
        padding-left: 0;
        min-height: 100%;
        overflow-x: hidden;
    }

    .content-items p {
        font-size: 18px;
        line-height: 24px;
        font-weight: 400;
    }

    .content-items h2 {
        font-size: 24px;
        line-height: 32px;
    }

    .content-items .content-text-left {
        text-align: left;
    }

    .content-items .content-text-center {
        text-align: center;
    }

    .loction-graphics {
        margin-bottom: 30px;
        position: relative;
        z-index: 2;
    }

    .top-blue {
        padding: 102px 56px;
        position: relative;
        background-color: #007BFF;
    }

    .top-white {
        padding: 102px 56px;
        background-color: #FFF;
        position: relative;
    }

    .top-blue-border-radius:after {
        border-radius: 0px 0px 0px 80px;
        background-color: #007BFF;
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .top-blue h2.main-title,
    .top-white h2.main-title,
    .top-wavy-blue-text h2.main-title {
        color: #FAFAFA;
        position: relative;
        z-index: 2;
    }

    .top-black h2.main-title {
        color: #FAFAFA;
        position: relative;
        z-index: 2;
    }


    .top-black h2.main-title-margin {
        color: #FAFAFA;
        position: relative;
        z-index: 2;
        margin-left: 45px;
    }


    .top-way-blue {
        position: relative;
        background-color: #FFF;
        z-index: 1;
    }

        .top-way-blue img.blue-wavy {
            width: 100%;
            height: 440px;
            position: relative;
            z-index: 1;
        }

    .top-wavy-blue-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        padding: 102px 56px 0 56px;
    }

        .top-wavy-blue-text p,
        .top-blue p,
        .top-white p {
            font-size: 14px;
            line-height: 20px;
            color: #FAFAFA !important;
            font-weight: 400;
            margin-top: 18px;
            margin-bottom: 0;
            position: relative;
            z-index: 2;
        }

    .top-black p {
        font-size: 14px;
        line-height: 20px;
        color: #FAFAFA !important;
        font-weight: 400;
        margin-top: 18px;
        margin-bottom: 0;
        position: relative;
        z-index: 2;
        padding: 0px 45px 37px 45px;
    }

    .bottom-white {
        background-color: #FFF;
        padding: 40px 37px;
        box-shadow: 0px 15px 15px #0000000d;
        border-radius: 0px 0px 36px 36px;
        position: relative;
    }

    .bottom-white-wavy {
        margin-top: -142px;
    }

    .top-off-white {
        background: #FFF;
        position: relative;
        padding: 108px 20px;
    }

        .top-off-white h2,
        .top-off-white a,
        .top-light-blue h2,
        .top-light-blue a {
            color: #007BFF;
            position: relative;
            z-index: 2;
        }

    .top-light-blue {
        background: #F2F8FF;
        position: relative;
        padding: 66px 36px 26px 36px;
    }

        .top-light-blue p {
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 0;
        }

    .top-off-white-border-radius:after {
        content: "";
        border-radius: 0px 0px 0px 80px;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #F2F8FF;
        z-index: 1;
    }

    .top-black {
        background: #FFF;
        padding: 15px 20px;
        position: relative;
    }

    .top-black-border-radius:after {
        content: "";
        border-radius: 0px 0px 0px 80px;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #182E38;
        z-index: 1;
    }

    .top-black a.go-back-icon {
        color: #FFF;
        padding: 0 10px;
    }

    .top-off-white a.go-back-icon {
        padding: 0 10px;
    }

    a.go-back-icon {
        font-size: 20px;
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
    }

    .content-items p {
        color: #748A9D;
    }

    p span.text-headline {
        letter-spacing: 0px;
        color: #223345;
        font-size: 16px;
        line-height: 24px;
        margin: 30px 0;
    }

    p span.bold-text {
        font-weight: 700;
    }

    .content-items .btn-off-white {
        background: #F2F8FF;
        color: #007BFF;
    }

    .content-items .btn-border-blue {
        border: 2px solid #007BFF;
        color: #007BFF;
    }

    .content-items .btn-round-blue {
        background-color: #007BFF;
        color: #fff;
    }

    .content-items .btn-block {
        margin-top: 40px;
        width: auto;
        padding: 16px 123px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .content-items .btn-lock-smmrg {
        margin-top: 15px;
        margin-bottom: 20px;
        width: auto;
        padding: 16px 123px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .content-items .btn-text-uppercase {
        text-transform: uppercase;
    }

    .content-items .btn-round {
        border-radius: 36px;
        font-size: 12px;
        line-height: 22px;
        font-weight: 700;
    }

    .skip {
        margin-top: 50px;
    }

    a.footer-skip {
        color: #A6BCD0;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 30px;
        font-weight: 700;
        text-decoration: none;
    }

    button.skip {
        color: #A6BCD0;
        text-transform: uppercase;
        font-size: 14px;
        line-height: 30px;
        font-weight: 700;
        text-decoration: none;
        border: none;
        background: none;
        outline: none;
        display: block;
        margin: auto;
        text-align: center;
        margin-top: 50px;
    }

        button.skip:focus {
            outline: none;
        }

    .footer-icons-grey i {
        color: #6C757D;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 24px;
    }

    .footer-links-text {
        font-size: 11px;
        line-height: 18px;
    }

    .footer-copyright {
        color: #343A40;
        font-weight: 400;
    }

    .footer-terms-privacy-links a {
        color: #58AAFF;
        font-weight: 600;
        text-decoration: none;
    }

    .media-icons {
        color: #6C757D;
        font-size: 21px;
        display: flex;
    }

    .copyright, .terms-privacy-links {
        text-align: center;
        font-size: 11px;
        color: #343140
    }

        .terms-privacy-links a {
            color: #007bff;
            text-decoration: none;
        }



    .alert-message-icon-red {
        margin-bottom: 40px;
    }

    .bottom-white a.blue-link {
        font-size: 12px;
        line-height: 18px;
        font-weight: 600;
        text-decoration: underline;
    }

    .bottom-white span.text-small {
        color: #343A40;
        font-size: 12px;
        line-height: 18px;
    }

    .loading-blue {
        margin: auto;
        margin-bottom: 31px;
        position: relative;
        background: #FFF;
    }

        .loading-blue, .loading-blue * {
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

    .loading-blue {
        width: 115px;
        height: 115px;
    }

        .loading-blue:after {
            border: 15px solid #F2F8FF;
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            border-radius: 50%;
            z-index: 2;
        }

        .loading-blue .pie {
            width: 50%;
            height: 100%;
            transform-origin: 100% 50%;
            position: absolute;
            border: 15px solid #007BFF;
        }

        .loading-blue .spinner {
            border-radius: 100% 0 0 100% / 50% 0 0 50%;
            z-index: 200;
            border-right: none;
            animation: rota 4s linear forwards;
        }

        .loading-blue:hover .spinner,
        .loading-blue:hover .filler,
        .loading-blue:hover .mask {
            animation-play-state: running;
        }

        .loading-blue .filler {
            border-radius: 0 100% 100% 0 / 0 50% 50% 0;
            left: 50%;
            opacity: 0;
            z-index: 100;
            animation: opa 4s steps(1, end) forwards reverse;
            border-left: none;
        }

        .loading-blue .mask {
            width: 50%;
            height: 100%;
            position: absolute;
            background: inherit;
            opacity: 1;
            /*z-index: 300;*/
            animation: opa 4s steps(1, end) forwards;
        }


    @keyframes rota {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes opa {
        0% {
            opacity: 1;
        }

        50%, 100% {
            opacity: 0;
        }
    }

    /*.map {
    border-radius: 24px;
}
    .map img {
        width: 100%;
        height: 100%;
        border-radius: 24px;
    }*/

    .fa-duotone.fa-exclamation-triangle:before, .fad.fa-exclamation-triangle:before {
        content: "\f071";
    }

    .form-show button.btn-add-vessel-page {
        outline: none;
        border: 1px solid #DEE4EB;
        border-radius: 8px;
        padding: 72px 0px;
        display: block;
        width: 100%;
        margin: auto;
        background: #F2F8FF;
        margin-top: 30px;
        margin-bottom: 63px;
        letter-spacing: 0px;
        color: #252525;
        font-size: 12px;
        line-height: 16px;
        font-weight: 700;
    }

    .form-show i,
    #dropzone i {
        display: block;
        color: #007BFF;
        font-size: 49px;
        font-weight: 200;
        margin-bottom: 13px;
    }

    #previewFiles {
        display: block;
        margin: auto;
        text-align: center;
        margin-top: 40px;
    }

    #dropzone .dz-preview {
        display: inline-block;
        margin-right: 4px;
        margin-left: 4px;
        margin-top: 4.5px;
        width: auto;
        position: relative;
    }

    #dropzone .dz-image {
        display: flex;
        width: 100%;
        height: 100%;
    }

        #dropzone .dz-image img {
            border-radius: 5px;
        }

    #dropzone .dz-details,
    #dropzone .dz-error-message,
    #dropzone .dz-success-mark,
    #dropzone .dz-error-mark {
        display: none;
    }

    #dropzone a.dz-remove {
        position: absolute;
        width: auto;
        height: auto;
        right: 0;
        top: 0;
        text-align: right;
        text-decoration: none;
        z-index: 2;
    }

        #dropzone a.dz-remove i {
            font-size: 14px !important;
            margin-bottom: 0;
            line-height: 10px;
            color: #7A7E83 !important;
            background: rgb(255 255 255 / 70%);
            font-size: 14px;
            box-shadow: 0px 5px 20px #00000029;
            line-height: 19px;
            border-radius: 50%;
            padding: 0px 6px;
            margin-top: 2px;
            margin-right: 3px;
            text-decoration: none;
            font-weight: 600 !important;
            display: inline-block;
            vertical-align: middle;
        }

    .dropzone.dz-clickable {
        cursor: pointer;
    }

        .dropzone.dz-clickable * {
            cursor: default;
        }

        .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
            cursor: pointer;
        }

    .dropzone, .dropzone * {
        box-sizing: border-box;
    }

    .dropzone {
        min-height: 150px;
        border: 1px solid #DEE4EB;
        padding: 51px 0;
        background: #F2F8FF;
    }

        .dropzone.dz-clickable {
            cursor: pointer;
        }

            .dropzone.dz-clickable * {
                cursor: default;
            }

            .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
                cursor: pointer;
            }

        .dropzone.dz-started .dz-message {
            display: none;
        }

        .dropzone.dz-drag-hover {
            border-style: solid;
        }

            .dropzone.dz-drag-hover .dz-message {
                opacity: 0.5;
            }

        .dropzone .dz-message {
            text-align: center;
            margin: 2em 0;
        }

        .dropzone .dz-preview {
            position: relative;
            display: inline-block;
            vertical-align: top;
            margin: 16px;
            min-height: 100px;
        }

            .dropzone .dz-preview:hover {
                z-index: 1000;
            }

                .dropzone .dz-preview:hover .dz-details {
                    opacity: 1;
                }

            .dropzone .dz-preview.dz-file-preview .dz-image {
                border-radius: 20px;
                background: #999;
                background: linear-gradient(to bottom, #eee, #ddd);
            }

            .dropzone .dz-preview.dz-file-preview .dz-details {
                opacity: 1;
            }

            .dropzone .dz-preview.dz-image-preview {
                background: white;
            }

                .dropzone .dz-preview.dz-image-preview .dz-details {
                    -webkit-transition: opacity 0.2s linear;
                    -moz-transition: opacity 0.2s linear;
                    -ms-transition: opacity 0.2s linear;
                    -o-transition: opacity 0.2s linear;
                    transition: opacity 0.2s linear;
                }

            .dropzone .dz-preview .dz-remove {
                font-size: 14px;
                text-align: center;
                display: block;
                cursor: pointer;
                border: none;
            }

                .dropzone .dz-preview .dz-remove:hover {
                    text-decoration: underline;
                }

            .dropzone .dz-preview:hover .dz-details {
                opacity: 1;
            }

            .dropzone .dz-preview .dz-details {
                z-index: 20;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                font-size: 13px;
                min-width: 100%;
                max-width: 100%;
                padding: 2em 1em;
                text-align: center;
                color: rgba(0, 0, 0, 0.9);
                line-height: 150%;
            }

                .dropzone .dz-preview .dz-details .dz-size {
                    margin-bottom: 1em;
                    font-size: 16px;
                }

                .dropzone .dz-preview .dz-details .dz-filename {
                    white-space: nowrap;
                }

                    .dropzone .dz-preview .dz-details .dz-filename:hover span {
                        border: 1px solid rgba(200, 200, 200, 0.8);
                        background-color: rgba(255, 255, 255, 0.8);
                    }

                    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                        .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
                            border: 1px solid transparent;
                        }

                    .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
                        background-color: rgba(255, 255, 255, 0.4);
                        padding: 0 0.4em;
                        border-radius: 3px;
                    }



            .dropzone .dz-preview .dz-image {
                overflow: hidden;
                position: relative;
                display: block;
                z-index: 1;
            }

                .dropzone .dz-preview .dz-image img {
                    display: block;
                }

            .dropzone .dz-preview.dz-success .dz-success-mark {
                -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
                -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
                -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
                -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
                animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
            }

            .dropzone .dz-preview.dz-error .dz-error-mark {
                opacity: 1;
                -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
                -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
                -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
                -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
                animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
            }

            .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
                pointer-events: none;
                opacity: 0;
                z-index: 500;
                position: absolute;
                display: block;
                top: 50%;
                left: 50%;
                margin-left: -27px;
                margin-top: -27px;
            }

                .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
                    display: block;
                    width: 54px;
                    height: 54px;
                }


            .dropzone .dz-preview.dz-error .dz-error-message {
                display: block;
            }

            .dropzone .dz-preview.dz-error:hover .dz-error-message {
                opacity: 1;
                pointer-events: auto;
            }

            .dropzone .dz-preview .dz-error-message {
                pointer-events: none;
                z-index: 1000;
                position: absolute;
                display: block;
                display: none;
                opacity: 0;
                -webkit-transition: opacity 0.3s ease;
                -moz-transition: opacity 0.3s ease;
                -ms-transition: opacity 0.3s ease;
                -o-transition: opacity 0.3s ease;
                transition: opacity 0.3s ease;
                border-radius: 8px;
                font-size: 13px;
                top: 130px;
                left: -10px;
                width: 140px;
                background: #be2626;
                background: linear-gradient(to bottom, #be2626, #a92222);
                padding: 0.5em 1.2em;
                color: white;
            }

                .dropzone .dz-preview .dz-error-message:after {
                    content: '';
                    position: absolute;
                    top: -6px;
                    left: 64px;
                    width: 0;
                    height: 0;
                    border-left: 6px solid transparent;
                    border-right: 6px solid transparent;
                    border-bottom: 6px solid #be2626;
                }

    span.photo-count {
        letter-spacing: 0px;
        color: #B0B6BA;
        font-size: 14px;
        line-height: 24px;
    }

    .photos-display {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }

        .photos-display .image-item {
            margin: 4px;
            width: auto;
            position: relative;
        }

            .photos-display .image-item img {
                width: 95px;
                height: 95px;
                border-radius: 5px;
                object-fit: cover;
            }

            .photos-display .image-item a {
                position: absolute;
                right: 3px;
                width: auto;
                height: auto;
                top: 0;
            }

                .photos-display .image-item a i {
                    font-size: 14px !important;
                    margin-bottom: 0;
                    line-height: 10px;
                    color: #7A7E83 !important;
                    background: rgb(255 255 255 / 70%);
                    font-size: 14px;
                    box-shadow: 0px 5px 20px #00000029;
                    line-height: 19px;
                    border-radius: 50%;
                    padding: 0px 6px;
                    text-decoration: none;
                    font-weight: 600 !important;
                    display: inline-block;
                    vertical-align: middle;
                }

    #accordionCustomersupport .accordion-heading {
        background: #FFF;
        border-radius: 0;
        padding: 20px 16px;
        border-bottom: none;
    }

    #accordionCustomersupport .card {
        border-radius: 0;
    }

        #accordionCustomersupport .card:nth-child(1),
        #accordionCustomersupport .card:nth-child(2) {
            /*border-bottom: none;*/
        }

        #accordionCustomersupport .card:nth-child(1) {
            border-radius: 5px 5px 0px 0px;
        }

        #accordionCustomersupport .card:nth-child(3) {
            border-radius: 0px 0px 5px 5px;
        }

    #accordionCustomersupport .accordion-heading h5 {
        letter-spacing: 0px;
        color: #223345;
        font-size: 13px;
        line-height: 16px;
        font-weight: 600;
        position: relative;
    }

    #accordionCustomersupport .accordion-pending h5 {
        color: #B0B6BA;
    }

    #accordionCustomersupport .accordion-pending span.location-status {
        letter-spacing: 0px;
        color: #B0B6BA;
        font-size: 12px;
        line-height: 16px;
        font-style: italic;
        font-weight: 400;
        border: 1px solid #DEE4EB;
        border-radius: 10px;
        padding: 2px 6px;
        margin-left: 10px;
    }

    #accordionCustomersupport .accordion-pending span.pausedLocation {
        color: #748A9D;
        font-size: 12px;
        line-height: 16px;
        font-weight: 400;
        font-style: italic;
        background: #DEE4EB 0% 0% no-repeat padding-box;
        border: 1px solid #DEE4EB;
        border-radius: 10px;
        padding: 2px 6px;
    }

    #accordionCustomersupport .card-body p.dl-loc {
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
        color: #000000;
        margin-bottom: 15px;
    }

    #accordionCustomersupport .card-body p,
    #accordionCustomersupport .card-body p a {
        font-size: 12px;
        letter-spacing: 0px;
        line-height: 20px;
        color: #223345;
        text-decoration: none;
        margin-bottom: 0;
    }

    #accordionCustomersupport .card .card-header h5:after {
        content: "\f107";
        font-family: "Font Awesome 6 Pro";
        color: #7A7E83;
        content: "\f106";
        position: absolute;
        right: 0;
    }

    #accordionCustomersupport .card .card-header h5.collapsed:after {
        content: "\f106";
        font-family: "Font Awesome 6 Pro";
        content: "\f107";
    }


    .inner-table-list {
        border: 1px solid #DEE4EB;
        border-radius: 5px;
        overflow-x: auto;
    }

        .inner-table-list table {
            width: 100%;
            overflow: auto;
        }

            .inner-table-list table tr {
                border-bottom: 1px solid #DEE4EB;
            }

                .inner-table-list table tr:last-child {
                    border-bottom: none;
                }

                .inner-table-list table tr.inactive-vessel-row td,
                .inner-table-list table tr.row-inactive td,
                .inner-table-list table tr.row-inactive td.more-action a.more-action-light-grey {
                    color: #DEE4EB !important;
                }

                    .inner-table-list table tr.row-inactive td,
                    .inner-table-list table tr.row-inactive td.more-action a.more-action-light-grey {
                        color: #B0B6BA !important;
                    }

            .inner-table-list table td {
                padding: 20px 16px;
            }

                .inner-table-list table td.td-tooltip {
                    position: relative;
                }

                .inner-table-list table td.vessel-name {
                    letter-spacing: 0px;
                    color: #223345;
                    font-size: 13px;
                    line-height: 16px;
                    font-weight: 600;
                }

            .inner-table-list table tr.inactive-pumpout-row td.vessel-name {
                color: #182E38;
                opacity: 0.5;
            }

            .inner-table-list table td.vessel-name span {
                margin-left: 11px;
            }

            .inner-table-list table tr.inactive-pumpout-row td.vessel-name span.grey-hightlight {
                color: #B0B6BA;
                background: #DEE4EB;
            }

            .inner-table-list table td span.inactive-vessel-text {
                letter-spacing: 0px;
                color: #748A9D;
                font-size: 12px;
                line-height: 16px;
                background: #DEE4EB;
                font-style: italic;
                border-radius: 10px;
                padding: 2px 6px;
            }

            .inner-table-list table td span.pendingLocation {
                border: 1px solid #DEE4EB;
                border-radius: 10px;
                letter-spacing: 0px;
                color: #B0B6BA;
                padding: 2px 6px;
                font-size: 12px;
                line-height: 16px;
                font-weight: 400;
                font-style: italic;
            }

            .inner-table-list table td span.pausedLocation {
                color: #748A9D;
                font-size: 12px;
                line-height: 16px;
                font-weight: 400;
                font-style: italic;
                background: #DEE4EB 0% 0% no-repeat padding-box;
                border: 1px solid #DEE4EB;
                border-radius: 10px;
                padding: 2px 6px;
            }

            .inner-table-list table td span.vessel-fuel {
                letter-spacing: 0px;
                color: #58AAFF;
                font-size: 12px;
                line-height: 16px;
                font-style: italic;
                background: #007BFF14;
                border-radius: 10px;
                padding: 2px 6px;
            }

            .inner-table-list table td.more-action ul.dropdown-menu.show {
                border-radius: 5px;
                display: block;
                background: #FFFFFF 0% 0% no-repeat padding-box;
                box-shadow: 0px 3px 6px #00000029;
                border: 1px solid #DEE4EB;
                position: relative;
            }


                .inner-table-list table td.more-action ul.dropdown-menu.show li a {
                    letter-spacing: 0px;
                    color: #748A9D;
                    font-size: 12px;
                    line-height: 24px;
                    padding: 0px 15px;
                }

            .inner-table-list table td.more-action a {
                color: #7A7E83;
                font-size: 16px;
                line-height: 24px;
            }

            .inner-table-list table td a.action-icon .active-action {
                width: 49px;
                height: 25px;
            }

            .inner-table-list table td .active-action {
                width: 46px;
                height: 25px;
                cursor: default;
            }

            .inner-table-list table td.service-fuel-cost {
                font-size: 12px;
                line-height: 22px;
                color: #182E38;
            }

            .inner-table-list table td input {
                cursor: default;
            }

            .inner-table-list table td a.action-icon input:checked + .slider:before {
                content: "";
            }

            .inner-table-list table td a.action-icon .active-action:before,
            .inner-table-list table td .active-action:before {
                height: 25px;
                width: 25px;
                content: "";
            }

            .inner-table-list table td a.add-vessel-btn {
                color: #182E38;
                text-decoration: none;
                font-size: 14px;
                line-height: 22px;
            }

                .inner-table-list table td a.add-vessel-btn i {
                    margin-right: 12px;
                }

    a.vessel-action-icon {
        display: inline-block;
        position: relative;
        text-decoration: none;
    }

        a.vessel-action-icon:hover:after {
            background: #748A9D;
            color: #fff;
            content: attr(title);
            margin: auto;
            font-size: 12px;
            padding: 16px;
            width: auto;
            border-radius: 5px;
        }

        a.vessel-action-icon:hover:before {
            border: solid;
            border-color: #748A9D transparent;
            border-width: 10px 6px 0 6px;
            content: "";
            right: 21px;
            top: 10px;
            position: absolute;
            transform: rotateX(180deg);
        }

    .select-loc-container {
        position: relative;
    }

        .select-loc-container:before {
            content: "\f124";
            font-family: 'Font Awesome 6 Pro';
            position: absolute;
            width: 32px;
            height: 32px;
            color: #007BFF;
            font-weight: bold;
            font-size: 20px;
            line-height: 18px;
            background: rgb(0 123 255 / 40%);
            border-radius: 5px;
            top: 9.5px;
            left: 12px;
            bottom: 9.5px;
            padding: 8px 6px;
            pointer-events: none;
        }

        .select-loc-container:after {
            content: "\f107";
            font-family: 'Font Awesome 6 Pro';
            position: absolute;
            color: #007BFF;
            font-size: 17px;
            line-height: 17px;
            top: 11px;
            right: 23px;
            bottom: 11px;
            padding: 8px 6px;
            pointer-events: none;
        }

    select.customerLoc {
        border: 1px solid #007BFF;
        color: #007BFF !important;
        font-weight: 600;
        text-indent: 47px;
        -webkit-appearance: none;
        -moz-appearance: none;
        width: 100%;
        outline: none;
        background-color: transparent;
    }

    .pending-location-more-information {
        flex: 0 0 20vw;
    }

        .pending-location-more-information .customer-info span.customer-icon-blue {
            color: #007BFF;
            font-size: 16px;
            border-radius: 50%;
            background: #BCE0FD;
            line-height: 16px;
            padding: 16px 20px;
        }

        .pending-location-more-information .customer-info h4 {
            letter-spacing: 0px;
            color: #252525;
            font-size: 18px;
            line-height: 24px;
            font-weight: 700;
            margin-top: 34px;
        }

        .pending-location-more-information .customer-info p {
            letter-spacing: 0px;
            color: #182E38;
            font-size: 12px;
            line-height: 16px;
        }

    .location-information {
        margin-top: 12px;
    }

        .location-information .customer-locations,
        .location-information .customer-vessels,
        .location-information .customer-location-photos {
            margin-top: 55px;
            position: relative;
        }

            .location-information .customer-locations:before,
            .location-information .customer-vessels:before,
            .location-information .customer-location-photos:before {
                background: #B0B6BA 0% 0% no-repeat padding-box;
                content: "";
                position: absolute;
                left: -20px;
                top: 4px;
                width: 9px;
                height: 9px;
                border-radius: 50%;
                display: inline-block;
                vertical-align: middle;
            }

            .location-information .customer-locations p,
            .location-information .customer-vessels p,
            .location-information .customer-location-photos p {
                letter-spacing: 0px;
                color: #223345;
                font-size: 13px;
                line-height: 16px;
                font-weight: 700;
                margin-bottom: 15px;
                position: relative;
            }

                .location-information .customer-locations p:before {
                    content: "";
                    position: absolute;
                    border-left: 1px solid rgb(176 182 186 / 60%);
                    left: -15px;
                    top: -20px;
                    height: 112%;
                }

            .location-information .customer-locations ul.cust-loc-list,
            .location-information .customer-vessels ul.cust-vessel-list,
            .location-information .customer-location-photos .pending-location-photodisplay {
                margin: auto;
                padding: 0;
                position: relative;
            }

                .location-information .customer-locations ul.cust-loc-list:before,
                .location-information .customer-vessels ul.cust-vessel-list:before,
                .location-information .customer-location-photos .pending-location-photodisplay:before {
                    content: "";
                    position: absolute;
                    border-left: 1px solid rgb(176 182 186 / 60%);
                    left: -15px;
                    top: -12px;
                    height: 100%;
                }
                .location-information .customer-locations ul.cust-loc-list li{
                    overflow-x: auto;
                    white-space: nowrap;
                }
                .location-information .customer-locations ul.cust-loc-list li,
                .location-information .customer-vessels ul.cust-vessel-list li {
                    list-style: none;
                    border: 1px solid #7A7E83;
                    margin-bottom: 12px;
                    padding: 21px 12px;
                    letter-spacing: 0.26px;
                    color: #7A7E83;
                    text-transform: uppercase;
                    font-size: 13px;
                    line-height: 16px;
                    font-weight: 700;
                    width: 100%;
                }

                    .location-information .customer-locations ul.cust-loc-list li.pendingLocation,
                    .location-information .customer-locations ul.cust-loc-list li.pausedLocation {
                        border: 1px solid #B0B6BA !important;
                        color: #B0B6BA !important;
                    }


                        .location-information .customer-locations ul.cust-loc-list li.pendingLocation span {
                            font-size: 12px;
                            line-height: 15px;
                            font-style: italic;
                            color: #7A7E83;
                            text-transform: capitalize;
                            padding: 2px 9px;
                            background: #E9EFF6;
                            border-radius: 10px;
                            font-weight: 400;
                            margin-left: 13px;
                        }

                        .location-information .customer-locations ul.cust-loc-list li.pausedLocation span {
                            font-size: 12px;
                            line-height: 15px;
                            font-style: italic;
                            color: #748A9D;
                            text-transform: capitalize;
                            padding: 2px 9px;
                            background: #DEE4EB;
                            border-radius: 10px;
                            font-weight: 400;
                            margin-left: 13px;
                        }

    .pending-location-more-information .customer-location-photos .pending-location-photodisplay {
        justify-content: flex-start;
        flex-wrap: initial;
    }

    .denied-alert {
        background: #FF656226 0% 0% no-repeat padding-box;
        border: 1px solid #FF6562;
        border-radius: 10px;
        padding: 16px;
        margin-bottom: 20px;
    }

        .denied-alert p {
            font-size: 14px !important;
            line-height: 20px !important;
            color: #EB3331 !important;
            font-weight: 700 !important;
        }

    .re-confirm-gps-link {
        margin-bottom: 20px;
    }

        .re-confirm-gps-link a {
            color: #007BFF;
            font-weight: 600;
        }

    .action-icon-tooltip {
        /*position: relative;
    width: 100%;*/
        display: inline-block;
        cursor: pointer;
    }

        .action-icon-tooltip span.tooltiptext {
            visibility: hidden;
            width: auto;
            background-color: #748A9D;
            color: #fff;
            padding: 10px 15px;
            border-radius: 5px;
            position: absolute;
            z-index: 1;
            font-size: 12px;
            line-height: 16px;
            margin-top: 10px;
        }

            .action-icon-tooltip span.tooltiptext:before {
                content: "";
                position: absolute;
                top: -6px;
                left: 10px;
                width: 12px;
                height: 12px;
                /* border-top: 1px solid #E2E6EA; */
                /* border-left: 1px solid #E2E6EA; */
                background-color: #748A9D;
                transform: rotate( 45deg );
            }

        .action-icon-tooltip:hover span.tooltiptext {
            visibility: visible;
        }



    /* CAPTAIN STYLING
----------------------------------------------------------
*/
    .tank-panel {
        min-height: 131px;
    }

    .territory-assigned-display {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        float: right;
    }

        .territory-assigned-display .display-assigned {
            width: 100%;
            background: #FFFFFF 0% 0% no-repeat padding-box;
            border: 1px solid #748A9D;
            padding: 19px 13px;
            margin: 0 15px;
        }

            .territory-assigned-display .display-assigned p {
                font-size: clamp(10px,1vw,13px);
                letter-spacing: 0.26px;
                color: #748A9D;
                text-transform: uppercase;
                line-height: 16px;
                font-weight: 700;
                margin-bottom: 0;
                position: relative;
            }

                .territory-assigned-display .display-assigned p:after {
                    content: "\f058";
                    font-family: 'Font Awesome 6 Pro';
                    position: absolute;
                    right: 0;
                    /* width: 20px; */
                    font-size: clamp(15px,1vw,20px);
                    /* line-height: 32px; */
                }

        .territory-assigned-display .territory-assigned-open {
            margin-left: 15px;
            margin-right: 30px;
        }

    .map-dashboard {
        margin-top: 15px;
    }

    h2.inner-container-header span.waypoints-completed-text {
        color: #223345;
        margin-left: 20px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
    }

    .form-style span.filter-dropdown-text {
        font-size: 13px;
        line-height: 16px;
        color: #748A9D;
        margin-right: 12px;
    }

    .form-style span.form-inline {
        display: inline-flex;
        white-space: nowrap;
        align-items: center;
    }

    .form-style select.form-select.filter-dropdown,
    .form-style select.form-select.filter-dropdown option {
        font-size: 16px;
        line-height: 20px;
        color: #748A9D !important;
        width: 240px;
    }

    table td.col-view-waypoint ul.dropdown-menu.show {
        border-radius: 5px;
        display: block;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        box-shadow: 0px 3px 6px #00000029;
        border: 1px solid #DEE4EB;
        position: relative;
    }

        table td.col-view-waypoint ul.dropdown-menu.show:before {
            content: "";
            position: absolute;
            top: -7px;
            right: 10px;
            width: 12px;
            height: 12px;
            border-top: 1px solid #E2E6EA;
            border-left: 1px solid #E2E6EA;
            background-color: #fff;
            transform: rotate( 45deg );
        }

    table td.col-view-waypoint ul.dropdown-menu a {
        font-size: 12px;
        line-height: 20px;
        color: #748A9D;
    }

    .table.waypoint-list td.dt-body-center {
        text-align: left;
    }

        .table.waypoint-list td.dt-body-center input[type="checkbox"] {
            width: 20px;
            height: 20px;
            border: 1px solid #cfdde9 !important;
            border-radius: 2px;
        }

    .btn-send-notice {
        margin-top: 30px;
    }

    .btn-notice {
        margin-right: 10px;
    }

    #locationModal .modal-dialog {
        width: 100%;
        max-width: 100%;
        margin: auto;
    }

    #locationModal .locationModelbody {
        padding: 40px 35px;
    }

    #locationModal .modal-message {
        padding: 0 35px;
    }

    #locationModal .locationModelbody .form-container-modal {
        margin-top: 0;
    }

    .location-information-section,
    .vessel-information,
    .inactive-vessel-information {
        padding: 20px 20px 30px 10px;
    }

        .location-information-section h2,
        .vessel-information h2,
        .inactive-vessel-information h2 {
            margin-bottom: 10px;
            font-size: 20px;
            line-height: 24px;
            font-weight: 700;
            color: #223345;
        }

    #location .card,
    #vessel .card,
    #inactive-vessel .card {
        margin-bottom: 12.5px;
        border: 0;
        border-radius: 0;
    }

        #location .card .card-header,
        #vessel .card .card-header,
        #inactive-vessel .card .card-header {
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
            border-radius: 0;
            padding: 0;
            background-color: #FFF;
        }

            #location .card .card-header .btn-header-link,
            #vessel .card .card-header .btn-header-link,
            #inactive-vessel .card .card-header .btn-header-link {
                display: block;
                text-align: left;
                padding: 20px;
                background: #FFFFFF 0% 0% no-repeat padding-box;
                border: 1px solid #CFDDE9;
                border-radius: 5px 5px 0 0;
                font-size: 18px;
                line-height: 24px;
                font-weight: 700;
                outline: none;
            }

            #location .card .card-header .btn-header-link,
            #vessel .card .card-header .btn-header-link {
                color: #223345;
            }

            #inactive-vessel .card .card-header .btn-header-link,
            #inactive-vessel .card .card-header .btn-header-link:after,
            #inactive-vessel .card .card-header .btn-header-link.collapsed:after {
                color: #748A9D;
            }

                #location .card .card-header .btn-header-link:focus,
                #location .card .card-header .btn-header-link:visited,
                #vessel .card .card-header .btn-header-link:focus,
                #vessel .card .card-header .btn-header-link:visited,
                #inactive-vessel .card .card-header .btn-header-link:focus,
                #inactive-vessel .card .card-header .btn-header-link:visited {
                    outline: none;
                    box-shadow: none;
                }

                #location .card .card-header .btn-header-link:after,
                #vessel .card .card-header .btn-header-link:after,
                #inactive-vessel .card .card-header .btn-header-link:after {
                    content: "\f105";
                    font-family: 'Font Awesome 6 Pro';
                    font-weight: 400;
                    float: right;
                    content: "\f107";
                }

                #location .card .card-header .btn-header-link.collapsed:after,
                #vessel .card .card-header .btn-header-link.collapsed:after,
                #inactive-vessel .card .card-header .btn-header-link.collapsed:after {
                    content: "\f107";
                    font-family: 'Font Awesome 6 Pro';
                    content: "\f105";
                }

                #location .card .card-header .btn-header-link.collapsed,
                #vessel .card .card-header .btn-header-link.collapsed,
                #inactive-vessel .card .card-header .btn-header-link.collapsed {
                    border: 1px solid #CFDDE9;
                }



        #location .card .collapse,
        #vessel .card .collapse,
        #inactive-vessel .card .collapse {
            border: 0;
        }

            #location .card .collapse.show,
            #vessel .card .collapse.show,
            #inactive-vessel .card .collapse.show {
                background: #FFF;
                line-height: 30px;
                color: #223345;
                border: 1px solid #CFDDE9;
                border-radius: 0 0 5px 5px;
                border-top: none;
            }

    span.vessel-text-grey {
        font: italic normal normal 16px/24px Inter;
        letter-spacing: 0px;
        color: #748A9D;
        margin: 0 6px 0 10px;
    }

    #inactive-vessel-information span.vessel-text-grey {
        color: #CFDDE9;
    }

    span.modal-location-status {
        font-size: 16px;
        line-height: 16px;
        font-weight: 700;
        border-radius: 12px;
        padding: 4px 9px;
        margin-left: 12px;
    }

    .location-active {
        color: #252525;
        background: #FBAD18 0% 0% no-repeat padding-box;
    }

    .location-pause {
        color: #FFF;
        background: #007BFF 0% 0% no-repeat padding-box;
    }

    .location-completed {
        color: #FFF;
        background: #748A9D 0% 0% no-repeat padding-box;
    }



    span.vessel-count-blue {
        font-size: 14px;
        line-height: 12px;
        color: #FFFFFF;
        font-weight: 600;
        background: #58AAFF 0% 0% no-repeat padding-box;
        border-radius: 14px;
        padding: 1px 9px;
        margin-left: 6px;
    }

    span.vessel-count-grey {
        border: 1px solid #B0B6BA;
        border-radius: 12px;
        font-size: 14px;
        line-height: 12px;
        padding: 1px 9px;
        margin-left: 6px;
        font-weight: 600;
        color: #B0B6BA;
    }

    p.transaction-time {
        margin-top: 30px;
        font-size: 16px;
        line-height: 20px;
        color: #748A9D;
        font-style: italic;
        font-weight: 400;
    }

    ul.customer-contact-info {
        padding-left: 0;
        margin-top: 40px;
    }

        ul.customer-contact-info li {
            list-style: none;
            margin: 17px 0;
        }

            ul.customer-contact-info li a {
                font-size: 16px;
                line-height: 26px;
                color: #12232B;
                margin-left: 6px;
                text-decoration: none;
            }

            ul.customer-contact-info li i {
                color: #7A7E83;
                font-size: 18px;
            }

            ul.customer-contact-info li a.modal-email-link {
                text-decoration: underline;
            }

    .vessel-detail {
        /*overflow-x: auto;*/
    }

        .vessel-detail table th.colheader-bold {
            font-size: 14px;
            line-height: 16px;
            color: #182E38;
            padding: 13px 25px;
            white-space: nowrap;
        }

        .vessel-detail table td {
            font-size: 16px;
            line-height: 16px;
            color: #182E38;
            padding: 10px 13px;
            white-space: nowrap;
        }

        .vessel-detail table th.colheader-bold,
        .vessel-detail table td {
            border-bottom: 1px solid rgb(207 221 233 / 50%);
        }

    .photos-display-modal,
    .photos-display-modal-inactive {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        margin-top: 10px;
    }

        .photos-display-modal .image-item,
        .photos-display-modal-inactive .image-item {
            margin: 6px;
            width: auto;
            position: relative;
        }

            .photos-display-modal .image-item img,
            .photos-display-modal-inactive .image-item img {
                width: 127px;
                height: 127px;
                border-radius: 5px;
                object-fit: cover;
            }

    #locationModal #vessel .card-body,
    #locationModal #inactive-vessel .card-body {
        overflow-x: auto;
    }

    .locationModelbody #vessel .card-body::-webkit-scrollbar,
    .locationModelbody #inactive-vessel .card-body::-webkit-scrollbar {
        background-color: #F5F5F5;
        height: 10px;
    }

    .locationModelbody #vessel .card-body::-webkit-scrollbar-thumb,
    .locationModelbody #inactive-vessel .card-body::-webkit-scrollbar-thumb {
        background-color: #58AAFF;
        background-image: -webkit-linear-gradient( 90deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    }

    .locationModelbody #vessel.card-body::-webkit-scrollbar-track,
    .locationModelbody #inactive-vessel.card-body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
        background-color: #F5F5F5;
    }
    /** SWEET ALERT **/
    .swal2-styled.swal2-confirm {
        background-color: #007BFF !important;
        margin: 0 !important;
        background: #007BFF !important;
        outline: none !important;
    }

        .swal2-styled.swal2-confirm:focus,
        .swal2-styled.swal2-confirm:focus-visible,
        .swal2-styled.swal2-confirm:focus-within,
        .swal2-styled.swal2-confirm:visited,
        .swal2-styled.swal2-confirm:active,
        .swal2-styled.swal2-confirm :target {
            outline: none !important;
            box-shadow: none !important;
        }

div.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(16 16 16 / 18%);
    z-index: 99999;
}

    div.loading div.spinner-border {
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }