#SP_container
{
    display: grid;
    grid-template-columns: 2fr 4fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    height: 100%;
}

#SP_name_entry, #SP_name_entry:focus,
#SP_new_name_entry, #SP_new_name_entry:focus
{
	border: none;
    background: none !important;
    outline: 0;
    border-bottom: 1px solid;
    font-size: 1em;
    text-transform: uppercase;
    color: var(--alt-font-color) !important;
	flex-basis: 50%;
	width: 100%;
}

#SP_new_name_entry, #SP_new_name_entry:focus { flex-basis: 100%; }

#SP_settings_list_container { position: relative; }
#SP_settings_list > li { position: relative; }

#SP_settings_list > li >div.icon-trash
{
    right: 3px !important;
    top: 3px !important;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5'/></svg>") no-repeat center / contain;
	position: absolute;
	cursor: pointer;
	transition: 0.25s all ease-in-out;
}

#SP_settings_list > li:hover>div.icon-trash
{
	opacity: 0.5;
}

#SP_settings_list > li >div.icon-trash:hover
{
	opacity: 1;
}

#SP_add_new_settings_button
{
	position: absolute;
    bottom: 7px;
    text-align: center;
    width: 87%;
    font-size: 1em !important;
    left: 8px;
}

.SP_disabled_field
{
	pointer-events: none;
	opacity: 0.5;
}

#SP_setup_container
{
	display: flex;
	width: 95%;
	flex-wrap: wrap;
	row-gap: 1.25em;
	justify-content: space-between;
	align-items: flex-start;
	box-shadow: 1px 1px 5px -3px #000000ab, 0px 0px 2px -1px #000000a1;
	padding: 10px;
	border-radius: 6px;
	align-content: flex-start;
}

#SP_setup_container > div { flex-basis: 100%; }

#SP_header_container
{
	display: flex;
    justify-content: space-between;
	align-items: center;
}

.SP_input_container
{
    display: grid;
    grid-template-columns: min-content min-content min-content;
    column-gap: 1em;
    row-gap: .6em;
    align-items: center;
    font-size: 0.9em;
	white-space: nowrap;
}

.SP_input_container > div { display: contents; }

.SP_input_container > div > span:first-child { grid-column: 1; }
.SP_input_container > div > div:last-child { grid-column: 4; }

.SP_input_container > div > input
{
	grid-column: 2;
	width: 3.5em;
	border: none;
	border-bottom: 1px solid;
	background: transparent;
	text-align: center;
	outline: none;
}

[data-theme="light"] .SP_input_container > div > input
{
	border-color: black;
	color: black;
}

[data-theme="dark"]  .SP_input_container > div > input
{
	border-color: white;
	color: white;
}

[data-theme="light"] #SP_setup_container
{
	box-shadow: 1px 1px 5px -3px #000000ab, 0px 0px 2px -1px #000000a1;
}

[data-theme="dark"] #SP_setup_container
{
	box-shadow: 1px 1px 3px -3px #ffffffd9, 0px 0px 2px 0px #ffffffde;
}

#SP_options_container
{
	grid-column: span 2 / span 2 !important;
    grid-area: auto;
    height: fit-content !important;
}

/*sportsbooks*/

#SPS_container, #SPL_container
{
	display: flex;
	flex-wrap: wrap;
	padding: 3px;
	align-content: flex-start;
	row-gap: 0.5em;
	height: 34em;
}

#SPS_sportsbooks_list_container, #SPL_leagues_list_container
{
    width: 100%;
    height: 32em;
}

#SPS_sportsbooks_list > li:hover .SPS_star
{
	visibility: visible !important;
}

#SPS_sportsbooks_must_include_header, #SPS_added_sportsbooks_header
{
	cursor: auto;
	column-gap: 0.5em;
}

#SPS_sportsbooks_must_include_header > span:first-child, 
#SPS_added_sportsbooks_header > span:first-child
{
	text-decoration: underline;
    text-underline-offset: 3px;
}

