/*Custom CSS*/

/* Color Palette */
/* https://colorpalettes.net/color-palette-4198/ */

/*general*/
.nav-apps-name{
  padding-left: 65px ;
}
.card-zoom{
  transition: transform .5s;
}
.card-zoom a{
  text-decoration: none;
  color: #323539;
}
.card-zoom a:hover{
  color: #323539;
}
.card-zoom:hover {
  transform: scale(1.03);
  color: #323539;
}
.bg-modal{
  background-color: #597387;
  color: white;
}
.bg-palette-1{
  background-color: #597387;
}
.bg-palette-2{
  background-color: #2a4158;
}
.bg-main-wallpaper{
  background-image: url('../images/dam-background.jpg');
  background-size: cover;
}
.border-bottom-palette-3{
  border-bottom: solid 2px #8c9ea3;
}
.border-top-palette-3{
  border-top: solid 2px #8c9ea3;
}
.btn-float{
  position: fixed;
  bottom: 60px;
  right: 63px;
}
.btn-float-cctv{
  position: fixed;
  bottom: 130px;
  right: 63px;
}
.btn-float i{
  font-size: 20pt;
}
@media only screen
and (min-width: 350px)
and (max-width: 550px){
  .btn-float{
    position: fixed;
    bottom: 20px;
    right: 15px;
  }
  .btn-float-cctv{
    position: fixed;
    bottom: 50px;
    right: 15px;
  }
}

/* width */
::-webkit-scrollbar {
  width: 3px;
  height: 4px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}


/* Login */
.logo-login{
  width: 100px;
  height: 100px;
}
.field-login{
  width: 300px;
}


/*Home-Telemetry*/
.logo{
  width: 50px;
  height: 50px;
  margin: 0 10px 0 0;
}
.icon-header{
  margin: 0 5px 0 0;
}
.nav-text{
  margin: 0 230px;
}
.card-bendungan{
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .2);
}
.card-bendungan .title-bendungan p{
  margin-bottom: -5px;
  color: dimgrey;
}
.card-bendungan .sensor-bendungan p{
  margin-bottom: -2px;
  font-size: 10pt;
  color: dimgrey;
}
.card-bendungan .row {
  border-radius: 5px;
  margin: 0 2px 10px 2px;
}
.card-bendungan .col-3{
  color: white;
  border-radius: 5px;
}
.map-add-bendungan{
  height: 400px;
}
.sensor-bendungan{
  padding: 7px 5px 0 0;
}
.sensor-bendungan-bawah{
  padding: 10px;
  border-radius: 4px;
  width: 48.2%;
}
.sensor-bendungan-bawah p{
  font-size: 10pt;
  color: dimgrey;
  margin-bottom: 0px;
}
.sensor-bendungan-bawah h5{
  margin-bottom: -2px;
}
.notif-bendungan {
  padding-top: 11px;
  font-size: 8pt;
}
.notif-bendungan p{
  margin-bottom: -5px;
}
.notif-bendungan i{
  font-size: 15pt;
}


/*Feature-telemetry*/
.card-menu{
  border-radius: 8px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, .2);
}
.card-menu a{
  color: #323539;
}
.feature-text p{
  margin-bottom: -3px;
  font-size: 9pt;
}
.icon-feature{
  font-size: 23pt !important;
  margin: 1px 10px 50px 0;
}
.icon-menu-size{
  width: 180px;
  height: 180px;
}


/*Sensor-telemetry*/
.main-sensor{
  color: #323539;
}
.main-sensor .sensor-text{
  color: #323539;
}
.main-sensor .list-group-item-info{
  background-color: #2a4158;
  border-bottom: 1px solid #2a4158;
  border-left: none;
}
.main-sensor .list-group a.selected{
  color: white;
  background-color: #597387;
}
.main-sensor .list-group a{
  color: white;
}
.main-sensor .list-group a:hover{
  color: white;
  background-color: #597387;
}
.main-sensor .sidebar-heading{
  height: 57px;
}
.main-sensor .sidebar-heading a{
  color: white;
  text-decoration: none;
}
.main-sensor .sidebar-heading a:hover{
  color: #FFC105;
}
.main-sensor .border-end{
  border-right: 1px solid #8294a8 !important;
}
.main-sensor  .border-bottom{
  border-bottom: 1px solid #8294a8 !important;
}
.cam-scroll{
  position: absolute;
  overflow-y: scroll;
  height: 100%;
}
.cam-sensor p {
  font-size: 10pt;
  color: #323539;
}
.chart-container {
  width: 100%;
  margin: auto;
}
@media only screen
and (min-width: 350px)
and (max-width: 920px) {
  .main-sensor .container{
    padding: 0px;
  }
  .main-sensor .sidebar-heading{
    height: 65px;
  }
}


