label {
    font-weight: bold;
}
h3 {
    margin-bottom: 2rem !important;
}

.table-responsive {
    display: none; /* Hide all tables by default */
}

.row {
    margin-bottom: 1rem;
    margin-left: 1rem !important;
}

.toggle_container{
    margin-top: -1px;
    border: 1px solid black;
    display: none;
    flex-direction: column;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: rgb(244, 244, 244);
}
#materialProperties {
    display: flex;
    flex-direction: column;
}
.tooltip {
    position: fixed; /* Position the tooltip relative to the viewport */
    display: none;
    background-color: white;
    border: solid 2px black;
    border-radius: 5px;
    padding: 5px;
}
.info-icon {
    cursor: pointer;
    color: #acacb0;
}

#about-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Subtract navbar heights from viewport */
    height: calc(100vh - 150px);
    min-height: 500px;
    overflow: hidden;
}

#about-page .container-fluid {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#about-page .about-content {
    flex: 1;
    overflow: hidden;
    margin: 0;
}

#about-page .about-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

#about-page .footer {
    flex-shrink: 0;
    padding: 1rem 0;
    text-align: center;
}

#main-content {
    margin-top: 25px !important;
}
#master-column { /* Container holding the heatmap, legend, information container. */
    display: none;
    align-items: flex-start;
    gap: 5px;
    margin-top: -20px;
    margin-bottom: 50px;
}
#heatmap-container {
    margin-left: 15px;
    padding: 10px;
}

/* For future for the divider to adjust the size of compartments */
.split__left {
    width: 50%;
}

.split__right {
    flex: 1;
}

.split__bar {
    background-color: black;
    width: 15px;
    height: 100%;
    cursor: col-resize;
}

.info-containers { /* Vertical container holding the information fields. */
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: 52rem;
    margin-top: 15px;
    margin-right: 15px;
}

.nav-item {
    margin-right: 2rem;
}

#import-inputs,
#export-inputs {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}

/*#model-run-container {*/
/*    display: flex;*/
/*    width: 100%;*/
/*    border: 1px solid black;*/
/*    margin-left: 10px;*/
/*    padding: 10px;*/
/*}*/

/*#model-run-input {*/
/*    display: flex;*/
/*    width: 100%;*/
/*    text-align: left;*/
/*    font-size: medium;*/
/*    word-wrap: break-word;*/
/*    white-space: pre-wrap;*/
/*    margin: 10px;*/
/*}*/

.text-center {
    text-align: left;
    font-weight: bold;
    font-size: larger;
}
.param-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    /*margin-top: -15px;*/
    padding: 5px;
}
.param-container-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    /*margin-top: 5px;*/
    /*margin-bottom: 5px;*/
    padding: 5px;
}
.param-value {
    font-size: large;
    text-align: center;
    padding: 10px;
    flex: 1; /* Let each of these elements take up equal space */
    margin-right: 20px;
}
.param-value-left{
    font-size: large;
    text-align: left;
    padding-bottom: 10px;
    /*padding-top: 10px;*/
    margin-right: 30px;
    flex: 1; /* Let this element take up the same amount of space as others */
}

.small-param-value {
    font-size: medium;
    text-align: center;
    margin-left: -15px;
    flex: 1; /* Let each of these elements take up equal space */
    margin-right: 20px;
}
.small-param-value-left{
    font-size: medium;
    text-align: left;
    margin-left: 10px;
    margin-right: 30px;
    flex: 1; /* Let this element take up the same amount of space as others */
}

.detailed-views {
    display: none;
    width: 100%;
    height: 100%;
    /*border: 1px solid black;*/
    /*margin-left: 10px;*/
    box-sizing: border-box;
}

