.your_css_selector_here {
		background-color: hsla(244.85294117647055, 100%, 50%, 1);
		background-image: radial-gradient(circle at 50% 0%, hsla(319, 0%, 0%, 1) 49.15975941515135%, transparent 102.23193813062571%);
		background-blend-mode: normal;
		}
		

		body{
		    
			margin: 0;
            padding: 20px;
			font-family: 'Poppins', sans-serif;
			line-height: 1.6;
		}
		
		h1{
			background-color:rgba(0, 255, 208, 0.762);
			width: 300px;
			border: 2px solid rgb(255, 255, 255);
			position: relative;
			left: 50px;
			top: 10px;
			border-radius: 10px
		}

		h2{
			font-family: 'Lato', sans-serif;
	 
		}
		h3{
			font-family: 'Lato', sans-serif;
	 
		}

		input{
			border: none;
			border-radius:8px;
			padding: 4px 9px;
			box-shadow: 0 0 1px rgba(0, 0, 0, 0.8);
			position: relative;
			left: -10px;
		}

		select{
			padding: 3px;
			border-radius:10px;
			position:relative;
			top:5px
		}

		#fondo {
			text-align:center;
			background-color: hsla(220.9090909090909, 30%, 14%, 1);
    		background-image: radial-gradient(circle at 0% 5%, hsla(225.00000000000003, 56%, 60%, 0.7) 3.1210986267166043%, transparent 40%), radial-gradient(circle at 23% 3%, hsla(210.4411764705882, 96%, 48%, 0.37) 3.1210986267166043%, transparent 76.4190383017679%), radial-gradient(circle at 100% 93%, hsla(186.61764705882354, 70%, 55%, 0.21) 3.1210986267166043%, transparent 45.38487571252063%), radial-gradient(circle at 96% 103%, hsla(120.44117647058823, 76%, 39%, 0.1) 3.1210986267166043%, transparent 50.0047517726123%), radial-gradient(circle at 80% 0%, hsla(158.82352941176472, 80%, 48%, 0.23) 3.1210986267166043%, transparent 24.819747276612727%);
    		background-blend-mode: normal, normal, normal, normal, normal;			
		}
		
		/*posición y estilo de la primera division"*/
		#primera_seccion{
    		background-color: hsla(117.00000000000004, 40%, 15%, 1);
    		background-image: radial-gradient(circle at 3% 92%, 	rgba(0, 255, 208, 0.762) 0%, transparent 67%), radial-gradient(circle at 46% 94%, hsla(227.6470588235294, 100%, 50%, 1) 0%, transparent 81%), radial-gradient(circle at 93% 95%, hsla(230.2941176470588, 100%, 23%, 1) 0%, transparent 66%), radial-gradient(circle at 89% 8%, hsla(243.52941176470586, 100%, 9%, 1) 0%, transparent 150%);
    		background-blend-mode: normal, normal, normal, normal;
			width:420px;
			height:648px;
			position:fixed;
			top: 50%;
			left:50%;
			transform: translate(-50%, -50%);
			border: 0px solid rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(15px);
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
			color: #ffffff;
			border-radius: 20px;
			padding: 30px 40px;
			}
			
		#div_editar{
    		background-color: hsla(117.00000000000004, 40%, 15%, 1);
    		background-image: radial-gradient(circle at 3% 92%, 	rgba(0, 255, 208, 0.762) 0%, transparent 67%), radial-gradient(circle at 46% 94%, hsla(227.6470588235294, 100%, 50%, 1) 0%, transparent 81%), radial-gradient(circle at 93% 95%, hsla(230.2941176470588, 100%, 23%, 1) 0%, transparent 66%), radial-gradient(circle at 89% 8%, hsla(243.52941176470586, 100%, 9%, 1) 0%, transparent 150%);
    		background-blend-mode: normal, normal, normal, normal;
			width:30%;
			height:80%;
			position:fixed;
			top: 50%;
			left:50%;
			transform: translate(-50%, -50%);
			border: 0px solid rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(15px);
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
			color: #ffffff;
			border-radius: 6%;
			padding: 30px 40px;
			}

		/*posición y estilo de subdivison"*/
		#subdivision_1{
            text-align:center;
			background-color:rgba(255, 255, 255, 0.092);		    border: 2px solid black;
            width:250px;
		    height:450px;
            position:relative;
		    left:20%;
            top: -400px;
			border-radius: 30px;
			border: 2px solid #1a1a1a;
			
        }
        #subdivision_10{
            text-align:center;
			background-color:rgba(255, 255, 255, 0.092);		    border: 2px solid black;
            width:250px;
		    height:467px;
            position:relative;
		    left:20%;
            top: -400px;
			border-radius: 30px;
			border: 2px solid #1a1a1a;
			
        }
        /*ESTILOS PARA DIV DE EDITAR2*/
		#subdiv_editar{
            text-align:center;
			background-color:rgba(255, 255, 255, 0.092);		    border: 2px solid black;
            width:66%;
		    height:64vh;
            position:relative;
		    left:19%;
            top: -64vh;
			border-radius: 30px;
			border: 2px solid #1a1a1a;
			
        }
        /*ESTILOS PARA DIV DE EDITAR3*/
        #subdiv_editar3{
            text-align:center;
			background-color:rgba(255, 255, 255, 0.092);		    border: 2px solid black;
            width:66%;
		    height:69vh;
            position:relative;
		    left:19%;
            top: -59vh;
			border-radius: 30px;
			border: 2px solid #1a1a1a;
			
        }
        
        #subdivision_5{
            text-align:center;
			background-color:rgba(255, 255, 255, 0.092);		    border: 2px solid black;
            width:250px;
		    height:470px;
            position:relative;
		    left:20%;
            top: -400px;
			border-radius: 30px;
			border: 2px solid #1a1a1a;
			
        }
			/*posición del H2 "nombre"*/

			.user_div1{
				width: 190px; 
				position: relative;
				left: -14px 
			}
            
            .user_2{
				width: 190px; 
				position: relative;
				left: -14px;
				top: -4px; 
			} 
			/*para registrar4*/
			.subuser_2{
				width: 190px; 
				position: relative;
				left: 6px;
				top: -27px; 
			}

			.user_20{
				width: 190px; 
				position: relative;
				left: -14px;
				top: -20px; 
			} 
			.subuser_20{
				width: 190px; 
				position: relative;
				left: -14px;
				top: -20px; 
			}

			/*posición del H2 "contraseña"*/

			.password_div1{
				width: 190px;
				position: relative; 
				left: 5px;
			}
			
			/*posición para h2 de la pgn estudiante1*/
			.identification_1{
				width: 190px;
				position: relative; 
				left: 29px;
				margin-top:49px;
				
			}
			.identification_2{

				width: 190px;
				position: relative; 
				left: 15px;	
				top:15px;
			
			}
			.identification_20{

				width: 190px;
				position: relative; 
				left: 15px;	
				top:-25px;
			
			}
			.subidentification_20{

				width: 190px;
				position: relative; 
				left: -10px;	
				top:-25px;
			
			}
			.identification_3{

				width: 190px;
				position: relative; 
				left: 120px;	
				top:-45px;
			
			}
			.ubicacion_1{

				width: 190px;
				position: relative; 
				left: -5px;	
				top:15px;
			
			}
			.informacion_1{

				width: 190px;
				position: relative; 
				left: 8px;	
				top:15px;
			
			}
			.textarea_1{
				position:fixed;
				left: 158px;
				top: 512px;
				border:none;
				border-radius: 6px;
				padding:2px 15px;
			}
			.grado_1{

				width: 190px;
				position: relative; 
				left: -28px;
				top:-25px
			
			}
			.input_div1{
				position: relative;
				margin-left: 23px ;
				top:13px;
			}
			/*position de boton para pgn estudiante1*/
		    .button_div1{
				position: relative; 
				margin-top: 99px;
			}
			 .button_2{
				position: relative; 
				margin-top: 15px;
			}
			.input_2{
				position: relative;
				margin-left: 23px ;
				top:13px;
			}
        /*position*/
		.propiedad_h1{
			position: relative; 
			left:65; 
			padding: 1px 17px;
		}
		.propiedad2_h1{
			position: relative; 
			left:65; 
			padding: 1px 7px;
			top:px;
		}
		.h1_editar{
			position: relative; 
			left:20%; 
			padding: 1px 7px;
			top:px;
		}


		.boton {
 			border-radius: 20px;
			padding: 8px 15px;
			font-weight: 600;
			letter-spacing: 0.2px;
			color: white;  
			background: linear-gradient(180deg, #01eeff, #0a1324);
			border: 1px solid color-mix(in oklab, var(--agua-marino) 35%, white);
			cursor: pointer;
			outline: none;
			position: relative;
			isolation: isolate; /* para ::before */
			box-shadow:
			0 0 0px 0 rgba(127,255,212,0),
			inset 0 0 0 0 rgba(85, 252, 196, 0.455);
			transition: 0.3s;
		}

/* halo externo (apagado por defecto) */
		.boton::before { 
			content: "";
 			position: absolute;
  			inset: -10px;
 			border-radius: 20px;
  			background: radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--agua-marino) 70%, white) 0%, transparent 60%);
			filter: blur(14px);
			opacity: 0;
  			transform: scale(1.03);
  			z-index: -1;
		}

