@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family:Calibri;
}

body{
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* nav bar design */
.top-nav{
    background-color: #0c477f;
    position: fixed;
    width: 100%;
    z-index: 800;
	height:auto;
}

nav{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
	flex-wrap: wrap;
    margin-top: 10px;
}



.title{
    font-size:2.0Vmax;
    font-weight: 500;
    color: white;
    text-align: center;
    padding: 10px;
}

.logout{
    flex:.2;
    align-items: center;
    margin-top: 16px;
}
.fixed-bottom{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    background-color: #0c477f;
}

.main-area{
    margin: auto 10px;
    position: relative;
    padding: 8px;
    z-index: 80;
    top:130px;
}

.login-area{
    width:100%;
}

.card-head{
    background-color: #0c477f;
}

.card-head h5{
    font-size: 3Vmin;
}

.form-Edit{
    display: flex;
    flex-direction: column;
    row-gap: 0px;
}

.input-1,.input-2{
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.my-btn{
    width:45%;
    text-align: center;
    border: none;
    background-color: #0c477f;
    color: white;
    padding: 8px;
    border-radius: 4px;
    font-size: 2.2Vmin;
    font-weight: 600;
    transition: .3s;
    letter-spacing: .7px;
    align-self: center;
	margin-top:10px;
}

.my-btn:hover{
    transform: scale(1.1);
    cursor: pointer;
}.text-about{   text-align:justify;}

.btns{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;	
}

.image{
    /* border: 1px solid black; */
    padding: 5px;
    margin-top: 4px;
}


/* HTML: <div class="loader"></div> */
.loader {
    width: 80px;
    aspect-ratio: 1;
    display: grid;
    border-radius: 50%;
    background:linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
      linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    animation: l23 1s infinite steps(12);
    position: absolute;
    left: 50%;
    top: 35%;
    z-index: 1000;
}
.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    border-radius: 50%;
    background: inherit;
    opacity: 0.915;
    transform: rotate(30deg);
}
.loader::after {
     opacity: 0.83;
     transform: rotate(60deg);
}

.show-message{
    width:100%;
    text-align: center;
    padding: 8px;
    letter-spacing: .75px;
}

@keyframes l23 {
    100% {transform: rotate(1turn)}
}


/* Media Query */
@media screen and (max-width:770px){
    .title{
        font-size:1.7Vmax;
    } 
    .top-nav{
		height:25vh;
	}
    nav{
	
        padding: 10px;
        column-gap: 10px;
    }
    .top-nav{
        height:26vh;
    }
    .main-area{
        padding: 14px;
        height: 100vh;
    }   .rw-gap{	row-gap:20px;    }
}

@media screen and (max-width:500px) {
    .logout{
        display: none;
    }
    .title {
        font-size: 1.7Vmax;
    }
    .my-btn{
        font-size: 1.3Vmax;	width:90%;
    }
    .main-area{
        top:170px;
    }	    .rw-gap{	row-gap:20px;    }    .btns{	flex-direction:column;	row-gap:10px;     }	     .table-class-over{	overflow-x:scroll;     }
 
}@media screen and (max-width:800px) {    .my-btn{        font-size: 1.3Vmax;	width:90%;    }	    .btns{	flex-direction:column;	row-gap:10px;     }	 }@media screen and (max-width:1000px) {    .logout{        display: none;    }    .my-btn{        font-size: 1.4Vmax;    }    .main-area{        top:250px;    } }
@media screen and (min-height:1200px) {
    .main-area{
        top:380px;
    }
    
}