:root {
    --cor-da-fonte: #333333;
    --cor-secundaria: #000000;
    --fonte-primaria: 'Lato';
}

body {
    font-family: var(--fonte-primaria);
    font-weight: 400;
    background-color: #FFFFFF;
    color: var(--cor-da-fonte);
}

.cabecalho {
    background-color: #E0E0E0;
    font-weight: 600; 
}

.container {
    width: 1100px;
    margin: auto;
}

.container__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 20px; 
    padding: 20px 0px;
}

.container__logo {
    display: flex;
    gap: 20px;
    align-items: center;
}

.container__menu {
    display: flex;
    background-color: #FFFFFF;
    align-items: center;
    font-size: 16px;
    height: 40px;
    width: 350px;
    align-items: center;
    justify-content: center;
    
}

.menu-link {
    text-align: center;
    padding: 0px 8px;
    text-decoration: none;
    color: var(--cor-da-fonte);
}

.menu__botao {
    border: none;
    background-color: #FFFFFF;
    font-family: var(--fonte-primaria);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.borda {
    border-right: 1px solid #333333;
}

.container__transacao {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    margin-top: 30px;
    align-items: baseline;
    gap: 20px;
}

.div__compra {
    padding: 20px;
    border: 1px solid #979797;
}

.titulo__compra {
    margin-bottom: 21px;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.lista__input  {
    font-size: 14px;
}

.lista__input p {
    margin-bottom: 10px;
}

.inputs {
    margin:10px 0px;
}

#select--transacao {
    width: 100%;
    padding: 10px;
}

.input--text {
    width:100%;
    padding: 10px;
    box-sizing: border-box;
    margin: 0 -2px;
    margin: 0px;    
}

.botao__comprar {
    font-family: var(--fonte-primaria);
    color: #FFFFFF;
    width: 100%;
    background-color:#333333;
    border-radius: 4px;
    font-weight: 400;
    font-size: 14px;
    padding: 7.5px 0px;
    margin-top: 20px;
    cursor: pointer;
}

.div__extrato {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.titulo__extrato {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.subtitulo__extrato {
    display: flex;
    justify-content: space-between;
    border-bottom: solid 1px #979797;
    padding-bottom: 7px;   
    font-weight: 700;
}

.subtitulo-mercadoria {
    text-align: left;
    margin-left: 7%;
}

.subtitulo-valor {
    text-align: right;
    margin-right: 20px;
}

.container__lista {
    display: grid;
    grid-template-rows: auto;
    
}

.linha {
    display: grid;  
    grid-template-columns: 7% 50% 43%;
    border-bottom: 1px solid #979797;
}

.operador {
    text-align: center;
}

.valor {
    text-align: end;
    margin: 0px 20px;
}

.linha>p {
    padding: 7px 0px;
}

.total {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #979797;
    margin-top: 3px;
    font-weight: 700;
}

.subtitulo-total {
    margin: 11px 0% 0% 7%; 
}

.resultado {
    margin: 11px 20px 0px 0px; 
}

.saldo {
    text-align: end;
    margin-right: 20px;
    font-size: 10px;
}
.aparece {
    display: block;
    text-align: center;
    padding: 5px;
    font-weight: 700;
}
.desaparece {
    display: none;
}
.input-erro::placeholder {
    color: red;
    font-weight: 700;
}
/* CSS para tablet */
@media screen and (max-width:1154px) {
    .container {
        width: 95vw;
    }
}

/* CSS para Tablet na vertical */
@media screen and (max-width: 768px) {  
    .container__cabecalho {
        padding: 10px 0px;
    }

    .container__logo {
        flex-grow: 1;
    }

    .container__logo p {
        flex-grow: 1;
        text-align: center;
    }

     .container__menu {
        display: block;
        background-color: #FFFFFF;
        background-color: #FFFFFF;
        font-size: 16px;
        height: auto;
        width: auto;
        color: #1C1C1C;
    }

    .container__menu-ativo {
        display: block;
        position: absolute;
        height: 100vh;
        width: 250px;
        top: 0;
        right: 0;
        background-color: #333333;
    }

    .botao__fechar {
        background-color: #333333;
        display: block;
        width: 16px;
        height: 16px;
        padding: 24px;
    }

    .menu-link{
        display: block;
        color: #FFFFFF;
        text-align: end;
        padding: 9px 20px;
    }

    .menu-link:active  {
        background-color: #C4C4C4;
    }

    .menu__botao {
        cursor: pointer;
        margin: 0px;
        display: block;
        width: 250px;
        background-color: #333333;
        color: #FFFFFF;
        text-align: end;
        padding: 9px 20px;
    }

    .botao__abrir {
        display: block;
        background-color: #E0E0E0;
        border: 0px;
        margin: 0px;
        padding: 0px;
    }

    

    .container__transacao {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 40px;
    }

    .div__compra {
        display: flex;
        flex-direction: column;
    }

    .lista__input {
        display: grid;
        grid-template-columns: 0.5fr 1fr 0.5fr;
        column-gap: 20px;
    }

    .botao__comprar {
        width: 200px;
        align-self: end;
    }
}

/* CSS para Mobile */
@media screen and (max-width: 411px) {
    .container__transacao {
        margin-top: 20px;
    }
    
    .container__menu-ativo {
        width: 85vw;
    }

    .div__compra {
        padding: 0px;
        padding-bottom: 28px;
        border: 0;
        width: inherit;
        border-bottom: 1px solid #979797;
    }

    .titulo__compra {
        display: none;
    }

    .lista__input {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 1fr 1fr 1fr;
        padding: 0px;
        margin: 0px;
    }
 
    .botao__comprar {
        width: 100%;
        margin: 0px;
        margin-top: 20px;
    }

    .subtitulo-valor {
        margin-right: 20px;
    }
}