/* TEMPORATY, ERASE DELETE LATER START */
.temporaty {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  margin: 1rem;
}

/* HIGHLIGHT SECTION DEBUG START */
.d-1 {
  background-color: rgba(255, 0, 0, 0.1);
}

.d-2 {
  background-color: rgba(0, 255, 0, 0.1);
}

.d-3 {
  background-color: rgba(0, 0, 255, 0.1);
}

/* HIGHLIGHT SECTION DEBUG START END */
/* TEMPORATY, ERASE DELETE LATER END */

/* Error START */
.error {
  color: red;
  margin: 1rem;
  text-align: center;
  border: 1px solid red;
  border-radius: 5px;
}

/* Error END */

/* Variables START */
:root {
  --color-primary: #FCFAEE;
  --color-secondary: #212121;
  --color-tertiary: #6c757d;
  --color-quartary: #ffdd00;
  --color-quinary: #FD1515;
  --color-senary: #28a745;
  --color-septenary: #15FD15;
  --color-octonary: #007bff;
  --color-nonary: #aa00ff;
  --color-discord: #7289da;
  --color-youtube: #ff0000;
  --color-website-icon: #02ffff;
  --color-inner-container: rgba(0, 0, 0, 0.7);
  --image-outer-container: url('./assets/bg.jpg');
  --font-family: Calibri;
  --font-size: 18px;
  --line-height: 1.1;
  --letter-spacing: 0.05rem;
  --max-width-wrap: 1440px;
  --scale-up-extra-small: 1.025;
  --scale-up-small: 1.05;
}

/* Variables END */

/* Clear & set all START */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--color-primary);
  text-align: center;
}

/* Clear & set all END */

/* Colors START*/
.color-primary {
  color: var(--color-primary);
}

