html, body {
  padding: 0;
  margin: 0;

  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

input, button, select, option {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

@media print {
  .no-print{
    display:none;
  }
}

.printing {
  background-color: #ffffff;
  color: #000000;
}

.main {
  background-color: #101020;
  color: #fafafa;
}

.card img {
  border-radius: 11px;
  overflow: hidden;
}

@media not print {
  .card {
    width: 230px;
    height: 320px;
  }
}

@page {
  margin: 0.5cm !important;
}

@media print {
  .pagebreak { page-break-after: always; }

  .card {
    width: 6.3cm;
    height: 8.8cm;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

.content { width: 800px; }
.full-w { width: 100%; }

.clickable { cursor: pointer; }

.p-abs { position: absolute; }
.p-rel { position: relative; }

.circle {
  width: 32px;
  height: 32px;
  background-color: #30ca60;
  border-radius: 50%;
}

.add-btn {
  border: none;
  
  bottom: 0px;
  right: 0px;
  border-radius: 50%;
  background-color: #30ca60;
  width: 32px;
  height: 32px;
  cursor: pointer;

  -webkit-box-shadow: 0px 10px 64px 0px rgba(4,4,31,1);
  -moz-box-shadow: 0px 10px 64px 0px rgba(4,4,31,1);
  box-shadow: 0px 10px 64px 0px rgba(4,4,31,1);
}

input {
  border: 1px solid #3060ca;
  background-color: #121227;
  color: #fafafa;
}

textarea:focus, input:focus {
  border: 1px solid #3090fa;
  outline: none;
}

button {
  border: none;
  color: #fafafa;
  background-color: #2060a0;
  cursor: pointer;
  border-radius: 2px;
}

.f { display: flex; }
.fw { flex-wrap: wrap; }

.f0 { flex: 0; }
.f1 { flex: 1; }
.f2 { flex: 2; }
.f3 { flex: 3; }
.f4 { flex: 4; }
.f5 { flex: 5; }

.fdr { flex-direction: row; }
.fdc { flex-direction: column; }

.fjc { justify-content: center; }
.fjs { justify-content: flex-start; }
.fje { justify-content: flex-end; }
.fjsb { justify-content: space-between; }

.fic { align-items: center; }
.fis { align-items: flex-start; }
.fie { align-items: flex-end; }

.m0 { margin: 0px; }
.m1 { margin: 4px; }
.m2 { margin: 8px; }
.m3 { margin: 16px; }
.m4 { margin: 24px; }
.m5 { margin: 32px; }

.p0 { padding: 0px; }
.p1 { padding: 4px; }
.p2 { padding: 8px; }
.p3 { padding: 16px; }
.p4 { padding: 24px; }
.p5 { padding: 32px; }

.pl0 { padding-left: 0px; }
.pl1 { padding-left: 4px; }
.pl2 { padding-left: 8px; }
.pl3 { padding-left: 16px; }
.pl4 { padding-left: 24px; }
.pl5 { padding-left: 32px; }

.pr0 { padding-right: 0px; }
.pr1 { padding-right: 4px; }
.pr2 { padding-right: 8px; }
.pr3 { padding-right: 16px; }
.pr4 { padding-right: 24px; }
.pr5 { padding-right: 32px; }

.pv1 { padding-top: 4px; padding-bottom: 4px; }
.pv2 { padding-top: 8px; padding-bottom: 8px; }
.pv3 { padding-top: 16px; padding-bottom: 16px; }
.pv4 { padding-top: 24px; padding-bottom: 24px; }
.pv5 { padding-top: 32px; padding-bottom: 32px; }

.ph1 { padding-left: 4px; padding-right: 4px; }
.ph2 { padding-left: 8px; padding-right: 8px; }
.ph3 { padding-left: 16px; padding-right: 16px; }
.ph4 { padding-left: 24px; padding-right: 24px; }
.ph5 { padding-left: 32px; padding-right: 32px; }


.mv1 { margin-top: 4px; margin-bottom: 4px; }
.mv2 { margin-top: 8px; margin-bottom: 8px; }
.mv3 { margin-top: 16px; margin-bottom: 16px; }
.mv4 { margin-top: 24px; margin-bottom: 24px; }
.mv5 { margin-top: 32px; margin-bottom: 32px; }

.mh1 { margin-left: 4px; margin-right: 4px; }
.mh2 { margin-left: 8px; margin-right: 8px; }
.mh3 { margin-left: 16px; margin-right: 16px; }
.mh4 { margin-left: 24px; margin-right: 24px; }
.mh5 { margin-left: 32px; margin-right: 32px; }

.ml1 { margin-left: 4px; }
.ml2 { margin-left: 8px; }
.ml3 { margin-left: 16px; }
.ml4 { margin-left: 24px; }
.ml5 { margin-left: 32px; }

.mb1 { margin-bottom: 4px; }
.mb2 { margin-bottom: 8px; }
.mb3 { margin-bottom: 16px; }
.mb4 { margin-bottom: 24px; }
.mb5 { margin-bottom: 32px; }

.big-box {
  resize: none;
  width: 100%;
}