<style>
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background-color: #f6f6f6;
}

header {
  max-height: 72px;
}
footer {
  height: 50px;
}
.navbar {
  padding: 0 1rem !important;
}
.form-height-50 {
  height: 50px !important;
}
.mw-150 {
  max-width: 150px !important;
}
.jumbotron {
  background-image: url("https://www.dnd.rheanna.net/themes/default/images/bg.jpg");
  background-size: cover;
  padding: 300px 0 0 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.container {
  width: auto;
  max-width: 1000px;
  padding: 0 15px;
}

.fill {
  height: calc(100% - 20px);
}

.tall {
  min-height: calc(100% - 422px);
  height:  auto !important;
  height: 100%;
}

.content {
  margin: 10px 0 10px 0;
  min-height: 100%;
  padding: 15px;
  box-shadow: 0 0 20px #e0e0e0;
}

.fabutton {
  background: none;
  padding: 0px;
  border: none;
  cursor: pointer !important;
}

.click-buttons {
  border-color: #d3d9df !important;
  margin: 0 4px 5px 0;
}

.remove {
  position: absolute;
  top: 0;
  right: 3px;
  padding: 11px;
  cursor: pointer;
  font-size: 18px;
  color: #9c9c9c;
}

.form-control-dark {
  color: #fff;
  background-color: var(--bs-dark);
  border-color: var(--bs-gray);
}
.form-control-dark:focus {
  color: #fff;
  background-color: var(--bs-dark);
  border-color: #fff;
  box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .25);
}

.mb-0 > button {
  display: inline-block;
  text-align: left;
  width: 100%;
}
.card-header {
  padding:0;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.text-small {
  font-size: 85%;
}

.dropdown-toggle {
  outline: 0;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.showChar {
  opacity: 1;
  width: 200px;
  height:  350px;
}

.showChar:hover {
  opacity: .5;
}

.showCharDetails {

}

.small-size {
  display:  none;
}

button:focus {
    outline: 0;
}
.inner-roll::before, .inner-roll::after {
    content: '';
    display: block;
    width: 25%;
    margin: 0 auto;
    border-top: 1px solid #e2e2e2;
}

.inner-roll::before {
  margin-top: 10px;
}
.inner-roll::after {
  padding-bottom: 10px;
}

.btn-outline-secondary, .btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary:visited {
  background-color: rgba(255, 255, 255, .2) !important;
  color: #dadada !important;
}

.dropdown-menu .form-control {
    width: 200px;
}

.nav-z {
  z-index: 1;
}

.iframeHandbook {
  height: 800px;
  width: 100%;
}

#charSheetWrap {
    position: relative;
    width: 1700px;
    height: 2200px;
    margin: 0 auto;
}
#charSheetOuter {
    position: relative;
    width: 1700px;
    height: 2200px;
    background: url("https://www.dnd.rheanna.net/images/characterSheet.png") no-repeat center center;
    -webkit-transform-origin: top left;
}

@media (min-width:  1200px) {
  .container {
    max-width: 75% !important;
  }
}

@media (max-width: 992px) {
  ul.login-ul {
    padding: 5px 0 20px 7px;
  }
  #navbarSupportedContent ul:not(.dropdown-menu) {
    display: flex;
    flex-wrap:  wrap;
    zoom: 1;
  }
  .small-size {
    display: inline-block;
  }
  .full-size {
    display: none;
  }
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

@media (max-width: 550px) {
.showCharDetails tr td {
    display: block;
    min-width: 100% !important;
  }
}

footer .text-muted {
  color: #d9d9d9 !important;
}

footer .text-muted a {
  color: #bababa !important;
}

footer {
    font-size: 12px;
    text-align: center;
}
</style>