/*!
 * Hexgrid Generator
 * 
 * author: sizeof(cat) <sizeofcat AT riseup DOT net> http://sizeof.cat
 * url: http://sizeof.cat/project/hexgrid-generator/
 * copyright: 2016-2025
 * license: GPLv3
 * 
 *           o8o                                  .o88o.   .o                         .   o.   
 *           `"'                                  888 `"  .8'                       .o8   `8.  
 *  .oooo.o oooo    oooooooo  .ooooo.   .ooooo.  o888oo  .8'   .ooooo.   .oooo.   .o888oo  `8. 
 * d88(  "8 `888   d'""7d8P  d88' `88b d88' `88b  888    88   d88' `"Y8 `P  )88b    888     88 
 * `"Y88b.   888     .d8P'   888ooo888 888   888  888    88   888        .oP"888    888     88 
 * o.  )88b  888   .d8P'  .P 888    .o 888   888  888    `8.  888   .o8 d8(  888    888 .  .8' 
 * 8""888P' o888o d8888888P  `Y8bod8P' `Y8bod8P' o888o    `8. `Y8bod8P' `Y888""8o   "888" .8'  
 *                                                         `"                             "'   
 */
.grid {
	line-height: 1.3;
}

.grid ol {
	padding: 0;
	margin: 0 0 0 20px;
}

.grid ol.even {
	position: relative;
}

.grid ol.odd {
	position: relative;
	margin-top: -5%;
	margin-bottom: -5%;
}

.grid .cell {
	position: relative;
	margin: 1em auto;
	background: transparent;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	transform: rotate(-90deg);
	display: inline-block;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}

.grid .cell:before,
.grid .cell:after {
	position: absolute;
	width: inherit;
	height: inherit;
	background: inherit;
	content: '';
}

.grid .cell:before {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}

.grid .cell:after {
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	transform: rotate(-60deg);
}

.grid .cell.empty {
	background-color: #ddd;
}

.grid .cell:hover {
	background-color: #ff0000;
}

textarea {
	width: 100%;
	padding: 20px;
	height: 300px;
	border: 1px dashed #aaa;
	font-family: "Fira Code", monospace;
	font-size: 12px;
}

fieldset {
	border: 1px solid #aaa;
}

fieldset legend {
	padding: 0 10px;
}

dl dt {
    float: left;
    font-weight: normal;
    margin-right: 10px; 
    padding: 5px;
    width: 170px;
}

dl dd {
    margin: 2px 0; 
    padding: 5px 0;
}

.column {
	float: left;
	width: 49%;
}

.svg-cell:focus {
    outline: none;
}