@import url("https://fonts.googleapis.com/css?family=Righteous&display=swap");
@import url("https://fonts.googleapis.com/css?family=Hammersmith+One&display=swap");
body {
  box-sizing: border-box;
  margin: 0;
  padding: 45px 0 0 182px;
  height: 100vh;
  background: url("https://cpontin.com/monolith/admin/assets/images/brown_leather.png") repeat center;
  /* ANIMATION KEYFRAMES */
  /* JQUERY CONFIRM STYLE OVERRIDES*/
}

body * {
  box-sizing: border-box;
  margin: 0;
  font-family: 'Hammersmith One', sans-serif;
}

body p.notice {
  display: flex;
  position: absolute;
  width: 100vw;
  padding: 25px;
  top: 0px;
  right: 0px;
  left: 0px;
  color: #f3f3f3;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
  animation-name: bounceIn;
  animation-duration: 5000ms;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

body p.notice:before {
  content: '\f007';
  font-family: "Font Awesome 5 Free";
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
  margin: 0 8px 0 0;
}

body p.notice.error {
  background: #c44444;
}

body p.notice.error:before {
  content: '\f057';
}

body p.notice.success {
  background: green;
}

body p.notice.success:before {
  content: '\f058';
}

body header {
  padding: 10px;
  height: 45px;
  max-height: 45px;
  background: #0b0b0b url(../images/binding_dark.png) repeat center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  box-shadow: 0 0 12px 5px #000;
  z-index: 100;
}

body header #title {
  border-radius: 8px 8px 0 0;
  text-align: center;
  text-transform: uppercase;
  font-size: 30px;
  color: #f3f3f3;
  position: absolute;
  top: 8px;
}

body header #mainLogo {
  display: inline-block;
  margin: 0 -5px;
  max-width: 35px;
  vertical-align: top;
}

body header nav.user-nav {
  margin: 0 0 0  auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

body header nav.user-nav a {
  display: flex;
  align-items: center;
  color: #dedede;
  text-decoration: none;
  padding: 0 15px 0 0;
  color: #d6bb5c;
}

body header nav.user-nav a span {
  -webkit-transition: 0.25s all 0s cubic-bezier(0.23, 1, 0.32, 1);
  transition: 0.25s all 0s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(top, #efd100 0, #e2a233 19%, #f0c328 30%, #fff1a3 43%, #ffe13e 50%, #fff 51%, #fff 100%);
  background-size: 1em 2.5em;
  color: #f8b700;
  display: inline-block;
  line-height: 1.5em;
  position: relative;
  z-index: auto;
  background-position: center 0;
}

body header nav.user-nav a:hover {
  color: #f3f3f3;
}

body header nav.user-nav a:hover span {
  background-image: -webkit-linear-gradient(top, #f3f3f3 0, #f3f3f3 19%, #f3f3f3 30%, #f3f3f3 43%, #f3f3f3 50%, #f3f3f3 51%, #f3f3f3 100%);
  color: #f3f3f3;
}

body header nav.user-nav a#userProfile {
  /*&:before {
                        content:'\f007';
                        font-family: "Font Awesome 5 Free";
                        font-weight: normal;
                        font-style: normal;
                        display: inline-block;
                        text-decoration: inherit;
                        margin: 0 8px 0 0
                    }*/
}

body header nav.user-nav a#userProfile img.userThumb {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: top;
  margin: 4px 8px;
}

body header nav.user-nav a#logout:hover {
  color: #c44444;
}

body #sidebar {
  width: 182px;
  max-width: 182px;
  position: fixed;
  left: 0;
  top: 45px;
  background: rgba(0, 0, 0, 0.2);
  height: calc(100vh - 45px);
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: 15px 0 0 0;
}

body #sidebar a {
  display: block;
  padding: 10px 25px;
  width: 100%;
  text-decoration: none;
  color: #d6bb5c;
}

body #sidebar a:hover {
  color: #f3f3f3;
}

body h1 {
  color: #f3f3f3;
  font-size: 28px;
  padding: 20px;
}

body h1 .subheader {
  display: block;
  font-weight: normal;
  font-size: 12px;
  font-style: italic;
}

