body {
    font-family: 'Open Sans', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700;
}

a {
    color: #000;
}

p:last-child, .modal p {
    margin-bottom: 12px;
}

.sc-box-white {
    background-color: #fff !important;
}

.sc-box-white--large {
    background-color: #fff;
    border-radius: 4px;
    overflow-x: hidden;
    height: inherit;
}

.sc-box-solitude {
    background-color: #F2F3F5;
}

.sc-box-white-smoke {
    background-color: #f9f9f9;
}

.sc-box-humming-bird {
    background-color: #e0f4e9;
}

.sc-box-white,
.sc-box-solitude,
.sc-box-white-smoke,
.sc-box-humming-bird {
    border: 1px solid #e6e6e6;
    border-radius: 4px;
}

.hr-bottom {
    border-bottom: 2px solid #9e9e9e;
    padding: 8px 0;
    margin-bottom: 16px;
}

.full-content {
    white-space: nowrap !important;
}

.download-pdf {
    font-size: 12px;
}

    .download-pdf img {
        width: 18px;
    }

.screen-block {
    height: 100vh;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    flex-direction: column;
}

.text-small {
    font-size: 12px;
}
.text-center {
    text-align:center !important;
}
.text-medium {
    font-size:0.9em;
}
.button-pink {
    border: 2px solid #eb0a8c !important;
    font-weight: bold;
}

/*--------------------------------------------------------
LOGIN STYLES
----------------------------------------------------------*/
.sc-login-wrapper {
    /* background: url(../images/sc-login-bg.jpg); */
    background-size: cover;
    background-position: center center;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

/*.sc-login-container {
    height: 100vh;
    align-content: center;
}*/


.sc-login-box {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0px 0px 2px #666666;
    min-width: 280px;
    width: 300px;
    margin: 0 auto;
}

.sc-login-screen-right {
    background: #00b1b7;
}

.login-poster {
    background: url(../images/CRM_Login.png) no-repeat;
    background-position: center;
    width: 100%;
    height: 100vh;
    /*#00b1b7!important*/
}

.sc-login-logo-container {
    text-align: center;
    display: block;
    padding: 28px 0;
}

.mdl-layout-avatar {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 36%;
}

.sc-login-box .form-input {
    background-color: #f1f1f1;
    text-align: center;
}

.sc-login-box label {
    right: 10px;
}

.login--forgot-pasword {
    color: #042460;
    font-size: 12px;
    font-weight: 700;
    line-height: 35px;
}

.sc-login-box--button {
    width: 100%;
    background: #f1f1f1;
    color: #1e1b4b !important;
}

.sc-login--user, .sc-login--password {
    position: relative;
}

    .sc-login--user::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 8px;
        width: 30px;
        height: 20px;
        border-right: 1px solid #1e1b4b;
        background: url(../images/login-user-icon.png) no-repeat;
        background-position: center;
        z-index: 1;
    }

    .sc-login--password::before {
        content: '';
        position: absolute;
        left: 6px;
        top: 28px;
        width: 30px;
        height: 20px;
        border-right: 1px solid #1e1b4b;
        background: url(../images/login-password-icon.png) no-repeat;
        background-position: center;
        z-index: 1;
    }
/*-------------------------------------------------------
LEFT DRAWER MENU STYLES
--------------------------------------------------------*/

.icon-dashboard, .icon-person, .icon-business,
.icon-done, .icon-description, .icon-assignment,
.icon-event, .icon-equalizer, .icon-settings-app, .icon-icon-help {
    color: #1d164b !important;
}
/* .icon-dashboard {
    color: #C01823 !important;
}

.icon-person {
    color: #E39800 !important;
}

.icon-business {
    color: #A3BF2D !important;
}

.icon-done {
    color: #01C255 !important;
}

.icon-description {
    color: #3195F8 !important;
}

.icon-assignment {
    color: #2A5FB9 !important;
}

.icon-event {
    color: #6F43D9 !important;
}

.icon-equalizer {
    color: #EC00E4 !important;
}

.icon-settings-app {
    color: #EC0066 !important;
}

.icon-icon-help {
    color: #C01823 !important;
} */

.dashboard-menu--active {
    background: #f4e2e4;
    color: #C01823 !important;
}

.contact-menu--active {
    background: #f7efe0;
    color: #E39800 !important;
}

.suppliers-menu--active {
    background: #f1f3e5;
    color: #A3BF2D !important;
}

.task-menu--active {
    background: #e0f4e9;
    color: #01C255 !important;
}

.quotes-menu--active {
    background: #e5eff9;
    color: #3195F8 !important;
}

.invoices-menu--active {
    background: #e4eaf3;
    color: #2A5FB9 !important;
}

.calender-menu--active {
    background: #ebe7f6;
    color: #6F43D9 !important;
}

.reports-menu--active {
    background: #f8e0f7;
    color: #EC00E4 !important;
}

.settings-menu--active {
    background: #f8e0f7;
    color: #EC0066 !important;
}

/* .help-menu--active{
    background: #f4e2e4;
    color: #C01823 !important;
} */
.text-orange {
    color: #FF5242;
}

.text-red {
    color: #FF5242;
}

.text-sub {
    font-size: 11px;
}
/*-----------------------------------------------------------
HEADER STYLES
--------------------------------------------------------------*/
.mcrm header .mdl-button {
    margin-left: 10px;
}

.mcrm header .mdl-layout__drawer-button .material-icons {
    color: #545454;
}

.mcrm header .mdl-button .sc-app--material-icons,
.mcrm header .mdl-button .sc-notification--material-icons {
    color: #fff;
}

.mcrm .mdl-layout__tab-panel {
    border-radius: 4px;
}

.sc-search--material-icons {
    line-height: 36px;
    color: #545454;
    padding-left: 5px;
    /*----------------*/
    float: left;
}

.header-right--container {
    float: right;
    /* width:40%;*/
    margin-top: 12px;
}
/*@media (min-width: 320px) {
    .header-right--container {
        width: 100%;
    }
}
@media (min-width: 550px) {
    .header-right--container {
        width: 40%;
    }
}
@media (min-width: 750px) {
    .header-right--container {
        width: 50%;
    }
}
@media (min-width: 1200px) {
    .header-right--container {
        width: 33%;
    }
}
@media (min-width: 2000px) {
    .header-right--container {
        width: 25%;
    }
}*/
@media (min-width: 1200px) and (max-width:2000px) {
    .header-right--container {
        width: 50%;
    }
}

.scrm--search {
    margin-right: 10px;
    border-radius: 4px;
    background: #e5e5e6;
    /*------------*/
    float: left;
}


@media (min-width: 320px) {
    .scrm--search {
        width: calc(100% - 43%);
    }
}

@media (min-width: 550px) {
    .scrm--search {
        width: calc(100% - 30%);
    }
}


.scrm--search .form-input.header-search-bar {
    border: none;
    border-radius: 4px;
    width: calc(100% - 71px);
    /*float: right;*/
    /*-----------------*/
    float: left;
}


.scrm--search .form-input::placeholder {
    /* color: #000; */
    font-size: 14px;
}

.scrm--search .header-search-bar.form-input:focus,
.sc-data-table--topbar_search .form-input:focus {
    box-shadow: none;
}

.scrm--search .dropdown,
.sc-data-table--topbar_search .dropdown {
    float: right;
}

    .scrm--search .dropdown .menu {
        right: 0;
        left: auto;
        width: 270px;
    }

.header--toplist_container {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 300px;
    min-width: 300px;
    height: 360px;
    color: #545454;
    padding-left: 0px;
    position: absolute;
    top: 40px;
    right: 50px;
    background-color: #fff;
    box-shadow: 0px 2px 4px 0 rgba(0,0,0,.3);
    list-style: none;
    /*padding-bottom: 50px;*/
    /* overflow-y: auto !important; */
    /*overflow-x: hidden !important;*/
    /* overflow: hidden !important; */
}

    .header--toplist_container::after {
        content: '';
        display: block;
        padding: 40% 0 0 0;
    }

    .header--toplist_container li {
        width: 94px;
        text-align: center;
        font-size: 12px;
        line-height: 18px;
    }

        .header--toplist_container li:last-child {
            width: 100%;
            position: fixed;
        }

        .header--toplist_container li i {
            display: block;
        }

.bookmark-menu__customize--wrapper {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    text-align: center;
    z-index: 100000000000000;
}

.bookmark-menu__customize--container {
    position: fixed;
    width: 300px;
    background-color: #fff;
    color: rgb(63, 81, 181);
    border-top: 1px solid #eaeaea;
    margin-left: -150px;
    line-height: 40px;
    z-index: 100000000000000;
}

.sc-logo-container {
    padding-left: 15px !important;
    border-bottom: 1px solid #eaeaea;
}

.header-search--dropdown_box .form-input,
.header-search--dropdown_box .form-select,
.header-search--dropdown_box .form-select:not([multiple]):not([size]),
.grid-search--dropdown_box .form-input,
.grid-search--dropdown_box .form-select,
.grid-search--dropdown_box .form-select:not([multiple]):not([size]) {
    background-color: #fff;
    border: 1px solid #e5e5e6 !important;
}

.header-search--dropdown_box .form-select,
.grid-search--dropdown_box .form-select {
    color: #c2c8d2;
}

.header-search--dropdown_box .mdl-button,
.grid-search--dropdown_box .mdl-button {
    font-size: 11px;
}

    .header-search--dropdown_box .mdl-button.mdl-button--search-colored,
    .grid-search--dropdown_box .mdl-button.mdl-button--search-colored {
        background-color: #e5e9f1;
        color: #042460;
    }

.myprofile--header {
    box-shadow: 0px 1px 5px #d0d1d2;
    background-color: #fff;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-between;
    padding: 8px 15px;
}

.myprofile--billing_edit {
    float: right;
}

.logout a {
    color: #C01823;
    font-weight: 700;
}

.logout-icon {
    transform: rotate(270deg);
    vertical-align: middle;
    color: #C01823;
}

@media (max-width:480px) {
    .scrm--search .dropdown .menu {
        right: -60px;
    }
}

/*---------------------------------------------------------
LEFT PROFILE CONTAINER STYLES
-------------------------------------------------------------*/
.sc-profile-container {
    /* border-top: 1px solid #eaeaea; */
    border-bottom: 1px solid #eaeaea;
    padding: 10px 5px;
    float: left;
}

.sc-profile--active {
    background: #dedede;
}

.sc-profile-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
}

    .sc-profile-container ul li {
        margin: 0;
        display: inline-block;
        vertical-align: text-top;
    }

/* .sc-profile-picture img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: super;
    } */

.sc-profile-name {
    font-size: 16px;
    color: #1d164b;
    display: block;
    font-weight: 700;
    line-height: 13px;
}

.sc-profile-email {
    font-size: 12px;
    color: #1d164b;
    display: block;
}

.sc-profile--right .sc-profile-container {
    border-top: 0px;
    border-bottom: 0px;
}

.sc-profile--right .sc-logo-container-right {
    margin-top: 12px;
}

@media (max-width:1024px) {
    .sc-profile--right {
        display: none;
    }

    .sc-profile-container.sc-profile--left {
        display: block;
    }

    .mdl-layout__drawer .sc-logo-container {
        display: none;
    }
}

@media (min-width:1025px) {
    .sc-profile-container.sc-profile--left {
        display: none;
    }

    .mdl-layout__drawer .sc-logo-container {
        display: block;
        text-align: center;
        height: 64px;
    }

    .mdl-layout__drawer .sc-logo-container-right {
        display: none;
    }
}
/*------------------------------------------------------------
DASHBOARD PAGE STYLES
---------------------------------------------------------------*/
.db-today-tab--cards--wrapper {
    height: 280px;
}

