/* ------ DEFINITIONS COULEURS -------------------------------------------------------------------------------- */
:root {
    --ngt-coul-texte:#000;
	--ngt-coul-fond:#FFF;
	--ngt-coul-bord:#AAA;
	--ngt-coul-fond-1:lightblue; 
	--ngt-coul-ombre:#555; /*ombre vignettes*/
	--ngt-coul-ombre-1:#666; /*ombre interne intercalaires*/
	--ngt-coul-bouton-texte:#000;
	--ngt-coul-bouton-fond:#DDD;
	--ngt-coul-bouton-bord:#999;
	--ngt-coul-menu-texte:#FFF;
	--ngt-coul-menu-fond:#005d8b;
	--ngt-coul-menu-fond-surligne:#369;
	--ngt-coul-menu-texte-fort:yellow;
	--ngt-coul-coll-surligne:yellow;
	--ngt-coul-admin-texte:#000;
	--ngt-coul-admin-texte-1:#333;
	--ngt-coul-admin-fond:#030;
	--ngt-coul-encode-fond:#119CAA;
	--ngt-coul-admin-fond-1:#360;
	--ngt-coul-admin-bord:#AAA;	
	--ngt-coul-admin-lien:darkorange;	
	--ngt-coul-pistes-face-fond:#AFA;
	--ngt-coul-pistes-numface-texte:green;	
	--ngt-coul-pistes-face-texte:#2095bb;
	--ngt-coul-pistes-fond:darkyellow;
	--ngt-coul-pistes-rech-texte:green;
	--ngt-coul-pistes-rech-fond:lightgreen;
	--ngt-coul-encode-liste-texte:orange;
	--ngt-coul-encode-liste-fond:#FFF;
	--ngt-coul-encode-liste-fond-1:#369;
	--ngt-coul-tag-texte:#000;
	--ngt-coul-tag-bord:#333;
	--ngt-coul-tag-fond:#FFF;
	--ngt-coul-tag-actif-texte:#111;
	--ngt-coul-tag-actif-bord:#333;
	--ngt-coul-tag-actif-fond:#67C3DF;
	--ngt-coul-tag-inactif-texte:#333;
	--ngt-coul-tag-inactif-bord:#666;
	--ngt-coul-tag-inactif-fond:#EEE;	
	--ngt-coul-detail-tags:orange;
	--ngt-coul-detail-rem-texte:blue;
	--ngt-coul-detail-rem-fond:lightblue;	
	--ngt-coul-rechav-texte:#000;
	--ngt-coul-rechav-fond:lightblue;
	--ngt-coul-rechav-fond-1:#DDD;
	--ngt-coul-rechav-bord:#333;
	--ngt-coul-rechav-surligne:yellow;
	--ngt-coul-rechav-result-texte:green;
	--ngt-coul-rechav-result-fond:lightgreen;	
}

/* ------ GENERAL -------------------------------------------------------------------------------- */
body {
  font-family: 'Rubik', serif;	
  margin:0px;
  padding:0px;
  background-color:var(--ngt-coul-fond);
  color:var(--ngt-coul-texte);
  scrollbar-color: var(--ngt-coul-ombre) var(--ngt-coul-fond) ;
}

textarea {
	margin-top:0.5em;
	margin-bottom:0.5em;
}

.ng-wait{
    animation:spin 4s linear infinite;
	image-rendering:pixelated;
}
@keyframes spin { 100% {transform:rotate(360deg);}}

INPUT.ng-inbu{
	background-color:var(--ngt-coul-bouton-fond);
	color:var(--ngt-coul-bouton-texte);
	border:1px solid var(--ngt-coul-bouton-bord);
	border-radius:50px;
	margin:0.5em;
}

/* ------ FLEXBOX - DISPOSITIONS GENERALES -------------------------------------------------------------------------------- */

.ng-flex-h{
	display:flex;
	flex-direction:row;
	/*height: 100%;	*/
}
.ng-flex-hh{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
}
.ng-flex-w{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
}	
.ng-flex-v{
	display:flex;
	flex-direction:column;
}	
.ng-flex-jb{
	justify-content:space-between;
}	

