/* version vom 2021.04.15 */

.modal {
    font-size: 1.0rem;
    }

hr {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border: 0;
    border-top: 1px solid #eee;
}

hr.sub-hr {
    border-top: 1px solid #eeeeee20;
}

div#popup {
    padding: 0.5em;
}


.button {
    background-color: lightgray;
    color: black;
    border-width: 1px;
    border-style: solid;
    border-color: lightgray;
    border-radius: 4px;
    padding: 2px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    /*margin: 3px 1% 3px 1%;*/
    cursor: pointer;
    /*font-size: 1em;*/
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    min-width: 4em;
}
.button:hover {
    background-color: #555555;
    color: white;
}

input[type=button]:disabled {
    background: DimGray;
    border-color: #ababab;
    color: #ababab;
}

input[type=button]:hover:disabled {
    background-color: DimGray;
}

#submit.button {
    float: right;
 }

#submit.button:hover {
    background-color: DarkGreen;
    color: white;
    border-width: 1px;
    border-style: solid;
    border-color: white;
}

#cancel.button {
    float: left;
}

#cancel.button:hover {
    background-color: DarkRed;
    color: white;
    border-width: 1px;
    border-style: solid;
    border-color: white;
}
.cancelBntx{
    float: right;
    background-color: #fff0;
    color: #eee;
    font-size: 1em;
    padding: 0.25em 0.2em 0.15em 0.2em;
    margin: 0px 0px 0px 10px;
    font-size: 1.0em;
    line-height: 0.8em;
    border: 1px solid #eeeeee40;
    border-radius: 0.2em;
}
.cancelBntx:hover{
   
    background-color: #eee;
    color: #000;
    border: 1px solid #444;
}


#btnSpawn.button {
    width: 4em;
}

#btnSpawn.button:hover {
    background-color: DarkGreen;
    color: white;
    border-width: 1px;
    border-style: solid;
    border-color: white;
}

#btnEnd.button {
    width: 4em;
    margin: 0em 0.9em 0em 0em;
}
#btnEnd.button:hover {
    background-color: DarkBlue;
    color: white;
    border-width: 1px;
    border-style: solid;
    border-color: white;
}
.address{
    font-size: 0.7em;
    color: gray ;
    margin: 0 0 0 0;
    white-space: normal;
}

.bottompanel_content .address{
    color: lightgray ;
}

#myCount{

}

#gymInfo{

    clear: both;
    padding: 4px 0px 0px 0px;
}

.raidpoints{
    font-size: 0.7em;
    color: gray ;
    margin: 0.2em 0 0 0;
    padding: 0.2em 0 0 0;
    border-style: dotted;
    border-width: 1px 0px 0px 0px;
}

.bottompanel_content .raidpoints{
    color: lightgray;
}

 
p.date_small{
   font-size: 0.7em;
    /* font-weight: normal; */
    color: gray;
    margin: 0px 0px 0px 0px;
    /* width: 4em;*/
}
td.date_small{
   text-align: center;
}

td.date_small > img {
    width: 3em;
    margin: 0em 0.5em;
    filter: drop-shadow(0px 0px 1px black);
}


.bottompanel_content p.date_small{
    color: lightgray ;
}

.arena_name{
    font-size: 1em;
    word-break: break-word;
    margin: 0.2em 0 0.5em 0;
    min-height:1.6em;
    min-width: 150px;
    white-space: normal;
}

.arena_name_ex-raid_confirmed{
    font-size: 1em;
    word-break: break-word;
    background-image: url(../../images/ex-raid_confirmed.png);
    background-repeat: no-repeat;
    background-size: 1.6em;
    min-width: 150px;
    white-space: normal;
    /*background-position: 0;*/
    min-height:1.6em;  
    margin: 0.4em 0em 0.4em 0em;
    padding: 0em 0em 0em 1.7em;
}

.addEXRaidIcon {
    font-size: 1em;
    word-break: break-all;
    background-image: url(../../images/ex-raid_confirmed.png);
    background-repeat: no-repeat;
    background-size: 1.6em;
    background-position: 0;
    min-height: 1.6em;
    margin: 0.4em 0em 0.4em 0em;
    padding: 0em 0em 0em 1.7em;
}

