:root {
    --amarelo: #F0DB4F;
    --fundo: #2B2B2B;
    --cinza: #616161;
    --branco: #FFFFFF;
    --card: #202020;
    --amarelo-opaco: #f0da4fb3;
}

.rounded-logo {
    width: 250px;
    height: 250px;
}

/* MAIN SCROLLBAR STYLES */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: var(--amarelo);
}
::-webkit-scrollbar-thumb {
    width: 20px;
    background-color: var(--cinza);
    border-radius: 10px;
    border: 1px solid var(--card);
}
/* GLOBAL STYLES */

.up-line-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid var(--amarelo);
}
.edit-button {
    background-color: var(--fundo);
    width: 100px;
    height: 30px;
    color: var(--branco);
    border: 1px solid var(--branco);
    border-radius: 10px;
    margin-top: 33px;
}
.edit-button:hover {
    color: var(--amarelo);
    border: 1px solid var(--amarelo);
}

/* CONTAINERS STYLES */
.container-content {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-right: 40px;
    margin-left: 40px;
    margin-bottom: 5px;
}

.container-left {
    width: 40%;
    height: 100%;
}
.container-right {
    width: 40%;
    height: 100%;
}

/* UNITY CHOOSE STYLES*/


.unidade-container {
    padding-bottom: 20px;
}
.title-h3 {
    font-size: 30px;
    font-weight: bold;
    margin-left: 5px;
    margin-bottom: 5px;
    padding-top: 30px;
}
.adress-cafeteria {
    font-size: 20px;
    margin-left: 5px;
}

/* PAYMENT STYLES */
.visa-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    padding-right: 10px;
}
.payment-information {
    display: flex;
    flex-direction: row;
}
.card-information {
    display: flex;
    flex-direction: row;
}
.card-number {
    font-size: 20px;
    padding-top: 25px;
}
.final-card-number {
    font-size: 20px;
    padding-top: 23px;
    padding-left: 10px;
}

 /* ITENS STYLES */

