@import "bootstrap/scss/bootstrap.scss";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
@import 'var';

/*Reset CSS Starts*/
* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border: none; -webkit-border-radius: 0; border-radius: 0; outline: none;  -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
.clear { font-size: 1%; height: 0; line-height: 0; width: 0; float: none; clear: both; }
* html .clearfix { height: 1%; }
input { outline: none }
ul { list-style: none; padding: 0; margin: 0;}
li { list-style: none }
:focus { outline: 0; }
img,
img a { border: 0; outline: 0; }
a { text-decoration: none; outline: none; color: #3c88c4 }
a:hover{text-decoration: none;outline: none; }
img { border: none; max-width: 100%; max-height: 100%;}
html { -webkit-text-size-adjust: 100%; }
h1,
h2,
h3,
h4,
h5,
h6 { font-weight: normal; margin: 0; }
h1,
h2,
h3,
h4,
h5,
table,
table tr td,
table tr th { border: none }
textarea { resize: none; border: none; outline: none; background: none }
.btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-primary.dropdown-toggle:focus{
    box-shadow: none;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

  ::placeholder,
::-webkit-input-placeholder {
    opacity: 1; 
  } 
/*Reset CSS end*/

/*Reset bootstrap styling:start*/
a{
    color: $black;
    &:hover{
        color: $black;
    }
}
ul{
    margin-bottom: 0;
}
figure,
p,
label{margin-bottom: 0;}

/*Reset bootstrap styling:end*/

html { font-size: 62.5%; font-weight: normal;}
body {
    font-family: $inter-font; 
    font-style: normal; 
    font-size: $fs-16; 
    font-weight: normal;  
    margin: 0; 
    padding: 0;
    position: relative;
    color: $black;
    background: $bright_gray;
}
html,
body{ min-height: 100%; height: 100%;  width: 100%;}
.onboarding-page{
    .hamburger{
        display: none;
    }
}
/*global css:start*/ 
main{ 
   width: 100%;
   &.bottom-spacing{
    padding-bottom: 150px;
   }
}
.login-bg{
    height: 100%;
}
.container{
    max-width: 640px;
    margin: 0 auto;
    padding: 0 16px;
}

h1{
    font-size: $fs-32;
    font-family: $fw-medium;
}

.text-danger{
    color: $color_dark-pastel-red;
}

.no-data{
    text-align: center;
}

.text-success{
    color: $color_crusoe;
}

.custom-primary-button{
    background: $color_gold_drop;
    border-radius: 20px;
    height: 54px;
    display: flex;
    padding: 0 24px;
    align-items: center;
    font-size: $fs-14;
    color: $white;
}

.custom-secondary-outline-button{
    border-radius: 20px;
    height: 54px;
    display: flex;
    padding: 0 54px;
    align-items: center;
    font-size: $fs-14;
    border: $black solid 1px;
    background: $bright_gray;
}

h1{
    font-size: $fs-20;
}

/*swiper custom style:start*/
.swiper-pagination-horizontal.swiper-pagination-bullets {
  bottom: 30px;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  background: transparent;
  width: 8px;
  height: 8px;
  margin: 0 5px;
  opacity: 1;
  border: solid 1px $black;
}

.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {
  background: $color_gold_drop;
  border: none;
  width: 16px;
  border-radius: 4px;
}

/*swiper custom style:end*/

/* custom-radio:start */
.custom-radio-title{font-weight: 600; font-size: 1.4rem;  line-height: 18px; font-weight: 600; }
.custom-radio input[type="radio"]:checked,
.custom-radio input[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.custom-radio input[type="radio"]:checked + label,
.custom-radio input[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    font-size: 1.4rem;
}

.custom-radio input[type="radio"]:checked + label:before,
.custom-radio input[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #93949B;
    border-radius: 100%;
    background: #fff;
}
.custom-radio input[type="radio"]:checked + label:before{
    border-color: #595C73;
}
.custom-radio input[type="radio"]:checked + label:after,
.custom-radio input[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 20px;
    height: 20px;
    background: #595C73;    
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.custom-radio input[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.custom-radio input[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}
.custom-radio-section .custom-radio{ margin-top: 24px;}
.custom-radio-section .custom-radio.mt24{margin-top: 24px;}

.custom-radio input[type="radio"]:disabled + label{ opacity: 0.5;}
.custom-radio-inline-section{ display: flex;
    .custom-radio{
        margin-left: 30px;
        margin-top: 0;
        &:first-child{
            margin-left: 0;
        }
    }
    }
.medical-history-radio{
    .custom-radio{
        margin-left: 116px;
    }
}
/* custom-radio:end */
/* custom-checkbox:start */
.custom-checkbox-title{font-weight: 600; font-size: 1.6rem;  line-height: 14px; font-weight: 600; }
.custom-checkbox { 
    display: flex;

    &.padtp{
        padding-top: 24px;
    }
}
.custom-checkbox input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none; cursor: pointer; }
.custom-checkbox label { position: relative; cursor: pointer; color: $black; padding-left: 30px; font-size: $fs-12; font-weight: $fw-regular; line-height: 18px;} 
.custom-checkbox label:before { content:'';  position: relative; cursor: pointer; background-color: #fff; width: 18px; height: 18px; position: absolute; top: 2px; left: 0; border: solid 3px $black;;} 
.custom-checkbox input:checked + label:after { content: ''; display: block; position: absolute; top: 6px; left: 4px;background: $black; 
    width: 10px;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: $fs-10;
}
/*custom-checkbox:end*/

/*top-section:start*/
.top-section{
    display: flex;
    width: 100%;
    padding-top: 20px;
    .top-section-wrap{
        display: flex;
        justify-content: space-between;
    }
    h1{
        padding-right: 20px;
    }
    .car-service-filter{
        display: flex;
        position: relative;
        width: 18px;
        z-index: 99;
        .car-service-filter-icon{
            position: relative;
            z-index: 2;
        }
        .car-service-filter-list{
            width: 155px;
            text-align: center;
            background: $color_gainsboro;
            padding: 0;
            z-index: 1;
            margin-top: -25px !important;
            margin-right: -5px !important;
            border: none;
            position: absolute;
            right: 0;
            top: 55px;
            display: none;
            &.active{
                display: block;
            }
            li{
                a{
                    display: block;
                    padding: 16px 20px;
                    font-size: $fs-14;
                }
                &.active{
                    background: $color_gold_drop;
                }
            }
        }
    }
}
/*top-section:end*/

/*bottom-action-btns:start*/
.bottom-action-btns{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding:16px 0;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: $bright_gray;
    box-shadow: -2px 0px 4px rgba(33, 56, 113, 0.1);
    .custom-primary-button,
    .custom-secondary-outline-button{
        width: 120px;
        font-size: $fs-16;
        .icon{
            margin-right: 11px;
        }
    }
    .left-side-btn{
        border-top-left-radius:0;
        border-bottom-left-radius:0;
        margin-left:-1px ;
    }
    .right-side-btn{
        border-top-right-radius:0;
        border-bottom-right-radius:0;
    }
}
.bottom-position{
    position: fixed;
    bottom: 0;
}
/*bottom-action-btns:end*/

/*form:start*/
.form{
    margin-top: 15px;
    width: 100%;
    .form-group{
        margin-bottom: 15px;
    }
    .text-danger{
        font-size: $fs-12;
        padding-top: 5px;
        padding-left: 15px;
    }
    .form-label{
        color: $color_silver-chalice;
        padding-left: 15px;
    }
    .label-value{
        padding-left: 15px;
    }
    .form-control{
        border: none;
        height: 40px;
        border-radius: 10px;
        padding: 0 16px;
        font-size: $fs-16;
        &:focus{
            box-shadow: none;
        }
    }
}
.personal-details-form{
    .form-control{       
        height: 64px;
        background-color: $color_gainsboro;
    }
}
/*form:end*/
.processing-tab{
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: $fs-14;
    text-align: right;
}
.container.left0{
    padding-left: 0;
}

.confirmation-action-btn-wrap{
    display: flex;
    justify-content: space-between;
    padding: 0 15px 40px;
    a{
        margin: 15px;
    }
}

.lds-roller-overlay{
    position: fixed;
    width: 100vw;
    height: 100vh;
    // background-color: #000;
    left: 0;
    top: 0;
    z-index: 99;
    &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: $black;
        opacity: 0.5;
        z-index: -1;
    }
}
.lds-roller {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
  }
  .lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
  }
  .lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: -4px 0 0 -4px;
  }
  .lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
  }
  .lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
  }
  .lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
  }
  .lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
  }
  .lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
  }
  .lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
  }
  .lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
  }
  .lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
  }
  @keyframes lds-roller {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .phone-rotate-message{
    width: 100%;
    height: 100%;
    background:$bright_gray;
    z-index: 9999;
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    h3{
        font-size: $fs-24;
        margin-top: 24px;
    }
    img{
        max-height: 60%;
        max-width: 60%;
    }
  }

  @media screen and (orientation: portrait) {
    .phone-rotate-message {
      display: flex;
    }
  }