:root {
    font-family: 'Montserrat', 'Roboto', Calibri, Arial, Wingdings, 'Cambria Math';
    /*--------*/
    --questionario-bordo: 1px solid #777777;
    --questionario-bordo-raggio: 5px;
    --questionario-sfondo: white;
    /*--------*/
    --questionario-titolo-coloretesto: #0d4085;
    --questionario-titolo-raggio: 3px;
    --questionario-titolo-span-raggio: 0px;
    --questionario-titolo-sfondo: white;
    --questionario-titolo-bordo: 1px solid transparent;
    /*--------*/
    --questionario-sottotitolo-coloretesto: brown;
    --questionario-sottotitolo-raggio: 3px;
    --questionario-sottotitolo-span-raggio: 0px;
    --questionario-sottotitolo-sfondo: white;
    --questionario-sottotitolo-bordo: 1px solid transparent;
    /*--------*/
    --questionario-testacoda-coloretesto: brown;
    --questionario-testacoda-raggio: 3px;
    --questionario-testacoda-span-raggio: 0px;
    --questionario-testacoda-sfondo: white;
    --questionario-testacoda-bordo: 1px solid transparent;
    /*--------*/
    --questionario-footer-pre-coloretesto: #009900;
    --questionario-footer-pre-raggio: 3px;
    --questionario-footer-pre-span-raggio: 0px;
    --questionario-footer-pre-sfondo: white;
    --questionario-footer-pre-bordo: 1px solid transparent;
    /*--------*/
    --questionario-footer-post-coloretesto: brown;
    --questionario-footer-post-raggio: 3px;
    --questionario-footer-post-span-raggio: 0px;
    --questionario-footer-post-sfondo: white;
    --questionario-footer-post-bordo: 1px solid transparent;
    /*--------*/
    --macroquesito-raggio: 3px;
    --macroquesito-bordo: 1px solid #dddddd;
    --macroquesito-bordo-hover: 1px solid blue;
    --macroquesito-sfondo: white;
    --macroquesito-sfondo-hover: #fcfcff;
    /*--------*/
    --quesito-raggio: 2px;
    --quesito-bordo: 1px solid transparent;
    --quesito-bordo-hover: 1px solid #ffff00;
    --quesito-sfondo: transparent;
    --quesito-sfondo-hover: #fffff0;
    /*--------*/
    --sottoquesito-bordo: 1px solid transparent;
    --sottoquesito-bordo-hover: 1px solid #00ff00;
    --sottoquesito-sfondo: transparent;
    --sottoquesito-sfondo-hover: #f0fff0;
    /*--------*/
    --quesito-inside-bordo: 0px dashed cyan;
    --quesito-inside-domanda-bordo: 0px dashed green;
    --quesito-inside-risposta-bordo: 0px dashed pink;
    --quesito-inside-messaggio-raggio: 1px;
    --quesito-inside-messaggio-bordo: 0px dashed red;
    --quesito-inside-messaggio-coloretesto: red;
    --quesito-inside-messaggio-sfondo: lemonchiffon;
    /*--------*/
    --domanda-inside-bordo: 0px solid pink;
    --domanda-coloretesto: #0d4085;
    --domanda-coloretesto-hover: red;
    --domanda-coloretesto-bordo: 0px solid lightblue;
    --domanda-help-coloretesto: #333333;
    --domanda-help-coloretesto-hover: red;
    --domanda-help-bordo: 0px solid red;
    /*--------*/
    --risposta-inside-bordo: 0px solid orange;
    --risposta-bordo: 3px solid blue;
    --risposta-item-bordo: 0px solid orange;
    --risposta-item-valore-bordo: 0px solid yellow;
    --risposta-item-valore-coloretesto: #0d4085;
    --risposta-item-valore-coloretesto-hover: red;
    --risposta-item-label-bordo: 0px solid cyan;
    --risposta-item-help-coloretesto: #333333;
    --risposta-item-help-coloretesto-hover: red;
    --risposta-item-help-bordo: 0px solid gray;
    --risposta-valore-bordo: 1px solid #0d4085;
    --risposta-valore-radio-bordo: 1px solid #0d4085;
    --risposta-valore-text-bordo: 1px solid #0d4085;
    --risposta-valore-number-bordo: 1px solid #0d4085;
    --risposta-valore-email-bordo: 1px solid #0d4085;
    --risposta-valore-password-bordo: 1px solid #0d4085;
    --risposta-label-radio-bordo: 0px solid lightgreen;
    --risposta-help-bordo: 0px solid cyan;
    /*--------*/
}

