@font-face {
    font-family: exo2;
    src: url('Exo2-Regular.ttf');
}

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../../media/fonts/glyphicons-halflings-regular.eot');
    src: url('../../media/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../../media/fonts/glyphicons-halflings-regular.woff') format('woff'), url('../../media/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../../media/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

body {
    height: 100%;
    background: #f5f5f5b5;
    font-family: 'exo2';
}

.auto_cancl {
    color: darkred;
    padding: 6px 30px;
    margin: 5px 0;
    font-size: 22px;
    background: whitesmoke;
    letter-spacing: 5px;
    font-weight: bolder;
    display: inline-block;
    border: 2px solid darkred;
}

#footer {
    position: fixed;
    bottom: 0;
    margin-top: 70px;
    background-color: #c9c9cc;
    width: 100%;
    height: 60px;
    z-index: 100;
}

#footer a {
    color: white;
    line-height: 20px;
    background: transparent;
    font-family: 'exo2';
    font-size: 1vw;
    font-weight: 700;
    letter-spacing: 2px;
    color: #383838;
}

.g_links {
    height: 30px;

}

.gmail_link {
    height: 50px;
    margin-bottom: 5px;
}

.pay_l {
    height: 45px !important;
}

.g_search {
    float: right;
    /*margin-right:2%;*/
    margin-top: 0.7%;
}

.a_links {
    margin-left: 2%;
}

.r_links {
    padding-left: 5%;
}

/*=================================*/
/*========== BUTTONS ==============*/
/*=================================*/

.wrapHead {
    background: linear-gradient(to top, #c0c0c2, #747474);

    min-height: 110px;
}

.wraparrows {
    background-color: #eff0f4;
    height: 90px;
    position: relative;
    margin-top: -1.5%;
}

.searchDiv label {
    color: #303030;
    font-weight: 800;
}

.searchBox {
    width: 90%;
    margin: 0 auto;
}

.searchDiv {
    display: inline-block;
    margin-top: 8%;
    width: 85%;
}

.searchBox, .searchBox:focus, #searchBtn {
    box-shadow: 1px 1px 9px #8f8f91;
    border: 1px solid #626262;
    display: inline-block;
}

#searchBtn {
    background-color: transparent;
    color: #303030;
    margin-bottom: 1.5%;
    box-shadow: 1px 1px 9px #8f8f91;
}

.supplierBtn {
    text-align: center;
}

.btnEditStyleSend {
    margin-left: 5%;
    margin-right: 5%;;
}

.styleBtn button {
    width: 80%;
    margin-top: 6%;
}

.styleBtn button:first-child {
    margin-top: 0px;
}

.styleBtn {
    text-align: center;
}

.mainRightBtn, .mainAddBtn {
    font-size: 15px;
    color: white;
    transition: all 0.5s ease;
    background-color: #07BDFC;
    border: 1px solid #303030;
    border-left: 8px solid #8e8d8a;
    border-right: 8px solid #8e8d8a;
    font-weight: 800;
    box-shadow: 1px 2px 7px rgba(48, 48, 48, 0.51), inset 1px 0px 7px #8e8d8a;
    margin-top: 7%;
    margin-left: 6%;
}

.mainRightBtn:hover, .mainAddBtn:hover {
    color: #303030 !important;
    background-color: #8e8d8a !important;
    font-weight: 800;
}

#reservation_table td button.manageUpdateBtn {
    width: 40%;
    float: right;
}

#reservation_table td button#deleteResBtn {
    float: left;
}

#reservation_table td span.divider {
    display: none;
}

.manageUpdateBtn {
    background-color: #666666;
    color: #303030;
    text-align: center !important;
    width: 95px;
    margin-left: 15px;
}

.btn--custom {
    font-weight: 600;
    display: inline-block;
    letter-spacing: 1.2px;
    padding: 3px 22px;
    text-align: center;
    text-transform: uppercase;
    color: #4f5467;
    margin: 10px 0px 15px 0px;
}

button.btn--custom {
    color: #303030;
    transition: all 0.5s ease;
    background-color: transparent;
    border: 1px solid #303030;
    font-weight: 800;
    box-shadow: 1px 2px 7px rgba(48, 48, 48, 0.51), inset 1px 0px 7px #8e8d8a;
}

button.btn--custom:first-child {
    border-left: 4px solid #4c4c4d;
}

button.btn--custom:last-child {
    border-right: 4px solid #4c4c4d;
}

span.btn--custom {
    display: inline-block;
}

.resEditBtn, .resEditBtn:focus, .submitBtn, .submitBtn:focus, .manageUpdateBtn {
    font-weight: 600;
    font-size: 14px;
    padding: 2px;
    transition: all 0.5s ease;
    background-color: #eff0f4 !important;
    color: #303030 !important;
    border: 1px solid #303030 !important;
    border-left: 3px solid #3f8bb8 !important;
    text-align: center;
    min-width: 95px;
}

.resEditBtn:hover, .submitBtn:hover, .manageUpdateBtn:hover {
    color: white !important;
    background-color: #3f8bb8 !important;
    border-color: #3f8bb8 !important;
}

.resEditBtn span.glyphicon {
    line-height: 150%;
    padding-left: 6%;
}

button.del, #deleteResBtn {
    color: #303030 !important;
    border: 1px solid #303030 !important;
    border-left: 3px solid #fb9679 !important;
}

button.del:hover, #deleteResBtn:hover {
    border-left: 3px solid #fb9679 !important;
    color: #303030 !important;
    background-color: #fb9679 !important;
}

/*================================*/
/*======== TABLE =================*/
/*================================*/

