@media only screen and (max-width: 700px) {
    .board {
        width: 100%;
    }
}

.spare-pieces-7492f .piece-417db {
    background: radial-gradient(circle, #e4ecf1 60%, #404145 70%);
    padding: 7px;
}

.spare-pieces-7492f .piece-417db:hover {
     background: radial-gradient(circle, #ff93c6 60%, #404145 72%) !important;
}

.board-b72b1 { border: 0px; }

.white-1e1d7 {
    background: #f0d9b5;
    /*box-shadow: inset 0 0 3px 2px #f0d5ad;*/
}

.black-3c85d {
    background: #b58863;
    /*box-shadow: inset 0 0 3px 2px #b07f57;*/
}

.promotion-mask { opacity : 0.6; }

.promotion-background {
    -webkit-background: inset 0 0 10px 3px #494D53 !important;
    -moz-background: inset 0 0 10px 5px #494D53 !important;
    background: radial-gradient(circle, #FFFFFF, #787878 100%) !important;
}

.promotion-background:hover {
  -webkit-background: inset 0 0 10px 3px #fca2cf !important;
  -moz-background: inset 0 0 10px 5px #fca2cf !important;
  background: radial-gradient(circle, #FFFFFF, #fca2cf 100%) !important;
}

.highlight-candidate { background: #AAA; }

.highlight-candidate-light {
    background: #e0bd88;
    box-shadow: inset 0 0 3px 2px #d8b073;
}

.highlight-candidate-dark {
    background: #9e6a41;
    box-shadow: inset 0 0 3px 2px #955d32;
}

.highlight1-32417 {
    box-shadow: inset 0 0 0px 0px #AAAAAA;
}

.highlight2-9c5d2 {
    box-shadow: inset 0 0 0px 0px #AAAAAA;
}

.highlight-light {
    /*background: radial-gradient(circle, #555, #f0d9b5, #f0d9b5 40%) !important;*/
}

.highlight-dark {
    /*background: radial-gradient(circle, #555, #b58863 , #b58863 40%) !important;*/
}

/* .highlight-spare { background: #fca2cf  !important} */
.highlight-spare {
    background: radial-gradient(circle, #ff93c6 60%, #404145 72%) !important;
}

.green-light { background: #7dec87; box-shadow: inset 0 0 3px 2px #38d946;}
.green-dark { background: #7dec87; box-shadow: inset 0 0 3px 2px #38d946;}

.blue-light { background: #7dc0ec; box-shadow: inset 0 0 3px 2px #49a9dd;}
.blue-dark { background: #7dc0ec; box-shadow: inset 0 0 3px 2px #49a9dd;}

.purple-light { background: #d7aef1; box-shadow: inset 0 0 3px 2px #c28de3;}
.purple-dark { background: #d7aef1; box-shadow: inset 0 0 3px 2px #c28de3;}

.magenta-light { background: #f1aed9; box-shadow: inset 0 0 3px 2px #e38dc4;}
.magenta-dark { background: #f1aed9; box-shadow: inset 0 0 3px 2px #e38dc4;}

.red-light { background: #ff9eae; box-shadow: inset 0 0 3px 2px #e38d8d;}
.red-dark { background: #ff9eae; box-shadow: inset 0 0 3px 2px #e38d8d;}

.yellow-light { background: #f0ed99; box-shadow: inset 0 0 3px 2px #e4e180;}
.yellow-dark { background: #e5e06e; box-shadow: inset 0 0 3px 2px #dbd559;}

.blue-green-light { background: #97f0e2; box-shadow: inset 0 0 3px 2px #7ce8d7;}
.blue-green-dark { background: #6ae4d1; box-shadow: inset 0 0 3px 2px #4ddac4;}

.grey-light { background: #d7d7d7; box-shadow: inset 0 0 3px 2px #b8b8b8;}
.grey-dark { background: #b9b9b9; box-shadow: inset 0 0 3px 2px #9d9d9d;}


.buttons-board {
    background: rgb(18,22,25);
    background: linear-gradient(180deg, rgba(18,22,25,1) 0%, rgba(52,58,64,1) 15%, rgba(63,69,75,0.93) 50%, rgba(52,58,64,1) 97%, rgba(18,22,25,1) 100%);
    padding-top: 3px;
    padding-bottom: 3px;
}

.buttons-board-double {
    background: rgb(18,22,25);
    background: linear-gradient(180deg, rgba(18,22,25,1) 0%, rgba(52,58,64,1) 6%, rgba(63,69,75,0.93) 50%, rgba(52,58,64,1) 97%, rgba(18,22,25,1) 100%);
    padding-top: 3px;
    padding-bottom: 3px;
}

.text-bar {
    color: white;
    background: rgba(52,58,64,1);
    background: linear-gradient(180deg, rgba(18,22,25,1) 0%, rgba(52,58,64,1) 10%, rgba(52,58,64,1) 100%);
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

.bg-light {
    color: #222;
}

.mybtn {
    padding: 0;
    font-size: 24px;
    width: 40px;
    height: 40px;
    margin: 2px;
    border-radius: 100px;
}

.btn-dark {
    border-color : rgba(52,58,64,0);
    background-color: rgba(52,58,64,0);
}

.mybtn:disabled {
    color : #959595;
    background-color: rgba(52,58,64,0);
    border-color : rgba(52,58,64,0);
}

.btn-menu {
    border-radius: 7px;
}

.btn-left {
    float: left;
}

.btn-right {
    float: right;
}

.btn-hidden {
    visibility: hidden;
}

.btn-round {
    margin: 0px;
    margin-top: 2px;
    padding-top: 2px;
    border-radius: 50px;
    height: 42px;
}

.btn-eval {
    font-size: 17px;
    margin-left:0px;
}


.btn-on{color:#343A40;background-color:#f6f640;border-color:#F7DC6F}

.btn-on:hover{color:#343A40;background-color:#f6f640;border-color:#F7DC6F}

.btn-on.focus,.btn-on:focus{box-shadow:0 0 0 .2rem rgba(246,246,64,.5)}

.btn-on.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(246,246,64,.5)}



.btn-help{color:white !important;background-color:#a340f6;border-color:#b96ff7}

.btn-help:hover{color:white;background-color:#a340f6;border-color:#b96ff7}

.btn-help.focus,.btn-help:focus{box-shadow:0 0 0 .2rem rgba(158,64,246,.5)}

.btn-help.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(158,64,246,.5)}

.ml1 {
  font-weight: 800;
  font-size: 3em;
}

.ml1 .letter {
  display: inline-block;
  line-height: 1em;
}

.ml1 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml1 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #fff;
  transform-origin: 0 0;
}

.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }

.help-msg {
    font-size: 20px;
}

@media only screen and (max-width: 500px) {
    .help-msg {
        font-size: 18px;
    }

    .ml1 {
        font-size: 2.2em;
    }
}