/* big sections */
body *{
	font-family: serif;
}

.fabricSide {
	height: calc(100vh - 150px); 
	overflow-y: auto;
}

.fabricZone, .quiltPatternOptions, .theStuff  {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
	align-items: center;
}

.expandedFabricZone {
	border: 1px solid black;
	margin: 5px;
}

.expandedFabricZone h3 {
	margin: 5px;
}

.expandedFabricZone h3 button {
	position: revert;
    padding-right: 17px;
    margin: 5px;
}

.recentFabricsZone {
	display: flex; 
	flex-wrap: wrap; 
}

.differentSection {
	margin: 5px;
	padding: 5px;
	border: 2px solid black;
}

.theResult{
	width: 60%;
	align-self: flex-start;
}

.toolbox {
	width: 40%;
}

.buttonZone {
	text-align:center;
	padding: 5px;
}

.mockupZone {
	text-align:center;
}

.explanationZone {
	text-align:center;
}

.flexie {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: center;
}

.fabricRequirements img{
	width: 30%;
	cursor: zoom-in;
}

#fabricRequirementsOverlay {
	position: fixed; /* Sit on top of the page content */
	display: none; /* Hidden by default */
	width: 100%; /* Full width (cover the whole page) */
	height: 100%; /* Full height (cover the whole page) */
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
	z-index: 6;  /* Specify a stack order in case you're using a different order for other elements */
	cursor: pointer; /* Add a pointer on hover */
	
	justify-content: center;
	align-items: center;
}

#fabricRequirementsOverlay img {
	height: 99%;
	width: auto;
	display: block;
	cursor: pointer;
}


/* inputs */

input {
	font-size: 1em;
	padding: 2px 2px;
	outline: none;
	background: #FFFFFF;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 5px;
}

input.searchBar {
	padding-right: 10px;
}

input:focus {
	background: #FFFFFF;
	border: 2px solid #000000;
	border-radius: 5px;
}

.svg_icon {
	position: absolute;
	right: 10px;
	fill: #000000;
	width: 1.5em;
	height: 1.5em;
}

.custom-select {
	position: relative;
}

select {
	font-size: 1em;
	background-color: #FFFFFF;
	border: 1px solid #000000;
	border-radius: 5px;
	color: #000000;
	cursor: pointer;
	outline: none;
}

select:focus {
	background: #FFFFFF;
	border: 2px solid #000000;
	border-radius: 5px;
}

input[type="checkbox"] {
	width: 1em;
	height: 1em;
}

.advancedOptionsSelector label {
	font-size: 1.25em;
	font-weight: bold;
}

.FabricCountArea {
	display: none;
}

.showCounts .FabricCountArea {
	display: block;
}

.explanationZone input, .explanationZone select {
	margin: 3px;
}

/* Yardage Calculator stuff */
.yardageContainer {
	display: flex; 
	flex-wrap: wrap; 
}

/* Block Builder Specific */
.blockBuilder .fabricSide {
	height: calc(100vh - 300px); 
	overflow-y: auto;
}

.blockZone {
	display: flex; 
	flex-wrap: wrap; 
	justify-content: space-between;
	padding: 0 10;
	align-items: center;
}

.blockInfo {
	width: 50%;
}

.blockInfo {
	width: 50%;
}

.blockBuilder .fabricCollections {
	align-self: flex-start;
	height: calc(100vh - 300px);
}

.blockBuilder .withFabricCollections .fabricSide {
	max-height: none; 
	overflow-y: auto;
	height: calc(100vh - 300px);
	align-self: flex-start;
}

.withFabricCollections .blockInfo {
	width: 100%;
}

#blockMockupContainer {
	background-image: url("SeeThru.png");
	background-repeat: repeat;
}


/* Specific Elements */
canvas {
	border:1px solid #d3d3d3;
}

h1, p {
	text-align:center;
}

