header{
		height : 60px;
		box-sizing:border-box;
		
		display : flex;
		   /*  background-image: linear-gradient(45deg, #f2f512, #34a8ff, #e9e40f); 
		border-radius: 100px 100px 0 0;*/
		display : flex;
		justify-content: center;
		align-items: anchor-center;
		/* background-image: url('images/bg1.jpg'); */
		background-size: cover;
	}
	header img{
		height : 60%;
		
	}
	.bodyContainer{
		height : auto;
		width : 70%;
		margin : 10px auto;
		box-shadow: 0px 10px 10px rgba(125, 0, 0, 0.5);
		background-color : #FFF;
		display : flex;
		flex-direction : row;
		justify-content : center;
		
	}
	.title{
		width : 100%;
		    text-align: center;
    font-size: x-large;
    font-family: cursive;
	}
	
	.loginarea{
		width : 50%;
		
	}
	.loginform{
    	max-width: 400px;
    	background-color: #fff;
    	margin: 100px auto;
    	padding: 5px;
    	border-radius: 10px;
    	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
	.captcha {
        display: flex;
        align-items: center;
        margin-bottom : 15px;
        width : auto;
    }

    #imagecaptchaload{
    	margin-right : 10px;
        height: 40px;
        width : auto;
        box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
    }
    #captchainput{
    padding: 10px;
   width: 60%;
    border: 1px solid #ccc;
    border-radius: 4px;
    }
    #captchaRefImg{
    	padding : 5px;
    	margin-right : 5px;
    	font-size : 22px;
    }
	#voiceCaptcha{
    	padding : 5px;
    	margin-right : 5px;
    	font-size : 22px;
    	color : navy;
    	box-shadow: 0px 0px 1px 0px;
    }
	h1 {
    	text-align: center;
   		color: #333;
   		font-size: x-large;
	}

	/* .input-group {
    	margin-bottom: 15px;
	} */

	label {
    	display: block;
    	margin-bottom: 5px;
    	color: #555;
	}

	.finput {
    	width: 90%;
    	padding: 10px;
    	border: 1px solid #ddd;
    	border-radius: 5px;
    	font-size: 16px;
	}

	.finput:focus {
    	border-color: #007BFF;
    	outline: none;
	}
	.btngrp{
		display : flex;
		justify-content: center;
	}
	
	.loginbtnVal {
		padding: 10px;
    	background-color: #007BFF;
    	border: none;
    	border-radius: 5px;
    	color: white;
    	font-size: 16px;
    	cursor: pointer;
    	align-content: center;
	}
	

	button:hover {
    	background-color: #0056b3;
	}
	.otpgen {
  	display: none;
  	flex-direction: column;
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100vw;
  	height: 100vh;
  	background-color: rgba(0, 0, 0, 0.6);
  	z-index: 1000;
  	justify-content: center;
  	align-items: center;
	}

