h2, .entrance-indications {
    margin: 18px 0; 
 }

 .top-actions {
     margin: 0;
 }
 
 .tickets-date {
     text-align: right;
     margin-bottom: 12px;
 }
 .tickets-date .date-section {
     display: inline-block;
 }
 
 .tickets-date label {
     color: var(--primary-color);
 }
 
 .tickets-date .reservation-date {
     margin-left: 6px;
     border: 1px solid var(--bs-info);
     padding: 6px;
 }
 
 .price-and-quantity {
     display: flex;
     gap: 2rem;
     justify-content: space-between;
 }
 
 .ticket-content {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     padding: 1rem;
 }
 
 .ticket-description .value {
     font-size: 1.2rem;
 }
 
 .ticket-description-details {
     font-size: 1rem;
     padding-top: .5rem;
     text-align: justify;
 }

 .ticket-description-details a {
    color: var(--primary-color);
    font-weight: bold;
 }
 
 .ticket-description .ticket-details {
     background-color: var(--light-gray);
     padding: 2px 6px;
 }
 
 .ticket-description .value {
     text-align: left;
     font-weight: bolder;
 }
 
 #btnShowCalendar {
     background-color: var(--white);
     color: var(--primary-color);
     border-color: var(--primary-color);
 }
 
 .btn-info:focus,
 .btn-info:not(:disabled):not(.disabled).active:focus,
 .btn-info:not(:disabled):not(.disabled):active:focus,
 .show > .btn-info.dropdown-toggle:focus {
     box-shadow: 0 0 0 0.2rem rgba(167, 29, 34, 0.5);
 }
 
 .price-no-discount {
    display: none;
    color: var(--gray);
    text-decoration: line-through;
    text-align: right;
 }
 
 .footer-actions {
     display: flex;
     justify-content: flex-end;
     gap: 1rem;
 }
 
 #btnFinishTicketsSelection {
     background-color: var(--active-color);
     color: var(--white);
     font-size: 24px;
     padding: 12px;
 }
 
 .total-selection {
     font-size: 32px;
     padding: 6px 0;
 }
 
 .item-amount .btn-ticket-amount {
     background-color: var(--primary-color);
     color: white;
 }
 
 .item-amount .btn-ticket-amount.disabled:hover,
 .item-amount .btn-ticket-amount.disabled .btn:hover {
     cursor: inherit;
 }
 
 .input-group-btn,
 .input-group-btn span.btn {
     color: var(--white) !important;
 }
 
 
 .quantity input {
     background: var(--white) !important;
     border: none;
     color: #000 !important;
     text-align: center;
     outline: none !important;
     box-shadow: none !important;
     max-width: 72px !important;
     height: 48px;
 }
 
 .quantity span {
     height: 48px;
     width: 48px;
     padding: 4px 0;
 }
 
 .quantity span:first-child {
     border-top-left-radius: 7px;
     border-bottom-left-radius: 7px;
 }
 
 .quantity span:last-child {
     border-top-right-radius: 7px;
     border-bottom-right-radius: 7px;
 }
 
 #btnShowCalendar.selected {
     background-color: var(--primary-color);
     color: white;
     border-color: none;
     border-radius: 0;
 }
 
 #tickets-catalog {
    display: flex;
    justify-content: flex-start;
    gap: 3rem;
    flex-wrap: wrap;
    margin: 1rem 0;
 }
 
 .cart-item-thumbnail img {
     width: 100%;
     height: auto;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
 } 
 
 
 /* DESKTOP */
 @media only screen and (min-width: 600px) {
     .tickets-date .date-section:nth-child(2) {
         margin-left: 8px;
     }
     
     .ticket-description .value {
         display: inline-block;
     }
 
     .ticket-description {
         font-size: 20px;
     }
 
     .ticket-type,
     .ticket-price {
         font-size: 20px;
     }
     
     .item-amount.quantity.panel-item {
         padding: 16px 0;
      }
 
 }

 .ticket-entry-modal .modal-header {
    background-color: var(--primary-color-dark);
    color: #FFF;
}

.ticket-entry-modal .modal-body {
    display: flex;
    gap: 2rem;
    padding: 2rem;
}

 .ticket-entry-modal .item-image img {
    width: 100%;
    height: auto;
 }

.ticket-entry-modal .ticket-description-details {
    text-align: justify;
}


 @media (max-width: 992px) {
    #tickets-catalog {
        display: flex;
        justify-content: space-evenly;
    }

    .ticket-entry-modal .modal-body {
        flex-direction: column;
    }

    .ticket-entry-modal .item-image {
        text-align: center;
    }
}
 
 /** MOBILE */
 @media only screen and (max-width: 600px) {
     #tickets-catalog {
         margin-bottom: 1rem;
         justify-content: center;
     }
     .tickets-date {
         display: flex;
         gap: .5rem;
         flex-direction: column;
     }
     .tickets-date .reservation-date {
         display: inline-block;
         margin-top: .5rem;
     }
 
     .ticket-type {
         margin: 0px;
     }
 
     .item-amount.quantity.panel-item {
         max-width: 112px;
     }
 
     .quantity span {
         height: 32px;
         width: 32px;
         padding: 0;
     }
 
     .quantity input {
         height: 32px;
     }
 
     .price-with-discount {
         min-width: 62px;
     }
 
     .ticket-description .ticket-details {
         margin: 2px 0;
     }
 
     .total-selection {
         font-size: 24px;
         margin: 0px;
         margin-right: 18px;
         padding: 0px;
     }
 
     #btnFinishTicketsSelection {
         font-size: 20px;
         padding: 6px;
     }
 g17
     .txtAmount:disabled {
         background-color: #ccc;
     }

     .ticket-entry-modal .modal-body {
        padding: 1rem;
    }
 
     .ticket-entry-modal .item-image img {
         max-width: 100%;
     }

     .ticket-description-details {
         padding-top: inherit;
         margin-bottom: 1rem;
     }
 
 
 }


 
 @media (min-width: 993px) {
    .ticket-entry-modal .item-image img {
        width: 350px;
    }
 }