/*!
 * Custom CSS to overwrite the default style
 */
.app-logo,
.app-header__logo .logo-src,
.app-header.header-text-light .app-header__logo .logo-src{
  width: 200px;
  height: 23px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('../images/teleport-logo.svg');
}

.app-theme-white.app-container{
  background: #ffffff;
}

.app-theme-white{
  background: #ffffff;
}

.app-theme-white.fixed-header .app-header__logo{
  background: transparent !important;
}

.app-theme-white .app-sidebar{
  background: #dd501f;
}

.app-sidebar__heading{
  color: #eff1ff;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
  background-color:#ffffff;
}

.vertical-nav-menu ul{
  padding: 0 0 0 2rem;
}

.vertical-nav-menu ul:before{
  background: transparent;
}

.vertical-nav-menu li a{
  color: #ffffff;
}

.vertical-nav-menu li a:hover{
  background: none;
}

.vertical-nav-menu li.mm-active>a{
  color: #fff;
}

.vertical-nav-menu ul>li>a{
  color: #fff;
  padding: 0 1.5rem 0 1em;
}

.vertical-nav-menu ul>li>a:hover{
  color: #fff;
}

.vertical-nav-menu ul>li>a.mm-active{
  color: #FFA500;
  font-weight: normal;
  background: transparent;
}

.vertical-nav-menu i.metismenu-state-icon, .vertical-nav-menu i.metismenu-icon{
  opacity: 0.6;
}

.vertical-nav-menu li a:hover i.metismenu-icon{
  opacity: 0.8;
}

/*user-guide menu*/
.user-guide{
  position: absolute;
  bottom: 0px;
  background: #282726 !important;
  padding: 1rem 1.5rem;
  border-top: 1px solid #fff;
  width: 100%;
  margin-top: 0px;
/*  margin-left: -1.5rem;*/
  z-index: 99;
}

.app-page-title .page-title-icon{
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 10px 0 0 !important;
  width: 30px !important;
  height:  30px !important;
  padding: 0 !important;
}

.app-page-title.bg-heavy-rain {
    background: #f0f1f2 !important;
    padding: 20px 30px;
}

.app-page-title .page-title-heading{
  line-height: 1.2;
}

/**Common Class**/
.bg-dark{
  background: #282726 !important;
}

.bg-light{
  background: #f0f1f2 !important;
}

.bg-light-gray{
  background: #fbfcfd !important;
}

.bg-orange{
  background: #dd501f !important;
}

.text-orange{
  color: #dd501f !important;
}

/**Card**/
.main-card{
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 70px;
}
.card-header, .card-title{
  font-size: .8rem;
  font-weight: normal;
  letter-spacing: 0.08em;
  color: #aaa6a0;
}



/**Form Element**/
:not(textarea).form-control{
  outline: 0;
  background: none;
/*  font-size: .88rem;*/
  height: calc(2.5rem + 5px) !important;
}

.form-control:focus{
  box-shadow: none;
  border-color: #7d7d7d;
}

label {
  text-transform: capitalize;
  display: inline-block;
  margin-bottom: .2rem;
  color: #8a8a8c;
}

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiBoZWlnaHQ9IjUwcHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgd2lkdGg9IjUwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IGZpbGw9Im5vbmUiIGhlaWdodD0iNTAiIHdpZHRoPSI1MCIvPjxwb2x5Z29uIHBvaW50cz0iNDcuMjUsMTUgNDUuMTY0LDEyLjkxNCAyNSwzMy4wNzggNC44MzYsMTIuOTE0IDIuNzUsMTUgMjUsMzcuMjUgIi8+PC9zdmc+') !important;
    background-repeat: no-repeat, repeat !important;
    background-position: right .7em top 50%, 0 0 !important;
    background-size: .85em auto, 100% !important;
}

.asteriskField{
  color: #d92550 !important;
}


/*.input-group-text,
.select2-container--bootstrap4 .select2-selection{
  border-radius: 0;
}*/

.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect{
  padding: 2px 2px 2px 10px;
  /*border-radius: 0;*/
}

.avatar_name_wrapper {
    display: flex;
    align-items: center;
}

.avatar_icon {
    border-radius: 50%;
    background: #eee;
    width: 70px;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    float: left;
    margin-right: 10px;
    font-size: 30px;
    line-height: 70px;
    position: relative;
}

.avatar_details {
    font-size: 15px;
    line-height: 1.3;
    width: calc(100% - 70px);
}

.ck-blurred.ck.ck-content.ck-editor__editable.ck-rounded-corners.ck-editor__editable_inline.ck-read-only {
    border: 0px;
    padding:0;
}
.ck.ck-toolbar.ck-toolbar_grouping { border: 0px;}

#vehicle-type-container{
  display: flex;
  flex-direction: column;
  vertical-align: sub;
  align-items: center;
  justify-content: center;
}

