*+:has(:active){
    border-color: lightblue;
    color:orange;
}
*[onclick],
label[for],
.cursor_pointer{
cursor: pointer
}
.cnt-display{
    position: relative;
    display: block;
    height: calc(100% - 1.8em);
    width: 100%;
    overflow: hidden; 
}
.cuerpo{
  height:calc(100% - 5.7em);
  width: 100%;
 overflow: auto; 
 margin-top: 5.7em;
}
#contenido{
  height:calc(100%);
  overflow: hidden;
}

.pageframe#pizarra{ 
    width: 75%;
    height:93vh;
    left:2vw;
    z-index:1;
}
.topbar{
    width:100%;
    height:5.7em;
    overflow: hidden;
    position:fixed;
}
.piebar{
    width: 100%;
    text-align: center;
    position: relative;
    font-size: 0.8em;
    height: 2em;
}

#bartop{
    display:inline-block;height:100%;width:100%;
}
#empresa{
    display:inline-block;
}
#pag-SYS .menubar {
    background-color: rgb(191,150,210);
    box-shadow: 0px 0px 10px 0px #00000080;
}
#_screen{
    height: 100%;
    width: 100%;
    overflow: auto;
    display: inline-block;
}
#_screen>*{
    max-height:99.8% !important ;
    overflow: hidden;
}
#_toolbar{
    position:absolute;
    z-index: 50;
    padding: 2px 4px;
}
.toolbar a{
    padding: 2px !important;
    color: ghostwhite;
}
.toolbar a:hover{
    color: crimson;
    cursor:pointer;
}
.toolbar a:hover span:nth-child(2) {
    display:inline !Important;
}
.toolbar span:nth-child(2){
    display: none;
    font-size:0.6em;
}
.toolbar span{
   text-shadow: 0px 0px 5px #00000080; 
   
}
.toolbottom{
    text-shadow: 0px 0px 5px #00000080;
    color:ghostwhite;
}
.toolbottom:hover{
    color: crimson;
    cursor: pointer;
}
statusbar{
    position:absolute; 
    display:block;
    width:100%;
    height:3%;
    top:97%;
    xz-index:9;
}
.pageframe{
    position:relative;
    width: 100%;
    xmin-height: 75%;
    height: 100%;
    overflow: hidden;
}
.pageframe{
    overflow: hidden;
    padding-top: 1px;
}

page{
width:99.8%;
height: calc(100% - 40px);
margin-left: auto;
margin-right: auto;
display: none;
box-shadow: 2px 2px 3px #9c9c9c;
}
.pagina{
display: none;
box-shadow: 0px 0px 2px #9c9c9c;
}
#colaboracion{
    xmargin: 3px;
    xbox-shadow: 0px 0px 2px 0px;
    padding: 2px;
    z-index:100;
    right:1px;
    float:right;
    
}
#colaboracion:hover{
  box-shadow: 0px 0px 5px 0px;
  margin: 3px;
}
#colaboracion .tab-label input{
    display:none;
}
#colaboracion #fechaOperacion{
    background: transparent;
    color: lightgray;
    border-style: solid;
}
#colaboracion #reloj{
    color:darkblue !important;
}
.progresometro{display: none;}
.desktop{
    width:100%;
    height:calc(100% - 2.4em);
    position:relative;
    overflow: auto;
}
.desktop *{overflow: visible}
.tab-page{display: none;width: 100%;height:100% ;}
.page-conte{
    width: 100%;
    height:100%;}
.page-body{
    width: 100%;
    height: calc(100% - 2em);
    position: absolute;
    top: 2em;
}
.tab-label {
	border-radius: .25rem .25rem 0 0;
	cursor: pointer;
	display: block;
	float: left;
	padding: 0.2em 0.5em;
    position: relative;
    z-index: 7;
    text-align: center;
    font-size: 1.2em;
    margin-top: 2px
}
.tab-input{
    display:none;
}
.tab-input:checked + .tab-label,.tab-label:has(input:checked) {
	z-index: 6;	
}

#colaboracion .tab-input:checked + [ventana=""] {
	z-index: 6;
}
#colaboracion .tab-input:checked + [ventana=""] {
	z-index: 6;	
}
#colaboracion .tab-input:checked + [ventana=""] {
	z-index: 6;	
}

.display input#tab-a:checked ~ #dashboard{
    opacity: 1;
    z-index: 100;
    display: inline-block;
}
.display input#tab-b:checked ~  #desktop{
    opacity: 1;
    z-index: 100;
    display: inline-block;
}
.btn-tool:hover {
    margin-left:-5vw ;
    } 
    
.btn-tool {
    margin-left:0vw;
    } 
    
.form-tool{
    display:none;
 }
 .btn-tool:hover + .form-tool, .form-tool:hover{
    margin-left:-5vw ;
    display: block;
    }