.mainTableDiv {
    width: 90%;
    background-size: cover;
    margin-top: 1%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.mainTable th {
    background-color: #07bdfc;
    color: #383838;
    font-size: 15px;
    text-align: center;
}

.mainTable tr {
    background: rgba(36, 66, 77, 0.1);
    color: #515151;
    font-weight: 700;
}

.tableEditTransfer tr td:nth-child(1) {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    font-weight: bold;
}

.tableEditTransfer tr td:nth-child(2) {

    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

.tableEditTransfer > tbody > tr:nth-child(2) td:nth-child(3) {

    border-bottom: 1px solid black !important;
    border-right: hidden !important;
    border-left: hidden !important;
}

.tableEditTransfer tr td:nth-child(3) {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    font-weight: bold;
}

.tableEditTransfer tr td:nth-child(4) {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;

}

.tableEditTransfer tr:nth-child(2) td:nth-child(4) {
    font-weight: bold;
}

.tableEditTransfer tr td:nth-child(5) {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

.tableEditTransfer {
    width: 100%;
    line-height: 120%;
    margin-top: 2%;
    margin-bottom: 3%;
    border: 1px solid #4F5467 !important;
    border-collapse: separate !important;
}

.tableEditTransfer button.removeExtraField, .tableEditTransfer button.addDropLoc {
    display: none;
}

.tableEditTransfer.editTable button.removeExtraField, .tableEditTransfer.editTable button.addDropLoc, .tableEditTransfer.editTable .refresh_flight {
    display: inline-block !important;
}

.tableEditTransfer td, .tableEditTransfer th {
    padding-left: 3px;
    padding-right: 3px;
    table-layout: auto;
    position: relative;

}

.border_b {
    border-bottom: hidden !important;
}

.border_r {
    border-right: hidden !important;
}

.border_l {
    border-left: hidden !important;
}

.tableEditTransfer input, .tableEditTransfer select {
    color: black;
    border-top: hidden;
    border-bottom: hidden;
    margin: 1px 0 1px 0;
}

.tableEditTransfer select {
    box-shadow: 0px 0px 5px #4ea3d5c7;
}

.table-hover tbody tr:hover {
    background: rgba(0, 0, 0, 0.3);
}

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

.transfer_form table label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location {
    width: 98% !important;
}

#generalDetTable th {
    text-align: center;
}

#generalDetTable {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
}

.res_remark_table table label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.res_remark_table table input {
    width: 100%;
}

#map_cont {
    height: 330px;
}

.map_icon {
    position: absolute;
    font-size: 23px !important;
    left: 89%;
    top: 17%;
}

#getSupCost {
    float: right;
    margin-right: 1.5%;
}

.tableEditTransfer th {
    text-align: center;
    background-color: #4F5467;
    color: white;
}

.tableEditTransfer input {
    font-weight: 700 !important;
}

.removeBorder {
    border: hidden;
}

.editInput {
    width: 95%;
}

span.curencySpan {
    padding-left: 6px;
}

.err {
    box-shadow: inset 0px 0px 5px .4px red !important;
}

.input-sm {
    font-size: 13px !important;
}

.tableEditTransfer tr > td > label {
    margin-bottom: 0 !important;
}

.tableEditTransfer td {
    height: 22px;
}

.tableEditTransfer td.supplierRemark {
    word-break: break-all;
}

.area {
    background-color: #f1f1dc;
    resize: none;
    overflow: hidden;
    height: 97px;
    margin-top: -1px;
    margin-left: 1px;
    width: 100%;
    line-height: 120%;
    display: block;
    border-radius: 3px;
}

.servDetailsTable {
    width: 100%;
    margin-bottom: 1%;
    line-height: 180%;
}

.servDetailsTable td, .servDetailsTable th {
    border: 1px solid #303030;
    padding-left: 0.5%;
}

.servDetailsTable th {
    background: #295a76;
    color: white;
    text-alighn: left;
}

.servBtnWrapper {
    padding-bottom: 1.1%;
}

.servBtnWrapper button {
    margin-left: 3%;
}

/*================= PANEL =============*/

.panel-heading {
    background-color: #4F5467 !important;
    color: white !important;
}

.loginPanelHeader {
    background-color: #3f8bb8 !important;
    color: white !important;
    font-weight: bolder !important;
}

.loginPanel {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
    border: 0px;
    background-color: rgba(36, 66, 77, 0.1);
}

.logInBtn {
    background-color: #666666;
    color: white;
}

/*================ MODAL ================*/

.modal .modal-header {
    background-color: #3f8bb8;
    text-align: center;
    color: white;
}

.modal .modal-body {
    color: #131417;
}

.markSpan {
    float: left;
}

.transLabel {
    width: 26%;
}

.generalLabel {
    width: 30%;
}

.modal {
    overflow-y: scroll;
}

/*==================================*/
/*=========== NAV BAR ==============*/
/*==================================*/
.nav > li > a {
    text-align: center;
}

.navbar, .navbar a {
    background: transparent !important;
    font-family: 'exo2';
    font-size: 1vw;
    font-weight: 700;
    letter-spacing: 2px;
    color: white;
}

span.border {
    display: block;
    height: 2px;
    width: 0;
    background-color: white;

}

li.active span.border {
    width: 77%;
    margin-left: 10%;
}

.navbar-nav > li > a, .navbar-nav > li > a {
    background-color: transparent;
}

.navbar-nav > li > a:hover {
    background: rgba(40, 93, 186, 0.25);
    color: #fff !important;
    box-shadow: inset 0 0 4px rgba(255,255,255,0.2), 0 1px 3px rgba(0,0,0,0.3);
    backdrop-filter: blur(3px);
    border-radius: 18px;
    transition: background 0.3s ease, color 0.3s ease;
}

ul.navbar-nav {
    margin-left: 8%;
}

.navbar-brand h1 {
    text-transform: uppercase;
    font-size: 1.2vw;
    letter-spacing: 6px;
    text-align: center;
    line-height: 1;
    margin-top: .8%;
    left: 5%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.navbar-brand h1:before {
    content: attr(data-heading);
    position: absolute;
    overflow: hidden;
    color: #f37e5c;
    width: 100%;
    z-index: 5;
    text-shadow: none;
    left: 49%;
    text-align: left;
    animation: flicker 3s linear infinite;
}

@keyframes flicker {
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
        opacity: 0.99;
        text-shadow: -1px -1px 0 rgba(255, 255, 255, .4), 1px -1px 0 rgba(255, 255, 255, .4), -1px 1px 0 rgba(255, 255, 255, .4), 1px 1px 0 rgba(255, 255, 255, .4), 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #f44, 0 0 2px #ff7e00, 0 2px 3px #000;
    }
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
        opacity: 0.4;
        text-shadow: none;
    }
}

/*=======================================*/
/*=============== MEDIA =================*/
/*=======================================*/

