.white {
  color: #fff;
}

.bg-white {
  background-color: #fff;
}

.border-white {
  border-color: #fff;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-white {
    border-color: #fff;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-white {
    border-color: #fff;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-white {
    border-color: #fff;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-white {
    border-color: #fff;
  }
}
.black {
  color: #0b0b0b;
}

.bg-black {
  background-color: #0b0b0b;
}

.border-black {
  border-color: #0b0b0b;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-black {
    border-color: #0b0b0b;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-black {
    border-color: #0b0b0b;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-black {
    border-color: #0b0b0b;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-black {
    border-color: #0b0b0b;
  }
}
.background {
  color: #33363c;
}

.bg-background {
  background-color: #33363c;
}

.border-background {
  border-color: #33363c;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-background {
    border-color: #33363c;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-background {
    border-color: #33363c;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-background {
    border-color: #33363c;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-background {
    border-color: #33363c;
  }
}
.space {
  color: #ddd1b1;
}

.bg-space {
  background-color: #ddd1b1;
}

.border-space {
  border-color: #ddd1b1;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-space {
    border-color: #ddd1b1;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-space {
    border-color: #ddd1b1;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-space {
    border-color: #ddd1b1;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-space {
    border-color: #ddd1b1;
  }
}
.cell-background {
  color: #3e4044;
}

.bg-cell-background {
  background-color: #3e4044;
}

.border-cell-background {
  border-color: #3e4044;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-cell-background {
    border-color: #3e4044;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-cell-background {
    border-color: #3e4044;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-cell-background {
    border-color: #3e4044;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-cell-background {
    border-color: #3e4044;
  }
}
.header {
  color: #000000;
}

.bg-header {
  background-color: #000000;
}

.border-header {
  border-color: #000000;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-header {
    border-color: #000000;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-header {
    border-color: #000000;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-header {
    border-color: #000000;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-header {
    border-color: #000000;
  }
}
.gray {
  color: #ddd;
}

.bg-gray {
  background-color: #ddd;
}

.border-gray {
  border-color: #ddd;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-gray {
    border-color: #ddd;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-gray {
    border-color: #ddd;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-gray {
    border-color: #ddd;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-gray {
    border-color: #ddd;
  }
}
.lightgray {
  color: #e4e4e4;
}

.bg-lightgray {
  background-color: #e4e4e4;
}

.border-lightgray {
  border-color: #e4e4e4;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-lightgray {
    border-color: #e4e4e4;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-lightgray {
    border-color: #e4e4e4;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-lightgray {
    border-color: #e4e4e4;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-lightgray {
    border-color: #e4e4e4;
  }
}
.red {
  color: #FB2F04;
}

.bg-red {
  background-color: #FB2F04;
}

.border-red {
  border-color: #FB2F04;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-red {
    border-color: #FB2F04;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-red {
    border-color: #FB2F04;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-red {
    border-color: #FB2F04;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-red {
    border-color: #FB2F04;
  }
}
.green {
  color: #04951A;
}

.bg-green {
  background-color: #04951A;
}

.border-green {
  border-color: #04951A;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-green {
    border-color: #04951A;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-green {
    border-color: #04951A;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-green {
    border-color: #04951A;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-green {
    border-color: #04951A;
  }
}
.blinded {
  color: #C19AFC;
}

.bg-blinded {
  background-color: #C19AFC;
}

.border-blinded {
  border-color: #C19AFC;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-blinded {
    border-color: #C19AFC;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-blinded {
    border-color: #C19AFC;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-blinded {
    border-color: #C19AFC;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-blinded {
    border-color: #C19AFC;
  }
}
.charmed {
  color: #F320A2;
}

.bg-charmed {
  background-color: #F320A2;
}

.border-charmed {
  border-color: #F320A2;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-charmed {
    border-color: #F320A2;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-charmed {
    border-color: #F320A2;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-charmed {
    border-color: #F320A2;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-charmed {
    border-color: #F320A2;
  }
}
.deafened {
  color: #08C4F1;
}

.bg-deafened {
  background-color: #08C4F1;
}

.border-deafened {
  border-color: #08C4F1;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-deafened {
    border-color: #08C4F1;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-deafened {
    border-color: #08C4F1;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-deafened {
    border-color: #08C4F1;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-deafened {
    border-color: #08C4F1;
  }
}
.frightened {
  color: #850CEB;
}

.bg-frightened {
  background-color: #850CEB;
}

.border-frightened {
  border-color: #850CEB;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-frightened {
    border-color: #850CEB;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-frightened {
    border-color: #850CEB;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-frightened {
    border-color: #850CEB;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-frightened {
    border-color: #850CEB;
  }
}
.grappled {
  color: #927B56;
}

.bg-grappled {
  background-color: #927B56;
}

.border-grappled {
  border-color: #927B56;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-grappled {
    border-color: #927B56;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-grappled {
    border-color: #927B56;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-grappled {
    border-color: #927B56;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-grappled {
    border-color: #927B56;
  }
}
.incapacitated {
  color: #1758FD;
}

.bg-incapacitated {
  background-color: #1758FD;
}

.border-incapacitated {
  border-color: #1758FD;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-incapacitated {
    border-color: #1758FD;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-incapacitated {
    border-color: #1758FD;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-incapacitated {
    border-color: #1758FD;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-incapacitated {
    border-color: #1758FD;
  }
}
.invisible {
  color: #93FF00;
}

.bg-invisible {
  background-color: #93FF00;
}

