body {
  font-size: 0.95rem;
}

.isi {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */


  }
  
 iframe {
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 350px;
    width: 60%;
    margin-inline: auto;
  }

iframe.berkas_berita_pengumuman {
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 600px;
  width: 100%;
  margin-inline: auto;
}

  /* Then style the iframe to fit in the container div with full height and width */
  @media only screen and (max-width: 600px) {
iframe {
        position: relative;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 300px;

      }
    
  }



  .bootlogin {
    background-image: url("/asset/img/bootlogin.jpg");
    background-size: contain;
    background-repeat: no-repeat;

  }

  .kotak-luar {
    width: 500px;
    height:100vh;
    background-color: aqua;
    margin-left: 20px;
    margin-bottom: 0;
    margin-top: 0;
  }

  /* CSS For Website*/
  .navbar-white { 
    background-color: #2096ba !important 
  }

.content {
  background-color: white !important;
}

/* Box Sambutan Kepsek */
.box {
  /* display: flex; */
  margin: auto;
  width: 100%;
  min-height: 100px;
  /*background: #FFFFFF;*/
  box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.25);
  border-radius: 29px;
}

.lingkaran {
   /*position: relative; */
  max-width: 150px;
  max-height: 150px;
  border-radius: 100%;
  /*background: #C4C4C4;*/
}

.kepsek {
  /*position: absolute; */
  max-width: 150px;
  max-height: 150px;
  box-shadow: 0px 5px 15px 2px rgba(0, 0, 0, 0.25);
  border: 2px black solid;
  /*left:100px;*/
}

/*End Box Sambutan Berita */
.box-berita {
  margin: auto;
  width: 100%;
  min-height: 100px;
  background: #FFFFFF;
  box-shadow: inset 0px 4px 19px 1px rgba(0, 0, 0, 0.25);
}

.atas {
  margin-top: 50px;
}
  
/* gallery */
.splide__slide img {
  width: 100%;
  height: auto;
}

.kecil {
  font-size: 0.8em;
}

/* google maps */
.google-maps {
  position: relative;
  padding-bottom: 75%; 
  height: 0;
  overflow: hidden;
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

.pembatas {
  width: auto;
  height: 5px;
  background-color: #df6e21;
}

.garis-bawah {
  text-decoration: underline red;
}

.garis-vertikal{
  border-left: 1px black solid;
  height: 170px;
  width: 0px;
  }

.warna {
  color: white;
}


#preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #e2e2e2 none repeat scroll 0% 0%;
}
.socket {
  position: relative;
  top: 40%;
  width: auto;
  height: auto;
  margin: auto;
  display:block;
}
.socket img{
display:block;
margin:auto;
}
.container-preload{
text-align:center;
padding-top:100px;
}

.tombol_up {
  position: fixed;
  top: 80px;
  right: 0;
}

/* ------- CARD PADA V_KELAS START --------*/
.judulcard-kelas {
  background-image: linear-gradient(125deg, #10e4f3, #19b687);
}

.class-card {
  background-image: linear-gradient(125deg, #2ab1ff38, #ffffff88);
}

.class-card, p {
 z-index: 1;
}

.cardlist {
transition: 0.3s;
top: 0;
}

img.img-class {
 width: 3rem;
 position: absolute;
 right: 5%;
 bottom: 8%;
 z-index: -1;
 opacity: 0.9;
}

.cardlist:hover {
  top: -3%;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgba(35, 57, 68, 0.959);
  /* box-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; */
}

/* ----------- CARD PADA V_KELAS END ----------------*/


/* ---------- CARD PADA V_FORUM KELAS START ----------- */

.box-pertemuan {
    /* border: 1px solid rgba(0, 0, 0, 0.144); */
  position: relative;
  width: auto;
  border-radius: 15px;
  padding: 8px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.575);
  background-image: linear-gradient(125deg, #2090d180, #ec3fa442);
  z-index: 1;

}

.box-pertemuan::before {
  position: absolute;
  border-radius: 15px;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* background-image: linear-gradient(125deg, #5db6e9e5, #ac267488); */
  background-image: linear-gradient(125deg, #3cb4fa, #89f54be0);
  z-index: -1;
  transition: opacity 0.2s linear;
  opacity: 0;
}

.box-pertemuan:hover::before {
opacity: 1;
  /* background-image: linear-gradient(125deg, #72f378dc, #f88f8fec); */
}


.pertemuan-ke {
  /* border: 1px solid black; */
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  text-align: center;
  line-height:2.3rem ;
  background-color: rgb(255, 255, 255);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.377);
}

/* ---------- CARD PADA V_FORUM KELAS END ----------- */



/* --------DESIGN KELAS DARING START ------------- */
.kelas-online{
  background-image: url('/asset/img/bg-class1.png');
  /* background-image: linear-gradient(125deg, #3cb4fa, #89f54be0); */
}
/* --------DESIGN KELAS DARING END ------------- */



/* forumKelas Guru Detail Pertemuan start */
.tampil-detail {
  display: none;
  padding: 7px;
  position: absolute;
  top: -30px;
  left: 70px;
  height: auto;
  width: auto;
  background: rgb(255, 255, 255);
  z-index: 999;
  box-shadow:0px 0px 9px 0px rgba(50, 50, 50, 0.75);
  border-radius: 5px;
}


/* kotak jadwal */
.kotak-jadwal {
  border: 1px rgb(0, 0, 0, 0.315) solid;
  border-radius: 10px;
  padding: 5px;
  position: relative;
}

.nama-kotak-mapel {
 position: absolute;
 top: -13px;
 left: 15px;
 background-color: white;
 color: red;
}


/* kotak jadwal end */