.logisticselect .select2-container .selection .select2-selection,
        .dutyselect .select2-container .selection .select2-selection {
            height: 33px !important;
        }

        .select2-selection[aria-disabled="true"] {
            cursor: not-allowed !important
        }

        .li-hover:hover {
            background-color: #f8f9fa !important;
        }

        .dropdown-list li:hover,.organisation-list:hover  {
            color: #16181b;
            text-decoration: none;
            background-color: #f8f9fa;
            cursor: pointer;
        }

        .company-name-class {
            cursor: pointer;
        }

        .company-name-class:hover {
            text-decoration: none;
        }

        .taptap-disappear {
            display: none;
        }

        a:link,
        a:visited {
            color: #736cc7
        }

        a.default-color,
        a.default-color:link,
        a.default-color:visited {
            color: #617182
        }

        a.default-color:active,
        a.default-color:hover,
        a:active,
        a:hover {
            color: #8c86d1
        }

        a.accent:link,
        a.accent:visited {
            color: #F64A91
        }

        a.accent:active,
        a.accent:hover {
            color: #f53282
        }

        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            color: #4d5a68
        }

        p {
            color: #617182
        }

        hr {
            border-top: 1px solid #f0f6ff
        }

        hr.dashed {
            border-top: 1px dashed #d7e7ff
        }

        hr.thick {
            border-width: 2px
        }

        hr.thicker {
            border-width: 3px
        }

        .brand-primary {
            background-color: #736cc7 !important
        }

        .brand-accent {
            background-color: #F64A91 !important
        }

        .bg-primary {
            background-color: #736cc7 !important
        }

        .bg-primary .bg-lt,
        .bg-primary.bg-lt {
            background-color: #857ece !important
        }

        .bg-primary .bg-dk,
        .bg-primary.bg-lt {
            background-color: #615ac0 !important
        }

        .progress_main {
            opacity: 0.99;
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            padding: 0px;
            left: 0px !important;
        }

        .ex-style {
            padding: 5px 10px;
            border-radius: 25px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            -ms-border-radius: 25px;
            -o-border-radius: 25px;
        }

        .view-pass {
            position: relative;
        }

        .poss-a {
            position: absolute;
            top: 6px;
            right: 10px;
        }

        .login-model {
            background: #f4f4f4;
            border-radius: 20px;
            box-shadow: 1px 1px 15px #00000069;
        }

        .color-w {
            color: #000;
        }

        .login-icon {
            width: 20%;
        }

        .map-styl {
            position: relative;
            width: 100%;
            height: 300px;
        }

        .bg-accent {
            background-color: #F64A91 !important
        }

        .bg-accent .bg-lt,
        .bg-accent.bg-lt {
            background-color: #f762a0 !important
        }

        .bg-accent .bg-dk,
        .bg-accent.bg-lt {
            background-color: #f53282 !important
        }

        a.bg-accent:focus,
        a.bg-accent:hover {
            background-color: #0062cc !important
        }

        .text-primary {
            color: #736cc7 !important
        }

        .text-accent {
            color: #F64A91 !important
        }

        .swatch.swatch-color_primary {
            background-color: #736cc7
        }

        .swatch.swatch-color_accent {
            background-color: #F64A91
        }

        /* Milestone section */

        .wizard-dec {
            padding: 0px !important;
            margin-top: 35px !important;
        }

        .wizard-dec li {
            list-style: none;
            display: inline-block;
        }

        .back-mg-building {
            background-image: url(../../../../../building.png);
            border-radius: 50%;
            display: inline-block;
            height: 30px;
            line-height: 40px;
            position: relative;
            text-align: center;
            width: 30px;
            z-index: 1;
            background-size: cover;
        }

        .back-mg-ship {
            background-image: url(../../../../../icon.png);
            border-radius: 50%;
            display: inline-block;
            height: 30px;
            line-height: 40px;
            position: relative;
            text-align: center;
            width: 30px;
            z-index: 1;
            background-size: cover;
        }

        .brder-dot-small-grey {
            border: 1px dashed#cfd4d9;
            max-width: 25px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        .brder-dot-small-blue {
            border: 1px dashed#004d9a;
            max-width: 25px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        .brder-dot-large-blue {
            border: 1px dashed#004d9a;
            max-width: 110px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        .brder-dot-large-grey {
            border: 1px dashed#cfd4d9;
            max-width: 110px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        .brder-solid-blue {
            border: 1px solid#004d9a;
            max-width: 110px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        .brder-solid-grey {
            border: 1px solid#cfd4d9;
            max-width: 110px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        /* tagging style */

        body .top-toolbar.navbar-desktop {
            background: #fff
        }

        body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a,
        body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a i {
            color: #788db4
        }

        body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:hover,
        body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:hover i {
            color: #6760d5
        }

        body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:hover i.icon:after {
            background-color: rgba(240, 246, 255, .7)
        }

        body .top-toolbar.navbar-desktop .dropdown-menu ul li:hover {
            color: #736cc7 !important
        }

        body .top-toolbar.navbar-desktop .dropdown-menu ul li:hover a {
            color: #736cc7
        }

        body .top-toolbar.navbar-desktop .dropdown-menu ul li a {
            color: #617182;
            display: block
        }

        @media (max-width:992px) {
            body .top-toolbar.navbar-desktop {
                background-color: #fff
            }

            body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a,
            body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a>i {
                color: #788db4
            }

            body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:active,
            body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:active i,
            body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:hover,
            body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:hover i {
                color: #736cc7
            }

            body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:active i.icon:after,
            body .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:hover i.icon:after {
                background-color: rgba(240, 246, 255, .7)
            }

            body .top-toolbar.navbar-desktop .dropdown-menu ul li:hover {
                color: #736cc7 !important
            }

            body .top-toolbar.navbar-desktop .dropdown-menu ul li:hover a {
                color: #736cc7
            }

            body .top-toolbar.navbar-desktop .dropdown-menu ul li a {
                color: #617182;
                display: block
            }
        }

        body .aside-toolbar,
        body .top-toolbar.navbar-mobile.navbar-tablet {
            background-color: #004d9a
        }

        body .top-toolbar.navbar-mobile.navbar-tablet .navbar-nav .nav-item>a {
            color: #fff
        }

        body .top-toolbar.navbar-mobile.navbar-tablet .navbar-nav .nav-item>a:active,
        body .top-toolbar.navbar-mobile.navbar-tablet .navbar-nav .nav-item>a:focus,
        body .top-toolbar.navbar-mobile.navbar-tablet .navbar-nav .nav-item>a:hover,
        body .top-toolbar.navbar-mobile.navbar-tablet .navbar-nav .nav-item>a>i,
        body .top-toolbar.navbar-mobile.navbar-tablet .navbar-nav .nav-item>a>i:active,
        body .top-toolbar.navbar-mobile.navbar-tablet .navbar-nav .nav-item>a>i:focus,
        body .top-toolbar.navbar-mobile.navbar-tablet .navbar-nav .nav-item>a>i:hover {
            color: #fff !important
        }

        body .header-controls .btn-menu i {
            color: #788db4
        }

        body .header-controls .btn-menu:hover i {
            color: #6760d5
        }

        body .site-logo .logo #logo_path,
        body .site-logo .logo_mobile #logo_path {
            fill: url(#logo_background_color)
        }

        body .site-logo .logo #logo_path_mobile,
        body .site-logo .logo_mobile #logo_path_mobile {
            fill: url(#logo_background_mobile_color)
        }

        body .site-logo .logo .stop1,
        body .site-logo .logo .stop2,
        body .site-logo .logo .stop3,
        body .site-logo .logo_mobile .stop1,
        body .site-logo .logo_mobile .stop2,
        body .site-logo .logo_mobile .stop3 {
            stop-color: #736cc7;
            stop-opacity: 1
        }

        body .brand-text {
            color: #fff
        }

        body .sidebar-left,
        body .sidebar-left .sidebar-content {
            background-color: #004d9a
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .sidebar-header {
            color: rgba(120, 141, 180, .6)
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.nav-dropdown>ul>li.nav-dropdown>ul>li>a,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.nav-dropdown>ul>li.nav-dropdown>ul>li>a>i,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li>a,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li>a>i {
            color: #788db4
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu li a:hover,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu li a:hover i {
            color: #fff !important
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu .open>a,
        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu .open>a:focus,
        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu .open>a:hover,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.active>a,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.active>a>i,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.nav-dropdown.active>ul>li.nav-dropdown.active>ul>li.active>a,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.nav-dropdown>ul>li.nav-dropdown>ul>li>a:hover,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li>a:active,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li>a:hover {
            color: #fff;
            background-color: transparent
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu>li>a:focus {
            background-color: #161931
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu>li>a:hover {
            background-color: #fff
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu .nav-sub {
            background-color: transparent
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu .nav-sub li>a,
        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu .nav-sub li>a>i {
            color: #788db4
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu .nav-sub li a:hover,
        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu>li>.nav-sub li a:hover,
        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu>li>.nav-sub li.active a,
        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu>li>.nav-sub li.active a:hover,
        body.compact-menu .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li:hover>a,
        body.compact-menu .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li:hover>a>i {
            color: #fff
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.active>a,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.active>a:focus,
        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.active>a:hover {
            color: #fff;
            background-color: transparent;
            background-size: 3px 100%;
            border-left: solid 3px #736cc7
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>.nav-dropdown.active>a {
            background-color: transparent;
            background-size: 3px 100%;
            border-left: solid 3px #736cc7
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>.nav-dropdown.active>.nav-sub {
            background: linear-gradient(180deg, #736cc7 25%, #736cc7 50%, #736cc7 75%, #736cc7 100%) left bottom no-repeat #161931;
            background-size: 3px 100%
        }

        body.compact-menu .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li:hover>ul {
            background: #161931 !important;
            border-left: solid thin #0a0c19
        }

        body.compact-menu .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li:hover>ul li a {
            color: #788db4
        }

        .alert.alert-primary,
        body.compact-menu .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.active ul li.active>a,
        body.compact-menu .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li:hover>ul li a:hover {
            color: #fff
        }

        body.compact-menu .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li.active>a {
            background: #736cc7 !important;
            color: #fff
        }

        @media (max-width:991.98px) {
            body.overlay-menu .brand-text {
                color: #fff
            }
        }

        body.content-menu .sidebar.sidebar-left {
            background: #161931 !important
        }

        body.content-menu .sidebar.sidebar-left .sidebar-content {
            background: 0 0
        }

        .alert.alert-primary {
            background-color: #736cc7;
            border-color: #736cc7
        }

        .alert.alert-primary.alert-outline {
            background-color: #fff;
            color: #736cc7
        }

        .alert.alert-primary.alert-outline .alert-link {
            color: #736cc7;
            border-bottom: dotted 1px rgba(115, 108, 199, .85)
        }

        .alert.alert-primary.alert-outline .alert-link:hover {
            color: #736cc7;
            border-bottom: none
        }

        .alert.alert-primary.alert-outline .icon i {
            color: #736cc7
        }

        .alert.alert-primary.alert-outline.alert-dismissible .close {
            color: rgba(115, 108, 199, .85)
        }

        .select-time .modal-dialog {
            width: 520px;
            /* max-width: 700px; */
        }

        .alert.alert-primary.alert-outline.alert-dismissible .close:hover:before {
            content: "";
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: rgba(115, 108, 199, .125);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 11px
        }

        .alert.alert-accent {
            background-color: #F64A91;
            border-color: #F64A91;
            color: #fff
        }

        .alert.alert-accent.alert-outline {
            background-color: #fff;
            color: #F64A91
        }

        .alert.alert-accent.alert-outline .alert-link {
            color: #F64A91;
            border-bottom: dotted 1px rgba(246, 74, 145, .85)
        }

        .alert.alert-accent.alert-outline .alert-link:hover {
            color: #f64a91;
            border-bottom: none
        }

        .alert.alert-accent.alert-outline .icon i {
            color: #F64A91
        }

        .alert.alert-accent.alert-outline.alert-dismissible .close {
            color: rgba(246, 74, 145, .85)
        }

        .alert.alert-accent.alert-outline.alert-dismissible .close:hover {
            color: #f64a91
        }

        .alert.alert-accent.alert-outline.alert-dismissible .close:hover:before {
            content: "";
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: rgba(246, 74, 145, .125);
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 11px
        }

        .badge.badge-primary {
            background-color: #736cc7;
            color: rgba(255, 255, 255, .85)
        }

        .badge.badge-primary[href]:focus,
        .badge.badge-primary[href]:hover {
            text-decoration: none;
            background-color: #857ece !important;
            color: #fff
        }

        .badge.badge-accent {
            background-color: #F64A91;
            color: rgba(255, 255, 255, .85)
        }

        .badge.badge-accent[href]:focus,
        .badge.badge-accent[href]:hover {
            text-decoration: none;
            background-color: #f762a0 !important;
            color: #fff
        }

        .btn-primary,
        a.btn-primary,
        a:visited.btn-primary a:link.btn-primary {
            background-color: #736cc7;
            border: 1px solid #736cc7;
            color: rgba(255, 255, 255, .9)
        }

        .btn-primary:hover,
        a.btn-primary:hover,
        a:visited.btn-primary a:link.btn-primary:hover {
            background-color: #6861c3 !important;
            border: 1px solid #6861c3 !important;
            box-shadow: 0 5px 10px rgba(115, 108, 199, .4) !important;
            color: #fff
        }

        .btn-primary:active,
        a.btn-primary:active,
        a:visited.btn-primary a:link.btn-primary:active {
            background-color: #7770c8 !important;
            border: 1px solid #7770c8 !important;
            color: #fff !important;
            box-shadow: none !important
        }

        .btn-primary:focus,
        a.btn-primary:focus,
        a:visited.btn-primary a:link.btn-primary:focus {
            background-color: #736cc7;
            border: 1px solid #736cc7;
            color: #fff !important;
            box-shadow: none !important
        }

        .btn-primary.btn-floating,
        a.btn-primary.btn-floating,
        a:visited.btn-primary a:link.btn-primary.btn-floating {
            box-shadow: 0 5px 10px rgba(115, 108, 199, .4) !important
        }

        .btn-primary.btn-floating:active,
        .btn-primary.btn-floating:hover,
        a.btn-primary.btn-floating:active,
        a.btn-primary.btn-floating:hover,
        a:visited.btn-primary a:link.btn-primary.btn-floating:active,
        a:visited.btn-primary a:link.btn-primary.btn-floating:hover {
            box-shadow: 0 15px 20px rgba(115, 108, 199, .4) !important
        }

        .btn-primary.btn-outline,
        a.btn-primary.btn-outline,
        a:visited.btn-primary a:link.btn-primary.btn-outline {
            background-color: #fff;
            color: #736cc7;
            border: 1px solid #736cc7
        }

        .btn-primary.btn-outline:focus,
        a.btn-primary.btn-outline:focus,
        a:visited.btn-primary a:link.btn-primary.btn-outline:focus {
            background-color: #fff !important;
            color: #736cc7 !important
        }

        .btn-primary.btn-outline:active,
        .btn-primary.btn-outline:hover,
        a.btn-primary.btn-outline:active,
        a.btn-primary.btn-outline:hover,
        a:visited.btn-primary a:link.btn-primary.btn-outline:active,
        a:visited.btn-primary a:link.btn-primary.btn-outline:hover {
            color: #fff !important;
            background-color: #736cc7 !important
        }

        .btn-primary.disabled,
        .btn-primary:disabled {
            color: #fff;
            background-color: rgba(115, 108, 199, .85);
            border-color: rgba(115, 108, 199, .85)
        }

        .btn-primary:not(:disabled):not(.disabled).active,
        .btn-primary:not(:disabled):not(.disabled):active,
        .show>.btn-primary.dropdown-toggle {
            background-color: #736cc7;
            border: 1px solid #736cc7;
            color: rgba(255, 255, 255, .9)
        }

        .btn-accent,
        a.btn-accent,
        a:link.btn-accent,
        a:visited.btn-accent {
            background-color: #F64A91;
            border: 1px solid #F64A91;
            color: rgba(255, 255, 255, .9)
        }

        .btn-accent:hover,
        a.btn-accent:hover,
        a:link.btn-accent:hover,
        a:visited.btn-accent:hover {
            background-color: #f53b88 !important;
            border: 1px solid #f53b88 !important;
            box-shadow: 0 5px 10px rgba(246, 74, 145, .4) !important;
            color: #fff
        }

        .btn-accent:active,
        a.btn-accent:active,
        a:link.btn-accent:active,
        a:visited.btn-accent:active {
            background-color: #f64f94 !important;
            border: 1px solid #f64f94 !important;
            color: #fff !important;
            box-shadow: none !important
        }

        .btn-accent:focus,
        a.btn-accent:focus,
        a:link.btn-accent:focus,
        a:visited.btn-accent:focus {
            background-color: #F64A91;
            border: 1px solid #F64A91;
            color: #fff !important;
            box-shadow: none !important
        }

        .btn-accent.btn-floating,
        a.btn-accent.btn-floating,
        a:link.btn-accent.btn-floating,
        a:visited.btn-accent.btn-floating {
            box-shadow: 0 5px 10px rgba(246, 74, 145, .4) !important
        }

        .btn-accent.btn-floating:active,
        .btn-accent.btn-floating:focus,
        .btn-accent.btn-floating:hover,
        a.btn-accent.btn-floating:active,
        a.btn-accent.btn-floating:focus,
        a.btn-accent.btn-floating:hover,
        a:link.btn-accent.btn-floating:active,
        a:link.btn-accent.btn-floating:focus,
        a:link.btn-accent.btn-floating:hover,
        a:visited.btn-accent.btn-floating:active,
        a:visited.btn-accent.btn-floating:focus,
        a:visited.btn-accent.btn-floating:hover {
            box-shadow: 0 15px 20px rgba(246, 74, 145, .4) !important
        }

        .btn-accent.btn-outline,
        a.btn-accent.btn-outline,
        a:link.btn-accent.btn-outline,
        a:visited.btn-accent.btn-outline {
            background-color: #fff;
            color: #F64A91
        }

        .btn-accent.btn-outline:focus,
        a.btn-accent.btn-outline:focus,
        a:link.btn-accent.btn-outline:focus,
        a:visited.btn-accent.btn-outline:focus {
            background-color: #fff !important;
            color: #F64A91 !important
        }

        .btn-accent.btn-outline:active,
        .btn-accent.btn-outline:hover,
        a.btn-accent.btn-outline:active,
        a.btn-accent.btn-outline:hover,
        a:link.btn-accent.btn-outline:active,
        a:link.btn-accent.btn-outline:hover,
        a:visited.btn-accent.btn-outline:active,
        a:visited.btn-accent.btn-outline:hover {
            color: #fff !important;
            background-color: #F64A91 !important
        }

        .btn-accent.disabled,
        .btn-accent:disabled {
            color: #fff;
            background-color: rgba(246, 74, 145, .85);
            border-color: rgba(246, 74, 145, .85)
        }

        .btn-accent:not([disabled]):not(.disabled).active,
        .btn-accent:not([disabled]):not(.disabled):active,
        .show>.btn-accent.dropdown-toggle {
            background-color: #F64A91;
            border: 1px solid #F64A91;
            color: rgba(255, 255, 255, .9)
        }

        .btn.btn-icon i {
            font-size: 1.25rem
        }

        .btn.btn-icon.btn-accent i,
        .btn.btn-icon.btn-primary i,
        .btn.btn-icon.btn-secondary i {
            color: #fff
        }

        .icon-rounded {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: relative;
            text-align: center
        }

        .dropdown.show .dropdown-icon.dropdown-accent:before,
        .dropdown.show .dropdown-icon.dropdown-primary:before {
            content: '';
            position: absolute;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            left: 0;
            top: -2px
        }

        .icon-rounded i {
            font-size: 24px;
            padding-top: 12px
        }

        .icon-rounded.icon-rounded-primary {
            background-color: rgba(115, 108, 199, .4)
        }

        .icon-rounded.icon-rounded-primary i {
            color: #736cc7
        }

        .icon-rounded.icon-rounded-accent {
            background-color: rgba(246, 74, 145, .4)
        }

        .icon-rounded.icon-rounded-accent i {
            color: #F64A91
        }

        .list-group-item-primary {
            color: #eeedf8;
            background-color: #736cc7
        }

        .list-group-item-accent {
            color: #fef4f8;
            background-color: #F64A91
        }

        .dropdown .dropdown-menu .dropdown-header,
        .dropleft .dropdown-menu .dropdown-header,
        .dropright .dropdown-menu .dropdown-header,
        .dropup .dropdown-menu .dropdown-header {
            color: #4d5a68;
            border-bottom: 1px solid rgba(234, 243, 253, .7)
        }

        .dropdown .dropdown-menu .dropdown-item,
        .dropleft .dropdown-menu .dropdown-item,
        .dropright .dropdown-menu .dropdown-item,
        .dropup .dropdown-menu .dropdown-item {
            color: #839bb3
        }

        .dropdown .dropdown-menu .dropdown-item .dropdown-item i,
        .dropleft .dropdown-menu .dropdown-item .dropdown-item i,
        .dropright .dropdown-menu .dropdown-item .dropdown-item i,
        .dropup .dropdown-menu .dropdown-item .dropdown-item i {
            padding-right: .9375rem
        }

        .nav-pills.nav-pills-accent .nav-link.btn-floating,
        .nav-pills.nav-pills-primary .nav-link.btn-floating {
            padding: 10px 25px;
            border-radius: 50px
        }

        .dropdown .dropdown-menu .dropdown-item.active,
        .dropdown .dropdown-menu .dropdown-item:active,
        .dropdown .dropdown-menu .dropdown-item:focus,
        .dropdown .dropdown-menu .dropdown-item:hover,
        .dropleft .dropdown-menu .dropdown-item.active,
        .dropleft .dropdown-menu .dropdown-item:active,
        .dropleft .dropdown-menu .dropdown-item:focus,
        .dropleft .dropdown-menu .dropdown-item:hover,
        .dropright .dropdown-menu .dropdown-item.active,
        .dropright .dropdown-menu .dropdown-item:active,
        .dropright .dropdown-menu .dropdown-item:focus,
        .dropright .dropdown-menu .dropdown-item:hover,
        .dropup .dropdown-menu .dropdown-item.active,
        .dropup .dropdown-menu .dropdown-item:active,
        .dropup .dropdown-menu .dropdown-item:focus,
        .dropup .dropdown-menu .dropdown-item:hover {
            background-color: rgba(231, 241, 253, .2);
            color: #736cc7 !important
        }

        .dropdown .dropdown-menu .dropdown-item.active i,
        .dropdown .dropdown-menu .dropdown-item:active i,
        .dropdown .dropdown-menu .dropdown-item:focus i,
        .dropdown .dropdown-menu .dropdown-item:hover i,
        .dropleft .dropdown-menu .dropdown-item.active i,
        .dropleft .dropdown-menu .dropdown-item:active i,
        .dropleft .dropdown-menu .dropdown-item:focus i,
        .dropleft .dropdown-menu .dropdown-item:hover i,
        .dropright .dropdown-menu .dropdown-item.active i,
        .dropright .dropdown-menu .dropdown-item:active i,
        .dropright .dropdown-menu .dropdown-item:focus i,
        .dropright .dropdown-menu .dropdown-item:hover i,
        .dropup .dropdown-menu .dropdown-item.active i,
        .dropup .dropdown-menu .dropdown-item:active i,
        .dropup .dropdown-menu .dropdown-item:focus i,
        .dropup .dropdown-menu .dropdown-item:hover i {
            color: #736cc7
        }

        .page-header .actions>.dropdown>a {
            border-color: transparent !important;
            background-color: #fff
        }

        .page-header .actions>.dropdown>a:active,
        .page-header .actions>.dropdown>a:hover {
            background-color: #736cc7 !important;
            color: #fff
        }

        .page-header .actions>.dropdown.show>a {
            background-color: #736cc7;
            color: #fff
        }

        .page-header .actions.open>a>i,
        .page-header .actions>.dropdown.show>a>i,
        .page-header .actions>a:hover>i,
        .page-header .actions>li.open>a>i,
        .page-header .actions>li>a:hover>i {
            color: #fff
        }

        .dropdown .dropdown-icon {
            text-align: center;
            vertical-align: middle
        }

        .dropdown.show .dropdown-icon.dropdown-primary i {
            color: #736cc7
        }

        .dropdown.show .dropdown-icon.dropdown-primary:before {
            background-color: rgba(115, 108, 199, .4)
        }

        .dropdown.show .dropdown-icon.dropdown-accent i {
            color: #F64A91
        }

        .tile-accent:hover,
        .tile-accent:hover i,
        .tile-primary:hover,
        .tile-primary:hover i {
            color: #fff !important
        }

        

        span.select2-container.select2-container--default.select2-container--open .modaldropdown , span.select2-container.select2-container--default.select2-container--open .modaldropdown-status{
            z-index: 9999999999 !important;
            box-shadow: 2px 11px 10px #c1c1c1 !important;
        }
        .modaldropdown .select2-results ul li::before,  .modaldropdown-status .select2-results ul li::before{
            background: none;
        }
        .modaldropdown .select2-results ul li,.modaldropdown-status .select2-results ul li{
            background: rgb(255, 255, 255);
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 400;
            color: gray;

        }
        .modaldropdown .select2-results ul li:hover ,.modaldropdown-status .select2-results ul li:hover{
            background: #f8f9fa !important;
            color: #141313;
        }
        .select2-container--default .modaldropdown .select2-results__option--selected, .select2-container--default .modaldropdown-status .select2-results__option--selected{
            color: rgb(0, 0, 0) !important;
            background: #e6e6e6 !important;
        }
        .modaldropdown .select2-results__option--highlighted,.modaldropdown-status .select2-results__option--highlighted {
            background: #ffffff !important;
            color: #52565a !important;
        }
         #modaldrop .select2-container #select2-dropdown-carrier-container ,#modaldrop .select2-container #select2-dropdown-status-container,#modaldrop .select2-container #select2-dropdown-carrier-grid-container {
             background-color: white;
             color: #727171 !important;
             border: 1px solid #b9b8b8;
             border-radius: 6px 0px 0px 6px;
             height: 40px;
             line-height: 38px !important;
             font-size: 13px;
         }
         #BookingGridEdit #modaldrop .select2-container{
            width: 100% !important;
         }
         #modaldrop .select2-container #select2-dropdown-carrier-grid-container{
            text-align: left;
         }

        .dropdown.show .dropdown-icon.dropdown-accent:before {
            background-color: rgba(246, 74, 145, .4)
        }

        .tile-primary:hover {
            background-color: #736cc7 !important;
            box-shadow: 0 15px 20px rgba(115, 108, 199, .4) !important
        }

        .tile-accent:hover {
            background-color: #F64A91 !important;
            box-shadow: 0 15px 20px rgba(246, 74, 145, .4) !important
        }

        .nav .nav-item .nav-link.active,
        .nav .nav-item .nav-link:active,
        .nav .nav-item .nav-link:hover,
        .nav-tabs.primary-tabs .nav-item .nav-link.active.show,
        .nav-tabs.primary-tabs .nav-item .nav-link:hover,
        .nav-tabs.primary-tabs .nav-item.show .nav-link {
            color: #736cc7
        }
        #team-management-section .nav-link {
            font-size: 18px !important;
            padding: 10px 45px !important;
        }


       #team-management-section .nav-tabs.primary-tabs .nav-item .nav-link.active{
            color: #718599;
            background-color: transparent;
            border-bottom: solid 2px  #004d9a;
        }
   
        #team-management-section .nav-tabs{
            border-bottom: 1px solid rgb(143 151 161 / 50%);
        }
       #team-management-section .nav-tabs.primary-tabs .nav-item .nav-link:hover{
              color: #718599;
       }

        .nav-tabs.primary-tabs .nav-item .nav-link.active {
            border-bottom: solid 1px #736cc7;
            color: #736cc7
        }

        .nav-tabs.primary-tabs .nav-item.show .nav-link,
        .nav-tabs.primary-tabs .nav-link.active {
            border-color: #736cc7
        }

        .nav-tabs.accent-tabs .nav-item .nav-link.active {
            border-bottom: solid 1px #F64A91;
            color: #F64A91
        }

        .nav-tabs.accent-tabs .nav-item .nav-link.active.show,
        .nav-tabs.accent-tabs .nav-item .nav-link:hover,
        .nav-tabs.accent-tabs .nav-item.show .nav-link {
            color: #F64A91
        }

        .nav-tabs.accent-tabs .nav-item.show .nav-link,
        .nav-tabs.accent-tabs .nav-link.active {
            border-color: #F64A91
        }

        .nav-pills .nav-link {
            color: #788db4;
            border-radius: 50px;
            transition: all 250ms ease
        }

        .nav-pills .nav-link.active,
        .nav-pills .nav-link:hover {
            color: #736cc7
        }

        .nav-pills.nav-pills-accent .nav-item .nav-link.active,
        .nav-pills.nav-pills-primary .nav-item .nav-link.active {
            color: #fff
        }

        .nav-pills.nav-pills-primary .nav-link.active,
        .nav-pills.nav-pills-primary .show>.nav-link {
            background-color: #736cc7
        }

        .nav-pills.nav-pills-primary .nav-link.btn-floating.active {
            box-shadow: 0 5px 10px rgba(115, 108, 199, .4) !important
        }

        .nav-pills.nav-pills-accent .nav-link.active,
        .nav-pills.nav-pills-accent .show>.nav-link {
            background-color: #F64A91
        }

        .nav-pills.nav-pills-accent .nav-link.btn-floating.active {
            box-shadow: 0 5px 10px rgba(246, 74, 145, .4) !important
        }

        .pace .pace-progress {
            background-color: #004d9a;
            height: 4px !important;
        }

        /* .progress {
    background-color: #f0f6ff
}

.progress-bar {
    background-color: #736cc7
} */

        .timeline-primary {
            border-color: #736cc7 !important
        }

        .timeline-primary:after {
            box-shadow: 0 0 0 3px #736cc7 inset !important
        }

        .timeline-accent {
            border-color: #F64A91 !important
        }

        .timeline-accent:after {
            box-shadow: 0 0 0 3px #F64A91 inset !important
        }

        .popover {
            border: 4px solid #E7F1FD;
            box-shadow: 0 4px 10px 0 rgba(108, 158, 195, .09) !important
        }

        .popover .popover-header {
            color: #212529;
            background-color: #E7F1FD;
            border-bottom: 1px solid #E7F1FD
        }

        .popover .popover-body {
            color: #212529
        }

        .bs-popover-auto[x-placement^=top] .arrow::after,
        .bs-popover-top .arrow::after {
            border-top-color: #E7F1FD
        }

        .bs-popover-auto[x-placement^=bottom] .arrow::after,
        .bs-popover-bottom .arrow::after {
            border-bottom-color: #E7F1FD
        }

        .bs-popover-auto[x-placement^=left] .arrow::after,
        .bs-popover-left .arrow::after {
            border-left-color: #E7F1FD
        }

        .bs-popover-auto[x-placement^=right] .arrow::after,
        .bs-popover-right .arrow::after {
            border-right-color: #E7F1FD
        }

        .preloader.pls-primary .plc-path {
            stroke: #736cc7
        }

        .qt-loader.qt-loader-primary:before {
            border: 2px solid #736cc7;
            border-left-color: transparent;
            border-bottom-color: transparent
        }

        .qt-loader:hover.qt-loader-primary:before {
            border: 2px solid #fff;
            border-left-color: transparent;
            border-bottom-color: transparent
        }

        .qt-loader.qt-loader-accent:before {
            border: 2px solid #F64A91;
            border-left-color: transparent;
            border-bottom-color: transparent
        }

        .qt-loader:hover.qt-loader-accent:before {
            border: 2px solid #fff;
            border-left-color: transparent;
            border-bottom-color: transparent
        }

        .swal2-popup .swal2-styled {
            box-shadow: none;
            display: inline-block;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 1px solid transparent;
            padding: .65rem 1rem;
            font-size: .8125rem;
            line-height: 1.25;
            border-radius: .25rem;
            transition: all .15s ease;
            cursor: pointer
        }

        .swal2-popup .swal2-styled.swal2-confirm {
            border: 1px solid #736cc7 !important;
            background-color: #736cc7 !important;
            color: rgba(255, 255, 255, .85) !important
        }

        .swal2-popup .swal2-styled.swal2-confirm:hover {
            background-color: #857ece !important;
            border: 1px solid #857ece !important;
            color: #fff !important
        }

        .swal2-popup .swal2-styled.swal2-confirm:active {
            background-color: #615ac0 !important;
            border: 1px solid #615ac0 !important;
            color: #fff !important;
            box-shadow: none !important
        }

        .swal2-popup .swal2-styled.swal2-confirm:focus {
            background-color: #004d9a !important;
            border: 1px solid #004d9a !important;
            color: #fff !important;
            box-shadow: none !important
        }

        .swal2-popup .swal2-styled:focus {
            box-shadow: none !important
        }

        .swal2-popup .swal2-styled i {
            color: rgba(255, 255, 255, .85)
        }

        ::-webkit-input-placeholder {
            color: rgba(120, 141, 180, .7) !important;
            opacity: 1
        }

        ::-moz-placeholder {
            color: rgba(120, 141, 180, .7) !important;
            opacity: 1
        }

        :-ms-input-placeholder {
            color: rgba(120, 141, 180, .7) !important;
            opacity: 1
        }

        ::-ms-input-placeholder {
            color: rgba(120, 141, 180, .7) !important;
            opacity: 1
        }

        ::placeholder {
            color: rgba(120, 141, 180, .7) !important;
            opacity: 1
        }

        :-ms-input-placeholder {
            color: rgba(120, 141, 180, .7) !important
        }

        ::-ms-input-placeholder {
            color: rgba(120, 141, 180, .7) !important
        }

        .custom-control-input:disabled~.custom-control-label,
        .custom-file-label,
        .custom-file-label:after,
        .form-control,
        .form-control:focus {
            color: #323a48
        }

        #signup-form .form-control {
            border: 1px solid rgba(120, 141, 180, .3);
            line-height: 2.5;
        }

        .form-control:focus {
            border: 1px solid #736cc7
        }
        #portList-modal:focus , #portList-modal-two:focus{
           background-color: #004D9A;
           border: none;
        }
        .dropdown-modal .input-group-task, .dropdown-modal i{
            background-color: #004D9A;
        }
        .dropdown-modal .input-group-task i{
            font-size: 11px ;
        }
        #search-port-details ,#search-porttwo-details{
            width: 88%;
            margin: 6px;
        }

        .form-control-plaintext {
            color: #617182
        }

        option:active,
        option:checked {
            color: #fff;
            background: linear-gradient(0deg, #E7F1FD 0, #E7F1FD 100%) #E7F1FD
        }

        select[multiple]:focus option:checked {
            background: linear-gradient(0deg, #736cc7 0, #736cc7 100%) #736cc7
        }

        .input-group-text {
            background-color: #f0f6ff;
            border: 1px solid #dfe7f3;
            color: #96a9c6
        }

        .input-group-task {
            background-color: #b3b2b2;
            width: 50px;
            border-radius: 0 5px 5px 0;
            height: 100%;
        }

        .input-group-task i {
            color: #fff;
        }

        #veh-reg-form label {
            color: #617182;
            font-size: 13px !important;
        }

        #veh-reg-desc {
            color: #617182;
        }

        .task-input {
            border-radius: 5px 0 0 5px;
        }

        #veh-reg-form .required:after {
            content: "*";
            color: #333;
        }

        .custom-control-label::before {
            background-color: #c7d9ee;
            color: #fff
        }

        .custom-checkbox.checkbox-primary .custom-control-input:checked~.custom-control-label::before,
        .custom-checkbox.checkbox-primary .custom-control-input:indeterminate~.custom-control-label::before,
        .custom-radio.radio-primary .custom-control-input:checked~.custom-control-label::before {
            background-color: #736cc7
        }

        .custom-checkbox.checkbox-accent .custom-control-input:checked~.custom-control-label::before,
        .custom-checkbox.checkbox-accent .custom-control-input:indeterminate~.custom-control-label::before,
        .custom-radio.radio-accent .custom-control-input:checked~.custom-control-label::before {
            background-color: #F64A91
        }

        .control.control-outline input:checked~.control__indicator {
            background-color: 0 0
        }

        .control.control-outline.control--checkbox .control__indicator:after {
            top: 3px;
            left: 7px;
            width: 5px;
            height: 9px;
            transform: rotate(45deg);
            border-width: 0 2px 2px 0;
        }

        .control.control-outline.control--radio .control__indicator:after {
            top: 6px;
            left: 6px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #fff
        }

        .control.control-outline.control-primary input:checked~.control__indicator {
            border: 1px solid #736cc7
        }

        .control.control-outline.control-primary.control--checkbox .control__indicator:after {
            border: solid #736cc7
        }

        .control.control-outline.control-primary.control--radio .control__indicator:after {
            background-color: #736cc7
        }

        .control.control-outline.control-accent input:checked~.control__indicator {
            border: 1px solid #F64A91
        }

        .control.control-outline.control-accent.control--checkbox .control__indicator:after {
            border: solid #F64A91
        }

        .control.control-outline.control-accent.control--radio .control__indicator:after {
            background-color: #F64A91
        }

        .control.control-outline.control-accent.control--checkbox .control__indicator:after,
        .control.control-outline.control-primary.control--checkbox .control__indicator:after {
            border-width: 0 2px 2px 0
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            color: #fff;
            background-color: #736cc7
        }

        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default.select2-container--open .select2-selection--multiple,
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #736cc7
        }

        .select2-container--default.select2-container--focus .select2-selection--multiple {
            border: 1px solid #736cc7;
            outline: 0
        }

        .custom-file-input:focus~.custom-file-label:after,
        .custom-file-label,
        .custom-file-label:after,
        .form-control {
            border-color: #a8acb1
        }

        .custom-file-input:focus~.custom-file-label {
            border-color: #dfe7f3;
            box-shadow: none
        }

        .custom-file-label::after {
            background-color: #f0f6ff;
            border-left: 1px solid #dfe7f3;
            color: #8da6cb
        }

        .custom-file-label:active::after,
        .custom-file-label:focus::after,
        .custom-file-label:hover::after {
            color: #736cc7
        }

        .custom-file-input:lang(en)~.custom-file-label.btn-icon::after,
        .custom-file-label.btn-icon::after {
            font-family: Material-Design-Iconic-Font;
            content: '\f22a'
        }

        .form-control:disabled,
        .form-control[readonly] {
            background-color: #f0f6ff
        }

        .custom-range::-webkit-slider-thumb {
            background-color: #736cc7
        }

        .custom-range::-webkit-slider-thumb:focus {
            box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 123, 255, .25)
        }

        .custom-range::-webkit-slider-thumb:active {
            background-color: #a8a3dc
        }

        .custom-range::-webkit-slider-runnable-track {
            background-color: #e8eff9
        }

        .custom-range::-moz-range-thumb {
            background-color: #736cc7
        }

        .custom-range::-moz-range-thumb:focus {
            box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 123, 255, .25)
        }

        .custom-range::-moz-range-thumb:active {
            background-color: #a8a3dc
        }

        .custom-range::-moz-range-track {
            background-color: #dee2e6
        }

        .custom-range::-ms-thumb {
            background-color: #736cc7
        }

        .custom-range::-ms-thumb:focus {
            box-shadow: 0 0 0 1px #fff, 0 0 0 .2rem rgba(0, 123, 255, .25)
        }

        .custom-range::-ms-thumb:active {
            background-color: #a8a3dc
        }

        .custom-range::-ms-fill-lower {
            background-color: #dee2e6
        }

        .custom-range::-ms-fill-upper {
            background-color: #dee2e6
        }

        .slider.noUi-connect {
            background-color: #F64A91
        }

        .slider.slider-primary .noUi-connect,
        .slider.slider-primary.noUi-connect,
        .tgl-flat.tgl-flat-primary:checked+.tgl-btn:after,
        .tgl-primary:checked+.tgl-btn {
            background-color: #736cc7
        }

        .slider .noUi-handle {
            border-color: #F64A91
        }

        .slider.slider-primary .noUi-handle {
            border-color: #736cc7
        }

        .tgl-flat.tgl-flat-secondary:checked+.tgl-btn:after,
        .tgl-secondary:checked+.tgl-btn {
            background-color: #788db4
        }

        .tgl-accent:checked+.tgl-btn,
        .tgl-flat.tgl-flat-accent:checked+.tgl-btn:after {
            background-color: #F64A91
        }

        .datepicker table tbody tr>td.day.today,
        .datepicker table tr td span.focused,
        .datepicker table tr td span:hover,
        .datetimepicker table tbody tr>td.day.today,
        .form-wizard .steps ul li.active span,
        .form-wizard .steps ul li:hover span {
            color: #fff;
            background: #736cc7
        }

        .datepicker table tr td.active.active,
        .datepicker table tr td.active.disabled,
        .datepicker table tr td.active.disabled.active,
        .datepicker table tr td.active.disabled.disabled,
        .datepicker table tr td.active.disabled:active,
        .datepicker table tr td.active.disabled:hover,
        .datepicker table tr td.active.disabled:hover.active,
        .datepicker table tr td.active.disabled:hover.disabled,
        .datepicker table tr td.active.disabled:hover:active,
        .datepicker table tr td.active.disabled:hover:hover,
        .datepicker table tr td.active.disabled:hover[disabled],
        .datepicker table tr td.active.disabled[disabled],
        .datepicker table tr td.active:active,
        .datepicker table tr td.active:hover,
        .datepicker table tr td.active:hover.active,
        .datepicker table tr td.active:hover.disabled,
        .datepicker table tr td.active:hover:active,
        .datepicker table tr td.active:hover:hover,
        .datepicker table tr td.active:hover[disabled],
        .datepicker table tr td.active[disabled],
        .datepicker table tr td.today.active,
        .datepicker table tr td.today.disabled,
        .datepicker table tr td.today.disabled.active,
        .datepicker table tr td.today.disabled.disabled,
        .datepicker table tr td.today.disabled:active,
        .datepicker table tr td.today.disabled:hover,
        .datepicker table tr td.today.disabled:hover.active,
        .datepicker table tr td.today.disabled:hover.disabled,
        .datepicker table tr td.today.disabled:hover:active,
        .datepicker table tr td.today.disabled:hover:hover,
        .datepicker table tr td.today.disabled:hover[disabled],
        .datepicker table tr td.today.disabled[disabled],
        .datepicker table tr td.today:active,
        .datepicker table tr td.today:hover,
        .datepicker table tr td.today:hover.active,
        .datepicker table tr td.today:hover.disabled,
        .datepicker table tr td.today:hover:active,
        .datepicker table tr td.today:hover:hover,
        .datepicker table tr td.today:hover[disabled],
        .datepicker table tr td.today[disabled],
        .datetimepicker table tr td span.active.active,
        .datetimepicker table tr td span.active.disabled.active,
        .datetimepicker table tr td span.active.disabled:active,
        .datetimepicker table tr td span.active.disabled:hover.active,
        .datetimepicker table tr td span.active.disabled:hover:active,
        .datetimepicker table tr td span.active:active,
        .datetimepicker table tr td span.active:hover.active,
        .datetimepicker table tr td span.active:hover:active,
        .datetimepicker table tr td.active.active,
        .datetimepicker table tr td.active.disabled.active,
        .datetimepicker table tr td.active.disabled:active,
        .datetimepicker table tr td.active.disabled:hover.active,
        .datetimepicker table tr td.active.disabled:hover:active,
        .datetimepicker table tr td.active:active,
        .datetimepicker table tr td.active:hover.active,
        .datetimepicker table tr td.active:hover:active {
            background: #F64A91;
            color: #fff
        }

        .daterangepicker td.active,
        .daterangepicker td.active:hover {
            background: #736cc7
        }

        .daterangepicker .input-mini.active {
            border: 1px solid #736cc7
        }

        .daterangepicker td.in-range {
            background-color: #736cc7;
            border-color: transparent;
            color: #fff
        }

        .ranges li.active,
        .ranges li:hover {
            background-color: #736cc7;
            border: 1px solid #736cc7;
            color: #fff
        }

        .ranges li {
            color: #617182
        }

        .wizard>.steps a {
            background: #94AAC5;
            color: rgba(255, 255, 255, .6) !important
        }

        .wizard>.steps a .number {
            background: #7390b3
        }

        .wizard>.steps .current a {
            background: #736cc7;
            color: #fff !important
        }

        .wizard>.steps .current a .number {
            background: #5047b9;
            color: #fff
        }

        .wizard>.steps .current a:hover {
            color: #fff
        }

        .wizard>.steps .done a {
            background: #736cc7;
            color: #fff
        }

        .wizard>.steps .done a .number {
            background: #5047b9
        }

        .wizard>.steps .error a {
            background: #ff5c75;
            color: #fff
        }

        .wizard>.steps .error a .number {
            background: #ff294a;
            color: #fff
        }

        .wizard>.actions a[href="#previous"] {
            background-color: #fff;
            border: 1px solid #d8e3ef;
            color: #788db4
        }

        .wizard>.actions a[href="#previous"]:hover {
            background-color: #839ebe !important;
            border: 1px solid #839ebe !important;
            box-shadow: 0 5px 10px rgba(141, 166, 195, .4) !important;
            color: #fff !important
        }

        .wizard>.actions .disabled a,
        .wizard>.actions .disabled a:active,
        .wizard>.actions .disabled a:hover {
            color: rgba(141, 166, 195, .6) !important;
            background: 0 0 !important;
            border-color: rgba(216, 227, 239, .7) !important;
            box-shadow: none !important
        }

        .wizard>.actions a[href="#next"] {
            background-color: #736cc7;
            border: 1px solid #736cc7;
            color: rgba(255, 255, 255, .9) !important
        }

        .wizard>.actions a[href="#next"]:hover {
            color: #fff !important
        }

        .wizard>.actions a[href="#finish"] {
            background-color: #736cc7;
            border: 1px solid #736cc7;
            color: rgba(255, 255, 255, .9)
        }

        .card.card-accent .card-footer,
        .card.card-primary .card-footer {
            border-top: 1px solid rgba(0, 0, 0, .1)
        }

        .wizard>.actions a[href="#finish"]:hover {
            color: #fff !important
        }

        .actions li>a:hover i:after {
            content: '';
            background-color: rgba(234, 243, 253, .7)
        }

        .actions>a>i,
        .actions>li>a>i {
            color: #788db4
        }

        .actions.open>a>i,
        .actions>a:hover>i,
        .actions>li.open>a>i,
        .actions>li>a:hover>i {
            color: #736cc7
        }

        .actions.actions-alt>li.open>a>i,
        .actions.actions-alt>li>a>i,
        .actions.actions-alt>li>a>i:hover {
            color: #fff
        }

        .action-header {
            border-bottom: 1px solid #F7F7F7
        }

        .card.card-accent .card-header,
        .card.card-primary .card-header {
            border-bottom: 1px solid rgba(0, 0, 0, .1)
        }

        .dropdown .dropdown-menu .actions li a {
            color: #718599
        }

        .chartist-accent .ct-series-a .ct-bar,
        .chartist-accent .ct-series-a .ct-line,
        .chartist-accent .ct-series-a .ct-point,
        .chartist-accent .ct-series-a .ct-slice-donut {
            stroke: #F64A91
        }

        .chartist-primary .ct-series-a .ct-bar,
        .chartist-primary .ct-series-a .ct-line,
        .chartist-primary .ct-series-a .ct-point,
        .chartist-primary .ct-series-a .ct-slice-donut {
            stroke: #736cc7
        }

        .chartist-accent .ct-series-a .ct-area,
        .chartist-accent .ct-series-a .ct-slice-pie {
            fill: #F64A91
        }

        .fc-unthemed .fc-toolbar .fc-button.fc-state-active,
        .fc-unthemed .fc-toolbar .fc-button:active,
        .fc-unthemed .fc-toolbar .fc-button:focus {
            color: #736cc7;
            background-color: #fff;
            border: none
        }

        .d-fc-event-primary {
            background-color: #736cc7
        }

        .fc-h-event.brand-primary .fc-content .fc-time,
        .fc-h-event.brand-primary .fc-content .fc-title {
            color: #fff
        }

        .app-content .list-group .list-group-item:hover .list-group-item-heading {
            color: #736cc7 !important
        }

        .app-content .list-group .list-group-item.active .list-group-item-heading,
        .app-content .list-group .list-group-item.active .list-group-item-text,
        .app-content .list-group .list-group-item.mark-read .list-group-item-heading,
        .app-content .list-group .list-group-item.mark-read .list-group-item-text {
            color: #91a6c3
        }

        .app-content .list-group .list-group-item.mark-read {
            background-color: rgba(231, 241, 253, .2)
        }

        .app-content .list-group .list-group-item.active {
            border-left: solid 3px #736cc7;
            background-color: rgba(231, 241, 253, .2)
        }

        .card.card-primary {
            background: #736cc7
        }

        .card.card-primary .card-header .actions div>a>i,
        .card.card-primary .card-header .actions li>a>i {
            color: rgba(255, 255, 255, .5)
        }

        .card.card-primary .card-body p,
        .card.card-primary .card-body span,
        .card.card-primary .card-footer p,
        .card.card-primary .card-footer span,
        .card.card-primary .card-header,
        .card.card-primary .card-header .actions div>a>i:hover,
        .card.card-primary .card-header .actions li>a>i:hover,
        .card.card-primary .card-title {
            color: #fff
        }

        .card.card-accent {
            background: #F64A91
        }

        .card.card-accent .card-header .actions div>a>i,
        .card.card-accent .card-header .actions li>a>i {
            color: rgba(255, 255, 255, .5)
        }

        .card.card-accent .card-body p,
        .card.card-accent .card-body span,
        .card.card-accent .card-footer p,
        .card.card-accent .card-footer span,
        .card.card-accent .card-header,
        .card.card-accent .card-header .actions div>a>i:hover,
        .card.card-accent .card-header .actions li>a>i:hover,
        .card.card-accent .card-title,
        .card.card-border-primary .card-header .card-title {
            color: #fff
        }

        .card.card-border-primary {
            border: 1px solid #736cc7
        }

        .card.card-border-primary .card-header {
            border-bottom: 1px solid rgba(0, 0, 0, .1);
            background: #736cc7;
            color: #fff
        }

        .card.card-border-primary .card-header .actions div>a>i,
        .card.card-border-primary .card-header .actions li>a>i {
            color: rgba(255, 255, 255, .5)
        }

        .card.card-border-accent .card-header .card-title,
        .card.card-border-primary .card-header .actions div>a>i:hover,
        .card.card-border-primary .card-header .actions li>a>i:hover {
            color: #fff
        }

        .card.card-border-accent {
            border: 1px solid #F64A91
        }

        .card.card-border-accent .card-header {
            border-bottom: 1px solid rgba(0, 0, 0, .1);
            background: #F64A91;
            color: #fff
        }

        .card.card-pills.card-accent .nav-pills.nav-pills-accent .nav-item .nav-link.active,
        .card.card-pills.card-accent .nav-pills.nav-pills-accent .show>.nav-link,
        .card.card-pills.card-primary .nav-pills.nav-pills-primary .nav-item .nav-link.active,
        .card.card-pills.card-primary .nav-pills.nav-pills-primary .show>.nav-link {
            background-color: #fff
        }

        .card.card-border-accent .card-header .actions div>a>i,
        .card.card-border-accent .card-header .actions li>a>i {
            color: rgba(255, 255, 255, .5)
        }

        .card.card-border-accent .card-header .actions div>a>i:hover,
        .card.card-border-accent .card-header .actions li>a>i:hover {
            color: #fff
        }

        .card.card-pills.card-primary .nav-pills.nav-pills-primary .nav-item .nav-link {
            color: rgba(255, 255, 255, .5)
        }

        .card.card-pills.card-primary .nav-pills.nav-pills-primary .nav-item .nav-link:hover {
            color: #fff
        }

        .card.card-pills.card-primary .nav-pills.nav-pills-primary .nav-item .nav-link.active {
            color: #736cc7
        }

        .card.card-pills.card-accent .nav-pills.nav-pills-accent .nav-item .nav-link {
            color: rgba(255, 255, 255, .5)
        }

        .card.card-pills.card-accent .nav-pills.nav-pills-accent .nav-item .nav-link:hover {
            color: #fff
        }

        .card.card-pills.card-accent .nav-pills.nav-pills-accent .nav-item .nav-link.active {
            color: #F64A91
        }

        .card.card-tabs.card-accent .card-header,
        .card.card-tabs.card-primary .card-header {
            border: none
        }

        .card.card-tabs.card-accent .nav-tabs,
        .card.card-tabs.card-primary .nav-tabs {
            border-bottom: 1px solid rgba(0, 0, 0, .1)
        }

        .card.card-tabs.card-accent .nav-tabs .nav-item .nav-link,
        .card.card-tabs.card-primary .nav-tabs .nav-item .nav-link {
            color: rgba(255, 255, 255, .6)
        }

        .card.card-tabs.card-accent .nav-tabs .nav-item .nav-link:hover,
        .card.card-tabs.card-primary .nav-tabs .nav-item .nav-link:hover {
            color: #fff
        }

        .card.card-tabs.card-accent .nav-tabs .nav-item.show .nav-link,
        .card.card-tabs.card-accent .nav-tabs .nav-link.active,
        .card.card-tabs.card-primary .nav-tabs .nav-item.show .nav-link,
        .card.card-tabs.card-primary .nav-tabs .nav-link.active {
            background-color: rgba(255, 255, 255, .1);
            color: #fff
        }

        .card.card-menu .metismenu li a {
            color: #617182
        }

        .card.card-menu .metismenu li a:hover {
            color: #736cc7
        }

        .hide {
            display: none;
        }

        .container_pseudo::before {
            content: '';
            display: inline-block;
            float: left;
            height: 15px;
            width: 20px;
            background-image: url('pathwayIconsAndImgs/Group_735.png');
            background-size: 100% 100%;
        }

        .pseudo_ques::before {
            content: '';
            display: inline-block;
            float: right;
            height: 20px;
            width: 20px;
            background-image: url('pathwayIconsAndImgs/question.png');
            background-size: 100% 100%;
        }

        .shipment_pseudo::before {
            content: '';
            display: inline-block;
            cursor: pointer;
            position: relative;
            top: 3px;
            height: 15px;
            width: 20px;
            background-image: url('pathwayIconsAndImgs/Union_12.png');
            background-size: 100% 100%;
        }

        progress[value]::-webkit-progress-value {
            position: relative;
            background-size: 35px 20px, 100% 100%, 100% 100%;
            border-radius: 3px;
            /* Let's animate this */
            -webkit-animation: animate-stripes 5s linear infinite;
            animation: animate-stripes 5s linear infinite;
        }

        /* @import url(https://fonts.googleapis.com/css?family=Expletus+Sans); */
        /* Basic resets */
        /* * { 
    margin:0; padding:0; 
    box-sizing: border-box;
}

body {
margin: 50px auto 0;
max-width: 800px;

font-family: "Expletus Sans", sans-serif;
}

li {

    width: 50%;
    float: left;
    list-style-type: none;
    
    padding-right: 5.3333333%;
}

li:nth-child(even) { margin-bottom: 5em;}

h2 {
    margin: 0 0 1.5em;
    border-bottom: 1px solid #ccc;
    
    padding: 0 0 .25em;
} */
        /* Styling an indeterminate progress bar */

        progress:not(value) {
            /* Add your styles here. As part of this walkthrough we will focus only on determinate progress bars. */
            height: 15px;
        }

        /* Styling the determinate progress element */

        progress[value] {
            /* Get rid of the default appearance */
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            /* This unfortunately leaves a trail of border behind in Firefox and Opera. We can remove that by setting the border to none. */
            border: none;
            /* Add dimensions */
            width: 90%;
            height: 6px !important;
            /* top:calc(50% - 3px)!important; */
            top: 5px;
            /* Although firefox doesn't provide any additional pseudo class to style the progress element container, any style applied here works on the container. */
            background-color: whiteSmoke;
            background: red !important;
            border-radius: 3px;
            /*box-shadow: 0 2px 3px rgba(0,0,0,.5) inset;
    */
            /* Of all IE, only IE10 supports progress element that too partially. It only allows to change the background-color of the progress value using the 'color' attribute. */
            color: royalblue;
            position: relative;
            margin: 0 0;
        }

        /*
Webkit browsers provide two pseudo classes that can be use to style HTML5 progress element.
-webkit-progress-bar -> To style the progress element container
-webkit-progress-value -> To style the progress element value.
*/

        progress[value]::-webkit-progress-bar {
            background-color: #EFEFEF;
            border-radius: 3px;
            /*    height:15px;
*/
        }

        .progress_main {
            opacity: 0.99;
            position: absolute;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            padding: 0px;
            left: 0px !important;
        }

        .login-bg {
            background-image: url(../../../../img/bg-3.jpg);
            height: 100vh;
            background-size: cover;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .ex-style {
            padding: 5px 10px;
            border-radius: 25px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            -ms-border-radius: 25px;
            -o-border-radius: 25px;
        }

        .view-pass {
            position: relative;
        }

        .poss-a {
            position: absolute;
            top: 6px;
            right: 10px;
        }

        .login-model {
            background: #f4f4f4;
            border-radius: 20px;
            box-shadow: 1px 1px 15px #00000069;
        }

        .color-w {
            color: #000;
        }

        .login-icon {
            width: 20%;
        }

        .map-styl {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .over-layer {
            position: relative;
            z-index: 0;
        }

        .action-extra #jqxlistbox {
            border: none;
            height: 180px !important;
        }

        .nav-tabs .dis-able .nav-link {
            color: #c7c7c7;
        }

        .down-option .dropdown-item {
            color: #839bb3;
            display: block;
            width: 100%;
            clear: both;
            font-weight: 400;
            text-align: inherit;
            white-space: nowrap;
            border: 0;
            padding: 10px 20px;
            font-size: .875rem;
            border-left: solid 2px transparent;
            position: relative;
        }

        .jqx-grid {
            border: none !important;
        }

        .jqx-grid-toolbar {
            background: #fff !important;
            /* border: none !important; */
        }

        .jqx-widget-header {
            font-weight: 400 !important;
            background: #fff !important;
        }

        .jqx-grid-content {
            /* text-align: center !important; */
        }

        /* .jqx-grid-sortremove-icon{
    content: ' \21C5';
    color: #eee;
    visibility: visible !important;
  } */

        .px-padding-7 {
            padding: 10px 10px;
            display: flex;
            /* color: #444; */
        }

        #contentgrid {
            border-left: 1px solid #DFE9F4 !important;
            border-right: 1px solid #DFE9F4 !important;
            width: 100% !important;
        }

        #toolbargrid {
            width: 100% !important;
        }

        .fc-button {
            border: none !important;
        }

        .fc-title br {
            display: none;
        }

        .subgroup {
            display: none;
            padding: 20px;
        }

        .fc-center>div {
            display: inline-flex;
        }

        #calendar .fc-head {
            display: none;
        }

        #external-events .fc-event {
            display: flex;
            color: black;
            margin: 10px 0px 10px 0px;
            cursor: pointer;
            border: none;
        }
        #external-events div:first-child{
            margin-top: unset;
        }
         #external-events div:last-child{
            margin-bottom: unset;
        }
        #external-events{
            margin-bottom: unset;
        }

        .individualref {
            background-color: #f7fafe;
            padding: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
            display: flex;
        }

        .fc-day-grid-event {
            padding: 1px;
            background-color: aliceblue;
            font-size: 10px;
        }

        .fc-event-container {
            padding: 2px !important;
        }

        /* .fc-state-hover{
      border:none !important;
      background-color: white !important;
    } */

        #external-events {
            box-shadow: none;
        }

        /* Milestone section */

        .wizard-dec {
            padding: 0px !important;
            margin-top: 35px !important;
        }

        .wizard-dec li {
            list-style: none;
            display: inline-block;
        }

        .back-mg-building {
            background-image: url(../../../../../building.png);
            border-radius: 50%;
            display: inline-block;
            height: 30px;
            line-height: 40px;
            position: relative;
            text-align: center;
            width: 30px;
            z-index: 1;
            background-size: cover;
        }

        .back-mg-ship {
            background-image: url(../../../../../icon.png);
            border-radius: 50%;
            display: inline-block;
            height: 30px;
            line-height: 40px;
            position: relative;
            text-align: center;
            width: 30px;
            z-index: 1;
            background-size: cover;
        }

        .brder-dot-small-grey {
            border: 1px dashed#cfd4d9;
            max-width: 25px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        .brder-dot-small-blue {
            border: 1px dashed#004d9a;
            max-width: 25px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        .brder-dot-large-blue {
            border: 1px dashed#004d9a;
            max-width: 110px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        .brder-dot-large-grey {
            border: 1px dashed#cfd4d9;
            max-width: 110px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        .brder-solid-blue {
            border: 1px solid#004d9a;
            max-width: 110px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        .brder-solid-grey {
            border: 1px solid#cfd4d9;
            max-width: 110px;
            position: relative;
            top: -12px;
            width: 100%;
        }

        /* tagging style */

        .boxed-align {
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            width: 100%;
            flex-flow: row wrap;
            /* margin-bottom: 18px; */
        }

        .solid {
            border: 1px dotted #aeaeaf;
            display: block;
            width: 100%;
            border-radius: 15px;
        }

        .items {
            margin-right: 5px;
            width: auto;
            margin-bottom: 20px;
        }

        .add {
            position: relative;
        }

        .add:before {
            cursor: pointer;
            position: absolute;
            content: "\f055";
            margin: 0 auto;
            font-size: 18px;
            font-family: fontawesome;
            color: #aeaeaf;
            z-index: 1;
            left: 0;
            right: 0;
            text-align: center;
        }

        .bg-blue {
            color: aliceblue;
            font-size: 13px;
            text-align: center;
            width: 100%;
            background: #004d9a !important;
            padding: 6px 30px 5px 30px;
            display: block;
            border-radius: 15px;
        }

        /* .tab-content #grid {
            width: 100%!important;
        } */

        .px-tool-tip {
            background: #fff;
            z-index: 99999999999 !important;
            /* width: 100%;
  height: 100%; */
            opacity: 1.0 !important;
            padding: 0px !important;
            margin: 0px !important;
            /* width:70% !important; */
        }

        .jqx-tooltip {
            opacity: 1.0 !important;
            background: #fff !important;
            padding: 0px !important;
            margin: 0px !important;
            box-shadow: none !important;
        }

        /* .px-select-row{
  background: #0062cc !important;
  color: #fff !important;
} */
        /* .jqx-grid-cell-selected-energyblue{
  background: #0062cc !important;
  color: #fff !important;
} */

        .px-exception_orange {
            background: #f90 !important;
        }

        .px-completed_green {
            background: #2b792e !important;
        }

        /* .progress {
  appearance: none;
  padding: 0;
  border: none;
  border-radius: 0;

  display: block;
  color: black;
  background-color: red;

  width: 100%;
  height: 2px;
  top: 10%; 
  left: 10%; 
} */
        /* Chrome */

        .progress::-webkit-progress-bar {
            background-color: red;
        }

        .progress::-moz-progress-bar {
            background-color: orange;
        }

        /* .progress-bar {
  background-color: orange;	
  display: block;
  height: 100%;
  font-size: 0;
} */
        /* For customization view */

        .itemcenter_customiz {
            display: flex;
            align-items: center;
            text-align: left;
            color: #647183;
            font-weight: bold;
        }

        .margin-bottom-unset {
            margin-bottom: unset !important;
        }

        .customiz-main-rc {
            background-color: white;
            border: 1px solid #dadee2 !important;
            padding: 5px;
            margin-bottom: unset !important;
        }

        .tgl-light+.tgl-btn {
            background-color: #f0f0f0 !important
        }

        .tgl-primary:checked+.tgl-btn {
            background-color: #004d9a !important
        }

        /* calendar Styles */

        .fc-sun {
            background-color: #f7fafe;
        }

        .fc-sat {
            background-color: #f7fafe;
        }

        td.fc-day.fc-past {
            background-color: #f7fafe;
        }

        .dis-flex-cen {
            display: flex;
            align-items: center;
            height: 55px;
            justify-content: center;
        }

        .nav-tabs .dis-able .nav-link {
            color: #c7c7c7;
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>.nav-dropdown.active>.nav-sub {
            background: #004d9a;
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .metismenu .nav-sub li>a {
            color: #fff;
        }

        .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu .nav-sub>li>a {
            padding: 8px 0 8px 30px;
        }

        .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu .nav-sub>li>a>i {
            color: #fff;
        }

        body .sidebar.sidebar-left .sidebar-content .main-menu .nav.metismenu>li>a {
            color: #fff;
        }

        /* .card .card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
} */

        .card-toolbar.top-right {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
        }

        .jqx-widget-energyblue .jqx-grid-column-header-energyblue,
        .jqx-grid-cell-energyblue,
        .jqx-widget-energyblue .jqx-grid-cell-energyblue,
        .jqx-widget-energyblue .jqx-grid-group-cell-energyblue,
        .jqx-grid-group-cell-energyblue {
            border-color: #f2f7fe !important;
        }

        .jqx-fill-state-normal-energyblue,
        .jqx-widget-header-energyblue {
            border-color: #f2f7fe !important;
            background-color: #e0e9f5;
        }

        .progress {
            display: inline-block !important;
        }

        #contenttablegrid>div {
            height: 32px !important;
        }

        #columntablegrid>div>div {
            padding: 0 10px;
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            font-size: 13px;
            color: #617183;
            font-style: normal;
        }

        .jqx-widget-header {
            font-family: 'Roboto', sans-serif;
            color: #5a617b;
            font-weight: 500 !important;
            font-size: 13px;
            font-style: normal;
        }

        .jqx-grid-cell-sort-alt-energyblue,
        .jqx-grid-cell-filter-alt-energyblue,
        .jqx-grid-cell-pinned-energyblue,
        .jqx-grid-cell-alt-energyblue,
        .jqx-grid-cell-sort-energyblue {
            background-color: #e7eef5 !important;
        }

        .card .card-toolbar.right-align {
            right: 42px !important;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: end;
            text-align: end;
        }

        .px-font-apply {
            font-family: 'Roboto', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 12px;
            color: #6a7696;
        }

        .jqx-grid-cell-left-align {
            font-family: 'Roboto', sans-serif;
            font-weight: 500;
            font-style: normal;
            padding: 0 10px;
            font-size: 12px;
            color: #6a7696;
        }

        .jqx-widget-content {
            font-family: 'Roboto', sans-serif !important;
        }

        .right-align label {
            font-size: 12px !important;
        }

        #toolbargrid>div {
            margin: 1px !important;
        }

        #toolbargrid>div>#searchField {
            height: 19px !important;
        }

        .right-align label {
            font-size: 13px !important;
        }

        .modal-content {
            position: relative;
        }

        .close-btn {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            color: #000;
            position: absolute;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            top: -10px;
            background: #f5f5f5;
            right: -10px;
            text-align: center;
            font-size: 12px;
            z-index: 99999;
            cursor: pointer;
            line-height: 20px;
        }

        .red-more {
            display: flex;
            flex-direction: column;
            vertical-align: middle;
            align-items: center;
            justify-content: center;
            height: 55px;
        }

        .row.individualref.fc-event.ui-draggable.ui-draggable-handle {
            color: #6b7286;
        }

        .hide_shipment_filter {
            visibility: hidden;
        }

        /* .card-outer{
       height:485px; 
     overflow-y:scroll; 
    }
    .card-outer::-webkit-scrollbar {
      width: 10px;
    }

    .card-outer::-webkit-scrollbar-track {
      background: #f1f1f1; 
      border-radius:10px;
    }
     
    .card-outer::-webkit-scrollbar-thumb {
      background: rgb(189, 189, 189); 
      border-radius:10px;
    } */

        .fc-scroller {
            overflow: visible !important;
            height: auto !important;
        }

        .px-custom-color {
            color: #6b7286;
        }

        #contenttablegrid {
            letter-spacing: .034rem;
        }

        .add-items {
            display: none;
        }

        #grid_layout .jqx-grid-cell-selected-energyblue .px-font-apply {
            color: #fff !important;
        }

        .select-time .modal-dialog {
            width: 520px;
        }

        .bttn-dsgn {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .card-header .left-head a,
        .launch-sec-head a {
            text-decoration: underline;
            margin-right: 10px;
            color: #46a7ec !important;
            cursor: pointer;
        }

        .jqx-grid-cell.jqx-grid-cell-energyblue.jqx-item.jqx-item-energyblue {
            display: flex;
            flex-direction: column;
            vertical-align: middle;
            justify-content: center;
        }

        .jqx-item-energyblue>div {
            padding: 0 10px;
            margin-top: 0px !important;
            display: block;
            justify-content: center;
            flex-direction: row;
            align-items: center;
            color: #617183;
            font-weight: 400;
        }

        .show_shipment_filter {
            color: #617183;
            font-weight: 400;
        }

        .jqx-widget-header>div {
            padding: 0 10px;
        }

        .tooltip-inner {
            max-width: 20% !important;
        }

        .jqx-tooltip-text {
            max-width: 190px;
            width: 100%;
            min-height: 50px;
            background: #fff;
            border: none !important;
            box-shadow: none !important;
            font-family: 'Roboto', sans-serif !important;
        }

        .bttn-dsgn:first-child {
            margin-right: 10px;
        }

        .btn-secondary {
            color: #fff;
            background-color: #6c757d !important;
            border-color: #6c757d;
        }

        .pick-time {
            border-radius: 5px;
            cursor: pointer;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
        }

        .select-time .modal-dialog .saved-msg .over-loader {
            background: #fff;
        }

        .select-time .modal-dialog .saved-msg .over-loader .save-loder {
            width: 60%;
        }

        .button-confirm {
            background: #004d9a;
        }

        /* .set-time{background:#004d9a;} */

        .select-time .modal-dialog .saved-msg .close-btn {
            height: 25px;
            width: 25px;
            border-radius: 50%;
            color: #000;
            position: absolute;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            top: -15px;
            background: #f5f5f5;
            right: -15px;
            text-align: center;
            font-size: 12px;
            z-index: 99999;
            cursor: pointer;
            line-height: 25px;
        }

        .tab-content>.active {
            display: block;
            width: 96%;
        }

        .jqx-fill-state-normal {
            background: #fff !important;
            border-color: #fff !important;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            vertical-align: middle;
            -webkit-border-radius: none;
            -moz-border-radius: none;
            -ms-border-radius: none;
            -o-border-radius: none;
        }

        .jqx-tooltip .jqx-fill-state-normal {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        }

        .jqx-tooltip .jqx-fill-state-normal:after {
            box-shadow: none;
            display: none;
        }

        .jqx-tooltip,
        .jqx-tooltip-text,
        .jqx-tooltip-main {
            line-height: 1.5 !important;
            border-radius: 0px !important;
            -webkit-border-radius: 0px !important;
            -moz-border-radius: 0px !important;
            -ms-border-radius: 0px !important;
            -o-border-radius: 0px !important;
        }

        .jqx-grid-cell {
            font-family: 'Roboto', sans-serif;
            font-weight: 400 !important;
            font-style: normal;
            font-size: 12px !important;
            color: #617183 !important;
        }

        .pick-time {
            font-weight: 600;
            font-size: 18px;
            margin-bottom: 5px;
        }

        .jqx-grid-cell-selected-energyblue {
            background-color: #6a85c1 !important;
        }

        .card-header .btn i,
        a:link.btn i {
            margin: 0px;
        }

        .card-header a:link.btn {
            padding: 0px;
        }

        /* .marker-shiponly:before{
    position: absolute;
    content:"demo";
    background:#000;
} */
        /* milestone */
        /* .w-30 {
    width: 10% !important;
  } */

        .milestone-sec ul {
            display: flex;
            justify-content: space-between;
            flex-direction: row;
            height: 70px;
            align-items: center;
            padding: 0px;
        }

        .milestone-port {
            height: 40px;
            width: 40px;
            background-image: url(../../../../img/Milestone.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            -o-object-fit: contain;
            object-fit: contain;
        }

        .milestone-greyport {
            height: 40px;
            width: 40px;
            background-image: url(../../../../img/Milestone-gray.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            -o-object-fit: contain;
            object-fit: contain;
        }

        .milestone-ship {
            height: 40px;
            width: 40px;
            background-image: url(../../../../img/Vessel-Milestone.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            -o-object-fit: contain;
            object-fit: contain;
        }

        .milestone-ship-gray {
            height: 40px;
            width: 40px;
            background-image: url(../../../../img/Vessel-Milestone-gray.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            position: relative;
            -o-object-fit: contain;
            object-fit: contain;
        }

        .dotted-blue {
            border-bottom: 2px dashed #014d9a;
            width: 100%;
        }

        .dotted-gray {
            border-bottom: 2px dashed#cccccc;
            width: 100%;
        }

        .doc-outer-border:hover .blue-bttn {
            opacity: 1;
            transition-duration: 1s;
        }

        .orng-bttn {
            background: #ff900d;
            height: 65px;
            text-align: center;
            display: flex;
            -o-object-fit: contain;
            object-fit: contain;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition-duration: 1s;
        }

        .blue-bttn {
            cursor: pointer;
            background: #00a5e6;
            height: 65px;
            text-align: center;
            display: flex;
            -o-object-fit: contain;
            object-fit: contain;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition-duration: 1s;
        }

        .solid-blue {
            border-bottom: 2px solid #014d9a;
            width: 100%;
        }

        .solid-gray {
            border-bottom: 2px solid #cccccc;
            width: 100%;
        }

        .milestone-sec ul li {
            list-style: none;
        }

        .doc-outer {
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            height: 60px;
            overflow: hidden;
            margin-bottom: 10px;
            font-family: 'Roboto', sans-serif;
            border: 1px solid #fff;
        }

        .doc-mg .doc-img {
            width: 65%;
        }
        #modalUploadFile .doc-img{
            width: 100%;
        }
        #order-item-data .doc-img{
             width: 44% ;
        }
        

        .down-bttn {
            background: #004d9a;
            height: 65px;
            text-align: center;
            display: flex;
            -o-object-fit: contain;
            object-fit: contain;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition-duration: 1s;
        }

        .doc-outer:hover .down-bttn {
            opacity: 1;
            transition-duration: 1s;
        }

        .down-bttn .down-image {
            width: 30%;
        }

        .orng-bttn .down-image {
            width: 30%;
        }

        .blue-bttn .down-image {
            width: 30%;
        }

        .doc-outer-border {
            background: #ffffff;
            border: 1px solid #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            height: 60px;
            margin-bottom: 10px;
            overflow: hidden;
            font-family: 'Roboto', sans-serif;
            transition-duration: 1s;
        }

        .blue-border:hover {
            border: 1px solid #00a5e6;
            transition-duration: 1s;
        }

        .orange-border:hover {
            border: 1px solid #ff900d;
            transition-duration: 1s;
        }

        .doc-outer:hover {
            border: 1px solid #004d9a;
            transition-duration: 1s;
        }

        .doc-outer-border:hover .orng-bttn {
            opacity: 1;
            transition-duration: 1s;
            cursor: pointer;
        }

        .doc-outer-border:hover .blue-bttn {
            opacity: 1;
            transition-duration: 1s;
        }

        .orng-bttn {
            background: #ff900d;
            height: 65px;
            text-align: center;
            display: flex;
            -o-object-fit: contain;
            object-fit: contain;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition-duration: 1s;
        }

        .blue-bttn {
            background: #00a5e6;
            height: 90px;
            text-align: center;
            display: flex;
            -o-object-fit: contain;
            object-fit: contain;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition-duration: 1s;
        }

        .inv-no {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 0px;
        }

        .inv-dec {
            font-size: 13px;
        }

        .milestone-port,
        .milestone-greyport,
        .milestone-ship,
        .milestone-ship-gray {
            position: relative;
            display: inline-block;
        }

        .milestone-port:hover .tooltiptext-right,
        .milestone-greyport:hover .tooltiptext-right,
        .milestone-ship:hover .tooltiptext-right,
        .milestone-ship-gray:hover .tooltiptext-right {
            visibility: visible;
        }

        .milestone-port:hover .tooltiptext,
        .milestone-greyport:hover .tooltiptext,
        .milestone-ship:hover .tooltiptext,
        .milestone-ship-gray:hover .tooltiptext {
            visibility: visible;
        }

        .milestone-port .tooltiptext,
        .milestone-greyport .tooltiptext,
        .milestone-ship .tooltiptext,
        .milestone-ship-gray .tooltiptext {
            visibility: hidden;
            width: 100%;
            min-width: 200px;
            background-color: #ffffff;
            color: #000;
            text-align: center;
            border-radius: 6px;
            padding: 5px 2px;
            position: absolute;
            z-index: 1;
            bottom: 150%;
            left: 0%;
            font-family: 'Roboto';
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            z-index: 99;
            font-size: 14px;
        }

        .milestone-port .tooltiptext-right,
        .milestone-greyport .tooltiptext-right,
        .milestone-ship .tooltiptext-right,
        .milestone-ship-gray .tooltiptext-right {
            visibility: hidden;
            width: 100%;
            min-width: 200px;
            background-color: #ffffff;
            color: #000;
            text-align: center;
            border-radius: 6px;
            padding: 5px 2px;
            position: absolute;
            z-index: 1;
            bottom: 150%;
            right: 0%;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            z-index: 99;
            font-size: 14px;
        }

        .milestone-sec #milestone-append li .tooltiptext:after {
            left: 15px !important;
            content: "";
            position: absolute;
            top: 100%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #d4d4d4 transparent transparent transparent;
            z-index: 99;
            left: unset;
        }

        .milestone-sec #milestone-append li .tooltiptext-right:after {
            right: 15px !important;
            content: "";
            position: absolute;
            top: 100%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #d4d4d4 transparent transparent transparent;
            z-index: 99;
            left: unset;
        }
        .k-tooltip, .k-tooltip.k-popup, .k-tooltip.k-widget {
            border-radius: 0px;
        }
        .k-widget.k-tooltip .k-tooltip-content {
            margin: 8px;
        }

        .dropdown .dropdown-menu,
        .dropleft .dropdown-menu,
        .dropright .dropdown-menu,
        .dropup .dropdown-menu,
        .input-group .dropdown-menu {
            min-width: unset !important;
        }

        .head_menu:first-child a {
            position: relative;
        }

        .head_menu:first-child a:before {
            position: absolute;
            content: "\f060";
            left: -25px;
            font-family: FontAwesome;
            color: #52b9f3;
        }

        .head_menu:first-child a {
            margin-left: 30px;
        }

        /* login-page */

        .logo-sec>.login-logo {
            width: 50%;
        }

        .victor-sec {
            background: #e8fefb;
            height: 100vh;
        }

        .sign-in-form {
            width: 60%;
        }

        .login-section .poss-a {
            position: absolute;
            top: 15px;
            right: 15px;
        }

        /* map popover  */

        .map-overlay {
            background: #f5f5f5;
            width: 300px;
        }

        .cod-no,
        .ship-date .diss {
            font-size: 10px;
            display: block;
            color: #617183;
        }

        .ship-icon {
            height: 30px;
            width: 30px;
            position: relative;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
        }

        .ship-info {
            height: 40px;
            align-items: center;
            justify-content: center;
            display: flex;
            width: 100%;
        }

        .width-100 {
            width: 100%;
        }

        #shipinfo_down {
            display: none;
        }

        .shipinfo-close {
            position: relative;
            bottom: -8px;
        }

        .shipinfo-close.close{
            float: right;
        }

        .ship-icon:before {
            position: absolute;
            content: "";
            border-right: 2px dotted #004d9a;
            height: 100%;
            margin: 0 auto;
            bottom: -24px;
            right: unset;
            left: 50%;
            margin: 0 auto;
        }

        .ship-icon-last {
            height: 30px;
            width: 30px;
            position: relative;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
        }

        .border-bttm {
            border-bottom: 1px solid #a6a6a6;
            margin-bottom: 10px;
            color: #656161;
        }

        .port-img {
            height: 60px;
            width: 100px;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            overflow: hidden;
        }

        .port-des span {
            font-size: 12px;
        }

        .tit-style {
            font-size: 11px;
            font-weight: bold;
            font-family: 'Roboto';
        }

        .status-bar .diss {
            font-size: 10px;
            display: block;
            color: #617183;
        }

        .search-bar {
            width: 25%;
        }

        .search-bar .find-icon {
            font-size: 23px;
            color: #ccc;
        }

        .border-search,
        .border-search-delivery {
            border: 1px solid #a6a6a6;
            cursor: pointer;
        }

        /* dark theme */
        /* #dark-bg{
    background: #000000;
}

#dark-bg .nav-sub{
    background: #000000;  
}

#dark-light-bg{
    background:#1f1f1f;
} */
        /* body{
    transition-duration: 1s;
}
.dark-mode {
    background-color: #000000;
    transition-duration: 1s;
  }

  .dark-mode .sidebar-left {
      background: #000000;
      transition-duration: 1s;
      border-right: 1px solid #1f1f1f;
  }

  .dark-mode .sidebar-left #dark-bg{
    background: #000000;
    transition-duration: 1s;  
   
  }
  .dark-mode #dark-light-bg{
    background:#1f1f1f;
    transition-duration: 1s;
  }

  .dark-mode .sidebar-right{
      background: #1f1f1f;
  } */
        /* .dark-mode .main-menu #dark-bg {
    background: #000000;
    border-right:unset;  
  } */
        /* .dark-mode #dark-bg .nav-sub {
    background:#1f1f1f;
    transition-duration: 1s;
  
  }

  .dark-mode .top-toolbar.navbar-desktop .navbar-nav .nav-item>a i{
      color:#fff;
  }
 
  .dark-mode .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:hover i.icon:after{
    background: #000000;
  }
  .dark-mode .top-toolbar.navbar-desktop .navbar-nav .nav-item>a:hover i{
color:#ffffff;
  } */
        /* map popover end */

        @media only screen and (max-width: 575px) {
            .sign-in-form {
                width: 100%;
            }
        }

        /* login-page-end */

        @media only screen and (max-width: 1190px) {
            .card .card-header {
                display: block;
            }

            .card .card-toolbar {
                position: unset;
            }

            .card .card-toolbar.right-align {
                right: 0px !important;
            }

            .col-md-9.p-r-0.hide-shipment {
                width: 75%;
            }

            .col-md-3.hide-shipment-togg {
                width: 25%;
            }

            .col-md-3.shipment_filter-togg {
                width: 25%;
            }

            .col-md-9.p-r-0.shipment_filter {
                width: 75%;
            }

            #toolbargrid {
                height: 30px;
                top: 0px;
            }

            .jqx-rc-all {
                width: 215px !important;
            }

            .show_shipment_filter {
                width: 40%;
            }

            .card .card-toolbar.right-align {
                justify-content: flex-start;
            }

            .action-bar {
                width: 20%;
            }
        }

        @media only screen and (max-width: 1024px) {
            .right-google-add {
                background-position-x: -7px !important;
            }

            .add-text .head-text {
                font-size: 16px !important;
            }

            .items-list {
                font-size: 6px !important;
                font-weight: 600 !important;
            }
        }

        @media only screen and (max-width: 910px) {
            .card .card-header {
                display: block;
            }

            .card .card-toolbar {
                position: unset;
            }

            .card .card-toolbar.right-align {
                right: 0px !important;
            }

            .col-md-9.p-r-0.hide-shipment {
                width: 75%;
            }

            .col-md-3.hide-shipment-togg {
                width: 25%;
            }

            .col-md-3.shipment_filter-togg {
                width: 25%;
            }

            .col-md-9.p-r-0.shipment_filter {
                width: 75%;
            }

            #toolbargrid {
                height: 30px;
                top: 0px;
            }

            .jqx-rc-all {
                width: 215px !important;
            }

            .show_shipment_filter {
                width: 40%;
            }

            .card .card-toolbar.right-align {
                justify-content: flex-start;
            }

            .action-bar {
                width: 20%;
            }
        }

        @media only screen and (max-width: 768px) {
            .add-text {
                padding-top: 160px !important;
            }

            .add-text .head-text {
                font-size: 14px !important;
            }

            .items-list {
                font-size: 6px !important;
                font-weight: 600 !important;
            }
        }

        @media only screen and (max-width: 677px) {
            .card .card-header {
                display: block;
            }

            .card .card-toolbar {
                position: unset;
            }

            .card .card-toolbar.right-align {
                right: 0px !important;
            }

            .col-md-9.p-r-0.hide-shipment {
                width: 75%;
            }

            .col-md-3.hide-shipment-togg {
                width: 25%;
            }

            .col-md-3.shipment_filter-togg {
                width: 25%;
            }

            .col-md-9.p-r-0.shipment_filter {
                width: 75%;
            }

            #toolbargrid {
                height: 30px;
                top: 0px;
            }

            .jqx-rc-all {
                width: 215px !important;
            }

            .show_shipment_filter {
                width: 40%;
            }

            .card .card-toolbar.right-align {
                justify-content: flex-start;
            }

            .action-bar {
                width: 20%;
            }
        }

        @media only screen and (max-width: 576px) {
            .sidebar-right {
                width: 400px !important;
                right: -400px;
            }

            .nav {
                display: block;
            }

            .dropdown-menu {
                margin: 0px auto;
                right: 0 !important;
                width: 70%;
                left: unset !important;
            }

            .mapLabel-Ship {
                font-size: 12px !important;
            }

            .nav-link,
            .navbar {
                padding: 0.2rem 1rem;
            }

            .nav-tabs {
                margin-bottom: 10px;
            }
        }

        @media only screen and (max-width: 467px) {
            .sidebar-right {
                width: 274px !important;
            }

            .nav {
                display: block;
            }

            .dropdown-menu {
                margin: 0px auto;
                right: 0 !important;
                width: 70%;
                left: unset !important;
            }

            .mapLabel-Ship {
                font-size: 12px !important;
            }

            .nav-link,
            .navbar {
                padding: 0.2rem 1rem;
            }

            .nav-tabs {
                margin-bottom: 10px;
            }

            .card .card-header {
                display: block;
            }

            .card .card-toolbar {
                position: unset;
            }

            .card .card-toolbar.right-align {
                right: 0px !important;
            }

            .col-md-9.p-r-0.hide-shipment {
                width: 75%;
            }

            .col-md-3.hide-shipment-togg {
                width: 25%;
            }

            .col-md-3.shipment_filter-togg {
                width: 25%;
            }

            .col-md-9.p-r-0.shipment_filter {
                width: 75%;
            }

            #toolbargrid {
                height: 30px;
                top: 0px;
            }

            .jqx-rc-all {
                width: 215px !important;
            }

            .add-text {
                padding-top: 195px !important;
            }
        }

        @media only screen and (max-width: 425px) {
            .add-text {
                padding-top: 200px !important;
            }

            .sign-bttn {
                margin-top: 15px !important;
            }
        }

        .ellipsis-txt,
        #container_grid .ellipsis-txt div,
        #container_grid .ellipsis-txt span,
        #packing_grid .ellipsis-txt div,
        #packing_grid .ellipsis-txt span {
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mapboxgl-ctrl-logo {
            display: none !important;
        }

        .edocheading {
            color: #9aa7be;
            font-weight: 500;
            padding: 20px;
        }

        .paginationjs ul {
            display: inline-block;
            padding-left: 0;
            margin: 5px 0;
            border-radius: 4px;
        }

        .paginationjs ul>.disabled>span,
        .paginationjs ul>.disabled>span:hover,
        .paginationjs ul>.disabled>span:focus,
        .paginationjs ul>.disabled>a,
        .paginationjs ul>.disabled>a:hover,
        .paginationjs ul>.disabled>a:focus {
            color: #06519c;
            cursor: not-allowed;
        }

        .paginationjs ul>li.active a {
            border-radius: 50% !important;
            margin: 0 5px;
            background-color: #06519c;
            color: #fff !important;
            font-size: 13px;
        }

        .paginationjs ul>li>a,
        .paginationjs ul>li>span {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #06519c;
            text-decoration: none;
        }

        .paginationjs ul>li:first-child>a,
        .paginationjs ul>li:first-child>span {
            margin-left: 0;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
        }

        .paginationjs ul>li {
            display: inline;
        }

        .border-lb {
            border: 1px solid rgba(234, 243, 253, .9) !important;
        }

        .ml-n15p {
            margin-left: -15px !important;
        }

        .mr-n10p {
            margin-right: -10px !important;
        }

        .mr-n40p {
            margin-right: -40px !important;
        }

        .width-full {
            width: 100%;
        }

        /* index.html */

        .white {
            color: #ffffff;
        }

        body .header-controls .btn-menu i.white {
            color: #ffffff;
        }

        .px-roboto-light {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 300;
        }

        #head_menu_change .px-roboto-light {
            color: #617183;
        }
        .k-tooltip{
            min-width: 230px;
        }

        .px-roboto-regular {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 400;
        }

        .px-roboto-medium {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 500;
        }

        .px-roboto-bold {
            font-family: 'Roboto';
            font-style: normal;
            font-weight: 700;
        }

        .action-bar .actions>.dropdown>a.btn-fab>i,
        .action-bar .actions>a.btn-fab>i,
        .action-bar .actions>li>a.btn-fab>i {
            font-size: 1.5rem;
            width: 100%;
        }
        .sweet-alert.custom-swal-title.showSweetAlert.visible > h2{
            font-size: 23px;
        }

        #signin-form .error,
        #signup-form .error,
        #reset-pwd-block .error {
            color: #ff5c75;
        }

        .content[data-layout=tabbed] .page-header {
            padding: 30px 30px 50px !important;
            background-color: #004d9a !important;
        }

        .content[data-layout=tabbed] .search-bar-head {
            padding-bottom: 30px !important;
        }

        .loading-spin {
            background-image: url(../../../../../assets/js/jqwidgets/styles/images/loader.gif);
            background-repeat: no-repeat;
            background-position: center center;
            position: fixed;
            z-index: 999999;
            top: 50%;
            left: 50%;
            width: 120px;
            margin-top: -50px;
            margin-left: -50px;
            opacity: 0.8;
            text-align: center;
            padding-top: 60px;
            font-size: 14px;
            color: #666;
            display: none;
        }

        /* .calender-over-loader */

        .calender-over-loader {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5;
            background: rgba(255, 255, 255, 0.5);
        }

        .calender-over-loader .save-loder {
            width: 175px;
            height: auto;
        }

        /* // .calender-over-loader End */

        .px-custom-color {
            margin-top: 10px;
        }

        .px-custom-color .subgroup {
            margin-top: 10px;
            padding: 0;
        }

        /* #external-events {
            margin-top: 20px;
        } */

        @media only screen and (min-width: 576px) and (max-width: 767px) {
            .toggle-options {
                position: absolute;
                top: -50px;
                right: 0;
            }
        }

        /* Signout modal -wrap account name */
        /* .dropdown .dropdown-menu.px-sign-out {
    width: max-content;
} */

        .dropdown .dropdown-menu.px-sign-out .media-body h5.uname {
            white-space: normal;
            line-height: inherit;
            word-break: break-word;
        }

        .top-toolbar .navbar-nav .nav-item .dropdown-menu-accout .dropdown-item {
            /* text-align: center; */
            padding-left: 0;
            padding-bottom: 0;
        }

        .fc-row .fc-content-skeleton {
            min-height: 140px !important;
        }

        .fc-title {
            font-weight: 500;
            display: flex;
            align-items: center;
            font-size: 14px;
        }

        .fc-event-container .fc-day-grid-event .fc-content {
            white-space: normal;
            overflow: hidden;
            text-align: center;
            padding: 5px 2px;
            font-size: 15px;
        }

        /* launchpage */

        .px-blue {
            color: #004d9a;
        }

        .launchpage .px-login.btn,
        .launchpage .px-signup.btn {
            text-transform: capitalize;
            color: #ffffff;
            font-weight: 500;
            padding-left: 15px;
            padding-right: 15px;
            border-radius: 0px !important;
            -webkit-border-radius: 0px !important;
            -moz-border-radius: 0px !important;
            -ms-border-radius: 0px !important;
            -o-border-radius: 0px !important;
        }

        .launchpage .px-login.btn:hover,
        .launchpage .px-signup.btn:hover {
            border: 1px solid #ffffff;
        }

        .scrool-outer {
            overflow-y: auto;
            width: 100%;
            height: 920px;
            /* margin-top: 30px; */
            scrollbar-width: thin;
            /* scrollbar-color:  */
        }

        /* width */

        .scrool-outer::-webkit-scrollbar {
            width: 10px;
        }

        /* Track */

        .scrool-outer::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 5px;
        }

        /* Handle */

        .scrool-outer::-webkit-scrollbar-thumb {
            background: #99a0b3;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
        }

        /* Handle on hover */

        .scrool-outer::-webkit-scrollbar-thumb:hover {
            background: #99a0b3;
        }

        .calendar_dashboard .card-body {
            /* height: 600px; */
            /* overflow-y: scroll;
    direction: rtl; */
        }

        .calendar_dashboard .card-body .px-row {
            direction: ltr;
        }

        div#calendar {
            position: -webkit-sticky;
            position: sticky;
            top: 1px;
        }

        /* Login Page */

        .px-login-bg {
            background-image: url(../../../../../assets/img/px-login-bg.svg);
            height: 100vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .px-bg-white {
            background-color: #ffffff;
        }
        .brand-color{
            background-color: #0056a2;
            color: white;
        }

        .px-logo {
            width: 28%;
        }

        .btn-sign-in {
            width: 100%;
            color: #ffffff !important;
            position: relative;
            background: #00529e !important;
            border: 1px solid #0053a0;
            /* height:50px; */
        }

        .btn-sign-in i.px-icon {
            position: absolute;
            right: 5px;
            bottom: 10px;
            color: #fff;
        }

        .px-sign-back {
            font-size: 13px;
            cursor: pointer;
            margin-top: 35px;
        }
        .px-sign-back:hover {
         color:#00529e
        }

        .px-sign-desc {
            font-size: 15px;
            font-weight: 400;
            padding: 5px 0 15px 0;
            color: #3d4853;;
        }

        .map-with-popup {
            position: relative;
            width: 100%;
            height: 450px;
        }

        .map-with-popup .modal-dialog {
            margin-left: 25%;
            max-width: 25%;
            margin-top: 5%;
            margin-bottom: 0;
        }

        .map-with-popup .modal-content {
            border-radius: 0;
        }

        .map-popup-info,
        .map-popup-info-delivery {
            position: absolute;
            display: flex;
            align-items: flex-start;
            top: 0;
            bottom: 0;
            left: 20px;
            width: 300px;
        }

        #list-notif.card-container-wrapper,
        .card-container {
            width: 100% !important;
        }

        #list-notif .timeline {
            margin: 5px;
        }

        #list-notif .timeline-list {
            cursor: pointer;
        }

        .card-notification .card-body {
            padding: 15px !important;
        }

        #notif-section {
            width: 400px;
        }

        .disable {
            pointer-events: none;
            opacity: 0.6;
        }

        #reset-pwd-block {
            min-height: 82px;
        }

        .px-ontime::-webkit-progress-value {
            background: #004D9A !important;
        }

        .px-ontime::-moz-progress-bar {
            background: #004D9A !important;
        }

        .px-exception_orange::-webkit-progress-value {
            background: #f90 !important;
        }

        .px-completed_green::-webkit-progress-value {
            background: #2b792e !important;
        }

        .prog-overlay-icon-default {
            background-image: url(../../../../../assets/img/pathwayIconsAndImgs/Vessel-Milestone.svg);
            height: 18px;
        }

        .prog-overlay-icon-excla-red {
            background-image: url(../../../../../assets/img/pathwayIconsAndImgs/exclamation-red.svg);
            height: 18px;
        }

        .prog-overlay-icon-excla-org {
            background-image: url(../../../../../assets/img/pathwayIconsAndImgs/ship-orange.svg);
            height: 18px;
        }

        .prog-overlay-icon-complete-green {
            background-image: url(../../../../../assets/img/pathwayIconsAndImgs/ship-greennew.svg);
            height: 18px;
        }

        .prog-overlay {
            text-align: right;
            position: relative;
            top: -11px;
            padding: 7px;
            background-repeat: no-repeat;
            background-position: right;
        }

        .px-exception_orange::-moz-progress-bar {
            background: #f90 !important;
        }

        .px-completed_green::-moz-progress-bar {
            background: #2b792e !important;
        }

        .px-doc-missing::-webkit-progress-value {
            background: #e52c48 !important;
        }

        .px-doc-missing::-moz-progress-bar {
            background: #e52c48 !important;
        }

        .fs-24 {
            font-size: 24px !important;
        }

        .fs-35 {
            font-size: 35px !important;
        }

        .text-warning-n {
            color: #f90;
        }

        .text-danger-n {
            color: #e52d49;
        }

        .text-import-n {
            color: #972cee;
        }

        .text-export-n {
            color: #eb0cc5;
        }

        .text-shipment-n {
            color: #b9075a;
        }

        .text-warning-n {
            color: #fe9900;
        }

        .mapboxgl-popup-content {
            padding: 11px !important;
            color: #004d9a !important;
            font-weight: bold !important;
        }

        @media only screen and (min-width: 2558px) {
            .map-with-popup {
                position: relative;
                width: 100%;
                height: 780px;
            }

            #mainmap .mapboxgl-canvas {
                height: 780px;
            }

            .add-text {
                padding-top: 180px !important;
            }
        }

        @media only screen and (min-width: 1600px) {
            #select2-ship-vol-container {
                padding: 0px 20px !important;
            }

            #select2-ship-vol-results li {
                padding: 10px 20px !important;
            }

            #select2-ship-type-container {
                padding: 0px 20px !important;
            }

            #select2-ship-type-results .select2-results__option {
                padding: 10px 20px !important;
            }

            #select2-ship-date-container {
                padding: 0px 20px !important;
            }

            #select2-ship-date-results .select2-results__option {
                padding: 10px 20px !important;
            }

            #financial-tab .my-4 .select-dropdown .select2-container--default .selection .select2-selection .select2-selection__rendered {
                padding: 0px 20px;
            }

            /* .select2-container .select2-dropdown .select2-search  */
            .select2-results .select2-results__options .select2-results__option {
                padding: 10px 20px !important;
                font-size: 14px !important;
            }

            #groupage-tab .my-4 .select-dropdown .select2-container--default .selection .select2-selection .select2-selection__rendered {
                padding: 0px 20px !important;
            }

            .card-toolbar .custom-ul .nav-item .nav-link {
                padding: 5px 12px !important;
                font-size: 12px !important;
            }

            #select2-goods-type-container {
                padding: 0 20px !important;
            }

            #select2-perf-track-fil-container {
                padding: 0 20px !important;
                font-size: 14px !important;
            }

            .add-text {
                padding-top: 230px !important;
            }

            .sign-bttn {
                margin: 0px auto !important;
                width: 70%;
                margin-top: 40px !important;
            }

            .right-google-add {
                height: 600px !important;
            }

            .items-list {
                font-size: 13px !important;
            }

            .add-text .head-text {
                font-size: 24px !important;
            }
            .scrool-outer {
                height: 1080px;
            }
           
        }

        .arrow-right {
            width: 100%;
            justify-content: space-around;
            align-items: center;
            display: flex;
        }

        .arrow {
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            z-index: 9;
            top: 0;
            bottom: 0;
            width: 30%;
        }

        .arrow .left-arw,
        .right-arw {
            transition-duration: .5s;
            width: 40%
        }

        .animated {
            -webkit-animation-duration: 2.5s;
            animation-duration: 2.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }

        @-webkit-keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .pulse {
            -webkit-animation-name: pulse;
            animation-name: pulse;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
        }

        .prev-month-arrow,
        .next-month-arrow {
            display: none !important;
        }

        .over-text {
            /* filter: blur(10px);
    -webkit-filter: blur(10px); */
            color: #000;
            position: absolute;
            padding: 20px;
            z-index: 99;
            width: 100%;
            height: 100%;
        }

        .over-content {
            width: 90%;
            height: 90%;
            background: rgba(60, 60, 60, 0.521);
            text-align: center;
            justify-content: center;
            align-items: center;
            display: flex;
            color: #fff;
        }

        .dis-none-imp {
            display: none !important;
        }

        .right-google-add {
            /* background-image: url(../../../../img/add-bg.png); */
            height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: top center;
            height: 450px;
            background: #fff;
            padding: 15px;
            position: relative;
        }

        .right-google-add:before {
            position: absolute;
            content: "";
            background-image: url(../../../../img/add-top-bg.png);
            width: 100%;
            background-repeat: no-repeat;
            background-position: top;
            left: 0px;
            top: 0px;
            background-size: contain;
            height: 215px;
        }

        .right-google-add:after {
            position: absolute;
            content: "";
            background-image: url(../../../../img/add-bottom-bg.png);
            width: 100%;
            background-repeat: no-repeat;
            background-position: top;
            right: 0px;
            bottom: 0px;
            background-size: cover;
            height: 150px;
            z-index: 0;
        }

        .add-text {
            padding-top: 150px;
        }

        .add-text .head-text {
            font-size: 17px;
            font-weight: 600;
            color: #004d9a;
            font-family: 'Roboto';
        }

        .add-text .head-text span {
            color: #00a5e6;
        }

        .add-list-view {
            padding-top: 10px;
        }

        .list-point {
            height: 10px;
            width: 10px;
            object-fit: cover;
        }

        .items-list img {
            margin-right: 5px;
        }

        .items-list {
            list-style: none;
            padding-bottom: 5px;
            font-size: 8.5px;
            position: relative;
            z-index: 9;
            font-family: 'Roboto';
            color: #004d9a;
            font-weight: 600;
        }

        .sign-bttn {
            background-image: url(../../../../img/bttn-bg.png);
            width: 70%;
            margin: 0 auto;
            text-align: center;
            padding: 6px 10px;
            color: #fff;
            /* text-transform: capitalize; */
            position: relative;
            z-index: 9;
            background-size: cover;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            margin-top: 30px;
        }

        .sign-bttn a {
            color: #fff;
            font-size: 12px;
            font-weight: 500;
            font-family: 'Roboto';
        }

        .shipinfo-text {
            color: #617183;
            font-weight: 600;
            font-size: 21px;
        }

        .shipinfo-text i {
            color: #00a5e6;
            margin-right: 10px;
        }

        .mapboxgl-map {
            max-height: 450px;
            min-height: 350px;
            height: 100%;
        }
        #lastmile{
            max-height:100%;
            min-height:350px;
            height:100%;
        }

        .mapboxgl-canvas {
            height: 100%;
            object-fit: cover;
        }

        .tab-inner-back {
            background: #06519c;
            color: #ffffff;
            padding: 3px 9px;
        }

        .select2-results__option--selectable::before {
            content: "";
            position: absolute;
            right: 5px;
            height: 17px;
            width: 30px;
            z-index: 1;
            background: url(../../../../img/toggle-off.svg) 0% 0% / contain no-repeat;
            background-repeat: no-repeat;
        }

        .select2-container--default .select2-results>.select2-results__options {
            max-height: 100% !important;
            background: #004d9a;
            overflow: unset !important;
        }

        .select2-results__option--selectable {
            position: relative;
            color: rgb(255, 255, 255);
        }

        .select2-container--default .select2-results__option--selected {
            color: rgb(255, 255, 255) !important;
            background: rgb(166, 193, 219) !important;
        }

        .select2-results__option--selected::before {
            content: "";
            position: absolute;
            right: 5px;
            height: 17px;
            width: 30px;
            z-index: 9;
            background: url(../../../../img/toggle-on.svg) 0% 0% / contain no-repeat;
            background-repeat: no-repeat;
        }

        #select2-group-ship-vol-results .select2-results__option--selected::before {
            visibility: hidden;
        }

        #select2-group-ship-vol-results .select2-results__option--selectable::before {
            visibility: hidden;
        }

        #select2-group-ship-type-results .select2-results__option--selected::before {
            visibility: hidden;
        }

        #select2-group-ship-type-results .select2-results__option--selectable::before {
            visibility: hidden;
        }

        #select2-group-ship-date-results .select2-results__option--selected::before {
            visibility: hidden;
        }

        #select2-group-ship-date-results .select2-results__option--selectable::before {
            visibility: hidden;
        }

        .select2-results__option--selected {
            position: relative;
        }

        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: #a6c1db;
            color: white;
        }

        .select2-container--default .select2-selection--multiple {
            background: #004d9a !important;
            border: 1px solid #7fa5cc !important;
            border-radius: 10px !important;
            -webkit-border-radius: 10px !important;
            -moz-border-radius: 10px !important;
            -ms-border-radius: 10px !important;
            -o-border-radius: 10px !important;
        }

        .select2-container--default .select2-results__option--selected {
            color: rgb(255, 255, 255) !important;
            background: #9cbad8 !important;
        }

        .select2-dropdown {
            border: 1px solid #7fa5cc !important;
            overflow: hidden;
        }

        #select2-ship-vol-results .select2-results__option--selectable::before {
            visibility: hidden;
        }

        #select2-ship-type-results .select2-results__option--selectable::before {
            visibility: hidden;
        }

        #select2-ship-date-results .select2-results__option--selectable::before {
            visibility: hidden;
        }

        /* #select2-data-11-qn3y .select2-container{
    width: 100% !important;
}  */

        .h-60 {
            height: 60px;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #ffffff !important;
            line-height: 33px !important;
            background: #004d9a;
            padding: 0px 10px !important;
            border: transparent;
            height: 100%;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: #fff transparent transparent transparent !important;
            border-style: solid;
            border-width: 5px 4px 0 4px;
            height: 0;
            left: 50%;
            margin-left: -4px;
            margin-top: -2px;
            position: absolute;
            top: 70% !important;
            width: 0;
        }

        #groupage-tab .select-dropdown .select2-container--default .select2-selection--single .select2-selection__rendered {
            background: #80d1f2;
            border: none !important;
        }

        #groupage-tab .select2-selection {
            border: none;
        }

        #select2-group-ship-vol-results {
            background: #80d1f2;
        }

        #select2-group-ship-vol-results .select2-results__option--selected,
        .select2-results__option--highlighted {
            background: rgb(127 165 204) !important;
        }

        #select2-data-30-g7zc .select2-results__option--selected,
        .select2-results__option--highlighted {
            background: rgb(127 165 204) !important;
        }

        #select2-group-ship-vol-results .select2-dropdown {
            border: 1px solid #bfe8f9 !important;
        }

        #select2-group-ship-type-results {
            max-height: 100% !important;
            background: #80d1f2;
            overflow: unset !important;
        }

        #select2-group-ship-type-results .select2-results__option--selected {
            background: #a6dff6 !important;
        }

        #select2-group-ship-date-results {
            background: #80d1f2;
        }

        #select2-group-ship-date-results .select2-results__option--selected {
            background: #a6dff6 !important;
        }

        .select2-dropdown {
            border: none !important;
        }

        .select2-results {
            border-radius: 0px 0px 20px 20px !important;
            overflow: hidden;
            border: none !important;
            -webkit-border-radius: 0px 0px 20px 20px !important;
            -moz-border-radius: 0px 0px 20px 20px !important;
            -ms-border-radius: 0px 0px 20px 20px !important;
            -o-border-radius: 0px 0px 20px 20px !important;
            background: transparent !important;
        }

        .select2-dropdown {
            background: none !important;
        }

        .select2-dropdown {
            border: none;
            box-shadow: none !important;
        }

        .select2-container--default .select2-selection--single {
            border: none !important;
        }

        #select2-group-ship-vol-results .select2-results__option--selected,
        .select2-results__option--highlighted {
            background: #a6dff6 !important;
        }

        #select2-ship-vol-results .select2-results__option--highlighted {
            background: #9cbad8 !important;
        }

        #select2-ship-type-results .select2-results__option--highlighted {
            background: #9cbad8 !important;
        }

        #select2-ship-date-results .select2-results__option--highlighted {
            background: #9cbad8 !important;
        }

        .tooltip-hover {
            background: #80a0c1;
            color: #fff;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            -ms-border-radius: 10px;
            -o-border-radius: 10px;
            padding: 2px 5px;
        }

        /* .primary-tabs  .nav-item{
    padding-right:40px;
} */

        .select-dropdown .select2-container {
            width: 100% !important;
            font-size: 14px;
            font-weight: 300;
        }

        /* .select2-container--default .select2-selection--multiple, .select2-container--default .select2-selection--single {
    min-height: 35px!important;
    height:35px;
} */

        .select2-results__options .select2-results__option {
            font-size: 14px;
            font-weight: 300;
        }

        .tgl-common+.tgl-btn:after {
            border-radius: 50%;
            background: #fff;
            transition: all .2s ease;
        }

        .tgl-common+.tgl-btn {
            border-radius: 2em;
            padding: 2px;
            transition: all .4s ease;
        }

        .tggl-danger+.tgl-btn {
            background-color: #e52d49 !important;
        }

        .tggl-warning+.tgl-btn {
            background-color: #fe9900 !important;
        }

        .tggl-processed+.tgl-btn {
            background-color: #2b792e !important;
        }

        .tggl-import+.tgl-btn {
            background-color: #972cee !important;
        }

        .tggl-export+.tgl-btn {
            background-color: #eb0cc5 !important;
        }

        .tggl-shipment+.tgl-btn {
            background-color: #b9075a !important;
        }

        .tggl-brokerage+.tgl-btn {
            background-color: #794a2b !important;
        }

        .dec-search {
            height: 24px;
        }

        #task-search {
            width: 350px;
        }

        .dec-status::after {
            content: '';
            display: inline-block;
            float: right;
            height: 15px;
            width: 30px;
            cursor: pointer;
            background-image: url('pathwayIconsAndImgs/Union_14@2x.png');
            background-size: 100% 100%;
        }

        .dec-column-pointer {
            cursor: pointer;
        }

        .text-primary-n {
            color: #004d9a;
        }

        .text-disabled-n {
            color: #ccc;
        }

        .text-processed-n {
            color: #2b792e;
        }

        .danger-border {
            border-left: 3px solid #e52d49;
        }

        .danger-border-dec::before {
            content: '';
            position: relative;
            z-index: 1000;
            float: left;
            height: 31px;
            border-left: 6px solid #e52d49;
        }

        .warning-border {
            border-left: 3px solid #fe9900;
        }

        .warning-border-dec::before {
            content: '';
            position: relative;
            z-index: 1000;
            float: left;
            height: 31px;
            border-left: 6px solid #fe9900;
        }

        .primary-border {
            border-left: 6px solid #004d9a;
        }

        .primary-border-dec::before {
            content: '';
            position: relative;
            z-index: 1000;
            float: left;
            height: 31px;
            border-left: 6px solid #004d9a;
        }

        .brokerage-border-dec::before {
            content: '';
            position: relative;
            z-index: 1000;
            float: left;
            height: 31px;
            border-left: 6px solid #2b792e;
        }

        .import-border-dec::before {
            content: '';
            position: relative;
            z-index: 1000;
            float: left;
            height: 31px;
            border-left: 6px solid #972cee;
        }

        .export-border-dec::before {
            content: '';
            position: relative;
            z-index: 1000;
            float: left;
            height: 31px;
            border-left: 6px solid #eb0cc5;
        }

        .shipment-border-dec::before {
            content: '';
            position: relative;
            z-index: 1000;
            float: left;
            height: 31px;
            border-left: 6px solid #b9075a;
        }

        #grid_layout {
            z-index: 1;
        }

        .p-7 {
            padding-right: 7px;
        }

        .ml--7 {
            margin-right: -7px;
        }

        /* .task-list {
    height: 75px;
} */

        .task-in-box {
            background-color: #eee;
        }

        /* .t-box {
    margin: 7px 0 6px 0;
    padding: 30px;
    border: 1px solid #979fa8;
} */

        .task-in-title {
            background-color: #eee;
            padding: 15px 15px 15px 0;
        }

        .task-list-block {
            overflow: auto;
            max-height: 500px;
        }

        .p-r-15 {
            padding-right: 15px;
        }

        .task-in-event {
            border-radius: 0 6px 6px 0;
            display: flex;
        }

        .task-in-event a {
            flex: 1;
        }

        .task-in-primary {
            background-color: #eee;
        }

        .task-in-hover {
            background-color: #004e99;
        }

        .arrow-hover {
            font-size: 30px !important;
            color: #fff;
        }

        .task-title-img {
            margin: 25px 10px;
        }

        li.dropdown {
            list-style-type: none;
        }

        .task-dropdown {
            margin: 5px -15px 0px 0px !important;
            /* width: 253px !important; */
            max-height: 250px;
            overflow: auto;
        }

        .task-dropdown::-webkit-scrollbar-thumb {
            background: #99a0b3;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
        }

        .task-dropdown::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 5px;
        }

        .task-btn-blue {
            background-color: #00a5e5 !important;
            border-color: #00a5e5 !important;
            border-radius: 2px;
            color: #ffffff !important;
            width: 100% !important;
        }

        .task-btn-primary {
            background-color: #fff;
            border-color: #aaa;
            border-radius: 2px;
            color: #aaa;
            width: 100%;
        }

        .task-btn-dark-blue {
            background-color: #004e99 !important;
            border-color: #004e99 !important;
            border-radius: 2px;
            color: #ffffff !important;
        }

        .p-l-0 {
            padding-left: 0;
        }

        #status-msg {
            text-align: center;
        }

        #veh-reg-form .form-group-error .error {
            color: #d01039;
        }

        .form-group-error .input-group-task {
            background-color: #d01039 !important;
        }

        /* task table */

        @media (min-width: 1500px) {
            .ex-large-srn {
                flex: 0 0 50.0000%;
                max-width: 50.0000%;
            }

            .select2-container--default .select2-selection--single .select2-selection__rendered {
                padding: 0px 20px !important;
            }

            #select2-goods-type-container {
                font-size: 14px !important;
            }

            #select2-goods-type-results .select2-results__option {
                font-size: 14px !important;
            }

            .hide-shipment label {
                font-size: 14px !important;
            }

            .sidebar-right {
                width: 45% !important;
                right: -45%;
            }

            .t-box {
                margin: 12px 0 12px 0;
            }

            .task-in-title {
                padding: 25px 5px 25px 0;
            }

            .task-tab-link {
                width: 100px !important;
            }

            .doc-outer-border {
                height: 90px;
            }

            .orng-bttn {
                height: 90px;
            }

            .doc-outer {
                height: 110px;
            }

            .down-bttn {
                height: 110px;
            }

            .down-bttn .down-image {
                width: 50%;
            }

            .dec-search {
                width: 75%;
            }

            #shipment-info-card .nav-tabs {
                display: flex;
                justify-content: space-around;
            }

            .small-text {
                font-size: 13px !important;
            }

            .side-bar-title b {
                display: block;
            }
            .scrool-outer {
                height: 1083px;
            }
          
        }
        @media (max-width: 1300px) {

            #tracking-modal .branch-track .word{
                font-size: 12px !important;
            }
            #tracking-modal .branch-track .date{
                font-size: 12px !important;
            }
            #accordion .card .card-header button.btn.btn-link h5 {
                font-size: 12px !important;
            }
             #accordion  .card-header button .route{
                font-size: 9px !important;
            }

        }
        @media  (min-width: 1301px) and (max-width: 1500px) {

            #accordion .card .card-header button.btn.btn-link h5.accordion-title {
                font-size:12px

            }
            #accordion  .card-header button .route{
                font-size: 12px !important;
            }

        }
        @media (max-width: 1300px) {
            #accordion .card .card-header button.btn.btn-link h5{
                font-size: 10px !important;
            }
        }
        .sidebar-right {
            width: 45% !important;
            right: -45%;
        }
        #shipment-info-card .nav-tabs,#dec-batch-download .nav-tabs ,#team-management-section .nav-tabs, #user-team-create .nav-tabs{
            display: flex;
            justify-content: space-around;
        }

        #task-list-block {
            overflow-y: scroll;
        }

        #task-list-block::-webkit-scrollbar-track {
            /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        #task-list-block::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
        }

        #task-list-block::-webkit-scrollbar-thumb {
            border-radius: 10px;
            /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
            background-color: #99a0b3;
        }

        .task-in-box {
            padding: 0 15px;
        }

        .t-box {
            height: 60px;
            width: 60px;
            border: 1px solid #979fa8;
        }

        .task-list {
            background: #eeeeee;
        }

        .task-tab-link {
            right: 0px;
            height: 100%;
            width: 70px;
            display: flex;
            align-items: center;
        }

        .border-radius-task {
            border-radius: 0 20px 20px 0;
            -webkit-border-radius: 0 20px 20px 0;
            -moz-border-radius: 0 20px 20px 0;
            -ms-border-radius: 0 20px 20px 0;
            -o-border-radius: 0 20px 20px 0;
            overflow: hidden;
        }

        .task-f-color {
            color: #637080;
        }

        .brand-color {
            background: #004d9a !important;
        }

        .sidebar-content #sidebar-tabs .tab-content {
            overflow-y: scroll !important;
            overflow-x: hidden;
        }
        #dec-batch-download  #sidebar-tabs .tab-content {
            overflow-y: hidden !important;
            overflow-x: hidden;
            max-height: calc(86vh - 100px);
            height: calc(86vh - 100px);
          }
         #user-team-create #sidebar-tabs .tab-content{
            overflow-y: auto !important;
            overflow-x: hidden;
            max-height: calc(86vh - 60px);
            height: calc(86vh - 70px);
         }

        #nation-dropdown .task-dropdown {
            width: 100% !important;
        }
       #doc-operations .doc-row-section {
           overflow-y: auto !important;
           overflow: scroll;
           max-height: calc(75vh - 100px);
           height: calc(75vh - 100px);
           overflow-x: hidden;
       }
        /* #nation-dropdown{
            width: 322px !important;
        } */

        .search-b-bttn {
            background: transparent;
            border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            -ms-border-radius: 30px;
            -o-border-radius: 30px;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            text-decoration: none;
            text-transform: uppercase;
            height: 53px;
            transition-duration: 1s;
        }

        .search-b-bttn i {
            line-height: 0px;
            color: #fff;
        }

        .dec-grid-search {
            width: 66%;
        }

        .search-b-bttn:hover {
            background: #fff;
            transition-duration: 1s;
        }

        .search-b-bttn:hover i {
            color: #06519c;
            transition-duration: 1s;
        }

        /* chat icon for taptap */
        /* .card.chat-icon{
    position: fixed;
    right: 20px;
    bottom: 20px;
    background: red;
    width: 100px;
    height: 100px;
    z-index: 999;
} */

        .chat-icon {
            position: fixed;
            border: 2px solid #05519c;
            right: 20px;
            bottom: 30px;
            border-radius: 100%;
            background: white;
            color: #05519c;
            cursor: pointer;
            width: 70px;
            height: 70px;
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 33px;
        }

        .popup-taptap-chat-window {
            display: none;
            height: 90%;
            position: fixed;
            bottom: 30px;
            background: #f5f5f5;
            width: 25%;
            right: 10px;
            border-radius: 10px;
            z-index: 9999999;
            padding: 10px;
        }

        iframe {
            width: 100%;
            height: 94%;
            border: 2px solid #f5f5f5;
            border-radius: 0 0 20px 20px
        }

        .popup-taptap-chat-window .close-bttn {
            position: relative;
            text-align: right;
            font-size: 15px;
            padding: 0px 5px 5px 10px;
            color: #004d9a;
            cursor: pointer;
            font-weight: 500;
            text-transform: capitalize;
        }

        @media (max-width:767px) {
            .popup-taptap-chat-window {
                width: 80% !important;
            }
        }

        /* .customColorActive{
    color: #9790f1  !important;
    font-weight: 500 !important;
    }
    .customColorActive.active { color: #1c1299  !important;}

    .customColorActive.nav-link:hover{color: #3426ef  !important;} */

        /* .global-filter-i-block {
            margin-top: 133px;
            width: 270px;
        } */

        .custom-clear-filter {
            right: 30px;
            top: 8px;
            position: absolute;
        }

        .show-selected-block {
            min-height: 150px;
            width: 100%;
            border: 1px solid #dfe7f3;
            border-radius: 5px;
        }

        .dropdown-span {
            position: absolute;
            left: 12px;
            top: 6px;
            color: #617182;
        }

        @media only screen and (max-width: 1399px) and (min-width: 1000px) {
            .modal-sized {
                width: 80% !important;
            }

            .btn-back {
                width: 65% !important;
            }

            .field-custom>input {
                height: 65px !important;
                font-size: 20px;
            }

            .nxt-arrow>.input-group-task {
                width: 50px !important;
                height: 50px !important;
                border-radius: 50% !important;
                line-height: 50px !important;
                text-align: center;
                font-size: 22px;
            }

            .input-group .dropdown-menu .dropdown-item {
                font-size: 20px !important;
            }

            .cd-h3 {
                font-size: 20px !important;
            }

            .pick-time {
                font-weight: 600;
                font-size: 25px;
                margin-bottom: 10px;
            }

            .cd-style {
                margin-top: 30px !important;
            }

            .larg-screen-xl-3 {
                flex: 0 0 25%;
                max-width: 25% !important;
            }

            .larg-screen-xl-9 {
                flex: 0 0 75%;
                max-width: 75% !important;
            }

            .remove-icon {
                padding-left: 3px;
            }

            .selected-item-text {
                padding: 7px 10px 0 10px !important;
            }

            .text-success,
            .text-danger,
            .text-warning {
                font: normal normal normal 24px/1 FontAwesome !important;
                display: inline-block;
                padding-right: 15px;
            }

            .tooltip-inner {
                background-color: transparent !important;
                color: #E7F1FD;
                box-shadow: none !important;
                font-size: 15px !important;
                border-radius: 30px;
                padding: 7px 15px;
                text-align: center;
                min-width: 100%;
                color: #000;
            }

            .w-80 {
                width: 80%;
            }

            .f-20 {
                font-size: 20px !important;
            }

            .f-16 {
                font: size 16px !important;
            }

            .hgt-adjust {
                height: 50px;
                border-radius: 10px 0 0 10px;
            }

            .hgt-adjust>.dropdown-span {
                top: 12px;
                font-size: 17px;
            }

            .input-group-task {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .drop-font>li a ,#shipper_filter_batch_download .batchfilter-li span,#consignee_filter_batch_download .batchfilter-li span,#shipper_filter_batch_download .batchfilter-li .dropdown-item{
                font-size: 17px;
                color: #969696;
                display: inline-block;
                width: 40%;
            }


            .dropdown-menu .form-filter .filter-input {
                height: 45px;
                border: 1px solid #dedede;
                background: none;
                font-size: 17px;
                color: #969494 !important;
            }

            .m-width {
                min-width: 96% !important;
                box-shadow: 2px 11px 10px #c1c1c1;
                border: none;
            }

            .dropdown-menu .form-filter .filter-input {
                width: 97%;
            }

            .drop-font>li {
                line-height: 1.75;
            }
        }
        @media screen and (min-width: 1400px) {
            .modal-sized {
                width: 80% !important;
            }

            .btn-back {
                width: 65% !important;
            }

            .field-custom>input {
                height: 65px !important;
                font-size: 20px;
            }

            .nxt-arrow>.input-group-task {
                width: 50px !important;
                height: 50px !important;
                border-radius: 50% !important;
                line-height: 50px !important;
                text-align: center;
                font-size: 22px;
            }

            .input-group .dropdown-menu .dropdown-item {
                font-size: 20px !important;
            }

            .cd-h3 {
                font-size: 20px !important;
            }

            .pick-time {
                font-weight: 600;
                font-size: 25px;
                margin-bottom: 10px;
            }

            .cd-style {
                margin-top: 30px !important;
            }

            .larg-screen-xl-3 {
                flex: 0 0 25%;
                max-width: 25% !important;
            }

            .larg-screen-xl-9 {
                flex: 0 0 75%;
                max-width: 75% !important;
            }

            .remove-icon {
                padding-left: 3px;
            }

            .selected-item-text {
                padding: 7px 10px 0 10px !important;
            }

            .text-success,
            .text-danger,
            .text-warning {
                font: normal normal normal 24px/1 FontAwesome !important;
                display: inline-block;
                padding-right: 15px;
            }

            .tooltip-inner {
                background-color: transparent !important;
                color: #E7F1FD;
                box-shadow: none !important;
                font-size: 15px !important;
                border-radius: 30px;
                padding: 7px 15px;
                text-align: center;
                min-width: 100%;
                color: #000;
            }

            .w-80 {
                width: 80%;
            }

            .f-20 {
                font-size: 20px !important;
            }

            .f-16 {
                font: size 16px !important;
            }

            /* #address_section_body{
    position:relative;
    top:-100px;
  } */
            .hgt-adjust {
                height: 50px;
                border-radius: 10px 0 0 10px;
            }

            .hgt-adjust>.dropdown-span {
                top: 12px;
                font-size: 17px;
            }

            .input-group-task {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .drop-font>li a ,#shipper_filter_batch_download .batchfilter-li span,#consignee_filter_batch_download .batchfilter-li span{
                font-size: 17px;
                color: #969696;
                display: inline-block;
                width: 25%;
            }

            .dropdown-menu .form-filter .filter-input {
                height: 45px;
                border: 1px solid #dedede;
                background: none;
                font-size: 17px;
                color: #969494 !important;
            }

            .m-width {
                min-width: 96% !important;
                box-shadow: 2px 11px 10px #c1c1c1;
                border: none;
            }

            .dropdown-menu .form-filter .filter-input {
                width: 97%;
            }

            .drop-font>li {
                line-height: 1.75;
            }
        }
        .dropdown-modal .drop-font>li>a ,.dropdown-modal-gridEdit .drop-font>li>a {
            font-size: 17px;
            color: #969696;
            display: inline-block;
            width: 100%;
            cursor: pointer;
        }

        .h-75 {
            height: 75% !important;
        }

        .danger-bttn {
            width: 65% !important;
            background: #cb1d34;
            color: #fff;
        }

        .p-20 {
            padding: 20px !important;
            height: auto !important;
        }

        .f-18 {
            font-size: 18px !important;
        }

        .p-r-5 {
            border-radius: 5px;
        }

        .circle-icon {
            height: 30px;
            width: 30px;
            border: 1px solid #004d9a !important;
            border-radius: 50%;
            text-align: center;
            line-height: 8px;
            padding: 0px !important;
            color: #004d9a !important;
            font-size: 24px;
        }

        .w-80 {
            width: 80% !important;
            ;
        }

        .active-text {
            color: #3ebbec !important;
        }

        .btn-theme {
            background: #004d9a;
            color: #fff !important;
        }

        .dec-status:hover:after {
            height: 25px;
            width: 45px;
            position: absolute;
            top: 5px;
            right: 10px;
        }

        .shipment_pseudo:hover:before {
            height: 18px;
            width: 35px;
            position: relative;
            top: 4px;
            left: 0px;
        }

        .container_pseudo:hover:before {
            height: 18px;
            width: 35px;
            position: relative;
            top: 0px;
            left: 0px;
        }

        .ref_col,.cursor-pointer {
            cursor: pointer;
        }

        .add-reff {
            width: 100%;
            height: 75px;
            padding: 10px;
            border: 1px solid #f5f5f5;
            margin-top: 15px;
            font-size: 20px;
        }
        .add-reff-lastmile {
            width: 100%;
            height: 30px;
            /* padding: 10px; */
            border: 1px solid #f5f5f5;
            /* margin-top: 15px; */
            font-size: 12px;
        }

        .custom-pop>.modal-content {
            width: 100% !important;
        }

        .sus-popup {
            position: absolute;
            width: 70%;
            background: #fff;
            border: 1px solid #f3f3f3;
            border-radius: 5px;
            text-align: center;
            top: 250px;
            z-index: 999;
            padding: 20px;
            left: 0px;
            right: 0px;
            margin: 0 auto;
            box-shadow: 1px 1px 10px #cecece;
        }

        .upload-status {
            border: 2px dotted #212529;
            width: 100%;
            border-radius: 5px;
            height: 90px;
            overflow: hidden;
        }

        .file-sec {
            width: 10%;
            text-align: center;
            padding: 10px;
        }

        .icon-sus {
            height: 70px;
            width: 70px;
            border: 1px solid #27dc99;
            line-height: 70px;
            border-radius: 50%;
            margin: 0 auto;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .head-style {
            text-transform: uppercase;
            font-size: 20px;
            font-weight: 600;
        }

        .dec-style {
            text-transform: capitalize;
            font-style: italic;
            font-size: 16px;
        }

        .icon-sus i {
            color: #27dc99;
        }

        .file-status {
            width: 90%;
            overflow: hidden;
        }

        .sus-bttn {
            width: 20%;
            background: #00a5e6;
            color: #fff;
            border: none;
            text-transform: uppercase;
            padding: 10px 20px;
            border-radius: 5px;
        }

        /* V3 - 27-09-2021 */

        .px-haulier-bg h1,
        .px-haulier-bg .h1,
        .px-haulier-bg p,
        .px-haulier-bg span,
        .px-haulier-login ul,
        .px-haulier-login ul li {
            font-family: 'Roboto', sans-serif !important;
        }

        .text-blue {
            color: #004d9a !important;
        }

        .px-haulier-bg {
            background-image: url(../../../../../assets/img/px-login-bg.svg);
            height: 100vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            font-family: 'Roboto', sans-serif !important;
        }

        .px-enter-num {
            font-weight: 400;
        }

        .btn-prelodged {
            color: #ffffff;
            border-radius: 20px;
            font-weight: 500;
            text-transform: uppercase;
            width: 40%;
            margin-top: 10px;
        }

        .btn-bg-yellow {
            background-color: #ff9900;
        }

        .btn-bg-blue {
            background-color: #00a5e6;
        }

        .btn-bg {
            color: #fff;
            border: 1px solid #009ade;
            background: rgb(2, 0, 36);
            background: linear-gradient(90deg, #004d9a 35%, #009ade 100%);
            width: 200px;
            font-weight: 500;
            position: relative;
        }

        .btn-bg:hover {
            border: 1px solid #004d9a;
            color: #004d9a;
            background: transparent;
        }

        .btn-bg svg {
            position: absolute;
            right: 10px;
            top: 10px;
            color: #ffffff;
            font-size: 16px;
        }

        .btn-bg:hover svg {
            color: #00529f;
        }

        .btn-trnsbg {
            border: 1px solid #004d9a;
            color: #004d9a;
            width: 200px;
            background: transparent;
            position: relative;
            font-weight: 500;
        }

        .btn-trnsbg:hover {
            color: #fff;
            border: 1px solid #009ade;
            background: rgb(2, 0, 36);
            background: linear-gradient(90deg, #004d9a 35%, #009ade 100%);
        }

        .btn-trnsbg svg {
            position: absolute;
            left: 10px;
            top: 10px;
            color: #00529f;
            font-size: 16px;
        }

        .btn-trnsbg:hover svg {
            color: #ffffff;
        }

        form.px-haulier-form input.form-control {
            border: 1px solid #cdcdcd;
            height: 40px;
        }

        .btn-section button.btn:first-child {
            margin-right: 20px;
        }

        .px-haulier-login {
            position: absolute;
            right: 40px;
            top: 20px;
        }

        .px-create-acc {
            padding: 8px 26px;
            /* border: 1px solid #0059a4; */
            line-height: normal;
            display: block;
            margin-left: 20px;
            background: rgb(2, 0, 36);
            background: linear-gradient(90deg, #004d9a 35%, #009ade 100%);
            color: #ffffff;
        }

        .px-create-acc a {
            color: #ffffff;
            font-weight: 500;
        }

        .px-signin a {
            font-weight: 500;
            color: #004d9a;
        }

        .px-privacy label {
            font-size: 11.5px !important;
        }

        @media (max-width: 575px) {

            .btn-trnsbg,
            .btn-bg,
            .btn-prelodged {
                width: 100%;
            }

            .btn-section button.btn:first-child {
                margin-right: 0;
                margin-bottom: 20px;
            }

            .px-haulier-num h1.h1 {
                font-size: 22px;
            }

            .px-haulier-num.p-4 {
                padding: 0 !important;
            }
        }

        @media (min-width:576px) and (max-width: 767px) {
            .px-haulier-num h1.h1 {
                font-size: 22px;
            }

            .btn-prelodged {
                width: 50%;
            }

            .btn-section button.btn:first-child {
                margin-right: 0;
                margin-bottom: 20px;
            }

            .btn-trnsbg,
            .btn-bg {
                width: 50%;
            }
        }

        @media (min-width: 768px) and (max-width: 991px) {
            .px-haulier-num h1.h1 {
                font-size: 22px;
            }

            .btn-prelodged {
                width: 50%;
            }

            .btn-section button.btn:first-child {
                margin-right: 0;
                margin-bottom: 20px;
            }
        }

        @media (min-width: 1900px) {
            .px-haulier-bg img.w-150.mb-5 {
                width: 200px !important;
            }

            .px-haulier-num.p-4 {
                margin-bottom: 100px;
            }

            .px-haulier-num p {
                font-size: 22px;
            }

            .px-haulier-num h1 {
                font-size: 60px;
            }

            button.btn-prelodged {
                font-size: 22px;
                margin: 0;
                height: 50px;
                margin-top: 30px;
            }

            button.btn-trnsbg {
                font-size: 20px;
                height: 60px;
                width: 230px;
            }

            button.btn-bg {
                font-size: 22px;
                height: 60px;
                width: 30%;
            }

            .btn-trnsbg svg {
                left: 20px;
                top: 20px
            }

            form.px-haulier-form label {
                font-size: 20px !important;
            }

            form.px-haulier-form input.form-control {
                height: 50px;
            }

            button.btn-getmynumber {
                font-size: 18px;
            }

            .btn-bg svg {
                right: 20px;
                top: 20px
            }

            .px-jobnotfound p {
                font-size: 22px;
            }

            .px-request-update p {
                font-size: 18px;
            }

            form.px-haulier-form {
                margin-top: 50px;
            }

            .form-check.px-privacy {
                margin-top: 40px;
            }

            .form-check.px-privacy label.form-check-label {
                font-size: 14px !important;
            }

            input#privacyPolicy {
                height: 20px;
                width: 15px;
                margin-top: 10px;
            }

            .px-80 {
                padding: 80px !important;
            }
            .scrool-outer {
                height: 1088px;
            }
        }

        /* calendar grid icon and scroll height */
        @media (min-width:1300px) and (max-width: 1399px) {
            .scrool-outer {
                height: 956px;
            }
            .text-success, .text-danger, .text-warning {
                font: normal normal normal 24px/1 FontAwesome !important;
                display: inline-block;
                padding-right: 15px;
            }

        }
       /* calender grid font size */
        @media (min-width:1500px) and (max-width: 1599px) {
            .fc-title{
                    font-size:11px;
            } 
            #nation-dropdown , #pe-dropdown ,#pen-dropdown {
                width: 281px !important;
                }   

                
    }


    @media (min-width:1699px) and (max-width: 1799px)   {
                #nation-dropdown  , #pe-dropdown ,#pen-dropdown{
                    width: 334px !important;
                    }
             }
    @media (min-width:1800px) and (max-width: 1899px)  {
        #nation-dropdown  , #pe-dropdown ,#pen-dropdown{
            width: 358px !important;
            }
     }
     @media (min-width:2000px)  {
        #nation-dropdown  , #pe-dropdown ,#pen-dropdown{
            width: 413px !important;
            }
     }
     .overlay-globalfilter{
        position: absolute;
        background: #44464563;
        width: 100%;
        height: 100%;
        z-index: 9999;
        top: 0;
        left: 0;
     }
     .overlay-calendar{
        background: #302e2e9e;
        width: 100%;
        height: 100%;
     }
     .slide-animation{
        animation: slide-down 0.5s ease;
     }
     @keyframes slide-down {
        from {
          transform: translateY(-100%);
        }
        to {
          transform: translateY(0);
        }
      }
      .slide-down-leave {
        animation: slide-up 0.5s ease;
      }
      @keyframes slide-up {
        from {
          transform: translateY(100%);
        }
        to {
          transform: translateY(0);
        }
      }
      
     #modalUploadFile .fa-trash-o {
        font-size: 20px;
        align-items: flex-end;
        display: flex;
        margin-left: 10px;
        cursor: pointer;
    }
     @media (min-width:1279px) and (max-width: 1425px)   {
                body > section .container{
                    max-width: 100% !important;
                }
                #form-section .px-sign-desc{
                    margin: 10px 0 10px 0 !important;
                }
                #signup-btn{
                    margin-bottom: 20px !important;
                }
                #signup-form .form-group{
                    margin-bottom: 15px !important;
                }
     }
     @media (min-width:1023px) and (max-width: 1165px)   {
            #form-section .px-sign-desc{
                margin: 5px 0 5px 0 !important;
            }
            #signup-btn{
                margin-bottom: 5px !important;
            }
            #signup-form .form-group{
                margin-bottom: 10px !important;
            }
            .form-control{
                line-height: 2;
            } 
        
     }
     .navigate-notification-setting-page{
        text-decoration: underline;
        cursor: pointer;
      }

      #calendar3 .fc-head{
        display: none;
      }
      .fc-time{
        display: none;
      }

      #calendar3 .fc-header-toolbar{
        display: none;
      }

      #calendarMonthBtn.active,#calendar2WeekBtn.active {
        color: #ffffff;
        background: #00529e;
        border: 1px solid #0053a0;
        border-radius: 5px;
      }

     .fc-today-button{
        color: #ffffff !important;
        background: #00529e !important;
        border: 1px solid #0053a0 !important;
        border-radius: 5px !important;
        margin-left: .75em !important;
        height: 30.4px !important;
     }

     .fc-today-button.fc-state-disabled.fc-state-hover:hover{
        color: #ffffff !important;
        background: #00529e !important;
        border: 1px solid #0053a0 !important;
        border-radius: 8px !important;
        margin-left: .75em !important;
     }

     .fc-prev-button,.fc-next-button{
        color: #0053a0 !important;
        background: #ffffff !important;
        border: 1px solid #0053a0 !important;
        border-radius: 8px !important;
        width: 30.4px !important;
        height: 30.4px !important;
        padding: 0 !important;
        
     }

     .fc-next-button{
        margin-left: .75em !important;
     }

     .fc-icon-left-triangle,.fc-icon-right-triangle{
        font-size: 20px;
     }

     .fc-icon-left-triangle::after,.fc-icon-right-triangle::after{
        top: 10% !important;
     }

     .fc-center{
        color: #637385 !important;
     }

     .fc-day-header{
        padding: 10px !important;
        color: #9e9ea1;
        font-weight: 500;
        font-size: 10px;
     }

     #calendarMonthBtn,#calendarWeekBtn,#calendar2MonthBtn,#calendar2WeekBtn{
        height: 30.4px !important;
        width: 85px !important;
     }

     .eventHeadColor{
        padding: 20px !important;
        color: #9e9ea1;
        font-weight: 500;
        font-size: 10px;
     }

     .fc-center h2 {
        font-weight: 600 !important;
        font-size: 24px !important;
     }
    #calendar2 .fc-row .fc-highlight-skeleton,#calendar2 .fc-row .fc-content-skeleton {
        margin-left: 12.4%;
    }

    #calendar3 .fc-row .fc-highlight-skeleton,#calendar3 .fc-row .fc-content-skeleton {
        margin-left: 12.4%;
    }

    #calendar2 .fc-row.fc-week.fc-widget-content,#calendar3 .fc-row.fc-week.fc-widget-content {
        min-height: 32.5em !important;
    }
    
    .navigate-notification-setting-page{
        text-decoration: underline;
        cursor: pointer;
    }

    #calendar2 .fc-center h2 {
        text-transform: none !important;
    }
     .sessions-track{
        /* margin-top: 2rem; */
        /* border-radius: 12px; */
        position: relative;
        padding-top: 35px;
        border-top: 1px solid #e9e9e9;

     }
     .wrapper-tracking{
        /* background: #eaf6ff; */
      padding: 2rem;
      border-radius: 15px;
      /* width: 1000px; */
      /* border-top: 1px solid black; */
     }
     #tracking-modal ul li.tracking-circle{
        padding-bottom: 2rem;
        border-left: 1px solid #004d9a;
        position: relative;
        padding-left: 33px;
        margin-left: 10px;
    }
    #tracking-modal ul li.tracking-circle:before {
        content: '';
        width: 17px;
        height: 17px;
        background: #004d9a;
        border: 1px solid #004d9a;
        border-radius: 50%;
        position: absolute;
        left: -9px;
        top: 0px;
    }
    #tracking-modal ul li.tracking-sub-circle{
        padding-bottom: 2rem;
        border-left: 1px dotted #004d9a;
        position: relative;
        padding-left: 33px;
        margin-left: 10px;
    }
    #tracking-modal ul li.tracking-sub-circle #accordion .card:before {
        content: '';
        width: 9px;
        height: 9px;
        background: #004d9a;
        border: 1px solid #004d9a;
        border-radius: 50%;
        position: absolute;
        left: -37px;
        top: 18px;
        z-index: 99;
    }
    #tracking-modal ul li.tracking-sub-circle #accordion .card-header:before {
        content: '';
        width: 30px;
        height: 1px;
        background: #004d9a;
        /* border: 1px solid #004d9a; */
        /* border-radius: 50%; */
        position: absolute;
        left: -30px;
        top: 22px;
    }
    .lastTimeLine::before{
        height: calc((100% / 16) - 15px) !important;
    }
    

    #tracking-modal .branch-track {
        color: #a0a0a0;
    }
    #sidebar-tracking .orderReference-tags p, #sidebar-tracking .shipmentReference-tags p {
        color: #a0a0a0;
        font-weight: 500;
        cursor: pointer;
        font-size: 14px;
    }
    .shipmentReference-tags .no-box-shadow,.shipmentReference-tags .card-header{
        box-shadow: none !important;
        border: none !important;
        margin-bottom: -10px !important;
    }
    .shipmentReference-tags #flush-headingOne{
         height: 0%;
         min-width: 0%;
    }
    .shipmentReference-tags #flush-headingOne .no-arrow:after{
        content: none;
    }
    #tracking-modal .branch-track .word{
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    }
    .shipment-modal-tracking{
        line-height: normal;
        text-align: center;
        font-weight: 500;
        border-radius: 13px;
        padding: 2px 9px;
        font-size: 7px;
        margin-left: 33px;

    }
    #tracking-modal ul li.tracking-circle.custom-background:before {
        content: '';
        width: 17px;
        height: 17px;
        background: white;
        border: 1px solid #004d9a;
        border-radius: 50%;
        position: absolute;
        left: -9px;
        top: 0px;
    }
    #tracking-modal ul li.tracking-sub-circle #accordion .card.custom-background:before {
        content: '';
        width: 9px;
        height: 9px;
        background: white;
        border: 1px solid #004d9a;
        border-radius: 50%;
        position: absolute;
        left: -38px;
        top: 18px;
        z-index: 99;
    }
    #tracking-modal ul li.tracking-sub-circle #accordion .card.wavegif:before {
        content: '';
        width: 22px;
        height: 22px;
        background: #ffffff00;
        border:none;
        border-radius: 50%;
        position: absolute;
        left: -45px;
        top: 11px;    
        z-index: 99;
        background-size: cover; 
        background-image:url('../../../../img/icons/greenwave.gif') 
    }

    #tracking-modal ul li.tracking-sub-circle #accordion .card-header.line:before {
        content: '';
        width: 30px;
        height: 1px;
        background: #e4e4e4;
        /* border: 1px solid #004d9a; */
        /* border-radius: 50%; */
        position: absolute;
        left: -30px;
        top: 22px;
    }


    #tracking-modal ul li.tracking-sub-circle:last-child::before {
        content: "";
        border-left: 1px dotted #004d9a;
        position: absolute;
        left: 0;
        top: 1px;
        height: calc((100% / 2) - 15px);
    }

    #accordion .completed-shipment{
        background-color: #004d9a !important;
        color: white;
    }
    #accordion .completed-shipment .accordion-title , #accordion .completed-shipment .accordion-subtitle,#accordion .completed-shipment .route , #accordion .completed-shipment .route i{
        color: white !important;
    }
    #accordion .completed-shipment .card-body{
        border: 1px solid #004e99 !important;
        border-top: none !important;
    }
    #tracking-modal #accordion .info-emission-table {
        margin-top: 15px !important;
    }
    .accordion-title-tracking{
        font-weight: 400 !important;
    }
    .currentWave{
        bottom: -14px;
        position: absolute;
    }

     .w-115 {
        width: 115px !important;
     }

     .edit-icon {
        cursor: pointer;
     }

     .z-index-0{
        z-index: 0;
     }
     @media (max-width: 1440px) {

        .text-success, .text-danger, .text-warning {
            font: normal normal normal 24px/1 FontAwesome !important;
            display: inline-block;
            padding-right: 0px;
        }

    }

    #calendar2.fc td{
        border-bottom: 0;
    }

    #calendar2 .arrow,#calendar3 .arrow{
        top:-35%
    }
    #powerbi-new iframe{
        border: 2px solid #f2f3f8;
    }