.arena_name_ex-raid_option{
    font-size: 1em;
    word-break: break-all;
    background-image: url(../../images/ex-raid_option.png);
    background-repeat: no-repeat;
    background-size: 1.6em;
    min-width: 150px;
    white-space: normal;
    background-position: 0;
    min-height:1.6em;  
    margin: 0.4em 0em 0.4em 0em;
    padding: 0em 0em 0em 1.7em;
}

.general_hidden {
    height: 0; /*100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8); /*#e7e7e7; /* Black*/
    overflow-x: auto; /* Disable horizontal scroll */
    overflow-y: auto; /* Disable vertical scroll */
    padding: 0px;
    margin: 0px;/* Place content 60px from the top */
    transition: 0.3s;/* 0.5 second transition effect to slide in the sidenav */
    color: #FFFFFF; 
}


.index_active{
    background-color: ForestGreen;
    color: white;
    margin: 0em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
}
.index_inactive{
    background-color: Tomato;
    margin: 0em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
}

.verticaltext{
    margin: 0em 0em 0em 0em;
    padding: 0em 0em 0em 0em;
    font-size: 0.5em;
    writing-mode: vertical-rl; 
    height: 2.5em;
    /*-webkit-transform:rotate(90deg); */
    /* -moz-transform:rotate(90deg); */
    /* -o-transform: rotate(90deg); */
    /*-ms-transform:rotate(90deg); */
    /* transform: rotate(90deg);  */
}


.arena_info_table {
    width: 100%;
    border-collapse: collapse;
    border: 0px solid black;
}

.arena_ex-raid_confirmed {
    width: 100%;
    border-collapse: collapse;
    border: 0px solid black;
 
}
.arena_ex-raid_option {
    width: 100%;
    border-collapse: collapse;
    border: 0px solid black;
}


.entry_table {
    width: 100%;
    height: 2em;
}

/*
.entry_table td{

    height: 2em;
    font-size: 1em;
}
*/
.entry_table p{

    margin: 0px;
}

.entry_table p.disabled{

    color: #ababab;
}
.entry_table_rm {
    width: 100%;
    height: 2em;
}

.entry_table_rm td{

    height: 1em;
    font-size: 1em;
}



#options_btn{
    float: right;
    padding: 0px 0px 5px 0px;
    cursor: pointer;
}
#backMain_btn{
    float: left;
    padding: 0px 0px 5px 0px;
    cursor: pointer;
}

i {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}

.arrow_right{
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.arrow_left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}


td[colspan]{
    height: 0.2em;
}

header{
	position: fixed;
	top: 0;
    left: 0; 
    right: 0;
    padding: 0px 6px 6px 10px;
	background-color: #ffffff;
    z-index: 1;
}

.arena{
    background-color: #FFFFFF;
    border-width: 1px;
    border-style: solid;
    border-color: #C0C0C0;
    padding: 2px 2px;
    margin: 2px 2px;
        
}    

.arenaactive{
    background-color: #FFFFFF;
    border-width: 1px;
    border-style: solid;
    border-color: #CC0000;
    padding: 2px 2px;
    margin: 2px 2px;
        
} 

.arenablacklisted {
    background-color: #e9ecef;
}   

.arena:hover, .arenaactive:hover {
    background-color: AntiqueWhite ;
}


#raidlist{
    background-color: white;
    border-width: 0px;
    border-style: solid;
    border-color: #e7e7e7;
        
}    
#raidactive{
    background-color: white;
    border-width: 2px;
    border-style: solid;
    border-color: #FF8000;
    padding: 2px 2px;
    margin: 2px 2px;
}    

#raidactive_att{
    background-color: #D0FFD0;
    border-width: 2px;
    border-style: solid;
    border-color: #FF8000;
    padding: 2px 2px;
    margin: 2px 2px;
} 
#raidfinished_att{
    background-color: #FFFFE0;
    border-width: 1px;
    border-style: solid;
    border-color: #C0C0C0;
    padding: 2px 2px;
    margin: 2px 2px;
}
#raidfinished{
    background-color: #FFFFFF;
    border-width: 1px;
    border-style: solid;
    border-color: #C0C0C0;
    padding: 2px 2px;
    margin: 2px 2px;
} 

/* The menu button*/
#myMenuBtn{
    
    position: absolute;
    right: 0.5em;
    cursor: pointer;
}


