/* custom style */
.wbg-wblue,
.wbg-wcyan,
.wbg-worange,
.wbg-wyellow,
.wbg-wred,
.wbg-wgreen,
.wbg-wpurple,
.wbg-wpink,
.wbg-wbrown,
.wbg-wdarkbrown {
  background: #fff !important;
}

.wbg-wblue .info,
.wbg-wcyan .info,
.wbg-worange .info,
.wbg-wyellow .info,
.wbg-wred .info,
.wbg-wgreen .info,
.wbg-wpurple .info,
.wbg-wpink .info,
.wbg-wbrown .info,
.wbg-wdarkbrown .info {
  color: #000;
}

.wbg-wblue i.icon {
  background: #2E318C !important;

}

.wbg-wcyan i.icon {
  background: #1dbcd5 !important;
}

.wbg-worange i.icon {
  background: #ffc107 !important;
}

.wbg-wyellow i.icon {
  background: #edeb27 !important;
}

.wbg-wred i.icon {
  background: #dc3545 !important;
}

.wbg-wgreen i.icon {
  background: #17bb5e !important;
}

.wbg-wpurple i.icon {
  background: #992bb0 !important;
}

.wbg-wpink i.icon {
  background: #c71da7 !important;
}

.wbg-wbrown i.icon {
  background: #d58e1a !important;
}

.wbg-wdarkbrown i.icon {
  background: #694b1a !important;
}



.bordere-blue i.icon {
  border: 1px solid #2E318C !important;
}

.bordere-cyan i.icon {
  border: 1px solid #1dbcd5 !important;
}

.bordere-orange i.icon {
  border: 1px solid #ffc107 !important;
}

.bordere-yellow i.icon {
  border: 1px solid #edeb27 !important;
}

.bordere-red i.icon {
  border: 1px solid #dc3545 !important;
}

.bordere-green i.icon {
  border: 1px solid #17bb5e !important;
}

.bordere-purple i.icon {
  border: 1px solid #992bb0 !important;
}

.bordere-pink i.icon {
  border: 1px solid #c71da7 !important;
}

.bordere-brown i.icon {
  border: 1px solid #d58e1a !important;
}

.bordere-darkbrown i.icon {
  border: 1px solid #694b1a !important;
}



.wblue {
  color: #fff !important;
  background: #2E318C !important;
}

.wcyan {
  color: #fff !important;
  background: #1dbcd5 !important;
}

.worange {
  color: #fff !important;
  background: #ffc107 !important;
}

.wyellow {
  color: #fff !important;
  background: #edeb27 !important;
}

.wred {
  color: #fff !important;
  background: #dc3545 !important;
}

.wgreen {
  color: #fff !important;
  background: #17bb5e !important;
}

.wpurple {
  color: #fff !important;
  background: #992bb0 !important;
}

.wpink {
  color: #fff !important;
  background: #c71da7 !important;
}

.wbrown {
  color: #fff !important;
  background: #d58e1a !important;
}

.wdarkbrown {
  color: #fff !important;
  background: #694b1a !important;
}

.wblack {
  color: #fff !important;
  background: #181a28 !important;
}

.wwhite {
  color: #000 !important;
  background: #fff !important;
}

.whover {
  color: #fff;
  cursor: pointer !important;
}

.whover h4 {
  color: #000;
}

.whover:hover {
  text-decoration: none !important;
}

.whover:hover .widget-small {
  transform: translate3d(0, -1px, 0);
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transition-duration: 0.3s;
}

.widget-small {
  transition-duration: 0.2s !important;
}

.sisa h4 {
  color: #fff;
}

.floatleft {
  float: left;
}

.clearboth {
  clear: both;
}

@media screen {
  .bg_target_1 {
    background-color: rgb(239, 31, 97);
    color: #fff;
  }

  .bg_target_2 {
    background-color: rgb(19, 145, 215);
    color: #fff;
  }
}

@media print {
  .bg_target_1 {
    background-color: rgb(239, 31, 97);
    color: #fff;
  }

  .bg_target_2 {
    background-color: rgb(19, 145, 215);
    color: #fff;
  }
}

/* pagination */
.page-item {
  position: relative;
  display: block;
  margin-left: -1px;
  line-height: 1.25;
  color: #2E318C;
  background-color: #FFF;
  border: 1px solid #dee2e6;
}

.page-item.active {
  padding: 0.5rem 0.75rem;
  color: #fff;
  background-color: #2E318C;
  border-color: #2E318C;
}

.page-item a {
  display: block;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
}

