/* SVGs contained by CSS classes */ 			/* !!! Fix svgs by using object on animated ones, img on static. */
/*  Remember that iframe can also be used for animated svgs, but unlike object does not have a fallback */
.svgi {
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: cover;
	-webkit-mask-size: cover;
	
	display: inline-block;
	aspect-ratio: 1/1;
	width: 32px;
    
}

.icon-quantas {
	mask-image: url(../media/quantas-logo.svg);
	-webkit-mask-image: url(../media/quantas-logo.svg);
	width: 100px;
	height: 30px;
	aspect-ratio: initial;
	background-color: black;
}


.icon-ninedots {
    width: 32px;
    height: 32px;
    
    display: inline-block;
    background-color: #FFA111; /* Large dots color */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="4" cy="4" r="3"/><circle cx="12" cy="4" r="3"/><circle cx="20" cy="4" r="3"/><circle cx="4" cy="12" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="20" cy="12" r="3"/><circle cx="4" cy="20" r="3"/><circle cx="12" cy="20" r="3"/><circle cx="20" cy="20" r="3"/></svg>'); 
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="4" cy="4" r="3"/><circle cx="12" cy="4" r="3"/><circle cx="20" cy="4" r="3"/><circle cx="4" cy="12" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="20" cy="12" r="3"/><circle cx="4" cy="20" r="3"/><circle cx="12" cy="20" r="3"/><circle cx="20" cy="20" r="3"/></svg>'); 
    position: relative;
}

.icon-ninedots::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #FFA111; /* Small dots color */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="4" cy="4" r="2"/><circle cx="12" cy="4" r="2"/><circle cx="20" cy="4" r="2"/><circle cx="4" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="20" cy="12" r="2"/><circle cx="4" cy="20" r="2"/><circle cx="12" cy="20" r="2"/><circle cx="20" cy="20" r="2"/></svg>'); 
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="4" cy="4" r="2"/><circle cx="12" cy="4" r="2"/><circle cx="20" cy="4" r="2"/><circle cx="4" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="20" cy="12" r="2"/><circle cx="4" cy="20" r="2"/><circle cx="12" cy="20" r="2"/><circle cx="20" cy="20" r="2"/></svg>'); 
    -webkit-mask-composite: destination-over;
    mask-composite: exclude;
}

.icon-ninedots:hover::before {
    background-color: white; /* Small dots turn white on hover */
}


.icon-x {
    display: inline-block;
    background-color: #ffa111; /* Your desired color */
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4 L20 20 M20 4 L4 20" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 4 L20 20 M20 4 L4 20" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
}

/* Elements Holding the <i> */
.icon-label {
    display: flex;

    width: 32px;
    height: 32px;
}

.icon-button {
    all: unset;
    display: inherit;
	border: 0;
    padding: 0;

    width: 32px;
    height: 32px;
}


/* Home Carousel Arrows */
.icon-semiarrow-left {
  	mask-image: url("../media/semiarrow-left.svg");
	-webkit-mask-image: url("../media/semiarrow-left.svg");
	background-color: black;
	width: 24px;
}
.icon-semiarrow-right {
  	mask-image: url("../media/semiarrow-right.svg");
	-webkit-mask-image: url("../media/semiarrow-right.svg");
	background-color: black;
	width: 24px;
}



/* -------------------------- */

.svgi--person {
  	mask-image: url("../media/formularies/person.svg");
	-webkit-mask-image: url("../media/formularies/person.svg");
}
.svgi--legal-name {
  	mask-image: url("../media/formularies/legal-name.svg");
	-webkit-mask-image: url("../media/formularies/legal-name.svg");
}
.svgi--phone {
	mask-image: url("../media/formularies/phone.svg");
	-webkit-mask-image: url("../media/formularies/phone.svg");
}
.svgi--email {
	mask-image: url("../media/formularies/email.svg");
	-webkit-mask-image: url("../media/formularies/email.svg");
}



.svgi--city {
	mask-image: url("../media/formularies/city.svg");
	-webkit-mask-image: url("../media/formularies/city.svg");
}
.svgi--address {
	mask-image: url("../media/formularies/address.svg");
	-webkit-mask-image: url("../media/formularies/address.svg");
}
.svgi--day_start {
	mask-image: url("../media/formularies/day_start.svg");
	-webkit-mask-image: url("../media/formularies/day_start.svg");
}
.svgi--day_end {
	mask-image: url("../media/formularies/day_end.svg");
	-webkit-mask-image: url("../media/formularies/day_end.svg");
}
.svgi--time_start {
	mask-image: url("../media/formularies/clock.svg");
	-webkit-mask-image: url("../media/formularies/clock.svg");
}
.svgi--time_end {
	mask-image: url("../media/formularies/clock.svg");
	-webkit-mask-image: url("../media/formularies/clock.svg");
}
.svgi--attendees {
	mask-image: url("../media/formularies/clock.svg");
	-webkit-mask-image: url("../media/formularies/clock.svg");
}