/*--------------------------------------------------------------
# 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;
}



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



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

.text-secondary {
  color: #AADB42 !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;
}

/*--------------------------------------------------------------
# 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
--------------------------------------------------------------*/
@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 1rem;
  }
}

.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
--------------------------------------------------------------*/
.bg-light {
  background-color: #EEEEEE !important;
}

.table thead th {
  border-color: #EEEEEE !important;
}

.table-bottom-border {
  border-bottom: 1px solid #dee2e6;
}

.table {
  font-size: 14px;
}


.table td {
  padding-top: 0.15rem !important;
  padding-bottom: 0.15rem !important;
  vertical-align: middle;
}







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

/*--------------------------------------------------------------
# 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;
}