:root {
    --mainBG: #f4f6f6;
    --colorWhite: #ffffff;
    --colorBlack: #000000;
    --colorMain: #004584;
    --colorMainSecondary: #D9E1E8;
    --colorSecondary: #959ca4;
    --textSecondary: #525252;
    --selectColor: #707070;
    --borderColor1: #dedede;
    --borderColor2: #adb2b6;
    --borderColor3: #8E9BA7;
    --placeholderColor: #d6d6d6;
    --warningsColor: #DFA062;
    --linkColor: #4789ec;
    --mainFont: "Nunito Sans", sans-serif;
    --HeadingFont: "Saira", sans-serif;
}

/* general css */

::placeholder {
    color: var(--placeholderColor);
}

::-ms-input-placeholder {
    /* Edge 12-18 */
    color: var(--placeholderColor);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232300;
}

body {
    font-family: var(--mainFont) !important;
    background-color: var(--mainBG) !important;
    min-height: 100vh;
    align-content: center;
    padding: 40px;
}

/* login page css */

.loginBanner-person {
    position: fixed;
    right: 18%;
    margin: auto;
    height: 83vh;
    bottom: 0;
}

.loginFormMain {
    background: var(--colorWhite);
    padding: 36px 44px;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.loginFormMain .logo {
    margin-bottom: 10px;
}

.loginFormMain h2 {
    font-family: var(--HeadingFont);
    color: var(--colorBlack);
    font-weight: 700;
    line-height: 24px;
    font-size: 24px;
    margin-bottom: 15px;
}

.loginFormMain h2 span {
    color: var(--colorMain);
}

.loginFormMain h6 {
    color: var(--colorSecondary);
    font-size: 14px;
    margin-bottom: 20px;
}

button.thirdParty-Login {
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 15px 0;
    border-radius: 10px;
    border: 1px solid var(--borderColor1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.horizontal-divider {
    position: relative;
    text-align: center;
    padding: 20px 0;
}

button.thirdParty-Login img {
    margin-right: 7px;
}

.horizontal-divider p {
    color: var(--borderColor2);
    font-size: 12px;
    font-weight: 600;
    z-index: 1;
    position: relative;
    margin: -2px auto 0;
    background: var(--colorWhite);
    width: max-content;
    padding: 0 10px;
}

.horizontal-divider:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--borderColor1);
    margin: auto;
}

.input-with-icon input,
.input-without-icon input {
    background: transparent;
    outline: none;
    border: 0;
    width: 100%;
    padding-left: 35px;
    font-size: 16px;
}

.input-without-icon input {
    padding-left: 0;
}

.input-with-icon,
.input-without-icon {
    position: relative;
    border: 1px solid var(--borderColor2);
    border-radius: 10px;
    padding: 15px;
    margin-top: 10px;
}

.input-with-icon:has(input:focus),
.input-without-icon:has(input:focus) {
    border-color: var(--colorMain);
}

.input-with-icon img {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    margin: auto;
}

label.form-check-label {
    color: var(--borderColor2);
    font-weight: 600;
    font-size: 12px;
}

a.link {
    color: var(--linkColor);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}

.input-submit {
    width: 100%;
    background: var(--colorMain);
    color: var(--colorWhite);
    font-size: 16px;
    font-weight: 600;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--colorMain);
    -webkit-transition: all 0.4s ease-In-out;
    -moz-transition: all 0.4s ease-In-out;
    -o-transition: all 0.4s ease-In-out;
    transition: all 0.4s ease-In-out;
}

.input-submit:hover {
    background: transparent;
    color: var(--colorMain);
}

.input-submit2 {
    width: 100%;
    background: var(--colorMainSecondary);
    color: var(--selectColor);
    font-size: 16px;
    font-weight: 600;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--colorMainSecondary);
    -webkit-transition: all 0.4s ease-In-out;
    -moz-transition: all 0.4s ease-In-out;
    -o-transition: all 0.4s ease-In-out;
    transition: all 0.4s ease-In-out;
}

