/*----------------------------*/
/*----- GLOBAL / GENERAL -----*/
/*----------------------------*/

body {
  background: #212121;
  font-family: "Inter", sans-serif;
}

.no-active-menu-style {
  background-color: #242934 !important;
  color: white !important;
}

.no-active-menu-style:hover {
  background-color: #6F8199 !important;
}

.fas.fa-angle-left.right {
  display: none;
}

.content-wrapper{
  background-color: #ECF0F5;
}

.brand-link{
  border-bottom: none !important;
}

.inter-font-family{
  font-family: "Inter", sans-serif;
}

h1{
  font-weight: 700;
  font-size: 24px;
  line-height: 28px;
}

.text-14{
  font-size:14px;
}

.h1-switch{
  font-family: Inter;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #242934;
}

.h1-switch-home{
  font-family: Inter;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #242934;
}

.h4-switch-home
{
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #242934;
}

.h5-switch-home{
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #47576C;
}

.h5-switch{
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #47576C;
}

.h5-switch-card{
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #242934;
}

.h5-switch-card-home{
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: #242934;
}

.p-switch{
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #47576C;
}

.p-switch-home{
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: #47576C;
}

.am-text{
  font-family: Inter;
  font-size: 11.4px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}


#maRealization{
  z-index: 1;
}

#maRealization img{
  width: 16px;
}

.sticky-tab-top-bar{
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: sticky;
  top: 57.08px;
  z-index:1036;
  background-color: white;
  min-height: 60px;
}

.sidebar {
  color: #fff;
}

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

.card-custom {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-box-shadow: ;
  --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: 3px;
}