button {
	padding: 10px;
	font-size: 1.5em;
}

.littleButton {
	padding: 2px;
	font-size: 1em;
	z-index: 5;
}

h2 {
	font-size: 25px;
	height: 29px;
	line-height: 29px;
}



/* Fabric Selectors */
.selected {
	outline: 2px solid red !important;
}

.FabricSelector input[type="text"], .FabricSelector input[type="number"] {
	width: 100px;
}

.FabricSelector, .quiltPatternSelector {
	padding: 5px;
	text-align: center;
	border: 1px solid transparent;
}

.FabricSelector .preview {
	width: 100px;
	outline: solid 1px grey;
	margin: 3px;
}

.FabricSelector .addButton {
	width: 100px;
	outline: none;
	cursor: pointer;
}

.FabricSelector {
	position: relative;
}

.littlex {
	width: 20px;
    left: 95px;
    position: absolute;
    top: 30px;
}

.withTitle .littlex {
	top: 60px;
}

.littlex, .littlex * {
	cursor: pointer !important;
}

.rotation {
    left: 0px;
    position: absolute;
    top: 110px;
}

.withTitle .rotation {
	left: 0px;
    position: absolute;
    top: 150px;
}

.advancedOption {
	display: none;
}

.showAdvancedOptions .advancedOption {
	display: block;
}

.notEditable input, .notEditable label, .notEditable br {
	display: none;
}

.labelDisplay {
	display: none;
}

.sidePanelFabricArea .labelDisplay {
	display: block;
}

#recentFabricArea .labelDisplay {
	display: none;
}

.sidePanelFabricArea .littlex {
	display: none;
}

#recentFabricArea .littlex {
	display: block;
}

.colorCode {
	width: 100px;
	height: 100px;
	margin: auto;
	cursor: grab;
}

/* fabric collections */
.fabricCollections {
	box-sizing: border-box;
	height: calc(100vh - 150px); 
	overflow-y: auto;
	width: 140px;
	
	/*
	display: flex; 
	flex-wrap: wrap; 
	*/
	
	border: 1px solid black;
	
}


.withFabricCollections .fabricSide {
	width: calc(100% - 140px);
}

.withFabricCollections {
	display: flex; 
	flex-wrap: wrap;
	align-items: center;
	align-self: flex-start;
}

.withFabricCollections .buttonZone {
	width: 100%;
}






/* Coming Soon */
.comingSoonOverlay {
	width: 195px;
	height: 240px;
	
	position: absolute;
    top: 0;
    left: 0px;
	
	background-color: rgba(0,0,0,0.5);
	z-index: 100;
}

.comingSoon {
    width: 175px;
    position: relative;
}

.comingSoon img {
    width: 100%;
}

.comingSoon h3 {
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    bottom: 0;
	z-index: 105;
}


/* index page */
.quiltPatternOptions a {
	text-decoration: none;
	color: black;
}

.quiltPatternOptions h2, .quiltPatternOptions p {
	margin: 0px;
}

.quiltPatternOptions img {
	margin: 5px;
}

.quiltPatternSelector img {
	height: 175px;
}

.imgBackground {
	height: 185px;
	width: 185px;
	background-color: white;
	text-align: center;
	margin: auto;
}

.sizeList {
	width: 180px;
	padding: 3px;
	border: solid black 1px;
	box-sizing: border-box;
	margin: auto;
}

.quiltPatternsAndFilter {
	display: flex;
}

.filterArea {
	width: 15%;
}

.patternResultsArea {
	width: 85%;
}

#filterButton {
	display:none;
}

#filterXButton {
	display:none;
}

.filterArea input {
	margin: 5px;
}

#MinPre, #MaxPre {
	width: 70px;
}


/* Header */
.header {
	background-color: #323842;
	padding: 7px;
	display: flex; 
	flex-wrap: wrap; 
	justify-content: left;
	color: white;
}

