.App {
    font-size: 16px !important;
}
.App * {
    font-size: 16px;
}
.App h1, .App h2, .App h3, .App h4, .App input[type=button], .App input[type=submit], .App button {
    font-family: var(--bs-font-sans-serif);
    font-family: var(--bs-font-body-sans-serif);
}
.App .MovieList .MovieListItem .movie-info {
    font-family: var(--bs-font-body-sans-serif);
    margin-bottom: 1rem;
}
.App .MovieList h1 {
    font-size: 1.25rem;
    height: 6rem !important;
    font-weight: 400 !important;
    font-variation-settings: "wght"400;
}
.App .content-wrapper {
    max-width: 100%;
}
.App .DatePicker, .App .MonthNavigator {
    margin: 0;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 1rem;
    max-width: 1600px;
}
.App .DatePicker .DayNavigator {
    font-weight: 400;
    padding: 4px 4px 8px;
    margin: 10px 0 20px 0;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
    border: .25px solid rgba(255, 255, 255, 0.05);
}
.App .DayNavigator .date, .App .MonthNavigator .date {max-width: 180px;}
.App .MovieList {
    background-color: transparent;
}
.App .MovieList .MovieListItem {
    position: relative;
}
.App .MovieList .MovieListItem .movie-info .flex-container {}
.App .MovieList .MovieListItem .movie-info {
    margin: 0 .5rem 2rem;
}
.App h1 {
    font-size: calc(0.8rem + .6vw);
}
.App .page-header h3 {
    font-weight: 500;
    margin-left: 1rem !important
}
@media (min-width: 1200px) {
    .App h1 {
        font-size: 1rem;
    }
    .App .page-header h3 {
        font-size: 3.25rem;
    }
}
.App .MovieList h1, .App .MovieList .date {
    color: rgb(249, 251, 255);
    font-weight: normal;
}
.App .MovieList .ShowtimeType, .App .MovieList .more-showtimes, .App .Showtime {
    color: rgb(249, 251, 255);
}
.App .MovieListContainer.future h1 {
    color: black;
}
/* Each slide */
.App .MovieListItem {
    box-sizing: border-box;
    padding: 0 10px; /* Optional: inner spacing */
}
.App .Poster {
    margin-bottom: 0.6rem;
    border-radius: 1rem;
    background-color: var(--bs-primary-color);
    box-sizing: border-box;
    box-shadow: 0 4px 7px rgba(0, 0, 0, .45);
    overflow: hidden;
}
.App .Poster .age-banner {
    bottom: 16px;
    right: 0px;
    text-align: right;
}
.App .showtimes > .row {
    margin: 0;
    display: block;
}
.App .showtimes .row {
    width: 48%;
    display: inline-grid;
}
.App .showtimes .row:nth-child(even) {
    margin-left: 2%
}
.App .showtimes .row:nth-child(odd) {
    margin-right: 0%;
    float: left;
}
.App .showtimes .row .showtime-row {
    text-align: center;
    padding-left: 0;
    padding-right: 0
}
.App .showtimes .row .showtime-row > .Showtime {
    float: left;
    font-size: .9rem;
    margin: 2% 0% 0;
    padding: 5px;
    border-radius: 8px;
    width: 100%;
    background-color: var(--bs-red) !important;
    background-image: none !important;
    box-shadow: none;
}
.App .OrderContainer .table-container {
    background-color: black !important;
}
.App .OrderContainer .SeatSelection .SelectedSeats {
    color: rgb(249, 251, 255) !important;
}
.App .OrderContainer .SeatSelection .SeatColors {
    color: rgb(249, 251, 255) !important;
}
.App .OrderContainer .SeatSelection .blue {
    background-color: #fec047;
}
.App .OrderContainer .AvailableTickets {
    background-color: #000000 !important;
}
.App .OrderContainer .AvailableTickets .location-text {
    color: rgb(249, 251, 255) !important;
}
.App .OrderContainer .AvailableTickets .Ticket {
    color: rgb(249, 251, 255) !important;
}
.App .nav-buttons {
    background-color: #000000 !important;
    background-image: none !important;
}
.App .Summary {
    background-color: #232323 !important;
}
.App .Summary h3 {
    color: rgb(249, 251, 255) !important;
}
.App .Summary .summary-info {
    background-color: #232323 !important;
    color: rgb(249, 251, 255) !important;
}
.App .Summary .PriceInfo p {
    color: rgb(249, 251, 255) !important;
}
.App .CustomerContainer .textbox input {
    background-color: #434343 !important;
    color: rgb(249, 251, 255) !important;
}
.App .CustomerContainer a {
    color: #ff4c53 !important;
}
.App .CustomerContainer {
    color: rgb(249, 251, 255) !important;
    background-color: #000000 !important;
}
.App .PaymentContainer {
    background-color: #000;
    color: rgb(249, 251, 255);
}
.App .OrderContainer .SeatSelection .unnumbered {
    color: rgb(249, 251, 255);
}
.App .Showtime .ShowtimeType {
    right: 0px;
}
.App .ShowtimeType .showtime-type-icon {
    font-family: "Neue Montreal", Arial, sans-serif;
    background-color: var(--bs-light);
    border: none;
    border-radius: 50%;
    box-shadow: none;
    color: #000;
}
.App .MovieListContainer .MovieList .five-columns h1 {
font-size: 1rem;
font-variation-settings: "wght" 530;
font-weight: 500;
}

.App .MovieListContainer .MovieList .five-columns h1>.small-title {font-size: 80%; display: block; opacity: .6; margin-top: .25rem;}
.App .MovieList .five-columns:hover > .Poster, .App .MovieList .five-columns:hover > .poster-container{box-shadow: none;}
.MovieList .five-columns:hover > .Poster img, .MovieList .five-columns:hover > .poster-container img {
    transform: scale(1.05);
}
@media (max-width:1200px) {
    .App .MovieList .five-columns {}
}
@media (max-width:992px) {
    .App .MovieList .five-columns {
        width: 25%;
    }
     .App .MovieList h1 {
        height: 4rem !important;
    }
    .App .Showtime {
        height: 28px;
    }
    .App .MovieListContainer .MovieList .five-columns h1 {
        font-size: 1rem;
        padding: 0px 6px 10px;
    }
    .App .showtimes .row .showtime-row > .Showtime {
        font-size: 0.675rem;
    }
    .App .MovieList .MovieListItem .movie-info {
        margin: 0
    }
}
@media (max-width:768px) {
    .App .MovieList .five-columns {
        width: 33.33%;
    }
    .App .MovieListContainer .MovieList .five-columns h1 {
        font-size: 0.8rem;
    }
   
}
@media (max-width:576px) {
    .App .MovieList .five-columns {
        width: 50%;
    }
}