[sidebarjs-backdrop], [sidebarjs] {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

[sidebarjs].sidebarjs--left, [sidebarjs].sidebarjs--left [sidebarjs-container] {
  -webkit-transform: translate(-100%, 0);
          transform: translate(-100%, 0); }

[sidebarjs].sidebarjs--right, [sidebarjs].sidebarjs--right [sidebarjs-container] {
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0); }

[sidebarjs].sidebarjs--left [sidebarjs-container] {
  -webkit-box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2); }

[sidebarjs].sidebarjs--right [sidebarjs-container] {
  -webkit-box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
  margin-left: auto; }

[sidebarjs-backdrop] {
  position: absolute;
  background: #000;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  will-change: opacity;
  }

[sidebarjs-container] {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 90%;
  max-width: 504px;
  height: 100%;
  background: white;
  -webkit-transition: -webkit-transform ease 0.3s;
  transition: -webkit-transform ease 0.3s;
  transition: transform ease 0.3s;
  transition: transform ease 0.3s, -webkit-transform ease 0.3s;
  will-change: transform;
  /* height: 100%; */
  }



[sidebarjs] {
  position: fixed;
  z-index: 100002;
  -webkit-transition: -webkit-transform 0s ease 0.3s;
  transition: -webkit-transform 0s ease 0.3s;
  transition: transform 0s ease 0.3s;
  transition: transform 0s ease 0.3s, -webkit-transform 0s ease 0.3s;
  }
  [sidebarjs].sidebarjs--is-visible {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    -webkit-transition: -webkit-transform 0s ease 0s;
    transition: -webkit-transform 0s ease 0s;
    transition: transform 0s ease 0s;
    transition: transform 0s ease 0s, -webkit-transform 0s ease 0s; }
    [sidebarjs].sidebarjs--is-visible [sidebarjs-container] {
      -webkit-transform: translate(0, 0);
              transform: translate(0, 0); }
  [sidebarjs].sidebarjs--is-moving {
    -webkit-transition: none;
    transition: none;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }
    [sidebarjs].sidebarjs--is-moving [sidebarjs-container], [sidebarjs].sidebarjs--is-moving [sidebarjs-backdrop] {
      -webkit-transition: none;
      transition: none; }
      
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

/* Insurance style - START */
.insurance-step-1, .insurance-step-2{
  height: 100%;
}

.sub-header-nav{
  margin-bottom: 15px;
  font-size: 14px;
}

.insurance-step-1 .sub-header-nav a{
  float:right;
}

.sidenav-header{
  padding: 20px 35px;
  /* padding-left: 35px; */
  font-family: "sofia-pro",sans-serif;
}


.sidenav-header .main-header{
  margin-bottom: 5px;
  line-height: 1.19;
  letter-spacing: normal;
  color: #333333;
  max-width: 300px;
  font: 32px 'sofia-pro-extra-light', Verdana, Arial, sans-serif;
}

.sidenav-header .main-header-desc{
  margin-bottom: 10px;
  max-width: 375px;
  font: 16px 'sofia-pro-extra-light', Verdana, Arial, sans-serif;
}

