@charset "UTF-8";
/* CSS Document */

html, body { font-family: Panton-SemiBold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'; margin: 0; color: #222e34; text-decoration: none; font-size: 22px }
/* line-height: 1; */
html { background: #2a3034; height: 100% }
body { background: #2a3034; height: 100% }

*:hover { transition: all .2s ease-in-out; }
*::before, *::after { box-sizing: border-box; }

img { border: 0; }

.a3 { background: #000000!important; color: #f9ae0b!important } 

.disblo { display: block!important }


.txa_left { text-align: left!important }
.txa_right { text-align: right!important }

.flex { display: flex }
.deb { background: #ffffff97; padding: 10px 20px; position: absolute; z-index: 10; top: 0; left: 0; max-width: 400px; }


.pan_lig { font-family: Panton-Light, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'}
.pan_reg { font-family: Panton-Regular, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'}
.pan_seb { font-family: Panton-SemiBold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif' }
.pan_bol { font-family: Panton-Bold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'!important}
.pan_ebo { font-family: Panton-ExtraBold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'}
.pan_bla { font-family: Panton-Black, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'}
.pan_ebl { font-family: Panton-ExtraBlack, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'}


h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-family: Panton-SemiBold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif' }
h1 { font-family: Panton-SemiBold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'; font-size: 2.3rem }
h2 { font-family: Panton-Bold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'; font-size: 1.4rem }
h3 { font-family: Panton-SemiBold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'; font-size: 1.3rem }
h4, h5, h6 { font-family: Panton-Regular, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'; font-size: .9rem; font-weight: normal }
h6 { font-size: .7rem; font-weight: normal; opacity: .8 }

a { text-decoration: none!important; color: #ffffff }
a.chiaro { color: #333333 }

.tra, span, input, b, a, i, h2, h3, .cont_icone img, .img_utente img, .img_logo img { transition: all .2s ease-in-out; }

form { font-family: Arial; margin: 0 0 0 -35px; }
form i { font-size: 20px;  width: 30px; vertical-align: middle; text-align: left; }
#form_attivazione { margin: 0; display: flex; flex-grow: 1;}

input[type="text"], input[type="file"], input[type="password"], input[type="tel"], input[type="email"], textarea  { height: 40px; border: none; border-radius: 5px; font-size: .9rem; padding: 0 10px; width:calc(100% - 80px); margin-bottom: 10px; color: white; background: rgba(255,255,255,.2); font-weight: bold; }
input[type="text"]::placeholder, input[type="file"]::placeholder, input[type="password"]::placeholder, input[type="tel"]::placeholder, textarea::placeholder, input[type="email"]::placeholder { font-weight: normal; color: rgba(255,255,255,.3 ) }

.selez { height: 40px; font-size: .9rem; padding: 0 10px; background: rgba(255,255,255,.6); border: none; border-radius: 5px; font-weight: bold; color: white; }


.multioff_inc, .attivazione_inc { font-weight: normal; margin-right: 11px; height: 40px; border: none; border-radius: 5px; font-size: .9rem; padding: 0 10px; color: white; background: rgba(255,255,255,.2); min-width: calc(100% - 22.5px) !important; line-height: 40px; position: relative; display: inline-block; }
  
.multioff_inc::after, .attivazione_inc::after { content: ''; position: absolute; top: 45%; left: 2px; width: 45%; height: 2px; background-color: #f9ae0b; transform: rotate(-20deg); transform-origin: center; }


.input-wrapper { position: relative }
.input-wrapper label { background: rgba(0,0,0,.5); padding: 1px 10px 2px 2px; margin: 2px 0 2px 5px; border-radius: 5px; cursor: pointer; }


.input { width: calc(100% - 40px)!important; box-sizing: border-box; margin-bottom: 15px!important; background:  rgba(255,255,255,.2); font-weight: normal!important; font-family: Arial!important; position: relative }


.input-2 { display: grid; grid-template-columns: 20px calc(80% - 27px) calc(20% - 27px); align-items: first baseline; column-gap: 15px; } 
.input-2 .input { width: 100% !important }







.input.icon-info { background-image:url("../img/icone/ic_bg_su.svg"); background-repeat: no-repeat; background-position: calc(100% - 10px) center; background-size: 18px;}

.fa-circle-info, .fa-eye { font-size: 18px; color: #f9ae0b; cursor: pointer; position: absolute; z-index: 10; top: 10px; right: 5px; }
.fa-circle-info:hover { color: #ffffff }

.fa-circle-info.posrel { position: relative; top: 0; right: 0; font-size: inherit }

.nota_disponibile { color: rgba(255,255,255,.6); font-size: 0.6em; display: none }

.fa-eye { color: #191d1f; right: 35px; font-size: 22px; top: 9px  }
.fa-eye:hover { color: #2a3034 } 

.w90-2 { width: calc(90% - 22.5px)!important }
.w80-2 { width: calc(80% - 22.5px)!important }
.w70-2 { width: calc(70% - 22.5px)!important }
.w60-2 { width: calc(60% - 22.5px)!important }
.w50-2 { width: calc(50% - 22.5px)!important }
.w40-2 { width: calc(40% - 22.5px)!important }
.w30-2 { width: calc(30% - 22.5px)!important }
.w20-2 { width: calc(20% - 22.5px)!important }
.w10-2 { width: calc(10% - 22.5px)!important }


.w90-3 { width: calc(90% - 22.5px)!important }
.w80-3 { width: calc(80% - 16.67px)!important }
.w70-3 { width: calc(70% - 22.5px)!important }
.w60-3 { width: calc(60% - 16.67px)!important }
.w50-3 { width: calc(50% - 22.5px)!important }
.w40-3 { width: calc(40% - 22.5px)!important }
.w30-3 { width: calc(30% - 22.5px)!important }
.w20-3 { width: calc(20% - 16.67px)!important }
.w10-3 { width: calc(10% - 22.5px)!important }


.daselez { border: 1px solid #f9ae0b }
.okselez { border: 1px solid rgba(2552,255,255,.5) !important; background: rgba(2552,255,255,.4)!important }

.maiusc { text-transform: uppercase }
.nota_form { color: rgba(255,255,255,.6); font-size: 0.6em; width: calc(100% - 39px); margin: -10px 0px 10px 35px; box-sizing: border-box; display: none }
.error-message { color: #e40043; font-size: 0.8em; width: calc(100% - 39px); margin: -10px 0px 10px 35px; box-sizing: border-box}
.non-attivo { opacity: 0.5; cursor: not-allowed }


/*input[type="file"] { padding: 0px 24px; margin: 0 0px 15px -25px; }*/
input[type="file"] { padding: 0px; margin: 0 0 0 20px; float: left; width: 50%; color: #f9ae0b }
textarea { padding: .5rem .5rem; min-height: 100px }

.confirm, .error { padding: 20px 20px 0 20px!important; border-radius: 5px }
.error { background: rgba(255, 0, 0, .5) }
.confirm { background: rgba(0, 128, 0, .6) }
.error h1, .confirm h1 { line-height: 1}

.ritaglia { background: #f9ae0b; border-radius: 100px; padding: 5px 25px; font-size: .7rem; color: #2a313c; font-weight: bold; margin: 20px 0 0 40px; cursor: pointer; box-shadow: 0 0 6px #2b323d; float: left; border: none; display: none  }

.nas { display: none!important }


.container { width: 100%; margin: 0 auto; padding: 70px 0px 0px 0px; box-sizing: border-box; text-align: left }

/*
.cont_logo { text-align: left; width: 100%; margin: 20px auto 20px  auto;  box-sizing: border-box; padding: 0 40px; }
.img_logo { width: 100%; box-sizing: border-box; margin: 0 auto; max-width: 1080px; }
.img_logo img { width: 100%; max-width: 240px; margin: 0 0 0 -10px; cursor: pointer }
.img_logo img:hover { transform: scale(1.04); } 
*/

.cont_logo { }
.cont_claim {  }

.logodg { width: 100%; max-width: 240px; min-width: 240px; margin: 0 0 0 -10px; cursor: pointer }
.logodg:hover { transform: scale(1.04); } 

.logo_header { display: grid; grid-template-columns: 35% 1fr; /*repeat(2, 1fr)*/ align-items: center; grid-column-gap: 1em; grid-row-gap: 2em; } 

.grid { display: grid; align-items: center; grid-column-gap: 2em; grid-row-gap: 2em; } 

.nogap { margin-left: -2em!important; }
.vatop { align-items: start!important; }
.vabot { margin-top: auto!important; }
.stretch { align-items: stretch!important; }
.all_sta { align-items: start!important }
.nobo { border: none!important }
.flex_righe { flex-direction: column!important }
.gap4 { column-gap: 4em!important; }


flashboxr, flashboxg, flashboxd, flashboxy, flashboxc { font-style: italic; background: #e40043; padding: 10px 15px 5px 10px; border-radius: 150px; margin: 0px 0 20px -40px; box-shadow: 0 0 20px rgba(0,0,0,.9); line-height: 1; display: flex; width: fit-content; white-space: nowrap; }
flashboxy { background: #f9ae0b; color: #2a3034; }
flashboxg { background: #2a3034; color: #f9ae0b; }
flashboxc { background: rgba(255,255,255,.8); color: #2a3034; }
flashboxd { background: #191d1f; color: #ffffff; box-shadow: 0 0 20px rgba(0,0,0,.4) }


a.btn, .btn.send { background: #f9ae0b; padding: 7px 15px 5px 10px; border-radius: 5px; display: flex; width: fit-content; white-space: nowrap; font-size: .9rem; color: #191d1f; margin: 0px 0 0 0; font-family: Panton-Bold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'; column-gap: 5px; position: relative; z-index: 2}
a.btn:hover { transform: scale(1.03) }

.btn.wapp { background: #3fcc43 }

.pul, a.pul { width: fit-content  }
.pul:hover, a.pul:hover { transform: scale(1.02) }

.sp { position: absolute; z-index: 1; opacity: 0;}





#form_step_1, #form_step_2, #form_step_3, #form_step_4  { display: flex; flex-direction: column; flex-grow: 1; padding: 0px 0 10px }

#form_step_2, #form_step_3, #form_step_4 { display: none  }


#form_step_1 obb, #form_step_2 obb, #form_step_3 obb, #form_step_4 obb, obb { color: red; font-size: 10px; position: absolute; top: 15px; left: 25px;  }

input[type="text"].totpia { font-family: Panton-Bold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'!important; font-size: 1.1rem }
#form_step_4 .input-wrapper { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid gray; margin-bottom: 0px; padding: 8px 0 8px 10px; }
#form_step_4 .input-wrapper.bg_yel .input { color: #191d1f; background: rgba(255,255,255,.6) }
#form_step_4 .input-wrapper i { width: auto; margin-right: 10px }
#form_step_4 .input-wrapper .fa-circle-info { position: relative; top: unset; right: unset; margin-left: 5px; margin-top: -1px; }
#form_step_4 .input-wrapper i, .input-wrapper span { flex: 0 0 auto; }
#form_step_4 .input-wrapper .input { margin-right: 10px; margin-bottom: 0!important }
#form_step_4 .input-wrapper .left-elements { display: flex; align-items: center; justify-content: start; width: 60%; }
#form_step_4 .input-wrapper .right-elements { display: flex; align-items: center; justify-content: end; }
#form_step_4 .input-wrapper.btn_option { cursor: pointer }
#form_step_4 .input-wrapper.btn_option:hover { background: rgba(255,255,255,.1) }
#form_step_4 #btn_att_pro.input-wrapper.btn_option { padding-bottom: 25px; margin-bottom: -25px; }

#form_step_4 .input-wrapper su { min-width: 50px }
#form_step_4 h6.gri {  }
#form_step_4 h6.gri.spec { margin: -10px 10px 5px 40px }



#verifica_email { display: flex; align-items: center; column-gap: 15px; font-size: 20px; color: #f9ae0b }
#codver { margin-bottom: 0!important; border: 1px solid #fff; letter-spacing: .1rem; }
.okver { color: #09b208; font-size: 28px }
.kover { color:  red; font-size: 28px }
#valid1 { color: #09b208; font-size: 24px; margin: 0 5px 0 0px }
#nomeufficio, #cod_fisc, #sdi { text-transform: uppercase }
#altro_codice { color: red; margin-left: 5px; }

#cont_btn_paypal {  } 
#mycart { padding: 20px; background: white; border-radius: 5px }
#pagamento-ok, #pagamento-annullato { margin:0 auto; box-shadow:0 1px 2px #999999 inset; background:rgba(255,255,255,.9); padding:20px; border-radius:5px} 

.input.okselez { }



.cont_btn_1, .cont_btn_2, .cont_btn_3, .cont_btn_4 { display: flex; justify-content: space-between; margin-bottom: 0px;  align-items: center;}
.cont_btn_1 { justify-content: end }



.btn.send { border: 0; cursor: pointer }
.btn.send.non-attivo { opacity: 0.5!important; pointer-events: none!important; transform: none}
.btn.send.back { }
#submitForm { margin-left: auto; }



.piani .box_text > h5 { margin-bottom: .3rem }

.opa1 { opacity: 1!important    }


.testoparagrafi { font-size: .7rem }
.testoparagrafi h3 { font-size: 1rem  }
.testoparagrafi h2 { font-size: 1.5rem  }
.testoparagrafi p { padding-top: 0; margin-top: 0; break-inside: avoid; }

.testo2col { column-count: 2; column-gap: 2rem; /*column-rule: 1px solid #ccc;*/ padding: 1rem; font-size: .7rem }
.testo2col h4, .testo2col h3, .testo2col h2 { column-span: all  }
.testo2col p { padding-top: 0; margin-top: 0; break-inside: avoid; }


.col-2 { grid-template-columns: 1fr 1fr; }
.col-3 { grid-template-columns: repeat(3, 1fr); }
.col-4 { grid-template-columns: repeat(4, 1fr); }
.col-5 { grid-template-columns: repeat(5, 1fr); }

.col-2_1-1 { grid-template-columns: 1fr 1fr; }
.col-2_2-1 { grid-template-columns: 2fr 1fr; }
.col-2_1-2 { grid-template-columns: 1fr 2fr; }

.col-2_40-60 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } /* 40/60 dello spazio meno lo spazio tra le colonne (prima a 1024 px la pagina usciva di 4 px, passoV88) */
.col-2_60-40 { grid-template-columns: 60% 40%; }


.due_col { display: grid; grid-template-columns: 1fr 1fr; align-items: center; grid-column-gap: 1em; grid-row-gap: 2em; }
.tre_col { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; grid-column-gap: 1em; grid-row-gap: 2em; }


.due_col-sx { display: flex; justify-content: flex-start; gap: 20px; width: 100%; }
.due_col-sx .img2col { width: 100%; max-width: 190px; height: auto; }



.cont_section { background: #2a3034; display: inline-block; width: 100% }

.tx_light { color: #efefef;}
.tx_dark { color: #333333; }

.bg_yel { background: #f9ae0b!important; }
.bg_red { background: #e40043!important; }
.bg_light { background: rgba(255,255,255,.6)!important; }
.bg_dark { background: rgba(0,0,0,.4)!important; }
.bg_nero { background: #000!important; } .bg_nero .bloks > div { background-color: #2a3034; } /* sezione QR in home: fascia nera, box col fondo pagina */
.bg_cel { background: #03b7d6!important }
.bg_none { background: none!important; box-shadow: none!important }
.bg_sfum { background: rgb(228,0,67)!important; background: linear-gradient(55deg, rgba(228,0,67,1) 20%, rgba(249,174,11,1) 70%, rgba(249,174,11,1) 100%)!important }


.shin_light { box-shadow: inset 0 10px 5px -10px rgba(0, 0, 0, 0.2), inset 0 -10px 5px -10px rgba(0, 0, 0, 0.5); margin-bottom: 30px; }
.shin_dark { box-shadow: inset 0 10px 10px -10px rgba(0, 0, 0, 0.7), inset 0 -10px 10px -10px rgba(0, 0, 0, 0.7); margin-bottom: 30px }
.shin_none { box-shadow: none }

.sh_light { box-shadow: 0 0 40px rgba(0,0,0,.4); }
.sh_dark { box-shadow:  0 0 40px rgba(0,0,0,.6); }



.section { margin: 0; width: 100%; padding: 0px 40px; box-sizing: border-box; } 
.section.full { padding: 0 }

.section.full .cont_boxed { padding: 20px 40px; }

.cont_boxed { text-align: left; width: 100%; margin: 0px auto; box-sizing: border-box; max-width: 1080px; padding: 20px 0px;  }
.boxed { margin: 0 auto; width: 100%; border-radius: 5px; padding: 20px; box-sizing: border-box; }


.cont_full { text-align: left; width: 100%; margin: 0px auto; box-sizing: border-box; padding: 20px 40px; }
.full { margin: 0 auto; width: 100%; padding: 20px 0px; box-sizing: border-box; }

.cont_section h2, .cont_section h3 { font-weight: normal }

.bloks > div { display: flex; flex-direction: column; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.95); padding: 20px; color: #fff; position: relative; background-color: rgba(0, 0, 0, 0.4); opacity: 1; box-sizing: border-box; }

.spacer { margin-top: auto }


.disfle { display: flex; column-gap: 10px; }


.dis_cardNO, .dis_multiNO, .dis_attivaNO  { opacity: .5!important; color: #333333!important; background: gray!important; pointer-events: none!important; transform: none; }
.dis_cardNO .bg_sfum, .dis_multiNO .bg_sfum, .dis_attivaNO .bg_sfum { background:rgba(0,0,0,.3)!important }
.dis_cardNO flashboxy, .dis_multiNO flashboxy, .dis_attivaNO flashboxy { background-color: #666666!important; box-shadow: none; color: #333333!important }
.dis_cardNO flashboxg, .dis_multiNO flashboxg, .dis_attivaNO flashboxg { background-color: #666666!important; box-shadow: none; color: #333333!important }
.dis_cardNO h3, .dis_multiNO h3, .dis_attivaNO h3 { color: #333333!important }


.cont_btn_footer { text-align: right; padding: 20px 0 10px}
.boxfooter { font-size: .8rem}
.boxfooter .logodg { width: 100%; max-width: 160px; min-width: 160px; cursor: default }
.boxfooter .logodg:hover { transform: none } 



.btn_option evy {
    background: #f9ae0b;
    color: #191d1f;
    padding: 3px 7px 1px 7px;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px; /* Spazio per l'icona */
    margin-right: 10px;
    border: 1px solid #f9ae0b
}




.btn_option evy::before {
content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  left: 6px;
  top: 48%;
  transform: translateY(-50%);
  background-color: #2a3034;
  transition: all .2s
}

.btn_option evy:hover {
color: rgba(255,255,255,.8)
}

.btn_option evy:hover::before {
    background-color:rgba(255,255,255,.8); /* Colore dell'icona quando attivo */

}

.btn_option evy.active::before {
    background-color: #ffffff; /* Colore dell'icona quando attivo */

}

.btn_option evy.active {
color:#ffffff;
border: 1px solid #ffffff;
}

#form_attivazione .option input[type="text"], #form_attivazione .option i { display: none }


ul.menufooter { list-style-type: none; padding: 0; margin: 30px 0 0 0; font-family: Panton-Bold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'; font-size: .9rem; }
ul.menufooter li { padding: 0; border-top: 1px solid #999999; font-family: Panton, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'; cursor: pointer; font-weight: normal; font-size: .8rem; }
ul.menufooter li:first-child { border-top: none; }
ul.menufooter li a { text-decoration: none; color: inherit; opacity: 0.7; transition: opacity 0.3s ease; display: block; padding: 15px 0; }
ul.menufooter li a:hover { opacity: 1; }

#cont_add-ons, #info_add-ons { display: none }



.info { cursor: pointer; position: fixed; z-index: 101; top: 15px; right: 15px; font-size: .9rem; color: #f9ae0b }
.info:hover { transform: scale(1.2); opacity: 1 }

ws { white-space: nowrap; margin-bottom: 10px; display: inline-block; max-width: 140px; min-width: 100px }
nw, .nw { white-space: nowrap;}

.gestisci, .esci, .Clingua, .boxevi { font-size: .7rem; color: #f9ae0b; background: #000; padding: 7px 10px 5px; border-radius: 5px; display: block; text-transform: uppercase; text-align: center }

.esci { }
.spazio_menu { /* background: red; height: 20px*/  }
.gestisci:hover, .esci:hover { color: #ffffff; }
.gestisci small, .esci small, .Clingua small { color: #666; font-weight: bold }
.gestisci.nomeUFFattuale:hover { color:#f9ae0b }


.bg_yell { background: #f9ae0b; color: #111315; font-weight: bold }
.bg_yell:hover { background: #000000; color: #ffffff; }

.bg_gray { background: gray; color: #000000; font-weight: bold; cursor: default!important }
.bg_gray:hover { color: #000000;  }

.bg_noatt { background-color: rgba(255,255,255,.2); color: rgba(255,255,255,.3)!important; cursor: default!important  }


.azzera, .viewcard, .modtop, .eliminalist { display: inline-block; white-space: nowrap; position: relative; cursor: pointer }

.cont_btn_azioni { display: flex; flex-wrap: wrap; column-gap: 5px; row-gap: 5px; align-items: center; justify-content: space-between }
.cont_btn_azioni .gestisci.eliminalist small { position: absolute; left: 0; top: 30px }
.cont_btn_azioni > div { box-sizing: border-box; }



.az_left {  text-align: right; width: calc(40% - 60px); }
.az_center { width: 120px; text-align: center; margin: 0 auto; }
.az_center .btn_mod { margin: unset;  }
.az_right { text-align: left; width: calc(40% - 60px); }


.gridjus { justify-content: space-between!important }


.cont_menu { background: rgba(0,0,0,.5); min-height: 70px; position: fixed; width: 100%; z-index: 101;padding: 0 40px; box-sizing: border-box; }
#menu_top {  display: grid; grid-template-columns: auto auto auto auto 4fr auto auto; padding: 20px 0px; grid-column-gap: 20px; grid-row-gap: 10px; align-items: center; width: 100%; box-sizing: border-box; margin: 0 auto; max-width: 1080px; }

#menu_top > * { display: inline-block; white-space: nowrap } 
#menu_top ws { margin-bottom: 0px; max-width: unset; min-width: unset }

.duplCA, .copyLC, .saveVC {  width: 20px; cursor: pointer }
.duplCA {  }
.copyLC { margin-left: 5px }
.saveVC {  }

.duplCA:hover, .copyLC:hover, .saveVC:hover { transform: scale(1.2); }


.Clingua { cursor: pointer; position: relative; z-index: 100 }
.Clingua:hover { color: #ffffff }
.Clingua img { width: 16px; border-radius: 20px; margin: 0px 0px -2px 9px!important; font-weight: bold; } 

.disnone { display: none!important }
.textleft { text-align: left }
.ml40 { margin-left: 40px!important }


#sel_lin { position: absolute; background: rgba(0,0,0,.8); padding: 15px 10px 15px 10px; border-radius: 5px; text-transform: capitalize; text-align: right; display: none; cursor: pointer; right: 0 }
#sel_lin img { width: 18px; border-radius: 18px; vertical-align: middle; margin: 0px 0px 6px 8px }

.item_lingua { display: block; width: 60px; margin: 10px 0 10px 0px; color: #ffffff }
.item_lingua:hover { color: #f9ae0b }

.lingua_att { font-weight: bold; color:#f9ae0b!important }
.lingua_att img { margin:0px -2px 6px 8px!important; border: 2px solid #f9ae0b; }



.cont_search.showAC { display: grid; grid-template-columns: 1fr 1fr 38px; margin-bottom: 20px;  text-align: left; height: auto; grid-column-gap: 20px; grid-row-gap: 10px; align-items: center }

.Fcerca { position:relative; }

.Ccerca { width: calc(100% - 40px) !important; padding: 0px 20px !important; font-size: .9rem !important; box-shadow: inset 2px 1px 4px #000; height: 40px !important; margin-bottom: 0!important }
  
.Ccerca:focus-visible { outline: 2px solid #f9ae11  }
.Ccerca::placeholder { color: rgba(255,255,255,.8) }



.btn_alert { background: red!important; boder:1px solid red  }
.btn_alert a { color: #000!important  }
.txt_alert { color: red!important }




.cl_alert { border: 3px solid red!important; background: lightyellow; color: #000!important; }
.alertnome { position: relative; margin: -40px 0px 10px 110px; text-align: left; font-size: .7rem; font-weight: bold; color: red; text-transform: uppercase }


.x_avviso { position:  absolute; top: 0; margin: 4px 0px 0px -2px; width: 20px; }

.avviso_saveVC, .avviso_copyVC { background: #f9ae0b; position: absolute; width: 350px; height: auto; left: 50%; top: 15%; transform: translate(-50%, -50%) scale(0); padding: 10px 15px; border-radius: 5px; box-shadow: 0 0 10px #000; color: #333; display: none; overflow: hidden; cursor: pointer;  }
.avviso_copyVC { background: rgba(255,255,255, .9); width: 240px; top: -35px; padding: 8px 10px; font-size: .7rem; }

.avviso_saveVC.scuro, .avviso_copyVC.scuro { }
.avviso_saveVC.chiaro, .avviso_copyVC.chiaro { box-shadow: unset; color: #333; }
    
.avviso_copyVC.scuro { }
.avviso_copyVC.chiaro { background: #f9ae0b }




.img2, .img3 { width: 100%; margin: 0 0 0 -5px; cursor: pointer }
.img2:hover, .img3:hover { transform: scale(1.04); } 


.btn_salva { background: #f9ae0b; border-radius: 5px; font-size: .9rem; color: #2a313c; cursor: pointer; display:inline-block;line-height: 40px; height: 40px; padding: 0 18px; white-space: nowrap; overflow: hidden; }

.btn-upload-image { font-weight: bold }


.btn_salva a { color: #2a313c; }
.btn_salva:hover { transform: scale(1.04); } 




.maius { text-transform: uppercase  }
.minus { text-transform: lowercase  }



.btnchiaro { background: #999; color: #000 }
.btnscuro { background: #333; color: #fff }
#color_az1, #color_az2, #color_az3 { width: 12% }
#opac_color_az2 {  font-size: 18px; color: #000 }


.cancella { position: absolute; width: 26px; opacity: 0.6; cursor: pointer; top: calc(50% - 13px); height: auto; right: 1.5% }
.cancella:hover { opacity:1 }


.footer_ver { border-top: 1px solid rgba(0,0,0,.2); min-height: 40px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.2); padding: 0; font-size: .6rem; margin-top: 30px; column-gap: 5px; padding-bottom: 30px }

.footer_ver a { color: inherit; text-decoration: none }

.cont_text { padding: 40px 0; }
.box_text { padding: 10px 0; box-sizing: border-box  }

.flex1 { display: flex; flex-direction: column; height: 100%; /* Dispone gli elementi verticalmente */ flex: 1; }




.cont_image { flex-direction: row; justify-content: center; align-items: center; width: 100%; max-width: 100%; margin-top: -40px; display: flex; position: relative; }
.cont_image img { z-index: 1; width: 100%; position: relative; top: auto }  





.bg_image { box-shadow: none!important; background-repeat: no-repeat!important;  }



/*.img_add-wallet { background-image: url(../img/img_add-wallet.webp); background-size: cover; background-position: 15%; background-repeat: no-repeat; transition: background-size 0.3s ease-out;  }
*/

.img_add-wallet {
    background-image: url(../img/img_add-wallet.png); /* Assicurati di sostituire con il percorso corretto */
    background-position: 15%;
    background-repeat: no-repeat;
    background-size: auto 120%; /* Dimensione iniziale con zoom del 150% */
    min-width: 100%; /* Imposta la larghezza minima */
    transition: background-size 0.3s ease-out; /* Transizione fluida */
}



.img_auto-lan { background-image: url(../img/img_auto-lan.webp); background-size: cover; background-position: center }
.img_send-wa { background-image: url(../img/img_send-wa.webp); background-size: contain; background-position-x: 0 ; background-position-y: bottom; }
.img_screen_card { background-image: url(../img/mac_tel_screen.webp); background-size: contain; background-position-x: center; }

.img_attivazione { max-width: 140%; margin: -10% 0 -15% -5%; position: relative; z-index: 2; width: 720px }

  

ev, evr, evy, evb, evc, evs, evb { padding: 3px 7px 1px 7px; border-radius: 5px; display: inline-block; }
ev { background: rgba(255,255,255,.8); color: #2a3034 }
evr { background: #e50043; color: inherit }  
evy { background: #f9ae0b; color: inherit }
evb { background: #2a3034; color: inherit }
evc { background: rgba(255,255,255,.2); color: inherit }
evb { background: #03b7d6 }
evs { background: rgba(0,0,0,.3); color: inherit }

sup { vertical-align: .2rem; font-weight: bold; line-height: 1 }
su { vertical-align: 1rem; font-size: .8rem; font-weight: normal; line-height: 1 }

.pricing { display: flex; align-items: flex-start; gap: .3rem }
.pricing b { }
.pric_anno { display: flex; flex-direction: column; align-items: flex-start; padding-top: 10px }
.pric_anno su:nth-of-type(2) { color: #999999  }


b { font-family: Panton-Bold, Open Sans, Arial, Helvetica, Verdana, 'sans-serif'!important; letter-spacing: .5px; font-weight: normal }



.pad_l5 { padding-left: 5px; }
.pad_l10 { padding-left: 10px; }
.pad_l20 { padding-left: 20px; }
.pad_l30 { padding-left: 30px; }
.pad_l40 { padding-left: 40px; }

.pad_r5 { padding-right: 5px; }
.pad_r10 { padding-right: 10px; }
.pad_r20 { padding-right: 20px; }
.pad_r30 { padding-right: 30px; }
.pad_r40 { padding-right: 40px; }

.pad_rl20 { padding-left: 20px; padding-right: 20px; }
.pad_rl30 { padding-left: 30px; padding-right: 30px; }
.pad_rl40 { padding-left: 40px; padding-right: 40px; }

.pad_t0l20 { padding: 0 20px; }
.pad_t0l30 { padding: 0 30px; }
.pad_t0l40 { padding: 0 40px; }

.pad_t20l0 { padding: 20px 0px; }
.pad_t30l0 { padding: 30px 0px; }
.pad_t40l0 { padding: 40px 0px; }

.pad_no { padding:0!important }


.red { color: #e50043!important }
.yel { color: #f9ae0b!important }
.dark { color: #191d1f!important }
.darkl { color: #2a3034 }
.light { color: #efeef!important }
.bla { color: #0c0e0f!important }
.bia, .whi { color: #ffffff!important }
.cel { color: #03b7d6}
.trasp { color: rgba(255,255,255,.7)!important }

.gri { color: #aaaaaa!important }
.gris { color: #474a4c }
.wapp { color: #3fcc43 }
.bol { font-weight: bold!important}
.i20 { font-size: 20px }



.MZ { margin: 0!important }

.ML0 { margin-left: 0px!important }
.ML5 { margin-left: 5px!important }
.ML10 { margin-left: 10px!important }
.ML15 { margin-left: 15px!important }
.ML20 { margin-left: 20px!important }
.ML30 { margin-left: 30px!important }
.ML40 { margin-left: 40px!important }
.ML50 { margin-left: 50px!important }


.MR0 { margin-right: 0px!important }
.MR5 { margin-right: 5px!important }
.MR10 { margin-right: 10px!important }
.MR15 { margin-right: 15px!important }
.MR20 { margin-right: 20px!important }
.MR30 { margin-right: 30px!important }
.MR40 { margin-right: 40px!important }
.MR50 { margin-right: 50px!important }


.MT0 { margin-top: 0px!important }
.MT5 { margin-top: 5px!important }
.MT10 { margin-top: 10px!important }
.MT15 { margin-top: 15px!important }
.MT20 { margin-top: 20px!important }
.MT30 { margin-top: 30px!important }
.MT40 { margin-top: 40px!important }
.MT50 { margin-top: 50px!important }

.MB5 { margin-bottom: 5px!important }
.MB10 { margin-bottom: 10px!important }
.MB15 { margin-bottom: 15px!important }
.MB20 { margin-bottom: 20px!important }
.MB25 { margin-bottom: 25px!important }
.MB30 { margin-bottom: 30px!important }
.MB40 { margin-bottom: 40px!important }
.MB50 { margin-bottom: 50px!important }

.M-20 { margin: -20px; }


.PT0 { padding-top: 0px!important }
.PT5 { padding-top: 5px!important }
.PT10 { padding-top: 10px!important }
.PT15 { padding-top: 15px!important }
.PT20 { padding-top: 20px!important }
.PT30 { padding-top: 30px!important }
.PT40 { padding-top: 40px!important }
.PT50 { padding-top: 50px!important }


.PB0 { padding-bottom: 0px!important }
.PB5 { padding-bottom: 5px!important }
.PB10 { padding-bottom: 10px!important }
.PB15 { padding-bottom: 15px!important }
.PB20 { padding-bottom: 20px!important }
.PB30 { padding-bottom: 30px!important }
.PB40 { padding-bottom: 40px!important }
.PB50 { padding-bottom: 50px!important }

.PAD0 { padding: 0px!important }
.PAD10 { padding: 10px!important }
.PAD20 { padding: 20px!important }
.PAD30 { padding: 30px!important }
.PAD40 { padding: 40px!important }

.BOX { border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.95) }

nota { font-size: .9rem; font-style: italic; color: #aaaaaa }











@media all and (max-width: 1920px) {

}


@media all and (max-width: 1440px) {

}




@media all and (max-width: 1280px) {



}


@media all and (max-width: 1080px) {




}


@media all and (max-width: 1024px) {

}



@media all and (max-width: 980px) {

html, body { font-size: 18px }
.col-3 { grid-template-columns: repeat(2, 1fr); }


}






@media all and (max-width: 810px) {



#menu_top { grid-template-columns: auto auto 4fr auto auto; grid-column-gap: 10px }
#menu_top > :nth-child(3) { order: 6 }

.container { padding: 105px 0px 0px 0px }

.logodg { width: 100%; max-width: 240px; min-width: 240px }

.col-1-1, .col-6-4, .col-4-6 { grid-template-columns: 1fr; }

.cont_image { margin-top: auto}

}


@media all and (max-width: 768px) {

.logo_header { grid-template-columns: 40% 1fr; }
}




@media all and (max-width: 767px) {


#menu_top { grid-template-columns: auto auto 4fr auto auto }
#menu_top > :nth-child(3) { order: 6 }
.info { top: 10px; right: 10px }
.Fcerca:nth-child(3) { grid-column: 1 / -1;}

.logo_header { grid-template-columns: 50% 1fr; }
.col-2_40-60 { grid-template-columns: 1fr; }
.cont_text { padding: 20px 0 }

}



@media all and (max-width: 570px) {

html, body { font-size: 20px }
.logo_header { grid-template-columns: 1fr; grid-row-gap: .6em }
.col-2_40-60 { grid-template-columns: 1fr; }

.cont_text { padding: 20px 0 }
.cont_image { margin-top: -40px }

.col-3, .col-4 { grid-template-columns: 1fr; }

.nogap { margin-left: 0!important } /* senza !important vinceva il -2em: sul telefono le immagini uscivano a sinistra (passoV88) */
.cont_escard { margin-top: -2em!important; padding: 0 20px!important }

.bg_image { padding: 50% 0!important;  margin-top: -2em!important; }
.img_send-wa { background-size: contain; background-position: center;}

}




@media all and (max-width: 480px) {

html, body { font-size: 18px }
#menu_top { grid-template-columns: auto auto 4fr auto; grid-row-gap: 8px  }

#menu_top > :nth-child(3) { order: 5 }
#menu_top > .dati_accesso ws:nth-child(1) span { display: none; } 
#menu_top > :nth-child(4) { order: 3 }
#menu_top > :nth-child(5) { order: 4 }
#menu_top > :nth-child(6) { order: 5 }
#menu_top > .Clingua { grid-column: 4 }

.container { padding: 105px 0px 0px 0px }
.cont_image img { width: 100% }


}




@media all and (max-width: 340px) {
/*#menu_top > :nth-child(3) { font-size: 2vw } */

/*
#menu_top > :nth-child(1),
#menu_top > :nth-child(2),
#menu_top > :nth-child(5),
#menu_top > :nth-child(6),
#menu_top > .Clingua { font-size: 3vw }*/

}













/* Registrazione: riquadro codice di verifica (14/10) e avviso email gia' registrata */
.dg-verifica { display: flex; gap: 15px; align-items: flex-start; background: #f9ae0b; color: #1b1e21; border-radius: 5px; padding: 15px 20px; margin: 10px 0 20px; font-size: 16px; line-height: 1.4; }
.dg-verifica.disnone { display: none }
.dg-verifica.dg-entra { animation: dgVerEntra .5s ease-out, dgVerPulsa 1.2s ease-out .5s 3; }
.dg-verifica-ico { font-size: 34px; margin-top: 3px }
.dg-verifica-testo b:first-child { display: block; font-size: 20px; letter-spacing: .03em }
.dg-verifica #verifica_email { margin-top: 12px; color: #1b1e21; font-size: 18px; font-weight: bold; flex-wrap: nowrap; column-gap: 12px; white-space: nowrap }
.dg-verifica #verifica_email.disnone { display: none }
.dg-verifica #codver { background: #fff!important; color: #1b1e21!important; border: 2px solid #1b1e21!important; width: 6.5em; min-width: 0; font-size: 22px; text-align: center; letter-spacing: .3em; padding: 6px 8px; }
.dg-verifica #ic_ver { color: rgba(0,0,0,.25); font-size: 28px }
.dg-verifica .okver { color: #1b1e21; font-size: 28px }
.dg-verifica .kover { color: #e50043; font-size: 28px }
.dg-verifica #altro_codice { display: inline-block; margin: 10px 0 0; color: #1b1e21; font-weight: bold; text-decoration: underline }
.dg-verifica #altro_codice.disnone { display: none }
@keyframes dgVerEntra { from { opacity: 0; transform: translateY(-10px) scale(.97) } to { opacity: 1; transform: none } }
@keyframes dgVerPulsa { 0% { box-shadow: 0 0 0 0 rgba(249,174,11,.8) } 100% { box-shadow: 0 0 0 18px rgba(249,174,11,0) } }
.dg-email-esiste { display: block; background: #e50043; color: #fff; border-radius: 5px; padding: 10px 15px; font-size: 15px; line-height: 1.4; margin-top: 12px; animation: dgVerEntra .4s ease-out; }
.dg-email-esiste a { color: #fff; font-weight: bold; text-decoration: underline; margin-right: 12px; white-space: nowrap }
@media (max-width: 600px) { .dg-verifica { padding: 12px 14px } .dg-verifica-ico { font-size: 26px } .dg-verifica #verifica_email { font-size: 16px; column-gap: 10px; row-gap: 8px; flex-wrap: wrap; white-space: normal } .dg-verifica #codver { width: 7em; font-size: 22px; letter-spacing: .2em } }

/* Registrazione: scelta Azienda / Privato, riquadri informativi e note dei campi (14/10) */
.solo-privato { display: none }
.tipo-privato .solo-privato { display: inline }
.tipo-privato .solo-azienda { display: none!important }
.dg-tipo { display: flex; gap: 10px; margin: 0 0 15px 35px; flex-wrap: wrap }
.dg-tipo label { cursor: pointer }
.dg-tipo input { position: absolute; opacity: 0; pointer-events: none }
.dg-tipo span { display: inline-block; padding: 8px 16px; border-radius: 5px; border: 1px solid #f9ae0b; color: #f9ae0b; font-size: 16px; transition: background .2s, color .2s }
.dg-tipo input:checked + span { background: #f9ae0b; color: #1b1e21; font-weight: bold }
.dg-tipo span:hover { background: rgba(249,174,11,.15) }
.dg-tipo input:focus-visible + span { outline: 2px solid #fff }
.dg-info-step { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px 35px; padding: 10px 14px; border-radius: 5px; background: rgba(249,174,11,.12); border-left: 3px solid #f9ae0b; color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.45 }
.dg-info-step > i { color: #f9ae0b; font-size: 18px; margin-top: 1px }
.dg-info-step b { color: #fff }
.nota_form { color: rgba(255,255,255,.85); font-size: 13px; line-height: 1.4; background: #1b1e21; border: 1px solid rgba(249,174,11,.5); border-radius: 5px; padding: 8px 12px; margin: -6px 0 12px 35px }
@media (max-width: 600px) { .dg-tipo, .dg-info-step { margin-left: 0 } .nota_form { margin-left: 0; width: 100% } }
.tipo-privato #cod_fisc { width: calc(100% - 40px)!important }
/* Registrazione: cliente estero (19/10) - niente PEC/SDI, nota IVA del riepilogo secondo il regime (lib/paesi.php) */
.paese-estero .solo-italia { display: none!important }
.solo-iva-ue, .solo-iva-extra, .iva-ue .solo-iva, .iva-extra .solo-iva { display: none }
.iva-ue .solo-iva-ue, .iva-extra .solo-iva-extra { display: inline }
/* Registrazione: privati con IVA italiana = prezzi IVA inclusa nel riepilogo (20/10, inviaformTipo.js) */
.solo-ivato { display: none }
.prezzi-ivati .solo-ivato { display: inline }
.prezzi-ivati .no-ivato { display: none!important }
#form_step_4 h6.dg-nota-multi { margin: 6px 0 14px; line-height: 1.4; font-size: 13px }
/* Guida card su dominio (14/10) */
.dg-dns { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 }
.dg-dns td { padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.15); text-align: left }
.dg-dns td:first-child { color: rgba(255,255,255,.65); width: 45% }
.dg-dns b { color: #f9ae0b; font-family: monospace; font-size: 15px }
.dg-guida .box_text p { margin-bottom: 8px }
.dg-prezzo-anno { display: block; color: rgba(255,255,255,.55); font-size: 13px; margin: -6px 0 12px }
.bg_sfum .dg-prezzo-anno { color: rgba(0,0,0,.55) }
/* 14/10: menu in alto del sito responsive (prima le regole erano copiate dal pannello e allungavano i pulsanti) */
@media all and (max-width: 900px) {
.cont_menu { padding: 0 20px }
.cont_menu #menu_top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0 }
.cont_menu #menu_top > * { order: 0; grid-column: auto }
.cont_menu #menu_top > .spazio_menu { flex: 1 0 0; min-width: 0 }
}
@media all and (max-width: 600px) {
.cont_menu { padding: 0 12px }
.cont_menu #menu_top { gap: 6px; padding: 10px 0 }
.cont_menu #menu_top > .gestisci, .cont_menu #menu_top > .esci, .cont_menu #menu_top > .Clingua { font-size: .62rem; padding: 6px 8px 4px }
.container { padding-top: 120px }
}
/* home: i due badge Wallet affiancati si restringono sui telefoni (prima allargavano la pagina) */
.due_col-sx .img2col { flex: 1 1 0; min-width: 0 }
/* pagina rimborso (14/10) */
.dg-rimborso-passi p { display: flex; gap: 10px; align-items: baseline }
.dg-rimborso-passi ev { flex: 0 0 auto; min-width: 1.4em; text-align: center }
.dg-rimborso-box { margin: 0 0 15px 35px; padding: 12px 14px; border-radius: 5px; background: rgba(228,0,67,.1); border-left: 3px solid #e40043; font-size: 14px; line-height: 1.45 }
.dg-rimborso-box h5 { margin: 0 0 8px; color: #fff }
.dg-rimborso-box .dg-rimborso-passi p { margin: 0 0 6px }
.dg-rimborso-cta { display: flex; justify-content: flex-end }
/* modulo contatti: nota privacy allineata ai campi, 14px (23/10) */
#contactForm > small { margin-left: 35px; font-size: 14px }
#contactForm > small ev { font-size: 12px }
@media (max-width: 600px) { .dg-rimborso-box { margin-left: 0 } }

/* footer: nelle lingue con parole lunghe (ru, de) tra 571 e 650 px va a capo invece di uscire dallo schermo (passoV82) */
.boxfooter { overflow-wrap: anywhere }

/* home: due pulsanti affiancati nello stesso riquadro ("Grafica personalizzata"); sul telefono il secondo va sotto (passoV77) */
.btn_riga { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto }

/* home, Funzioni speciali (passoV88): tra 571 e 1080 px 2 colonne, testo e immagine affiancati (prima 4 colonne strettissime) */
@media all and (min-width: 571px) and (max-width: 1080px) { #special .col-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media all and (min-width: 1081px) { #special .col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } } /* colonne uguali nelle due righe */
#special .cont_escard { width: auto; max-width: none } /* come le altre immagini della sezione: arriva al bordo destro della colonna (prima 36 px più corta) */
@media all and (max-width: 570px) { .testo2col { column-count: 1 } .col-2, .col-2_1-2 { grid-template-columns: 1fr } } /* sul telefono una colonna sola: Enterprise (Piani), Contatti, Attivazione (anche il riepilogo, passoV90), Privacy (passoV88) */
.section p, .section li { overflow-wrap: anywhere } /* indirizzi lunghi (es. https://card.tuodominio.it/nome.cognome) vanno a capo invece di uscire dallo schermo (passoV90) */
/* passoV90: testi lunghi delle altre lingue (es. tedesco) vanno a capo solo se non ci stanno, invece di allargare riquadri e pagina */
flashboxr, flashboxg, flashboxd, flashboxy, flashboxc { white-space: normal; max-width: calc(100% + 40px); box-sizing: border-box }
a.btn { white-space: normal; max-width: 100%; box-sizing: border-box }
.section h1, .section h2, .section h3 { overflow-wrap: anywhere }
@media all and (min-width: 571px) and (max-width: 1080px) { .boxfooter { grid-template-columns: repeat(2, minmax(0, 1fr)) } } /* footer: 2 colonne su tablet (4 erano troppo strette) */
/* menu in alto sopra i 900 px (passoV90): come prima su una riga, ma se un testo è lungo (es. russo) va a capo invece di uscire;
   tra 901 e 1100 px spazio tra i pulsanti 10 px invece di 20, così anche il russo sta su una riga */
@media all and (min-width: 901px) { .cont_menu #menu_top { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 10px } .cont_menu #menu_top > .spazio_menu { flex: 1 0 0; min-width: 0 } }
@media all and (min-width: 901px) and (max-width: 1100px) { .cont_menu #menu_top { column-gap: 10px } }
/* Accettazione dei Termini nell'ultimo passo della registrazione (19/10, passoV97): righe come le scelte add-on, testo su più righe */
#form_step_4 .dg-acc .left-elements { width: 100% }
#form_step_4 .dg-acc .left-elements span { flex: 1 1 auto; line-height: 1.4; font-size: 14px }
#form_step_4 .dg-accetta .dg-acc:last-of-type { border-bottom: 1px solid gray }
/* riepilogo al telefono (20/10/2026): scritte a capo, importo sotto la scritta quando non c'è spazio, riquadro importo largo abbastanza (prima: testi sotto gli importi e importi tagliati) */
@media all and (max-width: 570px) {
#form_step_4 .input-wrapper { flex-wrap: wrap; row-gap: 6px }
#form_step_4 .input-wrapper .left-elements { width: auto; flex: 1 1 auto; min-width: 0 }
#form_step_4 .input-wrapper .left-elements span { flex: 0 1 auto; white-space: normal }
#form_step_4 .input-wrapper .right-elements { flex: 0 0 auto; margin-left: auto }
#form_step_4 .input-wrapper .right-elements .input { width: 100px!important }
}