:root {
    --background_light: rgb(50,51,46);
    --background_dark: rgb(40,41,35);
}

.body_custom {
    /*width: 100%;*/
    position: relative;
    /*text-align: center;*/
    margin-right: auto;
    margin-left: auto;
    background: var(--background_dark);
    color: white;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.center_text {
    color: white;
    font-size: 13px; 
    bottom: 0px;
    text-align: center;
}

.band_column {
    width: 22.5vw;
    padding: 10px;
    float: left;
}

.venue_column {
    width: 24vw;
    padding: 10px;
    float: left;
}

.year_column {
    width: 22.5vw; /* 8vw */
    padding: 10px;
    float: left;
}

.stats_column {
    width: 22.5vw; /* 20vw */
    padding: 10px;
    float: left;
    overflow: auto;
}

.table_col {
    /*height: 85vh;*/
    overflow: auto;
}

.table_col thead th, .upcoming_band_list_table thead th, .venue_table_col thead th, .city_table_col thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

table {
    border-collapse: separate!important;
    border-spacing: 0!important; /* Adjust as needed */
}

th {
    border-left: 2px solid rgb(204,206,209)!important;
}

table, th, td {
    border: none;
}

tr:nth-child(even) td {
    border-left: 2px dotted var(--background_dark);
}

tr:nth-child(odd) td {
    border-left: 2px dotted var(--background_light);
}


td:first-child {
    border-left: 0px!important;
}


th:first-child {
    border-left: 0px!important;
}


/*
th:first-child, td:first-child {
    border-left: none;
}
*/

.stats_list_table {
    font-size: small;
    width: 100%;
}

.upcoming_band_list_table {
    /*max-height: 34.35vh;*/
    overflow: auto;
}

.venue_table_col, .city_table_col {
    /*max-height: 48.50vh;*/
    /*min-height: 48.50vh;*/
    overflow: auto;
}

.mega_left {
    float: left;
    width: 28vw;
    margin-top: 4em;
}

.mega_right {
    display: inline-table;
    float: right;
    width: 71vw;
    /*height: 100%;*/
    margin-top: 4em;
}

.legend {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    width: 7vw;
    height: 2vw;
    border-radius: 5px;
    font-size: 0.8vw!important;
    text-align: center;
    margin-left: 0.5vw;
}

.filter-count {
    margin-right: 0.5vw;
    width: 6vw;
}

.main-buttons {
    font-size: 0.8vw!important;
    white-space: nowrap;
    border-style: solid;

}

tr:nth-child(even) {
    background-color: var(--background_light);
}

tr:nth-child(odd) {
    background-color: var(--background_dark);
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(214,216,219, 0.67); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    background: rgba(214,216,219, 0.67);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(214,216,219, 1);
}

.tooltip-container {
    opacity: 1;
    position: relative;
    transition: opacity 0.3s ease;
}

.tooltip-container-hidden {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tooltip-container-visible {
/*    opacity: 1;*/
/*    transition: opacity 0.2s ease;*/
}

.container {
    /*max-height: 85.4vh;*/
    align-content: center;
    overflow: auto;
    overflow-x: visible;
    overflow-y: visible;
    margin-top: 0.6em;
    margin-bottom: 2.5em;
}

.tooltip-container:hover .tooltip-content-archive {
    visibility: visible;
    opacity: 1;
    transition: .5s all ease;
    transition-delay: 0.5s;
}

.tooltip-content-archive {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background: transparent;
    left: -2%;
    top: 0px;
    padding: 0 15px;
    font-size: 15px;  
    width: 160px;
    margin-top: 2px;
    min-height: 50px;
    transition: .5s all ease;
    transition-delay: 0s;
    z-index: 2;
    color: #000000;
}

.courier_font {
    font-family: 'Courier New', monospace;
}

@media (max-width:960px) { 
    .venue_column, .band_column, .year_column, .stats_column {
        width: 100vw;
        padding-left: 15vw;
        padding-right: 15vw;
    }

    .mega_right {
        width: 100vw;
        padding-bottom: 10vh;
    }

    .mega_left {
        width: 100vw;
        padding-left: 5vw;
        padding-right: 5vw;
        max-height: unset;
        height: unset;
    }

    .venue_table_col, .city_table_col, .upcoming_band_list_table, .table_col {
        max-height: unset;
        height: unset;
    }

    .container {
        max-height: unset;
    }

    .band_col {
        max-width: 50%!important;
    }
}

.modal-dialog {
    width: 64vw!important;
    max-width: unset!important;
}

.modal-lg, .modal-xl {
    max-width: unset!important;
}

#success_modal_content {
    align-content: center!important;
    width: 40%;
    margin: 0 auto;
}

#id_setlist_url {
    text-decoration: unset;
    color: unset;
}

