.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%);
}


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


.colSp {
   background-color: var(--col-sp-l) !important;
   border: solid 1px;
   padding: 2px  ;
   border-color: transparent ;
}



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

.brdrSp {
  border: solid 3px;
  border-color: var(--orange-l) ;
}

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

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




.colLast {
  background-color: var(--grey2);
  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-d);
  margin: 2px;
  padding: 2px;
  margin-left: 20px;
  border: solid 1px;
  border-color: transparent ;
 /* min-height: 50px; */
}

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

  margin: 2px;
  padding: 2px;
  margin-left: 20px;
  border: solid 1px;
  border-color: transparent ;
 /* min-height: 50px; */
}


.transTxt {
  color: transparent;
}


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

.greyDarkTxt {
  color:  var(--grey-d);
}

.redTxt {
color: var(--pink);
}

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

.blueDTxt {
  color: var(--blue-d);
  }

.frTxt {
color: var(--col-fr);
}

.spTxt {
  color: var(--col-sp);
  }




.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(--blue);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme1 {
  background-color: var(--brown-l);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme2 {
  background-color: var(--grey-l);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme3 {
  background-color: var(--purple-l);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme4 {
  background-color: var(--yellow-l);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme5 {
  background-color: var(--grey);
  border: solid 1px;
  border-color: transparent ;
}
.topicTheme6 {
  background-color: var(--green-l-2);
  border: solid 1px;
  border-color: transparent ;
}

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


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

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



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






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

}
.brdr1 {

  border-color: var(--brown-l)!important;
  border: solid 2px !important;
}
.brdr2 {
  border-color: var(--grey-l)!important;
  border: solid 2px !important;
}
.brdr3 {

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

  border-color: var(--yellow-l) !important;
  border: solid 2px !important;
}
.brdr5 {
  border-color: var(--grey) !important;
  border: solid 2px !important;
}
.brdr6 {
  border-color: var(--green-l-2) !important;
  border: solid 2px !important;
}

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


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

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

















.whiteBorderCol {
  border-color: white !important;
  border-width: 5px;
}

/* year colours   */
.colYr7 {
background-color: var(--pink-l);
  border: solid 1px;
  border-color: transparent ;
}
.colYr8 {
  background-color: var(--orange-l);
  border: solid 1px;
  border-color: transparent ;
}
.colYr9 {
  background-color: var(--purple-l);
  border: solid 1px;
  border-color: transparent ;
}
.colYr10 {
  background-color: var(--green-l);
  border: solid 1px;
  border-color: transparent ;
}
.colYr11 {
  background-color: var(--blue-l);
  border: solid 1px;
  border-color: transparent ;
}



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


.topicThemeClear {
  background-color: transparent;
}

.bkgPink {
  padding: 5px;
  padding-left: 10px;

  background-color: var(--pink-l) !important;
}

.bkgRed {
  background: red;
}

.bkgBlue {
  background: #4A90E2;
}

.bkgLightBlue {
  background: var(--blue-l);
}

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

.bkgGrey2 {
  background: var(--grey2) !important;
     padding: 2px;
}

.bkgGreen {
  background: var(--green-l)!important;
     padding: 4px!important;
}

.bkgWhite {
  background: White;
}

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

.bkgHighLight1 {
  background-color: var(--brown-l) !important;
  border: solid 5px;
  border-color: var(--brown-l) !important;
}

.bkgTrans {
  background-color:transparent;
}

.incorrectCol {
    border: solid;
    border-width: 1px;
    border-color: #fff;
    background-color: var(--pink-l) !important;
    color:  var(--pink-l);
               }
/* #FFC7CE */

.nearlyInCorrectCol {
    border: solid;
    border-width: 1px;
    border-color: #fff;
    text-align: center;
    background-color: var(--pink2) !important;
               }


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


 .partiallyCol {
     border: solid;
     border-width: 1px;
     border-color: #fff;
     text-align: center;
     background-color: var(--green-l) !important;
                }

.correctCol {
      border: solid;
      border-width: 1px;
      border-color: #fff;
      color: var(--green-l-2);
      background-color: var(--green-l-2)  !important;
               }


.checkBoxCols {
  padding: 5px;
  border: solid;
  border-width: 1px;
  border-color: #fff;
  text-align: center;
  margin:5px;
  margin-left: 8px;
  width: 110px;

}

.notDoneCol {background-color: var(--grey-l) !important;}

.poorCol {background-color: var(--failBkg) !important;}

.averageCol {background-color: var(--passBkg) !important;}

.goodCol {background-color: var(--meritBkg) !important;}

.excellentCol { background-color: var(--distinctionBkg)  !important; }




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

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

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

/* IMAGE COLORS  */

.imgColRed {
  fill: var(--red) !important;

}


.img_White {
    filter: invert();
  /* path { fill: white !important; } */

}



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

}


.genTextBox{
  border: solid;
  font-size:1.5em;
  border-width: 5px;
  border-color: #fff;
  background-color: var(--grey-l)   !important;
  height:3em;
  width:95%
}

.genNumBox{
  border: solid;
  font-size:1.25em;
  border-width: 5px;
  border-color: #fff;
  background-color: var(--blue-l) !important;
  height:3em;
  width:95%
}


.transcriptText{
  border: solid;
  font-size:1.5em;
  border-width: 3px;
  /* border-color: #fff; */
  background-color: var(--blue-l);
  width:95%;
  height:2em;
  margin-bottom: 5px;
}

.tEdit {
  border: solid;
  font-size:1.5em;
  width:95%;
  height:2em;
    border-width: 1px;
    border-color:var(--grey-d) !important;
    background-color: var(--blue-l) !important;
    margin-bottom: 5px;
}

.translateText {
  border: solid;
  border-width: 3px;
    font-size:1.5em;
  border-color: #fff;
  background-color: var(--blue-l)  !important;
  width:95%;
  height:2em;
  margin-bottom: 5px;

}


.noticeBox {
  border: solid;
  font-size:1.5em;
  width:95%;
    color: var(--red-d);
    border-width: 2px;
    border-color:var(--red-d) ;
    background-color:  var(--pink-l) ;
    margin-bottom: 5px;
}