/*@import "FontAwesome/fontawesome.less";*/
@font-face {
  font-family: GROBOLD;
  src: url('../../fonts/GROBOLD.woff2') format('woff2'), url('../../fonts/GROBOLD.woff') format('woff'), url('../../fonts/GROBOLD.ttf') format('truetype');
  /* src: url('../../fonts/Ribeye-Regular.ttf') format('truetype');*/
}
@font-face {
  font-family: ChessAlpha2;
  src: url('../../fonts/lichess.chess.woff2') format('woff2'), url('../../fonts/lichess.chess.woff') format('woff');
}
@font-face {
  font-family: luckiest_guyregular;
  src: url('../../fonts/luckiestguy-webfont.woff') format('woff');
}
@font-face {
  font-family: 'Icons';
  src: url('../../fonts/open-iconic.eot');
  src: url('../../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../../fonts/open-iconic.woff') format('woff'), url('../../fonts/open-iconic.ttf') format('truetype'), url('../../fonts/open-iconic.otf') format('opentype'), url('../../fonts/open-iconic.svg#iconic-sm') format('svg');
  font-weight: normal;
  font-style: normal;
}
.piece-font {
  font-family: ChessAlpha2;
}
.flipX {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.flipY {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}
.absolute {
  position: absolute;
}
.hidden {
  display: none;
}
/*.vertical-panel {
    display: flex;
    flex-flow: column;
    grid-gap: 0.5rem;
    height: 100%;
}

.horizontal-panel {
    display: flex;
    flex-flow: row;
    grid-gap: 0.5rem;
}*/
.ten-modal {
  z-index: 3;
  display: none;
  padding-top: 100px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.4);
}
.ten-modal-content {
  margin: auto;
  background-color: #fff;
  position: relative;
  padding: 0;
  outline: 0;
  width: 600px;
}
.button-divider {
  width: 0.2rem;
  padding: 0 0.2rem 0 0.2rem;
}
.text-button {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  color: #e8ff75;
  font-family: GROBOLD;
  font-size: 2rem;
  background-color: #2e6a42;
  border: solid #686b72 0.15rem;
  border-radius: 1rem;
  box-shadow: #180d2f 0 0 0 0.3rem, inset 0 0 calc(0.15rem*3) calc(0.15rem*0.3) black;
  transition-property: box-shadow, transform;
  transition-duration: 0.2s;
  outline: solid #509b4b calc(0.15rem*1);
  pointer-events: all;
}
.text-button.disabled {
  color: #8b97b6;
  pointer-events: none;
}
.text-button:hover {
  outline: solid yellow calc(0.15rem*1);
  -webkit-text-stroke: 0.1rem #e8ff75;
  /*  -webkit-text-stroke-color: @yellow1;*/
  color: #509b4b;
}
.state-button {
  background-color: silver;
  border: solid #686b72 0.15rem;
  padding: calc(0.15rem*3);
  border-radius: 1rem;
  box-shadow: #180d2f 0 0 0 calc(0.15rem*1.6), inset 0 0 calc(0.15rem*3) calc(0.15rem*0.3) black;
  transition-property: box-shadow, transform;
  transition-duration: 0.2s;
  outline: solid orange calc(0.15rem*1);
  pointer-events: all;
  width: 5rem;
  height: 5rem;
}
.state-button.medium {
  width: 3rem;
  height: 3rem;
}
.state-button.small {
  width: 1.5rem;
  height: 1.5rem;
}
.state-button.micro {
  width: 1rem;
  height: 1rem;
}
.state-button.small,
.state-button.micro {
  outline: unset;
  border-radius: 0.1rem;
  box-shadow: inset 0.15rem 0.15rem 0.15rem rgba(255, 255, 255, 0.3), inset -0.1rem -0.1rem 0.15rem rgba(0, 0, 0, 0.5);
  padding: calc(0.15rem*0.4) calc(0.15rem*0.6) calc(0.15rem*0.6) calc(0.15rem*0.4);
  /*margin-right:0.1rem;*/
  border: 1px solid black;
}
.state-button.small:hover,
.state-button.micro:hover {
  outline: initial;
}
.state-button.small.active,
.state-button.micro.active,
.state-button.small:active,
.state-button.micro:active {
  /*            box-shadow: inset 0 0 calc(@state-button-border*3) calc(@state-button-border*0.3) black;*/
  box-shadow: inset 0.1rem 0.1rem 0.15rem rgba(0, 0, 0, 0.5), inset -0.15rem -0.15rem 0.15rem rgba(255, 255, 255, 0.3);
  outline: initial;
  padding: calc(0.15rem*0.6) calc(0.15rem*0.4) calc(0.15rem*0.4) calc(0.15rem*0.6);
}
.state-button.small.active:hover,
.state-button.micro.active:hover,
.state-button.small:active:hover,
.state-button.micro:active:hover {
  outline: initial;
}
.state-button.disabled {
  filter: brightness(0.5);
  pointer-events: none;
}
.state-button.active,
.state-button:active {
  box-shadow: #180d2f 0 0 0 calc(0.15rem*1.8), inset 0 0 calc(0.15rem*3) calc(0.15rem*0.7) black;
  outline: solid limegreen calc(0.15rem*1);
}
.state-button.active:hover,
.state-button:active:hover {
  outline: solid greenyellow calc(0.15rem*1);
}
.state-button.active .icon,
.state-button:active .icon {
  transform: scale(0.96);
}
.state-button:hover {
  outline: solid yellow calc(0.15rem*1);
}
.state-button .icon {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
@keyframes thinking {
  from {
    background-color: lightskyblue;
  }
  to {
    background-color: cornflowerblue;
  }
}
.icon.Filter {
  background-image: url('../../images/Icons/filter.svg');
}
.icon.Database {
  background-image: url('../../images/Icons/database.svg');
}
.icon.Dharmachakra {
  background-image: url('../../images/Icons/dharmachakra.svg');
}
.icon.KlasLokaal {
  background-image: url('../../images/Icons/chalkboard-teacher.svg');
}
.icon.Puzzle {
  background-image: url('../../images/Icons/puzzle-piece.svg');
}
.icon.Ranglijst {
  background-image: url('../../images/Icons/university.svg');
}
.icon.Analyse {
  background-image: url('../../images/Icons/chess-board.svg');
}
.icon.Arena {
  background-image: url('../../images/Icons/archway.svg');
}
.icon.Galerij {
  background-image: url('../../images/Icons/university.svg');
}
.icon.Admin {
  background-image: url('../../images/Icons/admin_panel.svg');
}
.icon.LogOut {
  background-image: url('../../images/Icons/sign-out.svg');
}
.icon.LogIn {
  background-image: url('../../images/Icons/sign-in.svg');
}
.icon.Home {
  background-image: url('../../images/Icons/fort-awesome.svg');
}
.icon.Expand {
  background-image: url('../../images/Icons/expand.svg');
}
.icon.Compress {
  background-image: url('../../images/Icons/compress.svg');
}
.icon.AddUser {
  background-image: url('../../images/Icons/add-user.svg');
}
.icon.Chess {
  background-image: url('../../images/Icons/chess.svg');
}
.icon.ChartBar {
  background-image: url('../../images/Icons/chart-bar.svg');
}
.icon.List {
  background-image: url('../../images/Icons/list.svg');
}
.icon.MicroChip {
  background-image: url('../../images/Icons/microchip.svg');
}
.icon.Users {
  background-image: url('../../images/Icons/users.svg');
}
.icon.Settings {
  background-image: url('../../images/Icons/cog.svg');
}
.icon.Notation {
  background-image: url('../../images/Icons/receipt.svg');
}
.icon.Search {
  background-image: url('../../images/Icons/search.svg');
}
.icon.CommentBefore {
  background-image: url('../../images/Icons/comment-before.svg');
}
.icon.CommentAfter {
  background-image: url('../../images/Icons/comment-after.svg');
}
.icon.Comments {
  background-image: url('../../images/Icons/comments.svg');
}
.icon.File {
  background-image: url('../../images/Icons/file.svg');
}
.icon.Save {
  background-image: url('../../images/Icons/save.svg');
}
.icon.Lightbulb {
  background-image: url('../../images/Icons/lightbulb.svg');
}
.icon.Variations {
  background-image: url('../../images/Icons/battle-net.svg');
}
.icon.Play {
  background-image: url('../../images/Icons/play.svg');
}
.icon.Backward {
  background-image: url('../../images/Icons/backward.svg');
}
.icon.Forward {
  background-image: url('../../images/Icons/forward.svg');
}
.icon.Exchange {
  background-image: url('../../images/Icons/exchange.svg');
}
.icon.Infinity {
  background-image: url('../../images/Icons/infinity.svg');
}
.icon.ArrowUp {
  background-image: url('../../images/Icons/arrow-up.svg');
}
.icon.SortUp {
  background-image: url('../../images/Icons/sort-up.svg');
}
.icon.EuroSign {
  background-image: url('../../images/Icons/euro-sign.svg');
}
.icon.MinusSquare {
  background-image: url('../../images/Icons/minus-square.svg');
}
.icon.PlusSquare {
  background-image: url('../../images/Icons/plus-square.svg');
}
.icon.Test {
  background-image: url('../../images/Icons/plus-square.svg');
}
.mini-icon {
  font-size: 2rem;
  margin-top: -0.3rem;
  margin-left: -2.2rem;
}
.mini-icon.question:before {
  content: "?";
}
.field-icon {
  font-size: 2rem;
  margin-top: -0.3rem;
  margin-left: -2.2rem;
  /*   &.field-icon-eye {
        &:before {
            content: "👁";
        }
    }

    &.field-icon-noeye {
        &:before {
            content: "🕶";
        }
    }

    &.field-icon-target {
        &:before {
            content: "⨁";
        }
    }*/
}
.field-icon:before {
  content: "🕶";
}
.field-icon.clear-text:before {
  content: "👁";
}
.oi {
  width: 3rem;
  height: 3rem;
  font-size: 1.6rem;
  line-height: 3.1rem;
  text-align: center;
  color: #ffffff;
  -webkit-text-stroke-width: 0.13rem;
  -webkit-text-stroke-color: #720d0d;
}
.oi.small {
  font-size: 1rem;
  width: 1.4rem;
  height: 1.4rem;
  -webkit-text-stroke: 0;
  line-height: 1.4rem;
}
.oi.small:hover {
  -webkit-text-stroke: 0.05rem;
}
.oi:active {
  /*background-color: #7bcf5c;*/
  box-shadow: -0.01rem -0.01rem #4e5371;
  transform: translateY(0.1rem);
}
.oi.rpg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../../Images/shield.svg');
}
.oi:hover {
  color: orange;
  color: #da2424;
  -webkit-text-stroke: 0.11rem;
  -webkit-text-stroke-color: #ffffff;
  cursor: pointer;
}
.fa-button {
  color: whitesmoke;
}
.fa-button:hover {
  color: orange;
}
#mainmenu .menu-button {
  width: 90%;
}
.menu-button {
  background-image: url('../../Images/marble_4.png');
  margin: 2%;
  border: 0.15rem solid;
  border-color: #180d2f;
  text-align: center;
  vertical-align: middle;
  border-radius: 7%;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}
