html, body {
    height: 100vh;
    margin: 0;
  }
.main-page {
    background: rgb(1,149,12);
    background: linear-gradient(90deg, rgba(1,149,12,1) 0%, rgba(0,0,182,1) 50%, rgba(0,0,0,1) 100%);
    color: rgb(210, 210, 210);

}

.sidebar-page {
    background: rgb(1,149,12);
    background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 50%, rgb(0, 0, 255) 100%);
    color: rgb(210, 210, 210);

}

a:link {
    text-decoration:none
}

a:hover{
    text-decoration:none
}

.fit{
    width: -moz-fit-content;
    width: fit-content;
    max-width: max-content;
}

#myTable{

}

.noborders > td {
    border-color: transparent;
    border-bottom-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
  }

tr{
    font-size: x-small;
}

.bg-navbar{
    background: rgba(98, 98, 98, 0.7);
}
.top-right{
   text-align: right;
    top: 8px;
    right: 16px;
    padding: 5px;
}
.menu-app{
    top: 8px;
    right: 16px;
    padding: 5px;
}

.dropdown-menu li {
    position: relative;
}  
.dropdown-item {
    display: none;
}
.dropdown-menu {
    display: none;
}
.dropdown-menu > li > .dropdown-submenu {
    display: none;
}

.submenu-item {
    display: none;
}
#submenu{
    left: 100%;
    top: 10px;
}
.form{
    margin: auto;
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.0);
    backdrop-filter: blur(10px);
    color: rgb(210, 210, 210);
    display: flex;
    justify-content: center;
    border-radius: 20px;
    box-shadow: 0 0 16 0 rgba(0,0,0,0);
    padding: 0px;
}
#dot {
 max-width: 20px;
}
.center-position{
    margin: auto;
    max-width:max-content;
    height: auto;
    color: rgb(210, 210, 210);
    display: flex;
    justify-content: center;
    border-radius: 20px;
    padding: 0px;
}
#reply_btn{
    text-align: -webkit-center;
    margin:0;
}
#form-title{
    text-align: center;
    -webkit-filter: drop-shadow(3px 3px 3px rgb(175, 175, 175));/*top right bottom left*/
    filter: drop-shadow(2px 2px 2px rgb(175, 175, 175));/*top right bottom left*/
}
.logo-title{
    -webkit-filter: drop-shadow(3px 3px 3px rgb(70, 70, 70));
    filter: drop-shadow(2px 2px 2px rgb(0, 0, 0));
}
#label{
    text-align: -webkit-left;
    padding-top: 8px;
    width: 100%;
}
select{
    -webkit-filter: drop-shadow(3px 3px 3px rgb(70, 70, 70));
    filter: drop-shadow(2px 2px 2px rgb(0, 0, 0));
}
#input {
    text-align: -webkit-left;
    width:300px;
}
.form-position{
        background: rgba(0, 0, 0, 0.5);
        margin: 10px 6px 10px 6px ; /*top right bottom left*/
        padding-top: 10px; /* batas dalam */
        border-radius: 10px; /*lengkungan sudut*/
        max-width:max-content;
}

.login-form-position{
    background: rgba(255, 255, 255, 0.4);
    margin: 10px 0px 10px 0px ; /*top right bottom left*/
    padding: 10px 0px 10px 0px; /* top right bottom left*/
    border-radius: 10px; /*lengkungan sudut*/
}

/*release*/
#navbar {
    color: white;
    z-index: 1;
    overflow-x:visible;
    position: fixed; /* Set the navbar to fixed position */
    top: 10; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
}
.sidenav{
    max-width:max-content;
    max-height: max-content;
    z-index: 1;
    top: 100px;
    right: 10px;
    position: fixed;
    overflow-x: hidden;
}
.main-content {
    padding-top:90px;
    height: 100%;
  }



/*end*/
.sidebar{
    background: rgba(0, 0, 0, 0.5);
    margin: 0px 0px 10px 15px ; /*top right bottom left*/
    padding: 10px 10px 10px 0px ; /*top right bottom left*/
    border-radius: 10px; /*lengkungan sudut*/
    
}
.admin-sidebar{
    background: rgba(0, 0, 0, 0.5);
    margin: 0px 0px 10px 0px ; /*top right bottom left*/
    padding: 10px 10px 10px 0px ; /*top right bottom left*/
    border-radius: 10px; /*lengkungan sudut*/
    
}

#sidebar{
    max-width:max-content;
    max-height: max-content;
    padding-left: 0px;
}

#admin-content{
    max-width:max-content;
    max-height: max-content;
}

#admin-sidebar{
    max-width:200px;
    max-height: max-content;
    padding-top: 0px;
    padding-right: 5px;
}

