/*--------------------------------------------------------------
# Pro Solution | Business Template
# Version 1.0
# Kang Mohan
--------------------------------------------------------------*/





html,
body {
  height: 100%;
  margin: 0;
}



/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
  --primary: #61CE70 !important;
  --secondary: #AADB42 !important;
}



/*--------------------------------------------------------------
# Backgrounds and Buttons
--------------------------------------------------------------*/
.bg-primary,
.btn-primary {
  background-color: #61CE70 !important;
  border-color: #61CE70 !important;
}

.bg-secondary,
.btn-secondary {
  background-color: #AADB42 !important;
  border-color: #AADB42 !important;
}

.bg-third,
.btn-third {
  background-color: #F3ED04 !important;
  border-color: #F3ED04 !important;
}

.card-primary.card-outline {
  border-top: 3px solid #61CE70 !important;
}



/*--------------------------------------------------------------
# Text Colors
--------------------------------------------------------------*/
.text-primary {
  color: #61CE70 !important;
}

.text-secondary {
  color: #AADB42 !important;
}

.text-blue {
  color: #007bff !important
}



/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/
a {
  color: #61CE70;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #4db35c;
}

a:active {
  color: #3e954b;
}

a:disabled,
a[disabled],
a.disabled {
  color: #a9d8ae;
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}



.a-group {
  display: inline-flex;
  white-space: nowrap;
}

.a-group>a.btn {
  border-radius: 0 !important;
  margin: 0 !important;
  position: relative;
  z-index: 1;
}

.a-group>a.btn+a.btn {
  margin-left: -1px !important;
  /* ini yang bikin nempel */
}

.a-group>a.btn:first-child {
  border-top-left-radius: .2rem !important;
  border-bottom-left-radius: .2rem !important;
}

.a-group>a.btn:last-child {
  border-top-right-radius: .2rem !important;
  border-bottom-right-radius: .2rem !important;
}


/*--------------------------------------------------------------
# Select2
--------------------------------------------------------------*/
.select2-container--bootstrap4 .select2-results__option--highlighted {
  background-color: #61CE70 !important;
  color: #fff !important;
}

.select2-container--bootstrap4 .select2-results__option[aria-selected="true"] {
  background-color: #4db35c !important;
  color: #fff !important;
}

.select2-container--bootstrap4 .select2-selection--single:focus,
.select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: #61CE70 !important;
  box-shadow: 0 0 0 0.2rem rgba(97, 206, 112, 0.25) !important;
}



/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #61CE70;
  border-color: #61CE70;
}

.page-link {
  position: relative;
  display: block;
  padding: .5rem .75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #61CE70;
  background-color: #fff;
  border: 1px solid #dee2e6;
}

.page-link:hover {
  color: #4db35c;
  background-color: #f8f9fa;
  border-color: #dee2e6;
}



/*--------------------------------------------------------------
# Dropdown
--------------------------------------------------------------*/
.dropdown-item:hover {
  color: #fff !important;
  background-color: #4db35c !important;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff !important;
  text-decoration: none;
  background-color: #61CE70 !important;
}

.dropdown-item:focus {
  background-color: #61CE70 !important;
  color: #fff !important;
}



/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
  color: #61CE70 !important;
}



/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
.form-check-input:checked {
  background-color: #61CE70 !important;
  border-color: #61CE70 !important;
}



/*--------------------------------------------------------------
# Cards
--------------------------------------------------------------*/
.card-primary:not(.card-outline)>.card-header {
  background-color: var(--primary) !important;
}

.card-secondary:not(.card-outline)>.card-header {
  background-color: var(--secondary) !important;
}



/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-footer {
  height: 60px;
}

.mb-02 {
  margin-bottom: 0.2rem !important;
}



/*--------------------------------------------------------------
# Navbar Responsive
--------------------------------------------------------------*/

.navbar-expand-md .navbar-nav .nav-link {
  padding-right: 1rem !important;
  padding-left: 0.5rem !important;
}

