/* input(10529,32): run-time error CSS1030: Expected identifier, found '#track-trip-dialog-form'
input(10529,55): run-time error CSS1025: Expected comma or open brace, found ')'
input(10533,24): run-time error CSS1030: Expected identifier, found '#track-trip-dialog-form'
input(10533,47): run-time error CSS1025: Expected comma or open brace, found ')'
input(10541,28): run-time error CSS1030: Expected identifier, found '#track-trip-dialog-form'
input(10541,51): run-time error CSS1025: Expected comma or open brace, found ')' */

/* Typography */
@import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,500,700,700i,900,900i&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
    font-size: 1rem;
    font-family: 'Rubik', sans-serif;
    font-weight: initial;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
}
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #e9e9e9 inset;
    transition: background-color 5000s ease-in-out 0s;
}

.disabled-action {
    color: inherit !important;
}

.fixed-top {
    z-index: 200;
}

.nodata {
    color: rgba(0, 0, 0, 0.3);
    font-size: 1em;
    font-style: inherit;
    padding: 10px;
    text-align: center;
}

    .nodata:before {
        content: "\F2FD";
        font-family: "Material Design Icons";
        display: block;
        font-size: 1.5em;
    }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 500;
    line-height: 1;
}

a {
}

    a:hover {
        text-decoration: none;
        opacity: .9;
    }

p {
    font-size: 0.875rem;
    margin-bottom: .5rem;
    line-height: 1.3rem;
}

h1, .h1 {
    font-size: 2.5rem;
}

h2, .h2 {
    font-size: 1.875rem;
}

h3, .h3 {
    font-size: 1.5rem;
}

h4, .h4 {
    font-size: 1.25rem;
}

h5, .h5 {
    font-size: 1rem;
}

h6, .h6 {
    font-size: .937rem;
}

.display-1 {
    font-size: 3.75rem;
}

@media (max-width: 991px) {
    .display-1 {
        font-size: 3rem;
    }
}

.display-2 {
    font-size: 3.125rem;
}

@media (max-width: 991px) {
    .display-2 {
        font-size: 2.5rem;
    }
}

.display-3 {
    font-size: 2.5rem;
}

@media (max-width: 991px) {
    .display-3 {
        font-size: 2rem;
    }
}

.display-4 {
    font-size: 1.875rem;
}

@media (max-width: 991px) {
    .display-4 {
        font-size: 1.5rem;
    }
}

.display-5 {
    font-size: 1.25rem;
}

@media (max-width: 991px) {
    .display-5 {
        font-size: 1rem;
    }
}

.blockquote {
    padding: 1.25rem;
    border: 1px solid #f3f3f3;
}

address p {
    margin-bottom: 0;
}

.blockquote-primary {
    border-color: #4d83ff;
}

    .blockquote-primary .blockquote-footer {
        color: #4d83ff;
    }

.blockquote-secondary {
    border-color: #686868;
}

    .blockquote-secondary .blockquote-footer {
        color: #686868;
    }

.blockquote-success {
    border-color: #71c016;
}

    .blockquote-success .blockquote-footer {
        color: #71c016;
    }

.blockquote-info {
    border-color: #7859df;
}

    .blockquote-info .blockquote-footer {
        color: #7859df;
    }

.blockquote-warning {
    border-color: #ffc100;
}

    .blockquote-warning .blockquote-footer {
        color: #ffc100;
    }

.blockquote-danger {
    border-color: #ff4747;
}

    .blockquote-danger .blockquote-footer {
        color: #ff4747;
    }

.blockquote-light {
    border-color: #f8f9fa;
}

    .blockquote-light .blockquote-footer {
        color: #f8f9fa;
    }

.blockquote-dark {
    border-color: #282f3a;
}

    .blockquote-dark .blockquote-footer {
        color: #282f3a;
    }

.error-page h1 {
    font-size: 12rem;
}

@media (max-width: 991px) {
    .error-page h1 {
        font-size: 8rem;
    }
}

.text-twitter {
    color: #2caae1;
}

.text-facebook {
    color: #3b579d;
}

.text-google {
    color: #dc4a38;
}

.text-linkedin {
    color: #0177b5;
}

.text-pinterest {
    color: #cc2127;
}

.text-youtube {
    color: #e52d27;
}

.text-github {
    color: #333333;
}

.text-behance {
    color: #1769ff;
}

.text-dribbble {
    color: #ea4c89;
}

.text-reddit {
    color: #ff4500;
}

.page-header {
    margin-bottom: 2.5rem;
}

    .page-header .page-title {
        margin-bottom: 0;
        line-height: .85;
    }

.font-weight-medium {
    font-weight: 500;
}

/* Miscellanoeous */
body,
html {
    overflow-x: hidden;
    padding-right: 0 !important;
}

*:-moz-full-screen,
*:-webkit-full-screen,
*:fullscreen *:-ms-fullscreen {
    overflow: auto;
}

.container-scroller {
    overflow: hidden;
}

pre {
    background: #e8eff4;
    padding: 15px;
    font-size: 14px;
}

code {
    padding: 5px;
    color: #ff4747;
    font-weight: 300;
    font-size: 0.875rem;
    border-radius: 4px;
}

