.lead{
  font-size: 18px;
}
.btn-hijau{
  background: #334b7c;
  color: white;
}
.btn-hijau:hover{
  background: #283e68;
  color: white;
}

/*# Header
--------------------------------------------------------------*/
#header {
  padding: 50px 0px 20px 0px;
}
#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
}
#header .logo-2 img {
  display: none;
}
#navbar-blank{
  background-color: #c2912e !important;
  padding: 3px 0px;
}
#navbar-blank2{
  background-color: #e4e4e4 !important;
  padding: 3px 0px;
}
#navbar {
  padding: 0px 20px;
  background-image: linear-gradient(to left,#e9ecef,#e9ecef);
}

#navbar.header-scrolled {
  background-image: linear-gradient(to left,#e9ecef,#e9ecef);
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#navbar .logo h1 {
  font-size: 30px;
  margin: 0;
  padding: 2px 0;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 2px;
}

#navbar .logo h1 a, #navbar .logo h1 a:hover {
  color: #33747c;
  text-decoration: none;
}

#navbar .logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
}
.logo-navbar-data{
  display: none;
}

@media (max-width: 992px) {#header {
  padding: 30px 0px 15px 0px;
}
  #navbar {
    padding: 10px 15px;
    background-image: linear-gradient(to left,#ffffff,#ffffff);
    color: #476bb3 !important;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  }
  .nav-form{
    background-color: #d69f31;
    padding: 0px 15px;
    text-align: center;
  }
  #header .logo-1 img {
    display: none;
  }
  #header .logo-2 img {
    margin-left:auto;
    margin-right:auto;
    display:block;
  }
  #header .logo-3 img {
    display: none;
  }
  #header .logo-3 a {
    display: none;
  }
  .logo-navbar-data{
    display: inline;
    padding: 10px 0px;
  }
  .navbar-toggler{
    background-color: #e6e9ec !important;
    border: none;
  }
  .navbar-toggler .nav-toggle-i {
    color: #a9abad !important;
  }
}

/*--------------------------------------------------------------*/

.navbar-data li {
  margin: 0px 0px 6px 0px;
  transition: 0.3s;
  font-size: 19px;
  font-family: "Open Sans", sans-serif;
  color: #243964 !important;
}
.navbar-data .nav-kanan {
  color: #243964 !important;
  text-decoration: none;
  transition: 0.3s;
  font-size: 15px;
  font-family: "Open Sans", sans-serif;
  font-weight:600;
}
.navbar-data .nav-dropdown {
  color: #243964 !important;
  text-decoration: none;
  transition: 0.3s;
  font-size: 15px;
  font-family: "Open Sans", sans-serif;
  font-weight:600;
}
.navbar-data .nav-dropdown-item {
  color: #243964 !important;
  text-decoration: none;
  transition: 0.3s;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight:600;
}
.navbar-data .nav-dropdown-item:hover {
  color: #476bb3 !important;
  text-decoration: none;
}
@media (min-width: 992px) {
  .navbar-data li {
    margin: 13px 10px 13px 0px;
    transition: 0.3s;
    font-size: 19px;
    font-family: "Open Sans", sans-serif;
  }
  .navbar-data .nav-kanan {
    color: #243964 !important;
    text-decoration: none;
    transition: 0.3s;
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    font-weight:600;
  }
  .navbar-data .nav-kanan:hover {
    color: #476bb3 !important;
    text-decoration: none;
  }
  .navbar-data .nav-dropdown {
    color: #243964 !important;
    text-decoration: none;
    transition: 0.3s;
    font-size: 16px;
  }
  
}
@media (min-width: 1200px) {
  .navbar-data .nav-kanan {
    font-size: 14px;
  }
  .navbar-data .nav-dropdown {
    font-size: 14px;
  }
  .navbar-data .nav-dropdown-item {
    font-size: 14px;
  }
}
@media (min-width: 1400px) {
  .navbar-data .nav-kanan {
    font-size: 16px;
  }
  .navbar-data .nav-dropdown {
    font-size: 16px;
  }
  .navbar-data .nav-dropdown-item {
    font-size: 16px;
  }
}

