/* Add font files for Golos Text */
@font-face {
    font-family: 'Golos Text';
    src: url('../fonts/GolosText-Regular.woff2') format('woff2'),
        url('../fonts/GolosText-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Golos Text';
    src: url('../fonts/GolosText-Bold.woff2') format('woff2'),
        url('../fonts/GolosText-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
  --font-family-inter: 'Inter', sans-serif;
  --font-family-golos-text: 'Golos Text', sans-serif;
  --background: rgb(233, 207, 206);
  --text-rgb-171-50-30: rgba(171, 50, 30, 1);
  --text-rgb-30-30-30: rgba(30, 30, 30, 1);
  --text-white: rgba(255, 255, 255, 1);
  --text-black: rgba(0, 0, 0, 1);
  --text-rgb-172-171-171: rgba(172, 171, 171, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--background);
  font-family: var(--font-family-golos-text);
}

img {
  max-width: 100%;
  height: auto;
}

.contenitorePrincipale{
  position: relative;
  display: block;
  width: 1024px;
  min-height: 1024px;
  height: inherit;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 67px;
  padding: 30px;
  border-radius: 40px;
}
.contenitoreSx {
  position: relative;
  display: block;
  width: 50%;
  height: 964px;
  /* border: 1px solid #ccc; */
  float: left;
}
.contenitoreSx .logo{
  position: relative;
  text-align:center;
}
.contenitoreSx .logo img{
width: 75%
}
.contenitoreSx .slogan{
  display: block;
  margin-top: 40px;
}
.contenitoreSx .slogan p{
  font-family: 'Golos Text';
  font-size: 48px;
  font-weight: bold;
color:var(--text-rgb-171-50-30)
}
.contenitoreSx .nota{
  display: block;
  width: 95%;
  margin-top: 360px;
  text-wrap-mode: wrap;
}
.contenitoreSx .nota p{
  font-family: 'Golos Text';
  font-size: 22px;
  font-weight: normal;
color:var(--text-rgb-171-50-30);
}
.contenitoreDx {
  position: relative;
  display: block;
  width: 50%;
  height: inherit;
  min-height: 994px;
  border-radius: 20px;
  background-color: #e9e9e9;
  margin-left: 50%;
}
.contenitoreDx form {
  position: relative;
  top: 25px;
  height: inherit;
  padding: 0 58px;
  min-height: 994px;
}
.contenitoreDx form label{
  display: block;
  font-family: 'Golos Text';
  font-size: 22px;
  font-weight: bold;
  color:var(--text-rgb-171-50-30);
  margin-bottom: 8px;
}
.contenitoreDx form .form-group a{
  display: block;
  font-family: 'Golos Text';
  font-size: 14px;
  font-weight: normal;
  margin-top: -10px;
  margin-bottom: 8px;
}
.contenitoreDx form div.form-group{
  display: block;
  position: relative;
  margin-bottom: 44px;
}
.contenitoreDx form input{
  width: 100%;
  height: 62px;
  border: 0;
  border-radius: 40px;
  box-shadow:4px 4px 3px #ccc;
  padding: 16px;
  font-size: 22px;
  color:#666;
}
.contenitoreDx form div.form-group div.percheck {
  display: inline-block;
  width: 100%;
}
.contenitoreDx form div.form-group div.percheck input {
  width: 16px;
  float: left;
  height: 20px;
  margin: 0 12px 0 0;
  box-shadow: none;
}
.contenitoreDx form div.form-group div.percheck label {
  display: inline-block;
  width: calc(100% - 30px);
  color: #444;
  font-size:15px;
}
.contenitoreDx form div.form-group div.percheck label a {
  display: contents;
  width: 100px;
  font-size:15px;
  margin:0;
}
.custom-select {
            position: relative;
            width: 100%;
        }

        .custom-select select {
            width: 100%;
            height: 62px;
            border: 0;
            border-radius: 40px;
            box-shadow: 4px 4px 3px #ccc;
            padding: 16px;
            padding-right: 50px; /* Spazio per la freccia personalizzata */
            font-size: 22px;
            color: #666;
            appearance: none; /* Rimuove la freccia predefinita */
            -webkit-appearance: none; /* Per browser Webkit */
            -moz-appearance: none; /* Per Firefox */
            background-color: white;
            cursor: pointer;
        }

        /* Freccia personalizzata */
        .custom-select::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 12px solid #666; /* Colore della freccia */
            pointer-events: none; /* Permette di cliccare attraverso la freccia */
        }

        /* Effetto hover */
        .custom-select select:hover, .contenitoreDx form input:hover {
            box-shadow: 4px 4px 6px #aaa;
        }

        /* Effetto focus */
        .custom-select select:focus, .contenitoreDx form input:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--text-rgb-171-50-30);
        }

