/*reset inicial*/
html,body{
    overflow-x: hidden; 
    overflow-y: none; 
    color:black; 
    font-family: 'Roboto', sans-serif;    
    font-size: 100%;    
    height:100%; 
    width:100%; 
    margin: 0px; 
    padding: 0px; 
    background:orange;
}

::-webkit-scrollbar {
    display: none;
}

/*responsive*/
    /*small-------------------------------*/
    @media (max-width: 700px) {
        :root{
            --superior:0%;
            --cntdr_franjas_todas_Height:100%;
            --padding:5%;           
            --cabeceraHeigth:25%;
            --tituloBottom:5%;
            --logo_marginTop:0%;        
            --logo_left:0%;
            --logo_width:50%;
            --logo_height:100%;
            --containnerHeight:50%;
            --contenido_Width:100%;
            --contenido_margTop:22%;
            --table_franjas_FontSize:100%;
            --linea_marginTop:10%;
            --linea_marginTop_instructores:-15%;
            --franja_btn_enviar_marginTop:60%;
        }     
    }

    /*medium-------------------------------*/
        @media all and (min-width: 699px) and (max-width: 1249px) {
            :root{
                --superior:0%;
                --cntdr_franjas_todas_Height:100%;
                --padding:5%;
                --contenido_Width:100%;
                --cabeceraHeigth:70%;
                --tituloBottom:-35%;
                --logo_marginTop:-25%;      
                --logo_left:70%;
                --logo_width:30%;
                --logo_height:40%;
                --containnerHeight:55%;
                --contenido_margTop:9%;
                --table_franjas_FontSize:100%;
                --linea_marginTop:-2%;
                --franja_btn_enviar_marginTop:40%;
            }          
        }
        /*maxim-------------------------------*/
            @media (min-width: 1250px) {
                :root{
                    --superior:0%;
                    --cntdr_franjas_todas_Height:60%;
                    --padding:5%;
                    --contenido_Width:20%;
                    --cabeceraHeigth:30%;
                    --tituloBottom:-50%;
                    --logo_marginTop:-15%;
                    --logo_left:70%;
                    --logo_width:30%;
                    --logo_height:40%;
                    --containnerHeight:60%;
                    --contenido_margTop:10%;
                    --contenido_width:30%;
                    --table_franjas_FontSize:110%;
                    --linea_marginTop:-4%;
                    --franja_btn_enviar_marginTop:40%;
                }          
            }
    /*accesorios y resaltes*/
    .linea{
        height: 1px;
        border: 0;
        color: #666;
        background-color: #000000;
        width:80%;
        margin-top:var(--linea_marginTop);
        position:absolute;
        opacity:0.2;
    }
    .linea_instructores{
        height: 1px;
        border: 0;
        color: #666;
        background-color: #000000;
        width: 100%;
        margin-top: var(--linea_marginTop_instructores);
        margin-left: 35px;
        position: absolute;
        opacity: 0.2;
    }

    .resalte1{
        font-size:100%;
        font-weight: bold;
    }
  
    .resalte1_blanco{
        font-size:100%;
        font-weight: bold;
        color:white;
    }

    .titulos{
        position:relative;  
        margin-top:-36px;
        margin-left:0px;
        width:auto;
        height:30px;
        padding:3px;
        z-index:100;
        font-family: 'Roboto', sans-serif;
        font-size:70%;
        color:white;
        background-color:black;
        opacity:0.3;
        text-align:center;    
        align-items:center;/*justificar al centro el texto dentro de la caja*/
        justify-content: center;/*justificar al centro el texto dentro de la caja*/
        z-index:30000000;
        text-align:center;
        display:flex;
        justify-content: center;
        align-items: center;
    }

    /*formulario inscripcion*/
    .form_contenedor{
        width:70%;
        height:600px;
        margin-top:-120px;
        margin-left:25%;
        background:;
        position:relative;
        z-index:100;
        padding:20px;       
    }
    #campoxx{        
        border: solid 1px black; 
        width: 70%;
        height:50px;
        background:grey;
        color:white;
        padding:5px;
        border-radius: 2px;
        margin-top:5px;        
    }
    

/*campos formulario  */
#campo{
    margin-top:3px;
    border: solid 1px black; 
    width: 300px;
    height:30px;
    background:orange;
    color:black;
    padding:5px;
}

#par{
    background:orange;    
    color: black;
    margin-top: -6px;
    margin-left: -30px;
    position: absolute;
    padding: 5px;
    border: solid 1px black;
    font-size: 80%;
    border-radius: 5px;
    width: 100px;
    text-align: right;
}

#campo1{
    margin-top:3px;
    border: solid 1px black; 
    width: 200px;
    height:30px;
    background:orange;
    color:black;
    padding:5px;
}

#campo.botones{
    margin-top:3px;
    width: 200px;
    height:30px;
    background:black;
    color:orange;
    padding:5px;
    position:relative; 
}

