/* Colors */
@import "fonts/fssiena.css";

:root {
    --ecc-lime: #80C342;
    --ecc-midnight: #001F3B;
    --ecc-midnight-10c: #D4D4DB;
    --ecc-midnight-30c: #989BAA;
    --ecc-midnight-60c: #525A71;
    --ecc-midnight-80c: #2B3A54;
    --ecc-orange: #F58220;
    --ecc-orange-10c: #FFEFE1;
    --ecc-orange-20b: #CA6B18;
    --ecc-plum: #8F2168;
    --ecc-red: #DC202F;
    --ecc-turquoise: #46C1BE;
    --ecc-yellow: #FDB51E;
}

body {
    font-family: FSSiena, Arial, sans-serif;
}

p, label, input, .list-group-item {
    color: var(--ecc-midnight);
}

/* Buttons */

.ecc-button-basic {
    height: 50px;
    width: 200px;
    border-radius: 8px;
    background-color: var(--ecc-orange);
    color: var(--ecc-midnight);
    border: 1px var(--ecc-orange) solid;
    font-weight: 300;
}

    .ecc-button-basic:disabled, .ecc-button-basic:disabled:hover, .ecc-button-basic:disabled:active {
        background: var(--ecc-midnight-10c);
        border: 1px var(--ecc-midnight-30c) solid;
    }

    .ecc-button-basic:hover {
        background-color: white;
        border: 1px var(--ecc-midnight) solid;
    }

    .ecc-button-basic:active {
        background-color: var(--ecc-orange);
    }

/* Inputs */

.form-control {
    border-radius: 8px;
    border: 1px solid var(--ecc-midnight-10c);
    color: var(--ecc-midnight-80c);
    font-size: 16px;
    line-height: 27px;
    font-weight: 400;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .form-control:focus {
        border: 1px var(--ecc-orange) solid;
        box-shadow: none;
        color: var(--ecc-midnight-80c);
        font-size: 16px;
        line-height: 27px;
        font-weight: 400;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .form-control:disabled {
        border: none;
        background-color: var(--ecc-midnight-10c);
    }

    .form-control.valid.modified:not([type=checkbox]) {
        border-color: var(--ecc-midnight-10c);
    }

        .form-control.valid.modified:not([type=checkbox]):focus {
            border: 1px var(--ecc-orange) solid;
            box-shadow: none;
            color: var(--ecc-midnight-80c);
        }

    .form-control::placeholder {
        color: var(--ecc-midnight-60c);
    }

    .form-control:hover:not(:focus):not(:disabled):not(.invalid), .form-control.valid.modified:not([type=checkbox]):not(:disabled):not(:focus):not(.invalid):hover {
        border: 1px var(--ecc-midnight-80c) solid;
    }

/* Labels */
.form-label {
    font-weight: 400;
    font-size: 18px;
}

/* Validation */

.invalid:not(:focus) {
    border: 1px solid var(--ecc-red);
}

.validation-message {
    color: var(--ecc-red);
}