/***** CSS_BOUTONS.css *****/
/***************************/
/*** Doc dans CSS_documentation.css 


https://www.w3schools.com/css/css3_buttons.asp
https://developer.mozilla.org/fr/docs/Web/CSS/box-shadow

	.button
		border: 0;						(pas de bordure)
		border: 2px solid blue; 
		line-height: 1.8;			(interligne ou ligne de base ?)
		padding: 0 20px;			(remplissage ?)
		font-size: .9rem;			(taille du texte)
		text-align: center;
		color: white;					(Couleur du texte)
		width: px ou %					(force une largeur de bouton indép. du texte)
		height: px ou %				(force une hauteur de bouton indép. du texte)
		margin:							(marge entre )
		text-shadow: 1px 1px 1px #000;	(ombrage)
		border-radius: 10px;		(coins arrondis)
		background-color: rgba(220, 0, 0, 1);	(couleur de fond)
		background-color: green;					(couleur de fond)
		background-image: 
		linear-gradient(to top left,
			rgba(0, 0, 0, .2),
			rgba(0, 0, 0, .2) 30%,
			rgba(0, 0, 0, 0));
		box-shadow:					(ombrage du bouton)
			inset 2px 2px 3px rgba(255, 255, 255, .6), (inset effet d'enfoncement)
			inset -2px -2px 3px rgba(0, 0, 0, .6);
			
		transition-duration: 0.4s; (durée de transition pour :hover)
		cursor: pointer;
		
	:hover
		background-color: white;			(caractéristiques ... 
		color: black;  						...au passage...
		border: 2px solid green;			... de la souris)
		
	.disabled {
	  opacity: 0.6;
	  cursor: not-allowed;
	}
		<button class="button">Normal Button</button>
		<button class="button disabled">Disabled Button</button>
Grouper des boutons H
	.buttonV {
		float: left;
	}
Grouper des boutons V
	.buttonH {
		display: block;
	}
Border des groupes de boutons
		Pas bien compris
		
Il y en a d'autres.

***/

:root { /* Variable CSS */
	--body_lst_BR_Color: goldenRod; /* Couleur de fond du body de la page */
	--body_erreur_Color: red; /* Couleur de fond du body de page d'erreur */
	--trColor: #FFCC66;
	--trColor2: #FFD966;
	--tdColor1: #FFCC66;
	--tdColor2: #FFD966;
	--tdColorImportant: #FFDD66;
	--tdColorImportant2: #FFAE66;
	--tdColorTravaux: black;
	--RNtxt1RN: 	 #000065; /* Couleur de texte1 pour RN */
	--RNtxt1Pirates: #500065; /* Couleur de texte1 pour Pirates */
	--RNtxt1Patrons: #500095; /* Couleur de texte1 pour Patrons */
	--RNbodyEquipes: rgba(20, 60, 120, 2); /* Bleu profond gwada */
}

/*** CURSORS ***/
/***======== ***/
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}

/*** BOUTONS ***/
/*=============*/

/* Bouton VOTE */
/* ----------- */
.button_vote_styled {
    border: 0;
    line-height: 1.8; /* hauteur du bouton */
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: purple; /*rgba(220, 0, 0, 1);*/
    background-image: 
		linear-gradient(to top left,
			rgba(0, 0, 0, .2),
			rgba(0, 0, 0, .2) 30%,
			rgba(0, 0, 0, 0));
    box-shadow: 
		inset 2px 2px 3px rgba(255, 255, 255, .6),
		inset -2px -2px 3px rgba(0, 0, 0, .6);
}

.button_vote_styled:hover {
    background-color: maroon; /*rgba(255, 0, 0, 1);*/
}

