/**
* nomia.css
* v.0.0.1
* Felipe Lorente (Nomia Energy)
*
* CSS para plataforma Santra ME.
* En esta versión inicial incluye todo el css de los componentes utilizados en la aplicación
* En un futuro, dichos componentes incorporarán su propio css, separandolo de este archivo.
*
* COLORES PRINCIPALES
* #333 (gris)
* #fafafa (casi-blanco)
* #28A7E9 (azul secundario)
* #00c0ef (azul principal)
* #64ae3c (verde Nomia)
* #dd4b39 (rojo off)
*/
/*********************************************************************************************************************************
*                                                         FUENTES
*/

@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css?family=Raleway');

@font-face {
    font-family: "NewCicleSemi";
    src: url("../fonts/NewCicleSemi.ttf")
}

@font-face {
    font-family: 'Fontello';
    src: url("../vendor/fontello/font/fontello.ttf")
}

@font-face {
    font-family: 'Roboto-100';
    src: url("../fonts/Roboto-Thin.ttf")
}

@font-face {
    font-family: 'Roboto-300';
    src: url("../fonts/Roboto-Light.ttf")
}

@font-face {
    font-family: 'Montserrat';
    src: url("../fonts/Montserrat-Medium.ttf")
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url("../fonts/LibreBaskerville-Regular.ttf")
}

@font-face {
    font-family: 'Campus Simple';
    src: url("../fonts/CAMPUS_SIMPLE.ttf")
}

@font-face {
    font-family: 'Campus Light';
    src: url("../fonts/Campus\ Light.otf")
}

@font-face {
    font-family: 'Campus Bold';
    src: url("../fonts/Campus\ Bold.otf")
}

/*********************************************************************************************************************************
*                                                    VARIABLES
*/
:root {

    /* Colores de Fondo */
    /* linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg'),url(/assets/images/bg5.jpg); */
    --background-login: linear-gradient(354deg, rgba(72, 84, 97, 0.5), rgba(40, 49, 59, 0.5)), url(/assets/images/bg5.jpg);
    /* --background-login: url(/assets/images/bg5.jpg); */
    --background-app: linear-gradient(354deg, #485461 0%, #28313b 74%);
    --background-app-decreto: url();
    --background-preloader: linear-gradient(354deg, #485461 0%, #28313b 74%);
    /* Fuentes y colores principales */
    --font-principal: 'NewCicleSemi', 'Raleway', sans-serif;
    --font-secundaria: 'Monserrat', 'Arial', 'Lato';
    --font-terciaria: 'Roboto-100', 'Lato';
    --font-subtitle: 'Roboto-300', 'Lato';
    --color-principal: #28a7e9;
    /* --color-principal: #b860a5; */

    --color-secundario: #cacaca;

    --color-text: #fafafa;

    --color-hover: #485461;
    --color-tag: #fafafa;
    /* Colores del Login */
    --color-logo: rgb(40 49 59 / 73%);
    --color-login: #28313b;
    --color-text-logo: #fafafa;
    --color-text-sublogo: rgb(40, 167, 233);

    /* Colores del menu */
    --color-menu: rgb(40, 49, 59, 0.96);
    --color-border-menu: #485461;
    --color-menu-desplegable: #28313b;
    --shadow-menu: 0;
    --hover-menu: rgb(85, 88, 93);
    --hover-action: rgb(255 255 255 / 5%);
    /* --border-separador: 1px solid #485461; */
    --border-separador: 1px solid rgb(40 49 59 / 21%);
    --menu-select: #28313b;
    --color-icon-menu-select: #fff;

    /* Propiedades Panel FLotante */
    --background-panel-flotante: rgb(72 84 97 / 36%);
    --background-panel-elementos: rgb(72 84 97 / 36%);

    /* Propiedades del dashboard */
    --wrap-dashboard: 12px;
    --background-edicion: rgba(85, 85, 85, 0.31);
    /* Propiedades del Widget */
    /* --shadow-widget: 2px 2px 2px rgb(0 0 0 / 15%); */
    --shadow-widget: 0 6px 12px rgb(0 0 0 / 15%);
    --background-select: #28313b;
    --color-icon-widget: rgba(255, 255, 255, 0.1);
    --background-box: rgb(72 84 97 / 72%);

    /* Propiedades de los Paneles */
    --background-panel-zona: rgb(72 84 97 / 36%);
    --background-panel-zona-hover: rgba(21, 73, 119, 0.34);
    --background-panel-zona-abajo: rgb(72 84 97 / 36%);


    /* Propiedades de Soporte */
    --color-icon-soporte: #f3f3f346;
    /* --color-hover-panel: rgba(21, 73, 119, 0.34); */


    --color-border-input: 1px solid #485461;
    --color-placeholder: #ffffff6e;

    --color-bg: rgba(0, 0, 0, 0.5);
    --color-fondo: #485461;
    --background-gradient: linear-gradient(354deg, #485461 0%, #28313b 74%);

    --color-fondo-decreto: transparent;
    --color-fondo-login: rgba(0, 0, 0, 0.8);
    /* --color-alerta: linear-gradient(354deg, #485461 0%, #28313b 74%); */
    --color-alerta: #485461;
    --color-infoWidget: #999999;
    --color-infoWidget-trans: rgb(72 84 97 / 18%);
    --color-widget: rgb(72 84 97 / 72%);
    --color-widget-edicion: #195f9aab;
    --color-widget-hover: #2873b5ef;
    --color-card-hover: #00bfef56;
    --color-fondo-desplegables: #28313bed;
    /* --color-fondo-desplegables: rgb(72 84 97 / 72%); */

    /* --color-btn: #1F82B6; */
    --color-btn: var(--color-principal);
    --color-btn-text: #fafafa;
    --color-btn-border: #fafafa;
    /* --color-btn-error: #d9534f; */
    --color-btn-hover: #fafafa;
    --color-btn-text-hover: #1F82B6;
    --color-btn-border-hover: #1F82B6;
    --color-box-filters: rgb(72 84 97 / 36%);
    --color-icon-titulo: #ccc;

    /* --shadow-box: 2px 2px 2px rgb(0 0 0 / 15%); */
    /* --shadow-box: 0 6px 12px rgb(0 0 0 / 18%); */
    /* --shadow-card: 0; */
    /* --shadow-box: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    --shadow-card: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12); */
    --shadow-box: var(--shadow-widget);
    --shadow-card: var(--shadow-widget);
    --border-widget: 1px solid #28313b;


    /* Propiedades del textarea */
    --border-textarea: inherit;
    --background-textarea: rgb(0 0 0 / 20%);
    /* Propiedades de los border */
    --radio-box: 3px;
    --radio-boton: 3px;
    /* Propiedades cardOscuro */
    --background-cardOscuro: rgba(0, 0, 0, 0.8);
    /* Propiedades Usuario */
    --background-info-usuario: rgba(0, 0, 0, 0.27);
    /* Propiedades de Tabla */
    --background-tabla: rgb(72 84 97 / 72%);

    --background-tabla-odd: rgba(66, 70, 70, 0.7);
    /* Propiedades de Highchart */
    --color-ejeY: #666666;
    --background-grafica: rgba(0, 0, 0, 0.2);
    --color-shadow-grafica: #666666;
    --background-tooltip: rgba(0, 0, 0, 0.75);
    /* Propiedades del datePicker */
    --background-datepicker: rgba(0, 0, 0, 0.9);
    /* Propiedades Panel Contrato */
    --background-panel-contrato: rgb(72 84 97 / 36%);
    --border-table: #fffcfc30;
    /* Propiedades Comentario */
    --background-sistema-cabecera: rgb(143 133 91 / 50%);
    --background-privado-mensaje: rgb(83 113 138 / 50%);
    --background-sistema-mensaje: rgb(100 91 76 / 0.5);
    --background-privado-cabecera: rgb(51 122 183 / 0.5);
    --color-day-planning: #4dce4d;
    /* Rango 200 */
    --amarillo-200: #faed77;
    --naranja-oscuro-200: #ffab91;
    --naranja-200: #ffcc80;
    --ambar-200: #ffe082;
    --azul-200: #90caf9;
    --azul-claro-200: #81d4fa;
    --verde-200: #a5d6a7;
    --morado-200: #ce93d8;
    --rojo-200: #ef9a9a;
    --morado-oscuro-200: #b39ddb;
    --rosa-200: #f48fb1;
    --indigo-200: #9fa8da;
    --cyan-200: #80deea;
    --teal-200: #80cbc4;
    --verde-claro-200: #c5e1a5;
    --lima-200: #e6ee9c;
    --marron-200: #bcaaa4;
    --gris-200: #eeeeee;
    --gris-oscuro-200: #b0bec5;
    /* Rango 400 */
    --amarillo: #fdd835;
    --naranja-oscuro: #ff7043;
    --naranja: #ffa726;
    --ambar: #ffb300;
    --ambar-claro: #ffc35a;
    --azul: #42a5f5;
    --azul-claro: #4dd7ff;
    --azul-oscuro: #01579B;
    --verde: #66bb6a;
    --morado: #ab47bc;
    --rojo: #ef5350;
    --rojo-claro: #E57373;
    --morado-oscuro: #7e57c2;
    --rosa: #ec407a;
    --indigo: #9575CD;
    --cyan: #26c6da;
    --teal: #26a69a;
    --verde-claro: #0acf97;
    --lima: #d4e157;
    --marron: #8d6e63;
    --gris: #bdbdbd;
    --gris-oscuro: #78909c;

    --verde-oscuro-trans: #66bb6adb;
    --rojo-trans: #ef53502e;
    --teal-trans: #26a69a2e;
    --gris-oscuro-trans: #78909c2e;
    --azul-trans: #42a5f52e;
    --naranja-oscuro-trans: #ff70432e;
    --verde-trans: #66bb6a2e;
    --ambar-claro-trans: #ffc35a2e;
    --azul-claro-trans: #4dd7ff2e;
    --verde-claro-trans: #0acf972e;
    --rojo-claro-trans: #fa5c7c2e;
    --indigo-trans: #8ea1ff2e;
    --naranja-oscuro-trans: #ff70432e;
    --rosa-200-trans: #f48fb12e;

    --naranja-oscuro-200-trans: #ffab912e;
    --azul-claro-200-trans: #81d4fa2e;
    --verde-200-trans: #a5d6a72e;
    --rojo-200-trans: #ef9a9a2e;
    --indigo-200-trans: #9fa8da2e;

    --close-tag: #dde4eb;





    /* --color-online: #2e9c41;
    --color-offline: #F3734C; */
    /* --color-success: #028733;
    --color-error: #D3870E;
    --color-alarm: #d9534f; */
    --color-online: var(--verde);
    --color-offline: var(--naranja-oscuro);
    --color-success: var(--verde);
    --color-error: var(--naranja-oscuro);
    --color-alarm: var(--rojo);
    /* --color-btn: var(--azul-claro); */
    --color-btn-error: var(--rojo);


    /* --gear1: #D0EBFA;
    --gear2: #376888;
    --gear3: #d3d3d3; */
    --gear1: #f5f5f5;
    --gear2: #376888;
    --gear3: #cfd8dc;

    --color-0: #45A9AA;
    --color-1: #8c76ac;
    --color-2: #e6aa4b;
    --color-3: #A0BA73;
    --color-4: #C44C7A;
    --color-5: #2e98b6;
    --color-6: #83D06B;
    --color-7: #DC6E88;
    --color-8: #e68e84;
    --color-9: #C2CB63;
    --color-10: #CB6C48;
    --color-11: #DD78BB;
    --color-12: #5280BD;
    --color-13: #56BB6C;
    --color-14: #D3C663;
    --color-15: #d49e61;
    --color-16: #d0726d;
    --color-17: #77B361;
    --color-18: #607d8b;
    --color-19: #357b7b;

    /* --kpi-1: rgb(255 248 119);
    --kpi-2: rgb(138, 219, 242);
    --kpi-3: rgb(148, 221, 173);
    --kpi-4: rgb(233, 150, 95);
    --kpi-5: rgb(95, 133, 197);
    --kpi-6: rgb(109, 206, 122); */
    --kpi-1: rgb(255, 255, 153);
    --kpi-2: rgb(176, 226, 255);
    --kpi-3: rgb(170, 255, 195);
    --kpi-4: rgb(247, 201, 136);
    --kpi-5: rgb(123, 150, 231);
    --kpi-6: rgb(90, 193, 95);
    /* --kpi-6: rgb(165, 138, 103); */

    /* TIMELINE */
    --width-timeline: 12px;
    --width-line-timeline: 2px;
    --color-line-timeline: #ccd5db8c;
}

.theme-light {
    /* --color-principal: #b6b2b9;
    --color-secundario: #8300ef; */
    --font-secundaria: 'Monserrat', 'Arial', 'Lato';
    --color-secundario: #a9a9a9;
    --background-login: url("/assets/images/bmsbase.jpg");
    /* --background-app: url("/assets/images/bmsbase.jpg") fixed no-repeat center center; */
    --background-app: #fafbfe;
    --background-app-decreto: url("/assets/images/bmsbase.jpg") fixed no-repeat center center;
    --background-preloader: #ffffff;
    --color-widget: #ffffff;

    --color-titulo: #333333;
    /* --color-bg: #fafbfe;
    --color-fondo: #EEE; */
    --color-bg: transparent;
    --color-fondo: #fafbfe;

    /* --color-fondo: rgb(235 235 235); */
    --background-gradient: transparent;

    --color-fondo-decreto: transparent;
    --color-text: #6c6868;
    --border-table: #e1e5e5;
    /* --color-text: rgb(72 84 97 / 79%); */
    --color-hover: #ddddddfc;
    --color-placeholder: #ababab;


    --color-widget-hover: #fafafa;
    --color-text-logo: #28A7E9;
    --color-text-sublogo: #000;
    --color-icon: #1f82b657;
    --color-logo: #ffffff0a;
    --color-login: #ffffff;
    --color-btn-text: #ffffff;
    --border-widget: 1px solid rgba(0, 0, 0, .125);
    /* --shadow-box: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    --shadow-card: var(--shadow-box); */
    --shadow-box: var(--shadow-widget);
    --shadow-card: var(--shadow-widget);
    --color-infoWidget: #999;
    --color-infoWidget-trans: rgb(72 84 97 / 17%);
    --color-fondo-desplegables: #ffffff;
    /* --color-box-filters: #ffffff; */
    --color-box-filters: #ffffff;

    /* Colores del menu */
    --color-menu: #ffffff;
    --color-border-menu: rgba(0, 0, 0, 0.1);
    --color-menu-desplegable: rgba(250, 250, 250);

    --shadow-menu: 0;
    --hover-menu: rgb(247 247 247);
    --hover-action: rgb(0 0 0 / 5%);
    --border-separador: 1px solid rgba(0, 0, 0, 0.1);
    --menu-select: rgba(203, 203, 210, 0.15);
    --color-icon-menu-select: var(--color-secundario);
    /* Propiedades del textarea */
    --border-textarea: 1px solid #dadada;
    --background-textarea: #b5b5b517;
    /* Propiedades del dashboard */
    --wrap-dashboard: 12px;
    --background-edicion: transparent;
    --background-select: rgba(255, 255, 255, 1);
    /* Propiedades de los Paneles de Zonas */
    /* --background-panel-zona: #ffffff96; */
    --background-panel-zona: #ffffff;
    --background-panel-zona-hover: var(--color-widget);
    --background-panel-zona-abajo: var(--color-widget);

    /* Propiedades del Widget */
    --shadow-widget: 0 2px 2px rgb(0 0 0 / 15%);
    --color-icon-widget: rgba(0, 0, 0, 0.1);
    --background-box: #ffffff;
    /* --background-box: var(--color-widget); */
    --color-border-input: 1px solid rgba(200, 200, 200, 0.5);
    --color-alerta: rgba(255, 255, 255, 0.95);

    /* Propiedades Panel FLotante */
    --background-panel-flotante: #ffffff;
    --background-panel-elementos: #ffffff;
    /* Propiedades cardOscuro */
    --background-cardOscuro: rgba(255, 255, 255, 0.95);
    /* Propiedades de Soporte */
    --color-icon-soporte: #28a7e973;
    /* --color-hover-panel: #ffffff; */
    /* Propiedades Usuario */
    --background-info-usuario: transparent;

    /* Propiedades de Tabla */
    --background-tabla: rgba(255, 255, 255, 0.75);
    /* --background-tabla: rgba(150, 150, 150, 0.5); */
    --background-tabla-odd: rgba(200, 200, 200, 0.5);
    /* Propiedades de Highchart */
    --color-ejeY: #efe8e8;
    --background-grafica: rgba(255, 255, 255, 0.2);
    --color-shadow-grafica: #d0cece;
    --background-tooltip: #fafafa;
    /* Propiedades del datePicker */
    --background-datepicker: rgba(255, 255, 255, 0.9);
    /* Propiedades Panel Contrato */
    --background-panel-contrato: #fafafa;
    /* Propiedades Comentario */
    --background-sistema-cabecera: #fff9c4;
    --background-privado-mensaje: rgb(166 215 255);
    --background-sistema-mensaje: rgb(245 227 197 / 50%);
    --background-privado-cabecera: #bbdefb;
    --color-day-planning: var(--color-principal);
    /* Rango 500 */
    --amarillo-200: #ffee58;
    --naranja-oscuro-200: #ff7043;
    --naranja-200: #f5bd68;
    --ambar-200: #ffca28;
    --azul-200: #42a5f5;
    --azul-claro-200: #29b6f6;
    --verde-200: #83ec88;
    --morado-200: #ab47bc;
    --rojo-200: #ef5350bb;
    --morado-oscuro-200: #7e57c2;
    --rosa-200: #ec407a;
    --indigo-200: #5c6bc0;
    --cyan-200: #26c6da;
    --teal-200: #26a69a;
    --verde-claro-200: #9ccc65;
    --lima-200: #d4e157;
    --marron-200: #8d6e63;
    --gris-200: #bdbdbd;
    --gris-oscuro-200: #78909c;
    /* Rango 600 */
    --amarillo: #fdd835;
    --naranja-oscuro: #ff5722bb;
    --naranja: #ff9800;
    --ambar: #ffb300;
    --ambar-claro: #ff8d00;
    --azul-claro: #007ab5;
    --azul: #1e88e5bb;
    --verde: #43a047;

    --verde-trans: #43a0472c;
    --verde-oscuro-trans: #66bb6adb;
    --morado: #8e24aa;
    --rojo: #e53935;
    --rojo-claro: #e53935;
    --morado-oscuro: #5e35b1;
    --rosa: #d81b60;
    --indigo: #3949ab;
    --cyan: #00acc1;
    --teal: #00897b;
    --verde-claro: #56a700;
    --lima: #c0ca33;
    --marron: #6d4c41;
    --gris: #757575;
    --gris-oscuro: #546e7a;

    --rojo-trans: #e539352c;
    --rojo-claro-trans: #e53935;
    --teal-trans: #00897b2c;
    --gris-oscuro-trans: #546e7a2c;
    --azul-trans: #1e88e52c;
    --naranja-oscuro-trans: #ff57222c;
    --verde-trans: #43a0472c;
    --ambar-trans: #ffb3002c;
    --ambar-claro-trans: #ffc35a2e;
    --azul-claro-trans: #39afd12e;
    --verde-claro-trans: #0acf972e;
    --rojo-claro-trans: #fa5c7c2e;
    --indigo-trans: #3949ab2e;
    --naranja-oscuro-trans: #ff57222e;

    --naranja-oscuro-200-trans: #ff70432e;
    --azul-claro-200-trans: #29b6f62e;
    --verde-200-trans: #66bb6a2e;
    --rojo-200-trans: #ef53502e;
    --indigo-200-trans: #5c6bc02e;

    --color-online: var(--verde);
    --color-offline: var(--naranja-oscuro);
    --color-success: var(--verde);
    --color-error: var(--naranja-oscuro);
    --color-alarm: var(--rojo);
    /* --color-btn: var(--azul-claro); */
    --color-btn-error: var(--rojo);
    --close-tag: #6c7073;


    /* Rango 800 */
    /* --amarillo: #f9a825;
    --naranja-oscuro: #d84315;
    --naranja: #ef6c00;
    --ambar: #ff8f00;
    --azul: #1565c0;
    --azul-claro: #0277bd;
    --verde: #2e7d32;
    --morado: #6a1b9a;
    --rojo: #c62828; */
    --gear1: #bdbdbd;
    --gear2: #607d8b;
    --gear3: #9e9e9e;

    --color-0: #66cae5;
    --color-1: #bb9aed;
    --color-2: #ebc48a;
    --color-3: #d0f394;
    --color-4: #f696bb;
    --color-5: #8ebaba;
    --color-6: #abe599;
    --color-7: #f0a6b9;
    --color-8: #d281b9;
    --color-9: #cbcfa5;
    --color-10: #7aabea;
    --color-11: #78f293;
    --color-12: #D3C663;
    --color-13: #e68e84;
    --color-14: #c97f7b;
    --color-15: #bbe3ad;
    --color-16: #e4b4a4;
    --color-17: #e4d1bd;
    --color-18: #98afba;
    --color-19: #bedbdb;


    --kpi-1: var(--color-principal);
    --kpi-2: var(--color-principal);
    --kpi-3: var(--color-principal);
    --kpi-4: var(--color-principal);
    --kpi-5: var(--color-principal);
    --kpi-6: var(--color-principal);
    /* TIMELINE */
    --width-timeline: 12px;
    --width-line-timeline: 2px;
    --color-line-timeline: #0000003b;

}

.theme-dark {
    /* Colores de Fondo */
    --background-login: url(/assets/images/bg5.jpg);
    --background-app: url(/assets/images/bg6.jpg) fixed no-repeat center center;
    --background-app-decreto: url(/assets/images/bg6.jpg) fixed no-repeat center center;

    /* Fuentes y colores principales */
    --font-principal: 'NewCicleSemi', 'Raleway', sans-serif;
    --font-secundaria: 'Roboto-300', 'Lato';
    --font-terciaria: 'Roboto-100', 'Lato';
    --font-subtitle: 'Roboto-300', 'Lato';

    --color-principal: #28a7e9;
    /* --color-principal: #b860a5; */

    --color-secundario: #cacaca;

    --color-text: #fafafa;

    --color-hover: #666;
    --color-tag: #fafafa;
    /* Colores del Login */
    --color-logo: rgba(12, 12, 12, 0.8);
    --color-login: rgba(12, 12, 12, 0.9);
    --color-text-logo: #fafafa;
    --color-text-sublogo: rgb(40, 167, 233);

    /* Colores del menu */
    --color-menu: rgb(67, 69, 72);
    --color-menu-desplegable: rgb(67, 69, 72);
    --shadow-menu: 0;
    --hover-menu: rgb(85, 88, 93);
    --hover-action: rgb(255 255 255 / 5%);
    --border-separador: solid 1px #666666;
    --menu-select: #6b6969a6;
    --color-icon-menu-select: #fff;

    /* Propiedades Panel FLotante */
    --background-panel-flotante: #5a5a5a;
    --background-panel-elementos: rgba(56, 55, 55, 0.95);

    /* Propiedades del dashboard */
    --wrap-dashboard: 5px;
    --background-edicion: rgba(85, 85, 85, 0.31);
    /* Propiedades del Widget */
    --shadow-widget: 0;
    --background-select: rgb(68, 68, 68);
    --color-icon-widget: rgba(255, 255, 255, 0.1);
    --background-box: #505050ab;
    /* Propiedades de los Paneles */
    --background-panel-zona: rgba(0, 0, 0, 0.27);
    --background-panel-zona-hover: rgba(21, 73, 119, 0.34);
    --background-panel-zona-abajo: var(--color-widget);

    /* Propiedades de Soporte */
    --color-icon-soporte: #f3f3f346;
    /* --color-hover-panel: #337ab745; */

    --color-border-input: #dadada;
    --color-placeholder: #ffffff6e;

    --color-bg: rgba(0, 0, 0, 0.5);

    --color-fondo: rgba(0, 0, 0, 0.5);
    --background-gradient: transparent;

    --color-fondo-decreto: transparent;
    --color-fondo-login: rgba(0, 0, 0, 0.8);
    --color-alerta: #6b686885;
    --color-infoWidget: #999;
    --color-infoWidget-trans: rgb(72 84 97 / 18%);
    --color-widget: rgba(85, 85, 85, 0.76);

    --color-widget-edicion: #195f9aab;
    --color-widget-hover: #2873b5ef;
    --color-card-hover: #00bfef56;
    --color-fondo-desplegables: rgba(67, 69, 72, 0.8);
    --color-success: #028733;
    --color-error: #D3870E;
    --color-alarm: #d9534f;
    /* --color-btn: #1F82B6; */
    /* --color-btn: var(--color-principal); */
    --color-btn-text: #fafafa;
    --color-btn-border: #fafafa;
    /* --color-btn-error: #d9534f; */
    --color-btn-hover: #fafafa;
    --color-btn-text-hover: #1F82B6;
    --color-btn-border-hover: #1F82B6;
    --color-box-filters: rgba(66, 70, 70, 0.5);
    --color-icon-titulo: #ccc;
    /* --color-online: #2e9c41;
    --color-offline: #F3734C; */
    --shadow-box: 0 5px 15px rgb(0 0 0 / 50%);
    --shadow-card: 0;
    --border-widget: 1px solid #151622;

    /* Propiedades del textarea */
    --border-textarea: inherit;
    --background-textarea: rgb(0 0 0 / 20%);
    /* Propiedades de los border */
    --radio-box: 5px;
    --radio-boton: 5px;
    /* Propiedades cardOscuro */
    --background-cardOscuro: rgba(0, 0, 0, 0.8);
    /* Propiedades Usuario */
    --background-info-usuario: rgba(0, 0, 0, 0.27);
    /* Propiedades de Tabla */
    --background-tabla: var(--color-box-filters);
    --background-tabla-odd: rgba(66, 70, 70, 0.7);
    /* Propiedades de Highchart */
    --color-ejeY: #666666;
    --background-grafica: rgba(0, 0, 0, 0.2);
    --color-shadow-grafica: #666666;
    --background-tooltip: rgba(0, 0, 0, 0.75);
    /* Propiedades del datePicker */
    --background-datepicker: rgba(0, 0, 0, 0.9);
    /* Propiedades Panel Contrato */
    --background-panel-contrato: var(--color-box-filters);
    /* Propiedades Comentario */
    --background-sistema-cabecera: rgb(143 133 91 / 50%);
    --background-privado-mensaje: rgb(83 113 138 / 50%);
    --background-sistema-mensaje: rgb(100 91 76 / 0.5);
    --background-privado-cabecera: rgb(51 122 183 / 0.5);
    --color-day-planning: #4dce4d;

    --close-tag: #dde4eb;

    --color-0: #45A9AA;
    --color-1: #8c76ac;
    --color-2: #e6aa4b;
    --color-3: #A0BA73;
    --color-4: #C44C7A;
    --color-5: #2e98b6;
    --color-6: #83D06B;
    --color-7: #DC6E88;
    --color-8: #e68e84;
    --color-9: #C2CB63;
    --color-10: #CB6C48;
    --color-11: #DD78BB;
    --color-12: #5280BD;
    --color-13: #56BB6C;
    --color-14: #D3C663;
    --color-15: #d49e61;
    --color-16: #d0726d;
    --color-17: #77B361;
    --color-18: #607d8b;
    --color-19: #357b7b;

}

.napWhite {

    --background-login: url();
    --background-app-decreto: url();

    --background-app: url();
    --color-widget: #f7f7f7;
    --color-titulo: black;
    --color-bg: #fff;
    --color-fondo: #fff;
    --background-gradient: transparent;
    --color-fondo-decreto: #fff;
    --color-text: #999;
    --color-widget-hover: #fff;
    --color-text-logo: #28A7E9;
    --color-text-sublogo: #000;
    --color-icon: rgba(43, 113, 214, 0.5);
    --font-secundaria: 'Libre Baskerville', Helvetica, Arial, sans-serif;
    --font-terciaria: 'Roboto-300', 'Lato';
    --font-subtitle: 'Libre Baskerville', Helvetica, Arial, sans-serif;

    --shadow-box: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);

    --border-widget: 0px solid #EEEEEE;
    --font-especial: 'Campus Bold';
    /* Propiedades del dashboard */
    --wrap-dashboard: 13px;
    --background-edicion: transparent;
    --background-select: rgba(255, 255, 255, 1);
    /* Propiedades del Widget */
    --shadow-widget: 0 2px 2px rgb(0 0 0 / 15%);
    --color-icon-widget: rgba(0, 0, 0, 0.1);
    --background-box: var(--color-widget);
    /* Propiedades de Highchart */
    --color-ejeY: #efe8e8;
    --background-grafica: rgba(255, 255, 255, 0.2);
    --color-shadow-grafica: #d0cece;
    --background-tooltip: #fafafa;

}


/* .highcharts-container{
    height: 100% !important;
    width: 100% !important;

} */
.highcharts-credits {
    color: transparent !important;
    fill: transparent !important;

}

.highcharts-label.highcharts-tooltip span {
    font-family: var(--font-secundaria) !important;
    color: var(--color-text) !important;

}

g.highcharts-label.highcharts-tooltip>path:last-child {
    fill: var(--background-tooltip);
}

g.highcharts-label>text>*:first-child {
    fill: transparent !important;
    stroke: transparent;
    stroke-width: 0;
}

g.highcharts-label>text>*:last-child {
    font-family: var(--font-secundaria) !important;
    /* font-size: 14px !important; */
    font-weight: bold !important;
    fill: var(--color-text) !important;
    color: var(--color-text) !important;
    stroke-width: 0;
    font-weight: normal;

}

g.highcharts-legend-item-hidden path,
g.highcharts-legend-item-hidden rect {
    fill: transparent;
    stroke: transparent;


}

g.highcharts-grid.highcharts-yaxis-grid>path {
    stroke: var(--color-ejeY);
}

tspan {
    font-family: var(--font-secundaria);
}

g.highcharts-legend-item tspan {
    fill: var(--color-text);
}

.big rect.highcharts-background {
    fill: transparent;
}

.big rect.highcharts-plot-background {
    fill: transparent;

}

rect.highcharts-plot-border {

    stroke-width: 0;
}

rect.highcharts-plot-background.highcharts-shadow {
    stroke: var(--color-shadow-grafica);
}

#freshwidget-button {
    visibility: hidden;
}

button.ng-leave {
    animation: none !important;
}

button.ng-enter {
    animation: none;
}

.logo-santra {
    display: flex;
    width: 100%;

}

.logo-santra>div {
    display: flex;
    flex: 1;

}

.idioma {
    width: 100%;
    align-content: flex-end;
    justify-content: flex-end;
}

.idioma>#select {
    width: auto;
    max-width: 200px;
    padding-top: 8px;
}

.idioma>#select span.btn {
    background-color: transparent;
    border: none !important;
}

.politica {
    font-family: 'Open Sans', sans-serif;
    /* font-family: var(--font-secundaria); */
    font-size: 10px;
    margin-bottom: 10px;
    color: var(--color-placeholder);
}

.politica:hover {
    color: var(--color-principal);
    cursor: pointer;
}

.btn {
    margin: 8px;
}

.btn.disabled,
.btn[disabled],
.btn.disabled:focus,
.btn[disabled]:focus,
fieldset[disabled] .btn {
    opacity: 1 !important;
    background-color: var(--color-placeholder);
}

.btn:focus {
    color: var(--color-btn-text);
}

.btn.green {
    background-color: var(--verde);
}

.btn.green:hover {
    color: var(--verde);
}

.btn.orange {
    background-color: var(--naranja);
}

.btn.orange:hover>i {
    color: var(--naranja);
}

.agrupacion-botones {
    position: relative;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    padding-top: 47px;
    /* padding-top: 71px; */
}

.agrupacion-botones .btn {
    margin: 8px 0px;
    font-size: 13px;
}

.agrupacion-botones .legend.fixed {
    top: 26px !important;
    font-size: 14px !important;
    z-index: 1;
    /* margin-left: 30px; */
    margin-left: 0;
    color: var(--color-secundario);
}

.agrupacion-botones>.info {
    color: var(--color-principal);
    position: absolute;
    top: 24px;
    right: 24px;
}

.popover {
    background-color: var(--color-widget-hover);
    color: var(--color-text);
    text-align: center;
    border-radius: var(--radio-box);
    font-size: 12px;
    z-index: 9999;
}

.popover>.arrow {
    opacity: 0;
}

.controls-video:hover i {
    visibility: visible;

}

.controls-video {
    z-index: 9;
    position: absolute;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    bottom: 0px;
    padding: 2px;
    height: 100%;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /* background-color: rgba(0, 0, 0, 0.63); */
}

.controls-video i {
    color: var(--color-principal);
    margin: 5px;
    cursor: pointer;
    font-size: 90px;
    visibility: hidden;

}

/**
* Fuente NewCicle (Nomia CT)
*/

.cicle {
    font-family: 'NewCicleSemi', 'Raleway', sans-serif;
}

/* CSS para botón flotante en dispositivos moviles */
.floating-button {
    display: flex;
    /* position: absolute; */
    margin: 8px;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    min-width: auto;
    justify-content: center;
    align-items: center;
    background: var(--color-btn);
    color: var(--color-btn-text);
    font-size: 14px;
    border: 1px solid transparent;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    -webkit-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

.floating-button.ng-leave {
    -webkit-transition: all 0s ease-out;
    transition: all 0s ease-out;
}

/**
* Contenedor Principal de las vistas en Angular
* ngView
*/

.content-app {
    margin: 0;
    width: 100%;
}

.content-app.barra {
    padding-left: 50px;
}

/* .content-app.ng-enter{
    animation: 0.2s fadeIn ease-in-out;

} */

path.fa-secondary {
    color: var(--color-secundario);
}

path.fa-primary {
    color: var(--color-principal);
}

#tituloPagina {
    display: flex;
    display: -webkit-flex;
    min-height: fit-content;
    height: fit-content;
    align-items: center;
    flex-wrap: wrap;
    font-size: 18px;
    color: var(--color-text);
    font-family: var(--font-subtitle);
    padding: 10px;
}

#tituloPagina>.titulo {
    display: flex;
    flex: 1;
    display: -webkit-flex;
    min-height: fit-content;
    flex-wrap: wrap;
    align-items: center;
}

#tituloPagina>.opciones {
    display: flex;
    width: fit-content;

    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

#tituloPagina>.opciones>i {
    color: var(--color-principal);
    font-size: 15px;
    padding-left: 15px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#tituloPagina>.opciones>i:hover {
    cursor: pointer;
    font-size: 18px;
    color: var(--color-text);
}

#tituloPagina>.opciones #select {
    padding-top: 0;
}

#tituloPagina>.opciones #select span.btn {
    border: 0;
}

#tituloPagina .ref:hover {
    color: #27a6e8;
    cursor: pointer;

}

#tituloPagina .titulo span:first-child {
    font-size: 20px;
    /* color: var(--color-principal); */

}

#tituloPagina .titulo span:last-child {
    font-size: 20px;
    color: var(--color-principal);

}

#tituloPagina .titulo span {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    padding-left: 5px;

}

#tituloPagina svg {
    width: 16px;
    padding-left: 3px;
}

@media (max-width: 767px) {
    #tituloPagina {
        font-size: 12px;
    }

    #tituloPagina span:first-child {
        font-size: 14px !important;

    }

    #tituloPagina span:last-child {
        font-size: 14px !important;
    }

    #tituloPagina span {
        padding-left: 5px;

    }

    #tituloPagina svg {
        width: 10px;

        padding-left: 1px;
    }
}

/*********************************************************************************************************************************
 *                                                      CSS GENÉRICO
 */

html {
    /* height: 100%; */
    margin: 0;
    padding: 0;
    background-color: var(--color-text) !important;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif;

    font-weight: 400;
    font-size: 14px;
    /* height: 100%; */
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    cursor: default;
    min-width: 100%;
    color: var(--color-text);
    /* min-width: 100vh; */

}

h6 i {
    padding-right: 10px;
}

*:focus {
    /* outline: 0px auto -webkit-focus-ring-color !important; */
    outline: 0px !important;
}

iframe {
    border: 0;
}


/**
 * SCROLLBAR
 */

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: var(--radio-box);
    border: solid 1px #aaa;
}

::-webkit-scrollbar-button {
    background-color: transparent;
}

::-webkit-scrollbar-corner {
    background-color: #ddd;
}

@media (max-width: 800px) {
    ::-webkit-scrollbar {
        width: 2px;
        height: 2px;
    }
}

h2 {
    font-size: 30px;
    margin-bottom: 20px;
}

h3 {
    font-size: 18px;
}

.cero-padding {
    padding-left: 0px;
    padding-right: 0px;
}

.cero-padding-left {
    padding-left: 0px !important;
}

