@import url(https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap);
@import url(https://pro.fontawesome.com/releases/v5.10.0/css/all.css);
@import url(https://unicons.iconscout.com/release/v4.0.0/css/line.css);
* {
    margin: 0;
    padding: 0;
    outline: none !important;
    font-family: 'Open Sans', sans-serif;
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
}


/* width */
::-webkit-scrollbar {
    width: 0.521vw;
}
::-webkit-scrollbar-track {
    background: #9fd2c3;
}
::-webkit-scrollbar-thumb {
    background: #130752;
}
::-webkit-scrollbar-thumb:hover {
    background: #129c79;
}

/* width */
.customInputDesign::-webkit-scrollbar,
.appointTabFix::-webkit-scrollbar {
    width: 0px;
}



ul, li {
    list-style:none;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, span, p, ul {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    background: transparent;
}

a, input[type="submit"], input[type="button"], .btn, button {
    transition: all 0.4s ease-in-out;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

input[type="button"]:focus, input[type="text"]:focus, select:focus {
    box-shadow: none;
    outline: none;
}
audio, canvas, progress, video {
    vertical-align: middle;
}
a:focus{text-decoration: none}

body {
    /*background: #b6e6d8;*/
}
[data-aos='rotate-round'] {
transform: rotate(-360deg);
transition-property: transform;
}
[data-aos='rotate-round'].aos-animate {
transform: rotate(0deg);
}

/********************/
/* .customButton {
  
} */
/* .customButton:hover {
  color: rgb(38, 145, 74) !important;
  background-color: rgb(255, 255, 255) !important;
} */
.displayNone {
    display: none !important;
}
.displayInlineBlock {
    display: inline-block !important;
}
.customButton {
    text-align: center;
    cursor: pointer;
    transition: all 0.5s;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.375;
    padding: 10px 25px;
    position: relative;
}
.customButton span {
    position: relative;
    color: rgb(255, 255, 255) !important;
    z-index: 1;
    display: inline-flex;
    align-items: center;
}
.customButton::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgb(38, 145, 74);
    border: 1px solid rgb(38, 145, 74);
    border-radius: 10px;
    transition: all 0.3s;
  }
  .customButton:hover::before {
    opacity: 0;
    transform: scale(0.5,0.5);
  }
  .customButton::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    transition: all 0.3s;
    border: 1px solid rgb(38, 145, 74);
    transform: scale(1.04,1.04);
    background:#fff;
    border-radius: 10px
  }
.customButton:hover span {
  color: rgb(38, 145, 74) !important;
  position: relative;
  z-index: 2;
}
.customButton:hover::after {
opacity: 1;
transform: scale(1,1);
}
.customButtonWhite::before {
    background-color: #fff;
    border: 1px solid rgb(255, 255, 255) !important;
}

.customButtonWhite span {
    color: rgb(38, 145, 74) !important;
}
.customButtonWhite:hover span {
    color: rgb(255, 255, 255) !important;
}
.customButtonWhite::after {
    background: rgb(38, 145, 74) !important;
    border: 1px solid rgb(255, 255, 255) !important;
}
.customButton i {
    margin-right: 5px;
    transition: none;
}

.topHeader {
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.17);
  background: #fff;
}
.stickyHeader {
    position: fixed;
    top: 0;
    background: #fff !important;
    z-index: 9;
    width: 100%;
}
.indexHeader {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent !important;
    width: 100%;
    box-shadow: none !important;
    z-index: 1;
}

.headerInner {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.homeLogo {
    display: inline-block;
}
.homeLogo img {
    width: 65px;
}
.rightButtonDiv .customButton {
    margin-left: 10px;
}
.myAccountDiv {
    display: none;
}
.myAccountBtn {
    display: inline-flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px !important;
    color: #202020 !important;
    text-transform: uppercase;
}
.myAccountBtn span {
    width: 30px;
    height: 30px;
    background: #26914a;
    border-radius: 50px;
    margin-right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 500;
    font-size: 20px !important;
    padding-bottom: 2px;
}

.bannerDiv {
    display: inline-block;
    width: 100%;
    background-image: url(/images/banner-bg.png?89e5cf0…);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 115px 0 35px;
    margin-bottom: 50px;
}
.catImage {
    display: inline-block;
    width: 100%;
    position: relative;
    text-align: center;
}
.catImage img {
    display: inline-block;
    width: 100%;
    position: relative;
    z-index: 2;
    max-width: 300px;
}
.catImage svg {
    display: inline-block;
    width: 100%;
    height: 540px;
    width: 540px;
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.bannerContent {
    display: inline-block;
    width: 100%;
}
.fewClickTag {
    color: #fff;
    background: #1e1e1e;
    display: inline-block;
    padding: 1px 15px;
    font-size: 18px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-transform: uppercase;
}
.bannerContent h1 {
  font-size: 42px;
  color: rgb(0, 30, 10);
  font-weight: 400;
  line-height: 55px;
  margin: 10px 0;
  padding-left: 20px;
  border-left: 6px solid #26914a;
}
.bannerContent h1 strong {
    font-weight: bold;
}
.bannerContent h2 {
    font-size: 22px;
    color: #000000;
    font-weight: 400;
}
.typed-text,
.bannerContent h2 span {
    color: #26914a;
    text-decoration: underline;
}
.searchMainDiv {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-top: 15px;
    z-index: 2;
}
.searchDiv {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    background: #26914a;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px 30px;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2);
}
.width60 {
    display: inline-block;
    width: calc(60% - 75px);
}
.withSearchOption {
    position: relative;
}
.clearSearchIcon {
    position: absolute;
    top: -7px;
    right: -9px;
    display: none;
}
.withSearchOption:focus-within .clearSearchIcon {
    display: block;
}
span.searchTags {
    font-size: 13px;
    color: #726868;
}
.clearSearchIcon img {
    width: 35px;
    height: 35px;
}
span.inputError {
    font-size: 12px;
    line-height: 12px;
    color: red;
}
.clearFilterBtn {
    background: #26914a;
    padding: 8px;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.clearFilterBtn img {
    width: 100%;
}
    /*.withSearchOption input:focus + .searchOptions {
    display: inline-block;
}*/
.searchOptions {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border-radius: 10px;
    width: 100%;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.searchOptions ul {
    display: inline-block;
    width: 100%;
    padding: 0px !important;
}
.searchOptions ul li {
    display: inline-block;
    width: 100%;
    font-weight: 500;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.searchOptions ul li:first-child {
    border-top: none;
}
.searchOptions ul li a {
    display: inline-block;
    width: 100%;
    padding: 8px 10px;
    color: #202020;
}
.width40 {
    display: inline-block;
    width: calc(40% - 75px);
}
.searchDiv .customButton {
    color: #26914a !important;
    background: #fff !important;
    border: 1px solid #fff !important;
    display: inline-block;
    padding: 10px 11px;
}
.searchDiv .customButton:hover {
  color: #fff !important;
  background-color: transparent !important;
}
.searchDiv .form-group {
    margin: 0px !important;
}
.withIcon {
    position: relative;
}
.withIcon input {
    padding-right: 35px !important;
}
.withIcon img {
    position: absolute;
    top: 12px;
    right: 15px;
}
.searchDiv .form-control {
    padding: 10.5px 15px;
    font-size: 14px;
    color: #202020;
    height: auto !important;
    border-radius: 10px;
    width: 100%;
    background: #fff;
}



.joiningPlanipetsSec {
    padding: 60px 0;
    display: inline-block;
    width: 100%;
    text-align: center;
}
.headingMainDiv {
    display: inline-block;
    width: 100%;
}
.headingMainDiv h2 {
  font-size: 44px;
  color: rgb(0, 0, 0);
  font-weight: bold;
  line-height: 1.091;
  margin-bottom: 10px;
}
.headingMainDiv h2 span {
    color: #26914a;
}
.fullWidth {
    display: inline-block;
    width: 100%;
}
.headingMainDiv h3 {
  font-size: 29px;
  color: rgb(43, 43, 43);
  font-weight: 600;
  line-height: 1.414;
  margin-bottom: 10px;
}
.headingMainDiv p {
    font-size: 16px;
    color: rgb(51, 51, 51);
    line-height: 22px;
    display: inline-block;
    width: 100%;
}
.joiningPlanipetsSec .headingMainDiv p {
    max-width: 720px;
}

.joiningPlanipetsSec .joiningSubHeading {
    font-size: 25px;
    color: rgb(0, 0, 0);
    font-weight: bold;
    line-height: 1.64;
    margin-top: 15px;
    margin-bottom: 10px;
}
.imageWithHeading {
    position: relative;
    width: 100%;
    display: inline-block;
}
.imageWithHeading img {
    position: relative;
    width: 100%;
    display: inline-block;
    border-radius: 15px;
}
.imageWithHeading a {
    font-size: 21px;
    color: rgb(255, 255, 255) !important;
    font-weight: bold;
    line-height: 1.952;
    padding: 10px 15px;
    width: calc(100% - 20px);
    display: inline-block;
    margin: 10px !important;
    /* position: absolute; */
    bottom: 0px;
    left: 0;
}
/* .imageWithHeading a {
    font-size: 21px;
    color: rgb(255, 255, 255) !important;
    font-weight: bold;
    line-height: 1.952;
    background: #26914a;
    padding: 10px 15px;
    width: calc(100% - 20px);
    margin: 10px !important;
    border-radius:10px;
    position: absolute;
    bottom: 0px;
    left: 0;
}
.imageWithHeading a:hover {
    background: #202020;
    border-radius: 10px;
} */
/*.imageWithHeading a span {
    opacity: 0;
    position: relative;
    width: 0px;
    left: -5px;
}*/
/*.imageWithHeading a:hover span {
    opacity: 1;
    position: relative;
    width: 15px;
    left: 0px;
}*/

.petTagSection {
    display: inline-block;
    width: 100%;
    background-image: url(/images/section-bg.png?90a39b5ebff646b809d680fa75f1afef);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 60px 0;
}
.petTagSingle {
    display: inline-block;
    width: 100%;
}
.petTagSingle h3 {
    display: inline-block;
    width: 100%;
    font-size: 18px;
    font-family: "Open Sans";
    color: rgb(255, 255, 255) !important;
    line-height: 1.556;
    margin: 15px 0 0 !important;
}

.getInTouchSec {
    display: inline-block;
    width: 100%;
    padding: 60px 0;
}
.getInTouchImage {
    display: inline-block;
    width: 100%;
}
.getInTouchImage img {
    display: inline-block;
    width: 100%;
}
.getInTouchContent {
    display: inline-block;
    width: 100%;
    text-align: left;
}
.tags {
    display: inline-block;
    min-width: calc(100% + 6px);
    margin-left: -8px;
    margin-right: -5px;
    padding: 0px !important;
}
.tags li {
    display: inline-flex;
    width: calc(50% - 6px);
    margin: 3px;
    align-items: center;
    padding: 12px;
    background: #26914a;
    border-radius: 10px;
    float: left;
    /* cursor: pointer; */
}
.tags li a, .tags li h3 {
    display: inline-flex;
    width: 100%;
    align-items: center;
    font-size: 15px;
    color: rgb(255, 255, 255);
    font-weight: 600;
    line-height: 1.7;
}
.tags li img {
    display: inline-block;
    margin-right: 4px;
    max-width: 15px;
}


/***********************/
.callToActionSec {
    display: inline-block;
    width: 100%;
    padding: 70px 0;
    background-image: url(/images/section-bg-02.png?84872d71a2e6f9b44ec78d2e2e14f6f9);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    text-align: center;
}
.callToActionSec h2 {
    display: inline-block;
    width: 100%;
    font-size: 36px;
    color: rgb(255, 255, 255);
    font-weight: 500;
    line-height: 1.25;
}
.callToActionSec .customButton {
    padding: 15px 35px;
    /* background: #fff !important;
    color: #26914a !important; */
    font-size: 32px;
    margin-top: 20px;
    display: inline-block;
    font-weight: 600;
    /* border:  1px solid #fff; */
}
/* .callToActionSec .customButton:hover {
  color: #fff !important;
  background-color: transparent !important;
} */
.bookAppointmentSec {
    display: inline-block;
    width: 100%;
    padding: 60px 0;
}
.bookAppointmentSec .headingMainDiv {
    text-align: center;
}
.bookAppointmentSec .headingMainDiv p {
    max-width: 700px;
}
.singleAppointmentDiv {
    display: inline-block;
    width: 100%;
    padding: 70px 15px;
    border-radius: 50px;
    background-color: rgb(255, 255, 255);
}
.singleAppointmentDiv.active,
.singleAppointmentDiv:hover {
    box-shadow: 3px 5.196px 15px 0px rgba(0, 0, 0, 0.04);
}
.singleAppointmentDiv h3 {
    font-size: 28px;
    color: rgb(1, 86, 30);
    font-weight: bold;
    line-height: 1.071;
    margin: 15px 0;
}
.singleAppointmentDiv p {
    font-size: 16px;
    color: rgb(63, 63, 63);
    line-height: 1.563;
    text-align: left;
}
.catBg {
    background-image: url(/images/section-bg-03.png?92d75caf67ad5d0e788eb7ba5ac67aaa);
}
.getIntouchSteps {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 60px 16px 30px;
    border-style: solid;
    border-width: 1px;
    border-color: rgb(222, 222, 222);
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    position: relative;
}
.getIntouchSteps:hover .getInIcon {
    transform: rotate(360deg);
}
.getInIcon {
    position: absolute;
    top: -50px;
    left: 20px;
    padding: 20px;
    border-radius: 50%;
    display: inline-block;
    border:  1px solid rgb(222, 222, 222);
    background: #f5fff9;
}
.getIntouchSteps h3 {
    font-size: 25px;
    font-family: "Open Sans";
    color: rgb(1, 86, 30);
    font-weight: 600;
    line-height: 30px;
}
.getIntouchSteps p {
  font-size: 16px;
  color: rgb(63, 63, 63);
  line-height: 1.563;
}
.marTop100 {
    margin-top: 100px !important;
}
.getIntouchSteps:hover {
  box-shadow: 3px 5.196px 15px 0px rgba(0, 0, 0, 0.04);
}
.actionBUtton {
    display: inline-block;
    width: 100%;
    margin-top: 40px;
    text-align: center;
}
.actionBUtton .customButton {
    padding: 15px 35px;
    font-size: 22px;
}

.footerDiv {
 background: #333;
 padding: 30px 0;   
}
.footerAbout {
    display: inline-block;
    width: 100%;
}
.footerAbout p {
  font-size: 16px;
  color: rgb(255, 255, 255);
  line-height: 1.563;
  text-align: left;
  font-weight: 400;
  margin-top: 20px;
}
.footerAbout ul {
    padding: 0px !important;
    display: inline-block;
    width: 100%;
}
.footerAbout ul li {
    padding: 0px;
    display: inline-block;
    margin-right: 10px;
}
.footerAbout ul li a {
    padding: 10px;
    display: inline-block;
    background: #fff;
    border-radius: 50% !important;
}
.footerAbout ul li a:hover {
    transform: scale(1.05);
}
.footerMenu {
    display: inline-block;
    width: 100%;
}
.marBotm20 {
    margin-bottom: 20px;
}
.footerMenu h4 {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
}
.footerMenu ul {
    display: inline-block;
    width: 100%;
    padding: 0 !important;
}
.footerMenu ul li {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
}
.footerMenu ul li a {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    padding-left: 15px;
    background-image: url(/images/menu-icon.png?8a77be456bee134ef000f96ef716bc3f);
    background-repeat: no-repeat;
    background-size: 6px 10px;
    background-position: 0 8px;
    position: relative;
    left: 0;
}
.footerMenu ul li a:hover {
    left: 5px;
}

.loginRegisterForm {
    display: inline-block;
    width: 100%;
    padding: 40px 0;
    background: #f4f9fc;
}
.loginRegisterInnerDiv {
    display: inline-flex;
    width: calc(100% - 80px);
    border-radius: 15px;
    margin: 0 40px;
    overflow: hidden;
    box-shadow: -1.414px 1.414px 10px 0px rgba(0, 0, 0, 0.1);
}
.leftPannel {
    display: inline-flex;
    width: 40%;
    justify-content: center;
    align-items: center;
    background-image: url(/images/login-bg.png?02ab305d0673b876803c6b67ca51aaf6);
    background-repeat: no-repeat;
    background-size: cover;
}
.leftPannelContent {
    display: inline-block;
    width: 100%;
    padding: 15px 25px;
}
.leftPannelContent h2 {
    font-size: 31px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    line-height: 1;
    position: relative;
    padding-bottom: 20px;
}
.leftPannelContent p {
  font-size: 19px;
  font-family: "Open Sans";
  color: rgb(255, 255, 255);
  line-height: 22px;
  margin: 30px 0 !important;
  display: inline-block;
  width: 100%;
}
.leftPannelContent .customButton {
    width: 100% !important;
    display: inline-block;
    text-align: center;
    border:  1px solid #fff !important;
    color: #fff !important;
}
.leftPannelContent h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    height: 2px;
    width: 150px;
    background: #fff;
}
.rightPannel {
    display: inline-block;
    width: 60%;
    padding: 40px;
    background: #fff;
}
.rightPannel h2 {
    font-size: 31px;
    color: rgb(38, 145, 74);
    font-weight: bold;
    line-height: 1;
    margin-bottom: 35px;
}
.customInputDesign label {
  font-size: 16px;
  color: rgb(51, 51, 51);
  font-weight: bold;
  line-height: 1.313;
  display: inline-block;
  width: 100%;
}
.customInputDesign.form-group {
    margin-bottom: 10px;
}
.customInputDesign .form-control {
    border:  1px solid #6e6e6e !important;
    background: #f5fbff !important;
    height: auto;
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: none !important;
    width: 100%;
}
.bookAppointmentDiv .stepperDiv.active .form-control {
    border:  1px solid #33a455 !important;
}

.customInputDesign .form-control.customPhoneInput {
    padding: 6px 15px;
}
.customInputDesign select.form-control {
    -webkit-appearance: none !important;
   -moz-appearance: none !important;
   appearance: none !important;
   padding-right: 30px !important;
   background-image: url(/images/select-arrow.png?86cbb391d09b615cda2fc91406c7c94e) !important;
   background-size: auto !important;
   background-position: center right !important;
   background-repeat: no-repeat !important;
}
.formgetPass {
    display: inline-block;
    width: 100%;
    text-align: right;
}
.formgetPass a {
    font-size: 15px;
    color: #3182c1;
    font-weight: bold;
    line-height: 1.4;
}
.rightPannel .customButton {
    width: 100% !important;
    display: inline-block;
    text-align: center;
    margin-top: 15px;
}
.orText {
    display: inline-block;
    width: 100%;
    position: relative;
    text-align: center;
    margin: 10px 0 20px;
}
.orText::after {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
}
.orText span {
    display: inline-block;
    background: #fff;
    padding: 2px 10px;
    position: relative;
    z-index: 2;
}
.socialMedia {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0 !important;
}
.socialMedia li {
    display: inline-block;
    text-align: center;
    margin: 0 5px;
}
.socialMedia li a {
    display: inline-block;
    transition: all 0.5s ease 0s;
}
.socialMedia li a:hover {
    transform: scale(1.1);
}
    .nameFormGroup {
    display: inline-flex;
    min-width: calc(100% + 20px);
    margin-left: -10px;
}
.width50 {
    float: left;
    width: 50%;
    margin-left: 8px;
    margin-right: 8px;
}


/******/
.appointmentSection {
    display: inline-block;
    width: 100%;
    padding: 50px 0;
    background: #f4f9fc;
}
.appointmentSection h2 {
    font-size: 28px;
    color: rgb(70, 70, 70);
    font-weight: 600;
    line-height: 0.75;
}
.singleAppointment {
    display: inline-flex;
    width: 100%;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.17);
    padding: 10px;
    margin-top: 30px;
}
.appointmentImage {
    display: inline-block;
    width: 185px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    margin-right: 15px;
}
.appointmentImage .mainImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
.appointmentImage .placeholderImage {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
.appointmentContent {
    position: relative;
    padding-bottom: 95px;
    display: inline-block;
    width: calc(100% - 185px);
}
.apoointmentDetail {
    display: inline-block;
    width: 100%;
    position: relative;
    padding-right: 120px;
}
.apoointmentDetail h3 {
  font-size: 24px;
  color: rgb(51, 51, 51);
  font-weight: bold;
  line-height: 0.875;
  margin-top: 5px;
  margin-bottom: 10px;
}
.apoointmentDetail p {
    font-size: 16px;
    color: #202020;
    line-height: 1.125;
    text-align: left;
    padding-left: 20px;
    position: relative;
    margin-bottom: 10px !important;
}
.apoointmentDetail p img {
    position: absolute;
    left: 0;
    top: 0px;
}
.dateDetail {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 120px;
}
.dateDetail h6 {
  font-size: 17px;
  color: rgb(38, 145, 74);
  line-height: 18px;
  text-align: right;
  display: inline-block;
  width: 100%;
}
.dateDetail h5 {
  font-size: 30px;
  color: rgb(51, 51, 51);
  font-weight: 500;
  line-height: 0.583;
  display: inline-block;
  width: 100%;
  text-align: right;
  margin-top: 10px;
}
.appointmentTyoe {
    display: inline-block;
    width: 100%;
}
.appointmentTyoe h5 {
    font-size: 18px;
    color: #202020;
    line-height: 1.125;
    text-align: left;
    font-weight: 500;
    margin-bottom: 6px;
}
.appointmentTyoe h6 {
    border-radius: 6px;
    background-color: rgb(255 255 255);
    border: 1px solid rgb(38, 145, 74);
    font-size: 16px;
    color: rgb(38, 145, 74) !important;
    font-weight: bold;
    line-height: 1.375;
    padding: 5px 15px;
    position: relative;
    width: auto !important;
    display: inline-flex;
    align-items: center;
}
.appointmentTyoe h6 span {
    margin-right: 5px;
}

.appointmentBottomDiv {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 10px;
}
.appointmentBottomDiv p {
    font-size: 16px;
    color: rgb(89, 89, 89);
    line-height: 1.313;
    margin-bottom: 0px !important;
}
.appointmentBottomDiv h6 {
    font-size: 18px;
    color: rgb(89, 89, 89);
    line-height: 1.313;
    margin-bottom: 0px !important;
    font-weight: 700;
}

.AppointmentButtonDiv {
    display: inline-flex;
    min-width: 100%;
    /*margin-left: -12px;*/
    /*margin-right: -12px;*/
    justify-content: space-around;
}
.AppointmentButtonDiv .customButton {
    min-width: 25%;
    text-align: center;
    margin: 0 6px;
}
.AppointmentButtonDiv .link {
    margin-right: 25px;
    display: inline-flex;
    align-items: center;
}
.AppointmentButtonDiv .link img {
    margin-right: 7px;
    position: relative;
    top: -1px;
}
.AppointmentButtonDiv .customButton:hover {
    color: #fff !important;
    background: #202020 !important;
    border-color: #202020 !important;
}
.AppointmentButtonDiv .customButton img {
    position: relative;
    top: -2px;
}
.addAppointment {
    padding: 40px 20px;
    justify-content: center;
    align-items: center;
}
.addAppointment .customButton span {
    position: relative;
    top: 2px;
}
.AppointmentButtonDiv.priceFromDiv {
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px 5px 15px;
    background: #f3fff7;
    border-radius: 7px;
    border: 1px solid #cfd5d1;
}
.AppointmentButtonDiv.priceFromDiv h2 {
    font-size: 20px;
    font-weight: 700;
}
.pastAppointmentDiv {
    display: inline-flex;
    width: 100%;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 17px 0px rgba(0, 0, 0, 0.17);
    margin-bottom: 30px;
    overflow: hidden;
    flex-wrap: wrap;
}
.pastAppointmentDiv h4 {
  font-size: 18px;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  padding: 10px 15px;
  background: #26914a;
  display: inline-block;
  width: 100%;
  text-align: center;
}
.pastAppointmentInnerDiv {
    padding: 10px 15px;
    display: inline-block;
    width: 100%;
}
.pastAppointmentInnerDiv h5 {
    font-size: 20px;
    font-family: "Open Sans";
    color: rgb(51, 51, 51);
    font-weight: bold;
    line-height: 1.05;
    margin-bottom: 5px;
}
.pastAppointmentInnerDiv p {
  font-size: 16px;
  color: #202020;
  line-height: 1.125;
  text-align: left;
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px !important;
}
.pastAppointmentInnerDiv p img {
    position: absolute;
    left: 0;
    top: 0px;
}
.pastAppointmentInnerDiv h6 {
    font-size: 16px;
    color: #202020;
    line-height: 1.125;
}
.link {
  font-size: 16px;
  color: rgb(38, 145, 74) !important;
  font-weight: 600;
  text-decoration: none !important;
  line-height: 1.313;
  background:
    linear-gradient( to right, rgb(38, 145, 74),rgba(38, 145, 74, 1), rgba(38, 145, 74, 1)),
    linear-gradient( to right, rgb(38, 145, 74), rgb(38, 145, 74), rgb(38, 145, 74));
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  padding: 1px 6px;
  margin-top: 4px;
  display: inline-block;
}
.link:hover {
    background-size: 0 1px, 100% 100px;
    color: rgb(255 255 255) !important;
    border-radius: 2px
}
.link i {
    font-size: 18px;
    margin-right: 2px;
}


/***/
.myAccountSec {
    padding: 50px 0;
    background: #f4f9fc;
}
.myAccountInnerDiv {
    display: inline-block;
    width: 100%;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: -1.414px 1.414px 10px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}
.myAccountInnerDiv h2 {
    font-size: 30px;
    color: rgb(255, 255, 255);
    background: #26914a;
    font-weight: bold;
    line-height: 0.677;
    text-align: left;
    padding: 25px 20px 20px;
    padding-left: 170px;
}
.accountDetail {
    padding: 20px 30px 40px 30px;
}
.profileName {
    display: inline-flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 25px;
}
.profileImage {
    display: inline-block;
    width: 120px;
    background: #fff;
    padding: 2px;
    margin-top: -60px;
}
.profileImage img {
    display: inline-block;
    width: 100%;
    min-height: 130px;
    -o-object-fit: cover;
       object-fit: cover;
}
.profileDetail {
    width: calc(100% - 130px);
    display: inline-block;
}
.profileName h3 {
    display: inline-block;
    width: 100%;
    font-size: 24px;
    color: rgb(51, 51, 51);
    font-weight: 600;
    margin-bottom: 5px;
}
.profileName p {
  font-size: 16px;
  color: #202020;
  line-height: 1.125;
  text-align: left;
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px !important;
}
.profileName p img {
    position: absolute;
    left: 0;
    top: 0px;
}
.accountDetail h4 {
    font-size: 20px;
    color: rgb(38, 145, 74);
    font-weight: bold;
    line-height: 1.05;
    margin-bottom: 10px;
}
.editableDiv {
    display: inline-flex;
    width: 100%;
    padding-right: 20px;
    position: relative;
    margin-bottom: 10px;
}
.editableDiv label {
  font-size: 18px;
  color: rgb(51, 51, 51);
  margin: 0px !important;
  min-width: 180px;
}
.editableDiv p {
  font-size: 18px;
  color: rgb(51, 51, 51);
  margin: 0px !important;
}
.editableDiv .editBtn {
    position: absolute;
    right: 5px;
    top: 0;
}
.accountBtnDiv {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
}
.accountBtnDiv .customButton {
    display: inline-block;
    margin-right: 15px;
    min-width: 180px;
    text-align: center;
}
.align-items-center {
    align-items: center;
}
.doubleButtonDiv {
    display: inline-flex;
    min-width: 100%;
    margin-top: 15px;
}
.doubleButtonDiv .customButton {
    width: calc(50% - 12px);
    margin: 0 6px;
    text-align: center;
}
.passwordChangeModal {
    display: inline-block;
    width: 100%;
}
.passwordChangeModal h4 {
    display: inline-block;
    width: 100%;
    background: #26914a;
    font-size: 20px;
    color: #fff;
    padding: 15px 15px;
    text-align: center;
    border-radius: 5px 5px 0 0;
    font-weight: 700;
}
.passwordChangeForm {
    display: inline-block;
    width:  100%;
    padding: 15px;
}












/*******************/
.searchListingSec {
    display: inline-block;
    width: 100%;
    padding: 50px 0;
    background: #f4f9fc;
}
/* .searchListingSec .row {
    margin: 0px !important;
} */
.singleSearchList {
    display: inline-flex;
    width: 100%;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 17px 0px rgb(0 0 0 / 17%);
    padding: 10px;
    margin-bottom: 20px;
}
.singleSearchList:last-child {
    margin-bottom: 0px;
}
.searchListImage {
    display: inline-block;
    width: 170px;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    margin-right: 15px;
    /* height: 190px; */
}
.searchListImage .mainImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
.searchListImage .placeholderImage {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
}
.searchListContent {
    position: relative;
    display: inline-block;
    width: calc(100% - 185px);
}
.profetionalDetail {
    display: inline-block;
    width: 100%;
    position: relative;
    padding-left: 75px;
    margin-bottom: 15px;
}
.profetionalLogo {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
}
.profetionalLogo img {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: relative;
    -o-object-fit: cover;
       object-fit: cover;
}
.profetionalDetail h2 {
    font-size: 24px;
    color: rgb(51, 51, 51);
    font-weight: bold;
    line-height: 0.875;
    margin-top: 5px;
    margin-bottom: 8px;
}
.profetionalDetail p {
    font-size: 16px;
    color: #202020;
    line-height: 1.125;
    text-align: left;
    padding-left: 20px;
    position: relative;
    margin: 0 !important;
    /* white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; */
}
.profetionalDetail p img {
    position: absolute;
    left: 0;
    top: 0px;
}
.searchListRating {
    display: inline-flex;
    width: 100%;
}
.globalRatingInfo {
    width: 95px;
    text-align: center;
    display: inline-block;
    margin-top: 5px;
}
.globalRatingInfo p {
    font-size: 14px;
    display: inline-block;
    width: 100%;
}
.globalRatingInfo h3 {
    font-size: 22px;
    display: inline-block;
    width: 100%;
    background: #26914a;
    padding: 9px 9px 8px;
    line-height: 15px;
    border-radius: 8px;
    font-weight: 700;
    color: #fff;
}
.globalRatingInfo h3 span {
    display: inline-flex;
    width: 100%;
    color: yellow;
    justify-content: center;
}
.globalRatingInfo h3 span .material-symbols-outlined {
    font-size: 13px;
}
.globalRatingInfo h3 span i {
    display: inline-block;
    margin: 0 1px;
}
.profSpecialties {
    display: inline-block;
    width: 100%;
    padding: 0 !important;
    margin-bottom: 5px;
}
.profSpecialties li {
    margin-bottom: 5px;
    display: inline-flex;
    align-items: center;
    width: 100%;
}
.profSpecialties li img {
    display: inline-block;
    margin-right: 5px;
    width: 20px
}
.searchListContent .AppointmentButtonDiv {
    margin: 0 !important;
}
.searchListContent .customButton {
    margin: 0 !important;
}
.storeMap {
    display: inline-flex;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    position: relative;
    max-height: calc(100vh - 30px);
    box-shadow: 0px 0px 17px 0px rgb(0 0 0 / 17%);
    position: sticky;
    top: 15px;
    min-height: 45vh;
    height: 100%;
}
.storeMap .vue-map-container,
.storeMap iframe {
    border: none;
    position: absolute;
    width: 100%;
    height: 100% !important;
    top: 0;
    left: 0;
}

.filterDiv {
    display: inline-flex;
    width: 100%;
}
.filterDiv .customInputDesign {
    width: calc(100% / 4 - 10px);
    margin-right: 15px;
}
.filterDiv .customInputDesign .form-control {
    background-color: #fff !important;
}
.nice-select .list {
    width: 100%;
}
.v-application .v-menu__content .primary--text,
.v-application .filterDiv .primary--text {
    color: #26914a !important;
    caret-color: #26914a !important;
}

.filterDiv .v-text-field--outlined legend {
    max-width: 100px;
}
.filterDiv .customInputDesign:last-child {
    margin-right: 0;
}
.filterDiv .customInputDesign select.form-control {
    border-color: #202020 !important;
    background-color: #fff !important;
}


/*************************/
.storeDetailSec {
    display: inline-block;
    width: 100%;
    padding: 50px 0;
    background: #f4f9fc;
}

.StoreDetailDiv {
    display: inline-flex;
    width: 100%;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 17px 0px rgb(0 0 0 / 17%);
    margin-bottom: 20px;
    padding: 10px;
}
.storeDetailImage {
    display: inline-block;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    margin-right: 15px;
    float: left;
    height: 100%;
}
.storeDetailImage .mainImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    -o-object-fit: cover;
       object-fit: cover;
}
.storeDetailImage .placeholderImage {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 1;
}
.aboutStore {
    position: relative;
    display: inline-block;
    width: 100%;
}
.storeDetailSec h1 {
    font-size: 24px;
    color: rgb(51, 51, 51);
    font-weight: bold;
    line-height: 0.875;
    margin-top: 5px;
    margin-bottom: 8px;
}
.storeDetailSec p {
    font-size: 16px;
    color: #202020;
    line-height: 1.125;
    text-align: left;
    padding-left: 20px;
    position: relative;
    margin: 0 !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-bottom: 15px !important;
}
.storeDetailSec h2 {
    font-size: 18px;
    color: rgb(51, 51, 51);
    font-weight: 600;
    line-height: 0.875;
    margin: 0px 0 8px;
}
.aboutStore p img {
    position: absolute;
    left: 0;
    top: 0px;
}
.storePayment {
    display: inline-block;
    width: 100%;
    padding: 0 !important;
    margin-bottom: 5px;
}
.storePayment li {
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    background: #f5fbff;
    border: 1px solid #33a455 !important;
    border-radius: 5px;
    padding: 5px 15px;
}
.storePayment li img {
    display: inline-block;
    margin-right: 5px;
    width: 20px
}
.theyWantDiv {
    display: inline-block;
    width: 100%;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 17px 0px rgb(0 0 0 / 17%);
    padding: 15px 15px 15px;
}
.theyWantDiv h2 {
    margin-bottom: 0px !important;
}
.customAccordian {
    display: inline-block;
    width: 100%;
}
.customAccordian .v-expansion-panel {
    margin-bottom: 20px;
    box-shadow: 0px 0px 17px 0px rgb(0 0 0 / 10%);
    border-radius: 10px !important;
    overflow: hidden;
    margin-top: 0px !important;
}
.customAccordian button {
    font-size: 18px;
    color: rgb(51, 51, 51);
    font-weight: 600;
    line-height: 0.875;
    padding: 20px 20px;
}
.customAccordian button h2 {
    margin: 0px;
}
.customAccordian ul li {
    width: auto;
    padding: 7px 20px;
    font-size: 15px;
}
.customAccordian ul li img {
    width: 20px;
    margin-right: 5px;
}
.customAccordian .v-expansion-panel-content__wrap {
    padding: 15px 24px 15px;
    background-color: #f4f9fc;
}
.signleStaffMemeber {
    display: inline-block;
    width: 100%;
    background: rgba(255,255,255,0.7);
    border-radius: 15px;
    padding: 3px;
    margin-bottom: 15px;
}
.signleStaffMemeber:last-child {
    margin-bottom: 0px;
}
.staffMembers {
    display: inline-block;
    width: 100%;
    text-align: center;
}
.staffMembers h3 {
    display: inline-block;
    width: 100%;
    margin: 0px 0 6px;
    font-size: 20px;
}
.staffMembers p {
    display: inline-block;
    width: 100%;
    margin: 0px !important;
    padding: 0px !important;
    white-space: unset;
    text-overflow: unset;
    overflow: unset;
    line-height: 1.4;
    text-align: left !important;
}
.staffMembers.text-right p {
    text-align: right !important;
}
.hourAndDestination h2 {
    margin-bottom: 15px !important;
}
.customTable {
    display: inline-block;
    width: 100%;
}
.customTable table {
    width: 100%;
    border: none;
    border-radius: 7px;
    margin: 0px;
    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2);
}
.customTable thead tr {
    /*border: 1px solid rgba(0,0,0,0.2) !important;
    border-radius: 7px 7px;*/
}
.customTable thead tr th:first-child {
    border-radius: 7px 0 0 0;
}
.customTable thead tr th:last-child {
    border-radius: 0 7px 0 0;
}
.customTable thead tr th:first-child,
.customTable tbody tr td:first-child {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}
.customTable tbody tr:last-child td:first-child {
    border-radius: 0 0 0 7px;
}
.customTable tbody tr:last-child td:last-child {
    border-radius: 0 0 7px 0;
}
.customTable table thead th {
    background: rgb(38, 145, 74);
    font-size: 16px;
    font-weight: bold;
    border:  none !important;
    color: #fff;
    /*border: 1px solid rgba(0,0,0,0.2) !important;*/
}
.customTable table tbody td {
    /*border: 1px solid rgba(0,0,0,0.2) !important;*/
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}
.customTable tbody tr:nth-of-type(odd) {
    background: #fff;
}
.customTable tbody tr:nth-of-type(even) {
    background-color: rgba(0,0,0,.05);
}
.hourAndDestination .storeMap {
    height: calc(100% - 42px);
    box-shadow: none;
    border: 1px solid rgba(0,0,0,0.3);
}
.hourAndDestination .AppointmentButtonDiv {
    margin: 10px 0 0;
    text-align: center;
    justify-content: center;
}
.hourAndDestination .AppointmentButtonDiv .customButton {
    margin: 0px;
}



/*********************/
.appointTabFix {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 10px;
    /* z-index: 99999999999; */
    padding-bottom: 30px;
    overflow-y: auto;
    padding-left: 17px;
    height: 480px;
}

.appointTabFix.thisFocused {
    /* position: relative; */
}
.zIndex5 {
    z-index: 5;
}
.appointTabFix.thisFocused span.bgShadow {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.6);
    left: 0;
    top: 0;
    z-index: 5;
}
.appointTabFix.thisFocused .bookAppointmentDiv  {
    position: relative;
    z-index: 6
}


.bookAppointmentDiv {
    width: 100%;
    box-shadow: 0 10px 25px rgb(0 0 0 / 16%);
    border-radius: 0 0 8px 8px;
    /* z-index: 99999999999; */
    background-color: #fff;
    border-radius: 10px;
    height: 100%;
    position: relative;
}
.bookAppointmentDiv .heading {
    font-size: 12px;
    box-sizing: border-box;
    position: relative;
    display: block;
    padding: 8px 16px;
    color: #fff;
    background-color: #26914a;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 10px 0 rgb(67 95 113 / 20%);
    margin-bottom: 10px;
    z-index: 1;
}
.stepss .dot.top01 {
    position: relative;
    top: -15px;
}
.bookAppointmentDiv .heading h3 {
    margin: 0;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4em;
}
.bookAppointmentDiv .heading span {
    margin: 0;
    color: inherit;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}
.innerStepsFields {
    background: #fff;
    position: relative;
    border-radius: 8px;
}
.stepss {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 9px;
    margin-left: -14px;
}
.stepss .dot.active {
    background-color: #26914a;
    opacity: 1;
}
.stepss .dot {
    margin-bottom: -30px;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #a5a5a5;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.bookAppointmentDiv .stepperDiv.active {
    opacity: 1;
    position: relative;
}
.bookAppointmentDiv .stepperDiv {
    padding: 10px 15px 10px 24px;
    opacity: .6;
}
.bookAppointmentDiv .form-group {
    margin: 0px !important;
}
.bookAppointmentDiv .customInputDesign label {
    margin-bottom: 0px;
    font-weight: 600;
}
.bookAppointmentDiv hr {
    opacity: .3;
    margin: 10px 0;
}
.stepss .firstLine {
    height: 77px;
    width: 2px;
    background-color: #6e6e6e;
    opacity: .6;
}
.stepss .firstLine.active,
.stepss .secondLine.active,
.stepss .thirdLine.active,
.stepss .fourthLine.active {
    background-color: #26914a;
    opacity: .8;
}
.stepss .fourthLine,
.stepss .secondLine,
.stepss .thirdLine {
    height: 110px;
    width: 2px;
    background-color: #6e6e6e;
    opacity: .6;
}
.timeSlotTableDiv {
    display: flex;
    width: 100%;
    /* justify-content: space-between; */
    position: relative;
    padding: 0px 20px 0 10px;
    /* overflow-y: auto; */
    /* max-height: 380px; */
    /* overflow-x: hidden; */
    position: relative;
    flex-wrap: wrap;
}
.timeSlotTableDiv .arrowDiv {
    position: sticky;
    left: 0;
    top: 0;
    width: calc(100% + 0px);
    display: flex;
    justify-content: space-between;
    z-index: 3;
    margin-bottom: -35px;
    padding-top: 20px;
}
.timeSlotTableDiv .columnDiv {
    width: calc(33% - 10px);
    display: flex;
    margin: 0 5px;
    flex-direction: column;
    position: relative;
}
.headDiv {
    display: inline-block;
    width: 100%;
    text-align: center;
    position: sticky;
    top: 0px;
    /* margin-top: -30px; */
    background-color: #fff;
    z-index: 1;
    padding: 10px 0;
}
.headDiv p {
    margin: 0 !important;
    color: #2b4660;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    font-weight: 700;
    padding-left: 0px !important;
}
.headDiv span {
    display: block;
    color: #2b4660;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
}
.bodyDiv .div {
    display: inline-block;
    position: relative;
    margin: 10px 0;
}
.bodyDiv .div input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.bodyDiv .div span {
    border-radius: 4px;
    text-align: center;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    font-weight: 700;
    transition: background-color .2s,color .2s;
    background-color: rgba(38,145,74,.2196078431372549);
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    cursor: pointer;
    width: 100%;
    display: inline-block; 
}
.bodyDiv .div input:checked ~ span {
    background-color: rgb(38 145 74);
    color: #fff;
}





.noSlotAvailable {
    display: inline-flex;
    width: 100%;
    min-height: 100px;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    background: #f4f9fc;
    border-radius: 5px;
    margin-top: 30px;
}
.noSlotbtn {
    display: inline-flex;
    width: 100%;
}
.noSlotbtn > img {
    width: 60px;
}
.noSlotbtn .customButton {
    /* width: calc(100% - 70px); */
    width: calc(100% - 0px);
    font-size: 14px;
    font-weight: 500;
}



/*****************/
.checkoutFormDiv {
    display: inline-block;
    width: 100%;
    padding: 50px 0;
}
.checkoutFormDiv h2 {
    font-size: 31px;
    color: rgb(38, 145, 74);
    font-weight: bold;
    line-height: 0.677;
    margin-bottom: 15px;
}
.customStepper {
    display: inline-block;
    width: 100%;
    margin-bottom: 25px;
}
.v-application .customStepper .primary {
    background-color: #26914a  !important;
    border-color: #26914a  !important;
}
.customStepper .v-stepper__step .v-stepper__label {
    text-align: center !important;
}
.rightCheckOutDetail {
    display: inline-block;
    padding: 20px;
    box-shadow: 0 0 13px 0 rgb(0 0 0 / 15%);
    border-radius: 10px;
}
.checkoutFormDiv h4 {
    font-size: 16px;
    color: rgb(51, 51, 51);
    font-weight: bold;
    line-height: 1.313;
    display: inline-block;
    width: 100%;
    margin-bottom: 0.5rem;
}
.rightCheckOutDetail ul {
    padding: 0px !important;
    display: inline-block;
    width: 100%;
}
.rightCheckOutDetail ul li {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    padding: 0px 0 5px;
    font-size: 14px;
    line-height: 16px;
}
.rightCheckOutDetail ul li:last-child {
    padding: 0;
}

.dayHourTableList tr td span {
    display: block;
}
.dayHourTableList tr td span + span {
    margin-top: 2px;
}
.rightCheckOutDetail ul li strong {
    text-align: right;
}


.generateOtp {
    display: inline-block;
    width: 100%;
    position: relative;
}
.generateOtp input {
    display: inline-block;
    width: 100%;
}
.generateOtp a {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff !important;
    background: #26914a;
    padding: 8.5px 15px;
    margin: 3px 4px 0 0;
    border-radius: 8px;
    border: 1px solid #26914a;
    font-size: 14px;
}
.generateOtp a:hover {
    color: #26914a !important;
    background: #ffffff;
}
.customOtpDiv {
    /* display: none; */
    width: 100%;
}
.veryfyOTPDiv {
    width: 100%;
    /* display: none; */
}
.displayOTPField {
    display: inline-flex !important;
}
.customOtpDiv input {
    margin-right: 10px;
    text-align: left;
}
.customOtpDiv input:last-child {
    margin-right:  0px;
}
.galleryCarousel {
    position: relative;
    margin-bottom: 20px;
}
.galleryCarousel .owl-item {
    padding: 5px;
}
.galleryCarousel .owl-item a {
    overflow: hidden;
    display: inline-block;
    width: 100%;
}
.galleryCarousel .owl-item a img {
    border-radius: 5px;
}
.galleryCarousel .owl-nav {
    display: none;
}

.galeryPrevBtn {
    position: absolute;
    top: 19px;
    right: 65px;
    width: 36px;
    height: 34px;
    background: #26914a;
    color: #fff;
    line-height: 34px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}
.galeryNextBtn {
    position: absolute;
    top: 19px;
    right: 15px;
    width: 36px;
    height: 34px;
    background: #26914a;
    color: #fff;
    line-height: 34px;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
}
.galleryCarousel > div > span {
    display: inline-block !important;
}
.globalRateDiv {
    display: inline-block;
    width: 100%;
    text-align: left;
    margin-top: 20px;
    padding-left: 55px;
    position: relative;
}
.globalRateDiv p {
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 1px !important;
}
.globalRateDiv .starRating {
    padding: 0px;
    display: inline-flex;
    float: left;
}
.starRating li {
    display: inline-block;
    float: left;
}
.starRating i {
    color: #26914a;
    float: left;
}
.totalRatingCount {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 46px;
    background: green;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
}
.singleTestimonial {
    display: inline-block;
    width: 100%;
    padding: 15px;
    text-align: center;
}
.customerImage {
    display: inline-block;
    width: 80px;
    margin-bottom: 15px;
}
.customerImage img {
    display: block;
    width: 100%;
    padding: 2px;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.2)
}
.singleTestimonial p {
    padding: 0;
    overflow: visible;
    white-space: unset;
    text-align: center;
    line-height: 22px;
    font-size: 15px;
    position: relative;
    padding-top: 25px;
    margin-bottom: 8px !important;
}
.singleTestimonial p i {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 120px;
    opacity: 0.15;
    color: #26914a;
    font-weight: 900;
    z-index: 1;
}
.singleTestimonial p span {
    position: relative;
    z-index: 2;
}
.singleTestimonial .starRating {
    display: inline-block;
    width: 100%;
}
.singleTestimonial .starRating li {
    float: none;
}


a.customButton.bookApntmntBtn {
    display: inline-block;
    position: fixed;
    bottom: -80px;
    left: 50%;
    width: calc(100% - 30px);
    z-index: 2;
    max-width: 300px;
    animation: key1 .3s ease infinite alternate;
    transition: all 0.5s ease 0s;
}
@keyframes key1{
    0% {transform: translateX(-50%) translateY(0px);}
    50% {transform: translateX(-50%) translateY(-2px);}
    100% {transform: translateX(-50%) translateY(-4px);}
}


.customDropDownNew .dropdown-menu {
    width: 100%;
    padding: 0;
    margin-top: 10px;
    left: auto;
    right: 0;
    min-width: 180px;
}
.customDropDownNew .dropdown-menu a {
    display: inline-flex;
    width: 100%;
    padding: 8px 16px;
    color: #202020;
    font-size: 14px;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.customDropDownNew .dropdown-menu a:last-child {
    border: none;
}
.customDropDownNew .dropdown-menu a span.material-symbols-outlined {
    margin-right: 5px;
    font-size: 24px;
    transition: none;
}
.customDropDownNew .dropdown-menu a:hover {
    background-color: #26914a;
    color: #fff;
}
.customDropDownNew .dropdown-menu a:hover span {
    color: #fff;
}



.withFilterIcon {
    width: 100%;
    display: inline-block;
    padding-right: 40px;
    position: relative;
    margin-bottom: 30px;
}
.withFilterIcon span {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 23px;
    font-weight: 500;
    background: #26914a;
    width: 38px;
    height: 35px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 5px;
    display: none;
    cursor: pointer;
}
div#divCalendar {
    border-radius: 10px;
    padding: 0px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 17px 0px rgb(0 0 0 / 17%);
    padding: 15px 15px;
    margin-bottom: 30px;
}
.boxedDivEvent {
    background-color: transparent;
    color: transparent;
    text-align: center;
    border: none
}
.boxedDivEvent .fc-event-inner {
    max-width: 5px;
    height: 5px;
    background-color: green;
    border-radius: 50px;
    color: green;
    overflow: hidden;
    background-color: green !important;
    color: green !important;
    display: inline-block;
}
.fc-border-separate {
    text-align: center;
}
.fc-border-separate .fc-day-number {
    float: none;
}

.generateOTPBtn {
    min-width: 124px;
}


.vue-notification-group .vue-notification {
    margin: 5px 5px 0 !important; 
    padding: 10px 25px !important;
    font-size: 14px !important;
    background: #e6effa !important;
    border: 1px solid #9cb8db !important;
    border-radius: 5px !important;
}
.vue-notification-group .vue-notification.warn {
    background: #fef7ea !important;
    border: 1px solid #dfcca8 !important; 
    color: #000 !important;
}
.vue-notification-group .vue-notification.error {
    background: #fcede9 !important;
    border: 1px solid #e9c0b5 !important;
    color: #000 !important;
}
.vue-notification-group .vue-notification.success {
    background: #eaf7ee !important;
    color: #000 !important;
    border: 1px solid #acdfbc !important;
}

.rightSideTop {
    display: inline-flex;
}
.rightSideTop > div {
    margin-left: 20px;
}

.languageDropDown {
    position: relative;
}
.languageDropDown .open {
    display: inline-block;
}
.languageDropDown .mainLanguage img {
    width: 28px;
    display: inline-block;
    margin-right: 8px;

}
.languageDropDown .dropdown-menu img {
    width: 20px;
    display: inline-block;
    margin-right: 10px;
}
.mainLanguage span {
    color: #202020;
    font-size: 18px;
    font-weight: 600;
}
.mainLanguage {
    display: inline-flex;
    align-items: center;
}

.has-error .form-control {
    border-color: red !important;
}
.v-card__text,
.modalContent {
    padding: 0 24px 10px;
}
.v-card__text .v-rating {
    text-align: center;
    margin-bottom: 8px;
}
.v-card__text .v-rating button {
    padding: 5px 0;
}
.v-card__text .form-control {
    box-shadow: none !important;
    padding: 14px 15px;
}
.userInformation {
    display: inline-flex;
    width: 100%;
    align-items: center;
}
.userImage {
    width: 60px;
    height: 60px;
    display: inline-block;
    margin-right: 10px;
}
.userImage img  {
    width: 60px;
    height: 60px;
    display: inline-block;
    border-radius: 60px;
    -o-object-fit: cover;
       object-fit: cover;
}
.userName {
    display: inline-block;
    width: calc(100% - 70px);
}
.userName h5 {
    font-size: 18px;
    color: #202020;
    font-weight: 600;
}
.userName p {
    font-size: 15px;
    color: #494949;
    font-weight: 400;
    margin: 0px !important;
}

.customDialogBox {
    display: inline-block;
    width: 100%;
    padding: 30px;
}
.dialogBoxContent {
    display: inline-block;
    width: 100%;
}
.dialogBoxContent h3 {
    display: inline-block;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
}
.dialogBoxContent p {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    text-align: left;
    margin: 10px 0 5px !important;
}
.dialogBoxButtons {
    display: inline-block;
    width: 100%;
    margin-top: 5px;
}
.dialogBoxButtons .customButton {
    margin: 0 5px !important;
    display: inline-block;
}
.dilogBoxIcon {
    display: inline-block;
    width: 100%;
}
.dilogBoxIcon i {
    display: inline-flex;
    font-style: normal;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    border: 1px solid #d1a323;
    margin-bottom: 15px;
    border-radius: 55px;
    font-size: 28px;
    color: #d1a323;
}

/***********************/
.doctorDetailContent {
    display: inline-block;
    width: 100%;
}
.doctorDetailContent h3 {
    font-size: 22px;
    font-weight: 600;
    display: inline-block;
    width: 100%;
}
.doctorDetailContent h4 {
    font-size: 15px;
    display: inline-block;
    width: 100%;
}
.selectScheduleMainDiv {
    display: inline-flex;
    width: 100%;
}
.selectScheduleMainDiv .leftSideDoctorInfo {
    width: caLc(100% - 300px);
    padding-right: 10px;
}
.selectScheduleMainDiv .singleDoctorDiv {
    margin-bottom: 0px;
    position: sticky;
    top: 10px;
}
.singleDoctorDiv {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    margin: 0 0 10px;
    box-shadow: 2px 2px 8px 0 rgb(0 0 0 / 17%);
    align-items: center;
}
.calanderDivView {
    display: inline-block;
    width: 100%;
    margin-top: 10px;
    background: #fff;
    padding: 0 15px 10px;
}
.calanderDivView .v-toolbar__content {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.calanderDivView .v-toolbar__content .v-toolbar__title {
    min-width: 100px;
    text-align: center;
}
.selectTimeMainDiv {
    display: inline-block;
    width: 300px;
    margin-left: 10px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 2px 2px 8px 0 rgb(0 0 0 / 17%);
    padding:  10px;
    text-align: center;
}
.selectTimeMainDiv h3 {
    display: inline-block;
    width: 100%;
    font-size: 18px;
    color: #000;
    margin-bottom: 10px;
    margin-top: 10px;
}
.selectTimeDiv {
    display: inline-block;
    width: 100%;
}
.selectTimeDiv label {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
}
.selectTimeDiv label input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.selectTimeDiv span {
    display: inline-block;
    width: 100%;
    background: #ade2bf;
    padding: 10px 10px;
    font-size: 15px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    color: #202020;
}
.selectTimeDiv label input:checked ~ span {
    background: #26914a;
    color: #fff;
}
.selectTimeDiv label input:disabled ~ span {
    opacity: 0.6;
    cursor: no-drop;
}
.selectTimeMainDiv .customButton {
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 5px !important;
}
.selectTimeDiv.followUpTimeSlot label {
        width: auto;
        margin: 5px;
}
.selectTimeDiv.followUpTimeSlot span {
    padding: 5px 10px;
    border-radius: 5px;
}


/* .allStepsList {
    display: inline-block;
    width: 100%;
    max-height: 470px;
    overflow-y: auto;
} */





.pastAppointmentcalendar .v-sheet.theme--light {
    background: #26914a !important;
    color: #fff !important;
}
.v-application .pastAppointmentcalendar .grey--text.text--darken-2 {
    color: #fff !important;
    background: transparent !important;
}
.customPhoneInput .vti__dropdown-list.below {
    z-index: 3;
}

.pastAppointmentcalendar .theme--light.v-calendar-weekly .v-calendar-weekly__day .v-event {
    width: 5px !important;
    height: 5px !important;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
    top: 5px;
}
.pastAppointmentcalendar {
    margin-bottom: 15px !important;
    border-radius: 10px;
    overflow: hidden;
}
.stepFive .form-group.customInputDesign {
    height: 400px;
    overflow-y: auto;
}


.filterResultList {
    display: inline-block;
    width: 100%;
    padding: 0px  !important;
}
.filterResultList li {
    display: inline-flex;
    margin-right: 15px;
    font-size: 15px;
    color: #202020;
    font-weight: 500;
    flex-wrap: wrap;
    align-items: center;
}
.filterResultList li span {
    display: inline-block;
    color: #26914a;
    white-space: nowrap;
    max-width: calc(100% - 98px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.filterResultList li span.trashSpan {
    font-size: 11px;
    padding: 0;
    margin-left: 5px;
    width: 20px;
    height: 20px;
    background: #26914a;
    border-radius: 4px;
    color: #fff !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.pastAppointmentcalendar .theme--light.v-calendar-weekly .v-calendar-weekly__day .v-event + div {
    display: none;
}
.loaderDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    z-index: 6;
}
.loaderDiv span {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid #26914a;
    border-right: 3px solid transparent;
    animation: rotation 1s linear infinite;
}



.withCountryCode input {
    padding-left: 80px !important;
}
.withCountryCode select {
    position: absolute;
    top: 12px;
    left: 11px;
    padding: 0 10px 0 0;
    min-width: 60px;
    appearance: auto;
    -moz-appearance: auto;
    -webkit-appearance: auto;
}

.innerIdelPopup .v-card {
    padding: 50px 15px;
}
span.warningIcon {
    display: inline-flex;
    width: 80px;
    height: 80px;
    justify-content: center;
    align-items: center;
    border: 1px solid #eeb711;
    border-radius: 50% !important;
    box-shadow: none !important;
    background: #fffaec;
    color: #eeb711 !important;
    font-size: 30px;
    font-weight: 100;
    margin-bottom: 20px;
}
.innerIdelPopup h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    display: inline-block;
    width: 100%;
}
.innerIdelPopup p {
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    width: 100%;
    margin-bottom: 15px !important;
}
.cardActionButton {
    display: inline-block;
    width: 100%;
}
.cardActionButton a {
    display: inline-block;
    margin: 3px;
    min-width: 110px;
}
.primary_menu li a {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.375;
    padding: 0px 10px;
}
.hamburgerMenu {
    display: block;
    position: absolute;
    right: 3.5em;
    padding: 0 !important;
    top: 4em;
    z-index: 99;
    background: #fff;
}
.hamburgerMenu li {
    float: none !important;
    text-align: left;
}
.hamburgerMenu li a {
    padding: 12px 40px;
    display: block;
    font-size: 20px;
    line-height: 1;
}

.navbar-toggler {
    display: none;
    padding: 0px 5px;
    background-color: transparent;
    border: 1px solid #000;
    border-radius: 0.25rem;
    margin-left: 10px;
}
 
.navbar-toggler:focus {
    background: none;
    outline: 0;
}
 
.navbar-toggler span {
    display: block;
    width: 25px;
    height: 2px;
    margin: 5px auto;
    background: #000000;
    transition: all .6s cubic-bezier(0.250, 0.100, 0.250, 1.000);
}

.primary_menu li {
    float: left;
}
 
.navbar-toggler:hover span,
.navbar-toggler:focus span {
    background: #000000;
}
 
/* rotate first span */
.navbar-toggler[aria-expanded="true"] span:first-of-type {
    transform: rotate(45deg) translate(6px, 6px);
}
 
/* hide second span */
.navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
    opacity: 0;
}
 
/* rotate third span */
.navbar-toggler[aria-expanded="true"] span:last-of-type {
    transform: rotate(-45deg) translate(5px, -5px);
}
 
.navbar-toggler[aria-expanded="false"] span {
    transform: none;
    opacity: 1;
}
 




@keyframes rotation {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(360deg) }
}
@keyframes rotationBack {
    0% { transform: rotate(0deg) }
    100% { transform: rotate(-360deg) }
}
@keyframes rotationBreak {
    0% { transform: rotate(0) }
    25% { transform: rotate(90deg)}
    50% { transform: rotate(180deg) }
    75% { transform: rotate(270deg)}
    100% { transform: rotate(360deg) }
}