/* ------ MENU PRINCIPAL -------------------------------------------------------------------------------- */

.ng-menu{
	background-color:var(--ngt-coul-menu-fond);	
	color:var(--ngt-coul-menu-texte);	
	height:3em;
	display:flex;
	flex-direction:row;
	position:fixed;
	width:100%;
}

.ng-userinfo{
	color:var(--ngt-coul-menu-texte-fort);	
	margin-left:2em;
	margin-right:2em;
}

.ng-menuitem:hover{
	background-color:var(--ngt-coul-menu-fond-surligne);
}

.ng-menuitem{
	color:white;
	margin-left:1px;
	margin-right:1px;
	margin-top:1px;
	margin-bottom:1px;
	cursor:pointer;
	border-radius:1px;	
}

.ng-topmenu{
	background-color:#005d8b;
	height:3em;
	padding-top:0.5em;
	padding-left:0.5em;
	padding-bottom:0.5em;
	color:white;
	display:flex;
	flex-direction:row;	
}

.ng-topmenu A{
	color:white;
}

/* ------ MENU ADMIN -------------------------------------------------------------------------------- */
.ng-menuitem-admin{
	color:var(--ngt-coul-admin-texte);
	/*margin:0.5em;*/
	/*padding:0.5em;*/
	margin-left:0.2em;
	margin-right:0.2em;
	margin-top:0.1em;
	margin-bottom:0.1em;
	padding-left:0.5em;
	padding-right:0.5em;
	cursor:pointer;
	background-color:var(--ngt-coul-admin-fond);
	border:0px solid #AAA;
	border-radius:5px;	
	font-size:0.9em;
}

.ng-menuitem-encode{
	color:var(--ngt-coul-admin-texte);
	/*margin:0.5em;*/
	/*padding:0.5em;*/
	margin-left:0.2em;
	margin-right:0.2em;
	margin-top:0.1em;
	margin-bottom:0.1em;
	padding-left:0.5em;
	padding-right:0.5em;
	cursor:pointer;
	background-color:var(--ngt-coul-encode-fond);
	border:0px solid #AAA;
	border-radius:5px;	
	font-size:0.9em;
}

.ng-menu A{
	color:var(--ngt-coul-admin-texte);
}

/* ------ ELEMENTS INTERFACE ADMIN -------------------------------------------------------------------------------- */