.cero-padding-right {
    padding-right: 0px !important;
}


/**
*Alineaciones
*/

.centered {
    text-align: center;
}

.righted {
    text-align: right;
}

.lefted {
    text-align: left;
}

.background-fondo {
    background-color: var(--color-fondo);
    min-height: 100vh;
}

.background-index {
    background: var(--color-fondo);
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-height: 100vh;
}

.row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 0;
    gap: 5px;
}

.column {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;

}

.column.left {
    align-items: flex-start;
}

.column.right {
    align-items: flex-end;

}

.column.center {
    align-items: center;

}

/* CSS para boton de volver */

.atras {
    width: 100%;
    color: var(--color-principal);
    font-size: 15px;
}

.atras span {
    color: var(--color-text);
    cursor: pointer;
    font-size: 18px;
    padding: 10px;
}

.atras span i {
    color: var(--color-principal);
}

.margin-bottom {
    margin-bottom: 15px;
}

#subtituloPagina {
    width: 100%;
}

#subTituloPagina h2 {
    /* font-family: 'Roboto-100', 'Raleway', 'Lato', sans-serif; */
    font-family: var(--font-secundaria);
    font-size: 28px;
    font-weight: normal;
    text-align: center;
    color: var(--color-titulo);
    text-align: right;
    font-family: var(--font-titulo);

    /* margin-top: 22px;
  margin-bottom: 22px;
  padding-top: 0px; */
}

#subTituloPagina h3 {

    font-family: var(--font-subtitle);
    font-weight: 300;
    font-size: 40px;
    text-align: center;
    color: var(--color-text);

}

#subTituloPagina h3 .icon {
    color: var(--color-principal);
}

#subTituloPagina h3 span {
    color: var(--color-principal);
}

#subTituloPagina h4 {
    /* font-family: 'NewCicleSemi', 'Raleway', 'Lato', sans-serif; */
    font-size: 25px;
    font-weight: normal;
    text-align: center;
    text-transform: capitalize;
    color: var(--color-principal);
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 0px;
}

#subTituloPagina h4 span {
    color: var(--color-icon-titulo);
}

#subTituloPagina h4 .icon {
    color: var(--color-principal);
}

.btn {
    background: var(--color-btn);
    border-radius: var(--radio-boton);
    color: var(--color-btn-text);
    font-size: 14px;
    min-width: 82.5px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);

}

/* .btn:focus {
    background: var(--color-btn);
    border-radius: var(--radio-boton);
    color: var(--color-btn-text);
} */

.btn:hover {
    background: var(--color-btn-hover);
    border-color: var(--color-btn-border-hover);
    color: var(--color-btn-text-hover);

}

.btn-danger {
    background-color: var(--color-btn-error);
    color: var(--color-btn-text);
}

.btn-warning {
    background-color: var(--naranja);
    color: var(--color-btn-text);
}

.btn-danger:focus,
.btn-danger:hover,
.btn-danger:active {
    background-color: var(--color-btn-text);
    color: var(--color-btn-error);
    border-color: var(--color-btn-error);
}

/* .btn-nota{
    background-color: var(--color-error);
    color: var(--color-btn-text);
} */

.btn.active i {
    color: var(--color-btn-text);
}

div #input {
    /* margin: 21px; */
    padding-top: 23px;
    padding-bottom: 5px;
    margin-bottom: 0;
    width: 100%;
}

div #input.coordenadas {
    padding-top: 10px;
    padding-bottom: 5px;
    width: 100%;
    max-width: 250px;

}

div #checkbot {
    /* margin: 21px; */
    padding-top: 23px;
    padding-bottom: 5px;
    margin-bottom: 0;
    width: 100%;
}

#checkbot label {
    color: var(--color-principal);
    display: flex;
    display: -webkit-flex;

    width: 100%;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-family: var(--font-principal);
}

#checkbot input {
    width: auto;
    margin: 8px;
    padding: 0;
}

#input input {
    border: 0;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    color: var(--color-text);
    font-size: 16px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    background: transparent;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    transform-origin: center;
    width: 100%;
    font-family: var(--font-secundaria);
}

#input input[type=number] {
    -moz-appearance: textfield;
}

#input input[type=number]::-webkit-inner-spin-button,
#input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* input[type="time"]::-webkit-calendar-picker-indicator {
    backg
} */

input[type] {

    outline: none !important;
    background-color: transparent;
    color: var(--color-text);
    border: 0;
    width: 100%;
}



.select-selected {
    background-color: DodgerBlue;
}

/* Style the arrow inside the select element: */
.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}

/* style the items (options), including the selected item: */
.select-items div,
.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
}

/* Style items (options): */
.select-items {
    position: absolute;
    background-color: DodgerBlue;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
    display: none;
}

.select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.input-group:focus-within {
    border-color: var(--color-principal);
    cursor: text;
}

.input-group {
    border-bottom: var(--color-border-input);
    width: 100%;
    padding-bottom: 2px;
    min-width: 114px;
}

#date-picker.input-group {
    border-bottom: 0;
}

#date-picker input:not(:disabled) {
    cursor: pointer;
}

#input .input-group-addon {
    padding: 0px;
    border: 0;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    z-index: 2;
    font-size: 16px;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    background: transparent;
}

#input .color-picker .input-group-addon {
    padding: 4px 12px;
    border-radius: var(--radio-boton);
}

#input .input-group>.info {
    color: var(--color-principal);
    position: absolute;
    top: -14px;
    right: 3px;
}

#select>.info {
    color: var(--color-principal);
    position: absolute;
    top: 13px;
    right: 2px;
}

/* SELECT FILTER */

#select .container-select {
    width: auto;
    width: fit-content;
    max-height: 500px;
    padding: 0;
    min-width: 100%;
    padding: 5px;
    width: 100%;
    transition: transform 0.2s ease-in-out;

}

#select span.btn.active i {
    color: var(--color-text);
}

#select span.btn.active i.disabled {
    color: var(--gris);
}

#select span.btn.active .icon {
    color: var(--color-principal);
}

.dropdown-menu {
    background: var(--background-select);
    padding: 0;
    /* min-width: 100%; */
}

#select .container-select .filter-select {
    height: 30px;
    width: 100%;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    background: var(--color-box-filters);
    border-bottom: var(--border-separador);
}

#select .container-select .filter-btn {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-box-filters);
    border-bottom: var(--border-separador);
}

#select .container-select .filter-btn>.btn {
    margin: 2px;
    width: 100%;
}


#select .container-select .filter-select #input {
    margin: 0;
    padding: 0;
    width: 100%;
}

#select .container-select .filter-select #input .input-group {
    border: 0;
}

#select span.btn>.icon,
#menu-select .btn .arrow {
    color: var(--color-principal);
    margin-right: 5px;
}

#select .container-select .filter-select #input .input-group-addon {
    padding-left: 4px;
}

#select .container-select .list-select {
    display: flex;
    display: -webkit-flex;


    flex-direction: column;
    max-height: 200px;
    overflow-y: auto;
}

#select .container-select .list-select li {
    padding: 3px 12px;
}

#select .container-select .list-select li>a {
    color: var(--color-text);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    text-decoration: none;
}

#select .container-select .list-select li>a>i {
    color: var(--color-principal);
    margin-right: 5px;
    /* -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; */
}

#select button span {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

#select button span::first-letter {
    text-transform: capitalize;

}

#select button::first-letter,
#select li::first-letter {
    text-transform: capitalize;

}

#select .container-select .list-select li:hover,
#select .container-select .list-select li:focus {
    background-color: #28A7E9;
    cursor: pointer;
    border-radius: var(--radio-box);
}

#select .container-select .list-select li:hover i,
#select .container-select .list-select li:focus i {
    color: var(--color-text);

}

@media (max-width: 500px) {
    #select .container-select {
        width: 100%;
    }
}

/*   SELECT ICONS */

#select .iconpicker-container {
    width: 343px;
    height: 300px;
    background: var(--background-select);
    padding: 0;
}

#select .iconpicker-container .filter-icon {
    height: 42px;
    width: 100%;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    background: var(--color-box-filters);
}

#select .iconpicker-container .filter-icon #input {
    margin: 0;
    padding: 0;
}

#select .iconpicker-container .list-icons {
    overflow-x: auto;
    height: 224px;
    margin-top: 5px;
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-left: 12px;
    padding-right: 12px;
}

#select .iconpicker-container .list-icons .icon {
    transition: .2s ease-in;
    width: 54.25px;
    height: 47.25px;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    border: var(--border-separador);
    border-radius: var(--radio-box);
    margin: 5px;
    cursor: pointer;
    box-shadow: var(--shadow-box);
    background-color: var(--color-widget);
}

#select .iconpicker-container .list-icons .padding-top {
    padding-top: 12px;
    width: 100%;
}

#select .iconpicker-container .list-icons .padding-bottom {
    padding-bottom: 12px;
    width: 100%;
}

#select .iconpicker-container .list-icons .icon:hover {
    transition: .2s ease-out;
    background-color: var(--color-widget);
    transform: scale(1.7);
    z-index: 10;
}

#select .iconpicker-container .list-icons .icon i {
    font-size: 18px;
    color: var(--color-text);
}

.container-select #select {
    min-width: max-content;
}

.input-group-addon i {
    color: var(--color-principal);
}

.legend {
    transition: .2s ease-out;
    position: absolute;
    top: .8rem;
    font-size: 16px;
    left: 0;
    cursor: text;
    color: var(--color-placeholder);
    margin-left: 3.2rem;
    z-index: 0;
    font-family: var(--font-secundaria);
}

.legend.textarea {
    margin-left: 0.9rem;
    color: var(--color-secundario) !important;

}

.legend.textarea>.icon {
    color: var(--color-principal);
}

#input input:focus {
    border-color: var(--color-principal);
    cursor: text;
}


#input input:focus~.legend,
#input input:not(.ng-empty)~.legend,
#input input:-webkit-autofill~.legend,
.legend.fixed {
    /* -webkit-transform: translateY(-97%);
  -ms-transform: translateY(-140%);
  transform: translateY(-120%), translateX(-20%); */
    top: -14px !important;
    font-size: 14px !important;
    margin-left: 4px;
    z-index: 1;
    color: var(--color-secundario) !important;
}

#input .color-picker .legend.fixed {
    top: -21px !important;
    font-size: 14px;
    margin-left: 12px;
    z-index: 1;
    color: var(--color-secundario);
}

#input .color-picker-input-wrapper.input-group {
    border: 0;
}

@-webkit-keyframes autofill {
    to {

        background: transparent;
        color: var(--color-text);
        font-size: 16px;
        font-family: var(--font-secundaria);

    }
}

input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;

}

/* #input input:focus~.input-group-addon,
input:not(.ng-empty)~.input-group-addon {
  border-color:  var(--color-principal) !important;
} */

#error-input {
    width: auto;
    text-align: left;
    position: initial;
    margin: 5px;
    line-height: normal;
    /* margin-left: 9px; */
    font-size: 12px;
    font-style: italic;
    color: var(--color-error);
    height: auto;
}

.has-success .input-group-addon {
    border-color: var(--color-success) !important;
}

.has-success .form-control {
    border-color: var(--color-success) !important;
}

.has-error .input-group-addon {
    border-color: var(--color-error) !important;
}

.has-error .form-control {
    border-color: var(--color-error) !important;
}

.has-success .form-control-feedback {
    color: var(--color-success) !important;
}

.has-error .form-control-feedback {
    color: var(--color-error) !important;
}

.has-feedback .form-control {
    padding-right: 12px;
}


/****************************************VISUAL MODALES ********************************************/


/* Aplica filtro blur a lo que tenemos de fondo*/

.modal-open .background-index {
    filter: blur(5px);
}

.modal-title {
    color: var(--color-text);
    margin-left: 7px;
}

.modal-title i {
    color: var(--color-principal);
}

.modal-content {
    background-color: var(--color-fondo-desplegables);
    border-radius: var(--radio-box);
    box-shadow: var(--shadow-box);
}

.modal-footer .btn+.btn {
    margin: 0;
}

.modal-backdrop {
    background-color: transparent;
}

div #input,
div #date-picker,
div .container-select {
    padding-left: 8px;
    padding-right: 8px;
}



.modal-body {
    color: var(--color-text);
}

.modal-body .textarea {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 30px;
    position: relative;
}

.modal-body .unidad {
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: flex-end;
    height: 52px;
    color: var(--color-principal);
}

.modal-body #select .dropdown-menu {
    left: 3%;
}

.modal-body .textarea .legend {
    font-size: 14px;
    color: var(--color-principal);
}

.modal-body textarea {
    resize: none;
    border-bottom: 0px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    padding: 10px;
    color: var(--color-text);
    width: 100%;
    background-color: var(--background-textarea);
    border-radius: var(--radio-box);
    border: var(--border-textarea);
}


/* .modal-body h4 {
  margin-left: 7px;
  font-size: 14px;
  color: var(--color-principal)
} */

.modal-body .posdata {
    margin-left: 7px;
    color: var(--color-error);
}

.modal-body .timeline-select #date-picker {
    padding: 0;
}

.modal-header,
.modal-footer {
    border: 0px !important;
}

.modal-footer .form-group {
    margin-bottom: 0px;
    position: relative;
}

.modal.ng-enter {
    animation: 0.7s slideInDown ease-in-out;
}

.modal.ng-leave {
    animation: 0.3s slideOutUp ease-in-out;
}

.modal-xl {
    width: 80%
}


/********************************************************************************************************************************************
*                                    PRELOADER APLICACIÓN (html incluido en la plantilla de loginLayout)
* Mover ese código a la página principal de la aplicación en caso de cambiar.
*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-preloader);
    z-index: 9999999;
    /* background-image: radial-gradient(circle closest-corner at 50% 20%, #313644, #4c4c56); */
}

#loader {
    width: 100vw;
    height: 100%;
    height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
}

#loading {
    width: 50%;
    height: 250px;
    margin-left: 25%;
    margin-right: 25%;
    background: url(../images/load.gif) no-repeat center 0;
    background-position: center center;
    background-size: 20%;
}


/************************************************************************************************************************************
*                                        PAGINA PRINCIPAL LOGIN APLICACIÓN (NCT_loginLayout)
* Portada página de entrada aplicación - login
*/

#background-login {
    min-height: 100%;
    min-height: 100vh;
    background: var(--background-login);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    /* background-color: #2D3238; */
    margin: 0;
    padding: 0;
}

#background-login .panel-form {
    display: flex;
    display: -webkit-flex;
    min-height: calc(100vh - 50px);
    justify-content: center;
    align-items: center;
}

#background-login .form {
    display: flex;
    display: -webkit-flex;
    /* position: relative; */
    flex-direction: row;
    width: 916px;
    min-height: 359px;
    margin: 0 15px;
    box-shadow: var(--shadow-box);
    animation: 0.8s fadeIn ease-in-out;
}

#background-login .form .logoClient {
    flex: 4;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    background-color: var(--color-logo);
    border-top-left-radius: var(--radio-box);
    border-bottom-left-radius: var(--radio-box);
}

#background-login .form .login {
    flex: 4;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    background-color: var(--color-login);
    border-top-right-radius: var(--radio-box);
    border-bottom-right-radius: var(--radio-box);
}

#background-login .form .logoClient img {
    margin: 15px;
    /* height: 130px; */
    /* NAVIDAD */
    /* height: 183px; */
}

/* #background-login .form .alert .mensaje {
    background-color: var(--color-alerta);
} */

#background-login .login-form {
    margin: 15px 35px;
    flex: 7;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
}

#background-login .build-info {
    width: 100%;
}

#form-login {
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    width: 349px;
}

#form-login .alert {
    position: absolute;
    bottom: 0;
    right: 0;
    width: fit-content;
    z-index: 99999;
    max-width: 650px;
}

#form-login .alert .mensaje {
    background-color: rgb(17 15 15 / 76%);
}

#form-login .mobile {
    display: none;
    top: 50px;
    right: 0;
    /* width: 50px;
    height: 50px; */
    font-size: 20px;

}

#form-login .form-group {
    padding-top: 25px;
}

#form-login .opciones {
    display: flex;
    color: #bababa;
    font-family: var(--font-secundaria);
    flex-direction: row;
    padding-left: 25px;
    padding-right: 12px;
}

#form-login .opciones>* {
    flex: 1;
    display: flex;
    align-items: center;
    /* animation: 0.5s fadeOut ease-in-out; */

}

#form-login .opciones .right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#form-login .opciones span:hover {
    color: var(--color-principal);
    cursor: pointer;
}

.fondo {
    /* min-height: 50vh; */
    background-color: var(--color-fondo);
    min-height: 100%;
    min-height: 100vh;
    background-image: var(--background-gradient);


}

@media (max-width: 767px) {
    #background-login .form .login {
        margin: 12px;
        border-radius: var(--radio-box);
        background-color: transparent;
    }

    .background-index {
        background: var(--background-app) !important;
    }

    #background-login .panel-form {
        border-radius: var(--radio-box);
        /* height: fit-content; */
        /* min-height: 100vh; */
        background: var(--color-box-filters);
    }

    #background-login .form {
        box-shadow: none;

    }

    #form-login .opciones span {
        display: none;
    }

    #form-login .mobile {

        display: flex;
    }

    #form-login .alert {
        position: relative;

    }
}

/**************************************************************************************************************************************
*                                                   FORMULARIO LOGIN (NCT_loginForm)
* Contenedor Principal formulario de login
* Banda negra semitransparente para resaltar sobre imagen
* de fondo.
* CSS para panel de login: layout login.layout.html y componente loginForm.
*/

#panel-login {
    background-color: var(--color-fondo);
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    height: 100%;
    height: 100vh;
}

#panel-login .login {
    /* background: linear-gradient(to bottom right, #2874b5a3, #464f56bf); */
    background-color: var(--color-fondo);
    min-height: 50px;

}

#panel-login h2 {
    /*#home-slider .caption h2 span {*/
    margin-top: 0;
    padding-top: 0;
    font-size: 20px;
    color: var(--color-text);
}

#panel-login h2 span {
    /*#home-slider .caption h2 span {*/
    margin-top: 0;
    padding-top: 0;
    font-size: 20px;
    color: var(--color-principal);
}

#panel-login .btn {
    margin-top: 22px;
    width: 130px;
    height: 40px;
    /* padding-top: 8px; */
    margin-bottom: 22px;
}

#panel-login #form {
    margin-top: 20px;
    margin-bottom: 20px;
}


/*************************************************************************************************************************************
*                                           INFORMACIÓN DE BUILD (NCT_buildInfo)
* Css para mostrar info de release de la aplicación
* build x, fecha, by Nomia CT
*/

#build {
    font-family: 'Open Sans', sans-serif;
    /* font-family: var(--font-secundaria); */
    font-size: 10px;
    margin-bottom: 5px;
}

#build a {
    color: var(--color-placeholder);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    text-decoration: none;
}

#build a:hover {
    color: var(--color-principal);
}


/*****************************************************************************************************************************************
*                                                   LOGO NOMIA CSS (NCT_logoNomia)
* requiere de imagen logoCabeceraSimple.png ó logoCabeceraSimpleNM.png (sin margen superior)
*/

.padding-cero {
    padding: 0px !important;
}

#NomiaEnergy {
    width: 100%;
    padding: 0px;
}

#NomiaEnergy img {
    float: right;
    margin-right: 0px;
    padding-right: 50px;
}

#NomiaEnergy h3 {
    text-align: left;
    color: var(--color-principal);
    margin-left: -40px;
    line-height: 100%;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 40px;
    /* font-family: 'NewCicleSemi', 'Raleway', sans-serif; */
    font-family: var(--font-principal);
    text-transform: none;
}

#NomiaEnergy p {
    color: var(--color-principal);
    margin-left: -40px;
    margin-top: -8px;
    padding-top: 0;
    margin-bottom: 40px;
    line-height: 100%;
    font-size: 14px;
    /* font-family: 'Raleway', sans-serif; */
    font-family: var(--font-secundaria);
    text-transform: none;
    /*letter-spacing: 1.90px;*/
    /*Para Raleway*/
    letter-spacing: 7.5px;
    /*Para NewCicle*/
}


/*****************************************************************************************************************************************
*                                                   LOGO SANTRA CSS (NCT_logoSantra)
* requiere de imagen logoCabeceraSimple.png ó logoCabeceraSimpleNM.png (sin margen superior)
*/

#Santra {
    width: 100%;
    padding: 0px;
}

#Santra img {
    float: right;
    margin-right: 0px;
    padding-right: 40px;
}

#Santra h3 {
    text-align: left;
    color: var(--color-text);
    margin-left: -40px;
    line-height: 100%;
    padding-left: 0;
    padding-top: 10px;
    margin-bottom: 0;
    /*font-size: 45px; /*para NewCicle*/
    font-size: 40px;
    font-family: var(--font-principal);

    text-transform: none;
}

#Santra p {
    color: var(--color-principal);
    margin-left: -25px;
    margin-top: -7px;
    padding-top: 0;
    margin-bottom: 40px;
    line-height: 100%;
    font-size: 14px;
    font-family: var(--font-principal);
    text-transform: none;
    letter-spacing: 0.30px;
    /*Para NewCicle*/
}


/**************************************************************************************************************************************
*                                                   ALERTAS (NCT_alertas)
* CSS para formato de alertas
* base bootstrap 3
*/
.gestor-alertas {
    position: fixed;
    bottom: 0;
    left: 0;
    max-width: calc(100vw - 50%);
    height: fit-content;
    z-index: 999999;
    /* background-color: var(--color-shadow-grafica); */
    border-radius: var(--radio-box);
    transition: width 0.5s ease-in-out;
    /* display: flex;
    flex-direction: column-reverse; */

}

.alert {
    /* font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
    font-size: 0.9em;
    display: flex;
    display: -webkit-flex;

    flex-wrap: nowrap;
    min-height: 57px;
    align-content: center;
    justify-content: center;
    padding: none;
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 2px;
    position: relative;
    animation: 0.5s lightSpeedInLeft ease;

}

.alert.ng-enter {
    animation: 0.5s lightSpeedInLeft ease;

}

.alert.ng-leave {
    animation: 0.5s lightSpeedOutLeft ease;
}

.alert .circle {
    background-color: var(--color-tag);
    border-radius: 60px;
    margin: 0;
    padding: 0;
    z-index: 78;
    position: relative;
    left: 0px;
    width: 21px;
    height: 20px;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
}

.alert .icon {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    flex-basis: 30px;
    border-bottom-left-radius: var(--radio-box);
    border-top-left-radius: var(--radio-box);
    position: relative;
    width: 50px;
}

.alert .mensaje {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;
    width: 100%;
    transition: width 0.5s ease-in-out;

    flex-direction: column;
    justify-content: center;
    padding-left: 15px;
    padding-top: 15px;
    background: var(--color-alerta);
    color: var(--color-text);
    /* #35526b; */
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    border-bottom-right-radius: var(--radio-box);
    border-top-right-radius: var(--radio-box);
}

.alert .close {
    color: var(--color-text);
    /* position: inherit; */
    text-align: right;
    right: 0;
    margin-right: 10px;
    margin-top: -10px;
}

.alert .info {
    font-size: 14px;
    margin-right: 21px;
}

.alert .addInfo {
    font-size: 12px;
    margin-right: 21px;
}

.alert .icon i {
    font-size: 15px;
}

.alert.alert-danger .icon {

    background-color: var(--color-alarm);
}

.alert.alert-danger i,
.alert.alert-danger h4 {
    color: var(--color-alarm);
}

.alert.alert-success i,
.alert.alert-success h4 {
    color: var(--color-success);
}

.alert.alert-success .icon {
    background-color: var(--color-success);
}

.alert.alert-warning i,
.alert.alert-warning h4 {
    color: var(--color-error);
}

.alert.alert-warning .icon {
    background-color: var(--color-error);
}

.alert.alert-info i,
.alert.alert-info h4 {
    color: var(--color-principal);
}

.alert.alert-info .icon {
    background-color: var(--color-principal);
}


/************************************************************************************************************************************
*                    VISUALIZACIÓN DEL MAPA DE LAS INSTALACIONES APLICACIÓN (NCT_visualMaps)
*/

#general-maps {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
}

#general-maps .panel-izquierdo {
    flex: auto;

}

#general-maps .panel-busqueda .input-group {
    border: 0;
}

#general-maps .panel-derecho {
    display: flex;
    min-width: fit-content;
    max-width: fit-content;
}

#general-maps #subtituloPagina {
    height: 50px;
}

#general-maps #subtituloPagina.ng-enter {
    animation: 0.7s slideInRight ease;
}

#general-maps h3 {
    padding: 5px 5px;
    margin: 0;
    font-size: 34px;
}

#general-maps .panel-busqueda {
    width: 350px;
    background-color: var(--background-panel-elementos);

}

#general-maps .panel-busqueda .panel-filtros {
    padding: 0;
    background-color: var(--background-panel-elementos);

}

#general-maps .box-add {
    background: var(--background-box);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    display: flex;
    flex-direction: column;
    padding: 8px;
    margin: 8px;
    justify-content: center;
    /* align-items: center; */
    margin-top: 23px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#general-maps .box-add:hover {
    cursor: pointer;
    background-color: var(--color-hover);

}

#general-maps .box-add>div {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    /* justify-content: center; */
    align-items: center;
    color: var(--color-text);
}

#general-maps .box-add .titulo {
    font-size: 18px;
}

#general-maps .box-add .descripcion {

    color: var(--color-secundario);
}

#general-maps .box-add .descripcion span {

    font-size: 12px;
}

#general-maps .box-add>div>span {
    flex: 1;

}

#general-maps .box-add>div>i {
    color: var(--color-principal);
    width: fit-content;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

.visual-map {
    /* border: 1px solid var(--color-placeholder); */
    height: calc(100% - 50px);
    height: calc(100vh - 50px);
    width: 100%;
}

.controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); */
    box-shadow: 0;
}

/* .controls.ng-enter{
    animation: 0.5s fadeIn ease-in-out;
} */
#pac-input {
    background-color: var(--color-fondo-desplegables) !important;
    font-family: 'Roboto-100';
    color: var(--color-text);
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    border-radius: var(--radio-box);
    box-shadow: var(--shadow-menu);
}


#pac-input::placeholder {
    color: var(--color-text)
}

.pac-container {
    background-color: var(--color-fondo-desplegables) !important;
    font-family: var(--font-secundaria);

}

.pac-item {
    color: var(--color-secundario);
}

.pac-item:hover {
    background-color: var(--color-btn-text-hover) !important;
}

.pac-item-query {
    color: var(--color-text)
}

.pac-logo:after {
    content: inherit !important;
    height: 0;
    padding: 0;
}

@media (max-width: 744px) {

    #general-maps .panel-busqueda {
        display: none;
    }

    #general-maps.list .panel-izquierdo {
        display: none;
    }

    #general-maps.list .panel-derecho {
        max-width: none;
        width: 100%;
    }

    #general-maps.list .panel-busqueda {
        width: 100%;
        display: flex;
    }

    #general-maps.list .mobile {
        display: flex;
    }
}

/************************************************************************************************************************************
*   COMPONENTE WIDGET RESPONSIVE PARA MOSTRAR DATOS TIPO NORMAL Y GAUGE
*/

#widget {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex: 1;
    flex-wrap: wrap;
    flex-basis: 20%;
    /* min-height: 145px; */
}

#componente .load {
    width: 100px;
    height: 100px;
}

#componente .one {
    left: 47px;
    top: 59px;
    width: 20px;
    height: 20px;
    /* animation: spin-reverse 5s infinite; */
}

#componente .two {
    left: 6px;
    width: 50px;
    height: 50px;
    /* z-index: -2; */
    /* animation: spin 5s infinite; */
}

#componente .three {
    top: -36px;
    left: 64px;
    width: 30px;
    height: 30px;
    /* animation: spin 5s infinite; */
}

#widget.edit {
    flex-basis: 100%;
}

#widget .panel {
    flex: 1;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    background: var(--color-widget);
    color: var(--color-text);

    border: 1px solid #151622;
    min-height: 140px;
    margin: 1.5px;
    position: relative;
    min-height: 174px;
    min-width: 281px;
}

#widget .panel.add {
    background: var(--color-widget-edicion);
}

#widget .panel.addWidget {
    background: transparent;
    padding: 15px 15px;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    flex-wrap: wrap;
    border: 0;
}

#widget .panel.addWidget .titulo {
    margin-top: 25px;
    font-size: 23px;
    color: var(--color-text);
    text-align: center;
}

.budget #widget .panel.addWidget .titulo {
    margin: 0;
    padding: 15px;
}

#widget .panel.addWidget .subTitulo {
    margin-top: 25px;
    font-size: 16px;
    color: var(--color-principal);
    /* text-align: center; */
}

#widget .panel.addWidget .subTitulo i {
    color: var(--color-text);
}

#widget .panel.addWidget .datos {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    padding: 10px 0 0 0;
    position: relative;
    background-color: rgba(85, 85, 85, 0.37);
    padding-bottom: 24px;
}

#widget .panel.addWidget .datos .borrar {
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    color: var(--color-btn-error);
    display: flex;
    display: -webkit-flex;

    position: absolute;
    font-size: 16px;
    top: 0;
    right: 0;
    margin: 8px;
}

#widget .panel.addWidget .datos .borrar .icon {
    cursor: pointer;
}

#widget #input {
    max-width: 250px;
    min-width: 250px;
}

#widget .panel.addWidget .datos>div {
    /* margin: 0 5px; */
    flex-basis: 20%;
}

#widget .panel.add:hover {
    cursor: pointer;
    background: var(--color-widget);
}

#widget .panel .infoWidget {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 4px 10px;
    color: var(--color-infoWidget);
}

#widget .grafica-widget {
    margin-bottom: 20px;
    min-width: 312px;
}

#widget .box-data {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    margin-left: 5px;
    margin-right: 5px;
    width: 100%;
    border: 0 !important;
    /* min-height: 100px; */
}

#widget .box-data>.head {
    flex: 1;
}

#widget .box-data>.head h5 {
    font-family: var(--font-principal);
    text-align: left;
    font-size: 1.8rem;
    margin-left: 5px;
    text-align: center;
    margin-right: 5px;
    display: block;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    padding-bottom: 1px;
    font-weight: 500;
}

#widget .box-data>.panel-icon {
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    color: var(--color-icon-widget);
    position: absolute;
    right: 0;
    bottom: 0;
}

#widget .panel .descripcion {
    position: absolute;
    bottom: 0px;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    color: var(--color-secundario);
    background-color: rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 33px;
}

.panel {
    box-shadow: none;
}

.panel #tabla {
    font-size: 14px;

}

.panel #tabla span {
    height: auto;
}

.panel #tabla span {
    font-size: 1em;
}

.panel #tabla span.unidad {
    font-size: 0.8em;
}

/*
.panel #tabla tbody>tr>td{
    padding: 10px !important;
} */
.panel #tabla tbody>tr>td:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.panel #tabla tbody>tr>td:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.panel.tabla #tabla .table,
.panel.estados #tabla .table {
    grid-template-columns: auto auto;
}

.panel.logs #tabla .table {
    grid-template-columns: 135px auto auto auto;

}

.panel.tabla #tabla tbody>tr>td,
.panel.estados #tabla tbody>tr>td,
.panel.logs #tabla tbody>tr>td {
    background-color: none;
}

/* widget#componente .error {
    border: 1px solid red;
    border-radius: var(--radio-box);
} */

.panel-edicion {
    font-family: var(--font-secundaria);
    font-size: 14px;
    display: flex;
    display: -webkit-flex;
    /* cursor: pointer; */
    margin-top: 25px;
    align-items: flex-end;
    justify-content: flex-end;
}

.panel-edicion .punto.panel.error {
    border-color: var(--color-error);
}

.panel-edicion .theme-widget {
    padding-top: 12px;
    position: relative;
}

.panel-edicion .theme-widget>span {
    color: var(--color-principal);
}

.panel-edicion i {
    /* cursor: pointer; */
    margin: 0 5px;
}

.panel-edicion .delete,
#general-alarmas .delete {
    color: var(--color-btn-error) !important;
}

.panel-edicion .edit,
#general-alarmas .edit {
    color: #E88B4B !important;
}

.panel-edicion .clone {
    color: var(--color-principal);
    /* margin-left: 5px; */
}

.panel-edicion .panel-titulo {
    display: flex;
    display: -webkit-flex;
    min-height: fit-content;
    padding-top: 27px;
    padding-left: 27px;
}

.panel-control button {
    margin: 8px;
}

.panel-control {
    display: flex;
    display: -webkit-flex;

    margin-top: 5px;
    margin-bottom: 5px;
    align-items: flex-end;
    justify-content: flex-end;
}

.panel-widget {
    /* -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; */
    color: var(--color-btn-error);
    position: absolute;
    margin: 5px;
    right: 0;
    top: 0;
}

.anadir-widget {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    flex-basis: 100%;
    flex-wrap: wrap;
}

#widget .panel-widget.add {
    color: var(--color-principal);
}

.panel-widget>.icon {
    font-size: 1.8rem;
    cursor: pointer;
    margin-left: 14px;
}

.panel-widget {
    margin-left: 5px;
    display: flex;
    display: -webkit-flex;

}

.panel-widget .delete {
    color: var(--color-btn-error);
    /* margin-left: 5px; */
}

.panel-widget .clone {
    color: var(--color-principal);
    /* margin-left: 5px; */
}

.panel-widget .ampliar {
    color: var(--color-principal);
}

.panel-widget .edit {
    color: #E88B4B;
}

.panel-widget.button.flotante {
    position: fixed;
    z-index: 999999999;
    bottom: 0;
    right: 0;
    /* background-color: var(--color-fondo-desplegables); */
    padding-right: 12px;
    padding-bottom: 12px;
    /* width: 100%; */
    display: flex;
    display: -webkit-flex;

    justify-content: flex-end;
    margin: 0;
}

.panel-widget.button.flotante button {
    margin-right: 12px;
    /* font-size: 2.8rem; */
}

#widget .box-data>.panel-icon>.icon {
    font-size: 11rem;
}

#widget .valor {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex: 2;
    z-index: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    /* min-height: 80px; */
}

#widget .valor>.dato {
    font-family: var(--font-principal);
    font-size: 5rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#widget .valor>.dato span {
    font-size: 2rem;
    font-family: var(--font-secundaria);
    padding-left: 14px;
}

#widget .gauge {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    /* margin-bottom: 5px; */
}

#widget .gauge>div {
    min-height: 124px;
}

#widget .gauge span {
    font-size: 4rem;
    line-height: inherit !important;
    margin-top: 49px !important;
    /* font-family: 'NewCicleSemi', 'Raleway', sans-serif; */
    font-family: var(--font-secundaria);

}

#addWidget {
    align-items: center;
    justify-content: center;
    /* background: var(--color-widget); */
    border: 1px solid #151622;
    min-height: 140px;
    margin: 10px;
    background: #383c40cc;
}

#widget .addOperation {
    margin: 15px;
    color: var(--color-text);
    width: 100%;
}

#widget .isOperation input[type=checkbox] {
    margin: 0;
}

#widget .isOperation {
    padding-bottom: 10px;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
}

#widget .isOperation span {
    margin-left: 5px;
    font-size: 12px;
}

#widget .punto {
    width: 100%;
}

#widget .btn.add {
    margin-top: 25px;
}

#widget .modos {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
}

#widget .modo {
    display: flex;
    display: -webkit-flex;

    font-size: 15px;
    color: var(--color-text);
    align-items: center;
    justify-content: center;
    padding: 5px;
}

#widget .modo span {
    margin-left: 5px;
    margin-top: 1px;
}

@media (min-width: 767px) and (max-width: 854px) {


    .visual-map {
        height: calc(100% - 152px);
        height: calc(100vh - 152px);
    }
}

@media (min-width: 0px) and (max-width: 767px) {
    .modal-dialog {
        margin: 0;
    }

    #subTituloPagina h3 {
        font-size: 22px;
    }

    #widget .panel.addWidget .datos>div {
        flex-basis: 100%;
    }

    #widget .panel-widget {
        margin: 1px;
    }

    #widget #input {
        max-width: 100%;
    }

    .panel-widget.button.flotante {
        padding: 5px;
        justify-content: center;
        width: 100%;
    }

    .panel-widget.button button {
        margin: 5px;
    }

    .visual-map {
        height: calc(100% - 100px);
        height: calc(100vh - 90px);
    }



    #general-maps #subtituloPagina {
        height: 34px;
    }
}


/************************************************************************************************************************************
*                                        PAGINA CONTROL APLICACIÓN (NCT_visualControl)
*/

#general-control {
    font-family: var(--font-terciaria);
    margin-left: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-left: 50px;
    width: 100%;

}



#general-control.editTV .datos-grupo {
    display: flex;
    display: -webkit-flex;

    flex-wrap: wrap;
}

