/* ------------------------------------- *
 * Generals                              *
 * ------------------------------------- */
#gameelement_form {
	text-align: center;
}

#gameelement_form > input[type="submit"]
{
	background-color: #7a7;
	margin: 2em;
	border-radius: 7px;
	width: 40%;
	color: #535353 !important;
	font-family: 'Aurebesh';
	text-shadow: 0px 1px #aeaeae, 0px -1px #626262;
	padding: 5px;
}

#gameelement_credential_form {
	overflow: scroll;
}

#gamelements_credentials {
    text-align:center;
    table-layout : auto;
    /*border-collapse: unset;*/
    width: 150px;
    margin-top: 150px;
}

#gamelements_credentials td {
	white-space: nowrap;
    /*border: 1px solid green;*/
    padding: 1px 0px 1px 10px;
}

#gamelements_credentials tr.dirty {
	background: #750;
}

#gamelements_credentials .verticalTableHeader {
    text-align:center;
    white-space:nowrap;
    g-origin:50% 50%;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    /*border: 1px solid blue;*/
}
#gamelements_credentials .verticalTableHeader p {
    margin: 0px;
    /*height: 150px;*/
    width:  15px;
    display:inline-block;
    /*border: 1px solid red;*/
}
#gamelements_credentials .verticalTableHeader p:before{
    content:'';
    width:0;
    /*padding-top:110%;*//* takes width as reference, + 10% for faking some extra padding */
    /*display:inline-block;
    vertical-align:middle;*/
    /*border: 1px solid yellow;*/
}

/* ------------------------------------- *
 * QRCodes                               *
 * ------------------------------------- */

.button_check {
    display: block !important;
    width: 25%;
    border-radius: 5px;
    color: white !important;
    background-color: darkred !important;
    padding: 7px !important;
    margin: 2px !important;
}

.QRCode-print {
	border: 2px solid white;
	border-radius: 20px;
	padding: 15px;
	position: relative;
	margin-bottom: 20px;
}
.QRCode-print .qrcode_print {
	border: 1px solid white;
	border-radius: 15px;
	position: relative;
	width: 33%;
	display: inline-block;
	padding: 10px;
	text-align: center;
}
.QRCode-print .global_qrcode_container {
	border:  none;
}
.QRCode-print .qrcode {
	border: 5px solid white;
}

@media print {

	body {
		-webkit-print-color-adjust:exact !important;
	 	print-color-adjust:exact !important;
	}

	.button_check {
	    display: none !important;
	}

	/* shutdown various useless stuff */
	#site-header { display: none; }
	#top-bar-wrap { display: none; }
	.page-header { display: none; }
	#right-bar { display: none; }
	#right-sidebar-inner { display: none; }
	#footer { display: none; }

	*  { font-size: 12pt !important; color: black !important; }
	h1 { font-size: 12pt !important; color: black !important; }

	.container { max-width: 100%; }
	#primary {
		width: 100%;
		border: none;
		padding: none;
	}
	#primary h1 { color: black !important; }

	/* Go with QRCodes */
	.QRCode-print {
		border: 4px solid black;
		border-radius: 1.3em;
		padding: 0.5em;
		position: relative;
		margin:  0;
		page-break-after: always;
	}
	.QRCode-print input {
		display: none !important;
	}
	.QRCode-print p {
		border: none;
		padding: 0;
		margin: 0;
		font-size: 0.7em !important;
	}
	.QRCode-print .qrcode_print {
		border: 2px solid black;
		border-radius: 0.8em;
		position: relative;
		width: 33%;
		display: inline-block;
		padding: 0.5em;
		text-align: center;
		display: none;
	}
	.QRCode-print .qrcode_print:has(input:checked) {
		display: inline-block;
	}
	.QRCode-print .global_qrcode_container {
		border:  3px solid black;
		background-color: black !important;
		border-radius: 0.5em;
		margin: 0.5em;
	}
	.QRCode-print .qrcode {
		border: none;
		background-color: white !important;
		width: 100%;
		height: 100%;
		/*padding: 0.5em;*/
	}
}

/* ------------------------------------- *
 * Admin Display                         *
 * ------------------------------------- */

