:root {
    /* Ratios */
    /* Ratio */
    --ratio-width-1920: 1;
    --ratio-width-1728: 0.9;
    --ratio-width-1512: 0.78;
    --ratio-width-1440: 0.75;
    --ratio-width-1280: 0.66;
    --ratio-width-1024: 0.53;
    --ratio-width-992: 0.51;
    --ratio-width-834: 0.43;
    --ratio-width-768: 0.4;
    --ratio-height-1117: 1.03;
    --ratio-height-1133: 1.04;
    --ratio-height-1194: 1.1;
    --ratio-height-1366: 1.26;
    --ratio-height-1080: 1;
    --ratio-height-1024: 0.94;
    --ratio-height-900: 0.83;
    --ratio-height-928: 0.9;
    --ratio-height-828: 0.76;
    --ratio-height-728: 0.76;
    --ratio-height-720: 0.66;
    --ratio-height-600: 0.55;
    --ratio-height-561: 0.52;
    --ratio-height-500: 0.46;
    --ratio-height-400: 0.41;
    /* Colors */
    --primary-color: #007bff;
    --primary-hover: #0056b3;
    --secondary-color: #6c757d;
    --secondary-hover: #545b62;
    --success-color: #28a745;
    --success-hover: #218838;
    --danger-color: #dc3545;
    --text-color: #333;
    --border-color: #ced4da;
    /* Spacing */
    --spacing-sm: 5px;
    --spacing-md: 8px;
    --spacing-lg: 16px;
    /* Font sizes */
    --font-sm: 12px;
    --font-md: 14px;
    --font-lg: 18px;
    /* Border radius */
    --border-radius-sm: 3px;
    --border-radius-md: 4px;
    --border-radius-lg: 6px;
}
:root {
    --brand-button-primary: #FF5900;
    --brand-button-secondary: #D9480F;
    --brand-border-radius: 8px;
    --brand-button-text: #FFF;
    --brand-text-primary: #111827;
    --brand-text-secondary: #6B7280;
}
/* Media queries for different screen widths */
@media screen and (min-width: 1920px) {
    :root {
        --ratio-width: var(--ratio-width-1920);
        --ratio-height: var(--ratio-height-1080);
    }
}

@media screen and (min-width: 1728px) and (max-width: 1919px) {
    :root {
        --ratio-width: var(--ratio-width-1728);
        --ratio-height: var(--ratio-height-928);
    }
}

@media screen and (min-width: 1512px) and (max-width: 1727px) {
    :root {
        --ratio-width: var(--ratio-width-1512);
        --ratio-height: var(--ratio-height-828);
    }
}

@media screen and (min-width: 1440px) and (max-width: 1511px) {
    :root {
        --ratio-width: var(--ratio-width-1440);
        --ratio-height: var(--ratio-height-828);
    }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
    :root {
        --ratio-width: var(--ratio-width-1280);
        --ratio-height: var(--ratio-height-720);
    }
}

@media screen and (min-width: 992px) and (max-width: 1279px) {
    :root {
        --ratio-width: var(--ratio-width-992);
        --ratio-height: var(--ratio-height-561);
    }
}

@media screen and (min-width: 834px) and (max-width: 991px) {
    :root {
        --ratio-width: var(--ratio-width-834);
        --ratio-height: var(--ratio-height-500);
    }
}

@media screen and (min-width: 745px) and (max-width: 833px) {
    :root {
        --ratio-width: var(--ratio-width-768);
        --ratio-height: var(--ratio-height-400);
    }
}

@media (max-width: 744px) {
    :root {
        --ratio-width: var(--ratio-width-768);
        --ratio-height: var(--ratio-height-400);
    }
}


html {
    font-size: 14px;
}

* {
    font-family: 'Inter', sans-serif !important;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}


