/*
 Theme Name: Divi-ACAA
 Theme URI: https://www.elegantthemes.com/gallery/divi/
 Description: Divi Child Theme
 Author: CEI
 Author URI: https://www.elegantthemes.com
 Template: Divi
 Version: 1.0.0
*/

/*GLOBAL FONT*/
body, .et_pb_text, h1, h2, h3, h4, h5, h6, p, a {
    font-family: 'DIN2014WebRegular', sans-serif !important;
}

.et_pb_text, .et_pb_blurb_description p,.et_pb_blurb_description,.et_pb_toggle_content{
    font-size: 15px !important;  
    letter-spacing: 0 !important;  
    line-height: 1.6 !important;  
}

/* Header Default (Desktop) Styles */
.et_pb_text h1 {
    font-size: 65px !important;
    font-weight: 700 !important;
}
.et_pb_text h2 {
    font-size: 36px !important;
    font-weight: 700 !important;
}
.et_pb_text h3 {
    font-size: 27px !important;
    font-weight: 700 !important;
}
.et_pb_text h4 {
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Header Mobile Styles (≤980px) */
@media (max-width: 980px) {
    .et_pb_text h1 {
        font-size: 42px !important;
    }
    .et_pb_text h2 {
        font-size: 28px !important;
    }
    .et_pb_text h3 {
        font-size: 22px !important;
    }
    .et_pb_text h4 {
        font-size: 18px !important;
    }
}


.global-custom-button {
    background-color: #fff;
    color: #003f75;
    border: 2px solid #003f75;
    padding: 3px 6px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    transition: background-color 0.3s, color 0.3s; /* Add smooth transition for both background and text color */
    font-weight: 800;
    line-height: 1.7em;
    letter-spacing: 1px;
 }
.global-custom-button:hover {
    background-color: #003f75;
    color: white; /* Change text color on hover */
    border-color: #003f75; /* Change border color on hover */
}


/*Header - Deletes dropdown arrow*/
.et-menu .menu-item-has-children>a:first-child:after {
    display: none !important;
}
.et-menu.nav > li:last-child ul {
    right: 0; /* Open to the left */
    left: auto;  /* Reset the left positioning */
}
.nav li ul{
    width: auto;
    min-width: 90px;
}
.sub-menu li{
    width: 100%;
}
.sub-menu{
    padding: 0 !important;
}

.et_mobile_menu{
    border-top: 2px solid #fbbb01 !important;
}
    
.et-menu li li a {
    width: auto; 
    line-height: 2;
    padding: 6px;
}
.nav li ul li {
    padding: 4px 6px; /*Optional: Adjust padding for better appearance */
    border-bottom: 1px solid #ccc; /* Add bottom border */
    white-space: nowrap;
}
.nav li ul li:last-child {
    border-bottom: none; /* Remove border for the last item */
}
.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li{
    margin-top: 0 ;
}

@media (min-width: 980px) {
    button.et_pb_menu__icon {
        align-items: flex-start !important;
    }
}

/* Slider Tabs Styling */
#menu-top-level-menu {
    display: flex;
    border-radius: 25px;
    padding: 0 !important;
    background-color: rgba(237, 237, 236, 1);
    margin-top: 0 !important;
  }
  
  #menu-top-level-menu li {
    text-align: center;
    padding: 8px 15px;
    border-radius: 25px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
  }
  #menu-top-level-menu li a:hover {
    color: rgba(15, 17, 16, 1)  !important;
    opacity: 1 !important;
}
  
  #menu-top-level-menu li a {
    font-family: 'DIN2014WebExtraBold', sans-serif !important;
    text-decoration: none;
    color: #333;
    display: block;
    width: 100%;
    height: 100%;
    color: rgba(87, 86, 86, 1) !important; /* Default text color for inactive tabs */
    padding: 0;
  }
    
  #menu-top-level-menu li.active a,
  #menu-top-level-menu li.current-menu-item a {
    color: rgba(15, 17, 16, 1) !important; /* Black text color for active tab */
  }
  
  #menu-top-level-menu li.active,
  #menu-top-level-menu li.current-menu-item {
    background-color: rgba(252, 188, 0, 1) !important; /* Yellow background for active tab */
  }
  @media (max-width: 980px) {
    #pill-nav .et_pb_menu__menu {
        display: block !important;
    }
    #pill-nav .et_mobile_nav_menu {
        display: none !important;
    }
}

#menu-top-level-menu-mobile {
    display: flex;
    border-radius: 50px;
    padding: 0px !important; /* Add slight padding for better spacing */
    background-color: rgba(237, 237, 236, 1); /* Light gray background */
    margin-top: 0 !important;
    justify-content: space-around; /* Spread items evenly */
    align-items: center; /* Center items vertically */
    width: 100% !important; /* Ensure full-width alignment */
}

#menu-top-level-menu-mobile li {
    text-align: center;
    padding: 8px 4vw; /* Adjust padding for better button size */
    border-radius: 50px; /* Full pill shape */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    flex-grow: 1; /* Make sure the li items expand */

}

#menu-top-level-menu-mobile li a {
    text-decoration: none;
    color: rgba(87, 86, 86, 1) !important; /* Default gray color */
    font-weight: bold; /* Optional: Match bold text style */
    font-size: 16px; /* Adjust for readability */
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
    padding: 4px 0; /* Ensures clickable area expands */

}

#menu-top-level-menu-mobile li.active a,
#menu-top-level-menu-mobile li.current-menu-item a {
    color: rgba(15, 17, 16, 1) !important; /* Black text color for active */
}

#menu-top-level-menu-mobile li.active,
#menu-top-level-menu-mobile li.current-menu-item {
    flex-grow: 1; /* Ensures the background expands */
    background-color: rgba(252, 188, 0, 1) !important; /* Yellow background for active tab */
    color: rgba(15, 17, 16, 1) !important; /* Black text for active tab */
}

#menu-top-level-menu-mobile li a {
    color: rgba(87, 86, 86, 1) !important; /* Default text color for inactive tabs */
}

/* Prevent background scrolling when menu is open */
#et-main-area.menu-open {
    overflow: hidden !important;
    height: 100% !important;
    position: fixed !important;
    width: 100% !important;
}
#mobile_menu4 {
    top: 124px !important; /* Adjust this value as needed */
}
/* Menu settings */
#mobile_menu4 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 124px); /* Adjust height dynamically */
    background-color: #fff;
    z-index: 99999;
    overflow-y: auto; /* Allow menu scrolling */
    -webkit-overflow-scrolling: touch;
    display: none; /* Hide by default */
}

/* Show menu when open */
#mobile_menu4[aria-expanded="true"] {
    display: block;
}

#mobile_menu4 li {
    border-bottom: 1px solid #ddd;
}

#mobile_menu4 li:last-child {
    border-bottom: none;
}