/* exception dropdown */

/* Styles for the dropdown list */
.list-input-style-shipment ,.list-input-style-order-filter{
    position: absolute;
    z-index: 9999;
    background-color: white;
    width: 100%;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 37%); /* Box shadow for a subtle effect */
}
.input-style-order-filter{
    box-shadow: 0px 0px 0px rgb(0 0 0 / 37%); /* Box shadow for a subtle effect */
}

/* Styles for the clickable input element */
.input-style-shipment ,.input-style-order-filter {
    width: 100%;
    height: 45px;
    border: 1px solid #c7c5c5;
    border-radius: 7px;
    padding: 0px 10px;
    line-height: 45px;
    position: relative;
    margin-bottom: 5px;
    cursor: pointer;
    background: white;
    color: #617183;
    display: flex;
}

/* Styles for elements with class 'font-brand-color' */
.font-brand-color {
    color:  #617183;
}

/* Styles for the toggle switch with primary color and specific button colors */
.tgl-primary:checked + .tgl-btn.amber-color {
    background-color: #f90 !important; /* Background color when checked with amber color */
}

.tgl-primary:checked + .tgl-btn.red-color {
    background-color: red !important; /* Background color when checked with red color */
}

/* Define styles for the .headernote class */
.headernote{
    font-size: 36px;
    font-weight: bolder;
}