.ajax-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 50% 50%;
    transform: rotate(90deg) translate(-50%, -50%);
    font-size: 50px;
    width: 1em;
    height: 3em;
    color: #26914a;
}
.ajax-loader .paw {
    width: 1em;
    height: 1em;
    animation: pawAnimation 2.05s ease-in-out infinite;
    opacity: 0;
}
.ajax-loader .paw svg {
    width: 100%;
    height: 100%;
}
.ajax-loader .paw .icon {
    fill: currentColor;
}
.ajax-loader .paw:nth-child(odd) {
    transform: rotate(-10deg);
}
.ajax-loader .paw:nth-child(2n) {
    transform: rotate(10deg) translate(125%);
}
.ajax-loader .paw:first-child {
    animation-delay: 1.25s;
}
.ajax-loader .paw:nth-child(2) {
    animation-delay: 1s;
}
.ajax-loader .paw:nth-child(3) {
    animation-delay: 0.75s;
}
.ajax-loader .paw:nth-child(4) {
    animation-delay: 0.5s;
}
.ajax-loader .paw:nth-child(5) {
    animation-delay: 0.25s;
}
.ajax-loader .paw:nth-child(6) {
    animation-delay: 0s;
}
.no-cssanimations .ajax-loader .paw {
    opacity: 1;
}
.text-black{
    color: #000 !important;
}
@keyframes pawAnimation {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    to {
        opacity: 0;
    }
}
.loaderMain {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: 99999999;
}
.loaderMain .logoImage {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -35%);
}
.establishmentTypeTag{
    font-size: 14px;
    margin-left: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    background: #b1edc3bd;
    border-radius: 5px;
    padding: 5px 10px;
}