.bg-color-primary {
  background-color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

.bg-color-secondary {
  background-color: var(--color-secondary);
}

.color-tertiary {
  color: var(--color-tertiary);
}

.bg-color-tertiary {
  background-color: var(--color-tertiary);
}

.color-quartary {
  color: var(--color-quartary);
}

.bg-color-quartary {
  background-color: var(--color-quartary);
}

.color-quinary {
  color: var(--color-quinary);
}

.bg-color-quinary {
  background-color: var(--color-quinary);
}

.color-senary {
  color: var(--color-senary);
}

.bg-color-senary {
  background-color: var(--color-senary);
}

.color-septenary {
  color: var(--color-septenary);
}

.bg-color-septenary {
  background-color: var(--color-septenary);
}

.color-octonary {
  color: var(--color-octonary);
}

.bg-color-octonary {
  background-color: var(--color-octonary);
}

.color-nonary {
  color: var(--color-nonary);
}

.bg-color-nonary {
  background-color: var(--color-nonary);
}

/* Colors END */

/* Font size START */
.font-size-smallest {
  font-size: 0.75rem;
}

.font-size-extra-small {
  font-size: 0.875rem;
}

.font-size-small {
  font-size: 1rem;
}

.font-size-medium {
  font-size: 1.5rem;
}

.font-size-medium-larger {
  font-size: 1.75rem;
}

.font-size-large {
  font-size: 2rem;
}

.font-size-extra-large {
  font-size: 2.5rem;
}

.font-size-largest {
  font-size: 3rem;
}

/* Font size END */

/* Font Weight START */
.font-weight-bold {
  font-weight: 700;
}

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

/* Font Weight END */

/* Text START */
.text-align-right {
  text-align: right;
}

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

.text-color-primary {
  color: var(--color-primary);
}

.text-color-secondary {
  color: var(--color-secondary);
}

.text-color-quinary {
  color: var(--color-quinary);
}

/* Text END */

/* Margins START */

.margin-small {
  margin: 1rem;
}

.margin-top-smallest {
  margin-top: 0.25rem;
}

.margin-right-smallest {
  margin-right: 0.25rem;
}

.margin-right-small {
  margin-right: 1rem;
}

.margin-top-extra-small {
  margin-top: 0.5rem;
}

.margin-top-small {
  margin-top: 1rem;
}

.margin-right-extra-small {
  margin-right: 0.5rem;
}

.margin-right-medium {
  margin-right: 2rem;
}

.margin-bottom-small {
  margin-bottom: 1rem;
}

.margin-left-extra-small {
  margin-left: 0.5rem;
}

.margin-left-small {
  margin-left: 1rem;
}

.margin-left-medium {
  margin-left: 2rem;
}

.margin-right-bottom-left-small {
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
}

.margin-medium {
  margin: 2rem;
}

.margin-top-medium {
  margin-top: 2rem;
}

.margin-right-medium {
  margin-right: 2rem;
}

.margin-bottom-medium {
  margin-bottom: 2rem;
}

.margin-left-medium {
  margin-left: 2rem;
}

.margin-right-bottom-left-medium {
  margin-right: 2rem;
  margin-bottom: 2rem;
  margin-left: 2rem;
}

.margin-large {
  margin: 3rem;
}

.margin-top-large {
  margin-top: 3rem;
}

.margin-right-large {
  margin-right: 3rem;
}

.margin-bottom-large {
  margin-bottom: 3rem;
}

.margin-left-large {
  margin-left: 3rem;
}

.margin-right-bottom-left-large {
  margin-right: 3rem;
  margin-bottom: 3rem;
  margin-left: 3rem;
}

.margin-top-small-custom-trailer-icon {
  margin-top: 2px;
}

.margin-top-small-custom-website-icon {
  margin-top: 2px;
}

.margin-bottom-small-custom-fieldset-text {
  margin-bottom: 7px;
}

/* Margins END */

/* Paddings START */


.padding-top-bottom-medium {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.padding-right-left-small {
  padding-right: 1rem;
  padding-left: 1rem;
}

.padding-bottom-small {
  padding-bottom: 0.5rem;
}

.padding-left-extra-small-custom-players-icon {
  padding-left: 5px;
}

.padding-top-extra-small-custom-players-icon {
  padding-top: 5px;
}

.padding-bottom-small-custom-likes-icon {
  padding-bottom: 7px;
}

.padding-top-small-custom-discord-icon {
  padding-top: 4px;
}

.padding-left-small {
  padding-left: 0.5rem;
}

.padding-medium {
  padding: 1rem;
}

/* Paddings END */

/* Display START  */

.inline-block {
  display: inline-block;
}

/* Display END  */

/* Main Elements START */

footer {
  border-radius: 1rem;
  border: 1px solid white;
  margin-bottom: 3rem;
}

/* Main Elements END */

/* General Elements START */
li {
  list-style: none;
}

a {
  text-decoration: none;
}

a:visited {
  color: var(--color-primary);
}

a:hover {
  color: var(--color-quartary);
  cursor: pointer;
}

input {
  border: none;
  padding: 0.2rem;
}

/* General Elements END */

/* Main Containers START */
.outer-container {
  min-height: 100vh;
  position: relative;
  background-image: var(--image-outer-container);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.inner-container {
  min-height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  background-color: var(--color-inner-container);
}

.wrap-container {
  margin: auto;
  max-width: var(--max-width-wrap);
}

.links-container {
  display: flex;
}

.nav-primary-container {
  display: flex;
  justify-content: space-between;
}

.logo-container {
  display: flex;
  justify-content: center;
}

/* Main Containers END */

/* Dimensions START*/
.navigation-item-width-large {
  width: 220px;
}

.navigation-item-width-medium {
  width: 200px;
}


.logo-height-large {
  height: 70px;
}


.flag-height-small {
  height: 20px;
}

.flag-height-medium {
  height: 30px;
}

.flag-height-large {
  height: 40px;
}

.flag-height-extra-large {
  height: 50px;
}

.height-smallest {
  height: 18px;
}

.height-extra-small {
  height: 22px;
}

.height-small {
  height: 28px;
}

.height-medium {
  height: 34px;
}

.height-large {
  height: 42px;
}

.height-extra-large {
  height: 50px;
}

.height-largest {
  height: 60px;
}

.nav-item-width {
  width: 200px;
}

.item-width-extra-small {
  width: 44px;
}

.item-width-small {
  width: 88px;
}


.item-width-smedium {
  width: 128px;
}

.item-width-medium {
  width: 351px;
}

.item-width-lmedium {
  width: 400px;
}

.item-width-large {
  width: 468px;
}

/* Dimensions END */

/* Specific elements START */

.controls {
  display: flex;
  justify-content: space-between;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
}

.filters-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1.25rem;
}

.search-server-container {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 240px;
}

.search-server-input .form-control {
  min-width: 240px;
  background-color: transparent;
  color: var(--color-primary);
}

.search-server-input .input-group-text {
  background-color: transparent;
  border-color: var(--color-primary);
  color: #fff;
}

.search-server-input .form-control:focus {
  box-shadow: none;
  border: 1px solid var(--color-primary);
}

.filters-sort .homepage-country-select-container,
.filters-sort .filter-bedrock,
.filters-sort .sort {
  align-self: flex-end;
}

.search-server-container label {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .controls {
    justify-content: flex-start;
  }

  .filters-sort {
    width: 100%;
  }

  .search-server-container {
    flex: 1 1 100%;
    min-width: 0;
  }

  .search-server-input .form-control {
    min-width: 0;
  }
}

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

.updated {
  display: inline-block;
}

.sort,
.filter-bedrock {
  display: flex;
  align-items: center;
}

/* Keep controls vertically aligned */
.homepage-country-select-container .form-label {
  margin-bottom: 0;
}

.filter-bedrock .custom-checkbox {
  height: 35px;       /* match .custom-select height */
}


.custom-checkbox {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
}

.custom-checkbox input[type="checkbox"] {
  opacity: 0;
  /* fully transparent */
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
}

.custom-checkbox .checkmark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  width: 28px;
  background-color: transparent;
  /* transparent background */
  border: 1px solid var(--color-primary);
  border-radius: 4px;
}


.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input[type="checkbox"]:checked+.checkmark:after {
  display: block;
}

.custom-checkbox .checkmark:after {
  left: 36%;
  top: 16%;
  width: 6px;
  height: 12px;
  border: solid 1px var(--color-primary);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  content: "";
}

.sort-items,
.filter-bedrock-items {
  display: flex;
}

.custom-select-wrapper {
  position: relative;
  width: 140px;
}

.custom-select:hover {
  border-color: var(--color-quartary);
}

.custom-select:hover .selected,
.custom-select:hover .selected i {
  color: var(--color-quartary);
}

.custom-select {
  background: transparent;
  border: 1px solid #ccc;
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selected {
  padding: 5px;
  background-color: transparent;
}

.options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: transparent;
  z-index: 10;
}

.options div {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.7);
}

