* { margin: 0; padding: 0; box-sizing: border-box;}
html {
  min-height: 100%;
  height: 100%;
}
img {
  image-rendering: pixelated;
}
footer img {
  image-rendering: auto;
}
input[type="file"] {
  display: none;
}

.toggle-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  margin-right: 10px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 28px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #71368a;
}

input:checked + .slider:before {
  transform: translateX(22px);
}


.file {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  word-break: break-word;  
  font-family: 'Poppins';
}

br, button {
  user-select: none;
}

@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
}


@font-face {
  font-family: Minecraft;
  src: url("assets/fonts/MinecraftRegular-Bmg3.otf") format("opentype");
}

@font-face {
  font-family: Minecraft;
  font-weight: bold;
  src: url("assets/fonts/MinecraftBold-nMK1.otf") format("opentype");
}



.social-icon {
  vertical-align: middle;
  display: inline-block;
  margin: 1rem;
}
.social-icon img {
  width: 12rem;
  height: auto;
}


.bantablemargin {
  margin: 10px 10rem;
}
.weekselect {
  font-family: 'Poppins';
  padding: 10px 20px;
}

header {
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
  overflow: hidden;
}
header.small { padding-bottom: 40%; }

.header-bg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url('/kuvat/new-header.png');
  box-shadow: inset 0rem -1rem 3rem -1rem #000;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: -2;
}
.header-bg.active {
  opacity: 1;
}

.header-video {
  position: absolute;
  left: 0px;
  top: 50%;
  width: 100%;
  height: auto;
  z-index: -1;
  transform: translateY(-50%);
}

.header-dot-grid {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: radial-gradient(black 25%, transparent 26%), radial-gradient(black 25%, transparent 26%), transparent;
  background-position: 0 0, 2px 2px;
  background-size: 4px 4px;
}

#header-floating-container {
  position: absolute;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#header-floating-container > span {
  display: block;
}
#header-floating-container > span:first-child {
  font-size: 3rem;
  color: white;
  font-family: 'Righteous', cursive;
  text-shadow: 0px 0px 2px #000, 0px 0px 2px #000, 0px 4px 1px #000, 0px 0px 8px #000, 0px 0px 8px #000;
}
#header-floating-container > span:nth-child(2) {
  color: #eee;
  padding: 0.6rem;
  border-radius: 20px;
  background: #550d5e;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.5);
}



img#main-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 15rem;
}

@media screen and (min-width: 768px) {
  header { padding-bottom: 35%; }
  header.small { padding-bottom: 28%; }
  #header-floating-container > span:first-child { font-size: 4rem; }
  #header-floating-container > span:nth-child(2) { font-size: 1.5rem; }
  img#main-logo { height: 18rem; }
}

@media screen and (min-width: 1024px) {
  header { padding-bottom: 15%; min-height: 320px }
  header.small { padding-bottom: 18%; }
}


/* ======================================================================== */


nav#main-nav {
  background: #4c1f50;
  text-align: right;
  border-top: 2px solid #4c2052;
  border-bottom: 1px solid #3d143d;
}
nav#main-nav .button-wrapper a {
  display: block;
  color: white;
  padding: 0.8em 0.8em;
  font-size: 1.4em;
  font-weight: 700;
  text-align: center;
  text-shadow: 1px 1px 1px #424;
  text-decoration: none;
  transition: color 0.1s ease-in-out;
  user-select: none;
}
nav#main-nav a:hover,
nav#main-nav a:focus {
  color: #eae;
}

nav#main-nav a.current {
  color: #ffd8ff;
}


.menu-toggle-button {
  display: inline-block;
  cursor: pointer;
  margin: 0.7rem 0.8rem;
}

.bar1, .bar2, .bar3 {
  border-radius: 999px;
  width: 35px;
  height: 5px;
  background-color: white;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.open .bar1 {
  -webkit-transform: rotate(-45deg) translate(-7px, 6px) ;
  transform: rotate(-45deg) translate(-7px, 6px) ;
}

/* Fade out the second bar */
.open .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.open .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

nav#main-nav .button-wrapper {
  display: none;
}
nav#main-nav.open .button-wrapper {
  display: block;
}

.sub-menu {
  display: none;
  background: rgba(0, 0, 0, 0.1);
}

.sub-menu-open + .sub-menu {
  display: block;
}
.sub-menu a {
  display: block;
}