.ng-cadre {
	border:1px solid var(--ngt-coul-admin-bord);
	margin-top:1em;
	background-color:var(--ngt-coul-admin-fond);
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

.ng-cadre-invisible {
	border:1px solid var(--ngt-coul-admin-bord);
	margin-top:1em;
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

.ng-tetecadre {
	color:var(--ngt-coul-admin-texte);
	background-color:var(--ngt-coul-admin-fond);
	border-bottom:1px solid var(--ngt-coul-admin-bord);
	font-weight:600;
}

.ng-radio {
	color:blue;
}

.ng-soustitre {
	color:var(--ngt-coul-admin-texte-1);
	margin-top:0.5em;
}

.ng-enc-groupedetail {
	background-color:var(--ngt-coul-admin-fond-1);
	color:var(--ngt-coul-admin-texte-1);
}

.ng-enc-groupedetail .ng-soustitre {
	color:var(--ngt-coul-admin-texte-1);
}
.ng-sousinput {
	color:var(--ngt-coul-admin-texte-1);
	font-size:0.7em;
}
.ng-rechresult {
	background-color:var(--ngt-coul-admin-fond-1);
	color:var(--ngt-coul-admin-texte);
	cursor:pointer;
}

.ng-connais {
	text-decoration: underline;
	color:var(--ngt-coul-admin-lien);
	border:1px solid var(--ngt-coul-admin-lien);
	cursor:pointer;
	border-radius:2px;
	margin-left:1em;
}

.ng-rechresult:hover {
	color:var(--ngt-coul-admin-texte);
	background-color:var(--ngt-coul-admin-fond-1);
}

/* ------ ELEMENTS ENCODAGE FACES ET PISTES -------------------------------------------------------------------------------- */

.ng-face {
	background-color:var(--ngt-coul-pistes-face-fond);
	margin-left:3em;
	margin-right:3em;
}
.ng-numface {
	color:var(--ngt-coul-pistes-face-texte);
	font-size:2em;
}
.ng-piste {
	background-color:var(--ngt-coul-pistes-fond);
	margin-left:3em;
	margin-right:3em;
}
.ng-piste-lignerech {
	color:var(--ngt-coul-pistes-rech-texte);
	cursor:pointer;
}
.ng-piste-lignerech:hover {
	background-color:var(--ngt-coul-pistes-rech-fond);
}
.ng-numpiste {
	color:var(--ngt-coul-pistes-face-texte);
	font-size:1em;
}

/* ------ ELEMENTS ENCODAGE ANNEE ET PAYS -------------------------------------------------------------------------------- */

.grandeannee {
	font-size:1em;
    font-weight:600;
	color:var(--ngt-coul-encode-liste-texte);
	cursor:pointer;
    width:4em;
}
.grandeannee:hover {
	background-color:var(--ngt-coul-encode-liste-fond-1);
    width:4em;
}
.petiteannee {
	font-size:1em;
	color:var(--ngt-coul-encode-liste-texte);
	cursor:pointer;
    width:4em;
}
.petiteannee:hover {
	background-color:var(--ngt-coul-encode-liste-fond-1);
}
.selectannee {
	font-size:1em;
	color:var(--ngt-coul-encode-liste-texte);
	font-weight:600;
	border:1px solid var(--ngt-coul-encode-liste-texte);
	border-radius:2px;
	background-color:var(--ngt-coul-encode-liste-fond-1);
}
#select-annees {
	border:1px solid var(--ngt-coul-encode-liste-texte);
	border-radius:2px;
	background-color:var(--ngt-coul-encode-liste-fond);
    z-index:100;
}
#annees{
	border:1px solid var(--ngt-coul-encode-liste-fond-1);
	border-radius:5px;
}	
.petitpays {
	font-size:1em;
	color:var(--ngt-coul-encode-liste-texte);
	cursor:pointer;
    width:8em;
}
.petitpays:hover {
	background-color:var(--ngt-coul-encode-liste-fond-1);
}
.selectpays {
	font-size:1em;
	color:var(--ngt-coul-encode-liste-texte);
	font-weight:600;
	border:1px solid var(--ngt-coul-encode-liste-texte);
	border-radius:2px;
	background-color:var(--ngt-coul-encode-liste-fond-1);
}
#select-pays {
	border:1px solid var(--ngt-coul-encode-liste-texte);
	border-radius:2px;
	background-color:var(--ngt-coul-encode-liste-fond);
    z-index:100;
}
#pays{
	border:1px solid var(--ngt-coul-encode-liste-fond-1);
	border-radius:5px;
}	

/* ------ ELEMENTS ENCODAGE ARTISTE -------------------------------------------------------------------------------- */

.artiste{
	display:flex;
	flex-direction:row;
}
.typeartiste {
	font-size:1em;
	color:var(--ngt-coul-admin-texte-1);
	cursor:pointer;
    width:4em;	
}
.typeartiste:hover {
	background-color:var(--ngt-coul-admin-fond-1);
	color:var(--ngt-coul-admin-texte);
}
.typeartiste.aselect{
	font-size:1em;
	color:var(--ngt-coul-encode-liste-texte);
	font-weight:600;
	border:1px solid var(--ngt-coul-encode-liste-texte);
	border-radius:2px;
	background-color:var(--ngt-coul-encode-liste-fond-1);
}
.typeartiste.aselect2{
	background-color:pink;
}
.couvselect {
	border:3px dotted red;
}	
.imcouv {
	margin:3px;
}

/* ------ LISTE PARTICIPATIONS -------------------------------------------------------------------------------- */
.ng-particip-preview {
	display:flex;
	flex-direction:row;
}
.ng-particip-preview-json {
	font-size:0.5em;
	color:var(--ngt-coul-admin-texte-1);
	word-wrap:break-word;
}

.ng-particip-preview-json:hover {
	font-size:0.5em;
	color:var(--ngt-coul-admin-texte);
	word-wrap:break-word;
}