@media (max-width: 767.98px) {
  .navbar .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .navbar-toggler {
    margin-right: auto;
  }

  .navbar-nav.d-md-none {
    margin-left: auto;
  }

  .navbar-nav.ml-0 {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  .navbar-nav .nav-item {
    margin-bottom: 0.3rem;
  }

  .navbar-nav .nav-link {
    padding: 0.6rem 0.5rem !important;
  }
}

.navbar-nav .nav-link i {
  margin-right: 0.4rem;
}



.navbar,
.navbar-dark,
.main-header.navbar {
  border-bottom: none !important;
  box-shadow: none !important;
}



/*--------------------------------------------------------------
# Nav Pills
--------------------------------------------------------------*/
.nav-pills .nav-link {
  background-color: #E8E8E8;
  color: #000;
  margin-right: 5px;
}

.nav-pills .nav-link.active {
  background-color: #61CE70;
  color: #fff;
}



/*--------------------------------------------------------------
# Table
--------------------------------------------------------------*/
/* Warna background header */
.bg-light {
  background-color: #EEEEEE !important;
}



/* Header TH border halus */
.table thead th {
  border-bottom: 1px solid #e1e1e1 !important;
  border-top: 1px solid #e1e1e1 !important;
  border-right: 1px solid #e1e1e1 !important;
  border-left: 1px solid #e1e1e1 !important;
  vertical-align: middle;
  font-weight: 600;
}



/* Border bawah custom jika diperlukan */
.table-bottom-border {
  border-bottom: 1px solid #dee2e6;
}



/* Ukuran font tabel */
.table {
  font-size: 14px;
}



/* TD styling */
.table td {
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
  vertical-align: middle;
  border-top: 1px solid #e1e1e1 !important;
  border-right: 1px solid #e1e1e1 !important;
  border-left: 1px solid #e1e1e1 !important;
}



/* TR terakhir punya border bawah */
.table tbody tr:last-child td {
  border-bottom: 1px solid #e1e1e1 !important;
}




/* Show (length menu) */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_length select {
  font-size: 14px !important;
}

/* Search */
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_filter input {
  font-size: 14px !important;
}

/* Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  font-size: 14px !important;
}

.dataTables_wrapper .dataTables_info {
  font-size: 14px !important;
}

table.dataTable.table-sm tbody td {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}


table.dataTable .btn-sm {
  padding: 5px !important;
  font-size: 14px !important;
  line-height: 1 !important;
}









/*--------------------------------------------------------------
# Navbar Desktop
--------------------------------------------------------------*/
@media (min-width: 768px) {
  .navbar.navbar-expand-md .navbar-nav>.nav-item:not(:last-child)>.nav-link {
    padding-right: 0.1rem !important;
  }
}

/* override styling default bootstrap */
a.nav-link.menu-parent-active {
  font-weight: 700 !important;
  color: #277C34 !important;
}

/* cegah bootstrap menganggap dropdown sedang active */
a.nav-link.menu-parent-active::after {
  pointer-events: none;
}



/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
.w-20 {
  width: 20rem !important;
}

.ck-editor__editable {
  min-height: 300px;
}

#editor1~.ck-editor__editable {
  min-height: 400px;
}



/*--------------------------------------------------------------
# Modal Barang
--------------------------------------------------------------*/
#modalBarang table.dataTable {
  width: 100% !important;
  font-size: 14px;
  border-collapse: collapse !important;
}

#modalBarang table.dataTable th,
#modalBarang table.dataTable td {
  padding: 2px 6px !important;
  vertical-align: middle;
}

#modalBarang .btn-select-item {
  padding: 5px 6px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

#modalBarang .dataTables_wrapper .dataTables_filter input {
  height: 28px;
  font-size: 14px;
}

#modalBarang .dataTables_wrapper .dataTables_length select {
  height: 28px;
  font-size: 14px;
}


/*--------------------------------------------------------------
# Select2BS4
--------------------------------------------------------------*/
.select2-container--bootstrap4 .select2-dropdown {
  background-color: #FEFDC0 !important;
}