/* Gaya default navbar */
.navbar {
    background-color: #35654d;
    padding: 0px 10px;
}

.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Warna domain itsensing */
.itsensing-style{
    background-color: #1e9459;
}

.agrosensing-style{
    background-color: #3E7D07;
}

.minero-style{
    background-color: #eb7d34;
}


/* Warna domain bluemarine */
.bluemarine-style {
    background-color: #244E73;
}

/* Warna domain default */
.default-style {
    background-color: #35654d;
}

.navbar li {
    display: inline;
}
.navbar {
  height: 50px;
}

.navbar a {
    text-decoration: none;
}

.navbar-nav {
    flex-direction: column;
    text-align: center;
}

.navbar-collapse {
    display: none;

}
.nav-link {
  margin: 0px;
  display: ruby;
}
.nav-item {
  padding: 0px;
  text-align: left;
  width: 100%;
}
/* Navbar responsive */

@media only screen and (max-width: 1399px) {
    .navbar {
        padding: 5px;
    }

    /* Gaya untuk menampilkan daftar menu saat tombol toggler diklik */
    .navbar-collapse.show{
        display: block;
    }

    .nav-link {
        margin-left: 5%;
    }
}


/* Container isi */
.custom-container {
    padding: 20px; /* Sesuaikan jarak dari tepi */
    min-height: 80vh;
    /* Set kontainer untuk memiliki tinggi minimum sebesar viewport */
  }

/* Notification Bar */
.center{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Notifikasi logo */
.notification {
    width: 50px;
    height: auto;
    border-radius: 50%;
    position: relative;
}

.num {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgb(230, 85, 85);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: white;
}

/* Input untuk notification */
.notification input {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    /* background: red; */
    appearance: none;
    -webkit-appearance: none;
}

/* Posisi dan bentuk Box */
.notification .box {
    width: 250px;
    height: 250px;
    background: rgb(236, 234, 234);
    position: absolute;
    z-index: 100;
    border-radius: 20px;
    bottom: -260px;
    left: -200px;
    transition: clip-path 0.2s;
    clip-path: circle(0% at 100% 100%);
}
/* setelah diklik */
.notification input:checked ~ .box{
    clip-path: circle(140% at 100% 100%);
}
/* heading notification */
.notification .heading {
  margin: 10px;
  background: rgb(43, 43, 43);
  border-radius: 18px;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.432);
  width: 91%;
  height: 40px;
}
/* box isi notification */
.notification_box{
    margin: 0.4em auto 0 auto;
    width: 85%;
    height: 190px;
    overflow-x: auto;
}

/* list isi */
.notification_box p{
    margin-bottom: 0.4em;
    color: rgb(43, 43, 43);
}

.notification_box::-webkit-scrollbar{
    width: 2px;
}

.notification_box::-webkit-scrollbar-thumb{
    background: #f1f1f1;
}

.notification_box::-webkit-scrollbar-thumb{
    background: #888;
}

.notification_box::-webkit-scrollbar-thumb::hover{
    background: #555;
}

/* Notifikasi logs */
.logs {
    width: 30px;
    height: 100px;
    /* background: wheat; */
    border-radius: 50%;
    position: relative;
}

.num{
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgb(230, 85, 85);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: white;
}

/* Input untuk logs */
.logs input {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    /* background: red; */
    appearance: none;
    -webkit-appearance: none;
}

/* Posisi dan bentuk Box */
.logs .box {
    width: 350px;
    height: 250px;
    background: #fff;
    position: absolute;
    z-index: 2005;
    border: 5px solid #c0bcbc;
    border-radius: 20px;
    bottom: -150px;
    left: -355px;
    transition: clip-path 0.2s;
    clip-path: circle(0% at 100% 100%);
}

@media (max-width: 767px) {
    .logs{
        display: none;
    }
    .logs .box {
        bottom: -175px;
        left: -355px;
    }
}

/* Responsive untuk box pada logs */
@media (max-width:460px) {
    .logs .box{
        width: 300px;
        left: -305px;
    }
}

