* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, #cesiumContainer {
    width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
    font-family: var(--kommunfont) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Här ändras kommunfärger */
:root {
    --kommunfarg: var(--purple-700);
    --kommunfarg-darker: var(--purple-900);
    --kommunfarg-lighter: var(--purple-300);
    --kommunfarg-lightest: var(--purple-100);

    --kommunfont: "Barlow", "sans-serif";

    --c-text-default: var(--white-100);
    --c-text-darker: var(--grey-300);
    --c-text-inverted: var(--kommunfarg-darker);
    --c-text-highlight: var(--kommunfarg);

    --c-background-white: var(--white-100);
    --c-danger: var(--red-500);

    --c-scrollbar-blue: var(--kommunfarg-lighter);
    --c-scrollbar-track: var(--white-100);
    --c-scrollbar-hover: var(--blue-300);

    --scrollbar-width: 5px;

    --c-background-modal: var(--grey-300);
    --c-background-nav-link: var(--grey-300);
    --c-background-input: var(--grey-300);
    --c-background-spinner: var(--grey-300);


    --module-content-max-width: 450px;
    --thumb-circle-size: 20px;
    --navbar-height: 80px;
    

    --black-700: rgba(41, 41, 41, 1);
    --white-100: rgba(255, 255, 255, 1);
    --grey-300: rgba(240, 240, 240, 1);

    --purple-900: rgba(57, 35, 89, 1);
    --purple-700: rgba(75, 45, 120, 1);
    --purple-300: rgba(210, 195, 255, 1);
    --purple-100: rgba(241, 236, 255, 1);

    --green-700: rgba(25, 200, 150, 1);
    --green-500: rgba(100, 220, 100, 1);

    --blue-700: rgba(0, 185, 255, 1);
    --blue-300: rgba(125, 225, 255, 1);

    --yellow-700: rgba(240, 250, 90, 1);
    --yellow-300: rgba(255, 250, 190, 1);

    --red-500: rgba(235, 95, 95, 1);
    --red-300: rgba(255, 250, 190, 1);


    --skolytor-gron: rgba(130, 245, 115, 1);
    --skolytor-hardgjord: rgba(161, 153, 146, 1);
    --skolytor-lek: rgba(253, 153, 238, 1);
    --skolytor-naturmark: rgba(223, 223, 101, 1);
    --skolytor-krontackning: rgba(101, 193, 131, 1);



    --padding-xl: 40px;
    --padding-l: 20px;
    --padding-m: 16px;
    --padding-s: 9px;
    --padding-xs: 4px;

    --header-padding: var(--padding-s);
    --nav-padding: var(--padding-m);
}
.cesium-viewer-bottom {
    display: none !important;
}

#coordinates {
    padding: 2px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
    bottom: 0px;
    right: 0px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: small;
    font-family: var(--kommunfont);
}

.cesium-infoBox-iframe {
    font-family: var(--kommunfont) !important;
}

i {
    display: flex;
    align-items: center;
    justify-content: center;
}

dialog {
    border: none;
}

input[type='range'] {
    background-color: var(--c-background-white);
    border-radius: 100vmax;
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 10px; /* Specified height */
    outline: none; /* Remove outline */

}


input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumb-circle-size);
    height: var(--thumb-circle-size);
    border-radius: 100vmax;
    background: var(--kommunfarg);
    cursor: pointer;
  }
  
  input[type='range']::-moz-range-thumb {
    width: var(--thumb-circle-size);
    height: var(--thumb-circle-size);
    border-radius: 100vmax;
    background: var(--kommunfarg);
    cursor: pointer;
  }