/* Footer */
.footer {
    background: #F8FAFF;
    padding: 1rem 1.5rem .5rem;
    transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
    -ms-transition: all 0.25s ease;
    font-size: calc(0.75rem - 0.05rem);
    font-weight: 400;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

    .footer a {
        color: #0A2463;
        font-size: inherit;
    }

    .footer img {
        width: 1.2rem;
    }

@media (max-width: 991px) {
    .footer {
        margin-left: 0;
        width: 100%;
    }
}

/* Utilities */
.grid-margin {
    margin-bottom: 1.5rem;
}



@media (min-width: 768px) {
    .grid-margin-md-0 {
        margin-bottom: 0;
    }
}

@media (min-width: 992px) {
    .grid-margin-lg-0 {
        margin-bottom: 0;
    }
}

@media (min-width: 1200px) {
    .grid-margin-xl-0 {
        margin-bottom: 0;
    }
}

.img-lg {
    width: 92px;
    height: 92px;
}

.img-sm {
    width: 43px;
    height: 43px;
}

.img-xs {
    width: 37px;
    height: 37px;
}

.img-ss {
    width: 26px;
    height: 26px;
}

.stretch-card {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: stretch;
    justify-content: stretch;
}

    .stretch-card > .card {
        width: 100%;
        min-width: 100%;
        box-shadow: 0px 0px 2px 2px rgba(232, 232, 232, .5);
        border: 0;
    }

        .stretch-card > .card .card-body {
            /*padding: 2rem;*/
        }

        .stretch-card > .card .card-head-1 {
            background: #e8e8e8;
            padding: .5em.6rem .4em;
            margin: 0
        }

            .stretch-card > .card .card-head-1 input, .stretch-card > .card .card-head-1 select {
                background: #fff;
            }

            .stretch-card > .card .card-head-1 label {
                color: #0A2463;
                font-size: 1rem !important;
                font-weight: 500;
                line-height: normal;
            }

        .stretch-card > .card .card-body h4 {
            color: #516492;
            font-size: 1.4rem;
            font-weight: 200;
        }

        .stretch-card > .card .card-body h6 {
            color: #0A2463;
            font-size: 1.1rem;
            padding: 0 0 .9em 0;
            margin: 0;
        }

        .stretch-card > .card .card-body h3 {
            font-size: 1rem;
        }

        .stretch-card > .card .card-body p {
            color: #0A2463;
            font-size: 0.75rem;
            font-weight: 500;
            padding: .5rem 0 0rem;
            overflow-wrap: break-word;
            word-break: keep-all;
        }

h5.card-description {
    /*text-transform: uppercase;*/
    font-size: .85em;
    padding: 1.8em 0 0;
}


@media (min-width: 768px) {
    .border-right-md {
        border-right: 1px solid #f3f3f3;
    }
}

@media (min-width: 992px) {
    .border-right-lg {
        border-right: 1px solid #f3f3f3;
    }
}


@media (min-width: 768px) {
    .border-left-md {
        border-left: 1px solid #f3f3f3;
    }
}

@media (min-width: 992px) {
    .border-left-lg {
        border-left: 1px solid #f3f3f3;
    }
}

.text-gray, .card .card-subtitle {
    color: #8c8c8c;
}

.text-black {
    color: #000;
}

.text-small {
    font-size: 12px;
}

.flex-grow {
    flex-grow: 1;
}

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

.border-right {
    border-right: 1px solid #f3f3f3;
}

.border-bottom {
    border-bottom: 1px solid #f3f3f3;
}

.border-left {
    border-left: 1px solid #f3f3f3;
}

.border-top-0 {
    border-top: 0;
}

.border-right-0 {
    border-right: 0;
}

.border-bottom-0 {
    border-bottom: 0;
}

.border-left-0 {
    border-left: 0;
}

.border-x {
    border-left: 1px solid #f3f3f3;
    border-right: 1px solid #f3f3f3;
}

.border-y {
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
}




@media (min-width: 576px) {
    .form-group label {
        text-align: left;
    }

    .border-left-sm {
        border-left: 1px solid #f3f3f3;
    }

    .grid-margin-sm-0 {
        margin-bottom: 0;
    }


    .border-right-sm {
        border-right: 1px solid #f3f3f3;
    }

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

    .border-sm-right {
        border-right: 1px solid #f3f3f3;
    }

    .border-sm-bottom {
        border-bottom: 1px solid #f3f3f3;
    }

    .border-sm-left {
        border-left: 1px solid #f3f3f3;
    }

    .border-sm-top-0 {
        border-top: 0;
    }

    .border-sm-right-0 {
        border-right: 0;
    }

    .border-sm-bottom-0 {
        border-bottom: 0;
    }

    .border-sm-left-0 {
        border-left: 0;
    }

    .border-sm-x {
        border-left: 1px solid #f3f3f3;
        border-right: 1px solid #f3f3f3;
    }

    .border-sm-y {
        border-top: 1px solid #f3f3f3;
        border-bottom: 1px solid #f3f3f3;
    }
}

@media (min-width: 768px) {
    .border-md-top {
        border-top: 1px solid #f3f3f3;
    }

    .border-md-right {
        border-right: 1px solid #f3f3f3;
    }

    .border-md-bottom {
        border-bottom: 1px solid #f3f3f3;
    }

    .border-md-left {
        border-left: 1px solid #f3f3f3;
    }

    .border-md-top-0 {
        border-top: 0;
    }

    .border-md-right-0 {
        border-right: 0;
    }

    .border-md-bottom-0 {
        border-bottom: 0;
    }

    .border-md-left-0 {
        border-left: 0;
    }

    .border-md-x {
        border-left: 1px solid #f3f3f3;
        border-right: 1px solid #f3f3f3;
    }

    .border-md-y {
        border-top: 1px solid #f3f3f3;
        border-bottom: 1px solid #f3f3f3;
    }
}

@media (min-width: 992px) {
    .border-lg-top {
        border-top: 1px solid #f3f3f3;
    }

    .border-lg-right {
        border-right: 1px solid #f3f3f3;
    }

    .border-lg-bottom {
        border-bottom: 1px solid #f3f3f3;
    }

    .border-lg-left {
        border-left: 1px solid #f3f3f3;
    }

    .border-lg-top-0 {
        border-top: 0;
    }

    .border-lg-right-0 {
        border-right: 0;
    }

    .border-lg-bottom-0 {
        border-bottom: 0;
    }

    .border-lg-left-0 {
        border-left: 0;
    }

    .border-lg-x {
        border-left: 1px solid #f3f3f3;
        border-right: 1px solid #f3f3f3;
    }

    .border-lg-y {
        border-top: 1px solid #f3f3f3;
        border-bottom: 1px solid #f3f3f3;
    }
}

@media (min-width: 1200px) {
    .border-xl-top {
        border-top: 1px solid #f3f3f3;
    }

    .border-xl-right {
        border-right: 1px solid #f3f3f3;
    }

    .border-xl-bottom {
        border-bottom: 1px solid #f3f3f3;
    }

    .border-xl-left {
        border-left: 1px solid #f3f3f3;
    }

    .border-xl-top-0 {
        border-top: 0;
    }

    .border-xl-right-0 {
        border-right: 0;
    }

    .border-xl-bottom-0 {
        border-bottom: 0;
    }

    .border-xl-left-0 {
        border-left: 0;
    }

    .border-xl-x {
        border-left: 1px solid #f3f3f3;
        border-right: 1px solid #f3f3f3;
    }

    .border-xl-y {
        border-top: 1px solid #f3f3f3;
        border-bottom: 1px solid #f3f3f3;
    }
}

.hover-cursor:hover {
    cursor: pointer;
}

/* Demo Styles */
.template-demo .progress {
    margin-top: 1.5rem;
}

.template-demo > h2,
.template-demo > h3,
.template-demo > h4,
.template-demo > h5,
.template-demo > h6,
.template-demo > h1 {
    border-top: 1px solid #f3f3f3;
    padding: 0.5rem 0 0;
}

.template-demo > .dropdown {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.documentation {
    padding-top: 0;
    max-width: 100%;
}

    .documentation .content-wrapper {
        padding-top: 0;
        min-height: calc(100vh - 75px);
    }

.doc-header {
    position: fixed;
    padding-top: 24px;
    padding-bottom: 24px;
    z-index: 2;
    background: #f3f3f3;
}

.doc-content {
    padding-top: 157px;
}

.dashboard-chart-legend {
    list-style-type: none;
    padding-left: 0;
}

    .dashboard-chart-legend li {
        display: inline;
    }

        .dashboard-chart-legend li span {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 7px;
        }

        .dashboard-chart-legend li:not(:first-child) span {
            margin-left: 25px;
        }

@media (max-width: 576px) {
    .dashboard-chart-legend li:not(:first-child) span {
        margin-left: 13px;
    }
}

.dashboard-tabs .item {
    border-bottom: 1px solid #f3f3f3;
}

@media (min-width: 577px) {
    .dashboard-tabs .item {
        border-bottom: 0;
    }
}

.nav-tabs {
    border: 1px solid #f3f3f3;
}

    .nav-tabs .nav-link {
        background: #f6f8fa;
        color: rgba(0, 0, 0, 0.5);
        border-radius: 0;
        border: 1px solid #f3f3f3;
        padding: 1rem 1.5rem .2rem 1.5rem;
    }

@media (max-width: 767px) {
    .nav-tabs .nav-link {
        padding: 1rem .5rem .2rem .5rem;
    }
}

.nav-tabs .nav-item .nav-link {
    border: 0;
    background: transparent;
}

    .nav-tabs .nav-item .nav-link.active {
        border: 0;
        border-bottom: 3px solid #146FD1;
        color: #146FD1;
        font-weight: 500;
    }

/*-------------------------------------------------------------------*/
/* === Components === */
/* Buttons */
.btn {
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 400;
    /* Buttons with only icons */
    /* Buttons with icon and text */
    margin: .3rem 0;
    margin: .3rem auto;
    padding: .5em 0em;
    text-align: center;
}

    .btn i {
        font-size: .75rem;
    }

    .btn.btn-rounded {
        border-radius: 50px;
    }

    .btn.btn-sm, .btn-group-sm > .btn {
        font-size: 0.875rem;
    }

    .btn.btn-lg, .btn-group-lg > .btn {
        font-size: 0.875rem;
    }

    .btn.btn-xs {
        padding: 0.5rem 0.75rem;
        font-size: 0.625rem;
    }

    .btn.btn-icon {
        width: 40px;
        height: 40px;
        padding: 0;
    }

    .btn.btn-icon-text .btn-icon-prepend {
        margin-right: .5rem;
    }

    .btn.btn-icon-text .btn-icon-append {
        margin-left: .5rem;
    }

    .btn.btn-social-icon {
        width: 50px;
        height: 50px;
        padding: 0;
    }

.btn-group .btn + .btn {
    border-left: 0;
}

/*social buttons*/
.btn-twitter {
    background: #2caae1;
    color: #ffffff;
}

    .btn-twitter:hover, .btn-twitter:focus {
        background: #1b8dbf;
        color: #ffffff;
    }

    .btn-twitter.btn-social-icon-text {
        padding: 0 1.5rem 0 0;
        background: #59bce7;
    }

        .btn-twitter.btn-social-icon-text i {
            background: #2caae1;
            padding: .75rem;
            display: inline-block;
            margin-right: 1.5rem;
        }

.btn-outline-twitter {
    border: 1px solid #2caae1;
    color: #2caae1;
}

    .btn-outline-twitter:hover {
        background: #2caae1;
        color: #ffffff;
    }

.btn-facebook {
    background: #3b579d;
    color: #ffffff;
}

    .btn-facebook:hover, .btn-facebook:focus {
        background: #2d4278;
        color: #ffffff;
    }

    .btn-facebook.btn-social-icon-text {
        padding: 0 1.5rem 0 0;
        background: #4e6ebd;
    }

        .btn-facebook.btn-social-icon-text i {
            background: #3b579d;
            padding: .75rem;
            display: inline-block;
            margin-right: 1.5rem;
        }

.btn-outline-facebook {
    border: 1px solid #3b579d;
    color: #3b579d;
}

    .btn-outline-facebook:hover {
        background: #3b579d;
        color: #ffffff;
    }

.btn-google {
    background: #dc4a38;
    color: #ffffff;
}

    .btn-google:hover, .btn-google:focus {
        background: #bf3322;
        color: #ffffff;
    }

    .btn-google.btn-social-icon-text {
        padding: 0 1.5rem 0 0;
        background: #e47163;
    }

        .btn-google.btn-social-icon-text i {
            background: #dc4a38;
            padding: .75rem;
            display: inline-block;
            margin-right: 1.5rem;
        }

.btn-outline-google {
    border: 1px solid #dc4a38;
    color: #dc4a38;
}

    .btn-outline-google:hover {
        background: #dc4a38;
        color: #ffffff;
    }

.btn-linkedin {
    background: #0177b5;
    color: #ffffff;
}

    .btn-linkedin:hover, .btn-linkedin:focus {
        background: #015682;
        color: #ffffff;
    }

    .btn-linkedin.btn-social-icon-text {
        padding: 0 1.5rem 0 0;
        background: #0198e8;
    }

        .btn-linkedin.btn-social-icon-text i {
            background: #0177b5;
            padding: .75rem;
            display: inline-block;
            margin-right: 1.5rem;
        }

.btn-outline-linkedin {
    border: 1px solid #0177b5;
    color: #0177b5;
}

    .btn-outline-linkedin:hover {
        background: #0177b5;
        color: #ffffff;
    }

.btn-pinterest {
    background: #cc2127;
    color: #ffffff;
}

    .btn-pinterest:hover, .btn-pinterest:focus {
        background: #a01a1f;
        color: #ffffff;
    }

    .btn-pinterest.btn-social-icon-text {
        padding: 0 1.5rem 0 0;
        background: #e04046;
    }

        .btn-pinterest.btn-social-icon-text i {
            background: #cc2127;
            padding: .75rem;
            display: inline-block;
            margin-right: 1.5rem;
        }

.btn-outline-pinterest {
    border: 1px solid #cc2127;
    color: #cc2127;
}

    .btn-outline-pinterest:hover {
        background: #cc2127;
        color: #ffffff;
    }

.btn-youtube {
    background: #e52d27;
    color: #ffffff;
}

    .btn-youtube:hover, .btn-youtube:focus {
        background: #c21d17;
        color: #ffffff;
    }

    .btn-youtube.btn-social-icon-text {
        padding: 0 1.5rem 0 0;
        background: #ea5955;
    }

        .btn-youtube.btn-social-icon-text i {
            background: #e52d27;
            padding: .75rem;
            display: inline-block;
            margin-right: 1.5rem;
        }

.btn-outline-youtube {
    border: 1px solid #e52d27;
    color: #e52d27;
}

    .btn-outline-youtube:hover {
        background: #e52d27;
        color: #ffffff;
    }

.btn-github {
    background: #333333;
    color: #ffffff;
}

    .btn-github:hover, .btn-github:focus {
        background: #1a1a1a;
        color: #ffffff;
    }

    .btn-github.btn-social-icon-text {
        padding: 0 1.5rem 0 0;
        background: #4d4d4d;
    }

        .btn-github.btn-social-icon-text i {
            background: #333333;
            padding: .75rem;
            display: inline-block;
            margin-right: 1.5rem;
        }

.btn-outline-github {
    border: 1px solid #333333;
    color: #333333;
}

    .btn-outline-github:hover {
        background: #333333;
        color: #ffffff;
    }

.btn-behance {
    background: #1769ff;
    color: #ffffff;
}

    .btn-behance:hover, .btn-behance:focus {
        background: #0050e3;
        color: #ffffff;
    }

    .btn-behance.btn-social-icon-text {
        padding: 0 1.5rem 0 0;
        background: #4a8aff;
    }

        .btn-behance.btn-social-icon-text i {
            background: #1769ff;
            padding: .75rem;
            display: inline-block;
            margin-right: 1.5rem;
        }

.btn-outline-behance {
    border: 1px solid #1769ff;
    color: #1769ff;
}

    .btn-outline-behance:hover {
        background: #1769ff;
        color: #ffffff;
    }

.btn-dribbble {
    background: #ea4c89;
    color: #ffffff;
}

    .btn-dribbble:hover, .btn-dribbble:focus {
        background: #e51e6b;
        color: #ffffff;
    }

    .btn-dribbble.btn-social-icon-text {
        padding: 0 1.5rem 0 0;
        background: #ef7aa7;
    }

        .btn-dribbble.btn-social-icon-text i {
            background: #ea4c89;
            padding: .75rem;
            display: inline-block;
            margin-right: 1.5rem;
        }

.btn-outline-dribbble {
    border: 1px solid #ea4c89;
    color: #ea4c89;
}

    .btn-outline-dribbble:hover {
        background: #ea4c89;
        color: #ffffff;
    }

.btn-reddit {
    background: #ff4500;
    color: #ffffff;
}

    .btn-reddit:hover, .btn-reddit:focus {
        background: #cc3700;
        color: #ffffff;
    }

    .btn-reddit.btn-social-icon-text {
        padding: 0 1.5rem 0 0;
        background: #ff6a33;
    }

        .btn-reddit.btn-social-icon-text i {
            background: #ff4500;
            padding: .75rem;
            display: inline-block;
            margin-right: 1.5rem;
        }

.btn-outline-reddit {
    border: 1px solid #ff4500;
    color: #ff4500;
}

    .btn-outline-reddit:hover {
        background: #ff4500;
        color: #ffffff;
    }

/* inverse buttons */
.btn-inverse-primary {
    background-color: rgba(77, 131, 255, 0.2);
    background-image: none;
    border-color: rgba(77, 131, 255, 0);
}

    .btn-inverse-primary:not(.btn-inverse-light) {
        color: #4d83ff;
    }

    .btn-inverse-primary:hover {
        color: #ffffff;
        background-color: #4d83ff;
        border-color: #4d83ff;
    }

    .btn-inverse-primary.focus, .btn-inverse-primary:focus {
        box-shadow: 0 0 0 3px rgba(77, 131, 255, 0.5);
    }

    .btn-inverse-primary.disabled, .btn-inverse-primary:disabled {
        color: #4d83ff;
        background-color: transparent;
    }

    .btn-inverse-primary.active, .btn-inverse-primary:active,
    .show > .btn-inverse-primary.dropdown-toggle {
        color: #ffffff;
        background-color: #4d83ff;
        border-color: #4d83ff;
    }

.btn-primary, .btn-primary:hover {
    box-shadow: 0 2px 2px 0 #ccc;
}

.btn-inverse-secondary {
    background-color: rgba(104, 104, 104, 0.2);
    background-image: none;
    border-color: rgba(104, 104, 104, 0);
}

    .btn-inverse-secondary:not(.btn-inverse-light) {
        color: #686868;
    }

    .btn-inverse-secondary:hover {
        color: #ffffff;
        background-color: #686868;
        border-color: #686868;
    }

    .btn-inverse-secondary.focus, .btn-inverse-secondary:focus {
        box-shadow: 0 0 0 3px rgba(104, 104, 104, 0.5);
    }

    .btn-inverse-secondary.disabled, .btn-inverse-secondary:disabled {
        color: #686868;
        background-color: transparent;
    }

    .btn-inverse-secondary.active, .btn-inverse-secondary:active,
    .show > .btn-inverse-secondary.dropdown-toggle {
        color: #ffffff;
        background-color: #686868;
        border-color: #686868;
    }

.btn-secondary, .btn-secondary:hover {
    box-shadow: 0 2px 2px 0 rgba(104, 104, 104, 0.14), 0 3px 1px -2px rgba(104, 104, 104, 0.2), 0 1px 5px 0 rgba(104, 104, 104, 0.12);
}

.btn-inverse-success {
    background-color: rgba(113, 192, 22, 0.2);
    background-image: none;
    border-color: rgba(113, 192, 22, 0);
}

    .btn-inverse-success:not(.btn-inverse-light) {
        color: #71c016;
    }

    .btn-inverse-success:hover {
        color: #ffffff;
        background-color: #71c016;
        border-color: #71c016;
    }

    .btn-inverse-success.focus, .btn-inverse-success:focus {
        box-shadow: 0 0 0 3px rgba(113, 192, 22, 0.5);
    }

    .btn-inverse-success.disabled, .btn-inverse-success:disabled {
        color: #71c016;
        background-color: transparent;
    }

    .btn-inverse-success.active, .btn-inverse-success:active,
    .show > .btn-inverse-success.dropdown-toggle {
        color: #ffffff;
        background-color: #71c016;
        border-color: #71c016;
    }

.btn-success, .btn-success:hover {
    box-shadow: 0 2px 2px 0 rgba(113, 192, 22, 0.14), 0 3px 1px -2px rgba(113, 192, 22, 0.2), 0 1px 5px 0 rgba(113, 192, 22, 0.12);
}

.btn-inverse-info {
    background-color: rgba(120, 89, 223, 0.2);
    background-image: none;
    border-color: rgba(120, 89, 223, 0);
}

    .btn-inverse-info:not(.btn-inverse-light) {
        color: #7859df;
    }

    .btn-inverse-info:hover {
        color: #ffffff;
        background-color: #7859df;
        border-color: #7859df;
    }

    .btn-inverse-info.focus, .btn-inverse-info:focus {
        box-shadow: 0 0 0 3px rgba(120, 89, 223, 0.5);
    }

    .btn-inverse-info.disabled, .btn-inverse-info:disabled {
        color: #7859df;
        background-color: transparent;
    }

    .btn-inverse-info.active, .btn-inverse-info:active,
    .show > .btn-inverse-info.dropdown-toggle {
        color: #ffffff;
        background-color: #7859df;
        border-color: #7859df;
    }

.btn-info, .btn-info:hover {
    box-shadow: 0 2px 2px 0 rgba(120, 89, 223, 0.14), 0 3px 1px -2px rgba(120, 89, 223, 0.2), 0 1px 5px 0 rgba(120, 89, 223, 0.12);
}

.btn-inverse-warning {
    background-color: rgba(255, 193, 0, 0.2);
    background-image: none;
    border-color: rgba(255, 193, 0, 0);
}

    .btn-inverse-warning:not(.btn-inverse-light) {
        color: #ffc100;
    }

    .btn-inverse-warning:hover {
        color: #ffffff;
        background-color: #ffc100;
        border-color: #ffc100;
    }

    .btn-inverse-warning.focus, .btn-inverse-warning:focus {
        box-shadow: 0 0 0 3px rgba(255, 193, 0, 0.5);
    }

    .btn-inverse-warning.disabled, .btn-inverse-warning:disabled {
        color: #ffc100;
        background-color: transparent;
    }

    .btn-inverse-warning.active, .btn-inverse-warning:active,
    .show > .btn-inverse-warning.dropdown-toggle {
        color: #ffffff;
        background-color: #ffc100;
        border-color: #ffc100;
    }

.btn-warning, .btn-warning:hover {
    box-shadow: 0 2px 2px 0 rgba(255, 193, 0, 0.14), 0 3px 1px -2px rgba(255, 193, 0, 0.2), 0 1px 5px 0 rgba(255, 193, 0, 0.12);
}

.btn-inverse-danger {
    background-color: rgba(255, 71, 71, 0.2);
    background-image: none;
    border-color: rgba(255, 71, 71, 0);
}

    .btn-inverse-danger:not(.btn-inverse-light) {
        color: #ff4747;
    }

    .btn-inverse-danger:hover {
        color: #ffffff;
        background-color: #ff4747;
        border-color: #ff4747;
    }

    .btn-inverse-danger.focus, .btn-inverse-danger:focus {
        box-shadow: 0 0 0 3px rgba(255, 71, 71, 0.5);
    }

    .btn-inverse-danger.disabled, .btn-inverse-danger:disabled {
        color: #ff4747;
        background-color: transparent;
    }

    .btn-inverse-danger.active, .btn-inverse-danger:active,
    .show > .btn-inverse-danger.dropdown-toggle {
        color: #ffffff;
        background-color: #ff4747;
        border-color: #ff4747;
    }

.btn-danger, .btn-danger:hover {
    box-shadow: 0 2px 2px 0 rgba(255, 71, 71, 0.14), 0 3px 1px -2px rgba(255, 71, 71, 0.2), 0 1px 5px 0 rgba(255, 71, 71, 0.12);
}

.btn-inverse-light {
    background-color: rgba(248, 249, 250, 0.2);
    background-image: none;
    border-color: rgba(248, 249, 250, 0);
}

    .btn-inverse-light:not(.btn-inverse-light) {
        color: #f8f9fa;
    }

    .btn-inverse-light:hover {
        color: #ffffff;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }

    .btn-inverse-light.focus, .btn-inverse-light:focus {
        box-shadow: 0 0 0 3px rgba(248, 249, 250, 0.5);
    }

    .btn-inverse-light.disabled, .btn-inverse-light:disabled {
        color: #f8f9fa;
        background-color: transparent;
    }

    .btn-inverse-light.active, .btn-inverse-light:active,
    .show > .btn-inverse-light.dropdown-toggle {
        color: #ffffff;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }

.btn-light, .btn-light:hover {
    box-shadow: 0 2px 2px 0 rgba(248, 249, 250, 0.14), 0 3px 1px -2px rgba(248, 249, 250, 0.2), 0 1px 5px 0 rgba(248, 249, 250, 0.12);
}

.btn-inverse-dark {
    background-color: rgba(40, 47, 58, 0.2);
    background-image: none;
    border-color: rgba(40, 47, 58, 0);
}

    .btn-inverse-dark:not(.btn-inverse-light) {
        color: #282f3a;
    }

    .btn-inverse-dark:hover {
        color: #ffffff;
        background-color: #282f3a;
        border-color: #282f3a;
    }

    .btn-inverse-dark.focus, .btn-inverse-dark:focus {
        box-shadow: 0 0 0 3px rgba(40, 47, 58, 0.5);
    }

    .btn-inverse-dark.disabled, .btn-inverse-dark:disabled {
        color: #282f3a;
        background-color: transparent;
    }

    .btn-inverse-dark.active, .btn-inverse-dark:active,
    .show > .btn-inverse-dark.dropdown-toggle {
        color: #ffffff;
        background-color: #282f3a;
        border-color: #282f3a;
    }

.btn-dark, .btn-dark:hover {
    box-shadow: 0 2px 2px 0 rgba(40, 47, 58, 0.14), 0 3px 1px -2px rgba(40, 47, 58, 0.2), 0 1px 5px 0 rgba(40, 47, 58, 0.12);
}

/* Badges */
.badge {
    border-radius: 0;
    font-size: 12px;
    line-height: 1;
    padding: .375rem .5625rem;
    font-weight: normal;
}

    .badge.badge-pill {
        border-radius: 10rem;
    }

/*Badge outlined variations*/
.badge-outline-primary {
    color: #4d83ff;
    border: 1px solid #4d83ff;
}

.badge-outline-secondary {
    color: #686868;
    border: 1px solid #686868;
}

.badge-outline-success {
    color: #71c016;
    border: 1px solid #71c016;
}

.badge-outline-info {
    color: #7859df;
    border: 1px solid #7859df;
}

.badge-outline-warning {
    color: #ffc100;
    border: 1px solid #ffc100;
}

.badge-outline-danger {
    color: #ff4747;
    border: 1px solid #ff4747;
}

.badge-outline-light {
    color: #f8f9fa;
    border: 1px solid #f8f9fa;
}

.badge-outline-dark {
    color: #282f3a;
    border: 1px solid #282f3a;
}

/* Bootstrap Progress */
.progress {
    border-radius: 3px;
    height: 8px;
}

    .progress .progress-bar {
        border-radius: 3px;
    }

    .progress.progress-sm {
        height: 0.375rem;
    }

    .progress.progress-md {
        height: 8px;
    }

    .progress.progress-lg {
        height: 15px;
    }

    .progress.progress-xl {
        height: 18px;
    }


/* Checkboxes and Radios */
.form-check {
    position: relative;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 0;
}

    .form-check .form-check-label {
        min-height: 18px;
        display: block;
        margin-left: 1.75rem;
        font-size: 0.875rem;
        line-height: 1.5;
    }

.rtl .form-check .form-check-label {
    margin-left: 0;
    margin-right: 1.75rem;
}

.form-check .form-check-label input {
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

.rtl .form-check .form-check-label input {
    left: auto;
    right: 0;
}

.form-check .form-check-label input[type="checkbox"] + .input-helper:before, .form-check .form-check-label input[type="checkbox"] + .input-helper:after {
    position: absolute;
    top: 0;
    left: 0;
}

.rtl .form-check .form-check-label input[type="checkbox"] + .input-helper:before, .rtl .form-check .form-check-label input[type="checkbox"] + .input-helper:after {
    left: auto;
    right: 0;
}

.form-check .form-check-label input[type="checkbox"] + .input-helper:before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 2px;
    border: solid #8592B1;
    border-width: 2px;
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
    transition-duration: 0s;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
}

.form-check .form-check-label input[type="checkbox"] + .input-helper:after {
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
    transition-duration: 0s;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    font-family: Material Design Icons;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    content: '\F12C';
    font-size: .9375rem;
    font-weight: bold;
    color: #ffffff;
}

.form-check .form-check-label input[type="checkbox"]:checked + .input-helper:before {
    background: #0A2463;
    border-width: 0;
}

.form-check .form-check-label input[type="checkbox"]:checked + .input-helper:after {
    width: 18px;
    opacity: 1;
    line-height: 18px;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.form-check .form-check-label input[type="checkbox"]:disabled + .input-helper:before {
    border-color: #f3f3f3;
}

.form-check .form-check-label input[type="checkbox"]:disabled:checked + .input-helper:after {
    background: #f3f3f3;
    color: #ffffff;
}

.form-check .form-check-label input[type="radio"] + .input-helper:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    border: solid #8592B1;
    border-width: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
    transition-duration: 0s;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
}

.rtl .form-check .form-check-label input[type="radio"] + .input-helper:before {
    left: auto;
    right: 0;
}

.form-check .form-check-label input[type="radio"] + .input-helper:after {
    content: "";
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    top: 6px;
    left: 6px;
    -webkit-transition: all;
    -o-transition: all;
    transition: all;
    transition-duration: 0s;
    -webkit-transition-duration: 250ms;
    transition-duration: 250ms;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    position: absolute;
}

.rtl .form-check .form-check-label input[type="radio"] + .input-helper:after {
    left: auto;
    right: 6px;
}

.form-check .form-check-label input[type="radio"]:checked + .input-helper:before {
    background: #0A2463;
    border-width: 0;
}

.form-check .form-check-label input[type="radio"]:checked + .input-helper:after {
    opacity: 1;
    line-height: 1.5;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.form-check .form-check-label input[type="radio"]:disabled + .input-helper:before {
    border-color: #f3f3f3;
}

.form-check .form-check-label input[type="radio"]:disabled:checked + .input-helper:before {
    background: #f3f3f3;
}

.form-check .form-check-label input[type="radio"]:disabled:checked + .input-helper:after {
    background: #ffffff;
}

.form-check-primary.form-check label input[type="checkbox"] + .input-helper:before,
.form-check-primary.form-check label input[type="radio"] + .input-helper:before {
    border-color: #00A8A8;
}

.form-check-primary.form-check label input[type="checkbox"]:checked + .input-helper:before,
.form-check-primary.form-check label input[type="radio"]:checked + .input-helper:before {
    background: #0A2463;
}

.form-check-secondary.form-check label input[type="checkbox"] + .input-helper:before,
.form-check-secondary.form-check label input[type="radio"] + .input-helper:before {
    border-color: #686868;
}

.form-check-secondary.form-check label input[type="checkbox"]:checked + .input-helper:before,
.form-check-secondary.form-check label input[type="radio"]:checked + .input-helper:before {
    background: #686868;
}

.form-check-success.form-check label input[type="checkbox"] + .input-helper:before,
.form-check-success.form-check label input[type="radio"] + .input-helper:before {
    border-color: #71c016;
}

.form-check-success.form-check label input[type="checkbox"]:checked + .input-helper:before,
.form-check-success.form-check label input[type="radio"]:checked + .input-helper:before {
    background: #71c016;
}

.form-check-info.form-check label input[type="checkbox"] + .input-helper:before,
.form-check-info.form-check label input[type="radio"] + .input-helper:before {
    border-color: #7859df;
}

.form-check-info.form-check label input[type="checkbox"]:checked + .input-helper:before,
.form-check-info.form-check label input[type="radio"]:checked + .input-helper:before {
    background: #7859df;
}

.form-check-warning.form-check label input[type="checkbox"] + .input-helper:before,
.form-check-warning.form-check label input[type="radio"] + .input-helper:before {
    border-color: #ffc100;
}

.form-check-warning.form-check label input[type="checkbox"]:checked + .input-helper:before,
.form-check-warning.form-check label input[type="radio"]:checked + .input-helper:before {
    background: #ffc100;
}

.form-check-danger.form-check label input[type="checkbox"] + .input-helper:before,
.form-check-danger.form-check label input[type="radio"] + .input-helper:before {
    border-color: #ff4747;
}

.form-check-danger.form-check label input[type="checkbox"]:checked + .input-helper:before,
.form-check-danger.form-check label input[type="radio"]:checked + .input-helper:before {
    background: #ff4747;
}

.form-check-light.form-check label input[type="checkbox"] + .input-helper:before,
.form-check-light.form-check label input[type="radio"] + .input-helper:before {
    border-color: #f8f9fa;
}

.form-check-light.form-check label input[type="checkbox"]:checked + .input-helper:before,
.form-check-light.form-check label input[type="radio"]:checked + .input-helper:before {
    background: #f8f9fa;
}

.form-check-dark.form-check label input[type="checkbox"] + .input-helper:before,
.form-check-dark.form-check label input[type="radio"] + .input-helper:before {
    border-color: #282f3a;
}

.form-check-dark.form-check label input[type="checkbox"]:checked + .input-helper:before,
.form-check-dark.form-check label input[type="radio"]:checked + .input-helper:before {
    background: #282f3a;
}

/* Dropdowns */

/*ammar*/
.ui-autocomplete {
    z-index: 10000 !important
}
/*ammar*/

.dropdown .dropdown-toggle:after {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 0;
    font: normal normal normal 24px/1 "Material Design Icons";
    content: "\F140";
    width: auto;
    height: auto;
    vertical-align: middle;
    line-height: .625rem;
    font-size: 1.25rem;
    margin-left: 0;
}

.dropdown .dropdown-menu {
    margin-top: 0;
    font-size: 0.875rem;
    box-shadow: 0px 1px 15px 1px rgba(230, 234, 236, 0.35);
    border-radius: 0;
}

    .dropdown .dropdown-menu .dropdown-item {
        font-size: .875rem;
        padding: .25rem 1.5rem;
    }

        .dropdown .dropdown-menu .dropdown-item:active {
            background: initial;
        }

/* Forms */
.form-group {
    margin-bottom: .5rem;
}

.mr-bt-0 {
    margin-bottom: 0;
}

.input-group-append,
.input-group-prepend {
    color: #c9c8c8;
    width: auto;
    border: none;
}

    .input-group-append .input-group-text,
    .input-group-prepend .input-group-text {
        border-color: #f3f3f3;
        padding: 0.875rem 0.75rem;
        color: #c9c8c8;
    }

.form-control, .dataTables_wrapper select {
    border: 1px solid #D3D7E9;
    font-weight: 400;
    background: #F7F8FC;
    border-radius: 4px;
    font-size: .75rem;
    padding: 12px;
    color: #0A2463;
}


select.form-control, .dataTables_wrapper select {
    padding: .4375rem .75rem;
    outline: 0px solid #ddd;
    padding-top: 5px;
}

    select.form-control:focus, .dataTables_wrapper select:focus {
        outline: 1px solid #DBDBDB;
    }

    select.form-control.border-primary, .dataTables_wrapper select.border-primary {
        outline: 1px solid #4d83ff;
    }

        select.form-control.border-primary:focus, .dataTables_wrapper select.border-primary:focus {
            outline: 1px solid #4d83ff;
        }

    select.form-control.border-secondary, .dataTables_wrapper select.border-secondary {
        outline: 1px solid #686868;
    }

        select.form-control.border-secondary:focus, .dataTables_wrapper select.border-secondary:focus {
            outline: 1px solid #686868;
        }

    select.form-control.border-success, .dataTables_wrapper select.border-success {
        outline: 1px solid #71c016;
    }

        select.form-control.border-success:focus, .dataTables_wrapper select.border-success:focus {
            outline: 1px solid #71c016;
        }

    select.form-control.border-info, .dataTables_wrapper select.border-info {
        outline: 1px solid #7859df;
    }

        select.form-control.border-info:focus, .dataTables_wrapper select.border-info:focus {
            outline: 1px solid #7859df;
        }

    select.form-control.border-warning, .dataTables_wrapper select.border-warning {
        outline: 1px solid #ffc100;
    }

        select.form-control.border-warning:focus, .dataTables_wrapper select.border-warning:focus {
            outline: 1px solid #ffc100;
        }

    select.form-control.border-danger, .dataTables_wrapper select.border-danger {
        outline: 1px solid #ff4747;
    }

        select.form-control.border-danger:focus, .dataTables_wrapper select.border-danger:focus {
            outline: 1px solid #ff4747;
        }

    select.form-control.border-light, .dataTables_wrapper select.border-light {
        outline: 1px solid #f8f9fa;
    }

        select.form-control.border-light:focus, .dataTables_wrapper select.border-light:focus {
            outline: 1px solid #f8f9fa;
        }

    select.form-control.border-dark, .dataTables_wrapper select.border-dark {
        outline: 1px solid #282f3a;
    }

        select.form-control.border-dark:focus, .dataTables_wrapper select.border-dark:focus {
            outline: 1px solid #282f3a;
        }

.form-group label {
    font-size: 0.75rem;
    line-height: 1.2rem;
    vertical-align: middle;
    color: rgba(10, 36, 99, 0.5);
    overflow-wrap: normal;
    word-break: keep-all;
    text-align: right;
}

.form-group.has-danger .form-control, .form-group.has-danger .dataTables_wrapper select, .dataTables_wrapper .form-group.has-danger select {
    border-color: #ff4747;
}

.form-group .file-upload-default {
    visibility: hidden;
    position: absolute;
}

.form-group .file-upload-info {
    background: transparent;
}

input[type="file"].form-control {
    height: auto;
}

    input[type="file"].form-control:after {
        content: "Upload File";
        display: block;
        position: absolute;
        z-index: 1;
        background: #8491B1;
        padding: 6px;
        width: 81px;
        margin-top: -27px;
        border-radius: 3px;
        color: #fff;
        text-align: center;
    }

/* Icons */
.icons-list {
    border-left: 1px solid #f3f3f3;
    border-top: 1px solid #f3f3f3;
}

    .icons-list > div {
        background: #ffffff;
        border-bottom: 1px solid #f3f3f3;
        border-right: 1px solid #f3f3f3;
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        padding: 15px 15px;
        font-weight: 400;
        font-size: 0.875rem;
    }

        .icons-list > div i {
            display: inline-block;
            font-size: 20px;
            width: 40px;
            text-align: left;
            color: #4d83ff;
        }

.icon-in-bg {
    width: 55px;
    height: 55px;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.icon-xlg {
    font-size: 3rem;
}

.icon-lg {
    font-size: 2.5rem;
}

.icon-md {
    font-size: 1.875rem;
}

.icon-sm {
    font-size: 1rem;
}

/*icon boxes*/
.icon-box-primary {
    width: 2.812rem;
    height: 2.812rem;
    border-radius: 5px;
    line-height: 2.812rem;
    text-align: center;
    background: #4d83ff;
}

    .icon-box-primary i {
        color: white;
        font-size: 1.25rem;
    }

    .icon-box-primary.icon-box-lg {
        width: 3.75rem;
        height: 3.75rem;
        line-height: 3.75rem;
    }

        .icon-box-primary.icon-box-lg i {
            font-size: 2.5rem;
        }

.icon-box-secondary {
    width: 2.812rem;
    height: 2.812rem;
    border-radius: 5px;
    line-height: 2.812rem;
    text-align: center;
    background: #686868;
}

    .icon-box-secondary i {
        color: white;
        font-size: 1.25rem;
    }

    .icon-box-secondary.icon-box-lg {
        width: 3.75rem;
        height: 3.75rem;
        line-height: 3.75rem;
    }

        .icon-box-secondary.icon-box-lg i {
            font-size: 2.5rem;
        }

.icon-box-success {
    width: 2.812rem;
    height: 2.812rem;
    border-radius: 5px;
    line-height: 2.812rem;
    text-align: center;
    background: #71c016;
}

    .icon-box-success i {
        color: white;
        font-size: 1.25rem;
    }

    .icon-box-success.icon-box-lg {
        width: 3.75rem;
        height: 3.75rem;
        line-height: 3.75rem;
    }

        .icon-box-success.icon-box-lg i {
            font-size: 2.5rem;
        }

.icon-box-info {
    width: 2.812rem;
    height: 2.812rem;
    border-radius: 5px;
    line-height: 2.812rem;
    text-align: center;
    background: #7859df;
}

    .icon-box-info i {
        color: white;
        font-size: 1.25rem;
    }

    .icon-box-info.icon-box-lg {
        width: 3.75rem;
        height: 3.75rem;
        line-height: 3.75rem;
    }

        .icon-box-info.icon-box-lg i {
            font-size: 2.5rem;
        }

.icon-box-warning {
    width: 2.812rem;
    height: 2.812rem;
    border-radius: 5px;
    line-height: 2.812rem;
    text-align: center;
    background: #ffc100;
}

    .icon-box-warning i {
        color: white;
        font-size: 1.25rem;
    }

    .icon-box-warning.icon-box-lg {
        width: 3.75rem;
        height: 3.75rem;
        line-height: 3.75rem;
    }

        .icon-box-warning.icon-box-lg i {
            font-size: 2.5rem;
        }

.icon-box-danger {
    width: 2.812rem;
    height: 2.812rem;
    border-radius: 5px;
    line-height: 2.812rem;
    text-align: center;
    background: #ff4747;
}

    .icon-box-danger i {
        color: white;
        font-size: 1.25rem;
    }

    .icon-box-danger.icon-box-lg {
        width: 3.75rem;
        height: 3.75rem;
        line-height: 3.75rem;
    }

        .icon-box-danger.icon-box-lg i {
            font-size: 2.5rem;
        }

.icon-box-light {
    width: 2.812rem;
    height: 2.812rem;
    border-radius: 5px;
    line-height: 2.812rem;
    text-align: center;
    background: #f8f9fa;
}

    .icon-box-light i {
        color: white;
        font-size: 1.25rem;
    }

    .icon-box-light.icon-box-lg {
        width: 3.75rem;
        height: 3.75rem;
        line-height: 3.75rem;
    }

        .icon-box-light.icon-box-lg i {
            font-size: 2.5rem;
        }

.icon-box-dark {
    width: 2.812rem;
    height: 2.812rem;
    border-radius: 5px;
    line-height: 2.812rem;
    text-align: center;
    background: #282f3a;
}

    .icon-box-dark i {
        color: white;
        font-size: 1.25rem;
    }

    .icon-box-dark.icon-box-lg {
        width: 3.75rem;
        height: 3.75rem;
        line-height: 3.75rem;
    }

        .icon-box-dark.icon-box-lg i {
            font-size: 2.5rem;
        }

/* Lists */
ul,
ol,
dl {
    padding-left: 1rem;
    font-size: 0.875rem;
}

    ul li,
    ol li,
    dl li {
        line-height: 1.8;
    }

.list-ticked,
.list-arrow,
.list-star {
    list-style: none;
    padding: 0;
}

    .list-ticked li,
    .list-arrow li,
    .list-star li {
        padding-left: 1.5rem;
    }

        .list-ticked li:before,
        .list-arrow li:before,
        .list-star li:before {
            font-family: "Material Design Icons";
            margin-left: -1.5rem;
            width: 1.5rem;
            margin-right: .5rem;
        }

        .list-ticked li:before {
            content: '\F12D';
            color: #ff4747;
        }

        .list-arrow li:before {
            content: '\F142';
            color: #71c016;
        }

        .list-star li:before {
            content: '\F4CE';
            color: #ffc100;
        }

.solid-bullet-list {
    position: relative;
    padding-left: 0;
}

.rtl .solid-bullet-list {
    padding-right: 0;
}

.solid-bullet-list li {
    position: relative;
    list-style-type: none;
    padding-left: 25px;
    line-height: 1;
    padding-bottom: 2.125rem;
}

    .solid-bullet-list li * {
        line-height: .8;
    }

    .solid-bullet-list li:before, .solid-bullet-list li:after {
        content: "";
        position: absolute;
    }

    .solid-bullet-list li:before {
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        background: #4d83ff;
        z-index: 1;
    }

.solid-bullet-list:after {
    content: "";
    border: 1px solid #f3f3f3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    z-index: 0;
}

.bullet-line-list {
    padding-left: 30px;
    position: relative;
    list-style-type: none;
}

.rtl .bullet-line-list {
    padding-left: unset;
    padding-right: 30px;
}

.bullet-line-list li {
    position: relative;
}

    .bullet-line-list li:before {
        width: 15px;
        height: 15px;
        left: -30px;
        top: 0;
        border: 4px solid #4d83ff;
        margin-right: 15px;
        z-index: 2;
        background: #ffffff;
    }

.rtl .bullet-line-list li:before {
    left: unset;
    right: -45px;
}

.bullet-line-list li:before {
    content: "";
    position: absolute;
    border-radius: 100%;
}

.bullet-line-list:after {
    content: "";
    border: 1px solid #f3f3f3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 7px;
}

.rtl .bullet-line-list:after {
    left: unset;
    right: 7px;
}

/* Tables */
.table {
    margin-bottom: 0;
    border-collapse: collapse;
    border: 0 !important;
}


    .table tbody tr:nth-of-type(even) {
        background: #F6F7FC;
        border-collapse: collapse;
    }



    .table th:first-child, .table td:first-child {
        border-radius: 5px 0 0 5px;
    }

    .table th:last-child, .table td:last-child {
        border-radius: 0px 5px 5px 0px;
    }

    .table td, .table th {
        padding: 10px;
        border: 0px solid #ccc !important;
        text-align: left;
        font-size: 18px;
        border-collapse: collapse;
    }



    .table thead th {
        border-top: 0;
        border-bottom-width: 1px;
        font-weight: 500 !important;
        font-size: .7rem;
        vertical-align: middle;
        padding: .5rem 0.3rem;
        white-space: break-spaces !important;
    }

        .table thead th i {
            margin-left: 0.325rem;
        }

    .table th,
    .table td {
        vertical-align: middle;
        line-height: 1;
    }

        .table th input,
        .table td input {
            line-height: normal;
            padding: 2px 5px;
            font-size: .9em;
        }

    .table td {
        font-size: .7rem;
        padding: .3rem 0.3rem;
        font-weight: 400;
        color: #08113b;
        line-height: normal;
    }

        .table td img {
            width: 36px;
            height: 36px;
            border-radius: 100%;
        }

        .table td .badge {
            margin-bottom: 0;
        }

    .table.table-borderless {
        border: none;
    }

        .table.table-borderless tr,
        .table.table-borderless td,
        .table.table-borderless th {
            border: none;
        }

    .table.table-bordered {
        border-top: 1px solid #f3f3f3;
    }

.span-bdr tbody tr td span {
    border-bottom: 1px solid rgba(151, 151, 151, 0.18);
}

    .span-bdr tbody tr td span:last-child {
        border-bottom: 0px solid rgba(151, 151, 151, 0.18);
    }


.valign_top tbody tr td {
    vertical-align: top;
}

.span-bdr tbody tr td span {
    line-height: normal;
    display: block;
    padding: .6em 0;
}

.para tbody tr td p {
    line-height: normal;
    display: block;
    padding: .6em 0 !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    border-bottom: 1px solid rgba(151, 151, 151, 0.18);
    margin: 0;
}

    .para tbody tr td p:last-child {
        border-bottom: 0px solid rgba(151, 151, 151, 0.18);
    }

.border-btm tbody tr {
    border-bottom: 4px solid rgba(151, 151, 151, 0.18);
}

.table-striped tbody tr:nth-of-type(odd) {
    /*background-color: #f9f9f9;*/
    background-color: #fff !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: #f9f9f9 !important;
}

.table-striped tbody tr:hover {
    background-color: #F7F8FC !important;
    border-collapse: collapse;
}

.table thead tr:nth-child(odd) {
    background: #516492;
    box-sizing: border-box;
    border-collapse: collapse;
    color: #fff;
}

.table thead tr:nth-child(even) {
    background: #EDEFF6;
    box-sizing: border-box;
    border-collapse: collapse;
    color: #0A2463;
}


.table-bordered td, .table-bordered th {
    border: 0px solid #dee2e6;
}
/*-------------------------------------------------------------------*/
/* === Plugin overrides === */
/* Data Tables */
.dataTables_wrapper {
    padding-left: 0;
    padding-right: 0;
    padding-top: 1em;
}

    .dataTables_wrapper label {
        font-size: .8125rem;
    }

    .dataTables_wrapper select {
        padding: .4rem;
        outline-offset: -2px;
    }

    .dataTables_wrapper .dataTables_length select {
        margin-left: .25rem;
        margin-right: .25rem;
    }

    .dataTables_wrapper .dataTable {
        border-collapse: collapse !important;
    }

        .dataTables_wrapper .dataTable .btn {
            padding: 0.1rem 1rem;
            vertical-align: top;
        }

        .dataTables_wrapper .dataTable thead th {
            border-bottom-width: 0;
            border: 0px solid rgba(151, 151, 151, 0.18);
            padding: .5rem 0.3rem;
            white-space: normal;
            line-height: 1.4;
            vertical-align: top;
            font-weight: 500;
            font-size: .7em;
        }

        .dataTables_wrapper .dataTable thead .sorting:before, .dataTables_wrapper .dataTable thead .sorting:after,
        .dataTables_wrapper .dataTable thead .sorting_asc:before,
        .dataTables_wrapper .dataTable thead .sorting_asc:after,
        .dataTables_wrapper .dataTable thead .sorting_desc:before,
        .dataTables_wrapper .dataTable thead .sorting_desc:after,
        .dataTables_wrapper .dataTable thead .sorting_asc_disabled:before,
        .dataTables_wrapper .dataTable thead .sorting_asc_disabled:after,
        .dataTables_wrapper .dataTable thead .sorting_desc_disabled:before,
        .dataTables_wrapper .dataTable thead .sorting_desc_disabled:after {
            line-height: 2.5;
            font-family: Material Design Icons;
            font-size: .65rem;
        }

        .dataTables_wrapper .dataTable thead .sorting:before,
        .dataTables_wrapper .dataTable thead .sorting_asc:before,
        .dataTables_wrapper .dataTable thead .sorting_desc:before,
        .dataTables_wrapper .dataTable thead .sorting_asc_disabled:before,
        .dataTables_wrapper .dataTable thead .sorting_desc_disabled:before {
            content: "\F05D";
            right: 2.4em;
            bottom: 1.5rem;
        }

        .dataTables_wrapper .dataTable thead .sorting:after,
        .dataTables_wrapper .dataTable thead .sorting_asc:after,
        .dataTables_wrapper .dataTable thead .sorting_desc:after,
        .dataTables_wrapper .dataTable thead .sorting_asc_disabled:after,
        .dataTables_wrapper .dataTable thead .sorting_desc_disabled:after {
            content: "\F045";
            right: 2em;
            bottom: 1.1rem;
        }

        .dataTables_wrapper .dataTable tbody tr td {
            border: 0px solid rgba(151, 151, 151, 0.18);
            color: #08113b;
            white-space: normal;
            font-weight: 400;
            padding: .3rem 0.3rem;
            line-height: normal;
            font-size: .7rem;
        }

            .dataTables_wrapper .dataTable tbody tr td a {
                color: #146FD1;
            }

table.dataTable tbody tr {
    background: rgba(6, 226, 179, 0.10) !important;
}

.dataTables_wrapper .dataTable tbody tr:nth-child(odd) {
    background-color: #ffffff !important;
}

.dataTables_wrapper .dataTable tbody tr:hover {
    background-color: #EDEFF6 !important;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 20px;
    zoom: .8;
}

.dataTables_wrapper .dataTables_info {
    font-size: 0.7rem;
}

table.dataTable {
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
    margin: 0 -1px !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        border: 1px solid #dee2e6 !important;
        background-color: transparent !important;
        background: none !important;
    }

.page-link:hover {
    border: 1px solid #dee2e6 !important;
}

@media (max-width: 576px) {
    .dataTables_wrapper .dataTables_info {
        margin-bottom: 1rem;
    }
}

.dataTables_wrapper .dataTable thead tr {
    background: #516492;
    box-sizing: border-box;
    border-collapse: collapse;
    color: #fff;
}
/*-------------------------------------------------------------------*/
/* === Landing screens === */
/* Auth */
.auth .login-half-bg, .auth .register-half-bg, .auth.lock-full-bg {
    background: rgb(10,36,99);
    background: linear-gradient(45deg, rgba(10,36,99,1) 0%, rgba(6,226,179,1) 100%);
    overflow: hidden;
}

    .auth .login-half-bg::after {
        content: "";
        background: url(../css/images/login-bg.jpg?v=0AqEU-XTxCyCubc9YgHuBhKrjDc) bottom;
        opacity: 0.15;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
        background-size: cover;
        background-repeat: no-repeat;
    }


    .auth .register-half-bg::after, .auth .register-half-bg::after {
        content: "";
        background: url(../css/images/forgotpass.jpg?v=0AqEU-XTxCyCubc9YgHuBhKrjDc) bottom;
        opacity: 0.15;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        z-index: -1;
        background-size: cover;
        background-repeat: no-repeat;
    }


.auth .lock-profile-img {
    width: 90px;
    height: 90px;
    border-radius: 100%;
}

.auth .auth-form-light {
    background: #ffffff;
    box-shadow: 0 0 30px #ddd;
}

    .auth .auth-form-light select {
        color: #c9c8c8;
    }

    .auth .auth-form-light .input-group .form-control:focus, .auth .auth-form-light .input-group .dataTables_wrapper select:focus, .dataTables_wrapper .auth .auth-form-light .input-group select:focus, .auth .auth-form-light .input-group .form-control:active, .auth .auth-form-light .input-group .dataTables_wrapper select:active, .dataTables_wrapper .auth .auth-form-light .input-group select:active {
        border-color: #f3f3f3;
    }

.auth .auth-form-transparent {
    background: transparent;
}

    .auth .auth-form-transparent .form-control, .auth .auth-form-transparent .dataTables_wrapper select, .dataTables_wrapper .auth .auth-form-transparent select,
    .auth .auth-form-transparent .input-group-text {
        /*border-color: transparent;*/
    }

        .auth .auth-form-transparent .form-control:focus, .auth .auth-form-transparent .dataTables_wrapper select:focus, .dataTables_wrapper .auth .auth-form-transparent select:focus, .auth .auth-form-transparent .form-control:active, .auth .auth-form-transparent .dataTables_wrapper select:active, .dataTables_wrapper .auth .auth-form-transparent select:active,
        .auth .auth-form-transparent .input-group-text:focus,
        .auth .auth-form-transparent .input-group-text:active {
            /* border-color: #686868;
        }

    .auth .auth-form-transparent select {
        outline-color: #686868;*/
        }

.auth.auth-img-bg {
    padding: 0;
}

@media (min-width: 768px) {
    .auth.auth-img-bg .auth-form-transparent {
        width: 65%;
        margin: auto;
    }
}

.auth .brand-logo {
    margin-bottom: 2rem;
}

.auth .auth-form-transparent h4 {
    color: #0A2463;
    font-weight: 500;
    font-size: 1.2rem;
}

.auth .auth-form-transparent span {
    color: #0A2463;
    font-weight: 400;
    font-size: .7rem;
    opacity: .5;
    line-height: 1.5;
    display: inline-block;
}


.auth .brand-logo img {
    width: 140px;
}

.auth form .form-group {
    margin-bottom: 1.5rem;
}

    .auth form .form-group label {
        font-size: .8rem;
        color: rgba(10, 36, 99, 0.5);
        margin: .5rem 0;
    }

    .auth form .form-group .form-control, .auth form .form-group .dataTables_wrapper select, .dataTables_wrapper .auth form .form-group select {
        /*
        background: #D3FFF3;
        border-radius: 4px;
        font-size: .8rem;
        padding: 15px;
        color: #000;
        */
        width: 100%;
    }

.auth form .auth-form-btn {
    height: 50px;
    line-height: 1.5;
}

.auth form .auth-link {
    font-size: 0.875rem;
    color: #146FD1;
}

    .auth form .auth-link:hover {
        color: initial;
    }

.page-body-wrapper {
    min-height: calc(100vh - 0px);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    padding-left: 0;
    padding-right: 0;
    padding-top: 50px;
}

    .page-body-wrapper.full-page-wrapper {
        width: 100%;
        min-height: 100vh;
        padding-top: 0;
    }

.main-panel {
    transition: width 0.25s ease, margin 0.25s ease;
    width: calc(100% - 227px);
    min-height: calc(100vh - 60px);
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

@media (max-width: 991px) {
    .main-panel {
        margin-left: 0;
        width: 100%;
    }
}

.content-wrapper {
    background: #F8FAFF;
    padding: 1.5rem 1.04rem;
    width: 100%;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}

@media (max-width: 767px) {
    .content-wrapper {
        padding: 1rem 1rem;
    }
}

/* Sidebar */
.sidebar {
    min-height: calc(100vh - 60px);
    background: #ffffff;
    font-weight: 400;
    padding: 0;
    width: 235px;
    z-index: 11;
    transition: width 0.25s ease, background 0.25s ease;
    -webkit-transition: width 0.25s ease, background 0.25s ease;
    -moz-transition: width 0.25s ease, background 0.25s ease;
    -ms-transition: width 0.25s ease, background 0.25s ease;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    border-right: 0px solid #e3e3e3;
    box-shadow: 2px 0px 20px rgb(0,0,0, .05);
}

    .sidebar .nav {
        overflow: hidden;
        flex-wrap: nowrap;
        flex-direction: column;
        margin-bottom: 60px;
    }

        .sidebar .nav .nav-item {
            -webkit-transition-duration: 0.25s;
            -moz-transition-duration: 0.25s;
            -o-transition-duration: 0.25s;
            transition-duration: 0.25s;
            transition-property: background;
            -webkit-transition-property: background;
        }

            .sidebar .nav .nav-item .collapse {
                z-index: 999;
            }

            .sidebar .nav .nav-item .nav-link {
                display: -webkit-flex;
                display: flex;
                -webkit-align-items: center;
                align-items: center;
                white-space: nowrap;
                padding: 1rem 1.5rem 1rem 1.25rem;
                color: rgba(10, 36, 99, .5);
                -webkit-transition-duration: 0.45s;
                -moz-transition-duration: 0.45s;
                -o-transition-duration: 0.45s;
                transition-duration: 0.45s;
                transition-property: color;
                -webkit-transition-property: color;
            }

                .sidebar .nav .nav-item .nav-link i {
                    color: inherit;
                }

        .sidebar .nav .vsep {
            border-top: 1px solid #DBDFE9;
            margin: 0px 16px;
        }

        .sidebar .nav .nav-item .nav-link i.menu-icon {
            font-size: 0.9rem;
            line-height: 1;
            margin-right: 1.1rem;
            color: inherit;
        }

.rtl .sidebar .nav .nav-item .nav-link i.menu-icon {
    margin-left: 2rem;
    margin-right: 0;
}

.sidebar .nav .nav-item .nav-link i.menu-icon:before {
    vertical-align: middle;
}

.sidebar .nav .nav-item .nav-link i.menu-arrow {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: auto;
    margin-right: 0;
    color: rgba(10, 36, 99, 0.5);
}

.rtl .sidebar .nav .nav-item .nav-link i.menu-arrow {
    margin-left: 0;
    margin-right: auto;
}

.sidebar .nav .nav-item .nav-link i.menu-arrow:before {
    content: "\F415";
    font-family: "Material Design Icons";
    font-style: normal;
    display: block;
    font-size: 0.8rem;
    line-height: 10px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.sidebar .nav .nav-item .nav-link .menu-title {
    color: inherit;
    display: inline-block;
    font-size: .7rem;
    line-height: 1;
    vertical-align: middle;
    text-transform: uppercase;
}

.sidebar .nav .nav-item .nav-link .badge {
    margin-left: auto;
}

.rtl .sidebar .nav .nav-item .nav-link .badge {
    margin-left: 0;
    margin-right: auto;
}

.sidebar .nav .nav-item .nav-link[aria-expanded="true"] i.menu-arrow:before {
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    line-height: 1px;
    overflow: hidden;
}

.sidebar .nav .nav-item.active > .nav-link {
    background: initial;
    position: relative;
    font-weight: 500;
}

    .sidebar .nav .nav-item.active > .nav-link i,
    .sidebar .nav .nav-item.active > .nav-link .menu-title,
    .sidebar .nav .nav-item.active > .nav-link .menu-arrow {
        color: rgba(10, 36, 99, 1);
    }

.sidebar .nav:not(.sub-menu) {
    margin-top: 0rem;
}

    .sidebar .nav:not(.sub-menu) > .nav-item {
        border-bottom: 0px solid #f3f3f3;
        margin-top: 0;
    }

        .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link {
            margin: 0;
        }

        .sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link {
            background: transparent;
            color: #0A2463;
        }

.sidebar .nav.sub-menu {
    margin-bottom: 0;
    margin-top: 0;
    list-style: none;
    padding: 0.25rem 0 0.25rem 2.6rem;
    background: #fff;
    border-bottom: 0px solid #f3f3f3;
}

    .sidebar .nav.sub-menu .nav-item {
        padding: .2rem 0 0;
    }

        .sidebar .nav.sub-menu .nav-item::before {
            content: '\F142';
            position: absolute;
            margin: 6.1px 0px;
            font: normal normal normal 24px/1 "Material Design Icons";
            font-size: 1.1rem;
            color: rgba(10, 36, 99, 0.8);
        }

        .sidebar .nav.sub-menu .nav-item .nav-link {
            color: rgba(10, 36, 99, 0.8);
            padding: 0.6rem 1.5rem;
            position: relative;
            font-size: 0.65rem;
            line-height: 1;
            height: auto;
            border-top: 0;
        }

            .sidebar .nav.sub-menu .nav-item .nav-link:hover {
                color: rgba(10, 36, 99, 1);
            }

            .sidebar .nav.sub-menu .nav-item .nav-link.active {
                color: rgba(10, 36, 99, 1);
                background: transparent;
            }

        .sidebar .nav.sub-menu .nav-item:hover {
            background: transparent;
        }

/* style for off-canvas menu*/
@media screen and (max-width: 991px) {
    .sidebar-offcanvas {
        position: fixed;
        max-height: calc(100vh - 60px);
        top: 50px;
        bottom: 0;
        overflow: auto;
        right: -227px;
        -webkit-transition: all 0.25s ease-out;
        -o-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
    }

        .sidebar-offcanvas.active {
            right: 0;
            box-shadow: 0px 3px 13px #ccc;
        }
}

/* Navbar */
.navbar {
    font-weight: 400;
    transition: background 0.25s ease;
    -webkit-transition: background 0.25s ease;
    -moz-transition: background 0.25s ease;
    -ms-transition: background 0.25s ease;
}

    .navbar .navbar-brand-wrapper {
        background: #fff;
        /*background: rgb(41,250,196);
        background: linear-gradient(57deg, rgba(41,250,196,1) 0%, rgba(11,233,175,1) 100%);
        border-bottom: 1px solid #e3e3e3;*/
        transition: width 0.25s ease, background 0.25s ease;
        -webkit-transition: width 0.25s ease, background 0.25s ease;
        -moz-transition: width 0.25s ease, background 0.25s ease;
        -ms-transition: width 0.25s ease, background 0.25s ease;
        width: 227px;
        height: 50px;
        border-right: 0px solid #e3e3e3;
        box-shadow: 0 5px 20px rgb(65,70,76, .07);
    }

        .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper {
            margin-left: 1.1rem;
            margin-right: 1.375rem;
        }

            .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand {
                color: #27367f;
                font-size: 1.5rem;
                margin-right: 0;
                padding: .25rem 0;
            }

                .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand.brand-logo-mini {
                    display: none;
                }

@media (max-width: 991px) {
    .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand.brand-logo-mini {
        display: inline-block;
        width: 1.875rem;
    }
}

.navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand:active, .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand:focus, .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand:hover {
    color: #1b2658;
}

.navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-brand img {
    width: calc(240px - 130px);
    max-width: 100%;
    height: 24px;
    margin: auto;
    vertical-align: middle;
}

.navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-toggler {
    border: 0;
    color: #0A2463;
    font-size: 1.2rem;
    padding: 0;
    outline: 0;
}

@media (max-width: 991px) {
    .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .navbar-toggler:not(.navbar-toggler-right) {
        display: none;
    }
}

.navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .brand-logo-mini {
    padding-left: 0;
    text-align: center;
}

    .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .brand-logo-mini img {
        width: calc(70px - 30px);
        max-width: 100%;
        margin: auto;
    }

.navbar .navbar-menu-wrapper {
    background: #fff;
    /*background: rgb(41,250,196);
    background: linear-gradient(57deg, rgba(41,250,196,1) 0%, rgba(11,233,175,1) 100%);*/
    transition: width 0.25s ease;
    -webkit-transition: width 0.25s ease;
    -moz-transition: width 0.25s ease;
    -ms-transition: width 0.25s ease;
    color: #9b9b9b;
    padding-left: 1.062rem;
    padding-right: 1.062rem;
    width: calc(100% - 227px);
    height: 50px;
    border-bottom: 0px solid #e3e3e3;
    box-shadow: 0 5px 20px rgb(65,70,76, .07);
}

@media (max-width: 991px) {
    .navbar .navbar-menu-wrapper {
        width: calc(100% - 50px);
        padding-left: 15px;
        padding-right: 15px;
    }
}

.navbar .navbar-menu-wrapper .navbar-toggler {
    border: 0;
    color: inherit;
    font-size: 1.5rem;
    padding: 0;
    outline: 0;
    color: #0A2463;
}

@media (max-width: 991px) {
    .navbar .navbar-menu-wrapper .navbar-toggler:not(.navbar-toggler-right) {
        display: none;
    }
}

@media (max-width: 991px) {
    .navbar .navbar-menu-wrapper .navbar-toggler.navbar-toggler-right {
        padding-left: 15px;
        padding-right: 11px;
    }
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item {
    margin-left: 1rem;
    margin-right: 1rem;
}

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item:last-child {
        margin-right: 0;
    }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item .nav-link {
        color: inherit;
        font-size: 0.875rem;
        padding: 0rem;
    }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search {
        margin-left: 0rem;
    }

        .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group {
            background: #04FFC9;
            border-radius: 44px;
            padding: 0 .75rem;
        }

            .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select,
            .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .input-group-text {
                background: transparent;
                border: 0;
                color: #0A2463;
                padding: 0;
                border-radius: 4px;
            }

                .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .input-group-text i {
                    color: #0A2463;
                    font-size: 1.4rem;
                }

            .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select {
                margin-left: .5rem;
                height: 2.5rem;
            }

                .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control::-webkit-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select::-webkit-input-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select::-webkit-input-placeholder {
                    color: #9b9b9b;
                }

                .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control:-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select:-moz-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select:-moz-placeholder {
                    color: #9b9b9b;
                }

                .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control::-moz-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select::-moz-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select::-moz-placeholder {
                    color: #9b9b9b;
                }

                .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .form-control:-ms-input-placeholder, .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group .dataTables_wrapper select:-ms-input-placeholder, .dataTables_wrapper .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-search .input-group select:-ms-input-placeholder {
                    color: #9b9b9b;
                }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-settings {
        margin: 0;
        padding-left: 1.5rem;
    }

        .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-settings .nav-link {
            padding: 0;
            text-align: center;
        }

        .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-settings i {
            font-size: 1.5rem;
            vertical-align: middle;
        }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile {
        margin-left: 1.8rem;
        margin-right: 1.8rem;
        white-space: nowrap;
    }

@media (max-width: 768px) {
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile {
        margin-left: .5rem;
        margin-right: .5rem;
    }
}

.nav-search, .nav-profile {
    zoom: 1;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link img {
    width: 32px;
    height: 32px;
    border-radius: 100%;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-name {
    margin-left: .5rem;
    margin-right: .5rem;
    color: #0A2463;
    font-weight: 500;
}

@media (max-width: 767px) {
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link .nav-profile-name {
        display: none;
    }
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile .nav-link::after {
    color: #4a4a4a;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .dropdown-menu {
    border: none;
    -webkit-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 3px 21px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
    position: absolute;
    font-size: 0.9rem;
    margin-top: 0;
    right: 0;
    left: auto;
    top: 45px;
    z-index: -1;
}

.rtl .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
    right: auto;
    left: 0;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item {
    margin-bottom: 0;
    padding: .65rem 1.5rem;
    cursor: pointer;
    color: #0A2463;
    opacity: .7;
}

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item:hover {
        opacity: 1;
    }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item .item-thumbnail img {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
    }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item .item-thumbnail .item-icon {
        width: 2.25rem;
        height: 2.25rem;
        border-radius: 50%;
        color: #ffffff;
    }

        .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item .item-thumbnail .item-icon i {
            font-size: 17px;
        }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item .item-content {
        padding-left: 0.937rem;
    }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item .badge {
        margin-left: 2.5rem;
    }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item .ellipsis {
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.rtl .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item i {
    margin-left: 10px;
}

.rtl .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-item .badge {
    margin-left: 0;
    margin-right: 2.5rem;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown .dropdown-divider {
    margin: 0;
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown i {
    margin-right: .5rem;
    vertical-align: middle;
    font-size: 1rem;
    color: #0A2463;
}

@media (max-width: 991px) {
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown {
        position: static;
    }

        .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
            left: 20px;
            right: 20px;
            top: 60px;
            width: calc(100% - 40px);
        }
}

.navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator {
    position: relative;
    padding: 0;
    text-align: center;
}

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator i {
        font-size: 1.5rem;
        margin-right: 0;
        vertical-align: middle;
    }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator .count {
        position: absolute;
        left: 59%;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        background: #ff4747;
        top: 9px;
    }

    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .count-indicator:after {
        display: none;
    }

@media (min-width: 992px) {
    .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
        margin-left: auto;
    }

    .rtl .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right {
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 991px) {
    .navbar {
        flex-direction: row;
    }

        .navbar .navbar-brand-wrapper {
            width: 50px;
        }

            .navbar .navbar-brand-wrapper .navbar-brand.brand-logo {
                display: none;
            }

            .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini {
                display: inline-block;
            }

    .navbar-collapse {
        display: flex;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .navbar .navbar-brand-wrapper {
        width: 50px;
    }

        .navbar .navbar-brand-wrapper .brand-logo-mini {
            padding-top: 0px;
        }

    .sidebar-offcanvas.active {
        width: 100%;
    }

    .headerlogo, .mow_logo {
        width: 24% !important;
        opacity: 0;
    }

    .m_headerlogo {
        width: 140px;
        padding-right: 0px;
        display: block !important;
        position: absolute;
        right: 0;
        top: 10px;
        z-index: 1;
    }

        .m_headerlogo img {
            width: 40%;
            margin: 0 auto;
            margin: 0 0 0 10px;
            /*-webkit-filter: grayscale(100%) brightness(10%) contrast(100%);*/
        }
}

/* Layouts */
@media (min-width: 992px) {
    .sidebar-icon-only .navbar .navbar-brand-wrapper {
        width: 50px;
    }

        .sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper {
            margin-right: auto;
        }

            .sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .brand-logo {
                display: none;
            }

            .sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand-inner-wrapper .brand-logo-mini {
                display: none;
            }

    .sidebar-icon-only .navbar .navbar-menu-wrapper {
        width: calc(100% - 50px);
    }

    .sidebar-icon-only .sidebar {
        width: 50px;
    }

        .sidebar-icon-only .sidebar .nav {
            overflow: visible;
        }

            .sidebar-icon-only .sidebar .nav .nav-item {
                position: relative;
            }

                .sidebar-icon-only .sidebar .nav .nav-item .nav-link {
                    display: block;
                    padding-left: .5rem;
                    padding-right: .5rem;
                    text-align: center;
                    position: static;
                }

                    .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title,
                    .sidebar-icon-only .sidebar .nav .nav-item .nav-link .badge, .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-sub-title {
                        display: none;
                    }

                    .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title {
                        border-radius: 0 5px 5px 0px;
                    }

    .rtl.sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title {
        border-radius: 5px 0 0 5px;
    }

    .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-icon {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 0;
    }

    .sidebar-icon-only .sidebar .nav .nav-item .nav-link i.menu-arrow {
        display: none;
    }

    .sidebar-icon-only .sidebar .nav .nav-item .nav-link[aria-expanded] .menu-title {
        border-radius: 0 5px 0 0px;
    }

    .rtl.sidebar-icon-only .sidebar .nav .nav-item .nav-link[aria-expanded] .menu-title {
        border-radius: 5px 0 0 0;
    }

    .sidebar-icon-only .sidebar .nav .nav-item .collapse {
        display: none;
    }

    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title {
        display: -webkit-flex;
        display: flex;
        -webkit-align-items: center;
        align-items: center;
        background: #ffffff;
        padding: 0.5rem 1.4rem;
        left: 50px;
        position: absolute;
        text-align: left;
        top: 0;
        bottom: 0;
        width: 220px;
        z-index: 1;
        line-height: 1.8;
        box-shadow: 4px 0px 7px 0px rgba(182, 185, 189, 0.25);
    }

    .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title {
        left: auto;
        right: 50px;
        text-align: left;
        box-shadow: -4px 0px 7px 0px rgba(182, 185, 189, 0.25);
    }

    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title:after {
        display: none;
    }

    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link:hover .menu-title {
        background: #ffffff;
    }

    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse,
    .sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
        display: block;
        padding: .5rem 0;
        background: #ffffff;
        border-radius: 0 0 5px 0;
        position: absolute;
        left: 50px;
        width: 220px;
        box-shadow: 4px 4px 7px 0px rgba(182, 185, 189, 0.25);
    }

    .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse, .rtl.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
        left: auto;
        right: 50px;
        border-radius: 0 0 0 5px;
        box-shadow: -4px 4px 7px 0px rgba(182, 185, 189, 0.25);
    }

    .sidebar-icon-only .sidebar .nav.sub-menu {
        padding: 0 0 0 1.5rem;
    }

        .sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link {
            text-align: left;
            padding-left: 20px;
        }

    .sidebar-icon-only .main-panel {
        width: calc(100% - 50px);
    }
}

.rtl {
    direction: rtl;
    text-align: right;
}

    .rtl .sidebar .nav {
        padding-right: 0;
    }

        .rtl .sidebar .nav.sub-menu {
            padding: 0 4.5rem 0 0;
        }

.sidebar-icon-only.rtl .sidebar .nav.sub-menu {
    padding-right: 0rem;
}

    .sidebar-icon-only.rtl .sidebar .nav.sub-menu .nav-item .nav-link {
        padding-right: 3rem;
        text-align: right;
    }

        .sidebar-icon-only.rtl .sidebar .nav.sub-menu .nav-item .nav-link:before {
            right: 1.75rem;
        }

.rtl .product-chart-wrapper::-webkit-scrollbar,
.rtl .tab-content .tab-pane .scroll-wrapper::-webkit-scrollbar,
.rtl .sidebar-fixed .nav::-webkit-scrollbar,
.rtl .table-responsive::-webkit-scrollbar,
.rtl ul.chats::-webkit-scrollbar {
    width: 0.5em;
}

.rtl .product-chart-wrapper::-webkit-scrollbar-track,
.rtl .tab-content .tab-pane .scroll-wrapper::-webkit-scrollbar-track,
.rtl .sidebar-fixed .nav::-webkit-scrollbar-track,
.rtl .table-responsive::-webkit-scrollbar-track,
.rtl ul.chats::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.rtl .product-chart-wrapper::-webkit-scrollbar-thumb,
.rtl .tab-content .tab-pane .scroll-wrapper::-webkit-scrollbar-thumb,
.rtl .sidebar-fixed .nav::-webkit-scrollbar-thumb,
.rtl .table-responsive::-webkit-scrollbar-thumb,
.rtl ul.chats::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}

/* custom styles */

.navbar-nav h3 {
    color: #0A2463;
    font-size: 1.2em;
    padding: 10px 0 0;
    font-weight: 600;
}

.login-btn {
    color: #0A2463;
    /* background: #06E2B3;*/
    background: rgb(11,233,175);
    background: linear-gradient(-45deg, rgba(11,233,175,1) 0%, rgba(41,250,196,1) 100%);
    box-shadow: 0 2px 4px 0 #ccc;
    font-size: .8rem;
    border: 0;
    line-height: 2.5;
    width: 100%;
    border-radius: 5px;
    font-weight: 500;
    text-shadow: 0 1px 0 #ccc;
}

.primary-btn {
    color: #0A2463;
    /* background: #146FD1;
         background: #06E2B3;
    */
    background: rgb(11,233,175);
    background: linear-gradient(-45deg, rgba(11,233,175,1) 0%, rgba(41,250,196,1) 100%);
    box-shadow: 0 1px 4px 0 rgba(6, 226, 179, 0.37);
    font-size: .75rem;
    border: 0;
    line-height: 1;
    width: 100%;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    border: 2px solid transparent;
    white-space: nowrap;
}

    .primary-btn:hover {
        color: #0A2463;
        opacity: .9;
        border: 2px solid #999;
    }

.cancel-btn {
    color: #666;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(121, 139, 149, 0.44);
    font-size: .75rem;
    border: 0;
    line-height: 1;
    width: 100%;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    border: 2px solid transparent;
    white-space: nowrap;
}

    .cancel-btn:hover {
        color: #999;
        opacity: .9;
        border: 2px solid #ccc;
    }

.excel-btn {
    color: #fff;
    background: #008000;
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.44);
    font-size: .75rem;
    border: 0;
    line-height: 1;
    width: 100%;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    border: 2px solid transparent;
    white-space: nowrap;
}

    .excel-btn:hover {
        color: #e8e8e8;
        opacity: .9;
        border: 2px solid #ccc;
    }

.btn-refresh {
    padding: 4px 4px;
    font-size: .75rem;
    cursor: pointer;
    color: #fff;
    background: #008000;
    border: 0;
    line-height: 1;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    border: 2px solid transparent;
    white-space: nowrap;
}

    .btn-refresh:hover {
        color: #e8e8e8;
        opacity: .9;
        border: 2px solid #ccc;
    }


.lrg-txt {
    width: 400px;
    color: #fff;
    text-transform: uppercase;
    font-size: 7rem;
    font-weight: 700;
    font-style: italic;
    opacity: .3;
    position: absolute;
    word-break: break-all;
    left: 5%;
    bottom: 5%;
    letter-spacing: -0.2rem;
    text-shadow: 0px 30px 60px #444;
    line-height: 0.8;
    text-align: left;
}

.txt-muted {
    color: rgba(0, 0, 0, 0.5);
}

h5.stats {
    font-size: 1.4rem;
}

.clr1 {
    color: #146FD1;
}

.clr2 {
    color: #0A2463;
}

.clr3 {
    color: #06E2B3;
}

.clr4 {
    color: #EF3964;
}

.clr5 {
    color: #FFCE49;
}

.sidebar-icon-only .menu-search {
    display: none;
}

.menu-search {
    margin: 15px 10px 0;
    border: 1px solid #D3FFF3;
    padding: 4px 14px;
    border-radius: 40px;
    background: #D3FFF3;
}

    .menu-search i {
        font-size: 1.2rem;
    }

    .menu-search input {
        border: 0;
        background: transparent;
        padding: 0 5px;
        font-size: .9rem;
        color: #0A2463;
        margin: 0;
        line-height: 2;
        width: 100%;
    }

.bdr-tp {
    border-top: 1px solid #f3f3f3;
    padding-top: 1rem;
}


/* setting routes */
.white-hd {
    background: #ffffff;
    padding: .5em 0em;
    box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

    .white-hd h4.card-title {
        color: #0A2463;
        font-size: 1.1rem;
        margin: 0;
        line-height: 1.5;
    }

    .white-hd button {
        /*
    color: #0A2463;
    background: #06E2B3;
    box-shadow: 0 1px 4px 0 rgba(6, 226, 179, 0.37);
    font-size: .8rem;
    border: 0;
    line-height: 2;
    width: 100%;
    border-radius: 4px;
    font-weight: 500;
    text-shadow: 0 1px 0 #ccc;
    text-transform: uppercase;
    margin:0;

    */
        padding: .5em 0;
    }

    .white-hd label {
        text-align: right;
    }

.h50vh {
    height: 50vh;
}

.h80vh {
    height: 80vh;
}

.rt-bx {
    background: #F4F7F6;
    box-shadow: -2px 0px 0px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
}

    .rt-bx .stop p {
        color: #0A2463;
        font-size: 1.2em !important;
        font-weight: 500;
        padding: 0px 4px .4em !important;
        line-height: 1.3em;
        margin: 0;
    }

    .rt-bx .stop {
        background: #fff;
        padding: 1em 0;
        box-shadow: 0 0px 2px 3px #ddd;
        margin: .1em 0 .1em 0;
        position: relative;
        border-left: 0px solid #CCC;
        zoom: .75;
    }

        .rt-bx .stop:after {
            content: '';
            position: absolute;
            left: 23px;
            border-left: 1px solid #ddd;
            z-index: 1;
            height: 100%;
            top: 0;
        }

        .rt-bx .stop span, .rt-bx .stop label {
            font-size: .9em;
            padding: 0px 5px;
            line-height: 1;
            margin: 0;
            vertical-align: middle;
        }

        .rt-bx .stop span {
            display: inline-block;
        }


    .rt-bx .zone p {
        color: #0A2463;
        font-size: 1.2em;
        font-weight: 500;
        padding: 0px 4px .4em;
        line-height: 1.3em;
        margin: 0;
    }

    .rt-bx .zone {
        background: #fff;
        padding: 1em 0;
        box-shadow: 0 0px 2px 3px #ddd;
        margin: .1em 0 .1em 0;
        position: relative;
        border-left: 0px solid #CCC;
        zoom: .75;
    }


        .rt-bx .zone span, .rt-bx .zone label {
            font-size: .9em;
            padding: 0px 5px;
            line-height: 1;
            margin: 0;
            vertical-align: middle;
        }

        .rt-bx .zone span {
            display: inline-block;
        }

.map {
    height: 50vh;
}

.rt-bx .stop .cont {
    display: flex;
}

    .rt-bx .stop .cont > div {
        justify-content: space-between;
        padding: 0 12px;
        width: 78%;
    }

        .rt-bx .stop .cont > div:last-child {
            justify-content: flex-end;
            width: 12%;
            padding: 0;
        }

        .rt-bx .stop .cont > div:first-child {
            width: 8%;
            padding: 0 14px;
        }

.rt-bx .stop .sm_cont {
    width: 90%;
    margin-left: 8%;
}

    .rt-bx .stop .sm_cont div:last-child {
        margin-left: 8%;
    }


.rt-bx .stop .spn-order {
    margin: 0;
    position: absolute;
    right: 42px;
    font-size: .9em;
    top: 7px;
    font-weight: 500;
    background: #e9e9e9;
    color: #444;
    padding: 3px 5px;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
}


.rt-bx .zone .cont {
    display: flex;
}

    .rt-bx .zone .cont > div {
        justify-content: space-between;
        padding: 0 12px;
        width: 78%;
    }

        .rt-bx .zone .cont > div:last-child {
            justify-content: flex-end;
            width: 12%;
            padding: 0;
        }

        .rt-bx .zone .cont > div:first-child {
            width: 8%;
            padding: 0 14px;
        }

.rt-bx .zone .sm_cont {
    width: 90%;
    margin-left: 8%;
}

    .rt-bx .zone .sm_cont div:last-child {
        margin-left: 8%;
    }


.rt-bx .zone .spn-order {
    margin: 0;
    position: absolute;
    right: 42px;
    font-size: .9em;
    top: 7px;
    font-weight: 500;
    background: #e9e9e9;
    color: #444;
    padding: 3px 5px;
    border-radius: 3px;
    text-align: center;
    vertical-align: middle;
}

#color-palette {
    clear: both;
}

.color-button {
    width: 14px;
    height: 14px;
    font-size: 0;
    margin: 2px;
    float: left;
    cursor: pointer;
}

.dd {
    float: right;
}

    .dd .dropdown-menu {
        margin: 0;
        padding: 0;
        box-shadow: 0px 9px 5px 2px rgba(230, 234, 236, 1);
        border-radius: 10px;
        transform: translate3d(-162px, 10px, 0) !important;
    }

    .dd span {
        color: #878787;
        text-transform: uppercase;
        padding: 4px 23px 9px !important;
    }

    .dd .dropdown-menu a:first-child {
        border-top: 0px;
    }

    .dd .dropdown-menu a {
        color: #146FD1;
        padding: 7px 23px !important;
        display: block;
        border-top: .5px solid #E4E4E4;
    }

        .dd .dropdown-menu a:first-child {
            color: #146FD1 !important;
        }

        .dd .dropdown-menu a:last-child {
            /*color:#EF3964;*/
        }

        .dd .dropdown-menu a:hover {
            border-radius: 10px;
        }

    .dd i {
        font-size: 1.3em;
    }

/* - breadcrumb - */
.breadcrumb {
    margin-bottom: 0;
    background-color: transparent;
    margin-top: -20px;
    zoom: .9;
    padding: 12px 0;
}

    .breadcrumb .breadcrumb-item a {
        color: #146FD1;
        font-weight: 500;
    }

        .breadcrumb .breadcrumb-item a:hover {
            opacity: .8;
            text-decoration: none;
        }
/* form avatar */

.avatar {
    width: 150px;
    height: 150px;
    border: 1px solid #e8e8e8;
    background: #D3FFF3;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

    .avatar i {
        font-size: 9em;
        opacity: .1;
        position: absolute;
        z-index: 1;
    }


.avatar_lg {
    width: 250px;
    height: 250px;
    border: 1px solid #e8e8e8;
    background: #D3FFF3;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

    .avatar_lg i {
        font-size: 16em;
        opacity: .1;
        position: absolute;
        z-index: 1;
    }
/*- Daterange picker -*/
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #0A2463;
}

span.hint {
    display: inline-block;
    color: #999;
    font-size: .7em;
    padding: 10px 2px;
}
/*upload*/
.driverpic, .passengerpic {
    text-align: center;
    width: auto;
    margin: auto;
    position: absolute;
    z-index: 2;
    height: 100%;
    /* transform: translate(-20%, 0%); */
    left: -50%;
    right: -50%;
}

.file-upload-wrapper {
    position: relative;
    width: 150px;
    height: 30px;
}

    .file-upload-wrapper:after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        padding: 10px 15px;
        display: block;
        pointer-events: none;
        z-index: 1;
        color: #0A2463;
        background: #fff;
        box-shadow: 0 1px 4px 0 rgba(121, 139, 149, 0.44);
        font-size: .7rem;
        border: 0;
        line-height: 1;
        width: 100%;
        border-radius: 3px;
        font-weight: 500;
        text-shadow: 0 1px 0 #e8e8e8;
        text-transform: uppercase;
        text-align: center;
        border-right: 3px solid #EF3964;
    }

    .file-upload-wrapper input {
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        height: 55px;
        margin: 0;
        padding: 0;
        display: block;
        cursor: pointer;
        width: 100%;
        text-indent: -12em;
    }

/*scrollbar*/

/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */

/* total width */
.scrollbar::-webkit-scrollbar {
    background-color: transparent;
    width: 5px
}

/* background of the scrollbar except button or resizer */
.scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
}

    .scrollbar::-webkit-scrollbar-track:hover {
        background-color: transparent;
    }

/* scrollbar itself */
.scrollbar::-webkit-scrollbar-thumb {
    background-color: #babac0;
    border-radius: 8px;
    border: 0px solid #fff;
}

    .scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #a0a0a5;
        border: 0px solid #f4f4f4
    }

/* set button(top and bottom of the scrollbar) */
.scrollbar::-webkit-scrollbar-button {
    display: none
}



/* sortable list */

.sortable {
    margin: auto;
    padding: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .sortable li {
        list-style: none;
    }

        .sortable li:hover {
            cursor: move;
        }

        .sortable li.disabled {
            opacity: 0.5;
        }

        .sortable li.sortable-placeholder {
            border: 3px dashed #CCC;
            background: none;
            height: 9vh;
        }

            .sortable li.sortable-placeholder:after {
                content: "PLACE HERE";
                text-align: center;
                color: #ccc;
                font-size: 1.3em;
                margin: auto;
                font-weight: 500;
                padding: .8em;
                display: inline-block;
            }


/* Datatable */

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #516492;
    border-color: #516492;
}

.page-link {
    color: #146FD1;
}


/*-- Messages --*/
.alertbox {
    /*position: fixed;
    bottom: 10px;
    z-index: 2;
    width: 400px;
    left:20px;*/
}

.alert {
    padding: 1.5em 1.5em;
    background: #fff;
    border-radius: 5px;
    font-weight: 500;
    box-shadow: 0 7px 13px 1px #ddd;
    font-size: .8em;
    border: 0px solid #ddd;
    position: fixed;
    top: 30px;
    z-index: 983;
    right: 24px;
    width: 400px;
}

.alert-success {
    border-left: 4em solid #08FD8C;
    color: #00753F;
}

    .alert-success::before {
        content: "\F5E0";
        font-family: "Material Design Icons";
        font-size: 2em;
        color: #fff;
        position: absolute;
        z-index: 2;
        top: 15px;
        left: -1.5em;
    }


.alert-warning {
    border-left: 4em solid #EF3964;
    color: #EF3964;
}

    .alert-warning::before {
        content: "\F159";
        font-family: "Material Design Icons";
        font-size: 2em;
        color: #fff;
        position: absolute;
        z-index: 2;
        top: 15px;
        left: -1.5em;
    }

.alert-dismissible .close {
    padding: .5rem .5rem;
    font-size: 1.3em;
}

label.error:before {
    content: "\F026";
    font-family: "Material Design Icons";
    padding: 0 0.4em 0 0;
}

label.error {
    color: #EF3964 !important;
    font-size: .7em !important;
    opacity: 1 !important;
}

input.error {
    border: 1px solid #EF3964;
    background: transparent;
}

input:required, textarea:required, select:required {
    border-right: 3px solid #EF3964 !important;
}

.cal-ico::after {
    content: "\F0EE";
    font-family: "Material Design Icons";
    font-size: 1em;
    color: #555;
    position: absolute;
    z-index: 2;
    top: 7px;
    right: 1.5em;
}


.cal-icon::after {
    content: "\F0EE";
    font-family: "Material Design Icons";
    font-size: 1em;
    color: #555;
    position: absolute;
    z-index: 2;
    top: 7px;
    right: 0.5em;
}

.req-tag {
    /*border: 1px solid #e8e8e8;*/
    box-shadow: inset 0px 0 0px 1px #EDEFF9;
    border-right: 3px solid #EF3964;
    text-transform: uppercase;
    font-size: .6em;
    padding: .5em;
    color: #EF3964;
    border-radius: 4px;
    font-weight: 500;
    background: #fff;
}

.hide {
    display: none;
}

.show {
    display: block;
}



/* Processing Loader */
.spinner_cont {
    width: 100%;
    height: 100%;
    margin: auto;
    border-radius: 0;
    position: fixed;
    background-color: rgba(255,255,255,0.4);
    z-index: 999999;
    top: 0;
    left: 0;
}

.interval_list .inlineloader {
    margin: 7% auto 0;
}

    .interval_list .inlineloader:after {
        background: white;
    }

.inlineloader {
    font-size: 4px;
    margin: 0% auto 0;
    text-indent: -9999em;
    width: 4em;
    height: 4em;
    border-radius: 50%;
    background: #129793;
    background: -moz-linear-gradient(left, #1fb5ac 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #1fb5ac 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #1fb5ac 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #1fb5ac 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #1fb5ac 10%, rgba(255, 255, 255, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    position: absolute;
    right: 30px;
    bottom: 10px;
    z-index: 99999;
}

    .inlineloader:before {
        width: 50%;
        height: 50%;
        background: #1fb5ac;
        border-radius: 100% 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
    }

    .inlineloader:after {
        background: #F8FAFB;
        width: 75%;
        height: 75%;
        border-radius: 50%;
        content: '';
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }



@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

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

/* loader */
.inlineloader {
}

    .inlineloader > .inloader::after {
        content: '';
        width: 30px;
    }

.loader {
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 0 30px #e8e8e8;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
}

#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    stroke-width: 1.5px;
    stroke: #fff;
}

#logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
}

    #logo path:nth-child(1) {
        animation: line-anim 2s ease forwards;
        animation-iteration-count: infinite;
    }

@keyframes line-anim {
    from {
        fill-opacity: 0;
    }

    to {
        fill-opacity: 1;
    }
}

/* The popup bubble styling. */
.popup-bubble {
    /* Position the bubble centred-above its parent. */
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -100%);
    background-color: #146FD1;
    color: #fff;
    padding: 8px 14px;
    overflow-y: hidden;
    border-radius: 50px;
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);
    text-align: center;
    width: auto;
    height: auto;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1;
}
/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor {
    /* Position the div a fixed distance above the tip. */
    position: absolute;
    width: 100%;
    bottom: /* TIP_HEIGHT= */ 8px;
    left: 0;
}
    /* This element draws the tip. */
    .popup-bubble-anchor::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        /* Center the tip horizontally. */
        transform: translate(-50%, 0);
        /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
        width: 0;
        height: 0;
        /* The tip is 8px high, and 12px wide. */
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: /* TIP_HEIGHT= */ 8px solid #146FD1;
    }

    .popup-bubble-anchor::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0;
        transform: translate(-50%, 0%);
        width: 2px;
        height: 0;
        border-top: 12px solid #0A2463;
        border-radius: 7px;
    }
/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
    cursor: auto;
    height: 0;
    position: absolute;
    width: 100%;
    z-index: -999;
}

.popup-bubble-anchor div.pin {
    float: left;
    background: #fff;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    margin: -3px 10px -3px -10px;
    padding: 3px;
}

    .popup-bubble-anchor div.pin i {
        position: static;
        background-size: 60%;
        margin: auto;
    }

button.add {
    background: #146FD1;
    color: #fff;
    font-size: 1rem;
    border-radius: 100%;
    width: 22px;
    padding: 2px;
    font-weight: 500;
}

button.remove {
    background: #EF3964;
    color: #fff;
    font-size: 1rem;
    border-radius: 100%;
    width: 22px;
    padding: 2px;
    font-weight: 500;
}

/* - no para padding - */
.para_0 p {
    padding: 0 !important;
}



.smavatar {
    width: 60px;
    height: 60px;
    border: 1px solid #e8e8e8;
    background: #D3FFF3;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

    .smavatar img {
        height: 60px;
        width: auto;
        margin: auto;
        text-align: center;
        position: absolute;
        left: -50%;
        right: -50%;
    }

    .smavatar i {
        font-size: 3em;
        text-align: center;
        margin: auto;
        display: block;
        color: #92F6DF;
    }

.activetag {
    background: #999;
    color: #fff;
    font-size: 8px;
    text-transform: uppercase;
    padding: 3px 4px;
    border-radius: 0 5px 0 5px;
    width: auto;
    font-weight: 600;
    float: left;
    position: absolute;
    z-index: 9;
    bottom: 0;
}

.bdr {
    box-shadow: 0px 0px 0px #e8e8e8;
    border: 9px solid #f5f5f5;
    margin: 0 -24px 0 -25px;
    padding: 0;
    outline: 0px solid #e8e8e8;
    border-bottom: 0;
}

.pd-0p5 {
    padding: 0.5em;
}

.pd-0 {
    padding: 0;
}

.dri_cont {
    padding: 1em 1.5em 0;
    border-bottom: 9px solid #f5f5f5;
}

    .dri_cont:nth-child(odd) {
        border-right: 9px solid #f5f5f5;
    }

    .dri_cont h5 {
        padding: 10px 0;
        color: #888;
        text-transform: uppercase;
        font-size: 0.90em;
        font-weight: 500;
        margin: 0;
    }

a.inputreset {
    position: absolute;
    right: 23px;
    bottom: 4px;
    color: #999;
}

.azure-btn {
    color: #fff;
    background: #146FD1;
    box-shadow: 0 1px 4px 0 rgba(121, 139, 149, 0.44);
    font-size: .75rem;
    border: 0;
    line-height: 1.5;
    width: 100%;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}

    .azure-btn:hover {
        color: #fff;
        opacity: .9;
        outline: 1px solid #999;
        border-radius: 3px;
    }

.gb-btn {
    color: #fff;
    background: #8491B1;
    box-shadow: 0 1px 4px 0 rgba(121, 139, 149, 0.44);
    font-size: .75rem;
    border: 0;
    line-height: 1;
    width: 100%;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid transparent;
}

    .gb-btn:hover {
        color: #fff;
        opacity: .9;
        outline: 1px solid #8491B1;
        border-radius: 3px;
    }

.deassign-btn {
    color: #fff;
    background: #EF3964;
    box-shadow: 0 1px 4px 0 rgba(121, 139, 149, 0.44);
    font-size: .8rem;
    border: 0;
    line-height: 1;
    width: 100%;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    border: 2px solid transparent;
}

    .deassign-btn:hover {
        color: #fff;
        opacity: .9;
        outline: 1px solid #999;
        border-radius: 3px;
    }


p.hint {
    position: absolute;
    right: 16px;
    top: 0;
    font-weight: 400 !important;
    font-size: 0.7rem !important;
    color: #888 !important;
}

/* stops list on assignment */


.stopscontainer {
    width: 100%;
    padding: 10px 0 0;
    margin: 0px auto;
    position: relative;
    overflow: hidden;
}

    .stopscontainer:before {
        /*content: '';
        position: absolute;
        top: 0;
        left: 4%;
        margin-left: -2px;
        width: 2px;
        height: 100%;
        background: #ddd;
        z-index: 1*/
    }

.timeline-block {
    width: calc(96% + 8px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    clear: both;
}

.timeline-block-right {
    float: right;
    padding: .3em 0;
}

.timeline-content h3:before {
    content: '';
    position: absolute;
    background-size: 10px;
    left: 4px;
    width: 12px;
    height: 15px;
    margin-top: 0px;
    z-index: 2;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='19px' height='25px' viewBox='0 0 19 25' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com --%3E%3Ctitle%3EGroup 13 Copy 7%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Final' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Route_v1' transform='translate(-1071.000000, -415.000000)'%3E%3Cg id='card' transform='translate(1050.000000, 390.000000)'%3E%3Cg id='Group-13-Copy-7' transform='translate(21.000000, 25.000000)'%3E%3Cg id='Group-3' fill='%23146FD1'%3E%3Cpath d='M16.9522015,14.7675707 C18.207106,13.1943758 19,11.2518446 19,9.11675336 C19,4.08164009 14.7468109,0 9.50007476,0 C4.25333858,0 0,4.08164009 0,9.11675336 C0,11.2518446 0.793192996,13.1943758 2.04794806,14.7675707 C3.9511627,17.1539082 9.50007476,24.4285714 9.50007476,24.4285714 C9.50007476,24.4285714 15.0489868,17.1539082 16.9522015,14.7675707' id='Fill-1'%3E%3C/path%3E%3C/g%3E%3Cg id='Group-6' transform='translate(9.500000, 0.000000)' fill='%232D92FF'%3E%3Cpath d='M7.45218534,14.7675707 C8.7070998,13.1943758 9.5,11.2518446 9.5,9.11675336 C9.5,4.08164009 5.24677747,0 0,0 L0,24.4285714 C0,24.4285714 5.54895573,17.1539082 7.45218534,14.7675707' id='Fill-4'%3E%3C/path%3E%3C/g%3E%3Cpath d='M9.5,16.2857143 C5.7582798,16.2857143 2.71428571,13.2416084 2.71428571,9.50007206 C2.71428571,5.75824748 5.7582798,2.71428571 9.5,2.71428571 C13.2417202,2.71428571 16.2857143,5.75824748 16.2857143,9.50007206 C16.2857143,13.2416084 13.2417202,16.2857143 9.5,16.2857143' id='Fill-7' fill='%232D92FF'%3E%3C/path%3E%3Cpath d='M16.2857143,9.50007206 C16.2857143,5.75824748 13.2417202,2.71428571 9.5,2.71428571 L9.5,16.2857143 C13.2417202,16.2857143 16.2857143,13.2416084 16.2857143,9.50007206' id='Fill-9' fill='%23146FD1'%3E%3C/path%3E%3Cpath d='M9.5,14.9285714 C6.13237966,14.9285714 3.39285714,12.341137 3.39285714,9.16078362 C3.39285714,5.98029153 6.13237966,3.39285714 9.5,3.39285714 C12.8676203,3.39285714 15.6071429,5.98029153 15.6071429,9.16078362 C15.6071429,12.341137 12.8676203,14.9285714 9.5,14.9285714' id='Fill-11' fill='%23FFFFFF'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.timeline-content:before {
    content: '';
    position: absolute;
    left: 10px;
    margin-left: -2px;
    height: 13%;
    border-left: 2px solid #ddd;
    z-index: 1;
}

.timeline-block-left {
    float: left;
    direction: rtl
}

.marker { /*
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #D0D0D0;
    margin-top: 4px;
    z-index: 2;*/
}

.timeline-content {
    width: 100%;
    padding: 0 6px;
    color: #666;
    margin-left: 10px;
}

    .timeline-content h3.time {
        margin-top: 5px;
        margin-bottom: 5px;
        font-size: .8em !important;
        font-weight: 400;
        color: #0A2463;
        font-weight: 500;
        color: rgba(10, 36, 99, 0.5);
    }

    .timeline-content span {
        font-size: 15px;
        color: #a4a4a4;
    }

.timeline-block p {
    font-size: 14px;
    line-height: 1em;
    font-size: 12px;
    line-height: 1.2em;
    word-spacing: 1px;
    color: #0A2463;
    background: #F8F8F8;
    border-left: 3px solid #FFCE49;
    border-radius: 3px;
    border-radius: 5px;
    padding: .5rem .5rem !important;
}

.timeline-block:nth-child(even) p {
    border-left: 3px solid #78B9FF;
}

@media screen and (max-width: 768px) {
    .stopscontainer:before {
        left: 8px;
        width: 2px;
    }

    .timeline-block {
        width: 100%;
        margin-bottom: 30px;
    }

    .timeline-block-right {
        float: none;
    }

    .timeline-block-left {
        float: none;
        direction: ltr;
    }
}

a.assign_pax {
    float: right;
    font-size: .65em;
    font-size: .7em;
    font-weight: 300;
    /* background: #146FD1; */
    padding: .4em .6em;
    color: #146FD1;
    border-radius: 3px;
    text-decoration: none;
}

    a.assign_pax :hover {
        opacity: .8;
    }

    a.assign_pax b.pax_count {
        background: #146FD1;
        color: #fff;
        padding: .2em .5em;
        margin: 0 .4em 0 -5px;
        border-radius: 12px;
    }


/* modal popup */

.modal-dialog {
    max-width: 100%;
    margin: 1em;
}

.modal-header h5 {
    color: #0A2463;
    text-transform: capitalize;
    font-size: 0.85em;
    line-height: 2;
}

.modal-header {
    background: #D3FFF3;
    border-radius: 0;
    padding: .5em 1em;
}



.modal-body .popup_passengerlist {
    box-shadow: 0px 0px 0px #e8e8e8;
    padding: .5em;
    outline: 0px solid #e8e8e8;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}

.popup_passengerlist .card-body {
    padding: 0.5em 0.5em 0;
    width: 116px;
}

    .popup_passengerlist .card-body .card-id {
        color: rgba(10, 36, 99, 0.5);
        font-size: .7em;
        padding: 1px 0px 2px;
        margin: 0;
        font-weight: 400;
    }

    .popup_passengerlist .card-body .card-name {
        color: #0A2463;
        font-size: .7em;
        font-weight: 500;
        line-height: normal;
        padding: 0;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

.modal-body h3 {
    padding: .5em 0 1em 0;
    font-size: 1.2em;
    color: #0A2463;
}

.pax_avatar {
    width: 100px;
    height: 100px;
    border: 1px solid #e8e8e8;
    background: #D3FFF3;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.popup_passengerlist
input[type=checkbox] {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    opacity: 0;
    cursor: pointer;
}


.popup_passengerlist .card {
    margin: .4em;
}

.popup_passengerlist .pax_avatar {
    width: 50px;
    height: 50px;
    border: 0px solid #e8e8e8;
    background: #D3FFF3;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}



/* Toggled State */
input[type=checkbox]:checked ~ div {
    box-shadow: 0 0 0 1px #0A2463;
    border-radius: 3px;
}

    input[type=checkbox]:checked ~ div:after {
        content: "\F12C";
        font-family: Material Design Icons;
        position: absolute;
        right: 0;
        top: 0;
        background: #0A2463;
        color: #fff;
        font-size: .7em;
        border-radius: 2px;
        margin: 2px;
        font-weight: 600;
    }


.pax_avatar img {
    text-align: center;
    width: auto;
    margin: auto;
    position: absolute;
    z-index: 2;
    height: 100%;
    /* transform: translate(-20%, 0%); */
    left: -50%;
    right: -50%;
}

.pax_avatar i {
    font-size: 3em;
    text-align: center;
    margin: auto;
    display: block;
    color: #92F6DF;
}

.modal-content {
    border-radius: 0;
}

.modal-header .close {
    color: #0A2463;
    padding: 01rem 0.5rem 0;
    outline: 0;
}

/* treelist */
.jstree {
    width: 100%;
}

.jstree-default .jstree-wholerow-clicked {
    background: linear-gradient(to right, #DBDEE9 0, #EDEFF6 100%) !important;
    border-bottom: 1px solid #EDEFF6;
}





/* Tracking */
.font_size_sm {
    font-size: .6em;
}

.tracking {
}

    .tracking .head {
        background: #fff;
        padding: .5em 1em;
        box-shadow: 0 2px 0px rgba(0, 0, 0, 0.1);
    }

    .tracking .form_cont label {
        font-size: .75em !important;
    }

        .tracking .form_cont label.form-check-label {
            margin-left: 1.4rem;
        }

    .tracking .form_cont {
        width: 100%;
        /*
        position: absolute;
        right: 0;
        z-index: 2;
        box-shadow: 0 0px 20px rgba(0, 0, 0, 0.1);
        margin: 1em;*/
    }

        .tracking .form_cont .card {
            margin: 0em;
            border: 0;
        }

        .tracking .form_cont .card-body {
            padding: .5em 1em 0;
        }

        .tracking .form_cont p {
            padding: .5em 2.5em 0.5em;
            margin: 0;
            width: 100%;
            font-size: .85em;
        }

            .tracking .form_cont p i {
                float: right;
                display: inline-block;
            }

    .tracking .map {
        min-height: 100% !important;
    }

    .tracking .form_cont
    .card-header {
        padding: 0;
        margin-bottom: 0;
        background-color: transparent;
        border-bottom: 2px solid #fff;
        border-radius: 0;
        /*border-bottom: 1px solid rgba(0,0,0,.125);*/
    }

        .tracking .form_cont
        .card-header button {
            width: 100%;
            color: #fff;
            text-align: left;
            text-decoration: none;
            font-size: .45em;
            font-weight: 500;
            text-transform: uppercase;
            line-height: 1em;
            margin: 0;
            background: #3A4E82;
            border-radius: 0
        }



            .tracking .form_cont
            .card-header button.collapsed {
                background-color: #EDEFF6;
                color: #3A4E82;
            }

                .tracking .form_cont
                .card-header button.collapsed p:after {
                    text-align: right;
                    float: right;
                    content: "\F140";
                    display: inline-block;
                    font: normal normal normal 20px/1 "Material Design Icons";
                }

            .tracking .form_cont
            .card-header button p:after {
                text-align: right;
                float: right;
                content: "\F143";
                display: inline-block;
                font: normal normal normal 20px/1 "Material Design Icons";
            }

    .tracking .form-check {
        margin: 5px 0;
    }
/* - status color - */
.sc1 {
    background-color: #146FD1;
}

.sc2 {
    background-color: #4A4A4A;
}

.sc3 {
    background-color: #70E206;
}

.sc4 {
    background-color: #ED1D4D;
}


.sc5 {
    background-color: #f0e405;
}

.sc0 {
    background-color: #fff;
    border: 1px solid #999;
}

    .sc0:after {
        filter: brightness(0.6) sepia(0) hue-rotate(140deg) saturate(6);
        margin-top: -1px;
    }

.statusicon {
    border-radius: 3px;
    width: 15px;
    height: 15px;
    position: relative;
    padding: 3px 0px;
    text-align: center;
    align-items: center;
    display: block;
}

    .statusicon:after {
        background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='9px' height='9px' viewBox='0 0 9 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com --%3E%3Ctitle%3Ebus_2%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Final' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='tracking_1' transform='translate(-1379.000000, -226.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='accordion-copy' transform='translate(1170.000000, 178.000000)'%3E%3Cg id='stop-copy-2' transform='translate(206.000000, 45.000000)'%3E%3Cpath d='M11.4374814,4.87500173 C11.7481389,4.87500173 11.9999802,5.12684297 11.999945,5.43750048 L11.999945,6.562498 C11.999945,6.76960302 11.8320567,6.93749132 11.6249517,6.93749132 L11.2499584,6.93749132 L11.2499584,9.93749056 C11.2494662,10.1248554 11.1783628,10.3051538 11.0508338,10.4424211 C11.0577772,10.4608605 11.0616971,10.4803019 11.0624529,10.4999893 L11.0624529,11.0551756 C11.0624529,11.1792945 11.0624529,11.4374814 10.6874596,11.4374814 L9.74996754,11.4374814 C9.37497423,11.4374814 9.37497423,11.1792945 9.37497423,11.0551756 L9.37497423,10.6874948 L5.62498835,10.6874948 L5.62498835,11.0551756 C5.62498835,11.1792945 5.62498835,11.4374814 5.24999504,11.4374814 L4.31248539,11.4374814 C3.98286111,11.4374814 3.93749207,11.257306 3.93749207,11.0624881 L3.93749207,10.4999893 C3.93824793,10.4803019 3.94216784,10.4608605 3.94911119,10.4424211 C3.82158217,10.3051538 3.75047881,10.1248554 3.74998663,9.93749056 L3.74998663,6.93749132 L3.37499331,6.93749132 C3.1678883,6.93749132 3,6.76960302 3,6.562498 L3,5.43750048 C3,5.12684297 3.25184124,4.87500173 3.56249876,4.87500173 L3.74998663,4.87500173 L3.74998663,4.31250297 C3.7508128,3.58796941 4.33795603,3.00082617 5.06248959,3 L9.93747298,3 C10.6620065,3.00082617 11.2491498,3.58796941 11.249976,4.31250297 L11.249976,4.87500173 L11.4374814,4.87500173 Z M9.74998512,9.56247967 C9.95709013,9.56247967 10.1249784,9.39459137 10.1249784,9.18748636 C10.1249784,8.98038135 9.95709013,8.81249304 9.74998512,8.81249304 C9.54288011,8.81249304 9.3749918,8.98038135 9.3749918,9.18748636 C9.3749918,9.39459137 9.54288011,9.56247967 9.74998512,9.56247967 Z M5.24999504,9.56247967 C5.45710005,9.56247967 5.62498835,9.39459137 5.62498835,9.18748636 C5.62498835,8.98038135 5.45710005,8.81249304 5.24999504,8.81249304 C5.04289003,8.81249304 4.87500173,8.98038135 4.87500173,9.18748636 C4.87500173,9.39459137 5.04289003,9.56247967 5.24999504,9.56247967 Z M9.74286599,3.93749207 L5.24999504,3.93749207 C4.7874277,3.93749207 4.49999083,4.22492894 4.49999083,4.68749628 L4.49999083,7.49999008 C4.49999083,7.93460826 4.81535928,8.24999428 5.24999504,8.24999428 L9.74998512,8.24999428 C10.0076095,8.24999428 10.4999893,7.95786407 10.4999893,7.49999008 L10.4999893,4.6946154 C10.4995674,4.27664367 10.1608377,3.93791395 9.74286599,3.93749207 Z' id='bus_2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        content: "";
        background-repeat: no-repeat;
        width: 9px;
        height: 9px;
        background-size: 100%;
        position: absolute;
        z-index: 2;
        left: 50%;
        margin-left: -30%;
        text-align: center;
    }

.tracking .drv_behavior_1,
.tracking .drv_behavior_2,
.tracking .drv_behavior_3,
.tracking .drv_behavior_5,
.tracking .drv_behavior_6,
.tracking .drv_behavior_7,
.tracking .drv_behavior_8,
.tracking .drv_behavior_10,
.tracking .drv_behavior_11,
.tracking .drv_behavior_12,
.tracking .drv_behavior_13,
.tracking .drv_behavior_14,
.tracking .drv_behavior_15,
.tracking .drv_behavior_16,
.tracking .drv_behavior_17,
.tracking .drv_behavior_18,
.tracking .drv_behavior_19 {
    width: 14px;
    height: 14px;
    margin: 0 5px 0 0;
    border-radius: 100%;
    box-shadow: inset 0px 0px 0px 1.5px white;
}


.tracking .drv_behavior_1 {
    background-color: #C40050;
    border: 1px solid #C40050;
}

.tracking .drv_behavior_2 {
    background-color: #F5A623;
    border: 1px solid #F5A623;
}

.tracking .drv_behavior_3 {
    background-color: #A7A100;
    border: 1px solid #A7A100;
}

.tracking .drv_behavior_5 {
    background-color: #ED1D4D;
    border: 1px solid #ED1D4D;
}

.tracking .drv_behavior_6 {
    background-color: #42CBAC;
    border: 1px solid #42CBAC;
}

.tracking .drv_behavior_7 {
    background-color: #F8BF23;
    border: 1px solid #F8BF23;
}

.tracking .drv_behavior_8 {
    background-color: #24A9F0;
    border: 1px solid #24A9F0;
}


/*Ignition On*/

.tracking .drv_behavior_10 {
    background-color: #32CD32;
    border: 1px solid #32CD32;
}
/*"Ignition Off"*/

.tracking .drv_behavior_11 {
    background-color: #A9A9A9;
    border: 1px solid #A9A9A9;
}
/*"Door Open"*/

.tracking .drv_behavior_12 {
    background-color: #00CED1;
    border: 1px solid #00CED1;
}
/*"Door Close"*/

.tracking .drv_behavior_13 {
    background-color: #FFA500;
    border: 1px solid #FFA500;
}
/*"Panic Button"*/

.tracking .drv_behavior_14 {
    background-color: #FF4500;
    border: 1px solid #FF4500;
}
/*"Petrol Button"*/

.tracking .drv_behavior_15 {
    background-color: #000080;
    border: 1px solid #000080;
}
/*"Motion Sensor"*/

.tracking .drv_behavior_16 {
    background-color: #9370DB;
    border: 1px solid #9370DB;
}
/*"NCLB"*/

.tracking .drv_behavior_17 {
    background-color: #000080;
    border: 1px solid #000080;
}

.tracking .drv_behavior_18 {
    background-color: #7597e5;
    border: 1px solid #7597e5;
}

.tracking .drv_behavior_19 {
    background-color: #ffb17c;
    border: 1px solid #ffb17c;
}


.tracking i.input-helper:before {
    width: 15px !important;
    height: 15px !important;
}

.tracking i.input-helper:after {
    width: 15px !important;
    line-height: 15px !important;
    font-size: .8375rem !important;
}

.tracking .ms-options-wrap > .ms-options {
    width: 91%;
    margin-bottom: 0;
    z-index: 9;
    right: 13px;
    display: block;
    height: 100%;
}

    .tracking .ms-options-wrap > .ms-options > ul label {
        padding: 7px 4px 4px 26px !important;
    }


/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .tracking .form_cont {
        width: auto;
        position: static;
        right: 0;
        z-index: 2;
        box-shadow: 0 0px 20px rgba(0, 0, 0, 0.1);
        margin: 0em;
    }

    .gm-style .gm-style-iw-c {
        zoom: .8;
    }

    .form-group label {
        text-align: left;
    }
}

/* route vehicle assignment */
a.addbutton {
    background: #D3FFF3;
    border: 1.5px dashed #CFCFCF;
    color: #142D69;
    font-size: .6em;
    padding: 1.1em 0;
    font-weight: 500;
    width: 100%;
    display: block;
    margin: 0;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
}

.file-upload-wrapper label.error {
    position: absolute;
    left: 0;
    bottom: -22px;
}


/* optimize div */

.optimize {
    position: absolute;
    z-index: 9;
    bottom: 0px;
    background: #fff;
    color: #516492;
    left: 50%;
    width: 300px;
    margin-left: -150px;
    padding: 3px;
    border-radius: 5px 5px 0 0;
}

    .optimize p {
        padding: 4px;
        margin: 0;
        text-align: center;
        font-weight: 500;
    }

    .optimize button {
        line-height: 1;
    }

.zoom8 {
    zoom: .8;
}

.zoom7 {
    zoom: .7;
}

.zoom9 {
    zoom: .9;
}
/* Notofications */
.notify {
    zoom: .8;
}

    .notify .nav-pills .show > .nav-link, .notify .nav-pills .nav-link.active {
        background-color: transparent;
        padding: .5rem 1rem;
    }

        .notify .nav-pills .show > .nav-link i {
            opacity: .7;
        }

    .notify .nav-pills i {
        color: #0A2463;
        font-size: 1.5em;
    }

    .notify .nav-pills p {
        color: rgba(0, 0, 0, .8);
        font-size: .9rem;
        line-height: 1.5;
        padding: .5rem 0 0 0;
    }

        .notify .nav-pills p b {
            color: rgba(0, 0, 0, 1);
        }

    .notify .nav-pills li.notification-box i {
        color: #EF3964;
        font-size: 2rem;
        padding-left: 1rem;
    }

    .notify .nav-pills li.notification-box .text-hd {
        color: rgba(0, 0, 0, .5);
        font-size: .9rem;
        font-weight: 600;
        display: none;
    }

    .notify .nav-pills li.notification-box .text-date {
        color: #000;
        font-size: 0.9rem;
        color: rgba(0, 0, 0, 0.5);
    }

        .notify .nav-pills li.notification-box .text-date i {
            color: rgba(0, 0, 0, 0.5);
            font-size: .85rem;
            padding-left: 0;
        }

    .notify .dropdown-menu {
        top: 60px;
        right: 5px;
        left: unset;
        width: 500px;
        box-shadow: 0px 5px 7px -1px #c1c1c1;
        padding-bottom: 0px;
        padding: 0px;
        height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .notify .show:first-child:before {
        content: "";
        position: absolute;
        top: 42px;
        right: 18px;
        border: 10px solid #fff;
        border-color: transparent transparent rgba(0,0,0,.15) transparent;
        z-index: 2;
    }

    .notify .head i {
        color: #999;
        font-size: 1.7em;
        padding: 0;
        margin: -9px 0 0;
        display: inline-block;
    }

    .notify .head {
        padding: 10px 20px;
        border-radius: 3px 3px 0px 0px;
        border-bottom: 0px solid rgba(0, 0, 0, 0.1);
        position: absolute;
        width: inherit;
        clear: both;
        display: block;
        float: none;
        background: #fff;
        z-index: 3;
        border-right: 2px solid #ccc;
        box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.1);
        height: 60px;
    }

        .notify .head span {
            font-size: 1.3rem;
            font-weight: 600;
            color: #0A2463;
        }

        .notify .head a {
            padding: 3px 5px;
            display: inline-block;
            vertical-align: text-top;
            color: #146FD1;
        }

    .notify .footer {
        padding: 5px 15px;
        border-radius: 0px 0px 3px 3px;
        background: transparent;
    }

        .notify .footer a {
            color: #146FD1;
            font-size: inherit;
            font-size: 1.3em;
            padding: 3px 0;
            display: inline-block;
        }

    .notify .dropdown-menu li:nth-child(2) {
        margin-top: 60px;
    }

    .notify .notification-box {
        padding: 10px 0px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.09);
        cursor: pointer;
    }

        .notify .notification-box:hover {
            background: #F8FAFF;
        }

        .notify .notification-box button {
            border: 0;
            padding: 1px 13px 0 0;
            margin: 0;
            background: transparent;
        }

            .notify .notification-box button i {
                font-size: 1.3em !important;
            }

    .notify .bg-gray {
        background-color: #F8FAFF;
    }

    .notify .badge {
        background-color: #EF3964;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        text-align: center;
        padding: 5% 5%;
        position: relative;
        right: -5.8px;
        top: -9px;
        float: right;
        display: block;
        border: 1px solid #00E0B0;
    }

    .notify .message-count {
        position: relative;
        display: block;
        text-align: center;
        margin: 0;
        top: 2px;
    }


    .notify .message-count {
        color: #fff;
        font-size: 0.8em;
        font-weight: bold;
    }


    .notify .badge {
        position: absolute;
        right: 5px;
        top: 10px;
        z-index: 10;
    }


    .notify .bg-dark {
        background-color: transparent;
    }

    .notify .read {
        background: #f8f8f8;
    }

        .notify .read p {
            color: #777;
        }

            .notify .read p b {
                font-weight: 500;
                color: rgba(0, 0, 0, .7);
            }

@media (max-width: 640px) {
    .notify .dropdown-menu {
        top: 48px;
        left: 0;
        width: 100%;
        position: fixed;
        right: 0;
        height: 100vh;
    }

    .notify .nav {
        display: block;
    }

    .notify .dropdown-menu:before {
        right: 115px;
    }

    .notify .nav .nav-item, .notify .nav .nav-item a {
        padding-left: 0px;
    }

    .notify .message {
        font-size: 13px;
    }
}

.color1 {
    color: #FFCE49 !important;
}

.color2 {
    color: #EF3964 !important;
}

.color3 {
    color: #06E2B3 !important;
}

.color4 {
    color: #146FD1 !important;
}

.color5 {
    color: #3A4E82 !important;
}


.bus-info {
    padding: .5em;
}

    .bus-info h2.vID {
        padding: 13px;
        margin: 0px 0px 0;
        text-align: left;
        font-size: 1.3em;
        font-weight: 600;
        color: #0A2463;
        border-radius: 0 0 16px;
    }

    .bus-info div span.lbl {
        color: #8491B1;
        font-weight: 500;
        display: inline-block;
        width: 10rem;
        text-align: right;
    }

    .bus-info div span {
        font-size: 1em;
        color: #0A2463;
        font-weight: 600;
        width: 50%;
        padding: 3px 4px;
    }


.gm-style .gm-style-iw-c {
    box-shadow: 0 10px 12px 3px rgba(0,0,0,0.20);
    border-radius: 16px;
    padding: 0;
    max-width: 800px !important;
    width: 642px;
}

.gm-ui-hover-effect {
    top: 0 !important;
    right: 0 !important;
    outline: none !important
}


.txt-address {
    padding: 0;
    color: #8491B1;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #F7F8FC;
    opacity: .5;
    cursor: default;
}

.form-control {
    height: calc(1.3em + .75rem + 2px);
}


/* lite_back */
.lite_back {
    border-radius: 10px;
    background-color: #edeff6;
    padding: 1.2em 1.2em .5em;
    position: relative;
    margin-bottom: 20px;
}

    .lite_back .card-title {
        color: #0a2463;
        font-size: 17px;
        font-weight: 500;
    }

    .lite_back input, .lite_back select {
        background: #fff;
        border-radius: 4px;
        border: 0;
    }

        .lite_back input[readonly] {
            background: #fff;
            border-radius: 4px;
            border: 0;
            opacity: .8;
        }

    .lite_back span.smtxt {
        opacity: 0.6;
        color: #000000;
        font-size: 13px;
        font-weight: 300;
    }

    .lite_back h3 {
        font-size: 1em !important;
    }

    .lite_back span.litetxt {
        color: #0a2463;
        font-size: .8em;
        opacity: 0.6;
        font-weight: 500;
        padding-bottom: 10px;
        display: inline-block;
    }

    .lite_back p {
        color: #000000;
        font-size: .8em !important;
        font-weight: 300;
        padding: 0 !important;
        opacity: .6;
    }


.clear-btn {
    color: #666;
    background: #fff;
    box-shadow: 0 0px 2px 0 rgba(121, 139, 149, 0.74);
    font-size: .75rem;
    border: 0;
    line-height: 2;
    width: 100%;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}

    .clear-btn:hover {
        color: #999;
        opacity: 1;
    }

.cross_btn {
    position: absolute;
    right: 6px;
    top: 6px;
    background: transparent;
    border: 0;
    color: #ef3964;
    font-size: 1.2em;
}


.gtable_cross_btn {
    background: transparent;
    color: #ef3964;
    font-size: 1.2em;
    border: 0;
}


/* Disabled content */
.disabled {
    pointer-events: none;
    /* for "disabled" effect */
    opacity: 0.5;
}

button[disabled] {
    pointer-events: none;
    opacity: 0.5;
}

.fontsize_1p5 {
    font-size: 1.5em;
}

.fontsize_2 {
    font-size: 2em;
}

.fontsize_3 {
    font-size: 3em;
}

/* modal confirm */
.confirm_dialoge {
    max-width: 500px;
    min-width: 320px;
    margin: auto;
}

.red-btn {
    color: #fff;
    background: #EF3964;
    box-shadow: 0 1px 4px 0 rgba(121, 139, 149, 0.44);
    font-size: .8rem;
    border: 0;
    line-height: 1.5;
    width: 100%;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
}

    .red-btn:hover {
        color: #fff;
        opacity: .9;
        outline: 1px solid #999;
        border-radius: 3px;
    }


/* modal insert */
.insert_dialoge {
    max-width: 750px;
    min-width: 320px;
    margin: auto;
}



.yes_btn {
    color: #fff;
    background: #8491B1;
    box-shadow: 0 1px 4px 0 rgba(121, 139, 149, 0.44);
    font-size: .75rem;
    border: 0;
    line-height: 1.5;
    width: 100%;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

    .yes_btn:hover {
        color: #fff;
        opacity: .9;
        outline: 1px solid #8491B1;
        border-radius: 3px;
    }


.no_btn {
    color: #666;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(121, 139, 149, 0.44);
    font-size: .75rem;
    border: 0;
    line-height: 1.5;
    width: 100%;
    border-radius: 3px;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
}

    .no_btn:hover {
        color: #999;
        opacity: .9;
        box-shadow: 0 1px 4px 0 rgba(121, 139, 149, 0.84);
    }



/* stops container */


.lf-bx {
    background: #F4F7F6;
    position: relative;
    overflow-y: auto;
}


    .lf-bx .stop p {
        color: #0A2463;
        font-size: 1.2em;
        font-weight: 500;
        padding: 0px 4px .4em;
        line-height: 1.3em;
        margin: 0;
    }

    .lf-bx .stop {
        background: #fff;
        padding: 1em 0;
        box-shadow: 0 2px 0px 0px #ddd;
        margin: .1em 0 .1em 0;
        position: relative;
        border-left: 0px solid #CCC;
        zoom: .75;
    }

        .lf-bx .stop:after {
            content: '';
            position: absolute;
            left: 23px;
            border-left: 1px solid #ddd;
            z-index: 1;
            height: 100%;
            top: 0;
        }

        .lf-bx .stop span, .lf-bx .stop label {
            font-size: .9em;
            padding: 0px 5px;
            line-height: 1;
            margin: 0;
            vertical-align: middle;
        }

        .lf-bx .stop span {
            display: inline-block;
        }



        .lf-bx .stop .cont {
            display: flex;
        }

            .lf-bx .stop .cont > div {
                justify-content: space-between;
                padding: 0 12px;
                width: 78%;
            }

                .lf-bx .stop .cont > div:last-child {
                    justify-content: flex-end;
                    width: 10%;
                    padding: 0;
                }

                .lf-bx .stop .cont > div:first-child {
                    width: 8%;
                    padding: 0 14px;
                }

        .lf-bx .stop .sm_cont {
            width: 90%;
            margin-left: 8%;
        }

            .lf-bx .stop .sm_cont div:last-child {
                margin-left: 8%;
            }


        .lf-bx .stop .spn-order {
            margin: 0;
            position: absolute;
            right: 42px;
            font-size: .9em;
            top: 7px;
            font-weight: 500;
            background: #e9e9e9;
            color: #444;
            padding: 3px 5px;
            border-radius: 3px;
            text-align: center;
            vertical-align: middle;
        }

a.upload:before {
    content: "\F167";
    font-family: "Material Design Icons";
    color: #ccc;
    font-size: 35em;
    position: absolute;
    opacity: .15;
    left: -50%;
    top: -50%;
    overflow: hidden;
    right: -50%;
}

a.upload {
    background: #D3FFF3;
    border: 3px dashed #CFCFCF;
    color: #142D69;
    font-size: 2em;
    padding: 5em 0;
    font-weight: 500;
    width: 100%;
    display: block;
    margin: 0;
    text-decoration: none;
    text-align: center;
    position: relative;
    overflow: hidden;
    height: 50vh;
}

    a.upload i {
        font-size: 3.5em;
        display: block;
        transition: font-size 0.2s ease;
    }

    a.upload:hover i {
        font-size: 4em;
    }

    a.upload input {
        width: 100%;
        position: absolute;
        z-index: 1;
        opacity: 0;
        left: -50%;
        right: -50%;
        margin-left: 50%;
        height: 100%;
        padding: 0;
        top: 0;
        cursor: pointer;
    }



    a.upload span {
        font-size: .5em;
        color: #888;
        font-weight: 400;
    }


.uploaded_file {
    background: #fff;
    border: 2px solid #007F3B;
    border-radius: 5px;
    padding: 1.1em 1em;
    font-weight: 500;
    border-left: 4em solid #007F3B;
}

    .uploaded_file p {
        color: #007F3B;
        font-size: 1em;
        padding: 0 4em 0 0;
        margin: 0;
    }

    .uploaded_file::before {
        content: "\F004F";
        font-family: "Material Design Icons";
        font-size: 2em;
        color: #fff;
        position: absolute;
        z-index: 2;
        top: 10px;
        left: -1.5em;
    }

    .uploaded_file button.close {
        position: absolute;
        right: 0;
        top: 0;
        padding: .65em;
    }


/* height */

.ht_60vh {
    height: 60vh;
}

.ht_70vh {
    height: 70vh;
}

.ht_80vh {
    height: 80vh;
}

.ht_90vh {
    height: 90vh;
}



/* search container */



.searchcont {
    background: #fff;
    border-radius: 30em;
    border: 1px solid #ced2e0;
    padding: .2em .2em .17em;
}

    .searchcont input {
        background: #fff;
        border: 0;
        outline: 0;
        border-radius: 30em;
        padding-left: 3.5em;
    }

    .searchcont:before {
        content: "\F349";
        font-family: "Material Design Icons";
        font-size: 1.7em;
        color: #ccc;
        position: absolute;
        margin-left: 4px;
        z-index: 2;
        top: 5px;
    }

    .searchcont i {
        font-size: 1.5em;
        color: #0a2463;
    }


/* tabs */
.tabs {
    position: relative;
    clear: both;
    padding: 0;
    display: flex;
    border: 0px solid #8491B1;
    border-radius: 4px;
    margin: -8px 0px 11px;
}

.tab {
    flex: 1;
    padding: 0;
    margin: 0;
}

    .tab label.tblbl {
        background: #fff;
        padding: 10px;
        border: 0px solid #146FD1;
        width: 100%;
        position: relative;
        text-align: center;
        border-radius: 0;
        line-height: 2;
        margin: 0;
        color: #8491B1;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.5s ease;
    }

    .tab input[type="radio"] {
        display: none;
    }

        .tab input[type="radio"]:checked ~ label {
            background: #fff;
            border-bottom: 2px solid #8491B1;
            z-index: 2;
            color: #0A2463;
            font-weight: 500;
            border-radius: 0;
            margin: 0;
        }



/* paddings and margins */
.pd-tp {
    padding-top: 1em;
}

.pd-bt {
    padding-bottom: 1em;
}

.pd-lf {
    padding-left: 1em;
}

.pd-rt {
    padding-right: 1em;
}


.fileattach {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}


    .fileattach a.upload:before {
        content: "\F167";
        font-family: "Material Design Icons";
        color: #ccc;
        font-size: 5em;
        position: absolute;
        opacity: .15;
        left: -50%;
        top: -50%;
        overflow: hidden;
        right: -50%;
    }

    .fileattach a.upload {
        background: #fff;
        border: 2px dashed #CFCFCF;
        color: #142D69;
        font-size: 1em;
        padding: 0em 0em;
        font-weight: 500;
        width: 100%;
        display: block;
        margin: 0;
        text-decoration: none;
        text-align: center;
        position: relative;
        overflow: hidden;
        height: 4vh;
        padding: .4em 1em;
    }

        .fileattach a.upload i {
            font-size: 1.3em;
            display: inline-block;
            transition: font-size 0.2s ease;
        }

        .fileattach a.upload:hover i {
            font-size: 1.4em;
        }

        .fileattach a.upload input {
            width: 100%;
            position: absolute;
            z-index: 1;
            opacity: 0;
            left: -50%;
            right: -50%;
            margin-left: 50%;
            height: 100%;
            padding: 0;
            top: 0;
            cursor: pointer;
        }


.ltbx {
    background: #e8e8e8;
    color: #516492;
    padding: .3em .5em;
    position: relative;
    border-radius: 5px 0 0 5px;
    white-space: nowrap;
}

    .ltbx:before {
        content: "";
        position: absolute;
        right: -10px;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 10px solid #e8e8e8;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
    }

.dkbx {
    background: #516492;
    color: #E0E3EF;
    padding: .3em .5em;
    position: relative;
    border-radius: 5px 0 0 5px;
    white-space: nowrap;
}

    .dkbx:before {
        content: "";
        position: absolute;
        right: -10px;
        bottom: 0;
        width: 0;
        height: 0;
        border-left: 10px solid #516492;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
    }

.sc_legend_lt, .sc_legend_dk {
    font-size: .55rem;
    padding: 2px;
    border-radius: 4px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    width: 125px;
    clear: both;
}

.sc_legend_lt {
    border: 1px solid #e8e8e8;
    background: #D3FFF3;
    color: #333;
}

.sc_legend_dk {
    border: 1px solid #516492;
    background: #516492;
    color: #E0E3EF;
    margin: 4px 0;
}

input.dkbg {
    background: #516492;
    color: #E0E3EF;
    margin-top: .3em;
}



button.addrow {
    margin: 0em 0;
    background: transparent;
    border: 1px solid #146FD1;
    font-size: .7em;
    font-weight: 500;
    padding: .3em .5em;
    color: #146FD1;
    border-radius: 4px;
}

    button.addrow:hover {
        background: #146FD1;
        color: #fff;
    }

button.removerow {
    margin: 0em 0;
    background: transparent;
    border: 1px solid #ED1D4D;
    font-size: .7em;
    font-weight: 500;
    padding: .3em .5em;
    color: #ED1D4D;
    border-radius: 4px;
}

    button.removerow:hover {
        background: #ED1D4D;
        color: #fff;
    }

.assignlink {
    margin: .9em -2em -8px 0;
    border-bottom: 1px solid #ddd;
}

    .assignlink a {
        color: #146FD1;
        text-align: right;
        padding: .6em;
        font-size: .7em;
    }


/* tags */
.list-inline {
    display: flex;
    flex-flow: wrap;
}

.tag-cloud li {
    font-size: .8em;
    margin: 3px 6px 3px 0;
    padding: 2px 8px;
    cursor: default;
    border-radius: .3em;
    word-break: break-all;
}

.tag {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
    background: rgba(10, 36, 99, 0.1);
}

.tag-active {
    background-color: #fff;
    color: rgba(10, 36, 99, 1);
    border: 1px solid #8491B1;
}


.tag .tag-undo {
    color: rgba(0, 0, 0, 0.6);
    margin-left: 10px
}

.tag-active .tag-undo {
    color: rgba(10, 36, 99, 1);
    margin-left: 10px
}

.tag-undo:hover {
    font-size: 1em;
    /* tooltips */
    /*== start of code for tooltips ==*/
}

.tool {
    cursor: help;
    position: relative;
    text-align: center;
}


    /*== common styles for both parts of tool tip ==*/
    .tool::before,
    .tool::after {
        left: 50%;
        opacity: 0;
        position: absolute;
        z-index: -100;
    }

    .tool:hover::before,
    .tool:focus::before,
    .tool:hover::after,
    .tool:focus::after {
        opacity: 1;
        transform: scale(1) translateY(0);
        z-index: 100;
    }


    /*== pointer tip ==*/
    .tool::before {
        border-style: solid;
        border-width: .6em 0.5em 0 0.5em;
        border-color: #3E474F transparent transparent transparent;
        bottom: 130%;
        content: "";
        margin-left: -0.7em;
        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .2s;
        transform: scale(.6) translateY(-90%);
    }

    .tool:hover::before,
    .tool:focus::before {
        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
    }


    /*== speech bubble ==*/
    .tool::after {
        background: #3E474F;
        border-radius: .25em;
        bottom: 180%;
        color: #EDEFF0;
        content: attr(data-tip);
        margin-left: -6em;
        padding: .5em;
        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s;
        transform: scale(.6) translateY(50%);
        width: 12em;
    }

    .tool:hover::after,
    .tool:focus::after {
        transition: all .65s cubic-bezier(.84,-0.18,.31,1.26);
    }


/* -- accordion -- */
.accordionDiv {
}

    .accordionDiv .accordion {
    }

        .accordionDiv .accordion .card-header {
            padding: 0;
            margin-bottom: 0;
            border-bottom: 1px solid rgba(0,0,0,.125);
        }

            .accordionDiv .accordion .card-header button {
                width: 100%;
                color: #fff;
                text-align: left;
                text-decoration: none;
                font-size: .45em;
                font-weight: 500;
                text-transform: uppercase;
                line-height: 1em;
                margin: 0;
                background: #3A4E82;
                border-radius: 0;
            }

        .accordionDiv .accordion .card .card-body {
            padding: .4em .8em;
            zoom: .9;
        }

        .accordionDiv .accordion .card .card-header h2 button p {
            color: #fff;
            font-size: 0.7rem;
            font-weight: 500;
            padding: .5rem 15px 0rem;
            overflow-wrap: break-word;
            word-break: keep-all;
        }

        .accordionDiv .accordion .card-header button p:after {
            text-align: right;
            float: right;
            content: "\F143";
            display: inline-block;
            font: normal normal normal 24px/1 "Material Design Icons";
        }

        .accordionDiv .accordion .card-header button.collapsed p:after {
            text-align: right;
            float: right;
            content: "\F140";
            display: inline-block;
            font: normal normal normal 24px/1 "Material Design Icons";
        }


        .accordionDiv .accordion .card-header h2 button.collapsed {
            background-color: #edeff6;
        }

            .accordionDiv .accordion .card-header h2 button.collapsed > p {
                color: #3A4E82;
            }

/* -- forgot password -- */

a.action {
    display: block;
    font-size: 2em;
    color: #146FD1;
    padding: 1em 0 6em;
}




/* search button */
button.searchbtn {
    position: absolute;
    right: 4px;
    background: #8491B1;
    padding: 6.5px 40px;
    font-size: .85em;
    border-radius: 1.5em;
    color: #fff;
    z-index: 1;
    border: 0;
}
a.edtbtn {   
    background: #8491B1;
    padding: 6.5px 40px;
    font-size: .85em;
    border-radius: 1.5em;
    color: #fff;
    z-index: 1;
    border: 0;
}

a.edtbtn {
    background: #8491B1;
    padding: 6.5px 40px;
    font-size: .85em;
    border-radius: 1.5em;
    color: #fff;
    z-index: 1;
    border: 0;
}

/* Status tags */
.Statustags {
    position: relative;
    clear: both;
    padding: 0;
    display: flex;
    border: 0px solid #8491B1;
    border-radius: 4px;
    margin: 0px 0px 0px;
    align-content: flex-start;
    justify-content: flex-start;
    flex-flow: row wrap;
}

.stag {
    flex: 1;
    padding: 0;
    margin: 0 5px 5px 0;
    flex-basis: auto;
    /*width: 30%;*/
}

    .stag label.tblbl {
        background: #D3FFF3;
        padding: 10px;
        border: 0px solid #146FD1;
        width: 100%;
        position: relative;
        text-align: center;
        border-radius: 5px;
        line-height: 2;
        margin: 0;
        color: #8491B1;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.5s ease;
        text-transform: uppercase;
    }

    .stag input[type="radio"] {
        display: none;
    }

        .stag input[type="radio"]:checked ~ label {
            background: #fff;
            border: 2px solid #516492;
            z-index: 2;
            color: #516492;
            font-weight: 500;
            border-radius: 5px;
            margin: 0;
            padding: 8px;
        }

/* open and reopen status */
/* Open - Light Orange */
.s_open input[type="radio"]:checked ~ label {
    color: #fbbf24; /* light orange */
    border: 2px solid #fbbf24;
}

/* Reopen - Dark Orange */
.s_reopen input[type="radio"]:checked ~ label {
    color: #fd7e14; /* dark orange */
    border: 2px solid #fd7e14;
}

/* Close - Light Green */
.s_close input[type="radio"]:checked ~ label {
    color: #63d17d; /* light green */
    border: 2px solid #63d17d;
}

/* Resolve - Dark Green */
.s_resolve input[type="radio"]:checked ~ label {
    color: #14532d; /* dark green */
    border: 2px solid #14532d;
}

/* In Process - Primary Blue */
.s_inprocess input[type="radio"]:checked ~ label {
    color: #0d6efd; /* primary blue */
    border: 2px solid #0d6efd;
}


.stag input[type="radio"]:checked ~ label:after {
    content: "\F132";
    font: normal normal normal 24px/1 "Material Design Icons";
    width: auto;
    height: auto;
    vertical-align: middle;
    font-size: .9rem;
    margin-left: 0;
    position: absolute;
    left: 0;
    top: 0;
}


/* complaint status */

p.c_status {
    background: #B8B8B8;
    color: #fff !important;
    padding: .4em 1em !important;
    border-radius: 7px;
    text-transform: uppercase;
    text-align: center;
}

td.s_draft, p.s_draft {
    background: #B8B8B8;
    text-align: center;
}

/* Open - Light Orange */
td.s_open, p.s_open {
    background-color: #fbbf24; /* light orange */
    color: #ffffff !important;
    text-align: center;
}

/* Reopen - Dark Orange */
td.s_reopen, p.s_reopen {
    background-color: #fd7e14; /* dark orange */
    color: #ffffff !important;
    text-align: center;
}

/* Close - Light Green */
td.s_close, p.s_close {
    background-color: #63d17d; /* light green */
    color: #ffffff !important;
    text-align: center;
}

/* Resolve - Dark Green */
td.s_resolve, p.s_resolve {
    background-color: #14532d; /* dark green */
    color: #ffffff !important;
    text-align: center;
}

/* In Process - Primary Blue */
td.s_inprocess, p.s_inprocess {
    background-color: rgba(10, 36, 99, 0.8); /* primary blue */
    color: #ffffff !important;
    text-align: center;
}
td.s_closeinvalid, p.s_closeinvalid {
    background-color: #dc3545; /* red */
    color: #ffffff !important;
    text-align: center;
}

td.s_closeinvalid, p.s_closeinvalid {
    background-color: #dc3545; /* red */
    color: #ffffff !important;
    text-align: center;
}

/* incident status */
.incident-action-dropdown .dropdown-toggle::after {
    display: none !important;
}



td.s_triggered, p.s_triggered, button.s_triggered {
    background-color: #dc3545; /* red */
    color: #ffffff !important;
    text-align: center;
}

td.s_accepted, p.s_accepted, button.s_accepted {
    background-color: #28a745; /* green */
    color: #ffffff !important;
    text-align: center;
}

td.s_inprocess, p.s_inprocess, button.s_inprocess {
    background-color: #0d6efd; /* primary blue */
    color: #ffffff !important;
    text-align: center;
}

td.s_assigned, p.s_assigned, button.s_assigned {
    background-color: #0b7285; /* dark cyan */
    color: #ffffff !important;
    text-align: center;
}

td.s_resolve, p.s_resolve, button.s_resolve {
    background-color: #14532d; /* dark green */
    color: #ffffff !important;
    text-align: center;
}

.Incident-td {
    background-color: #e0f7fa;
    color: #e83535 !important;
    text-align: center;
}

.priority-low {
    color: #000000 !important; /* grey */
    font-weight: 500 !important;
}

.priority-medium {
    color: #ffad00 !important; /* dark/grey */
    font-weight: 600 !important;
}

.priority-high {
    color: #f21912 !important; /* red */
    font-weight: 700 !important;
}

.priority-critical {
    color: #f22511 !important; /* dark red */
    font-weight: 800 !important;
}


.Complain-td {
    background-color: #e6f4ea;
    color: #0A2463 !important;
    text-align: center;
}

@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0.3;
    }
}

/* Blinking pill badge */
.Incidentspill {
    animation: blink 1s infinite;
    background-color: rgba(255, 0, 0, 0.2);
    color: #fff;
    font-weight: bold;
}

#complain-list th,
#complain-list td {
    text-align: center;
    vertical-align: middle;
}

#incidents-list th,
#incidents-list td {
    text-align: center;
    vertical-align: middle;
}

/* Table fixed layout */
#complain-remarks {
    width: 100% !important;
    table-layout: fixed !important;
}

    /* Remarks column multiline */
#complain-remarks td.remarks-col {
    white-space: normal !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.4;
    padding: 6px 10px;
    max-width: 60% !important;
}

/* All other columns stay single line */
#complain-remarks td:not(.remarks-col) {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.incident-action-dropdown,
.btn_next_action {
    flex-shrink: 0;
}

.btn_next_action {
    min-width: 120px; /* Adjust based on your button text width */
    text-align: right;
}

td .d-flex.justify-content-end.align-items-center {
    gap: 6px; /* optional spacing between button/badge and dropdown */
}




@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0.3;
    }
}



.fleet-tooltip {
    position: relative;
    cursor: pointer;
    display: inline-block;
    color: #333;
}

/* Black info icon */
.fleet-tooltip .tooltip-icon {
    color: #000; /* black */
    font-size: 0.9em;
    margin-left: 3px;
}

/* Tooltip text */
.fleet-tooltip .fleet-tooltip-text {
    visibility: hidden;
    width: max-content;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    position: absolute;
    z-index: 999;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85em;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.fleet-tooltip .fleet-tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
}

/* Show tooltip on hover */
.fleet-tooltip:hover .fleet-tooltip-text {
    visibility: visible;
    opacity: 1;
}


/* Blinking pill badge */
.Incidentspill {
    animation: blink 1s infinite;
    background-color: rgba(255, 0, 0, 0.2);
    color: #fff;
    font-weight: bold;
}

#complain-list th,
#complain-list td {
    text-align: center;
    vertical-align: middle;
}

