body {
    background-color: black;
}
#map {
    height: 100vh;
     }

     #preloader {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         z-index: 9999;
         overflow: hidden;
         background: #fff;
        }
    #preloader:before {
        content: "";
        position: fixed;
        top: calc(50% - 30px);
        left: calc(50% - 30px);
        border: 6px solid #f2f2f2;
        border-top: 6px solid #56829e ;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        -webkit-animation: animate-preloader 1s linear infinite;
        animation: animate-preloader 1s linear infinite;
    }
    @-webkit-keyframes animate-preloader {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes animate-preloader {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    .overlay {
        position: absolute;
        opacity: 0.95;
        z-index: 1000;
        max-width:100%;
        max-height: 100%;
        overflow-y:scroll;
    }

    .overlay p{
        opacity: 1;
        color: white;
    }

    hr {
        background-color: white;
    }
    img{
        opacity: 100%;
    }
    #countryNameSpot h2{
        opacity: 1;
        color: white;
    }
    .viewportContainer{
        display: flex;
        position: absolute;
        justify-content: center;
        height: 100%;
        width: 100%;
    }
    #selectBar{
        margin-top: 2vh;
        position: fixed;
        width: 20vw;
        height: 4vh;
        text-align: center;
        border-radius: 2em;
        border: 2px black solid;
    }

    .closeButton{
        position: absolute;
        height: 2em;
        right: 0.1em;
        top: 0%;
        width: 3em;
        text-align: center;
        z-index: 1001;
        background-color: red;
    }

    #neighbouringCountriesSpot{
        overflow:auto;
    }
    #infoTable{
        height: 85%;
        background-color: rgb(39, 39, 39);
        border-radius: 10%;
        border: 1px solid black;
        overflow-y: auto;
    }

    #compareSelectBar{
        width: 10vw;
    }

    .btnLink {
        border: none;
        background-color: inherit;
        color: green;
        padding: 14px 28px;
        font-size: 16px;
        cursor: pointer;
        text-decoration: underline;
    }
    .container {
        max-height: 80vh;
        border-radius: 5% !important;
        overflow-y: scroll;
    }

    ::-webkit-scrollbar{
        width: 0;
        background: transparent;
    }
    .td{
        word-break:break-all;
    }
    a{
        color: white;
    }

    .weatherMapMarker{
        background-color: #879125;
        text-align: center;
        width: 50px;
        height: 54px;
        border: #ed8d59 3px solid;
        border-radius: 100%;

    }

    .earthquakeMapMarker{
        background-color: #802121;
        text-align: center;
        width: 50px;
        height: 54px;
        border: #ed8d59 3px solid;
        border-radius: 100%;

    }

    .weatherPopupSunny .leaflet-popup-content-wrapper{
        background-color: #73b5cb;
    }
    .weatherPopupKindaCloudy .leaflet-popup-content-wrapper{
        background-color: #a2cedd;
    }
    .weatherPopupCloudy .leaflet-popup-content-wrapper{
        background-color: #b1c1d7;
    }
    .weatherPopupRainy .leaflet-popup-content-wrapper{
        background-color: #828d91;
    }

    .earthquakePopup .leaflet-popup-content-wrapper {
        background-color: #f1d0d0;
    }
    
    @media screen and (max-width: 900px)  and (orientation: portrait) {
        #infoTable{
            width: 80vw;
        }
      }
      @media screen and (max-height: 900px) {
        #infoTable{
            width: 80vw;
        }
      }

    @media screen and (max-width: 750px){
        #selectBar{
            width: 25vw;
            height: 5vh;
        }
        .container{
            max-width: 100vw;
            overflow-x: unset;
        }
    }
    @media screen and (max-width: 370px){
        .container{
            max-width: 95vw;
            left:26px;
        }
        .overlay{
            width: 100%;
        }
    }
    @media screen and (max-width: 1200px){
        .closeButton{
            position: absolute;
            width:fit-content;
        }
    }
    @media screen and (max-width: 439px){
        .closeButton{
            position: relative;
            top: 6vh;
            width:fit-content;
            left: 66vw;

        }

    }
    @media screen and (max-width: 370px){
        .closeButton {
            position: relative;
            top: 6vh;
            width: fit-content;
            left: 78vw;
        }
    }