.contenitoreDx form div.actionform{
  display: block;
  position: absolute;
  width: calc(100% - 116px);
  bottom: 0;
}
.contenitoreDx form button{
  font-family: 'Golos Text';
  font-weight:bold;
  width: 100%;
  height: 62px;
  border: 0;
  border-radius: 40px;
  margin-bottom: 22px;
  padding: 16px;
  font-size: 22px;
  color:#666;
}
button.buttSubmit, button.buttRiserva{
  background-color: var(--text-rgb-171-50-30);
  color: #fff!important;
}
button.buttReset{
  background-color: #fff;
  color: #666!important;
}

.contenitoreSotto{
  position: relative;
  display: block;
  width: 1024px;
  height: auto;
  margin: 0 auto;
  margin-top: 24px;
}

.contenitoreSottoSX{
    position: relative;
    display: block;
    width: 500px;
    height: 520px;
    background-color: #fff;
    /* margin-top: 135px; */
    padding: 30px;
    border-radius: 40px;
    float: left;
  }
  .contenitoreSottoDX{
      position: relative;
      display: block;
      width: 500px;
      height: 520px;
      background-color: #fff;
      padding: 30px;
      border-radius: 40px;
      float: right;
    }
.contenitoreSotto p.info{
  clear: both;
  padding: 30px;
  font-family: 'Golos Text';
  font-weight:bold;
  font-size: 22px;
  color: #000;
  text-align: center;
}
.contenitoreSotto div img{
  position: absolute;
  bottom: 30px;
  width: calc(100% - 58px);
  border-radius: 40px;
}

.contenitoreSotto div h3{
  font-family: 'Golos Text';
  font-weight:bold;
  font-size:34px;
  color: var(--text-rgb-171-50-30);
  margin-bottom:12px;
}

.contenitoreSotto div p{
  font-family: 'Golos Text';
  font-weight:normal;
  font-size:26px;
}
.contenitoreSotto div p a{
color: var(--text-rgb-171-50-30);
}
.contenitoreSotto div ul{
  font-family: 'Golos Text';
  font-weight:normal;
  font-size:26px;
  margin-left:26px;
}

#loading{
	display:none;
  background:url('../images/loading.gif') no-repeat 0 1px;
	width:16px;
	height:16px;
}

.footer {
  display: block;
  font-family: var(--font-family-golos-text);
  text-align: center;
  padding: 12px;
  font-size: 14px;
  border-top: 1px solid #aaa;
  color: #777;
}

/* --- Overlay principale --- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: none;                 /* chiuso */
  justify-content: center;       /* centratura orizzontale */
  align-items: center;           /* centratura verticale */
  overflow-x: hidden;
  overflow-y: auto;
  background: rgba(0,0,0,.5);    /* backdrop */
  padding: .5rem;                /* margine dai bordi */
  outline: 0;
}

.modal.show { display: flex; }   /* se usi classi; col tuo JS va bene anche display:flex inline */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  opacity: .5;
}

/* --- Dialog contenitore --- */
.modal-dialog {
  position: relative;
  width: 100%;
  margin: 0;
  pointer-events: none;
  max-width: 500px; /* default size */

}

.modal.fade .modal-dialog {
  transition: transform .3s ease-out;
  transform: translate(0, -50px);
}

.modal.show .modal-dialog {
  transform: none;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-scrollable {
  height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

/* --- Contenuto --- */
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.2);
  border-radius: .5rem;
  outline: 0;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  pointer-events: auto;
}

/* --- Header --- */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(.5rem - 1px);
  border-top-right-radius: calc(.5rem - 1px);
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: 500;
}

/* --- Body --- */
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-body ul{
  padding-left: 30px;
}

/* --- Footer --- */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: .75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(.5rem - 1px);
  border-bottom-left-radius: calc(.5rem - 1px);
  gap: .5rem;
}

/* --- Bottoni --- */
.modal-footer .btn {
  padding: .375rem .75rem;
  border-radius: .375rem;
  /* border: 1px solid transparent; */
  cursor: pointer;
}

.modal-footer .btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.modal-footer .btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

/* --- Dimensioni extra --- */
.modal-sm { max-width: 300px; }
.modal-lg { max-width: 800px; }
.modal-xl { max-width: 1140px; }


/* Base */
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  border-radius: .375rem;
  transition: color .15s ease-in-out,
              background-color .15s ease-in-out,
              border-color .15s ease-in-out,
              box-shadow .15s ease-in-out;
}

.btn:disabled,
.btn.disabled {
  pointer-events: none;
  opacity: .65;
}

/* Dimensioni */
.btn-sm {
  padding: .25rem .5rem;
  font-size: .875rem;
  border-radius: .25rem;
}

.btn-lg {
  padding: .5rem 1rem;
  font-size: 1.25rem;
  border-radius: .5rem;
}

/* Varianti */
.btn-default {
  color: #212529;
  background-color: #f8f9fa;
  border-color: #212529;
}
.btn-default:hover {
  color: #212529;
  background-color: #e9ecef;
  border-color: #adb5bd;
}
.btn-default:active {
  color: #212529;
  background-color: #dee2e6;
  border-color: #adb5bd;
}
.btn-primary {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}
.btn-primary:hover {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
}
.btn-primary:active {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}

