:root {
  --gray: #656F78;
  --textParagraph: #4C5863;
  --black: #2C2E39;
  --blue: var(--primary-shade-2);
  --btnhoverBlue: var(--primary-shade-1);
  --green: #18A326;
  --red: #F44141;  
  --separatorBorder: #E7EAEC;  
  --offblue: #EBF0FF;
}
h2, p{
  margin: 0;
  padding: 0;
}

/* 
Table index 
===============
1. reve-primary-blue-button 
2. reve-secondary-outline-button 
3. onboarding-preference-card
4. onboardingPreferenceDropdown
5. onboarding-preference-page
6. onboarding-preference-page-left
7. onboarding-preference-page-right
8. preference-services
9. preference-dropdown-option-section
10. add-website-address-section
.   common css area
*/

/* reve-primary-blue-button start */
.reve-primary-blue-button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  column-gap: 8px;
  padding: 9px 24px;
  height: 40px;
  background: var(--blue);
  color: #ffffff!important;
  text-decoration: none!important;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 21.56px;
  border: 1px solid var(--blue);
  cursor: pointer;
  border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
  transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}
button#signIn {
    border: 1px solid #dadce0;
    font-size: 12px;
    color: #3c4043!important;
    font-weight: 600;
}
button#signIn:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #d2e3fc;
    outline: none;
    background: rgba(66,133,244,.04);
}
.reve-primary-blue-button:hover {
  background: var(--btnhoverBlue);
  border: 1px solid var(--btnhoverBlue);
}
/* reve-primary-blue-button end */

/* .reve-secondary-outline-button start */
.reve-secondary-outline-button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  column-gap: 8px;
  padding: 9px 24px;
  height: 40px;
  background: #ffffff;
  color: var(--gray)!important;
  text-decoration: none!important;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 21.56px;
  border: 1px solid #E1E1E1;
  cursor: pointer;
  border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
  transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}

.reve-secondary-outline-button:hover {
  background: #ffffff;
  border: 1px solid var(--blue);
  color: var(--blue)!important;
}
/* .reve-secondary-outline-button end */

/* .save-button-disable start */

.save-button-disabled {
  background: var(--primary-shade-2)33;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
  border: 1px solid #d6e0ff;
}

/* save-button-disable end */

/* off blue button :start */
.reve-primary-blue-button.offblue-btn{
  background: var(--offblue);
  color: var(--blue)!important;
  border-color: transparent;
}
.reve-primary-blue-button.offblue-btn:hover{
  background: var(--btnhoverBlue);
  color: #fff!important;
}
.reve-secondary-outline-button.offblue-btn{
  background: var(--offblue);
  border-color: transparent;
  color: var(--blue);
}
.reve-secondary-outline-button.offblue-btn:hover{
  background: var(--btnhoverBlue);
  color: #fff;
}
/* off blue button :end */


/* onboarding-preference-card start */
.onboarding-preference-card{
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  padding: 18px;
  width: 270px;
  height: 110px;
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
  border: 1px solid var(--separatorBorder);
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
  transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}
