.hovername:hover{
background-color: #28a745;
color: #ffffff;
border-radius: 5px;
}

.img-circle.profile_img {
    width: 70%;
    background: #fff;
    margin-left: 15%;
    z-index: 1000;
    position: inherit;
    margin-top: 20px;
    border: 1px solid rgba(52,73,94,0.44);
    padding: 4px;
}

.img-circle {
    border-radius: 50%;
}

.profile_pic {
  text-align: center;
    width: 35%;
    margin: auto;
}

.text-center{
  text-align: center;
}

.d-none{
  display: none;
}

.d-none-2{
  display: none!important;
}

.btn-search-height{
  height: 20px!important;
}


/* breadcrumb */
/** The Magic **/
.btn-breadcrumb .btn:not(:last-child):after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid white;
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: 100%;
  z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 10px solid rgb(173, 173, 173);
  position: absolute;
  top: 50%;
  margin-top: -17px;
  margin-left: 1px;
  left: 100%;
  z-index: 3;
}

/** The Spacing **/
.btn-breadcrumb .btn {
  padding:6px 12px 6px 24px;
}
.btn-breadcrumb .btn:first-child {
  padding:6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
  padding:6px 18px 6px 24px;
}

/** Default button **/
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}

/** Primary button **/
.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
  border-left: 10px solid #428bca;
}
.btn-breadcrumb .btn.btn-primary:not(:last-child):before {
  border-left: 10px solid #357ebd;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
  border-left: 10px solid #3276b1;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):before {
  border-left: 10px solid #285e8e;
}

/** Success button **/
.btn-breadcrumb .btn.btn-success:not(:last-child):after {
  border-left: 10px solid #5cb85c;
}
.btn-breadcrumb .btn.btn-success:not(:last-child):before {
  border-left: 10px solid #4cae4c;
}
.btn-breadcrumb .btn.btn-success:hover:not(:last-child):after {
  border-left: 10px solid #47a447;
}
.btn-breadcrumb .btn.btn-success:hover:not(:last-child):before {
  border-left: 10px solid #398439;
}

/** Danger button **/
.btn-breadcrumb .btn.btn-danger:not(:last-child):after {
  border-left: 10px solid #d9534f;
}
.btn-breadcrumb .btn.btn-danger:not(:last-child):before {
  border-left: 10px solid #d43f3a;
}
.btn-breadcrumb .btn.btn-danger:hover:not(:last-child):after {
  border-left: 10px solid #d2322d;
}
.btn-breadcrumb .btn.btn-danger:hover:not(:last-child):before {
  border-left: 10px solid #ac2925;
}

/** Warning button **/
.btn-breadcrumb .btn.btn-warning:not(:last-child):after {
  border-left: 10px solid #f0ad4e;
}
.btn-breadcrumb .btn.btn-warning:not(:last-child):before {
  border-left: 10px solid #eea236;
}
.btn-breadcrumb .btn.btn-warning:hover:not(:last-child):after {
  border-left: 10px solid #ed9c28;
}
.btn-breadcrumb .btn.btn-warning:hover:not(:last-child):before {
  border-left: 10px solid #d58512;
}

/** Info button **/
.btn-breadcrumb .btn.btn-info:not(:last-child):after {
  border-left: 10px solid #5bc0de;
}
.btn-breadcrumb .btn.btn-info:not(:last-child):before {
  border-left: 10px solid #46b8da;
}
.btn-breadcrumb .btn.btn-info:hover:not(:last-child):after {
  border-left: 10px solid #39b3d7;
}
.btn-breadcrumb .btn.btn-info:hover:not(:last-child):before {
  border-left: 10px solid #269abc;
}

.radius-border-bred1{
  border-top-left-radius: 50px!important;
  border-bottom-left-radius: 50px!important;

}
.radius-border-bred2{
  border-top-right-radius: 50px!important;
  border-bottom-right-radius: 50px!important;

}

/* LOGIN CSS */
.bg-checkbox{
  background-color: #e6e6e6!important;
}

.img-left-login{
  height: 504px!important;
}

.w-login{
  width: 900px!important;
}

.wrap-login-new{
      padding: 70px 15px 33px 15px!important;
}

