#substitution-costs-table-container, #substitution-rules-container, #substitution-roadtype-rules-container {
	width: 100%;
	height: 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;
}
#substitution-costs-table-container table {
	display: block;
	position: absolute !important;
	width: calc(100% - 10px) !important;
	height: calc(100% - 10px) !important;
}
#substitution-roadtype-rules-container .substitution-cost-rule-input {
	max-width: 10em;
}
.substitution-cost-rule-title {
	width: 50%;
	text-align: start;
	text-transform: capitalize;
}

.rules-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: flex-start;
	text-align: center;
	position: relative;
	transition: border-color 0.25s linear;
    width: 100%;
    height: 100%
}
.rules-container:hover {
	border: var(--border-color2) solid 0.2em;
}
.rules-container.error {
	border: darkred solid 0.1em !important;
}
.rules-container.error:hover {
	border: darkred solid 0.2em !important;
}
.rules-container.to-update {
	border: darkorange solid 0.1em;
}
.rules-container.to-update:hover {
	border: darkorange solid 0.2em;
}
.substitution-rules {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  text-align: center;
  align-items: center;
  gap: 5px;
  position: relative;
}
#substitution-roadtype-rules-container .substitution-rules {
	height: 100%;
	justify-content: space-around !important;
}
.rules-container .substitution-rule-button {
	width: 100%;
	height: 20px;
	text-align: center;
}
.rules-container .substitution-rules-button {
	width: 20px;
	height: 20px;
	text-align: center;
}
.substitution-rules-button-container {
	position: absolute;
	bottom: 100%;
    left: 100%;
	display: flex;
	transform: translateX(-100%);
}
.rules-container img {
	position:relative;
	width: var(--icon-size-normal);
	height: var(--icon-size-normal);
}
legend::before {
    content: attr(name);
}
legend {
	padding-left: 0.3em;
	padding-right: 0.2em;
	margin-bottom: 0.1em;
	color: var(--font-color1);
}
legend:hover {
	color: var(--font-color2);
	font-weight: bold;
}

.substitution-cost-rule {
	display: flex;
	flex-direction: row;
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
	color: var(--font-color1);
    justify-content: space-between;
    gap: 5px;
	padding: 5px;
    width: 100%;
    line-height: 1.8em;
	border-radius: var(--border-radius)
}
.substitution-cost-rule .substitution-rule-button {
	width: var(--icon-size-normal);
	height: var(--icon-size-normal);
	text-align: center;
}
.substitution-cost-rule .orig-values,.substitution-cost-rule .subs-values {
	display: flex;
	flex-direction: row;
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
	padding: 5px;
	border-radius: var(--border-radius)
}
.substitution-cost-rule-input {
	font-size: var(--font-size2);
	width: 100%;
	padding: 2px;	
	background-color: var(--background-color1);
	border: solid 1px var(--border-color2);
	border-radius: 2px;
	color: var(--font-color1)
}
.substitution-cost-rule-input:hover {
	color: var(--font-color2);
	font-weight: bold
}
.substitution-cost-rule-input:read-only {
	opacity: 0.5;
	border: solid 0.5px var(--border-color2-alpha) !important;
}
.substitution-cost-rule-input:read-only:hover, .substitution-cost-rule-input:read-only:focus {
	border: solid 0.5px var(--border-color2-alpha) !important;
	color: var(--font-color1) !important;
	font-weight: normal !important
}
.substitution-cost-rule-input.not-valid {
	border: darkred solid 0.1em !important;
}
.substitution-cost-rule-input.not-valid:hover {
	border: darkred solid 0.2em !important;
}
.substitution-cost-rule.duplicated-rule {
	border: rgb(209, 0, 216) solid 0.1em !important;
}
.substitution-cost-rule.duplicated-rule:hover {
	border: rgb(209, 0, 216) solid 0.2em !important;
}
.substitution-cost-rule .orig-values.error,.substitution-cost-rule .subs-values.error {
	border: rgb(209, 0, 216) solid 0.1em !important;
}
#subsCostsTable td.cost-not-defined {
	border: rgb(209, 0, 216) solid 0.1em !important;
}