@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
    --white: #fff;
    --black: #000;
    --pink: #FD69B3;
    --light-purple: rgba(253, 105, 179, 0.50);
    --light-black: #3D3D3D;
    --light-grey: #FCFCFC;
}

.fs-38{
    font-size: 38px;
    font-weight:400;

}
.stepper-para{
    width: 455px;
}
.fs-16{font-size:16px;}

.manrope{font-family: "Manrope", serif;}
.lato{font-family: "lato", serif;}
.Molra-beauty{font-family: "Molra Beauty", serif;}

.text-left {
    text-align: left;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Poppins;
}


.pink { color: var(--pink);}
.lg-black { color: var(--light-black);}
.bg_pink { background-color: var(--pink);}
.bg_grey { background-color: var(--light-grey);}

html {
    height: 100%;
}

p {
    color: grey;
}

.nav-background {
    background-color: #ffffff;

}

.navbar-section {display: flex;justify-content: center;}
.stepper-form {object-fit: cover;height: 100%;min-height: 100vh;background-position: center;background-repeat: no-repeat;background-size: cover;}
.heading {text-transform: capitalize;color: #0B0B0B;font-family: Poppins;font-size: 24px;font-weight: 500;}
.stepper-form .card {border-radius: 15px;padding: 25px 30px;}
#msform {position: relative;}
#msform fieldset {border: 0 none;border-radius: 0.5rem;box-sizing: border-box;width: 100%;margin: 0;position: relative;display: flex;flex-direction: column;align-items: center;}
.form-card {text-align: left}
#msform fieldset:not(:first-of-type) {display: none;}
.stepper-main textarea {width: 100%;border: 1px solid #ccc;height: 200px;border-radius: 20px;outline: none;padding: 15px;}
#msform .action-button {background: var(--black);font-weight: bold;color: var(--white);border: 2px solid var(--black);border-radius: 50px;cursor: pointer;padding: 10px 20px;text-decoration: none;}
#msform .action-button:hover ,
#msform .action-button:focus {
    background-color: var(--black);
    border: 2px solid  var(--black);
    color: var(--white);
    transition: .5s;
}

#msform .action-button-previous {text-decoration: none;font-weight: bold;border: 0 none;border-radius: 0px;cursor: pointer;padding: 0px 5px;}
#msform .action-button-previous:hover {color: #000000}
.scrollbar {height: calc(70vh - 135px);overflow: auto;border-radius: 10px;margin-top: 10px;}
.scrollbar::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);background-color: #F5F5F5;border-radius: 10px;}
.scrollbar::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}
.scrollbar::-webkit-scrollbar-thumb {border-radius: 10px;background-color: #FFF;background: #d5d6d6;}
.fs-title {font-size: 25px;color: #673AB7;margin-bottom: 15px;font-weight: normal;text-align: left}
.purple-text {color: #673AB7;font-weight: normal}
.steps {font-size: 25px;color: gray;margin-bottom: 10px;font-weight: normal;text-align: right}
.fieldlabels {color: #0B0B0B;text-align: left}
.progress1 {display: flex;height: 0.5rem;overflow: hidden;font-size: 0.75rem; border-radius: 0.25rem;gap: 5px; justify-content: space-between;}
.progress-bar {background: #FFB6C1; height: 100%;width: 10%; border-radius: 5px;transition: none !important;}
.progress-bar.inactive {background: #F3F3F3; }
.fit-image {width: 100%;object-fit: cover;}
a.basic-button {text-decoration: none;border: 1px solid #02D096;background-color: #02D096;border-radius: 20px;text-align: center;color: #0B0B0B;width: fit-content;padding: 2px 12px;}
.input-field {border: 1px solid #eee;padding: 16px;border-radius: 16px;}
.input-field input {border: 1px solid transparent;}
.stepper-form {position: relative;}
.stepper-form .back-img {position: absolute;left: 87%;top: 72%;}
.btn-btn {border-bottom: 1px solid #eee;margin-top: 20px;}
.stepper-form::before {content: '';background-image: url('./assets/images/icon.png');position: absolute;background-position: center;background-repeat: no-repeat;background-size: contain;right: 0;height: 237px;width: 222px;bottom: 0;}
i.fa-solid.fa-circle-check {color: #c2c2c2;font-size: 54px;}
input[type="text"] {outline: none;border: none;border-bottom: 1px solid #c2c2c2;}
input[type="text"]:focus {box-shadow: 0 1px 0 0 #c2c2c2;}
/*.stepper-main {height: 100vh;}*/
img{width: 100%;height: 100%;object-fit: contain;}
.beautician-image{width: 241px;}
.bg-img{background-repeat: no-repeat;background-position: center;background-size: cover;}
.stepper-main input {height: 42px;padding: -1px 16px;border-radius: 200px;border: 1px solid #C2C2C2;}
.stepper-main input:focus-visible {outline: 0;}
.seller-tab-image {width: 150px;height: 160px;}
.button-button {width: 100%;display: flex;justify-content: center;align-items: center;}
.stepper-main .black-button {border: 1px solid #000;background: #000;color: #fff;width: 654px;padding: 10px;border-radius: 50px;}
.para-two {padding-left: 56px;}
.stepper-para-para {width: 548px;}
.map-icon{top:13px ;left:9px}
.custom-checkbox {display: flex;align-items: center;font-family: Arial, sans-serif;font-size: 14px;color: #666;cursor: pointer;}
.custom-checkbox input {display: none; /* Hide default checkbox */}
.checkmark {width: 16px;height: 16px;border: 2px solid #ccc;border-radius: 4px;display: inline-block;position: relative;margin-right: 8px;cursor: pointer;}
.custom-checkbox input:checked + .checkmark {background-color: #ccc;border-color: #ccc;}
.custom-checkbox input:checked + .checkmark::after {content: "✔";color: white;font-size: 12px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-weight: bold;}
.stepper-main .option {display: flex;align-items: center;padding: 10px 20px;border: 1px solid #ccc;border-radius: 20px;margin: 10px 0;cursor: pointer;color: var(--light-grey);justify-content: space-between;background-color: #fcfcfc;width: 456px;transition: background-color 0.3s, border-color 0.3s, color 0.3s;font-size: 16px;font-family: Arial, sans-serif;position: relative;}
.stepper-main input[type="checkbox"] {display: none;}

.stepper-main .custom-check {width: 20px;height: 20px;border: 2px solid #ccc;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 14px;font-weight: bold;color: #ccc;position: relative;}
.stepper-main .custom-check::before {content: "✓";color: #ccc;font-size: 14px;font-weight: bold;display: block;}
.stepper-main input[type="checkbox"]:checked + .custom-check {background-color: black;border-color: black;color: white;}
.stepper-main input[type="checkbox"]:checked + .custom-check::before {color: white;}
.stepper-main .option:has(input[type="checkbox"]:checked) {background-color: var(--white);border-color: var(--black);color: var(--light-grey);}
.stepper-main .category-checkbox {
    width: 185px;
    text-align: center;
    padding: 10px;
    border-radius: 200px;
    border: 1px solid var(--light-grey);
    display: inline-block;
    cursor: pointer;
}

.stepper-main .category-checkbox label{color: var(--medium-gray);}
.stepper-main .category-checkbox input[type="checkbox"] {appearance: none;position: absolute;opacity: 0;}
.stepper-main .category-checkbox:has(input[type="checkbox"]:checked) {background: var(--white);color: var(--black);
    border: 1px solid var(--pink);}

.input-container {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 8px;
    width: 300px;
}

.input-box {border: none;outline: none;flex-grow: 1;padding-left: 10px;
}
svg.icon-svg {
    border: 1px solid;
    background-color: #000;

    width: 27px;
    height: 27px;
    padding: 4px;
    border-radius: 50px;
}

/*progress-bar*/
.stepper {display: flex;justify-content: center;margin: 20px 0;}

.step {width: 219px;height: 5px;border-radius: 50px;padding: 4px;background-color: lightgray;margin: -1px 11px;}
.step.active {background-color: pink;}
button:disabled {background: gray;cursor: not-allowed;}
.progress-bar {background-color: gray;}

.progress-bar.active-step {background-color: pink;}
/*login-page*/
.glamrr-login-bg {background: url(../images/login-bg.svg);background-repeat: no-repeat;background-position: center;background-size: cover;}
.glamrr_login_main input {height: 42px;padding: 0px 16px;border-radius: 200px;border: 1px solid #C2C2C2;}
.glamrr_login_main input:focus-visible {outline: 0;}
.glamrr-google-icon img {max-width: 24px;height: 24px;}
/*btn*/
.charcoal-black_btn {background-color: #1C1C1C;color: #fff;padding: 10px;border-radius: 50px;border:1px solid transparent;}
.charcoal-black_btn:hover {background-color: transparent;color: #000;transition: 0.3s;  border: 1px solid var(--charcoal-black);}
.glamrr_login_main .fa-regular.fa-eye {color: var(--medium-gray);}
.glamrr_login_main .fa-regular.fa-eye-slash {color: var(--medium-gray);}
body:has(.is-invalid) .auth-password.sign-up-password.toggle-password {right: 37px;top: 44px;}
.auth-password.sign-up-password.toggle-password{position: absolute; right: 13px; top: 61%;  cursor: pointer;}
.reset-password {height: 100px;width: 200px;}



/*register*/
.preview-box-file {
    position: relative;
    text-align: center;
    padding: 21px;
    width: 399px;
    border: 1px solid var(--Cool-Gray);
    border-radius: 10px;
    height: 93px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.tooltip-wrapper {
    position: relative;
    display: inline-block;
}

.tooltip-wrapper .tooltip {
    visibility: hidden;
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 6px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    /* top of the icon */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    /*white-space: nowrap;*/

    white-space: normal;
    max-width: 800px;
    word-wrap: break-word;
    width: max-content;
}

.tooltip-wrapper:hover .tooltip {
    visibility: visible;
    opacity: 1;
}
.tooltip-wrapper .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;}