/* style for big screen (over 990px width) */
@media screen and (min-width: 1400px) {

    #addResModal .modal-dialog {
        width: 70%;
    }

    .instructionModal .modal-dialog {
        width: 85%;
    }

    .editBtn, .deleteBtn {
        margin-right: 6%;
        margin-left: 6%;
        min-width: 20%;
    }

    .editBtn {
        background-color: #eff0f4;
        transition: all 0.5s ease;
        color: #303030;
        border: 1px solid #303030;
        border-left: 3px solid #07BDFC;
        font-weight: 800;
        box-shadow: 1px 2px 7px rgba(48, 48, 48, 0.51);
    }

    .editBtn:hover {
        background-color: #07BDFC;
    }

    .deleteBtn {
        transition: all 0.5s ease;
        background-color: #eff0f4;
        color: #303030;
        border: 1px solid #303030;
        border-right: 3px solid #f48a6b;
        font-weight: 800;
        box-shadow: 1px 2px 7px rgba(48, 48, 48, 0.51);
    }

    .deleteBtn:hover {
        background-color: #f48a6b;
    }

    .editServ {
        line-height: 350%;
    }

    .remark {
        width: 40% !important;
    }

    .flex-item {
        width: 48%;
        margin: 1%;
    }

    .transfer_form table input, .transfer_form table select {
        width: 50%;
        margin-left: 1%;
    }
}

@media (max-width: 1399px) and (min-width: 990px) {
    /* @grid-float-breakpoint -1 */
    #addResModal .modal-dialog {
        width: 70%;
    }

    .instructionModal .modal-dialog {
        width: 85%;
    }

    .editBtn, .deleteBtn {
        margin-right: 6%;
        margin-left: 6%;
        min-width: 20%;
    }

    .editBtn {
        background-color: #eff0f4;
        transition: all 0.5s ease;
        color: #303030;
        border: 1px solid #303030;
        border-left: 3px solid #07BDFC;
        font-weight: 800;
        box-shadow: 1px 2px 7px rgba(48, 48, 48, 0.51);
    }

    .editBtn:hover {
        background-color: #07BDFC;
    }

    .deleteBtn {
        transition: all 0.5s ease;
        background-color: #eff0f4;
        color: #303030;
        border: 1px solid #303030;
        border-right: 3px solid #f48a6b;
        font-weight: 800;
        box-shadow: 1px 2px 7px rgba(48, 48, 48, 0.51);
    }

    .deleteBtn:hover {
        background-color: #f48a6b;
    }

    .editServ {
        line-height: 350%;
    }

    .remark {
        width: 40% !important;
    }

    .flex-item {
        width: 48%;
        margin: 1%;
    }

    .transfer_form table input, .transfer_form table select {
        width: 50%;
        margin-left: 1%;
    }
}

/* style for medium screen (768px-989px width) */
@media (max-width: 989px) and (min-width: 768px) {
    /* @grid-float-breakpoint -1 */
    /*=== collapse navbar handle ===============*/
    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

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

    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }

    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block !important;
    }

    .collapsing {
        overflow: hidden !important;
    }

    #addResModal .modal-dialog {
        width: 96%;
    }

    .instructionModal .modal-dialog {
        width: 96%;
    }

    /*===== end collapse handle =========*/
    .navbar {
        position: relative;
        top: auto;
    }

    .nav > li > a {
        font-size: 2vw;
    }

    .navbar-brand h1 {
        top: 0;
        margin-top: 21px;
        font-size: 2.2vw;
        left: 15%;
    }

    .editBtn, .deleteBtn {
        margin-right: 6%;
        margin-left: 6%;
        min-width: 20%;
    }

    span.border {
        display: none;
    }

    .editBtn {
        background-color: #eff0f4;
        transition: all 0.5s ease;
        color: #303030;
        border: 1px solid #303030;
        border-left: 3px solid #07BDFC;
        font-weight: 800;
        box-shadow: 1px 2px 7px rgba(48, 48, 48, 0.51);
    }

    .editBtn:hover {
        background-color: #07BDFC;
    }

    .deleteBtn {
        transition: all 0.5s ease;
        background-color: #eff0f4;
        color: #303030;
        border: 1px solid #303030;
        border-right: 3px solid #f48a6b;
        font-weight: 800;
        box-shadow: 1px 2px 7px rgba(48, 48, 48, 0.51);
    }

    .deleteBtn:hover {
        background-color: #f48a6b;
    }

    .editServ {
        line-height: 350%;
    }

    .remark {
        width: 40% !important;
    }

    .flex-item {
        width: 48%;
        margin: 1%;
    }

    .transfer_form table input, .transfer_form table select {
        width: 98%;
        margin-left: 1%;
    }
}

/* style for small screen (under 768px width) */
@media (max-width: 767px) {
    /* @grid-float-breakpoint -1 */
    #addResModal .modal-dialog {
        width: 90%;
    }

    .instructionModal .modal-dialog {
        width: 90%;
    }

    .nav > li > a {
        font-size: 2vw;
    }

    .navbar-brand h1 {
        top: 0;
        margin-top: 21px;
        font-size: 2.2vw;
        left: 15%;
    }

    .navbar {
        position: relative;
        top: auto;
    }

    .editBtn, .deleteBtn {
        margin-top: 3%;
        margin-bottom: 3%;
        width: 100%;
        background-color: #666666;
        color: white;
        text-align: center;
        font-size: 50%;
        line-height: 10%;
    }

    table {
        font-size: 50%;
    }

    .flex-item {
        width: 96%;
        margin: 1%;
    }

    .transfer_form table input, .transfer_form table select {
        width: 98%;
        margin-left: 1%;
    }

    .transfer_form table {
        font-size: 75% !important;
    }

    .isFlight {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 75%;
    }
}

