.dropArea {
    border: 2px dashed transparent;
    border-radius: 0.25rem;
    margin: 0.125rem 0.5rem 0.125rem 0.5rem;
    padding: 0.375rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    white-space: pre-line; /*erlaubt '\n' im AreaText*/
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    background-color: var(--blue-1);
    border-color: var(--blue-3);
    color: var(--textcolor-1);
    width: 100%;
}

.tng-dark-theme .dropArea {
    background-color: var(--dark-gray-4);
    color: var(--dark-textcolor-1);
    border-color: var(--dark-gray-2);
}

    .tng-dark-theme .dropArea:hover {
        color: var(--dark-textcolor-1);
        background-color: var(--dark-gray-3);
    }

.dropArea:hover {
    background-color: var(--blue-2);
    color: var(--textcolor-1);
}

.dropArea input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.buttonArea {
    color: var(--textcolor-2);
    background-color: var(--f-color-3);
    padding: 1.58rem;
    align-self: center;
    justify-content: center;
    cursor: pointer;
    display: flex;
    border-radius: 0.375rem;
    position: relative;
    width: 100%;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    .buttonArea input[type=file] {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        font-size: 0;
        opacity: 0;
        cursor: pointer;
    }

.dropArea.disabled {
    border: 1px dashed var(--gray-5);
    background-color: transparent !important;
    cursor: default;
    color: var(--textcolor-3) !important;
}

.tng-dark-theme .dropArea.disabled {
    border: 1px dashed var(--dark-white-1);
    color: var(--dark-gray-1) !important;
}

.dropArea.disabled input[type=file]{
    cursor: default;
}

.buttonArea.disabled {
    border: 1px dashed var(--gray-5);
    background-color: transparent !important;
    cursor: default;
    color: var(--textcolor-3) !important;
}

.tng-dark-theme .buttonArea.disabled {
    border: 1px dashed var(--dark-white-1);
    color: var(--dark-gray-1) !important;
}

.buttonArea.disabled input[type=file] {
    cursor: default;
}