.db-booking-info-cards .card .card-header {
    position: relative;
    padding-top: 0.6em;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

.db-booking-info-cards .card .card-footer {
    padding: 0.4em;
    font-size: 0.8em;
}

.db-booking-info-cards .card .card-body {
    max-height: 250px;
    position: relative;
}

.db-booking-info-cards .card .more-info-dropdown {
    position: absolute;
    top: 0;
    right: 0;
}

.db-today-tab--cards--container {
    padding: 4px 8px !important;
}

    .db-today-tab--cards--container ul {
        background: #fff;
        margin: 0;
        padding: 4px 8px;
        list-style: none;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
    }

        .db-today-tab--cards--container ul li {
            display: block;
            position: relative;
        }

.db-today-tab--cards--container__title {
    font-weight: 700;
    max-width: 150px;
}

.db-today-tab--cards--container__title-info, .tab--cards--container__misc-info__date {
    font-size: .8em;
    color: #9f9f9f;
    margin: 0;
}

    .db-today-tab--cards--container__title-info span {
        margin-right: 10px;
    }

.db-today-tab--cards--container__user-info span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.db-today-tab--cards--container__user-info .cards--container__user-info--avatar img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.db-today-tab--cards--container__user-info .cards--container__user-info--name {
    font-size: .9em;
    font-weight: 700;
    max-width: 98px;
}

.db-today-tab--cards--container__action-info, .db-today-tab--cards--container__misc-info {
    display: flex !important;
    justify-content: space-between;
}

.tab--cards--container__new-enquiry {
    background-color: #e5e9ef;
    color: #042460;
}

.tab--cards--container__task {
    background-color: #e5f1f6;
    color: #0074A8;
}

.tab--cards--container__new-enquiry, .tab--cards--container__task {
    border-radius: 4px;
    font-size: 0.8em;
    padding: 0px 8px;
}

.tab--cards--container__misc-info__action ul {
    margin: 0;
    padding: 0;
    border: 0;
}

    .tab--cards--container__misc-info__action ul li {
        display: inline-block;
    }

.tab--cards--container__misc-info__action a .material-icons {
    color: #9f9f9f;
}

.tab--cards--container__misc-info__action a:hover .material-icons {
    color: #4f4f4f;
}

.db-today-tab--cards--container .more-info-dropdown, .tab--cards--container__misc-info__action {
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.db-today-tab--cards--container:hover .more-info-dropdown,
.db-today-tab--cards--container:hover .tab--cards--container__misc-info__action {
    opacity: 1;
    visibility: visible;
}

.notes-listing-container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-flow: wrap;
    align-content: flex-start;
}

    .notes-listing-container div {
        margin: 4px;
        max-width: 280px;
    }

.db-notes-listing-container.create-notes-container {
    position: relative;
    width: 100%;
}

.db-boxed-list .card-body {
    max-height: 240px;
}

    .db-boxed-list .card-body ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .db-boxed-list .card-body ul li {
            margin: 4px 0;
            padding: 4px;
            border: 1px solid #e6e6e6;
            font-size: 0.76em;
            line-height: 20px;
            position: relative;
        }

            .db-boxed-list .card-body ul li div {
                display: block;
            }

.add-new-widget {
    width: 171px;
    margin: 0 auto;
    display: block;
    padding: 2em 0;
}
/* .db-boxed-list--status{
    position: relative;
    text-align: right;
 } */

@media (min-width:300px) {
    .db-boxed-list--status {
        position: absolute;
        right: 5px;
        bottom: 5px;
    }
}

@media (min-width:1023px) {
    .db-boxed-list--status {
        position: relative;
        text-align: right;
    }
}

@media (min-width:1400px) {
    .db-boxed-list--status {
        position: absolute;
        right: 5px;
        bottom: 5px;
    }
}
/*------------------------------------------------------------
PROFILE PAGE STYLES
---------------------------------------------------------------*/
.mdl-card-wrapper {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    height: 80vh;
}

    .mdl-card-wrapper .mdl-card {
        box-shadow: 0px 1px 5px #d0d1d2;
    }

        .mdl-card-wrapper .mdl-card .mdl-card__media {
            background: transparent;
            padding: 15px;
        }

            .mdl-card-wrapper .mdl-card .mdl-card__media img {
                width: 128px;
                height: 128px;
            }

        .mdl-card-wrapper .mdl-card .mdl-card__title {
            font-weight: 700;
            padding: 0px 15px;
        }

        .mdl-card-wrapper .mdl-card .mdl-card__supporting-text {
            font-size: 14px;
            width: auto;
        }

        .mdl-card-wrapper .mdl-card .mdl-card__supporting-text {
            padding: 8px;
        }

            .mdl-card-wrapper .mdl-card .mdl-card__supporting-text .column {
                margin-bottom: 8px;
            }

            .mdl-card-wrapper .mdl-card .mdl-card__supporting-text span {
                font-weight: 700;
                color: #545454;
                margin-bottom: 8px;
            }

            .mdl-card-wrapper .mdl-card .mdl-card__supporting-text p {
                text-align: justify;
            }

        .mdl-card-wrapper .mdl-card .myprofile--card_content span {
            text-transform: uppercase;
        }


/*-----------------------------------------------------------
MDL OVERWRITE
-------------------------------------------------------------*/
.mdl-button {
    font-family: 'Open Sans', sans-serif;
}

.mdl-button:disabled {
    font-family: 'Open Sans', sans-serif;
    color:#9e9e9e !important;
}
.mdl-button--primary.mdl-button--primary.mdl-button--raised:disabled {
    font-family: 'Open Sans', sans-serif;
    color: rgb(255, 255, 255) !important;
    background-color: #9e9e9e !important;
}

.form-input::placeholder {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
}

.mdl-layout__header {
    box-shadow: none;
    /* min-height:100px; */
    /*justify-content:flex-end !important;*/
    /*margin-left: 240px;*/
    /*display:block;*/
    /*width: 90% !important;*/
}

@media (min-width: 320px) {
    .mdl-layout__header {
        margin-left: 0;
        width: 100% !important;
    }
}

@media (min-width: 1025px) {
    .mdl-layout__header {
        margin-left: 240px;
        width: 90% !important;
    }
}

.mdl-layout__header-row {
    padding-right: 15px;
    background-position: right;
    height: 64px;
    border-bottom: 1px solid #eaeaea;
    display: block;
}

.mdl-layout__drawer {
    box-shadow: none;
    background-color: #fff;
    border-right: 1px solid #d0d1d2;
    z-index: 11;
}

    .mdl-layout__drawer .mdl-navigation .mdl-navigation__link {
        padding: 6px 4px !important;
        /* color: #545454; */
        color: #1d164b;
        font-weight: 700;
        width: 90%;
        margin: 4px auto;
        border-radius: 4px;
        text-decoration: none;
    }

        .mdl-layout__drawer .mdl-navigation .mdl-navigation__link i {
            margin-right: 8px;
        }

.mdl-layout.is-upgraded .mdl-layout__tab.is-active {
    color: #042460 !important;
}

.mdl-layout__header,
.mdl-layout__tab-bar,
.mdl-layout__tab-bar-button {
    background-color: transparent;
    z-index: 10;
}

.mdl-layout__obfuscator {
    z-index: 10;
}

.mdl-layout__tab {
    color: #545454;
}

.mdl-layout.is-upgraded .mdl-layout__tab.is-active::after {
    background: #042460;
}

.mdl-layout__title,
.mdl-layout-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
}

.card--grid_avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}
.mdl-layout__obfuscator.is-visible {
    pointer-events: auto;
    opacity: 0 !important;
}

.mdl-layout__content {
    background-color: #f2f3f5;
    overflow-y: hidden;
    padding: 0;
    /* z-index: inherit;*/
    /* */
    /*-webkit-transform: translate3d(0,0,0);
   */
}


@media (max-width:1200px) {
    .mdl-layout__content {
        overflow-y: inherit;
    }
}
/*
@media (min-width:1024px) {
    .mdl-layout__content {
        z-index: 5;
    }
}

@media (max-width:1023px) {
    .mdl-layout__content {
        z-index: 3;
    }
}*/
    .mdl-button--primary.mdl-button--primary {
    color: rgb(4, 36, 96);
}

    .mdl-button--primary.mdl-button--primary.red {
        color: #FF5242;
    }

.mdl-button--secondary {
    color: #042460 !important;
    background-color: #BFC8DF;
}

.mdl-button--primary.mdl-button--primary.mdl-button--raised,
.mdl-button--primary.mdl-button--primary.mdl-button--fab {
    color: rgb(255, 255, 255);
    background-color: rgb(4, 36, 96)
}

.mdl-checkbox__ripple-container .mdl-ripple {
    background: rgba(102, 102, 102);
}

.mdl-checkbox.is-checked .mdl-checkbox__box-outline {
    border: 2px solid rgba(102, 102, 102);
}

.mdl-checkbox.is-checked .mdl-checkbox__tick-outline {
    background: rgb(102, 102, 102)url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K");
}

.mdl-layout__tab-bar-left-button,
.mdl-layout__tab-bar-right-button {
    color: #e5e5e6;
}

.mdl-layout__tab-bar-button.is-active {
    color: #00a5dc;
    background-color: #f7f7f7;
}

.mdl-tabs__tab-bar {
    justify-content: flex-start;
    box-shadow: 0px 1px 5px #d0d1d2;
    background-color: #fff;
    height: auto;
    min-height: 5px;
}

.modal .modal-container .mdl-tabs__tab-bar {
    box-shadow: none;
}

.mdl-button.mdl-js-button {
    font-weight: 700;
}

.mdl-button {
    color: #9e9e9e;
}

.mdl-tabs.is-upgraded .mdl-tabs__panel {
    padding: 10px;
}

