.market {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 0.75fr;
      grid-template-columns: 1fr 0.75fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
      grid-template-areas: "sklep kasa";
  height: 100%;
  font-size: 1.4rem;
  width: 100%;
}

.sklep {
  overflow-y: auto;
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: sklep;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[14];
      grid-template-columns: repeat(14, 1fr);
  -ms-grid-rows: (1fr)[12];
      grid-template-rows: repeat(12, 1fr);
  background: aquamarine;
  width: 100%;
  height: 100%;
}

.depositBox {
  -ms-grid-row: 1;
  -ms-grid-row-span: 12;
  -ms-grid-column: 1;
  -ms-grid-column-span: 14;
  grid-area: 1 / 1 / 13 / 15;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background: beige;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.task-count {
  -ms-grid-row: 12;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
  grid-area: 12 / 1 / 12 / 8;
  font-size: 1.2rem;
  margin-left: 10px;
  margin-right: 10px;
}

.task-deposit {
  -ms-grid-row: 12;
  -ms-grid-column: 2;
  -ms-grid-column-span: 5;
  grid-area: 12 / 2 / 12 / 7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-item-align: center;
      align-self: center;
  border: solid 2px black;
  background-color: var(--bank-bg-color);
  border-radius: 5px;
}

.task-deposit {
  -ms-grid-row: 12;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
  grid-area: 12 / 1 / 12 / 8;
  font-size: 1.2rem;
  margin-left: 10px;
  margin-right: 10px;
}

.shopping {
  -ms-grid-row: 1;
  -ms-grid-row-span: 12;
  -ms-grid-column: 1;
  -ms-grid-column-span: 14;
  grid-area: 1 / 1 / 13 / 15;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  border: solid 2px rgba(22, 11, 11, 0.125);
  background: beige;
}

.task-change {
  -ms-grid-row: 12;
  -ms-grid-column: 1;
  -ms-grid-column-span: 7;
  grid-area: 12/1/12/8;
}

.task-change {
  -ms-grid-row: 12;
  -ms-grid-column: 2;
  -ms-grid-column-span: 5;
  grid-area: 12 / 2 / 12 / 7;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-item-align: center;
      align-self: center;
  border: solid 2px black;
  background-color: var(--bank-bg-color);
  border-radius: 5px;
}

.total-deposit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: solid 2px black;
  background-color: var(--bank-bg-color);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.total-deposit {
  -ms-grid-row: 11;
  -ms-grid-row-span: 2;
  -ms-grid-column: 8;
  -ms-grid-column-span: 6;
  grid-area: 11 / 8 / 13 / 14;
  font-size: 2rem;
  margin-bottom: 5px;
  margin-top: -5px;
  border-radius: 6px;
}

.you-bought {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-area: 1/1/3/2;
  font-size: 1rem;
  margin-top: 20px;
  margin-right: 5px;
  margin-left: 5px;
  margin-bottom: 0px;
}

.you-bought {
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  background: white;
  border: solid 1px orange;
  border-radius: 5px;
  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;
  margin: unset;
}

.your-change {
  -ms-grid-row: 1;
  -ms-grid-row-span: 12;
  -ms-grid-column: 1;
  -ms-grid-column-span: 14;
  grid-area: 1 / 1 / 13 / 15;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  border: solid 2px rgba(22, 11, 11, 0.125);
  background: beige;
}

.you-paid {
  /* grid-area: 10/14/13/15; */
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  background: white;
  border: solid 1px orange;
  border-radius: 5px;
  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;
  margin: unset;
}

.you-paid {
  -ms-grid-row: 11;
  -ms-grid-row-span: 2;
  -ms-grid-column: 14;
  -ms-grid-column-span: 1;
  grid-area: 11/14/13/15;
  font-size: 1rem;
  margin-left: 7px;
  margin-right: 7px;
  margin-top: 0px;
  margin-bottom: 8px;
}

.portfel {
  -ms-grid-row: 11;
  -ms-grid-row-span: 2;
  -ms-grid-column: 9;
  -ms-grid-column-span: 5;
  grid-area: 11/9/13/14;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border: solid 2px black;
  background-color: var(--bank-bg-color);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.back-image-portfel {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}

.portfe-back-image-coin {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}

.portfe-back-image-note {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

.towar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* border: solid 1px orange; */
  background-repeat: no-repeat;
  background-size: cover;
  -ms-flex-item-align: start;
      align-self: flex-start;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-line-pack: end;
      align-content: flex-end;
  width: 140px;
  height: 140px;
}

.towar {
  width: 140px;
  height: 140px;
  margin-left: 40px;
}

.cena {
  margin-right: 5px;
  margin-bottom: 40px;
  background: #f0f184;
  border: solid darkred 3px;
  border-radius: 5px;
  font-size: 2rem;
  padding: 2px 5px 2px 5px;
}

.kasa {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: kasa;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  padding: 0;
  overflow-y: auto;
}

.kasa {
  overflow-y: auto;
}

.coin-skarbonka {
  width: 50px;
  height: 50px;
  border: solid black 1px;
  border-radius: 50%;
  margin: 5px;
}

.coin-skarbonka {
  width: 100px;
  height: 100px;
}

#imgContainer {
  height: 150px;
  width: auto;
}

.coin {
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 25%;
  max-height: 25%;
  width: auto;
  height: auto;
  margin-top: 20px;
  margin-left: 0;
}

.note-skarbonka {
  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;
  width: 180px;
  height: 100px;
  border: solid black 1px;
  margin: 3px;
  margin-left: 7px;
}

.note {
  -o-object-fit: contain;
     object-fit: contain;
  max-width: 45%;
  max-height: 45%;
  width: auto;
  height: auto;
  margin-top: 8px;
  margin-left: 10px;
  margin-right: 5px;
}

.back-image {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;
}

.back-image-keeper {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 80%;
  margin-top: 20px;
}

.draggable-money {
  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;
  /* Keep in mind that the size of the border, margins, and paddings 
    affect the size of an element. 
    It can be fixed using the box-sizing CSS property 
    or including those values into the size value. */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.draggable-money {
  padding: 10px;
  margin-bottom: 10px;
  font-size: 25px;
  border-radius: 10px;
}

.draggable-money.animatable {
  -webkit-transition: opacity linear 400ms, -webkit-transform linear 400ms;
  transition: opacity linear 400ms, -webkit-transform linear 400ms;
  transition: transform linear 400ms, opacity linear 400ms;
  transition: transform linear 400ms, opacity linear 400ms, -webkit-transform linear 400ms;
}

.draggable-money.active {
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  will-change: transform;
  z-index: 1;
}
/*# sourceMappingURL=main_money.css.map */