.error {
  background-color: red;
  color: white;
  border: 1px solid silver;
}

.warning {
  background-color: orange;
  color: black;
  border: 1px solid silver;
}

.hint {
  background-color: yellow;
  color: black;
  border: 1px solid silver;
}

.close {
  float: right;
}

.selectArea,
.selectAreaSubstitute,
.selectAreaStaff,
ul.seasonList,
ul.categoryList,
ul.tournamentList li,
.tournamentHead > .admin,
.roundHead > .admin,
.groupHead .admin,
.gameHead .head,
.gameTimeWrap,
.gameHead .lineOuter .lineInner,
.gameHead .lineOuter .lineInner .middle .result .child,
.gameHead .lineOuter .bottom,
.gameHead .lineOuter .lineInner .home,
.gameHead .lineOuter .lineInner .away,
.game .stop,
.gameTimeInnerWrap .row,
.gameTimeInnerWrap .timer,
.game .timePenalties .homeAway,
.game .gameTeams .selector,
.game .gameTeams .body .lineup,
.timePenalty .row,
.timePenalty .formatted,
.timePenalty .controller,
.tournamentEdit {
  display: flex;
}

ul.seasonList {
	max-width: 100%;
	overflow-x: scroll;
}

.selectableArea,
.selectedArea {
  width: 50%;
}

.selectableArea ul,
.selectedArea ul {
  height: 150px;
}

.selectableArea ul {
  background-color: rgba(255, 0, 0, 0.7);
}

.selectedArea ul {
  background-color: rgba(255, 255, 0, 0.7);
}

.receiveHAUAjaxHelp {
  display: none;
}

li.round {
  border: solid black 2px;
}

li.group {
  border: solid green 2px;
}

ul.tournaments li,
.tournamentHead,
ul.tournamentRounds li {
  width: 98%;
  overflow: hidden;
  margin: 1%;
/*  background-color: rgba(255, 255, 255, 0.4);*/
  background-color:var(--list-background-40);
}

.gameHead {
  color: black;
  font-size: 1em;
  height: 45px;
  margin: 0 auto;
  overflow: hidden;
  width: 98%;
}

.gameHead .head {
  font-size: 0.6em;
  height: 20%;
  text-align: center;
}

.gameHead .head .time,
.gameHead .head .location,
.gameHead .bottom .firstTeam,
.gameHead .bottom .secondTeam {
  width: 40%;
  /*  float: left;*/
  text-align: center;
}

.gameHead .head .minute,
.gameHead .bottom .gameTag {
  width: 20%;
  /*  float: left;*/
}

.lineOuter {
  position: relative;
  top: -10px;
}

.lineInner {
/*  background-color: rgba(255, 255, 255, 0.8);*/
  background-color: var(--list-background-40);
  height: 40px;
  margin: 10px auto 0;
  overflow: visible;
  width: 100%;
}

.gameHead .lineOuter .lineInner .home,
.gameHead .lineOuter .lineInner .away {
  /*float: left;*/
  width: 40%;
}

.lineInner > div {
  height: 100%;
}

.lineImg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  /*float: left;*/
  height: 60%;
  margin: 0 5%;
  max-width: 50px;
  overflow: visible;
  position: relative;
  text-align: center;
  top: 16%;
  width: 15%;
}

.lineText {
  /*  float: left;*/
  width: 75%;
}
.lineText,
.result {
  display: table;
  height: 100%;
}

.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.result {
  /*  float: left;*/
  text-align: center;
  width: 20%;
}

.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

ul.seasonList,
ul.categoryList,
ul.tournamentList {
  list-style: none;
}

ul.categoryList li {
	display: flex;
	align-items: center;
}

ul.seasonList li,
ul.categoryList li {
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  margin: 0 5px;
}

ul.seasonList li a,
ul.categoryList li a {
  color: white;
}

.tournamentHead > .admin > div,
.roundHead > .admin > div,
.groupHead .admin > div,
ul.tournamentList li > div.admin,
.game .stop > div,
.gameTimeInnerWrap .row > div,
.gameTimeInnerWrap .timer > div {
  margin: 0 2px;
}

