html {
  font-size: 14px;
}
body > .header .logo {
  font-family: inherit;
}
body > .header .navbar .nav > li > a > .badge {
  position: absolute;
  top: 4px;
  right: 0;
  font-size: 75%;
}
body .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .glyphicon,
body .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fa,
body .navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .ion {
  background: none;
  color: inherit;
}
body .user-panel > .info {
  padding-left: 10px;
}
select {width:100%;}
.user-panel {min-height:60px;}
.user-panel div > p {margin-top:2px;}
.sidebar-menu li a > i {
    margin-right:10px;
    color:#0096fd;
    
}

legend {color:#029AFF; margin-top:22px;}
.CSSAnimationChart, .mapChart {
	width: 100%;
	height: 500px;
}
.roscos .portlet-body > div {
	height: 180px;
}

.roscos2 .portlet-body > div {
	height: 350px;
}

.amcharts-chart-div > a {
  display: none !important;
}

.grid-view {overflow:auto;}

leyend {
	color: #059FFF;
	border-bottom: 1px solid #059FFF;
	display: block;
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 30px;
}

.cuadroRosco{
    border-radius: 4px;
    background: #fff;
    padding: 15px 15px 0px;
    margin-bottom: 20px;
}

.tituloRosco{    
    border-bottom: 1px solid #eef1f5;
    height: 70px;
}

.numberRosco{
    font-size: 30px !important;
    font-weight: 400 !important;
    float: left;
    display: inline-block;
}

.letrasTituloRosco{
    font-size: 14px;
    color: #AAB5BC;
    font-weight: 600;
    text-transform: uppercase;
    width: 70%;
    margin: 0 0 0 30%;
}

.tituloRosco .icon{
    display: inline-block;
    float: right;
    padding: 7px 0 0;
    color: #cbd4e0;    
}
.rosco{
    width: 100%;
    aspect-ratio: 1 / 1;    
}
.rosco-leyenda{
    width: 100%;
    height: 50px;
}

.marcaAgua{
    background-color: rgba(255, 255, 255, 0.75);
    position: fixed;
    top: -50px;
    width: 100%;
    height: calc(100% + 50px);
    z-index: 100;
    display: none;
    text-align: center;
}

.smartphone{
    background-image: url("../img/smartphone.png");
    height: 799px;
    width: 430px;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 80px 35px;
    -moz-transform: scale(0.70);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.70);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.70);
    -webkit-transform-origin: 0 0;    
    position: relative;
}
.pc{
    background-image: url("../img/pc.png");
    /*height: 539px;
    width: 850px;
    padding: 9px 7px;*/
    height: 874px;
    width: 1378px;
    padding: 15px 12px 90px 12px;
    background-repeat: no-repeat;
    background-size: contain;        
    -moz-transform: scale(0.70);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.70);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.70);
    -webkit-transform-origin: 0 0;
    display: none;
    position: relative;
}

.tablet{
    background-image: url("../img/tablet.png");
    height: 551px;
    width: 800px;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 60px 50px;    
    -moz-transform: scale(0.60);
    -moz-transform-origin: 0 0;
    -o-transform: scale(0.60);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.60);
    -webkit-transform-origin: 0 0;
    display: none;
    position: relative;
}

.PcSmTa{
    text-align: center;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
}
.PcSmTa button{
    border-radius: 3px;
    background: linear-gradient(60deg,#0099ff,#0089e5);
    padding: 15px;
    margin: 10px;
    height: 65px;
    width: 65px;
    color: white;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0, 0, 0, 0.47);
    border: none;       
}

.PcSmTa button > i{
    font-size: 30px; 
}
/*# sourceMappingURL=style.map *//*# sourceMappingURL=style.map */

#crear {
    position:absolute;    
    z-index:250;
    top:-1000px;
    width: 100%;
    padding: 0 10px;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;

left: 0;
}