body footer {
  padding: 10px;
}

body#login {
  background: black url(../images/login-map-bg.jpg);
  background-size: 200%;
  animation: panning 380s infinite linear;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

body#login .frame {
  position: absolute;
  width: 100vw;
  height: 220px;
  max-height: 16vh;
}

body#login .frame.top {
  background: url(../images/login-top-frame.png) repeat-x right bottom;
  background-size: contain;
  top: -5px;
  left: 0;
  right: 0;
}

body#login .frame.bottom {
  background: url(../images/login-bottom-frame.png) repeat-x right bottom;
  background-size: contain;
  bottom: -5px;
  left: 0;
  right: 0;
}

body#login #mainLogo {
  display: inline-block;
  margin: 0 -5px;
  max-width: 50px;
  vertical-align: top;
}

body#login #user-login {
  margin: 0 150px 0 auto;
  min-width: 360px;
  height: 100vh;
  padding: 24vh 0 0 0;
  background: rgba(0, 0, 0, 0.5);
  border: 2px #0b0b0b solid;
}

body#login #user-login h1 {
  border-radius: 8px 8px 0 0;
  text-align: center;
  text-transform: uppercase;
  padding: 10px;
  font-size: 40px;
  color: #f3f3f3;
}

body#login #user-login .user-input {
  padding: 0 20px 20px 20px;
  display: flex;
  flex-direction: column;
}

body#login #user-login .user-input .form-group {
  position: relative;
}

body#login #user-login .user-input .form-group + .form-group {
  margin-top: 30px;
}

body#login #user-login .user-input .form-label {
  position: absolute;
  left: 0;
  top: 10px;
  color: #d6bb5c;
  z-index: 10;
  transition: transform 150ms ease-out, font-size 150ms ease-out;
  padding: 5px 0 0 5px;
}

body#login #user-login .user-input .focused .form-label {
  transform: translateY(-125%);
  font-size: .75em;
  padding: 0;
  color: #d6bb5c;
}

body#login #user-login .user-input .form-input {
  position: relative;
  padding: 12px 0px 5px 0;
  width: 100%;
  outline: 0;
  border: 0;
  box-shadow: 0 1px 0 0 #0b0b0b;
  transition: box-shadow 150ms ease-out;
  color: #d6bb5c;
}

body#login #user-login .user-input .form-input:focus {
  box-shadow: 0 2px 0 0 blue;
}

body#login #user-login .user-input .form-input.filled {
  box-shadow: 0 2px 0 0 lightgreen;
}

body#login #user-login .user-input input[type=text], body#login #user-login .user-input input[type=password] {
  flex-basis: 100%;
  margin: 10px 0 0 0;
  padding: 8px;
  border-radius: 4px;
  background: #3b3b3b;
}

body#login #user-login .user-input input[type=submit] {
  margin: 10px 0 10px auto;
  background: #0b0b0b;
  color: #d6bb5c;
  padding: 10px 30px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

body#login #user-login .user-input input[type=submit]:hover {
  background: #d6bb5c;
  color: #0b0b0b;
}

body#profile .notice, body#editProfile .notice, body#users .notice, body#characters .notice {
  top: initial;
  bottom: 0px;
  position: fixed;
}

body#profile .addPlayer, body#editProfile .addPlayer, body#users .addPlayer, body#characters .addPlayer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 20px;
  margin: 0 0 0 35px;
  border: #f3f3f3 1px solid;
  border-radius: 4px;
  color: #f3f3f3;
  align-items: center;
  width: 220px;
  justify-content: center;
  font-size: 16px;
  text-decoration: none;
}

body#profile .addPlayer:hover, body#editProfile .addPlayer:hover, body#users .addPlayer:hover, body#characters .addPlayer:hover {
  border: green 1px solid;
  color: green;
}

body#profile .addPlayer i, body#editProfile .addPlayer i, body#users .addPlayer i, body#characters .addPlayer i {
  margin: 0 20px 0 0;
}

body#profile .container, body#editProfile .container, body#users .container, body#characters .container {
  padding: 25px;
  display: flex;
  flex-direction: column;
}

body#profile .container.character, body#editProfile .container.character, body#users .container.character, body#characters .container.character {
  color: #d6bb5c;
}

