/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
  html, body {
    font-size: 18px;
  }
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
   html, body {
    font-size: 15px;
  }
  .tablecolumn {
    width: 100% !important;
  }
}
html, body { margin: 0; padding: 0; }
body { padding-top: 64px; }
#contenu { margin: 15px; display: table-cell; width: 100%; padding-left: 80px; }
/******* menu ********/
.wrapper { display: table-cell; vertical-align: top; width: 30px;padding: 5px; text-align: center; }
.menu { font-size: 20px; width: 65px; position: fixed; z-index: 999; }
.menu ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #99aab5; width: 100%; }
.menu li { float: left; width: 100%; border-top: solid 1px white; }
.menu li, .dropbtn { color: white; padding: 0; text-decoration: none; margin: 0; border-left: solid 0px grey; padding-right: 2px; }
.menu a { padding: 18px; display: block; border: solid 1px white; }
.menu li a:hover, .dropdown:hover .dropbtn { background-color: white; color: black; border: solid 1px black; }
.dropbtn_green {  background-color: #4CAF50; }
.dropbtn_lightgreen {  background-color: #c4de91; }
.dropbtn_blue {  background-color: #4aa8db; }
.dropbtn_red {  background-color: #c4392d; }
.dropbtn_orange {  background-color: #dfb83f; }
.dropbtn_yellow {  background-color: #d2a22f; }
.dropbtn_grey { background-color: grey; }
.dropbtn_rose { background-color: #c79dd7; }
.dropbtn_brown {  background-color: #805b00; }
li.dropdown { display: inline-block; }
.dropdown-content { display: none; position: absolute; left: 55px; background-color: white; min-width: 100px; width: max-content; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; padding: 7px; border: solid 1px #99aab5; color: black;	 font-size: 24px; text-transform: uppercase; background-color: lightgoldenrodyellow; }
.dropdown-content hr { margin: 2px; }
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.dropdown-content a:hover { background-color: #f1f1f1; }
.dropdown:hover .dropdown-content { display: block; }
/******* !menu ********/
/******* !contenu ********/
#contenu a { color: black; }
.ui-widget form { display: inline; }
.ui-widget button {	text-align: center; }
.ui-widget button > span { padding-right: 5px; }
.custom-combobox { padding-right: 30px; }
.part_wrapper {	padding:5px; float:left; width:98%; }
.part_wrapper h3 { margin: 0; padding: 5px;	border-radius: 3px;	border-bottom-left-radius: 0px;	border-bottom-right-radius: 0px; font-family: Verdana; }
.part_wrapper_large { float: none; }
.part_wrapper_large > div { overflow: auto; }
.part_wrapper_large > div > div { float: left; padding-left: 8px; overflow: visible; }
.select2-container--default .select2-selection--single { height: 40px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { padding: 5px 5px;	background-color: #eeeeee; }
.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {	background-color: #e2e2e2; }
.clearfix::after { content: ""; clear: both; display: table; }
#creer_famille, #creer_jeu { /*margin: 5px;*/ }
/***************************/
.bg_grey { background-color: grey;border: solid 1px grey; color: white; }
.bg_grey ~ div { background-color: white; border-color: grey; }
/** ** **/
.bg_white { background-color: white;border: solid 1px grey; color: white; }
.bg_white ~ div { background-color: white; border-color: grey; }
/** ** **/
.bg_brown { background-color: #805b00;border: solid 1px #805b00; color: white; }
.bg_brown ~ div { background-color: white; border-color: #805b00; }
/** ** **/
.bg_red { background-color: #c4392d; border: solid 1px #c4392d;	border-color: #c4392d; color: white; }
.bg_red ~ div {	background-color: #feebeb; border-color: #c4392d; }
/***************************/
.bg_yellow { background-color: #d2a22f;	border: solid 1px #d2a22f;	border-color: #d2a22f; color: white; }
.bg_yellow ~ div { background-color: white;	border-color: #d2a22f; }

.bg_red2 { background-color: #9e7a6e;	border: solid 1px #9e7a6e;	border-color: #9e7a6e; color: white; }
.bg_red2 ~ div { background-color: white;	border-color: #9e7a6e; }
/***************************/
.bg_rose { background-color: #c79dd7; border: solid 1px #c79dd7; border-color: #c79dd7;	color: white; }
.bg_rose ~ div { background-color: white; border-color: #c79dd7; }
/***************************/
.bg_blue { background-color: #4aa8db; border: solid 1px #4aa8db; color: white; }
.bg_blue ~ div { background-color: white; border-color: #4aa8db; }
.bg_blue ~ div > div > div > form > button { border-color: #4aa8db; }
.bg_blue ~ div > div > div > form > button:hover { border-color: #4aa8db; background-color: #4aa8db; color: white; }
.bg_blue ~ div > div > div > form > span > span > span { border: solid 1px #4aa8db !important; height: 40px !important;	line-height: 40px !important; }
.bg_blue ~ div > div > div > form > span > span > span > span {	line-height: 40px !important; }
.dialog_blue { padding: 0; }
.dialog_blue ~ .ui-widget.ui-widget-content { border: 0; }
.dialog_blue > .ui-dialog-titlebar { background-color: #4aa8db;	border-color: #4aa8db; color: white; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
.dialog_blue > .dialog { border-color: #4aa8db; border-radius: 0px;	border-radius: 0px;	border-bottom: 0; }
.dialog_blue > .ui-dialog-buttonpane { border: solid 1px #4aa8db; margin-top: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.dialog_blue > .ui-dialog-buttonpane > .ui-dialog-buttonset button { border-color: #4aa8db; }
.dialog_blue > .ui-dialog-buttonpane > .ui-dialog-buttonset button:hover { border-color: #4aa8db; background-color: #4aa8db; color: white; }
.dialog_blue  > .dialog > ul > .ui-state-active { background-color: #4aa8db; border-color: #4aa8db; }
.dialog_blue > div > form > fieldset > legend {	background-color: #4aa8db; color: white; }
/***************************/
.bg_green {	background-color: #4CAF50; border: solid 1px #4CAF50; color: white; }
.bg_green ~ div { background-color: white; border-color: #4CAF50; }
.bg_green ~ div > div > div > form > button { border-color: #4CAF50; }
.bg_green ~ div > div > div > form > button:hover {	border-color: #4CAF50;	background-color: #4CAF50; color: white; }
.bg_green ~ div > div > div > form > span > span > span { border: solid 1px #4CAF50 !important; height: 40px !important; line-height: 40px !important; }
.bg_green ~ div > div > div > form > span > span > span > span { line-height: 40px !important; }
.dialog_green {	padding: 0; }
.dialog_green ~ .ui-widget.ui-widget-content { border: 0; }
.dialog_green > .ui-dialog-titlebar { background-color: #4CAF50; border-color: #4CAF50;	color: white; border-bottom-left-radius: 0px; 	border-bottom-right-radius: 0px; }
.dialog_green > .dialog { border-color: #4CAF50; border-radius: 0px; border-radius: 0px; border-bottom: 0; }
.dialog_green > .ui-dialog-buttonpane { border: solid 1px #4CAF50; margin-top: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.dialog_green > .ui-dialog-buttonpane > .ui-dialog-buttonset button { border-color: #4CAF50; }
.dialog_green > .ui-dialog-buttonpane > .ui-dialog-buttonset button:hover {	border-color: #4CAF50; background-color: #4CAF50; color: white; }
.dialog_green  > .dialog > ul > .ui-state-active { background-color: #4CAF50; border-color: #4CAF50; }
/***************************/
.bg_orange { background-color: #dfb83f;	border: solid 1px #dfb83f; color: white; }
.bg_orange ~ div { background-color: white;	border-color: #dfb83f; }
.bg_orange ~ div > div > div > form > span > span > span { border: solid 1px #dfb83f !important; min-width: 375px !important; max-width: 600px !important; }
.bg_orange ~ div > div > div > form > button { border-color: #dfb83f; }
.bg_orange ~ div > div > div > form > button:hover { border-color: #dfb83f;	background-color: #dfb83f; color: white; }
.bg_orange2 { background-color: #ffa500;	border: solid 1px #ffa500; color: white; }
.bg_orange2 ~ div { background-color: white;	border-color: #ffa500; }
.bg_orange2 ~ div > div > div > form > span > span > span { border: solid 1px #ffa500 !important; min-width: 375px !important; max-width: 600px !important; }
.bg_orange2 ~ div > div > div > form > button { border-color: #ffa500; }
.bg_orange2 ~ div > div > div > form > button:hover { border-color: #ffa500;	background-color: #ffa500; color: white; }
.bg_orange3 { background-color: #cc8400;	border: solid 1px #cc8400; color: white; }
.bg_orange3 ~ div { background-color: white;	border-color: #cc8400; }
.bg_orange3 ~ div > div > div > form > span > span > span { border: solid 1px #cc8400 !important; min-width: 375px !important; max-width: 600px !important; }
.bg_orange3 ~ div > div > div > form > button { border-color: #cc8400; }
.bg_orange3 ~ div > div > div > form > button:hover { border-color: #cc8400;	background-color: #cc8400; color: white; }
.dialog_orange { padding: 0; }
.dialog_orange ~ .ui-widget.ui-widget-content { border: 0; }
.dialog_orange > .ui-dialog-titlebar { background-color: #dfb83f; border-color: #dfb83f; color: white; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
.dialog_orange > .dialog { border-color: #dfb83f; border-radius: 0px; border-bottom: 0; }
.dialog_orange > .ui-dialog-buttonpane { border: solid 1px #dfb83f; margin-top: 0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }
.dialog_orange > .ui-dialog-buttonpane > .ui-dialog-buttonset button { border-color: #dfb83f; }
.dialog_orange > .ui-dialog-buttonpane > .ui-dialog-buttonset button:hover { border-color: #dfb83f; background-color: #dfb83f; color: white; }
.dialog_orange > .dialog > ul > .ui-state-active { background-color: #dfb83f; border-color: #dfb83f; }
.dialog_orange > div > form > fieldset > legend { background-color: #dfb83f; color: white; }
/***************************/
.red { color: red; }
.green { color: #4CAF50; }
#table_emprunt  { width: 100%; }
#table_emprunt thead th { background-color: #dedede; padding: 5px; }
#table_emprunt thead { border-bottom: solid 1px black; }
#table_emprunt td { padding: 6px !important; padding-top: 13px !important; padding-bottom: 10px !important; text-align: center; }
#emprunt_famille_title { color: red; }
#emprunt_famille_nom { color: red; }
#emprunt_famille_numero { color: red; }
.emprunt_encaisse, .rentree_encaisse { width: 50px; text-align: center; }
.emprunt_ligne td:nth-child(3), #total_emprunt { background-color: #f2f2f2; font-weight: bold; text-align: center; }
.emprunt_ligne td {	text-align: center; }
#emprunt:hover { background-color: #dfb83f; color: black; }
#total_emprunt { color: #dfb83f; }
#options_emprunt { background-color: #dedede; padding: 5px; text-align: center; }
.barre{text-decoration:line-through;}
/** ** **/
table { border-spacing : 0; border-collapse : collapse; }
.part { display: block; margin-bottom: 5px; padding: 15px; border-radius: 3px; border-top-left-radius: 0px; border-top-right-radius: 0px; border: solid 1px grey; }
/*#combobox_jeu { width: 100%; }
#combobox_famille { width: 100%; }*/
#combobox_famille > option span:first-of-type {	color: red; }
.r_left { color: red; }
.dialog > .ui-tabs-nav { border: 0; background: white; }
.dialog > .ui-tabs-nav li { border-width: 1px; }
.dialog, #dialog-famille, #dialog-famille-creer { display: none; }
.dialog tr > td { padding: 3px; }
.dialog tr > td { text-align: right; }


/*.dialog label:not(.label_choice):not(.error):not(.label_not) { display: block; border: solid 1px grey; background-color: #f2f2f2; border-radius: 3px; text-align: right; padding: 8px; margin-bottom: 5px; color: black; }*/
.dialog label:not(.label_choice):not(.error):not(.label_not) { display: block; /*border: solid 1px grey; background-color: #f2f2f2;*/ border-radius: 3px; text-align: right; padding: 5px; color: black; }

/*.dialog legend { border: solid 1px grey; background-color: grey; color: white; padding: 4px; }*/ /* V2 */
.dialog legend { border: solid 1px grey; background-color: grey; color: white; padding: 8px; border-radius: 5px; width: 98%; font-weight: bold; }
.legend { padding: 10px; display: inline-block; float: left; }

/*.dialog label { display: flex !important; align-items: center; }*/
.dialog > label { display: block !important; align-items: center; }
.dialog label > div { margin: 3px; }
.dialog label > div:first-child { flex: 40%; text-align: left !important; padding-left: 2px; padding-bottom: 5px; font-weight: bold; }
.dialog label > div:nth-child(2) { flex: 60%; text-align: right !important; }
.dialog label > div:nth-child(2) input[type=text]:not(.input_not) { width: 95%; }
.dialog label > div:nth-child(2) input[type=number]:not(.input_not) { width: 95%; }
.dialog label > div:nth-child(2) input[type=email]:not(.input_not) { width: 95%; }
.dialog label > div:nth-child(2) input[type=tel]:not(.input_not) { width: 95%; }

.dialog fieldset { background: #f0f0f0; margin: 10px; }

/*label > span:first-child { float: left; padding: 5px; }*/
.dialog input[type=text]:not(.input_not),
.dialog input[type=number]:not(.input_not),
.dialog input[type=password]:not(.input_not),
.dialog input[type=email]:not(.input_not),
.dialog input[type=tel]:not(.input_not) { border: 0 !important; outline: none !important; box-shadow: none !important; line-height: 30px; height: 30px; background-color: #ddd; border-radius: 4px; padding: 5px 1px 3px 5px; }
.ui-selectmenu-button.ui-button { width: auto; }
.table_normal { border: solid 1px grey !important; margin: 2px !important; }
.table_normal td { height: 16px !important; padding: 3px !important; border-bottom: solid 1px grey !important; color: black !important; }
.table_normal td > td:first-of-type { background-color: #f2f2f2 !important; border-bottom: solid 1px grey !important; }
.table_normal input[type=text] { display: block !important; border: solid 0px #bebebe; padding: 3px !important; margin: 0 !important; border-bottom: dotted 1px #aeaeae; }
.jeux_image_thumb { border: solid 1px black; float: left; padding-left: 0 !important; margin: 2px; }
.jeux_image_thumb div { background-color: black; color: white; font-weight: bold; min-width: 200px; max-width: 200px; }
.jeux_image_thumb div > span { background-color: black; color: yellow; }
.jeux_image_thumb img { margin: 0; padding: 0; }
.table_normal .title { background-color: #f2f2f2 !important; }
.table_pieces { border: 0 !important; margin: 2px !important; border-spacing: 0 6px; border-collapse: separate; color: black !important; }
.table_pieces td > td:first-of-type { background-color: #f2f2f2 !important; border-bottom: 0 !important; color: black !important; }
.pieces td { padding: 5px !important; border: dotted 1px #4aa8db !important; border-bottom: solid 1px #4aa8db !important; border-left: solid 1px #4aa8db !important; background-color: aliceblue; }
.table_pieces td > textarea { margin-top: 4px; }
.jeux_piece_quantite { text-align: right; border: solid 1px grey !important; width: 70px; height: 35px; font-size: 23px !important; padding: 6px; }
.table_membres {
	border: 0 !important;
	margin: 2px !important;
    /*border-spacing: 0 6px;*/
    /*border-collapse: separate;*/
    color: black !important;
	border: solid 1px grey !important;
}
.table_membres td {
    padding: 5px !important;
    border: solid 1px grey !important;
    border-bottom: solid 2px grey !important;
    border-left: solid 2px grey !important;
}
.table_membres td > input[type="text"]:not(.input_not) {
    width: 98%
}
.membre_head td {
    border: 0 !important;
	background: grey; color: white;
	
}
.supprimer_piece, .supprimer_membre { padding: 11px; padding-left: 14px; padding-right: 14px; color: darkslategrey; }
.supprimer_piece:hover, .supprimer_membre:hover { color: indianred; }
.stats_view {
    color: mistyrose !important;
    font-size: 17px;
    float: right;
}
.stats_view:hover { color: blue !important; }
.stats { /*font-size: 12px;*/ width: 100%; }
.stats td { border: solid 1px grey; }
/*.stats tr:first-child { background-color: gray; }*/
.stats tr:hover { background-color: beige; }
.stats thead { background-color: #a1a1a1; }
.stats_altern_bg { background-color: white; }
/*.stats_altern_bg { background-color: linen; }*/
.statsTop {
    width: 100%;
    border-spacing: 0 6px;
    border-collapse: separate;
}
.statsTop tr:hover td {
    background-color: azure;
    color: blue;
}
.statsTop td:nth-child(1) {
    background-color: skyblue;
    color: white;
    font-weight: bold;
    font-size: 25px;
}
.statsTop td {
    padding: 5px !important;
    border-top: solid 2px skyblue;
    text-align: center;
    background-color: aliceblue;
    font-weight: bold;
    font-family: Verdana !important;
}
.compteurs label {
    float: left;
    margin: 4px;
    padding: 4px;
    padding-right: 10px;
    padding-left: 10px;
    color: white;
    font-family: Verdana !important;
    border-radius: 10px;
    font-size: 1.1em;
}
.compteurs > label > span {
    font-weight: bold;
    display: block;
    text-align: center;
    background-color: white;
    color: darkblue;
    margin-top: 4px;
    margin-bottom: 4px;
}
.compteurs > label:hover > span { color: darkred; }
.compteurs_adherents { background-color: #4CAF50; border: black; }
.compteurs_jeux { background-color: #4aa8db; border: black; }
.compteurs_emprunts { background-color: #dfb83f; border: black; }
.compteurs_catalogue  { background-color: #ffa500; border: black; }
.compteurs_warning  { background-color: coral; border: black; }
.error { color: red; }
.success { color: #4CAF50; }
.results {
	margin: 5px;
	padding: 10px;
}
.results div {
	display: inline;
	padding: 8px;
}
.success div {
	border: dotted 1px #4CAF50;
	border-left: solid 5px #4CAF50;
}
.error div { border: dotted 1px red; }
.modifier_membre_success {
	display: block;
	color: green;
	padding: 4px;
	text-align: center;
}
.ajouter_membre { padding: 10px; width: 25%;}
#membres_bottom td { text-align: right !important; border: 0 !important; }
/*.membre td { border: solid 1px grey !important; }*/
#emprunts_actuels {
    width: 100%;
	border: solid 1px #c4392d;
}
.emprunts_actuels_date {
	background-color: #c4392d;
	color: white;
	border-bottom: dotted 1px white;
    padding: 4px;
}
.emprunts_actuels_date_retour {
	color: black;
	font-size: 20px;
}
.emprunts_actuels_date_ok {	color: green; }
.emprunts_actuels_date_auj { color: #996600; }
.emprunts_actuels_date_retard { color: red; }
.emprunts_actuels_famille {
	/*border-top: solid 1px #c4392d;*/
    padding-top: 5px;
    padding-bottom: 4px;
}
.emprunts_actuels_famille span {
	background-color: #fdd3d3;
    padding: 5px;
}
.emprunts_actuels_item td {
	padding: 5px;
	padding-left: 25px;
	border-top: dotted 1px grey;
    cursor: pointer;
}
.emprunts_actuels_item:hover { font-weight: bold; }
.emprunts_actuels_item:hover { background-color: #fdd3d3; }
#table_caisse {
    width: 100%;
	border: solid 1px grey;
}
#table_caisse tr:hover td {
	background-color: blanchedalmond;
    color: black;
}
#table_caisse td {
	min-width: 1px;
	border-top: solid 1px grey;
	border-left: solid 1px grey;
	padding: 4px;
}
.date_caisse {
	background-color: grey;
	color: white;
}
.caisse_encaisse, .caisse_total, .caisse_total_label {
	text-align: right;
	font-family: Arial;
}
.caisse_type {
	text-align: center;
	color: #1f1f1f;
	font-size: 14px;
}
.caisse_autre, .caisse_total_label {
	font-size: 15px;
	color: grey;
}
.caisse_total {
	font-weight: bold;
	background-color: #eeeeee;
	padding: 3px;
}
.caisse_total_label { color: black; }
.familles_membres_nom, .familles_membres_prenom, .membre_date { border: solid 1px grey; padding: 5px; }
.membre input[type=checkbox] { transform: scale(1.8); }
.familles_membres_nom {text-transform:uppercase;}
#familles_membres { width: 100%; }
#familles_membres td { text-align: left; }
a#lien_liste_emprunts {
    display: inline-block;
    padding: 6px;
    margin-left: 8px;
    color: black;
    border: solid 1px #4CAF50;
    text-decoration: none;
}
a#lien_liste_emprunts:hover { background-color: floralwhite; }

.list_action_custom_green { display: inline-block; padding: 7px; margin-left: 8px; margin-top: 2px; color: black;  border: solid 1px #4CAF50; text-decoration: none; background-color:floralwhite; font-family: Verdana; }
.list_action_custom_green:hover { background-color: darkseagreen; }
.list_action_custom_green a:hover { color: green !important; }

.list_action_custom_blue { display: inline-block; padding: 7px; margin-left: 8px; margin-top: 2px; color: black;  border: solid 1px #4aa8db; text-decoration: none; background-color:#floralwhite; font-family: Verdana; }
.list_action_custom_blue:hover { background-color: #cfebf7; }
.list_action_custom_blue a:hover { color: #cfebf7 !important; }

.list_action_custom_orange { display: inline-block; padding: 7px; margin-left: 8px; margin-top: 2px; color: black;  border: solid 1px #dfb83f; text-decoration: none; background-color:floralwhite; font-family: Verdana; }
.list_action_custom_orange:hover { background-color: #ffedcc; }
.list_action_custom_orange a:hover { color: orange !important; }

.list_action_link_green { display: inline-block; padding: 10px; margin-left: 8px; background-color: darkseagreen; color: white !important; border: solid 1px grey; border-radius:6px; text-decoration: none;  font-family: Verdana; border-right-width: 2px; border-bottom-width: 2px; }
.list_action_link_green:hover { background-color: #4CAF50; color: black !important; }

.list_action_link_blue { display: inline-block; padding: 10px; margin-left: 8px; background-color: #4aa8db; color: white !important; border: solid 1px grey; border-radius:6px; text-decoration: none;  font-family: Verdana; border-right-width: 2px; border-bottom-width: 2px; }
.list_action_link_blue:hover { color: black !important; }

.list_action_link_orange { display: inline-block; padding: 10px; margin-left: 8px; background-color: #dfb83f; color: white !important; border: solid 1px grey; border-radius:6px; text-decoration: none;  font-family: Verdana; border-right-width: 2px; border-bottom-width: 2px; }
.list_action_link_orange:hover { color: black !important; }

#date_caisse { }
.liste th {	background: solid 1px #4CAF50 !important; }
.liste td { background: white !important; }
.liste tr:hover > td { background: #ddf9dd !important; cursor: pointer; color: green; }
#liste_emprunts tr:hover > td, #liste_emprunts-historique tr:hover > td { background: #ffedcc !important; cursor: pointer; color: black; }
#liste_jeux tr:hover > td, #liste_jeux_modif tr:hover > td { background: #cfebf7 !important; cursor: pointer; color: blue; }

.liste_emplacement { display: inline-block; color: #eee; }
.emplacement { text-align: center; }
.liste tr:hover > td > div > .liste_emplacement { display: inline-block; color: orange; }

.list_numero_jeux, .list_numero_jeux_modif { padding: 4px; background: skyblue; border-radius: 6px; max-width: 110px; }
.list_numero_adherents_familles, .list_numero_adherents_membres { padding: 4px; background: #a6f1a6; border-radius: 6px; }
.list_numero_adhesions-actives, .list_numero_adhesions, .list_numero_benevoles, .list_numero_caisse { padding: 4px; background: #a6f1a6; border-radius: 6px; width: 110px; }
.list_numero_emprunts { padding: 4px; background: #a6f1a6; border-radius: 6px; width: 110px; }
.list_numero_emprunts_jeux { padding: 4px; background: skyblue; border-radius: 6px; width: 110px; }


.dataTables_filter { float: left !important; margin-top: 2px; margin-bottom: 2px; border: solid 1px #4CAF50; padding: 8px; }
.dataTables_filter > label > input { height: 30px !important; line-height: 25px !important; font-size: 25px !important;	 color: red !important; }
.contenu_blue > .part_wrapper > .part > .dataTables_wrapper > .dataTables_filter { border: solid 1px #4aa8db; float: left !important; margin-top: 2px; margin-bottom: 2px; padding: 8px; }
.contenu_orange > .part_wrapper > .part > .dataTables_wrapper > .dataTables_filter { border: solid 1px #dfb83f; float: left !important; margin-top: 2px; margin-bottom: 2px; padding: 8px; }

.dt-buttons { border: solid 1px #4CAF50; float: right !important; margin-top: 2px; margin-bottom: 2px; padding: 5px !important; padding-top: 8px !important; padding-bottom: 1px !important; }
.contenu_blue > .part_wrapper > .part > .dataTables_wrapper > .dt-buttons { border: solid 1px #4aa8db !important; float: right !important; margin-top: 2px; margin-bottom: 2px; padding: 5px !important; padding-top: 8px !important; padding-bottom: 1px !important; }
.contenu_orange > .part_wrapper > .part > .dataTables_wrapper > .dt-buttons { border: solid 1px #dfb83f !important; float: right !important; margin-top: 2px; margin-bottom: 2px; padding: 5px !important; padding-top: 8px !important; padding-bottom: 1px !important; }
.dt-buttons > button { padding: 2px !important; min-width: 38px; }
.dt-buttons > button > span { }

.dataTables_length { padding: 12px; border: solid 1px #4CAF50; margin: 2px; }
.contenu_blue > .part_wrapper > .part > .dataTables_wrapper > div > .dataTables_length { padding: 12px; border: solid 1px #4aa8db !important; margin: 2px; }
.contenu_orange > .part_wrapper > .part > .dataTables_wrapper > div > .dataTables_length { padding: 12px; border: solid 1px #dfb83f !important; margin: 2px; }


td.details-control { background: url('images/details_open.png') no-repeat center center; cursor: pointer; }
tr.shown td.details-control { background: url('images/details_close.png') no-repeat center center; }
.shown { background-color: blue; }
.loginForm { padding: 0; margin: 0; }
.loginForm input { margin: 2px; margin-top: 5px; padding: 6px; font-size: 20px; }
.step { border-color: #dfb83f; background-color: #dfb83f; color: white; border-radius: 50%; padding: 4px 7px 4px 7px; font-family: Arial; }
.step_red2 { border-color: #9e7a6e; background-color: #9e7a6e; color: white; border-radius: 50%; padding: 4px 7px 4px 7px; font-family: Arial; }
.fieldset { width: 100%; }
fieldset > legend { background-color: grey; color: white; padding: 4px; }
#jeu_nom { text-transform: uppercase; }
.jeu_etat_ok { background-color: green !important; }
.jeu-rentrer td { padding: 10px !important; }
.famille_link { cursor: pointer; }
#configList tr { border: solid 1px #bebebe; }
#configList td { padding: 5px; }
#configList button { margin: 0; }
#userUpdate, #emailUpdate {
    display: none;
    background-color: blanchedalmond;
}
#updateUser, #updateEmail {
    color: red;
    font-weight: bold;
}
.rowAlert1 td {
    background-color: tomato;
    font-weight: bold;
}
.rowAlert2 td { background-color: lemonchiffon; }
.rowTotal td { background-color: #eeeeee !important; }
.rowTotal td:first-child { text-align:right; }
.rowTotal td:nth-child(3) { font-weight: bold; }
.fa-layers-counter { font-size: larger; }
.print_item, .print_only { display: none; }
.emprunt_jeu_nom {
	padding: 8px; color: black; font-size: 20px; font-weight: bold;
}
.emprunt_jeu_fabricant { 
	font-style: italic;
	padding: 4px;
	color: white;
	background: grey;
	border-radius: 5px;
}
.line {
    width: 100%;
    height: 300px;
}
.col {
    float: left;
    padding: 20px;
}
/**TEST*/
.left {
  width: 48%;
  float:left;
  min-height:30px;
  margin-right: 10px;
}
.left1e {
  width: 60%;
  float:left;
  min-height:30px;
  margin-right: 10px;
}
.left2e {
  width: 20%;
  float:left;
  min-height:30px;
  margin-right: 10px;
}
.clear { clear:both; }
.cont { padding: 3px; }
/**!TEST*/
.custom-combobox {
    position: relative;
    display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}
.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
}
.ui-draggable, .ui-droppable { background-position: top; }
/******* !contenu ********/
#upload{
    font-family:'PT Sans Narrow', sans-serif;
    background-color:#373a3d;
    background-image:linear-gradient(top, #373a3d, #313437);
    width:250px;
    padding:30px;
    border-radius:3px;
    margin:200px auto 100px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#drop{
    background-color: #2E3134;
    padding: 40px 50px;
    margin-bottom: 30px;
    border: 20px solid rgba(0, 0, 0, 0);
    border-radius: 3px; border-image: url('images/border-image.png') 25 repeat;
    text-align: center; text-transform: uppercase; font-size:16px; font-weight:bold; color:#7f858a;
}
#drop a{ background-color:#007a96; padding:12px 26px; color:#fff; font-size:14px; border-radius:2px; cursor:pointer; display:inline-block; margin-top:12px; line-height:1; }
#drop a:hover{ background-color:#0986a3; }
#drop input{ display:none; }
#upload ul{ list-style:none; margin:0 -30px; border-top:1px solid #2b2e31; border-bottom:1px solid #3d4043; }
#upload ul li{ background-color:#333639; background-image:-webkit-linear-gradient(top, #333639, #303335); background-image:-moz-linear-gradient(top, #333639, #303335); background-image:linear-gradient(top, #333639, #303335); border-top:1px solid #3d4043; border-bottom:1px solid #2b2e31; padding:15px; height: 52px; position: relative; }
#upload ul li input{ display: none; }
#upload ul li p{ width: 144px; overflow: hidden; white-space: nowrap; color: #EEE; font-size: 16px; font-weight: bold; position: absolute; top: 20px; left: 100px; }
#upload ul li i{ font-weight: normal; font-style:normal; color:#7f7f7f; display:block; }
#upload ul li canvas{ top: 15px; left: 32px; position: absolute; }
#upload ul li span{ width: 15px; height: 12px; background: url('images/icons.png') no-repeat; position: absolute; top: 34px; right: 33px; cursor:pointer; }
#upload ul li.working span{ height: 16px; background-position: 0 -12px; }
#upload ul li.error p { color:red; }
#upload_pres legend, #upload_images legend, #upload_files legend { }
.dropzone .dz-preview.dz-error .dz-error-mark { background-color: red; top: 25px; }
.dz-preview, .dz-preview dz-file-preview dz-processing dz-success dz-complete, .dz-preview dz-file-preview dz-complete { border: solid 1px grey !important; border-radius: 20px !important; }
.dz-remove { padding-top: 5px !important; padding-bottom: 5px !important; color: darkred !important; display: block; font-size: 16px !important; }
.dz-remove:hover { background-color: red; color: white !important; }
.dz-download { padding-top: 5px !important; padding-bottom: 5px !important; text-align: center; font-size: 14px; display: block; cursor: pointer !important; color: cornflowerblue !important; border: none; font-size: 16px !important; }
.dz-download:hover { background-color: cornflowerblue; color: white !important; border-radius: 0 0 18px 18px !important; margin: 0 !important; }
.dz-title { padding: 10px; margin-bottom: 8px; color: black !important; border-bottom: solid 1px grey !important; border-radius: 18px 18px 0 0 !important; background-color: dodgerblue; color: white !important; }
.dz-title a { color: white !important; cursor: pointer !important; text-decoration: none; }
.dz-title a:hover { text-decoration: underline; }
.dz-title div { text-align: center; font-size: 14px; }
.no-close .ui-dialog-titlebar-close { display: none; }
.ui-dialog-titlebar-close { display: none !important; }
.pub_active { color: green !important; font-weight:bold; }
.pub_inactive { color: red !important; font-weight:none; }
.catalogue_list { width: 100%; }
.catalogue_list td { border: solid 1px grey; }
.retour_line:hover { background-color: #dedede; }
.configuration_creneaux { width: 100%; }
.configuration_creneaux h4 { background: #c0c0c0; }
.nouveau_creneau { border: solid 1px grey; }
.nouveau_creneau td { padding: 5px; }
.creneau:hover { cursor: pointer; color: red; }
.creneau:hover:before { content: 'Supprimer '; }
.creneau_reserve:hover { cursor: pointer; color: red; }
.creneau_reserve:hover:before { content: 'Annuler '; }
.tablecolumn { float: left; width: 50%; }
.tablerow:after { content: ""; display: table; clear: both; }
.reserv_ko { color: green !important; }
.reserv_ok { color: red !important; }
.reserv_ok:hover { text-decoration: none; color: red !important; }
.reserv_ko:hover { text-decoration: none; color: green !important; }
#reserver_creneau { width:100%; margin-top:4px; background:antiquewhite; border: solid 1px darkorange; }
#reserver_creneau:hover { background:darkorange; color: white; }
.membre_actif_email { display: none; }
#table_votes, #table_candidats  { width: 100%; margin-bottom: 10px; }
#table_votes tr, #table_candidats tr { border: solid 1px grey; }
#table_votes td { padding: 14px; }
#table_candidats td { padding: 5px; }
#table_candidats tr:hover { background: #dedede; } 
.table_vote td { padding:8px; }
.electionMember { cursor: pointer; }
.configuration_liens  { margin: 5px; }
.configuration_liens a { padding: 6px; border: solid 1px grey; border-radius: 4px; margin-right: 10px; display: block; float:left; text-decoration: none; }
.configuration_liens a:hover { color: white !important;  background: grey; }
.electionDetails { width: 100%; }
.electionDetails tr:hover { background: #cecece; }
.electionDetails td { border: solid 1px black; text-align: center; }
.vote_admin:hover { background:black; color:white !important; }
#recherche_jeu_tags { max-width: 675px; }
.table_click { cursor: pointer; }
.table_click:hover { color: orange; }
.last_items_blue, .last_items_green { padding-left:5px;margin-top:5px;width:100%;text-align:center; }
.last_items_blue tr:hover { background:#c8e4f4 !important; }
.last_items_green tr:hover { background:#b7dfb9 !important; }
.membre_sexef, .membre_sexem, .membre_sexef_label, .membre_sexem_label { display:inline !important; }
.ui-checkboxradio-label.ui-corner-all.ui-button.ui-widget.ui-checkboxradio-checked.ui-state-active.membre_sexe { background: #003eff; !important; color: white !important; }
.evenements { width: 100%;  }
.evenements td { border: solid 1px #bebebe; padding:9px; }
.evenements tr:hover { }
.evenement_parcicipants { width: 100%; border: 0; }
.evenement_parcicipants td { border: 0; border-bottom: solid 1px #cecece; padding: 3px; }
.evenement_parcicipants tr:hover { background: #dedede; }
.evenement_parcicipants_total td { border: 0; }
.event_comment { white-space: nowrap; overflow:hidden; width: 99%; }
.event_creneau_add, .event_link_add_participant { color: chocolate; }
.event_modifier { color: black; text-transform: uppercase; }
.event_creneau_add:hover, .event_modifier:hover, .event_link_add_participant:hover { cursor: pointer; color: red; }
.event_action { color: chocolate !important; }
.event_action:hover { cursor: pointer; color: red !important; }
.dataTable th { font-family: Arial; }

.ui-dialog-contain { width: 92.5%; max-width: 1280px; margin: 0 0 0 0 !important; padding: 0; position: relative; top: -15px; }
.ui-dialog { z-index: 1000 !important ;}

#famille_info_emprunts { font-weight:bold; }
#famille_info_emprunts .emprunt_ok_ { padding: 9px; background: #feebeb; border: solid 1px red; }
#famille_info_emprunts .emprunt_ok_1 { padding: 9px; background: #ddf9dd; border: solid 1px green; }
#famille_info_emprunts .emprunt_ok_ .count { color: red; }
#famille_info_emprunts .emprunt_ok_1 .count { color: green; }

#jeu_emplacement { padding: .5em 1em; border: solid 1px #4aa8db; color: #4aa8db; }

.ui-dialog { left: 0 !important; }

#sumbit_comment { padding: 7px 15px 7px 15px; }
.commentaires_adhesions  { width: 100%; margin-left: auto; margin-right: auto; }
.commentaires_adhesions thead th { border-bottom: solid 1px grey; padding: 10px !important; }
.commentaires_adhesions tbody td { border-bottom: solid 1px grey; }
.commentaires_adhesions tbody td:nth-child(3) { display: flex; }
blockquote { position: relative; background: #fefefe; padding: 30px 40px; margin: 15px; margin-left: 0; width: 85%; }
blockquote p { margin: 0; }
blockquote:before {
  position: absolute;
  top: 15px;
  left: 15px;
  content: "\f10d";
  font-family: 'Font Awesome 5 Free';
  font-size: 15px;
  color: #999;
  font-weight: 900;
}
blockquote:after {
  position: absolute;
  bottom: 15px;
  right: 15px;
  content: "\f10e";
  font-family: 'Font Awesome 5 Free';
  font-size: 15px;
  color: #999;
  font-weight: 900;
}
.supprimer_commentaire_adhesion { height: 45px; margin: auto; padding: 10px; }

/*.top_header {
    border: solid 1px grey;
    border-bottom: 0;
    font-family: 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-radius: 6px 6px 0 0;
}*/
/*
.top_header {
    position: fixed;      
    top: 0;               
    left: 0;
    right: 0;
    z-index: 1000;         
    background: #ffffff;   
    border-bottom: 1px solid grey;
    font-family: 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.top_header .header_left {
    display: flex;
    align-items: center;
}

.top_header .header_right {
    display: flex;
    align-items: center;
}

.top_header .dev_label {
    background: orange;
    color: white;
    padding: 15px;
    font-size: 1.2em;
    margin-right: 15px;
}

.top_header .link_item {
    margin-left: 15px;
}

.top_header .link_item a {
    font-size: 1.1em;
    text-decoration: none;
    padding: 12px;
    border-radius: 6px;
}

.top_header .link_item a:hover {
    text-decoration: none;
    cursor: pointer;
    background: #f0f0f0;
}

.top_header .menud_wrapper {
    margin-left: 15px;
    position: relative;
}

.top_header .user_session, .top_header .menud {
    display: inline-block;
    position: relative;
    padding: 12px 15px;
    border-radius: 6px;
}

.top_header .user_session:hover, .top_header .menud:hover {
    cursor: pointer;
    background: #f0f0f0;
}

.top_header .account_menu, .top_header .menud_links {
    display: none;
    position: absolute;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    min-width: 160px;
    margin-top: 5px;
    text-align: left;
    z-index: 10;
}

.top_header .account_menu a, .top_header .menud_links a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
}

.top_header .account_menu a:hover, .top_header .menud_links a:hover {
    background: #f0f0f0;
}*/

/* ===== Top Header ===== */
.top_header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #ffffff;
    border-bottom: 1px solid grey;
    font-family: 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Zone gauche (logo + DEV) */
.top_header .header_left {
    display: flex;
    align-items: center;
}

.top_header .dev_label {
    background: orange;
    color: white;
    padding: 15px;
    font-size: 1.2em;
    margin-left: 10px;
}

/* Zone droite (liens et menus) */
.top_header .header_right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Liens */
.top_header .link_item {
    margin-left: 15px;
}
.top_header .link_item a {
    font-size: 1.1em;
    text-decoration: none;
    padding: 12px;
    border-radius: 6px;
    color: black;
}
.top_header .link_item a:hover {
    background: #f0f0f0;
    cursor: pointer;
}

/* Menu wrapper */
.top_header .menud_wrapper {
    margin-left: 15px;
    position: relative;
}

/* Boutons utilisateur / configuration */
.top_header .user_session, .top_header .menud {
    display: inline-block;
    position: relative;
    padding: 12px 15px;
    border-radius: 6px;
}
.top_header .user_session:hover, .top_header .menud:hover {
    background: #f0f0f0;
    cursor: pointer;
}

/* Menu déroulant */
.top_header .account_menu, .top_header .menud_links {
    display: none;
    position: absolute;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    min-width: 160px;
    margin-top: 5px;
    text-align: left;
    z-index: 10;
    max-width: 90vw;
    overflow: hidden;
    word-wrap: break-word;
}

/* Afficher au clic */
.top_header .account_menu.open, 
.top_header .menud_links.open {
    display: block;
}

/* Liens dans les menus */
.top_header .account_menu a, .top_header .menud_links a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
}
.top_header .account_menu a:hover, .top_header .menud_links a:hover {
    background: #f0f0f0;
}

/* Responsive général */
@media (max-width: 768px) {
    body {
        padding-top: 135px;
    }
    .top_header {
        flex-direction: column;
        align-items: flex-start;
        padding: 5px 10px;
    }
    .top_header .header_right {
        width: 100%;
    }
    .top_header .link_item,
    .top_header .menud_wrapper,
    .top_header .dev_label {
        margin-left: 0;
        margin-top: 5px;
    }

    /* Menu déroulant mobile */
    .top_header .account_menu,
    .top_header .menud_links {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        min-width: auto;
        max-width: 100vw;
        border-radius: 0;
        margin: 0;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
}

/* Mode compact pour très petit écran */
@media (max-width: 480px) {
    body {
        padding-top: 115px;
    }

    /* Masquer texte */
    .top_header .link_item a span,
    .top_header .menud span,
    .top_header .user_session span {
        display: none;
    }

    /* Réduire padding */
    .top_header .link_item a,
    .top_header .menud,
    .top_header .user_session {
        padding: 12px 8px;
    }

    /* Monter icônes */
    .top_header .link_item a i,
    .top_header .menud i,
    .top_header .user_session i {
        font-size: 1.4em;
        vertical-align: middle;
    }
}
.ligne_click { cursor: pointer; }