html,body { height:100%;padding:0;margin:0 }

  body {

    font-family: 'News Cycle', sans-serif;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	height: 100%;
/*  background-image: url("../images/C0g2cz97ycCh.webp");*/
 background-color:black;
  background-size:cover;

    --highlightColor: #EEE;
   /* --optionColor: rgba(255,128,128,0.57);*/
   --optionColor:#EEE;
}

/*.slash {font-size:26pt; color:red; z-index:2; margin: 0 0 0 -15px; font-weight: normal !important ;font-family: 'Shadows Into Light', cursive;
text-shadow:0px 0px 3px rgba(200,0,0,.3) !important; opacity: .83 !important;}*/


.selectionSkin {
  font-family: 'News Cycle', sans-serif;
  background-color:black;
}

input[type="checkbox"] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  transform: scale(2);
  padding: 10px;
  margin: 2px;
}

/*
.analogue1 {
  font-family: 'GFS Neohellenic', sans-serif;
  color: rgba(48, 18, 18, 0.97);

    background-image: url("../images/aVoGN8m0BiJC.webp");
 font-weight:bold!important;

}*/

.analogue1 {
/*  font-family: 'GFS Neohellenic', sans-serif; */
  font-family: 'Helvetica Neue', sans-serif;
  color: rgba(53, 18, 18, 0.78);

    background-image: url("../images/aVoGN8m0BiJC.webp");
 font-weight:bold!important;
}

.digital1 {
 font-family: 'Convergence', sans-serif;
  background-image: url("../images/C0g2cz97ycCh.webp");
/*  background-color: black;*/


}

.digital1 input {
  /*background-color:#white;*/
}

.container-fluid {
  overflow-y:hidden;
  overflow-x:hidden;
}

#bottomRow {
  position: absolute;
  top:80%;
}

.analogue1 #hiddenDiv {
  position: fixed;
  display: block;
  width: 100%;
  height: 110%;
  background-image: radial-gradient(transparent 50%, black 95%);
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0);
  z-index: 2;
  cursor: pointer;
  pointer-events: none;
}


/*
$( "#hiddenDiv" )
.animate({opacity: .36}, 3200) */
.analogue1 #darkenVignette {
  position: fixed;
  display: block;
  width: 100%;
  height: 110%;
  background-image: radial-gradient(transparent 45%, black 115%);
  opacity: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.2);
  z-index: 2;
  cursor: pointer;
  pointer-events: none;
}

  .btn{
    background-color:#222222;
	  color:#EDEDED;
  }

  .centred {
    text-align:center;
    margin: auto;

  }

  .selection  {
    background-color:#EDEDED;
    font-weight: bold;
    border:6px solid #33CCEE;
  }

  .selection *  {

    font-weight: bold;
  }

 .skinOptionImg {

   height:125px;
 }


 .settingsTable {
   margin:0 auto;
   font-size:inherit;
    border-collapse:collapse;
    width:300px;
  font-weight:bold;
  color:inherit;

 }


   #countdownText {

	font-size:18pt;
   }
   #countdownRecallText {

 font-size:18pt;
   }
  #countdownTime {

	font-size:300pt;
  }
  #countdownRecallTime {

	font-size:300pt;
  }
  #countdownTable {
    margin:0 auto;
    border-collapse: collapse;
    text-align:center;
	width:100%;
  }

  #countdownRecallTable {
    margin:0 auto;
    border-collapse: collapse;
    text-align:center;
  /* width:164px; */
  }
  .full-height {
    height:100%;

  }

  #logoRow {
    height:100px;
  }


  #topMargin {
    height:10px;
  }

  .bottom-right-timer {

    /*right:15%  maybe set this instead of the left property */
  }

  #finishBtnDiv{
    position:fixed;
    top:93%;
    left:70%;
  }

  #analogue1MemoTimeInner {
    position:fixed;
    /*top:93%;*/
    top:89%;
    left:10%;
    font-size: 20pt;
    font-family: "Orbitron";
    /*right:15%  maybe set this instead of the left property */
  }


  #analogue1RecallTimeInner {
    position:fixed;
    top:93%;
    left:10%;
    font-size: 20pt;
    font-family: "Orbitron";
    /*right:15%  maybe set this instead of the left property */
  }

/*
 .analogue1container {
   height:100%;

 }
*/
.analogue1memoHeight {

  height:100%;
}

.digital1memoHeightDates {

  height:90vh;
}
.digital1memoHeight {

    height:100%; /*was 850px*/
}
#digital1MemoTimeOuterTd {

  width:500px;
}

  .analogue1boxA {

    font-weight:bold!important;
    background-image: url("../images/APJb77ALmwVY.webp");
    background-position: top left;
    background-size: 100% auto;


      box-shadow:
        /* The top layer shadow */
        /* 0 1px 1px rgba(0,0,0,0.15), */
        -1px 0px 2px 2px rgba(0, 0, 0, 0.5),
        /* The second layer */
        -1px -2px 0 0px #EEE,


         3px 0px 0 -1px #DDD0AF,
        -1px -10px 1px -7px rgba(0, 0, 0, .55),

        4px 2px 0 -1px #DDD0AF,
        5px 2px 2px -1px rgba(0, 0, 0, .85);


/*
    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow:  0px 20px 1px 2px rgba(0, 0, 0, 0.4),15px -10px 60px 15px rgba(0, 0, 0, 0.08) inset; */

    padding:20px;
    border-radius: 0 !important;

  }


  .analogue1boxB {

    font-weight:bold!important;
    background-image: url("../images/APJb77ALmwVY.webp");
    background-position: top left;
    background-size: 100% auto;


      box-shadow:
        /* The top layer shadow */
        /* 0 1px 1px rgba(0,0,0,0.15), */
        -1px 0px 2px 3px rgba(0, 0, 0, 0.45),
        /* The second layer */
        -1px -2px 0 0px #EEE,


         3px 0px 0 -1px #DDD0AF,
        -1px -10px 1px -7px rgba(0, 0, 0, .55),

        4px 2px 0 -1px #DDD0AF,
        5px 2px 2px -1px rgba(0, 0, 0, .85);


/*
    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow:  0px 20px 1px 2px rgba(0, 0, 0, 0.4),15px -10px 60px 15px rgba(0, 0, 0, 0.08) inset; */

    padding:20px;
    border-radius: 0 !important;

  }


  .analogue1boxAsingle {

    font-weight:bold!important;
    background-image: url("../images/APJb77ALmwVY.webp");
    background-position: top left;
    background-size: 100% auto;


    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 0, 0, 0.1) inset;
     -webkit-box-shadow:  0px 30px 1px 2px rgba(0, 0, 0, 0.38),15px -10px 60px 15px rgba(0, 0, 0, 0.08) inset;

    padding:20px;
    border-radius: 0 !important;



  }

  .focusBox {
    margin: auto;
    padding: 0px 20px;
    text-align: center;
    margin-bottom: 8px;
    border: 1px solid black;
    border-radius: 3px;
  }

  .focusBoxBinary {
    font-size:4em;
  }

  .focusBoxBinaryGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .focusBoxBinaryGrid-row {
    display: flex;
    align-items: center;
  }

  .focusBoxBinaryGrid-digit {
    font-family: 'Roboto', monospace; /* Use a monospace font for even spacing */
    padding-left: 0.1em; /* Add spacing between digits if needed */
    padding-right: 0.1em; /* Add spacing between digits if needed */
    display: inline-block;
  }

  .focusBoxBinaryGrid-sep {
    width:30px;
    display: inline-block;
  }

  .focusBoxNumbers {
    /* width: fit-content */
    font-size:5em;
  }

  .focusBoxWords {
    font-size:4em;
    width:100%
  }

  .focusBoxNames {
    font-size:4em;
    width:100%
  }

  .focusBoxImages {
    padding: 25px!important;
    display: flex;         /* Horizontal layout */
    flex-direction: row;   /* Just in case */
    gap: 20px;             /* Optional spacing between images */
    align-items: center;   /* Vertically align images */
    justify-content: center;
  }

  .analogue1boxBsingle {

    font-weight:bold!important;
    background-image: url("../images/APJb77ALmwVY.webp");
    background-position: top left;
    background-size: 100% auto;


    box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35), 0 0 20px rgba(0, 0, 0, 0.1) inset;
     -webkit-box-shadow:  0px 30px 1px 2px rgba(0, 0, 0, 0.38),15px -10px 60px 15px rgba(0, 0, 0, 0.08) inset;

    padding:20px;
    border-radius: 0 !important;



  }
