body{
    user-select: none;
}
.app{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
.device-wrapper{
    position: relative;
    display: flex;
    height: 100vh;
    /* background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/defibrillator.png); */
}
.d-none{
    display: none;
}
.transparent{
    opacity: 0;
}
.screen-wrap{
    height: 100%;
    background-size: contain;
}
.screen-wrap.monitor{
    background-image: url(../img/screen_monitor.jpg);
}
.screen-wrap.cardio{
    background-image: url(../img/screen_cardio.jpg);
}
.screen-wrapper{
    font-family: 'Open Sans', sans-serif;
    height: 100%;
    background-image: url(../img/screen_deff.jpg);
    background-size: contain;
}
.screen-off{
    font-family: 'Open Sans', sans-serif;
    color: white;
    font-size: 4px;
    height: 100%;
    background-color: black;

    display: flex;
    align-items: center;
    justify-content: center;
}
.loadingBG{
    background-color: #1b1a1a;
    box-shadow: inset 0px 0px 4px 0px #383838;
}
.screen-loading{

}
.loading-row{
    display: flex;
    justify-content: center;
}
.loading-row_name{
    width: 25px;
}
.loading-row_value{
    width: 15px;
}
.device{
    position: relative;
    display: contents;
}
.device img{
    object-fit: contain;
}
.device svg {
    position: absolute;
    top: 0;
    left: 0;
}
.screen-def{

}
.chss{
    font-size: 0.3em;
    position: absolute;
    top: 9px;
    left: 6px;
}
.energy{
    position: absolute;
    top: 24px;
    font-size: 0.3em;
    width: 100%;
    text-align: center;
}
.energy_val{
    font-weight: 600;
}
.energy_mesure{
    font-size: 4px;
}
.energy-slider{
background: rgb(252,176,69);
background: linear-gradient(0deg, rgba(252,176,69,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    _width: 82%;
    width: 0%;
    margin: 0 auto;
    height: 2px;
    position: absolute;
    top: 33px;
    left: 4px;
}
.spo-slider{
    background: rgb(252,176,69);
background: linear-gradient(0deg, rgba(252,176,69,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
    _width: 82%;
    margin: 0 auto;
    height: 2px;
    position: absolute;
    top: 33px;
    left: 4px;
}
.text-info{
    font-size: 3px;
    position: absolute;
    top: 36px;
    width: 100%;
    text-align: center;
}
.date-value{
    font-size: 2px;
    position: absolute;
    top: 39px;
    left: 1px;
    color: white;
    font-weight: 600;
}
.time-value{
    font-size: 2px;
    position: absolute;
    top: 39px;
    right: 1px;
    color: white;
    font-weight: 600;
}
.svg-door{
    /* animation: go-left-right 1s infinite alternate; */
    /* fill: rgba(251, 198, 56, 0.4196078431372549); */
    fill: transparent;
}
.svg-door:hover{
    animation: none;
    fill: rgba(251, 198, 56, 0.4196078431372549);
}
.svg-spo-rect{
    fill:#ffffff;
}
.svg-spo-rect-val{
    fill: #647495;
}
.svg-text{
    font-family: 'Open Sans', sans-serif;
    fill: #647495;
    font-size: 0.23em;
}
.f-bold{
    font-weight: 600;
}

.c-svg-white{
    fill: #ffffff;
}
.c-svg-black{
    fill: #000000;
}
.svg-line-energy{
    stroke-width:0.3;
    stroke: black;
}
.svg-energy-rect{
    fill: black;
    fill: transparent;
}
.svg-energy-rect.active>rect{
    fill: rgb(255, 159, 5);
}
.svg-energy-rect.active>text{
    fill: rgb(255, 255, 255);
}
.svg-energy-rect>text{
    font-size: 0.16em !important;
}
.svg-datetime{
    font-size: 0.18em;
}

.rythm{
    background-image: url(../img/ekg1.jpg);
    background-size: cover;
    height: 25px;
    width: 100%;
    position: absolute;
    top: 46px;
    background-position: 0%;
    animation: background-position 5s linear .1s infinite;
}
.rythm.diff{
    background-image: url(../img/ekg_dif.jpg);
}

.chart{
    background-image: url(../img/monitor/fpg.png);
    background-size: cover;
    height: 25px;
    width: 100%;
    position: absolute;
    top: 46px;
    background-position: 0%;

}
.chart.pos1{top:38px;animation: background-position 5s linear .1s infinite;}
.chart.pos2{top:54px;animation: background-position2 5s linear .1s infinite;}
.chart.pos3{top:69px;animation: background-position3 5s linear .1s infinite;}
.fpg{
    height: 12px;
    background-image: url(../img/monitor/fpg.png);
}
.chart.i{
    height: 12px;
    background-image: url(../img/monitor/I.png);
}
.ii{
    height: 12px;
    background-image: url(../img/monitor/II.png);
}
.iii{
    height: 12px;
    background-image: url(../img/monitor/III.png);
}
.avf{
    height: 12px;
    background-image: url(../img/monitor/aVF.png);
}
.avl{
    height: 12px;
    background-image: url(../img/monitor/aVL.png);
}
.avr{
    height: 12px;
    background-image: url(../img/monitor/aVR.png);
}
.v1{
    height: 12px;
    background-image: url(../img/monitor/V1.png);
}
.v2{
    height: 12px;
    background-image: url(../img/monitor/V2.png);
}
.v3{
    height: 12px;
    background-image: url(../img/monitor/V3.png);
}
.v4{
    height: 12px;
    background-image: url(../img/monitor/V4.png);
}
.v5{
    height: 12px;
    background-image: url(../img/monitor/V5.png);
}
.v6{
    height: 12px;
    background-image: url(../img/monitor/V6_2.png);
}

/* КАРДИОСТИМУЛЯЦИЯ */
.chart-cardio.pos1{top:46px;animation: bg-cardio 5s linear .1s infinite;}
.I_do{
    height: 12px;
    background-image: url(../img/cardio/I_cardio_do.png);
}
.II_do{
    height: 12px;
    background-image: url(../img/cardio/II_cardio_do.png);
}
.III_do{
    height: 12px;
    background-image: url(../img/cardio/III_cardio_do.png);
}
.I_po{
    height: 12px;
    background-image: url(../img/cardio/I_cardio_posle.png);
}
.II_po{
    height: 12px;
    background-image: url(../img/cardio/II_cardio_posle.png);
}
.III_po{
    height: 12px;
    background-image: url(../img/cardio/III_cardio_posle.png);
}
@keyframes background-position {
  to { background-position: -550% 0%; }
}

@keyframes bg-cardio {
    to { background-position: -750% 0%; }
}

@keyframes background-position2 {
  to { background-position: -550% 0%; }
}
@keyframes background-position3 {
  to { background-position: -550% 0%; }
}
.smlFlash{
    display: none;
}
.flash {
    display: inline;
    opacity: 0;
    animation: flasher 1s linear .1s 1;
}
@keyframes flasher{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
}

.a-pause{
    animation-play-state: paused !important;
}