/* Apply color to the first child of .headernote with a blue shade */
.headernote :first-child {
    color: #004d9a;
}

/* Apply color to the second child of .headernote with a lighter blue shade */
.headernote :nth-child(2) {
    color: #00a5e6;
}

/* Define styles for the .page-content class */
.page-content {
    padding: 15px 35px;
}
#shipmentwidgets .card-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;

}

#shipmentwidgets .bg-dark-lite, #shipmentwidgets .bg-dark-theme,#shipmentwidgets .row{
    height: 100%;

}
#shipmentwidgets{
    height: calc(100% - 1.875rem);
}
#total-visits-tab-content .power{
    bottom: 35px;
}
    #job-visiblity-section .tgl-primary:not(:checked) + .tgl-btn {
        border: 2px solid #666
    }

    .sweet-alert-custom{
        width: 1200px !important;
        left: calc((100% - 1200px) / 2)!important;
        display: block !important;
        /* text-align: ct !important; */
        margin-top: -221px !important;
        margin-left: unset !important;
    }

    .sweet-alert-custom p{
        font-family: 'Roboto' !important;
        font-style: normal !important;
        font-weight: 400 !important;
    }

.sweet-alert-custom .cancel {
    background-color:white !important;
    color:#004d9a ;
    border: 1px solid #004d9a;
}