.singleSearchList.shopNotAvailable .searchListContent {
    width: 100%;
    display: inline-flex;
} 
.singleSearchList.shopNotAvailable .searchListContent .profetionalDetail {
    padding-left: 0px;
    width: 50%;
}
.singleSearchList.shopNotAvailable .searchListContent .AppointmentButtonDiv  {
    width: 50%;
    min-width: unset;
    justify-content: right;
    background: transparent;
    border: none;
}


.StoreDetailDiv.notAvailableStorDetail {
    padding: 35px;
}
.StoreDetailDiv.notAvailableStorDetail .aboutStore {
    width: 50%;
}

.bookingDetailsNotAvailable {
    display: inline-block;
    width: 50%;
    text-align: center;

}
.bookingDetailsNotAvailable p {
    overflow: unset;
    white-space: unset;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
    display: inline-block;
    width: 100%;
    max-width: 600px;
}
.bookingDetailsNotAvailable a.customButton {
    display: inline-block;
}
.notAvailableStorDetail .establishmentTypeTag {
    margin-top: 15px;
    margin-left: 0px !important;
    display: inline-block;
    margin-bottom: 2px;
}
.v-dialog {
    overflow: visible !important;
}
.customFormNotAvailabl {
    display: inline-block;
    width: 100%;
    padding: 25px;
    position: relative;
    overflow: visible !important;
}
.customFormNotAvailabl a.crossIcon {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 30px;
    height: 30px;
    background: #e13b3b;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    color: #fff !important;
    font-size: 14px;
}
.customFormNotAvailabl h2 {
    font-size: 22px;
    font-weight: 700;
    display: inline-block;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 10px;
}
.customFormNotAvailabl p {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    margin-bottom: 20px !important;
    text-align: center;
}
.popupActionButton {
    display: inline-block;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
}
.popupActionButton a {
    min-width: 45%;
    margin: 0 1%;
    display: inline-block;
}
.closeButtonNew.customButton::before {
    background-color: #e13b3b;
    border: 1px solid #e13b3b;
}
.closeButtonNew.customButton:hover span {
    color: #e13b3b !important;
}
.closeButtonNew.customButton:hover::before {
    background-color: transparent;
    border: 1px solid #e13b3b !important;
}
.closeButtonNew.customButton:hover::after {
    border: 1px solid #e13b3b !important;
}


