/*@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;700&display=swap');*/

/* work-sans-regular - latin 
@font-face {
  font-display: swap; 
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/work-sans-v19-latin-regular.woff2') format('woff2'); 
}*/
/* work-sans-700 - latin 
@font-face {
  font-display: swap; 
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/work-sans-v19-latin-700.woff2') format('woff2'); 
}*/

@font-face {
    font-family: Readex Pro;
    font-weight: 300;
    src: url(fonts/readex/static/ReadexPro-Light.ttf)
}

@font-face {
    font-family: Readex Pro;
    font-weight: 300;
    src: url(fonts/readex/static/ReadexPro-ExtraLight.ttf)
}

@font-face {
    font-family: Readex Pro;
    font-weight: 500;
    src: url(fonts/readex/static/ReadexPro-Medium.ttf)
}

@font-face {
    font-family: Readex Pro;
    font-weight: 600;
    src: url(fonts/readex/static/ReadexPro-SemiBold.ttf)
}

@font-face {
    font-family: Readex Pro;
    font-weight: 700;
    src: url(fonts/readex/static/ReadexPro-Bold.ttf)
}

.thread-body {
    font-family: "Readex Pro",Arial,sans-serif !important;
}

h1 {
    font-family: "Readex Pro",Arial,sans-serif !important;
}

.blue.button, .blue.button:visited, .green.button, .green.button:visited {
    font-family: "Readex Pro",Arial,sans-serif !important;
}

@media (min-width: 768px) {
    #example_filter label {
		text-align: right;
	}
}

.input-group-sm>.input-group-append>select.btn:not([size]):not([multiple]), .input-group-sm>.input-group-append>select.input-group-text:not([size]):not([multiple]), .input-group-sm>.input-group-prepend>select.btn:not([size]):not([multiple]), .input-group-sm>.input-group-prepend>select.input-group-text:not([size]):not([multiple]), .input-group-sm>select.form-control:not([size]):not([multiple]), select.form-control-sm:not([size]):not([multiple]) {
    height: calc(1.8125rem + 4px);
}


table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
    top: auto;
}

tfoot,thead {
    background-color: #164194;
    color: #fff;
    font-family: Poppins,sans-serif
}

.link,a {
    border-bottom: none;
    color: #00B0FF;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .4s ease,color .4s ease,border-color .4s ease
}

.link:active,.link:focus,.link:hover,a:active,a:focus,a:hover {
    border-bottom: solid;
    /*border-bottom-color: #00B0FF;*/
    color: #00B0FF
}

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #3c3c3b;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #3c3c3b;
    border-color: #3c3c3b;
}

.btn, button {
    background-color: #00B0FF;
 }


nav {
    
    
}

nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    }
    
nav ul li {
    display:inline-block;
    
    }

nav a {
    display:block;
    padding-right: 5rem; 
    color:#FFF;
    font-size:20px;
    
    text-decoration:none !important;
}

nav a:hover { 
    
}

/* Hide Dropdowns by Default */
nav ul ul {
    display: none;
    position: absolute; 
    /*top: 60px; /* the height of the main nav */
}
    
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
    display:inherit;
}
    
/* Fisrt Tier Dropdown */
nav ul ul li {
    width:auto;
    float:none;
    display:list-item;
    position: relative;
}


/* Second, Third and more Tiers */
nav ul ul ul li {
    position: relative;
    top:-60px; 
    left:170px;
}

    
/* Change this in order to change the Dropdown symbol 
li > a:after { content:  ' +'; }
li > a:only-child:after { content: ''; }
*/

h1 {
    font-size: 3rem;
}

#spielelink:hover { 
    color: #FFBD02 !important;
    text-decoration: none !important;
    border: 0;
}

#newslink:hover { 
    color: #40CBCE !important;
    text-decoration: none !important;
}

#eventslink:hover { 
    color: #481F72 !important;
    text-decoration: none !important;
}

#communitylink:hover { 
    color: #FF2E00 !important;
    text-decoration: none !important;
}

.supportlink:hover { 
    color: #0227B7 !important;
    text-decoration: none !important;
}

.logo__large {
    /*display: none;
    width: 200px;*/
    width: 9.2rem;
    margin-left: 5rem;
    margin-top: 0.3rem;
}

#footer {
    color: rgba(255, 255, 255);
    background-color: rgba(0, 0, 0);
    height: 295px;
    padding: 2rem;
   
    width: -webkit-fill-available;
}

