/* SVG shapes */

svg,
svg * {
    vector-effect: non-scaling-stroke !important;
    pointer-events: all !important;
    background-color: var(--card-background-color);
    max-height: calc( 100vh - 50px);
}

/* Hover over */

/* .svg-shape:hover,
g.svg-hover> :not(text):hover,
g.svg-click> :not(text):hover,
g.svg-long-click> :not(text):hover,
:not(text).svg-hover:hover,a
:not(text).svg-click:hover,
:not(text).svg-long-click:hover {
    stroke: #03a9f4 !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
} */


/* Generic/default entity statuses */
.entity-unavailable {
    fill: var(--disabled-color) !important;
    stroke: var(--white-color) !important;
    stroke-width: 1px !important;
}

/* Highlighting an element when hovering over it */
/* .ha-entity:hover {
    fill: var(--yellow-color) !important;
    stroke: var(--blue-color) !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
} */


/* Hover over */

.hover-info {
    fill: var(--blue-color) !important;
    stroke: var(--green-color) !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
}


/* Bootstrap succssss */

.success-text {
    fill: var(--green-color) !important;
}

.success-background,
.success-text-background {
    fill: #dff0d8 !important;
    fill-opacity: 1 !important;
    stroke: #d6e9c6 !important;
    stroke-width: 1px !important;
}


/* Bootstrap info */

.info-text {
    fill: var(--info-color) !important;
}

.awake {
    fill: #949494 !important;
}

.sleeping {
    fill: #0e0e6e !important;
}

.in-bed {
    fill: #504c66 !important;
}

.out-of-bed {
    fill: #57565c !important;
}

.room-empty {
    /*fill: #5d5b5b !important;*/
    fill: var(--card-background-color) !important;
    fill-opacity: 1 !important;
}

.room-occupied {
    fill: var(--light-grey-color) !important;
    fill-opacity: 1 !important;
    /* fill: #5d5d6f !important;*/
}

.water-dry {
    fill: var(--green-color) !important;
    fill-opacity: 1 !important;
}

.water-wet {
    fill: var(--error-color) !important;
    fill-opacity: 1 !important;
}

.door-closed {
    /* fill: var(--green-color) !important; */
    /* fill: #81c9a7 !important; */
    fill: #81D9a7 !important;
    fill-opacity: 1 !important;
    /*   stroke: #82caa8 !important;
    stroke-width: 1px !important;
    animation-duration: 4s;
    animation-name: rotateReset90; */
}

.door-open {
    fill: var(--error-color) !important;
    fill-opacity: 1 !important;
    stroke: var(--warning-color) !important;
    stroke-dasharray: 10, 4 !important;
    stroke-width: 2px !important;
    stroke-opacity: 0.8 !important;
    /*  animation-duration: 4s;
    animation-name: rotate90;
    animation-fill-mode: forwards;  */
}

.appliance-off {
    /* fill: var(--green-color) !important; */
    /* fill: #81c9a7 !important; */
    fill: var(--disabled-color) !important;
    fill-opacity: 1 !important;
    /*   stroke: #82caa8 !important;
    stroke-width: 1px !important;
    animation-duration: 4s;
    animation-name: rotateReset90; */
}

.appliance-on {
    fill: var(--primary-color) !important;
    fill-opacity: 1 !important;
    /*  animation-duration: 4s;
    animation-name: rotate90;
    animation-fill-mode: forwards;  */
}

.appliance-problem {
    fill: var(--error-color) !important;
    fill-opacity: 1 !important;
    /*  animation-duration: 4s;
      animation-name: rotate90;
      animation-fill-mode: forwards;  */
}

.appliance-pending {
    fill: var(--warning-color) !important;
    fill-opacity: 1 !important;
    /*  animation-duration: 4s;
      animation-name: rotate90;
      animation-fill-mode: forwards;  */
}

.window-closed {
    /* fill: var(--green-color) !important; */
    /* fill: #81c9a7 !important; */
    fill: #CCCCCC !important;
    fill-opacity: 1 !important;
    /*   stroke: #82caa8 !important;
    stroke-width: 1px !important;
    animation-duration: 4s;
    animation-name: rotateReset90; */
}

.window-open {
    fill: var(--error-color) !important;
    fill-opacity: 1 !important;
    stroke: var(--warning-color) !important;
    stroke-dasharray: 10, 4 !important;
    stroke-width: 2px !important;
    stroke-opacity: 0.8 !important;
}

