:root {
  --main-hover-radio: rgba(144, 238, 144,0.7);
  --main-answer-color:rgba(0,50,200,1);

}

input[type=radio].radio1  {
    display: none;
}
label.radio1{
    display:inline-block;
    position:relative;
    border: 3px solid grey;
    border-radius: 6px;
    width: 270px;
    text-align: center;
    padding: 3px;
    background: pink;
    margin: 2px;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
}
label.radio1:hover{
    animation-name: hoverButton;
     animation-duration: 0.2s ;
     animation-fill-mode: forwards;
}
input[type=radio].radio1:checked+label {
    animation-name: selectButton;
     animation-duration: 0.4s ;
     animation-fill-mode: forwards;
}

@keyframes hoverButton {
  from {background-color: pink;
      box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2)
  }
  to {background-color: lightgreen;
      box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.2)
  }
}
@keyframes selectButton {
  from {background:rgb(120, 220, 120);
      box-shadow: 4px -4px 1px 1px rgba(0,0,0,0.2)
  }
  to {background: lightgreen;
      box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.2)
  }
}


input[type=radio].radio2  {
    display: none;
}
label.radio2{
    display:inline-block;
    position:relative;
    border-radius: 10px; // was 20
    padding: 3px;
    padding-left: 7px;
    padding-right: 12px;
    margin: 2px;
    color: var(--main-answer-color);
}
input:not(.done)+label.radio2:hover{
    animation-name: hoverButton2;
     animation-duration: 0.2s ;
     animation-fill-mode: forwards;
}
input[type=radio].radio2:checked+label {
    animation-name: selectButton2;
     animation-duration: 0.4s ;
     animation-fill-mode: forwards;
}



input[type=checkbox].checkbox0  {
    display: none;
}


label.checkbox0{
    --box-grey: #DADADA;
    display:inline-block;
    position:relative;
    border-radius: 0px;
    padding: 0px;
    padding-left: 7px;
    padding-right: 32px;
    margin: 2px;
    color: var(--main-answer-color);
    background-image: linear-gradient(to right,transparent 0%, transparent 10%, var(--box-grey) 11%, var(--box-grey) 65%, transparent 66%, transparent);
    background-repeat: no-repeat;
    background-size: calc(var(--main-font-size)*2) calc(var(--main-font-size)*1.2); // var(--main-font-size) var(--main-font-size);
}
label.checkbox0:before {
      content: '';
}
label.checkbox0:hover{
    --box-greyer: #CACACD;
    cursor: pointer;
    background-image: linear-gradient(to right,transparent 0%, transparent 10%, var(--box-greyer) 11%, var(--box-greyer) 65%, transparent 66%, transparent);
    background-repeat: no-repeat;
    animation-name: hovercheckbox;
     animation-duration: 0.2s ;
     animation-fill-mode: forwards;
}
input[type=checkbox].checkbox0:checked+label {
    animation-name: hovercheckbox;
     animation-duration: 0.4s ;
}
.checksigndecore{
    visibility: hidden;
    display: inline-block;
    height: var(--main-font-size);
    width:  var(--main-font-size);

}
input[type=checkbox].checkbox0:checked+label>.checksigndecore{
    visibility: visible;
    animation-name: showchecksign;
    animation-duration: 0.7s;
    animation-fill-mode: both;
    margin-right:  var(--main-font-size);

}
 @keyframes  hovercheckbox {
    from{

        text-shadow: 0px 0px  0px black;
    }
    to{
        text-shadow: 0.75px 0.75px  0px  grey;
    }
}
 @keyframes showchecksign {
    from{
        width:  0px;
        margin-right:  var(--main-font-size);

    }
    to{
        width:   var(--main-font-size);
        margin-right:   0px;

    }
}


@keyframes hoverButton2 {
  from {background-color: transparent;
      box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2)
  }
  to {background-color: var(--main-hover-radio);
      box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.2)
  }
}
@keyframes selectButton2 {
  from {background:rgb(120, 220, 120);
      box-shadow: 4px -4px 1px 1px rgba(0,0,0,0.2)
  }
  to {background: rgb(120, 255, 120);
      box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.2)
  }
}