.sweet-alert-custom  .confirm{
    background-color:red !important;
    
}
   /* Tooltip for notification  */
   .tooltip-notification-setting{
    z-index: 999 !important;
}
/* Styling for the button inside the SweetAlert2 container */
.swal2-container .sweet-secretkey-button .swal2-actions .swal2-confirm>button {
    border: 1px solid #004d9a !important; /* Border color */
    background-color: #004d9a !important; /* Background color */
}

/* Styling for the custom popup */
.sweet-secretkey-popup {
    width: 770px !important; /* Set width */
    padding: 40px 0px; /* Padding */
}

/* Styling for the custom popup body */
.sweet-secretkey-popup .custom-body {
    align-items: center; /* Align items to center */
    justify-content: center; /* Justify content to center */
    margin-left: 0 !important; /* Reset left margin */
    font-family: 'Roboto' !important; /* Use Roboto font */
}

/* Styling for the copy button */
.sweet-secretkey-popup #copyButton ,.sweet-secretkey-popup #copyButtonSecretKey {
    color: white; /* Text color */
    border: #c3c3c3 1px solid; /* Border */
    height: 50px; /* Set height */
    margin-left: 7px !important; /* Adjust left margin */
}

/* Styling for the HTML container inside the popup */
.sweet-secretkey-popup .swal2-html-container {
    overflow: hidden; /* Hide overflow */
}

