@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Space+Grotesk:wght@300..700&display=swap');


:root {
    --checkbox-red:#ffcccc;
    --dropzone-gray:#4A4A4A;
    --toggle-gray:#B0B0B0;
    --lightest-gray:#4D4D4D;
    --select-bg:#F3F3F3;
    --select-text:#5F5F5F;
    --input-gray:#BEC0C2;
    --border-seagreen:#6B9080;
    --placeholder-gray: #75525B;
    --white: #FFF;
    --Black: #000;
    --red: #E74040;
    --maroon: #580000;
    --light-maroon: #940000;
    --light-pink: #FFEFEF;
    --peach: #FF928E;
    --table-bg: #AF000B;
    --dark-pink: #b18787;
    --pink: #dac7c7;
    --light-peach:#FEE3E3;
    --pale-peach:#FFF9F5;
    --border-grey:#E1E1E1;
    --grey:#9E9E9E;
    --border-red:#FFC7CA;
    --dark-black:#1E1E1E;
    --table-red:#EF0816;
    --dark-maroon:#470001;
    --brownish-maroon:#580000;
    --grey-text:#424242;
    --bg-grey:#A4A4A4;
    --card-bg-black:#272727;
    --green:#4B5942;
    --light-gray:#B6B6B6;
    --medium-gray:#A8A8A8;
    --divider-gray: #99999999;
    --charcoal:#111827;
    --neutral-gray:#6B7280;
    --body-bg:#F5F5F5;
    --border-gray: #D3D3D3;
    --sharp-red:#EF000A;
    --gunmetal: #263238;
    --dark-brown: #2F1F01;
    --greyish-brown: #81745E;
    --charcoal-gray: #38373E;
    --dark-gray: #6D6D6D;
    --dark-bluish-purple: #1A1E3D;
    --grey_color:#4A4A4A;
}

body { scroll-behavior: smooth;}

/* Font Family */
.app-default, body {  font-family: "Space Grotesk"; }

/* Font Sizes */
h1 {font-size: 30px; }
h2 { font-size: 26px; }
h3, .fs-24 {font-size: 24px; }
h4, .fs-22 { font-size: 22px; }
h5, .fs-20 { font-size: 20px; }
h6, .fs-18 { font-size: 18px; }
p, .fs-16 { font-size: 16px; }
.fs-50 {font-size: 50px;}


.fs-25 {font-size: 25px; }
.fs-15 { font-size: 15px; }
.fs-13 { font-size: 13px; }
.fs-12 { font-size: 12px; }
.fs-14 { font-size: 14px; }
.fs-30 {font-size: 30px; }
/* Font Weight */

.bold { font-weight: 700;}
.semi-bold { font-weight: 600;}
.regular { font-weight: 500;}
.normal { font-weight: 400;}

.bg-black{background: var(--Black);}
.bg-red{background: var(--table-red);}