#general-control #select .dropdown-menu {
    top: 89%;
}

#general-control .addGrupo {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    width: 100%;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    flex-wrap: no-wrap;
}

#general-control .addGrupo .titulo h3 {
    background: var(--color-fondo-desplegables);
    font-size: 2rem;
    text-align: left;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    border-radius: var(--radio-boton);
    align-items: center;
    justify-content: left;
    color: var(--color-text);
    text-transform: uppercase;
    /* font-family: 'NewCicleSemi', 'Raleway', sans-serif; */
    font-family: var(--font-secundaria);
    margin: 0;
    cursor: pointer;
}

#general-control .addGrupo .titulo h3 input {
    background: transparent;
    border: 0;
    flex: 1 0 auto;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
}

#general-control .addGrupo .titulo h3 button {
    visibility: hidden;
}

#general-control .addGrupo .titulo h3 input:focus~button {
    visibility: visible;
}

#general-control .addGrupo .icon-grupo {
    color: var(--color-principal);
    font-size: 2.3rem;
    margin: 5px;
}

#general-control .grupo .titulo h3 {
    font-size: 2rem;
    text-align: left;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: left;
    color: var(--color-text);
    text-transform: uppercase;
    /* font-family: 'NewCicleSemi', 'Raleway', sans-serif; */
    font-family: var(--font-secundaria);

    margin: 0;
}

#general-control .grupo .icon-grupo {
    color: var(--color-principal);
    font-size: 2.3rem;
}

#general-control .atras {
    margin: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}

#general-control .titulo #input {
    padding: 0;
}



/*************************************************************************************************************************************
 *                                            BARRA DE NAVEGACION (NCT_barraNavegacion)
 * CSS Necesario para el renderizado y funcionalidad del
 * componente barra-navegacion (BarraNavegacion)
 * Contiene la barra superior del panel princial de la aplicación y sus menús.
 * Componente barra de navegación
 */

#general-background {
    width: 100%;
    height: 50px;
}

#cuenta {
    text-transform: capitalize;
}

.navbar {
    margin-bottom: 0;
    height: inherit;
    background-color: var(--color-menu);
    z-index: 9999;
    border-bottom: 0;
    box-shadow: var(--shadow-menu);
}

.navbar-brand .logo {
    font-family: var(--font-principal);
    display: block;
    font-size: 1.3em;
    color: var(--color-text-logo);
}

.navbar-brand {
    padding: 11px 11px 11px 11px;
    /* padding-top: 11px; */
    width: max-content;
}

.by-nomia {
    font-size: 0.5em !important;
    color: var(--color-text-sublogo);
}


/* .navbar-nav {
  margin-right: 21px;
} */

.navbar-brand:hover {
    text-decoration: none;
}

.navbar-nav li>a {
    font-size: 15px;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
}

.navbar-nav li>a>.title {
    color: var(--color-text);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    margin-left: 3px;
}

.navbar-nav li>a>.icon {
    color: var(--color-principal);
    position: relative;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.navbar .badge {

    padding: 4px 6px !important;
    position: absolute;
    top: -6px;
    right: 10px;


}

barra-instalacion,
barra-gmao {
    width: 50px;
    height: calc(100vh - 50px);
    position: fixed;
    background-color: var(--color-menu);
    box-shadow: var(--shadow-menu);
    z-index: 2;
}

#menuDatos {
    display: flex;
    display: -webkit-flex;

    width: 100%;
    flex-direction: row;
}

.panel-flotante-fixed {
    width: 50px;
    height: 100%;
    position: fixed;
    background-color: var(--color-menu);
    bottom: 0;
    left: 0;
    top: auto;
}

.subMenu .navbar-nav li {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    transition: all 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.subMenu .navbar-nav li>a>.icon {
    font-size: 18px;
}

.subMenu .navbar-nav {
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.subMenu .navbar-nav li.select {
    border: none;
    border-left: 3px solid var(--color-principal);
    color: white;
    background-color: var(--menu-select);
    /* -webkit-transition: all 15s cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
    transition: all 15s cubic-bezier(0.455, 0.03, 0.515, 0.955); */
}


/* .subMenu .navbar-nav li span {
  padding-left: 2px;
} */


/* 
.subMenu .navbar-nav li.select {
  
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  border-bottom: 1px solid var(--color-secundario);
}  */


/* .subMenu .navbar-nav li:hover span,
.subMenu .navbar-nav li.select span {
  font-size: 18px;
} */

.subMenu .navbar-nav li:hover .icon,
.subMenu .navbar-nav li.select .icon {
    font-size: 32px;
    cursor: pointer;
}

.navbar-nav li>a>.icon.mensaje,
.navbar-nav li>a>.icon.alarma {
    display: none;
}

.nav>li>a:focus,
.nav>li>a:hover {
    background-color: transparent !important;
    cursor: pointer;
}

.nav>li>a:focus>.title,
.nav>li>a:hover>.title,
.nav>li.select>a>.title {
    color: var(--color-principal)
}

.nav>li>a:focus>.icon,
.nav>li>a:hover>.icon,
.nav>li.select>a>.icon {
    color: var(--color-icon-menu-select)
}

#hora-fecha {
    margin-top: 0px;
    padding-top: 12px;
    text-align: center;
    color: var(--color-text);
    padding-bottom: 0px;
    font-family: var(--font-principal);
}

#hora-fecha h2 {
    margin-top: 0px;
    padding-top: 0px;
    margin-bottom: 0px;
    text-align: center;
    font-size: 36px !important;
}

#hora-fecha h5 {
    margin: 0px;
    text-align: center;
    color: var(--color-principal);
}

.notificacion {
    position: absolute;
}

.badge {
    padding: 4px 7px !important;
    position: absolute;
    top: -10px;
    right: -10px;
    padding: 5px 10px;
    border-radius: 50%;
    color: var(--color-btn-text);
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.badge.mensaje {
    background-color: var(--color-btn)
}

.badge.alarma {
    background-color: var(--color-alarm)
}

.subMenu .navbar-nav li.select .badge,
.subMenu .navbar-nav li:hover .badge {
    top: 0px;
    right: 0;
}

#menu-select .caret {
    margin-left: 4px;
    transition: all 0.3s linear;
}

#menu-select .btn {
    background-color: transparent;
    border: none;
    font-size: 14px;
    color: var(--color-text);
    outline: none;
    padding-top: 15px;
    padding-bottom: 15px;
    box-shadow: none;
}

.navbar-nav #menu-select .btn {
    padding-top: 1px;
    padding-bottom: 0;
}

#menu-select.open .caret {
    color: var(--color-principal);
    transform: rotate(-180deg);
}

#menu-select .btn .icon,
#menu-select .btn .arrow {
    color: var(--color-principal)
}

#menu-select .btn:hover {
    color: var(--color-principal) !important;
}

#menu-select .btn:hover .icon {
    color: var(--color-text);
}

#menu-select.dots {
    position: absolute;
    right: 6px;
    top: -2px;
    cursor: pointer;
    font-size: 15px;
    /* font-size: 1em; */
}

#menu-modulos {
    background-color: var(--color-menu-desplegable);
    overflow: hidden;
    position: absolute;
    max-width: 200px !important;
    z-index: 3000;
    padding: 0px;
    top: 48px;
    border: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    /* box-shadow: var(--shadow-menu); */
}

#menu-modulos.dots {
    right: 0;
    left: auto;
    top: 12px;
    align-items: flex-start;
    height: fit-content;
    z-index: 99999999;
}


#menu-modulos li:hover a {
    background-color: var(--hover-menu);
    overflow: hidden;
    cursor: pointer;

}

#menu-modulos a {
    padding: 15px 11px;
    font-size: 14px;
    display: flex !important;
    align-items: center;
    transition: all 3s cubic-bezier(0.075, 0.82, 0.165, 1);

}

#menu-modulos a>.modulo {
    /* color: var(--color-secundario); */
    color: var(--color-text);
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    justify-content: center !important;
    font-family: var(--font-secundaria);
}

#menu-modulos a>.icon {
    margin-right: 10px;
    font-size: 18px;
}

.separador {
    width: 240px;
    border-bottom: var(--border-separador);
    margin-right: 5px;
    margin-left: 5px;
}

.notify {
    display: flex !important;
    align-content: center;
    justify-content: center;
}

/* .modal-body .notificaciones{
    padding: 12px;
    background-color: var(--background-box);
} */
.modal-body .notificaciones>div {
    padding: 12px;
    background-color: var(--background-box);
    margin-bottom: 8px;
    border-radius: var(--radio-box);
    box-shadow: var(--shadow-box);

}

.modal-body .notificaciones>div h3 {
    color: var(--color-principal);
    padding: 0;
    margin: 3px;
}

.modal-body .notificaciones>div>div {
    margin: 8px;
    color: var(--color-text);
    text-align: start;
}

.modal-body .notificaciones>.additionalCosts {
    display: flex;
    flex-direction: column;
}

.modal-body .notificaciones>.additionalCosts div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.modal-body .notificaciones>.additionalCosts div h3 {

    margin: 3px 0;
    /* padding: 0; */
}

.modal-body .notificaciones>.additionalCosts div .price {
    min-width: 80px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1086px) and (orientation: portrait) {
    #general-background {

        height: 100px;
    }

    .visual-map {
        /* border: 1px solid var(--color-placeholder); */
        height: calc(100% - 100px);
        height: calc(100vh - 90px);
    }

    #general-areas {
        height: calc(100% - 100px);
        height: calc(100vh - 90px);
    }

    #soporte.gmao .panel-soporte {
        height: calc(100% - 103px) !important;
        height: calc(100vh - 103px) !important;
    }
}

@media (max-width: 1055px) and (orientation: landscape) {
    #general-background {

        height: 100px;
    }

    .visual-map {
        /* border: 1px solid var(--color-placeholder); */
        height: calc(100% - 100px);
        height: calc(100vh - 90px);
    }

    #general-areas {
        height: calc(100% - 100px);
        height: calc(100vh - 90px);
    }

}

@media (max-height: 700px) {
    .subMenu .navbar-nav li {

        height: 45px;

    }

    .nav>li>a {
        padding: 10px 12px;
    }

    .subMenu .navbar-nav li>a>.icon {
        font-size: 16px;
    }

    .subMenu .navbar-nav li:hover .icon,
    .subMenu .navbar-nav li.select .icon {
        font-size: 28px;
        cursor: pointer;
    }
}

/************************************************************************************************************************************
*                                        PÁGINA AREAS (NCT_visualAreas)
*/

#background-areas {
    background-image: url('../images/bg2.png');
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
}

#general-areas {
    font-family: var(--font-principal);

}


#general-areas #tabla {
    /* max-width: 1870px; */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
    width: 100%;
    padding: 0 10px;
    /* grid-auto-rows: 200px; */
    grid-gap: 10px;
    /* flex-wrap: wrap;
    justify-content: flex-start */
}

#general-areas .panel-objetivos {
    width: 100%;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    padding: 8px;
}

#general-areas .panel-box {
    flex: 1;
    /* border:1px red solid; */
    text-align: center;
    /* margin: 5px; */
    border-radius: var(--radio-box);
    /* and that, will result in a 10px gap */
    background: var(--background-panel-zona-abajo);
    min-width: 144px;
    position: relative;
    height: 146px;
    font-size: 18px;
    width: 100%;
    box-shadow: var(--shadow-widget);
}

#general-areas .panel-box.edicion {
    padding-bottom: 24px;
}

#general-areas .panel-edicion {
    /* color: var(--color-btn-error); */
    margin: 2px;
    position: absolute;
    bottom: 0;
    right: 0;
}

#general-areas .panel-box .info-box:hover {
    cursor: pointer;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    background: var(--background-panel-zona-hover);
}

#general-areas .panel-box .titulo {
    font-family: var(--font-secundaria);

    color: var(--color-principal);
    font-size: 1em;
}

#general-areas .panel-box .imagen-box {
    /* height: 60px;
    display: flex;
    display:-webkit-flex;
    
    align-items: center;
    justify-content: center; */
    position: absolute;
    bottom: 33px;
    margin: 5px;
    right: 4%;
}

#general-areas .panel-box .info-box {
    border-radius: var(--radio-box);
    background-color: var(--background-panel-zona);
    /* border: var(--border-separador); */
    color: var(--color-text);
    height: 100%;
    padding: 5px;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    font-size: 21px;
    flex-direction: column;

}

#general-areas .panel-box .info-box .box i {
    color: var(--color-alarm);
    margin-right: 5px;
}

#general-areas .userName {
    color: var(--color-principal);
    font-size: 1em;
    padding-bottom: 5px;
}

#general-areas .panel-box .info-box>div {
    /* font-size: 0.77em; */
    margin-bottom: 5px;
}

#general-areas .panel-box .imagen-box i {
    /* font-size: 45px; */
    color: var(--color-icon-widget);
    font-size: 3.4em;
}

#general-areas .panel-box .panel-info {
    font-size: 1em;
}

#general-areas .panel-box .desc {
    font-size: 0.7em;
}

#general-areas {
    margin-left: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-left: 50px;
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    flex-grow: 1;
    height: calc(100vh - 50px);
}

#general-areas .grupos {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    padding-bottom: 4rem;
    padding-top: 4rem;
}

#general-areas .grupo {
    margin-bottom: 5px;
    margin-top: 5px;
    flex-basis: 35%;
}

#general-areas .grupo .titulo h3 {
    font-size: 2.5rem;
    text-align: left;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: left;
    color: var(--color-text);
    text-transform: uppercase;
    /* font-family: 'NewCicleSemi', 'Raleway', sans-serif; */
    font-family: var(--font-secundaria);
    margin: 0;
    margin-bottom: 10px;
}

#general-areas .grupo .titulo h3 span {
    font-family: var(--font-terciaria);
    margin-right: 10px;
}

#general-areas .grupo .icon-grupo {
    color: var(--color-principal);
    font-size: 2.3rem;
}

#general-areas .datos-grupo {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex-wrap: wrap;
}

#general-areas #widget .box-data>.head h5 {
    text-transform: uppercase;
    font-size: 3.8rem;
}

#general-areas #widget .box-data>.panel-icon {
    margin-right: 8px;
}

#general-areas .opciones {
    display: flex;
    display: -webkit-flex;

    width: 100%;
    justify-content: center;
    align-items: center;
}

#general-areas #widget .panel {
    padding-bottom: 31px;
}

.puntero {
    cursor: pointer;
}

@media (max-width: 854px) {
    #general-areas #tabla {
        grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));

    }

    #general-areas .panel-box {
        height: 114px;
        font-size: 14px;
        /* padding-bottom: 12px; */

    }

    #general-areas.panel-box.edicion {
        padding-bottom: 12px;
    }

    #general-areas .panel-box .imagen-box {
        height: 47px;
    }

    #general-areas .panel-box .info-box {
        font-size: 15px;
    }
}

#widget.puntero:hover .panel {
    background: #2874b5d6;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

#widget.puntero:hover .panel .descripcion {
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    /* transition: ; */
    background-color: rgba(0, 0, 0, .5);
    color: var(--color-text);
}

/* .puntero .box-data:hover .info>.icon {
  color: var(--color-text);
} */

.panel-group .panel {
    /* background: var(--color-widget); */
    background: transparent;
    /* background-image: radial-gradient(circle closest-corner at 50% 20%, #313644, #4c4c56); */
    border-radius: var(--radio-box);
    border: var(--color-border-input);
}

.panel-group .panel-heading+.panel-collapse>.list-group,
.panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: var(--color-border-input);
}

.panel-title>a,
.panel-title>small,
.panel-title>small>a {
    text-decoration: none;
}

.grafica>.panel-heading {
    background: var(--color-widget);
    color: var(--color-text);
}

.grafica>.panel-heading:hover {
    background: #2874b5b8;
}

.grafica .icon {
    transition: all 0.3s linear;
}

.grafica>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #151622;
}

.panel-body {
    padding: 5px;
}

.grafica .open>.icon {
    /* color: black; */
    transform: rotate(-180deg);
}

.panel-group {
    margin-top: 5px;
    margin-bottom: 5px;
}

.info-devices .panel-group {
    width: 100%;
}

/************************************************************************************************************************************
*                                        CONTENEDORES DE FILTROS PARA BÚSQUEDAS
*/

.filtros {
    background-color: rgba(0, 0, 0, 0.5);
}

.box-filters {
    border-radius: var(--radio-box);
    background: var(--color-box-filters);
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 15px;
    margin-right: 15px;
    box-shadow: var(--shadow-box);
    gap: 5px;

}

.box-filters #select {
    padding: 0;
}

.box-filters #date-picker {
    padding-top: 21px;
}

.box-filters #date-picker input:focus~.legend,
.box-filters #date-picker input:not(.ng-empty)~.legend {
    top: 0px;
    margin-left: 1.2rem;
}

.box-filters .datos {
    display: -webkit-flex;
    display: flex;

    flex-direction: row;
    flex-wrap: wrap;
    /* width: 100%; */
    justify-content: flex-start;
    /* padding: 10px 0 0 0; */
    position: relative;
    flex: 1;
}

.box-filters .datos>* {
    flex: 1;
}

.box-grafica {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 15px;
    margin-right: 15px;
}

.box-filter {
    margin-top: 25px;
    margin-bottom: 25px;
}

.box-button {
    margin-top: 11px;
    margin-bottom: 5px;
}

.box-filter .form-group {
    margin-bottom: 0px;
}

.botones-filtro {
    display: flex;
    display: -webkit-flex;

    justify-content: flex-end;
    /* width: 100%; */
    flex-wrap: wrap;
}

.botones-filtro .btn {
    margin: 10px;
}

@media (max-width: 767px) {
    .box-filter {
        margin-top: 0;
        margin-bottom: 0;
    }

    #general-background {
        height: 90px;
    }
}


/************************************************************************************************************************************
*                                        MEDIAS QUERYS
* PARA APLICAR UN ESTILO RESPONSIVE
*/
li.soporte {
    background-color: var(--color-principal);
    transition: all 0.3s linear;
    cursor: pointer;
}

li.soporte:hover {
    background-color: var(--color-text);
}

.nav>li.soporte>a>.title {
    /* font-weight: bold; */
    font-size: 16px;
}

.navbar-nav li.soporte>a>.icon {
    display: none;
    color: var(--color-text);
}

.nav>li.soporte>a:focus>.title,
.nav>li.soporte>a:hover>.title,
.nav>li.soporte.select>a>.title,
.nav>li.soporte>a:focus>.icon,
.nav>li.soporte>a:hover>.icon,
.nav>li.soporte.select>a>.icon {
    color: var(--color-principal);
}

.navbar-header-mobile {
    display: none;
}

#barra-navegacion>ul {
    font-family: var(--font-secundaria);
    display: flex;
    align-items: center;
    padding-top: 3px;
}

@media (min-width: 768px) {
    .navbar {
        border-radius: 0;
    }
}

@media (max-width: 934px) {
    .navbar-nav {
        margin: 0;
    }

    .navbar-header {
        display: none;
    }

    .navbar-nav li>a>.title,
    #menu-select>.btn>.title {
        display: none;
    }

    .devices {
        display: none !important;
    }

    .devices-mobile {
        display: flex !important;
    }

    .division.main {
        flex-direction: column-reverse;
    }

    .navbar-nav li.soporte>a>.icon {
        display: flex;
        display: -webkit-flex;

        /* color: var(--color-text); */
    }

    .navbar-nav #menu-select .btn {
        padding-top: 3px;
        min-width: auto;
    }

    .navbar-nav li>a>.icon.mensaje,
    .navbar-nav li>a>.icon.alarma {
        display: inline;
    }

    .navbar-nav>li {
        float: left;
    }

    #barra-navegacion,
    .navbar-header-mobile {
        display: flex;
        display: -webkit-flex;

        justify-content: center;
        align-items: center;
        /* margin-left: 26px; */
    }

    .navbar-nav li>a>.icon,
    #menu-select .btn .icon {
        font-size: 18px;
        color: var(--color-text)
    }

    .navbar-nav li:hover>a>.icon,
    .navbar-nav li.select>a>.icon {
        color: var(--color-principal)
    }

    .badge {
        position: absolute;
        margin-left: 13px;
        margin-top: -9px;
    }

    #menu-modulos {
        left: -130px;
    }

    #menu-select .caret {
        margin-left: 0px;
    }

    #menu-select .btn {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 0px;
    }

    .modal-xl {
        width: 100%;
        margin: 0px;
    }

    .alert {
        flex-wrap: wrap;
    }

    .alert .icon {
        flex-basis: 100%;
        border-bottom-left-radius: 0px;
        border-top-right-radius: var(--radio-box);
        height: 30px;
    }

    .alert .circle {
        left: 0px;
        top: 0px;
        width: 22px;
    }

    .gestor-alertas {
        max-width: 100%;
        width: 100%;

    }

    .alert .mensaje {
        padding-top: 20px;
        padding-left: 15px;
        padding-right: 15px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: var(--radio-box);
        flex-basis: 100%;
    }

    .alert .info {
        margin: 0;
    }

    .alert .close {
        top: 17px;
        position: absolute;
        opacity: 0.5;

    }

    #grafica .filter .boton {
        width: 100%;
        justify-content: center;
        position: relative;
    }

    #general-contratos .panel-izquierdo {
        height: calc(100vh - 96px);
    }
}


/**************************************** VISUAL DATEPICKER ********************************************/

date-picker {
    z-index: 9999;
}

#date-picker {
    padding-top: 25px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

/*  Muestra el icono en la izquierda */
.reverse #date-picker {
    flex-direction: row-reverse;
    padding-left: 14px;
}

#date-picker .boton-selector {
    background-color: transparent !important;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0px;
    height: 34px;
}

#date-picker .form-control:focus~.input-group-addon {
    border-color: var(--color-principal);
}

#date-picker .form-control:focus~.input-group-addon i {
    color: var(--color-principal);
}

#date-picker .form-control:focus~.legend {
    color: var(--color-principal);
}

#date-picker .input-group-addon:hover,
#date-picker .input-group-addon .active {
    color: #28A7E9 !important;
}

.disabled #date-picker .input-group-addon i {

    color: var(--color-secundario) !important;
}

#date-picker .input-group-addon {
    border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background: transparent !important;
    color: var(--color-text) !important;
    cursor: pointer;
    border-bottom: var(--color-border-input);
    padding: 0;

}

#date-picker input {
    border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    background: transparent !important;
    width: 100%;
    min-width: 150px;
    color: var(--color-text);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) !important;
    margin-top: 1px;
    border-bottom: var(--color-border-input);
    height: auto;
    padding-bottom: 0;
    text-transform: capitalize;
}

#date-picker .border {
    border-bottom: 1px solid var(--color-text);
}

#date-picker .boton-selector i {
    color: var(--color-text) !important;
    font-size: 1.5em !important;
}

#date-picker .boton-selector.active {
    color: #00c0ef !important;
}

#date-picker.has-error .form-control {
    border-color: #f7863b !important;
}

#date-picker.has-error .form-control~.input-group-addon {
    border-color: #f7863b !important;
}


/* #date-picker.has-error .form-control~.legend {
  color: #f7863b;
} */

#date-picker.has-success .form-control {
    border-color: #5AA836 !important;
}

#date-picker.has-success .form-control~.input-group-addon {
    border-color: #5AA836 !important;
}


/* #date-picker.has-success .form-control~.legend {
  color: #5AA836;
} */

#date-picker .legend {
    top: 32px;
}

#date-picker input:focus~.legend,
#date-picker input:not(.ng-empty)~.legend {
    top: 10px;
    font-size: 14px;
    z-index: 1;
    color: var(--color-secundario);
    margin-left: 1.2rem;
}

.edit-work-orders #date-picker .legend {
    top: 7px;
    color: var(--color-text);
    font-size: 14px;
    font-family: var(--font-secundaria);
    left: 7px;
}

.edit-work-orders #date-picker input:focus~.legend,
.edit-work-orders #date-picker input:not(.ng-empty)~.legend {
    top: -20px;
    font-size: 14px;
    z-index: 1;
    color: var(--color-secundario);
    margin-left: -2px;
}

.edit-work-orders #date-picker input {
    padding-left: 0;
}

#modal-request-service.edit-work-orders>div {

    padding: 0 8px;
    gap: 22px;
    display: flex;
    flex-direction: column;
}

.edit-work-orders .notification {

    background-color: var(--azul-trans);
    border-radius: var(--radio-box);
    justify-content: flex-start;
}

.edit-work-orders .notification .icon {
    color: var(--azul);
}


.uib-datepicker .ng-leave {
    -webkit-transition: 0s;
    transition: 0s;
}

.uib-datepicker .btn.focus,
.uib-datepicker .btn:focus,
.uib-datepicker .btn:hover {
    background-color: transparent !important;
}

.uib-datepicker-popup .btn {
    margin: 0;
    min-width: 0;
}

.uib-datepicker-popup.dropdown-menu {
    background-color: var(--background-select);
    z-index: 999999;
}

.uib-datepicker .text-info {
    color: var(--color-principal);
}

.btn-sm.btn-info,
.btn-sm.btn-success {
    border-color: transparent !important;
}

.uib-datepicker .btn-info,
.uib-datepicker .btn-default.btn-info.active,
.uib-datepicker .btn-info:active {
    color: var(--color-text) !important;
    background-color: var(--color-hover) !important;
}

.uib-datepicker .btn-info:hover,
.uib-datepicker .btn-default.btn-info.active:hover,
.uib-datepicker .btn-info:active:hover {
    color: var(--color-tag) !important;
    background-color: var(--color-hover) !important;
}

.uib-datepicker .btn-default.active,
.uib-datepicker .btn-default:active {
    color: var(--color-text);
    background-color: rgba(255, 255, 255, 0.3) !important;
}

.uib-datepicker small {
    color: var(--color-principal);
}

.uib-datepicker em {
    color: var(--color-principal);
}

.uib-datepicker .uib-title {
    width: 100%;
    border: inherit;
    color: var(--color-text);
    background-color: rgba(0, 192, 239, .5);
}

.uib-datepicker button.btn.btn-default.btn-sm {
    background-color: transparent;
    border: inherit !important;
    color: var(--color-text);
}

.uib-datepicker .uib-day button,
.uib-datepicker .uib-month button,
.uib-datepicker .uib-year button {
    background-color: transparent;
    border: inherit;
    color: var(--color-text);
}

.uib-datepicker .glyphicon {
    color: var(--color-text) !important;
    font-size: 1.5em !important;
}


/************************** DISEÑO PARA SELECT ********************************/

#select {
    padding-top: 25px;
    /* padding-bottom: 5px; */
    width: 100%;
    min-width: fit-content;
}

#select .btn.active,
#select span.active {
    background-color: transparent;
    border: var(--color-border-input);
    border-top: inherit;
    border-right: inherit;
    border-left: initial;
    border-radius: 0px;
    color: var(--color-text);
    text-align: left;
    outline: 0;
    border-image: none;
    outline-offset: -2px;
    box-shadow: none;
    margin-top: 2px;
    width: -webkit-fill-available;
    padding-right: 25px;
    padding-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    white-space: normal;
    min-width: 200px;
    /* padding-top: 5px; */
    /* min-width: 162px; */
}

#select .legend {
    font-size: 14px;
    margin-left: 0.3rem;
    position: initial;
    display: flex;
    width: 100%;
    min-height: fit-content;
    /* z-index: 1; */
    color: var(--color-secundario);
}

#select.select-estado .btn {
    width: 75% !important;
    padding: 1px !important;
}

#select.select-estado .caret {
    top: 10px !important;
    margin-left: 2px;
}

/* #select .active {
    color: #fff !important;
} */


/* .btn-group {
  width: 100%;
} */

.dropdown-menu>li>a {
    color: var(--color-btn-text);
    padding: 3px 12px;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: #28A7E9 !important;
    cursor: pointer;
}

.dropdown-menu>li>a:hover>i,
.dropdown-menu>li>a:focus>i {
    color: var(--color-btn-text) !important;
}

#select ul {
    background: rgba(0, 0, 0, .8);
    width: auto;
    max-height: 200px;
    overflow: auto;
}

.dropdown-menu {
    z-index: 999999;
    width: fit-content;
    border: 1px solid var(--color-box-filters);
}

#select .caret {
    position: absolute;
    right: 0;
    margin-right: 9px;
    top: 15px;
    transition: all 0.3s linear;
}

#select .has-success {
    color: #fafafa !important;
    border-color: #5AA836 !important;
}

#select .has-success~.legend {
    color: #5AA836;
}

#select .has-error {
    border-color: #f7863b !important;
}

#select .has-error~.legend {
    color: #f7863b;
}

#select span.btn:focus {
    border-color: #28A7E9;
}

#select.open .caret {
    color: #28A7E9;
    transform: rotate(-180deg);
}

#select span.btn:focus~.legend {
    color: #28A7E9;
}

#select .tag {
    margin: 0 8px;
}

/********************* GENERAL-ANALISIS **************************************/

#general-analisis {
    /* width: 100%; */
    margin-left: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-left: 50px;
    width: 100%;
}

#general-analisis .table {
    grid-template-columns: max-content minmax(100px, 0.5fr) minmax(100px, 1fr);
}

#general-analisis .panel-graficas {
    margin-bottom: 15px;
}

.col-filtros {
    padding-top: 21px;
    padding-bottom: 21px;
}



/* #selector-fechas .botones-filtro {
    width: auto;
} */

#selector-fechas .variables-rango>.expanded {
    flex: 1;
}

#selector-fechas .datos>div.area {
    min-width: 181px;
    /* margin: 0 5px; */
    /* flex-basis: 20%; */
}

/* 
#selector-fechas .datos>div.fecha {
    width: 275px;
    padding-top: 14px;
} */

@media (max-width: 767px) {
    #selector-fechas .datos>div {
        flex-basis: 100%;
    }
}


/* #general-analisis .tabla {
  background: var(--color-box-filters);

} */


/***************************** DISEÑO PARA TABLAS *********************************/

#tabla {
    /* padding-top: 15px; */
    /* margin-bottom: 15px; */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: center;
    justify-content: center;
    align-content: center;

}

#tabla .table {
    width: 100%;
    max-width: 100%;
    /* margin-bottom: 20px; */
    display: grid;
    border-collapse: collapse;
    /* min-width: 100%; */

    /* grid-gap: 2px; */
    font-weight: 300;
    align-items: center;
}

#tabla .table thead,
#tabla .table tbody,
#tabla .table tr {
    display: contents;
}

#tabla td i {
    margin-right: 5px;
}


/* #tabla td span {
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
} */

#tabla .btn {
    margin: 0;
    min-width: 0;
    font-size: 12px;
}

td.dato.right {

    justify-content: flex-end;
}

#tabla .right {
    text-align: center;
}

/* #tabla thead>tr {

    background-color: var(--color-btn);
    padding-right: 30px;
    font-family: var(--font-terciaria);
} */

#tabla thead>tr>th {
    color: var(--gris);
    /* background-color: var(--background-box); */
    border-bottom: 0;
    font-family: var(--font-secundaria);
    position: sticky;
    top: 0;
    padding: 15px 8px;

    text-align: left;
    font-weight: normal;
    position: relative;
    border-bottom: 1px solid var(--border-table);
    border-top: 1px solid var(--border-table);

}

#tabla thead>tr>th>i.active {
    color: var(--azul);
}

#tabla .dato>span {
    border-radius: var(--radio-box);
    font-family: var(--font-principal);
    font-weight: 800;
    padding: 2px 15px;
    min-width: 70px;
}

#tabla .clic:hover {
    background-color: var(--color-widget-hover);
    cursor: pointer;
    transition: all 1s ease-in-out;
}

#tabla .center {
    justify-content: center;
}

#tabla .dato>span,
#tabla .titulo>span {
    font-size: 12px;
    padding: 0;
    border-radius: var(--radio-box);
    font-weight: normal;
    font-family: var(--font-secundaria);
}

#tabla .dato>span.offline {
    background-color: var(--color-offline);
    color: var(--color-btn-text);
}

#tabla .dato>span.online {
    background-color: var(--color-online);
    color: var(--color-btn-text);

}

#tabla thead>tr>th:first-child {
    border-left: 1px solid var(--border-table);
    border-top-left-radius: 5px;
    /* border-bottom-left-radius: 5px; */
}

#tabla tbody>tr>td:first-child {
    border-left: 1px solid var(--border-table);

}

#tabla tbody>tr>td:last-child {
    border-right: 1px solid var(--border-table);

}

#tabla tbody>tr:last-child>td:first-child {
    border-bottom-left-radius: 5px;

}

#tabla tbody>tr:last-child>td:last-child {
    border-bottom-right-radius: 5px;

}

#tabla thead>tr>th:last-child {
    border-top-right-radius: 5px;
    /* border-bottom-right-radius: 5px; */
    border-right: 1px solid var(--border-table);
}



#tabla tbody>tr>td {
    color: var(--color-text);
    border: 0;
    text-align: left;
    font-size: 14px;
    align-items: center;
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    background-color: var(--color-box-filters);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    padding: 15px 8px;
    height: 100%;
    /* margin-bottom: 5px; */
    border-bottom: 1px solid var(--border-table);
}

#tabla tbody>tr.active>td {
    background: var(--color-hover);

}

#tabla tbody>tr.disabled>td * {
    color: var(--color-infoWidget) !important;
}



#tabla tbody>tr.disabled>td .tag>span {
    background-color: var(--color-infoWidget-trans) !important;
}

#tabla tbody>tr.internal>td {
    background-color: var(--background-privado-cabecera) !important;
}

#tabla tbody>tr:hover>td {
    background-color: var(--color-hover);
    cursor: pointer;
    transition: all 1s ease-in-out;
    /* box-shadow: 0 5px 15px rgb(0 0 0 / 30%); */
}

/* #tabla tbody>tr:last-child>td:first-child {
    border-bottom-left-radius: 5px;
}

#tabla tbody>tr:last-child>td:last-child {
    border-bottom-right-radius: 5px;
} */

#tabla .even {
    background-color: var(--background-tabla);
}

#tabla .odd {
    background-color: var(--background-tabla-odd);
}

#tabla span {
    /* display: flex;
    display:-webkit-flex;
     */
    /* align-items: flex-start; */
    /* height: 100%; */
    font-size: 14px;
}

#tabla span.unidad {
    font-size: 12px;
    margin-left: 3px;
}

/* #tabla .propiedad {
    display: grid;
    justify-content: center;
    align-items: center;
    width: 100%;
    grid: auto / auto auto;
    grid-gap: 10px;
} */

#tabla .propiedad>div {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    margin: auto;
}

#tabla td.propiedad i {
    cursor: pointer;
}

/* #tabla .fila {
    pointer-events: none;
}

#tabla .fila td {
    pointer-events: all;
}
*/
#tabla .fila:hover {
    cursor: pointer;
    /* transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    background: var(--background-panel-zona-hover) */
}

.tabla-4 {
    display: grid !important;
    grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr);
    grid-gap: 12px;
}

.tabla-5 {
    display: grid !important;
    grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr);
    grid-gap: 12px;
}

.tabla-6 {
    display: grid !important;
    grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr) minmax(250px, 1fr);
    grid-gap: 12px;
}

.tabla-7 {
    display: grid !important;
    grid-template-columns: minmax(max-content, 1fr) minmax(400px, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, max-content) !important;
    /* grid-gap: 12px; */
}

.tabla-8 {
    display: grid !important;
    grid-template-columns: 30px minmax(max-content, 1fr) minmax(400px, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, max-content) !important;
    /* grid-gap: 12px; */
}

/* .tabla-6>div {
    text-align: start;
    padding: 8px;
    background-color: var(--color-widget);
    border-bottom: 1px solid red;
} */

/***************************** DISEÑO PARA LA GRÁFICA *****************************/

#grafica .opciones {
    margin-top: 5px;
    margin-bottom: 5px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    -webkit-justify-content: center;
    justify-content: center;
}

#grafica .opciones .button-right {
    width: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

#grafica .opciones .button-left {
    width: 50%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    -webkit-justify-content: center;
    justify-content: center;
}

#grafica .opciones .btn {
    width: 35px;
    min-width: auto;
    margin-left: 5px;
    font-size: 12px;
}

#grafica .filter {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex-wrap: wrap;
    padding-top: 4px;
    padding-bottom: 15px;
    justify-content: center;
    align-items: center;
}

#grafica .filter .campo {
    width: 187px;
    margin-right: 7px;
    margin-left: 7px;
    padding-top: 18px;
    margin-bottom: 15px;
}

#grafica .filter .boton {
    display: flex;
    display: -webkit-flex;

    margin-right: 15px;
    margin-left: 15px;
    justify-content: flex-end;
}

#grafica .filter.ng-enter {
    animation: 0.5s fadeIn ease-in-out;
}

#grafica .filter.ng-leave {
    animation: 0.5s fadeOut ease-in-out;
}