.textInputClass{
    display:inline-block;
    position:relative;
    text-align: center;
    width:200px;
    border-radius: 20px;
    padding: 3px;
    padding-left: 12px;
    padding-right: 12px;
    margin-left: 10px;
    margin-right: 10px;
    color: rgba(0,50,200,1);
    font-size: inherit;
    font-family: inherit;
    font-weight: bold;
}
.textInputClass:focus{
    outline: none;
    background:rgba(144, 238, 144,0.7);
}
.textFillInputClass {
    --border-color0: black;
    background:rgba(0, 0, 0,0.0);
    display:inline-block;
    position:relative;
    text-align: center;
    width:auto;
    border-radius: 10px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;

    color: rgba(0,50,100,1);
    font-size: inherit;
    font-family: inherit;
    border-top-style: hidden;
    border-left-style:  hidden;
    border-right-style: hidden;
    border-bottom-style: hidden;
    background: linear-gradient(to bottom,transparent,transparent 97%, var(--border-color0) 98%, var(--border-color0) 100%);
}
.textFillInputClass:focus{
    outline: none;
    background:rgba(144, 238, 144,0.2);
}
.bottom-input-border{
    --border-color0: black;
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
    left: 0px;
    display: inline-flex;
    padding: 0; margin: 0;

}
.bottom-input-border:focus-within{
    --border-color0: var(--main-answer-color);
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
    left: 0px;
    display: inline-flex;
    padding: 0; margin: 0;
    background-image: linear-gradient(to bottom,transparent,transparent 94%, var(--border-color0) 95%, var(--border-color0) 100%);
    background-repeat: no-repeat;
    background-position: center;
    animation-name: underlineTextFill;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}
@keyframes underlineTextFill {
    0% {background-size: 0% 100%;}
    25% {background-size: 20% 100%;}
    50% {background-size: 60% 100%;}
    75% {background-size: 80% 100%;}
    100% {background-size: 90% 100%;}

}

.order0{


        width: 150px;
        border-radius: 7px;
        text-align: center;
        padding: 1px;
        padding-left: 7px;
        padding-right: 12px;
        margin: 8px;
        background-color: rgba(160,  210, 255,0.9);
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
        border: 2px solid transparent;

    color: rgba(0,50,200,1);
}
.order0:hover:not(.clickedListItem){
    cursor:grab;
    background-color: rgba(160,  210, 255,0.9);
        box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.2)
}
.order0:active{
    cursor:grabbing;

}

@keyframes hoverorder0 {
  from {background-color: transparent;
      box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2)
  }
  to {background-color: rgba(160,  210, 255,0.9);
      box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.2)
  }
}



/*
 li.drag-sort-active {

       background: transparent;
       color: transparent;
       border: 1px solid #4ca1af;

  } */

 li.drag-sort-active{
     background: transparent;
     color: transparent;
      animation-name: active-element-animation ;
      text-decoration-thickness: 30px;
      animation-fill-mode: forwards;
      animation-duration: 0.5s ;
      --effect-color:black;
       border: 1px solid #4ca1af;
  }

 .wordBank-striked-out {
  color:grey;
  position: relative;
 }
.wordBank-striked-out::after {
    --strike: rgba( 131, 92, 59,0.8);
  background: linear-gradient(0deg, transparent 0%, transparent 54%, var(--strike) 55%, var(--strike) 75%, transparent 76%, transparent 100% ),
  linear-gradient(3deg, transparent 0%, transparent 54%, var(--strike) 55%, var(--strike) 75%, transparent 76%, transparent 100%), linear-gradient(5deg, transparent 0%, transparent 54%, var(--strike) 55%, var(--strike) 75%, transparent 76%, transparent 100%)   ;
  content: "";
  height: 0.25em;
  left: 0;
  margin-top: calc(0.125em / 2 * -1);
  position: absolute;
  right: 0;
  top: 55%;
  border-radius: 90% 90%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  opacity: 0;
   animation-name: wordbankafteranim;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;

}
@keyframes wordbankafteranim {
    from {opacity: 0.2;
        background-size: 0% 100%;

    }
    to {opacity: 1;
        background-size: 100% 100%;
    }
}

