.campos {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.form-control {
    flex: 1 1 100%;
}

@media (min-width: 1024px) {

    .form-control {
        padding: 0.5rem;
    }


    .form-control.col-1 {
        flex: 0 1 calc(100% / 12);
    }

    .form-control.col-2 {
        flex: 0 1 calc(200% / 12);
    }

    .form-control.col-3 {
        flex: 0 1 calc(300% / 12);
    }

    .form-control.col-4 {
        flex: 0 1 calc(400% / 12);
    }

    .form-control.col-5 {
        flex: 0 1 calc(500% / 12);
    }

    .form-control.col-6 {
        flex: 0 1 calc(600% / 12);
    }

    .form-control.col-7 {
        flex: 0 1 calc(700% / 12);
    }

    .form-control.col-8 {
        flex: 0 1 calc(800% / 12);
    }

    .form-control.col-9 {
        flex: 0 1 calc(900% / 12);
    }

    .form-control.col-10 {
        flex: 0 1 calc(1000% / 12);
    }

    .form-control.col-11 {
        flex: 0 1 calc(1100% / 12);
    }

    .form-control.col-12 {
        flex: 0 1 calc(1200% / 12);
    }
}

.form-control input,
.form-control input:invalid,
.form-control select,
.form-control select:invalid,
.form-control textarea,
.form-control textarea:invalid,
input[type="text"],
input[type="text"]:invalid,
input[type="search"],
input[type="search"]:invalid select,
select:invalid,
textarea,
textarea:invalid {
    display: block;
    width: 100%;
    outline: none;
    line-height: 1.9rem;
    background-color: white;
    color: var(--cor-cinza-escuro);
    border: 1px solid var(--cor-cinza-escuro);
    padding: 0.3125rem 0.9375rem;
    border-radius: 5px;
    box-shadow: none;
}

.form-control input:focus,
.form-control select:focus,
.form-control textarea:focus {
    box-shadow: 0 0 0 2px var(--cor-link);
    border: 1px solid var(--cor-link);
}

.form-control input.invalid:not([type="checkbox"]):not([type="radio"]),
.form-control select.invalid,
.form-control textarea.invalid {
    box-shadow: 0 0 0 2px var(--cor-alerta);
    border: 1px solid var(--cor-alerta);
}

.form-control input:disabled,
.form-control select:disabled,
.form-control textarea:disabled {
    background: var(--cor-bege-mais);
    color: var(--cor-cinza-mais);
    -webkit-text-fill-color: currentColor;
    opacity: 1;
}

.form-control select {
    background: url(../img/arrow-down.svg) no-repeat center right 0.25rem;
    -webkit-appearance: none;
}

.form-control input[type="radio"],
.form-control input[type="checkbox"] {
    width: auto;
}

.form-control input[type="radio"]:focus,
.form-control input[type="checkbox"]:focus {
    box-shadow: none;
    border: none;
}

.form-control input[type="number"] {
    text-align: right;
    -moz-appearance: textfield;
}

.form-control input.moeda {
    text-align: right;
}

.form-control input[type="number"]::-webkit-inner-spin-button,
.form-control input[type="month"]::-webkit-inner-spin-button,
.form-control input[type="date"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.form-control input[type="date"],
.form-control input[type="time"] {
    text-align: center;
}

.form-control input[type="range"] {
    -webkit-appearance: none;
}

.form-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1.5rem;
    width: 1.5rem;
    border: 1px solid var(--cor-link);
    border-radius: 50%;
    background: var(--cor-link);
    margin-top: -10px;
}

.form-control input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    background: var(--cor-cinza-escuro);
    border-radius: 5px;
    height: 4px;
    margin: 0.6rem;
}

.form-control input[type="range"]::-moz-range-thumb {
    height: 1.5rem;
    width: 1.5rem;
    border: 1px solid var(--cor-link);
    border-radius: 50%;
    background: var(--cor-link);
}

