@font-face {
  font-family: 'barlowregular';
  src: url('barlow-regular-webfont.woff2') format('woff2'),
       url('barlow-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  background-image: url(img/bg/a-dalkot.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #fff;
}

.login {
  margin-top: 60px;
}

.login .card {
  background: rgba(0, 0, 0, 0.3);
}

.login .label {
  font-size: 18px;
  color: #fff;
}

.login .input {
  font-size: 18px !important;
  color: #fff;
}
#footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:60px;   /* tinggi dari footer */
    background:#6cf;
  }

@media only screen and (min-device-width : 320px) and (max-device-width :992px) {
  .banner1 {
    display: none;
  }
  .login {
    margin-top: -20px;
  }

  .login .card {
    background: rgba(0, 0, 0, 0.3);

  }

  .login .label {
    font-size: 16px;
    color: #fff;
    order: 2;
  }

  .login .input {
    font-size: 16px !important;
    color: #fff;
    order: 1;
  }
  
}
.parallax-contanier{
    height: 300px;
}
.parallax img{
    
    opacity: 0.5 !important;
}
header, main, footer {
    padding-left: 300px;
  }

  @media only screen and (max-width : 992px) {
    header, main, footer {
      padding-left: 0;
    }
  }
/* section{
    padding: 0 20px 0 20px;
}
*/
.judulsection {
  font-size: 18px;
  font-weight: 500;
  color: rgb(255, 255, 255);
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 16px;
  background-color: #0483fa;
}

div.material-table {
  padding: 0;
}

div.material-table .hiddensearch {
  padding: 0 14px 0 24px;
  border-bottom: solid 1px #DDDDDD;
  display: none;
}

div.material-table .hiddensearch input {
  margin: 0;
  border: transparent 0 !important;
  height: 48px;
  color: rgba(0, 0, 0, .84);
}

div.material-table .hiddensearch input:active {
  border: transparent 0 !important;
}

div.material-table table {
  table-layout: fixed;
}

div.material-table .table-header {
  height: 64px;
  padding-left: 24px;
  padding-right: 14px;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: flex;
  -webkit-display: flex;
  border-bottom: solid 1px #DDDDDD;
}

div.material-table .table-header .actions {
  display: -webkit-flex;
  margin-left: auto;
}

div.material-table .table-header .btn-flat {
    min-width: 36px;
    padding: 0 8px;
}

div.material-table .table-header input {
  margin: 0;
  height: auto;
}

div.material-table .table-header i {
  color: rgba(0, 0, 0, 0.54);
  font-size: 24px;
}

div.material-table .table-footer {
  height: 56px;
  padding-left: 24px;
  padding-right: 14px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
  font-size: 12px !important;
  color: rgba(0, 0, 0, 0.54);
}

div.material-table .table-footer .dataTables_length {
  display: -webkit-flex;
  display: flex;
}

div.material-table .table-footer label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.54);
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  /* works with row or column */
  
  flex-direction : row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

div.material-table .table-footer .select-wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  /* works with row or column */
  
  flex-direction : row;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

div.material-table .table-footer .dataTables_info,
div.material-table .table-footer .dataTables_length {
  margin-right: 32px;
}

div.material-table .table-footer .material-pagination {
  display: flex;
  -webkit-display: flex;
  margin: 0;
}

div.material-table .table-footer .material-pagination li:first-child {
  margin-right: 24px;
}

div.material-table .table-footer .material-pagination li a {
  color: rgba(0, 0, 0, 0.54);
}

div.material-table .table-footer .select-wrapper input.select-dropdown {
  margin: 0;
  border-bottom: none;
  height: auto;
  line-height: normal;
  font-size: 12px;
  width: 40px;
  text-align: right;
}

div.material-table .table-footer select {
  background-color: transparent;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  height: auto;
  margin-left: 20px;
}

div.material-table .table-title {
  font-size: 20px;
  color: #000;
}

div.material-table table tr td {
  padding: 0 0 0 56px;
  height: 48px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.87);
  border-bottom: solid 1px #DDDDDD;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div.material-table table tr td a {
  color: inherit;
}