/* ------ VIGNETTES -------------------------------------------------------------------------------- */

.ng-vignette17 {
	width: 100px;
	height: 100px;
	margin:5px;
	filter: drop-shadow(5px 5px 5px var(--ngt-coul-ombre));
	background-color:var(--ngt-coul-fond-1);
	cursor:pointer;
}
.ng-vignette25 {
	width: 110px;
	height: 110px;
	margin:5px;
	filter: drop-shadow(5px 5px 5px var(--ngt-coul-ombre));
	background-color:var(--ngt-coul-fond-1);
	cursor:pointer;
}
.ng-vignette30 {
	width: 120px;
	height: 120px;
	margin:5px;
	filter: drop-shadow(5px 5px 5px var(--ngt-coul-ombre));
	background-color:var(--ngt-coul-fond-1);
	cursor:pointer;
}	
.ng-cadre25 {
	width: 110px;
	height: 110px;		
	margin:5px;
	border: 1px dotted var(--ngt-coul-bord);
}
.ng-cadre30 {
	width: 120px;
	height: 120px;	
	margin:5px;		
	border: 1px dotted var(--ngt-coul-bord);
}	

/* ------ ADMIN : GESTION DES TAGS -------------------------------------------------------------------------------- */
.ng-lignetags{
	display:flex;
	flex-direction:column;
	flex-wrap: wrap;
	width:150px;
	padding:0.5em;
	border:1px solid var(--ngt-coul-texte);
}	
.ng-cadreleger{
	border: 1px solid var(--ngt-coul-bord:#DDD);
}
.ng-serie{
	font-size:2em;
	font-weight:700;
}
.ng-titre{
	font-size:1.5em;
	font-weight:700;
	font-style:italic;
}	
.ng-serie-ltag{
	font-size:0.7em;
	font-weight:700;
}
.ng-titre-ltag{
	font-size:0.7em;
	font-weight:700;
	font-style:italic;
	color:var(--ngt-coul-admin-lien);
}	
.ng-tag:before{
	 content: "#";
}

.ng-tag{
	border:0px solid var(--ngt-coul-tag-texte);
	border-radius:3px;
	background-color:var(--ngt-coul-tag-fond);
	color:var(--ngt-coul-tag-texte);
	height:auto;
	width:auto;
	margin:0.2em;
	padding:0.05em;
	display:inline-block;
}

.ng-tag-actif{
	background-color:var(--ngt-coul-tag-actif-fond);
	border:1px solid var(--ngt-coul-tag-actif-bord);
	color:var(--ngt-coul-tag-actif-texte);
}

.ng-tag-inactif{
	background-color:var(--ngt-coul-tag-inactif-fond);
	border:1px solid var(--ngt-coul-tag-inactif-bord);
	color:var(--ngt-coul-tag-inactif-texte);
}

.ng-inbu{
	width:auto;
}

.ng-pointer{
	cursor:pointer;
}
.ng-tag-courant:before{
	 content: "#";
}
.ng-tag-courant{
	border:1px solid var(--ngt-coul-tag-actif-bord);
	border-radius:3px;
	background-color:var(--ngt-coul-tag-actif-fond);
	color:var(--ngt-coul-tag-actif-texte);
	height:1em;
	margin:0.2em;
	padding:0.2em;
}

/* ------ VIGNETTES SUITE -------------------------------------------------------------------------------- */

.ng-vig-serie{
	font-size:0.7em;
	padding-left:5px;
	font-weight:700;
}	
.ng-vig-titre{
	font-size:0.7em;
	font-style:italic;
	padding-left:5px;
}
.ng-vig-info{
	font-size:0.7em;
	color:green;
	padding-left:5px;
}	
.ng-vig-tags{
	font-size:0.7em;
	color:#d03b00;
	padding-left:5px;
}	

/* ------ VOLET DETAILS -------------------------------------------------------------------------------- */

.ng-det-tags{
	font-size:1em;
	color:var(--ngt-coul-detail-tags);
}	

.ng-bouton{
	border:1px solid var(--ngt-coul-bouton-bord);
	border-radius:5px;
	color:var(--ngt-coul-bouton-texte);
	background-color:var(--ngt-coul-bouton-fond);
	cursor:pointer;
}

.ng-listepistes .ng-titrepiste:before{
	content: counter(compteur);
	counter-increment: compteur;
}	

.ng-face{
	font-size:1em;
	font-weight:700;
	color:var(--ngt-coul-pistes-face-texte);
	padding-top:0.2em;
	padding-bottom:0.2em;
}	

.ng-groupe-h-1{
	/* height:1.5em; */
	border-top:1px solid var(--ngt-coul-bouton-bord);
	border-bottom:1px solid var(--ngt-coul-bouton-bord);
}	
.ng-editeur{
	font-size:1em;
}
.ng-reference{
	font-size:1em;
}		
.ng-pays{
	font-size:1em;
}	
.ng-annee{
	font-size:1em;
}	
.ng-support{
	font-size:1em;
}	
.ng-taille{
	font-size:1em;
}	
.ng-vitesse{
	font-size:1em;
}	
.ng-type-pochette{
	font-size:1em;
}		
.ng-listepistes{
	counter-reset: compteur;
}
.ng-titrepiste{
	font-weight:700;
}	
.ng-artistes{
	display:none;
	padding-left:1em;;
}	
	
.ng-artiste{
	font-size:0.7em;
}	
	
.ng-grande-pochette{
	width:100%;
}	

.ng-detail-face{
	color:var(--ngt-coul-pistes-numface-texte);
	font-weight:600;
	margin-top:0.5em;
}
.ng-detail-numpiste{
	color:var(--ngt-coul-bouton-bord);
}
.ng-detail-intitule{
	margin-top:0.5em;
	color:var(--ngt-coul-texte);
	font-weight:600;
}
.ng-detail-artgroupe{
	font-size:0.8em;
}
.ng-detail-arttype{
	color:var(--ngt-coul-pistes-face-texte);
	font-weight:600;	
}

.ng-valid{
	color:green;
}
.ng-invalid{
	color:red;
}

.ng-detail-remarque{
	margin-top:0.5em;
	color:var(--ngt-coul-detail-rem-texte);
	padding:0.5em;
	background-color:var(--ngt-coul-detail-rem-fond);
	border-radius:5px;
}

.ng-nom-particip{
	margin-top:0.5em;
	color:red;
}

/* ------ ZONES PRINCIPALES -------------------------------------------------------------------------------- */

#zone-tout{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}
#zone-horsmenu{
	margin:5px;
	flex-grow: 1;
	min-height: 0; /* pour Firefox */
	resize: horizontal;
}
#zone-filtre+vignettes{
	height:100%;
	display:flex;
}
#zone-vignettes{
	flex-grow: 1;
	overflow: auto;
	min-height: 0; /* pour Firefox */
}	

