/*https://cmstemplate.marketplus.it/template/default/condivisi/css/btn_input.css*/

/* 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:17px; height:17px;}
::-webkit-scrollbar-track {-moz-border-radius:0px 0px 0px 0px; -webkit-border-radius:0px 0px 0px 0px; border-radius:0px 0px 0px 0px;}
::-webkit-scrollbar-thumb {-moz-border-radius:0px 0px 0px 0px; -webkit-border-radius:0px 0px 0px 0px; border-radius:0px 0px 0px 0px;}
/*/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:50px;
font-size:1em;
font-weight:400;
font-family:"Lato", sans-serif;
}
textarea {
line-height:18px;
font-size:1em;
font-weight:400;
font-family:"Lato", sans-serif;
resize:vertical;
}
/*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: 1px 1px 1px 1px;
border-style: solid;
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
border-radius:4px 4px 4px 4px;
-webkit-box-shadow:0px 0px 0px 0px #555555;
-moz-box-shadow:0px 0px 0px 0px #555555;
box-shadow:0px 0px 0px 0px #555555;
}
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:#000000; background-color:#ffffff; border-color:#cccccc;}


textarea {border-width: 1px 1px 1px 1px;
border-style: solid;
-moz-border-radius:0px 0px 0px 0px;
-webkit-border-radius:0px 0px 0px 0px;
border-radius:0px 0px 0px 0px;
-webkit-box-shadow:0px 0px 0px 0px #555555;
-moz-box-shadow:0px 0px 0px 0px #555555;
box-shadow:0px 0px 0px 0px #555555;
}

/* 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:3px 3px 3px 3px;
border-style:solid;
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
border-radius:4px 4px 4px 4px;
-webkit-box-shadow:0px 0px 0px 0px #919191;
-moz-box-shadow:0px 0px 0px 0px #919191;
box-shadow:0px 0px 0px 0px #919191;
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:#1d2129; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:85% auto;}
/*Esempio html con icona in top <span class="icona x-50"><i class="star"></i></span>*/
span.icona.icona-sx {display:inline-flex; margin:0; margin-right:7px;}
/*Esempio html con icona a sx <span class="icona icona-sx x-50"><i class="user"></i></span>*/

/*Esempio html di btn con icona a sx <a class="btn btn-conIcona"><i class="icona-btn star"></i><span>Testo pulsante</span></a>*/
.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:#ffffff !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:#ffffff !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
<h1><i class="i-icon x-30 telefono"></i>Testo titolo</h3>
Esempio html con icona a dx
<h1>Testo titolo<i class="i-icon x-30 telefono"></i></h3>
Esempio html con icona a top
<h1><i class="i-icon x-30 telefono"></i><br />Testo titolo</h3>
*/

/* SELECT */
/* select con icona personalizzata */
select {
cursor:pointer;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background-image:url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImZpbGw6IHJnYigwLCAwLCAwKTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwb2x5Z29uIHBvaW50cz0iMjI1LjgxMyw0OC45MDcgMTI4LDE0Ni43MiAzMC4xODcsNDguOTA3IDAsNzkuMDkzIDEyOCwyMDcuMDkzIDI1Niw3OS4wOTMgICAiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4=");
background-repeat:no-repeat;
background-position:calc(100% - 8px);
background-size:12px;
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:#ffffff; color:#000000;}
::-moz-selection {background-color:#d3d8ce; color:#000000;}
::-webkit-input-placeholder {color:#000000;}*/
::-moz-input-placeholder {color:#000000;}
::-ms-input-placeholder {color:#000000;}
.formErrore::-webkit-input-placeholder {color:#8b0300;}
.formErrore::-moz-input-placeholder {color:#8b0300;}
.formErrore::-ms-input-placeholder {color:#8b0300;}
.formErrore {color:#8b0300 !important; border-color:#8b0300 !important;}
.msgAlert {color:#8b0300 !important;}
.msgAlert:before {border-top-color:#8b0300 !important;}
.msgAlert:after {}

/*COLORI ICONE*/
.selectableLabel i {background-color:#1d2129;}
.contentLoginBox i {background-color:#1d2129;}
.menuUtente i {background-color:#1d2129;}
.view-psw {background-color:#1d2129;}
.btn-con-icon-mask {background-color:#ffffff;}
/*COLORI ELEMENTI FORM*/
input[type="button"], button, input[type="submit"], input[type="reset"], .btn, .btn-goTo, .goBack {color:#ffffff !important; background-color:#1d2129 !important; border-color:#1d2129 !important;}
input[type="button"]:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, .btn:hover, .btn-goTo:hover .goBack:hover {background-color:#2d323e !important; color:#ffffff !important; border-color:#2d323e !important;}
.btn-2 {color:#ffffff !important; background-color:#c1362c !important; border-color:#c1362c !important;}
.btn-2:hover {background-color:#96261e !important; color:#ffffff !important; border-color:#96261e !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:#000000; background-color:#ffffff; border-color:#cccccc;}
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:#ffffff; color:#000000; border-color:#cccccc;}

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:#ffffff; color:#000000; border-color:#cccccc;}

/* ----------------------- 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:10px 20px 10px 20px !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:50px; padding-top:0px; padding-right:10px; padding-bottom:0px; padding-left:10px;}
select {height:50px; padding-top:0px; padding-right:18px; padding-bottom:0px; padding-left:4px;}
textarea {height:150px; padding-top:15px; padding-right:10px; padding-bottom:15px; padding-left:10px;}

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:10px 20px 10px 20px !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:50px; padding-top:0px; padding-right:10px; padding-bottom:0px; padding-left:10px;}
select {height:50px; padding-top:0px; padding-right:18px; padding-bottom:0px; padding-left:4px;}
textarea {height:150px; padding-top:15px; padding-right:10px; padding-bottom:15px; padding-left:10px;}

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:10px 20px 10px 20px !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:50px; padding-top:0px; padding-right:10px; padding-bottom:0px; padding-left:10px;}
select {height:50px; padding-top:0px; padding-right:18px; padding-bottom:0px; padding-left:4px;}
textarea {height:150px; padding-top:15px; padding-right:10px; padding-bottom:15px; padding-left:10px;}

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;}
}