.header a {
	color: white;
}

.headerItem, .menuHamburger {
	padding: 10px 20px;
	font-size: 1.5em;
}

.rightSideHeaderItem {
	margin: auto;
	margin-right: 0px;
}

.menuHamburger {
	display: none;
}

.offMobile {
	display: block;
}

.menuHamburger, .menuHamburger * {
	cursor: pointer;
}

.headerItem:hover, .menuHamburger:hover {
	background-color: #ddd;
	color: black;
}







/* FAQ and Tips page */
.faq {
	margin: 20px;
	margin-bottom: 70px;
}

.question {
	padding: 5px;
}

.q {
	font-weight: bold;
	font-size: 1.5em;
	padding: 5px;
}

.tip em{
	font-size: 1.25em;
	font-weight: bold;
	padding: 3px;
}

.tip {
	border: solid grey 1px;
	margin: 5px;
	padding: 2px;
}

.a {
	margin-left: 20px;
}


/* On-Page Instructions */
.tutorial {
	box-sizing: border-box;
	background-color: #C3C3C3; 
	padding: 7px 15px;
	font-weight:bold; 
	font-size: 1.25em;
	width: 100%;
}

.tutorial a {
	cursor: pointer;
}

.instructions {
	background-color: #C3C3C3; 
	padding: 7px;
	box-sizing: content-box;
	cursor: pointer;
	width: 100%;
	height: 1.5em;
}

details {
	 direction: rtl; 
	 text-align: left;
}

details div {
	 padding: 5px; 
	 direction: ltr;
}

summary {
	 list-style-image: url('Toggle.png'); 
	 font-weight:bold; 
	 font-size: 1.25em;
}

.tooltip {
	background-color: blue;
	color: white;
}


/* Version Changer */
.versionSelector {
	font-size: 1.25em;
	font-weight: bold;
}

.notUSed {
	display: none;
}

.used {
	display: block;
}


/* Drag and Drop */
.dragQueen img, .repositionable {
	cursor: grab;
}

.dragging {
	cursor: grabbing;
}

.hint {
  border: 1px solid rgb(195, 195, 195);
}

.active {
  border: 1px solid #000000;
}

.active * {
	pointer-events: none;
}


/* Not sure where this goes */
.changeInputs {
	padding: 3px;
	font-size: 1em;
}

.changeStuffButtonZone {
	border: solid black 1px;
	padding: 5px;
	text-align:center;
	margin-top: 10px;
}

.changeStuffButtonZone h2, .FabricSelector h2 {
	margin: 5px;
	white-space:nowrap;
}


/* Ko-Fi styles*/

img.kofiimg{
	display: initial!important;
	vertical-align:middle;
	height:20px;
	width:29px;
	padding-top:0!important;
	padding-bottom:0!important;
	border:none;margin-top:0;
	margin-right:5px!important;
	margin-left:0!important;
	margin-bottom:3px!important;
	content:url('https://storage.ko-fi.com/cdn/cup-border.png')
}

.kofiimg:after{
	vertical-align:middle;
	height:25px;
	padding-top:0;
	padding-bottom:0;
	border:none;
	margin-top:0;
	margin-right:6px;
	margin-left:0;
	margin-bottom:4px!important;
	content:url('https://storage.ko-fi.com/cdn/whitelogo.svg')
}

.btn-container{
	display:inline-block!important;
	white-space:nowrap;
	min-width:160px
}

span.kofitext{
	color:#fff !important;
	letter-spacing: -0.15px!important;
	text-wrap:none;
	vertical-align:middle;
	line-height:33px !important;
	padding:0;
	text-align:center;
	text-decoration:none!important; 
	text-shadow: 0 1px 1px rgba(34, 34, 34, 0.05);
}

.kofitext a{
	color:#fff !important;
	text-decoration:none:important;
}

.kofitext a:hover{
	color:#fff !important;
	text-decoration:none
}

