@import 'loader.css';
@import 'progress.css';
@import 'talk.css';
@import url('https://fonts.cdnfonts.com/css/linux-libertine-o');
@import url('https://fonts.googleapis.com/css2?family=Vesper+Libre:wght@400;500;700&display=swap');


 * {   font-family: 'Linux Libertine O', sans-serif;/*font-size:24px;*/}
/** {font-size:+24px;}*/
.blodd {  font-family: 'Vesper Libre', serif;}
@media screen and (max-width: 1900px){
  html{
      width: 1900px;
      overflow: auto;
  }
}
@media screen and (max-height: 1060px){
  html{
      height:  1060px;
      overflow: auto;
  }
}
@media print {
			@page {
 
  size: landscape;     /*margin: 20mm 25mm 20mm 25mm; */
  margin:10mm;
}
	 body {
    visibility: hidden;
	     width: 21cm;
        height: 29.7cm;
     
  }
    #teamssummary {
top:0;
z-index:+1;
		 visibility: visible;
        background-color: white;
 
        position: fixed;
 
         font-size:20px;
        line-height: 18px;
		color:black;
    }
} 
 
@font-face {
    font-family: 'Exocet Bold';
         src: local("exocetB.ttf"), url("exocetB.ttf") format("TrueType");
}  
@font-face {
    font-family: 'Exocet';
          src: local("../exocetR.ttf"), url("../exocetR.ttf") format("TrueType");
}  
@font-face, -oldl {
    font-family: 'Old London';
         src: local("OldLondon.ttf"), url("OldLondon.ttf") format("TrueType");
}  
span:hover   ~ img.hvimg {display:block; flaot:right;}
div { font-size:24px;}
body {
/*background-image: url("../imgs/dohaerisletters2.png");
    background-repeat: no-repeat;
	background-size:contain ;*/
font-family: 'Linux Libertine O', sans-serif;
font-size:24px;
  /*background-image: url("../imgs/bricks.png");
    background-repeat: repeat-x;
 
   background-position: top; 
   background-size:auto ;
 */
     background-image: url('../sumpf2.jpg');
    background-size: 100%;
    background-position: top; 
    background-repeat: no-repeat;
 
  color:rgb(255, 255, 255); /*Lavender #ECDF90*/
  margin:0; 
 font-size:20px;
  z-index:-1;
  position:absolute;
    background-position:bottom middle;
      font-family: 'Exocet';
      src: local("exocetR.ttf"), url("exocetR.ttf") format("TrueType"); /* */
     background-color:rgb(5,2,3); 
      padding: 0px;
      text-decoration:none;
      font-color:white;
width:100%;
-ms-user-select: None;
-webkit-user-select: None;
-moz-user-select: None;
-o-user-select: None;
 height:100%; 
}
 .invert{filter: invert(1);}
h1 {   
		 font-size:54px;font-weight:bold;line-height:88%;}
	.menu {z-index:;max-width:1097px;min-width:1097px; display:block;margin-left: auto;margin-right: auto;/*margin-top:320px; do dynamically*/line-height:; text-align:center;  width: 50%;} 	 
.cntbox{z-index:-2;max-width:1097px;min-width:1097px; display:block;margin: auto; text-align:center;align-content:center;  width: 50%;left:50%;position:absolute;
  -webkit-transform: translateX(-50%)  ;
    -moz-transform: translateX(-50%) ;
    transform: translateX(-50%) ;} 