/*
.card-header{
  background-color: transparent;
}
.card-body{
  background-color: transparent;
}
.card-footer{
  background-color: transparent;
}
*/
.card.imgDownload{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.card-switch{
  background: transparent;
  border: none;
  box-shadow: none;
  margin-bottom: 0;
}

.card-switch .card-body{
  background: #fafafc;
  padding: 24px;
  border-radius: 8px;
}

.card-expert{
  border: none;
  border-radius: none;
  box-shadow: none;
  width: 300px;
  background-color: transparent;
}

.card-background-level {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.icon-collapse.down {
  cursor: pointer;
  opacity: 0.5;
}

/*---------------------------*/
/*---- BUTTON ANIMATIONS ----*/
/*---------------------------*/

.animated-button {
  cursor: pointer;
  transition: all 0.7s;
}

.click-slide {
  transition: transform 0.7s;
}

.click-slide:active {
  transform: translateX(20px);
}

/*----------------------*/
/*---- LOADER MODAL ----*/
/*----------------------*/

#loadingModal .modal-content {
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

.custom-loader {
  width: 100px;
  height: 100px;
  display: grid;
}

.custom-loader::before,
.custom-loader::after {
  content: "";
  grid-area: 1/1;
  --c: radial-gradient(farthest-side, #37D49E 92%, #0000);
  background:
    var(--c) 50% 0,
    var(--c) 50% 100%,
    var(--c) 100% 50%,
    var(--c) 0 50%;
  background-size: 24px 24px;
  background-repeat: no-repeat;
  animation: s2 1s infinite;
}

.custom-loader::before {
  margin: 8px;
  filter: hue-rotate(45deg);
  background-size: 16px 16px;
  animation-timing-function: linear
}

@keyframes s2 {
  100% {
    transform: rotate(.5turn)
  }
}

/*----------------------------*/
/*---- GENERAL FORM STYLE ----*/
/*----------------------------*/

.form-label,
.form-control-label {
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
  min-width: 100px !important;
}

.select2-selection {
  height: 40px !important;
  border-color: #9EADBA !important;
}

.select2-container--bootstrap4 .select2-selection--single {
  height: 38px !important;
}

/*-------------------------------*/
/*----- GOOGLE MAPS ELEMENT -----*/
/*-------------------------------*/

.gmnoprint {
  display: none;
}

/*-----------------------------------*/
/*----- COMPONENT CARD EXPANDER -----*/
/*-----------------------------------*/

/* .card-component-custom{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-component-custom .card-body{
  max-height: min-content;
  height: fit-content;
} */

/*------------------------------------------*/
/*----- MOBILE BACKGROUND LOGIN & PAGE -----*/
/*------------------------------------------*/

.mobile-background-login-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
}

.mobile-background-page {
  position: absolute;
  top: -30px;
  left: -15px;
  right: -15px;
  bottom: 100px;
  z-index: -1;
  -webkit-clip-path: inset(0 0 0 0);
  clip-path: inset(0 0 0 0);
  opacity: 40%;
}

.mobile-background-login-box-shape {
  transform: rotate(45deg);
  position: absolute;
}

.mobile-background-page-shape {
  transform: rotate(45deg);
  position: fixed;
}

.mobile-background-shape-01 {
  height: 520px;
  width: 520px;
  background: #FFF;
  top: -50px;
  right: 120px;
  border-radius: 0 72px 0 0;
}

.mobile-background-shape-02 {
  height: 220px;
  width: 220px;
  background: #17a143;
  top: -172px;
  right: 0;
  border-radius: 32px;
}

.mobile-background-shape-03 {
  height: 540px;
  width: 190px;
  background: linear-gradient(270deg, #047929, #29ca5c);
  top: -24px;
  right: 0;
  border-radius: 32px;
}

.mobile-background-shape-04 {
  height: 400px;
  width: 200px;
  background: #047929;
  top: 420px;
  right: 50px;
  border-radius: 60px;
}

.login-box-form {
  padding: 0;
}

/*-----------------*/
/*----- LOGIN -----*/
/*-----------------*/


/*----------------------------*/
/*----- APP MOBILE STYLE -----*/
/*----------------------------*/

.app-mobile-container {
  height: 100vh;
  overflow-y: hidden;
  overflow-x: hidden;
}

.card-footer-menu-bar {
  width: 100%;
  border: 0px !important;
  overflow: auto;
}

.card-footer-menu-bar-icon-home {
  margin-bottom: 5px;
  width: 36px;
  opacity: 40%;
}

.card-footer-menu-bar-icon-user {
  margin-bottom: 5px;
  width: 42px;
  opacity: 40%;
}

.card-footer-menu-bar-link,
.card-footer-menu-bar-link-text {
  font-size: 14px;
  text-decoration: none !important;
  text-align: center;
  color: #004f80 !important;
}

.card-footer-menu-bar-link {
  width: 25%;
  text-align: center;
  padding: 12px 0;
  display: flex;
  justify-content: center;
  transition: all 0.3s ease;
}

.card-footer-menu-bar-link:hover {
  background-color: #98919126;
}

.custom-mobile-card {
  background-color: rgba(255, 255, 255, 1) !important;
  border: 0px !important;
  padding: 0px 0px 0px 0px;
}

.card-header.custom {
  background-color: white;
  border-bottom: 0px;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}

.card-header.custom.active {
  background-color: #0089FF !important;
  border-bottom: 0px;
  border-radius: 5px;
  padding: 10px;
  color: white !important;
}

.card-header.custom.active .title-filter {
  color: white !important;
}

.card-header.custom {
  background-color: rgba(255, 255, 255, 1) !important;
  border-bottom: 0px !important;
  border-radius: 20px;
}

.card-header.green {
  background-color: #30950b !important;
  border-bottom: 0px !important;
}

.card-header.yellow {
  background-color: #f5c118 !important;
  border-bottom: 0px !important;
}

.card-header.blue {
  background-color: #0e518d !important;
  border-bottom: 0px !important;
}

.custom-mobile-card-header {
  background-color: rgba(255, 255, 255, 1) !important;
  border: 0px !important;
  padding-top: 35px;
}

.custom-mobile-card-body {
  background-color: rgba(255, 255, 255, 1) !important;
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 2px solid #9EADBA;
  padding: 15px;
  overflow-y: auto;
}

.custom-mobile-card-footer {
  background-color: rgba(255, 255, 255, 0) !important;
  border: 0px !important;
}

.card-header.home-box {
  height: 60px;
  background-color: transparent;
  border-bottom: 3px solid #80808069;
}

.home-box-text {
  color: #293845;
  font-weight: 700;
  text-decoration: none;
}

.home-box-icon {
  max-width: 36px;
  position: absolute;
  top: 36px;
  border-radius: 5px;
}

.title-text {
  color: #000000;
  font-weight: 700;
}

.menu-text-modal {
  font-size: 1.4rem;
  color: #293845;
  font-weight: 600;
  align-content: center;
  display: grid;
}

.spacer-block {
  border: 0px;
  margin: 1rem 0;
}

.spacer-decoration {
  border: 1px solid #000000;
  margin: 0.4rem 0;
  opacity: 0.5;
}

.icon-menu {
  color: #293845;
  font-size: 1.8rem;
  text-align: center;
}

.icon-menu-city {
  color: #6f55c4;
  font-size: 1.8rem;
}

.card.extend {
  border-radius: 0;
  background-color: #fff;
  padding: 10px;
}

.modal-dialog-mobile {
  margin: 0;
}

.modal-header {
  border: none;
}

.modal-content-mobile {
  height: 100vh;
  margin: 0;
  border: none;
  border-radius: 0;
}

.menu-icon-modal {
  width: 34px;
  height: auto;
  padding: 0;
  margin-right: 20px;
}

#routeInfoModal {
  z-index: 1060 !important;
}

.tab-text-style {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 2rem;
  padding-bottom: 10px;
  color: #6f55c4;
  border-bottom: 4px solid #6f55c4;
  width: fit-content;
}

.icon-accordion {
  width: 40px;
}

.icon-width-card {
  width: 75%;
}

.h5-card{
font-size: 12px !important;
font-weight: 500 !important;
line-height: 12px !important;
text-align: right !important;

}
.offcanvas-body::-webkit-scrollbar {
  width: 0px;
  /* Larghezza della scrollbar */
}

.btn-expand{
  width: 18px;
}

a[aria-expanded="false"] .btn-expand {
  transform: rotate(0deg);
  /* No rotation when collapsed */
  transition: transform 0.3s ease;
  /* Smooth transition */
}

a[aria-expanded="true"] .btn-expand {
  transform: rotate(90deg);
  /* Rotate 180 degrees when expanded */
  transition: transform 0.3s ease;
}

a[aria-expanded="true"] .btn-expand.downup {
  transform: rotate(180deg);
  /* Rotate 180 degrees when expanded */
  transition: transform 0.3s ease;
}

.title-filter {
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 17px; /* 121.429% */
  color: #242934;
}

.title-filter-legenda{
  font-size: 12px;
}

.card-header.custom a:hover {
  color: #000;
}

.card-header.custom a {
  text-decoration: none !important;
  cursor: pointer;
  color: #000;
}

.card-header.custom h4 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  margin: 0px;
}

.card-header.custom h6 {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #47576C;
}

.filters-map {
  position: absolute;
  z-index: 100;
  top: 100px;
  width: 200px;
}


/*----- STATISTICS STYLE -----*/

.box-data-text {
  font-size: 42px;
  font-weight: bold;
  color: #477789;
  text-align: center;
}

.box-details-text {
  font-size: 18px;
}

/*.box-input-map{
    position: absolute;
    z-index: 1000;
    padding: 0px 10%;
    left: 0;
    top: 10%;
}
*/

/*---------------------------*/
/*----- ADMIN DASHBOARD -----*/
/*---------------------------*/

.main-header .nav-link {
  font-size: 18px;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.sidebar {
  padding: 0px !important;
  /*margin-top: 2rem;*/
}

.sidebar-icon-span {
  display: inline-flex;
  border: 1px solid transparent;
  border-radius: 0.5em;
  padding-right: 0.2em;
  margin-right: 0.25em;
}

.sidebar-icon-span-treeview i{
  margin-right: 0.6em;
}

.main-sidebar {
  background-color: #242934;
  z-index: 1050;
}

.sidebar-mini .nav-sidebar{
  padding-left: 16px;
  padding-right: 16px;
}

.sidebar-mini .main-sidebar .nav-link{
  width: 100%;
  padding: 8px;
}

.nav-sidebar .nav-link {
  color: #ffffff !important;
  font-weight: 400;
}

/*
.nav-sidebar .nav-link i{
  font-size: 25px;
}
*/

.nav-pills .nav-link:not(.active):hover{
  color:#6F8199;
}

.sidebar .nav-link:hover {
  background-color: #6F8199;
}

/*
.sidebar .nav-item:hover > .nav-link  i{
  color: #2cd20a;
  box-shadow: 0px 0px 8px 3px #38ef139e;
}
*/

/*
.sidebar .nav-item:hover>.nav-link i {
  color: rgba(44, 210, 10, 0.6);
}

.sidebar .nav-item:hover>.nav-link .sidebar-icon-span {
  background-color: rgba(44, 210, 10, 0.2);
}
*/

/*.nav-link:hover {
  color: #2cd20a !important;
}
.nav-link.active > .nav-link  i{
  color: #2cd20a !important;
}*/


.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  background-color: transparent;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link:active {
  background-color: #6F8199;
  width: 100%;
}

/*
.nav-pills .nav-link.active i{
  color: #2cd20a !important;
  box-shadow: 0px 0px 20px 5px #2cd20a9e;
}
*/

/*
.nav-pills .nav-link.active i {
  color: rgba(44, 210, 10, 0.6);
}

.nav-pills .nav-link.active .sidebar-icon-span {
  background-color: rgba(44, 210, 10, 0.2);
}
*/

.error-page-background {
  background-color: #ffffffa6;
}

.table-image {
  width: 26px;
  cursor: pointer;
  margin: 0px 3px;
  filter: brightness(0)
}

.table-image:hover {
  filter: brightness(1)
}

.setting-icon {
  cursor: pointer;
  transition: 0.3s;
}

.setting-icon:hover {
  scale: 1.1;
  rotate: 90deg;
  transition: 0.3s;
}

.setting-icon.map:hover {
  scale: 1.1;
  rotate: 0deg;
  transition: 0.3s;
}

.welcome-box {
  height: 500px;
  text-align: center;
}

.decoration {
  border-top: 3px solid #0093d7;
  height: 40px;
  background-color: #baff29;
  opacity: 1;
  width: 80%;
  border-radius: 0 0 50px 50px;
}

.legend-height {
  height: 130px;
  min-height: 130px;
}
.importexport{
  height: 265px;
  overflow: auto;
}

/* --- Legend maps box color --- */

/* contenitore singolo legend */
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;          /* spazio tra swatch e testo */
  padding: 0.35rem 0;   /* verticale: regola come vuoi */
  font-size: 0.95rem;   /* regola la dimensione del testo */
  color: #111;
}

/* rettangolo colorato */
.swatch {
  width: 1.15rem;
  height: 0.9rem;
  border-radius: 3px;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
  flex: 0 0 auto;
}

/* classi colore: personalizza i colori come vuoi */
.swatch-green { background-color: #008000; }
.swatch-yellow { background-color: #FFFF00; }
.swatch-orange { background-color: #FFA500; }
.swatch-red { background-color: #FF0000; }

/*-----------------*/
/*--- HOME CARD ---*/
/*-----------------*/

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .main-title h1 {
    font-size: 3.5rem;
  }

  .modal-lg.setting,
  .modal-xl.setting {
    max-height: 70%;
    min-width: 85%;
  }

  .filters-map {
    position: absolute;
    width: max-content;
    z-index: 100;
    top: 20px;
    right: 20px;
  }
  .filters-map.dash{
    position: absolute;
    z-index: 100;
    top: 100px;
    right: 50px;
  }

  .box-contact-ext {
    width: 80%;
  }
}

/* Medium devices (tablets, 768px and up) */


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .legend-height {
    height: 90px;
    min-height: 90px;
  }
}

/* Extra large devices (large desktops, 1366px and up) */

@media (min-width: 1366px) {
  .mobile-background-shape-02 {
    height: 26%;
    width: 22%;
    background: #57b869fc;
    top: 40%;
    left: 23%;
    border-radius: 32px;
  }

  .modal-lg.setting {
    max-height: 86%;
    min-width: 45%;
  }

  .mobile-background-shape-03 {
    height: 11%;
    width: 28%;
    background: linear-gradient(270deg, #047929, #359951);
    top: 38%;
    right: 0%;
    border-radius: 15px;
  }

  .mobile-background-shape-04 {
    height: 34%;
    width: 23%;
    background: #01770730;
    top: 32%;
    left: 31%;
    border-radius: 20px;
  }

  .box-data-text {
    font-size: 2.188vw;
    font-weight: bold;
    color: #477789;
    text-align: center;
  }

  .box-details-text {
    font-size: 0.938vw;
  }


  /*
  .nav-item{
    font-size: 1rem;
  }

  .nav-item i{
    margin-right: 15px;
  }

  .nav-item p{
    text-align: end;
  }
  */
}

/* Extra large devices (large desktops, 1366px and up) */
@media (min-width: 1920px) {
  .mobile-background-shape-02 {
    height: 26%;
    width: 22%;
    background: #57b869fc;
    top: 34%;
    left: 23%;
    border-radius: 32px;
  }

  .mobile-background-shape-03 {
    height: 11%;
    width: 28%;
    background: linear-gradient(270deg, #047929, #359951);
    top: 32%;
    right: 8%;
    border-radius: 15px;
  }

  .mobile-background-shape-04 {
    height: 34%;
    width: 23%;
    background: #01770730;
    top: 27%;
    left: 31%;
    border-radius: 20px;
  }

  .box-contact-ext {
    width: 90%;
  }
}


/*------------------*/
/*-- GENERAL CARD --*/
/*------------------*/


/*------------------*/
/*----- BUTTON -----*/
/*------------------*/
.btn-remove-question {
  border: 2px;
}

.selectStyle{
width: fit-content;
}

.btn.button-add {
  font-size: 1rem;
  background-color: #60B5FF;
  color: #fff;
  padding: 8px 15px;
  border-radius: 5px;
}

.btn.button-add:hover {
  background-color: #7ADCB4;
  color: #fff;
}

.btn.button-add:active {
  background-color: #7ADCB4 !important;
  color: #fff !important;
}

.btn.button-add label {
  font-weight: 400;
}

.btn.button-filter {
  background-color: #ecf0f5;
  color: #fff;
  border-radius: 5px;
  border: none !important;
  color: #000;
  font-weight: 500;
}

.btn.button-filter:active {
  border: none !important;
  background-color: #ecf0f5;
}

.btn.button-filter label {
  font-weight: 400;
}

.btn.button-ask {
  font-size: 1rem;
  background-color: #3399ca;
  /* Colore di sfondo azzurro */
  color: #fff;
  padding: 8px 15px;
  border-radius: 5px;
}

.btn.button-ask:hover {
  background-color: #7AB4DC;
  /* Colore di sfondo azzurro chiaro */
  color: #fff;
}

.btn.button-ask:active {
  background-color: #7AB4DC !important;
  /* Colore di sfondo azzurro chiaro */
  color: #fff !important;
}

.btn.button-ask label {
  font-weight: 400;
}

.btn.button-save {
  font-size: 1rem;
  background-color: #1db464;
  color: #fff;
  padding: 8px 10px;
  border-radius: 5px;
  text-transform: uppercase;
}

.btn.button-save:hover {
  background-color: #21D375;
  color: #fff;
}

.btn.button-save:active {
  background-color: #078a44 !important;
  color: #fff !important;
}

.btn.button-edit {
  font-size: 1rem;
  font-weight: 700;
  background-color: #ffffff;
  color: #212121;
  padding: 8px 10px;
  border-radius: 5px;
  border: 2px solid #212121;
}

.btn.button-edit:hover {
  background-color: #212121;
  color: #fff;
}

.btn.button-edit:active {
  background-color: #212121 !important;
  color: #fff !important;
}

.btn.button-save-mobile {
  font-size: 14px;
  font-weight: 600;
  background-color: #212121;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  border: 2px solid #212121;
  min-width: 100px;
  height: 40px;
  line-height: normal;
}

.btn.button-save-mobile:hover {
  background-color: #fff;
  color: #212121;
}

.btn.button-save-mobile:active {
  background-color: #fff !important;
  color: #212121 !important;
}

.btn.button-close {
  font-size: 1.4rem;
  background-color: #54875400;
  color: #548754;
  padding: 0px 10px;
  border: 2px solid #548754;
  border-radius: 5px;
  font-weight: 700;
}

.btn.button-close:hover {
  background-color: #548754;
  color: #fff;
}

.btn.button-close:active {
  background-color: #6aab6a !important;
  color: #fff !important;
}

.btn.button-delete {
  font-size: 1rem;
  background-color: #54875400;
  color: #eb4141;
  padding: 8px 25px;
  border: 2px solid #eb41418f;
  border-radius: 5px;
  font-weight: 700;
}

.btn.button-delete:hover {
  background-color: #eb4141;
  color: #fff;
}

.btn.button-delete:active {
  background-color: #eb2828 !important;
  color: #fff !important;
}

.button-plus {
  color: #fff;
  background-color: #1db464;
}

.button-plus:hover {
  color: #fff;
  background-color: #33ca99;
}

.button-plus:active {
  color: #fff !important;
  background-color: #1db464 !important;
  border: 1px solid #ffffff !important;
}

.button-minus {
  color: #fff;
  background-color: #da2828;
}

.button-minus:hover {
  color: #fff;
  background-color: #e14949;
}

.button-minus:active {
  color: #fff !important;
  background-color: #da2828 !important;
  border: 1px solid #ffffff !important;
}

.btn.button-modal {
  font-size: 1rem;
  font-weight: 500;
  text-align: start;
  background-color: #ffffff;
  color: #000000;
  padding: 5px 10px;
  border-radius: 5px;
  border: 2px solid #9EADBA;
  width: 100%;
}

.btn.button-close {
  font-size: 1rem;
  background-color: #858585;
  color: #fff;
  padding: 8px 15px;
  border-radius: 5px;
  font-weight: 400;
  border: 1px solid #858585;
}

.btn.button-close:hover {
  background-color: #c1c1c1;
  color: #fff;
  border: 1px solid #c1c1c1;
}

.btn.button-close:active {
  background-color: #c1c1c1 !important;
  color: #fff !important;

}

.modal-btn {
  color: #858585;
  border: none;
}

.modal-btn:active {
  box-shadow: 0 0 0 .25rem rgba(13, 253, 113, 0.479) !important;
  border: none;
}

.form-check-input:checked {
  background-color: #33ca99;
  border-color: #33ca99;
}

.form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgb(131 227 125 / 46%);
}

.arrow-rotate {
  transform: rotate(90deg);
}

.expert.nav-tabs {
  width: 100%;
  border: none;
}

.expert-width-auto{
  width: auto !important;
}

.card.mb-1 {
  padding: 10px;
}

.expert.nav-tabs .nav-link {
  font-family: Inter;
  border-radius: 0px 5px 5px 0px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  color: #242934;
  background-color: #FFFFFF;
  border-color: #CDD5E1;
}

.expert-width-auto.nav-tabs .nav-link{
  background-color: #ECF0F5;
  border-color: #ECF0F5;
}


.expert.nav-tabs .nav-link.active {
  color: #FFFFFF;
  background-color: #0089FF;
  border-color: #0089FF;
}

#nav-home-tab{
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

#nav-transport-tab{
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;

}

.expert-measures.nav-tabs,
.survey.nav-tabs {
  background-color: #ecf0f5;
  border-radius: 100px;
  display: inline-flex;
  text-align: center;
}

.expert-measures.nav-tabs a:hover,
.survey.nav-tabs a:hover{
  color: #ffffff ;
  background-color: #000000;
}

.expert-measures.nav-tabs .nav-link,
.survey.nav-tabs .nav-link {
  min-width: 12%;
  font-size: 16px;
  color: #000;
  border-radius: 40px;
  min-width: 145px;
}

.expert-measures>.nav-link.active,
.survey>.nav-link.active {
  color: #ffffff !important;
  background-color: #000000 !important;
}

.expert.tab-content,
.survey.tab-content {
  background-color: #ecf0f5;
  min-height: 86vh;
  border-radius: 5px;
}
.advice.tab-content {
  min-height: 89vh;
  border: 1px solid #8b8b8b;
  border-radius: 5px;
}
.expert.tab-pane,
.survey.tab-pane {
  background-color: transparent;
}
.offcanvas-backdrop {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  /* Sfondo scuro */
  z-index: 900;
  /* Sopra il contenuto ma sotto l'offcanvas */
  display: none;
  /* Nascosto di default */
  pointer-events: none;
}

/* Mostra l'overlay quando l'offcanvas è attivo */
.offcanvas.show+.offcanvas-backdrop {
  display: block;
}

.card.open th {
  color: #fff;
}

.card.open a {
  text-decoration: none;
}

.table> :not(caption)>*>* {
  background-color: transparent !important;
  border: none !important;

}

.card.open tbody p {
  color: #000000 !important;
}

.card.open {
  border: none;
}

.fte-active>div>.card-body>.table {
  background-color: #D8FFF8 !important;
}

.fte-public>div>.card-body>.table {
  background-color: #E1F2FE !important;
}

.fte-car>div>.card-body>.table {
  background-color: #FFE5E5 !important;
}

/*.color-data{
  background-color: #ECF0F5;
  padding: 2px 4px;
}*/
.st-arrow {
  background-image: url("../img/icon/arrow2.png");
  background-repeat: no-repeat;
  background-size: 18px;
  background-position: right bottom;
  height: 70px;
}

/* PAGINATION STYLE */
.page-link {
  color: #9EADBA !important;
}

.page-item.active .page-link {
  background-color: #242934 !important;
  border-color: #242934 !important;
  color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 5px;
  margin-top: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #c1ff826b;
  border-color: #ceffc4;
}

.pagination {
  display: flex;
  justify-content: center;
}

.advice-text{
  font-weight: 400;
  color:#5B6B80;
}
.advice-text-data{
  font-weight: bold;
  font-size: 22px;
}

/*-------------------------*/
/*----- BUTTON EXPERT -----*/
/*-------------------------*/

.button-expert-cancel {
  display: flex;
  height: 36px;
  min-width: 80px;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background: #ECF0F5;
  color: #242934;
  font-family: 'Inter', sans-serif;  /* Assicurati che 'Inter' sia disponibile o usa un fallback */
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: none;
  transition: all 0.3s ease;  /* Aggiungi una transizione per un effetto fluido */
}

/* Effetto hover: colori invertiti */
.button-expert-cancel:hover {
  background: #242934;  /* Colore scuro per lo sfondo */
  color: #ECF0F5;       /* Colore chiaro per il testo */
}

.button-expert-select {
  display: flex;
  height: 36px;
  min-width: 80px;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background: #242934;  /* Colore di sfondo scuro */
  color: #FFFFFF;       /* Colore del testo bianco */
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: none;
  transition: all 0.3s ease;  /* Transizione fluida */
}

/* Effetto hover: colori invertiti */
.button-expert-select:hover {
  background: #FFFFFF;  /* Sfondo bianco */
  color: #242934;       /* Testo scuro */
}

.button-expert-select-fit {
  display: flex;
  height: 36px;
  min-width: fit-content;
  max-width: fit-content;
  padding: 10px 12px;
  justify-content: center;
  justify-self: end;
  align-items: center;
  border-radius: 6px;
  background: #242934;  /* Colore di sfondo scuro */
  color: #FFFFFF;       /* Colore del testo bianco */
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: none;
  transition: all 0.3s ease;  /* Transizione fluida */
}

/* Effetto hover, focus, focus-visible e active: colori invertiti */
.button-expert-select:hover,
.button-expert-select:focus,
.button-expert-select:focus-visible,
.button-expert-select:active,
.button-expert-select-fit:hover,
.button-expert-select-fit:focus,
.button-expert-select-fit:focus-visible,
.button-expert-select-fit:active {
  background: #FFFFFF;  /* Sfondo bianco */
  color: #242934;       /* Testo scuro */
  outline: none;        /* Rimuove il bordo predefinito */
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); /* Aggiunge un'ombra per focus/active */
}

/* Sovrascrittura per il pulsante disabilitato */
.button-expert-select:disabled,
.button-expert-select.btn-disabled,
fieldset:disabled .button-expert-select,
.button-expert-select-fit:disabled,
.button-expert-select-fit.btn-disabled,
fieldset:disabled .button-expert-select-fit {
    color: #B0B0B0; /* Colore del testo disabilitato */
    background-color: #ECECEC; /* Colore di sfondo disabilitato */
    border-color: #ECECEC; /* Colore del bordo disabilitato, se usato */
    pointer-events: none; /* Disabilita l'interazione */
    opacity: 1; /* Mantieni l'opacità a 100% per un aspetto uniforme */
}


/* EXPERT MAP POPUP STYLE */

.card-popup {
  border: 2px solid #006830;
  max-width: 350px;
}

.card-header-popup {
  border-bottom: 2px solid #006830;
}

.details-popup .accordion-button {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.25rem;
}

.details-popup .accordion-button::before {
  content: "\f0da";
  /* Codice Unicode per la freccia verso il basso */
  font-family: 'Font Awesome 5 Free';
  /* Font Awesome per la freccia */
  font-weight: 900;
  margin-right: 10px;
  /* Spazio tra la freccia e il testo */
  transition: transform 0.3s ease;
  /* Aggiunge una transizione per la rotazione */
}

.details-popup .accordion-button:not(.collapsed)::before {
  transform: rotate(90deg);
  /* Ruota la freccia verso l'alto quando l'accordion è aperto */
}

.details-popup .accordion-button:after {
  display: none;
}

.details-popup .accordion-item {
  border: none !important;
}

.details-popup .accordion-button:not(.collapsed) {
  background-color: transparent;
  color: #000;
}

.details-popup .accordion-button:focus {
  box-shadow: none !important;
}

.text-popup {
  color: #13a476;
}

.example-journey-from,
.example-journey-to {
  max-width: 40%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.example-journey-icon-wrapper {
  display: flex;
  justify-content: center;
  flex: 1;
  overflow: hidden;
}

.travel-step-separator {
  border-right: 1px dashed #cfcfcf;
}

.dots {
  display: flex;
  justify-content: center;
  flex: 1;
  overflow: hidden;
}

/* CONTACTS STYLE */

.box-contact-ext {
  border-radius: 200px 200px 0px 200px;
  padding: 10px;
  box-shadow: 0px 2px 6px 0px rgb(0 203 68);
  transition: 0.5s;
}

.box-contact-int {
  background-color: #212529;
  color: #ffffff;
  border-radius: 200px 200px 0px 200px;
  height: 35vh;
  display: grid;
  align-content: center;
  justify-content: center;
}

.box-contact-int img {
  justify-self: center;
}

.box-contact-int a {
  color: #ffffff !important;
}

.box-contact-int a:hover {
  color: rgb(119, 255, 165) !important;
}

.box-contact-int-home {
  height: 30vh;
}

.height-65 {
  min-height: 65vh;
}

.height-80{
  min-height: 80vh;
}

.box-contact-ext:hover {
  box-shadow: 0px 2px 6px 5px rgba(0, 203, 68, 0.548);
  transition: 0.5s;
}

/*-----------------*/
/*--- DATA TABLE ---*/
/*-----------------*/

.topbar-icon {
  width: 15px;
  /* margin-right: 10px;*/
  cursor: pointer;
  transition-duration: 200ms;
  scale: 1;
}

.topbar-icon-nearme {
  width: 23px;
  cursor: pointer;
}

.topbar-icon:hover {
  filter: contrast(110%) brightness(110%);
  transition-duration: 200ms;
  scale: 1.1;
}

.bg-reservation {
  background-color: #46b479;
  color: #fff;
  border: 2px solid #9EADBA;
}

.form-control,
.form-control input {
  border: 2px solid #9EADBA;
  appearance: auto;
}

.form-select {
  border: 2px solid #9EADBA;
}

.form-select:focus {
  border: 2px solid #33ca99;
  box-shadow: 0 0 0 .2rem #7adcb4b8;
}

#lessons_map,
#lockers_map,
#kiosks_map,
#map {
  border: none;
  border-radius: 0;
}

.input-group-text {
  border: 1px solid #CDD5E1;
  border-right: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 6px;
}

#near_me {
  border-right: none;
  border-radius: 5px 0 0 5px;
  padding-right: 0px
}

.select2-container--bootstrap4 .select2-selection {
  border: 2px solid #9EADBA;
  border-radius: 5px;
}

.box-questions {
  border: 2px solid #9EADBA;
  border-radius: 5px;
}

/*-----------------*/
/*-- SIDEBAR MENU --*/
/*-----------------*/

@font-face {
  font-family: 'icomoon';
  src: url('/fonts/icomoon.eot?xj4w6g');
  src: url('/fonts/icomoon.eot?xj4w6g#iefix') format('embedded-opentype'),
    url('/fonts/icomoon.ttf?xj4w6g') format('truetype'),
    url('/fonts/icomoon.woff?xj4w6g') format('woff'),
    url('/fonts/icomoon.svg?xj4w6g#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ottimo-icon:before {
  content: "\e901";
}

.icon-ottimo-icon2:before {
  content: "\e900";
}



/*-----------------*/
/*------ CHAT ------*/
/*-----------------*/


/*-----------------*/
/*------ FORM ------*/
/*-----------------*/


/*-----------------*/
/*---- CALENDAR ----*/
/*-----------------*/


/*-------------------*/
/*------ POST ------*/
/*------------------*/

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  .app-mobile-container {
    height: auto;
    overflow-y: hidden;
    overflow-x: hidden;

  }



  .login-box-form {
    padding: 0;
  }

  .input-group-text {
    border: 1px solid #CDD5E1;
    border-right: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 6px;
  }
}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .hc-25 {
    height: 25vh;
  }

  .hc-50 {
    height: 50vh;
  }

  .arrow-rotate {
    transform: rotate(0deg);
  }
}