@media screen and (min-width: 768px) {

  nav#main-nav {
    text-align: center;
  }
  nav#main-nav .menu-toggle-button {
    display: none;
  }
  nav#main-nav .button-wrapper {
    display: block;
  }

  .sub-menu-wrapper {
    position: relative;
    display: inline-block;
  }

  nav#main-nav .button-wrapper a {
    display: inline-block;
    font-family: 'Poppins';
    padding: 0.8em 1.0em;
  }

  .sub-menu  {
    display: block;
    position: absolute;
    background: white;
    opacity: 0;
    z-index: 1;
    border-radius: 0.25rem;
    transition: opacity 0.15s, transform 0.15s;
    box-shadow: 0px 3px 8px -2px rgba(0, 0, 0, 0.5);
    transform: scaleY(0.1) scaleX(0.9) translateY(-50%);
  }

  .sub-menu { pointer-events: none;}
  .sub-menu-wrapper:hover .sub-menu {
    pointer-events: all;
    opacity: 1;
    transform: scaleY(1) scaleX(1) translateY(0%);
  }
  .sub-menu:hover  {
    opacity: 1;
    transform: scaleY(1) scaleX(1) translateY(0%);
  }

  nav#main-nav .sub-menu a {
    font-size: 1.1rem;
    color: #222;
    text-shadow: none;
    display: block;
    padding: 0.7rem 1.2rem;
  }
  nav#main-nav .sub-menu a:hover {
    color: #939;
  }
}

@media screen and (min-width: 1024px) {
  nav#main-nav .button-wrapper a {
    display: inline-block;
    padding: 0.8em 1.5em;
  }
}


/* ======================================================================== */

