/**
 *
 *  screen.css
 *
 *  Stili per le pagine del sito su schermo
 *
 *  @author      Carlo Simonelli <cs@tacun.it>
 *  @copyright   Copyright (c) 2021-2024, Tacun
 *  @package     bada
 *  @subpackage
 *  @category    bin
 *  @version     0.8.28
 *  @since       0.1.0
 *
*/

.riga.autocomplete {
    display: flex;
    align-items: center;
    padding: 4px 0;
    text-align: left;
}

/* wrapper interno per input + lista */
.riga.autocomplete .autocomplete-wrapper {
    position: relative;
    flex: 1;
}

/* input full width */
.riga.autocomplete .autocomplete-wrapper input {
    width: 100%;
}

/* lista suggerimenti */
.autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: white;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none;
}

.autocomplete-list li {
    border-bottom: 1px solid #eee;
    padding: 8px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.autocomplete-list li:last-child {
    border-bottom: none;
}

.autocomplete-list li:hover,
.autocomplete-list li.selected {
    background-color: #d0e0ff;
}

.container {
    position: relative;
    display: inline-block;
    font-size: 0;
}

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
               padding: 0;
                margin: 0;
          border-color: #aaa;
}

.hidden {
    display: none !important;
}
.trasparente {
    opacity: 0;
}

.trace {
    background: #900;
    color: #fff;
    font-size: 1rem;
    left: 0px;
    padding: 0.5rem;
    position: fixed;
    top: 0px;
    z-index: 100
}
.trace A {
    color: #fff;
    margin: 0 .5em auto 1em
}

.button {
    font-weight: bold;
    border-style: groove;
    border: solid 1px #ccc;
    cursor: pointer;
    font-size: 0.9rem;
    min-width: 70px;
    padding: 0.5rem 1rem;
    text-align: center;
}

DIV.riga.string.timestamp {
    margin: 0.5rem 0;
}
/**
 *
 *  ELEMENTI SINGOLI
 *
 */

DIV {
    display: inline-block;
}

A {
    color: #090;
    font-weight: bold;
    text-decoration: none;
}
A:hover {
    text-decoration: underline;
}
A.button {
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    cursor: pointer;
}
TD.anchor A {
    color: #090;
    text-decoration: underline;
}
LABEL {
    font-weight: bold;
    display: inline-block;
    min-height: 32px;
}
LABEL:after {
    content: ":";
    padding: 0 4px;
}

FIELDSET {
    border: none;
}
INPUT,
SELECT,
TEXTAREA {
    border: solid 1px #999;
    border-bottom-right-radius: 10px;
    font-family: "Oxanium", "Verdana", "sans-serif";
    font-size: 1rem;
    margin: 0;
    padding: 0.25rem 0.5rem;
    width: auto;
}

OPTION {
    padding-right: 1rem;
}

TABLE {
    empty-cells: show;
}

TABLE, TR, TH, TD {
    border-collapse: collapse;
}

/**
 *
 *  ELEMENTI DELLA PAGINA
 *
 */

HTML {
    font-size:   14pt;
}
BODY {
    padding:     0;
    background:  #eee;
    font-family: "Oxanium", "Verdana", "sans-serif";
}
BODY.wait {
	cursor: wait;
}
BODY HEADER {
    color:      #fff;
    height:     140px;
    position:   fixed;
    text-align: right;
    width:      100%;
    z-index:    20;
}
MAIN {
    display:        inline-block;
    margin-top:     90px;
    padding-bottom: 5rem;
    text-align:     center;
    width:          100%;
}
HEADER IMG#katsu {
    height:      90px;
    position:    relative;
    float:       left;
    margin-left: 1rem;

}

HEADER DIV.titoli {
    background:
        linear-gradient(
            90deg,
            #444 0%,
            #555 45%,
            #666 100%
        );
    padding: 0;
    width: 100%;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 6px 16px rgba(0,0,0,0.3);
    position: relative;
}

HEADER DIV.titoli::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.1),  /* molto più soft */
            rgba(255,255,255,0.1) 1px,  /* linee sottili */
            transparent 1px,
            transparent 8px           /* più spazio tra le righe */
        );
    pointer-events: none;
}