.input-submit2:hover {
    background: transparent;
    color: var(--selectColor);
}

a {
    -webkit-transition: all 0.4s ease-In-out;
    -moz-transition: all 0.4s ease-In-out;
    -o-transition: all 0.4s ease-In-out;
    transition: all 0.4s ease-In-out;
}

.formBottom {
    padding: 10px;
    color: var(--colorSecondary);
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

.formBottom span {
    color: var(--colorBlack);
    font-weight: 600;
}

.input-with-icon-Password input~img {
    right: 15px;
    left: inherit;
}

.input-with-icon-Password input {
    padding-right: 33px;
}

/* Two Factor authentication page css */

.input-small {
    width: 40px;
    height: 52px;
    text-align: center;
    border: 1px solid var(--borderColor2);
    border-radius: 10px;
    padding: 0;
    font-size: 20px;
    outline: none;
}

.input-small:focus {
    border-color: var(--colorMain);
}

.twoFactor-inputMain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 10px 0;
}

.twoFactor-inputWrap {
    font-size: 0;
}

.twoFactor-inputWrap input:not(:last-child) {
    margin-right: 10px;
}

.twoFactorFormMain .input-submit,
.twoFactorFormMain .input-submit2 {
    width: 60%;
    margin-top: 10px;
}

.twoFactorFormMain {
    padding: 45px 0 90px;
    box-shadow: none;
}


/* signup page css */

.signup-Tabs button {
    padding: 10px 80px;
    background: var(--colorMainSecondary);
    color: var(--colorSecondary);
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.signup-Tabs button.active {
    background: var(--colorMain);
    color: var(--colorWhite);
}

.signup-Tabs button.active svg path {
    fill: var(--colorWhite);
}

.signup-Tabs button.active:hover {
    color: var(--colorWhite);
}

.signup-Tabs button:hover {
    color: var(--colorSecondary);
}

.signup-Tabs button:first-child {
    border-radius: 10px 0 0 10px;
}

.signup-Tabs button:last-child {
    border-radius: 0 10px 10px 0;
}


.signup-Tabs button svg path {
    fill: var(--colorSecondary);
}

.signup-Tabs button svg {
    margin-right: 10px;
}


/* signup business info page css */
.input-select select {
    border: 1px solid var(--borderColor2);
    border-radius: 10px;
    padding: 15px;
    margin-top: 10px;
    color: var(--selectColor);
}

.input-select select:focus {
    border-color: var(--borderColor2);
    outline: 0;
    box-shadow: none;
}


/* forgot password page css */

.forgotFormMain .input-submit,
.forgotFormMain .input-submit2 {
    width: 100%;
    margin-top: 10px;
}


/* reset password page css */

.formWarnings p {
    color: var(--warningsColor);
    font-size: 12px;
    font-weight: 500;
    margin-top: 10px;
    text-align: left;
}


/* review detail page css */

.reviewDetailSection {
    padding: 45px 65px 65px;
}

.reviewTableWrap {
    text-align: right;
}

.reviewTable {
    width: 100%;
}

.reviewTable tbody tr td:first-child {
    text-align: left;
}

.reviewTable tbody tr td:last-child {
    text-align: right;
}

.reviewTableWrap a {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.reviewTableWrap a img {
    margin: 0 8px 3px 0;
}

.reviewTable tbody tr td {
    color: var(--textSecondary);
    font-size: 16px;
    font-weight: 400;
    padding: 4px 0;
}



/* residence location page css */

.mapWrap {
    margin: 25px 0 20px 0;
    border-radius: 20px;
    border: 2px solid var(--borderColor3);
    overflow: hidden;
    font-size: 0;
}

/* media queries */

@media (max-width: 1440px) {
    .loginBanner-person {
        right: 8%;
    }
}

@media (max-width: 1200px) {}

@media (max-width: 824px) {}