#detalleExcel,#detallePDF,#graficasPDF,#excel{
    cursor: pointer;
    display: table;
    padding-top: 10px !important;
}

    @font-face
    {
       font-family: "roboto";
       src: url("../css/Fuentes/roboto/Roboto-Regular.ttf");
       /*src: url("fuentefancy.eot?#amocristalab") format("embedded-opentype"),
            url("fuentefancy.woff") format("woff"),
            url("fuentefancy.ttf") format("truetype"),
            url("fuentefancy.svg#IDdelafuente") format("svg");*/
    }    
    
    .table > tbody > tr.info > td{
        background-color: black;
    }
    .panel-primary{
        /*border: 2px solid black;*/
        border: 1px solid #f9f9f9;         
    }
    
    .panel-primary > .kv-grid-container{
        min-height: 600px;
    }
    .panel-primary > .panel-heading{
        border-color: black;
        border-bottom: 2px solid black;
        background-color: #0096fd;
    }
    .panel-primary > .panel-heading > .panel-title{
        font-size: 25px;        
        font-weight: bold;
    }
    .table th{
        text-align: center;
    }
    body{
        color: black;
        font-family: roboto;
    }
    
    .btn-success {
        background-color: #0096fd;
        border-color: black;
    }
    .btn-success:hover {
        background-color: black;
        border-color: #0096fd;
    } 
    .panel-default > .panel-heading {
        background-color: #0096fd;
        text-align: center; 
        color: black;
    } 
    .panel-default > .panel-heading > .panel-title{
        font-size: 18px;        
        font-weight: bold;
    }
    
    .titulo2{
        background-color: #0096fd;
        font-size: 16px;
        margin: 20px;
        font-weight: bold;
        text-align: center;
    }
    
    .loader {
        position: absolute;
        border: 10px solid #f3f3f3;
        border-radius: 50%;
        border-top: 10px solid #0099ff;
        width: 41px;
        height: 41px;
        font-size: 15px;        
        top: 0px;
        z-index: 1;
        -webkit-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
        right: 10px;
    }
    

    @-webkit-keyframes spin {
       0% { -webkit-transform: rotate(0deg); }
       100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
    }
    
    .error {
        position: absolute;        
        width: 250px;
        height: 20px;        
        margin: auto;
        right:0px;
        left:30px;
        font-size:15px;
        color:red;
        z-index: 1;       
    }
    
    .errorEquipos {
        position: absolute;        
        width: 250px;
        height: 20px;        
        margin: auto;
        right:50px;
        font-size:15px;
        color:red;
        z-index: 1;       
    }
    
    table.TablaControladores {
        border: 2px solid #0099FF;
        background-color: #EEEEEE;
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        align: center;
        margin: auto;
      }
      table.TablaControladores td {
        border: 1px solid #0099FF;
        padding: 3px 2px;
      }
      table.TablaControladores tbody td {
        font-size: 15px;
      }
      table.TablaControladores tr:nth-child(even) {
        background: #D0E4F5;
      }
      table.TablaControladores thead {
        background: #0099FF;
        background: -moz-linear-gradient(top, #40b2ff 0%, #19a3ff 66%, #0099FF 100%);
        background: -webkit-linear-gradient(top, #40b2ff 0%, #19a3ff 66%, #0099FF 100%);
        background: linear-gradient(to bottom, #40b2ff 0%, #19a3ff 66%, #0099FF 100%);
        border-bottom: 2px solid #0099FF;
      }
      table.TablaControladores thead th {
        font-size: 10px;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        border-left: 2px solid #0099FF;
        margin: auto;
      }
      table.TablaControladores thead th:first-child {
        border-left: none;
      }
      
      table.TablaControladores th {
        font-size: 13px;
        font-weight: bold;        
        text-align: left;
        color: #FFFFFF;
        background: -moz-linear-gradient(top, #40b2ff 0%, #19a3ff 66%, #0099FF 100%);
        background: -webkit-linear-gradient(top, #40b2ff 0%, #19a3ff 66%, #0099FF 100%);
        background: linear-gradient(to bottom, #40b2ff 0%, #19a3ff 66%, #0099FF 100%);        
        border: 2px solid #0099FF;        
      }
      
      
      
      .content-header{
        padding: 0px 0px 0px 0px;
      }
      
      .dashboard-body{
/*          padding: 20px 20px 20px 20px;
          background-image: url("../img/fondoDashboard.jpg");
          background-size: 100% auto;
          background-repeat: repeat-y;*/
      }
      
      .clientes-usuarios-body{
         padding: 20px 20px 20px 20px !important; 
      }
      
      #sombra{
        -webkit-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
        box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.1);
      }
      
      .nav-tabs > li.active > a{
          color: #fff !important;
          background-color: #0096FD !important;
          border: 1px solid #000 !important;
      }
      
      .upload-kit-input{
          width: 100% !important;
      }
      
      .sensorEdificio{
          border: 1px solid #000;
          border-radius: 4px;
          background-color:rgba(255, 255, 255, 0.7);  
          font-size: 25px;
          text-align: center;
          margin:10px 0px 40px 0px;
          padding: auto;
      }
      
      #planta{
          background-image: url("../img/EdificioPlanta.jpg");
          background-repeat: no-repeat;
          background-size:     100% 100%;
          background-position: center center; 
          width: 100%;
          height: 120px;
      }
      
      #plantaBaja{
          background-image: url("../img/EdificioPlantaBaja.jpg");
          background-repeat: no-repeat;
          background-size:     100% 100%;
          background-position: center center; 
          width: 100%;
          height: 170px;
      }
      
      #tejado{
          width: 100%;
          height: 50px;
      }
      
      #pcIframe, #phoneIframe, #tabletIframe {height: 100% !important; width: 100% !important;}

/* MANU BURON */

.loader {
        position: absolute;
        border: 10px solid #f3f3f3;
        border-radius: 50%;
        border-top: 10px solid #0099ff;
        width: 41px;
        height: 41px;
        font-size: 15px;        
        top: 0px;
        z-index: 1;
        -webkit-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
        right: 10px;
}

@-webkit-keyframes spin {
       0% { -webkit-transform: rotate(0deg); }
       100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

.seccion-menu{       
    font-size: 22px;
    position: relative;
    text-align: center;
    color: #444;
    margin: 15px 0;
}

.seccion-menu::after{
    position: absolute;
    height: 1px;
    width: calc(100% - 30px);
    content: '';
    background-color: rgba(180,180,180,.3);
    top: 25px;
    left: 15px;
}
.seccion-menu::before{
    position: absolute;
    height: 1px;
    width: calc(100% - 30px);
    content: '';
    background-color: rgba(180,180,180,.3);
    top: -15px;
    left: 15px;
}
.panel-primary{
    /*border: 1px solid #f9f9f9;*/ 
    border: none;
}

.table th{
    text-align: center;
}

.main-panel .main-content {
    margin-top: 40px;
    padding: 30px 15px;
    min-height: calc(100vh - 123px);
}

.card.card-stats .card-header .card-icon + .card-category, .card.card-stats .card-header .card-icon + .card-title {
    padding-top: 10px;
}

/*para cambiar el standard*/

.caret{display:none !important;}

.sidebar .nav {
    margin-top: 0 !important;
}

.navbar-toggler{
    position: absolute;
    right: 10px;
}

.select2-results{
    font-size: 11px !important;
    line-height: 11px !important;
}

.upload-kit-item {
    background-color: #eeeeee;
}

.upload-kit-input {
    background-color: #eeeeee;
    min-height: 60px;
}

.upload-kit-input .add {
    color: white;
    top: 30% !important;
}

.date .form-control {
    background-color: white !important;
    border: solid 1px #0099ff;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 5px;
    background: none;
    font-weight: bold;
    color: #7e7e7e;
}

/*otras*/
.titulo-vista{
    font-size: 25px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 20px;
}

.select2-dropdown{
    z-index: 10000
}

.sidebar .sidebar-wrapper .select2{
    width: 80% !important;
    margin: 0 20%;
}

.select2-selection__arrow{
    height: 100% !important;
}
.select2-selection__rendered{
    margin: auto !important;
    white-space: normal !important;
}

/*nuevas*/
.contador{
    font-size: 25px;
    font-weight: 400;
    color: black;
    position: absolute;
    right: 0;
    top: 20px;
}

.contador-cntr{
    font-size: 25px;
    font-weight: 400;
    color: black;
    text-align: center;
    padding: 10px;
}

.line-arriba{
    border-top: 1px solid #eee;
    margin: 5px 15px 10px;
}

.tarta{
    max-height: 350px;
}

.dropbox-menu{
    margin: 10px 15px 0;
    border-radius: 3px;
    color: #FFF;
    padding: 10px 10px;
    text-transform: capitalize;
    font-size: 13px;
    background-color: #0099ff;
    box-shadow: 0 4px 20px 0 rgba(0,0,0,.14),0 7px 10px -5px rgba(0, 0, 0, 0.47);
    margin-bottom: 10px;
}

.dropbox-menu form{
    margin: 0;
}

.dropbox-menu i{
    color: #fff !important;
    margin: 10px 0 !important;
}

.dropbox-menu .select2-selection{
    height: 50px !important;
    font-size: 12px !important;
}

.card-acciones-titulo{    
    padding: 15px;
    position: absolute;
    top: -5px;
    right: 0px;
}
.card-acciones{
    text-align: right;
    padding: 15px;
}

.card-acciones i{
    font-size: 20px !important;    
}

.card-acciones > a > i{
    color: #0099ff !important;
}

.card-acciones button > i{
    color: white !important;
}
.card-acciones button {
    background-color: #0099ff !important; 
}

.card-acciones > .btn-group {
    margin: 0px !important; 
}

.detail-acciones{
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 5px;
    color: #0099ff !important;
    display: inline-block;
}

.cautivos th{
    border: none;
}

.cautivos tr{
    background-color: white !important;
}

.cautivos-lista tr{
    -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.14);
    -moz-box-shadow: 0 0 6px 0 rgba(0,0,0,.14);
    box-shadow: 0 0 6px 0 rgba(0,0,0,.14);
    border-radius: 10px;
    background: none !important;
}

.cautivos-lista .kv-expand-detail-row tr{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: 0px;
}

.cautivos-lista td{
    border: none !important;
}

.cautivos-lista th{
    border: none !important;
}


.cautivos-lista thead{
    display: none;
}
.cautivos-lista table{
    border-collapse:separate; 
    border-spacing: 10px 10px;
}

.cautivos-lista .table > tbody > tr.info > td{
    background-color: white;
}

.cautivos-lista img{
    background-color: #eee;
}

.blanco{
    color: white;
}

.filtro-fecha{
    background-color: white !important;
    border: solid 1px #d4d4d4;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 4px;
    background: none;
    background-color: rgba(0, 0, 0, 0);    
    color: #7e7e7e;
    padding-top: 10px !important;
}

/*nuevo dropdown */

.wrapper-dropdown-nuevo {
    /* Size and position */
    position: relative;    
    margin: 0 auto;
    padding: 5px 10px;

    /* Styles */
    background: #fff;
    border-radius: 7px;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(50,50,50,0.1);
    cursor: pointer;
    outline: none;

    /* Font settings */
    font-weight: bold;
    color: #8AA8BD;
}

.wrapper-dropdown-nuevo:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -3px;
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #8aa8bd transparent;
}

