@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
    font-family: 'Poppins', sans-serif;
}

body {
    background: rgba(0, 0, 0, 0.25); /* Adjust the last value (0.5) for opacity */
    background-image: url(../../images/build.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
  
  }

#login1 {
    padding-top: 0px;
    padding-bottom: 0px;
}

#login1  .form-signin {
  border-radius: 6px;
  max-width: 330px;
  width: 100%;
    padding: 19px 29px 29px;
    margin: 0 auto 20px;
     background: url("../../images/pixel-60fff.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
   /* border: 1px solid #e5e5e5;*/
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
 
#login1 .form-signin .form-signin-heading,
#login1 .form-signin .checkbox {
    margin-bottom: 10px;
}
#login1 .form-signin input[type="text"],
#login1 .form-signin input[type="password"] {
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
    border-radius: 10px;
}
/*index_signup_student*/
#login3 {
    padding-top: 0px;
    padding-bottom: 0px;
}

#login3  .form-signin {
  border-radius: 6px;
  max-width: 330px;
  width: 100%;
    padding: 19px 29px 29px;
    margin: 0 auto 20px;
    background: url("../../images/pixel-60fff.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
   /* border: 1px solid #e5e5e5;*/
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
 
#login3 .form-signin .form-signin-heading,
#login3 .form-signin .checkbox {
    margin-bottom: 10px;
}
#login3 .form-signin input[type="text"],
#login3 .form-signin input[type="password"] {
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
    border-radius: 10px;
}
/*index_signup_teacher*/
#login4 {
    padding-top: 0px;
    padding-bottom: 0px;
}

#login4  .form-signin {
  border-radius: 6px;
  max-width: 330px;
  width: 100%;
    padding: 19px 29px 29px;
    margin: 0 auto 20px;
    background: url("../../images/pixel-60fff.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
   /* border: 1px solid #e5e5e5;*/
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
 
#login4 .form-signin .form-signin-heading,
#login4 .form-signin .checkbox {
    margin-bottom: 10px;
}
#login4 .form-signin input[type="text"],
#login4 .form-signin input[type="password"] {
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
    border-radius: 10px;
}
#login2 {
    padding-top: 0px;
    padding-bottom: 0px;
}

#login2  .form-signin {
  border-radius: 6px;
  max-width: 330px;
  width: 100%;
    padding: 19px 29px 29px;
    margin-top: 5px;
    margin-bottom: 0px;
    background: url("../../images/pixel-60fff.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
   /* border: 1px solid #e5e5e5;*/
    -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
       -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

#login2 .form-signin .form-signin-heading,
#login2 .form-signin .checkbox {
    margin-bottom: 10px;
}
#login2 .form-signin input[type="text"],
#login2 .form-signin input[type="password"] {
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
    border-radius: 10px;
}
.form-signin-heading{
    text-align: center;
    font-size: 2em;
    top: 20px;
    
}
    
       .container {
        display: flex;
      
        flex-direction: row-reverse;
       }
        .form-signin5 {
            margin-bottom:-20px;
            max-width: 500px;
            /* max-height: 475px; */
           width: 100%;
            padding: 19px 29px 49px;
            background: white;
            /* border: 1px solid #e5e5e5; */
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            /* box-shadow: 0 1px 2px rgba(0,0,0,.05);
            border-radius: 7%; */
            backdrop-filter: blur(2px);
            position: absolute  ;
            float: right;
            height: 200px;
            top:auto;
            bottom: auto;
            align-items: center;
        }
     
