@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@100;200;300;400;500&family=Comfortaa:wght@300;500;700&display=swap');


:root{
  --color1:#0e6cc4;
  --status-bg-apagado:#767676;
  --status-bg-circulando_agua:#0e6cc4;
  --status-bg-encendiendo_caldera:orangered;
  --status-bg-climatizador_en_espera:#309f9f;
  --status-bg-climatizando:red;
  --status-bg-iniciando_climatización:#0e6cc4;
  --status-bg-error:red;
  --status-bg-temperatura_alcanzada:green;

}
.or {
    display: block;
    width: 100%;
    color: var(--color-3);
    margin: 1em auto;
    font-size: .7em;
}
.qJTHM {
    -webkit-user-select: none;
    color: #202124;
    direction: ltr;
    -webkit-touch-callout: none;
    font-family: "Roboto",arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
    margin: 0;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    display:flex;
}
.haAclf {
  display: inline-block;
}
.nsm7Bb-HzV7m-LgbsSe {
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: background-color .218s,border-color .218s;
transition: background-color .218s,border-color .218s;
-webkit-user-select: none;
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border: 1px solid #dadce0;
color: #3c4043;
cursor: pointer;
font-family: "Roboto",arial,sans-serif;
font-size: 14px;
height: 40px;
letter-spacing: 0.25px;
outline: none;
overflow: hidden;
padding: 0 12px;
position: relative;
text-align: center;
vertical-align: middle;
white-space: nowrap;
width: auto;
}
.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-MJoBVe {
-webkit-transition: background-color .218s;
transition: background-color .218s;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb {
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-flex-direction: row;
flex-direction: row;
justify-content: space-between;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
height: 100%;
position: relative;
width: 100%;
}
.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-Bz112c {
height: 18px;
margin-right: 8px;
min-width: 18px;
width: 18px;
}
.LgbsSe-Bz112c {
display: block;
}
svg:not(:root) {
overflow-clip-margin: content-box;
overflow: hidden;
}
.nsm7Bb-HzV7m-LgbsSe .nsm7Bb-HzV7m-LgbsSe-BPrWId {
-webkit-flex-grow: 1;
flex-grow: 1;
font-family: "Roboto",arial,sans-serif;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
.L6cTce {
display: none;
}
* {
  padding: 0;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.background{
  z-index: -1;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top:0;
  left:0;
  background-image: var(--vsd-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
}
.logo{
  background-image: var(--vsd-logo);
  background-repeat: no-repeat;
  background-position: center;
  width: 20vw;
  height: 40px;
  background-size: contain;
  /* background-color: rgba(0,0,0,0.15); */
  /* backdrop-filter: blur(6px); */
}
.centered{
  position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.brand{
  background-image: var(--vsd-brand);
  background-repeat: no-repeat;
  background-position: center;
  height: 60px;
  background-size: contain;
}

.bg-left{
  background-position: left;
}
.bg-right{
  background-position: right;
}


.v-full{
  display:
  table;
  width: 100%;
  padding: .5em;
}
.v-1-2 {
    display: table-cell;
    width: 50%;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
}
.v-1-3 {
    display: table-cell;
    width: 33%;
    padding: 0;
    margin: 0;
}
.v-1-4 {
    display: table-cell;
    width: 25%;
    vertical-align: bottom;
}
h1,h2,h3,h4,h5,h6 {
    user-select: none;
}
.window {
    min-width: 30%;
    max-width: 30%;
    display: block;
    background-color: var(--vsd-modal-bg-color);
    text-align: center;
    backdrop-filter: var(--vsd-modal-bg-filter);
    box-shadow: 0px 10px 10px black;
}
.window-title {
    height: 40px;
    border-bottom: 1px solid;
    background-color: rgba(0,0,0,0.5);
    cursor: move;
}

.window-body {
    width: 100%;
    height: 10em;
    margin: 1em auto;
}

.window-footer {
    border-top: 1px solid;
    margin: .5em auto;
    width: 100%;
    display: block;
}
.flex{
  display: flex;
  align-items: center;
  justify-content: center;

}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}

.left{
  text-align: left;
  justify-content: flex-start;
}
.right{
  text-align: right;
  justify-content: flex-end;
}

.size1-1{
  width: 100%;
}
.size1-2{
  width: 50%;
}
.size1-3{
  width: 33%;
}
.size1-4{
  width: 25%;
}

.tab{display:none}
.active{
  display:block
}

section {}

.header {
  height: 6em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
  z-index: 1000;
  position: absolute;
  width: 100%;
  /* top: 0; */
  background: url(../img/svg/wave-header.svg);
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 768px;
  background-position: bottom;
  transform: translateY(-6em);
  animation: aniHeader 1s forwards;
  filter: grayscale(0);
  transition: filter 1s linear;
}
@keyframes aniHeader{
  0%{transform:translateY(-6em)}
  100%{transform:translateY(0)}
}

.content {}

.footer {
  height: 4em;
  background: transparent;
  margin: 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 400px;
  z-index: 0;
  transform: translateY(6em);
  animation: aniFooter 2s forwards;
}


@keyframes aniFooter{
  0%{transform:translateY(6em)}
  100%{transform:translateY(0)}
}@keyframes aniHeader{
  0%{transform:translateY(-6em)}
  100%{transform:translateY(0)}
}

label {
    display: block;
}

input , button.button-flat {
    border: none;
    font-size: 1em;
    width: 80%;
    padding: 1em 0em;
    text-align: center;
    outline: none;
    display: flex;
    margin-bottom: 1.2em;
    box-shadow: var(--border-shadow);
    align-items: center;
    justify-content: center;
    position: relative;
    font-weight: 100;
}

.input {
    text-align: center;
}
button.round {
    border-radius: 1.5em;
    height: 3em;
    min-width: 3em;
    padding: 0 1em;
}

button.actionbtn {
    position: absolute;
    top: -1.5em;
    left: calc(50% - 5em);
    width: 10em;
}

button {
    border: none;
    background: linear-gradient(-90deg, #5198f9, #3d7df6);
    box-shadow: 0px 5px 10px #498df8;
    cursor: pointer;
    color:white;
    font-family: 'Comfortaa',sans-serif;
}
input:active, input:focus {
    box-shadow: inset 0px 0px 6px 0px rgb(0 0 0 / 30%);
}
.topnav {
    height: 4em;
    width: 100%;
}

.avatar {
    position: absolute;
    width: 6em;
    height: 2em;
    margin-left: 1em;
    border-radius: 0;
    overflow: hidden;
    background: url(/app/img/logo/smartpool.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    top: .25em;
}

.steps li {
    display: flex;
    background: #ccc;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0;
}

ul.steps {
    display: flex;
    width: 75%;
    align-items: center;
    position: relative;
    background: linear-gradient(90deg,#ccc 0%, #ccc 50%, #ccc 100%);
    height: 5px;
    justify-content: space-between;
}

.steps li:after {
}

.steps li.active {background: #4f96f9;}
.wave {
	display: inline-block;
	border: .4em solid transparent;
	border-top-color: #3d7df6;
	border-radius: 50%;
	border-style: solid;
	margin: .1em;
}


.wifilevel-3 .wv4.wave,
.wifilevel-2 .wv4.wave,
.wifilevel-2 .wv3.wave,
.wifilevel-1 .wv4.wave,
.wifilevel-1 .wv3.wave,
.wifilevel-1 .wv2.wave,
.wifilevel-0 .wv4.wave,
.wifilevel-0 .wv3.wave,
.wifilevel-0 .wv2.wave,
.wifilevel-0 .wv1.wave {
	border-top-color: #bbb;
}
.wifilevel {
    transform: translateY(1em);
}
.io-slider {
    height: calc(5em + 12px);
    width: fit-content;
    overflow-x: auto;
    white-space: nowrap;
    padding: .5em;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    box-shadow: 0px 4px 5px rgba(0,0,0,0.3);
    z-index: 100;
    position: sticky;
    top: 0;
    background: #f0f0f0;
}

.io,.card {
    min-width: 5em;
    height: 5em;
    display: inline-flex;
    margin: .25em;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    border-radius: 7px;
    /* box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 20%); */
}

/* width */
::-webkit-scrollbar {
  height: 1px;
  width: 0px;
  overflow: hidden;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
  overflow:hidden;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #2196f3;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


.io p {
    width: 100%;
    text-align: center;
    font-size: .7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 2px;
    user-select: none;
}

.io span {
    background: #e91e63;
    position: absolute;
    height: .5em;
    width: .5em;
    top: .2em;
    right: .2em;
    border: 1px solid #f0f0f0;
    border-radius: .5em;
}
.topnav .icon {
    width: 1.2em;
    /* filter: invert(50%) sepia(29%) saturate(4257%) hue-rotate(160deg) brightness(100%) contrast(100%); */
    margin-right: 0.5em;
    position: absolute;
    top: -.7em;
    right: 0;
}

.cards {
    width: 95%;
    border-radius: 0;
    display: flex;
    flex-wrap: wrap;
}
.cards:last-child {
    margin-bottom: 10em;
}
.card {
    display: inline-block;
    min-height: 5em;
    padding: 5px;
    min-width: calc(33.33% - 3px - 1em);
    color: var(--color-1);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    width: calc(100% - 1em - 3px);
    background-color: var(--color-4);
    margin-bottom: 1em;
}

.card h5 {position: absolute;text-align: left;font-size: 1em;color: var(--color1);top: 1em;left: 2em;font-weight: 100;}

p.value {
    font-size: 1.4em;
    text-align: center;
}

.card .icon {
    filter: none;
}
.card.cl {
    background-image: linear-gradient(0deg,#c9932d,transparent), url(/app/img/bg/cl.jpg);
    background-size: cover;
    background-position: center;
}

.card.agua .icon {filter: brightness(0.6);}
.card.agua {
    background: linear-gradient(0deg,--color1,transparent), url(/app/img/bg/water.jpg);
    background-size: 110%;
    background-position-y: 50%;
    background-repeat: no-repeat;
    background-color: white;
    background-position-x: center;
    color: black;
    /* animation: 6s background-pan linear infinite; */
}

.card.weather {
    background-image: url(/app/img/clima/bg/2.jpg);
    animation: 50s ease-in-out infinite background-pan-v;
    background-size: 50%;
    background-position: left;
    background-color: black;
}
.card.climatizador .card-image {
    animation: 50s linear background-pan-h;
}

.card.climatizador p.value {
    font-size: .8em;
    width: calc(100% - 2.7em);
    text-align: left;
    left: 2.5em;
    position: relative;
    margin: 0;
}
@keyframes background-pan-v{

0%{background-position-y: 30%;}
50%{
    background-position-y: 80%;
    }
100%{background-position-y: 30%;}

}

@keyframes background-pan{

0%{background-position-x: center;}
33%{
    background-position-x: left;
}
66%{background-position-x: right;}

100%{
    background-position-x:center;
    }
}

.card .timer {
    position: absolute;
    bottom: 1em;
    left: 2em;
    width: 100%;
    text-align: left;
    font-size: 1em;
    font-weight: lighter;
    font-family: 'Azeret Mono',monospace;
}

.timer span[class^="timer-"] {
    font-size: 1em;
    margin: 0;
    padding: 0;
    display: inline-block;
    text-align: left;
    font-family: 'Azeret Mono',monospace;
    font-weight: 200;
}

.timer span.sep {
    font-size: .7em;
    margin: 0.1em;
    padding: 0;
}


.card p.target_temp {
    position: absolute;
    right: .5em;
    bottom: 0.1em;
    font-size: 1em;
    color: orangered;
    text-align: center;
    /* letter-spacing: -2px; */
}
.card .temp:after,.card .sensor-0:after {
    content:"º";
    font-size: 0.5em;
    position: absolute;
    transform: translateY(.2em);
}


.card p.sensor-0 {
    position: absolute;
    top: .5em;
    right: .75em;
    font-size: 1.5em;
    padding: 0;
    margin: 0;
    font-weight: bold;
    color: var(--color-info);
    /* letter-spacing: -3px; */
}
[class*='sensor'] span {
  /* font-size:.8em; */
}
[class*='sensor'] span:before {
   content:",";
    margin: 0 -.1em;
}


.card .icon.statusicon,.statusicon-blank {
    position: absolute;
    top: 1.5em;
    right: -1.3em;
    width: 2.6em;
    background-color: #8ec8ff;
    border-radius: 50%;
    height: 2.6em;
    background-size: 70%;
    box-shadow: 0 0px 0 3px white;
}
.card .icon.statusicon{background-color: var(--color-1);background-size: 70%;box-shadow: none;background-position: center;}

.card.stop {
    background: black;
    text-align: center;
}
.card.cam {
    width: calc(50% - 1em - 3px);
    height: auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
    min-width: 0;
    /* background-image: linear-gradient(90deg, white 12% ,yellow 12%,yellow 24%,cyan 24%,cyan 36%,lime 36%,lime 48%,magenta 48%, magenta 60%, red 60%, red 72%,blue 72%,blue 84%,  black 84%); */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.card.time {
    display: inline-flex;
    width: calc(50% - 1em - 3px);
}
/* SKIN */
.io{background: linear-gradient(0deg, #fdfaff 50%, #0e6cc463 50%);}

.slider-progress {
  background: #f0e5e5;
  position: relative;
  margin: 5px 0;
  text-align:left;
}

.slider-progress-bar {
  background: var(--color1);
  height: 2px;
  transition: width 400ms ease;
  width: 0;
  margin: 0;
}
.splide {
    margin: 0em auto 1em auto;
    padding: 0 !important;
    /* box-shadow: var(--inset); */
    min-height: 5em;
    min-width: 100%;
}
.splide__track {
    /* margin-top: 1em; */
}
.footer-left-btn {
    background: url(../img/svg/tab-btn-left.svg);
    height: 4em;
    width: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    /* filter: drop-shadow(0px 0px 6px black); */
}

.footer-right-btn {
    background: url(../img/svg/tab-btn-right.svg);
    height: 4em;
    width: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    /* filter: drop-shadow(0px 0px 6px black); */
}

.talk-btn {
    width: 4.2em;
    height: 4.2em;
    border-radius: 50%;
    background: #d7c0c07d;
    transform: translateY(-1em);
    backdrop-filter: blur(2px);
    box-shadow: 0px 3px 13px rgb(0 0 0 / 10%), inset 0 0px 1px white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
    cursor: pointer;
}

.talk-btn:before {
    width: 3em;
    content: "";
    height: 3em;
    display: flex;
    border-radius: 50%;
    z-index: 2;
    background: linear-gradient(-45deg, #cbd5e4, white);
    z-index: -1;
}

.talk-btn:after {
    width: calc(3em - 10px);
    content: "";
    height: calc(3em - 10px);
    background: url(../img/app/mic3.png);
    display: flex;
    position: absolute;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-size: 65%;
    background-color: var(--color1);
    background-position: center center;
}
.footer-right-btn:after {
    content: "";
    position: absolute;
    top: 1em;
    right: 0;
    height: 2em;
    background: url(/app/img/emergency.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 5em;
    filter: grayscale(1) brightness(4);
}
.card-image {
    width: 20%;
    height: 100%;
    background: url(/app/img/bg/climatizador.jpg) no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
}
.card-info {
    width: 80%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    color: black;
    display: flex;
    align-items: center;
}
.status-icon {
    width: 2em;
    height: 2em;
    display: block;
    position: absolute;
    bottom: 0;
    right: .1em;
    background-position: center;
    background-size: 65%;
    background-repeat: no-repeat;
    filter: brightness(0.5);
}
p.target_temp.temp:before {
    content: "CONFORT";
    font-size: .5em;
    letter-spacing: -1px;
    margin-right: .5em;
    display: flex;
    background: orangered;
    color: white;
    padding: 4px 4px 2px 2px;
    align-items: center;
    justify-content: center;
}

.footer-left-btn:after {
    content: "";
    position: absolute;
    top: 1em;
    left: 0;
    height: 2em;
    background: url(/app/img/user.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 5em;
    filter: grayscale(1) brightness(4);
}
.fade{
  animation: fadein 1s forwards linear;
}


@keyframes fadein {
  0%{opacity:0}
  100%{opacity:1}
}
.io .icon, .card .icon {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 2.5em;
    height: 2.5em;
    border-radius: 50%;
    background-size: 60%;
    /* background-color: #309f9f; */
    background-color: var(--color-1);
    backdrop-filter: blur(1px);
    box-shadow: 0 0 0 3px rgb(255 255 255 / 50%);
}



.io[class^="io rgb"] {
    background: linear-gradient(0deg,white 50%,#ffc10763 50%);
}
.io[class^="io addr"] {
    background: linear-gradient(0deg,white 50%,#d563b763 50%);
}
.current {
    color: var(--color1);
    position: absolute;
    bottom: 0;
    font-size: 2em;
}

.current_ph {
    position: absolute;
}

.conntext {
    font-size: .7em;
    position: absolute;
    left: 1.5em;
    top: 3em;
    padding-right: 3.2em;
    border-radius: 1em 0 0 1em;
    min-width: 10em;
    /* background: #d7c0c07d; */
    /* backdrop-filter: blur(1px); */
    /* box-shadow: 0 0 0 3px rgb(255 255 255); */
    /* background: white; */
    text-align: left;
    color: white;
}
.cards.last_child {
}

.card.levels {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    width: 10%;
    min-width: calc(25% - 3px - 1em);
    color: black;
    /* background: linear-gradient(0, white 4em, #0e6cc4 4em, #319f9f 100%); */
    height: 5em;
    background: var(--color-4);
    box-shadow: none;
}

.card.levels .icon {
    position: absolute;
    width: 2em;
    height: 2em;
    z-index: 10;
    top: 1.5em;
    background-color: var(--color-4);
    box-shadow: 0 0 0px 1px var(--color-4);
    background-size: 75%;
}

.card.levels .badge {
    width: 100%;
    height: 2.5em;
    position: absolute;
    top: 0;
    right: 0;
    background-size: 2em;
    background-repeat: no-repeat;
    background-position: center right;
}
.card.levels p.value {
    font-size: 1em;
    position: absolute;
    bottom: .5em;
    font-weight: bolder;
}

.card.levels .name {font-size: 0.7em;height: 2em;top: 5px;width: 100%;left: 5px;text-transform: lowercase;color: var(--color-4);}
.card.weather h5 {
    color: #868686;
    font-weight: 100;
    /* backdrop-filter: blur(2px); */
    width: 100%;
    position: absolute;
    top: .5em;
    /* background: #ffffff0f; */
    left: calc(50% + 1.5em);
    margin: 0;
    padding: .25em;
    /* box-shadow: 0 1px 0 0 rgb(255 255 255 / 20%),0px 0px 5px 0px rgba(0,0,0,0.2); */
    text-transform: lowercase;
}

.card.weather p.value {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: var(--color1);
    font-size: 2em;
}

.card.weather .icon {
    top: calc(50% - 1.25em);
    position: absolute;
    left: calc(50% - 1.25em);
    background-color: #762290;
    box-shadow: 0 0 0 4px var(--color-0);
}
.spacer {
    display: block;
    width: 100%;
    height: 8em;
}
.value span.unit {
    font-size: .6em;
    position: absolute;
    bottom: .5em;
}

.value span.val {
    font-size: 1.5em;
}
.icon .badge {
    position: absolute;
    top: -0.75em;
    right: -.75em;
    width: 2em;
    height: 2em;
    background: #309f9f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: .65em;
    background-size: 100%;
}
section.control {}

.moveLeft {
    transform: translate(100vw,0);
}
.moveBottom {
    transform: translate(0,100vh);
}.moveRight {
    transform: translate(-100vw,0);
}
.moveTop {
    transform: translate(0,-100vh);
}
.closebtn {
    position: absolute;
    display: block;
    top: 5em;
    left: 1em;
    z-index: 100;
    width: 2em;
    filter: invert(.5);
    height: 2em;
    background-size: contain;
    background-image: url(/app/img/close.png);
}
.sections {
    width: 100%;
    height: 100vh;
    position: absolute;
    overflow: hidden;
    /* top: 0; */
    /* left: 0; */
}
button span.icon {
    height: 2em;
    width: 2em;
    display: inline-block;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 5px;
}
button.bg-secondary {
    background: var(--bg-color-enfasis);
}
.secondary .closebtn {
    filter: none;
    max-width: 1.5em;
    max-height: 1.5em;
}

.secondary h3 {
    color: white;
    font-weight: 100;
}

.modal .closebtn {
    top: 1em;
}

.modal h3 {
}

.modal {
    z-index: 1000;
    padding-top: 2.5em;
    width: 95%;
    left: 2.5%;
    box-shadow: 0px -2px 5px -3px rgb(0 0 0 / 50%);
    padding-bottom: 5em;
}

.secondary .button-flat {
    box-shadow: none;
}
section.secondary {height: auto;bottom: 0;}

.secondary p {
}
.secondary input {
    box-shadow: none;
}
@keyframes translateToPosition{
  100{transform:translateY(0)}
}
.closebtn.prev {
    background-image: url(/app/img/prev.png);
}
.progress-climatizador {
    width: 50%;
    height: 1px;
    background: #eeeeee;
    position: absolute;
    bottom: -0.5em;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
}

.progress-bar {
    background: red;
    height: 5px;
    width: 0%;
    margin: 0;
    transition: width .2s ease-in-out;
}
.user-serial {
    height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    font-size: 1.5em;
    padding: 0 .5em;
    background: var(--color-2);
}

h3.user-serial:before {
    content: "cambiar serial";
    position: absolute;
    bottom: -1em;
    font-size: .5em;
}