/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

/* https://css-tricks.com/international-box-sizing-awareness-day/ */
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Custom css */
body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header {
    background: #3F51B5;
    color: white;
    padding: 0.5em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
    z-index: 1;
}

footer {
    background: #3F51B5;
    color: white;
    font-size: 0.6em;
    padding: 0.5em;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.26);
}

main {
    flex: 1;
    overflow: hidden;
    display: flex;
    background: #E8EAF6;
    justify-content: center;
}

main section {
    flex: 1;
    padding: 0.5em;
    overflow: auto;
}

main section.flex {
    display: flex;
}

h1 {
    font-size: 1.1em;
    font-weight: bold;
}

a {
    text-decoration: none;
    color: #FF3D00; /*Deep Orange A400*/
}

footer a {
    color: #FF9E80; /*Deep Orange A100*/
}

button,
input[type="submit"],
input[type="button"] {
    min-width: 3em;
    background-color: #3F51B5;
    color: white;
    border: 2px solid #3F51B5;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.12);
    padding: 0.5em;
    line-height: 1em;
}


button.round,
input[type="submit"].round,
input[type="button"].round {
    min-width: 0;
    width: 2em;
    height: 2em;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    padding: 0;
    right: 0.5em;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    font-size: 1.5em;
}

button::-moz-focus-inner {
    border: 0;
}

button:focus, button:active, button:hover,
input[type="submit"]:focus, input[type="submit"]:active, input[type="submit"]:hover
input[type="button"]:focus, input[type="button"]:active, input[type="button"]:hover {
    border-color: #9FA8DA;
    outline: none;
}

button:active,
input[type="submit"]:active,
input[type="button"]:active {
    background-color: #9FA8DA;
}

input[type="text"],
input[type="email"],
input[type="number"]{
    border: none;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.12);
    padding: 0.5em;
    transition: box-shadow 0.2s ease;
}

input[type="text"]:focus, input[type="text"]:active,
input[type="email"]:focus, input[type="email"]:active,
input[type="number"]:focus, input[type="number"]:active{
    box-shadow: 0px 0px 0px 2px #9FA8DA;
    outline: none;
}

.hidden {
    display: none !important;
}

.card {
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
    background: #ffffff;
    border-radius: 2px;
    padding: 0.5em;
    margin: 0.5em;
    min-width: 17em;
    max-width: 24em;
}

.card.floatingButton{
    position: relative;
    padding-bottom: 1.5em;
    margin-bottom: 2em;
}

.card button {
    box-shadow: none;
}

.card .legend {
    margin-bottom: 0.5em;
    font-size: 1.1em;
}

.tableResponsive {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: none;
    min-width: 0;
    margin: 0;
}

.tableResponsive .header {
    display: flex;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    flex-shrink: 0;
}

.tableResponsive .header .cell {
    flex-grow: 1;
    flex-basis: 0;
    overflow: auto;
}

.tableResponsive .body {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.tableResponsive .body .col {
    flex: 1;
    overflow: auto;
}

#scoresTable .currentPlayer {
    background: #FBE9E7; /*Deep orange 50*/
    transition: background 0.2s ease-in-out;
}

#scoresTable .header {
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
    background: #ffffff;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    overflow: hidden;
    font-weight: bold;
    text-align: center;
    position: relative;
    border-bottom: 1px solid #7986CB;
}

#scoresTable .header .cell {
    border-right: 1px solid #7986CB;
}

#scoresTable .header .cell:last-child {
    border-right: none;
}

#scoresTable .header .cell .playerName {
    padding: 0.3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#scoresTable .header .cell .progress {
    height: 5px;
    background-color: #9FA8DA;
    width: 0;
    transition: width 0.2s ease-in-out;
}

#scoresTable .body {
    border-top: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
    z-index: 1;
    background: #ffffff;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}

#scoresTable .body .col {
    border-right: 1px solid #7986CB;
}

#scoresTable .body .col:last-child {
    border-right: none;
}

#scoresTable .body .cell {
    font-family: monospace;
    text-align: center;
    font-size: 1.1em;
    white-space: nowrap;
}

#scoresTable .body .cell:first-of-type {
    border-top: none;
}

/*#scoresTable .body .cell:not(.invalid):last-of-type {
    font-size: 1.3em;
}*/

#scoresTable .body .cell.invalid, #scoresTable .body .cell.invalid.landing {
    text-decoration: line-through;
    -webkit-animation-name: invalid; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: invalid;
    animation-duration: 2s;
}

