/* mPopup box style */
:root {
  --stamprot: 9deg;
  --stampxbump: 90px;
  --stampybump: 120px;
}

.mpopup {
	display: none;
	position: fixed;
	z-index: 11;
	padding-top: 2em;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	/*background-color: rgb(0,0,0);*/
	/*background-color: rgba(0,0,0,0.5);*/
}
.mpopup-content {
	background-color: #c4bfaf;
	margin: auto;
	padding: 3.5em 0.7em 2em 0.7em;
	width: 500px;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-moz-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	-moz-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
	font-size: 14pt;
	line-height: normal;
}

.mpopup-head {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 2px 16px;
	/* background-color: #ffffff; */
	color: #000000;
}
.mpopup-main {padding: 2px 16px;}
.mpopup-foot {
	padding: 2px 16px;
	/* background-color: #ffffff; */
	color: #000000;
	letter-spacing: -0.02em;
}

/* add animation effects */
@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

@keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

/* close button style */
.close {
	color: white;
	float: right;
	font-size: 16px;
	font-weight: bold;
}
.close:hover, .close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}

.die {
display: flex;
justify-items: center;
align-items: center;
}

.leftside, .rightside {
	  flex: 1;
  }
  .leftside svg
  {align-self: start;
  }
  
  

.mpopup-content {  
 flex-direction: column;
 position: relative; 
 }
 
 
 	