#incidents-list th,
#incidents-list td {
    text-align: center;
    vertical-align: middle;
}

#complain-remarks th,
#complain-remarks td {
    text-align: center;
    vertical-align: middle;
}


#complain-history th,
#complain-history td {
    text-align: center;
    vertical-align: middle;
}

p.issueslist {
}

    p.issueslist input {
    }

    p.issueslist span {
        display: inline-block;
        padding: 0 0 0 1em;
    }



/* Map bubble cross icon*/

a.crosspin {
    /*
    position: absolute;
    display: block;
    top: 0;
    margin: -46px 0px 0 0;
    z-index: 1;
    margin-left: 78px;
    background: #fff;
    border-radius: 100%;
    height: 21px;
    padding: 0;*/
}

    a.crosspin i {
        font-size: 1.5em;
        color: #fff;
        padding: 1px 0 0 0;
        margin: -6px -10px 0px 7px;
        display: inline-block;
    }


/* full screen route div */

.mainRoutediv {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 201;
    width: 100vw;
    height: 100vh;
    background: #fff;
    margin: 0;
    overflow-y: hidden;
    max-height: 100%;
    overflow: hidden;
    display: block;
}

    .mainRoutediv > .col-md-12 {
        margin: 0;
        padding: 0;
    }

    .mainRoutediv .map, .mainRoutediv .rt-bx {
        height: 93.5vh !important;
    }



