:root {
  --bs-body-font-family: Roboto;
  --bs-primary: #324594;
  --bs-primary-rgb: 50, 69, 148;
  --bs-secondary: #e14490;
  --bs-secondary-rgb: 225, 68, 144;
  --bs-tertiary: #76b736;
  --bs-tertiary-rgb: 118, 183, 54;
  --bs-quaternary: #31beef;
  --bs-quaternary-rgb: 49, 190, 239;
  --bs-link-color: #3c53af;
  --bs-link-hover-color: #3c53af;
  --bs-body-bg: #ffffff;
  --bs-body-color: #000;
  --bs-body-font-size: 1.1rem;
}

/*Footer ancorato bottom*/
html,
body {
  margin: 0;
  padding: 0;
  max-height: 100%;
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
}

footer {
  flex-shrink: 0;
  margin-top: auto;
}

/* fine Footer ancorato bottom*/

h1 {
  font-weight: bold;
  font-size: 1.6rem;
}

h2 {
  font-weight: bold;
  font-size: 1.4rem;
}

h3 {
  font-weight: bold;
  font-size: 1.2rem;
}

body {
  font-family: "Roboto", sans-serif;
}

/*Fine font*/

.bg-tertiary {
  background-color: var(--bs-tertiary);
}

.bg-quaternary {
  background-color: var(--bs-quaternary);
}

.bg-gradient-tertiary {
  background: linear-gradient(180deg,
      var(--bs-tertiary),
      rgba(255, 255, 255, 0));
}

/*Immagine grande di sfondo del PRIMO modulo con immagine grande */
@media screen and (min-width: 768px) {
  .mb-10 {
    margin-bottom: 10rem;
  }
}

.background-image-container {
  background-image: url("../images/img-header2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 50vh;
  position: relative;
}

@media screen and (min-width: 426px) and (max-width: 768px) {
  .background-image-container {
    height: 25vh;
  }
}

@media (max-width: 425px) {
  .background-image-container {
    height: 25vh;
  }
}

.background-image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.721); */
  z-index: 1;
}

/*Immagine grande di sfondo del primo modulo*/

/*link*/
a {
  color: var(--bs-link-color);
  text-decoration: none;
  font-weight: bold;

  &:hover,
  &:active,
  &:focus {
    text-decoration: underline;
    color: var(--bs-link-hover-color);
  }

  &:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
  }
}

/*Fine*/

li:focus {
  text-decoration: underline;
  color: var(--bs-link-hover-color);
}

li:focus-visible {
  outline: 3px solid var(--bs-primary);
  outline-offset: 2px;
}

/* BOTTONI */
.btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

/*Bottone primario*/
.btn-primary {
  font-weight: bold;
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: none;
  box-shadow: 2px 2px 5px -3px #000000;
  border-radius: 5px;
  --bs-btn-border-width: none;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: none;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: none;
  --bs-btn-focus-shadow-rgb: 29, 41, 75;
  --bs-btn-active-shadow: none;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6f7376;
  --bs-btn-disabled-border-color: #6f7376;

  &:hover,
  &:active {
    text-decoration: underline;
    box-shadow: none;
  }

  &:focus-visible {
    border: 3px solid #fff;
    box-shadow: none;
    outline-offset: 2px;
  }
}

.btn-close:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.btn-close:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

.btn-close {
  width: 44px;
  height: 44px;
  --bs-btn-close-bg: none;
  --bs-btn-close-opacity: 1;
  --bs-btn-close-hover-opacity: 1;
}

/* fine Bottone primario*/

/*Bottone secondario*/

.btn-secondary {
  font-weight: bold;
  --bs-btn-color: #000000;
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: none;
  box-shadow: 2px 2px 5px -3px #000000;
  border-radius: 5px;
  --bs-btn-border-width: none;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: none;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: none;
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 29, 41, 75;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6f7376;
  --bs-btn-disabled-border-color: #6f7376;

  &:hover,
  &:active {
    text-decoration: underline;
    box-shadow: none;
  }

  &:focus-visible {
    border: 3px solid var(--bs-primary);
    box-shadow: none;
  }
}

/* fine Bottone secondario */

/*Bottone secondario*/

.btn-tertiary {
  font-weight: bold;
  --bs-btn-color: #000000;
  --bs-btn-bg: white;
  --bs-btn-border-color: none;
  box-shadow: 2px 2px 5px -3px #000000;
  border-radius: 5px;
  --bs-btn-border-width: none;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: white;
  --bs-btn-hover-border-color: none;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: white;
  --bs-btn-active-border-color: none;
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 29, 41, 75;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6f7376;
  --bs-btn-disabled-border-color: #6f7376;

  &:hover,
  &:active {
    text-decoration: underline;
    box-shadow: none;
  }

  &:focus-visible {
    border: 3px solid #fff;
    box-shadow: none;
  }
}

/* fine Bottone terziario */

/*Button*/

.button {
  font-weight: bold;
  --bs-btn-color: #000000;
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: none;
  box-shadow: none;
  border: none;
  background-color: unset;
  border-radius: 5px;
  --bs-btn-border-width: none;
  --bs-btn-hover-color: #000000;
  --bs-btn-hover-bg: unset;
  --bs-btn-hover-border-color: none;
  --bs-btn-active-color: #000000;
  --bs-btn-active-bg: unset;
  --bs-btn-active-border-color: none;
  --bs-btn-active-shadow: none;
  --bs-btn-focus-shadow-rgb: 29, 41, 75;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6f7376;
  --bs-btn-disabled-border-color: #6f7376;

  &:hover,
  &:active {
    text-decoration: underline;
    box-shadow: none;
  }

  &:focus-visible {
    outline: 3px solid var(--bs-primary);
    /* colore ben contrastato */
    outline-offset: 2px;
    box-shadow: none;
  }
}

/*fine button*/

/* FINE BOTTONI */

/* LG breakpoint */
@media (min-width: 992px) {

  /* CUSTOM WIDTHS */
  .w-lg-25 {
    width: 25% !important;
  }

  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-75 {
    width: 75% !important;
  }

  .w-lg-100 {
    width: 100% !important;
  }
}

/* MD breakpoint*/
@media (max-width: 768px) {

  /* CUSTOM WIDTHS */
  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }

  .w-md-100 {
    width: 100% !important;
  }
}

/* SM breakpoint */
@media (max-width: 576px) {

  /* CUSTOM WIDTHS */
  .w-sm-25 {
    width: 25% !important;
  }

  .w-sm-50 {
    width: 50% !important;
  }

  .w-sm-75 {
    width: 75% !important;
  }

  .w-sm-100 {
    width: 100% !important;
  }
}

/* menu offcanvas */
.offcanvas {
  max-width: 70%;
}

@media screen and (max-width: 576px) {
  .offcanvas {
    max-width: 100%;
  }
}

.offcanvas-body {
  width: 80%;
}

/* fine menu offcanvas */

/* Alfabeto */
/* .nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-link-color);
} */

/* CSS per posizionare il bottone */
#btn-torna-su {
  position: fixed;
  bottom: 50px;
  right: 20px;
  display: none;
  z-index: 99;
  transition: all 0.3s ease-in-out;
}

/* Form */
.form-control:focus {
  /* color: var(--bs-body-color);
    background-color: var(--bs-body-bg); */
  border-color: var(--bs-primary);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

form-control:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/* Select */
.form-select:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.form-label:focus-visible {
  outline: none;
}

.form-control:disabled,
.form-select:disabled,
.form-check-input:disabled {
  outline: none;
  box-shadow: none;
}

/* 
.form-label {
  flex-shrink: 0;
} */

/* Fine Form */