.wrapper-dropdown-nuevo .dropdown {
  /* Size & position */
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;

    /* Styles */
    background: white;
    border-radius: inherit;
    border: 1px solid rgba(0,0,0,0.17);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    font-weight: normal;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    list-style: none;
    z-index: 1000;
    padding: 0;
    text-align: center;
    
    /* Hiding */
    opacity: 0;
    pointer-events: none;
}

.wrapper-dropdown-nuevo .dropdown:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 15px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: #fff transparent;    
}

.wrapper-dropdown-nuevo .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}

.wrapper-dropdown-nuevo .dropdown li {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.wrapper-dropdown-nuevo .dropdown li i {
    float: right;
    color: inherit;
}

.wrapper-dropdown-nuevo .dropdown li:first-of-type {
    border-radius: 7px 7px 0 0;
}

.wrapper-dropdown-nuevo .dropdown li:last-of-type {
    border: none;
    border-radius: 0 0 7px 7px;
}

/* Hover state */

.wrapper-dropdown-nuevo .dropdown li:hover {
    background: #f3f8f8;
}

/* Active state */

.wrapper-dropdown-nuevo.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

/* No CSS3 support */

.no-opacity       .wrapper-dropdown-nuevo .dropdown,
.no-pointerevents .wrapper-dropdown-nuevo .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .wrapper-dropdown-nuevo.active .dropdown,
.no-pointerevents .wrapper-dropdown-nuevo.active .dropdown {
    display: block;
}

.card-category.filtro{
    margin: 10px 0 10px 80px !important;
}

.card-category hueco{
    padding: 17px 0;
}

#FiltroCliente{
    z-index: 10;
}