/*-----------------*/
/*------ ADV ------*/
/*-----------------*/
.user-banner-adv {
  /*position: absolute;*/
  background-color: #fff;
  box-shadow: 0px 0px 5px #373737;
  width: 100%;
  z-index: 200;
}

.adv-title {
  font-weight: 600;
  padding-top: 5px;
  margin: 0;
}

.adv-single-img {
  width: 100%;
  height: 145px;
}

.number-step-icon {
  border: 4px solid #6f55c4;
  padding: 12px 21px;
  border-radius: 60px;
  font-size: 36px;
  color: #6f55c4;
}

.temporary-image img {
  width: 174px;
  height: auto;
  margin-right: 60px;
}

.warning-message {
  font-size: 1.2rem;
  background-color: #54875400;
  color: #eb4141;
  padding: 0px 10px;
  border-radius: 5px;
  font-weight: 700;
}

/*-----------------*/
/*-- MEDIA QUERIES --*/
/*-----------------*/

/*-----------------*/
/*-- NO LOGIN --*/
/*-----------------*/

.no-login .main-header,
.no-login .content-header,
.no-login .main-sidebar,
.no-login>div.wrapper>nav>ul:nth-child(1)>li>a {
  display: none !important;
}

.no-login .content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0 !important;
}



/* Extra large devices (large desktops, 1366px and up) */
@media (min-width: 1920px) {}