HEADER A.nome-sito {
	font-family: impact;
    font-size: 4.5rem;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fafafa;
    float: left;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.4),
        0 0 8px rgba(0,0,0,0.3);
}

BODY HEADER H1 {
    color: #f5f5f5;
    display: inline-block;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 92px;
    letter-spacing: 0.02em;
    margin-right: 2rem;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.4),
        0 0 8px rgba(0,0,0,0.3);
}

HEADER IMG#katsu {
    height: 90px;
    position: relative;
    float: left;
    margin-left: 1rem;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}

HEADER DIV.menu {
	display:    block;
	padding-right: 2rem;
	text-align: right;
}
NAV#menu-main {
	font-size:     0;
    width: 	       auto;
}
DIV.menu.utente NAV#menu-main {
    float:         right;
}
NAV#menu-main A {
	background:    #d0d0d0;
    border-left:   solid 1px;
    color:         #666;
	display:       inline-block;
    font-size:     1rem;
	padding:       8px 12px 10px;
	position:      relative;
	margin:        0 -4px;
	min-width:     110px;
	text-align:    center;
    border:        solid 1px ;
    z-index:       2;
    box-shadow:    0 6px 4px rgba(0,0,0,0.1);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

NAV#menu-main A:hover ,
NAV#menu-main A.corrente {
	z-index:    10;
	box-shadow: 0 10px 4px rgba(0,0,0,0.1);
}
NAV#menu-main A.corrente {
    background: #eeeeee;
}
NAV#menu-main A#utente-entra,
NAV#menu-main A#utente {
	background-color:#28d183;
	color:           #fff;
    border-bottom-right-radius: 20px;
}
NAV#menu-main A#bada-info {
    background: #2c7956;
    color:      #ffffff;
    min-width:  60px;
    z-index:    1;
}
DIV#utente-destinatario  {
	background:    #d0d0d0;
    border-left:   solid 1px;
    color:         #666;
    float:         left;
    font-size:     1rem;
    padding:       1px 12px 2px 0px;
    position:      relative;
    text-align:    center;
    border:        solid 1px ;
    z-index:       1;
    box-shadow:    0 6px 4px rgba(0,0,0,0.1);
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: unset;
}
DIV#utente-destinatario INPUT.button {
    padding: 6px;
}

DIV#info {
    color:          #ffffff;
    display:        block;
    font-size:      1rem;
    font-weight:    bold;
    line-height:    3rem;
    margin-bottom:  30px;
    height:         3rem;
    opacity:        0;
    position:       relative;
    text-align:     center;
    transition:     opacity 5s ease-in;
    z-index:        1;
}
DIV#info.message {
    background:     #28d183;
	opacity:        1;
    z-index:        100;
}
DIV#info.error {
	background: red;
    color:      #fff;
    opacity:    1;
    transition: opacity 20s ease-in;
    z-index:    100;
}

/**
 *
 *	Pagina di segnalazione degli errori
 *
 */
BODY.errore {
	text-align: center;
	padding: 10%;
}
BODY.errore P {
	margin: 1rem 0;
}
BODY.errore P A.href {
	color: #999;
}
BODY.errore IMG#katsu {
	margin-top: 2rem;
    width: 120px;
}
DIV.session-out {
	background-color: #eee;
	font-size:         0.9rem;
	margin:            3rem auto;
	text-align:        left;
	width:             auto;
}

BODY.error-404 IMG#not-found {
	max-width: 90%;
}
BODY.error-404 P {
	padding: 2rem 0;
}

/**
 *
 *	Pagina indice
 *
 */
BODY.utente-entra {
	margin-top: 50px;
	text-align: center;
	background: #444;
}

BODY.utente-entra::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.1),  /* molto più soft */
            rgba(255,255,255,0.1) 1px,  /* linee sottili */
            transparent 1px,
            transparent 8px           /* più spazio tra le righe */
        );
    pointer-events: none;
}