/* #grafica .filtros .botones .btn{
  font-size: 14px;
} */


/* #grafica .btn {
  margin-right: 7px;
  float: right;
  font-size: 12px;
  background: #28A7E9;
  border-radius: var(--radio-box);
  border-color: #dddddd;
  color: #fff;
  margin-top: 15px;
  margin-bottom: 15px;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
} */

.cursor-grafica {
    cursor: pointer;
}


/**************************************************************************************************************************************
/*                                                               BG COLORS
*/

.bg-base {
    color: #fafafa;
    background-color: #2bb1bf !important;
}

.bg-inactive {
    color: #2bb1bf;
    background-color: #fafafa;
}

.bg-trans {
    color: #00c0ef !important;
    background: rgba(0, 192, 239, 0.1) !important;
    /*background-color: transparent !important;*/
    border: 1px solid #00c0ef;
}

.bg-gray {
    color: #000;
    background-color: #d2d6de !important;
}

.bg-gray-light {
    background-color: #f7f7f7;
    color: #000;
}

.bg-black {
    background-color: #111111 !important;
    color: #000;
}


/* .bg-red,
.callout.callout-danger,
.alert-danger,
.alert-error,
.label-danger,
.modal-danger .modal-body {
  background-color: #dd4b39 !important;
  color: #000;
} */


/* .bg-yellow,
.callout.callout-warning,
.alert-warning,
.label-warning,
.modal-warning .modal-body {
  background-color: #f39c12 !important;
} */


/* .bg-aqua,
.callout.callout-info,
.alert-info,
.label-info,
.modal-info .modal-body {

  background-color: #0073b7 !important;
} */

.bg-blue {
    background-color: #0073b7 !important;
}

.bg-light-blue,
.label-primary,
.modal-primary .modal-body {
    background-color: #3c8dbc !important;
}


/* .bg-green,
.callout.callout-success,
.alert-success,
.label-success,
.modal-success .modal-body {
  background-color: #00a65a !important;
} */

.bg-navy {
    background-color: #001f3f !important;
}

.bg-teal {
    background-color: #39cccc !important;
}

.bg-olive {
    background-color: #3d9970 !important;
}

.bg-lime {
    background-color: #01ff70 !important;
}

.bg-orange {
    background-color: #ff851b !important;
}

.bg-fuchsia {
    background-color: #f012be !important;
}

.bg-purple {
    background-color: #605ca8 !important;
}

.bg-maroon {
    background-color: #d81b60 !important;
}

.bg-gray-active {
    color: #000;
    background-color: #b5bbc8 !important;
}

.bg-black-active {
    background-color: #000000 !important;
}

.bg-red-active,
.modal-danger .modal-header,
.modal-danger .modal-footer {
    background-color: #d33724 !important;
}

.bg-yellow-active,
.modal-warning .modal-header,
.modal-warning .modal-footer {
    background-color: #db8b0b !important;
}

.bg-aqua-active,
.modal-info .modal-header,
.modal-info .modal-footer {
    background-color: #00a7d0 !important;
}

.bg-blue-active {
    background-color: #005384 !important;
}

.bg-light-blue-active,
.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: #357ca5 !important;
}

.bg-green-active,
.modal-success .modal-header,
.modal-success .modal-footer {
    background-color: #008d4c !important;
}

.bg-navy-active {
    background-color: #001a35 !important;
}

.bg-teal-active {
    background-color: #30bbbb !important;
}

.bg-olive-active {
    background-color: #368763 !important;
}

.bg-lime-active {
    background-color: #00e765 !important;
}

.bg-oraange-active {
    background-color: #ff7701 !important;
}

.bg-fuchsia-active {
    background-color: #db0ead !important;
}

.bg-purple-active {
    background-color: #555299 !important;
}

.bg-maroon-active {
    background-color: #ca195a !important;
}

.bg-red,
.bg-yellow,
.bg-aqua,
.bg-blue,
.bg-light-blue,
.bg-green,
.bg-navy,
.bg-teal,
.bg-olive,
.bg-lime,
.bg-orange,
.bg-fuchsia,
.bg-purple,
.bg-maroon,
.bg-black,
.bg-red-active,
.bg-yellow-active,
.bg-aqua-active,
.bg-blue-active,
.bg-light-blue-active,
.bg-green-active,
.bg-navy-active,
.bg-teal-active,
.bg-olive-active,
.bg-lime-active,
.bg-orange-active,
.bg-fuchsia-active,
.bg-purple-active,
.bg-maroon-active,
.bg-black-active,
.callout.callout-danger,
.callout.callout-warning,
.callout.callout-info,
.callout.callout-success,
.alert-success,
.alert-danger,
.alert-error,
.alert-warning,
.alert-info,
.label-danger,
.label-info,
.label-warning,
.label-primary,
.label-success,
.modal-primary .modal-body,
.modal-primary .modal-header,
.modal-primary .modal-footer,
.modal-warning .modal-body,
.modal-warning .modal-header,
.modal-warning .modal-footer,
.modal-info .modal-body,
.modal-info .modal-header,
.modal-info .modal-footer,
.modal-success .modal-body,
.modal-success .modal-header,
.modal-success .modal-footer,
.modal-danger .modal-body,
.modal-danger .modal-header,
.modal-danger .modal-footer {
    color: #fff !important;
}

.preload {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.load {
    width: 200px;
    height: 200px;
    /* background-image: url('../images/slider/client-logo.png');
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; */
}

.load>span {
    min-width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    color: var(--color-secundario);
}

.gear {
    position: relative;
}

.one {
    left: 95px;
    top: 118px;
    width: 40px;
    height: 40px;
    animation: spin-reverse 5s infinite;
}

.two {
    left: 12px;
    width: 100px;
    height: 100px;
    /* z-index: -2; */
    animation: spin 5s infinite;
}

.three {
    top: -67px;
    left: 129px;
    width: 60px;
    height: 60px;
    animation: spin 5s infinite;
}

@keyframes spin {
    50% {
        transform: rotate(360deg);
    }
}

@keyframes spin-reverse {
    50% {
        transform: rotate(-360deg);
    }
}

.loadGraf {
    position: absolute;
    background-color: var(--color-fondo);
    width: 98%;
    height: 88%;
}

.visual-grafica.blur {
    filter: blur(5px);
}


/**************************************************************************************************************************************
/*                                                               GESTIÓN RESIDUOS
*/

.filtros {
    background: var(--color-fondo-desplegables);
    /*background-color: rgba(0,0,0,.5);*/
    /* margin-top: 20px; */
    border-radius: 5px 5px 0 0;
}

#general-residuos {
    /* font-family: 'Raleway', Calibri, Arial, sans-serif !important; */
    font-family: var(--font-secundaria);
    margin-left: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-left: 50px;
    width: 100%;

}

#general-residuos #selector-fechas .botones-filtro {
    width: 100%;
}

#general-residuos .titulo h3 {
    font-size: 2rem;
    text-align: left;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: left;
    color: var(--color-text);
    text-transform: uppercase;
    /* font-family: 'NewCicleSemi', 'Raleway', sans-serif; */
    font-family: var(--font-secundaria);

    margin: 0;
    margin-bottom: 10px;
}

#general-residuos .titulo h3 span {
    font-family: var(--font-terciaria);
    margin-left: 10px;
}

#general-residuos .titulo .icon {
    color: var(--color-principal);
    font-size: 2.3rem;
}

#general-residuos .panel-edicion {
    /* color: var(--color-btn-error); */
    margin: 0;
}

#general-residuos .panel-info {
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    width: 100%;
    align-items: center;
    /* grid: auto / auto auto; */
    /* grid-gap: 10px; */
    flex-wrap: wrap;
}

#general-residuos .panel-info .panel-botones,
#general-analisis .panel-botones {
    display: flex;
    display: -webkit-flex;

    justify-content: flex-end;
    align-items: center;
    flex: 2;

}

#general-residuos .table.admin {
    grid-template-columns: minmax(100px, 0.7fr) minmax(100px, 0.5fr) minmax(100px, 1.5fr) minmax(100px, 0.5fr) minmax(100px, 1.2fr) minmax(100px, 0.7fr) minmax(100px, 0.5fr);

}

#general-residuos .table {
    grid-template-columns: minmax(100px, 0.7fr) minmax(100px, 0.5fr) minmax(100px, 1.5fr) minmax(100px, 0.5fr) minmax(100px, 1.2fr) minmax(100px, 0.7fr);
}

.border-pendiente {
    border-color: var(--color-error) !important;
}

.border-completada {
    border-color: #cacaca !important;
}

@media (max-width:565px) {

    #general-residuos .table,
    #general-residuos .table.admin {
        grid-template-columns: minmax(100px, 1fr);
    }

    #general-residuos #tabla tbody tr {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(auto-fi, minmax(100px, 1fr));

    }

    #general-residuos #tabla td {
        width: 100%;
    }

    #general-residuos .titulo h3 {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    #general-residuos .titulo h3 span {
        margin-left: 5px;
    }

    #general-residuos .titulo .icon {
        font-size: 1.5rem;
    }

    #general-residuos .btn {
        min-width: 0;
    }

    #general-residuos #tabla thead,
    #general-residuos #tabla thead tr,
    #general-residuos #tabla thead tr th {
        display: initial !important;
        visibility: collapse;
    }

    #general-residuos #tabla .propiedad>div {
        font-size: 36px;

    }
}

.intervencion #select {
    padding-top: 14px;
}

#general-blog {

    margin-left: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-left: 50px;
    margin-top: 0px;
}

#general-blog .estado {
    margin-top: 14px !important;
    /*text-align: right !important;*/
}

#general-blog .intervencion {
    padding: 0px;
}

#general-blog .menu {
    /*background-color: rgba(0, 192, 239, 0.5) !important;*/
    display: inline-block;
    white-space: nowrap;
    vertical-align: middle;
    /*border: solid 1px var(--color-hover);
  border-top-right-radius: 7px;
  border-top-left-radius: 7px;*/
    margin-bottom: 20px;
}

/* #general-residuos .pagination {
    margin: 20px 15px;
} */

#general-blog .panel-volver {
    display: flex;
    display: -webkit-flex;

    width: 100%;
}

#general-blog .volver {
    cursor: pointer;
    color: var(--color-text);
    font-size: 1.3em;
    margin-bottom: 15px;
    margin-left: 10px;
    width: auto;
}

#general-blog .volver .icon,
#general-blog .volver span {
    color: var(--color-principal);
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

#boton .btn {
    background: #28A7E9;
    border-radius: var(--radio-boton);
    border-color: #dddddd;
    color: #fff;
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 15px;
    padding-top: 8px;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#boton .btn:hover {
    background: rgba(255, 255, 255, 0.5);
}

.btn-blue {
    margin-right: 118px;
    padding: 14px;
    border: 1px solid rgba(0, 192, 239, 0.5);
    font-size: 1.5em;
    margin-bottom: 5px;
}

/* .intervencion {
    margin-top: 64px;
} */

#intervalo {
    font-family: var(--font-secundaria);
}

#intervalo h5 {
    color: var(--color-principal);
}

#intervalo .btn {
    color: white;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    padding: 10px 0;
    text-align: center;
    border-radius: 0px;
}

#intervalo .btn {
    background-color: transparent;
}

#intervalo .btn:hover {
    background-color: var(--color-widget-hover);
}

#intervalo .zona {
    padding-right: 3.5px;
    padding-left: 3.5px;
}

#intervalo .selectionTag,
#intervalo .selectionTag.btn:hover {
    background-color: #eeeeee;
    color: #2873b5;
    margin: 2px;
    border-radius: 124px;
    padding: 5px 15px;
}

#intervalo .tag {
    background-color: var(--color-widget);
    color: var(--color-text);
    margin: 2px;
    border-radius: 124px;
    padding: 3px 15px;
}

#intervalo .titulo {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 18px;
    cursor: pointer;
}

#intervalo .titulo .hover:hover {
    color: rgba(0, 192, 239, 0.7) !important;
}

#intervalo .panel-group {
    margin: 0;
}

#intervalo .panel-group .panel {
    background: transparent;
    border: 0;
}

#intervalo .icon {
    color: var(--color-text);
    font-size: inherit;
    margin-top: 15px;
    padding-top: 1px;
}

#intervalo .panel-heading {
    padding: 0;
}

.box-blue {
    margin-top: 20px;
    margin-bottom: 20px;
}

.border-incidencia {
    border-color: #E00012 !important;
}

.border-preventiva {
    border-color: #f7863b !important;
}

.border-nota {
    border-color: #28A7E9 !important;
}

.border-descartado {
    border-color: #fafafa !important;
}

.imagen-correctiva {
    background-image: url('../images/correctiva.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 128px;
}

.imagen-eliminados {
    background-image: url('../images/eliminados.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 128px;
}

.imagen-reciclados {
    background-image: url('../images/reciclados.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 128px;
}

.imagen-nota {
    background-image: url('../images/nota.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 128px;
}

.imagen-objetivo {
    background-image: url('../images/objetivo.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 128px;
}

.border-correctiva {
    border-color: #028733 !important;
}

.border-bottom {
    border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
}

.border-right {
    border-right: 1px solid rgba(255, 255, 255, 0.7) !important;
}

.espaciado {
    margin: 10px;
}

.circle #anterior {
    cursor: n-resize;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}

.circle #siguiente {
    cursor: s-resize;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
}

.circle h2 {
    cursor: ns-resize;
    font-size: 25px;
    color: white;
}

.circle h1 {
    cursor: ns-resize;
    font-size: 18px;
    color: white;
}

.card {
    background: var(--color-box-filters);
    /*background: rgba(0,0,0,0.5);*/
    /* cursor: pointer; */
    padding-top: 10px;
    border-radius: 5px 5px 0 0;
    border-bottom: 2px solid;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.card h3 {
    color: rgba(0, 192, 239, 0.7);
}

.card .info {
    font-size: 1em;
}

.card .list-group {
    cursor: pointer;
}

.card .list-group-item {
    clear: both;
    color: white;
    background-color: rgba(0, 0, 0, 0.27);
    border: 1px solid rgba(100, 100, 100, 0.78);
    height: 88px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card .card-text {
    color: #fafafa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-text.object {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
}

.card-text.object span {
    flex: 1;
}

.card .descripcion {
    font-size: 1em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 55px;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    flex-basis: auto;
}

.card .descripcion b {
    padding-right: 6px;
    padding-left: 6px;
}

.card .titulo {
    display: table;
    width: 100%;
}

.card .titulo h3 {
    vertical-align: middle;
    display: table-cell;
}

.card .fa,
.card i {
    color: rgba(0, 192, 239, 0.7);
}

.card-space {
    padding-top: 20px;
}

.card b {
    color: rgba(0, 192, 239, 0.7);
}

.card:hover {
    /*background: rgba(66, 70, 70, 0.5);*/
    /*background: rgba(0,0,0,0.5);*/
    background: rgba(0, 192, 239, 0.4);
}

.card:hover~.panel-widget {
    background: var(--color-box-filters);
}

.visual-intervenciones {
    margin-left: 106px;
}

.margen {
    margin-top: 25px;
}

@media (max-width: 992px) {
    .card {
        margin: 10px 2px 5px 2px;
    }

    .visual-intervenciones {
        margin-left: 0px;
    }

    .notas label {
        text-align: left !important;
    }
}

@media(min-width:992px) {
    .card .titulo h3 {
        font-size: 18px;
    }

    #perfil .centered {
        text-align: left !important;
    }

    .cabecera .perfil {
        padding-left: inherit;
    }
}

#redondo .btn:hover {
    background: rgba(0, 192, 239, 0.8);
}

.btn-mant {
    background-color: #378de5;
    -moz-border-radius: var(--radio-box);
    -webkit-border-radius: var(--radio-box);
    border-radius: var(--radio-box);
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    padding: 10px 9px;
    text-decoration: none;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn-mant:hover {
    background-color: #374E89;
}

.btn-mant:active {
    position: relative;
    top: 1px;
}

.comentarios {
    /* background: rgba(66, 70, 70, .8); */
    background: var(--color-box-filters);
    border: var(--border-separador);
    border-radius: var(--radio-box);
    margin: 5px;
    color: var(--color-text);
    padding: 0;
    display: flex;
    height: fit-content;
    flex-direction: column;
    min-height: fit-content;
    box-shadow: var(--shadow-box);

    /* padding-bottom: 0; */
}

textarea {
    width: 100%;
    resize: none;
    background-color: var(--background-textarea);
    border-radius: var(--radio-box);
    border: var(--border-textarea);
    border: 0px;
    padding: 5px 15px;
    display: flex;
    height: fit-content;
    color: var(--color-text);
    margin-bottom: 5px;
    min-height: 120px;
    padding: 12px 12px;
    /* margin-left: 20px;
    margin-right: 20px; */
}

textarea:focus {
    outline: none !important;
}

.boton {
    cursor: pointer;
    width: 153px;
    border-radius: var(--radio-boton);
    margin: 9px 9px 9px 9px;
}

.comentarios .botones,
.comentario .botones,
.panel-principal .botones {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    /* padding: 0 15px; */
    background: var(--color-box-filters);
    /* border-bottom-right-radius: var(--radio-box);
    border-bottom-left-radius: var(--radio-box); */
    border-top: var(--border-separador);


}

/* .botones {
    border-top: 1px solid rgba(0, 192, 239, 0.5);
} */

.boton .icon {
    border-right: 3px solid rgba(66, 70, 70, 1);
    padding-right: 26px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
}

.boton .name {
    margin-top: 5px;
    text-align: center;
    text-transform: uppercase;
}

.notas {
    background: var(--color-box-filters);
    border: var(--border-separador);
    border-radius: var(--radio-box);
    box-shadow: var(--shadow-box);
    margin: 0px 0px 5px 5px;
    color: var(--color-text);
    padding: 5px;
}

.comentario {
    /* border: solid 1px var(--color-hover); */

    border: var(--border-separador);
    color: var(--color-text);
    font-family: var(--font-secundaria);
    /* padding: 5px; */
    display: flex;
    width: 100%;
    flex-direction: column;
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    box-shadow: var(--shadow-box);
}

.timeline-content.comentario {
    margin-bottom: 15px;
}

.notas .fa,
.comentario .fa {
    color: rgba(0, 192, 239, 0.7);
}

.notas img {
    width: 97px;
    height: 97px;
}

.notas .tabla {
    /*border-bottom: 1px dashed rgba(0,192,239, 0.7);*/
    font-size: large;
    padding: 0px;
    margin-bottom: 10px;
    font-size: medium;
}

.notas .tabla label {
    color: var(--color-principal);
    text-align: right;
}

.comentario img {
    height: 37px;
    width: 37px;
    border-radius: var(--radio-box);

    /* margin-bottom: 5px; */
}

/* .comentario h4 {
    font-size: 13px;
    margin-bottom: 2px;
} */

.comentario h5 {
    font-size: 11px;
    margin-top: 0px;
}

.comentario .cabecera {
    /* border-bottom: 1px solid white; */
    /* background: var(--color-box-filters); */
    border-top-left-radius: var(--radio-box);
    border-top-right-radius: var(--radio-box);
    display: flex;
    padding: 5px;
    flex-direction: row;
    align-items: center;

}

/* .comentario.sistema .cabecera {

    background-color: var(--background-sistema-cabecera);
}

.comentario.privado .cabecera {
    background-color: var(--background-privado-cabecera);
} */
.comentario.sistema {

    background-color: var(--background-sistema-cabecera);
}

.comentario.privado {
    background-color: var(--background-privado-cabecera);
}

.comentario .cabecera .imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 37px;
    height: 37px;
}

.comentario .cabecera .imagen i {
    font-size: 24px;
    color: var(--color-principal);
}

.comentario .cabecera .perfil {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: fit-content;
    flex-direction: column;
    padding-left: 10px;
}

.comentario .cabecera .perfil>* {
    flex: 1;
    color: var(--color-text);
    font-size: 15px;
}

.comentario .cabecera .perfil>*::first-letter {
    text-transform: capitalize;
}

.comentario .cabecera .perfil>.fecha {
    padding-top: 5px;
    font-size: 12px;
    color: var(--color-infoWidget);
}

.comentario .mensaje {
    padding: 15px;
    /* background: var(--color-box-filters); */
    border-bottom-left-radius: var(--radio-box);
    border-bottom-right-radius: var(--radio-box);

}

/* .comentario.sistema .mensaje {

    background-color: var(--background-sistema-mensaje);

}

.comentario.privado .mensaje {

    background-color: var(--background-privado-mensaje);

} */

.pagination {
    margin: 0;
    box-shadow: var(--shadow-box);
    min-width: max-content;
}

.pagination>li>a,
.pagination>li>span {
    color: var(--color-text);
    background: var(--color-widget) !important;
    border-color: var(--color-hover) !important;
    cursor: pointer;
}

.pagination>li>a:hover,
.pagination>li>span:hover {
    color: var(--color-principal);

}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background: var(--color-principal) !important;
}

/* Modal Service Request */
#modal-request-service {
    display: flex;
    gap: 8px;
    flex-direction: column;
}

#modal-request-service>div {
    --width-timeline: 16px;
    --width-line-timeline: 4px;
    border-radius: 10px;
    background: var(--background-box);
    padding: 8px;

}

#modal-request-service>div>h5 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timeline-select {
    padding-bottom: 15px;
}

/*==================================
    TIMELINE
==================================*/


/*-- GENERAL STYLES
------------------------------*/

.timeline {
    line-height: 1.4em;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    color: var(--color-text);
}

.timeline h1,
.timeline h2,
.timeline h3,
.timeline h4,
.timeline h5,
.timeline h6 {
    line-height: inherit;
    text-transform: capitalize;
}


/*----- TIMELINE ITEM -----*/


.timeline #select {
    padding-top: 0;
}

.timeline-item {
    padding-left: calc(var(--width-timeline) + 12px);
    position: relative;
}

.timeline-item:last-child {
    padding-bottom: 0;
}


/*----- TIMELINE INFO -----*/

.timeline-info {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    margin: 0 0 .5em 0;
    text-transform: uppercase;
    white-space: nowrap;
}


/*----- TIMELINE MARKER -----*/

.timeline-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--width-timeline);
}

.timeline-marker:before {
    background: var(--color-principal);
    border: 3px solid transparent;
    border-radius: 5px;
    content: "";
    display: block;
    height: 9px;
    position: absolute;
    top: 4px;
    left: 1.5px;
    width: 9px;
    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
}

.timeline-marker:after {
    content: "";
    /* width: 1px; */
    background: #ccd5db8c;
    display: block;
    position: absolute;
    /* top: 24px; */
    bottom: 0;
    /* left: 6px; */
    text-align: center;
    width: var(--width-line-timeline);
    top: calc(var(--width-timeline) + 4px);
    left: calc(var(--width-timeline) / 2 - var(--width-line-timeline) / 2);

}

.timeline-item:last-child .timeline-marker:after {
    content: none;
}

.timeline-item:not(.period):hover .timeline-marker:before {
    background: var(--color-principal);
    border: 3px solid #dadada;
}

/*----- TIMELINE ICON -----*/

.timeline-icon {

    position: absolute;
    top: 4px;
    bottom: 0;
    left: 0;
    width: var(--width-timeline);
    /* height: var(--width-timeline); */
    font-size: var(--width-timeline);
    color: var(--color-principal);
    /* display: flex;
    justify-content: center;
    align-items: center; */
    text-align: center;
}

.timeline-icon>i {
    transition: all 0.3s ease-in-out, border 0.3s ease-in-out;
}

/* .timeline-icon:before {
    background: var(--color-principal);
    border: 3px solid transparent;
    border-radius: 5px;

    display: block;
    height: 9px;
    position: absolute;
    top: 4px;
    left: 1.5px;
    width: 9px;
    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
} */


.timeline-icon:after {
    content: "";
    width: var(--width-line-timeline);
    background: var(--color-line-timeline);
    display: block;
    position: absolute;
    top: calc(var(--width-timeline) + 4px);
    bottom: 2px;
    left: calc(var(--width-timeline) / 2 - var(--width-line-timeline) / 2);
}

.timeline-item:last-child .timeline-icon:after {
    content: none;
}

.timeline-item:not(.period):hover .timeline-icon>i {
    color: var(--color-text);
    font-size: calc(var(--width-timeline) + 2px);
    /* border: 3px solid #dadada; */
}

/*----- TIMELINE CONTENT -----*/

.timeline-content {
    /* padding-bottom: 40px; */
}

.timeline-content p:last-child {
    margin-bottom: 0;
}


/*----- TIMELINE PERIOD -----*/

.period {
    padding: 0;
}

.period .timeline-info {
    display: none;
}

.period .timeline-marker:before {
    background: transparent;
    content: "";
    width: 0;
    height: auto;
    border: none;
    border-radius: 0;
    top: 0;
    bottom: 30px;
    position: absolute;
    border-top: 3px solid #CCD5DB;
    border-bottom: 3px solid #CCD5DB;
}

.period .timeline-marker:after {
    content: "";
    height: 32px;
    top: auto;
}

.period .timeline-content {
    /* padding: 40px 0 70px; */
    padding: 10px 0 40px;
}

.period .timeline-title {
    margin: 0;
}

#cab-comentario i {
    font-size: 1.2em;
    color: #28A7E9;
    padding-left: 5px;
}

#cab-comentario h4 {
    font-size: 1.3em !important;
}

#grupo #select {
    width: 108px;
    padding-top: 0;
}

#grupo #input {
    width: 200px;
}

#grupo #input input {
    padding-bottom: 4px;
    padding-left: 8px;
}

#grupo #select .legend {
    top: -3px;
    font-size: 14px;
    margin-left: 22px !important;
    z-index: 1;
    color: var(--color-principal);
}


/********************* GENERAL-CONTRATOS **************************************/

#general-contratos {
    margin: 0;
    padding-right: 0px;
    padding-left: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* height: calc(100vh - 50px); */

}

/* #general-contratos.gmao.list {
    padding-left: 0;
} */


#general-contratos.gmao.list .table-box {
    width: 100%;
}

#general-contratos .panel-izquierdo {
    height: calc(100vh - 50px);
}

/* #general-contratos .datos-contrato div#select {
    padding: 0 10px;
} */
#general-contratos .contratos {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100%;

}

#general-contratos .contrato,
#general-contratos .sincontrato {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color: var(--color-text)
}

#general-contratos .sincontrato>span:first-child {
    flex: 1;
}

#general-contratos .sincontrato>span:last-child.tipo {
    font-size: 32px;
    position: relative;
    -webkit-animation: linear infinite;
    -webkit-animation-name: select;
    -webkit-animation-duration: 1s;
}

@-webkit-keyframes select {
    0% {
        right: 0px;
    }

    50% {
        right: calc(5% - 10px);
    }

    100% {
        right: 0px;
    }
}

@-webkit-keyframes selectL {
    0% {
        left: 0px;
    }

    50% {
        left: calc(2% - 10px);
    }

    100% {
        left: 0px;
    }
}

@-webkit-keyframes select1 {
    0% {
        bottom: 0px;
    }

    50% {
        bottom: calc(5% - 10px);
    }

    100% {
        bottom: 0px;
    }
}

#general-contratos .contrato>span,
#general-contratos .sincontrato>span {
    padding: 5px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 18px;
}

#general-contratos .contrato>.titulo,
#general-contratos .sincontrato>.titulo {
    font-size: 22px;
    flex: 1;
}

#general-contratos .toggle {

    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 21px;
    padding-right: 21px;
    z-index: 1;
}

#general-contratos .toggle>.title {
    flex: 1;
    padding-left: 5px;
    color: var(--color-secundario);
}

#general-contratos .toggle>img {
    width: 50px;
    cursor: pointer;
}

#general-contratos .toggle>.info {
    color: var(--color-principal);
}

#general-contratos .contrato>.delete {
    color: var(--color-alarm);
    cursor: pointer;
    font-size: 18px;
}

#general-contratos .contrato>.clone {
    color: var(--color-principal);
    cursor: pointer;
    font-size: 18px;
    margin: 5px;
}

#general-contratos .box-filters {
    margin-top: 0px;
    margin-bottom: 12px;
}

#general-contratos .box-add {
    display: flex;
    display: -webkit-flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 5px 0px;
    margin: 5px 0;
    width: 100%;
    box-shadow: var(--shadow-box);
    background-color: var(--color-box-filters);
    border-radius: var(--radio-box);
}

#general-contratos .box-add:hover,
#general-contratos .box-add.select {
    background: var(--color-hover);
    cursor: pointer;
}

#general-contratos .box-add>.info {
    flex: 1;
    display: flex;
    flex-direction: column;
    heigh: 100%
}

#general-contratos .box-add>.tipo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 11px;
    height: 100%;
}

#general-contratos .box-add .titulo {
    font-size: 18px;
    color: var(--color-text)
}

#general-contratos .box-add .descripcion {

    color: var(--color-secundario);
}

#general-contratos .box-add .descripcion span {

    font-size: 12px;
}

#general-contratos .box-add>.info>div>span {
    flex: 1;

}

#general-contratos .box-add>.info>div>div>i {
    color: var(--color-principal);
    width: fit-content;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}

#general-contratos .box-add>.info>.division>.short {
    padding-right: 0;
}

/* #general-contratos .costes-facility {
    padding-left: 15px;
} */

#general-contratos .box-add>.tipo>i {
    font-size: 22px;
}

#general-contratos .paneles {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    /* flex-wrap: wrap; */
    width: 100%;
    max-height: 100%;
    overflow-x: auto;
}

/* #general-contratos.budget .paneles {

    overflow-x: clip;
    max-height: none;
} */

#general-contratos .panel-icono {
    font-size: 220px;
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 1s ease-in-out;
    color: var(--color-icon-widget);
    position: absolute;
    /*
  margin-right: -23px;
  margin-bottom: -23px;
  overflow: hidden;
  right: 5px;
  bottom: 5px;
  */
}

#general-contratos .visual-pdf {
    display: flex;
    display: -webkit-flex;
    flex: 1 1;
    /* height: 800px; */
    /* width: 100%; */
}

#general-contratos .visual-pdf.load {
    justify-content: center;
    align-items: center;
    height: 100%;
}

#general-contratos .visual-contrato {
    display: flex;
    display: -webkit-flex;

    /* flex-basis: 50%; */
    flex: 1 1;
    width: 100%;
}

#general-contratos .columna {
    flex: 1 1;
    padding: 5px;
    padding-bottom: 46px;
    min-width: 350px;
    position: relative;
}

#general-contratos .panel {
    margin: 0 !important;
    justify-content: flex-start !important;
}


#general-contratos.budget .panel {
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: flex-start;
    flex-direction: row;
    height: 100%;
}

#general-contratos.budget .columna {
    padding: 0;
}

.budget .grafica-cost {
    margin: 0 15px;
    padding: 15px;
    border-radius: var(--radio-box);
    background: var(--color-box-filters);
    box-shadow: var(--shadow-box);
    font-size: 20px;
}

.budget .grafica-cost>.head>h5 {
    color: var(--color-principal);

}

.budget .grafica-cost>.head #select {
    padding-top: 0;
}

#general-contratos .datos-contrato {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    flex-wrap: wrap;
}

/* #general-contratos #widget .panel {
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    background: var(--color-box-filters);
} */

#general-contratos #widget .panel.addWidget .datos {
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    padding-bottom: 0;
    justify-content: flex-start;
    box-shadow: var(--shadow-box);
    background-color: var(--background-panel-contrato);
    border: 0;
    min-height: 255px;
}

#general-contratos #widget .denominacion {
    flex-direction: row;
    box-shadow: var(--shadow-box);
    background-color: var(--background-panel-contrato);
    border: 0;
    padding: 5px;
}

#general-contratos.budget #widget .punto {
    flex: 1;

}

#general-contratos.budget .paneles {
    overflow-x: initial;
}

#general-contratos.budget #widget .denominacion,
#general-contratos.budget .datos-contrato,
#general-contratos.budget .columna {
    flex: 1;
    height: 100%;
}

#general-contratos.budget #widget .punto {
    padding: 5px;
    height: 100%;
}



.budget .columna>.costes-facility:last-child {
    padding-bottom: 0;
}

/* #general-contratos #widget .panel.addWidget .datos>div {
  flex: 1 1 auto;
} */

#general-contratos #widget .punto {
    display: flex;
    display: -webkit-flex;
    min-height: fit-content;
    flex-direction: column;
    /* padding-bottom: 6px; */
}

#general-contratos #widget #input {
    min-width: auto;
    max-width: none;
}

#iframeContainer {
    width: 100%;
}

#iframeContainer iframe {
    width: 100%;
    height: 100%;
    border-radius: var(--radio-box);
}

@media (max-width: 1362px) {
    #general-contratos .paneles {
        flex-direction: column;
        padding: 6px;
    }

    #general-contratos .visual-contrato {
        order: 1;
    }

    #general-contratos .visual-pdf {
        order: 2;
    }

    #iframeContainer iframe {
        height: 100vh;
    }

    #general-contratos #widget .panel.addWidget {
        padding: 8px;
    }

    #general-contratos.budget #widget .punto,
    #general-contratos.budget #widget .denominacion,
    #general-contratos.budget .datos-contrato,
    #general-contratos.budget .columna {

        height: auto;
    }

    #general-contratos.budget .columna {
        padding: 5px 0;
    }

    .budget .costes-facility {
        padding: 0 !important;
    }

    #general-contratos.budget .columna>div:first-child.costes-facility {
        padding-bottom: 5px !important;

    }
}

@media (max-width: 1024px) {
    #general-contratos .panel-izquierdo {
        height: calc(100vh - 90px);
        padding: 5px;
    }

    #general-contratos .mobile {
        display: flex;
    }

    #general-contratos .sincontrato>span:last-child.tipo {
        font-size: 28px;
        -webkit-animation-name: select1;
        transform: rotate(90deg);
    }

    #general-contratos .panel-busqueda {
        display: none;
    }

    #general-contratos.list .panel-izquierdo {
        display: none;
    }

    #general-contratos.list .panel-derecho {
        max-width: none;
        width: 100%;
    }

    #general-contratos.list .panel-busqueda {
        width: 100%;
        display: flex;
    }

    #general-contratos.list .mobile {
        display: flex;
    }
}

@media (max-width: 400px) {
    #general-contratos .columna {
        min-width: 100%;
    }

}

/********************* GENERAL-USUARIOS **************************************/

#general-usuarios {
    display: flex;
    display: -webkit-flex;

    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    font-family: var(--font-secundaria);
}

#general-usuarios .panel {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    width: 100%;
    background-color: transparent;
}

#general-usuarios .opciones {
    width: 100%;
}

#general-usuarios .tabla-usuarios {
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    flex: 1;
    width: 50%;
    /* font-family: var(--font-principal); */
}

#general-usuarios .graficos-usuarios {
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    flex: 1;
    width: 50%;
    margin-left: 12px;
    /* background: var(--color-box-filters); */
    height: auto;
    height: fit-content;
    /* font-family: var(--font-principal); */
    /* border-radius: 5px; */
}

#general-usuarios .graficos-usuarios>div {
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    background: var(--color-box-filters);
    margin-bottom: 12px;
    /* margin: 12px;    */
    height: auto;
    height: fit-content;
    border-radius: var(--radio-box);
    box-shadow: var(--shadow-box);
}

#general-usuarios .graficos-usuarios h5 {
    font-size: 20px;
    color: var(--color-principal);
    padding: 5px;
    /* font-family: 'NewCicleSemi',
    'Raleway',
    sans-serif; */
    margin-left: 8px;
}

#general-usuarios .graficos-usuarios .opciones {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: flex-end;
}

#general-usuarios .graficos-usuarios .opciones .ampliar {
    color: var(--color-principal);
    font-size: 1.8rem;
    cursor: pointer;
    margin-right: 20px;
}

#general-usuarios .infoWidget {
    padding: 5px;
    color: var(--color-infoWidget);
}

#general-usuarios .box-filters {
    margin: 0;
    border-radius: var(--radio-box);
    padding: 5px 5px;
}

#general-usuarios #tabla {
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
    grid-template-rows: minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 1fr);
    grid-gap: 6px;
    margin-top: 12px;
    margin-bottom: 12px;
}

#general-usuarios #tabla .table {
    margin: 0;
}

#general-usuarios .pagination {
    margin: 0;
}

#general-usuarios .col-estado {
    text-align: right;
    padding-right: 38px;
}

#general-usuarios .panel-usuario {
    flex: 1 1;
    /* border:1px red solid; */
    text-align: center;
    /* margin: 5px; */
    border-radius: var(--radio-box);
    /* and that, will result in a 10px gap */
    background: var(--color-box-filters);
    /* min-width: 227px; */
    /* border: var(--border-separador); */
    box-shadow: var(--shadow-box);
    text-decoration: none;
}

