:root {
    --color-white: #f3f3f3;
    --color-disable: #585858;
    --color-gray: #999;
    --color-cyanOn: #07c2f8;
    --color-cyanOff: #007bff;
    --color-orange: orange;
    --color-gold: gold;
    --color-red: maroon;
    --color-redplus: red;
    --color-green: #4cff00;
    --color-bluelink: #335BFF;
    --color-error: orangered;
    --backgroundcolor-black: black;
    --backgroundcolor-grayOff: #1e1e1e;
    --backgroundcolor-grayOn: #2d2d30;
    --backgroundcolor-red: maroon;
    --backgroundcolor-redplus: red;
    --backgroundcolor-transparente: transparent;
}

 
body {
    margin-top: 0px;
    background-color: var(--backgroundcolor-black);
    /*background-image: url('../../image/bk1920_1278.jpg');*/
    /*background-size: cover;*/
    color: var(--color-white);
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow-x:visible;
    
}


#WindowLoad {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0px;
    left: 0px;
    z-index: 3200;
    filter: alpha(opacity=65);
    -moz-opacity: 65;
    opacity: 0.65;
    background: #999;
}
.loader {
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    border-top: 8px solid #3498db;
    width: 48px;
    height: 48px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

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

    100% {
        transform: rotate(360deg);
    }
}



div.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}



.lbl {
    display: inline-block;
    width: 65px;
    height: 33px;
    background: #979797;
    border-radius: 100px;
    cursor: pointer;
    position: relative;
    transition: .2s;
}

    .lbl::after {
        content: '';
        display: block;
        width: 25px;
        height: 25px;
        background: #eee;
        border-radius: 100px;
        position: absolute;
        top: 4px;
        left: 4px;
        transition: .2s;
    }

#switch:checked + .lbl::after {
    left: 36px;
}
#switch:checked + .lbl {
    background: rgb(23, 162, 184);
}
#switch {
    display: none;
}


#switch1:checked + .lbl::after {
    left: 36px;
}

#switch1:checked + .lbl {
    background: rgb(23, 162, 184);
}

#switch1 {
    display: none;
}


#switch2:checked + .lbl::after {
    left: 36px;
}
#switch2:checked + .lbl {
    background: rgb(23, 162, 184);
}
#switch2 {
    display: none;
}


#switch3:checked + .lbl::after {
    left: 36px;
}
#switch3:checked + .lbl {
    background: rgb(23, 162, 184);
}
#switch3 {
    display: none;
}

#switch4:checked + .lbl::after {
    left: 36px;
}
#switch4:checked + .lbl {
    background: rgb(23, 162, 184);
}
#switch4 {
    display: none;
}

#switch5:checked + .lbl::after {
    left: 36px;
}

#switch5:checked + .lbl {
    background: rgb(23, 162, 184);
}

#switch5 {
    display: none;
}

    #switch6:checked + .lbl::after {
        left: 36px;
    }

    #switch6:checked + .lbl {
        background: rgb(23, 162, 184);
    }

#switch6 {
    display: none;
}


#switch7:checked + .lbl::after {
    left: 36px;
}

#switch7:checked + .lbl {
    background: rgb(23, 162, 184);
}

#switch7 {
    display: none;
}



#switch8:checked + .lbl::after {
    left: 36px;
}

#switch8:checked + .lbl {
    background: rgb(23, 162, 184);
}

#switch8 {
    display: none;
}


#switch9:checked + .lbl::after {
    left: 36px;
}

#switch9:checked + .lbl {
    background: rgb(23, 162, 184);
}

#switch9 {
    display: none;
}



#switch10:checked + .lbl::after {
    left: 36px;
}

#switch10:checked + .lbl {
    background: rgb(23, 162, 184);
}

#switch10 {
    display: none;
}



.tpsForm-label {
    color: var(--color-cyanOn);
    font-size: 14px;
}

.tpsForm-label-maxctr {
    color: var(--color-gray);
    font-size: 10px;
}
.tpsForm-label-data {
    color: var(--color-white);
    font-size: 14px;
    min-height:40px;
}