/*****************************************/
/* Questionario                          */
/*****************************************/
.QS_questionario {
    margin: auto;
    /* 
    width: 90%;
    border: var(--questionario-bordo);
    border-radius: var(--questionario-bordo-raggio);
    background-color: var(--questionario-sfondo);
    box-shadow: 2px 2px 2px 2px #bbbbbb;
    padding: 10px;

    */
}

.QS_questionario_inside {
    background-color: var(--questionario-sfondo);
}
/*****************************************/
/* Testata                               */
/*****************************************/
.QS_testata {
    /*
    */
    display: none;
    border: var(--questionario-testacoda-bordo);
    border-radius: var(--questionario-testacoda-raggio);
    background-color: var(--questionario-testacoda-sfondo);
    margin: 0px 0px 10px 0px;
}

span.QS_testata {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: transparent;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--questionario-testacoda-span-raggio);
    margin: 0px;
}

/*****************************************/
/* Titolo                                */
/*****************************************/
.QS_titolo {
    border: var(--questionario-titolo-bordo);
    border-radius: var(--questionario-titolo-raggio);
    color: var(--questionario-titolo-coloretesto);
    background-color: var(--questionario-titolo-sfondo);
    margin: 0px 0px 10px 0px;
}

span.QS_titolo {
    font-size: var(--GLB-titolo-fontsize);
    font-weight: var(--GLB-titolo-fontweight);
    font-variant: var(--GLB-titolo-fontvariant);
    color: var(--GLB-titolo-fontcolor);

    text-align: center;
    background-color: transparent;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--questionario-titolo-span-raggio);
    margin: 0px 0px 10px 0px;
}

/*****************************************/
/* SottoTitolo                           */
/*****************************************/
.QS_sottotitolo {
    border: var(--questionario-sottotitolo-bordo);
    border-radius: var(--questionario-sottotitolo-raggio);
    color: var(--questionario-sottotitolo-coloretesto);
    background-color: var(--questionario-sottotitolo-sfondo);
    margin: 0px 0px 10px 0px;
}

span.QS_sottotitolo {
    font-size: var(--GLB-sottotitolo-fontsize);
    font-weight: var(--GLB-sottotitolo-fontweight);
    font-variant: var(--GLB-sottotitolo-fontvariant);
    color: var(--GLB-sottotitolo-fontcolor);

    text-align: center;
    background-color: transparent;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--questionario-sottotitolo-span-raggio);
    margin: 0px 0px 10px 0px;
}

/*****************************************/
/* Footer PreBottone                    */
/*****************************************/
.QS_footer_prebottone {
    border: var(--questionario-footer-pre-bordo);
    border-radius: var(--questionario-footer-pre-raggio);
    color: var(--questionario-footer-pre-coloretesto);
    background-color: var(--questionario-footer-pre-sfondo);
    margin: 0px 0px 0px 0px;
}

span.QS_footer_prebottone {
    text-align: center;
    font-size: 1.0rem;
    font-weight: 500;
    background-color: transparent;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--questionario-footer-pre-span-raggio);
    margin: 10px 0px 10px 0px;
}

/*****************************************/
/* Footer PostBottone                    */
/*****************************************/
.QS_footer_postbottone {
    border: var(--questionario-footer-post-bordo);
    border-radius: var(--questionario-footer-post-raggio);
    color: var(--questionario-footer-post-coloretesto);
    background-color: var(--questionario-footer-post-sfondo);
    margin: 0px 0px 0px 0px;
}

span.QS_footer_postbottone {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    background-color: transparent;
    text-align: center;
    border: 1px solid transparent;
    border-radius: var(--questionario-footer-post-span-raggio);
    margin: 10px 0px 10px 0px;
}