BODY.utente-entra HEADER {
    background:     transparent;
    color:          #fff;
    height:         auto;
    position:       relative;
    text-align:     center;
}
BODY.utente-entra HEADER A.nome-sito {
    font-size: 4.5rem;
    font-weight: 700;
    float: none;
    letter-spacing: 0.04em;
    color: #fafafa;
    text-shadow:
        0 8px 0 rgba(0,0,0,0.4),
        0 0 8px rgba(0,0,0,0.3);
}

BODY.utente-entra HEADER H1 {
    color:  #28d183;
}
BODY.utente-entra  IMG#katsu {
    height:      90px;
    position:    relative;

}
BODY.utente-entra MAIN {
    margin:    auto;
    padding:   0;
    width:     auto;
}
BODY.utente-entra SECTION#form-login FORM {
	height: 148px;
	margin: 2rem auto;
}
BODY.utente-entra SECTION#form-login FORM INPUT {
	width: 13rem;
}
BODY.utente-entra SECTION#form-login FORM LABEL {
	min-width: 7rem;
	color:  #fff;
}
BODY.utente-entra SECTION#form-login FORM DIV.barra {
	margin: 1rem;
	text-align: center;
}
BODY.utente-entra SECTION#form-login FORM INPUT.button {
    width: 6rem;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;

}
INPUT.button.cerca,
INPUT.button.submit {
	background: #009900;
	color:      #ffffff;
	padding:    8px;
    min-width:  88px;
}
INPUT.button.reset {
    opacity: 40%;
    padding: 4px 1rem;
}

A.button        { background: #f29000 }
A.button.gpt    { background: #74AA9C }
A.button.submit { background: #009900 }
A.button.delete { background: #990000 }


/**
 *
 *	ELENCHI
 *
 */

TABLE.elenco {
 	margin: auto;
 	background-color: #fff;
 }

TABLE.elenco TH ,
TABLE.elenco TFOOT TR TD {
	background:  #999;
    color:       #fff;
    padding:     8px 20px;
}

TABLE.elenco TFOOT TR TD {
    text-align: right;
    height: 38px;
}

TABLE.elenco TR {
	background-color: #eee;
}

TABLE.elenco TR.associato ,
TABLE.elenco TR.in-perimetro {
    background-color: #9fdf0066;
}
TABLE.elenco TR.sospeso {
	background-color: #ccc;
}

TABLE.elenco TR:hover {
	background-color: #28d183c2 !important;
}

TABLE.elenco TD {
    color: #000;
    line-height: 1rem;
    border: solid 2px #fff;
    padding: 4px 20px;
    height: 38px;
}
TABLE.elenco TD.button {
	padding: 0;
}

SECTION.elenco {
	text-align: center;
	padding: 1rem;
}

SECTION.elenco H2 {
	padding: 1rem 0;
}

SECTION.elenco H2:before {
    position: relative;
    font-size: 16px;
    line-height: 1;
    padding-right: 0.5rem;
}
SECTION.elenco H2.hidden-table:before {
    content: "▼";
}
SECTION.elenco H2.hidden-table.show:before {
    content: "▶";
}

DIV.barra-elenco {
    background-color:   #666;
    color:          #fff;
    padding:            10px 30px 10px;
    width:              auto;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
DIV.barra-elenco DIV {
	padding-left: 1rem;
	height: 100%;
	position: relative;
}
DIV.barra-elenco DIV.nuovo {
	font-size: 0;
}
DIV.barra-elenco DIV.nuovo IMG {
	height: 35px;
}
DIV.barra-elenco FORM {
	margin-left: 10px;
	float: right;
}
DIV.barra-elenco FORM FIELDSET {
	display: inline-block;
}
DIV.barra-elenco SPAN {
	padding-left: 0.5em;
}

DIV.barra-elenco INPUT.chiave {
	margin: 0 8px;
}
P.elenco-info {
	padding:   1rem;
	font-size: 0.9em;
	color:     #666;
}

SECTION.elenco DIV.pager ,
SECTION.elenco P.no-record {
	color:     #555;
	font-size:   1rem;
	padding:     1rem;
	display:     block;
}
SECTION.elenco DIV.pager DIV.centro {
	padding: 0.5em
}
SECTION.elenco DIV.pager A {
	background: #28d183;
	color:      #ffffff;
    padding:    0.5rem;
}

TD.valore.subject {
	text-align: left;
}

/**
 *
 *	MASCHERE DI INPUT
 *
 */

DIV.form {
	padding: 1rem 0 0 0;
}
DIV.form H2 {
	font-size: 1.25rem;
	padding-bottom: 2rem;
}
FORM DIV.riga {
	padding: 4px 0;
	display: block;
	text-align: left;
}
FORM DIV.riga.string {
	margin: 1em 0;
}
FORM DIV.riga.string SPAN {
	display: inline-block;
}
FORM DIV.riga A {
	text-decoration: underline;
	color: #666;
}
FORM DIV.riga A:hover {
	color: #28d183;
}

/** Etichette radiobutton */
FORM DIV.riga.radio SPAN {
	margin-right: 4px;
}

FORM DIV.barra {
    display:    block;
    margin:     2rem 0;
    text-align: right;
    height:     48px;
}
FORM DIV.barra FIELDSET {
	border: none;
}

/** Link nella barra della form */
FORM DIV.barra A {
    padding: 0 1em;
}
FORM DIV.barra A.new {
    border-left: solid 1px;
	padding: 0 1em;
}
FORM DIV.barra A.back {
	color:     #28d183;
	line-height:   40px;
	float:         left;
	padding:       0;
}
FORM DIV.barra A:hover {
	color: #28d183;
}
FORM DIV.barra INPUT.button {
    background-color: #28d183;
    color: #fff;
    padding: 8px;
    width: 88px;
}
FORM DIV.barra A.button {
	border-bottom-right-radius: 10px;
    color: #fff;
    padding: 8px;
    min-width: 88px;
}

DIV.riga.data FIELDSET {
	display: inline-block;
}

/**
*
*   INFO
*
*/
SECTION#info-bada {
	margin:     auto;
	text-align: center;
	width:      420px;
	max-width:  90%;
}
SECTION#info-bada IMG#katsu {
	margin-bottom: 2rem;
	width: 120px;
}
SECTION#info-bada P {
	margin-bottom:  1rem;
	text-align:     justify;
    hyphens:        auto;
    overflow-wrap:  break-word;
    word-break:     break-word;
}
SECTION#info-bada B.nome-sito {
	color: #990000;
}
SECTION#info-bada UL {
	text-align: left;
	margin: 1rem;
}
SECTION#info-bada LI {
	margin-bottom: 1rem;
}
SECTION#info-bada P.katsu {
    font-size: 0.9rem;
    font-style: italic;
    margin-top: 5rem;
}