.itens-up-line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 30px;
    font-weight: bold;
}
.right-itens {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.itens-counter-up-line {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 25px;
    font-weight: bold;
    padding-left: 5px;
    padding-top: 30px;
}
.add-itens-button {
    background-color: var(--fundo);
    width: 150px;
    height: 30px;
    color: var(--branco);
    font-size: 16px;
    border: 1px solid var(--branco);
    border-radius: 10px;
    margin-top: 33px;
}
.add-itens-button:hover {
    color: var(--amarelo);
    border: 1px solid var(--amarelo);
}
.quantity-information {
    overflow: auto;
    height: 200px;
}
.quantity-information::-webkit-scrollbar {
    width: 10px;
    background-color: var(--branco);
    border: 1px solid var(--fundo);
}
.quantity-information::-webkit-scrollbar-track {
    background-color: var(--branco);
}
.quantity-information::-webkit-scrollbar-thumb {
    background-color: var(--amarelo);
    border-radius: 10px;
    border: 1px solid var(--fundo);
}
.dropdown-button-item {
    margin-top: 10px;
    background-color: var(--amarelo);
    color: var(--fundo);
    font-size: 20px;
}

.meses-menu, .anos-menu {
    padding: 0;
}
.item-quantity-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.itens-right-side {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 20px;
    font-weight: bold;
}
.itens-right-side h5 {
    padding-left: 10px;
    padding-top: 20px;
}
.price {
    display: flex;
    flex-direction: row;
    padding-top: 20px;
}

/* TOTAL PRICE STYLES */

.total-price-container {
    margin-top: 8px;
    border-top: 1px solid var(--amarelo); 
}
.total-price {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 30px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}
.left-side-total-price {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

/* RIGHT SIDE PAGE */

/* DATES STYLES */

.dates {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: 5px;
    padding-top: 10px;
}
.card-date-button {
    position: relative;
    width: 80px;
    height: 60px;
    background-color: var(--fundo);
    border-radius: 10px;
    border: 0;
    color: var(--branco);
    transition: transform .2s;
}
.card-date-button:hover {
    background-color: var(--cinza);
    transform: scale(1.03);
}
.card-date-button-selected {
    position: relative;
    width: 80px;
    height: 60px;
    background-color: var(--amarelo);
    border-radius: 10px;
    border: 0;
    color: var(--fundo);
}
.card-date-button-selected:hover {
    position: relative;
    width: 80px;
    height: 60px;
    background-color: var(--amarelo);
    border-radius: 10px;
    border: 0;
    color: var(--fundo);
}
.underline-data {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.underline-data h5 {
    font-weight: bold;
    font-size: 20px;
}
.underline-data .month {
    padding-right: 5px;
}

/* TIME STYLES */

.time-data-container {
    margin-top: 20px;
    border-top: 1px solid var(--amarelo);
    overflow: auto;
    height: 300px;
}
.data-time-line {
    display: flex;
    flex-direction: row;
    width: 500px;
    padding-top: 5px;
}
#day-month {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 7px;
}
#weekday {
    padding-right: 7px;
}
#just-complement-day {
    padding-left: 7px;
    padding-right: 7px;
}
#time-complement {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#just-complement-time {
    padding-right: 7px;
}
.radio-option-time {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--amarelo);
    height: 65px;
    padding-top: 15px;
}
.radio-option-time h5 {
    font-size: 20px;
    font-weight: bold;
    padding-left: 10px;
    padding-top: 3px;
}
.radio-button {
    border-radius: 90%;
    width: 30px;
    height: 30px;
    background-color: var(--fundo);
    border: 2px solid var(--amarelo);
    transition: transform .2s;
}
.radio-button:hover {
    border-radius: 90%;
    width: 30px;
    height: 30px;
    background-color: var(--fundo);
    border: 3px solid var(--amarelo);
    transform: scale(1.05);
}
.radio-button-selected {
    border-radius: 90%;
    width: 30px;
    height: 30px;
    background-color: var(--amarelo);
    border: 2px solid var(--amarelo);
}
.radio-button-selected:hover {
    border-radius: 90%;
    width: 30px;
    height: 30px;
    background-color: var(--amarelo);
    border: 2px solid var(--amarelo);
}
.time-data-container::-webkit-scrollbar {
    width: 10px;
    background-color: var(--branco);
    border: 1px solid var(--fundo);
}
.time-data-container::-webkit-scrollbar-track {
    background-color: var(--branco);
}
.time-data-container::-webkit-scrollbar-thumb {
    background-color: var(--amarelo);
    border-radius: 10px;
    border: 1px solid var(--fundo);
}

/* BUTTONS FOOTER */
footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.back-to-cart {
    width: 200px;
    height: 70px;
    background-color: var(--fundo);
    border-radius: 10px;
    border: 2px solid var(--branco);
    color: var(--branco);
    font-size: 20px;
    transition: transform .2s;
    margin-right: 50px;
}
.back-to-cart:hover {
    border: 3px solid var(--branco);
    transform: scale(1.05);
}
.schedule {
    width: 200px;
    height: 70px;
    background-color: var(--amarelo);
    border-radius: 10px;
    border: 2px solid var(--amarelo);
    color: var(--fundo);
    font-size: 20px;
    transition: transform .2s;
}
.schedule:hover {
    transform: scale(1.05);
}


/* MODAL OF UNITY CHOOSE */

.unity-header {
    background-color: var(--fundo);
    color: var(--branco);
    border: 1px solid var(--amarelo);
    border-bottom: 1px solid var(--amarelo);
    font-size: 30px;
    font-weight: bold;
}
.unity-body {
    background-color: var(--fundo);
    color: var(--branco);
    border: 1px solid var(--amarelo);
    border-top: 1px solid var(--amarelo);
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid var(--amarelo);
}
.unity-card-button {
    display: flex;
    justify-content: center;
    padding-top: 5px;
    padding-bottom: 5px;
}
.unity-card-button button {
    width: 450px;
    height: 50px;
    background-color: var(--cinza);
    color: var(--branco);   
    border-radius: 10px;
    border: 0;
    transition: transform .2s ease-in-out;
}
.unity-card-button button:hover {
    background-color: var(--amarelo);
    color: var(--fundo);   
    transform: scale(1.03);
}
.unity-card-button button h5 {
    margin: 0;
}
.unity-footer-pop-up {
    display: flex;
    justify-content: center;
    background-color: var(--fundo);
    border-top: 1px solid var(--amarelo);
}