.button_vote_styled:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/* Bouton ENREGISTRER */
/* ------------------ */
.bouton_enregistrer {
    border: 0;
    line-height: 1.8; /* hauteur du bouton */
    padding: 0 20px;
    font-size: .9rem;
    text-align: center;
    color: white; /* Couleur du texte */
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: green; /* couleur de fond */
    background-image: 
		linear-gradient(to top left,
			rgba(0, 0, 0, .2),
			rgba(0, 0, 0, .2) 30%,
			rgba(0, 0, 0, 0));
    box-shadow: 
		inset 2px 2px 3px rgba(255, 255, 255, .6),
		inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_enregistrer:hover {
    background-color: lime;
}
.bouton_enregistrer:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/* Bouton EFFACER */
/* -------------- */
.bouton_effacer {
    border: 0;
    line-height: 1.8; /* hauteur du bouton */
    padding: 0 20px;
    font-size: .9rem;
	font-style: italic;
    text-align: center;
    color: black; /* Couleur du texte */
    text-shadow: 1px 1px 1px grey;
    border-radius: 10px;
    background-color: white; /* couleur de fond */
    background-image: 
		linear-gradient(to top left,
			rgba(0, 0, 0, .2),
			rgba(0, 0, 0, .2) 30%,
			rgba(0, 0, 0, 0));
    box-shadow: 
		inset 2px 2px 3px rgba(255, 255, 255, .6),
		inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_effacer:hover {
    background-color: silver;
}
.bouton_effacer:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/* Bouton QUITTER */
/* -------------- */
.bouton_quitter {
    border: 0;
    line-height: 1.8; /* hauteur du bouton */
    padding: 0 20px; /* remplissage ? */
    font-size: .9rem; /* taille du texte */
    text-align: center;
    color: white; /* Couleur du texte */
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px; /* coins arrondis */
    background-color: rgba(220, 0, 0, 1); /* couleur de fond */
    background-image: 
		linear-gradient(to top left,
			rgba(0, 0, 0, .2),
			rgba(0, 0, 0, .2) 30%,
			rgba(0, 0, 0, 0));
    box-shadow: /* ombrage du bouton */
		inset 2px 2px 3px rgba(255, 255, 255, .6),
		inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_quitter:hover {
    background-color: #FF00FF; /*fuchsia;*/
}
.bouton_quitter:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/* Boutons PIRATE */
/* -------------- */
.bouton_pirate_attente {
	border: 0;
	line-height: 1.6;
	width: 150px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: black;
	cursor: not-allowed;;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirate_attente:hover {
    background-color: white;
	 font-style: italic;
}
.bouton_pirate_attente:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/**********************/
/*** bouton_pirate1 ***/ 
.bouton_pirate1 {
	border: 0;
	line-height: 1.6;
	width: 150px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: rgba(220, 20, 60, 1);
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirate1:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirate1:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}
/**********************/
/*** bouton_pirate2 ***/ 
.bouton_pirate2 {
	border: 0;
	line-height: 1.6;
	width: 150px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: rgba(20, 220, 60, 1);
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirate2:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirate2:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}
/**********************/
/*** bouton_pirate3 ***/ 
.bouton_pirate3 {
	border: 0;
	line-height: 1.8;
	width: 250px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: var(--RNbodyEquipes); /*rgba(20, 60, 120, 2); /*rgba(20, 220, 60, 2);*/
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirate3:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirate3:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}
/**********************/
/*** bouton_pirate4 ***/ 
.bouton_pirate4 {
	border: 0;
	line-height: 1.8;
	width: 150px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: var(--RNbodyEquipes); /*rgba(20, 60, 120, 2); /*rgba(20, 220, 60, 2);*/
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirate4:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirate4:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}
/**************************/
/*** bouton_pirate4_OCC ***/ 
.bouton_pirate4_OCC {
	border: 0;
	line-height: 1.8;
	width: 150px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: var(--RNbodyEquipes); /*rgba(20, 60, 120, 2); /*rgba(20, 220, 60, 2);*/
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
	-webkit-animation-name: TtextOccult; /*on affecte l'animation textOccult à notre bouton*/
	-webkit-animation-duration: 10s; /*on définit la durée de l'animation */
	-webkit-animation-iteration-count:infinite; /*on dit que l'animation se répétera à l'infini.*/
}

/**********************/
/*** bouton_pirate5 ***/ 
.bouton_pirate5 {
	border: 0;
	line-height: 1.8;
	width: 150px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: blue;
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirate5:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirate5:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/**********************/
/*** bouton_pirate6 ***/ 
.bouton_pirate6 {
	border: 0;
	line-height: 1.8;
	width: 150px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: lightBlue;
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirate6:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirate6:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}




/*****************/
/*** KeyFrames ***/
/*****************/
@keyframes TtextOccult {
	00%, 16% {opacity: 1;}
	16%, 32% {opacity: 1;}
   32%, 48% {opacity: 1}
   48%, 70% {opacity: 1;}
	70%, 90% {opacity: .6;}
	90%, 100% {opacity: .4;}
}


.bouton_pirate4_OCC:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirate4_OCC:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/**********************/
/*** bouton_pirate5 ***/ 
.bouton_pirate5 { 
	border: 0;
	line-height: 1.8;
	width: 150px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	font-weight: normal;
	text-align: center;
	color: #ffff50;
	/*color: #ff9696;*/
	text-shadow: 1px 1px 1px #000;
	border: 2px solid lightgrey;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: var(--RNbodyEquipes); /*rgba(20, 60, 120, 2); /*rgba(20, 220, 60, 2);*/
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirate5:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirate5:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/***************************/
/*** bouton_pirate50.... ***/ 
.bouton_pirate50blue, .bouton_pirate50green, .bouton_pirate50red, .bouton_pirate50grey {
	border: 0;
	line-height: 1.8;
	width: 190px;
	padding: 0 20px;
	font-size: .75rem; /* taille du texte */
	font-weight: normal;
	text-align: center;
	color: white; /*#ffff50;*/
	text-shadow: 1px 1px 1px #000;
	border: 2px solid lightgrey;
	border-radius: 5px 15px 0 5px;
	background-color: var(--RNbodyEquipes);
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirate50grey {
	color: black;
}
.bouton_pirate50green {
	background-color: green;
}
.bouton_pirate50red {
	background-color: red;
}
.bouton_pirate50grey {
	background-color: dimGray;
}
.bouton_pirate50blue:hover, .bouton_pirate50green:hover, .bouton_pirate50red:hover , .bouton_pirate50grey:hover {
    background-color: grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirate50blue:active, .bouton_pirate50green:active, .bouton_pirate50red:active, .bouton_pirate50grey:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}

/********************************/
/*** bouton_pirateEnregistrer ***/ 
.bouton_pirateEnregistrer {
	border: 0;
	line-height: 1.8;
	width: 170px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: green;
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirateEnregistrer:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirateEnregistrer:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}
/****************************/
/*** bouton_pirateAnnuler ***/
.bouton_pirateAnnuler {
	border: 0;
	line-height: 1.8;
	width: 170px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: orange;
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirateAnnuler:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirateAnnuler:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}
/****************************/
/*** bouton_pirateQuitter ***/ 
.bouton_pirateQuitter {
	border: 0;
	line-height: 1.8;
	width: 170px;
	padding: 0 20px;
	font-size: .8rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: rgba(220, 20, 60, 2);
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirateQuitter:hover {
    background-color: Grey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirateQuitter:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}


/**************************/
/*** bouton_pirateHrolf ***/ 
.bouton_pirateHrolf,  .bouton_pirateHrolf2{
	border: 0;
	line-height: 1.7;
	/*width: 100px;*/
	padding: 0 20px;
	font-size: .7rem; /* taille du texte */
	text-align: center;
	color: white;
	text-shadow: 1px 1px 1px #000;
	border-radius: 5px 15px 0 5px;
	/*border-radius: 10px;*/
	background-color: rgba(100, 20, 255, 2);
	/*background-color: rgba(200, 200, 255, 2);*/
	cursor: pointer;
	background-image: 
	linear-gradient(to top left,
		rgba(0, 0, 0, .2),
		rgba(0, 0, 0, .2) 30%,
		rgba(0, 0, 0, 0));
	box-shadow: 
	inset 2px 2px 3px rgba(255, 255, 255, .6),
	inset -2px -2px 3px rgba(0, 0, 0, .6);
}
.bouton_pirateHrolf2 {line-height: 1.8;}

.bouton_pirateHrolf:hover, .bouton_pirateHrolf2:hover {
    background-color: lightGrey; /*#FF00FF; /*fuchsia;*/
	 font-style: italic;
}
.bouton_pirateHrolf:active, .bouton_pirateHrolf2:active {
    box-shadow:
		inset -2px -2px 3px rgba(255, 255, 255, .6),
		inset 2px 2px 3px rgba(0, 0, 0, .6);
}


.voyantRond_baseChef {
	text-align: center;
	/*background: green;*/
	border-radius: 50%;
	width: 20px;
	height: 20px;
	border: 1px solid white;
	color: white;
}
.voyantRond_base {
	text-align: center;
	/*background: green;*/
	border-radius: 50%;
	width: 20px;
	height: 20px;
	border: 1px solid #679403;
	color: white;
	font-size: 10px;
}
.voyantRond_validé {
	text-align: center;
	background: green;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	border: 1px solid #679403;
	color: white;
	font-size: 10px;
}
.voyantRond_nonValidé {
	text-align: center;
	background: red;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	border: 1px solid #679403;
	color: white;
	font-size: 10px;
}
.voyantRond_inconnU {
	text-align: center;
	background: black;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	border: 1px solid lightGrey;
	color: white;
	font-size: 10px;
}





.b-group {
  cursor: progress; /*pointer;*/
  float: left;
}

.btn-group .button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
  float: left;
}

.btn-group .button:hover {
  background-color: #3e8e41;
}