/*
.analogue1boxGreen {
  background-image: url("feltGrid2.png");
  background-repeat: repeat;
  color:white;
  padding:20px;
  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.35);
   -webkit-box-shadow:  0px 30px 1px 2px rgba(0, 0, 0, 0.38);

}
*/

.analogue1boxGreen {
  background-image: url(../images/xuCUI8ncw6jh.webp);
  background-size: 159px 159px;

 background-repeat: repeat;
 color: #EEE;
 padding: 20px;

 box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, .47);
 -moz-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, .47);
 -webkit-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, .47);
}

  .digital1boxA, .digital1boxB {

  background-color:#EEE;
  color:black;
 padding-top:20px;
  border:6px solid #888888;

  }




  .analogue1boxA:before, .analogue1boxA:after, .analogue1boxB:before, .analogue1boxB:after
{
  position:absolute;
  content:"";
      z-index:-1;
      box-shadow: 8px -2px 15px 3px rgba(0,0,0,.66);
      top:-1;
      bottom:0;
      left:190px;
      right:10px;
      border-radius:100px / 10px;
}
.analogue1boxA:after, .analogue1boxB:after
{
  right:10px;
  left:auto;
  transform:skew(4deg) rotate(3deg);
  -webkit-transform: skew(4deg) rotate(3deg);
-moz-transform: skew(4deg) rotate(3deg);
-o-transform: skew(4deg) rotate(3deg);
-ms-transform: skew(4deg) rotate(3deg);
}

/*
*** TRY THIS CSS FOR BEVEL
.analogue1boxA:before, .analogue1boxA:after, .analogue1boxB:before, .analogue1boxB:after
{
  position:absolute;

  content:"";

      box-shadow:0 -1px 10px rgba(0,0,0,1);
      top:0;
      bottom:0;
      left:10px;
      right:10px;
      border-radius:100px / 10px;

}
.analogue1boxA:after, .analogue1boxB:after
{


  right:10px;
  left:auto;
  transform: skew(4deg) rotate(3deg);
}
*/




/*
  .overlay {
    position:absolute;
   left:0;
    top:0;
    height:100%;
    width:100%;

  background-image:url("../images/APJb77ALmwVY.webp");

   background-size:cover;

   z-index:2;
   opacity:.13;


  }
*/

.overlay {
  position:absolute;
  width: 60%;
 left:22%;
  top:5rem;
background-color:#3EB5C8;
color:#222;
font-size:4rem;
  z-index:2;
 opacity:0.8;
}

/*.slash {font-size:16pt; color:red; z-index:2; margin: 0 0 0 -15px; font-weight:bold;font-family:'Rock Salt',cursive;}*/
/*.slash {font-size:14pt; color:red; z-index:2; margin: 0 0 0 -15px; font-weight: normal;rmal !important ;font-family:'Rock Salt',cursive;
text-shadow:0px 0px 3px rgba(200,0,0,.85) !important; opacity: .8 !important;}*/

.analogue1pagelink {
  background-color:#000000;
  opacity: .55;
  color:#EEE;
}

.analogue1pagelinkred {
  background-color:#3EB5C8;
  opacity: .55;
  color:#EEE;
}


.digital1pagelink {
  background-color:#000000;
  color:#EEE;
}

.digital1pagelinkred {
  background-color:#3EB5C8;
  color:#EEE;
}



.menu a{text-decoration:none!important}
.menu li{float:left}
.menu li a{display:block;padding:8px 10px} /* second value changed 2022 to prevent menu wrapping */
.menu li a:hover{color:#000;background-color:#ccc}
.menu{
  /*background-color:#ccc;*/
  background-color:transparent;
  color:#000;
	list-style-type:none;
	position: relative;
  /*left: 100px;*/
  padding-bottom:20px;
}


#menuDiv {
  position:absolute;
  left:4%;
  top:75px;
  z-index:1;
  }
#menuRecallDiv {
position:absolute;
left:4%;
top:75px; /*was relative, 20px*/
z-index:1;
}

#menuScoreDiv {
  position:absolute;
  left:4%;
  top:75px; /*was relative, -5px*/
  z-index:1;
  }

#menuRecallDiv .menu{
  /*background-color:#ccc;color:#000;*/
  background-color:transparent;
	list-style-type:none;
	position: relative;
	/*left: 100px;*/

  padding-bottom:20px;
}

#menuScoreDiv .menu{
	 /*background-color:#ccc;color:#000;*/
   background-color:transparent;
	list-style-type:none;
	position: relative;
	/*left: 100px;*/

  padding-bottom:20px;
}

.finishBtn {
	position:relative;
	left:83%;

}

#wrapper {


position:relative;
  width:80%;

  margin: 0 auto;
}
.memoContent {
  position:absolute;
  left:0;
  padding: 2px;
  margin: 0 auto;
  width: 100%;

  top:50px; /*was 100px*/
}


#preview {
  /*height: 45px;*/
  /*width: 240px;*/

}

.recallContent {
	padding: 2px;
  margin: 0 auto;
  width: 100%;


  position:absolute;
  top:130px;
  z-index:4;
}

.scoreContent {
	padding: 2px;
  margin: 0 auto;
  width: 100%;


  position:absolute;
  top:130px;

  z-index:4;
}


 .analogue1rowNumber {
    border:none;color:red;
	width:30px !important;
  opacity: .5 !important;
  }


.analogue1numbersMemo {
  font-size:18pt;
  width:24px;
  padding-bottom:2px;
  text-align:center;

  text-shadow: 0px 0px 1px  rgba(30, 15, 15, 0.2);

  color: rgba(53, 18, 18, 0.78);
  /* opacity: 1; */
}

.analogue1numbersSelected {
background-color:var(--highlightColor);
  /*background-color: lightblue;*/
  color: rgba(53, 18, 18, 0.9);
  /* opacity: 1; */
}

.analogue1numbersInLocus {

  /* background-color:#CCCCAA; */
  /* border-bottom:#222222 1px dotted; */
  /* border-top:#222222 1px dotted; */
}

