@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 

.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

 
body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
    font-size: 15px;
}

main{
    font-family: "Noto Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.form-group label{
    font-family: "Roboto", sans-serif;
    font-weight: 600;  
    text-transform: uppercase;
    font-size: 13px;
}

.cardMedia .card .img-wrapper {
    position: relative;
    overflow: hidden;
    height: 150px;
}

.cardMedia .card .img-wrapper img {
    transition: transform .2s ease-in-out;  
    height: 100%;
}

.cardMedia .card:hover .img-wrapper img {
  transform: scale(1.2);
}

.cardMedia .card .img-wrapper i {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 120px;
}

.cardMedia .card .card-body p.card-text {
  font-size: 13px !important;
  min-height: 30px;
  max-height: 30px;
  text-overflow: ellipsis; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  margin-bottom: 0;
  overflow: hidden;
}

.media-browse .card .img-wrapper {
    position: relative;
    overflow: hidden;
    height: 100px;
}

.media-browse .card .img-wrapper img {
    transition: transform .2s ease-in-out;
    transform: scale(1.3);
}


.media-browse .card:hover .img-wrapper img {
  transform: scale(1.2);
}

.media-browse .card .img-wrapper i {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 120px;
}
.media-browse .card .card-body p.card-text {
  font-size: 12px !important;
  min-height: 30px;
  max-height: 30px;
  text-overflow: ellipsis; 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
  margin-bottom: 0;
  overflow: hidden;
}

.media-browse .card .card-footer button{
  font-size:13px;
  padding: 2px 10px;
}

.media-browse .nav .nav-link{
  color: #282828;
  border-bottom: 2px solid #282828;
}

.media-browse .nav .nav-link.active{
  color: #ffffff;
  border-bottom: 2px solid #006ddf;
}


.media-browse .btn-upload { 
  background-color: #007bff; 
  color: white; 
  display: flex; 
  text-align: left;
  justify-content: center; 
  font-size: 14px;
  position: relative;
  min-width: 180px;
} 

.media-browse .btn-upload:hover { 
  background-color: #0069d9; 
  color: white; 
}
.media-browse .btn-upload .icon1 { 
  margin-right: 5px; 
  padding-top: 3px;
} 
.media-browse .btn-upload .icon2 {
  width: 20px;
  position: absolute;
  right: 0;
  height: 34px;
  padding: 10px 10px 0 10px;
  margin-right: 15px;
  margin-top: -7px;
  border-left: 1px solid #005fb1;
} 
  
.media-browse input[type="file"] { display: none;}

input[readonly]{
  background-color: #c0c0c0; /* Warna latar belakang abu-abu terang */
  color: #666;              /* Warna teks lebih gelap/redup */
  cursor: not-allowed;      /* Menunjukkan bahwa tidak bisa diubah */
  border: 1px solid #ccc; 
}