/* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Inconsolata:wght@200;600&&display=swap'); */

:root {
  --colour-primary: #039be5;
  --colour-primary-light: #63ccff;
  --colour-primary-dark: #006db3;
  --colour-secondary: #6a1b9a;
  --colour-secondary-light: #9c4dcc;
  --colour-secondary-dark: #38006b;
  --warn-colour: #F57C00;
  --error-colour: #C62828;
  --good-colour: green;
}

* {
    box-sizing:border-box;
    -webkit-font-smoothing: antialiased;
}

body {

/*     font-family:"Quicksand",sans-serif; */
    font-family: 'IBM Plex Sans','Fira Sans', -apple-system,"Open Sans";
/*     font-family:"Open Sans",sans-serif; */
/*   font-family:"Asap",sans-serif; */
/*     font-family:"Molengo"; */
    color:rgba(0,0,0,.7);
    height:100%;
    padding:0;
    margin:0;
    font-size:18px;
    font-weight:400;
    background-color:#eee;
    font-display: optional;
}
b,h1,h2,h3,h4,h5,h6,strong {
/*   font-family:'Helvetica Neue', arial; */
color:rgba(0,0,0,.9);
font-weight:700;
}
body.dense {
    font-size:14px;
}
body.dense * {

}
header {
    background-color: var(--colour-primary-dark);
background: rgb(156,77,204);
background: linear-gradient(149deg, rgba(156,77,204,1) 8%, rgba(3,155,229,1) 37%, rgba(99,204,255,1) 100%);    height:75px;
    overflow:hidden;
    padding:5px;
}
footer {
    font-size:12px;
    padding:10px;
}
code {
    font-family: "Inconsolata","Menlo",consolas,monospace;
}
button, a.btn {
    border:none;
    color:#FFF;
    font-size:inherit;
    font-family:"Inconsolata";
    text-transform:uppercase;
    padding:4px 8px;
    font-weight:600;
    background-color:var(--colour-secondary);
    color:rgba(255,255,255,.8);
    margin:2px;
    border-radius:3px;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
    cursor:pointer;
}
button:focus, button:hover {
    background-color:var(--colour-primary-dark);
}
button:disabled{
    color:#ccc;
    border-color:#ccc;
}
hr,br {
    clear:both;
}
.half{width:49%;margin-right: 1%;float:left;}

header svg {
    height:65px;
    /* background-color:rgba(0,0,0,.1); */
    padding:10px 20px 10px 20px;
    display:block;
    float:left;
}
.hidden {
  display: none;
}
#left .option {
    padding:5px;
}
#left #game_toggles .on {
    text-decoration:underline;
}
#cover {
/*   the background to the modal */
  position:fixed;
  top:0;
  left:0;
  height:100vh;
  width:100vw;
  background-color:rgba(255,255,255,.5);
  
}
#modal {
/*  the modal! */
  background-color:#FFF;
  box-shadow: 0 0 25px rgba(0,0,0,.3);
  padding:10px;
  position:fixed;
  max-height: calc(100vh - 100px);
  top:30px;
  right:50%;
  width:400px;
  margin-right:-200px;
  padding:20px;
  border-radius:10px;
  overflow-y:auto;
  overflow-x: hidden;
  
}
#modal h1,#modal h2,#modal h3, #modal h4, #modal h5, #modal h6 {
    margin: 3px 0;
    padding:0;
}
#modal .close {
    position:absolute;
    top:10px;
    right:10px;
    font-size:10px;
    font-weight:600;
    cursor:pointer;
}
/* guess input structures */