.analogue1binaryMemo {
  font-size:18pt;
  width:24px;
  padding-bottom:2px;
  text-align:center;

  text-shadow: 0px 0px 1px  rgba(30, 15, 15, 0.2);

  color: rgba(53, 18, 18, 0.78);
  /* opacity: 1; */
}

.analogue1binarySelected {
  /*background-color:lightblue;

  background-opacity: .7;*/
  background-color:var(--highlightColor);
  color: rgba(53, 18, 18, 0.9);
  /* opacity: 1; */
}

.analogue1wordsMemo {
  font-size:14pt;
  font-family: 'Roboto', sans-serif;
  width:20%;
  padding-bottom:2px;
  color: #222222;
  opacity: .9;
}

.analogue1wordsSelected {
background-color:var(--highlightColor);
  opacity: .88;
}

.analogue1wordsRecall {
background-color:rgba(0,0,0,0);
height:23px !important;
width:70%;
border-color:#222222;
border-width: 1px;
border-style:none none dotted none;
opacity: .95;
font-family: 'Kalam', cursive;
font-weight:normal!important;
font-size:20;
color: rgba(0,0,230,.88) !important;
text-shadow:0px 0px 1px rgba(0,0,200,.25);
/animation: glow 899s infinite alternate;
}

.analogue1wordsSelectedRecall {
  /*  background-color:#ffaa33;*/
  background-color:var(--highlightColor);
    border-style:solid;


  }
  .analogue1wordsInGroup {

     border-style:solid;

  }


  .analogue1wordsRecallTD {
    padding:0px;
    white-space:nowrap;
    position:relative;
  }

.analogue1wordsNum {
  font-size:10pt;
  font-family: 'Roboto', sans-serif;
  width:30px!important;
  padding-bottom:2px;
  color: #222222;
  opacity: .9;
  }



  .digital1wordsMemo {
    font-size:14pt;
    /width:80%;
    padding-bottom:2px;

    color: #000000;

  }



  .digital1wordsSelected {
 background-color:var(--highlightColor);

  }

  .digital1wordsRecall {
   height:3vh;
   width:90%;
    font-size:smaller;
     }

  .digital1wordsNum {
   font-size:10pt;
   font-family: 'Convergence', sans-serif;
  width:30px !important;

  }


  .digital1wordsInGroup {
    background-color:#d3d3e3;
    height:3vh;
    width:90%;
    font-size:smaller;
  }

  .digital1wordsSelectedRecall {
    background-color:var(--highlightColor);
    height:3vh;
    width:90%;
    font-size:smaller;
   }

   .digital1wordsRecallTD {
    padding:0px;
    position:relative;

  }

  .wordsTable {
    width:100%;
  }

  .wordsRecallTable {
    width:95%;
  }

  .analogue1datesMemo {
    font-size:1.5rem; /* was 1.3vw */
    font-family: 'Roboto', sans-serif;

    padding-bottom:2px;
    color: #222222;
    opacity: .9;
  }
  .analogue1datesYearMemo {
    font-size:1.5rem; /* was 1.3vw*/
    font-family: 'Roboto', sans-serif;

    padding-bottom:2px;
    padding-right:10px;
    color: #222222;
    opacity: .9;
  }

  .digital1datesMemo {
    font-size:2vh;

    padding-bottom:2px;

    color: #000000;

  }

  .digital1datesYearMemo {
    font-size:2vh;
    padding-bottom:2px;
    padding-right:10px;
    color: #000000;

  }


  .analogue1datesSelected {
    background-color:var(--highlightColor);
      opacity: .88;
    }

    .digital1datesSelected {
      background-color:var(--highlightColor);

       }

       .analogue1datesEventRecall {
        font-family: 'Roboto', sans-serif;
        background-color:rgba(0,0,0,0);

        font-weight:normal!important;
        font-size:1.5rem; /* was 1.3vw */

        }

        .analogue1datesRecallTD {
          padding:0px;
          white-space:nowrap;
          position:relative;
        }

        .analogue1datesYearRecall {
          font-family: 'Kalam', cursive;
          font-weight:normal!important;
          font-size:1.6rem;  /* was 1.4vw */
          color: rgba(0,0,230,.88) !important;
        text-shadow:0px 0px 1px rgba(0,0,200,.25);
       / animation: glow 899s infinite alternate;
        border-width: 1px;
        border-color:#222222;
        border-style:none none dotted none;
        opacity: .95;
       height:2.8rem;
       width:5rem;
       background-color:rgba(0,0,0,0);
       opacity: .95;

        }

        .analogue1datesSelectedRecall {

          background-color:var(--highlightColor);

            border-style:solid;

          }


          .digital1datesYearRecall {
            height:2rem;
            width:5rem;




        border-width: 1px;
        border-color:#222222;
        border-style:none none solid none;
      /* opacity: .95;
       height:2.8vh;
       width:5vw; */
              }

              .digital1datesEventRecall {

                  }


           .digital1datesSelectedRecall {
             background-color:var(--highlightColor)!important;

            }

            .digital1datesRecallTD {
             padding:0px;


           }


       .datesTable {
        width:70%;
        height:65vh;
        margin:0 auto;

      }

      .datesRecallTable {
        width:70%;
        height:65vh;
        margin:0 auto;
      }


.digital1rowNumber {
   border:none;color:#3EB5C8;
 width:30px !important;

 }


 .digital1numbersMemo {
   font-size:18pt;
   width:24px;
   padding-bottom:2px;
   text-align:center;


   color: #000000;

 }

 .digital1numbersSelected {
background-color:var(--highlightColor);


 }

 .digital1numbersInLocus {

  /background-color:#CCCCAA;
}

 .digital1binaryMemo {
   font-size:18pt;
   width:24px;
   padding-bottom:2px;
   text-align:center;


   color: #000000;
 }

 .digital1binarySelected {
	 background-color:var(--highlightColor);
   /*background-color:lightblue;
   background-opacity: .7;*/

 }
.bigCards {
  height:240px;

}

.cardTable {
	background-image: url("../images/aOPNLfEHlBzs.webp");
	color:#EEE;
}
.textCardTable {
	color:#EEE;
}

.reverseCards {
  flex-direction: row-reverse;
  justify-content: flex-end; /* Align items to the end to pack tightly */
    gap: 0;
}

/* .reverseLayout #recallContentDiv,
.reverseLayout #analogueCardsRecallContentDiv {
  flex-direction: column-reverse;
} */

.textNonCards {
/*	color:black;*/
}

.analogue1cardOneMemo {
-webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 7px rgba(0,0,0,0.3);

}

.analogue1cardOtherMemo {
-webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 7px rgba(0,0,0,0.3);

}

.analogue1cardImgSmall {
   height:80;
   position:absolute;
   -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
}

/*
.analogue1cardImgBig {
   height:200;
   position:absolute;
   -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
}*/

/* .analogue1cardImgBig {
  height: 200;
  border: 1px solid;
  border-color: rgba(0,0,0,.21);
  border-radius: 10px;
  position: absolute;
  -webkit-box-shadow: 1.2px 1px 6.5px 0px rgba(0,0,0,.36);
  box-shadow: 1.2px 1px 6.5px 0px rgba(0,0,0,.36);
  z-index: 2;
} */


