/*Login*/
.main_content{
     background: url('../image/black_logo.png') no-repeat center;
     background-size: cover;
     background-attachment: fixed;
     height: 100vh;
     width: 100vw;
}
.login_content{
     background-color: transparent; 
     width: 25%; 
     margin: 0 37.5%;
     display: inline-block; 
     border-radius: 10px; 
     padding: 10px; 
     position: fixed;
}
.login_logo{
     text-align: center;
}
.login_logo img{
     width: 40%;
     height: 40%;
}
#preview_admin{
     width: 100%; 
     border-radius: 5px; 
     max-height: 250px;
     cursor: pointer; 
}
#delete_preview_admin{
     cursor: pointer;
     text-align: center;
     border: 1px solid red;
     border-radius: 5px;
     color: red;
     background-color: #fff;
     display: none;
}
#delete_preview_admin:hover{
     color: #fff;
     background-color: red;
}
/*Main Content*/
.admin_main_content{
     min-height: 100vh;
     padding: 93px 50px 50px 50px;
     background-color: #fff;
}
/*Map Main Content*/
.map_main_content{
     min-height: 100vh;
     padding-top: 70px;
     background-color: #fff;
}
#map{
     width: 100%;
     height: 86vh;
}
#legend{
     font-size: 14px;
     color: #fff;
}
/*Dashboard Header Content*/
.list_admin_menu{
     background-color: rgba(0,0,0,1);
     padding: 5px 0;
     width: 100%;
}
.all_admin_menu, #login_admin{
     width: 100%;
}
#admin_menu_logo{
     padding: 17.5px 7.5px;
     cursor: pointer;
     background-color: #fff;
}
#admin_menu_logo img{
     border-radius: 100%; 
     width: 40px; 
     height: 40px;
}
.admin_menu{
     padding: 5px 7.5px;
     color: #fff;
     font-weight: bold;
     cursor: pointer;
     font-size: 15px;
     background-color: transparent;
}
.admin_menu:hover{
     color: blue !important;
}
.username_admin_menu{
     right: 0;
     position: absolute;
}
#responsive_admin_menu{
     display: none;
     padding: 5px 7.5px;
     color: #fff;
     font-weight: bold;
     cursor: pointer;
     font-size: 15px;
     border-color: transparent;
     background-color: transparent;
     right: 0; 
     position: absolute;
}
#responsive_admin_menu:hover{
     color: blue;
}
#responsive_admin_sub_menu:hover, .admin_sub_menu:hover, .admin_sub_menu a:hover{
     color: rgba(0,0,0,1);
     text-decoration: none;
}
.admin_sub_menu, .admin_sub_menu a{
     cursor: pointer; 
     padding: 0 5px;
     font-weight: bold; 
     font-size: 15px; 
     color: #fff;
}
.admin_head_sub_menu{
     line-height: normal; 
     background-color: blue;  
     padding-bottom: 3px;
     text-align: left; 
     width: 100%;
     padding-left: 52.5px;
     height: 21px;
}
#responsive_admin_sub_menu{
     cursor: pointer; 
     font-weight: bold; 
     font-size: 15px; 
     color: #fff;
     display: none;
     right: 0; 
     position: absolute;
     padding: 1px 7.5px 0 7.5px;
}
#left_admin_menu{
     width: 125px;
     display: none;
     top: 68px;
     left: 0;
     position: absolute;
     text-align: center;
     background-color: #fff;
}
#right_admin_menu{
     display: none;
     width: 100px;
     right: 0;
     position: absolute;
     text-align: center;
     top: 68px;
}
.responsive_right_sub_menu, .responsive_right_sub_menu a{
     cursor: pointer;
     font-weight: bold; 
     font-size: 15px; 
     color: #fff;
}
.dropdown_menu_1{
     margin-left: 0px;
}
.dropdown_menu_2{
     margin-left: 105px;
}
.dropdown_menu_3{
     margin-left: 210px;
}
.dropdown_menu_4{
     margin-left: 315px;
}
.dropdown_menu_5{
     margin-left: 420px;
}
.dropdown_menu{
     left: 0;
     display: none;
     margin-top: -16px !important;
     position: absolute;
     width: 105px;
     position: absolute;
     border: 1px solid rgba(0,0,0,0.3); 
}
#list_dropdown{
     text-align: center; 
     display: inline-flex;
     font-size: 14.5px;
}
#list_dropdown a{
     padding: 5px;
     border-bottom: 1px solid rgba(0,0,0,0.3);
     display: block;
     color: rgba(0,0,0,0.8);
     background-color: #fff;
     cursor: pointer;
}
#list_dropdown a:hover{
     color: #fff;
     background-color: rgba(0,0,0,1);
     text-decoration: none;
}
#dropdown_username_menu{
     right: 0;
     display: none;
     margin-top: -16px !important;
     position: absolute;
     width: 105px;
     position: absolute;
     border: 1px solid rgba(0,0,0,0.3); 
}
.admin_main_image_content{
     text-align: center; 
     left: 0; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     position: fixed; 
     opacity: 0.15;
}
.admin_image_content{
     border-radius: 100%;
     width: 100%; 
     height: 86vh;
     margin-top: 10.5vh;
}
/*Main*/
body{
     font-family: 'Lato', sans-serif !important; 
     padding: 0 !important;
     overflow-y: auto !important;
     line-height: normal !important;
}
table tr th, table tr td{
     text-align: center !important;
     vertical-align: center !important;
}
table tr th{
     background-color: black !important;
     color: #fff !important;
}
table.dataTable tbody tr{
    background-color: rgba(255,255,255,0.75);
}
button{
     position: relative;
}
header{
     position: fixed;
     top: 0;
     z-index: 5;
}
pre{
     font-family: verdana !important; 
     color: #fff !important;
}
label{
     font-weight: bold;
     margin-bottom: -2.5px !important;
}
.form-check-input:disabled ~ .form-check-label{
     color: black;
}
input[type="text"]:disabled, select:disabled{
     background-color: black !important;
     color: #fff;
     cursor: not-allowed;
}
input[type='text'], input[type='password']{
     border-color: rgba(0,0,0,0.3);
}
textarea{
     border-color: rgba(0,0,0,0.3) !important;    
}
input[type='radio'], input[type='checkbox']{
    transform: scale(1.25);
}
.daftar_content select{
     border-color: rgba(0,0,0,0.3);     
}
input[type='text'], 
input[type='password'], 
input[type='file'],
.btn, 
footer, 
label, 
textarea,
pre,
select,
#login_admin,
.admin_main_content,
#delete_preview_admin,
#ui-datepicker-div{
    font-size: 15px !important;
}
select{
     cursor: pointer;
}
/*End Main*/
/*Sweetalert*/
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown){
     overflow-y: auto !important;
}
.swal2-image{
     border-radius: 100%;
     height: 100px;
     width: 100px;
}
.swal2-popup{
     width: 30em !important;
     padding: inherit !important;
     border-radius: 0.5em !important;
}
.swal2-popup .swal2-footer{
     margin: 0 !important;
     padding: 0 !important;
     border-top: none !important;
}
.swal2-icon{
     margin: 5px !important;
}
.swal2-actions{
     margin: 5px !important;
}
.swal2-actions button{
     font-weight: 600 !important;
}
.swal2-container.swal2-shown{
    background-color: rgba(0,0,0,0.75) !important;
}
.swal2-popup .swal2-content{
     max-height: 200px !important;
     overflow-y: auto !important;
}
.swal2-popup .swal2-styled:focus{
    outline: 0;
    box-shadow: none !important;
}
.swal2-popup .swal2-styled.swal2-confirm{
     background-color: blue !important;
}
.swal2-popup .swal2-confirm:hover, .swal2-confirm:focus{
     background-color: rgb(0,0,100) !important;
}
.swal2-popup .swal2-styled.swal2-cancel{
     background-color: red !important;
}
.swal2-popup .swal2-cancel:hover, .swal2-cancel:focus{
     background-color: rgb(100,0,0) !important;
}
/*End Sweetalert*/
/*Jquery UI*/
.ui-datepicker{
     z-index: 99999 !important;
}
#ui-datepicker-div{
     width: auto;
     left: calc(50% - 300px / 2) !important;
}
.ui-autocomplete{
     z-index: 99999 !important;
     max-height: 300px !important;
     overflow-y: auto !important;
     overflow-x: hidden !important;
}
/*End Jquery UI*/
/*Bootstrap Button*/
.btn_tambah{
     margin-bottom: 5px;
     width: 100%;
     text-align: left;
}
.btn{
     font-weight: bold;
     padding: 5px 10px;
}
.btn-outline-primary{
     border-color: blue !important;
     color: blue !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus{
     border-color: blue !important;
     background-color: blue !important;
     color: #fff !important;
}
.btn-outline-danger{
     border-color: red !important;
     color: red !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus{
     background-color: red !important;
     color: #fff !important;
}
.btn-primary{
     background-color: blue !important;
     border-color: transparent !important;
     color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus{
     background-color: rgb(0,0,100) !important;
}
.btn-danger{
     background-color: red !important;
     border-color: transparent !important;
     color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus{
     background-color: rgb(100,0,0) !important;
}
/*End Bootstrap Button*/
/*Design Image Box*/
.box_left_top{
     margin: 10px; 
     top: 0; 
     position: absolute; 
     left: 0;
}
.box_right_top{
     margin: 10px; 
     top: 0; 
     position: absolute; 
     right: 0;
}
.box_left_bottom{
     margin: 10px; 
     bottom: : 0; 
     position: absolute; 
     left: 0;
}
.box_right_bottom{
     margin: 10px; 
     bottom: : 0; 
     position: absolute; 
     right: 0;
}
.box_content{
     padding: 10px; 
     width: 22.5%; 
     display: inline-block;
     position: relative; 
     cursor: pointer;
     border-radius: 5px;
     border: 2.5px solid transparent;
     transition: border-color .25s !important;
}
.box_content:hover{
     border-color: blue;
}
.box_content img{
     width: 100%; 
     border-radius: 7.5px; 
     background-color: #fff; 
     height: 150px;
}
/*End Design Image Box*/
/*Footer*/
.atas{
     display: none;
     position: fixed;
     bottom: 25px;
     right: -2.5px;
}
.top_set{
     font-size: 40px;
     border-color: rgba(255,255,255,0);
     cursor: pointer;
     color: red;
     padding: 0 15px;
     border-radius: 5px;
}
.top_set:hover{
     background-color: yellow;
}
footer{
     text-align: center; 
     padding: 2.5px 5px; 
     bottom: 0; 
     position: fixed; 
     width: 100%; 
     background-color: black; 
     color: #fff; 
     line-height: normal;
}
/*End Footer*/
/*Bootstrap Modal*/
.modal-open .modal{
     overflow-y: hidden;
}
.modal-title{
     font-weight: 800;
     color: blue;
}
.modal-body{
     max-height: 450px;
     overflow-y: auto;
     text-align: justify;
     overflow-x: hidden;
}
#modal_search .modal-lg{
     height: 100vh;
     max-width: 100% !important;
}
.modal-lg{
     height: 100vh !important;
     max-width: 100% !important;
}
.modal{
     padding-right: 0 !important;
}
/*Bootstrap Modal for Image*/
#preview_image_admin, 
#preview_image_pelatihan, 
#column_gambar_pelatihan,
#modal_search{
     overflow-y: hidden;
     background-color: black;
     padding: 0 !important;
}
/*<img> inside bootstrap modal for image*/
#modal_preview_admin, 
#modal_preview_pelatihan, 
#image_column_pelatihan{
     max-height: 100vh; 
     width: 100%;
}
/*display file <img> inside input form*/
#preview_pelatihan{
     width: 100%; 
     border-radius: 5px; 
     max-height: 250px;
     cursor: pointer;
}
/*Bootstrap Modal for Image modal-lg*/
#preview_image_admin .modal-lg, 
#preview_image_pelatihan .modal-lg, 
#column_gambar_pelatihan .modal-lg{
     height: 100vh !important;
     max-width: 100% !important;
}
/*Bootstrap Modal for Image modal-dialog*/
#preview_image_admin .modal-dialog, 
#preview_image_pelatihan .modal-dialog, 
#column_gambar_pelatihan .modal-dialog,
#modal_search .modal-dialog{
     margin: 0;
}
.table_title{
     font-weight: 800; 
     font-size: 24px; 
     color: black; 
     letter-spacing: normal; 
     line-height: normal;
     text-align: center;
}
@media screen and (max-width: 1100px){
     .login_content{
          width: 27.5%;
          margin: 0 36.25%;
     }
}
@media screen and (max-width: 1000px){
     .login_content{
          width: 30%;
          margin: 0 35%;
     }
     .box_content{
          width: 30%; 
     }
     .modal-body{
          max-height: 400px;
     }
     .table_title{
          font-size: 22px;
     }
}
@media screen and (max-width: 900px){
     .login_content{
          width: 32.5%;
          margin: 0 33.75%;
     }
}
@media screen and (max-width: 800px){
     .login_content{
          width: 37.5%;
          margin: 0 31.25%;
     }
     .box_content{
          width: 47.5%; 
     }
     .modal-body{
          max-height: 350px;
     }
     .table_title{
          margin-bottom: 5px;
          font-size: 20px;
     }
}
@media screen and (min-width: 701px){
     #left_admin_menu, #right_admin_menu{
          display: none !important;
     }
     .admin_menu{
          color: #fff !important;
     }
}
@media screen and (max-width: 700px){
     .login_content{
          width: 42.5%;
          margin: 0 28.75%;
     }
     #legend{
          margin-top: 3px;
          font-size: 12px;
     }
     #map{
          height: 87vh;
     }
     .admin_image_content{
          height: 75vh;
          margin-top: 16.5vh;
     }
     .dropdown_menu_1, 
     .dropdown_menu_2, 
     .dropdown_menu_3, 
     .dropdown_menu_4, 
     .dropdown_menu_5, 
     #dropdown_username_menu{
          margin-left: 125px;
     }
     .dropdown_menu, #dropdown_username_menu{
          left: 0;
          margin-top: 5px !important;
          width: 100px; 
     }
     #list_dropdown, .responsive_right_sub_menu{
          font-size: 12.5px;
     }
     .responsive_right_sub_menu{
          font-weight: 400; 
          border-left: 1px solid rgba(0,0,0,0.3);
          border-right: 1px solid rgba(0,0,0,0.3);
          border-bottom: 1px solid rgba(0,0,0,0.3);
          display: block;
          color: rgba(0,0,0,0.8);
          background-color: #fff;
          cursor: pointer;
     }
     .responsive_right_sub_menu a{
          font-weight: 400; 
          padding: 0;
          line-height: 2;
          display: block;
          color: rgba(0,0,0,0.8);
          background-color: transparent;
          cursor: pointer;
     }
     .responsive_right_sub_menu:hover, .responsive_right_sub_menu a:hover{
          background-color: rgba(0,0,0,1);
          color: #fff;
          text-decoration: none;
     }
     .admin_sub_menu{
          display: none;
     }
     .admin_head_sub_menu{
          position: fixed;
          top: 47px;
          height: 21px;
     }
     #responsive_admin_menu, #responsive_admin_sub_menu{
          display: inline-block;
     }
     .username_admin_menu{
          position: relative;
     }
     .top_menu{
          display: none;
     }
     .btn_tambah{
          text-align: center;
     }
     #admin_menu_logo img{
          border-radius: 100%; 
          width: 37.5px; 
          height: 37.5px;
     }
     .admin_menu{
          color: rgba(0,0,0,0.8);
          padding: 3px 0;
          border-bottom: 1px solid rgba(0,0,0,0.3);
          border-left: 1px solid rgba(0,0,0,0.3);
          border-right: 1px solid rgba(0,0,0,0.3);
     }
     .admin_menu:hover{
          color: #fff !important;
          background-color: rgba(0,0,0,1) !important;
     }
     .admin_main_content{
          padding: 78px 20px 20px 20px;
     }
     .map_main_content{
          padding-top: 65px;
     }
}
@media screen and (max-width: 600px){
     .login_content{
          width: 50%;
          margin: 0 25%;
     }
     .modal-dialog{
          max-width: 600;
          margin: 0;
     }
     input[type='text'], 
     input[type='password'], 
     input[type='file'],
     .btn, 
     footer, 
     label, 
     textarea,
     pre,
     select,
     #delete_preview_admin,
     .admin_main_content,
     #login_admin,
     #ui-datepicker-div{
         font-size: 14px !important;
     }
}
@media screen and (max-width: 500px){
     .login_content{
          width: 57.5%;
          margin: 0 21.25%;
     }
     .admin_image_content{
          height: 65vh;
          margin-top: 21.5vh;
     }
     .table_title{
          font-size: 18px;
     }
}
@media screen and (max-width: 450px){
     .box_content{
          width: 100%; 
     }
     .login_content{
          width: 65%;
          margin: 0 17.5%;
     }
}
@media screen and (max-width: 400px){
     .login_content{
          width: 75%;
          margin: 0 12.5%;
     }
     .admin_image_content{
          height: 50vh;
          margin-top: 29.5vh;
     }
     .modal-body{
          padding: 0.5rem;
     }
     input[type='text'], 
     input[type='password'], 
     input[type='file'],
     .btn, 
     footer, 
     label, 
     textarea,
     pre,
     select,
     #delete_preview_admin,
     .admin_main_content,
     #login_admin,
     #ui-datepicker-div{
         font-size: 13px !important;
     }
}
@media screen and (max-width: 350px){
     .login_content{
          width: 85%;
          margin: 0 7.5%;
     }
     .modal-body{
          padding: 0.25rem;
     }
     .table_title{
          font-size: 16px;
     }
}
@media screen and (max-width: 300px){
     .login_content{
          width: 90%;
          margin: 0 5%;
     }
     .admin_image_content{
          height: 40vh;
          margin-top: 34vh;
     }
}