@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&display=swap");

body {
    background-color: #fff;
    padding: 22px 35px;
}

.alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    width: auto;
    z-index: 1050;
}

#alertDiv {
    position: fixed;
    top: 20px;
    right: 20px;
    width: auto;
    z-index: 1050;
}

/* Texts */
.text-black-24-600 {
    color: var(--colors-text-text-primary-900, #101828);
    text-align: center;
    font-family: "Inter";
    font-size: var(--Font-size-display-xs, 24px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-display-xs, 32px);
    /* 133.333% */
    letter-spacing: -0.48px;
}

.text-black-16-400 {
    color: var(--colors-text-text-tertiary-600, #475467);
    text-align: center;
    font-family: "Inter";
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-md, 24px);
    /* 150% */
    letter-spacing: -0.32px;
}

.file-title{
    font-size: 12px;
}

.file-extension{
    font-size: 10px;
}

.text-black-12-500 {
    color: #101828;
    font-family: "Inter";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    /* 150% */
}

.text-black-14-500 {
    color: var(--colors-text-text-secondary-700, #344054);
    font-family: "Inter";
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 20px);
    /* 142.857% */
    letter-spacing: -0.28px;
}

.text-black-14-400 {
    color: var(--Gray-500, #667085);
    font-family: "Inter";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

.text-blue-14-600 {
    font-family: "Inter";
    font-size: var(--Font-size-text-sm, 14px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-text-sm, 20px);
    /* 142.857% */
    letter-spacing: -0.28px;

    background: var(--Radial,
            radial-gradient(88.97% 129.08% at 90.68% 100%, #0b6bc1 0%, #003375 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gray-14-600 {
    color: var(--Mid-Gray-Mid-Gray-2, #6e7c87);
    font-family: "Inter";
    font-size: 14.471px;
    font-style: normal;
    font-weight: 600;
    line-height: 28.235px;
    /* 195.122% */
    letter-spacing: -0.203px;
    text-transform: uppercase;
}

.text-gray-14-500 {
    color: var(--Mid-Gray-Mid-Gray-2, #6e7c87);
    font-family: "Inter";
    font-size: 14.471px;
    font-style: normal;
    font-weight: 500;
    line-height: 28.235px;
    /* 195.122% */
    letter-spacing: -0.203px;
    text-transform: uppercase;
}

.text-gray-14-500 {
    color: var(--Mid-Gray-Mid-Gray-2, #6e7c87);
    font-family: "Inter";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 28.235px;
    /* 195.122% */
    letter-spacing: -0.203px;
    text-transform: uppercase;
}

.text-black-16-500 {
    color: var(--Gray-900, #101828);
    font-family: "Inter";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.32px;
}

.text-black-16-600 {
    color: var(--Gray-700, #344054);
    font-family: "Inter";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 125% */
    letter-spacing: -0.48px;

    border-bottom: 1px solid #7a7a7a;
    width: 100% !important;
    padding-bottom: 9px;
    padding-top: 9px;
}

.text-black-18-400 {
    color: var(--Black, #000);
    text-align: center;
    font-family: "Inter";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.54px;
    opacity: 0.5;
}

.text-black-18-600 {
    color: var(--Gray-900, #101828);
    font-family: "Inter";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    /* 155.556% */
}

.text-black-10-500 {
    color: var(--colors-text-text-secondary-700, #344054);
    font-family: "Inter";
    font-size: var(--Font-size-text-sm, 10px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Line-height-text-sm, 10px);
    /* 142.857% */
    letter-spacing: -0.28px;
}

.text-black-56-600 {
    font-family: "Inter";
    /* text-align: center; */
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -2.6px;

    background: #000;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gray-14-400 {
    color: var(--Gray-500, #667085);
    font-family: "Inter";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

.text-blue-32-600 {
    font-family: "Inter";
    font-size: 32px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -1.28px;
    background: var(--Radial,
            radial-gradient(88.97% 129.08% at 90.68% 100%, #0b6bc1 0%, #003375 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-blue-56-600 {
    font-family: "Inter";
    /* text-align: center; */
    font-size: 56px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -2.6px;

    background: var(--Radial,
            radial-gradient(88.97% 129.08% at 90.68% 100%, #0b6bc1 0%, #003375 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.navbar-login {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.navbar-border {
    height: 1px;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(52, 160, 226, 1) 50%,
            rgba(255, 255, 255, 1) 100%);
}

.input-field {
    display: flex;
    padding: 10px 14px;
    align-items: center;
    gap: var(--spacing-md, 8px);
    align-self: stretch;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--Colors-Border-border-primary, #d0d5dd);
    background: var(--Colors-Background-bg-primary, #fff);

    /* Shadows/shadow-xs */
    box-shadow: 0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-xs, rgba(16, 24, 40, 0.05));
}

.file-uploader {
    border-radius: 15px;
    border: 1px solid #dadada !important;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0px 156px 44px 0px rgba(176, 176, 176, 0),
        0px 100px 40px 0px rgba(176, 176, 176, 0.01),
        0px 56px 34px 0px rgba(176, 176, 176, 0.05),
        0px 25px 25px 0px rgba(176, 176, 176, 0.09),
        0px 6px 14px 0px rgba(176, 176, 176, 0.1);
}

.file-upload-box {
    border: none !important;
}

.file-browse-button {
    color: black !important;
    opacity: 0.5;
}

select {
    display: flex;
    align-items: flex-start;
    border-radius: 8px;
    border: 1px solid var(--Radial, #0b6bc1) !important;

    /* Shadow/xs */
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    width: 100%;
}

.card {
    width: 100%;
}

.file-category-1 {
    width: 100%;
    height: 40px;
}

.file-category-2 {
    width: 100%;
    height: 40px;
}

.file-category-3 {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    height: 40px;
    width: 100% !important;
}

.file-category-4 {
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    border-left: 0;
    width: 100% !important;
    height: 40px;
}

/* MODAL */
.modal-content-spinner {
    display: flex;
    /* width: 702px; */
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;

    border-radius: 20px;
    border: 1px solid #dfdfdf;
    background: #fff;
    box-shadow: 0px 248px 69px 0px rgba(0, 0, 0, 0),
        0px 158px 63px 0px rgba(0, 0, 0, 0.01),
        0px 89px 53px 0px rgba(0, 0, 0, 0.03), 0px 40px 40px 0px rgba(0, 0, 0, 0.04),
        0px 10px 22px 0px rgba(0, 0, 0, 0.05);
}

.login-container {
    display: flex;
    max-width: 440px;
    height: fit-content;
    margin: auto auto;
    padding: var(--spacing-4xl, 32px) 40px;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3xl, 24px);
    align-self: stretch;
    border-radius: var(--spacing-lg, 12px);
    background: var(--Colors-Background-bg-primary, #fff);

    /* Shadows/shadow-sm */
    box-shadow: 0px 1px 3px 0px var(--Colors-Effects-Shadows-shadow-sm_01, rgba(16, 24, 40, 0.1)),
        0px 1px 2px 0px var(--Colors-Effects-Shadows-shadow-sm_02, rgba(16, 24, 40, 0.06));
}

.login-container img {
    width: 50px;
    margin-bottom: 1rem;
}

.login-container h2 {
    color: var(--colors-text-text-primary-900, #101828);
    text-align: center;
    font-family: "Inter";
    font-size: var(--Font-size-display-xs, 24px);
    font-style: normal;
    font-weight: 600;
    line-height: var(--Line-height-display-xs, 32px);
    /* 133.333% */
    letter-spacing: -0.48px;
}

.login-container p {
    color: var(--colors-text-text-tertiary-600, #475467);
    text-align: center;
    font-family: "Inter";
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-md, 24px);
    /* 150% */
    letter-spacing: -0.32px;
}

.btn-primary {
    display: flex;
    padding: 12.5px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 11px;
    border: 1px solid #fff;

    border-radius: 11px !important;
    background: var(--Radial,
            radial-gradient(88.97% 129.08% at 90.68% 100%, #0b6bc1 0%, #003375 100%)) !important;

    color: #fff;
    /* font-family: Inter; */
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.64px;
}

.btn-primary:hover {
    background-color: #00336a;
}

.white-blue-button {
    display: flex;
    padding: 12.5px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 11px;
    border: 1px solid #003375;

    font-family: "Inter";
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.72px;
    background: var(--Radial,
            radial-gradient(88.97% 129.08% at 90.68% 100%, #0b6bc1 0%, #003375 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.custom-checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Client */
.list-container {
    padding: 20px 25px;
    border-radius: 8px;
    border: 1px solid var(--Gray-200, #eaecf0);
    background: var(--White, #fff);

    /* Shadow/sm */
    box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
        0px 1px 2px 0px rgba(16, 24, 40, 0.06);
}

.label-span {
    /* mix-blend-mode: multiply; */
    display: flex;
    padding: 2px 4px;
    justify-content: center;
    align-items: left;
    border-radius: 16px;
    background: rgba(0, 51, 117, 0.1);

    text-align: center;
    font-family: "Inter";
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 18px;
    /* 150% */

    color: #003375;

    margin-left: 8px;
}

input[id="checkbox"] {
    outline: 0px solid #0b6bc1;
    /* Sets the outline color */
    box-shadow: 0 0 0 0px #0b6bc1;
    /* Adds an outline-style shadow */
    border-radius: 6px;
    /* Makes outline corners rounded */
    accent-color: rgba(0, 51, 117, 1);
    /* Change checkbox color */
}

/* Tasks scrollbale */

.tasks {
        height: 100%;



    /* height: inherit; */
    /*Set the maximum height for the scrollable area */
    /* overflow-y: auto; */
    /* Enable vertical scrolling */
    /* padding-right: 5px; Add padding to avoid scrollbar overlapping content */
}

/* Optional: Hide scrollbar for Webkit-based browsers (Chrome, Safari) */
.tasks::-webkit-scrollbar {
    width: 0px;
}

.tasks::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 4px;
}

.tasks::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}