.sub-header-nav .close-icon{
  content: '>';
  margin-left: 5px;
  font-size: 15px;
  background-image: image-set(url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202005-lenspanel/xclose.png") 1x,
                    url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202005-lenspanel/xclose@2x.png") 2x,
                    url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202005-lenspanel/xclose@3x.png") 3x);
  background-image: -webkit-image-set(url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202005-lenspanel/xclose.png") 1x,
                    url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202005-lenspanel/xclose@2x.png") 2x,
                    url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202005-lenspanel/xclose@3x.png") 3x);
  background-repeat: no-repeat;
  width: 15px;
  height: 15px;
  object-fit: contain;
  background-size: contain;
}

.sidenav-body{
  padding: 20px 35px;
  /* height: 320px; */
  background-color: white;
}

.sidenav-body .plan-info{
  /* height: 240px; */
  margin-bottom: 8px;
}

.sidenav-body .plan-info .tabs-navigation{
  margin-bottom: 20px;
}

.sidenav-body .plan-info .tabs-navigation a, .sidenav-body .plan-info .tabs-navigation p{
  display: inline-block;
}

.sidenav-body .plan-info .tabs-navigation a{
  color: black;
  /* outline : none; */
  font: 14px 'sofia-pro-extra-light', Verdana, Arial, sans-serif;
}

.sidenav-body .plan-info .tabs-navigation p{
  font-family: "sofia-pro",sans-serif;
  font-size: 14px;
  margin: 0 10px;
}

.sidenav-body .plan-info .tabs-navigation a.selected{
  border-bottom: 1px solid black;
  font-weight: 900;
  padding-bottom: 3px;
  font: 14px 'sofia-pro-semibold', Verdana, Arial, sans-serif;
}

.sidenav-body .plan-info form input[type=text]{
  padding-left: 5px;
  font-family: FuturaBQBook;
  width: 266px;
  height: 30px;
  border-radius: 2px;
  background-color: #f2f2f2;
}
.sidenav-body .plan-info form input[type=text]:focus{
  outline: -webkit-focus-ring-color auto 1px;
}

.sidenav-body .plan-info form .firstname-input input, .sidenav-body .plan-info form .lastname-input input{
    width: 266px;
}

.sidenav-body .plan-info form .dob-input input, .sidenav-body .plan-info form .zipcode-input input{
    width: 125px;
}

.sidenav-body .plan-info form .firstname-input span, 
.sidenav-body .plan-info form .lastname-input span,
.sidenav-body .plan-info form span{
   font: 12px 'sofia-pro', Verdana, Arial, sans-serif;
   width: 100%;
   display:block;
   height: 30px;
   margin-top: -5px;
   color: red;
}

.sidenav-body .plan-info form .firstname-input,
.sidenav-body .plan-info form .lastname-input,
.sidenav-body .plan-info form .dob-input,
.sidenav-body .plan-info form .zipcode-input{
  height: 60px;
  font-family: FuturaBQLight;
} 

.sidenav-body .plan-info form .dob-input,
.sidenav-body .plan-info form .zipcode-input{
  width: 120px;
  display: inline-block;
  margin-right: 14px;
}

.sidenav-body .plan-info form .firstname-input label,  
.sidenav-body .plan-info form .lastname-input label,
.sidenav-body .plan-info form .dob-input label,
.sidenav-body .plan-info form .zipcode-input label{
  font: 12px 'sofia-pro', Verdana, Arial, sans-serif;
  width:100%;
  display: block;
  font-weight: unset;
  color: #333333;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}

.sidenav-body .submit-plan-info button{
  background-color:#326FA8;
  color: white;
  padding: 6px 36px;
  font: 15px 'sofia-pro-medium', Verdana, Arial, sans-serif;
  border: 0;
  border-radius: 17.5px;
}

.sidenav-body .submit-plan-info button:hover, .sidenav-body .submit-plan-info button:focus{
  text-decoration: underline;
  background-color: #4589c8;
}

.sidenav-body .submit-plan-info button:disabled {
    background-color: gray;
    text-decoration: none;
    cursor: context-menu;
}

.sidenav-body .submit-plan-info .age-check {
  display: flex;
}
.sidenav-body .submit-plan-info .age-check label{
  font: 14px 'sofia-pro-light', Verdana, Arial, sans-serif;
  margin:22px 0;
}

.lc-control .lc-control__indicator {
  border-radius: 3px;
  border: solid 1px #999999;

}

.sidenav-footer{
  margin: 0 35px;
   
}

.insurance-step-1 .sidenav-header .insurance-providers div{
  height:40px;
  display:inline-block;
}

.insurance-step-1 label.control-checkbox{
  font-size: 14px;
  font-family: "sofia-pro",sans-serif;
  font-weight: unset;
}

.insurance-step-1 .sidenav-header .insurance-providers div img{
  height:35px;
  width: 60px;
}

.insurance-step-1 .sidenav-header .insurance-providers img{
   background-image: image-set(url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202009-rxc/insurance-providers.png") 1x,
                    url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202009-rxc/insurance-providers@2x.png") 2x,
                    url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202009-rxc/insurance-providers@3x.png") 3x);
  background-image: -webkit-image-set(url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202009-rxc/insurance-providers.png") 1x,
                    url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202009-rxc/insurance-providers@2x.png") 2x,
                    url("https://assets.lenscrafters.com/extra/image/LensCrafters/projects/202009-rxc/insurance-providers@3x.png") 3x);
    background-repeat: no-repeat;
  width: 100%;
  height: 27px;
  object-fit: contain;
  background-size: contain;
  overflow: hidden;
  margin:20px 0 30px 0 ;
}


.insurance-step-2, .insurance-step-2 .sidenav-body, .insurance-step-2 .sidenav-footer{
  background-color: #F2F2F2;
}

.insurance-step-2 .sidenav-body, .insurance-step-3 .sidenav-body{
  height: 250px;
  padding-top: 100px;
}

.insurance-step-2 .site-spinner {
  position: relative;
  left: 50%;
  width: 40px;
  height: 40px;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.insurance-step-2 .site-spinner i {
  font-size: 42px;
}

.insurance-step-2 .loader-message{
  text-align:center;
}

.insurance-step-2 .loader-message label{
  font-family: "sofia-pro",sans-serif;
  text-align:center;
  font-size: 18px;
}

.insurance-step-2 .loader-message p, 
.insurance-step-3 .loader-message p,
.insurance-step-4 .loader-message p,
.insurance-step-5 .loader-message p{
  margin-top: 5px;
  font-size: 14px;
  font-family: "sofia-pro",sans-serif;
}

.insurance-step-2 .sidenav-footer{
  padding: 25px;
  font-family: "sofia-pro",sans-serif;
  font-size: 13px;
  text-align:center;
}

.insurance-step-3 .alert-icon,
.insurance-step-5 .alert-icon{
  text-align: center;
  width:100%;
  margin-bottom: 15px;
}

.insurance-step-3 .alert-icon img,
.insurance-step-5 .alert-icon img{
  width: 50px;
}

.insurance-step-3 .loader-message,
.insurance-step-4 .loader-message,
.insurance-step-5 .loader-message{
   text-align: center;
}

.insurance-step-3 .loader-message label,
.insurance-step-4 .loader-message label,
.insurance-step-5 .loader-message label{
  font-family: "sofia-pro",sans-serif;
  font-size: 18px;
}

.insurance-step-3 .sidenav-body .check-again{
  text-align: center;
  margin-top: 30px;
}

.insurance-step-3 .sidenav-body .check-again a,
.insurance-step-3 .sidenav-body .check-again p{
  display: inline-block;
}

.insurance-step-3 .sidenav-body .check-again a:first-child{
    background-color: #326FA8;
    color: white;
    padding: 7px 20px;
    font-size: 14px;
    font-weight: unset;
    font-family: "sofia-pro",sans-serif;
}

.insurance-step-3 .sidenav-body .check-again p{
  font-family: "sofia-pro",sans-serif;
  margin: 0 10px;
}

.insurance-step-3 .sidenav-body .check-again a:nth-child(3){
  font-family: "sofia-pro",sans-serif;
  font-size: 16px;
  text-decoration: underline;
}

.insurance-step-3 .sidenav-footer{
  border: 0;
}

.insurance-step-3 .sidenav-footer .main-message {
  text-align: center;
  font-family: "sofia-pro",sans-serif;
  margin-bottom: 20px;
}

.insurance-step-3 .sidenav-footer .split-section,
.insurance-step-5 .sidenav-footer .split-section{
   font-family: "sofia-pro",sans-serif;
   font-size: 14px;
}

.insurance-step-3 .sidenav-footer .split-section a,
.insurance-step-5 .sidenav-footer .split-section a{
  text-decoration: underline;
}

.insurance-step-3 .sidenav-footer .split-section .left,
.insurance-step-5 .sidenav-footer .split-section .left{
  float: left;
  width: 50%;
  border-right: 1px solid #E6E6E6;
  padding-right: 20px;
}
.insurance-step-3 .sidenav-footer .split-section .left a,
.insurance-step-5 .sidenav-footer .split-section .left a{
  font-family: "sofia-pro",sans-serif;
}

.insurance-step-3 .sidenav-footer .split-section .right,
.insurance-step-5 .sidenav-footer .split-section .right{
  float: right;
  width: 45%;
}

.insurance-step-4 .sub-header-nav a:nth-child(2){
  float: right;
  font-family: "sofia-pro",sans-serif;
  font-size: 14px;
  text-decoration: underline;
  outline: none;
}

.insurance-step-4 .sub-header-nav a:nth-child(2):hover{
  font-weight: 900;
}

.insurance-step-4 .sidenav-body{
  margin-top: 45px
}

.insurance-step-4 .sidenav-body .eligibility-list{
  margin-top: 15px;
  text-align:center;
  font-family: "sofia-pro",sans-serif;
  width: 350px;
  margin: 0 auto;
  margin-top: 30px;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item{
  display: table;
  width:100%;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item div{
  display:table-cell;
  /* min-width: 59px; */
  width: 140px;
  height: 40px;
  vertical-align: middle;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item div:first-child{
   width: 70px;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item img {
  width: 60px;
  height: 30px;
  overflow: hidden;
  vertical-align: middle;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item.frames img{
   background: url('../../../images/sprites/ria-benefit-sprite.png') 0px 0px;
   background-size: 100%;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item.lenses img{
   background: url('../../../images/sprites/ria-benefit-sprite.png') 0px -50px;
   background-size: 100%;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item.contacts img{
   background: url('../../../images/sprites/ria-benefit-sprite.png') 0px 35px;
   background-size: 100%;
   /* text-align: right; */
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item p{
  font-size: 14px;
  font-family: "sofia-pro",sans-serif;
  font-weight: 900;
  color: #308757;
  text-align: left;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item p:before{
  content: '✔';
  font-size: 13px;
  margin-right: 5px;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item.unavailable p{
   color: #8C8C8C;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item.unavailable p:before{
   content: 'X';
   font-size: 13px;
   margin-right: 8px;
}

.insurance-step-4 .sidenav-body .eligibility-list .eligible-item label{
  float: left;
}

.insurance-step-1 .sidenav-footer,
.insurance-step-2 .sidenav-footer,
.insurance-step-4 .sidenav-footer{
  text-align: center;
  padding-top: 20px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.insurance-step-3 .sidenav-footer,
.insurance-step-5 .sidenav-footer{
  text-align: center;
  border: 0;
  margin-top: 60px;
  margin-bottom: 30px;
}

.insurance-step-1 .sidenav-footer .main-message,
.insurance-step-3 .sidenav-footer .main-message,
.insurance-step-3 .sidenav-footer .sub-message,
.insurance-step-4 .sidenav-footer .main-message,
.insurance-step-4 .sidenav-footer .sub-message,
.insurance-step-5 .sidenav-footer .main-message,
.insurance-step-5 .sidenav-footer .sub-message{
  font-family: "sofia-pro",sans-serif;
  margin-bottom: 10px;
  font-size: 15px;
}

.insurance-step-4 .sidenav-footer .sub-message a,
.insurance-step-5 .sidenav-footer .sub-message a{
   font-size: 15px;
   color: black;
   text-decoration: underline;
}

.insurance-step-4 .sidenav-footer .sub-message a:hover{
  font-weight: bold;
}

.insurance-step-5 .loader-message p label{
  font-family: "sofia-pro",sans-serif;
  font-size: 14px;
}

input::-webkit-calendar-picker-indicator{
    display: none;
}

input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type="date"]::-webkit-input-placeholder{ 
    visibility: hidden !important;
}

.sidenav-body .plan-info form input.ng-invalid.ng-touched{
  border: solid 1px red !important;
}

.age-check-error{
    font-family: "sofia-pro",sans-serif;
    font-size: 14px;
    width: 100%;
    display: block;
    height: 30px;
    margin-top: 5px;
    color: red;
    margin-bottom: 10px;
}

.sidenav-header .discover-more{
  font: 13px 'sofia-pro-medium', Verdana, Arial, sans-serif;
  line-height: 1.38;
  letter-spacing: normal;
  text-align: center;
  color: #326fa8;
  text-decoration:underline;
}



/* Mobile - Start */

.mobile [sidebarjs-container]{
   width: 100%;
}

[sidebarjs].mobile {
  z-index:100001;
}

.mobile #InsuranceStepsDiv{
  height:100%;
}
.mobile .sub-header-nav,.mobile .sidenav-body .plan-info .tabs-navigation{
  margin-bottom:30px;
}

.mobile .sub-header-nav,.mobile .sidenav-body .plan-info .tabs-navigation a{
  font: 13px 'sofia-pro-extra-light', Verdana, Arial, sans-serif;
}


.mobile .sub-header-nav a{
  float: left;
  font-family: "sofia-pro",sans-serif;
  font-size: 13px;
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #333333;
}

.mobile .sub-header-nav:before{
  content: '<';
  float:left;
  font-size: 13px;
  padding-right:5px;
  font-family:FuturaBqLight;
  line-height:1.5;
}

.mobile .sidenav-header .main-header{
  margin-bottom: 5px;
  line-height: 1.25;
  max-width:220px;
  font: 24px 'sofia-pro-extra-light', Verdana, Arial, sans-serif;
}

.mobile .sidenav-header .main-header-desc{
  font: 13px 'sofia-pro-extra-light', Verdana, Arial, sans-serif;
}

.mobile .sidenav-body .tabs-title{
  font: 16px 'sofia-pro-semibold', Verdana, Arial, sans-serif;
  line-height: normal;
  letter-spacing: 0.57px;
  color: #333333;
  margin-bottom:25px
}
.mobile .sidenav-body .plan-info form label, .mobile .insurance-step-3 .sidenav-body .check-again a:nth-child(3){
  margin-top:10px
}

.mobile .sidenav-body .submit-plan-info .age-check {
  margin:30px 0 25px 0;
}
.mobile .sidenav-body .submit-plan-info button{
  font: 14px 'sofia-pro-medium', Verdana, Arial, sans-serif;
  padding: 6px 19px;
  max-width: 171px;
  max-height: 35px;
  text-transform : unset;
}
.mobile .sidenav-body .plan-info form span{
  margin-top:5px
}
.mobile .sidenav-body .plan-info form span.age-check-error{
  margin:-35px 0 50px 0 
}
.mobile .sidenav-body .plan-info form .dob-zip-container span{
  margin-top:20px
}
.mobile .insurance-step-3 .sidenav-footer{
  margin-top:100px;
}
.mobile .insurance-step-4 .sidenav-body .eligibility-list{
  width:100%;
}
.mobile .sidenav-body .plan-info .tabs-navigation a.selected{
  border-bottom:0px;
  font: 13px 'sofia-pro-semibold', Verdana, Arial, sans-serif;
}

/* Mobile - End */

/* Insurance style - END */