body#profile .container.character input, body#profile .container.character select, body#profile .container.character option, body#profile .container.character span, body#profile .container.character ul, body#profile .container.character li, body#editProfile .container.character input, body#editProfile .container.character select, body#editProfile .container.character option, body#editProfile .container.character span, body#editProfile .container.character ul, body#editProfile .container.character li, body#users .container.character input, body#users .container.character select, body#users .container.character option, body#users .container.character span, body#users .container.character ul, body#users .container.character li, body#characters .container.character input, body#characters .container.character select, body#characters .container.character option, body#characters .container.character span, body#characters .container.character ul, body#characters .container.character li {
  color: #0b0b0b;
  font-size: 14px;
}

body#profile .container.users, body#editProfile .container.users, body#users .container.users, body#characters .container.users {
  flex-direction: row;
  flex-wrap: wrap;
}

body#profile .container.users section, body#editProfile .container.users section, body#users .container.users section, body#characters .container.users section {
  flex-basis: 48%;
  margin: 5px;
  padding: 25px 10px;
}

body#profile .container.users section:nth-child(1), body#profile .container.users section:nth-child(2), body#editProfile .container.users section:nth-child(1), body#editProfile .container.users section:nth-child(2), body#users .container.users section:nth-child(1), body#users .container.users section:nth-child(2), body#characters .container.users section:nth-child(1), body#characters .container.users section:nth-child(2) {
  margin: 20px 5px 5px 5px;
}

body#profile .container.users section .editProfile, body#editProfile .container.users section .editProfile, body#users .container.users section .editProfile, body#characters .container.users section .editProfile {
  top: 15px;
  right: 15px;
}

body#profile .container.users section .deleteUser, body#editProfile .container.users section .deleteUser, body#users .container.users section .deleteUser, body#characters .container.users section .deleteUser {
  top: 42px;
  right: 15px;
}

body#profile .container.users section .photo, body#editProfile .container.users section .photo, body#users .container.users section .photo, body#characters .container.users section .photo {
  padding: 25px !important;
}

body#profile .container.users section .photo .portrait_frame, body#editProfile .container.users section .photo .portrait_frame, body#users .container.users section .photo .portrait_frame, body#characters .container.users section .photo .portrait_frame {
  min-width: 125px !important;
  max-width: 125px !important;
  min-height: 135px !important;
  max-height: 135px !important;
}

body#profile .container.users section .photo img, body#editProfile .container.users section .photo img, body#users .container.users section .photo img, body#characters .container.users section .photo img {
  max-width: 80px !important;
  min-width: 80px !important;
  max-height: 80px;
  width: initial !important;
}

body#profile .container.users section a, body#editProfile .container.users section a, body#users .container.users section a, body#characters .container.users section a {
  text-decoration: none;
}

body#profile .container.users section a:hover h1, body#profile .container.users section a:hover .subheader, body#editProfile .container.users section a:hover h1, body#editProfile .container.users section a:hover .subheader, body#users .container.users section a:hover h1, body#users .container.users section a:hover .subheader, body#characters .container.users section a:hover h1, body#characters .container.users section a:hover .subheader {
  color: #f3f3f3;
}

body#profile .container.users section a h1, body#editProfile .container.users section a h1, body#users .container.users section a h1, body#characters .container.users section a h1 {
  color: #d6bb5c;
}

body#profile .container.users section a h1 .subheader, body#editProfile .container.users section a h1 .subheader, body#users .container.users section a h1 .subheader, body#characters .container.users section a h1 .subheader {
  color: #888;
}

body#profile .container.users section h1, body#editProfile .container.users section h1, body#users .container.users section h1, body#characters .container.users section h1 {
  font-size: 18px;
  padding: 0 0 0 8px;
}

body#profile .container section, body#editProfile .container section, body#users .container section, body#characters .container section {
  flex-basis: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 15px;
  border: #3a3a3a 1px solid;
  border-radius: 4px;
  position: relative;
}