/**
*
*   UTENTE
*
*/
FORM[id^='utente-'] LABEL {
	min-width: 7rem;
	float: left;
}

TABLE.elenco.utente-elenco TD.nome ,
TABLE.elenco.utente-elenco TD.cognome {
	text-align: left;
}


/**
 *
 *  FEED
 *
 */

TABLE.elenco.feed-elenco TD.title {
	max-width:  60rem;
    text-align: left;
}
TABLE.elenco.feed-elenco TD.title SMALL ,
TABLE.elenco.feed-elenco TD.title SPAN ,
TABLE.elenco.feed-elenco TD.title A {
	display: block;
	padding: 8px 0;
}

/**
 *
 * PRODOTTO
 *
 */
FORM[id^='prodotto-'] {
	width: auto;
}
FORM[id^='prodotto-'] LABEL {
    float:      left;
	min-width:  10rem;
}
FORM[id^='prodotto-'] INPUT[type=text] {
    width: 24rem;
}

TABLE.elenco.prodotto-elenco TD.nome,
TABLE.elenco.prodotto-elenco TD.vendor ,
TABLE.elenco.prodotto-elenco TD.anchor.prodotto {
	text-align: left;
}
TABLE.elenco.prodotto-elenco TD.nome,
TABLE.elenco.prodotto-elenco TD.vendor {
	min-width: 20rem;
}

/**
 *
 *  CPE
 *
 */
DIV.form.cpe {
	margin-bottom: 2rem;
}
FORM[id^='cpe-'] {
	min-width: 460px;
}
FORM[id^='cpe-'] LABEL {
    min-width: 8rem;
    float: left;
}
FORM[id^='cpe-'] DIV.prodotto SPAN{
	font-size: 1.1rem;
	font-weight: bold;
}