/* The side navigation menu */
.sidenav {
    height: 100%; /*100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #e7e7e7; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.3s;/* 0.5 second transition effect to slide in the sidenav */
    color: #818181; 
}




/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}
.sidenav label {
    padding: 8px 0px 8px 8px;
    text-decoration: none;
    font-size: 1em;
    color: #818181;
    /*display: block;*/
    transition: 0.3s
}
.sidenav input {
    padding: 8px 0px 8px 8px;
    text-decoration: none;
    font-size: 2em;
    color: #818181;
    /*display: block;*/
    
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #ffffff;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* The bottom panel menu links */

.bottompanel {
    height: 100%; /*100% Full-height */
    width: 100%; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.8); /*#e7e7e7; /* Black*/
    overflow-x: auto; /* Disable horizontal scroll */
    overflow-y: auto; /* Disable vertical scroll */
    padding: 0px;
    margin: 0px;/* Place content 60px from the top */
    transition: 0.3s;/* 0.5 second transition effect to slide in the sidenav */
    color: #FFFFFF; 
}

.popup {
        opacity: 1;
        background-color: #ffffffc0;
        border: none;
        left: 0;
        top: 0;
        padding: 0px;
        margin: 0px;
       /*width: -moz-min-content;    /* Firefox */
       /* width: -webkit-min-content; /* Chrome */
       /* width: min-content;  */
       /* position: fixed; */
        z-index: 112;
        height: -webkit-fill-available;
        overflow: auto;
    }




.bottompanel_content{
    /*height: 490px; /*100% Full-height */
    /*position: absolute;
    top: 0;
    /* width: 100%; 0 width - change this with JavaScript */
    background-color: DimGray;
    padding: 5px 5px 5px 5px;
    /*margin: 10px 10px 10px 10px;*/
    font-weight: normal;
    color: white;
    overflow: hidden;
}
.bottompanel a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

/* Position and style the close button (top right corner) */
.bottompanel .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#popupBtn{
    height: 2em;
    padding: 0.2em;
    margin: 0.1em;
}
/*
.input-hidden {
  position: absolute;
  left: -9999px;
}


input[type=radio]:checked + label>img {
  border: 1px solid #888;
  box-shadow: 0 0 3px 3px #888;
  filter: drop-shadow(1px 1px 2px black);
}
*/

#lang-german:checked + label>img,#lang-english:checked + label>img {
  border: 1px solid #222;
  box-shadow: 0 0 3px 3px #ccc;
}

/* works not with FireFox
#team-mystic:checked + label>img {
   content: url(images/team-mystic-select.png);
}
*/

.teamcolor_none{
    background-color: lightgray;
    width: 12px; 
}
.teamcolor_blue{
    background-color: dodgerblue;
    width: 12px; 
}
.teamcolor_red{
    background-color: tomato;
    width: 12px; 
}
.teamcolor_yellow{
    background-color: gold;
    width: 12px; 
}

input[id^="team-instinct"] + label {
            margin: 0em 1em 0em 0em;
        }

#team-none:checked + label>img {
/*  background: url('../../images/team-none-select.png');
  background-repeat: no-repeat;
  background-size: contain;*/
  border: 0.2em solid lightgray;
  border-radius: 2em;

}

#team-mystic:checked + label>img {
 /* background: url('../../images/team-mystic-select.png');
  background-repeat: no-repeat;
  background-size: contain;*/
  border: 0.2em solid dodgerblue;
  border-radius: 2em;
}

#team-valor:checked + label>img {
/*  background: url('../../images/team-valor-select.png');
  background-repeat: no-repeat;
  background-size: contain;*/
  border: 0.2em solid tomato;
  border-radius: 2em;

}

#team-instinct:checked + label>img {
/*  background: url('../../images/team-instinct-select.png');
  background-repeat: no-repeat;
  background-size: contain;*/
  border: 0.2em solid gold;
  border-radius: 2em;

}

#remainingTime{
    width: 4em;
}

#startDate{

    color: black;
    border-width:2px;
    border-radius: 4px;
    font-size: 1em;
    width: 9.6em;
}

#startTime{

    color: black;
    border-width:2px;
    border-radius: 4px;
    font-size: 1.2em;
    width: 8em;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