input.guess {
    font-family:inherit;
    font-size:1.5em;
    border-radius:4px;
    padding:10px;
    width:100%;
    display:block;
    border:none;
    outline:none;
    border-radius: 0;
    background-color:#fff;;
    border-bottom:4px solid var(--colour-secondary-dark);
/*     border:1px solid #ccc; */
    box-shadow: 0px 0px 10px rgba(0,0,0,.1);
}
input.guess.short{
/*     width:200px; */
/*     margin:auto; */
    text-transform:uppercase;
}
input.guess.short + label {
/*     text-align:center; */
}
input.guess.short + label + .input-response {
/*     text-align:center; */
}
#game {
    position:relative;
    overflow:hidden;
    padding:10px 30px;
    background-color:#FFF;
}
#game p {
/*   float:left; */
  margin:20px;
}
#settings {
    line-height:22px;
    padding: 5px 10px;
    overflow:hidden;
}
#title {
    font-size:1.5em;
    display:block;
    font-weight:bold;
    float:left;
/*     background-color: var(--colour-primary); */
    color:rgba(255,255,255,.9);
    padding:0 10px;
    line-height:65px;
}
#top {
    // deprecated!
    line-height:40px;
    padding:5px 30px;
    font-size:1.4em;
    font-weight:bold;

}
#right #main {
    float:left;
    width:80%;
    margin:0;
    padding:10px;
}
#right #sub {
    float:left;
    width:20%;
    margin:0;
    padding:10px;
}

#prompt {
/*     font-size:1.5em; */
    text-align:center;
    width:300px;
    margin:auto;
}
#prompt img {
    display:inline-block;
    height:50px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.2);
    margin-right:10px;
}
#prompt div {
    margin-top:10px;
}
#prompt-image {
    height:300px;
    display:block;
    margin:10px auto 20px auto;
    text-align:center;
}
#prompt-image img {
    box-shadow: 0px 0px 10px rgba(0,0,0,.2);
    margin:auto;
    height:100%;
    display:block;
    min-width:300px;
    background-color: hsl(34, 53%, 82%);
    background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
      hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
      hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
      ),
    repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
      hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
      hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
    );
}
.smallflag {
/* overveiw flags */
    height:.8em;
    border-radius:2px;
    margin:0 5px;
    box-shadow:0px 0px 4px  rgba(0,0,0,.3);
}
.right {
    float:right;
}
.row {
    clear:both;
    overflow:hidden;
    padding:10px; /*allow shadows to be visible*/
}
.country_col {
    float:left;
    width:16.66%;
}
.country_guess.incorrect {
    background-color:#E1BEE7;
}
/* .incorrect:after {
    content:" (incorrect)";
} */
.input-response {
/*     display:inline-block;
    height:22px;
    line-height:22px; */
}
.input-response.warn {
    color: var(--warn-colour);
}
.input-response.error {
    color: var(--error-colour);
}
.input-response.good {
    color:var(--good-colour);
}
.country_guess {
    padding:0 1px;
    margin:1px;
    border-radius:3px;
/*     background-color:#C8E6C9; */
    border-bottom:1px dotted #ccc;
    min-height:1.5em;
    line-height:1.5em;
    overflow:hidden;
}
.country_guess.null {
    background-color: #eee;
}
.prompt {
    margin: 0 10px;
    font-style: italic;
}
.game_option {
    display:inline-block;
    background-color:var(--colour-primary-light);
    border-radius:2px;
    box-shadow: 0px 0px 15px rgba(0,0,0,.2);
    margin:20px;
    width:220px;
    height:200px;
    cursor:pointer;
    padding:10px;
    overflow:hidden;
    border-bottom: 3px solid var(--colour-secondary);
    padding-bottom:40px;
    position:relative;
}
.game_option .game_name {
  font-weight:bold;
}
.game_option .game_code {
    font-family: "Inconsolata",Menlo,Consolas,monospace;
    font-size:.7em;
    font-weight:600;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    background-color:var(--colour-primary-dark);
    color:rgba(255,255,255,.8);
    padding:10px;
}
.game_option p {
  margin: 5px 0;
}