#zone-lignes{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}	

.ng-lt-groupetags{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
}

#zone-details{
	padding:1em;
	padding-top:0.2em;
	flex-grow: 1;
	overflow: auto;
	min-height: 0; /* pour Firefox */
	/*border-left:1px solid grey*/
}		

/* ------ LIGNES INFOS COLLECTION -------------------------------------------------------------------------------- */

.ng-coll-ligne{
	padding:1px;
	margin:1px;
	border-radius:50px;
	background-color:var(--ngt-coul-bouton-fond);
	
}
.ng-coll-cadre{
	height:100%;
	padding-left:2px;
	padding-right:2px;
}

.ng-coll-ai{
	color:var(--ngt-coul-poss-ai);
	font-weight:600;
	cursor:pointer;
	font-family: 'BenchNine', sans-serif;
}
.ng-coll-cherche{
	color:var(--ngt-coul-poss-cherche);
	font-weight:600;
	cursor:pointer;
	font-family: 'BenchNine', sans-serif;
}
.ng-coll-vends{
	color:var(--ngt-coul-poss-vends);
	font-weight:600;
	cursor:pointer;
	font-family: 'BenchNine', sans-serif;
}
.ng-coll-echange{
	color:var(--ngt-coul-poss-echange);
	font-weight:600;
	cursor:pointer;
	font-family: 'BenchNine', sans-serif;
}
.ng-coll-etat-poch{
	color:var(--ngt-coul-texte);
	font-weight:600;
	cursor:pointer;
}
.ng-coll-etat-disque{
	color:var(--ngt-coul-texte);
	font-weight:600;
	cursor:pointer;
}
.ng-coll-etat-prix{
	color:var(--ngt-coul-texte);
	font-weight:600;
}
.ng-coll-surligne{
	background-color:var(--ngt-coul-coll-surligne);
}
.ng-coll-etat-item{
	z-index:999;
	background-color:var(--ngt-coul-bouton-fond);
	cursor:pointer;
	border:1px solid var(--ngt-coul-bouton-bord);
}
.ng-coll-etat-item:hover{
	background-color:var(--ngt-coul-fond-1);
}