.menu-button.disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.menu-button-font {
  color: #e8ff75;
  font-family: GROBOLD;
  -webkit-text-stroke: 0.15rem #2e6a42;
  font-size: 2rem;
  line-height: 3.5rem;
  transition: -webkit-text-stroke-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
.menu-button-font:hover {
  -webkit-text-stroke-color: #e8ff75;
  color: #509b4b;
}
.menu-button-font:hover {
  -webkit-text-stroke-width: 0.1rem;
}
.menu-button-font-smaller {
  color: #e8ff75;
  font-family: GROBOLD;
  -webkit-text-stroke: 0.09rem #2e6a42;
  font-size: 1.5rem;
  line-height: 2.4rem;
  transition: -webkit-text-stroke-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
.menu-button-font-smaller:hover {
  -webkit-text-stroke-color: #e8ff75;
  color: #509b4b;
}
.menu-button-font-smaller:hover {
  -webkit-text-stroke-width: 0.05rem;
}
.menu-button-font-more-smaller {
  color: #e8ff75;
  font-family: GROBOLD;
  -webkit-text-stroke: 0.07rem #2e6a42;
  font-size: 1rem;
  line-height: 1.7rem;
  transition: -webkit-text-stroke-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
}
.menu-button-font-more-smaller:hover {
  -webkit-text-stroke-color: #e8ff75;
  color: #509b4b;
}
.menu-button-font-more-smaller:hover {
  -webkit-text-stroke-width: 0.04rem;
}
.open-icon {
  font-family: 'Icons';
  font-size: 1.6rem;
  line-height: 3.1rem;
  -webkit-text-stroke-width: 0.13rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 3rem;
  height: 3rem;
  color: #ffffff;
  text-align: center;
  -webkit-text-stroke-color: #720d0d;
  transition: -webkit-text-stroke-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  background-image: url('../../Images/shield.svg');
  z-index: 100;
}
.open-icon:hover {
  color: #da2424;
  -webkit-text-stroke: 0.11rem #ffffff;
  cursor: pointer;
}
.icon.state {
  color: green;
}
.fa-icon {
  width: 1.5ch;
  height: 1.5ch;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  -webkit-text-stroke-color: #000000;
  -webkit-text-stroke-width: 0.1rem;
  transition: -webkit-text-stroke-color 0.3s ease-in-out;
  transition: color 0.2s ease-in-out;
}
.fa-icon.small {
  font-size: 1rem;
}
.fa-icon:hover {
  color: #ecab11;
  cursor: pointer;
}
.fa-icon.rpg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  -webkit-text-stroke-width: 0.15rem;
  -webkit-text-stroke-color: #720d0d;
  background-image: url('../../Images/shield.svg');
  width: 2.5ch;
  height: 2.5ch;
  font-size: 2.2rem;
}
.fa-icon.rpg.small {
  font-size: 1rem;
}
.fa-icon.rpg:hover {
  color: #da2424;
  -webkit-text-stroke: 0.11rem #ffffff;
}
.ten-icon {
  color: #e8ff75;
  font-family: GROBOLD;
  -webkit-text-stroke: 0.15rem #2e6a42;
  font-size: 2.1rem;
  line-height: 3.1rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 3rem;
  height: 3rem;
  color: #ffffff;
  text-align: center;
  -webkit-text-stroke-color: #720d0d;
  transition: -webkit-text-stroke-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  background-image: url('../../Images/shield.svg');
  z-index: 100;
}
.ten-icon:hover {
  -webkit-text-stroke-color: #e8ff75;
  color: #509b4b;
}
.ten-icon.smaller {
  /*.grobold-font(1.2rem;2.2rem;0.15rem);*/
  font-size: 1.2rem;
  line-height: 2.2rem;
  width: 2rem;
  height: 2rem;
}
.ten-icon:hover {
  color: #da2424;
  -webkit-text-stroke: 0.11rem #ffffff;
  cursor: pointer;
}
.ten-icon.ten-icon-close:before {
  content: "X";
}
.ten-icon.ten-icon-screensize {
  color: #e8ff75;
  font-family: GROBOLD;
  -webkit-text-stroke: 0.15rem #2e6a42;
  font-size: 1.2rem;
  line-height: 2.2rem;
  font-family: 'Icons';
  color: white;
  -webkit-text-stroke-color: #720d0d;
}
.ten-icon.ten-icon-screensize:hover {
  -webkit-text-stroke-color: #e8ff75;
  color: #509b4b;
}
.ten-icon.ten-icon-screensize.fullscreen:before {
  content: '\e06d';
}
.ten-icon.ten-icon-screensize.smallscreen:before {
  content: '\e06e';
}
.ten-icon.buy-icon {
  transform: rotate(45deg);
  font-size: 1.6rem;
}
.ten-icon.buy-icon:before {
  content: "X";
}
.simple-button {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  background-color: #2e6a42;
  border: 0.15rem solid;
  border-color: #0f2738;
  text-align: center;
  vertical-align: middle;
  border-radius: 0.5rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}
.simple-button:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.plain-button {
  width: 100%;
  background-color: #f0d2af;
  margin-top: 0.2rem;
}
.plain-button:hover {
  filter: brightness(85%);
}
.plain-button:active {
  filter: brightness(115%);
}
.game-table {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}
.game-table.orientation-black .square {
  transform: scaleY(-1);
}
.game-table .board {
  background-image: url('../../Images/Boards/wood8.png');
  box-shadow: inset 0.2rem 0.2rem 0.3rem -0.1rem rgba(255, 255, 255, 0.2), inset -0.2rem -0.2rem 0.3rem -0.1rem rgba(0, 0, 0, 0.5);
  position: relative;
}
.game-table .board.no-piece-select .piece {
  pointer-events: none;
}
.game-table .board .shadow-box {
  box-shadow: inset 0.2rem 0.2rem 0.4rem -0.2rem rgba(0, 0, 0, 0.5), inset -0.2rem -0.2rem 0.5rem -0.3rem rgba(255, 255, 255, 0.2), 0.2rem 0.2rem 0.4rem -0.2rem rgba(255, 255, 255, 0.3), -0.2rem -0.2rem 0.8rem -0.1rem rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 5;
  position: absolute;
}
.game-table .board .shadow {
  position: absolute;
  display: none;
}
.game-table .board .shadow.in {
  z-index: 2;
}
.game-table .board .shadow.horizontal {
  width: 100%;
  height: 0.5%;
}
.game-table .board .shadow.vertical {
  width: 0.5%;
  height: 100%;
}
.game-table .board .shadow.light {
  background-color: rgba(255, 255, 255, 0.05);
}
.game-table .board .shadow.light.out {
  top: 0;
  left: 0;
}
.game-table .board .shadow.light.in {
  right: 0;
  bottom: 0;
}
.game-table .board .shadow.dark {
  background-color: rgba(1, 1, 1, 0.17);
}
.game-table .board .shadow.dark.in {
  top: 0;
  left: 0;
}
.game-table .board .shadow.dark.out {
  right: 0;
  bottom: 0;
}
.game-table .board .notation {
  display: flex;
  position: absolute;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: wheat;
  text-align: center;
}
.game-table .board .notation.hidden {
  display: none;
}
.game-table .board .notation.vertical {
  flex-direction: column;
  left: 0;
  height: 93.2%;
  top: 3.4%;
  padding-left: 0.8%;
}
.game-table .board .notation.vertical.pov-black {
  flex-direction: column-reverse;
}
.game-table .board .notation.vertical .txt {
  width: 3.4%;
  height: 12.5%;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}
.game-table .board .notation.horizontal {
  flex-direction: row;
  width: 93.2%;
  bottom: 0;
  left: 3.4%;
}
.game-table .board .notation.horizontal.pov-black {
  flex-direction: row-reverse;
}
.game-table .board .notation.horizontal .txt {
  width: 12.5%;
  text-align: center;
}
.game-table .board .squareContainer {
  background-image: url('../../Images/Boards/wood2.png');
  position: absolute;
  top: 3.4%;
  left: 3.4%;
  width: 93%;
  height: 93%;
  touch-action: none;
}
.game-table .board .pieceContainer {
  position: absolute;
  top: 3.4%;
  left: 3.4%;
  width: 93%;
  height: 93%;
  touch-action: none;
}
.game-table .board .square {
  width: 12.5%;
  height: 12.5%;
  position: absolute;
  touch-action: none;
}
.game-table .board .square.highlight {
  box-shadow: inset 0 0 1rem 2px yellow;
}
.game-table .board .piece {
  width: 12.5%;
  height: 12.5%;
  position: absolute;
  touch-action: none;
}
.game-table .board .shadow-piece {
  -webkit-filter: brightness(0) blur(0px);
  -moz-filter: brightness(0) blur(0px);
  -o-filter: brightness(0) blur(0px);
  -ms-filter: brightness(0) blur(0px);
  filter: brightness(0) blur(0px);
  z-index: 99;
  opacity: 0;
}
.game-table .board .square-indicator {
  width: 12.5%;
  height: 12.5%;
  position: absolute;
}
.game-table .board .stm-indicator {
  z-index: 3;
  width: 3%;
  height: 3%;
  position: absolute;
  border-radius: 50%;
  right: 0;
}
.game-table .board .stm-indicator.indicator-top {
  top: 0;
}
.game-table .board .stm-indicator.indicator-bottom {
  bottom: 0;
}
.game-table .board .stm-indicator.stm-indicator-white {
  background-color: white;
}
.game-table .board .stm-indicator.stm-indicator-black {
  box-shadow: inset 0px 0px 0.1rem -0.02rem white;
  background-color: black;
}
.game-table .board-notation {
  position: absolute;
  display: block;
  cursor: default;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*font-size: 1.1rem;*/
  color: wheat;
  text-align: center;
}
.game-table .board-notation.vertical {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}
.game-table .board-notation.horizontal {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: row;
}
.game-table .board-shadow {
  position: absolute;
  z-index: 2;
}
.game-table .board-shadow.light {
  background-color: rgba(255, 255, 255, 0.15);
}
.game-table .board-shadow.dark {
  background-color: rgba(1, 1, 1, 0.17);
}
.game-table .piece {
  z-index: 10;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.game-table .draggedPiece {
  z-index: 100;
}
.game-table .square {
  position: absolute;
  z-index: 1;
}
.game-table .square.white {
  background-image: url('../../Images/Boards/wood5.png');
}
.game-table .square.black {
  background-image: url('../../Images/Boards/wood2.png');
}
.game-table .square.highlight1,
.game-table .square.highlight2 {
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem yellow 0 0 1.2rem 0.5rem yellow;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem yellow 0 0 1.2rem 0.5rem yellow;
  box-shadow: inset 0 0 0.5rem 0.1rem yellow 0 0 1.2rem 0.5rem yellow;
}
.game-table .square-indicator {
  position: absolute;
  z-index: 5;
}
.game-table .square-indicator.highlight {
  /*box-shadow: inset 0 0 0.5rem 0.05rem yellow, 0 0 0.5rem 0.05rem yellow*/
  border: yellow solid 0.02rem;
}
.game-table .square-indicator.important-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem green;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem green;
  box-shadow: inset 0 0 1.2rem 0.5rem green;
  background-color: yellowgreen;
}
.game-table .square-indicator.strong-square {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem green;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem green;
  box-shadow: inset 0 0 0.5rem 0.1rem green;
}
.game-table .square-indicator.attacked-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem red;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem red;
  box-shadow: inset 0 0 1.2rem 0.5rem red;
}
.game-table .square-indicator.highlight-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem yellow;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  box-shadow: inset 0 0 0.5rem 0.1rem yellow;
}
.game-table .square-indicator.warning {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  background-color: orange;
}
.game-table .square-indicator.weak-square {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem red;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem red;
  box-shadow: inset 0 0 0.5rem 0.1rem red;
}
.board-table {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}
.board-table .board {
  background-image: url('../../Images/Boards/wood8.png');
  position: relative;
}
.board-table .board .squareContainer {
  background-image: url('../../Images/Boards/wood2.png');
  position: relative;
}
.board-table .board .square {
  width: 12.5%;
  height: 12.5%;
  position: absolute;
}
.board-table .board .piece {
  width: 12.5%;
  height: 12.5%;
  position: absolute;
}
.board-table .board .square-indicator {
  width: 12.5%;
  height: 12.5%;
  position: absolute;
}
.board-table .board .stm-indicator {
  z-index: 3;
  width: 3%;
  height: 3%;
  position: absolute;
  border-radius: 50%;
  right: 0;
}
.board-table .board .stm-indicator.indicator-top {
  top: 0;
}
.board-table .board .stm-indicator.indicator-bottom {
  bottom: 0;
}
.board-table .board .stm-indicator.stm-indicator-white {
  background-color: white;
}
.board-table .board .stm-indicator.stm-indicator-black {
  box-shadow: 0.01rem 0.01rem rgba(255, 255, 255, 0.75), -0.01rem -0.01rem rgba(255, 255, 255, 0.75), -0.01rem 0.01rem rgba(255, 255, 255, 0.75), 0.01rem -0.01rem rgba(255, 255, 255, 0.75);
  background-color: black;
}
.board-table .board-notation {
  position: absolute;
  display: block;
  cursor: default;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*font-size: 1.1rem;*/
  color: wheat;
  text-align: center;
}
.board-table .board-notation.vertical {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}
.board-table .board-notation.horizontal {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: row;
}
.board-table .board-shadow {
  position: absolute;
  z-index: 2;
}
.board-table .board-shadow.light {
  background-color: rgba(255, 255, 255, 0.15);
}
.board-table .board-shadow.dark {
  background-color: rgba(1, 1, 1, 0.17);
}
.board-table .piece {
  z-index: 10;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.board-table .draggedPiece {
  z-index: 100;
}
.board-table .square {
  position: absolute;
  z-index: 1;
}
.board-table .square.white {
  background-image: url('../../Images/Boards/wood5.png');
}
.board-table .square.black {
  background-image: url('../../Images/Boards/wood2.png');
}
.board-table .square.highlight1,
.board-table .square.highlight2 {
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  box-shadow: inset 0 0 0.5rem 0.1rem yellow;
}
.board-table .square-indicator {
  position: absolute;
  z-index: 5;
}
.board-table .square-indicator.highlight {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  box-shadow: inset 0 0 0.5rem 0.1rem yellow;
}
.board-table .square-indicator.important-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem green;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem green;
  box-shadow: inset 0 0 1.2rem 0.5rem green;
  background-color: yellowgreen;
}
.board-table .square-indicator.strong-square {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem green;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem green;
  box-shadow: inset 0 0 0.5rem 0.1rem green;
}
.board-table .square-indicator.attacked-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem red;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem red;
  box-shadow: inset 0 0 1.2rem 0.5rem red;
}
.board-table .square-indicator.highlight-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem yellow;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem yellow;
  box-shadow: inset 0 0 1.2rem 0.5rem yellow;
}
.board-table .square-indicator.warning {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  background-color: orange;
}
.board-table .square-indicator.weak-square {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem red;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem red;
  box-shadow: inset 0 0 0.5rem 0.1rem red;
}
.play-table {
  position: absolute;
  background-image: url('../../Images/Boards/wood8.png');
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}
.play-table #squareBack {
  background-image: url('../../Images/Boards/wood2.png');
  position: absolute;
}
.play-table .stm-indicator {
  z-index: 3;
  position: absolute;
  border-radius: 50%;
  right: 0;
}
.play-table .stm-indicator.indicator-top {
  top: 0;
}
.play-table .stm-indicator.indicator-bottom {
  bottom: 0;
}
.play-table .stm-indicator.stm-indicator-white {
  background-color: white;
}
.play-table .stm-indicator.stm-indicator-black {
  box-shadow: 0.01rem 0.01rem rgba(255, 255, 255, 0.75), -0.01rem -0.01rem rgba(255, 255, 255, 0.75), -0.01rem 0.01rem rgba(255, 255, 255, 0.75), 0.01rem -0.01rem rgba(255, 255, 255, 0.75);
  background-color: black;
}
.play-table .board-notation {
  position: absolute;
  display: block;
  cursor: default;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*font-size: 1.1rem;*/
  color: wheat;
  text-align: center;
}
.play-table .board-notation.vertical {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}
.play-table .board-notation.horizontal {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: row;
}
.play-table .board-shadow {
  position: absolute;
  z-index: 2;
}
.play-table .board-shadow.light {
  background-color: rgba(255, 255, 255, 0.15);
}
.play-table .board-shadow.dark {
  background-color: rgba(1, 1, 1, 0.17);
}
.play-table .piece {
  z-index: 10;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.play-table .draggedPiece {
  z-index: 100;
}
.play-table .square {
  position: absolute;
  z-index: 1;
}
.play-table .square.white {
  background-image: url('../../Images/Boards/wood5.png');
}
.play-table .square.black {
  background-image: url('../../Images/Boards/wood2.png');
}
.play-table .square.highlight1,
.play-table .square.highlight2 {
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  box-shadow: inset 0 0 0.5rem 0.1rem yellow;
}
.play-table .square-indicator {
  position: absolute;
  z-index: 5;
}
.play-table .square-indicator.highlight {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  box-shadow: inset 0 0 0.5rem 0.1rem yellow;
}
.play-table .square-indicator.important-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem green;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem green;
  box-shadow: inset 0 0 1.2rem 0.5rem green;
  background-color: yellowgreen;
}
.play-table .square-indicator.strong-square {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem green;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem green;
  box-shadow: inset 0 0 0.5rem 0.1rem green;
}
.play-table .square-indicator.attacked-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem red;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem red;
  box-shadow: inset 0 0 1.2rem 0.5rem red;
}
.play-table .square-indicator.highlight-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem yellow;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem yellow;
  box-shadow: inset 0 0 1.2rem 0.5rem yellow;
}
.play-table .square-indicator.warning {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  background-color: orange;
}
.play-table .square-indicator.weak-square {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem red;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem red;
  box-shadow: inset 0 0 0.5rem 0.1rem red;
}
.playingBoard {
  position: absolute;
  background-image: url('../../Images/Boards/wood8.png');
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
}
.playingBoard #squareBack {
  background-image: url('../../Images/Boards/wood2.png');
  position: absolute;
}
.playingBoard .stm-indicator {
  z-index: 3;
  position: absolute;
  border-radius: 50%;
  right: 0;
}
.playingBoard .stm-indicator.indicator-top {
  top: 0;
}
.playingBoard .stm-indicator.indicator-bottom {
  bottom: 0;
}
.playingBoard .stm-indicator.stm-indicator-white {
  background-color: white;
}
.playingBoard .stm-indicator.stm-indicator-black {
  box-shadow: 0.01rem 0.01rem rgba(255, 255, 255, 0.75), -0.01rem -0.01rem rgba(255, 255, 255, 0.75), -0.01rem 0.01rem rgba(255, 255, 255, 0.75), 0.01rem -0.01rem rgba(255, 255, 255, 0.75);
  background-color: black;
}
.playingBoard .board-notation {
  position: absolute;
  display: block;
  cursor: default;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /*font-size: 1.1rem;*/
  color: wheat;
  text-align: center;
}
.playingBoard .board-notation.vertical {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}
.playingBoard .board-notation.horizontal {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: row;
}
.playingBoard .board-shadow {
  position: absolute;
  z-index: 2;
}
.playingBoard .board-shadow.light {
  background-color: rgba(255, 255, 255, 0.15);
}
.playingBoard .board-shadow.dark {
  background-color: rgba(1, 1, 1, 0.17);
}
.playingBoard .piece {
  z-index: 10;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  top: 0;
  left: 0;
}
.playingBoard .draggedPiece {
  z-index: 100;
}
.playingBoard .square {
  position: absolute;
  z-index: 1;
}
.playingBoard .square.white {
  background-image: url('../../Images/Boards/wood5.png');
}
.playingBoard .square.black {
  background-image: url('../../Images/Boards/wood2.png');
}
.playingBoard .square.highlight1,
.playingBoard .square.highlight2 {
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  box-shadow: inset 0 0 0.5rem 0.1rem yellow;
}
.playingBoard .square-indicator {
  position: absolute;
  z-index: 5;
}
.playingBoard .square-indicator.highlight {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem yellow;
  box-shadow: inset 0 0 0.5rem 0.1rem yellow;
}
.playingBoard .square-indicator.important-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem green;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem green;
  box-shadow: inset 0 0 1.2rem 0.5rem green;
  background-color: yellowgreen;
}
.playingBoard .square-indicator.strong-square {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem green;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem green;
  box-shadow: inset 0 0 0.5rem 0.1rem green;
}
.playingBoard .square-indicator.attacked-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem red;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem red;
  box-shadow: inset 0 0 1.2rem 0.5rem red;
}
.playingBoard .square-indicator.highlight-piece {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem yellow;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem yellow;
  box-shadow: inset 0 0 1.2rem 0.5rem yellow;
}
.playingBoard .square-indicator.warning {
  border-radius: 50%;
  -webkit-box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  -moz-box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  box-shadow: inset 0 0 1.2rem 0.5rem orangered;
  background-color: orange;
}
.playingBoard .square-indicator.weak-square {
  border-radius: 10%;
  -webkit-box-shadow: inset 0 0 0.5rem 0.2rem red;
  -moz-box-shadow: inset 0 0 0.5rem 0.2rem red;
  box-shadow: inset 0 0 0.5rem 0.1rem red;
}
#chessboardScreen {
  position: relative;
}
/*.mainlines {
    overflow: hidden;
    background-color: @brown1;

    .locked {
        color: @gray2;
    }

    ul {
        margin: 0;
        padding: 1% 0 0 1%;
        font-size: .75rem;
        list-style-type: none;
        height: 100%;
        overflow: auto;

        li {
            span {
                display: inline-block;
            }

            &:hover {
                background-color: @yellow2;
            }

            .lines-move {
                width: 2rem;
                text-align: center;
            }

            .lines-flag {
                width: 1rem;
                text-align: center;
            }

            .lines-score {
                width: 3rem;
                text-align: center;
            }

            .lines-pv {
                width: 1rem;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
*/
/*flex: 1;
    background-color: @brown1;
    overflow:auto;

    .gameButtons{
        height:1rem;
    }*/
