:root {
    /* Background Color */
    --background-color1: #0E1013;
    --background-color2: #17181B;
    --background-color3: #202124;
    --background-color4: #282A2D;
    --background-color5: #3d3e3f;
    --map-background-hover: hsla(200, 98%, 5%, 1);
    --map-background-active: hsla(200, 98%, 10%, 1);
    --logo-background: #0a0b0d;
    --loading-background: #0a0b0dc7;
  
    /* Font Family */
    --font-family: "Roboto", Arial, Tahoma, Verdana, sans-serif;

    /* Font Color */
    --font-color1: #BDCDDD;
    --font-color2: #F2F2F2;
    --font-color3: #646566;
    --font-color4: rgb(1, 95, 236);
  
    /* Font Size */
    --font-size1: 12px;
    --font-size2: 14px;
    --font-size3: 14px;
    --font-size4: 16px;
    --font-size5: 20px;
    --font-size6: 36px;
  
    /* Border Color */
    --border-color1: #6fc5f0;
    --border-color2: rgb(1, 95, 236);
    --border-color3: #FFB500;
  
    /* Border Color with alpha */
    --border-color1-alpha: #6fc5f060;
    --border-color2-alpha: rgba(1, 95, 236, 0.6);
    --border-color3-alpha: #FFB50060;

    /* border */
    --border-width: 1px;
    --border-radius: 5px;
    --border-primary: var(--border-width) solid var(--border-color2);
    --border-secondary: var(--border-width) solid var(--border-color3);
    /* end border */

    /* border shadow */
    --border-shadow-small: 0 2px 4px rgba(0, 0, 0, .15);
    --border-shadow-normal: 0 2px 5px rgba(0, 0, 0, .3);
    --border-shadow-large: 0px 1px 6px rgba(0, 0, 0, 0.1), 0px 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-input-size: inset 0px 0px 0px var(--border-width);
    /* end border shadow */

    /* icon */
    --icon-size-small: 16px;
    --icon-size-normal: 20px;
    --icon-size-large: 24px;
    --icon-size-extralarge: 30px;

    --icon-color: rgb(2, 135, 202);
    /* end icon */

    /* transitions */
    --transition-time: 0.2s;
    --transition-in: ease-in;
    --transition-out: ease-out;
    /* end transitions */

    /* z-index */
    --z-index-up: 1;
    --z-index-force-up: 10;
    --z-index-overlay: 999;
    --z-index-overlay-total: 10000000;
    /* end z-index */

    /* srg */
    --fs-enter-url: url("../icons/map/leaflet_plugins/enterfullscreen.svg");
    --fs-exit-url: url("../icons/map/leaflet_plugins/exitfullscreen.svg");

    --zb-zoomtostart-url: url("../icons/map/leaflet_plugins/zoom-to-start.svg");
    --zb-zoomin-url: url("../icons/map/leaflet_plugins/zoom-in.svg");
    --zb-zoomout-url: url("../icons/map/leaflet_plugins/zoom-out.svg");
    --zb-zoomto-url: url("../icons/map/leaflet_plugins/zoom-to-area.svg");
    
    --ls-control-url: url("../../icons/map/leaflet_plugins/layers.svg");

    --minimap-url: url("../../icons/map/leaflet_plugins/toggle.svg");

    /*--td-backward-url: url("images/backward-dark.svg");
    --td-forward-url: url("images/forward-dark.svg");
    --td-play-url: url("images/play-dark.svg");
    --td-pause-url: url("images/pause-dark.svg");*/
    /* end svg */
}