div.wrapper {
  position: relative;
  width: 100%;
  text-align: center;
}
div.wrapper.gray {background: #414;/*#636;*/}
@media screen and (min-width: 1024px) {
  div.wrapper.bg-style1 { background: linear-gradient(to right, #efe0ef 50%, white 50%); }
}
div.gray h1 { color: white; }
div.gray p { color: white; }

div.bottom-gradient {
  padding-bottom: 5%;
  background: linear-gradient(-2.5deg, transparent 50%, #414 51%, #525 100%);
  margin-top: -1px;
}

div.top-gradient {
  padding-bottom: 5%;
  background: linear-gradient(2.5deg, #636, #525 50%, transparent 51%);
  margin-bottom: -1px;
}

.container {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 5rem;
  max-width: 1200px;
  margin: auto;
}

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

div.text-panel {
  margin: 0.5rem;
}

h1 {
  text-align: center;
  font-family: 'Righteous', cursive;
  font-weight: normal;
  font-size: 2.5rem;
  color: #555;
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

h2 {
  text-align: center;
  font-weight: normal;
  font-size: 1.3rem;
  color: transparent;
  background: linear-gradient(to right, #939, #626);
  background-clip: text;
  -webkit-background-clip: text;
  padding-top: 1.3rem;
  padding-bottom: 0.6rem;
}

p {
  padding-bottom: 1rem;
  color: #444;
  line-height: 150%;
}

a, a:visited {
  color: #737;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 800px) {
  h1 {font-size: 3.5rem; }
  h2 {font-size: 1.5rem; }
}

textarea {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  border-radius: 20px !important;
  min-height: 4rem;
  padding: 0.5rem;
  margin: 1rem 0rem;
}

button,
a.btn,
a.btn:visited,
input[type=submit] {
  display: inline-block;
  padding: 1rem 1.8rem;
  outline: none;
  color: #fff;
  font-size: 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-decoration: none;
  cursor: pointer;
}

.purple-btn {
  background: #742774;
  border: none;
  border-radius: 999999px;
  transition: background-color 0.2s ease-in-out;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

.purple-btn:hover {
  background: #737;
}

.btn.small-btn {
  font-size: 12px;
  padding: 6px 10px;
}

img.slinkon-expression {
  max-width: 28rem;
  width: 90%;
  height: auto;
  margin: 2rem 5% -3rem 5%;
}


span.command {
  display: inline-block;
  font-family: monospace;
  font-size: 1.1em;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 0.1rem 0.25rem;
  margin: 0 0.25rem;
  border-radius: 0.25rem;
}
span.command.smaller {
  font-size: 1em;
  white-space: nowrap;
  padding: 0.2em 0.3em;
  margin: 0.1em 0.3em;
}

.minecraft-error {
  font-family: monospace;
  color: #f44;
  font-weight: bold;
  text-shadow: 2px 2px #422;
  background: #4c434a;
  padding: 0.2em 0.3em;
  border-radius: 0.3em;
  margin-top: 1.3rem;
  margin-bottom: 0.5rem;
}


/* =============== NEWS ==================================*/


div#news-container { margin: 0; }

@media screen and (min-width: 500px) {
  div#news-container { margin: 0 1rem; }
}

div.news-flex-wrapper {
  display: inline-flex;
  flex-direction: column;
  width: 100%;
}

@media screen and (min-width: 720px) {
  div.news-flex-wrapper { width: 50%; }
}
@media screen and (min-width: 1080px) {
  div.news-flex-wrapper { width: 33%; }
}


div.news-box {
  display: inline-block;
  vertical-align: top;
  border-radius: 20px;
  background: #f0f0f0; 
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
  margin: 0.25rem;
}

div.news-image {
  padding-bottom: 75%;
  background-size: cover;
  border-radius: 20px 20px 0px 0px;
}

div.news-text {
  padding: 1rem;
  text-align: left;
}

div.news-text > h1 {
  text-align: left;
  font-size: 1.8rem;
  color: #555;
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}
div.news-text > p {
  text-align: left;
  color: #444;
}
div.news-text > p.date {
  color: #6a6a6a;
  font-size: 0.9rem;
  font-style: italic;
  padding-bottom: 0.2rem;
}

.news-content-container h2 {
  color: #555;
  text-align: left;
  margin-bottom: 1rem;
}



/* ============== */

div.pair-panel {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

@media screen and (min-width: 600px) {
  div.pair-panel {
    flex-wrap: nowrap;
  }
}
div.pair-panel > * {
  flex-basis: 50%;
}
div.tutorial-panel {
  display: inline-block;
  flex: 1 1 50%;
  padding: 2rem;
  vertical-align: top;
  background: #faf0fa;
}
div.tutorial-panel > * { text-align: left; }

div.purple-panel {
  flex: 1 1 50%;
  background: #c8c;
  background-size: cover;
  background-position: 0 100%;
}


div#personnel-wrapper, .personnel-wrapper {
  text-align: center;
  max-width: 1200px;
  margin: auto;
}

div.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 1rem 1rem 0;
  text-align: center;
}

div.person > .person-img {
  display: block;
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  transform: scale(1);
  transition: transform 0.3s ease;
}

div.person > .person-img > img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  border-radius: 8px 0px 0px 8px; 
  transition: border-radius 0.3s ease;
}

div.person > .person-img:hover {
  transform: scale(1.2); 
  transition: transform 0.3s ease; 
}

div.person > .person-img:hover > img {
  border-radius: 0px 0px 0px 0px; 
  transition: border-radius 0.3s ease; 
}



div.person > div {
  display: inline-block;
  text-align: center;
  padding: 0.2rem 0 0 0;
}

div.person > div > span {
  display: inline-block;
}
div.person > div > span:first-child {
  display: block;
  color: #444;
  margin-top: 0.5em;
  margin-bottom: 0.4em;
}

div.perustaja .role-tag,
div.pääkehittäjä .role-tag,
div.kehitysharj\. .role-tag,
div.tuottaja .role-tag,
div.koodaaaja .role-tag,
div.suunnittelija .role-tag,
div.konsultti .role-tag,
div.kehittäjä .role-tag,
div.päävalvoja .role-tag,
div.valvoja .role-tag,
div.helpperi .role-tag,
div.arkkitehti .role-tag,
div.rakentaja .role-tag,
div.yhteisöaktiivi .role-tag,
div.yhteisötoimija .role-tag,
div.yhteisövetäjä .role-tag,
div.pääarkkitehti .role-tag,
div.hallinto .role-tag,
div.bypasslock .role-tag,
div.koordinoija .role-tag,
div.loma .role-tag,
div.erikoisosaaja .role-tag,
.role-tag {
  margin-left: -0.3rem;
}


span.koordinoija, div.koordinoija .role-tag { background-color: #f82553;}
span.perustaja, div.perustaja .role-tag { background-color: #f82553;}
span.loma, div.loma .role-tag { background-color: #b689ff;}
span.erikoisosaaja, div.erikoisosaaja .role-tag { background-color: #9cfdbf;}
span.bypasslock, div.bypasslock .role-tag {background-color: #ac0000;}
span.kehittäjä, div.kehittäjä .role-tag { background-color: #7347eb;}
span.koodaaja, div.koodaaja .role-tag { background-color: #7347eb;}
span.pääkehittäjä, div.pääkehittäjä .role-tag { background-color: #7347eb;}
span.kehitysharj\., div.kehitysharj\. .role-tag { background-color: #7347eb;}
span.hallinto, div.hallinto .role-tag { background-color: #f82553;}
span.päävalvoja, div.päävalvoja .role-tag { background-color: #23d93e;}
span.valvoja, div.valvoja .role-tag { background-color: #23d93e;}
span.helpperi, div.helpperi .role-tag { background-color: #23d93e;}
span.konsultti, div.konsultti .role-tag { background-color: #23d93e;}
span.pääarkkitehti, div.pääarkkitehti .role-tag { background-color: #3783e6;}
span.arkkitehti, div.arkkitehti .role-tag { background-color: #3783e6;}
span.rakentaja, div.rakentaja .role-tag { background-color: #3783e6;}
span.suunnittelija, div.suunnittelija .role-tag { background-color: #3783e6;}
span.kruunukonna, div.kruunukonna .role-tag { background-color: #FF196E;}
span.silent, div.silent .role-tag { background-color: #ffce3c;}
span.op, div.op .role-tag { background-color: #7e7cff;}
span.admin, div.admin .role-tag { background-color: #f82553;}
span.konna\+, div.konna\+ .role-tag { background-color: #F0AA32;}
span.konna, div.konna .role-tag { background-color: #d6d63a;}
span.og, div.og .role-tag { background-color: #C3FF00;}
span.youtube, div.youtube .role-tag { background-color: #F02828;}
span.media, div.media .role-tag { background-color: #FF6E00;}
span.yhteisöaktiivi, div.yhteisöaktiivi .role-tag { background-color: #f8c421;}
span.yhteisötoimija, div.yhteisötoimija .role-tag { background-color: #f8c421;}
span.yhteisövetäjä, div.yhteisövetäjä .role-tag { background-color: #f8c421;}
span.tuottaja, div.tuottaja .role-tag { background-color: #f8c421;}




@media screen and (min-width: 1024px) {
  .staff-norm {
    width: 25%;
  }
}

@media screen and (min-width: 350px) {
  div.person {
    flex-direction: row;
    margin: 0 1rem 1rem 0;
    border-radius: 10px; 
    background: transparent;
  }

  /*
  div.person.Moderaattori { background: linear-gradient(to right, #7d7 0%, #7d7 65%, rgba(119, 221, 119, 0) 100%); }
  div.person.Helpperi { background: linear-gradient(to right, #afa 0%, #afa 65%, rgba(170, 255, 170, 0) 100%); }
  div.person.Rakentaja { background: linear-gradient(to right, #fe4 0%, #fe4 65%, rgba(255, 238, 68, 0) 100%); }
  div.person.Arkkitehti { background: linear-gradient(to right, #fd2 0%, #fd2 65%, rgba(255, 221, 34, 0) 100%); }
  */

  div.person > div {
    text-align: left;
    height: 100%;
    padding: 0.5rem 0 0 1rem;
  }
}

@media screen and (min-width: 650px) {
  #johto-wrapper > .person {
    width: 20%;
  }
  #johto-wrapper .person:last-child {
    margin-right: 0;
  }
 .left-staff {
    border-left: 8px solid white;   
  }
 .right-staff {
    border-right: 8px solid white;   
  }
  div#personnel-wrapper, .personnel-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
  }
    
  div#personnel-wrapper, .personnel-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
  }
  
  div.person {
    width: 40%;
    flex: 0 0 40%;
  }
  
}

@media screen and (min-width: 1024px) {
  .personnel-wrapper-co {
    display:flex;   
  }
  div.person {
    width: 100%;
    flex: 0 0 28%;
  }
  personnel
}






@media screen and (min-width: 1024px) {
  
  div.text-and-image-div {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }
  div.text-and-image-div div.text-panel {
    flex: 1 1 auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  div.text-and-image-div img {
    flex-grow: 0 0 auto;
  }
}


div.video-wrapper > div {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

div.video-wrapper > div > iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}





footer {
  margin-top: auto;
  background: #3c0e3c;
  text-align: center;
  padding: 16px;
  padding-bottom: 4rem;
  border-top: 8px solid #420e42;
}
footer p {
  color: white;
}
footer a, footer a:visited {
  color: white;
}

.footer-sc-logo {
  margin: 1.5rem;
  width: 128px;
  opacity: 1;
}

.social-icons-footer {
  text-align: center;
  padding-bottom: 1rem;
}
.social-icons-footer a img {
  display: inline-block;
  width: 48px;
  margin: 16px;
}
.social-icons-footer a:hover {
  text-decoration: none;
}


.slinkonLiveBG {
  background: url("kuvat/slinkonLIVE.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
  box-shadow: inset 0px 2px 20px rgba(0, 0, 0, 0.6);
}
.slinkonLiveBG:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1));
}

div.slinkonLiveBG div.container {
  position: relative;
  z-index: 10;
  padding-bottom: 2rem;
}

.slinkonLiveBG p {
  color: white;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
  font-size: 1.1rem;
}

.remove-btn {
  background: none;
  border: none;
}

.pink {
  color: #ff60b0;
}
.purple {
  color: #a4d;
}
.green {
  color: #3c3;
}
.light-green {
  color: #6f9;
}
.yellow {
  color: #ed3;
}
.turquoise {
  color: #27b4bd;
}
.darkturquoise {
  color: #187180;
}

.minecraft-text {
  font-family: Courier, monospace;
  padding: 0.25rem;
  border-radius: 0.25rem;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75);
  background: rgba(20, 0, 20, 0.7);
  font-weight: bold;
}

a.red.button {
  background: #e00000;
  color: white;
  text-align: middle;
  padding: 1.2rem 3rem;
  min-width: 50%;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
  border: 1px solid #900000;
}
a.red.button:hover {
  background: #c00000;
}

.paavalvojaText, .päävalvojaText{
  color: #23d93e;
}
.adminText, .adminText{
  color: #f82553;
}
.konsulttiText{
  color: #23d93e;
}
.koodaajaText{
  color: #7347eb;
}
.suunnittelijaText{
  color: #3783e6;
}
.tuottajaText{
  color: #f8c421;
}
.pääkehittäjäText, .paakehittajaText{
  color: #7347eb;
}
.kehitysharj\.Text {
  color: #7347eb;
}
.yhteisövetäjäText, .yhteisövetäjäText {
  color: #f8c421;
}
.yhteisötoimijaText, .yhteisotoimijaText {
  color: #f8c421;
}
.yhteisöaktiiviText, .yhteisoaktiiviText {
  color: #f8c421;
}
.hallintoText {
  color: #f82553;
}
.kehittäjäText, .kehittajaText {
  color: #7347eb;
}
.valvojaText{
  color: #23d93e;
}
.helpperiText{
  color: #23d93e;
}
.paaarkkitehtiText, .pääarkkitehtiText {
  color: #1E5FA0;
}
.arkkitehtiText {
  color: #3296C8;
}
.rakentajaText {
  color: #46C8C8;
}
.mediaText{
  color: #FF6E00;
}
.ogText{
  color: #C3FF00;
}
.konnaText{
  color: #c9c94d;
}
.konna\+Text{
  color: #F0AA32;
}
.kruunukonnaText{
  color: #FF196E;
}
.youtubeText{
  color: #F02828;
}
.perustajaText{
  color: #f82553;
}
.lomaText{
  color: #b689ff;
}
.erikoisosaajaText{
  color: #9cfdbf;
}
.koordinoijaText{
  color: #f82553;
}
.yhteisövetäjäText, .yhteisöaktiiviText, .yhteisötoimijaText {
  color: #f8c421;
}


h2.table-header {
  color: #444;
  font-weight: bold;
  text-align: center !important;
  font-size: 1.8rem;
}
table.ban-table td {
  padding: 0.5rem 0.3rem;
  padding: 15px;
  font-size: 85%;
  word-break: auto-phrase;
  border-left: 2px solid #e8e8e8;
  border-right: 2px solid #e8e8e8;
}
table.ban-table tr {
  background: #f7f7f7;
}
table.ban-table th {
  padding: 0.5rem;
  word-break: auto-phrase;  
  border: 2px solid #e8e8e8;
}
table.ban-table tr:nth-child(2n) {
  background: #f0f0f0;
}

table.ranking-table {
  width: 100%;
  border-collapse: collapse;
}
table.ban-table {
  width: 100%;
  border-bottom: 2px solid #e8e8e8;
  border-collapse: collapse;
}

table.ranking-table th {
  padding: 0.5rem;
  text-align: left;
}
table.ranking-table td {
  padding: 0.5rem 0.3rem;
  text-align: left;
}
table.ranking-table th {
  padding: 0.5rem;
  text-align: left;
}
table.ranking-table td:first-child {
  width: 35px;
}
table.ranking-table tr {
  background: #f0f0f0;
  border: none;
}
table.ranking-table tr:nth-child(2n) {
  background: #eaeaea;
}

table.ranking-table tbody tr:first-child {
  border: none;
  color: #aeb600;
  font-weight: bold;
}
table.ranking-table tbody tr:nth-child(2) {
  color: #a4a4a4;
  border: none;
  font-weight: bold;
}
table.ranking-table tbody tr:nth-child(3) {
  color: #d16900;
  border: none;
  font-weight: bold;
}

.ranking-name {
  /*display: inline-block;*/
  padding-top: 0.5rem;
  vertical-align: top;
  padding-left: 1rem;
}












input, textarea, select {
  padding: 1rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 99999px;
  outline: none;
  font-size: 1rem;
}


.form-row {
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  align-items: baseline;
}
.form-wrapper label {
  flex: 1 1 100%;
  display: block;
  text-align: left;
  margin-bottom: 0.5rem;
  padding-right: 1rem;
}

.form-wrapper input,
.form-wrapper select,
.form-wrapper textarea {
  flex: 1 1 100%;
  display: block;
}

.form-row {
  margin-bottom: 1rem;
}

.side-note {
  font-size: 0.9em;
  color: #888;
  display: block;
}

.error-message {
  color: #c33;
  flex: 1 1 100%;
  text-align: right;
}


@media screen and (min-width: 600px) {
  
  .bancell{
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
  }

  .form-wrapper label {
    flex: 1 1 35%;
    display: block;
    text-align: right;
    padding-right: 1rem;
  }
    

  .form-wrapper input,
  .form-wrapper select,
  .form-wrapper textarea,
  .form-wrapper-custom {
    flex: 1 1 65% !important;
    display: block;
  }
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}


.column-diagram {
  max-width: 800px;
}
.column-diagram .columns {
  display: flex;
  border-radius: 10px;
  align-content: space-around;
  align-items: flex-end;
  background-color: rgba(229, 231, 235, 1);
  padding-top: 2rem;
}
.column-diagram .labels {
  display: flex;
  align-content: space-around;
}
.column-diagram .columns > div {
  flex: 1 1 14.28%;
  padding: 0.5rem;
}
.column-diagram .labels > div {
  flex: 1 1 14.28%;
}
.column-diagram .columns > div > div {
  height: 400px;
  background: #3a3aff;
  padding: 0.2rem;
}



.application {
  padding: 1rem;
  margin: 0.5rem;
  box-shadow: 2px 2px 10px -2px rgba(0, 0, 0, 0.2);
  text-align: left;
  position: relative;
}

.application p {
  text-align: left;
}

button.faded {
  background: transparent;
  color: #aaa;
  font-weight: bold;
  padding: 0.5rem;
  border: none;
  box-shadow: none;
}

.halloween-sales {
  background: #414;
}

.halloween-sales h1 {
  font-family: 'Schoolbell', cursive;
  color: #e83;
  font-weight: bold;
  font-size: 6rem;
}
.halloween-sales p {
  font-size: 1.2rem;
  color: white;
  margin-top: 2rem;
}
.halloween-sales a.button {
  background: #e83;
  border: none;
  width: 100%;
}
.halloween-sales a.button:hover {
  background: #d72;
}

@media screen and (min-width: 2000px) {
  html { font-size: 18px; }

  div.container {
    max-width: 1500px;
  }
}


.advent-calendar-wrapper {
  display: flex;
  flex-direction: column;
}

h2.advent-header {
  text-align: left;
  text-transform: uppercase;
  font-size: 2.5rem;
  color: white;
  text-shadow: 0px 0px 3px black, 0px 0px 5px black;
  font-weight: bold;
  padding-left: 1.8rem;
}

.image-div {
  background-size: cover;
  background-position: center;
  padding-top: 3rem;
  order: -1;
  box-shadow: inset 0px -50px 20px -20px rgba(0, 0, 0, 0.5);
}

@media screen and (min-width: 800px) {
  .advent-calendar-wrapper {
    flex-direction: row;
  }

  .ranking-div {
    flex: 1 1 40%;
  }

  .image-div {
    flex: 1 1 60%;
    box-shadow: inset 60px 0px 40px -40px rgba(0, 0, 0, 0.5);
    padding-top: 0rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    order: 2;
  }

  .advent-calendar-wrapper:nth-child(2n) .image-div {
    order: -1;
    box-shadow: inset -60px 0px 40px -40px rgba(0, 0, 0, 0.5);
  }

  .advent-calendar-wrapper:nth-child(2n) h2.advent-header {
    text-align: right;
    padding-right: 1.8rem;
  }
}

.profile-bg-image {
  position: relative;
  background-size: cover;
  background-position: center;
  height: 15rem;
}

.profile-img {
  position: relative;
  margin-top: -5rem;
  border: 2rem solid white;
  border-bottom: none;
}
.pixelated { image-rendering: pixelated; }

@media screen and (min-width: 768px) {

  .profile-bg-image {
    height: 25rem;
  }
}

.news-content-container {
  margin: auto;
  text-align: left;
  max-width: 600px;
  padding: 0 0.5rem;
}
.news-content-image-container {
  max-width: 1000px;
  margin: auto;
}
.news-content-image {
  padding-top: 50%;
}
.author-details div:nth-child(2) {
  flex: 1 1 auto;
}
.author-details img {
  width: 64px;
  height: auto;
  border-radius: 100%;
}

@media screen and (min-width: 768px) {
  .news-content-image {
    padding-top: 35%; 
  }
}

@media screen and (min-width: 1024px) {
  .profile-page-main-content-column {
    display: inline-block;
    vertical-align: top;
    width: 55%;
  }
  .profile-page-side-content-column {
    display: inline-block;
    width: 40%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.motd-preview {
  background: #2a2222;
  color: white;
  padding: 0.5rem;
}

.motd-preview p {
  font-family: 'Minecraft', monospace;
  text-align: left;
  padding: 0rem;
  font-size: 1.5rem;
  line-height: 100%;
}
.motd-preview p span {
  display: inline-block;
}






/*=== TAILWIND.CSS ===*/

.static {position: static;}
.fixed {position: fixed;}
.absolute {position: absolute;}
.relative {position: relative;}
.sticky {position: sticky;}

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

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

.w-full {width: 100%;}
.w-1\/2 {width: 50%;}
.w-1\/3 {width: 33.333333%;}
.w-4\/5	{width: 80%;}

.text-xs {font-size: .75rem;}
.text-sm {font-size: .875rem;}
.text-base {font-size: 1rem;}
.text-lg {font-size: 1.125rem;}
.text-xl {font-size: 1.25rem;}
.text-2xl {font-size: 1.5rem;}
.text-3xl {font-size: 1.875rem;}
.text-4xl {font-size: 2.25rem;}
.text-5xl {font-size: 3rem;}
.text-6xl {font-size: 4rem;}

.font-bold {font-weight: 700;}

.text-left {text-align: left;}
.text-right {text-align: right;}
.uppercase	{text-transform: uppercase;}

.rounded {border-radius: .25rem;}
.rounded-md	{border-radius: 0.375rem;}
.rounded-lg	{border-radius: 0.5rem;}
.rounded-full	{border-radius: 9999px;}

.cursor-pointer {cursor: pointer;}

.flex-initial {flex: 0 1 auto;}
.flex-1 {flex: 1 1 0%;}
.flex-auto {flex: 1 1 auto;}
.flex-none {flex: none;}
.flex-wrap {flex-wrap: wrap;}

.p-1 {padding: 0.25rem;}
.p-2 {padding: 0.5rem;}
.p-3 {padding: 0.75rem;}
.p-4 {padding: 1rem;}

.pl-1 {padding-left: 0.25rem;}
.pl-2 {padding-left: 0.5rem;}
.pl-3 {padding-left: 0.75rem;}
.pl-4 {padding-left: 1rem;}

.pr-1 {padding-right: 0.25rem;}
.pr-2 {padding-right: 0.5rem;}
.pr-3 {padding-right: 0.75rem;}
.pr-4 {padding-right: 1rem;}

.pt-0 {padding-top: 0}
.pt-1 {padding-top: .25rem;}
.pt-2 {padding-top: .5rem;}
.pt-3 {padding-top: .75rem;}
.pt-4 {padding-top: 1rem;}

.pb-1 {padding-bottom: .25rem;}
.pb-2 {padding-bottom: .5rem;}
.pb-3 {padding-bottom: .75rem;}
.pb-4 {padding-bottom: 1rem;}

.pb-20 {padding-bottom: 5rem;}

.m-auto {margin: auto;}

.m-1 {margin: 0.25rem;}
.m-2 {margin: 0.5rem;}
.m-3 {margin: 0.75rem;}
.m-4 {margin: 1rem;}

.mt-1 {margin-top: 0.25rem;}
.mt-2 {margin-top: 0.5rem;}
.mt-3 {margin-top: 0.75rem;}
.mt-4 {margin-top: 1rem;}

.mb-1 {margin-bottom: 0.25rem;}
.mb-2 {margin-bottom: 0.5rem;}
.mb-3 {margin-bottom: 0.75rem;}
.mb-4 {margin-bottom: 1rem;}

.mr-1 {margin-right: 0.25rem;}
.mr-2 {margin-right: 0.5rem;}
.mr-3 {margin-right: 0.75rem;}
.mr-4 {margin-right: 1rem;}

.align-top {vertical-align: top;}

.no-underline	{text-decoration: none;}
.hover\:no-underline:hover {text-decoration: none;}

.shadow	{box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);}
.shadow-md {box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);}
.shadow-lg {box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);}

.text-white {color: #fff;}
.text-black {color: #000;}

.text-gray-400 {color: #cbd5e0;}
.text-gray-500 {color: #a0aec0;}
.text-gray-600 {color: #718096;}
.text-gray-700 {color: #4a5568;}

.text-red-400 {color: #fc8181;}
.text-red-500 {color: #f56565;}
.text-red-600 {color: #e53e3e;}
.text-red-700 {color: #c53030;}

.bg-red-500	{background-color: #f56565;}
.bg-red-600	{background-color: #e53e3e;}
.bg-red-700 {background-color: #c53030;}

.bg-gray-100 {background-color: #f7fafc;}
.bg-gray-200 {background-color: rgba(229, 231, 235, 1);}
.bg-gray-300 {background-color: #e2e8f0;}	
.bg-gray-400 {background-color: #cbd5e0;}

.hover\:bg-red-500:hover	{background-color: #f56565;}
.hover\:bg-red-600:hover	{background-color: #e53e3e;}
.hover\:bg-red-700:hover {background-color: #c53030;}

.hover\:bg-gray-100:hover {background-color: #f7fafc;}
.hover\:bg-gray-200:hover {background-color: #edf2f7;}
.hover\:bg-gray-300:hover {background-color: #e2e8f0;}	
.hover\:bg-gray-400:hover {background-color: #cbd5e0;}

.max-w-xs {max-width: 20rem;}
.max-w-sm {max-width: 24rem;}
.max-w-md {max-width: 28rem;}
.max-w-lg {max-width: 32rem;}
.max-w-xl {max-width: 36rem;}
.max-w-2xl {max-width: 42rem;}
.max-w-3xl {max-width: 48rem;}
.max-w-4xl {max-width: 56rem;}
.max-w-5xl {max-width: 64rem;}
.max-w-6xl {max-width: 72rem;}
.max-w-full {max-width: 100%;}

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


/* Medium (md) */
@media (min-width: 768px) {

  .md\:w-1\/2 {width: 50%;}
  .md\:w-1\/3 {width: 33.333333%;}
  .md\:w-4\/5	{width: 80%;}

  .md\:text-xs {font-size: .75rem;}
  .md\:text-sm {font-size: .875rem;}
  .md\:text-base {font-size: 1rem;}
  .md\:text-lg {font-size: 1.125rem;}
  .md\:text-xl {font-size: 1.25rem;border-radius: 10px;}
  .md\:text-2xl {font-size: 1.5rem;}

}

/* Large (lg) */
@media (min-width: 1024px) {

  .lg\:w-1\/2 {width: 50%;}
  .lg\:w-1\/3 {width: 33.333333%;}
  .lg\:w-4\/5	{width: 80%;}
  .lg\:w-full {width: 100%;}

  .lg\:p-4 {padding: 1rem;}

}

/* ===  Scroll FX Styles  === */

.appear-from-right {
  transform: translateX(20%);
  transition: transform 2s;
}
.appear-from-right.in-view {
  transform: translateX(0);
}
.appear-from-bottom {
  transform: translateY(100%);
  transition: transform 2s;
}
.appear-from-bottom.in-view {
  transform: translateY(0);
}
.fade-in {
  opacity: 0;
  transition: opacity 2s;
}
.fade-in.in-view {
  opacity: 1;
}
.appear-from-right.fade-in,
.appear-from-bottom.fade-in {
  transition: opacity 2s, transform 2s;
}
@media screen and (max-width: 600px) {
  .appear-from-right { transform: translateX(0); }
  .appear-from-bottom { transform: translateY(0); }
  .fade-in { opacity: 1; }
  .bantablemargin { margin: 10px; }
}

.role-toggle {
  color: #240063;
  padding: 2px 7px;
  font-weight: bold;
  cursor: pointer;
}

.ban-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch;}

.additional-roles {
  display: none;
  position: absolute;
  background: white;
  box-shadow: 0px 3px 8px -2px rgba(0, 0, 0, 0.5);
  padding: 6px 12px;
  border-radius: 4px;
  transition: opacity 0.15s, transform 0.15s;
}


/* =========== */ 

.voters-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.voterlist-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 10px;
  padding: 20px;
  width: 300px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.close-btn-voterlist {
  margin-top: 10px;
  padding: 10px 20px;
  border: none;
  background: #ff5c5c;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
}

.voterlist {
  margin: 10px 0;
  text-align: left;
}

.vote-for {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 5px;
}

.vote-against {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 5px;
}

.no-vote {
  background-color: #dadada;
  color: #2d2d2d;
  border: 1px solid #656565;
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 5px;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.table thead {
  background-color: #f5f5f5;
}

.table th, 
.table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.table th {
  font-weight: 600;
  color: #333;
}

.table tbody tr {
  transition: background-color 0.2s ease;
}

.table tbody tr:hover {
  background-color: #f9f9f9;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

@media screen and (max-width: 768px) {
  .table thead {
      display: none;
  }
  
  .table, 
  .table tbody, 
  .table tr, 
  .table td {
      display: block;
      width: 100%;
  }
  
  .table tr {
      margin-bottom: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
  }
  
  .table td {
      display: flex;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;
  }
  
  .table td::before {
      content: attr(data-label);
      font-weight: 600;
      width: 120px;
      min-width: 120px;
      color: #333;
      padding-right: 15px;
  }
  
  .table td:last-child {
      border-bottom: none;
  }
  
  .table td input[type="text"] {
      flex: 1;
      width: 100%;
      margin-left: auto;
  }
  
  .table td .btn {
      margin-left: auto;
  }
}

.news-content-container img {
  max-width: 100%;
  height: auto;
}