.mdl-data-table th,
.mdl-data-table td {
    white-space: normal;
    min-width: 103px;
}

    .mdl-data-table th:first-child,
    .mdl-data-table td:first-child {
        min-width: 50px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .mdl-data-table th:last-child,
    .mdl-data-table td:last-child {
        width: 50px;
        min-width: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .mdl-data-table td i,
    .mdl-data-table td span {
        display: table-cell;
        vertical-align: middle;
    }
    .mdl-data-table td.text--overflow {
        max-width: 50px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
.spntext--overflow {
    max-width: 50px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
    /* .mdl-data-table td span {
    padding-left: 5px;
} */

    .mdl-snackbar {
    top: 0px;
    bottom: auto;
    transform: translate(0, -50px);
    -webkit-transform: translate(0, -50px);
}

.mdl-list__item {
    font-family: 'Open Sans', sans-serif;
}

.mdl-list__item--two-line .mdl-list__item-primary-content {
    height: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

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

    .mdl-layout__drawer .mdl-navigation {
        height: calc(100vh - 64px);
        border-right: 1px solid #d0d1d2;
    }

@media (min-width: 480px) {
    .mdl-snackbar {
        z-index: 1000;
        left: 40%;
    }

    .mdl-snackbar--active {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
    }
}

@media (max-width: 479px) {
    .mdl-snackbar {
        z-index: 1000;
        width: 100%;
        left: 0;
    }

    .mdl-snackbar--active {
        transform: translate(0, 0px);
        -webkit-transform: translate(0, 0px);
    }
}

/*-------------------------------------------------------------
SPECTER CSS OVERRIDE
-------------------------------------------------------------*/
.form-group {
    position: relative;
}

.form-input,
.form-select,
.form-select:not([multiple]):not([size]) {
    background-color: #f2f3f5;
    border: 0;
    border-radius: 0.2rem;
    position: relative;
}

    .form-select:not([multiple]):not([size]) {
        background-image: url(../images/down-arrow.svg);
        background-color: #f2f3f5;
        border: 0;
        /*width: auto;*/
    }

    .form-input:focus,
    .form-select:focus,
    .form-checkbox input:focus + .form-icon,
    .form-radio input:focus + .form-icon,
    .form-switch input:focus + .form-icon {
        box-shadow: 0 0 0 0.05rem rgba(208, 209, 210, .6);
        border: 0;
        background: #fff;
    }

.is-floating-label {
    position: relative;
}

    .is-floating-label label {
        color: rgba(0, 0, 0, 0.3);
        pointer-events: none;
        position: absolute;
        top: 10px;
        left: 20px;
        transform: translate3d(0, 0, 0) scale(1);
        transform-origin: left top;
        transition: all 0.2s;
        font-size: 0.7rem;
    }

    .is-floating-label.is-focused label {
        transform: translateY(-17px) scale(0.75);
        background-color: #fff;
        padding: 1px 8px;
        height: 20px;
        overflow-y: hidden;
    }

    .is-floating-label.is-focused input,
    .is-floating-label.is-focused textarea,
    .is-floating-label.is-focused .form-select:not([multiple]):not([size]) {
        background-color: #fff;
        box-shadow: 0 0 0 0.05rem rgba(208, 209, 210, .6);
    }

a.active,
a:active,
a:focus,
a:hover {
    text-decoration: none;
}

.btn.btn-link.active,
.btn.btn-link:active,
.btn.btn-link:focus,
.btn.btn-link:hover {
    color: inherit;
}

.btn:focus {
    box-shadow: none;
}

.scrm--search .btn.btn-link {
    color: #fff;
    background-color: #eb098b;
}

.maxco-crm .modal.active .modal-overlay,
.maxco-crm .modal:target .modal-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.scrm--search .form-input.header-search-bar,
.sc-data-table--topbar_search .form-input {
    background: transparent;
}

.sc-data-table--topbar_search .grid-search--dropdown_box--secondary .form-input {
    background: #f2f3f5;
}

select {
    color: #c2c9d3 !important;
}

    select option {
        color: #000 !important;
    }

.form-select.select-lg,
.form-input.input-lg,
.form-input {
    font-size: 0.7rem;
}

.columns,
.column {
    position: relative;
}

.table {
    font-size: 14px;
}

/*.table.table-scroll {
    display: inline-table;
}*/

.form-checkbox input:checked + .form-icon,
.form-radio input:checked + .form-icon,
.form-switch input:checked + .form-icon {
    background: #000;
    border-color: #000;
    font-size: 12px;
}

.form-checkbox.form-inline {
    font-size: 12px;
}

.modal-container {
    max-height: 95vh;
    overflow-y: auto;
}

.tab {
    border-bottom: 0;
}

.divider {
    border-top: .05rem solid #d0d1d2;
}

.btn-blue {
    color: #00A4DC;
}

.accordion-body {
    font-size: 14px;
}

.text-large-xl {
    font-size: 3.3em;
    line-height: normal;
    font-weight: 300;
}

@media (min-width: 1200px) {
    .table.table-scroll {
        display: inline-table;
    }
}

/*--------------------------------------------------------------
MDL TABLE STYLES
---------------------------------------------------------------*/
.sc-data-table-wrapper {
    background: #f7f7f7;
    border-radius: 4px;
    /*overflow-x: scroll
     height: 100vh; */
}

.sc-data-table--topbar_search > form {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
}

.sc-data-table--topbar_search .topbar_search--icon {
    line-height: 36px;
    margin-left: 5px;
    opacity: 0.8;
    cursor: pointer;
}

.sc-data-table--topbar_search .form-input.grid-search-bar {
    border: none;
    border-radius: 4px;
    width: calc(100% - 45px);
    float: right;
}

    .sc-data-table--topbar_search .form-input.grid-search-bar.search-box {
        width: 100%;
    }

.sc-data-table--topbar_search .dropdown .menu {
    right: auto;
    left: 0;
    width: 270px;
}

    .sc-data-table--topbar_search .dropdown .menu.grid-search--dropdown_box--secondary {
        right: auto;
        left: 0;
        width: 380px;
    }

.sc-data-table--topbar_search .btn.btn-link {
    color: #43424B;
}

.sc-data-table--topbar {
    padding: 10px 0;
    background-color: #f7f7f7;
}

.close-icon {
    border: 0px solid transparent;
    background-color: transparent;
    vertical-align: middle;
    outline: 0;
    cursor: pointer;
    float: right;
    margin: 0;
    opacity: 1;
    transition: all 0.3s;
}

    .close-icon:after {
        content: "";
        background: url(../images/close.png) no-repeat;
        background-size: contain;
        display: block;
        width: 16px;
        height: 16px;
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        margin: auto;
        cursor: pointer;
        opacity: 0.5;
    }

.search-box:not(:valid) ~ .close-icon {
    opacity: 0;
    visibility: hidden;
}


.sc-data-table {
    width: 100%;
    border-top: 1px solid #f7f7f7;
}

    .sc-data-table th {
        background-color: #f7f7f7;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }

    .sc-data-table th,
    .sc-data-table td {
        text-align: left;
        line-height: 16px;
    }

        .sc-data-table td i {
            vertical-align: middle;
            margin-right: 8px;
        }

        .sc-data-table td .mdl-chip.tags,
        .sc-data-table td .mdl-chip.tags:active,
        .sc-data-table--card__tasks {
            background-color: #e5f1f6;
            color: #0074A8;
            border-radius: 4px;
        }

        .sc-data-table td .mdl-chip.automation,
        .sc-data-table td .mdl-chip.automation:active {
            background-color: #e5f9ee;
            color: #01C255;
            border-radius: 4px;
        }

        .sc-data-table td .mdl-chip.status-no-payment,
        .sc-data-table--card__new-enquiry,
        .sc-data-table--card__misc-tags,
        .my-preference--food {
            background-color: #e5e9ef;
            color: #042460;
            border-radius: 4px;
        }

        .sc-data-table td .mdl-chip.status-paid-full,
        .my-preference--time {
            background-color: #e5f9ee;
            color: #47b868;
            border-radius: 4px;
        }

        .sc-data-table td .mdl-chip.status-payment-applied,
        .my-preference--cruise {
            background-color: #fcf4e5;
            color: #766036;
            border-radius: 4px;
        }

.sc-data-table--topbar_search {
    margin-right: 10px;
    border-radius: 4px;
    background: #e5e5e6;
}

.sc-data-table--card__notes,
.my-preference--airline {
    background-color: #fde5fc;
    color: #f039ea;
    border-radius: 4px;
}

.my-preference--like,
.my-preference--dislike {
    color: #9e9e9e;
    cursor: pointer;
    margin-top: auto;
    font-size: 14px;
}

    .my-preference--like:hover,
    .my-preference--dislike:hover {
        opacity: 0.5;
    }

    .my-preference--like .material-icons,
    .my-preference--dislike .material-icons {
        vertical-align: bottom;
    }

.sc-data-table--topbar_search .form-input {
    border: none;
    border-radius: 4px;
    width: 100%;
    float: right;
}

.sc-data-table--topbar_menu {
    text-transform: uppercase;
}

    .sc-data-table--topbar_menu ul,
    .sc-data-table--topbar_menu__icon {
        min-width: 50px;
    }

        .sc-data-table--topbar_menu ul,
        .sc-data-table--topbar_menu__icon ul {
            margin: 0 0 0 10px;
            padding: 0;
            list-style: none;
        }

            .sc-data-table--topbar_menu ul li,
            .sc-data-table--topbar_menu__icon ul li {
                display: inline-block;
                margin: 0;
            }

                .sc-data-table--topbar_menu ul li a,
                .sc-data-table--topbar_menu ul li button,
                .sc-data-table--topbar_search button {
                    font-size: 12px;
                    font-weight: 700;
                    color: #042460;
                    letter-spacing: 1px;
                    padding: 0 10px;
                }

                    .sc-data-table--topbar_menu ul li a.bnt-grey,
                    .sc-data-table--topbar_menu ul li button.bnt-grey {
                        color: #9e9e9e;
                    }

                    .sc-data-table--topbar_menu ul li a.delete-btn,
                    .sc-data-table--topbar_menu--mobilenav-list .delete-btn,
                    .sc-data-table--topbar_search button.delete-btn {
                        color: #C01823;
                    }

                .sc-data-table--topbar_menu__icon ul li a {
                    color: #636363;
                    padding-left: 3px;
                    padding-right: 3px;
                }

                    .sc-data-table--topbar_menu__icon ul li a i {
                        font-size: 24px;
                        line-height: 35px;
                    }

.sc-data-table--topbar .columns.col-oneline {
    overflow-x: visible;
}

.sc-data-table--topbar i {
    vertical-align: middle;
}

.sc-data-table--topbar a {
    color: #000;
}

.sc-data-table td .sc-data-table--action-box li {
    height: 34px;
    line-height: 34px;
}

/*.sc-data-table td .sc-data-table--action-box li.action-box-delete {
    color: #C01823;
}*/
.action-box-delete {
    color: #C01823;
}

.mdl-data-table.sc-data-table--list td,
.mdl-data-table td.sc-data-table--list .mdl-data-table__select {
    vertical-align: top;
}

.sc-data-table .sc-data-table--list-container {
    margin: 0;
    padding: 0;
    /*min-width: 200px;*/
}

    .sc-data-table .sc-data-table--list-container li {
        margin: 0;
        padding: 2px 0;
        display: block;
        white-space: nowrap;
    }

        .sc-data-table .sc-data-table--list-container li .sc-data-table--list__label {
            font-weight: 700;
            padding-left: 0;
            margin-right: 5px;
            display: inline-block;
        }

.custom-icon-box img {
    width: 24px;
    height: 24px;
    margin: 0 2px;
}

.sc-data-table--tr_first-child td:first-child {
    visibility: hidden;
    opacity: 0;
    width: 0;
    display: none;
}

    .sc-data-table--tr_first-child td:first-child label {
        display: none;
    }

.create-agent-statements span {
    display: inline !important;
}

.create-agent-statements a {
    color: #0074A8;
}

.projected-income--date-value_container {
    font-size: 16px;
    font-weight: 700;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 48px;
    background-color: #f2f3f5;
    padding: 0 10px;
    line-height: 36px;
}

    .projected-income--date-value_container ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .projected-income--date-value_container ul li {
            margin: 0;
            padding: 0;
            text-align: right;
        }

.sc-data-table td .table--grid_avatar img,
.sc-data-table--card_container .table--grid_avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.sc-data-table--card_container .table--grid_avatar {
    margin-right: 10px;
}

    .sc-data-table--card_container .table--grid_avatar.initials-avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #EC0066;
        text-align: center;
        line-height: 30px;
        font-weight: 700;
        color: #fff;
    }

.sc-data-table--card_container p {
    max-width: 295px;
    max-height: 100px;
    overflow: hidden;
}

.sc-data-table--card:hover .card--actions {
    display: block;
}

.card--actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}

    .card--actions ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .card--actions ul li {
            margin: 0;
            padding: 0 4px;
            display: inline;
        }

            .card--actions ul li .material-icons {
                color: #545454;
            }

.projected-income--value li span,
.projected-income--value li sub {
    display: block;
}

.projected-income--value li span {
    font-weight: 700;
}

.projected-income--value li sub {
    font-weight: 400;
}

.sc-login-box .form-group .mdl-button--icon {
    position: absolute;
    top: 22px;
    right: 2px;
}

.form-group .mdl-button--icon {
    position: absolute;
    top: 2px;
    right: 0.4rem;
}

.status-chips--zerocomm,
.status-chips--commrecall,
.status-chips--groupreconcile,
.status-chips--cloneinvoice,
.status-chips--multiplematch,
.status-chips--pending,
.status-chips--paid,
.status-chips--onhold {
    border-radius: 4px;
    padding: 0.2rem 0.4rem;
    line-height: 0.8rem;
}

.status-chips--groupreconcile {
    color: #092271;
    background-color: #819ae9;
}

.status-chips--zerocomm {
    color: #000;
    background-color: #c1c1c1;
}

.status-chips--cloneinvoice {
    color: #bfa950;
    background-color: #f5f69e;
}

.status-chips--commrecall {
    color: #a76645;
    background-color: #f5caa6;
}

.status-chips--multiplematch {
    color: #8e4763;
    background-color: #eec2de;
}

.status-chips--pending {
    color: #4D3300;
    background-color: #fcf4e5;
}

.status-chips--paid {
    color: #01C255;
    background-color: #e5f9ee;
}

.status-chips--onhold {
    color: #042460;
    background-color: #e5e9ef;
}

.sc-data-table--actions {
    width: 25px;
}

.commission-paid {
    color: #01C255;
}

.commission-notpaid {
    color: #FF5242;
}

.sc-data-table--topbar_menu--mobilenav {
    float: right;
}

.mdl-menu__item {
    height: 30px;
    line-height: 30px;
}

.sc-data-table--topbar_menu--mobilenav-list .mdl-menu__item {
    height: 30px;
    line-height: 30px;
}

.mdl-layout__content section > .container:first-child {
    overflow-y: auto;
    overflow-x: hidden;
    /* height: 80vh; */
    height: calc(100vh - 200px);
    position: relative;
}

.mdl-layout__content section > .container.no-header-footer {
    overflow-y: auto;
    height: calc(100vh - 80px);
    position: relative;
}

.mdl-layout__content section > .container.no-footer {
    overflow-y: auto;
    height: calc(100vh - 140px);
    position: relative;
}

.mdl-layout__content section > .container.sm-footer {
    overflow-y: auto;
    height: calc(100vh - 265px);
    position: relative;
}

.mdl-layout__content section > .container.lg-footer {
    overflow-y: auto;
    height: calc(100vh - 310px);
    position: relative;
}
/*.mdl-layout__content section.report-builder>.container{
     height: 74vh !important; 
}*/

.drag-drop-container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    background-color: #f2f3f5;
    border: 1px dashed #BFC8DF;
    border-radius: 4px;
    width: 100%;
    height: 150px;
    text-align: center;
}

.agent-statement--tab-frame,
.manage-content--tab-frame {
    width: 100%;
}

    .agent-statement--tab-frame > input,
    .manage-content--tab-frame > input {
        display: none;
    }

    .agent-statement--tab-frame > label,
    .manage-content--tab-frame > label {
        display: block;
        float: left;
        padding: 5px 10px;
        cursor: pointer;
        color: rgba(0, 0, 0, .54);
        font-size: 14px;
    }

        .agent-statement--tab-frame > label:hover,
        .manage-content--tab-frame > label:hover {
            background-color: rgba(127, 127, 127, 0.1);
        }

    .agent-statement--tab-frame input:checked + label,
    .manage-content--tab-frame input:checked + label {
        border-bottom: 2px solid rgb(63, 81, 181);
        color: #000;
        cursor: default
    }

    .agent-statement--tab-frame div.tab,
    .manage-content--tab-frame div.tab {
        display: none;
        padding: 5px 10px;
        clear: left
    }

    .agent-statement--tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
    .agent-statement--tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
    .agent-statement--tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3),
    .manage-content--tab-frame input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
    .manage-content--tab-frame input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
    .manage-content--tab-frame input:nth-of-type(3):checked ~ .tab:nth-of-type(3) {
        display: block;
    }

    .manage-content--tab-frame > label {
        padding: 1.6em;
    }

.post-commissions--total_container ul {
    margin: 0 0 48px 0;
    padding: 0;
    list-style: none;
}

    .post-commissions--total_container ul li {
        display: block !important;
    }

        .post-commissions--total_container ul li span {
            font-weight: 600;
        }

.sc-data-table--pagination-bar {
    position: relative;
    /* width: 99%;
    margin: 0 ; */
    /*z-index: 5;
    padding: 8px; 
    float: left;*/
    background-color: #f7f7f7;
    border-radius: 0 0 4px 4px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
}

    .sc-data-table--pagination-bar ul {
        margin: 0;
        padding: 8px;
        list-style: none;
        float: left;
    }

        .sc-data-table--pagination-bar ul li {
            display: inline;
            margin: 0 10px 0 0;
            padding: 0;
            vertical-align: top;
        }

            .sc-data-table--pagination-bar ul li span {
                vertical-align: bottom;
            }

        .sc-data-table--pagination-bar ul.right {
            margin: 0;
            list-style: none;
            float: right;
        }

.projected-income--total-amount {
    /* float: right;
    margin-right: 20px; */
    line-height: 40px;
}

    .projected-income--total-amount span {
        font-weight: 700;
    }

.reports-snapshot--list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .reports-snapshot--list ul li {
        float: left;
        background-color: #E5E9F1;
        border-radius: 4px;
        margin: 0 8px 8px 0;
        padding: 4px 8px;
        min-width: 100px;
    }

        .reports-snapshot--list ul li span {
            display: block;
        }

            .reports-snapshot--list ul li span.snapshot-list--title {
                font-weight: 700;
            }

.reports-snapshot--filter ul {
    margin: 0;
    list-style: none;
}

    .reports-snapshot--filter ul li {
        float: left;
        margin: 0 8px 8px 0;
        padding: 0;
    }

.reports-snapshot--filter .sc-data-table--topbar_search {
    background-color: #F2F3F5;
    padding: 2px 0;
}

.table--grid_avatar {
    min-width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    line-height: 29px;
}

.table--grid_avatar-title {
    padding-left: 10px;
}

@media (max-width:480px) {
    .sc-data-table--topbar {
        padding: 10px 10px 10px 0;
    }

    .sc-data-table--topbar_search {
        margin-bottom: 10px;
    }

    .sc-data-table--topbar_menu--mobilenav {
        display: block;
    }

    .sc-data-table--card_container .sc-data-table--card {
        width: 100%;
    }

    .sc-data-table--topbar_menu.sc-data-table--responsive_menu {
        display: none;
    }

    .mdl-layout__content section > .container.lg-footer {
        height: calc(100vh - 285px);
    }

    .sc-data-table--pagination-bar .footer--pagination {
        order: 2;
    }
}

@media (min-width:481px) {
    .sc-data-table--topbar_menu--mobilenav {
        display: none;
    }

    .sc-data-table--topbar_menu {
        display: block;
    }
}

@media (max-width:840px) {
    .sc-data-table--topbar_search .dropdown .menu {
        right: 0;
        left: auto;
        width: 250px;
    }
}
/*@media (max-width:1024px){
    .sc-data-table-wrapper{
        overflow-x: scroll;
    }
}*/


/*----------------------------------------------------------
SC DATATABLE CARD STYLES
----------------------------------------------------------*/
.sc-data-table--card_container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-right: 0.5em;
}

.sc-data-table--card {
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    padding: 0.8em;
    width: auto;
    min-width: 236px;
    border-radius: 4px;
}

.sc-data-table--card_userinfo_container {
    margin: 0;
    /* padding:0; */
    list-style: none;
    margin-right: 0.8em;
}

.sc-data-table--card_label {
    font-weight: 700;
    margin-right: 8px;
}

.sc-data-table--card .mdl-list {
    margin: 0;
    padding: 0;
}

    .sc-data-table--card .mdl-list .mdl-list__item {
        padding-left: 0;
        padding-top: 0;
        margin-top: 0;
    }

.sc-data-table--card_userinfo_container .card-automation--value_chip {
    background-color: #e5f9ee;
    color: #01C255;
    border-radius: 4px;
    padding: 5px 8px;
}

.sc-data-table--card_container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: flex-start;
    margin-top: 10px;
    font-size: 12px;
}

