:root {
    --tick-color: #475569; /* A nice, dark slate grey */
    --active-green: #7BA792;
    --background-green: #6ca58c;
    --background-green-25: rgba(108, 165, 140, 0.25);
    --gray-text: #4b5563;
    --input-border: #cccccc;
}

.header-bar {
    background-color: var(--background-green);
    box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.5);
}

.new-task-box {
    /*
    width: 80%;
        */
    padding-right: 25px;
}

.task-background {
    background-color: white;
    /* background-color: var(--background-green-25);*/
}

.input-field {
    width: 100%;
    border: 1px solid var(--input-border);
    border-radius: 7.5px;
    height: 2.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.input-field-box {
    display: flex;
    margin-right: 3rem;
    color: var(--gray-text);
    font-weight: 600;
    font-size: 1.25rem;
    padding: 2.5px 0px 2.5px 0px;
}

.input-field-entry {
    width: 100%;
}

.input-field-label {
    min-width: 7rem;
    max-width: 7rem;
}

/*  Standard buttons */
.save-button {
    cursor: pointer;
    border-radius: 0.5rem;
    background-color: var(--active-green);
    color: white;
    padding: 0.5rem 3rem 0.5rem 3rem;
    border: 1.5px solid var(--active-green);
    font-weight: 500;
    font: 1rem;
}

.cancel-button {
    cursor: pointer;
    border-radius: 0.5rem;
    color: var(--active-green);
    padding: 0.5rem 3rem 0.5rem 3rem;
    border: 2px solid var(--active-green);
    font-weight: 500;
    font: 1rem;
}

.file-upload-area-small {
    margin-left: 37px;
    width: 66.6666667%; /* w-8/12 */
    border: 1px dashed #808080;
    border-radius: 10px; 
    padding: 7.5px 0px 7.5px 20px;
    cursor: pointer;
}

.modern-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    background-color: white;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .modern-checkbox:hover {
        border-color: #94a3b8;
        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    }

    .modern-checkbox:checked {
        background-color: white;
        border-color: var(--tick-color); 
    }
        .modern-checkbox:checked::after {
            content: "";
            position: absolute;
            left: 8px;
            top: 4px;
            width: 6px;
            height: 12px;
            border: solid var(--tick-color);
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }