/* Igual em section.css:29 */
.mobile #widget-container { --w: calc(var(--width-window) - var(--8u)); }
.tablet #widget-container { --w: 540px; }
.desktop #widget-container { --w: 720px; }
#widget-container {
	display: none;
	display: flex;
	flex-direction: column;
	pointer-events: none;

	position: absolute;
	width: 100%;
}
#widget-container .wrapper {
	width: var(--w);
	height: 0px;

	margin-top: var(--top-widget-container);
	margin-left: auto;
	margin-right: auto;
	pointer-events: none;
}

#widget1 {
	--shadow-color: transparent;

	position: relative;
	/* left: 16px; */

	/* background-color: #000; */
	/* background-color: #fff; */
	/* border: 2px white solid; */
	border-radius: var(--2u);

	transform: translate(0%,-50%);
	pointer-events: none;
}

#widget1 .dot {
	width: 8px;
	height: 8px;
	margin: 8px;
	margin-left: 0px;
	border-radius: var(--1u);

	background-color: #fff;

	box-shadow: 0px 0px 2px 2px var(--shadow-color);
	border: 2px solid #fff;

	opacity: .2;

	pointer-events: all;
}
#widget1 .dot:hover {
	cursor: pointer;
}
#widget1 .dot.section1:hover { opacity: 1; background-color: var(--color-verde-paulo-gustavo);}
#widget1 .dot.section2:hover { opacity: 1; background-color: var(--color-azul-paulo-gustavo);}
#widget1 .dot.section3:hover { opacity: 1; background-color: var(--color-amarelo-paulo-gustavo);}
#widget1 .dot.section4:hover { opacity: 1; background-color: var(--color-vermelho-paulo-gustavo);}


#widget1.active[data-section-active="1"] { --shadow-color: var(--color-verde-bg-paulo-gustavo); }
#widget1.active[data-section-active="2"] { --shadow-color: var(--color-azul-bg-paulo-gustavo); }
#widget1.active[data-section-active="3"] { --shadow-color: var(--color-amarelo-bg-paulo-gustavo); }
#widget1.active[data-section-active="4"] { --shadow-color: var(--color-vermelho-bg-paulo-gustavo); }

/*
#widget1 .dot.section1 { background-color: var(--color-verde-bg-paulo-gustavo);}
#widget1 .dot.section2 { background-color: var(--color-azul-bg-paulo-gustavo);}
#widget1 .dot.section3 { background-color: var(--color-amarelo-bg-paulo-gustavo);}
#widget1 .dot.section4 { background-color: var(--color-vermelho-bg-paulo-gustavo);}
*/
#widget1[data-section-active="1"] .dot.section1,
#widget1[data-section-active="2"] .dot.section2,
#widget1[data-section-active="3"] .dot.section3,
#widget1[data-section-active="4"] .dot.section4 { background-color: #fff; }

#widget1[data-section-active="1"].active .dot.section1 { opacity: 1; background-color: var(--color-verde-paulo-gustavo);}
#widget1[data-section-active="2"].active .dot.section2 { opacity: 1; background-color: var(--color-azul-paulo-gustavo);}
#widget1[data-section-active="3"].active .dot.section3 { opacity: 1; background-color: var(--color-amarelo-paulo-gustavo);}
#widget1[data-section-active="4"].active .dot.section4 { opacity: 1; background-color: var(--color-vermelho-paulo-gustavo);}