#footer a {
    color: rgba(255, 255, 255);
    text-decoration: none;
    border: none;
}

@media (min-width: 768px) {
    #mobilemenu {
        display: none;
    }

  .header {
      padding-left: 1rem;
  }
}

.logo__default {
    display: block;
    max-width: 140px;
    width: 140px;
}

@media (max-width: 767px) {
    .mobilemenuitem {
        border: none;
        border-top: 2px solid lightgrey;
        display: inherit;
    }

    .mobilemenulink {
        border: none;
    }

    #mobilemenu {
        z-index: 5000;
    }

    #largemenu {
        display: none;
    }

    .header__logo {
        margin: auto;
        width: 0;
    }

    .logo__default {
        display: block;
        max-width: 120px;
        align-self: center;
        width: 120px;
    }


    #menuToggle
    {
      display: block;
      position: relative;
      top: 4.5rem;
      left: 3.5rem;
      
      z-index: 5000;
      
      -webkit-user-select: none;
      user-select: none;
    }

    #menuToggle a
    {
      text-decoration: none;
      color: #232323;
      
      transition: color 0.3s ease;
    }

    #menuToggle a:hover
    {
      
    }


    #menuToggle input
    {
      display: block;
      width: 40px;
      height: 32px;
      position: absolute;
      top: -7px;
      left: -5px;
      
      cursor: pointer;
      
      opacity: 0; /* hide this */
      z-index: 2; /* and place it over the hamburger */
      
      -webkit-touch-callout: none;
    }

    /*
     * Just a quick hamburger
     */
    #menuToggle span
    {
      display: block;
      width: 33px;
      height: 4px;
      margin-bottom: 4px;
      position: relative;
      
      background: black;
      border-radius: 3px;
      
      z-index: 1;
      
      transform-origin: 4px 0px;
      
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
    }

    #menuToggle span:first-child
    {
      transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2)
    {
      transform-origin: 0% 100%;
    }

    /* 
     * Transform all the slices of hamburger
     * into a crossmark.
     */
    #menuToggle input:checked ~ span
    {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: #232323;
    }

    /*
     * But let's hide the middle one.
     */
    #menuToggle input:checked ~ span:nth-last-child(3)
    {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
     * Ohyeah and the last one should go the other direction
     */
    #menuToggle input:checked ~ span:nth-last-child(2)
    {
      transform: rotate(-45deg) translate(0, -1px);
    }

    /*
     * Make this absolute positioned
     * at the top left of the screen
     */
    #menu
    {
      position: fixed;
      margin: -100px 0 0 -50px;
      padding: 50px;
      padding-top: 125px;
      
      background: white;
      list-style-type: none;
      -webkit-font-smoothing: antialiased;
      /* to stop flickering of text in safari */
      
      transform-origin: 0% 0%;
      transform: translate(-100%, 0);
      
      transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

        height: -webkit-fill-available;
        width: -webkit-fill-available;
    }

    #menu li
    {
      padding: 10px 0;
      font-size: 22px;
    }

    /*
     * And let's slide it in from the left
     */
    #menuToggle input:checked ~ ul
    {
      transform: none;
    }

    #footer {
      /* width: 145%; */
    }
}


#rightbox {
    margin-bottom: 2rem;
    float: right;
    font-weight: 700;
    text-align: end;
}

.column{
    float: left;
    margin-right: 2rem;
}
.content{
    
}
.content.one{
    display: none;
}
.content.two{
    margin-bottom: 0.8rem;
    text-align: left;    
}
.content.two.alt{
  text-align: left;
}

.content.two.alt a {
    font-size: 16px;
    font-weight: 300 !important;
}

.contenttwolink {
    margin-right: 0.9rem;
}

#socialmedialinks {
    display: flex;
    margin-top: 1rem;
}

.smlink {
    margin-right: 1rem;
}

#leftbox {
    font-size: 16px;
}

@media (min-width: 768px) {
    .content.one{
        display: inherit;
    }
    #footer {
        color: rgba(255, 255, 255);
        background-color: rgba(0, 0, 0);
        height: 232px;
        position: relative;
        bottom: 0;
        width: -webkit-fill-available;
    }

    #leftbox {
        font-size: 16px;
        margin: 2.5rem 3rem;
    }

}

.table td, .table th {
    vertical-align: middle !important;
}

.link--plain {
    border-bottom: 0 !important;
    color: inherit;
    font-weight: 700;
    font-size: 24px;
    line-height: 2rem;

}

