/*
* Layout styles
*/

html,
body,
.mainbar {
	height: 100%;
}

:root {
	--bs-link-color: #436086;
	--bs-link-hover-color: #5c7b9e;
	--bs-secondary-color: #dddddd;
}

/*
 * Glyph styles (Boxicon)
 */
.bx {
	font-size: 1.25rem;
	transform: translateY(2px);
}

.mainbar {
  display: grid; 
  grid-template-columns: 75px auto 300px; 
  grid-template-rows: 75px auto 75px;
  gap: 0px 0px; 
  grid-template-areas: 
    "header header header"
    "toolbar main editorbar"
    "footer footer footer"; 
}
.header { grid-area: header; }
.footer { grid-area: footer; }
.main { grid-area: main; }
.toolbar { grid-area: toolbar; }
.editorbar { grid-area: editorbar; }

/*
 * Layout styles
 */
.branding {
	text-align: center;
}
.branding a {
	display: block;
	line-height: 75px;
}
.branding a,
.branding a:visited {
	color: #436086;
}
.branding a:hover,
.branding a:active,
.branding a:focus {
	color: #212529;
}
.branding a i {
	display: inline-block;
	font-size: 2rem;
	line-height: 1;
}
.header {
	border-bottom: 1px solid #eee;
	display: flex;
}
.header .branding {
	width: 75px;
	border-right: 1px solid #eee;
}
.header .header-inner {
	padding-right: 15px;
	padding-left: 15px;
	flex-grow: 1;
	
	display: flex;

	justify-content: start;
	align-items: center;
}
.header .header-inner > .headline {
	text-transform: uppercase;
}
.header .header-inner:after {
	content: '';
	display: block;
	width: 300px;
	height: 74px;
	float: right;
}
.toolbar { 
	margin-bottom: 0; /* Bootstrap fix */
	border-right: 1px solid #eee;
}
.main {
	padding: 30px;
	background-color: #f7f7f7;
	overflow: hidden;
}
.editorbar {
	padding: 10px 0 30px 0;
	border-left: 1px solid #eee;
	
	display: flex;
	flex-direction: column;
}
.editorbar .column-fill {
	flex-grow: 1;
}
.footer {
	padding-right: 30px;
	padding-left: 30px;
	line-height: 74px;
	text-align: center;
	border-top: 1px solid #eee;
}

.input-value {
	top: 4px;
	right: 4px;
	position: absolute;
	z-index: 101;
}

/* --- */
.canvas-container {
	display: block;
	margin: 0 auto;
}
.my-canvas {
	border: 1px solid #eee;
}
.canvas-container {
	display: block;
}

/*
 * Tools style
 */
ul.tools {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.tools > li {
	margin: 0;
	padding: 0;
	height: 75px;
	line-height: 75px;
	text-align: center;
	border-bottom: 1px solid #eee;
}
ul.tools .dropdown-toggle {
	display: block;
	cursor: pointer;
}
ul.tools .dropdown-toggle.show {
	background-color: #f9f9f9;
}
ul.tools .dropdown-toggle:after {
	display: none;
}

ul.tools li a {
	display: block;
}
ul.tools li a,
ul.tools li a:visited {
	color: #212529;
}
ul.tools li a:hover,
ul.tools li a:active,
ul.tools li a:focus {
	color: #436086;
}
ul.tools li i {
	font-size: 1.5rem;
}
ul.tools > li > .dropdown-menu {
	width: 240px;
	margin-left: 6px !important;
	margin-top: 6px !important;
	padding: 15px;
	border-radius: 0;
	border-color: #eee;
}
ul.tools > li > .dropdown-menu:after, 
ul.tools > li > .dropdown-menu:before {
	right: 100%;
	top: 32px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
ul.tools > li > .dropdown-menu:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 5px;
	margin-top: -5px;
}
ul.tools > li > .dropdown-menu:before {
	border-color: rgba(238, 238, 238, 0);
	border-right-color: #eee;
	border-width: 6px;
	margin-top: -6px;
}



/*
 * Font list styles
 */
#fontList {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
	border: 1px solid #eee;
	max-height: 240px;
	overflow-y: auto;
	scrollbar-width: thin;
}
#fontList li {
	margin: 2px;
	padding: 3px 8px;
	cursor: pointer;
	background-color: #f9f9f9;
}
#fontList li.active {
	background-color: #f1f1f1;
}

#layerList .handle {
	cursor: move;
}

/* Color list */
ul.color-list {
	padding: 0;
	margin: 15px 0 0 0;
	list-style: none;
	
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
ul.color-list li {
	flex: 0 1 24px;
	aspect-ratio: 1 / 1;
	
	background-color: #f7f7f7;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	cursor: pointer;
}
/* Custom Range Slider */
input[type="range"] {
	appearance: none;
	background-color: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
	position: relative;
	height: 5px;
	background-color: #ddd;
	border-radius: 5px;
}
input[type="range"]::-moz-range-track {
	position: relative;
	height: 5px;
	background-color: #ddd;
	border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
	box-sizing: border-box;
	appearance: none;
	background-color: #425f85;
	border: 2px solid #fff;
	border-radius: 8px;
	width: 16px;
	height: 16px;
	top: 50%;
	translate: 0 -50%;
}
input[type="range"]::-moz-range-thumb {
	box-sizing: border-box;
	appearance: none;
	background-color: #425f85;
	border: 2px solid #fff;
	border-radius: 8px;
	width: 16px;
	height: 16px;
}
input[type="range"]::-moz-range-progress {
	height: 5px;
	border-radius: 5px;
}

/*
 * Layer styles
 */
.layer-list {}
.layer-list .layer-item {
	display: flex;
	gap: 4px;
	padding: 2px 6px;
	align-items: center;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.layer-list .layer-item.active {
	background-color: #f7f7f7;
}
.layer-list .layer-item .layer-name {
	flex-grow: 1;
}
/*
 * Cliparts
 */
ul.clipart-list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 6px;
	grid-auto-rows: 1fr;
}
ul.clipart-list li {
	padding: 5px;
	border: 1px solid #eee;
	text-align: center;
	cursor: pointer;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
ul.clipart-list li:hover {
	border-color: #5a6268;
}
ul.clipart-list li span,
ul.clipart-list li smal {
	display: block;
}
ul.clipart-list li span img {
	max-width: 100%;
	height: auto;
}

/*
 * Export list
 */
ul.export-list {
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: flex;
	gap: 10px;
	justify-content: center;
}
ul.export-list li {
	padding: 6px;
	border: 1px solid #eee;
	text-align: center;
	cursor: pointer;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
ul.export-list li:hover {
	border-color: #5a6268;
}
ul.export-list li i {
	font-size: 2.5rem;
	color: #ddd;
}
ul.export-list li small {
	display: block;
}

/*
 * Template list
 */
ul.template-list {
	margin: 0;
	padding: 0;
	list-style: none;
	
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 6px;
	grid-auto-rows: 1fr;
}
ul.template-list li {
	padding: 6px;
	border: 1px solid #eee;
	aspect-ratio: 1 / 1;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
}
ul.template-list li:hover {
	border-color: #5a6268;
}
ul.template-list li * {
	display: block;
}
ul.template-list li img {
	max-width: 100%;
	height: auto;
}
ul.template-list li small {
	text-transform: uppercase;
	font-size: .75rem;
	font-weight: 600;
}