#id_setlist_url:hover {
    color: lightblue;
}


.setlist-container {
    position: relative;
}


.setlist-container:hover .setlist-content-archive {
    visibility: visible;
    opacity: 1;
    transition: .5s all ease;
    transition-delay: 0.5s;
    width: 1%!important;
    pointer-events: none;
}

.setlist-content-archive {
    visibility: hidden;
    width: 1%!important;
    opacity: 0;
    display: block;
    position: absolute;
    background: transparent;
    /*left: -2%;*/
    /*top: 0px;*/
    padding: 0 15px;
    font-size: 15px; 
    /*margin-top: 2px;*/
    /*min-height: 50px;*/
    transition: .5s all ease;
    transition-delay: 0s;
    z-index: 200;
    color: #000000;
}

/* styles.css */
.autocomplete-container {
    position: relative;
}

.country-suggestions {
    position: absolute;
    top: 100%; /* Position below the input field */
    left: 0;
    width: 100%;
    border: 1px solid #ccc;
    max-height: 150px; /* Set a maximum height */
    overflow-y: auto; /* Enable vertical scrollbar if content exceeds max height */
    display: none; /* Initially hidden */
    background-color: var(--background_light);
    z-index: 1000; /* Ensure it appears above other elements */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
    border-radius: 4px; /* Rounded corners for a smooth look */
    padding: 5px; /* Slight padding for space */
    font-size: 10px; 
}

.country-container-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #eee; /* Light border between items */
}

.country-container-item:last-child {
    border-bottom: none; /* Remove border for the last item */
}

.country-container-item:nth-child(even) {
    background-color: var(--background_light);
}

.country-container-item:nth-child(odd) {
    background-color: var(--background_dark);
}

.country-container-item:hover {
    background-color: #aaa;
}

.navbar {
    max-height: 10vh!important;
}

/* Ensure the navbar-brand has flex alignment */
.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-image-container {
    width: 30px;
    height: 30px;
    display: flex; /* Center the image within the container */
    justify-content: center;
    align-items: center;
    margin-left: 1em; /* Adjust as needed */
    background-color: #f0f0f0; /* Optional placeholder color */
}

.navbar-image-container img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Container for the content and the border */
.concert-header-container {
    position: relative;
    text-align: center;
}

/* Creating the gradient border with a pseudo-element */
.concert-header-container::after {
    content: "";
    position: absolute;
    top: 50%; /* Position at the middle */
    left: 0;
    width: 100%;
    height: 1px; /* Adjust thickness as needed */
}

.concert-header-container-default::after {
    background: linear-gradient(to right, rgba(214, 216, 219, 0), rgba(214, 216, 219, 1), rgba(214, 216, 219, 0));
}

.concert-header-container-white::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.concert-header-container-red::after {
    background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
}

#id_filter_string {
    font-size: x-small;
}


.filter-string {
    max-height: 6vh;
    overflow-y: auto;
    white-space: normal;
    box-sizing: border-box;
}
.main-buttons-div {
    display: inline-block; /* Ensure buttons are in a row */
}