.cntdr_botones{
    margin-top:0px;
    margin-left:100px;
    width:50px;
    height:50px;
    background:;
}
div label{
    width:100px;
    float:left;
    margin-top:15px;
}
p{
    margin:5%;
    color:grey;
}
form{
    margin-left:10%;
}
/*cierra campos formulario  */

    div label{
        width:100px;
        float:left;
        margin-top:15px;
        
    }
    p{
        margin:5%;
        color:grey;
    }
    form{
        margin-left:0%;
    }


    /*elementos*/
    #laguia{
        width:10px;
        height:10px;
        background:cyan;
    }
    
    
    #containner{ /*trae el div para el bloque intermedio sin cabecera ni pie NOTA: antes era contenedor*/
        background:;
        margin-top:0px;
        margin-left:0%;
        width:100%;
        height:0px;
        background:;
        position:relative;
        overflow: hidden;
        font-size:85%;
    }   

    .contenedor{ /*trae el div para el bloque intermedio sin cabecera ni pie NOTA: antes era contenedor*/
        background:;
        margin-top:20px;
        margin-left:0%;
        width:100%;
        height:auto;
        position:relative;
        font-size:80%;
    }   
  
    #table_franjas{
        height:var(--cntdr_franjas_todas_Height); 
        padding:var(--padding);
        font-size:var(--table_franjas_FontSize);

        width:100%;
        height:380px;
        margin-top:0px;
        margin-left:0px;
        z-index:50000;
        background:magenta;
        position:relative;
    }
    #table_instructores{
        margin-top:0%;
        width:100%;        
        height:var(--cntdr_franjas_todas_Height); 
        padding:var(--padding);
        font-size:var(--table_franjas_FontSize);

        width:100%;
        height:380px;
        margin-top:0px;
        margin-left:0px;
        z-index:50000;
        background:brown;
        position:relative;
    }
    #table_especialidades{
        width:100%;        
        height:var(--cntdr_franjas_todas_Height); 
        padding:var(--padding);
        font-size:var(--table_franjas_FontSize);

        width:100%;
        height:380px;
        margin-top:0px;
        margin-left:0px;
        z-index:50000;
        position:absolute;
    }
    #table_especialidades_unica{
        margin-top:0%;
        width:100%;        
        height:var(--cntdr_franjas_todas_Height); 
        padding:var(--padding);
        font-size:var(--table_franjas_FontSize);
        width:100%;
        height:380px;
        margin-top:0px;
        margin-left:0px;
        z-index:50000;
        background:brown;
        position:relative;
    }    
    #menu_interactivo{/*los estilos css están en el documento: cabecera.php pues son dinámicos. Contiene los menus con las opciones del superadministrador*/
        height:200px;    
        margin-left:0%;   
        background:;
        position:relative;
        margin-top:0;
        z-index:6;
        font-family: 'Roboto', sans-serif;
        font-size:90%;
        padding:50px;
        
    }

    #contenedor_dias{
        display:none;
    }
#form_franjas{
    margin-top:0px;
    margin-left:0px;
    width:100%;
    height:50px;
    position:absolute;
    display:none;
}
#contenedor_franjas{
    overflow:scroll;
    
}

.foto_perfil{
    border-radius:5px;
    border:1px solid black;
}

#contenedor_tabla2{
    margin-top:0px;
    margin-left:0.5%;
    width:99%;
    height:300px;
    background:blue;
    z-index:10;
    position:absolute;
    overflow:scroll;
    scrollbar-width: none;
}



#form_especialidade-sxxxxxxxxxxxxx{
    margin-top:0px;
    margin-left:0%;
    width:100%;
    height:50px;
    position:absolute;
}
#contenedor_especialidades{
    margin-top:0px;
    margin-left:0.5%;
    width:99%;
    height:300px;
    background:blue;
    z-index:10;
    position:absolute;
    overflow:scroll;
    scrollbar-width: none;
}  

#tabla2{
    width:100%;
}
#res_franjas{
    margin-top:0px;
    margin-left:0px;
    z-index:10;
    display:none;
}
#elCheckbox{    
    display:none;
}
#status_checkbox_And_celdaFranjas{
    width:100%;
    height:100px;
    margin-top:300px;
    background:green;
    position:absolute;
    z-index:0;
}
#dentro_de_MyStatus{
    width:20%;
    height:50px;
    margin-left:30%;
    margin-top:0px;
    z-index:20;
    position:absolute;
    transition:1s;
}

