html, body {
    height: 100%;
    width: 100%;
    font-family: "DM Sans";
  }
#map { height: 100%;}

.header_button {
    border-radius: 30px !important;
    color: #C4431C !important;
    background-color: #F6E4CB !important;
    outline: #C4431C 1px !important;
}
.header_button:hover {
    border-radius: 30px !important;
    color: white !important;
    background-color: #C4431C !important;
    outline: #C4431C 1px !important;
}
/* ---------------- login form ------------------------- */
/* .form-control {
    background-color: #ff3c00;
    color: #78ff0a;
} */

/* -----------HOMEPAGE MAP----------------------------- */
/* ===bootstrap offcancavs=== */


/* ===right sidebars=== */

.flex-center {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sidebar-content {
    position: absolute;
    width: 95%;
    height: 95%;
    font-family: Arial, Helvetica, sans-serif;
    z-index: 2;
}
.sc1 {
    background-color: #fded95e7;
}
.sc2 {
    background-color: #f78962e9;
}
.sc3 {
    background-color: #8ae5f9e5;
}
.sidebar-toggle {
    position: absolute;
    width: 180px;
    height: 70px;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.sidebar-toggle:hover {
    color: #C4431C;
    cursor: pointer;
}
.sidebar {
    transition: transform 1s ease;
    z-index: 1;
    width: 300px;
    height: 70%;
}
.left.collapsed {
    transform: translateX(-295px);
}
.right.collapsed {
    transform: translateX(295px);
}
.monument-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mon_elenc {
    padding: 0.5rem 0;
    border-bottom: 1px solid #dee2e6;
    color: #001219;
    font-size: 1rem;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease, font-size 0.3s ease;
    cursor: pointer;
}

.mon_elenc:last-child {
    border-bottom: none;
}

.mon_elenc:hover {
    color: #C4431C;          
    transform: translateX(6px); 
    font-size: 1.1rem;        
}

/* ------------------------- */
.sidebar-toggle_left {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 100px;
    left: 100px;
    z-index: 999 !important;
}
.sidebar-toggle_right0 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 30px;
    left: 30px;
    z-index: 2;
}
.sidebar-toggle_right1 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 30px;
    right: 15px;
    z-index: 2;
}
.sidebar-toggle_right2 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 100px;
    right: 15px;
    z-index: 2;
}
.sidebar-toggle_right3 {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 160px;
    right: 15px;
    z-index: 2;
}
.btn-custom_home{
    border-radius: 30px !important;
    background-color: #C4431C;
}
.btn-custom_home:hover{
    border-radius: 30px !important;
    background-color: #EEC995;
}
.tab{
  position: absolute;
  right: 85px;
  top: 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  width: 325px;
  z-index: 2;
  outline: #C4431C solid 1px;
}
.btn-vai_alla_scheda {
    border-radius: 50px;
  color: #C4431C;
  background-color: #F6E4CB;
}
.btn-vai_alla_scheda:hover {
    border-radius: 50px;
  color: white;
  background-color: #C4431C;
}

/* ------------------------SCHEDA-------------------------------------------------- */
.tab-content {
    outline: solid #C4431C 3px ;
    border-radius: 15px;
    z-index: 3;
}
.accordion-header {
    border-radius: 50%;
}
.nav-pills .nav-link {
  color: #C4431C;
  background-color: #F6E4CB;
  font-size: smaller;
}
.nav-pills .nav-link.active {
  color: white;
  background-color: #C4431C;
}
.nav-pills .nav-link{
    border-radius: 30px;
}
.accordion-button:focus {
  box-shadow: none;
  outline: none;
}
.accordion-button {
  background-color: #ffffff; /* Colore chiaro personalizzato */
  color: #C4431C; /* Testo, opzionale */
}
.accordion-button:not(.collapsed) {
  background-color: #e9ecef; /* Sfondo attivo */
  color: #C4431C;
}
.accordion-body {
    outline: none;
}
@media screen and (max-width: 991px) {
    .custom_oc {
        width: 99% !important;
        top: 112px !important; /* 👈 Sposta il pannello più in basso */
        max-height: 540px !important; /* 👈 Lascia il resto visibile */
        border-top-left-radius: 1rem !important;
        border-bottom-left-radius: 1rem !important;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1) !important;
        overflow-y: auto !important;
        outline: solid #C4431C 2px !important;
    }
}
@media screen and (min-width: 992px) {
    .custom_oc {
        width: 41.1% !important;
        top: 112px !important; /* 👈 Sposta il pannello più in basso */
        max-height: 540px !important; /* 👈 Lascia il resto visibile */
        border-top-left-radius: 1rem !important;
        border-bottom-left-radius: 1rem !important;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1) !important;
        overflow-y: auto !important;
        outline: solid #C4431C 2px !important;
    }
}

.key1 {
    color: #C4431C !important;
}
.table_elementi tr {
  border-bottom: 1px solid #A52A2A;
}
.btn-outline-custom {
  color: #C4431C !important;
  border-color: #C4431C !important;
}
.btn-outline-custom:hover,
.btn-outline-custom:focus,
.btn-outline-custom:active {
  color: #fff !important;
  background-color: #C4431C !important;
  border-color: #C4431C !important;
}
.custom-popover {
  --bs-popover-max-width: 500px !important;
  --bs-popover-border-width: 2px !important;
  --bs-popover-border-color: #C4431C !important;
  --bs-popover-box-shadow:#ff0505 !important;
  --bs-popover-header-color: var(--bs-white);
  /* --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem; */
}
/* partials/_rilevamenti */
.form-check-input {
  width: 15px !important;
  height: 15px !important;
  transition: all 0.2s ease !important;
  transform-origin: bottom center !important;
}
.form-check-input:checked {
  transform: scale(1.35) !important;
}

.elementi {
    border-radius: 20px;
    width: 300px;
    box-shadow: 0px 0px 8px #4a69f4;;
}
.sottoelementi {
    border-radius: 20px;
}
/* ------------------ 3DHOP ------------------------------------- */

#draw-canvas {
    background-image: url('../models/backgrounds/light.jpg')
}
.info-box {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(to bottom right, #ffffffcc, #f0f0f0cc); /* sfondo sfumato leggero e trasparente */
    padding: 12px 16px;
    border: 1px solid #aaa;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    color: #333;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    max-width: 220px;
    z-index: 10;
    pointer-events: none; /* evita che dia fastidio all'interazione col canvas */
}
#spinner_loading{
    position: absolute;
    top: 260px;
    right: 400px;
}