.hrGrey {
  border-top: 2px solid  var(--purpleL);   /*  #C0C8D2; */
}


.imageGreyScale {
          -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
          filter: grayscale(100%);
}


.invertCol {
   filter: invert(100%);
}



/* --------  French --------------- */

.colFr {
   background-color:  var(--col-fr) !important; /* #b3ccff*/
   border: solid 1px;
   border-color: transparent ;
   padding: 2px  ;
}

.brdrFr {
  border: solid 3px;
  border-color: var(--p200) ;
}

/* --------  Spanish --------------- */
.colSp {
   background-color: var(--col-sp) !important;
   border: solid 1px;
   padding: 2px  ;
   border-color: transparent ;
}
.brdrSp {
  border: solid 3px;
  border-color: var(--orange700) ;
}
/* --------  German --------------- */
.colGe {
   background-color: var(--col-ge) !important;
   border: solid 1px;
   padding: 2px  ;
   border-color: transparent ;
}



.brdrWhite {
  border: solid 3px;
  border-color:White ;
}

.brdrGrey {
  border-color: var(--gray100) !important;
  border: dotted  2px !important;
}




.colLast {
  background-color: var(--gray400);
  border: solid 1px;
  border-color: transparent ;

}

.colWhite {
  background-color: #fff;
  border: solid 1px;
  border-color: transparent ;
}

.frStyle {
  text-align: left;
  background-color:  #fff ;
  color:    var(--col-fr);
  margin: 2px;
  padding: 2px;
  margin-left: 1.25rem;
  border: solid 1px;
  border-color: transparent ;
}

.spStyle {
  text-align: left;
  background-color:  #fff ;
  color: var(--col-sp);

  margin: 2px;
  padding: 2px;
  margin-left: 1.25rem;
  border: solid 1px;
  border-color: transparent ;
}



.imgColFr {
    fill:    var(--col-fr);

}





.transTxt {
  color: transparent;
}


.greyTxt {
  color: var(--gray400);
}

.greyDarkTxt {
  color:  var(--gray900);
}

.redTxt {
color: var( --rose-300);
}

.blueTxt {
color: var(--p300);
}

.blackTxt {
  color: black;
}

.whiteTxt {
  color: white;
}



.clearTxt {
  background: transparent;
  background-color: transparent;
  color: transparent;

}






 /* colors for different topic groups   -------------------------------- */