.border-invisible {
  border-color: #93FF00;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-invisible {
    border-color: #93FF00;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-invisible {
    border-color: #93FF00;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-invisible {
    border-color: #93FF00;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-invisible {
    border-color: #93FF00;
  }
}
.paralyzed {
  color: #F65E00;
}

.bg-paralyzed {
  background-color: #F65E00;
}

.border-paralyzed {
  border-color: #F65E00;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-paralyzed {
    border-color: #F65E00;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-paralyzed {
    border-color: #F65E00;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-paralyzed {
    border-color: #F65E00;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-paralyzed {
    border-color: #F65E00;
  }
}
.petrified {
  color: #EF0950;
}

.bg-petrified {
  background-color: #EF0950;
}

.border-petrified {
  border-color: #EF0950;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-petrified {
    border-color: #EF0950;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-petrified {
    border-color: #EF0950;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-petrified {
    border-color: #EF0950;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-petrified {
    border-color: #EF0950;
  }
}
.poisoned {
  color: #10E43D;
}

.bg-poisoned {
  background-color: #10E43D;
}

.border-poisoned {
  border-color: #10E43D;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-poisoned {
    border-color: #10E43D;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-poisoned {
    border-color: #10E43D;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-poisoned {
    border-color: #10E43D;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-poisoned {
    border-color: #10E43D;
  }
}
.prone {
  color: #82008A;
}

.bg-prone {
  background-color: #82008A;
}

.border-prone {
  border-color: #82008A;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-prone {
    border-color: #82008A;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-prone {
    border-color: #82008A;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-prone {
    border-color: #82008A;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-prone {
    border-color: #82008A;
  }
}
.restrained {
  color: #F2EB1C;
}

.bg-restrained {
  background-color: #F2EB1C;
}

.border-restrained {
  border-color: #F2EB1C;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-restrained {
    border-color: #F2EB1C;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-restrained {
    border-color: #F2EB1C;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-restrained {
    border-color: #F2EB1C;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-restrained {
    border-color: #F2EB1C;
  }
}
.stunned {
  color: #FC9D03;
}

.bg-stunned {
  background-color: #FC9D03;
}

.border-stunned {
  border-color: #FC9D03;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-stunned {
    border-color: #FC9D03;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-stunned {
    border-color: #FC9D03;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-stunned {
    border-color: #FC9D03;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-stunned {
    border-color: #FC9D03;
  }
}
.unconscious {
  color: #D0BE22;
}

.bg-unconscious {
  background-color: #D0BE22;
}

.border-unconscious {
  border-color: #D0BE22;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-unconscious {
    border-color: #D0BE22;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-unconscious {
    border-color: #D0BE22;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-unconscious {
    border-color: #D0BE22;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-unconscious {
    border-color: #D0BE22;
  }
}
.death {
  color: #a10b0b;
}

.bg-death {
  background-color: #a10b0b;
}

.border-death {
  border-color: #a10b0b;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-death {
    border-color: #a10b0b;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-death {
    border-color: #a10b0b;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-death {
    border-color: #a10b0b;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-death {
    border-color: #a10b0b;
  }
}
.red-button {
  color: #99001A;
}

.bg-red-button {
  background-color: #99001A;
}

.border-red-button {
  border-color: #99001A;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-red-button {
    border-color: #99001A;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-red-button {
    border-color: #99001A;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-red-button {
    border-color: #99001A;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-red-button {
    border-color: #99001A;
  }
}
.red-button-hover {
  color: #fa0707;
}

.bg-red-button-hover {
  background-color: #fa0707;
}

.border-red-button-hover {
  border-color: #fa0707;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-red-button-hover {
    border-color: #fa0707;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-red-button-hover {
    border-color: #fa0707;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-red-button-hover {
    border-color: #fa0707;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-red-button-hover {
    border-color: #fa0707;
  }
}
.green-button {
  color: #226600;
}

.bg-green-button {
  background-color: #226600;
}

.border-green-button {
  border-color: #226600;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-green-button {
    border-color: #226600;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-green-button {
    border-color: #226600;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-green-button {
    border-color: #226600;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-green-button {
    border-color: #226600;
  }
}
.green-button-hover {
  color: rgba(115, 158, 63, 0.8470588235);
}

.bg-green-button-hover {
  background-color: rgba(115, 158, 63, 0.8470588235);
}

