/**
 * You can customize the template's look here, no need to edit default Bootstrap codes
 * or edit every page 'cause all the pages of this template follows a standard coding
 * which makes life and custom styling much easier for all.
 */

/* General Settings */
body {
  font-size: 0.875rem;
  font-weight: 400;
  color: #2f2637;
  background-color: #8aa8c5d7;
  background-image: url('/disposable/disposable_bg_1.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* Link Style */
a { text-decoration: none; color: indigo; }
a:hover { text-decoration: none; color: darkred; }
a:active { text-decoration: none; color: white; }

.bg-sidebar {
  background-color: #067ec1;
  box-shadow: 2px 0px 4px black;
}

.bg-navbar {
  background-color: #067ec1;
  box-shadow: 0px 2px 4px black;
}

.bg-dropdown {
  background-color: rgba(6, 126, 193, 0.9);
  box-shadow: 0px 2px 4px black;
  border: none;
}

.bg-dropdown a { color: whitesmoke; font-size: 95%;}
.nav-link { color: aliceblue; }

.card {
  box-shadow: 2px 2px 4px #728394;
  background-color: rgba(223, 214, 214, 0.6);
  border-color: #067ec1;
}

.card-header {
  background-color: rgba(6, 126, 193, 0.8);
  color: white;
}

.card-header a { color: aliceblue; }
.card-header i { color: aliceblue; }

.card .card-header h5 { font-size: 114% !important;}
.card .card-footer h5 { font-size: 110% !important;}

/* Navigation Pills */
#pills-tab .dispo-pills { background-color: rgba(6, 126, 193, 0.8) !important; }
#pills-tab .active { background-color: rgba(6, 73, 109, 0.8) !important; }

/* Navigation Tabs */
#nav-tab .active { background-color: transparent; color: darkblue;}

/* Pagination */
.pag-items {
  background-color: rgba(223, 214, 214, 0.5) !important;
  color: indigo !important;
  border-color: darkblue !important;
}
.pag-items-curr {
  background-color: rgba(6, 126, 193, 0.6) !important;
  color: wheat !important;
  border-color: darkred !important;
}

/* Definitions below this line should not be altered with */
/* Only change them if you really need something that special */

/* Image Switcher and Base Fade Effect */
#stage {
  /* margin: 1em auto; */
  /* text-align: left; */
  /* vertical-align: middle; */
}

#stage a {
  position: relative;
}

#stage a img {
  border: none;
  background: transparent;
}

#stage a:nth-of-type(1) {
  animation-name: fader;
  animation-duration: 10s;
  z-index: 2100;
}

#stage a:nth-of-type(2) {
  z-index: 2200;
  display: none;
}

@keyframes fader {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* Card Body Icon Rotate */
.card-body .rotate {
  z-index: 8;
  float: right;
  height: 100%;
}

.card-body .rotate i {
  color: rgba(20, 20, 20, 0.15);
  position: absolute;
  left: 0;
  left: auto;
  right: -10px;
  bottom: 0;
  display: block;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Generic Classes */
.bg-transparent { background-color: transparent; }

/* Fixed Basic Height For All Overflow-Auto Content */
.overflow-auto { max-height: 400px; }

/* Image Resizing - By Width */
.img-r10 { width: 10%; height: auto;}
.img-r15 { width: 15%; height: auto;}
.img-r20 { width: 20%; height: auto;}
.img-r25 { width: 25%; height: auto;}
.img-r50 { width: 50%; height: auto;}
.img-r75 { width: 75%; height: auto;}
.img-r90 { width: 90%; height: auto;}
.img-r100 { width: 99%; height: auto;}

/* Image Resizing - By Height */
.img-rh10 { width: auto; height: 10%;}
.img-rh15 { width: auto; height: 15%;}
.img-rh20 { width: auto; height: 20%;}
.img-rh25 { width: auto; height: 25%;}
.img-rh50 { width: auto; height: 50%;}
.img-rh75 { width: auto; height: 75%;}
.img-rh90 { width: auto; height: 90%;}
.img-rh100 { width: auto; height: 99%;}

/* Fixed Height Images */
.img-h20 { width: auto; height: 20px;}
.img-h25 { width: auto; height: 25px;}
.img-h30 { width: auto; height: 30px;}
.img-h35 { width: auto; height: 35px;}
.img-h40 { width: auto; height: 40px;}
.img-h45 { width: auto; height: 45px;}
.img-h50 { width: auto; height: 50px;}
.img-h60 { width: auto; height: 60px;}
.img-h70 { width: auto; height: 70px;}
.img-h80 { width: auto; height: 80px;}
.img-h90 { width: auto; height: 90px;}
.img-h100 { width: auto; height: 100px;}
.img-h125 { width: auto; height: 125px;}
.img-h150 { width: auto; height: 150px;}
.img-h175 { width: auto; height: 175px;}
.img-h200 { width: auto; height: 200px;}

/* Max Height Images */
.img-mh20 { width: auto; max-height: 20px;}
.img-mh30 { width: auto; max-height: 30px;}
.img-mh40 { width: auto; max-height: 40px;}
.img-mh50 { width: auto; max-height: 50px;}
.img-mh60 { width: auto; max-height: 60px;}
.img-mh70 { width: auto; max-height: 70px;}
.img-mh80 { width: auto; max-height: 80px;}
.img-mh90 { width: auto; max-height: 90px;}
.img-mh100 { width: auto; max-height: 100px;}
.img-mh125 { width: auto; max-height: 125px;}
.img-mh150 { width: auto; max-height: 150px;}
.img-mh175 { width: auto; max-height: 175px;}
.img-mh200 { width: auto; max-height: 200px;}

/* SideBar */
#wrapper { overflow-x: hidden; }

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -10rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group { width: 10rem; }
#page-content-wrapper {	min-width: 100vw;}
#wrapper.toggled #sidebar-wrapper { margin-left: 0; }

@media (min-width: 768px) {
  #sidebar-wrapper { margin-left: 0; }
  #page-content-wrapper { min-width: 0; width: 100%; }
  #wrapper.toggled #sidebar-wrapper { margin-left: -10.5rem; }
}

/* This needs to be defined for full screen image bg to work */
html { height: 100%; margin: 0; }

/* Fix Footer Position */
#page-container { position: relative; min-height: 100vh;}
#page-contents { width: 94% !important; padding-bottom: 2.5rem; /* = Footer Height */ }
#footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer Height */ }

/* Mobile Device Compatability */
@media (max-width: 768px) {body { font-size: 14px; }}