@media (min-width: 1366px) {

  .summary-subtext {
    font-size: 0.521vw;
    /*font-size: 10px;*/
    line-height: 0.625vw;
    /*line-height: 12px;*/
    padding: 0.417vw;
    /*padding: 8px;*/
  }

  .box-body {
    font-size: 0.729vw;
    /*font-size: 14px;*/
  }

  .text-graph {
    font-size: 0.729vw;
    /*font-size: 14px;*/
    line-height: 1.042vw;
    /*line-height: 20px;*/
    padding: 0.313vw;
    /*padding: 6px;*/
  }

  .btn.button-filter {
    font-size: 0.832vw;
    /*font-size: 16px;*/
    padding: 0.417vw;
    /*padding: 8px;*/
  }

  .box-body h2 {
    font-size: 0.832vw;
    /*font-size: 16px;*/
  }

  .card-header.custom h4 {
    font-size: 0.832vw;
    /*font-size: 16px;*/
  }

  .width-16 {
    width: 0.832vw;
    /*width: 16px;*/
  }

  h5{
    font-size: 0.938vw;
    /*font-size: 18px;*/
  }

  .card.open th {
    font-size: 0.938vw;
    /*font-size: 18px;*/
  }

  .icon-collapse {
    width: 1.823vw;
    /*width: 35px;*/
  }

  .height-40 {
    height: 2.08vw;
    /*height: 40px;*/
  }

  .icon-summary {
    width: 2.396vw;
    /*width: 46px;*/
  }

  .form-select.info {
    width: 6.76vw;
    /*width: 130px;*/
  }

  .height-218 {
    height: 11.82vw;
    /*height: 208px;*/
  }

  .height-290 {
    height: 14.52vw;
    /*height: 260px;*/
  }

  .height-386 {
    height: 22.15vw;
    /*height: 426px;*/
  }

  .height-458 {
    height: 24.86vw;
    /*height: 478px;*/
  }

  .height-596 {
    height: 32.62vw;
    /*height: 608px;*/
  }



}
/*EXPERT - PLANET */
.horizontalBar {
  display: block;
  color: white;
  font-size: 1.4em;
  font-weight: bold;
  height: 100px;
  line-height: 2em;
  width: 50px;
  border-radius: 5px;
  background-color: #858585;
}