.sc-data-table--card .sc-data-table--card__tags {
    background-color: #e5f1f6;
    color: #0074A8;
    border-radius: 4px;
    float: left;
    padding: 5px 8px;
    margin-right: 5px;
    width: fit-content;
}

.sc-data-table--card.invoices-card {
    min-width: 320px;
}

.invoices-card label span {
    font-weight: 700;
    font-size: 1.2em;
}

.invoices-card--ref-amt {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .invoices-card--ref-amt li {
        display: inline;
        font-size: 12px;
        margin: 0 10px 0 0;
        padding: 0;
        color: #999;
    }

.invoices-card .mdl-list__item-primary-content {
    position: relative;
}

    .invoices-card .mdl-list__item-primary-content span:first-child {
        font-weight: 700;
        float: left;
        margin-right: 5px;
    }

.invoices-card .sc-data-table--card_container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 12px;
    margin-right: 0;
}

.invoices-card .mdl-list__item {
    padding-bottom: 0;
}

.invoices-status--new-inquiry {
    background-color: #e5e9ef;
    color: #213d73;
    padding: 4px 8px;
    border-radius: 4px;
}

.invoices-status--serious {
    background-color: #fcf4e5;
    color: #644c1e;
    padding: 4px 8px;
    border-radius: 4px;
}

.invoices-status--very-serious {
    background-color: #f9e7e9;
    color: #c7333c;
    padding: 4px 8px;
    border-radius: 4px;
}

.invoices-status--ready-book {
    background-color: #e5f9ee;
    color: #1e683e;
    padding: 4px 8px;
    border-radius: 4px;
}

.manage-content--add-attachment {
    margin: 0px 0 8px 8px;
    padding: 0;
    background-color: #BFC8DF;
    border-radius: 4px;
    float: left;
    position: relative;
    width: 76px;
    height: 76px;
}

    .manage-content--add-attachment a .material-icons {
        line-height: 72px;
        text-indent: 25px;
        color: #fff;
    }
/*------------------------------------------------------------------
MODAL POP-UP STYLES
---------------------------------------------------------------------*/
.modal-popup--form--tags_container {
    background: #f2f3f5;
    border-radius: 0.2rem;
    padding: .35rem .3rem;
}

.form--tags_chips {
    background: #d9e6ed;
    color: #0074A8;
    border-radius: 4px;
    font-size: 12px;
}

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

    .modal-title img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }

.col-section-separator {
    background-color: #fff;
    border: 1px solid #E5E9F1;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
}

.modal-body em {
    font-size: 11px;
}