/*
    -webkit-animation: blink 1s;
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    /*animation: blink 1s;
    animation-iteration-count: 1;
    */
}
.blinkGreen{

    -webkit-animation: blink 0.5s;
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    animation: blink 0.5s;
    animation-iteration-count: 1;
    border-width:2px;
    border-color:SpringGreen;
}
.blinkBlue{

    -webkit-animation: blink 0.5s;
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    animation: blink 0.5s;
    animation-iteration-count: 1;
    border-width:2px;
    border-color:DodgerBlue;
}



@keyframes blink
{  
 0% { opacity: 1.0; }
 50% { opacity: 0.0; }
 100% { opacity: 1.0; }
}

input[type="checkbox"] {
  display:none;
}
input[type="checkbox"] + label {
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.3em;
  border: 0.1em solid #555555;
  background-color: #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 0px;
}

input[type="checkbox"].green + label {
  background-color: #00ffaa;
}
input[type="checkbox"].red + label {
  background-color: #ff3333;
}
input[type="checkbox"]:checked+label {
  box-shadow: inset 0px 0px 0px 3px #fff;
  background-color: #555555;
}

input[type="checkbox"].green:checked+label {
  box-shadow: inset 0px 0px 0px 3px #00ffaa;
}
input[type="checkbox"].red:checked+label {
  box-shadow: inset 0px 0px 0px 3px #ff3333;
}

#popupNavi{
  /*width: intrinsic;            Safari/WebKit verwendet einen nicht standardisierten Namen */
  /*width: -moz-max-content;     Firefox/Gecko */
  /*width: -webkit-max-content;  Chrome */  
  width: auto;  
  /*height: 24px;*/
  line-height: 1em;
}


/* Icon 3 Hamburger menu*/

#nav-icon3 {
  float: left;

  width: 1em;
  height: 1em;
  
  
  margin-top: 0px;
  margin-right: 20px;
  margin-bottom: 0px;
  margin-left: 0px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span{
  display: block;
  position: absolute;
  height: 0.2em;
  width: 1em;
  background: white;
  border-radius: 0.5em;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}


#nav-icon3 span:nth-child(1) {
  top: 0em;
}

#nav-icon3 span:nth-child(2) {
  top: 0.4em;
}

#nav-icon3 span:nth-child(3) {
  top: 0.8em;
}
#nav-icon3 span:nth-child(4) {
  top: 0.8em;
  display: none;
}

#nav-icon3.open span:nth-child(1) {
  top: 0.4em;
  left: 0.4em;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: LightSkyBlue;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: LightSkyBlue;
}

#nav-icon3.open span:nth-child(3) {
  top: 0.4em;
  left: -0.4em;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  background-color: LightSkyBlue;
}

.open{
    color: LightSkyBlue;
}
div .nav-1{
    float: left;
    margin-right: 20px;
    font-weight: bold;
    cursor: pointer;
 }   

 div .nav-2{
    float: left;
    margin-right: 20px;
    font-weight: bold;
    cursor: pointer;
 }   

 .popupContent a{
    padding: 1px 1px 1px 1px;
    text-decoration: none;
    font-size: 1em;
    color: SeaShell;
    transition: 0.3s;
    display: inline;
 }

.popupContentNoToken{
    height: auto;
    /*height: 78px; /* Edge*/
    /*height: -moz-min-content;    /* Firefox */
    /*height: -webkit-min-content; /* Chrome */
    /*height: min-content;*/
}





.attendee_slot{
    font-size: 1.0em;
    text-decoration: underline;
    margin: 10px 0px 0px 0px;
}
.attendee_names{
    font-size: 0.8em;
    margin: 0px 0px 0px 0px;
}
.attendee_comment{
    font-size: 0.8em;
    font-style: italic;
    word-break: break-word;
    white-space: normal;
    margin: 0px 0px 0px 14px;
}

.row{
    margin: 0.1em;
}

.col-2, .col-3, .col-4, .col-5, .col-6, .col-12 {
    padding: 0.2em;
 }
 

.tempnote{
    word-wrap: break-word;
    white-space: normal;
    font-size: 0.8em;
}

 #slot_1, #slot_2, #slot_3, #slot_4, #slot_5, #slot_6, #slot_7, #slot_8 {
    width: 100%;
}

#reset, #plus_one, #remote, #comment, #invite_me {
    width: 100%;
}

#userName{
    float: right;
    font-size: 0.7em;
    font-weight: normal;
    color: silver;
}

