html, body {
  zbackground-color:#201010;
  zcolor:#FFF0F0;
  font-family:calibri,arial;
  font-size:12pt;
  margin:0;
  height:100%;
  padding:0;
}

#PageContent {
  margin:5px;
}

PRE {
  margin:0;
}

#banner { border-bottom:2px solid #FFCC00; }
#logo {	background-image: url("/logo_80.png");	background-repeat: no-repeat;	height: 80px;	margin:10px; }
#top_menu { position:absolute; top:50px; left:300px; right:0; display:inline-block; margin-bottom:1em; margin-left:3em; }
#welcome_message { font-weight:bold; font-size:2em; }
#welcome_message::after { font-size:24pt; content:""; }
.question_container { border-left:2px solid grey;margin:0 10px; padding:10px; background-color:#F0F0F0; }

.ProgressBar { display:inline-block; overflow:hidden; white-space:nowrap; background-color:green; font-size:.7em; text-align:center; }

/*
#logo {	background-image: url("/logo_lnrd_80.png");	background-repeat: no-repeat;	height: 80px;	margin:10px; }
#top_menu { position:absolute; top:50px; left:300px; right:0; display:inline-block; margin-bottom:1em; margin-left:3em; }
#welcome_message { font-weight:bold; font-size:0; }
#welcome_message::after { font-size:24pt; content:"Welcome to your Human Compatibility assessment. This experience will help you learn if this position & work relationship will make you thrive. Enjoy!"; }
.question_container { border-left:2px solid grey;margin:0 10px; padding:10px; background-color:#F0F0F0; }
*/

/* ============== Tab0 ==*/

.Tab0 TABLE, TABLE.Tab0, .Tab0 TR, .Tab0 TD, .Tab0 TH {
  border:0px;
  border-collapse:collapse;
  padding:0 1em;
}

/* ============== Tab1 ==*/
div.Tab1 { display:inline-block; }
.Tab1 TABLE, TABLE.Tab1 {
  border-collapse:collapse;
}
.Tab1 TD, .Tab1 TH {
  border-top:1px solid #FFCC00;
  border-bottom:1px solid #FFCC00;
  padding:5px 10px;
}
.Tab1 TH {
  font-weight:bold;
}
.Tab1 .Titre { padding:5px 10px; text-align:center; font-weight:bold; color:black; background-color:#FFCC00; font-variant: small-caps; }
.Tab1 .Selected { background-color:#F1F1F1; }


/* ============== Table sortable ==*/
table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { content: " \25B4\25BE"; }
table.sortable th:not(.sorttable_nosort) { cursor:pointer; }
table.sortable th.sorttable_sorted,table.sortable th.sorttable_sorted_reverse { background-color:#F1F1F1; }

/* ============== .Button1 ==*/

/* http://www.css3create.com/Creer-un-bouton-en-CSS3-sans-images */
.Button1 {
cursor:pointer;
font-family: Arial,sans-serif;
zmargin:10px 5px;
margin: 4px 2px;
border:none;
padding:5px 10px;
zpadding: 15px 32px;
text-align: center;
color: #FFFFFF;
background: #444;
background: linear-gradient( #555, #2C2C2C);
border-radius: 8px;
text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2);
box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4);
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;

text-decoration: none;
display: inline-block;
}
.Button1:hover{
color: #222;
background: #555;
background: linear-gradient( #777, #333);
}
.Button1:active{
color: #000;
background: #444;
background: linear-gradient( #555, #2C2C2C);
box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
}

/* ============== ... ==*/

#divcache {
    display:none;
    position:fixed;
    left:0; top:0; right:0; bottom:0;
    background-color:gray; /* black */
    opacity:0.5;
    z-index:1000;
}
#divworking {
    display:none;
    position:fixed;
    /* left:0; top:0; right:0; bottom:0; */
    left:50%;    top:50%;    transform: translateX(-50%) translateY(-50%);
    zbackground-color:rgba(0,0,255,0.1);
    zbackground-color:rgba(0,0,0,0.1);
    z-index:1001;
    color:yellow;
    font-size:10em;
}
#pw_prompt {
    display:none;
    position:fixed;
    left:50%;    top:30%;    transform: translateX(-50%) translateY(-50%);
    padding:15px;
    zzborder:1px solid white;
    zzbackground-color:black;
    z-index:1002;
    border-radius: 8px;
    box-shadow: 1px 1px 10px black inset, 0 1px 0 rgba( 255, 255, 255, 0.4);
}


/* ============================================================================= Menu ==*/
/* Basé sur https://www.w3schools.com/css/css_navbar.asp */

.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    zbackground-color: #333;
    zwhite-space: nowrap;
}
.menu li { zfloat:left; display:inline-block; zposition:relative;}
.menu li a {
    ztransition-duration: 0.4s;
    z-webkit-transition-duration: 0.4s; /* Safari */
    display: block;  /* inline-block ??? */
    color: black;
    padding: .5em 1em;
    text-decoration: none;
}
.menu li a:hover { background-color: #f1f1f1; }
.menu .active { border-bottom: 3px solid #FFCC00; }

.dropbtn { }
.dropbtn .active { border-bottom: 3px solid #FFCC00; }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    border:1px solid #FFCC00;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(255,255,255,0.2);
    z-index: 1;
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover { background-color: #f1f1f1; }
.dropdown-content .active { background-color: #f1f1f1; border:0; }

/*
.dropdown:hover .dropdown-content {
    display: block;
}
*/
.show { display:block; }

/* ==================================================================== Boites Modales ==*/
 /* The Modal (background) */
.modal-background {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left:0;  top:0;  bottom:0;  right:0;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    color: #000000;
}
.modal-container {
    display:inline-block;
    position: relative; 

    /* top:50%;  left:50%;  transform: translateX(-50%) translateY(-50%); */
    margin:auto;
	
	max-height:100%;	overflow:auto;
    
    ztext-align:left;
    background-color: #fefefe;
    /* padding: 20px; */
    border: 1px solid #888;
}
.modal-close {
    position:absolute;
    right:0; top:0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
    width:1em; height:1em;
    text-align:center;
    line-height: 1em;
}
.modal-close:hover, .zmodal-close:focus {
    color: red;
    cursor: pointer;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)}
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
    from {transform: scale(0)}
    to {transform: scale(1)}
} 



/* ==================================================================== Style des boutons ==*/

/* Set a style for all buttons */
button {
    zbackground-color: #4CAF50;
    background-color: #FFCC00;
    zcolor: white;
	color:black;
    padding: 10px 18px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    font-size:1em;
}

/* Add a hover effect for buttons */
button:hover {
    opacity: 0.8;
}

.button_red {
    background-color: #f44336;
}






 /* Bordered form */
FORM.Form1 {
    border: 3px solid #f1f1f1;
}

/* Full-width inputs */
.Form1 input[type=text], .Form1 input[type=password], .Form1 select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size:1em;
}

/* Center the avatar image inside this container */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
    width: 40%;
    border-radius: 50%;
}

/* Add padding to containers */
.container {
    padding: 10px 16px;
	/* overflow:auto; max-height:100%; */
}
.containerTitle {
    padding: 10px 16px; background-color:#f1f1f1;
}

/* The "Forgot password" text */
span.psw {
    float: right;
    padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }
    .cancelbtn {
        width: 100%;
    }
} 






/* ==================================================================== Style Snackbar ==*/
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 4px; /* Rounded borders */
    padding: .8em 4em; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 10000; /* Add a z-index if needed */
    bottom: 30px; /* 30px from the bottom */
    left: 50%;
    transform: translatex(-50%);
    font-weight:bold;
    font-size:1.2em;
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show1 {
	animation: snackbar_animation1 5s;
}
#snackbar.show2 {
	animation: snackbar_animation2 5s;
}
@keyframes snackbar_animation1 {
	0% { bottom:0; opacity:0; visibility: visible; }
	10% { bottom:30px; opacity:1; }
	70% { bottom:30px; opacity:1; }
	100% { bottom:0; opacity:0; visibility:hidden; }
}
@keyframes snackbar_animation2 {
	0% { bottom:0; opacity:0; visibility: visible; }
	10% { bottom:30px; opacity:1; }
	70% { bottom:30px; opacity:1; }
	100% { bottom:0; opacity:0; visibility:hidden; }
}


