@charset "utf-8";
/***************************************/
body{
    font-family: "Source Sans Pro", sans-serif;
    font-size: 100%;
}
a{
    color: navy;
    text-decoration: none;
}
a:hover{
    color: teal;
}
h1{
    color: crimson;
}
h2{
    color: purple;
}
h3{
    color: brown;
}

#answer em{
    margin-left: .25em;
    margin-right: .25em;
}
#answer sup{
    margin-right: .25em;
}
/*input[type=submit],
input[type=text],
input[type=number]{*/
input{
    font-family: "Source Sans Pro", sans-serif;
    min-width: 12em;
}

/*****************/
/*     login     */
/*****************/
#reminder p:first-child{
    font-size: 200%;
}
#reminder p:last-child{
    font-size: 150%;
}
#reminder p{
    margin: 0;
}
#loginQ,
#reminder{
    display: inline-block;
    border: 1px solid;
    padding: 1em 2em;
    margin: 1em 3em;
}
#loginQuote{
    margin-bottom: .5em;
}
#loginAuthor{
    padding-left: 2em;
}
/*****************/
/*    edit db    */
/*****************/
#editdb{
  padding-bottom: 1em;
}
#editdb form:first-child input[type="submit"]{
  padding: 1em;
}
#editdb form:nth-child(2){
  margin-bottom: 1em;
}
#editdb a{
  background: #f0f0f0;
  border: 1px solid black;
  padding: 1em 2em;
}
/*****************/
/* add questions */
/*****************/
#chooseQ{
    width: 4em;
    margin: 16px;
}
textarea{
    width: 100%;
    height: 25em;
}
.commonQuestions{
    display: inline-block;
    background: silver;
    margin: 16px;
    padding: 0.5em;
}
#addedQ{
    display: inline-block;
}
/*********/
/* cards */
/*********/
span.farsi{
    font-size: 200%;
}
#question img{
    max-height: 70vh;
    max-width: 100%;
    margin-right: 1em;
    display: block;
}
#question{
    border: 2px solid white;
}
#answer{
    font-size: 125%;
    overflow: hidden;
    padding: 1em;
    background: navy;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 10px;
    min-width: 300px;
    color: transparent;
}
#answer.revealed{
    color: white;
}
#answer.revealed b{
    color: orange;
}
#answer:focus{
    border-color: deepskyblue;
    outline: none;
}
/***********/
/* buttons */
/***********/
#buttons form{
  display: flex;
  flex-flow: row wrap;
}
#buttons input,
#buttons select{
  flex: 1 0 5px;
  border: 0px solid white;
  border-radius: 15px;
  padding: 1em .5em;
  min-width: unset;
  width: 50px;
  box-sizing: border-box;
  box-shadow:
     2px  0px 0px white inset,
     0px  2px 0px white inset,
     0px -2px 0px white inset,
    -2px  0px 0px white inset;
}
#buttons input[name=Correct],
#buttons input[name=Incorrect],
#buttons input[name=Fair]{
  color: white;
  font-weight: bold;
  flex: 2 0 10px;
  padding: 1em 1em;
}
#buttons select,
#buttons input[type='text']{
  flex: 3 0 15px;
  padding: 1em 2em 1em 1em;
}
#spacer{
  min-width: 100%;
  background: red;
}
#buttons input[name=Correct]{
  background: limegreen;
}
#buttons input[name=Incorrect]{
  background: tomato;
}
#buttons input[name=Fair]{
  background: deepskyblue;
}
#buttons input[type='submit']{
  cursor: pointer;
}
#buttons select{
  cursor: pointer;
}
#buttons select{
}

/* gsm 1080 x 2400 */
/* laptop 1920 x 1080 */ 
@media screen and (min-width: 1081px){
  #spacer{
    display: none;
  }
}
/************/
/*  schaak  */
/************/
/*verberg het bord van de vraag*/
#question-container{
    display: none !important;
}
/*verberg het resultaat in de vraag*/
#question-moves .ct-result{
    display: none;
}
/*zorg ervoor dat het bord er goed uitziet*/
#answer-container{
    float: left;
}
.ct-board-border{
    border: 0;
}
#answer-rankLabels,
#answer-fileLabels{
    color: white;
    font-size: 80%;
}
/*centreer de buttons*/
.ct-nav-buttons{
    text-align: center;
    margin-left: 15px;
    padding-bottom: 0;
}
#answer-nav-buttons-only{
    margin: auto;
}
#answer-nav-buttons-only img{
    margin: 0 .3em;
}
/*verberg het commentaar als het antwoord nog niet zichtbaar is*/
#answer:not(.revealed) .ct-board-move-comment,
#answer:not(.revealed) .ct-board-move-current,
#answer:not(.revealed) .ct-board-move-comment b{
    color: transparent;
}
/*verwijder overbodige witruimte rond varianten */
#answer .ct-mainline-commentary>br:first-child,
#answer .ct-mainline-commentary+br,
#answer-moves>br:first-child{
  display: none;
}
/* verwijder de breaks tussen de zetten */
#answer span[title]+br{
  display: none;
}
/* verklein de tekst van het antwoord terug */
#answer-moves{
    font-size: 80%;
}
/* kleuren */
    /* tekst */
