/*xs, sm, md, lg*/
/*dotted, solid, circle, rad1, rad2, rad3, rad4, rad5, rad6, rad7, rad8, rad9, rad10, background-red, background-green, background-blue, background-black, background-white*/
:root{
  --checkbox-xs: 14px;
  --checkbox-sm: 18px;
  --checkbox-md: 22px;
  --checkbox-lg: 26px;
  --red: #ff0000;
  --green: #00A651;
  /* --green: #006400; */
  --blue: #0089cf;
  --yellow: #faa21f;
  --pink: #f7d6e3;
  --white: #ffffff;
  --black: #000000;
  --lightgray:
  rgba(30, 17, 43, 0.493);
}
.tick, .toggle-tick, .toggle-cross, .toggle-tick-cross, .cross, .crayon, .switch-tick, .switch-cross{
  flex: auto;
  display: none;
}
label{
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly;
  cursor: pointer;
}
.dotted{
  border-style: dotted;
}
.solid{
  border-style: solid;
}
.bshadow{
box-shadow: -1px 0px 8px grey;
color: #000000 !important;
}
.dotted.width, .solid.width{
  border-width: 1px;
}
/*=================boder-color==================*/
.border-red{
  border-color: var(--red);
}
.border-black{
  border-color: var(--black);
}
.border-green{
  border-color: var(--green);
}
.border-blue{
  border-color: var(--blue);
}
.border-yellow{
  border-color: var(--yellow);
}
.border-pink{
  border-color: var(--pink);
}

/*----------------------------------------------*/
.border-radius-100{
  border-radius: 100px;
}
.border-radius-1{
  border-radius: 1px;
}
.border-radius-2{
  border-radius: 2px;
}
.border-radius-3{
  border-radius: 3px;
}
.border-radius-4{
  border-radius: 4px;
}
.border-radius-5{
  border-radius: 5px;
}
.border-radius-6{
  border-radius: 6px;
}
.border-radius-7{
  border-radius: 7px;
}
.border-radius-8{
  border-radius: 8px;
}
.border-radius-9{
  border-radius: 9px;
}
.border-radius-10{
  border-radius: 10px;
}
/*=============background-color================*/
.background-red{
  background-color: var(--red);
}
.background-green{
  background-color: var(--green);
}
.background-black{
  background-color: var(--black);
}
.background-white{
  background-color: var(--white);
}
.background-blue{
  background-color: var(--blue);
}
.background-yellow{
  background-color: var(--yellow);
}
.background-pink{
  background-color: var(--pink);
}
/*---------------------------------*/
/*=============text-color================*/
.red{
  color: var(--red);
}
.green{
  color: var(--green);
}
.black{
 color: var(--black);
}
.white{
  color: var(--white);
}
.blue{
  color: var(--blue);
}
.yellow{
  color: var(--yellow);
}
/*---------------------------------*/
.checkbox-xs{
  width: var(--checkbox-xs);
  height: var(--checkbox-xs);
}
.checkbox-sm{
  width: var(--checkbox-sm);
  height: var(--checkbox-sm);
}
.checkbox-md{
  width: var(--checkbox-md);
  height: var(--checkbox-md);
}
.checkbox-lg{
  width: var(--checkbox-lg);
  height: var(--checkbox-lg);
}
.correctTick, .wrongTimes, .correctTimes, .crayonPencil, .fade-tick, .fade-cross{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}
.correctTick{
  background-color: var(--green);
  transition: background-color 500ms linear;
}
.wrongTimes{
  background-color: var(--red);
  transition: background-color 500ms linear;
}
.correctTimes{
  background-color: var(--green);
  transition: background-color 500ms linear;
}
.correctTick:before{
  content: "\f00c";
  position: absolute;
  color: var(--white);
}
.wrongTimes:before{
  content: "\f00d";
  position: absolute;
  color: var(--white);
}
.correctTimes:before{
  content: "\f00d";
  position: absolute;
  color: var(--white);
}
.fade-tick, .fade-cross{
  background-color: var(--lightgray);
}
.dark{
  background-color: var(--green);
}
.dark::before{
  color: var(--white) !important;
}
.fade-tick:before{
  content: "\f00c";
  position: absolute;
  color: var(--lightgray);
}
.fade-cross:before{
  content: "\f00d";
  position: absolute;
  color: var(--lightgray);
}
.crayonBtnColor{
  background-color: rgba(109, 109, 109, 0.5);
  transition: background-color 500ms linear;
}
.crayonRight, .crayonWrong{
  display: inline-block;
  padding: 2px;
  margin: -2px;
  background: content-box;
  background-size: 0% 0%;
}
.crayonPencil{
	box-shadow: -1px 0px 8px grey;
    color: #000000 !important;
}
.crayonPencil::after{
  content: "\f303";
  position: absolute;
}
.blueCrayon{
  background-image: url(../images/blueCrayon.png);
  background-repeat: repeat-y;
  border: solid 0px transparent;
  background-size: 100% 100%;
  transition: background-size 500ms linear;
}
.redCrayon{
  background-image: url(../images/redCrayon.png);
  background-repeat: repeat-y;
  border: solid 0px transparent;
  background-size: 100% 100%;
  transition: background-size 500ms linear;
}
.greenCrayon{
  background-image: url(../images/greenCrayon.png);
  background-repeat: repeat-y;
  border: solid 0px transparent;
  background-size: 100% 100%;
  transition: background-size 500ms linear;
}
.yellowCrayon{
  background-image: url(../images/yellowCrayon.png);
  background-repeat: repeat-y;
  border: solid 0px transparent;
  background-size: 100% 100%;
  transition: background-size 500ms linear;
}

.pinkCrayon{
  /*background-image: url(../images/yellowCrayon.png);*/
  background-color: #f7d6e3;;
  background-repeat: repeat-y;
  border: solid 0px transparent;
  background-size: 100% 100%;
  transition: background-size 500ms linear;
}

/* ================circle===================== */
.circleWrong, .circleRight, .circleWrong-toggle, .circleRight-toggle, .circleRightWrong{
  border: solid 1px transparent;
  padding: 1px;
  margin: -1px;
  border-radius: 7px;
}
.circleBorderGreen{
  border: solid 2px green;
  transition: border 500ms linear;
  box-shadow: inset 0 2px 0 2px #FFC107;
}
.circleBorderRed{
  border: solid 2px red;
  transition: border 500ms linear;
  box-shadow: inset 0 2px 0 2px #FFC107;
}
.und, .und1 {
    cursor: pointer;
}
.und_green {
  border-bottom: solid 1px green;
  cursor: pointer;
  transition: border 500ms linear;
}
.und_red {
  border-bottom: solid 1px red;
  cursor: pointer;
  transition: border 500ms linear;
}

/* ----------------------------------------- */
/* ==============blocking=============== */
.block{
  border: dotted 1px #000;
  display: block;
  margin: 20px;
  padding: 10px;
}
/* ==============blocking=============== */