.horizontalBarPotential {
  background-color: #33CAAF;
  /*#477789;*/
}

.horizontalBarCurrent {
  background-color: #858585;
  margin-left: auto;
}

.horizontalBarPotentialNegative {
  background-color: #FE0000;
  /*#477789;*/
}

.fte {
  display: block;
  color: white;
  font-size: 12px;
  font-weight: bold;
  height: 20px;
  width: 20px;
  border-radius: 5px;
  margin: 1px;
}
.fte.indicator{
  border-radius: 0px;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  justify-content: center;
  justify-self: center;
  width: 70%;
}

.t-center td{
  justify-content: center;
}
.fte-dark-red {
  background-color: darkred;
}

.fte-red {
  background-color: red;
}

.fte-orange {
  background-color: orange;
}

.fte-light-orange {
  background-color: gold;
}

.fte-yellow {
  background-color: yellow;
}

.fte-yellow-green {
  background-color: yellowgreen;
}

.fte-green {
  background-color: green;
}

.fte-dark-green {
  background-color: darkgreen;
}

.fte-active {
  background-color: #2C897E;
}

.fte-car {
  background-color: #FE0000;
}

.fte-public {
  background-color: #155F82;
}

.fte-legend-gray{
  background-color: #858585;
}

.fte-legend-green{
  background-color: #33CAAF;
}

