/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

.roboto-mono-bold { font-family: "Roboto Mono", monospace; font-optical-sizing: auto; font-weight: 700; font-style: normal;}
.lora-regular { font-family: "Lora", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; }
.titillium-web { font-family: "Titillium Web", sans-serif; }
.titillium-web-extralight           { font-family: "Titillium Web", sans-serif; font-weight: 200; font-style: normal; }
.titillium-web-light                { font-family: "Titillium Web", sans-serif; font-weight: 300; font-style: normal; }
.titillium-web-regular              { font-family: "Titillium Web", sans-serif; font-weight: 400; font-style: normal; }
.titillium-web-semibold             { font-family: "Titillium Web", sans-serif; font-weight: 600; font-style: normal; }
.titillium-web-bold                 { font-family: "Titillium Web", sans-serif; font-weight: 700; font-style: normal; }
.titillium-web-black                { font-family: "Titillium Web", sans-serif; font-weight: 900; font-style: normal; }
.titillium-web-extralight-italic    { font-family: "Titillium Web", sans-serif; font-weight: 200; font-style: italic; }
.titillium-web-light-italic         { font-family: "Titillium Web", sans-serif; font-weight: 300; font-style: italic; }
.titillium-web-regular-italic       { font-family: "Titillium Web", sans-serif; font-weight: 400; font-style: italic; }
.titillium-web-semibold-italic      { font-family: "Titillium Web", sans-serif; font-weight: 600; font-style: italic; }
.titillium-web-bold-italic          { font-family: "Titillium Web", sans-serif; font-weight: 700; font-style: italic; }

/* ------------------------- */
/* COLOR DEFINITION - inizio */

:root {
  --scale: 0.1;    
    
  --color-bg-disabled: #D9DADB;
  --color-bg-primary: #0066cc;
  --color-bg-primary-hover: #004D99;
  --color-bg-primary-active:#003366;
  --color-bg-secondary: #5C6F82;
  --color-bg-secondary-hover: #2F475E;
  --color-bg-secondary-active: #17324D;
  --color-bg-success: #008055;
  --color-bg-success-hover: #006644;
  --color-bg-success-active: #004D33;
  --color-bg-error: #CC334D;
  --color-bg-warning: #995C00;
  --color-bg-footer: #003366;
  
  --color-white: #ffffff;   /* White */
  --color-light-blue: #8AC6FF; /* Light Blue */
  --color-blue-25: #004080;
  --color-blue-30: #004d99; /* BG Header */
  --color-blue-40: #0066cc;
  --color-blue-87: #bfdfff;
  --color-blue-97: #f2f7fc; /* BG Body */
  --color-slate-44: #5c6f82; /* Primo Grigio accessibile su bianco */
  --color-slate-20: #17324d;
  --color-gray-96: #f5f5f5;
  --color-gray-90: #e5e5e5;
  
  --color-text-base: #1A1A1A;
  --color-text-primary: #0066cc;
  --color-text-primary-hover: #004D99;
  --color-text-secondary: #2F475E;
  --color-outline-focus: #1A1A1A;
  --color-text-link: #06c;
  --color-text-link-hover: #0052a3;
  --color-text-danger: #cc334d;
  
  --text-h1-lg: 700 48px/56px "Titillium Web", sans-serif;
  --text-sans: 400 16px/24px "Titillium Web", sans-serif;
  --text-sans-lg: 400 18px/28px "Titillium Web", sans-serif;
  --text-serif-lg: 400 18px/28px "Lora", serif;
  --text-mono-lg-display-bold: 700 24px "Roboto Mono", monospace;

  --border-subtle: #C5C7C9;    
}

/* COLOR DEFINITION - fine   */
/* ------------------------- */

/* ------------------------- */
/* GENERICHE - inizio        */

.container-sm                       { padding: 0 36px; }

*:focus,
a:focus,
input[type=checkbox]:focus,
input[type=file]:focus,
input[type=radio]:focus,
.fruity .btn:focus,
.checkbox-item input[type="checkbox"]:focus + label::before,
.checkbox-item input[type="radio"]:focus + label::before            { outline: 2px dashed var(--color-outline-focus) !important; outline-offset:4px; }


