@font-face {
    font-family: 'RobotoB';
    src: url("../fonts/Roboto-Bold.ttf") format("truetype"); }
  @font-face {
    font-family: 'Roboto';
    src: url("../fonts/Roboto-Regular.ttf") format("truetype"); }
  @font-face {
    font-family: 'inter';
    src: url("../fonts/inter.ttf") format("truetype"); }
    body{
        font-family: 'Roboto';
        height: 100vh;
        display: flex;
    }
    .login-page,
    .register-page {
        background-color: #d2d6de;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .login-logo img{
        width: 106px;
        height: 106px;
        max-width: 100%;}
    .login-box,
    .register-box {
        margin: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    .login-box:after,
    .register-box:after{
        content: '';
        background: rgba(0,0,0,0.4);
        position: absolute;
        z-index: 0;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }
    .login-box canvas,
    .register-box canvas{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }
    .login-box-msg, .register-box-msg {
        font-family: Inter;
        font-style: normal;
        padding: 0;
        font-weight: 500;
        font-size: 40px;
        line-height: 32px;
        text-align: center;
        color: linear-gradient(180deg, #36CCBE 0%, #0F79A8 100%);
    }
    .login-sub-title{
        font-family: Inter;
        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        line-height: 20px;
        display: flex;
        align-items: center;
        text-align: center;
        color: #7F8FA4;
    }
    .login-box-body, .register-box-body {
        position: relative;
        z-index: 10;
        padding: 0;
        background: none;
        border-top: 0;
        color: #666;
        width: 355px;
        max-width: 100%;
    }
    .login-box-body .has-feedback .form-control{
        background: none !important;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom:rgba(127, 143, 164, 0.2) 2px solid;
        color: #354052!important;
        padding: 6px 0;
    }
    .login-box-body .form-control-feedback, .register-box-body .form-control-feedback{
        left: 0;
        right: auto;
        color: #2ab3b7;
    }
    .btn-primary{
        background-color: #2ab3b7;
    }
    .bottom-login {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    .bottom-login a,
    .bottom-login label{
        font-family: 'Roboto';
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;    
        color: #7F8FA4;
        margin-bottom: 0;
    }
    .bottom-login a:hover{
        text-decoration: underline;
    }
    .bottom-login .icheck .icheckbox_square-blue {
        margin-right: 5px;
    }
    .register-now a{
        color: #FF8504;
    }
    .register-now{
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 16px;
        color: #7F8FA4;
    }
    .modal .modal-dialog .modal-content .modal-body.bg-gray{
        padding: 0;
    }
    .modal .modal-dialog .modal-content{
      height: 251px;
      width: 472px;
      /* overflow: hidden; */
      background: #FFFFFF;
      box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
    }
    .modal .modal-dialog{
      margin: 0 auto;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal .modal-dialog .modal-content .modal-body .pop_unavailable img{
        margin-right: 8px;
    }
    .modal .modal-dialog .modal-content .modal-body .pop_unavailable{
        height: 64px;
        border-bottom: 2px solid #F4F6F8;
        padding: 13px 24px;
        font-family: 'Roboto';
        font-style: normal;
        color: #7F8FA4;
        display: flex;
        font-weight: 500;
        font-size: 18px;
        line-height: 21px;
        align-items: center;
        background: -webkit-linear-gradient(#FFD335, #FF7A00);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        justify-content: space-between;
    }
    .pop_unavailable_name{
        margin-right: 199px;
        font-weight: 500;
        font-size: 18px;
        line-height: 21px;
    }
    .modal .modal-dialog .modal-content .modal-body .pop_unavailable_bot img{
        margin-right: 9px;
    }
    .modal .modal-dialog .modal-content .modal-body .pop_unavailable_bot{
      font-family: 'Roboto';
      font-style: normal;
      font-weight: normal;
      font-size: 14px;
      line-height: 18px;
      color: #707C8D;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }  
    .modal .modal-dialog .modal-content .modal-body{
    padding: 0;
    }
    .modal .modal-dialog .modal-content .modal-body .pop_unavailable_bot button{
      background: #E9EDF1;
      border: 1px solid #DFE3E9;
      box-sizing: border-box;
      border-radius: 4px;
      width: 226px;
      height: 32px;
      font-family: 'Roboto';
      font-style: normal;
      font-weight: normal;
      font-size: 14px;
      line-height: 18px;
      text-align: center;
      color: #7F8FA4;
    }
    
    .modal .modal-dialog .modal-content .modal-body .pop_unavailable_bot button:hover,
    .modal .modal-dialog .modal-content .modal-body .pop_unavailable_bot button:focus,
    .modal .modal-dialog .modal-content .modal-body .pop_unavailable_bot button:active{
        background: linear-gradient(180deg, #E4E8EF 0%, #FDFEFE 100%);
        border: 1px solid #DFE3E9;
        box-sizing: border-box;
        /* border-radius: 6px; */
      outline: none;
      box-shadow: none;
    }
    button.sign-button.active:hover{
        background: linear-gradient(
            0deg, #FF7A00 -5.77%, #FF7A00 148.08%)!important;
    }
    .mgbt-24{
        margin-bottom: 24px;
    }
    .mgbt-8{
        margin-bottom: 8px;
    }
    .modal .list-car-detail{
      display: flex;
      align-items: center;
    }
    .modal-bg {
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: auto;
        background-color: #00000033;
        left: 0;
        top: 0;
    }
    .gray {
        color: rgba(53, 64, 82, 0.5);
    }
#particles-js .particles-js-canvas-el,.login-box{
    /* filter: drop-shadow(4px 0px 12px rgba(0, 0, 0, 0.07)); */
    width: calc(100% - 519px)!important;
}
.login-right{
    width: 519px;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 100% 100%;
    flex-direction: column;
    position: relative;
}
.login-box:after, .register-box:after {
    right: 519px;
}
.login-logo, .register-logo {
    margin-bottom: 44px;
}
.login-text img{
    width: 354px;
    height: 104px;
}
.login-text{
    margin-bottom: 41px;
    margin-left: -20px;
}
.text-login{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #82869A;
}
.text-pass{
    font-family: 'Roboto';
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 23px;
    color: #82869A;
}
form input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: rgba(127, 143, 164, 0.5);
    font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 22px; }
  
  form input::-moz-placeholder, textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(127, 143, 164, 0.5);
    font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 22px; }
  
  form input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(127, 143, 164, 0.5);
    font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 22px; }
  
  form input:-moz-placeholder, textarea:-moz-placeholder {
    /* Firefox 18- */
    color: rgba(127, 143, 164, 0.5);
    font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 22px; }
  .modal input::-moz-placeholder, textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(127, 143, 164, 0.75);
    font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px; }
  
  .modal input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(127, 143, 164, 0.75);
    font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px; }
  
  .modal input:-moz-placeholder, textarea:-moz-placeholder {
    /* Firefox 18- */
    color: rgba(127, 143, 164, 0.75);
    font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px; }
p {
    margin: 0 0 5px;
}
button.btn-block.btn-flat{
    background: linear-gradient(0deg, #FF7A00 -5.77%, #FFD335 148.08%)!important;
    pointer-events: all!important;
    transition: .5s;
    border-radius: 8px;
    border: none;
    height: 48px;
    font-family: 'inter';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
}
button.btn-block.btn-flat:hover{
    background: linear-gradient(0deg, #FF7A00 -5.77%, #FF7A00 148.08%)!important;
}
.mb-32{
    margin-bottom: 32px;
}
.form-group.has-feedback:after {
    background: linear-gradient(90deg, #36CCBE 0%, #0F79A8 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    content: '';
    z-index: 11;
    width: 0;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}
.click-form:after,.form-group.has-feedback:hover:after,.form-group.has-feedback:active:after{
    width: 100%!important;
}
.form-group.has-feedback img{
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -5px;
}
.hide_pass,.show_pass{
    cursor: pointer;
    z-index: 12;
}
.alert-success .icon_noti{
    background:url('../images/noti1.png') no-repeat;
    width: 16.58px;
    height: 16px;
}
.alert-danger .icon_noti{
background:url('../images/noti.png') no-repeat;
width: 16.58px;
height: 16px;
}
.bg-red, .callout.callout-danger, .alert-danger, .alert-error, .label-danger, .modal-danger .modal-body{
    background-color: transparent!important;
    box-shadow:none!important;
}
.ui-pnotify .alert-danger{
    color: #ED1C24!important;
    width: 265px;
    /* height: 40px; */
    background-color: #FFCBCD!important;
    border: 1px solid #ED1C24;
    color: #ED1C24;
    box-sizing: border-box;
    border-radius: 4px;
}
.ui-pnotify .alert-success{
    color: #36AF47!important;
    width: 265px;
    /* height: 40px; */
    background-color: #CFF7D5!important;
    border: 1px solid rgba(54, 175, 71, 0.5);
    box-sizing: border-box;
    border-radius: 4px;
}
.ui-pnotify-closer, .ui-pnotify-sticker {
    display: none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: none;
    outline-offset: 0;
}
.search_input_name,
.search_input_phone{
    position: relative;
}
.modal {
    background: rgba(0, 0, 0, 0.15);
}
#registerNow.modal .modal-dialog .modal-content {
    width: 1010px;
    height: auto;
    border-radius: 6px;
}
.modal-dialog {
    max-width: 100%;
}
.redis-img{
    width: 209px;
height: 50px;
}
.pop_unavailable_mid{
    padding: 16px 24px 8px;
    font-size: 14px;
    line-height: 22px;
    color: #707C8D;
    border-bottom: 2px solid #F4F6F8;
}
.modal-title{
    font-size: 16px;
    line-height: 19px;
    color: #FF8504;
    margin-bottom: 12px;
}
.pop_unavailable_mid img{
    width: 14px;
    object-fit: contain;
    margin-right: 4px;
}
.pop_unavailable_mid .form-group{
    margin-left: 12px;
}
.col-mar-4 {
    margin-left: -4px;
    margin-right: -4px; 
}
.col-mar-4 > div[class^="col-"] {
    padding-left: 4px;
    padding-right: 4px; 
}
.label--user{
    margin-left: 12px;
}
.pop_unavailable_mid .row.col-mar-4 p{
    margin-bottom: 0;
}
.pop_unavailable_mid .row.col-mar-4{
    align-items: center;
    margin-bottom: 12px;
}
.pop_unavailable_mid .row.col-mar-4.mb-20{
    height: 40px;
}
.modal .form-control{
    background: #F4F6F8;
    border: 1px solid #DFE3E9;
    box-sizing: border-box;
    border-radius: 6px;
    height: 40px;
}
.modal .modal-dialog .modal-content .modal-body .pop_unavailable_bot .close-button{
    width: 67px;
    height: 32px;
    left: 974px;
    top: 546px;
    background: linear-gradient(
360deg
, #F2F4F8 0%, #FFFFFF 100%);
    border: 1px solid #DFE3E9;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
    color: #DF4F5E;
}
.sign-button.active {
    background: linear-gradient(
            0deg, #FF7A00 -5.77%, #FFD335 148.08%) !important;
    color: #fff !important;
    border: none !important;
}
.modal .modal-dialog .modal-content .modal-body .pop_unavailable_bot .sign-button{
    width: 115px;
    height: 32px;
    background: #E9EDF1;
    border: 1px solid #DFE3E9;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 14px;
    line-height: 22px;
    color: #7F8FA4;
    margin-left: 8px;
}
.pop_unavailable_bot p{
    font-size: 12px;
    line-height: 18px;
    color: #707C8D;
    margin-bottom: 0;
}
.pop_unavailable_bot a{
    font-size: 12px;
    line-height: 18px;
    font-style: italic;
    text-decoration: revert;
}
.ml-4px{
    margin-left: 4px;
}
.mt-24{
    margin-top: 24px;
}
.mb-24{
    margin-bottom: 24px;
}
select{
    font-size: 14px;
    line-height: 22px;
    color: rgba(127, 143, 164, 0.75);
}
.gender span{
    margin-left: 4px;
    top: 2px;
    position: relative;
}
#forgotPassword.modal .modal-dialog .modal-content .modal-body .pop_unavailable{
    -webkit-text-fill-color: inherit;
    height: 45px;
    padding: 16px;
}
#forgotPassword.modal .modal-dialog .modal-content .modal-body .pop_unavailable img{
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.color-35{
    color: #354052;
}
.btn-close-modal{
    width: 226px;
    height: 32px;
    background: #E9EDF1;
    border: 1px solid #DFE3E9;
    box-sizing: border-box;
    border-radius: 4px;
    color: #7F8FA4;
    font-size: 14px;
line-height: 18px;
}
#forgotPassword .pop_unavailable_mid{
    border-bottom: none;
}
.permission_text{
    font-size: 16px;
    line-height: 22px;
    color: #7F8FA4;
    margin-bottom: 46px;
}
.permission_title{
    font-size: 32px;
    line-height: 37px;
    color: #FF8504;
    margin-bottom: 16px;
}
.permission .text-right img{
    margin-right: 15px;
}
.permission .text-right a{
    background: linear-gradient(
0deg
, #FF7A00 -5.77%, #FFD335 148.08%);
    border-radius: 8px;
    width: 129px;
    height: 40px;
    display: inline-block;
    text-align: center;
    padding: 10px 32px 10px 16px;
    font-size: 16px;
    line-height: 18px;
    color: #FFFFFF;
}
.permission{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F6F8;
}
.permission .permission_box{
    display: flex;
    width: 974px;
    height: 475px;
    background: #FFFFFF;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 84px 103px 40px 158px;
}
.permission .permission_box .permission_box_right .permission_box_top .permission_box_right_text{
    color: #778FBB;
    font-size: 20px;
}
.permission .permission_box .permission_box_right .permission_box_top{
    margin-bottom: 10px;
    width: 400px;
    height: 97px;
    background: #F2F2F2;
    display: flex;
    align-items: center;
}
.border_color_box{
    border: 1px solid transparent;
    border-radius: 6px;
    background: #DFE3E9;
}
.border_color_box:hover,
.border_color_box:focus-visible ,.border_color_box:focus-within,
.border_color_box:active,.border_color_box:focus,.border_color_box:visited{
    background: linear-gradient(#fff,#fff) padding-box,linear-gradient(to right, #ff7a00, #ffd335) border-box;
}
.modal .form-control{
    background: #F4F6F8;
    border: none;
    box-sizing: border-box;
    border-radius: 6px;
    height: 40px;
}
.modal button:hover,
.modal button:focus,
.modal button:active{
    background: linear-gradient(180deg, #E4E8EF 0%, #FDFEFE 100%);
    border: 1px solid #DFE3E9;
    box-sizing: border-box;
    border-radius: 6px;
    color: inherit;
  outline: none;
  box-shadow: none;
}
button.close{
    width: 26px;
    height: 26px;
    border-radius: 50%!important;
}
button.close img{
    width: 14px;
    height: 14px;
}
button.close:hover{
    background: #354052;
    opacity: 0.25;
    filter: brightness(2);
}
.ui-pnotify .ui-pnotify-container{
    border-radius: 6px;
    max-width: 423px;
    height: auto;
    width: auto;
    padding: 10px 10px 10px 15px;
    display: flex;
}
.ui-pnotify{
    z-index: 11;
    position: fixed;
    right: 15px;
    bottom: 15px; 
    opacity: 1; 
    display: block; 
    cursor: auto;
}
.alert-success .icon_noti,
.alert-danger .icon_noti {
    background-size: 100%;
    margin-top: 3px;
}
.ui-pnotify .ui-pnotify-title{
    display: none;
}
.alert-success .ui-pnotify-icon span,
.alert-danger .ui-pnotify-icon span {
    background-size: 100%;
    margin-top: 3px;
}
.alert-success .ui-pnotify-icon span{
    background:url('../images/noti1.png') no-repeat;
    width: 16.58px;
    height: 16px;
}
.alert-danger .ui-pnotify-icon span{
    background:url('../images/noti.png') no-repeat;
    width: 16.58px;
    height: 16px;
}
.ui-pnotify-icon, .ui-pnotify-icon span {
    display: block;
    float: left;
    margin-right: .2em;
}
.color--danger{
    color: #DF4F5E;
}

.border-red {
    border: 1px solid #DF4F5E!important;
}
.text-check {
    position: absolute;
    top: 6px;
    right: 14px;
    pointer-events: none;
    font-size: 10px;
    line-height: 12px;
    color: #DF4F5E;
}
[v-cloak] {
    display: none;
}
.express-info {
    position: absolute;
    top: 16px;
    text-align: center;
    font-size: 16px;
    line-height: 19px;
    color: #fff;
}
.version {
    position: absolute;
    bottom: 0;
    right: 16px;
    color: #fff;
    font-size: 16px;
    line-height: 22px;
}

.select2-wrapper .select2-selection {
    background: #F4F6F8;
    box-sizing: border-box;
    border-radius: 6px;
    border: 1px solid #DFE3E9;
    height: 40px;
    padding: 8px 8px;
}