.navbar-data .nav-kiri {
  color: #243964;
  transition: 0.3s;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
}
.nav-form{
  background-color: #d69f31;
}
.nav-form:hover{
  background-color: #c2912e;
  transition: 0.3s;
}

/* tombol navigasi fixed bottom */
.nav-bottom{
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.130);
}
/* ------------------------------------------------------------------------------- */

.carousel{
  height: 460px;
  margin-top: 0px;
  border: 0px;
}

.carousel img{
  height: 460px;
  border-radius: 4px;
}

@media (min-width: 992px) {
  .carousel{
      margin-left: 0px;
      height: 350px;
  }
  .carousel img{
      height: 350px;
  }
}
@media (min-width: 1200px) {
  .carousel{
      margin-left: 0px;
      height: 390px;
  }
  .carousel img{
      height: 390px;
  }
}
@media (min-width: 1400px) {
  .carousel{
      margin-left: 0px;
      height: 450px;
  }
  .carousel img{
      height: 450px;
  }
  .carousel-caption p{
      font-size: 20px;
      z-index: 999999999999999;
      color: red !important;
  }
  
}

.jumbotron{
  padding-top: 25px;
  padding-bottom: 5px;
  padding-right: 30px;
  padding-left: 30px;
}
.jumbotron .judul-lead{
  margin-bottom: -4px;
  font-weight: bold;
  color: #246454;
}
.lead{
  color: #246454;
  font-size: 15px;
  font-weight: 400;
}
.icon-card img{
  width: 75%;
  position: absolute;
}
.card-shadow{
  border: none;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.130);
  border-radius: 9px;
}
@media (min-width: 992px) {
  .lead{
    font-size: 17px;
    font-weight: 400;
  }
  .icon-card img{
    width: 50%;
  }
}
@media (min-width: 1200px) {
  .lead{
    font-size: 18px;
    font-weight: 400;
  }
  .icon-card img{
    width: 50%;
  }
}
@media (min-width: 1400px) {
  .lead{
    font-size: 18px;
    font-weight: 400;
  }
  .icon-card img{
    width: 50%;
  }
}

.carousel-indicators{
  margin-top: -50px;
}
.carousel-caption{
  margin-top: -20px;
}
.carousel-caption p{
  z-index: 9999999999999999999999999999999;
  color: rgb(255, 255, 255) !important;
}
.data-index{
  margin: 35px 20px;
  min-height: 650px;
}
.data-index1{
  margin: 0px 0px;
}
.data-index2{
  min-height: 650px;
  margin: 0px 0px;
  border-top-left-radius: 13px;
  border-top-right-radius: 13px;
}
@media (min-width: 992px) {
  .data-index{
    margin: 85px 140px;
    min-height: 750px;
  }
  .data-index1{
    margin: 0px 130px;
  }
  .data-index2{
    min-height: 650px;
    margin: 0px 150px;
  }
}
@media (min-width: 1200px) {
  .data-index{
    margin: 85px 140px;
    min-height: 850px;
  }
  .data-index1{
    margin: 0px 130px;
  }
  .data-index2{
    min-height: 650px;
    margin: 0px 150px;
  }
}
@media (min-width: 1400px) {
  .data-index{
    margin: 85px 140px;
    min-height: 950px;
  }
  .data-index1{
    margin: 0px 130px;
  }
  .data-index2{
    min-height: 650px;
    margin: 0px 150px;
  }
}

.data-admin{
  margin: 35px 20px;
  min-height: 650px;
}
@media (min-width: 992px) {
  .data-admin{
    margin: 85px 45px;
    min-height: 750px;
  }
}
@media (min-width: 1200px) {
  .data-admin{
    margin: 85px 45px;
    min-height: 850px;
  }
}
@media (min-width: 1400px) {
  .data-admin{
    margin: 85px 45px;
    min-height: 950px;
  }
}

/* ================================================= */