@media (max-width: 1025px) {
    .mainTableDiv {
        overflow: scroll;
        width: 96%;

    }

    html {
        padding-bottom: 0;
    }

    .table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
        padding: 0;
    }

    .row > .col-xs-6 > .voucher_btn_mob {
        width: 90% !important;
    }

    .deleteBtn {
        display: none;
    }

    #genTable {
        margin: 0 auto;
        width: 95%;
    }

    .genBtnWrap {
        margin-top: 40px;
    }

    .navbar-brand h1 {
        top: 0;
        margin-top: 26px;
        font-size: 5.2vw;
        left: 25%;
    }

    .navbar, .navbar a {
        font-size: 4vw !important;
    }

    .wrapHead {
        min-height: 60px;
    }

    ul.navbar-nav {
        margin-left: 0 !important;
    }

    #notes .modal-dialog {
        width: 100% !important;
    }

    #genTable td:nth-child(2n+1) {
        text-align: left !important;
    }

    .servDetailsTable td {
        border: none !important;
    }

    .servBtnWrapper button {
        width: 30% !important;
        margin-top: 5px;
    }

    .servBtnWrapper {
        margin-top: 30px;
    }

    .btndivider {
        display: none;
    }

    .editBtn {
        min-height: 30px;
    }

    .quickNoteBtnWrap {
        text-align: center;
    }

    .quickNoteBtnWrap button {
        margin: 3px 10px;
    }

    .textValue, .label, input, td, textarea, p {
        font-size: 1.1em;
    }

    tr > td, tr > th {
        font-size: 18px;
    }

    .servDetailsTable tr {
        line-height: 400%;
    }

    .mainTable tr {
        font-weight: 500;
    }

    button {
        max-width: 90% !important;
    }

    /*.tableEditTransfer  {*/
    /*border: 3px solid skyblue !important;*/
    /*}*/
    .resEditBtn {
        width: 40% !important;
        height: 50px !important;
    }

    .mob_transfer_header {
        background-color: #295a76;
        text-align: center;
        color: white;
    }

    .tableEditTransfer tr {
        line-height: 300%;

    }

    .styleBtn .btnEditStyle {
        /*float:right;*/
        width: 80% !important;
        margin: 4px;
    }

    .styleBtn {
        margin-top: 20px;
        text-align: center;
    }

    .onoffswitch-inner:before, .onoffswitch-inner:after {
        height: 40px !important;
        line-height: 40px !important;
        font-size: 17px !important;
    }

    .del {
        background-color: #f48a6b !important;
    }

    .btnAddWrapper {
        text-align: center;
    }

    .mainAddBtn {
        margin-left: -4% !important;
    }

    #manageRes .modal-dialog {
        width: 100% !important;
        margin: 0 !important;
    }

    .history_d_u {
        width: 100% !important;
    }

    .history_event {
        width: 100% !important;
    }

    .history_fields {
        width: 100% !important;
    }

    .history_table {
        width: 100% !important;
        overflow-x: scroll;
    }

    .open_history {
        height: 25px !important;
        margin: 15px 0;
    }

    .inv_client_name_gen input, .inv_document_name_gen input {
        width: 60%;
    }

}

/*=====================================*/
/*========= CUSTOM STYLE BUTTON =======*/
/*=====================================*/

.onoffswitch {
    position: relative;
    width: 80%;
    display: inline-block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.onoffswitch-checkbox {
    display: none;
}

.onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 1.5px solid #4f5467;
    border-radius: 10px;
}

.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s;
    -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s;
    transition: margin 0.3s ease-in 0s;
}

.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 23px;
    padding: 0;
    line-height: 23px;
    font-size: 13px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.onoffswitch-inner1:before {
    content: "Arrival";
}

.onoffswitch-inner1:after {
    content: "Arrival";
}

.onoffswitch-inner2:before {
    content: "Departure";
}

.onoffswitch-inner2:after {
    content: "Departure";
}

.onoffswitch-inner3:before {
    content: "No Flight";
}

.onoffswitch-inner3:after {
    content: "No Flight";
}

.onoffswitch-inner:before {

    padding-left: 10px;
    background-color: #4ea3d5;
    color: #FFFFFF;
}

.onoffswitch-inner:after {

    padding-right: 10px;
    background-color: white;
    color: #999999;
    text-align: right;
    color: #424346;
}

.onoffswitch-switch {
    display: block;
    width: 12px;
    margin: 6% 9% 10% 0%;
    background: #FFFFFF;
    border: 1.5px solid #4f5467;
    border-radius: 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 75%;
    -moz-transition: all 0.3s ease-in 0s;
    -webkit-transition: all 0.3s ease-in 0s;
    -o-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
}

/*   end style button*/

/*====================================*/
/*============ NOTES =================*/
/*====================================*/
.saveNote, .cancelNote {
    margin: 5% auto 0 auto;
}

span.noteDate {
    font-size: 13px;
    padding-left: 3%;
}

span.noteUserName {
    font-size: 22px;
}

.servNotes {
    float: right;
    width: 93%;

    min-height: 100px;
    border: 1.5px solid #295a76;
    border-radius: 5px;

}

div.addNote, div.editNotes {
    width: 7%;
    height: 29px;
    background: #295a76;
    color: white;
    font-size: 20px;
    text-align: center;

    line-height: 150%;
    margin-top: 1.8%;
    border-top-left-radius: 25%;
    border-bottom-left-radius: 25%;
}

.addNote:before {
    content: '\270f';
    display: inline-block;
    transform: rotate(130deg);
}

div.editNotes:before {
    font-family: 'Glyphicons Halflings';
    font-size: 20px;
    line-height: 140%;
    content: "\e105";

}

div.noteContent {
    width: 80%;
    font-size: 18px;
    display: inline-block;

}

div.noteBtnWrapper button {
    display: block;
    margin: 0 auto 5px auto;
}

div.oneNoteWrapper {
    border-top: 1px solid #295a76;
    border-bottom: 1px solid #295a76;
    margin-top: 15px;
}

textarea.newNoteArea {
    width: 100%;
    height: 85%;
    background-color: #f1f1dc;
    resize: none;
    overflow: hidden;
    line-height: 120%;
    display: block;

}

button.addNoteBtn {
    margin-top: 10% !important;
}

div.newNoteWrapper {
    height: 80px;
}

div.newNoteWrapper > div {
    height: inherit;
}

.noteData {
    font-weight: bold;
}

.noteData, .noteText {
    line-height: 120%;
    padding-left: 8px;
    overflow: hidden;
    max-height: 33px;
}

/*================= ELSE ============*/

.pac-container {
    z-index: 1051 !important;
}

.form-group label {
    margin-left: 12px;
    margin-right: 4px;
}

#removeTransBtn {
    float: right;
    color: #990000;
}

.submitDiv {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

#submitSupplier {
    margin-bottom: 1%;
}

.inst_name {
    width: 290px !important;
}

.apLabel {
    width: 100px;
}

.userLabel {
    width: 125px;
}

.divider {
    border-right: 2px ridge #C8C8C8;
    margin-right: 20px;
    margin-left: 20px;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
    /*-webkit-flex-wrap: wrap;*/
    flex-wrap: wrap;
}

.timer {
    background-color: transparent;
    color: white !important;
    margin-left: 3.5%;
    display: inline-block;
    float: left;
    margin-top: -0.8%;
    color: #303030;
    text-shadow: 1px 1px 0px #333333;
    font-size: 150%;
}

span.total_pages, span.page_number {
    padding: 10px;
}