.fte-legend-darkgreen{
  background-color: #2c897e;
}

.fte-legend-darkblue{
  background-color: #005d88;
}

.fte-dark-red-advice {
  background-color: darkred;
  width: 90%;
}

.fte-red-advice {
  background-color: red;
  width: 80%;
}

.fte-orange-advice {
  background-color: orange;
  width: 70%;
}

.fte-light-orange-advice {
  background-color: gold;
  width: 60%;
}

.fte-yellow-advice {
  background-color: yellow;
}

.fte-yellow-green-advice {
  background-color: yellowgreen;
  width: 50%;
}

.fte-green-advice {
  background-color: green;
  width: 40%;
}

.fte-dark-green-advice {
  background-color: darkgreen;
  width: 30%;
}

.fte-legend-stripes{
  opacity: 0.8;
  background-color: #005d88;
  background: repeating-linear-gradient( -45deg, #2c897e, #2c897e 5px, #005d88 5px, #005d88 7px )
}

.fte-legend-red{
  background-color: #f7261b;
}

.fte-legend-blue {
  background-color: #1814d4;
}

.fte-legend-pink {
  background-color: #e0acec;
}

.text-graph {
  font-weight: 600;
  margin-top: 6%;
  border-radius: 8px;
  font-family: 'Inter';
  text-align: left;
}

.text-graph.curr {
  background-color: #ECF0F5;
  text-align: left !important;
  color: #242934;
  /*margin-left: 10%;*/
}

.text-graph.info_label {
  background-color: #E1F2FE;
  text-align: left !important;
}



.dividing-line-tr{
    margin-top: 3px;
    border-top: 1px solid rgb(202, 202, 202);
    /* font-weight: bold; */
}

.dividing-line-table{
  border-bottom: 2px solid black;
  padding-right: 25px;
  padding-left: 25px;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
}

.dividing-line{
  border-bottom: 2px solid black;
  padding-right: 25px;
  padding-left: 25px;
  font-weight: bold;
  margin-top: 3px;
  margin-bottom: 3px;
  }

.summary-subtext {
  background-color: #ECF0F5;
  font-family: 'Inter';
  font-weight: 400;
  text-align: left;
  border-radius: 0px 0px 8px 8px;
}

.text-graph.summary-text {
  border-radius: 8px 8px 0px 0px;
  padding-bottom: 0px;
}

.filterRightMenu{
  padding-top:19px;
}

#transitTrainArrivalTableBody{
  margin-top: 3px;
  border-top: 1px solid rgb(202, 202, 202);
}

.text-graph.pot {
  background-color: #D8FFF8;
  text-align: left !important;
  color: #3B5E56;
  /*margin-right: 10%;*/
}

.text-graph.potneg {
  background-color: #FFE5E5;
  color: #751313;
  text-align: left !important;
  /* margin-right: 10%; */
}

.text-graph.pot>div>span,
.text-graph.potneg>div>span {
  font-weight: 400;
}



.bodyExpert,
.bodySurvey{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90vh;
  margin: 0;
}



.img-check{
  margin-top: 30px;
  margin-bottom: 50px;
}

.img-map{
  margin-top: 30px;
  margin-bottom: 50px;
}

.containerExpertCalc{
  min-height: auto;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 32px;
  max-width: 50%;
  height: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  text-align: center;
}

.containerExpertCalc h2 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.containerExpertCalc p {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 10px;
  text-align: left;
}

.containerExpert{
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 32px;
  max-width: 50%;
  height: 450px;
  text-align: center;
}

.containerExpert h2 {
  font-size: 24px;
  font-weight: 700;
  margin-top: 10px;
  margin-bottom: 10px;
}

.containerExpert p {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 10px;
}
.containerExpert button {
  display: table-row;
  margin-top: 50px ;
  height: 45px;
  padding: 8px 16px;
  border-radius: 10px;
}

.card-footer a {
  text-decoration: none;
  color: #000;
}

.expertCalcButtonDiv{
  display: flex;
}

.formControlExpert{
  padding-left: 35px !important;
}

.expertCalcButtonDiv button{
  display: table-row;
  height: 45px;
  padding: 8px 16px;
  border-radius: 10px;
}

.box-settings {
  width: -webkit-fill-available;
  padding: 16px;
  background-color: #F2F5F8;
  border-radius: 8px;
}

.box-body {
  padding: 16px;
  background-color: #ffffff;
  border-radius: 8px;
}
.box-body.dash{
  border: 1px solid #CDD5E1;
  padding: 0px;
}
.tabledash{
  min-height: 60px;
  border-bottom: 1px solid #CDD5E1;
}
.tabledash a{
  text-decoration: none;
}
.box-dash {
  padding: 8px 16px;
  background-color: #ECF0F5;
  border-radius: 4px;
}
.box-dash p{
  margin: 0px;
}

.box-dash.sc1 {
  background-color: #008EBE;
  color:#fff;
}
.box-dash.sc3 {
  background-color: #00BE9B;
  color:#fff;
}
.euro_Lbl {
  margin-right: -45px;
  z-index: 200;
}