/* jquery UI Auto complete */

.ui-autocomplete {
    max-height: 500px;
    max-width: 250px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}



/* profile form */
.profile {
}
/* charts */
.mr1 {
    margin: 1em;
}

.profile h2 {
    color: rgba(10, 36, 99, 1);
}

.profile h4 {
    color: rgba(10, 36, 99, 0.6) !important;
    line-height: 1.5;
}

.profile h3 {
    color: rgba(10, 36, 99, 0.6) !important;
    line-height: 2;
    font-weight: 400;
}



/* passenger form */



input.search + i::after {
    content: "\F349";
    font-size: 1.2em;
    font-family: Material Design Icons;
    color: #0A2463;
    font-weight: 500;
    font-style: normal;
    position: absolute;
    right: 0;
    margin: -23px 23px 0 0;
}

.formhead {
    color: #0F42BC;
    font-size: 16px;
    font-weight: 500;
}

h3.hdtxt {
    color: rgba(10, 36, 99, 0.5);
}

    h3.hdtxt span {
        color: rgba(10, 36, 99, .8);
    }



.bdr-btm {
    border-bottom: 1px solid #E0E3EF;
}

.orgCont, .guarCont {
    padding-top: 1em;
    border-bottom: 1px solid #E0E3EF;
    padding-bottom: 1em;
    /*background: rgba(10, 36, 99, 0.01);*/
    border-radius: 6px;
}

    .orgCont:first-child, .guarCont:first-child {
        margin-top: .5em;
    }

    .orgCont:before {
        /*
        content: "\F011";
        font-size: 5em;
        font-family: Material Design Icons;
        position: absolute;
        left: -100px;
        color: rgba(10, 36, 99, 0.1);
            */
    }



    .guarCont:before {
        content: "\FA8A";
        font-size: 5em;
        font-family: Material Design Icons;
        position: absolute;
        left: -100px;
        color: rgba(10, 36, 99, 0.1);
    }