div.label, div.wrapperServDataDiv, div.data {
    display: inline-block;
    color: #303030;
    font-size: 15px;
}

.wrapperServDetails div[class*=" col-md"][class*="col-md "] {
    padding: 0;
}

.btndivider {
    position: absolute;
    top: 100%;
    width: 97%;
    height: 1.5px;
    background: #295a76;
}

span.rem {
    float: left;
    padding: .4% 0 0 .5%;
}

#notesBody {
    min-height: 200px;
}

.nav-tabs {
    border-bottom: none;
}

.name123 {
    width: 13%;
    float: left;
    margin-left: 1%;
}

.genLabel {
    width: 50%;
    background-color: #eff0f4;
    color: #295a76;
    float: left;
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
    padding-left: 7px;
}

.genVal {
    width: 50%;
    background-color: #fcad963b;
    color: #295a76;
    float: right;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    padding-left: 7px;
    min-width: 20px;
}

.genBtnWrap {
    /*text-align: right;*/
    text-align: center;
}

.genBtnWrap button {
    margin-right: 30px;
}

select.selectExtraField {
    width: 70%;
    display: inline-block;
}

button.addDropLoc, button.removeExtraField {
    display: none;
    box-shadow: 1px 1px 7px black;
    border: none;
    border-radius: 4px;
    float: right;
    height: 18px;
    width: 18px;
    font-weight: bold;
}

button.addDropLoc {
    background-color: #4ea3d5;
    color: white;
}

button.removeExtraField {
    background-color: #fb9679;
}

.servNotes button, .servNotes button:focus {
    min-width: 30px;
    width: 70%;
}

.servNotes > .row > .col-md-3 {
    padding: 0;
}

.history_d_u {
    float: left;
    width: 20%;
    background-color: #b3c5ce;
    padding-left: 20px;
}

.history_event {
    float: left;
    width: 20%;
    background-color: #e6e6e6;
    padding-left: 20px;

}

.history_fields {
    float: left;
    background-color: whitesmoke;
    padding-left: 20px;
    width: 60%;
}

.h_el {
    display: block;
    margin-top: 5px;
}

.h_el .table-responsive {
    clear: both;
}

.h_el div {
    line-height: 150%;
}

.history_table {
    width: 86%;
    margin: 30px auto 5px auto;
    display: none;
    float: left;
}

.history_table th {
    background-color: #b3c5ce;
    padding-left: 10px;
    line-height: 150%;
}

.history_table td {
    background-color: #e6e6e6;
    padding-left: 10px;
    line-height: 150%;

}

button.open_history {
    height: 18px;
    line-height: 50%;
    float: right;
    margin-right: 20px;
}

span.depLabel {
    margin-left: 3%;
}

.warning_time {
    background-color: #fb9679;
    color: black;
    position: absolute;
    left: 99.9%;
    width: .1%;
    overflow: hidden;
    top: 0%;
    height: 28px;
    white-space: nowrap;
    text-align: center;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    line-height: 180%;
    font-weight: bold;
    transition: all 1.1s cubic-bezier(.75, -0.5, 0, 1.75);

}

.warning_time.run_warning_time_animation {
    left: 49.9%;
    width: 50.1%;
}

.warning_time_btn {
    border: none;
    background: transparent;
    color: #295a76;
}

#genTable td:nth-child(2n+1) {
    font-weight: bold;
    padding-left: 25px;
}

#genTable td:nth-child(2n) {
    padding-left: 10px;
}

#genTable {
    width: 100%;
}

td.res > span:hover {
    cursor: pointer;
    text-decoration: underline;
    color: blue;
}

button.save_clone {
    width: 10% !important;
    margin-left: 33% !important;
}

.s_table_canceled {
    position: relative;
    opacity: 0.8;
    overflow: hidden;
    padding-top: 0;
}