#question .ct-board-move-comment{
    color: black;
}
#answer .ct-board-move-comment{
    color: khaki;
}
#answer .ct-board-move-comment b{
    color: sandybrown;
}
    /*current move*/
#question .ct-board-move-current{
    color: chocolate;    
}
#answer .ct-board-move-current{
    color: gold;
}
@media (orientation: portrait),
screen and (max-width: 1024px){
    #answer-rankLabels,
    #answer-fileLabels{
        font-size: 70%;
  }
}

/* pgn viewer 2 */
/* verberg het antwoord */
#answer .ct-move .ct-current-move{
  outline: none;
}
#answer:not(.revealed) move-list{
  color: #1d1d1d;
}
#answer:not(.revealed) move-list .ct-move .ct-current-move .ct-move-number{
  color: #1d1d1d;
}
#answer:not(.revealed) .ct-move-list-result-resultstring{
  color: #1d1d1d;
}
#answer:not(.revealed) .ct-pgn-viewer .ct-move-comment{
  color: #1d1d1d;
}
/* kleuren */
  /* moves */
  #answer.revealed .ct-pgn-viewer .ct-variation-holder .ct-move-number,
  #answer.revealed .ct-pgn-viewer .ct-variation-holder .ct-move-move{
    color: silver;
  }
  /* comment */
  #answer.revealed .ct-pgn-viewer .ct-move-comment{
    color: khaki;
  }
  #answer.revealed .ct-pgn-viewer .ct-variation-holder .ct-move-comment{
    color: tan;
  }
  #answer.revealed .ct-variation-start,
  #answer.revealed .ct-variation-end{
    color: tan;
  }
  /* active move */
  #answer.revealed .ct-move .ct-current-move .ct-move-number,
  #answer.revealed .ct-move .ct-current-move .ct-move-move{
    color: orange;
  }
  #answer.revealed .ct-variation-holder .ct-move .ct-current-move .ct-move-number,
  #answer.revealed .ct-variation-holder .ct-move .ct-current-move .ct-move-move{
    color: orange;
  }
  /* strong & em */
  #answer.revealed .ct-pgn-viewer .ct-move-comment strong{
    color: deepskyblue;
  }
  #answer.revealed .ct-pgn-viewer .ct-move-comment em{
    color: deepskyblue;
    font-style: normal;
    margin: 0;
  }
  /* result */
  #answer.revealed .ct-move-list-result-resultstring{
    color: orange;
  }
/* lay-out */
#answer p + p{
  margin: 2px 0;
}
.mdc-text-field--textarea{
  width: 100%;
}

@media (orientation: portrait),
screen and (max-width: 1080px){
  chess-board{
    width: 600px !important;
    height: 600px !important;
  }
  .ct-pgn-viewer-move-list-and-controls{
    margin: 20px 0;
    min-width: 600px;
  }
  #answer move-list{
    font-size: 100% !important;
  }
  .ct-pgn-viewer move-list{
    height: 600px;
  }
  .ct-pgn-viewer move-list .ct-move-list-container{
    height: 579px;
  }
}
/******************************************************/
/*                   quotes                           */
/******************************************************/
#quotes{
	display: grid;
	grid: autoflow dense;
	grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
}
.quotation{
    border: 1px solid black;
    margin: .5em;
    padding: .5em;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.quote{
    text-align: justify;
}
.quote,
.author{
	display: inline-block;
}
.author{
    margin: .5em 0 0 2em;
}
.quotation.rowspan2{grid-row-end: span 2;}
.quotation.rowspan3{grid-row-end: span 3;}
.quotation.rowspan4{grid-row-end: span 4;}
.quotation.rowspan5{grid-row-end: span 5;}
.quotation.rowspan6{grid-row-end: span 6;}
/******************************************************/
/*                Search Cards                        */
/******************************************************/
#searchCardsResults input{
    padding: 0;
    background: white;
    border: 0px solid white;
    color: blue;
    font-weight: bold;
    cursor: pointer;
}
#addedQ input.button{
    min-width: unset;
}
/******************************************************/
/*                  expenses                          */
/******************************************************/
  