.main-form{
    background: rgba(0, 0, 0, 0.5);
    max-width: max-content;
    margin: 10px 0px 10px 0px ; /*top right bottom left*/
    padding: 5px 0px 10px 0px; /* batas dalam */
    border-radius: 10px; /*lengkungan sudut*/
}
.login-form{
    background: rgba(255, 255, 255, 0.2);
    margin: 10px 20px 10px 0px ; /*top right bottom left*/
    padding: 5px 0px 10px 0px; /* batas dalam */
    border-radius: 10px; /*lengkungan sudut*/
}
.adminmain-form{
    background: rgba(0, 0, 0, 0.5);
    margin: 10px 0px 0px 0px ; /*top right bottom left*/
    padding: 10px 0px 10px 0px; /* batas dalam */
    border-radius: 10px; /*lengkungan sudut*/
}
.auto-form{
    min-width:250px;
    margin: auto;
}
.laravel-icon{
    width: 20px;
    height: 20px;
}
.powerpack-icon{
    margin: 0px;
    padding-bottom: 6px;
    width: 28px;
    height: 32px;
    -webkit-filter: drop-shadow(3px 3px 3px rgb(255, 255, 255));
    filter: drop-shadow(3px 3px 3px rgb(255, 255, 255));
}
.logout-button{
    float:right;
}
.logo-login{
    max-width: 500px;
    max-height: 60px;

    text-align: center;
    padding-top: 10px;
    padding-left: 10px;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(255, 255, 255, 0.5));
    filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 0.5));
}
#label-login{
    padding-left: 200px;
}
.logo-DMS{
    max-width: 300px;
    max-height: 40px;
    text-align: center;
    padding-top: 10px;
    padding-left: 20px;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(255, 255, 255, 0.5));
    filter: drop-shadow(2px 2px 2px rgba(255, 255, 255, 0.5));
}
input,textarea{
    text-align: left;
    max-width:300px;
    display:block;
   
}
.logo-register{
    width: 100%;
    height: auto;
    text-align: center;
    padding-top: 10px;
    -webkit-filter: drop-shadow(3px 3px 3px rgb(3, 255, 87));
    filter: drop-shadow(2px 2px 2px rgb(3, 255, 87));
}
.input-shadow{
    -webkit-filter: drop-shadow(5px 5px 5px rgb(0, 0, 0));
    filter: drop-shadow(3px 3px 3px rgb(0, 0, 0));
}
/*borderless table*/
table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }
  table tr th,
  table tr td {
    border-right: 1px solid #dee2e6 !important;
    border-bottom: 1px solid #dee2e6 !important;
  }
  table tr th:first-child,
  table tr td:first-child {
    border-left: 1px solid #dee2e6 !important;
  }
  table tr th {
    border-top: 1px solid #dee2e6 !important;
  }
  
  /* top-left border-radius */
  table tr:first-child th:first-child {
    border-top-left-radius: 0.5rem !important;
  }
  
  /* top-right border-radius */
  table tr:first-child th:last-child {
    border-top-right-radius: 0.5rem !important;
  }
  
  /* bottom-left border-radius */
  table tr:last-child td:first-child {
    border-bottom-left-radius: 0.5rem !important;
  }
  
  /* bottom-right border-radius */
  table tr:last-child td:last-child {
    border-bottom-right-radius: 0.5rem !important;
  }
/*end borderless*/
@media  (max-width: 600px) {
    .top-right{
        font-size: 2vh;
    }
    .logo-title{
        font-size: 2vh;
    }
    .nav-item{
        font-size: 2vh;
    }
    .nav-item.dropdown{
        font-size: 2vh;
    }
    .container-fluid{
        font-size: 2vh;
    }
    .center-position{
        font-size: 2vh;
    }
    .form-position{
        font-size: 2vh;
        margin: 0;
    }
    #logo-login{
        max-width: 300px;
        max-height: 40px;
    }
    #logo-DMS{
        max-width: 250px;
        max-height: 45px;
    }
    #input {
        font-size: 1.5vh;
        text-align: left;
    }
    #form-control {
        font-size: 1.7vh;
    }
    .main-page{
        height: 100vh;
        font-size: 1.7vh;
    }
    #button {
        font-size: 1.7vh;
      }
   
}

@media (max-width:767px){
    .sidenav{
        display: none;
    }

    .hide{
        display: none;
    }
    #sm{
        font-size:10px;
        text-decoration: none;
    }
}

@media (max-height:767px){
    #main-page{
        background: rgb(1,149,12);
        background: linear-gradient(90deg, rgba(1,149,12,1) 0%, rgba(0,0,182,1) 50%, rgba(0,0,0,1) 100%);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        color: rgb(210, 210, 210);
    }

}