/* ---- ../../Common/Resources/CSS/ChessNew.css ---- */
/*/////////////////////*/


/****************************************/

/*.clsNotation
{
   font-size: 13px;
   font-family: sans-serif;
}*/

.ChessBoard2D
{
   cursor: pointer;
}

/************* database grid:*/

.dbPlayerCell
{
}

.dbEventCell
{
   font-style: italic !important;
}

.dbResultCell
{
   font-weight: bold !important;
}

.video
{
   background-color: #606060;
}

.plNameCell
{
   font-weight: 500 !important;
   text-indent: 12px !important; /* make space for icon */
}

.plEloCell
{
}

.plDefaultCell
{
}

.plStatCell
{
   /*	text-indent: 14px !important;
	color: #bbb;*/
   color: #444;
}

.plRankCell
{
   color: #444;
}

.gmWhiteCell
{
   font-weight: 400 !important;
   text-indent: 13px !important; /* make space for icon */
   font-size: larger;
}

.gmBlackCell
{
   font-weight: 400 !important;
   font-size: larger;
}

.gmEloCell
{
}

.gmLine
{
}

.gmMoves
{
   /*font-style: italic;*/
   font-size: 95%;
}

.gmPremiumOnly
{
   font-size: 90%;
}

.gmPremiumOnly a
{
   color: hsla( 0, 50%, 40%, 0.7 );
}

.gmPremiumOnly a:hover
{
   color: hsla( 0, 60%, 50%, 1.0 );
}

.liveBookMove
{
   font-size: 100%;
   font-weight: 600 !important;
}

.liveBookMoreMoves
{
   font-size: 75%;
   font-weight: normal;
/*   padding-left: 0.1em;*/
}

.liveBookMyLine
{
   font-weight: 600 !important;
   font-size: 108%;
}

.liveBookMoveInRep
{
   font-weight: 600 !important;
   font-size: 108%;
}

.liveBookMoveImportant
{
   font-weight: 600 !important;
   font-size: 110%;
}

.liveBookBoth
{
   color: darkcyan;
}

.liveBookWhite
{
   color: blue;
}

.liveBookBlack
{
   color: hsl( 130, 85%, 25% );
}

.liveBookGames
{
}

.liveBookResult
{
}

.liveBookEval
{
   /*color: hsla( 120, 50%, 20%, 1.0 );*/
   font-size: 115%;
   text-shadow:1px 1px 1px rgba(0, 0, 0, 0.25);
}

.liveBookEloAvg
{
}

.liveBookVisits
{
   font-weight: 400 !important;
}

.liveBookPlayers
{
   font-style: italic;
   font-size: 95%;
}


	@media screen and (min-width: 800px) and (min-height: 600px)
	{
		.dbPlayerCell
   {
      font-weight: 700 !important;
   }
}

@media screen and (min-width: 1000px) and (min-height: 700px)
{
   .dbPlayerCell
   {
      font-size: 110%;
   }

   .plNameCell
   {
      font-size: larger;
   }

   .liveBookMove
   {
      font-size: 115%;
      font-weight: 600 !important;
   }

   .liveBookMyLine
   {
      font-weight: 600 !important;
      font-size: 130%;
   }

   .liveBookMoveInRep
   {
      font-weight: 600 !important;
      font-size: 138%;
   }

   .liveBookMoveImportant
   {
      font-weight: 600 !important;
      font-size: 135%;
   }
}


/*HACK*/
#tbBookGrid .x-grid-cell-inner
{
   direction: ltr;
}

/*HACK*/
#tbPanelGrid .x-grid-cell-inner
{
   direction: ltr;
}

.gmMoveLen
{
}

.gmKibitzers
{
}

.gmTourn
{
   font-style: italic;
}

.challName
{
   font-weight: 400 !important;
   text-indent: 13px !important; /* make space for icon */
}


.clsPing
{
   font-weight: bold;
   background-color: #DCF7CC;
   font-size: larger;
}

.clsWait
{
   cursor: wait;
}

.clsPointer
{
   cursor: crosshair;
}

.TournGroup-live
{
   color: #108810;
}

.TournGroup-finished
{
   color: #333333;
}


/*************************************/

.NonMobiH1
{
   font-size: 21px;
   text-align: center;
   font-family: sans-serif;
}

.NonMobiH3
{
   font-size: 17px;
   text-align: center;
   font-family: sans-serif;
}

.NonMobiBody
{
   font-size: 17px;
   text-align: center;
   font-family: sans-serif;
}

.NonMobiLink
{
   color: red !important;
   font-family: sans-serif;
   text-align: center;
   font-size: 20px;
}

   .NonMobiLink:visited
   {
      color: black !important;
   }


table.scroll
{
   border-spacing: 0;
   border: 0px;
   padding: 1px;
}

table.notaTable
{
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}

/***********************/

.PlaychessLogoInRibbon
{
   background-image: url( 'media/playchess_48pix.png');
   background-repeat: no-repeat;
   background-position: center;
   vertical-align: middle;
}

.cb-button
{
   border-radius: 1px;
   border: 1px solid gray;
   font-size: 12px;
   font-family: Roboto, sans-serif;
   font-weight: normal;
   color: white;
}

   .cb-button:disabled
   {
      color: lightgrey;
      border-color: gray;
   }

.cb-CloseButton
{
   border-radius: 1px;
   border: 1px solid gray;
   /* background-color: rgb( 220, 50, 0 );*/
   background-image: linear-gradient(to bottom right, rgb(255,6,19),rgb(187,24,23));
   color: white;
   font-weight: bold;
   padding: 0px; /* essential for proper centering in small buttons*/
}

   .cb-CloseButton:hover
   {
      /*background-color: rgb( 240, 100, 50 );*/
      background-image: linear-gradient(to bottom right, rgb(255,255,19),rgb(147,140,13));
   }

   .cb-CloseButton:active
   {
      /*background-color: rgb( 200, 100, 60 );*/
      background-image: linear-gradient(to bottom right, rgb(155,155,39),rgb(137,114,33));
   }

@media screen and (min-height: 600px)
{
   .cb-CloseButton
   {
      border-radius: 3px;
      border: 1px solid #aaaaaa;
   }
}


#posInputBtnsBG .cb-button
{
   border-radius: 4px;
   background-color: hsla( 35, 57%, 82%, 0.4); /* rgba(238, 213, 183, 0.4); */
   box-shadow: 2px 2px 4px 0px hsla( 35, 57%, 10%, 0.2);
}

   #posInputBtnsBG .cb-button:hover
   {
      background-color: hsla( 35, 57%, 82%, 0.6); /* rgba(238, 213, 183, 0.4); */
   }

   #posInputBtnsBG .cb-button:active
   {
      background-color: hsla( 35, 57%, 82%, 0.8); /* rgba(238, 213, 183, 0.4); */
   }


#content
{
   position: absolute;
   top: 50px;
   left: 0;
   right: 0;
   bottom: 50px;
   overflow: scroll;
   -webkit-overflow-scrolling: touch;
}

/**************** Forms *****************/

.formSubTitle
{
   font-weight: bold;
}

/*****************************************/
/**
    CRAZY SHIT for TPL
*/
tpl[if="0"],
tpl[if=""]
{
   display: none;
}


/***********************
    ENGINE -> Engine.csss
*/

/*.lines-container
{
   overflow-y: auto;
   width: 100%;
   height: 100%;
   padding: 4px;
}

.engine-lines
{
   font-family: Roboto, sans-serif;
   font-size: 0.85em;
}

@media screen and (min-height: 300px)
{
   .engine-lines
   {
      font-size: 0.9em;
   }
}

@media screen and (min-height: 400px)
{
   .engine-lines
   {
      font-size: 0.95em;
   }
}

@media screen and (min-height: 500px)
{
   .engine-lines
   {
      font-size: 1.00em;
   }
}

@media screen and (min-height: 600px)
{
   .engine-lines
   {
      font-size: 1.05em;
   }
}

@media screen and (min-height: 700px)
{
   .engine-lines
   {
      font-size: 1.1em;
   }
}

@media screen and (min-height: 800px)
{
   .engine-lines
   {
      font-size: 1.15em;
   }
}

@media screen and (min-height: 900px)
{
   .engine-lines
   {
      font-size: 1.2em;
   }
}

.engine-lines .line
{
   font-family: Roboto, sans-serif;
   padding-bottom: 2px;
   padding-top: 2px;
}

   .engine-lines .line .nota
   {
      padding-bottom: 2px;
      white-space: nowrap;
      text-overflow: ellipsis;
   }

   .engine-lines .line.outdated .nota
   {
      color: darkgray;
   }

.infoHandicap
{
   color:red;
   font-weight:bold;
}

.engine-info-text 
{
   width: 100%;
   height:100%;
}

.findStrong
{
   font-size: 120%;
   font-weight:bold;
   padding: 20px;
   animation: engineAnimFlash 1.0s ease;
   animation-iteration-count: 5;
}

.startSearch
{
   font-size: 120%;
   color: hsla( 0, 0%, 30%, 0.4);
   padding: 20px;
   text-transform:uppercase;
}

.engineStopped
{
   font-size: 110%;
   color: hsla( 10, 20%, 30%, 0.4);
   padding: 10px;
   text-transform: uppercase;
}

.EngineHelpText
{
   font-size: 110%;
}

.EngineHelpText ul
{
   font-family:Roboto;
   margin:4px!important;
   padding:5px!important;
}

@keyframes engineAnimFlash
{
   0%, 100%
   {
      opacity: 1;
   }

   50%
   {
      opacity: 0.3;
   }
}

.engine-lines[data-lines="1"] .line .nota
{
   font-weight: bold;
   white-space: inherit;
   text-overflow: inherit;
}

.engine-lines .line .nota .pvnum
{
   margin-right: 4px;
}

   .engine-lines .line .nota .pvnum:after
   {
      content: ".";
   }

.engine-lines .line .nota .symbol
{
   margin-right: 2px;
}

.engine-lines .data,
.engine-lines .data-common
{
   font-size: 90%;
   font-weight: normal;
   color: darkslategray;
   padding-left: 1em;
}

.engine-lines .line .data
{
   display: none;
}

.engine-lines[data-lines="1"] .line .data
{
   display: inherit;
}

.engine-lines .data-common
{
   display: inherit;
}

.engine-lines[data-lines="1"] .data-common
{
   display: none;
}

.engine-lines[data-lines="1"] .pvnum
{
   display: none;
}
.engine-lines .evStr
{
   font-weight:normal;
   font-size: 90%;
   padding-left: 1em;
   margin-top:0.3em;
   color: hsla( 180, 30%, 10%, 0.8 );
}*/

div.board-toolbar div.brd-btn
{
   display: inline-block;
   height: 100%;
   /*margin-right: 8px;*/
}

   div.board-toolbar div.brd-btn div.icn
   {
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      margin: 10% auto;
      height: 80%;
   }

   div.board-toolbar div.brd-btn[data-enabled="false"] div.icn
   {
      opacity: 0.3;
   }

   div.board-toolbar div.brd-btn[data-on="true"]
   {
      background-color: rgba(255,255,255,0.5);
   }

div.board-toolbar div.brd-btn
{
   background-color: rgba(255,255,255,0.1);
}

   div.board-toolbar div.brd-btn:hover
   {
      background-color: rgba(255,255,255,0.3);
   }

   div.board-toolbar div.brd-btn:active
   {
      background-color: rgba(255,255,255,0.5);
   }

   div.board-toolbar div.brd-btn div.txt
   {
      display: none;
   }

div.board-toolbar[data-cnt="1"] div.brd-btn
{
   width: 100%;
}

div.board-toolbar[data-cnt="2"] div.brd-btn
{
   width: 50%;
}

div.board-toolbar[data-cnt="3"] div.brd-btn
{
   width: 33%;
}

div.board-toolbar[data-cnt="4"] div.brd-btn
{
   width: 25%;
}

div.board-toolbar[data-cnt="5"] div.brd-btn
{
   width: 20%;
}

div.board-toolbar[data-cnt="6"] div.brd-btn
{
   width: 16%;
}

div.board-toolbar[data-cnt="7"] div.brd-btn
{
   width: 14.27%;
}

div.board-toolbar[data-cnt="8"] div.brd-btn
{
   width: 12.5%;
}

/**************************************************************/
.board-msg
{
   /*font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Roboto, Arial, Helvetica, sans-serif;*/
   font-family: Roboto, sans-serif;
}

   .board-msg.modal
   {
      z-index: 20;
   }

      .board-msg.modal:after
      {
         content: "";
         position: absolute;
         left: -10000px;
         top: -10000px;
         right: -10004px;
         bottom: -10004px;
         border-color: rgba(0,0,0,0.2);
         border-width: 10000px;
         border-style: solid;
      }

.splitter
{
   background-color: black;
   position: absolute;
}

   .splitter.dir-v
   {
      height: 8px;
      width: 100%;
      cursor: row-resize;
   }

   .splitter.dir-h
   {
      width: 8px;
      height: 100%;
      cursor: col-resize;
   }

   .splitter:hover
   {
      background-color: rgb( 140, 140, 140);
   }

/**********************************************************/

.ExtToolTips
{
   padding: 2px;
   background-color: rgb(247, 243, 243);
}

/**********************************************************/

.x-splitter-horizontal
{
   /*background-image:linear-gradient( to bottom, rgb( 224, 224, 224 ), rgb( 232, 232, 232 ), rgb( 213, 213, 213 ) );*/
   background-image: linear-gradient( to bottom, rgb( 246, 246, 246), rgb( 235, 235, 235 ) 30% );
}

.x-splitter-vertical
{
   /*background-image:linear-gradient( to right, rgb( 235, 235, 235), rgb( 246, 246, 246 ) 30% );*/
   background-image: linear-gradient( to right, rgb( 246, 246, 246), rgb( 235, 235, 235 ) 30% );
}

.CBRibbonBar_Disabled
{
   /*background-image:linear-gradient( to right, rgb( 225, 225, 225 ) 30%, rgb( 249, 249, 249 ) );*/
   background-image: linear-gradient( to right, rgb( 220, 216, 216 ), rgb( 255, 252, 252 ) 35%, rgb( 230, 230, 230 ) );
}


/*@media screen and (min-width: 800px ) {
   .CBRibbonBarTraining {
      background-image: linear-gradient( to right, rgb( 216, 222, 216 ), rgb( 252, 255, 252 ) 280px, rgb( 230, 234, 230 ) );
   }


   .CBRibbonBarOnlineDB {
      background-image: linear-gradient( to right, rgb( 220, 215, 208 ), rgb( 255, 253, 252 ) 40%, rgb( 220, 210, 200 ) );
   }
}*/

.CBChatOut
{
   border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
   box-shadow: 0px 5px 9px -9px hsla( 20, 30%, 0%, 0.98 ) inset;
   padding-left:5px;
}

/*.CBInfoParentLoggedIn
{
   background-image: linear-gradient( to right, rgba(6, 216,19,1.0), rgba(24, 147,23,1.0) );
}

.CBInfoParentNotLoggedIn
{
   background-image: linear-gradient( to right, rgba(254, 254,252,1.0), rgba( 251, 251,247,1.9) );
}*/

.CBInfoNotLoggedIn
{
   width: 100%;
   /*display: inline-block;*/
   font-family: Helvetica Neue, Roboto, sans-serif;
   box-shadow: 0px 5px 9px -9px hsla( 20, 30%, 0%, 0.98 ) inset;
   padding: 2px;
   color: black;
   font-size: xx-small;
}

.CBInfoLoggedIn
{
   margin: auto;
   font-family: Helvetica Neue, Roboto, Helvetica, sans-serif;
   font-size: 10px;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   text-align: center;
   color: white;
   padding-top: 2px;
   width: 100%;
}

.CBInfoNotLoggedIn h3
{
   font-family: Helvetica Neue, Roboto, sans-serif;
   text-transform: uppercase;
   font-weight: lighter;
   margin-bottom: 3px;
}

.CBInfoNotLoggedIn a
{
   font-family: Helvetica Neue, Roboto, sans-serif;
   text-transform: uppercase;
   font-weight: lighter;
}

.CBEngineOut
{
   box-shadow: 0px 5px 9px -9px hsla( 20, 30%, 0%, 0.98 ) inset;
}

@media screen and (min-height: 450px)
{
   .CBInfoNotLoggedIn
   {
      font-size: x-small;
   }
      .CBInfoNotLoggedIn h3
      {
         margin-bottom: 4px;
      }

   .CBInfoLoggedIn
   {
      font-size: 12px;
      letter-spacing: 0.08em;
      padding-top: 3px;
   }
}

@media screen and (min-height: 600px)
{
   .CBChatOut
   {
      /*border-top: 1px solid rgba( 50, 50, 50, 0.15 );*/
      border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
      box-shadow: 0px 11px 20px -20px hsla( 20, 30%, 0%, 0.96 ) inset;
   }

   .CBEngineOut
   {
      /*border-top: 1px solid rgba( 50, 50, 50, 0.15 );*/
      border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
      box-shadow: 0px 11px 20px -20px hsla( 20, 30%, 0%, 0.96 ) inset;
   }

   .CBInfoNotLoggedIn
   {
      /*border-top: 1px solid rgba( 50, 50, 50, 0.15 );*/
      box-shadow: 0px 11px 20px -20px hsla( 20, 30%, 0%, 0.96 ) inset;
      padding: 5px;
      font-size: small;
   }

      .CBInfoNotLoggedIn h3
      {
         margin-bottom: 6px;
      }

   .CBInfoLoggedIn
   {
      padding-top: 4px;
      font-size: 14px;
      letter-spacing: 0.09em;
   }
}

