.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  body {
    user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none
  }
  .body{
    background: url(../bg1.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #fff;
  }
  .preloader .loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-family: "Inter", sans-serif;
  font-size: 14px;
  }
  .sel select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  }
  .editor-output{
    background-color: white !important;
  }
  .opacity{
    background: rgba(0, 0, 0, 0.2) !important;
    color: white !important;
  }
  .opacity1{
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border: none;
  }
  .opacity1::-webkit-input-placeholder{
    color: white !important;
  }
  .btn-login{
    margin-top: 150px !important;
  }
  .number::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  .number[type=number] {
    -moz-appearance: textfield;
  }
  .href{
    text-decoration: none !important;
  }
  .text-black{
    color: black;
  }
  .mouse{
    text-decoration: none;
    color: white;
  }
  .mouse:hover{
    text-decoration: none;
    color: #afafaf;
  }
  .konfir{
    background-color: #1BC487;
    width: 180px;
  }
  .konfir:hover{
    background-color: #27d897;
  }
  .konfir1{
    background-color: #18AE78;
  }
  .konfir1:hover{
    background-color: #1BC487;
  }
  .profilover a{
    text-decoration: none;
  }
  .profilover label{
    color: black;
    /*font-weight: bold;*/
  }
  .profilover{
    background-color: #F5F5F5;
    color: black;
  }
  .profilover:hover{
    background: rgb(201, 0, 0);
    color: black;
  }
  .profilover:hover label{
    color: white;
  }
  .new-pass{
    border: none;
    border-bottom: 2px solid #1BC588;
  }
  #mapa {
    width:100%; 
    height:200px; 
    border:5px 
    solid #DEEBF2;
  }
  .map{
    width:100%; 
    height:350px !important; 
    border:5px 
    solid #DEEBF2;
  }
  .center{
      text-align: center;
  }
  .view{
    border: none;
    border-bottom: 2px solid #1BC588;
    background-color: white !important;
  }
  .header-post{
    margin-top: 25px;
    width: 100%;
  }
  .header-post label{
    margin-top: -5px;
    margin-bottom: -5px;
  }
  .li-active:active{
    font-weight: bold;
  }
  .bg-color{
    background-color: #c90000;
  }
  @media (min-width: 768px) {
    .bd-placeholder-img-lg {
      font-size: 3.5rem;
    }
    .img{
      width: 740px;
      height: 40px;
    }
    .img1{
      height: 32px;
    }
    .margin{
      margin-top: 25px;
    }
    .dis{
      display: none;
    }
    .image-upload > input{
      display: none;
    }
    .image-upload > label img{
      display: none;
    }
    .image-upload{
      z-index: 999;
      margin-top: -50px;
    }
    .image-upload label{
      width: 90px;
      height: 25px;
      border-radius: 10% 0 100% 100%;
      color: white;
    }
    .image-upload label:hover{
      background: rgb(0, 0, 0, 0.4);
      color: #00c44b;
    }
    .img-upload > input{
      display: none;
    }
    .img-upload > label img{
      display: none;
    }
    .img-upload > label label{
      width: 150px;
      background: rgb(0, 0, 0, 0.6);
      color: white;
    }
    .img-upload label label:hover{
      width: 150px;
      color: #00c44b;
    }
    .img-upload{
      margin-left: 780px;
      margin-top: -35px;
      margin-bottom: -1px;
    }
    .img-upload1{
      margin-top: -55px;
      margin-right: 15px;
    }
    .img-upload1 div{
      width: 160px;
      background: rgb(0, 0, 0, 0.6);
      color: white;
    }
    .img-upload1 div:hover{
      width: 160px;
      background: rgb(0, 0, 0, 0.8);
    }
    .img-upload1 i{
      margin-top: 10px;
    }
    .img-upload2{
      margin-top: -80px;
      margin-right: -135px;
    }
    .img-upload2 label label{
      width: 31px;
      height: 31px;
      background: rgb(0, 0, 0, 0.6);
      color: white;
    }
    .img-upload2 label label:hover{
      width: 31px;
      height: 31px;
      background: rgb(0, 0, 0, 0.8);
    }
    .img-upload2 i{
      margin: 7px;
    }
    .mb{
      margin-bottom: 8px;
    }
    .img-iklan{
      width: 110%;
      height: 100px;
      margin-left: -10px;
      border-radius: 5%;
    }
    .img-iklan1{
      width: 110%;
      height: 100px;
      margin-left: -10px;
      border-radius: 5%;
    }
    .label-iklan{
      width: 110%;
      height: 100px;
      margin-top: -101px;
      margin-left: -10px;
      text-align: center;
    }
    .label-iklan label{
      box-shadow: inset 0 0 80px #000000;
      width: 100%;
      height: 101px;
      padding-top: 75px;
      border-radius: 5%;
      color: white;
    }
    .label-iklan label:hover{
      box-shadow: inset 0 0 80px white;
      width: 100%;
      height: 101px;
      border-radius: 5%;
      font-weight: bold;
      color: black;
    }
    .m-all{
      margin-bottom: -10px;
    }
    .iklan div{
      display: none;
    }
    .iklan1 div img{
      margin-left: -20px;
      width: 400px;
      height: 117px;
      margin-bottom: -10px;
    }
    .iklan-h img{
      width: 100%;
      height: 240px;
    }
    .lain{
      height: 40px;
      margin-bottom: -20px;
    }
    .wid{
      width: 180px;
    }
    .obat{
      width: 400px;
      height: 380px;
    }
    .bg-profil{
      width: 100%;
      height: 400px;
    }
    .bg-profil1{
      width: 100%;
      height: 400px;
      margin-bottom: 20px;
    }
    .profil {
      margin-top: -220px;
    }
    .profil img{
      border-radius: 50%; 
      width: 170px; 
      height: 170px; 
      border: 5px solid #fff !important;
    }
    .angkatan img{
      border-radius: 50%; 
      width: 170px; 
      height: 170px; 
      border: 5px solid #000 !important;
    }
    .angkatan font{
      text-align: center;
      width: 120%;
      height: 55px;
      color: black;
    }
    .angkatan font:hover{
      width: 120%;
      height: 55px;
      color: red;
    }
    .edit-profil{
      width: 150px;
      margin-right: 30px;
      margin-top: -45px;
      background: rgb(1, 1, 1, 0.6);
      color: white;
      text-decoration: none;
    }
    .bottom-fixed{
      display: none;
    }
    .bottom-fixed1{
      display: none;
    }
    .header label{
      margin-top: 2px;
      margin-bottom: -1px;
      font-size: 30px;
      font-family: "Inter", sans-serif;
    }
    .header img{
      margin-top: -10px;
      width: 40px;
    }
    .table-hover1{
      height: 290px;
    }
    .table-hover1 div{
      margin-right: -4px;
      margin-left: -4px;
    }
    .table-hover1 div div img{
      width: 100%;
      height: 160px;
      margin-top: 3px;
    }
    .table-hover1:hover{
     background: rgba(245, 245, 245, 0.6);
     margin-top: 13px !important;
     border: none; 
   }
   .table-hover2{
    background: rgba(173, 173, 173, 0.9);
    opacity: 0.5;
    height: 290px;
  }
  .table-hover2 div{
    margin-right: -4px;
    margin-left: -4px;
  }
  .table-hover2 div div img{
    width: 100%;
    height: 160px;
    margin-top: 3px;
  }
  .table-hover2:hover{
   margin-top: 13px !important;
   border: none; 
 }
 .margin-bottom{
  height: 293px;
}
.margin-bottom1{
  display: none;
}
.produk{
  height: 250px;
}
.produk1{
  height: 270px;
}
.buka{
  margin-top: -160px;
  margin-bottom: 122px;
  text-align: right;
  color: white;
  font-weight: bold;
}
.buka label{
  box-shadow: inset 0 0 35px #00b02f;
  padding: 4px;
}
.buka1{
  margin-top: -160px;
  margin-bottom: 122px;
  text-align: right;
  color: white;
  font-weight: bold;
}
.buka1 label{
  box-shadow: inset 0 0 35px #ff0000;
  padding: 4px;
}
.header-post1{
  margin-top: -5px;
  margin-bottom: -5px;
  width: 100%;
}
.bg-toko{
  margin-top: 10px;
  width: 100% !important;
  height: 140px !important;
}
.bg-toko1{
  margin-left: 143px;
  margin-top: -165px;
  border-radius: 50%; 
  width: 95px; 
  height: 95px; 
  border: 5px solid #fff !important;
}
.btn-filter label{
  width: 20%;
  height: 35px;
  text-align: center;
  border: none;
  background-color: #f5f5f5;
  font-weight: bold;
}
.btn-filter label:hover{
  color: #00c948;
  border-bottom: 2px solid #00c948;
}
.filter{
  width: 100%;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}
.filter1{
  width: 100%;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
}
.pr-toko{
  background-color: #f5f5f5;
  height: 160px;
  margin-top: -15px;
  margin-bottom: -15px;
}
.pr-toko1{
  background-color: #f5f5f5;
  height: 160px;
  margin-top: -15px;
  margin-bottom: -15px;
}
.pr-toko1 div label{
  padding-top: 6px;
  font-weight: bold;
}
.pr-rute{
  background-color: #f5f5f5;
  height: 160px;
  margin-top: -15px;
  margin-bottom: -15px;
}
.pr-rute1{
  background-color: #f5f5f5;
  height: 160px;
  margin-top: -15px;
  margin-bottom: -15px;
}
.pr-rute1 div label{
  padding-top: 6px;
  font-weight: bold;
}
.pr-toko2{
  border-top: 1px solid grey;
}
.btn-back{
  display: none;
}
.rute{
  height: 600px !important;
  margin-top: 20px;
}
.btn-profil{
  margin-top: 34px;
  margin-bottom: -10px;
}
.btn-profil label{
  background: rgb(1, 1, 1, 0.6);
  width: 100%;
  height: 30px;
  color: white;
  text-align: center;
  font-weight: bold;
}
.btn-profil label:hover{
  background: rgb(1, 1, 1, 0.5);
  color: white;
  font-weight: bold;
}
.btn-profil1{
  margin-top: -21px;
  margin-bottom: -10px !important;
}
.btn-profil1 input{
  background: rgb(1, 1, 1, 0.6);
  width: 100%;
  height: 30px;
  color: white;
  text-align: center;
  font-weight: bold;
  border: none;
}
.btn-profil1 input:hover{
  background: rgb(1, 1, 1, 0.5);
  color: white;
  font-weight: bold;
}
.laporan select{
  width: 116px;
  height: 30px;
  font-size: 14px;
}
.laporan1 select{
  width: 100px;
  height: 30px;
  font-size: 14px;
}
.filter-btn div{
  height: 30px;
  width: 30px;
}
.filter-btn i{
  margin-left: -5px;
}
.urut label{
  margin-top: 8px;
}
.margin1{
  margin-top: 25px;
  margin-bottom: -20px;
}
.preloader1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #c90000;
}
.preloader1 .loading1 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-family: "Inter", sans-serif;
  font-size: 14px;
}
.loading1 img{
  width: 50%;
}
.load1 h1{
  position: absolute;
  left: 51%;
  bottom: 7%;
  transform: translate(-50%,-50%);
  font-family: "Inter", sans-serif;
  font-size: 21px;
  color: #131313;
}
.load1 img{
  position: absolute;
  left: 51%;
  bottom: 0px;
  transform: translate(-50%,-50%);
  width: 10%;
}
.m-menu{
  margin-top: 10px;
  background-color: #f5f5f5;
}
.m-menu i{
  margin-top: 8px;
}
.m-menu label{
  color: black;
  font-weight: bold;
  margin-left: 10px;
}
.m-menu label:hover{
  color: red;
}
.materi{
  background-color: #f5f5f5;
}
.materi object{
  width: 100%;
  height: 500px;
}
.time{
  color: red;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
}
.icon{
  margin-top: 50px;
  margin-bottom: -140px;
}
.tutorial iframe{
  width: 100%;
  height: 500px;
}
.tutorial label{
  font-size: 24px;
}
.text-editor textarea, iframe {
  border: 2px solid #ddd !important;
  height: 500px !important;
  width: 100% !important;      
}
.text-editor table{
  width: 100% !important;
  background-color: red !important;
}
.text-editor tr :hover{
  background-color: #c90000 !important;
}
.text-editor label{
  color: white !important;
  font-weight: bold !important;
  font-size: 24px !important;
  margin-top: 5px !important;
}
.berita span{
  font-size: 24px;
}
.berita1 img{
  width: 100%;
  height: 100px;
}
.berita2 h1{
  font-size: 40px;
}
.berita2 img{
  width: 100%;
  height: 460px;
}
.img-hover-zoom {
  height: 300px;
  overflow: hidden;
  width: 80%;
  height: 180px;
}
.img-hover-zoom img {
  transition: transform .5s ease;
  width: 100%;
  height: 180px;
}
.img-hover-zoom:hover img {
  transform: scale(1.2);
}
.or1{
  margin-bottom: 10px !important;
}
.or3{
  margin-bottom: 10px !important;
}
.m-post{
  padding: 15px;
}
.m-post img{
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.m-post1 img{
  border-radius: 50%;
  width: 25px;
  height: 25px;
  border: 2px solid white;
  margin-left: -13px;
}
.m-post1 label{
  margin-top: 10px;
}
.m-like{
  width: 30px;
  transition: transform .5s ease;
}
/*.m-like label{
  transition: transform .5s ease-in-out;
  transform-origin: 100% 100;
}*/
.m-like:hover{
  transform: scale(1.2);
}
/*.m-like:hover label{
  transform: scale(1.2) translateY(15%);
}*/
.m-like1{
  width: 30px;
  transition: transform .5s ease;
}
/*.m-like1 label{
  transition: transform .5s ease-in-out;
  transform-origin: 100% 100;
}*/
.m-like1:hover{
  transform: scale(1.2);
}
/*.m-like1:hover label{
  transform: scale(1.2) translateY(15%);
}*/
.m-set{
    margin-bottom: 1px;
  }
  .geser{
    margin-top: -120px;
    margin-bottom: 2px !important;
  }
  .new-post textarea{
    resize:none;
    height:230px;
  }
  .comment textarea{
    resize:none;
  }
  .m-modal{
    top: calc(100% - 400px);
  }
  .m-modal1{
    top: calc(100% - 380px);
  }
  .m-comment{
    width: 10%;
  }
  .m-comment1{
    width: 15%;
  }
  .elipsis{
    width: 100% !important;
    margin-top: -5px;
  }
  
  .file_tugas{
    border-style: dashed;
    border-color: #dedede;
  }
  .file_tugas img{
    width: 20%;
  }
  .daftar img{
    width: 50%;
  }
  .daftar label{
    font-size: 24px;
  }
  .daftar1 label{
    font-size: 40px;
  }
  .ceklis img{
    border-radius: 50%;
    width: 16px !important;
    height: 16px !important;
    margin-top: -4px;
  }
  .ttd{
    border:solid 1px teal; 
    width: 300px; 
    border-radius: 10px; 
    border-color: gray; 
    height: 150px;
  }
  .hide-pass{
    width: 10px; 
    margin-top: -50px; 
    margin-left: 380px;
  }
}
@media (max-width: 768px){
  .hide-pass{
    width: 10px; 
    margin-top: -50px; 
    margin-left: 88%;
  }
  .ttd{
    border:solid 1px teal; 
    width: 300px; 
    border-radius: 10px; 
    border-color: gray; 
    height: 120px;
  }
  .ceklis img{
    border-radius: 50%;
    width: 13px !important;
    height: 13px !important;
    margin-top: -4px;
  }
  .d-materi{
    width: 112% !important;
    position: absolute !important;
    margin-top: 10px !important;
    margin-left: -53px;
  }
  .p-akun{
    width: 112% !important;
    position: absolute !important;
     margin-top: 4px !important;
    margin-left: -23px;
  }
  .p-detail{
    width: 112% !important;
    position: absolute !important;
    margin-top: 30px !important;
    margin-left: -33px;
  }
  .c-detail{
    width: 112% !important;
    position: absolute !important;
    margin-top: -17px !important;
    margin-left: -33px;
  }
  .c-anggota1{
    width: 112% !important;
    position: absolute !important;
    margin-top: -38px !important;
    margin-left: -53px;
  }
  .c-anggota2{
    width: 112% !important;
    position: absolute !important;
    margin-top: 3px !important;
    margin-left: -53px;
  }
  .c-anggota3{
    width: 112% !important;
    position: absolute !important;
    margin-top: 48px !important;
    margin-left: -53px;
  }
  .c-anggota{
    width: 112% !important;
    position: absolute !important;
    margin-top: 3px !important;
    margin-left: -53px;
  }
  .c-card{
    width: 112% !important;
    position: absolute !important;
    margin-top: -38px !important;
    margin-left: -53px;
  }
  .file_tugas{
    border-style: dashed;
    border-color: #dedede;
  }
  .file_tugas img{
    width: 70%;
  }
  .elipsis{
    width: 100% !important;
    margin-top: -8px;
  }
  .m-comment1{
    width: 25%;
  }
  .m-comment{
    width: 10%;
  }
  .m-modal{
    top: calc(100% - 180px);
  }
  .m-modal1{
    top: calc(100% - 130px);
  }
  .comment textarea{
    resize:none;
  }
  .new-post{
    width: 115% !important;
    position: absolute !important;
    margin-top: -28px !important;
    margin-left: -36px;
  }
  .new-post textarea{
    resize:none;
    height: 80px;
  }
  .geser{
    margin-top: -110px;
    margin-bottom: -1px !important;
  }
  .m-set{
    margin-bottom: 1px;
  }
  .m-button{
    margin-bottom: -5px;
  }
  .m-top{
    margin-top: 15px !important;
  }
  .review{
    width:300px !important; 
    margin-top:30px
  }
  .m-profil{
    width: 100% !important;
    position: absolute !important;
    margin-top: -2px !important;
    margin-left: -36px;
  }
  .m-profil1{
    width: 106% !important;
  }
  .m-menu1{
    margin-top: 55% !important;
  }
  .r-post{
    width: 100% !important;
    position: absolute !important;
    margin-top: 0px !important;
    margin-left: -36px;
  }
  .r-post div{
    width: 106.2% !important;
  }
  .r-berita{
    width: 100% !important;
    position: absolute !important;
    margin-top: 0px !important;
    margin-left: -36px;
  }
  .r-berita table{
    width: 106.2% !important;
  }  
  .r-berita2{
    width: 100% !important;
    position: absolute !important;
    margin-top: 0px !important;
    margin-left: -24px;
  }
  .m-like{
    width: 30px;
    transition: transform .5s ease;
  }
  .m-like2{
    /*font-size: 14px;*/
  }
  .m-like:hover{
    transform: scale(1.2);
  }
  /*.m-like:hover label{
    transform: scale(1.2) translateY(15%);
  }*/
  .m-like1{
    width: 30px;
    transition: transform .5s ease;
  }
  .m-like1:hover{
    transform: scale(1.2);
  }
  /*.m-like1:hover label{
    transform: scale(1.2) translateY(15%);
  }*/
  .m-post{
    padding: 8px;
  }
  .m-post img{
    border-radius: 50%;
    width: 40px;
    height: 40px;
  }
  .m-post1 img{
    border-radius: 50%;
    width: 25px;
    height: 25px;
    border: 2px solid white;
    margin-left: -13px;
  }
  .m-post1 label{
    margin-top: 10px;
  }
  .or4{
    margin-bottom: 25px !important;
  }
  .or3{
    margin-bottom: 10px !important;
  }
  .or2{
    margin-bottom: 55px !important;
  }
  .or1{
    margin-bottom: 10px !important;
  }
  .organisasi{
    margin-top: 30px !important;
  }
  .img-hover-zoom {
    height: 300px;
    overflow: hidden;
    width: 100%;
    height: 100px;
  }
  .img-hover-zoom img {
    transition: transform .5s ease;
    width: 100%;
    height: 100px;
  }
  .img-hover-zoom:hover img {
    transform: scale(1.2);
  }
  .berita2 h1{
    font-size: 22px;
  }
  .berita2 label{
    font-size: 14px;
  }
  .berita2 img{
    width: 100%;
    height: 200px;
  }
  .berita1 img{
    width: 100%;
    height: 100px;
  }
  .berita span{
    font-size: 16px;
  }
  .text-editor textarea, iframe {
    border: 2px solid #ddd !important;
    height: 500px !important;
    width: 100% !important;      
  }
  .text-editor table{
    width: 100% !important;
    background-color: red !important;
  }
  .text-editor tr :hover{
    background-color: #c90000 !important;
  }
  .text-editor label{
    color: white !important;
    font-weight: bold !important;
    font-size: 24px !important;
    margin-top: 5px !important;
  }
  .tutorial label{
    font-size: 15px;
  }
  .tutorial iframe{
    width: 100%;
    height: 215px !important;
  }
  .icon{
    margin-top: 90px;
    margin-bottom: -140px;
  }
  .time{
    color: red;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
  }
  .m-hidden{
    display: none;
  }
  .materi{
    background-color: #f5f5f5;
    top: 10px;
  }
  .materi object{
    width: 100%;
    height: 500px;
  }
  .m-bottom{
    margin-bottom: 80px;
  }
  .m-menu{
    margin-top: 30px;
    background-color: #f5f5f5;
  }
  .m-menu div{
    box-shadow: 0px 2px;
    color: white;
  }
  .m-menu i{
    margin-top: 13px;
  }
  .m-menu label{
    color: black;
    font-weight: bold;
    margin-left: 10px;
  }
  .m-menu label:hover{
    color: red;
  }
  .preloader1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #c80000;
  }
  .preloader1 .loading1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-family: "Inter", sans-serif;
    font-size: 14px;
  }
  .loading1 img{
    width: 100%;
  }
  .load1 h1{
    position: absolute;
    left: 52%;
    bottom: 4%;
    transform: translate(-50%,-50%);
    font-family: "Inter", sans-serif;
    font-size: 18px;
    color: #131313;
  }
  .load1 img{
    position: absolute;
    left: 52%;
    bottom: 0px;
    transform: translate(-50%,-50%);
    width: 25%;
  }
  .margin1{
    height: 230px !important;
  }
  .urut label{
    margin-top: 8px;
  }
  .filter-btn div{
    height: 30px;
    width: 35px;
  }
  .filter-btn i{
    margin-left: -3px;
  }
  .laporan select{
    width: 100%;
    height: 30px;
    font-size: 14px;
  }
  .laporan1 select{
    width: 82px;
    height: 30px;
    font-size: 14px;
  }
  .btn-profil1{
    margin-top: -130px;
    margin-bottom: -10px !important;
  }
  .btn-profil1 input{
    background: rgb(1, 1, 1, 0.6);
    width: 100%;
    height: 23px;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    border: none;
  }
  .btn-profil1 input:hover{
    background: rgb(1, 1, 1, 0.5);
    color: white;
    font-weight: bold;
  }
  .btn-profil label:hover{
    background: rgb(1, 1, 1, 0.5);
    color: white;
    font-weight: bold;
  }
  .btn-profil{
    margin-top: 24px;
    margin-bottom: -10px;
  }
  .btn-profil label{
    background: rgb(1, 1, 1, 0.6);
    width: 100%;
    height: 23px;
    color: white;
    text-align: center;
    font-weight: bold;
  }
  .btn-profil label:hover{
    background: rgb(1, 1, 1, 0.5);
    color: white;
    font-weight: bold;
  }
  .rute{
    height: 450px !important;
    margin-top: 30px
    /*margin-bottom: 20px;*/
  }
  .btn-back label{
    color: white;
    margin-top: 2px;
    font-size: 30px;
    height: 35px;
    font-family: forte;
  }
  .btn-back i{
    color: white;
    margin-top: 6px;
  }
  .btn-back1{
    display: none;
  }
  .bg-toko{
    margin-left: -35.9px; 
    width: 123%; 
    height: 140px;
  }
  .bg-toko1{
    margin-top: -422px;
    margin-left: 38%;
    border-radius: 50%; 
    width: 80px; 
    height: 80px; 
    border: 5px solid #fff !important;
  }
  .btn-filter label{
    width: 32%;
    text-align: center;
    font-size: 12px;
    height: 34px;
    padding-top: 8px;
    border: none;
    background-color: #f5f5f5;
    font-weight: bold;
  }
  .btn-filter label:hover{
    color: #00c948;
    border-bottom: 2px solid #00c948;
  }
  .pr-rute{
    background-color: #f5f5f5;
    margin-top: -5px;
  }
  .pr-rute img{
    height: 150px;
    width: 122%;
  }
  .pr-rute2{
    height: 35px;
    border-top: 1px solid grey;
  } 
  .pr-rute1{
    margin-bottom: -10px;
    margin-top: -1px;
    height: 141px;
  }
  .pr-rute1 div{
    background-color: #f5f5f5;
    margin-left: -35.8px; 
    width: 122%;
  }
  .pr-rute1 div label{
    font-weight: bold;
  }
  .pr-toko{
    background-color: #f5f5f5;
    margin-top: -5px;
  }
  .pr-toko img{
    height: 150px;
    width: 124%;
  }
  .pr-toko2{
    height: 35px;
    border-top: 1px solid grey;
  }
  .pr-toko1{
    margin-bottom: -10px;
    margin-top: -1px;
    height: 141px;
  }
  .pr-toko1 div{
    background-color: #f5f5f5;
    margin-left: -35.8px; 
    width: 124%;
  }
  .pr-toko1 div label{
    font-weight: bold;
  }
  .header-post1{
    margin-top: 15px;
    margin-bottom: 5px;
    width: 100%;
  }
  .header-post1 select{
    margin-top: 5px;
    margin-bottom: -15px;
  }
  .filter{
    margin-top: -50px !important;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
  }
  .filter1{
    margin-top: -50px !important;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
  }
  .buka{
    margin-top: -125px;
    margin-bottom: 90px;
    text-align: right;
    color: white;
    font-weight: bold;
  }
  .buka label{
    box-shadow: inset 0 0 35px #00b02f;
    padding: 4px;
  }
  .buka1{
    margin-top: -125px;
    margin-bottom: 90px;
    text-align: right;
    color: white;
    font-weight: bold;
  }
  .buka1 label{
    box-shadow: inset 0 0 35px #ff0000;
    padding: 4px;
  }
  .margin-bottom{
    width: 100%;
  }
  .margin-bottom1{
    margin-top: 15px;
    padding: 1px;
  }
  .margin-bottom2{
    margin-top: 75px;
    padding: 1px;
  }
  .table-hover{
    margin-bottom: 50px !important;
  }
  .table-hover1{
    margin-top: 5px !important;
    height: 250px;
  }
  .table-hover1 div{
    margin-right: -4px;
    margin-left: -4px;
  }
  .table-hover1 div div img{
    width: 100%;
    height: 125px;
    margin-top: 3px;
  }
  .table-hover1:hover{
   background: rgba(230, 230, 230, 0.6);
   margin-top: 3px !important;
 }
 .table-hover2{
  background: rgba(173, 173, 173, 0.9);
  opacity: 0.5;
  margin-top: 5px !important;
  height: 250px;
}
.table-hover2 div{
  margin-right: -4px;
  margin-left: -4px;
}
.table-hover2 div div img{
  width: 100%;
  height: 125px;
  margin-top: 3px;
}
.table-hover2:hover{
 margin-top: 3px !important;
}
.produk{
  width: 150px;
  height: 200px;
}
.produk1{
  height: 210px;
}
.header label{
  margin-top: -4px;
  margin-bottom: -1px;
  font-size: 30px;
  font-family: "Inter", sans-serif;
  height: 10px;
}
.header1 label{
  margin-top: -4px;
  margin-bottom: -1px;
  font-size: 28px;
  font-family: "Inter", sans-serif;
  height: 10px;
}
.header img{
  display: none;
}
.br-icon{
  background-color: white;
}
.d-mobile{
  display: none;
}
.bottom-fixed{
  position: fixed !important;
  bottom: 0 !important;
  background-color: white;
  box-shadow: 2px 1px 2px 1px !important;
  width: 100%;
  height: 55px !important;
}
.bottom-fixed1{
  position: fixed !important;
  bottom: 0 !important;
  width: 100%;
  height: 90px;
}
.edit-profil1{
  border-radius: 0px 0px 50px 50px; 
  width: 150px;
  margin-bottom: 40px;
  margin-top: -58px;
  background-color: #13855C;
  color: white;
}
.edit-profil{
  margin-bottom: -30px;
  margin-top: 35px;
  background-color: #13855C;
  color: white;
}
.profil {
  margin-top: -125px;
}
.profil img{
  border-radius: 50%; 
  width: 100px; 
  height: 100px; 
  border: 2px solid #fff !important;
}
.angkatan img{
  border-radius: 50%; 
  width: 100px; 
  height: 100px; 
  border: 2px solid #000 !important;
}
.bg-profil{
  width: 100%;
  height: 120px;
}
.bg-profil1{
  width: 100%;
  height: 100%;
}
.image-upload > input{
  display: none;
}
.image-upload > label label{
  display: none;
}
.image-upload > label img{
  background-color: #ededed;
  width: 20px;
  border-radius: 50%;
  margin-top: -90px;
  margin-right: -40px;
}
.image-upload{
  z-index: 999;
}
.img-upload > input{
  display: none;
}
.img-upload > label img{
  background-color: #ededed;
  width: 20px;
  border-radius: 50%;
  margin-top: -220px;
  margin-right: 5px;
}
.img-upload > label label{
  display: none;
}
.img-upload{
  z-index: 999;
  margin-bottom: -50px;
}
.img-upload1{
  margin-top: -38px;
}
.img-upload1 div{
  margin-right: -20px;
}
.img-upload1 label label{
  display: none;
}
.img-upload1 div{
  border-radius: 50% !important; 
  width: 23px;
  height: 23px;
  background: rgb(0, 0, 0, 0.6);
  color: white;
  font-size: 11px;
}
.img-upload1 div:hover{
  width: 23px;
  height: 23px;
  background: rgb(0, 0, 0, 0.8);
  color: white;
  font-size: 11px;
}
.img-upload1 i{
  margin: 5px;
}
.img-upload1 i:hover{
  margin: 5px;
}
.img-upload2{
  margin-top: -70px;
}
.img-upload2 label{
  margin-right: -40px;
}
.img-upload2 label label{
  width: 23px;
  height: 23px;
  background: rgb(0, 0, 0, 0.6);
  color: white;
  font-size: 11px;
}
.img-upload2 label label:hover{
  width: 23px;
  height: 23px;
  background: rgb(0, 0, 0, 0.8);
  font-size: 11px;
}
.img-upload2 i{
  margin: 5px;
}
.img-upload2 i:hover{
  margin: 5px;
}
.img1-m{
  width: 112%;
}
.img-m{
  width: 100%;
}
.foto{
  height: 130px;
}
.img-iklan{
  width: 120%;
  height: 55px;
  border-radius: 5%;
  margin-left: -10px;
}
.img-iklan1{
  width: 120%;
  height: 55px;
  border-radius: 5% ;
  margin-left: -10px;
}
.label-iklan{
  width: 100%;
  height: 55px;
  margin-top: -55px;
  margin-left: -10px;
  text-align: center;
}
.label-iklan label{
  box-shadow: inset 0 0 50px #000000;
  width: 120%;
  height: 55px;
  padding-top: 30px;
  border-radius: 5%;
  color: white;
}
.label-iklan label:hover{
  box-shadow: inset 0 0 50px white;
  width: 120%;
  height: 55px;
  border-radius: 5%;
  font-weight: bold;
  color: black;
}
.icon-m{
  box-shadow: inset 0 0 50px #ffffff;
  border-radius: 5%;
  color: #4d4c4c;
}
.icon-m:hover{
  box-shadow: inset 0 10px 50px #919090;
  border-radius: 10%;
  color: #4d4c4c;
}
.m-all{
  margin-top: 170px !important;
  margin-bottom: -12px;
}
.m-iklan{
  width: 490px !important;
}
.margin{
  margin-top: 7.5px;
}
.iklan{
  width: 100.2% !important;
  position: absolute !important;
  margin-top: 7.5px;
  margin-bottom: -10px;
  margin-left: -12.8px;
}
.iklan img{
  height: 150px;
  width: 100% !important;
} 
.iklan1{
  display: none;
}
.iklan-h{
  display: none;
}
.table{
  width: 180px;
}
.lain{
  height: 40px;
  margin-bottom: -20px;
}
.obat{
  width: 400px;
  height: 300px;
}
}
.nav-link {
  padding-left: 30px !important;
}