.game .hScroll div.head,
.game .hScroll .overflow .container,
.game .gameStatistic div.body > div div.body {
  display: flex;
  flex-wrap: wrap;
}

.game .hScroll div.head > div {
  width: 25%;
}

.game .hScroll .overflow .container {
  width: 100%;
}

.gameHead .lineOuter .lineInner .home,
.gameHead .lineOuter .lineInner .away {
  /*  float: left;*/
  width: 40%;
}

.child .seperator {
  /*  float: left;*/
  width: 10%;
}

.hauResult .hauBars {
  background-color: black;
  height: 100%;
}

.gameHead .lineOuter .lineInner .home,
.gameHead .lineOuter .lineInner .away {
  /*float: left;*/
  width: 40%;
}
.gameHead .lineOuter .lineInner .home,
.gameHead .lineOuter .lineInner .away {
  /*float: left;*/
  width: 33%;
}
.hauResult .hauBars div.home {
  background-color: orange;
}
.hauResult .hauBars div {
  /*float: none;*/
  min-height: 30%;
}

.gameHead .lineOuter .lineInner .home,
.gameHead .lineOuter .lineInner .away,
.gameHead .lineOuter .lineInner .middle {
  /*float: left;*/
  width: 33%;
}

.hauResult .hauBars div.away {
  background-color: blue;
}
.hauResult .hauBars div {
  /*float: none;*/
  min-height: 30%;
}

.hauResult .hauBars div.equality {
  background-color: white;
}
.hauResult .hauBars div {
  /*float: none;*/
  min-height: 30%;
}

div.setup,
.gameEditBody,
form.resetGame,
form.sendGameEvent,
form.addGameEventAjaxLink,
form.removeGameEvent,
form.rescueGameEvent,
form.sendPerson2GameEvent,
form.removePersonFromGameEvent,
.addPerson2GameEventAjaxLink,
.removePersonFromGameEventAjaxLink,
.resetGameAjaxLink,
.addTeamsAjaxLink,
.addGameEventAjaxLink,
.removeGameEventAjaxLink,
.rescueGameEventAjaxLink,
.receiveHAUAjaxLink,
.getImageAdsAjaxLink,
.resetGameAjaxLink {
  display: none;
}

.gameEventState {
  min-width: 10px;
  min-height: 20px;
  width: 10px;
  height: 20px;
}

.gameEventState.healthy {
  background-color: green;
}

.gameEventState.questionable {
  background-color: yellow;
}

.gameEventState.sick {
  background-color: red;
}

@media (min-width: 728px) {
  .overflow .container > div.gameTicker {
    overflow: auto;
    max-height: 550px;
  }

  .lineInner {
    height: 20px;
  }

  .lineImg {
    height: 165%;
    top: -25%;
    width: 15%;
  }

  .game .hScroll > div.head {
    display: none;
  }

  .game .hScroll .overflow .container .gameTicker,
  .game .hScroll .overflow .container .gameStatistic {
    width: 40%;
  }

  .game .hScroll .overflow .container .gameTeams,
  .game .hScroll .overflow .container .gameProgress {
    width: 60%;
  }

  .game .gameTeams .lineup .home,
  .game .gameTeams .lineup .away,
  .game .gameTeams .home,
  .game .gameTeams .away {
    width: 50%;
  }
}

/***************************************************************************************************************************
Timeline
****************************************************************************************************************************/
.timeLine {
  display: flex;
  background-color: darkgreen;
  height: 60px;
}

.sectionAreaHome,
.sectionAreaAway {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50%;
}

.sectionWrap {
  display: flex;
  border: solid white 1px;
}

.sectionInnerWrap {
  width: 100%;
}

.sectionLabel {
  display: flex;
  background-color: black;
  color: white;
  width: 50px;
  border: solid white 1px;
  align-items: center;
  justify-content: center;
}

