/* 
** bar_1 >> have box border, limit width
** bar_2 >> don't have box border, full screen width */



/* 	--bar2_SIMPLE_MARQUEE_BOX_TXT: var(--color2);
	--bar2_SIMPLE_MARQUEE_BOX_BORDER: 2px solid var(--color10);
	--bar2_SIMPLE_MARQUEE_BOX_BG: var(--color10);
	--bar2_SIMPLE_MARQUEE_SIBLING_BG: var(--color10);
	
	--bar2_SIMPLE_MARQUEE_BOX_SIBLING_BG: var(--color10); 
	--bar2_SIMPLE_MARQUEE_BOX_FULL_BORDER: 2px solid var(--color10);
	--bar2_SIMPLE_MARQUEE_BOX_FULL_BG: var(--color10);
	
	--bar2_SIMPLE_MARQUEE_BOX_FULL_SIBLING_BG: var(--color10); */


/* MARQUEE */
.simple-marquee-box {
    position: relative;
    margin: 1rem 0;
    padding: 1.2rem 10px;
    overflow: hidden;
    border-radius: 0;
    color: var(--bar2_SIMPLE_MARQUEE_BOX_TXT);
    border: var(--bar2_SIMPLE_MARQUEE_BOX_BORDER);
    background-color: var(--bar2_SIMPLE_MARQUEE_BOX_BG)
}

.simple-marquee-box.unlogin {
	margin: 2rem 0 10px
}

.simple-marquee-box .marquee-sibling {
    height: 100%;
	padding: 5px 1rem;
    font-size: 1rem;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    z-index: 1;
    background: var(--bar2_SIMPLE_MARQUEE_SIBLING_BG)
}

.simple-marquee-box .marquee,
*[class^="marquee"] {
	position: absolute;
	display: inline-block;
	white-space: nowrap
}

.simple-marquee-box .marquee-content-items {
    position: relative;
	display: flex;
    margin: 0;
    padding: 5px;
    top: 50%;
    transform: translateY(-50%)
}

.simple-marquee-box .marquee-content-items li:after {
	content: "|";
	margin: 0 1rem
}

.simple-marquee-box.full {
	padding: 20px 10px;
	border-radius: 0;
	border: var(--bar2_SIMPLE_MARQUEE_BOX_FULL_BORDER);
    background-color: var(--bar2_SIMPLE_MARQUEE_BOX_FULL_BG);
}

.simple-marquee-box.full .marquee-sibling {
	background-color: var(--bar2_SIMPLE_MARQUEE_BOX_FULL_SIBLING_BG)
}