/* small tabs */
.smtabs {
    position: relative;
    clear: both;
    padding: 0;
    display: flex;
    border-bottom: 1px solid #E0E3EF;
    border-radius: 4px;
    margin: 0px 0px 0px;
    background: #fff;
}

.smtab {
    padding: 0;
    margin: 0;
}

    .smtab label.tblbl {
        background: #fff;
        padding: 10px 25px;
        border-bottom: 0px solid #E0E3EF;
        width: 100%;
        position: relative;
        text-align: center;
        border-radius: 0;
        line-height: 2;
        margin: 0;
        color: #8491B1;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.5s ease;
        font-size: .8em;
        text-transform: uppercase;
    }

    .smtab input[type="radio"] {
        display: none;
    }

        .smtab input[type="radio"]:checked ~ label {
            background: #fff;
            border-bottom: 2px solid #0A2463;
            z-index: 2;
            color: #0A2463;
            font-weight: 500;
            border-radius: 0;
            margin: 0;
        }


@media (max-width: 480px) {
    .smtabs {
        display: block;
    }

    .smtab {
        width: 100%;
    }
}
/* profile view */
.personalInfoTxt {
}

    .personalInfoTxt p {
    }

        .personalInfoTxt p span {
            color: #8491B1;
            font-size: 16px;
            font-weight: 400;
            padding: 0 8px 0 0;
        }

    .personalInfoTxt h2 {
        color: #0A2463;
        font-size: 24px;
        font-weight: 500;
    }

    .personalInfoTxt .gendertxt {
        background: #00B18B;
        border-radius: 4px;
        padding: 2px 10px;
        color: #fff;
        font-size: 13px;
        float: left;
        text-transform: uppercase;
    }

    .personalInfoTxt i {
        color: #8491B1;
        padding: 0 7px;
        vertical-align: middle;
    }

    .personalInfoTxt span.active, .personalInfoTxt span.inactive {
        border-radius: 4px;
        padding: 2px 5px;
        color: #fff;
        font-size: 7px;
        text-transform: uppercase;
        margin: 0 3px;
        letter-spacing: 3px;
        font-weight: 500;
        vertical-align: top;
    }

    .personalInfoTxt span.active {
        background: #146FD1;
    }

    .personalInfoTxt span.inactive {
        background: #9B9B9B;
    }

