#planity{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(255,255,255,0.9); backdrop-filter:blur(5px); z-index:10000; padding:20px; overflow:scroll;}
#planity.on{display:block;}

.planity__close{font-size:100%; color:var(--blue-dark-color); display:block; margin-bottom:30px; text-align:right; cursor:pointer;}

.planity-component-button{background-color:transparent !important; color:var(--blue-dark-color) !important; border:1px solid var(--blue-dark-color) !important;}
.planity-component-button.planity-nav-button-active{background-color:var(--blue-dark-color) !important; color:var(--white) !important;}

.planity_bookappointment-button-choose{background-color:var(--blue-dark-color) !important;}

.planity_ui_showMoreservices{color:var(--blue-dark-color) !important;}

.planity-btn{
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--blue-mid-color);
  color: var(--blue-dark-color);
  border-radius: 10px;
  transition: color 0s ease-out;
}

.planity-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--blue-dark-color);
  transition: all 0.4s ease-out;
  z-index: 0;
}

.planity-btn:hover::after {
  left: 0;
}

.planity-btn a, .planity-btn a:visited {
  color: var(--blue-dark-color);
  padding: 8px;
  display: block;
}

.planity-btn a:hover {
  color: var(--white) !important;
}


#login-comp__submit{background-color: var(--blue-dark-color); border:1px solid var(--blue-dark-color);}
#login-comp__submit:hover{background-color:transparent; color:var(--blue-dark-color);}
#login-comp__memberBtn:hover{background-color:var(--blue-dark-color);}

@media all and (max-width:767px){
    .planity-widget-nav button{width:100% !important;}
}