#general-usuarios .panel-usuario:hover {
    cursor: pointer;
    /* background: rgba(0, 192, 239, 0.4); */
    background-color: var(--color-hover);
    transition: all 1s ease-in-out;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}

#general-usuarios .panel-usuario .imagen-usuario {
    height: 60px;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
}

#general-usuarios .panel-usuario .info-usuario {
    background-color: var(--backgrounf-info-usuario);
    color: var(--color-text);
}

#general-usuarios .panel-usuario .info-usuario .usuario i {
    color: var(--color-alarm);
    margin-right: 5px;
}

#general-usuarios .userName {
    color: var(--color-principal);
    font-size: 18px;
    padding-bottom: 5px;
}

#general-usuarios .panel-usuario .info-usuario>div {
    margin-bottom: 5px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#general-usuarios .panel-usuario .imagen-usuario i {
    font-size: 45px;
    color: #dadada;
    transition: color 0.5s cubic-bezier(0.895, 0.03, 0.685, 0.22);
}



#general-usuarios .panel-usuario .imagen-usuario i.offline {
    color: #dadada;
}

#general-usuarios .panel-usuario .imagen-usuario i.online {
    color: var(--color-online);
}

#general-usuarios .panel-usuario:hover .imagen-usuario i {
    color: var(--color-principal);

}




@media (max-width: 1024px) {
    #general-usuarios .panel {
        display: flex;
        display: -webkit-flex;

        flex-direction: column-reverse;
        min-height: fit-content;
        width: 100%;
        background-color: transparent;
    }

    #general-usuarios #tabla {

        grid-template-columns: minmax(100px, 1fr) minmax(100px, 1fr);
    }

    #general-usuarios .tabla-usuarios {
        display: flex;
        display: -webkit-flex;

        flex-direction: column;
        flex: 1;
        width: 100%;
    }

    #general-usuarios .graficos-usuarios {
        display: flex;
        display: -webkit-flex;

        flex-direction: column;
        flex: 1;
        width: 100%;
        margin-left: 0;
        /* background: var(--color-box-filters); */
        height: auto;

        height: fit-content;
        /* border-radius: 5px; */
    }

}


/********************* GENERAL-USUARIO **************************************/
#general-usuario .table {
    grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 1fr);
}

#general-usuario .table.alarms {
    grid-template-columns: max-content minmax(100px, 1fr) minmax(100px, 1fr) minmax(100px, 130px);
}

.gmao {
    flex-direction: row;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
}

.gmao #tabla td i {
    margin: 1px 0;
}

.gmao .info-companies {
    padding: 0 5px;
}

.gmao.buscar {
    padding-right: 0;
}

.gmao>div {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    overflow-x: auto;

}

/* .gmao>div>div {
    width: 100%;

} */

/* .gmao .toggle {
    justify-content: flex-end;
} */

.panel-filters {
    display: flex;
    padding: 8px;
    justify-content: center;
}

.panel-filters>.panel-info {
    padding: 0 5px;
}

.panel-filters .tag>span {
    font-size: 14px !important;
}

#soporte.gmao {
    padding-left: 50px;
}

#soporte.gmao .panel-filters {
    justify-content: flex-start;
}

#general-usuario.gmao>div {
    width: 100%;
}

#general-usuario.gmao .table {
    grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) max-content;
    overflow-x: auto;
}



#general-contratos.gmao .table {
    grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 93px) minmax(max-content, max-content);
    overflow-x: auto;
}

#soporte.gmao .table {
    grid-template-columns: minmax(max-content, max-content) minmax(max-content, max-content) minmax(300px, 1fr) minmax(max-content, 0.2fr) minmax(max-content, max-content) minmax(max-content, max-content);
    overflow-x: auto;
}

#soporte.gmao .table.options {
    grid-template-columns: minmax(max-content, max-content) minmax(max-content, max-content) minmax(300px, 1fr) minmax(max-content, 0.2fr) minmax(max-content, max-content) minmax(max-content, max-content) minmax(max-content, max-content);
    overflow-x: auto;
}

#general-contratos.gmao .plants .table {
    grid-template-columns: minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 1fr) minmax(max-content, 93px) minmax(max-content, max-content);
    overflow-x: auto;
}

#general-contratos.gmao .table-box-option #select {
    padding-top: 10px;
}

#general-usuario.gmao .table .botones,
#general-contratos.gmao .table .botones,
.table .botones {
    display: flex;
    justify-content: center;
    align-items: center;
}

#general-usuario.gmao .table .botones .btn,
#general-contratos.gmao .table .botones .btn {
    padding: 1px;
    min-width: none;
    margin: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.plants {
    width: 100%;
}

.gmao a {
    color: var(--color-principal);
}

#soporte.gmao .panel-soporte {
    height: calc(100% - 50px);
    height: calc(100vh - 50px);
}

#general-usuario .panel-usuario {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}

#general-usuario .info-box {
    display: flex;
    display: -webkit-flex;

    /* flex-basis: 560px; */
    flex-direction: column;
    padding: 15px;
    border-radius: var(--radio-box);
    background: var(--color-box-filters);
    margin: 8px;
    box-shadow: var(--shadow-box);
}

#general-usuario .bloqueo {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

#general-usuario .columna {
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
}

#general-usuario .fila {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    flex-wrap: nowrap;
    width: 930.14px;
    margin-left: 5px;
    margin-right: 5px;
}

#general-usuario .fila .panel-botones {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    /* border: 0 !important; */
    flex-basis: 20%;
    width: 100%;
}

#general-usuario .fila .panel-botones.full {
    flex-basis: 100%;
    justify-content: flex-end;
}

#general-usuario .fila .info-bloqueo {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: var(--color-text);
    flex-basis: 80%;
    width: 100%;
    /* margin: 15px; */
}

#general-usuario .fila .info-bloqueo .info {
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#general-usuario .fila .info-bloqueo .icon {
    width: 133px;
    height: 70px;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
}

#general-usuario .fila .info-bloqueo .icon i {
    font-size: 65px;
    color: var(--color-alarm)
}

#general-usuario .fila .info-bloqueo h3 {
    color: var(--color-principal)
}

#general-usuario .fila .info-bloqueo span {
    text-align: center;
}

#general-usuario .info-box.usuario {
    width: 100%;
}

#general-usuario .info-box.permisos {
    min-width: 312px;
}

#general-usuario .info-box.instalaciones {
    width: 914.14px;
}

#general-usuario .info-box.permisos .icon {
    font-size: 114px;
    width: 100%;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    height: 258px;
    color: var(--color-icon);
}

#general-usuario .info-box .titulo {
    font-family: var(--font-secundaria);

    color: var(--color-principal);
    font-size: 18px;
}

#general-usuario .info-box .datos {
    display: flex;
    display: -webkit-flex;

    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
    padding-bottom: 5px;
    color: var(--color-text);
}

#general-usuario .info-box .datos>div {
    display: flex;
    display: -webkit-flex;

    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
}

#general-usuario .info-box .datos>div .input-group {
    width: 100%;
}

#general-usuario .input-fijo {
    color: var(--color-text);
    padding-top: 25px;
    /* margin-bottom: 5px; */
    display: flex;
    display: -webkit-flex;

    align-items: center;
    width: 100%;
    cursor: not-allowed;
}

#general-usuario .input-fijo .icon {
    color: var(--color-principal);
    font-size: 18px;
}

#general-usuario span.legend.fixed {
    position: relative;
    /* right: -16px; */
    top: -22px;
    left: -74px;
}

#general-usuario .valor {
    margin-right: 0px;
    padding-left: 5px;
    font-size: 17px;
}

#general-usuario .valores {
    border-bottom: 1px solid var(--color-text);
    width: 100%;
    margin-right: 21px;
    margin-left: 21px;
}

@media (max-width: 1020px) {
    #general-usuario .info-box {
        width: 100%;
    }

    #general-usuario .info-box.instalaciones,
    #general-usuario .fila {
        width: 100%;
    }

    #general-usuario .columna {
        width: 100%;
    }
}

@media (max-width: 767px) {
    #general-usuario .info-box .datos {
        flex-wrap: wrap;
    }

    #general-usuario .fila {
        flex-wrap: wrap;
    }

    #general-usuario .fila .panel-botones,
    #general-usuario .fila .info-bloqueo {
        flex-basis: 100%;
    }

    .pagination {

        min-width: 300px;
    }
}


/********************* DASHBOARD **************************************/
.panel-dashboard {
    font-family: var(--font-secundaria);

    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    /* width: 100%; */
    /* padding: 10px; */
    /* flex-grow: 1; */
    height: calc(100vh - 50px);
    width: calc(100vw - 50px);
    overflow-y: auto;

}

.panel-dashboard .column-reverse {
    display: flex;
    flex-direction: column-reverse;
    min-height: fit-content;
}

.panel-dashboard .botones-save {
    background-color: var(--color-menu);
    display: flex;
    min-height: fit-content;

    align-items: center;
    justify-content: center;
    border-top: 0;
    margin: 0 15px;
    border-radius: var(--radio-box);
}

.panel-dashboard .compartir {
    display: flex;
    min-height: fit-content;
    justify-content: flex-start;
    align-items: center;
    padding-left: 5px;
    font-family: var(--font-secundaria);
}

.panel-dashboard .compartir>button {
    display: flex;
    min-height: fit-content;
    align-items: center;
}

.panel-dashboard .compartir>button>i {
    margin-right: 5px;
}

.panel-izquierdo {
    display: flex;
    /* min-height: fit-content; */
    display: -webkit-flex;
    flex-direction: column;
    flex: 1;
    /* max-height: 100%; */
    /* height: calc(100vh - 50px); */
    overflow-x: auto;
}

.gmao .panel-izquierdo {
    align-items: center;
}

.panel-derecho {
    display: flex;
    min-height: fit-content;
    display: -webkit-flex;
    flex-direction: row;
    width: fit-content;
    height: 100%;
}

.panel-derecho>div.ng-enter {
    animation: 0.7s slideInRight ease;

}

.panel-dashboard-edicion {
    font-family: var(--font-secundaria);
    height: 100%;
    width: auto;
    display: flex;
    min-height: fit-content;
    display: -webkit-flex;
    flex-basis: 506px;
    box-shadow: var(--shadow-box);
}

.panel-dashboard-edicion.ng-enter {
    animation: 0.7s slideInRight ease;

}

/* .panel-dashboard-edicion.ng-leave {
    animation: 0.2s slideOutRight ease;
} */
.panel-dashboard-edicion .tag {
    display: flex;
    min-height: fit-content;
    padding-top: 5px;
    font-size: 10px;
    flex-wrap: wrap;

}

.panel-dashboard-edicion .tag>div {
    /* padding: 5px 0px; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 5px;
    background-color: var(--color-principal);
    border-radius: var(--radio-box);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

}

.panel-dashboard-edicion .tag>div.kpi:hover {
    background-color: var(--color-widget-hover);

    cursor: pointer;
}

.panel-dashboard-edicion .tag>div>span {
    display: flex;
    justify-content: flex-start;
    min-height: 100%;
    align-items: center;
    padding: 0px 4px;
}

.panel-dashboard-edicion .tag>div>span:last-child {
    color: var(--color-tag);
}

.panel-dashboard-edicion .tag>div.kpi:hover>span:last-child {
    color: var(--color-tag);

}

.panel-dashboard-edicion .tag>div>span.operacion {

    font-size: 13px;
    border-top-left-radius: var(--radio-box);
    border-bottom-left-radius: var(--radio-box);
    background-color: var(--color-widget-hover);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.panel-dashboard-edicion .tag>div.kpi:hover>span.operacion {
    background-color: var(--color-principal);
}

/* .panel-dashboard-edicion .tag div> span.cancel{
   
    font-size: 13px;
    border-top-right-radius: var(--radio-box);
    border-bottom-right-radius: var(--radio-box);
    background-color: var(--color-btn-error);
} */
.panel-dashboard-edicion.minimize {
    flex-basis: 92px;
}

.panel-dashboard-visual {
    /* display: flex;
    display: -webkit-flex; */

    flex-direction: column;
    width: 100%;
    /* min-height: 100%;  */
    overflow: auto;
    flex: 1;
}

.panel-dashboard-visual .botones {
    display: flex;
    display: -webkit-flex;
    min-height: fit-content;

    justify-content: center;
    align-items: center;
    padding: 15px;
    width: 100%;
    border: 0;
}

.panel-dashboard-visual .botones-bms {
    display: flex;
    width: 100%;
    flex-direction: column;
    min-height: fit-content;

    background-color: var(--background-panel-elementos);
    min-height: fit-content;
    border-top-left-radius: var(--radio-box);
    border-top-right-radius: var(--radio-box);

}

.panel-dashboard-visual .botones-bms-image {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    min-height: fit-content;
    flex-wrap: wrap;
    flex: 1;
}

.panel-dashboard-visual .bms-opciones {
    display: flex;
    width: 100%;
    flex-direction: row;
    min-height: fit-content;
    flex-wrap: wrap;


}

.panel-dashboard-visual .bms-opciones>.btn-group {
    flex: 1;
    padding: 0 0 0 5px !important;
}

#dashboard {
    width: 100%;
    height: auto;
    height: fit-content;

}

#dashboard.grupos {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    /* align-items: center; */
    flex-direction: column;
    padding: 5px;
    width: 100%;
    height: auto;

    height: fit-content;

    background-color: var(--color-fondo-decreto);

    /* padding-top: 4rem; */
}

visual-edit-decreto #dashboard.grupos {

    background: var(--background-app-decreto);
    background-color: var(--color-fondo-decreto);

    background-size: cover;

}

/* En el caso de dashboard el panel se adapta a las columnas establecidas */
#dashboard .box-widgets {
    width: 100%;
    height: auto;

    height: fit-content;
    min-height: fit-content;

    display: flex;
    display: -webkit-flex;


}

#dashboard .box-widgets .grupo {
    flex: 1;
    display: flex;
    display: -webkit-flex;
    min-height: fit-content;

    border-radius: var(--radio-box);
    /* align-self: center; */
    justify-content: center;
    flex-direction: row;
}

/* #dashboard.BMS .grupo {
    width: 100%;
} */

#dashboard .datos-grupo {
    display: grid;
    grid-auto-columns: minmax(290px, 290px);
    grid-auto-rows: 183px;
    grid-gap: var(--wrap-dashboard);
    padding: 10px;
    width: fit-content;
}

#dashboard.BMS .datos-grupo {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-rows: 183px;
    grid-gap: 5px;
    padding: 0 4px;

    width: 100%;
    height: auto;

    height: fit-content;
}


#dashboard .edicion .datos-grupo {
    background-color: var(--background-edicion);
    border: 1px solid #5c94cd91;
    border-radius: var(--radio-box);
    grid-auto-columns: minmax(290px, 290px);
}




#dashboard #tabla tbody>tr:first-child>td:first-child {
    border-top-left-radius: 0;
}

#dashboard #tabla tbody>tr:first-child>td:last-child {
    border-top-right-radius: 0;
}

#dashboard #tabla tbody>tr>td {
    background-color: transparent;
}



#dashboard #tabla {
    width: 100%;
    height: 100%;
    padding: 0 5px;
    padding-top: 0;
    margin-bottom: 17px;
    overflow: auto;
    font-family: var(--font-secundaria);

    font-weight: bold;
    /* font-family: 'Roboto'; */
}

#dashboard .estados #tabla {
    height: auto;
}

/* #dashboard #tabla thead>tr>th:first-child {
    border-top-left-radius: 0;
}

#dashboard #tabla thead>tr>th:last-child {
    border-top-right-radius: 0;
} */

#dashboard #tabla tbody>tr:last-child>td:first-child {
    border-bottom-left-radius: 0;
}

#dashboard #tabla tbody>tr:last-child>td:last-child {
    border-bottom-right-radius: 0;
}

#dashboard #tabla .even {
    background-color: transparent;
    border-bottom: 1px solid #7373736e;
}

#dashboard #tabla .odd {
    background-color: transparent;
    border-bottom: 1px solid #7373736e;
}

#dashboard #tabla tbody>tr>td {
    min-height: 30px;

    padding: 0;
    margin: 0;
    font-size: 15px;
    height: max-content;
}

/* #dashboard #tabla td.fecha {
    width: 125px;
} */

#componente {
    overflow: hidden;
    box-shadow: var(--shadow-box);
    border-radius: var(--radio-box);
}

#componente.edicion {
    animation: none;
}

#componente .conjunto .dato-1 {
    font-size: 1.2em !important;
    padding-top: 15px;
}

#componente .alerta {
    font-family: var(--font-secundaria);
    display: flex;
    display: -webkit-flex;
    min-height: fit-content;

    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #999;

}

#componente .grafica .alerta,
#componente .graficaFranja .alerta {
    padding-bottom: 22px;
}

#componente .alerta {
    font-size: 20px;
}

#componente .alerta>span {
    font-family: var(--font-secundaria) !important;
    padding: 0 5px;
    font-size: 0.9em;
    text-align: center;
}

#componente .conjunto .dato-1 .unidad {
    font-size: 1.2em;
}

#componente .conjunto .panel-iconos {
    padding-top: 15px;
}


#componente .conjunto .panel-iconos.only {
    height: auto;

    height: fit-content;
    display: flex;
    display: -webkit-flex;
    min-height: fit-content;

    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

#componente .conjunto .panel-iconos .panel-icon {
    margin: 15px;
    font-size: 1.2em;
}

#componente .conjunto .panel-iconos.only .panel-icon {

    margin: 5px 24px;
    font-size: 59px;
    display: flex;
    display: -webkit-flex;
    min-height: fit-content;

    justify-content: center;
    align-items: center;
}

#componente.edit {
    flex-basis: 100%;
}

#componente .panel {
    display: flex;
    min-height: fit-content;

    display: -webkit-flex;

    /* align-items: center;
  justify-content: center; */
    background: var(--color-widget);
    color: var(--color-text);

    /* background-color: var(--color-widget);  
    backdrop-filter: blur(5px); */
    border: var(--border-widget);

    position: relative;
    border-radius: var(--radio-box);
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    font-size: 18px;
    /* box-shadow: var(--shadow-box); */
}

#componente.panel-edicion {
    border: 2px solid var(--color-secundario);
    position: relative;
    border-radius: var(--radio-box);
    width: 100%;
    height: 100%;
    margin: 0;
}

#componente.add-column {
    position: relative;
    border-radius: var(--radio-box);
    /* width: 100%; */
    width: fit-content;
    height: 100%;
    margin: 0;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
}

#componente.add-column i {
    font-size: 150px;
    color: var(--color-icon-widget);
}

#componente.edicion {
    cursor: grab;
}

#componente .panel.add {
    background: var(--color-widget-edicion);
}

#componente .panel.addWidget {
    background: var(--color-fondo-desplegables);
    padding: 15px 15px;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    flex-wrap: wrap;
}

#componente .panel.addWidget .titulo {
    margin-top: 25px;
    font-size: 23px;
    color: var(--color-principal);
    text-align: center;
}

#componente .panel.addWidget .subTitulo {
    margin-top: 25px;
    font-size: 16px;
    color: var(--color-principal);
    /* text-align: center; */
}

#componente .panel.addWidget .subTitulo i {
    color: var(--color-text);
}

#componente .panel.addWidget .datos {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    padding: 10px 0 0 0;
    position: relative;
    background-color: rgba(85, 85, 85, 0.37);
    padding-bottom: 24px;
}

#componente .panel.addWidget .datos .borrar {
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    color: var(--color-btn-error);
    display: flex;
    display: -webkit-flex;

    position: absolute;
    font-size: 16px;
    top: 0;
    right: 0;
    margin: 8px;
}

#componente .panel.addWidget .datos .borrar .icon {
    cursor: pointer;
}

#componente #input {
    max-width: 250px;
    min-width: 250px;
}

#componente .panel.addWidget .datos>div {
    /* margin: 0 5px; */
    flex-basis: 20%;
}

#componente .panel.add:hover {
    cursor: pointer;
    background: var(--color-widget);
}

#componente .panel .infoWidget {
    flex: 1 1 auto;
    color: var(--color-infoWidget);
    position: absolute;
    bottom: 0;
    font-size: 18px;
    /* font-size: 0.67em; */

    font-family: var(--font-secundaria);
}

#componente .panel .infoWidget>span {
    font-size: 0.67em;
}

#componente .panel .infoWidget {
    margin-left: 10px;
}

#componente .grafica-widget {
    flex: 1;
    padding-bottom: 16px;
    /* margin-bottom: 20px;
  min-width: 312px; */
    /* height: 100%; */
}

#componente .box-data {
    flex: 3 1 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    width: 100%;
    height: 100%;

    /* min-height: 100px; */
}

#componente .box-data #tabla thead>tr>th,
#componente .box-data #tabla tbody>tr>td,
#componente .box-data #tabla thead>tr>th:first-child,
#componente .box-data #tabla tbody>tr>td:first-child,
#componente .box-data #tabla tbody>tr>td:last-child,
#componente .box-data #tabla tbody>tr:last-child>td:first-child,
#componente .box-data #tabla tbody>tr:last-child>td:last-child,
#componente .box-data #tabla thead>tr>th:last-child {
    border: 0;
}

#componente .box-data>.head {
    /* flex: 1 1 auto; */
    height: auto;
    height: fit-content;
    font-size: 18px;

}

#componente .box-data>.head h5 {
    font-family: var(--font-secundaria);
    text-align: left;
    /* font-size: 0.8em; */
    font-size: 0.85em;
    margin-left: 5px;
    text-align: center;
    margin-right: 5px;
    display: block;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    padding-bottom: 1px;
    font-weight: 500;

}

#componente .box-data>.panel-icon {
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    color: var(--color-icon-widget);
    position: absolute;
    right: 15px;
    bottom: 15px;
}

#componente .url .box-data .image,
#componente .url .box-data.cover .image,
#componente .camara .box-data .image,
#componente .camara .box-data.cover .image {
    width: 80%;
    object-fit: scale-down;
}

#componente .url .box-data.fill .image,
#componente .camara .box-data.fill .image,
#componente .agrupacion .box-data.fill .image {
    width: 100%;
    object-fit: fill;
    flex: 1;
    border: 0;
}

#componente .panel-widget {
    /* -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; */
    color: var(--color-btn-error);
    position: absolute;
    /* margin: 5px; */
    /* right: 10px; */
    z-index: 999;
    top: -2px;
}

#componente .panel-widget.edit {
    bottom: -4px;
    top: inherit;
}

.panel-widget.edit.ng-enter {
    animation: 0.5s fadeIn linear;

}

/* .panel-widget.edit.ng-leave {
    animation: 0.3s fadeOut linear; 

} */
#componente .panel-widget.add {
    color: var(--color-principal);
}

#componente .box-data>.panel-icon>.icon {
    font-size: 4em;
}

#componente .box-data .energyPrices .titulo {

    color: var(--color-text);
    font-size: 0.8em;

}

.energyPrices .column {
    flex: 1 0;
    min-height: 100%;
    padding: 5px 5px 0 5px;
}

.energyPrices .date {
    /* font-family: var(--font-terciaria); */
    color: var(--color-placeholder);
    font-size: 0.7em;

}

.energyPrices .titulo {
    font-size: 0.7em;
}

.energyPrices .precio {
    font-size: 1em;
    font-family: var(--font-secundaria)
}

.energyPrices .precio>span {
    font-size: 0.7em;
    /* font-family: var(--font-terciaria) */
}

#componente .valor {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex: 2;
    z-index: 0;
    /* overflow-y: auto; */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    /* El min-hegiht está para que no se desborden las tablas */
    min-height: 60px;
    /* padding-bottom: 22px; */
}

#componente .estados .valor {
    justify-content: flex-start;

}

#componente .numerico .valor,
#componente .conjunto .valor {
    padding-bottom: 22px;
}

#componente .valor>span {
    color: var(--color-infoWidget);
    margin-right: 6px;
}

/* #componente .widget-icon .valor {
    font-size: 80px;
} */

#componente .valor>.dato {
    /* font-family: 'NewCicleSemi', 'Raleway', sans-serif; */
    font-family: var(--font-terciaria);

    font-size: 1.50em;
    line-height: 1;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    text-align: center;
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
}

#componente .url .valor>.dato,
#componente .camara .valor>.dato {
    height: 100%;
    align-items: initial;
}

#componente .valor>.dato>.valor-dato {
    max-width: 78%;
    /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
}

#componente .texto .valor>.dato {
    font-family: var(--font-especial);
}

#componente .valor>.dato .unidad {
    font-family: var(--font-terciaria);

    font-size: 0.57em;
    /* font-family: var(--font-principal); */
    padding-left: 4px;
    padding-bottom: 3px;
}

/* #componente .valor>.dato .icono {
    font-size: 0.77em;
} */
#componente .valor>.dato .icono {
    font-size: 3em;
}

#componente .progreso {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    height: 100%;
    /* padding-bottom: 22px; */
}

/* #componente .progreso>div {
    min-height: 80px;
} */
#componente .progreso span {
    font-family: var(--font-terciaria);
}

#componente .progreso>span {
    font-size: 3rem;
    line-height: inherit !important;
    margin-top: 47px !important;
    /* font-family: 'NewCicleSemi', 'Raleway', sans-serif; */
    /* font-family: var(--font-terciaria); */

}

#componente .estadistica {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    flex-direction: row;
}

#componente .estadistica>.titulos {
    /* flex: 1 1; */
    margin: 5px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    justify-content: center;
    font-size: 2rem;
    color: var(--color-secundario);
}

#componente .estadistica>.valores {
    /* flex: 1 1; */
    margin: 5px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    font-family: var(--font-secundaria);

    font-size: 4rem;
}

#componente .estadistica>.valores>div,
#componente .estadistica>.titulos>div {
    flex: 1;
    margin: 5px;
    display: flex;
    display: -webkit-flex;

    /* justify-content: center; */
    align-items: baseline;
    height: 40px;
}

#componente .estadistica>.titulos>div {
    align-items: flex-end;
}

#componente .estadistica>.valores>div span {
    font-size: 2rem;
    padding-left: 5px;
}

#componente .error {
    border-bottom: 0.5px solid var(--color-error);
}

#componente .tabla-estados {
    display: flex;
    display: -webkit-flex;

    width: 100%;
    flex-direction: row;
}

#componente .estado {
    flex: 1;
    justify-content: center;
    text-align: center;
    display: flex;
    display: -webkit-flex;

}

#componente .estado>div {
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#componente .estado>div .numero {
    font-size: 20px;
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#componente .estado>div .numero>i.online {
    color: var(--color-online);
}

#componente .estado>div .numero>i.offline {
    color: var(--color-offline);
}

#componente .estado>div .numero>span {
    font-size: 1.5em;
    padding: 8px;
}

#componente #tabla .dato {
    /* border-radius: var(--radio-box); */
    font-family: var(--font-secundaria);
    padding: 0;
    padding-right: 5px;
    /* min-width: 70px; */
    /* background-color: var(--color-offline); */
}

#componente #tabla thead>tr>th {
    color: var(--color-text);
    /* text-align: center; */
    padding: 3px;
    font-size: 12px;
    /* font-weight: bold; */
    /* border-bottom: 0; */
    /* font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
    font-family: var(--font-secundaria);

}

#componente #tabla thead>tr {
    background-color: transparent;
    /* padding-right: 30px; */
}

#componente .box-agrupacion {
    position: absolute;
    height: 100%;
    width: 100%;
}

#componente .table-agrupacion {
    display: grid;
    height: 100%;

}

#componente .table-agrupacion>.row-agrupacion {
    display: grid;
    grid-auto-columns: fr;
    height: 100%;
}

.edicion #componente .table-agrupacion>.row-agrupacion>.column-agrupacion {
    border: 1px solid var(--color-secundario);
    border-radius: var(--radio-box);
}

.edicion #componente .table-agrupacion>.row-agrupacion>.column-agrupacion>.panel-widget {
    right: 0;
    top: 0;
}


@media (max-width: 1500px) {
    #dashboard .datos-grupo {
        grid-auto-columns: minmax(80px, 250px);
    }

    .panel-dashboard {
        width: 100%;
    }

    #tabla .titulo>span,
    #tabla .dato>span {
        /* padding: 1rem 1rem; */
        /* border-radius: 1rem; */
        font-size: 1em;
    }

    #componente .conjunto .panel-iconos .panel-icon {
        margin: 5px;
    }

    #componente .estado>div .numero {
        font-size: 2.3rem;
    }

}

@media (max-width: 1050px) {
    #dashboard .box-widgets {
        width: 100%;
        height: auto;

        height: fit-content;
    }

    #componente .panel,
    #componente .panel .infoWidget,
    #componente .box-data>.head {
        font-size: 12px;
    }

    #componente .alerta {
        font-size: 14px;
    }

    /* #componente .widget-icon .valor {
        font-size: 50px;
    } */

    #dashboard #tabla tbody>tr>td {

        font-size: 12px;
    }

    /* #dashboard .box-widgets {
         width: 100%;
     } */
    #dashboard .datos-grupo {
        /* grid-template-columns: 100% !important;
        grid-auto-columns: unset;
        width: 100%; */
        grid-auto-rows: 120px !important;
        grid-gap: 5px !important;
        padding: 5px !important;
    }

    #componente .conjunto .panel-iconos,
    #componente .conjunto .dato-1 {
        padding: 5px !important;
    }

    /* .panel-dashboard {
        overflow: hidden;
        height: auto;
    } */

    #componente .panel .infoWidget {
        margin-left: 2px;
    }

    #componente .box-data>.panel-icon {
        right: 5px;
        bottom: 5px;
    }

    #componente .conjunto .panel-iconos .panel-icon {
        margin: 5px;
    }

    #componente .valor>.dato .unidad {
        padding-left: 2px;
        padding-bottom: 2px;
    }

    #dashboard #tabla {

        padding: 0 15px;

    }

    #tabla .titulo>span,
    #tabla .dato>span {
        padding: 0.3rem 0.6rem;
        min-width: 50px;
        font-size: 1rem;
    }

    #componente .estado>div .numero {
        font-size: 1.6rem;
    }
}

@media (max-width: 600px) {
    #dashboard .datos-grupo {

        grid-auto-rows: 89px !important;
        grid-gap: 5px !important;
        padding: 1px !important;
    }

    #componente .conjunto .panel-iconos,
    #componente .conjunto .dato-1 {
        padding: 5px !important;
    }

    #componente .conjunto .panel-iconos .panel-icon {
        margin: 2px;
    }

    #componente .numerico .valor,
    #componente .conjunto .valor {
        padding-bottom: 5px;
    }

    #componente .valor>.dato .unidad {
        padding-left: 1px;
        padding-bottom: 0;
    }

    /* #componente .widget-icon .valor {
        font-size: 35px;
    } */

    #componente .panel,
    #componente .panel .infoWidget,
    #componente .box-data>.head {
        font-size: 8px;
    }

    #componente .panel {
        border: 0.3px solid var(--color-widget);
        box-shadow: none;
    }

    #componente .alerta {
        font-size: 10px;
    }

    #dashboard #tabla {
        margin-bottom: 9px;
    }

    #dashboard #tabla tbody>tr>td,
    #dashboard #tabla thead>tr>th {

        font-size: 7px;
        padding: 1px;
    }

    #dashboard #tabla {

        padding: 0 5px;
    }

    #tabla .titulo>span,
    #tabla .dato>span {
        padding: 0.1rem 0.3rem;
        border-radius: 0.2rem;
        min-width: 5px;
        font-size: 0.5rem;
    }

    #componente .estado>div .numero {
        font-size: 0.6rem;
    }

}

/********************* PANEL-FLOTANTE **************************************/

/* #panel-flotante {
    position: fixed;
    right: 0;
    z-index: 9;
    top: 0;
    padding-top: 52px;
} */

.panel-flotante-fixed #panel-flotante {
    padding-top: 0;
}

#panel-flotante.panel-edicion {
    width: 506px;
    height: 100%;
    position: relative;
    display: flex;
    display: -webkit-flex;
    margin: 0;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    /* transition: width 0.3s ease; */
    /* padding: 10px 10px 10px 0; */
    border-radius: var(--radio-box);
}

#panel-flotante.minimize.panel-edicion {
    width: 120px;
}

#panel-flotante.panel-edicion.ng-enter {
    animation: 0.5s slideInRight ease-in-out;
}

#panel-flotante>.titulo {
    /* padding: 5px; */
    width: 100%;
    height: fit-content;
    background-color: var(--color-menu);
    border-top-left-radius: var(--radio-box);
    border-top-right-radius: var(--radio-box);
    display: flex;
    flex-direction: row;
    align-items: center;
    border: var(--border-separador);
}

#panel-flotante>.titulo>* {
    width: fit-content;
    padding: 0 5px;
}

#panel-flotante>.titulo .icon {
    color: var(--color-principal);
}

#panel-flotante>.titulo h5 {
    font-family: var(--font-secundaria);
    /* font-weight: bold; */
    color: var(--color-text);
    display: flex;
    justify-content: center;
    align-items: center;
}

#panel-flotante>.titulo h5>i {
    /* font-family: var(--font-secundaria); */
    /* font-weight: bold; */
    color: var(--color-principal);
}

#panel-flotante h3 {
    margin: 10px 15px;
    color: var(--color-text);
    font-size: 25px;
    /* height: 77px; */
    line-height: 30px;
    font-weight: 300;
    text-transform: none;
    white-space: pre-wrap;
    font-family: var(--font-secundaria);
}

#panel-flotante .tipos-widgets,
#panel-flotante .datos-widget {
    flex: 10 0 0;
    color: var(--color-text);
    background-color: var(--background-panel-elementos);

    border: var(--border-separador);
    width: 100%;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    overflow-y: auto;
}

#panel-flotante .datos-widget {
    padding: 0 15px;
}

#panel-flotante div #input,
#panel-flotante div #date-picker {
    padding-left: 8px;
    padding-right: 8px;
}

#panel-flotante div .container-select {
    padding-left: 0;
    padding-right: 0;
}

/* #panel-flotante .datos-widget>div:last-of-type {
    margin-bottom: 20px;
} */

#panel-flotante .btn-collapse {
    width: 100%;
    cursor: pointer;
    color: var(--color-text);
    background-color: var(--background-panel-flotante);
    height: 30px;
    display: flex;
    display: -webkit-flex;
    border: var(--border-separador);
    border-bottom-left-radius: var(--radio-box);
    border-bottom-right-radius: var(--radio-box);
    align-items: center;
}

#panel-flotante .btn-collapse .icon {
    font-size: 22px;
}

#panel-flotante .btn-collapse span {
    margin-left: 15px;
    display: flex;
    display: -webkit-flex;

    align-items: center;
}

#panel-flotante .btn-collapse span.minimize {
    margin-left: 0;
}

#panel-flotante .datos-widget #input {
    margin-top: 20px;
}

#panel-flotante .datos-widget .titulo {
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    margin-top: 48px;
    margin-left: 15px;
    margin-right: 15px;
}

#panel-flotante .tipo-widget {
    width: 100%;
    border-bottom: var(--border-separador);
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    height: 140px;
    flex-wrap: nowrap;
    overflow: hidden;
}

#panel-flotante .tipo-widget:hover {
    background-color: var(--color-widget-hover);
    cursor: pointer;
}

#panel-flotante .tipo-widget .image {
    flex: 1 1 auto;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    color: var(--color-secundario);
}

#panel-flotante .tipo-widget .image img {
    width: 130px;
    height: 110px;
    margin-left: 5px;
}

#panel-flotante .tipo-widget .image i {
    /* width: 100%;
    height: 30%;
     */
    margin: 0;
    font-size: 35px;
}

#panel-flotante .tipos-widgets.minimize {
    border-top: 0;
    border-top-left-radius: var(--radio-box);
    border-top-right-radius: var(--radio-box);
}

#panel-flotante .tipos-widgets.minimize>div>div:first-child,
#panel-flotante .tipos-widgets.minimize>div>span:first-child {
    border-top-left-radius: var(--radio-box);
    border-top-right-radius: var(--radio-box);
}

#panel-flotante .tipos-widgets.minimize .image i {
    /* justify-content: left; */
    font-size: 24px;
}

#panel-flotante .tipos-widgets.minimize .image img {
    width: 80px;
    height: 68px;
    /* margin-left: 5px; */
}

#panel-flotante .minimize .tipo-widget {
    height: 90px;
}

#panel-flotante .tipo-widget .info {
    flex: 1 1 auto;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    justify-content: center;
}

#panel-flotante .tipo-widget .info .titulo {
    font-size: 18px;
    flex: 1 1 auto;
    display: flex;
    display: -webkit-flex;

    justify-content: flex-start;
    align-items: center;
}

#panel-flotante .tipo-widget .info .descripcion {
    font-size: 12px;
    flex: 1 1 auto;
    display: flex;
    display: -webkit-flex;

    width: 340px;
    justify-content: flex-start;
}

