@import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');

svg,
svg * {
    pointer-events: all !important;
    cursor: default !important;
    margin: 0px !important;
    padding: 0px !important;
    max-height: 100vh !important;
    z-index: 0;
}

svg path {
    stroke: inherit;
    stroke-width: 0px !important;
}
/*######################################################
#   The state of the PICTURE person state
######################################################*/
image.person-not_home {
    display: block !important;
    opacity: 0.2 !important;
    z-index: 12 !important;
}
/*######################################################
#   Electricity TEXT display
######################################################*/
#sensor\.tarifi {
    fill: white !important;
    font-weight: 900 !important;
    text-shadow: 0 0 5px black, 0 0 10px #FF0000;
    font-family: 'Single Day', cursive;
    opacity: 1 !important;
    z-index: 50 !important;
}
#sensor\.elektro_network_tariff {
    fill: red !important;
    font-size: 200% !important;
    font-weight: 900 !important;
    text-shadow: 0 0 5px black, 0 0 10px rgb(78, 192, 245);
    font-family: 'Single Day', cursive;
    opacity: 1 !important;
    z-index: 50 !important;
}
#sensor\.primerjava_blokov {
    fill: #2cff05 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 5px black, 0 0 10px #FF0000;
    font-family: 'Single Day', cursive;
    opacity: 1 !important;
    z-index: 50 !important;
}
#faza_c {
    fill: red !important;
    font-weight: 900 !important;
    text-shadow: 0 0 5px black, 0 0 10px #FF0000;
    font-family: 'Single Day', cursive;
    opacity: 1 !important;
    z-index: 50 !important;
}
#faza_b {
    fill: #2cff05 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 5px black, 0 0 10px #FF0000;
    font-family: 'Single Day', cursive;
    opacity: 1 !important;
    z-index: 50 !important;
}
/*######################################################
#   The BACKGROUND
######################################################*/
#background {
    display: block !important;
    z-index: 1;
}
/*######################################################
#   Room switches control
#######################################################
******************************
# Room PICTURE state display
#*****************************/
#rooms image {
    display: none;
    mix-blend-mode: lighten;
    animation: 0.75s fade-in linear forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#rooms image.switch-on {
    display: block !important;
    opacity: 1;
    z-index: 11 !important;
}
/******************************
# Room STROKE state display
#*****************************/
#areas {
    fill: none;
    stroke: none;
}

#areas .switch-on {
    stroke: red !important;
    stroke-width: 13px !important;
    stroke-opacity: 1;
    z-index: 10;
}
/*######################################################
#   Window state display
########################################################
#******************************
# Windows PICTURE state display
#*****************************/
#window image {
    display: none;
    mix-blend-mode: lighten;
    animation: 0.75s fade-in linear forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#window image.open {
    display: block !important;
    opacity: 1;
    z-index: 110 !important;
}
/****************************
# Window STROKE state display
#***************************/
#windows .open {
    stroke: #fffffd !important;
    stroke-width: 10px !important;
    opacity: 1 !important;
    z-index: 120  !important;
    filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
}
/*********************************************
# Window STROKE state display / partially_open
#********************************************/
#windows .partially {
    stroke: #fffffd !important;
    stroke-width: 10px !important;
    opacity: 1 !important;
    z-index: 120  !important;
    filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
}
/*######################################################
#   Door state display
########################################################
#***************************
# Door PICTURE state display
#**************************/
#doors image {
    display: none;
    mix-blend-mode: lighten;
    animation: 0.75s fade-in linear forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#doors image.door-open {
    display: block !important;
    opacity: 1;
    z-index: 110 !important;
}
/**************************
# Door STROKE state display
#*************************/
#door .door-open {
    stroke: #CFFF04 !important;
    stroke-width: 5px !important;
    opacity: 1 !important;
    z-index: 120;
    filter: blur(2px);
    -o-filter: blur(2px);
    -ms-filter: blur(2px);
    -moz-filter: blur(2px);
    -webkit-filter: blur(2px);
}

#areas {
    fill: none;
    stroke: none;
}

#areas .switch-on {
    stroke: red !important;
    stroke-width: 13px !important;
    stroke-opacity: 1;
    z-index: 10;
}
/*######################################################
#   State of white goods+ STROKE display
######################################################*/
#elements {
    fill: none;
    stroke: none;
}

#elements .switch-on { 
    stroke: rgb(78, 192, 245) !important;
    stroke-width: 5px !important;
    stroke-opacity: 1;
    z-index: 6;
}

#elements .switch-working { 
    stroke: rgb(78, 192, 245) !important;
    stroke-width: 30px !important;
    filter: blur(31px);
    -o-filter: blur(31px);
    -ms-filter: blur(31px);
    -moz-filter: blur(31px);
    -webkit-filter: blur(31px);
    stroke-opacity: 1;
    z-index: 7 !important;
}
/*######################################################
#   Heating STROKE state display
######################################################*/
#heating {
    fill: none;
    stroke: none;
}

#heating .switch-on {
    stroke: rgb(255, 94, 0) !important;
    stroke-width: 35px !important;
    filter: blur(36px);
    -o-filter: blur(36px);
    -ms-filter: blur(36px);
    -moz-filter: blur(36px);
    -webkit-filter: blur(36px);
    stroke-opacity: 1;
    z-index: 7 !important;
}

#sensor\.me_kl_current_consumption .switch-on {
    stroke: rgb(255, 94, 0) !important;
    stroke-width: 35px !important;
    filter: blur(36px);
    -o-filter: blur(36px);
    -ms-filter: blur(36px);
    -moz-filter: blur(36px);
    -webkit-filter: blur(36px);
    stroke-opacity: 1;
    z-index: 7 !important;
}
/*######################################################
#   Window temperature TEXT display
######################################################*/
#temperatura {
    fill: white !important;
    text-shadow: 0 0 5px black, 0 0 10px #0509fc;
    font-family: 'Single Day', cursive;
    opacity: 1 !important;
    z-index: 50 !important;
}
/*######################################################
#   Average temperature TEXT display
######################################################*/
#tekst {
    fill: white !important;
    font-weight: 900 !important;
    text-shadow: 0 0 5px black, 0 0 10px #FF0000;
    font-family: 'Single Day', cursive;
    opacity: 1 !important;
    z-index: 50 !important;
}
/*######################################################
#   Humidity TEXT display
######################################################*/
#vlaznost {
    fill: white !important;
    font-weight: 900 !important;
    text-shadow: 0 0 5px black, 0 0 10px rgb(78, 192, 245);
    font-family: 'Single Day', cursive;
    opacity: 1 !important;
    z-index: 50 !important;
}
/*######################################################
#   The weather display
######################################################*/
#weather tspan {
    fill: white !important;
    font-weight: 900 !important;
    text-shadow: 0 0 5px black, 0 0 10px #FF0000;
    font-family: 'Single Day', cursive;
    opacity: 1 !important;
    z-index: 50 !important;
}

#weather svg g{
    object-fit: contain !important;
    z-index: 50 !important;
}
/*######################################################
#   Display STROKE state of the computers
######################################################*/
.comp-on {
    stroke: #2cff05 !important;
    stroke-width: 5px !important;
    opacity: 2 !important;
    z-index: 12;
}

.printer-on {
    stroke: #ff00ff !important;
    stroke-width: 5px !important;
    opacity: 2 !important;
    z-index: 12;
}