/********************************************/
/* QS_macroquesito = Quesito e SottoQuesiti */
/********************************************/
.QS_macroquesito {
    /*
    display: flex;
    width: auto;
    margin: 4px;
    padding: 0px;
    vertical-align: text-top;
    */
    text-align: left;
    border-radius: var(--macroquesito-raggio);
    border: var(--macroquesito-bordo);
    background-color: var(--macroquesito-sfondo);
    margin: 0px 0px 10px 0px;
}

    .QS_macroquesito:hover {
        border: var(--macroquesito-bordo-hover);
        background-color: var(--macroquesito-sfondo-hover);
    }

/***********************************/
/* Quesito = Domanda + Risposta    */
/***********************************/
.QS_quesito_area {
    font-size: 1.0rem;
    cursor: pointer;
    border-radius: var(--quesito-raggio);
}

    .QS_quesito_area:after {
        font-weight: bold;
        color: white;
    }

.QS_quesito_area_consottoquesito {
    border: var(--quesito-bordo);
    background-color: var(--quesito-sfondo);
}

    .QS_quesito_area_consottoquesito:hover {
        border: var(--quesito-bordo-hover);
        background-color: var(--quesito-sfondo-hover);
    }

.QS_quesito_area_senzasottoquesito {
    border: var(--quesito-bordo);
    background-color: var(--quesito-sfondo);
}

    .QS_quesito_area_senzasottoquesito:hover {
        border: var(--quesito-bordo-hover);
        background-color: var(--quesito-sfondo-hover);
    }

.QS_quesito_area_sonounsottoquesito {
    border: var(--sottoquesito-bordo);
    background-color: var(--sottoquesito-sfondo);
}

    .QS_quesito_area_sonounsottoquesito:hover {
        border: var(--sottoquesito-bordo-hover);
        background-color: var(--sottoquesito-sfondo-hover);
    }

.QS_quesito_inside {
    border: var(--quesito-inside-bordo);
    border-radius: 0;
}

.QS_quesito_inside_domanda {
    font-size: 1.0rem;
    border: var(--quesito-inside-domanda-bordo);
    border-radius: 0;
}

.QS_quesito_inside_risposta {
    font-size: 0.9rem;
    border: var(--quesito-inside-risposta-bordo);
    border-radius: 0;
}

.QS_quesito_inside_messaggio {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--quesito-inside-messaggio-coloretesto);
    background-color: var(--quesito-inside-messaggio-sfondo);
    text-align: center;
    border: var(--quesito-inside-messaggio-bordo);
    border-radius: var(--quesito-inside-messaggio-raggio);
}
/********************************/
/*         Domanda              */
/********************************/
.QS_domanda_inside {
    cursor: pointer;
    border: var(--domanda-inside-bordo);
}

.QS_domanda_testo {
    font-weight: 600;
    color: var(--domanda-coloretesto);
    border: var(--domanda-coloretesto-bordo);
}

    .QS_domanda_testo:hover {
        color: var(--domanda-coloretesto-hover);
    }

.QS_domanda_help {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--domanda-help-coloretesto);
    border: var(--domanda-help-bordo);
    border-radius: 0;
}

    .QS_domanda_help:hover {
        color: var(--domanda-help-coloretesto-hover);
    }

/********************************/
/*         Risposta             */
/********************************/
.QS_risposta_inside {
    cursor: pointer;
    border: var(--risposta-inside-bordo);
}

.QS_risposta_item {
    padding: 0px 0px 0px 4px;
    border: var(--risposta-item-bordo);
    border-radius: 0;
}

.QS_risposta_item_valore {
    color: var(--risposta-item-valore-coloretesto);
    border: var(--risposta-item-valore-bordo);
    border-radius: 0;
}

    .QS_risposta_item_valore:hover {
        color: var(--risposta-item-valore-coloretesto-hover);
    }

.QS_risposta_item_help {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--risposta-item-help-coloretesto);
    border: var(--risposta-item-help-bordo);
    border-radius: 0;
}

    .QS_risposta_item_help:hover {
        color: var(--risposta-item-help-coloretesto-hover);
    }