@media screen and (min-height: 850px)
{

   .CBChatOut
   {
      /*border-top: 1px solid rgba( 50, 50, 50, 0.15 );*/
      border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
      box-shadow: 0px 15px 24px -24px hsla( 20, 30%, 0%, 0.98 ) inset;
   }

   .CBEngineOut
   {
      border-radius: 1px; 
      /*border-top: 1px solid rgba( 50, 50, 50, 0.15 );*/
      border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
      box-shadow: 0px 15px 24px -24px hsla( 20, 30%, 0%, 0.98 ) inset;
   }

   .CBInfoNotLoggedIn
   {
      font-size: small;
      box-shadow: 0px 15px 24px -24px hsla( 20, 30%, 0%, 0.98 ) inset;
   }

      .CBInfoNotLoggedIn h3
      {
         margin-bottom: 8px;
      }
}


.x-header, x-panel-header
{
   background-image: linear-gradient( to right, rgb( 235, 235, 235 ), rgb( 249, 249, 249 ) 60% ) !important;
}

/* another Ext JS hack*/
.x-grid-item, .x-btn-inner-default-toolbar-large, .x-btn-inner-default-toolbar-medium, .x-btn-inner-default-toolbar-small
{
   font-family: Roboto,tahoma,arial,verdana,sans-serif;
}


.gridEmptyText
{
   font-family: Roboto;
   margin-top: 20px;
   margin-left: 20px;
   /*padding-top: 40px;*/
   font-size: 120%;
}

.PgnButton
{
   padding-left: 2px;
   padding-right:2px;
}

.eloSmaller
{
   font-size: 80%;
}


.diagarea
{
   margin-left:auto;
   margin-right:auto;
}


.hoverBright
{
   filter: brightness(108%);
}

/*
   Chat Styles:
*/

/*****************************************************************************
   Chat Window:
*/

.cbChatContainer
{
}

.cbChatOut
{
   overflow: auto;
   width: 100%;
}

.cbChatInp
{
   width: calc( 100% - 8px);
   font-family: Roboto, sans-serif;
   margin: 2px;
   border-radius: 3px;
   border: 1px solid hsla( 120, 40%, 40%, 0.4 );
   background-image: linear-gradient( to bottom, hsla( 0, 0%, 70%, 0.2), hsla( 0, 0%,99, 0.2) );
   max-width: 1000px;
}

/*****************************************************************************
   Chat Style
*/

.cbChatTitle
{
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: antiquewhite;
   background-image: linear-gradient(to bottom, hsl( 31, 25%, 70% ) 20%, hsl( 31, 25%, 54% ) );
   padding: 6px 3px;
   font-family: Roboto;
   text-align: center;
}

.cbChatLine
{
   padding: 1px 3px 2px 4px;
   font-size: 0.85em;
   color: black;
   font-family: Roboto;
   box-shadow: 0px 3px 7px -5px hsla( 0, 0%, 0%, 0.3) inset;
}

   .cbChatLine a
   {
      color: #a00;
      text-decoration: underline;
   }

.cbChatOrigin
{
   padding: 0px 3px 3px 4px;
   /*background-image: linear-gradient(to bottom, hsl( 0, 10%, 97% ) 20%, hsl( 0, 10%, 94% ));*/
   background-color: hsl( 100, 30%, 90% );
   border-top: 1px solid hsla( 0, 10%, 1%, 0.25 );
   /*border-radius:5px;*/
   color: black;
}

.cbAutoChat
{
   /*font-family:Roboto;*/
   background-color: hsl( 200, 30%, 90% );
   font-weight: 400;
}

.cbSender
{
   font-size: 0.85em;
   font-family: Roboto;
   margin-right: 6px;
}

.cbChatLoginOk
{
   font-size: 1.0em;
   padding: 4px;
   margin-bottom: 10px;
}

.cbChatUserName
{
   font-weight: 600;
   color: hsla( 100, 50%, 20%, 0.9);
   text-transform: capitalize;
}

.cbBigUserName
{
   font-size: 1.0em;
}

/*.cbSender::after
{
   content:":";
}*/

.cbSessionName
{
   font-size: 0.8em;
   color: black;
   font-family: Roboto Condensed;
}

.cbChatGameLink
{
   font-size: 0.8em;
   color: #900;
   text-decoration: underline;
   font-family: Roboto Condensed;
}

   .cbChatGameLink:hover
   {
      cursor: pointer;
      color: #e00;
   }

/*.cbSender::before
{
   content: "(";
}

.cbSender::after
{
   content: ")";
}*/

.cbChatSeparator
{
   margin-bottom: 4px;
   /*border-bottom: 1px solid hsla( 0, 0%, 0%, 0.12 );*/
}


.LogTrace .Trace
{
   font-size: 10px;
   border-top: thin solid rgba(230, 230, 230, 0.4);
   padding-top: 2px;
   color: darkblue;
}

.LogBold
{
   font-weight: bold;
   font-size: 0.8em;
}

.LogRed
{
   color: red;
}

.LogGreen
{
   color: darkgreen;
}

.LogBlue
{
   color: darkslateblue;
}

.LogError
{
   color: red;
   font-weight: bold;
}

.LogException
{
   color: red;
   font-weight: bold;
}

.LogBlue
{
   color: blue;
}

.LogBlue
{
   color: green;
}

.LogBoard
{
   color: darkgreen;
   font-size: 0.9em;
}

.cbChannelSender, .cbGameChatSender
{
   font-size:0.9em;
   font-family: Roboto Condensed;
   color:darkblue;
   margin-right:5px;
   margin-left:2px;
}

.cbChannelChat, .cbGameChat
{
   padding-top: 3px;
   font-family: Roboto;
}

.cbMyChat
{
   color: hsla( 100, 50%, 20%, 0.9);
   padding-left: 4px;
   font-size: 1.10em;
}

.cbPing
{
   width:20px;
   height:10px;
   display:inline-block;
   border:1px solid hsl( 0, 0%, 55% );
   border-radius:3px;
   margin-left:auto;
   margin-right:auto;
}

.cbChallFlag
{
   width:24px;
   height:24px;
   display:inline-block;
   margin-left:auto;
   margin-right:auto;
}

.cbChallFlag:hover:after 
{
   content: attr(title);
   padding: 10px;
   background-color: white;
   position: absolute;  
}


.cbFriendImg
{
   height:24px;
   display:inline-block;
   margin-left:auto;
   margin-right:auto;
   border:1px solid hsl( 0, 0%, 80%);
   border-radius:2px;
}

/*****************************************************/

.switchBar
{
   width: 78px;
   height: 100%;
   background-color: hsla( 30, 30%, 97%, 1.0 );
   float: right;
   display: flex;
   flex-direction: column;
   padding-top: 12px;
   padding-left:3px; /*compensate shadow*/
   box-shadow:inset 2px 0px 4px hsla(0, 0%, 20%, 0.3);
   /*border-left: 2px solid hsla(0, 0%, 20%, 0.8);*/
}

.switchAppBtn
{
   border: 1px solid;
   border-color: #a4bed4;
   border-radius:4px;
   text-align: center;
   background-position:center;
   background-repeat: no-repeat !important;
   background: none;
   width: 60px;
   height: 50px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom:16px;
   
   /*see .jqx-fill-state-normal-chessbase*/
   background-color:hsla( 30, 30%, 96%, 1.0 );
   box-shadow: 0px 0px 15px hsla( 30, 30%, 70%, 0.4) inset;
}

   .switchAppBtn:hover
   {
      background-color: hsla( 40, 40%, 99%, 1.0 );
      box-shadow: 0px 0px 25px hsla( 120, 10%, 30%, 0.6) inset;
   }
   .switchAppBtn:active
{
   background-color:hsla( 30, 50%, 99%, 1.0 );
   box-shadow: 0px 0px 45px hsla( 40, 30%, 50%, 0.6) inset;
}

.btnSubText
{
   display:inline-block;
   font-size:0.75em;
   margin-top:74%;
   font-family:Roboto Condensed, Arial Narrow, sans-serif;
}

.cboldBrowserWarn
{
   font-family:Roboto, sans-serif;
   padding:10px;
   margin-left:auto;
   margin-right:auto;
   width:80%;
   color:hsl( 30, 20%, 50%);
}

.cboldBrowserWarn div
{
   margin-top:0.4em;
}

