/*
 * Copyright 2020-Present Titan Informatics LLC. All Rights Reserved.
 *
 * Proprietary and Confidential.
 * Author: Douglas Noorzadeh
 *
 * This source code is the exclusive property of Titan Informatics LLC.
 * Unauthorized use, reproduction, disclosure, or distribution without written permission is strictly prohibited.
 */
[data-name="utility"] {
	font-size: 0.875rem;
	width: calc(100% - 30px);
	padding: 5px 0;
	margin: 0 15px;
	display: flex;
	flex-flow: row wrap;
	gap: 15px;
	border-bottom: var(--border);
	z-index: 3;
}
[data-name="utility"]::before,
[data-name="utility"]::after {
	content: " ";
	width: calc((100vw - 100%) / 2);
	height: calc(100% + 1px);
	position: absolute; top: 0; bottom: -1px;
	border-bottom: var(--border);
	background: inherit;
}
[data-name="utility"]::before {right: 100%;}
[data-name="utility"]::after {left: 100%;}
[data-name="utility"] [data-name="todayMarket"] ul li,
[data-name="utility"] [data-name="todayTemperature"] ul li {display: flex; gap: 10px;}
[data-name="utility"] [data-name="todayMarket"] ul li::before,
[data-name="utility"] [data-name="todayTemperature"] ul li::before {margin-right: auto;}
[data-name="utility"] [data-name="todayMarket"] ul li::before {content: attr(data-market);}
[data-name="utility"] [data-name="todayTemperature"] ul li::before {content: attr(data-day);}
[data-name="utility"] > li > ul {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	background: var(--white);
	border: var(--border);
	border-top: unset;
	display: none;
}
[data-name="utility"] > li > ul li {
	width: 100%;
	padding: 7.5px 10px;
	border-top: var(--border);
	white-space: nowrap;
}
[data-name="utility"] > li.active > ul {
	display: block;
}

[data-name="utility"] > [title="Search"] {
	display: none;
}
[data-name="utility"] > [title="Search"]::after {
	font-size: 1.125rem;
}
[data-name="utility"] > [title="Donate"] {
	font-weight: 500;
	color: var(--red);
	display: none;
}
[data-name="utility"] > [title="Subscribe"] {margin-left: auto;}

[data-name="utility"] > [title="Donate"]::before,
[data-name="utility"] > [title="Login"]::before,
[data-name="utility"] > [title="Logout"]::before,
[data-name="utility"] > [title="Subscribe"]::before,
[data-name="utility"] > [data-target="/profile"]::before {
	content: attr(title);
	position: relative; float: left;
}


@media (max-width: 980px) {
	[data-name="utility"] > [title="Search"],
	[data-name="utility"] > [title="Donate"] {
		display: block;
	}

@media (max-width: 640px) {
	[data-name="utility"] > [title="Search"]::after {
	font-size: 1.125rem;
}
[data-name="utility"] > [title="Donate"]
}

@media (max-width: 480px) {
}