#panel-flotante .tipo-widget .info .descripcion span,
#panel-flotante .tipo-widget .info .titulo span {
    margin: 5px;
}

#panel-flotante .botones-opcionales,
.panel-busqueda .botones-opcionales {
    /* flex: 1 1 0; */
    border: 0;
    width: 100%;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    margin-top: 35px;
}

#panel-flotante .botones {
    /* flex: 1 1 0; */
    border: 0;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    border-bottom-left-radius: var(--radio-box);
    border-bottom-right-radius: var(--radio-box);
    justify-content: center;
    align-items: center;
    border-top: var(--border-separador);
    background-color: var(--color-menu);
}

#panel-flotante .tipo {
    font-size: 16px;
    padding: 10px;
    background-color: var(--background-panel-flotante);
    display: flex;
    display: -webkit-flex;

    align-items: center;
    font-family: var(--font-principal);
    border-bottom: var(--border-separador);
}

#panel-flotante .minimize .tipo {
    justify-content: center;
}

#panel-flotante .tipo .icon {
    font-size: 20px;
    color: var(--color-principal);
}

#panel-flotante .box-add,
#panel-flotante .box-edit {
    /* background-color: rgba(29, 23, 23, 0.5); */
    background-color: var(--background-box);
    border-radius: var(--radio-boton);
    height: 44px;
    /* margin: 35px 21px 0 21px; */
    margin-top: 20px;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    font-size: 14px;
    /* border: 1px solid var(--color-principal); */
    font-family: var(--font-secundaria);
    box-shadow: var(--shadow-box);
}

#panel-flotante .box-edit {
    min-height: 44px;
    height: auto;
    position: relative;
    border-radius: var(--radio-box);
}

#panel-flotante .box-edit .umbrales {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100%;
}

#panel-flotante .box-edit .umbrales .umbral {
    flex: 1;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#panel-flotante .box-edit .optimo {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#panel-flotante .objetivos {
    padding-bottom: 15px;
}

#panel-flotante .box-add {
    cursor: pointer;
}

#panel-flotante .box-add .icon,
#panel-flotante .box-edit .icon {
    color: var(--color-principal);
    font-size: 31px;
    /* margin-right: 12px; */
    display: flex;
    display: -webkit-flex;

    align-items: center;
}

#panel-flotante .box-edit .icon-analogico {
    margin-top: 4px;
    margin-left: 10px;
    color: var(--color-secundario);
    /* width: 95%;; */
}

#panel-flotante .box-edit .icon-analogico i,
#panel-flotante .box-edit .opcional i {
    color: var(--color-principal);
}

#panel-flotante .box-edit .opcional span {
    margin: 0 29px;
}

#panel-flotante .box-add .icon i,
#panel-flotante .box-edit .icon i {
    cursor: inherit;
}

#panel-flotante .box-edit .info-box-edit {
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    flex-direction: column;
    /* padding-left: 10px; */
    cursor: pointer;
    margin: 5px;
}

#panel-flotante .box-edit:hover,
#panel-flotante .box-add:hover {
    transition-duration: 3s;
    background-color: var(--color-hover);
    border-radius: var(--radio-boton);
}

#panel-flotante .box-edit:hover {
    border-radius: var(--radio-box);
}

#panel-flotante .box-edit .close-box-edit {
    /* height: 20px; */
    display: flex;
    display: -webkit-flex;
    align-items: center;
    cursor: pointer;
    /* color: var(--color-alarm); */
    border-radius: var(--radio-boton);
    /* padding: 4px; */
    position: absolute;
    top: 8px;
    right: 0;
    /* width: 42px;*/
}

#panel-flotante .box-edit .close-box-edit i {
    color: var(--color-alarm);
    font-size: 22px;
}

#panel-flotante .box-edit .info-box-edit .punto {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    width: 100%;
    color: var(--color-principal);
    margin-bottom: 12px;
}

#panel-flotante .box-edit .desc {
    text-align: center;
}

#panel-flotante .box-edit .info-box-edit .punto .desc {
    margin-left: 6px;
    margin-right: 6px;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#panel-flotante .box-edit .info-box-edit .estados {
    width: 100%;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
}

#panel-flotante .box-edit .info-box-edit .estados span {
    padding: 5px;
}

#panel-flotante .box-edit .info-box-edit .estados span>span {
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
}

#panel-flotante .periodo {
    display: flex;
    display: -webkit-flex;
    margin-left: 10px;
    margin-top: 10px;
    position: relative;
    align-content: center;
}

#panel-flotante .periodo .legend {
    /* top: 34px; */
    font-size: 14px;
    margin-left: 0px;
    z-index: 1;
    color: var(--color-secundario);
}

#panel-flotante .periodo .espacio {
    display: flex;
    display: -webkit-flex;

    align-items: flex-end;
    margin-bottom: 10px;
    padding: 0px 14px;
    font-size: 15px;
    color: var(--color-principal);
}

#panel-flotante .periodo>.container-select {
    flex: 1;
}

#panel-flotante .toggle,
#general-usuario .toggle {
    border-radius: var(--radio-box);
    margin-top: 20px;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    position: relative;
}

#general-usuario .table .toggle {
    margin: 0;
}

.modal-body .toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 31px;

}

.modal-body .toggle>span {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.modal-body .toggle>img {
    flex: 1;
    max-width: 50px;
    justify-content: flex-end;
    cursor: pointer;
}

#panel-flotante .toggle img,
#general-usuario .toggle img {
    width: 50px;
    cursor: pointer;
}

#panel-flotante .toggle span,
#general-usuario .toggle span {
    margin-left: 5px;
    color: var(--color-text);

}

#panel-flotante .toggle .info,
#general-usuario .toggle .info {
    color: var(--color-principal);
    position: absolute;
    top: 0;
    right: 2px;
}

#panel-flotante .opciones-agrupacion .opciones {
    display: flex;
    justify-content: center;
    align-items: center;
}

#panel-flotante .opciones-agrupacion .opciones #input {
    margin-top: 0;
}

#general-objetivos {
    margin-left: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-left: 50px;
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    flex-grow: 1;
    height: calc(100vh - 50px);
}

#general-objetivos #input .input-group>.info {

    right: -6px;
}

#general-objetivos .panel-box>.panel-edicion {
    /* color: var(--color-btn-error); */
    margin: 2px;
    position: absolute;
    bottom: 0;
    right: 0;
}

#general-objetivos #tabla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(375px, auto));
    width: 100%;
}

#general-objetivos .panel-objetivos {
    width: 100%;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
    padding: 8px;
}

#general-objetivos .panel-box {
    flex: 1;
    /* border:1px red solid; */
    text-align: center;
    margin: 5px;
    border-radius: var(--radio-box);
    /* and that, will result in a 10px gap */
    background: var(--background-panel-zona-abajo);
    box-shadow: var(--shadow-box);
    min-width: 300px;
    position: relative;
    /* max-width: 371px; */
}

#general-objetivos .panel-box.edicion {
    padding-bottom: 24px;

}

/* #general-objetivos .panel-dashboard-edicion {
    flex-basis: 630px;
} */

#general-objetivos .panel-box .info-box:hover {
    cursor: pointer;
    background: var(--background-panel-zona-hover);
}

#general-objetivos .panel-box .imagen-box {
    /* height: 60px;
    display: flex;
    display:-webkit-flex;
    
    align-items: center;
    justify-content: center; */
    position: absolute;
    bottom: 0;
    margin: 5px;
    right: 4%;
}

#general-objetivos .panel-box .info-box {
    border-radius: var(--radio-box);
    background-color: var(--background-panel-zona);
    /* border: var(--border-separador); */
    color: var(--color-text);
    /* height: 100%; */
    /* padding: 5px; */
    height: 104px;
    position: relative;
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#general-objetivos .panel-box .titulo {
    font-family: var(--font-secundaria);
    color: var(--color-principal);
    font-size: 18px;
    padding: 0 8px;
}

#general-objetivos .panel-box .info-box .box i {
    color: var(--color-alarm);
    margin-right: 5px;
}



#general-objetivos .panel-box .info-box>div {
    margin-bottom: 5px;
}

#general-objetivos .panel-box .imagen-box i {
    /* font-size: 45px; */
    color: var(--color-icon-widget);
    font-size: 85px;
}

#general-objetivos i.notificacion {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    margin-top: 5px;
    margin-right: 5px;
    right: 0;
    border-radius: 100%;
    /* border: 1px blue solid; */
    /* background-color: var(--color-principal); */
    color: var(--background-panel-zona);
}

#general-objetivos i.notificacion.active {
    color: var(--color-principal)
}

@media (max-width: 800px) {
    .panel-boton {
        display: none;
    }

    #general-objetivos #tabla {
        grid-template-columns: 100%;
    }
}

.boton-menu-mobile {
    display: none;
}

.subMenu-mobile {
    visibility: collapse;
    display: none;
}

@media (max-width: 767px) {
    #background-login .form {
        flex-direction: column;
        width: 100%;
        margin-left: 15px;
        margin-right: 15px;
        height: auto;
    }


    #edicion-widget {
        display: none;
    }

    barra-instalacion,
    barra-gmao {
        background-color: transparent;
        z-index: 99999;
        box-shadow: none;
        height: fit-content;
    }

    .subMenu {
        display: none;
    }



    .boton-menu-mobile {
        display: inline;
        position: absolute;
        top: -142px;
        z-index: 9999;
        margin-top: 63px;
        margin-left: 8px;
    }

    .boton-menu-mobile.panel-flotante-fixed {
        display: none;
    }

    .boton-menu-mobile .icon {
        color: var(--color-text);
        font-size: 22px;
    }

    #background-login .form .logoClient {
        background-color: transparent;
    }

    .subMenu-mobile.openNav::before {
        animation: parpadeo 60s infinite linear
    }

    .subMenu-mobile.openNav {
        position: fixed;
        display: flex;
        display: -webkit-flex;

        visibility: visible;
        flex-direction: row;
        width: 195px;
        max-width: 100vh;
        max-width: 100%;
        height: calc(100% - 94px);
        height: calc(100vh - 94px);
        flex-direction: column;
        top: 92px;
        justify-content: flex-start;
        align-items: flex-start;
        background-color: var(--color-menu);
        /* height: 100%; */
        z-index: 99999;
        padding: 5px;
        transition: visibility 1000s;
        border-top: 0.1px solid rgb(218 218 218 / 44%);
    }

    .subMenu-mobile>div {
        display: flex;
        padding: 15px 0;
        width: 100%;
    }

    .subMenu-mobile>div:hover,
    .subMenu-mobile>div.select {
        background-color: var(--color-principal);
        border-radius: var(--radio-box);
    }

    .subMenu-mobile>div:hover span,
    .subMenu-mobile>div.select span {
        color: var(--color-tag);
    }

    .subMenu-mobile>div>a {
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        text-decoration: none;
    }

    .subMenu-mobile>div>a .badge {

        position: absolute;
        margin-right: 0px;
        margin-top: 0px;

    }

    .subMenu-mobile>div>a>i,
    .subMenu-mobile>div>a>div,
    .subMenu-mobile>div>a>svg {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .subMenu-mobile>div>a>svg {
        height: 28px;
    }

    .subMenu-mobile>div>a>span {
        flex: 3;
        color: var(--color-principal);
    }

    .subMenu-mobile.openNav {
        display: flex;
        display: -webkit-flex;
        box-shadow: var(--shadow-box);
        overflow-y: auto;

    }

    .subMenu-mobile.openNav~#general-control {

        filter: blur(4px);
    }

    .subMenu-mobile .icon {
        color: var(--color-text);
        font-size: 19px;
    }

    .subMenu-mobile.openNav.panel-flotante-fixed {
        display: none;
    }

    .subMenu-mobile span.select .icon {
        color: var(--color-principal);
        /* background-color: #6b6969a6; */
    }

    #general-objetivos {
        padding: 0;
    }
}


/*  CSS DE LA MODAL GRAFICA  */


#modal-grafica .modal-body {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
}

.box-filters {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px;
    box-shadow: var(--shadow-box);
    font-size: 18px;
}

.box-filters .rango {
    flex: 2;
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

#modal-grafica #date-picker input {
    margin-top: 0;
}

/* 
#modal-grafica .box-filters .rango>div {
  margin-left: 20px;
} */

.box-filters .periodo {
    display: flex;
    display: -webkit-flex;
    flex: 1;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    min-width: 440px;
}

.box-filters .variables-rango {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex: 2;
    /* padding-left: 20px; */
    align-items: center;
    width: 100%;
    gap:5px
}

.box-filters .agrupacion-botones {
    position: relative;
    align-items: center;
    justify-content: flex-start;
    padding: 5px;
}

#modal-grafica div #input {
    width: 291px;
}

#modal-grafica #date-picker {
    width: 200px;
}

/* #modal-grafica div #input {
    padding-top: 5px;
} */

#modal-grafica #date-picker {
    padding-top: 16px;
}

#modal-grafica #date-picker .legend {
    top: 22px;
}

#modal-grafica #date-picker input:not(.ng-empty)~.legend {
    top: 0px;
}

#modal-grafica .agrupacion-botones>.info {
    color: var(--color-principal);
    position: absolute;
    top: 1px;
    right: 0px;
}

#modal-grafica .botones-filtro {
    width: auto;
}

#modal-grafica .botones-filtro .btn {
    padding: 6px 10px;
    min-width: auto;
    /* margin-top: 28px; */
}

#modal-grafica .franja {
    width: 100%;
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px;
}

#modal-grafica .franja #date-picker input {
    width: 155px;
}

@media (max-width: 767px) {
    .box-filters>div {
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .box-filters .variables-rango {
        justify-content: center;
    }

    .box-filters .periodo {
        width: 100%;
        min-width: 100%;
        flex: auto;
        margin-bottom: 8px;
        justify-content: center;
        align-items: center;
    }

    .box-filters {
        margin: 0;
        margin-bottom: 8px;
        padding: 0;
    }
}

@media (max-width: 1538px) {
    .box-filters .rango {
        width: 100%;
        flex: auto;
        margin-bottom: 8px;
        justify-content: center;
        align-items: center;
    }
}


/* Visualicación de la parte de visual técnica */

#visualizacion {
    /* padding-top: 15px; */
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2px 10px;
    /* width: 100%; */
    /* background: var(--color-box-filters); */
    background-color: var(--color-widget);
    border-radius: var(--radio-box);
    min-height: auto;
    min-height: fit-content;


}

#visualizacion .imagen-responsive {
    position: relative;
    width: 50px;
    height: 50px;

}

#visualizacion .imagen-responsive.bg {
    width: auto;
    height: auto;
    width: fit-content;
    height: fit-content;

}

#visualizacion .edicion.imagen-responsive.bg {
    border: 1px solid #5c94cd91;
    border-bottom-left-radius: var(--radio-box);
    border-bottom-right-radius: var(--radio-box);

}

#visualizacion .imagen-responsive img {
    visibility: hidden;
}

#visualizacion .imagen-responsive.bg img {
    visibility: visible;
}

/* #visualizacion .imagen-responsive.edicion {
    margin-top: 60px;
} */

#visualizacion .indicador {
    color: var(--color-text);
    font-family: var(--font-principal);
}

#visualizacion .indicador>div {
    width: 100%;
    /* height: 100%; */
}

#visualizacion .panel-widget {
    /* -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; */
    color: var(--color-btn-error);
    position: absolute;
    /* display: inline; */
    margin: 0;
    top: -60px;
    height: 60px;
    display: flex;
    display: -webkit-flex;

}

#visualizacion .panel-widget.right {
    right: 0;
}

#visualizacion .panel-widget.left {
    left: 0;
}

#visualizacion .btn-group {
    display: flex;
    display: -webkit-flex;

    align-items: center;
    justify-content: flex-start;
    padding: 0 10px;
}

#visualizacion label.btn {
    margin: 0;
}

#visualizacion .indicador {
    position: absolute;
    background-color: transparent;
    z-index: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    /* -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; */
    text-decoration: none;
    font-size: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: auto;
    height: auto;
}



#visualizacion .panel-invisible {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#visualizacion .panel-invisible>.btn {
    min-width: auto;
}

#visualizacion .panel-invisible>.btn.edit {
    background-color: var(--color-btn-error);
}

#visualizacion .cardOscuro {
    background: var(--background-cardOscuro);
    /* padding-top: 2px; */
    color: var(--color-text);
    font-family: var(--font-principal);

    /* border-radius: 5px; */
    border: solid 0.1em;
    /* padding: 5px; */
    border-color: var(--color-hover);
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-card);
    width: auto;
    height: auto;

}

#visualizacion .cardOscuro .texto span {
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0.3em;
}

#visualizacion .cardOscuro .icon {
    font-size: 1em;
    margin: 0.1em;
    color: var(--color-principal);
}

#visualizacion .cardOscuro>change-size {
    display: flex;
    display: -webkit-flex;

    align-items: center;
}

#visualizacion .widget-option {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}

#visualizacion .widget-option.clone {
    cursor: copy;
}

#visualizacion .widget-option.move {
    cursor: grab;
}

#visualizacion .widget-option.edit,
#visualizacion .widget-option.delete {
    cursor: pointer;
}

#visualizacion .link,
#visualizacion .navegacion,
#visualizacion .planning {
    cursor: pointer;
}

#visualizacion .link a,
#visualizacion .navegacion a {
    color: var(--color-text);
}

#visualizacion .link a:hover,
#visualizacion .link a:focus,
#visualizacion .navegacion a:hover,
#visualizacion .navegacion a:focus {
    text-decoration: none;
}

#visualizacion .indicador .icon.transparent {
    color: transparent !important;
}

#visualizacion .edicion .indicador .icon.transparent {
    border-style: dotted;
    border-color: #ff0700;
}

/*                MODAL WIDGET                  */
#modal-widget .toggle {
    display: flex;
    display: -webkit-flex;

    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

#modal-widget .toggle img {
    height: 27px;
    cursor: pointer;
}

#modal-widget .input-group-addon {
    cursor: pointer;
}

#modal-widget .btn-group .btn {
    min-width: auto;
    margin: 0;
}

#modal-widget .mitad {
    display: flex;
    display: -webkit-flex;

    justify-content: center;
    align-items: center;
}

#modal-widget .mitad {
    display: flex;
    display: -webkit-flex;

    width: 100%;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}

#modal-widget .toggle span {
    padding-left: 20px;
}

#modal-widget #input {
    padding: 0;
}

#modal-widget>div {
    padding: 20px;
}

#modal-widget .btn a {
    color: var(--color-btn-text);
}

#modal-widget .btn a:hover {
    color: var(--color-btn-text-hover);
    text-decoration: none;
}

#modal-widget .btn a:focus {
    text-decoration: none;

}

/*                 MEDIA QUERYS                 */
@media (max-width: 767px) {
    div[id^='general-'] {
        padding-left: 0 !important;
    }

    #general-usuarios {
        padding-left: 15px !important;
    }
}

@media (max-height: 767px) {

    .modal-dialog {
        height: 100%;
    }
}

@-webkit-keyframes navBar {
    0% {
        left: -20;
    }

    50% {
        left: -10;
    }

    100% {
        left: 0;
    }
}

/*                 ICON PULSE                   */
.f-parpadeo {
    display: inline-block;
    -moz-animation: parpadeo 2s infinite linear;
    -o-animation: parpadeo 2s infinite linear;
    -webkit-animation: parpadeo 2s infinite linear;
    animation: parpadeo 2s infinite linear;
}

@-webkit-keyframes parpadeo {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes parpadeo {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes parpadeo {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes parpadeo {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes parpadeo {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* ESTILO DEL PLANNING */
#general-planning {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#general-planning .botones {
    border: 0;
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#general-planning .hora {
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
}

#planning {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 30px;
    grid-gap: 5px;
    padding: 10px;

}

#planning .horas-planning {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    color: var(--color-text);
    font-size: 16px;
    width: 100%;
}

#planning .minutos-planning {
    display: grid;
    grid-template-columns: repeat(96, 1fr);
    font-size: 8px;
    width: 100%;
}

#planning .horas-planning span,
#planning .minutos-planning span {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;

    /* padding: 5px; */
}

#planning .dias-planning span {
    color: var(--color-text);
    display: flex;
    align-items: center;
}

#planning .info-planning {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--color-text);
    /* background-color: var(--color-widget); */
    border-bottom: 0;
    font-family: var(--font-secundaria);
}

#planning .dias-planning {
    display: grid;
    padding: 0px 5px;
    width: 100%;
    height: auto;
    height: fit-content;
    align-items: center;
    grid-template-rows: repeat(7, 30px);
    color: var(--color-text);
    /* background-color: var(--color-widget); */
    border-bottom: 0;
    font-family: var(--font-secundaria);

}

#planning .dias-planning.mobile {
    display: none
}

#planning .planning-fijo {
    position: relative;
    width: 100%;
    height: calc(30px*7);
    background-color: var(--background-panel-elementos);

}

#planning .table-planning-column {
    width: 100%;
    display: grid;
    position: absolute;
    grid-template-rows: repeat(7, 30px);

}

#planning .table-planning-column span {
    border: 1px solid #999;
}

#planning .table-planning-column:hover+#planning .table-planning-row {
    background: #ccc
}

#planning .table-planning-row {
    width: 100%;
    height: 100%;
    display: grid;
    position: absolute;
    grid-template-columns: repeat(24, 1fr);

}

#planning .table-planning-row span {
    border: 1px solid #999;
}

#planning .elemento {
    /* grid-area: 2 / 2 / auto / span 20; */
    background-image: linear-gradient(to right, var(--color-principal) 0%, var(--color-btn-border-hover) 51%, var(--color-principal) 100%);
    /* background-color: var(--color-principal); */
    margin: 5px 0px;
    border-radius: var(--radio-boton);
    display: flex;
    width: 100%;
    position: relative;
    transition: 1s all;
}

/* #planning .elemento.move{
     transition: 1s;
} */
#planning .elemento:focus,
#planning .elemento:hover,
#planning .nowHour:focus,
#planning .nowHour:hover {
    background-position: right center;


}

#planning .elemento>div {
    width: 100%;

}

#planning .elemento span {
    color: var(--color-placeholder);
}

#planning .elemento>.aumento {
    /* background-color: red; */
    visibility: collapse;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8px;
    border-radius: var(--radio-boton);
    font-size: 12px;
    cursor: e-resize;
}

#planning .table-planning {
    width: 100%;
    display: grid;
    position: absolute;
    grid-template-rows: repeat(7, 30px);
    grid-template-columns: repeat(96, 1fr);

}

#planning .table-planning.resize,
#planning .table-planning.resize .elemento:hover {
    cursor: e-resize;

}

/* Para que el mousemove no tenga valores distintos 
cuando entra dentro de un elemento, hace falta quitarle los eventos al elemento */
#planning .table-planning.resize .elemento {
    pointer-events: none;
}

#planning .table-planning.resize .elemento:focus>.aumento,
#planning .table-planning.resize .elemento:hover>.aumento {
    visibility: collapse;
}

#planning .elemento.focus>.aumento,
#planning .elemento:hover>.aumento,
#planning .elemento.resize>.aumento,
#planning .table-planning.resize .elemento.resize:hover>.aumento {
    visibility: visible;
}

#planning .elemento .opciones {
    visibility: collapse;
    position: absolute;
    top: -25px;
    right: 0;
    display: flex;
    justify-content: flex-end;
}

#planning .elemento.focus .opciones {
    visibility: visible;
}

#planning .elemento .opciones .btn {
    height: auto;
    min-width: auto;
    width: fit-content;
    min-width: fit-content;
    font-size: 11px;
    padding: 3px;
    margin: 0;
}

#planning .nowHour {
    border: 1.5px solid var(--color-day-planning);
}

@media (max-width: 765px) {
    #planning {

        grid-template-rows: 60px;
        grid-gap: 0px;
        padding: 0px;

    }

    #planning .table-planning {

        grid-template-rows: repeat(7, 60px);

    }

    #planning .dias-planning {

        grid-template-rows: repeat(7, 60px);


    }

    #planning .planning-fijo {

        height: calc(60px*7);

    }

    #planning .table-planning-column {

        grid-template-rows: repeat(7, 60px);

    }

    #planning {
        height: 482px;

    }

    /* #planning .info-planning {
        display: none;
        visibility: hidden;
    }

    #planning .dias-planning {
        display: none;
        visibility: hidden;
    }

    #planning .dias-planning.mobile {
        display: grid;
        visibility: visible;
    } */
    #planning .horas-planning span,
    #planning .minutos-planning span {

        font-size: xx-small;
    }

    #planning .dias-planning span {
        font-size: xx-small;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 20px;
        display: inline-block;
    }

    #planning .nowHour {
        pointer-events: none;
    }

}

/*************************** GENERAL-CAMARA ***************************/

#general-camara {
    margin-left: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-left: 50px;
    display: flex;
    display: -webkit-flex;

    flex-direction: column;
    flex-grow: 1;
    height: calc(100vh - 50px);
}

#general-camara .panel-camara {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 500px;
    padding: 0 10px;
}

#general-camara .video {
    flex: 6;
    /*background-color: red;*/
}

#general-camara .info-evento {
    flex: 6;
    /* background-color: blue; */

}

/********************* GENERAL-ALARMAS **************************************/

#general-alarmas {
    margin: 0;
    padding-right: 0px;
    padding-left: 50px;
    width: 100%;
    display: flex;
    flex-direction: row;
    height: calc(100vh - 50px);

}

#general-alarmas>div:first-child {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

#general-alarmas.gestion .panel-izquierdo {
    overflow-y: auto;
}

#general-alarmas>div:first-child>div:first-child {
    width: 100%;
}

#general-alarmas.gestion>div:first-child {
    overflow: auto;
    width: 100%;
}

#general-alarmas>div {
    display: flex;
    flex-direction: column;
    height: 100%;

}

#general-alarmas .panel-botones {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
}

#general-alarmas .panel-botones>* {
    flex: 1;
    display: flex;
    flex-direction: row;
}

#general-alarmas .panel-botones>.panel-izquierdo {
    align-items: center;
    justify-content: flex-start;
}

#general-alarmas .panel-botones>.panel-derecho {
    align-items: center;
    justify-content: flex-end;
}

#general-alarmas .btn-group>.btn {
    margin: 0;
}

#general-alarmas .panel-alarmas.tabla {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 15px;
    overflow-y: auto;
}

#general-alarmas .alarmas-activas,
#general-alarmas .historial-alarmas {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    padding: 10px;
    flex-direction: column;

}

#general-alarmas.config .historial-alarmas {
    overflow-y: auto;
}

#general-alarmas.gestion .historial-alarmas {
    height: 100%;

}

#general-alarmas h3.titulo {
    color: var(--color-text);
    display: flex;
    align-items: center;
    font-family: var(--font-secundaria);
}

#general-alarmas .titulo .icon {
    font-size: 22px;
    margin-right: 5px;
}

#general-alarmas .titulo .icon.off {
    color: var(--color-infoWidget);
}

#general-alarmas .titulo .icon {
    color: var(--color-principal)
}

#general-alarmas .panel-botones {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
}

#general-alarmas .panel-search {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--color-box-filters);
    padding: 10px;
    width: 100%;

}

#general-alarmas .panel-search.ng-enter {
    animation: 0.7s fadeIn ease-in-out;

}

#general-alarmas .panel-search.ng-leave {
    animation: 0.3s fadeOut ease-in-out;

}

#general-alarmas .filtros {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    background-color: initial;

}

/*#general-alarmas #date-picker {
    padding-top: 0; 
    padding-bottom: 0; 
} */
#general-alarmas .categorias {
    min-width: 200px;
    padding-left: 21px;
    padding-right: 21px;
}

#general-alarmas .categorias #select span.btn {
    padding-bottom: 5px;
}

#general-alarmas #tabla {
    /* max-width: 1870px; */
    display: flex;
    grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
    width: 100%;
    padding: 0 10px;
    /* grid-auto-rows: 200px; */
    grid-gap: 10px;
    font-family: var(--font-secundaria);
    /* flex-wrap: wrap;
    justify-content: flex-start */
}

#general-alarmas #tabla td>i.activa {
    color: var(--color-success);
}

#general-alarmas #tabla td>i.desactiva {
    color: var(--color-alarm);
}

#general-alarmas .table {
    grid-template-columns: minmax(60px, 60px) minmax(min-content, 0.6fr) minmax(min-content, 0.3fr) minmax(min-content, 0.4fr) minmax(min-content, 0.3fr) minmax(min-content, 0.6fr) minmax(min-content, 0.3fr) minmax(min-content, 0.6fr);

}

#general-alarmas .table.admin {

    grid-template-columns: minmax(60px, 60px) minmax(min-content, 0.6fr) minmax(min-content, 0.3fr) minmax(min-content, 0.4fr) minmax(min-content, 0.3fr) minmax(min-content, 0.6fr) minmax(min-content, 0.3fr) minmax(min-content, 0.6fr) minmax(min-content, 0.2fr);
}

/* #general-alarmas .table.admin {
    
    grid-template-columns: minmax(60px, 60px) minmax(min-content, 0.5fr) minmax(min-content, 1fr)  minmax(min-content, 0.4fr) minmax(min-content, 0.3fr) minmax(min-content, 0.6fr) minmax(min-content,0.2fr);
} */
#general-alarmas .icon {
    color: var(--azul-claro);
    /* color: var(--color-principal); */
}

#general-alarmas .registros {
    color: var(--color-text);
    width: -webkit-fill-available;
    text-align: start;
    margin: 7px 11px;
    font-family: var(--font-secundaria);
    padding: 7px;
    border-radius: var(--radio-boton);
    font-size: 16px;
    /* background: var(--color-box-filters); */
}

#general-alarmas .titulo-opciones {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: unset;
}

#general-alarmas .titulo-opciones .titulo {
    flex: 1;
}

#general-alarmas .titulo-opciones .panel-botones {
    flex: 1;
}

#general-alarmas .agrupacion-botones {
    padding: 1px;
}

#general-alarmas .agrupacion-botones .btn-group {
    margin-top: 36px;
    padding: 1px 9px;
}

#general-alarmas.config .panel-alarmas {
    overflow: auto;
}

#general-alarmas .panel-alarmas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    width: 100%;
    padding: 0 10px;
    /* margin-bottom: 39px; */

}

#general-alarmas .panel-alarma {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    margin-bottom: 5px;
    /* max-width: 800px; */
    height: fit-content;
    padding: 5px;
    border-radius: var(--radio-boton);
    background: var(--color-box-filters);
    color: var(--color-infoWidget);
    /* animation: 4s all ease-in-out; */
    flex-wrap: wrap;
    box-shadow: var(--shadow-box);
    /* flex-wrap: wrap; */
}

#general-alarmas .panel-alarma.select .info {
    background-color: var(--color-principal);
    border-radius: var(--radio-box);

}

#general-alarmas .panel-alarma.select .info.left,
#general-alarmas .panel-alarma.select .info.right {
    background: var(--color-box-filters);

}

#general-alarmas .panel-alarma.select .fecha {
    color: var(--color-text);
}

#general-alarmas .panel-alarma.edicion {
    padding-bottom: 30px;
}

#general-alarmas .panel-alarmas.lista .panel-alarma.edicion {
    padding-bottom: 0;
}

#general-alarmas .panel-alarmas.tabla .panel-alarma {
    height: 100%;
}

#general-alarmas .panel-alarma.ng-enter {
    animation: 0.7s fadeIn ease-in-out;

}

#general-alarmas .panel-alarma.ng-leave {
    animation: 0.3s fadeOut ease-in-out;

}

#general-alarmas.gestion .panel-alarma:hover {
    background-color: var(--color-hover);
    cursor: pointer;
    transition: all 1s ease-in-out;
}

#general-alarmas .panel-alarma .estado i {
    color: var(--azul-claro);
    /* color: var(--color-principal); */
    margin: 5px;
}

#general-alarmas .panel-alarma .estado {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    font-size: 23px;
    /* border-right: 1px solid var(--color-infoWidget); */
    padding: 5px;
}

#general-alarmas .panel-alarma .info {
    display: flex;
    flex: 2;
    padding: 5px;
    font-family: var(--font-secundaria);
    justify-content: center;

    align-items: flex-start;
    flex-direction: column;
    font-size: 15px;
}

#general-alarmas .panel-alarma .tag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

#general-alarmas .panel-alarma .tag>span,
#incidencia .tag>span {
    margin-right: 5px;
    font-size: 10px;
    /* color: var(--color-tag);
    background-color: var(--color-principal); */
    color: var(--color-btn-text);
    background-color: var(--azul);
    border-radius: var(--radio-boton);
    font-family: var(--font-secundaria);
    padding: 1px 8px;
    margin: 2px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: fit-content;

}

.tag>span>i {
    padding-right: 2px;
    /* padding-bottom: 2px; */
    cursor: pointer;
}


#general-alarmas .panel-alarma .info.right {
    width: fit-content;
    min-width: 60px;
    flex: 0;
    padding: 0;
    align-items: flex-end;

}

#general-alarmas .panel-alarma .info.left {
    flex: 0.2;
    /* max-width: fit-content; */
    /* border-left: 1px solid var(--color-infoWidget); */
    padding: 5px;
}

#general-alarmas .panel-alarma .info.left>span,
#general-alarmas .panel-alarma .info.right>span {
    flex: 1;
}

#general-alarmas .panel-alarma .info>span>span {
    text-transform: capitalize;
}



/* #general-alarmas .panel-alarma.solved .estado i, */
#general-alarmas .panel-alarma.reconocida .info *,
#general-alarmas .panel-alarma.reconocida .estado * {
    color: var(--color-infoWidget) !important;

}

#general-alarmas .panel-alarma.reconocida .info.right * {
    color: var(--color-btn-text) !important;

}

#general-alarmas .panel-alarma .info .btn {
    min-width: fit-content;
}

#general-alarmas .panel-alarma.reconocida .tag span {
    color: var(--color-text) !important;
    background-color: var(--color-infoWidget) !important;
}

#general-alarmas .panel-alarma .titulo {
    color: var(--color-text);
    font-weight: bold;
    padding: 8px 0;

}

#general-alarmas .panel-alarma .info.left i {
    color: var(--azul-claro);
    /* color: var(--color-principal); */
    margin: 0 5px;
}

#general-alarmas .panel-alarma .fecha,
#general-alarmas .panel-alarma .info.left {
    font-size: 12px;
}

#general-alarmas .panel-alarma.high {
    border-left: 4px solid var(--rojo-200);
}

#general-alarmas .panel-alarma.medium {
    border-left: 4px solid var(--ambar-claro);
}

#general-alarmas .panel-alarma.low {
    border-left: 4px solid var(--verde-200);
}


#general-alarmas .panel-alarma .info.left i.high {
    color: var(--rojo-200);
}

#general-alarmas .panel-alarma .info.left i.medium {
    color: var(--ambar-claro);
}

#general-alarmas .panel-alarma .info.left i.low {
    color: var(--verde-200);
}

#general-alarmas .panel-widget {
    bottom: -5px;
    top: auto;
}

@media (max-width: 1408px) {
    #general-alarmas .panel-alarmas.tabla {

        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1086px) and (orientation: portrait) {
    #general-alarmas .panel-alarmas.tabla {

        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1055px) and (orientation: landscape) {
    #general-alarmas .panel-alarmas.tabla {

        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {

    #general-alarmas .categorias,
    #general-alarmas date-picker {
        width: 100%;
    }
}

@media (max-width: 500px) {

    #general-alarmas .panel-alarma {
        flex-wrap: wrap;
    }

    #general-alarmas .panel-alarma .info.right,
    #general-alarmas .panel-alarma .info.left {
        flex-direction: row;
        flex: auto;
        width: 100%;
        max-width: 100%;
    }

    #general-alarmas .panel-alarmas.tabla {

        grid-template-columns: repeat(2, 1fr);
    }

    /* #general-alarmas .panel-izquierdo{
        display: none;
    } */
}

@media (max-width: 400px) {

    #general-alarmas .panel-alarma .info.right>span:last-child,
    #general-alarmas .panel-alarma .info.left>span:last-child {
        flex: 2;
    }

}

/********************* MODAL EVENTO DE ALARMA **************************************/
.evento {
    display: flex;
    font-family: var(--font-secundaria);
    flex-direction: column;
    width: 100%;
}

.evento .info {
    display: flex;
    flex-direction: column;
}

.evento .info>* {
    flex: 1;
    padding-bottom: 5px;
}

.evento .tag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    text-transform: lowercase;
}

.evento .titulo {
    font-size: 18px;
    font-weight: bold;
}

.evento .fecha {
    font-size: 14px;
    color: var(--color-infoWidget);
}

.evento .fila {
    display: flex;
    flex-direction: row;
}

.evento .fila>.icon {
    color: var(--color-principal);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    width: fit-content;
    padding-right: 15px;

}

