/* STRUTTURA GENERICA ELEMENTI FORM */
/*.shareBtn {height:20px; width:20px; margin-right:5px; margin-top:10px; display:inline-block; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:20px; mask-repeat:no-repeat; mask-position:center; mask-size:20px; font-size:2em; text-align:center; -moz-transition:all .3s; -webkit-transition:all .3s; -o-transition:all .3s; -ms-transition:all .3s; transition:all .3s;}*/
/*SCROLLBAR*/
::-webkit-scrollbar {width:$scrollbar_widthpx; height:$scrollbar_heightpx;}
::-webkit-scrollbar-track {-moz-border-radius:$scrollbar_border_radius_tlpx $scrollbar_border_radius_trpx $scrollbar_border_radius_brpx $scrollbar_border_radius_blpx; -webkit-border-radius:$scrollbar_border_radius_tlpx $scrollbar_border_radius_trpx $scrollbar_border_radius_brpx $scrollbar_border_radius_blpx; border-radius:$scrollbar_border_radius_tlpx $scrollbar_border_radius_trpx $scrollbar_border_radius_brpx $scrollbar_border_radius_blpx;}
::-webkit-scrollbar-thumb {-moz-border-radius:$scrollbar_border_radius_tlpx $scrollbar_border_radius_trpx $scrollbar_border_radius_brpx $scrollbar_border_radius_blpx; -webkit-border-radius:$scrollbar_border_radius_tlpx $scrollbar_border_radius_trpx $scrollbar_border_radius_brpx $scrollbar_border_radius_blpx; border-radius:$scrollbar_border_radius_tlpx $scrollbar_border_radius_trpx $scrollbar_border_radius_brpx $scrollbar_border_radius_blpx;}
/*/SCROLLBAR*/
/* INPUT GEOMETRIE */
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime"], select {
line-height:$font_lineheight_inputpx;
font-size:$font_em_size_input;
font-weight:$font_weight_input;
font-family:$font_family_input;
}
textarea {
line-height:$font_lineheight_textareapx;
font-size:$font_em_size_textarea;
font-weight:$font_weight_textarea;
font-family:$font_family_textarea;
resize:$textarea_resize;
}
/*ASPETTO*/
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime"], select {
border-width: $input_border_width_tpx $input_border_width_rpx $input_border_width_bpx $input_border_width_lpx;
border-style: $input_border_style;
-moz-border-radius:$input_border_radius_tlpx $input_border_radius_trpx $input_border_radius_brpx $input_border_radius_blpx;
-webkit-border-radius:$input_border_radius_tlpx $input_border_radius_trpx $input_border_radius_brpx $input_border_radius_blpx;
border-radius:$input_border_radius_tlpx $input_border_radius_trpx $input_border_radius_brpx $input_border_radius_blpx;
-webkit-box-shadow:$input_box_shadow_xpx $input_box_shadow_ypx $input_box_shadow_blurpx $input_box_shadow_spreadpx $input_box_shadow_color;
-moz-box-shadow:$input_box_shadow_xpx $input_box_shadow_ypx $input_box_shadow_blurpx $input_box_shadow_spreadpx $input_box_shadow_color;
box-shadow:$input_box_shadow_xpx $input_box_shadow_ypx $input_box_shadow_blurpx $input_box_shadow_spreadpx $input_box_shadow_color;
}
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime"], select, textarea {
color:$color_input_text_normale; background-color:$color_input_normale; border-color:$color_input_border_normale;}
textarea {border-width: $textarea_border_width_tpx $textarea_border_width_rpx $textarea_border_width_bpx $textarea_border_width_lpx;
border-style: $textarea_border_style;
-moz-border-radius:$textarea_border_radius_tlpx $textarea_border_radius_trpx $textarea_border_radius_brpx $textarea_border_radius_blpx;
-webkit-border-radius:$textarea_border_radius_tlpx $textarea_border_radius_trpx $textarea_border_radius_brpx $textarea_border_radius_blpx;
border-radius:$textarea_border_radius_tlpx $textarea_border_radius_trpx $textarea_border_radius_brpx $textarea_border_radius_blpx;
-webkit-box-shadow:$textarea_box_shadow_xpx $textarea_box_shadow_ypx $textarea_box_shadow_blurpx $textarea_box_shadow_spreadpx $textarea_box_shadow_color;
-moz-box-shadow:$textarea_box_shadow_xpx $textarea_box_shadow_ypx $textarea_box_shadow_blurpx $textarea_box_shadow_spreadpx $textarea_box_shadow_color;
box-shadow:$textarea_box_shadow_xpx $textarea_box_shadow_ypx $textarea_box_shadow_blurpx $textarea_box_shadow_spreadpx $textarea_box_shadow_color;
}
/* PULSANTI */
.btn-con-icon-mask {height:30px; width:30px; display:inline-block; position:relative; cursor:pointer; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:30px; mask-repeat:no-repeat; mask-position:center; mask-size:30px; font-size:2em; text-align:center; -moz-transition:all .3s; -webkit-transition:all .3s; -o-transition:all .3s; -ms-transition:all .3s; transition:all .3s;}
.btn-callToAction {display:inline-block; cursor:pointer; line-height:$font_lineheight_btn;}
.btn, .btn-2, .goBack, input[type="button"], button, input[type="submit"], input[type="reset"] {display:inline-block; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
border-width:$btn_border_width_tpx $btn_border_width_rpx $btn_border_width_bpx $btn_border_width_lpx;
border-style:$btn_border_style;
-moz-border-radius:$btn_border_radius_tlpx $btn_border_radius_trpx $btn_border_radius_brpx $btn_border_radius_blpx;
-webkit-border-radius:$btn_border_radius_tlpx $btn_border_radius_trpx $btn_border_radius_brpx $btn_border_radius_blpx;
border-radius:$btn_border_radius_tlpx $btn_border_radius_trpx $btn_border_radius_brpx $btn_border_radius_blpx;
-webkit-box-shadow:$btn_box_shadow_xpx $btn_box_shadow_ypx $btn_box_shadow_blurpx $btn_box_shadow_spreadpx $btn_box_shadow_color;
-moz-box-shadow:$btn_box_shadow_xpx $btn_box_shadow_ypx $btn_box_shadow_blurpx $btn_box_shadow_spreadpx $btn_box_shadow_color;
box-shadow:$btn_box_shadow_xpx $btn_box_shadow_ypx $btn_box_shadow_blurpx $btn_box_shadow_spreadpx $btn_box_shadow_color;
font-family:$font_family_btn; font-size:$font_em_size_btn; font-weight:$font_weight_btn; line-height:$font_lineheight_btn;}
.btn:first-letter, .btn-2:first-letter, .goBack:first-letter, input[type="button"]:first-letter, input[type="submit"]:first-letter, input[type="reset"]:first-letter, .btn-callToAction:first-letter, .btn-con-icon-mask:first-letter {text-transform:uppercase;}
input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, .disabled {opacity:.2;}
/*ICONE MASK IMAGE*/
span.icona {display:flex; align-items:center; justify-content:center; margin:auto; background-color:transparent;}
span.icona.x-10 {width:10px; height:10px; margin:10px auto;}
span.icona.x-20 {width:20px; height:20px; margin:10px auto;}
span.icona.x-30 {width:30px; height:30px; margin:10px auto;}
span.icona.x-40 {width:40px; height:40px; margin:10px auto;}
span.icona.x-50 {width:50px; height:50px; margin:10px auto;}
span.icona.x-60 {width:60px; height:60px; margin:10px auto;}
span.icona.x-70 {width:70px; height:70px; margin:10px auto;}
span.icona i {width:100%; height:100%; display:inline-block; background-color:$color_001; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:85% auto;}
/*Esempio html con icona in top */
span.icona.icona-sx {display:inline-flex; margin:0; margin-right:7px;}
/*Esempio html con icona a sx */
/*Esempio html di btn con icona a sx Testo pulsante*/
.btn-conIcona {display:inline-flex !important; gap:0.3rem; align-items:center; justify-content: flex-start;}
.btn-conIcona .icona-btn {width:24px; height:24px; background-color:$color_button_text_normale !important; mask-position:center; mask-repeat:no-repeat; mask-size:85% auto; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:85% auto;}
.btn-conIcona:hover .icona-btn {background-color:$color_button_text_hover !important;}
/*ICONE IMG IN BG*/
.i-icon {display:inline-block; position:relative; background-size:100% auto; background-position:center center; background-repeat:no-repeat; -moz-transition:all linear .1s; -webkit-transition:all linear .1s; -o-transition:all linear .1s; -ms-transition:all linear .1s; transition:all linear .1s;}
.i-icon.x-10 {width:10px; height:10px; top:3px;}
.i-icon.x-20 {width:20px; height:20px; top:5px;}
.i-icon.x-30 {width:30px; height:30px; top:8px;}
.i-icon.x-40 {width:40px; height:40px; top:8px;}
.i-icon.x-50 {width:50px; height:50px; top:8px;}
/*
Esempio html con icona a sx
Testo titolo
Esempio html con icona a dx
Testo titolo
Esempio html con icona a top
Testo titolo
*/
/* SELECT */
/* select con icona personalizzata */
select {
cursor:pointer;
-webkit-appearance:$select_custom_icon_appearance;
-moz-appearance:$select_custom_icon_appearance;
appearance:$select_custom_icon_appearance;
background-image:$select_custom_icon_background;
background-repeat:no-repeat;
background-position:calc(100% - $select_custom_icon_positionpx);
background-size:$select_custom_icon_size;
line-height:initial;
}
/*checkbox & radiobutton*/
.contenitore-input {padding-left:30px; display:block; position:relative; float:left; cursor:pointer; text-align:left; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
.contenitore-input input[type="radio"], .contenitore-input input[type="checkbox"] {width:0; height:0; margin:0; position:absolute; opacity:0; cursor:pointer;}
.checkmark {width:20px; height:20px; position:absolute; top:50%; left:5px; margin-top:-10px; background-color:#ddd; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.contenitore-input:hover input ~ .checkmark {background-color:#ccc;}
.contenitore-input input:checked ~ .checkmark {background-color:#4caf50;}
.checkmark:after {content: ""; position:absolute; display:none;}
.contenitore-input input:checked ~ .checkmark:after {display:block;}
.contenitore-input .checkmark:after {width:5px; height:10px; left:6px; top:2px; border:solid white; border-width:0 3px 3px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform:rotate(45deg);}
.radiomark {width:20px; height:20px; position:absolute; top:50%; left:5px; margin-top:-10px; background-color:#ddd; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
.contenitore-input:hover input ~ .radiomark {background-color:#ccc;}
.contenitore-input input:checked ~ .radiomark {background-color:#4caf50;}
.radiomark:after {content: ""; position:absolute; display:none;}
.contenitore-input input:checked ~ .radiomark:after {display:block;}
.contenitore-input .radiomark:after {width:10px; height:10px; top:5px; left:5px; background-color:#fff; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%;}
/*/checkbox & radiobutton*/
/* CAUTION: IE hackery ahead */
select::-ms-expand {display:none; /* remove default arrow on ie10 and ie11 */}
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {background:none\9; padding: 5px\9;}
}
/* select nativa */
select.standard {
-webkit-appearance: menulist;
-moz-appearance: menulist;
appearance: menulist;
background-image:none;
line-height:50px;
padding:0 10px;
}
select.standard::-ms-expand {display:block; /* remove default arrow on ie10 and ie11 */}
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {background:none\9; padding:5px\9;}
}
.formErrore {}
.msgAlert {padding-top:2px; text-indent:2px; font-size:.8rem; text-align:left;}
/* COLORI */
/*::selection {background-color:$color_input_normale; color:$color_input_text_normale;}
::-moz-selection {background-color:#d3d8ce; color:$color_input_text_normale;}
::-webkit-input-placeholder {color:$color_input_text_normale;}*/
::-moz-input-placeholder {color:$color_input_text_normale;}
::-ms-input-placeholder {color:$color_input_text_normale;}
.formErrore::-webkit-input-placeholder {color:$color_notice_error;}
.formErrore::-moz-input-placeholder {color:$color_notice_error;}
.formErrore::-ms-input-placeholder {color:$color_notice_error;}
.formErrore {color:$color_notice_error !important; border-color:$color_notice_error !important;}
.msgAlert {color:$color_notice_error !important;}
.msgAlert:before {border-top-color:$color_notice_error !important;}
.msgAlert:after {}
/*COLORI ICONE*/
.selectableLabel i {background-color:$color_001;}
.contentLoginBox i {background-color:$color_001;}
.menuUtente i {background-color:$color_001;}
.view-psw {background-color:$color_001;}
.btn-con-icon-mask {background-color:$color_button_text_normale;}
/*COLORI ELEMENTI FORM*/
input[type="button"], button, input[type="submit"], input[type="reset"], .btn, .btn-goTo, .goBack {color:$color_button_text_normale !important; background-color:$color_button_normale !important; border-color:$color_button_border_normale !important;}
input[type="button"]:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, .btn:hover, .btn-goTo:hover .goBack:hover {background-color:$color_button_hover !important; color:$color_button_text_hover !important; border-color:$color_button_border_hover !important;}
.btn-2 {color:$color_button_2_text_normale !important; background-color:$color_button_2_normale !important; border-color:$color_button_2_border_normale !important;}
.btn-2:hover {background-color:$color_button_2_hover !important; color:$color_button_2_text_hover !important; border-color:$color_button_2_border_hover !important;}
input[type="text"], input[type="email"], input[type="search"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="date-time"], select, textarea {color:$color_input_text_normale; background-color:$color_input_normale; border-color:$color_input_border_normale;}
input[type="text"]:hover, input[type="search"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="password"]:hover, input[type="number"]:hover, input[type="date"]:hover, input[type="time"]:hover, input[type="date-time"]:hover, select:hover, textarea:hover {background-color:$color_input_hover; color:$color_input_text_hover; border-color:$color_input_border_hover;}
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"], input[type="time"], input[type="date-time"], select:focus, textarea:focus {background-color:$color_input_focus; color:$color_input_text_focus; border-color:$color_input_border_focus;}
/* ----------------------- MEDIA QUERY ------------------*/
@media screen and (min-width: 0px) and (max-width: 600px) {
.btn, .btn-2, .goBack, .btn-callToAction, input[type="button"], button, input[type="submit"], input[type="reset"] {padding:$btn_padding_mob_tpx $btn_padding_mob_rpx $btn_padding_mob_bpx $btn_padding_mob_lpx !important;}
.btn-callToAction {width:100%; text-align:center;}
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime"] {height:$input_mob_heightpx; padding-top:$input_padding_mob_tpx; padding-right:$input_padding_mob_rpx; padding-bottom:$input_padding_mob_bpx; padding-left:$input_padding_mob_lpx;}
select {height:$input_mob_heightpx; padding-top:$select_custom_padding_mobTpx; padding-right:$select_custom_padding_mobRpx; padding-bottom:$select_custom_padding_mobBpx; padding-left:$select_custom_padding_mobLpx;}
textarea {height:$textarea_mob_heightpx; padding-top:$textarea_padding_mob_tpx; padding-right:$textarea_padding_mob_rpx; padding-bottom:$textarea_padding_mob_bpx; padding-left:$textarea_padding_mob_lpx;}
input[type='number'] {appearance:textfield;}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button, input[type='number']:hover::-webkit-inner-spin-button, input[type='number']:hover::-webkit-outer-spin-button {-webkit-appearance:none; margin: 0;}
.contenitore-input {}
}
@media screen and (min-width: 601px) and (max-width: 768px) {
.btn, .btn-2, .goBack, .btn-callToAction, input[type="button"], button, input[type="submit"], input[type="reset"] {padding:$btn_padding_mob_tpx $btn_padding_mob_rpx $btn_padding_mob_bpx $btn_padding_mob_lpx !important;}
.btn-callToAction {width:100%; text-align:center;}
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime"] {height:$input_mob_heightpx; padding-top:$input_padding_mob_tpx; padding-right:$input_padding_mob_rpx; padding-bottom:$input_padding_mob_bpx; padding-left:$input_padding_mob_lpx;}
select {height:$input_mob_heightpx; padding-top:$select_custom_padding_mobTpx; padding-right:$select_custom_padding_mobRpx; padding-bottom:$select_custom_padding_mobBpx; padding-left:$select_custom_padding_mobLpx;}
textarea {height:$textarea_mob_heightpx; padding-top:$textarea_padding_mob_tpx; padding-right:$textarea_padding_mob_rpx; padding-bottom:$textarea_padding_mob_bpx; padding-left:$textarea_padding_mob_lpx;}
input[type='number'] {appearance: textfield;}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button, input[type='number']:hover::-webkit-inner-spin-button, input[type='number']:hover::-webkit-outer-spin-button {-webkit-appearance:none; margin: 0;}
.contenitore-input {}
}
@media only screen and (min-width: 769px){
.btn, .btn-2, .goBack, .btn-callToAction, input[type="button"], button, input[type="submit"], input[type="reset"] {padding:$btn_padding_tpx $btn_padding_rpx $btn_padding_bpx $btn_padding_lpx !important;}
.btn-callToAction {width:auto;}
input[type="text"], input[type="email"], input[type="number"], input[type="search"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime"] {height:$input_heightpx; padding-top:$input_padding_tpx; padding-right:$input_padding_rpx; padding-bottom:$input_padding_bpx; padding-left:$input_padding_lpx;}
select {height:$input_heightpx; padding-top:$select_custom_paddingTpx; padding-right:$select_custom_paddingRpx; padding-bottom:$select_custom_paddingBpx; padding-left:$select_custom_paddingLpx;}
textarea {height:$textarea_heightpx; padding-top:$textarea_padding_tpx; padding-right:$textarea_padding_rpx; padding-bottom:$textarea_padding_bpx; padding-left:$textarea_padding_lpx;}
input[type="button"], button, input[type="submit"], input[type="reset"], input[type="number"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="time"], textarea, .btn, .btn-2, .btn-callToAction, .btn-con-icon-mask {cursor:pointer !important; -webkit-transition:.3s linear !important; -moz-transition:.3s linear !important; -ms-transition:.3s linear !important; -o-transition:.3s linear; transition:.3s linear !important;}
input[type='number'] {appearance:textfield;}
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button, input[type='number']:hover::-webkit-inner-spin-button, input[type='number']:hover::-webkit-outer-spin-button {-webkit-appearance:none; margin:0;}
.contenitore-input {min-height:30px; line-height:30px; margin:5px;}
}