main {
    margin-bottom: 7rem;
}

body .active-main {
    margin-bottom: 0;
}

html {
    scroll-behavior: smooth;
}

#title {
    background: rgba(128, 128, 128, 0.301);
    display: flex;
    justify-content: center;
}

#title p {
    font-size: 1.7rem;
}

#container {
    margin: 3rem 0 0 3rem;
}

#component {
    display: flex;
    margin-bottom: 2rem;
}

#component button {
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.3rem 0 0 2.5rem;
    background: rgba(128, 128, 128, 0.301);
    width: 22rem;
    text-align: center;
    border-radius: 5px;
    font-size: 1.1rem;
}


#component ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    border-radius: .7rem;
}


.lista-simulador li{
    list-style: none;
    margin: 15px auto 15px auto;
    position: center;
    width: 22rem;
    height: 3rem;
    background-color: rgba(128, 128, 128, 0.171);
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0.2rem 0.2rem 0.2rem 0.2rem rgb(0 0 0 / 20%)
}

.menu-simulador ul ul {
    position: absolute;
    visibility: hidden;
    transition: .2s;
}

.menu-simulador ul li:hover {
    zoom: 102%;
    cursor: pointer;
}

.menu-simulador ul li:hover ul{
    visibility: visible;
    transition: .2s;
    padding: .5rem 0 0 0;
    z-index: 1;
}

.menu-simulador .lista-simulador {
    display: block;
    margin: 0 0 0 -24.5rem;
    border: 1px solid black;
    background: #fafbfc;
}

.menu-simulador #lista_processador, #lista_placa_video, #lista_placa_mae, #lista_ram, #lista_hd, #lista_ssd, #lista_fonte {
    display: block;
    position: center;
    margin: 15% auto;
    border: 1px solid black;
    width: 60%;
    background: #fafbfc;
}

/* container do total das peças */
#total-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -26rem 0 0 30rem;
}

.total {
    background: rgba(128, 128, 128, 0.171);
    display: flex;
    flex-direction: column;
    justify-content: initial;
    align-items: center;
    width: 12rem;
    height: 5rem;
    border-radius: .5rem;
    box-shadow: .2rem .2rem .2rem .2rem rgba(0, 0, 0, .2);
}

.total #texto-total {
    margin-top: 1rem;
    color: rgb(21, 138, 21);
    font-weight: 600;
}

.total #divisao {
    background: rgb(102, 228, 102);
    width: 100%;
    height: 3px;
}

.imagem-seta.remove {
    visibility: hidden;
}

/* Botão final do simulador */

#montar-final {
    display: flex;
    justify-content: center;
    margin: 7rem 0 0 30rem;
}

#montar-final #botao-montar {
    padding: 1rem 1.5rem;
    border: 1px solid black;
    background: rgba(128, 128, 128, 0.171);
    border-radius: .6rem;
    text-decoration: none;
    color: black;
    transition: zoom .5s;
}

#montar-final #botao-montar:hover {
    background: rgba(128, 128, 128, 0.342);
    zoom: 108%;
    cursor: pointer;
}

/* Informações extras */

#informacoes-extras {
    visibility: hidden;
}

#mostrar .active {
    visibility: visible;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: rgba(128, 128, 128, 0.342);
    margin: 20rem auto 1.5rem auto;
    width: 95%;
    height: 20rem;
    border: 1px solid black;
    border-radius: .5rem;
}
    
#informacoes-extras h3 {
    margin-top: .8rem;
}

#informacoes-extras p {
    margin-top: 1.8rem;
    text-align: center;
}

#container-informacoes {
    margin-top: 3rem;
}

/* The Modal (background) */
.modal, .close {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(3, 0, 24, 0.425); /* Black w/ opacity */
}

.modal-content p{
    text-align: center;
}

#qtd {
    visibility: hidden;
    display: flex;
    justify-content: center;
    background-color: rgba(197, 197, 197, 0.425);
}

#qtdRam {
    margin: 15% 10% auto 10%;

}

#component #plus-button, #component #minus-button {
    margin: 4px;
    width: 45px;
    height: 45px;
    /*border-radius: 50%;
    border: 1px solid rgb(102, 228, 102);
    background-color: rgb(102, 228, 102);*/
}

#plus-text , #minus-text {
    color: rgb(21, 138, 21);
    font-size: 300%;
}

@media(max-width: 1000px){
    .lista-simulador li{
        width: auto;
        margin-left: 2rem;
        margin-right: 2rem;
    }
}

@media(max-width: 730px){
    #total-container{
        margin: auto;
    }

    #montar-final{
        margin: 25px auto;

    }
}