.global-view {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.detailed-info-column {
    display: flex;
    width: 100%;
    flex-direction: column;
}
.selection-title {
    background-color: #FFF2CC;
    border:  2px solid #E98B4B;
    font-weight: bold;
    margin-top: -12px;
    margin-left: -1px;
    margin-right: -1px;
    padding: 7px 7px 7px 17px;
}

.detail-container {
    display: flex;
    height: 100%;
    width: 100%;
    /*border-top: 1px solid black; !* Vertical separator lines between info sections *!*/
    /*border-bottom: 1px solid black; !* Vertical separator lines between info sections *!*/
    box-sizing: border-box;
    /*padding-left: 10px;*/
}
.inner-detail-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.inner-detail-container-general {
    display: flex;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding-left: 10px;
    padding-bottom: 10px;
    flex-direction: column;
}
.detailed-title {
    margin-left: 10px;
    margin-top: 10px;
    pointer-events: none;
    text-align: left;
    font-weight: bold;
    font-size: larger;
}
.text-field-input {
    padding-top: 10px;
}
.bold {
    font-weight: bold;
}

/* Loading animation */
.spinner { /* Style for the loading animation */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* Put it in the topmost layer */
}
.loader { /* Style for the loading circle */
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #acacb0;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}
@keyframes spin { /* Spinning animation */
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.blur { /* Blur effect for the background when loading */
    filter: blur(5px);
    pointer-events: none; /* Disable interactions while blurred */
}

.fixed-table {
    table-layout: fixed;
    width: 100%;
}

/* New heatmap */
.horiz-area { /* rows where compartments are placed */
    display: flex;
    width: 1000px;
    margin-bottom: 10px;
    gap: 10px;
}

.horiz-area-comp { /* rows where compartments are placed */
    display: flex;
    width: 1000px;
    margin-bottom: 42px;
    gap: 35px;
}

.white-background { /* background for the heatmaps so cell colors stand out */
    background-color: white;
    align-items: center;
    display: inline-block;
    margin-bottom: 8px;
    gap: 2px;
    padding-bottom: 1px;
    padding-top: 1px;
}

.compartment {
    border: solid 1px #000;
    border-radius: 3px;
    height: 125px;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: small;
    font-weight: normal;
    font-family: "Times New Roman";
}

.flow-comp {
    display: flex;
    border: solid 1px #000;
    border-radius: 10px;
    height: 120px;
    width: 70%;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: small;
    font-weight: normal;
    font-family: "Times New Roman";
    padding: 5px;
}

.compartment-title {
    /*font-size: small;*/
    font-size: 13px;
    font-weight: bold;
}

.compartment-field {
    font-size: small;
    font-weight: normal;
}

.compartment-percent-big {
    margin-top: 19px;
    font-size: 30px;
    font-weight: bold;
}

.blurry { /* Blur effect for the background when loading */
    filter: blur(2px);
    opacity: 0.4 !important;
}

.nothing { /* containers under the stretched legend container */
    width: 0px;
    height: 0px;
}
.empty { /* containers between the sediment containers */
    border: solid 1px transparent;
    border-radius:3px;
    color: transparent;
    position: relative;
    margin-left: -10px;
}

.air {
    width: 100%;
    margin-top: 20px;
    background-color: #D8F1F1;
}
.air-color {
    width: 100%;
    margin-top: 20px;
    background-color: #D8F1F1;
}
.impacted {
    background-color: #DCD4C9;
}
.beach {
    background-color: #F3EF92;
}
.background {
    /*background-color: #DEEBE1;*/ /* color from first compartmentalised heatmap reference image */
    /*background-color: #CAEBCA;*/ /* color from the updated compartments reference image */
    background-color: #BDDBBD;  /* darker version of the new updated compartments reference image */
}
.freshwater {
    background-color: #BDD4E3;
}
.coastal {
    background-color: #9DD9DF;
}
.ocean {
    background-color: #989EEC;
}
.sediment {
    background-color: #D8C4A5;
}

.new-legend-container {
    grid-column: span 2;
    border: solid 2px white;
    border-radius: 3px;
    width: 353px;
    height: 240px;
    text-align: left;
    align-items: start;
    z-index: 10;
    margin-left: -15px;
}

.new-legend-container-flow {
    grid-column: span 2;
    border: solid 2px white;
    border-radius: 3px;
    width: 400px;
    height: 240px;
    text-align: left;
    align-items: start;
    z-index: 10;
    margin-left: -15px;
}

#compartment-ocean-sediment { /* special case for ocean sediment position */
    position: relative;
    top: -115px;
    left: 0px;
    margin-left: 50px;
}

#Sediment_Ocean { /* special case for ocean sediment position */
    position: relative;
    top: -115px;
    left: 0px;
    margin-left: 50px;
}

/* - - - Stuff for the graph - - - */
/*@keyframes move-dash {*/
/*    from {*/
/*        stroke-dashoffset: 10;*/
/*    }*/
/*    to {*/
/*        stroke-dashoffset: 0;*/
/*    }*/
/*}*/

/* tired but wasn't as good but might try again later */
/*.link {*/
/*    stroke-dasharray: 5, 5; !* Dash pattern *!*/
/*    animation: move-dash 2s linear infinite; !* Animation for motion *!*/
/*}*/

.nodeTitle {
    font: 8px sans-serif;
    font-weight: bold;
}
.nodeText {
    font: 8px sans-serif;
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    transform: translateX(14px);
}