.garap-data{
  margin: 35px 35px;
  min-height: 350px;
}
.psb-opsi i{
  color: #e7a828 !important;
}
@media (min-width: 992px) {
  .garap-data{
    margin: 35px 85px;
    min-height: 750px;
  }
}
@media (min-width: 1200) {
  .garap-data{
    margin: 35px 85px;
    min-height: 850px;
  }
}
@media (min-width: 1400px) {
  .garap-data{
    margin: 35px 135px;
    min-height: 900px;
  }
}
/* ================================================= */

.santri-data{
  margin: 35px 15px;
  min-height: 750px;
}
.santri-data .judul-lead {
  text-align: center;
  font-size: 21px;
}
.santri-data .bungkus-btn {
  text-align: center;
}
.santri-data .icon {
  position: absolute;
  font-size: 0px;
  z-index: 0;
  color: transparent;
}
@media (min-width: 992px) {
  .santri-data{
    margin: 35px 35px;
    min-height: 750px;
  }
  .santri-data .judul-lead {
    text-align: left;
    font-size: 21px;
  }
  .santri-data .bungkus-btn {
    text-align: left;
  }
  .santri-data .icon {
    position: absolute;
    font-size: 50px;
    top: 120px;
    right: 65px;
    z-index: 0;
    color: #476bb3;
  }
}
@media (min-width: 1200) {
  .santri-data{
    margin: 35px 35px;
    min-height: 850px;
  }
  .santri-data .judul-lead {
    text-align: left;
    font-size: 21px;
  }
  .santri-data .bungkus-btn {
    text-align: left;
  }
  .santri-data .icon {
    position: absolute;
    font-size: 50px;
    top: 120px;
    right: 65px;
    z-index: 0;
    color: #476bb3;
  }
}
@media (min-width: 1400px) {
  .santri-data{
    margin: 35px 35px;
    min-height: 900px;
  }
  .santri-data .judul-lead {
    text-align: left;
    font-size: 21px;
  }
  .santri-data .bungkus-btn {
    text-align: left;
  }
  .santri-data .icon {
    position: absolute;
    font-size: 55px;
    top: 120px;
    right: 65px;
    z-index: 0;
    color: #476bb3;
  }
}

/* ================================================= */

.brand1{
	font-weight: lighter;
}
.brand2{
	font-weight: bolder;
}

.logout{
  padding-right: 18px;

}
.navbar-nav .hari-ini{
  color: #ffffff !important;
}
.btn-logout {
    background: #ffffff;
	  color: rgb(75, 75, 75);
}
.btn-logout:hover{
    background: #ffffff;
    color: rgb(75, 75, 75);
}


.import-data{
  margin: 35px 35px;
  min-height: 450px;
  margin-top: 125px;
}
.judul{
	color: rgb(63, 63, 63);
}
.table-transfer{
	color: rgb(63, 63, 63);
	border: 1.5px solid rgb(219, 219, 219);
}
.headTabel{
	background: rgb(255, 255, 255);
  font-size: 14px;
  color:rgb(63, 63, 63);
}
tbody{
  font-size: 14px;
  text-align: center;

}


