/* PITA CARD` */

/* source :
https://medium.com/@so_deep.dev/ribbon-style-badge-for-cards-with-css-5c9da53d908e */

:root {
  --red-pustaka: #f0242c;
  --cyan-pustaka: #3fcdc7;
  --green-pustaka: #41cf2e;
  --blue-pustaka: #2282ff;
}

.img-zoom:hover {
  transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.img-zoom {
  /* padding: 10px; */
  /* background-color: green; */
  transition: .5s; /* Animation */
  /* width: 200px;
  height: 200px; */
  margin: 0 auto;
  /* overflow: hidden !important; */
  /* position: relative !important; */
}

.gallery {
  border: #ffffff solid 1px;
  padding: 0px;
  padding-left: 0;
  padding-right: 0;
}


.card{
  border-radius: 1rem;
  background: white;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.15);
  position : relative;
  color: #434343;
  margin-bottom: 20px;
}

.card .card__container{
    padding : 2rem;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 1rem;
    position: relative;
    font-size: 13px;
  }



*, *::before, *::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  

.card::before{
    position: absolute;
    content: '';
    /* background: #f0242c; */
    background: var(--bg-color);
    height: 28px;
    width: 28px;
    top:29px;
    right:-8px;
    transform : rotate(45deg);
  }

  .card::after{
    position: absolute;
    content: attr(data-label);
    top: 7px;
    right: -14px;
    padding: 0.5rem;
    width: 10rem;
    /* background: #f0242c; */
    background: var(--bg-color);
    color: white;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size:13px;
    box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2);
  }

  .card .card__container{
    padding : 2rem;
    width: 100%;
    height: 100%;
    background: white;
    border-radius: 1rem;
  }

  .card .card__header{
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-family: 'Playfair Display', serif;
  }
  
  .card .card__body{
    font-family: 'Roboto', sans-serif;
  }
  
  .card .card__cardfooter{
    box-sizing: border-box;
  }

  .card__footer .d-grid .btn{
    font-size: 13px;
  }

  .zoomover {
    box-shadow: 4px 4px 15px rgba(26, 35, 126, 0.2);
  }

  .card, .zoomover {
    transition: transform 0.3s; /* Menentukan durasi transisi */
  }
  
  .card:hover, .zoomover:hover {
    transform: scale(1.05); /* Memperbesar elemen card saat dihover */
  }

  /* PITA PEMBATAS HALAMAN */
  .page-divider {
    position : relative;
    height: 33px;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    font-weight: bold;
  }
  
  .warna-red{
    background: var(--red-pustaka);
  }

  .warna-cyan{
    background: var(--cyan-pustaka);
  }

  .warna-green{
    background: var(--green-pustaka);
  }

  .warna-blue{
    background: var(--blue-pustaka);
  }

  /* DIV SEBAGAI ANCHOR */
  .anchor-div {
    cursor: pointer;
}

/* DASHBOARD.START */

.dashboard{
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  font-family: var(--bs-font-sans-serif);
  min-height: 500px;
}

.dashboard a{
  color: black;
}

.dashboard .nav-link a{
  color: white;
}

.dashboard .nav-link{
  padding-top: 5px;
  color: white;
}

.dashboard .nav-link .feather{
  padding-bottom: 5px;
}

.large-icon{
  font-size: 48px;
  color: #68A4C4;
}

.judul-buku{
  font-size : 28px;
  font-weight: bold;
}

.pembaca_artikel{
  font-family : "Open Sans", sans-serif;
  line-height : 24px;
  font-size: 15px !important;
  color: #444;
  text-align: justify;

}

/* UNTUK RECENT POST SIDEBAR */
.recent-post-div{
  display: flex;
  align-items: center;
  cursor: pointer;
}

.recent-post-img{
  margin-left: 20px;
  margin-right: 6px;
  width: 80px;
  transition: transform 0.2s;
}

.recent-post-img:hover{
  transform: scale(1.1);
}


.recent-post-div .p1{
  font-weight: bold;
}

.recent-post-div .p2{
  font-weight: normal;
}

.recent-text{
  display: flex;
  flex-direction: column;
}

/* untuk file box  */
.file-box {
  width: 100%;
  height: 40px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding-left: 5px;
  padding: 10px;
  margin-bottom: 5px;
}

.file-name {
  font-size: 13px;
  color: #333;
}




/* DASHBOARD.END */