*[data-dash-is-loading="true"]{
    visibility: hidden;
}
*[data-dash-is-loading="true"]::before{
    content: "";
    display: inline-block;
    color: magenta;
    visibility: visible;
    height: 10rem
}

/* Tabs */
#tabs {
    margin: 0;
}

#tabs-content {
    padding: 1rem;
}

#tabs-parent {
    padding: 0 1rem;
    background-color: #003262 !important;
}

#store-container { 
    padding: 0;
}

#loading-container {
    top: 0;
}

.custom-tabs-container {
    width: 85%;
}

.custom-tabs {
    background-color: #f9f9f9;
    padding: 0 24px;
    border-bottom: 1px solid #d6d6d6;
}

.custom-tab {
    border-color: rgb(238, 236, 236);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: 3px solid transparent !important;
    border-left: 1px solid lightgrey !important;
    border-right: 1px solid lightgrey !important;
    border-bottom: 1px solid #d6d6d6;
    background-color: #f6f8f8;
    padding: 12px !important;
    font-family: "system-ui";
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.custom-tab:has(.active) {
    color:#586069;
    background-color: white;
    box-shadow: 1px 1px 0 white;
    border-left: 1px solid lightgrey !important;
    border-right: 1px solid lightgrey !important;
    border-top: 6px solid #abd2ff !important;
    border-bottom: 1px solid transparent;
}

.nav-pills {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .nav-pills {
        flex-direction: column;
    }
}

.nav-pills .nav-link {
    padding: 0;
    color: #586069;
    font-family: "system-ui";
    background-color: transparent;
}

.nav-pills .nav-link.disabled {
    color: #c8c6c6;
}

.nav-pills .nav-link.active {
    color: black;
    background-color: white;
}

/* Tab One */
#tab-one-container {
    height: 100%;
    padding-top: 0;
}

#tab-one-form-container {
    justify-content: space-between;
}

#store-container {
    height: 100%;
}

#tab-one-map {
    margin-top: 28px;
    /*height: 100vh;*/
    width: 100%;
}

#map-credits {
    padding-top: 10px;
}


/* Tab Two */
#tab-two-container {
    justify-content: space-between;
    width: 100%;
}

p {
    margin-bottom: 0;
}

#world-map {
    height: 65%;
    width: 100%;
}

.violin-container {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: stretch;
}

.loading-violin-container {
    width: 100%;
    height: 100%;
}

#temp-profile-graph, #humidity-profile-graph, #solar-radiation-graph, #wind-speed-graph {
    height: 50%;
    /*width: 100%;*/
}

/* Tab Temperature RH*/
.dropdown-t-rh {
    width: 15rem;
}

/* Tab Four */
#tab-four-container {
    width: 100%;
    justify-content: center;
    align-items: center;
}

/*#tab-four-custom-sun-container {*/
/*    justify-content: space-evenly;*/
/*    align-items: stretch;*/
/*    align-content: center;*/
/*}*/

/* Tab Five */
#tab-five-container {
    justify-content: center;
    align-items: stretch;
}

#tab5-daily-container {
    margin-top: 60px;
}

#slider-container {
    width: 50%;
    margin: 24px;
}

.seasonal-graph {
    width: 100%;
    height: 100%;
}

.daily-wind-graph {
    width: 80%;
    height: 80%;
}

#daily-wind-rose-container {
    display: flex;
    flex-direction: row;
    max-width: 100%;
}

#daily-wind-rose-outer-container {
    align-items: stretch;
}

#slider-container * {
    justify-content: center;
}

.each-slider {
    padding: 32px 0 0 0;
    width: 60%;
}

#hour-slider, #month-slider {
    width: 60%;
}

#wind-speed, #wind-direction {
    width: 100%;
}

#custom-windrose-container {
    margin-top: 80px;
}

#tab5-custom-dropdown-container {
    margin-top: 30px;
}

/* Tab Six */

#first-var-dropdown {
    width: 15%;
}

.month-hour-slider {
    width: 25%;
}

.var-dropdown {
    width: 35%;
}

#min-val, #max-val {
    width: 15%;
}

.row-center {
    align-items: center;
    justify-content: center;
}

.text-next-to-input {
    margin-bottom: 0;
    margin-right: 1rem;
    text-align: right;
}

#sec1-var-dropdown {
    width: 25%;
}

.three-inputs-container {
    justify-content: space-evenly;
}

.one-of-three-container {
    width: 30%;
    align-self: flex-start;
    align-items: stretch;
}

#tab6-sec2-container {
    align-items: stretch;
}

.survey-alert {
    color: white;
    background-color: #0c2772;
    opacity: 0.98;
    font-family: "system-ui";
    font-size: 15px;
    border-radius: 0.25rem;
    border: 0.5px solid lightgrey;
    z-index: 1000;
}