/* 
** Style specific to the square panels 
** Author: Douwe van Willigen 
*/

#patternscontainer{
	margin-right: 400px;
}
#patterns{		
	padding-left: 300px;
}

#patterns img{
	width: 70px;  
	margin-left:0px;
}
#patterns svg{
	width: 70px; 
	margin-left: 0px; 
	margin-right: 5px;
}

::-moz-selection { /* Code for Firefox */
  color: #0f0;
  background: #060;
}

::selection {
  color: #0f0;
  background: #060;
}

#divider {
  border: 3px solid transparent;
  width: 50px;
  height: 15px;
  float:left;
  padding-bottom: 5px;
}

.newline{
	clear: both;
}
.joined{
	opacity: 0;
	visibility: hidden;
}
.combined{
	/*background-color: #600 !important;*/
	background-size: auto auto !important; /*prevent hairlines! */ 
	-webkit-backface-visibility: hidden; /* hide hairlines in chrome */ 
	backface-visibility: hidden;
}

#subcell{
	margin: -1px;
	border-color: #f3e4bd;
	border-style: solid; 
}

#cell, #cell2x2, #cell3x3, #cell4x4, #subcell{
	float: left;
	background-clip: content-box;
	margin: -1px;
	background-size: 100%;
	background-position: center;
}

#clip{
	background-clip: content-box; 
}

#clipbg{
	background-color: #0f0;
	background-clip: padding-box;
}

#cell img, #cell2x2 img, #cell3x3 img, #cell4x4 img, #subcell{
	width: 100%;
	height: 100%;
	float: left;
}

img.nh{
	opacity: 0;
	pointer-events: hover;
}


.fh, .fv, .ff{
	font-size: 30px; 
	color: white;
	text-align: center;
	line-height: 30px;
}

.fv{
    margin-bottom: 1px !important;
	text-align: center;
}

#panel input, #panel input:active{
	padding: 0px;
	background-color: #000;
	color: white;
	border: 0px;
	font-size: 25px; 
	text-align: right;
	/*width: 70px;*/
	float: right;	
	outline: none;
	font-weight: bold;
}
.fv input{
	text-align: center;
}
.fh input{
	margin-right: 10px; 
}

#clip input, #clip input:active{
	height: 100%;
	min-width: 30px;
	position: relative;
	line-height: 30px;
}

.sqi{
	text-align: center !important;
}

.half, .double{
	background-color: #999;	
	font-size: 30; 
	font-weight: bold;  
	width: 50px; 
	height: 50px; 
	border-radius: 25px; 
	text-align: center; 
	line-height: 50px;
	cursor: pointer;
	float: left;
	margin: 5px;
}

.half:hover, .double:hover{
	background-color: #ccc;
}

.ff{width: 70px; height: 30px; clear: both; border-color: #000 !important;}
.fh{width: 70px; clear:both; border-color: #000 !important;}
.fv{height: 30px; border-color: #000  !important;}

.ehl{width: 26px; border-left:0px !important; background-color: #000;}
.ehr{width: 26px; border-right:0px !important; background-color: #000;}
.c1h{width: 142px;}
.c2h{width: 142px;}
.c3h{width: 142px;}
.c4h{width: 142px;}
.c5h{width: 142px;}
.c6h{width: 142px;}

.evt{height: 26px; border-top:0px !important; background-color: #000;}
.evb{height: 26px; border-bottom:0px !important; background-color: #000;}
.c1v{height: 142px;}
.c2v{height: 142px;}
.c3v{height: 142px;}
.c4v{height: 142px;}
.c5v{height: 142px;}
.c6v{height: 142px;}

#pbutton{
	background-color: #666;
	cursor: pointer;	
	margin-bottom: 5px;
	margin-right: 5px;
}
#pbutton:hover{
	background-color: #999;
}

.navbutton{	
	width: 80px;
	height: 35px;
	line-height: 35px;
	text-align: center;	
	float: left;
}

#descr{	
	float: left;
	width: 300px;
}

.sizebutton{
	width: 25px;
	height: 25px;
	font-size: 18px;
	line-height: 25px;
	text-align: center;	
	float: left;
	font-weight: bold;
}

.sizename{
	width: 70px; 
	float: left; 
	height: 25px;
	font-size: 16px;
	line-height: 25px;
	padding: 0px;
	padding-left: 5px;
	margin-right: 5px; 
}

#rbuttons{
	float: right; 
	height: 60px;
	width: 85px;
}

.inputcen{
	text-align: center !important;
	float: left !important;
	margin-right: 5px; 
}

/* Styles for the setup page */
#settings, #settings2{
	position: absolute;
	background-color: #333;
	left: 140px;
	right: 280px;
	padding: 10px;
	bottom: 0px;
	height: 80px;
	color: #f3e4bd;
	border-left: 5px solid black; 
	user-select: none;  /*standard?*/
}

#settings p, #settings2 p{
	line-height: 25px;
	margin: 0px;
	float: left;
	clear: both;
	margin-bottom: 5px;
}

#settings2{
	display: none;
}

#settings input{
	height: 25px;
	background-color: #666;
	float: left;
	font-size: 16px;
	float: right;
	text-align: right;
	width: 41px;
	padding: 0px;
	border: 0px;
	color: #ffffff;
	outline: none;
}

#settings p{
	margin-right: 10px;
}

.disabled{
	color: #999;
}
.disabled:hover{
	background-color: #666;
}

#settings input:read-only {
	color: #999;
	user-select: none;
}

#setcol{
	float: left;
	margin-right: 25px;
}

.unit{
	width: 35px;
	height: 25px;
	background-color: #666;
	float: left;
	font-size: 16px;
	line-height: 25px;
	padding: 0px;
	padding-left: 5px;
	color: #fff;
	float: right;
}

.toggleCheckboxFT {
   display: none;
 }
 
.toggleContainerFT {
	float: right;
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: fit-content;
	border: 0px solid #F0E6C8;
	background: #666;
	font-weight: bold;
	cursor: pointer;
	line-height: 20px;
	padding: 1px;
	margin-left: 10px;
}

.toggleContainerFT::before {
	content: '';
	position: absolute;
	width: 50%;
	height: 100%;
	left: 0%;
	background: #F0E6C8;
	border-radius: 15px;
	transition: all 0.3s;
}

.toggleContainerFT div {
	padding: 2px 6px 1px 6px;
	text-align: center;
	z-index: 1;
}

.toggleCheckboxFT:checked + .toggleContainerFT::before {
	left: 50%;
}

.toggleCheckboxFT:checked + .toggleContainerFT div:first-child{
	color:  #fff;
	transition: color 0.3s;
}	
.toggleCheckboxFT:checked + .toggleContainerFT div:last-child{
	color: #F0E6C8;
	transition: color 0.3s;
}
.toggleCheckboxFT + .toggleContainerFT div:first-child{
	color: #F0E6C8;
	transition: color 0.3s;
}
.toggleCheckboxFT + .toggleContainerFT div:last-child{
   color: #fff;
   transition: color 0.3s;
}

#infopane{
	border: 2px solid #666;
	float: left;
	width: 435px;
	height: 65px;
	padding: 5px;
}

@media only screen and (max-device-width: 800px) { /* larger buttons for mobile touch devices */
	#patterns{
		height: 90px;
		padding-left: 20px;
	}	
	#patterns img, #patterns svg{
		height: 90px;
		width: 90px; 
	}	
	#patterns img{
		margin-right: -30px; 
	}
}