.mobilemenulink {
  border-bottom: 0 !important;
}

html {
  margin: 0 !important;
  padding: 0 !important;
  /*width: fit-content !important;*/
  font-size: 100% !important;
  overflow-x: hidden !important;
  
}

body {
  font-family: "Readex Pro",Arial,sans-serif;
}

h1,h2,h3,h4,h5,h6 {
    font-family: "Readex Pro",Arial,sans-serif;
}

#container {
  width: auto !important;
}

.header__content {
  width: auto !important;
}

.thread-body div, .thread-body p, .thread-body ul, .thread-body ol, .thread-body table, .thread-body dl, .thread-body blockquote, .thread-body pre {
      font-size: x-large;
       line-height: inherit;
}


@media (max-width: 767px) {
  .thread-body div, .thread-body p, .thread-body ul, .thread-body ol, .thread-body table, .thread-body dl, .thread-body blockquote, .thread-body pre {
      font-size: x-large;
      line-height: inherit;
  }

  .green.button {
    margin-left: 0.2em;
  }
}

.green.button, .green.button:visited {
    background-color: oklch(79.5% .184 86.047);
}

.green.button:hover {
    background-color: oklch(79.5% .184 86.047);
}

.blue.button, .blue.button:visited {
    background-color: oklch(79.5% .184 86.047);
}

.blue.button:hover {
    background-color: oklch(79.5% .184 86.047);
}

.main-content {
    width: auto !important;
    max-width: 565px !important;
}

body {
    box-sizing: content-box !important;
}

#footer {
    height: max-content !important;
    margin-top: auto !important;
}


*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    /* --tw-pan-x: var(--tw-empty); */
    /* --tw-pan-y: var(--tw-empty); */
    /* --tw-pinch-zoom: var(--tw-empty); */
    --tw-scroll-snap-strictness: proximity;
    /* --tw-gradient-from-position: var(--tw-empty); */
    /* --tw-gradient-via-position: var(--tw-empty); */
    --tw-gradient-to-position: var(--tw-empty, /*!*/ /*!*/);
    --tw-ordinal: var(--tw-empty, /*!*/ /*!*/);
    --tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/);
    --tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/);
    --tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/);
    --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-blur: var(--tw-empty, /*!*/ /*!*/);
    --tw-brightness: var(--tw-empty, /*!*/ /*!*/);
    --tw-contrast: var(--tw-empty, /*!*/ /*!*/);
    --tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
    --tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
    --tw-invert: var(--tw-empty, /*!*/ /*!*/);
    --tw-saturate: var(--tw-empty, /*!*/ /*!*/);
    --tw-sepia: var(--tw-empty, /*!*/ /*!*/);
    --tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
    /* --tw-backdrop-blur: var(--tw-empty); */
    --tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
    --tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
    --tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
    --tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
    --tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
    --tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
    --tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
    --tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
    --tw-contain-size: var(--tw-empty, /*!*/ /*!*/);
    --tw-contain-layout: var(--tw-empty, /*!*/ /*!*/);
    --tw-contain-paint: var(--tw-empty, /*!*/ /*!*/);
    --tw-contain-style: var(--tw-empty, /*!*/ /*!*/);
}

.button, button {
    background-color: oklch(79.5% .184 86.047);
 }


.button, .button:visited {
    /* 
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 18px 24px;
    gap: 8px;
    width: 142px;
    height: 48px;
    background: #FFBC00;
    border: 2px solid #18181B;
    box-shadow: 2px 4px 0px #000000;
    border-radius: 56px;
    flex: none;
    order: 1;
    flex-grow: 0;
    */
    border: solid;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    -moz-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    border-radius: 3.5rem;
    border-width: 2px;
    --tw-border-opacity: 1;
    border-color: rgb(23 23 23 / var(--tw-border-opacity, 1));
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-weight: 700;
    --tw-shadow: 0 5px;
    --tw-shadow-colored: 0 5px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    --tw-border-opacity: 1;
    border-color: rgb(23 23 23 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 188 0 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity, 1));
    font-size: 0.75rem;
    line-height: 1rem;

 }

.button:hover {
    color:black;
    /*
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    */
    --tw-translate-y: 0.25rem;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    -moz-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    -ms-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
}

.thread-body a:not(.button){
    color: #00B0FF !important;
    text-decoration: none;
}

.thread-body:hover a:not(.button):hover {
    color: #00B0FF !important;
    text-decoration: none;
}