.border-green-button-hover {
  border-color: rgba(115, 158, 63, 0.8470588235);
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-green-button-hover {
    border-color: rgba(115, 158, 63, 0.8470588235);
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-green-button-hover {
    border-color: rgba(115, 158, 63, 0.8470588235);
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-green-button-hover {
    border-color: rgba(115, 158, 63, 0.8470588235);
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-green-button-hover {
    border-color: rgba(115, 158, 63, 0.8470588235);
  }
}
.blue-button {
  color: #4D88FF;
}

.bg-blue-button {
  background-color: #4D88FF;
}

.border-blue-button {
  border-color: #4D88FF;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-blue-button {
    border-color: #4D88FF;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-blue-button {
    border-color: #4D88FF;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-blue-button {
    border-color: #4D88FF;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-blue-button {
    border-color: #4D88FF;
  }
}
.blue-button-hover {
  color: #001580;
}

.bg-blue-button-hover {
  background-color: #001580;
}

.border-blue-button-hover {
  border-color: #001580;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-blue-button-hover {
    border-color: #001580;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-blue-button-hover {
    border-color: #001580;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-blue-button-hover {
    border-color: #001580;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-blue-button-hover {
    border-color: #001580;
  }
}
.orange1 {
  color: rgb(167, 98, 3);
}

.bg-orange1 {
  background-color: rgb(167, 98, 3);
}

.border-orange1 {
  border-color: rgb(167, 98, 3);
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-orange1 {
    border-color: rgb(167, 98, 3);
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-orange1 {
    border-color: rgb(167, 98, 3);
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-orange1 {
    border-color: rgb(167, 98, 3);
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-orange1 {
    border-color: rgb(167, 98, 3);
  }
}
.orange2 {
  color: rgb(247, 199, 102);
}

.bg-orange2 {
  background-color: rgb(247, 199, 102);
}

.border-orange2 {
  border-color: rgb(247, 199, 102);
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-orange2 {
    border-color: rgb(247, 199, 102);
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-orange2 {
    border-color: rgb(247, 199, 102);
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-orange2 {
    border-color: rgb(247, 199, 102);
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-orange2 {
    border-color: rgb(247, 199, 102);
  }
}
.alert-orange1 {
  color: #ffa502;
}

.bg-alert-orange1 {
  background-color: #ffa502;
}

.border-alert-orange1 {
  border-color: #ffa502;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-alert-orange1 {
    border-color: #ffa502;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-alert-orange1 {
    border-color: #ffa502;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-alert-orange1 {
    border-color: #ffa502;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-alert-orange1 {
    border-color: #ffa502;
  }
}
.alert-orange2 {
  color: #ce8500;
}

.bg-alert-orange2 {
  background-color: #ce8500;
}

.border-alert-orange2 {
  border-color: #ce8500;
}

@media (min-width: 576px) {
  .border-sm-none {
    border: none;
  }
  .border-sm-alert-orange2 {
    border-color: #ce8500;
  }
}
@media (min-width: 768px) {
  .border-md-none {
    border: none;
  }
  .border-md-alert-orange2 {
    border-color: #ce8500;
  }
}
@media (min-width: 992px) {
  .border-lg-none {
    border: none;
  }
  .border-lg-alert-orange2 {
    border-color: #ce8500;
  }
}
@media (min-width: 1100px) {
  .border-xl-none {
    border: none;
  }
  .border-xl-alert-orange2 {
    border-color: #ce8500;
  }
}
body {
  background: #0b0b0b;
}

.current, #row-number {
  display: none;
  font-size: 38px;
}

table {
  border-collapse: collapse;
  border-radius: 5px 5px 0 0;
}

.button-row {
  margin-bottom: 20px;
}

.main-stats {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  border-bottom: 5px solid #0b0b0b;
}
.main-stats #showInitiative, .main-stats #showBattle, .main-stats #showAll {
  border: 1px solid #0b0b0b;
  padding: 5px;
  border-collapse: collapse;
  border-radius: 5px 5px 0 0;
  font-weight: 500;
  font-size: 18px;
}
.main-stats #showAll {
  padding-left: 10px;
  padding-right: 10px;
  color: #fff;
  background-color: #0b0b0b;
}
.main-stats .view {
  max-width: 75px;
  text-align: center;
}

.main-view {
  min-width: 325px;
}
@media (min-width: 768px) {
  .main-view {
    margin-top: 10px;
    margin-left: 5px;
    margin: none !important;
  }
}
@media (max-width: 650px) {
  .main-view {
    margin: auto;
    padding-top: 5px;
  }
}
@media (min-width: 800px) {
  .main-view {
    margin: none !important;
    padding-top: 5px;
  }
}
.main-view button {
  color: #0b0b0b;
  font-size: 18px;
  font-weight: bold;
  border-radius: 5px;
  border: 2px solid black;
  margin-top: 5px;
  transition: all 235ms ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -18px;
  background: linear-gradient(0deg, rgb(167, 98, 3) 0%, rgb(247, 199, 102));
}
.main-view button:focus {
  outline: none;
}
.main-view table {
  background-color: #ddd1b1 !important;
  border: 3px solid #0b0b0b;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  font-family: inherit;
  margin-top: 10px;
  font-size: 18px;
}
@media (min-width: 768px) {
  .main-view table {
    font-size: 32px;
  }
}
.main-view table th, .main-view table tr, .main-view table td {
  font-size: 26px;
}
.main-view table th {
  font-size: 24px;
  background-color: #0b0b0b;
  color: #fff;
}
@media (min-width: 768px) {
  .main-view table th {
    font-size: 28px;
    text-align: center;
  }
}
.main-view table th a {
  border-radius: 15px !important;
  text-align: center;
  background-color: #fff;
  color: #0b0b0b;
  font-weight: bold;
}
.main-view table th a:hover {
  text-decoration: none;
  background-color: #fff;
  color: #0b0b0b;
}
.main-view table .player-initiative {
  font-weight: bold;
  font-size: 22px;
}
.main-view table .player-control {
  border: none;
  margin-left: 5px;
  padding: 0 !important;
}
.main-view table .player-name {
  font-size: 30px;
  font-weight: 500;
  padding: 5px;
  min-width: 150px;
}
.main-view table .player-ac, .main-view table .player-hp {
  font-size: 22px;
  font-weight: bold;
  padding: 5px;
}
.main-view table .init-number {
  font-size: 14px;
  writing-mode: vertical-lr;
  width: 50px;
  cursor: pointer;
  text-align: center !important;
  vertical-align: left;
}
.main-view table .hit-points, .main-view table .player-controls {
  text-align: center;
}
.main-view table .init-player {
  width: 150px;
  text-align: left !important;
}
.main-view table .init-edit {
  width: 75px;
}
.main-view table .conditional-effect {
  border: none;
  background-color: #fff;
}
.main-view .init-buttons {
  text-align: center;
}
.main-view .init-buttons .delete-btn {
  color: #FB2F04;
  background: none;
}
.main-view .init-buttons i {
  font-size: 16px;
}
.main-view .init-buttons .hold-action {
  color: #04951A;
  background: none;
}
.main-view .round-control {
  width: 100%;
}
.main-view .round-control #finishCombat, .main-view .round-control #nextInRound {
  display: none;
}

.player-controls {
  padding-bottom: 10px;
}

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

.initiative-view {
  display: flex;
  background-color: #0b0b0b;
  background-image: url("/images/d20_b.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right bottom;
  max-width: 100%;
  margin: 0 auto;
  min-height: 100vh;
}
@media (max-width: 420px) {
  .initiative-view {
    display: block;
    margin: auto;
  }
}
@media (min-width: 800px) {
  .initiative-view {
    display: flex;
  }
}

.cards {
  margin-top: 2rem;
  margin-left: 1rem;
}

.card-container {
  display: inline-flex;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  margin: 5px;
}

.player-card {
  border-radius: 5px 5px 0 0;
  background-color: #0b0b0b;
}
.player-card .close-card {
  position: relative;
}
.player-card .close-card .close-card-link {
  font-size: 24px;
}
.player-card .close-card .close-card-link i {
  position: absolute;
  border: 2px solid #a10b0b;
  border-radius: 15px;
  top: -8px;
  right: -8px;
  color: #fff;
  background-color: #a10b0b;
  text-align: center;
}
.player-card .head {
  text-align: center;
  color: #fff;
  background-color: #0b0b0b;
  border-radius: 5px 5px 0 0;
}
@media (min-width: 576px) {
  .player-card .head {
    font-size: 24px;
    padding: 5px 5px;
  }
}
.player-card .head h2 {
  padding: 5px 15px;
  border-bottom: 2px solid white;
}
.player-card .head a {
  color: #fff;
  text-align: center;
}
.player-card .head a:hover {
  text-decoration: none;
}
.player-card .card-body {
  background: linear-gradient(200deg, rgb(167, 98, 3) 20%, rgb(247, 199, 102) 100%);
  border: 3px solid #0b0b0b;
  border-radius: 3px;
  padding: 1rem !important;
}
.player-card .card-body p {
  font-weight: bold;
  color: #0b0b0b;
}
.player-card .card-body .hp-view {
  background-color: #ddd1b1;
  border: 3px solid #0b0b0b;
  display: flex;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.player-card .card-body .hp-view p {
  font-size: 36px;
  margin-top: 15px;
}
.player-card .card-body .hp-view button {
  border-radius: 0;
  width: 32px;
  font-weight: bold;
  padding-left: 5px;
  color: #fff;
  background-color: #04951A;
  border: none;
  background: linear-gradient(90deg, rgb(167, 98, 3) 0%, rgb(247, 199, 102) 100%);
}
.player-card .card-body .hp-view button span {
  text-align: center;
  font-size: 14px;
  writing-mode: vertical-lr;
  margin-top: 5px;
  max-width: 40px;
}
.player-card .card-body .temp-view {
  display: flex;
  text-align: center;
  margin: 0 auto;
  height: 35px;
  font-weight: bold;
  color: green;
  background-color: #ddd1b1;
  border: 3px solid #0b0b0b;
  border-top: 0;
}
.player-card .card-body .temp-view label {
  background: linear-gradient(0deg, rgba(115, 158, 63, 0.8470588235) 0%, #226600 100%);
  color: white;
  height: 32px;
  width: 65%;
  font-size: 20px;
}
.player-card .card-body .temp-view span {
  margin-bottom: 10px;
  font-size: 22px !important;
  font-weight: bold;
  color: 128 !important;
}
.player-card .card-body .conditions-buffs p {
  margin-top: 5px;
  margin-bottom: 10px;
}
.player-card .card-body .conditions-buffs .affects-table {
  font-size: 14px;
  font-weight: bold;
  background-color: #ddd1b1;
  color: #0b0b0b;
  border-radius: 0 0 0 0;
  margin: 0 auto;
  width: 100%;
  margin-top: 5px;
  border: 2px solid #0b0b0b;
}
.player-card .card-body .conditions-buffs .affects-table tr th {
  text-align: left;
  padding: 5px;
  background-color: #0b0b0b;
}
.player-card .card-body .conditions-buffs .affects-table tr td {
  padding: 5px 10px;
  text-align: left;
}
.player-card .card-body .affects-list {
  height: 90px;
  min-width: 13rem;
  overflow: auto;
  border: 2px solid black;
  border-radius: 5px;
  box-shadow: 0 0 20px rgb(0, 0, 0);
  font-size: 14px;
  font-weight: bold !important;
  background-color: #ddd1b1;
  color: #0b0b0b;
  padding: 0.5rem !important;
}
.player-card .card-body .dropdown-item {
  padding: 0.5rem !important;
  font-weight: bold !important;
  display: inline !important;
}
.player-card .card-body .dropdown-item:hover {
  background-color: transparent !important;
}
.player-card .card-body form {
  /* The autocomplete dropdown UL */
}
.player-card .card-body form .effect-button {
  background-color: #0b0b0b;
  border: none;
  color: #fff;
  font-weight: bold;
  height: 35px;
  margin-right: 6px;
  white-space: nowrap;
  border-radius: 0px 5px 5px 0px;
}
.player-card .card-body form .effect-input {
  border: 2px solid #0b0b0b;
  background-color: #ddd1b1;
  padding: 5px;
  max-width: 10rem;
  font-weight: bold;
  margin-left: 5px;
  flex: 1; /* input grows to fill available space */
  min-width: 0;
  border-radius: 5px 0px 0px 5px;
}
.player-card .card-body form .effect-input:focus {
  outline: none;
}
.player-card .card-body form .autocomplete {
  position: relative; /* needed so the dropdown positions under this box */
  display: flex; /* forces input + button on same line */
  flex-direction: row;
  align-items: center;
  gap: 0px; /* optional spacing between input and button */
  width: 200px;
}
.player-card .card-body form .autocomplete-items {
  margin-left: 5px;
  position: absolute;
  top: 100%; /* anchors directly under the input box */
  left: 0;
  right: 0;
  z-index: 9999;
  background: #ddd1b1;
  border: 1px solid #ddd;
  border-top: none;
}
.player-card .card-body .btn-addaffects {
  width: 28px;
  text-align: center;
  color: #0b0b0b;
}
.player-card .card-body .btn-addaffects:hover {
  text-decoration: none;
}
.player-card .card-body textarea {
  margin-top: 0;
}
.player-card .card-body .affects-table {
  font-size: 14px;
  font-weight: bold;
  color: #0b0b0b;
  border-radius: 0 0 0 0;
  margin-left: -11px;
  margin: 0 auto;
  width: 100%;
}
.player-card .card-body .affects-table th, .player-card .card-body .affects-table tr, .player-card .card-body .affects-table td {
  padding: 5px 10px;
  text-align: left;
}
.player-card .card-body .affects-table tbody tr, .player-card .card-body .affects-table tbody td {
  border-bottom: 1px solid #ddd1b1;
}
.player-card .card-body .affects-table .affect-time, .player-card .card-body .affects-table .delete-condition {
  text-align: center;
}
.player-card .card-body .affects-table .add-affect::before, .player-card .card-body .affects-table .dropdown-toggle::after {
  color: rgba(115, 158, 63, 0.8470588235);
}
.player-card .card-body .affects-table i {
  color: #FF3D00;
}

.bg-modal, .ac-modal, .temp-modal {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  display: block;
  justify-content: center;
  align-items: center;
  display: none;
}
.bg-modal .modal-content, .ac-modal .modal-content, .temp-modal .modal-content {
  width: 100%;
  border-radius: 4px;
  text-align: center;
  margin: 10% auto;
  position: relative;
}
@media (min-width: 768px) {
  .bg-modal .modal-content, .ac-modal .modal-content, .temp-modal .modal-content {
    width: 300px;
  }
}
.bg-modal .modal-content h2, .ac-modal .modal-content h2, .temp-modal .modal-content h2 {
  background-color: #0b0b0b;
  color: #fff;
}
.bg-modal form, .ac-modal form, .temp-modal form {
  margin-top: 50px;
  margin: 0 auto;
  display: flex;
}
.bg-modal form input, .ac-modal form input, .temp-modal form input {
  margin-top: 15px;
  width: 100px;
  height: 80px;
  border: 2px solid #FB2F04;
  font-size: 48px;
  background-color: #ddd1b1;
}
.bg-modal form #ac-points, .ac-modal form #ac-points, .temp-modal form #ac-points {
  margin-top: 0px;
  margin-bottom: 10px;
}
.bg-modal form .action-buttons, .ac-modal form .action-buttons, .temp-modal form .action-buttons {
  width: 105px;
}
.bg-modal form .action-buttons button, .ac-modal form .action-buttons button, .temp-modal form .action-buttons button {
  color: #fff;
  width: 110px;
  height: 40px;
  margin-left: 10px;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 4px;
  border: 2px solid #0b0b0b;
  transition: all 235ms ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -18px;
}
.bg-modal form #btn-tempHP, .bg-modal form #btn-healing, .bg-modal form #btn-ac-change, .ac-modal form #btn-tempHP, .ac-modal form #btn-healing, .ac-modal form #btn-ac-change, .temp-modal form #btn-tempHP, .temp-modal form #btn-healing, .temp-modal form #btn-ac-change {
  background: linear-gradient(180deg, rgba(115, 158, 63, 0.8470588235) 20%, #226600 100%);
}
.bg-modal form #btn-damage, .ac-modal form #btn-damage, .temp-modal form #btn-damage {
  background: linear-gradient(0deg, #a10b0b 0%, #ff9a00 100%);
}
.bg-modal form #btn-ac-change, .ac-modal form #btn-ac-change, .temp-modal form #btn-ac-change {
  margin-top: 21px;
}
.bg-modal .close, .ac-modal .close, .temp-modal .close {
  margin-top: -7px;
  position: absolute;
  top: 0;
  right: 14px;
  font-size: 42px;
  cursor: pointer;
  color: white !important;
}

:root {
  font-family: "Lato", sans-serif !important;
  color: #fff;
  background-color: #0b0b0b;
}

.container {
  max-width: 1200px;
  margin: auto;
  margin-bottom: 3rem;
}

.inner-container {
  margin: 0 2rem;
}

.welcome-links {
  margin: auto;
  margin-top: 2rem;
  background: #fdfdfd;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  padding: 1.5rem;
  width: 400px;
  background-color: #33363c;
  border-radius: 3px;
}
.welcome-links h1 {
  margin: auto;
  text-align: center;
  padding-bottom: 1rem;
  color: #fff;
}
.welcome-links div {
  text-align: center;
  width: 100%;
  padding: 15px;
  margin: auto;
  margin: 0 0 15px;
  margin-bottom: 15px;
  box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.5);
  outline: 0;
  border: 0;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 3px;
}
.welcome-links div a {
  text-decoration: none;
  outline: 0;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3 ease;
  cursor: pointer;
}
.welcome-links p {
  text-align: center;
  margin: 15px 0 0;
  color: #9C9C9C;
  font-size: 12px !important;
}
.welcome-links p a {
  color: #808080;
  text-decoration: none;
}
.welcome-links p a:hover {
  color: #fff;
}

.register-link {
  background-color: #99001A;
}

.register-link:hover {
  background: #fa0707;
}

.login-link {
  background-color: #226600;
}

.login-link:hover, .login-container button:hover {
  background: rgba(115, 158, 63, 0.8470588235);
}

.change-password-link {
  border-radius: 0;
  width: 150px !important;
  font-weight: bold;
  padding: 10px !important;
  color: #0b0b0b !important;
  border: none;
  background: linear-gradient(0deg, rgb(167, 98, 3) 0%, rgb(247, 199, 102));
}

.change-password-link:hover {
  background: linear-gradient(0deg, rgb(247, 199, 102) 0%, rgb(167, 98, 3)) !important;
}

.login-container, .register-container, .character-container {
  position: relative;
  z-index: 1;
  background: #33363c;
  max-width: 360px;
  margin: 0 auto 100px;
  margin-top: 2rem;
  padding: 35px;
  padding-top: 1rem;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 3px;
}
.login-container button, .register-container button, .character-container button {
  outline: 0;
  width: 100%;
  border: 0;
  border-radius: 3px;
  padding: 15px;
  color: #fdfdfd;
  font-size: 18px;
  transition: all 0.3 ease;
  cursor: pointer;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.login-container h1, .register-container h1, .character-container h1 {
  color: #fff;
}
.login-container div input, .register-container div input, .character-container div input {
  outline: 0;
  width: 100%;
  height: 45px;
  border: 0;
  margin: 0 0 15px;
  padding: 7px;
  box-sizing: border-box;
  font-size: 14px;
  border: 2px solid #000000;
  background-color: #3e4044;
  color: #fff;
}
.login-container p, .register-container p, .character-container p {
  margin: 15px 0 0;
  color: #9C9C9C;
  font-size: 12px !important;
}
.login-container p a, .register-container p a, .character-container p a {
  color: #808080;
  text-decoration: none;
}
.login-container a, .register-container a, .character-container a {
  text-decoration: none;
  font-weight: bold;
}
.login-container .cp-field, .register-container .cp-field, .character-container .cp-field {
  text-align: left;
}
.login-container .cp-title, .register-container .cp-title, .character-container .cp-title {
  font-size: 14px;
}
.login-container .cp-label, .register-container .cp-label, .character-container .cp-label {
  font-size: 16px;
  font-weight: bold;
  text-align: left !important;
}

.restister-container button {
  background-color: #99001A !important;
}
.restister-container button:hover {
  background-color: #fa0707 !important;
}

.character-container button {
  background-color: #4D88FF;
  border: 1px solid #001580;
  margin-bottom: 20px;
}
.character-container button:hover {
  background-color: #001580;
}
.character-container a {
  color: #4D88FF;
}

.messages {
  color: #FB2F04;
  margin-bottom: 10px;
}

.dashboard {
  background-image: url("/images/waiting4dnd_cropped.png");
  min-height: 800px;
  background-size: cover;
  margin-left: 1rem;
}
.dashboard .char-top {
  display: flex;
  color: white;
}
.dashboard .char-top h1 {
  margin: auto;
  text-align: center;
  color: white;
}
.dashboard .char-top p {
  text-align: left;
  color: #fff;
  font-size: 14px !important;
  font-weight: bold;
  max-width: 200px;
}
.dashboard .char-top p a {
  color: #99001A;
  text-decoration: none;
}
.dashboard .char-top p a:hover {
  color: #fff;
}

.logout-btn {
  margin-top: 5px;
  background: none;
  color: #a10b0b;
  font-weight: bold;
  font-size: 16px;
  border: none;
}

.logout-btn:hover {
  color: #fff;
}

h2 {
  margin-top: 10px;
  margin-bottom: 10px;
  color: white;
}

.dash-links {
  display: flex;
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
  color: white;
  margin-top: 20px;
}
.dash-links ul {
  margin: 0;
}
.dash-links ul li {
  list-style-type: none;
  color: red;
}
.dash-links ul li a {
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  color: red;
}
.dash-links ul li a:hover {
  color: white;
}

.character-dash {
  display: flex;
  max-width: 1200;
  margin: auto !important;
  margin-bottom: 3rem;
  justify-content: center;
}
.character-dash .character-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-left: 1rem;
}

.char-dash-container, .party-container {
  position: relative;
  z-index: 1;
  background: #33363c;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
  border: 1px solid #090909;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.char-dash-container table, .party-container table {
  margin: 0 auto;
  border: 2px solid black;
  margin-bottom: 10px;
  margin-left: 1rem;
  margin-right: 1rem;
}
.char-dash-container table thead, .party-container table thead {
  background-color: black;
  color: white;
  padding: 5px;
}
.char-dash-container table thead tr td, .party-container table thead tr td {
  text-align: center;
  font-weight: bold;
}
.char-dash-container table tbody, .party-container table tbody {
  text-align: left;
  color: #fff;
}
.char-dash-container table tbody tr td, .party-container table tbody tr td {
  padding: 7px;
  font-size: 18px;
}
.char-dash-container table tbody tr td a, .party-container table tbody tr td a {
  color: white;
  font-size: 8px;
  font-weight: bold;
  vertical-align: auto;
  border: 1px solid black;
}
.char-dash-container table tbody tr:hover, .party-container table tbody tr:hover {
  background-color: #A3A3A3 !important;
}
.char-dash-container .char-heading, .party-container .char-heading {
  width: 100%;
  margin-top: 0px !important;
  color: white;
  background-color: #33363c;
  border-bottom: 2px solid black;
  padding-top: 5px;
  padding-bottom: 5px;
}

.char-dash-links {
  margin: auto;
  margin-bottom: 1rem;
}
.char-dash-links a {
  text-decoration: none;
  background-color: black;
  color: white;
  border: 2px solid white;
  border-radius: 5px;
  padding: 7px;
  border-radius: 3px;
  font-size: 18px;
  font-weight: bold;
  height: 40px;
}
.char-dash-links a:hover {
  color: #4D88FF;
  border: 2px solid #4D88FF;
}

header {
  width: 100%;
}
header nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: #0b0b0b;
  font-weight: bold;
  font-family: "Lato", sans-serif !important;
  text-align: center;
}
header span {
  color: #fff;
  font-size: 40px;
}
header a {
  color: #FB2F04;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  padding: 10px;
}
header a:hover {
  text-decoration: none;
  color: #FB2F04;
}
header ul {
  display: flex;
  margin: 0;
  padding: 0;
}
header ul li {
  list-style: none;
}
header ul li a {
  text-decoration: none !important;
  color: #FB2F04;
  font-weight: bold;
  padding: 1rem;
}
header ul li a:hover {
  color: #fdfdfd;
}
header ul form button {
  background-color: black;
  color: red;
}

.round-title {
  text-decoration: none;
}

.round-title:hover {
  text-decoration: none;
}

body {
  margin: auto;
  background: #0b0b0b !important;
  height: 100vh;
}

.death-container {
  margin: 0;
  padding: 1rem;
}
.death-container .board-container {
  color: #fff;
  justify-content: space-between;
  display: flex;
}

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

.init-table {
  padding: 0.5rem;
}
.init-table thead tr th {
  text-align: left;
  min-width: 20px;
  color: #fff;
}
.init-table thead tr th a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}
.init-table tbody tr td {
  text-align: left;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 5px;
}
.init-table tbody tr td a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}