.wordBank-delete-striked-out {
 color:inherit;
 position: relative;
}
.wordBank-delete-striked-out::after {
   --strike: rgba( 131, 92, 59,0.8);
 background: linear-gradient(0deg, transparent 0%, transparent 54%, var(--strike) 55%, var(--strike) 75%, transparent 76%, transparent 100% ),
 linear-gradient(3deg, transparent 0%, transparent 54%, var(--strike) 55%, var(--strike) 75%, transparent 76%, transparent 100%), linear-gradient(5deg, transparent 0%, transparent 54%, var(--strike) 55%, var(--strike) 75%, transparent 76%, transparent 100%)   ;
 content: "";
 height: 0.25em;
 left: 0;
 margin-top: calc(0.125em / 2 * -1);
 position: absolute;
 right: 0;
 top: 55%;
 border-radius: 90% 90%;
 background-repeat: no-repeat;
 background-size: 0% 100%;
 opacity: 0;
  animation-name: wordbankdeleteafteranim;
 animation-duration: 1.5s;
 animation-fill-mode: forwards;

}
@keyframes wordbankdeleteafteranim {
   from {
       opacity: 1;
   background-size: 100% 100%;

   }
   to {
       opacity: 0.0;
           background-size: 0% 100%;

   }
}

.placeInputWithBank{
    border-radius: 2px;
    --border-color0: black;
    display:inline-block;
    position:relative;
    text-align: center !important;
    padding: auto;
    width:auto;
    min-width: 90px;
    background: linear-gradient(to bottom,transparent,transparent 97%, var(--border-color0) 98%, var(--border-color0) 100%);

}
.placeInputWithBankReady{
      cursor:pointer;
      background-color: rgba(255, 200, 200, 0.5);
}

.place-bank-element{
        position: relative;
        display:inline-block;
        width: auto;
        border-radius: 7px;
        text-align: center !important;
        padding: 1px;
        padding-left: 7px;
        padding-right: 12px;
        margin: 8px;
        margin-right: 12px;
        background-color: rgba(160,  210, 255,0.9);
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);
        color: rgba(0,50,200,1);
        transition: top 0.5s ease 0s, left 0.5s ease 0s, background 0.5s ease 0.6s, opacity 0.9s ease 0.0s, box-shadow 0.5s ease 0s;
        cursor: pointer;

}
.place-bank-element:hover:not(.choosen-place-element):not(.done){

    background-color: rgba(160,  210, 255,0.9);
    box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.2)
}
.place-bank-element:active{


}
.choosen-place-element {
    background-color: rgba(120, 190, 230,1);
    box-shadow: 1px 1px 10px 2px rgba(255,255,20,0.7),2px 2px 0px 2px rgba(10,25,20,0.7);
}

.place-bank-element-in-container
{

    display:inline-block;
    width: auto;
    border-radius: 4px;
    text-align: center !important;
    padding: 1px;
    padding-left: 2px;
    padding-right: 0px;
    margin: 0px;
    margin-right: 0px;
    background-color: rgba(240,  240, 240,0.2);
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
    color: rgba(0,50,200,1);
    /* animation-name: move-placeable-element; */
    top: 0px;


    /* animation-duration: 2s;
    animation-fill-mode: forwards; */

}
@keyframes move-placeable-element {
    50%{
        position: relative;
        top:-300px;
        color:red;
    }
    100%{
        position: relative;
        top:0px;
        color:black;
    }

}
img.image-question{
    margin: 0px;
    display: block;
    height: auto;
    width: calc(var(--main-font-size)*6);
    border-radius: 0px;
    border: 0px solid rgba(0,0,0,0);
}
label.image-question{
    margin: 5px;
    display:inline-table;
    height: auto;
    width: auto;
    border-radius: 2px;
    border: 9px solid rgba(0,0,0,0);
}
label.image-question:hover{
    cursor: pointer;
    filter: brightness(110%);
    border: 9px solid rgba(100,100,70,1);
    box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.2);
}
input[type=radio].image-question:checked+label {
    animation-name: chooseimage;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}
input[type=radio].image-question  {
    display: none;
}
 @keyframes chooseimage {
    from{
        border: 9px solid rgba(100,100,70,1);
        box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2);

        border-radius: 5px;

    }
    to{
        border: 9px solid rgb(10, 102, 155);
        border-radius: 5px;
        box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.4);

    }
}


.clickedListItem {
    //box-shadow:1px 1px 1px 1px rgba(255,255,0,0.5);
    border: 2px solid black;
}
.bigquestionimages{
    width: calc(var(--main-font-size)*8) !important;
}
.listReadyToSwap>.order0:hover:not(.clickedListItem){
    color: green;
    border-top:  dashed red 3px;
    box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.2); 
      /* -0px -1px 1px 6px red; */
}