.tpsForm-textDanger {
    color: var(--color-error);
    text-align:center;
    justify-content:center;
    font-weight:100;
    font-size:12px;
}


.tpsBarra-iconfont {
    color: var(--color-orange);
    font-size: 22px;
    padding-bottom: 5px;
    text-decoration: none;
    cursor: pointer;
}
.tpsBarra-iconfont:hover {
    color: var(--color-gold);
    font-size: 22px;
    padding-bottom: 5px;
    text-decoration: none;
    cursor: pointer;
}


.input-iconfont {
    color: var(--color-orange);
    font-size: 28px;
    text-decoration: none;
    cursor: pointer;
}
    .input-iconfont:hover {
        color: var(--color-gold);
        font-size: 28px;
        text-decoration: none;
        cursor: pointer;
    }


.IconMenu-iconfont {
    color: var(--color-orange);
    font-size: 48px;
    padding-bottom: 5px;
    text-decoration: none;
    cursor: pointer;
}
.IconMenu-iconfont:hover {
    color: var(--color-gold);
    font-size: 48px;
    padding-bottom: 5px;
    text-decoration: none;
    cursor: pointer;
}

a.tpsBarranounderline:link {
    text-decoration: none;
    color: var(--color-redplus);
}
a.tpsBarranounderline:hover {
    text-decoration: none;
    color: var(--color-redplus);
}
a.tpsBarranounderline:visited {
    text-decoration: none;
    color: var(--color-redplus);
}




a.tpsIconMenu:link {
    margin-top: 20px;
    text-decoration: none;
    color: var(--color-white);
}
a.tpsIconMenu:hover {
    margin-top: 20px;
    text-decoration: none;
    color: var(--color-cyanOn);
}
a.tpsIconMenu:visited {
    margin-top: 20px;
    text-decoration: none;
    color: var(--color-white);
}




.tps-leyend-attrib {
    font-size: small;
    margin: 0px;
    padding: 0px;
    text-align: left;
    width: auto;
}

.tpsBarra-subtitulo {
    background-color: var(--color-red);
    min-height:36px;
}


.tps-centerDiv-InRowParent {
    display: flex;
    align-items: center;
    /*align-items: center;
    justify-content: center;*/
    /*align-content:center;*/
    
}


.tpsLoginTools-icon {
    font-size: 15px;
    padding-bottom: 5px;
    cursor: pointer;
}
.tpsLoginTools-text {
    font-size: 16px;
    padding-bottom: 5px;
    cursor: pointer;
    text-decoration: none;
}
.tpsLoginTools-Help {
    float: right;
}

.tpsLoginTools-Version {
    float: right;
    font-size: 12px;
}


.tpsinfo-help {
    color: aqua;
    font-size: 20px;
}

a.nounderline:link {
    text-decoration: none;
    color: var(--color-bluelink);
}


a.nounderline:hover {
    text-decoration: none;
    color: var(--color-cyanOn);
}

a.clickiti:link {
    text-decoration: none;
    color: var(--color-orange);
}


a.clickiti:hover {
    text-decoration: none;
    color: var(--color-gold);
}

a.clickiti {
    text-decoration: none;
    color: var(--color-orange);
}




.panel_menu {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.item_menu {
    /*background-color:cornflowerblue;*/
    border-style: solid;
    height: 128px;
    width: 100%;
    border-color: black;
    max-width: 320px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}



.button-iconfont {
    color: var(--color-orange);
    font-size: 24px;
    text-decoration: none;
    max-width: 38px;
    max-height: 38px;
    padding-left: 6px;
    padding-top: 6px;
    cursor: pointer;
}

.button-iconfont:hover {
    color: var(--color-gold);
/*    font-size: 24px;
    text-decoration: none;
    cursor: pointer;*/
}

.button-iconfont-off {
    color: var(--color-disable);
    font-size: 24px;
    max-width: 38px;
    max-height: 38px;
    padding-left: 6px;
    padding-top: 4px;
    cursor: default;
}

.button-iconfont-off:hover {
    color: var(--color-disable);
/*    font-size: 24px;
    cursor: default;*/
}