.body {
  min-height: 100vh;
}

/* Tooltips */
/* .tooltip-top {
    position: relative;
    display: inline-block;
}

.tooltip-top .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--black);
    color: var(--text);
    text-align: center;
    border-radius: var(--rounded-corners);
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 103%;
    left: 50%;
    margin-left: -60px;
}
  
.tooltip-top .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--black) transparent transparent transparent;
}

.tooltip-top:hover .tooltiptext {
    visibility: visible;
} */

.spacer-m {
    width: 100%;
    height: 100px;
}

.spacer-s {
    width: 100%;
    height: 80px;
}

.table-icon {
  max-width: 30px;
  padding-right: 5px;
}

.w-dropdown {
  z-index: 0;
}

.profile-form-input {
  color: var(--gray);
}

.profile-form-input.long {
  width: 500px;
}

.form-dropdown {
  width: 250px;
}

.form-number-picker {
  width: 80px;
}

.w-input:-moz-placeholder,
.w-select:-moz-placeholder {
  color: var(--gray);
}
.w-input::-moz-placeholder,
.w-select::-moz-placeholder {
  color: var(--gray);
  opacity: 1;
}
.w-input::-webkit-input-placeholder,
.w-select::-webkit-input-placeholder {
  color: var(--gray);
}

.w-input[disabled]:not(.w-input-disabled),
.w-select[disabled]:not(.w-input-disabled),
.w-input[readonly],
.w-select[readonly],
fieldset[disabled]:not(.w-input-disabled) .w-input,
fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: var(--black);
}

.game-nomination-images {
  width: 200px;
  margin-top: 10px;
  margin-bottom: 10px;
}

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

.flex-horizontal {
  display: flex;
  flex-direction: row;
}

.flex-horizontal.center {
  justify-content: center;
  align-items: center;
}

.fw-400 {
  font-weight: 400;
}

.flex-horizontal.space-between {
  justify-content: space-between;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center.vertical {
  flex-direction: column;
}

.flex-center.horizontal {
  flex-direction: row;
}

.guild-game-image {
  width: 200px;
}

.form-tournament-options {
  display: flex;
  flex-direction: column;
}

.modal-container.show {
  pointer-events: auto;
  display: flex;
}

.box-shadow {
  box-shadow: 8px 8px 14px 0 var(--black-4);
  border-radius: var(--rounded-corners);
}

.mp-0 {
  margin: 0px;
  padding: 0px;
}

.me-5 {
  margin-right: 5px;
}

.ms-10 {
  margin-left: 10px;
}

.my-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.my-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-40 {
  margin-bottom: 40px;
}

table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
  border: none;
}

th,
td {
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 5px;
  padding-bottom: 3px;
  text-align: left;
  border: none;
}

th {
  font-weight: 500;
  background-color: var(--table-heading);
}

tr {
  font-weight: 300;
}

#myMatches tbody th {
    text-align: center;
}

#myMatches tbody td {
    text-align: center;
}

#adminResults tbody th {
  text-align: center;
}

#adminResults tbody td {
  text-align: center;
}

tr:hover td {
  background-color: var(--dark-gray);
}

tr:nth-child(odd) {
  background-color: var(--table-row-primary);
}

tr:nth-child(even) {
  background-color: var(--table-row-secondary);
}

.navbar-active-guild-border {
  height: 50px;
  max-width: 350px;
  min-width: 100px;
  background-image: url("../assets/icons/active-guild-border-right.svg"),
    url("../assets/icons/active-guild-border-left.svg");
  background-position: 100% 0, 0 100%;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, contain;
  margin: 5px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
}