/* hover: iluminación y pequeño zoom */
		.boton:hover {
  			box-shadow: 0 0 15px rgb(0, 229, 255);
  			transform: translateY(-1px) scale(1.05);
  			color: var(--texto-oscuro);
  			border-color: color-mix(in oklab, var(--agua-marino) 80%, white);
		}

		.boton:hover::before {
  			opacity: 0.9;
  			transform: scale(1.02);
		}

/* foco teclado accesible */
		.boton:focus-visible {
  			outline: 2px solid transparent;
  			box-shadow:
    			0 0 0 3px color-mix(in oklab, var(--agua-marino) 75%, white),
   				0 10px 30px -10px color-mix(in oklab, var(--agua-marino) 60%, black),
    			inset 0 0 20px rgb(0, 255, 170);
		}

/* respeta reduce motion */
		@media (prefers-reduced-motion: reduce) {
 			.boton, .boton::before {
    			transition: none;
  		}
			}

		.h2_user{
			background-color: rgba(0, 255, 208, 0.762);
			width: 190px;
			border: 2px solid;
			position: relative;
			left: 115px;
			top: 20px;
			border-radius: 10px
		}
		.seb_proyecto{
		    width: 188px;
		    position: relative;
		    left: -7px;
			
		    
		}

		#principal_div{
		    text-align:center;
			border-radius: 10px;
			background-color:rgba(255, 255, 255, 0.5);		    
		    width:200px;
		    height:100px;
		    position:relative;
		    left:110px;
			top: 40px;
			border:solid
	}

		#cuadro{
            text-align:center;
			background-color:rgba(255, 255, 255, 0.092);		    border: 2px solid black;
            width:280px;
		    height:390px;
            position:relative;
		    left:15%;
            bottom: 190px;
			border-radius: 30px;
			border: 2px solid #1a1a1a;
		 }
		   	
		#segunda_seccion{    
		    background-color: hsla(117.00000000000004, 40%, 15%, 1);
    		background-image: radial-gradient(circle at 3% 92%, 	
			rgba(0, 255, 208, 0.762) 0%, transparent 67%), 
			radial-gradient(circle at 46% 94%, hsla(227.6470588235294, 100%, 50%, 1) 0%, 
			transparent 81%), radial-gradient(circle at 93% 95%, hsla(230.2941176470588, 100%, 23%, 1) 0%,
			transparent 66%), radial-gradient(circle at 89% 8%, hsla(243.52941176470586, 100%, 9%, 1) 0%,
			transparent 150%);
    		background-blend-mode: normal, normal, normal, normal;
			width:800px;
			height:400px;
			position:fixed;
			top: 50%;
			left:40%;
			transform: translate(-50%, -50%);
			border: 0px solid rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(15px);
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
			color: #ffffff;
			border-radius: 20px;
			padding: 30px 40px;
		}
		/* propiedades de div para registrar horas */
		#tercera_seccion{    
		    background-color: hsla(117.00000000000004, 40%, 15%, 1);
    		background-image: radial-gradient(circle at 3% 92%, 	
			rgba(0, 255, 208, 0.762) 0%, transparent 67%), 
			radial-gradient(circle at 46% 94%, hsla(227.6470588235294, 100%, 50%, 1) 0%, 
			transparent 81%), radial-gradient(circle at 93% 95%, hsla(230.2941176470588, 100%, 23%, 1) 0%,
			transparent 66%), radial-gradient(circle at 89% 8%, hsla(243.52941176470586, 100%, 9%, 1) 0%,
			transparent 150%);
    		background-blend-mode: normal, normal, normal, normal;
			width:700px;
			height:490px;
			position:fixed;
			top: 50%;
			left:50%;
			transform: translate(-50%, -50%);
			border: 0px solid rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(15px);
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
			color: #ffffff;
			border-radius: 20px;
			padding: 30px 40px;
		}
		/*propiedades para la div de editar1 */
		#div_editar1{    
		    background-color: hsla(117.00000000000004, 40%, 15%, 1);
    		background-image: radial-gradient(circle at 3% 92%, 	
			rgba(0, 255, 208, 0.762) 0%, transparent 67%), 
			radial-gradient(circle at 46% 94%, hsla(227.6470588235294, 100%, 50%, 1) 0%, 
			transparent 81%), radial-gradient(circle at 93% 95%, hsla(230.2941176470588, 100%, 23%, 1) 0%,
			transparent 66%), radial-gradient(circle at 89% 8%, hsla(243.52941176470586, 100%, 9%, 1) 0%,
			transparent 150%);
    		background-blend-mode: normal, normal, normal, normal;
			width:700px;
			height:98%;
			position:fixed;
			top: 50%;
			left:50%;
			transform: translate(-50%, -50%);
			border: 0px solid rgba(255, 255, 255, 0.2);
			backdrop-filter: blur(15px);
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
			color: #ffffff;
			border-radius: 40px;
			padding: 30px 40px;
		}

		#subdivision_2{
            text-align:center;
			background-color:rgba(255, 255, 255, 0.092);		    border: 2px solid black;
            width:750px;
		    height:290px;
            position:relative;
		    left:3%;
			top:-265px;
			border-radius: 30px;
			border: 2px solid #1a1a1a;
		}
		/* propiedades de subdiv para registrar horas */
		#subdivision_3{
            text-align:center;
			background-color:rgba(255, 255, 255, 0.092);		    border: 2px solid black;
            width:680px;
		    height:360px;
            position:relative;
		    left:10px;
			top:-280px;
			border-radius: 30px;
			border: 2px solid #1a1a1a;
		}
		
		#subdivision_4{
            text-align:center;
			background-color:rgba(255, 255, 255, 0.092);		    border: 2px solid black;
            width:680px;
		    height:435px;
            position:relative;
		    left:10px;
			top:-280px;
			border-radius: 30px;
			border: 2px solid #1a1a1a;
		}
		#div_registro{
            text-align:center;
			background-color:rgba(255, 255, 255, 0.092);		    border: 2px solid black;
            width:250px;
		    height:450px;
            position:relative;
		    left:20%;
            bottom: 200px;
			border-radius: 30px;
			border: 2px solid #1a1a1a;
		 }
		 /*propiedades del logo del sena para pgn estudiane1*/
 		.img-sena{
			width: 82%;
            position: relative;
            left:120%;
            top:-25vh;
        } 
		.img-sena2{
			width: 375px;
            position: relative;
            left:750px;
            top:-240px;
        } 
         /*propiedades del img para pgn estudiane1*/
		.img-estudiantes{
            position: relative;
			width:280px ;
			margin-top:-200;
			right:-3px;
			filter: drop-shadow(0 0 15px #00f);
		}
		.img-estudiantes1{
            position: relative;
			width:480px ;
			margin-top:-380;
			right:480px;
			 filter: drop-shadow(0 0 15px rgb(148, 10, 153));
		}
		
		 /*propiedades del logo para  pag de inicoo de sesion */
		.img-logo{
            position: relative;
			width:68% ;
			top:-63.5vh;
			left:-39%
		}
		 /*posición del logo para pgn horas*/
		.img-logohora{
		    width:290;
		    position: relative;
		    top: -140px;
		    right: 120px;
		}
		/*posición del logo para pgn registros1*/
        .img-logoreg1{
            width:290; 
            position: relative; 
            top: -140px;
            left: 369px
        }
		.img-logo2{
            position: relative;
			width:220px ;
			top: -258px;
			 left:-560px
		}
			.propiedad_logo{
				position: relative; 
				top:-397; left:-163px
			}

        /* propiedades de imd para pgn estudiane1*/
		.img-inicio {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			margin-left: 240px;
    	    top: -98px; 
			cursor:pointer;
		}
		
		.img-inicio:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		
		.img-inicioreg {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			margin-left: 240px;
    	    top: -148px; 
			cursor:pointer;
		}
		
		.img-inicioreg:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		.img-iniciolider {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			margin-left: 240px;
    		margin-top: -120px; 
			cursor:pointer;
		}
		
		.img-iniciolider:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		
		
		.img-inicio2{
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			left: 690px;
    		top: -350px; 
			cursor:pointer;
		}
		

		.img-inicio2:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		.img-info {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			margin-left: 320px;
    		margin-top: -570px; 
			cursor:pointer;
		
		}

		.img-info:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		
		/* propiedades de img para la pag docentes1 y estudiante1*/
		.img-infodoc {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			margin-left: 320px;
    		margin-top: -650px; 
			cursor:pointer;
		
		}

		.img-infodoc:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		/* propiedades de img para la pag de registros*/
		.img-infoR {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			float: right;               /* flota a la derecha */
            margin: 0 0 10px 20px; 
			position: relative;
			margin-left: 260px;
    		margin-top: -130px; 
			cursor:pointer;
		
		}

		.img-infoR:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		.img-infolider {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			margin-left: 320px;
    		margin-top: -580px; 
			cursor:pointer;
		
		}

		.img-infolider:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		.img-infoidex {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			margin-left: 320px;
    		top: -480px; 
			cursor:pointer;
		
		}

		.img-infoidex:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		.img-info1 {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			margin-left: 320px;
    		top: -700px; 
			cursor:pointer;
		
		}

		.img-info1:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		.img-info2 {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			left: 290px;
    		top: -670px; 
			cursor:pointer;
		
		}
		.img-info2:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		.img-info3 {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			left: 290px;
    		top: -600px; 
			cursor:pointer;
		
		}

		.img-info3:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		/*cambio de registrar3*/
		.img-inforeg {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			left: 290px;
    		top: -735px; 
			cursor:pointer;
		
		}

        		.img-inforeg:hover {
            		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
        		}
            .body1 {
              font-family: Arial, sans-serif;
              background: linear-gradient(90deg, #1a3c7c, #176d7c);
              color: #000;
              padding: 20px;
            }
        
            .titulo {
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 20px;
            }
        
            .titulo h1 {
              background: #18d0a7;
              color: #000;
              font-size: 20px;
              padding: 10px 20px;
              border-radius: 8px;
              font-weight: bold;
            }
        
            table {
              width: 100%;
              border-collapse: collapse;
              background: white;
            }
        
            th {
              background: #1a56a3;
              color: white;
              padding: 12px;
              font-weight: bold;
              border: 1px solid black;
              text-align: center;
            }
        
            td {
              padding: 10px;
              text-align: center;
              border: 1px solid black;
            }
        
            .editar {
              color: #1a56a3;
              font-weight: bold;
              cursor: pointer;
            }
        
            .eliminar {
              color: red;
              font-weight: bold;
              cursor: pointer;
            }
        
            .editar:hover {
              text-decoration: underline;
            }
        
            .eliminar:hover {
              text-decoration: underline;
            }
            .identification_4{
        		width: 190px; 
				position: relative;
				left: 10px;
				top: 5px
				 
			} 
			.subidentification_4{

				width: 190px;
				position: relative; 
				left: 160px;	
				top:-45px;
			
			}
            .fecha{

				width: 190px;
				position: relative; 
				left: -33px;	
				top:-21px;
			
			}
			.subfecha{

				width: 190px;
				position: relative; 
				left: 159px;	
				top:-80px;
			
			}
			.hora{

				width: 190px;
				
				position: relative; 
				left: -39px;	
				top:-40px;
			
			}
			.subhora{
				width: 190px;
				position: relative; 
				left: 160px;	
				top:-100px;		
			}
			.actividad{

				width: 190px;
				position: relative; 
				left: -16px;	
				top:-64px;
				
			
			}
			.subactividad{
				border-radius: 10px;
				width: 204px;
				height: 26px;
				position: relative; 
				left: 202px;	
				top: -125px;
				
			
			}
            .img-info4 {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			left: 250px;
    		top: -630px; 
			cursor:pointer;
		
		}

		.img-info4:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		
		/* propiedades pag editar2 */
		 .img-info5 {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			left: 103%;
    		top: -106.3vh; 
			cursor:pointer;
		
		}
        /* propiedades pags editar3 */
		 .img-info5_1 {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			left: 103%;
    		top: -110.7vh; 
			cursor:pointer;
		
		}

		.img-info5:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		 /* propiedades pags editar1 */
		.img-info5_2 {
  			width: 175px;
  			cursor: pointer;
			transition: 0.3s ease; /* suaviza el efecto */
			border-radius: 50%; 
			position: relative;
			left: 250px;
    		top: -820px; 
			cursor:pointer;
		
		}

		.img-info5_2:hover {
    		filter: drop-shadow(0 0 20px rgb(0, 229, 255));
		}
		.img-inicio4{
			width: 175px;
			cursor: pointer;
		  transition: 0.3s ease; /* suaviza el efecto */
		  border-radius: 50%; 
		  position: relative;
		  left: 105%;
		  top: -210px; 
		  cursor:pointer;
	     }
	     .img-inicio4:hover {
		  filter: drop-shadow(0 0 20px rgb(0, 229, 255));
	     }
	        /* propiedadesd de img para lider2 */
		.img-inicio4-0{
			width: 175px;
			cursor: pointer;
		  transition: 0.3s ease; /* suaviza el efecto */
		  border-radius: 50%; 
		  position: relative;
		  left: 630px;
		  top: -210px; 
		  cursor:pointer;
	      }
	      
	    .img-inicio4-0:hover {
		     filter: drop-shadow(0 0 20px rgb(0, 229, 255));
	    }
	  
	  
	  /* propiedades de img para editar*/
	  .img-inicio5{
			width: 175px;
			cursor: pointer;
		  transition: 0.3s ease; /* suaviza el efecto */
		  border-radius: 50%; 
		  position: relative;
		  left: 72.9%;
		  top: -26vh; 
		  cursor:pointer;
	  }
	  .img-inicio5:hover {
		  filter: drop-shadow(0 0 20px rgb(0, 229, 255));
	  }
	  
	  .img-inicio5_1{
			width: 175px;
			cursor: pointer;
    		transition: 0.3s ease; /* suaviza el efecto */
    	    border-radius: 50%; 
    		position: relative;
    		left: 630px;
    		top: -210px; 
    		cursor:pointer;
	  }
	  .img-inicio5_1:hover {
		  filter: drop-shadow(0 0 20px rgb(0, 229, 255));
	  }
	   /* propiedadesd de img para editar1 */
		.img-inicio5_2{
			width: 175px;
		    cursor: pointer;
		    transition: 0.3s ease; /* suaviza el efecto */
		    border-radius: 50%; 
		    position: relative;
		    left: 630px;
		    top: -310px; 
		    cursor:pointer;
	  }
	  .img-inicio5_2:hover {
		  filter: drop-shadow(0 0 20px rgb(0, 229, 255));
	  }
	    /* posición de hr para lider2 */
	    .hr_lider{
	       position: relative; 
	       top: -30px;
	    }
	    /* posición de hr para lider2 */
	    .hr_lider1{
	        position: relative; 
	        top: -50px;
	    }
	    
	    /* posición de hr para lider2 */
	    .hr_lider2{
	        position: relative; 
	        top: -70px;
	    }
        
        /* pposición de hr para editar1 */
        .hr_editar{
            position: relative; 
            top: -35px;
        }
        /* posición de hr para editar1 */
        .hr_editar1{
            position: relative; 
            top: -60px;
        }
        /* posición de hr para editar1 */
        .hr_editar2{
            position: relative;
            top: -80px;
        }
        /* posición de hr para editar1 */
        .hr_editar3{
            position: relative;
            top: -120px;
        }
        /* posición de h2 para id registro de editar1*/
        .h2_editar1{
            position:relative;
            right:246px;
        }
         /* posición de h2 para estudiante de editar1*/
        .h2_editar1-1{
            position: relative;
            top:-26%;
        }
        
         /* propiedades para actividad de editar1*/
        .textarea_editar1{
            width:210px
            ;position: relative; 
            top: -120px;
            left:160px; 
            border-radius: 9px;
        }
         /* propiedades para select de editar1*/
        .selec_editar1{
            width:220px;
            position: relative;
            top:-38%;
            
        }
        /* posición de h1 para docentes2*/
        .h1_docente2{
            position: relative;
            left: 50px;
            top: -15px
        }
        /* propiedades de h2 para docentes2*/
        .h2_docente2{
            width: 190px; 
            position: relative;
            left: -295px;
            top: -15px;
            border-radius: 20px;
        }
        /* propiedades de h2 para docentes2*/
        .h2_docente2-1{
            width: 190px;
            position: relative; 
            left: -260px;
            top: -22px; border-radius:
            20px;
        }
        /* propiedades de h2 para docentes2*/
        .h2_docente2-2{
            width: 190px;
            position: relative;
            left: -270px; 
            border-radius: 20px
        }
        /* propiedades de select para docentes2*/
        .selec_docente{
            position: relative; 
            left:330px;
            top: -260px;
            padding: 3px 31px;
        }
        /* propiedades de select para docentes2*/
        .selec_docente1{
            position: relative;
            left:142px; 
            top: -160px;
            padding: 3px 20px;
        }
        /* propiedades de select para docentes2*/
        .selec_docente2{
            position: relative;
            right: 38px; 
            top: -60px;
            padding: 3px 22px;
        }
         /* posición de boton para docentes2 */
        .button_docentes2{
            position: relative; 
            left:50px; 
            top:-260px; 
        }
         /* posición de boton para docentes2 */
        .button_docentes2-1{
            position: relative; 
            right:45px;
            top:-160px
        }
         /* posición de boton para docentes2 */
        .button_docentes2-2{
            position: relative;
            left:284px;
            top:-90px; 
        }
         /* posición de boton para docentes2 */
        .button_docentes2-3{
            position: relative;
            left:685px;
            top:-140px;
        }
        
         /* posición de boton para editar1 */
        .button_editar1{
            position: relative; 
            top:-30%;
            left:160px; 
        }
         /* posición de boton para editar1 */
        .button_editar1-1{
            position: relative; 
            top:-43%;
            right:180px;
        }
        
	    
	    /* posición de boton para pgn horas */
        .button_horas{
            position: relative; 
            bottom: 0%;
            left:10px;
        }
         /* posición de boton para pgn lider1 */
        .button_lider{
             position: relative;
             bottom: -25%; 
             left:0%
        }
        .button_3{
				position: relative; 
				margin-top: -150px;
				left: 480px;
			}
			/* botones pagina registrar horas */
			.button_3-0{
				position: relative; 
				top: -50px;
				left: 70px;
			}
			.button_3-1{
				position: relative; 
				top: -109px;
				right: 199px;
			}
			/* boton paginas editar */
		.button_4{
				position: relative; 
				top: -10%;
				left: 171%;
			}
			
		/* propiedades de boton para pag estudiante1 */	
		.button_estud{
		    position: relative;
		    bottom: 5%;
		    left:0%;
		    
		}
		.bottom_estud1{
		   position: relative;
		   bottom: -25%; 
		   left:0%
		    
		}
		/* posición de h2 para pag registrar2 */	
		.h2_registrar2{
		    position:relative;
		    right:42px;
		}
		/* posición de boton para pag registrar2 */	
		.button_regr2{
		    position: relative;
		    bottom: 75%;
		    left: 119%
		}
        .propiedad2_h1{
			position: relative; 
			left:65; 
			padding: 1px 20px;
			top:-20px;
		}
        .img-logo3{
            position: relative;
			width:220px ;
			top: -240px;
			left:-68%
		}
		.img-logo30{
            position: relative;
			width:220px ;
			top: -260px;
			left:-72%
		}
		.img-logo4{
            position: relative;
			width:61% ;
			top: -61%;
			 left:-163px
		}
		/* propiedades de logo para registrar2 */
		.img-logo40{
            position: relative;
			width:67% ;
			top: -60.5%;
			left:-160px
		}
		/* propiedades de logo para editar2 */
		.img-logo5{
            position: relative;
			width:220px ;
			top: -71%;
			left:-34%
		}
			/* propiedades de logo para editar3 */
		.img-logo5_1{
            position: relative;
			width:220px ;
			top: -66.6%;
			left:-40%
		}
		/* propiedades de logo para editar4 */
		.img-logo5_2{
            position: relative;
			width:220px ;
			top: -71.2%;
			left:-36.9%
		}
		/* propiedades y posición de logo para registrar2 */
		.img-logoregis{
		    width:290;
		    position:relative; 
		    top: -140px;
		    left: 253px
		}
        .img-sena3{
				width: 365px;
				position: relative;
				left:650px;
				top:-160px;
        }
        /* propiedades de logosena para editar2 */
		.img-sena4{
				width: 365px;
				position: relative;
            	left:480px;
            	top:-25vh;
        }
        /* propiedades de logosena para editar3 */
		.img-sena4_1{
				width: 365px;
				position: relative;
            	left:500px;
            	top:-19vh;
        }
	

              .msg{
    margin-top:15px;
    font-weight:700;
    min-height:20px;
  }
    
    .flex-container {
  display: flex;
  flex-direction: row;
}