#container{
    display: flex;
    align-items: center;
    justify-content: center;
}

#authBox{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
    perspective: 2900px;
    width: 400px;
    height: 500px;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: var(--colorPrimary);
}

#switch{
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    background-color: var(--colorSecondary);
    border-radius: 10px;
}

#switch .text{
    display: block;
    position: relative;
    padding: 5px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--colorPrimary);
}

#switch .text.active{
    background-color: #6d6d6d;
}

#switch .text.active.left{
    border-radius: 10px 0 0 10px;
}

#switch .text.active.right{
    border-radius: 0 10px 10px 0;
}

#cards{
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.85s;
    transform-style: preserve-3d;
    border-radius: 20px;
}

#cards.rotate{
    transform: rotateY(180deg);
}

.card{
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #6e6e6e;
    backface-visibility: hidden;
    box-sizing: border-box;
    margin: 0;
    border-radius: 20px;
    padding: 10px;
}

.card.front{
    z-index: 2;
}

.card.back{
    z-index: 3;
    transform: rotateY(180deg);
}

.scroll{
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 3px 0 0;
    z-index: 9;
}

.scroll::-webkit-scrollbar{
    background-color: var(--colorPrimary);
    border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb{
    background-color: #6e6e6e;
    border: 3px solid var(--colorPrimary);
    border-radius: 10px;
}

.card h1{
    display: block;
    position: relative;
    color: var(--colorPrimary);
    text-align: center;
    text-transform: uppercase;
}

.inputField .eleInput{
    padding-block: 7.5px;
    --borderEleInput: var(--color, var(--colorPrimary));
}

#vincoliPassword{
    padding-left: 20px;
}

#vincoliPassword li{
    color: #ac0000;
    list-style: none;
}

#vincoliPassword li:before{
    content: "✘";
    display: inline-block;
    margin-right: 5px;
}

#vincoliPassword li.valido{
    color: #004f00;
    font-weight: bold;
}

#vincoliPassword li.valido::before{
    content: "✔";
}

.different{
    --color: #ac0000;
}

.equal{
    --color: #004f00;
}

#msgPsw{
    text-align: center;
    font-weight: bold;
    color: var(--color);
}