.nav-link.active {
     background: rgba(120, 206, 49, 1) !important;
 }

 .nav-pills .nav-link:not(.active) {
     color: #333 !important;
 }

 .page-title{
    font-weight: bold;
    font-size: 25px;
 }

 .page-desc{
    color:#8c8c8c
 }

 /** LOGIN PART ***/
 .login-header h2 {
     font-size: 18px;
     font-weight: 700;
     text-align: center;
     margin-bottom: 0px;
 }

 .login-header h3 {
     font-size: 16px;
     font-weight: 400;
     text-align: center;
     margin-bottom: 0px;
 }

 .login-header p {
     font-size: 12px;
     text-align: center;
     font-weight: 400;
 }

 .login-header img {
     width: 130px;
     margin: 0px auto;
 }

 .login-header {
     background: rgba(223, 239, 252, 7);
     padding: 15px;
     margin: 0px -15px;
     margin-top: -15px;
     border-radius: 5px;
     margin-bottom: 30px;
 }

 #login-form table {
     width: 100%;
 }

 #login-form table tr {
     border: 0px;
 }

 html,
 body.auth-page {
     background: rgba(52, 92, 19, 1) !important;
     font-family: 'Open Sans', sans-serif;
 }

 .card-group {
     box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
 }

 #login-form .captcha-img {
     border-radius: 5px;
 }

 /*** END LOGIN ***/


 span.form-info {
     font-size: 14px !important;
     color: #666;
     margin-top: -15px;
     position: relative;
     display: block;
 }

 .link-only {
     text-decoration: none;
 }

 .icon-menu {
     display: inline-block;
     width: 15px;
     text-align: center;
     font-weight: bold;
     font-size:18px
     /* margin-right: px; */
 }

 .sidebar-brand,
 .dashboard-logo-wrapper {
     width: 100%;
     padding-left: 10px;
     /* text-align: center; */
     display: block;
 }

 .dashboard-logo-wrapper .dashboard-logo {
    width: 130px;
     /* max-width: 200px; */
     margin: 15px auto;
 }

 .sidebar-brand h3 {
     font-weight: 700;
     font-weight: 18px;
 }

 .sidebar-brand h5 {
     font-size: 14px;
     font-weight: 700;
 }

 .sidebar {
     box-shadow: 0px 0px 10px rgba(0, 0, 0, .6);
 }

 .card-widget h4 {
     font-weight: 700;
 }

 .card-widget {
     margin-top: 15px;
     box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
     border-radius: 10px;
     overflow: hidden;
     border: 1px solid #EEE;
 }

 .card-widget a.widget-button {
     position: absolute;
     right: 10px;
     bottom: 10px;
     border-radius: 50%;
     background: #FFF;
     color: #222;
     width: 25px;
     text-align: center;
     padding: 5px;
 }

 .card-widget a.widget-button:hover {
     background: #222;
     color: #FFF;
 }

 .sidebar-dark {
     background: rgba(52, 92, 19, 1);
     ;
 }

 .sidebar-nav .nav-link:hover,
 .sidebar-nav .nav-link.active {
     background-color: rgba(52, 92, 19, 1);
 }

 .card.card-widget .card-widget-image {
     background-position-x: center;
     background-position-y: center;
     background-repeat: no-repeat;
     background-size: contain;
     min-height: 140px;
     background-color: #e6f4fe;
 }

 .wrapper {
     width: 100%;
     padding-left: var(--cui-sidebar-occupy-start, 0);
     padding-right: var(--cui-sidebar-occupy-end, 0);
     will-change: auto;
     transition: padding .15s;
 }

 .card.card-widget .card-body {
    /* box-shadow: 0px 0px 10px rgba(0, 0, 0, .6); */
     padding: 0px;
     padding-right: 30px;
     padding-top: 5px;
 }

 .card.card-widget .card-body h4 {
     font-size: 16px;
     margin: 5px 0px;
 }

 .card-menu {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);
 }

 .header>.container-fluid,
 .header>.container-sm,
 .header>.container-md,
 .header>.container-lg,
 .header>.container-xl,
 .header>.container-xxl,
 .sidebar-header {
     min-height: calc(4rem + 1px);
 }

 .header>.container,
 .header>.container-fluid,
 .header>.container-sm,
 .header>.container-md,
 .header>.container-lg,
 .header>.container-xl,
 .header>.container-xxl,
 .header .navbar>.container,
 .header .navbar>.container-fluid,
 .header .navbar>.container-sm,
 .header .navbar>.container-md,
 .header .navbar>.container-lg,
 .header .navbar>.container-xl,
 .header .navbar>.container-xxl {
     display: flex;
     flex-wrap: inherit;
     align-items: center;
     justify-content: space-between;
 }

 .text-right {
     text-align: right;
 }

 .card-header,
  #datatables th,
 .datatables th {
     font-size: 14px;
     /* font-weight: 600 !important; */
     /* color: #FFF; */
 }

 .card-header,
   #datatables thead,
 .datatables thead {

     /* background: rgba(120, 206, 49, 1); */
 }


 table tbody tr {
     border-bottom: 1px solid #CCC;
 }

  #datatables th,
 .datatables th {
     text-align: center;
 }

 select[name="DataTables_Table_0_length"] {
     margin-right: 5px;
 }

 .card-header {
     font-weight: 700;
 }

 .btn-primary {
     --cui-btn-color: #fff;
     --cui-btn-bg: #4297d7;
     --cui-btn-border-color: #4297d7;
     --cui-btn-hover-color: #fff;
     --cui-btn-hover-bg: #206192;
     --cui-btn-hover-border-color: #206192;
     --cui-btn-focus-shadow-rgb: 113, 111, 220;
     --cui-btn-active-color: #fff;
     --cui-btn-active-bg: #206192;
     --cui-btn-active-border-color: #206192;
     --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
     --cui-btn-disabled-color: #fff;
     --cui-btn-disabled-bg: #4297d7;
     --cui-btn-disabled-border-color: #4297d7;
 }

 .btn-primary:hover {
     --cui-btn-color: #fff;
     --cui-btn-bg: #4297d7;
     --cui-btn-border-color: #4297d7;
     --cui-btn-hover-color: #fff;
     --cui-btn-hover-bg: #206192;
     --cui-btn-hover-border-color: #206192;
     --cui-btn-focus-shadow-rgb: 113, 111, 220;
     --cui-btn-active-color: #fff;
     --cui-btn-active-bg: #206192;
     --cui-btn-active-border-color: #206192;
     --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
     --cui-btn-disabled-color: #fff;
     --cui-btn-disabled-bg: #4297d7;
     --cui-btn-disabled-border-color: #4297d7;
 }

 .sidebar-nav>li:first-child>a.nav-link {
     /* border-top: 1px solid rgba(255, 255, 255, .6); */
 }

 .sidebar-header {
     padding-left: 10px;
     padding-right: 10px;
 }

 .dashboard-logo-wrapper {
     /*     border-bottom: 1px solid rgba(255, 255, 255, .6);*/
     /* margin-bottom: 10px;
     padding-bottom: 10px; */
 }

 .nav-group-items .nav-group-toggle {
     padding-left: 15px !important;
 }

 .level2 {
     display: none;
 }

 .level2.show {
     display: block;
     height: auto !important;
 }

 ul.sidebar-nav li a.nav-link {
     /* border-bottom: 1px solid #FFF; */
     border-radius: 0px !important;
 }

 body>.wrapper * {
     /* font-size: 14px !important; */
 }

 body>.wrapper>.body {
     padding-bottom: 100px;
 }

 .info.text-right p {
     margin: 0px;
 }

 .profiles {
     display: flex;
 }

 .profiles .text-right {
     float: left;
 }

 .profiles .img-avatar {
     height: 32px;
     margin: 0px 14px;
     margin-top: 5px;
 }

 .header-nav .nav-item a {
     color: #777;
 }

 /* footer { */
     /* margin-left: var(--cui-sidebar-occupy-start); */
     /* position: fixed;
     bottom: 0;
     left: 0;
     width: calc(100% - var(--cui-sidebar-occupy-start, 0)); */
 /* } */


 #datatables.one-row td,
 .datatables.one-row td {
     max-width: 50px !important;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
 }