/******************************************************/
/*                   budget                           */
/******************************************************/

#expenses input[type="text"],
#expenses input[type="number"]{
    width: 6em;
}
#expenses input[type="submit"]{
    padding: 0 2em;
}
#expenses input[type="radio"] {
    display: none;
}
#expenses label {
    margin-left: 0.6em;
    position: relative;
}
#expenses label:before{
    content: "";
    display: inline-block;
    position: relative;
    left: -0.5em;
    background: white;
    width: .5em;
    height: .5em;
    border-radius: 50%;
    border: 0.1em solid white;
}
#expenses :checked + label:before{
    background: transparent;
}
#expenses_accounts label:before{
    border-color: gray;
}
#expenses_accounts :checked + label:before{
    background: darkgray;
    border-color: gray;
}
#expenses_categories{
    display: flex;
    flex-flow: wrap;
    max-width: 50em;
}
.category{
    flex: 1 0 10em;
    padding: 1em;
    font-weight: bold;
}

.category{color: white;}
.category:nth-child(1){background-color: purple;}
.category:nth-child(2){background-color: maroon;}
.category:nth-child(3){background-color: darkgreen;}
.category:nth-child(4){background-color: navy;}
.category:nth-child(5){background-color: crimson;}
.category:nth-child(6){background-color: chocolate;}
.category:nth-child(7){background-color: goldenrod;}
.category:nth-child(8){background-color: teal;}

.subcategory{
    font-weight: normal;
}
.total{
    display: inline-block;
    width: 5em;
    text-align: right;
    padding: 0em 1em;
}
/******************************************************/
/*                  overview                          */
/******************************************************/
#overview {
    display: table;
}
#overview .category{
    display: table;
    min-width: 100%;
}
.suboverview{
    border-collapse: collapse;
    font-weight: normal;
}
.suboverview td{
    text-align: right;
    width: 5em;
    max-width: 5em;
    padding: 0 1em;
}
.suboverview .labels td{
    border-bottom: 1px solid;
}
.suboverview tr.labels{
    height: 2.5em;	
}
.suboverview tr:last-child td{
    border-top: 1px solid;
}
.suboverview td:nth-child(2){
    border-right: 2px solid;
}
/******************************************************/
/*                  recepten                          */
/******************************************************/
#recepten h3{
    margin-bottom: 0;
}
#recepten ul{
    margin-top: 0;
}
.recept hr{
    margin: .2em -50px;
}
.recept h1,
.recept h2,
.recept h3{
    margin: 0;
}
.recept ul,
.recept ol{
    margin: 0;
}
.recept li{
    margin-left: .5em;
}
/******************************************************/
/*                  statistiek                        */
/******************************************************/
#statistiek_aantallen,
#statistiek_toekomst,
#statistiek_result_vandaag{
  border: 1px solid black;
  display: inline-table;
  margin: 1em;
  padding: 3px;
}
#statistiek_aantallen td:nth-child(2){
    text-align: right;
}
#statistiek_aantallen tr:nth-last-child(1){
  font-weight: bold;
}
#statistiek_toekomst td:nth-child(2){
  text-align: right;
  min-width: 2em;
}
#statistiek_result_vandaag td:nth-child(2){
  text-align: right;
  min-width: 2em;
}
#statistiek_result_vandaag th:nth-child(2){
  text-align: right;
  min-width: 2em;
}
  
/******************************************************/
/*                   fitness                          */
/******************************************************/
#fitness input[type=radio]{
	min-width: unset;
}
/******************************************************/
/*                  add quotes                        */
/******************************************************/
#addQuote textarea{
    height: 5em;
}
/******************************************************/
/*                  journal                           */
/******************************************************/
#journal .journal{
    border: 1px solid black;
    background: #eee;
    margin: 1em;
}
#journal .time{
    background: silver;
    padding: 0 1em;
}
#journal .entry{
    padding: 0 2em;
}
#journal hr{
    margin: 0;
    border: 1px solid gray;
}
#journal ul{
    margin: 0;
}
/******************************************************/
/*                  Frans                             */
/******************************************************/
#card[class="Frans"] #answer.revealed b{
    color: orange;
    font-weight: normal;
}
/******************************************************/
/*                  Farsi                             */
/******************************************************/
#question textarea{
    font-size: 300%;
    height: 1.5em;
  font-family: initial;
}
/******************************************************/
/*             probleemgevallen                       */
/******************************************************/
.probleemgevallen {
  border: 1px solid black;
  margin: 1em;
}
.probleemgevallen div.board{
  display: inline-block;
}
.probleemgevallen div[id$="moves"]{
  display: none;
}