.modal-tab--badge {
    background: #C01823;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

.modal label {
    font-size: 14px;
}
/*---------------------------------------------------------------
HEAER MENU + HEADER TABBR SCROLLING TABS
---------------------------------------------------------------*/
.sc_header_menu,
.sc_header_menu_tabs {
    background: #fff;
    box-shadow: 0px 1px 5px #d0d1d2;
}

.sc_header_menu {
    height: 45px;
}

.sc_header_menu_tabs {
    height: 58px;
}

.sc_header_menu a {
    color: #000;
    line-height: 52px;
}

.sc_header_menu i {
    vertical-align: middle;
}

.sc_body--top_menu {
    position: absolute;
    top: 15px;
    right: 6px;
    z-index: 1;
}

    .sc_body--top_menu a {
        color: #042460;
    }

.tabbr-container,
.tabsContainer {
    display: -webkit-box;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid transparent;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}

    .tabbr-container > li,
    .tabsContainer > li {
        position: relative;
        padding: 0px 24px;
        cursor: pointer;
        font-size: 14px;
        text-transform: uppercase;
        white-space: nowrap;
        outline: none;
        line-height: 48px;
    }

        .tabbr-container > li:not(:last-child):not(.selected):before,
        .tabsContainer > li:not(:last-child):not(.selected):before {
            content: "";
            position: absolute;
            display: block;
            right: -2px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 2px;
            height: 20px;
        }

        .tabbr-container > li.selected,
        .tabsContainer > li.selected {
            margin-bottom: -2px;
            outline: none;
        }

            .tabbr-container > li.selected:after,
            .tabsContainer > li.selected:after {
                content: "";
                position: absolute;
                top: -2px;
                left: -2px;
                top: 0;
                left: 0;
                display: block;
                width: calc(100% + 4px);
                height: calc(100% + 2px);
                width: 100%;
                height: 100%;
                /* border-bottom: 2px solid rgb(63, 81, 181); */
                border-bottom: 2px solid rgb(235, 10, 140);
            }

            .tabbr-container > li.selected:first-child:after,
            .tabsContainer > li.selected:first-child:after {
                border-left: none;
            }

.tabbr-wrapper {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    float: left;
}

.capsule-tabbr-container {
    width: calc(100% - 260px);
}

.control-arrow {
    position: absolute;
    top: 0;
    width: 50px;
    border: none;
    background: white;
    font-size: 20px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    outline: none;
}

    .control-arrow.left {
        left: 0;
        background: -webkit-gradient(linear, left top, right top, color-stop(56%, white), color-stop(57%, rgba(255, 255, 255, 0.98)), to(rgba(255, 255, 255, 0)));
        background: linear-gradient(to right, white 56%, rgba(255, 255, 255, 0.98) 57%, rgba(255, 255, 255, 0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
    }

    .control-arrow.right {
        right: 0;
        background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(43%, rgba(255, 255, 255, 0.98)), color-stop(44%, white));
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.98) 43%, white 44%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
    }

[tabbr-target-name],
[target-element],
[data-ytos-tab-target] {
    display: block;
    clear: both;
    padding: 10px;
}

.tabbr-non-scroller {
    transform: translateX(0px) !important;
}

@media (max-width:767px) {
    .sc_body--top_menu {
        top: -54px;
        right: 0;
        text-align: right;
        padding-top: 10px;
        padding-right: 10px;
    }

    .capsule-tabbr-container {
        width: 100%;
    }
}


/* @media (min-width:960px){
    .tabbr-responsive-scroller{
        transform: translateX(0px) !important;
    }
}
@media (min-width:958px){
    .tabbr-responsive-scroller{
        transform: translateX(auto);
    }
} */
/*----------------------------------------------------------
MODAL TABS STYLES
-----------------------------------------------------------------*/
.verticaltab-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.resp-tabs-list li {
    font-weight: 600;
    font-size: 13px;
    display: inline-block;
    padding: 13px 15px;
    margin: 0 4px 0 0;
    list-style: none;
    cursor: pointer;
}

.resp-tabs-container {
    padding: 0px;
    background-color: #fff;
    clear: left;
}

h2.resp-accordion {
    cursor: pointer;
    padding: 5px;
    display: none;
}

.resp-tab-content {
    display: none;
    padding: 15px;
}

.resp-tab-active {
    border-bottom: none;
    margin-bottom: -1px !important;
    padding: 12px 14px 14px 14px !important;
}

.resp-tab-active {
    border-bottom: none;
    background-color: #fff;
}

.resp-content-active,
.resp-accordion-active {
    display: block;
}

.resp-tab-content {
    border: 1px solid #c1c1c1;
    border-top-color: #5AB1D0;
}

h2.resp-accordion {
    font-size: 13px;
    border: 1px solid #c1c1c1;
    border-top: 0px solid #c1c1c1;
    margin: 0px;
    padding: 10px 15px;
}

h2.resp-tab-active {
    border-bottom: 0px solid #c1c1c1 !important;
    margin-bottom: 0px !important;
    padding: 10px 15px !important;
}

h2.resp-tab-title:last-child {
    border-bottom: 12px solid #c1c1c1 !important;
    background: blue;
}

/*-----------Vertical tabs-----------*/

.resp-vtabs ul.resp-tabs-list {
    float: left;
    width: 30%;
    text-transform: uppercase;
    background: #f9f9f9;
    padding: 10px;
    margin-left: 0;
}

.resp-vtabs .resp-tabs-list li {
    display: block;
    padding: 10px 15px !important;
    margin: 0 0 4px;
    cursor: pointer;
    float: none;
    background: #fff;
    border-radius: 8px;
    font-weight: 700;
}

.resp-vtabs .resp-tabs-container {
    padding: 0px;
    background-color: #fff;
    float: left;
    width: 68%;
    min-height: 250px;
    border-radius: 4px;
    clear: none;
}

.resp-vtabs .resp-tab-content {
    border: none;
    word-wrap: break-word;
}

.resp-vtabs li.resp-tab-active {
    position: relative;
    z-index: 1;
    margin-right: -1px !important;
    padding: 10px 15px 10px 14px !important;
    margin-bottom: 4px !important;
    color: #042460;
    background-color: #E5E9F1 !important;
}

.resp-arrow {
    width: 0;
    height: 0;
    float: right;
    margin-top: 3px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #c1c1c1;
}

h2.resp-tab-active span.resp-arrow {
    border: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 6px solid #9B9797;
}

/*-----------Accordion styles-----------*/
h2.resp-tab-active {
    color: #042460;
    background-color: #E5E9F1 !important;
}

.resp-easy-accordion h2.resp-accordion {
    display: block;
}

.resp-easy-accordion .resp-tab-content {
    border: 1px solid #c1c1c1;
}

    .resp-easy-accordion .resp-tab-content:last-child {
        border-bottom: 1px solid #c1c1c1;
        /* !important;*/
    }

.resp-jfit {
    width: 100%;
    margin: 0px;
}

.resp-tab-content-active {
    display: block;
}

h2.resp-accordion {
    border-top: 1px solid #c1c1c1;
    /* !important;*/
}

/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 768px) {
    ul.resp-tabs-list {
        display: none;
    }

    h2.resp-accordion {
        display: block;
        border-radius: 4px;
        background: #fff;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .resp-tab-active {
        background: #E5E9F1 !important;
    }

    .resp-vtabs .resp-tab-content {
        border: 1px solid #C1C1C1;
        margin-bottom: 4px;
    }

    .resp-vtabs .resp-tabs-container {
        border: none;
        float: none;
        width: 100%;
        min-height: 100px;
        clear: none;
    }

    .resp-accordion-closed {
        display: none !important;
    }

    .resp-vtabs .resp-tab-content:last-child {
        border-bottom: 1px solid #c1c1c1 !important;
    }
}

/*Floating Action Button*/
.fab-container {
    /*background: #eb098b;*/
    /* height: 100vh; */
    width: 74px;
    position: fixed;
    /* top: 0; */
    bottom: 0;
    right: 0;
    z-index: 1;
}

.fabs {
    bottom: 0;
    position: fixed;
    margin: 0.5em;
    right: 0;
    z-index: 998;
}

.fab {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    text-align: center;
    color: #1d164b;
    background: #fff;
    margin: 25px auto 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, .14), 0 4px 8px rgba(0, 0, 0, .28);
    cursor: pointer;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
    position: relative;
    z-index: 998;
}

    .fab > i {
        font-size: 2em;
        line-height: 55px;
        -webkit-transition: all .2s ease-out;
        -webkit-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }

    .fab:not(:last-child) {
        width: 0;
        height: 0;
        margin: 10px auto 0;
        opacity: 0;
        visibility: hidden;
    }

        .fab:not(:last-child) > i {
            font-size: 1.4em;
            line-height: 40px;
        }

        .fab:not(:last-child).is-visible {
            width: 40px;
            height: 40px;
            margin: 15px auto 10;
            opacity: 1;
            visibility: visible;
        }

    .fab:nth-last-child(1) {
        -webkit-transition-delay: 25ms;
        transition-delay: 25ms;
    }

    .fab:not(:last-child):nth-last-child(2) {
        -webkit-transition-delay: 20ms;
        transition-delay: 20ms;
    }

    .fab:not(:last-child):nth-last-child(3) {
        -webkit-transition-delay: 40ms;
        transition-delay: 40ms;
    }

    .fab:not(:last-child):nth-last-child(4) {
        -webkit-transition-delay: 60ms;
        transition-delay: 60ms;
    }

    .fab:not(:last-child):nth-last-child(5) {
        -webkit-transition-delay: 80ms;
        transition-delay: 80ms;
    }

    .fab:not(:last-child):active,
    .fab:not(:last-child):focus,
    .fab:not(:last-child):hover {
        box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
    }

.fab_field {
    width: 100%;
    display: inline-block;
    text-align: center;
    background: #eceff1;
    box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}

    .fab_field a {
        display: inline-block;
        text-align: center;
    }

#fab_listen {
    float: left;
    background: rgba(0, 0, 0, 0);
}

#fab_send {
    float: right;
    background: rgba(0, 0, 0, 0);
}

.fab_field .fab {
    width: 35px;
    height: 35px;
    box-shadow: none;
    margin: 5px;
}

    .fab_field .fab > i {
        font-size: 1.6em;
        line-height: 35px;
        color: #263238;
    }

@media(max-width:767px) {
    .fab {
        /*width: 36px;
        height: 36px;*/
        margin-bottom: 25px;
        margin-right: 0px;
    }

    /*.fab > i {
            font-size: 1.4em;
            line-height: 40px;
        }*/
}
/*Element state*/
.prime.is-active {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.is-float {
    box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}

.is-max {
    box-shadow: inset 0 -12px 10px -10px rgba(0, 0, 0, 0.18), inset 0 12px 10px -10px rgba(0, 0, 0, 0.10);
}

.is-loading {
    display: block;
    -webkit-animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
    animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
}

[tooltip]:before {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color: #042460;
    color: #fff;
    content: attr(tooltip);
    font-size: 12px;
    visibility: hidden;
    opacity: 0;
    padding: 4px 10px;
    margin-right: 10px;
    position: absolute;
    right: 100%;
    bottom: 6%;
    white-space: nowrap;
}

[tooltip]:hover:before,
[tooltip]:hover:after {
    visibility: visible;
    opacity: 1;
}


/*Animation*/

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomIn {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes load {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }

    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes load {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0.0;
    }

    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

/* SMARTPHONES PORTRAIT */

@media only screen and (min-width: 300px) {
    .chat {
        width: 200px;
    }
}

/* SMARTPHONES LANDSCAPE */

@media only screen and (min-width: 480px) {
    .chat {
        width: 300px;
    }

    .chat_field {
        width: 65%;
    }
}

/* TABLETS PORTRAIT */

@media only screen and (min-width: 768px) {
    .chat {
        width: 300px;
    }

    .chat_field {
        width: 65%;
    }
}

/* TABLET LANDSCAPE / DESKTOP */

@media only screen and (min-width: 1024px) {
    .chat {
        width: 400px;
    }

    .chat_field {
        width: 65%;
    }
}


/* Ripple */

.ink {
    display: block;
    position: absolute;
    background: rgba(38, 50, 56, 0.4);
    border-radius: 100%;
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

    /*animation effect*/

    .ink.animate {
        -webkit-animation: ripple 0.5s ease-in-out;
        animation: ripple 0.5s ease-in-out;
    }

@-webkit-keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {
        opacity: 0;
        -moz-transform: scale(5);
        -ms-transform: scale(5);
        webkit-transform: scale(5);
        -webkit-transform: scale(5);
        transform: scale(5);
    }
}

@keyframes ripple {
    /*scale the element to 250% to safely cover the entire link and fade it out*/
    100% {
        opacity: 0;
        -moz-transform: scale(5);
        -ms-transform: scale(5);
        webkit-transform: scale(5);
        -webkit-transform: scale(5);
        transform: scale(5);
    }
}

/*----------------------------------------------------------------
  QUICK SUBMIT BOOKING
  ----------------------------------------------------------------*/
.add-customer-info--container,
.add-vendor-info--container {
    height: 200px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.add-customer-info--icon,
.add-vendor-info--icon {
    background: #E5E9F1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 60px;
    color: #123476;
}

.add-customer-info--button.btn.btn-link,
.add-vendor-info--button.btn.btn-link {
    background: #E5E9F1;
    color: #123476;
    border-radius: 4px;
    padding: 4px 20px;
    margin-top: 10px;
    font-weight: 700;
}

/*----------------------------------------------------------------
  ADD INVOICE WRAPPER
  ----------------------------------------------------------------*/
.create-invoice-wrapper .sc_header_menu_tabs {
    border-radius: 4px 4px 0 0;
}

.trip-group-hero--header,
.cover-page-hero--header {
    position: relative;
    margin-bottom: 8px;
    border-radius: 4px;
    max-height: 400px;
    overflow: hidden;
}

    .trip-group-hero--header img,
    .cover-page-hero--header img {
        border-radius: 4px;
        width: 100%;
    }

.trip-group-hero--header_edit,
.cover-page-hero--header_edit {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    position: absolute;
    top: 10px;
    right: 15px;
    text-align: center;
    line-height: 65px;
}

.add-invoice--parent-column {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
}

.add-invoice--primary-column,
.add-invoice--secondary-column {
    flex: 0 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-flow: column wrap;
    align-content: flex-start;
    flex-grow: 1;
}

.secondary-column--preparedby_container,
.secondary-column--passengers_container,
.secondary-column--important-dates_container,
.secondary-column--pricing_container,
.secondary-column--paymentmth_container,
.add-invoice--page-column__content {
    flex: 1 300px !important;
    width: 100%;
    padding: 0 8px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    position: relative;
    overflow: hidden;
}

#tripgroup .add-invoice--secondary-column {
    max-height: 98vh;
}

.add-invoice--secondary-column h6 {
    background-color: #fff;
    position: relative;
    z-index: 2;
}

.add-invoice--secondary-column .mdl-list {
    margin: 0;
    background-color: #fff;
}

.add-invoice--secondary-column .card--grid_avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
}

.create-invoice-wrapper .add-invoice--secondary-column .mdl-card {
    width: auto;
}

.add-invoice--secondary-column .mdl-menu__item.delete-btn {
    color: #C01823;
}

.create-invoice-wrapper .add-invoice--secondary-column .mdl-card .mdl-list > li:last-child {
    padding-bottom: 0;
}

.secondary-column--card_userinfo_container {
    margin: 0;
    list-style: none;
    margin-right: 0.8em;
    word-break: break-all;
}

.secondary-column--card_label {
    font-weight: 700;
    margin-right: 8px;
}

.create-invoice-wrapper .add-invoice--secondary-column .mdl-list__item--two-line {
    height: auto;
}

.add-invoice--title-btn_container {
    position: absolute;
    top: -3px;
    right: 5px;
    z-index: 2;
}

    .add-invoice--title-btn_container ul {
        margin: 0;
        padding: 0;
    }

        .add-invoice--title-btn_container ul li {
            display: inline-block;
        }

.create-invoice-wrapper .mdl-list {
    padding-top: 0;
}

    .create-invoice-wrapper .mdl-list > li {
        padding: 8px 0 0;
        border-bottom: 1px solid #e0e0e0;
        margin-top: 0;
    }

.create-invoice-wrapper .secondary-column--passengers_container .mdl-list > li:last-child {
    border-bottom: 0;
}

.create-invoice-wrapper .mdl-list > li:last-child {
    border-bottom: 0;
    padding-bottom: 40px;
}

.create-invoice-wrapper .mdl-list > li:hover {
    cursor: pointer;
}

    .create-invoice-wrapper .mdl-list > li:hover .mdl-list__item-avatar img {
        border: 2px solid #00A4DC;
    }

.create-invoice-wrapper .mdl-list .mdl-list__item-avatar img {
    height: 40px;
    width: 40px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.5s;
    padding: 1px;
}

.create-invoice-wrapper .mdl-list .mdl-list__item--three-line,
.create-invoice-wrapper .mdl-list .mdl-list__item--three-line .mdl-list__item-primary-content {
    height: inherit;
}

    .create-invoice-wrapper .mdl-list .mdl-list__item--three-line .mdl-list__item-text-body {
        height: 38px;
    }

.create-invoice-wrapper .mdl-button {
    min-width: 20px;
    padding: 0 8px;
}

.create-invoice-wrapper .add-invoice--passengers_info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .create-invoice-wrapper .add-invoice--passengers_info ul li {
        font-size: 12px;
        white-space: nowrap;
        line-height: 10px;
    }

        .create-invoice-wrapper .add-invoice--passengers_info ul li:nth-child(2) {
            margin-left: 48px;
        }

        .create-invoice-wrapper .add-invoice--passengers_info ul li span.active {
            color: #01C255;
        }

        .create-invoice-wrapper .add-invoice--passengers_info ul li span.inactive {
            color: #C01823;
        }

.create-invoice-wrapper .mdl-list__item .mdl-list__item-primary-content .mdl-list__item-avatar {
    margin-right: 8px;
    background: transparent;
}

.mdl-list__item-secondary-content {
    margin-top: -28px;
}

    .mdl-list__item-secondary-content button {
        visibility: hidden;
        opacity: 0;
        transition: all 0.5s;
    }

        .mdl-list__item-secondary-content button:hover {
            background: transparent;
            color: #000;
        }

.create-invoice-wrapper .mdl-list > li:hover .mdl-list__item-secondary-content button {
    visibility: visible;
    opacity: 1;
}

.create-invoice-form .form-group .form-radio input:checked + .form-icon {
    background: #fff;
    border-color: #fff;
}

    .create-invoice-form .form-group .form-radio input:checked + .form-icon::before {
        content: '';
        position: absolute;
        background: url(../images/round-check_box.svg) no-repeat #fff;
        background-size: contain;
        font-size: 12px;
        width: 24px;
        height: 24px;
        z-index: 10;
    }

.create-notes-container {
    position: fixed;
    bottom: 0;
    padding: 8px 8px 8px 0;
    z-index: 10;
    background: #fff;
    /*width: 79%;*/
    width: calc(100% - 55px);
}

.cover-page--invoice-no_container {
    background-color: #fff;
    border: 1px solid #E5E9F1;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    padding: 8px 12px;
    font-weight: 700;
}

    .cover-page--invoice-no_container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background-color: #01C255;
        border-radius: 4px 0 0 4px;
    }

    .cover-page--invoice-no_container span {
        display: block;
    }