.civilian           { background-color: #444; }
.imperial_agent     { background-color: #744; }
.imperial_ri_agent  { background-color: #b44; }
.imperial_bsi_agent { background-color: #f44; }
.chalactan_medic    { background-color: #447; }
.imperial_medic     { background-color: #44f; }
.bounty_hunter      { background-color: #474; }
.banker             { background-color: #777; }
.droid              { background-color: #f5f; }
.hacker             { background-color: #536; }
.rebelle            { background-color: #f91; }

ul.legend li {
	background-color: transparent;
	list-style: none;
  	border-left-width: 10px;
  	border-left-style: solid;
  	padding-left: 5px;
}
li.civilian           { border-left-color: #444; }
li.imperial_agent     { border-left-color: #744; }
li.imperial_ri_agent  { border-left-color: #b44; }
li.imperial_bsi_agent { border-left-color: #f44; }
li.chalactan_medic    { border-left-color: #447; }
li.imperial_medic     { border-left-color: #44f; }
li.bounty_hunter      { border-left-color: #474; }
li.banker             { border-left-color: #777; }
li.droid              { border-left-color: #f5f; }
li.hacker             { border-left-color: #536; }
li.rebelle            { border-left-color: #f91; }

/*#gameelement_credential_form input[type="submit"]
{
	background-color: #7a7;
	margin: 2em;
	border-radius: 7px;
	width: 40%;
	color: #535353 !important;
	font-family: 'Aurebesh';
	text-shadow: 0px 1px #aeaeae, 0px -1px #626262;
	padding: 5px;
}*/
.update_message_ok {
	border-radius: 10px;
	padding: 10px 15px 0;
	border: 1px solid darkgreen;
	background-color: green;
	box-shadow: inset 0 0 7px 3px darkgreen;
	margin-bottom: 2em;
}
.update_message_ko {
	border-radius: 10px;
	padding: 10px 15px 0;
	border: 1px solid #722;
	background-color: #f00;
	box-shadow: inset 0 0 7px 3px #722;
	margin-bottom: 2em;
}
.debug_message {
	border-radius: 10px;
	padding: 10px 15px 0;
	border: 1px solid #227;
	background-color: #55F;
	box-shadow: inset 0 0 7px 3px #227;
	margin-bottom: 2em;
}

/* ------------------------------------- *
 * Doors                                 *
 * ------------------------------------- */
#door_state_container {
	width: 90%;
	padding:5px;
	display: inline-block;
	border: 3px solid grey;
	border-radius: 10px;
	vertical-align: middle;
}

#door_state {
	display: block;
	padding: 5px;
	border-radius: 6px;
	width: 100%;
  height: 0;
  padding-top: 100%;
}

#door_content {
	text-align: center;
	font-family: 'Aurebesh' !important;
	margin-top: -75%;
	font-size: 2.5em;
	text-decoration-line: underline overline;
  	text-decoration-thickness: 0.15em;
  	text-decoration-skip-ink: none;
  	text-decoration-style: solid;
}

.door_closed {
	border: 1px solid darkred;
	background-color: red;
	box-shadow: inset 0 0 7px 3px darkred;
}
.door_closed > p {
	text-shadow:  #ffbbbb 0 0 15px
}
.door_open {
	border: 1px solid darkgreen;
	background-color: green;
	box-shadow: inset 0 0 7px 3px darkgreen;
}
.door_open > p {
	text-shadow:  #aaffaa 0 0 30px
}


/* ------------------------------------- *
 * Destructible                          *
 * ------------------------------------- */

/* default element states */
#lvl_0, #lvl_1, #lvl2, #lvl_3 {
	display:  none;
}

#monobjet {
	display: block;
	padding: 5px;
	border-radius: 12px;
	width: 100%;
  	height: 0;
  	padding-top: 100%;
}

#monobjet.inconnu {
	border: 1px solid #444444;
	background-color: grey;
	box-shadow: inset 0 0 7px 3px #444444;
}
#monobjet.connu {
	background: deepskyblue;
	border: 1px solid darkblue;
	background-color: deepskyblue;
	box-shadow: inset 0 0 7px 3px darkblue;
}
#monobjet.casse {
	border: 1px solid darkred;
	background-color: red;
	box-shadow: inset 0 0 7px 3px darkred;
}
#monobjet.entretenu {
	border: 1px solid darkgreen;
	background-color: green;
	box-shadow: inset 0 0 7px 3px darkgreen;
}

#monobjet > #nom {
	text-align: center;
	font-family: 'Aurebesh' !important;
	margin-top: -75%;
	font-size: 2.5em;
	text-decoration-line: underline overline;
  	text-decoration-thickness: 0.15em;
  	text-decoration-skip-ink: none;
  	text-decoration-style: solid;
}

/* ------------------------------------- *
 * Interaction Jauge                     *
 * ------------------------------------- */

#interaction_jauge_container {
	border: 2px solid red;
  	border-radius: 6px;
  	position: relative;
  	/*border-image:  url('./wp-content/');*/
  	margin-top: 3em;
}
#interaction_jauge_container .marquee {
	border-right: 2px solid red;
	height: 130%;
	display: block;
	position: absolute;
	top: -30%;
}
#interaction_jauge {
  position: absolute;
  height: 100%;
  top: 0;
  display: block;
  border: 2px solid lightgrey;
  background: grey;
}
#interaction_jauge_container > p {
	color: black;
}
#interaction_jauge_container .timer {
	height: 100%;
	width: 100%;
	display: block;
	position: absolute;
	top: 0;
	text-align: center;
  	font-family: 'Aurebesh';
  	font-size: 1em;
}