@import url("https://fonts.googleapis.com/css?family=Roboto");
     :root {
        --negro: #121a3b;
        --oscuro: #2b3452;
        --grisdark: #b4b6bd;
        --grislight: #dee5e7;
        --fondoclaro: #f0f3f4;
        --fondomedio: #e4eaec;
        --fondocardclaro: #f6f8f8;
        --main: #1aadff;
        --azul: #000066;
    }
    
     ::-webkit-scrollbar-track {
        border-radius: 5px;
        background-color: var(--oscuro);
    }
    /* Handle */
    
     ::-webkit-scrollbar-thumb {
        background: var(--negro);
        border-radius: 5px;
    }
    /* Handle on hover */
    
     ::-webkit-scrollbar-thumb:hover {
        background: var(--main);
    }
    
     ::-webkit-scrollbar {
        width: 4px;
        height: 6px
    }
    
    body {
        font-family: "Roboto", sans-serif
    }
    
    .colpad20 {
        width: calc(20% - 2.5px)
    }
    
    .colpad80 {
        width: calc(80% - 2.5px)
    }
    
    @keyframes pulse {
        from {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
        50% {
            -webkit-transform: scale3d(1.15, 1.15, 1.15);
            transform: scale3d(1.15, 1.15, 1.15);
        }
        to {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    }
    
    .customCheckBox[type="checkbox"]:after {
        position: relative;
        display: block;
        /* left: 2px; */
        background-color: var(--negro);
        top: -16px;
        width: 15px;
        height: 15px;
        border-width: 1px;
        border-style: solid;
        border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
        content: "";
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    
    .customCheckBox[type="checkbox"]:before {
        border: 1px solid #ffffff;
        content: "";
        background: var(--negro);
        position: relative;
        display: block;
        width: 15px;
        height: 15px;
    }
    
    .customCheckBox[type="checkbox"]:checked:after {
        background: var(--main);
        background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC');
    }
    /* Large checkboxes */
    
    .customCheckBox.large {
        height: 22px;
        width: 22px;
    }
    
    .customCheckBox.large[type="checkbox"]:before {
        width: 20px;
        height: 20px;
    }
    
    .customCheckBox.large[type="checkbox"]:after {
        top: -20px;
        width: 16px;
        height: 16px;
    }
    /* MENU */
    
    #menu {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 15%;
        height: 100%;
        background: var(--oscuro);
        z-index: 10;
        cursor: pointer
    }
    
    #menu.collapsed {
        width: 45px;
        transition: width .35s;
    }
    
    #menu.collapsed ul li div {
        display: none
    }
    
    #menu.collapsed>.divUser>.nombreUser {
        display: none
    }
    
    #menu:hover>.divUser>.nombreUser {
        display: inline-flex
    }
    
    #menu:hover {
        width: 15%;
        transition: width .35s;
    }
    
    #menu:hover ul li div {
        display: inline-flex
    }
    
    .rowMenu {
        line-height: 25px;
        padding: 10px;
        color: var(--grisdark)
    }
    
    .rowMenu:hover {
        background: var(--negro);
        color: white
    }
    
    .rowMenu::after {
        content: '\f0da';
        color: var(--gris);
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        float: right;
        font-size: 12px;
        display: none
    }
    
    #menu:hover>ul>li::after {
        display: block
    }
    
    .iconUser {
        font-size: 16px;
        margin-right: 20px;
        margin-left: 5px;
    }
    
    .divUser {
        height: 50px;
        background: none;
        margin-top: 10px;
        margin-bottom: 40px;
        color: white;
        line-height: 50px;
        padding: 0px 10px;
        border-bottom: 2px solid var(--negro)
    }
    
    .nombreUser {
        color: white;
        display: inline-flex;
        text-transform: uppercase;
        font-size: 11px;
    }
    
    .iconMenu {
        font-size: 18px;
        width: 40px;
        line-height: 25px;
        display: inline-flex
    }
    
    .nombreMenu {
        font-size: 14px;
        display: inline-flex
    }
    /* PRELOADER */
    
    .div_preloader {
        top: 0px;
        left: 0px;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: 11;
        background: var(--negro);
    }
    
    #preloader {
        width: 150px;
        height: 150px;
        transform: translate(-50%, -50%);
        position: absolute;
        top: 50%;
        left: 50%;
    }
    /* MENU */
    
    .divFondoMenu {
        position: absolute;
        top: 0px;
        left: 45px;
        display: none
    }
    /* HOME */
    
    .div_home {
        padding: 10px;
        display: inline-flex;
        width: calc(100% - 20px);
    }
    
    #entradas {
        display: inline-flex;
        width: calc(100% - 20px);
        margin-bottom: 20px;
        background: var(--fondocardclaro);
        border-bottom: 1px solid var(--grislight);
        border-top: 1px solid var(--grislight);
        padding: 20px 10px;
        border-radius: 5px;
        height: calc(40vh - 52px);
    }
    
    #salidas {
        background: white;
        border-radius: 5px;
        padding: 10px;
        height: calc(60vh - 50px);
    }
    
    #home_salidas_opt {
        background: var(--fondomedio);
        border-radius: 5px;
        padding: 20px 10px;
        height: calc(100vh - 60px);
    }
    
    .home_titulo_entradas {
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--oscuro);
        margin-left: 5px;
    }
    
    .clsvalor {
        cursor: pointer;
        vertical-align: bottom;
        margin-right: 5px;
    }
    
    .home_salidas_label {
        font-size: 12px;
        text-transform: uppercase;
        color: var(--oscuro);
        font-weight: 600;
        margin-right: 10px;
        line-height: 30px
    }
    
    .home_salidas_select {
        background: var(--oscuro);
        color: white;
        font-size: 10px;
        text-transform: uppercase;
        border: 1px solid var(--oscuro);
        border-radius: 2px;
        padding: 2px;
    }
    
    .home_salidas_select:focus {
        outline: none
    }
    
    #limpiar_btn_rubikia {
        margin-left: 5px;
        cursor: pointer;
        position: absolute;
        right: 30px;
        right: 100px;
        z-index: 1;
        bottom: 40px;
        height: 55px;
        width: 55px;
        border-radius: 50%;
        text-align: center;
        line-height: 58px;
        background: var(--oscuro);
        color: white;
        border: 1px solid var(--azul);
        font-size: 16px;
    }
    
    #home_btn_rubikia {
        margin-left: 5px;
        cursor: pointer;
        position: absolute;
        right: 30px;
        z-index: 1;
        bottom: 40px;
        height: 55px;
        width: 55px;
        border-radius: 50%;
        text-align: center;
        line-height: 82px;
        background: linear-gradient(-25deg, var(--main) 0%, var(--negro) 100%);
        color: white;
        border: 1px solid var(--azul);
        font-size: 16px;
    }
    
    #home_btn_rubikia:hover {
        background: linear-gradient(135deg, var(--main) 0%, var(--negro) 100%);
    }
    
    #home_btn_rubikia:active {
        background: var(--oscuro);
    }
    
    .salidas_titulo {
        padding-left: 10px;
        border-left: 2px solid var(--main);
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--oscuro);
        margin-bottom: 10px;
    }
    
    .salidas_div_variables {
        display: inline-flex;
        width: 100%;
        margin: 15px 0px 40px 0px
    }
    
    .varsalidas {
        margin-left: 10px;
        height: 75px;
        background: var(--fondoclaro);
        border-radius: 5px;
        text-align: center;
        line-height: 75px;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 1px 1px 3px var(--grisdark);
        color: var(--oscuro);
    }
    
    .varsalidas:hover {
        background: var(--fondomedio)
    }
    
    .variablesalida_select {
        background: white;
        border-color: var(--oscuro);
        border-width: 2px;
        border-style: solid;
    }
    
    .variablesalidadefecto {
        margin-left: 0px !important
    }
    
    .salidas_target {
        font-weight: 600;
        width: calc(100% / 6 - 1.5px);
        background: var(--fondoclaro);
        border-radius: 50%;
        text-align: center;
        color: var( --oscuro);
        border: 2px solid var(--grisdark);
        font-size: 11px;
        height: 40px;
        line-height: 40px;
        margin-left: 3px;
        cursor: pointer
    }
    
    .salidas_target:hover {
        background: var(--fondomedio)
    }
    
    .salidas_target_select {
        background: white;
        border-color: var(--oscuro)
    }
    
    .salidas_opt {
        box-shadow: 1px 1px 3px var(--grisdark);
        width: calc(50% - 5px);
        margin-left: 10px;
        background: var( --fondoclaro);
        border-radius: 5px;
        height: 65px;
        font-size: 20px;
        text-align: center;
        line-height: 65px;
        color: var( --negro);
        text-transform: uppercase;
        cursor: pointer
    }
    
    .salidas_opt:hover {
        background: var(--fondomedio)
    }
    
    .salidas_opt_select {
        background: white;
        border-color: var(--oscuro);
        border-width: 2px;
        border-style: solid;
    }
    
    .salidas_label_filtros {
        font-size: 12px;
        text-transform: uppercase;
        vertical-align: bottom;
    }
    /* DASHBOARD */
    
    .dash_fondo {
        padding: 10px;
        background: var(--fondoclaro);
    }
    
    .clsfiltros {
        min-height: 100px;
        min-width: calc(100vw - 70px);
        position: fixed;
        background: var(--fondomedio);
        border-radius: 5px;
        border-bottom: 1px solid var(--grisdark);
        padding: 10px 5px;
        box-sizing: border-box;
    }
    
    #principal {
        margin-top: 138px;
        background: white;
        border-radius: 5px;
        padding: 5px 10px;
        position: relative;
        z-index: 1
    }
    
    .dash_tituloCols {
        display: inline-flex;
        padding-left: 20px;
    }
    
    .clstitulocol {
        text-align: center;
        font-size: 12px;
        font-family: sans-serif;
        font-weight: 600;
        background: lightgrey;
        line-height: 20px;
        width: 210px;
        height: 20px;
        margin-top: 5px;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    .clstitulorow {
        writing-mode: tb-rl;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(180deg);
        white-space: nowrap;
        bottom: 20px;
        text-align: center;
        font-size: 12px;
        font-family: sans-serif;
        font-weight: 600;
        background: lightcoral;
        line-height: 20px;
        color: white;
        width: 20px;
        height: 210px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .cuadros {
        width: 220px;
        height: 220px;
    }
    
    #grupo1 {
        display: flex;
        min-height: 45px;
        width: 100%;
        border-bottom: 2px solid var(--fondoclaro);
        padding: 0px 0px 5px 0px;
    }
    
    .dash_btnfiltro {
        height: 40px;
        background: var(--fondoclaro);
        border-radius: 5px;
        text-align: center;
        cursor: pointer;
        box-shadow: 1px 1px 3px var(--grisdark);
        color: var(--oscuro);
        text-transform: uppercase;
        font-size: 12px;
        border: none;
        font-weight: 600;
    }
    
    .dash_btnfiltro:hover {
        background: var(--fondomedio);
    }
    
    .dash_btnfiltro:active {
        background: white;
        border: 2px solid var(--oscuro);
    }
    
    .dash_selectfiltro {
        height: 25px;
        border: 1px solid var(--grisdark);
        margin: auto 10px auto 5px;
    }
    
    #grupo2 {
        display: flex;
        min-height: 45px;
        width: 100%;
        padding-top: 10px;
    }
    
    .dash_gruposfiltros {
        line-height: 40px;
        margin-right: 5px;
    }
    
    .dash_gruposfiltros span {
        color: var(--oscuro);
        font-weight: 600;
        font-size: 14px;
        margin-left: 5px;
    }
    
    .clsinput {
        width: 15px;
        background: var(--fondoclaro);
        border: 1px solid var(--grisdark);
        text-align: center;
        color: var(--negro);
    }
    
    .clsinput:focus {
        outline: none;
    }