.tag>span {
    margin-right: 5px;
    font-size: x-small;
    color: var(--color-tag);
    background-color: var(--color-principal);
    border-radius: var(--radio-boton);
    font-family: var(--font-secundaria);
    padding: 1px 8px;
    margin: 2px;
    position: relative;
    text-transform: capitalize;

}



.evento .tag>span::first-letter {
    text-transform: capitalize;
}

.evento .tag>span.low {
    background-color: var(--verde-200-trans);
    color: var(--verde-200);
}

.evento .tag>span.medium {
    background-color: var(--ambar-claro-trans);
    color: var(--ambar-claro);
}

.evento .tag>span.high {
    background-color: var(--rojo-200-trans);
    color: var(--rojo-200);

}

.split {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.split>div {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    min-height: 50px;
    padding-top: 25px;
    font-size: 16px;

}

.split>span {
    flex: 1;
    font-size: 15px;
}

.split>span.arrow {
    flex: 0;
}

.split>span.data {
    flex: 0;
    padding: 0 15px;
}

.split>div span {
    color: var(--color-principal);
    font-size: 16px;
    font-family: var(--font-secundaria);
    position: absolute;
    top: 2px;
    left: 2px;
}

.split>div.right {
    display: flex;
    justify-content: flex-end;
}

.split>div.right span {

    top: 2px;
    right: 2px;
    left: auto;
}

.split .descripcion {
    flex: 3;
}

.split>div.celda {
    display: flex;
    flex-direction: column;
}

.split>div.celda>div {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    height: 62px;
    width: 118px;
    font-size: 25px;
}

.split .withIcon {
    display: flex;
    justify-content: center;
    align-items: center;

}

.split .withIcon i {
    font-size: 25px;
    color: var(--color-principal);

}

.split .withIcon .activa {
    color: var(--color-success);
}

.split .withIcon .desactiva {
    color: var(--color-alarm);
}

.split .categoria {
    border-radius: var(--radio-boton);
    background-color: var(--color-widget-edicion);
    padding: 3px 10px;
}



.split>.adjunto img {
    width: 100%;
}


/********************* GENERAL DE SOPORTE **************************************/
#soporte {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: calc(100vh - 50px);
    font-family: var(--font-secundaria);
    padding: 0;
}

#soporte.notas {
    height: 100vh;
    padding: 2px;
    overflow-y: clip;
    margin: 0;

}

#soporte>div:first-child {
    position: relative;
    width: 100%;
}

#soporte.gmao>div:first-child {
    position: initial;
    width: 100%;
}

#soporte.notas>div:first-child {
    position: relative;
    width: 100%;
    height: 100vh;
}

#soporte .agrupacion-botones {
    padding-top: 10px;
}



#soporte.buscar {
    padding-right: 0;
}

#soporte .panel-soporte {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    height: 100%;
}


.panel-busqueda {
    display: flex;
    flex-direction: column;
    width: 500px;
    background: var(--color-box-filters);
    font-family: var(--font-secundaria);
    position: relative;
    height: calc(100vh - 50px);
    /* margin: 10px 10px 10px 0; */
    /* transition: all 1s ease-in-out; */
    border-radius: var(--radio-box);
    border: var(--border-separador);
}

/* .panel-busqueda.ng-enter {
    animation: 0.5s slideInRight ease-in-out;
}
.panel-busqueda.ng-leave {
    animation: 0.5s slideOutRight ease-in-out;
} */
.panel-busqueda>.titulo {
    padding: 5px;
    height: fit-content;
    background-color: var(--color-menu);
    border-top-left-radius: var(--radio-box);
    border-top-right-radius: var(--radio-box);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: var(--border-separador);
    width: 100%;
    /* border-top: var(--border-separador); */
}

.panel-busqueda>.titulo>* {
    width: fit-content;
    padding: 0 5px;

}

.panel-busqueda>.titulo .icon {
    color: var(--color-principal);
}

.panel-busqueda>.titulo h5 {
    font-family: var(--font-secundaria);
    /* font-weight: bold; */
    color: var(--color-text);
}

.panel-busqueda .panel-filtros {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2px 12px;
    overflow-y: auto;
    background: var(--color-box-filters);
    border-bottom: var(--border-separador);
    border-top: var(--border-separador);
    padding: 12px 12px;
    justify-content: flex-start;
}

.panel-filtros .toggle {
    padding-top: 15px;
}

.panel-busqueda .panel-filtros #input,
.panel-busqueda .panel-filtros #date-picker,
.panel-busqueda .panel-filtros #select,
.panel-busqueda .panel-filtros .container-select {
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 35px;

}

/* .panel-busqueda .panel-filtros #date-picker .legend {
    margin-left: 0.2rem !important;
} */

.panel-busqueda .botones {

    border-top: 0;
    border-bottom-left-radius: var(--radio-box);
    border-bottom-right-radius: var(--radio-box);
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-menu);
    border-top: var(--border-separador);
    width: 100%;

}

@media (max-width: 1086px)and (orientation: portrait) {
    .panel-busqueda {
        height: calc(100vh - 90px);
        /* width: 350px; */
    }

}

@media (max-width: 1055px) and (orientation: landscape) {
    .panel-busqueda {
        height: calc(100vh - 90px);
        /* width: 350px; */
    }
}

@media (max-width: 1055px) and (orientation: landscape) {
    .panel-busqueda {
        height: calc(100vh - 90px);
        /* width: 350px; */
    }

}

#soporte .panel-botones {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* background: var(--color-box-filters); */
}

#soporte .panel-botones>button.ng-enter {
    animation: 0.3s fadeIn ease-in-out;
}

#soporte .panel-botones>button.ng-leave {
    animation: 0.3s fadeOut ease-in-out;
}

#soporte .panel-widget {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    padding: 5px;
    margin: 0;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: fit-content;
    position: relative;
    /* flex-wrap: wrap;  */

}

#soporte .widget-soporte {
    flex: 1;
    display: flex;
    flex-direction: row;
    margin: 5px;
    background: var(--color-box-filters);
    border-radius: var(--radio-boton);
    position: relative;
    font-size: 18px;
    transition: all 1s ease-in-out;
    box-shadow: var(--shadow-box);
}

#soporte .panel-widget.ng-enter {
    animation: 0.7s fadeIn ease-in-out;
}

#soporte .panel-widget .widget-soporte:hover {
    cursor: pointer;
    background-color: var(--color-hover);
    transition: all 1s ease-in-out;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#soporte .panel-widget .widget-soporte .panel-info {
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    flex: 1;
}

#soporte .panel-widget .widget-soporte .panel-icon {
    display: flex;
    width: fit-content;
    padding-right: 5px;
    height: auto;
    align-items: center;
    justify-content: center;
    color: var(--color-icon-soporte);
    font-size: 2.3em;
}

#soporte .panel-widget .widget-soporte .titulo {
    color: var(--color-text);
    font-size: 1em;
    font-family: var(--font-secundaria);
    flex: 1;
    padding: 5px;
}

#soporte .panel-widget .widget-soporte .valor {
    color: var(--color-principal);
    font-size: 2em;
    font-weight: bol;
    font-family: var(--font-secundaria);
    padding: 5px;
    flex: 1;
    display: flex;
    align-items: flex-end;

}

#soporte .panel-widget .widget-soporte .rango {
    color: var(--color-infoWidget);
    font-size: 0.6em;
    font-family: var(--font-secundaria);
    height: fit-content;
    padding-left: 1.5px;
}

/* #soporte .panel-search >div{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;

} */
#soporte .panel-tickets {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: stretch;
    width: 100%;
    padding: 10px;
    overflow-y: auto;


}

#soporte.gmao .panel-tickets {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 5px;
    padding-top: 12px;
    height: 100%;
}

#soporte .panel-tickets>div {
    /* padding: 5px; */
    height: calc(100vh - 253px);

}


#soporte.gmao .panel-tickets .noData {
    height: -webkit-fill-available;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

#soporte.gmao .panel-tickets .progress {
    margin: 0;
    margin-top: 6px;
    width: 100%;
    height: 4px;
    border-radius: var(--radio-box);
}

#soporte.gmao .panel-tickets .text-progress {
    margin-top: 2px;
    font-size: x-small;
}

#soporte .panel-ticket {
    display: flex;
    min-height: fit-content;
    flex-direction: row;
    width: 100%;
    margin-bottom: 12px;
    /* max-width: 800px; */
    height: fit-content;
    padding: 5px;
    border-radius: var(--radio-boton);
    background: var(--color-box-filters);
    color: var(--color-infoWidget);
    box-shadow: var(--shadow-box);
    text-decoration: none !important;

    /* flex-wrap: wrap; */
}

#soporte.gmao .panel-ticket {
    flex-direction: column;
}

.panel-ticket.internal,
.wo.internal {
    background-color: var(--background-privado-cabecera) !important;
}

#soporte .panel-ticket.ng-enter {
    animation: 0.7s fadeIn ease-in-out;
}

/* #soporte .panel-ticket.ng-leave {
    animation: 0.3s fadeOut ease-in-out;
} */
#soporte .panel-ticket:hover,
#soporte .panel-ticket.select {
    background-color: var(--color-hover);
    cursor: pointer;
    transition: all 1s ease-in-out;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#soporte .panel-ticket .estado {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    font-size: 23px;
    /* border-right: 1px solid var(--color-infoWidget); */
    padding: 5px;
}

#soporte .panel-ticket .info {
    display: flex;
    flex: 3;
    padding: 5px;
    font-family: var(--font-secundaria);
    justify-content: center;

    align-items: flex-start;
    flex-direction: column;
    font-size: 15px;
}

#soporte .panel-ticket .info .observaciones {
    display: -webkit-box;
    /* max-width: 200px; */
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#select .tag,
.tag,
#incidencia .tag,
.panel-dashboard-edicion .tag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    min-height: fit-content;
    align-items: center;
    gap: 3px;
}


#select .tag>span,
.tag>span,
#incidencia .tag>span,
.panel-dashboard-edicion .tag>span {
    /* margin-right: 5px; */
    font-size: 10px;
    background-color: var(--azul-claro-trans);

    color: var(--azul-claro);
    /* color: var(--color-tag); */
    /* background-color: var(--color-principal); */
    border-radius: var(--radio-boton);
    font-family: var(--font-secundaria);
    /* padding: 1px 8px;
    margin: 2px;
    position: relative; */
    padding-top: 3px;
    padding: 3px 1px 1px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;

}

.tag>span:not(:has(i)) {
    padding: 1px 8px;
}

.panel-busqueda .tag>span {
    font-size: 12px;
}

#soporte .panel-ticket .info.right {
    flex: 1;
    /* border-left: 1px solid var(--color-infoWidget); */
    padding: 5px;
}

#soporte.gmao .panel-ticket .info.right {
    flex-direction: row;
    width: 100%;
}

#soporte .panel-ticket .info.right>span {
    flex: 1;
    font-size: x-small;
}

#soporte .panel-ticket .info>span>span {
    text-transform: capitalize;
}

#soporte .panel-ticket .estado i {
    color: var(--color-principal);
    margin: 5px;
}

/* #soporte .panel-ticket.solved .estado i, */
#soporte .panel-ticket.solved *,
#soporte .panel-ticket.canceled * {
    color: var(--color-infoWidget) !important;

}

#soporte .panel-ticket.nota .titulo {
    color: var(--color-text) !important;
}

#soporte .panel-ticket.nota .estado i {
    color: var(--color-principal) !important;
}

#soporte .panel-ticket.canceled .titulo {
    text-decoration: line-through !important;
}

#soporte .panel-ticket .info .titulo .private,
#incidencia .panel-principal .titulo .private {
    color: var(--color-alarm) !important;
}

#soporte .panel-ticket .tag .pendiente {
    color: var(--verde-claro);
    background-color: var(--verde-claro-trans);
}

#soporte .panel-ticket.solved .tag span,
#soporte .panel-ticket.canceled .tag span {
    color: var(--color-tag) !important;
    background-color: var(--color-infoWidget) !important;
}

#soporte .panel-ticket.nota .tag span {
    color: var(--color-tag) !important;
    background-color: var(--color-principal) !important;
}

#soporte .panel-ticket .titulo {
    color: var(--color-text);
    font-weight: bold;
    font-size: small;
    padding: 8px 0;

}

#soporte .panel-ticket .info.right i {
    color: var(--color-principal);
    margin: 0 5px;
}

#soporte .panel-ticket .fecha,
#soporte .panel-ticket .info.right {
    font-size: 12px;
}

#soporte .panel-ticket.critical {
    border-left: 4px solid var(--color-alarm);
}

#soporte .panel-ticket.high {
    border-left: 4px solid var(--color-error);
}

#soporte .panel-ticket.medium {
    border-left: 4px solid var(--azul);
    /* border-left: 4px solid var(--color-principal); */
}

#soporte .panel-ticket.low {
    border-left: 4px solid var(--color-success);
}

#soporte .panel-ticket.nota {
    border-left: 0px solid !important;
}

#soporte .panel-ticket .info.right i.critical {
    color: var(--color-alarm);
}

#soporte .panel-ticket .info.right i.high {
    color: var(--color-error);
}

#soporte .panel-ticket .info.right i.medium {
    /* color: var(--color-principal); */
    color: var(--azul);
}

#soporte .panel-ticket .info.right i.low {
    color: var(--color-success);
}

#soporte h4 {
    color: var(--color-text);
    padding: 0 8px;
}

#soporte .alert,
#incidencia .alert {
    position: absolute;
    bottom: 0;
    right: 0;
    width: fit-content;
    z-index: 99999;
    max-width: 650px;
}

/* #soporte .alert .mensaje,
#incidencia .alert .mensaje {
    background: rgb(40 38 38);
} */

#soporte .paginacion {
    display: flex;
    min-height: fit-content;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    padding: 5px;
}

.mobile {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    flex-direction: row;
    z-index: 999999;
}



.mobile.list {
    top: 15px;
    height: fit-content;
}

@media (max-width: 950px) {
    .panel-botones .btn {
        min-width: fit-content;
    }
}

@media (max-width: 1500px) {

    #soporte .panel-widget .widget-soporte {
        font-size: 16px;
    }

    .widgets>.widget {
        font-size: 12px !important;
    }
}


@media (max-width: 850px) {

    #soporte .panel-widget .widget-soporte {
        font-size: 10px;
        width: 100px;
    }

    .widgets>.widget {
        font-size: 10px !important;
        width: 100px;
    }

    #soporte,
    #general-alarmas {
        height: calc(100vh - 90px);
    }


}

@media (max-width: 744px) {



    #soporte .panel-botones {
        display: none;
    }

    #general-alarmas .panel-botones .panel-derecho {
        display: none;
    }

    .widgets>.widget>.info-widget>.icon {

        padding: 0 1px !important;
    }

    .mobile {
        display: flex;
    }

    #general-instalaciones .opciones {
        display: none;
    }



    #soporte.gmao .opciones {
        display: none;
    }

    .info-devices>.navegacion>#menu-select.dots {
        display: inherit !important;
    }
}

@media (max-width: 500px) {

    #soporte .panel-widget .widget-soporte,
    .widgets>.widget {
        /* font-size: 10px; */
        width: 150px !important;
    }

    #soporte {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    #soporte .panel-ticket {
        flex-wrap: wrap;
    }

    #soporte .panel-ticket .info.right {
        flex-direction: row;
        flex: auto;
        width: 100%;
    }

    #soporte.buscar .panel-soporte,
    #soporte.buscar>div:first-child {
        display: none;
    }

    #soporte.buscar .panel-buscar {
        width: 100%;
    }

    #soporte.buscar {
        padding: 0 0;
    }



}

@media (max-width: 400px) {

    #soporte .panel-widget .widget-soporte,
    .widgets>.widget {
        /* font-size: 10px; */
        width: 100px !important;

    }

    #soporte .panel-ticket .info.right>span:last-child {
        flex: 2;

    }

}

@media (max-height: 768px) {

    #soporte .panel-soporte {
        overflow-y: overlay;
    }

    #soporte.buscar {
        overflow-y: initial;
    }

    #soporte.buscar .panel-soporte {
        overflow-y: auto;
    }

    #soporte.buscar .panel-tickets {
        overflow-y: initial;
    }

}

@media (max-height: 650px) {
    #soporte {
        overflow-y: auto;
    }

    #soporte .panel-tickets {
        overflow-y: initial;
    }

}

/*  MODAL TICKET */

#modal-ticket {
    font-family: var(--font-secundaria);
}

#modal-ticket>div {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#modal-ticket .partir {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-left: 21px;
    padding-right: 21px;
}

#modal-ticket .textarea.subconjunto>.legend {
    font-size: 16px;
}

#modal-ticket .textarea .partir {
    padding-right: 0;
    padding-left: 0;
}

#modal-ticket .partir>* {
    flex: 1 1 auto;
    margin: 5px;
    min-width: 165px;
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

#modal-ticket .partir #input {
    padding-right: 8px;
    padding-left: 8px;
    width: auto;
}

#modal-ticket .partir .notificar {
    display: contents;
    width: fit-content;
    justify-content: flex-end;

}

#modal-ticket .partir .notificar button {
    margin-bottom: 5px;
    width: fit-content;
    min-width: auto;
}

#modal-ticket .textarea .partir .legend {
    color: var(--color-placeholder);

}

#modal-ticket .tag {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 5px;
}

#modal-ticket .tag>span {
    margin-right: 5px;
    font-size: 12px;
    color: var(--color-tag);
    background-color: var(--color-principal);
    border-radius: var(--radio-boton);
    font-family: var(--font-secundaria);
    padding: 1px 8px;
    padding-right: 3px;
    margin: 2px;
    display: flex;
    align-items: center;

}

#modal-ticket .tag>span i {
    color: #4e555d94;
}

#modal-ticket .tag>span i:hover {
    cursor: pointer;
}

/*  TICKET DE INCIDENCIAS */

#incidencia {

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    height: calc(100vh - 50px);
    font-family: var(--font-secundaria);
    position: relative;


}

#incidencia .panel-ticket {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    position: relative;

}

#incidencia .panel-mensajes {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 5px;
}

#incidencia .panel-info {
    display: flex;
    flex-direction: column;
    width: 250px;
    background: var(--color-box-filters);
    position: relative;
    /* margin: 10px 10px 10px 0; */
    transition: all 1s ease-in-out;
    border-radius: var(--radio-box);
    border: var(--border-separador);
}

#incidencia .panel-info>.titulo {
    padding: 5px;
    height: fit-content;
    background-color: var(--color-menu);
    border-top-left-radius: var(--radio-box);
    border-top-right-radius: var(--radio-box);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: var(--border-separador);

}

#incidencia .panel-info>.titulo>* {
    width: fit-content;
    padding: 0 5px;
}

#incidencia .panel-info>.titulo .icon {
    color: var(--color-principal);
}

#incidencia .panel-info>.titulo h5 {
    font-family: var(--font-secundaria);
    /* font-weight: bold; */
    color: var(--color-text);
}

#incidencia .panel-info .propiedades {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 2px 12px;
    overflow-y: auto;
}

#incidencia .panel-info .propiedades #input,
#incidencia .panel-info .propiedades #date-picker {
    padding-left: 8px;
    padding-right: 8px;

}

#incidencia .panel-info .botones {

    border-top: var(--border-separador);
    border-bottom-left-radius: var(--radio-box);
    border-bottom-right-radius: var(--radio-box);
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-menu);

}

#incidencia .panel-mensajes .panel-principal {
    font-family: var(--font-secundaria);
    margin-bottom: 5px;
    color: var(--color-text);
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    padding: 10px 0 0 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-box);
}

#incidencia .panel-mensajes .panel-principal>* {
    flex: 1;

}

#incidencia .panel-mensajes .panel-principal>.titulo>input {
    background-color: var(--color-hover);
}

#incidencia .panel-mensajes .panel-principal>span {
    padding: 5px;
    color: var(--color-infoWidget);
}

#incidencia .panel-mensajes .titulo {
    font-weight: bold;

}

#incidencia .panel-mensajes .titulo>* {
    width: fit-content;
    padding: 0 5px;
}

#incidencia .panel-mensajes .titulo .icon {
    color: var(--color-principal);
    font-size: 24px;

}

#incidencia .panel-mensajes .titulo span {
    font-size: 18px;
}

.input-prop {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5px 5px;
    flex-direction: column;
    width: 100%;
    min-height: fit-content;

}

.input-prop>div {
    /* flex: 1; */
    width: 100%;
    min-height: fit-content;
}

.input-prop .titulo {
    padding-bottom: 5px;
    color: var(--color-principal);
}

.input-prop .valor {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 5px;
}



.input-prop .valor>* {
    width: fit-content;
    padding: 0 5px;

}

.input-prop .valor>i {
    color: var(--color-principal);
    font-size: 15px;
    width: fit-content;
}

.input-prop .valor>span,
.input-prop .valor>div {
    color: var(--color-text);
    font-size: 12px;
    flex: 1;
    width: 100%;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    word-break: break-word;

}

#incidencia .input-prop .valor>i.critical {
    color: var(--color-alarm);
}

#incidencia .input-prop .valor>i.high {
    color: var(--color-error);
}

#incidencia .input-prop .valor>i.medium {
    color: var(--azul);
    /* color: var(--color-principal); */
}

#incidencia .input-prop .valor>i.low {
    color: var(--color-success);
}

#incidencia .panel-comentarios {
    display: flex;
    width: 100%;
    flex-direction: column;
    flex: 2;
    padding: 5px;
    padding-bottom: 0;
    overflow-y: auto;
}

#incidencia .panel-comentarios>.botones,
#incidencia .panel-principal>.botones {
    align-items: center;
    justify-content: flex-end;
    display: flex;
    min-height: fit-content;
}

#incidencia .notificar {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#incidencia .tag>span i {
    color: var(--close-tag);
    padding-left: 5px;
}

#incidencia .tag>span i:hover {
    cursor: pointer;
}

#incidencia .ocultar {
    display: none;
}

.toggle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: fit-content;
    padding-right: 20px;
    color: var(--color-text);
    font-size: 14px;
}

.toggle>* {
    padding: 5px;
}

.toggle>img {
    width: 50px;
    cursor: pointer;
}

.toggle>i {
    font-size: 20px;
    cursor: pointer;
    color: var(--color-infoWidget);
}

.toggle>i.private {
    color: var(--color-principal);
}

@media (max-width: 850px) {
    #incidencia {
        height: calc(100vh - 90px);

    }
}

@media (max-width: 744px) {

    #incidencia .panel-info {
        display: none;
    }

    #incidencia .ocultar {
        display: initial;
    }

    #incidencia {
        margin: 0;
        padding: 0;
        width: 100%;
    }

    #incidencia.list .panel-mensajes {
        display: none;
    }

    #incidencia.list .panel-info {
        width: 100%;
        display: flex;
    }

    #incidencia.list .mobile {
        display: none;
    }

    #general-alarmas.gestion.buscar>div:first-child,
    #general-alarmas.config.buscar .panel-izquierdo {
        display: none;
    }

    .panel-busqueda {
        width: 100%;
    }

    #incidencia .panel-info {
        margin: 10px;
    }

}

@media (max-width: 400px) {

    #soporte .panel-widget .widget-soporte,
    .widgets>.widget {
        /* font-size: 10px; */
        width: 100px !important;

    }

    #soporte .panel-ticket .info.right>span:last-child {
        flex: 2;

    }

}

@media (max-height: 768px) {

    #incidencia .panel-comentarios {
        overflow-y: initial;
    }

    #incidencia .panel-mensajes {
        overflow-y: auto;
    }

}

@media (max-height: 650px) {
    #soporte {
        overflow-y: auto;
    }

    #soporte .panel-tickets {
        overflow-y: initial;
    }

    .panel-botones .btn {
        min-width: fit-content;
    }
}

#modal-compartir #input {
    padding: 20px 15px;
}

#modal-compartir #input input:focus~.legend,
#modal-compartir #input input:not(.ng-empty)~.legend,
#modal-compartir #input input:-webkit-autofill~.legend,
#modal-compartir .legend.fixed {
    top: -15px !important;
    margin-left: -6px;
    font-family: 'Source Sans Pro', 'Helvetica Neue', sans-serif;

}

#general-decreto .panel-dashboard {

    height: calc(100vh - 66px);
}

#general-decreto #dashboard.grupos {
    background-color: transparent;

}

/************************************************************************************************************************************
*                                        PAGINA CONTROL APLICACIÓN (NCT_visualControl)
*/

#general-instalaciones {
    font-family: var(--font-secundaria);
    margin-left: 0px;
    margin-right: 0px;
    padding-right: 0px;
    padding-left: 50px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    height: calc(100% - 50px);
    height: calc(100vh - 50px);
    z-index: 1;

}


#general-instalaciones .sincontrato {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
    color: var(--color-text);
    width: 100%;

}

#general-instalaciones .sincontrato>span:first-child {
    flex: 1;
}

#general-instalaciones .sincontrato>span:last-child.tipo {
    font-size: 32px;
    position: relative;
    -webkit-animation: linear infinite;
    -webkit-animation-name: selectL;
    -webkit-animation-duration: 1s;
    width: 72px;
}

.division {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 8px;
    padding: 8px;
}

.division>* {
    flex: 1;
}

.presupuestos {
    padding-left: 12px;

}



.costes {
    margin-bottom: 12px;
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}

.costes-facility {
    /* padding-bottom: 12px; */
    padding: 10px;

    /* padding-left: 12px; */
    width: 100%;
    height: auto;
}

.budget .costes-facility {
    padding: 0;
    padding-bottom: 12px;
}

.costes-facility>div {
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    display: flex;
    flex-direction: column;
}

.costes-facility>div>div:last-child {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.costes-facility>div>div:last-child>div {
    display: flex;
    flex-direction: column;
    padding: 12px;
    min-width: fit-content;
    flex: 1;
}

.costes-facility>div>div:last-child>div>span:first-child {
    color: var(--color-principal);
    font-size: 14px;

}

.costes-facility>div>div:last-child>div>span:last-child {
    /* color: var(--color-principal); */
    font-size: 16px;

}

.costes-facility>div>div:last-child>div>span:last-child>i {
    color: var(--color-principal);
    padding-right: 12px;
}

#general-instalaciones .box-filters .datos>select-filter {
    max-width: 40%;
    margin: 0 5px;
}

#general-instalaciones>div:first-child {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#general-instalaciones .row {
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    padding-left: 15px;
    padding-right: 15px;
    box-shadow: var(--shadow-box);
    overflow-y: auto;
    padding-bottom: 15px;
}

.info-facility textarea {
    max-height: 40px;
}

#general-instalaciones .facilities {
    min-width: 250px;
    max-width: 400px;
    height: 100%;
    /* max-height: -webkit-fill-available; */
    justify-content: flex-start;
    padding: 0 5px;
    border-radius: var(--radio-box);
    overflow: auto;
    background-color: var(--color-box-filters);
}

#general-instalaciones .panel {
    width: 100%;
    /* height: 100%;
    height: -webkit-fill-available; */
    background-color: transparent;

}

#general-instalaciones .column.info {
    width: 100%;
    height: 100%;
    height: -webkit-fill-available;
    padding-left: 15px;
    font-family: var(--font-secundaria);
    /* background-color: #008d4c; */
    display: flex;
    flex: auto;
    overflow-y: auto;
}

#general-instalaciones .box {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    padding: 5px;
    margin-bottom: 5px;
    /* flex: auto; */
    /* min-height: 75px; */
    max-height: fit-content;
    font-family: var(--font-secundaria);
    cursor: pointer;


}

#general-instalaciones .box>span {
    font-size: 12px;
}

#general-instalaciones .box:hover {
    background-color: var(--color-hover)
}


#general-instalaciones .box.select {
    background-color: var(--color-principal)
}

#general-instalaciones .box.select .category {
    color: var(--color-text)
}

#general-instalaciones .facilities #input {
    padding-left: 5px;
    padding-right: 5px;
}

#general-instalaciones .botones-filtro {
    flex: 1;
}

.navegacion,
.navegacion-wo {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    flex: none !important;
    padding: 5px;
}

.navegacion-wo {
    width: fit-content;
}

.navegacion>#tituloPagina,
.navegacion>#subTituloPagina,
.navegacion-wo>#tituloPagina,
.navegacion-wo>#subTituloPagina {
    flex: 1;
    margin: 0;
    padding: 5px;
    gap: 5px;
    align-items: center;
}

.navegacion>#tituloPagina.select:hover,
.navegacion-wo>#tituloPagina.select:hover {
    color: var(--color-principal);
    cursor: pointer;
}

.navegacion>.opciones,
.navegacion-wo>.opciones {
    width: fit-content;
    display: flex;
}

#general-instalaciones .box {
    display: flex;
    flex-direction: column;

}

#general-instalaciones .box .category {
    color: var(--color-principal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    padding: 2px;
    text-align: start;
}

#general-instalaciones .box>div>.frecuency {
    color: var(--gris);
    font-size: 12px;
    padding: 2px;
    text-align: end;
}

.text-accordion {
    font-size: 14px;
}

#general-instalaciones .box>div>.frecuency>i {
    color: var(--color-principal);
}

#general-instalaciones .box>span.info {
    color: var(--color-text);
    overflow: hidden;
    /* flex: 1; */
    /* border-bottom: 0.2px solid #fffafa42;
    border-top: 0.2px solid #fffafa42; */
    text-overflow: ellipsis;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    font-size: 12px;
    padding-top: 12px;
    padding-left: 0;

}

.info-facility {
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    display: flex;
    width: 100%;
    /* height: 190px; */
    /* margin-bottom: 15px; */
    flex-wrap: wrap;
    position: relative;
    /* padding: 5px; */
    flex-wrap: wrap;
    flex-direction: column;


}

.info-facility .botones {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.info-facility>.conjunto {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.info-facility>.conjunto>div {
    flex: 1;
    min-width: 117px;
}

.info-facility>.conjunto>div.long {
    flex: 2;
    min-width: 240px;

}

.info-facility>div:last-child {
    width: 100%;
    flex: none;
    min-height: fit-content;
    /* max-height: 121px; */
    overflow-x: auto;
}

.info-facility.ops {
    margin-top: 15px;
    padding-bottom: 0;
    margin-bottom: 0;
}

.ops .dropdown-menu {
    top: -216px;
}

.info-facility>div.btn-ops:last-child {
    overflow: initial;
}

.devices {
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 12px;
    align-items: center;
}

.devices>#tabla {
    width: 80%;
    max-width: 2000px;
}

.list .devices>#tabla {
    width: 100%;
    max-width: 2000px;
}

.devices-mobile {
    display: none;
    width: 100%;
    flex-direction: column;
    padding: 12px;
}

.devices-mobile .table-devices .botones {
    padding: 12px;
    font-size: 20px;
}

.table-devices {
    display: flex;
    flex-direction: column;
}

.table-devices>div {
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    /* padding: 12px; */
}

.table-devices .split {
    padding: 1px;
}

.table-devices .split>span:first-child {
    background-color: var(--gris-oscuro);
    padding: 4px;
    border-radius: var(--radio-box);
}

.table-devices .split>span:last-child {
    padding: 4px;
    /* text-align: end; */
}

.table-devices .botones {
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-devices {
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    display: flex;
    width: 100%;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    padding: 5px;

    position: relative;
}

.info-devices .navegacion {
    flex-wrap: wrap;
}

.info-devices>.navegacion>#menu-select.dots {
    display: none;
}

.info-devices uib-accordion {
    overflow-y: auto;
    width: 100%;
}

.info-devices>span {
    padding: 5px;
    width: 100%;
    height: 100%;
}

.scroll-x {
    display: flex;
    flex-direction: column;
    height: 100%;
    height: -webkit-fill-available;
    overflow-x: auto;
    width: 100%;
}

.info-pieces {
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    padding: 5px;
}

.btn-ops {
    display: flex;
    /* background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box); */
    align-items: center;
    padding: 5px;
    margin: 5px 0;
    flex-wrap: wrap;
}

.btn-ops #select {
    padding-top: 0;
}

.btn-ops>*:first-child {
    flex: 1
}

.btn-ops>.btn {
    min-width: auto;
    height: fit-content;
}

#general-instalaciones .select-facilities {
    display: none;
}

#general-instalaciones.workOrder {
    overflow-y: auto;
}

#general-instalaciones.workOrder #menu-modulos a>.modulo {
    /* color: var(--color-secundario); */
    color: var(--color-btn-text);
}

#general-instalaciones.workOrder .panel {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    height: 100%;
    /* background-color: red; */
    margin: 0;
    padding: 0;
    gap: 8px;
}

#general-instalaciones.workOrder .panel>div:first-child {
    flex: 1;
    /* padding: 5px; */
    height: 100%;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

#general-instalaciones.workOrder .panel>div:last-child {
    width: 200px;
    /* padding: 5px; */
    display: flex;
    flex-direction: column;

}

#general-instalaciones.workOrder .panel>div .panel-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* background: var(--color-box-filters);
    border-radius: var(--radio-box) var(--radio-box) 0 0;
    border: var(--border-separador);
    box-shadow: var(--shadow-box); */
    height: 100%;
    font-family: var(--font-secundaria);
}

#general-instalaciones.workOrder .panel>div .panel-info>.conjunto {
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    /* margin-bottom: 8px;
    padding: 2px; */
    position: relative;
}

#general-instalaciones .partir {
    display: flex;
    flex-direction: row;
}

.tasks {
    display: flex;
    /* justify-content: center;
    align-items: center; */
    padding: 2px;
    width: 100%;
    max-height: 100%;
    height: fit-content;
    flex-direction: column;
    /* overflow-y: auto; */

}

.tasks .icon {
    color: var(--color-principal);
    margin-right: 5px;
}

.tasks>.panel-tasks {
    flex: 1;
    width: 100%;
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: var(--color-text);
    flex-direction: column;
    padding: 5px;
    height: 100%;
}

.tasks>.panel-tasks>.task {
    display: flex;
    flex-direction: row;
    width: 100%;
    /* height: 40px; */
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    margin: 5px 0;
    position: relative;
    padding: 12px;
    flex-wrap: wrap;

}

.tasks>.panel-tasks>.task>.info-task>.value {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: fit-content;
    padding: 2px;
    font-size: 13px;
    font-family: var(--font-secundaria);
    background: var(--gris-oscuro);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    color: var(--color-btn-text);

}

.tasks>.panel-tasks>.task>.info-task>.price {
    color: var(--color-principal);
    font-family: var(--font-secundaria);
    padding-right: 25px;
}

.tasks>.panel-tasks>.task>.info-task>.value>span {
    color: var(--color-principal);
}

.tasks>.panel-tasks>.task>.dots {
    font-size: 15px;
    width: auto;

}

.tasks>.panel-tasks>.task:hover {
    cursor: pointer;
    /* background-color: var(--color-widget-hover); */
}

.tasks .add-task {

    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
}

.tasks .add-task #select {
    padding-top: 0;
}

.tasks .add-task.form {
    padding-top: 12px;
    position: relative;
    margin-top: 12px;
}

.tasks>.panel-tasks>.task #menu-select.dots {
    position: absolute;
    right: 3px;
    top: -4px;
}

.tasks .add-task>div {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.tasks>.panel-tasks>.task>div {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
}

.tasks>.panel-tasks>.task>.info-task {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    flex-wrap: wrap;
}

.tasks>.panel-tasks>.task>.info-task>span:first-child {
    flex: 1;
    /* border-left: 1px solid var(--gris); */
    /* padding-left: 5px;
    margin-left: 5px; */
}

.tasks>.panel-tasks>.task>.info-task.done>span:first-child {
    text-decoration: line-through;


}

.tasks .add-task,
#general-contratos .add-task {
    width: 100% !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
}

.tasks .add-task>div,
#general-contratos .add-task>div {
    flex: 1;
}

.tasks .add-task button,
#general-contratos .add-task button {
    min-width: auto;
    height: fit-content;
}

.tasks>.panel-tasks>.task>span.price {
    flex: none;
    width: auto;
    margin-right: 24px;
}


#general-instalaciones.workOrder .panel>div .panel-info>.conjunto>h4 {
    font-size: 15px;
    margin: 5px;
    margin-left: 5px;
}

#general-instalaciones.workOrder .panel>div .status {
    border-radius: var(--radio-box);
    text-transform: uppercase;
    padding: 8px;
    text-align: start;
    color: var(--color-btn-text);
    position: relative;

    /* display: flex;
    justify-content: flex-start;
    align-items: center; */

}

#general-instalaciones.workOrder .panel>div .status>i {
    font-size: 15px;
    padding: 5px;
}

/* 
.gmao .panel-icon i {
    opacity: 40%;
} */




.progress {
    display: flex;
    background-color: var(--gris-200);
    overflow: inherit;
}

.progress>div {
    color: var(--color-btn-text);
    position: relative;
}

.progress>div>div {
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--gris-oscuro);
    cursor: pointer;
}

.datos-contrato .progress>div:first-child {
    border-radius: var(--radio-box);
}