.dialogo {
     padding:5px;   
     box-shadow: 2px 2px 3px #9c9c9c;
    }       
.dialogo > header{
     height:1vh;    
    }   
    .dialogo .page-body {
       height:98%; 
    }   
.dialogo .tab-label{display:none;}


.avatar{
    height:4vh;border-radius: 16px;
    box-shadow: 0px 0px 3px #9c9c9c;
}
#colaboracion .tab-label input{
    display:none;
}

.float-right{
    float:right !important;
}
#cuerpo[data-social='activo']{
    width: 76%;
}
.oculto{display:none;}
#identify_prod{
    position: absolute;
    bottom: 2em;
    z-index: 10;
    color:lightslategray;
    width: 100%;
}
#identify_prod>img{ margin-left: 1em;}
#identify_prod:hover{
    z-index: 10000 !important ;
    background-color: #000000e6;
    border-radius: 15px 15px 0 0;
}
.btn-tool-icon{
    text-shadow: 0px 0px 4px black;
    box-shadow: 0px 0px 1px 0px black;
    border: none;
    margin-left: 2px;
    padding:1px;
}
.btn-tool-icon:hover{
    box-shadow: 0px 0px 4px 0px cadetblue;
}    
.btn-tool-icon span{
    font-size: 0.6em;
}

.tabla-cel input,.tabla-cel textarea{
    width: calc(100% - 4px);
    margin: 2px;
}

input[type='search']{margin: 5px; height: 2em;min-width: 20%;border-radius: 6px; border-style: solid; border-color: dimgrey;}
@media (max-device-width: 900px) {
    #_screen {
        width: 100vw !important;
    }
    .desktop {
        width: 200%;
    }
    #_toolbar {
        top: 64px;
        font-size: 12px;
        height: 2em;
        place-self: center;
        position: static;
    }
    #cuerpo[data-social='activo'] #contenido {
        width: 200%;
    }
    .pageframe {
        height: 100% !important;
        /* 'xwidth' fue eliminada */
    }
    #colaboracion {
        xwidth: 80%;
        position: absolute;
        z-index: 5;
    }
    #colaboracion .inf-usuario {
        font-size: x-small;
        width: 185px;
        float: inline-end;
    }
    #colaboracion #reloj{
        top:16px !important;
    }
    #pageframe-social {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        float: right !important;
        height: inherit !important;
        width: 100vw !important;
    }
    #empresa {
        font-size: small;
    }
    .ctn-buscar {
        height: 4em;
    }
    #sys-ctrl {
        margin-top: -45px;
    }
    label:has(span.component_tab_caption) {
        font-size: xx-large;
    }
    .component_tab_caption {
        display: none;
    }
}

@media (max-device-width: 900px) {
    h1, h2, h3, h4, h5, h6 {
        font-family: inherit;
        font-weight: 500;
        line-height: 1.1;
        color: inherit;
    }
    .desktop {
        /* 'xwidth' fue eliminada */
        height: calc(100% - 5em);
    }
    #cuerpo[data-social='activo'] {
        width: 100% !important;
    }
    .cuerpo {
        /* 'xdisplay' fue eliminada */
    }
    .desktop:has(.dashboard) {
        width: 100vw !important;
    }
    .dashboard {
        height: auto !important;
        /* 'xwidth' y 'xdisplay' fueron eliminadas */
        position: absolute;
    }
    .central-panel {
        width: 100% !important;
        height: auto !important;
    }
    .lateral-izq-panel {
        width: 100% !important;
        height: auto !important;
    }
    .lateral-izq-panel .sec-panel > div {
        /* 'xwidth' fue eliminada */
    }
    #assist-reserva {
        width: 100%;
        overflow: auto;
    }
    view-reserva {
        width: 100vh;
    }
    table {
        font-size: .6em !important;
    }
}
@media (max-device-width: 500px) {
    .desktop:has(.dashboard) {
        width: 200vw !important;
    }
}
@media (max-device-height: 600px) {
    html {
        height: 100vh;
        overflow: auto;
    }
    body {
        height: calc(100% + 3em);
        position: relative;
    }
    #display {
        height: calc(200%);
    }
    .topbar {
        position: relative;
    }
    .cuerpo {
        margin-top: auto;
    }
    footer {
        position: relative !important;
    }
}
[class*='btn-ctl-']{
    font-size: large;
    padding: 2px;

}
.btn-ctl-stop{
    color:crimson;
}
.btn-ctl-play{
    color:green;
}
.btn-ctl-forward{
    color:dodgerblue;
}
.btn-ctl-pause{
    color:orange;
}
[class*='btn-ctl-']:disabled{
    color:grey;
}
.alert{
    color:crimson;

}
.notify{
    color:orange;
    
}
.confirm{
    color:green;
    
}