:root {
    --primary-color: #009688;
}

.btn-group.btn-group-wrapper label.active {
    background-color: #2196f3;
    color: white;
}

a.navbar-brand {
    user-select: none;
    margin: 0;
    /*padding: 5px 15px;*/
    padding: 0 0 0 10px;
    height: 36px;
    width: 245px;
}

    a.navbar-brand img {
        height: auto;
        object-fit: cover;
        width: auto;
        max-width: 220px;
        max-height: 100%;
    }
.onbehalf {
   font-size: 11px;
   font-weight: 600;
}
.header-message {
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 5px;
    line-height: 18px;
    height: 100%;
    display: table;
    margin-top: inherit;
    margin-bottom: inherit;
}

    .header-message div {
        display: table-cell;
        vertical-align: middle;
    }

.panel-body.summary .item {
    padding-top: 10px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    min-height: 61px;
}

    .panel-body.summary .item .text-muted {
        margin-bottom: 0px;
    }

    .panel-body.summary .item:last-child {
        border: none;
        padding-bottom: 0;
    }

.input-group-addon {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.modal-title {
    font-weight: 600;
}

.toggle-switch {
    margin-top: 10px;
    margin-bottom: 10px;
}

.relative-99 {
    position: relative;
    z-index: 99;
}

    .toggle-switch label {
        min-height: 20px;
        margin-bottom: 0;
        font-weight: 400;
        cursor: pointer;
        user-select: none;
        color: #333 !important;
    }

.ops-tile.bg-opsicorp .tile-left {
    display: flex;
    justify-content: center;
}
/*hotel api*/
.form-control-feedback-sm {
    width: 34px;
    height: 32px;
    line-height: 32px;
}

.dot-divider {
    font-size: 80%;
    margin-left: 3px;
    margin-right: 3px;
}

.btn-xxs,
.btn-group-xxs > .btn {
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.5;
    border-radius: 1px;
}

.required-star {
    color: #ff4500;
    font-weight: 600;
}
/*End Hotel*/
.header {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ------------------------------------------------------------------------------
*
*  # Utilites
*
*  Additional animations, transitions, transforms and other utilities
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
.rotate-45 {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.rotate-90 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.rotate-180 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.rotate-45-inverse {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.rotate-90-inverse {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.rotate-180-inverse {
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.spinner {
    display: inline-block;
    -webkit-animation: rotation 1s linear infinite;
    -o-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

.spinner-reverse {
    display: inline-block;
    -webkit-animation: rotation_reverse 1s linear infinite;
    -o-animation: rotation_reverse 1s linear infinite;
    animation: rotation_reverse 1s linear infinite;
}

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

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

@-moz-keyframes rotation {
    0% {
        -moz-transform: rotate(0deg);
    }

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

@-ms-keyframes rotation {
    0% {
        -ms-transform: rotate(0deg);
    }

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

@-o-keyframes rotation {
    0% {
        -o-transform: rotate(0deg);
    }

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

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

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

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

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

@-moz-keyframes rotation_reverse {
    0% {
        -moz-transform: rotate(0deg);
    }

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

@-ms-keyframes rotation_reverse {
    0% {
        -ms-transform: rotate(0deg);
    }

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

@-o-keyframes rotation_reverse {
    0% {
        -o-transform: rotate(0deg);
    }

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

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

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

@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes bounceOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes horizontal-bounce {
    0% {
        transform: translateX(0);
    }

    10% {
        transform: translateX(-5px);
    }

    30% {
        transform: translateX(5px);
    }

    40% {
        transform: translateX(0);
    }
}
/* Add delay after each iteration */
@-webkit-keyframes horizontal-delay {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(40%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.col-5 .col-lg-1, .col-5 .col-lg-10, .col-5 .col-lg-11, .col-5 .col-lg-12, .col-5 .col-lg-2, .col-5 .col-lg-3, .col-5 .col-lg-4, .col-5 .col-lg-5, .col-5 .col-lg-6, .col-5 .col-lg-7, .col-5 .col-lg-8, .col-5 .col-lg-9, .col-5 .col-md-1, .col-5 .col-md-10, .col-5 .col-md-11, .col-5 .col-md-12, .col-5 .col-md-2, .col-5 .col-md-3, .col-5 .col-md-4, .col-5 .col-md-5, .col-5 .col-md-6, .col-5 .col-md-7, .col-5 .col-md-8, .col-5 .col-md-9, .col-5 .col-sm-1, .col-5 .col-sm-10, .col-5 .col-sm-11, .col-5 .col-sm-12, .col-5 .col-sm-2, .col-5 .col-sm-3, .col-5 .col-sm-4, .col-5 .col-sm-5, .col-5 .col-sm-6, .col-5 .col-sm-7, .col-5 .col-sm-8, .col-5 .col-sm-9, .col-5 .col-xs-1, .col-5 .col-xs-10, .col-5 .col-xs-11, .col-5 .col-xs-12, .col-5 .col-xs-2, .col-5 .col-xs-3, .col-5 .col-xs-4, .col-5 .col-xs-5, .col-5 .col-xs-6, .col-5 .col-xs-7, .col-5 .col-xs-8, .col-5 .col-xs-9 {
    padding-right: 5px;
    padding-left: 5px;
}

.col-5 .panel {
    margin-bottom: 10px;
}


.panel-heading {
    padding: 15px 15px !important;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #ddd;
}

.panel-body {
    border: 1px solid #ddd;
}

.table-striped {
    border-top: 1px solid #ddd;
}

.panel-footer {
    padding-left: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    position: relative;
    padding: 7px 20px;
    background-color: #fcfcfc;
    border: 1px solid #ddd;
    border-top: none;
}

.passangers-label a {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.policy-label-container {
    display: flex;
    flex-wrap: wrap;
    padding: 8px;
}

.policy-label-container span {
    margin-right: 4px;
    margin-bottom: 6px;
}

.label-flat {
    background-color: transparent;
}

.label-success {
    border-color: #4CAF50;
}

.checker span {
    -webkit-transition: border-color ease-in-out 0.15s;
    -o-transition: border-color ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s;
}

    .checker span:after {
        -webkit-transition: all ease-in-out 0.15s;
        -o-transition: all ease-in-out 0.15s;
        transition: all ease-in-out 0.15s;
    }

.dropdown-menu > li > label .checker,
.dropdown-menu > li > label .choice,
.dropdown-menu > li > label > input[type=checkbox],
.dropdown-menu > li > label > input[type=radio] {
    left: 15px;
    top: auto;
    margin-top: 1px;
}

.input-group-addon .checker,
.input-group-addon .choice {
    display: block;
    margin-top: 1px;
}

.navbar-inverse .navbar-nav .checker > span,
.navbar-inverse .navbar-nav .choice > span {
    border-color: #fff;
    color: #fff;
}

/* ------------------------------------------------------------------------------
*
*  # Uniform form inputs plugin
*
*  Styles for uniform.min.js - form components styling
*
*  Version: 1.2
*  Latest update: Aug 10, 2016
*
* ---------------------------------------------------------------------------- */
.checker {
    position: relative;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
}

    .checker,
    .checker span,
    .checker input {
        width: 18px;
        height: 18px;
    }

        .checker span {
            color: #455A64;
            border: 2px solid #607D8B;
            display: inline-block;
            text-align: center;
            position: relative;
            border-radius: 2px;
        }

            .checker span:after {
                content: "\e600";
                font-family: 'icomoon';
                font-size: 16px;
                line-height: 1;
                position: absolute;
                top: -1px;
                left: -1px;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                opacity: 0;
                filter: alpha(opacity=0);
            }

            .checker span.checked:after {
                opacity: 1;
                filter: alpha(opacity=100);
            }

        .checker input[type=checkbox],
        .choice input[type=radio] {
            border: none;
            background: none;
            display: -moz-inline-box;
            display: inline-block;
            margin: 0;
            vertical-align: top;
            cursor: pointer;
            position: absolute;
            top: -2px;
            left: -2px;
            z-index: 2;
            opacity: 0;
            filter: alpha(opacity=0);
        }

.checkbox .checker,
.checkbox-inline .checker {
    position: absolute;
    top: 1px;
    left: 0;
}

.form-horizontal .checkbox .checker,
.form-horizontal .checkbox-inline .checker {
    top: 9px;
}

.checkbox-right .checker {
    left: auto;
    right: 0;
}

.checker.disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

    .checker.disabled,
    .checker.disabled input[type=checkbox] {
        cursor: not-allowed;
    }

.checkbox > label:active .checker.disabled span:after,
.checkbox-inline:active .checker.disabled span:after {
    opacity: 0;
    filter: alpha(opacity=0);
}

.checkbox > label:active .checker.disabled span.checked:after,
.checkbox-inline:active .checker.disabled span.checked:after {
    opacity: 1;
    filter: alpha(opacity=100);
}

.checker[class*=border-] span {
    border-color: inherit;
    color: inherit;
}

.dropdown-menu > .active:not(.disabled) .checker span,
.dropdown-menu[class*=bg-] .checker span,
.page-header-inverse .form-group > .checkbox .checker span,
.page-header-inverse .form-group > .checkbox-inline .checker span,
.navbar-inverse .navbar-form .form-group > .checkbox .checker span,
.navbar-inverse .navbar-form .form-group > .checkbox-inline .checker span,
.sidebar:not(.sidebar-default) .checkbox .checker span,
.sidebar:not(.sidebar-default) .checkbox-inline .checker span {
    border-color: #fff;
    color: #fff;
}

.bg-danger {
    background-color: #f04b46;
}

.add-ssr-flight {
    background-color: #fff;
    float: right;
    padding: 1px 2px;
    font-size: 85%;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding-right: 5px
}

.choice {
    position: relative;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 100%;
}

    .choice,
    .choice span,
    .choice input {
        width: 18px;
        height: 18px;
    }

        .choice span {
            border: 2px solid #607D8B;
            display: -moz-inline-box;
            display: inline-block;
            border-radius: 100%;
            text-align: center;
            position: relative;
        }

            .choice span:after {
                content: "";
                position: absolute;
                top: 3px;
                left: 3px;
                border: 4px solid;
                border-color: inherit;
                width: 0;
                height: 0;
                border-radius: 100%;
                opacity: 0;
                filter: alpha(opacity=0);
            }

            .choice span.checked:after {
                opacity: 1;
                filter: alpha(opacity=100);
            }

.radio .choice,
.radio-inline .choice {
    position: absolute;
    top: 1px;
    left: 0;
}

.form-horizontal .radio .choice,
.form-horizontal .radio-inline .choice {
    top: 9px;
}

.radio-right .choice {
    left: auto;
    right: 0;
}

.choice.disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

    .choice.disabled,
    .choice.disabled input[type=radio] {
        cursor: not-allowed;
    }

.radio > label:active .choice.disabled span:after,
.radio-inline:active .choice.disabled span:after {
    opacity: 0;
    filter: alpha(opacity=0);
}

.radio > label:active .choice.disabled span.checked:after,
.radio-inline:active .choice.disabled span.checked:after {
    opacity: 1;
    filter: alpha(opacity=100);
}

.radio-inline label{
    cursor: pointer;
}

.choice[class*=border-] span {
    border-color: inherit;
}

    .choice[class*=border-] span:after {
        border-color: inherit;
    }

.dropdown-menu > .active .choice span,
.dropdown-menu[class*=bg-] .choice span,
.page-header-inverse .form-group > .radio .choice span,
.page-header-inverse .form-group > .radio-inline .choice span,
.navbar-inverse .navbar-form .form-group > .radio .choice span,
.navbar-inverse .navbar-form .form-group > .radio-inline .choice span,
.sidebar:not(.sidebar-default) .radio .choice span,
.sidebar:not(.sidebar-default) .radio-inline .choice span {
    border-color: #fff;
}

.uploader {
    width: 100%;
    position: relative;
    display: table;
}

    .uploader .filename {
        color: #999999;
        height: 36px;
        padding: 7px 12px;
        cursor: pointer;
        width: 100%;
        display: table-cell;
        cursor: default;
        border: 1px solid #ddd;
        border-right: 0;
        background-color: #fff;
        text-align: left;
        /* ReSharper disable once InvalidValue */
        word-break: break-word;
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }

    .uploader .action {
        display: table-cell;
        cursor: pointer;
        z-index: 1;
        border-radius: 0;
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }

        .uploader .action.btn {
            margin-top: 0;
        }

    .uploader:hover .action,
    .uploader:focus .action {
        -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.05) inset;
        box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.05) inset;
    }

        .uploader:hover .action.btn-default,
        .uploader:focus .action.btn-default {
            -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.01) inset;
            box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.01) inset;
        }

    .uploader:active .action {
        -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.1) inset;
    }

        .uploader:active .action.btn-default {
            -webkit-box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.03) inset;
            box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.03) inset;
        }

    .uploader input[type=file] {
        width: 100%;
        margin-top: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        height: 36px;
        border: 0;
        cursor: pointer;
        z-index: 10;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .uploader.disabled .filename {
        background-color: #fafafa;
        cursor: not-allowed;
    }

.uploader-lg input[type=file],
.uploader-lg .action,
.uploader-lg .filename {
    height: 40px;
}

.uploader-lg .filename {
    padding: 9px 15px;
    font-size: 14px;
    line-height: 1.4285715;
}

.uploader-sm input[type=file],
.uploader-sm .action,
.uploader-sm .filename {
    height: 34px;
}

.uploader-sm .filename {
    padding: 6px 11px;
    font-size: 12px;
    line-height: 1.6666667;
}

.uploader-xs input[type=file],
.uploader-xs .action,
.uploader-xs .filename {
    height: 32px;
}

.uploader-xs .filename {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.6666667;
}
/* ------------------------------------------------------------------------------
*
*  # Navs related component
*
*  Overrides for navs related bootstrap component
*
*  Version: 1.2
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */
.nav > li > a:focus {
    outline: 0;
}

.nav > li.disabled > a > .badge,
.nav > li.disabled > a > .label,
.nav > li.disabled > a > .status-mark,
.nav > li.disabled > a > img {
    opacity: 0.75;
    filter: alpha(opacity=75);
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background-color: transparent;
    border-color: transparent;
    color: #333333;
}

.nav.nav-lg > li > a {
    padding: 11px 20px;
}

.nav.nav-sm > li > a {
    padding: 7px 15px;
}

.nav.nav-xs > li > a {
    padding: 5px 10px;
}

.nav .tab-img {
    max-height: 20px;
    display: inline-block;
    vertical-align: top;
}

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

    .nav-tabs > li {
        float: none;
    }

        .nav-tabs > li > a {
            margin-right: 0;
            color: #888;
            border-radius: 0;
        }

            .nav-tabs > li > a:hover,
            .nav-tabs > li > a:focus {
                background-color: transparent;
                border-color: transparent;
                color: #333333;
            }

            .nav-tabs > li > a > [class*=icon-].pull-right {
                float: right;
                margin-top: 2px;
            }

    .nav-tabs.nav-justified > li > a {
        border-radius: 0;
        margin-bottom: 0;
    }

        .nav-tabs.nav-justified > li > a:hover,
        .nav-tabs.nav-justified > li > a:focus {
            border-bottom-color: #ddd;
        }


    .nav-tabs.nav-justified.nav-tabs-top {
        border-bottom: 1px solid #ddd;
    }

        .nav-tabs.nav-justified.nav-tabs-top > li > a,
        .nav-tabs.nav-justified.nav-tabs-top > li > a:hover,
        .nav-tabs.nav-justified.nav-tabs-top > li > a:focus {
            border: 0;
        }

    .nav-tabs.nav-justified.nav-tabs-bottom {
        border-bottom: 1px solid #ddd;
    }

    .nav-tabs.nav-justified.nav-tabs-highlight > li > a,
    .nav-tabs.nav-justified.nav-tabs-highlight > li > a:hover,
    .nav-tabs.nav-justified.nav-tabs-highlight > li > a:focus {
        border-top-width: 2px;
    }


.chart-height {
    text-align: center;
    height: 239px;  
    line-height: 200px;
}

.chart-height.x2 {
    height: 239px;
    line-height: 245px;
}

    .chart-height.x3 {
        height: 443px;
        line-height: 443px;
    }
.dashboard-map {
    height: 500px;
}




.nav-tabs.nav-tabs-highlight > li > a,
.nav-tabs.nav-tabs-highlight > li > a:hover,
.nav-tabs.nav-tabs-highlight > li > a:focus {
    border-top-width: 2px;
}

.nav-tabs.nav-tabs-highlight > li > a.badge-danger {
    color: white;
}

.nav-tabs.nav-tabs-highlight > li:hover > a.badge-danger,
.nav-tabs.nav-tabs-highlight > li.active > a.badge-danger {
    color: #333333;
}

.nav-tabs.nav-tabs-highlight > li.active > a,
.nav-tabs.nav-tabs-highlight > li.active > a:hover,
.nav-tabs.nav-tabs-highlight > li.active > a:focus {
    border-top-color: #2196F3;
}



.nav-tabs.nav-tabs-top > li {
    margin-bottom: 0;
}

    .nav-tabs.nav-tabs-top > li > a,
    .nav-tabs.nav-tabs-top > li > a:hover,
    .nav-tabs.nav-tabs-top > li > a:focus {
        border: 0;
    }

        .nav-tabs.nav-tabs-top > li > a:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
        }

        .nav-tabs.nav-tabs-top > li.open > a:after,
        .nav-tabs.nav-tabs-top > li > a:hover:after,
        .nav-tabs.nav-tabs-top > li > a:focus:after {
            background-color: #ddd;
        }

    .nav-tabs.nav-tabs-top > li.active > a:after {
        background-color: #F06292;
    }

    .nav-tabs.nav-tabs-top > li.active > a,
    .nav-tabs.nav-tabs-top > li.active > a:hover,
    .nav-tabs.nav-tabs-top > li.active > a:focus {
        background-color: transparent;
    }

.nav-tabs.nav-tabs-top.top-divided {
    border-bottom-color: transparent;
}



.nav-tabs.nav-tabs-bottom > li {
    margin-bottom: 0;
}

    .nav-tabs.nav-tabs-bottom > li > a {
        border-width: 0;
        margin-bottom: -1px;
    }

        .nav-tabs.nav-tabs-bottom > li > a:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
        }

    .nav-tabs.nav-tabs-bottom > li.active > a:after {
        background-color: #F06292;
    }

    .nav-tabs.nav-tabs-bottom > li.active > a,
    .nav-tabs.nav-tabs-bottom > li.active > a:hover,
    .nav-tabs.nav-tabs-bottom > li.active > a:focus {
        background-color: transparent;
        border-width: 0;
    }

.nav-tabs.nav-tabs-bottom.bottom-divided {
    border-bottom-color: transparent;
}


.nav-tabs[class*=bg-] {
    border-bottom: 0;
}

    .nav-tabs[class*=bg-] > li {
        margin-bottom: 0;
    }

        .nav-tabs[class*=bg-] > li > a {
            color: #fff;
            border-width: 0;
        }

            .nav-tabs[class*=bg-] > li > a:hover,
            .nav-tabs[class*=bg-] > li > a:focus {
                background-color: rgba(0, 0, 0, 0.05);
            }

        .nav-tabs[class*=bg-] > li.open:not(.active) > a {
            color: #fff;
            background-color: rgba(0, 0, 0, 0.05);
        }

    .nav-tabs[class*=bg-] > .active > a,
    .nav-tabs[class*=bg-] > .active > a:hover,
    .nav-tabs[class*=bg-] > .active > a:focus {
        background-color: #245b8a;
        border-width: 0;
        color: #fff;
    }

    .nav-tabs[class*=bg-] > .disabled > a,
    .nav-tabs[class*=bg-] > .disabled > a:hover,
    .nav-tabs[class*=bg-] > .disabled > a:focus {
        color: rgba(255, 255, 255, 0.5);
    }


.tab-content-bordered .nav-tabs[class*=bg-] {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}


.nav-tabs.nav-tabs-solid > li > a {
    color: #333333;
}

    .nav-tabs.nav-tabs-solid > li > a,
    .nav-tabs.nav-tabs-solid > li > a:hover,
    .nav-tabs.nav-tabs-solid > li > a:focus {
        border-color: transparent;
    }

.nav-tabs.nav-tabs-solid > .active > a,
.nav-tabs.nav-tabs-solid > .active > a:hover,
.nav-tabs.nav-tabs-solid > .active > a:focus {
    background-color: #2196F3;
    border-color: #2196F3;
    color: #fff;
}


.nav-tabs.nav-tabs-solid {
    background-color: #fafafa;
    border: 0;
}

    .nav-tabs.nav-tabs-solid > li {
        margin-bottom: 0;
    }

        .nav-tabs.nav-tabs-solid > li > a:hover,
        .nav-tabs.nav-tabs-solid > li > a:focus {
            background-color: #f5f5f5;
        }

    .nav-tabs.nav-tabs-solid > .open:not(.active) > a {
        background-color: #f5f5f5;
        border-color: transparent;
    }


.nav-tabs.nav-tabs-icon > li > a > i {
    margin-right: 7px;
}


.nav-tabs.nav-tabs-icon > li > a {
    padding-bottom: 9.5px;
}

    .nav-tabs.nav-tabs-icon > li > a > i {
        display: block;
        margin: 5px 0;
    }

.nav-tabs.nav-tabs-icon.nav-lg > li > a {
    padding-bottom: 10.5px;
}

.nav-tabs.nav-tabs-icon.nav-sm > li > a {
    padding-bottom: 7.5px;
}

.nav-tabs.nav-tabs-icon.nav-xs > li > a {
    padding-bottom: 5.5px;
}



.nav-tabs {
    font-size: 0;
}

    .nav-tabs > li {
        display: inline-block;
        font-size: 14px;
    }

.position-absolute {
    position: absolute;
}

@media (min-width: 769px) {
    .nav-tabs-vertical {
        display: table;
        width: 100%;
    }

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

    .position-absolute-sm {
        position: absolute;
    }

    .nav-tabs-vertical .nav-tabs {
        display: table-cell;
        border-bottom: 0;
        width: 300px;
    }

        .nav-tabs-vertical .nav-tabs > li {
            display: block;
            margin-bottom: 0;
        }

    .nav-tabs-vertical .nav-tabs-solid > li:last-child > a:after {
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .nav-tabs-vertical .nav-tabs[class*=bg-] > li:first-child > a {
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
    }

    .nav-tabs-vertical .nav-tabs[class*=bg-] > li:last-child > a {
        border-bottom-right-radius: 3px;
        border-bottom-left-radius: 3px;
    }

    .nav-tabs-vertical .tab-content {
        display: table-cell;
    }

        .nav-tabs-vertical .tab-content > .has-padding {
            padding: 0;
            padding-top: 10.5px;
        }

    .nav-tabs-vertical.tab-content-bordered .tab-content {
        border-top-width: 1px;
    }

    .nav-tabs-left .nav-tabs {
        border-right: 1px solid #ddd;
    }

        .nav-tabs-left .nav-tabs > li {
            margin-right: -1px;
        }

            .nav-tabs-left .nav-tabs > li.active > a,
            .nav-tabs-left .nav-tabs > li.active > a:hover,
            .nav-tabs-left .nav-tabs > li.active > a:focus {
                border-bottom-color: #ddd;
                border-right-color: transparent;
            }

        .nav-tabs-left .nav-tabs.nav-tabs-component > li > a {
            border-radius: 3px 0 0 3px;
        }

    .nav-tabs-left .nav-tabs-highlight > li > a,
    .nav-tabs-left .nav-tabs-highlight > li > a:hover,
    .nav-tabs-left .nav-tabs-highlight > li > a:focus {
        border-top-width: 1px;
        border-left-width: 2px;
    }

    .nav-tabs-left .nav-tabs-highlight > li.active > a,
    .nav-tabs-left .nav-tabs-highlight > li.active > a:hover,
    .nav-tabs-left .nav-tabs-highlight > li.active > a:focus {
        border-top-color: #ddd;
        border-left-color: #EC407A;
    }

    .nav-tabs-left .nav-tabs-top,
    .nav-tabs-left .nav-tabs-bottom {
        padding-right: 20px;
    }

    .nav-tabs-left .top-divided,
    .nav-tabs-left .bottom-divided {
        padding-right: 0;
        border-right-width: 0;
    }

    .nav-tabs-left .nav-tabs-solid,
    .nav-tabs-left .nav-tabs[class*=bg-] {
        border-right: 0;
        border-radius: 3px;
    }

        .nav-tabs-left .nav-tabs-solid > li,
        .nav-tabs-left .nav-tabs[class*=bg-] > li {
            margin-right: 0;
        }

    .nav-tabs-left .tab-content {
        padding-left: 20px;
    }

    .nav-tabs-left.tab-content-bordered .tab-content {
        border-left-width: 0;
    }

    .nav-tabs-right .nav-tabs {
        border-left: 1px solid #ddd;
        margin-bottom: 0;
        margin-top: 20px;
    }

        .nav-tabs-right .nav-tabs > li {
            margin-left: -1px;
        }

            .nav-tabs-right .nav-tabs > li.active > a,
            .nav-tabs-right .nav-tabs > li.active > a:hover,
            .nav-tabs-right .nav-tabs > li.active > a:focus {
                border-bottom-color: #ddd;
                border-left-color: transparent;
            }

        .nav-tabs-right .nav-tabs.nav-tabs-component > li > a {
            border-radius: 0 3px 3px 0;
        }

    .nav-tabs-right .nav-tabs-highlight > li > a,
    .nav-tabs-right .nav-tabs-highlight > li > a:hover,
    .nav-tabs-right .nav-tabs-highlight > li > a:focus {
        border-top-width: 1px;
        border-right-width: 2px;
    }

    .nav-tabs-right .nav-tabs-highlight > li.active > a,
    .nav-tabs-right .nav-tabs-highlight > li.active > a:hover,
    .nav-tabs-right .nav-tabs-highlight > li.active > a:focus {
        border-top-color: #ddd;
        border-right-color: #EC407A;
    }

    .nav-tabs-right .nav-tabs-top,
    .nav-tabs-right .nav-tabs-bottom {
        padding-left: 20px;
    }

    .nav-tabs-right .top-divided,
    .nav-tabs-right .bottom-divided {
        padding-left: 0;
        border-left-width: 0;
    }

    .nav-tabs-right .nav-tabs-solid,
    .nav-tabs-right .nav-tabs[class*=bg-] {
        border-left: 0;
        border-radius: 3px;
    }

        .nav-tabs-right .nav-tabs-solid > li,
        .nav-tabs-right .nav-tabs[class*=bg-] > li {
            margin-left: 0;
        }

    .nav-tabs-right .tab-content {
        padding-right: 20px;
    }

    .nav-tabs-right.tab-content-bordered .tab-content {
        border-right-width: 0;
    }
}

.nav-pills {
    margin-bottom: 20px;
}

    .nav-pills > li {
        float: none;
    }

        .nav-pills > li > a {
            color: #333333;
        }

        .nav-pills > li + li {
            margin-left: 0;
        }

            .nav-pills > li + li > a {
                margin-top: 2px;
            }

    .nav-pills .open > a,
    .nav-pills .open > a:hover,
    .nav-pills .open > a:focus {
        background-color: #f5f5f5;
    }

    .nav-pills.nav-pills-bordered > li > a,
    .nav-pills.nav-pills-toolbar > li > a,
    .nav-pills.nav-pills-bordered > .open > a,
    .nav-pills.nav-pills-toolbar > .open > a {
        border: 1px solid #ddd;
    }

    .nav-pills.nav-pills-bordered > .active > a,
    .nav-pills.nav-pills-toolbar > .active > a,
    .nav-pills.nav-pills-bordered > .active > a:hover,
    .nav-pills.nav-pills-toolbar > .active > a:hover,
    .nav-pills.nav-pills-bordered > .active > a:focus,
    .nav-pills.nav-pills-toolbar > .active > a:focus {
        border-color: #2196F3;
    }



@media (min-width: 768px) {
    .nav-pills.nav-pills-toolbar > li > a {
        border: 1px solid #ddd;
        border-radius: 0;
    }

    .nav-pills.nav-pills-toolbar > li:first-child > a {
        border-radius: 3px 0 0 3px;
    }

    .nav-pills.nav-pills-toolbar > li:last-child > a {
        border-radius: 0 3px 3px 0;
    }

    .nav-pills.nav-pills-toolbar > li + li > a {
        margin-top: 0;
        margin-left: 0;
        border-left: 0;
    }

    .hide-md {
        display: none;
    }
}

@media (min-width: 769px) {
    .nav-pills {
        font-size: 0;
    }

        .nav-pills > li {
            display: inline-block;
            font-size: 13px;
        }

            .nav-pills > li + li > a {
                margin-top: 0;
                margin-left: 2px;
            }

        .nav-pills.nav-justified > li {
            display: table-cell;
        }
}

.panel-title-left-action {
    padding-left: 0;
}

@media (max-width: 768px) {
    .nav-pills > li > a .position-right[class*=icon-] {
        float: right;
        margin-top: 2px;
    }

    .nav-pills > li > a .position-right.label,
    .nav-pills > li > a .position-right.badge {
        float: right;
    }

    .panel.panel-xs-square,
    .panel.panel-xs-square > .panel-heading {
        border-radius: 0;
    }

    .panel-title-left-action {
        padding-left: 37px;
        position: relative;
    }

        .panel-title-left-action > .btn {
            position: absolute;
            left: -7px;
            top: -7px;
            color: #fff;
        }

        .panel-title-left-action > .btn {
            position: absolute;
            left: -7px;
            top: -7px;
        }

            .panel-title-left-action > .btn > i {
                font-size: 20px;
            }
}

.nav-stacked > li {
    display: block;
}

    .nav-stacked > li > a .pull-right[class*=icon-] {
        float: right;
        margin-top: 2px;
    }

    .nav-stacked > li > a .pull-right.label,
    .nav-stacked > li > a .pull-right.badge {
        float: right;
    }

    .nav-stacked > li + li > a {
        margin-left: 0;
    }

.nav-justified > li > a {
    margin-bottom: 0;
}

.nav-tabs-justified > li > a {
    border-radius: 0;
    margin-bottom: 0;
}

    .nav-tabs-justified > li > a:hover,
    .nav-tabs-justified > li > a:focus {
        border-bottom-color: #ddd;
    }

@media (min-width: 769px) {
    .nav-tabs-justified.nav-tabs-top {
        border-bottom: 1px solid #ddd;
    }

        .nav-tabs-justified.nav-tabs-top > li > a,
        .nav-tabs-justified.nav-tabs-top > li > a:hover,
        .nav-tabs-justified.nav-tabs-top > li > a:focus {
            border: 0;
        }

    .nav-tabs-justified.nav-tabs-bottom {
        border-bottom: 1px solid #ddd;
    }

    .nav-tabs-justified.nav-tabs-highlight > li > a,
    .nav-tabs-justified.nav-tabs-highlight > li > a:hover,
    .nav-tabs-justified.nav-tabs-highlight > li > a:focus {
        border-top-width: 2px;
    }
}

@media (max-width: 768px) {
    .nav-tabs-justified {
        border-bottom: 1px solid #ddd;
    }

        .nav-tabs-justified > li.active > a,
        .nav-tabs-justified > li.active > a:hover,
        .nav-tabs-justified > li.active > a:focus {
            border: 0;
        }
}

@media (min-width: 769px) {
    .nav-tabs.nav-tabs-component > li > a {
        border-radius: 3px 3px 0 0;
    }

    .nav-tabs.nav-tabs-component.nav-tabs-solid,
    .nav-tabs.nav-tabs-component[class*=bg-] {
        border-radius: 3px;
    }

        .nav-tabs.nav-tabs-component.nav-tabs-solid > li > a,
        .nav-tabs.nav-tabs-component[class*=bg-] > li > a {
            border-radius: 0;
        }

        .nav-tabs.nav-tabs-component.nav-tabs-solid > li:first-child > a,
        .nav-tabs.nav-tabs-component[class*=bg-] > li:first-child > a {
            border-radius: 3px 0 0 3px;
        }

    .nav-tabs-component.nav-justified.nav-tabs-solid > li:last-child > a,
    .nav-tabs-component.nav-justified[class*=bg-] > li:last-child > a {
        border-radius: 0 3px 3px 0;
    }
}

.tab-content-bordered .tab-content > .has-padding {
    padding: 20px;
}

.panel-flat > .panel-heading + .tab-content > .has-padding {
    padding-top: 0;
}

@media (min-width: 769px) {
    .tab-content > .has-padding {
        padding: 20px;
    }
}

.tab-content-bordered .tab-content {
    border-radius: 3px;
    border: 1px solid transparent;
}

    .tab-content-bordered .tab-content:not([class*=bg-]) {
        border-color: #ddd;
        background-color: #fff;
    }

@media (min-width: 769px) {
    .tab-content-bordered .tab-content {
        border-top-width: 0;
        border-radius: 0 0 3px 3px;
    }
}

@media (min-width: 769px) {
    .tab-content-bordered .nav-tabs {
        margin-bottom: 0;
    }

        .tab-content-bordered .nav-tabs.nav-tabs-solid {
            border-radius: 3px 3px 0 0;
            -webkit-box-shadow: 0 0 0 1px #ddd inset;
            box-shadow: 0 0 0 1px #ddd inset;
        }

            .tab-content-bordered .nav-tabs.nav-tabs-solid > li:first-child > a {
                border-radius: 3px 0 0 0;
            }

            .tab-content-bordered .nav-tabs.nav-tabs-solid.nav-justified > li:last-child > a {
                border-radius: 0 3px 0 0;
            }

    .tab-content-bordered > .nav-tabs[class*=bg-] {
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
    }

        .tab-content-bordered > .nav-tabs[class*=bg-] + .tab-content[class*=bg-] {
            border-top-width: 1px;
            border-top-color: rgba(255, 255, 255, 0.5);
        }
}

@media (min-width: 769px) {
    .nav-tabs[class*=bg-] .dropdown-menu,
    .nav-tabs-top .dropdown-menu {
        margin-top: 0;
    }

    .nav-justified.bottom-divided .dropdown-menu {
        margin-top: 1px;
    }
}

@media (max-width: 768px) {
    .nav-tabs .dropdown-menu,
    .nav-pills .dropdown-menu,
    .nav-tabs.nav-justified > .dropdown .dropdown-menu,
    .nav-pills.nav-justified > .dropdown .dropdown-menu {
        left: -1px;
        right: -1px;
        margin-top: 2px;
    }

    .nav-tabs.nav-justified > li > a,
    .nav-pills.nav-justified > li > a,
    .nav-tabs.text-center > li > a,
    .nav-pills.text-center > li > a,
    .nav-tabs.text-right > li > a,
    .nav-pills.text-right > li > a {
        text-align: left;
    }
}


.fieldset {
    margin-top: 20px;
}

.legend {
    font-size: 14px;
}

.text-black {
    font-weight: 900;
}

.text-blue {
    color: #549ae4;
}

.text-bold {
    font-weight: 900;
}

.text-semibold {
    font-weight: 600;
}

.text-regular {
    font-weight: 400;
}

.text-light {
    font-weight: 300;
}

.text-thin {
    font-weight: 100;
}

.text-italic {
    font-style: italic;
}

.text-highlight {
    padding: 4px 6px;
}

.text-size-max {
    font-size: 18px;
}

.text-size-xxl {
    font-size: 17px;
}

.text-size-xl {
    font-size: 16px;
}

.text-size-large {
    font-size: 14px;
}

.text-size-base {
    font-size: 13px;
}

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

.text-size-mini {
    font-size: 11px;
}

.datepicker.dropdown-menu {
    min-width: 230px;
}


.datepicker table tr td.disabled:hover {
    background-color: transparent;
    cursor: default;
}

.datepicker table tr td.old {
    color: #bbb;
}

.datepicker table tr td.new {
    color: #bbb;
}


.datepicker table tr td.disabled {
    background-color: transparent;
    color: #bbb;
    cursor: default;
}

.datepicker table tr td[title]:before {
    content: '';
    background-color: #fff;
    width: 4px;
    height: 4px;
    display: block;
    position: absolute;
    margin-top: -2px;
    margin-left: -2px;
    border-radius: 50%;
}

.datepicker.flight table tr td[title]:before {
    content: none;
}

.date-picker input[readonly],
input.date-picker[readonly] {
    background-color: white;
    cursor: pointer;
}


.date-picker input[disabled],
input.date-picker[disabled] {
    background-color: #eeeeee !important;
    cursor: default !important;
}


.flight-calendar > .datepicker {
    padding: 0 2px;
}

.datepicker.datepicker-inline {
    padding: 0 2px;
}



.daterange-custom-display {
    display: inline-block;
    position: relative;
    line-height: 1;
}



    .daterange-custom-display > i {
        display: inline-block;
        font-size: 28px;
        font-weight: 400;
        font-style: normal;
        letter-spacing: -.015em;
    }

    .daterange-custom-display b {
        display: inline-block;
        margin-left: 4px;
        font-weight: 400;
    }

        .daterange-custom-display b > i {
            font-size: 11px;
            display: block;
            line-height: 12px;
            text-transform: uppercase;
            font-style: normal;
            font-weight: 400;
        }

    .daterange-custom-display em {
        line-height: 30px;
        vertical-align: top;
        margin: 0 4px;
    }

/* ------------------------------------------------------------------------------
*
*  # Badges component
*
*  Overrides for badges bootstrap component
*
*  Version: 1.2
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */
.badge {
    padding: 3px 10px 4px 10px;
    font-size: 10px;
    letter-spacing: 0.1px;
    vertical-align: baseline;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 100px;
}

.btn .badge {
    top: 0;
}

.btn-xs .badge {
    padding: 2px 6px 1px 6px;
}

.list-group-item.active > .badge,
.nav-pills > .active > a > .badge,
.nav-tabs-solid > .active > a > .badge,
.nav-tabs[class*=bg-] > li > a > .badge {
    color: #333333;
    background-color: #fff;
    border-color: #fff;
}

.nav-pills > li > a > .badge {
    margin-left: 0;
}

    .nav-pills > li > a > .badge.position-right {
        margin-left: 7px;
    }

.badge-default {
    background-color: #999999;
    border-color: #999999;
}

.badge-primary {
    background-color: #2196F3;
    border-color: #2196F3;
}

.badge-success {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.badge-info {
    background-color: #00BCD4;
    border-color: #00BCD4;
}

.badge-warning {
    background-color: #FF5722;
    border-color: #FF5722;
}

.badge-danger {
    background-color: #F44336;
    border-color: #F44336;
}

.badge-flat {
    background-color: transparent;
    border-width: 2px;
    padding: 1px 5px 0 5px;
}

    .badge-flat[href]:hover,
    .badge-flat[href]:focus {
        background-color: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
    }


.position-left {
    margin-right: 5px;
}

.position-right {
    margin-left: 5px;
}

.input-group-addon {
    border: 1px solid #ddd;
}

.navbar-toggle:hover {
    background-color: red;
}

ul.nav {
    font-size: 13px;
}


.list-feed {
    margin: 0;
    padding: 7px 0;
    list-style: none;
}

    .list-feed > li {
        position: relative;
        margin: 0;
        padding-bottom: 20px;
        padding-left: 28px;
    }

        .list-feed > li:before {
            content: '';
            position: absolute;
            left: 0;
            top: 5px;
            width: 8px;
            height: 8px;
            background-color: #fff;
            display: inline-block;
            border-radius: 50%;
            border: 2px solid #607D8B;
            z-index: 3;
        }

        .list-feed > li:after {
            content: '';
            position: absolute;
            top: 5px;
            left: 3px;
            bottom: -7px;
            width: 0;
            border-left: 1px solid #607D8B;
            border-right: 1px solid #607D8B;
            z-index: 2;
        }

        .list-feed > li:first-child:after {
            top: 8px;
        }

        .list-feed > li:last-child {
            padding-bottom: 0;
        }

            .list-feed > li:last-child:after {
                content: none;
            }

        .list-feed > li[class*=border-]:before,
        .list-feed > li[class*=border-]:after {
            border-color: inherit;
        }

.list-feed-solid > li:before {
    content: '';
    width: 0;
    height: 0;
    border-width: 4px;
}

.list-feed-square > li:before {
    content: '';
    border-radius: 0;
}

.list-feed-rhombus > li:before {
    content: '';
    border-radius: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.list-feed-time > li {
    margin-left: 48px;
}

    .list-feed-time > li .feed-time {
        position: absolute;
        left: -48px;
        top: 0;
        font-size: 12px;
    }

.input-group-btn > .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 4px;
    min-height: 34px;
}


    .input-group-btn > .btn.active,
    .input-group-btn > .btn:active,
    .input-group-btn > .btn:focus:active,
    .input-group-btn > .btn:hover:active {
        top: 0px;
    }

ul.dropdown-menu > li {
    cursor: pointer;
}

strong {
    font-weight: 600;
}


.nav-tab-lg {
    font-size: 15px;
}

.no-margin {
    margin: 0 !important;
}

.no-margin-top {
    margin-top: 0 !important;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.no-margin-left {
    margin-left: 0 !important;
}

.no-margin-right {
    margin-right: 0 !important;
}

.m-5 {
    margin: 5px !important;
}

.m-10 {
    margin: 10px !important;
}

.m-15 {
    margin: 15px !important;
}

.m-20 {
    margin: 20px !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

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

.mt-20 {
    margin-top: 20px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

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

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

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

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

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

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

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

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

.no-padding {
    padding: 0 !important;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.no-padding-left {
    padding-left: 0 !important;
}

.no-padding-right {
    padding-right: 0 !important;
}

.p-5 {
    padding: 5px !important;
}

.p-10 {
    padding: 10px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-20 {
    padding: 20px !important;
}

.pt-5 {
    padding-top: 5px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pt-20 {
    padding-top: 20px !important;
}

.pb-5 {
    padding-bottom: 5px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.pb-20 {
    padding-bottom: 20px !important;
}

.pl-5 {
    padding-left: 5px !important;
}

.pl-10 {
    padding-left: 10px !important;
}

.pl-15 {
    padding-left: 15px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-25 {
    padding-left: 25px !important;
}

.pr-5 {
    padding-right: 5px !important;
}

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

.pr-15 {
    padding-right: 15px !important;
}

.pr-20 {
    padding-right: 20px !important;
}

.no-border {
    border: 0 !important;
}

.no-border-top {
    border-top: 0 !important;
}

.no-border-bottom {
    border-bottom: 0 !important;
}

.no-border-left {
    border-left: 0 !important;
}

.no-border-right {
    border-right: 0 !important;
}


.btn-group-primary .btn.active {
    background: #2184da;
    color: white;
}

.btn-group-primary .btn {
    border: 1px solid #009688;
    background-color: white;
    border-color: #009688;
    color: #009688;
}

.btn-group-primary.space .btn {
    border-color: #ccc;
    color: #7f7f7f;
}

/* klao 2 item di rounded */
.btn-group-primary .btn:first-child:nth-last-child(2) {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    min-width: 100px;
    padding-left: 20px;
    padding-right: 20px;
}

.btn-group-primary .btn:last-child:nth-child(2) {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    min-width: 100px;
    padding-left: 20px;
    padding-right: 20px;
}




.btn-group-primary.space .btn:hover {
    border-color: #009688;
}

.btn-group-primary .btn.active,
.btn-group-primary .btn:active,
.btn-group-primary .btn:focus:active,
.btn-group-primary .btn:hover:active {
}

.btn-group-primary .btn:hover {
}

.btn-group-primary .btn:active,
.btn-group-primary .btn:focus {
    background: #009688;
    color: white;
    border: 1px solid #ccc;
}

.btn-group-primary .btn:hover {
    background: white;
    border-color: #009688;
}

.btn-group-primary .btn.active,
.btn-group-primary .btn.active:hover {
    border-color: #009688;
    background: #009688;
}

.btn-group-primary .btn.active,
.btn-group-primary .btn:active,
.btn-group-primary .btn:focus:active,
.btn-group-primary .btn:hover:active {
    background: #009688;
    color: #fff;
}

.btn-group .btn[disabled] {
    pointer-events: none;
}

.space-top {
    margin-top: 20px;
}

.space-bottom {
    margin-bottom: 20px;
}

label.required:after {
    content: ' *';
    color: #ff4500;
    font-weight: bold;
}

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

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

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

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

.bg-grey {
    background-color: #cccccc;
    border: solid 1px #949494;
}

.bg-reserved {
    background-color: #337ab7;
    border: solid 1px #337ab7;
    color: white;
}

.bg-cancelled {
    background-color: #575757;
    border: solid 1px #575757;
    color: white;
}

.bg-issued {
    background-color: #4caf50;
    border: solid 1px #4caf50;
    color: white;
}

.bg-expired {
    background-color: #dfdfdf;
    border: solid 1px #dfdfdf;
    color: black;
}

.bg-error {
    background-color: #ff231c !important;
    border: solid 1px #ff231c !important;
    color: white !important;
}

a.link {
    cursor: pointer;
}

    a.link:hover {
        text-decoration: underline;
    }

.dropdown-menu li {
    padding-left: 1px;
    padding-right: 1px;
}


.nav-tab-lg li {
    min-width: 106px;
    text-align: center;
}

@media (max-width: 768px) {
    .nav-tab-lg li {
        width: auto;
    }
}

.cursor-pointer {
    cursor: pointer;
}

.animate-ease-in.ng-enter {
    opacity: 0;
    transition: all .7s ease;
}

.animate-ease-in.ng-enter-active {
    opacity: 1;
}

/*AFFIX untuk ukuran col-md-3 di screen*/

.col-md-3 .affix {
    position: fixed;
    top: 70px;
    width: 240px;
}

.affix-top {
    position: static;
}

.affix-bottom {
    position: absolute;
}

.tripplan-row {
    display: table;
    width: 1035px;
}

.tripplan-left {
    display: table-cell;
    width: auto;
    padding-right: 25px;
}

.tripplan-right,
.tripplan-right .affix {
    display: table-cell;
    width: 300px;
}




@media (max-width: 4000px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 426px;
    }
}

@media (max-width: 2200px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 426px;
    }
}

@media (max-width: 2000px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 373px;
    }
}

@media (max-width: 1900px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 343px;
    }
}

@media (max-width: 1800px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 318px;
    }
}

@media (max-width: 1600px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 273px;
    }
}

@media (max-width: 1500px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 240px;
    }
}

@media (max-width: 1400px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 235px;
    }
}

@media (max-width: 1300px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 220px;
    }
}

@media (max-width: 1200px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 200px;
    }
}

@media (max-width: 1100px) {
    .col-md-3 .affix, .col-md-3 .affix-bottom {
        width: 190px;
    }
}

@media (max-width: 990px) {
    .col-md-3 .affix,
    .col-md-3 .affix-bottom {
        position: static !important;
        width: auto !important;
        margin-top: 20px;
    }
}
/*END AFFIX COL-MD-3*/

/*AFFIX untuk ukuran col-md-4 di screen*/

.col-md-4 .affix {
    position: fixed;
    top: 70px;
    width: 334px;
}

@media (max-width: 2200px) {
    .col-md-4 .affix, .col-md-4 .affix-bottom {
        width: 510px;
    }
}

@media (max-width: 2000px) {
    .col-md-4 .affix, .col-md-4 .affix-bottom {
        width: 522px;
    }
}

@media (max-width: 1900px) {
    .col-md-4 .affix, .col-md-4 .affix-bottom {
        width: 490px;
    }
}

@media (max-width: 1800px) {
    .col-md-4 .affix, .col-md-4 .affix-bottom {
        width: 449px;
    }
}

@media (max-width: 1700px) {
    .col-md-4 .affix, .col-md-4 .affix-bottom {
        width: 425px;
    }
}

@media (max-width: 1600px) {
    .col-md-4 .affix, .col-md-4 .affix-bottom {
        width: 386px;
    }
}

@media (max-width: 1500px) {
    .col-md-4 .affix, .col-md-4 .affix-bottom {
        width: 330px;
    }
}

@media (max-width: 1300px) {
    .col-md-4 .affix, .col-md-4 .affix-bottom {
        width: 334px;
    }
}

@media (max-width: 1200px) {
    .col-md-4 .affix, .col-md-4 .affix-bottom {
        width: 303px;
    }
}

@media (max-width: 1100px) {
    .col-md-4 .affix, .col-md-4 .affix-bottom {
        width: 277px;
    }
}

@media (max-width: 1024px) {
    .affix {
        position: static !important;
        width: auto !important;
    }
}
/*END AFFIX COL-MD-4*/


.no-item {
    color: #a1a1a1;
    font-style: italic;
    font-size: 17px;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

table.summary-route {
    width: 100%;
    margin-top: 5px;
}

    table.summary-route tr:first-child {
        font-size: 20px;
        line-height: 15px;
        font-weight: 500;
    }

        table.summary-route tr:first-child td:nth-child(1) {
            text-align: right;
            vertical-align: top;
            width: 50%;
        }

        table.summary-route tr:first-child td:nth-child(2) {
            width: 1px;
            padding-left: 5px;
            padding-right: 5px;
        }

        table.summary-route tr:first-child td:nth-child(3) {
            width: 50%;
            vertical-align: top;
        }

    table.summary-route tr:last-child {
        font-size: 12px;
        line-height: 14px;
    }

        table.summary-route tr:last-child td:nth-child(1) {
            text-align: right;
            padding-top: 5px;
            vertical-align: top;
        }

        table.summary-route tr:last-child td:nth-child(3) {
            padding-top: 5px;
            vertical-align: top;
        }


.label.title-page-label {
    font-size: 14px;
    padding: 5px 20px;
    position: absolute;
    top: 0px;
    margin-left: 10px;
}

    .label.title-page-label.grey {
        background-color: grey;
    }

    .label.title-page-label.green {
        background-color: #57b700;
        border: 1px solid #52ad00;
    }

.trip-status-label-lg {
    display: block;
    padding: 7px;
}

.spinner.ng-hide {
    display: none !important;
}

.tab-lg.nav-tabs.nav-tabs-bottom > li > a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.tab-lg.nav-tabs.nav-tabs-bottom > li.active > a:after {
    background-color: #ff0303;
}

.table.table-xxxs td {
    padding: 2px;
}

.table.table-xxs td {
    padding: 5px;
}

div .trip-item-container:not(:last-child) {
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
    padding-bottom: 30px;
}

.trip-item {
}

.trip-item-footer {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    margin-top: 20px;
    margin-left: -20px;
    margin-right: -20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 10px;
}

.trip-item-container .trip-item:not(:last-child) {
    margin-bottom: 20px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px
}

.tab-trip-member {
    /* ReSharper disable once InvalidValue */
    position: sticky;
    top: 45px;
    z-index: 3;
    border-radius: 0;
    background-color: white;
}

.list-pnr .pnr-container:not(:last-child) {
    margin-bottom: 15px;
}

.pnr-container {
}

.pnr-progress {
    height: 3px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border-radius: 0;
}

.pnr-info-container {
    border: 1px solid #a5a5a5;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
}

.pnr-info div:first-child {
    font-weight: 400;
    color: #7b7b7b;
}

.pnr-info div:last-child {
    font-weight: 500;
}

.pnr-info .status {
    font-size: 100%;
    font-weight: 400;
}

.amount-error {
    visibility: hidden;
}

.has-warning .amount-error {
    visibility: visible;
}

.segment {
    width: 100%;
    margin-top: -1px;
    border: 1px solid #a5a5a5;
    overflow: hidden;
}

div .segment:last-of-type {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.segment-container {
    margin-left: 0px;
    margin-right: 0px;
    padding-top: 10px;
    display: table;
    width: 100%;
    padding-bottom: 10px;
    padding-right: 10px;
}

    .segment-container.segment-hover {
        cursor: pointer;
        -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
        -khtml-user-select: none; /* Konqueror HTML */
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    }

        .segment-container.segment-hover:hover {
            background-color: #f5f5f5;
        }

.detail-link {
    position: relative;
}

.segment-container[data-toggle="collapse"] .detail-link:after {
    font-family: 'icomoon';
    content: "\e9df";
    float: right;
    color: grey;
    font-size: 18px;
    line-height: 22px;
    position: absolute;
    margin-left: 5px;
    bottom: 4px;
}


.segment-container[data-toggle="collapse"].collapsed .detail-link:after {
    /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}


.segment-row {
    display: table-row;
}


.segment-logo {
    width: 120px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding-right: 10px;
    position: relative;
}

    .segment-logo img {
        max-width: 80px;
        max-height: 44px;
    }

    .segment-logo div {
        font-size: 11px;
    }

.segment-detail {
    padding: 10px
}

.segment-origin {
    width: 180px;
    padding-right: 15px;
    display: table-cell;
    text-align: right;
    vertical-align: top;
}

.segment-destination {
    text-align: left;
    width: 180px;
    padding-left: 15px;
    display: table-cell;
    vertical-align: top;
}

.segment-duration-container {
    display: table-cell;
    width: 100px;
    vertical-align: middle;
    text-align: center;
}

.segment-duration-container-hotel {
    display: contents;
}

.segment-duration {
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid #676767;
    position: relative;
}

    .segment-duration:before {
        content: '';
        position: absolute;
        width: 7px;
        height: 7px;
        background: #676767;
        border-radius: 50%;
        left: 0;
        bottom: -4px;
    }

    .segment-duration:after {
        content: '';
        position: absolute;
        width: 7px;
        height: 7px;
        background: #676767;
        border-radius: 50%;
        right: 0;
        bottom: -4px;
    }

.segment-right {
    display: table-cell;
    vertical-align: middle;
    padding-right: 10px;
}

.segment-hotel-info {
    width: 200px;
    display: table-cell;
    padding-left: 15px;
    position: relative;
}

.segment-checkin {
    width: 120px;
    padding-right: 15px;
    display: table-cell;
    text-align: right;
    vertical-align: middle;
}

.segment-duration-hotel {
    display: table-cell;
    width: 80px;
    text-align: center;
    vertical-align: middle;
}

.segment-checkout {
    text-align: left;
    width: 120px;
    padding-left: 15px;
    display: table-cell;
    vertical-align: middle;
}

.segment-right-hotel {
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

.segment-class {
    margin-top: 0px;
}

.segment-connecting-top-border {
    border-top: 1px dashed #737373;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 0px;
}

.segment-transit-info-container {
    text-align: center;
    border-bottom: 1px dashed #7d7d7d;
    position: relative;
    margin: 20px 10px;
    line-height: 5px;
}

.segment-transit-info {
    border: 1px dashed #737373;
    padding: 5px 10px;
    border-radius: 6px;
    background: white;
    margin-bottom: -17px;
    display: -webkit-inline-box;
    color: #606060;
}

.pnr-remark {
    padding-left: 0;
}


@media (max-width: 768px) {
    .xs-mt-10 {
        margin-top: 10px;
    }

    .xs-mt-15 {
        margin-top: 15px;
    }

    .xs-mt-20 {
        margin-top: 20px;
    }

    .xs-mb-10 {
        margin-bottom: 10px;
    }

    .xs-mb-15 {
        margin-bottom: 15px;
    }

    .xs-mb-20 {
        margin-bottom: 20px;
    }

    .segment-logo {
        padding-left: 10px;
        width: 80px;
    }

    .pnr-info {
        margin-bottom: 5px;
    }

    .pnr-remark {
        padding-left: 15px;
    }

    .segment-destination {
        padding-left: 0;
    }

    .segment-connecting .row {
        margin-left: 0;
        margin-right: 0;
    }

    .segment-container-hotel {
        display: block;
        padding-right: 0;
    }

    .segment-container-hotel .segment-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .segment-hotel-info {
        width: 100%;
    }

    .segment-duration-container-hotel {
        display: flex;
        padding-right: 8px;
        width: 100%;
    }
}


.border-indent-left-primary {
    position: absolute;
    background-color: #2196f3;
    top: 0;
    left: -2px;
    color: white;
    bottom: 0;
    width: 5px;
    text-align: center;
    line-height: 40px;
}

.tripitem-progress {
    position: absolute;
    left: 2px;
    top: 2px;
    color: #337ab7;
    font-size: 13px;
}

.label-flat-success {
    border: 1px solid #3c763d;
    padding: 3px 3px;
    font-size: 80%;
    text-align: center;
    border-radius: 5px;
    font-weight: 600;
    color: #3c763d;
}

.label-flat-danger {
    border: 1px solid #ff4343;
    padding: 3px 3px;
    font-size: 80%;
    text-align: center;
    border-radius: 5px;
    font-weight: 600;
}

.label-flat-default {
    border: 1px solid #737373;
    font-size: 80%;
    text-align: center;
    border-radius: 5px;
    font-weight: 400;
    padding: 1px 5px;
}

table.table-schedule tbody > tr > td {
    vertical-align: middle;
}

table.table-connecting {
    width: 100%;
}

    table.table-connecting tbody > tr > td {
        padding: 0;
        vertical-align: middle;
    }

    table.table-connecting tr td {
        padding: 0;
        vertical-align: middle;
    }

table.table-border-bottom tr:first-child td {
    border-top: none;
}

table.table-border-bottom tr:last-child td {
    border-bottom: 1px solid #ddd;
}

.panel-heading .flight-heading-title {
    height: 36px;
}

.panel-heading .flight-heading-left {
    margin-top: -8px;
    position: relative;
    float: left;
}

    .panel-heading .flight-heading-left .icon-left {
        position: absolute;
        top: 13px;
        left: 3px;
    }

        .panel-heading .flight-heading-left .icon-left .icon-big {
            margin-right: 5px;
            font-size: 28px;
        }

    .panel-heading .flight-heading-left .title-container {
        margin-left: 44px;
    }

        .panel-heading .flight-heading-left .title-container .line2 {
            margin-top: -5px;
            font-weight: 400;
            font-size: 12px;
        }

        .panel-heading .flight-heading-left .title-container .line3 {
            margin-top: -3px;
            font-weight: 400;
            font-size: 12px;
        }

.panel-heading .flight-btn-area {
    float: right;
    margin-top: 6px;
}


.table-clickable tr:not(.selected):hover td {
    background-color: #ecf2ff;
    cursor: pointer;
}

.table-clickable tr.selected td {
    background-color: #e1eafe;
}


/* ------------------------------------------------------------------------------
 *
 *  # Datatables library
 *
 *  Add advanced interaction controls to any HTML table
 *
 *  Version: 1.2
 *  Latest update: Mar 10, 2016
 *
 * ---------------------------------------------------------------------------- */
.dataTable {
    margin: 0;
    max-width: none;
    /*border-collapse: separate;*/
}

    .dataTable thead th,
    .dataTable thead td {
        outline: 0;
        position: relative;
    }

    .dataTable thead th {
        vertical-align: middle !important;
    }

    .dataTable thead .sorting_asc,
    .dataTable thead .sorting_desc,
    .dataTable thead .sorting {
        cursor: pointer;
        user-select: none;
    }

        .dataTable thead .sorting_asc:hover,
        .dataTable thead .sorting_desc:hover,
        .dataTable thead .sorting:hover {
            background-color: #ededed;
        }

    .dataTable thead .sorting,
    .dataTable thead .sorting_asc,
    .dataTable thead .sorting_desc,
    .dataTable thead .sorting_asc_disabled,
    .dataTable thead .sorting_desc_disabled {
        padding-right: 40px;
    }

        .dataTable thead .sorting:before,
        .dataTable thead .sorting:after,
        .dataTable thead .sorting_asc:after,
        .dataTable thead .sorting_desc:after,
        .dataTable thead .sorting_asc_disabled:after,
        .dataTable thead .sorting_desc_disabled:after {
            content: '';
            font-family: 'icomoon';
            position: absolute;
            top: 50%;
            right: 20px;
            font-size: 12px;
            margin-top: -6px;
            display: inline-block;
            line-height: 1;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .dataTable thead .sorting:before {
            content: '\e9c1';
            margin-top: -2px;
            color: #999999;
        }

        .dataTable thead .sorting:after {
            content: '\e9c2';
            margin-top: -10px;
            color: #999999;
        }

        .dataTable thead .sorting_asc:after {
            content: '\e9c2';
        }

        .dataTable thead .sorting_desc:after {
            content: '\e9c1';
        }

        .dataTable thead .sorting_asc_disabled:after {
            content: '\e9c2';
            color: #ccc;
        }

        .dataTable thead .sorting_desc_disabled:after {
            content: '\e9c1';
            color: #ccc;
        }

.vcenter {
    vertical-align: middle !important;
}

.thumb {
    width: 100px;
    margin: 5px;
    float: left;
}

.sabre-label, .galileo-label {
    display: inline-block;
    padding: 3px 8px;
    line-height: 1;
    background: #fff;
    color: blue;
    font-weight: normal;
    font-size: 10px;
    border-radius: 2px;
    border: 1px solid blue;
    margin-top: 5px;
}

/* ------------------------------------------------------------------------------
 *
 *  # PNotify notifications
 *
 *  Styles for pnotify.min.js - a flexible JavaScript notification plugin
 *
 *  Version: 1.1
 *  Latest update: Mar 10, 2016
 *
 * ---------------------------------------------------------------------------- */
.ui-pnotify {
    top: 20px;
    right: 20px;
    position: absolute;
    height: auto;
    z-index: 2;
    border-radius: 3px;
}

body > .ui-pnotify {
    position: fixed;
    z-index: 100040;
}

.ui-pnotify.alert-rounded > .ui-pnotify-container {
    border-radius: 100px;
}

.ui-pnotify[class*=bg-] > .ui-pnotify-container {
    background-color: inherit;
    border-color: transparent;
    color: #fff;
}

.ui-pnotify[class*=text-] > .ui-pnotify-container,
.ui-pnotify[class*=alpha-] > .ui-pnotify-container {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
}

.ui-pnotify.stack-top-left,
.ui-pnotify.stack-bottom-left {
    left: 20px;
    right: auto;
}

.ui-pnotify.stack-bottom-right,
.ui-pnotify.stack-bottom-left {
    bottom: 20px;
    top: auto;
}

.ui-pnotify.stack-modal {
    left: 50%;
    right: auto;
    margin-left: -150px;
}

.ui-pnotify.stack-custom-right {
    top: auto;
    left: auto;
    bottom: 200px;
    right: 200px;
}

.ui-pnotify.stack-custom-left {
    top: 200px;
    left: 200px;
    right: auto;
    bottom: auto;
}

.ui-pnotify.stack-custom-top {
    /*right: 0;
    left: 0;*/
    top: 3%;
    width: fit-content !important;
    /*left: 36%;*/
    /*margin-top: 4%;*/
    background-color: #FFF3E0;
    border-color: #FF9800;
    font-size: 13px !important;
    color: #333333;
    margin: 1% auto; /* Will not center vertically and won't work in IE6/7. */
    left: 0;
    right: 0;
}

.ui-pnotify.stack-custom-bottom {
    right: 0;
    left: 0;
    bottom: 0;
    top: auto;
}

.ui-pnotify.ui-pnotify-in {
    display: block !important;
}

.ui-pnotify.ui-pnotify-move {
    -webkit-transition: left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
    -o-transition: left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
    transition: left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
}

.ui-pnotify.ui-pnotify-fade-slow {
    -webkit-transition: opacity linear 0.6s;
    -o-transition: opacity linear 0.6s;
    transition: opacity linear 0.6s;
    opacity: 0;
    filter: alpha(opacity=0);
}

    .ui-pnotify.ui-pnotify-fade-slow.ui-pnotify.ui-pnotify-move {
        -webkit-transition: opacity .6s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
        -o-transition: opacity .6s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
        transition: opacity .6s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
    }

.ui-pnotify.ui-pnotify-fade-normal {
    -webkit-transition: opacity linear 0.4s;
    -o-transition: opacity linear 0.4s;
    transition: opacity linear 0.4s;
    opacity: 0;
    filter: alpha(opacity=0);
}

    .ui-pnotify.ui-pnotify-fade-normal.ui-pnotify.ui-pnotify-move {
        -webkit-transition: opacity .4s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
        -o-transition: opacity .4s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
        transition: opacity .4s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
    }

.ui-pnotify.ui-pnotify-fade-fast {
    transition: opacity .2s linear;
    -webkit-transition: opacity linear 0.2s;
    -o-transition: opacity linear 0.2s;
    transition: opacity linear 0.2s;
    opacity: 0;
    filter: alpha(opacity=0);
}

    .ui-pnotify.ui-pnotify-fade-fast.ui-pnotify.ui-pnotify-move {
        -webkit-transition: opacity .2s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
        -o-transition: opacity .2s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
        transition: opacity .2s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease;
    }

.ui-pnotify.ui-pnotify-fade-in {
    opacity: 1;
    filter: alpha(opacity=100);
}

.ui-pnotify-container {
    padding: 15px 20px;
    height: 100%;
    position: relative;
    left: 0;
    margin: 0;
    border-radius: 3px;
}

    .ui-pnotify-container:after {
        content: " ";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
    }

    .ui-pnotify-container.ui-pnotify-sharp {
        border-radius: 0;
    }

.ui-pnotify-title {
    display: block;
    margin-top: 0;
    margin-bottom: 7px;
    font-size: 19px;
}

.ui-pnotify-text {
    display: block;
}

.ui-pnotify-icon {
    display: block;
    float: left;
    line-height: 1;
}

    .ui-pnotify-icon > [class^=icon-] {
        margin-top: 4px;
        margin-right: 15px;
    }

.ui-pnotify-closer,
.ui-pnotify-sticker {
    float: right;
    margin-left: 8px;
    margin-top: 4px;
    line-height: 1;
    outline: 0;
}

.ui-pnotify-modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
}

body > .ui-pnotify-modal-overlay {
    position: fixed;
    z-index: 100039;
}

.brighttheme {
    border: 1px solid;
}

.ui-pnotify[class*=bg-] > .brighttheme {
    background-color: inherit;
    border-color: inherit;
    color: inherit;
}

.brighttheme-notice {
    background-color: #FFF3E0;
    border-color: #FF9800;
}

.brighttheme-info {
    background-color: #E3F2FD;
    border-color: #1E88E5;
}

.brighttheme-success {
    background-color: #E8F5E9;
    border-color: #4CAF50;
}

.brighttheme-error {
    background-color: #FBE9E7;
    border-color: #FF5722;
}

.brighttheme-icon-closer,
.brighttheme-icon-sticker {
    position: relative;
    width: 16px;
    height: 16px;
    display: inline-block;
    width: 10px;
    height: 10px;
    outline: 0;
}

    .brighttheme-icon-closer:after,
    .brighttheme-icon-sticker:after {
        content: '';
        font-family: 'Icomoon';
        font-size: 10px;
        display: block;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .brighttheme-icon-closer:after {
        content: "\ed6a";
    }

    .brighttheme-icon-sticker:after {
        content: "\ee70";
    }

    .brighttheme-icon-sticker.brighttheme-icon-stuck:after {
        content: "\ee75";
    }

.ui-pnotify[class*=alert-styled-] {
    border-width: 0;
    padding: 0;
}

.ui-pnotify.alert-styled-left .brighttheme {
    border-left-width: 44px;
}

.ui-pnotify.alert-styled-left:after {
    left: 0;
}

.ui-pnotify.alert-styled-right .brighttheme {
    border-right-width: 44px;
}

.ui-pnotify.alert-styled-right:after {
    right: 0;
}

.brighttheme .ui-pnotify-action-bar {
    padding-top: 15px;
}

    .brighttheme .ui-pnotify-action-bar textarea,
    .brighttheme .ui-pnotify-action-bar input {
        display: block;
        width: 100%;
        border: 1px solid #ddd;
        background-color: #fff;
        margin-bottom: 15px !important;
        color: #333333;
        padding: 7px 12px;
    }

.ui-pnotify[class*=bg-] .brighttheme .ui-pnotify-action-bar textarea,
.ui-pnotify[class*=bg-] .brighttheme .ui-pnotify-action-bar input {
    border-color: #fff;
    color: #fff;
}

    .ui-pnotify[class*=bg-] .brighttheme .ui-pnotify-action-bar textarea::-moz-placeholder,
    .ui-pnotify[class*=bg-] .brighttheme .ui-pnotify-action-bar input::-moz-placeholder {
        color: #fff;
        opacity: 1;
    }

    .ui-pnotify[class*=bg-] .brighttheme .ui-pnotify-action-bar textarea:-ms-input-placeholder,
    .ui-pnotify[class*=bg-] .brighttheme .ui-pnotify-action-bar input:-ms-input-placeholder {
        color: #fff;
    }

    .ui-pnotify[class*=bg-] .brighttheme .ui-pnotify-action-bar textarea::-webkit-input-placeholder,
    .ui-pnotify[class*=bg-] .brighttheme .ui-pnotify-action-bar input::-webkit-input-placeholder {
        color: #fff;
    }

.ui-pnotify[class*=bg-] .form-control {
    border-bottom-color: #fff;
    color: #fff;
}

    .ui-pnotify[class*=bg-] .form-control::-moz-placeholder {
        color: #fff;
        opacity: 1;
    }

    .ui-pnotify[class*=bg-] .form-control:-ms-input-placeholder {
        color: #fff;
    }

    .ui-pnotify[class*=bg-] .form-control::-webkit-input-placeholder {
        color: #fff;
    }

.ui-pnotify-history-container {
    position: absolute;
    top: 0;
    right: 20px;
    width: 70px;
    border-top: none;
    padding: 0;
    z-index: 10000;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

    .ui-pnotify-history-container.ui-pnotify-history-fixed {
        position: fixed;
    }

    .ui-pnotify-history-container .ui-pnotify-history-header {
        padding: 2px;
        text-align: center;
    }

    .ui-pnotify-history-container button {
        cursor: pointer;
        display: block;
        width: 100%;
    }

    .ui-pnotify-history-container .ui-pnotify-history-pulldown {
        display: block;
        margin: 0 auto;
    }

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

@media (max-width: 480px) {
    .ui-pnotify-mobile-able.ui-pnotify {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: auto !important;
        -webkit-font-smoothing: antialiased;
        -moz-font-smoothing: antialiased;
        -ms-font-smoothing: antialiased;
        /* ReSharper disable once CssNotResolved */
        font-smoothing: antialiased;
    }

        .ui-pnotify-mobile-able.ui-pnotify .ui-pnotify-shadow {
            border-bottom-width: 5px;
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        .ui-pnotify-mobile-able.ui-pnotify.stack-top-left,
        .ui-pnotify-mobile-able.ui-pnotify.stack-bottom-left {
            left: 0;
            right: 0;
        }

        .ui-pnotify-mobile-able.ui-pnotify.stack-bottom-right,
        .ui-pnotify-mobile-able.ui-pnotify.stack-bottom-left {
            left: 0;
            right: 0;
            bottom: 0;
            top: auto;
        }

            .ui-pnotify-mobile-able.ui-pnotify.stack-bottom-right .ui-pnotify-shadow,
            .ui-pnotify-mobile-able.ui-pnotify.stack-bottom-left .ui-pnotify-shadow,
            .ui-pnotify-mobile-able.ui-pnotify.stack-bottom-right .ui-pnotify-shadow,
            .ui-pnotify-mobile-able.ui-pnotify.stack-bottom-left .ui-pnotify-shadow {
                border-top-width: 5px;
                border-bottom-width: 1px;
            }

        .ui-pnotify-mobile-able.ui-pnotify.ui-pnotify-nonblock-fade {
            opacity: 0.2;
            filter: alpha(opacity=20);
        }

        .ui-pnotify-mobile-able.ui-pnotify.ui-pnotify-nonblock-hide {
            display: none !important;
        }

    .ui-pnotify-mobile-able .ui-pnotify-container {
        border-radius: 0;
    }


    .btn-group-primary .btn:first-child:nth-last-child(2) {
        min-width: auto;
        padding-left: 10px;
        padding-right: 10px;
    }

    .btn-group-primary .btn:last-child:nth-child(2) {
        min-width: auto;
        padding-left: 10px;
        padding-right: 10px;
    }

    .no-margin-xs {
        margin: 0;
    }

    .no-margin-top-xs {
        margin-top: 0;
    }

    .no-margin-bottom-xs {
        margin-bottom: 0;
    }

    .no-margin-left-xs {
        margin-left: 0;
    }

    .no-margin-right-xs {
        margin-right: 0;
    }
}

.box-body.segment-ssr {
    padding-top: 0 !important;
}

.box-body.transp {
    background: none !important;
}

.form-group.ssr {
    margin-bottom: 5px !important;
}

.row.row-ssr {
    padding: 0 5px;
}

.box.box-segment {
    margin-bottom: 10px;
}

    .box.box-segment:last-child {
        margin-bottom: 5px;
    }

.box.box-segment {
    margin-bottom: 5px;
}

.box.border.box-ssr .box-title.small h4,
.box.border.box-ssr .box-title.small .tools.small {
    margin-top: 5px;
    margin-bottom: 5px;
}

.box.box-segment .box-title.small {
    margin-bottom: 5px;
}

.box .box-title.small h6 {
    margin-top: 3px;
    margin-bottom: 3px;
    font-weight: 500;
}

.route-container {
    background-color: #9a9a9a;
    position: relative;
    padding: 2px 5px;
    color: white;
    height: 24px;
}

    .route-container .org {
        width: 47%;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .route-container .des {
        width: 43%;
        display: inline-block;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        float: right;
    }

    .route-container .route-divider {
        position: absolute;
        top: -9px;
        right: 42%;
        color: white;
    }

        .route-container .route-divider i {
            font-size: 33pt;
        }

button.btn.btn-seat {
    font-size: 11px;
    padding: 2px;
    width: 50px;
    height: 34px;
    border-color: #000000;
}

.btn-tzyellow {
    color: #000;
    background-color: #ffe900;
    border-color: #000;
}

.btn-tzwhite {
    color: #000;
    /*background-color: #fff;*/
    border-color: #000;
}

.btn-tzblack {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.cellseat {
    width: 10px;
    height: 5px;
}

.iconseat {
    font-size: 20pt;
}


/*FOR GOOGLE MAPS*/
/* The popup bubble styling. */
.popup-bubble {
    /* Position the bubble centred-above its parent. */
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -100%);
    /* Style the bubble. */
    background-color: #337ab7;
    color: white;
    padding: 5px 7px;
    border-radius: 5px;
    font-family: sans-serif;
    overflow-y: auto;
    max-height: 60px;
    box-shadow: 0px 2px 10px 1px rgba(0,0,0,0.5);
}

    .popup-bubble.green {
        background-color: #009688;
    }

    .popup-bubble.clicked {
        color: #36beff;
    }

    .popup-bubble.green {
        background-color: green;
    }

        .popup-bubble.green.clicked {
            color: #00ea00;
        }




/* 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 #337ab7;
    }

    .popup-bubble-anchor.green::after {
        border-top-color: green;
    }


/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container {
    cursor: auto;
    height: 0;
    position: absolute;
    /* The max width of the info window. */
    width: 200px;
}

.marker-hotel {
    cursor: pointer;
}

/* ------------------------------------------------------------------------------
*
*  # Bootstrap multiselect
*
*  Styles for multiselect.js - custom multiple select plugin
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
.multiselect {
    width: 100%;
    min-width: 100%;
    text-align: left;
    padding-left: 12px;
    padding-right: 29px;
    text-overflow: ellipsis;
    overflow: hidden;
}

    .multiselect.btn-default,
    .multiselect.btn-default.disabled {
        background-color: #fff !important;
        border-color: #ddd !important;
        border: 1px solid;
    }

        .multiselect.btn-default:active,
        .btn-group.open .multiselect.btn-default {
            border-color: #ddd !important;
        }

    .multiselect .caret {
        position: absolute;
        top: 50%;
        right: 12px;
        margin-top: auto;
        text-align: right;
        color: #888888
    }

    .multiselect.btn-lg {
        padding-left: 15px;
        padding-right: 30px;
    }

        .multiselect.btn-lg .caret {
            right: 15px;
        }

    .multiselect.btn-sm {
        padding-left: 11px;
        padding-right: 22px;
    }

        .multiselect.btn-sm .caret {
            right: 11px;
        }

    .multiselect.btn-xs {
        padding-left: 10px;
        padding-right: 20px;
    }

        .multiselect.btn-xs .caret {
            right: 10px;
        }

.multiselect-container {
    min-width: 180px;
    max-height: 250px;
    overflow-y: auto;
}

    .multiselect-container > li {
        padding: 0;
    }

        .multiselect-container > li > a {
            padding: 0;
        }

            .multiselect-container > li > a > label {
                margin: 0;
                height: 100%;
                cursor: pointer;
                padding: 8px 12px;
                padding-left: 40px;
            }

.navbar-form .multiselect-container > li > a > label {
    display: block;
}

.multiselect-container > li > a .checker,
.multiselect-container > li > a .choice {
    top: 50%;
    margin-top: -9px;
    left: 12px;
}

.multiselect-container > li > a.multiselect-all label {
    font-weight: 500;
}

.multiselect-container > li.disabled > a {
    background-color: transparent;
}

    .multiselect-container > li.disabled > a > label {
        cursor: not-allowed;
    }

.multiselect-container > li.multiselect-group > label,
.multiselect-container > li.multiselect-group.active > label {
    margin: 0;
    padding: 8px 15px;
    font-size: 11px;
    line-height: 1.82;
    color: #999999;
    text-transform: uppercase;
    margin-top: 14px;
    background-color: transparent;
    cursor: default;
}

.multiselect-container > li.multiselect-group.disabled {
    color: #999999;
}

.multiselect-container > li.multiselect-group:first-child > label,
.multiselect-container > li.multiselect-group:first-child.active > label {
    margin-top: 7px;
}

.multiselect-container > li.multiselect-group.multiselect-group-clickable > label {
    cursor: pointer;
}

.multiselect-container > li.multiselect-group.disabled label,
.multiselect-container > li.multiselect-group.disabled:hover label,
.multiselect-container > li.multiselect-group.disabled:focus label {
    background-color: transparent;
    cursor: not-allowed;
}

.multi-select-full > .btn-group {
    width: 100%;
}

    .multi-select-full > .btn-group .multiselect-container {
        width: auto;
        padding: 10px;
    }

.multi-select-fixed > .btn-group > .btn {
    width: 250px;
}

.multi-select-auto > .btn-group > .btn {
    width: auto;
}

div[class*=border-] > .btn-group {
    border-color: inherit;
}

    div[class*=border-] > .btn-group > .multiselect {
        border-color: inherit;
    }

.btn-group .btn {
    display: flex;
    align-items: center;
}
.btn-group .radio {
    width: 15px;
    position: relative;
}

    .btn-group .radio:before {
        content: '';
        position: absolute;
        height: 8px;
        width: 8px;
        background: none;
        border-radius: 20px;
        left: -4px;
        top: -4px;
    }

    .btn-group .radio:after {
        content: '';
        position: absolute;
        height: 16px;
        width: 16px;
        border-radius: 20px;
        border: 1px solid ;
        left: -8px;
        top: -8px;
    }

.btn-group .btn.active .radio:before {
    background: white;
}

.btn-group .btn.active .radio:after {
    border-color: white;
}

.btn-del {
    background: none !important;
    border: 1px solid #777 !important;
    box-shadow: none !important;
}

    .btn-del:hover {
        background: var(--primary-color) !important;
        border-color: var(--primary-color);
        color: white;
    }

    .btn-add:hover {
        background: var(--primary-color) !important;
        border-color: var(--primary-color);
        color: white;
    }

li.multiselect-filter {
    position: relative;
    padding: 5px 12px;
    margin-bottom: 5px;
}

    li.multiselect-filter i {
        font-size: 15px;
        position: absolute;
        left: 13px;
        top: 50%;
        margin-top: -6px;
        opacity: 0.5;
        filter: alpha(opacity=50);
    }

    li.multiselect-filter .form-control {
        padding-left: 36px;
    }

.input-group-btn + .multi-select-full .multiselect:first-child,
.input-group-addon + .multi-select-full .multiselect:first-child,
.input-group-btn + .multi-select-auto .multiselect:first-child,
.input-group-addon + .multi-select-auto .multiselect:first-child,
.input-group-btn + .multi-select-fixed .multiselect:first-child,
.input-group-addon + .multi-select-fixed .multiselect:first-child,
.input-group-btn + .btn-group .multiselect:first-child,
.input-group-addon + .btn-group .multiselect:first-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.btn-group-multiselect {
    width: 100%;
}

    .btn-group-multiselect .btn {
        float: none;
    }

    .btn-group-multiselect .multiselect {
        min-width: 0;
    }

.btn-group > .btn-group:nth-child(2) > .multiselect.btn {
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
}


/*TRIP PLAN SUMMARY*/
.three-dots {
    display: flex;
    margin-top: -.3rem;
    padding: 12px 5px;
}

.three-dots span {
    background: white;
    border-radius: 50%;
    margin: 0 2px;
    height: 5px;
    width: 5px;
}

.mobile-trip-items-actions {
    color: black;
    z-index: 1002;
}

.mobile-trip-items-actions li {
    width: 100%;
}

.daterange-custom-display:after {
    content: '';
}

.border-md {
    border-radius: 8px;
}

.border-summary {
    border-color: #009688 !important;
}

.border-danger, .border-warning {
    border: 2px red solid;
}

.contact-field {
    color: #888;
    font-size: 13px;
}

.div-border {
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 5px;
    margin-top: 5px;
}

.body-border {
    font-size: 15px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-top: 10px;
}

.th-trip-participant {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.td-trip-participant {
    line-height: 17px !important;
}

.th-trip-participant-policy {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.td-trip-participant-policy {
    line-height: 17px !important;
}

.btn-xs-only {
    display: none;
}


/*XS ONLY*/
@media (max-width: 767px) {
    .page-sidebar-toggled:after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        /* ReSharper disable once HexColorValueWithAlpha */
        background-color: #0000007d;
        z-index: 1030;
    }

    .navbar-brand {
        padding: 0;
    }

    .table-schedule td {
        padding: 8px 5px !important;
        position: relative;
    }

    .btn-xs-only {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
    }

    .pnr-btn-action {
        position: absolute;
        right: 15px;
        bottom: 0;
    }
}


.add-tripitem-btn-container button {
    min-width: 99px;
}

.add-tripitem-btn-container i {
    font-size: 25px;
}

/*XS AND SM*/
@media (max-width: 991px) {
    .add-tripitem-btn-container {
        text-align: center;
        padding-top: 10px;
    }

    .segment-detail {
        padding: 10px
    }

    .segment-origin {
        width: auto;
        text-align: left;
        vertical-align: top;
    }

    .add-tripitem-btn-container button {
        min-width: 90px;
    }
}

.tripplan-row {
    display: table;
    width: 100%;
}

.tripplan-left {
    display: table-cell;
    width: auto;
    padding-right: 25px;
}

.tripplan-right,
.tripplan-right .affix {
    display: table-cell;
    width: 300px;
    top: 90px;
}

/*MD KEATAS*/
@media (min-width: 992px) {
    .add-tripitem-btn-container {
        text-align: right;
    }

        .add-tripitem-btn-container .btn-group {
            margin-top: 5px;
        }

    .pl-0-sm {
        padding-left: 0;
    }

    .table-body-participant {
        height: 231px;
        overflow-x: hidden;
        overflow-y: auto
    }
}


.bg-green {
    background-color: #5cb85c;
}

.bg-red {
    background-color: #F44336;
}

.bg-blue {
    background-color: #549ae4;
}

.panel.bg-blue {
    background-color: #549ae4;
    color: white;
}

.bg-slate {
    background-color: #607D8B;
}

.bg-gray {
    background-color: #999999;
}

.bg-purple {
    background-color: #5E35B1;
}





.panel.summary-disclaimer {
    background-color: #549ae4;
    color: white;
    padding: 15px 15px;
}

    .panel.summary-disclaimer div:first-child {
        margin-bottom: 4px;
        font-size: 13px;
        border-bottom: 1px solid white;
        font-weight: 900;
    }

    .panel.summary-disclaimer div:last-child {
        line-height: 16px;
    }

    .panel.summary-disclaimer ul {
        padding-left: 15px;
        margin-bottom: 0;
        margin-top: 5px;
    }

    .panel.summary-disclaimer li {
        list-style: disc;
    }


/*TILE LAMA*/
.tile-container {
    padding: 5px 5px;
    border-radius: 12px;
    margin-bottom: 5px;
    margin-top: 5px;
    color: white;
    display: table;
    width: 100%;
}


    .tile-container .tile-left {
        display: table-cell;
        width: 90px;
        text-align: center;
        padding-top: 5px;
    }

        .tile-container .tile-left i {
            font-size: 27px;
        }

        .tile-container .tile-left div {
            margin-top: 5px;
            font-weight: 500;
        }

    .tile-container .tile-right {
        display: table-cell;
        width: auto;
        text-align: right;
        padding-right: 10px;
    }

        .tile-container .tile-right .tile-amount {
            font-size: 140%;
            font-weight: bold;
        }

        .tile-container .tile-right .tile-currency {
            display: inline-block;
            margin-left: 5px;
        }

        .tile-container .tile-right .tile-badge {
            background: white;
            display: inline-block;
            color: black;
            padding: 0px 10px;
            border-radius: 10px;
        }



/*TILE BARU*/
.ops-tile {
    color: white;
    margin-bottom: 5px;
}

.ops-tile-container {
    padding: 5px 5px;
    border-radius: 12px;
    margin-bottom: 5px;
    margin-top: 5px;
    display: table;
    width: 100%;
}

    .ops-tile-container .tile-left {
        display: table-cell;
        text-align: center;
        padding-top: 5px;
        padding-left: 5px;
    }

        .ops-tile-container .tile-left i {
            font-size: 27px;
        }

        .ops-tile-container .tile-left div {
            margin-top: 5px;
            font-weight: 500;
        }

    .ops-tile-container .tile-right {
        display: table-cell;
        width: auto;
        text-align: right;
        padding-right: 2px;
    }

    .ops-tile-container .tile-amount {
        font-size: 15px;
        margin-left: 5px;
    }

    .ops-tile-container .tile-right .tile-currency {
        display: inline-block;
        margin-left: 5px;
    }

    .ops-tile-container .tile-right .tile-badge {
        background: white;
        display: inline-block;
        color: black;
        padding: 0px 10px;
        border-radius: 10px;
    }

.ops-tile .tile-border {
    text-align: center;
    margin-bottom: 15px;
}

.ops-tile .tile-relative {
    position: relative;
    margin-left: 5px;
    margin-right: 40px
}

.ops-tile .tile-border .ops-tile-percent-bg {
    /* ReSharper disable once HexColorValueWithAlpha */
    border-bottom: 4px solid #ffffff94;
    margin: 0px 5px;
    text-align: right;
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
}

.ops-tile .tile-border .ops-tile-percent {
    border-bottom: 4px solid white;
    margin: 0px 5px;
    text-align: right;
    position: absolute;
    top: 0;
    width: 0%;
    left: 0;
}

.ops-tile .tile-lostsaving {
    position: absolute;
    right: 15px;
}

.ops-tile .tile-border .ops-tile-percent-text {
    position: absolute;
    right: -33px;
    top: -5px;
    font-size: 11px;
}


.ops-tile .tile-bottom {
    text-align: center;
    padding-bottom: 6px;
}

.icon-user-sidebar {
    width: 25px;
}

.monospace {
    font-family: monospace;
}


.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


.expander-chevron {
    position: relative;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    padding: 0;
}

    .expander-chevron .ops-title::after {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        min-width: 1em;
        font-size: 16px;
        vertical-align: middle;
        position: absolute;
        right: 5px;
        top: 10px;
        color: #848484;
        -webkit-font-smoothing: antialiased;
        content: "\e9c9";
    }

    .expander-chevron .ops-title.collapsed::after {
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        min-width: 1em;
        font-size: 16px;
        vertical-align: middle;
        position: absolute;
        right: 3px;
        top: 10px;
        color: #848484;
        -webkit-font-smoothing: antialiased;
        content: "\e9cb";
    }

.ops-title2::after {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    min-width: 1em;
    font-size: 16px;
    vertical-align: middle;
    position: absolute;
    right: 3px;
    top: 1px;
    color: #848484;
    -webkit-font-smoothing: antialiased;
    content: "\e9c9";
}

.collapsed .ops-title2::after {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    min-width: 1em;
    font-size: 16px;
    vertical-align: middle;
    position: absolute;
    right: 0px;
    top: 1px;
    color: #848484;
    -webkit-font-smoothing: antialiased;
    content: "\e9cb";
}


.ops-title2 {
    color: #30373e;
    padding-right: 12px;
    padding-left: 15px;
}

.ops-title {
    padding: 10px;
    font-size: 12px;
    font-weight: 500;
    color: #1d1d1d;
    padding-right: 25px;
    cursor: pointer;
}

.ops-title-right {
    float: right;
    font-weight: normal;
    display: none;
}

.collapsed .ops-title-right {
    display: inline-block;
}

.ops-point {
    position: absolute;
    border-radius: 100%;
    height: 20px;
    width: 20px;
    text-align: center;
    font-size: 13px;
    color: white;
    background: #b9b9b9;
}


    .ops-point.current {
        background: #2196f3;
    }

.ops-text {
    padding-left: 27px;
    font-size: 12px;
}

.current .ops-text {
    font-weight: bold;
}

.ops-content {
    font-size: 12px;
    padding: 0px 10px 10px 10px;
}

.text-linethrough {
    text-decoration: line-through;
}

.ops-approver-row {
    position: relative;
    margin-bottom: 10px;
}

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

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

.tp-loading .item-1,
.tp-loading .item-2,
.tp-loading .item-3,
.tp-loading .item-4,
.tp-loading .item-5,
.tp-loading .item-6,
.tp-loading .item-7,
.tp-loading .item-8,
.tp-loading .item-9,
.tp-loading .item-10 {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    position: relative;
    text-indent: -9999px;
    border: none;
    font-size: 0 !important;
}

.tp-loading .item-1 {
    width: 189px;
    height: 18px;
    margin: 2px;
}

.tp-loading .item-2 {
    width: 108px;
    margin: 2px;
    height: 20px;
}

.tp-loading .item-3 {
    width: 151px;
    margin: 2px;
    height: 14px;
}

.tp-loading .item-4 {
    width: 84px;
    margin: 2px;
    height: 15px;
}

.tp-loading .item-5 {
    width: 105px;
    margin: 2px;
    height: 15px;
}

.tp-loading .item-6 {
    width: 100px;
    margin: 2px;
    height: 14px;
    left: 25px;
}

.tp-loading .item-7 {
    margin: 2px;
    left: 47px;
    width: 83px;
    height: 7px;
}

.tp-loading .item-8 {
    margin: 2px;
    left: 70px;
    width: 60px;
    height: 7px;
}

.tp-loading .item-9 {
    margin: 2px;
    left: 3px;
    width: 127px;
    height: 13px
}

.tp-loading .item-10 {
    margin: 2px;
    left: 9px;
    width: 121px;
    height: 20px;
}

.tp-overlay-link {
    position: absolute;
    left: -15px;
    right: -15px;
    bottom: -15px;
    top: -15px;
}

.demography-tile {
    display: table;
    width: 100%;
    margin-bottom: 5px;
}

    .demography-tile > div {
        color: #009688;
        margin: 5px 0px;
        display: table-cell;
        border: 2px solid #009688;
    }

        .demography-tile > div > div:nth-child(1) {
            font-size: 25px;
            display: table-cell;
            vertical-align: middle;
            padding-left: 5px;
            text-align: center;
        }

        .demography-tile > div > div:nth-child(2) {
            font-size: 11px;
            padding: 0 5px;
            display: table-cell;
            vertical-align: middle;
            padding-right: 5px;
        }

#filter-panel.all {
    position: absolute;
    right: -20px;
    width: 400px;
    z-index: 3;
    top: 30px;
    transition: all 0.3s ease-out;
    opacity: 1;
}

    #filter-panel.all.ng-hide {
        opacity: 0;
        margin-top: -5px;
    }





#filter-panel .panel-heading {
    position: relative;
}



    #filter-panel .panel-heading:after {
        bottom: 100%;
        right: 33px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(136, 183, 213, 0);
        border-bottom-color: #ffffff;
        border-width: 10px;
        margin-left: -10px;
    }

#filter-panel .panel-default .panel-heading:after {
    border-bottom-color: #fff;
}

#filter-panel.all .panel-body {
    max-height: calc(100vh - 260px);
    overflow: auto;
}

#filter-panel.all .filter-overlay {
    background: #00000059;
    left: 0;
    right: 0;
    position: fixed;
    bottom: 0;
    top: 0;
    z-index: -1;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    opacity: 1;
}

.filter-all-overlay {
    background: #0000003b;
    left: 0;
    right: 0;
    position: fixed;
    bottom: 0;
    top: 0;
    z-index: -1;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    opacity: 1;
}
    .filter-all-overlay.ng-hide {
        opacity: 0;
    }

@media (max-width: 768px) {
    #filter-panel,
    #filter-panel.all {
        position: fixed;
        right: 0px;
        left: 0px;
        z-index: 4;
        width: auto;
        margin-top: 25px;
    }

        #filter-panel .panel-body {
            max-height: calc(100vh - 270px);
            overflow: auto;
        }

        #filter-panel .panel-default .panel-heading:after {
            border-bottom-color: #f5f5f5;
        }


        #filter-panel .panel-heading:after {
            content: none;
        }

    .filter-overlay {
        background: #000;
        left: 0;
        right: 0;
        position: fixed;
        bottom: 0;
        top: 0;
        z-index: -1;
        opacity: 0.5;
        visibility: visible;
        transition: all 200ms linear 0s;
    }

        .filter-overlay.collapsed {
            opacity: 0;
            visibility: hidden;
        }

    
}

.badge-opsicorp-flat {
    border: 1px solid #009688;
    color: #009688;
    padding: 5px 10px;
    border-radius: 20px;
}


.sidebar .nav-user {
    padding: 15px 25px;
    background: #30373e;
}

.sidebar .nav > li > a {
    padding: 12px 20px;
    color: #ccc;
}

.sidebar .nav > li.active > a, .sidebar .nav > li.active > a:focus, .sidebar .nav > li.active > a:hover {
    background: #24292e;
    color: #fff;
}


.sidebar .nav > li > a > i {
    background: none;
    font-size: 23px;
    color: #f9f9f9;
}

.sidebar .nav > li.active > a > i {
    background: none;
    color: #009688;
}

.sidebar .badge {
    background-color: #ff0000 !important;
    border-color: #fff !important;
    border: 1px solid;
    font-size: 12px;
    padding: 2px 10px;
}

.btn-icon {
    padding-left: 8px;
    padding-right: 8px;
    min-width: 33px;
    min-height: 33px;
}


/*------------------------*/
/* MAIN SIDE BAR BACKGROUND*/
/*------------------------*/

/*DESKTOP*/
@media (min-width: 768px) {
    .sidebar {
        z-index: 1033;
    }
}

.fixed-bottom-action-xs {
    text-align: right;
}

    .fixed-bottom-action-xs .left-action {
        display: inline;
    }

    .fixed-bottom-action-xs .middle-action {
        display: inline;
    }

    .fixed-bottom-action-xs .right-action {
        display: inline;
        margin-left: 5px;
    }

.simpler-sidebar-mask {
    overscroll-behavior: contain;
}





.sidebar, .sidebar-bg {
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}

.slimScrollBar {
    background: none !important;
}
/*------------------------*/
/* SIDE BAR USER*/
/*------------------------*/
.sidebar .nav-user {
    background: #f6f6f6;
}

    .sidebar .nav-user .info .name, .sidebar .nav-user .info .name > a, .sidebar .nav-user .info .name > a:focus, .sidebar .nav-user .info .name > a:hover {
        color: #000;
    }

    .sidebar .nav-user .info .position {
        color: #525252;
    }



/*------------------------*/
/* SIDE BAR ITEM HOVER */
/*------------------------*/
.sidebar .nav > li.expand > a, .sidebar .nav > li > a:focus, .sidebar .nav > li > a:hover {
    background: #f4f4f4;
    color: black;
}

.page-sidebar-minified .sidebar .nav > li.has-sub:focus > a, .page-sidebar-minified .sidebar .nav > li.has-sub:hover > a {
    background: #f4f4f4;
}

/*------------------------*/
/* SIDE BAR ITEM SELECTED */
/*------------------------*/
.sidebar .nav > li.active > a, .sidebar .nav > li.active > a:focus, .sidebar .nav > li.active > a:hover {
    background: #eaeaea;
}


    /*TEXt*/
    .sidebar .nav > li.active > a, .sidebar .nav > li.active > a:focus, .sidebar .nav > li.active > a:hover {
        color: #00695f;
        font-weight: 600;
    }

        /*ICON*/

        .sidebar .nav > li.active > a > i {
            color: #01403a;
            background: none;
        }



/*------------------------*/
/*SIDE BAR CARRET COLOR*/
/*------------------------*/
.sidebar .nav > li > a > .caret.pull-right {
    color: #7f7f7f;
}

/* ------------------------------------------------------------------------------
*
*  # Pagination (multiple pages) component
*
*  Overrides for pagination bootstrap component
*
*  Version: 1.1
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */
.pagination {
    margin-top: 0;
    margin-bottom: -6px;
}

    .pagination > li > a,
    .pagination > li > span {
        min-width: 36px;
        text-align: center;
    }

    .pagination.pagination-rounded > li:first-child > a,
    .pagination.pagination-rounded > li:first-child > span {
        border-bottom-left-radius: 100px;
        border-top-left-radius: 100px;
    }

    .pagination.pagination-rounded > li:last-child > a,
    .pagination.pagination-rounded > li:last-child > span {
        border-bottom-right-radius: 100px;
        border-top-right-radius: 100px;
    }

.pagination-flat > li > a,
.pagination-flat > li > span {
    margin-left: 1px;
    border-radius: 3px;
    min-width: 36px;
    background-color: transparent;
}

    .pagination-flat > li > a,
    .pagination-flat > li > span,
    .pagination-flat > li > a:hover,
    .pagination-flat > li > span:hover,
    .pagination-flat > li > a:focus,
    .pagination-flat > li > span:focus {
        border-color: transparent;
    }

.pagination-flat > .active > a,
.pagination-flat > .active > span,
.pagination-flat > .active > a:hover,
.pagination-flat > .active > span:hover,
.pagination-flat > .active > a:focus,
.pagination-flat > .active > span:focus {
    border-color: transparent;
}

.pagination-flat > .disabled > span,
.pagination-flat > .disabled > span:hover,
.pagination-flat > .disabled > span:focus,
.pagination-flat > .disabled > a,
.pagination-flat > .disabled > a:hover,
.pagination-flat > .disabled > a:focus {
    border-color: transparent;
}

.pagination-flat.pagination-rounded > li > a,
.pagination-flat.pagination-rounded > li > span {
    border-radius: 100px;
}

.pagination-flat.pagination-lg > li > a,
.pagination-flat.pagination-lg > li > span {
    min-width: 40px;
}

.pagination-flat.pagination-sm > li > a,
.pagination-flat.pagination-sm > li > span {
    min-width: 34px;
}

.pagination-flat.pagination-xs > li > a,
.pagination-flat.pagination-xs > li > span {
    min-width: 32px;
}

.pagination-separated > li > a,
.pagination-separated > li > span {
    margin-left: 2px;
}

.pagination-lg > li > a,
.pagination-lg > li > span {
    min-width: 40px;
}

.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

.pagination-sm > li > a,
.pagination-sm > li > span {
    min-width: 34px;
}

.pagination-xs > li > a,
.pagination-xs > li > span {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.6666667;
}

.pagination-xs > li:first-child > a,
.pagination-xs > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.pagination-xs > li:last-child > a,
.pagination-xs > li:last-child > span {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

.pagination-xs > li > a,
.pagination-xs > li > span {
    min-width: 32px;
}

/*------------------------*/
/* SIDE BAR CARRET COLOR*/
/*------------------------*/
.sidebar .nav > li > a > .caret.pull-right {
    color: #000000;
}


/*--------------------*/
/* SIDE BAR ITEM TEXT */
/*--------------------*/
.sidebar .nav > li > a {
    color: #5b5b5b;
    font-weight: 500;
}

.sidebar .badge {
    background-color: #000000 !important;
    border: none;
}

/*------------------------*/
/* SIDE BAR SUB MENU */
/*------------------------*/
.sidebar .sub-menu {
    background: #f4f4f4;
    padding: 5px 0 5px 45px;
}

    .sidebar .sub-menu > li > a {
        color: #2c2c2c;
        padding: 7px 20px;
    }





        .sidebar .sub-menu > li > a:focus,
        .sidebar .sub-menu > li > a:hover {
            color: #000;
        }

    .sidebar .nav > li li.has-sub.active > a,
    .sidebar .sub-menu > li.active > a,
    .sidebar .sub-menu > li.active > a:focus,
    .sidebar .sub-menu > li.active > a:hover {
        color: #00695f;
    }

    /*dot sub menu*/
    .sidebar .sub-menu > li > a:before {
        content: none;
    }

    /*vertical line sub menu*/
    .sidebar .sub-menu:before {
        content: none;
    }

.page-sidebar-minified .sidebar .nav li.has-sub > .sub-menu {
    background: #f4f4f4;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
    border-radius: 0 6px 6px 0;
    z-index: -1;
}

/*icon*/
.sidebar .nav > li > a > i {
    color: #9d9d9d;
    background: none;
    font-size: 23px;
}


/*aside BAR COLLAPSE BUTTON*/
.sidebar .nav > li.divider {
    margin: 15px 0;
    height: 2px;
    background: #ddd;
}

/*aside bar sub menu active*/
.sidebar .sub-menu > li:hover {
    background: #eaeaea;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}


/*aside bar sub menu active*/
.sidebar .sub-menu > li.active {
    background: #ddd;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}

.sidebar-minify-btn, .sidebar-minify-btn:focus, .sidebar-minify-btn:hover {
    background: #ddd;
}

.sidebar .nav > li.has-minify-btn > a:focus,
.sidebar .nav > li.has-minify-btn > a:hover {
    background: #777777;
    color: white;
}


/*PANEL*/
.panel {
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2);
    border-radius: 6px;
}

.overflow-hidden {
    overflow: hidden;
}

.panel-heading {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.panel-title {
    color: #008e81;
}

.panel-footer {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.widget .panel-body {
    max-height: 370px;
    min-height: 370px;
}

.panel-body {
    border: none;
}

.panel-body.custom {
    border: none;
}

.panel-footer {
    border: none;
    border-top: 1px solid #ddd;
    background-color: #f5f5f5;
}

.panel > .panel-heading {
    border: none;
    border-bottom: 1px solid #eee;
}

.panel-default > .panel-heading {
    border: none;
    border-bottom: 1px solid #ddd;
    background-color: #ffffff;
}


.nav-trip.nav-tabs > li > a {
    font-weight: 900;
    color: #555;
    border: none;
}



.nav-trip.nav-tabs > li.active > a {
    background-color: #555;
    color: #fff;
    font-weight: 900;
}

.nav-trip.nav-tabs > li > a:hover,
.nav-trip.nav-tabs > li > a:focus {
    background-color: #ccc;
}

.nav-trip.nav-tabs-component > li > a {
    border-radius: 20px;
    position: relative;
    padding: 5px 20px;
    position: relative;
    background: #DDD;
    color: #999;
    padding-left: 44px;
    margin-right: 5px;
}

.nav-trip.nav-tabs > li.active > a,
.nav-trip.nav-tabs > li.active > a:focus,
.nav-trip.nav-tabs > li.active > a:hover {
    background-color: #CCC;
    border: none;
    color: #fff;
    font-weight: 900;
    color: #555;
}

.content-group legend {
    border-bottom: none;
    color: #24253d;
    margin-bottom: 25px;
}

.content-group.mt-10 legend {
    padding: 0 0 10px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #515151;
    border-bottom: 1px solid #DDD;
}


.iconic-input input,
.iconic-input .select2-selection__rendered {
    padding-left: 33px !important;
}

.ops-daterangepicker {
    cursor: pointer;
}

    .ops-daterangepicker > div {
        padding-left: 38px;
    }


.btn-group.scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    padding-bottom: 5px;
}

.btn-group.space .btn + .btn, .btn-group.space .btn + .btn-group.space, .btn-group.space .btn-group.space + .btn, .btn-group.space .btn-group.space + .btn-group.space {
    margin-left: 10px;
}

.btn-group.space > .btn:first-child:not(:last-child):not(.dropdown-toggle),
.btn-group.space > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.btn-group.space > .btn:last-child:not(:first-child), .btn-group.space > .dropdown-toggle:not(:first-child) {
    border-radius: 4px;
}

.position-relative {
    position: relative;
}

.grid-loading {
    position: absolute;
    left: 1px;
    right: 1px;
    bottom: 1px;
    top: 1px;
    /* ReSharper disable once HexColorValueWithAlpha */
    background-color: #ffffff9c;
}

    .grid-loading > .grid-loading-container {
        display: table;
        height: 100%;
        width: 100%;
    }

    .grid-loading .grid-loading-spinner {
        display: table-cell;
        vertical-align: middle;
        padding-top: 20px;
        text-align: center;
        width: 100%;
    }

.table-hover > tbody > tr.grid-no-item:hover {
    background: none;
}

.table thead > tr.grid-no-item > td,
.table tbody > tr.grid-no-item > td,
.table tfoot > tr.grid-no-item > td {
    padding: 40px 0;
}

tr.grid-no-item td {
}

    tr.grid-no-item td img {
        height: 120px;
    }

.table > tbody > tr.grid-no-item > td, .table > tbody > tr.grid-no-item > th, .table > tfoot > tr.grid-no-item > td, .table > tfoot > tr.grid-no-item > th, .table > thead > tr.grid-no-item > td, .table > thead > tr.grid-no-item > th {
    height: 200px;
    font-style: italic;
    vertical-align: middle;
    text-align: center;
    color: #ccc;
    font-size: 16px;
}


.cellseat {
    width: 30px;
    height: 40px;
    margin: 1px;
    padding: 0;
    font-size: 10px;
}

.aisle {
    margin: 10px;
}

.wagon-name {
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
}

.wrapper-filter {
    position: absolute;
}

    .wrapper-filter .trip-time-filter,
    .wrapper-filter .trip-type-filter {
        position: absolute;
        z-index: 30;
        background: #fff;
        border: 1px solid #bdbdbd;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        padding: 15px 20px 10px;
        -webkit-box-shadow: 0 1px 3px 0 #dce0e0;
        -moz-box-shadow: 0 1px 3px 0 #dce0e0;
        box-shadow: 0 1px 3px 0 #dce0e0;
        display: none;
        left: 45px;
        top: 8px;
        max-height: 300px;
        overflow-y: auto
    }

    .wrapper-filter .transit-filter {
        position: absolute;
        z-index: 30;
        background: #fff;
        border: 1px solid #bdbdbd;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        padding: 5px 15px 7px;
        -webkit-box-shadow: 0 1px 3px 0 #dce0e0;
        -moz-box-shadow: 0 1px 3px 0 #dce0e0;
        box-shadow: 0 1px 3px 0 #dce0e0;
        display: none;
        left: 130px;
        top: 8px;
        max-height: 300px;
        overflow-y: auto;
    }

    .wrapper-filter .airline-filter {
        position: absolute;
        z-index: 30;
        background: rgb(255, 255, 255);
        border: 1px solid rgb(189, 189, 189);
        border-radius: 3px;
        padding: 5px 15px 7px;
        box-shadow: rgb(220, 224, 224) 0px 1px 3px 0px;
        left: 210px;
        top: 8px;
        max-height: 300px;
        overflow-y: auto;
        width: 220px;
    }

.wrapper-filter .class-filter {
    position: absolute;
    z-index: 30;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(189, 189, 189);
    border-radius: 3px;
    padding: 5px 15px 7px;
    box-shadow: rgb(220, 224, 224) 0px 1px 3px 0px;
    left: 296px;
    top: 8px;
    max-height: 300px;
    overflow-y: auto;
    width: 150px;
}



    .wrapper-filter .checkbox label, .radio label {
        padding-left: 25px;
        width: 100%;
    }

.wrapper-filter .trip-time-filter {
    width: 300px;
}

.wrapper-filter .transit-filter {
    width: 120px;
}

.wrapper-filter .airline-filter .checkbox {
    position: relative;
}

    .wrapper-filter .airline-filter img {
        height: 22px;
        position: absolute;
        right: 0;
        top: -1px;
    }

.logoView {
    max-height: 100%;
    max-width: 100%;
}

.cellfseat {
    width: 10px;
    height: 5px;
    padding-top: 2px;
}

.provider-name {
    background: none;
    padding: 0;
    line-height: 1;
}

    .provider-name img {
        object-fit: cover;
        width: auto;
        height: 100%;
    }

.sabre-provider {
    height: 10px !important;
}

.amadeus-provider {
    height: 10px !important;
}

.galileo-provider {
    height: 10px !important;
}

.fare-type {
    border: 2px solid #f00;
    color: red;
    padding: 1px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 11px;
}

    .fare-type.market-fare {
        border-color: #d0021b;
        color: #d0021b;
    }

    .fare-type.corporate-fare {
        border-color: #009688;
        color: #009688;
    }

.baggage {
    display: flex;
    align-items: center;
    font-weight: 500;
}

.flight-calendar .datepicker table {
    border-collapse: separate;
    border-spacing: 5px 2px;
}

.flight-calendar .datepicker td.day:hover {
    background: none;
    cursor: default;
}

.flight-calendar .datepicker td.day.nationalHoliday {
    background-color: #038e81;
    color: #ffffff;
    font-weight: bold;
}

    .flight-calendar .datepicker td.day.nationalHoliday:hover {
        cursor: pointer;
    }


.flight-calendar .daterangepicker td.active, .flight-calendar .daterangepicker td.active:hover, .flight-calendar .datepicker td.active:hover, .flight-calendar .datepicker td.active:hover:hover, .flight-calendar .datepicker td.active:active, .flight-calendar .datepicker td.active:hover:active, .flight-calendar .datepicker td.active.active, .flight-calendar .datepicker td.active.active:hover, .flight-calendar .datepicker td.active.disabled, .flight-calendar .datepicker td.active.disabled:hover, .flight-calendar .datepicker td.active[disabled], .flight-calendar .datepicker td.active[disabled]:hover, .flight-calendar .datepicker td span.active:hover, .flight-calendar .datepicker td span.active:active, .flight-calendar .datepicker td span.active.active, .flight-calendar .datepicker td span.active.disabled, .flight-calendar .datepicker td span.active[disabled], .datetimepicker table tr td.active:hover, .datetimepicker table tr td.active:hover:hover, .datetimepicker table tr td.active.disabled:hover, .datetimepicker table tr td.active.disabled:hover:hover, .datetimepicker table tr td.active:active, .datetimepicker table tr td.active:hover:active, .datetimepicker table tr td.active.disabled:active, .datetimepicker table tr td.active.disabled:hover:active, .datetimepicker table tr td.active.active, .datetimepicker table tr td.active.active:hover, .datetimepicker table tr td.active.disabled.active, .datetimepicker table tr td.active.disabled.active:hover, .datetimepicker table tr td.active.disabled, .datetimepicker table tr td.active.disabled:hover, .datetimepicker table tr td.active.disabled.disabled, .datetimepicker table tr td.active.disabled.disabled:hover, .datetimepicker table tr td.active[disabled], .datetimepicker table tr td.active[disabled]:hover, .datetimepicker table tr td.active.disabled[disabled], .datetimepicker table tr td.active.disabled[disabled]:hover {
    background: none;
    color: #30373e;
}

.flight-calendar .datepicker td.active.active {
    background: var(--primary-color);
    color: white;
}

    .flight-calendar .datepicker td.active.active:hover {
        background: var(--primary-color) !important;
        color: white !important;
        filter: brightness(1.2);
    }

    .btn-swap-route {
        position: absolute;
        top: -11px;
        left: 0;
        right: 0;
        text-align: center;
    }

    .btn-swap-route .btn {
        width: 35px;
        background: transparent;
        color: #585858;
        border: 1px solid #727272;
        padding: 0;
        border-radius: 100%;
        height: 32px;
    }

    .btn-swap-route i {
        transition: all .1s linear;
    }

.btn-swap-route-horizontal {
    position: absolute;
    z-index: 1;
    left: -29px;
    top: 28px;
}

    .btn-swap-route-horizontal .btn {
        border-radius: 47px;
        padding: 0px;
        width: 28px;
        height: 28px;
    }

.btn-swap-route-horizontal i {
        transition: all .1s linear;
}

.panel-heading > .tools {
    float: right;
}

    .panel-heading > .tools .btn {
        margin-top: -5px
    }

    .panel-heading > .tools .btn-sm {
        margin-top: -3px;
    }

    .panel-heading > .tools .btn-xs,
    .panel-heading > .tools .toggle-switch {
        margin-top: 0;
    }

    .panel-heading > .tools .toggle-switch {
        margin-top: -3px;
    }


.select2-container .select2-search--inline .select2-search__field {
    padding-left: 9px;
}

.well table td {
    vertical-align: top;
}

.btn.w-xs {
    min-width: 60px;
}

.btn.w-sm {
    min-width: 90px;
}

.btn.w-md {
    min-width: 120px;
}

.btn.w-lg {
    min-width: 150px;
}

.btn.w-xl {
    min-width: 180px;
}

.text-opsicorp {
    color: #009688;
}

.text-opsicorp2 {
    color: #ffbe47;
}


/*28 ARPIL Pindahin dari default.ss opstatic yg omvod*/

.content {
    padding: 50px 35px;
}

.category-content.text-center {
    margin: 15px auto 0 !important;
}

    .category-content.text-center table tr td {
        color: #888;
        font-weight: 700 !important;
        font-size: 14px !important;
        ;
    }

.daterange-custom-display {
    margin: 8px auto 0;
    display: inline-block;
    line-height: inherit;
    overflow: hidden;
}

    .daterange-custom-display > i {
        font-weight: 700;
    }

    .daterange-custom-display em {
        line-height: inherit;
        vertical-align: super;
        margin: 0 12px;
        /* position: relative; */
        /* top: 10px; */
    }

.no-item {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
}

#test {
    padding: 30px 25px;
}

    #test .input-group-addon {
        background-color: #f7f7f7;
    }

        #test .input-group-addon > .ic-dropdown {
            color: #FFB733;
            font-weight: 700;
        }

#summary > .panel {
    margin-bottom: 0;
}

#summary .panel-heading {
    padding: 20px 15px !important;
}

#summary .panel-body {
    padding: 0 15px;
}

/* navtabs */

.nav-trip.nav-tabs-component > li:nth-child(3) > a {
    color: #00776a;
    border-radius: 5px;
}


/* trip wizard tab nya ada nomor step nya*/
.nav-trip.nav-tabs-component > li.trip-plan-step:nth-child(1):nth-last-child(2) > a:before,
.nav-trip.nav-tabs-component > li.trip-plan-step:nth-child(2):nth-last-child(1) > a:before {
    content: '1';
    display: inline-block;
    position: absolute;
    z-index: 9;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #CCC;
    left: -2px;
    padding: 5px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    border: 3px solid #EEE;
}

/* trip wizard tab nya ada nomor step nya*/
.nav-trip.nav-tabs-component > li.trip-plan-step:nth-child(2):nth-last-child(1) > a:before {
    content: '2';
}

.nav-trip.nav-tabs-component > li.trip-plan-step.active > a:before {
    background: #666 !important;
}





.panel.summary-disclaimer {
    background-color: rgba(84, 154, 228, .1);
    color: #24253d;
    padding: 20px 15px;
    box-shadow: none;
    border-radius: 0 0 6px 6px;
    margin-bottom: 30px !important;
}

    .panel.summary-disclaimer div:first-child {
        margin-bottom: 12px;
        font-size: 14px;
        border-bottom: 1px dashed white;
        font-weight: 700;
        padding-bottom: 14px;
        color: #666;
    }

    .panel.summary-disclaimer li {
        list-style: disc;
        color: #666;
        line-height: 1.4;
        margin-bottom: 8px;
    }


#test fieldset.content-group.mt-10 {
    padding: 0 10px;
}