.addressView {
    background: #edeff6;
    padding: 10px 15px;
    border-radius: 10px;
}

    .addressView p {
        color: #0A2463;
        font-size: 16px !important;
        font-weight: 400;
        padding: 4px !important;
        margin: 0;
    }

        .addressView p span {
            color: #8491B1;
            font-size: 16px;
            font-weight: 400;
        }

    .addressView h3 {
        color: #3A4E82;
        font-size: 16px !important;
        font-weight: 400;
        padding: 4px !important;
        margin: 0;
        line-height: 1.3;
    }

        .addressView h3 span.txt-address {
            color: #3A4E82;
        }

        .addressView h3 i {
            display: inline-block;
            padding: 0px 5px 0 0;
            font-size: 20px;
        }

        .addressView h3 a i {
            font-size: 16px;
            font-weight: 400;
            font-style: normal;
            color: #007bff;
        }

.white_box {
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .10);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .15);
    min-height: 140px;
}

    .white_box h1 {
        color: #0A2463;
        font-size: 3.4em;
        font-weight: 400;
        padding: .3em 0 0;
        margin: 0;
    }

    .white_box h2 {
        color: #0A2463;
        font-size: 3em;
        font-weight: 400;
        padding: .3em 0 0;
        margin: 0;
    }

    .white_box p {
        color: #0A2463;
        font-size: 14px !important;
        font-weight: 400;
        padding: 4px !important;
        margin: 0;
    }

        .white_box p span {
            color: #8491B1;
            font-size: 14px;
            font-weight: 400;
        }







.orgview {
}

    .orgview label, .orgview p {
        font-size: 14px !important;
        font-weight: 400;
        text-align: left;
        margin-top: 5px;
    }

    .orgview label {
        color: #8491B1;
    }

    .orgview p {
        color: #3A4E82 !important;
        padding-top: 0 !important;
    }

    .orgview .row .col-md-12 .row:nth-of-type(odd) {
        background: #EDFFFA;
    }

    .orgview ul.tagview {
    }

        .orgview ul.tagview li {
            border: 0;
            color: #3A4E82 !important;
            padding-top: 0 !important;
            font-size: 14px;
            padding: 0;
            font-weight: 500;
        }

            .orgview ul.tagview li:after {
                content: ", ";
            }

    .orgview p span {
        color: #8491B1;
        font-size: 18px;
        font-weight: 400;
    }

    .orgview h2 {
        color: #3A4E82;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 30px;
    }

    .orgview p span.active, .orgview p span.inactive {
        border-radius: 4px;
        padding: 3px 8px;
        color: #fff;
        font-size: 9px;
        text-transform: uppercase;
        margin: 0 13px;
        letter-spacing: 3px;
        font-weight: 500;
        vertical-align: bottom;
    }

    .orgview p span.active {
        background: #146FD1;
    }

    .orgview p span.inactive {
        background: #9B9B9B;
    }

    .orgview h5 {
        padding: 1em 0 .5em;
    }

    .orgview .ms-options-wrap {
        display: none;
    }
/* charts */
.mr1 {
    margin: 1em;
}

h3.hdtxt {
    color: rgba(10, 36, 99, 0.5);
}

    h3.hdtxt span {
        color: rgba(10, 36, 99, .8);
    }


/* dialog stop list */
.stopslist {
    height: 475px;
    overflow: auto;
    border: 1px solid #EDEFF6;
    padding: .2em;
}

    .stopslist table tr td, .stopslist table tr th {
        text-align: left;
        font-size: .6em;
    }

        .stopslist table tr td.wng_ads {
            color: #EF3964;
        }

            .stopslist table tr td.wng_ads:before {
                content: "\F026";
                font-family: "Material Design Icons";
                padding: 0 0.4em 0 0;
            }





/* multiselect dropdown */

.ms-options-wrap {
    border: 0px solid #EDEFF6 !important;
    background: transparent !important;
}

    .ms-options-wrap ul li {
        border: 1px solid #EDEFF6 !important;
        background: transparent !important;
    }

        .ms-options-wrap ul li.selected {
            background: #F7F8FC !important;
        }

    .ms-options-wrap > .ms-options > ul label {
        overflow-wrap: break-word;
        padding: 3px 4px 3px 25px !important;
        line-height: 1.7;
    }

    .ms-options-wrap.ms-has-selections > button {
        border: 1px solid #EDEFF6 !important;
        font-weight: 400;
        background: #F7F8FC !important;
        border-radius: 4px;
        font-size: .75rem;
        color: #0A2463;
        white-space: nowrap;
    }

    .ms-options-wrap > button:focus, .ms-options-wrap > button {
        padding: 5px 20px 5px 15px !important;
        cursor: default;
    }

        .ms-options-wrap > button:focus, .ms-options-wrap > button:focus {
            outline: 1px;
        }

        .ms-options-wrap > button > span {
            display: inline-block;
            border: 0;
        }

    .ms-options-wrap > .ms-options {
        border: 1px solid rgba(10, 36, 99, 0.3) !important;
        box-shadow: 0 5px 5px #ccc;
    }

.ms-search {
    box-shadow: none;
    background: transparent !important;
    border: 0 !important;
}

    .ms-search input, .ms-options-wrap a {
        box-shadow: none;
        border: 0 !important;
        background: transparent !important;
    }

.ms-options-wrap > .ms-options > .ms-search input {
    border-bottom: 1px solid #EDEFF6 !important;
    padding: 5px 7px;
    font-size: .5em;
}

.ms-options ul {
    background: transparent;
    border: 0;
}

    .ms-options ul li {
        background: transparent !important;
        border: 1px solid #EDEFF6 !important;
    }

.ms-options-wrap > .ms-options > ul label {
    background: transparent !important;
    border-radius: 0 !important;
}

.ms-options-wrap > button:after {
    content: '\F140' !important;
    height: 0;
    position: absolute;
    top: 25% !important;
    right: 19px !important;
    width: 0;
    border: 0px solid rgba(0, 0, 0, 0) !important;
    border-top-color: #0A2463;
    font: normal normal normal 24px/1 "Material Design Icons";
    width: 0px;
    font-size: 1.5em;
    font-weight: 600;
    color: #0A2463;
}