/**/
.divx {
  border: 10px solid;
  border-image: url('data:image/svg+xml,<svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><rect width="30" height="30" rx="10" fill="red"/></svg>');
  border-image-slice: 10;
}
.wiz {color:#43ACE8;display:inline-block;}
.dh {color:#F05323;display:inline-block;}
.barb {color:#B49100;display:inline-block;}
.crusi {color:#6FBF4B;display:inline-block;}
.tb {color:#B28F75;display:inline-block;}
.monk {color:#FF00F9;display:inline-block;}/*#502D84*/
.bk {color:#990D33;display:inline-block;}
.none, .none div, div .none {display:inline-block;font-weight:bold; padding:1px;text-shadow:0px 0px 2px yellow;}
.none:before {
    content: "\00a0";
}
input {
  all: unset;
}
input[type="text"], input[type="password"]  {max-width:56px;background-color:#33373a;border:0;color:#33e1ed;font-family: 'Exocet';padding:8px;text-align: center;font-size:32px;}
input[type="text"]:focus, input[type="password"]:focus {background-color:#2d2d44;box-shadow:0px 0px 6px;text-align: center;font-size:32px;}
td[contenteditable="true"]{background-color:#33373a;border:0;color:#33e1ed;font-family: 'Exocet';}
.glass-container {
    position: relative;
    width: fit-content;
    height: fit-content;
display:inline-block;
}


.svg-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* Ã°Å¸â€Â¹ SVG ÃƒÂ¼ber Button */
    pointer-events: none; /* Klicks blockieren nicht */
    opacity: 0;
  transition: opacity 0.75s ease;
 z-index:2;
mix-blend-mode:lighten;
border-radius:5px;
}
.glass{

	/* background styles */
	position: relative;
	display: inline-block;
	padding: 15px 25px;
/*	background-color: green;*/
 /*for compatibility with older browsers*/
/*	background-image: linear-gradient(#1e1e2c,#2d2d44);*/
font-weight: bold;
/*  font-family: 'EB Garamond', serif;*/
  background-image: url('../diabloiv/dev/cropped_button.png');
background-size: 99% 99%; /*cover*/
  background-repeat: no-repeat;
  background-position:center;

	/* text styles */
	text-decoration: none;
	/*color: #33e1ed;*/
color: #d6c8aa;
	font-size: 25px;
/*	font-family: sans-serif;*/
	font-weight: 100;
	border-radius: 3px;
box-shadow: 0px 1px 4px -2px #333;
/*
text-shadow: 0px -1px 3px #000000;*/
text-shadow: 1px 1px 2px #000;
font-weight:bold;
border-radius:5px;
 /*  box-shadow: inset 0.2em 0.2em 0.2em 0 rgba(255,255,255,0.5), inset -0.2em -0.2em 0.2em 0 rgba(0,0,0,0.5);*/
    /* box-shadow:
        inset 0 0 2px 0 rgba(255,255,255,.4),
        inset 0 0 3px 0 rgba(0,0,0,.4),
        inset 0 0 3px 5px rgba(0,0,0,.05),
        2px 2px 4px 0 rgba(0,0,0,.25);*/
}

/*.glass:after{
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.2));
}*/
.glass:hover, .active{
	/*background: linear-gradient(#073,#0fa);*/
filter:drop-shadow(0px 0px 4px #33E1ED);
/*background:#414163;*/
	animation: innerpulse 1.5s infinite;
border-radius:5px;
/*mix-blend-mode:multiply;*/
}

/*.active {background:#414163;}*/
#main-notice {border-radius:16px;max-width:720px; min-height: 244px;position:absolute; margin-top:4px;padding:24px;background-color:#2d2d44;vertical-align:top;display:table-cell;   background:url(box.png), no-repeat;background-size:cover;color:black;
  -webkit-transform: translateX(-50%)  ;
    -moz-transform: translateX(-50%) ;
    transform: translateX(-50%) ;left: 50%;
		animation: innerscroll 1.5s infinite ;
  position: absolute;}  
#sec-notice {z-index:-1;border-radius:16px;max-width:1024;  margin:4px;margin-top:0;padding:4px;background-color:#2d2d44;vertical-align:top;display:table-cell;text-align: top;margin: auto;width:50%;}
.btnicon {}
.svg {max-width:32px;display:inline-block;}
.cloader {
  border: 8px solid transparent; /* Light grey */
  border-top: 4px solid #33e1ed; /* Blue */
  border-radius: 50%;
  width: 32px;
  height: 32px;
display:inline-block;
padding-left:2px;

}
 

@keyframes Xinnerpulse {
  50% {
box-shadow: inset 1px 1px 20px  #33E1ED;
/*mix-blend-mode:lighten;*-index:2;*/
}
}

@keyframes cspin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
#loadings {display:inline;
animation: blinker 1s linear infinite;
color:#33e1ed;
font-size:24px;
font-weight:bold;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
 .footer {position:fixed;bottom:2px;font-size:16px;}
 .svg {}
 .mnuimg {width:24px;float:left;padding:4px;margin-top: -4px;}
 
    .center, #grayout {
            display: flex;
            justify-content: center;
  
        }
		
		
li.tooltip, div.tooltip, tr.tooltip
{
display:inline-block;

  position:relative ;
  text-decoration: none;
}
	
li.tooltip span, div.tooltip span, tr.tooltip span
{

  display: none;
  color:#F5FFFA;
  position: absolute;
  
}

li.tooltip:hover span, div.tooltip:hover span, .tooltip:hover span , .tooltip:hover div 
{
margin-top:-32px;
  opacity:.8;
  position: absolute;
  display: block;
  /*top: 1.5em;
  left: 30em;*/
  width:120px;
  border: 1px solid #F5FFFA;
  background-color:gray;
  padding: 0.2em;
  z-index:+3;
  -moz-border-radius:3px;
  border-radius:3px;/**/
  box-shadow:2px 2px 2px #001600;
}
.tblx {min-width:1092px; border: 0px solid black;border-spacing: 0;}
.tblx tr:first-child td{background-color:#414163;vertical-align:center;display:table-cell;text-align: center; padding:4px;font-weight:bold;}

.bgchecked {
animation: fadeli 0.3s forwards;
  animation-duration: 0.3s;
/*  animation-play-state: paused;*/
opacity:0;
}

@keyframes fadeli {
  from { opacity: 0;   }
  to { opacity: 1;   }
}
/*
 .scrolli  {
	 top:0;
	 width:100%;height:100%; position:absolute;
mask-type:luminance ;
webkit-mask-type:luminance ;
	 opacity:.7;	 
 /*	   background: url("seamless.png");
    background-repeat: repeat;
	background-size:contain;
    animation: scroll-anim  40s infinite linear;
background-position: 0%;*/
/*
   mix-blend-mode:normal;
  -webkit-mask-image: url("../imgs/dohaerisletters2layermask.png");
  mask-image: url("../imgs/dohaerisletters2layermask.png"); 
 z-index:+5;
 

}
 
@keyframes scroll-anim {
    from {
        background-position: 0%;
    }
    
    to {
        background-position:  100%;
    }
}
 /*
.scrolli  { position: absolute;  width:100%;  z-index:-1; }
 *//*
  .layh { 
  position: absolute;  
  
 mix-blend-mode:normal;
 opacity:.4;
 top:0;/*
   -webkit-mask-image: url("../imgs/dohaerisletters2layermask.png");
  mask-image: url("../imgs/dohaerisletters2layermask.png");   */
  /*
 
  }
    .layhx { width:100%; 
  position: absolute; 

 
  z-index:3;
 
  }
   #svgId {z-index:-1;overflow:hidden;right:0;position:absolute;transform-origin: 0 0;}
  .imgl { }
  .scrollcont { top:0;left:-24px;/*00*/
  /*
  position: absolute;}
  .busybox {z-index:1;position:absolute; mix-blend-mode:multiply;opacity:.4; top:0;left:0;}
  .maskme {mask-image: url("../imgs/dohaerisletters2layermask.png"); top:0;left:0;-webkit-mask-image: url("../imgs/dohaerisletters2layermask.png"); top:0;left:0;}
  .bg{
  top:0;left:0;
  position: absolute; opacity:.3; 
  z-index: +1;
  opacity:.8;
  mix-blend-mode:overlay darken;
  background: url("seamlessx.png");
  animation-name: MOVE-BG;
  animation-duration: 33s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

filter:blur(0px);
}
@keyframes MOVE-BG {
   from {
    background-position: 0%;
   }
   to { 
   background-position: -100%;
   }
}
@keyframes fadeli {
  from { opacity: 0;   left:+245px;margin-left:+245px;}
  to { opacity: 1;   left:0px;margin-left:0px; }
}
*/
 .scrolli  {
	 top:0;
	 width:100%;height:100%; position:absolute;
	 webkit-mask-type:luminance ;
mask-type:luminance ;
	 opacity:.7;	 
 /*	   background: url("seamless3.png");
    background-repeat: repeat;
	background-size:contain;
    animation: scroll-anim  40s infinite linear;
background-position: 0%;*/
   mix-blend-mode:normal;
  -webkit-mask-image: url("../imgs/indolettersmask.png");
  mask-image: url("../imgs/indolettersmask.png"); */
 z-index:+5;
 

}
 
@keyframes scroll-anim {
    from {
        background-position: 0%;
    }
    
    to {
        background-position:  100%;
    }
}
 /*
.scrolli  { position: absolute;  width:100%;  z-index:-1; }
 */
  .layh { 
  position: absolute;  
  
 mix-blend-mode:lighten;
 opacity:.4;
 top:0;/*
   -webkit-mask-image: url("../imgs/dohaerisletters2layermask.png");
  mask-image: url("../imgs/dohaerisletters2layermask.png");   */
 
  }
    .layhx { width:100%; 
  position: absolute; 

 
  z-index:3;
 
  }
  .imgl { mix-blend-mode:lighten; }
  .scrollcont { top:8px; 
  position: absolute;}
  .busybox {z-index:1;position:absolute; mix-blend-mode: lighten; opacity:.8; top:0;left:0;}
  .maskme {-webkit-mask-image: url("../imgs/indolettersmask.png");mask-image: url("../imgs/indolettersmask.png"); top:0;left:0;}
  .bg{
  top:0;left:0;
  position: absolute; opacity:.3; 
  z-index: +1;
  opacity:.2;
  mix-blend-mode:lighten multiply;
  background: url("seamless.png");
  -webkit-animation-name: MOVE-BG;
          animation-name: MOVE-BG;
  -webkit-animation-duration: 33s;
          animation-duration: 33s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;

filter:blur(4px);
}
@keyframes MOVE-BG {
   from {
    background-position: 0%;
   }
   to { 
   background-position: -100%;
   }
}
  .imglb{
  top:-16px;left:-48px;
  position: absolute; ; 
  z-index: +1;
  opacity:1;
  mix-blend-mode:overlay darken;overflow:hidden;
  }
 .teamssummary table tr td.cff {background-color:#414163;text-align: center;color: #33e1ed;text-align: center;}
 .teamssummary { background:black;}
  .teamssummary table tr td  {background: -webkit-linear-gradient(left, rgba(65,65,99,1), rgba(255,0,0,0));text-align: center; transition:all .5s linear;}
  .editMode {border-bottom:thin solid red;background:red;}
  .hglt {color:#33e1ed;}
  .tractive:hover {background: -webkit-linear-gradient(left, rgba(65,65,99,1), rgba(255,0,0,0));transition:all .5s linear;}
  .hidden {
    opacity:0;
}
.hghltsrt {color:#33e1ed;}
.block {
 background:#4C4C4C;
}
a {color: #33e1ed;}
 .tractive:hover   #del , .tractive:hover >  #del {display:block;}
 pre, .pre {font-family: monospace;max-width:1024px;color: #33e1ed;white-space: pre-wrap;font-size:16px;padding:4px;margin:4px;border:thin solid #2d2d44;border-radius:24px;}
 .hglt {color: #33e1ed;font-weight:bold;}
 #clipboard, pre {
	 -ms-user-select: text;
-webkit-user-select: text;
-moz-user-select: text;
-o-user-select: text;
  
 }
 
	#oben, #unten {
	position:fixed;
		left: 0; right: 0;
		height: 100px;
		}
		#oben { top: 0;
		 
		 z-index:+1;
		 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b8860b+0,000000+99&amp;0.65+0,0+98 */

/* IE9 SVG, needs conditional override of 'filter' to 'none' */

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I4ODYwYiIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iIzAyMDEwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

background: -moz-linear-gradient(top,  rgba(5,2,3,0.99) 0%, rgba(2,1,0,0) 98%, rgba(5,2,3,0) 99%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(5,2,3,0.99)), color-stop(98%,rgba(2,1,0,0)), color-stop(99%,rgba(5,2,3,0))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  rgba(5,2,3,0.99) 0%,rgba(2,1,0,0) 98%,rgba(5,2,3,0) 99%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  rgba(5,2,3,0.99) 0%,rgba(2,1,0,0) 98%,rgba(5,2,3,0) 99%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  rgba(5,2,3,0.99) 0%,rgba(2,1,0,0) 98%,rgba(5,2,3,0) 99%); /* IE10+ */

background: linear-gradient(to bottom,  rgba(5,2,3,0.99) 0%,rgba(2,1,0,0) 98%,rgba(5,2,3,0) 99%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6b8860b', endColorstr='#05020300',GradientType=0 ); /* IE6-8 */


 	  
		}
		#unten { bottom: 0; 
		
		  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#050203+0,b8860b+100&amp;0+0,0.65+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiODg2MGIiIHN0b3Atb3BhY2l0eT0iMC42NSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(5,2,3,0) 0%, rgba(5,2,3,0.99) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(5,2,3,0)), color-stop(100%,rgba(5,2,3,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(5,2,3,0) 0%,rgba(5,2,3,0.99) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(5,2,3,0) 0%,rgba(5,2,3,0.99) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(5,2,3,0) 0%,rgba(5,2,3,0.99) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(5,2,3,0) 0%,rgba(5,2,3,0.99) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05020300', endColorstr='#a6b8860b',GradientType=0 ); /* IE6-8 */

		}