a.kofi-button{
	box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
	line-height:36px!important;
	min-width:150px;
	display:inline-block!important;
	background-color:#29abe0;
	padding:2px 12px !important;
	text-align:center !important;
	border-radius:7px;color:#fff;
	cursor:pointer;
	overflow-wrap:break-word;
	vertical-align:middle;
	border:0 none #fff !important;
	font-family:'Quicksand',Helvetica,Century Gothic,sans-serif !important;
	text-decoration:none;
	text-shadow:none;
	font-weight:700!important;
	font-size:20px;
}

a.kofi-button:visited{
	color:#fff !important;
	text-decoration:none !important
}

a.kofi-button:hover{
	opacity:.85;
	color:#f5f5f5 !important;
	text-decoration:none !important
}

a.kofi-button:active{
	color:#f5f5f5 !important;
	text-decoration:none !important
}

.kofitext img.kofiimg {
	height:20px;
	width:29px;
	display: initial;
	animation: kofi-wiggle 3s infinite;
}

@keyframes kofi-wiggle{
	0%{transform:rotate(0) scale(1)}
	60%{transform:rotate(0) scale(1)}
	75%{transform:rotate(0) scale(1.12)}
	80%{transform:rotate(0) scale(1.1)}
	84%{transform:rotate(-10deg) scale(1.1)}
	88%{transform:rotate(10deg) scale(1.1)}
	92%{transform:rotate(-10deg) scale(1.1)}
	96%{transform:rotate(10deg) scale(1.1)}
	100%{transform:rotate(0) scale(1)}
}



/* Mobile */
@media (orientation: portrait) {

	
	.theResult{
		width: 100%;
	}

	.toolbox {
		width: 100%;
	}
	
	.halfFlexItem {
		width: 100%;
	}
	
	.menuHamburger {
		display: block;
	}
	
	.offMobile {
		display: none;
	}

	.headerItem {
		width: 100%;
		display: none;
	}

	.menuOn .headerItem {
		display: block;
	}
	
	.fabricCollections {
		width: 140px;
		height: 300px;
	}
	
	.withFabricCollections .fabricSide {
		width: 100% - 140px;
		height: 300px;
	}
}

@media (max-aspect-ratio: 4/3) {

	
	.theResult{
		width: 100%;
	}

	.toolbox {
		width: 100%;
	}
	
	.halfFlexItem {
		width: 100%;
	}
	
	.menuHamburger {
		display: block;
	}
	
	.offMobile {
		display: none;
	}

	.headerItem {
		width: 100%;
		display: none;
	}

	.menuOn .headerItem {
		display: block;
	}
	
	.fabricCollections {
		width: 140px;
		height: 300px;
	}
	
	.withFabricCollections .fabricSide {
		width: 100% - 140px;
		height: 300px;
	}
}