.repListCell
{
	display: inline-block;
	padding-left: 5px;
	font-family: Roboto;
}

.repListParent
{
	margin-top: 8px;
	font-weight: 600;
	font-family: Montserrat;
}

.repListName
{
	font-weight: 500;
	font-size: 12px;
	font-family: Roboto;
	margin-top: 3px;
	margin-left: 6px;
}

.repListNota
{
	padding-top: 1px;
	font-weight: normal;
	font-family: Roboto; /* Roboto Condensed;*/
	font-size: 10px;
	margin-left: 6px;
}

.repListSize
{
	font-family: Roboto;
	text-align: center;
}


.repListECO
{
	margin-top: 8px;
	font-weight: 500;
	text-align: center;
}

.repLevel
{
	margin-top: 0px;
	margin-left: 2px;
	padding-top: 10px;
	padding-left: 32px;
	font-family: Roboto;
	font-size: 10px;
	height: 100%;
	width: 24px;
	background-repeat: no-repeat;
	background-position-y: 6px;
	background-position-x: 2px;
	background-size: 22px;
	vertical-align: middle;
}

.repLevelEasy
{
	background-image: url( /common/media/Ribbons/Openings/Easy24.png);
}

.repLevelClub
{
	background-image: url( /common/media/Ribbons/Openings/Club24.png);
}

.repLevelTournament
{
	background-image: url( /common/media/Ribbons/Openings/Tournament24.png);
}

.repLevelProfessional
{
	background-image: url( /common/media/Ribbons/Openings/Professional24.png);
}

.repLevelMyMoves
{
	background-image: url( /common/media/Ribbons/MyMove24.png);
}

.repLevelFashion
{
	background-image: url( /common/media/Ribbons/Fashion24.png);
}


.repListVolume
{
	display: inline-block;
	padding-left: 5px;
	font-family: Montserrat;
	font-size: 14px;
	font-weight: 700;
	margin-top: 8px;
}

.repListOpening, .repListOpeningCount
{
	display: inline-block;
	padding-left: 5px;
	font-family: Montserrat;
	font-size: 13px;
	font-weight: 600;
	margin-top: 8px;
}

.repListOpeningCount
{
	font-family: Roboto;
	font-weight: 600;
}

.repListPremiumOnly a
{
	color: hsla( 0, 50%, 40%, 0.7 );
}

	.repListPremiumOnly a:hover
	{
		color: hsla( 0, 60%, 50%, 1.0 );
	}


.cbBoardAreaInfo
{
	background-image: linear-gradient( to bottom, hsla( 0, 0%, 99%, 0.9), hsla( 0, 0%, 92%, 0.9) );
	box-shadow: 0px 0px 7px hsla( 120, 10%, 30%, 0.3);
	box-sizing:border-box;
	border: 2px solid hsla( 0, 20%, 50%, 0.3 );
	padding: 20px;
	border-radius: 12px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content:center;
	align-items:center;
	z-index: 10000;
}

#idBoardAreaInfo
{
	display: inline-block;
}

/*************************/

.logDiv
{
	padding:5px;
	padding-bottom:10px;
	width: 400px;
	height: 100%;
	border-left:1px solid gray;
	background-color: white;
	color: black;
	font-size: 10px;
	font-family: Roboto;
	float: right;
	overflow-y: scroll;
}



/* ---- ../../Common/Resources/CSS/Notation.css ---- */

/* Fonts e.g. for engine output */
/*@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLink.eot");
}*/

@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLink.ttf");
}

/*@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLinkItalic.eot");
   font-style: italic;
}*/

@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLinkItalic.ttf");
   font-style: italic;
}

/*@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLinkBold.eot");
   font-weight: bold;
}*/

@font-face
{
   font-family: "CBArial";
   src: url("/Common/Media/Chess/fonts/CBArialLinkBold.ttf");
   font-weight: bold;
}

/* Latin Robotos: */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'), url(https://fonts.gstatic.com/s/roboto/v15/7m8l7TlFO-S3VkhHuR0at44P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url(https://fonts.gstatic.com/s/robotocondensed/v13/b9QBgL0iMZfDSpmcXcE8nBBQ_Gf4FfI8J4SYljBAylk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v13/Zd2E9abXLFGSr9G3YK2MsDAdhzWOYhqHvOZMRGaEyPo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


/*********************************************************************************************
cbNotation plugin.
*********************************************************************************************/

span.cbmove
{
	text-decoration: none;
	cursor: pointer;
	/*padding: 0em 0.1em 0em 0.1em;*/
	padding: 0;
	padding-left: 0.1em;
	padding-right: 0;
	margin: 0;
	/*white-space: nowrap;*/
}

span.cbline
{
}

