#strategy-definition-container {
	width: 100%;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px;
	justify-content: space-around;
	align-content: flex-start;
	flex-wrap: wrap;
    flex-direction: row;
}

.strategy-container {
	border: var(--border-color2) solid 0.1em;
	background-color: var(--background-color2);
	border-radius: 0.5em;
	padding: 10px;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	text-align: center;
	position: relative;
	transition: border-color 0.25s linear;
}
.strategy-container:hover {
	border: var(--border-color2) solid 0.2em;
}
.strategy-container.to-upload {
	border: darkred solid 0.1em;
}
.strategy-container.to-upload:hover {
	border: darkred solid 0.2em;
}
.strategy-container.to-update {
	border: darkorange solid 0.1em;
}
.strategy-container.to-update:hover {
	border: darkorange solid 0.2em;
}
.strategy-parameter-weights {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  text-align: center;
  align-items: center;
  gap: 2px;
  position: relative;
}
.strategy-container .param-button {
	width: 100%;
	height: 20px;
	text-align: center;
}
.strategy-container .strategy-button {
	width: 20px;
	height: 20px;
	text-align: center;
}
.strategy-button-container {
	position: absolute;
	bottom: 100%;
    left: 100%;
	display: flex;
	transform: translateX(-100%);
}
.strategy-parameter .param-button {
	width: 20px;
	height: 20px;
	text-align: center;
}
.strategy-container img {
	position:relative;
	width: 15px;
	height: 15px;
}
legend::before {
    content: attr(name);
}
legend {
	padding-left: 0.3em;
	padding-right: 0.2em;
	margin-bottom: 0.1em;
	color: var(--font-color1);
	font-size: var(--font-size5);
}
legend:hover {
	color: var(--font-color2);
	font-weight: bold;
}
label[type='parameter'] {
  margin: 0.5em;
  font-size: 14;
  color: var(--font-color1);
}

.strategy-parameter {
	display: flex;
	flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
	color: var(--font-color1);
    justify-content: flex-start;
}

/* Slider * * ====== */
.strategy-parameter-label {
	font-size: var(--font-size1);
	padding: 2px;
	width: 13em;	
	background-color: var(--background-color1);
	border: solid 1px var(--border-color2);
	border-radius: 2px;
	color: var(--font-color1)
}
.strategy-parameter-label:hover {
	color: var(--font-color2);
	font-weight: bold
}
.strategy-parameter-value {
	font-size: var(--font-size1);
	width: 3em;
}
/* ## Slider main element */
.strategy-parameter-libra {
	display: flex;
	margin: 5px;
	padding: 0;
	font-size: inherit;
	width: 10em;
	height: 1.2em;
	border-radius: 0.25em;
	border: 0.2em solid var(--background-color3);
	background-color: var(--background-color1);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 0.2s linear;
	box-shadow: 0 0 0 0 transparent;
}
.strategy-parameter-libra:focus {
	box-shadow: 0 0 0 0.1em var(--background-color4);
}
.strategy-parameter-libra:hover {
	box-shadow: 0 0 0 0.15em var(--border-color1);
}

/* ## Slider components */
/* ### Slider::-track */
input[type='range']::-webkit-slider-runnable-track {
	border: none;
	background: none;
	height: 100%;
	width: 100%;
}
input[type='range']::-moz-range-track {
	border: none;
	background: none;
	height: 100%;
	width: 100%;
}
input[type='range']::-ms-track {
	border: none;
	background: none;
	height: 100%;
	width: 100%;
}
/* ### Slider::-thumb */
input[type='range']::-webkit-slider-thumb {
	margin: 0.05em;
	padding: 0;
	height: 0.9em;
	width: 0.9em;
	border-radius: 0.1em;
	box-sizing: border-box;
	border: none;
	background-color: var(--border-color1);
	box-shadow: -10em 0 0 0 #313131, -9em 0 0 0 #313131, -8em 0 0 0 #2f343f, -7em 0 0 0 #283f6b, -6em 0 0 0 #214893, -5em 0 0 0 #1a52bc, -4em 0 0 0 #2769d3, -3em 0 0 0 #3e87dc, -2em 0 0 0 #55a5e6, -1em 0 0 0 #6fc5f0, 1em 0 0 0 #181818, 2em 0 0 0 #181818, 3em 0 0 0 #181818, 4em 0 0 0 #181818, 5em 0 0 0 #181818, 6em 0 0 0 #181818, 7em 0 0 0 #181818, 8em 0 0 0 #181818, 9em 0 0 0 #181818;
	cursor: ew-resize;
}
input[type='range']::-moz-range-thumb {
	margin: 0.05em;
	padding: 0;
	height: 0.9em;
	width: 0.9em;
	border-radius: 0.1em;
	box-sizing: border-box;
	border: none;
	background-color: #6fc5f0;
	box-shadow: -10em 0 0 0 #313131, -9em 0 0 0 #313131, -8em 0 0 0 #2f343f, -7em 0 0 0 #283f6b, -6em 0 0 0 #214893, -5em 0 0 0 #1a52bc, -4em 0 0 0 #2769d3, -3em 0 0 0 #3e87dc, -2em 0 0 0 #55a5e6, -1em 0 0 0 #6fc5f0, 1em 0 0 0 #181818, 2em 0 0 0 #181818, 3em 0 0 0 #181818, 4em 0 0 0 #181818, 5em 0 0 0 #181818, 6em 0 0 0 #181818, 7em 0 0 0 #181818, 8em 0 0 0 #181818, 9em 0 0 0 #181818;
	cursor: ew-resize;
}
input[type='range']::-ms-thumb {
	margin: 0.05em;
	padding: 0;
	height: 0.9em;
	width: 0.9em;
	border-radius: 0.1em;
	box-sizing: border-box;
	border: none;
	background-color: #6fc5f0;
	box-shadow: -10em 0 0 0 #313131, -9em 0 0 0 #313131, -8em 0 0 0 #2f343f, -7em 0 0 0 #283f6b, -6em 0 0 0 #214893, -5em 0 0 0 #1a52bc, -4em 0 0 0 #2769d3, -3em 0 0 0 #3e87dc, -2em 0 0 0 #55a5e6, -1em 0 0 0 #6fc5f0, 1em 0 0 0 #181818, 2em 0 0 0 #181818, 3em 0 0 0 #181818, 4em 0 0 0 #181818, 5em 0 0 0 #181818, 6em 0 0 0 #181818, 7em 0 0 0 #181818, 8em 0 0 0 #181818, 9em 0 0 0 #181818;
	cursor: ew-resize;
}
/* ## Browser tweaks */
/* ### webkit */
input[type='range'], input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb {
	-webkit-appearance: none;
}
/* ### IE */
input[type='range']::-ms-track {
	color: transparent;
}
input[type='range']::-ms-fill-lower, input[type='range']::-ms-fill-upper, input[type='range']::-ms-tooltip {
	display: none;
}

#strategy-definition-page .menu-bar #strategy-toolbar.reached-limit #strategy-name-label,
#strategy-definition-page .menu-bar #strategy-toolbar.reached-limit #strategy-name-setter,
#strategy-definition-page .menu-bar #strategy-toolbar.reached-limit #add-new-strategy {
	display: none
}

#strategy-definition-page .menu-bar #strategy-toolbar #reached-limit-label {
	display: none;
	color: darkorange;
	font-weight: bold
}

#strategy-definition-page .menu-bar #strategy-toolbar.reached-limit #reached-limit-label {
	display: flex;
}