.gameMoves {
  padding: 1%;
  overflow-y: auto;
  overflow-x: hidden;
}
.gameMoves .nag,
.gameMoves .quizNag {
  pointer-events: none;
}
.gameMoves .move {
  white-space: nowrap;
  font-family: ChessAlpha2;
}
.gameMoves .move:hover {
  background-color: #e0ebd3;
}
.gameMoves .move.start {
  border: solid black 0.01rem;
}
.gameMoves .move.current {
  color: #0f4da3;
  border-radius: 15%;
  background-color: aliceblue;
}
.gameMoves .moveNumber,
.gameMoves .result,
.gameMoves .comment,
.gameMoves .nag .quizNag {
  font-family: Arial;
}
.gameMoves:not(.quizMoves) .main .comment {
  font-weight: normal !important;
  font-family: Arial !important;
  font-size: 0.85rem;
  white-space: pre-line;
}
.gameMoves:not(.quizMoves) .main .quizNag {
  font-weight: normal !important;
  font-family: Arial !important;
  font-size: 0.85rem;
  white-space: pre-line;
  color: darkred;
  margin-left: 0.2rem;
}
.gameMoves:not(.quizMoves) .main {
  font-weight: bold;
  display: block;
}
.gameMoves:not(.quizMoves) .main > .main {
  font-weight: normal;
  padding-left: 1rem;
}
.gameMoves:not(.quizMoves) .main > .main > .main {
  font-style: italic;
}
.gameMoves.quizMoves .zemove.quiz {
  display: none;
}
.gamestats-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  grid-gap: 0.5rem;
  height: 100%;
  overflow: auto;
  /*&.vertical {
        flex-direction: column;
    }*/
}
.gamestats-container .left {
  flex: 1;
  overflow-y: auto;
}
.gamestats-container .right {
  /*flex: 1;*/
  max-height: 50%;
  overflow-y: auto;
}
.opening-container {
  flex: 1;
  overflow: auto;
}
.opening-container .opening-lines {
  padding: 1%;
  overflow-y: auto;
  text-align: center;
  font-size: 0.6rem;
  line-height: 0.6rem;
}
.opening-container .opening-lines .opening-line {
  display: flex;
}
.opening-container .opening-lines .opening-line:hover {
  background-color: #e0ebd3;
}
.opening-container .opening-lines .opening-line .move {
  font-size: 1rem;
  font-family: ChessAlpha2;
  /*width: 4rem;*/
  width: 1.3ch;
  white-space: nowrap;
  line-height: normal;
  text-align: left;
}
.opening-container .opening-lines .opening-line .count {
  text-align: right;
  padding-top: 0.4rem;
}
.opening-container .opening-lines .opening-line .percentages {
  display: flex;
  flex: 1 1 auto;
  padding: 0.3rem 0.3rem 0.3rem 0.3rem;
}
.opening-container .opening-lines .opening-line .percentages div {
  overflow: hidden;
  padding-top: 0.1rem;
}
.opening-container .opening-lines .opening-line .percentages div:nth-child(1) {
  background-color: white;
  border-bottom-left-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
}
.opening-container .opening-lines .opening-line .percentages div:nth-child(2) {
  background-color: gray;
}
.opening-container .opening-lines .opening-line .percentages div:nth-child(3) {
  background-color: black;
  color: lightgray;
  border-bottom-right-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.quest-screen .current-select {
  font-family: GROBOLD;
  font-size: 3.5rem;
  text-align: center;
  color: darkgray;
  -webkit-text-stroke: 0.1rem #180d2f;
}
.tactic-progress,
.inplaats,
.visualisatie-progress {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 1rem;
  background-position: center;
  background-image: url('../../../Images/BackGrounds/dialog.svg');
}
.tactic-progress .title,
.inplaats .title,
.visualisatie-progress .title {
  font-family: GROBOLD;
  font-size: 2.5rem;
  text-align: center;
  color: darkgray;
  -webkit-text-stroke: 0.1rem #180d2f;
}
.progress-row {
  font-family: GROBOLD;
  font-size: 2rem;
  justify-content: space-around;
  align-items: center;
  color: lightgray;
  -webkit-text-stroke: 0.1rem #180d2f;
}
.progress-row:hover {
  /*background-color:orange;*/
  filter: brightness(125%);
}
.progress-row .row-title {
  margin: 0.5rem;
}
.progress-row .progress-step {
  position: relative;
  width: 3rem;
  height: 3rem;
}
.progress-row .progress-step .background {
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../../Images/Sunflower.svg');
}
.progress-row .progress-step .number {
  font-size: 1.5rem;
  width: 100%;
  text-align: center;
  justify-self: center;
  position: absolute;
  margin-top: 0.6rem;
}
.progress-row .progress-step .hider {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
}
.selectQuestType {
  position: absolute;
  /*display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;*/
  padding-right: 4%;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.selectQuestType.hidden {
  display: none;
}
.gallery {
  width: 100%;
  height: fit-content;
}
.gallery .gallery-container {
  align-items: center;
  display: flex;
  height: 23rem;
  width: 100%;
  padding: 0 1rem;
  position: relative;
}
.gallery .gallery-container .gallery-item {
  opacity: 1;
  position: absolute;
  transition: all 0.3s ease-in-out;
  z-index: 0;
}
.gallery .gallery-container .gallery-item-l3 {
  left: 10%;
  /*opacity: 0.4;*/
  transform: translateX(-50%) scale(0.5);
}
.gallery .gallery-container .gallery-item-r3 {
  left: 90%;
  /*opacity: 0.4;*/
  transform: translateX(-50%) scale(0.5);
}
.gallery .gallery-container .gallery-item-l3,
.gallery .gallery-container .gallery-item-r3 {
  /*opacity: 0.8;*/
  z-index: 0;
}
.gallery .gallery-container .gallery-item-l2 {
  left: 20%;
  /*opacity: 0.4;*/
  transform: translateX(-50%) scale(0.65);
}
.gallery .gallery-container .gallery-item-r2 {
  left: 80%;
  /*opacity: 0.4;*/
  transform: translateX(-50%) scale(0.65);
}
.gallery .gallery-container .gallery-item-l2,
.gallery .gallery-container .gallery-item-r2 {
  /*opacity: 0.8;*/
  z-index: 1;
}
.gallery .gallery-container .gallery-item-l1 {
  left: 30%;
  transform: translateX(-50%) scale(0.82);
}
.gallery .gallery-container .gallery-item-r1 {
  left: 70%;
  transform: translateX(-50%) scale(0.82);
}
.gallery .gallery-container .gallery-item-l1,
.gallery .gallery-container .gallery-item-r1 {
  /*opacity: 0.8;*/
  z-index: 2;
}
.gallery .gallery-container .gallery-item-m {
  /*opacity: 3;*/
  left: 50%;
  transform: translateX(-50%) scale(1);
  z-index: 3;
}
.gallery .gallery-container .gallery-item-m:not(.locked) {
  filter: drop-shadow(-2px 5px 0.2em rgba(0, 0, 0, 0.35));
}
.gallery .gallery-controls {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  height: 3rem;
  position: relative;
}
.gallery .gallery-controls button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
  font-size: 30px;
  margin: 0 50px;
  padding: 0 12px;
  text-transform: capitalize;
  font-family: GROBOLD;
  font-size: 2rem;
  color: #a9a9a9;
  -webkit-text-stroke: 0.1rem #180d2f;
  width: 15rem;
}
.gallery .gallery-controls .gallery-controls-button:focus {
  outline: none;
}
.gallery .gallery-controls .gallery-controls-previous,
.gallery .gallery-controls .gallery-controls-next {
  position: relative;
}
.gallery .gallery-controls .gallery-controls-previous:active,
.gallery .gallery-controls .gallery-controls-next:active {
  color: white;
}
.gallery .gallery-controls .gallery-controls-previous::before,
.gallery .gallery-controls .gallery-controls-next::after {
  position: absolute;
  font-weight: bold;
  font-size: 3rem;
  line-height: 2rem;
}
.gallery .gallery-controls .gallery-controls-previous:hover::before {
  left: -1rem;
}
.gallery .gallery-controls .gallery-controls-previous::before {
  content: "<";
  transition: left 0.15s ease-in-out;
  left: 0rem;
}
.gallery .gallery-controls .gallery-controls-next::after {
  content: ">";
  transition: right 0.15s ease-in-out;
  right: 0rem;
}
.gallery .gallery-controls .gallery-controls-next:hover::after {
  right: -1rem;
}
.gallery .gallery-nav {
  bottom: -15px;
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 0;
  position: absolute;
  width: 100%;
}
.gallery .gallery-nav li {
  background: #ccc;
  border-radius: 50%;
  height: 10px;
  margin: 0 16px;
  width: 10px;
}
.gallery .gallery-nav li.gallery-item-selected {
  background: #555;
}
.questInfo {
  background-image: url('../../Images/BackGrounds/dialog_1x1.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 1.5rem 0;
  padding: 0.5rem;
  font-size: 30px;
  text-align: center;
  width: 18rem;
  height: 22rem;
}
.questInfo.locked {
  filter: brightness(0.5);
}
.questInfo:hover:not(.locked) {
  cursor: pointer;
  /*filter: drop-shadow(0px 0px 0.5em #00ffff);*/
}
.questInfo .title {
  padding: 0.5rem;
  font-family: GROBOLD;
  font-size: 2rem;
  color: #de9751;
  -webkit-text-stroke: 0.07rem #180d2f;
}
.questInfo .rating {
  margin-top: -0.5rem;
  font-size: 1rem;
}
.questInfo .body {
  text-align: left;
  padding: 0 0.5rem;
  font-size: 1rem;
  padding-bottom: 1rem;
  white-space: pre-wrap;
}
.unlocks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-row-gap: 0.1rem;
  column-gap: 0.1rem;
  overflow: hidden;
  max-height: 13rem;
  position: relative;
}
.unlocks .progress-item {
  position: relative;
  width: 6rem;
  height: 6rem;
  color: #e8ff75;
  font-family: GROBOLD;
  -webkit-text-stroke: 0.15rem #2e6a42;
  font-size: 3rem;
  line-height: 6.2rem;
}
.unlocks .progress-item.locked {
  filter: brightness(0.5);
  color: #8b97b6;
  -webkit-text-stroke-color: #353658;
}
.unlocks .progress-item:hover:not(.locked) {
  filter: drop-shadow(0px 0px 0.1rem #8b97b6);
  -webkit-text-stroke-width: 0.1rem;
  -webkit-text-stroke-color: #e8ff75;
  color: #509b4b;
  cursor: pointer;
}
.unlocks .progress-item .pi-image {
  position: absolute;
  margin: 2%;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('../../Images/Sunflower.svg');
}
.unlocks .progress-item.new-unlocked {
  animation: unlocked-animation 1s;
  -webkit-animation: unlocked-animation 1s;
  -moz-animation: unlocked-animation 1s;
}
.unlocks .progress-item .progressLevel {
  margin-top: 2%;
  width: 100%;
  height: 100%;
  text-align: center;
  justify-self: center;
  /*.grobold-font(3rem;6.2rem;0.15rem);*/
  position: absolute;
}
.questProgressDialog {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 1rem;
  background-position: center;
  background-image: url('../../../Images/BackGrounds/dialog.svg');
  width: 35rem;
}
.questProgressDialog .title {
  font-family: GROBOLD;
  font-size: 2rem;
  text-align: center;
}
.questProgressDialog .tab-buttons {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 1rem;
  list-style: none;
  border-bottom: 0.15rem solid black;
  margin-bottom: -0.05rem;
  margin-right: 0.1rem;
  font-size: 1rem;
}
.questProgressDialog .tab-button {
  border-top-left-radius: 0.35rem;
  border-top-right-radius: 0.35rem;
  border-style: solid;
  border-width: 0.15rem 0.15rem 0 0.15rem;
  display: block;
  padding: 0.3rem 0.5rem;
  background-color: #b66831;
  font-weight: 900;
  margin-left: 0.1rem;
}
.questProgressDialog .tab-button.active {
  background-color: #fbbe82;
  margin-bottom: -0.2rem;
}
.questProgressDialog .tab-pages .pb-container {
  margin-top: 0.5rem;
}
.questProgressDialog .tab-pages .pb-container .life-bar {
  height: 1.8rem;
}
.questProgressDialog .tab-pages .progressSubjects {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*background-color: fadeout(@blue2,20);*/
}
.questProgressDialog .tab-pages .progressSubjects li {
  float: left;
  text-align: center;
  padding: 1% 2% 1% 2%;
  border-radius: 0.5rem 0.5rem 0 0;
  margin-right: 1%;
  background-color: rgba(24, 13, 47, 0.8);
  cursor: default;
  /*transform:translate(0,0.11rem);*/
  border: 0.1rem solid #000000;
}
.questProgressDialog .tab-pages .progressSubjects li.active {
  background-color: rgba(24, 49, 167, 0.7);
  transform: translate(0, 0.12rem);
}
.questProgressDialog .tab-pages .active-tab-page {
  background-color: rgba(24, 49, 167, 0.7);
  overflow: hidden;
  border-radius: 0rem 0rem 1rem 1rem;
}
.questProgressDialog .tab-pages .active-tab-page p {
  margin-bottom: 0;
}
.rpg-menu {
  position: relative;
  height: 100vh;
  pointer-events: none;
}
.rpg-menu.full-menu {
  position: absolute;
  z-index: 15;
  display: flex;
}
.rpg-menu.full-menu.top {
  flex-direction: row;
  width: 100%;
  top: 0;
  height: auto;
}
.rpg-menu.full-menu.right {
  flex-direction: column;
  height: 100%;
  right: 0;
}
.rpg-menu.full-menu .state-button {
  position: relative;
  margin: 0.4rem;
}
.rpg-menu .state-button {
  position: absolute;
}
.rpg-menu.menu-float {
  position: absolute;
  z-index: 5;
  background-color: rgba(255, 255, 255, 0.5);
}
.rpg-menu.menu-float .state-button {
  position: relative;
  margin: 0.4rem;
}
.rpg-menu.menu-float.right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 4rem;
  right: -4rem;
  /*.state-button
            {
                margin-left: 1rem;
            }*/
}
.rpg-menu.menu-float.right .navigation {
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  width: 0.6rem;
  left: -0.6rem;
  pointer-events: all;
  z-index: 5;
}
.rpg-menu.menu-float.right .navigation:hover {
  background-color: yellow;
}
.rpg-menu.menu-float.right.active {
  right: 0;
}
.rpg-menu.menu-float.right.active .navigation {
  transform: rotate(180deg);
}
.rpg-menu .character-profile-summery {
  position: absolute;
  pointer-events: initial;
  width: 13rem;
  top: 1rem;
  left: 1rem;
  background-color: silver;
  padding-left: 1rem;
  border-radius: 1rem;
  border: solid #686b72 0.15rem;
  box-shadow: #8b97b6 0 0 0 calc(0.15rem*1.8), inset 0 0 calc(0.15rem*3) calc(0.15rem*0.3) black;
  outline: solid orange calc(0.15rem*1);
}
.rpg-menu .character-profile-summery:hover {
  outline: solid yellow calc(0.15rem*1);
}
.rpg-menu.menu-start .menu-button,
.rpg-menu.menu-home-resize .menu-button,
.rpg-menu.menu-login .menu-button,
.rpg-menu.menu-home-resize-back .menu-button {
  position: absolute;
  margin: 0;
}
.rpg-menu.menu-start .administratie,
.rpg-menu.menu-home-resize .administratie,
.rpg-menu.menu-login .administratie,
.rpg-menu.menu-home-resize-back .administratie {
  bottom: 1rem;
  left: 45%;
}
.rpg-menu.menu-start .leraarlokaal,
.rpg-menu.menu-home-resize .leraarlokaal,
.rpg-menu.menu-login .leraarlokaal,
.rpg-menu.menu-home-resize-back .leraarlokaal {
  bottom: 1rem;
  left: 55%;
}
.rpg-menu.menu-start .eregalerij,
.rpg-menu.menu-home-resize .eregalerij,
.rpg-menu.menu-login .eregalerij,
.rpg-menu.menu-home-resize-back .eregalerij {
  bottom: 1rem;
  left: calc(1rem + 6rem);
}
.rpg-menu.menu-start .quests,
.rpg-menu.menu-home-resize .quests,
.rpg-menu.menu-login .quests,
.rpg-menu.menu-home-resize-back .quests {
  bottom: 1rem;
  left: 1rem;
}
.rpg-menu.menu-start .arena,
.rpg-menu.menu-home-resize .arena,
.rpg-menu.menu-login .arena,
.rpg-menu.menu-home-resize-back .arena {
  bottom: calc(1rem + 6rem);
  left: 1rem;
}
.rpg-menu.menu-start .analyse,
.rpg-menu.menu-home-resize .analyse,
.rpg-menu.menu-login .analyse,
.rpg-menu.menu-home-resize-back .analyse {
  bottom: 1rem;
  right: 1rem;
}
.rpg-menu.menu-start .rad,
.rpg-menu.menu-home-resize .rad,
.rpg-menu.menu-login .rad,
.rpg-menu.menu-home-resize-back .rad {
  left: 1rem;
  bottom: calc(1rem + 6rem + 4rem);
}
.rpg-menu.menu-start .klas,
.rpg-menu.menu-home-resize .klas,
.rpg-menu.menu-login .klas,
.rpg-menu.menu-home-resize-back .klas {
  left: 1rem;
  top: calc(1rem + 6rem*2);
}
.rpg-menu.menu-start .home,
.rpg-menu.menu-home-resize .home,
.rpg-menu.menu-login .home,
.rpg-menu.menu-home-resize-back .home,
.rpg-menu.menu-start .log-out,
.rpg-menu.menu-home-resize .log-out,
.rpg-menu.menu-login .log-out,
.rpg-menu.menu-home-resize-back .log-out {
  top: 1rem;
  right: 1rem;
}
.rpg-menu.menu-start .resize,
.rpg-menu.menu-home-resize .resize,
.rpg-menu.menu-login .resize,
.rpg-menu.menu-home-resize-back .resize {
  top: calc(1rem + 4rem);
  right: 1rem;
}
.rpg-menu.menu-start .settings,
.rpg-menu.menu-home-resize .settings,
.rpg-menu.menu-login .settings,
.rpg-menu.menu-home-resize-back .settings {
  top: calc(1rem + 4rem*2);
  right: 1rem;
}
.rpg-menu.menu-start .backward,
.rpg-menu.menu-home-resize .backward,
.rpg-menu.menu-login .backward,
.rpg-menu.menu-home-resize-back .backward {
  top: calc(1rem + 4rem*2);
  right: 1rem;
}
.rpg-menu.menu-start .nieuw,
.rpg-menu.menu-home-resize .nieuw,
.rpg-menu.menu-login .nieuw,
.rpg-menu.menu-home-resize-back .nieuw {
  top: calc(1rem + 6rem);
  left: 1rem;
}
.rpg-menu.menu-start .log-in,
.rpg-menu.menu-home-resize .log-in,
.rpg-menu.menu-login .log-in,
.rpg-menu.menu-home-resize-back .log-in {
  top: 1rem;
  left: 1rem;
}
.rpg-menu.menu-start .add-user,
.rpg-menu.menu-home-resize .add-user,
.rpg-menu.menu-login .add-user,
.rpg-menu.menu-home-resize-back .add-user {
  top: calc(1rem + 6rem);
  left: 1rem;
}
.quest-screen .rpg-menu .quests {
  top: 1rem;
  right: 1rem;
  left: unset;
}
/*.menu-admin
{
    .state-button
    {
        right: @state-button-gap-small;

        &.admin, &.home
        {
            top: @state-button-gap-small;
        }

        &.resize
        {
            top: calc(@state-button-gap-small + @state-button-medium-full);
            -ms-align-content: inherit;
            -webkit-align-content: inherit;
            align-content: inherit;
        }

        &.general
        {
            top: calc((@state-button-medium-full * 2) + @state-button-gap-small);
        }

        &.chess
        {
            top: calc((@state-button-medium-full * 2) + @state-button-gap-small);
        }

        &.puzzles
        {
            top: calc((@state-button-medium-full * 3) + @state-button-gap-small);
        }
    }
}*/
/*.menu-min-admin
{
    .state-button
    {
        right: @state-button-gap-small;

        &.admin
        {
            top: @state-button-gap-small;
        }

        &.resize
        {
            top: calc(@state-button-gap-small + @state-button-medium-full);
        }
    }
}
*/
.menu-analyses {
  /*.state-button {
        right: @state-button-gap-small;

        &.home {
            top: @state-button-gap-small;
        }

        &.resize {
            top: calc(@state-button-gap-small + @state-button-medium-full);
        }

        &.database {
            top: calc((@state-button-medium-full * 2) + @state-button-gap-small);
        }

        &.microchip {
            top: calc((@state-button-medium-full * 3) + @state-button-gap-small);
        }

        &.users {
            top: calc((@state-button-medium-full * 5) + @state-button-gap-small);
        }

        &.notation {
            top: calc((@state-button-medium-full * 4) + @state-button-gap-small);
        }

        &.settings {
            bottom: @state-button-gap-small;
        }
    }*/
}
#mainScreen {
  width: 100vw;
  height: 100vh;
  position: relative;
}
#mainScreen .btn-container {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-flow: row-reverse;
  grid-gap: 0.2ch;
}
#mainScreen .btn-container .oi {
  z-index: 15;
}
#mainScreen .btn-container .oi.small {
  margin-top: 0.4rem;
}
#contentScreen {
  width: 100vw;
  height: 100vh;
  /*overflow: hidden;*/
  position: absolute;
  top: 0;
  /*&.full{
        width:100%;
    }*/
}
.rpg-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  -webkit-touch-callout: none;
  user-select: none;
}
.rpg-screen .screen-content {
  width: 100vw;
  padding: 0.7rem;
}
.rpg-screen.quiz-screen .screen-content {
  padding: 0.7rem;
}
.rpg-screen.quiz-screen .button-bar {
  min-height: 1rem;
}
.rpg-screen.quiz-screen .footer {
  min-height: 1rem;
}
.rpg-screen.quiz-screen .stop-button {
  right: 0.1rem;
  top: 0.1rem;
  position: absolute;
}
.rpg-screen.analyses-screen .screen-content {
  width: 100vw;
  padding: 0.7rem;
}
.rpg-screen.analyses-screen .analyses .buttons {
  display: flex;
  flex-direction: row;
  flex: 0 1 1rem;
  grid-gap: 0.2rem;
  color: whitesmoke;
}
.rpg-screen.analyses-screen .analyses .buttons .state {
  color: green;
}
.rpg-screen.analyses-screen .analyses .buttons .icon:hover {
  color: #ecab11;
}
.rpg-screen.analyses-screen .analyses .buttons .icon.state {
  color: green;
}
.rpg-screen.ranking-screen .binnenkort {
  background-image: url('../../../Images/BackGrounds/dialog.svg');
  background-size: 100% 100%;
  position: absolute;
  left: 22rem;
  top: 9rem;
  animation-name: binnenkort-animation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  padding: 1.5rem 2rem 2rem 2rem;
  font-family: GROBOLD;
  font-size: 4.2em;
  margin: 0.5rem 2rem 0.5rem 2rem;
  white-space: pre-line;
  text-align: center;
}
.rpg-screen.arena-screen .attack-on-top {
  z-index: 100;
}
.rpg-screen.arena-screen .arena-report .tw-modal-content {
  transform: translateX(50%);
  margin-top: 6rem;
  padding: 1rem;
  width: 27rem;
}
.rpg-screen.arena-screen .arena-selection {
  position: absolute;
  font-family: GROBOLD;
  width: calc(100%-1.4rem);
  animation: info-animation 0.4s;
  -webkit-animation: info-animation 0.4s;
  -moz-animation: info-animation 0.4s;
}
.rpg-screen.arena-screen .arena-selection .title {
  font-size: 3rem;
  color: #da2424;
  -webkit-text-stroke: 0.1rem #353658;
  text-align: center;
  margin: 8rem 0 2rem 0;
}
.rpg-screen.arena-screen .arena-selection .opponents {
  display: flex;
  justify-content: space-evenly;
  /*&> :first-child{
                    margin-left:0;
                }*/
}
.rpg-screen.arena-screen .arena-selection .opponents .character-battle {
  background-image: url('../../Images/BackGrounds/dialog_1x1.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 10rem;
  padding: 1rem;
  transition: transform 0.6s ease;
  display: flex;
  flex-direction: column;
}
.rpg-screen.arena-screen .arena-selection .opponents .character-battle:hover {
  transform: scale(1.1);
}
.rpg-screen.arena-screen .arena-selection .opponents .character-battle .avatar {
  height: 10rem;
  text-align: center;
  position: relative;
  filter: drop-shadow(0px 0px 0.2rem gray);
}
.rpg-screen.arena-screen .arena-selection .opponents .character-battle .avatar .name {
  color: white;
  font-size: 2rem;
  -webkit-text-stroke: 0.05rem black;
  position: absolute;
  bottom: 0;
  width: 100%;
}
.rpg-screen.arena-screen .arena-selection .opponents .character-battle .avatar .level {
  color: black;
  font-size: 1rem;
  -webkit-text-stroke: 0.03rem white;
  /*position: absolute;
                            bottom: 0;
                            width: 100%;*/
}
.rpg-screen.arena-screen .arena-selection .opponents .character-battle .stats {
  font-size: 1rem;
}
.rpg-screen.arena-screen .arena-selection .opponents .character-battle .stats .stat-holder {
  color: #1831a7;
  display: flex;
  justify-content: space-between;
}
.rpg-screen.arena-screen .battle-zone {
  margin: 1rem;
  width: 96%;
  height: 95%;
  position: relative;
}
.rpg-screen.arena-screen .battle-zone #me {
  left: 5rem;
}
.rpg-screen.arena-screen .battle-zone #you {
  right: 5rem;
}
.rpg-screen.arena-screen .battle-zone .battler {
  position: absolute;
  bottom: 0;
  width: 16rem;
}
.rpg-screen.arena-screen .battle-zone .battler .progress-container {
  margin-bottom: 1rem;
  position: relative;
}
.rpg-screen.arena-screen .battle-zone .battler .progress-container .life-bar {
  position: relative;
  height: 1.7rem;
}
.rpg-screen.arena-screen .battle-zone .battler .progress-container .life-bar .tw-progress-bar {
  position: absolute;
}
.rpg-screen.arena-screen .battle-zone .battler .progress-container meter {
  width: 80%;
  height: 1rem;
  margin-left: 1rem;
  /*&::-webkit-meter-optimum-value {
                            background: green;
                        }

                        &::-webkit-meter-suboptimal-value {
                            background: yellow;
                        }

                        &::-webkit-meter-even-less-good-value {
                            background: red;
                        }

                        &:-moz-meter-optimum::-moz-meter-bar {
                            background: green;
                        }

                        &:-moz-meter-sub-optimum::-moz-meter-bar {
                            background: yellow;
                        }

                        &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
                            background: red;
                        }*/
}
.rpg-screen.arena-screen .battle-zone .battler .battler-image {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 16rem;
}
.rpg-screen.arena-screen .battle-zone .battler .damage-text {
  font-family: GROBOLD;
  font-size: 3rem;
  -webkit-text-stroke: 0.1rem #000000;
  width: 100%;
  color: #da2424;
  text-align: center;
  position: absolute;
  bottom: 12rem;
  opacity: 0;
}
.rpg-screen.arena-screen .battle-zone .battler .shield {
  position: absolute;
  bottom: 0;
  opacity: 0;
  height: 16rem;
  width: 16rem;
  background-image: url('../../../Images/shield.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.rpg-screen.arena-screen .tdialog .content {
  margin-left: 13rem;
  margin-top: 6rem;
  width: 27rem;
  animation-name: info-animation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.rpg-screen.profile-screen {
  display: flex;
  flex-flow: row;
  height: 100%;
  grid-gap: 0.4rem;
}
.rpg-screen.profile-screen.hidden {
  display: none;
}
.rpg-screen.profile-screen .character-overview {
  width: 50%;
  padding: 1.6rem 0 1rem 1.6rem;
}
.rpg-screen.profile-screen .shop {
  width: 50%;
  padding: 1.4rem 1.4rem 1.4rem 0;
}
.rpg-screen.problem-screen .screen-content {
  width: 100vw;
  padding: 0.25rem;
}
.rpg-screen.problem-screen .mainLines {
  flex: 0 1 auto;
}
.rpg-screen.problem-screen .problem-categorizer {
  background-color: whitesmoke;
  font-size: 0.8rem;
}
.rpg-screen.problem-screen .problem-categorizer .fen {
  font-size: 0.7rem;
}
.rpg-screen.problem-screen .problem-categorizer .menubar,
.rpg-screen.problem-screen .problem-categorizer .buttonbar {
  background-color: lightgray;
}
.rpg-screen.problem-screen .problem-categorizer .footer {
  bottom: 1%;
  display: flex;
  background-color: lightgray;
  justify-content: center;
}
.rpg-screen.wheel-screen .binnenkort {
  background-image: url('../../../Images/BackGrounds/dialog.svg');
  background-size: 100% 100%;
  position: absolute;
  left: 22rem;
  top: 9rem;
  animation-name: binnenkort-animation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  padding: 1.5rem 2rem 2rem 2rem;
  font-family: GROBOLD;
  font-size: 4.2em;
  margin: 0.5rem 2rem 0.5rem 2rem;
  white-space: pre-line;
  text-align: center;
}
.rpg-screen.tactic-newscreen .splitter {
  padding-right: 4rem;
}
.rpg-screen.tactic-newscreen .splitter .panel-2 {
  display: flex;
  justify-content: center;
  min-width: 16rem;
}
.rpg-screen.chess-screen.hidden {
  display: none;
}
.rpg-screen.chess-screen .gameTable {
  width: 65%;
}
.rpg-screen.chess-screen .game-progres {
  width: 16rem;
  height: fit-content;
  background-image: url('../../../Images/BackGrounds/dialog.svg');
  padding-bottom: 1rem;
  animation-name: info-animation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  padding: 1rem;
  background-size: 100% 100%;
}
.rpg-screen.chess-screen .game-progres .title {
  text-align: center;
  font-family: GROBOLD;
  font-size: 1.6rem;
  margin-top: 0.4rem;
}
.rpg-screen.chess-screen .game-progres .subTitle {
  font-family: GROBOLD;
  white-space: pre-line;
  text-align: center;
}
.rpg-screen.chess-screen .game-progres .text {
  text-align: center;
  white-space: pre-line;
  padding-top: 0.5rem;
}
.rpg-screen.chess-screen .game-progres .hint {
  text-align: center;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.rpg-screen.chess-screen .game-progres .btn-next {
  text-align: center;
  width: fit-content;
  margin: 1rem auto;
}
.rpg-screen.chess-screen .game-progres .icon {
  position: absolute;
  right: 0;
  bottom: 0;
}
.rpg-screen.admin-screen .screen-content {
  /*width: calc(100vw - @state-button-medium - @state-button-gap-small);
            padding: 0.25rem;*/
}
.picture-frame {
  position: absolute;
  background-image: url('../../Images/Frame.png');
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  z-index: 10;
  background-size: 100% 100%;
  pointer-events: none;
}
#Profile {
  background-image: none;
}
@keyframes bg-slide {
  /*from
    {
        transform: translateX(100%);
    }

    to
    {
        transform: translateX(50%);
    }*/
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1000% 0;
  }
}
.background {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 72%;
}
.background .pixel-image {
  background-repeat: repeat-x;
}
.background.nieuw-castle {
  background-color: #5ee9e9;
  position: absolute;
  width: 100vw;
  height: 100vh;
}
.background.nieuw-castle .pixel-image {
  /*background-size: initial;*/
  background-position: 62% 100%;
  width: 100%;
  height: 200%;
  position: absolute;
}
.background.nieuw-castle .Clouds {
  animation: bg-slide 400s linear infinite;
  background-repeat: repeat-x;
}
@media (min-aspect-ratio: 16/9) {
  .background {
    background-size: 100% 100% !important;
  }
}
.background.arena {
  background-image: url('../../Images/Backgrounds/arena.png');
}
.background.beach {
  background-image: url('../../Images/Backgrounds/beach.png');
}
.background.castle {
  background-image: url('../../Images/Backgrounds/castle_scaled.png');
}
.background.ranking {
  background-image: url('../../Images/Backgrounds/ranking.svg');
  background-position: bottom;
}
.background.construction {
  background-image: url('../../Images/Backgrounds/castle_construction.svg');
}
.background.blue-marble {
  background-repeat: repeat;
  background-size: initial;
  background-position: initial;
  background-image: url('../../Images/marble_3.png');
}
.screen-content {
  position: absolute;
  width: 100vw;
  height: 100vh;
}
.full-menu.top .popup-menu {
  top: 3.5rem;
}
.full-menu.top .popup-menu.notation-popup {
  transform-origin: 50% -30%;
  left: -4.2rem;
}
.full-menu.top .popup-menu.gamestats-popup {
  transform-origin: 50% -30%;
  left: -4.2rem;
}
.full-menu.right .popup-menu {
  right: 3.5rem;
}
.full-menu.right .popup-menu.notation-popup {
  transform-origin: 120% 70%;
  top: -3rem;
}
.full-menu.right .popup-menu.gamestats-popup {
  transform-origin: 120% 70%;
  top: -1.5rem;
}
.full-menu .popup-menu {
  border: 0.15rem solid black;
  background-color: #f0d2af;
  position: absolute;
  padding: 0.5rem;
  border-radius: 0.5rem;
  z-index: -1;
  transform: scale(0);
  transition: transform 400ms ease 0ms;
}
.full-menu .popup-menu.pop-up {
  transform: scale(1);
}
.full-menu .popup-menu .checkbox-button {
  width: max-content;
}
.full-menu .popup-menu .checkbox-button input {
  vertical-align: middle;
  margin-top: 0.2rem;
  width: 0.9rem;
  height: 0.9rem;
}
.full-menu .popup-menu .checkbox-button label {
  vertical-align: middle;
  padding-left: 0.5rem;
}
.full-menu .notation-popup .checkbox-button {
  width: max-content;
}
.full-menu .notation-popup .checkbox-button label {
  padding-left: 0.5rem;
}
.tw-progress {
  position: relative;
  background-color: #7bcf5c;
  overflow: hidden;
  border-radius: 0.25rem;
  box-shadow: inset 0 -0.2rem 0 0 #509b4b;
  border: 0.1rem solid #000000;
  height: 1.7rem;
  line-height: 1.3rem;
  font-size: 1.3rem;
}
.tw-progress.life-bar {
  background-color: #da2424;
  box-shadow: inset 0 -0.2rem 0 0 #720d0d;
}
.tw-progress.life-bar .tw-progress-bar {
  background-color: #509b4b;
  box-shadow: inset 0 -0.2rem 0 0 #2e6a42;
}
.tw-progress .tw-progress-bar {
  background-color: #2e6a42;
  box-shadow: inset 0 -0.2rem 0 0 #1a453b;
  font-weight: bold;
  color: #ffffff;
  -webkit-text-stroke-width: 0.05rem;
  -webkit-text-stroke-color: #000000;
  white-space: nowrap;
  width: 0.1%;
  position: absolute;
  height: 100%;
}
.tw-progress .progress-value {
  font-weight: bold;
  color: #ffffff;
  -webkit-text-stroke-width: 0.03rem;
  -webkit-text-stroke-color: #000000;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  line-height: 1.4rem;
  font-size: 1.3rem;
  position: absolute;
  height: 100%;
  width: 100%;
}
.wheel {
  background-image: url('../../Images/Items/Rad.png');
  top: 50%;
  left: 50%;
  position: absolute;
}
.wheel.animate-wheel-rotation {
  animation: wheel-rotation 10s infinite linear reverse;
}
@keyframes wheel-rotation {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.flex-panel {
  display: flex;
  overflow: hidden;
  /*    height: 100%;
    width:100%;*/
}
/* flex-item > flex {
    position: absolute;
    width: 100%;
    height: 100%;
} */
.flex-panel.H {
  flex-direction: row;
}
.flex-panel.V {
  flex-direction: column;
}
.flex-item {
  /* display: flex; */
  /* position: relative; */
  /* overflow: hidden; */
  overflow: auto;
}
.flex-panel > .flex-resizer {
  flex: 0 0 10px;
  /* background: white; */
  /*background-color: #aaa;*/
  background-repeat: no-repeat;
  background-position: center;
  touch-action: none;
}
.flex-panel.H > .flex-resizer {
  cursor: ew-resize;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='white'/></svg>");
}
.flex-panel.H > .flex-resizer.dragging {
  cursor: col-resize;
  background-color: #aaa;
}
.flex-panel.V > .flex-resizer {
  cursor: ns-resize;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='10'><path d='M0 2 h30 M0 5 h30 M0 8 h30' fill='none' stroke='white'/></svg>");
}
.flex-panel.V > .flex-resizer.dragging {
  cursor: row-resize;
  background-color: #aaa;
}
.splitter {
  /*width: 100%;
    height: 100%;
    display: flex;*/
  /*color: white;*/
}
.splitter .panel1 {
  width: 65px;
  min-width: 10px;
  background-color: red;
}
.splitter .panel2 {
  width: 35px;
  min-width: 10px;
  background-color: green;
}
.splitter .resizer {
  cursor: e-resize;
}
.splitter .resizer .inner {
  height: 100%;
  width: 0.5rem;
  margin: 1px;
  border-radius: 0.25rem;
  /*border: 1px white solid;*/
}
.splitter .resizer .inner.light-up {
  background-color: orange;
}
.switch {
  height: 1rem;
  margin-top: 0.1rem;
  /*position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);*/
}
.switch .toggle-button {
  background: gray;
  width: 2.25em;
  border-radius: 0.75em;
  padding: 0.1em;
  cursor: pointer;
  transition: all 300ms ease-in-out;
}
.switch .toggle-button.active {
  background-color: green;
}
.switch .toggle-button.active .inner-circle {
  margin-left: 1.05em;
}
.switch .toggle-button .inner-circle {
  background: white;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  transition: all 300ms ease-in-out;
}
.panel {
  /*display: block;*/
}
.panel.vertical-panel {
  /*display: flex;
        flex-flow: column;
        grid-gap: 0.2rem;
        height: 100%;*/
}
.panel.horizontal-panel {
  /*display: flex;
        flex-flow: row;
        grid-gap: 0.2rem;*/
}
div.vertical-panel {
  display: flex;
  flex-flow: column;
  grid-gap: 0.5rem;
  height: 100%;
}
div.horizontal-panel {
  display: flex;
  flex-flow: row;
  grid-gap: 0.5rem;
}
.checkbox-group {
  display: flex;
  align-items: center;
}
.autocomplete {
  display: flex;
}
.pixel-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tabbed-page .button-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 0;
  margin-top: 0;
  /*padding-top: 1rem;*/
  border-bottom: 0.15rem solid black;
  margin-bottom: -0.05rem;
  margin-right: 0.1rem;
  font-size: 1rem;
  border-color: black;
}
.tabbed-page .button-container .btn-tab {
  border-top-left-radius: 0.35rem;
  border-top-right-radius: 0.35rem;
  border-style: solid;
  border-width: 0.15rem 0.15rem 0 0.15rem;
  display: block;
  padding: 0.3rem 0.5rem;
  font-weight: 900;
  margin-left: 0.1rem;
  background-color: #b66831;
}
.tabbed-page .button-container .btn-tab.active {
  background-color: #fbbe82;
  margin-bottom: -0.2rem;
}
.tabbed-page .panel-container {
  margin-top: 1rem;
  position: relative;
}
.tabbed-page .panel-container .tab-panel {
  position: absolute;
  top: 0;
}
.carousel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80%;
  margin: auto;
}
.carousel .carousel-items {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 400px;
  perspective: 1000px;
  overflow: hidden;
}
.carousel .carousel-items .carousel-item {
  position: absolute;
  width: 350px;
  text-align: center;
  transition: transform 0.4s;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
}
/*.move-transition {
    transition: all 0.3s;
}*/
.snap-transition {
  transition: all 0.25s;
}
.animate-fade-in {
  animation: fade-in 0.3s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate-fade-out {
  animation: fade-out 0.3s;
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.animate-zoom-out {
  animation: animatezoomout 0.4s;
  -webkit-animation: animatezoomout 0.4s;
  -moz-animation: animatezoomout 0.4s;
}
@-moz-keyframes animatezoomout {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
@-webkit-keyframes animatezoomout {
  from {
    -webkit-transform: scale(1);
  }
  to {
    -webkit-transform: scale(0);
  }
}
@keyframes animatezoomout {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}
.animate-zoom-in {
  animation: animatezoomin 0.4s;
  -webkit-animation: animatezoomin 0.4s;
  -moz-animation: animatezoomin 0.4s;
}
@-moz-keyframes animatezoomin {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes animatezoomin {
  0% {
    -webkit-transform: scale(0);
  }
  80% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes animatezoomin {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes login-animation {
  0% {
    transform: translateY(-2rem);
    /* scale(0.5)*/
    opacity: 0;
  }
  70% {
    transform: translateY(10rem);
  }
  100% {
    transform: translateY(8rem);
    /*scale(1)*/
    opacity: 1;
  }
}
@keyframes register-animation {
  0% {
    transform: translateY(-2rem);
    opacity: 0;
  }
  70% {
    transform: translateY(10rem);
  }
  100% {
    transform: translateY(7.5rem);
    opacity: 1;
  }
}
.animate-battle-selection {
  animation: info-animation 0.4s;
  -webkit-animation: info-animation 0.4s;
  -moz-animation: info-animation 0.4s;
}
@keyframes info-animation {
  0% {
    transform: translateY(-100%);
    /* scale(0.5)*/
    opacity: 0;
  }
  70% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(0%);
    /*scale(1)*/
    opacity: 1;
  }
}
@keyframes binnenkort-animation {
  0% {
    transform: translateY(0) rotate(0);
    /* scale(0.5)*/
    opacity: 0;
  }
  70% {
    transform: translateY(60%);
  }
  100% {
    transform: translateY(50%) rotate(20deg);
    /*scale(1)*/
    opacity: 1;
  }
}
.animate-tripple-rotation {
  animation: unlocked-animation 1s;
  -webkit-animation: unlocked-animation 1s;
  -moz-animation: unlocked-animation 1s;
}
@keyframes unlocked-animation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(1080deg);
  }
}
.comp-analyses {
  display: flex;
  align-items: stretch;
}
/* The switch - the box around the slider */
.comp-analyses {
  height: 1rem;
}
.mainlines {
  font-family: ChessAlpha2;
  /* overflow: hidden;*/
  font-size: 1rem;
  flex: 0 1 auto;
}
.mainlines .pv {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding-right: 1rem;
  padding-left: 0.2rem;
}
.mainlines .pv:hover {
  background-color: #e0ebd3;
}
.mainlines .pv .pv-wrap-toggle {
  position: absolute;
  right: 0;
  padding: 0 0.4rem;
}
.mainlines .pv .pv-wrap-toggle:hover {
  background-color: green;
  color: white;
}
.mainlines .pv .score {
  width: 2.2rem;
  text-align: center;
  font-family: 'Comic Sans MS';
  font-weight: bold;
  font-size: 1rem;
  padding-right: 0.1rem;
  margin-right: 0.1rem;
}
.mainlines .pv .depth {
  margin-right: 0.2rem;
}
.mainlines .pv span {
  white-space: nowrap;
}
.mainlines .pv span.san {
  margin-right: 0.25rem;
}
.mainlines .pv span.san:hover {
  color: #180d2f;
}
.mainlines .pv span.score-below {
  background-color: rgba(255, 0, 0, 0.2);
}
.mainlines .pv.no-wrap {
  display: block;
  flex-wrap: initial;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mainlines .pv.no-wrap .pv-wrap-toggle {
  transform: rotate(180deg);
}
.mainlines.locked {
  color: #a3acbe;
}
.mainlines.parsing {
  color: #00ff21;
}
.mainlines.rebuilding {
  color: #0005ff;
}
.mainlines ul {
  margin: 0;
  padding: 0.6% 0 0.6% 0.6%;
  font-size: 0.85rem;
  list-style-type: none;
  height: 100%;
  overflow: auto;
}
.mainlines ul li span {
  display: inline-block;
}
.mainlines ul li:hover {
  background-color: #f7ac37;
}
.mainlines ul li .lines-move {
  width: 2rem;
  text-align: center;
}
.mainlines ul li .lines-flag {
  width: 1rem;
  text-align: center;
}
.mainlines ul li .lines-score {
  width: 2.2rem;
  text-align: center;
  font-family: 'Comic Sans MS';
  font-weight: bold;
  font-size: 0.75rem;
}
.mainlines ul li .lines-pv {
  width: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tdialog {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 49;
  top: 0;
}
.tdialog .content {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: whitesmoke;
  border: solid #303030 0.1rem;
}
.tdialog .content.resizeable {
  resize: both;
  overflow: auto;
}
.tdialog .title-container {
  text-align: center;
  background-color: lightgray;
  position: relative;
  padding: 0.2rem;
}
.tdialog .title-container .icon {
  position: absolute;
  right: 0.25rem;
  top: 0.05rem;
  color: #720d0d;
  font-size: 1rem;
  stroke: none;
  -webkit-text-stroke: unset;
}
.tdialog .title-container .icon:hover {
  color: #da2424;
}
.tdialog .body {
  flex: 1;
}
.tdialog .footer {
  bottom: 0;
  padding: 0.2rem;
  display: flex;
  justify-content: space-evenly;
}
.tdialog.modal {
  background-color: rgba(1, 1, 1, 0.5);
}
.tdialog.rpg .content {
  background-image: url('../../../Images/BackGrounds/dialog.svg');
  background-size: 100% 100%;
  padding: 1rem;
  font-size: 1rem;
  background-color: transparent;
  border: none;
  filter: drop-shadow(0px 0px 5px rgba(244, 247, 249, 0.3));
}
.tdialog.rpg .content .title-container {
  background-color: transparent;
}
.tdialog.rpg .content .title-container .icon {
  top: -0.35rem;
}
.tdialog.rpg .content .title-container .title {
  font-family: GROBOLD;
  font-size: 2rem;
  margin-top: 0.4rem;
}
.tdialog.rpg .content .dialog-subtitle {
  font-family: GROBOLD;
  white-space: pre-line;
  text-align: center;
}
.tdialog.rpg .content .dialog-hint {
  font-family: GROBOLD;
  padding-bottom: 1.5rem;
}
.tdialog.rpg .content .body {
  margin: 0.5em 1em 0.5em 1em;
  white-space: pre-line;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.tdialog.rpg .content .footer button {
  color: #e8ff75;
  font-family: GROBOLD;
  -webkit-text-stroke: 0.09rem #2e6a42;
  font-size: 1.5rem;
  line-height: 2.4rem;
  transition: -webkit-text-stroke-color 0.3s ease-in-out;
  transition: color 0.3s ease-in-out;
  background-color: #2e6a42;
  border-color: #0f2738;
  padding: 0 0.6rem;
  border: 0.15rem solid;
  border-radius: 0.75rem;
}
.tdialog.rpg .content .footer button:hover {
  -webkit-text-stroke-color: #e8ff75;
  color: #509b4b;
}
.tdialog.rpg .content .footer button:hover {
  -webkit-text-stroke-width: 0.05rem;
}
.tdialog.pause-dialog {
  background-color: black;
}
.tdialog.pause-dialog .content {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: black;
  background-position: center;
  border: none;
}
.tdialog.pause-dialog .content .title-container {
  background-color: black;
}
.tdialog.ranking-dialog .content,
.tdialog.wheel-dialog .content {
  left: 24rem;
  top: 10rem;
  animation-name: binnenkort-animation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  padding: 1.5rem 2rem 2rem 2rem;
  font-family: GROBOLD;
  font-size: 4.2em;
  margin: 0.5rem 2rem 0.5rem 2rem;
  white-space: pre-line;
  text-align: center;
}
.tdialog.pgn-properties .tag-container {
  margin: 0.5rem;
}
.tdialog.pgn-properties .tag-container .pgn-propertie {
  display: flex;
}
.tdialog.pgn-properties .tag-container .pgn-propertie label {
  flex: 1;
}
.tdialog.pgn-properties .tag-container .pgn-propertie input {
  width: 13rem;
  margin-left: 0.5rem;
}
.tdialog.engine-search-dialog .radio-span {
  margin-right: 0.5rem;
  white-space: nowrap;
}
.tdialog.engine-search-dialog .radio-span label {
  margin-left: 0.2rem;
}
.tdialog.create-character .body {
  display: flex;
}
.tdialog.create-character.horizontal .content {
  width: 45rem;
}
.tdialog.create-character.horizontal .content .body {
  flex-direction: row;
}
.tdialog.create-character.horizontal .content .body .select,
.tdialog.create-character.horizontal .content .body .character-info {
  width: 50%;
  position: relative;
}
.tdialog.create-character.vertical .content {
  width: 30rem;
}
.tdialog.create-character.vertical .content .title-container {
  margin-top: 2rem;
}
.tdialog.create-character.vertical .content .body {
  flex-direction: column;
}
.tdialog.create-character.vertical .content .body .select,
.tdialog.create-character.vertical .content .body .character-info {
  width: 100%;
  position: relative;
}
.tdialog.create-character.vertical .content .footer {
  padding: 0.2rem 0 2rem 0;
}
.tdialog.create-character .content {
  width: 45rem;
}
.tdialog.create-character .content .body {
  display: flex;
}
.tdialog.create-character .content .body.horizontal {
  flex-direction: row;
}
.tdialog.create-character .content .body.horizontal .select,
.tdialog.create-character .content .body.horizontal .character-info {
  width: 50%;
  position: relative;
}
.tdialog.create-character .content .body.vertical {
  flex-direction: column;
}
.tdialog.create-character .content .body.vertical .select,
.tdialog.create-character .content .body.vertical .character-info {
  width: 100%;
  position: relative;
}
.tdialog.create-character .content .select input[type="radio"] + label {
  font-weight: bold;
}
.tdialog.create-character .content .select label {
  margin-bottom: 0;
}
.tdialog.create-character .content .select h2 {
  font-weight: bold;
  margin-top: 0;
}
.tdialog.create-character .content .select #avatarimage {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 18rem;
  width: 18rem;
  position: relative;
  margin: auto;
}
.tdialog.create-character .content .select #avatarimage button {
  position: absolute;
  border-radius: 50%;
  border: 0.1rem solid;
  color: #000000;
  background-color: #b66831;
  bottom: 1rem;
  width: 2rem;
  height: 2rem;
  margin: 0;
}
.tdialog.create-character .content .select #avatarimage buttonfocus {
  outline: 0;
}
.tdialog.create-character .content .select #avatarimage button.right {
  right: -1rem;
}
.tdialog.create-character .content .select #avatarimage button.left {
  left: -1rem;
}
.tdialog.create-character .content .select #avatarimage button:hover {
  background-color: #de9751;
}
.tdialog.create-character .content .select .input-block {
  margin-top: 2rem;
}
.tdialog.create-character .content .select .input-name input {
  margin-top: 2rem;
  width: 100%;
  text-align: center;
}
.tdialog.create-character .content .character-info {
  margin: auto;
  font-family: GROBOLD;
}
.tdialog.create-character .content .character-info .tw-progress-bar {
  transition: width 0.5s ease-in-out;
}
.tdialog.create-character .content .character-info p {
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 0;
}
.tdialog.create-character .content .character-info .type-container {
  position: relative;
  margin-top: -0.3rem;
  font-size: 1.6rem;
}
.tdialog.create-character .content .character-info .type-container .char-type {
  font-size: 2rem;
}
.tdialog.create-character .content .character-info .type-container button {
  position: absolute;
}
.tdialog.create-character .content .character-info .type-container button.left {
  left: 2rem;
}
.tdialog.create-character .content .character-info .type-container button.right {
  right: 2rem;
}
.tdialog.nag-dialog.modal,
.tdialog.quiz-dialog.modal {
  background-color: transparent;
}
.tdialog.nag-dialog .content,
.tdialog.quiz-dialog .content {
  width: 20rem;
  height: 16rem;
  min-width: 10rem;
  min-height: 6rem;
}
.tdialog.nag-dialog .body,
.tdialog.quiz-dialog .body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-around;
  padding: 1rem;
  overflow: auto;
}
.tdialog.nag-dialog .body .nag-input,
.tdialog.quiz-dialog .body .nag-input,
.tdialog.nag-dialog .body .quiz-input,
.tdialog.quiz-dialog .body .quiz-input {
  white-space: nowrap;
  min-width: 3rem;
  display: flex;
  align-items: center;
}
.tdialog.nag-dialog .body .nag-input input[type=checkbox],
.tdialog.quiz-dialog .body .nag-input input[type=checkbox],
.tdialog.nag-dialog .body .quiz-input input[type=checkbox],
.tdialog.quiz-dialog .body .quiz-input input[type=checkbox] {
  width: 1rem;
}
.tdialog.nag-dialog .body .nag-input input[type=number],
.tdialog.quiz-dialog .body .nag-input input[type=number],
.tdialog.nag-dialog .body .quiz-input input[type=number],
.tdialog.quiz-dialog .body .quiz-input input[type=number] {
  width: 3rem;
  margin-left: 0.3rem;
}
.tdialog.nag-dialog .footer,
.tdialog.quiz-dialog .footer {
  height: fit-content;
}
.tdialog.nag-dialog .footer button,
.tdialog.quiz-dialog .footer button {
  height: fit-content;
}
.tw-modal-dialog {
  position: absolute;
  z-index: 49;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
}
.pgn-loader .content {
  width: 25rem;
  left: 30%;
  top: 30%;
  text-align: center;
}
.pgn-loader .content .title-container {
  top: 0;
  min-height: 1rem;
  /*background-color: lightgray;*/
  position: relative;
  /*padding: 0.2rem;*/
}
.pgn-loader .content .body {
  display: flex;
  flex-flow: column;
  grid-gap: 0.5rem;
  min-height: 3rem;
  padding: 0.3rem;
}
.pgn-loader .content .body input[type='checkbox'] {
  margin: 0 0.1rem 0 0.3rem;
}
.pgn-loader .content .body .name {
  display: flex;
  justify-content: space-around;
}
.pgn-loader .content .body .name input[name="player"] {
  width: 12rem;
}
.pgn-loader .content .body .minmax input {
  width: 3rem;
}
.base-dialog,
.tw-modal-content {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url('../../Images/Backgrounds/dialog.svg');
  position: absolute;
  z-index: 50;
  -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.base-dialog .btn-cancel,
.tw-modal-content .btn-cancel {
  background-color: #da2424;
}
.base-dialog.binnenkort-dialog,
.tw-modal-content.binnenkort-dialog {
  transform: rotate(20deg);
  animation-name: binnenkort-animation;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  padding: 1.5rem 2rem 2rem 2rem;
}
.base-dialog.binnenkort-dialog .dialog-text,
.tw-modal-content.binnenkort-dialog .dialog-text {
  font-family: GROBOLD;
  font-size: 4.2em;
  margin: 0.5rem 2rem 0.5rem 2rem;
  /*        font-size: 1.2em;*/
  /*padding-bottom: 1em;*/
  white-space: pre-line;
  text-align: center;
}
.base-dialog.login-dialog,
.tw-modal-content.login-dialog,
.base-dialog.register-dialog,
.tw-modal-content.register-dialog,
.base-dialog.password-dialog,
.tw-modal-content.password-dialog {
  background-image: url('../../Images/BackGrounds/dialog_1x1.svg');
}
.base-dialog.chess-info .dialog-text,
.tw-modal-content.chess-info .dialog-text {
  font-size: 1.2rem;
}
.base-dialog .ten-icon-cancel,
.tw-modal-content .ten-icon-cancel {
  right: 0;
  top: 0;
}
.base-dialog .ten-icon-cancel:before,
.tw-modal-content .ten-icon-cancel:before {
  content: "X";
}
.base-dialog .dialog-title,
.tw-modal-content .dialog-title {
  font-family: GROBOLD;
  font-size: 2.2rem;
  margin-top: 0.4rem;
  text-align: center;
  /*color: @brown6;
        -webkit-text-stroke: 0.1rem @gray7;*/
}
.base-dialog .dialog-subtitle,
.tw-modal-content .dialog-subtitle {
  font-family: GROBOLD;
  font-size: 1rem;
  text-align: center;
  white-space: pre-line;
}
.base-dialog .dialog-hint,
.tw-modal-content .dialog-hint {
  font-family: GROBOLD;
  font-size: 1rem;
  text-align: center;
  padding-bottom: 1.5rem;
}
.base-dialog .dialog-text,
.tw-modal-content .dialog-text {
  margin: 0.5em 1em 0.5em 1em;
  /*        font-size: 1.2em;*/
  /*padding-bottom: 1em;*/
  white-space: pre-line;
  text-align: center;
}
.base-dialog.ten-dialog,
.tw-modal-content.ten-dialog {
  background-image: url('../../../Images/BackGrounds/dialog.svg');
  filter: drop-shadow(0px 0px 2rem #FFFF533F);
}
.base-dialog.square-dialog,
.tw-modal-content.square-dialog {
  background-image: url('../../Images/BackGrounds/dialog_1x1.svg');
  /* .dialog-text {
            text-align: center;
            font-size: 1rem;
            font-weight: bold;
        }*/
}
.tw-modal-content {
  padding-bottom: 1rem;
}
.load-pgn-dialog .content {
  height: 50%;
  left: 10%;
  top: 20%;
  min-width: 45rem;
  /*&.resizeable {
            overflow: hidden;
        }*/
}
.load-pgn-dialog .content .body {
  overflow: auto;
}
.load-pgn-dialog .content .body .container .name {
  display: flex;
  justify-content: space-around;
}
.load-pgn-dialog .content .body .container .name [type=checkbox] {
  margin-left: 0.5rem;
  margin-top: 0.2rem;
}
.load-pgn-dialog .content .body .container .name label {
  margin-left: 0.2rem;
}
.load-pgn-dialog .content .body .container .name input[name="player"] {
  width: 10rem;
}
.load-pgn-dialog .content .body .container .name .table-container {
  overflow-y: auto;
  overflow-x: hidden;
}
.load-pgn-dialog .table-container {
  width: 100%;
  height: 80%;
}
.load-pgn-dialog .table-container table {
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  /*td:nth-child(5) {
                white-space: nowrap;
                text-align: center;
            }*/
}
.load-pgn-dialog .table-container table thead tr {
  position: sticky;
  top: 0;
  z-index: 1;
  color: lightgray;
  background-color: black;
}
.load-pgn-dialog .table-container table thead tr .wit,
.load-pgn-dialog .table-container table thead tr .zwart,
.load-pgn-dialog .table-container table thead tr .score,
.load-pgn-dialog .table-container table thead tr .eco,
.load-pgn-dialog .table-container table thead tr .datum,
.load-pgn-dialog .table-container table thead tr .partij {
  padding: 0 0.1rem 0 0.1rem;
}
.load-pgn-dialog .table-container table thead tr .wit:hover,
.load-pgn-dialog .table-container table thead tr .zwart:hover,
.load-pgn-dialog .table-container table thead tr .score:hover,
.load-pgn-dialog .table-container table thead tr .eco:hover,
.load-pgn-dialog .table-container table thead tr .datum:hover,
.load-pgn-dialog .table-container table thead tr .partij:hover {
  background-color: #ecab11;
}
.load-pgn-dialog .table-container table tbody tr:hover {
  background-color: #e8ff75;
}
.load-pgn-dialog .table-container table tbody tr.selected {
  background-color: #ece910;
}
.load-pgn-dialog .table-container table .hdr-names {
  display: flex;
  white-space: nowrap;
}
.load-pgn-dialog .table-container table .hdr-names div {
  width: 50%;
  text-align: center;
}
.load-pgn-dialog .table-container table td:nth-child(1) {
  white-space: nowrap;
  text-align: center;
}
.load-pgn-dialog .table-container table td:nth-child(2) {
  white-space: nowrap;
  text-align: center;
}
.load-pgn-dialog .table-container table td:nth-child(3) {
  white-space: nowrap;
  text-align: center;
}
.load-pgn-dialog .table-container table td:nth-child(4) {
  white-space: nowrap;
  text-align: center;
}
.load-pgn-dialog .table-container table .game {
  white-space: nowrap;
  font-family: ChessAlpha2;
  text-align: left;
}
#divLogin .w3-modal-content,
#divRegister .w3-modal-content,
divError .w3-modal-content {
  width: 25rem;
}
.login-dialog.modal,
.register-dialog.modal,
.error-dialog.modal,
.password-dialog.modal {
  background-color: transparent;
}
.login-dialog .content,
.register-dialog .content,
.error-dialog .content,
.password-dialog .content {
  animation: info-animation 0.5s;
}
.login-dialog .content .title,
.register-dialog .content .title,
.error-dialog .content .title,
.password-dialog .content .title {
  font-family: GROBOLD;
  font-size: 2em;
  text-align: center;
}
.login-dialog .content .body .container,
.register-dialog .content .body .container,
.error-dialog .content .body .container,
.password-dialog .content .body .container {
  display: flex;
}
.login-dialog .content .body .container .field-icon,
.register-dialog .content .body .container .field-icon,
.error-dialog .content .body .container .field-icon,
.password-dialog .content .body .container .field-icon {
  margin-top: -0.7rem;
}
.login-dialog .content .body .input,
.register-dialog .content .body .input,
.error-dialog .content .body .input,
.password-dialog .content .body .input {
  text-align: center;
}
.login-dialog .content .body input,
.register-dialog .content .body input,
.error-dialog .content .body input,
.password-dialog .content .body input {
  width: 16rem;
  text-align: center;
  margin-bottom: 1rem;
}
.login-dialog .content .buttons .btn-ok,
.register-dialog .content .buttons .btn-ok,
.error-dialog .content .buttons .btn-ok,
.password-dialog .content .buttons .btn-ok {
  margin-left: 1rem;
}
.login-dialog .content .buttons .btn-cancel,
.register-dialog .content .buttons .btn-cancel,
.error-dialog .content .buttons .btn-cancel,
.password-dialog .content .buttons .btn-cancel {
  margin-right: 1rem;
}
.password-dialog .body {
  align-items: center;
}
.password-dialog .body .code-container .code-input {
  width: 9rem;
  margin-right: 1rem;
}
.settings-dialog {
  width: 50%;
}
.settings-dialog .panel-container {
  height: 10rem;
  width: 20rem;
}
.settings-dialog .account-settings {
  width: 100%;
}
.settings-dialog .account-settings .text-input {
  margin-bottom: 1rem;
}
.settings-dialog .account-settings .text-input span {
  width: 30%;
  display: inline-block;
  text-align: center;
}
.settings-dialog .account-settings .text-input input {
  width: 70%;
}
.settings-dialog .account-settings .text-input input:read-only {
  background-color: #c5cddb;
}
.settings-dialog .account-settings .text-button {
  margin-top: 1rem;
}
.character-profile-summery {
  display: grid;
  grid-template-columns: 40% 60%;
  text-align: center;
}
.character-profile-summery .name {
  text-align: center;
}
.character-profile-summery .menu-avatar {
  grid-row-start: 1;
  grid-row-end: 5;
}
.character-profile-summery .xp {
  pointer-events: none;
}
.character-profile-summery .level {
  pointer-events: none;
}
.character-profile-summery .gold {
  pointer-events: none;
}
.avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 100%;
  width: 100%;
  filter: drop-shadow(0px 0px 0.4em #FFFFFF07);
}
.menu-avatar {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  height: 7rem;
  width: 100%;
}
.menu-avatar:hover {
  filter: drop-shadow(0px 0px 0.2em #00ffff);
}
.character-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-size: 80% 80%;
  background-position: center;
  border-radius: 50%;
  border: 0.1rem solid black;
  background-color: #fbbe82;
}
.character-icon .tooltiptext {
  font-family: GROBOLD;
  -webkit-text-stroke: 0.02rem black;
  visibility: hidden;
  padding: 0.3rem 1rem;
  background-color: #de9751;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  border: 0.1rem solid black;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}
.character-icon:hover .tooltiptext {
  visibility: visible;
}
.shield-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3rem;
  height: 3rem;
  background-repeat: no-repeat;
  background-size: contain;
  font-family: GROBOLD;
  color: #ffffff;
  text-align: center;
  padding-top: 0.9rem;
  background-position: center;
  background-image: url('../../../Images/shield.png');
}
.shield-icon .value {
  font-size: 1.4rem;
  line-height: 1.4rem;
  -webkit-text-stroke: 0.05rem black;
}
.shield-icon .tooltiptext {
  font-family: GROBOLD;
  -webkit-text-stroke: 0.02rem black;
  visibility: hidden;
  padding: 0.3rem 1rem;
  background-color: #de9751;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  border: 0.15rem solid black;
  position: absolute;
  z-index: 1;
}
.shield-icon:hover .tooltiptext {
  visibility: visible;
}
.character-overview {
  display: flex;
  flex-flow: column;
  grid-gap: 0.2rem;
  height: 100%;
  padding: 0.5rem 0.3rem 0rem 0.3rem;
  height: 98.5%;
  grid-row-gap: 0.3rem;
  width: 100%;
}
.character-overview .visual {
  display: grid;
  grid-template-columns: 1fr 3.7fr 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 0.25rem;
  grid-row-gap: 0.25rem;
  height: 50%;
}
.character-overview .visual .avatar-holder {
  height: 100%;
  width: 100%;
  background-image: radial-gradient(#686b72, #000000);
  grid-column: 2;
  border: solid #141020 0.12rem;
  border-radius: 0.5rem;
  grid-row: 1 / span 4;
  position: relative;
}
.character-overview .visual .avatar-holder .character-icon {
  left: 0.5rem;
  top: 0.5rem;
  width: 3rem;
  height: 3rem;
}
.character-overview .powers {
  height: 33%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.5rem;
  grid-row-gap: 0.3rem;
  font-family: GROBOLD;
  -webkit-text-stroke: 0.01rem black;
  font-size: 1.1rem;
}
.character-overview .powers .stats {
  display: grid;
  /*grid-template-columns: 3fr 3rem;*/
  grid-template-rows: 1fr 1fr;
  background-color: #180d2f;
  color: white;
  height: 3.5rem;
  padding: 0.25rem 0.1rem 0.25rem 0.25rem;
  border-radius: 0.35rem;
}
.character-overview .powers .stats .buy-button-holder {
  visibility: hidden;
  height: 0;
}
.character-overview .powers .stats .character-stat {
  grid-column: 1;
  grid-row: 1;
  position: relative;
}
.character-overview .powers .stats .character-stat .stat-text {
  color: white;
}
.character-overview .powers .stats .character-stat .stat-number {
  color: #1831a7;
}
.character-overview .powers .stats .derative-stat {
  grid-column: 1;
  grid-row: 2;
  position: relative;
}
.character-overview .powers .stats .derative-stat .stat-text {
  color: #2890dc;
}
.character-overview .powers .stats .derative-stat .stat-number {
  color: #e8ff75;
}
.character-overview .powers .stats .buy-button {
  grid-column: 2;
  grid-row: 1 / 2;
}
.character-overview .powers .stats .stat-text {
  float: left;
  /*padding-left: 0.2rem;*/
}
.character-overview .powers .stats .stat-number {
  position: absolute;
  right: 0.2rem;
}
.character-overview .boosts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 2fr 1fr;
  grid-column-gap: 0.5rem;
  height: 17%;
  font-size: 1rem;
}
.character-overview .boosts .boost {
  border-radius: 50%;
  border: solid #141020 0.2rem;
  background-image: radial-gradient(#180d2f, #000000);
}
.character-overview .boosts .detail {
  border-radius: 0.5rem;
  border: solid #141020 0.2rem;
  background-color: #000000;
  color: #ffffff;
  text-align: center;
}
.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  height: 100%;
  /*.tacticInfo
    {
        grid-column: ~"5/7";
    }*/
}
.dashboard .overview-row:hover {
  background-color: #f7ac37;
}
.dashboard.hidden {
  display: none;
}
.dashboard .tile {
  background-color: rgba(255, 255, 255, 0.8);
  border: 0.15rem solid rgba(0, 0, 0, 0.8);
  margin: 0.25rem;
  padding: 2%;
  font-size: 0.6rem;
  text-align: center;
  border-radius: 1rem;
  user-select: none;
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  list-style-type: none;
}
.dashboard .tile .title {
  font-size: 1.5rem;
  padding-bottom: 0.1rem;
}
.dashboard .tile .button-bar {
  display: flex;
}
.dashboard .tile .button-bar .oi {
  color: gray;
}
.dashboard .tile .button-bar .oi:hover {
  color: forestgreen;
}
.dashboard .tile .button-bar .oi.state {
  color: orange;
}
.dashboard .tile.busy {
  background-color: #c42c36;
}
.dashboard .tile .container {
  overflow-y: auto;
  height: calc(100% - 3.5rem);
}
.dashboard .tile .container.row-select .overview-row:hover {
  background-color: orange;
}
.dashboard .tile .container.row-select .overview-row.selected {
  background-color: green;
}
.dashboard .tile span {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
}
.dashboard .tile span:first-child {
  float: left;
}
.dashboard .characterInfo {
  grid-column: span 4;
  grid-row: span 2;
}
.dashboard .characterInfo .container div span:nth-child(1) {
  width: 35%;
}
.dashboard .characterInfo .container div span:nth-child(2) {
  width: 25%;
}
.dashboard .characterInfo .container div span:nth-child(3) {
  text-align: left;
  width: 40%;
}
.dashboard #positions div span:nth-child(1) {
  width: 60%;
}
.dashboard #positions div span:nth-child(2) {
  width: 40%;
  text-align: right;
}
.dashboard .problemAdministrationInfo {
  grid-row: span 2;
  grid-column: span 4;
}
.dashboard .problemAdministrationInfo div span:nth-child(1) {
  width: 5%;
}
.dashboard .problemAdministrationInfo div span:nth-child(2) {
  width: 10%;
  text-align: center;
}
.dashboard .problemAdministrationInfo div span:nth-child(3) {
  text-align: center;
  width: 65%;
}
.dashboard .problemAdministrationInfo div span:nth-child(4) {
  text-align: center;
  width: 20%;
}
.dashboard .recalculationInfo {
  grid-column: span 3;
}
.dashboard .recalculationInfo div span:nth-child(1) {
  width: 80%;
}
.dashboard .recalculationInfo div span:nth-child(2) {
  width: 20%;
}
.dashboard .potentialProblemInfo {
  grid-column: span 4;
}
.dashboard .potentialProblemInfo div span:nth-child(1) {
  width: 65%;
}
.dashboard .potentialProblemInfo div span:nth-child(2) {
  width: 10%;
}
.dashboard .pgnInfo {
  grid-column: span 2;
  grid-row: span 2;
}
.dashboard .pgnInfo div span:nth-child(1) {
  width: 75%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dashboard .pgnInfo div span:nth-child(2) {
  width: 25%;
}
.dashboard .collectionInfo {
  grid-column: 3/6;
  /*grid-row: span 2;*/
}
.dashboard .collectionInfo div span:nth-child(1) {
  width: 60%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dashboard .collectionInfo div span:nth-child(2) {
  width: 20%;
}
.dashboard .collectionInfo div span:nth-child(3) {
  width: 20%;
}
.dashboard .playerInfo {
  grid-column: 6/10;
  grid-row: 1/3;
}
.dashboard .playerInfo div span:nth-child(1) {
  width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dashboard .playerInfo div span:nth-child(2) {
  width: 20%;
}
.dashboard .file-upload {
  grid-column: span 3;
  overflow: hidden;
}
#problemInfo .name {
  width: 7rem;
}
#problemInfo .detail {
  width: 4rem;
  text-align: left;
}
#problemInfo .value {
  width: 5rem;
}
.admin-dashboard .name {
  width: 11rem;
  text-align: left;
}
.admin-dashboard .value {
  width: 5rem;
  text-align: right;
}
.emitter {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*    background-color: rgba(255, 255, 255, 0.5);*/
  z-index: 15;
  pointer-events: none;
}
.particle {
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(110vh);
  top: -200px;
}
@keyframes balloon-animation-1 {
  0% {
    top: 110%;
    transform: translateX(0);
  }
  13% {
    transform: translateX(-8%);
  }
  25% {
    transform: translateX(-10%);
  }
  33% {
    transform: translateX(-8%);
  }
  68% {
    transform: translateX(8%);
  }
  75% {
    transform: translateX(10%);
  }
  83% {
    transform: translateX(8%);
  }
  100% {
    top: -20%;
    transform: translateX(0);
  }
}
@keyframes balloon-animation-0 {
  0% {
    top: 110%;
    transform: translateX(0) rotate(0deg);
  }
  13% {
    transform: translateX(8%);
  }
  25% {
    transform: translateX(10%) rotate(2deg);
  }
  33% {
    transform: translateX(8%);
  }
  50% {
    transform: translateX(0) rotate(0deg);
  }
  68% {
    transform: translateX(-8%);
  }
  75% {
    transform: translateX(-10%) rotate(-2deg);
  }
  83% {
    transform: translateX(-8%);
  }
  100% {
    top: -20%;
    transform: translateX(0);
  }
}
.shop {
  width: 100%;
  height: 100%;
  background-image: url('../../../Images/Backgrounds/shop.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: solid 0.12rem black;
  border-radius: 1rem;
}
.shop .buys,
.shop .storage {
  display: grid;
  margin-left: 0.25rem;
  grid-template-rows: 4.6rem 4.6rem;
  grid-template-columns: repeat(5, 4.6rem);
  grid-column-gap: 0.25rem;
  grid-row-gap: 0.25rem;
  height: 100%;
  bottom: 0;
  height: 11.7rem;
  position: absolute;
}
.shop .buys {
  bottom: -0.2rem;
}
.shop .storage {
  top: 2rem;
}
.pet {
  border: solid #141020 0.12rem;
  border-radius: 0.5rem;
  color: white;
  background-image: radial-gradient(#180d2f, #000000);
  padding: 2%;
  /*&.knuffel {
        background-image: radial-gradient(@red1,@gray7);
    }

    &.moed {
        background-image: radial-gradient(@green2,@gray7);
    }

    &.snelheid {
        background-image: radial-gradient(@blue3,@gray7);
    }

    &.vrolijk {
        background-image: radial-gradient(@yellow1,@gray7);
    }

    &.gezondheid {
        background-image: radial-gradient(@purple1,@gray7);
    }

    &.vriendelijk {
        background-image: radial-gradient(@blue1,@gray7);
    }

    &.positiviteit {
        background-image: radial-gradient(@pink1,@gray7);
    }

    &.humor {
        background-image: radial-gradient(@purple3,@gray7);
    }*/
}
.pet .pet-image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
}
.pet.left {
  grid-column: 1;
}
.pet.right {
  grid-column: 3;
}
.pet.empty {
  background-image: radial-gradient(#14102030, #141020a0);
}
.form {
  display: flex;
  flex-flow: column;
}
.form.hidden {
  display: none;
}
.form .state-button {
  margin: 1px 0.1rem 1px 0;
  background-color: burlywood;
}
.form .button-bar {
  display: flex;
  background-color: burlywood;
  padding: 0 0.3rem 0 0.3rem;
  border-radius: 2rem / 7rem;
  border: solid black 0.1rem;
  /*box-shadow: inset 0px 0.5rem 0.5rem -0.5rem #000, inset 0px -0.5rem 0.5rem -0.5rem #000;*/
  box-shadow: inset 0px -0.7rem 0.7rem -0.5rem #000;
}
.form .button-bar.hidden {
  display: none;
}
.form .button-bar .oi {
  color: dimgray;
  padding-top: 0.17rem;
}
.form .button-bar .oi:hover {
  color: #c42c36;
}
.form .content {
  flex: 1;
  background-color: #f0d2af;
  margin: 0 0.3rem;
  border-left: solid black 0.1rem;
  border-right: solid black 0.1rem;
  box-shadow: inset 0px 0.5rem 0.5rem -0.5rem #000, inset 0px -0.5rem 0.5rem -0.5rem #000;
}
.form .footer {
  bottom: 0;
  display: flex;
  background-color: burlywood;
  padding: 0 0.3rem 0 0.3rem;
}
.form .footer:not(.hidden) {
  border-radius: 2rem / 7rem;
  border: solid black 0.1rem;
  box-shadow: inset 0px -0.7rem 0.7rem -0.5rem #000;
}
.form-notation {
  height: 100%;
}
.form-notation .content {
  overflow-y: auto;
}
.form-notation .footer {
  justify-content: center;
}
.form-engine {
  max-height: 50%;
}
.form-engine .state-button.engine-button.running {
  background-color: lawngreen;
}
.form-engine .engine-stats {
  font-size: 0.7rem;
  align-self: center;
  margin-left: auto;
}
.form-engine .engine-stats span {
  margin-right: 0.2rem;
}
.form-engine .line-count {
  width: 2.2rem;
  background-color: burlywood;
  border: 1px solid black;
  margin: 1px 0.1rem 1px 0;
}
.form-engine .content {
  overflow-y: auto;
  box-shadow: inset 0px 0.5rem 0.5rem -0.5rem #000;
}
.form-opening {
  height: 100%;
}
.form-info {
  max-height: 100%;
}
.form-info .content {
  padding: 1%;
  white-space: pre-line;
  transition: height 0.5s linear;
  overflow-y: auto;
}
.form-info .content .move {
  white-space: nowrap;
  font-family: ChessAlpha2;
}
.form-info .content .lb {
  height: 0.3rem;
}
.form-info .tekst {
  padding: 0.1rem 0;
}
.form-info .continue {
  padding-right: 2rem;
  text-align: right;
}
.form-input {
  position: absolute;
  top: 20%;
  left: 30%;
  z-index: 46;
}
.form-input .content textarea {
  overflow: hidden;
  margin: 0.3rem;
}
.form-input .button-bar {
  min-height: 1rem;
}
.form-input .buttons {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 0.3rem;
}
.form-input .footer {
  min-height: 1rem;
}
body {
  height: 100vh;
  margin: 0;
  /*background-image: url('../../Images/backgrounds/castle_scaled.png');
    background-size:cover;
    background-repeat:no-repeat;*/
  color: #000000;
  font-family: 'Comic Sans MS';
}
#wrapper {
  height: 100vh;
  height: 100vw;
}
.no-pointer {
  pointer-events: none;
}
.hor-container {
  display: flex;
  flex-direction: column;
}
.ver-container {
  display: flex;
  flex-direction: row;
}
.main-menu {
  width: 20%;
  display: flex;
  flex-direction: column;
}
.main-menu.hidden {
  display: none;
}
.mainmenu {
  grid-column: 1;
  grid-row: 1;
  /*background-color: @blue6;*/
  width: 20%;
  height: 100%;
}
.mainmenu .menu-default {
  position: relative;
  height: 100%;
}
.mainmenu .settings {
  color: whitesmoke;
  position: absolute;
  bottom: 0.1rem;
  margin: 0 1rem 0 1rem;
}
.mainmenu .settings span {
  margin-left: 0.5rem;
}
.wait {
  position: absolute;
  background-image: url('../../../Images/wait.png');
  background-size: cover;
  top: 45%;
  left: 45%;
  width: 2rem;
  height: 2rem;
}
.wait.rotate {
  animation: spin 3s linear infinite;
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.waitwrapper {
  /*position: relative;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;*/
}
::-webkit-scrollbar {
  width: 0.3rem;
  height: 0.3rem;
}
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
  box-shadow: inset 0 0 0.1rem grey;
  border-radius: 0.15rem;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 0.15rem;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
::-webkit-scrollbar-corner {
  visibility: hidden;
}