.btn-secondary {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.btn-secondary:hover {
  color: #fff;
  background-color: #5c636a;
  border-color: #565e64;
}
.btn-secondary:active {
  color: #fff;
  background-color: #565e64;
  border-color: #51585e;
}

.btn-success {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}
.btn-success:hover {
  color: #fff;
  background-color: #157347;
  border-color: #146c43;
}
.btn-success:active {
  color: #fff;
  background-color: #146c43;
  border-color: #13653f;
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}
.btn-danger:hover {
  color: #fff;
  background-color: #bb2d3b;
  border-color: #b02a37;
}
.btn-danger:active {
  color: #fff;
  background-color: #b02a37;
  border-color: #a52834;
}

.btn-warning {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}
.btn-warning:hover {
  color: #000;
  background-color: #ffca2c;
  border-color: #ffc720;
}
.btn-warning:active {
  color: #000;
  background-color: #ffcd39;
  border-color: #ffc720;
}

.btn-info {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}
.btn-info:hover {
  color: #000;
  background-color: #31d2f2;
  border-color: #25cff2;
}
.btn-info:active {
  color: #000;
  background-color: #25cff2;
  border-color: #1ac8ed;
}

.btn-light {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}
.btn-light:hover {
  color: #000;
  background-color: #e2e6ea;
  border-color: #dae0e5;
}
.btn-light:active {
  color: #000;
  background-color: #dae0e5;
  border-color: #d3d9df;
}

.btn-dark {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}
.btn-dark:hover {
  color: #fff;
  background-color: #1c1f23;
  border-color: #1a1d20;
}
.btn-dark:active {
  color: #fff;
  background-color: #1a1d20;
  border-color: #191c1f;
}

/* Outline buttons */
.btn-outline-primary {
  color: #0d6efd;
  border-color: #0d6efd;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.btn-outline-secondary {
  color: #6c757d;
  border-color: #6c757d;
}
.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-outline-success {
  color: #198754;
  border-color: #198754;
}
.btn-outline-success:hover {
  color: #fff;
  background-color: #198754;
  border-color: #198754;
}

.btn-outline-danger {
  color: #dc3545;
  border-color: #dc3545;
}
.btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-outline-warning {
  color: #ffc107;
  border-color: #ffc107;
}
.btn-outline-warning:hover {
  color: #000;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-outline-info {
  color: #0dcaf0;
  border-color: #0dcaf0;
}
.btn-outline-info:hover {
  color: #000;
  background-color: #0dcaf0;
  border-color: #0dcaf0;
}

.btn-outline-light {
  color: #f8f9fa;
  border-color: #f8f9fa;
}
.btn-outline-light:hover {
  color: #000;
  background-color: #f8f9fa;
  border-color: #f8f9fa;
}

.btn-outline-dark {
  color: #212529;
  border-color: #212529;
}
.btn-outline-dark:hover {
  color: #fff;
  background-color: #212529;
  border-color: #212529;
}

.mrga {
  margin: 0 auto;
}

.nascosto {
  display: none;
}
.errore {
  color: red;
  font-family: 'Golos Text';
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

  @media screen and (min-width: 320px) and (max-width: 480px) {
  .contenitorePrincipale {
    width: 92%;
    margin: 0 auto;
    min-height: 1700px;
    margin-top:67px;
    padding: 15px;
  }
  .contenitoreSx {
  position: relative;
  display: block;
  width: 100%;
  height: 1760px;
  float:left;
}
.contenitoreSx .slogan p {
  font-size: 32px;
}

.contenitoreSx .nota {
  position: absolute;
  display: block;
  width: 95%;
  bottom: 120px;
}
  .contenitoreDx {
  position: absolute;
  display: block;
  width: calc(100% - 30px);
  height: inherit;
  min-height: 800px;
  border-radius: 20px;
  background-color: #e9e9e9;
  margin: 300px auto;
}

.contenitoreDx form {
  min-height: inherit;
padding: 0 27px;
}
.contenitoreDx form div.actionform {

  width: calc(100% - 60px);

}
.contenitoreDx form input, .contenitoreDx form button, .custom-select select {
height: 38px;
}
.contenitoreDx form button, .custom-select select {
padding: 0 16px;
}
.contenitoreSotto {
  width: 92%;
  margin: 0 auto;
  top: -90px;
}
.contenitoreSottoDX, .contenitoreSottoSX{
  width: 100%;
  margin-top: 30px;
  height: 425px;
}
.contenitoreSotto div h3{
  font-size:22px;
}

.contenitoreSotto div p{
  font-size:20px;
}
.contenitoreSotto div ul{
  font-size:20px;
}
.contenitoreSotto div img{
  border-radius: 20px;
}
.persone {
  width: 55%!important;
}
}