/****** images ******/
.objPositionTC {
    -o-object-position: top center !important;
    object-position: top center !important;
}
.objPositionTL {
    -o-object-position: top left !important;
    object-position: top left !important;
}
.objPositionTR {
    -o-object-position: top right !important;
    object-position: top right !important;
}
.objPositionBC {
    -o-object-position: bottom center !important;
    object-position: bottom center !important;
}
.objPositionBL {
    -o-object-position: bottom left !important;
    object-position: bottom left !important;
}
.objPositionBR {
    -o-object-position: bottom right !important;
    object-position: bottom right !important;
}
.objPositionCC {
    -o-object-position: center !important;
    object-position: center !important;
}
.document-info{
    position: relative;
    width: 0;
    height: 0;
    display: none;
    top: 0;
}
.descWrapper p, .document-info-wrapper p{
    overflow: visible;
    white-space: break-spaces;
}
.document-info-wrapper p{
    text-align: center;
    font-size: 14px;
}
.document-info-wrapper {
    box-shadow: -2px 1px 10px -1px rgba(102, 102, 102, 0.8);
    box-sizing: border-box;
    background: #fff;
    left: -8px;
    margin: 0;
    min-width: 30em;
    position: absolute;
    top: 30px;
    font-size: 14px;
    transform: translate(-50%, 0);
    z-index: 999;
    padding: 5px 10px;
}
.document-info-wrapper ul li, .descWrapper ul li{
    list-style: disc !important;
}
.document-info-wrapper::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 50%;
    border: 8px solid rgba(0, 0, 0, 0.7);
    border-color: transparent transparent #FFFFFF #FFFFFF;
    transform-origin: 0 0;
    transform: rotate(135deg) translate(-8px, -8px);
    box-shadow: -5px 0px 12px -5px rgba(0, 0, 0, 0.7);
}
.descWrapper .v-expansion-panel-content{
    display: block !important;
}
.descWrapper h1, .descWrapper h2, .descWrapper h3, .descWrapper h4{
    margin: 0px 20px 8px;
}