.cover-page--attachment_container ul {
    margin: 24px 0 0 0;
    padding: 0;
    list-style: none;
}

ul.add-attachment {
    margin: 0;
    padding: 0;
    list-style: none;
}

    ul.add-attachment li {
        margin: 8px 0 8px 8px;
        padding: 0;
        background-color: #BFC8DF;
        border-radius: 4px;
        float: left;
        position: relative;
        width: 76px;
        height: 76px;
    }

        ul.add-attachment li:first-child a .material-icons {
            line-height: 72px;
            text-indent: 25px;
            color: #fff;
        }

        ul.add-attachment li a .material-icons.cover-page--delete-image {
            position: absolute;
            top: -5px;
            right: -5px;
            transform: rotate(45deg);
            background: #999;
            color: #fff;
            padding: 1px;
            border-radius: 50%;
            font-size: 16px;
        }

.modal--avatar-edit {
    width: 80px;
    height: 80px;
    background-color: #BFC8DF;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.modal--grid_search {
    background-color: #f7f7f7;
}

    .modal--grid_search input {
        background-color: rgba(67, 66, 75, 0.05);
    }

.modal#passenger-edit .table th {
    font-weight: 400 !important;
    color: rgba(0, 0, 0, 0.6);
    background-color: #F7F7F7;
}

.modal--grid-edit-actions {
    float: right;
}

    .modal--grid-edit-actions div {
        display: inline-block;
        vertical-align: middle;
    }

        .modal--grid-edit-actions div.form-group {
            padding-top: 8px;
        }

    .modal--grid-edit-actions .grid--info_cancel {
        color: #ff766a;
    }

    .modal--grid-edit-actions .grid--info_save {
        color: #19c765;
    }

.add-invoice--pricing_info_container {
    position: relative;
}

    .add-invoice--pricing_info_container .show-more {
        font-size: 12px;
        cursor: pointer;
        float: left;
        padding-top: 20px;
    }

        .add-invoice--pricing_info_container .show-more:hover {
            color: #1779dd;
        }

    .add-invoice--pricing_info_container .show-more-height {
        height: 140px;
        overflow: hidden;
    }

.add-invoice--pricing_info-details {
    position: relative;
}

    .add-invoice--pricing_info-details table th,
    .add-invoice--pricing_info-details table tr {
        font-size: 12px;
        color: #666;
    }

    .add-invoice--pricing_info-details table th {
        font-weight: 700;
    }

    .add-invoice--pricing_info-details table .credit-card {
        color: #01c255;
    }

    .add-invoice--pricing_info-details table .mail {
        color: #00a4dc;
    }

    .add-invoice--pricing_info-details table .credit-card,
    .add-invoice--pricing_info-details table .mail {
        vertical-align: middle;
        font-size: 18px;
        margin-right: 5px;
    }

.pricing_info-details--id {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
    padding: 4px 8px;
}

.add-invoice--pricing_info-tbilling ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .add-invoice--pricing_info-tbilling ul li {
        color: #666666;
        font-size: 12px;
    }

.add-invoice--pricing_info-tbilling .tbilling--comission {
    background-color: #e0f4e9;
    font-size: 12px;
    border: 1px solid #cbe2d5;
    border-radius: 4px;
    margin-top: 16px;
}

.secondary-column--pricing_container ul.pricing_container__price-items {
    margin: 16px 0 0 0;
    padding: 0;
    list-style: none;
}

    .secondary-column--pricing_container ul.pricing_container__price-items li {
        margin: 0;
        padding: 0;
        line-height: 28px;
    }

        .secondary-column--pricing_container ul.pricing_container__price-items li span {
            float: right;
            font-weight: 600;
        }

.pricing_container__price-items_total {
    border-top: 1px solid #F2F3F5;
    border-bottom: 1px solid #F2F3F5;
    position: relative;
    overflow: hidden;
    padding: 8px 0 8px 8px;
    margin-left: -0.4rem;
    margin-right: -0.4rem;
}

    .pricing_container__price-items_total:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 5px;
        height: 100%;
        background-color: #01c255;
    }

    .pricing_container__price-items_total span {
        font-size: 1.2rem;
        font-weight: 600;
        float: right;
        padding-right: 8px;
    }

.secondary-column--paymentmth_container ul {
    margin: 0 0 10px 0;
    padding: 0;
    list-style: none;
}

    .secondary-column--paymentmth_container ul li img {
        width: 32px;
        margin-right: 8px;
    }

.add-invoice--page-column .add-invoice--title-btn_container {
    position: relative;
    margin-bottom: 24px;
}

.modal--add-fields {
    margin: 8px 0 0 0;
    padding: 0;
    background-color: #BFC8DF;
    border-radius: 4px;
    float: left;
    position: relative;
    width: 100%;
    height: 35px;
}

    .modal--add-fields .material-icons {
        line-height: 35px;
        text-indent: 4px;
    }

.add-product-services-modal .resp-tabs-list {
    float: right !important;
}

.product-service-total-price.form-group sup {
    display: block;
    width: 100%;
    position: relative;
    top: 8px;
}

.product-service-total-price.form-group span {
    display: block;
    width: 100%;
    position: relative;
    top: 20px;
    font-size: 12px;
    font-weight: 700;
}
/*----------- Tertiary Column Miscellaneous Tab Style ----------*/
.miscellaneous-tab {
    float: right;
    background-color: #f1f1f1;
    width: 48px;
    height: inherit;
}

    .miscellaneous-tab::after {
        content: '';
        position: absolute;
        background: #f1f1f1;
        width: 48px;
        height: 100%;
    }

    .miscellaneous-tab button {
        display: block;
        background-color: inherit;
        color: black;
        padding: 10px 8px;
        width: 100%;
        border-bottom: 1px solid #e0e0e0;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        outline: none;
        text-align: center;
        cursor: pointer;
        font-size: 17px;
    }

        .miscellaneous-tab button:hover,
        .miscellaneous-tab button.active {
            background-color: #e0e0e0;
        }

.miscellaneous-tabcontent {
    float: left;
    padding: 0px 8px;
    /*width: 80.7%;*/
    /*width: 88%;*/
    width: calc(100% - 48px);
    border-left: none;
    /* height: 100vh; */
    height: 100%;
    overflow: hidden;
}

.miscellaneous-tab button.add-invoice--notes {
    color: #00a4dc;
}

.miscellaneous-tab button.add-invoice--tripmessages {
    color: #c01823;
}

.miscellaneous-tab button.add-invoice--task {
    color: #38b557;
}

.miscellaneous-tab button.add-invoice--automation {
    color: #ec0066;
}

.miscellaneous-tabcontent--title {
    position: fixed;
    /*width: 78%;*/
    width: calc(100% - 48px);
    background: #fff;
    top: 0;
    left: 0;
    z-index: 1;
}

.miscellaneous-tabcontent h6 {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
    padding-left: 12px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.miscellaneous-tabcontent > ul {
    margin-top: 44px;
}

.miscellaneous-tabcontent ul li:last-child .miscellaneous-tab--tripmessage-container,
.miscellaneous-tabcontent ul li:last-child .miscellaneous-tab--task-container,
.miscellaneous-tabcontent ul li:last-child .miscellaneous-tab--automations-container {
    border-bottom: 0;
}

.miscellaneous-tab--notes-container {
    background: #fffabd;
    padding: 5px 8px;
    margin-bottom: 8px;
    position: relative;
}

    .miscellaneous-tab--notes-container p {
        line-height: 20px;
        margin-bottom: 10px;
    }

.miscellaneous-tab--notes-action {
    position: absolute;
    bottom: 5px;
    right: 5px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
}

.miscellaneous-tab--notes-container:hover .miscellaneous-tab--notes-action {
    opacity: 1;
    visibility: visible;
}

.miscellaneous-tab--notes-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-top: 15px solid #E2D400;
    border-left: 15px solid transparent;
}

.miscellaneous-tab--notes-items,
.miscellaneous-tab--tripmessages-items,
.miscellaneous-tab--task-items,
.miscellaneous-tab--automations-items {
    margin: 0;
    list-style: none;
}

    .miscellaneous-tab--notes-items > li:last-child {
        height: 90px;
        display: block;
    }

.miscellaneous-tab--tripmessage-container,
.miscellaneous-tab--task-container,
.miscellaneous-tab--automations-container {
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid #e0e0e0;
}

.miscellaneous-tabcontent.task--wrapper h6::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 35px;
    background-color: #01C255;
}

.miscellaneous-tab--task-container .form-checkbox {
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    min-height: auto;
}

.miscellaneous-tab--task-items li {
    display: block;
    width: 100%;
}

.miscellaneous-tab--task-container .form-checkbox .form-icon {
    border-radius: 15px;
}