.input-field {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .input-field:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

/* Number input specific styles */
.input-number {
    -moz-appearance: textfield;
}

    .input-number::-webkit-outer-spin-button,
    .input-number::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* Common button styles */
.btn {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    background-color: #007bff;
    border: 1px solid transparent;
    padding: 8px 16px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 4px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    cursor: pointer;
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #004085;
    }

.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

    .btn-secondary:hover {
        background-color: #545b62;
        border-color: #4e555b;
    }

.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

    .btn-success:hover {
        background-color: #218838;
        border-color: #1e7e34;
    }

/* Common input size variations */
.input-small {
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
}

.input-large {
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 6px;
}

/* Common button size variations */
.btn-small {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 3px;
}

.btn-large {
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 6px;
}

.dynamic-width {
    box-sizing: border-box;
}

.stimes-dropdown {
    width: 100%;
    height: 40px;
    padding: 8px 12px; /* Add some padding for better text spacing */
    border: 1px solid #ccc; /* Light grey border */
    border-radius: 8px; /* Softer, more modern rounded corners */
    font-size: 16px; /* Slightly smaller font size for a modern look */
    background-color: #f8f8f8; /* Subtle light grey background */
    color: #333; /* Dark grey text color for readability */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
    transition: all 0.3s ease; /* Smooth transition for hover and focus effects */
    cursor: pointer; /* Pointer cursor to indicate interactiveness */
}

    .stimes-dropdown:hover {
        background-color: #eaeaea; /* Slightly darker on hover for feedback */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
    }

    .stimes-dropdown:focus {
        outline: none; /* Remove default outline */
        border-color: #007bff; /* Blue border to indicate focus */
        box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Blue glow on focus */
    }

    .stimes-dropdown option {
        padding: 10px; /* Add some padding inside options */
        color: #333; /* Keep the same text color for consistency */
        background-color: #f8f8f8; /* Same background as the dropdown */
    }

.hidden {
    display: none !important;
}
/* Common input styles */
.input-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    /*gap: calc(10px * var(--ratio-width));*/
    margin-top: 0px;
    margin-bottom: 15px;
}

.input-label {
    color: var(--indigo-blue-darker);
    font-family: var(--font-primary);
    font-size: calc(var(--body-font-size) * var(--ratio-width));
    font-weight: var(--body-font-regular);
    padding: calc(10px * var(--ratio-height)) 0px;
    line-height: normal;
    min-width: calc(14rem * var(--ratio-width));
    margin-bottom: 0px;
}

.input-label-f1 {
    flex: 1;
}

.input-label-small {
    font-size: calc(var(--font-size-sm) * var(--ratio-width));
}

.input {
    display: flex;
    height: calc(48px * var(--ratio-height));
    width: 100%;
    padding: calc(10px * var(--ratio-height));
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: calc(10px * var(--ratio-width));
    background-color: var(--white);
    font-family: var(--font-primary);
    font-size: calc(var(--body-font-size) * var(--ratio-width));
    font-weight: var(--body-font-regular);
    color: var(--indigo-blue-darker);
    border: calc(1px * var(--ratio-width)) solid var(--neutral-gray-disabled);
    transition: border-color 0.3s ease, background-color 0.3s ease;
    &::placeholder

{
    color: var(--indigo-blue-darker);
    opacity: 0.5;
}

&.is-invalid {
    border: 1px solid var(--red-border);
}

&.normal {
    border: 1px solid var(--neutral-gray-disabled);
}

&.is-valid {
    border: 1px solid var(--green);
}

&:disabled {
    border: 1px solid var(--neutral-gray-disabled);
    background-color: var(--neutral-gray-disabled);
}

}

.input:focus-visible {
    outline: none;
    border: 1px solid #0094ff;
    background: #fff;
}