.analogue1cardImgBig {
  height: 200;
  border: .5px solid;
  border-color: rgba(0,0,0,.22);
  border-radius: 10px;
  position: absolute;
  -webkit-box-shadow: 0.6px 0.75px 2.5px 0.75px rgba(0,0,0,.43);
  box-shadow: 0.6px 0.75px 1.75px 0.75px rgba(0,0,0,.45);
  z-index: 2;
}

/* .analogue1cardMemoFan {
  height: 100;
  transform-origin: center 750%;
  position: absolute;
  top: -80;
  left: 10%;
  -webkit-box-shadow: 1px 0.7px 3px rgba(0,0,0,0.5);
  box-shadow: 1px 0.7px 3px rgba(0,0,0,0.5);
} */

.analogue1cardMemoFan {
  height: 100;
  transform-origin: center 750%;
  position: absolute;
  border: .5px solid rgba(0,0,0,.2);
  top: -80;
  left: 10%;
  -webkit-box-shadow: 0px 1px 0.5px 0.5px rgba(0,0,0,0.08);
  -moz-box-shadow: 0px 1px 0.5px 0.5px rgba(0,0,0,0.08);
  box-shadow: 0px 1px 0.5px 0.5px rgba(0,0,0,0.08);
}

.digital1cardMemoFan {
	flex:1;
	height:90;

}
.analogue1cardMemoFanDiv {
	position:relative;
	max-width:100em;
	transform:rotate(-24deg);
}

.digital1cardMemoFanDiv {
	display:flex;
	max-width:100em;

}


.digital1cardOneMemo {


}

.digital1cardOtherMemo {


}

.digital1cardImgSmall {
   height:80;
   position:absolute;
}

.digital1cardImgBig {
   height:200;
   position:absolute;

}

.imageTable {
	width:80%
}

.imageClass {

	text-align:center;
}

.imageRowNumCell {
	color:red;
	width:8em;
	text-align:center;
	font-size:10pt;
}

.imageNum {
	 text-align:center;
	font-size:10pt;
}

.digital1imagesSelected {

	border-radius:8px;

	box-shadow: 0px 0px 6px 6px var(--highlightColor), 6px 6px var(--highlightColor) inset;

}

.analogue1imagesSelected {

		border-radius:8px;
	box-shadow: 0px 0px 6px 6px var(--highlightColor), 6px 6px var(--highlightColor) inset;
	/* was 3 and 5 */
}

.analogue1imagesRecall {
  background-color:rgba(0,0,0,0);
  height:25px !important;
  width:25px !important;
  text-align:center;
  border-color:#222222;
  border-width: 1px;
  border-style:none dotted ridge none;
  opacity: .95;
  font-family: 'Reenie Beanie', cursive;
  font-weight:normal!important;
  font-size:35;
  color: rgba(0,0,230,.88) !important;
  margin:10;
  text-shadow:0px 0px 1px rgba(0,0,200,.25);
  /animation: glow 899s i nfinite alternate;
}

.digital1imagesRecall {
  height:25px !important;
  width:25px !important;
  text-align:center;

  border-color:#222222;
  border-width:1px;
}

.cardBoneyardDiv {

}

.digital1cardBoneyardDiv {
	display:flex;
	max-width:100em;

}


.cardBoneyard {
	/flex:1;
	/height:90;
	/   transform-origin: center bottom;
	/  -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
  /box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
  -webkit-transition: rotate 0.3s ease;
  -moz-transition: top 0.3s ease, left 0.3s ease;
  -o-transition: top 0.3s ease, left 0.3s ease;
  -ms-transition: top 0.3s ease, left 0.3s ease;
  transition: all 0.6s ease;
transform:rotate(0deg);
}

.digital1cardBoneyard {
	flex:1;
	height:130;
  width:93.2167;
}

	.cardBoneyardFan {

	height:100;
	transform-origin: center 750%;

      position: absolute;
  top:-150;
  left: 20%;
  -webkit-transition: top 0.3s ease, left 0.3s ease;
  -moz-transition: top 0.3s ease, left 0.3s ease;
  -o-transition: top 0.3s ease, left 0.3s ease;
  -ms-transition: top 0.3s ease, left 0.3s ease;
  transition: top 0.3s ease, left 0.3s ease;
}

/*
	.analogue1cardBoneyard {

	height:130;
	transform-origin: center 750%;

      position: absolute;
  top:-80;
  left: 10%;

   -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
}*/

/* .analogue1cardBoneyard {

	height:130;
	transform-origin: center 750%;

      position: absolute;
  top:-80;
  left: 10%;

   -webkit-box-shadow:0px 1px 2px 1px rgba(0,0,0,0.34);
-moz-box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.34);
  box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.34);

} */

/* .analogue1cardBoneyard {
  height: 130;
  transform-origin: center 750%;
  position: absolute;
  top: -80;
  left: 10%;
  -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.05);
  -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.05);
  box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,.15);

} */

.analogue1cardBoneyard {
  height: 130;
  transform-origin: center 750%;
  position: absolute;
  top: -80;
  left: 10%;
  -webkit-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
  -moz-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
  box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
  border: .5px solid rgba(0,0,0,.28);
}

.analogue1cardBoneyardDiv {
	position:relative;
	max-width:100em;
	transform:rotate(-24deg);
}

.cardRecallNum {
	position:absolute;

}


.cardContainer {
	display:flex;
	max-width:100em;
}

.cardRecall {
	flex:1;
	height:110;
	width:80;
	  -webkit-box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
  box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
}

.analogue1boxGreen .cardRecallSelected {
  /* border:solid yellow 3px; */
	border-radius:8px;
	box-shadow: 0px 0px 4px 3px #DDD, 5px 5px #DDD inset;
}

.digital1 .cardRecallSelected {
  /* border:solid yellow 3px; */
	border-radius:8px;
	box-shadow: 0px 0px 2px 1px #007, 1px 1px #007 inset;
}

.cardRecallCorrect {
  /* border:solid green 3px; */
	border-radius:8px;
	box-shadow: 0px 0px 3px 3px #3f3, 5px 5px #3f3 inset;
}

.cardRecallIncorrect {
  /* border:solid red 3px; */
	border-radius:8px;
	box-shadow: 0px 0px 3px 3px #f33, 5px 5px #f33 inset;
}

.cardRecallCorrected {
  /* border:solid red 3px; */
	border-radius:8px;
	box-shadow: 0px 0px 3px 3px #3a3, 5px 5px #3a3 inset;
}

.analogue1numbersRecallTD {
  padding-top:10px;
  -webkit-box-shadow: 0 0px 1px 1px rgba(30, 30, 30, .0);
  text-shadow:0px 0px 1px 1px  rgba(0, 0, 0, 1);
position:relative;
}


.analogue1binaryRecallTD {
  padding-top:10px;
  -webkit-box-shadow: 0 0px 1px 1px rgba(30, 30, 30, .0);
  text-shadow:0px 0px 1px 1px  rgba(0, 0, 0, 1);
  position:relative;

}

.analogue1imagesRecallTD {
  position:relative;
}


@keyframes glow{

    to {
      text-shadow:0px 0px 4px rgba(0,0,200,.6);
    }
}