.service-descWrapper p{
    overflow: visible;
    white-space: break-spaces;
    display: block;
}
h2.card-title{
    font-size: 24px;
}

/* 05-01-2024 */

.checkoutFormDiv .v-stepper__header .v-divider {
    border-width: 3px;
}

.checkoutFormDiv .v-stepper__header .step__complete {
    border-color: #26914a !important;
}

.checkoutFormDiv .v-stepper__header .v-divider {
    margin: 31.5px -78px !important;
}

.checkoutFormDiv .v-stepper__step__step {
    height: 20px;
    min-width: 20px;
    width: 20px;
}

.checkoutFormDiv .v-stepper__step__step .v-icon.v-icon {
    font-size: .70rem;
}

.checkoutFormDiv .payment__desc{
    padding: 0 4rem;
}

.checkoutFormDiv .payment__desc p{
    font-size: 15px;
    font-weight: 600;
    line-height: 25px;
}

.customStepper .card__custom{
    box-shadow: none !important;
    background: transparent !important;
}

.background-box{
    height: 30%;
    width: 100%;
    position: absolute;
    background: rgba(38, 145, 74, 0.05);
    margin-top: -50px;
}

.paymentStep .card__1{
    height: 100%;
    border-radius: 20px;
    border: none;
    background: #DFEFE5;
    margin-bottom: 3rem;
}