#test fieldset.content-group > legend i {
    color: #00776a;
}

textarea.form-control {
    height: auto;
    padding: 15px;
}


/*icon*/

.navbar {
    min-height: 56px;
    padding-top: 10px;
}

.sidebar, .sidebar-bg {
    background: #fff;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
    top: 56px;
}

    .sidebar .nav > li > a > i {
        color: #9d9d9d;
        background: none;
        font-size: 18px;
    }

    .sidebar .nav > li > a > .icon-img, .sidebar .nav > li > a > i {
        margin-right: 10px;
    }


.datepicker {
    padding: 20px 15px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

    .datepicker.dropdown-menu {
        min-width: 275px;
    }

.form-control {
    height: 34px;
    padding: 6px;
    font-size: 13px;
}

.iconic-input input, .iconic-input .select2-selection__rendered {
    padding-left: 40px !important;
}

.iconic-input i[class^="ic-"] {
    margin-left: 10px;
}


.page-active-title {
    margin: 10px 0 20px;
    overflow: hidden;
}

    .page-active-title h1 {
        font-size: 20px;
        margin-bottom: 8px !important;
    }

    .page-active-title p {
        color: #777;
    }

.filter-button {
    padding-left: 10px;
    padding-top: 5px;
}

input.select2-search__field {
    width: 100% !important;
}




.table > tbody > tr > td.valign, .table > tbody > tr > th.valign, .table > tfoot > tr > td.valign, .table > tfoot > tr > th.valign, .table > thead > tr > td.valign, .table > thead > tr > th.valign {
    vertical-align: middle;
}


/*LABEL OPSICORP STATUS*/
.label-block {
    display: block;
    font-size: 11px;
    padding: 8px 10px;
}

.label-draft,
.label-other,
.label-waiting,
.label-approve,
.label-reject {
    border-radius: 20px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 1px;
    margin-right: 1px;
    font-size: 75%;
}

.label-xs.label-draft,
.label-xs.label-other,
.label-xs.label-waiting,
.label-xs.label-approve,
.label-xs.label-reject {
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 1px;
    margin-right: 1px;
    font-size: 75%;
}

.label-draft {
    background: #a1a1a1;
    color: #fff;
}

.label-other {
    background: none;
    color: #a1a1a1;
}

.label-waiting {
    background-color: #ffb734;
    color: #24253D;
}

.label-approve {
    background-color: #009688;
}

.label-reject {
    background-color: #bf171f;
}
label.created-by {
    word-break: break-word;
}


/*END LABEL*/


.progress-bottom {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

    .progress-bottom > .progress {
        height: 2px;
    }

/*MOBILE*/
@media (max-width: 767px) {
    .navbar-fixed-bottom, .navbar-fixed-top {
        z-index: 1031;
    }

    .panel-mobile-extend {
        margin-left: -20px;
        margin-right: -20px;
        border-radius: 0;
    }

    .btn.w-50percent-xs {
        min-width: 50%;
    }

    .btn.w-49percent-xs {
        min-width: 49%;
    }

    .global-alert-top.visible-xs {
        max-height: 6rem; /* Start from 0 for a collapsing effect */
        overflow: hidden;
        position: relative;
        transition: max-height 0.5s ease-out; /* Adjust the timing and easing function as needed */
    }

    .global-alert-top.visible-xs.show {
        padding-bottom: 3rem;
        max-height: 100vh;
    }

    .global-alert-top.visible-xs.show button {
        background: transparent;
        color: #9c9c9c;
        transition: background 0.5s ease;
    }

    .global-alert-top.visible-xs button {
        background: rgb(0,185,168);
        background: linear-gradient(0deg, rgb(0 130 118 / 73%) 0%, rgb(0 150 136 / 66%) 40%, rgba(0, 212, 255, 0) 100%);
        border: none;
        color: white;
        padding: 8px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }
}


.daterangepicker.dropdown-menu {
    z-index: 1034;
}

.progress-bar {
    background-color: #038e81;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.table > tbody > tr > td.td-more, .table > tbody > tr > th.td-more, .table > tfoot > tr > td.td-more, .table > tfoot > tr > th.td-more, .table > thead > tr > td.td-more, .table > thead > tr > th.td-more {
    text-align: right;
    vertical-align: middle;
    padding-top: 1px;
    padding-bottom: 1px;
}

.add-trip-item-title {
    padding: 10px 0;
    margin-bottom: 0;
    color: #038e81;
    font-weight: 900
}

    .add-trip-item-title > .btn {
        margin-top: -5px;
        margin-right: 5px;
    }

.dropdown-menu > li > a.selected-sort {
    font-weight: 900;
    color: #fcb322;
}


.input-list-container .input-row:after {
    content: '';
    margin-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

.datepicker td.old, .datepicker td.new {
    visibility: hidden;
    font-size: 0 !important;
    height: 0;
    padding: 0 !important;
}



.nav-ui {
    margin-bottom: 20px;
    display: table;
    width: 100%;
}

    .nav-ui .nav-action {
        width: 1px;
        display: table-cell;
        vertical-align: middle;
    }

        .nav-ui .nav-action .nav-icon i {
            font-size: 25px;
            top: 2px;
            margin-right: 15px;
        }

    .nav-ui .nav-title {
        font-size: 18px;
        font-weight: 700;
        display: table-cell;
        padding-left: 8px;
        vertical-align: middle;
    }

        .nav-ui .nav-title .nav-subtitle {
            font-size: 12px;
            font-weight: 400;
            margin-bottom: 2px;
        }

    .nav-ui.panel-heading {
        margin-bottom: 0;
    }

        .nav-ui.panel-heading > .nav-title {
            font-size: 14px;
        }

.btn.btn-back {
    background: none;
    border-radius: 50px;
    height: 30px;
    width: 30px;
    padding: 0;
    border: none;
    vertical-align: top;
    transition: background-color 0.2s ease;
}

    .btn.btn-back i {
        font-size: 12px;
        color: #4b4b4b;
    }

    .btn.btn-back:hover {
        background-color: #e0e0e0;
    }

.floating-button-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1004;
}

#myOverviewDiv {
    position: absolute;
    width: 200px;
    height: 100px;
    top: 10px;
    left: 10px;
    background-color: #f2f2f2;
    z-index: 300; /* make sure its in front */
    border: solid 1px #7986cb;
    border-radius: 10px;
}

.navbar-right-container {
    position: absolute;
    right: 20px;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.navbar-user {
    margin-right: 5px;
}

.navbar-user .navbar-user-thumbnail {
    display: inline-block;
    background: #009688;
    color: #fff;
    border-radius: 44px;
    height: 25px;
    width: 25px;
    padding: 4px 0px;
    text-align: center;
    font-size: 13px;
    line-height: 18px;
}




    .navbar-user ul.dropdown-menu {
        width: 224px;
        padding-bottom: 0px;
        border-radius: 10px;
        overflow: hidden;
        -webkit-box-shadow: 0px 3px 7px -2px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 3px 7px -2px rgba(0,0,0,0.75);
        box-shadow: 0px 3px 7px -2px rgba(0,0,0,0.75);
        border: none;
        
        transition: all 0.3s ease-out;
        opacity: 0;
        display: block;
        visibility: hidden;
        margin-top: 0;
    }

    .navbar-user.open ul.dropdown-menu {
        opacity: 1;
        margin-top: 5px;
        visibility: visible;
    }

.navbar-user .user-info {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: -1px;
    padding-top: 10px;
    cursor: default;
    margin-left: 15px;
    margin-right: 15px;
}

    .navbar-user .user-info .user-info-title {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar-user .user-info .user-info-subtitle {
        font-weight: 400;
        font-size: 13px;
        color: #8e8e8e;
        margin-top: -2px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.navbar-user ul.dropdown-menu > li {
    position: relative;
    list-style-type: none;
}


    .navbar-user ul.dropdown-menu > li > a {
        padding: 8px 20px;
        padding-left: 45px;
    }

        .navbar-user ul.dropdown-menu > li > a > i {
            position: absolute;
            left: 20px;
            top: 10px;
            color: #7b7b7b;
        }


/*SMALL*/
@media (min-width: 1281px) {
    /*Dikasih important karena ke overdoe sama style yg dikasih js*/
    .sidebar.main.left {
        width: 250px !important;
        z-index: 1010 !important;
        left: 0 !important;
    }

    .simpler-sidebar-mask {
        display: none !important;
    }


    .hamburger {
        display: none;
    }
}

@media (max-width: 1281px) {

    .sidebar, .sidebar-bg {
        left: -300px;
        width: 300px;
        z-index: 1035;
    }

    .content {
        margin-left: 0;
        margin-right: 0;
    }

    .hamburger {
        float: left;
        margin-top: -2px;
        margin-left: 8px;
    }

    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background: none;
    }

    .container, .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

        .container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
            margin-right: -15px;
            margin-left: -15px;
        }

    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin-left: 0;
    }

    .content {
        padding: 20px;
        padding-top: 40px;
    }
}

@media (max-width: 768px) {
    .content-more-header {
        padding: 20px;
        padding-top: 65px;
    }
}

input[type=text], input[type=password], textarea, select {
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    outline: none;
}

.select2-container:focus {
    outline: 0;
}

.select2-container .select2-selection--single:focus {
    outline: 0;
}


.modal-body:last-child {
    max-height: calc(100vh - 60px);
    overflow: auto;
}

.modal-body:nth-last-child(2) {
    max-height: calc(100vh - 140px);
    overflow: auto;
}

.navbar-header {
    display: flex;
}
/*Diatas layar HD 1366*/
@media (min-width: 1600px) {
    .sidebar.main.left {
        width: 350px !important;
    }

    .content {
        margin-left: 350px;
    }

    .tripplan-row {
        width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }

    .tripplan-left {
        padding-right: 80px;
    }

    .navbar-header {
        width: 440px;
    }
    
    .tripplan-right,
    .tripplan-right .affix {
        width: 350px;
    }
}

/*MOBILE*/
@media (max-width: 767px) {


    .sidebar, .sidebar-bg {
        left: -300px;
        width: 300px;
    }

    ul.nav {
        font-size: 14px;
    }

    .navbar-right-container {
        align-items: baseline;
        top: 1rem;
    }

    .sidebar .nav-user .info .position {
        font-size: 16px;
    }

    .sidebar .nav > li > a > i {
        top: 4px;
        font-size: 18px;
    }

    .nav-tab-lg li {
        min-width: auto;
    }

    .bottom-action-xs-container {
        margin-left: -15px;
        margin-right: -15px;
        margin-bottom: -50px;
    }

    .bottom-action-xs {
        background: white;
        padding: 10px 15px;
        border-top: 1px solid lightgrey;
        display: table;
        width: 100%;
    }

    .fixed-bottom-action-xs {
        position: fixed;
        bottom: 0;
        background: white;
        left: 0;
        right: 0;
        z-index: 1;
        padding: 10px 15px;
        border-top: 1px solid lightgrey;
        display: table;
        width: 100%;
    }

    .bottom-action-xs .left-action {
        display: table-cell;
        width: 50%;
        height: 50px;
        vertical-align: middle;
    }

    .bottom-action-xs .middle-action {
        display: table-cell;
        width: 10px;
        height: 50px;
        vertical-align: middle;
    }

    .bottom-action-xs .right-action {
        display: table-cell;
        width: auto;
        height: 50px;
        vertical-align: middle;
    }

    .bottom-action-xs .left-action {
        padding-right: 5px;
        text-align: left;
    }

        .bottom-action-xs .left-action .fixed-bottom-total-container {
            display: inline-block;
            cursor: pointer;
        }

        .bottom-action-xs .left-action .fixed-bottom-total-title {
            font-size: 13px;
            font-weight: 600;
        }

        .bottom-action-xs .left-action .fixed-bottom-total-amount {
            font-size: 15px;
            font-weight: 900;
            color: #009688;
            margin-right: 5px;
        }




    .bottom-action-xs .right-action {
        padding-left: 5px;
    }

        .bottom-action-xs .left-action .btn,
        .bottom-action-xs .middle-action .btn,
        .bottom-action-xs .right-action .btn {
            width: 100%;
            min-width: inherit;
        }
}



.review-hotel-mobile-container {
    background: #009688;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: -31px;
    padding-top: 20px;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.intl-tel-input {
    width: 100%;
}

[class^="ic-"], [ic*=" icon-"] {
    font-size: 16px;
}

.top-2 {
    top: 2px;
}


.breakfast-included {
    background: #038e81;
    color: #fff;
    padding: 6px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
}

    .breakfast-included.room-only {
        background: #000;
    }

    .breakfast-included i {
        top: 2px;
    }


.room-info-container {
    position: relative;
    padding-left: 35px;
}

    .room-info-container .room-icon {
        background: #ddd;
        position: absolute;
        border-radius: 30px;
        padding: 3px;
        width: 25px;
        height: 25px;
        text-align: center;
        left: 0;
    }

        .room-info-container .room-icon i {
            font-size: 12px;
            color: #fff;
            font-weight: 900;
        }

.hotel-duration {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    top: 3px;
    font-size: 10px;
}

    .hotel-duration span {
        background: #eee;
        border: 7px solid #fff;
        border-radius: 20px;
        padding: 2px 10px;
    }

.checkbox.styled span {
    display: block;
    padding-left: 5px;
}

.loading-square {
    font-size: 16px;
    background: white;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    position: relative;
    color: #515151;
}

    .loading-square i {
        font-size: 23px !important;
        height: 23px !important;
    }


.input-clear {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 1;
    bottom: 1px;
    width: 34px;
    cursor: pointer;
    text-align: center;
    padding-top: 5px;
}

    .input-clear:active {
        /* ReSharper disable once HexColorValueWithAlpha */
        background: #eaeaea61;
    }

    .input-clear:before {
        content: "\ed6b";
        font-family: 'icomoon';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        min-width: 1em;
        display: inline-block;
        text-align: center;
        font-size: 16px;
        vertical-align: middle;
        position: relative;
        top: -1px;
        -webkit-font-smoothing: antialiased;
    }

.input-group .input-clear {
    right: 42px;
    z-index: 3;
}

.input-group > span.input-group-btn > button.btn {
    border: 1px solid #e2e2e4;
    margin-left: -1px;
}

.badge-selected-member {
    background: #494949;
    color: #fff;
    padding: 2px 8px;
    border-radius: 17px;
}

.multi-select-full button.btn {
    font-weight: normal !important;
}

.progress-secondary.progress {
    height: 4px;
}

.progress-secondary > .progress-bar {
    background-color: #ffb534;
}

.text-ellipsis {
    width: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

@-webkit-keyframes eqFadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,15px,0);
        transform: translate3d(0,15px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.eqFadeInUp {
    animation-duration: 0.5s;
    -webkit-animation-name: eqFadeInUp;
    animation-name: eqFadeInUp
}



@keyframes eqFadeOutUp {
    from {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }

    100% {
        opacity: 0;
        -webkit-transform: translate3d(0,-15px,0);
        transform: translate3d(0,-15px, 0);
       
    }
}

.eqFadeOutUp {
    animation-duration: 0.3s;
    -webkit-animation-name: eqFadeOutUp;
    animation-name: eqFadeOutUp;
}


@-webkit-keyframes eqFadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,-15px,0);
        transform: translate3d(0,-15px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes eqFadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,-15px,0);
        transform: translate3d(0,-15px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.eqFadeInDown {
    animation-duration: 0.3s;
    -webkit-animation-name: eqFadeInDown;
    animation-name: eqFadeInDown;
}

    .eqFadeInDown.ng-leave {
        -webkit-animation-name: eqFadeOutUp;
        animation-name: eqFadeOutUp;
    }



/* NEW DESIGN SELECT FLIGHT */
/*NEW FLIGHT*/
.flt-list {

}



.flt-container {
    
    position: relative;
    background: #fff;
    transition: all .3s ease;
    box-shadow: 0 1px 2px rgba(60,64,67, 0.3), 0 1px 3px 1px rgba(60,64,67, 0.15);
}

    .flt-container:before {
        content: '';
        background: #dadce0;
        height: 1px;
        position: absolute;
        top: -1px;
        width: 100%;
    }

.flt-container:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}


.flt-container.flt-expand {
   margin: 10px 0;
   border-radius: 8px;
}

.flt-container.flt-expand:before {
    height: 0;
}

.flt-container .flt-detail-expandable {
   display: none;

}
.flt-container.flt-expand .flt-detail-expandable {
    display: block;
}

.flt-content {
   position: relative;
}

.flt-content a.link {
    position: relative;
}

.flt-content a.link:hover {
    color: #2766d7 !important;
    text-decoration: none !important;
}

.flt-content a.link.selected::after {
    content: "";
    border-radius: 5px;
    position: absolute;
    left: 35%;
    right: 0;
    bottom: -5px; /* Adjust as needed */
    height: 2px; /* Adjust the height of the underline */
    width: 25px;
    background-color: cornflowerblue; /* Uses the current text color */
}

.flt-block {
    padding: 10px 15px;
}

.flt-row {
    display: table;
    width: 100%;
}

.flt-img {
    display: table-cell;
    vertical-align: middle;
    width: 40px;
    text-align: right;
    padding-bottom: 3px;
}

    .flt-img img {
        max-height: 40px;
        max-width: 40px;
    }

.flt-info {
    display: table-cell;
    vertical-align: middle;
    width: 120px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    padding-bottom: 10px;
}

.train-info {
    display: table-cell;
    vertical-align: middle;
    width: 290px;
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    padding-bottom: 10px;
}

.flt-duration-text {
    color: inherit;
    font-weight: 700;
}

.flt-transit-text {
    font-weight: 400;
    color: #939396;
}

.flt-route-text {
    color: #939396;
}

.flt-details-link {
    position: absolute;
    bottom: -3px;
    left: 15px;
}

.toggle-chevron-icon:before {
    content: "\e986";
    font-family: 'rspicon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 16px;
    color: inherit;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #e59a30;
}

.collapsed .toggle-chevron-icon:before,
.collapsed.toggle-chevron-icon:before {
    content: "\e985";
}




.flt-details-link a {
    padding-bottom: 3px;
    font-size: 12px;
    cursor: pointer;
    border-bottom: none;
}

.collapsed .flt-details-link a,
.flt-expand .flt-details-link a,
.flt-details-link.collapsed a {
    
    border-bottom: 2px solid;
}


.flt-info .flt-name {
    font-weight: 700;
}

.flt-info .flt-number {
    font-size: 12px;
    margin-top: -1px;
    color: #939396;
}

.flt-route {
    display: table-cell;
    vertical-align: middle;
    width: 16%;
    padding-bottom: 10px;
    padding-right: 10px;
}

    .flt-route .flt-time {
        font-size: 15px;
        font-weight: 700;
        position: relative;
    }

    .flt-route .flt-crossday {
        position: absolute;
        font-size: 12px;
        top: -10px;
    }

.flt-col {
    display: table-cell;
    vertical-align: middle;
}

.flt-duration {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 17%;
    padding-bottom: 10px;
}



.flt-facilities {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding-bottom: 10px;
    color: #038e81;
}

.flt-baggage {
    position: relative;
    color: #038e81;
    margin-top: -2px;
}

.flt-facilities .ic-baggage {
    font-size: 21px;
    top: 4px;
}

.flt-facilities .cls-text {
    font-weight: 600;
}


.flt-baggage-notincluded {
    position: absolute;
    top: -13px;
    font-size: 15px;
    right: -4px;
}



.flt-price {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    width: 220px;
    position: relative;
}

.flt-price-perclass {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    width: 140px;
    position: relative;
}

.fare-view {
    font-size: 16px;
    font-weight: bold;
}

.select-fare {
    padding: 3px 0px;
    position: relative;
    border: 1px solid #a7a7a7;
    border-radius: 5px;
}

.text-fare {
    font-weight: 400;
}

    .text-fare span {
        font-weight: 700;
    }

.flt-chevron {
    color: #ffb733;
    margin-left: 15px;
    font-size: 19px;
    top: 5px;
}

.flt-detail-line {
    border-top: 1px solid #cecece;
}

.flt-summary .flt-detail-line {
    margin-top: 5px;
    border-top: none;
    margin-bottom: 15px;
}

.flt-price-line {
   border-top: 1px solid #cecece;
}

.flt-summary .flt-price-line {
   margin-top: 5px;
   border-top: none;
   margin-bottom: 15px;
}

.flt-detail-box {
    background: #f9f9f9d9;
    padding: 12px 0 12px 60px;
}

.segment_box {
    display: table;
    width: 100%;
    color: #939396;
    position: relative;
}

    .segment_box .segment_airlines {
        display: table-cell;
        width: 140px;
        vertical-align: top;
        padding-right: 10px;        
    }


    .segment_box .segment_route {
        vertical-align: top;
        display: table-cell;
        width: 320px;
    }


    .segment_box .segment_facility {
        display: table-cell;
        vertical-align: central;
        padding-right: 10px;
    }

    .segment_box .segment_airlines .airlines_logo img {
        max-width: 80px;
        max-height: 50px;
    }


    .segment_box .segment_airlines .airlines_name,
    .segment_box .segment_airlines .airlines_operated_name {
        font-size: 14px;
        font-weight: 700;
    }

    .segment_box .segment_airlines .airlines_code,
    .segment_box .segment_airlines .airlines_operated_code {
        color: #212121;
        font-weight: 700;
        font-size: 13px;
        margin-top: -5px;
    }

    .segment_box .segment_airlines .airlines_operated {
        display: inline-block;
        color: #005cc6;
        margin-top: 10px;
        margin-bottom: 0px;
        font-size: 12px;
        font-weight: 500;
    }



    .segment_box .segment_departure {
        position: relative;
        padding-left: 100px;
    }

    .segment_box .segment_origin {
        border-left: 1px dashed #ddd;
        padding-left: 25px;
        position: relative;
    }

        .segment_box .segment_origin:before {
            content: '';
            background-color: #fff;
            border: 3px solid #c0c4ca;
            height: 15px;
            width: 15px;
            border-radius: 50%;
            position: absolute;
            left: -8px;
        }

    .segment_box .time_depart,
    .segment_box .time_arrive {
        position: absolute;
        left: 0;
        text-align: right;
    }


    .segment_box .duration_segment_ {
        display: inline-block;
        padding: 1px 7px;
        font-size: 12px;
        margin: 10px 0px;
    }

        .segment_box .duration_segment_ i {
            top: 2px;
            font-size: 14px;
            margin-right: 5px;
        }


    .segment_box .segment_arrive {
        position: relative;
        padding-left: 100px;
    }

    .segment_box .segment_destination {
        padding-left: 25px;
        position: relative;
    }

        .segment_box .segment_destination:before {
            content: '';
            position: absolute;
            left: 50%;
            border-radius: 50% 50% 50% 0;
            border: 4px solid #fff;
            width: 15px;
            height: 15px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            background-color: #aaa;
            border: 1px solid #aaa;
            position: absolute;
            left: -8px;
        }

        .segment_box .segment_destination:after {
            position: absolute;
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            top: 9px;
            left: -4px;
            margin-top: -5px;
            background-color: #fff;
        }


    .segment_box .time_ {
        color: #212121;
        font-size: 16px;
        font-weight: 700;
        gap: 7px;
    }

    .segment_box .date_ {
        font-size: 13px;
        font-weight: 500;
    }

    .segment_box .city_name_ {
        color: #212121;
        font-size: 15px;
        font-weight: 700;
    }

    .segment_box .airport_name_ {
        color: #212121;
        font-weight: 600;
    }

    /*.segment_box .segment_class {
        display: table-cell;
        vertical-align: top;
        text-align: right;
    }*/

    .segment_box .segment_class span {
        color: #24253d;
    }

.not-comply {
    font-weight: 900;
    color: red;
    margin-right: 5px;
}


.transit-duration {
    border: 1px solid #5499E4;
    border-radius: 15px;
    padding: 5px 30px;
    font-size: 12px;
    font-weight: 500;
    margin: 20px 0 30px;
    color: #939396;
}

    .transit-duration span:first-child {
        color: #24253d;
        font-weight: 700;
    }


    .transit-duration .rounded {
        font-size: 8px;
        color: #24253d;
        margin: 0 5px;
    }

/*AIRLINE END*/


.panel-search-compact {
    background: #ffffff;
    padding: 10px 15px;
    position: absolute;
    top: -6px;
    right: 0;
    border-radius: 6px;
    border: 1px solid #ddd;
    left: 320px;
}
.panel-personal-information {
    background: #ffffff;
    padding: 10px 15px;
    border-radius: 6px;
    border: 1px solid #ddd;
    overflow: hidden;
}
.no-shadow {
    box-shadow: none;
}

.modal-danger .modal-header {
    background: #d30300;
    color: #fff;
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-bottom: none;
}

.no-radius {
    border-radius: 0;
}
.search-result-text {
    background: white;
    text-align: center;
    margin-bottom: 10px;
    font-size: 15px;
    margin: 0;
    font-style: italic;
    box-shadow: 0 1px 2px rgba(60,64,67, 0.3), 0 1px 3px 1px rgba(60,64,67, 0.15);
}

.search-result-text span {
    color: var(--primary-color);
    font-weight: 900;
}

.radio-fare.checkbox input[type=checkbox],
.radio-fare.checkbox-inline input[type=checkbox],
.radio-fare.radio input[type=radio],
.radio-fare.radio-inline input[type=radio] {
    margin-left: 5px;
}

.radio-fare {
    margin-top: 0;
    margin-bottom: 5px;
}

.checkbox.radio-fare label, .radio.radio-fare label {
    padding-left: 0px;
    margin-top: 0;
}

.checkbox.radio-fare label, .radio.radio-fare label {
    padding-right: 23px;
    border-radius: 5px;
}



.notcomply i {
    color: red;
    margin-right: 5px;
    top: -1px;
}

.flt-summary-affix {
    max-height: calc(100vh - 278px);
    overflow: auto;
}


.flt-summary-affix .flt-summary:last-child {
   /*border-bottom: none;*/
}

.flt-summary {
    padding: 15px 10px;
    /*border-bottom: 3px solid var(--primary-color);*/
    border-bottom: 1px solid #ddd;
}

    .flt-summary div.mb-10 {
        font-weight: 900;
        font-size: 15px;
    }

    .flt-summary .flt-img {
        width: 30px;
        vertical-align: top;
    }

        .flt-summary .flt-img img {
            max-width: 30px;
            max-height: 30px;
        }

    .flt-summary .flt-info {
        padding-bottom: 0px;
        padding-left: 8px;
        vertical-align: top;
    }

    .flt-summary .flt-row2 {
        display: table;
        width: 100%;
        border-top: 1px solid #ddd;
        padding-top: 5px;
    }

    .flt-summary .flt-route {
        display: table-cell;
        vertical-align: middle;
        padding-bottom: 0;
    }

    .flt-summary .flt-duration {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        width: 15%;
        padding-bottom: 0;
    }

    .flt-summary .fare-detail {
        font-size: 12px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

/* width */
.flt-summary-affix::-webkit-scrollbar {
    width: 2px;
}

/* Track */
.flt-summary-affix::-webkit-scrollbar-track {
    background: #f1f1f1;
    position: absolute;
}

/* Handle */
.flt-summary-affix::-webkit-scrollbar-thumb {
    background: #888;
    position: absolute;
    border-radius: 10px;
}

    /* Handle on hover */
    .flt-summary-affix::-webkit-scrollbar-thumb:hover {
        background: #555;
        position: absolute;
    }

.flt-row2 .flt-route > .flt-time {
    font-size: 13px;
}

.flt-row2 .flt-route {
    width: auto;
}

    .flt-row2 .flt-route .flt-crossday {
        position: absolute;
        font-size: 10px;
        top: -5px;
    }


.flt-row2 .flt-duration {
    width: auto;
    text-align: right;
}

.flt-row2 .detail-chevron {
    display: table-cell;
    text-align: right;
    width: 30px;
    vertical-align: bottom;
    padding-right: 4px;
    padding-left: 5px;
    color: #e59a30;
}

    .flt-row2 .detail-chevron:before {
        content: "\e986";
        font-family: 'rspicon' !important;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        font-size: 16px;
        color: inherit;
        position: relative;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

.flt-row2.collapsed .detail-chevron:before {
    content: "\e985";
    font-family: 'rspicon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 16px;
    color: inherit;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.flt-summary .transit-duration {
    padding: 2px 0px;
    margin: 5px 0;
}

.flt-summary .segment_box {
    padding: 5px;
}


.flt-summary .segment_airline_block {
    display: table;
    width: 100%;
}

.flt-summary .segment_box .time_ {
    font-size: 13px;
}

.flt-summary .segment_box .city_name_ {
    font-size: 13px;
    font-weight: 700;
}

.flt-summary .segment_airlines,
.flt-summary .segment_route,
.flt-summary .segment_class {
    display: block;
    width: auto;
    margin-bottom: 10px;
}

.flt-summary .flt-detail-line {
    margin-top: 5px;
    margin-bottom: 5px;
}

.flt-summary .flt-price-line {
   margin-top: 5px;
   margin-bottom: 5px;
}

.flt-summary .segment_box .segment_airlines .airlines_name,
.flt-summary .segment_box .segment_airlines .airlines_operated_name {
    font-size: 13px;
}

.flt-summary .segment_box .segment_airlines .airlines_code,
.flt-summary .segment_box .segment_airlines .airlines_operated_code {
    font-size: 12px;
}

.flt-summary .segment_box .duration_segment_ {
    padding: 0px 5px;
    font-size: 11px;
    margin: 4px 0px;
}

.flt-detail-box .segment_airline_block {
    color: black;
}

.flt-detail-box .segment_airlines .airlines_logo {
    gap: 8px;
}

.segment_airlines .fare-detail-title {
    display: flex;
    gap: 12px;
}

.flt-summary .segment_airline_block .airlines_logo {
    display: table-cell;
    vertical-align: top;
    width: 30px;
}

    .flt-summary .segment_airline_block .airlines_logo img {
        max-width: 30px;
        max-height: 30px;
    }

.flt-summary .segment_airline_block .airlines_info {
    display: table-cell;
    vertical-align: top;
    padding-left: 10px;
}

.segment_airline_block .class-info {
    position: absolute;
    right: 0;
    top: 0px;
    text-align: right;
}


.flight-result-sticky {
    position: sticky;
    top: 56px;
    z-index: 1;
    margin-bottom: 0px;
}

.eq-progress-bar {
    background: #ffb534;
    height: 2px;
    transition: all .5s ease;
}

.flight-sort-desktop {
    position: absolute;
    right: 10px;
    top: 5px;
}

.flight-sort-container .dropdown-menu {
    min-width: 200px;
}

    .flight-sort-container .dropdown-menu .selected a {
        color: #009688;
        font-weight: 700;
    }

        .flight-sort-container .dropdown-menu .selected a:before {
            content: "\e98c";
            font-family: 'rspicon' !important;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            font-size: 16px;
            color: inherit;
            position: relative;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            float: right;
            top: 2px;
        }


.flt-selected-compact {
    display: table;
    width: 100%;
    text-align: left;
    font-style: normal;
    color: initial;
    background: #fff;
    border-bottom: 1px solid #dadada;
    padding-bottom: 5px;
    padding-top: 5px;
}

    .flt-selected-compact .flt-direction-cell {
        display: table-cell;
        vertical-align: middle;
        padding-left: 15px;
        width: 47px;
    }

        .flt-selected-compact .flt-direction-cell .flt-index {
            font-size: 18px;
            margin-left: 5px;
            font-weight: 700;
            color: #7b7b7b;
        }

        .flt-selected-compact .flt-direction-cell i {
            font-size: 24px;
            color: #038e81;
            top: 2px;
        }

    .flt-selected-compact .flt-info-cell {
        display: table-cell;
        vertical-align: top;
        font-size: 13px;
        line-height: 18px;
    }

        .flt-selected-compact .flt-info-cell .flt-time {
            font-weight: 700;
        }

        .flt-selected-compact .flt-info-cell .flt-name {
            color: #a19396;
        }

    .flt-selected-compact .flt-fare-cell {
        display: table-cell;
        vertical-align: top;
        font-size: 13px;
        line-height: 18px;
        text-align: right;
        padding-right: 15px;
    }

        .flt-selected-compact .flt-fare-cell .flt-class {
            color: #a19396;
        }

        .flt-selected-compact .flt-fare-cell .flt-fare {
            font-weight: 700;
        }


.journey-index {
    font-size: 27px;
    padding-right: 10px;
    margin-right: 10px;
    border-right: 1px solid #fff;
}

.hotel-maps {
    height: 400px;
    width: 100%;
    border: 1px solid white;
    position: relative
}

.tab-managetrip {
    position: absolute;
    top: -10px;
    right: 0;
    left: 170px;
}

    .tab-managetrip .nav-tabs.nav-tabs-bottom > li > a:after {
        bottom: -1px;
        height: 3px;
    }

    .tab-managetrip .nav-tabs.nav-tabs-bottom > li.active > a:after {
        background-color: #009688;
    }


.filter-compact {
    position: fixed;
    right: 32px;
    width: 400px;
    z-index: 3;
}

    .filter-compact .filter-overlay {
        background: #000000a6;
        left: 0;
        right: 0;
        position: fixed;
        bottom: 0;
        top: 0;
        z-index: -1;
        transition: opacity 0.3s;
        -webkit-transition: opacity 0.3s;
        opacity: 1;
    }


.input-group-rounded input {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding-left: 12px;
    border-right: 0;
}

.input-group-rounded .btn {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    padding-right: 13px;
}

.datepicker-title-xs {
    display: none;
}

.bg-overlay-xs {
    display: none !important;
}

/*for weekend*/

/*.datepicker th.dow:last-child,
.datepicker td.day:last-child {
    color: red;
}*/

.datepicker td.active.active {
    color: #fff;
}

.map-input-address {
    padding: 10px;
    width: 100%;
    max-width: 300px;
}

.navbar-notif-container {
    float: right !important;
    margin-right: 5px;
}

.navbar-notif ul.dropdown-menu {
   width: 360px;
   padding-bottom: 0px;
   border-radius: 15px;
   overflow: hidden;
   -webkit-box-shadow: 0px 3px 7px -2px rgba(0,0,0,0.75);
   -moz-box-shadow: 0px 3px 7px -2px rgba(0,0,0,0.75);
   box-shadow: 0px 3px 7px -2px rgba(0,0,0,0.75);
   border: none;
   margin-top: 5px;
}

    .navbar-notif ul.dropdown-menu > li {
        position: relative;
        list-style-type: none;
    }

.navbar-notif .notif-info .notif-info-title {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-notif .notif-info .notif-desc {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-notif .notif-info {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-bottom: -1px;
    padding-top: 5px;
    cursor: default;
    margin-left: 15px;
    margin-right: 15px;
}

.navbar-notif i {
    font-size: 24px;
}
.notif-badge {
    position: absolute;
    top: -3px;
    padding: 2px 5px;
    border-radius: 61px;
    font-size: 9px;
    background: red;
    color: white;
    border: 2px solid #fff;
    left: 19px;
    min-width: 20px;
    min-height: 20px;
}

.notif-notfound {
    text-align: center;
    font-size: 14px;
    color: #ddd;
    margin: 70px 0;
}

.iconNotifRead {
    position: absolute;
    top: 40%;
    right: 0;
}
.iconNotifType {
   width: 15%;
   position: relative;
   display: inline-block !important;
   vertical-align: top;
   top: 21px;
}
.iconNotifTypeTable {
   width: 5%;
   position: relative;
   display: inline-block !important;
   vertical-align: top;
   top: 10px;
}

.textNotif {
    display: inline-block !important;
    width: 78%;
    height: inherit;
}
.textNotifTable {
   display: inline-block !important;
   width: 91%;
   height: inherit;
}

.train-row {
    color: #5b5b5b;
}

    .train-row .flt-info {
        width: 185px;
        padding-left: 0px;
    }

    .train-row .flt-route {
        width: 20%;
        padding-left: 15px;
    }

    .train-row .flt-duration {
        width: 20%;
    }


    .train-row .flt-name {
        text-transform: capitalize;
        color: #494949;
        font-size: 14px;
    }

    .train-row .flt-details-link {
        left: 0px;
    }

.train-summary {
    border: none;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    padding: 10px 15px;
}

    .train-summary .flt-info {
        padding-right: 0px;
        position: relative;
        width: auto;
    }

    .train-summary .train-price {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 12px;
        color: #939396;
    }

    .train-summary .segment_box {
        padding-left: 38px;
    }

        .train-summary .segment_box .time_ {
            font-size: 12px;
            gap: 7px;
        }

        .train-summary .segment_box .date_ {
            font-size: 10px;
        }

        .train-summary .segment_box .segment_departure,
        .train-summary .segment_box .segment_arrive {
            padding-left: 50px;
        }

        .train-summary .segment_box .segment_origin:before {
            height: 12px;
            width: 12px;
            left: -6px;
        }

        .train-summary .segment_box .segment_destination:before {
            content: '';
            position: absolute;
            left: 50%;
            border-radius: 50% 50% 50% 0;
            border: 4px solid #fff;
            width: 12px;
            height: 12px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            background-color: #aaa;
            border: 1px solid #aaa;
            position: absolute;
            left: -5px;
        }

        .train-summary .segment_box .segment_destination:after {
            position: absolute;
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            top: 8px;
            left: -2px;
            margin-top: -5px;
            background-color: #fff;
        }

        .train-summary .segment_box .city_name_ {
            font-size: 12px;
        }

        .train-summary .segment_box .airport_name_ {
            font-size: 12px;
        }

        .train-summary .segment_box .duration_segment_ i {
            top: 1px;
            font-size: 10px;
            margin-right: 0px;
        }

        .train-summary .segment_box .duration_segment_ {
            padding: 0px 5px;
            font-size: 10px;
            margin: 4px 0px;
        }

        .train-summary .segment_box .segment_origin,
        .train-summary .segment_box .segment_destination {
            padding-left: 20px;
        }

.train-summary-affix.panel-body {
    max-height: calc(100vh - 230px);
}

.train-summary .segment_airlines, .flt-summary .segment_route, .flt-summary .segment_class {
    margin-bottom: 0px;
}

.trip-affix {
    top: 66px;
}

.train-container .segment_box .segment_airlines .airlines_code {
    margin-top: 0px;
}

.train-container .flt-detail-box {
    padding-left: 0px
}

.train-container .segment_box .segment_airlines {
    width: 204px;
}

.train-container .segment_box {
    color: #939396;
    border-top: 1px solid #667fa0;
    margin-top: 6px;
    padding-top: 20px;
}


.collapsing.fast-collapsing {
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-duration: .2s;
}

.opsicorp-typeahead {
    width: 100%;
}

.tt-input {
    cursor: pointer;
}


.tt-hightlight {
    color: #5499E4;
}

.tt-airport-empty {
    padding-left: 80px;
    background: #fefefe;
    margin-top: -9px;
    margin-bottom: -9px;
    padding-top: 15px;
    padding-bottom: 15px;
}

    .tt-airport-empty i {
        position: absolute;
        font-size: 40px;
        left: 20px;
        top: 18px;
        color: #969696;
        margin-left: 0 !important;
    }

    .tt-airport-empty div {
        font-size: 16px;
        font-weight: 600;
        color: #6a6a6a;
    }

    .tt-airport-empty span {
        color: #969696;
    }

.tt-airport {
    display: flex;
    flex-direction: row;
    padding: 7px 20px;
    cursor: pointer;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.tt-airport-code {
    background: #dddddd;
    border-radius: 4px;
    text-align: center;
    color: #91929e;
    width: 32px;
    padding: 1px 0;
    align-self: flex-end;
    font-size: 11px;
}

.tt-airport-city {
    font-size: 14px;
    font-weight: 700;
}

.tt-airport-name {
    font-size: 12px;
    color: #7e7e7e;
    margin-top: 2px;
}

.tt-airport-right {
    display: flex;
    flex-direction: column;
}

.tt-airport.tt-cursor,
.tt-airport:hover {
    background: #f9f9f9;
}

.eq-tt-container .eq-tt-mobile-display {
    display: none;
}

.eq-tt-nav {
    display: none;
}

.tt-airport-distance {
    font-size: 12px;
    color: #aaa;
    align-self: flex-end;
    margin-top: 5px;
}

.badge-nearairport {
    border: 1px solid #009688;
    float: right;
    padding: 1px 5px;
    border-radius: 6px;
    font-size: 12px;
}

.tt-header {
    background: #e6e6e6;
    padding: 15px 21px;
    color: #00776a;
    margin-top: -9px;
    font-weight: 700;
    border-bottom: 1px solid #ddd;
}

.eq-tt-header-mobile .btn {
    display: none;
}


.content-center {
    min-width: 768px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}



    .sticky .container-fluid {
        min-width: 768px;
        max-width: 1280px;
    }

.sticky {
    position: sticky;
    top: 0px;
    z-index: 3;
}

[v-cloak] {
    display: none;
}

.eq-tt-container .i-tt-popup {
    display: none;
}

.nav-menu-left {
    position: absolute;
    left: 140px;
    padding-top: 5px;
}

    .nav-menu-left a {
        font-size: 16px;
       
        
        padding-bottom: 17px;
        cursor: pointer;
        margin-right: 20px;
    }

        .nav-menu-left a.active {
            border-bottom: 2px solid #038e81;
            font-weight: 800;
        }

.nav-menu-right {
    position: absolute;
    right: 100px;
    
}

    .nav-menu-right a.nav-item {
        font-size: 16px;
        cursor: pointer;
        margin-right: 20px;
    }


.user-btn {
    padding: 4px 5px;
    display: flex;
    align-items: center;
}

    .user-btn .user-btn-fullname {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100px;
    }

.multicity-route-param {

}

.eq-datepicker-dropdown select {
    padding-right: 0;
    padding-left: 3px;
}
.eq-datepicker-dropdown .eq-datepicker-month {
    padding-left: 0;
}

.eq-datepicker-dropdown .eq-datepicker-year {
    padding-left: 0;
}


.label-filtered {
    padding: 3px 10px;
    border-radius: 5px;
    color: #1d1d1d;
    border: 1px solid #b7b7b7;
    margin-left: 2px;
    margin-right: 2px;
}

.label-filtered i{
    cursor: pointer;
    margin-left: 5px;
    margin-right: -5px;
}

/* Error Tool Tip Styles*/
.tooltip-error {
    /* font */
    font-family: Helvetica;
    font-size: 13px;
    font-weight: bold;
    color: #cc0033;
    line-height: 20px;
    /* background */
    background-color: #fce4e4;
    border: 1px solid #fcc2c3;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    /* positioning */
    float: right;
    position: relative;
    padding: 7px 11px 4px;
    margin-left: 10px; /* distance between error tip and element it points to */
}

/* Left Arrow Styles */
    .tooltip-error:after, .tooltip-error:before {
        content: '';
        border: 7px solid transparent;
        position: absolute;
        top: 10px;
    }
    .tooltip-error:after {
        border-right: 7px solid #fce4e4;
        left: -14px;
    }
    .tooltip-error:before {
        border-right: 7px solid #fcc2c3;
        left: -15px;
    }
.est-cost-summary {
    padding-bottom: 4px;
    font-weight: 400;
}
.est-cost-amount-summary{
    padding-right: 5px;
    font-weight: 600;
    float: right !important;
}

.req-cash-advance {
    border: 1px solid rgb(204, 204, 204);
    padding-top: 5px;
    padding-bottom: 15px;
}
.facility-trip {
   border: 1px solid rgb(204, 204, 204);
   padding-top: 5px;
   padding-bottom: 5px;
}
.facility-label {
   padding-left: 5px;
}
#CompliantHsModal .panel, #CompliantHsModal span.ng-binding {
    font-size: 16px;
}

#CompliantTransportModal .panel, #CompliantTransportModal .panel-heading h5, #CompliantTransportModal .panel-heading h6, #CompliantTransportModal .panel-body textarea {
    font-size: 16px;
}

#CompliantTransportModal .panel-body textarea, #CompliantHsModal .panel-body textarea {
    height: 105px;
    resize: none;
    width: 100%;
}

a.custom-link {
    color: #667fa0 !important;
    text-decoration: underline;
}

a.custom-link:hover, a.custom-link-hover:hover {
    filter: brightness(1.3) !important;
}

a.custom-link-hover:hover {
    text-decoration: underline;
}

.policy-checkbox span {
    font-size: 14px;
    font-weight: bold;
}

#company-info .form-control[disabled] {
    background-color: rgba(197, 197, 197, 0.10);
    border: none;
    cursor: default;
}

#company-info .select2-container--disabled .select2-selection--single {
    background-color: rgba(197, 197, 197, 0.10);
    border: none;
}

#company-info .select2-container--disabled .select2-selection__arrow, #company-info .intl-tel-input .iti-arrow {
    display: none;
}

#company-info .intl-tel-input.allow-dropdown .flag-container:hover {
    pointer-events: none;
}

#company-info .intl-tel-input.allow-dropdown .flag-container:hover .selected-flag {
    background-color: transparent;
}