@media only screen and (max-width: 600px) {
  #pickup-dropoff-detail-container>div{flex-direction:column !important;}
  #pickup-detail-container,
  #dropoff-detail-container{
    width: 100% !important;
    background: #eee;
    border-radius: 10px;
    padding: 20px;
  }

  #vehicle-type-container{
    background: #eee;
    border-radius: 10px;
    margin: 20px 0;
    padding: 20px 0;
  }
}


/* rating span css */
.br-theme-css-stars .br-widget span {
  text-decoration: none;
  height: 18px;
  width: 18px;
  float: left;
  font-size: 23px;
  margin-right: 5px;
} 

.br-theme-css-stars .br-widget span.br-selected::after {
  color: #ffbf00;
}
.br-theme-css-stars .br-widget span::after {
  content: "\2605";
  color: #d2d2d2;
}

.br-theme-css-stars .br-widget .br-half::before {
    content: "\2605"; /* unicode star */
    color: #ffc107;
    position: relative;
}
.br-theme-css-stars .br-widget .br-half {
    position: relative;
}
.br-theme-css-stars .br-widget .br-half::after {
    content: "\2605";
    color: #e4e5e9;
    position: absolute;
    left: 50%;
    overflow: hidden;
    width: 50%;
    top: 0;
}

/* end rating */

/**Modal Left / Right**/
.modal.left .modal-dialog,
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100%;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
      -ms-transform: translate3d(0%, 0, 0);
       -o-transform: translate3d(0%, 0, 0);
          transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
  padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog{
  left: -100%;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
       -o-transition: opacity 0.3s linear, left 0.3s ease-out;
          transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.show .modal-dialog{
  left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
  right: -100%;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
       -o-transition: opacity 0.3s linear, right 0.3s ease-out;
          transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
  right: 0;
}

/*Right > BottomSheet for mobile layout*/
@media (max-width: 767.98px) {
    /* Custom class to position the modal at the bottom */
    .right > .modal-dialog {
        right: auto !important;
        position: fixed;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: auto !important;
        max-height: 80vh; /* Adjust this to control how high the sheet can expand */
        overflow-y: auto; /* Enable scrolling if needed */
        border-radius: 20px 20px 0 0; /* Rounded corners for aesthetics */
    }
    .right.show > .modal-dialog {
      animation: slide-up 0.3s ease-out !important; /* Animation for sliding up */
    }
    .modal.right .modal-content{
    /* padding-bottom: 60px;*/ /** Need to check how it impact in frontend */
      min-height: 50vh;
      max-height: 80vh;
      border-radius: 20px 20px 0 0;
    }
    .modal.right .modal-header{
        border-radius: 20px 20px 0 0;
    }
    .modal-dialog .close{
      right: 1rem;
      top: 1rem;
      padding:0;
      margin: 0;
    }

    /* Slide-up animation when the modal opens */
    @keyframes slide-up {
        from {
            transform: translateY(100%);
        }
        to {
            transform: translateY(0%);
        }
    }

    /* Slide-down animation when the modal closes */
    @keyframes slide-down {
        from {
            transform: translateY(0%);
        }
        to {
            transform: translateY(100%);
        }
    }

    .right > .modal-dialog {
    /* Apply slide-down animation when the modal is closing */
        animation: slide-down 0.3s ease-out !important;
    }
}

/****Customer Check Box***/
.form-check,
.checkbox-blue-tick{
  position: relative;
  padding: 0;
  overflow: hidden;
/*    border: 1px solid #5562eb;*/

}

.checkbox-blue-tick {
  display: inline-block;
}

.form-check label,
.checkbox-blue-tick label{
  padding: 2px 30px 2px 30px;
  border-radius: 10px;
  width: 100%;
  display: block;
  text-align: left;
  color: #3C454C;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 200ms ease-in;
}

.checkbox-blue-tick label{
  padding: 2px 35px 2px 0px;
}

.form-check label::before,
.checkbox-blue-tick label::before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale3d(1, 1, 1);
  transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
  opacity: 0;
  z-index: -1;
}

.form-check label::after,
.checkbox-blue-tick label::after {
  width: 23px;
  height: 23px;
  content: '';
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: -2px -2px;
  border: 2px solid #D1D7DC;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 200ms ease-in;
}

.checkbox-blue-tick label::after {
  width: 27px;
  height: 27px;
  background-position: 0px 0px;
  left: auto;
  right: 8px;
}

.checkbox-blue-tick input:checked ~ label {
  /* color: #fff; */
  border: 2px solid #dd501f !important;
  background: #fbf3f0 !important;
}

.form-check input:checked ~ label::before
.checkbox-blue-tick input:checked ~ label::before {
  transform: translate(-50%, -50%) scale3d(56, 56, 1);
  opacity: 1;
}

.form-check input:checked ~ label::after,
.checkbox-blue-tick input:checked ~ label::after {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
  background-color: #dd501f;
  border-color: #dd501f;
}

.checkbox-blue-tick input:disabled ~ label::after{
  background-color: #b6bcbb;
}

.checkbox-blue-tick input {
  width: 32px;
  height: 32px;
  order: 1;
  z-index: 2;
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  visibility: hidden;
}