.sm_map {
    width: 100%;
    height: 200px;
    border: 1px solid #D3D7E9;
    border-radius: 8px;
    margin-top: .5em;
}

    .sm_map .maplgd {
        background: #fff;
        padding: .6em .9em;
        font-size: 0.65em;
        text-transform: capitalize;
        font-weight: 500;
        border-radius: .5em;
        box-shadow: 0 0 5px #ccc;
        vertical-align: middle;
        margin: 1em;
        color: #0A2463;
        bottom: 0;
        position: absolute;
    }

        .sm_map .maplgd span {
            display: inline-block;
            padding-left: 0.4em;
            vertical-align: middle;
        }

        .sm_map .maplgd img {
            width: 12px;
        }


/* -- new pax form accordion -- */
.orgaccordion {
}


    .orgaccordion .card-header {
        background: #F0F2FD;
        border-color: #F0F2FD;
        margin: 5px !important;
        padding: 0 .3rem;
    }

        .orgaccordion .card-header button {
            vertical-align: sub;
        }

        .orgaccordion .card-header .chevbtn {
            border: 0;
            background: transparent;
            font-size: 1.4rem;
            color: #0A2463;
            width: 100%;
            text-align: right;
        }

        .orgaccordion .card-header button:focus {
            outline: 1px dotted !important;
        }

        .orgaccordion .card-header button.collapsed i {
            transform: rotate(180deg);
            display: block;
            float: right;
        }

        .orgaccordion .card-header h5 {
            padding: .75rem 1.25rem;
        }

        .orgaccordion .card-header .row div {
            padding: .75rem 1.25rem;
        }

        .orgaccordion .card-header h5 label {
            width: 100%;
            color: #0A2463;
            text-align: left;
            font-size: .8em;
            font-weight: 500;
            margin: 0;
            line-height: 2.3;
            padding-left: .5rem;
        }


        .orgaccordion .card-header h5 input.search[type="text"] {
            background: #fff;
            height: calc(1.8em + .75rem + 2px);
            background: #fff;
            font-size: .9em;
            font-weight: 400;
            border-radius: .5em;
        }

        .orgaccordion .card-header h5 input.search + i::after {
            margin: -30px 30px 0 0;
        }


    .orgaccordion .card {
        border-color: #F0F2FD;
    }

        .orgaccordion .card .card-body h3 {
            color: #0A2463;
            font-size: 16px;
            padding: 1em 0;
            margin: 0;
        }

        .orgaccordion .card .card-header h5 p {
            color: #fff;
            font-size: 0.7rem;
            font-weight: 500;
            padding: .5rem 0 0rem;
            overflow-wrap: break-word;
            word-break: keep-all;
        }

    .orgaccordion .card-header p:after {
        text-align: right;
        float: right;
        content: "\F143";
        display: inline-block;
        font: normal normal normal 24px/1 "Material Design Icons";
    }

    .orgaccordion .card-header button.collapsed p:after {
        text-align: right;
        float: right;
        content: "\F140";
        display: inline-block;
        font: normal normal normal 24px/1 "Material Design Icons";
    }


    .orgaccordion .card-header h2 button.collapsed {
        background-color: #edeff6;
    }

        .orgaccordion .card-header h2 button.collapsed > p {
            color: #516492;
        }





/* table with white header */

table.tableWhite {
    margin-bottom: 0;
    width: 970px;
    border: 1px solid #E0E3EF;
}

    table.tableWhite thead th {
        color: #0A2463;
        border-top: 0;
        font-weight: 500;
        font-size: .72rem;
        vertical-align: middle;
        padding: .5rem 0.3rem;
        border-bottom: 2px solid #E0E3EF !important;
    }

    table.tableWhite td {
        font-size: .7rem;
        padding: .2rem 0.3rem;
        font-weight: 400;
        color: #0A2463;
        line-height: normal;
        border-bottom: 1px solid #E0E3EF !important;
    }

    table.tableWhite tbody tr:hover {
        background-color: #F0F2FD !important;
    }

    table.tableWhite td select, table.tableWhite td input, table.tableWhite td button {
        height: calc(1em + .75rem + 2px);
        padding: 0;
        font-size: .65rem;
    }

.col-form-white-label {
    color: white !important;
}

.color-Picker > .sp-replacer > .sp-dd {
    display: none !important;
}

.color-Picker > .sp-replacer > .sp-preview {
    margin-right: 0 !important;
}

.sortable .zone li {
    list-style: inside;
    float: left;
}

.alerts-multiSelect .ms-options-wrap, .ms-options-wrap * {
    border: none !important;
}

.alerts-multiSelect .ms-options ul li {
    border: none !important;
    list-style: none !important;
}

/*.alerts-multiSelect .ms-options-wrap, .ms-options-wrap * {
    background-color: white !important;
}*/

.edit-zone-alerts .sortable .zone li {
    list-style: none !important;
}

.alerts-multiSelect ul li {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.05) !important;
    padding-bottom: 0em !important;
    margin-bottom: 0px !important;
}

    .alerts-multiSelect ul li ul li {
        background: #fff !important;
        box-shadow: 0px !important;
        padding: 0em !important;
        margin-bottom: 0px !important;
    }

div.alerts-multiSelect span {
    color: #333 !important;
}

.rt-bx2 {
    background: #fff;
    box-shadow: -2px 0px 0px rgba(0, 0, 0, 0.1);
}

.zone-container {
    z-index: 0;
    /*position: relative;*/
    overflow-y: auto;
}

ul.zone-container li {
    background: #fff;
    box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.05);
    padding: 1em 1.5em;
    margin-bottom: 3px;
}

    ul.zone-container li span.type {
        background: transparent;
        font-weight: 500;
        font-size: .7em;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #9B9B9B;
        margin: 0;
        padding: .2em 0em;
        border-radius: .2em;
    }

    ul.zone-container li h3 {
        color: rgba(10, 36, 99, 1);
        font-weight: 500;
        font-size: 1.1em;
        padding: .2em 0 0;
        text-transform: capitalize;
    }

    ul.zone-container li span, ul.zone-container li i {
        color: rgba(10, 36, 99, .5);
        font-weight: 400;
        font-size: .9em;
        padding: 0 .7em 0 0;
    }

    ul.zone-container li .dropdown-toggle:after {
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
        font: normal normal normal 24px/1 "Material Design Icons";
        content: "\F1D9";
        width: auto;
        height: auto;
        vertical-align: middle;
        line-height: .625rem;
        font-size: 1rem;
        margin-left: 0;
        color: rgba(10, 36, 99, .5);
    }

    ul.zone-container li.edit {
        position: relative;
        width: 100%;
        right: 0;
        z-index: 1;
        box-shadow: 0px 0px 70px rgba(0, 0, 0, 0.3);
    }

        ul.zone-container li.edit:last-child {
            bottom: 0;
        }

ul.zone-container div.edit {
    position: relative;
    width: 120%;
    right: 0;
    z-index: 1;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}


/* color picker */
.sp-dd {
    display: none;
}

.sp-preview {
    margin-right: 0 !important;
}


.zonemap .map {
    height: calc(100vh - 200px);
    overflow: hidden;
    min-height: 700px;
}

.rt-bx2 > ul {
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(100vh - 200px);
    min-height: 700px;
    padding: 0;
    margin: auto;
    list-style: none;
}

.mainRoutediv .rt-bx2 > ul {
    height: calc(100vh - 90px) !important;
    max-height: 100vh;
    min-height: 200px !important;
}

.mainRoutediv .zonemap .map {
    height: calc(100vh - 90px) !important;
    max-height: 100vh;
    min-height: 200px !important;
}

.maindiv .mdi-fullscreen-exit {
    display: none;
}

.mainRoutediv .mdi-fullscreen {
    display: none;
}

.mainRoutediv .mdi-fullscreen-exit {
    display: block !important;
}

input[type="search"].form-control {
    padding: calc(1.3em - 10px);
}




span.earlytime, span.latetime {
    font-size: .5rem;
    color: #fff;
    padding: 1.5px 3.5px;
    border-radius: 3px;
    margin: 0 .2em;
    font-weight: 500;
    white-space: nowrap;
}

span.latetime {
    background: #ED1D4D;
}

span.earlytime {
    background: #CC9900;
}



.legendDiv {
    float: right;
    display: flex;
    justify-content: right;
}

    .legendDiv div {
        text-align: right;
        padding: 0px;
    }

        .legendDiv div:last-child {
            text-align: right;
            padding: 0px 15px 0px 15px;
        }

    .legendDiv span {
        height: 17px;
        position: absolute;
        width: 30px;
    }

    .legendDiv label {
        padding: 0px 0px 3px 37px
    }

    .legendDiv span.low {
        background-color: #028102;
    }

    .legendDiv span.medium {
        background-color: #e4992f;
    }

    .legendDiv span.high {
        background-color: #ed1414;
    }


hr.tb {
    margin: 1em 0 0 0;
    height: 1px;
    width: 100%;
}


.bubblecount {
    background: #EF3964;
    color: #fff;
    font-size: 12px;
    display: inline-block;
    border-radius: 100%;
    padding: 0px;
    width: 23px;
    height: 23px;
    margin-left: 9px;
}


/* filterdiv */

.filterdiv {
    background: #EDFFFA;
    padding: .3em;
    border-radius: 8px;
    border: 1px solid #E0E3EF;
}

    .filterdiv input, .filterdiv select {
        background: #fff;
    }

    .filterdiv label, .filterdiv input, .filterdiv select {
        margin-top: .3em;
    }

    .filterdiv button[type="button"] {
    }



button.downarrow, button.uparrow {
    background: #E0E3EF;
    color: #1B253A;
    font-size: 14px;
    border-radius: 100%;
    border: 0;
    width: 18px;
    height: 18px;
    text-align: center;
    padding: 2px;
}

    button.downarrow:hover, button.uparrow:hover {
        opacity: .9;
    }

div.tbldata {
    border: 1px solid #E0E3EF;
    margin: 6px 0;
    border-radius: 8px;
}

    div.tbldata .contbx {
        border-bottom: 1px solid #E0E3EF;
        padding: 7px;
        height: 66px;
    }

        div.tbldata .contbx p {
            font-weight: 400 !important;
            padding: 0 !important;
            margin: 0;
            white-space: break-spaces;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }


        div.tbldata .contbx:last-child {
            border-bottom: 0px solid #E0E3EF;
        }



table.every3stripe tbody tr:nth-of-type(3n) {
    background-color: #f9f9f9 !important;
    border-collapse: collapse;
}

table.every3stripe tbody tr {
    background-color: #fff !important;
    border-collapse: collapse;
}


.indicate {
    float: right;
    color: #ED1D4D;
    font-size: .9em;
    border: 1px solid #E0E3EF;
    border-radius: 3px;
    margin-top: -23px;
    padding: 2px 6px;
    font-weight: 500;
    margin-right: 15px;
}


/* trips modal */
.tripsmodal .modal-body {
    height: 400px;
    overflow: auto;
}

.tripsmodal label, .tripsmodal p {
    text-align: left;
    font-size: .7em;
    padding: 0;
    margin: 0;
}

.tripsmodal p {
    color: #0A2463;
}


tr.hide-table-padding td {
    padding: 0;
}

/* accordion */

.custom-table {
    border-collapse: collapse;
}


.toggler {
    display: none
}

.toggler1 {
    display: table-row;
}

/* trips model */
.tripsmodel .model-body {
    height: 400px;
    overflow: auto;
}

.tripsmodel label, .tripsmodel p {
    text-align: left;
    font-size: .6em;
    padding: 0;
    margin: 0;
}

.tripsmodel p {
    color: #0A2463;
}


tr.hide-table-padding td {
    padding: 0;
}

td.details-control {
    background: url('images/icondown24.png?v=0AqEU-XTxCyCubc9YgHuBhKrjDc') no-repeat center center;
    text-align: center;
    color: forestgreen;
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('images/iconup24.png?v=0AqEU-XTxCyCubc9YgHuBhKrjDc') no-repeat center center;
    text-align: center;
    color: red;
}

/* Confirmation Modal */
.confirmmodal .modal-body {
    height: 70px;
    overflow: auto;
}

.confirmmodal label, .confirmmodal p {
    text-align: left;
    font-size: .7em;
    padding: 0;
    margin: 0;
}

.confirmmodal p {
    color: #0A2463;
}

.confirmmodal .modal-footer {
    padding: .5em 2em;
}

.confirmmodal .btn {
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 400;
    margin: .3rem 0;
    margin: .3rem auto;
    text-align: center;
    padding: .5em 2em;
}



/*-- google map callout --*/
.callout {
    margin: 0;
    padding: 0;
    min-width: 280px;
}

    .callout .drvimg {
        display: flex;
        padding: 10px 10px 0;
    }

        .callout .drvimg span.drvpic {
            display: inline-block;
            margin: 10px;
            width: auto;
            text-align: center;
            position: relative;
        }

            .callout .drvimg span.drvpic img {
                width: 40px;
                height: 40px;
                border-radius: 100%;
            }

                .callout .drvimg span.drvpic img[src=""] {
                    opacity: 0;
                }

            .callout .drvimg span.drvpic:after {
                content: "\F004";
                width: 40px;
                height: 40px;
                border-radius: 100%;
                position: absolute;
                z-index: -1;
                font-size: 2.4em !important;
                text-align: center;
                background: #D3FFF3;
                left: 0;
                font: normal normal normal 24px/1 "Material Design Icons";
                padding: 5px;
                color: #ccc;
            }

        .callout .drvimg h2 {
            color: #0A2463;
            font-size: 18px;
            font-weight: 600;
            vertical-align: middle;
            padding: 15px 0;
        }

    .callout .drvinfo label {
        margin: 10px;
        font-weight: bold;
        font-size: initial;
        color: #3A4E82;
    }

    .callout .drvinfo div span.id {
        color: #146FD1;
    }

    .callout .drvinfo div span {
        color: #8491B1;
        text-align: center;
    }

        .callout .drvinfo div span.lbl {
            color: #06CEA3;
            text-align: left;
        }

    .callout .drvinfo {
        border-top: .3px solid #e8e8e8;
        border-bottom: .3px solid #e8e8e8;
        width: 100%;
        overflow: hidden;
        font-weight: 500;
        display: flex;
    }

        .callout .drvinfo div {
            text-align: center;
            width: 50%;
            padding: 10px 0;
        }

            .callout .drvinfo div:first-child {
                border-right: .3px solid #e8e8e8;
            }




.tdatanew {
    display: inline-block !important;
    width: 100% !important;
}

.otherdatanew {
    display: inline-block !important;
    width: 100% !important;
    padding: 0 0 0 16px !important;
    margin: 0 0 !important;
}

.tdatanew .otherdatanew div {
    width: 100% !important
}

.tdataone {
    display: flex;
    padding: 0px 18px 0;
}

.callout .tdata {
    border-bottom: .3px solid #e8e8e8;
    padding: 6px 0 0px;
}

    .callout .tdata div span.lbl {
        color: #8491B1;
        text-align: center;
        display: block;
        font-weight: 500;
        line-height: 1.6;
        margin-right: 4px;
    }

    .callout .tdata div p {
        color: #3A4E82;
        text-align: center;
        font-weight: 500;
    }



.callout .otherdata div span {
    color: #3A4E82;
    text-align: left;
}

    .callout .otherdata div span.lbl {
        color: #8491B1;
        text-align: left;
        width: 43px;
        display: inline-block;
        font-weight: 500;
    }
    .callout .shap-name div span.lbl {
        width: auto;
    }

.callout .otherdata {
    width: 100%;
    overflow: hidden;
    font-weight: 500;
    display: flex;
    padding: 2px 16px;
    margin: 6px 0;
}

    .callout .otherdata div {
        text-align: left;
        width: 50%;
    }


.callout h3.vID {
    color: #0A2463;
    font-size: 16px;
    font-weight: 600;
    vertical-align: middle;
    padding: 0px 0;
    float: left;
}

.callout div.ds {
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    vertical-align: middle;
    padding: 2px 5px;
    float: right;
    border-radius: 4px;
    text-transform: uppercase;
}

.callout div.loggedIn {
    background: #70E206;
}

.callout div.shutdown {
    background: #4A4A4A;
}

.callout div.loggedOff {
    background: #ED1D4D;
}

.callout div.disconnected {
    background: #ffc100;
}

.callout div.ontrip {
    background: #146FD1;
}

.callout div.noStatus {
    background: #ccc;
    font-style: italic;
}


.callout div.ds:before {
    background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='9px' height='9px' viewBox='0 0 9 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com --%3E%3Ctitle%3Ebus_2%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cg id='Final' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='tracking_1' transform='translate(-1379.000000, -226.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='accordion-copy' transform='translate(1170.000000, 178.000000)'%3E%3Cg id='stop-copy-2' transform='translate(206.000000, 45.000000)'%3E%3Cpath d='M11.4374814,4.87500173 C11.7481389,4.87500173 11.9999802,5.12684297 11.999945,5.43750048 L11.999945,6.562498 C11.999945,6.76960302 11.8320567,6.93749132 11.6249517,6.93749132 L11.2499584,6.93749132 L11.2499584,9.93749056 C11.2494662,10.1248554 11.1783628,10.3051538 11.0508338,10.4424211 C11.0577772,10.4608605 11.0616971,10.4803019 11.0624529,10.4999893 L11.0624529,11.0551756 C11.0624529,11.1792945 11.0624529,11.4374814 10.6874596,11.4374814 L9.74996754,11.4374814 C9.37497423,11.4374814 9.37497423,11.1792945 9.37497423,11.0551756 L9.37497423,10.6874948 L5.62498835,10.6874948 L5.62498835,11.0551756 C5.62498835,11.1792945 5.62498835,11.4374814 5.24999504,11.4374814 L4.31248539,11.4374814 C3.98286111,11.4374814 3.93749207,11.257306 3.93749207,11.0624881 L3.93749207,10.4999893 C3.93824793,10.4803019 3.94216784,10.4608605 3.94911119,10.4424211 C3.82158217,10.3051538 3.75047881,10.1248554 3.74998663,9.93749056 L3.74998663,6.93749132 L3.37499331,6.93749132 C3.1678883,6.93749132 3,6.76960302 3,6.562498 L3,5.43750048 C3,5.12684297 3.25184124,4.87500173 3.56249876,4.87500173 L3.74998663,4.87500173 L3.74998663,4.31250297 C3.7508128,3.58796941 4.33795603,3.00082617 5.06248959,3 L9.93747298,3 C10.6620065,3.00082617 11.2491498,3.58796941 11.249976,4.31250297 L11.249976,4.87500173 L11.4374814,4.87500173 Z M9.74998512,9.56247967 C9.95709013,9.56247967 10.1249784,9.39459137 10.1249784,9.18748636 C10.1249784,8.98038135 9.95709013,8.81249304 9.74998512,8.81249304 C9.54288011,8.81249304 9.3749918,8.98038135 9.3749918,9.18748636 C9.3749918,9.39459137 9.54288011,9.56247967 9.74998512,9.56247967 Z M5.24999504,9.56247967 C5.45710005,9.56247967 5.62498835,9.39459137 5.62498835,9.18748636 C5.62498835,8.98038135 5.45710005,8.81249304 5.24999504,8.81249304 C5.04289003,8.81249304 4.87500173,8.98038135 4.87500173,9.18748636 C4.87500173,9.39459137 5.04289003,9.56247967 5.24999504,9.56247967 Z M9.74286599,3.93749207 L5.24999504,3.93749207 C4.7874277,3.93749207 4.49999083,4.22492894 4.49999083,4.68749628 L4.49999083,7.49999008 C4.49999083,7.93460826 4.81535928,8.24999428 5.24999504,8.24999428 L9.74998512,8.24999428 C10.0076095,8.24999428 10.4999893,7.95786407 10.4999893,7.49999008 L10.4999893,4.6946154 C10.4995674,4.27664367 10.1608377,3.93791395 9.74286599,3.93749207 Z' id='bus_2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 12px;
    height: 12px;
    display: inline-block;
    padding: 0 0;
    background-size: 100%;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -2px;
    content: '';
}


.callout .bnrimg {
    padding: 22px 0;
    border-bottom: .3px solid #e8e8e8;
}

    .callout .bnrimg .drv_behavior_img_1,
    .callout .bnrimg .drv_behavior_img_2,
    .callout .bnrimg .drv_behavior_img_3,
    .callout .bnrimg .drv_behavior_img_5,
    .callout .bnrimg .drv_behavior_img_6,
    .callout .bnrimg .drv_behavior_img_7,
    .callout .bnrimg .drv_behavior_img_8,
    .callout .bnrimg .drv_behavior_img_10,
    .callout .bnrimg .drv_behavior_img_11,
    .callout .bnrimg .drv_behavior_img_12,
    .callout .bnrimg .drv_behavior_img_13,
    .callout .bnrimg .drv_behavior_img_14,
    .callout .bnrimg .drv_behavior_img_15,
    .callout .bnrimg .drv_behavior_img_16,
    .callout .bnrimg .drv_behavior_img_17,
    .callout .bnrimg .drv_behavior_img_18,
    .callout .bnrimg .drv_behavior_img_19 {
        width: 60px;
        height: 60px;
        background-repeat: no-repeat;
        margin: auto;
        background-position: center;
        background-size: 100%;
        background-color: transparent;
        position: relative;
        display: block;
        border: 0;
        border-radius: 0;
    }


/* - behaviour / event pin - */

.eventpin {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -100%);
    background-color: #fff;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 20%);
    width: 25px;
    height: 25px;
    border: 2px solid #fff;
    text-align: center;
    padding-top: 0;
}


.eventpin-anchor {
    /* Position the div a fixed distance above the tip. */
    position: absolute;
    width: 100%;
    bottom: 8px;
    left: 0;
}
    /* This element draws the tip. */
    .eventpin-anchor::after {
        content: "";
        position: absolute;
        top: -2px;
        left: 0;
        transform: translate(-50%, 0);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #fff;
    }

    .eventpin-anchor::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0;
        transform: translate(-50%, 0%);
        width: 2px;
        height: 0;
        border-top: 0px solid #0A2463;
        border-radius: 7px;
    }

.eventpin .drv_behavior_1,
.eventpin .drv_behavior_2,
.eventpin .drv_behavior_3,
.eventpin .drv_behavior_5,
.eventpin .drv_behavior_6,
.eventpin .drv_behavior_7,
.eventpin .drv_behavior_8,
.eventpin .drv_behavior_10,
.eventpin .drv_behavior_11,
.eventpin .drv_behavior_12,
.eventpin .drv_behavior_13,
.eventpin .drv_behavior_14,
.eventpin .drv_behavior_15,
.eventpin .drv_behavior_16,
.eventpin .drv_behavior_17,
.eventpin .drv_behavior_18,
.eventpin .drv_behavior_19 {
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    margin: auto;
    background-position: center;
    background-size: 20px;
    background-color: transparent;
    position: relative;
    display: block;
    border: 0;
    border-radius: 0;
}

.gm-style-iw-d {
    overflow: hidden !important;
}

.callout .btmdata {
    padding: .8em 1.1em .4em;
    border-top: .3px solid #e8e8e8;
    background: #F6F6F6;
    overflow: hidden;
}


.callout .co_ftr .drvbehavior_txt_1,
.callout .co_ftr .drvbehavior_txt_2,
.callout .co_ftr .drvbehavior_txt_3,
.callout .co_ftr .drvbehavior_txt_5,
.callout .co_ftr .drvbehavior_txt_6,
.callout .co_ftr .drvbehavior_txt_7,
.callout .co_ftr .drvbehavior_txt_8,
.callout .co_ftr .drvbehavior_txt_10,
.callout .co_ftr .drvbehavior_txt_11,
.callout .co_ftr .drvbehavior_txt_12,
.callout .co_ftr .drvbehavior_txt_13,
.callout .co_ftr .drvbehavior_txt_14,
.callout .co_ftr .drvbehavior_txt_15,
.callout .co_ftr .drvbehavior_txt_16,
.callout .co_ftr .drvbehavior_txt_17,
.callout .co_ftr .drvbehavior_txt_18,
.callout .co_ftr .drvbehavior_txt_19 {
    padding: .8em 1.1em .4em;
    border-top: .3px solid #e8e8e8;
    color: #fff;
    overflow: hidden;
}

    .callout .co_ftr .drvbehavior_txt_1 h3,
    .callout .co_ftr .drvbehavior_txt_2 h3,
    .callout .co_ftr .drvbehavior_txt_3 h3,
    .callout .co_ftr .drvbehavior_txt_5 h3,
    .callout .co_ftr .drvbehavior_txt_6 h3,
    .callout .co_ftr .drvbehavior_txt_7 h3,
    .callout .co_ftr .drvbehavior_txt_8 h3,
    .callout .co_ftr .drvbehavior_txt_10 h3,
    .callout .co_ftr .drvbehavior_txt_11 h3,
    .callout .co_ftr .drvbehavior_txt_12 h3,
    .callout .co_ftr .drvbehavior_txt_13 h3,
    .callout .co_ftr .drvbehavior_txt_14 h3,
    .callout .co_ftr .drvbehavior_txt_15 h3,
    .callout .co_ftr .drvbehavior_txt_16 h3,
    .callout .co_ftr .drvbehavior_txt_17 h3,
    .callout .co_ftr .drvbehavior_txt_18 h3,
    .callout .co_ftr .drvbehavior_txt_19 h3 {
        font-size: 16px;
        text-align: center;
        color: #fff;
    }

.callout .co_ftr .drvbehavior_txt_1 {
    background-color: #C40050;
}

.callout .co_ftr .drvbehavior_txt_2 {
    background-color: #F5A623;
}

.callout .co_ftr .drvbehavior_txt_3 {
    background-color: #A7A100;
}

.callout .co_ftr .drvbehavior_txt_5 {
    background-color: #ED1D4D;
}

.callout .co_ftr .drvbehavior_txt_6 {
    background-color: #42CBAC;
}

.callout .co_ftr .drvbehavior_txt_7 {
    background-color: #FFCE49;
}

.callout .co_ftr .drvbehavior_txt_8 {
    background-color: #24A9F0;
}

/*Ignition On*/

.callout .co_ftr .drvbehavior_txt_10 {
    background-color: #32CD32;
}
/*"Ignition Off"*/
.callout .co_ftr .drvbehavior_txt_11 {
    background-color: #A9A9A9;
}
/*"Door Open"*/
.callout .co_ftr .drvbehavior_txt_12 {
    background-color: #00CED1;
}
/*"Door Close"*/
.callout .co_ftr .drvbehavior_txt_13 {
    background-color: #FFA500;
}
/*"Panic Button"*/
.callout .co_ftr .drvbehavior_txt_14 {
    background-color: #FF4500;
}
/*"Petrol Button"*/
.callout .co_ftr .drvbehavior_txt_15 {
    background-color: #000080;
}
/*"Motion Sensor"*/
.callout .co_ftr .drvbehavior_txt_16 {
    background-color: #9370DB;
}
/*"NCLB"*/

.callout .co_ftr .drvbehavior_txt_17 {
    background-color: #000080;
}

.callout .co_ftr .drvbehavior_txt_18 {
    background-color: #7597e5;
}

.callout .co_ftr .drvbehavior_txt_19 {
    background-color: #ffb17c;
}


/* passenger assignment */