.redX1{
  display: inline-block;
    position: relative;
    height: 0.16em;
    width: 1em;
    background: Tomato;
    top: -4px;
    /* border-radius: 6px; */
    /* opacity: 1; */
    left: 0.3em;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin: 0px;
    padding: 0.16em;
    border: none;
}

.redX2{
    display: inline-block;
    position: relative;
    height: 0.16em;
    width: 1em;
    background: Tomato;
    top: -4px;
    /* border-radius: 6px; */
    /* opacity: 1; */
    left: -0.7em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0px;
    padding: 0.16em;
    border: none;
}

.blueRect{
    border-width: 0px;
    display: inline-block;
    padding: 5px;
    background-color: dodgerblue;
    border-radius: 3px;
    margin: 1px;
}

.redRect{
    border-width: 0px;
    display: inline-block;
    padding: 5px;
    background-color: tomato;
    border-radius: 3px;
    margin: 1px;
}

.yellowRect{
    border-width: 0px;
    display: inline-block;
    padding: 5px;
    background-color: gold;
    border-radius: 3px;
    margin: 1px;
}




        .md-18 { font-size: 18px; }
        .md-24 { font-size: 24px; }
        .md-36 { font-size: 36px; }
        .md-48 { font-size: 48px; }

        .boss-tierCaption{

        }

        label > img {
           width: 3em;
        }

        label, label > * {
            cursor: pointer;
        }
        .boss-selection {
            position: relative;
            padding: 0px 0px 0px 0px;
        }
        .boss-selection > input[id="boss-reset"] + label {
            position: absolute;
            font-weight: bold;
            width: 200px;
            height: 38px;
            z-index: 10;
        }
        
        .boss-tiers > .boss-tierTab > input[id="boss-tab6"]:checked ~ .boss-tier > input:not([id^="boss-6"]):not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab5"]:checked ~ .boss-tier > input:not([id^="boss-5"]):not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab4"]:checked ~ .boss-tier > input:not([id^="boss-4"]):not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab3"]:checked ~ .boss-tier > input:not([id^="boss-3"]):not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab2"]:checked ~ .boss-tier > input:not([id^="boss-2"]):not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab1"]:checked ~ .boss-tier > input:not([id^="boss-1"]):not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab6"]:not(:checked) ~ .boss-tier > input[id^="boss-6"]:not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab5"]:not(:checked) ~ .boss-tier > input[id^="boss-5"]:not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab4"]:not(:checked) ~ .boss-tier > input[id^="boss-4"]:not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab3"]:not(:checked) ~ .boss-tier > input[id^="boss-3"]:not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab2"]:not(:checked) ~ .boss-tier > input[id^="boss-2"]:not(:checked) + label,
        .boss-tiers > .boss-tierTab > input[id="boss-tab1"]:not(:checked) ~ .boss-tier > input[id^="boss-1"]:not(:checked) + label
        
        {
            display: none !important;
        }
        .boss-tierTab > label {
            font-size: 2em;
            margin: 0px 0px 0px 0px;
        }
        .boss-tier > input[id^="boss-"]:checked + label > span {
            display: inline-grid;
            grid-template-columns: auto auto;
            width: auto;
            height: auto;
                /* clear: both; */
            clip: unset;
            font-size: 0.9em;
            font-weight: normal;
            padding: 3px;
        }

        .boss-tier > input[id^="boss-"]:checked + label > span > span:nth-of-type(3) {
             grid-column: 1 / span 2;
        }
        .boss-tier > input[id^="boss-"]:checked + label > span > span:nth-of-type(1) {
             font-weight: bold;
             padding-right: 6px;
        }
        .boss-selection .boss-tier label {
            margin: 1px;
            width: 3.0em;
            height: 3.0em;
            overflow: hidden;
            display: unset;
            justify-content: center;
            align-items: center;
        }

        input[id^="boss-tab"] + label > img {
          /* width: 30px;*/
        }

        input[id^="boss-tab6"]:checked + label > img {
           content: url(ico/6star_a.svg);
        }
        input[id^="boss-tab5"]:checked + label > img {
           content: url(ico/5star_a.svg);
        }
        input[id^="boss-tab4"]:checked + label > img {
           content: url(ico/4star_a.svg);
        }
        input[id^="boss-tab3"]:checked + label > img {
           content: url(ico/3star_a.svg);
        }
        input[id^="boss-tab2"]:checked + label > img {
           content: url(ico/2star_a.svg);
        }
        input[id^="boss-tab1"]:checked + label > img {
           content: url(ico/1star_a.svg);
        }

        label[for^="boss-tab6"] {
            z-index: 6;
        }
        label[for^="boss-tab5"] {
            z-index: 5;
        }
        label[for^="boss-tab4"] {
            z-index: 4;
        }
        label[for^="boss-tab3"] {
            z-index: 3;
        }
        label[for^="boss-tab2"] {
            z-index: 2;
        }
        label[for^="boss-tab1"] {
            z-index: 1;
        }

        .boss-tierTab > input[id^="boss-tab"]:checked + label {
            /*content: url(leveltab6_a.png);*/
            box-shadow: 1px -1px 3px 1px rgba(0, 0, 0, 0.2);
            background: #eeeeee;
            border-radius: 4px 16px 0px 0px;
            text-shadow: 0 1px 0 rgba(0,0,0,.5);
            color: #fff;
            float: left;
            font: bold 0.7em/1em 'Lucida sans', Arial, Helvetica;
            padding: 0px 1em;
            margin: 0px 0px 7px 0px;
            text-decoration: none;
            z-index: 7;
            position: relative;
        }
        .boss-tierTab > input[id^="boss-tab"]:not(:checked) + label {
            box-shadow: 1px -1px 3px 1px rgb(0 0 0 / 20%);
            /* background: #696969; */
            border-radius: 4px 16px 0px 0px;
            /* text-shadow: 0 1px 0 rgb(0 0 0 / 50%); */
            /* color: #fff; */
            float: left;
            font: bold 0.7em/1em 'Lucida sans', Arial, Helvetica;
            /* height: 27px; */
            padding: 0px 1em;
            margin: 0px 0px 0px 0px;
            text-decoration: none;
            position: relative;
        }

        .boss-tierTab .spacer {
            width: 100%;
            height: 2.15em;
            border: solid;
            border-color: #eeeeee;
            border-width: 1px;
            border-bottom-width: 1px;
            border-top-width: 0px;
            border-right-width: 0px;
            border-left-width: 0px;
        }
        .spacer_left {
            clear: left;
        }

        input[id^="zeit"] + label {
            padding: 0em 0.4em 0em 0.4em;
            margin: 0em 1em 0em 0em;
            border-radius: 1em;
            border: 0.1em solid #eee;
        }
        input[id^="zeit"]:checked + label{
            background-color: #eeeeee;
            color: black;
            border: 0.1em solid #444;
        }

        .form-er {
           white-space: nowrap;
        }