/**************Styles for flightStatusTable.php*********************/
body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f9;
        margin: 0;
        padding: 0;
    }

    /* Container */
    .container {
        width: 100%;
        background-color: #fff;
    }

    /* Scrollable departures and arrivals */
#departures, #arrivals {
    max-height: 80vh; /* Adjust this value if needed */
    overflow-y: auto;
}

/* Filter Bar Styles */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap; /* Allows the items to wrap when needed */
}

.filter-bar label {
    font-weight: bold;
    font-size: 1rem;
    color: #333;
}

.filter-bar select,
.filter-bar input[type="text"] {
    padding: 5px 5px;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.3s;
}
#searchInput{
    min-width: 280px ;
}

.filter-bar select:focus,
.filter-bar input[type="text"]:focus {
    border-color: #0073e6;
}

.filter-bar input[type="text"] {
    flex-grow: 1;
}



/*Flight Info Container - Tail Fin + Airlines + Number*/
.flight-info-container {
    display: flex;
    align-items: center; /* Align image and text vertically center */
}
.tailfin-logo{
    height: 40px;
    width: 53px;
    margin-right:2px;
}

.flight-details {
    display: flex;
    flex-direction: column;
}

.airline-name-flightstatus {
    color:black;
    font-size: 1em;
    margin-bottom: 2px; /* Space between airline name and flight code */
}

.flight-code {
    font-size: 0.9em;
    color:black;
}



/* Make the filter bar stack below the tab-links on small screens */
@media (max-width: 768px) {
    /* Tab Links */
    .tab-header {
        flex-direction: column; /* Stack the tab links vertically */
        align-items: stretch; /* Make the tab buttons full-width */
        border-bottom: none !important;
        margin-bottom: 10px;
    }

    .tab-links {
        width: 100%; /* Ensure tab links take up full width on mobile */
        margin-bottom: 15px; /* Add space between tabs and filter bar */
    }

    .tab-links button {
        width: 100%; /* Make each button fill the available space */
        margin-bottom: 5px; /* Space between buttons */
    }

    /* Filter Bar Stack */
    .filter-bar {
        flex-direction: column; /* Stack items vertically */
        align-items: stretch; /* Stretch the inputs to full width */
        width: 100% ; /* Ensure it takes full width */
        gap: 15px; /* Space between elements */
    }

    .filter-bar select,
    .filter-bar input[type="text"] {
        width: 100%; /* Make the select and input take up full width */
        
    }

    .filter-bar label {
        font-size: 0.9rem; /* Reduce font size of labels for smaller screens */
    }
}

/* Further Adjustments for Smaller Screens */
@media screen and (max-width: 480px) {
    h1 {
        font-size: 1.5rem;
    }

    .flight-table td {
        font-size: 14px;
        padding: 5px 0;
    }
}
    /* Tabs navigation */
    .tab-links {
        display: flex;
        flex-grow: 1;
    }
    .tab-links button {
        padding: 10px 20px;
        cursor: pointer;
        background-color: #F1E5C8;
        color: black;
        border: none;
        font-size: 1em;
        font-weight: bold;
        
    }
    .tab-header {
        border-bottom: 1px solid black;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .filter-container {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        
    }
    select {
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #ddd;
    }
    .tab-links button:hover {
        background-color: #FBBB01;
    }

    .tab-links button.active {
        background-color: #FBBB01;
    }

    /* Tab content - not needed? */
    .tab-content {
        display: none;
    }

    /* Responsive Table to Card Layout for Mobile */
    @media screen and (max-width: 768px) {

        .flight-table-wrapper {
            overflow-x: hidden;
        }

        .flight-table {
            display: flex;
            flex-direction: column;
            width: 100%;
            border: 0 !important;
        }
        

        .flight-table thead {
            display: none; /* Hide table headers on mobile */
        }

        .flight-table tr {
            display: grid;
            grid-template-columns: 1fr 1fr;
            border: 1px solid #D9D9D9;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 5px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Handle variable height for arrival rows */
        #arrivals .flight-table tr {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto auto auto;
            grid-template-areas: 
                "one one"
                "two five"
                "three six"
                "four four";
            align-items: start;
        }
        
        /* For departures, maintain similar structure */
        #departures .flight-table tr {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto auto;
            grid-template-areas: 
                "one one"
                "two three"
                "four six";
            align-items: start;
        }
        #departures .flight-table .three {
            border-top: 1px solid #eee;
            /* Additional styling for departures' .three */
        }
        #arrivals .flight-table .five {
            border-top: 1px solid #eee;
            /* Additional styling for departures' .three */
        }
        
        
        /* Ensure columns with variable content don't affect their partners */
        .flight-table .two, .flight-table .three,
        .flight-table .five, .flight-table .six {
            height: auto;
            align-self: start;
        }

        .flight-table td {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: left;
            padding: 8px 0;
            text-align: left;
            border: 0;
            font-weight: bold;
            color: #666666;
            border: none;

        }
        /* Hide only the specific data-label on mobile */
        .flight-table td[data-label="Flight"]::before {
            display: none;
        }
        .flight-table td span {
            font-weight: normal; /* Remove bold styling from the actual time */
            color: #666666; /* Optional: Lighter color for actual time */
        }

        .flight-table td::before {
            content: attr(data-label);
            color: #666666;
            font-weight: normal;
            flex-basis: auto;
        }


        /* Order for each item in the card on mobile view */
        .flight-table .one {
            grid-area: one;
            border-bottom: 1px #BFBFBF;
            border-top: none;
        }
        .flight-table .two {
            grid-area: two ;
        }
        .flight-table .three {
            grid-area: three;
            border: none;
        }
        .flight-table .four {
            grid-area: four;
            border: none;
        } 
        .flight-table .five {
            grid-area: five;
            border: none;
        }    
        .flight-table .six {
            grid-area: six;
            border: none;
        }           

    }

    /* Further Adjustments for Smaller Screens */
    @media screen and (max-width: 480px) {
        h1 {
            font-size: 1.5rem;
        }

        .flight-table td {
            font-size: 14px;
            padding: 5px 0;
        }
    }

    .no-results-container-flight-status {
        display: none; /* Hide by default */
        grid-column: span 4; /* Span across all grid columns */
        text-align: center;
        color: #555;
        font-size: 18px;
        padding: 10px;
    }
    .no-results-container-flight-status img {
        max-width: 300px; /* Adjust the image size */
        margin-bottom: 10px;
    }
    #clear-filters-button-flight-status{
        background-color: #FBBB01;
        padding: 5px;
    }

/**************End Styles for flightStatusTable.php*********************/











/**************Styles for searchPageFlightTable.php*********************/
.main-container {
    display: flex;
    gap: 20px; /* Optional: adds space between columns */
}
.main-container.single-result {
    justify-content: center;
    align-items: center;
}
.main-container.single-result .flight-cards-wrapper,
.main-container.single-result .search-results-wrapper {
    width: 75%; /* Ensures 50% width when only one result type is displayed */
    margin: auto; /* Centers the single child div */
}

