body {
	margin: 0;
	padding: 0;
	background: #f9f9ea url(assets/knit_svg_pattern.svg);
	/*background-image: url(assets/yarn-needle-c0ad85.svg);*/
	/*background-size: 5%;
	background-repeat: repeat; */
	font-family: Merriweather, Georgia, serif;
	display: flex;
	flex-direction: row;
	height: 100vh;

	font-size: 13pt;

	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

section hr {
	border: 1px solid #ded1b6;
	width: 100%;
	margin-top: 2em;
}

section {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	background-color: #f9f9ea;
	border-radius: 10px;
	box-shadow: rgb(24 26 27 / 20%) 0px 0px 6px 2px;

	width: 600px;
	padding: 2em 3em;
	margin: auto;
}

form {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	margin-bottom: 1em;
}

form .form-col {
	display: flex;
	flex-direction: column;
	margin-left: 1em;
}

form .form-row :first-child {
	margin-left: 0;
}

form .form-row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 1em 0;
}

.cb-container input[type=checkbox] {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;

	padding: 0;
	margin: 0;
	/*-ms-transform: scale(2);*/
	/* IE */
	/*-moz-transform: scale(2);*/
	/* FF */
	/*-webkit-transform: scale(2);*/
	/* Safari and Chrome */
	/*-o-transform: scale(2);*/
	/* Opera */
	/*transform: scale(2);*/
}

.cb-container {
	margin: 0;
	margin-left: 1em;
	position: relative;
	cursor: pointer;
	font-size: 16pt;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	display: flex;
	flex-direction: row;
	align-items: center;
}

.cb-container p {
	margin: 0;
	padding: 0;
	margin-bottom: 0.15em;
}

.checkmark {
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #f9f9ea;
	border-radius: 6px;
	border: 2px solid #ded1b6;
	transition: 200ms;
	margin-right: 25px;
}

.cb-container:hover input + .checkmark {
  background-color: #ded1b6;
  transition: 200ms;
}

.cb-container input:checked + .checkmark {
  background-color: #ded1b6 !important;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.cb-container input:checked + .checkmark:after {
  display: block;
  position: relative;
}

.cb-container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.checkmark:focus{
	background-color: transparent;
}

form input[type=number] {
	background-color: #ffffff00;
	height: 2em;
	border: 2px solid #ded1b6;
    border-radius: 6px;
	color: #c0ad85;
	outline: none;
	font-size: 15pt;
	padding-left: 1em;
	width: 10em;

	appearance: textfield;
	-moz-appearance: textfield;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.txt-label {
	margin-bottom: 10px;
	font-size: 16pt;
	padding-left: 5px;
}

img.center-image {
	width: 12%;
	margin: 0 auto;
	margin-top: 0.5em;
	margin-bottom: 2.5em;
}

::placeholder {
  color: #c0ad85;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: #c0ad85;
}

#pattern_display {
	display: flex;
	justify-content: center;
	align-items: center;
	color: black;
	font-size: 20pt;
}

.pattern-list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
}

.pattern-list li{
	margin: 10px 0;
}

.pattern-list li:first-child{
	margin-top: 0;
}


.pattern-list li:last-child{
	margin-bottom: 0;
}

.pat-list-cb + label{
	margin-left: .5em;
}

.strikeable:has(input[type=checkbox]:checked){
  text-decoration: line-through;
  color: gray; 
}

.error{
	display: flex;
	justify-content: center;
	align-items: center;
	color: #c0ad85;
}
.error img{
	height: 40px;
	margin: auto 10px;
	/*SVG color #c0ad85, converted to filter with https://isotropic.co/tool/hex-color-to-css-filter/*/
	filter: invert(81%) sepia(11%) saturate(825%) hue-rotate(3deg) brightness(86%) contrast(87%); 
} 

.video-overlay{
	position:absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.video-overlay video{
	position: absolute;
	width: 100%;
	min-height: 70%;
	bottom: 0;
	left: 0;
	mix-blend-mode: multiply;
	object-fit: cover;
}