.setting-title h6 {
  font-size: 16px;
  font-weight: 800;
  padding: 6px 0px;
}

.icon-clouds{
  width: 5vw;
}

.icon-tree{
  width: 5vw;
}

.setting-title p {
  font-size: 14px;
  margin: 0px;
  font-weight: 600;
}

.card.info {
  background-color: #E1F2FE;
  margin: 0px !important;
}

.card.info>.card-header.custom,
.card.info>.card-body {
  background-color: transparent !important;
  color: #242934;
}

.sticky-menu {
  position: sticky;
  background-color: #ecf0f5;
  top: 0;
  z-index: 60;
}

.box-flow {
  height: 100%;
  overflow-y: auto;
}
.box-no-flow {
  overflow-y: auto;
}

.box-body h2 {
  font-weight: 700;
  margin: 0px;
}

.weight-text{
  font-weight: 700;
  font-size: 0.833vw;
}

.text-ceter-Box{
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text-left-Body{
  padding: 20px;
  margin-left: 0px !important;
  margin-bottom: 0px;
  width: auto;
  text-align: left;
}

.icon-echarging{
  width: 4.688vw;
}

.icon-carpark{
  width: 4.688vw;
}

.icon-bike-n {
  width: 4.688vw;
}

.icon-loneliness{
  width: 8.33vw;
}

.icon-car-blue{
  width: 4.688vw;
}

.icon-sick{
  width: 4.688vw;
}

.icon-clouds{
  width: 4.688vw;
}

.img-phone{
  width: 3.688vw;
}

.img-mail{
  width: 3.688vw;
}

.icon-tree{
  width: 4.688vw;
}


.icon-train{
  width: 3vw;
}


/*CSS transport_map_popup_info.blade.php*/

.btn-close{
  font-size: 1.25vw;
  font-weight: 700;
}

.colBtnClose{
  text-align: right;
    padding-right: 1.146vw;
}

.ExperctMapData > b{
  font-size: 0.75vw;
}

.img-pin{
  margin-right: 0.625vw;
  width:0.938vw;
}

.experctMapTabs > .details-popup .accordion-button{
  font-size: 1.042vw !important;
}

.containerTableExpert >  .table > thead > tr:nth-child(1) > th {
  color: #fff !important;
  background-color: #5fb5fe !important;
}

.containerTableAdvice >  .table > thead > tr:nth-child(1) > th {
  color: #fff !important;
  background-color: #5fb5fe !important;
}

.table> :not(caption)>*>* {
  background-color: transparent !important;
  border: none !important;
  font-size: 0.75vw;

}


.containerTableExpert > .table > thead > tr > th:nth-child(1), .table > tbody > tr > td:nth-child(1) {
  background-color: #ffffff !important;
}

.containerTableAdvice > .table > thead > tr > th:nth-child(1), .table > tbody > tr > td:nth-child(1) {
  background-color: #ffffff !important;
}

.containerTableExpert > .table {
  background-color: #dff1ff;
}

.containerTableAdvice > .table {
  background-color: #dff1ff;
}

  .containerTableExpert {
      min-height: auto;
background-color: #ffffff;
border-radius: 1.042vw;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
padding: 1.667vw;
height: auto;
margin-top: 1.302vw !important;
margin-bottom: 1.302vw;
}

.containerTableAdvice{
  min-height: auto;
  background-color: #ffffff;
  border-radius: 1.042vw;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 0.75vw;
  height: auto;
  margin-top: 0.75vw;
  margin-bottom: 0.75vw;
}

.off-canvas{
  background-color: #ECF0F5 !important;
}

.ExperctMapData {
  min-height: auto;
  background-color: #ffffff;
  border-radius: 1.042vw;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 1.667vw;
  height: auto;
  margin-top: 0.75vw !important;
  margin-bottom: 0.75vw
}

.experctMapTabs{
  min-height: auto;
background-color: #ffffff;
border-radius: 1.042vw;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
padding: 1.667vw;
height: fit-content;
max-height: fit-content !important;
margin-top: 1.302vw !important;
margin-bottom: 1.302vw;
}

.bodycardhome{
  height: 9vw;
}

@media screen and (min-width: 1400px) {
  .bodycardhome{
    height: 7vw;
  }
}

.cantactsContentbody{
  min-height: auto;
  background-color: #ffffff;
  border-radius: 1.042vw;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 1.667vw;
  height: 220px;
  width: -webkit-fill-available;
  margin-top: 0.302vw !important;
  margin-bottom: 1.302vw;
}

.expertMapTitle{
  background-color: #ffffff;
  padding: 1.042vw;
  text-align: left !important
}

.expertMapTitle h5{
font-size: 1.25vw;
font-weight: 700;
}

.expertMapTitle p{
  font-size: 0.938vw;
  text-align: left;
}

.card-advice-programs{
  height: 160px;
}

.containerTableExpert > .table > tbody > tr > td:nth-child(2), .border-head > th:nth-child(2) {
  background-color: #cce8fe !important;
  font-size: 0.75vw;
}

.containerTableAdvice > .table > tbody > tr > td:nth-child(2), .border-head > th:nth-child(2) {
  background-color: #cce8fe !important;
  font-size: 0.75vw;
}

.eurText{
  padding-top: 0.5rem;
}

.map-advice{
  height:77vh;
  width:100%;
}

p#howToText{
  font-size: 12px;
}

.box-img-advice{
  text-align: right !important;
  align-content: center;
  text-align-last: left;
}

.box-img-advice > .icon-summary{
  width: 120px;
}

/* New modal expert */

.adviceRouteModal,
.expertnewmodal {
  background-color: #ffffff;
  padding: 8px;
  border-radius: 8px;
  height: 100%;
}
.adviceboxtext,
.expertboxtext {
  background-color: transparent;
  border: 1px solid #CDD5E1;
  border-radius: 8px;
  padding: 16px;
}
.adviceboxtext > table,
.expertboxtext > table{
  width:100% !important;
}
.adviceboxtext th, .adviceboxtext td,
.expertboxtext th, .expertboxtext td {
padding: 8px 0px;
}
.adviceboxtext tr,
.expertboxtext tr{
  border-bottom: solid 1px #CDD5E1;
}
.adviceboxtext tr:first-child,
.expertboxtext tr:first-child{
  border-bottom: solid 2px #242934;
}
.adviceboxtext tr:last-child,
.expertboxtext tr:last-child{
  border-bottom: none;
}
.expert-title {
  font-size: 18px;
  font-weight: 600;
}

.expert-info {
  font-size: 14px;
  color: #47576C;
}
.icontable {
  width: 30px;
}
.mapsize {
  width:100vw;
  height:87vh;
}

.map-container {
  background-image: url('/img/home-expert/map-radius.png');
  background-size: contain;
  background-position: center;
  height: 268px;
  align-self: center;
  width: auto;
  background-repeat: no-repeat;
}

.map-label {
  position: absolute;
  color: #000000;
  padding: 3px 5px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  background: white;
  font-weight: bold;
}

/* Posizionamenti personalizzati */
.label-5km {
    top: 55%;
    left: 46%;
}

.label-10km {
  top: 67%;
  left: 53%;
}

.label-15km {
  top: 80%;
  left: 60%;
}

.icon-img-rain{
  width: 162px;
  height: 128px;
}