.miscellaneous-tab--task-container .form-checkbox input:checked + .form-icon::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    background: url(../images/round-check_box.svg) no-repeat #fff;
    background-size: contain;
    font-size: 12px;
    width: 24px;
    height: 24px;
    z-index: 10;
    transform: rotate(0);
}

@media (min-width:768px) {
    .add-invoice--pricing_info-tbilling {
        padding-top: 40px !important;
    }
}

@media (max-width:767px) {
    .create-invoice-wrapper .sc_header_menu_tabs {
        margin-top: 50px;
        border-radius: 0;
    }

    .mdl-list__item-secondary-content button {
        visibility: visible;
        opacity: 1;
    }

    .add-invoice--primary-column {
        margin-bottom: 10px;
    }
}

/*------------------------------------------------------------------
SLIDER BOX STYLE
-------------------------------------------------------------------*/
.mdl-layout__content.create-invoice-wrapper > .section-wrapper {
    height: calc(100vh - 120px);
}

.create-invoice-wrapper .targetsContainer > div section {
    display: block;
    height: auto;
}

.add-invoice--tertiary-column {
    /*display:flex;
	flex-direction:column;*/
    /*max-height:98vh;*/
    position: relative;
}

.slide-box-container {
    background-color: #fff;
    border-left: 1px solid #e0e0e0;
    /*width: calc(100% - 74.8%);*/
    /*height: 100vh;*/
    width: 100%;
    height: auto;
    position: absolute;
    top: 1px;
    bottom: 0;
    right: -5px;
    transition: all 0.2s;
    z-index: 1;
    overflow: hidden;
}

/*.slide-box-container {
    background-color: #fff;
    border-left: 1px solid #e0e0e0;
	width:calc(100% - 79%);
	height:calc(100vh - 212px);
    position: fixed;
    top: 179px;
    bottom: 0;
	right:30px;
    transition: all 0.2s;
    z-index: 1;
    overflow: hidden;
}*/

.slider-box-btn--hide {
    background-color: #e5e9f1;
    color: #fff;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    position: absolute;
    bottom: 50px;
    right: 10px;
    z-index: 10;
    padding: 4px 0;
}

.slider-box-btn--show {
    visibility: visible;
    opacity: 1;
    position: fixed;
    right: 0;
    background-color: darkblue;
    color: #fff;
    border: 0;
    width: 30px;
    height: 40px;
    border-radius: 20px 0 0 20px;
    line-height: 50px;
}

@media (min-width:841px) {

    .slider-box-btn--show,
    .slider-box-btn--hide {
        visibility: hidden;
        opacity: 0;
    }

    .slide-box-container {
        transform: translateX(0px);
    }
}

@media (max-width:840px) {
    .slide-box-container {
        width: 280px;
        height: 80vh;
        top: 102px;
        position: fixed;
        transform: translateX(calc(100% - 0px));
        z-index: 10;
    }

    .slide-box-container--off_grid {
        transform: translateX(calc(100% - 100%));
    }

    .slider-box-btn--show {
        visibility: visible;
        opacity: 1;
        bottom: 30px;
    }

    .miscellaneous-tab--notes-items li:last-child {
        height: 100px;
        display: block;
    }

    .miscellaneous-tab--tripmessages-items li:last-child,
    .miscellaneous-tab--task-items li:last-child,
    .miscellaneous-tab--automations-items li:last-child {
        height: 45px;
        display: block;
    }
}

/*---------------------------------------------------------
DASHBOARD UI
------------------------------------------------------------*/
.db-today--trip_items {
    background-color: #f2f3f5;
    border: 1px solid #e3e7f0;
    border-radius: 4px;
    padding: 22px 8px;
}

.trip-items--value, .trip-items--title {
    display: block;
    text-align: center;
}

.trip-items--value {
    font-size: 2.4em;
    padding-bottom: 16px;
}

.trip-items--title {
    color: #8e8e90;
}

/*----------------------------------------------------------
CHAT BOX UI STYLE
------------------------------------------------------------*/
.scrm--chat_container {
    height: 100%;
    padding: 0;
    overflow: hidden;
}

.chat--user-list_container,
.chat--user-messenger_container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
}

.chat--user-list_search_add {
    flex-basis: 80px;
    /* background: #dcd6f7; */
    background-color: #fff;
    /*   display: flex;
    align-items: center; */
    border-bottom: 1px solid #e7e8ea;
}

    .chat--user-list_search_add .columns {
        padding-top: 20px;
    }

.chat--user-list_items-wrapper {
    flex-grow: 1;
    background: #fff;
    flex-basis: 80px;
}

.chat--user-messenger_header {
    display: flex;
    align-items: center;
    flex-basis: 80px;
    background: #fff;
    border-bottom: 1px solid #e7e8ea;
    color: #000;
    padding-top: 8px;
}

.chat--user-messenger_header-back-nav,
.chat--user-messenger_header-action-menu {
    flex-basis: 30px;
}

    .chat--user-messenger_header-back-nav a {
        color: #042460;
    }

/* .chat--user-messenger_header-back-nav a:hover {} */

.chat--user-messenger_body {
    flex-grow: 1;
    height: 100px;
    background: #f2f3f5;
    cursor: default !important;
}

.chat--user-messenger_footer {
    flex-basis: 80px;
    background: #f2f3f5;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: center;
}

.show_hide {
    display: none;
}

.chat--user-list_container-close-nav {
    position: absolute;
    top: 0;
    right: -32px;
    background: #fff;
    padding: 4px 4px 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 1px 1px 5px #d7d7d7;
}

    .chat--user-list_container-close-nav a {
        color: #042460;
        float: right;
    }

.chat-search .material-icons {
    top: 40% !important;
}

.chat-search input {
    background-color: #e5e5e6;
    border: 0;
    border-radius: 4px;
    padding-left: 1.7rem !important;
}

.chat--add-user {
    background: #E5E9F1;
    padding: 6px;
    color: #042460;
}

.chat--user-list_items-wrapper > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.chat--user-list_items-wrapper ul > li {
    display: block;
    margin: 0;
    padding: 4px 0 4px 0;
    border-bottom: 1px solid #e7e8ea;
    cursor: pointer;
}

    .chat--user-list_items-wrapper ul > li.active {
        background-color: #e5e9f1;
    }

    .chat--user-list_items-wrapper ul > li:hover {
        background-color: #f4f5f7;
    }

        .chat--user-list_items-wrapper ul > li:hover .group-info--display-picture img,
        .chat--user-list_items-wrapper ul > li:hover .group-info--display-picture span {
            border: 2px solid #3195f8;
        }

    .chat--user-list_items-wrapper ul > li.active .group-info--display-picture img,
    .chat--user-list_items-wrapper ul > li.active .group-info--display-picture span {
        border: 2px solid #3195f8;
    }


.chat--user-list_items-group-date {
    font-size: 11px;
    text-align: right;
    color: #9e9e9e;
    padding: 0 10px;
    line-height: 14px;
}

.chat--user-messenger_header-info {
    flex-grow: 1;
    display: block;
    padding: 0 10px;
    overflow: hidden;
}

.chat--user-list_items-group-info {
    width: 100%;
    display: block;
    padding: 0 10px;
}

    .chat--user-list_items-group-info ul,
    .chat--user-messenger_header-info ul {
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        flex-direction: row;
        margin: 0;
        padding: 0;
    }

        .chat--user-list_items-group-info ul li,
        .chat--user-messenger_header-info ul li {
            display: inline;
            vertical-align: top;
            border-bottom: 0;
            padding: 0;
            margin: 0;
        }

            .chat--user-list_items-group-info ul li span,
            .chat--user-messenger_header-info ul li span {
                display: block;
            }

.group-info--display-picture,
.messenger--header-display-picture {
    flex-basis: 66px;
    margin-right: 8px !important;
}

    .group-info--display-picture img,
    .group-info--display-picture span,
    .messenger--header-display-picture img {
        border-radius: 50%;
        border: 2px solid transparent;
        transition: all 0.5s;
        font-size: 1.6em;
        text-align: center;
        line-height: 62px;
    }

    .group-info--display-picture img,
    .messenger--header-display-picture img {
        width: 70px;
        height: 70px;
    }

    .group-info--display-picture span {
        width: 66px;
        height: 66px;
    }

.group-info--display-info, .messenger--header-display-info {
    flex-grow: 1;
}

.group-info--display-info_title,
.messenger--header-display-info_title {
    font-weight: 600;
    padding-bottom: 0.4em;
    overflow: hidden;
}

.group-info--display-info_recent-chat,
.messenger--header-display-info_user-list {
    height: 36px;
    font-size: 12px;
    line-height: 16px;
    color: #9e9e9e;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .messenger--header-display-info_user-list ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .messenger--header-display-info_user-list ul li {
            display: inline-block;
            margin: 0;
            padding: 0 3px 0;
            height: 40px;
            overflow: hidden;
            position: relative;
        }

            .messenger--header-display-info_user-list ul li::after {
                content: ',';
                position: absolute;
                top: 0;
                right: 0;
                width: 2px;
                height: 2px;
            }

            .messenger--header-display-info_user-list ul li:last-child::after {
                content: '';
            }

.chat--msg-bubble {
    /* max-width: 450px; */
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    margin: 10px 16px 0;
}

.chat--msg-bubble_text {
    display: block;
    padding: 10px 12px;
    line-height: 22px
}

.chat--msg-bubble_info {
    display: block;
}

    .chat--msg-bubble_info ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .chat--msg-bubble_info ul li {
            display: inline-block;
        }

.chat--msg-bubble_info_avatar img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    vertical-align: middle;
}

.chat--msg-bubble_info_name,
.chat--msg-bubble_info_time {
    font-size: 12px;
}

.left-msg {
    max-width: 450px;
    justify-content: flex-start;
}

    .left-msg .chat--msg-bubble_text {
        background-color: #fff;
        border-radius: 8px;
        border-bottom: 1px solid #e2e2e2;
        border-right: 1px solid #e2e2e2;
    }

.right-msg {
    max-width: 450px;
    margin-left: auto;
}

    .right-msg .chat--msg-bubble_text {
        background-color: #e5e9f1;
        border-radius: 8px;
        border-bottom: 1px solid #e2e2e2;
        border-right: 1px solid #e2e2e2;
    }

    .right-msg .chat--msg-bubble_info {
        float: right;
    }

.chat--user-messenger_items-container {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
}

.chat--user-messenger-attachment,
.chat--user-messenger-sendbtn {
    flex-basis: 55px;
}

.chat--user-messenger-attachment {
    background-color: #e5e9f1;
    border-radius: 50%;
    margin-right: 10px;
    padding-top: 14px;
    text-align: center;
    box-shadow: 1px 1px 5px #d7d7d7;
}

.chat--user-messenger-inputarea {
    flex-grow: 1;
    background-color: #fff;
    box-shadow: 1px 1px 5px #d7d7d7;
    padding: 10px;
    margin-right: 10px;
    border-radius: 50px;
}

    .chat--user-messenger-inputarea textarea {
        border: 0;
    }

        .chat--user-messenger-inputarea textarea#messenger-input {
            resize: none;
            background: transparent;
        }

    .chat--user-messenger-inputarea .form-input:focus {
        box-shadow: none;
        border: 0;
    }

.chat--user-messenger-sendbtn {
    background-color: #042460;
    border-radius: 50%;
    margin-right: 10px;
    color: #fff;
    padding-top: 14px;
    text-align: center;
    box-shadow: 1px 1px 5px #d7d7d7;
}



@media(max-width:550px) {
    .chat--user-messenger_items-container {
        margin-left: 0;
    }
}

@media (max-width:960px) {
    .chat--user-list_container {
        width: 280px;
        position: fixed;
        top: 124px;
        left: 0;
        height: calc(100vh - 140px);
        /* height: 100vh; */
        transform: translateX(-282px);
        transition: all 0.4s;
        z-index: 10;
        box-shadow: 1px 1px 5px #d2d2d2;
    }

    .show-cul-container {
        transform: translateX(11px);
    }

    /* .chat--user-messenger_container {
      padding-left: 0.4em !important;
    } */

    .show_hide {
        display: block;
    }
}

/*----------------------------------------------------------
TRAVEL INVOICES CARD STYLE
-------------------------------------------------------------*/
.traveler-invoices__card {
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    padding: 0.8em;
    width: 100%;
    min-width: calc(100% - 85%);
    max-width: calc(100% - 76%);
    min-height: auto;
}