/*camera-telemetry*/
.main-camera{
  color: #323539;
}
.main-camera .nav-link{
  color: #323539;
}
.main-camera .list-group-item-info{
  background-color: #2a4158;
}
.main-camera .list-group-item-info a{
  color: white;
}
.main-camera .sidebar-heading{
  height: 57px;
}
.main-camera .sidebar-heading a{
  color: white;
  text-decoration: none;
}
.main-camera .sidebar-heading a:hover{
  color: #FFC105;
}
.main-camera .border-end{
  border-right: 1px solid #8294a8 !important;
}
.main-camera .border-bottom{
  border-bottom: 1px solid #8294a8 !important;
}
.camera-scroll{
  overflow-y: scroll;
  height: 750px;
}
.camera-scroll a{
  text-decoration: none;
  color: #323539;
}
.btn-nav-left{
  position: relative;
  bottom: 75px;
  left: 10px;
}
.btn-nav-up{
  position: relative;
  bottom: 109px;
  left: 10px;
}
.btn-nav-down{
  position: relative;
  bottom: 41px;
  left: -59px;
}
.btn-nav-zoom-in{
  position: relative;
  bottom: 223px;
  left: 45px;
}
.btn-nav-zoom-out{
  position: relative;
  bottom: 220px;
  left: 45px;
}

@media only screen
and (min-width: 350px)
and (max-width: 920px) {
  .main-camera .container{
    padding: 0px;
  }
}
@media only screen
and (min-width: 350px)
and (max-width: 550px){
  .btn-nav-up{
    position: relative;
    bottom: -10px;
    left: 0px;
  }
  .btn-nav-left{
    position: relative;
    bottom: -43px;
    left: 0px;
  }
  .btn-nav-down{
    position: relative;
    bottom: -77px;
    left: -70px;
  }
  .btn-nav-zoom-in{
    position: relative;
    bottom: 21px;
    left: 322px;
  }
  .btn-nav-zoom-out{
    position: relative;
    bottom: 52px;
    left: 287px;
  }
}


/*network-telemetry*/
.main-network .map-telemetry{
  height: 500px;
}
.main-network .card-body i{
  font-size: 50pt;
}
.main-network .navbar a{
  color: white;
  font-size: 13pt;
  text-decoration: none;
}
.main-network .navbar a:hover{
  color: #FFC105;
}
.main-network .border-bottom{
  border-bottom: 1px solid #8294a8 !important;
}


/*manual-input*/
.form-manual-input{
  padding: 10px 30px 15px 30px;
}
.main-manual-input .navbar a{
  color: white;
  font-size: 13pt;
  text-decoration: none;
}
.main-manual-input .navbar a:hover{
  color: #FFC105;
}
.main-manual-input .border-bottom{
  border-bottom: 1px solid #8294a8 !important;
}


/*calculator*/
.calculator{
  height: auto;
}
.main-calculator .navbar a{
  color: white;
  font-size: 13pt;
  text-decoration: none;
}
.main-calculator .navbar a:hover{
  color: #FFC105;
}
.main-calculator .border-bottom{
  border-bottom: 1px solid #8294a8 !important;
}


/*setting*/
.main-setting table{
  border: 1px solid;
}
.main-setting .navbar a{
  color: white;
  font-size: 13pt;
  text-decoration: none;
}
.main-setting .navbar a:hover{
  color: #FFC105;
}
.main-setting .border-bottom{
  border-bottom: 1px solid #8294a8 !important;
}
.map-edit-bendungan{
  height: 400px;
}


/*account management*/
.main-account-management{
  display: flex;
}

.main-account-management .navbar a{
  color: white;
  font-size: 13pt;
  text-decoration: none;
}
.main-account-management .navbar a:hover{
  color: #FFC105;
}

/*account-setting*/
.main-account-management{
  display: flex;
}

.main-account-setting .navbar a{
  color: white;
  font-size: 13pt;
  text-decoration: none;
}
.main-account-setting .navbar a:hover{
  color: #FFC105;
}

.dataTables_scrollHeadInner{
  width: 100% !important;
}
.dataTables_scrollHeadInner table{
  width: 100% !important;
}