/* START divRuitjesvel ****************************************************** */

#txtInputMobile{
    position: relative ;
    left: -200px;
    top: 50px;
}

#divRuitjesVel{
  display: inline-block;
  font-family: 'Architects Daughter';                                           // 20220217
  font-weight: 700;
  font-size: 18px;

  cursor: pointer;  //anders verspringt hij de hele tijd van text naar arrow
}

#divRuitjes{
  display: grid;
  border: 2px solid var(--kleurLijntjes);
}

.ruitje{
  border: 1px solid var(--kleurLijntjes);
  background-color: #b7bce133;

  width: 25px;
  height: 27px;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding-top: 2px;
  position: relative;
}

.ruitje > div.groter{
  height: 1.5em;
  width: 1.5em;
  font-size: 1.8em;
  left: -13px;
  top: -8px;
  position: absolute;
  font-weight: 100;
  z-index: 0;
}

.ruitje.kleiner{
  font-family: "Times New Roman", Times, serif;;
  font-style: italic;
  font-weight: 600;
  color: var(--blauwDonker);
}

.ruitje.lichter{
  color: #999;
}

.ruitje.answer{
  background-color: var(--deminLicht);
}

.ruitje.geselecteerd {
    animation:         aniBlinkCursor 1s infinite;
}

@keyframes aniBlinkCursor {
  0% { border-bottom: 4px solid var(--oranjeDonker); }
  50% { border-bottom: 4px solid black; }
  100% { border-bottom: 4px solid var(--oranjeDonker);}
}

#divRuitjesVel .stripkeOnder{
  border-bottom: 2px solid black;
}

/*  20201119 toegevoegd ivm de haakdeling*/
#divRuitjesVel .stripkeLinks{
  border-left: 2px solid black;
}

#divRuitjesVel .stripkeBoven{
  border-top: 2px solid black;
}

#divRuitjesVel .stripkeRechts{
  border-right: 2px solid black;
}

.ruitje.stripkeDoor{
    background-image: linear-gradient(135deg, #5cabb4 4.55%, #eeeeee 4.55%, #eeeeee 50%, #5cabb4 50%, #5cabb4 54.55%, #eeeeee 54.55%, #eeeeee 100%);
    background-size: 40px 40px;
    background-position-x: -17px;
}

.ruitje.stripkeDoor div {
    color: #222;
}

/*
 * 20230105
 * Hoewel we het knopje Komma niet meer gebruiken, willen we deze komma in een ruitje`
 * wel toepassen bij de staartdeling
 */
.ruitje.komma::after{
    position: absolute;
    content: ',';
    top: -1px;
    left: 18px;
    font-size: 1.2em;
    text-shadow: 0 0 3px white;
}