.s_canceled {
    position: absolute;
    top: 119px;
    left: -15%;
    width: 128%;
    height: 40px;
    transform: rotate(-35deg);
    /*background-color: red;*/
    background-image: linear-gradient(0deg, rgba(255, 20, 0, 0.2), #ff0000e0 125%);
    font-size: 31px;
    line-height: 110%;
    color: white;
    text-align: center;
}

.s_completed {
    position: absolute;
    top: 119px;
    left: -15%;
    width: 128%;
    height: 40px;
    transform: rotate(-35deg);
    background-color: #009e24 !important;
    font-size: 31px;
    line-height: 110%;
    color: white;
    text-align: center;
    opacity: 1;
}

.save_seg_btn {
    font-weight: 600;
    letter-spacing: 5px;
    font-size: 22px;
    padding: 2px;
    transition: all 0.5s ease;
    background-color: #3f8bb8 !important;
    color: white !important;
    border: 1px solid #303030 !important;
    border-left: 3px solid #3f8bb8 !important;
    text-align: center;
    width: 80%;
    min-height: 50%;
    border-color: #3f8bb8 !important;
}

.b_draft {
    width: 10%;
    display: inline-block;
}

.refresh_flight {
    float: right;
    display: none;
}

.btnAddWrapper {
    padding-left: 5%;
}

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

.notifications_count {
    color: #f49274;
}

html {
    padding-bottom: 65px;
}

.accounting_table {
    width: 90%;
    margin: 20px auto 20px auto;
    line-height: 100%;
    border: 1px solid darkgreen !important;
}

.accounting_table th, .balance_table th {
    height: 30px;
    background-color: #40903b;
    border: 1px solid darkgreen !important;

}

.accounting_table td, .balance_table td {
    text-align: center;
    height: 30px;
    border: 1px solid darkgreen !important;

}

.balance_table {
    line-height: 100%;
    width: 50%;
    /*float: left;*/
    margin-left: 5%;
    margin-bottom: 20px;
    /*border:1px solid darkgreen !important;*/
}

.accounting_back_btn {
    float: right;
    margin-right: 5%;
    /*margin-bottom:25px;*/
}

.segment_accounting_p {
    margin-left: 5%;
    color: #303030;
    margin-bottom: 20px;
}

.accounting_charge_price_p {
    font-size: 26px;
    font-weight: bold;
}

.segment_accounting_table_header {
    font-size: 22px;
    font-weight: normal;
}

.inv_remove_icon {
    color: red;
}

.inv_ok_icon {
    color: green;
}

.btn_green {
    border-left-color: #40903b !important;
}

.btn_green:hover, .btn_green:active, .btn_green:focus {
    background-color: #40903b !important;
    border-left-color: #40903b !important;
    color: white;
}

.inv_radio_wrap {
    display: inline-block;
    margin-left: 5%;
}

.inv_seg_details_checkbox {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.inv_seg_details {
    margin-left: 3% !important;
    font-weight: bold;
    font-size: 17px;
    color: #303030;
    display: inline-block;
}

.inv_title_select {
    text-align: center;
    font-weight: bold;
    color: #303030;
}

.inv_seg_details_pick_loc {
    max-width: 20%;
    height: inherit;
    overflow: hidden;
}

.inv_row_view {
    height: 24px;
    margin-top: 10px;
}

.inv_client_name_gen, .inv_document_name_gen {
    font-weight: bold;
    margin-left: 3%;
}

.inv_client_name_gen input, .inv_document_name_gen input {
    display: inline-block;
    /*width:25%;*/
}

.inv_client_name_gen, .inv_document_name_gen {
    display: inline-block;
}

.seg_inv_details_input {
    display: inline-block;
    width: 80px;
    margin: 0px 10px 0 10px;
}

.inv_accounting_seg_table {
    padding: 15px 0 15px 0;
}

.inv_seg_details_count {
    width: 1%;
}

.inv_seg_details_pick_date {
    width: 14%;
}

.inv_seg_details_pick_loc {
    width: 11%;
}

.inv_seg_details_price {
    width: 14%;
}

.inv_seg_details_commission {
    width: 17%;
}

.inv_seg_details_net_price {
    width: 14%;
}

.inv_seg_details_checkbox {
    width: 7%;
}

.inv_wrap {
    margin-bottom: 20px;
}

.btn_res_cr_inv_select {
    margin-left: 25px;
}

.res_sel_inv_act_label {
    font-weight: bold;
    font-size: 20px;
    margin-top: 10px;
}

#agencies_select {
    width: 15%;
    margin-right: 10px;
    display: inline-block;
    box-shadow: 1px 1px 9px #8f8f91;
    border: 1px solid #626262;
    color: #303030;
}

.agency_select_animate {
    width: 100%;
}

.referrer_wrapper > input:first-child {
    margin-left: 3px;
    width: 30%;
}

.referrer_wrapper {
    margin-top: 20px;
    width: 70%;
}

.referrer_wrapper input:nth-child(2) {
    margin-left: 17%;
    width: 27%;
}

.referrer_wrapper input:nth-child(3) {
    width: 20px;
    height: 20px;
    float: right;
}

.referrer_wrapper label {
    float: right;
}

.ref_label {
    display: inline-block;
    width: 100px;
}

.rate_wrap {
    display: inline-block;
    margin-left: 17%;
    width: 30%;
    font-size: 20px;
    font-weight: bolder;
}

.rate_wrap input {
    width: 60% !important;
    margin-right: 12%;
}

/*FLAGS*/

.flags_text {
    /* height: 95%;*/
}

.flag_display_wrap {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    padding-right: 1%;
    width: 18%;
    height: 100%;
}

.flag_display_content {
    border-radius: 10px;
    height: 100%;
    width: 100%;
    text-align: center;
    display: table;
    color: white;
    background-color: #2d72d9;
    border-color: #2a54a8;
}

.flag_display_content div {
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
}

.edit-flags-container {
    height: 100% !important;

}

.flag_checkbox_wrap {
    display: inline-block;
    margin-bottom: 0;
    padding-right: 1%;
    width: 100%;
    height: 100%;
}

.flag_checkbox_wrap input {
    display: none;
}

.flag_checkbox_content {
    border-radius: 10px;
    color: black;
    background-color: lightgrey;
    border-color: grey;
    height: 100%;
    width: 100%;
    text-align: center;
    display: table;
}

.flag_checkbox_content div {
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
}

.flag_checkbox_wrap input:checked + .flag_checkbox_content {
    color: white;
    background-color: #2d72d9;
    border-color: #2a54a8;
}

.flag_checkbox_content .glyphicon {
    display: none;
}

.flag_checkbox_wrap input:checked + .flag_checkbox_content .glyphicon {
    display: inline-block;
}

.resArrow {
    margin-right: 20px;
    margin-left: 20px;
    cursor: pointer;
}

.flex_nav {
    font-family: "Comic Sans MS", "Comic Sans", cursive !important;
    transform: rotate(8deg);
    color: #99e1fa !important;
}

.collapse_button_wrap {
    /*width: fit-content;*/
    width: 100%;
    /*margin: 0 5rem auto;*/
    display: inline-block;
    vertical-align: top;
    margin-bottom: 5px;
}

.collapse_main_button {
    font-weight: bolder;
    background-color: #eff0f4;
    color: #303030;
    border: 1px solid;
    border-radius: 15px;
    display: inline-block;
    text-decoration: none;
    -webkit-transition: -webkit-transform .1s linear 0s;
    -moz-transition: -moz-transform .1s linear 0s;
    transition: transform .1s linear 0s;
    padding: 0 1rem;
    cursor: pointer;
    box-shadow: 0 4px 17px 0 rgb(0 0 0 / 7%), 0 1px 32px 0 rgb(0 0 0 / 6%), 0 2px 9px -1px rgb(0 0 0 / 10%);
    min-width: 15rem;
    /**/
}

.collapse_main_button:hover {
    text-decoration: none;
    border: 1px solid #3f8bb8;
}

.collapse_main_button i, .collapse_main_button span {
    vertical-align: middle;
}

.collapse_main_button.colac_open i.add_icon {
    transform: rotate(44deg);
}

.collapse_buttons i {
    color: #fff;
    border-radius: 50%;
    width: 53px;
    height: 53px;
    display: inline-block;
    background-color: #3f8bb8;
    margin-top: 10px;
    margin-left: 5px;
    text-align: center;
    padding-top: 15px;
}

.collapse_buttons span.title {
    position: relative;
    left: -10px;
    top: -6px;
    padding: 3px;
    padding-right: 6px;
    font-weight: bolder;
    color: #fff;
    background-color: #3f8bb8;
    border-radius: 5px;
}

.collapse_buttons .collapsible_button {
    width: fit-content;
    cursor: pointer;
    width: 150%;
    text-align: left;
}

.collapse_buttons .collapsible_button:hover span.title {
    padding-left: 10px;
}

.collapse_buttons .collapsible_button:hover i {
    transform: rotate(15deg);
}

ul.collapse_buttons {
    list-style: none;
    padding: 0;
    display: none;
    text-align: center;
    margin: auto;
    width: fit-content;
}

.col_shadow {
    box-shadow: 0 4px 17px 0 rgb(0 0 0 / 14%), 0 1px 32px 0 rgb(0 0 0 / 12%), 0 2px 9px -1px rgb(0 0 0 / 20%);
}

.small_shadow {
    box-shadow: 0 4px 17px 0 rgb(0 0 0 / 0%), 0 1px 32px 0 rgb(0 0 0 / 12%), 0 2px 9px -1px rgb(0 0 0 / 0%);
}

#resGeneralDet .valueHeader {
    width: 40%;
    display: inline-block;
    font-weight: bold;
}

