:root
{
  --mycolor-green             : rgb(19, 212, 75);
  --mycolor-blue              : rgb(44, 130, 167);
  --mycolor-background-blue   : rgb(24, 32, 44);
  --mycolor-blue-dim          : rgb(67, 85, 102);
  --mycolor-simple-background : #04121f;
  --bs-navbar-color           : white;
  --bs-nav-link-color         : white;
}

body
{
  background-color : #00687c;
}

.my-hidden
{
  display : none;
}

.my-visible
{
  display : inherit;
}

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

.search-tab ul.nav
{
  padding-left  : 1.5rem !important;
  padding-right : 1.5rem !important;
}

.popular-tag-link
{
  margin-right     : 0.25rem;
  margin-bottom    : 0.25rem;
  font-weight      : bold;
  font-size        : 1.05em;
  background-color : #000000 !important;
  color            : #ffffff;
  display          : grid;
  position         : relative;
  min-width        : 90px;
}

.popular-tag-link:hover
{
  color            : #ffffff;
  background-color : #272727 !important;
}

.popular-tag-link .popular-tag-badge
{
  background-color : var(--mycolor-simple-background);
  position         : absolute !important;
  top              : -0.5rem !important;
  right            : -0.5rem !important;
  z-index          : 10;
}

.popular-tag-badge-emojie
{
  background-color : #000000;
  margin-left      : 0.25rem;
  margin-right     : 0.25rem;
  color            : #ffffff;
  border-radius    : 100% 100% 100% 100%;
  font-size        : 1.55em;
  padding          : 0.1em 0.1em 0.1em 0.1em;
}

.popular-tag-flag
{
  height       : 1.55em;
  width        : auto;
  justify-self : center;
  align-self   : center;
}

.btn:not(.btn-danger):not(.btn-outline-danger), .popular-tag-link:not(.btn-danger):not(.btn-outline-danger)
{
  border           : 0.11em solid #000000 !important;
  background-color : var(--mycolor-green);
}

.btn-tag
{
  border-radius    : 8em 8em 8em 8em;
  padding          : 0.1em 0.1em 0.1em 0.1em;
  background-color : var(--mycolor-blue-dim);
}

.btn-imp
{
  padding     : 0.3em 0.3em 0.3em 0.3em;
  font-weight : bold;
  color       : #000000;
}

.btn-action
{
  background-color : #6bcaec;
  color            : #000000;
  font-weight      : bold;
}

.btn-danger.btn-action
{
  background-color : #dc3545;
  color            : #ffffff;
  border           : 0.11em solid #000000 !important;
}

.btn:not(.btn-danger):not(.btn-outline-danger):hover, .popular-tag-link:not(.btn-danger):not(.btn-outline-danger):hover
{
  background-color : #14e96b;
}

.btn-active:hover
{
  background-color : #6bcaec;
}

.nav-pills .nav-link.active
{
  background-color : #007bff;
}

.navbar
{
  background-color : var(--mycolor-simple-background);
}

.navbar img
{
  border-radius : 50% 50% 50% 50%;
  object-fit    : cover;
  width         : 72px;
}

.navbar .navbar-nav
{
  gap : 0.5rem;
}

.navbar .navbar-nav .nav-item .nav-link
{
  display            : inline-flex;
  align-items        : center;
  padding            : 0.5rem 1rem 0.5rem 1rem !important;
  border-radius      : 20px 20px 20px 20px;
  background-color   : rgba(255, 255, 255, 0.04);
  -webkit-transition : all 0.2s ease-in-out 0.0s;
  -moz-transition    : all 0.2s ease-in-out 0.0s;
  -ms-transition     : all 0.2s ease-in-out 0.0s;
  -o-transition      : all 0.2s ease-in-out 0.0s;
  transition         : all 0.2s ease-in-out 0.0s;
  font-weight        : 500;
  color              : rgba(255, 255, 255, 0.85) !important;
}

.navbar .navbar-nav .nav-item .nav-link i.ph
{
  font-size : 1.15em;
}