.init-col {
  margin-right: 25px;
  font-weight: bold;
}

.init-table {
  background-color: #33363c;
  margin-right: 20px;
}

.name-div {
  font-size: 40px;
  width: 150px;
}

.int-div {
  width: 40px;
  text-align: left;
  font-weight: bold;
}

.icon-div {
  width: 15px;
}

.head {
  font-size: 28px;
  font-weight: bold;
  text-align: center !important;
  margin: auto;
}

.new-hp-view {
  display: flex;
  justify-content: space-between;
  font-size: 38px;
  font-weight: bold;
  margin: auto !important;
  border: 1px solid #fff;
}
.new-hp-view p {
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin: 0 auto;
}
.new-hp-view button {
  background-color: #226600;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}
.new-hp-view button:hover {
  background-color: rgba(115, 158, 63, 0.8470588235);
}

.affects-head {
  display: flex;
}

.affects-dropdown-menu {
  height: 100px;
  overflow: auto;
  border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0 0 20px rgb(0, 0, 0);
  background-color: #0b0b0b;
  color: #fff;
  display: none;
}

.new-player-card {
  background-color: #0b0b0b;
  border: 2px solid #fff;
  border-radius: 3px;
  padding: 10px;
  margin-bottom: 2rem;
  margin: auto;
}
.new-player-card .player-card-body {
  background-color: #33363c;
  padding: 1rem;
}
.new-player-card .player-card-body .close-card {
  margin-top: 0;
  padding-left: 5px;
}
.new-player-card p {
  color: #fff !important;
}
.new-player-card a {
  text-decoration: none;
  color: #fff;
}

.new-temp-view {
  font-weight: bold;
  color: green;
  background-color: #33363c;
  border: 1px solid #fff;
  display: flex;
  justify-content: space-between;
}
.new-temp-view label {
  background-color: #226600;
  color: white;
  height: 30px;
  width: 65%;
  font-size: 20px;
  padding-top: 5px;
  padding-left: 10px;
}
.new-temp-view span {
  font-size: 22px !important;
  font-weight: bold;
  color: 128 !important;
  margin-right: 2rem;
  margin-top: 5px;
}

.conditions-buffs p {
  margin-top: 5px;
  margin-bottom: 10px;
}
.conditions-buffs .affects-table {
  font-size: 14px;
  font-weight: bold;
  background-color: #0b0b0b;
  color: #fff;
  border-radius: 0 0 0 0;
  margin: 0 auto;
  width: 100%;
}
.conditions-buffs .affects-table tr th {
  text-align: left;
  padding: 5px;
}
.conditions-buffs .affects-table tr td {
  border-bottom: 1px solid #c7c7c7;
  padding: 5px 10px;
  text-align: left;
}

.party-container {
  margin-left: 1rem;
  margin-right: 1rem;
  background: #33363c;
  color: #fff;
  width: 400px;
}

.party-inputs {
  justify-content: space-between;
  margin: 10px;
}
.party-inputs input {
  padding: 5px;
  width: 250px;
}
.party-inputs span {
  font-size: 12px;
  padding-top: 3px;
}

.run-game {
  display: flex;
  margin-top: 0.5rem;
  border: none;
}
.run-game input {
  margin-left: 20px;
  width: 16px;
}

.account-container {
  position: relative;
  z-index: 1;
  background: #33363c;
  max-width: 360px;
  margin: 0 auto 100px;
  margin-top: 1rem;
  padding: 45px;
  padding-top: 1rem;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius: 3px;
}
.account-container h1 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.account-container h3 {
  margin-top: 5px;
}
.account-container div {
  text-align: left;
}
.account-container div input {
  outline: 0;
  width: 100%;
  height: 45px;
  border: 0;
  margin: 0 0 15px;
  padding: 7px;
  box-sizing: border-box;
  font-size: 14px;
  border: 2px solid #000000;
  background-color: #3e4044;
  color: #fff;
}
.user-update-link {
  padding: 0.3rem 1rem;
  color: #0b0b0b !important;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  border: 2px solid black !important;
  margin-top: 5px;
  transition: all 235ms ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.2) 15px 28px 25px -18px;
  background: linear-gradient(0deg, rgb(167, 98, 3) 0%, rgb(247, 199, 102));
}