/* Styling for the input field inside the popup */
.sweet-secretkey-popup .swal2-input {
    margin: 0; /* Reset margin */
    font-family: 'Roboto' !important; /* Use Roboto font */
}

/* Styling for the custom header */
.sweet-secretkey-popup .custom-header {
    font-family: 'Roboto' !important; /* Use Roboto font */
}

/* Styling for the cancel button */
.sweet-secretkey-popup .swal2-actions .swal2-cancel {
    background-color: #004D9A !important; /* Background color */
}

/* Styling for the copy button icon */
.sweet-secretkey-popup .custom-body #copyButton i ,.sweet-secretkey-popup .custom-body #copyButtonSecretKey i {
    color: #004D9A; /* Icon color */
}
.sweet-secretkey-popup .swal2-html-container p{
    text-align: justify;
    margin-left: 30px;
    margin-top: 20px;

}


.powerni-report {
    overflow: hidden;
    height: 1073px;
    display: flex;
    justify-content: center;
  }
  .powerni-report iframe{
    width: 100%;
    height: 115%;
  }

  .k-grid-header .k-grid-header-menu.k-active{
    background: #004d9a;
    color: white;

}
 /* Custom Filter Button Color */
 .k-column-menu  .k-button-solid-primary ,.k-button-solid-base:active   {
    background-color: #004d9a; /* Change filter button background color */
    border-color: #004d9a; /* Change filter button border color */
    color: white; /* Change filter button text color */
}
.k-button-solid-primary:focus ,  .k-button-solid-base:focus ,.k-calendar td.k-state-focused .k-link{
    box-shadow: none;
}

 .k-calendar .k-calendar-table td.k-state-focused {
    background-color: #004d9a; /* Change filter button background color */
    border-color: #004d9a; /* Change filter button border color */
    color: #ffffff;
 }
 .k-calendar td.k-selected .k-link{
    background-color: #004d9a; /* Change filter button background color */
    border-color: #004d9a; /* Change filter button border color */
    color: #ffffff;
 }
 .k-selected .k-calendar .k-today .k-link{
    color  : #ffffff;
    box-shadow: inset 0 0 0 1px  #004d9a
 }
 .k-calendar .k-today .k-link{
     color  : #004d9a;
    box-shadow: inset 0 0 0 1px  #004d9a
 }
 .k-calendar .k-footer .k-nav-today:hover ,.k-calendar .k-footer .k-nav-today {
    color  : #004d9a;
 }
 .k-calendar .k-calendar-td.k-today.k-state-focused .k-link {
    color: #ffffff;
}
/* .k-filter-menu-container .k-filter-help-text,.k-filter-menu-container .k-picker.k-dropdown{
display: none;
} */
.k-checkbox:checked:focus ,.k-checkbox:focus {
    box-shadow: 0 0 3px 0 #004d9a;
    border-color: #004d9a;
}
.input-style-declaration {
    width: 100%;
    height: 45px;
    border: 1px solid #c7c5c5;
    border-radius: 7px;
    padding: 0px 10px;
    line-height: 45px;
    position: relative;
    margin-bottom: 5px;
    cursor: pointer;
}