.position-relative{
    position: relative;
}
.position-absolute{
    position: absolute;
}
.box-shadow{
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/*image*/
.img-fluid, .full-image { height: 100%; width: 100%; object-fit: contain ;}
/* Coloured Font */

.text-black{ var( --Black);}
.maroon-text { color: var(--maroon);}
.white-text, .profile-detail-parent .upload-btn.red-bg-border-btn i { color: var(--white);}
.red { color: var(--red);}
.light-maroon-text{color: var( --table-bg);}
.text-gray{color:var(--light-gray);}
.green-text{color:var(--green);}
.light-gray-text{color:var(--light-gray);}
.medium-gray-text{color:var(--medium-gray);}
.dark-maroon-text { color: var(--dark-maroon);}
.charcoal-text {color: var(--charcoal);}
.neutral-gray-text {color: var(--neutral-gray);}
.brownish-text {color: var(--brownish-maroon);}
.border-bottom {color: var(--border-gray);}
.gunmetal {color: var(--gunmetal);}
.dark-brown-text {color: var(--dark-brown);}
.greyish-brown-text {color: var(--greyish-brown);}
.charcoal-gray-text {color: var(--charcoal-gray);}
.dark-gray-text {color: var(--dark-gray);}
.dark-bluish-purple-text {color:var(--dark-bluish-purple);}

.app-default:not(.buyer-dashboard), body:not(.buyer-dashboard) { background-color: var(--white); }
/* Buttons */
.red-bg-border-btn {background: var(--red); padding: 10px; border-radius: 5px; border: 1px solid var(--red); color: white;}


::-webkit-scrollbar {  width: 10px;  background-color: transparent;  }
::-webkit-scrollbar-track {  background-color: transparent;  }
::-webkit-scrollbar-thumb {  background-color: #888;  border-radius: 20px;  }
::-webkit-scrollbar-thumb:hover {  background-color: #555;  }

body { background:var(--body-bg); }

.padding { padding-block: 6em;}
.padding-block{padding-top: 12em;padding-bottom: 5em;}




.login-right { position: relative; background: linear-gradient(0deg, rgba(88, 0, 0, 0.4) 0%, rgba(88, 0, 0, 0.4) 100%), url(https://vivo-link.democustomprojects.com/website/assets/media/images/login-men.svg); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.red-border-btn { padding: 4px 57px 4px 57px; border-radius: 25px; color: var(--red);  background-color: var(--white); border: 1px solid var(--red); transition: 0.3s ease-in;}
.red-border-btn:hover { background-color: var(--red); color: var(--white); border-color: var(--white); transition: 0.3s ease-in;}



/* Login */
.register-logo img { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-repeat: no-repeat; background-position: center; }
.register-logo { width: 180px; margin: auto; }
.login-form-main, .reset-main { padding: 32px 40px; border-radius: 8px; background: #FFEFEF; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06); }
.login-form-main input { background: white; }

/*sign-up*/


/*.sign-in-parent .signup-card{*/
/*    background: var(--white);*/
/*    border-radius: 8px;*/
/*    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
/*    width: 494px;*/
/*}*/
.sign-in-parent .signup-card {
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 494px;
    padding: 57px 23px;
}

.sign-in-parent  .role-option{
    padding: 10px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--red);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 10px;
    height: calc(100% - 20px);
}

/* Apply red background when the input is selected */
.sign-in-parent input[type="radio"]:checked + .role-option {
    background-color: var(--checkbox-red); /* Red background */
    border-color: var(--red);
    /*color: var(--white);*/
    font-weight: bold;
}

.sign-in-parent .role-option:hover {
    background: var(--checkbox-red);
}

.sign-in-parent input[type="radio"] {
    display: none;
}

.sign-in-parent .parenttype-label {
    display: flex;
    gap: 23px;
}

/*.sign-in-parent .roles-form-parent {*/
/*    border-radius: 10px;*/
/*    background: var(--light-pink);*/
/*    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);*/
/*    padding: 30px 10px 20px 10px;*/
/*}*/
.sign-in-parent .roles-form-parent {
    border-radius: 10px;
    background: var(--light-pink);
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
    padding: 30px 21px 30px 21px;
}

.sign-in-parent .seller-tab-image {
    width: 100%;
    height: 82%;
}

.sign-in-parent fieldset {
    display: none;
}

.sign-in-parent fieldset:first-of-type {
    display: block;
}

.sign-in-parent .button-container .red-border-btn.end_buttons.previous {
    border-radius: 6px;
    padding: 4px 0px 4px 0px;
}

.sign-in-parent .button-container .red-bg-border-btn:hover {
    color: var(--red);
    background-color: var(--white);
    border: 1px solid var(--red);
}
.form-group { position: relative; }
.custom_eye_icon { position: absolute; top: 70px; right: 10px; }
.form-control.is-invalid ~ .custom_eye_icon, .was-validated .form-control:invalid ~ .custom_eye_icon { right: 35px; }
.login-password-parent .login-password-toggle.is-invalid ~ .toggle-password { top: 45% !important; right: 35px !important; }

/* Register */
.sign-in-parent .dz-default.dz-message {display: none;}
.sign-in-parent .dropzone-main { padding-inline: 20px; padding-block: 28px; border: 2px dashed var(--dropzone-gray); border-radius: 6px; }
.sign-in-parent .dropzone-main .dropzone-select img { width: 100%; height: 100%; object-fit: cover; }
.sign-in-parent .dropzone-main .upload-img { width: 65px; height: 65px; margin: auto; }
.scrolltop ,.scrolltop:hover {background-color: var(--red);}
.scrolltop>i{color:var(--white);}
.reset-submit-btn, .reset-submit-btn:hover, .reset-password:focus-visible, .reset-btn, .reset-btn:hover {background: #E74040;color: white;padding: 12px;border: none;outline: none;border-radius: 5px;}*

.login_details .form-group:has(.is-invalid) i.custom_eye_icon{bottom:42px;right: 35px;}
.login_details .form-group {margin-bottom: 15px;}
.sign_in_btn button, .sign_in_btn a {width: 100%;}
.sign_in_btn button img, .sign_in_btn a img {width: 10px;height: 15px;margin-left: 10px;}
.sign_in_btn {margin: 25px 0;}
.signin_text h4 {color: var(--grey_color);font-size: 32px;margin-bottom: 15px;}
.signin_text {text-align: center;border-bottom: 1px solid #DBDBDB;padding-bottom: 10px;margin-bottom: 40px;}
.btn_global{ transition: transform 0.3s ease, box-shadow 0.3s ease;}
.btn_global:hover { transform: scale(1.05);}
form .form-group .verify_code {display: flex;align-items: center;gap: 15px;}
form .form-group .verify_code input.form-control {text-align: center;}
.resend_passcode {display: flex;justify-content: space-between;align-items: center;}
.resend_passcode a {color: #4A4A4A; font-size: 16px; text-decoration: underline;}
.form-group label{color: var(--grey_color); font-size: 16px; line-height: 25px;margin-bottom: 10px;}
.signup-card .invalid-feedback, #resetForm .invalid-feedback, #loginForm .invalid-feedback  { color: var(--red); font-size:14px; }
.login_details  .verify_code .inputs_tab::-webkit-outer-spin-button , .login_details  .verify_code .inputs_tab::-webkit-inner-spin-button   { -webkit-appearance: none; }