#scoresTable .body .cell.landing {
    -webkit-animation-name: landing; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
    animation-name: landing;
    animation-duration: 2s;
}

.scoresInputs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.scoresInputs > * {
    font-size: 1em;
    margin-top: 0.5em;
    margin-right: 0.25em;
    margin-left: 0.25em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.26);
}

.scoresInputs .inputGroup {
    display: flex;
    flex-wrap: nowrap;
    border-radius: 2px;
    overflow: hidden;
}

.scoresInputs .inputGroup > * {
    border-radius: 0;
    border-right-width: 0;
    border-left-width: 0;
    box-shadow: none;
}

.scoresInputs button {
    padding: 0;
    text-align: center;
    line-height: normal;
}

.scoresInputs button span {
    font-size: 1.5em;
    font-weight: bold;
}

.scoresInputs .inputGroup :first-child {
    border-left-width: 2px;
}

.scoresInputs .inputGroup :last-child {
    border-right-width: 2px;
}

.scoresInputs .inputGroup > input {
    border: 2px solid #3F51B5;
    border-width: 2px 0 2px 0;
    box-shadow: none;
    text-align: center;
}

.scoresInputs .inputGroup > input:focus {
    border-color: #9FA8DA;
}

#markedPoints {
    width: 5em;
}

#quit {
    background-color: #4B4B4B;
    border-color: #4B4B4B;
}

#quit:active,
#quit:hover,
#quit:focus {
    border-color: #7f7f7f;
    outline: none;
}

#quit:active {
    background-color: #7f7f7f;
}

#pointsInputError, #success {
    margin-top: 0.5em;
    text-align: center;
}
#settingsInputsError {
    margin-bottom: 0.5em;
}

.errorMsg {
    color: #DD2C00; /*Deep Orange A700*/
    font-size: 0.7em;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes invalid{
    from {background-color: red;}
    to {background-color: transparent;}
}

@-webkit-keyframes landing{
    from {background-color: green;}
    to {background-color: transparent;}
}

/* Standard syntax */
@keyframes invalid{
    from {background-color: red;}
    to {background-color: transparent;}
}

@keyframes landing {
    from {background-color: green;}
    to {background-color: transparent;}
}

form .flexFormCtn {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

form .flexFormCtn fieldset {
    flex: 1;
    padding-bottom: 0;
}

form fieldset#savedGames {
    max-width: 49em;
}

form fieldset#gameActions {
    flex-basis: 100%;
    background: none;
    box-shadow: none;
    text-align: center;
    margin: 0.5em;
}

form fieldset#gameActions button{
    min-width: 10em;
}

form .flexFormCtn .formRow {
    display: flex;
    align-items: center;
}

form .formRow,
form .playerInputRow {
    margin-bottom: 0.5em;
    position: relative;
}
form .playerInputRow {
    width: 100%;
}

form .formRow:last-child,
form .playerInputRow:last-child {
    margin-bottom: 0;
}

form .flexFormCtn .formRow > * {
    flex: 1;
}

form .flexFormCtn fieldset#rulesSettings .formRow > *{
    overflow: hidden;
}

form .flexFormCtn .formRow label {
    text-align: right;
    margin-right: 0.5em;
    font-size: smaller;
}

form .flexFormCtn .formRow input {
    width: 100%;
}

form .flexFormCtn .formRow#playerInputs,
form .flexFormCtn .formRow#savedGamesInputs {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0.5em;
}

.formRow#savedGamesInputs .savedGameRow {
    margin-bottom: 0.5em;
    border-radius: 2px;
    border: 2px solid #E3F2FD;
    display: flex;
    flex-direction: row;
    transition: background 0.2s ease;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    padding: 0 0.5em 0.5em 0;
}

.formRow#savedGamesInputs .savedGameRow:hover {
    background: #E3F2FD;
}

.formRow#savedGamesInputs .savedGameRow > * {
    padding: 0.5em 0 0 0.5em;
}

.formRow#savedGamesInputs .savedGameRow:last-child {
    margin-bottom: 0;
}

.formRow#savedGamesInputs .savedGameRow .infos label {
    display: block;
    text-align: left;
    padding: 0;
    line-height: 1.5em;
}

.formRow#savedGamesInputs .savedGameRow .controles button:first-of-type {
    margin-right: 0.5em;
}