:root {
    --pace-blue: #3498db;        /* var(--pace-blue) */
    --pace-orange: #ffa500;      /* var(--pace-orange) */
    --pace-white: #ffffff;       /* var(--pace-white) */
    --pace-off-white: #F2F2F2;   /* var(--pace-off-white) */
    --pace-light-blue: #86c2f3;  /* var(--pace-light-blue) */
    --pace-dark-blue: #246a99;   /* var(--pace-dark-blue) */
}

@font-face {
    font-family: 'PoiretOne-Regular';
    src: url('PoiretOne-Regular.ttf') format('truetype');
}

.pace-title {
    font-size: 22px !important;
    color: var(--pace-white) !important;
    font-family: 'PoiretOne-Regular', sans-serif;
    padding-bottom: 2px;
}

/* ---------------------------- Cytoscape styles ---------------------------- */
.cytoscape-canvas {
    width: 100%;
    height: 700px;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1;
}


/* ---------------------------- Slider styles ---------------------------- */
.rc-slider-tooltip-inner {
    background-color: dodgerblue !important;  
    color: white !important;
    border: none !important;
    box-shadow: none !important;
}
.rc-slider-mark-text {
    color: dodgerblue;          
    font-size: 8px;            
    font-family: "Arial narrow", sans-serif;
}
.rc-slider-mark {
    top: 10px;                  
}

/* ---------------------------- LED styles ---------------------------- */
.led {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin: auto;
    border: 1px solid dodgerblue;
    background-color: white;
    color: dodgerblue;
}
.led-green {
    border: 1px solid green;
    background-color: green;
    color: green;
}
.led-red {
    border: 1px solid red;
    background-color: red;
    color: red;
}
.led-yellow {
    border: 1px solid yellow;
    background-color: yellow;
    color: yellow;
}
.led-blue {
    border: 1px solid dodgerblue;
    background-color: dodgerblue;
    color: dodgerblue;
}
.led-orange {
    border: 1px solid orange;
    background-color: orange;
    color: orange;
}

#export_to_excel_button:active, 
#export_to_geojson_button:active {
    transform: scale(0.95);
    border-color: #55555583 !important;
}

/* ---------------------------- Background image styles ---------------------------- */
#background-img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translate(0%, 0%);
    height: 700px;
    object-fit: contain;  /* or "contain" */
    /* opacity: 0.4; */
    z-index: 0;
    pointer-events: none;
}