/* based on topic ref ------- */
.topicTheme0 {
  background-color: var(--p300);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme1 {
  background-color: var( --yellow50);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme2 {
  background-color: var(--gray100);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme3 {
  background-color: var(--purple-25);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme4 {
  background-color: var( --yellow50);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme5 {
  background-color: var(--gray400);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme6 {
  background-color: var(--s100);
  border: solid 1px;
  border-color: transparent ;
}

.topicTheme7 {
  background-color: var(--s200);
  border: solid 1px;
  border-color: transparent ;
}


.topicTheme8 {
  background-color: var( --rose-100);
  border: solid 1px;
  border-color: transparent ;
}

.topicTheme9 {
  background-color: var(--p100);
  border: solid 1px;
  border-color: transparent ;
}



.topicThemeWhite {
  background-color: #ffffff;
  border: solid 1px;
  border-color: transparent ;
}






/* bordercols */
.brdr0 {
  border-color: var(--p300) !important;
  border: solid 2px !important;

}
.brdr1 {

  border-color: var( --yellow50)!important;
  border: solid 2px !important;
}
.brdr2 {

  border-color: var(--gray100) !important;
  border: solid 2px !important;
}
.brdr3 {

  border-color: var(--purple-25) !important;
  border: solid 2px !important;
}
.brdr4 {

  border-color: var( --yellow50) !important;
  border: solid 2px !important;
}
.brdr5 {
  border-color: var(--gray400) !important;
  border: solid 2px !important;
}
.brdr6 {
  border-color: var(--s100) !important;
  border: solid 2px !important;
}

.brdr7 {
  border-color: var(--s200) !important;
  border: solid 2px !important;
}


.brdre8 {
  border-color: var( --rose-100) !important;
  border: solid 2px !important;
}

.brdr9 {
  border-color: var(--p100) !important;
  border: solid 2px !important;
}



.brdrErr {
  background-color: var( --rose-100) !important;
}




.brdrRed {
  border: solid 5px !important;
  border-color:  var(--c900) !important;
  border-radius: 1.25rem;
  padding: 0.25rem;

}


.brdrBlue2 {
  border: solid 2px !important;
  border-color: var(--p900) !important;
  border-radius: 0.8rem;
  padding:  0.25rem;

}

.brdrRndClear {

  border: solid 2px !important;
  border-color: transparent !important;
  border-radius: 0.8rem;
  padding:  0.25rem;

}




.whiteBorderCol {
  border-color: white !important;
  border-width: 0.25rem;
}

/* year colours   */
.colYr7 {
background-color: var(--yr7Color);
  border: solid 1px;
  border-color: transparent ;
  z-index: 4;
}
.colYr8 {
  background-color: var(--yr8Color);
  border: solid 1px;
  border-color: transparent ;
}
.colYr9 {
  background-color: var(--yr9Color);
  border: solid 1px;
  border-color: transparent ;
}
.colYr10 {
  background-color: var(--yr10Color);
  border: solid 1px;
  border-color: transparent ;
}
.colYr11 {
  background-color: var(--yr11Color);
  border: solid 1px;
  border-color: transparent ;
}

.colYr12 {
  background-color: var(--yr12Color);
  border: solid 1px;
  border-color: transparent ;
}

.colYr13 {
  background-color: var(--yr13Color);
  border: solid 1px;
  border-color: transparent ;
}

.colYr14 {
  background-color: var(--yr14Color);
  border: solid 1px;
  border-color: transparent ;
}

.brdrColWhite {
  border: solid;
  border-color: white;
  border-width: 3px;
}




/* ---- backgrounds -------- */
.bkgP900 {
  background: var(--p900);
     padding: 2px;
}
.bkgP800 {
  background: var(--p800);
     padding: 2px;
}
.bkgP700 {
  background: var(--p700);
     padding: 2px;
}
.bkgP600 {
  background: var(--p600);
     padding: 2px;
}
.bkgP500 {
  background: var(--p500);
     padding: 2px;
}
.bkgP400 {
  background: var(--p400);
     padding: 2px;
}
.bkgP300 {
  background: var(--p300);
     padding: 2px;
}
.bkgP200 {
  background: var(--p200);
     padding: 2px;
}
.bkgP100 {
  background: var(--p100);  
     padding: 2px;
}       
.bkgP50{
  background: var(--p50);
     padding: 2px;
}







.topicThemeClear {
  background-color: transparent;
}

.bkgPink {
  padding: 0.3rem;
  padding-left: 0.8rem;
  background-color: var( --rose-100) !important;
}

.bkgRed {
  background: red;
}

.bkgl4b {
  background: var(--p900);
}

.bkgBlue {
  background: #4A90E2;
}

.bkgGrey {
  background: var(--gray100);
     padding: 2px;
}


.bkgDGrey {
  background: var(--gray100);
     padding: 2px;
}






.bkgWhite {
  background: White;
}


.bkgTspnt {
  background: transparent !important;
  border-color: transparent !important;
}

.bkgHighLight0 {
  background-color: var(--yellow) !important;
  border: solid 0.3125rem;
  border-color: var(--yellow) !important;
}

.bkgHighLight1 {
  background-color: var( --yellow50) !important;
  border: solid 0.3125rem;
  border-color: var( --yellow50) !important;
}


.incorrectCol {
    border: solid;
    border-width: 0.0625rem;
    border-color: #fff;
    background-color: var( --rose-100) !important;
    color:  var( --rose-100);
               }


.nearlyInCorrectCol {
    border: solid;
    border-width: 0.0625rem;
    border-color: #fff;
    text-align: center;
    background-color: var( --rose-200) !important;
               }


 .nearlyCorrectCol {
     border: solid;
     border-width: 0.0625rem;
     border-color: #fff;
     text-align: center;
     background-color: var(--yellow) !important;
                }


 .partiallyCol {
     border: solid;
     border-width: 0.0625rem;
     border-color: #fff;
     text-align: center;
     background-color: var(--s200) !important;
                }

.correctCol {
      border: solid;
      border-width: 0.0625rem;
      border-color: #fff;
      color: var(--s100); ;
      background-color: var(--s100)  !important;
               }






.awardGold {
   background-color: transparent;
   color: var(--gold);
  }

.awardSilver {
   background-color: transparent;
   color: var(--silver);
  }

.awardBronze {
   background-color: transparent;
   color: var(--bronze);
  }




.txtGreen {
    color: var(--s900);
    font-style: italic;
    font-weight: bold;
}


.txtlink {
  color: var(--p900);
  font-weight: bold;
  font-size: 1.1em;
}


.hidden {
    display: none;
     background: transparent;
     background-color: transparent;

}





.bg-pass {
  background-color: #90ee90;
  color:#1c1b1b;
  border: solid 0.3125rem white;
  padding-left: 0.625rem;
}

.bg-fail {
  background-color: #f08080;
  color:#1c1b1b;
  border: solid 0.3125rem white;
  padding-left: 0.625rem;
}

.bg-os {
  background-color: var(--gray100);
  color:#1c1b1b;
  border: solid 0.3125rem white;
  padding-left: 0.625rem;
}

.bg-warn {
  background-color: var( --yellow50);
  color:#1c1b1b;
  border: solid 0.3125rem white;
  padding-left: 0.625rem;
}


.bg-sample {
  border-top: solid 0.1875rem #c7cbf4;
  border-bottom: solid 0.625rem #c7cbf4;
  }

.bg-no-input {
  font-size: 1.2em;
  border: solid 0.125rem#d7d5d5; 
  background-color: #e1f7f9;
  width: 2.5rem !important; 
  max-width: 2.5rem;
  text-align: center;
}





/* element {
  --yr7Color : #E27F98;

  --yr8Color : #DF9B6D;

 --yr9Color : #8F9EDA;

 --yr10Color : #BDB76C;

 --yr11Color : #85A9C2;
} */