.payment__heading{
    font-size: 2.2rem;
    text-align: center;
}

.paymentStep .card__1 .title_card_1{
    margin-top: 20px;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
}

.paymentStep .card__1 .card__2{
    /* height: 9rem; */
    margin: 5px 9rem;
    border-radius: 15px;
    background: #F4F9F6;
}

.paymentStep .card__1 .card__2 .toggle_radio{
    margin-top: 20px;
}

.paymentStep .card__1 .card__3{
    margin: 15px 80px;
    border-radius: 20px;
    padding: 45px;
    border: 2px solid #26914A;
}

:root {
    --radio-switch-width: 250px;
    --radio-switch-height: 50px;
    --radio-switch-padding: 2px;
    --radio-switch-radius: 50em;
    --radio-switch-animation-duration: 0.3s;
}

.radio-switch {
    position: relative;
    display: inline-block;
    display: inline-flex;
    padding: var(--radio-switch-padding);
    /* border-radius: 40px;
    border: 1px solid rgba(38, 145, 74, 0.43); */
    flex-wrap: wrap;
    justify-content: center;
}

.radio-switch__item {
    position: relative;
    display: inline-block;
    height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding));
    /* width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding)); */
    border-radius: 40px;
    border: 1px solid rgba(38, 145, 74, 0.43);
    margin: 2px;
}

