.card.card-accordian {
  background: #f5f5f5;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  box-shadow: none;
  margin-bottom: 10px;
  cursor: pointer;
}

.card.card-accordian .card-body {
  padding: 20px 25px;
}

.card.card-accordian .card-body .card-accordian-name {
  font-size: 20px;
  letter-spacing: 1px;
  color: #222222;
}

.card.card-accordian .card-body .card-accordian-toggle {
  margin-left: 25px;
  color: #d1d1d1;
}

.card-body.card-accordian-items.header {
  background-color: #fcfcfc;
  border: 0;
  padding: 5px 20px;
  display: flex;
  justify-content: space-between;
}

.card-body.card-accordian-items.header span {
  font-size: 12px;
  font-weight: bold;
}

.card-body.card-accordian-items.items {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 20px;
  display: flex;
  justify-content: space-between;
  transition: 0.3s;
}

.card-body.card-accordian-items.items.active {
  background-color: #ffe498;
}

.card-body.card-accordian-items.items:last-child {
  border-bottom: 1px solid transparent;
}

.card-body.card-accordian-items.items span {
  font-size: 15px;
  font-weight: normal;
}

.fa-caret-down.fa-animated {
  transition: 0.3s;
}

.fa-caret-down.fa-animated.flip {
  transform: scaleY(-1);
}

.card.card-project-detail {
  border-radius: 10px;
  box-shadow: none;
  position: fixed;
  right: 1rem;
	width: 35%;
}

.card.card-project-detail .card-header {
  background-color: #222;
  color: #fff;
  letter-spacing: 0;
}

.card.card-project-detail .card-header.card-maintenance {
  background-color: rgb(221, 221, 221);
  color: #000;
  letter-spacing: 0;
}

.card-project-detail .card-body {
  padding: 15px;
}

.card-project-detail h5 {
  font-size: 18px;
}

.card-project-detail .topic {
  margin-right: 5px;
}

.card-project-detail .card-project-detail-content {
  margin-bottom: 18px;
}

.bg-index::-webkit-scrollbar {
  width: 0 !important;
}

.text-red {
  color: #ff0000;
}

.btn-view {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-view:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-view:focus,
.btn-view.focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-view.disabled,
.btn-view:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-view:not(:disabled):not(.disabled):active,
.btn-view:not(:disabled):not(.disabled).active,
.show > .btn-view.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

.btn-view:not(:disabled):not(.disabled):active:focus,
.btn-view:not(:disabled):not(.disabled).active:focus,
.show > .btn-view.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 138, 145, 0.5);
}

.btn-view.active {
  background-color: #222 !important;
}

.has-permission {
  padding-right: 12px;
}

.has-permission .circle {
  height: 20px;
  width: 20px;
  background-color: #98ffd880;
  border-radius: 50%;
  align-self: center;
  margin-bottom: 1rem;
}

.table tr.active {
  background-color: #98ffd880;
}
.table.sortable tr.active {
  background-color: #ffe498;
}

.header-permission {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.75px;
  color: #222222;
  text-transform: uppercase;
  padding: 0.75rem;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #fbbd12;
  background-color: #fbbd12;
}

@media (max-width: 767.98px) {
  .card.card-accordian .card-body .card-accordian-name {
    font-size: 16px;
  }

  .card.card-accordian .card-body .card-accordian-toggle {
    margin-left: 15px;
  }
}