#resGeneralDet div.valueText {
    width: 60%;
    display: inline-block;
}

#resGeneralDet div.valueText span.textValue {
    display: block;
}

.suggesstion_box {
    border: none;
    display: block;
    z-index: 1000;
    left: -50%;
    margin-top: 10px;
    margin-left: 100px;
    font-size: 12px;
    border-radius: 4px;
}

.suggesstion_list {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    border-radius: 4px;
    /*margin-left: 55px;*/
}

.suggesstion_list li {
    padding: 2px;
    background: #cde6f7;
    border-bottom: #F0F0F0 1px solid;
}

.suggesstion_box li {
    outline: none;
    text-align: left;
}

.suggesstion_box li.hoverOption {
    background-color: #1aa2df !important;
}

.suggesstion_box li div {
    display: inline-block;
    min-height: 30px;
    overflow: hidden;
}

.suggesstion_box li div.sug_text {
    padding: 5px 0 0 5px;
    max-width: 90%;
}

.selected_options {
    margin-left: 160px;
    margin-right: 4px;
    margin-top: 10px;
}

.selected_airports .airport {
    display: inline-block;
}

.selected_price_rules {
    /*text-align: -webkit-center;*/
    margin: auto;
    padding: 10px;
    text-align: left;
}

.rule.selected_cube {
    width: 92%;
    font-size: 110%;
    font-weight: normal;
}

.selected_cube {
    background-color: #285dba;
    color: white;
    border-radius: 8px;
    font-weight: bold;
    margin-right: 10px;
    padding: 6px;
    margin-top: 10px;
}

.selected_options .selected_cube .text {
    padding-left: 10px;
    padding-right: 10px;
}

.selected_options .selected_cube .remove_option {
    cursor: pointer;
    float: right;
    margin-top: -5px;
}

.rules_panel .form-inline .form-control {
    width: 100%;
}

#newSupplierModal .modal-dialog {
    width: 45%;
}

#newSupplierModal .apLabel {
    width: 140px;
}

@media screen and (max-width: 800px) {
    #newSupplierModal .modal-dialog {
        width: 95%;
    }
}

#newSupplierModal #max_pax {
    margin-left: 2px;
    margin-right: 2px;
}

.selected_vehicles .vehicle {
    display: block;
    width: 70%;
}

#newSupplierModal .check_box_row {
    margin-left: 12px;
}

#res_wa_text_box_wrap .res_wa_text_box_row {
    margin-top: 8%;
}

#res_wa_text_box_wrap .wa_text_body {
    /*text-align: left;*/
    line-height: 210%;
}

#res_wa_text_box_wrap .wa_text_body.right_align {
    text-align: right;
    direction: rtl;
}

#res_wa_text_box_wrap .wa_text_body.left_align {
    text-align: left;
    direction: ltr;
}

#res_wa_text_box_wrap .wa_place_holder {
    width: 100px;
    display: inline-block;
}

#res_wa_text_box_wrap .wa_file_input_wrap {
    position: relative;
    border: 5px dotted #68656585;
    border-radius: 10px;
    color: #68656585;
    font: bold 24px/200px arial;
    height: 200px;
    margin: 30px auto;
    text-align: center;
    width: 85%;
}

#res_wa_text_box_wrap .wa_file_input_wrap:hover {
    border: 5px dotted gray;
    color: gray;
}

#res_wa_text_box_wrap .wa_file_input_wrap .upload-area {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#res_wa_text_box_wrap .wa_file_input_wrap input.wa_image_file {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#res_wa_text_box_wrap .wa_file_input_wrap .upload-area:hover {
    cursor: pointer;
}

#wa_preview_image_wrap {
    text-align: center;
}

#wa_preview_image_wrap .wa_preview_image {
    width: 80%;
}

#wa_preview_image_wrap .wa_remove_image {
    float: right;
}

.mainTable .table_header {
    background-color: #07bdfc;
}

.mainTable .table_header .table_cell {
    background-color: #07bdfc;
    color: #383838;
    font-size: 15px;
    text-align: center;
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: top;
    border-top: 1px solid #ddd;
    font-weight: 700;
}

.mainTable .table_body_row .table_cell {
    padding: 8px;
    line-height: 2.2;
    vertical-align: top;
    border-top: 1px solid #ddd;
}