.window-unavailable {
    fill: var(--warning-color) !important;
    fill-opacity: 1 !important;
    stroke: var(--error-color) !important;
    stroke-dasharray: 10, 4 !important;
    stroke-width: 2px !important;
    stroke-opacity: 0.8 !important;
}


/*
  .alarm-disarmed {
    fill: #81D9a7 !important;
    fill-opacity: 0.5 !important;
  }

  .alarm-triggered {
    fill: var(--error-color) !important;
    fill-opacity: 1 !important;
    stroke: var(--warning-color) !important;
  }

  .alarm-armed_night {
    fill: #FF8A0D; !important;
  }

  .alarm-armed_away {
    fill: #FFCC66; !important;
  }

  .alarm-armed_home {
    fill: #FF8A0D; !important;
  }

  .alarm-armed_custom_bypass {
    fill: #FFCC66; !important;
  }
  */

.closed-background,
.closed-text-background {
    /* fill: var(--green-color) !important; */
    fill: #81D9a7 !important;
    fill-opacity: 1 !important;
    /*   stroke: #82caa8 !important;
    stroke-width: 1px !important; */
}

.open-background,
.open-text-background {
    fill: var(--error-color) !important;
    fill-opacity: 1 !important;
    stroke: var(--warning-color) !important;
    stroke-dasharray: 10, 4 !important;
    stroke-width: 2px !important;
    stroke-opacity: 0.8 !important;
}

.interior-closed-background,
.interior-closed-text-background {
    fill: var(--light-green-color) !important;
    fill-opacity: 1 !important;
    /*   stroke: #82caa8 !important;
    stroke-width: 1px !important; */
}

.interior-open-background,
.interior-open-text-background {
    fill: #5fd3eb !important;
    fill-opacity: 1 !important;
    stroke: #6fE3Fb !important;
    stroke-dasharray: 4, 4 !important;
    stroke-width: 1px !important;
    stroke-opacity: 0.5 !important;
}

.window-closed-background,
.window-closed-text-background {
    fill: #83DFF3 !important;
    fill-opacity: 1 !important;
    /*   stroke: #82caa8 !important;
    stroke-width: 1px !important; */
}

.window-open-background,
.window-open-text-background {
    fill: var(--error-color) !important;
    fill-opacity: 1 !important;
    stroke: var(--warning-color) !important;
    stroke-dasharray: 10, 4 !important;
    stroke-width: 2px !important;
    stroke-opacity: 0.8 !important;
}

.motion-background,
.motion-text-background {
    fill: var(--green-color) !important;
    /* fill-opacity: 1 !important; */
    /*   stroke: #82caa8 !important;
    stroke-width: 1px !important; */
}


/* .info-background, .info-text-background { */

.info-background {
    /* fill: #D2D0ED !important; */
    fill: var(--lime-color) !important;
    /* fill-opacity: 1 !important; */
    /*   stroke: #82caa8 !important;
    stroke-width: 1px !important; */
}


/* Bootstrap warning */

.warning-text {
    fill: var(--warning-color) !important;
}

.warning-background,
.warning-text-background {
    fill: var(--warning-color) !important;
    fill-opacity: 1 !important;
    stroke: var(--error-color) !important;
    stroke-width: 4px !important;
    stroke-opacity: 0.5 !important;
}

.motion-unavailable {
    /*  fill: #B9CEF7 !important; */
    fill: #6FAECE !important;
}


/* Bootstrap danger */

.danger-text {
    fill: var(--error-color) !important;
}

.danger-background,
.danger-text-background {
    fill: #f2dede !important;
    fill-opacity: 1 !important;
    stroke: #ebccd1 !important;
    stroke-width: 1px !important;
}


/* Last motion entity */

.last-motion {
    stroke: #808080 !important;
    stroke-width: 1px !important;
    stroke-opacity: 1 !important;
}


/* Alarm Panel */

.alarm-disarmed {
    fill: #3c763d !important;
}

.alarm-armed {
    fill: #8a6d3b !important;
}


/* Camera */

.camera-idle {
    fill: var(--purple-color) !important;
}

.camera-unavailable {
    fill: var(--disabled-color) !important;
}

.camera-streaming {
    fill: var(--light-blue-color) !important;
}

.camera-recording {
    fill: var(--red-color) !important;
}

/* Light */

.light-unavailable {
    fill: var(--disabled-color) !important;
    stroke: var(--white-color) !important;
    stroke-width: 1px !important;
}

.light-off,
.light-off * {
    fill: var(--ha-color-fill-neutral-loud-active) !important;
}

