@font-face {
  font-family: 'Digital-7';
  src: url('fonts/digital-7.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Led dot-matrix';
  src: url('fonts/LED Dot-Matrix.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Scoreboard';
  src: url('fonts/scoreboard.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--size-md);
  color: var(--cacao-dark);
  background-color: var(--sea-dark);
  overflow-x: hidden;
}

* {
  box-shadow: none !important;
}

/* Nunito */
/* <uniquifier>: Use a unique and descriptive class name
   <weight>: Use a value from 200 to 1000 */
.nunito-200 {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.nunito-300 {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
.nunito-400 {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.nunito-600 {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.nunito-800 {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.nunito-1000 {
  font-family: "Nunito", serif;
  font-optical-sizing: auto;
  font-weight: 1000;
  font-style: normal;
}

/* Open sans */
/* <uniquifier>: Use a unique and descriptive class name
   <weight>: Use a value from 300 to 800 */
.open-sans-300 {
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.open-sans-400 {
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.open-sans-600 {
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.open-sans-800 {
  font-family: "Open Sans", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

/* Ubuntu */
.ubuntu-light {
  font-family: "Ubuntu", serif;
  font-weight: 300;
  font-style: normal;
}
.ubuntu-regular {
  font-family: "Ubuntu", serif;
  font-weight: 400;
  font-style: normal;
}
.ubuntu-medium {
  font-family: "Ubuntu", serif;
  font-weight: 500;
  font-style: normal;
}
.ubuntu-bold {
  font-family: "Ubuntu", serif;
  font-weight: 700;
  font-style: normal;
}
.ubuntu-light-italic {
  font-family: "Ubuntu", serif;
  font-weight: 300;
  font-style: italic;
}
.ubuntu-regular-italic {
  font-family: "Ubuntu", serif;
  font-weight: 400;
  font-style: italic;
}
.ubuntu-medium-italic {
  font-family: "Ubuntu", serif;
  font-weight: 500;
  font-style: italic;
}
.ubuntu-bold-italic {
  font-family: "Ubuntu", serif;
  font-weight: 700;
  font-style: italic;
}

:root {
  --apple: #28a745;
  --apple-dark: #149331;
  --apple-light: #6eae7d;
  --hazelnut: #e6e4c3;
  --hazelnut-very-light: rgba(247, 246, 217, 0.5);
  --hazelnut-light: rgba(247, 246, 217);
  --hazelnut-dark: #918f75;
  --mint-light: #d0f2e8;
  --smurf: #81c8df;
  --smurf-dark: #509ab3; /* era #0069d9 */
  --smurf-light: #d7f2fb;
  --air: #e2f2f7;
  --air-dark: #a7d7e6;
  --air-light: #eefbff;
  --cacao: #666;
  --cacao-light: #a8a6a6;
  --cacao-dark: #212529;
  --cacao-old: #6c757d;
  --apricot: #e36903;
  --apricot-dark: #cc5f03;
  --apricot-light: #f0af7a;
  --kiwi: #3dca5e;
  --kiwi-light: #1da63d;
  --peach: #ffc107;
  --peach-dark: #d0a31b;
  --peach-light: #fde088;
  --sea: #1643ab;
  --sea-dark: #282e71;
  --sea-light: #4161ac;
  --disabled: #e9ecef;
  --strawberry: #f9051c;
  --strawberry-light: #ec3c4d;
  --strawberry-dark: #c44528;
  --size-16: 16px;
  --size-20: 20px;
  --size-24: 24px;
  --size-28: 28px;
  --size-32: 32px;
  --size-36: 36px;
  --size-40: 40px;
  --size-xxs: 8px;
  --size-xs: 10px;
  --size-sm: 12px;
  --size-md: 14px;
  --size-lg: 16px;
  --size-xl: 18px;
  --size-xxl: 20px;
  --bg-layer-l: var(--hazelnut-light);
  --bg-layer-xl: var(--cacao-light);
}

ul { list-style: none; }

.blue-light  { color: var(--smurf-dark) !important; }
.green       { color: var(--kiwi) !important; }
.green-light { color: var(--kiwi-light) !important; }
.green-dark  { color: var(--apple-dark) !important; }
.grey-old    { color: var(--cacao-old) !important; }
.orange      { color: var(--peach) !important; }
.orange-dark { color: var(--peach-dark) !important; }
.red         { color: var(--strawberry) !important; }
.red-light   { color: var(--strawberry-light) !important; }

.bg-azur        { background-color: var(--smurf) !important; }
.bg-azur-light  { background-color: var(--air-light) !important; }
.bg-azur-dark   { background-color: var(--smurf-dark) !important; }
.bg-blue        { background-color: var(--sea) !important; }
.bg-blue-light  { background-color: var(--sea-light) !important; }
.bg-blue-dark   { background-color: var(--sea-dark) !important; }
.bg-green       { background-color: var(--kiwi) !important; }
.bg-green-dark  { background-color: var(--apple-dark) !important; }
.bg-grey-old    { background-color: var(--grey-old) !important; }
.bg-orange      { background-color: var(--apricot-light) !important; }
.bg-red         { background-color: var(--strawberry) !important; }
.bg-transparent { background-color: transparent; }

.f-size-10 { font-size: 10px !important; }
.f-size-12 { font-size: 12px !important; }
.f-size-14 { font-size: 14px !important; }
.f-size-16 { font-size: 16px !important; }
.f-size-18 { font-size: 18px !important; }
.f-size-20 { font-size: 20px !important; }
.f-size-24 { font-size: 24px !important; }
.f-size-36 { font-size: 36px !important; }
.f-size-48 { font-size: 48px !important; }
.f-size-60 { font-size: 60px !important; }
.f-weight-400 { font-weight: 400 !important; }
.f-weight-600 { font-weight: 600 !important; }
.f-weight-800 { font-weight: 800 !important; }
.h-16 { height: 16px !important; }
.h-20 { height: 20px !important; }
.h-24 { height: 24px !important; }
.h-28 { height: 28px !important; }
.h-32 { height: 32px !important; }
.h-36 { height: 36px !important; }
.h-40 { height: 40px !important; }
.h-48 { height: 48px !important; }
.h-60 { height: 60px !important; }
.h-80 { height: 80px !important; }
.w-16 { width: 16px !important; }
.w-20 { width: 20px !important; }
.w-24 { width: 24px !important; }
.w-28 { width: 28px !important; }
.w-32 { width: 32px !important; }
.w-36 { width: 36px !important; }
.w-40 { width: 40px !important; }
.w-48 { width: 48px !important; }
.w-60 { width: 60px !important; }
.w-70 { width: 70px !important; }
.w-80 { width: 80px !important; }
.w-90 { width: 90px !important; }
.w-120 { width: 120px !important; }
.w-140 { width: 140px !important; }
.w-160 { width: 160px !important; }
.w-180 { width: 180px !important; }
.w-200 { width: 200px !important; }
.w-240 { width: 240px !important; }
.w-280 { width: 280px !important; }
.w-320 { width: 320px !important; }
.tab-w-35 { width: 35% !important; }
.tab-w-64 { width: 64% !important; }

.form-control {
  font-size: var(--size-md);
}

.bg-basket {
  background-color: #c6c9eb !important;
}

.text-icon {
  color: var(--peach-dark);
}

.text-explain {
  font-style: italic;
  font-weight: 300 !important
}

.text-strike {
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  text-decoration-thickness: 2px;
}

.text-vb {
  color: var(--cacao);
}
.text-vb-important {
  color: var(--cacao-dark);
}

.btn-vb {
  color: var(--cacao);
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 50% !important;
}

.btn-vb:hover {
  color: var(--apricot) !important;
  background-color: var(--air-dark) !important;
}

.btn {
  font-size: var(--size-md);
  cursor: pointer;
}

.btn.disabled, .btn:disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

.btn-circle {
  border-radius: 50%;
}

.btn-icon.disabled, .btn-icon:disabled {
  opacity: .3;
}

.btn-icon {
  width: var(--size-24);
  height: var(--size-24);
  font-size: 16px;
  line-height: 1.5;
  padding: .375rem;
}
.btn-icon > i {
  position: relative;
  top: -6px;
  left: -2px;
}
.btn-icon > i.bi-caret-down-fill {
  top: -5px;
}
.btn-icon > i.bi-globe-europe-africa {
  top: 0;
  left: 0;
}

.btn-group .btn {
  opacity: .7;
  transition: opacity 1s ease;
}
.btn-group .btn:hover {
  opacity: 1;
}
.btn-group .btn-group-last-left {
  border-right: 0 !important;
}
.btn-group .btn-group-last-right {
  border-left: 0 !important;
}

a.btn-add {
  color: var(--apple);
  text-decoration: none;
}

a.btn-link {
  color: var(--cacao);
  text-decoration: none;
}
a.btn-link:focus,
a.btn-link:hover,
a.btn-add:focus,
a.btn-add:hover {
  color: var(--apricot);
  text-decoration: none;
}
a.btn-link.active,
a.btn-link.active:focus,
a.btn-link.active:hover {
  color: var(--apricot-dark);
  background-color: transparent;
  text-decoration: none;
  cursor: pointer;
}

a.btn-link + .dropdown-menu-mobile,
a.btn-link + .dropdown-menu,
div.btn-link + .dropdown-menu-mobile,
div.btn-link + .dropdown-menu {
  background-color: var(--bg-layer-l);
  margin-top: -10px;
}
a.btn-link + .dropdown-menu-mobile > .dropdown-item,
a.btn-link + .dropdown-menu > .dropdown-item,
div.btn-link + .dropdown-menu-mobile > .dropdown-item,
div.btn-link + .dropdown-menu > .dropdown-item {
  background-color: transparent;
}

a.btn-link + .dropdown-menu-mobile {
  display: none;
}
a.btn-link + .dropdown-menu-mobile.show {
  display: block;
}

div.btn-link {
  width: 48px;
  height: 48px;
  position: relative;
  top: 4px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-origin: content-box;
  border-radius: 50%;
  border: 4px solid white;
  transition: all 0.1s linear;
  cursor: pointer;
  display: inline-block;
}
div.btn-link.active {
  border-color: var(--apricot);
  cursor: default;
}
div.btn-link:hover,
div.btn-link.active:hover {
  border-color: var(--apricot-light);
}

.btn-rounded {
  border-radius: 8px;
}

.btn-group-append > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/*.btn-group-append > .btn > i.bi {
  color: #fff;
  font-weight: bold;
}*/

.btn-summon { display: none;}

.btn-sm {
  height: var(--size-32);
  font-size: var(--size-md);
  line-height: var(--size-md);
}

.btn-xsm {
  height: var(--size-24);
  font-size: var(--size-sm);
  line-height: var(--size-sm);
  padding: 4px 6px;
}
.btn-xsm > i {
  position: unset;
}

.btn-group-xsm {
  width: 100px;
}

.btn-group-xsm > .btn {
  height: var(--size-24);
  font-size: var(--size-sm);
  line-height: var(--size-sm);
}

.btn-radio button.btn-success {
  min-width: 100px;
  background-color: #5bd778;
}

.btn-radio button.btn-success.active {
  background-color: var(--apple) !important;
}

.btn-radio button.btn-success:hover,
.btn-radio button.btn-success.active:hover {
  background-color: #218838 !important;
}

.btn-radio-bubble button.btn {
  line-height: 1rem;
  border-radius: 50% !important;
  opacity: .5;
}
.btn-radio-bubble button.btn:hover {
  opacity: 1;
}
.btn-radio-bubble button.btn.active {
  color: white !important;
  background-color: var(--success) !important;
  border-color: var(--success) !important;
  opacity: 1 !important;
}

.btn-outline-basket {
  color: var(--cacao);
  border-color: var(--cacao);
}

.btn-outline-basket:hover {
  color: white;
  background-color: var(--cacao);
}

.dropdown-toggle::after {
  margin-left: .5rem !important;
}

.dropdown-toggle.dropdown-left::after {
  margin-left: 0 !important;
  margin-right: .5rem !important;
  margin-top: 10px !important;
  float: left;
}

.dropdown-menu {
  min-width: 140px;
  z-index: 99;
}

.dropdown-item {
  font-size: var(--size-md);
  padding: 4px 8px;
}
.dropdown-item.sub-toggle {
  margin-left: 8px;
}
.dropdown-item.option {
  padding-left: 24px;
}
.dropdown-item.option.selected {
  color: var(--apple);
}

.btn-group-xsm .dropdown-toggle {
  color: var(--cacao);
  background-color: white;
  border: 1px solid var(--air-dark) !important;
}

.btn-group-xsm.show > .dropdown-toggle,
.btn-group-xsm.show > .dropdown-toggle:hover,
.btn-group-xsm .dropdown-toggle:focus {
  color: var(--apricot);
  background-color: white;
}

.btn-group-xsm .dropdown-menu {
  min-width: 100px;
  z-index: 99;
}

.btn-group-xsm .dropdown-item {
  font-size: var(--size-sm);
  padding: 4px 4px;
}

.modal-header {
  background-color: var(--hazelnut);
}

.modal-title {
  font-size: 1.1rem;
  color: var(--smurf-dark);
  text-transform: uppercase;
}

.modal-body {
  background-color: var(--hazelnut-very-light);
  padding: 8px
}

.modal-choices .btn {
  margin: 0 10px;
}

.vb-btn-dropdown > .btn-group {
  /*width: 140px;*/
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.vb-btn-dropdown > .btn-secondary:disabled,
.vb-calendar > .btn-secondary:disabled,
.vb-field-text > .btn-secondary:disabled {
  color: var(--sea-light);
  background-color: var(--air-dark);
  border: 0;
  border-radius: 0;
  opacity: 1;
}

.vb-calendar > .btn.form-control {
  width: calc(100% - 40px);
  background-color: white;
  border-color: var(--air-dark);
  border-left: 0;
  text-align: left;
  margin-left: -3px;
}

.vb-btn-dropdown .btn-xsm > i.bi,
.vb-calendar .btn-xsm > i.bi {
  font-size: var(--size-md);
}

/*.vb-btn-dropdown .btn-xsm > i.bi {
  position: relative;
  top: -2px;
}*/

.vb-btn-dropdown .dropdown-toggle:hover {
  color: var(--apricot);
}
.vb-btn-dropdown .btn-group-xsm .dropdown-toggle::after {
  top: 10px !important;
}

.vb-btn-dropdown .dropdown-menu {
  width: 100%;
  background-color: var(--cacao);
  padding: 8px 4px;
}

.vb-btn-dropdown .dropdown-menu > .dropdown-item {
  color: white;
  background-color: transparent;
}
.vb-btn-dropdown .dropdown-menu > .dropdown-item:hover {
  color: var(--apricot);
  background-color: transparent;
}

.vb-btn-dropdown.vb-btn-icon > .btn-group {
  width: unset !important;
  border-radius: 50%;
}

.vb-btn-dropdown.vb-btn-icon > .btn-secondary:disabled {
  width: 40px !important;
}

.vb-btn-dropdown.vb-btn-icon.dropdown-toggle::after,
.vb-btn-dropdown.vb-btn-icon .dropdown-toggle::after {
  display: none;
}

.vb-field-date > .input-group-prepend,
.vb-field-date > .input-group-prepend > span,
.vb-field-dropdown > .input-group-prepend,
.vb-field-dropdown > .input-group-prepend > span,
.vb-field-text > .input-group-prepend,
.vb-field-text > .input-group-prepend > span {
  width: 180px;
  border-radius: 0;
}

.vb-field-date > .btn-group,
.vb-field-dropdown > .btn-group {
  width: calc(100% - 180px);
}

.vb-field-date > .btn-group > .form-control,
.vb-field-dropdown > .btn-group > .form-control {
  text-align: left;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.vb-field-date > .btn-group > .form-control + i.input-prefix {
  position: absolute;
  top: 10px;
  right: 10px;
}

.vb-btn-dropdown .btn-group-append > .dropdown-toggle::after,
.vb-btn-dropdown .btn-group-prepend > .dropdown-toggle::after,
.vb-btn-dropdown.dropdown-toggle::after,
.vb-field-dropdown > .btn-group > .dropdown-toggle::after {
  position: absolute;
  top: 15px;
  right: 10px;
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.vb-border-top-blue {
  padding-top: .5rem;
  border-top: 1px solid var(--sea-dark);
  margin-top: 1rem;
}

.vb-content {
  position: relative;
  top: 0;
  left: 50%;
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  overflow-y: auto;
  z-index: 0;
}

.vb-content.vb-tab {
  width: 900px;
  margin-left: -450px;
  background-color: transparent;
  padding: 0;
}
.vb-content.vb-tab > .vb-tab-left,
.vb-content.vb-tab > .vb-tab-right {
  min-height: 600px;
  vertical-align: top;
  padding: 10px;
  display: inline-block;
}
.vb-content.vb-tab > .vb-tab-left {
  width: 55%;
  background-color: var(--air);
}
.vb-content.vb-tab > .vb-tab-right {
  width: 44%;
  background-color: var(--air-light);
}

.vb-content.vb-tab > .vb-tab-left .vb-tab-title,
.vb-content.vb-tab > .vb-tab-right .vb-tab-toolbar {
  height: 36px;
  background-color: transparent;
  text-align: right;
}
.vb-content.vb-tab > .vb-tab-left .vb-tab-title {
  font-size: 20px;
  color: var(--sea-light);
}

.vb-content.vb-tab > .vb-tab-left .vb-tab-title i.bi,
.vb-content.vb-tab > .vb-tab-right .vb-tab-toolbar i.bi {
  font-size: 16px;
}

.vb-content.vb-list {
  width: 1200px;
  margin-top: 1rem;
  margin-left: -600px;
}
.vb-content.vb-list .table {
  font-size: 14px;
}
.vb-content.vb-list .table thead tr th {
  font-weight: 400;
  font-style: italic;
}
.vb-content.vb-list .table thead tr:first-child th {
  border-top: 0;
}
.vb-content.vb-list .table-striped tbody tr {
  color: var(--cacao);
  cursor: pointer;
}
.vb-content.vb-list .table-striped tbody tr:hover {
  color: var(--apricot);
}
.vb-content.vb-list .table-striped tbody tr td {
  white-space: nowrap;
}
.vb-content.vb-list .table-striped tbody tr:nth-of-type(2n+1) {
  /*background-color: rgba(218, 241, 255, 0.5);*/
  background-color: var(--air-light);
}

.vb-content .table-striped tbody tr td {
  padding: .5rem;
}

.vb-content.vb-list .table tr .cell-nr,
.vb-content.vb-list .table tr .cell-roster {
  text-align: center;
}

@media (max-width: 767px) {
  .vb-content {
    position: relative;
    top: 0;
    left: 50%;
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    overflow-y: auto;
    z-index: 0;
  }

  .vb-content.vb-list {
    left: 0;
    width: 640px;
    margin: 0 10px;
  }
}

@media (max-width: 450px) {
  .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto,
  .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto,
  .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto,
  .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto,
  .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    padding-left: 8px;
    padding-right: 8px;
  }

  .vb-content {
    left: 0;
  }

  .vb-content.vb-list {
    left: 0;
    width: 340px;
    margin: 0;
  }

  .vb-content.vb-list h5.vb-title + div {
    text-align: right;
    display: inline-block;
  }

  .vb-content.vb-list .table {
    width: 320px !important;
  }

  .vb-content.vb-list .table thead tr th,
  .vb-content.vb-list .table tbody tr td {
    padding: 4px;
  }

  .vb-content.vb-list .table thead tr th {
    font-size: var(--size-sm);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .vb-content.vb-list .table thead tr th:first-child {
    text-align: center;
  }

  .vb-content.vb-tab {
    width: 340px;
    margin-left: 0;
  }
  .vb-content.vb-tab > .vb-tab-left,
  .vb-content.vb-tab > .vb-tab-right {
    display: block;
  }
  .vb-content.vb-tab > .vb-tab-left,
  .vb-content.vb-tab > .vb-tab-right  {
    width: 100%;
  }

  .vb-content.vb-tab > .vb-tab-left  {
    height: 270px;
    min-height: unset;
    margin-bottom: 20px
  }

  .vb-content.vb-tab > .vb-tab-left .vb-tab-title,
  .vb-content.vb-tab > .vb-tab-right .vb-tab-toolbar {
    height: 36px;
    text-align: right;
  }
  .vb-content.vb-tab > .vb-tab-left .vb-tab-title {
    font-size: 20px;
    color: var(--sea-light);
  }

  .vb-content.vb-tab > .vb-tab-left .vb-tab-title i.bi,
  .vb-content.vb-tab > .vb-tab-right .vb-tab-toolbar i.bi {
    font-size: 16px;
  }

  .vb-content.vb-list {
    left: 0;
    width: 340px;
  }
}

.modal-body .vb-content {
  left: 0;
  background-color: transparent;
  padding: 0;
  margin-left: 0;
}
.modal-body .vb-content > .vb-tab-left,
.modal-body .vb-content > .vb-tab-right {
  vertical-align: top;
  background-color: transparent;
  padding: 10px;
  display: inline-block;
}
.modal-body .vb-content > .vb-tab-left {
  width: 33%;
  border-right: 1px solid var(--hazelnut);
}
.modal-body .vb-content > .vb-tab-right {
  width: 65%;
}

/* Tabella dei report - inizio */
.vb-report tbody tr td {
  height: 32px;
}

.vb-report thead tr th,
.vb-report tfoot tr th {
  font-size: var(--size-sm);
  font-weight: 400 !important;
  color: var(--hazelnut-dark);
  height: 24px;
  padding: 0 5px;
}

.vb-report thead th {
  border-bottom: 1px solid var(--hazelnut);
}

.vb-report tfoot th {
  border-top: 1px solid var(--hazelnut);
}
/* fine Tabella dei report */

/* Menu a discesa - inizio */
.vb-toggle-body {
  display: none;
}
.vb-toggle-body ul.details {
  vertical-align: top;
  display: inline-block;
}
.vb-toggle-body ul.details:not(:first-child) {
  margin-top: .5rem;
}
.vb-toggle-body ul.details > li.option-select-all {
  width: 100%;
  display: table;
}
.vb-toggle-body ul.details > li:not(.vb-title) {
  height: 1.8rem;
}
.vb-toggle-body ul.details > li a.btn-text.btn-link {
  padding-left: 0;
}
.vb-toggle-body ul.details > li a.btn-text.btn-link.active {
  color: var(--apple-dark) !important;
}

.vb-toggle-btn {
  display: flex;
  align-items: center;
  width: 100%;
}

.vb-toggle-btn .vb-toggle-icon {
  margin-left: auto;
  font-size: var(--size-sm);
}
/* fine Menu a discesa */

/* Blocco titolo + toolbar - inizio */
/*          VB TOOLBAR CORE         */
.vb-toolbar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--air-dark);
  margin-bottom: .5rem;
}

.vb-toolbar__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vb-toolbar__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
}
.vb-toolbar__title h5 {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.vb-toolbar__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto;
}

/*.vb-toolbar__filters {
  display: none;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}*/
.vb-toolbar__filters {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  padding-top: .5rem;
  border-top: 1px solid var(--air-dark);
}
.vb-toolbar__filters-inner {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.vb-toolbar__section-label {
  font-size: (--size-xl);
  font-weight: 500;
  color: var(--sea);
  margin-left: .5rem;
}

/* MOBILE BREAKPOINT */
@media (max-width: 767px) {
  .vb-toolbar__main {
    flex-wrap: wrap;
    gap: .75rem;
  }

  /*.vb-toolbar__title {
    flex: 1 1 100%;
  }

  .vb-toolbar__actions {
    justify-content: flex-end;
    width: 100%;
  }

  .vb-toolbar__title {
    flex: 1 1 auto;
    min-width: 0;
  }*/
  .vb-toolbar__actions {
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .vb-toolbar__filters {
    flex-direction: column;
    align-items: stretch;
  }
}
/* fine Blocco titolo + toolbar */

.form-navbar {
  height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
  background-color: var(--air);
  margin: 0 0 20px 0;
}

.vb-title {
  color: var(--sea-light);
}
.vb-title > i {
  font-size: var(--size-lg);
}
h4.vb-title {
  font-size: var(--size-24);
}
h5.vb-title {
  font-size: var(--size-20);
}
h6.vb-title {
  font-size: var(--size-lg);
}

/*.vb-tab {
  position: relative;
  top: 0;
  left: 50%;
  padding: 10px;
  border-radius: 4px;
  margin-left: -450px;
  z-index: 0;
  width: 900px;
  background-color: rgba(247, 246, 217, 0.5);
}*/

.vb-free {
  position: absolute;
  padding: 5px;
  display: none;
  z-index: 99;
}

.vb-menu {
  margin-right: 10px;
  display: none;
}

.vb-menu .btn-group {
  margin-right: 10px;
}

.vb-file-add,
.vb-image {
  height: 240px;
  width: 240px;
  min-width: 200px;
  margin: 10px auto;
}

.vb-file-add {
  color: var(--cacao-light);
  border: 4px dashed var(--cacao-light);
  cursor: copy;
}
.vb-file-add:hover {
  color: var(--apricot-dark);
  border-color: var(--apricot-dark);
}
.vb-file-add > svg.bi {
  width: 30%;
  height: 30%;
  margin-top: 35%;
  display: none;
}

.vb-image {
  padding: 15px;
  background-color: var(--strawberry-dark);
  border: 2px solid white;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}

.vb-image > img {
  object-fit: cover;
  border: 2px solid var(--cacao);
  border-radius: 2px;
}

.vb-notes {
  width: 100%;
  height: 200px;
    color: var(--sea-light);
  padding-top: var(--size-xxs);
  border-top: 1px solid var(--sea-light);
  margin-top: var(--size-xxl);
}

.vb-notes-title > span {
  font-size: var(--size-lg);
}

.vb-notes-list {
  width: 100%;
  height: 100%;
  padding: var(--size-xxs);
}
.vb-notes-list ul {
  padding-left: 10px;
}
.vb-notes-list ul li {
  font-size: var(--size-lg);
}
.vb-notes-list ul li a > span:first-child {
  font-size: 75%;
}

.carousel-bg {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 450px) {
  .table-striped tbody tr > td.cell-when {
    width: 180px;
    text-align: center;
  }
}

@media (max-width: 450px) {
  .vb-title > i {
    font-size: var(--size-md);
  }
  h4.vb-title {
    font-size: var(--size-20);
  }
  h5.vb-title {
    font-size: var(--size-xl);
  }
  h6.vb-title {
    font-size: var(--size-md);
  }
}

.box-image {
  max-height: 320px;
  text-align: center;
  vertical-align: middle;
}

.dragging {
  opacity: .7;
}

.list-attachment {
  padding-left: 0;
}

.color-sea {
  color: var(--sea-light); !important
}

.label-province {
  color: var(--cacao);
  font-size: var(--size-md);
  padding-top: 5px;
  cursor: pointer;
}
.label-province:hover {
  color: var(--apricot-dark);
}

.label-town {
  font-size: var(--size-sm);
  font-style: italic;
  text-align: center;
  padding-top: 3px;
}

.underlined {
  border-bottom: 1px solid var(--sea-light); !important
}

.icon-for-text {
  color: var(--sea-light);
  margin-right: 4px;
}

.nickname-light {
  font-style: italic;
  font-weight: 300;
}

.clickable {
	cursor: pointer;
}
.clickable:hover {
	color: var(--apricot);
}

/* Form su 2 colonne */
/* inizio */
.form-data,
.form-label {
  list-style: none;
  display: inline-block;
}
.form-data {
  min-width: 300px;
  width: calc(100% - 10px);
  padding-left: 20px;
}
.form-label {
  text-align: right;
  padding-left: 0;
  padding-right: 20px;
}

.form-data > li,
.form-label > li {
  height: var(--size-32) !important;
  padding: 0;
  margin-bottom: 16px;
}
.form-data.hidden > li:not(.form-title),
.form-label.hidden > li:not(.form-title) {
  display: none;
}
.form-data > li.form-title,
.form-label > li.form-title {
  color: var(--cacao);
  font-size: var(--size-md);
  padding-top: 5px;
  cursor: pointer;
}
.form-data > li.form-title:hover,
.form-label > li.form-title:hover {
  color: var(--apricot-dark);
}
.form-label:not(:first-child) > li.form-title {
  border-top: 1px solid var(--sea-light);
}

.form-data li.btn-boolean,
.vb-date > a.form-control, .vb-date > input.form-control,
.vb-dropdown > a.form-control, .vb-dropdown > input.form-control, .vb-dropdown > a.dropdown-item:hover,
.vb-text > a.form-control, .vb-text > input.form-control {
  color: var(--cacao);
  text-align: left;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}
.form-data li.btn-boolean:hover,
.vb-date > a.form-control:hover, .vb-date > input.form-control:hover,
.vb-dropdown > a.form-control:hover, .vb-dropdown > input.form-control:hover, .vb-dropdown > a.dropdown-item:hover,
.vb-text > a.form-control:hover, .vb-text > input.form-control:hover {
  color: var(--apricot-light);
  background-color: white;
}
.form-data li.btn-boolean:focus,
.vb-date > a.form-control:focus, .vb-date > input.form-control:focus.
.vb-dropdown > a.form-control:focus, .vb-dropdown > input.form-control:focus,
.vb-text > a.form-control:focus, .vb-text > input.form-control:focus {
  color: var(--cacao);
  background-color: white;
}

.vb-date:hover > input.form-control::placeholder {
  color: var(--apricot-light);
}

.vb-dropdown > button.dropdown-toggle::after {
  float: right;
  margin-top: .5rem;
  margin-left: 0 !important;
}

.vb-dropdown > div.dropdown-menu {
  width: 100%;
}

.vb-dropdown a.dropdown-item:hover {
  background-color: transparent;
}

.vb-dropdown a.dropdown-item.active > i {
  float: right;
  margin-top: 3px;
}

.vb-color {
  background-color: transparent;
  cursor: pointer;
}
.vb-color:hover {
  background-color: white;
}

.vb-boolean {
  color: var(--cacao);
  background-color: transparent;
  border: none;
}
.vb-boolean:focus,
.vb-boolean:hover {
  color: var(--apricot);
  background-color: transparent !important;
}
.vb-boolean > .vb-boolean-on,
.vb-boolean > .vb-boolean-off {
  display: none;
}

.vb-time-hhmm > sup {
  font-size: var(--size-xs);
  top: -.3em;
  left: .1em;
  margin-right: .2em;
}

.vb-badge {
  font-size: 18px;
  color: var(--cacao);
  padding: 0;
}

.vb-badge:hover {
  color: var(--apricot);
}

.vb-badge span {
  position: relative;
  top: -12px;
  left: 27px;
  font-size: 10px;
  width: 16px;
  height: 16px;
  line-height: unset;
  padding: 0;
  transition: background-color 1s ease;
  border-radius: 8px;
  display: inline-block;
}

.badge-update {
  background-color: white;
  color: var(--apple);
  border: 2px solid var(--apple);
}

.mobile-label {
  display: none;
}

.mandatory-param {
  border-left: 2px solid var(--apple-light);
}
/* fine */

tr.game-row.text-success > td.game-toolbar button.btn-icon {
  visibility: hidden;
}

/* inizio: SIDEBAR */
.sidebar {
  width: 300px !important;
  position: absolute;
  top: 60px;
  font-size: 14px;
  background-color: var(--bg-layer-l);
  padding: 15px;
}
.sidebar.left {
  left: -300px;
}
.sidebar.right {
  right: -300px;
}

.sidebar h5 {
  font-size: 16px;
  color: var(--sea-light);
}

.sidebar-sticky h6 {
  width: calc(100% - 20px);
  display: inline-block;
}

.sidebar div.nav-item,
.sidebar li.nav-item {
  width: 100%;
  padding: 5px 0;
}

.sidebar li.nav-item {
  border-top: 1px solid var(--air-dark);
}

.sidebar li.nav-item .btn {
  font-size: 14px;
}

.sidebar .form-label {
  width: 100px;
  vertical-align: top;
  padding-right: 10px;
}

.sidebar .form-data {
  max-width: 240px;
  min-width: unset;
  vertical-align: top;
  padding-left: 10px;
}

.sidebar .form-data ul {
  list-style: none;
  padding-left: 0;
}

.sidebar .form-data .dropdown-toggle {
  min-width: 120px;
}

.sidebar .form-data i.bi {
  font-size: 16px;
  margin-right: 5px;
}
#sidebar_config {
  display: none;
}

@media (max-width: 450px) {
  .sidebar {
    width: 200px !important;
    padding: 10px;
  }
  .sidebar.left {
    left: -200px;
  }
  .sidebar.right {
    right: -200px;
  }
}
/* fine: SIDEBAR */

/* inizio: MARKER ACCOUNT */
.role-assistant,
.role-coach,
.role-player,
.role-staff {
  width: var(--size-24);
  height: var(--size-24);
  font-size: var(--size-sm);
  text-align: center;
  vertical-align: middle;
  color: var(--smurf-dark);
  background-color: white;
  border: 2px solid var(--smurf-light);
  display: inline-block;
}

.role-player {
  font-size: var(--size-md);
  border-radius: 50%;
}
/* fine: MARKER ACCOUNT */

/* inizio: COLORED PILL */
.colored-pill {
  width: 60px;
  height: 40px;
  color: white;
  text-align: center;
  line-height: 1rem;
  padding: .25rem;
  border-radius: 50rem;
}
.colored-pill div:first-child { font-size: var(--size-lg); font-weight: 600}
.colored-pill div:last-child  { font-size: var(--size-xs); }
/* fine: COLORED PILL */

/* inizio: LIST OF ITEM and MODAL */
ul.vb-object-list {
  padding-left: 10px;
}

ul.vb-object-list > li.vb-object-item {
  color: var(--cacao);
  height: 21px;
}

li.list-of-1 {
  height: 45px !important;
}
li.list-of-2 {
  height: 66px !important;
}
li.list-of-3 {
  height: 87px !important;
}
li.list-of-4 {
  height: 108px !important;
}
li.list-of-5 {
  height: 129px !important;
}

table.vb-object-table {
  margin: 0 auto;
}

table.vb-object-table tr > td:first-child {
  min-width: 200px;
}

table.vb-object-table td i.boolean {
  color: var(--cacao);
}
table.vb-object-table td i.boolean:hover {
  color: var(--apricot);
}
/* fine: LIST OF ITEM and MODAL */

/* inizio: LIST OF FIELD by PROVINCE and TOWN */
div.group-province {
  padding: 0 10px;
  border-bottom: 1px solid var(--hazelnut);
}
div.group-province:last-child {
  border-bottom: 0;
}

ul.group-town {
  list-style: none;
  padding-left: 10px;
}

ul.group-town .label-town {
  color: var(--hazelnut-dark);
}
/* fine: LIST OF ITEM and MODAL */

/* Effetto ATTESA DIALOGO COL SERVER */
/* inizio */
/* Effetto di transizione per l'opacità */
/* Effetto pulsante blu sul bordo */
@keyframes pulse-border {
  0% {
    border-color: blue;
  }
  50% {
    border-color: lightblue;
  }
  100% {
    border-color: blue;
  }
}
.waiting-time {
  transition: opacity 0.5s ease;
  opacity: 0.4;
  animation: pulse-border 1s infinite;
  border-style: solid;
  border-width: 2px;
}
/* fine Effetto ATTESA DIALOGO COL SERVER */

/* Effetto SCALE SU DE/SELEZIONE CARD */
/* inizio */
@keyframes scale-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.scale-bounce {
  animation: scale-bounce 0.25s ease-out;
}
/* fine Effetto SCALE SU DE/SELEZIONE CARD */

/* Effetto PULSANTE CON ICONA PULSANTE */
/* inizio */
.pulse-icon {
  animation: pulseBlink 0.8s ease-in-out 2;
  font-size: 1.4em;
}

@keyframes pulseBlink {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}
/* fine Effetto PULSANTE CON ICONA PULSANTE */

/* Effetto BOUNCE */
/* inizio */
@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.action-bounce {
  animation: bounce 0.5s ease;
}
/* fine Effetto BOUNCE */

/* Effetto LAMPEGGIO */
/* inizio */
.blink {
  animation: blink-timer 0.6s linear infinite;
}

@keyframes blink-timer {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}
/* fine Effetto LAMPEGGIO */

/************************/

/* Classi solo Tablet */
/* inizio        */
@media (min-width: 768px and max-width: 1199px) {}
/* fine          */
/* Classi solo Tablet */

/* Classi solo Mobile */
/* inizio        */
@media (max-width: 767px) {
  body {
    font-size: var(--size-sm);
  }

  .form-navbar {
    margin: 0 0 10px 0;
  }
}

@media (max-width: 450px) {
  .vb-image {
    height: 180px;
    width: 180px;
    min-width: 160px;
    margin: 10px auto;
    padding: 10px;
  }

  .form-data > li.mobile-label {
    height: var(--size-24) !important;
    padding: 0;
    margin-bottom: 0;
    display: block;
  }

  .form-navbar {
    height: unset;
  }
}
/* fine          */
/* Classi solo Mobile */

/* inizio: immagine principale di account e club */
.main-image {
  width: 24px;
  height: 24px;
  text-align: center;
  white-space: nowrap;
  margin: 4px;
  overflow: hidden;
  border: 1px solid var(--air);
  border-radius: 50%;
  display: inline-block;
}

.main-image > .img-fluid {
  object-fit: cover; /* Mantiene le proporzioni dell'immagine e riempie il div */
}

/* logo club fatto con i 2 colori societari */
.main-image > div {
  width: 12px;
  height: 24px;
  margin: 0;
  display: inline-block;
}
.main-image > div:first-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.main-image > div:last-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.main-image + span {
  position: relative;
  bottom: 8px;
  left: 8px;
  display: inline-block;
}

.logo-placeholder-team {
  width: 80px;
  height: 80px;
  color: var(--sea-light);
  border-radius: 50%;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 450px) {
  .main-image {
    width: 20px;
    height: 20px;
    margin: 2px 4px 2px 0;
  }
}
/* fine: immagine principale */