@media (orientation: portrait) and (max-width: 1000px) {
	#homePageSearch .Inputwrapper, #homePageSearch select {
		margin: 5px 0px;
	}
	
	#filterButton {
		display:inline;
	}
	
	#filterXButton {
		display:block;
	}
	
	#MinPre, #MaxPre {
		width: 100%;
	}
	
	.mobileShow{
		width: 100%;
		display: block;
	}
	
	.mobileHide{
		display:none;
	}
	
	.FabricSelector {
		width: 200px;
		margin: 0px 5px;
	}
	
	.fabricCollections .FabricSelector {
		width: 150px;
		margin: 0px;
	}
	
	.FabricSelector input[type=text], .FabricSelector input[type=number], select, .Inputwrapper, input[type=text], input[type=number] {
		width: 100%;
	}	
	
	.FabricSelector input[type=text], .FabricSelector input[type=number], input, select, .precutSearchButton, label {
		font-size: 30px;
	}
	
	input[type="checkbox"] {
		width: 30px;
		height: 30px;
	}
	
	.versionSelector, #precutOptions {
		text-align: left;
	}
	
	.FabricSelector .preview, .FabricSelector .addButton {
		width: 100%;
	}
	
	.littleButton {
		width: 50px;
		height: 50px;
		background: none;
		border: none;
	}
	
	.littleSearch {
		font-size: 30px !important;
		width: auto;
		height: auto;
		padding: 5px;
	}
	
	.littlex {
		left: 180px;
		top: 35px;
	}
	
	.fabricCollections .littlex {
		left: 125px;
		top: 0px;
	}
	
	.rotation {
		top: 195px;
	}
	
	.withTitle .rotation {
		top: 230px;
	}
	
	.fabricCollections {
		width: 200px;
		height: 600px;
	}
	
	.toolbox label, .advancedOptionsSelector label {
		font-size: 25px;
	}
	
	.withFabricCollections .fabricSide {
		width: calc(100% - 200px);
		height: 600px;
	}
	
	.Inputwrapper input {
		width: calc(100% - 60px);
	}
	
	.Inputwrapper {
		 padding:5px 0px;
		 margin-right:5px;
	}
	
	button {
		height: 75px;
		padding: 0px;
		padding: 5px;
	}
	
	.littleButton {
		padding: 0px;
	}
	
	.littleButton, button {
		font-size: 45px;
		padding: 0px;
		color: black;
		text-align: center;
	}
	
	.versionSelector label, .versionSelector input {
		margin-top: 20px;
	}
	
	.versionSelectorSection {
		width: 100% !important;
	}
	
	.quiltPatternSelector img {
		height: 300px;
	}

	.imgBackground {
		height: 300px;
		width: 300px;
	}
	
	.sizeList {
		width: 295px;
	}
	
	.headerItem{
		font-size: 2.5em;
	}
	
	.menuHamburger  {
		font-size: 3.5em;
	}
	
	.menuHamburger {
		padding: 0px 10px;
	}
	
	.offMobile {
		display: none;
	}
	
	h1 {
		font-size: 3em;
	}
	
	h2 {
		font-size: 35px;
	}
	
	strong {
		font-size: 25px;
	}
	
	p {
		font-size: 1.5em;
	}
	
	a.kofi-button {
		font-size: 30px;
	}
	
	.kofitext img.kofiimg, img.kofiimg {
		height:29px;
		width:43px;
	}
	
	.fabricRequirements img{
		width: 100%;
	}
}

/* desktop but in portrait mode 
@media (orientation: portrait) and (max-width: 900px) {
	input[type=text], input[type=number], select, .Inputwrapper {
		width: 100%;
	}
	
	.FabricSelector {
		width: auto;
		margin: 2px;
	}
	
	.FabricSelector .preview, .FabricSelector .addButton {
		width: 100px;
	}
	
	.deletable .littlex {
		width: 20px;
		left: 95px;
		top: 40px;
	}
	
	.fabricCollections {
		width: 140px;
		height: 300px;
	}
	
	.withFabricCollections .fabricSide {
		width: 100% - 140px;
		height: 300px;
	}
	
	.toolbox label, .advancedOptionsSelector label {
		font-size: 1em;
	}
	
	
	
	button {
		height: auto;
		width: auto;
	}
	
	.littleButton, button {
		font-size: 1.5em;
	}
	
	.versionSelector label, .versionSelector input {
		margin-top: 20px;
	}
	
	.quiltPatternSelector img {
		height: 200px;
	}

	.imgBackground {
		height: 200px;
		width: 200px;
	}
	
	.headerItem {
		
		font-size: 1.5em;
	}
	
	.menuHamburger  {
		font-size: 2.5em;
	}
	
	.menuHamburger {
		padding: 0px 10px;
	}
	
	h1 {
		font-size: 2em;
	}

	
	strong {
		font-size: 1em;
	}
	
	p {
		font-size: 1em;
	}
	
}
*/