.wr-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.gr-numbercards {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50px (1fr)[4];
      grid-template-columns: 50px repeat(4, 1fr);
      grid-template-areas: "col-operation col-thousands col-hundreds col-tens col-ones";
  grid-gap: 5px;
  width: 100%;
  padding: 20px;
  margin: 0px;
}

.base-ten {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[2];
  -ms-grid-columns: (1fr)[5];
      grid-template: repeat(2, 1fr)/repeat(5, 1fr);
  -ms-grid-row-align: center;
      align-self: center;
  grid-gap: 1px;
}

.unit {
  font-size: 1rem;
  text-align: center;
  background: #193549;
}

.card-operator {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: col-operation;
  -ms-grid-row: 1;
  grid-row: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: white;
  font-size: 3rem;
  width: 50px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.place-thousands {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: col-thousands;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.place-thousands div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: solid #0088ff 2px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.place-hundreds {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: col-hundreds;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.place-hundreds div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: solid #ffee80 2px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.place-tens {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
  grid-area: col-tens;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.place-tens div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: solid #ff0000 2px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.place-ones {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
  grid-area: col-ones;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.place-ones div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: solid #00ff00 2px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.card-name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 30px;
  width: 100%;
  font-size: 1.5rem;
  color: white;
}

.name-thousands {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: col-thousands;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 50px;
  width: 100%;
  font-size: 2rem;
  color: #0088ff;
}

.name-hundreds {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: col-hundreds;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 50px;
  width: 100%;
  font-size: 2rem;
  color: #ffee80;
}

.name-tens {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
  grid-area: col-tens;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 50px;
  width: 100%;
  font-size: 2rem;
  color: #ff0000;
}

.name-ones {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
  grid-area: col-ones;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 50px;
  width: 100%;
  font-size: 2rem;
  color: #ffee80;
}

.box-place {
  height: 80px;
  width: 60px;
  color: #e1efff;
  font-size: 4rem;
}

.card-thousands {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: col-thousands;
  height: 100px;
  border: solid #0088ff 2px;
  margin: 0px 5px 0px 5px;
}

.card-thousands div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: solid #0088ff 2px;
  color: #0088ff;
  font-size: 40px;
  background: #193549;
}

.card-hundreds {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: col-hundreds;
  height: 100px;
  border: solid #ffee80 2px;
  margin: 0px 5px 0px 5px;
}

.card-hundreds div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: solid #ffee80 2px;
  color: #ffee80;
  font-size: 40px;
}

.card-tens {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
  grid-area: col-tens;
  height: 100px;
  border: solid #ff0000 2px;
  margin: 0px 5px 0px 5px;
}

.card-tens div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: solid #ff0000 2px;
  color: #ff0000;
  font-size: 40px;
}

.card-ones {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
  grid-area: col-ones;
  height: 100px;
  border: solid #00ff00 2px;
  margin: 0px 5px 0px 5px;
}

.card-ones div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: solid #00ff00 2px;
  color: #00ff00;
  font-size: 40px;
}

.krecha {
  border: solid 2px black;
  margin: 0px 10px 0px 5px;
}

.dzia {
  height: 40px;
  width: 40px;
  border: solid black 1px;
  margin-top: 50px;
  font-size: 30px;
}

.top-card-question {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  color: #e1efff;
  font-size: 8rem;
}

.top-card-question .card-number {
  margin-top: -100px;
}

.czarna {
  background: #193549;
}

.linia-cards {
  display: none;
  width: 100%;
}

.digit-strip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 50px;
}

.digit-drop-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 50px;
}

.digit-drop-box .drop-tys, .digit-drop-box .drop-sto, .digit-drop-box .drop-dzi, .digit-drop-box .drop-jed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 80px;
  width: 80px;
  border: 1px solid lightgrey;
  color: white;
  font-size: 4rem;
}

.oper {
  color: white;
  font-size: 2rem;
  width: 50px;
  height: 50px;
}

.kolory {
  background: #3ad900;
  background: #8ee484;
  background: #6ddb93;
  background: #e1efff;
  background: #0088ff;
  background: #ffee80;
  background: #ffc600;
  background: #ff6283;
  background: #f00000;
  background: #ff0000;
  background: #00ff00;
  background: #00ffcb;
  background: #0000ff;
  background: #000000;
}

.bomb {
  width: 50px;
  height: 50px;
  background: yellow;
}

.gr-simplenumbers {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 320px;
      grid-template-columns: 1fr 320px;
      grid-template-areas: "col-numbers col-digitbox";
  grid-gap: 5px;
  width: 100%;
  padding: 10px;
  margin: 0px;
}

.col-numbers {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: col-numbers;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col-digitbox {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: col-digitbox;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  justify-self: center;
  padding: 5px;
}

.digit-keyboard {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[4];
  -ms-grid-columns: (1fr)[3];
      grid-template: repeat(4, 1fr)/repeat(3, 1fr);
  -ms-grid-row-align: center;
      align-self: center;
  grid-gap: 5px;
  max-width: 295px;
}

.digit-keyboard-clock {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[3];
  -ms-grid-columns: (1fr)[4];
      grid-template: repeat(3, 1fr)/repeat(4, 1fr);
  -ms-grid-row-align: center;
      align-self: center;
  grid-gap: 5px;
  max-width: 295px;
}

.digit-drop-number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 50px;
}

.digit-drop-number .drop-tys, .digit-drop-number .drop-sto, .digit-drop-number .drop-dzi, .digit-drop-number .drop-jed {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 80px;
  width: 80px;
  border: 1px solid lightgrey;
  color: white;
  font-size: 4rem;
}

.ten-by-ten {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[10];
  -ms-grid-columns: (1fr)[10];
      grid-template: repeat(10, 1fr)/repeat(10, 1fr);
  -ms-grid-row-align: center;
      align-self: center;
  grid-gap: 1px;
}

.ten-only {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[10];
  -ms-grid-columns: (1fr)[1];
      grid-template: repeat(10, 1fr)/repeat(1, 1fr);
  -ms-grid-row-align: center;
      align-self: center;
  grid-gap: 4px;
}

.siata {
  width: 526px;
  border: solid #ffee80 3px;
  margin: 0px 5px 0px 5px;
  padding: 5px;
}

.siata div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: solid #ff0000 2px;
  font-size: 40px;
  margin-top: 3px;
}

.siata div div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: solid #00ff00 1px;
  font-size: 40px;
}

.un {
  font-size: 1rem;
  text-align: center;
  background: #193549;
  width: 50px;
  height: 50px;
  color: #ff0000;
}

.un-numbers {
  font-size: 1rem;
  text-align: center;
  background: #193549;
  width: 73px;
  height: 50px;
  color: #0088ff;
}

.pytajnik {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 200px;
  width: 200px;
  border: solid 2px red;
  color: red;
  font-size: 60px;
}

.card-counter {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: (1fr)[2];
  -ms-grid-columns: (1fr)[5];
      grid-template: repeat(2, 1fr)/repeat(5, 1fr);
  -ms-grid-row-align: center;
      align-self: center;
  grid-gap: 1px;
  width: 300px;
}

.card-counter-sto {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-item-align: center;
      align-self: center;
}

.card-sto-numbers {
  width: 760px;
}

.card-row-wysoko {
  height: 60px;
}
/*# sourceMappingURL=main_numbercard.css.map */