.disabled-box {
    background-color: rgba(197, 197, 197, 0.10);
    border-radius: 4px;
    margin: 5px;
    padding: 10px 15px;
}

.trip-history {
    white-space: pre-line;
}

#body-scrollable {
    overflow: auto;
}

.custom-info {
    color: var(--primary-color); 
    font-size: 10px; 
    transform: translateY(-5px);
}
.custom-info-alert-popup {
   color: #ff1300;
   font-size: 13px;
   transform: translateY(0px)translateX(5px);
}
table.table-custom-hover tr {
    pointer-events: none;
}

table.table-custom-hover tr:hover {
    background: #f5f5f5;
}

table.table-custom-hover td a {
    pointer-events: auto;
}

.notif-container {
    height: 400px;
    overflow-y: scroll;
}

.notification-footer-container {
    box-shadow: 0 10px 28px 10px rgba(0, 0, 0, .1);
    display: flex;
    height: 45px;
    padding: 8px;
    justify-content: space-between;
}

.notification-footer-container button {
    background-color: transparent;
    border: none;
}

.notification-footer-container button:hover, .notification-footer-container button:hover a {
    filter: brightness(0.8);
}

.notification-footer-container button, .notification-footer-container a {
    color: var(--primary-color);
}

.dropdown-menu .notif-container > li a {
    color: #333;
}

