@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
	font-family: "Inter", "Segoe UI", "Helvetica", "Arial", sans-serif;
    background-color: #efefef;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/*Typografi Stayle*/
a {
    color: #0f9647;
}
a:hover {
    color: #09602d;
}

/*Toggle Icon & Sidebar*/
.toggle.front#sidenav-toggle {
    position: absolute;
    top: 14px;
    left: 14px;
    color: #333333;
    cursor: pointer;
}
.toggle.back#sidenav-toggle {
    position: absolute;
    top: 25px;
    left: 15px;
    color: #333333;
    cursor: pointer;
}
.toggle#sidenav-toggle:hover {
    color: #0f9647;
}
img.logo-sidebar {
    width:auto;
    max-height: 48px;
    margin-left: 10px;
    margin-right: 5px;
}
i.fa.fa-angle-left, i.fa.fa-bars {
    font-size: 1.5em;
}

/*Navbar Custom*/
.navbar-default {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.125);
    margin-bottom: 15px;
}
.navbar-brand {
    padding-left: 30px;
}
.navbar {
    border-radius: 0;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
    color: #0f9647;
}
.navbar-default .navbar-brand {
    color: #333;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #0f9647;
}
.navbar-default .navbar-nav > li > a {
    color: #333;
}
.dropdown-menu.right-text {
    left: -70px;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #333;
    background-color: rgba(0,0,0,.05);
}
.dropdown-menu {
    border-radius:none;
}
a.nav-link {
    color: #333;
}
a.nav-link:hover {
    color: #0f9647;
}

/* Card Panel */
.card {
    border-radius: 0px;
}
.card-title {
    margin-bottom: 0px;
}
.card.is-icon-box:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 16px 0 rgba(0, 0, 0, 0.20);
}

/*PopUp Edit Box*/
.popup_box {
    position:absolute;
    z-index:10;   
    width:100px;
    height:auto;
    color:#333333;
    background:#ffffff;
    display: none;
}
#edit_btn.btn-block, #delete_btn.btn-block, #reset_btn.btn-block, #view_btn.btn-block {
    margin-top: 0;
}
button.btn-block.btn-popup {
    margin-top: 0;
}

/*Form Control*/
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.form-control:focus {
    border-color:#0f9647;
    box-shadow:0 0 0 .2rem rgba(15,150,71,0.05);
}
.btn-default.focus, .btn-default:focus {
    color: #fff;
    background-color:#0f9647;
    border-color:#0f9647;
}
.btn-default:hover {
    color: #fff;
    background-color:#0f9647;
    border-color:#0f9647;
}
.btn-default:active:hover, .btn-default.active:hover, .open > .dropdown-toggle.btn-default:hover, .btn-default:active:focus, .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus, .btn-default:active.focus, .btn-default.active.focus, .open > .dropdown-toggle.btn-default.focus {
    color: #fff;
    background-color:#09602d;
    border-color:#09602d;
}
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    color: #fff;
    background-color:#09602d;
    border-color:#09602d;
}

/*Pagination*/
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #0f9647;
    border-color: #0f9647;
}
.pagination > li > a, .pagination > li > span {
    color: #0f9647;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus {
    color: #09602d;
}

/*Dropdown*/
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: #0f9647;
}

/*Jumbotron*/
.jumbotron {
    padding: 25px;
    margin-bottom: 15px;
}
.jumbotron p {
    font-size: 16px;
}

/*Navbar Sidemenu*/
.nav > li > a:hover, .nav > li > a:focus {
    background-color: transparent;
    color: #0f9647;
}
.nav > li > a {
    color: #333;
    border-radius: 0;
}

/*Option Style*/
.is-no-padding {
    padding: 0;
}
.is-shadow-bottom {
    box-shadow: 0px 15px 5px -15px #111;
}
.is-shadow-panel {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.is-icon-box {
    margin-bottom: 10px;
}
.is-icon-box-fa {
    min-height: 120px;
}
.is-link {
    color: #333;
}
.is-link:hover {
    color: #0f9647;
    text-decoration: none;
}

/*Breadcrumb*/
.breadcrumb {
    border: 1px solid #c6c6c6c6;
}

/* Tabel Custom*/
.table > thead > tr > th {
    text-align: center;
    vertical-align: middle;
}
.table > tbody > tr > td {
    vertical-align: middle;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 5px;
}

/* Icon Searching */
i.fa.button-modal-ceklis {
    cursor: pointer;
}

/* Tabel datatables custom */
.page-item.active .page-link {
    color: #ffffff;
    background-color: #0f9647;
    border-color: #dee2e6;
}
.page-item.active .page-link:hover {
    color: #fff;
}

/*Login Box*/
div.card.login-box{
    max-width: 360px;
}

/* Loading Bar */
#loading .overlay {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(225,225,225,0.3);
  z-index: 99999;
  float: right;
}
#loading {
  z-index: 99999;
  display: none;
}
.loader label{ color:black;font-weight: bold; padding: 5px}
.loader {z-index: 999999; background-color: white; padding: 5px 10px 5px 5px; border-radius: 0px 0px 30px 0px; position: fixed; float: left; top: 0px}
.loader img{width: 44px}

.progress {
    position: relative;
    height: 25px;
}
.progress > .progress-type {
    position: absolute;
    left: 0px;
    font-weight: 800;
    padding: 3px 30px 2px 10px;
    color: rgb(255, 255, 255);
    background-color: rgba(25, 25, 25, 0.2);
}
.progress > .progress-completed {
    position: absolute;
    right: 0px;
    font-weight: 800;
    padding: 3px 10px 2px;
}

/* --- Card Enhancements (Bootstrap .card used by existing pages) --- */
.card {
    border-radius: 12px;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.card-body {
    padding: 20px;
}