* {
   background-repeat: no-repeat;
}

header .lensBg {
   background-position: 5px 0px;
   background-size: 20px;
   background-repeat: no-repeat;
   padding-left: 32px;
   background-color: #ddd;
}

.lens.level {
   background-image: url(../images/sd/buttons/img_reputation.png);
}

.lens.week {
   background-image: url(../images/sd/buttons/img_kalender.png);
}

.lens.info {
   background-image: url(../images/sd/buttons/img_info.png);
   padding: 3px;
   min-width: 31px;
}

.lens.settings {
   background-image: url(../images/sd/buttons/img_settings.png);
   padding: 3px;
   min-width: 30px;
}

.tile {
   position: relative;
   width: 100%;
   aspect-ratio: 1/1;
   padding: 15px;
   background-size: cover;
   background-position: center bottom;

   color: rgba(255,255,255,.8);
   background-color: black;
   cursor: pointer;

   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.tile h2 {color:rgba(255, 255, 255, 0.95)}

.tileFullHeight {
   aspect-ratio: auto;
   height: 100%;
}

.tile:nth-child(even),
.tile.right,
.tileFull:nth-child(even) {
   text-align: right;
}

.tileFull p {
   max-width: 65%;
}

.tileFull:nth-child(even) p {
   margin-left: 50%;
}

.tile h3,
.tile h4,
.tile p {
   font-size: 1.3em;
   color: white;
   text-transform: uppercase;
   margin-top: 0;
   margin-bottom: 3px;
}

.tile h4 {
   font-size: 1.1em;
   font-weight: normal;
   color: rgba(255, 255, 255, 0.8);
}

.tile p {
   font-size: 90%;
   opacity: 0.6;
}

.calendar .listTiles .tile {text-align: right!important;}
.calendar .tileFull p  {max-width: 100%}

.boxTiles {
   display: grid;
   padding: 0px;
   grid-gap: 16px;
   margin-bottom: 16px;
}

.tileFull {
   aspect-ratio: none;
   height: 170px;
}

.team.tileFull {
   height: 190px;
}

.tile.green {
   background-image: url(../images/sd/buttons/btn_sq_l_lightgreen.png);
}
.tileFull.green {
   background-image: url(../images/sd/buttons/btn_ra_r_lightgreen.png);
}
.tileFull.green.right {
   background-image: url(../images/sd/buttons/btn_ra_l_lightgreen.png);
}

.tile.yell {
   background-image: url(../images/sd/buttons/btn_sq_l_yellow.png);
}
.tileFull.yell {
   background-image: url(../images/sd/buttons/btn_ra_r_yellow.png);
}
.tileFull.yell.right {
   background-image: url(../images/sd/buttons/btn_ra_l_yellow.png);
}
.tile.red {
   background-image: url(../images/sd/buttons/btn_sq_r_red.png);
}
.tileFull.red {
   background-image: url(../images/sd/buttons/btn_ra_l_red.png);
}

.tile.blue {
   background-image: url(../images/sd/buttons/btn_sq_l_blue.png);
}
.tileFull.blue {
   background-image: url(../images/sd/buttons/btn_ra_r_blue.png);
}
.tileFull.blue.right,
.tileFull.blue:nth-child(even) {
   background-image: url(../images/sd/buttons/btn_ra_l_blue.png);
}

.tile.viol {
   background-image: url(../images/sd/buttons/btn_sq_r_violett.png);
}
.tileFull.viol {
   background-image: url(../images/sd/buttons/btn_ra_l_violett.png);
}

.tile.pink {
   background-image: url(../images/sd/buttons/btn_sq_l_pink.png);
}
.tileFull.pink {
   background-image: url(../images/sd/buttons/btn_ra_r_pink.png);
}

.tile.orange {
   background-image: url(../images/sd/buttons/btn_sq_l_orange.png);
}
.tileFull.orange {
   background-image: url(../images/sd/buttons/btn_ra_r_orange.png);
}

div[data-wrestler],
.tileImg {
   position: absolute;
   bottom: 0;
   top: 0;
   left: 0;
   right: 0;

   background-size: 64%;
   background-position: bottom center;
   background-repeat: no-repeat;
   aspect-ratio: 1/1;
}

/* used for two images in one tile (roster) */
.tile2img img {
   position: absolute;
   width: 65%;
   bottom: 0;
}

.tile2img img:nth-child(1) {
   left: 5px;
}
.tile2img img:nth-child(2) {
   right: 5px;
}

/* used for 2 images in one tile with autoload data-wrestler*/
.box2img,
.box3img {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 50%;
}

.tileFull:nth-child(odd) .box2img, .tileFull:nth-child(odd) .box3img {
   left: auto;
   right: 0;
}

.box2img div,
.box3img div {
   position: absolute;
   width: 60%;
   bottom: 0;
   top: auto;
}

.box2img div:nth-child(1),
.box3img div:nth-child(1) {
   left: 5px !important;
   right: auto !important;
}

.box2img div:nth-child(2),
.box3img div:nth-child(3) {
   right: 5px !important;
   left: auto !important;
}

.box2img img {
   width: 100%;
}

.box3img div:nth-child(2) {
   right: 20% !important;
   left: auto !important;
}
.box3img img {
   width: 70%;
}

.tile3img img {
   position: absolute;
   width: 55%;
   bottom: 0;
}

.tile3img img:nth-child(1) {
   width: 60%;
   left: 50%;
   transform: translateX(-50%);
   z-index: 3;
}
.tile3img img:nth-child(2) {
   left: -5px;
}
.tile3img img:nth-child(3) {
   right: -5px;
}

.tileFull div[data-wrestler],
.tileImg {
   background-size: 95%;
}

/* wrestler on the right*/
.tileFull div[data-wrestler],
.tileImg {
   left: auto;
   right: 0;
}

.tileFull:nth-child(even) div[data-wrestler],
.tileFull:nth-child(even) .tileImg {
   right: auto;
   left: 0;
}

.tileFull:nth-child(even) div.bottom {
   right: 16px;
}

div[data-wrestler].notAwrestler {
   background-size: 80%;
   top: -10px;
}

div[data-wrestler].ppvImg {
   bottom: 10px;
}

.tileImg img {
   position: absolute;
   bottom: 0;
}

.tileHeight150 {
   height: 150px !important;
}

.tileLeft .tile,
.tileLeft .tileFull,
.tileLeft,
.teamCard {
   text-align: left !important;
}

.detail {
   color: #111;
}

input {
   border-radius: 30px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
   background: linear-gradient(#f3f3f3, #fdfdfd);
   border: 1px solid white;
   padding: 5px 10px;
   margin: 5px auto;
}

.boxButton {
   padding: 20px;
}

/* overwrites, make sure old stuff does not pop up */
.imgLeague {
   display: none !important;
}

#boxShowButtons {
}

.showLogo {
}

.showLogo img {
   display: block;
   margin: 0 auto;
   width: 50%;
}

#boxMainShow {
   position: absolute;
   bottom: 0;
   width: 100%;
}