/* ================= */
#CookieMess {
  text-align:center;
  display:none;
  position:fixed;
  top:0; left:0; right:0;
  color:white;  background-color:black;    opacity:0.9;
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s;
}

.BoutonDocument {
	font-size:0.8em;
	zborder:1px solid grey;
	border-radius: 2px;
	background-color:#FFCC00;
	padding:0px 7px;
	zfont-weight:bold;
	color:black;
	text-decoration:none;
}


/*== Icones cliquables ==*/

.ActionIcon {
	color:#FFCC00;
	cursor:pointer;
}
.ActionIcon:hover {
	color:black;
	zfont-weight:bold;
}
.ActionIcon2 {
	color:white;
	cursor:pointer;
}
.ActionIcon2:hover {
	color:black;
	zfont-weight:bold;
}

/*== Modal Forms ==*/
#zModalDiv { position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); } /* Autre solution que FLEX */
#ModalDiv { display:inline-block; position: relative; margin:auto;  max-height:100%; overflow:auto; background-color: #fefefe; border: 1px solid #888; }
#ModalDiv input[type=text] { box-sizing:border-box; width:100%; margin:.2em 0; border:1px solid #ccc; padding:.5em 1em; font-size:1.1em; font-family:inherit; }
#ModalClose { position:absolute; top:0; right:0; font-size:2em; width:1.2em; text-align:center; cursor:pointer; font-weight:bold; }
#ModalClose:hover {  color:red; background-color:rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
#ModalTitle { font-size:2em;  font-weight:bold;  padding:1em 1em;  background-color:#f1f1f1; }
#ModalContent { background-color:#FFFFFF;  padding:.5em 1em; }
#ModalButton { background-color:#f1f1f1;  padding:.5em 1em;  text-align:right; }
#ModalButton button { zfont-weight:bold; zfloat:right; background-color:#FFCC00; padding:.5em 1em; }

/*== SubMenu ==*/
/* Règles de fonctionnement */
.SubMenu { display:inline-block; position:relative; cursor:pointer; font-size:.9em; }
.SubMenuContent { display:none; position:absolute; z-index:10; }      // right:0;  SI ALIGNEMENT A DROITE
/* Règles décoratives */
.SubMenu { border:1px solid black; padding:.5em 1em;}
.SubMenu:hover {  }
.SubMenuContent { background-color:white;  box-shadow:.2em .2em .2em grey;  border:1px solid black; }
.SubMenuElement { text-align:left; white-space: nowrap; padding:.5em 1em; }
.SubMenuElement:hover { background-color:#FFCC00; }
.SubMenuElementDisabled { zdisplay:none;  color:lightgrey; }
.SubMenuElementDisabled:hover {  background-color:inherit; }