@media (max-width:400px) {
    .logs .box{
        width: 250px;
        left: -255px;
    }
}

/* setelah diklik */
.logs input:checked ~ .box{
    clip-path: circle(140% at 100% 100%);
}
/* heading logs */
.logs .heading {
    margin: 0.2em auto;
    background: #35654d;
    border-radius: 18px;
    color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.432);
    width: 95%;
    height: 40px;
}
/* box isi logs */
.logs_box{
    margin: 0.4em auto 0 auto;
    width: 85%;
    height: 190px;
    overflow-x: auto;
}

/* list isi */
.logs_box p{
    margin-bottom: 0.4em;
    margin-right: 5px;
    color: rgb(43, 43, 43);
}

/* log box tanggal */
.logs_box p.date {
    margin-left: 20px; /* Margin kiri untuk tanggal */
    margin-right: 10px;
    border-bottom: 1px solid #ccc; /* Garis bawah berwarna abu-abu */
    padding-bottom: 5px; /* Ruang di bawah garis */
}

.logs_box::-webkit-scrollbar{
    /* margin-left: ; */
    width: 5px;
}

.logs_box::-webkit-scrollbar-thumb{
    background: #f1f1f1;
}

.logs_box::-webkit-scrollbar-thumb{
    background: #888;
}

.logs_box::-webkit-scrollbar-thumb::hover{
    background: #555;
}

/* Bentuk log */
.log-card {
  background-color: #c0bcbc;
  color: #fffdfd;
  border-radius: 5px;
  word-break: break-all;
  text-align: center;
  padding: 0px 5px;
  margin-top: 5px;
}

@media (max-width:767px) {
    .log-card {
        font-size: larger;
        width: 18px;
        height: 74px;
    }

    .logs {
        height: 76px;
    }
}

.col-md-12 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Atur agar logs tetap di sebelah kiri */
    gap: 5px;
}



/* Mode mobile pada notification logo */
@media (max-width: 1399px) {
    .notification {
        left: 50%;
        transform: translateX(-50%);

    }

    .notification_box {
        display: none;
    }

    .notification .box {
        max-width: 300px;
        width: 100%;
        height: auto;
        bottom: -60px;
        left: 0;
    }


    /* .notification .box {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 300px;
        margin-top: 200px;
        z-index: 1000;

    } */
}

.slide {
    /* display: none;
    visibility: hidden; */
    height: 100%;
    width: 190px;
    position: absolute;
    background-color: #fff;
    transition: 0.5s ease;
}

/* Card Responsive map */
@media (max-width: 2200px) {
    .respon {
        max-width: 100%; /* Maksimum lebar card*/
        height: auto; /* Menetapkan tinggi card menjadi otomatis agar card dapat menyesuaikan konten */
        margin: 0 auto;
    }
}

/* Card responsive dashboard */
@media (max-width: 1700px) {
    .responve {
        max-width: 100%; /* Maksimum lebar card tetap*/
        height: auto; /* Menetapkan tinggi card menjadi otomatis agar card dapat menyesuaikan konten */

    }
}

/* Card Operational responsive */

@media (max-width: 1127px) {
    .responsivee {
        max-width: 140px; /* Maksimum lebar card*/
        height: auto; /* Menetapkan tinggi card menjadi otomatis agar card dapat menyesuaikan konten */

    }
}

@media (max-width: 887px) {
    .responsivee {
        max-width: 110px; /* Maksimum lebar card*/
        height: auto; /* Menetapkan tinggi card menjadi otomatis agar card dapat menyesuaikan konten */

    }
}

@media (max-width: 767px) {
    .responsivee {
        max-width: 100%; /* Maksimum lebar card*/
        height: auto; /* Menetapkan tinggi card menjadi otomatis agar card dapat menyesuaikan konten */

    }
}

/* card login */
@media (max-width: 470px) {
    .card-login {
        margin-top: -100px;

    }
}

/* Button responsive */
@media (max-width: 470px) {
    .card-login {
        margin-top: -100px;

    }
}