.page-item a:hover {
  color: #004a43;
  text-decoration: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

#errmsg {
  color: #dc3545;
  margin-left: 10px;
}

.app-header__logo {
  width: 90%;
  text-align: center;
  margin-left: 40px;
}

.app-sidebar__toggle {
  position: absolute;
  line-height: 2;
}

#btnlist {
  display: none;
  width: 49%;
}

#header-btnmore {
  display: block;
}

#btnmore:hover #header-btnmore {
  display: none;
}

#btnmore:hover #btnlist {
  display: inline-block;
}

.logologinleft {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.logologinleft img,
.logologinright img {
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-style: preserve-3d;
  animation-direction: normal;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-transform-style: preserve-3d;
  -webkit-animation-direction: normal;
  -ms-animation-name: spin;
  -ms-animation-duration: 4s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  -ms-transform-style: preserve-3d;
  -ms-animation-direction: normal;
  -moz-animation-name: spin;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -moz-transform-style: preserve-3d;
  -moz-animation-direction: normal;
  -o-animation-name: spin;
  -o-animation-duration: 4s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;
  -o-transform-style: preserve-3d;
  -o-animation-direction: normal;

}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(360deg);
  }
}

@keyframes spin {
  from {
    -webkit-transform: rotateY(0deg);
  }

  to {
    -webkit-transform: rotateY(360deg);
  }
}


.logologinright {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.logo {
  text-align: center;
}

#del-btn a,
#del-btn form button {
  display: none;
}

#del-btn:hover a,
#del-btn:hover form button {
  display: block;
}

.searchdata .col-md-2,
.searchdata .col-md-3 {
  margin-bottom: 5px;
}

.pagination {
  overflow: auto;
}

.cnav .nav-link:hover {
  text-decoration: underline;
}

.cnav li.active {
  text-decoration: underline;
}

.cnav-container {
  position: relative;
}

.cnav-container .show-menu {
  display: none;
}

.cnav-container .show-menu {
  text-align: right;
}

.cnav-title {
  display: none;
}

.cnav hr {
  display: none;
}

.cvideo {
  width: 60%;
  height: auto;
  margin: 0 auto;
}

.count-print-label {
  border: 1px solid #d0d0d0;
  border-radius: 20px !important;
  padding: 0px 8px;
  margin-right: 5px;
}


#loading-image {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, .6);
}

#loading-image i {
  display: block;
  margin: 0;
  position: absolute;
  font-size: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.card {
  margin-bottom: 1rem;
}

.text-right {
  text-align: right !important;
}





/* desktop */
@media only screen and (min-width: 770px) {
  .cnav .nav-link {
    padding: 0.2rem 1rem;
  }
}


@media (min-width: 767px) and (max-width: 770px) {
  .app-content {
    margin-left: 0;
  }

  .app .app-sidebar {
    left: -230px;
  }

  .col-md-3 {
    flex: 0 0 50%;
    max-width: none;
  }

  .app-sidebar__toggle {
    display: none;
  }
}


/* tablet */
@media screen and (max-width: 768px) {

  .logologinleft,
  .logologinright {
    display: none;
  }

  .col-md-auto.login-box {
    display: block;
  }

  .logo {
    display: inline-block;
  }

  #del-btn,
  #del-btn a {
    display: block;
  }

  #del-col {
    display: none;
  }

  th,
  td {
    font-size: 12px;
  }

  td span,
  td.ket {
    font-size: 10px;
  }

  table th,
  table td {
    padding: 5px !important;
  }

  .app-header__logo {
    margin-left: 0;
  }

  .app-breadcrumb {
    font-size: 20px;
  }

  .app-header__logo {
    font-size: 20px;
  }

  .ch1 {
    font-size: 20px;
  }

  .ch2 {
    font-size: 18px;
  }

  .ch3 {
    font-size: 16px;
  }

  .cnav-container {
    padding: 10px 20px;
  }

  .cnav-container .show-menu {
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 10px;
  }

  .cnav {
    display: none;
    width: 100%;
  }

  .cnav .nav-item {
    padding: 5px 10px;
    transition-duration: 0.2s;
  }

  .cnav .nav-item:hover {
    background-color: #f9f9f9;
    transition-duration: 0.2s;
  }

  .cnav .nav-item.active {
    background-color: #f9f9f9;
  }

  .cnav-title {
    display: inline-block;
    text-transform: uppercase
  }

  .cnav hr {
    display: block;
  }

  .cvideo {
    width: 100%;
    height: auto;
  }



}