span.toggle {
    display:block;
    float:left;
    line-height:1.4em;
    border-radius:3px;
    overflow:hidden;
    margin: 3px 10px;
    height:29px;
    line-height:1.4em;
/*     background-color: rgba(0,0,0,.1); */
/*     background-color:var(--colour-primary-light); */
background-color:#FFF;
    color:#000;
/*     var(--colour-primary-light); */
    font-size:.8em;
    box-shadow:2px 2px 10px rgba(0,0,0,.1);
}

span.toggle span {
    display:inline-block;
    padding:3px 10px;
    margin:0;
    border-bottom:3px solid transparent;

}
span.toggle span.prompt {
    font-weight:600;
    font-style: normal;
/*     background-color:#FFF; */
    color:rgba(0,0,0,.4);
}
span.toggle span.clickable {
    cursor:pointer;
/*     border-right: 1px solid rgba(0,0,0,.3); */
/* color:#FFF; */

}
/* span.toggle span.clickable:last-child {
    border-right:none;
} */
span.toggle span.clickable.on {
    color:rgba(255,255,255,.8);
    color: var(--colour-secondary);
    border-bottom: 3px solid var(--colour-secondary);
}
span.toggle.collapsed span.clickable {
    display:none;
}
span.toggle.collapsed span.clickable.on {
    display:inline-block;
}
span.toggle.collapsed.opened {
    height:unset;
}
span.toggle.collapsed.opened span.clickable {
    display: block
}
span.toggle.collapsed.opened span.clickable:hover {
    background-color:rgba(0,0,0,.1);
}
span.toggle.collapsed .material-icons {
    display:block;
    float:right;
}
span.toggle.collapsed.opened .material-icons {
    display:none;
}

input[type=text] ,input[type=password],input[type=email],input[type=number]   {
    border-width: 0 0 4px 0;
    border-color:var(--colour-secondary-dark);
/*     background-color: rgba(0,0,0,.04); */
    border-radius: 2px;
    padding:12px 5px 5px 10px;
    caret-color:var(--colour-primary-light);
    font-family: inherit;
}
input[type=text]:hover,
    input[type=password]:hover,
    input[type=email]:hover,
    input[type=number]:hover {
/*     background-color: rgba(0,0,0,.06); */
}
input[type=text]:focus,
    input[type=password]:focus,
    input[type=email]:focus,
    input[type=number]:focus {
    outline:none;
    border-color:var(--colour-primary-light);
}

input.label-inside {
    padding-top:25px;
}
input.label-inside + label {
    display:block;
    position:relative;
    top:-60px;
    left:10px;
    line-height:0;
    height:0;
    margin:0;
    padding:0;
    color:var(--colour-secondary-dark);
    font-weight:500;
    /*font-family:sans-serif;*/
}
input.label-inside.smaller {
    padding-top:8px;
    width:210px;
    font-size:1.1em;
}
input.label-inside.smaller + label{
/*     .smaller = contained within a position specified dkiv */
    position: absolute;
    font-size:.75em;
    top:10px;
/*     right:40px;  */
    left:40%;
}
input.label-inside:focus + label {
    color:var(--colour-primary);
}
input.label-inside.error + label {
    color:var(--error-colour);
}
input.label-inside.error {
    border-color:var(--error-colour);
    caret-color:var(--error-colour);
}
input.label-inside.warn + label {
    color:var(--warn-colour);
}
input.label-inside.warn {
    border-color:var(--warn-colour);
    caret-color:var(--warn-colour);
}
input.label-inside.good + label {
    color:var(--good-colour);
}
input.label-inside.good {
    border-color:var(--good-colour);
    caret-color:var(--good-colour);
}
/* input row */
.irow {
    float:left;
    height:70px;

    padding:0;
}
.irow.icell {
    width:90px;
    line-height:70px;
    margin-left:10px;
    font-size:1.3em;
    text-align:center;
/*     background-color: var(--colour-primary-dark); */
/*     color:#FFF; */
    font-weight:bold;
    /*     border-bottom:4px solid var(--colour-primary); */
}
.irow_1b {
/*     input row with 1 100px button */
    width: calc(100vw - 160px);
}
.irow_2b {
    width: calc(100vw - 260px);
}
.irow_3b {
    width: calc(100vh - 360px);
}
.cbf_grid_tile {
    float:left;
    position:relative;
    height:55px;
    width:350px;
    padding:2px;
    box-shadow:1px 1px 4px rgba(0,0,0,.3);
    margin:5px;
    line-height:41px;
}