.row-new{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.login100-form-title {
    display: block;
    font-family: Poppins-Bold;
    font-size: 30px!important;
    color: #333333;
    line-height: 1.2;
    text-align: center;
}

.login100-form-bgbtn {
    position: absolute;
    z-index: -1;
    width: 300%;
    height: 100%;
    background: #2bae9c!important;
    background: -webkit-linear-gradient(right, #c7fdec, #2bae9c, #c7fdf3, #09bd93)!important;
    background: -moz-linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff)!important;
    background: linear-gradient(right, #00dbde, #fc00ff, #00dbde, #fc00ff)!important;
    top: 0;
    left: -100%;
    -webkit-transition: all 0.4s;
    -o-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}


/* TEMPLATE COLOR */
.navbar-bg {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 115px;
    background-color: #2bae9c!important;
    z-index: -1;
}

.text-tempalte{
color:  #2bae9c!important;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li a {
    color: #868e96!important;
    height: 35px;
    padding-left: 65px;
    font-weight: 400;
}
.main-sidebar .sidebar-menu li.active a {
    color: #2bae9c!important;
    font-weight: 600;
    background-color: #f8fafb;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover {
    color: #2bae9c!important;
    background-color: inherit;
}

body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a {
    box-shadow: 0 4px 8px #acb5f6;
    background-color: #2bae9c!important;
    color: #fff!important;
}

.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    background-color: #2bae9c!important;
}

a {
    color: #2bae9c;
    font-weight: 500;
    transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
}

.beep:after {
    background-color: #e8ff26!important;
}

/* fonts */
.f-20{
  font-size: 20px;
}


/* Paginator datatable */

.page-item.active .page-link {
    background-color: #2bae9c;
    border-color: #2bae9c;
}
.page-link:hover {
    background-color: #2bae9c;
    color: #fff!important;
    border-color: transparent;
}

.page-item .page-link {
    color: #2bae9c;
    border-radius: 3px;
    margin: 0 3px;
}

.pointer{
  cursor: pointer;
}

/* Tab user profile */
.nav-tabs .nav-link.active {
    color: #495057!important;
}

.content-profile{
  border-top: 0!important;
  border: 1px solid #dee2e6;
  background-color: #ffffff!important;
}

.bg-white{
  background-color: #ffffff!important;
}
.text-white{
  color: #ffffff!important;
}


.pricing.pricing-highlight .pricing-title {
    background-color: #2797b3!important;
    color: #fff;
}

.font-basic{
  color: #2797b3!important;
}

.font-13{
  font-size: 13px!important;
}

.font-11{
  font-size: 11px!important;
}

.dropdown-menu-ppdb {
  width: 250px!important;
}


/* list  */
.list-group-item:hover{
  color: #ffffff!important;
  background-color: #2bae9c;
}

.list-group-item.active {
    background-color: #2bae9c!important;
}

.bg-dark-blue{
  background-color: ##259bd0!important;
}

/* CSS card progress */
#tbody-pembayaran-spp {
    position: relative!important;
    display: -ms-flexbox!important;
    display: contents;
    -ms-flex-direction: column!important;
    flex-direction: column!important;
    min-width: 0!important;
    word-wrap: break-word!important;
    background-color: #fff!important;
    background-clip: border-box!important;
    /* border: 1px solid rgba(0,0,0,.125); */
    border-radius: .25rem!important;
}


#tbody-pembayaran-menu {
    position: relative!important;
    display: -ms-flexbox!important;
    display: contents;
    -ms-flex-direction: column!important;
    flex-direction: column!important;
    min-width: 0!important;
    word-wrap: break-word!important;
    background-color: #fff!important;
    background-clip: border-box!important;
    /* border: 1px solid rgba(0,0,0,.125); */
    border-radius: .25rem!important;
}

/* CSS FOR MOBILE */
@media screen and (max-width: 500px) {
  .hide-on-mobile{
    display: none!important;
  }

  #loading-image {
    position: absolute;
     top: 10%;
    z-index: 100;
  }
}


@media screen and (min-width: 500px) {
  .hide-on-mobile2{
      display: none!important;
  }
  .hide-on-web{
      display: none!important;
  }
}


/* loader */
#loader{
  position: fixed!important;
    z-index: 9999;
}

#loading {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed!important;
  display: block;
  /* opacity: 0.8; */
  background-color: #fff;
  z-index: 9999;
  text-align: center;
  margin:auto;
}

#loading-image {
  /* position: absolute; */
  /* top: 100px;
  left: 240px; */
  z-index: 100;
}

.selectgroup-input:checked + .selectgroup-button{
  background-color: #2bae9c!important;
}