@media (max-width: 1367px) {
.fte-dark-red-advice {
  width: 99%;
}


.box-filter-left{
  margin-top:16px !important;
}

.fte-red-advice {
  width: 90%;
}

.fte-orange-advice {
  width: 81%;
}

.fte-light-orange-advice {
  width: 72%;
}

.fte-yellow-advice {
}

.fte-yellow-green-advice {
  width: 63%;
}

.fte-green-advice {
  width: 54%;
}

.fte-dark-green-advice {
  width: 45%;
}
}

/*End CSS transport_map_popup_info.blade.php*/
@media (max-width: 576px) {
    .ExperctMapData > b{
        font-size:2.778vw;
      }

    .liking-answer-padding {
      padding: 5px 18px !important;
    }
}

/* media  */

@media (max-width: 1365px) {

  .expert.nav-tabs .nav-link,
  .survey.nav-tabs .nav-link,
  .card-header.custom h4,
  .btn.button-filter {
    font-size: 14px;
  }

  .card.info>.card-header.custom,
  .card.info>.card-body {
    font-size: 12.5px;
    padding: 8px;
  }

  .form-select.info {
    width: 115px;
  }

  .box-body h2 {
    font-size: 21px;
  }

  .icon-summary {
    width: 38px;
  }

  .text-graph {
    font-size: 12.5px;
  }

  .summary-subtext {
    padding: 4px 4px 8px 4px;
  }

  .card-body.h-75 h5 {
    font-size: 14px;
  }

  .icon-collapse {
    width: 27px;
  }

  .card.open th {
    font-size: 14px;
  }

  .table th,
  .table tbody {
    font-size: 11px;
  }



}



/* TEST */

.test{
  position:absolute;
  width: 350px;
  z-index: 30000000;
  left: 250px;
  background-color: #ffffff88;
}




.battery{
  transform: rotate(-90deg);
}

.font-20px{font-size: 20px!important;}
.font-50px{font-size: 50px!important;}
.font-70px{font-size: 70px!important;}
.font-90px{font-size: 90px!important;}

.fa-battery-filling-current{
  position: relative;
  color : #5B6B80;
}
.fa-battery-filling-potential{
  position: relative;
  color : #A6B3C5;
}
.fa-battery-filling-current span,
.fa-battery-filling-potential span{
  position: absolute;
  background: #5B6B80;
  top: 28%;
  height: 44%;
  left: 11%;
  border-radius: 2px;
  transition: 250ms ease;
}

table tbody tr td.potentialAdvice{
  background-color: #D8FFF8 !important;
}

table thead tr th.potentialAdvice{
  background-color: #D8FFF8 !important;
}

.containerTableAdvice .table thead tr:nth-child(1) th.potentialAdvice{
  background-color: #33CAAF !important;
}





/* -------------------------------------------------- */

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 26px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 20px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #34C759;
}

input:focus + .slider {
  box-shadow: 0 0 1px #34C759;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/*CARPOOLING*/

.table-image-preview {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
}

/*SUPPORT CENTER*/
.avatar-initials {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E1F2FE;
    color: #0065A8;
    text-transform: uppercase;
    user-select: none;
    font-weight: 600;
    font-size: 14px;
    font-family: "Inter", sans-serif;
}

.message-bubble {
    padding: 12px 16px;
    border-radius: 12px;
    max-width: 100%;
    word-wrap: break-word;
    font-family: "Inter", sans-serif !important;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
}

.bubble-owner {
    background-color: #000000;
    color: #ffffff;
    border-radius: 12px 12px 0px 12px;
}

.bubble-other {
    background-color: #ffffff;
    color: #000000;
    border-radius: 0px 12px 12px 12px;
}

/*ADVICE MY ROUTE SECTION*/
.adviceRouteModal > .table > tbody > tr > td:nth-child(1) {
    background-color: #CDD5E1 !important;
    text-align: center;
}
.adviceRouteModal > .table > tbody > tr > td:nth-child(2) {
    background-color: #F2F5F8 !important;
    text-align: center;
}
.adviceRouteModal > .table > tbody > tr > td:nth-child(3) {
    background-color: #D8FFF8 !important;
    text-align: center;
}
.adviceRouteModal > .table > tbody > tr > td:nth-child(4) {
    background-color: #F2F5F8 !important;
    text-align: center;
}
.adviceRouteModal > .table > tbody > tr > td:nth-child(5) {
    background-color: #F2F5F8 !important;
    text-align: center;
}
.adviceRouteModal > .table > tbody > tr > td:nth-child(6) {
    background-color: #F2F5F8 !important;
    text-align: center;
}
.adviceRouteModal > .table > tbody > tr > td:nth-child(7) {
    background-color: #F2F5F8 !important;
    text-align: center;
}
.adviceRouteModal > .table > tbody > tr > td:nth-child(8) {
    background-color: #F2F5F8 !important;
    text-align: center;
}
.adviceRouteModal > .table > tbody > tr > td:nth-child(9) {
    background-color: #F2F5F8 !important;
    text-align: center;
}
.adviceRouteModal table > tbody > tr:nth-child(4) > td{
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.adviceRouteModal .table {
  border-collapse: separate;
  border-spacing: 6px 1px;
}
.adviceRouteModal table > thead > tr:nth-child(1) > th:nth-child(2), .adviceRouteModal table > thead > tr:nth-child(1) > th:nth-child(4) {
    background-color: #F2F5F8 !important;
    border-radius: 15px;
    text-align: center;
}
.adviceRouteModal table > thead > tr:nth-child(1) > th:nth-child(3) {
    background-color: #D8FFF8  !important;
    border-radius: 15px;
    text-align: center;
}
.adviceRouteModal .spacer-row > th {
  padding: 0;
  height: 8px;
  background: transparent;
  border: none;
}

.adviceRouteModal .border-head > th{
    margin-left: 8px;
    margin-right: 8px;
}

.adviceRouteModal .border-head > th:nth-child(1) {
    background-color: #CDD5E1 !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 5px;
    padding: 15px;
    text-align: center;
}
.adviceRouteModal .border-head > th:nth-child(2) {
    background-color: #F2F5F8 !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 5px;
    padding: 15px;
    text-align: center;
}
.adviceRouteModal .border-head > th:nth-child(3) {
    background-color: #D8FFF8 !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 5px;
    padding: 15px;
    text-align: center;
}
.adviceRouteModal .border-head > th:nth-child(4) {
    background-color: #F2F5F8 !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 5px;
    padding: 15px;
    text-align: center;
}
.adviceRouteModal .border-head > th:nth-child(5) {
    background-color: #F2F5F8 !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 5px;
    padding: 15px;
    text-align: center;
}
.adviceRouteModal .border-head > th:nth-child(6) {
    background-color: #F2F5F8 !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 5px;
    padding: 15px;
    text-align: center;
}
.adviceRouteModal .border-head > th:nth-child(7) {
    background-color: #F2F5F8 !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 5px;
    padding: 15px;
    text-align: center;
}
.adviceRouteModal .border-head > th:nth-child(8) {
    background-color: #F2F5F8 !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 5px;
    padding: 15px;
    text-align: center;
}
.adviceRouteModal .border-head > th:nth-child(9) {
    background-color: #F2F5F8 !important;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    margin: 5px;
    padding: 15px;
    text-align: center;
}

/*EXPERT*/
.btn.button-filter.btn-round{
  border-radius: 20px;
  width: 40px;
  height: 40px;
}

.no-active-icon-style > .sidebar-icon-span
{
  display: none;
}