/*
 .show-stasiun {
     font-weight: 700;
 } */

 #datatables thead>tr>th,
 .datatables thead>tr>th {
     text-align: center;
 }

 li.subtitle-header {
     font-size: 16px !important;
     font-weight: 700;
 }
 #tutrial-view {
     width: 100%;
     height: 80vh;
     border: 1px solid #CCC;
 }

 .select2-container {
     display: block;
     width: 100% !important;
 }

 .btn-danger {
    --cui-btn-color: #fff;
    --cui-btn-bg: #d74442;
    --cui-btn-border-color: #d74442;
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: #f28787;
    --cui-btn-hover-border-color: #d74442;
    --cui-btn-focus-shadow-rgb: 113, 111, 220;
    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: #d74442;
    --cui-btn-active-border-color: #d74442;
    --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
    --cui-btn-disabled-color: #fff;
    --cui-btn-disabled-bg: #d74442;
    --cui-btn-disabled-border-color: #d74442;
}
.btn-success {
    --cui-btn-color: #fff;
    --cui-btn-bg: rgb(52, 92, 19, 1);
    --cui-btn-border-color: #65ca58;
    --cui-btn-hover-color: #fff;
    --cui-btn-hover-bg: #57bf4d;
    --cui-btn-hover-border-color: #65ca58;
    --cui-btn-focus-shadow-rgb: 113, 111, 220;
    --cui-btn-active-color: #fff;
    --cui-btn-active-bg: #65ca58;
    --cui-btn-active-border-color: #65ca58;
    --cui-btn-active-shadow: inset 0 3px 5px rgba(8, 10, 12, 0.125);
    --cui-btn-disabled-color: #fff;
    --cui-btn-disabled-bg: #65ca58;
    --cui-btn-disabled-border-color: #65ca58;
}