.traveler-invoices__title {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 8px;
}

.traveler-invoices__info ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .traveler-invoices__info ul li {
        margin: 0;
        padding: 2px 0;
    }

        .traveler-invoices__info ul li span {
            font-weight: 700;
        }

.traveler-invoices__days {
    color: #b4b4b4;
    margin-top: 8px;
}

.traveler-invoices__total {
    color: #176238;
    margin-top: 16px;
}

.traveler-invoices__avatar {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

    .traveler-invoices__avatar img {
        width: 100%;
        border-radius: 4px;
    }
/*--------------------------------------------------------
FILTER SECTION PANEL
--------------------------------------------------------------*/
.slide-filter-container {
    width: 300px;
    /*height: calc(100vh - 10%);*/
    top: 70px;
    bottom: calc(100vh - 98.9vh);
    right: 0;
    position: absolute;
    transform: translateX(calc(100% - 0px));
    z-index: 10;
    background-color: #fff;
    transition: all 0.3s;
    padding: 16px;
    box-shadow: 0 0 5px #9e9e9e;
}

.slide-filter-container--off_grid {
    transform: translateX(calc(100% - 100%));
}

.slide-filter-container__title {
    float: left;
    font-size: 24px;
}

.slide-filter-container__open {
    cursor: pointer;
}

    .slide-filter-container__open:hover, .slide-filter-container__close:hover {
        opacity: 0.8;
    }

.slide-filter-container__close {
    float: right;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.slide-filter__tags-container {
    margin: 2em 0;
}

    .slide-filter__tags-container .chip {
        background-color: #ececed;
        border-radius: 4px;
        margin-bottom: 8px;
    }

.slide-filter-container button {
    color: #042460;
}





/*--------------------------------------------------------
INVOICE/QUOTE CHAT SECTION PANEL
--------------------------------------------------------------*/
.chat-section-panel {
    float: right;
    overflow: hidden;
    background: #fff;
    border-radius: 4px 0 0 4px;
    transform: translateX(calc(100% - 0px));
    position: absolute;
    z-index: 1000;
    right: 0;
    transition: all 0.5s;
    box-shadow: 0 0 10px #8f8f8f;
}

.chat-section-panel--offset {
    transform: translateX(calc(100% - 100%));
}

.chat-section-inner {
    padding: 16px 5px;
}

.chat-section-title {
    font-size: 20px;
    color: #042460;
}

.chat-section__close:hover {
    opacity: 0.5;
}

@media (min-width:320px) {
    .chat-section-panel {
        height: calc(100vh - 115px);
        width: 100%;
        top: calc(100vh - 104%);
    }
}

@media (min-width:750px) {
    .chat-section-panel {
        height: calc(100vh - 130px);
        width: calc(100% - 20%);
        top: calc(100vh - 101%);
    }
}

@media (min-width:1200px) {
    .chat-section-panel {
        height: calc(100vh - 128px);
        width: calc(100% - 49%);
        top: calc(100vh - 102%);
    }
}

/*-----------------------------------------------------------
MODAL BODY CUSTOM HEIGHT
-------------------------------------------------------------*/
.modal-body--custom-height_small {
    max-height: 320px;
    overflow: auto;
}

/*----------------------------------------------------------
CUSTOM HEIGHTS
------------------------------------------------------------*/
.ch-400 {
    max-height: 400px;
}

.ch-560 {
    max-height: 560px;
}

.ch-720 {
    max-height: 720px;
}

.ch-400, .ch-560, .ch-720 {
    overflow-y: auto;
}
/*----------------------------------------------------------
CUSTOM MARGIN + CUSTOM PADDING
------------------------------------------------------------*/
.m-3 {
    margin: 12px;
}

.m-4 {
    margin: 16px;
}

.m-5 {
    margin: 20px;
}

.p-3 {
    padding: 12px;
}

.p-4 {
    padding: 16px;
}

.p-5 {
    padding: 20px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

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

.pt-3 {
    padding-top: 12px;
}

.pt-4 {
    padding-top: 16px;
}

.pt-5 {
    padding-top: 20px;
}

.pb-3 {
    padding-bottom: 12px;
}

.pb-4 {
    padding-bottom: 16px;
}

.pb-5 {
    padding-bottom: 20px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

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

.mx-3 {
    margin-left: 12px !important;
    margin-right: 12px !important;
}

.mx-4 {
    margin-left: 16px !important;
    margin-right: 16px !important;
}

.mx-5 {
    margin-left: 20px !important;
    margin-right: 20px !important;
}

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

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

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

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

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

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

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

.px-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

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

.my-3 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.my-4 {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

.my-5 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.py-3 {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}

.py-4 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.py-5 {
    padding-top: 20px !important;
    margin-bottom: 20px !important;
}

/*------------------------------------------------------------*/
@media(min-width:1201px) {
    .targetsContainer > div section,
    .targetsContainer > div .section-wrapper,
    .mdl-layout__content .section-wrapper,
    .mdl-tabs__panel > section {
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        flex-direction: column;
        height: calc(100vh - 140px);
        height: -moz-calc(100vh - 140px);
        height: -webkit-calc(100vh - 140px);
    }
}

@media(max-width:1200px) {
    .targetsContainer > div section,
    .targetsContainer > div .section-wrapper,
    .mdl-layout__content .section-wrapper,
    .mdl-tabs__panel > section {
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        flex-direction: column;
        height: calc(100vh - 180px);
        height: -moz-calc(100vh - 180px);
        height: -webkit-calc(100vh - 180px);
    }
}

.targetsContainer > div section .container,
.targetsContainer > div .section-wrapper .container,
.mdl-layout__content .section-wrapper .container,
.mdl-tabs__panel > section .container {
    flex: 0;
}

    .targetsContainer > div section .container.mdl-shadow--2dp,
    .targetsContainer > div .section-wrapper .container.mdl-shadow--2dp,
    .mdl-layout__content .section-wrapper .container.mdl-shadow--2dp,
    .mdl-tabs__panel > section .container.mdl-shadow--2dp,
    .mdl-layout__content > section .container.screen__d--block {
        flex: 1;
        -webkit-flex: 1;
    }

table tr th.sm-space {
    min-width: 180px;
}

table tr th.md-space {
    min-width: 240px;
}

table tr th.lg-space {
    min-width: 320px;
}

/*------------------------------------------------
CUSTOM CONATACT PAGE
-----------------------------------------------*/
.custom-contact-page .accordion,
.custom-contact-page .inactive-form-fields--container {
    box-shadow: 0 0.25rem 1rem rgba(48,55,66,.15);
    position: relative;
}

    .custom-contact-page .accordion ul,
    .custom-contact-page .inactive-form-fields--container ul {
        margin: 0;
        padding: 0 0 4px;
        list-style: none;
    }

        .custom-contact-page .accordion ul li,
        .custom-contact-page .inactive-form-fields--container ul li {
            margin: 6px 0;
            padding: 8px 0;
            border-bottom: 1px dashed #e4e4e4;
        }

            .custom-contact-page .accordion ul li:last-child,
            .custom-contact-page .inactive-form-fields--container ul li:last-child {
                border-bottom: 0;
            }

.custom-contact-form--icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #e9e9e9;
    float: left;
    text-align: center;
    margin-right: 10px;
}

.custom-contact-page .custom-contact-form--icon img {
    width: 14px;
    height: 14px;
}

.custom-contact-page .custom-contact-form--action-container {
    position: absolute;
    top: 0;
    right: 0;
}

    .custom-contact-page .custom-contact-form--action-container ul {
        margin: 10px 10px 0 0;
        padding: 0;
        list-style: none;
    }

        .custom-contact-page .custom-contact-form--action-container ul li {
            margin: 0;
            padding: 0 6px;
            display: inline-block;
            border: 0;
        }

            .custom-contact-page .custom-contact-form--action-container ul li img {
                width: 16px;
                height: 16px;
                opacity: 0.5;
            }

            .custom-contact-page .custom-contact-form--action-container ul li:hover img {
                opacity: 1;
            }

.custom-contact-page .move-section {
    cursor: all-scroll;
}

.custom-contact-page .trash-section {
    cursor: pointer;
}

.newsection-container, .newfieldsection-container {
    display: none;
}

/*---------------------------------------------
MISC STYLES
------------------------------------------------*/
.accordion-card-delete {
    float: right;
    position: relative;
    top: 10px;
    right: 10px;
    color: #C01823;
}

a.showlist {
    font-weight: 300;
    border-bottom: 3px solid black;
}

.add-automation--list {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    background: #fff;
    font-size: 16px;
    width: 260px;
    max-height: 250px;
    overflow-y: auto;
    box-shadow: 3px 3px 5px #D3D3D3;
    padding: 8px;
    z-index: 1;
}

    .add-automation--list ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .add-automation--list ul.hr-listing li {
            display: inline-block;
            width: 120px;
        }

.hr-listing li label {
    font-size: 11px;
}

.user-avatar-small {
    padding: 1px 2px;
    border-radius: 50%;
}

    .user-avatar-small img {
        width: 32px;
    }

.user-avatar-medium {
    padding: 6px;
    border-radius: 50%;
}

    .user-avatar-medium img {
        width: 54px;
    }

.user-avatar-large {
    padding: 10px;
    border-radius: 50%;
}

    .user-avatar-large img {
        width: 88px;
    }

.import-valid-status {
    text-align: center;
    width: 100%;
    font-size: 12px;
    color: #ffffff;
    background-color: #fc1304;
}

.required-importfield {
    font-size: .75em;
    color: red;
}

.import-hint-text {
    padding: 0 0 5px 2px;
    font-size: .75em;
    color: #000;
}

.template-type {
    text-decoration: underline !important;
    cursor: pointer;
}

.import-success-status {
    text-align: center;
    width: 100%;
    font-size: 12px;
    font-weight: bolder;
    color: #ffffff;
    background-color: #2c923b
}

.import-mapped-fields {
    background-color: #c4ffc4;
}

.import-required-fields {
    color: red;
    font-size: 12px;
}

.contact-duplicate-header {
    font-size: 0.75em;
}

@media(min-width:1024px) {
    #secQuickSubmit {
        height: calc(100vh - 120px);
    }

    #divBrandingSection {
        height: calc(100vh - 140px);
    }
}

/*@media(max-width:767px) {
    .responsive-pag {*/
/*position: absolute;*/
/*top: 93%;
        left: 1%;
        width: 98%;
        z-index: 1;
    }
}

@media(min-width: 768px) and (max-width:1300px) {
    .responsive-pag {*/
/*  // position: absolute;*/
/*bottom: 0%;
        left: 1%;
        width: 98%;
        z-index: 1;
    }
}*/

.mdl-layout__header .mdl-layout__drawer-button {
    background-color: #fff;
}

/*==============================================================
    --- Move item from left box to right box  -----------------
===============================================================*/
.available-list-box,
.selected-list-box {
    float: left;
    width: 40%;
    padding: 0;
}

    .available-list-box.agentsel-height,
    .selected-list-box.agentsel-height {
        height: 200px;
    }

    .available-list-box.rptlyt-height,
    .selected-list-box.rptlyt-height {
        height: 350px;
    }

    .available-list-box select, .selected-list-box select {
        width: 100%;
        height: 100%;
    }

    .available-list-box option, .selected-list-box option {
        padding: 4px 10px 4px 10px;
    }

.btn-move, .btn-move:focus, .btn-move:active, .btn-move:not(:active) {
    border: 1px solid #042460;
    background: #042460; /* #00A4DC;*/
    font-weight: bold;
    color: #fff;
}

    .btn-move:hover {
        border: 1px solid #201d6e;
        background: #042460;
        /*#201d6e;*/
        font-weight: bold;
        color: #fff;
    }

.selection-arrow-box {
    float: left;
    width: 10%;
    display: block;
    align-content: center;
}

    .selection-arrow-box .content {
        display: table-cell;
        vertical-align: middle;
        padding-left: 6px;
    }

        .selection-arrow-box .content.agentsel-height {
            height: 200px;
        }

        .selection-arrow-box .content.rptlyt-height {
            height: 350px;
        }

    .selection-arrow-box > btn {
        vertical-align: middle;
        display: table-cell;
    }

    .selection-arrow-box input {
        width: 70%;
        margin-bottom: 5px;
    }