.radio-switch__label {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radio-switch-radius);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #26914A;
    -webkit-user-select: none;
        -moz-user-select: none;
            user-select: none;
    transition: all var(--radio-switch-animation-duration);
}
.radio-switch__input:checked ~ .radio-switch__label {
    color: #ffffff;
    background-color: #26914A;
}
.radio-switch__input:focus ~ .radio-switch__label {
    background-color: hsla(var(--ri5-color-primary-hsl), 0.6);
}
.radio-switch__label :not(*):focus-within, .radio-switch__input:focus ~ .radio-switch__label {
    background-color: #26914A;
}

.radio-switch__marker {
    position: absolute;
    z-index: 1;
    top: 0;
    left: -100%;
    border-radius: var(--radio-switch-radius);
    background-color: #26914A;
    height: calc(var(--radio-switch-height) - 2*var(--radio-switch-padding));
    width: calc(var(--radio-switch-width)*0.5 - var(--radio-switch-padding));
    transition: transform var(--radio-switch-animation-duration);
}
.radio-switch__input:checked ~ .radio-switch__marker {
    transform: translateX(100%);
}

/* utility classes */
.ri5-sr-only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

.paymentStep .card__1 .card__2 ul {
    padding-left: 2px !important;
}

.paymentStep .card__1 .card__2 .content {
    font-weight: 500;
    font-size: 15px;
    color: #000;
    padding: 0 20px;
    margin-top: 20px;
    font-style: italic;
}