TABLE.cpe-elenco TD {
	text-align: center;
}
TABLE.cpe-elenco TD.vendor   ,
TABLE.cpe-elenco TD.prodotto {
	text-align: left;
}

/**
 *
 *  DESTINATARIO-CPE
 *
 */

FORM[id^='destinatario-cpe-'] LABEL {
    min-width: 9rem;
    float: left;
}
FORM[id^='destinatario-cpe-'] SELECT#vendor {
	width: 20rem;
}
FORM[id^='destinatario-cpe-'] SELECT#prodotto {
    width: 20rem;
}
FORM[id^='destinatario-cpe-'] SELECT#target_sw {
    width: 15rem;
}
FORM[id^='destinatario-cpe-'] INPUT#versione {
    width: 15rem;
}
FORM[id^='destinatario-cpe-'] DIV.barra {
	text-align: center;
}

TABLE.elenco.destinatario-cpe TR TD.prodotto {
	text-align: left;
}

/**
 *
 *  DESTINATARIO-UTENTE
 *
 */

TABLE.elenco.destinatario-utente-elenco TR TD.utente {
    text-align: left;
}

/**
 *
 *  VENDOR
 *
 */

TABLE.vendor-elenco TR TD.valore {
    text-align: left;
    min-width: 250px;
}
FORM[id^='vendor-'] LABEL {
    min-width: 9rem;
    float: left;
}
FORM[id^='vendor-'] INPUT {
    width: 35rem;
}

/**
 *
 *  DESTINATARIO
 *  NOTA: deve stare sotto a destinatario-cpe
 *
 */
FORM[id^='destinatario-'] LABEL {
    min-width: 9rem;
    float: left;
}
FORM[id^='destinatario-'] INPUT {
    width: 35rem;
}
FORM[id^='destinatario-'] TEXTAREA {
    width: 35rem;
    height: 4rem;
}

TABLE.elenco.destinatario TR TD {
    text-align: left;
}
TABLE.elenco.destinatario TR TD.n-cpe,
TABLE.elenco.destinatario TR TD.n-referenti {
	text-align: center;
}

SECTION.destinatario_utente.elenco TD.fine {
    min-width: 10rem;
}

/**
 *
 *  CVE
 *
 */
FORM[id^='cve-'] LABEL {
    min-width: 9rem;
    float: left;
}
FORM[id^='cve-'] DIV.text INPUT {
    width: 16rem;
}
FORM[id^='cve-'] DIV.text INPUT#title {
    width: 50rem;
}
FORM[id^='cve-'] DIV.text INPUT[id^='cvss-'] {
    width: 40rem;
}
FORM[id^='cve-'] TEXTAREA {
    width: 50rem;
    height: 10rem;
}
FORM[id^='cve-'] DIV.string {
	margin: 1em 0;
}
FORM[id^='cve-'] DIV.string DIV ,
FORM[id^='cve-'] DIV.string SPAN {
	max-width: 50rem;
}
FORM[id^='cve-'] DIV.string.cwe DIV {
    max-width: 50rem;
}
FORM[id^='cve-'] DIV.string.cvss-3 SPAN {
	font-weight: bold;
	padding: 0.5em
}

DIV.barra.cve-reference-new {
	display: block;
	margin:  1rem auto;
}
DIV.barra.cve-reference-new FORM {
  padding:      1rem 2rem;
  background:   #999999;
  display:      inline-block;
}
DIV.barra.cve-reference-new LABEL {
	color: #ffffff
}
DIV.barra.cve-reference-new INPUT#nuova-url {
	width: 30rem;
}

TABLE.cve-elenco-cpe TD.prodotto {
	text-align: left;
}

/**
 *
 *  CVE_CPE
 *
 */
FORM[id^='cve-cpe'] {
    min-width: 460px;
}
FORM[id^='cve-cpe'] LABEL {
    min-width: 10rem;
    float: left;
}
FORM[id^='cve-cpe'] .text INPUT {
    width: 20rem  !important;
}
FORM[id^='cve-cpe'] .radio INPUT {
    width: auto;
    margin: 0 0.5em;
}