.mapdiv {
    background: #e9e9e9;
    margin: -15px 0px;
    padding: 0;
}

.bdr_btm {
    border-bottom: 1px solid #D0D0D0;
}

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

.overflow_auto {
    overflow: auto;
}

.h73vh {
    height: 73vh;
}

.maplgd {
    background: #fff;
    float: right;
    padding: .6em .9em;
    font-size: 0.65em;
    text-transform: uppercase;
    font-weight: 500;
    border-radius: .5em;
    box-shadow: 0 0 5px #ccc;
    vertical-align: middle;
    margin: 1em;
    color: #0A2463;
}

    .maplgd span {
        display: inline-block;
        padding-left: 0.4em;
        vertical-align: middle;
    }

    .maplgd img {
        width: 12px;
    }

a.acc {
    border-bottom: 1px solid #eee;
    overflow: hidden;
    display: inline-block;
    border-radius: 4px;
    width: 100%;
}

.reservation_modal {
    max-width: 34vw;
    min-width: 320px;
    margin: 0 0 0 -17vw;
    position: absolute;
    left: 50vw;
    top: 0;
    bottom: 0;
}

    .reservation_modal .modal-body {
        height: auto;
    }

/* pax assign modal */
.pax_modal {
    max-width: 60vw;
    min-width: 320px;
    margin: 0 0 0 -30vw;
    position: absolute;
    left: 50vw;
    top: 0;
    bottom: 0;
}

    .pax_modal .modal-body {
        height: 400px;
    }

    .pax_modal .modal-footer .pin_1 {
        position: static;
        background-size: 12px;
        vertical-align: middle;
        width: 12px;
        height: 16px;
    }

    .pax_modal .modal-footer span {
        font-size: 12px;
    }

    .pax_modal .modal-footer {
    }

    .pax_modal .stopadress {
        padding: .5em;
    }


        .pax_modal .stopadress .pin_1 {
            background-size: 15px;
            position: static;
            display: inline-block;
            margin: -8px .5em;
            width: 16px;
        }

.selectcont {
    background: #fff;
    border-radius: 30em;
    border: 1px solid #ced2e0;
    padding: .2em .2em .17em;
}

    .selectcont select {
        background: #fff;
        border: 0;
        outline: 0;
        border-radius: 30em;
    }



/* modal insert */
.assignment_modal {
    max-width: 600px;
    min-width: 320px;
    top: 50%;
    margin: -250px auto;
}

    .assignment_modal .modal-body {
        height: 400px;
    }

    .assignment_modal .modal-footer .pin_1 {
        position: static;
        background-size: 12px;
        vertical-align: middle;
        width: 12px;
        height: 16px;
    }

    .assignment_modal .modal-footer span {
        font-size: 12px;
    }

.modal-backdrop.show {
}

.modal-backdrop {
    background-color: #ccc;
    backdrop-filter: blur(5px);
}

.assignment_modal .modal-body h3.lthead {
    font-size: 12px;
    color: #8491B1;
    font-weight: 500;
    padding: 2em 0 0 1em;
    text-transform: uppercase;
    margin: 0;
}



/* The popup bubble styling. */
.popup-bubble2 {
    /* Position the bubble centred-above its parent. */
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -100%);
    background-color: #146FD1;
    color: #fff;
    padding: 8px 14px;
    overflow-y: hidden;
    border-radius: 50px;
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3);
    text-align: center;
    width: auto;
    height: auto;
    font-size: .8rem;
    font-weight: 500;
    line-height: 1;
    cursor: default;
}
/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor2 {
    position: absolute;
    width: 100%;
    bottom: /* TIP_HEIGHT= */ 0;
    left: 0;
}
    /* This element draws the tip. */
    .popup-bubble-anchor2::after {
        content: "";
        position: absolute;
        top: -2px;
        left: 0;
        transform: translate(-50%, 0);
        width: 0;
        height: 0;
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        border-top: /* TIP_HEIGHT= */ 8px solid #146FD1;
    }

    .popup-bubble-anchor2::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0;
        transform: translate(-50%, 0%);
        width: 2px;
        height: 0;
        border-top: 0;
    }
/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container2 {
    cursor: auto;
    height: 0;
    position: absolute;
    width: 100%;
}

.popup-bubble-anchor2 div.pin {
    float: left;
    background: #fff;
    border-radius: 100%;
    width: 34px;
    height: 34px;
    margin: -4px -10px -4px -10px;
    padding: 4px;
    color: #146FD1;
    font-size: 1.5em;
    vertical-align: middle;
    line-height: 1.5em;
}

    .popup-bubble-anchor2 div.pin i {
        position: static;
        background-size: 60%;
        margin: auto;
    }


.login_footerlogo {
    width: 220px;
    padding: 0px 0 0px 0;
    margin-top: 100px;
}

    .login_footerlogo img {
        width: 90px;
        margin: 0 0 0 19px;
    }

.footerlogo {
    width: 150px;
    padding: 0px 0 0px 0;
    float: right;
}

    .footerlogo img {
        width: 60px;
        margin: 0 0 0 10px;
    }

.headerlogo {
    width: 100px;
    padding-right: 0px;
}

    .headerlogo img {
        width: 80px;
        margin: 0 auto;
        margin: 0 0 0 10px;
        /*-webkit-filter: grayscale(100%) brightness(10%) contrast(100%);*/
    }

.m_headerlogo {
    display: none;
}

.mow_logo {
    width: 100%;
    position: relative;
}

    .mow_logo img {
        width: 115px;
        position: absolute;
        left: 50%;
        top: -22px;
        margin-left: 5px;
    }

.exportbtn {
    position: absolute;
    right: 23px;
    width: 100px;
    z-index: 9;
    margin-top: 15px;
}

.reportexportbtn {
    position: absolute;
    right: 15px;
    width: 100px;
    z-index: 9;
    margin-top: -40px;
}

/* The stop pin. */

.stop-pin {
    /* Position the bubble centred-above its parent. */
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -100%);
    background-color: #fff;
    color: #146FD1;
    overflow: hidden;
    border-radius: 50px;
    box-shadow: 0px 10px 20px 0px rgb(0 0 0 / 20%);
    width: 25px;
    height: 25px;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    border: 3.5px solid #146FD1;
    text-align: center;
    padding-top: 3.5px;
}





.stop-pin-anchor {
    /* Position the div a fixed distance above the tip. */
    position: absolute;
    width: 100%;
    bottom: 8px;
    left: 0;
}
    /* This element draws the tip. */
    .stop-pin-anchor::after {
        content: "";
        position: absolute;
        top: -2px;
        left: 0;
        transform: translate(-50%, 0);
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #146FD1;
    }

    .stop-pin-anchor::before {
        content: "";
        position: absolute;
        top: 0px;
        left: 0;
        transform: translate(-50%, 0%);
        width: 2px;
        height: 0;
        border-top: 0px solid #0A2463;
        border-radius: 7px;
    }

.stoppin-container {
    cursor: auto;
    height: 0;
    position: absolute;
    width: 100%;
    z-index: -999;
}

.stop-pin-anchor div.pin {
    float: left;
    background: #fff;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    margin: -3px -9px -3px -9px;
    padding: 3px;
    display: none;
}

    .stop-pin-anchor div.pin i {
        position: static;
        background-size: 60%;
        margin: auto;
        display: none;
    }


#markertt {
    background: #fff;
    width: 150px;
    position: absolute;
    margin-top: -75px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 0 5px #ccc;
    font-size: .7em;
    font-weight: 500;
    vertical-align: middle;
    padding: 10px;
    color: #0A2463;
    margin-left: -75px;
    z-index: 99999;
}


    #markertt::before {
        content: '';
        position: absolute;
        display: block;
        width: 0px;
        left: 50%;
        bottom: 0;
        border: 8px solid transparent;
        border-bottom: 0;
        border-top: 8px solid #fff;
        transform: translate(-50%, calc(100% + 0px));
    }

.stale-marker {
    width: 12px;
    height: 12px;
    border: 0px solid #eb3a44;
    border-radius: 15px;
    padding: 4px;
    background: #000;
    font-size: 0px;
}

    .stale-marker:after {
        content: "\F64E";
        color: #fff;
        font-family: "Material Design Icons";
        font-size: 10px;
        margin-top: -3px;
        margin-left: -3px;
        display: inline-block;
    }

.captch {
    display: flex;
    justify-content: center;
}
/*Added for reset button in popup*/
.reset-btn {
    background-color: #fff;
    color: #666 !important;
}

    .reset-btn:hover {
        color: #666;
        opacity: .9;
        outline: 1px solid #8491B1;
        border-radius: 3px;
    }


/*-----------------------------Report Dynamic Filter----------------------------------------------*/
.reportFilterDetail {
    position: relative !important;
    width: 200px !important;
    margin-right: 1rem !important;
    /*margin-left: 1rem !important;*/
    left: 15px !important;
}

    .reportFilterDetail[open] {
        z-index: 1 !important;
    }

.dynamicFilterSummary {
    padding: 7px !important;
    cursor: pointer !important;
    border-radius: 5px !important;
    background-color: #fff !important;
    list-style: none !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    font-size: 13px !important;
}

    .dynamicFilterSummary::-webkit-details-marker {
        display: none !important;
    }

.reportFilterDetail[open] .dynamicFilterSummary:before {
    content: "" !important;
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

.dynamicFilterSummary:after {
    content: "" !important;
    display: inline-block !important;
    float: right !important;
    width: 0.5rem !important;
    height: 0.5rem !important;
    border-bottom: 1px solid currentColor !important;
    border-left: 1px solid currentColor !important;
    border-bottom-left-radius: 2px !important;
    transform: rotate(45deg) translate(50%, 0%) !important;
    transform-origin: center center !important;
    transition: transform ease-in-out 100ms !important;
}

.dynamicFilterSummary:focus {
    outline: none !important;
}

.reportFilterDetail[open] .dynamicFilterSummary:after {
    transform: rotate(-45deg) translate(0%, 0%) !important;
}

.dynamicOptionList {
    width: 100% !important;
    background: #fff !important;
    position: absolute !important;
    top: calc(100% + 0.5rem) !important;
    left: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border-radius: 5px !important;
    list-style: none !important;
    overflow-y: auto !important;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2) !important;
}

    .dynamicOptionList ul::-webkit-scrollbar {
        display: none !important;
    }

    .dynamicOptionList li {
        padding: 10px !important;
        border-bottom: 2px solid #eee !important;
        cursor: pointer !important;
        font-size: 12px !important;
        transition: 500ms ease all !important;
    }

        .dynamicOptionList li:hover {
            background: #eee !important;
            color: #000 !important;
        }

    .dynamicOptionList ul li:last-child {
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

.dynamicFilterDivClass {
    padding-left: 15px !important;
}

.plus-icon {
    color: #06e2b3 !important;
    font-size: 13px !important;
    font-weight: bold !important;
    margin-right: 5px !important;
}

.drop-icon {
    font-size: 20px !important;
    font-weight: bold !important;
    margin-left: 5px !important;
    display: block !important;
    transform: rotate(-30deg) !important;
}

.dynamicFilterDiv {
    display: none !important;
}

.showBtn {
    display: flex !important;
    width: 100% !important;
}

    .showBtn button {
        width: 100px !important;
    }

.nextMargin {
    margin-left: -300px !important;
}

.lesMargin {
    margin-left: -150px !important;
}

.moreLessMargin {
    margin-left: -100px !important;
}

.lastMargin {
    margin-left: 0 !important;
}

.ms-options {
    min-height: 200px !important;
    max-height: 230.797px !important;
    width: 300px;
}

.MultiselectClass {
    width: 300px !important;
}

.ms-options-wrap button {
    width: 100% !important;
}

.ms-input-wrap {
    height: 30px !important;
    font-size: 0.75rem !important;
}

.SingleSelect {
    height: 30px !important;
    font-size: 0.75rem !important;
}

.InputDate {
    font-size: 12px !important;
    width: 100% !important;
}


/*============ Fuel upload CSS  ===============*/
.custom-file-attached .file-upload {
    display: block;
    text-align: center;
}

    .custom-file-attached .file-upload .file-select {
        display: block;
        color: #34495e;
        cursor: pointer; /* height:40px;line-height:40px; */
        text-align: left;
        background: #FFFFFF;
        overflow: hidden;
        position: relative;
    }

        .custom-file-attached .file-upload .file-select .file-select-button {
            background: #3151a4;
            color: #ffffff;
            padding: 5px 37px;
            display: inline-block;
            border-radius: 6px; /* height:40px;line-height:40px; */
        }

        .custom-file-attached .file-upload .file-select .file-select-name {
            line-height: 40px;
            display: inline-block;
            padding: 0 10px;
            position: absolute;
            font-size: 12px;
        }

        .custom-file-attached .file-upload .file-select:hover {
            border-color: #34495e;
            transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
        }

            .custom-file-attached .file-upload .file-select:hover .file-select-button {
                background: #f04e4c;
                color: #FFFFFF;
                transition: all .2s ease-in-out;
                -moz-transition: all .2s ease-in-out;
                -webkit-transition: all .2s ease-in-out;
                -o-transition: all .2s ease-in-out;
            }

    .custom-file-attached .file-upload.active .file-select {
        border-color: #3fa46a;
        transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }

        .custom-file-attached .file-upload.active .file-select .file-select-button {
            background: #f04e4c;
            color: #FFFFFF;
            transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
        }

    .custom-file-attached .file-upload .file-select input[type=file] {
        z-index: 100;
        cursor: pointer;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .custom-file-attached .file-upload .file-select.file-select-disabled {
        opacity: 0.65;
    }

        .custom-file-attached .file-upload .file-select.file-select-disabled:hover {
            cursor: default;
            display: block;
            border: 2px solid #dce4ec;
            color: #34495e;
            cursor: pointer;
            height: 40px;
            line-height: 40px;
            margin-top: 5px;
            text-align: left;
            background: #FFFFFF;
            overflow: hidden;
            position: relative;
        }

            .custom-file-attached .file-upload .file-select.file-select-disabled:hover .file-select-button {
                background: #dce4ec;
                color: #666666;
                padding: 0 10px;
                display: inline-block;
                height: 40px;
                line-height: 40px;
            }

            .custom-file-attached .file-upload .file-select.file-select-disabled:hover .file-select-name {
                line-height: 40px;
                display: inline-block;
                padding: 0 10px;
            }

.custom-file-attached-tbl .file-upload-one {
    display: block;
    text-align: center;
}

    .custom-file-attached-tbl .file-upload-one .file-select {
        display: block;
        color: #34495e;
        cursor: pointer;
        font-size: .75rem;
        text-align: left;
        background: transparent;
        overflow: hidden;
        position: relative;
    }

        .custom-file-attached-tbl .file-upload-one .file-select .file-select-button {
            background: #13eeb5;
            color: #0A2463;
            padding: 5px 18px;
            display: inline-block;
            border-radius: 3px;
            font-size: .75rem;
            text-transform: uppercase;
            font-weight: 500;
            border: 2px solid transparent;
        }

        .custom-file-attached-tbl .file-upload-one .file-select .file-select-name {
            line-height: 2;
            display: inline-block;
            padding: 0 .75rem;
            position: absolute;
            font-size: 12px;
        }

        .custom-file-attached-tbl .file-upload-one .file-select:hover {
            border-color: #34495e;
            transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
        }

            .custom-file-attached-tbl .file-upload-one .file-select:hover .file-select-button {
                background: rgb(11,233,175);
                color: #0A2463;
                transition: all .2s ease-in-out;
                -moz-transition: all .2s ease-in-out;
                -webkit-transition: all .2s ease-in-out;
                -o-transition: all .2s ease-in-out;
                border: 2px solid #999;
            }

    .custom-file-attached-tbl .file-upload-one.active .file-select {
        border-color: #3fa46a;
        transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }

        .custom-file-attached-tbl .file-upload-one.active .file-select .file-select-button {
            background: #EF3964;
            color: #ffffff;
            transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
        }

    .custom-file-attached-tbl .file-upload-one .file-select input[type=file] {
        z-index: 100;
        cursor: pointer;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .custom-file-attached-tbl .file-upload-one .file-select.file-select-disabled {
        opacity: 0.65;
    }

        .custom-file-attached-tbl .file-upload-one .file-select.file-select-disabled:hover {
            cursor: default;
            display: block;
            border: 2px solid #dce4ec;
            color: #34495e;
            cursor: pointer;
            height: 40px;
            line-height: 2;
            margin-top: 5px;
            text-align: left;
            background: #0A2463;
            overflow: hidden;
            position: relative;
        }

            .custom-file-attached-tbl .file-upload-one .file-select.file-select-disabled:hover .file-select-button {
                background: #dce4ec;
                color: #666666;
                padding: 0 .75rem;
                display: inline-block;
                height: 40px;
                line-height: 2;
            }

            .custom-file-attached-tbl .file-upload-one .file-select.file-select-disabled:hover .file-select-name {
                line-height: 2;
                display: inline-block;
                padding: 0 .75rem;
            }


.custom-file-attached-tbl .file-upload-two {
    display: block;
    text-align: center;
}

    .custom-file-attached-tbl .file-upload-two .file-select {
        display: block;
        color: #34495e;
        cursor: pointer;
        font-size: .75rem;
        text-align: left;
        background: transparent;
        overflow: hidden;
        position: relative;
    }

        .custom-file-attached-tbl .file-upload-two .file-select .file-select-button {
            background: #13eeb5;
            color: #0A2463;
            padding: 5px 18px;
            display: inline-block;
            border-radius: 3px;
            font-size: .75rem;
            text-transform: uppercase;
            font-weight: 500;
            border: 2px solid transparent;
        }

        .custom-file-attached-tbl .file-upload-two .file-select .file-select-name {
            line-height: 2;
            display: inline-block;
            padding: 0 .75rem;
            position: absolute;
            font-size: 12px;
        }

        .custom-file-attached-tbl .file-upload-two .file-select:hover {
            border-color: #34495e;
            transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
        }

            .custom-file-attached-tbl .file-upload-two .file-select:hover .file-select-button {
                background: rgb(11,233,175);
                color: #0A2463;
                transition: all .2s ease-in-out;
                -moz-transition: all .2s ease-in-out;
                -webkit-transition: all .2s ease-in-out;
                -o-transition: all .2s ease-in-out;
                border: 2px solid #999;
            }

    .custom-file-attached-tbl .file-upload-two.active .file-select {
        border-color: #3fa46a;
        transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }

        .custom-file-attached-tbl .file-upload-two.active .file-select .file-select-button {
            background: #EF3964;
            color: #ffffff;
            transition: all .2s ease-in-out;
            -moz-transition: all .2s ease-in-out;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
        }

    .custom-file-attached-tbl .file-upload-two .file-select input[type=file] {
        z-index: 100;
        cursor: pointer;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .custom-file-attached-tbl .file-upload-two .file-select.file-select-disabled {
        opacity: 0.65;
    }

        .custom-file-attached-tbl .file-upload-two .file-select.file-select-disabled:hover {
            cursor: default;
            display: block;
            border: 2px solid #dce4ec;
            color: #34495e;
            cursor: pointer;
            height: 40px;
            line-height: 2;
            margin-top: 5px;
            text-align: left;
            background: #0A2463;
            overflow: hidden;
            position: relative;
        }

            .custom-file-attached-tbl .file-upload-two .file-select.file-select-disabled:hover .file-select-button {
                background: #dce4ec;
                color: #666666;
                padding: 0 .75rem;
                display: inline-block;
                height: 40px;
                line-height: 2;
            }

            .custom-file-attached-tbl .file-upload-two .file-select.file-select-disabled:hover .file-select-name {
                line-height: 2;
                display: inline-block;
                padding: 0 .75rem;
            }


.btn.link-btn {
    font-size: inherit;
    color: #007bff;
}

    .btn.link-btn:hover {
        color: #0056b3;
    }

    .btn.link-btn:focus {
        outline: 0;
        box-shadow: none;
    }

.modal-footer .btn {
    padding: .375rem .75rem;
}

.range-input {
    width: 90%;
}

input[type=range] {
    height: 32px;
    -webkit-appearance: none;
    margin: 10px 0;
    width: 90%;
}

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 8px;
        cursor: pointer;
        box-shadow: 0px 0px 0px #000000;
        background: #83848A;
        border-radius: 5px;
        border: 0px solid #000000;
    }

    input[type=range]::-webkit-slider-thumb {
        box-shadow: 0px 0px 0px #83848A;
        border: 0px solid #83848A;
        height: 15px;
        width: 15px;
        border-radius: 11px;
        background: #2BAB9A;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -4px;
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: #83848A;
    }

    input[type=range]::-moz-range-track {
        width: 100%;
        height: 8px;
        cursor: pointer;
        box-shadow: 0px 0px 0px #000000;
        background: #83848A;
        border-radius: 5px;
        border: 0px solid #000000;
    }

    input[type=range]::-moz-range-thumb {
        box-shadow: 0px 0px 0px #83848A;
        border: 0px solid #83848A;
        height: 26px;
        width: 26px;
        border-radius: 11px;
        background: #2BAB9A;
        cursor: pointer;
    }

    input[type=range]::-ms-track {
        width: 100%;
        height: 10px;
        cursor: pointer;
        animate: 0.2s;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }

    input[type=range]::-ms-fill-lower {
        background: #83848A;
        border: 0px solid #000000;
        border-radius: 10px;
        box-shadow: 0px 0px 0px #000000;
    }

    input[type=range]::-ms-fill-upper {
        background: #83848A;
        border: 0px solid #000000;
        border-radius: 10px;
        box-shadow: 0px 0px 0px #000000;
    }

    input[type=range]::-ms-thumb {
        margin-top: 1px;
        box-shadow: 0px 0px 0px #83848A;
        border: 0px solid #83848A;
        height: 26px;
        width: 26px;
        border-radius: 11px;
        background: #2BAB9A;
        cursor: pointer;
    }

    input[type=range]:focus::-ms-fill-lower {
        background: #83848A;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: #83848A;
    }

.fuel-indicator {
}

.label-range {
    font-size: 14px !important;
    margin-top: -20px;
    color: black !important;
}


/*============ Fuel upload CSS ===============*/

.pin-label {
    margin-bottom: 0px;
}

.markLabels {
    margin-top: -40px !important;
    margin-left: -15px !important;
    position: absolute !important;
    font-weight: bold;
    background-color: white;
    padding: 1px !important;
}

.cnt-label {
    font-size: .75em !important;
    min-height: 18px;
    display: block;
    margin-left: 4px !important;
    line-height: 1.5;
}

.route-clone-lbl� {
    float: left !important;
}

.input-group-append .input-group-text {
    padding: 0 0.75rem;
    color: #495057;
}

.input-group-text {
    border: 1px solid #ced4da;
}

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

p.error {
    color: #EF3964 !important;
    font-size: .7em !important;
    opacity: 1 !important;
}

.btn-confirm {
    padding: 5px 25px;
}

.organization-search {
    padding: 0px 0px 10px 0px;
}

    .organization-search input {
        padding: 0px 0px 0px 10px;
    }

.priority span {
    position: absolute;
    margin: -2px 0px 0px 7px;
}


.disabled-text {
    color: #08113b !important
}

.booking-status {
    color: #fff;
    padding: 4px;
    border-radius: 4px;
    display: block;
}

.danger-section {
    position: relative;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 0.5rem !important;
    padding-left: 0.7em !important;
}

/*Doted polyline start*/
.doted-polyline-hover {
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.map-polyline-center {
    position: absolute;
    height: 24px;
    z-index: 9;
    background: #8491B1;
    color: #fff;
    width: 300px;
    padding: 3px;
    border-radius: 5px;
    top: 5px !important;
}

.polyline-clear {
}

.polyline-apply {
}

.polyline-revert {
    background-color: #fff;
    color: #666;
}

    .polyline-revert:hover {
        color: #999;
        opacity: .9;
        border: 2px solid #ccc;
    }

.disable-div {
    pointer-events: none;
    opacity: 0.5
}

.enable-div {
    pointer-events: auto;
    opacity: 1
}


#vehicleDriverPerReportlist_wrapper {
    clear: none;
}

.high-risk-event {
    height: 7px;
    width: 7px;
    background-color: #ed1414;
    border-radius: 50%;
    display: inline-block;
}

.low-risk-event {
    height: 7px;
    width: 7px;
    background-color: #028102;
    border-radius: 50%;
    display: inline-block;
}


/*Driver fatigue dashboard*/
.df-kpi-section {
    display: flex;
    justify-content: space-between;
}

.df-kpi {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex: 1;
    margin: 0 10px;
}

    .df-kpi h3 {
        font-size: 1.1em;
        font-weight: 500;
        color: #333;
        margin: 0 0 10px;
        text-transform: uppercase;
    }

    .df-kpi p {
        font-size: 24px;
        font-weight: bold;
        color: #212529;
        margin: 0;
    }


.df-trend-graph {
    height: 500px;
    width: 100%;
    position: relative;
    margin: auto;
}

#sd-fatigueAlarmBreakdown-container {
    width: 300px;
    height: 350px;
    margin: auto;
}

.weekday-df-trend-graph canvas#sd-weekdayTrendsChart {
    height: 400px !important;
    width: 100% !important;
}

.default-font-size {
    font-size: 0.875rem;
}

.delete .mdi.mdi-close-circle:before {
    color: red;
}

.default-font-size {
    font-size: 0.875rem;
}

.extended-multi-select .ms-active .ms-options {
    position: inherit;
    width: auto;
}

div[class="gm-style-iw-t"]:has(#track-trip-dialog-form) {
    bottom: 50px !important;
}

div[role="dialog"]:has(#track-trip-dialog-form) {
    /* Your custom styles */
    height: auto !important;
    width: auto !important;
    padding: 15px !important;
}


    div[role="dialog"]:has(#track-trip-dialog-form) .gm-style-iw-chr {
        display: none;
    }

#track-trip-dialog-form .header {
    font-weight: bold;
    color: #0b0b0b;
}

#track-trip-dialog-form .title {
    font-weight: bold;
    font-size: 1.00em;
}

#track-trip-dialog-form .value {
    padding-left: 15px;
    color: #0e0e0e;
    font-size: 1.00em;
}

.default-font-size {
    font-size: 0.875rem;
}

.text-start {
    text-align: left;
}

.edit .mdi.mdi-pencil-circle:before {
    color: #146fd1;
}


/*blinking badge of incident*/
.date-pill {
    display: inline-block;
    padding: 4px 12px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    font-size: 13px;
}

.badge-blink {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    background-color: #f30a27;
    color: white;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
    animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(1.1);
    }
}
.polygon-hover {
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Live map overlays: legend top-right, bottom bar */
.tracking .map-container {
    position: relative;
    flex: 1;
    min-height: 100%;
}

    .tracking .map-container .map {
        width: 100%;
        height: 100%;
        min-height: 50vh;
    }

.map-legend-top {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    pointer-events: auto;
}

    .map-legend-top img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

/* Hidden by default; shown only for Live Track via JS */
#mapLegendTop {
    display: none;
    margin: 10px 10px 0px 0px;
}

#mapBottomBar {
    display: none;
    position: absolute;
    bottom: 0;
    left: 50% !important;
    transform: translateX(-50%);
    width: 80%; /* or any width you want */
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
    z-index: 5;
}

.map-legend-top .active-vehicle-count {
    min-width: 1.5em;
    text-align: right;
}

.map-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 8px 16px;
    background: rgba(56, 124, 255, 0.9);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    text-align: center;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}