.options div:hover {
  color: var(--color-quartary);
}

.options div:hover>i {
  color: var(--color-quartary);
}

.list-item {
  display: flex;
  justify-content: space-between;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.empty-banner {
  border: white 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}

.under-banner {
  display: flex;
  justify-content: space-between;
}

.ip-address-container {
  display: flex;
  position: relative;
}

.ip-address:hover {
  color: var(--color-quartary);
  cursor: pointer;
  transform: scale(var(--scale-up-small));
}

.version-text .version:hover {
  color: var(--color-quartary);
  cursor: pointer;
}


/* Address popup START */
.address-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.address-popup {
  background: #fff;
  color: #111;
  border-radius: 8px;
  width: 90%;
  max-width: 420px;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  position: relative;
}

.address-popup-close {
  position: absolute;
  right: 0.5rem;
  top: 0.25rem;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: #444;
}

.address-popup-body {
  text-align: center;
  padding-top: 0.6rem;
}

.address-popup-address {
  margin-top: 0.6rem;
  font-weight: 600;
  color: var(--color-septenary, #007bff);
}

/* Address popup END */

.bedrock-server-container {
  display: flex;
  flex-direction: row;
}

.likes-container {
  display: flex;
}

.likes-icon {
  align-self: center;
}

.likes-number:hover {
  color: var(--color-quartary);
  cursor: pointer;
  transform: scale(var(--scale-up-small));
}

.likes-icon:hover {
  color: var(--color-quartary);
  cursor: pointer;
  transform: scale(var(--scale-up-small));
}

.server-name-container {
  display: flex;
}

.discord-trailer-container {
  display: flex;
}

.discord a {
  display: flex;
}

.trailer a {
  display: flex;
}

.website a {
  display: flex;
}

.website {
  display: flex;
}

.players {
  display: flex;
}

.discord:hover * {
  color: var(--color-quartary);
  cursor: pointer;
  /* transform: scale(var(--scale-up-extra-small)); */
}

.trailer:hover * {
  color: var(--color-quartary);
  cursor: pointer;
  /* transform: scale(var(--scale-up-extra-small)); */
}

.website:hover * {
  color: var(--color-quartary);
  cursor: pointer;
  /* transform: scale(var(--scale-up-extra-small)); */
}

/* .players:hover * {
  color: var(--color-quartary);
  cursor: pointer;
  transform: scale(var(--scale-up-extra-small)); 
} */

.discord-icon-container,
.trailer-icon-container,
.players-icon-container {
  width: 34px;
  height: 28px;
}

.website-icon-container {
  height: 28px;
  width: 28px;
}

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

.discord-icon {
  color: var(--color-discord);
}

.trailer-icon-container {
  display: flex;
  align-items: center;
  position: relative;
}

.trailer-icon {
  color: var(--color-youtube);
  z-index: 2;
}

.trailer-icon-bg {
  position: absolute;
  top: -1;
  left: 35%;
  width: 10px;
  height: 10px;
  background-color: white;
  z-index: 1;
}

.website-icon {
  color: var(--color-website-icon);
  z-index: 2;
}

.website-icon-container {
  display: flex;
  align-items: center;
  position: relative;
}

.players-online-container {
  display: flex;
}

.players-icon-container {
  display: flex;
  align-items: center;
}

.players-icon {
  color: var(--color-septenary);
}

.players-icon-offline {
  color: var(--color-quinary);
}

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

.flag-icon:hover {
  cursor: pointer;
}

.ping-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.ping-container:hover {
  cursor: pointer;
  transform: scale(var(--scale-up-small));
}

.ping-container:hover .ping-text {
  color: var(--color-quartary);
}

.ping-icon {
  color: white;
  position: relative;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.ping-icon::before {
  content: "\f012";
  color: var(--color-septenary);
  /* Color for the left half */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 40% 0 0);
  /* Show only the left half */
}

.ping-icon::after {
  content: '\f012';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 0 0 60%);
  /* Show only the right half */
}

.pagination ul {
  display: flex;
  justify-content: center;
}

.pagination ul * {
  font-size: inherit;
}

.pagination ul li {
  margin: 0 0.5rem;
}

.page-active-number {
  color: var(--color-quartary);
}

/* Specific elements END */

/* Dynamic classes START */
.copy-notification {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: var(--color-secondary);
  color: var(--color-primary);
  padding: 8px 16px;
  border-radius: 4px;
  z-index: 10;
  opacity: 0;
  transform: translateY(10px);
  animation: copyNotificationFade 2s ease-in-out;
  pointer-events: none;
}

@keyframes copyNotificationFade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  20% {
    opacity: 1;
    transform: translateY(0);
  }

  80% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Flag tooltip variant: disable the 2s keyframe, use transitions */
.copy-notification.flag-tooltip {
  animation: none !important;          /* neutralize the 2s keyframe */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}

.copy-notification.flag-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.on-hover-cursor-pointer:hover {
  cursor: pointer;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.display-flex {
  display: flex;
}

.display-none {
  display: none;
}

.justify-content-center {
  justify-content: center;
}

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

.height-60px {
  height: 60px;
}

.homepage-country-select-btn {
  background-color: transparent;
  border-color: var(--color-primary);
}

.homepage-country-select-container .dropdown-menu.show {
  background-color: rgba(0, 0, 0, 0.7);
}

.homepage-country-select-container input[type="search"] {
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--color-primary);
}

.homepage-country-select-container a[role="option"]:hover {
  background-color: #0d6efd;
}

.homepage-country-select-container div[role="listbox"] {
  /* Firefox */
  scrollbar-width: none;
  /* IE/old Edge */
  -ms-overflow-style: none;
}

.homepage-country-select-container div[role="listbox"]::-webkit-scrollbar {
  width: 0;
  /* Chrome/Safari/Chromium Edge */
  height: 0;
}

/* let long option texts wrap inside dropdown */
.homepage-country-select-container .bootstrap-select .dropdown-item .text {
  white-space: normal;
  word-break: break-word;
  /* breaks very long words if needed */
  overflow-wrap: anywhere;
  /* modern browsers */
}

/* constrain menu width to match button */
.homepage-country-select-container .bootstrap-select .dropdown-menu.show {
  min-width: 100%;
  /* not wider than trigger button */
  max-width: 100%;
  /* prevents overflow expansion */
  width: 100%;
}
.homepage-country-select-container .bootstrap-select .no-results {
  background-color: transparent;
  white-space: normal;
  word-break: break-word;
  /* breaks very long words if needed */
  overflow-wrap: anywhere;
  /* modern browsers */
}


.homepage-country-select-container .dropdown-toggle:after {
  color: var(--color-primary);
}

/* Dynamic classes END */


/* Temporary START */

.likes-number {
  display: flex;
  align-items: center;
}

.likes-icon {
  padding-top: 4px;
}

/* Temporary END */