/* ===================================================================================== * GECO - geco_bs3compat.css : classi di Bootstrap 3 ancora usate dalle pagine/tema * (style_new.css, eakroko, datatables.js) ricreate sopra Bootstrap 5. * Da includere SUBITO DOPO lib5/bootstrap/css/bootstrap.min.css e PRIMA di style_new.css. * ===================================================================================== */ /* ---- tipografia base come BS3: html 10px (1rem = 10px, come si aspettano i CSS del tema e delle pagine), body 14px ---- */ html { font-size: 10px; } body { font-size: 14px; line-height: 1.42857143; } /* ---- float / visibilita' ---- */ .pull-right { float: right !important; } .pull-left { float: left !important; } .clearfix::after { content: ""; display: table; clear: both; } .hidden { display: none !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .center-block { display: block; margin-left: auto; margin-right: auto; } .img-responsive { display: block; max-width: 100%; height: auto; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } @media (max-width: 767.98px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-lg { display: none !important; } } .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } @media (max-width: 767.98px) { .visible-xs { display: block !important; } } @media (min-width: 768px) and (max-width: 991.98px) { .visible-sm { display: block !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .visible-md { display: block !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } } @media print { .hidden-print { display: none !important; } } /* ---- griglia: col-xs-* = col-* ---- */ .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%; } .col-sm-offset-1, .col-md-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-2, .col-md-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-3, .col-md-offset-3 { margin-left: 25%; } .col-sm-offset-4, .col-md-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-6, .col-md-offset-6 { margin-left: 50%; } /* ---- form ---- */ .form-group { margin-bottom: 15px; } .form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .form-horizontal .form-group > [class*="col-"] { padding-left: 15px; padding-right: 15px; } .control-label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; } .form-horizontal .control-label { padding-top: 7px; margin-bottom: 0; text-align: right; } label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; } .help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; font-size: 12px; } .form-control { height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; } textarea.form-control, select[multiple].form-control, select[size].form-control { height: auto; } .form-control.input-sm, .input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } select.form-control.input-sm, select.input-sm { line-height: 30px; padding-top: 0; padding-bottom: 0; } textarea.form-control.input-sm { height: auto; } .form-control.input-lg, .input-lg { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } select.form-control { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: 12px; } .checkbox, .radio { position: relative; display: block; margin-top: 10px; margin-bottom: 10px; } .checkbox label, .radio label { min-height: 20px; padding-left: 20px; margin-bottom: 0; font-weight: 400; cursor: pointer; } .checkbox input[type="checkbox"], .radio input[type="radio"] { position: absolute; margin-left: -20px; margin-top: 4px; } .checkbox-inline, .radio-inline { position: relative; display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: 400; vertical-align: middle; cursor: pointer; } .checkbox-inline input, .radio-inline input { position: absolute; margin-left: -20px; margin-top: 4px; } .input-group-addon { display: flex; align-items: center; padding: 6px 12px; font-size: 14px; color: #555; text-align: center; background-color: #eee; border: 1px solid #ccc; border-radius: 4px; } .input-group > .input-group-addon:first-child { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .input-group-addon:last-child { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group-btn { display: flex; } .input-group-btn > .btn { border-radius: 0; } .input-group-btn:last-child > .btn { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .input-group-btn:first-child > .btn { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .has-error .form-control { border-color: #a94442; } .has-error .control-label, .has-error .help-block { color: #a94442; } .has-warning .form-control { border-color: #8a6d3b; } .has-success .form-control { border-color: #3c763d; } /* ---- bottoni ---- */ .btn { font-size: 14px; line-height: 1.42857143; border-radius: 4px; padding: 6px 12px; } .btn-default { color: #333; background-color: #fff; border-color: #ccc; } .btn-default:hover, .btn-default:focus { color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; } .btn-block { display: block; width: 100%; } .btn .caret, .caret { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } .dropdown-toggle::after { display: none; } /* la freccia la fa .caret come in BS3 */ .dropdown-toggle:not(:has(.caret))::after { display: inline-block; } .btn-group > .btn + .dropdown-toggle { padding-left: 8px; padding-right: 8px; } /* ---- chiudi (x) di alert/modal BS3 ---- */ button.close, .close { float: right; font-size: 21px; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .2; padding: 0; background: transparent; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .close:hover, .close:focus { color: #000; text-decoration: none; opacity: .5; } .modal-header .close { margin-top: -2px; } .alert-dismissable .close, .alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit; } .alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert-dismissable, .alert-dismissible { padding-right: 35px; } /* ---- modal (markup BS3 dentro BS5) ---- */ .modal-header:has(> .close) { display: block; } /* markup BS3: h4 + .close flottante */ .modal-header:has(> .close)::after { content: ""; display: table; clear: both; } .modal-title { line-height: 1.42857143; } .modal-header h4.modal-title { font-size: 18px; margin: 0; } .modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0; } .modal-footer .btn-group .btn + .btn { margin-left: -1px; } .modal-footer .btn-block + .btn-block { margin-left: 0; } /* ---- dropdown con