.info-data {
    display: flex;
    flex-direction: column;
    align-self: start;
    color: #32354d;
    font-size: 16px;
    padding: 8px;
}

.info-data label {
    font-weight: bold;
    font-size: 14px;
    padding: 3%;
}

.main-user {
    padding: 16px;

    .info-base {
        grid-template-columns: auto;
        margin: 16px;

        .info-data {
            overflow: auto;
            max-width: none;
        }
    }
}
.main-user {
    width: 370px;
}
#booking .info-users .main-user {
    width: -webkit-fill-available;
    min-height: 360px;
    margin: 15px;
    padding: 10px;
    float: left;
    background-color: #f1f1f1;
    color: #54595f;
    border: solid #c3c3c3;
}
#booking .info-users .main-user .name {
    width: 100%;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 18px;
}
#booking .info-users .main-user .info-base {
    min-height: 290px;
}

#booking .info-users .main-user button {
    float: left;
    margin-right: 10px;
}

#booking .info-users .main-user select {
    width: 150px;
    height: 35px;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 4px 15px;
}

#booking .info-users .main-user input {
    width: 150px;
    height: 35px;
    margin-top: 1px;
    margin-bottom: 1px;
}

.btn-secondary,
#downloadQR-PDF,
#printQR-PDF,
.btn-cesma,
#main-user-action-button {
    background-color: #32354d !important;
    color: #ffffff !important;
    border-style: solid !important;
    border-color: #32354d !important;
}

.btn-secondary:hover,
#downloadQR-PDF:hover,
#printQR-PDF:hover,
.btn-cesma:hover,
#main-user-action-button:hover {
    background-color: #ffffff !important;
    color: #32354d !important;
    border-style: solid !important;
    border-color: #32354d !important;
}

.main-user {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background: #f1f1f1;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}
#main-user {
    margin: auto;
}
.reservation-info {
    display: flex;
    flex-direction: column;
    row-gap: 32px;
}
#guests-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 32px;
}

#add-guest {
    display: flex;
    justify-content: center;
    margin-bottom: 3%;
}
.guest-card,
#guest-edit-form {
    display: inline-flex;
    flex-direction: column;
    font-size: smaller;
    max-width: 500px;
    padding: 32px;
    background: #f1f1f1;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: 10px;
}
.reservation-titles {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    justify-content: space-between;
}

.reservation-texts {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    justify-content: space-between;
}

.reservation-title {
    align-self: start;
    font-weight: bold;
    color: #32354d;
    font-size: 16px;
}

.reservation-text {
    align-self: start;
    text-align: start;
    max-width: 300px;
    display: flex;
    word-wrap: break-word;
    color: #32354d;
    font-size: 16px;
}

.reservation-action-buttons-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}

.reservation-action-buttons {
    flex-direction: row;
    margin: 5% auto;
}

.qr-code-container {
    margin-bottom: 5%;
}

.reservation-buttons,
.pdf-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 15px;
}

#participants-title {
    margin: 5%;
    color: #32354d;
    font-size: 1.5rem;
    text-align: center;
}
#booking {
    display: grid;
    justify-content: center;
}

#booking,
#all-events,
#all-booking {
    min-height: 538px;
}

#booking .info-booking,
#booking .info-users,
#booking .info-qrcode,
#booking .info-product {
    margin-top: 20px;
    margin-bottom: 20px;
}

#booking .info-qrcode {
    height: 240px;
}

#booking .info-users .main-user {
    width: -webkit-fill-available;
    min-height: 360px;
    margin: 15px;
    padding: 10px;
    float: left;
    background-color: #f1f1f1;
    color: #54595f;
    border: solid #c3c3c3;
}

#booking .info-users .main-user .name {
    width: 100%;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 18px;
}

#booking .info-users .main-user .info-base {
    min-height: 290px;
}

#booking .info-users .main-user button {
    float: left;
    margin-right: 10px;
}

#booking .info-users .main-user select {
    width: 150px;
    height: 35px;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 4px 15px;
}

#booking .info-users .main-user input {
    width: 150px;
    height: 35px;
    margin-top: 1px;
    margin-bottom: 1px;
}

#booking .code-otp {
    float: left;
    width: 200px;
    margin-right: 30px;
    margin-top: 30px;
}

#booking .otp-code-button {
    margin-bottom: 20px;
}

#booking .info-product .booking-deleted {
    width: fit-content;
    padding: 15px;
    background-color: #f1f1f1;
    color: #54595f;
    border: solid #dd1e1e;
    font-size: 20px;
    font-weight: 600;
}

.reservation-container {
    border: 2px solid #32354d;
    border-radius: 1%;
    display: grid;
    grid-template-columns: max-content;
    padding: 47px 32px;
    justify-content: center;
}

.guest-card,
#guest-edit-form button {
    margin: 2%;
}
.detail-block {
    display: grid;
    column-gap: 16px;
    grid-template-columns: 180px max-content;
}
hr {
    border: 1px solid #ececec;
}
.user-actions-buttons {
    display: flex;
    justify-content: center;
}
.guest-card,
#guest-edit-form {
    [id^="remove-guest-btn"] {
        display: flex;
        align-self: end;
    }

    .user-actions-buttons {
        padding: 20px;
    }
}
@media screen and (max-width: 800px) {
    .info-base {
        grid-template-columns: auto;
        margin: 16px;

        .info-data {
            overflow: auto;
            max-width: none;
        }
    }
    .reservation-info {
        .detail-block {
            grid-template-columns: auto auto;
        }
    }

    .reservation-container {
        display: flex;
        flex-direction: column;
        padding: 16px;
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    .main-user {
        width: 289px;
    }
}