/* common.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');


html, body {
    height: 100%; 
}

body, p, .p, table tr td, table th, form, input, .list-group-item {
    font-family: "Noto Sans", sans-serif;
    font-size: 16px;
    color: #777;
}

a {
    text-decoration: none;
}


a:hover {
    color: inherit;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Noto Serif", serif;
}

main {
    flex: 1;
}

.login-heading .logo {
    max-width: 50px;
}

.bg-light-2 {
    background-color: #f0f4f8;
}

@media (min-width: 768px) {
  .rounded-bl-100 {
    border-bottom-left-radius: 100px;
  }
}

.btn-outline-secondary {
    text-transform: uppercase;
    font-size: 14px;
}

.navbar .feather, .feather {
    width: 18px;
    height: 18px;
}

input.rounded-pill, .btn.rounded-pill {
    padding: 12px 8px;
}

.info-wrap {
    background: #fff;
    border-radius: 10px;
    border-bottom: 1px solid #e0e3e8;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 1rem;
    position: relative;
}

.info-icon {
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 0 2px #e5e9ec;
    border-bottom: 1px solid #eee;
}

.info-wrap a {
    text-decoration: none;
     min-width: max-content; 
}

 .info-heading {
    width: 100%;
 }

@media (min-width: 1200px) {
  .info-heading h4 {
    font-size: 1.4em;
  }
}

.breadcrumb {
    display: flex;
    background: transparent;
    margin: 0;
    padding: 1.5rem 0;
    font-size: .825rem;
    align-items: center;
    font-weight: 400;
    color: #777;
}

.breadcrumb .breadcrumb-item.active {
    font-weight: 600;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #777;
    display: block;
    width: 12px;
    height: 20px;
    margin-right: 0.5rem;
    content: '';
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>') no-repeat center;
    background-size: contain;
}

.nav-hello::after {
    content: "|";
    margin-left: 25px;
}

.nav-item .nav-link {
font-size:15px;
}

.form-check-input:focus {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(185, 12, 11, 0.2);
}

.scroll-text-wrapper {
    height: 100%; 
    max-height: 500px; 
    overflow-y: scroll;
}

.scroll-text-wrapper h1, 
.scroll-text-wrapper h2, 
.scroll-text-wrapper h3, 
.scroll-text-wrapper h4, 
.scroll-text-wrapper h5, 
.scroll-text-wrapper h6 {
    font-family: "Noto Serif", serif;
    font-size: 1.3em;
    color: #777;
    font-weight: 500;
    margin-top: 20px;
} 

.bg-main, .btn.bg-main {
    background-color: var(--main-color);
}

.text-main {
    color: var(--main-color);
}

.border-main {
    border-color: var(--main-color);
}

.btn.bg-main {
    border: 2px solid var(--main-color);
}

.btn.bg-main:hover {
    color: #fff !important;
    background-color: var(--hover-color);
    border-color: var(--hover-color);
    font-weight: 600;
}

.theme-red .info-wrap *:hover {
    color: #b90c0b;
    font-weight: 600;
}

.theme-blue .info-wrap *:hover {
    color: #08395a;
    font-weight: 600;
}

@media (min-width: 992px) {
  .registration-frame {
    zoom: 1.25;
    -moz-transform: scale(1.25);
    -moz-transform-origin: 0 0;
    -o-transform: scale(1.25);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(1.25);
    -webkit-transform-origin: 0 0;
    transform: scale(1.25);
    transform-origin: 0 0;
    width: 80%; /* 100% / 1.25 ≈ 80% to avoid clipping */
    height: calc(100vh / 1.25); /* reduce height accordingly */
    border: none;
  }
}

select.bg-transparent {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

}

.theme-red select.bg-transparent option {
    color:#b90c0b;
}

.theme-blue select.bg-transparent option {
    color:#08395a
}

.nav-active {
border-bottom: 2px solid #fff;;
}


/* Mobile default (accordion) */


.responsive-tabs .nav-tabs {
  display: none;

}

.responsive-tabs {
  width: 100%;
}

.responsive-tabs .card-header {
  background-color: #fff;
}

.responsive-tabs .card-header a {
  color: #333;
}

.responsive-tabs .card-header a:not(.collapsed) {
  color: var(--main-color);
  font-weight: bold;
}


/* Desktop: da 768px in su */
@media (min-width: 768px) {
  .responsive-tabs {
    display: flex;
    gap: 2rem;
    
  }

  .responsive-tabs .nav-tabs {
    display: flex;
    flex-direction: column;
    min-width: 400px;
    width: 30%;
    border: none;
  }

  .responsive-tabs .nav-tabs .nav-link {
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0;
    text-align: left;
    border-bottom: 2px solid white;
        padding: 15px;
  }

  .responsive-tabs .nav-tabs .nav-link.active {
    border-left: 3px solid var(--main-color);
    background: none;
    font-weight: bold;
  }

  .responsive-tabs .card {
    border: none;
    width: 100%;
  }

  .responsive-tabs .card-header {
    display: none;
  }

  .responsive-tabs .collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  .responsive-tabs .tab-content {
    flex-grow: 1;
    width: 70%;
  }
}

/* Mobile accordion fix: mostra tutto */
@media (max-width: 767px) {
  .responsive-tabs .tab-pane {
    display: block !important;
    opacity: 1;
  }
}


.letternav .nav-item {
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem; /* opzionale, per angoli arrotondati */
  margin: 0.25rem;
  text-align: center;
}

.letternav .nav-item.active {
    background-color: #b90c0b;
    
}

.letternav .nav-item.active a {
  
  color: white; 
  
}

.logo {
    width: 50px;
}