.dropdown-menu .notif-container > li.notif-info:hover {
    background-color: #f5f5f5;
}

div.is-invalid {
    border: 2px red solid;
}

.copied-cellseat {
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    height: 40px;
    line-height: 1.42857143;
    margin: 1px;
    padding: 0;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 30px;
}

.btn-select-seat, .select-seat:hover {
    background: #e4ff52 !important;
    border: 1px #e4ff52 solid;
}

.btn-select-seat:hover {
    background: #c1df21;
    border: 1px #c1df21 solid;
}

.default-seat, .default-seat:hover {
    background: #009688;
    border: 1px #009688 solid;
    color: #fff;
}

.text-warn {
    color: #FCB322;
}

.text-white {
    color: white;
}

.dashboard-panel-item {
    min-height: 197px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.top-purpose {
    display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #5d5d5d;
}
    .top-purpose .top-purpose-content {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
        font-size: 14px;
        padding-right: 20px;
        
    }

.top-purpose .top-purpose-counter {
    font-size: 14px;
    }

.top-employee-list-container {
    max-height: 276px;
    padding-right: 8px;
    overflow-y: auto;
}


.top-employee-list {
    display: flex;
    margin-top: 4px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: #5d5d5d;
}

.top-employee-list-content{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    padding-right: 20px;
}


    .top-employee-list-content .first-row {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-right: 20px;
        font-size: 15px;
        font-weight: 600;
        color: #7d7d7d;
        text-align: left;
    }
    .top-employee-list-content .second-row {
        font-size: 12px;
        margin-top: -4px;
        text-align: left;
        color: #bfbfbf;
        letter-spacing: 1px;
        min-height: 18px;
    }

.top-employee-list-counter {
    font-size: 14px;
}

.main-content-container-max-width {
    max-width: 1029px;
    margin: 0 auto;
}

.q-body--force-scrollbar {
    overflow-y: scroll;
}

.q-body--fullscreen-mixin, 
.q-body--prevent-scroll {
    position: fixed !important;
}

.global-alert-top {
    margin: -40px -35px 20px -35px;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
}

.download-excel {
    margin-top: 8px;
    text-align: right;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.native-select-inline-label{
    position: relative;
}

.native-select-inline-label > label {
    position: absolute;
    background: white;
    top: -7px;
    font-size: 10px;
    color: #6b6b6b;
    left: 4px;
    padding: 0px 2px;
}

.page-header {
    z-index: 1;
}

.footer {
    z-index: 0;
    padding: 5px;

}

.text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

.other-item-thumbnail {
    color: #025bc5;
    font-size: 40pt;
}
.help-center {
    border-radius: 20px;
    box-shadow: 1px 3px 6px 2px rgba(54, 61, 77, 0.15);
    transition: background-color 0.5s ease;
}
.help-center:hover {
    background-color: #e5e5e5
}
.help-center[title] :hover::after {
    content: attr(title);
    position: absolute;
    top: -100%;
    left: 0;
}
.contact-us {
   width: 100px;
   font-size: 14px;
   background-color: #0f9688;
   box-shadow: 1px 3px 6px 2px rgba(54, 61, 77, 0.15);
   color: #ffffff;
   border: 1px solid #0f9688;
   border-radius: 20px;
   cursor: pointer !important;
}

.vertical-line {
   display: flex;
   align-items: center;
   border-left: 2px dashed grey;
}

.vertical-line i {
   margin-right: 15px;
}

.vertical-line::before {
   content: "";
   display: block;
   margin-right: 15px;
}

/* ------------------------------------------------------------------------------
*
*  # Custom component
*
*  Created by: Panji
*  Latest update: Jul 26, 2024
*
* ---------------------------------------------------------------------------- */
.d-flex {
    display: flex;
    align-items: center;
}

.card {
    background: white;
    border-radius: 6px;
    box-shadow: rgba(3, 18, 26, 0.2) 0px 1px 2px; 
    padding: 1rem;
}

.font-semibold {
    font-weight: 600;
}

.text-yellow {
    color: #FCB322;
}

.marquee-container {
    box-sizing: border-box;
    overflow: hidden;
    margin-right: 55px;
    white-space: nowrap;
    width: 100%;
}

.marquee-content {
    display: inline-block;
    animation: marquee 50s linear infinite;
}

/* select2 custom class */
.hide-searchbar .select2-search {
    display: none;
}

.show-total-select2 .select2-container {
    min-width: 105px;
}

.no-border .select2-selection {
    border: none;
}

@media (max-width: 391px) {
    .marquee-content {
        animation: marquee-small 50s linear infinite;
    }

    @keyframes marquee-small {
        0% {
            transform: translateX(10%);
        }

        100% {
            transform: translateX(-100%);
        }
    }
}

.loading-issued {
    background: white;
    border: 2px;
    border-radius: 20px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    display: block;
    height: 13rem;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    z-index: 9999;
}

.loading-issued h1 {
    position: absolute;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    left: 50%;
    transform: translateX(-50%);
    top: 58%;
}

.loading-issued .body {
    position: absolute;
    top: 27%;
    left: 40%;
    width: 10rem;
    animation: speeder 1s linear infinite;
}

@media (min-width: 767px) {
    .md\:d-flex {
        display: flex;
        align-items: center;
    }
}

@media screen and (max-width: 426px) {
    .loading-issued {
        width: 90%;
    }

    .loading-issued .body {
        left: 36%;
    }
}

.loading-issued .body img {
    max-height: 100%;
    max-width: 100%;
}

.loading-issued .body > span {
    height: 5px;
    width: 35px;
    background: #009688;
    position: absolute;
    top: -19px;
    left: 60px;
    border-radius: 2px 10px 1px 0;
}

.loading-issued .base span {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 100px solid #009688;
    border-bottom: 6px solid transparent;
}

.loading-issued .base span::before {
    content: "";
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: #009688;
    position: absolute;
    right: -110px;
    top: -16px;
}

.loading-issued .base span::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 0 solid transparent;
    border-right: 55px solid #009688;
    border-bottom: 16px solid transparent;
    top: -16px;
    right: -98px;
}

.loading-issued .face {
    position: absolute;
    height: 12px;
    width: 20px;
    background: #009688;
    border-radius: 20px 20px 0 0;
    transform: rotate(-40deg);
    right: -125px;
    top: -15px;
}

.loading-issued .face::after {
    content: "";
    height: 12px;
    width: 12px;
    background: #009688;
    right: 4px;
    top: 7px;
    position: absolute;
    transform: rotate(40deg);
    transform-origin: 50% 50%;
    border-radius: 0 0 0 2px;
}

.loading-issued .body > span > span:nth-child(1),
.loading-issued .body > span > span:nth-child(2),
.loading-issued .body > span > span:nth-child(3),
.loading-issued .body > span > span:nth-child(4) {
    width: 30px;
    height: 1px;
    background: #009688;
    position: absolute;
    animation: fazer1 .2s linear infinite;
}

.loading-issued .body > span > span:nth-child(2) {
    top: 3px;
    animation: fazer2 .4s linear infinite;
}

.loading-issued .body > span > span:nth-child(3) {
    top: 1px;
    animation: fazer3 .4s linear infinite;
    animation-delay: -1s;
}

.loading-issued .body > span > span:nth-child(4) {
    top: 4px;
    animation: fazer4 1s linear infinite;
    animation-delay: -1s;
}

.loading-issued .longfazers {
    position: absolute;
    width: 100%;
    height: 100%;
}

.loading-issued .longfazers span {
    position: absolute;
    height: 2px;
    width: 20%;
    background: #009688;
}

.loading-issued .longfazers span:nth-child(1) {
    top: 20%;
    animation: lf .6s linear infinite;
    animation-delay: -5s;
}

.loading-issued .longfazers span:nth-child(2) {
    top: 40%;
    animation: lf2 .8s linear infinite;
    animation-delay: -1s;
}

.loading-issued .longfazers span:nth-child(3) {
    top: 60%;
    animation: lf3 .6s linear infinite;
}

.loading-issued .longfazers span:nth-child(4) {
    top: 80%;
    animation: lf4 .5s linear infinite;
    animation-delay: -3s;
}

#modal_passenger_info {
    gap: 3rem;
    padding: 2rem 0;
}

