:root {
  --fb-font-size: 12px;
}

.confirm-modal-container *:focus {
  outline: none;
}

::-webkit-scrollbar {
  height: 10px;
  width: 10px;
  background: #eee;
}

::-webkit-scrollbar-thumb {
  background: #bbb;
}

.fb-select .dropdown-content li {
  background-color: var(--fb-select-accent, #fff) !important;
  color: var(--fb-select-main, #0369a1) !important;
}

.fb-select .dropdown-content li > span {
  color: inherit !important;
}

.fb-select .dropdown-content li:hover,
.fb-select .dropdown-content li.active {
  background-color: var(--fb-select-main, #0369a1) !important;
  color: var(--fb-select-accent, #fff) !important;
}

@media (-webkit-min-device-pixel-ratio: 1.3) {
  body.zoom-enabled {
    zoom: 0.8;
  }
}

@media (-webkit-min-device-pixel-ratio: 1.6) {
  body.zoom-enabled {
    zoom: 0.65;
  }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body.zoom-enabled {
    zoom: 1;
  }
}

.fb-icon-hover:hover {
  background-color: #00000033;
  border-radius: 9999px;
}

/* INSERISCO I CSS CHE DEVONO ESSERE IN TUTTE LE PAGINE HTML, QUINDI VERRA' AGGIUNTO IN BASE.HTML */
.browser-default.md-form.md-outline.colorful-select.customBrowserDefault {
  max-width: 100%;
  padding-inline: 0.25rem;
  padding-block: 0.25rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  outline: none;
  color: #1f2937;
}

/* Chrome, Safari, Edge, Opera */
#id_otp::-webkit-outer-spin-button,
#id_otp::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fm-animate-card:hover {
  background-color: #bae6fd !important;
  transition: background-color ease-out 250ms;
}

/* Firefox */
#id_otp {
  -moz-appearance: textfield;
}

.bootstrap.popover.popover-default .popover-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: bold;
  padding: 0.25rem 0.5rem;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.popover-title span {
  margin-top: 0 !important;
}

.fm-animate-card:hover {
  background-color: #bae6fd !important;
  transition: background-color ease-out 250ms;
}

label.invalid {
  /* !IMPORTANTE: altrimenti error label si sposta troppo vicino all'elemento sottostante */
  transform: none !important;
}

/* necessario, altrimenti testo data-error / success di login è troppo vicino all'input */
.bootstrap .md-form input:not([type]).form-control-sm.invalid + label:after,
.bootstrap
  .md-form
  input:not([type]).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="date"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="date"]:not(.browser-default).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="datetime-local"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="datetime-local"]:not(
    .browser-default
  ).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="datetime"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="datetime"]:not(.browser-default).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="email"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="email"]:not(.browser-default).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="number"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="number"]:not(.browser-default).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="password"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="password"]:not(.browser-default).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="search-md"].form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="search-md"].form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="search"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="search"]:not(.browser-default).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="tel"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="tel"]:not(.browser-default).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="text"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="text"]:not(.browser-default).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="time"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="time"]:not(.browser-default).form-control-sm:focus.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="url"]:not(.browser-default).form-control-sm.invalid
  + label:after,
.bootstrap
  .md-form
  input[type="url"]:not(.browser-default).form-control-sm:focus.invalid
  + label:after,
.bootstrap .md-form textarea.md-textarea.form-control-sm.invalid + label:after,
.bootstrap
  .md-form
  textarea.md-textarea.form-control-sm:focus.invalid
  + label:after {
  top: 3.8rem !important;
}

.bootstrap .md-form.form-sm .prefix ~ .form-text,
.bootstrap .md-form.form-sm .prefix ~ label {
  /* necessario, altrimenti testo data-error / success di login è troppo vicino all'input */
  top: 0.2rem !important;
}

/* overflow: hidden causa problemi su safari (sidebar non viene mostrata) */
.bootstrap .side-nav {
  overflow: unset !important;
}

.bootstrap #slide-out.side-nav {
  background-image: url("../img/loghiPlurimix/sidenav6.jpg");
}

#optionsSidebarLi .dropdown-menu.show {
  display: grid;
  /* se ripristini marign-top, decommenta document.getElementById("slide-out").style.marginTop = (headerHeight - 1) +'px'; in baseFunction */
  /* margin-top: 49px !important; */
  top: unset !important;
  transform: unset !important;
}

#optionsSidebarLi .dropdown-menu.show .dropdown-menu.show {
  background-color: #5795ff;
  transform: translate3d(79px, 48px, 0px) !important;
}

