/*
 * Compatibilita' per l'HTML dei contenuti nel database, scritto per Bootstrap 3.
 * Temporaneo: serve finche' i contenuti non vengono ripuliti. Caricato solo dove serve ($legacyContent).
 * Non copre le icone glyphicon (Bootstrap 5 non le include): vanno sostituite nei contenuti.
 */
#page-content img, .page-content img { max-width: 100%; height: auto; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.pull-left  { float: left !important; }
.pull-right { float: right !important; }
.center-block { display: block; margin-inline: auto; }
.text-justify { text-align: justify; }

/* Visibilita' */
@media (max-width: 575.98px) { .hidden-xs { display: none !important; } }
@media (min-width: 576px) and (max-width: 767.98px) { .hidden-sm { display: none !important; } }
@media (min-width: 768px) and (max-width: 991.98px) { .hidden-md { display: none !important; } }
@media (min-width: 992px) { .hidden-lg { display: none !important; } }
@media (min-width: 576px) { .visible-xs { display: none !important; } }

/* Colonne extra-small di Bootstrap 3: valevano a tutte le larghezze */
.col-xs-1  { flex: 0 0 auto; width: 8.33333333%; }  .col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }          .col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.66666667%; } .col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.33333333%; } .col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }          .col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xs-12 { flex: 0 0 auto; width: 100%; }

/* Componenti rinominati o rimossi */
.btn-default { color: #333; background: #fff; border: 1px solid #ccc; }
.btn-default:hover { background: #f3f3f3; }
.well { padding: 1rem; margin-bottom: 1rem; background: #f6f6f1; border: 1px solid #e3e3dc; border-radius: var(--cbm-radius, 8px); }
.thumbnail { display: block; padding: .25rem; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.label { display: inline-block; padding: .2em .6em; font-size: 75%; font-weight: 700; color: #fff; background: #777; border-radius: .25em; }
.label-success { background: var(--cbm-green, #7f9557); }
.form-group { margin-bottom: 1rem; }
.control-label { font-weight: 600; }

.panel { margin-bottom: 1.25rem; background: #fff; border: 1px solid #ddd; border-radius: var(--cbm-radius, 8px); overflow: hidden; }
.panel-heading { padding: .6rem 1rem; background: #f6f6f1; border-bottom: 1px solid #ddd; }
.panel-primary { border-color: var(--cbm-green, #7f9557); }
.panel-primary > .panel-heading { color: #fff; background: var(--cbm-green, #7f9557); border-color: var(--cbm-green, #7f9557); }
.panel-title { margin: 0; font-size: 1.05rem; font-weight: 400; color: inherit; }
.panel-body { padding: 1rem; }

.embed-responsive { position: relative; display: block; width: 100%; overflow: hidden; }
.embed-responsive::before { content: ''; display: block; padding-top: 56.25%; }
.embed-responsive iframe, .embed-responsive video, .embed-responsive embed, .embed-responsive object {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.embed-responsive-4by3::before { padding-top: 75%; }

/* Dal vecchio main.js: i paragrafi con immagini nei contenuti avevano 20px sopra e sotto */
#page-content p:has(img) { padding: 20px 0; }