.login-wrapper {
    height: 100dvh;
    background-image: url('/assets/bg.jpg');
    background-position: top center;
    background-size: cover;
    background-color: #421c0096;
    background-blend-mode: multiply;
}/*Wrapper del login*/

.login-wrapper .logo-container{
    background-color: #fff;
    padding: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-right-radius: 1rem;
    width: 70%;
}/*Contenedor del logo para login*/

.login-wrapper .logo-container .logo{
    width: 100%;
}/*Logo para login*/

.login-wrapper .login-form-wrapper{
    background-color: #fff;
    padding: 4rem 1.5rem;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
}/*Contenedor del formulario de login*/

.login-wrapper .login-form-wrapper .login-form h3{
    font-weight: 700;
    font-size: 1.7rem;
}/*Contenedor del formulario de login*/

.login-wrapper .login-form-wrapper .login-form .btn.btn-primary{
    width: 100%;
}/*Boton del formulario de login*/

label.form-label {
    color: #808080;
    color: #a2a2a2;
    font-weight: 300;
    margin-bottom: 5px;
    font-size: 0.8rem;
}/*Override de label de forms*/

input.form-control {
    line-height: 2.4rem;
    border-radius: 1rem;
}/*Override de inputs de forms*/

.btn.btn-primary {
    line-height: 2.4rem;
    border-radius: 1rem;
    background-color: #937532;
    border: none;
}/*Override de botones*/

.form-control:focus, .btn-primary:focus, .btn:focus, .btn:active:focus, .btn-primary:active:focus {
    border-color: #937532;
    box-shadow: 0 0 0 .25rem rgba(147, 117, 50, 0.45);
    border-width: 1px;
    border-style: dashed;
}/*Override de comportamiento de inputs*/

nav .nav-wrapper {
    box-shadow: 2px 4px 4px 1px rgba(0,0,0,.0549019608);
    background-color: #fff;
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
}/*Wrapper de la navegacion*/

nav .nav-wrapper .logo {
    width: 140px;
    height: fit-content;
}/*Logo*/

 nav .nav-wrapper .toggle{
     width: 50px;
 }/*Fix para evitar glictches*/

nav .nav-wrapper .toggle .icon {
    color: #937532;
    font-size: 1.7rem;
}/*Icono de hamburguesa*/

nav .nav-wrapper .user-wrapper .avatar {
    height: 50px;
    width: 50px;
    border-radius: 100%;
    border: 2px solid #937532;
}/*Imagen de usuario*/

aside {
    background-color: #937532;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100dvh;
    width: 100px;
    border-bottom-right-radius: 3rem;
    transition: all ease-in-out 0.3s;
    transform: translateX(-100px);
    z-index: 9;
}/*Navegación*/

aside.open{
    transform: translateX(0px);
}/*Navegación Abierta*/

aside .side-nav .side-menu .back-btn .icon,
aside .side-nav .side-menu .logout-btn .icon,
aside .side-nav .side-menu .nav-link .icon{
    color: #fff;
    font-size: 1.5rem;
}/*Botones de navegacion*/

aside .side-nav .side-menu .nav-link.active .icon{
    padding: 5px;
    border-radius: 15px;
    box-shadow: 2px 4px 4px 1px rgba(0,0,0,.0549019608);
}/*Variacion del active del menu*/

aside .side-nav .side-menu .nav-link.active .icon{
    color: #937532;
    background-color: #fff;
}/*Variacion del active del menu*/

aside .side-nav .side-menu .nav-link span{
   color: #fff;
}/*Labels de Botones de navegacion*/

body.body {
    height: 100dvh;
    background-color: #b9a5773b;
    overflow-x: hidden;
}/*Cuerpo del app*/

.scrollable-menu-wrapper{
    width: 100%;
}/*Menu de habitaciones*/

.scrollable-menu-wrapper nav.scrollable-menu .navigation{
    color: rgb(81, 81, 81);
    text-decoration: none;
    font-size: 1.3rem;
}/*Menu items de habitaciones*/

.scrollable-menu-wrapper nav.scrollable-menu .navigation.active{
    border-bottom: 3px solid #937532;
    color: #000;
}/*Menu items de habitaciones*/

.iot-device,
.iot-device-special {
    cursor: pointer;
    border-radius: 15px;
    box-shadow: 2px 4px 4px 1px rgba(0,0,0,.0549019608);
    background-color: #fff;
    padding: 1rem;
}/*Tarjetas de dispositivos*/


.iot-device span,
.iot-device-special span{
    color: #757575;
    font-size: 0.8rem;
}/*Tarjetas de dispositivos*/

.iot-device .icon,
.iot-device-special .icon{
    color: #000;
    font-size: 1.8rem;
}/*Tarjetas de dispositivos*/

.iot-device .icon-wrapper,
.iot-device-special .icon-wrapper
{
    height: 29px;
}/*Tarjetas de dispositivos*/

.iot-device p,
.iot-device-special p{
    color: #000;
    font-size: 1rem;
}/*Tarjetas de dispositivos*/

.icon-wrapper .icon{
    color: inherit;
}

.lights-on {
    color: #dfb81d;
}
#antares_heater .icon {
    color: #1eeade;
}

.heater-on .icon{
    color: #dd1616 !important;
}

