@charset "UTF-8";

:root {
	--active-text-color: #F3F3F3;
	--disabled-text-color: #A2A2A2;
 	--active-filter: invert(98%) sepia(6%) saturate(344%) hue-rotate(222deg) brightness(116%) contrast(91%);
	--disabled-filter: invert(80%) sepia(0%) saturate(3%) hue-rotate(206deg) brightness(82%) contrast(86%);
 	/* The color of most borders and trims */
 	--functional-font: tahoma;
 	--normal-text-color: black;
 	--normal-text-font: tahoma;
 	--primary-color: #045c84;
 	--darkened-primary-color: #044c73;
	--dark-primary-color: #022639;
 	--primary-trim-color: #022639;
	--eastern-blue: #045c84;
 	--darker-eastern-blue: #044c73;
 	--dark-eastern-blue: #022639;
 	--trim-color: #022639;
}

/* Layout settings */

html, body {
	height: 100vh;
	width: 100vw;
	margin: 0;
	overflow:hidden;
}

body {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-top: 50px;
	font-family: var(--normal-text-font);
}

.vertical-divider, .horizontal-divider {
	background-color: grey;
}

.vertical-divider {
	width: 5px;
	cursor: ew-resize;
	z-index: 998;
}

.horizontal-divider {
	height: 5px;
	cursor: ns-resize;
	z-index: 998;
}

.si-wrapper {
	height: 80%;
	display: flex;
	overflow: hidden;
}

.selection-container {
	width: 50%;
	display: flex;
	flex-direction: column;
	overflow: none;
}

.info-container, .bom-container {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow: none;
}

/* Cosmetic settings */

.builder-option-select {
	font-size: 30px;
	border: 2px solid var(--trim-color);
	box-sizing: border-box;
	text-align: center;
	font-weight: bold;
	overflow: hidden;
	position: relative;
	border-radius: 10px;
	margin: 5px;
}

.builder-option-select h1 {
	text-align: center;
	background-color: var(--dark-eastern-blue);
	color: var(--active-text-color);
	height: 34px;
	line-height: 34px;
	font-size: 20px;
	margin: 0px;
}

.builder-option-select div {
	width: 100%;
  	display: flex;
	flex-wrap: wrap;
}

.builder-option-select div a {
	flex-basis: 25%;
	flex-grow: 1;
	cursor: pointer;
	color: black;
	background-color: #e8e8e8;
	position: relative;
	margin: 0px;
	text-align: center;
	line-height: 30px;
	font-size: 20px;
	justify-content: center;
	box-sizing: border-box;
	font-weight: normal;
	border-color: black;
}

.builder-option-select div a label {
	cursor: pointer;
	display: block;
	background-size: 200% 100%;
    -webkit-transition: background-position .2s;
    -moz-transition: background-position .2s;
    transition: background-position .2s;
}

/* How to display option buttons when they are hovered over */
.builder-option-select div a label:hover {
	color: var(--active-text-color);
	background-image: linear-gradient(to right, transparent 50%, var(--darker-eastern-blue) 50%);
	/** Transition */
	background-position: -100% 0%;
}

.builder-option-select div a > input {
	display: none;
}

/* How to display option buttons when they are selected */
.builder-option-select div a > input:checked + label {
    background-color: var(--eastern-blue);
    color: var(--active-text-color);
}

.builder-custom-option {
	width: 100%;
	background-color: transparent;
	color: inherit;
	border: transparent;
	cursor: pointer;
	color: var(--active-text-color);
	position: relative;
	margin: 0px;
	text-align: center;
	line-height: 30px;
	font-size: 20px;
	justify-content: center;
	box-sizing: border-box;
	font-weight: normal;
}

.builder-tooltip {
	border: 2px solid var(--trim-color);
	border-radius: 5px;
	/* Position the tooltip text */
	font-size: 14px;
	line-height: 16px;
  	position: fixed;
	min-width: 100px;
	max-width: 500px;
	background-color: #e8e8e8;
	padding: 10px;
  	z-index: 999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Visibility */
	visibility: hidden;
  	opacity: 0;
	transition:visibility 0s, opacity 0s;
}

.builder-tooltip h2 {
	margin-top: 0px;
}

.builder-option-select div a:hover .builder-tooltip {
	visibility: visible;
  	opacity: 1;
	transition: visibility 0s linear 1.0s , opacity 0.5s linear;
}

.header {
	position: sticky;
	z-index: 997;
	top: 0px;
	text-align: center;
	background-color: var(--dark-eastern-blue);
	color: var(--active-text-color);
	height: 34px;
	line-height: 34px;
	font-size: 20px;
	margin: 0px;
	overflow: none;
	white-space: nowrap;
}

.header-button {
	text-align: center;
	position: absolute;
	right: 0px;
	margin: 2px;
	height: 30px;
	font-size: 14px;
}

.content-wrapper {
	overflow: auto;
}

.item-preview {
	margin: auto;
	position: relative;
	display: inline-block;
	width: 70%;
	aspect-ratio : 1 / 1;
	border: 3px solid var(--trim-color);
	background-color: #e8e8e8;
	box-sizing: border-box;
	border-radius: 10px;
	overflow: hidden;
}

.fullscreen {
	position: absolute;
	z-index: 1;
	display: none;
	top: 5px;
	right: 5px;
	width: 50px;
	height: 50px;
	background-color: grey;
	opacity: .5;
	border-radius: 5px;
	cursor: pointer;
}

.item-preview:hover .fullscreen {
	display: inline-block;
}

.item-container {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
}

.item-preview-full {
	left: 0%;
	top: 0%;
	z-index: 999;
	position: fixed;
	width: 100%;
	height: 100%;
	border-radius: 0px;
}

.desc-display {
	margin: auto;
	margin-top: 10px;
	min-height: 30px;
	line-height: 30px;
	width: 80%;
	font-size: 20px;
	border: 0px;
	outline: none;
	border: 3px solid var(--trim-color);
	border-radius: 10px;
	background-color: #e8e8e8;
	box-sizing: border-box;
	text-align: center;
	font-weight: bold;
}

.overview-display {
	margin: auto;
	margin-top: 10px;
	padding: 10px;
	min-height: 30px;
	line-height: 18px;
	width: 80%;
	font-size: 14px;
	border: 0px;
	outline: none;
	border: 3px solid var(--trim-color);
	border-radius: 10px;
	background-color: #e8e8e8;
	box-sizing: border-box;
	text-align: left;
	font-weight: bold;
}

.bom-table {
	border-spacing: 0px;
	min-width: 100%;
	border: 2px solid black;
	border-top: 0px;
	border-collapse: collapse;
}

.bom-table th {
	border: 1px solid black;
	background-color: var(--darkened-primary-color);
	color: var(--active-text-color);
	padding-left: 5px;
	padding-right: 5px;
}

.bom-table td {
	box-sizing: border-box;
	border-left: 1px solid black;
	border-right: 1px solid black;
	margin: 0px;
}

/* Even rows for the bom table */
.bom-table tr:nth-child(even) {
  background-color: #ffffff;
}

/* Odd rows for the bom table */
.bom-table tr:nth-child(odd) {
  background-color: #f2f2f2;
}