body                                { font:var(--text-sans-lg); padding-top: 0 !important; background-color: var(--color-blue-97) !important; color:var(--color-text-base); padding-bottom:0 !important;}
header                              { background-color: var(--color-blue-30); color: var(--color-white); padding-top: 16px; position: -webkit-sticky; position: sticky; top: 0px; z-index: 2000; transition: transform 0.3s ease; }
footer                              { background: var(--color-bg-footer); color:#ffffff; padding: 48px 0px ;} 
p                                   { line-height: 150%;font-size: 16px;}
.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6              { color: var(--color-text-base); margin-bottom:24px;}
.h1 small, .h2 small, .h3 small, 
.h4 .small, .h5 small, .h6 small,
h1 small, h2 small, h3 small,
h4 small, h5 small, h6 small        { color: var(--color-text-secondary); font-size:55%;}
.h1,h1                              { font:var(--text-h1-lg); margin-top: 24px;}
.h1,h1                              { font:var(--text-h1-lg); margin-top: 24px;}
p                                   { font-size: 18px; color: var(--color-text-base) }

.fruity a                           { color:var(--color-text-link); text-decoration:underline; }
.fruity a:hover,
.fruity a:focus                     { color:var(--color-text-link-hover); }

.fruity hr                          { border-top: 1px solid var(--color-gray-90);}

@media (max-width: 767.9px) {
    h1, .h1                             {font-size: 4rem; line-height: 5.2rem;}
}

/* GENERICHE - fine          */
/* ------------------------- */

/* ------------------------- */
/* UTILITY - inizio          */

.clearfix:after { content: ""; display: table; clear: both; }

.w-25                       { width: 25%!important }
.w-50                       { width: 50%!important }
.w-75                       { width: 75%!important }
.w-100                      { width: 100%!important }

.p-0                        { padding:0 !important; }
.p-4                        { padding:24px !important;}

.shadow-l                   { box-shadow: 0 16px 48px 0 rgba(28,54,209,0.15) !important ;}
.shadow-m                   { box-shadow: 0 8px 16px 0 rgba(28,54,209,0.15) !important ;}
.shadow-s                   { box-shadow: 0 4px 4px 0 rgba(28,54,209,0.15) !important ;}

.color-red                  { color:var(--color-bg-error); } 

.text-left                  { text-align: left!important }
.text-right                 { text-align: right!important }
.text-center                { text-align: center!important }
.text-semibold              { font-weight:600;} 

.font-display-5             { font: 600 20px/24px "Titillium Web", sans-serif; }

.d-none                     { display: none!important }
.d-flex                     { display: -ms-flexbox!important; display: flex!important }
.flex-row-reverse           { -ms-flex-direction: row-reverse!important; flex-direction: row-reverse!important }
.flex-column                { -ms-flex-direction: column!important; flex-direction: column!important }
.flex-column-reverse        { -ms-flex-direction: column-reverse!important; flex-direction: column-reverse!important }
.flex-fill                  { -ms-flex: 1 1 auto!important; flex: 1 1 auto!important }
.justify-content-between    { -ms-flex-pack: justify!important; justify-content: space-between!important }   
.justify-content-center     { -ms-flex-pack: center!important; justify-content: center!important }
.justify-content-end        { -ms-flex-pack: end!important; justify-content: flex-end!important }
.align-items-center         { -ms-flex-align: center!important; align-items: center!important }

@media (min-width: 768px) {
    .container-sm               { width: 700px;} /* con questa larghezza la descrizione con fonr LORA dopo il titolo del gruppo è accessibile perchè raggiunge i 75 caratteri per riga */
    .d-md-block                 { display: block!important }
    .flex-md-row                { -ms-flex-direction:row!important;  flex-direction: row!important }
    .text-md-left               { text-align:left!important }
    .text-md-right               { text-align:right!important }
}



/* UTILITY - fine          */
/* ------------------------- */

/* ------------------------- */
/* HEADER - inizio           */

.navbar-action-link                     { padding-right:0; }
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover     { color:#ffffff; }

.top-navbar                             { padding-bottom:8px; }
.top-navbar-title                       { padding-top: 16px; padding-right: 100px; width:100%; font-size: 14px; }
.top-navbar-mim                         { width:auto; }
.questionario-label                     { color: var(--color-light-blue); }
.questionario-title                     { min-height:0; color: var(--color-white); font-weight:600; font-size:22px; }
.noNavbar .top-navbar-title             { padding-right:0;}
.noNavbar .questionario-label           { text-align:center;}
.noNavbar .questionario-title           { text-align:center;}
.emblema                                { width:30px; padding-left:8px;} 
.scritta-mim                            { padding-left:8px; font-size: 14px; line-height: 20px;} 

.navbar                                 { margin-bottom:0; min-height: 16px; }
.navbar-toggle                          { margin-right:0px; }
.fruity .navbar-toggle                  { padding: 12px 18px; }
.navbar-default .navbar-brand           { padding:4px 0 0 0; min-height:0; color: var(--color-white); font-weight:700; font-size:21px;} 
.navbar-header                          { position: absolute; right: 0px; top: -77px; }
.fruity .navbar-collapse                { box-shadow:none; padding:0; }
.fruity .navbar                         { background:none; box-shadow: none; border: none; }
.navbar-nav>li                          { background: rgb(255,255,255);}
.navbar-default .navbar-nav>li>a        { margin-left:1px; margin-right:1px; color:#ffffff; background: var(--color-blue-30); padding: 24px 24px; font-size: 18px; transition: background 0.3s; text-align: center;}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.fruity .nav .open>a:hover,
.fruity .nav .open>a:focus,
.fruity .nav .open>a                    {  color:#ffffff !important; background: var(--color-blue-25); }
.fruity .navbar a.animate:after         { background-color:#ffffff; }

.fruity header .dropdown-menu>.disabled>a,
.fruity header .dropdown-menu>.disabled>a:hover{ color: var(--color-text-primary-hover) !important; background:var(--color-blue-97) !important;  }

.fruity header .bg-warning,
.fruity header .bg-warning:hover               { background-color: var(--color-blue-97) !important;  }
.fruity header .dropdown-menu>li.bg-warning>a  { border-left: 4px solid #94c4f5 !important }
.fruity header .dropdown-menu>li.bg-warning>a:hover {border-left: 4px solid var(--color-text-primary-hover) !important;}

.fruity header .dropdown-menu>li>a             { color:var(--color-text-primary) !important; border-left: 4px solid #ffffff !important; padding: 16px 24px !important; text-align:center; }
.fruity header .dropdown-menu>li>a:hover,
.fruity header .dropdown-menu>li>a:focus       { color:var(--color-text-primary-hover); background:#ffffff; border-left: 4px solid var(--color-text-primary-hover);}

.navbar-collapse                                {margin: 0px -15px;}
.navbar-action-link                             { margin-bottom:0;}

@media (min-width: 768px) {
    .top-navbar-title                       { padding: 0; width:75%; }
    .noNavbar .questionario-label           { text-align:left;}
    .noNavbar .questionario-title           { text-align:left;}
    .top-navbar-mim                         { width:245px; }
    .emblema                                { width:50px;}
    .navbar-collapse.collapse               { display: flex!important; height: auto!important; padding-bottom: 0; overflow: visible!important }
    .navbar-nav>li                          { background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);}
    .fruity header .dropdown-menu>li>a      { text-align:left; }
}

/* HEADER - fine             */
/* ------------------------- */

/* ------------------------- */
/* MAIN - inizio           */

main                                { 
                                        background: rgb(222,239,255);
                                        background:  url("../files/bg_cubes-wireframe@2x.png") no-repeat bottom center / 100% fixed, linear-gradient(90deg, rgba(222,239,255,1) 0%, rgba(242,247,252,1) 30%, rgba(242,247,252,1) 70%, rgba(222,239,255,1) 100%);
                                    }
@media (min-width: 768px) {main     { background: url("../files/bg_cubes-wireframe@2x.png") repeat-x bottom center / 100% fixed ,  linear-gradient(90deg, rgba(222,239,255,1) 0%, rgba(242,247,252,1) 30%, rgba(242,247,252,1) 70%, rgba(222,239,255,1) 100%) ;}}
#main-col                               { margin-top: 24px;}

/* MAIN - fine             */
/* ------------------------- */

/* ------------------------- */
/* COMPONENTS - inizio           */

#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99;
    background-color: var(--color-bg-primary);
    color: #ffffff;
    border: none;
    border-radius: 24px;
    cursor: pointer;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    font-family: 'Titillium Web', sans-serif;
}

#backToTopBtn:hover {
    background-color: #0056b3;
}

.btn                                    { padding: 16px 24px; font: 600 18px/28px "Titillium Web", sans-serif; border-radius:4px; text-decoration:none !important;  }
.btn-sm                                 { padding: 12px 16px; font: 600 14px/16px "Titillium Web", sans-serif; border-radius:4px; }

/* Primary BTN */ 
.fruity .btn-primary                    { background: var(--color-bg-primary); color:#ffffff; border:0; border:2px solid var(--color-blue-40); }
.fruity .btn-primary.focus, 
.fruity .btn-primary:focus              { background: var(--color-bg-primary-hover); /*color:#ffffff; border:0; border:2px solid var(--color-blue-40);*/ outline: 2px dashed var(--color-outline-focus) !important; outline-offset: 4px; }
.fruity .btn-primary:hover              { background: var(--color-bg-primary-hover); border:2px solid var(--color-text-primary-hover); }
.fruity .btn-primary:active,
.fruity .btn-primary.active             { background: var(--color-bg-primary-active); border:2px solid var(--color-text-primary-hover); }

/* Default BTN */
.fruity .btn-default,
.fruity .open .dropdown-toggle.btn-default { background: #ffffff; color:var(--color-bg-secondary); border:2px solid var(--color-bg-secondary);}
.fruity .btn-default:hover              { background: #ffffff; color:var(--color-bg-secondary-hover); border:2px solid var(--color-bg-secondary); }
.fruity .btn-default:focus              { background: #ffffff; color:var(--color-bg-secondary-active); border:2px solid var(--color-bg-secondary-hover); outline: 2px dashed var(--color-outline-focus) !important; outline-offset: 4px;}

/* Secondary BTN */
.fruity .btn-secondary                  { background: var(--color-bg-secondary); color:#ffffff; border:2px solid var(--color-bg-secondary); }
.fruity .btn-secondary:hover,
.fruity .btn-secondary:focus            { background: var(--color-bg-secondary-hover); border:2px solid var(--color-bg-secondary-hover); outline: 2px dashed var(--color-outline-focus) !important; outline-offset: 4px; }

/* Success BTN */
.fruity .btn-success                    { background: var(--color-bg-success); color:#ffffff; border:0; border:2px solid var(--color-bg-success); }
.fruity .btn-success:focus              { background: var(--color-bg-success); color:#ffffff; border:0; border:2px solid var(--color-bg-success); outline: 2px dashed var(--color-outline-focus) !important; outline-offset: 4px; }
.fruity .btn-success:hover              { background: var(--color-bg-success-hover); border:2px solid var(--color-bg-success-hover); }
.fruity .btn-success:active,
.fruity .btn-success.active             { background: var(--color-bg-success-active); border:2px solid var(--color-bg-success-active); }

.fruity .button-item                    { background: #ffffff; color:var(--color-text-primary); border:2px solid var(--color-text-primary); transition: all 0.3s ease;}
.fruity .button-item:hover              { background: #ffffff; color:var(--color-text-primary-hover); border:2px solid var(--color-text-primary-hover); }
.fruity .button-item:focus              { background: #ffffff; color:var(--color-text-primary-hover); border:2px solid var(--color-text-primary-hover); outline: 3px solid var(--color-outline-focus) !important;}
.fruity .button-item.active                    { background: var(--color-bg-primary); color:#ffffff; border:0; border:2px solid var(--color-blue-40); }
.fruity .button-item.active:focus              { background: var(--color-bg-primary); color:#ffffff; border:0; border:2px solid var(--color-blue-40); outline: 3px solid var(--color-outline-focus); }
.fruity .button-item.active:hover              { background: var(--color-bg-primary-hover); border:2px solid var(--color-text-primary-hover); }
.fruity .button-item.active:active             { background: var(--color-bg-primary-active); border:2px solid var(--color-text-primary-hover); }

.card, .question-container              { border-radius: 4px; padding:24px; background:#ffffff;  margin-bottom: 16px; transition: all 0.3s ease; }
.fruity .question-container.input-error { box-shadow: 0 10px 30px rgba(169, 68, 66, 0.3) !important; border: 1px solid var(--color-text-danger); }
.fruity .input-error input              { color:var(--color-text-danger); }
.fruity .alert                          { background:#ffffff; border-radius:0; border:0; outline: 1px solid var(--color-text-base); color: var(--color-text-base); font-family:"Titillium Web"; font-size:18px; padding:24px; }
.fruity .alert .close                   { opacity:1; color:--color-text-base; font-size: 30px; line-height: 25px; right: 0px;}
.fruity .alert-primary                  { border-left: 8px solid var(--color-bg-primary); }
.fruity .alert-success                  { border-left: 8px solid var(--color-bg-success); }
.fruity .alert-warning                  { border-left: 8px solid var(--color-bg-warning); }
.fruity .alert-danger                   { border-left: 8px solid var(--color-bg-error); }

.fruity .panel-primary                  { border:1px solid var(--color-blue-30); }
.fruity .panel-primary>.panel-heading                   { background: var(--color-bg-primary); padding: 16px 24px; border:0;  } 
.fruity .panel-primary>.panel-heading .modal-title      { color:#ffffff; font-weight:600; }

/* DROPDOWN */
.dropdown-menu                          { font: var(--text-sans-lg); }
.dropdown-menu>li>a                     { padding:16px 24px;}
.fruity .dropdown-menu>li>a             { color:var(--color-text-primary);  }
.fruity .dropdown-menu>li>a:hover,
.fruity .dropdown-menu>li>a:focus       { color:var(--color-text-primary-hover); background:#ffffff; font-weight: 600; }
.fruity .dropdown-menu>.active>a:hover  { color: #fff; background-color: var(--color-bg-primary-hover); }

.fruity .dropdown-menu>.active>a        { background: var(--color-bg-primary); }
.bootstrap-select.show-tick .dropdown-menu .selected span.check-mark   { top: 50%; transform: translateY(-50%);  }

.bootstrap-select>.dropdown-toggle.bs-placeholder,
.bootstrap-select>.dropdown-toggle.bs-placeholder:active,
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover     {color:var(--color-slate-44);}

.checkbox-item input[type="checkbox"]:checked+label::after      { margin-top: -5px; background: transparent; font-size:15px; }
.checkbox-item input[type="checkbox"]:checked + label::before   { background: var(--color-bg-primary); }
.checkbox-item label                                            { padding-left: 16px;}
.checkbox-item label::before                                    { border: 2px solid var(--color-slate-44); border-radius: 4px; width: 22px; height: 22px; }

/* COMPONENTS - fine             */
/* ------------------------- */

/* ------------------------- */
/* PAGE WELCOME - inizio */

h1.survey-name                          { margin-top:0; }
.number-of-questions                    { margin-bottom:24px; color: var(--color-blue-40); }
#datasecurity_accepted                  { margin-right:8px; }
[for="datasecurity_accepted"]           { margin-bottom:16px; font: var(--text-sans-lg); font-weight:700; }

/* PAGE WELCOME - fine */
/* ------------------------- */

/* ------------------------------- */
/* PAGE QUESTION GROUP - inizio */

.question-number                        { font: var(--text-mono-lg-display-bold); float:none; color: var(--color-slate-44); display:block; margin-bottom:16px; text-align: center; }
.mandatory-label                        { font-size: 14px; font-weight:600; color:var(--color-text-danger); text-align:center; font-style:italic; margin-bottom:24px;}
.ls-question-mandatory                  { background:#ffffff; border-radius:0; border:0; outline: 1px solid var(--color-text-base); color: var(--color-text-base); font-family:"Titillium Web"; font-size:18px; border-left: 8px solid var(--color-bg-error); padding:24px; margin-bottom: 8px; }
.group-description                      {font: var(--text-serif-lg); margin-bottom:24px;}
.ls-label-question                      {color: var(--color-text-base); font: var(--text-sans-lg)}
.question-help-container                {font-style:italic; background: var(--color-gray-96);  padding: 24px; border-radius:4px; margin-top: 16px; }
.dir-ltr .ls-questionhelp               { margin:0px; }
.ls-questionhelp:before                 { display:none; }
.questionhelp-header                    {  }
.questionhelp-collapse                  { padding-top:16px; }

/* Variazioni su tipo domanda */
.list-dropdown .ls-answers                      { width:100%; }
.list-dropdown .ls-answers .bootstrap-select    { width:100% !important; }
.fruity .list-dropdown .dropdown-menu           { width: 100%; z-index:2000;}

body .answer-item label::after                  { background-color:var(--color-bg-primary); }

.radio-list li, .checkbox-list li               { border-top: 1px solid var(--border-subtle); margin:0; padding-left: 32px; box-shadow: 0 0px 0px 0 rgba(28,54,209,0.15) !important ; transition: all 0.3s ease;  }
.checkbox-list li.form-inline                   { padding-left:13px; }
.radio-list li:hover, 
.checkbox-list li:hover                         { box-shadow: 0 8px 16px 0 rgba(28,54,209,0.15) !important ; }
.radio-item label,
.checkbox-item label                            { width:100%; padding:16px !important; font-weight:600;  }
.radio-item label:hover                         {  }
.radio-item label::before,
.checkbox-item label::before                    { top: 50%; -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); }
.multiple-opt-comments .form-horizontal .checkbox-item label::before   { top: 50%;}
.radio-item label::after,
.checkbox-item label::after                     { top: 50%; }
.radio-item input[type="radio"]:checked + label::after
                                                { -webkit-transform: scale(1, 1) translateY(-50%); -ms-transform: scale(1, 1) translateY(-50%); -o-transform: scale(1, 1) translateY(-50%); transform: scale(1, 1) translateY(-50%); }
.checkbox-item input[type="checkbox"]:checked + label::after
                                                { -webkit-transform: scale(1, 1) translateY(-60%); -ms-transform: scale(1, 1) translateY(-60%); -o-transform: scale(1, 1) translateY(-60%); transform: scale(1, 1) translateY(-60%); }
.multiple-opt-comments .form-horizontal .checkbox-item label::after { top:50%; }
td.radio-item label::before                     { left:50%; -webkit-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); }
td.radio-item label::after                      { left:50%; -webkit-transform: scale(0, 0) translate(-50%,-50%); -ms-transform: scale(0, 0) translate(-50%,-50%); -o-transform: scale(0, 0) translate(-50%,-50%); transform: scale(0, 0) translate(-50%,-50%); }
td.radio-item input[type="radio"]:checked + label::after                      
                                                { left:50%; -webkit-transform: scale(1, 1) translate(-50%,-50%); -ms-transform: scale(1, 1) translate(-50%,-50%); -o-transform: scale(1, 1) translate(-50%,-50%); transform: scale(1, 1) translate(-50%,-50%); }
li.radio-text-item                              { display:flex; align-items:center;}
li.radio-text-item .label-radio                 { flex-shrink: 1;}
.othertext-label-checkbox-container             { margin-left:-20px; width:100%; }
.other-text-item                                { width:100%;}
.other-text-item input                          { width:100% !important;}

tr.radio-list.selected                          { opacity:1 !important; background:var(--color-blue-97) !important; }

.checkbox-list li                               { padding-top:0 !important; padding-bottom:0;}

input[type="text"]                              { padding: 24px 16px; border: 0px solid #fff !important; border-bottom:1px solid var(--color-slate-44) !important; border-radius: 0px; font-size: 18px; box-shadow:none !important;}

/* choice-5-pt-radio */
.choice-5-pt-radio ul.answers-list              { border-top: 1px solid var(--border-subtle); }
.choice-5-pt-radio .radio-list li               { border:0; padding-left: 32px; }
.choice-5-pt-radio .radio-item label            { padding: 16px 16px 16px 8px; }

/* General Class for input and textarea */
.fruity input[type="text"]                      { padding: 24px 16px; border: 0px solid #fff !important; border-bottom:1px solid var(--color-slate-44) !important; border-radius: 0px; font-size: 18px;}
.fruity .form-control                           { color:var(--color-slate-44); font: var(--text-sans); border: 1px solid var(--color-slate-44); border-radius:4px; }
.fruity .form-control:hover                     { color:var(--color-slate-20);}

.fruity select.form-control         {
            padding: 10px;
            height: 64px;
            font-size: 16px;
            font-weight:700;
            line-height:16px;
            border: 1px solid var(--color-slate-44);
            border-radius: 4px;
            appearance: none; /* Remove default arrow icon on some browsers */
            -webkit-appearance: none; /* For Safari */
            -moz-appearance: none; /* For Firefox */
            background-color: white; /* Ensure select background is white */
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>'); /* Custom arrow icon */
            background-repeat: no-repeat;
            background-position: right 10px center; /* Position arrow icon */
        }
        
.fruity select.form-control option {
    padding: 24px 16px;
}        

.list-with-comment .dropdown-item               { width:100%; margin-bottom:24px;}
.list-with-comment .text-item,
.list-with-comment .text-item textarea          { width:100% !important; }

.fruity .form-control:focus                     { border:1px solid var(--color-bg-primary); }
/* Stilizzazione delle opzioni selezionate */
option.option-selected:checked                                {
  background-color: #0066cc !important; /* Colore di sfondo per l'opzione selezionata */
  color: #fff; /* Colore del testo per l'opzione selezionata */
}

.container-fluid .bootstrap-buttons-div                                    { display:block; width:100% !important; padding:0 !important; margin-bottom:16px !important; }
.container-fluid .bootstrap-buttons-div label                              { font-weight:600; white-space: normal;}

.date   
.date-timepicker-group input[type="text"]                   {height:64px;}

.fruity .btn-group-justified                            {padding:0; margin-bottom:16px; border-radius: 4px; border:2px solid var(--color-bg-primary);}
.fruity .btn-group-justified .button-item               {border:2px solid #ffffff;  }
.fruity .btn-group-justified .button-item:hover         {background-color: var(--color-white);}
.fruity .btn-group-justified .button-item.active        {border:2px solid var(--color-bg-primary);}
.fruity .btn-group-justified .button-item label         {margin-bottom:0;}
.fruity .btn-group-justified .button-item.focus         {background:var(--color-bg-primary); color:#ffffff;}

.fruity .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) { border-right:2px solid var(--color-bg-primary); }

/* SORTABLE LIST */

.sortable-choice, .sortable-rank                        { margin-top:1rem; }

.sortable-rank                                          {  min-height: 88px; counter-reset: rank-counter; position: relative; background:var(--color-blue-97) }
.sortable-rank:before {
    content: "Inserisci qui le tue preferenze";
    font-size: 15px;
    position: absolute;
    top: 30px;
    left: 50%;
    color: #727272;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    padding:0px 10px;
}

.sortable-rank .ls-choice                                                   { counter-increment: rank-counter; padding-left: 4rem; }
.sortable-rank .ls-choice:before                                            { 
                                                                                content: counter(rank-counter);
                                                                                color: var(--color-bg-primary-active);
                                                                                font-size: 2rem;
                                                                                font-weight: 700;
                                                                                position: absolute;
                                                                                left: 16px;
                                                                                top:50%;
                                                                                transform: translateY(-50%);
                                                                                width:20px;
                                                                                height: 20px;
                                                                            }

.select-sortable-lists .sortable-list .ls-choice.sortable-item              { margin:0.5rem; font-size:15px; line-height: 150%; transition: all 0.3s ease-in-out; box-shadow: 0,0,0,0 rgba(28,54,209,0); border-radius: 4px;}
.select-sortable-lists .sortable-list .ls-choice.sortable-item:hover        { border:1px solid var(--color-bg-primary); box-shadow: 0 4px 4px 0 rgba(28,54,209,0.15); }
.select-sortable-lists .sortable-choice                                     { background:#f1f1f1; }

.select-sortable-lists .answers-list.row                                    { margin-left:-20px; margin-right:-20px; }

.select-sortable-lists .answers-list.row.row [class*="col-"] {
    padding-left: 5px; /* Cambia con il valore che desideri */
    padding-right: 5px; /* Cambia con il valore che desideri */
}

@media (max-width: 767.9px)  {
    .select-sortable-lists .sortable-list .ls-choice.sortable-item     { font-size:15px; }
}

/* MODAL OVERRIDE  file-upload-modal */

.file-upload-modal .btn-success                                             { background:var(--color-bg-primary); border:1px solid var(--color-bg-primary); }
.file-upload-modal .btn-success:hover,
.file-upload-modal .btn-success:focus                                       { background:var(--color-bg-primary-hover); border:1px solid var(--color-bg-primary-hover); }

table.uploadedfiles                                                         { margin-top:3rem; }
table.uploadedfiles tr th:first-of-type                                     { width:auto; }
table.uploadedfiles tr td:first-of-type                                     { background:#ffffff; }
table.uploadedfiles tr th                                                   { padding: 0.5rem; }
table.uploadedfiles tr td                                                   { border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; padding: 1rem;}
table.uploadedfiles .btn                                                    { width:100%; }

/* Default BTN */
table.uploadedfiles .btn-primary,
table.uploadedfiles .open .dropdown-toggle.btn-primary { background: #ffffff; color:var(--color-bg-secondary); border:2px solid var(--color-bg-secondary);}
table.uploadedfiles .btn-primary:hover              { background: #ffffff; color:var(--color-bg-secondary-hover); border:2px solid var(--color-bg-secondary); }
table.uploadedfiles .btn-primary:focus              { background: #ffffff; color:var(--color-bg-secondary-active); border:2px solid var(--color-bg-secondary-hover); outline: 2px dashed var(--color-outline-focus) !important; outline-offset: 4px;}

.upload-button a                                                            { width:100%; }
.upload-div button                                                          { width:100%; }
.fruity .alert.uploadmsg                                                    { background: #ffffff; padding: 1rem; outline:0px; margin-bottom:0px; font-style: italic;}
.modal-title                                                                { font-size:24px; font-weight:600; margin-bottom:0px;}
.file-preview                                                               { background:#f1f1f1; border-radius: 1rem; padding: 3rem;  }
.file-preview span.file-name                                                { display:block; margin-left:0px !important; padding-bottom:3rem; }
.fruity .modal .close                                                       { font-size: 32px;  color: #404040; opacity: 1;}

/* CHECKBOX ARRAY QUESTION inizio */
.checkbox-array .checkbox-item input[type="checkbox"]:checked+label::after      {  margin-top: 0px; margin-left: 1px; }
.sortable-rank                                                                  {  min-height: 150px; }

/* CHECKBOX ARRAY QUESTION fine */

/* PAGE QUESTION GROUP - fine */
/* ------------------------------- */

/* TEXT DISPLAY - BOILERPLATE - inizio */
.boilerplate .answer-container                                              { display:none; }
.boilerplate h2,
.boilerplate h3,
.boilerplate h4                                                             { font-weight:600; }
/* TEXT DISPLAY - BOILERPLATE - fine */

/* ------------------------------- */
/* SKIP LINK - inizio */

/* Work in progress */

/* SKIP LINK - fine */
/* ------------------------------- */