.onboarding-preference-card:hover{
  border: 1px solid var(--blue);
}
.onboarding-preference-card:before{
  opacity: 0;
  background: linear-gradient(180deg, #EDEEFF 0%, #FFFFFF 100%);
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
  transition: 0.3s ease-in-out;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -ms-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
}
.onboarding-preference-card:hover:before{  
  opacity: 1;
}
.onboarding-preference-card:after {
    background-image: url("../images/preference/onboarding-preference-card-uncheckSquare.svg");
    position: absolute;
    content: "";
    top: 10px;
    right: 10px;
    height: 24px;
    width: 24px;
}
.onboarding-preference-card.active:after{
  position: absolute;
  content: "";
  background-image: url("../images/preference/onboarding-preference-card-checkSquare.svg");
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
}
.onboarding-preference-card.active{
  background: linear-gradient(180deg, #EDEEFF 0%, #FFFFFF 100%);
  border: 1px solid var(--blue);
}

.onboarding-preference-card img{
  position: relative;
  z-index: 1;
}
.onboarding-preference-card-title{
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  color: var(--gray);
  line-height: 18.2px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  margin: 0;
  margin-top: 16px;
  cursor: pointer;
  z-index: 1;
  position: relative;
}
/* onboarding-preference-card end */


/*onboardingPreferenceDropdown start*/
 .onboardingPreferenceDropdown {
     cursor: pointer;
     display: inline-block;
     position: relative;
     font-size: 16px;
     color: #fff;
     width: 100%;
     height: 40px;
}
 select {
     display: none;
}
 .wrap h1{
     text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18, -40px -40px 0px rgba(28,110,164,0);
     color: #181B33;
     background: #232323;
     font-size: 47px;
     text-align: center;
     font-family: monospace;
}
 .custom-onboardingPreferenceDropdown {
     position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
     background-color: #fff;
     color: var(--textParagraph);
     padding: 8px 15px;
     -moz-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
     -webkit-transition: all 0.2s ease-in;
     transition: all 0.2s ease-in;
     border-bottom: 1px solid var(--separatorBorder);
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
}
.custom-onboardingPreferenceDropdown:after {
    content: "";
    background-image: url("../images/preference/select-down-arrow.svg");
    position: absolute;
    top: 16px;
    right: 10px;
    transform: rotateZ(0deg);
    transition: all 0.5s;
    transform-origin: 50% 25%;
    height: 20px;
    width: 20px;
    background-repeat: no-repeat;
}
 .custom-onboardingPreferenceDropdown:active, .custom-onboardingPreferenceDropdown.active {
     background-color: #fff;
     color: #9E9E9E;
}
 .custom-onboardingPreferenceDropdown:active:after, .custom-onboardingPreferenceDropdown.active:after {
     transform: rotateZ(180deg);
     transition: all 0.5s;
     transform-origin: 50% 25%;
}
 .custom-onboardingPreferenceDropdown:focus{
    outline: 2px;
}
.onboardingPreferenceDropdown-options {
    /*max-height: 200px;
    overflow-y: auto;*/
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 16px 8px;
    list-style: none;
    background-color: #ffffff;
    box-shadow: 0px 8px 20px rgba(58, 70, 93, 0.1);
    border-radius: 4px;
    margin-top: 8px;
}
 .onboardingPreferenceDropdown-options li {
     color: var(--black);
     font-size: 14px;
     font-weight: 400;
     line-height: 21.56px;
     font-family: 'Inter', sans-serif;
     margin: 0;
     padding: 6px 8px;
     -moz-transition: all 0.15s ease-in;
     -o-transition: all 0.15s ease-in;
     -webkit-transition: all 0.15s ease-in;
     transition: all 0.15s ease-in;
}
.onboardingPreferenceDropdown-options li:hover {
    color: #424242;
    background: #EFF2F4;
    border-radius: 4px;
}
 .onboardingPreferenceDropdown-options li[rel="hide"] {
     display: none;
}
 ::-webkit-scrollbar {
     width: 10px;
     background-color: #F5F5F5;
     border-radius: 0 0 5px 0;
}
 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     background-color:#9E9E9E;
}
ul.onboardingPreferenceDropdown-options li:first-child {
    display: none;
}
/*dropdown end*/

/* 5. onboarding-preference-page start*/
.onboarding-preference-page {
  display: flex;
  box-sizing: border-box;
  flex-wrap: wrap;
  max-width: 100%;
  height: 100vh;
}
/* 5. onboarding-preference-page end*/

/* 6. onboarding-preference-page-left start*/
.onboarding-preference-page-left {
  background: #F5F8FF;
  width: 480px;
  position: fixed;
  height: 100vh;
}
.onboarding-preference-page-left .reve-chat-logo img {
  padding-top: 40px;
  padding-left: 50px;
  cursor: pointer;
}

.onboarding-preference-page-left .left-side-content lottie-player {
  text-align: center;
  margin-top: 148.65px!important;
  pointer-events: none;
}
/* 6. onboarding-preference-page-left end*/

/* 7. onboarding-preference-page-right start */
.onboarding-preference-page-right {
    padding-left: 480px;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-bottom: 150px;
    height: 100vh;
    box-sizing: content-box;
}
.onboarding-preference-page-right .preference-page-title{
  color: var(--black)!important;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 25px;
  line-height: 33.89px;
  padding-top: 110px;
  padding-bottom: 8px;
}
.onboarding-preference-page-right .preference-page-short-description{
  color: var(--gray)!important;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
/* 7. onboarding-preference-page-right end */

/* 8. preference-services start */
.preference-services{
  margin-top: 50px;
}
.preference-services .preference-services-title{
  color: var(--black)!important;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 25.6px;
  margin-bottom: 20px;
}
.preference-services .preference-services-item{
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px; 
  row-gap: 30px;
}
/* 8. preference-services end */

/* 9. preference-dropdown-option-section start */
.preference-dropdown-option-section{
  margin-top: 70px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 30px;
}
.preference-dropdown-option-item {
  display: flex;
  align-items: center;
  max-width: 45%;
  width: 100%;
  column-gap: 16px;
  flex: auto;
  z-index: 1;
}
.preference-dropdown-option-section .custom-onboardingPreferenceDropdown {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.preference-dropdown-option-section .custom-onboardingPreferenceDropdown:after{
  right: 0;
}
/* 9. preference-dropdown-option-section end */

/* 10. add-website-address-section start */
.add-website-address-section {
  margin-top: 50px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  column-gap: 16px;
  flex-wrap: wrap;
  row-gap: 16px;
  max-width: 730px;
}
.add-website-address-section .add-website-address-field {
  border: none;
  border-bottom: 1px solid var(--separatorBorder);
  padding: 11px 0;
  outline: none;
  line-height: 25.6px;
  color: var(--black)!important;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  flex: auto;
}

.add-website-address-section .add-website-address-field:focus{
  border-bottom: 1px solid var(--blue);
}
.add-website-address-section .add-website-address-field::placeholder {
  color: #9E9E9E!important;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.add-website-address-section .add-website-address-field:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #9E9E9E!important;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.add-website-address-section .add-website-address-field::-ms-input-placeholder { /* Microsoft Edge */
  color: #9E9E9E!important;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
/* 10. add-website-address-section end */

/*common css area start */
.preference-common-title{
  color: var(--black)!important;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 25.6px;
  min-width: fit-content;
  white-space: nowrap;
}
/*common css area end */




.onboarding-drawer-container {
  background: #222A3A7A;
  display: block;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 1029;
  overflow: hidden;
  position: fixed;
  -webkit-box-shadow: 0 0 15px 1px rgb(113 106 202 / 20%);
  box-shadow: 0 0 15px 1px rgb(113 106 202 / 20%);
  transition: 0.5s;
  visibility: hidden;
  opacity: 0;
  transition-timing-function: ease-in-out;
}


.onboarding-drawer-container.drawer-open {
  visibility: visible;
  opacity: 1;
  right: 0;
}


.onboarding-drawer {
  background: #fff;
  display: block;
  width: 70%;
  max-width: 100%;
  top: 0;
  right: -500px;
  bottom: 0;
  height: 100%;
  z-index: 1029;
  position: fixed;
  -webkit-box-shadow: 0 0 15px 1px rgb(113 106 202 / 20%);
  box-shadow: 0 0 15px 1px rgb(113 106 202 / 20%);
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.onboarding-drawer-container.drawer-open .onboarding-drawer {
  visibility: visible;
  opacity: 1;
  right: 0;
}

.onboarding-drawer-content {
  max-height: 659px;
  outline: none;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.onboarding-drawer-left {
  position: relative;
  padding: 77px 53px;
  min-width: 470px;
}

.onboarding-drawer-right {
  overflow: hidden;
  overflow-y: auto;
  max-width: 100%;
  height: 100vh;
  padding: 77px 53px;
  width: calc(100% - 470px);
  min-width: 300px;
}

.onboarding-drawer-right .centered img {
  max-width: 100%;
}

.rightbar-close-button {
  position: absolute;
  left: -17.5px;
  top: 43px;
  background: #FFFFFF;
  box-shadow: 0px 4px 10px rgba(22, 26, 29, 0.05);
  border-radius: 50px;
  height: 35px;
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.onboarding-drawer-left .rightbar-close-button span {
    color: var(--gray)!important;
}

.onboarding-drawer-left .int-livechat-link {
  text-align: center;
  display: block;
}

.preference-dropdown-option-item.industry-type{
  z-index: 2;
}

.onboarding-preference-page-right .preference-save-button{
  margin-bottom: 100px;
}


/* responsive start */
@media screen and (min-width: 1025px){
  .onboarding-preference-page{
    flex-wrap: nowrap;
  }
}
@media screen and (max-width: 1024px) {
  .onboarding-preference-page{
    height: auto;
  }
  .onboarding-preference-page-left{
    background: none;
  }
  .onboarding-preference-page-left .reve-chat-logo img {
    padding-top: 0;
    padding-left: 0;
    cursor: pointer;
  }
  .onboarding-preference-page-left .left-side-content-image{
    display: none;
  }
  .onboarding-preference-page-right{
    padding: 0;
  }
  .onboarding-preference-page-right .preference-page-title {      
      padding-top: 50px;
  }
  .onboarding-preference-page-left {
    position: unset;
    height: unset;
  }
  .preference-dropdown-option-item{
    max-width: unset;
  }
  .onboarding-drawer{
    width: 100%;
  }
  .rightbar-close-button {
    left: 10px;
    top: 13px;    
  }
  .onboarding-drawer-content{
    display: block;
    max-height: unset;
    overflow-y: auto;
  }
  .onboarding-drawer-content .int-livechat-right-container{
    max-height: 300px;
    display: none;
  }
  .onboarding-drawer-left{
    padding-bottom: 0;
    min-width: unset;
  }
  .onboarding-drawer-right{
    padding-top: 0;
    overflow: visible;
    height: unset;
    width: 100%;
  }

}

@media screen and (max-width: 1366px) and (min-width: 1025px) {
  .onboarding-preference-page-right-content{
      max-width: 90%;
  }
}


@media screen and (max-width: 500px) {
  .chat-window-wrapper{
    right: 0;
  }
  .mobile-logo{
    max-width: 85px;
  }
  .revechat-brand-logo {
    padding-left: 24px;
    padding-top: 16px;
  }
  li.dropdown.lang-dropdown {
    right: 24px;
    top: 16px;
    z-index: 5;
  }
  .tab-content #home .row>.col-md-5,
  .tab-content #menu1 .row>.col-md-5,
  .tab-content #menu2 .row>.col-md-5,
  .tab-content #menu3 .row>.col-md-5 {
    padding: 0 24px 50px 24px;
  }
  .chatbot-button-items .chatbot-button-item{
    max-width: unset;
  }
  .box-container.box-frame {
    padding: unset;
  }
  .box-frame .tab-content .desktop-mockup-wrapper {
    background: unset; 
  }
  .chat-window-wrapper.chat-window-outer {
    width: 100%;
  }
  .chat-window-wrapper .chat-main {
    width: 100%;
  }
  .onboarding-preference-page-right {
    padding: 0 24px 400px 24px;
  }
  .onboarding-preference-card {
    width: 100%;
  }

  .onboardingPreferenceDropdown-options {
    left: unset; 
    width: fit-content;
  }
}