.user-update-link:hover {
  background: linear-gradient(0deg, rgb(247, 199, 102) 0%, rgb(167, 98, 3));
}

.my-acct-header {
  background-color: rgb(167, 98, 3);
  color: rgb(247, 199, 102);
}

.acct-field {
  text-align: left;
  color: rgb(167, 98, 3);
  margin-bottom: 0.5rem;
}
.acct-field span {
  font-size: 14px;
}

.db-avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid #0b0b0b;
  overflow: hidden;
  margin: auto;
  background: linear-gradient(0deg, #ddd1b1 0%, rgb(247, 199, 102));
}
.db-avatar img {
  width: 100%;
}

.room-view {
  display: block;
  background-color: #ddd1b1;
  color: rgb(167, 98, 3);
  font-size: 16px;
  padding: 5px 0px 0px 10px;
  position: absolute;
  left: 0px;
  top: 80px;
  overflow: hidden;
  border-radius: 4px;
  border-left: 8px solid rgb(167, 98, 3);
  animation: slide-in 1s forwards;
}
.room-view .room-header {
  margin-left: -5px;
  margin-right: 40px;
}
.room-view .room-header i {
  margin-right: 10px;
}
.room-view .room-users {
  color: rgb(167, 98, 3);
  font-weight: 500;
}
.room-view .close-room-button {
  position: fixed;
  right: 0px;
  top: 15%;
  transform: translateY(-50%);
  background: #ffa502;
  padding: 5px 10px;
  cursor: pointer;
}
.room-view .close-room-button .fa-times {
  color: rgb(167, 98, 3);
  font-size: 18px;
  line-height: 20px;
}
.room-view .close-room-button:hover {
  background: #ce8500;
}