.btn-info9{
	background-color: #104d0f !important; 
    background-image: linear-gradient(to bottom, #104d0f, #104d0f) !important;
    background-repeat: repeat-x !important;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
    color: #FFFFFF !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    border-radius: 30px;
    width:102% ;
   
    height:35px ;
    position: relative;
    margin-right:10px;
    margin-top:8px ;
    font-size: medium;
}
.btn-info1{
	background-color: #104d0f !important; 
    background-image: linear-gradient(to bottom, #104d0f, #104d0f) !important;
    background-repeat: repeat-x !important;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25) !important;
    color: #FFFFFF !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    border-radius: 30px;
    
   max-width: 320px;
    width: 100%;
   height:35px ;
    position: relative;
    margin-right:10px;
    margin-top:8px ;
    font-size: medium;
}
.USER{
    margin-top:5px ;
    position: relative;
   background: transparent;
    width: 80%;
    margin-left: 40px;
    height:30px;
    text-align: center;
    font-size: medium;
    border-bottom: 2px solid #fff ;
}
.USER :hover
{background-color:#104d0f;}
.pass{
    margin-top:5px ;
    border-radius: 30px;
    color:#000000;
    width: 80%;
    margin-left: 40px;
    text-align: center;
    height: 30px;
    font-size: medium;
    position: relative;

}
.pass :hover{

}
/*change the class of the titles at php*/
/*title admin*/
.index_logo1{
    margin-top: 20%;
    left: 100px;
    position: absolute;
    width: 130px;
    margin-right:-20px ;
   
 }
 .index_logo2{
    width:100px ;
    top: 170px;
    left: 225px;
    position: relative;
    z-index: -1;

 }
 .index_logoadmin{
    width: 250px;
    top: 120px;
    left: 186px;
    position: relative;
 }

 .spshs_admin{
	font-weight: bold;
    color: #104d0f;
    font-size: 22px;
    top: 300px;
    left: 60px;
    position: absolute;
   
}
.lmsp_admin { 
	color: #000;
    padding: 20px;
    top: 330px;
    left: 60px;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
}
 .index_logo3{
    width:220px ;
    top:-70px;
    left: 150px;

    position: relative;
 }
 /*title student*/
 .index_logostud{
    margin-top: 20%;
    left: 100px;
    position: absolute;
    width:130px;
  }
  .index_logostud2{
   
    width: 240px;
    margin-top: 23%;
    left: 45%;
    position: relative;
    
  }
  .spshs_stud{
	font-weight: bold;
    color: #104d0f;
    font-size: 22px;
    top: 300px;
    left: 60px;
    position: absolute;
   
}

.lmsp_stud {
	color: #000;
    padding: 20px;
    top: 330px;
    left: 60px;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
}
/*title teacher*/
  .index_logoteach{
    margin-top: 20%;
    left: 100px;
    position: absolute;
    width:130px;
  }
  .index_logoteach2{
   
    width: 240px;
    margin-top: 23%;
    left: 45%;
    position: relative;
    
  }
  .spshs_teach{
	font-weight: bold;
    color: #104d0f;
    font-size: 22px;
    top: 300px;
    left: 60px;
    position: absolute;
   
}

.lmsp_teach { 
	color: #000;
    padding: 20px;
    top: 330px;
    left: 60px;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
}
/*index_signup_student*/
.index_logo_signstud1{
    margin-top: 20%;
    left: 100px;
    position: absolute;
    width:130px;
  }
  .index_logo_signstud2{
   
    width: 240px;
    margin-top: 23%;
    left: 45%;
    position: relative;
    
  }
  .spshs_signstud{
	font-weight: bold;
    color: #104d0f;
    font-size: 22px;
    top: 300px;
    left: 60px;
    position: absolute;
   
}

.lmsp_signstud{ 
	color: #000;
    padding: 20px;
    top: 330px;
    left: 60px;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
}/*index_signup_student*/
.index_logo_signupteach1{
    margin-top: 20%;
    left: 100px;
    position: absolute;
    width:130px;
  }
  .index_logo_signupteach2{
   
    width: 240px;
    margin-top: 23%;
    left: 45%;
    position: relative;
    
  }
  .spshs_signupteach{
	font-weight: bold;
    color: #104d0f;
    font-size: 22px;
    top: 300px;
    left: 60px;
    position: absolute;
   
}

.lmsp_signupteach{ 
	color: #000;
    padding: 20px;
    top: 330px;
    left: 60px;
    font-size: 20px;
    font-weight: bold;
    position: absolute;
}
    
  
  
.motto p:first-child{ /*dream big*/
	font-size: 40px ;
   
	text-align: center;
margin-top: 5px;
}
h3.motto1{
    margin-top: 15px;
}
.footer.h3{
    margin-top: 5px;
}
 





.footer
		{
         

    		width: 100%;
    		height: 8%;
    		background-color:#104d0f;
    		position: absolute;
    		bottom: 0%;
            font-family: 'Times New Roman', Times, serif;
            margin-bottom: 0px;
            text-align: center;
    	}

        .span8{
            margin-right: 50px;
            display: inline-block;
        }
.navbar-inner{
    height: 60px;
}
.span9{
    margin-top: 20px;
}


.wrapper{
    background-image: url("images/images6.jpg");
    padding: 0 20px 0 20px;
}
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 10vh;
}
.side-image{
    background-image: url('.../images6');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px 0 0 10px;
    position: relative;
}
.main .row{
    width: 900px;
    height: 570px;
    border-radius: 10;
    margin-top: 20px;
    padding: 5px;
    box-shadow:  5px 5px 10px 1px rgba(0,0,0,0.2);
}
#login2 .main .row{
    width:  900px;
    height:530px;
    border-radius: 10px;
    margin-top:10px ;
    padding: 5px;
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.2);
  }
#login1 .main .row{
    width:  900px;
    height:530px;
    border-radius: 10px;
   margin-top:10px ;
    padding: 5px;
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.2);
  }
  #login3 .main .row{
    width:  900px;
    height:530px;
    border-radius: 10px;
   margin-top:10px ;
    padding: 5px;
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.2);
  }#login4 .main .row{
    width:  900px;
    height:530px;
    border-radius: 10px;
   margin-top:10px ;
    padding: 5px;
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.2);
  }

.right{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction: column;
}

img{
    width: 35px;
    position: relative;
    top: 30px;
    left: 30px;
}
/* Common styles for login forms */
.form-signin {
    border-radius: 6px;
    max-width: 100%;
    padding: 19px 29px 29px;
    margin: 0 auto 20px;
    background-color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.form-signin .form-signin-heading,
.form-signin .checkbox {
    margin-bottom: 10px;
}

.form-signin input[type="text"],
.form-signin input[type="password"] {
    font-size: 16px;
    height: auto;
    margin-bottom: 15px;
    padding: 7px 9px;
    border-radius: 10px;
}

/* Specific styles for different sections */
#login1, #login2, #login3, #login4 {
    padding-top: 0;
    padding-bottom: 0;
}

#login2 .form-signin,
#login1 .form-signin,
#login3 .form-signin,
#login4 .form-signin {
    background: url("../../images/pixel-60fff.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}