/* ------ INTERCALAIRES -------------------------------------------------------------------------------- */
.ng-bouton-alpha {
	width:120px;
	height:120px;
	background-color:var(--ngt-coul-fond-1);
	/*
	text-align:center;
	vertical-align:middle;
	*/
	margin-top:5px;
	font-size:80px;
	border-radius: 5px;
	box-shadow: inset 5px 5px 5px var(--ngt-coul-ombre-1);
	text-shadow: 5px 5px 5px var(--ngt-coul-ombre-1);
	
	/*centrage du contenu*/
	display: flex;
	justify-content: center;
	align-items: center;
}

.ng-bouton-onglet {
	height:1em;
	margin:1px;
	background-color:var(--ngt-coul-fond-1);
	font-size:1em;
	padding:2px;
	border-left:1px solid var(--ngt-coul-fond);
	cursor:pointer;
}

.ng-bouton-onglet A{
	color:var(--ngt-coul-texte);
}

#zone-onglets{
	background-color:var(--ngt-coul-fond-1);
	display:flex;
	flex-direction:row;
}
.ng-select-vig {
	background-color:var(--ngt-coul-coll-surligne);
}

.ng-intercalaire2-visible {
	height:100px;
	width:5px;
	margin-left:2px;
	margin-right:2px;
	margin-top:20px;
	border-left:3px dotted var(--ngt-coul-fond-1);
	/*border-bottom:5px solid gray;*/
}

/* RECHERCHE AVANCEE ------------------------------------------------ */

.ng-boite-rech{
	display:flex;
	flex-direction:column;
	background-color:var(--ngt-coul-rechav-fond);
	border:0px solid var(--ngt-coul-rechav-bord);
	width:100%;
	padding:0.1em;
}
.ng-boite-rech INPUT{
	height:2em;
}
#ng-zone-recherche{
	display:none;
	background-color:var(--ngt-coul-rechav-fond-1);
} 
.ng-resultrech{
	background-color:var(--ngt-coul-rechav-result-fond);
	color:var(--ngt-coul-rechav-result-texte);
	cursor:pointer;
}
.ng-resultrech:hover{
	background-color:var(--ngt-coul-rechav-surligne);
}
.ng-rech-label{
	font-size: 0.8em;
	color:var(--ngt-coul-rechav-texte);
	font-style:italic;
}

#in-recherche:focus{
	border:none;
	outline:none;
}

/* VUE GENERALE COLLECTION ------------------------------------------------ */
.ng-coll-section{
	background-color:var(--ngt-coul-fond-1);
	color:var(--ngt-coul-texte);
	border-radius:3px;
	height:2em;
	border-top:1px solid var(--ngt-coul-bord);
}

/* MENU CATEGORIES
 ------------------------------------------------ */

.ng-cat-leg {
	color:var(--ngt-coul-menu-texte);
}

#ng-menu-cat {
	background-color:var(--ngt-coul-menu-fond);
	padding:0.5em;
}
.ng-menu-cat-ligne {
	display:flex;
	flex-direction:row;
	border-bottom:1px solid white;
	color:var(--ngt-coul-menu-texte);
	cursor:pointer;
	
}
.ng-menu-cat-ligne:hover{
	color:lightgreen;
}
.ng-select{
	background-color:var(--ngt-coul-detail-rem-fond);
}
.ng-menu-cat-ligne IMG {
	width:60px;
	height:60px;
}