.analogue1numbersRecall {
  /* background-color:#fdfec8; */
  background-color:rgba(0,0,0,0);
  height:20px !important;
  width:20px !important;
  text-align:center;
  /* border-color:#222222; */
  border-color: rgba(53, 18, 18, 0.78);
  border-width: 1px;
  border-style:none dotted ridge none;
  opacity: .95;
  font-family: 'Reenie Beanie', cursive;
  font-weight:normal!important;
  font-size:35;
  color: rgba(0,0,230,.88) !important;
  text-shadow:0px 0px 1px rgba(0,0,200,.25);
/* animation: glow 899s infinite alternate; */
}
.analogue1numbersSelectedRecall {
/*  background-color:#ffaa33;*/
/* background-color:rgba(0,0,0,0.5); */
background-color:var(--highlightColor)!important;
/* border-style:solid!important; */

}
.analogue1numbersInGroup {
  background-color:var(--highlightColor)!important;

  /* border:#222222 1px solid; */

}



.analogue1binaryRecall {
  /* background-color:#fdfec8; */
  background-color:rgba(0,0,0,0);
  height:20px !important;
  width:20px !important;
  text-align:center;
  /* border-color:#222222; */
  border-color: rgba(53, 18, 18, 0.78);
  border-width: 1px;
  border-style:none dotted ridge none;
  opacity: .95;
  font-family: 'Reenie Beanie', cursive;
  font-weight:normal!important;
  font-size:35;
  color: rgba(0,0,230,.88) !important;
  text-shadow:0px 0px 1px rgba(0,0,200,.25);
/* animation: glow 899s infinite alternate; */

}

.analogue1binarySelectedRecall {
/*  background-color:#ffaa33;*/
/background-color:rgba(0,0,0,0.5);
background-color:var(--highlightColor);
  height:20px !important;
  width:20px !important;
  text-align:center;
  border-color:#222222;
  border-width: 1px;
  border-style:solid;
  font-family: 'Reenie Beanie', cursive;
  font-weight:normal!important;
  font-size:35;
  color: rgba(0,0,230,.88) !important;
  text-shadow:0px 0px 1px rgba(0,0,200,.25);

}
.analogue1binaryInGroup {
  /*background-color:#d3d3e3;*/
 /*background-color:rgba(245,245,220,0.5);*/
 background-color:rgba(0,0,0,0);
  height:20px !important;
   width:20px !important;
   text-align:center;
   border-color:rgba(53, 18, 18, 0.78);
   border-width:1px;
   border-style:solid;
   font-family: 'Reenie Beanie', cursive;
   font-weight:normal!important;
   font-size:35;
   color: rgba(0,0,230,.88) !important;
      text-shadow:0px 0px 1px rgba(0,0,200,.25);
}


.digital1numbersRecallTD {
  padding-top:10px;
  height:25px !important;
  width:25px !important;

}
.digital1numbersRecall {
  text-align:center;
  height:25px !important;
  width:100%;
  border-color:#222222;
  border-width:1px;
}
.digital1numbersSelectedRecall {
  /background-color:#ffaa33;
  background-color:var(--highlightColor)!important;

}
.digital1numbersInGroup {
  background-color:#d3d3e3;

}

.binaryRecallTD {
  padding-top:10px
}
.binaryRecall {
  background-color:#EDEDED;
  height:30px !important;
  width:30px !important;
  text-align:center;
  opacity: .82;
}
.binarySelectedRecall {
  /background-color:orange;
  background-color:var(--highlightColor);
  height:30px !important;
  width:30px !important;
  text-align:center;
  opacity: .82;
}
.binaryInGroup {
 background-color:lightblue;
 height:30px !important;
  width:30px !important;
  text-align:center;
}

.analogue1recallTable {
 border-collapse: collapse;
  text-align:center;
  margin: 0 auto;
  opacity: .82;
 width:80%;

}

.digital1recallTable {
 border-collapse: collapse;
  text-align:center;
  margin: 0 auto;

}

.digital1binaryRecallTD {
  padding-top:10px;

}
.digital1binaryRecall {
  height:25px !important;
  width:25px !important;
  text-align:center;

  border-color:#222222;
  border-width:1px;
}
.digital1binarySelectedRecall {
  /background-color:#ffaa33;
  background-color:var(--highlightColor);
  height:25px !important;
  width:25px !important;
  text-align:center;

  border-color:#222222;
  border-width:1px;
}
.digital1binaryInGroup {
  background-color:#d3d3e3;
  height:25px !important;
   width:25px !important;
   text-align:center;

   border-color:#222222;
   border-width:1px;
}

.locusStart {
  border-left:1px solid #222;
}

.separation {
  border-right:1px solid #222;
}

.separationRecall {
  border-right:3px solid black;
}

.nameTable {
  width:100%;
  text-align:center;
  white-space:nowrap;
}

.nameTable td {
  width:33%;
}
.faceMemo {
  padding-top:10px;
text-align:center;
}

.nameMemo {
text-align:center;
padding-bottom:10px;
}

.analogue1nameMemo {
  font-family: 'Roboto', sans-serif;
}

.analogue1nameRecall {
  background-color:rgba(0,0,0,0);
  /*height:23px !important;*/
  width:35%;
  margin-left:5px;
  margin-right:5px;
  border-color:#222222;
  border-width: 1px;
  border-style:none none dotted none;
  opacity: .95;
  text-align:center;
  font-family: 'Kalam', cursive;
  font-weight:normal!important;
  font-size:16;
  color: rgba(0,0,230,.88) !important;
  text-shadow:0px 0px 1px rgba(0,0,200,.25);
 /* animation: glow 899s infinite alternate; */
  height:2vw;
  }

  .digital1nameRecall {
    height:2vw;
  }

#spanShift {
  font-size:16px;
  position: relative;
left: 30px;
top: 10px;
}


#digital1RecallTimeOuterTd {
 width:500px;
}
#digital1RecallTimeOuter {
  font-size:16px;
  position: relative;

top: 10px;
}



.analogue1boxGreen #cardsMemoTime {
  font-size:16px;
  color:#EEE;
  position: relative;
top: 10px;
}

.digital1 #cardsMemoTime {
  font-size:16px;
  color:#222;
  position: relative;
top: 10px;
}

#cardsMemoTimeScore {
  font-size:16px;
  color:#EEE;
  position: relative;
top: 10px;
}

#cardSet {
  display:flex;
  flex-direction: row;
  justify-content: space-around;
}


#divDecks {
  flex:1;
}

.scoreTable {
/*
  border-collapse:separate;
  text-align:center;
  margin: 0 auto;
  padding-top:5px;
  */
  border-collapse: collapse;
   text-align:center;
   margin: 0 auto;
   table-layout:fixed;
	/*width:80%; */
}


/*
.correction {
  background-color:#EDEDED;
  height:30px;
  width:30px;
  text-align:center;

}

*/
/*
.analogue1score {
  border: 1px solid #d3d3e3;
  height:50px;
  width:65px;
  text-align:center;
  opacity: 0.85;
  padding:0px;
font-family: 'Reenie Beanie', cursive;
  font-weight: normal !important;
  font-size: 42;
  color: blue;
  text-shadow:0px 0px 3px rgba(0,0,200,.45);
}
*/

.analogue1score {
  border: 1px solid #d3d3e3;
  /*height:50px;
  width:65px;*/
  height:26px;
  width:40px;
  text-align:center;
  padding:0px;
/*font-family: 'Shadows Into Light', cursive;*/
font-family: 'Reenie Beanie', cursive;
  font-weight: normal !important;
  font-size: 25;
  color: rgba(0,0,230,.7) !important;
  text-shadow: 0px 0px 3px rgba(0,0,230,.3) !important;
}