.flight-cards-wrapper,.search-results-wrapper {
    width: 50%; /* Set each column to take up 50% of the container */
}

.flight-card {
    border: 1px solid #ddd;
    padding: 5px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}

.flight-card-header {
    display: flex;
    font-size: 12px;
    border-bottom: 1px solid #BFBFBF;
    align-items: center;
}
.tail-fin {
    margin-right: 8px; /* Add spacing between tailFin and text */
}

.flight-details p {
    margin: 0;
}
.flight-card-body {
    display: flex;
    font-size: 12px;
    gap: 5px;
}

.flight-card-body p {
    margin: 0;
    flex: 1; /* Distributes items evenly in the row */
}

.search-results-cards {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.search-result-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
}

.search-result-content {
    flex-grow: 1;
    margin-right: 15px;
}

.search-result-title {
    font-size: 1.2em;
    color: #0073aa;
    text-decoration: none;
}

.search-result-title:hover {
    text-decoration: underline;
}

.search-result-excerpt {
    color: #666;
    font-size: 0.9em;
    margin: 10px 0;
}

.visit-page-button {
    display: inline-block;
    padding: 5px 10px;
    background-color: white;
    color: #0073aa;
    text-decoration: none;
    border: 1px solid #0073aa;
    font-size: 0.9em;
    white-space: nowrap;
}

.visit-page-button:hover {
    background-color: #005177;
}

/* Pagination styling */
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.pagination a {
    padding: 5px 10px;
    text-decoration: none;
    color: #0073aa;
}

.pagination a:hover {
    background-color: #f5f5f5;
}

.pagination .current {
    padding: 5px 10px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
}

.tab-content-search {
    display: none;
}

/* Show active tab content */
.tab-content-search.mobile-active {
    display: block;
}

/* Style for mobile view */
@media only screen and (max-width: 768px) {
    .tab-buttons-search {
        display: flex;
        flex-direction: row;
    }

    .tab-buttons-search button {
        padding: 10px 20px;
        cursor: pointer;
        background-color: #F1E5C8;
        color: black;
        border: none;
        border-radius: 5px;
        font-size: 1em;
        font-weight: bold;
    }
    .tab-buttons-search button.active{
        background-color: #FBBB01;
    }

    /* Ensure full width for mobile */
    .main-container {
        flex-direction: column; /* Stack elements vertically */
        gap: 0; /* Remove gap on mobile */
        height: auto; /* Reset height on mobile */
    }

    .main-container.single-result {
        height: auto; /* Allow content to flow naturally on mobile */
        align-items: center; /* Align items in the center */
    }

    .flight-cards-wrapper,
    .search-results-wrapper {
        width: 100%; /* Full width on mobile */
        margin: 0 auto 15px; /* Center and add spacing */
    }

    .main-container.single-result .flight-cards-wrapper,
    .main-container.single-result .search-results-wrapper {
        width: 100%; /* Full width when only one result type is present */
    }
    @media only screen and (max-width: 485px){
        /* Enhance layout of the flight card */
        .flight-card {
            padding: 15px; /* Added padding for better spacing */
            margin-bottom: 5;
        }
        .flight-card-header{
            padding: 6px 24px;
        }

        .flight-card-body {
            display: flex;
            flex-direction: column; /* Stack elements vertically */
        }

        .flight-card-body p {
            padding: 6px 24px;
            font-size: 14px; /* Slightly larger font for readability */
            margin: 0;
            flex: 1; /* Ensure that each paragraph has enough space */
        }

        /* Prevent squishing of formattedActualTime */
        .flight-card-body p strong {
            white-space: nowrap; /* Prevent text from wrapping */
        }

        /* Ensure proper spacing for the remarks section */
        .flight-card-body p span {
            margin-top: 8px; /* Add spacing for remarks if present */
        }
    }

    /* Ensure pagination works on mobile */
    .pagination {
        display: flex;
        justify-content: center;
    }
}

/* Hide the tab container and content on larger screens */
@media only screen and (min-width: 769px) {
    .tab-buttons-search {
        display: none; /* Hide tabs for larger screens */
    }

    .tab-content-search {
        display: block; /* Show the flight cards or search results by default */
    }
}


/* Style for delayed flights */
.flight-card.delayed {
    background-color: #E6E6E6;
}

/* Style for cancelled flights */
.flight-card.cancelled {
    background-color: #FFE8E8;
}

/**************End Styles for searchPageFlightTable.php*********************/




/**************Styles for eat-shop-more.php*********************/

.eat-shop-more-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
    margin-top: 10px;
}
.filter-bar-eat-shop-more {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Ensures children are aligned to left and right */
    padding: 10px 15px;
    border-bottom: 1px solid black;
}

.filter-bar-filters {
    display: flex; /* Ensures select and input are in a row */
    gap: 10px; /* Optional: Adds space between select inputs and search */
    
}
.filter-dropdown{
    padding: 5px;
    font-size: 12px;
    border-radius: 4px;
    
}
#search-input{
    min-width: 200px;
    font-size: 12px;
    border-radius: 4px;
}
.card {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: left;
    border-radius: 5px;;
}
.card-content-eat-shop{
    padding: 8px;
}
.card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.eat-shop-h3 {
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    margin-bottom: 5px;
}
.eat-shop-p {
    color: #555;
    padding: 0;
    font-size: 12px;
    margin-bottom: 5px;

}
.card-icons{
    height: 15px !important;
    width: 15px !important;
    vertical-align: middle;
}

.no-results-container-eat-shop-more {
    display: none; /* Hide by default */
    grid-column: span 4; /* Span across all grid columns */
    text-align: center;
    color: #555;
    font-size: 18px;
    padding: 10px;
}
.no-results-container-eat-shop-more img {
    max-width: 300px; /* Adjust the image size */
    margin-bottom: 10px;
}
.open-status-green {
    color: green;
}
#clear-filters-button{
    background-color: #FBBB01;
    padding: 5px;
}
.filter-button.selected {
    background-color: #003f75;
    color: #fff;
    border: 1px solid #003f75;
}
.filter-button {
    color: rgba(0, 97, 174, 1);
    background-color: white;
    border: 1px solid #0056b3;
    padding: 5px;
    font-size: 12px;
}
.filter-button:hover {
    background-color: #F5F8FA;
    color: rgba(0, 63, 117, 1); /* Change text color on hover */
    border-color: #005bb5; /* Change border color on hover */
}
@media (max-width: 768px) {
    .eat-shop-more-container {
        grid-template-columns: 1fr; /* One card per row */
    }
    .filter-bar-eat-shop-more {
        flex-wrap: wrap; /* Stack elements on smaller screens */
        padding: 0;
    }
    .filter-bar-keywords {
        order: 1; /* Ensure keyword buttons appear first */
        flex-wrap: wrap; /* Allow wrapping of buttons */
        width: 100%; /* Take full width */
        margin-bottom: 10px; /* Add spacing below */
    }
    .filter-bar-filters {
        order: 2; /* Filters and search input come next */
        flex-direction: column; /* Stack elements vertically */
        width: 100%; /* Take full width */
    }
    .filter-dropdown, .search-input {
        width: 100%; /* Make dropdown and search full width */
        margin-bottom: 10px; /* Add spacing below */
    }
}
/**************End Styles for eat-shop-more.php*********************/