.bottom {
   position: absolute;
   bottom: 16px;
}

.starFilled {
   color: rgba(255, 255, 255, 0.9);
}
.starEmpty {
   color: rgba(255, 255, 255, 0.4);
}

.lock {
   position: absolute;
   left: 0;
   right: 0;
   text-align: center;
   bottom: 20px;
   font-size: 125%;
}

.boxMatchWrestlers {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 50%;
}

.teamPreview {
   display: flex;
   flex-direction: column;
   justify-content: flex-end; /* Align children to the end (bottom) */
   align-items: center;
}

.comingSoon {
   position: absolute;
   top: 50px;
   left: 10%;
   right: 10%;
   background: rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   text-align: center;
   font-size: 150%;
   color: white;
   border: 3px solid white;
   padding: 15px;
   z-index: 5;
}

.tile .team .imgWrestler {
   width: 120px;
}

.tile .event {
   position: absolute;
   left: 0;
   width: 100%;

   bottom: 0;
   max-height: none;

   display: flex; /* Enable flexbox */
   flex-wrap: nowrap; /* Prevent wrapping to a new line */

   /* place content of box on bottom with flex attibutes */
   justify-content: flex-end; /* Align children to the end (bottom) */
}

/* on full tile we want the box to be only 50% and on the right side */
.tileFull .event {
   width: 50%;
   left: auto;
   right: 0;
}