.navbar .navbar-nav .nav-item .nav-link:hover
{
  background-color : rgba(255, 255, 255, 0.12);
  color            : #ffffff !important;
}

.navbar .navbar-nav .nav-item .nav-link.active
{
  background-color : var(--mycolor-blue);
  color            : #ffffff !important;
}

.server-description
{
  max-height : 12rem;
  overflow   : auto;
  padding    : 0.5em 0.5em 0.5em 0.5em;
}

.server-description-full
{
  padding : 0.5em 0.5em 0.5em 0.5em;
}

.simple-border, .server-card-sub-box, .server-card-actions, .server-description, .server-description-full
{
  background-color : var(--mycolor-simple-background);
  border-radius    : 0.375em 0.375em 0.375em 0.375em;
}

.server-property-stat-group-heading
{
  text-align  : center;
  font-weight : bold;
}

.server-property-stat
{
  margin-left : 0.15rem;
}

.smol-tag
{
  background-color : var(--mycolor-simple-background);
  margin-left      : 0px;
  margin-right     : 0.25rem;
  position         : static;
}

.img-fluid
{
  max-height : 8em;
}

.a-nu
{
  text-decoration : none;
}

.page-item.active .page-link
{
  z-index          : 3;
  color            : #ffffff;
  background-color : #007bff;
  border-color     : #007bff;
}

.article-container h1, .article-container .h1, .manage-container h1, .manage-container .h1
{
  text-align : center;
}

.server-card-sub-box
{
  height : 100%;
}

.server-card-actions
{
  padding : 0.5rem 0.5rem 0.5rem 0.5rem;
}

.server-card-header-right
{
  max-width : 100%;
  overflow  : auto;
}

.server-tags
{
  max-height : 5rem;
  overflow   : auto;
}

.triangle-border
{
  border-color     : #95d01e;
  color            : #d5cbbb;
  background-image : none;
  background-color : #1a1b1a;
}

.triangle-border
{
  position              : relative;
  padding               : 15px 15px 15px 15px;
  margin                : 1em 0em 1em 0em;
  border                : 5px solid #5a8f00;
  background            : var(--mycolor-simple-background);
  -webkit-border-radius : 10px;
  -moz-border-radius    : 10px;
  border-radius         : 10px 10px 10px 10px;
  margin-left           : 30px;
}

.triangle-border:before
{
  content      : "";
  position     : absolute;
  bottom       : -20px;
  left         : 40px;
  border-width : 20px 20px 0;
  border-style : solid;
  border-color : #5a8f00 transparent;
  display      : block;
  width        : 0px;
}

.triangle-border.left:before
{
  top          : 10px;
  bottom       : auto;
  left         : -30px;
  border-width : 15px 30px 15px 0;
  border-color : transparent #5a8f00;
}

.triangle-border.left:after
{
  top          : 16px;
  bottom       : auto;
  left         : -21px;
  border-width : 9px 21px 9px 0;
  border-color : transparent var(--mycolor-simple-background);
}

.search-tab
{
  min-width    : 220px;
  margin-right : 20px;
}

.nav-pills .nav-link
{
  text-align : left;
  padding    : calc(var(--bs-nav-link-padding-y) * 0.5) calc(var(--bs-nav-link-padding-x) * 0.5);
}

.admin-tags-column
{
  max-width     : 200px;
  word-wrap     : break-word;
  text-overflow : ellipsis;
}

.admin-tags-column > div
{
  max-height : 80px;
  overflow-y : auto;
}

.frontpage-server-tags-container
{
  justify-content : flex-start !important;
}

.stat-badge
{
  background-color : #052745;
  border-radius    : 0.5rem 0.5rem 0.5rem 0.5rem;
  padding          : 0.25rem 0.25rem 0.25rem 0.25rem;
}

.server-card-sub-box .d-flex.justify-content-between
{
  justify-content : center !important;
}

.age-confirmation-page
{
  display          : flex;
  align-items      : center;
  justify-content  : center;
  min-height       : 100vh;
  background-color : var(--mycolor-background-blue);
}