body#profile .container section #editProfile, body#profile .container section .editProfile, body#profile .container section .deleteUser, body#editProfile .container section #editProfile, body#editProfile .container section .editProfile, body#editProfile .container section .deleteUser, body#users .container section #editProfile, body#users .container section .editProfile, body#users .container section .deleteUser, body#characters .container section #editProfile, body#characters .container section .editProfile, body#characters .container section .deleteUser {
  color: #d6bb5c;
  position: absolute;
  top: 30px;
  right: 30px;
  text-decoration: none;
}

body#profile .container section #editProfile span, body#profile .container section .editProfile span, body#profile .container section .deleteUser span, body#editProfile .container section #editProfile span, body#editProfile .container section .editProfile span, body#editProfile .container section .deleteUser span, body#users .container section #editProfile span, body#users .container section .editProfile span, body#users .container section .deleteUser span, body#characters .container section #editProfile span, body#characters .container section .editProfile span, body#characters .container section .deleteUser span {
  -webkit-transition: 0.25s all 0s cubic-bezier(0.23, 1, 0.32, 1);
  transition: 0.25s all 0s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(top, #efd100 0, #e2a233 19%, #f0c328 30%, #fff1a3 43%, #ffe13e 50%, #ffe13e 51%, #ffe13e 100%);
  color: #f8b700;
}

body#profile .container section .deleteUser, body#editProfile .container section .deleteUser, body#users .container section .deleteUser, body#characters .container section .deleteUser {
  top: 55px;
}

body#profile .container section h1, body#editProfile .container section h1, body#users .container section h1, body#characters .container section h1 {
  padding: 20px 0;
}

body#profile .container section.profile_player .photo, body#editProfile .container section.profile_player .photo, body#users .container section.profile_player .photo, body#characters .container section.profile_player .photo {
  flex-basis: 20%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  max-height: 200px;
}

body#profile .container section.profile_player .photo.edit, body#editProfile .container section.profile_player .photo.edit, body#users .container section.profile_player .photo.edit, body#characters .container section.profile_player .photo.edit {
  max-height: 50%;
  height: 50%;
}

body#profile .container section.profile_player .photo .portrait_frame, body#editProfile .container section.profile_player .photo .portrait_frame, body#users .container section.profile_player .photo .portrait_frame, body#characters .container section.profile_player .photo .portrait_frame {
  position: absolute;
  width: 120%;
  height: 120%;
  max-height: 200px;
  display: block;
  max-width: 192px;
}

body#profile .container section.profile_player .photo img, body#profile .container section.profile_player .photo #profilePreview, body#editProfile .container section.profile_player .photo img, body#editProfile .container section.profile_player .photo #profilePreview, body#users .container section.profile_player .photo img, body#users .container section.profile_player .photo #profilePreview, body#characters .container section.profile_player .photo img, body#characters .container section.profile_player .photo #profilePreview {
  border-radius: 50%;
  max-width: 125px;
  height: 125px;
  width: 100%;
  min-width: 125px;
}

body#profile .container section.profile_player .info, body#editProfile .container section.profile_player .info, body#users .container section.profile_player .info, body#characters .container section.profile_player .info {
  flex-basis: 70%;
}

body#profile .container section.profile_player .info .bio, body#editProfile .container section.profile_player .info .bio, body#users .container section.profile_player .info .bio, body#characters .container section.profile_player .info .bio {
  color: #4a4a4a;
}

body#profile .container section.profile_player form, body#editProfile .container section.profile_player form, body#users .container section.profile_player form, body#characters .container section.profile_player form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

body#profile .container section.profile_player form fieldset, body#editProfile .container section.profile_player form fieldset, body#users .container section.profile_player form fieldset, body#characters .container section.profile_player form fieldset {
  flex-basis: 48%;
  margin: 0 auto;
  border: #5a5a5a 1px solid;
  border-radius: 3px;
}

body#profile .container section.profile_player form fieldset legend, body#editProfile .container section.profile_player form fieldset legend, body#users .container section.profile_player form fieldset legend, body#characters .container section.profile_player form fieldset legend {
  -webkit-transition: 0.25s all 0s cubic-bezier(0.23, 1, 0.32, 1);
  transition: 0.25s all 0s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(top, #efd100 0, #e2a233 19%, #f0c328 30%, #fff1a3 43%, #ffe13e 50%, #ffe13e 51%, #ffe13e 100%);
  color: #f8b700;
}

