:root {
  --js-lila: rgb(170, 0, 170);
  --js-dark-lila: rgb(134, 0, 134);
  --js-pink: rgb(255, 0, 179);
  --js-dark-pink: rgb(214, 0, 150);
  --js-box-shadow-lila: rgba(185, 13, 253, 0.25);
  --js-box-shadow-pink: rgba(253, 13, 193, 0.25);
}

.dark {
  background-color: #2b2f32;
  color: #fff!important;
}
body.light {
  background-color: #fff;
  background-image: linear-gradient(#fff, rgb(207, 148, 207));
  color: #212529;
  background-attachment: fixed;
}

.container {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.info {
  padding: 1rem;
  margin: 1rem;
}

body.light .info {
  border: 1px solid var(--js-lila);
}

@media (min-width: 992px) {
  .table {
    width: 65%;
  }
  .info {
    width: 65%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
  }
  .row>img {
    width: 120px;
  }
  #button-row {
    display: flex;
    flex-direction: row;
  }
  #calculate {
    margin-right: .25rem;
  }
}

@media (max-width: 992px) {
  .col-4 {
    width: 50%;
  }
  .row>img {
    width: 110px;
  }
}
@media (max-width: 768px) {
  .forms {
    display: flex;
    flex-direction: column;
  }
  .col-4 {
    width: 100%;
  }
}
@media (max-width: 590px) {
  .info {
    width: 80%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin: 1rem auto;
  }
  .col-6 {
    max-width: 70%;
  }
  .table {
    font-size: small;
  }
  #tulos>img {
    width: 50%;
  }
}

@media (max-width: 344px) {
  #button-row {
    display: flex;
    flex-direction: column;
    justify-content: end;
  }
  #calculate {
    margin-bottom: .25rem;
  }
}

.text-align-center {
  text-align: center;
}

.js_card {
  padding: 2rem;
  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), 0 4px 20px 0 rgba(0,0,0,0.19);
  border-radius: .25rem;
}

body.dark .form-control {
  background-color: var(--bs-gray-500);
}

body.light .form-control:focus {
  border-color: var(--js-lila);
  box-shadow: 0 0 0 0.25rem var(--js-box-shadow-lila);
}
body.dark .form-control:focus {
  border-color: var(--js-pink);
  box-shadow: 0 0 0 0.25rem var(--js-box-shadow-pink)
}

body.light .form-check .form-check-input:focus {
  border-color: var(--js-lila);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--js-box-shadow-lila);
}
body.dark .form-check .form-check-input:focus {
  border-color: var(--js-pink);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--js-box-shadow-pink);
}

body.light .form-check .form-check-input:checked {
  background-color: var(--js-lila);
  border: 1px solid var(--js-dark-lila);
}
body.dark .form-check .form-check-input:checked {
  background-color: var(--js-pink);
  border: 1px solid var(--js-dark-pink);
}

body.light .form-check-input:focus {
  border-color: var(--js-lila);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--js-box-shadow-lila);
}
body.dark .form-check-input:focus {
  border-color: var(--js-pink);
  outline: 0;
  box-shadow: 0 0 0 0.25rem var(--js-box-shadow-pink);
}

body.light .form-check-input:checked {
  background-color: var(--js-lila);
  border: 1px solid var(--js-dark-lila);
}
body.dark .form-check-input:checked {
  background-color: var(--js-pink);
  border: 1px solid var(--js-dark-pink);
}

body.light .btn-primary {
  background-color: var(--js-lila);
  border-color: var(--js-dark-lila);
  color: #fff;
}
body.light .btn-primary:hover {
  background-color: var(--js-dark-lila);
  color: #fff;
}
body.dark .btn-primary {
  background-color: var(--js-pink);
  border-color: var(--js-dark-pink);
}
body.dark .btn-primary:hover {
  background-color: var(--js-dark-pink);
}

.btn-reset {
  background-color: red;
  border-color: rgba(194, 0, 0, 0.788)
}
.btn-reset:hover {
  background-color: rgb(178, 0, 0);
  color: #fff;
}

#tulos {
  margin-top: 2rem;
}

body.light .table>thead>tr>* {
  background-color: var(--js-lila)!important;
  color: #fff!important;
}

body.dark table {
  --bs-table-bg: #ced4da!important;
  border-color: var(--bs-gray-500)!important;
}
body.dark .table>thead>tr>* {
  background-color: var(--js-pink)!important;
}
body.dark .table-group-divider {
  color: black!important;
}