.paymentStep .choice__payment{
    height: auto;
    padding: 0 8rem;
    border: 3px solid rgba(38, 145, 74, 0.19);
    margin: 0 2rem;
}

.paymentStep .choice__payment .content{
    font-size: 15px;
    font-weight: 600;
    margin-top: 1.7rem;
    padding: 0 5rem;
    font-style: italic;
}

.paymentStep .choice__payment .radio-switch{
    padding-left:2px !important;
}

.paymentStepChoice .background-box {
    height: 25%;
}

.paymentStepChoice .payment_heading_3{
    font-size: 1.6rem;
    font-weight: 700;
}

.paymentStepChoice .choice__card{
    padding: 30px 25px;
    border-radius: 22px;
    border: 3px solid rgba(38, 145, 74, 0.19);
    background: #DFEFE5;
}

.paymentStepChoice .choice__card h2{
    font-weight: 900;
}

.paymentStepChoice .choice__card .bold_p{
    font-size: 15px;
    font-weight: 600;
}

.choice_payment_btn .customButton span {
    font-weight: 500;
}

.card.choice__card.choice__card__right {
    margin-right: 5rem;
}

.card.choice__card.choice__card__left {
    margin-left: 5rem;
}

.paymentSummaryModel .payment_final_pr{
    margin-bottom: 20px;
    border-top: 1px solid rgba(38, 145, 74, 0.19);
}

.paymentSummaryModel .payment_final_pr .name, 
.paymentSummaryModel .payment_final_pr .value{
    font-size: 30px;
    /* margin-top: 20px; */
}

.list-display li {
    margin-bottom:.4rem;
    font-size:0.9rem;
    font-weight: 400;
    line-height: 25px;
}
.list-checkmarks {
    padding-left:0.8rem !important;
}
.list-checkmarks li {
    list-style-type:none;
    padding-left:0.6rem;
}
.list-checkmarks li:before {    
    content: "\F012C";
    font: normal normal normal 12px "Material Design Icons";
    margin: 0 10px 0 -22px;
    color: #ffffff;
    background: #26914A;
    border-radius: 50%;
}
.tos_row a{
    font-size: 10px;
}

.TosModal{
    position: unset;
    top: unset; 
    left: unset;
    width: 600px;
}

.TosModal .modal-body {
    position: relative;
    padding: 10px 0px;
    line-height: 50px;
}
.TosModal .close_btn {
    color: green !important;
    position: absolute;
    right: 5%;
    top: 0%;
    font-size: 30px;
}

.TosModal h3 {
    font-weight: 700;
    font-size: 24px;
}

.fst-italic{
    font-style: italic;
}

.fw-light{
    font-weight: 300;
}

.monthly_payment .form-check {
    display: flex;
    align-items: center;
}

.monthly_payment .badge{
    background-color: rgb(38, 145, 74);
    padding: 0.6em 0.6em;
}

.monthly_payment label{
    font-weight: 700;
}

.installments_loop{
    line-height: 40px;
    margin-top: -14px;
    margin-bottom: 10px;
}

.next_payment .card{
    border-radius: 1rem;
    box-shadow: 0 0 5px #ccc;
}

.next_payment h1{
    font-size: 2rem;
}

.next_payment .left-days{
    position: absolute;
    right: 0;
    top: 0;
    background-color: #26914a;
    color: #fff;
    padding: 0 30px;
    border-radius: 0px 1rem 0 0.2rem;
}

.next_payment .empty-card{
    padding: 50px;
}

.next_payment .empty-card span{
    display: flex;
    justify-content: center;
    font-size: 18px;
}

.loader_section{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    backdrop-filter: blur(2px);
    display: none;
    overflow: hidden;
}

.loading-spinner{
    position: fixed;
    top: 50%;
    left: 50%;
    width:30px;
    height:30px;
    border:2px solid rgb(38, 145, 74);
    border-radius:50%;
    border-top-color:#0001;
    display:inline-block;
    animation:loadingspinner .7s linear infinite;
  }
  
  @keyframes loadingspinner{
    0%{
      transform:rotate(0deg)
    }
    100%{
      transform:rotate(360deg)
    }
  }

.AuthButtonDiv {
    display: inline-flex;
    min-width: 100%;
    justify-content: space-around;
}
.AuthButtonDiv .customButton {
    min-width: 25%;
    text-align: center;
    margin: 0 6px;
}

.AuthButtonDiv .customButton:hover {
    color: #fff !important;
    background: #202020 !important;
    border-color: #202020 !important;
}