/* ------------------------------------- *
 * Carrousel                             *
 * ------------------------------------- */

.cha-carousel {
  overflow: hidden;
  padding: 5%;
  position: relative;
  margin: 5rem auto 0 auto;
  width: 80rem;
  box-shadow: 0 0 6rem -1rem #00000048;
}

.cha-carousel-wrapper {
  display: flex;
  transition: transform .5s ease;
  position: relative;
}

.cha-card {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 12rem;
  min-height: 17rem;
  position: relative;
  left: -100%;
  background: rgb(85, 122, 192);
  box-sizing: border-box;
  padding: 1rem;
  font-size: 1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  transition: opacity .6s, background 1.2s, transform .8s, left .5s;
  transform: scale(.75) rotate(5deg);
  box-shadow: 0 0 2rem 0 #00000048;
}

.cha-card--bottom {
  left: 1.8rem;
  transform: scale(0.9)  rotate(0);
  z-index: 1;
}

.cha-card--middle {
  left: -8.5rem;
  transform: scale(0.98)  rotate(0);
  z-index: 2;
}

.cha-card--active {
  transform: scale(1.1) rotate(0);
  opacity: 1;
  background: rgb(22, 32, 51);
  color: white;
  z-index: 3;
  left: -18.5rem;
}

.isHidden{
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.z-index-high{
  z-index: 6;
}
.cha-carousel__prevBtn,
.cha-carousel__nextBtn {
  position: absolute;
  background: none;
  top: 50%;
  padding: 10px;
  border: solid rgb(22, 32, 51);
  border-width: 0 3px 3px 0;
  display: inline-block;
  cursor: pointer;
}
.cha-carousel__nextBtn {
  left: 1.5rem;
  transform: rotate(135deg);
}
.cha-carousel__prevBtn {
  right: 1.5rem;
  transform: rotate(-45deg);
}

/* ------------------------------------- *
 * Generals                              *
 * ------------------------------------- */

 .bounty_list_carrousel form {
 	width: 50rem;
 }

#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                               *
 * ------------------------------------- */

.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: 3px solid black;
}

@media print {

	body {
		-webkit-print-color-adjust:exact !important;
	 	print-color-adjust:exact !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;
	}
	.QRCode-print p {
		border: none;
		padding: 0;
		margin: 0;
	}
	.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: black !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; }

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; }

#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;
}

/* ------------------------------------- *
 * 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: 3em;
	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                          *
 * ------------------------------------- */

#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;
}