#SPS_added_sportsbooks_header > span:nth-child(2)
{
	margin-right: auto;
    font-size: 2em;
    line-height: 0;
    cursor: pointer;
	transition: 200ms ease-in-out;
}

#SPS_added_sportsbooks_header > span:nth-child(2):hover
{
	margin-bottom: 3px;
    transform: scale(1.2);
}

#SPS_sportsbooks_must_include_header:hover, 
#SPS_added_sportsbooks_header:hover
{
    background: unset !important;
    box-shadow: none !important;
    cursor: auto;
	color: revert !important;
}

.SPS_empty_hint
{
	font-size: 0.9em;
    font-style: italic;
    opacity: 0.7;
	pointer-events: none;
}

.SPS_divider
{
	margin: 6px 0 0;
    border-top: 1px solid #ddd;
	cursor: default;
	pointer-events: none;
}

.SPS_divider:hover
{
	box-shadow: none !important;
	background-color: unset !important;
}

.SPS_star
{
	position: relative;
	display: inline-flex;
	width: 16px;
	height: 16px;
	cursor: pointer;
	margin-right: auto;
}

.SPS_star::before,
.SPS_star::after
{
	content: "";
	position: absolute;
	inset: 0;

	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;

	transition: opacity 260ms ease, transform 240ms ease;
}

.SPS_star::before
{
	background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\<path fill='none' stroke='%232fdd1d' stroke-width='1' stroke-linejoin='round' d='M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73z'/>\</svg>");
	opacity: 1;
}

.SPS_star::after
{
	background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>\<path fill='%232fdd1d' d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/>\</svg>");

	opacity: 0;
	transform: scale(0.92);
}

.SPS_star:hover::before
{
	opacity: 0;
}

.SPS_star:hover::after
{
	opacity: 1;
	transform: scale(1.05);
}

.SPS_star.is_filled::before
{
	opacity: 0;
}

.SPS_star.is_filled::after
{
	opacity: 1;
	transform: scale(1);
}

.sharp_books_grid
{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 0.5em;
	row-gap: 0.5em;
	margin-top: 0.75em;
}

.sharp_books_cell
{
	white-space: nowrap;        
	overflow: hidden;
	text-overflow: ellipsis; 
}

#SP_volume_button 
{ 
	cursor: pointer; 
	transition: 0.1s ease-in-out;
	margin-left: 1em;
    margin-right: 1em;
}

#SP_volume_button:hover { transform: scale(1.1); }

html[data-theme="light"] #sP_volume_button { filter: none; }

html[data-theme="dark"] #SP_volume_button { filter: invert(1); }

.popup_message_container .message_profile
{
	font-size: 0.85em;
	opacity: 0.9;
}

#sharp_plays_popup_container
{
    height: 95%;
    border: 1px solid #7777777d;
    border-radius: 6px;
    box-shadow: inset 0px 0px 3px 0px #00000057;
    padding: 0px 8px;
	overflow: scroll;
}

#sharp_plays_container
{
	box-shadow: inset 0px 3px 5px -5px #000000b3;
	padding: 9px 2px;
}

#sharp_plays_container_filler
{
	flex-basis: 100%;
	text-align: center;
	height: 50%;
	transform: translateY(85%);
	font-style: italic;
	background-color: #666666;
	opacity: 0.75;
	font-size: 2em;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: rgb(245 245 245 / 49%) 1px 1px 2px;
}

.lds-ring
{
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}

.lds-ring div
{
	box-sizing: border-box;
	display: block;
	position: absolute;
	width: 64px;
	height: 64px;
	margin: 8px;
	border: 8px solid #fff;
	border-radius: 50%;
	animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	border-color: var(--hover-accent-color) transparent transparent transparent;
}

.lds-ring div:nth-child(1)
{
	animation-delay: -0.45s;
}

.lds-ring div:nth-child(2)
{
	animation-delay: -0.3s;
}

.lds-ring div:nth-child(3)
{
	animation-delay: -0.15s;
}

@keyframes lds-ring
{
	0%
	{
		transform: rotate(0deg);
	}

	100%
	{
		transform: rotate(360deg);
	}
}