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

/* ============================
    GENERALI
    ============================ */



/*COLGATE*/
/*
:root {
    --primary: white;
    --secondary: #f5010b;
    --tertiary: #244b7f;
    --font: "Colgate Ready";
    --wLight: 300;
    --wNormal: normal;
    --wBold: bold;
}*/


/*ELMEX*/
:root {
    --primary: #008bec;
    --secondary: #005ea9;
    --tertiary: #5b6670;
	--quaternary: #e2e2e2;
	--white:#fff;
    --font: "Colgate Ready";
    --wLight: 300;
    --wNormal: normal;
    --wBold: bold;
}

.wLight {
    font-weight: var(--wLight);
}

body {
    font-family: var(--font), sans-serif;
    font-weight: var(--wLight);
    color: var(--primary);
}

.row {
    margin-left: 0px;
    margin-right: 0px;
}

h1, h2, h3, h4, p, a {
    font-family: var(--font), sans-serif;
    font-weight: var(--wBold);
    color: var(--primary);
}

p {
    font-weight: var(--wLight);
}

a {
    text-decoration: none;
}

b {
    font-weight: var(--wBold);
}

a:hover, a:focus, a:active {
    color: var(--primary);
}

.navbar-toggler:focus {
    /* rimuove l'ombra di selezione del bottone di Bootstrap */
    box-shadow: 0 0 0 0px !important;
}

/* ------- MENU -------- */

.skip-to-main-content-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    padding: 1em;
    background-color: black;
    color: white;
    opacity: 0;
}

.skip-to-main-content-link:focus {
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}

/* ------- FORM -------- */


/*COLGATE*/
/*.box {
    background: radial-gradient(circle farthest-corner at 70% 5%,  var(--tertiary) 0%, #0081be 100%); 
    border-radius: 30px 0px 30px 0px;
}*/


/*ELMEX*/
.box {
    background: var(--quaternary) !important; 
    border-radius: 30px 0px 30px 0px;
}


label, input, select {
    font-family: var(--font), sans-serif;
    font-weight: 300;
    color: var(--primary);
}

input {
    color: var(--tertiary) !important;
}

select {
    color: var(--tertiary) !important;
}

.info {
    vertical-align: baseline !important;
}

#errore {
    color: #ac182d;
    font-weight: var(--wBold);
    text-align: center;
    font-size: 24px;
}

label.errore-test {
    /* color: red!important; */
    color: #ac182d!important;
    /* color: #efe42e!important; */
    font-weight: bold;
    font-size: .85em;
}

.msg_errore_ios {
	color:#ac182d; /* #F5E018 */
	/* color:#efe42e;  #F5E018 */
	text-align:center;
	font-size:25px;
  font-family: 'Avenir Next';
  font-weight: bold;
}

.msg_errore_ios_link {
	color: inherit;
}

p.col-1 {
    width: 1%;
}

small.small {
    font-size: 10px;
    line-height: 9px;
}

.form-check-input {
    margin-top: 0.3em;
    margin-left: 0.6em;
}


/*COLGATE*/

/*.button {
    color: var(--primary);
    background: var(--secondary);
    border: 0px solid transparent;
    outline: none;
    border-radius: 0px 0px 50% 50%;
    font-family: var(--font), sans-serif;
    font-weight: var(--wBold);
    font-size: 2rem;
    line-height: 95%;
    width: 175px;
    height: 135px;
    padding-bottom: 1rem;
}*/


/*ELMEX*/
.button {
  color: var(--white);
  background: var(--primary);
  border: 0px solid transparent;
  outline: none;
  border-radius: 1px 15px 1px 15px;
  font-family: var(--font), sans-serif;
  font-weight: var(--wBold);
  font-size: 2rem;
  line-height: 95%;
  max-width: 226px;
  height: 50px;
  transform: skew(-12deg);
  padding: 0rem 1rem;
 /* clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);*/
}



.button:hover {
    color: var(--white);
    background: var(--secondary);
}



@media (max-width:375px) {
    .button {
        font-size: 1rem;
        padding: .5rem 1.8rem;
        max-width: 250px;
    }
	

	
/* ------- TRONCAMENETO MAIL  -------- */
	
	.long-and-truncated {
		  margin: 0 5px;
		  flex: 1;
		  min-width: 0;
		}


		.long-and-truncated span {
		  display: block;
		  -webkit-line-clamp: 3;
		  text-overflow: ellipsis;
		  overflow: hidden;
		  display: -webkit-box;
		  -webkit-box-orient: vertical;
		  word-wrap: break-word;
		}
	
	
	
}

/* ------- STILE CAMPI FORM ELMEX-------- */

.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: .375rem 2.25rem .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--tertiary);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--tertiary);
  border-radius: var(--bs-border-radius);
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}