.view-control span {
  margin-left: -2px;
}

.open-room-button, .party-view, .all-view {
  border-radius: 3px;
  padding: 5px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  color: rgb(167, 98, 3);
  background: #ffa502;
  max-width: 25px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
}
.open-room-button .fa-times, .party-view .fa-times, .all-view .fa-times {
  color: rgb(167, 98, 3);
  font-size: 18px;
  line-height: 20px;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes slide-in {
  0% {
    transform: skewX(0deg) translateX(-500px);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes slide-out {
  0% {
    transform: skew(0deg);
  }
  100% {
    transform: skewX(0deg) translateX(-500px);
  }
}
.connected-players {
  list-style-type: none;
  padding: 5px 10px 0px 0px;
}
.connected-players i {
  font-size: 15px;
  margin-right: 10px;
}

.room-alert {
  background: #ddd1b1;
  padding: 15px 40px;
  position: absolute;
  left: 0px;
  top: 10px;
  overflow: hidden;
  border-radius: 4px;
  border-left: 8px solid rgb(167, 98, 3);
}
.room-alert .fa-exclamation-circle {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #ce8500;
  font-size: 30px;
}
.room-alert .alert-msg {
  padding: 0 20px;
  font-size: 16px;
  color: rgb(167, 98, 3);
}
.room-alert .close-alert-button {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  background: #ffa502;
  padding: 20px 18px;
  cursor: pointer;
}
.room-alert .close-alert-button .fa-times {
  color: rgb(167, 98, 3);
  font-size: 22px;
  line-height: 40px;
}
.room-alert .close-alert-button:hover {
  background: #ce8500;
}

.show-room {
  animation: slide-right 1s ease forwards;
}

.hide {
  display: none;
}

.hide-room {
  animation: slide-left 1s ease forwards;
}

@keyframes slide-right {
  0% {
    transform: skewX(0deg) translateX(-500px);
  }
  100% {
    transform: skew(0deg);
  }
}
@keyframes slide-left {
  0% {
    transform: skew(0deg);
  }
  100% {
    transform: skewX(0deg) translateX(-500px);
  }
}
footer {
  width: 100%;
}
footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #0b0b0b;
  color: #fff;
  font-weight: 500;
  font-size: 12px;
  justify-content: space-evenly;
  align-items: center;
  gap: 0.2rem;
  max-height: 30px;
  padding: 5px;
}
footer .footer-nav .contact-link {
  margin-bottom: 10px;
}
footer .footer-nav span {
  color: #fff;
}
footer .footer-nav i {
  color: #fff;
}
footer .footer-nav a {
  text-decoration: none;
  color: #ddd1b1;
}

.video-stream {
  display: none;
  grid-template-columns: repeat(auto-fill, 300px);
  grid-auto-rows: 300px;
}

video {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}/*# sourceMappingURL=index.css.map */