BODY.cve-import SECTION {
	background:	#f8f8f8;
	border:		1px solid #ccc;
	margin:		1rem auto;
	overflow:	auto;
	padding:	10px;
	text-align:	left;
	width:		80%;

}
SECTION.json DIV.out {
	font-size:	9pt;
}

TABLE.elenco.cve TR.visibile {
	background-color: #ffd51e;
}

TABLE.elenco.cve TD.title {
	text-align: left;
	width: 40rem;
	max-width: 80rem;
}

.undefined { background-color: #999999 !important }
.low       { background-color: #649900 !important }
.medium    { background-color: #ffd51e !important }
.high 	   { background-color: #f29000 !important; color: #ffffff; }
.critical  { background-color: #cb0118 !important; color: #ffffff; }

/**
 *
 *  KPI
 *
 */
FORM[id^='kpi-'] LABEL {
    min-width: 10rem;
    float: left;
}
FORM[id^='kpi-'] DIV.text INPUT {
    width: 35rem;
}
FORM[id^='kpi-'] TEXTAREA {
    width: 35rem;
    height: 4rem;
}

/**
 *
 *  BOLLETTINO
 *
*/
DIV.form.bollettino {
    padding: 1rem;
}
DIV.form.bollettino.chiuso {
    background-color: #cccccc;
}
FORM[id^='bollettino-'] LABEL {
    min-width: 11rem;
    float: left;
}
FORM[id^='bollettino-'] INPUT[type='text'] {
    width: 400px;
}
FORM[id^="bollettino-"] DIV.riga {
    display: block;
    padding: 4px 0;
    min-height: 2rem;
}
FORM[id^="bollettino-"] DIV.riga SELECT,
FORM[id^="bollettino-"] DIV.riga OPTION,
FORM[id^="bollettino-"] DIV.riga TEXTAREA,
FORM[id^="bollettino-"] DIV.riga INPUT[type=text] {
    font-size: 1rem;
}
FORM[id^="bollettino-"] DIV.riga TEXTAREA,
FORM[id^="bollettino-"] DIV.riga INPUT[type='text'] {
    width:   50rem;
    padding: 4px;
}
FORM[id^="bollettino-"] DIV.riga TEXTAREA {
    height: 10rem;
}
FORM[id^="bollettino-"] DIV.riga.img IMG {
    max-width: 300px;
    border: solid 1px ;
}

FORM DIV.barra A.button.send {
    background-color: #ffaa00;
    color: #fff;
    padding: 8px;
    width: 88px;
}

/* --- Tabelle elenco --- */
TABLE.bollettino-elenco TR.published {
    background-color: #fff;
}

SECTION.elenco.bollettino-cpe-elenco TD.prodotto,
SECTION.elenco.bollettino-cwe-elenco TD.nome,
SECTION.elenco.bollettino-reference-elenco TD.url {
    text-align: left;
}

#bollettino-elenco-cpe TH,
#bollettino-elenco-cpe TD {
    border: 1px solid #ccc;
    padding: 6px 8px;
    vertical-align: top;
}

#bollettino-elenco-cpe UL {
    margin: 4px 0 8px 16px;
    padding: 0;
    list-style-type: disc;
}

#bollettino-elenco-cpe strong {
    display: block;
    margin-top: 4px;
}

DIV.string.bollettino-publish SPAN {
    background-color: #f29000;
    color: #fff;
    padding: 4px;
}

DIV.barra.bollettino-invio-new ,
DIV.barra.destinatario-cpe-new {
	display:       block;
	margin-bottom: 2rem;
}

/* --- Anteprima bollettino --- */
SECTION#bollettino-anteprima {
    margin: auto;
    max-width: 90%;
    padding: 1em 2em;
    text-align: left;
    width: 210mm;
}
SECTION#bollettino-anteprima DIV {
    display: block;
}
SECTION#bollettino-anteprima IMG#og-image {
    margin: 1rem 0;
    max-width: 500px;
    border-bottom-right-radius: 20px;
}
SECTION#bollettino-anteprima H1,
SECTION#bollettino-anteprima H2,
SECTION#bollettino-anteprima H3,
SECTION#bollettino-anteprima H4 {
    color:          #333;
    font-weight:    bold;
    text-align:     left;
    font-variant:   all-small-caps;
    padding:        0;
    margin:         0;
    margin-bottom:  1rem;
}
SECTION#bollettino-anteprima H1 { font-size: 2.5rem }
SECTION#bollettino-anteprima H2 { font-size: 2rem }
SECTION#bollettino-anteprima H3 { font-size: 1.2rem; margin: 2rem 0 0.5rem 0; }
SECTION#bollettino-anteprima P {
    text-align: justify;
    hyphens:        auto;
    overflow-wrap:  break-word;
    word-break:     break-word;
}
SECTION#bollettino-anteprima P.tpl {
    font-weight: bold;
    margin-bottom: 1rem;
}
SECTION#bollettino-anteprima P.data {
    color: #333;
    font-weight: bold;
    font-size: 0.9rem;
    text-transform: lowercase;
}
SECTION#bollettino-anteprima P.scope {
    font-size: 0.9rem;
    color: #999;
    text-transform: lowercase;
    font-family: monospace;
    margin: 1rem 0;
}
SECTION#bollettino-anteprima P.description {
    padding: 1rem 0;
}

