html,
 body{
        min-height: 100vh;
        margin: 0 auto;
    }
   .main{
    width: 80%;
    margin: 0 auto;
   }
    .bg-hijau{
        background-color:#24b3ac;
        position:fixed;
        z-index:2;
        width:80%;
        height: 60px;
        top:0;
        margin: 0 auto;
    }
    .wrap-bullet{
        width:50px;
        height:50px;
        border-radius:50%;
        margin-top:5px;
    }
    
    .text-icon{
        width:50px;
        height:auto;
        color:#fff;
        font-size:35px;
        
    }
    
    .icon-kiri{
        margin:5 auto;
        margin-left:10px;
    }
    
    .carousel{
        height:inherit;
        width:100%;
        border-radius:10px;
        margin-top:70px;
    }
    
    .carousel img{
        border-radius:10px;
    }
    
    .bg-akun{
        height:180px;
        background-color:#24b3ac;
        margin-left:10px;
        margin-right:10px;
        border-radius:10px;
    }
    .bg-pengaduan{
        height:160px;
        background-color:#fff;
        margin-left:5px;
        margin-right:5px;
        border-radius:10px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    
    .bg-putih{
        width:80%;
        height:160px;
        border-radius:10px;
        margin-top:10px;
        margin-left:10px;
        background-color:#fff;
    }
    .kotak-img-pengaduan{
        width:80%;
        height:160px;
        border-radius:10px;
        margin-top:10px;
        margin-left:10px;
    }
    
    .icon-list{
        width:20px;
        height:20px;
        border-radius:50%;
        margin-left:10px;
    }
    .f-10{
        font-size:10px;
    }
    .f-12{
        font-size:12px;
    }
    .f-14{
        font-size:14px;
    }
    .f-16{
        font-size:16px;
    }
    .f-18{
        font-size:18px;
    }
    
    .fwb{
        font-weight:bold;
    }
    .icon-tengah{
        margin-left:15px;
        color:#fff;
        font-size:50px;
    }
    .kotak-menu-tengah{
        max-width:100%;
        align-items:center;
        text-align:center;
    }
    
    .judul-menu-tengah{
        font-size:15px;
        padding-top:3px;
        margin-left:10px;
    }
    .link-menu{
        text-decoration:none;
    }
    .icon-gambar{
        width:50px;
        height:50px;
        border-radius:50%;
        margin:2px;
    }
    .card-menu{
        height: auto;
        margin-left:10px;
        margin-right:10px;
        border-radius:10px;
        background-color:#f9fcfd;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        padding: 15px;
    }
    .kotak-menu{
        width:55px;
        height:55px;
        border-radius:50%;
        background-color:#24b3ac;
    }
    .icon-menu-utama {
        font-size: 25px;
        color:#fff;
    }
    .card-menu-custome{
        height:auto;
        margin-left:10px;
        margin-right:10px;
        border-radius:10px;
    }
    .img-pengaduan{
        max-width:140px;
        height:auto;
    }
    .text-icon-gambar{
        margin-top: 0;
        margin-bottom: 0;
        font-size: 15px;
    }
    .text-menu-nav{
        margin-top: 0;
        margin-bottom: 0;
        font-size: 14px;
    }

    

    .bg-form{
        
        height: auto;
        margin-top: 15px;
        margin-left:10px;
        margin-right:10px;
        border-radius:10px;
        background-color:#f9fcfd;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        padding: 5px;
    }
    .bg-steps{
        margin:0 auto;
        width:45px;
        height:45px;
        border-radius: 50%;
        background-color:#d9d90b;
    }
    .text-steps{
        text-align: center;
        margin:0 auto;
        padding: 12px;
        font-size: 16px;
    }
    
    .pesan-error{
        color:red;
        font-style: italic;
        font-size: 14px;
    } 
    .form-label{
        margin-top: .75rem;
        margin-bottom: .25rem;
    }

    .nav-link{
        padding: .25rem .25rem;
        color: #131313;
    }

    #drop-area {
        border: 2px dashed #ccc;
        border-radius: 20px;
        width: 480px;
        height: auto;
        font-family: sans-serif;
        margin: 50px auto;
        padding: 20px;
        align-items:center;
    }
    #drop-area.highlight {
        border-color: purple;
    }
    p {
        margin-top: 0;
    }
    .my-form {
        margin-bottom: 10px;
    }

    #gallery img {
        width: 150px;
        vertical-align: middle;
    }
    .button {
        width: 100%;
        padding: 10px;
        background: #f9f6f6;
        cursor: pointer;
        border-radius: 5px;
        border: 1px solid #f9f6f6;
    }
    .button:hover {
        background: #ddd;
    }
    #fileElem {
        display: none;
    }
    .tombol-berkas {
        margin-top: 50px;
        margin-left:10px;
        margin-right:10px;
    }
    #status-pengaduan{
        display: block;
        color: #9a9898;
    }
/* mobile or only mobile */
@media (max-width: 767px) {
     .main{
        width: 100%;
    }
    .bg-hijau{
        width: 100%;
    }
  .icon-kiri{
        margin-top:10px;
        margin-left:10px;
    }
    .icon-satu{
        margin-right:15px;
    }
    .ikon-kembali{
        margin-top:10px;
        margin-left:10px;
    }
    .wrap-bullet{
        width:50px;
        height:auto;
        margin-top:5px;
        margin-left:10px;
        margin-right:10px;
    }
    .form-control{
        margin-top:5px;
    }
    
    .bg-akun{
        height:80px;
        margin-top:5px;
    }
    .bg-putih{
        width:150px;
        height:60px;
        margin-top:1px;
    }
    .kotak-menu-tengah{
        width:auto;
        height:auto;
    }
    .icon-tengah {
        margin-left: 10px;
        font-size: 30px;
        margin-top: 5px;
    }
    .judul-menu-tengah{
        font-size:10px;
        padding-top:2px;
        margin-left:10px;
    }
    
    .icon-menu-utama {
        font-size: 20px;
        margin-top: 5px;
    }
    .img-pengaduan{
        max-width:70px;
        height:auto;
    }
    .kotak-img-pengaduan{
        max-width:80px;
        height:auto;
        border-radius:10px;
        margin-left:10px;
        margin-top:1px;
        background-color:#fff;
    }
    
    .bg-pengaduan{
        height:auto;
    }
    .text-menu-nav{
        font-size: 12px;
    }
    .text-icon-gambar{
        font-size: 13px;
    }
    .nav-link{
        padding: .25rem .25rem;
        color: #131313;
    }

    #drop-area {
        height: auto;
        width: 100%;
        margin: 50px auto;
        padding: 20px;
    } 
    
    .tombol-berkas {
        margin-left:0;
        margin-right:0;
    }
    #gallery img {
        width: 120px;
        align-items: center;
    }

    #status-pengaduan{
        display: none;
    }
}

@media (min-width: 576px) {
     .main{
        max-width: 540px;
    }
     .col-sm-3 {
        flex: 0 0 auto;
        width: 25%;
      }
    .bg-hijau{
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    .main{
        max-width: 720px;
    }
     .col-md-3 {
        flex: 0 0 auto;
        width: 25%;
      }
    
    .bg-hijau{
        max-width: 720px;
    }
}


@media (min-width: 992px) {
  .main {
    max-width: 960px;
  }
  .bg-hijau{
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
  .main {
    max-width: 1140px;
  }
  .bg-hijau{
        max-width: 1140px;
    }
}
@media (min-width: 1400px) {
  .main {
    max-width: 1320px;
  }
  .bg-hijau{
        max-width: 1320px;
    }
}