.cbf_grid_tile.correct {
/*     box-shadow: 1px 1px 4px rgba(0,200,0,.6); */
    background-color:#C8E6C9;
}
.cbf_grid_tile.incorrect {
    box-shadow: 1px 1px 4px rgba(176, 65, 8, 0.6);
    background-color:color(srgb 0.537 0.259 0.259 / 0.408);
}
.cbf_grid_tile img {
    height:100%;
    float:left;
    display:block;
    margin-right:10px;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.cbf_grid_tile input, .cbc_grid_tile input {
    position:absolute;
    right:0;
    top:10px;
/*     margin:4px; */
/*     padding:calc((55px - 45px) / 2) */

}
.cbc_grid_tile {
    float:left;
    position:relative;
    height:55px;
    width:350px;
    padding:4px;
    box-shadow:1px 1px 4px rgba(0,0,0,.3);
    margin:5px;
/*     line-height:41px; */
}
.cbc_grid_tile.incorrect {
    border:2px solid var(--error-colour);
}
.cbc_grid_tile.correct {
    border: 2px solid var(--good-colour);
}
.cbc_grid_tile img {
    height:23px;
    display:block;
    box-shadow: 0 0 10px rgba(0,0,0,.2);
}
.cbc_grid_tile input.guess {
  box-shadow:none;
}
.cbc_grid_tile input.smaller {
  width:200px;
}
.cbc_grid_tile input.smaller.short {
    width:100px;
    
}
.cbc_grid_tile input.smaller +label {
    left:unset;
    right:10px;
}
.cbc_grid_tile.guessed {
/*     border:2px solid inherit; */
/*     line-height: 22px; */
    padding: 2px;
/*     text-align:center; */
}
.cbc_grid_tile.guessed .result {
  text-align:center;
}
.cbc_grid_tile.guessed .icon {
  position:absolute;
  right:10px;
  top:15px;
  font-size:25px;
}
.cbc_grid_tile.guessed img {
    display:block;
    float:left;
    height:23px;
    margin-right:10px;
/*     line-height:0; */
/*     margin-top:-13px; */
}

#stats_div  {
    position:relative;
    float:right;
    margin-left:20px;
/*     top:10px;
    right:10px; */
    font-weight:400;
    margin-bottom:10px;

}
#stats_div .stat_value {
    display:inline;
    font-family: 'Inconsolata', monospace;
    font-weight:600;
}
#stats_div #stat_major {
/*     specify AFTER stat_value so the major stats use this weight */
    font-size:3em;
    line-height:.9em;

}
#stats_div .stat_minor {
    font-size:.8em;

}
#stats_div .stat_done {
    color:var(--good-colour);
    font-weight:200 ;
}
#stats_div .stat_todo {
    font-weight:200 ;
}
#stats_div .stat_incorrect {
    color: var(--error-colour);
}

#credits {
    border-bottom:1px solid rgba(0,0,0,.3);
    margin:10px;
    padding-bottom:10px;
}
#credits h3 {
    margin:0;

}
.correct {
    color:var(--good-colour);
}
.incorrect {
    color:var(--error-colour);
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.input-floater-inner {
  position:relative;
}

.input-floater-inner.float {
  position:fixed;
  width:100%;
  top:0;
  left:0;
  background-color:#FFF;
  padding:15px 30px;
  box-shadow:0 0 20px rgba(0,0,0,.3);
}

.input-floater-outer {
  padding:0;
  margin:0;
  height:105px; // set for country names game
}