/******************************************************/
/*                       world map                     */
/******************************************************/
#twjrmap{
	max-width: 100%;
  max-height: 84vh;
}
/******************************************************/
/*                       paintings                    */
/******************************************************/
#paintings_container{
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 140px;
  grid-gap: 2px;
}
.painter{
    position: relative;
}
.painter.size_1:nth-of-type(5n){
    order: 2;
}
.painter.size_2:nth-of-type(2n){
    grid-column-end: span 2;
}
.painter.size_2:nth-of-type(2n+1){
    grid-row-end: span 2;
}
.painter.size_3{
    grid-column-end: span 3;
}
.painter.size_3:nth-of-type(3n){
    grid-column-end: span 1;
    grid-row-end: span 3;
}
.painter.size_4{
    grid-column-end: span 2;
    grid-row-end: span 2;
}
.painter.size_5{
    grid-column-end: span 4;
    grid-row-end: span 2;
}
.painter.size_5 .painting:nth-child(1){
    grid-column-end: span 2;
    grid-row-end: span 2;    
}
.painter.size_6{
    grid-column-end: span 3;
    grid-row-end: span 3;
}
.painter.size_6 .painting:nth-child(1){
    grid-column-end: span 2;
    grid-row-end: span 2;    
}
.painter.size_7{
    grid-column-end: span 5;
    grid-row-end: span 3;
}
.painter.size_7 .painting:nth-child(1){
    grid-column-end: span 3;
    grid-row-end: span 3;    
}
.painter.size_8{
    grid-column-end: span 4;
    grid-row-end: span 4;
}
.painter.size_8 .painting:nth-child(1){
    grid-column-end: span 3;
    grid-row-end: span 3;    
}
.painter.size_9{
    grid-column-end: span 5;
    grid-row-end: span 3;
}
.painter.size_10{
    grid-column-end: span 4;
    grid-row-end: span 4;
}
.painter.size_11{
    grid-column-end: span 5;
    grid-row-end: span 4;
}
.painter.size_12{
    grid-column-end: span 5;
    grid-row-end: span 4;
}
.painter.size_13{
    grid-column-end: span 6;
    grid-row-end: span 4;
}
.painter.size_13 .painting:nth-child(1){
    grid-column-end: span 3;
    grid-row-end: span 3;    
}
.painter.size_13 .painting:nth-child(9){
    grid-column-end: span 2;
    grid-row-end: span 2;    
}
.painter.size_14{
    grid-column-end: span 5;
    grid-row-end: span 5;
}
.painter.size_15{
    grid-column-end: span 6;
    grid-row-end: span 4;
}
.painter.size_16{
    grid-column-end: span 6;
    grid-row-end: span 4;
}
.painter.size_17{
    grid-column-end: span 5;
    grid-row-end: span 5;
}

.paintings{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    height: 100%;
}
.painting{
    display: flex;
    flex-flow: column;
}
.painting img{
  flex: 1 0 0px;
  object-fit: cover;
  min-height: 0px;
}
.paintername{
    position: absolute;
    font-size: 12px;
    color: white;
    text-shadow: 1px 1px 1px black;
}
/******************************************************/
/*                      chessCards                    */
/******************************************************/
#chessQs h1{
    margin-bottom: 0;
}
#chessQs h1 + h2{
    margin-top: 0;
    margin-bottom: 0;
}
#chessQs h2{
    margin-bottom: 0;
}
#chessQs h2 + h3{
    margin-top: 0;
    margin-bottom: 0;
}
#chessQs h3{
    margin-bottom: 0;
}
.chessCards .question{
  color: darkgray;
}
/******************************************************/
/*                       painters                     */
/******************************************************/
#paintings_links{
  columns: 400px;
}
#paintings_links a{
  color: black;
}
#paintings_links a:hover{
  color: navy;
}
/* gsm 1080 x 2400 */
/* laptop 1920 x 1080 */ 
@media (orientation: portrait),
screen and (max-width: 1080px){
    body{
        font-size: 200%;	
    }
    body input,
    body select{
        font-size: 100%;
    }
}
/******************************************************/
/*                       chess                     */
/******************************************************/
.index{
    display: inline-block;
    vertical-align: top;
    padding: 5px 25px;
}