#raidModalDialog{
    max-width: 24em;
    margin: 0.05rem auto;

}

/*for smart phones */
@media (max-width: 280px) { 

    body{
        /*padding: 5.6em 0 0 0;*/
    }
    .modal {
       font-size: 0.78rem;
   }
}

@media (min-width: 281px) and (max-aspect-ratio: 4 / 7) { 

    body{
        /*padding: 5.6em 0 0 0;*/
    }
    .modal {
       font-size: 4.5vw;
   }
}

@media (min-width: 420px) and (min-height: 680px){ 

    body{
        /*padding: 5.6em 0 0 0;*/
    }
    .modal {
       font-size: 1.0rem;
   }

}


/*for tablets */
@media (min-width: 420px) and (min-height: 800px){ 

    body{
        /*padding: 5.6em 0 0 0;*/
    }
    .modal {
       font-size: 1.2rem;
   }

   #raidModalDialog{
        max-width: 28em;
   }

}


/*for screen with 1080p HD */
@media screen and (min-width: 1000px) and (min-height: 1000px){
 
    .modal {
        font-size: 1.6rem;
    }

    #raidModalDialog{
        max-width: 30em;
    }

}

/*for screen with 4K HD */
@media screen and (min-width: 1900px) and (min-height: 1900px){
 
    .modal {
        font-size: 2.6rem;
    }

    #raidModalDialog{
        max-width: 30em;
    }

}



/*prüfen ob das noch gebraucht wird!!!*/
@media only screen and (min-height: 450px) {
 
 .attendeeList{
    height: 75%;
    overflow: auto;
 }
}