SECTION#bollettino-anteprima TABLE,
SECTION#bollettino-anteprima TABLE TR,
SECTION#bollettino-anteprima TABLE TR TH,
SECTION#bollettino-anteprima TABLE TR TD { border: solid 1px #666; }
SECTION#bollettino-anteprima TABLE { margin: 1em 0; font-size: 11pt; }
SECTION#bollettino-anteprima TABLE TH,
SECTION#bollettino-anteprima TABLE TD { padding: 0.5em; }
SECTION#bollettino-anteprima TABLE TD.cwe {
	min-width: 6rem;
	text-align: center;
}
SECTION#bollettino-anteprima TABLE TH { background: #666; color: #fff; text-align: center; }
SECTION#bollettino-anteprima TABLE TD.target_sw { text-align: center; }
SECTION#bollettino-anteprima TABLE TD.vendor { text-align: center; vertical-align: top; font-weight: bold; }
SECTION#bollettino-anteprima TABLE TD.prodotto { text-align: left; vertical-align: top; font-weight: bold; color: #666; }
SECTION#bollettino-anteprima DIV.barra.invia,
SECTION#bollettino-anteprima DIV.barra.readonly {
	border-top: solid 1px;
	margin-top: 3rem;
	padding:    1rem 0;
    display: inline-block;
    text-align: left;
    width: 100%;
}
SECTION#bollettino-anteprima TABLE#bollettino-elenco-cve TD.cve {
    white-space: nowrap;
}
SECTION#bollettino-anteprima TABLE#bollettino-elenco-cve TD.score {
    color: #666;
    font-weight: bold;
    text-align: center;
    word-break: normal;
}
SECTION#bollettino-anteprima TABLE#bollettino-elenco-cve TD.cvss {
	white-space: normal;
	word-break: break-all;
}


SECTION#bollettino-anteprima TABLE#bollettino-elenco-ref ,
SECTION#bollettino-anteprima TABLE#bollettino-elenco-ref TR,
SECTION#bollettino-anteprima TABLE#bollettino-elenco-ref TD {
	border: none;
}

SECTION#bollettino-anteprima TABLE#bollettino-elenco-ref TD A {
	font-size:       1rem;
	text-decoration: underline;
}

SECTION#bollettino-anteprima DIV.barra.invia INPUT { float: right; background-color: orange; }

/* --- Sezione principale dei bollettini --- */
SECTION#bollettino-pubblicati {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    min-height: auto;
    padding: 1rem;
}

/* Contenitore griglia centrato */
SECTION#bollettino-pubblicati DIV.grid {
    display: grid;
    gap: 2em 1em;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* Articoli singoli */
SECTION#bollettino-pubblicati ARTICLE {
    background: #fff;
    color: #000;
    border: solid 1px #666;
    text-align: left;
    height: 460px;           /* Altezza fissa desktop */
    box-shadow: 0 10px 4px rgba(0,0,0,0.1);
    border-bottom-right-radius: 20px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease; /* animazione fluida */
}

