@charset "utf-8";
html {
	background-image: linear-gradient(225deg, transparent 35%, hsla(192,0%,0%,0.6)),
										radial-gradient(center center, circle closest-side, #5ed7f6, #0489ca);
   min-height: 100%;
}

.shadow {
	position:absolute;
	top:50%;
	left:50%;
	border-radius:50%;
	margin-top:-50px;
	margin-left:-50px;
	box-shadow:-2px 2px 10px 0 rgba(0,0,0,0.5),
						 2px -2px 10px 0 rgba(255,255,255,0.5);
}

.loader {
    background: -webkit-linear-gradient(left, skyblue 50%, #fafafa 50%); /* Foreground color, Background colour */
    border-radius: 100%;
    height: 100px; /* Height and width */
    width: 100px; /* Height and width */
    animation: time 8s steps(500, start) infinite;
}
.mask {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    animation: mask 8s steps(250, start) infinite;
    transform-origin: 100% 50%;
}
@-webkit-keyframes time {
    100% { 
        transform: rotate(360deg);
    }
}
@-webkit-keyframes mask {
    0% {
        background: #fafafa; /* Background colour */
        transform: rotate(0deg);
    }
    50% {
        background: #fafafa; /* Background colour */
        transform: rotate(-180deg);
    }
    50.01% {
        background: skyBlue; /* Foreground colour */
        transform: rotate(0deg);
    }
    100% {
        background: skyBlue; /* Foreground colour */
        transform: rotate(-180deg);
    }
}
body{
    	margin: 0; 
		width:100%;
    	font: normal 100% Helvetica, Arial, sans-serif; 
    	z-index:10;	
		position: absolute;
	}
#index111{
      	z-index:0; 
    	top:40%; 
    	left:20%; 
    	width:60%; 
    	font: normal 100% Helvetica, Arial, sans-serif; 
    	position: absolute;
    	background-image:url(https://lifekey.djoptical.org/wp-content/uploads/2025/06/bg_2.png);
	}
#datetime_p{
    	z-index:30; 
    	top:40%; 
    	left:10%; 
    	width:80%; 
    	font: normal 100% Helvetica, Arial, sans-serif; 
    	position: absolute;
    	background-image:url('https://lifekey.djoptical.org/wp-content/uploads/2025/06/bg_2.png');
	}
#set_df{
    	z-index:20; 
    	top:40%; 
    	left:20%; 
    	width:60%; 
    	font: normal 100% Helvetica, Arial, sans-serif; 
    	position: absolute;
	}
textarea{
    background:transparent;
    border-style:none;
    font: normal 100% Helvetica, Arial, sans-serif; 
    width:96%;
}
input{
	background:transparent;
    border-style:none; 
    width:96%;
    font: normal 100% Helvetica, Arial, sans-serif; 
	background-color:transparent; 
}
#set_user_df{
    	z-index:30; 
    	top:10%; 
    	left:10%; 
    	width:80%;
		height:80%; 
    	font: normal 100% Helvetica, Arial, sans-serif; 
    	position: absolute;
}
#carouselExampleIndicators{
    	z-index:0; 
    	top:1px; 
    	left:1px; 
    	width:100%;
		height:100%; 
    	position: absolute;
}
#bg{
    	z-index:15;	
    	top:1px; 
    	left:1px; 
		position:absolute;
}
#bg1{
    	z-index:30;	
		position:absolute;
}