.datos-contrato .progress>div:last-child {
    width: 48% !important;
}

/* i.pending {
    color: var(--naranja-oscuro) !important;
}

i.planified {
    color: var(--morado) !important;
}

i.in_action {
    color: var(--color-principal) !important;
}

i.completed {
    color: var(--gris-oscuro) !important;
}

i.aproved {
    color: var(--verde) !important;
} */

.notification {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    flex-direction: row;
    background-color: var(--indigo-trans);
    border-radius: var(--radio-box);
}

.notification .icon {
    font-size: 24px;
    color: var(--indigo);
    padding-right: 12px;
}

@media (max-width: 1100px) {
    .info>.division {
        flex-direction: column-reverse !important;
    }

    .presupuestos {
        padding-left: 0;
        margin-bottom: 8px;
    }
}

@media (max-height: 800px) {
    .info-devices uib-accordion {
        overflow-y: initial;
    }
}

@media (max-width: 765px) {
    #general-instalaciones .facilities {
        display: none;
    }

    #general-instalaciones .select-facilities {
        display: flex;
        justify-content: flex-start;
    }

    #general-instalaciones .sincontrato {
        display: none;
    }

    #general-instalaciones .info {
        padding-left: 0;
    }

    /* #general-instalaciones>div:first-child {
        overflow-y: auto;
    } */

    /* .info-devices,
    #general-instalaciones .row {
        overflow-y: unset;
    } */

    .box-filters {
        margin: 8px;
    }

    .row {
        padding: 8px !important;
    }

    #general-instalaciones {
        height: calc(100vh - 90px);
        padding: 5px;
    }

    #soporte.gmao {
        padding: 5px;
    }

    #soporte.gmao .panel-soporte {
        height: calc(100vh - 90px);
    }

    #general-instalaciones.buscar>div:first-child,
    #soporte.gmao.buscar>div:first-child {
        display: none;
    }

    #general-instalaciones.buscar .panel-busqueda,
    #soporte.gmao.buscar .panel-busqueda {
        width: 100%;
    }



    #general-instalaciones.buscar {
        padding: 0 0;
    }

    #general-instalaciones .box-filters .datos>select-filter {
        max-width: 100%;
    }

    #general-instalaciones.workOrder .panel {
        flex-direction: column;
        height: auto;
    }

    #general-instalaciones.workOrder .panel>div:first-child {
        height: auto;
    }

    #general-instalaciones.workOrder .panel>div:last-child {
        width: 100%;
    }

    #general-instalaciones .partir {
        display: none;
        visibility: hidden;

    }

    .info-facility {
        margin-bottom: 0;
    }

    .info-facility>.conjunto {
        flex-direction: column;
    }

    .info-facility>div:last-child {
        max-height: none;
    }

    .buscar .tasks>.panel-tasks {
        background-color: transparent;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    #general-instalaciones .column.info {
        padding-left: 0;
        height: auto;
        flex-direction: column-reverse;
    }


}

.calendario {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}


.diario {
    width: 500px;
    height: 100%;
    /* padding: 12px; */
    padding-left: 0;

}

.diario>.agenda {
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    /* padding: 8px; */
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--font-secundaria);
}

.diario>.agenda>.toolbar {
    background: var(--color-box-filters);
    border-top-left-radius: var(--radio-box);
    border-top-right-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    padding: 8px;
    display: flex;
    flex-direction: row;
}

.diario>.agenda>.toolbar>span:first-child {
    flex: 1;
    color: var(--color-principal);
    font-size: 18px;
}

.diario>.agenda>.toolbar>span:last-child {
    display: flex;
    width: auto;
    justify-content: flex-end;
    flex-direction: row;
}

.diario>.agenda>.toolbar>span:last-child>span {
    padding: 0 5px;
    color: var(--color-text);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.diario>.agenda>.toolbar>span:last-child>span:hover {
    cursor: pointer;
    color: var(--color-principal);


}

.diario>.agenda>.scroll {
    height: 100%;
    padding: 8px;
    overflow-y: auto;
}

.diario>.agenda>.scroll>.fecha {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.diario>.agenda>.scroll>.fecha>span {
    font-size: 16px;
    padding: 8px 0;

}

.diario>.agenda>.scroll>.fecha>.wo {
    background: var(--color-box-filters);
    border-top-left-radius: var(--radio-box);
    border-top-right-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    padding: 8px;
    display: flex;
    margin-bottom: 8px;
    flex-direction: column;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    text-decoration: none;
    color: var(--color-text);
}

.wo.expired {
    background-color: #ff000012 !important;
}

.diario>.agenda>.scroll>.fecha>.wo:hover {
    cursor: pointer;
    background-color: var(--color-hover);
    transition: all 0.5s ease-in-out;
    box-shadow: 0 5px 15px rgb(0 0 0 / 30%);

}

.diario>.agenda>.scroll>.fecha>.wo>span {
    padding: 8px 0;
    font-size: 16px;
}

.diario>.agenda>.scroll>.fecha>.wo.pending {
    border-left: 5px solid var(--naranja-oscuro);

}

.diario>.agenda>.scroll>.fecha>.wo.planified {
    border-left: 5px solid var(--indigo);
}

.diario>.agenda>.scroll>.fecha>.wo.inAction {
    border-left: 5px solid var(--azul);
}

.diario>.agenda>.scroll>.fecha>.wo.completed {
    border-left: 5px solid var(--rojo-200);
}

.diario>.agenda>.scroll>.fecha>.wo.approved {
    border-left: 5px solid var(--verde);
}

.widgets {
    width: 100%;
    /* min-height: 150px; */
    /* max-height: 150px; */
    height: auto;
    padding: 0 5px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;



}

.table-box {

    width: 80%;
    padding: 8px;
    background-color: var(--color-box-filters);
    border-radius: var(--radio-boton);

}

.plants>.table-box {
    width: 100%;
}

#general-usuario.gmao .table-box {
    width: 100%;
    max-width: 1619px;
}

.buscar .table-box {
    width: 100%;
    /* margin: 12px; */
}

.table-box-option {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.table-box-option>div {
    flex: 1;
}

.table-box-option .btn {
    min-width: auto;
    padding: 12px;
    height: fit-content;
}

.table-box-option .botones {
    width: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1;
    padding-top: 8px;
    padding-bottom: 8px;
    height: 100%;
}

.table-box-option #input {
    max-width: 350px;
}

.widgets {
    width: 100%;
}

.main.division {
    width: 80%;
}

.widget {
    flex: 1 auto;
    /* margin: 5px; */
    height: auto;
    max-height: 150px;
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    padding: 8px;
    display: flex;
    flex-direction: column;
    font-size: 18px;
    margin-bottom: 12px;

}

.widgets>.widget {
    margin: 5px;
}

/* #soporte.gmao .widgets>.widget {
    margin: 0;
} */

#soporte.gmao.service .widgets>.widget {
    margin: 6px;
}

.gmao .short {
    padding-right: 0 !important;
}

.widgets.main {
    height: 100%;
    width: 100%;
}

.widgets.main>.widget {
    max-height: 100%;
    position: relative;
    min-width: 150px;
}

.widget:hover,
.widget.select {
    cursor: pointer;
    background-color: var(--color-hover);
    transition: all 0.5s ease-in-out;
    box-shadow: 0 5px 15px rgb(0 0 0 / 30%);

}

.panel-tickets.tabla-5 .widget:hover {
    cursor: initial;
    background: var(--color-box-filters);

}

.widgets.main>.widget:hover {
    cursor: inherit;
    background-color: var(--color-box-filters);
    transition: none;
    box-shadow: var(--shadow-box);
}

.widget>.info-widget {
    display: flex;
    flex-direction: row;
    flex: 1;
}

.widget>.info-widget>.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.8em;
    padding: 0 12px;
}

/* .widgets.main>.widget .icon {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 3em;
    z-index: 0;
    opacity: 44%;
    padding-left: 5px;
} */

.widget>.info-widget>.info {
    display: flex;
    justify-content: center;
    flex: 1;
    flex-direction: column;
    margin-left: 8px;
    font-family: var(--font-secundaria);
}

.widgets.main>.widget>.info-widget>.info {
    align-items: center;
    margin: 0;
}

.widget>.info-widget>.info>.title {
    font-size: 1em;
    color: var(--color-principal);
}

.widgets.main>.widget .title {
    font-size: 1em;
}

.widgets.main>.widget .title>i {
    color: var(--color-principal);
}

.widget>.info-widget>.info>.value {
    font-size: 1.16em;
    color: var(--color-text);
}

.widgets.main>.widget>.info-widget>.info>.value {
    font-size: 3em;
}

.widget>.info-widget>.info>.value>.unit {
    font-size: 0.88em;
    color: var(--gris-oscuro);

}

.widget>.grafica-widget {
    height: auto;
    padding-top: 16px;
}

.widget>.grafica-widget>span {
    font-size: 0.66em;
}

.widgets .progress,
.box-progress>.progress {
    height: 3px;
    margin-bottom: 0;
}

.box-progress>.title {
    color: var(--color-principal);
}

.division .short {
    width: auto;
    padding-right: 12px;
    flex: 0;
}

.costes .widgets>.widget {
    font-size: 16px;
}

.division .long {

    flex: 2;
}

.widgets .progress-text {
    padding-top: 12px;
    font-size: 12px;
}

.box-progress {
    padding: 12px;
}

.calendario>.division {
    flex: 1;
    display: flex;
    flex-direction: row;
    height: 100%;
    flex-wrap: wrap;
}

.calendar {
    flex: 1;

    display: flex;
    /* width: 100%; */
    height: 100%;
    /* padding: 12px; */
    font-family: var(--font-secundaria);

}



.calendar>div {
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    padding: 8px;
    height: 100%;
    font-family: var(--font-secundaria);
    min-width: 300px;

}

.calendar a {
    color: var(--color-text);
    text-decoration: none;
}

.calendar .fc-today {
    background: var(--color-hover);
}

.calendar .fc-toolbar button {
    background: var(--color-btn);
    color: var(--color-btn-text);
    font-family: var(--font-principal);
    height: auto;
}

.calendar .fc-toolbar .fc-state-active,
.calendar .fc-toolbar .ui-state-active {
    z-index: 1;
}

.calendar .fc td,
.calendar .fc th {
    border-style: solid;
    border-width: 0.5px;
}

.calendar .fc-event {
    border: 0;
    padding: 3px;
}

.calendar .fc-unthemed .fc-content,
.calendar .fc-unthemed .fc-divider,
.calendar .fc-unthemed .fc-popover,
.calendar .fc-unthemed .fc-row,
.calendar .fc-unthemed tbody,
.calendar .fc-unthemed td,
.calendar .fc-unthemed th,
.calendar .fc-unthemed thead {
    border-color: var(--border-table);
}

.calendar .fc-row .fc-content-skeleton td,
.calendar .fc-row .fc-helper-skeleton td {
    border-width: 0;
}

.calendar .fc-unthemed .fc-divider,
.fc-unthemed .fc-popover .fc-header {
    background-color: var(--menu-select);

}

.calendar .fc-unthemed .fc-popover {
    background-color: var(--menu-select);
}

.calendar .fc-day-grid-event .fc-time {
    display: none;
}

.calendar .fc-event,
.fc-event:hover,
.ui-widget .fc-event {
    background: var(--color-principal);
    color: var(--color-btn-text);
    cursor: pointer;
}

.tag>span.status.pending {
    background-color: var(--naranja-oscuro-200-trans);
    color: var(--naranja-oscuro-200);
}

.progress-bar-pending {
    background-color: var(--naranja-oscuro-200);
}

#general-instalaciones.workOrder .panel>div .panel-info>.conjunto.status {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

#general-instalaciones.workOrder .panel>div .panel-info>.conjunto.status.pending,
.calendar .fc-event.pending,
.status .pending {
    background-color: var(--naranja-oscuro);
}

.progress-bar-azul-claro {
    background-color: var(--azul-claro);
}

.progress-bar-ambar-claro {
    background-color: var(--ambar-claro);
}

.progress-bar-verde-claro {
    background-color: var(--verde-claro);
}

.progress-bar-gris-oscuro {
    background-color: var(--gris-oscuro);
}

.tag>span.status.planified {
    background: var(--indigo-200-trans);
    color: var(--indigo-200)
}

.progress-bar-planified {
    background: var(--indigo-200);
}

#general-instalaciones.workOrder .panel>div .panel-info>.conjunto.status.planified,
.calendar .fc-event.planified,
.status .planified {
    background: var(--indigo);
}

/* css para inicilizar el calendario de GMAO y renderice bien */
.calendar .fc-event.ini {
    display: none;
}

.tag>span.status.in_action {
    background-color: var(--azul-claro-200-trans);
    color: var(--azul-claro-200);
}

.progress-bar-in_action {
    background-color: var(--azul-claro-200);
}

#general-instalaciones.workOrder .panel>div .panel-info>.conjunto.status.in_action,
.calendar .fc-event.inAction,
.status .in_action {
    background-color: var(--azul);
}

.tag>span.status.completed {
    background-color: var(--rojo-200-trans);
    color: var(--rojo-200);
}

.progress-bar-completed {
    background-color: var(--rojo-200);

}

#general-instalaciones.workOrder .panel>div .panel-info>.conjunto.status.completed,
.calendar .fc-event.completed,
.status .completed {
    background-color: var(--rojo-200);

}

.tag>span.status.approved {
    background-color: var(--verde-200-trans);
    color: var(--verde-200);
}

.progress-bar-approved {
    background-color: var(--verde-200);

}

#general-instalaciones.workOrder .panel>div .panel-info>.conjunto.status.approved,
.calendar .fc-event.approved,
.status .approved {
    background-color: var(--verde);

}

/* .panel-info .conjunto {
    display: flex;
    justify-content: flex-start;
    align-items: center;

} */

.panel-info .conjunto>i {
    width: max-content;
    margin-right: 5px;
}

/* .panel-info .conjunto>span {
    flex: 1;
} */

.gmao .pending .panel-icon i,
.icon.pending {
    color: var(--naranja-oscuro);
}

.gmao .planified .panel-icon i,
.icon.planified {
    color: var(--indigo);
}

.gmao .inAction .panel-icon i,
.icon.inAction {
    color: var(--azul);
}

.gmao .completed .panel-icon i,
.icon.completed {
    color: var(--rojo-200);

}

.gmao .approved .panel-icon i,
.icon.approved {
    color: var(--verde);
}



.tag>span.PRE {

    background-color: var(--verde-claro-trans);

    color: var(--verde-claro);
}



.tag>span.COR {

    background-color: var(--ambar-claro-trans);

    /* opacity: 0.18; */
    color: var(--ambar-claro);
}

.tag>span.CON {
    background-color: var(--rosa-200-trans);

    color: var(--rosa-200);
}

.progress-bar-verde {
    background-color: var(--verde);
}

.progress-bar-amarillo {
    background-color: var(--naranja);
}

.progress-bar-naranja {
    background-color: var(--naranja-oscuro);
}

.progress-bar-rojo {
    background-color: var(--rojo);
}

@media (max-width: 765px) {
    .calendar {
        height: auto;
        width: 100%;
    }

    .division>* {
        flex: none;
    }

    .diario {
        height: 500px;
        width: 100%;

        /* padding-left: 12px; */
    }

    .table-box-option .botones {
        height: auto;
    }

    .widget>.info-widget>.info>.value>.unit {

        display: none;
    }

    .widget>.grafica-widget {
        display: none;
    }
}

/**
*   Tabs con AngularJS 
*/

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    color: var(--color-text);
    cursor: default;
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
}

.nav-tabs>li.active>a .icon {
    color: var(--color-principal);
}

.nav-tabs>li>a:hover {
    border-color: var(--color-placeholder);
}

.nav-tabs {
    border-bottom: 1px solid var(--color-box-filters);
}

.nav-tabs>li>a {

    border: 1px solid transparent;
    border-radius: var(--radio-box) var(--radio-box) 0 0;
    color: var(--color-text);
}


#attachment {
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
}

#attachment>.drop {
    height: 200px;
    border: 1px solid var(--hover-menu);
    text-align: -webkit-center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#attachment>.files {
    padding-top: 5px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
}

#attachment>.files>.file {
    display: flex;
    flex-direction: row;
    flex: 1;
    /* width: fit-content; */
    min-height: 50px;
    background: var(--color-box-filters);
    border-radius: var(--radio-box);
    border: var(--border-separador);
    box-shadow: var(--shadow-box);
    padding: 5px;
    min-width: 200px;

}

#attachment>.files>.file>.type {
    display: flex;
    width: 50px;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--azul-200);
}

#attachment>.files>.file>.info {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-overflow: ellipsis;

    /* white-space: nowrap; */
    overflow: hidden;
}

#attachment>.files>.file>.info>span:first-child {
    flex: 1;
    text-align: initial;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    overflow: hidden;
}

#attachment>.files>.file>.info>span:last-child {
    height: 15px;
    font-size: 11px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: var(--color-infoWidget);
}

#attachment>.files>.file>.options {
    display: flex;
    flex-direction: column;
    width: 20px;
    align-items: end;
    /* justify-content: center; */
    row-gap: 11px;
}



#attachment>.files>.file:hover {
    background-color: var(--color-hover);
    cursor: pointer;
}

@media (max-width: 767px) {
    #attachment>.drop {
        display: none;
    }
}

/**
* CSS para la parte de novedades
*/

.distribucion {
    font-family: var(--font-secundaria);
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: auto;
    padding: 0px 12px;
    height: calc(100vh - 200px);

}

.distribucion h4 {
    color: var(--color-principal);
    font-family: var(--font-secundaria);

}

.distribucion h5 {
    line-height: 20px;
}

.distribucion .box-new {
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 8px;
    overflow: auto;
    border-radius: var(--radio-box);
    box-shadow: var(--shadow-box);
    /* background-color: var(--color-widget); */
}

.distribucion .box-new>.info {
    display: flex;
    flex-direction: row;
    gap: 12px;
    font-size: 16px;
    font-family: var(--font-secundaria);


}

.distribucion .box-new>.info>.icon {
    color: var(--color-principal);
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.distribucion .box-new>.info>.icon.bug {
    color: var(--rojo-claro)
}

.distribucion .box-new .version {
    font-size: 16px;

}

.distribucion .box-new .fecha {
    font-size: 14px;
    color: var(--gris);
}

.distribucion .box-new>.info>div:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;

}

/* CSS para Format JSON */
.format-json {
    display: flex;
    height: -webkit-fill-available;
    /* width: 100%; */
    position: relative;
    margin: 8px;
    gap: 8px;
    overflow: hidden;

}

.distribucion textarea,
.distribucion #beatiful {
    /* width: -webkit-fill-available;
    
    height: -webkit-fill-available; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: -webkit-fill-available;
    height: 100%;

    overflow: hidden;
    padding: 0;
    margin: 0;
    /* display: inline; */
    /* font-family: Arial, sans-serif; */
    font-size: 14px;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    /* font-size: 12px; */
    line-height: normal;
    /* margin: 10px; */

}

.distribucion textarea {
    background-color: transparent;
    color: transparent;
    caret-color: var(--color-text);
    white-space: pre-wrap;

    /* white-space: break-spaces;
    word-wrap: break-word; */

    overflow-y: auto;


}

.distribucion #beatiful {
    /* display: -webkit-inline-box; */

    /* display: inline; */
    background-color: var(--background-textarea);
    border-radius: var(--radio-box);
    border: var(--border-textarea);
    border: 1px;
    padding-right: 12px;
    /* margin: 1px; */
    color: var(--color-text);
    white-space: pre-wrap;

    /* white-space: break-spaces; */
    /* word-wrap: break-word; */

}

.distribucion textarea.error {
    background-color: var(--background-textarea);
    color: var(--color-text);
    border-color: var(--rojo);
}

.distribucion #beatiful.error {
    display: none;
}


.distribucion .json-key {
    color: var(--azul-200);
    white-space: pre-wrap;




    /* display: inline; */
}

.distribucion .json-value {
    color: var(--verde-200);
    white-space: pre-wrap;
}

.distribucion .json-bool {
    color: var(--azul);
    white-space: pre-wrap;
}

.distribucion .json-string {
    color: var(--naranja-oscuro-200);
    white-space: pre-wrap;




    /* display: inline; */
}


/**
* CSS para un load bonito y barato
*/

#load {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.lds-grid {
    display: flex;
    position: relative;
    width: 80px;
    height: 80px;

}

.lds-grid div {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-principal);
    animation: lds-grid 1.2s linear infinite;
}

.lds-grid div:nth-child(1) {
    top: 8px;
    left: 8px;
    animation-delay: 0s;
}

.lds-grid div:nth-child(2) {
    top: 8px;
    left: 32px;
    animation-delay: -0.4s;
}

.lds-grid div:nth-child(3) {
    top: 8px;
    left: 56px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(4) {
    top: 32px;
    left: 8px;
    animation-delay: -0.4s;
}

.lds-grid div:nth-child(5) {
    top: 32px;
    left: 32px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(6) {
    top: 32px;
    left: 56px;
    animation-delay: -1.2s;
}

.lds-grid div:nth-child(7) {
    top: 56px;
    left: 8px;
    animation-delay: -0.8s;
}

.lds-grid div:nth-child(8) {
    top: 56px;
    left: 32px;
    animation-delay: -1.2s;
}

.lds-grid div:nth-child(9) {
    top: 56px;
    left: 56px;
    animation-delay: -1.6s;
}

@keyframes lds-grid {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

#general-usuario.gmao>.panel-busqueda {

    width: 500px;
}

#license {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    /* min-height: calc(100vh - 50px); */
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    font-family: var(--font-secundaria);
    flex-direction: column;
    font-size: 16px;
}

#license>.license-data {
    display: flex;
    display: -webkit-flex;
    gap: 8px;
    padding: 8px;
    max-width: 1130px;
    width: 100vw;
    flex-direction: row;
    flex: 1;
    flex-wrap: wrap-reverse;

}

.buscar #license>.license-data {
    width: calc(100vw - 350px);
}



.license-data>.data {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    grid-template-rows: repeat(3, min-content);
    gap: 8px;
    flex: 1;
}

.license-data>.data .card-new {
    overflow-x: hidden;
}

.license-data>.data>div:last-child {
    grid-column: 1 / 3;
}

#license .message {
    font-family: var(--font-secundaria);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

#license .message>h3 {
    padding: 0;
    margin: 0;
}

#license .message>.icon {
    color: var(--color-principal);
    font-size: 28px;
}

.card-new {
    display: flex;
    width: 100%;
    min-height: 101px;
    flex-direction: column;
    padding: 5px;
    gap: 8px;
    border-radius: var(--radio-boton);
    background: var(--color-box-filters);
    box-shadow: var(--shadow-box);
    flex: 1;
    color: var(--color-text);
    position: relative;
}

.card-new .info {
    position: absolute;
    right: 3px;
    top: 8px;
    color: var(--color-principal);
}

.card-new>.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    gap: 8px;
}

.card-new>.header>.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: var(--radio-box);
    padding: 5px;
}

.card-new>.header>.icon>i {
    font-size: 18px;
}

.card-new>.body {
    display: flex;
    gap: 8px;
    flex: 1;
    font-size: small;
    font-family: 'Roboto-300';
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    font-size: 16px;

}

.card-new>.body.center {
    justify-content: center;
    align-items: center;
}

.card-new>.body .progress {
    width: 100%;
    height: 4px;
    border-radius: var(--radio-box);
    margin-bottom: 0;
}

.info-license {
    display: flex;
    flex-direction: column;
    padding: 5px;
    gap: 8px;
    width: 100%;
    /* height: 100%; */
    max-width: 500px;
    border-radius: var(--radio-boton);
    background: var(--color-box-filters);
    box-shadow: var(--shadow-box);
    min-height: 100%;
}

.info-license>.header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding-inline: 5px;
}

.info-license>.header>i {
    font-size: 18px;
    color: var(--color-principal);
}

.info-license>.card-new {
    background-color: transparent;
    box-shadow: none;
    min-height: fit-content;
    border: 1px solid var(--color-hover);
    border-radius: var(--radio-box);
}

@media (max-width: 1180px) {
    .buscar .info-license {
        max-width: -webkit-fill-available;
    }
}

.green {
    background-color: var(--verde-claro-trans);
}

.green>i {
    color: var(--verde-claro);
}

.naranja {
    background-color: var(--naranja-oscuro-200-trans);
}

.naranja>i {
    color: var(--naranja-oscuro-200);
}


.progress-bar-green {
    background-color: var(--verde-claro);
}

.blue {
    background-color: var(--azul-claro-200-trans);
}

.blue>i {
    color: var(--azul-claro-200);
}

.progress-bar-blue {
    background-color: var(--azul-claro-200);
}

.orange {
    background-color: var(--ambar-claro-trans);
}

.icon.orange>i {
    color: var(--ambar-claro);
}

.progress-bar-orange {
    background-color: var(--ambar-claro);
}

.red {
    background-color: var(--rojo-200-trans);
}

.red>i {
    color: var(--rojo-200);
}

.progress-bar-red {
    background-color: var(--rojo-200);
}

.indigo {
    background-color: var(--indigo-200-trans);
}

.indigo>i {
    color: var(--indigo-200);
}

.progress-bar-indigo {
    background-color: var(--indigo-200);
}

.ocean {
    background-color: var(--azul-claro-trans);
}

.ocean>i {
    color: var(--azul-claro);
}

.progress-bar-ocean {
    background-color: var(--azul-claro);
}

.print {
    display: none;
}

@media print {
    @page {
        margin: 8px;
    }

    body {
        height: 100%;
    }

    .print {
        display: initial;
    }

    #general-background,
    barra-gmao,
    .dots,
    .btn-group.dots.dropdown,
    .navegacion,
    .mobile,
    .info-facility .botones,
    .comentarios,
    .panel-tasks .add-task,
    .nav-tabs,
    textarea,
    dropdown-toggle,
    .panel-busqueda,
    .conjunto>h4,
    .executionResume,
    #menu-select,
    #attachment {
        display: none;
    }

    #general-instalaciones {
        min-height: 100vh;
        height: 120%;
    }

    #general-instalaciones.workOrder .panel {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        /* background-color: red; */
        margin: 0;
        padding: 0;
        page-break-inside: always;

    }

    .tab-content {
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
    }

    .tab-content>.tab-pane {
        display: block;
        flex: 1;
        width: 100%;

    }

    .tab-content>.tab-pane .dots {
        display: none;
    }

    .info-facility textarea {
        max-height: none;
        resize: none;
        /* Evita que el usuario pueda redimensionar el textarea */
        border: none;
        /* Quita el borde para que parezca más un campo de texto normal */
        overflow: hidden;
        /* Oculta el scroll */
        flex-grow: 1;
        /* Hace que el textarea crezca para llenar el espacio restante */
        width: 100%;
        /* Ancho completo */
    }

    .tasks>.panel-tasks>.task>.info-task.done>span:first-child {
        text-decoration: none;
    }

    #general-instalaciones.buscar>div:first-child,
    #soporte.gmao.buscar>div:first-child {
        display: initial;
    }

    ::-webkit-scrollbar {
        display: none;
        width: 5px;
        height: 5px;
    }

    .info-facility>.conjunto {
        flex-direction: row;
        flex-wrap: wrap;

    }

    .input-prop .valor {
        max-height: max-content !important;
    }

    #general-instalaciones.workOrder .panel>div:last-child {
        width: 100%;
    }

    #general-instalaciones.workOrder .panel>div .panel-info>.conjunto {
        display: flex;
        gap: 8px;
        justify-content: space-between;
        /* flex-wrap: wrap; */


    }

    #general-instalaciones.workOrder .panel>div .panel-info>.conjunto.status {
        justify-content: flex-start;
        align-items: center;
    }

    /* .info-facility.print {
        page-break-inside: avoid;
        page-break-after: always;
    } */

    .tab-content {
        display: flex;
        gap: 8px;
        flex-direction: column;
        height: 100%;
        /* page-break-inside: avoid; */
        /* page-break-before: always; */
        /* o page-break-after: always; */
    }



    .tasks>.panel-tasks {
        background: transparent;
        border-radius: 0;
        border: none;
        box-shadow: none;
    }

}


.dashboard-kpis {
    padding: 8px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, 350px);
    place-content: center;
    max-width: 1150px;
    width: 100%;
}

.dashboard-kpis.minimize {
    /* grid-template-columns: repeat(auto-fit, 205px); */
    grid-template-columns: repeat(auto-fill, minmax(208px, auto));
    place-content: normal;
    grid-gap: 15px;

}

.new-card {
    font-size: 18px;
    font-family: var(--font-subtitle);
    /* height: auto; */
    height: 215px;
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    padding: 8px;
    background-color: var(--color-menu);
    border: 1px solid var(--border-table);
    border-radius: var(--radio-box);
    box-shadow: var(--shadow-card)
}

.dashboard-kpis.minimize>.new-card {
    font-size: 12px;
    min-width: 205px;
    height: auto;

    width: -webkit-fill-available;
}

/* .new-card::before {
    content: "";
    position: absolute;
    top: 32px;
    right: -0.3px;
    height: calc(100% - 64px);
    width: 20px;
    border-radius: 11px 0 0 12px;
    border: 2px ridge var(--border-table);
    border-right: 0;
    background: var(--color-principal);
} */
.new-card>svg {
    /* width: 28px; */
    height: calc(100% - 44px);
    top: 22px;
    right: 0;
    position: absolute;
}

.minimize>.new-card>svg {
    height: calc(100% - 30px);
    top: 15px;
}

.new-card>.title {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 1em;
    gap: 12px;
    width: calc(100% - 20px);
}

.new-card>.title>.icon {
    font-size: 1.5em;
}



.new-card>.data {
    display: flex;
    flex-direction: row;
    gap: 8px;
    font-size: 3em;
    font-family: var(--font-secundaria);
    flex: 1;
    align-items: flex-end;
}

.new-card>.data>.unit {
    font-family: var(--font-terciaria);
    font-size: 0.4em;
}

.kpis .btn-group>.btn {
    margin: 0;
    background-color: var(--menu-select);
    border-color: var(--border-table);
    color: var(--color-text);

}

.kpis .btn-group>.btn.active {
    margin: 0;
    color: var(--color-btn-text);
    background-color: var(--color-principal);
    border-color: var(--border-table);
}

.kpis .btn-group>.btn {
    margin: 0;
}

.kpis .panel-botones {
    display: flex;
    padding: 8px;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1150px;

}

.kpis .panel-botones .right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.kpis .panel-botones .btn {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.kpis #panel-flotante .datos-widget .titulo {
    justify-content: flex-start;
    margin: 0;
}

.kpis #date-picker input:focus~.legend,
.kpis #date-picker input:not(.ng-empty)~.legend {
    top: 6px;
}

.kpis #date-picker {
    padding-top: 16px;
}

.kpis .load {
    width: auto;
    height: 40px;
    color: var(--color-principal);
    font-family: var(--font-terciaria);
    display: flex;
    align-items: last baseline;
    gap: 5px;
}

.dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-principal);
    /* Color de los puntos */
    display: inline-block;
    animation: dot-blink 1s infinite alternate;
    /* Animación */
    /* padding-top: 5px; */
    /* Espacio entre los puntos */
}

.kpis #panel-flotante .datos-widget {
    gap: 15px;
    padding-bottom: 15px;
    padding-top: 8px;
}

.kpis #panel-flotante .toggle,
.kpis #panel-flotante .datos-widget #input {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

.kpis #select {
    margin: 0;
    padding-top: 0;
}

.kpis .separador {
    /* width: 240px; */
    width: auto;
    border-bottom: 1px solid var(--border-table);
    margin: 15px 0;

}


@media (max-width: 1155px) {
    .new-card {
        height: 150px;
        width: 300px;
        font-size: 14px;
    }

    .dashboard-kpis {
        padding: 8px;
        display: grid;
        grid-gap: 15px;
        grid-template-columns: repeat(auto-fit, 300px);
    }
}

@media (max-width: 742px) {
    .new-card {
        height: 115px;
        width: 250px;
        font-size: 12px;
    }

    .dashboard-kpis {
        padding: 4px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fit, 250px);
    }

    .dashboard-kpis.minimize>.new-card {
        font-size: 10px;
        min-width: 105px;
    }

    .web {
        display: none;
    }

    .kpis .panel-botones .right {
        justify-content: start;
    }
}

@media (max-width: 523px) {
    .new-card {
        height: 115px;
        width: 200px;
        font-size: 10px;
    }

    .dashboard-kpis {
        padding: 4px;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fit, 200px);
    }

    .dashboard-kpis.minimize {
        /* grid-template-columns: repeat(auto-fit, 205px); */
        grid-template-columns: repeat(auto-fill, minmax(150px, auto));
        place-content: normal;
        grid-gap: 8px;
    }

    .dashboard-kpis.minimize>.new-card {
        font-size: 8px;
        min-width: 150px;
    }
}

@keyframes dot-blink {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.tag-map {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    /* Asegura suficiente espacio para 1 o 2 dígitos */
    height: 40px;
    border: solid 0.8px white;
    /* Altura igual al ancho para mantener la forma circular */
    border-radius: 50%;
    /* Redondea las esquinas para formar un círculo */
    background-color: var(--color-principal);
    /* Color de fondo */
    color: white;
    /* Color del texto */
    font-size: 1.3em;
    /* Tamaño del texto basado en el tamaño actual de la fuente */
    text-align: center;
    /* Centra el texto horizontalmente */
    line-height: 2em;
    /* Centra el texto verticalmente */
}

@keyframes drop {
    0% {
        transform: translateY(-200px) scaleY(0.9);
        opacity: 0;
    }

    5% {
        opacity: 0.7;
    }

    50% {
        transform: translateY(0px) scaleY(1);
        opacity: 1;
    }

    65% {
        transform: translateY(-17px) scaleY(0.9);
        opacity: 1;
    }

    75% {
        transform: translateY(-22px) scaleY(0.9);
        opacity: 1;
    }

    100% {
        transform: translateY(0px) scaleY(1);
        opacity: 1;
    }
}

.drop {
    animation: drop 0.3s linear forwards var(--delay-time);
}

.round {
    border-radius: 10px !important;
}

/**
 TABLE ACTIONS
*/
.actions {
    border: 1px solid var(--hover-menu);
    border-radius: var(--radio-box);
    padding: 0;
}

.actions .btn {
    margin: 0;
    /* background-color: var(--color-principal); */
    padding: 8px;
}

.custom-divider {
    border-top: 1px solid var(--color-hover);
    /* puedes cambiar el color */
    margin: 0px 0;
    height: 0;
    list-style: none;
}


.bulk-actions {
    display: flex;
    justify-content: center;
    text-decoration: none;
    font-size: 12.5px;
    /* color: #6b7280; */
    margin: 4px 0 8px;
    gap: 6px;
}

.bulk-actions a {
    color: var(--color-principal);
    text-decoration: none;
    cursor: pointer;
    min-width: 58px;
    padding: 2px 6px;
    border-radius: var(--radio-box);
    text-align: center;
}

.bulk-actions a:hover {
    text-decoration: none;
    background-color: var(--hover-action)
}

#new-table .list-select li.focused {
    background-color: #e6f0ff;
    border-radius: 6px;
    outline: none;
}


#new-table .darken-icon {
    color: color-mix(in srgb, var(--bg-color), black 20%);
}

#new-table .tabla-flex {
    display: flex;
    flex-direction: column;
    width: 100%;
    font-family: sans-serif;
    gap: 8px;
    overflow: auto;
    height: calc(100% - 20px);
}

#new-table .fila {
    display: flex;
    border-bottom: 1px solid var(--border-table);
    gap: 8px;
    align-items: center;
}

#new-table .fila.header {
    /* font-weight: bold; */
    padding: 5px;
    background-color: var(--background-tabla);
}

#new-table .col {
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#new-table .col-check {
    width: 5%;
    flex-shrink: 0;
    order: 0;
}

#new-table .col-id {
    width: 15%;
}

#new-table .col-descripcion {
    width: 50%;
}

#new-table .col-error {
    width: 50%;
}

#new-table .error {
    color: var(--color-error);
    font-weight: bold;
}

#new-table .fila.detalles {
    background-color: var(--color-widget);
    font-style: italic;
    font-size: 0.9em;
}

@media (max-width: 600px) {
    #new-table .col-descripcion {
        width: 100%;
        flex: 1;
    }

    #new-table .fila {
        flex-wrap: wrap;
    }

    /* #new-table .col-check, #new-table .col-id, #new-table .col-error {
      width: 100%;
    } */
}

.widget-detalles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;

    border-radius: 8px;
    padding: 15px;
    font-size: small;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.widget-item {
    background: var(--color-widget);
    padding: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 0.95em;
}

.widget-item i {
    font-size: 1.1em;
    /* color: var(--color-principal); */
}