@charset "UTF-8";

/* ************************ 
   * Tipografia e escrita *
   ************************ */

label,
legend {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

label {
    width: 100%;
    display: inline-block;
    color: var(--alt);
    font-size: var(--fs-sm);
}

legend {
    width: 100%;
    padding: 8px;
    color: #202020;
    border-radius: 2px;
    background-color: var(--alt-soft);
}
    legend + fieldset { margin-top: 16px; }


/* **************************** 
   * Containers e agrupamento *
   **************************** */

form { margin: 0; }

fieldset {
    width: 100%;
    padding: 0px 8px;
    border: none;
}
    fieldset + fieldset { margin-top: 16px; }
    fieldset + legend { margin-top: 16px; }
    fieldset + form { margin-top: 16px; }
    fieldset.xs { width: 20%; }
    fieldset.sm { width: 25%; }
    fieldset.md { width: 50%; }
    fieldset.lg { width: 75%; }
    fieldset.xl { width: 80%; }

/* ************************************* 
   * Componentes para entrada de dados *
   ************************************* */

input,
textarea {
    width: 100%;
    padding: 10px 10px 9px 10px;
    border-radius: 4px;
    border: 1px solid var(--one);
    outline: none;
}
    input:focus,
    textarea:focus {
        background-color: #d7e6da;
        border: 2px solid var(--one);
    }
    input + input { margin-top: 16px; }
    textarea + textarea { margin-top: 16px; }
    input + label { margin-top: 16px; }
    textarea + label { margin-top: 16px; }
    label + input { margin-top: 4px; }
    label + textarea { margin-top: 4px; }

/* ************************************* 
   * Componentes para seleção de dados *
   ************************************* */

.radios {
    width: 100%;
    height: auto;
    padding-bottom: 2px;
}
    label + .radios { margin-top: 8px; }
    .lbl + .radios { margin-top: 8px; }
.radio {
    width: auto;
    height: 40px;
    padding: 8px;
    color: var(--one);
    border-radius: 8px;
    border: 1px solid var(--one);
    background-color: transparent;
    cursor: pointer;
}
.radio:hover { background-color: var(--one-slim); }
.radio.checked {
    color: #fff;
    font-weight: bold;
    background-color: var(--one);
}
.radio + .radio { margin-left: 8px; }

/* ************************************* 
   * Botões e elementos de verificação *
   ************************************* */

button {
    min-height: 24px;
    text-align: center;
    cursor: pointer;
}
    button.xs { height: 24px; }
    button.sm { height: 32px; }
    button.md { height: 40px; }
    button.lg { height: 48px; }
    button.xl { height: 56px; }
    button.text { text-align: center; }
    button.filled {
        padding: 0px 8px;
        border-style: none;
        border-radius: 4px;
        color: var(--one);
        border: 1px solid var(--one);
        background-color: #d7e6da ;
    }
    button.filled:hover {
        color: var(--slim);
        background-color: var(--one);
    }

    .checkbox {
        width: auto;
        height: 40px !important;
        padding-left: 32px !important;
        text-align: left !important;
        border: none;
        background-color: transparent !important;
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position: left center;
        background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Interface / Checkbox_Unchecked"><path id="Vector" d="M4 7.2002V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2842 19.7822 18.9079C20 18.4805 20 17.9215 20 16.8036V7.19691C20 6.07899 20 5.5192 19.7822 5.0918C19.5905 4.71547 19.2837 4.40973 18.9074 4.21799C18.4796 4 17.9203 4 16.8002 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002Z" stroke="%23202020" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>');
        box-shadow: none;
        cursor: pointer;
    }
    .checkbox:hover { font-weight: bold; }
    .checkbox.checked { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Interface / Checkbox_Check"><path id="Vector" d="M8 12L11 15L16 9M4 16.8002V7.2002C4 6.08009 4 5.51962 4.21799 5.0918C4.40973 4.71547 4.71547 4.40973 5.0918 4.21799C5.51962 4 6.08009 4 7.2002 4H16.8002C17.9203 4 18.4796 4 18.9074 4.21799C19.2837 4.40973 19.5905 4.71547 19.7822 5.0918C20 5.5192 20 6.07899 20 7.19691V16.8036C20 17.9215 20 18.4805 19.7822 18.9079C19.5905 19.2842 19.2837 19.5905 18.9074 19.7822C18.48 20 17.921 20 16.8031 20H7.19691C6.07899 20 5.5192 20 5.0918 19.7822C4.71547 19.5905 4.40973 19.2842 4.21799 18.9079C4 18.4801 4 17.9203 4 16.8002Z" stroke="%23202020" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g></svg>'); }
    .checkbox.stack { width: 100% !important; }

/* ******************************** 
   * Tratamento de responsividade *
   ******************************** */

@media only screen and (max-width: 512px) {
    fieldset { width: 100% !important; }
}
@media only screen and (max-width: 400px) {
    .checkbox { font-size: var(--fs-sm) !important; }
}
@media only screen and (max-width: 368px) {
    .checkbox { font-size: var(--fs-xs) !important; }
}