body#profile .container section.profile_player form fieldset label, body#editProfile .container section.profile_player form fieldset label, body#users .container section.profile_player form fieldset label, body#characters .container section.profile_player form fieldset label {
  display: block;
  color: #f3f3f3;
  padding: 0 0 20px 0;
}

body#profile .container section.profile_player form fieldset label input, body#profile .container section.profile_player form fieldset label textarea, body#profile .container section.profile_player form fieldset label select, body#editProfile .container section.profile_player form fieldset label input, body#editProfile .container section.profile_player form fieldset label textarea, body#editProfile .container section.profile_player form fieldset label select, body#users .container section.profile_player form fieldset label input, body#users .container section.profile_player form fieldset label textarea, body#users .container section.profile_player form fieldset label select, body#characters .container section.profile_player form fieldset label input, body#characters .container section.profile_player form fieldset label textarea, body#characters .container section.profile_player form fieldset label select {
  display: block;
  padding: 8px;
  font-size: 14px;
  width: 100%;
  resize: none;
  border: 0;
  border-radius: 7px;
}

body#profile .container section.profile_player form fieldset label textarea, body#editProfile .container section.profile_player form fieldset label textarea, body#users .container section.profile_player form fieldset label textarea, body#characters .container section.profile_player form fieldset label textarea {
  height: 175px;
}

body#profile .container section.profile_player form fieldset label #profileSubmit, body#profile .container section.profile_player form fieldset label #profileCreate, body#editProfile .container section.profile_player form fieldset label #profileSubmit, body#editProfile .container section.profile_player form fieldset label #profileCreate, body#users .container section.profile_player form fieldset label #profileSubmit, body#users .container section.profile_player form fieldset label #profileCreate, body#characters .container section.profile_player form fieldset label #profileSubmit, body#characters .container section.profile_player form fieldset label #profileCreate {
  cursor: pointer;
  text-align: center;
  padding: 10px;
  margin: 10px auto;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #efd100 0, #e2a233 19%, #f0c328 43%, #fff1a3 63%, #ffe13e 83%, #ffe13e 84%, #ffe13e 100%);
  color: #0b0b0b;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translate3d(0, 0, 0);
  }
  5% {
    opacity: 0.9;
    transform: scale(1.1);
  }
  8% {
    opacity: 1;
    transform: scale(0.89);
  }
  10% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
  }
  90% {
    opacity: 1;
  }
  97% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}

@keyframes panning {
  0% {
    background-position: 100% 0%;
  }
  25% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  75% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 100% 0;
  }
}

body .jconfirm-cell {
  background: rgba(255, 255, 255, 0.1);
}

body .jconfirm-cell .jconfirm-holder {
  margin: 0 auto;
  width: 60vw;
  max-width: 768px;
  min-width: 450px;
}

body .jconfirm-cell .jconfirm-holder .jconfirm-box {
  background: #0b0b0b url(../images/binding_dark.png) repeat center;
}

body .jconfirm-cell .jconfirm-holder .jconfirm-box .jconfirm-title, body .jconfirm-cell .jconfirm-holder .jconfirm-box .jconfirm-content {
  -webkit-transition: 0.25s all 0s cubic-bezier(0.23, 1, 0.32, 1);
  transition: 0.25s all 0s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -webkit-linear-gradient(top, #efd100 0, #e2a233 19%, #f0c328 30%, #fff1a3 43%, #ffe13e 50%, #fff 51%, #fff 100%);
  background-size: 1em 2.5em;
  color: #f8b700;
  display: inline-block;
  line-height: 1.5em;
  position: relative;
  z-index: auto;
  background-position: center 0;
}

body .jconfirm-cell .jconfirm-holder .jconfirm-box .jconfirm-title p, body .jconfirm-cell .jconfirm-holder .jconfirm-box .jconfirm-content p {
  color: #f3f3f3;
  background: none;
  -webkit-text-fill-color: initial;
}

body .jconfirm-cell .jconfirm-holder .jconfirm-box .jconfirm-buttons button {
  background: #f8b700;
}