.form-wrapper {
    width: 60%;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 20px;
    box-shadow: var(--box-shadow);
    padding: 40px 20px;
    margin: 20px auto;
    background: var(--blocks);
    text-align: center;

    img {
        width: 60%;
    }

    h1 {
        text-align: left;
    }

    form {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 60%;
        margin: auto;

        div {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            gap: 20px;

            input, select, textarea {
                border: 1px solid var(--cts-main);
                color: black;
                border-radius: 10px;
                padding: 5px 10px;
                box-sizing: border-box;
            }

            input:not([type="checkbox"]), select, textarea {
                width: 60%;
            }
        }
    }
}

.dropzone {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.dropzone__area {
    background: rgba(30, 143, 176, .05);
    border: 5px dashed var(--cts-main);
    border-radius: 10px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;

    &.dragover, &:hover {
        background: rgba(35, 180, 166, .15);
        border-color: var(--cts-alt);
    }

    .dropzone__hint {
        color: red;
        font-style: italic;
    }
}

.dropzone__files {
    margin-top: 10px;
    font-size: 14px;
    flex-wrap: wrap;

    div {
        padding: 5px 10px;
        border: 1px solid var(--cts-main);
        border-radius: 5px;
    }
}

.remember-me {
    font-size: small;
    justify-content: flex-end !important;
    gap: 0;
}

.forgot-pass {
    text-decoration: none;
    color: red;
    font-weight: bold;

    &:hover {
        color: var(--cts-main);
    }
}

button {
    background: var(--cts-main);
    color: var(--text);
    border-radius: 20px;
    border: none;
    padding: 10px 15px;
    font-weight: bold;
    margin: auto;

    &:not(.dropdown-toggle) {
        transition: all .5s ease;
    }

    &:hover {
        cursor: pointer;

        &:not(.dropdown-toggle) {
            background: var(--cts-alt);
            transform: scale(1.1);
        }
    }
}

.alert {
    width: 60%;
    margin: 0 auto;
    text-align: justify;
    font-weight: bold;
    display: block;

    ul {
        list-style-type: none;
    }
}

.alert-danger, .required-inputs {
    color: red;
}

.alert-success {
    color: limegreen;
}