.light-on,
.light-on * {
    fill: var(--yellow-color) !important;
    stroke: var(--amber-color) !important;
    stroke-width: 7px !important;
    stroke-opacity: 0.25 !important;
}

.sun-on {
    fill: var(--yellow-color) !important;
    stroke: var(--amber-color) !important;
    stroke-width: 7px !important;
    stroke-opacity: 0.25 !important;
}

.light-strip-on {
    fill: var(--yellow-color) !important;
    stroke: var(--amber-color) !important;
    stroke-width: 7px !important;
    stroke-opacity: 0.25 !important;
}

/* .indicator-on {
    fill: var(--yellow-color) !important;
    stroke: var(--amber-color) !important;
    stroke-width: 0.25px !important;
    stroke-opacity: .75 !important;
} */


/* Doorbell */

.doorbell-off {
    /* fill: #92C0AD !important; */
    fill: var(--ha-color-fill-neutral-loud-active) !important;
}

.doorbell-on {
    fill: var(--yellow-color) !important;
}


/* Temperature sensor */

.temp-very-low-background {
    fill: #d9edf7 !important;
    fill-opacity: 1 !important;
}

.temp-below-average-background {
    fill: #dcefe8 !important;
    fill-opacity: 1 !important;
}

.temp-average-background {
    fill: #dff0d8 !important;
    fill-opacity: 1 !important;
}

.temp-very-high-background {
    fill: #f2dede !important;
    fill-opacity: 1 !important;
}


/* Media player */

.squeezebox-off {
    fill: var(--purple-color) !important;
}

.squeezebox-idle {
    fill: var(--light-grey-color) !important;
}

.squeezebox-paused {
    fill: var(--amber-color) !important;
}

.squeezebox-on {
    fill: var(--light-blue-color) !important;
}

.squeezebox-unknown {
    fill: var(--disabled-color) !important;
}


/* People */

.car-away {
    fill: #585858 !important;
    visibility: hidden !important;
}

.car-home {
    fill: #014421 !important;
}

.suv-away {
    visibility: hidden !important;
}

.suv-home {
    fill: var(--ha-color-fill-neutral-loud-active) !important;
}

.tracker-away {
    fill: #585858 !important;
}

.tracker-travel {
    fill: #88a9b8 !important;
}

.tracker-work {
    fill: var(--brown-color) !important;
}

.tracker-other {
    fill: #6993a6 !important;
}

.tracker-home {
    fill: var(--info-color) !important;
}

.hvac-heating {
    fill: var(--red-color)
}

.hvac-fan {
    fill: var(--yellow-color)
}

.hvac-cooling {
    fill: var(--blue-color)
}

.hvac-idle {
    fill: var(--disabled-color)
}

.fridge-low {
    fill: var(--blue-color) !important;
}

.fridge-medium {
    fill: var(--green-color) !important;
    /* stroke-width: 2px !important;
    stroke-opacity: 1 !important; */
}

.fridge-high {
    fill: var(--error-color) !important;
    stroke: var(--primary-text-color) !important;
    stroke-width: 0.25px !important;
    stroke-opacity: .75 !important;
}

.temp-freeze {
    fill: var(--white-color) !important;
    text-align: right;
}

.temp-low {
    fill: var(--blue-color) !important;
    text-align: right;
}

.temp-medium {
    fill: var(--green-color) !important;
    text-align: right;
}

.temp-high {
    fill: var(--orange-color) !important;
    text-align: right;
}

.temp-hot {
    fill: var(--error-color) !important;
    text-align: right;
}

.temp-unknown {
    fill: var(--disabled-color) !important;
}

.health-critical {
    fill: var(--error-color) !important;
}

.health-warning {
    fill: var(--warning-color) !important;
}

.health-info {
    fill: var(--info-color) !important;
}

.health-good {
    fill: var(--green-color) !important;
}

.health-unknown {
    fill: var(--disabled-color) !important;
}

.humid-low {
    fill: var(--purple-color) !important;
}

.humid-med-low {
    fill: var(--yellow-color) !important;
}

.humid-medium {
    fill: var(--green-color) !important;
}

.humid-med-high {
    fill: var(--ha-color-orange-50) !important;
}

.humid-high {
    fill: var(--error-color) !important;
}

.light-low {
    fill: var(--ha-color-orange-05) !important;
}

.light-medium-low {
    fill: var(--ha-color-orange-20) !important;
}

.light-medium {
    fill: var(--ha-color-orange-50) !important;
}

.light-high {
    fill: var(--ha-color-neutral-05) !important;
}