#customScrollbarSideout {
  /* altrimenti non funziona correttamente overflow */
  /* height: calc(100% - 49px) !important; */
  height: 100% !important;
}

#slide-out {
  /* 100 - margin top */
  /* height: calc(100% - 49px); */
  height: 100%;
  /* width si adatta a content (username può essere molto lungo) */
  width: max-content;
  /* fino ad un certo punto, dopodiche necessario overflow */
  max-width: 19rem;
}

.bootstrap #slide-out.side-nav a {
  /* altrimenti ha dimensione e padding differente */
  font-size: 0.95rem !important;
  padding: 0.3rem !important;
  padding-left: 0.6rem !important;
  height: 48px !important;
  line-height: 48px !important;
}

.customHideElem {
  display: none !important;
}

/******* 
 * Menu (navbar, menù) 
 */

.nav-item.active {
  background-color: #5795ff;
}

/* altrimenti da mobile sono troppo vicini */
.nav-item {
  margin: 2px;
}

.nav-item:hover,
.subLiItem.active {
  background-color: #3569c3 !important;
}

/* senza questo hover sbiadisce color text */
.nav-link {
  color: white !important;
}

/* .nav-item.multi-level-dropdown:hover {
  background-color: #9dc1fd !important;
} */

#mainNavbarHtml {
  min-height: 50px;
  /* se fissi height, quando toggle shown potrebbe non essere alta abbastanza da contenerlo! */
  align-content: center;
  padding: 0px 8px;
}

@media (max-width: 1100px) {
  #mainNavbarHtml .nav-link {
    padding-right: 0.1rem;
    padding-left: 0.1rem;
  }
}

.navbar-brand {
  height: inherit;
  font-size: 0px;
  display: flex;
}

.navbar-brand .navbar-logo {
  align-self: center;
  height: 3.5vh;
  min-height: 48px;
  vertical-align: middle;
}

.navbarUsername {
  display: inline-block;
}

@media only screen and (max-width: 700px) {
  .navbar-brand .navbar-logo {
    height: 3vh;
    min-height: 40px;
  }

  .navbarUsername {
    display: none;
  }
}

.navbar-toggler {
  height: inherit;
  vertical-align: middle;
  display: contents;
  height: fit-content;
}

.navbar-toggler .navbar-toggler-icon {
  height: 90%;
  min-height: 30px;
}

.navbar-collapse {
  line-height: normal;
}

.dropbtn {
  background-color: rgb(124, 191, 247);
  color: black;
  padding: 10px;
  font-size: 12px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #2980b9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  /* background-color: white; */
  /* min-width: 201px; */
  overflow: auto;
  /* box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.2); */
  z-index: 1;
}

.dropdown-item {
  display: flex;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* .dropdown a:hover {background-color: #ddd;} */

/* .show {display: block;} */

/* altrimenti in navbrar causa problemi grafici */
.hasToBeInlineBlock .show {
  display: inline-block;
}

.circleAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 20px;
  font-family: roboto, arial;
  color: white;
  line-height: 40px;
  text-align: center;
  background: #00ccef;
  display: inline-block;
  margin: auto;
}

/* 
 * fine menu 
 *******/

/******* 
 * form di login 
 */

.loginCardCust {
  /* gestisco larghezza card */
  min-width: 20rem;
  width: 100%;
  max-width: 30rem;
}

@media only screen and (max-width: 1000px) {
  .loginCardCust .card-body {
    padding: 1rem;
  }
}

.custModalCTabs .nav-link {
  /* gestisco padding dei tabs (login e register) */
  padding: 0.5rem !important;
}

/* mostro loginInfiniteLoading solo se login ha successo (aggiungendo class) */
.loginInfiniteLoading:not(.shown) {
  display: none;
}

/*
 * fine login
 ********/

/********
 * vari elementi html
 */

.max44WidthElement {
  width: 100%;
  max-width: 44rem;
  min-width: 19rem;
  height: inherit;
}

/* spinner in btn quando premuto in attesa di esecuzione function; mostrato solo dopo click */
.spanCustomSpinner {
  margin-right: 3px;
  display: none;
}

button.disabledForSpinner .spanCustomSpinner {
  display: inline-block;
}

div.customPopoverInfo {
  display: inline-block;
  color: var(--infoColor);
  margin: auto; /* centrato verticalmente */
  margin-left: 2px; /* spaziatura da testo */
}

/*
 * fine vari elementi html
 ********/