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

    /* Track */
    ::-webkit-scrollbar-track {
        background: transparent;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: rgb(153, 65, 42);
        border-radius: 2px;
    }

    * {
        margin: 0;
        box-sizing: border-box;
        font-family: "Rubik", sans-serif;
    }
    body {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: space-between;
        color: #e0e0e0;
        padding: 20px;
        background-color: #313131;
        position: relative;
    }
    .controlbox {
        height: 100%;
        width:500px;
        margin: 0;
        top:0;
        left:0;
        position: absolute;
        padding:50px;
        z-index: 9999;
    }
    .controls {
        width: 100%;
        height: 100%;
        background-color: #0f0f0fe3;
        border: 0px solid rgba(0, 0, 0, 0.2);
        border-radius: 15px;
        backdrop-filter: blur(30px);
        display:flex;
        flex-direction:column;
        justify-content:space-between;
    }
    .top{
        width: 100%;
        padding:20px;
        padding-bottom:0;
    }
    .bottom{
        width: 100%;
        padding:20px;
    }
    .formsearch button{
        width: 100%;
        padding:15px;
        background-color:rgb(153, 65, 42);
        color:#e0e0e0;
        font-size:20px;
        font-weight:400;
        border-radius:5px;
        border:0;
        cursor:pointer;
        user-select: none;
        transition: 0.1s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .formsearch button img{
        margin-right: 10px;
        width: 20px;
        user-select: none;
        pointer-events: none;
    }
    .formsearch button:active
    {
        transform: scale(0.95);
        opacity: 0.8;
    }
    .mapbox {
        height: 100%;
        width: 100%;
        position: relative;
    }
    #map {
        height: 100%;
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
    }

    /* Style for glowing effect */
    .leaflet-glow-circle {
        filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.7));
    }

    .header
    {
        width: 100%;
        box-sizing: border-box;
        padding-bottom:20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .header h2
    {
        font-size:20px;
        font-weight:500;
        color:#99412a;
        display: flex;
        align-items: center;
    }
    .header h2 img
    {
        width: 21px;
        margin-right:5px;
        /*transform: rotate(90deg);*/
        user-select: none;
        pointer-events: none;
    }
    .headerrightbutton
    {
        display: none;
    }
    .headerrightbutton button
    {
        border-radius: 5px;
        border: 0px solid #99412a;
        background-color: #313131;
        padding: 5px;
        padding-left: 8px;
        padding-right: 8px;
        color: #e0e0e0;
        font-size: 15px;
        font-weight: 400;
        /* width: 100%; */
        outline: transparent;
    }
    .headerrightbutton button span
    {
        font-family: 'Inter';
    }
    .form
    {
        width: 100%;
        margin-bottom: 30px;
    }
    .form2
    {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap:10px;
    }
    .form2 label
    {
        color: grey;
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 5px;
        text-transform: uppercase;
        margin-top:20px;
    }
    .form2 input
    {
        border-radius: 5px;
        border: 0px solid #99412a;
        background-color: #313131;
        padding: 10px;
        color: #e0e0e0;
        font-size: 17px;
        font-weight:400;
        width:100%;
        outline: transparent;
    }
    .form1
    {
        width: 100%;
    }
    .form1 label
    {
        color: grey;
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 5px;
        text-transform: uppercase;
        margin-top:20px;
    }
    .form1 input, .form1 select
    {
        border-radius: 5px;
        border: 0px solid #99412a;
        background-color: #313131;
        padding: 10px;
        color: #e0e0e0;
        font-size: 17px;
        font-weight:400;
        width:100%;
        outline: transparent;
    }
    .form1 button
    {
        position: absolute;
        background-color: #313131;
        border: 0;
        margin-left: -38px;
        margin-top: 10px;
        width: 33px;
        padding: 0;
        cursor: pointer;
    }
    .form1 button img
    {
        width: 20px;
        user-select: none;
        pointer-events: none;
    }
    .form1 button:active
    {
        transform: scale(0.95);
        opacity: 0.8;
    }
    .legend {
        position: absolute;
        top: 165px;
        right: 10px;
        /* background: #ffffffc7; */
        padding: 7px;
        border-radius: 5px;
        font-size: 17px;
        font-weight: 400;
        color: #000000;
        z-index: 999;
        backdrop-filter: blur(10px);
        /* outline: 1px solid rgba(0, 0, 0, 0.1); */
        user-select: none;
    }
    .legend h4 {
        margin: 0 0 10px;
        font-size: 16px;
        font-weight: bold;
        color: #000;
    }
    .legend div {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }
    .legend div:last-child{
        margin-bottom: 0;
    }
    .legend span {
        display: flex;
        width: 20px;
        height: 20px;
        border-radius: 3px;
        align-items: center;
        justify-content: center;
    }
    .loadingbox
    {
        width: 100%;
        height: 100%;
        background-color: #00000040;
        position: absolute;
        z-index: 999;
        display: none;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(14px) grayscale(1);
    }

    .loader {
        width: 50px;
        aspect-ratio: 1;
        border-radius: 50%;
        border: 8px solid #99412a;
        animation:
            l20-1 0.8s infinite linear alternate,
            l20-2 1.6s infinite linear;
    }
    @keyframes l20-1{
        0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
        12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
        25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
        50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
        62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
        75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
        100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
    }
    @keyframes l20-2{ 
        0%    {transform:scaleY(1)  rotate(0deg)}
        49.99%{transform:scaleY(1)  rotate(135deg)}
        50%   {transform:scaleY(-1) rotate(0deg)}
        100%  {transform:scaleY(-1) rotate(-135deg)}
    }

    .earthquakelist
    {
        width: 100%;
        height: 305px;
        overflow: auto;
        border: 1px solid #313131;
        border-radius: 5px;
    }
    .earthquakeitem
    {
        padding:10px;
        border-bottom:1px solid #313131;
    }
    .earthquakeitem h2
    {
        font-size: 15px;
        font-weight: 500;
    }

    .earthquakeitem h3
    {
        font-size: 15px;
        font-weight: 400;
        color:grey;
    }

    /*.custom-popup
    {
        background-color: #313131;
    }*/
    .leaflet-popup-content-wrapper
    {
        background-color: #0f0f0fe3 !important;
        color: #e0e0e0 !important;
        backdrop-filter: blur(30px);
        font-size: 15px;
        outline: 1px solid rgba(255, 255, 255, 0.1);
    }
    .leaflet-popup-content-wrapper strong
    {
        color:grey;
        font-weight:500;
    }
    .leaflet-popup-tip
    {
        background-color: #0f0f0fe3 !important;
        backdrop-filter: blur(30px);
    }

    .modebox
    {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 10px;
        padding: 5px;
        background-color: #313131;
        border-radius: 5px;
        height: 48px;
    }

    .modebox button
    {
        background-color: #313131;
        border-radius:4px;
        font-size:17px;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: center;
        border:0;
        color:white;
        cursor: pointer;
        transition: 0.1s;
    }

    .modebox button img
    {
        width: 18px;
        margin-right: 5px;
    }

    .formmode
    {
        width: 100%;
        margin-bottom: 10px;
    }
    .coordinates {
        position: absolute;
        bottom: 22px;
        right: 4px;
        background-color: #0f0f0fe3;
        color: white;
        font-size: 12px;
        padding: 3px 7px;
        border-radius: 5px;
        z-index: 1000;
        user-select: none;
        pointer-events: none;
        backdrop-filter: blur(30px);
        outline: 1px solid rgba(255, 255, 255, 0.1);
    }

    .deleteareabox
    {
        position: absolute;
        bottom: 53px;
        right: 4px;
        z-index: 1000;
        pointer-events: all;
    }

    .deleteareabox button
    {
        border: 0px;
        width: 40px;
        height: 40px;
        border-radius: 5px;
        background-color: rgb(39, 39, 39);
        padding: 8px;
        outline-style: none;
        cursor: pointer;
    }

    .deleteareabox button img
    {
        width: 100%;
        user-select: none;
        pointer-events: none;
    }

    .parambox
    {
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 20px;
        z-index: 999;
        display: none;
    }

    .parambox button
    {
        width: 45px;
        height: 45px;
        border-radius: 8px;
        background-color: #99412a;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 11px;
        border: 0;
    }
    
    .parambox button img
    {
        width: 100%;
    }

    .kofibox
    {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(6px);
        margin: 0 !important;
        padding: 15px;
        display: none;
    }

    .kofibox iframe
    {
        border: none;
        width: 400px !important;
        padding: 4px;
        background: #f9f9f9;
        border-radius: 10px;
    }

    .kofiboxbutton
    {
        position: absolute;
        right: 15px;
        top: 15px;
    }

    .kofiboxbutton button
    {
        background-color: transparent;
        border: 0;
        height: 50px;
        width: 50px;
        cursor:pointer;
        transition: 0.1s;
    }

    .kofiboxbutton button img
    {
        width: 100%;
        user-select: none;
        pointer-events: none;
    }

    .kofiboxbutton button:active
    {
        transform: scale(0.95);
        opacity: 0.8;
    }

    .kofi
    {
        position: fixed;
        z-index: 999;
        right: 100px;
        margin-top: 3px;
    }

    .kofi button
    {
        width: 60px;
        height: 60px;
        background-color: transparent;
        border:0;
        cursor: pointer;
        pointer-events: all;
        transition: 0.1s;
    }

    .kofi button img
    {
        width: 100%;
        user-select: none;
        pointer-events: none;
    }

    .kofi button:active
    {
        transform: scale(0.95);
        opacity: 0.8;
    }
 

    @media screen and (max-width: 1000px) {
        body {
            padding:0;
        }
        .controlbox{
            padding:0;
            width: 100%;
        }
        .controls{
            border-radius: 0px;
            justify-content: normal;
        }
        #map{
            border-radius: 0px;
        }
        .kofi{
            right:81px;
        }
        .headerrightbutton
        {
            display: block;
        }
        .parambox
        {
            display: block;
        }
    }