/* Button Hover Gradien */
  .bgBiru1{
    text-align: center;
  }
  .bgBiru2{
	  margin: 0px 0px;
    font-family: "montserrat",sans-serif;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    background-size: 200%;
    transition: 0.6s;
  }
  .bgBiru2:hover{
    background-position: right;
    color: white;
  }
  .bgBiru3{
    background-image: linear-gradient(to left,#3a52a1,#5981d8,#3a52a1);
  }
  /* ================================================================================================== */

  /* Button Hover Gradien */
  .bgHijau1{
    text-align: center;
  }
  .bgHijau2{
	  margin: 0px 0px;
    font-family: "montserrat",sans-serif;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    background-size: 200%;
    transition: 0.6s;
  }
  .bgHijau2:hover{
    background-position: right;
    color: white;
  }
  .bgHijau3{
    background-image: linear-gradient(to left,#26816f, #1c6959,#26816f);
  }
  .bg-kuning{
    background-color: #c3ce83;
  }
  /* ================================================================================================== */

  /* Button Hover Gradien */
  .bgKuning1{
    text-align: center;
  }
  .bgKuning2{
	  margin: 0px 0px;
    font-family: "montserrat",sans-serif;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    background-size: 200%;
    transition: 0.6s;
  }
  .bgKuning2:hover{
    background-position: right;
    color: white;
  }
  .bgKuning3{
    background-image: linear-gradient(to left,#bb9f03, #ddbf14,#bb9f03);
  }
  /* ================================================================================================== */

  /* Button Hover Gradien */
  .bgOrange1{
    text-align: center;
  }
  .bgOrange2{
	  margin: 0px 0px;
    font-family: "montserrat",sans-serif;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    background-size: 200%;
    transition: 0.6s;
  }
  .bgOrange2:hover{
    background-position: right;
    color: white;
  }
  .bgOrange3{
    background-image: linear-gradient(to left,#ac6810, #f39111,#ac6810);
  }
  /* ================================================================================================== */

  /* Button Hover Gradien */
  .bgMerah1{
    text-align: center;
  }
  .bgMerah2{
	  margin: 0px 0px;
    font-family: "montserrat",sans-serif;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    background-size: 200%;
    transition: 0.6s;
  }
  .bgMerah2:hover{
    background-position: right;
    color: white;
  }
  .bgMerah3{
    background-image: linear-gradient(to left,#a02727, #f03636,#a02727);
  }



.bg-ungu{
  background: #476bb3 !important;
  color: white;
}
.bg-merah{
  background: #dc3545 !important;
  color: white;
}
.text-ungu{
  color: #476bb3 !important;
}
.tombol-ungu{
  background: #476bb3 !important;
  color: white;
}
.tombol-ungu:hover{
  background: #243964 !important;
  color: white;
}
.tombol-ungu-tua{
  background: #243964 !important;
  color: white;
}
.tombol-ungu-tua:hover{
  background: #476bb3 !important;
  color: white;
}
.tombol-edit {
    background: #4684f6;
	  color: white;
}
.tombol-edit:hover{
    background: #3772df;
    color: white;
}
.tombol-proses {
    background: #1bac8c;
	  color: white;
}
.tombol-proses:hover{
    background: #1bac8c;
    color: white;
}
.tombol-belum-proses {
    background: #F9690E;
	  color: white;
}
.tombol-belum-proses:hover{
    background: #F9690E;
    color: white;
}
.tombol-cari {
    border: 1px solid #c7c7c7;
    border-radius: 4px;
    padding: 8px 5px;
	  color: #6c757d;
}
.tombol-cari:hover{
    background: #4684f6;
    border: 1px solid #4684f6;
    transition: 0.5s;
    color: white;
}
.panel{
  padding: 30px 10px 40px 10px;
  background-color: #e9ecef !important;
}

.judul{
	color: rgb(63, 63, 63);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}
.panel-kamar{
  text-align: center;
  padding-bottom: 10px;
  border: none;
}
.modal-absen{
  margin-left: -15px;
  margin-right: -15px;
}
.col-form-label{
  text-align: left;
  margin-bottom: -5px;
  font-size: 14px;
  font-weight: 600;
}
@media (min-width: 992px) {
  .col-form-label{
    text-align: left;
    margin-bottom: 0px;
    font-size: 17px;
    font-weight: 400;
  }
  .judul{
    color: rgb(63, 63, 63);
    text-align: center;
    font-size: 27px;
    font-weight: 700;
  }
}
.tombol-lihat-data {
  background: rgb(38, 126, 107);
  color: #ffffff;
}
.tombol-lihat-data:hover {
  background: rgb(45, 143, 122);
  color: #ffffff;
}
.tombol-light {
  background-color: #e9ecef;
  color: #243964;
}
.tombol-light:hover {
  background-color: #d5dadf;
  color: #243964;
}

/*
 * Component: Small Box
 * --------------------
*/
.footer-santri{
  background: rgb(70,93,246);
  background-image: linear-gradient(to left,#697f96,#4a5e72);
  color: white;
}
.footer-santri a{
  color: white;
}
.data-santri{
  background: rgb(70,93,246);
  background-image: linear-gradient(to left,#2a6e52, #41a37a);
  color: white;
}
.data-santri a{
  color: white;
}
.data-proses{
  background: rgb(23,171,143);
  background: linear-gradient(90deg, rgba(23,171,143,1) 10%, rgb(180, 200, 64) 90%); 
  color: white;
}
.data-belum{
  background: rgb(212,204,36);
  background: linear-gradient(90deg, rgba(212,204,36,1) 10%, rgba(221,84,87,1) 90%); 
  color: white;
}
.data-total{
  background: rgb(36,155,212);
  background-image: linear-gradient(to left,#3e588d,#243964);
  color: white;
}
.small-box {
  border-radius: 2px;
  position: relative;
  display: block;
  margin-bottom: 20px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.small-box > .inner {
  padding: 10px;
}
.small-box > .small-box-footer {
  position: relative;
  text-align: center;
  padding: 3px 0;
  color: #fff;
  color: rgba(255, 255, 255, 0.8);
  display: block;
  z-index: 10;
  background: rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.small-box > .small-box-footer:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
}
.small-box h3 {
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0;
}
.small-box p {
  font-size: 15px;
}
.small-box p > small {
  display: block;
  color: #f9f9f9;
  font-size: 13px;
  margin-top: 5px;
}
.small-box h3,
.small-box p {
  z-index: 5px;
}
.small-box:hover {
  text-decoration: none;
  color: #f9f9f9;
}
@media (max-width: 767px) {
  .small-box .icon {
    position: absolute;
    top: -5px;
    right: 15px;
    z-index: 0;
    font-size: 75px;
    color: rgba(255, 255, 255, .8);
  }
  .small-box p {
      font-size: 12px;
  }
}
@media (min-width: 992px) {
  .small-box > .small-box-footer {
    display: none;
  }
}
@media (min-width: 1200px) {
  .small-box > .small-box-footer {
    display: none;
  }
  .small-box .icon {
    position: absolute;
    top: -5px;
    right: 15px;
    z-index: 0;
    font-size: 50px;
    color: rgba(255, 255, 255, .8);
  }
}
@media (min-width: 1400px) {
  .small-box > .small-box-footer {
    position: relative;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    z-index: 10;
    background: rgba(0, 0, 0, 0.1);
    text-decoration: none;
  }
  .small-box .icon {
    position: absolute;
    top: -5px;
    right: 15px;
    z-index: 0;
    font-size: 70px;
    color: rgba(255, 255, 255, .8);
  }
}

.modal-buwesar{
  max-width: none;
  width: 95%;
}
.modal-sedang{
  max-width: none;
  width: 95%;
  margin-top: 50px;
}
@media (min-width: 992px) {
  .modal-sedang{
    max-width: none;
    width: 80%;
    margin-top: 20px;
  }
}
/*
* Component: Box
* --------------
*/

.footer{
	background: #fff;
	color: #444;
	border-top: 1px solid #d2d6de;
  font-size: 14px;
    width: 100%;
    height: 50px;
    padding-left: 10px;
    line-height: 50px;
    position: absolute;
    padding: 0px 35px;
}
/* .text-version{
  text-align: left;
  width: 30%;
} */
.text-copyright{
  font-style: italic;
}
.text-author{
  color: #3772df;
  font-style: italic;
}


.data-kamar{
  background: rgb(70,93,246);
  background-image: linear-gradient(to left,#4f9edf,#2675aa);
  color: rgb(255, 255, 255);
}
.data-kamar-putri{
  background: rgb(70,93,246);
  background-image: linear-gradient(to left,#8186c9,#575a8a);
  color: rgb(255, 255, 255);
}

.belum-bayar{
  background: linear-gradient(to left, #f0852d, #ac0d12);
  color: white;
}
.masih-nitip{
  background: linear-gradient(to left, #FADE36, #C9781C);
  color: white;
}
.sudah-bayar{
  background: linear-gradient(to left, #12d0ff, #087555);
  color: white;
}