#FiltroAP{
    z-index: 9;
}

#FiltroTipoGrafica{
    z-index: 8;
}

#FiltroFechas{
    z-index: 7;
}

.profileContainer{
    max-width: 600px;
    margin: auto;
    min-width: 300px;
}

.tab-content > .tab-view {
    display: none;
}

.nav-link[data-toggle="tab"]{
    cursor: pointer;
}

.card-wizard .picture .form-group{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.card-wizard .picture .form-group .upload-kit-item {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border: none !important;
}

.card-wizard .picture .form-group .upload-kit-input {    
    width: 100%;
    height: 100%;
    border: none !important;
}

.card-wizard .picture .form-group .upload-kit {    
    width: 100%;
    height: 100%;
}

.circulo-boton {
    background-color: #fff;
    color: #999 !important;
    border-radius: 50% !important;
    border-color: #999;
    box-shadow: 0 2px 2px 0 rgba(153,153,153,.14),0 3px 1px -2px rgba(153,153,153,.2),0 1px 5px 0 rgba(153,153,153,.12);
    width: 41px;
    height: 41px;
    padding: 10px 8px !important;
    margin-right: 10px;
}
.circulo-boton:hover {
    box-shadow: 0 14px 26px -12px rgba(153,153,153,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(153,153,153,.2);
}

.blockDiv{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
}
div[class^='filtros-']{
    position: absolute;
    z-index: 250;
    top: -1000px;
}

.exportar-dashboard,.exportar-presencia{
    position: absolute;
    z-index: 250;
    top: -500px;
    right: 0;
}

.filtros, .exportar, .crear{
    position: absolute;
    top: 0;
    right: 10px;
    z-index: 250;
    transform: translateY(-100%);
    transition: transform 0.5s ease;
}
.filtros.visible, .exportar.visible, .crear.visible{
  transform: translateY(50px);
}

.botones-barra{
    position: absolute;
    top: 13px;
    right: 150px;
    z-index: 10;
}

@media (max-width:950px) {
    .botones-barra{
        position: relative;
        z-index: 10;
        top: 0;
        right: 0;
        width: 100%;
        text-align: right;
    }
}

.boton-barra {
    background-color: #fff;
    color: #999 !important;
    border-radius: 50% !important;
    border-color: #999;
    box-shadow: 0 2px 2px 0 rgba(153,153,153,.14),0 3px 1px -2px rgba(153,153,153,.2),0 1px 5px 0 rgba(153,153,153,.12);
    width: 41px;
    height: 41px;
    padding: 10px;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
    margin-right: 10px;
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
    text-align: center;
}

.boton-barra:hover {
    box-shadow: 0 14px 26px -12px rgba(153,153,153,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(153,153,153,.2);
}


.titulo-exportar{
    position: absolute;
    top: -20px;
    width: 65px;
    text-align: center;
    font-weight: bold;
}

.icono-exportar{
    font-size: 25px !important;
}

.tachado:after {
    position: absolute;
    content: "/";
    color: red;
    font-size: 1.8em;
    margin-left: -15px;
    top: 0px;
}

.truncate {
   max-width: 150px !important;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.truncate:hover{
   overflow: visible;
   white-space: normal;
   width: auto;
}

.card-seccion{
    border-bottom: solid 1px #d5d5d5;
    margin: 15px 0;
    color: #b0b0b0;
    font-weight: bold;
}

.loaderSeccion {
    position: relative;
    border: 10px solid #f3f3f3;
        border-top-color: rgb(243, 243, 243);
        border-top-style: solid;
        border-top-width: 10px;
    border-radius: 50%;
    border-top: 10px solid #0099ff;
    width: 80px;
    height: 80px;
    font-size: 15px;
    z-index: 1;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

.card-icon{
    display: table;
    padding: 0px !important;
}
.card-icon>.fas,.card-icon>.fa,.card-icon>.fab,.card-icon>.material-icons,.card-icon>.fa-brands,.card-icon>.fa-solid{
    display: table-cell;
    vertical-align: middle;
}
th>.fas,th>.fa,th>.fab,th>.material-icons{
    display: block;
    vertical-align: middle;
}
.circuloSensor.inactivo{
    background-color: #12da0c !important;
    /*background-image: radial-gradient(#099806, #13ae0f, #0adb04) !important;*/
}

.circuloSensor.activo{
    background-color: #d20000 !important;
    /*background-image: radial-gradient(#b10606, #d20000, #f00) !important;*/
}


.circuloSensor i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.casita-container{
    position: absolute;
    width: 50px;
    height: 50px;
}
.casita-sensores{
    position: absolute;
    width: 100%;
}
.sensor1 {   
    left: 30%;
    top: -50%;
}

.sensor2 { 
    left: -30%;
    top: -20%;    
}

.sensor3 {
    left: 90%;
    top: -20%;
}

.sensor4 {
    left: -30%;
    top: 50%;
}

.sensor5 {
    left: 90%;
    top: 50%;    
}

.sensor6 {
    left: 30%;
    top: 90%;
}
.circuloSensor{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    background-color: #0099ff;
    display: table;
    position: absolute;
    color: white;
    font-size: 10px;
    padding: 0px;
    border: solid 2px white;
    /*background-image: radial-gradient(#0472bc, #0885d8, #09f);*/
    box-shadow: 0 14px 26px -12px rgba(153,153,153,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(153,153,153,.2);
    z-index: 2;
    text-align: center;
    box-sizing: content-box;
}

.txt-luz{
    font-size:7px;
    font-weight:bold;
}

.txt-temp{
    font-size:7px;
    font-weight:bold;
}

.txt-con{
    font-size:7px;
    font-weight:bold;
}

.txt-bat{
    font-size:7px;
    font-weight:bold;
}


.circulo-online{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    position: relative;
    color: white;
    font-size: 6px;
    padding: 0px;
    border: solid 2px white;
    background-image: radial-gradient(#0472bc, #0885d8, #09f);
    display: table;
}
.circulo-online > i{
    font-size: 15px !important;
    display: table-cell;
    vertical-align: middle;
}
.circulo-online.on{
    background-image: radial-gradient(#099806, #13ae0f, #0adb04) !important;
}
.circulo-online.off{
    background-image: radial-gradient(#b10606, #d20000, #f00) !important;
}

.circuloSensor.luz{
     background: url('data:image/svg+xml;utf8,<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="rgba(255, 255, 255, 0.5)" d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg>')  no-repeat center;
     background-size: 40%;
     background-color: #0099ff;
}

.circuloSensor.gota{
     background: url('data:image/svg+xml;utf8,<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="rgba(255, 255, 255, 0.5)" d="M205.22 22.09c-7.94-28.78-49.44-30.12-58.44 0C100.01 179.85 0 222.72 0 333.91 0 432.35 78.72 512 176 512s176-79.65 176-178.09c0-111.75-99.79-153.34-146.78-311.82zM176 448c-61.75 0-112-50.25-112-112 0-8.84 7.16-16 16-16s16 7.16 16 16c0 44.11 35.89 80 80 80 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path></svg>')  no-repeat center;
     background-size: 40%;
     background-color: #0099ff;
}

.circuloSensor.bat{
     background: url('data:image/svg+xml;utf8,<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="rgba(255, 255, 255, 0.5)" d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-144 96H96v128h320V192z"></path></svg>')  no-repeat center;
     background-size: 80%;
     background-color: #0099ff;
}

.circuloSensor.temp{
     background: url('data:image/svg+xml;utf8,<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="rgba(255, 255, 255, 0.5)" d="M192 384c0 35.346-28.654 64-64 64s-64-28.654-64-64c0-23.685 12.876-44.349 32-55.417V224c0-17.673 14.327-32 32-32s32 14.327 32 32v104.583c19.124 11.068 32 31.732 32 55.417zm32-84.653c19.912 22.563 32 52.194 32 84.653 0 70.696-57.303 128-128 128-.299 0-.609-.001-.909-.003C56.789 511.509-.357 453.636.002 383.333.166 351.135 12.225 321.755 32 299.347V96c0-53.019 42.981-96 96-96s96 42.981 96 96v203.347zM208 384c0-34.339-19.37-52.19-32-66.502V96c0-26.467-21.533-48-48-48S80 69.533 80 96v221.498c-12.732 14.428-31.825 32.1-31.999 66.08-.224 43.876 35.563 80.116 79.423 80.42L128 464c44.112 0 80-35.888 80-80z"></path></svg>')  no-repeat center;
     background-size: 40%;
     background-color: #0099ff;
}

.circuloSensor.rayo{
     background: url('data:image/svg+xml;utf8,<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="rgba(255, 255, 255, 0.5)" d="M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z"></path></svg>')  no-repeat center;
     background-size: 40%;
     background-color: #0099ff;
}

.circuloSensor.sol{
     background: url('data:image/svg+xml;utf8,<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="rgba(255, 255, 255, 0.5)" d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg>')  no-repeat center;
     background-size: 40%;
     background-color: #0099ff;
}

.label-switch{
    position: absolute;
    top: -10px;
}

.agen-titulo{
    font-size: 25px;
    color: gray;
    padding: 25px 0px;
    text-align: center;
}

.agen-contador{
    text-align: center;
    font-size: 30px;
    padding: 15px 0;
    color: #818181;
}

#agen-img{
    text-align: center;
}

.imgPlanta{
    width: 100%;
    position: absolute;    
    left:0;
    -webkit-transition: left 1s ease-in;
    -moz-transition: left 1s ease-in;
    -ms-transition: left 1s ease-in;
    -o-transition: left 1s ease-in;
    transition: left 1s ease-in, top 1s ease-in;;
}

.tejado{
    top: 17px;
}

.piso{
    top: -55px;
}

.datos-planta{
    display: none;
    position: absolute;
}

.planta{
    -webkit-transition: all 1s ease-in;
    -moz-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    transition: all 1s ease-in;
}

.cuadro-sensor{
    font-size: 30px;
    display: block;
    border: solid 1px #e9e9e9;
    border-radius: 5px;
    padding: 10px;
    margin: 5px;
    background: #ffffffb3;
    -webkit-box-shadow: -11px 10px 69px -17px rgba(0,0,0,0.75);
    -moz-box-shadow: -11px 10px 69px -17px rgba(0,0,0,0.75);
    box-shadow: -11px 10px 69px -17px rgba(0,0,0,0.75);
}

.txt-planta{
    position: absolute;
    display: table;
    top: 0px;width: 100%;
    text-align: center;
    height: 50%;
    color: white;
}

.txt-planta>div{
    display: table-cell;
    vertical-align: middle;
    -webkit-text-stroke: 1px gray;
    font-weight: bold;
}

.dato-sensor{
    display: inline-block;
    text-align: right;
    width: 70%;
}

.icono-sensor{
    display: inline-block;  
    color: #0009;
    width: 20%;
    text-align: center;
}
.icono-sensor.centrado{
    display: inline-block;
    text-align: center;
    width: 100%;
}

.titulo-grupo{
    width: 100%;
    text-align: center;
    font-weight: bold;
    border-bottom: solid 1px gray;
    color: gray;
}


.cuadro-sensor-edificio{
    display: block;
    border: solid 1px #e9e9e9;
    border-radius: 5px;
    background: #ffffffb3;
    -webkit-box-shadow: -11px 10px 69px -17px rgba(0,0,0,0.75);
    -moz-box-shadow: -11px 10px 69px -17px rgba(0,0,0,0.75);
    box-shadow: -11px 10px 69px -17px rgba(0,0,0,0.75);
}

.titulo-sensor-edificio{
    border-bottom: solid 1px;
    padding: 10px;
}

.texto-sensor-edificio{
    display: inline-block;
}

.dato-sensor-edificio{
    text-align: center;
    padding: 10px;
}

.foto-sensor,.sensor-sensor{
    position: absolute;
}

.sensor-sensor{
cursor: help;
}

.sensor-sensor > img{
    width: 100%
}
.card-header{
    min-height: 55px;
}

.contadorEdificio{
    display: inline-block;
    padding-left: 10px;
}

.grupo-actual{
    border: solid 1px #b6b6b6;
    margin: 15px 0px;
    padding: 10px 0px 20px;
    border-radius: 5px;
    background-color: #e0e0e0;
}

.grafica-popup-table{
    padding-top: 100px;
    position: fixed;
    display: table;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10;
    left: 0;
    background-color: #0000004f;
}

.grafica-popup-cell{    
    display: table-cell;
    vertical-align: middle;    
}

.grafica-popup{
    margin: auto;
    width: 80%;
    min-width: 350px;
    padding: 20px;
    background: #ffffffe0;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 100px -30px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 100px -30px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 100px -30px rgba(0,0,0,0.75);
}

.titulo-detalle{
    text-align: center;
    font-size: 25px;
    border-bottom: solid 2px #c6c6c666;
    color: #818181;
    padding: 10px;
}

.miniatura-dropdown{
    height: 50px;
}

.texto-dropdown{
    display: inline-block;
    padding-left: 10px;
}

@media (max-width:950px) {
    .conteo-circulo{
        width: 25px !important;
        height: 25px !important;
        font-size: 8px !important;
    }
}
.conteo-circulo{
    position: absolute;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background: #09f none repeat scroll 0% 0%;
    border-radius: 50%;
    display: table;
    text-align: center;
    font-size: 13px;
    -webkit-box-shadow: 0px 0px 5px 5px #09f;
    -moz-box-shadow: 0px 0px 5px 5px #09f;
    box-shadow: 0px 0px 5px 5px #09f;
    z-index: 10;
}
.conteo-circulo > .circulo-contador{
    display: table-cell;
    vertical-align: middle;
    color: white;
}
.conteo-punto{
    position: absolute;
    cursor: pointer;
    width: 1px;
    height: 1px;
    background-color: rgba(255, 0, 0, 0.01);
    border-radius: 50%;
    display: table;
    text-align: center;
    font-size: 13px;
    -webkit-box-shadow: 0px 0px 5px 5px rgba(255, 0, 0, 0.01);
    -moz-box-shadow: 0px 0px 5px 5px rgba(255, 0, 0, 0.01);
    box-shadow: 0px 0px 5px 5px rgba(255, 0, 0, 0.01);
}

.cargandoPantalla{
    background-color: rgba(255, 255, 255, 0.75);
    position: fixed;
    top: -50px;
    width: 100%;
    height: calc(100% + 50px);
    z-index: 1000;
    display: table;
    text-align: center;
}


.leyenda-sensor {
  position: absolute;
  border-radius: 10px;
  color: #fff;
  font-family: sans-serif;
  white-space: nowrap;
  background-color: #0099ff;
  border: double white 10px;
  padding: 10px;
  z-index: 1000;
  font-size: 20px;
  display:none;
  width: 15%;
}

.leyenda-texto { 
  display:inline-block;
  padding: 5px;
}

.interruptor{
    border-radius: 50%;
    width: 50px;
    height: 50px;
    position: relative;
    color: white;
    font-size: 6px;
    padding: 0px;
    border: solid 2px white;
    background-image: radial-gradient(#0472bc, #0885d8, #09f);
    display: table;
    text-align: center;
    cursor: pointer;
}
.interruptor > i{
    font-size: 30px !important;
    display: table-cell;
    vertical-align: middle;
}
.interruptor.on{
    background-image: radial-gradient(#099806, #13ae0f, #0adb04) !important;
}
.interruptor.off{
    background-image: radial-gradient(#b10606, #d20000, #f00) !important;
}

.top-right{
    position: absolute;
    right: 0;
    top: 0;
}

.plano{
    &.active {
        animation: scale-display .3s;
        display: inline-flex;
    }

    &.out {
        animation: scale-display--reversed .3s;
        animation-fill-mode:forwards;
        display: inline-flex;
    }
}
@keyframes scale-display {
    0% {
        opacity: 0;
        transform: scale(0);
        -webkit-transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

@keyframes scale-display--reversed {
    0% {
        display: inline-flex;
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    99% {
        display: inline-flex;
        opacity: 0;
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    100% {
        display: none;
        opacity: 0;
        transform: scale(0);
        -webkit-transform: scale(0);
    }
}

.organigrama {  
  display: table;
  margin: auto;
  width: max-content;
}

.organigrama * {
  margin: 0px;
  padding: 0px;
}
.organigrama ul {
    padding-top: 20px;
    position: relative;
}

.organigrama li {
	float: left;
  text-align: center;
	list-style-type: none;
	padding: 20px 1px 0px 1px;
  position: relative;
}

.organigrama li::before, .organigrama li::after {
	content: '';
	position: absolute;
  top: 0px;
  right: 50%;
	border-top: 2px solid #0099ff;
	width: 50%;
  height: 20px;
}

.organigrama li::after{
	right: auto;
  left: 50%;
	border-left: 2px solid #0099ff;
}

.organigrama li:only-child::before, .organigrama li:only-child::after {
	display: none;
}

.organigrama li:only-child {
  padding-top: 0;
}

.organigrama li:first-child::before, .organigrama li:last-child::after{
	border: 0 none;
}

.organigrama li:last-child::before{
	border-right: 2px solid #0099ff;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;
	border-radius: 0 5px 0 0;
}

.organigrama li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;
}

.organigrama ul ul::before {
	content: '';
	position: absolute;
  top: 0;
  left: 50%;
	border-left: 2px solid #0099ff;
	width: 0;
  height: 20px;
}

.organigrama li a {
	border: 2px solid #0099ff;
	padding: 1em 0.75em;
	text-decoration: none;
	color: #fff;
  background-color: #0099ff;
	font-family: arial, verdana, tahoma;
	font-size: 0.85em;
	display: inline-block;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
  transition: all 500ms;
}

.organigrama li a:hover {
	border: 2px solid #0099ff;
	color: #0099ff;
  background-color: #fff;
	display: inline-block;
}

.organigrama > ul > li > a {
  font-size: 1em;
  font-weight: bold;
}

.organigrama > ul > li > ul > li > a {
  width: 8em;
}

.conTitle:hover {
    cursor: help;
    position: relative
}
.conTitle span {
    display: none
}
.conTitle:hover span {
    display: block;
    background-color: #0099ffed;
    border: white 2px solid;
    border-radius: 5px;
    color:white;
    text-align: left;
    padding: 20px;        
    z-index: 100;
    right: -20px;
    margin: 10px;
    width: 350px;
    position: absolute;
    top: 10px;
    font-family: Roboto,Helvetica,Arial,sans-serif;
}
.conTitle:hover span .detalle{
    font-size: 18px;
}
.conTitle:hover span .solicitante{
    font-size: 15px;
    padding: 10px;
}

.titulo2{
    background-color: #0096fd;
    color: white;
    font-size: 16px;
    margin: 20px;
    font-weight: bold;
    text-align: center;
}

.submenu{
    margin-left: 10px;
}

.submenu p{
    line-height: 20px !important;
}

.titulo-submenu{
    font-weight: bold !important;
    background-color: rgba(136, 134, 134, 0.2) !important;
    color: #353535 !important;
}

.cabecera-listado{
    text-align:center !important;
    background-color:#0099ff !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 15px !important;
}
.circulo-co2 {
    width: 60px;
    height: 60px;
    font-size: 16px;
    font-weight: bold;
    box-shadow: rgb(201, 203, 201) 0px 0px 5px 5px;
    border: solid 2px white;
    border-radius: 50%;
    display: table;
    z-index: 10;
    text-align: center;
    background-color: rgb(165, 165, 165);
/*    background-image: url("/storage/web/source/sensores/co2.svg");*/
}
.circulo-co2::before {    
    content: "";
    background-image: url('/storage/web/source/sensores/co2.svg');
    background-size: cover;
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    opacity: 0.2;
}

.circulo-co2 > .circulo-contador {
    display: table-cell;
    vertical-align: middle;
    color: white;
}
.titulo-linea {
  text-align: center;
  border-bottom: solid 2px #c6c6c666;
  padding: 10px;
  font-size: 35px;
  font-weight: bold;
}

.circulo-ventilador {
  width: 30px;
  height: 30px;
  font-size: 25px;
  font-weight: bold;
  box-shadow: rgb(201, 203, 201) 0px 0px 5px 5px;
  border: solid 2px white;
  border-radius: 50%;
  display: table;
  z-index: 9;
  text-align: center;
  background-color: rgb(179, 12, 214);
}

.circulo-ventilador > .ventilador {
  display: table-cell;
  vertical-align: middle;
  color: white;
}

.estado {
  text-align: center;
  color: white;
  font-size: 20px;
  padding: 5px;
  margin: auto;
  max-width: 200px;
}
.estado-texto {
  padding: 5px;
  border-radius: 5px;
}

.equalizer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 160px;
  }

.equalizer-bar {
    width: 40px;
    margin: auto;
    display: flex;
    flex-direction: column-reverse;
}
.equalizer-bar>span {
      display: block;
      height: 4px;
      border-radius: 2px;
      width: 100%;
      margin: 2px 0;
      background-color: #FFF;
      transition: .2s ease all;
      opacity: 1;
}

.organigrama .cuadro > i {
    font-size: 50px;
}
.organigrama .cuadro{
    border: 2px solid #000;
    padding: 1em 0.75em;
    text-decoration: none;
    color: #fff;
    background-color: #0099ff;
    font-family: roboto;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    transition: all 500ms;
    margin: 0px 10px;
    --fa-inverse: #0099ff;
}
.organigrama{
    margin: 0px auto 10px auto !important;
}
.fa-principal{
    position: relative;
}
.fa-secundario{
    position: absolute;
    font-size: 35% !important;
    bottom: 0;
    left: 0;
    width: 100%;
    color:var(--fa-inverse,#fff);
    line-height: inherit;
}
.card-icon > .fa-principal{
    line-height: 65px;
}
.titulo-consumos{
    text-align:center;
}
.titulo-consumos>i{
    font-size:40px;
}
.titulo-potencia{
    font-size: 30px;
    font-weight: bold;
    position: absolute;
    margin: 50px;
}
.logo-potencia{        
    position: absolute;
    right: 0;
    margin: 5px;
}
.cuadro-grupo{
    border: solid 2px #0099ff;
    margin: 1%;
    float: left;
    width: 98%;
    border-radius: 5px;
    position: relative;
    padding: 20px 0px;
}
.cuadro-grupo>.titulo{
    position: absolute;
    top: -15px;
    left: 20px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    background-color: #0099ff;
    padding: 5px;
    border-radius: 5px;
}
.card-grupo{
    margin: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px #a8a6a6;
    float: left;
    padding: 10px 0px;
    width: calc(100% - 20px);
}
.titulo-equipo {
  text-align: center;
  font-size: 25px;
  margin: 10px;
  color: #9c9a9a;
  font-weight: bold;
}

.txt-planta-instalacion{
    position: absolute;
    display: block;
    top: 5vw;
    color: white;
    left: 40%;
}
.lupa{
    transition: 1s ease-in-out;
}
.lupa:hover{
    transform: scale(1.1);
    z-index: 100;
}


/* JAVIER MARCH */
/* -------------------- Login.php -------------------- */
/* -------------------- Background Layer -------------------- */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
}

/* -------------------- Login Container -------------------- */
.login-container {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* -------------------- Login Box -------------------- */
.login-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.16);
    width: 80%;
    max-width: 400px;
    color: #fff;
    backdrop-filter: blur(10px);
    text-align: center;
}

.login-box img {
    width: 90%;
    max-width: 350px;
    margin-bottom: 0.4em;
}

/* -------------------- Input Container -------------------- */
.input-container {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.input-container i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #ccc;
    font-size: 18px;
}

/* -------------------- Input Field -------------------- */
.login-box input {
    width: 100%;
    padding: 12px 12px 12px 35px;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 16px;
}

.login-box input::placeholder {
    color: #ccc;
}

/* -------------------- Button -------------------- */
.login-box button {
    width: 100%;
    padding: 12px;
    border: none;
    background: #0299ff;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-box button:hover {
    background: #0278cc;
}

/* -------------------- Fin Login.php -------------------- */
/* -------------------- Checkbox -------------------- */
.form-check {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
}
.form-check input[type='checkbox'] {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;                          
    margin-left: -25px;
    margin-right: 8px;
    width: 18px;
    height: 18px;
    z-index: 2;
}
.form-check-label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    padding-left: 10px;
}

.tab-content > .tab-view{
  animation-duration: 0.5s;   /* duración de la animación */
  animation-fill-mode: forwards; /* mantiene el estado final */
}
.fadeIn {
    -webkit-animation-name:fadeIn;
    animation-name:fadeIn
}

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
  background: #0099ff !important;
}

.crear{
    width: 98%;
}
.arbol{
        height: 100%;
        position: relative;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%;
        background-color: white;
    }
 .tree ul {
	 margin: 0 0 0 8em;
	 padding: 0;
	 list-style: none;
	 color: #0099ff;
	 position: relative;         
}
 .tree:before, .tree ul:before {
	 content: "";
	 display: block;
	 width: 0px;
	 position: absolute;
	 top: 0;
	 bottom: 0;
	 left: -4em;
	 border-left: 2px solid;
	 background: white;
	 z-index: 1;
         height: 2.5em;
}
 .tree li {
	 font-weight: bold;
	 margin: 0;
	 padding: 10px 0 0 10px;
	 position: relative;
         text-align: center;
	 z-index: 1;
}
 .tree li:before {
	border-top: 2px solid;
	content: "";
	display: block;
	height: 100%;
	left: -4em;
	margin-top: 1em;
	position: absolute;
	top: 1.5em;
	width: 8em;
        z-index: 1;
        border-left: 2px solid;
}
 .tree li:last-child:before {
	 border-left: 0px solid white;
	 bottom: 0;
	 height: auto;
	 top: 1.5em;
}
 .tree > li:before {
	 border-top: none !important;
}
 .tree li>div {
	border-radius: 5px;
        border: 1px solid #afafaf;
        margin: 0;
        width: 8em;
        padding: 0.25em 0.5em;
        background: #09f;
        box-shadow: 1px 1px 4px #8f949a;
        color: white;
        font-weight: bold;
        position: relative;
        z-index: 10;
}
 ul.tree {
	 list-style-type: none;
         margin-left: 0px;
}
 ul.tree:before {
	 border-left: none;
}
 .sticky {
	 position: -webkit-sticky !important;
	 position: sticky !important;
	 top: 0px;
	 width: 100%;
}
.comp.porcentaje {
    font-size: 15px;
    position: absolute;
    top: -5px;
    right: 0;
}

.comp.pie {
    font-size: 8px;
}
.bootstrap-touchspin-up, .bootstrap-touchspin-down{
    background-color: #09f !important;
    color: white !important;
}
.bootstrap-touchspin-up:hover, .bootstrap-touchspin-down:hover{
    background-color: white !important;
    color: #09f !important;
}

.custom-file-upload {
    border: 1px solid #09f;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    text-align: center;
    color: white !important;
    background-color: #09f;
}
.custom-file-upload i {
    font-size: 40px;
}
.custom-file-upload p {
    font-size: 10px;
}

.kv-expand-detail-row .card {
    margin-top: 0px;
}
.kv-expand-detail-row > td {
    padding: 0px 10px !important;
}

.paleta-color input, .paleta-color .sp-dd{
    display:none;
}
.kv-form-bs4 .paleta-color .has-success.highlight-addon .input-group-text{
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

.paleta-color .sp-preview{
    width: 40px;
    height: 25px;
}
}