/* main */
html
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -ms-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
  font-size: 106.25%;
  quotes: "“" "”";
}

*, *:before, *:after
{
  box-sizing: inherit;
}

body
{
  margin: 0;
  padding: 0;
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -.022em;
  font-family: "Helvetica Neue","Helvetica","Arial",sans-serif;
  background-color: #fff;
  color: #000;
  font-style: normal;
  min-width: 320px;
}

ul,
ol,
li,
dl,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hgroup,
p,
blockquote,
figure,
form,
fieldset,
input,
legend,
pre,
abbr,
button
{
  margin: 0;
  padding: 0;
}

.button
{
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -.022em;
  background-color: #0070c9;
  background: linear-gradient(#42a1ec,#0070c9);
  border-color: #07c;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: inline-block;
  min-width: 30px;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;
  white-space: nowrap;
}

.button:hover
{
  background-color: #147bcd;
  background: linear-gradient(#51a9ee,#147bcd);
  border-color: #1482d0;
  text-decoration: none;
}

.button:focus
{
  box-shadow: 0 0 0 3px rgba(131,192,253,.5);
  outline: none;
}

fieldset, iframe, img
{
  border: 0;
}

article,
aside,
footer,
header,
nav,
main,
section,
summary,
details,
hgroup,
figure,
figcaption
{
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6
{
  color: #111;
}

h1 img,
h2 img,
h3 img,
h4 img,
h5 img,
h6 img
{
  display: block;
  margin: 0;
}

ul,
ol
{
  margin-left: 1.17647em;
}

ul ul,
ul ol,
ol ul,
ol ol
{
  margin-top: 0;
  margin-bottom: 0;
}

nav ul,
nav ol
{
  margin: 0;
  list-style: none;
}

li li
{
  font-size: 1em;
}

a
{
  color: #0070c9;
}

a:link,
a:visited
{
  text-decoration: none;
}

a:hover
{
  text-decoration: underline;
}

a:active
{
  text-decoration: none;
}

b,
strong
{
  font-weight: 600;
}

em,
i,
cite,
dfn
{
  font-style: italic;
}

sup
{
  font-size: .6em;
  vertical-align: top;
  position: relative;
  bottom: -.2em;
}

h1 sup,
h2 sup,
h3 sup
{
  font-size: .4em;
}

sup a
{
  vertical-align: inherit;
  color: inherit;
}

sup a:hover
{
  color: #0070c9;
  text-decoration: none;
}

sub
{
  line-height: 1;
}

abbr
{
  border: 0;
}

.main
{
  position: relative;
  max-width: 2560px;
  margin: 0 auto;
  display: block;
}

.section
{
  overflow: hidden;
}

.section-content
{
  width: 1200px;
  margin: 0 auto;
  padding-left: 22px;
  padding-right: 22px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.row
{
  position: relative;
  z-index: 1;
}

.row::before,
.row::after
{
  content: ' ';
  display: table;
}

.row::after
{
  clear: both;
}

.column
{
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  float: left;
  min-height: 2px;
}

.more
{
  text-decoration: none;
}

.icon::before,
.icon::after,
.more::before,
.more::after
{
  color: inherit;
  display: inline-block;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  line-height: 1;
  text-decoration: none;
  position: relative;
  z-index: 1;
  alt: '';
}

.more::after
{
  content: ">";
}

.icon-after::after,
.more::after
{
  padding-left: .3em;
  top: 0;
}

.large-1
{
  width: 8.33333%;
}

.large-2
{
  width: 16.66667%;
}

.large-3
{
  width: 25%;
}

.large-offset-3
{
  margin-left: 25%;
}

.large-4
{
  width: 33.33333%;
}
.large-5
{
  width: 41.66667%;
}
.large-6
{
  width: 50%;
}
.large-7
{
  width: 58.33333%;
}

.large-8
{
  width: 66.66667%;
}

.large-9
{
  width: 75%;
}

.large-10
{
  width: 83.33333%;
}

.large-11
{
  width: 91.66667%;
}

.large-12
{
  width: 100%;
}

.large-centered
{
  margin-left: auto;
  margin-right: auto;
  float: none;
}

.large-uncentered
{
  margin-left: 0;
  margin-right: 0;
}

.section-headline
{
  margin-top: 0px;
  font-size: 40px;
  line-height: 1.07143;
  font-weight: 600;
  letter-spacing: -.005em;
}

.section-body
{
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -.022em;
}

.section-headline-elevated
{
  font-size: 48px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.005em;
}

.section-body-elevated
{
  font-size: 24px;
  line-height: 1.33349;
  font-weight: 400;
  letter-spacing: .009em;
}

.icon-wrapper .icon,
.icon-wrapper .more::after,
.icon-wrapper .icon-before::before,
.icon-wrapper .icon-after::after
{
  display: inline;
}

a.icon-wrapper
{
  text-decoration: none;
}

a.icon-wrapper:hover .icon-copy
{
  text-decoration: underline;
}

.lockup-wrapper
{
  margin-right: 30px;
}

@media only screen and (max-width: 1199px)
{
  .section-content
  {
    width: 100%;
    margin: 0 auto;
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media only screen and (max-width: 767px)
{
  .section-content
  {
    width: 100%;
    margin: 0 auto;
    padding-left: 4px;
    padding-right: 4px;
  }
}

@media only screen and (max-width: 767px)
{
  .small-offset-0
  {
    margin-left: 0;
   }
  .small-1
  {
    width: 8.33333%;
  }
  .small-2
  {
    width: 16.66667%;
  }
  .small-3
  {
    width: 25%;
  }
  .small-4
  {
    width: 33.33333%;
  }
  .small-5
  {
    width: 41.66667%;
  }
  .small-6
  {
    width: 50%;
  }
  .small-7
  {
    width: 58.33333%;
  }
  .small-8
  {
    width: 66.66667%;
  }
  .small-9
  {
    width: 75%;
  }
  .small-10
  {
    width: 83.33333%;
   }
  .small-11
  {
    width: 91.66667%;
  }
  .small-12
  {
    width: 100%;
  }
}

@media only screen and (max-width: 767px)
{
  .lockup-wrapper
  {
    margin-bottom: 54px;
  }
  .section-headline
  {
    font-size: 24px;
  }
  .section-body
  {
    font-size: 17px;
  }
  .section-headline-elevated
  {
    font-size: 40px;
  }
  .section-body-elevated
  {
    font-size: 19px;
  }
}

/* replay */
@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;
}

.rootParent
{
  height: 100%;
}

.root
{
  height: 100%;
  line-height: 1.231;
  font-size: 13px;
  font-style: normal;
  font-family: Verdana,Arial,sans-serif;
  box-sizing: border-box;
}

.tdreplay
{
  height: 80vh;
  width: 96%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  margin-top: 0px;
  padding: 0px;
  border: 1px solid gray;
  position: relative;
  clear: both;
}

.left
{
  height: 100%;
  width: 60%;
  left: 0px;
  top: 0px;
  position: absolute;
  border-right: 1px solid black;
}

.leftContainer
{
  height: 100%;
  width: 100%;
}

.leftNest
{
  height: 100%;
  width: 100%;
}

.leftNorth
{
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  position: relative;
}

.boardHolder
{
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: #F2F1EC;
  border-bottom: 1px solid black;
}

.boardPanel
{
  height: 100%;
  width: 100%;
  position: relative;
}

.boardCanvas
{
  height: 100%;
  width: 100%;
  position: relative;
}

.belowBoard
{
  height: 40px;
  width: 100%;
  margin: 0px;
  padding-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  border-top: 0px solid gray;
  overflow: hidden;
  background-color: #FAF7F3;
}

.leftSouth
{
  height: 30%;
  width: 100%;
  left: 0px;
  position: absolute;
}

.leftSouthNest
{
  height: 100%;
  width: 100%;
  background-color: #F2F1EC;
}

.right
{
  height: 100%;
  width: 40%;
  top: 0px;
  position: absolute;
  overflow: hidden;
}

.rightNest
{
  height: 100%;
  width: 100%;
}

.rightNorth
{
  height: 100%;
  width: 100%;
}

.rightSouth
{
  height: 0%;
  width: 100%;
}

.nota-container
{
  height: 100%;
  width: 100%;
  display: table;
  padding: 0;
  margin: 0;
  border: 0;
  font-family: Helvetica Neue, Roboto, sans-serif;
  font-size: 15px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.nota-header-container
{
  height: auto;
  border-bottom: 1px solid silver;
}

.headerPanel
{
  height: auto;
  width: 100%;
  padding-top: 4px;
  padding-bottom: 4px;
  overflow: hidden;
  text-align: center;
  background-image: linear-gradient( to bottom, hsla( 30, 10%, 98%, 0.6), hsla( 30, 10%, 95%, 0.6) )!important;
}

.mainHeader
{
  display: block;
}

.headerTable
{
  width: 100%;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
}

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

.headerTable td
{
  border: none;
  padding: 0;
}

.headerPanel span
{
  padding: 0 0.2ex 0 0.2ex;
}

.playerPortrait
{
  vertical-align: top;
}

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

.playerPortrait img
{
  border: thin solid silver;
  padding: 0;
  display: inline;
}

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

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

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

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

span.team
{
  font-size: 70%;
  padding-left: 0.20em !important;
  font-weight: 400;
}

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

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

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

.playerNation img, .flagWhite img, .flagBlack img
{
  border: none!important;
  padding: 0!important;
  display: inline;
}

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

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

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

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

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

span.annotator
{
  display: block;
  font-weight: 500;
  font-size: 88%;
  font-family: Roboto Condensed;
}

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

.nota-moves-container
{
  height: 100%;
  width: 100%;
  position: relative;
  display: table-row;
}

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

.movesPanel
{
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow-y: auto;
  position: absolute;
  padding: 8px;
  padding-right: 50px;
  line-height: 1.55em;
  background-color: #F2EEE5;
}

span.tdline[data-level="0"]
{
  display: block;
  margin-top: 2px;
}

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

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

span.tdcomment
{
  font-weight: normal;
  font-style: normal;
  font-family: 'Roboto Condensed', 'Arial Narrow';
  text-shadow: none;
  color: brown;
}

span.tdcomment.is-bold
{
  font-weight: 700;
}

span.tdmove
{
  text-decoration: none;
  cursor: pointer;
  padding: 0;
  padding-left: 0.1em;
  margin: 0;
}

span.tdmove-crit-opening
{
  color: blue;
}

span.tdmove-crit-middle
{
  color: green;
}

span.tdmove-crit-end
{
  color: red;
}

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

span.tdmove:active,
span.tdmove.tdcurmove,
span.tdmove.tdcurmove: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 );
}

span.tdcurline,
span.tdcurline:hover
{
  background-color: hsla( 60, 90%, 85%, 0.45 );
  color: black;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  box-shadow: 1px 1px 5px hsla( 0, 0%, 0%, 0.12 );
}

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

span.tdprefix
{
  font-weight: 600;
  text-decoration: underline;
}

.replayPanel
{
  height: 40px;
  width: 452px;
  margin: 0 auto;
  line-height: 0;
}

.replayButton
{
  height: 28px;
  width: 32px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  border-color: #A39F9B;
  margin-top: 6px;
  margin-bottom: 0px;
  margin-left: 4px;
  margin-right: 0px;
  padding: 0px;
  position: relative;
  background-color: silver;
  background-repeat: no-repeat;
  background-position: center;
  touch-action: manipulation;
  line-height: normal;
  vertical-align: middle;
}

.replayButtonDisabled
{
  opacity: 0.50 !important;
}

.replayButton:focus
{
  background-color: yellow;
}

.replayButton:hover
{
  opacity: 0.75;
  border-color: #d6d6d6;
}

.replayButton:active
{
  border-color: #A39F9B;
}

.playBackward
{
  background-image: url("https://kb5963.github.io/replay/images/replay/PlayBackward.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.playForward
{
  background-image: url("https://kb5963.github.io/replay/images/replay/PlayForward.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.autoPlay
{
  background-image: url("https://kb5963.github.io/replay/images/replay/AutoPlay.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.autoStop
{
  background-image: url("https://kb5963.github.io/replay/images/replay/Stop.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.playSlower
{
  background-image: url("https://kb5963.github.io/replay/images/replay/Minus.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.playFaster
{
  background-image: url("https://kb5963.github.io/replay/images/replay/Plus.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.goToBegin
{
  background-image: url("https://kb5963.github.io/replay/images/replay/GoBegin.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.goToEnd
{
  background-image: url("https://kb5963.github.io/replay/images/replay/GoEnd.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.flipBoard
{
  background-image: url("https://kb5963.github.io/replay/images/replay/FlipBoard.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.loadPrevious
{
  margin-left: 20px;
  background-image: url("https://kb5963.github.io/replay/images/replay/LoadPrevious.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.loadNext
{
  background-image: url("https://kb5963.github.io/replay/images/replay/LoadNext.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.gameList
{
  background-image: url("https://kb5963.github.io/replay/images/replay/GameList.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.download
{
  margin-left: 20px;
  background-image: url("https://kb5963.github.io/replay/images/replay/Download.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.settings
{
  background-image: url("https://kb5963.github.io/replay/images/replay/Settings.png"), linear-gradient(to bottom, #d9d9d9 0%,#d9d9d9 50%,#cacaca 50%,#dddddd 100%);
}

.toolBarSep
{
  margin-left: 8px;
}

.listParent
{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.listBody
{
  height: 100%;
  width: 100%;
}

.grid
{
  position: relative;
  overflow: hidden;
  font-size: 1em;
}

.grid-header
{
  overflow-x: hidden;
  overflow-y: scroll;
  background: #f9f9f9;
  border: 1px solid #e9e9e9;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
}

.grid-header
{
  width: 100%;
}

.grid-header-scrollbar::-webkit-scrollbar
{
  visibility: hidden;
}

.grid-header-row > th
{
  padding-top: 0.40em;
  padding-bottom: 0em;
  padding-left: 2.8px;
  padding-right: 2.8px;
  text-align: left !important;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 300;
  height: 2.0em;
  border-bottom: 1px solid hsla( 0, 0%, 0%, 0.3 );
}

.grid-table
{
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.grid-table td
{
  padding-top: 0.40em;
  padding-bottom: 0em;
  padding-left: 2.8px;
  padding-right: 2.8px;
  overflow: hidden;
  white-space: nowrap;
}

.grid-header-row
{
  font-family: Roboto;
}

.grid-header-cell
{
  padding-top: 0.40em;
  padding-bottom: 0em;
  padding-left: 2.8px;
  padding-right: 2.8px;
  font-weight: 300;
  text-align: left !important;
  border: 1px solid #e9e9e9;
  border-left: none;
  border-top: 0;
  border-bottom: 0;
  background: #f9f9f9;
}

.grid-header-row > .grid-header-cell
{
  border-bottom: 0;
}

.grid-cell
{
  border: 1px solid #e9e9e9;
  border-left: none;
  border-top: 0;
}

.grid-row > .grid-cell:last-child, .grid-header-row > .grid-header-cell:last-child
{
  border-right: none;
}

.grid-player
{
  font-size: 14px;
  font-weight: 600 !important;
  text-align: left;
}

.grid-rating
{
  font-size: 14px;
  text-align: center;
}

.grid-flag
{
  font-size: 14px;
  text-align: center;
}

.grid-year
{
  font-size: 14px;
  text-align: center;
}

.grid-result
{
  font-size: 14px;
  text-align: center;
}

.grid-event
{
  font-size: 14px;
  text-align: left;
}

.grid-round
{
  font-size: 14px;
  text-align: right;
}

.grid-moves
{
  font-size: 14px;
  text-align: right;
}

.grid-body
{
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white !important;
  border: 1px solid #e9e9e9;
  border-top: none;
  border-bottom: none;
}

.grid-row
{
  font-family: Roboto;
}

.grid-row, .grid-alt-row
{
  height: 1.3em;
  font-size: 1.2em;
  font-family: Roboto;
}

.gamelist-table tr:nth-child(odd)
{
  background-color: #fcfcfc;
}

.gamelist-table tr:nth-child(even)
{
  background-color: #FFFFFF;
}

.gamelist-table tr:hover
{
  background-color: #BCD2E5;
}

.grid-header-sort-asc::before
{
  border-width: 5px 5px 0;
  border-color: #009a67 transparent transparent;
}

.grid-header-sort-desc::before
{
  border-width: 0 5px 5px;
  border-color: transparent transparent #009a67;
}

.grid-header-sort::before
{
  height: 0;
  width: 0;
  content: " ";
  display: block;
  float: left;
  border-style: solid;
}

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

.tdmedal
{
  width: 40px;
  height: 16px;
}

span.tdmedal
{
  vertical-align: middle;
}

span.tdcolors
{
  background-image: url("https://kb5963.github.io/replay/images/replay/NotaColors.png");
  background-repeat: no-repeat;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  display: inline-block;
}

.disabled
{
  pointer-events: none;
  opacity: 0.4;
}

.navButtonContainer
{
  height: 40px;
  width: 100%;
  margin: 0px;
  padding-left: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  border-top: 1px solid gray;
  overflow: hidden;
  background-color: #FAF7F3;
}

.navButton
{
  height: 28px;
  width: 80px;
  font-family: Roboto;
  text-align: center;
  margin-top: 6px;
  margin-bottom: 5px;
  margin-left: 6px;
  margin-right: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 6px;
  padding-right: 6px;
  border-width: 1px;
  border-style: solid;
  border-radius: 3px;
  border-color: #A39F9B;
  color: black;
  background-image: linear-gradient(to bottom, hsl( 30, 30%, 92%) 20%, hsl( 30, 30%, 83%));
  touch-action: manipulation;
}

.navButtonDisabled
{
  opacity: 0.30 !important;
}

.navButton:hover
{
  opacity: 0.75;
  border-color: #d6d6d6;
}

.navButton:active
{
}

@media screen and (max-width:767px)
{
  .belowBoard
  {
    border-bottom: 1px solid silver;
  }
  .grid-header-row > th
  {
    font-family: Roboto Condensed;
    font-size: 1.0em;
  }
  .grid-row, .grid-alt-row
  {
    font-family: Roboto Condensed;
    font-size: 1.0em;
  }
}

.pieceSelect,
.movesFontSizeSelect
{
  width: 200px;
  padding: 8px 15px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: #fff;
  font-size: 16px;
  color: #555;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.pieceSelect:focus
{
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}

.movesFontSizeSelect:focus
{
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}

.settingsDialog form
{
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

.settingsButton
{
  height: 28px;
  width: 64px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  border-color: #A39F9B;
  margin-top: 6px;
  margin-bottom: 0px;
  margin-left: 16px;
  margin-right: 0px;
  padding: 0px;
  position: relative;
  background-color: #E8E8E8;
  background-repeat: no-repeat;
  background-position: center;
  touch-action: manipulation;
}

.settingsButton:hover
{
  border-color: #A39F9B;
  background-color: #99D0F5;
}

.tooltip
{
  position: fixed;
  pointer-events: none;
  display: none;
}

.tooltip.visible
{
  display: block;
}

.toggle-container
{
  display: inline-block;
  vertical-align: middle;
  font-family: Arial, sans-serif;
  margin-top: 6px;
  margin-bottom: 0px;
  margin-left: 4px;
  margin-right: 0px;
  padding: 0px;
  height: 28px;
}

.switch
{
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  background-color: #ccc;
  border-radius: 14px;
  cursor: pointer;
  transition: background-color 0.4s;
  line-height: normal;
  vertical-align: middle;
}

.slider
{
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.4s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.label-text
{
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
}

input:checked + .switch
{
  background-color: #007bff;
}

input:checked + .switch .slider
{
  transform: translateX(24px);
}

.settingsDialog
{
  min-width: 380px;
  background-color: #2b2a27;
  padding: 24px;
  border-radius: 8px;
  color: #bababa;
  border: none;
}

.settings-row
{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;
  width: 100%;
}

.settings-row .label-text
{
  width: 140px;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 14px;
  color: #bababa;
  margin-right: 15px;
}

.settings-row select
{
  flex-grow: 1;
  background: #3c3b37;
  color: #fff;
  border: 1px solid #403d39;
  padding: 8px;
  border-radius: 4px;
  outline: none;
}

.settings-row input[type="checkbox"]
{
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #24b4ff;
  cursor: pointer;
}

.settingsDialog form[method="dialog"]
{
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

.settingsDialog h2
{
  margin: 0 0 25px 0;
  padding: 0 0 15px 0;
  text-align: center;
  width: 100%;
  border-bottom: 1px solid #403d39;
  color: #fff;
  font-weight: 400;
}

.settingsDialog button
{
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #363430;
  color: #bababa;
  border: none;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  line-height: 1;
}

.settings-row input[type="range"]
{
  flex-grow: 1;
  margin: 0 15px;
}

.settings-row .value-display-simple
{
  width: 65px;
  text-align: right;
  font-size: 14px;
  color: #bababa;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  font-family: monospace;
}

.variation-row
{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
  padding: 4px 0;
}