@import "variables-pc.css";

.calculation-wrapper {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.60);
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.calculation-container {
    border: 1px solid #ccc;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-xl);
}

.calculation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.header-title {
    color: #000000;
    text-align: justify;
    font-weight: var(--font-weight-bold);
}


.calculation-container form label {
    color: #000000;
    text-align: justify;
    font-weight: var(--font-weight-extralight);
}

input#space-capacity, input#team-member-count {
    background: var(--color-bg-primary);
    border: 1px solid #221c15;
    border-radius: var(--border-radius-base);
    color: #000000;
    text-align: justify;
    font-weight: var(--font-weight-extralight);
}

.input-readonly {
    color: #000000;
    text-align: justify;
    font-weight: var(--font-weight-extralight);;
}

.calculation-container form .unit {
    color: #000000;
    text-align: justify;
    font-weight: var(--font-weight-extralight);
}

.remind-wrapper {
    background: #fff6e6;
    border: 1px solid #fce3ca;
    border-radius: var(--border-radius-base);
    display: none;
    align-items: center;
}

span#remind-massage {
    color: #000000;
    text-align: justify;
    font-weight: var(--font-weight-extralight);
}

a#calculation {
    color: #f57b00;
    text-decoration: underline;
}
a#calculation {
        font-size: var(--font-size-sm);
    }

    .calculation-container {
        padding: var(--spacing-8) var(--spacing-9) var(--spacing-6) var(--spacing-8);
        width: 40.125rem;
    }

    .calculation-header span {
        margin-left: var(--spacing-2_5);
    }

    .jisuanqi {
        width: 1.5rem;
    }

    .header-title {
        font-size: var(--font-size-xl);
    }

    .calculation-close-img {
        width: 1.5rem;
        height: 1.5rem;
    }

    .remind-img {
        width: 1rem;
        height: 1rem;
    }

    .calculation-container form {
        margin-top: 2rem;
    }

    .remind-wrapper {
        margin-top: calc(-1 * var(--spacing-2_5));
        margin-bottom: var(--spacing-2_5);
        padding: var(--spacing-2) var(--spacing-3);
    }

    span#remind-message {
        font-size: var(--font-size-xs);
        margin-left: var(--spacing-2_5);
    }

    .calculation-container form label {
        font-size: var(--font-size-md);
        line-height: 2.89;
        margin-right: var(--spacing-5);
    }

    input#space-capacity, input#team-member-count {
        font-size: var(--font-size-md);
        padding-left: var(--spacing-4);
        padding-top: var(--spacing-2);
        padding-bottom: var(--spacing-2);
        min-width: 50%;
    }

    .input-readonly {
        font-size: var(--font-size-md);
    }

    .calculation-container form .unit {
        margin-left: var(--spacing-2);
        font-size: var(--font-size-md);
    }