/**************Styles for learn-more.php*********************/
.mymap {
    height: 600px;
    width: 100%;
}
.poi-details{
    display:flex;
    width: 70%;
    visibility: hidden; /* Initially hidden */
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
}
.poi-details h1{
    font-weight: bold;
}
.learn-more-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.divider {
    width: 20%; /* Divider takes up the same width as the .poi-details */
    height: 2px; /* Height of the divider */
    background-color: rgba(251, 187, 1, 1); 
    border: none; /* Remove any default borders */
    margin: 10px 0; /* Space around the divider */
}

/**************End Styles for learn-more.php*********************/

/**************Styles for visual-arts.php*********************/

.visual-arts-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
    margin-top: 10px;
}
.filter-bar-visual-arts {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Ensures children are aligned to left and right */
    padding-bottom: 5px;;
    border-bottom: 1px solid black;
}

.filter-bar-keywords {
    display: flex; /* Ensure buttons stay in a row */
    flex-grow: 1; /* Takes up remaining space on the left */
    gap: 10px; /* Optional: Adds space between buttons */
    
}

.filter-bar-filters-visual-arts {
    display: flex; /* Ensures select and input are in a row */
    gap: 10px; /* Optional: Adds space between select inputs and search */
    
}
.filter-dropdown{
    padding: 5px;
    font-size: 12px;
    border-radius: 4px;
    
}
#search-input{
    min-width: 200px;
    font-size: 12px;
    border-radius: 4px;
}
.card {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: left;
}
.card-content-visual-arts{
    padding: 8px;
}
.card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.visual-arts-h3 {
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.visual-arts-p {
    color: #555;
    padding: 0;
    font-size: 12px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

.no-results-container-visual-arts {
    display: none; /* Hide by default */
    grid-column: span 4; /* Span across all grid columns */
    text-align: center;
    color: #555;
    font-size: 18px;
    padding: 10px;
}
.no-results-container-visual-arts img {
    max-width: 300px; /* Adjust the image size */
    margin-bottom: 10px;
}
.open-status-green {
    color: green;
}
#clear-filters-button{
    background-color: #FBBB01;
    padding: 5px;
}
.filter-button.selected {
    background-color: #003f75;
    color: #fff;
    border: 1px solid #003f75;
}
.filter-button {
    color: rgba(0, 97, 174, 1);
    background-color: white;
    border: 1px solid #0056b3;
    padding: 5px;
    font-size: 12px;
}
@media (max-width: 768px) {
    .visual-arts-container  {
        grid-template-columns: 1fr; /* One card per row */
    }
    .filter-bar-visual-arts {
        flex-wrap: wrap; /* Stack elements on smaller screens */
        padding: 0;
    }
    .filter-bar-keywords {
        order: 1; /* Ensure keyword buttons appear first */
        flex-wrap: wrap; /* Allow wrapping of buttons */
        width: 100%; /* Take full width */
        margin-bottom: 10px; /* Add spacing below */
    }
    .filter-bar-filters-visual-arts {
        order: 2; /* Filters and search input come next */
        flex-direction: column; /* Stack elements vertically */
        width: 100%; /* Take full width */
    }
    .filter-dropdown, .search-input {
        width: 100%; /* Make dropdown and search full width */
        margin-bottom: 10px; /* Add spacing below */
    }
}
/**************End Styles for visual-arts.php*********************/




/**************Styles for car-rental.php*********************/

  /* Add alternating row colors for better readability */
.car-rental-list-table tr:nth-of-type(odd) {
    background-color: rgba(242, 242, 242, 1)
}
.car-rental-table-container {
    width: 100%;
    overflow-x: auto; /* Makes the table scrollable on smaller screens */
}

.car-rental-list-table {
    width: 100%;
    border-collapse: collapse;
}

.car-rental-info-cell {
    text-align: left; /* Aligns the content to the left */
    padding: 10px;
}

.car-rental-website-column {
    text-align: center; /* Aligns the content to the center */
    padding: 10px;
}

.car-rental-phone-column {
    text-align: right; /* Aligns the content to the right */
    padding: 10px;
}

.car-rental-logo-img {
    max-width: 50px;
    height: auto;
    margin-right: 10px;
    vertical-align: middle;
}

.car-rental-name-text {
    display: inline-block;
    vertical-align: middle;
    color: rgba(102, 102, 102, 1);
}

.website-link {
    color: rgba(0, 66, 129, 1);
    text-decoration: underline;

}
.car-rental-phone-number-link {
    color: rgba(0, 66, 129, 1);
    text-decoration: underline;
}
.car-rental-table-container {
    width: 100%;
    overflow-x: auto;
}

/* Default table styling for larger screens */
.car-rental-list-table {
    width: 100%;
    border-collapse: collapse;
}
.car-rental-info-cell {
    text-align: left;
    padding: 10px;
}

.car-rental-website-column {
    text-align: center;
    padding: 10px;
}

.car-rental-phone-column {
    text-align: right;
    padding: 10px;
}

/* Mobile styles: cards */
@media screen and (max-width: 550px) {
    .car-rental-list-table {
        display: block;
        width: 100%;
        border: none !important;
    }

    .car-rental-list-table tbody {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .car-row {
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }

    .car-rental-info-cell,
    .car-rental-website-column,
    .car-rental-phone-column {
        text-align: left;
        padding: 5px 5px !important;
        border-top: none !important;
    }

    .car-rental-info-cell {
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #ccc; /* Adds a line below this cell only on mobile */

    }

    .car-rental-logo-img {
        max-width: 60px;
        height: auto;
        flex-shrink: 0;
    }

    .car-rental-name-text {
        color: rgba(102, 102, 102, 1);
        font-size: 1.2em;
    }

    .car-rental-website-column,
    .car-rental-phone-column {
        margin-top: 10px;
        border: none; /* Ensures no borders for other columns on mobile */
    }

    .website-link,
    .car-rental-phone-number-link {
        display: inline-block;
        color: rgba(0, 66, 129, 1);
        text-decoration: none;
    }

    .website-link:hover,
    .car-rental-phone-number-link:hover {
        text-decoration: underline;
    }
}



/**************End Styles for car-rental.php*********************/






/**************Styles for vehicle-hire-list.php*********************/

.vehicle-hire-accordion-container {
    width: 100%;
}
.vehicle-hire-accordion-header {
    cursor: pointer;
    padding: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid rgba(217, 217, 217, 1);
}
.vehicle-hire-accordion-title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}
.vehicle-hire-icon {
    font-size: 24px;
    color: #0073aa;
    transition: transform 0.3s ease;
}
.vehicle-hire-accordion-body {
    display: none;
    background-color: white;
}
.vehicle-hire-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
.vehicle-hire-info {
    display: flex;
    align-items: center;
    font-weight: none;
}
.vehicle-hire-name {
    color: rgba(102, 102, 102, 1);
}
.vehicle-hire-phone {
    font-size: 14px;
}
.vehicle-hire-phone-number {
    color: #004281;
    text-decoration: none;
}
.vehicle-hire-phone-number:hover {
    text-decoration: underline;
}
/* Style for even rows */
.vehicle-hire-accordion-body .vehicle-hire-row:nth-child(even) {
    background-color: #f2f2f2; /* Gray background for even rows */
}
/**************Styles for vehicle-hire-list.php*********************/

/**************Styles for latest-news.php*********************/
.latest-news-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    margin-top: 10px;
}
.card-news {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: left;
    border-radius: 5px;
}
.card-content-news{
    padding: 8px;
}
.card-img-news {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.h3-news {
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.p-news {
    color: #555;
    padding: 0;
    font-size: 12px;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.button-news {
    background-color: #fff;
    color: rgba(0, 66, 129, 1);
    border: 1px solid rgba(0, 66, 129, 1);
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}
.button-news:hover {
    background-color: #005bb5;
    color: white; /* Change text color on hover */
    border-color: #005bb5; /* Change border color on hover */
}
@media (max-width: 768px) {
    .latest-news-container {
        grid-template-columns: 1fr; /* One card per row */
    }
}


/**************Styles for latest-news.php*********************/

/**************Styles for awards-recognition.php*********************/

.tabs-awards {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #000; /* Black solid line */
}

.tab-button-awards {
    width: 100px; /* Set a fixed width for the tabs */
    padding: 10px 20px;
    background-color: #f1f1f1;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.tab-button-awards.active {
    background-color: #ffc107;
}

.awards-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.award-item {
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.award-title {
    color: rgba(87, 86, 86, 1);
    font-size: 14px;
}

.award-item:nth-child(even) {
    background-color: rgba(242, 242, 242, 1);
}

.award-item:nth-child(odd) {
    background-color: rgba(255, 255, 255, 1);
}

.view-more-button {
    background-color: #fff;
    color: rgba(0, 66, 129, 1);
    border: 1px solid rgba(0, 66, 129, 1);
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s, color 0.3s; /* Add smooth transition for both background and text color */
}

.view-more-button:hover {
    background-color: #005bb5;
    color: white; /* Change text color on hover */
    border-color: #005bb5; /* Change border color on hover */
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .tabs-awards {
        display: none; /* Hide tabs on mobile */
    }

    .year-dropdown-container {
        margin-bottom: 15px;
        display: block;
    }

    .year-dropdown {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .award-item {
        flex-direction: column;
        align-items: flex-start; /* Align items to the left */

    }
    .view-more-button {
        margin-top: 5px;
    }
}
/* Ensure dropdown is hidden on larger screens */
@media (min-width: 769px) {
    .year-dropdown-container {
        display: none; /* Hide dropdown on desktop */
    }
}
/**************Styles for awards-recognition.php*********************/


/**************Styles for awards-recognition-corporate-landing.php*********************/

.corporate-awards-section {
    margin-top: 30px;
}

.awards-list-landing {
    display: flex;
    flex-direction: column;
}

.award-item-landing {
    margin-bottom: 5px;
    padding: 10px;
    border-bottom: 1px solid rgba(178, 178, 177, 1);
}

.award-year-landing {
    font-size: 18px;
    margin-right: 20px;
    width: 60px; /* Fixed width for the year */
    color: rgba(87, 86, 86, 1);

}

.content-button-landing {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 10px; /* Adds space between title and button */
    align-items: flex-start;
}

.no-shrink{
    margin-left: 5px;
    flex-shrink: 0; /* Prevents button from shrinking when text wraps */
    white-space: nowrap; /* Ensures the button text does not wrap */
}

.award-title-landing {
    flex-grow: 1;
    font-size: 12px;
    font-weight: bold;
    color: black;
}

.view-more-button-landing {
    background-color: #fff;
    color: rgba(0, 66, 129, 1);
    border: 1px solid rgba(0, 66, 129, 1);
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s, color 0.3s; /* Add smooth transition for both background and text color */
}

.view-more-button-landing:hover {
    background-color: #005bb5;
    color: white; /* Change text color on hover */
    border-color: #005bb5; /* Change border color on hover */
}
.award-item-landing:last-child {
    border-bottom: none;
}

@media screen and (max-width: 768px) {
    .award-item-landing {
        flex-direction: column;
        align-items: flex-start;
    }

    .award-title-landing {
        margin-right: 0;
    }

    .view-more-button-landing {
        margin-top: 10px;
    }
    .content-button-landing{
        flex-direction: column;
        align-items: flex-start;
    }
}

/**************Styles for awards-recognition-corporate-landing.php*********************/


/**************Styles for career-oppurtunities.php*********************/

/* General container styling */
.career-opportunities-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 100%;
    margin-top: 10px;
}

/* Card styling */
.card-career-opportunities {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: left;
}

/* Image styling */
.card-career-opportunities img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

/* Content styling */
.card-content-career-opportunities {
    padding: 8px;
}

.card-content-career-opportunities h3 {
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-content-career-opportunities p {
    color: #555;
    padding: 0;
    font-size: 10px;
    margin-bottom: 5px;
    line-height: normal;
}

.button-career-opportunities {
    background-color: #fff;
    color: rgba(0, 66, 129, 1);
    border: 1px solid rgba(0, 66, 129, 1);
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.button-career-opportunities:hover {
    background-color: #005bb5;
    color: white; /* Change text color on hover */
    border-color: #005bb5; /* Change border color on hover */
}
@media (max-width: 768px) {
    .career-opportunities-container {
        grid-template-columns: 1fr; /* One card per row */
    }
}
/**************Styles for career-oppurtunities.php*********************/


/**************Styles for forms-guides-badging.php*********************/
.table-forms-guides-badging {
    width: 100% !important;
    border: none !important;
}
.table-forms-guides-badging tr {
    border-bottom: 1px solid #ccc; /* Add border only between rows */
}
.table-forms-guides-badging tr:nth-child(odd) {
    background-color: #f2f2f2; /* Set background color for odd rows */
}
.table-forms-guides-badging tr:last-child {
    border-bottom: none;
}
.text-left{
    color: rgba(15, 17, 16, 1);
}

.text-left-forms-guides-badging {
    text-align: left;
    width: 80%;
}
.button-right-forms-guides-badging {
    text-align: right;
    width: 20%;
}
.button-forms-guides-badging {
    background-color: #fff;
    color: rgba(0, 66, 129, 1);
    border: 1px solid rgba(0, 66, 129, 1);
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s, color 0.3s; /* Add smooth transition for both background and text color */
}
.button-forms-guides-badging:hover {
    background-color: #005bb5;
    color: white; /* Change text color on hover */
    border-color: #005bb5; /* Change border color on hover */
}
/**************Styles for forms-guides-badging.php*********************/

/**************Styles for board-meeting-minutes.php*********************/

/* Desktop Table Styles */
.tabs-meeting-years {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #000; /* Black solid line */
}

.tabs-button-years {
    width: 100px; /* Set a fixed width for the tabs */
    padding: 10px 20px;
    background-color: #f1f1f1;
    border: none;
    cursor: pointer;
    font-weight: bold;
}
.tabs-button-years.active {
    background-color: #ffc107;
}
.meetings-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.meetings-table th, .meetings-table td {
    padding: 10px;
    text-align: left;
}
.meetings-table td:last-child {
    text-align: right; /* Align the button to the right in the last column */
}
.meetings-table th {
    font-weight: bold;
}

/* Light gray for odd rows excluding the header row */
.meetings-table tbody tr:nth-child(odd) {
    background-color: rgba(242, 242, 242, 1); /* Light gray for odd rows in tbody */
}


.view-more-button {
    background-color: #fff;
    color: rgba(0, 66, 129, 1);
    border: 1px solid rgba(0, 66, 129, 1);
    padding: 5px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: background-color 0.3s, color 0.3s; /* Add smooth transition for both background and text color */
}

.view-more-button:hover {
    background-color: #005bb5;
    color: white; /* Change text color on hover */
    border-color: #005bb5; /* Change border color on hover */
}

/* Mobile Card Styles */
.meeting-cards {
    display: none;
}

.meeting-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.label {
    font-weight: bold;
    flex: 1;
}

.value {
    flex: 2;
    text-align: right;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .tabs-meeting-years {
        display: none; /* Hide tabs on mobile */
    }
    .meetings-table {
        display: none;
    }

    .meeting-cards {
        display: block;
    }

    .label {
        display: block;
        margin-bottom: 5px;
    }

    .value {
        text-align: left;
    }
}

@media (min-width: 769px) {
    .meeting-cards {
        display: none;
    }
}

/**************Styles for board-meeting-minutes.php*********************/

/**************Styles for cargo-providers.php*********************/
.table-cargo-providers {
    width: 100% !important;
    border: none !important;
}
.table-cargo-providers tr {
    border-bottom: 1px solid #ccc; /* Add border only between rows */
}
.table-cargo-providers tr:nth-child(odd) {
    background-color: #f2f2f2; /* Set background color for odd rows */
}
.table-cargo-providers tr:last-child {
    border-bottom: none;
}

.text-left-cargo-providers {
    text-align: left;
    width: 80%;
    color: rgba(15, 17, 16, 1);
}
.text-right-cargo-providers{
    text-align: right;
    width: 20%;
}
.text-right-cargo-providers a {
    color: #003f75; 
    text-decoration: underline;
    text-decoration-color: #003f75;

}
/**************Styles for cargo-providers.php*********************/













/*Kishore*/

/* security wait time horizontally */
/* Style for the outer container */
.wait-time-container {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* Style for the inner boxes */
.wait-time-box {
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
    border-right: 1px solid rgb(169,169,169);
    font-family: 'Arial', sans-serif;
    padding-inline: 25px;
    white-space: nowrap;
}

.wait-time-display {
    height: 50px;
}

.tsa-time {
    color: #FBBB01;
    font-weight: bold; 
    font-size: 2.5rem;
    -webkit-text-stroke: 1.1px black;
    font-family: "Poppins", sans-serif !important;
}

.tsa-minutes {
    color: rgb(112, 112, 112);
    font-size: 16px;
}

.tsa-title {
    font-weight: bold;
    font-size: 13px;
    color: black;
    margin-top: 7px;
}

/* Remove the right border on the last box */
.wait-time-box:last-child {
    border-right: none;
}

.wait-time-container.two-lanes .wait-time-box:nth-child(2) {
    border-right: none;
}

/* Ensure boxes stack on smaller screens */
@media (max-width: 600px) {
    .wait-time-container {
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .wait-time-box {
        width: 50%;
        margin-bottom: 10px;
        border-bottom: none;
        border-right:none;
    }
}

.tsa-icon {
    width: 40px;
}

/* security wait time vertically */
/* Style for the outer container */
.tsa-vertical-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    gap: 40px;
}

.tsa-vertical-box {
    display: flex;
    gap: 30px;
    font-family: 'Arial', sans-serif;
}

.tsa-vertical-time-box {
    width: 20%;
    text-align: center;
}

.tsa-vertical-info-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Increased specificity */
.tsa-vertical-info-box h4.tsa-vertical-title {
    font-weight: 700;
    color: black;
    font-size: 14px;
    padding: 0;
}

.tsa-vertical-info-box p.tsa-vertical-description {
    color: black;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    margin-top: 4px;
}

/* Increased specificity */
.tsa-vertical-time-display h1.tsa-vertical-time {
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.tsa-vertical-minutes {
    color: white;
}

.tsa-vertical-icon {
    font-size: 2.5rem;
  	font-weight: bold;
  	
}

/* Ensure boxes stack on smaller screens */
@media (max-width: 600px) {
  .tsa-vertical-box {
    display: flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
  .tsa-vertical-info-box{
    text-align:center;
  }
  
}


/* Parking api component styles */
/* Style for the outer container */
.parking-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    gap: 30px;
}
 
.parking-section {
    display: flex;
    gap: 7px;
    font-family: 'Arial', sans-serif;
    padding-bottom: 20px;
    border-bottom: 1px solid;
}
 
.parking-status-display {
    width: 20%;
    text-align: center;
}


.parking-info-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 

/* Increased specificity */
h4.parking-lot-title {
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    font-size: 17px;
    padding: 0;
}
 
.parking-learnmore {
    color: rgba(196, 191, 169, 1);
    font-size: 12px;
    font-weight: 600;
    /* margin-top: 6px; */
    display: flex;
    justify-content: space-between;
}

.dailyrate_flag_combine{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.flag_time_combine{
    display: flex;
    gap: 7px;
    align-items: center;
}

button.learnmore{
    background: none;
    color: #ffb400;
    border: none; 
    font-size: 9px;  
    cursor: pointer;
}

.learnmore-arrow{
    cursor: pointer;
}

.parking-learnmore-closed {
    color: #ffb400;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    margin-top: 4px;
    display: none;
}
 
/* Increased specificity */
h2.parking-availability {
    color: rgba(252, 188, 0, 1);
    font-size: 2.5rem;
    font-weight: bold;
    padding: 0;
    margin: 0;
    /* -webkit-text-stroke: 1px #323232; */
}
 
.parking-space-label {
    color: rgba(196, 191, 169, 1);
    font-size:13px;
}
 
.parking-icon {
    width: 42px;
}
 


.parking-learnmore-hide{
    display: none;
}

.parking-learnmore-show{
    display: flex;
}

.parking-learnmore-closed-hide{
    display: none;
}

.parking-learnmore-closed-show{
    display: flex;
}

.parking-status-display-hide {
    display: none;
  }
  
 
.parking-info-box-padding{
  padding-inline: 17px;
}


/* Ensure boxes stack on smaller screens */
@media (max-width: 600px) {
  .parking-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  
  .parking-info-box {
    text-align: center;
  }

  .parking-learnmore {
    display: block;
  }

  .parking-learnmore-hide{
    display: none;
}

.parking-learnmore-show{
    display: block;
}

.flag_time_combine{
    justify-content: center;
  }

  .dailyrate_flag_combine{
    margin: 10px;
    display: block;
}

}

/* parking_section */
.parking-rezcom-column{
    z-index: 100;
}


  /* //////////////////////////////////////////////////// */
 

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    overflow: auto;
}

.modal-content {
    background-color: #fff;
    width: 70%;
    border-radius: 10px;
    overflow: hidden;
    margin: 40px 0;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
}

.closeparking {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    float: right;
    cursor: pointer;
    margin-top: 10px;
    margin-right: 20px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: start;
}

.modal-info {
    width: 50%;
    flex: 1;
}

.modal-info h2 {
    margin: 0;
    color: black;
    font-size: 15px;
}

.modal-info p {
    margin-top: 17px;
    font-size: 13px;
    line-height: 1.5;
}

.modal-map {
    flex: 1;
}

.modal-map img {
    object-fit: fill;
    width: 100%;
    position: relative;
    height: 100%;
}

.pricing {
    border-top: 1px dotted #ccc;
    border-bottom: 1px dotted #ccc;
    margin: 20px 0;
    padding: 10px 0;
}

.pricing p {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

.walking-time {
      background-color: #F7FAFE;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: center;
      padding: 18px 15px;
}

.walking-time img {
    width: 30px;
    height: 30px;
}

.walking-time .line {
    flex: 1;
    border-top: 1px dotted black;
    margin: 0 5px;
  }


.parking-price{
  text-align: center;
}


.modal-buttons {
    display: flex;
    gap: 10px;
    flex-direction: column;
    margin-top: 20px;
}

.btn-directions {
    display: inline-block; 
    background-color: #000;
    color: #fff;
    text-decoration: none; 
    padding: 8px 20px;
    font-size: 13px;
    text-align: center;
    border-radius: 5px;
    flex: 1;
}

.btn-directions:hover {
    background-color: #333;
}

.btn-reservenow {
    background-color: #f6b80c;
    color: #000;
    padding: 8px 20px;
    font-size: 12px; 
    flex: 1;
    text-align: center;
    border-radius: 5px;
    border: none;
    display: inline-block; 
    text-decoration: none;
}

.btn-reservenow:hover {
    background-color: #d9a20a;
}


img.direction-image{
 height: 25px;;
 width: 25px;
 padding-top: 12px;
}

.parking-image-gallery {
    display: flex;
    width: 100%;
    gap: 20px;
    margin-top: 20px;
}

.parking-price-image {
    flex: 1;

}




@media (max-width: 768px) {
    .modal-content {
        margin: 20px 0;
    }

    .modal-body {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .modal-info {
        width: auto;
    }

    .modal-map img {
        position: relative;
        width: 100%;
    }

    .modal-buttons {
        flex-direction: column;
    }

    .walking-time {
        gap: 0;
    }

    .walking-time .timetoterminal {
        flex: 3;
        line-height: 1rem;
    }
    .parking-image-gallery {
        flex-direction: column;
        align-items: center;
    }

}

@media (min-width: 768px) and (max-width: 1080px) {
    .walking-time .timetoterminal {
        flex: 3;
    }
}



  /* /////////////////////////////////////////////////// */



/* Airline table styling */
.airlines-list-table {
    width: 100%;
    border:none !important;
  }
  
  /* Remove borders from table cells */
  .airlines-list-table td {
    border: none;
  }
  
  /* Add alternating row colors for better readability */
  .airlines-list-table tr:nth-of-type(odd) {
    background-color: #F2F2F2;
  }
  
  /* Header styling */
  .airlines-list-table th {
    font-weight: bold;
    color:grey;
    background: white;
  }
  
  /* Airline info container (image and name) */
  .airline-info-cell {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  /* Styling for airline logos */
  .airline-logo-img {
    width: 53px;
    height: 40px;
  }
  
  /* Website link styling */
  .website-link {
    color: #114078;
     text-decoration: underline;
  }
  
  /* Phone number styling */
  .phone-number-link {
    color: #114078;
     text-decoration: underline;
  
  }

  
  /* Flight check button styling */
  .check-flight-btn {
    padding: 0.5rem 1rem;
    border: 2px solid #114078;
    background-color: transparent;
    color: #114078;
    border-radius: 5px;
    cursor: pointer;
  }
  
  /* Hover effect for flight check button */
  .check-flight-btn:hover {
    background-color: #114078;
    color: #fff;
  }
  
  .airline-phone-number{
  display:flex;
  flex-direction:column;
  }
  
  .mobile-phone-number{
  display:none;
  }

  
  /* Responsive styling for smaller screens (mobile) */
  @media (max-width: 767px) {
    
    .mobile-phone-number{
      display:block;
    }
    
    .airlines-list-table thead {
      display: none;
    }
    
    /* Stack the rows vertically on small screens */
    .airlines-list-table tr {
      display: flex;
      flex-direction: column;
    }
  
    /* Add some padding and color for each row */
    .airlines-list-table td:nth-of-type(1) {
      border-bottom: 1px solid grey;
      margin-bottom:20px;
    }
    
    .airlines-list-table tr {
     background-color: #F2F2F2;
     margin:10px; 
  }
  
    /* Additional row styling for mobile screens */
    .airlines-list-table tr {
      margin-bottom: 1rem;
      padding: 1rem;
      border-radius: 5px;
   
    }
  
    /* Adjust button width on small screens */
    .check-flight-btn {
      width: 70%;
      margin-top: 0.5rem;
    }
  }
  


/* non stop destination css */
  .destination-container {
    width: 100%;
    max-width: 100%; 
    margin: 20px 0;
    font-family: Arial, sans-serif;
    padding: 10px;
    border-bottom: 1px solid rgb(209, 204, 204);
 
}

.accordion-header {
  background-color: white;
  padding: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: none;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-content {
  display: none;
  padding: 10px;
}

.accordion-header .circle {
  width: 20px; 
  height: 20px;
  background-color: #FFC107; 
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.accordion-header-title{
 font-weight: bold;
}

.icon-plus-minus {
  margin:0px;
  font-size: 15px; 
  text-align: center;
  color: white;
  font-family: Arial, sans-serif;
  font-weight: bold;
}


.airline-details{
  display:flex;
  align-items: center;
  padding: 5px;
  box-shadow:  0px 5px 10px rgb(0, 0, 0, 0.1);
 
  
}
.airline-details:nth-of-type(even) {
  background-color: #F2F2F2;

}

.airline-logo-title{
display:flex;
gap: 10px;
align-items: center;

}

.seasonal-info{
  
  margin-left: auto;

}

.airline-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.airline-name {
   
    font-size: 12px;
    color: #777;
}

.seasonal-text {
    font-size: 12px;
    color: #777;
    margin-right: 10px;
}

/* Book Now button styling */
.book-now-button {
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #0056b3;
    border: 2px solid #0056b3;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s;
}

.book-now-button:hover {
    background-color: #0056b3;
    color: #fff;
}

@media (max-width: 767px) {
  .airline-details{
    display:flex;
    flex-direction:column;
    align-items: flex-start;
    gap: 10px;

  }

  .seasonal-info{
    display:flex;
    flex-direction: column;
    margin-left: 0%;
    width: 100%;
  }
  

}

/* notification bar styles */
.notification-icon-container {
    width: 40px;
    height: 40px;
    min-width: 40px; 
    min-height: 40px;
    background-color: #F29200;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .access-time-icon {
    font-size: 25px;
    color: white;
  }

.notification-bar-separate
{
display: flex;
gap:5px;
justify-content: center;
align-items: center;
margin: 10px 15px;
}

.notification-bar-content{
font-size:12px;
}



/* Maps */
/* General map container */
.map-container {
    position: relative;
}

/* Map legend container styles */
.map-legend {
    width: 250px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    position: absolute;
    bottom: 25%;
    right: 10%;
    font-weight: 400;
    height: 250px;
    padding-left: 20px;
    transition: all 0.25s;
    overflow: hidden;
    color:black;
}

/* Hidden checkbox and legend toggle functionality */
#legendclose {
    display: none;
}

#legendclose:checked ~ .map-legend {
    height: 28px;
    bottom: 50px;
}

.map-legend label {
    font-family: Arial, sans-serif;
    font-weight: 800;
    float: right;
    position: relative;
    z-index: 2;
}

#legendclose:checked ~ .map-legend label {
    font-size: 0;
}

#legendclose:checked ~ .map-legend label:after {
    content: "\2191";
    font-size: 14px;
}

/* Map legend internal text and lists */
.map-legend p {
    line-height: 1.555;
    margin-bottom: 18px;
}

.map-legend legend {
    font-family: Arial, sans-serif;
    font-size: 18px;
    margin-bottom: 18px;
}

.map-legend ul {
    list-style-type: none;
    font-size: 14px;
    padding-left: 0;
}

.map-legend ul li {
    margin-bottom: 14px;
    position: relative;
    font-weight: 600;
}

.map-legend ul li:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: green;
    left: -15px;
    top: 5px;
    position: absolute;
}

.map-legend ul li:nth-child(2):before {
    background: #307FE2;
}

.map-legend ul li:nth-child(3):before {
    background: #FF3D00;
}



/* Route map styles */
.route-map {
    position: relative;
    width: 100%;
    height: 480px;
}

/* Map styles - general typography and layout adjustments */
.mapstyles .airport,
.mapstyles .carriers,
.mapstyles .flightinfo,
.mapstyles .learnmore {
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-weight: 400;
    color: #555555; /* Dark gray */
    text-align: left;
}

.mapstyles .airport strong,
.mapstyles .carriers strong,
.mapstyles .flightinfo strong,
.mapstyles .learnmore strong {
    font-weight: 800;
}

/* Flex-based column layout adjustments */
.mapstyles .carriers {
    width: 50%;
    float: left;
}

.mapstyles .flightinfo {
    width: 50%;
    float: left;
}

.mapstyles .learnmore {
    clear: both;
    display: block;
}

@media (max-width: 860px) {
    .map-legend {
        position: static;
        margin: 50px;
    }
}

/* business-opportunities */
.business-opp-filters {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid #868787;
    padding: 10px;
    margin-bottom: 20px;
  }

  .business-opp-filters select,
  .business-opp-filters input[type="text"] {
    padding: 5px;
    font-size: 13px;
    border: 1px solid #ccc;
    width: 17%;
    color: #818080;
  }

  .department-group {
    margin-bottom: 30px;
  }

  .department-title {
    font-size: 24px;
    font-weight: bolder;
    margin-bottom: 25px;
    font-family: sans-serif;
    color:black;
  }

  .yellow-line {
    width: 30px;
    height: 3px;
    background-color: #ffb400;
    margin-bottom: 30px;
  }

  .department-group .opp-title-button {
    border-bottom: 1px solid #ddd;
  }

  .department-group .opp-title-button.odd {
    background-color: #F2F2F2;
  }

  .department-group .opportunity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 24px;
    flex-wrap: wrap;
  }

  .opportunity-text {
    max-width: 70%;
    word-break: break-word;
    color: black;
  }

  .opportunity-label {
    font-weight: bold;
    margin-right: 5px;
  }

  .business-opp-view-pdf {
    padding: 5px 10px;
    background-color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    color: #004281;
    border: 1px solid #004281;
    border-bottom: 2px solid #004281;
    cursor: pointer;
    font-weight: bold;
  }

  .business-opp-view-pdf:hover {
    background-color: #004281;
    color: white;
  }

  /* Mobile responsive styles */
  @media (max-width: 768px) {
    .business-opp-filters {
      flex-direction: column;
      align-items: stretch;
    }

    .business-opp-filters select,
    .business-opp-filters input[type="text"] {
      width: auto;
    }

    .depart-title-line {
      margin: 0 50px;
    }

    .department-group .opportunity {
      flex-direction: column;
      align-items: flex-start;
      margin: 0 50px;

    }

    .opportunity-text {
      max-width: 100%;
      margin-bottom: 20px;
    }

  }


  #business-clear-filters {
    background: #FBBB01;
    color: black;
    border: none;
    padding: 5px;
    cursor: pointer;
    border: 1px solid black;
}


.business-no-results{
    display: none; 
    text-align: center; 
    margin-top: 20px;
    font-weight: 900;
}
.no-result-found{
    padding: 10px;
}

.try-to-limit{
    margin-bottom: 10px;
}

.no-active-business{
    text-align: center;
    font-weight: 900;
}

/* Global size increases */
input[type="text"] {
    font-size: 13px !important;            
  }
  
  select {
    font-size: 13px !important;           
  }
  
  select option {
    font-size: 13px !important;           
  }


.card-container-column{
    display:flex;
    flex-direction:column;
}

.card-image-container img{
    object-fit: cover;
}

.card-container-text-module{
    flex-grow:1;
}