*, *::before, *::after{
    box-sizing: border-box; /*Standard CSS practice*/
}

body{
    font-family: "Roboto Slab", sans-serif;
}

/* roboto-slab-100 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 100;
    src: url('../assets/RobotoSlab/roboto-slab-v34-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-200 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 200;
    src: url('../assets/RobotoSlab/roboto-slab-v34-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400;
    src: url('../assets/RobotoSlab/roboto-slab-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 500;
    src: url('../assets/RobotoSlab/roboto-slab-v34-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 600;
    src: url('../assets/RobotoSlab/roboto-slab-v34-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 700;
    src: url('../assets/RobotoSlab/roboto-slab-v34-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-800 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 800;
    src: url('../assets/RobotoSlab/roboto-slab-v34-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-slab-900 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 900;
    src: url('../assets/RobotoSlab/roboto-slab-v34-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body{
    background-color: black;
    overflow: hidden;
}

/*Map*/
.mainMap{
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
}

.mapCanvas{
    height:auto;
    width: calc(100vw - 80px);
    transition: width 0.3s;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


/*FLOATING PANELS*/
.specimenPanel {
    position: fixed;
    top: 0;
    left: 100vw; /* Initially hidden */
    width: 555px;
    height: 100%;
    background: #1d6794;
    color: white;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    transition: left 0.3s ease-in-out;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
}

.specimenPanel #specimenSpecies{
    color: black;
}

.specimenPanel table{
    color: black;
    border-collapse: collapse;
    margin: 12px 0;
}

.specimenPanel thead{
    padding: 5px 10px;
    border-radius: 10px 10px 0 0;
    color: white;
    display: block;
    width: fit-content;
    font-weight: 600;
}

.specimenPanel #specimenGenome thead{
    background: #383f6b;
}

.specimenPanel #specimenAttributes thead{
    background: #bb463c;
}

.specimenPanel #specimenEnvironment thead{
    background: #356854;
}

.specimenPanel #specimenGenome tr:nth-of-type(odd) td{
    background: rgb(241 243 255);
}

.specimenPanel #specimenAttributes tr:nth-of-type(odd) td{
    background: rgb(255 243 242);
}

.specimenPanel #specimenEnvironment tr:nth-of-type(odd) td{
    background: #e5fffb;
}


.specimenPanel tr:nth-of-type(even) td{
    background: white;
}

.specimenPanel td{
    padding: 5px;
}

.specimenPanel h1{
    font-weight: 900;
    margin: 0;
}

#specimenPanelCaption{
    text-align: left;
    padding: 0;
    font-weight: 200;
}

.specimenPanel.open {
    left: calc(100vw - 555px - 80px); /* Slide in */
}

.specimenPanelContent {
    padding: 5px;
}

#specimenInformation{
    padding: 20px;
    background: whitesmoke;
    border-radius: 4px;
    flex: 1;
    overflow: auto;
}

.specimenPanel table :is(td, thead){
    border: 1px solid black;
}


.evolutionPanelWrapper {
    position: fixed;
    top: 0;
    right: 80px;
    width: 800px;
    height: 100vh;
    color: white;
    padding: 20px;
    transition: transform 0.3s ease-in-out;
    transform: translate(100%, 0);
    background: white;
}

.evolutionPanelWrapper.open {
    transform: translate(0,0);
}

.weatherPanel {
    position: fixed;
    top: 0;
    left: 100vw; /* Initially hidden */
    width: 475px;
    height: 100%;
    overflow-y: auto;
    background: #c5e4f8;
    color: black;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    transition: left 0.3s ease-in-out;
    margin: 0;
    padding: 30px;
}

.weatherPanel h1{
    font-weight: 900;
}

.weatherPanel.open {
    left: calc(100vw - 475px - 80px); /* Slide in */
}

.alertPanel{
    position: fixed;
    top: 0;
    left: 100vw; /* Initially hidden */
    width: 475px;
    height: 100%;
    overflow-y: auto;
    background: #c5e4f8;
    color: black;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.3);
    transition: left 0.3s ease-in-out;
    margin: 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.alertPanel h1{
    text-align: left;
    font-weight: 900;
}

.alertPanel.open {
    left: calc(100vw - 475px - 80px); /* Slide in */
}
/*NAVIGATION BAR*/
.sidenav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 80px; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: calc(100vw - 80px);
    background-color: #111; /* Black */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 20px;
}

.sidenav div {
    padding: 6px 8px 6px 6px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    user-select: none;
    cursor: pointer;
    text-align: center;
}
.sidenav div:hover {
    color: #f1f1f1;
}

#alerts{
    flex: 1;
    overflow: auto;
}

/* Library for the tree library */
.Treant { position: relative; overflow: hidden; padding: 0 !important; }
.Treant > .node,
.Treant > .pseudo { position: absolute; display: block; visibility: hidden; }
.Treant.loaded .node,
.Treant.loaded .pseudo { visibility: visible; }
.Treant > .pseudo { width: 0; height: 0; border: none; padding: 0; }
.Treant .collapse-switch { width: 3px; height: 3px; display: block; border: 1px solid black; position: absolute; top: 1px; right: 1px; cursor: pointer; }
.Treant .collapsed .collapse-switch { background-color: #868DEE; }
.Treant > .node img {	border: none; float: left; }

#phylogenyWrapper{
    font-family: "Roboto Slab", sans-serif;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: black;
}

#phylogenyWrapper h1{
    text-align: left;
    font-weight: 900;
}

#phylogeny{
    font-weight: 400;
    color: black;
    flex: 1;
    width: 100%;
    overflow: auto;
    background: whitesmoke;
}