.digital1score {
  border: 1px solid #222222;
  height:27px;
  width:25px;
  text-align:center;
  padding:0px;
  overflow:hidden;
}

.digital1correct {

  background: rgba(0, 255, 0, 0.3)!important;
}

.digital1corrected {


    background: repeating-linear-gradient(
      45deg,
      transparent,
     transparent 10px,
      lightgreen 10px,
      lightgreen 20px
    );
}

.analogue1correct {

}

.analogue1corrected {
  /*color:red;
  font-weight:normal !important;
  text-shadow: 0px 0px 3px rgba(200,0,0,0) !important; opacity: .8 !important; font-family: 'Rock Salt', cursive !important; font-size: 10;*/
}
.digital1incorrect {
  /*background-color:#dd6666;*/
  /*background: rgba(255, 0, 0, 0.4)
  background-color:orangered;
  background-color:#fc552f;*/
  background-color:#ff5555!important;
}
.analogue1incorrect {

}


#spanOuterScore {
  font-size:20pt;

  vertical-align:middle;
}

#spanScore {
  font-size:40pt;

 vertical-align:middle;
}
#spanCorrect {
  font-size:14pt;

 vertical-align:middle;
}

.disciplineTitle {
  font-size:20pt;
display:inline;
  vertical-align:middle;
}

#btnBackToSelection2 {
 position:absolute;
 left:80px;
}

.countdownDisciplineTitle {
  font-size:20pt;

  vertical-align:middle;
}

.disciplineTitleMemo {
  font-size:18pt;
  vertical-align:top;
  font-style:italic;
  width:25vw;
}

.disciplineHeadingTable {
  position:relative;
  left:8%;
  table-layout:fixed; width:100%;
  color:inherit;
}

.disciplineHeadingTable td {
  padding-right:20px;

}

/*
sup {
    top: -0.33em!important;
	font-size:105%!important;
}
sub {
    left: 0.1em!important;
    bottom: -.05em!important;
	font-size:100%!important;
}
*/
.digitMarkingSup {
    top: -1.00em!important;
    left: -0.4em!important;

	font-size:135%!important;
}

.binaryMarkingSup {
  top: -0.70em!important;
  left: -0.4em!important;
font-size:135%!important;
}
.digitMarkingSub {
    left: -0.8em!important;
    bottom:0.4em!important;
	font-size:130%!important;
}

.imageMarkingSup {
    top: -1.3em!important;
	left: -4.1em!important;
	font-size:125%!important;
}
.imageMarkingSub {
    left: -4em!important;
    bottom: -0.1em!important;
	font-size:120%!important;
}

.wordMarkingSup {

  /*  top: 0em!important;
  left: -1em!important;*/
  top: -1.3em!important;
	left: -2em!important;
  font-size:85%!important;
  font-family:'Kalam',cursive;
}
.dateMarkingSub {
   /* left: -0.7em!important;
    bottom: 0em!important;*/
    bottom: 0.5em!important;
left: -0.8em!important;
  font-size:200%!important;
  position:absolute;
}

.dateMarkingSup {

 /* top: 0em!important;
left: -1.5em!important;*/

top: -0.8em!important;
left: -1.2em!important;
font-size:75%!important;
font-family:'Kalam',cursive;
}
.wordMarkingSub {
  /*left: -3em!important;
  bottom: 0em!important;*/
  bottom: 0.7em!important;
  left: -3em!important;
  position:absolute;
font-size:150%!important;
}

.nameFMarkingSup {


 top: -2.9em!important;
left: -16.5em!important; /*was -13.5em*/
font-size:80%!important;
font-family:'Kalam',cursive;
}
.nameFMarkingSub {
  left: -5.5em!important;

  top: -0.7em!important;
font-size:200%!important;
}
.nameSMarkingSup {

 /* top: 0.2em!important;*/
 top: -2.9em!important;
 left: -4.7em!important;

font-size:80%!important;
font-family:'Kalam',cursive;
}
.nameSMarkingSub {
  left: -3em!important;

  top: -0.7em!important;
font-size:200%!important;
}

.analogue1namesSelectedRecall {
  background-color:var(--highlightColor);
}

.digital1namesSelectedRecall {
  background-color:var(--highlightColor);
}


.tableRToL {
  text-align:right;
}

.tableRToL tr td input {
  text-align:right
}

.slash {
   color:rgba(242,0,0,.6) !important;
   font-weight: normal !important ;
z-index:2;
/* margin: -10px 0 0 -13px; */
text-shadow:0px 0px 2px rgba(242,0,0,.3) !important;
/*was Rock Salt*/
font-family: 'Reenie Beanie', cursive;
font-size:15pt;
position:absolute;
top:30px;
}


.slashNames {
  color:rgba(242,0,0,.6) !important;
  font-weight: normal !important ;
z-index:2;
/* margin: -10px 0 0 -13px; */
text-shadow:0px 0px 2px rgba(242,0,0,.3) !important;
/*was Rock Salt*/
font-family: 'Reenie Beanie', cursive;
font-size:15pt;
position:relative;
top:30px;
}

#settingsRow0 {
  display:none;
}

#countdownRow {
  display:none;
}

#memoRow {
  display:none;
}


#recallRow {
  display:none;
}


#scoreRow {
  display:none;
}

.keybutton {
  border:solid 1px black;
  border-radius:3px;
  padding:1px;
}

.analogue1boxGreen .keybutton {
  border:solid 1px #EEE;
  border-radius:3px;
  padding:1px;
}

.keycombo {
  color:#777;
  font-size:smaller;
}

.analogue1boxGreen .keycombo {
  color:#EEE;
  font-size:smaller;
}

#divInstructions {
  width:60%;
  /* /border:solid 1px black;
  /background-color:palegoldenrod; */
  display:flex;
}




.markOther {
  opacity:0.4;
filter: brightness(60%);
}

.markCards {
 filter: brightness(60%);
}

.inverted {
  -webkit-filter: invert(.8);
  filter: invert(.8);
}

.instructionsTable {

  margin:20px auto;
  width:300px;

}


.analogue1boxGreen .instructionsTable th {
  color:#EEE;
  font-size:larger;
}

.instructionsTable tr {
  border-bottom: 1px solid lightgrey;
}


.analogue1boxGreen .instructionsTable tr td {
  font-weight: bold;
  color:#EEE;
}


.instructionsTable tr td:first-child {
  font-weight: bold;
  color:midnightblue;
}


.analogue1 .instructionsTable tr td:first-child {
  font-weight: bold;
  color:black;
}


.highlighterListItemBlank {
  flex: 1;
  height: 40px;
}

.highlighterListItemSelected {
  box-shadow: 0 0 6px 4px var(--highlightColor);
}

.noHighlightListItemSelected {
  box-shadow: 0 0 6px 4px rosybrown;
}

.flexContainer {
  flex: 4;
  height: 40px;
  display: flex;
  justify-content: space-around;
}
.highlighterListItem {
  flex: 3;
  height: 40px;
  opacity:0.8;
  cursor: pointer;
  border-radius: 5px;
}
.highlighterListItem:hover{

animation: colourbuttonglow 1s linear alternate infinite;
}