.age-confirmation-page .age-confirmation-box
{
  background-color : var(--mycolor-simple-background);
  padding          : 3rem 3rem 3rem 3rem;
  border-radius    : 10px 10px 10px 10px;
  box-shadow       : 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width        : 500px;
  text-align       : center;
}

.age-confirmation-page .age-confirmation-box h1, .age-confirmation-page .age-confirmation-box .h1
{
  color         : var(--mycolor-green);
  margin-bottom : 2rem;
}

.age-confirmation-page .age-confirmation-box .warning-text
{
  margin-bottom : 2rem;
}

.age-confirmation-page .age-confirmation-box .warning-text p
{
  margin-bottom : 1rem;
  color         : var(--bs-body-color);
}

.age-confirmation-page .age-confirmation-box .button-container
{
  display         : flex;
  gap             : 1rem;
  justify-content : center;
  margin-bottom   : 2rem;
}

.age-confirmation-page .age-confirmation-box .button-container .inline-form
{
  display : inline-block;
}

.age-confirmation-page .age-confirmation-box .button-container .btn, .age-confirmation-page .age-confirmation-box .button-container .popular-tag-link
{
  min-width : 150px;
  padding   : 0.75rem 1.5rem 0.75rem 1.5rem;
}

.age-confirmation-page .age-confirmation-box .button-container .btn-primary
{
  background-color : var(--mycolor-green);
  border-color     : var(--mycolor-green);
  color            : #000000;
}

.age-confirmation-page .age-confirmation-box .button-container .btn-primary:hover
{
  background-color : rgb(38.4326530612, 175.5673469388, 124.906122449);
  border-color     : rgb(38.4326530612, 175.5673469388, 124.906122449);
}

.age-confirmation-page .age-confirmation-box .button-container .btn-secondary
{
  background-color : var(--mycolor-blue-dim);
  border-color     : var(--mycolor-blue-dim);
  color            : #ffffff;
}

.age-confirmation-page .age-confirmation-box .button-container .btn-secondary:hover
{
  background-color : rgb(128, 233.2763157895, 255);
  border-color     : rgb(128, 233.2763157895, 255);
}

.age-confirmation-page .age-confirmation-box .info-text
{
  font-size : 0.9rem;
  color     : var(--bs-body-color);
}

.age-confirmation-page .age-confirmation-box .info-text a
{
  color           : var(--mycolor-blue);
  text-decoration : underline;
}

.age-confirmation-page .age-confirmation-box .info-text a:hover
{
  color : var(--mycolor-green);
}

.nav-icon-badge
{
  background-color : rgba(0, 0, 0, 0.4);
  border-radius    : 50% 50% 50% 50%;
  width            : 28px;
  height           : 28px;
  display          : inline-flex;
  align-items      : center;
  justify-content  : center;
  font-size        : 1.1em;
  vertical-align   : middle;
}

@media screen and (prefers-color-scheme: dark)
{

:root
{
  --mycolor-green             : rgb(19, 212, 75);
  --mycolor-blue              : rgb(44, 130, 167);
  --mycolor-background-blue   : rgb(24, 32, 44);
  --mycolor-blue-dim          : rgb(67, 85, 102);
  --mycolor-simple-background : #04121f;
  --bs-navbar-color           : white;
  --bs-nav-link-color         : white;
}

}
@media screen and (max-width: 767.98px)
{

.search-tabs-nav
{
  display               : grid !important;
  grid-template-columns : 1fr 1fr;
  gap                   : 6px;
  padding               : 6px 6px 6px 6px;
  margin-left           : 0px !important;
  margin-bottom         : 0.75rem;
  width                 : 100% !important;
}

.search-tabs-nav .nav-item
{
  width : 100%;
}

.search-tabs-nav .nav-item .nav-link
{
  justify-content : center;
  text-align      : center;
  font-size       : 0.9rem;
  padding         : 0.5rem 0.75rem 0.5rem 0.75rem !important;
  border-radius   : 8px 8px 8px 8px;
}

}

/* Generated with Clay, http://fvisser.nl/clay */