/* **** CSS For the Shield Interactive Tool **** */

#shieldwrapper
{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

#shielddisplay
{
	grid-area: 1 / 1 / 2 / 2;
	z-index: 10;
}

#shielddrag
{
	grid-area: 1 / 1 / 2 / 2;
	z-index: 11;
}

#shieldevents
{
	grid-area: 1 / 1 / 2 / 2;
	z-index: 12;
}

#shieldselected
{
	font-weight: bold;
}

svg
{
	pointer-events: none;
}

svg *
{
	pointer-events: all;
}

#shieldctrls
{
	width: calc(50% - 80px);
	padding-left: 20px;
}

#shieldtype_show
{
	margin-left: 10px;
}

.shieldline
{
	display: flex;
	align-items: center;
	margin: 4px 0;
}

.shieldprompt
{
	display: inline-block !important;
	width: 140px;
	padding-right: 5px;
}

.ctrlprompt
{
	display: inline-block !important;
	width: 60px;
	padding-right: 5px;
}

#shieldcolours
{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 20px;
}

svg
{
	margin: 5px;
}

#bgrect
{
	fill: #efe;
}

.shieldclip
{
	fill: #ecce9a;
}

#shieldcomponents
{
	display: inline-block;
}

.shieldcolitm
{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 5px;
	padding: 5px 0;
	width: 70px;
	border-radius: 15px;
	border: 3px solid #ddd;
	user-select: none;
}

.shieldcolitm:hover
{
	cursor: pointer;
	border: 3px solid #777;
}

.shieldcolitmsel
{
	border: 3px solid #222;
}

.shieldcolitmsel:hover
{
	border: 3px solid black !important;
}

.actions
{
	width: 80px;
	display: flex;
	flex-wrap: wrap;
}

.actionitm
{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin: 5px;
	padding: 5px 0;
	width: 30px;
	height: 30px;
	filter: contrast(60%);
	background-size: contain;
}

.actionitm:hover
{
	filter: contrast(150%);
	cursor: pointer;
}

#loadshield
{
	background-image: url("/images/heraldry/load.png");
}

#saveshield
{
	background-image: url("/images/heraldry/save.png");
}

#printshield
{
	background-image: url("/images/heraldry/print.png");
}

#removeitm
{
	background-image: url("/images/heraldry/bin.png");
}

#duplicateitem
{
	background-image: url("/images/heraldry/duplicate.png");
}

#moveup
{
	background-image: url("/images/heraldry/moveup.png");
}

#movedown
{
	background-image: url("/images/heraldry/movedown.png");
}

.sctrlname
{
	display: inline-block;
	margin-left: 20px;
}

#shieldcol0
{
	background-color: black;
	color: white;
}

#shieldcol1
{
	background-color: #f00;
	color: black;
}

#shieldcol2
{
	background-color: #00f;
	color: white;
}

#shieldcol3
{
	background-color: #009600;
	color: white;
}

#shieldcol4
{
	background-color: #a0a;
	color: white;
}

#shieldcol5
{
	background-color: #ffdc0a;
	color: black;
}

#shieldcol6
{
	background-color: #f0f0f0;
	color: black;
	margin-bottom: 40px;
}

.rangeshow
{
	display: inline-block;
	width: 30px;
	text-align: center;
}

.sctrl
{
	align-items: center;
}

.shieldobjects
{
	display: flex;
	justify-content: left;
	flex-wrap: wrap;
	height: 450px;
	overflow: auto;
	margin-bottom: 10px;
	border: 1px solid #999;
}

.shieldicon
{
	box-sizing: border-box;
	display: inline-block;
	width: 85px;
	height: 102px;
	width: 80px;
	height: 95px;
	filter: contrast(95%);
	border: 2px solid #999;
	margin: 2px;
	background-color: #e2be72;
	background-repeat: no-repeat;
	border-radius: 3px;
	background-size: contain;
}

.shieldicon:hover
{
	filter: contrast(150%);
	border: 2px solid black;
	cursor: pointer;
}

#shieldio
{
	display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    z-index: 1000;
    padding: 10px;
    border: 1px solid black;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
    background-color: #def;
    width: 555px;
    border-radius: 10px;
}

#shieldtopbar
{
	display: flex;
	justify-content: space-between;
}

#shieldioinstr
{
	margin-bottom: 5px;
}

#shieldclose
{
	background: url("/dlib/images/popcalclose.png") no-repeat;
	width: 14px !important;
	height: 14px !important;
	cursor: pointer;
}

#shieldclose:hover
{
	background: url("/dlib/images/popcalclosehover.png") no-repeat;
}

#shieldioctrls
{
	text-align: center;
	margin-top: 5px;
}

#io
{
	width: 535px;
}

.shieldobjectsection
{
	display: flex !important;
	height: 30px;
	width: 100%;
	background-color: #ecce9a;
	color: #492902;
	justify-content: center;
	align-items: center;
	font-size: 16px;
	font-weight: bold;
	margin: 6px 4px;
	border-radius: 20px;
	border: 2px solid #492902;
}