.mainTable .table_body_row.cancelled {
    background-image: linear-gradient(0deg, #ffe7e7, rgb(229 143 135 / 70%) 180%);
}

.mainTable .table_body_row.draft {
    background-image: linear-gradient(0deg, #efefef, rgb(155 138 137 / 73%) 180%);
}

.mainTable .table_body_row.cancelled .table_cell {
    text-decoration: line-through;
    text-decoration-color: red;
}

.mainTable .table_body_row.draft .table_cell {
    text-decoration: line-through;
    text-shadow: 1px 1px whitesmoke;
}

.mainTable .table_body_row {
    background: rgba(36, 66, 77, 0.1);
    color: #515151;
    font-weight: 700;
}

.mainTable .table_body_row:hover {
    background: rgba(0, 0, 0, 0.3);
}

@media (max-width: 1199px) {
    .mainTable .table_body_row {
        border: 2px solid #b6b6b8;
        margin-bottom: 25px;
    }

    .mainTable .table_body_row .table_cell {
        border: 1px solid white;
        padding: 0;
    }
}

.mainTable .table_body_row .table_cell .table_cell_header {
    background-color: #07bdfc52;
    color: #383838;
    line-height: 1.6;
}

.berlin_view_container .berlin_view_header {
    font-weight: bold;
    margin-top: 12px;
}

.berlin_view_container .arrival_header {
    color: blue;
}

.berlin_view_container .departure_header {
    color: mediumvioletred;
}

.berlin_view_container .ptp_header {
    color: darkorange;
}

.berlin_view_container {
    margin: 0px 0px 25px 15px;
}

.tableSearhReservation .segment_table_extra_details td {
    padding-left: 0px;
}

.tableSearhReservation tr.expanded {
    border-bottom: 0px;
    box-shadow: 0px 0px;
}

.tableSearhReservation .segment_table_extra_details {
    border-top: 0px;
    box-shadow: 0px 0px;
}

.tableSearhReservation .segment_table_extra_details .extra_details_table {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

.tableSearhReservation .segment_table_extra_details .extra_details_table tr {
    height: 25px;
    box-shadow: 0px 0px;
    border: 0px;
}

.tableSearhReservation .segment_table_extra_details .extra_details_table .ed_transfer_header {
    width: 25%;
    font-weight: bold;
    background: cornsilk;
}

.tableSearhReservation .segment_table_extra_details .extra_details_table .ed_transfer_content {
    width: 75%;
    border-left: 0px;
    background: cornsilk;
}

.tableSearhReservation .segment_table_extra_details .extra_details_table th {
    height: 25px;
    cursor: auto;
    text-align: center;
    background-color: #4F5467;
    color: white;
    border: 1px solid black;
}

.tableSearhReservation .segment_table_extra_details .extra_details_table td {
    border: 1px solid black;
    padding-left: 4px;
}

.res_contact_swal {
    width: 65% !important;
}

@media (max-width: 1399px) {
    .res_contact_swal {
        width: 95% !important;
    }
}

#res_contact_box_wrap .label {
    text-align: left;
    padding-left: 20px;
}

#res_contact_box_wrap .row {
    margin-top: 15px;
}

.servDetailsTable .textValue {
    display: flex;
    align-items: center;
}

button.addSegmentDriver {
    background-color: #4ea3d5;
    color: white;
    box-shadow: 1px 1px 7px black;
    border: none;
    border-radius: 4px;
    height: 18px;
    width: 18px;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 26px;
}

button.segmentDriverActionBtn {
    margin-left: 10px;
    border: none; /* Remove default border */
    border-radius: 50%; /* Circular shape */
    color: #ffffff; /* Text/icon color */
    background-color: #4ea3d5; /* Button background color */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); /* Subtle shadow */
    width: 28px; /* Smaller circular size */
    height: 28px; /* Smaller circular size */
    display: inline-flex; /* Center icon */
    justify-content: center; /* Center icon */
    align-items: center; /* Center icon */
    cursor: pointer;
    transition: all 0.2s ease; /* Smooth transition for hover effects */
    font-size: 14px; /* Adjust icon size */
}

button.segmentDriverActionBtn:hover {
    background-color: #387a9d; /* Darker shade on hover */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.88); /* Slightly larger shadow */
    transform: translateY(-1px); /* Subtle lift effect */
}

button.segmentDriverActionBtn:active {
    background-color: #295a76; /* Even darker shade when active */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); /* Reduced shadow */
    transform: translateY(0); /* Return to original position */
}

button.segmentDriverActionBtn .glyphicon {
    font-size: 15px; /* Icon size proportional to the smaller button */
}


#vehicles_selection_modal {
    display: flex;
    flex-direction: column;
    padding: 20px;
    max-width: 600px; /* Set a max width for the modal content */
    margin: 0 auto; /* Center the modal on the page */
}

#vehicles_selection_modal .vehicle_option {
    border: 1px solid #dadce0;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

#vehicles_selection_modal .vehicle_option:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#vehicles_selection_modal .vehicle_title, #vehicles_selection_modal .vehicle_supplier, #vehicles_selection_modal .vehicle_cost {
    margin-bottom: 8px; /* Spacing between rows */
}

#vehicles_selection_modal .vehicle_capacity {
    font-weight: bold;
}

#vehicles_selection_modal .vehicle_supplier b, #vehicles_selection_modal .vehicle_cost b {
    font-weight: normal;
    color: #65696e;
}

#vehicles_selection_modal .vehicle_cost {
    color: #1a73e8; /* Accent color for cost */
    font-weight: bold;
}

#vehicles_selection_modal .glyphicon-user:before, #vehicles_selection_modal .glyphicon-briefcase:before {
    margin-right: 5px; /* Space out icons from text */
}

#vehicles_selection_modal .vehicle_option.hidden {
    display: none;
}

#vehicles_selection_modal #show_more_service_vehicles {
    padding: 10px 20px;
    margin: 20px auto;
    display: block; /* Centers the button */
    cursor: pointer;
    /* Style the button as you see fit */
}

#vehicles_selection_modal .vehicle_option .current_vehicle {
    font-weight: bold;
    color: #b3b329;
    margin-bottom: 10px;
}

#seg_driver_details_box_wrap {
    text-align: center;
    width: 100%;
    padding: 22px 10px;
}

#seg_driver_details_box_wrap .driver_details_table {
    min-width: 90%;
    background-color: #fbfbfb;
    margin: 10px auto 30px;
    border-spacing: 0 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
}

#seg_driver_details_box_wrap .driver_details_table th {
    background-color: #e9ecef;
    color: #495057;
    padding: 18px 8px;
    text-align: center;
    font-size: 22px;
    border-bottom: 2px solid #dee2e6;
    border-radius: 8px 8px 0 0;
}

#seg_driver_details_box_wrap .driver_details_table td {
    padding: 15px 8px;
    border-top: 1px solid #dee2e6;
    color: #212529;
    text-align: left;
}

#seg_driver_details_box_wrap .driver_details_table td.sd_label {
    font-weight: bold;
    white-space: nowrap;
}

#seg_driver_details_box_wrap .segmentDriverButton {
    margin: 8px 8px;
    color: #65696e;
    border: 1px solid #626978;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    max-height: 48px;
    overflow: hidden;
    padding: 6px 0;
    vertical-align: middle;
    width: 120px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: #fff;
    outline: 1px solid #202124;
    -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
    transition: background-color 0.2s ease-in-out;
}

#seg_driver_details_box_wrap .editSegmentDriver .glyphicon {
    color: #2196F3;
    margin-right: 6px;
}

#seg_driver_details_box_wrap .removeSegmentDriver .glyphicon {
    color: #f44336;
    margin-right: 6px;
}

#seg_driver_details_box_wrap .editSegmentDriver:hover {
    background-color: #aad0f6;
}

#seg_driver_details_box_wrap .removeSegmentDriver:hover {
    background-color: #f1b0b7;
}

.nav-offlines-tab {
    color: #c0dcff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}