.form-label-footer
{
    font-size: 15px;
}

.form-control-footer{
    background: rgba(16, 16, 16, 0.05);
    width: 100%;
    border: none;
    padding: 16px 10px 16px 10px;
}

.form-title{
    font-family: 'Open Sans', sans-serif;
}

.btn-login{
    border: none;
    color: #fff;
    background: #65ca58;
    padding: 12px;
}

.info-text, .info-text a {
    font-size: 13px;
    text-decoration: none;
    color: rgb(86, 86, 86);
}

.btn-save{
    width: 400px;
    font-weight: bold;
    border: none;
    color: #fff;
    background: rgba(52, 92, 19, 1);
    padding: 12px;
}

.garis{
    margin: 0px 0px 30px 20px;
    width: 25%;
    border-top: 3px solid rgb(52, 92, 19, 1);
}

.flex {
    display: flex; /* Menggunakan Flexbox */
    justify-content: space-between; /* Menyebar elemen di antara kiri dan kanan */
    align-items: center; /* Menjaga agar elemen berada di tengah vertikal */
}

.page-title, .page-desc {
    margin: 0; /* Menghilangkan margin default pada h1 dan p */
}

.btn-text {
    margin-left: auto; /* Memastikan tombol berada di paling kanan */
}


.btn-add {
    border-radius: none;
    margin-right: 40px;;
    width: 200px;
    font-weight: bold;
    border: none;
    color: #fff;
    background: rgba(52, 92, 19, 1);
    padding: 12px;
}

.btn-save-form {
    border-radius: none;
    padding: 10px;
    /* margin-right: 40px;; */
    /* width: 200px; */
    font-weight: bold;
    border: none;
    color: #fff;
    background: rgba(52, 92, 19, 1);
}