#searchField {
    position: relative;
    /* border: 1px solid #a4abb4 !important; */
    overflow: hidden;
    border-radius: 0px 5px 5px 0px;
}

#tim-pic-show {
    display: none;
    position: relative;
    border: 1px solid #a4abb4;
    overflow: hidden;
    border-radius: 0px 5px 5px 0px;
}

#tim-pic-show:before {
    position: absolute;
    content: "\f133";
    font-family: fontawesome;
    font-size: 20px;
    color: rgb(255, 255, 255);
    right: 0px;
    width: 15%;
    text-align: center;
    height: 100%;
    background: #a4abb4;
    line-height: 40px;
}

.list-input-style-declaration {
    position: absolute;
    z-index: 9;
    background-color: white;
    width: 100%;
    box-shadow: 0px 0px 6px rgb(0 0 0 / 37%);
    display: none;
}

.jobs-filter-1 {
    width: 88%;
}

.jobs-filter-2 {
    width: 92%;
}

.arrange-re input {
    height: 36px;
    font-size: 16px;
}

input#date_range_picker {
    height: 34px;
}

.filter-arrow {
    position: absolute;
    right: 15px;
    line-height: 45px !important;
}

.filter-lst .filter_drop_li:hover {
    background: #f5f5f5;
}

.list-bttn li {
    padding: 5px;
}