.tv-on {
    /* fill: #DFDFDF !important; */
    fill: #B0B0D0 !important;
}

.tv-off {
    fill: #505050 !important;
}

.bin-today {
    fill: var(--error-color) !important;
    stroke: var(--black-color) !important;
    stroke-width: 0.25px !important;
    stroke-opacity: .75 !important;
}

.bin-tomorrow {
    fill: var(--warning-color) !important;
    stroke: var(--black-color) !important;
    stroke-width: 0.25px !important;
    stroke-opacity: .75 !important;
}

.bin-future {
    fill: var(--disabled-color) !important;
    stroke: var(--black-color) !important;
    stroke-width: 0.25px !important;
    stroke-opacity: .75 !important;
}

.bin-false {
    fill: var(--dark-grey-color) !important;
    stroke: var(--black-color) !important;
    stroke-width: 0.25px !important;
    stroke-opacity: .75 !important;
}

.bags-five {
    fill: var(--graph-color-1) !important;
}

.bags-four {
    fill: var(--graph-color-4) !important;
}

.bags-three {
    fill: var(--graph-color-7) !important;
}

.bags-two {
    fill: var(--graph-color-10) !important;
}

.bags-one {
    fill: var(--graph-color-14) !important;
}

.bags-zero {
    fill: var(--error-color) !important;
}

.visible-entity {
    display: initial !important;
}

.hidden-entity {
    display: none !important;
}

.hidden {
    visibility: hidden !important;
}

.transparent {
    fill-opacity: 0.5 !important;
}

.visible {
    visibility: visible !important;
}


/* Spinning fan */

.spinning-fan {
    animation-name: fan-spin;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center;
    transform-box: fill-box;
}

.spinning-fan-low {
    animation-name: fan-spin;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center;
    transform-box: fill-box;
}

.spinning-fan-med {
    animation-name: fan-spin;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center;
    transform-box: fill-box;
}

.spinning-fan-high {
    animation-name: fan-spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes fan-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.cam14-preset-1 {
    /* transform-origin: 932.77301, 516.55847; */
    transform: rotate(-162.13251deg);
    /* transform: rotate(-162.13251, 932.77301, 516.55847); */
}

.cam14-preset-2 {
    /* transform: rotate(-52.13251, 937.18866, 521.48235); */
    transform: rotate(-52.13251deg);
}

.cam14-preset-3 {
    /* transform: rotate(12.86749, 911.65468, 493.00954); */
    transform: rotate(12.86749deg);
}

.cam14-preset-4 {
    /* transform: rotate(57.86749, 928.17232, 511.42827); */
    transform: rotate(57.86749deg);
}

.cam14-preset-5 {
    /* transform: rotate(-127.13251, 933.56844, 517.44545); */
    transform: rotate(-127.13251deg);
}

.cam14-preset-6 {
    /* transform: rotate(-107.13251, 934.13244, 518.07436); */
    transform: rotate(-107.13251deg);
}

.cam14-preset-7 {
    /* transform: rotate(-12.13251, 954.42304, 540.7003); */
    transform: rotate(-12.13251deg);
}

.green-to-red-grad-1{
    fill: #00ff00 !important;
}

.green-to-red-grad-2{
    fill: #4ef600 !important;
}

.green-to-red-grad-3{
    fill: #6eed00 !important;
}

.green-to-red-grad-4 {
    fill: #87e300 !important;
}

.green-to-red-grad-5 {
    fill: #99d900 !important;
}

.green-to-red-grad-6 {
    fill: #a8cf00 !important;
}

.green-to-red-grad-7 {
    fill: #b4c500 !important;
}

.green-to-red-grad-8 {
    fill: #bfba00 !important;
}

.green-to-red-grad-9 {
    fill: #caaf00 !important;
}

.green-to-red-grad-10 {
    fill: #d3a400 !important;
}

.green-to-red-grad-11 {
    fill: #dc9800 !important;
}

.green-to-red-grad-12 {
    fill: #e48b00 !important;
}

.green-to-red-grad-13 {
    fill: #eb7d00 !important;
}

.green-to-red-grad-14 {
    fill: #f26d00 !important;
}

.green-to-red-grad-15 {
    fill: #f85c00 !important;
}

.green-to-red-grad-16 {
    fill: #fb4900 !important;
}

.green-to-red-grad-17 {
    fill: #fe3100 !important;
}

.green-to-red-grad-18 {
    fill: var(--error-color) !important;
}


.humidex-unavailable{
    visibility: hidden !important;
}