#phylogeny img{
    width: 40px;
    height: 40px;
    grid-area: image;
}

#phylogeny .marker{
    border-radius: 100%;
    background: red;
    width: 5px;
    height: 5px;
}

#phylogeny .node:not(.marker){
    display: grid;
    grid-template-areas:
        "image name"
        "image desc";
    column-gap: 5px;
    padding: 10px;
    background: white;
    border-radius: 10px;
}

#phylogeny .node-name{
    margin: 0;
    grid-area: name;
    font-weight: 600;
    line-height: 1;
}

#phylogeny .node.marker .node-name{
    position: relative;
    transform: translate(12px, -7px);
    color: red;
    font-weight: 900;
}

#phylogeny .node-title{
    margin: 0;
    grid-area: desc;
    font-size: 12px;
}

/*Side navigation*/
.sidenav > *::before{
    content: attr(data-name);
    position: fixed;
    width: fit-content;
    right: 60px;
    background: white;
    color: black;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 8px;
    font-family: "Roboto Slab", sans-serif;
    font-weight: 600;
    display: none;
    animation: 0.2s ease-in-out out forwards;
}

.sidenav > *:hover::before{
    display: block;
    animation: 0.2s ease-in-out in forwards;
}

@keyframes in{
    from {
        opacity: 0;
        transform: translateY(5px);
        display: block;
    }
    to{
        opacity: 1;
        transform: translateY(0);
        display: block;
    }
}

@keyframes out{
    from{
        opacity: 1;
        transform: translateY(0);
        display: block;
    }
    to{
        opacity: 0;
        transform: translateY(5px);
        display: none;
    }
}

@media (max-width: 880px){
    .evolutionPanelWrapper{
        width: calc(100vw - 80px);
    }
}


/*Weather button*/
#weatherButtons{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 10px;
}
.weatherButton{
    background: whitesmoke;
    padding: 20px;
    color: black;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.weatherButton:hover{
    background: #eeeeee;
}

.weatherButton.selected{
    background: lightgoldenrodyellow;
}

.weatherButton .right{
    display: flex;
    flex-direction: column;
}

.weatherButton .name{
    font-weight: 800;
    text-transform: uppercase;
}

.weatherButton .description{
    font-weight: 400;
}

.weatherButton .icon img{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 56px;
    font-size: 14px;
    text-decoration: none;
}

.weatherButton .icon i{
    font-size: 30px;
    color: #1ba3ec;
}

/*Alerts*/
.alert{
    background: whitesmoke;
    padding: 20px;
    color: black;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    column-gap: 20px;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
}

.alert:hover{
    background: lightgoldenrodyellow;
}

.alert .right{
    display: flex;
    flex-direction: column;
    flex: 1;
}

.alert .name{
    font-weight: 800;
    text-transform: uppercase;
}

.alert .description{
    font-weight: 400;
}

.alert .icon img{
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 56px;
    font-size: 14px;
    text-decoration: none;
}

.alert .icon i{
    font-size: 30px;
    color: #1ba3ec;
}

#alerts{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.time{
    color: gray;
}

/*Unsommon weather event class*/
.weatherEvent{
    width: 35px;
    height: 35px;
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 15px;
    text-align: center;
    color: white;
    background: rgb(36, 35, 35);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: "Roboto Slab", sans-serif;
}

.weatherEvent::before{
    content: attr(data-name);
    position: fixed;
    width: fit-content;
    left: 60px;
    background: white;
    color: black;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 8px;
    font-family: "Roboto Slab", sans-serif;
    font-weight: 600;
    display: none;
    animation: 0.2s ease-in-out out forwards;
}

.weatherEvent:hover::before{
    display: block;
    animation: 0.2s ease-in-out in forwards;
}

#alerts:empty::before{
    content: "When you get alerts, they will show up here."
}

svg:has(#MutationW){
    position: fixed;
    top: 0;
    left: 0;
}

svg #close {
    cursor: pointer;
}

#mutationToggleWrapper, #weatherToggleWrapper{
    user-select: none;
}

#weatherToggleWrapper{
    margin-bottom: 20px;
}

#alertPanel.hideAlerts .mutationAlert{
    display: none;
}

#alertPanel.hideWeather .weatherAlert{
    display: none;
}

#info_wrapper{
    position: fixed;
    top: 0;
    left:0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background: rgba(0, 0, 0, 0.8);
    display: none;
}

#info{
    margin: 200px calc(50vw - 400px);
    background: white;
    padding: 30px;
    border-radius: 4px;
}

#info h1{
    font-weight: 900;
    font-size: 50px;
    margin: 0;
    color: #383f6b;
}

#info p{
    margin: 0;
    font-weight: 400;
    font-style: italic;
    font-size: 24px;
    color: #5e627a;
}

#info div{
    margin: 20px 0;
    font-size: 24px;
}

#info button{
    background: #383f6b;
    color: white;
    padding: 10px 20px;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 900;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s opacity;
    border: none;
}

#info button:hover{
    opacity: 0.8;
}

a{
    color: #1F78D1;
    text-decoration: none;
}

a::after{
    content: "  \f35d";
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
}


/*Auto weather switch*/
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
  
/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

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

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

#auto{
    font-size:26px;
}

#specimenSpeciesWrapper{
    display: flex;
    flex-direction: row;
    column-gap: 10px;
}

#specimenColor{
    display: block;
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 100%;
    border: 2px solid black;
}

.extinct{
    opacity: 0.5;
}

.warning{
    color: red;
}

#imageModal{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

#imageModal .modal-content{
    background: white;
    margin: auto;
    width: 515px;
    padding: 20px;
}

.node:not(.marker){
    min-width: 150px;
}