.pageBody
{
    padding-inline: 20px;
    padding-bottom: 150px;
}
.pageBodyTitle
{
    font-size: 22px;
}
.paragraph
{
    font-size: 14px;
    font-weight: 400;
    opacity: 0.75;
}
.contactOptions
{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contactOption
{
    display: flex;
    gap: 20px;
    padding: 20px;
    border: 1px Solid #f2f2f2;
    border-radius: var(--primaryRadius);
    text-decoration: none;
    color: black;
    transition: var(--tsFast);
}
.contactOption:hover, .contactOption:active
{
    background-color: #f8f8f8;
}
.contactOption h4, .contactForm h4
{
    margin: 0;
    font-weight: 600;
}
.contactOption span
{
    font-size: 14px;
    font-weight: 300;
    opacity: 0.75;
    margin-top: 20px;
}
.contactForm
{
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: var(--primaryRadius);
}
.contactForm .label
{
    background-color: white;
    margin-top: 10px;
}
.contactForm button
{
    width: 100%;
    padding: 10px;
    margin-top: 10px;
}
.enterReservation,.reservationTicket
{
    background-color: #f8f8f8;
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    gap: 20px;
    align-items: center;
    margin-block: 115px;
}
.reservationTicket
{
    align-items: flex-start;
    margin-top: 50px;
}
.resCode
{
    justify-content: space-between;
    width: 100%;
}
.reservationTicket .r2
{
    padding: 0px;
    width: 100%;
}
.resCode span
{
    font-size: 14px;
    font-weight: 500;
}
.resCode span:last-child
{
    font-weight: bold;
}
.reservationTicket .primaryButton
{
    padding: 8px;
    width: 100%;
    background-color: var(--redColor);
}
.enterReservation h4
{
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    opacity: 0.85;
}
.enterReservation input
{
    background-color: white;
    width: 75%;
    border-radius: 35px;
    font-size: 15px;
    text-align: center;
    font-weight: 600;
    letter-spacing: 3px;
    padding: 8px;
    text-transform: uppercase;
}
.enterReservation .primaryButton
{
    width: 100%;
    padding: 8px;
}
.enterReservation input::placeholder
{
    opacity:0.4;
}
.resSelectedCar
{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.phoneError
{
    border: 1px Solid #ff50507d;
}
.resSelectedCarText
{
    font-size: 30px;
    font-weight: 600;
    line-height: 30px;
}
#resSelectedCarImage
{
    width: 125px;
}
.reservationStatusArea
{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.reservationStatusArea span
{
    font-size: 12px;
}
.reservationStatus
{
    padding: 1px;
    background-color: var(--greenColor);
    border-radius: 25px;
    padding-inline: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.doneStatus
{
    background-color: var(--primaryColor) !important;
}
.canceledStatus
{
    background-color: var(--redColor) !important;
}
.cancelDetails 
{
    opacity: 0.75;
    margin: 0;
    font-size: 13px;
    color: var(--redColor);
    font-weight: 500;
}