/* Large Monitor */
@media only screen and (min-width: 1200px) and (max-width: 1499px) {
  .ui.container {
    width: 1127px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ui.grid.container {
    width: calc( 1127px  +  2rem ) !important;
  }

  .ui.relaxed.grid.container {
    width: calc( 1127px  +  3rem ) !important;
  }

  .ui.very.relaxed.grid.container {
    width: calc( 1127px  +  5rem ) !important;
  }
}
/* Even larger Monitor */
@media only screen and (min-width: 1500px) {
  .ui.container {
    width: 1427px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .ui.grid.container {
    width: calc( 1427px  +  2rem ) !important;
  }

  .ui.relaxed.grid.container {
    width: calc( 1427px  +  3rem ) !important;
  }

  .ui.very.relaxed.grid.container {
    width: calc( 1427px  +  5rem ) !important;
  }
}

/* Overrides for Semantic UI 2.2.10 - Icon */
i.icon {
  margin: inherit;
}

/* Overrides for Semantic UI 2.2.10 - Button */
.ui[class*="very compact"].buttons .button,
.ui[class*="very compact"].button {
  padding: 0.58928571em 0.58928571em 0.58928571em;
}

.ui[class*="very compact"].table th {
  padding: 0.2em 0.3em;
}

.ui[class*="very compact"].table td {
  padding: 0.2em 0.3em;
}

[data-tooltip]:before {
  z-index: 1102;
}
[data-tooltip]:after {
  z-index: 1101;
}

[data-position="right center"][data-tooltip][data-variation="mini"]:before {
  margin-top: calc(-0.07142857rem * .75);
  margin-left: calc(0.14285714rem * .75);
}
[data-tooltip][data-variation="mini"]:before {
  width: calc(0.71428571em * .75);
  height: calc(0.71428571em * .75);
}
[data-tooltip][data-variation="mini"]:after {
  font-size: .78571429rem;
  line-height: calc(1.4285em * .75);
  padding: calc(0.833em * .75) calc(1em * .75);
}

.ui.labeled.icon.buttons > .button .icon i.flag:before,
.ui.labeled.icon.button .icon i.flag:before {
  margin-top: 35%;
  margin-left: 25%;
}


/*
 * Prevent transitions for select components.
 * This leads to performance hits when a lot of data is displayed.
 */

.ui.checkbox label,
.ui.checkbox + label {
  -webkit-transition: none !important;
  transition: none !important;
}

.ui.table th,
.ui.table td {
  -webkit-transition: none !important;
  transition: none !important;
}
/*
 * For inverted segments, make sure they don't move around...
 */
.ui.inverted.segment {
  padding: calc(1em + 1px);
}


/*!
 * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.eot");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-brands-400.svg#fontawesome") format("svg");
}

i.icon.discord:before {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400;
  content: "\f392";
}

/*!
 * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.eot");
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.ttf") format("truetype"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}

i.icon.fish:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f578";
}
i.icon.cloud.sun.rain:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f743";
}


/* Overrides for Menu */
.ui.fixed.menu,
.ui.fixed.text.menu {
  background: #FFFFFF;
}
.ui.inverted.fixed.menu,
.ui.inverted.fixed.text.menu {
  background: #1B1C1D;
}

.ui.menu .ui.borderless.menu {
  border: 0px solid transparent;
  box-shadow: none;
}

.ui.menu [data-tooltip]:before {
  width: 0.71428571em;
  height: 0.71428571em;
}

.ui.menu .item[data-position~="top"][data-tooltip]:before {
  background: #FFFFFF;
}

.ui.menu .item[data-position="top right"][data-tooltip]:before {
  top: auto;
  right: 1em;
}

.ui.inverted.menu .item[data-inverted][data-position~="top"][data-tooltip]:before {
  background: #1B1C1D;
}

.ui.inverted.link.menu .item.disabled,
.ui.inverted.link.menu .item.disabled:hover {
  color: rgba(225, 225, 225, 0.3);
}

.ui.menu .item.hidden {
  display: none;
}

.ui.inverted.menu .ui.dropdown .menu {
  border: 0px solid transparent;
  background: #1B1C1D;
  box-shadow: none;
}

.ui.inverted.menu .ui.dropdown .menu > .item,
.ui.inverted.menu .ui.dropdown .menu > .item > a:not(.ui) {
  background: transparent;
  color: rgba(255, 255, 255, 0.9) !important;
}

.ui.inverted.menu .ui.dropdown .menu .item:before {
  background: rgba(255, 255, 255, 0.08) !important;
}

.ui.inverted.menu .ui.dropdown .menu > .item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.ui.inverted.menu .ui.dropdown .menu > .active.item {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Flushed Size Modal */

.ui.flushed.modal {
  width: auto;
  max-width: 95%; /* don't exceed 95% of the width though... */
  margin-left: unset;
  transform: translateX(-50%);
}

.ui.flushed.modal > .header:not(.ui) {
  font-size: 1.3em;
}

.modals.dimmer .ui.flushed.scrolling.modal {
  /* No really, I want it in the f'n center! */
  position: fixed !important;
  top: unset !important;
  margin-left: unset !important;
}

/* Due to the use of the transform style, we need to override any animations used... */
.ui.flushed.modal.scale.transition.in {
  -webkit-animation-name: scaleInFlushedModal;
  animation-name: scaleInFlushedModal;
}

.ui.flushed.modal.scale.transition.out {
  -webkit-animation-name: scaleOutFlushedModal;
  animation-name: scaleOutFlushedModal;
}

@-webkit-keyframes scaleInFlushedModal {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(0.8);
    transform: translateX(-50%) scale(0.8);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
}

@keyframes scaleInFlushedModal {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(0.8);
    transform: translateX(-50%) scale(0.8);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }
}

/* Out */

@-webkit-keyframes scaleOutFlushedModal {
  0% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(0.9);
    transform: translateX(-50%) scale(0.9);
  }
}

@keyframes scaleOutFlushedModal {
  0% {
    opacity: 1;
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-50%) scale(0.9);
    transform: translateX(-50%) scale(0.9);
  }
}