.formf {
	display: none;
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  width: 300px;
  text-align: center;
}

	#otpval{
	padding : 10px;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
	} 
	.disable-event-otpgen{
    	pointer-events: none;
    	opacity: 0.3;
    }
   .overlay {
	  position: fixed;
	  top: 0; left: 0;
	  width: 100vw; height: 100vh;
	  background: rgba(0, 0, 0, 0.5);
	  z-index: 9998;
	  display: none;
	}
	.loadotlogin {
	  position: fixed;
	  top: 50%; left: 50%;
	  transform: translate(-50%, -50%);
	  z-index: 9999;
	  display:none;
	}

    /* #loadot {
	  display: block;
	  margin-top: 20px;
	  text-align: center;
	  background-color: red;
	}
 */
	.spinner {
	  	width: 50px;
	    height: 50px;
	    border: 8px solid #ccc;
	    border-top: 8px solid #007bff;
	    border-radius: 50%;
	    animation: spin 1s linear infinite;
	    margin: 50px auto;
	}
	
	@keyframes spin {
  		from { transform: rotate(0deg); }
  		to { transform: rotate(360deg); }
	}
	#loadMessage{
		margin-top:10px; 
		font-size:14px; 
		color:#333;
	}
    .otpgenval{
    	text-align: center;
    }
	.footer{
		width : 100vh;
		height : 3vh;
		bottom : 0;
	}
	
	
	body {
  		box-sizing: border-box;
  		margin: 0;
  		background: url('images/uco6E.webp') no-repeat center center;
  		background-size: cover;
  		display: flex;
  		flex-direction: column;
	}
	
	header{
		height : 60px;
		box-sizing:border-box;
		
		display : flex;
		   /*  background-image: linear-gradient(45deg, #f2f512, #34a8ff, #e9e40f); 
		border-radius: 100px 100px 0 0;*/
		display : flex;
		justify-content: center;
		align-items: anchor-center;
		/* background-image: url('images/bg1.jpg'); */
		background-size: cover;
	}
	header img{
		height : 60%;
		
	}
	#uco{
		font-size: 50px;
    	color: #e79b24;
    	font-family: cursive;
	}
	#online{
		font-size: 50px;
    	font-family: cursive;
    	color: #007BB8;
	}
	.container{
		height : 100vh;
		width : auto;
		padding-top:25px;
		box-sizing:border-box;
	}
	footer{
		/* height : 5%; */
	}
	.loginscreen{
		/* position : relative;
		height : 80%;
		width : 80%; */
		max-width : 1000px;
		max-height : 500px;
		margin: 50px auto;
    	display: flex;
    	flex-direction: row;
    	justify-content: center;
    	box-sizing: border-box;
    	
        /* background-image: url('images/bg2.jpeg'); */
	}
	.tag{
		width : 100%;
		text-align: center;
	}
	.standscreen{
		height : 10%;
		width : 100%;
		display : flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
	}
	/* .basescreen{
	 	width : 100%;
		display : flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	} */
	.stand1{
		width : 45%;
		height : 100%;
	}
	.stand2{
		width : 2px;
		background-color: black;
		height : 100%;
	}
	.login{
		width : 50%;
		height : 100%;
		background-color: none;
		align-items: center;
		box-sizing: border-box;
		overflow: auto;
		
	}
	.basescrn1{
		width : 35%;
		height : 100%;
	}
	.basescrn2{
		width : 30%;
		height : 100%;
		background-color: black;
		
	}
	.login-container {
  		background-color: white;
  		    padding: 10px 30px 0px 30px;
  		/* border-radius: 8px;
  		box-shadow: 0 0 10px rgba(0,0,0,0.1);
  		 */max-width: 500px;
  		max-height : 500px;
  		box-sizing: border-box;
 		 margin : 50px auto;
 		 box-shadow: 0px 5px 20px rgb(120 127 45);
 		 box-sizing: border-box;
    	overflow-block: auto;
    	border: 5px solid #007BB8;
	}

	.logo-header {
  		display: flex;
  		justify-content: space-between;
  		align-items: center;
  		margin-bottom: 30px;
	}

	.logo {
  		max-height: 50px;
 	    max-width: 45%;
  		object-fit: contain;
	}

	.login-form {
  		display: flex;
  		flex-direction: column;
	}

	.login-form h1 {
  		text-align: center;
  		margin-bottom: 20px;
	}

	.login-form #username,#password {
  		padding: 10px;
  		margin-bottom: 20px;
  		border: 1px solid #ccc;
  		border-radius: 4px;
	}

	.login-form button {
 		padding: 10px;
  		background-image: linear-gradient(to right, #007BB8, #007BB8, #007BB8);
  		color: white;
  		border: none;
  		border-radius: 4px;
  		cursor: pointer;
  		margin-bottom: 20px;
	}

	.login-form button:hover {
  		background-color: #003d80;
	}

	.form-links {
  		text-align: center;
  		margin-top: 10px;
	}

	.form-links a {
  		color: #0050b3;
  		text-decoration: none;
	}
.image-container {
  overflow: hidden;
  width: 50%;
  height: auto;
  box-sizing: border-box;
  /* background: linear-gradient(180deg, rgba(181,225,250,1) 0%, rgba(255,255,255,1) 100%); */
  display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* background-image: url(/UCOONLINE_new/images/bg.png); */
		background-size: cover;
}

.socialheader{
 height: 25px;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #0563b9;
 font-size: 15px;
 
 font-style: italic;
}

.social{
width: 100%;
height: 55px;
display: flex;
 align-items: center;
 justify-content: center;
}
.social ul{list-style-type: none;padding: 10px;right: 0;bottom: 4px;position: relative;display: flex;}
.social ul li a{ display: flex;align-items: center; justify-content: center; width: 40px;height: 30px;border-radius: 100%; color: #FFF;}
.social ul li a.facebook{ background: #3a5a95;}
.social ul li a.twitter{ background: #57aced;}
.social ul li a.instagram{ background: #dd4f43;}
.social ul li a.youtube{ background: #ff0000;}
.social ul li a.linkedin{ background: #0E76A8;}
.social ul li a.whatsapp{ background: #57BA63;}
.Secdesmob{
display: none;
}
.slider {
      position: relative;
      max-width: 500px;
      max-height: 500px;
      overflow: hidden;
      flex:1;
      margin : 50px auto;
      background-image: linear-gradient(to right, #007BB8, #007BB8, #007BB8);
      border: 5px solid #007BB8;
      box-shadow: 0px 5px 20px rgb(120 127 45);
    }

    .slides {
      display: flex;
      transition: transform 0.8s ease-in-out;
      height: 100%;
      
    }

    .slide {
      min-width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
        
    }

    .nav-arrows, .dots {
      position: absolute;
      z-index: 10;
    }

    .nav-arrows {
      top: 50%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      transform: translateY(-50%);
    }

    .nav-arrows span {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      padding: 12px;
      cursor: pointer;
      user-select: none;
      transition: 0.3s;
    }

    .nav-arrows span:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    .dots {
      bottom: 10px;
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .dot {
      height: 12px;
      width: 12px;
      margin: 0 5px;
      background-color: #f5e007;
      border-radius: 50%;
      display: inline-block;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .dot.active {
      background-color: green;
    }
    .feedbackText{
    	display:flex;
    	flex-direction: column;
    	justify-content: center;
    	text-align: center;
    	color : white;
    	background-color: #007bff6e;
    }
     @media (max-width: 768px){
	.slider{
		display : none;
	}
	.login-container {
  		max-width: 100%;
  		max-height : 100%;
	}
	.loginscreen {
	width : 100%;
	}
	.login {
		width : 100%;
		padding : 20px;
	}
	}