.input.error:focus-visible {
    border-color: var(--Toast-Critical, #ff3b30);
    outline: none;
    background: #fff;
}

.input::placeholder {
    font-size: calc(16px * var(--ratio-height));
    font-weight: 400;
    color: var(--secondary-color, #9797aa);
}

.primary-button {
    height: calc(48px * var(--ratio-height));
    font-size: calc(var(--body-font-size) * var(--ratio-width));
    border-radius: 8px;
    border: 1px solid var(--Primery, #2c3d7b);
    background: var(--Primery, #2c3d7b);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    color: #fff;
    font-family: Lexend;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

/* Input type with icon and sub text*/
.input-with-icon-text {
    width: 100%;
}

.input-and-icon {
    display: flex;
    flex-direction: row;
}

.input-icon {
}

.input-sub-text {
}

.date-icon {
    position: absolute;
    right: calc(12px * var(--ratio-width));
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    pointer-events: none;
}

.datepicker {
    padding-right: calc(40px * var(--ratio-width)); /* Space for icon */
}

/* Custom datepicker styling */
.custom-date-picker {
    appearance: none; /* Removes the default appearance */
    -webkit-appearance: none; /* For Safari */
    position: relative;
    padding: calc(10px * var(--ratio-height)) calc(40px * var(--ratio-width)) calc(16px * var(--ratio-height)) calc(10px * var(--ratio-width)); /* Adds padding to make room for the icon */
    background-color: #fff; /* Ensures the input's background matches */
    border: 1px solid #efefef; /* White border */
    border-radius: calc(10px *var(--ratio-height));
    width: 100%;
    color: #333333;
    font-size: calc(18px * var(--ratio-height));
    font-family: Lexend;
    font-weight: 400;
    word-wrap: break-word
}

    /* This makes the original calendar icon invisible while keeping it clickable */
    .custom-date-picker::-webkit-calendar-picker-indicator {
        opacity: 0;
        display: block;
        position: absolute;
        right: 10px;
        width: 20px;
        height: 100%;
        cursor: pointer;
    }

    /* Custom white icon overlay */
    .custom-date-picker:before {
        content: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.48438 12.7222C5.48438 9.78904 5.48438 8.32245 6.36305 7.41122C7.24173 6.5 8.65595 6.5 11.4844 6.5H14.4844C17.3128 6.5 18.727 6.5 19.6057 7.41122C20.4844 8.32245 20.4844 9.78904 20.4844 12.7222V14.2778C20.4844 17.211 20.4844 18.6776 19.6057 19.5888C18.727 20.5 17.3128 20.5 14.4844 20.5H11.4844C8.65595 20.5 7.24173 20.5 6.36305 19.5888C5.48438 18.6776 5.48438 17.211 5.48438 14.2778V12.7222Z' stroke='%231C274C' stroke-width='1.5'/%3E%3Cpath d='M9.48438 6.5V5.5' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M16.4844 6.5V5.5' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.48438 10.5H20.4844' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
        position: absolute;
        right: 10px;
        top: 60%;
        transform: translateY(-50%);
        pointer-events: none; /* Makes the icon non-clickable but allows the input's functionality */
    }

    .custom-date-picker::after {
        content: 'DOB';
        position: absolute;
        top: 70%;
        transform: translateY(-50%);
        pointer-events: none; /* Makes the icon non-clickable but allows the input's functionality */
        color: var(--text-color-dull);
        font-family: Lexend;
        font-size: calc(12px * var(--ratio-height));
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.24px;
    }

.custom-form-element {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    padding: calc(10px * var(--ratio-height)) calc(40px * var(--ratio-width)) calc(16px * var(--ratio-height)) calc(10px * var(--ratio-width));
    background-color: #fff;
    border: 1px solid #efefef;
    border-radius: calc(10px * var(--ratio-height));
    width: 100%;
    color: #333333;
    font-size: calc(18px * var(--ratio-height));
    font-family: 'Lexend', sans-serif;
    font-weight: 400;
    word-wrap: break-word;
    box-sizing: border-box;
}

/***************** User invitations *************************/
.data-div {
    background: url('/img/invitation/invitation-bg.png') no-repeat center center;
    background-size: cover;
    min-height: 100%; /* ensures it covers full viewport if needed */
    display: flex;
    justify-content: center; /* horizontal center */
}

.invitaion-div {
    width: calc(964px * var(--ratio-height));
    margin: 0 auto;
    display: flex;
    min-width: calc(420px * var(--ratio-height));
    padding: calc(16px * var(--ratio-height));
    flex-direction: column;
    align-items: center;
    gap: calc(10px * var(--ratio-height));
    border-radius: 26px;
    background: linear-gradient(0deg, var(--white-90, rgba(255, 255, 255, 0.90)) 0%, var(--white-90, rgba(255, 255, 255, 0.90)) 100%), linear-gradient(180deg, var(--Brand-Secondary, #7CBCFE) 0%, var(--white-100, #FFF) 100%);
    box-shadow: 0px 0px 0px 4px var(--white-60, rgba(255, 255, 255, 0.60)), 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    height: fit-content;
}

.invitation-header {
    width: 100%;
    color: #000;
    text-align: center;
    font-family: Lexend;
    font-size: calc(26px * var(--ratio-height));
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.26px;
    padding: calc(10px * var(--ratio-height));
    display: flex;
    justify-content: left;
}

.invitation-item {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.invitation-item-details {
    flex: 2;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: left;
    align-items: center;
}

    .invitation-item-details img {
        width: calc(37px * var(--ratio-height));
        height: calc(35px * var(--ratio-height));
        flex-shrink: 0;
    }

.invitation-item-actions {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: end;
}

.invitation-ou-name {
    color: var(--black-60, rgba(0, 0, 0, 0.60));
    font-family: Lexend;
    font-size: calc(16px * var(--ratio-height));
    font-style: normal;
    font-weight: 400;
    line-height: 140%; /* 22.4px */
    letter-spacing: -0.16px;
}

.invitation-img-div {
    width: 100%;
}

    .invitation-img-div img {
        width: 100%;
    }

.btn-accept {
    display: flex;
    padding: calc(12px * var(--ratio-height)) calc(24px * var(--ratio-height));
    justify-content: center;
    align-items: center;
    border-radius: calc(8px * var(--ratio-height));
    border-radius: calc(10px * var(--ratio-height));
    border-top: 2px solid var(--white-20, rgba(255, 255, 255, 0.20));
    background: var(--Primery, #2C3D7B);
    box-shadow: 0px 2px 6px 0px var(--black-20, rgba(0, 0, 0, 0.20));
    color: var(--white-100, #FFF);
    font-family: Lexend;
    font-size: calc(14px * var(--ratio-height));
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 22.4px */
    letter-spacing: -0.16px;
    flex: 1;
}

.btn-reject {
    display: flex;
    height: calc(48px * var(--ratio-height));
    padding: calc(12px * var(--ratio-height)) calc(24px * var(--ratio-height));
    justify-content: center;
    align-items: center;
    gap: calc(10px * var(--ratio-height));
    align-self: stretch;
    border-radius: calc(10px * var(--ratio-height));
    border: 1px solid var(--Primery, #2C3D7B);
    color: var(--Primery, #2C3D7B);
    text-align: center;
    font-family: Lexend;
    font-size: calc(14px * var(--ratio-height));
    font-style: normal;
    font-weight: 500;
    line-height: calc(20px * var(--ratio-height)); /* 142.857% */
    letter-spacing: var(--Label-Large-Tracking, 0.1px);
    flex: 1;
}

.btn-skip {
    color: #000;
    font-family: Lexend;
    font-size: calc(16px * var(--ratio-height));
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 22.4px */
    letter-spacing: -0.16px;
    border: none;
    background: none;
    flex: 1;
}

.result-accepted-data {
    display: flex;
    flex-direction: row;
    gap: calc(10px * var(--ratio-height));
    background-color: #DDFFEB;
    border-radius: calc(12px * var(--ratio-height));
    border: 1px solid rgba(1, 114, 203, 0.10);
    width: 100%;
    height: calc(48px * var(--ratio-height));
}

.result-accepted-tag {
    width: calc(5px * var(--ratio-height));
    background-color: #00963C;
    border-radius: calc(12px * var(--ratio-height)) 0px 0px calc(12px * var(--ratio-height));
}

.result-accepted-action {
    color: var(--Toast-Sucess, #00963C);
    font-family: Lexend;
    font-size: calc(16px * var(--ratio-height));
    font-style: normal;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.result-rejected-data {
    display: flex;
    flex-direction: row;
    gap: calc(10px * var(--ratio-height));
    background-color: #FFE1E1;
    border-radius: calc(12px * var(--ratio-height));
    border: 1px solid rgba(1, 114, 203, 0.10);
    width: 100%;
    height: calc(48px * var(--ratio-height));
}

.result-rejected-tag {
    width: calc(5px * var(--ratio-height));
    background-color: #FF3B30; /* red */
    border-radius: calc(12px * var(--ratio-height)) 0px 0px calc(12px * var(--ratio-height));
}

.result-rejected-action {
    color: #FF3B30; /* red text */
    font-family: Lexend;
    font-size: calc(16px * var(--ratio-height));
    font-style: normal;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.result-skipped-data {
    display: flex;
    flex-direction: row;
    gap: calc(10px * var(--ratio-height));
    background-color: #F2F2F2; /* light ash bg */
    border-radius: calc(12px * var(--ratio-height));
    border: 1px solid rgba(1, 114, 203, 0.10);
    width: 100%;
    height: calc(48px * var(--ratio-height));
}

.result-skipped-tag {
    width: calc(5px * var(--ratio-height));
    background-color: #A3A3A3; /* ash/gray */
    border-radius: calc(12px * var(--ratio-height)) 0px 0px calc(12px * var(--ratio-height));
}

.result-skipped-action {
    color: #555555; /* dark ash text */
    font-family: Lexend;
    font-size: calc(16px * var(--ratio-height));
    font-style: normal;
    font-weight: 500;
    display: flex;
    align-items: center;
}


/***************** User invitations End *********************/

.side-nav-icon img {
    height: calc(28px * var(--ratio-height));
    width: auto;
}

.side-nav-text {
    display: flex;
    align-items: center;
}

.backup-code-footer {
    font-size: calc(14px * var(--ratio-height));
    text-align: end;
    font-style: normal;
    font-weight: 400;
}

.backup-warning {
    font-size: calc(14px * var(--ratio-height));
    font-style: normal;
    font-weight: 400;
}

/** Profile */
.profile-form {
    display: flex;
    flex-direction: column;
    height: calc(138px * var(--ratio-height));
}

.profile-logout-details {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.profile-logout-details-img img {
    width: calc(50px * var(--ratio-height));
    height: calc(50px * var(--ratio-height));
}

.profile-data {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .profile-data .profile-data-name {
        overflow: hidden;
        color: var(--Darker, #161E3D);
        text-overflow: ellipsis;
        /* Header 5 */
        font-family: Lexend;
        font-size: calc(16px * var(--ratio-height));
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.32px;
    }

    .profile-data .profile-data-email {
        overflow: hidden;
        color: var(--Body-Text, #5C5C77);
        text-overflow: ellipsis;
        font-family: Lexend;
        font-size: calc(15px * var(--ratio-height));
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: -0.3px;
    }
.profile-logout {
    height: 63px;
    border-radius: 0px 0px 8px 8px;
    border: none;
    background: #F9FEFF;
    border-top: 1px solid #ddd;
}
.profile-logout img {
    height: calc(24px * var(--ratio-height));
    width: calc(24px * var(--ratio-height));
}
/** Profile end */