.modal-card {
    border-radius: 12px;
    margin: auto;
    max-width: 550px;
    width: 90%;
}

.w-full {
    width: 100%;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.rotate-180 {
    transform: rotate(180deg);
}

@keyframes fazer1 {
    0% {
        left: 0;
    }

    100% {
        left: -80px;
        opacity: 0;
    }
}

@keyframes fazer2 {
    0% {
        left: 0;
    }

    100% {
        left: -100px;
        opacity: 0;
    }
}

@keyframes fazer3 {
    0% {
        left: 0;
    }

    100% {
        left: -50px;
        opacity: 0;
    }
}

@keyframes fazer4 {
    0% {
        left: 0;
    }

    100% {
        left: -150px;
        opacity: 0;
    }
}

@keyframes speeder {
    0% {
        transform: translate(2px, 1px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, -2px) rotate(-1deg);
    }

    100% {
        transform: translate(2px, 1px) rotate(0deg);
    }
}

@keyframes lf {
    0% {
        left: 200%;
    }

    100% {
        left: -200%;
        opacity: 0;
    }
}

@keyframes lf2 {
    0% {
        left: 200%;
    }

    100% {
        left: -200%;
        opacity: 0;
    }
}

@keyframes lf3 {
    0% {
        left: 200%;
    }

    100% {
        left: -100%;
        opacity: 0;
    }
}

@keyframes lf4 {
    0% {
        left: 200%;
    }

    100% {
        left: -100%;
        opacity: 0;
    }
}