.form-control input[type="range"]::-moz-range-track {
    background: var(--cor-cinza-escuro);
    border-radius: 5px;
    height: 4px;
}

.form-control > .rotulo {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 0.25rem 0;
    margin-bottom: 0.25rem;
}

.form-control > .rotulo label {
    color: var(--cor-fonte);
    margin-right: 0.5rem;
}

.form-control.required > .rotulo label::after {
    content: "*";
    color: var(--cor-alerta);
}

.form-control > .controle {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.form-control > .controle.linhas {
    flex-flow: column nowrap;
    align-items: flex-start;
}

.form-control > .controle label {
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
    padding: 0.4rem;
}

.form-control > .controle button.com-texto,
.form-control > .controle a.button.com-texto {
    flex: 0 1 auto;
    height: auto;
    align-self: stretch;
    width: auto;
    margin: 0 0.25rem;
    padding: 0 0.5rem;
}

@media (min-width: 1024px) {
    .form-control > .controle label {
        padding: 0.1rem;
    }
}

.form-control > .controle input[type="radio"],
.form-control > .controle input[type="checkbox"] {
    margin-right: 0.25rem;
}

.form-control > .controle input[type="radio"]:focus,
.form-control > .controle input[type="checkbox"]:focus {
    margin-right: 0.25rem;
    outline: 2px solid var(--cor-link);
}

.form-control > .controle input[type="radio"].invalid,
.form-control > .controle input[type="checkbox"].invalid {
    outline: 3px solid var(--cor-alerta);
}

.form-control > .mensagem {
    font-style: italic;
    padding: 0.25rem 0;
    color: var(--cor-fonte);
}

/* Alto Contraste */
body.alto-contraste .form-control input,
body.alto-contraste .form-control input:invalid,
body.alto-contraste .form-control select,
body.alto-contraste .form-control select:invalid,
body.alto-contraste .form-control textarea,
body.alto-contraste .form-control textarea:invalid,
body.alto-contraste input[type="text"],
body.alto-contraste input[type="text"]:invalid,
body.alto-contraste input[type="search"],
body.alto-contraste input[type="search"]:invalid select,
body.alto-contraste select:invalid,
body.alto-contraste textarea,
body.alto-contraste textarea:invalid {
    background-color: black;
    border: 1px solid white;
    color: white;
}

body.alto-contraste .form-control input:focus,
body.alto-contraste .form-control select:focus,
body.alto-contraste .form-control textarea:focus,
body.alto-contraste
    .campos
    > .form-control
    input.invalid:not([type="checkbox"]):not([type="radio"]),
body.alto-contraste .form-control select.invalid,
body.alto-contraste .form-control textarea.invalid {
    box-shadow: 0 0 0 2px var(--cor-link-contraste);
    border: 1px solid var(--cor-link-contraste);
}

body.alto-contraste .form-control input[type="range"]::-moz-range-thumb {
    border: 1px solid var(--cor-link-contraste);
    background: var(--cor-link-contraste);
}

body.alto-contraste .form-control input[type="range"]::-webkit-slider-thumb {
    border: 1px solid var(--cor-link-contraste);
    background: var(--cor-link-contraste);
}

body.alto-contraste .form-control input[type="range"]::-moz-range-track {
    background: white;
}

body.alto-contraste
    .campos
    > .form-control
    input[type="range"]::-webkit-slider-runnable-track {
    background: white;
}

body.alto-contraste .form-control.required > .rotulo label::after {
    color: white;
}

body.alto-contraste
    .campos
    > .form-control
    input[type="number"]::-webkit-calendar-picker-indicator,
body.alto-contraste
    .campos
    > .form-control
    input[type="month"]::-webkit-calendar-picker-indicator,
body.alto-contraste
    .campos
    > .form-control
    input[type="date"]::-webkit-calendar-picker-indicator,
body.alto-contraste
    .campos
    > .form-control
    input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}