.event .imgBox {
   display: flex;
   justify-content: flex-end; /* Align children to the end (bottom) */
   xmin-width: 80px; /* Minimum width of each box */
   flex-grow: 1; /* Allow boxes to grow */
   flex-shrink: 1; /* Allow boxes to shrink */
   margin-left: -10px;
   margin-right: -10px;
   aspect-ratio: 1/1;
   max-width: 250px;
}

.event .imgBox img {
   width: 100%; /* Force image to fill box */
}

.tile h5 {
   margin: 0 0 12px 0;
}

#promoModes .tile {
   font-size: 90%;
}

#promoModes .tile p.modeDesc {
   height: 60px;
   overflow: hidden;
}

.txtStarRating {
   text-align: center;
   color: yellow;
   margin: 50px auto 30px auto;
}

.boxStarAnimation {
   display: block;
   margin: 30px auto;
   width: 250px;
   height: 50px;
   background-image: url(../images/sd/stars2.png);
   background-repeat: no-repeat;
   background-size: 250px auto;
}

.boxCurrentShow.showRunning {
   height: 70%;
   min-height: 620px;
   margin-top: 15%;
   padding: 30px 20px 0 20px;
}

.boxShowPopchange,
.boxShowPromoEffect {
   display: inline-block;
   padding: 0 0 0 20px;
}

.showPopChange,
.showPromoEffect {
   padding: 3px 8px;
   font-size: 80%;
   font-weight: normal;
}

.wrestlerBoxTeams {
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-end;
   align-self: end;
   overflow-x: auto;
   position: absolute;
   left: 0;
   right: 0;
   bottom: -15px;
   z-index: 2;
}

.wrestlerTeamsBg {
   position: absolute;
   z-index: 1;
   left: 10%;
   top: 0;
   bottom: 40px;
   right: 10%;;
   background-repeat: no-repeat;
   background-position: center 20px;
   background-size: 80%;
}

.wrestlerBoxTeams > div {
   flex-shrink: 1;
}

.eventweek {
   margin-top: 12px;
}

.boxListTitles * {
   text-align: right!important;
}

.financeArrows  {
   font-size: 400%;
}
.financeArrows:nth-child(1) {
   padding-right: 20px
}
.financeArrows:nth-child(3) {
   padding-left: 20px
}

.boxRevenue {
   position: absolute;
   bottom: 15px
}

.tileHeader {
   margin-bottom: 20px
}
.calendarLogo {
   max-width: 80%; 
   margin: 5px auto 0 auto;
}

.calendar .ppvImg {
   height: 100%;
   width: 100%;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

.containerStars {
   display: flex;  
   flex-direction: column;  
   align-items: flex-end;
   margin: 5px 0;
}

.calendar .tile p {
   opacity: 0.9;
   margin-left: 0!important;
}
.calendar .tile p:nth-child(even) {
   margin-left: 0!important;
}

#popOptions {
   text-align: center;
}

#popOptions h3 {
   margin-bottom: 3px
}

#popOptions p {
   margin-top: 0px
}

#boxLanguageSelect div {
   /* desaturate image with filter */
   filter: grayscale(100%);
   opacity: 0.6;
   zoom: 0.8
}

#boxLanguageSelect div.selected {
   border: none!important;
   filter: grayscale(0%);
   opacity: 1;
   zoom: 1
}