.cus-width {
    width: 100%;
}

.custom-bg {
    background: #004d9a;
}

.btn-no-hover:hover{
    background-color: #004d9a !important;
}

/* .custom-bg:hover {
    background: #004d9a !important;
} */

.daterangepicker td.active {
    background: #004d9a !important;
}

.daterangepicker td.in-range {
    background: #004d9a !important;
}

.dat-pic {
    width: 100%;
}

.arrange-re {
    margin-left: -3px;
}

.bord-rad {
    border-radius: 6px 0px 0px 6px !important;
}

.add-style {
    padding: 0px 20px 0 10px;
    margin-bottom: 20px;
}

.filter_drop_li {
    cursor: pointer;
    padding: 7px 10px;
    color: #6081a2;
}

.text-disabled-n {
    color: #6081a2 !important;
}

.form-filter li:hover {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}

#included-team-members > div > span {
    top: 47%;
}

#load-forgot-pwd {
    display: flex;
    justify-content: end;
}

#basic-addon2{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    height: 100%;
}

#signin-submit, #validate_email{
    background: #00529e;
    border: 1px solid #0053a0;
    color: #ffffff;
}

a[data-bs-toggle="dropdown"].show  + div.dropdown-menu{
    display:block !important;
}
     
div[data-bs-toggle="dropdown"].show  + div.dropdown-menu{
    display:block !important;
}
.time-period-filter{
    outline: none;
    border: 1px solid #95B5D5;
    color: #004d9a;
    background: transparent;
    align-items: center;
    box-shadow: 0 -1px 1px #d9e4f0;
    justify-content: space-between;
    line-height: normal;
    padding: 8px;
}