.botones{
    width: 200px;
    height:30px;
    margin-left:0px;      
    margin-top:1px;  
    position:relative; 
    color:orange;
    background:black; 
    border: solid 1px black;
    border-radius: 2px;
    cursor:pointer;
    text-align:center;
    display:flex;
    justify-content: center;
    align-items: center;
    font-size:80%;
    border-radius:5px;
}
.boton_submit{
    width:300px;
    height:50px;
    margin-top:10px;
    margin-left:0%;
    padding:15px;
    color:orange;
    background:black;
    border: none;
    border-radius: 3px;
    cursor:pointer;
}
.boton_submit1{
    position: relative;
    margin-left: 300px;
    margin-top: -26px;
    width: 100px;
    height: 15px;
    padding: 5px;
    color: white;
    background: grey;
    border: none;
    cursor: pointer;
    border-radius: 3px;
    border: solid 1px black;
}
#btn_franjas_enviarXHTML{
    transition:1s;
    position:absolute;
}
#boton1{
    cursor:pointer;
}
  /*botones de modales*/
  .botones_ordenados {
    width:300px;
    height:auto;
    background:;
    color:black;
    float:left;
    display:flex;
    align-items:center;
    margin-top:3px;
    margin-left:0px;
    position:relative;
    font-family: 'Roboto', sans-serif;    
    font-size:100%; 
    cursor:pointer;
}
.botones_ordenados img{
    width:13px;
    height:13px;
    margin-left: 0px;
    margin-top: 0px;
    padding:4px;
    cursor:pointer;
}
.botones_ordenados_flotante{
    width:300px;
    height:auto;
    background:;
    color:black;
    float:left;
    display:flex;
    align-items:center;
    margin-top:2%;
    margin-left:15%;
    position:fixed;
    font-family: 'Roboto', sans-serif;    
    font-size:100%;
    z-index:160;
}
.botones_ordenados_flotante img{
    width:13px;
    height:13px;
    margin-left: 0px;
    margin-top: 0px;
    padding:5px;
    cursor:pointer;
}

#foto_tabla{
    background-color: orange;
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: relative;
    width:40px;
    height:40px;
    vertical-align: middle;   
}


#foto_tabla img{
    position: absolute;
    bottom: 0;
    width: 100%;
}

/*Tablas*/
.td_especialidades{
    height:2px;
    font-size:80%;
    width:50%;
    padding:"5px";
}
td{        
    height:70px;
    padding:3%;
    padding:2%;
    min-width:30px;
    font-size:75%;
}
th{        
    height:70px;
    padding:3%;
    min-width:50px;
    font-size:70%;
}

.space img{
    width:100px;
}

#instructor_btn_enviarXHTML{
    border-radius:"20%";
    border:"none";
    cursor:pointer;
}

.franja_vacia{
    display:none;
}

.contenedor_instructores{
    overflow:scroll;
}

#container{
    background:;
    margin:150px;
    width:50%;
    margin-left:25%;    
    height:250px;    
    padding:10px;
    font-size:90%;
    border: solid 1px black;
    border-radius: 1px;
}

.negrilla{
    font-weight:bold;
    }

    @media only screen and (max-width: 1300px) {

        #menu_interactivo{/*los estilos css están en el documento: cabecera.php pues son dinámicos. Contiene los menus con las opciones del superadministrador*/
            margin-top:0px;
        }

        #myStatus{
            margin-top:400px;
            background:red;
        }
    }
    







@media (max-width: 700px) { /*////////////////////////////////////////////////////////////////////////////////////////////////////// */

    #menu_interactivo{/*los estilos css están en el documento: cabecera.php pues son dinámicos. Contiene los menus con las opciones del superadministrador*/
        margin-top:0px;
    }

    .cntdr_botones{
        margin-left:0px;
        margin-top:50px;
        position:relative;
    }  
    #campo{
        margin-top:15px;
        width:140%;
    }  
    #campo.botones{
        margin-top:75px;
        width:140%;
    }  
   #container{
       margin-left: 05%;      
       margin-top: 60px; 
       height:700px;     
       background-image:url('../../img/img_tabla/logo.png');
       background-position: center bottom;
       background-size:150px;
       background-repeat:no-repeat;
       position:relative;
   }

   img{
       width:50%;
   }

   .negrilla{
    font-weight:bold;
    }

    .contenedor{ /*trae el div para el bloque intermedio sin cabecera ni pie NOTA: antes era contenedor*/
        background:orange;
        margin-top:0px;
        margin-left:80px;
        width:90%;
        height:auto;
        position:relative;
        font-size:80%;
        color:orange;
        padding:10px;
        color:black;
        border: solid 1px black;
        border-radius:10px;
    }  
   #par{
       background:orange;
       color:black;
       margin-top:-6px;
       margin-left:-30px;
       position:absolute;
       padding:5px;
       border:solid 3px black;
       font-size:80%;
       border-radius:5px
   }
   #campo.formulario{
       font-size:78%;
   }

   .boton_submit1{
    width:auto;
    height:auto;
    margin-left:-40px;
    margin-top:-50px;
    font-size:70%;
    background:red;
    padding:2px;
    border-radius:0px;
   }
}