/* ID Card styling */
 
	#id_card {
		position: relative;
		width: 540px;
		background: url(https://bladesnpc.com/bitd-images/paper_texture.png)
		rgba(244, 241, 230, 1);
		padding: 12pt; font-family: Courier;
		box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.4),
		inset -1px -1px 1px rgba(0, 0, 0, 0.6);
	}
	
	
	#border_box{
		border: 6px double black;
		padding: 12pt;
		z-index: 25;
	}

	.halfwidth {
		display: flex;
		width: 50%;
	}

	.fullwidth {
		display: flex;
		width: 100%;
	}
	
	.x1 {height: 32px;}
	.x2 {height: 64px;}
	.x3 {height: 96px;}
	.x4 {height: 128px;}
	
	.formfill,
	#id_card em {line-height: 32px;}
	
	.formfill {
	    position: relative;
	    top: -0.2em;
	      font-family:inherit;
  font-size: inherit;
		flex-grow: 1;
		background: url(https://bladesnpc.com/bitd-images/form_rule.png);
		background-position: 0px 24px;
		text-align: left;
		letter-spacing: -0.05em;
		  border: 0;
	}
	
	
	
	textarea:focus,
	input[type=text]:focus {color: red;
	    outline: none;
	    background-color: white;
	}
	
:hover::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: red;
}
:hover::-moz-placeholder { /* Firefox 19+ */
  color: red;
}
:hover:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
:hover:-moz-placeholder { /* Firefox 18- */
  color: red;
}

    label {display: inline-block;}
	
    ::placeholder{
        color: black;
    }
    


        
    }
	
	#id_card em {
		display: inline-block;
		padding-bottom: 0.5em;
		margin-right: .3em;
		background: url(https://bladesnpc.com/bitd-images/paper_texture.png) rgba(244, 241, 230, 1);
		text-align: left;
		}
		
	#id_card a {
	    display: block;
	    position: relative;
	    padding: 0.5em 0.5em 0.5em 0.5em;
	    margin: 0 0 -0.5em 0;
	    width: 100px;
	    height:36px;
	}
	
	#id_card a::before {
	    position: absolute;
}
		
	#id_card a:hover {
	    background-repeat:  no-repeat;
	    background-position: top;
        cursor: pointer;
	}
	
    #id-print:hover {background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM2IiB2aWV3Qm94PSIwIDAgMTAwIDM2IiB3aWR0aD0iMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im05OC42MyAxMS42NmMtOS4wMy0xNC4zOC00My44Ny0xMS4xNy02Mi4zOC04LjcyLS4zLjA1LS42LjczLS43NyAxLjI3LTEyLjQyIDIuNzEtMjUuODQgMy43OS0zMi4wNSAxMC4yNi0zLjg5IDQuNC00LjgxIDEyLjI4LjkgMTUuNjMgMTcuNDcgOS4yIDU0LjY3IDQuMTEgNzMuNzctLjM1IDguODEtMi4wOCAyNi4xMS02LjY4IDIwLjUzLTE4LjA5em0tMTguMjcgMTYuMzRjLTE3LjM2IDQuNzMtNjIuNjMgMTAuMzYtNzYuNTMtMS44OS0xMC4yNS0xNS4zMSAyOS41MS0yMC43OSA0MS43Ni0yMi4xMWE1LjExIDUuMTEgMCAwIDEgMi4yOC4zNmMxLjI2LjQ2IDEuNzYtLjgzLjg3LTEuNDRhMTI2LjIzIDEyNi4yMyAwIDAgMSAyNS4xMS0uNTJjMjMuNTkgNC4wOSAzNC41IDE3LjA2IDYuNTEgMjUuNnoiLz48L3N2Zz4=");
    }
    #id-cancel:hover {background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM2IiB2aWV3Qm94PSIwIDAgMTAwIDM2IiB3aWR0aD0iMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im05OSAxNS4yM2MtMTIuMDgtMTYuNzMtNDEtMTQuOC01OS40LTE0Ljg3YTIuNCAyLjQgMCAwIDAgLTIuMjQgMS4wOGMtMS4xNCAxLjcgMS43MyAyLjE0IDIuMDkuMzEgNC43Ny0uMTcgOS41Ni0uMjEgMTQuMzYgMC0xNS45OSAxLjI1LTQxLjU1IDUuMTktNDkuNDYgMTEuNjEtNC4zNSAzLjgzLTUuODYgMTAuOTQtLjc1IDE1LjAzIDE1Ljc5IDExLjQ3IDU0IDYuNDQgNzMuMjEgNC41OSA4Ljg3LS44OCAyNS43NS01LjQgMjIuMTktMTcuNzV6bS0yMC43NCAxNi4zMWMtMTcuNTMgMi4zNC02My4xNSA3LjI1LTc1LjA1LTYuNzYtOC4xNC0xNyA0My43OS0yMi43OCA1NC45Ny0yMi42MWEyLjg4IDIuODggMCAwIDEgMSAuMTljMi41NyAxIDMuNTEuNDkgMy44MSAwYTEwNy4zOCAxMDcuMzggMCAwIDEgMTMuNDEgMi4xN2MyMi4wNCA0LjIxIDMyLjQ4IDIxLjc3IDEuODYgMjcuMDF6Ii8+PGVsbGlwc2UgY3g9IjM2LjM4IiBjeT0iMi45NSIgcng9Ii43NSIgcnk9Ii42MSIvPjwvc3ZnPg==");
    }
    #id-copy:hover {background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjM2IiB2aWV3Qm94PSIwIDAgMTAwIDM2IiB3aWR0aD0iMTAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0yOS4yNyAzLjU3Yy0xMS44Ni0uNTctMTcuMDEtMS41Ny0yNC44MiAzLjQ5LTQuNDUgMy41My02LjM0IDEzLjU5LTEuNDUgMTcuNzYgMTUuMTcgMTEuNjcgNTMuNTYgOS4yOCA3Mi42NSA4LjI0IDguODItLjUgMjYuNDItMi44MiAyMy4zNy0xNC44Ny0xMS4yNS0xNi42Mi01MS44OC0xNi41OS03MC4wMi0xNy4zOC0uNSAwLTEuMzQgMS42OS0xLjE5IDEuNjkgMTIuNTEgMCAzNi40OSAxLjE5IDQ4LjYxIDQuNDQgMTkuMzEgNC4xOSAzMy4xIDIwLjg3IDIuNTggMjQuNzItMTcuNDUgMS41OC02NSAzLjU5LTc2LjI0LTEwLjM1LTcuNDktMTcgMTMtMTUuNTggMjQuMTMtMTYuMTYgMS42NS40NSAxLjktLjc1IDIuMzgtMS41OHoiLz48Y2lyY2xlIGN4PSIyNy4zIiBjeT0iMS44NSIgcj0iMS4yOSIvPjwvc3ZnPg==");
        
    }
	
	#id_card a:hover svg{
	filter: invert(10%) sepia(87%) saturate(5208%) hue-rotate(245deg) brightness(87%) contrast(124%);}
		
	#stamp {
	position: absolute;
	right: 54px;
	top: 32px;
	transform: rotate(var(--stamprot));}

#id_head {
    display: flex;
    margin-bottom: 32px;
}


	
#id_head div {
    padding: 1em 0;
    flex: 1;
    line-height: 1.2em;
    z-index: 30;
}	

#id_head, #id_head > div {
  border-style: solid;
  border-color: rgba(0,0,0,1);
}
#id_head {border-width: 1px  0   0  1px}
#id_head div {border-width: 0  1px 1px  0}
.idcard_buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.idcard_buttons a {margin: 0; padding:0; position: static; line-height: initial;}

#id02, #id03, #id04, #id05, #id06, #id07, #id08, #id09, #id10
    {
    display: inline-block;
    position: relative;
    }
#id01 {padding-left: 0.75em;}
#id02 {padding-left: 0.5em;}
#id03 {padding-left: 0.25em;}
#id04 {padding-left: 0.25em;}
#id05 {padding-left: 0.5em;}
#id06 {padding-left: 0.25em;}
#id07 {padding-left: 0.5em;}
#id08 {padding-left: 0.5em;}
#id09 {padding-left: 1em;}
#id10 {padding-left: 0.75em;}
#id11 {padding-left: 0.25em;}
#id12 {padding-left: 0.5em;}
#id13 {padding-left: 0.25em;}