/* Ukuran col untuk button*/
@media (max-width:1342px) {
    .col-resp {
        max-width: 100%;
    }
}

/* Card untuk fitur */
.card-fitur{
    width: 60px;
    height:60px;
    position: absolute;
}

/* Untuk Option */
.selectForm{
    /* background-color: #35654d; */
    color: rgb(231, 224, 224);
}

/* Hover untuk image */
a:hover img {
    /* Properti CSS saat mouse diarahkan ke gambar */
    transform: scale(1.2); /* Contoh: Memperbesar gambar */
}

/* Card untuk detail */
.card-resp {
    /* background-color: #35654d; */
    color: rgb(153, 148, 148);
}

@media (max-width:900px) {
    .card-resp {
        max-width: 100%;
        font-size: 12px;
    }
}

@media (max-width:767px) {
    .card-resp {
        max-width: 100%;
        font-size: 16px;
    }
}

/* Hover untuk icon*/
.iconsize {
    transition: transform 0.3s ease;
  }
.iconsize:hover {
    transform: scale(1.5);
}

/* Checklist menyala */
.checked {
    color: white;
}

/* Container Button */
.button-container {
    display: flex;
    gap: 10px;
}

.hide{
    display: none;
    visibility: hidden;
}

/* Zoom Open Layer */
.ol-zoom {
    display: none !important;
}

.option-resp {
    color: white;
}

@media (max-width:455px) {
    .option-resp {
        max-width: 120px;
    }
}

@media (max-width:382px) {
    .option-resp {
        max-width: 108px;
    }
}

/* Tombol button */
.btn-bg {
    color: rgb(206, 200, 200);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }

  .btn-bg:hover {
    background-color: #cccfce;
    color: white;
  }


/* Image profile navbar */
.img-profile-navbar {
    object-fit: cover;
    object-position: center;
    margin-right: 10px;
    height: 35px;
  width: 35px;
}
}

/* Slider */
.slider-container {
    display: flex;
    align-items: center;
    padding: 10px 0px 0 40px;
}

.hidden {
    display: none;
    visibility: hidden;
}

.slider-button {
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1.5em;
}

.slider-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.date-box {
    width: 60px;
  height: 60px;
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #2e8b57;
  color: white;
  border-radius: 10px;
  font-size: 9px;
  transition: transform 0.3s, opacity 0.3s;
}

.date-box.active {
    border: 3px solid #90ee90;
    transform: scale(1.2);
}

.date-box.inactive {
    opacity: 0.6;
}
.slider-container.sliderCont {
 text-align: center;
  display: flex;
  margin-top: 10px;
}
.date-slider {
  display: inline-flex;
  overflow: hidden;
  width: 80%;
}
.slider-button {
  width: 10%;
}

.date-box-container {
    display: flex;
    transition: transform 0.3s;
}

.content {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

/* chart area table*/
#area-chart {
    height: 300px;
}

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}


/* Pie chart */
#pie-chart {
    width: 50%;
}
.highcharts-pie,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

/* Rose Chart */
#container {
    margin-left: 5%;
    height: 350px;
    width: 50%;
}

/* .highcharts-rose,
.highcharts-data-table table {
    min-width: 320px;
    max-width: 300px;
    margin: 1em auto;
} */

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

/* Credit highchart */
.highcharts-credits {
    display: none;
}

/* Menghapus copyright open layer */
.ol-attribution ul {
    display: none;
}

/* Responsive paa sidebar */
.sidebar-resp {
    float: left;
    box-sizing: border-box;
    padding: 15px;
}

@media (max-width:988px) {
    .sidebar-resp {
        float: none; /* Hilangkan float untuk membuatnya tumpuk */
        width: 100%; /* Setiap sidebar mengambil 100% lebar */
    }
}
.logs {
   opacity: 0;
  transition: 0.5s all ease;
  position: fixed;
  z-index: 10001;
  right: -38px;
  top: 121px;
}
.row.py-3 {
  overflow: hidden;
}
.row:hover .logs {
   right: 4px;
  opacity: 1;
}
.heading  p {
  margin: 0;
}