.nota-container
{
   font-family: Helvetica Neue, Roboto, sans-serif;
   font-size: 14px; 
   display: table;
   height: 100%;
   width: 100%;
   padding:0;
   margin:0;
   border:0;
   table-layout: fixed;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Chrome/Safari/Opera */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

@media ( pointer:coarse)
{
   .nota-container
   {
      font-size: 16px; 
   }
}

.nota-container td
{
   padding:0;
}

.nota-head-container,
.nota-game-container,
.nota-foot-container
{
   display: table-row;
   height:auto;
   background-color:none!important;
}

.notafooter-container
{
   display:flex!important;
   flex-direction: row;
   background: white; 
   color: black;
   height: 20px;
   min-height: 20px;
   line-height:20px;
   font-size:12px;
   margin:0;
   padding-left:4px;
   padding-bottom: 2px;
   padding-top:2px;
   min-width: 1px;
   border-top: thin solid hsla( 0, 0%, 0%, 0.25);
   box-shadow: 1px 2px 4px -2px hsla( 20, 30%, 0%, 0.28 ) inset;
   vertical-align:middle;
}

.nota-ogame,
.nota-foot
{
   display: table-cell;
}

.nota-head
{
   display:block;
}

/*
   reset global declarations:
*/
.nota-head td
{
   border:none;
   padding:0;
}

.nota-ogame
{
   /* only for safari with padding-right fix -> see NotationElement.js*/
   background-image: linear-gradient( to right, hsla( 40, 15%, 97.5%, 1.0 ), hsla( 40, 10%, 99%, 1.0 ) 30% )!important;
}

.nota-game
{
   overflow-y: auto;
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   box-shadow: 2px 4px 6px -6px hsla( 20, 30%, 0%, 0.98 ) inset;
   padding: 8px;
   line-height: 1.25em;
}

@media screen and (min-width: 700px )
{
   .nota-container
   {
      font-size: 15px;
   }

   .nota-game
   {
      /*box-shadow: 4px 8px 12px -12px hsla( 20, 30%, 0%, 0.8 ) inset;*/
      background-image: linear-gradient( to right, hsla( 40, 15%, 97.5%, 1.0 ), hsla( 40, 10%, 99%, 1.0 ) 30% )!important;
      line-height: 1.55em;
   }
}

@media screen and (min-width: 700px ) and (pointer:coarse)
{
   .nota-container
   {
      font-size: 17px;
   }
}


.nota-igame
{
   position: relative;
   height: 100%;
   width: 100%;
}

.nota-ogame
{
   height: 100%;
}

table.position
{
   border: 0px;
   padding: 1px;
}

.cbnota-container
{
   margin-bottom: 0px;
   display: block;
   width: 100%;
   height: 100%;
   /*overflow-y: auto;*/
   -webkit-overflow-scrolling: touch;
   user-select: none;
}

.nomat
{
   bottom: 0px;
}


span.cbline[data-level="0"]
{
   display: block;
   margin-top: 2px;
   /*letter-spacing:0.04em;*/
}

span.cbline[data-level="0"][data-commented="1"]
{
   /*font-size: 2em;*/
   font-weight: 500;
   text-shadow:1px 1px 1px hsla( 0, 30%, 20%, 0.12);
}

/*TOP LEVEL VARIANTE*/
span.cbline[data-level="0"]
{
}

span.cbline[data-level="1"]:before
{
   content: "[ ";
	padding:0;
}

span.cbline[data-level="1"]:after
{
	content: "]";
	padding: 0;
}

span.cbline[data-level="2"]:before,
span.cbline[data-level="3"]:before,
span.cbline[data-level="4"]:before,
span.cbline[data-level="5"]:before,
span.cbline[data-level="6"]:before,
span.cbline[data-level="7"]:before,
span.cbline[data-level="8"]:before
{
	content: "(";
}

span.cbline[data-level="2"]:after,
span.cbline[data-level="3"]:after,
span.cbline[data-level="4"]:after,
span.cbline[data-level="5"]:after,
span.cbline[data-level="6"]:after,
span.cbline[data-level="7"]:after,
span.cbline[data-level="8"]:after
{
	content: ")";
	padding: 0;
	display:inline;
	white-space:nowrap;
}


span.cbline[data-level="9"][data-inx-line="0"]:before,
span.cbline[data-level="10"][data-inx-line="0"]:before,
span.cbline[data-level="11"][data-inx-line="0"]:before,
span.cbline[data-level="12"][data-inx-line="0"]:before,
span.cbline[data-level="13"][data-inx-line="0"]:before,
span.cbline[data-level="14"][data-inx-line="0"]:before
{
	content: "(";
}

span.cbline[data-level="9"][data-inx-line="0"]:before
{
	padding-left: 0.5em;
}

span.cbline[data-level="9"]:after,
span.cbline[data-level="10"]:after,
span.cbline[data-level="11"]:after,
span.cbline[data-level="12"]:after,
span.cbline[data-level="13"]:after,
span.cbline[data-level="14"]:after
{
	content: ";";
	white-space: pre;
	margin-right: 0.5em;
}

span.cbline[data-level="9"][lastLine="1"]:after,
span.cbline[data-level="10"][lastLine="1"]:after,
span.cbline[data-level="11"][lastLine="1"]:after,
span.cbline[data-level="12"][lastLine="1"]:after,
span.cbline[data-level="13"][lastLine="1"]:after,
span.cbline[data-level="14"][lastLine="1"]:after
{
	content: ")";
	display:inline;
	white-space: nowrap;
	padding-right: 0;
}

span.cbline[data-level="1"]
{
	font-size: 1em;
	display: block;
	font-weight: normal;
	margin-left: 2ex;
	text-shadow: none;
}

span.cbline[data-level="2"]
{
   font-size: 97%;
   display: block;
   margin-left: 2ex;
}

span.cbline[data-level="1"] span.cbmove[data-inx-mv="0"]
{
   font-weight: 500;
   text-decoration: underline;
}

span.cbline[data-level="2"] span.cbmove[data-inx-mv="0"]
{
   text-decoration: none;
   text-shadow: none;
}

span.cbline[data-level="2"] span.cbmove[data-inx-mv="0"]
{
   text-decoration: none;
   /*text-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);*/
}

span.cbline[data-level="6"] span.cbmove[data-inx-mv="0"]
{
   text-shadow: none;
   font-weight: normal;
}

span.cbline[data-level="9"] span.cbmove[data-inx-mv="0"]
{
	text-decoration: underline;
}

span.cbline[data-level="10"] span.cbmove[data-inx-mv="0"]
{
	text-decoration:none;
}

span.cbline[data-level="3"]
{
   font-size: 96%;
}

span.cbline[data-level="3"]
{
   display: block;
   margin-left: 1.8ex;
}

span.cbline[data-level="4"]
{
   font-size: 96%;
   display: block;
   margin-left: 1.9ex;
}

span.cbline[data-level="5"]
{
	font-size: 96%;
	font-weight: normal;
	display: block;
	margin-left: 2.0ex;
}

span.cbline[data-level="6"],
span.cbline[data-level="7"],
span.cbline[data-level="8"]
{
	font-weight: normal;
	font-style: normal;
	display: block;
}

span.cbline[data-level="6"]
{
	margin-left: 2.1ex;
}

span.cbline[data-level="7"]
{
	margin-left: 2.5ex;
}

span.cbline[data-level="8"]
{
	margin-left: 2.8ex;
}

span.cbline[data-level="9"],
span.cbline[data-level="10"],
span.cbline[data-level="11"],
span.cbline[data-level="12"],
span.cbline[data-level="13"],
span.cbline[data-level="14"],
span.cbline[data-level="15"]
{
	display: inline;
}

span.cbline[data-level="10"]
{
}

span.cbline[data-level="11"]
{
	font-style: italic;
	font-family: 'Roboto Condensed';
	font-size: 92%;
}

span.cbline[data-level="11"]
{
	font-weight: 300;
}

span.cbcomment
{
	font-weight: normal;
	font-style: normal;
	color: brown; /*hsl( 0, 40%, 50%); */ /*was brown*/
	font-family: 'Roboto Condensed', 'Arial Narrow';
	font-weight: 400;
	text-shadow: none;
}

span.cbspec-glyph
{
   font-family: "CBArial";
}

span.cbcol-marker
{
   background-image: url( /Common/Media/buttons/NotaArrow16.png );
   background-repeat: no-repeat;
   vertical-align: middle;
   width: 16px;
   height: 16px;
   display: inline-block;
}

span.cbcurline
{
   /*color: hsla( 120, 60%, 40%, 1.0 );*/
   background-color: hsla( 60, 90%, 85%, 0.45 ); /*text marker*/
   /*background-image: linear-gradient( to bottom, hsla( 60, 90%, 80%, 0.7 ), hsla( 60, 90%, 90%, 0.3 ) );*/ /* overwrites node colors */
   transition: background-color 0.4s;
}

span.cbcurlineparent
{
   /*background-color: hsla( 120, 80%, 88%, 0.25 );*/ /* text marker*/
   background-color: hsla( 60, 90%, 85%, 0.45 ); /*text marker*/
   transition: background-color 0.3s;
}

span.cbcurnode6
{
	/*background-color: hsla( 270, 60%, 80%, 0.35);*/
}

span.cbcurnode5
{
	/*background-color: hsla( 185, 70%, 65%, 0.4 );*/
}

span.cbcurnode4
{
	/*background-color: hsla( 55, 70%, 80%, 0.4 );*/
}

span.cbcurnode3
{
	/*background-color: hsla( 90, 70%, 60%, 0.4 );*/
}

span.cbcurnode2
{
	/*background-color: hsla( 10, 80%, 85%, 0.4 );*/
}

span.cbcurnode1
{
	/*background-color: hsla( 220, 90%, 85%, 0.4 );*/
	background-color: hsla( 90, 70%, 60%, 0.4 );
}

span.cbcurAlternative
{
   background-color: hsla( 120, 60%, 88%, 0.34 ); 
   box-shadow: 1px 2px 5px hsla( 0, 0%, 0%, 0.12 );
   text-decoration:none;
   transition: background-color 0.3s
}

span.cbgame-result
{
   display: block;
   font-weight: bold;
   font-size: 115%;
   padding: 0.3em 2px 0px 2px;
}


span.cbmedal
{
   display:inline-block;
   background-color: red;
   /*width:20px;
   height:16px;*/
   margin:0;
   padding:0;
   max-height:16px;
   vertical-align:middle;
   border-radius:2px;
   border:1px solid hsla( 0, 0%, 0%, 0.3);
   box-shadow:1px 1px 4px hsla( 30, 40%, 50%, 0.3);
}

span.medal-1
{
   background-color:rgb( 255, 192, 0 );
}

span.medal-2
{
   background-color:magenta;
}

span.medal-4
{
   background-color:blue;
}

span.medal-8
{
   background-color:Highlight;
}

span.medal-16
{
   background-color:darkcyan;
}

span.medal-32
{
   background-color:saddlebrown;
}

span.medal-64
{
   background-color:indianred;
}

span.medal-128
{
   background-color:yellow;
}

span.medal-256
{
   background-color:white;
}

span.medal-512
{
   background-color:red;
}

span.medal-1024
{
   background-color:darkmagenta;
}

span.medal-2048
{
   background-color:green;
}

span.medal-4096
{
   background-color:darkgreen;
}

span.medal-8192
{
   background-color:black;
}

span.medal-16384
{
   background-color:gray;
}

span.medal-32768
{
   background-color:cyan;
}

.cbevprofile
{
   width:100%;
   border:1px solid hsla( 0, 0%, 0%, 0.3 );
   margin-left:auto;
   margin-right:auto;
   margin-top:10px;
   margin-bottom:10px;
   box-shadow:1px 1px 5px hsla( 0, 0%, 0%, 0.1 );
}


/*.footer-eval
{
   font-family:Roboto;
   padding-right:0.5em;
   font-size:95%;
   width:50%;
   padding-top:2px;
}*/

.footer-eval, .footer-book
{
   height:16px;
   font-size:11px;
   margin-left:3px;
   vertical-align:middle;
   overflow:hidden;
   text-align:left;
   margin-top:3px;
   font-family:'Roboto', Arial Narrow, sans-serif;
}

.footer-book
{
   order:2;
   /*height:16px;*/
   padding-top:1px;
   padding-left:3px;
   margin-right:3px;
   margin-top:0px;
   color: hsla( 1, 70%, 30%, 1.0 );
}

.footer-book:hover
{
   color: hsla( 1, 75%, 55%, 1.0 );
}

.footer-eval
{
   order:1;
   /*width:40%;*/
   /*border:1px solid red;*/
   padding-right:3px;
}

.mat-balance
{
   order:3;
   height:16px;
   margin-top:2px;
}

   .mat-balance span
   {
      box-sizing:border-box;  /*background image distortion*/
      display: inline-block;
      width: 16px;
      height: 16px;
      background-size: cover;
      padding: 1px;
      /*margin-top:2px;*/
   }

      .mat-balance span.piece-wp
      {
         background-image: url(/Common/Media/Buttons/wp-16px.png);
      }

      .mat-balance span.piece-wn
      {
         background-image: url(/Common/Media/Buttons/wn-16px.png);
      }

      .mat-balance span.piece-wb
      {
         background-image: url(/Common/Media/Buttons/wb-16px.png);
      }

      .mat-balance span.piece-wr
      {
         background-image: url(/Common/Media/Buttons/wr-16px.png);
      }

      .mat-balance span.piece-wq
      {
         background-image: url(/Common/Media/Buttons/wq-16px.png);
      }

      .mat-balance span.piece-wk
      {
         background-image: url(/Common/Media/Buttons/wk-16px.png);
      }

      .mat-balance span.piece-bp
      {
         background-image: url(/Common/Media/Buttons/bp-16px.png);
      }

      .mat-balance span.piece-bn
      {
         background-image: url(/Common/Media/Buttons/bn-16px.png);
      }

      .mat-balance span.piece-bb
      {
         background-image: url(/Common/Media/Buttons/bb-16px.png);
      }

      .mat-balance span.piece-br
      {
         background-image: url(/Common/Media/Buttons/br-16px.png);
      }

      .mat-balance span.piece-bq
      {
         background-image: url(/Common/Media/Buttons/bq-16px.png);
      }

      .mat-balance span.piece-bk
      {
         background-image: url(/Common/Media/Buttons/bk-16px.png);
      }


.div.cbgame-header-compact
{
   padding-bottom: 2px;
}

div.cbgame-header
{
   text-align: center;
   width: 100%;
   height:auto;
   padding-top: 1px;
   padding-bottom: 0.25em;
   border-bottom: 1px solid rgba( 50, 50, 50, 0.4 );
   box-shadow: 0px 4px 8px -8px hsla( 20, 30%, 0%, 0.98 ) inset;
   background-image: linear-gradient( to bottom, hsla( 30, 10%, 98%, 0.6), hsla( 30, 10%, 95%, 0.6) )!important;
   overflow: hidden;
}

@media screen and (min-width: 700px)
{
   div.cbgame-header
   {
      background-image: linear-gradient( to bottom, hsla( 30, 10%, 98%, 1.0), hsla( 40, 10%, 95%, 1.0) )!important;
      box-shadow: 0px 7px 10px -10px hsla( 20, 30%, 0%, 0.68 ) inset;
   }

   div.cbgame-header-compact
   {
      box-shadow: 0px 7px 10px -10px hsla( 20, 30%, 0%, 0.68 ) inset;
   }
}

@media screen and (min-width: 1200px)
{
   div.cbgame-header
   {
      font-size: 105%;
      padding-top: 3px;
      padding-bottom: 4px;
   }

   div.cbgame-header-compact
   {
      box-shadow: 0px 7px 10px -10px hsla( 20, 30%, 0%, 0.68 ) inset;
   }
}

/*box-shadow: 0px -40px 50px -50px hsla( 20, 30%, 40%, 0.10 ) inset, 0px 180px 7px -180px hsla( 20, 20%, 20%, 0.80 ) inset;*/

div.cbgame-headerinside
{
   text-align: center!important;
   width: 100%;
   padding-bottom: 0.2em!important;
}

.cbresult
{
   font-size: 100%;
   font-weight: bold;
   white-space: nowrap;
   text-align: center;
}

.cbplayerwhite
{
   font-weight: 700;
   text-align: left;
   vertical-align:top;
   padding-left: 1px;
   margin:0;
}

.cbplayerblack
{
   font-weight: 700;
   text-align: right;
   vertical-align:top;
   padding-right: 1px;
   margin:0;
}

.cbflagwhite-morecompact
{
   text-align: left;
   vertical-align: top;
   padding-left: 1px;
}

.cbflagblack-morecompact
{
   text-align: right;
   vertical-align: top;
   padding-right: 1px;
}

.cbflagwhite
{
   text-align: left;
   vertical-align: top;
   padding-left: 3px;
}

.cbflagblack
{
   text-align: right;
   vertical-align: top;
   padding-right: 3px;
}

.cbplayernation img, .cbflagwhite img, .cbflagblack img, .cbflagblack-morecompact img, .cbflagwhite-morecompact img
{
   border:none!important;
   padding:0!important;
   display:inline;
}

@media screen and (min-width: 800px) and (min-height: 400px)
{
   .cbplayerwhite
   {
      padding-left: 2px;
   }

   .cbplayerblack
   {
      padding-right: 2px;
   }
}

@media screen and (min-width: 1200px) and (min-height: 700px)
{
   .cbplayerwhite
   {
      padding-left: 3px;
   }

   .cbplayerblack
   {
      padding-right: 4px;
   }
}


.cbplayerimage
{
   vertical-align: top;
   border: 1px solid lightgray;
}

.cbplayerportrait
{
   vertical-align: top;
   padding:0px 2px 0px 2px;
}

.cbplayerportrait img
{
   /*max-width:unset;*/
   /*height:unset;*/
   /*width:100%;
   height:100%;*/
   border:thin silver solid;
   padding:0;
   display:inline;
   box-shadow: 1px 1px 4px hsla( 0, 0%, 0%, 0.2 );
}

span.cbplayer
{
   vertical-align:top;
   font-weight: 700;
}

span.cbplayertiny
{
   font-weight: 500;
}

span.cbevent
{
   font-size: 90%;
   text-align: center;
}

span.cbeventdate
{
   font-size: 85%;
   padding-left: 0.35em !important;
}

span.cbsite
{
   font-size: 80%;
   font-style: italic;
   font-family:Roboto Condensed;
   margin-left: 4px;
   margin-right: 5px;
   padding: 0px !important;
}

span.cbmain-header
{
   display: block;
   font-size: larger;
   padding: 3px;
}

span.cbmain-header-tiny
{
   font-size: 90%;
   display: block;
   overflow: hidden;
   box-shadow: 0px 6px 8px -8px hsla( 20, 30%, 0%, 0.98 ) inset;
   padding: 2px;
}

span.cbmain-header-verycompact
{
   font-size: 92%;
   display: block;
   overflow: hidden;
   box-shadow: 0px 6px 8px -8px hsla( 20, 30%, 0%, 0.98 ) inset;
   padding: 3px;
}

span.cbmain-header-morecompact
{
   font-size: 94%;
   display: block;
   overflow: hidden;
   box-shadow: 0px 10px 14px -14px hsla( 20, 30%, 0%, 0.98 ) inset;
   background-image: linear-gradient( to bottom, hsla( 30, 10%, 98%, 1.0), hsla( 40, 10%, 95%, 1.0) )!important;
   padding: 3px;
}

span.cbmain-header-compact
{
   padding: 3px;
   font-size: 95%;
   display: block;
   overflow: hidden;
   background-image: linear-gradient( to bottom, hsla( 30, 10%, 98%, 1.0), hsla( 40, 10%, 95%, 1.0) )!important;
   box-shadow: 0px 10px 14px -14px hsla( 20, 30%, 0%, 0.98 ) inset;
}

span.cbeco
{
   font-size: xx-small;
   font-weight: 700;
   margin: 0px;
   padding: 0px;
}

span.cbround:before
{
   content: "(";
}

span.cbround:after
{
   content: ")";
}

span.cbannotator
{
   /*font-style: italic;*/
   display:block;
   font-weight:500;
   font-size: 88%;
   font-family:Roboto Condensed;
}

span.cbelo
{
   font-size: 80%;
   padding-left: 0.25em !important;
   font-weight: 300;
}

span.cbelocompact
{
   font-size: 80%;
   padding-left: 0.20em !important;
   font-weight: 300;
}

.cbfide
{
   font-size: 70%;
   font-weight:500;
   padding-left:0.20em!important;
   color:hsl( 0, 40%, 40% );
   padding:1px;
   border:1px solid lightgray;
   vertical-align:top;
   padding-top:6px!important;
}

.cbtourndata
{
   padding-top:3px!important;
   vertical-align:top;
}

.cbfidecompact
{
   font-size: 65%;
   padding-top:4px!important;
}

div.cbgame-header span
{
   padding: 0 0.2ex 0 0.2ex;
}

span.cbnota-title
{
   font-family: Helvetica Neue, Roboto, sans-serif;
   text-transform: uppercase;
   /*font-weight: bold;*/
   font-size: 75%;
}

span.cbnota-subtitle
{
	font-family: Helvetica Neue, Roboto, sans-serif;
	font-size: 72%;
}

/*@media screen and (min-width: 1000px) and (min-height: 700px) {
   span.cbnota-title {
      font-size: 90%;
   }
}*/

span.cbmove:hover
{
   background-color: #F5F1D3;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
}

span.cbmove:active,
span.cbmove.cbcur-move,
span.cbmove.cbcur-move:hover
{
   background-color: brown;
   color: white;
   -moz-border-radius: 0.2em;
   border-radius: 0.2em;
   box-shadow: 1px 1px 5px hsla( 0, 0%, 0%, 0.12 );
   /*transition: box-shadow 1s;*/
}

/*.cbrepl-download
{
   text-align: center;
   left: 0px;
   right: 0px;
   text-align: center;
   bottom: 8px;
   margin-top: 16px;
}

   .cbrepl-download a
   {
      color: brown;
      font-family: Arial;
   }

.cbrepl-gameselect
{
   padding-bottom: 8px;
}

   .cbrepl-gameselect button
   {
      width: 20px;
      height: 20px;
      border-style: none;
      background-color: transparent;
      background-image: url(select.png);
   }*/

table.scroll
{
   border-spacing: 0;
   border: 0px;
   padding: 1px;
}

table.notaTable
{
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 1px;
}

/**************************************************************/
.board-msg
{
   font-family: Helvetica Neue, Roboto, sans-serif;
}

   .board-msg.modal
   {
      z-index: 20;
   }

      .board-msg.modal:after
      {
         content: "";
         position: absolute;
         left: -10000px;
         top: -10000px;
         right: -10004px;
         bottom: -10004px;
         border-color: rgba(0,0,0,0.2);
         border-width: 10000px;
         border-style: solid;
      }

/*.splitter
{
   background-color: black;
   position: absolute;
}

   .splitter.dir-v
   {
      height: 8px;
      width: 100%;
      cursor: row-resize;
   }

   .splitter.dir-h
   {
      width: 8px;
      height: 100%;
      cursor: col-resize;
   }

   .splitter:hover
   {
      background-color: rgb( 140, 140, 140);
   }*/

/**********************************************************/

.ExtToolTips
{
   padding: 2px;
   background-color: rgb(247, 243, 243);
}

/**********************************************************/

/*.x-splitter-horizontal
{
   background-image: linear-gradient( to bottom, rgb( 246, 246, 246), rgb( 235, 235, 235 ) 30% );
}

.x-splitter-vertical
{
   background-image: linear-gradient( to right, rgb( 246, 246, 246), rgb( 235, 235, 235 ) 30% );
}

*/


.BoardAreaShadowT
{
   border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
   box-shadow: 0px 16px 23px -23px hsla( 20, 30%, 0%, 0.38 ) inset;
   /*-12px 0px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset, 
      12px 0px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset;*/
}

.BoardAreaShadowR
{
   /*border: 1px solid red;*/
   border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
   box-shadow: -12px 0px 25px -25px hsla( 20, 30%, 0%, 0.98 ) inset;
}

.BoardAreaShadowB
{
   /*border: 1px solid red;*/
   border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
   box-shadow: 0px -12px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset, -12px 0px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset, 12px 0px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset;
}

.BoardAreaShadowL
{
   /*border: 1px solid red;*/
   border-radius: 1px; /* iOS 8 hack for box-shadow problem*/
   box-shadow: 12px 0px 19px -19px hsla( 20, 30%, 0%, 0.98 ) inset;
}

.BoardBottomURL
{
   text-align: center;
   font-family: Helvetica Neue, Roboto, sans-serif;
   font-size: 21px;
   font-weight: normal;
   /*color: #f6f5aa;*/
   color: #fff190;
}

.CBSymbol
{
   font-family: "CBArial";
}

.shakeAnimation
{
   animation: animShake 2.0s ease;
   animation-delay: 2s;
   animation-iteration-count: 5;
   animation-duration: 5s;
}

.shakeShort
{
   animation: animShake 1.0 ease;
   animation-delay: 1.5s;
   animation-iteration-count: 1;
   animation-duration: 1.2s;
}

@keyframes animShake
{
   0%, 100%
   {
      transform: translateX(0);
   }

   10%, 30%, 50%, 70%, 90%
   {
      transform: translateX(-3px);
   }

   20%, 40%, 60%, 80%
   {
      transform: translateX(3px);
   }
}

.blinkAnimation
{
   animation: blinkFrames 0.5s linear 6;
}

.blinkShort
{
   animation: blinkFrames 0.3s linear 1;
}

.blinkMedium
{
   animation: blinkFrames 0.4s linear 3;
}

@keyframes blinkFrames
{
   0%
   {
      opacity: 1.0;
   }

   25%
   {
      opacity: 0.8;
   }

   50%
   {
      opacity: 0.1;
   }

   70%
   {
      opacity: 0.8;
   }

   100%
   {
      opacity: 1.0;
   }
}

@keyframes textColorFrames
{
   0%
   {
      color:hsla( 0, 0%, 0%, 1.0 );
      font-weight:bold;
   }

   50%
   {
      color:hsla( 270, 30%, 50%, 1.0 );
      font-weight:bold;
   }

   100%
   {
      color:hsla( 120, 30%, 50%, 1.0 );
      font-weight:bold;
   }
}

.blinkText
{
   animation: textColorFrames 0.8s linear 10;
}

.blinkTextFast
{
   animation: textColorFrames 0.5s linear 3;
}

.gridEmptyText
{
   font-family: Helvetica Neue, Roboto;
   margin-top: 20px;
   margin-left: 20px;
   /*padding-top: 40px;*/
   font-size: 120%;
}

.PgnButton
{
   padding-left: 2px;
   padding-right: 2px;
}

.cbtraining
{
   display:block;
   margin-top:0;
   text-align:center;
}

.cbTrainingLinks
{
   margin-top:0.1em;
   margin-bottom:1.0em;
   text-align:center;
}

.cbTrainingLink
{
   text-decoration:underline;
}

.cbTrainingSolution
{
   color:darkgreen;
   margin-right:0.8em;
}

.cbTrainingHelp
{
   color:darkGreen;
   margin-left:0.8em;
}

.cbTrainingLink:hover
{
   cursor:pointer;
   text-align:center;
}


/* DEBUGGING: */
/*td
{
   border: 1px solid green!important;
}

tr
{
   border: 1px solid red!important;
}*/

/*********************************/

.cbdia
{
   margin-left: 30px;
   margin-top: 3px;
   margin-bottom: 3px;
   display: block;
}

.diagarea
{
   margin-left: auto;
   margin-right: auto;
}


.cbBoardBubble /*, .cbBoardBubbleNoCircles*/
{
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 6px;
   padding-left: 8px;
   padding-right: 8px;
   font-family: Montserrat, Roboto, sans-serif;
   color: hsla(200, 100%, 17%, 1);
   position: absolute;
   color: black;
   min-width: 160px;
   border: 2px solid hsla(200, 40%, 50%, 1); /* hsla( 0, 0%, 65%, 0.8);*/
   border-radius: 20px;
   text-align: center;
   background-image: linear-gradient( to bottom, hsla( 0, 0%,97%, 0.85), hsla( 0, 0%,92%, 0.83) );
}

.cbBoardBubbleTR, .cbBoardBubbleBR, .cbBoardBubbleTL, .cbBoardBubbleBL
{
}
   .cbBoardBubbleTR:after, .cbBoardBubbleBR:after, .cbBoardBubbleTL:after, .cbBoardBubbleBL:after
   {
      content: '';
      position: absolute;
      display: block;
      border: 3px solid hsla( 0, 0%, 65%, 0.8);
      border-radius: 16px;
      background-image: linear-gradient( to bottom, hsla( 0, 0%,97%, 0.85), hsla( 0, 0%,92%, 0.85) );
      width: 16px;
      height: 16px;
   }

   .cbBoardBubbleTR:before, .cbBoardBubbleBR:before, .cbBoardBubbleTL:before, .cbBoardBubbleBL:before
   {
      content: '';
      position: absolute;
      display: block;
      border: 3px solid hsla( 0, 0%, 75%, 0.8);
      border-radius: 10px;
      background-image: linear-gradient( to bottom, hsla( 0, 0%,97%, 0.9), hsla( 0, 0%,92%, 0.9) );
      width: 10px;
      height: 10px;
   }

      .cbBoardBubbleTR:after
      {
         bottom: -1.8em; /*34px;*/
         left: 1.1em; /*25px;*/
      }

      .cbBoardBubbleTR:before
      {
         bottom: -2.9em; /*-56px;*/
         left: 0.5em; /*5px;*/
      }

   .cbBoardBubbleTL:after
   {
      bottom: -1.8em; /*34px;*/
      right: 1.1em; /*25px;*/
   }

   .cbBoardBubbleTL:before
   {
      bottom: -2.9em; /*-56px;*/
      right: 0.5em; /*5px;*/
   }

      
      .cbBoardBubbleBR:after
      {
         top: -1.8em; /*34px;*/
         left: 1.1em; /*25px;*/
      }

      .cbBoardBubbleBR:before
      {
         top: -2.9em; /*-56px;*/
         left: 0.5em; /*5px;*/
      }

.cbBoardBubbleBL:after
{
   top: -1.8em; /*34px;*/
   right: 1.1em; /*25px;*/
}

.cbBoardBubbleBL:before
{
   top: -2.9em; /*-56px;*/
   right: 0.5em; /*5px;*/
}

   

   

.cbBoardBubbleIcon
{
   margin-left:15px;
   float:right;
   max-height:32px;
}


.cbNodeBtn
{
	width: 22px;
	height: 1.25em;
	margin-top: 1px;
	vertical-align: middle;
	display: inline-block;
	background-repeat: no-repeat;
	background-position-y: 0px;
	background-position-x: 0px;
	background-size: 16px;
	
}

.cbFoldBtn
{
	background-image: url( /Common/Media/Buttons/Fold_Lev1_16.png);
	margin-left: 4px;
}

	.cbFoldBtn[data-level="1"]
	{
		margin-left: 1px;
	}

	.cbFoldBtn[data-level="2"]
	{
		background-image: url( /Common/Media/Buttons/Fold_Lev2_16.png);
	}

.cbFoldBtn[data-level="3"]
{
	background-image: url( /Common/Media/Buttons/Fold_Lev3_16.png);
}

	.cbFoldBtn[data-level="4"]
	{
		background-image: url( /Common/Media/Buttons/Fold_Lev4_16.png);
	}
	.cbFoldBtn[data-level="5"]
	{
		background-image: url( /Common/Media/Buttons/Fold_Lev5_16.png);
	}
	.cbFoldBtn[data-level="6"]
	{
		background-image: url( /Common/Media/Buttons/Fold_Lev6_16.png);
	}
	.cbFoldBtn[data-level="7"]
	{
		background-image: url( /Common/Media/Buttons/Fold_Lev7_16.png);
	}
	.cbFoldBtn[data-level="8"]
	{
		background-image: url( /Common/Media/Buttons/Fold_Lev8_16.png);
	}

.cbUnFoldBtn
{
	background-image: url( /Common/Media/Buttons/UnFold_Lev1_16.png);
	margin-left:4px;
}

.cbUnFoldBtn[data-level="1"]
{
	margin-left: 1px;
}

	.cbUnFoldBtn[data-level="2"]
	{
		background-image: url( /Common/Media/Buttons/UnFold_Lev2_16.png);
	}

	.cbUnFoldBtn[data-level="3"]
	{
		background-image: url( /Common/Media/Buttons/UnFold_Lev3_16.png);
	}
	.cbUnFoldBtn[data-level="4"]
	{
		background-image: url( /Common/Media/Buttons/UnFold_Lev4_16.png);
	}
	.cbUnFoldBtn[data-level="5"]
	{
		background-image: url( /Common/Media/Buttons/UnFold_Lev5_16.png);
	}
	.cbUnFoldBtn[data-level="6"]
	{
		background-image: url( /Common/Media/Buttons/UnFold_Lev6_16.png);
	}
	.cbUnFoldBtn[data-level="7"]
	{
		background-image: url( /Common/Media/Buttons/UnFold_Lev7_16.png);
	}
	.cbUnFoldBtn[data-level="8"]
	{
		background-image: url( /Common/Media/Buttons/UnFold_Lev8_16.png);
	}



/*.cbgame-header table td
{
	border:1px solid blue;
}

.cbgame-header table tr
{
	border: 2px dashed red;
}*/


/* ---- TacticsNoExtJS.css ---- */
body
{
   width:100vw;
   height:100vh;
   margin: 0px;
   padding: 0px;
   padding-bottom:-1px;
   box-sizing:border-box;
}

#parentArea
{
   width: 100%;
   height: calc( 100% - 1px );
}

#boardarea
{
   width: 100%;
   height: calc( 100% - 56px);
}

/* override user agent*/
button
{
   padding: 0px;
}

#buttons
{
   width: 66px;
   /*border: 1px solid black;*/
   margin-left:calc( 48.5% - 33px );
   margin-right:auto;
   margin-top: -10px;
   /*overflow: hidden;*/
}

#message
{
   font-family: Roboto;
   text-align: center; 
   vertical-align: middle;
   line-height: 18px;
   font-size: 0.60em;
   color: black;
   height: 18px;
   width: 96%;
   margin-left: auto;
   margin-right: auto;
   /*border: 1px solid red;*/
}

#btnNext, #btnHint, #btnSolution
{
   height: 18px;
   text-align: center;
   vertical-align: middle;
   margin: 2px;
   margin-left: 3px;
   margin-right: 3px;
   /*border: 1px solid red;*/
   border: none;
   background-repeat: no-repeat !important;
   background-position: center !important;
   width: 16px;
   background: none;
}

#btnNext
{
   background-image: url( "/Common/Media/Ribbons/LiveTactics/NextPosition16.png" );
}

#btnHint
{
   background-image: url( "/Common/Media/Ribbons/LiveTactics/HintRed16.png" );
}

#btnSolution
{
   background-image: url( "/Common/Media/Ribbons/LiveTactics/Solution16.png" );
}

#btnNext:hover, #btnNext:active
{
   background-image: url( "/Common/Media/Ribbons/LiveTactics/NextPosition16Hot.png" );
}

#btnHint:hover, #btnHint:active
{
   background-image: url( "/Common/Media/Ribbons/LiveTactics/HintRed16t.png" );
}

#btnSolution:hover, #btnSolution:active
{
   background-image: url( "/Common/Media/Ribbons/LiveTactics/Solution16Hot.png" );
}

/***********************
   24 Pixel Buttons:
************************/


@media screen and ( min-height: 350px )
{
   #boardarea
   {
      height: calc( 100% - 42px);
   }

   #buttons
   {
      width: 108px;
      margin-top: -0.8em;  
      margin-left:calc( 48.5% - 54px );
   }

   #message
   {
      font-size: 12px;
      height: 24px;
      line-height: 24px;
   }

   #btnNext, #btnHint, #btnSolution
   {
      height: 24px;
      margin: 5px;
      width: 24px;

      margin-left: 6px;
      margin-right: 6px;
   }

   #btnNext
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/NextPosition24.png" );
   }

   #btnHint
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/HintRed24.png" );
   }

   #btnSolution
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/Solution24.png" );
   }

   #btnNext:hover, #btnNext:active
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/NextPosition24Hot.png" );
      animation:none;
   }

   #btnHint:hover, #btnHint:active
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/HintRed24Hot.png" );
   }

   #btnSolution:hover, #btnSolution:active
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/Solution24Hot.png" );
   }
}