.noHighlightItem {
  flex: 3;
  height: 40px;
  border: 2px dashed #ccc; /* Dashed border to indicate no highlight */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  color: #333;
  cursor: pointer;
  border-radius: 5px;
}

.noHighlightItem:hover{

  animation: nocolourbuttonglow 1s linear alternate infinite;
  }

.btnDigital {
  border-radius:5px;
  border:3px solid midnightblue;
  background-color:#000000;
  padding:7px;
  color:#EEE;
}

.btnDigital:hover {
  background-color: midnightblue;
}

.analogue1boxGreen .btnDigital:hover {
  background-color: #222;
}


#settingsBox.analogue1boxGreen {
  font-family: 'News Cycle', sans-serif;
}

.analogue1boxGreen {
  font-family: 'News Cycle', sans-serif;
}

.flexParent {
  display:flex;
}

.dialogFlex {
  flex-direction:column;
  justify-content: center;
  align-items:center;
}

.settingsButtons {
  width:700px;
  margin:0 auto;
  justify-content: space-around;
}
.flexChild {
  flex:1;

}
/*
.outer {
  flex:1;
}
.mid {
  flex:4;
}

.box{
  display: flex;
  flex-direction:column;
 }
 .outer {
   flex:1
 }
 .mid {
   flex: 4;
   height: 200px;
  line-height: 200px;

 }
*/

/*
.glowButton {
  animation: buttonglow 0.6s linear alternate infinite;

}


@keyframes buttonglow {

0% {
  box-shadow: 0 0 6px 3px #3EB5C8;
}
100% {
  box-shadow: 0 0 6px 4px #3EB5C8;
}
}*/

#dialog {
  background-color: #3EB5C8;
  text-align:center;
  padding:10px;
  height: 100px;
  line-height: 100px;
}
/*
.printerInk {
  -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png);
  -webkit-mask-size: 700px 940px;
}

.stamp {
    color: rgb(51, 173, 173);
    font-size: 3rem;
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;
    font-family: Courier;
    -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png);
    -webkit-mask-size: 944px 604px;
    mix-blend-mode: multiply;
    border-width: 0.25rem;
    border-style: solid;
    border-color: rgb(51, 173, 173);
    border-image: initial;
    padding: 0.25rem 1rem;
    border-radius: 1rem;
}
*/
/*#divGrouping, span, h3, h4, #divHighlightColour, #countdownTime, #countdownText, #menuDiv, .disciplineTitleMemo, #analogue1memoTimeInner, .analogue1pageLink, .analogue1pageLinkRed, #recallContentDiv, #menuRecallDiv, #divInstructions, #scoreContentDiv, #memoContentDiv {*/



.no-close .ui-dialog-titlebar-close {display: none }

.analogue1 #recallContentDiv {


  /* DON'T PUT THIS BACK IN, THIS IS MEANT TO BE COMMENTED OUT: -webkit-mask-image: url("lessGrunge2.png");
  -webkit-mask-size: 118px 144px;*/
}

.analogue1paperContent {
  /*
  -webkit-mask-image: url("lessGrunge2.png");
  -webkit-mask-size: 96px 96px;
  text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2); */
}

.analogue1 #spanScore, #spanCorrect, #spanOuterScore {
/*-webkit-mask-image: url("lessGrunge2.png");
  -webkit-mask-size: 96px 96px;*/
  text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
}

.analogue1>:not(.analogue1boxGreen)>#settingsBox>input[type='text'] {
  background-color: transparent;
  /* border-color: #111;
  border-style: dotted; */
  border-width: 1px;

 /* -webkit-mask-image: url("lessGrunge2.png");
  -webkit-mask-size: 68px 84px;*/
  /* text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);   */
  color: rgba(0,0,230,.88) !important;
  font-family: 'Reenie Beanie', cursive;
  font-weight:normal!important;
  font-size: 35;

  text-shadow:0px 0px 1px rgba(0,0,200,.25);
  --highlightColor: transparent;

  /* pointer-events:none */
}



.analogue1boxGreen select {
  color:black;
  /* pointer-events:none */
}



.analogue1 #inpMiniGroupings, .analogue1>#settingsBox>:not(.analogue1boxGreen)>input {
  background-color: transparent;
  border-color: #111;
  border-style: solid;
  border-width: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  line-height: normal;
  /* MEANT TO BE COMMENTED OUT I THINK? -webkit-mask-image: url("lessGrunge2.png");
  -webkit-mask-size: 96px 96px; */
  color: rgba(0,0,230,.88) !important;
  font-family: 'Reenie Beanie', cursive;
  font-weight:normal!important;
  font-size: 35;
  /* text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);   */
  --highlightColor: transparent;
}


.analogue1boxGreen input[type='text'] {
  background-color: transparent;
  /* border-color: #111;
  border-style: dotted; */
  border-width: 1px;

 -webkit-mask-image: none;

 /* -webkit-mask-size: 68px 84px;*/
  /* text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);   */
  color:#EEE !important;
  font-family: 'News Cycle', sans-serif;
  font-weight:normal!important;
  font-size: 25;

  /*text-shadow:0px 0px 1px rgba(0,0,200,.25);*/
  --highlightColor: transparent;

  /* pointer-events:none */
}

.analogue1boxGreen select {
  color:#222;
}

.analogue1 #inpSeparation{
    background-color: transparent;
  border-color: #111;
  border-style: solid;
  border-width: 1px;
  border-top: none;
  border-left: none;
  border-right: none;
  line-height: normal;
  color: rgba(0,0,230,.88) !important;
  font-family: 'Reenie Beanie', cursive;
  font-weight:normal!important;
  font-size: 35;
  /* MEANT TO BE COMMENTED OUT -webkit-mask-image: url("lessGrunge2.png");
  -webkit-mask-size: 96px 96px; */
  /* text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);   */
}

.analogue1 #inpSeparationBin{
  background-color: transparent;