button.time-period-filter {
    cursor: pointer;
}

.time-period-dropdown{
    background-color: #fff;
    box-shadow: 0 7px 29px 0 hsla(240, 5%, 41%, .2);
    position: absolute;
    z-index: 9;
}

.info-product-breakdown table.table tr:nth-child(2n){
    --bs-table-bg: #eaeaea !important; 
}

@media (min-width: 1600px) {
    .container {
        max-width: 1530px;
    }
}

:root {
    scroll-behavior: auto;
}

.critical-standard-container div,.critical-standard-container + div {
    padding-left: 15px;
    padding-right: 15px;
}

.btn-close {
    --bs-btn-close-color: #fff;
    --bs-btn-close-bg: none;
    font-weight: bolder;
    font-size: larger;
    top: -6px !important;
}

.btn-close:focus {
    outline: none;
    box-shadow: none;
  }

  /* Optional custom tooltip styling */
.daterangepicker td.highlight-date {
    position: relative;
}


.daterangepicker.header-date-picker td.highlight-date::after {
    content: 'Cargo Ready Date';
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    display: none;
    z-index: 9999;
}

.daterangepicker td.highlight-date:hover::after {
    display: block;
}

.highlight-date {
    background-color: red !important;
    color: beige !important;
    border-radius: 50%;
}

  div.swal2-container.swal2-center.swal2-backdrop-show > div > div.swal2-actions .custom-confirm-btn{
    background-color: #004d9a !important;
  }

  div.swal2-container.swal2-center.s-container.swal2-backdrop-show > div{
    padding: 4.25em;
    width: 40em;
  }

  .options-txt {
    border-bottom: 2px solid #f7fafe;
    color: #7d8a98;
    font-size: 20px;
    font-weight: 600
}

.view-box {
    background-color: #fff;
    padding: 8px 20px 10px;
}

#menuPopup-global-filter {
    padding: 0;
}

.sweet-overlay {
    z-index: 9999999999 !important;
}
.batchdownload_sidebar_button{
    cursor: not-allowed !important; 
}