/* MODAL PAYMENT */

.payment-header {
    background-color: var(--fundo);
    color: var(--branco);
    border: 1px solid var(--amarelo);
    border-bottom: 1px solid var(--amarelo);
    font-size: 30px;
    font-weight: bold;
}
.payment-body {
    background-color: var(--fundo);
    color: var(--branco);
    border: 1px solid var(--amarelo);
    border-top: 1px solid var(--amarelo);
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid var(--amarelo);
}
.dropdown-choose-payment {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.dropdown-choose-payment button {
    width: 300px;
    height: 50px;
    background-color: var(--cinza);
    color: var(--branco);
}
.dropdown-choose-payment button:hover {
    background-color: var(--amarelo);
    color: var(--fundo);
}
.menu-payment {
    background-color: var(--fundo);
}
.menu-payment li {
    display: flex;
    justify-content: center;
    padding: 0;
}
.payment-footer-pop-up {
    display: flex;
    justify-content: center;
    background-color: var(--fundo);
    border: 1px solid var(--amarelo);
}

/* CREDIT CARD SELECTED STYLES */
.credit-card-selected {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card-number-container-pop-up {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 300px;
}
.card-number-input {
    border: 2px solid var(--amarelo);
    border-radius: 5px;
}
.card-number-input::placeholder {
    padding-left: 5px;
}
.card-number-input:focus {
    border: 2px solid var(--amarelo);
    border-radius: 5px;
    outline: none !important;
}
/* Chrome, Safari, Edge, Opera
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Firefox 
input[type=number] {
    -moz-appearance: textfield;
} */

.expiration-date {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 300px;
}

.dropdown-choose-month {
    padding-top: 10px;
    padding-bottom: 10px;
}
.dropdown-choose-month {
    padding: 15px 20px;
}
.dropdown-choose-month button {
    background-color: var(--cinza);
    color: var(--branco);
}
.dropdown-choose-month button:hover {
    background-color: var(--amarelo);
    color: var(--fundo);
}
.dropdown-choose-month button:focus {
    background-color: var(--amarelo);
    color: var(--fundo);
}
.dropdown-choose-year button {
    background-color: var(--cinza);
}
.dropdown-choose-year button:hover {
    background-color: var(--amarelo);
    color: var(--fundo);
}
.dropdown-choose-year button:focus {
    background-color: var(--amarelo);
    color: var(--fundo);
}

.number-card-label {
    padding-top: 10px;
}
.name-card {
    padding-top: 0;
    padding-bottom: 10px;
}


.save-card-button {
    padding-top: 10px;
}
.save-button {
    display: flex;
    justify-content: center;
    width: 100px;
    height: 50px;
    background-color: var(--cinza);
    color: var(--branco);
    border-radius: 10px;
    border: 0;
    transition: transform .2s ease-in-out;
}
.save-button:hover {
    background-color: var(--amarelo);
    color: var(--fundo);
    transform: scale(1.05);
}

/* PIX SELECTED STYLES */
.logo {
    display: flex;
    justify-content: center;
}
.logo-pix {
    width: 150px;
    height: 100px;
    object-fit: cover;
    margin: 0;
    padding: 0;
}

.label-value {
    display: flex;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
}

.final-price-pix {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 36px;
    font-weight: bold;
    color: var(--amarelo);
}

.qr-code-pix {
    display: flex;
    justify-content: center;
}
.qr-code-pix img {
    width: 200px;
    height: 200px;
}

.instructions-pix {
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--amarelo);
}
.instructions-pix h3 {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
/* ON DELIVERY SELECTED  STYLES */


.close-button-pop-up {
    width: 200px;
    height: 50px;
    background-color: var(--cinza);
    border-radius: 10px;
    border: 2px solid var(--cinza);
    color: var(--branco);
    font-size: 20px;
    transition: transform .2s;
}
.close-button-pop-up:hover {
    transform: scale(1.05);
    background-color: var(--amarelo);
    color: var(--fundo);
    border: 2px solid var(--amarelo);
}

@media screen and (max-width: 660px) {
    .container-content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
}