.QS_risposta_valore {
    font-weight: 600;
    cursor: pointer;
    border: var(--risposta-valore-bordo);
}

input.QS_risposta_valore {
    color: green;
    background-color: #f7f7f7;
    border: 1px solid lightgray;
}

input:focus.QS_risposta_valore {
    outline: none !important;
    color: blue;
    background-color: lightcyan;
    border: 1px solid red;
}

input::placeholder.QS_risposta_valore {
    outline: none !important;
    color: gray;
    background-color: transparent;
    border: 0px solid green;
}

input[type=text]:disabled.QS_risposta_valore {
}

input[type=number].QS_risposta_valore {
    width: 100%;
    border: var(--risposta-valore-number-bordo);
}
/*
    input[type=number].QS_risposta_valore::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    */

input[type=text].QS_risposta_valore {
    width: 100%;
    border: var(--risposta-valore-text-bordo);
}

input[type=email].QS_risposta_valore {
    width: 100%;
    border: var(--risposta-valore-email-bordo);
}

input[type=password].QS_risposta_valore {
    width: 100%;
    border: var(--risposta-valore-password-bordo);
}

input[type=radio].QS_risposta_valore {
    border: var(--risposta-valore-radio-bordo);
}

label.QS_risposta_valore {
    border: var(--risposta-label-radio-bordo);
    margin: 0px 0px 0px 4px;
}

.QS_risposta_radiobutton_label {
    border: var(--risposta-label-radio-bordo);
    margin: 0px 0px 0px 4px;
}

.QS_risposta_help {
    display: none;
    border: var(--risposta-help-bordo);
}

/********************************/
/* Barra di navigazione         */
/********************************/
.QS_navigationbar {
    text-align: center;
    border: var(--questionario-testacoda-bordo);
    border-radius: var(--questionario-testacoda-bordo);
    background-color: var(--questionario-testacoda-sfondo);
}

span.QS_navigationbar {
    color: red;
    text-align: center;
    background-color: green;
    border: 1px solid blue;
    box-shadow: 1px 1px 1px 1px #cccccc;
}

input.QS_navigationbar {
    color: red;
    background-color: cyan;
    border: 1px solid lightgray;
}

input[type=submit].QS_navigationbar {
    height: 3rem;
    font-size: 1.0rem;
    font-weight: 500;
    visibility: visible;
    border: 2px solid gray;
    border-radius: 2rem;
    color: brown;
    background-color: rgba(255,255,255,0.4);
    text-decoration: none;
    cursor: pointer;
}

input[type=submit]:hover.QS_navigationbar {
    color: red;
    background-color: rgba(192,192,192,0.4);
}

input[type=submit]:focus.QS_navigationbar {
    color: white;
    background-color: rgba(255,0,0,1);
}

input[type=submit]:active.QS_navigationbar {
    color: blue;
    background-color: rgba(192,192,192,0.4);
}

input[type=submit]:disabled.QS_navigationbar {
    color: white;
    background-color: red;
}

input[type=button].QS_navigationbar {
    height: 3rem;
    font-size: 1.0rem;
    font-weight: 500;
    visibility: visible;
    border: 2px solid gray;
    border-radius: 2rem;
    color: brown;
    background-color: rgba(255,255,255,0.4);
    text-decoration: none;
    cursor: pointer;
}

input[type=button]:hover.QS_navigationbar {             /* MouseMove */
    color: red;
    background-color: rgba(192,192,192,0.4);
}

input[type=button]:focus.QS_navigationbar {             /* MouseClick */
    color: white;
    background-color: rgba(255,0,0,1);
}

input[type=button]:active.QS_navigationbar {            /* MouseDown (active: deve sempre essere posto dopo :focus) */
    color: blue;
    background-color: rgba(192,192,192,0.4);
}

input[type=button]:disabled.QS_navigationbar {
    color: white;
    background-color: red;
}

.QS_primo {
    display: none;
}

.QS_indietro {
    display: none;
}

.QS_avanti {
    display: none;
}

.QS_ultimo {
    display: none;
}

.QS_action {
    display: block;
}

.QS_action_hidden {
    display: none;
}