.indicator.online {
    color: #44bb15;
}/*Indicador Online del dispositivo*/

.indicator.offline{
    color: #a2a2a2;
}/*Indicador Online del dispositivo*/

.indicator.in-use {
    color: #f8ee30;
}/*Indicador de uso del dispositivo*/

.iot-device.active {
    background-color: #937532;
}/*Tarjetas de dispositivos focus*/

.iot-device.active span, 
.iot-device.active p, 
.iot-device.active .icon {
    color: #fff;
}/*Tarjetas de dispositivos focus*/


.action-menu,
.weather-menu {
    position: fixed;
    background-color: #fff;
    box-shadow: 2px 4px 4px 1px rgba(0,0,0,.0549019608);
    bottom: 0;
    width: 100vw;
    left: 0;
    right: 0;
    padding: 1rem 1rem 4rem;
    border-top-right-radius: 2rem;
    border-top-left-radius: 2rem;
    transition: all ease-in-out 0.3s;
    transform: translateY(250px);
}/*Menu de acciones*/

.weather-menu {
    transform: translateY(400px) !important;
}

.action-menu.open,
.weather-menu.open{
    transform: translateY(0px) !important;
}/*Menu de acciones*/

.action-menu .close-actions,
.weather-menu .close-actions{
    width: 50px;
}/*Cerrar panel de acciones*/

.action-menu .close-actions .icon,
.weather-menu .close-actions .icon{
    color: #5b5b5b;
    font-size: 1.4rem;
}/*Icono para cerrar panel de acciones*/

.action-menu .label,
.weather-menu .label{
    color: #5b5b5b;
}/*Menu de acciones*/

.action-menu .device-name{
    color: #000;
    font-weight: 600;
    font-size: 1.5rem;
}/*Menu de acciones*/

.error-message span {
    background-color: #ffc0c0;
    width: 100%;
    display: flex;
    border-radius: 1rem;
    line-height: 2.4rem;
    padding: 10px;
    align-items: center;
}/*Mensaje de error*/

.weather .icon {
    font-size: 3rem;
}/*Icono de lluvia*/

.weather .icon.sunny,
.calendar .day .data-show .icon.sunny{
    color: #f1af1d;
}/*Icono de lluvia*/

 .weather .icon.rainy,
 .calendar .day .data-show .icon.rainy{
    color: #1671be;
}/*Icono de lluvia*/

.iot-device small {
    color: #8e8e8e;
    font-size: 0.68rem;
}/*Label de los devices*/

.qld p{
    font-size: 0.9rem;
}/*Calidad de aire*/


.calendar .day .data-show .icon.good {
    color: #28bb11;
}/*Calidad de aire*/

.qld .good {
    color: #28bb11;
    font-size: 0.9rem;
}/*Calidad de aire*/

.calendar .day .data-show .icon.warning {
    color: #e5c117;
}
/*Calidad de aire*/

.qld .warning {
    color: #e5c117;
    font-size: 0.9rem;
}/*Calidad de aire*/

.calendar .day .data-show .icon.bad {
    color: #e11c1c;
}/*Calidad de aire*/

.qld .bad {
    color: #e11c1c;
    font-size: 0.9rem;
}/*Calidad de aire*/

.card-container {
    border-radius: 15px;
    box-shadow: 2px 4px 4px 1px rgba(0,0,0,.0549019608);
    background-color: #fff;
    padding: 1rem;
}/*Card de historico*/

.dt-layout-row:nth-child(1) {
    display: flex !important;
}/*Barras de filtro del historico*/

.dt-length label{
    display: none;
}/*Label de data por vista*/

.dt-search label {
    display: none;
}/*Label de filtros*/

.dt-search {
    width: 260px;
}/*Barra de busqueda*/

.dt-search input {
    width: 100%;
}/*Barra de busqueda*/

#myTable tbody tr td:nth-child(1) {
    font-weight: 800 !important;
}/*Id de las placas*/

.dt-paging-button.current {
    background-color: #cabc9d !important;
}/*Id de las placas*/

.quick-action .icon {
    color: #937532;
}/*Color de los iconos de acciones*/

.calendar .day {
    border-right: 1px solid #937532;
    width: 65px;
    padding: 0 7px;
}/*Delimitadores del calendario*/

.calendar .day:last-child{
    border-right: none;
}/*Delimitadores del calendario*/

.calendar .day .day-name {
    color: #937532;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}/*Color del calendario*/

.calendar .day .data-show .icon {
    color: #5b5b5b;
}/*Color del calendario*/

.calendar .day .current-day{
    background-color: #937532;
    color: #fff;
    border-radius: 25px;
    padding: 3px;
}/*Current Day*/

.user-card {
    border-radius: 15px;
    box-shadow: 2px 4px 4px 1px rgba(0,0,0,.0549019608);
    background-color: #fff;
    padding: 1rem;
    cursor: pointer;
}/*Card de usuarios*/

 .user-card .profile-circle{
     background-color: #937532;
     color: #fff;
     border-radius: 25px;
     height: 35px;
     width: 35px;
 }/*Card del user*/

._addUser{
    height: 50px;
    width: 50px;
    position: absolute;
    bottom: 5px;
    right: 15px;
}/*Agregar un usuario*/