div.material-table table tr td a i {
  font-size: 18px;
  color: rgba(0, 0, 0, 0.54);
}

div.material-table table tr {
  font-size: 12px;
}

div.material-table table th {
  font-size: 12px;
  font-weight: 500;
  color: #757575;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
  height: 56px;
  padding-left: 56px;
  vertical-align: middle;
  outline: none !important;
}

div.material-table table th.sorting_asc,
div.material-table table th.sorting_desc {
  color: rgba(0, 0, 0, 0.87);
}

div.material-table table th.sorting:after,
div.material-table table th.sorting_asc:after,
div.material-table table th.sorting_desc:after {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  word-wrap: normal;

  -webkit-font-smoothing: antialiased;
  content: "arrow_back";
 
  display: none;
  vertical-align: middle;
}

div.material-table table th.sorting:hover:after,
div.material-table table th.sorting_asc:after,
div.material-table table th.sorting_desc:after {
  display: inline-block;
}

div.material-table table th.sorting_desc:after {
  content: "arrow_forward";
}

div.material-table table tbody tr:hover {
  background-color: #EEE;
}

div.material-table table th:first-child,
div.material-table table td:first-child {
  padding: 0 0 0 24px;
}

div.material-table table th:last-child,
div.material-table table td:last-child {
  padding: 0 14px 0 0;
}

/* Profile */
.judul_section_profile {
  font-size: 23px;
  font-weight: 500;
  color: rgb(255, 255, 255);
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 16px;
  background-color: #004689;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
}


.tengah{ align-items: center;}
.bawah{ padding: 6px 0 6px 0;}
.geser {padding: 6px 6px 0 10px;}
.tebal{	font-weight: bold; }
.birum{background-color:#e3f2fd ;}
.birujm{ background-color: #004689;}
.biruin{ background-color:  #7ba0f8;}
.biruin1{ background-color: #D3E7EE;}
.kuningjm { background-color: #FFCB05;}
.pink1{ background-color:	#FFAAA6;}
.knink{ background-color:	#ffeb3b;}
.putih{ background-color:	#FFF;}
.item{ background-color:	#000;}
.abumuda { background-color: #f5f5f5;}
.abutua { background-color: #757575;}

/* .logo-jm { background-image: img/jmlogo.png;} */
.iconweb { width:80px; }
.judulbesar { font-size: 4.5vw; }
.judulsedang { font-size: 3.5vw; }
.judulkecil { font-size: 2.5vw; }
.buatisi { font-size: 2vw; }
.isibesar { font-size: 3vw; }
.responsip { width: 100%; height: auto; }
.spasi { padding: 10px 0 20px 0;}
.spasiall { padding: 20px 20px 20px 20px;}
.marginkiri { margin: 10px 0 0 0;}
.hurufkonten { font-size: 14px;}
.huruflink {font-size: 12px;}
.judulcard{font-size: 16px;}
/*.arial{
  font-family: Arial, Helvetica, sans-serif;
}*/
.tengah {
     margin: auto;
     position: absolute;
     top: 0; left: -0; bottom: 0; right: 0;
     border: 1px solid #999;
  }
.google-maps {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
  }
.google-maps iframe, .google-maps object, .google-maps embed {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
  }

img.alldevices{
    margin: 0 auto;
    height: auto;
    max-width: 100%;
    border: none;
    display: block;
    padding: 5px 0;
  }
.judulpr {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
.bg-img {
          /* The image used */
          background-image: url("img/bg/ramadhan1.png");
        
          /* Control the height of the image */
          min-height: 380px;
        
          /* Center and scale the image nicely */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
        }
        
        /* Add styles to the form container */
.container1 {
          position: absolute;
          right: 0;
          margin: 20px;
          max-width: 300px;
          padding: 16px;
          background-color: white;
        }
.gambar {
          object-fit: contain;
          width: 100%;
          height: 600px;
        }
.icon {
  position: relative;
  /* Adjust these values accordingly */
  bottom: 0px;
  left: 0px;
  right: 5px;
}