/* 
<========= Google Fonts =========>
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

/* 
<========= Documents =========>
*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  font-family: "Poppins";
}

/* 
<========= Body =========>
*/
body {
  width: 100vw;
  height: 100vh;

  overflow: hidden;
}

/* 
<========= Scrollbar =========>
*/
::-webkit-scrollbar {
  width: 8px;
  box-shadow: inset 0.1px 0.1px 3px rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-corner {
  border: 1px solid black;
}

::-webkit-scrollbar-button {
  display: none;
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.4);
}

/* 
<========= Form =========>
*/
label {
  font-size: 14px;
}

input {
  padding: 2px 6px;
  width: 322px;

  font-size: 14px;
  letter-spacing: 0.4px;
}

select {
  padding: 2px 6px;

  font-size: 14px;
  letter-spacing: 0.4px;
}

/* 
<========= Container =========>
*/
.container {
  width: 100%;
  min-height: 100%;

  display: flex;
}

/* 
<========= Sidebar Section =========>
*/
#sidebar {
  padding: 28px 0;
  width: 14%;

  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;

  border-right: 1px solid rgb(20, 90, 135);
  background: rgb(30, 125, 185);
}

#sidebar img {
  width: 40%;
}

.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  text-align: center;
}

.menu a {
  padding: 8px 18px;
  width: 100%;

  border-radius: 6px;
  background: rgba(0, 180, 250, 0.4);

  color: white;
  font-size: 12px;
  text-decoration: none;
  letter-spacing: 0.4px;
}

.menu a:hover {
  background: rgba(0, 180, 250, 0.8);
}

/* 
<========= Main Section =========>
*/
#main {
  padding: 32px;
  width: 86%;
  height: 100vh;

  overflow-y: scroll;

  background: rgb(245, 245, 245);
}

.filter-data {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.filter-data label {
  color: rgb(20, 90, 135);
  font-size: 14px;
}

.filter-data select {
  outline: none;
  border: 1px solid rgb(20, 90, 135);
  border-radius: 6px;

  color: rgba(0, 0, 0, 0.8);
  font-size: 14px;
}

.filter-data select:focus {
  box-shadow: 0 0 3px 0.1px rgb(30, 125, 185);
}

td {
  padding: 0 18px 6px 0;
  font-size: 16px;
}

#tabel-data-siswa {
  cursor: default;
  width: 100%;

  border-collapse: collapse;
  background: white;

  text-align: center;
  letter-spacing: 0.2px;
}

#tabel-data-siswa tr:nth-child(odd) {
  background: rgba(30, 125, 185, 0.15);
}

#tabel-data-siswa th,
#tabel-data-siswa td {
  padding: 8px 12px;

  border: 1px solid rgb(20, 90, 135);

  font-size: 12.5px;
}

#tabel-data-siswa th {
  color: rgb(20, 90, 135);
}

#tabel-data-siswa tr td img {
  max-width: 200px;
}

.btn {
  cursor: pointer;
  padding: 4px 12px;

  border: none;
  border-radius: 6px;
  background: rgb(30, 125, 185);

  color: white;
  text-decoration: none;
}

.btn:hover {
  background: rgba(30, 125, 185, 0.8);
}

.btn-red {
  background: rgb(255, 110, 110);
}

.btn-red:hover {
  background: rgba(255, 100, 100, 0.8);
}


.btn-logout {

  width: 10%;
  position: absolute;
  left: 2%;
  bottom: 5%;
  color: white;
  cursor: pointer;
  padding: 4px 20px;

  border: none;
  border-radius: 6px;

  background: rgb(209 0 0 / 80%) !important;
}



/* bukti form */
form label.labelinputbukti {
  background-color: rgb(9, 130, 0);
  color: white;


  padding: 4px 8px;
  border-radius: 5px;
}

form a.downloadbukti {
  text-decoration: none !important;
  background-color: rgb(29, 104, 217);
  color: white;


  padding: 4px 8px;
  border-radius: 5px;
}

/* button.absensidetail {

  border: none;
}

button.absensidetail a {

  text-decoration: none;
  color: white !important;
  background-color: rgb(7, 13, 96);


  padding: 4px 8px;
  border-radius: 5px;
} */