/* Immagine articolo */
SECTION#bollettino-pubblicati ARTICLE DIV.img {
    background-color: #666;
    height: auto;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 0;
}
SECTION#bollettino-pubblicati ARTICLE IMG {
    width: 100%;
    aspect-ratio: 2/1;
}

/* Info articolo */
SECTION#bollettino-pubblicati ARTICLE DIV.info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
SECTION#bollettino-pubblicati ARTICLE H2 {
    color: #000;
    font-size: 1.5rem;
    padding: 0.5rem 0;
}
SECTION#bollettino-pubblicati P.subject {
    font-weight: bold;
}
SECTION#bollettino-pubblicati P.date {
    font-size: 0.9rem;
}
SECTION#bollettino-pubblicati P.description {
    font-size: 0.9rem;
    padding: 0.5rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
}

/* Bottone Load more */
#load-more-container {
    display: block;
    text-align: center;
    margin: 2rem 0;
}
#load-more {
    padding: 0.6em 1.2em;
    font-size: 1rem;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s, transform 0.3s;
}
#load-more:hover:not(:disabled) {
    background-color: #0056b3;
}
#load-more:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Animazione per i nuovi articoli */
SECTION#bollettino-pubblicati ARTICLE {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Ottimizzazioni per mobile --- */
@media screen and (max-width: 768px) {
    SECTION#bollettino-pubblicati DIV.grid {
        gap: 1em 0.5em;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    SECTION#bollettino-pubblicati ARTICLE {
        height: auto;              /* Altezza automatica su mobile */
        min-height: 400px;         /* Mantiene un minimo uniforme */
    }

    SECTION#bollettino-pubblicati ARTICLE DIV.img {
        height: 150px;             /* Immagini più basse su mobile */
    }

    SECTION#bollettino-pubblicati ARTICLE DIV.info {
        padding: 0.5rem;
    }

    SECTION#bollettino-pubblicati ARTICLE H2 {
        font-size: 1.2rem;
    }

    SECTION#bollettino-pubblicati P.description {
        -webkit-line-clamp: 3;     /* massimo 3 righe su mobile */
    }
}

/**
 *
 *  Gestione responsive
 *
 */
@media (max-width: 800px) {

    BODY.utente-entra MAIN {
        width: 90%;
    }
    BODY.utente-entra SECTION#form-login FORM {
        width: auto;
    }

    BODY.utente-entra FORM#utente-login DIV.riga {
       display: inline-block;
    }

}

@media (max-width: 375px) {

	A {
	   text-decoration: underline;
	}
    BODY HEADER {
        text-align: center;
        height:     180px;;
        padding:    0;
    }

    BODY MAIN {
        margin-top: 180px;
    }
    BODY HEADER H1 {
        font-size:   1.6rem;
        line-height: 2rem;
        text-align: center;
        margin: 0;
    }

    BODY.utente-entra HEADER H1 {
        display: unset;
    }

    HEADER DIV.titoli {
        padding: 1rem;
    }
    HEADER DIV.nome-sito {
        font-size:   3rem;
        line-height: 4rem;
        padding:     0;
        float:       none;
    }

	SECTION H2 {
	   max-width: 90%;
	   margin: auto;
	}

    SECTION#bollettino-pubblicati ARTICLE {
        float:      none;
        margin:     0 auto 30px auto;
    }

    SECTION#bollettino-anteprima {
        margin:     auto;
        padding:    1em 0;
        text-align: left;
        width:      100%;
    }
    SECTION#bollettino-anteprima DIV {
        overflow-x: auto;
    }
    SECTION#bollettino-anteprima P.scope {
        text-align: left;
    }
    SECTION#bollettino-anteprima IMG#og-image {
        width: 100%;
    }
	SECTION#bollettino-anteprima H1,
	SECTION#bollettino-anteprima H2,
	SECTION#bollettino-anteprima H3,
	SECTION#bollettino-anteprima H4 {
	    line-height: 1;
	    margin:         1rem 0;
	}

}