#cscCustomizationModal {
  display: block !important;
}
#cscCustomizationModal:not(.in) {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -9999px;
}

/* Container per Filerobot IE */
#filerobot-editor {
  width: 100%;
  min-height: 400px;
  border: 1px solid #ccc;
}

.FIE_root label {
    margin: 0;
}

.FIE_root input {
    height: auto!important;
    padding: 0!important;
}

.FIE_tabs {
    display: none!important;
}

.FIE_canvas-node {
    background: #ddd!important;
}

.SfxInput-Base {
    height: auto!important;
}

.FIE_image-tool-add-option-button {
    color: #dc9814!important;
    border: 1px solid #dc9814!important;
}

.FIE_image-tool-add-option-button:hover {
    background-color: #dc9814!important;
    color: #fff!important;
    /*border: 1px solid #dc9814!important; */
}
/* Z-index superiore per evitare overlay */
/*
div#cscCustomizationModal {
  z-index: 99999999;
}
*/
/* Pulsanti custom */
.csc-btn {
  padding: 10px 20px;
  background-color: #0055a5;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.2rem; /* aumentata dimensione font */
  line-height: normal; /* reset line-height */
  font-weight: bold; /* grassetto */
}
.csc-btn:hover {
  background-color: #003f7f;
}

/* Pulsanti del modal */
.csc-modal-btn {
  padding: 8px 16px;
  background-color: #0055a5;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 10px;
  height: 40px;         /* altezza fissa */
  line-height: 25px;    /* line-height per centratura testo */
}
.csc-modal-btn:hover {
  background-color: #003f7f;
}

/* Pulsante di chiusura del modal */
.csc-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Pulsante annulla posizionato a sinistra */
button#csc_cancel {
  background-color: #777;
  float: left;
}
/* Pulsante conferma verde */
button#csc_confirm {
  background-color: #2fa709;
}

/* Centrare verticalmente il modal (Bootstrap 3) */
.modal {
  text-align: center;
}
.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

/* Spacing */
#csc_customize_wrapper {
margin-top: 20px; 
margin-bottom: 10px; 
}
.m-t-20 { margin-top: 20px !important; }

/* Anteprima confermata */
#csc_confirmed_preview img,
.csc-confirmed-img {
  max-width: 100%;
  border: 1px solid #ccc;
}

/* Rimuove border/padding sull'anteprima nel modal */
#cscCustomizationModal div#csc_modal_preview {
  border: 0;
  /*padding-top: 0;*/
}

/* Regola la chiusura del modal */
#cscCustomizationModal .modal-header .close {
  margin-top: -20px;
}
#cscCustomizationModal .modal-header .close:hover {
  background-color: unset;
}

/* Stile del modal */
.modal-header, .modal-body, .modal-footer {
  padding: 20px;
}

/* Stile per l'anteprima nel modal */
#csc_preview_container_modal {
    padding-top: 5px;
    background: #ddd;
    text-align: center;
}

div#csc_modal_preview {  
    padding-top: 5px;
    background: #ddd;
    text-align: center;
}

#csc_preview_canvas_modal{
  background: #fff;
}

/* Accordion custom (Bootstrap 3) */
.accordion-toggle {
  text-decoration: none;
  color: #007bff;
  font-weight: bold;
  display: block;
}
.accordion-toggle:hover {
  text-decoration: none; /* rimosso underline su hover */
}

/* Formattazione e Allineamento */
.formatting-group,
.alignment-group {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}
.formatting-option input,
.alignment-option input {
  display: none;
}
.formatting-option i,
.alignment-option i {
  cursor: pointer;
  font-size: 1.5rem;
  color: #555;
  transition: color 0.3s;
}
.formatting-option input:checked + i,
.formatting-option:hover i,
.alignment-option input:checked + i,
.alignment-option:hover i {
  color: #007bff;
}

/* toolbar libera: assicurati sia visibile e centrata */
.csc-free-toolbar {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    z-index: 1;         /* davanti al canvas */
    position: relative;
}

/* canvas libera: display full-width, altezza auto */
#csc_fabric_canvas {
    width: 100%;
    height: auto;
    display: block;     /* rimuove spazi bianchi inline */
}

/* se necessario, aggiusta z-index del modal-body */
#cscCustomizationModal .modal-body {
    position: relative;
    overflow: visible;
}

div#csc_confirmed_preview {
    margin-top: 10px;
}

button#csc_open_modal {
    font-style: normal;
}              

.modal-backdrop {
  z-index: 9999 !important;
}


/* csc-accordion.css */

/* 1) Transizione per l’icona all’interno dell’header cliccabile */
#accordion_modal .panel-heading.accordion-header i.la {
  transition: transform 0.3s ease;
  transform-origin: 50% 50%;
}

/* 2) Stato “rotated” (applicato via JS aggiungendo/rimuovendo questa classe sul .panel-heading) */
#accordion_modal .panel-heading.accordion-header.rotated i.la {
  transform: rotate(180deg);
}

#csc_modal_fields .panel-heading:hover h4.panel-title {
    color: #dc9814;
    transition: color 0.2s;
}