/*!
 *   AdminLTE v2.4.0 - Modern Redesign
 *   Customized for Clean, Soft Shadows, and Rounded UI
 */
html, body {
  height: 100%;
}
.layout-boxed html, .layout-boxed body {
  height: 100%;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #F4F8F7;
  color: #386A62;
}
.wrapper {
  height: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
.wrapper:before, .wrapper:after {
  content: " ";
  display: table;
}
.wrapper:after {
  clear: both;
}
.layout-boxed .wrapper {
  max-width: 1250px;
  margin: 0 auto;
  min-height: 100%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  position: relative;
}
.content-wrapper, .main-footer {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-left: 250px;
  z-index: 820;
}

.layout-top-nav .content-wrapper, .layout-top-nav .main-footer {
  margin-left: 0;
}

.box {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    overflow: hidden;
}

.box-header {
    border-radius: 16px 16px 0 0;
}

.small-box {
    border-radius: 18px;
    overflow: hidden;
}

.info-box {
    border-radius: 16px;
}

.btn {
    border-radius: 8px;
}

.form-control {
    border-radius: 8px;
}


@media (max-width: 767px) {
  .content-wrapper, .main-footer {
    margin-left: 0;
  }
}
@media (min-width: 768px) {
  .sidebar-collapse .content-wrapper, .sidebar-collapse .main-footer {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .sidebar-open .content-wrapper, .sidebar-open .main-footer {
    -webkit-transform: translate(250px, 0);
    -ms-transform: translate(250px, 0);
    -o-transform: translate(250px, 0);
    transform: translate(250px, 0);
  }
}
.content-wrapper {
  min-height: 100%;
  background-color: #F4F8F7;
  z-index: 800;
}
.main-footer {
  background: #ffffff;
  padding: 0px 10px;
  color: #6D8580;
  border-top: 0px solid #DCE9E6;
}
.fixed .main-header, .fixed .main-sidebar, .fixed .left-side {
  position: fixed;
}
.fixed .main-header {
  top: 0;
  right: 0;
  left: 0;
}
.fixed .content-wrapper, .fixed .right-side {
  padding-top: 60px;
}
@media (max-width: 767px) {
  .fixed .content-wrapper, .fixed .right-side {
    padding-top: 110px;
  }
}
.content {
  min-height: 250px;
  padding: 20px;
  margin-right: auto;
  margin-left: auto;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter', sans-serif;
  color: #176B5E;
}
a {
  color: #168F7B;
}
a:hover, a:active, a:focus {
  outline: none;
  text-decoration: none;
  color: #117564;
}
.page-header {
  margin: 10px 0 20px 0;
  font-size: 22px;
  border-bottom: 1px solid #DCE9E6;
}
.page-header > small {
  color: #6D8580;
  display: block;
  margin-top: 5px;
}
.main-header {
  position: relative;
  max-height: 100px;
  z-index: 1030;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.main-header .navbar {
  -webkit-transition: margin-left 0.3s ease;
  -o-transition: margin-left 0.3s ease;
  transition: margin-left 0.3s ease;
  margin-bottom: 0;
  margin-left: 250px;
  border: none;
  min-height: 60px;
  border-radius: 0;
  background-color: #ffffff;
}
.layout-top-nav .main-header .navbar {
  margin-left: 0;
}
.main-header .form-control {
  background: #EDF5F3;
  border-color: transparent;
  border-radius: 8px;
}
.main-header .form-control:focus {
  background: #ffffff;
  border-color: #168F7B;
}
.main-header .navbar-custom-menu, .main-header .navbar-right {
  float: right;
}
.main-header .sidebar-toggle {
  float: left;
  background-color: transparent;
  background-image: none;
  padding: 18px 20px;
  color: #52736D;
}
.main-header .sidebar-toggle:hover {
  color: #168F7B;
  background: #FAFCFB;
}
.main-header .logo {
  -webkit-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease;
  display: block;
  float: left;
  height: 60px;
  font-size: 20px;
  line-height: 60px;
  text-align: center;
  width: 250px;
  font-weight: 600;
  background-color: #176B5E;
  color: #ffffff;
  padding: 0 15px;
  overflow: hidden;
}
.content-header {
  position: relative;
  padding: 20px 20px 0 20px;
}
.content-header > h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}
.content-header > h1 > small {
  font-size: 14px;
  display: inline-block;
  padding-left: 8px;
  color: #6D8580;
}
.content-header > .breadcrumb {
  float: right;
  background: transparent;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 12px;
  padding: 7px 5px;
  position: absolute;
  top: 20px;
  right: 20px;
  border-radius: 6px;
}
.main-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 60px;
  min-height: 100%;
  width: 250px;
  z-index: 810;
  background-color: #176B5E;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.user-panel {
  position: relative;
  width: 100%;
  padding: 15px;
  overflow: hidden;
  border-bottom: 1px solid #386A62;
}
.user-panel > .image > img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.user-panel > .info {
  padding: 2px 5px 5px 15px;
  line-height: 1;
  position: absolute;
  left: 55px;
  color: #FAFCFB;
}
.user-panel > .info > p {
  font-weight: 600;
  margin-bottom: 6px;
}
.user-panel > .info > a {
  text-decoration: none;
  font-size: 12px;
  color: #9AB2AD;
}
.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 10px;
}
.sidebar-menu > li {
  position: relative;
  margin: 4px 0;
}
.sidebar-menu > li > a {
  padding: 12px 15px;
  display: block;
  color: #C9DCD8;
  border-radius: 8px;
  font-weight: 500;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.sidebar-menu > li > a:hover {
  background: #386A62;
  color: #ffffff;
}
.sidebar-menu li.header {
  padding: 10px 15px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6D8580;
  font-weight: 600;
}
.form-control {
  border-radius: 8px;
  box-shadow: none;
  border-color: #C9DCD8;
  padding: 10px 14px;
  height: auto;
  font-size: 14px;
}
.form-control:focus {
  border-color: #168F7B;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.small-box {
  border-radius: 12px;
  position: relative;
  display: block;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  background: #fff;
  border: none;
}
.small-box > .inner {
  padding: 20px;
}
.small-box > .small-box-footer {
  position: relative;
  text-align: center;
  padding: 8px 0;
  color: rgba(255, 255, 255, 0.9);
  display: block;
  z-index: 10;
  background: rgba(0, 0, 0, 0.05);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.small-box h3 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #ffffff;
}
.small-box p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.small-box .icon {
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 0;
  font-size: 64px;
  color: rgba(255, 255, 255, 0.2);
}
.box {
  position: relative;
  border-radius: 12px;
  background: #ffffff;
  border-top: none;
  margin-bottom: 20px;
  width: 100%;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  border: 1px solid #DCE9E6;
}
.box-header {
  color: #176B5E;
  display: block;
  padding: 20px;
  position: relative;
  border-bottom: 1px solid #EDF5F3;
}
.box-header .box-title {
  font-size: 18px;
  font-weight: 600;
}
.box-body {
  padding: 20px;
}
.box-footer {
  border-top: 1px solid #EDF5F3;
  padding: 15px 20px;
  background-color: #ffffff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.btn {
  border-radius: 50% !important;
  box-shadow: none;
  border: 1px solid transparent;
  padding: 10px 18px;
  font-weight: 500;
  font-size: 14px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.btn-primary {
  background-color: #168F7B;
  border-color: #168F7B;
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #117564;
  border-color: #117564;
}
.btn-success {
  background-color: #2EAD96;
  border-color: #2EAD96;
  color: #ffffff;
}
.btn-danger {
  background-color: #D9798B;
  border-color: #D9798B;
  color: #ffffff;
}
.btn-warning {
  background-color: #D4A94F;
  border-color: #D4A94F;
  color: #ffffff;
}
.btn-info {
  background-color: #43A9B7;
  border-color: #43A9B7;
  color: #ffffff;
}
.modal-content {
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: none;
}
.modal-header, .modal-footer {
  border-color: #EDF5F3;
  padding: 20px;
}

/* =========================================================
   SIMSS GLOBAL THEME - HIJAU SOFT
   Satu sumber warna untuk AdminLTE
   ========================================================= */

body{
    background-color:#F4F8F7 !important;
    color:#334F4A !important;
}

.content-wrapper{
    background-color:#F4F8F7 !important;
}

/* Link */
a{
    color:#168F7B !important;
}
a:hover,
a:focus{
    color:#117564 !important;
}

/* Sidebar dasar AdminLTE */
.main-sidebar,
.left-side{
    background:linear-gradient(
        180deg,
        #009688 0%,
        #008F83 55%,
        #007F73 100%
    ) !important;
}

.sidebar-menu > li > a{
    color:#F1FBF9 !important;
}

.sidebar-menu > li > a:hover{
    background:rgba(255,255,255,.12) !important;
    color:#FFFFFF !important;
}

/* Header tabel */
.table > thead > tr > th,
.table thead th{
    color:#28685F !important;
    background:linear-gradient(
        135deg,
        #EAF8F5 0%,
        #DDF2ED 55%,
        #D2ECE7 100%
    ) !important;
    border-bottom:1px solid #C3DED8 !important;
}

/* Tombol primary */
.btn-primary{
    color:#FFFFFF !important;
    background:#168F7B !important;
    border-color:#168F7B !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
    color:#FFFFFF !important;
    background:#117564 !important;
    border-color:#117564 !important;
}

/* Success - hijau soft */
.btn-success{
    color:#176B5E !important;
    background:#DDF3EE !important;
    border-color:#BFE5DC !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active{
    color:#12584E !important;
    background:#CBEAE3 !important;
    border-color:#A9D9D0 !important;
}

/* Warning - kuning lembut */
.btn-warning{
    color:#80621F !important;
    background:#FFF3D9 !important;
    border-color:#F0DDAF !important;
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active{
    color:#6E5216 !important;
    background:#FBE9BE !important;
    border-color:#E8D09A !important;
}

/* Danger - merah/rose lembut */
.btn-danger{
    color:#A95467 !important;
    background:#FCECEF !important;
    border-color:#F0D1D9 !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active{
    color:#914659 !important;
    background:#F8DCE3 !important;
    border-color:#E9C0CA !important;
}

/* Info - teal muda */
.btn-info{
    color:#28737D !important;
    background:#E4F4F6 !important;
    border-color:#C5E4E8 !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active{
    color:#21636C !important;
    background:#D4ECEF !important;
    border-color:#B4DCE1 !important;
}

/* Alert */
.alert-success{
    color:#286D60 !important;
    background:#EAF7F3 !important;
    border-color:#C8E8DF !important;
}
.alert-warning{
    color:#80631F !important;
    background:#FFF7E6 !important;
    border-color:#F0DFB9 !important;
}
.alert-danger{
    color:#A95768 !important;
    background:#FFF0F3 !important;
    border-color:#F0D4DC !important;
}
.alert-info{
    color:#2B7180 !important;
    background:#ECF8FA !important;
    border-color:#CBE8EC !important;
}

/* Label */
.label-success{color:#176B5E !important;background:#DDF3EE !important}
.label-warning{color:#80621F !important;background:#FFF3D9 !important}
.label-danger{color:#A95467 !important;background:#FCECEF !important}
.label-info{color:#28737D !important;background:#E4F4F6 !important}

/* Focus */
.form-control:focus{
    border-color:#76BDB1 !important;
    box-shadow:0 0 0 3px rgba(22,143,123,.13) !important;
}