border-color: #111;
border-style: solid;
border-width: 1px;
border-top: none;
border-left: none;
border-right: none;
line-height: normal;
color: rgba(0,0,230,.88) !important;
font-family: 'Reenie Beanie', cursive;
font-weight:normal!important;
font-size: 35;
/* MEANT TO BE COMMENTED OUT -webkit-mask-image: url("lessGrunge2.png");
-webkit-mask-size: 96px 96px; */
/* text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);   */
}


 analogue1 #divGrouping{
 /* -webkit-mask-image: url("lessGrunge2.png");
  -webkit-mask-size: 96px 96px;*/
  font-size: 17;
  text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
 }
 .analogue1 h3{
  /* -webkit-mask-image: url("lessGrunge2.png");
   -webkit-mask-size: 96px 96px;*/
   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }

  .analogue1 #divPreview{
  /* -webkit-mask-image: url("lessGrunge2.png");
   -webkit-mask-size: 96px 96px;*/
   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }
  .analogue1 #divHighlightColour{
   /* MEANT TO BE COMMENTED OUT -webkit-mask-image: url("lessGrunge2.png");
   -webkit-mask-size: 96px 96px;*/
   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
   opacity: .65;
  }

  .analogue1 #countdownTime{
  /* -webkit-mask-image: url("leastGrunge5.png");
   -webkit-mask-size: 246px 296px;*/
   color: rgba(38, 18, 18, 0.81);

   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }

  .analogue1boxGreen #countdownTime{
  /* -webkit-mask-image: url("leastGrunge5.png");
   -webkit-mask-size: 246px 296px;*/
   color:#EEE;

   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }




  .analogue1 #countdownRecallTime{
  /* -webkit-mask-image: url("leastGrunge5.png");
   -webkit-mask-size: 46px 46px;*/
   color: rgba(38, 18, 18, 0.81);

   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }

  .analogue1boxGreen #countdownRecallTime{
    /* -webkit-mask-image: url("leastGrunge5.png");
     -webkit-mask-size: 46px 46px;*/
     color: #EEE;

     text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
    }

  .analogue1 #countdownText{
  /* -webkit-mask-image: url("lessGrunge2.png");
   -webkit-mask-size: 96px 96px;*/

   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }

  .analogue1boxGreen #countdownText{
    /* -webkit-mask-image: url("leastGrunge5.png");
     -webkit-mask-size: 246px 296px;*/
     color:#EEE;

     text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
    }

    .analogue1 #countdownRecallText{
      /* -webkit-mask-image: url("lessGrunge2.png");
       -webkit-mask-size: 96px 96px;*/

       text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
      }

      .analogue1boxGreen #countdownRecallText{
        /* -webkit-mask-image: url("leastGrunge5.png");
         -webkit-mask-size: 246px 296px;*/
         color:#EEE;

         text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
        }

  .analogue1 .paperContent .disciplineTitleMemo{
   /*-webkit-mask-image: url("lessGrunge2.png");
   -webkit-mask-size: 96px 96px;*/
   color: rgba(53, 18, 18, 0.78);

   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }





  .analogue1 #analogue1memoTimeInner{
   /*-webkit-mask-image: url("lessGrunge2.png");
   -webkit-mask-size: 96px 96px;*/
   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }

  .analogue1 #divInstructions{
   /*-webkit-mask-image: url("lessGrunge2.png");
   -webkit-mask-size: 96px 96px;*/
   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }
  .analogue1 #scoreContentDiv{
   /*-webkit-mask-image: url("lessGrunge2.png");
   -webkit-mask-size: 96px 96px;*/
   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }
  .analogue1 #memoContentDiv{
    /*
   -webkit-mask-image: url("lessGrunge2.png");
   -webkit-mask-size: 96px 96px;*/
   color: rgba(53, 18, 18, 0.78);

   text-shadow: 0px 0px 1px  rgba(30, 15, 15, .2);
  }

  .analogue1boxGreen a {
    color:lightblue;

  }

  .analogue1boxGreen a:visited {
    color:#EEE;
  }

  .glowButton {
    animation: buttonglow 1.6s alternate infinite;

  }


  @keyframes buttonglow {

    0% {
      box-shadow: 0 0 7px 1px var(--highlightColor);
    }

    100% {
      box-shadow: 0 0 7px 6px var(--highlightColor);

    }
    }

  @keyframes colourbuttonglow {

  0% {
    box-shadow: 0 0 7px 1px var(--optionColor);
  }

  100% {
    box-shadow: 0 0 7px 6px var(--optionColor);

  }
  }
  @keyframes nocolourbuttonglow {

    0% {
      box-shadow: 0 0 7px 1px white;
    }

    100% {
      box-shadow: 0 0 7px 6px white;

    }
  }
  #dialog {
    background-color: #3EB5C8;
    text-align:center;
    padding:10px;
    height: 100px;
    line-height: 100px;
  }
  /*
  .printerInk {
    -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png);
    -webkit-mask-size: 700px 940px;
  }

   .stamp
   */
  .analogue1 button{
    color: rgba(0, 180, 180, 0.8);
    font-size: 1.8rem;
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;
    font-family: Courier;
  /*  -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png);
    -webkit-mask-size: 1288px 408px;*/

    border-width: 0.125rem;
    border-style: solid;
    border-color: rgb(0, 180, 180, .7);
    border-image: initial;
    padding: 0.25rem 1rem;
    border-radius: .75rem;
    background-color: transparent;
  }

  .analogue1 button:hover{
    color:black;
     animation: buttonglo 1.1s forwards alternate infinite;
  }


  .analogue1boxGreen button{
    color: #EEE;
    font-size: 1.8rem;
    font-weight: 700;
    display: inline-block;
    text-transform: uppercase;
    font-family: 'News Cycle', sans-serif;
   /* -webkit-mask-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/8399/grunge.png);
    -webkit-mask-size: 1288px 408px;*/

    border-width: 0.125rem;
    border-style: solid;
    border-color: #EEE;
    border-image: initial;
    padding: 0.25rem 1rem;
    border-radius: .75rem;
    background-color: transparent;
  }

  .analogue1boxGreen button:hover{
    color:#DDD;
    animation:none;
     /*animation: buttonglo 1.1s forwards alternate infinite*/;
  }


  /* .analogue1 button:hover{
    color:black;
     animation: buttonglo 1.1s linear alternate infinite;
  } */


  .cardSettings {
    border: 2px solid #333;
    padding: 5px;
    margin: 5px;
    }

    .groupingSettings {
      font-size: 1em;
      font-weight: bold;
    }

  #intermediateDiv {
    font-size:60;

  }


  #intermediateDivSR {
    font-size:60;

  }

  @keyframes buttonglo {

    0% {
      border-color: rgb(0, 180, 180, .8);
    color: rgba(0, 180, 180, 0.7);
      background-color:transparent;
      box-shadow: 0 0 0px 0px #3EB5C8;
    }
    25% {
      border-color: rgb(0, 180, 180, .6);
      color: rgba(0, 180, 180, 0.5);
        background-color:transparent;
        box-shadow: 0 0 0px 0px #3EB5C8;
    }
    75% {
      border-color: rgb(0, 180, 180, 1);
      color: rgba(0, 180, 180, .9);
      background-color: transparent;
      box-shadow: 0 0 6px 4px, rgb(0, 180, 180, .85);
     }
     100%{
      border-color: rgb(0, 180, 180, .8);
      color: rgba(0, 180, 180, 0.7);
        background-color:transparent;
        box-shadow: 0 0 0px 0px #3EB5C8;
     }
    }

    .flash {
      -webkit-animation-name: flash-animation;
      -webkit-animation-duration: .9s;

      animation-name: flash-animation;
      animation-duration: .9s;
  }

  @-webkit-keyframes flash-animation {
      from { box-shadow: 0 0 1px 1px #FFF; }
      to   { box-shadow: default; }
  }

  @keyframes flash-animation {
      from { box-shadow: 0 0 1px 1px #FFF; }
      to   { box-shadow: default; }
  }



  .bigflash {
    -webkit-animation-name: bigflash-animation;
    -webkit-animation-duration: 1.5s;

    animation-name: bigflash-animation;
    animation-duration: 1.5s;
}

@-webkit-keyframes bigflash-animation {
    from { box-shadow: 0 0 10px 6px #EEE; }
    to   { box-shadow: default; }
}

@keyframes bigflash-animation {
    from { box-shadow: 0 0 10px 6px #EEE; }
    to   { box-shadow: default; }
}



/*
  .analogue1 .cardRecall {
    -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 3px r gba(0,0,0,0.3);
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  } */


  .btndigital:disabled, .btndigital[disabled] {
    opacity:0.5;
  }

  .analogue1boxGreen #btnStartMemoCountdown {
    --highlightColor: #EEE;
}