body{padding:0; margin:0; border:none; font-family:arial;}


.tmnav{
    cursor:pointer;
    position:fixed;
    top:10px;
    left:10px;
    z-index:100;
    font-size:30px;
	display:none;;
}

.side{ width:20%; height:100vh; background:#690; position:fixed; left:0px; top:0px;}
.cari{width:90%; height:30px; border-radius:10px; outline:none; text-align:center; margin:5%;}
.main{ width:80%; height:100vh; background:#F0F0F0; position:fixed; right:0px; top:0px; overflow:scroll;}
.header{ width:100%; height:130px; color:#fff; font-weight:bold; background:#345; display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;}

.tomnav{ width:90%; height:40px; float:left; background:#F0F0F0; margin:5%; border-top-right-radius:100px; border-bottom-right-radius:100px;}

.pnlds{ width:100%; height:50%; background:none; display:flex; align-items: center;
    justify-content: space-evenly;}
	
.pnlinfo{
	width: 30%;
    height: 120px;
    background: #fff;
    display: flex;
    border-top: 5px solid #06F;
    box-shadow: 0px 0px 26px -12px #333;
    border-radius: 10px;
    outline-style: none;
    border: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	}
.pnlinfotex{width: 50px;
    height: 50px;
    background: #690;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    color: #fff;
	}
.jml{
	height: 40px;
    background:#690;
    display: flex;
    align-items: center;
    padding: 0px 15px;
	color:#fff;
	font-weight:bold;
	justify-content: center;
	}
	

.frmtbl{
	width: 100%;
    overflow: scroll;
    padding: 0% 2% 2% 0%;}
.tblsis{font-size:12px; width:80%; float:left;}

.pnlsis{position: relative;
    width: 48%;
    height: 150px;
    float: left;
    background: #fff;
    margin: 1%;
    border-radius: 10px;
    box-shadow: 0px 5px 1px 1px #ccc;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    align-items: center;}
.nom{position:absolute; z-index:9; padding:1%; background:#690; color:#fff;}
.gmb{width:20%; height:100%; float:left;}


/* LOGIN PAGE*/
.bdlog{
	width: 100%;
    height: 100vh;
    background:linear-gradient(rgba(102,153,0,.5), rgba(102,153,0,.9)),
        url("../bg.jpg");
    display: flex;
    align-items: center;
    justify-content: space-around;
	}
.pnllog{width: 50%;
    height: 400px;
    background: #345;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
	border-radius:20px;}
.inplog{ width:90%; height:30px; border:none; border-bottom:1px solid #333; margin-bottom:5%; border-radius:10px; text-align:center;}
.tomlog{ width:50%; height:40px; background:#09F; color:#fff; border-radius:10px; border:none; cursor:pointer;}
.slog{font-size:10px; color:#fff; margin-bottom:5%; text-align:center;}




/* DETAIL SISWA */
.pgsis{width: 100%;
    height: 100vh;
    background: green;
    display: flex;
    align-items: center;
    justify-content: space-around;}
	
.cardsis{width:90%; height:100vh; background:#fff; border-radius:5px; position:relative;}
.cardhead{ width:100%; height:100px; background:none;}
.cardimg{ width:15%; height:100%; background:none; float:left;}
.imgcard{ border-radius:none;}
.cardlog{ width:70%; height:100%; background:none; text-align:center; float:left;}
.cardft{width:15%; height:100%; background:none; float:left;}
.carddt{ width:100%; height:100%; background:#ccc; float:left;}


/*TABLE BAYAR*/
.tblby{ font-size:11px;}
th, td {
      padding: 5px 15px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    /* Header styling */
    th {
		
      background-color: #2c3e50;
      color: white;
    }

    /* Zebra striping - targets every second row */
    tbody tr:nth-child(even) {
      background-color: #DFDFFF;
    }

    /* Optional: Highlight row on hover */
    tbody tr:hover {
      background-color: #ccc;}

.frmtblby{ width:98%; height:auto; overflow:scroll;}


/*RESET PAGE*/
.frmps{
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    
}
.resps{
    width:100%;
    height:auto;
    background:#234;
    color:#fff;
    padding: 10px 0px;
}
.inpem{height: 30px;
    width: 50%;
    border-radius: 10px;
    text-align: center;}

.tomrsp{
    width: 25%;
    height: 35px;
    border-radius: 10px;
    background: #95bb00;
    color: #fff;
    border: none;
    cursor: pointer;
}





@media only screen and (max-width: 800px) {
	

.tmnav{
    cursor:pointer;
    position:fixed;
    top:10px;
    left:10px;
    z-index:100;
    font-size:30px;
	display:block;
}

.side{
    width:100%;
    height:100vh;
    background:#690;
    position:fixed;
    left:-100%;      /* sembunyikan */
    top:0;
    z-index:99;
    transition:left .3s ease;
}
	
.main{
	width: 90%;
    height: 85vh;
    background: #F0F0F0;
    position: fixed;
    right: 0px;
    top: 50px;
    padding: 5%;}
	
.side.show{
    left:0;          /* tampil */
}
	

.cari{width:90%; height:30px; border-radius:10px; outline:none; text-align:center; margin:5%;}	
	
.header{ width:100%; height:130px; color:#fff; font-weight:bold; background:#234; display: flex;flex-direction: column;align-items: center;justify-content: space-evenly;}

.tomnav{ width:90%; height:40px; float:left; background:#F0F0F0; margin:5%; border-top-right-radius:100px; border-bottom-right-radius:100px;}

.pnlds{ width:100%; height:50%; background:#F0F0F0; display:flex; align-items: center;
    justify-content: space-evenly;}
	
.pnlinfo{
	width: 30%;
    height: 120px;
    background: #fff;
    display: flex;
    align-items: center;
    border-top: 5px solid #06F;
    border-radius: 10px;
    flex-direction: column;
    justify-content: center;
	}

.frmtbl{width: 100%;
    overflow: scroll;
    padding: 0% 2% 5% 0%;}

.tblsis{font-size:14px; width:70%; float:left; padding-left:1%;}

.pnlsis{position:relative; width:98%; height:150px; float:left; background:#fff; margin:1%; border-radius:10px; box-shadow:0px 5px 1px 1px #ccc; overflow:scroll;}
.nom{position:absolute; z-index:9; padding:1%; background:#690; color:#fff;}
.gmb{width:30%; height:100%; float:left;}



	
/* LOGIN PAGE*/
.bdlog{width: 100%;
    height: 100vh;
    background: #690;
    display: flex;
    align-items: center;
    justify-content: space-around;}
.pnllog{width: 80%;
    height: 400px;
    background: #345;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;}
.inplog{ width:90%; height:30px; border:none; border-bottom:1px solid #333; margin-bottom:5%; border-radius:10px; text-align:center;}
.tomlog{ width:50%; height:40px; background:#09F; color:#fff; border-radius:10px; border:none; cursor:pointer;}
.slog{font-size:12px; color:#fff; margin-bottom:5%; text-align:center;}


/*TABLE BAYAR*/
.tblby{ font-size:14px;}
th, td {
      padding: 5px 15px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    /* Header styling */
    th {
		
      background-color: #2c3e50;
      color: white;
    }

    /* Zebra striping - targets every second row */
    tbody tr:nth-child(even) {
      background-color: #DFDFFF;
    }

    /* Optional: Highlight row on hover */
    tbody tr:hover {
      background-color: #ccc;}

.frmtblby{ width:98%; height:auto; overflow:scroll;}

/*RESET PAGE*/
.frmps{
    width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    
}
.resps{
    width: 100%;
    height: auto;
    background: #234;
    color: #fff;
    padding: 10px 0px;
    font-size: larger;
}
.inpem{height: 50px;
    width: 90%;
    border-radius: 10px;
    text-align: center;}

.tomrsp{
    width: 50%;
    height: 56px;
    border-radius: 10px;
    background: #6f8b00;
    color: #fff;
    border: none;
    cursor: pointer;
}

	
	
}