/***********************
   32 Pixel Buttons:
************************/

@media screen and ( min-height: 520px )
{
   #boardarea
   {
      height: calc( 100% - 54px);
   }

   #buttons
   {
      width: 146px;
      position: relative;
      margin-top: -0.8em; /*-24px;*/
      margin-left:calc( 48.5% - 73px );
   }

   #message
   {
      font-size: 16px;
      height: 32px;
      line-height: 32px;
   }

   #btnNext, #btnHint, #btnSolution
   {
      height: 32px;
      margin: 5px;
      width: 32px;

      margin-left: 8px;
      margin-right: 8px;
   }

   #btnNext
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/NextPosition32.png" );
   }

   #btnHint
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/HintRed32.png" );
   }

   #btnSolution
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/Solution32.png" );
   }

   #btnNext:hover, #btnNext:active
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/NextPosition32Hot.png" );
   }

   #btnHint:hover, #btnHint:active
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/HintRed32Hot.png" );
   }

   #btnSolution:hover, #btnSolution:active
   {
      background-image: url( "/Common/Media/Ribbons/LiveTactics/Solution32Hot.png" );
   }
}

.shakeAnimation
{
   animation: animShake 1.5s ease;
   animation-delay:3s;
   animation-iteration-count:6;
}

.flashAnimation
{
   animation: animFlash 1.0s ease;
   animation-iteration-count:5;
}

@keyframes animShake
{
   0%, 100%
   {
      transform: translateX(0);
   }

   10%, 30%, 50%, 70%, 90%
   {
      transform: translateX(-3px);
   }

   20%, 40%, 60%, 80%
   {
      transform: translateX(3px);
   }
}

@keyframes animFlash
{
   0%, 100%
   {
      opacity: 1;
   }

   50%
   {
      opacity: 0.3;
   }
}