/* vuejs cloak  */

[v-cloak] {
  display: none !important;
}

.d-none,
.hidden {
  display: none;
}

:disabled,
.disabled {
  cursor: not-allowed !important;
  pointer-events: all !important;
}

/* home */

#banner {
  background-image: url(/static/main/img/banner.jpg);
  background-size: cover;
  min-height: 450px;
  max-height: 500px;
  position: relative;
  padding-top: 75px;
  padding-bottom: 20px;
  opacity: 0.95;
}

#banner h3,
#banner h2,
#banner h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

.bg-mensili {
  background: antiquewhite;
}

.bg-giornalieri {
  background: aliceblue;
}

/* dark theme  */

@media (prefers-color-scheme: dark) {

  body {
    color: white !important;
    background: #181818 !important;
    background-color: #181818 !important;
  }

  #sidebar .card,
  #sidebar .card-body,
  .card-body.bg-white,
  .bg-primary,
  .bg-light {
    color: white !important;
    background: #202020 !important;
    background-color: #202020 !important;
  }

  .table-hover>tbody>tr:hover>* {
    background-color: #cdc9c914;
    background: #cdc9c914;
    color: white;
  }

  .table-striped>tbody>tr:nth-of-type(odd)>* {
    background-color: #cdc9c914;
    color: #c7c4c4 !important;
    fill: #c7c4c4 !important;
  }

  .modal-content,
  .list-group-item {
    background-color: #484848;
    color: white;
  }

  .list-group-item .text-black {
    color: white !important;
  }

  .table,
  .legend,
  .tick,
  .navbar-brand,
  .text-dark,
  .nav-link {
    color: white !important;
    fill: white !important;
  }

  .card,
  .nav-tabs .nav-link.active {
    background-color: #181818;
    border: 1px solid white;
  }

  text {
    fill: white;
  }

  .focus-tooltip text {
    fill: #0E0E0E;
  }

  .shouldcost-chart .label,
  .pricedata-chart .label {
    fill: white !important;

  }

  .shouldcost-chart .axis line,
  .pricedata-chart .axis line {
    stroke: white !important;
  }

  .form-control:invalid,
  .form-control:active,
  .form-control:hover,
  .form-control:valid,
  .form-control:focus,
  .form-select,
  .form-control {
    background: black;
    background-color: black;
    color: white !important;
  }

  .bg-giornalieri,
  .bg-mensili {
    background-color: #484848;
    background: 0088ff;
  }

  .btn-outline-dark,
  .btn-outline-primary {
    color: white;
    border-color: white;
  }

  .vue-treeselect,
  .v-select {
    color: black;
    background-color: white;
  }

}