.section-hero {
  background-image: linear-gradient(to bottom, var(--black-4), var(--black-4)),
    url("../assets/images/background-1.jpg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.section-account {
  background-image: url("../assets/images/background-2.jpg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.checkbox.w--redirected-checked {
  width: 16px;
  height: 16px;
  border-color: var(--gray);
  background-color: var(--black);
  background-image: url("../assets/icons/checkmark-green.svg");
  margin-top: 0;
  margin-right: 5px;
}

.clickable tr:hover {
  cursor: pointer;
  background-color: #e6f1e3;
  border-color: #cbe6c4;
}

.clickable-remove:hover {
  cursor: pointer;
  background-color: #840f21;
  border-color: #cbe6c4;
}

.clickable-add:hover {
  cursor: pointer;
  background-color: #e6f1e3;
  border-color: #cbe6c4;
}

.clickable:hover {
  cursor: pointer;
}

.copy-icon {
    cursor: pointer;
    margin-left: 5px;
    color: #007BFF;
}

.copy-icon:hover {
    color: #0056b3;
}

@media screen and (max-width: 991px) {
    .spacer-m {
        width: 100%;
        height: 80px;
    }
    
    .spacer-s {
        width: 100%;
        height: 60px;
    }
}

@media screen and (max-width: 767px) {
    .spacer-m {
        width: 100%;
        height: 60px;
    }
    
    .spacer-s {
        width: 100%;
        height: 40px;
    }

    .flex-horizontal {
        flex-direction: column;
    }

    .hide-mobile {
        display: none;
    }

    .profile-form-input.long {
        width: 100%;
    }
}

@media screen and (max-width: 479px) {
    .spacer-m {
        width: 100%;
        height: 40px;
    }
    
    .spacer-s {
        width: 100%;
        height: 20px;
    }

    .game-nomination-images {
        width: 100%;
    }

    .form-dropdown {
        width: 100%;
    }
}

@keyframes blink-fancy {
    0%, 25%, 28.33%, 45%, 48.33%, 51.67%, 93.33%, 96.67% {
        transform: scaleY(1);
    }

    26.67%, 46.67%, 50%, 95% {
        transform: scaleY(0.1);
    }
}

@keyframes flame-flicker-1 {
    25% {
        transform: scale3d(1,1.1,1);
    }

    40% {
        transform: scale3d(1,0.8,1);
    }

    50% {
        transform: scale3d(1,1.05,1);
    }

    65% {
        transform: scale3d(1,0.75,1);
    }

    75% {
        transform: scale3d(1,1,1);
    }

    90% {
        transform: scale3d(1,1.15,1);
    }

    100 {
        transform: scale3d(1,1,1);
    }
}

@keyframes flame-flicker-2 {
    15% {
        transform: scale3d(0.9,0.8,1);
    }

    33% {
        transform: scale3d(1.2, 0.5,1);
    }

    47% {
        transform: scale3d(0.7, 0.7,1);
    }

    63% {
        transform: scale3d(0.72, 1.1,1);
    }

    70% {
        transform: scale3d(0.65, 1,1);
    }

    77% {
        transform: scale3d(1, 0.8,1);
    }

    85% {
        transform: scale3d(0.7, 0.95,1)
    }

    100% {
        transform: scale3d(1,1,1);
    }
}

@keyframes flame-ember {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(10px, -25px) rotate(-45deg);
    }

    50% {
        transform: translate(0, -50px) rotate(0);
    }

    75% {
        transform: translate(-10px, -75px) rotate(45deg);
    }

    100% {
        transform: translate(0, -100px) rotate(0);
    }
}

@keyframes flame-ember-alt {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(-15px, -25px) rotate(45deg);
    }

    50% {
        transform: translate(0, -50px) rotate(0);
    }

    75% {
        transform: translate(10px, -75px) rotate(-45deg);
    }

    100% {
        transform: translate(0, -100px) rotate(0);
    }
}

@keyframes flame-ember-opacity {
    45% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes scale-pulse {
    0% {
        transform: scale(0.8,0.8);
    }

    50% {
        transform: scale(1.1, 1.1);
    }

    100% {
        transform: scale(0.8,0.8);
    }
}

@keyframes opacity-pulse {
    0% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0.2;
    }
}

.flame-front {
    transform-origin: center bottom;
    animation: flame-flicker-1 1s ease-in-out infinite;
}

.flame-inner {
    transform-origin: center bottom;
    animation: flame-flicker-2 .8s ease-in-out infinite;
}

#flame-inner-right {
    animation-duration: 1s;
    animation-delay: -1s;
}

#flame-back {
    animation-direction: reverse;
    animation-delay: 0.5s;
    animation-duration: 1.6s;
}

#flame-front-right {
    animation-duration: 1.3s;
    animation-delay: 0.2s
}

.emitted-ember {
    transform-origin: center center;
    -moz-transform-origin: 485.125px 51.33px;
    animation: flame-ember 2s linear infinite, flame-ember-opacity 2s ease-out infinite;
}

.emitted-ember-alt {
    animation: flame-ember-alt 1.7s linear infinite, flame-ember-opacity 1.7s ease-out infinite;
}

.smoke {
    transform-origin: center center;
    animation: scale-pulse .7s ease-in-out infinite;
}

#smoke-float-1 {
    animation-delay: 0.4s;
}

#smoke-float-2 {
    animation-delay: 0.2s;
}

#smoke-float-3 {
    animation-delay: 0s;
}

#smoke-float-4 {
    animation-delay: -0.2s;
}

#smoke-float-5 {
    animation-delay: -0.4s;
}

.glow {
    transform-origin: center center;
    -moz-transform-origin: 378.729px 109.75px;
    animation: opacity-pulse 4s ease-in-out infinite 0.1s, scale-pulse 4s ease-in-out alternate infinite;
}

#glow-outer-1 {
    animation-delay: -0.1s;
}

#glow-inner {
    animation-delay: -0.3s;
}

#eyes-left, #eyes-right {
    animation: blink-fancy 6s linear infinite;
}

.bill-highlight {
    animation: opacity-pulse 4s ease-in-out infinite;
}