.timeLine .sectionHide {
  display: flex;
  position: relative;
  z-index: 100;
  top: -100%;
  height: 100%;
  float: right;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  align-items: center;
  width: 100%;
  /*    transition: width 4s; */
}

.timeLineSimple {
  display: flex;
  background-color: darkgreen;
  height: 10px;
}

.timeLineSimple .sectionWrap {
  display: block;
}

.timeLineSimple .sectionHide {
  float: right;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.section {
  border: darkgreen 1px solid;
}

.section .controller {
  margin: 0 5px;
}

.section > div {
  /*  width: 150px;*/
  margin: 5px;
}

.section > label {
  width: 70px;
  margin: 5px;
}

.section > div label {
  width: 80px;
}

.section > div input {
  width: 100px;
  text-align: right;
}

/***************************************************************************************************************************
Setup
****************************************************************************************************************************/
div.setup .tabsHeader,
div.setup .tabsContent > .game,
div.setup .tabsContent > .display,
div.setup .section {
  display: flex;
}

div.setup .tabsHeader .game,
div.setup .tabsContent .game {
  width: auto;
}

.tabsHeader > div {
  background-color: grey;
  color: white;
  margin: 2px;
  padding: 5px;
  height: 15px;
  justify-content: center;
  align-items: center;
}

.tabsHeader > div {
  background-color: grey;
  color: white;
  margin: 2px;
  padding: 5px;
  height: 15px;
  justify-content: center;
  align-items: center;
}

/***************************************************************************************************************************
Telegramm
****************************************************************************************************************************/
.gameTelegramm,
.gameTelegramm .gameTelegrammBody,
.gameTelegrammHomeBody > div,
.gameTelegrammAwayBody > div {
  overflow: hidden;
  width: 100%;
  font-weight: bold;
}

.gameTelegramm,
.gameTelegramm .gameTelegrammBody,
.gameTelegrammHomeBody > div,
.gameTelegrammAwayBody > div {
  overflow: hidden;
  width: 100%;
  font-weight: bold;
}

ul.telegramm li {
  display: flex;
}

.gameTelegrammHome,
.pItemHome {
  justify-content: flex-end;
}

.gameTelegrammHome,
.gameTelegrammAway {
  width: 47%;
  text-align: left;
  min-height: 1px;
  display: flex;
}

.timePenalties .homeAway .home,
.timePenalties .homeAway .away {
  width: 50%;
}

/***************************************************************************************************************************
Ticker
****************************************************************************************************************************/
ul.ticker {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

ul.ticker li .tIContent {
  display: flex;
}

ul.ticker .tILabel {
  background-color: rgba(0, 0, 139, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  border-left: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 5px 0 0 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  color: white;
  /* float: left;*/
  font-size: 0.8em;
  font-weight: bold;
  margin: 5px 0 0;
  min-width: 30px;
  text-align: center;
  width: 5%;
}

ul.ticker li .tIContentWrap {
  /*  display: flex;*/
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 139, 0.8);
  color: black;
  min-height: 60px;
  padding: 0 2px;
  width: 75%;
}

ul.ticker li.marked .tITextWrap {
  color: white;
  background-color: rgba(0, 0, 139, 0.8);
}

ul.ticker .tIHead {
  font-weight: bold;
  width: 100%;
}

ul.ticker .tIText {
  font-weight: normal;
  width: 99%;
}

ul.ticker .eventModify .eventUnDelete {
  display: none;
}

.gameTicker ul.ticker .tickerItem .tICategory img {
  width: 30px;
}

.gameTicker .playyer > div {
  display: flex;
}

/***************************************************************************************************************************
LineUps
****************************************************************************************************************************/
ul.lineup {
  list-style: none;
}

ul.lineup li > div.homePlayer,
ul.lineup li > div.awayPlayer,
ul.lineup li > div.homePlayer .person,
ul.lineup li > div.awayPlayer .person {
  display: flex;
}

ul.lineup li > div div {
  /*  float: left;*/
  background-color: rgba(255, 255, 255, 0.8);
  margin: 1px;
}

.gameTeamHome ul div.marked > div,
.gameTeamAway ul div.marked > div {
  background-color: rgba(0, 0, 139, 0.8);
  color: white;
}

/***************************************************************************************************************************
Statistics and Progress
****************************************************************************************************************************/
.gameTicker h2,
.gameTeams h2,
.gameStatistic h2,
.gameProgress h2 {
  text-align: center;
}

.game .gameStatistic div.body div.head {
  background-color: grey;
  color: white;
  justify-content: center;
}

.game .gameStatistic div.body > div div.body div.homeAmount,
.game .gameStatistic div.body > div div.body div.awayAmount {
  width: 2.5%;
  height: 25px;
  background-color: grey;
  color: white;
  text-align: center;
}

.game .gameStatistic div.body > div div.body div.bar {
  width: 95%;
}

/* Progess **************/

.gameProgress ul.progress li.time {
  background-color: darkblue;
  color: white;
  text-align: center;
  width: 100%;
}
.gameProgress ul.progress li {
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  overflow: hidden;
  text-align: center;
  width: 100%;
}

.gameProgress .pItemHome,
.gameProgress .pItemAway {
  display: flex;
  min-height: 1px;
  width: 40%;
}

.gameTelegrammHome,
.pItemHome {
  justify-content: flex-end;
}

.gameProgress .pItemMinute {
  float: left;
  min-height: 1px;
  width: 20%;
}

.gameProgress .pItemHome,
.gameProgress .pItemAway {
  display: flex;
  min-height: 1px;
  width: 40%;
}

.gameProgress .pItemHome > div,
.gameProgress .pItemAway > div {
  margin: 3px;
}

.gameProgress .pItemContent {
  display: flex;
}

/*
* Buttons 
*/
.gameController button,
.gameSubController button,
.gameTime button,
.gameDetails button,
.gameTime input {
  /*  background-color: rgba(255, 255, 255, 0.8);*/
  border-radius: 6px;
  box-shadow: 0 1px 0 0 #ffffff inset;
  color: black;
  display: inline-block;
  font-family: arial;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px 0 #ffffff;
  width: 45%;
}

.gameTimeWrap,
.stop {
  justify-content: center;
}

.gameController {
  display: flex;
  justify-content: space-between;
}

.gameController button,
.gameSubController button,
.playerController button {
  background-position: center center;
  background-size: cover;
}

.gameController button {
  height: 50px;
  width: 50px;
}

.gameController button.start {
  background-image: url("../Images/Controller/whistleGreen.gif");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.gameController button.stop {
  background-image: url("../Images/Controller/timeout.gif");
  display: none;
}

.gameController button.pause {
  background-image: url("../Images/Controller/whistleRed.gif");
  display: none;
}

.gameController button.overtime {
  background-image: url("../Images/Controller/overTime.png");
  display: none;
}

.gameController button.penaltyShooting {
  background-image: url("../Images/Controller/penaltyShooting.png");
  display: none;
}

.gameController button.horn {
  background-image: url("../Images/Controller/horn.png");
}

.gameController button.canceld {
  background-image: url("../Images/Controller/canceled.png");
}

.gameController button.reset {
  background-image: url("../Images/Controller/reset.png");
  float: right;
}

.gameController button.setup {
  background-image: url("../Images/Controller/setup.png");
  float: right;
}

.gameSubController,
.gameTimePenaltyBody > div {
  display: flex;
}

.gameTimePenaltyBody > div {
  float: left;
}

.gameSubController .gameSubControllerHome,
.gameSubController .gameSubControllerAway,
.gameTimePenaltyBody .gameTimePenaltyHomeBody,
.gameTimePenaltyBody .gameTimePenaltyAwayBody {
  text-align: center;
  width: 45%;
  min-height: 1px;
}

.gameSubControllerAway {
  display: flex;
  justify-content: center;
  flex-direction: row-reverse;
}

.gameSubControllerSeparator {
  width: 10%;
  min-height: 1px;
}

.gameSubController button,
.playerController button {
  height: 25px;
  width: 25px;
  margin: 1px;
}

.gameSubController button.goal,
.playerController button.goal {
  background-image: url("../Images/Controller/goal.png");
}

.gameSubController button.ownGoal,
.playerController button.ownGoal {
  background-image: url("../Images/Controller/ownGoal.png");
}

.gameSubController button.foul {
  background-image: url("../Images/Controller/foul.png");
}

.gameSubController button.timePenalty {
  background-image: url("../Images/Controller/timePenalty.png");
}

.gameSubController button.yellowCard {
  background-image: url("../Images/Controller/yCardPernalty.png");
}

.gameSubController button.yellowRedCard {
  background-image: url("../Images/Controller/yrCardPernalty.png");
}

.gameSubController button.redCard {
  background-image: url("../Images/Controller/rCardPernalty.png");
}

.gameSubController button.substitution {
  background-image: url("../Images/Controller/substitution.png");
}

.gameSubController button.more {
  background-image: url("../Images/Controller/plus.png");
}

.gameSubController button.success {
  background-image: url("../Images/Controller/goal.png");
}

.gameSubController button.holded {
  background-image: url("../Images/Controller/holdedPenalty.png");
}

.gameSubController button.missed {
  background-image: url("../Images/Controller/missedPenalty.png");
}

/***************************************************************************************************************************
Aside
****************************************************************************************************************************/
Aside aside.layerController {
  display: flex;
  justify-content: right;
  position: fixed;
  right: 1%;
  top: 10%;
  width: 120px;
}

aside.layerController .sidebar {
  text-align: center;
}
.sidebar {
  color: white;
  width: 100%;
}

.imageAd,
.soundAd,
.videoAd,
.layerSelector .welcome,
.layerSelector .standard,
.countdown,
.layerSelector .game {
  background-color: rgba(255, 255, 255, 0.9);
  border: 2px solid blue;
  border-radius: 6px;
  color: blue;
  margin: 0 0 5%;
  padding: 2%;
}
.layerSelector .game {
  width: 95%;
}

/***************************************************************************************************************************
teampresentationOverlay
****************************************************************************************************************************/
.teamPresentationOverlay {
  position: fixed;
  z-index: 199;
  top: 50%;
  left: 50%;
  height: 0%;
  width: 0%;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  text-align: center;
  padding-top: 10px;
  font-weight: bold;
  overflow: scroll;
}

.teamPresentationOverlay .team {
  margin: 1%;
  border: blue 1px solid;
}

.teamHead {
  background: rgba(255, 255, 255, 0.3);
}

.teamTitle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.teamPresentationOverlay .teamHead,
.overlayControllHead,
.overlayControllBody,
.overlayControllSubHead {
  display: flex;
}

.teamPresentationOverlay .teamLogo {
  width: 60px;
  height: 60px;
  background-size: 60px;
}

.overlayControllHead {
  color: silver;
}

.overlayControllHead > div {
  /*    background-color: white;
    color: black;
        border-bott: solid blue 1px;
    */
  margin: 0 10px;
}

.overlayControllHead > div.active,
.overlayControllSubHead > div.active {
  color: white;
  border-bottom: 2px solid white;
}

.teamPresentationOverlay .game {
  width: auto;
}

.overlayControllBody {
  border-top: 1px silver solid;
}

.overlayControllBody > div,
.overlayControllSubBody > div {
  display: none;
}

.overlayControllBody > div:first-child,
.overlayControllSubBody > div:first-child {
  display: flex;
  width: 100%;
  text-align: center;
}

.overlayControllBody > div:first-child,
.overlayControllSubBody > div.tournament {
  display: block;
}

.overlayControllBody .uid {
  background-color: red;
  color: white;
}

.overlayControllBody .number {
  background-color: blue;
  color: white;
}

.groupTableHead,
.teamSelector,
.teamSelector .person,
.personHead {
  display: flex;
}

.teamSelector,
.teamSelector .person > div {
  margin: 0 5px;
}