body {
	background-color: #dedede;
}
@font-face {
  font-family: RobotRoc;
  src: url(../fonts/robot_roc/Robot_Roc.otf);
}

@font-face {
  font-family: Oswald;
  src: url(../fonts/oswald/Oswald-Light.ttf);
}

@font-face {
  font-family: Regina;
  src: url(../fonts/regina/ReginaScript.ttf);
}

@font-face {
  font-family: Dancing;
  src: url(../fonts/Dancing_Script/DancingScript-VariableFont_wght.ttf);
}

@font-face {
  font-family: junicode;
  src: url(https://www.spherick.fr/resources/fonts/junicode-1.002/Junicode-Italic.ttf);
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: junicode;
  src: url(https://www.spherick.fr/resources/fonts/junicode-1.002/Junicode-Bold.ttf);
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: junicode;
  src: url(https://www.spherick.fr/resources/fonts/junicode-1.002/Junicode-BoldItalic.ttf);
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: junicode;
  src: url(https://www.spherick.fr/resources/fonts/junicode-1.002/Junicode.ttf);
  font-weight: normal;
  font-style: normal;
}


@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');

body {
	--couleur-personne-virtuelle: #EFEFEF;

	--color-homme : #25BAEC ;
	--bg-color-homme : #ecf4fc ;
	--color-homme-revert : #215891 ;
	--bg-color-homme-revert : #0b4580 ;

	--color-femme : #ff61a4 ;
	--bg-color-femme : #fff8f8 ;
	--color-femme-revert : #b02a56 ;
	--bg-color-femme-revert : #860e35 ;
	--line-color-lignee : #ff8300 ;

	/* --color-unknown : #49b067 ;
	--bg-color-unknown : #cdefd4 ; */
	--color-unknown : darkgrey ;
	--bg-color-unknown : lightgrey ;

	--color-trans : #9801ff ;
	--bg-color-trans : #fbf2ff ;

	/* --color-virtual : #45b399 ; */
	--color-virtual : #18a382 ;
	--bg-color-virtual : #bfe9df ;

	--color-root : orange ;
	--bg-color-root : #fcdf94 ;
	--bg-color-repli : red ;

	--texte-union : #303030 ;
	--fond-union : #EFEFEF ;

	--ligne : #8c8b8b ;
	--color-certaine : #00bc15 ;
	--color-certaine-light : #00bc1587 ;
	--color-certaine1 : #019111 ;
	--color-certaine2 : #018210 ;
	--color-certaine3 : #01710e ;
	--bg-color-certaine : #eefff0 ;
	--bg-color-certaine : #eefff0 ;
	--border-weigth : 2px ;

	--color-base : #1997FC ;
	--bg-color-base : #F4F9FD ;
	--border-color-base : #303030 ;
	--basic-blue : #0094FF ;

	--box-shadow-bottom-left : -10px 10px 5px 0px #656565 ;

	--separatorColor : #6d9bd7 ;
	--formColor : #EAEAEA ;
	--newMarker : #FF97FC ;
	--marker : #25D749 ;

	/* --ok-message : #26bf26 ;
	--warning-message : #f0ac30 ;
	--error-message : #fd4f4f ;
	--inactive-message : #909090 ; */

	font-family: sans-serif;
}

/* ============================= Header =============================== */
body {
	background-color : white ;
}

body[colors="revert"] {
	background-color : #464444 ;
	color : lightgrey ;
}

body > header {
	position : fixed ;
	top : 0 ;
	left : 0 ;
	width : 99.9vw ;
	padding : 0 2em 0 1em ;
	text-align : center ;
	background-color : white ;
	height: 3em;
	display : flex ;
	flex-direction: row ;
	justify-content:space-between;
	align-items: center ;
	user-select: none;
	border-bottom : 1px solid #606060 ;
	z-index : 300000 ;
	box-sizing: border-box;
	background-color: #fcfeff;
}

body[colors="revert"] header {
	background-color: #000;
}

body > header #logo {
	height : 2em ;
}

body > header #identiteVisiteur {
	color : #1289B0 ;
}

/* header .separateurLeft, header .separateurRight {
} */

/* body > header .separateurLeft {
	border-left : 1px solid #E0E0E0 ;
} */

body > header .separateurRight {
	border-right : 1px solid #E0E0E0 ;
}

body > header #menu {
	display : inline-flex ;
	justify-content: flex-end ;
	align-items: center;
}

#menu {
	display : inline-block;
	padding : 0 0.5em ;
	/* column-gap: 1em; */
}


header #menu .optionsGroup {
	display : inline-flex ;
	justify-content: space-between;
	align-items: center;
	border: 1px solid var(--basic-blue);
	border-radius: 0.5em;
	height: auto !important;
	padding: 0.2em 0.5em;
	column-gap: 0.2em;
}
header.condensed #menu .optionsGroup {
	max-width: 8em;
	text-overflow: clip;
	overflow: hidden;
}

header #menu #nbGenerations {
	display: flex;
	flex-direction: column;
}

header #menu .menuIcon  {
	transition-duration: 400ms
}

header #menu .menuIcon:hover  {
	transform : scale(2,2);
	transform-origin: center;
	background-color:white;
}

header #menu .optionsGroup > *:NOT(:last-child) {
	margin-right : 0.25em ;
}

header #menu > *:NOT(:last-child) {
	margin-right : 0.5em ;
}

header #menu img {
	height : 1.2em;
}

header #menu .btnPlusMoins {
	display:inline-block;
	width : 4em;
	border-radius : 0.5em;
	cursor : pointer ;
	text-align : center ;
	z-index:600 ;
	box-sizing: border-box;
}

header #menu #nbGenerations .arrowUp .arrow {
	color : #979797 ;
	position: absolute ;
	top: -0.2em ;
	left : 20%;
	z-index : 400 ;
}

header #menu #nbGenerations .arrowDown .arrow {
	color : #979797 ;
	position: absolute ;
	top: 1.5em ;
	left : 70%;
	z-index : 400 ;
}


/* header #menu .arrowUp, header #menu .arrowDown {
	display:inline-block;
	width : 50px;
	height : 20px;
	cursor : pointer ;
	position:relative ;
	top : 0.5em;
	background-color : transparent ;
	border : none ;
}

header #menu .arrowUp::after {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(96, 96, 96, 0);
	border-bottom-color: #606060;
	border-width: 4px;
	margin-left: -4px;
	z-index:500 ;
}

header #menu .arrowDown::after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(96, 96, 96, 0);
	border-top-color: #606060;
	border-width: 4px;
	margin-left: -4px;
} */


/* ============================= Popups =============================== */
.required {
	color : red ;
	font-size : 80%;
	position : relative ;
	top : -0.2em;
}

.whiteArea {
	background-color : #FFEFEF;
}

.alignedBlock {
	display : inline-flex ;
	align-items : center ;
	justify-content: flex-start;
	flex-wrap: nowrap;
}

.alignedBlock > *:NOT(:last-child) {
	margin-right : 0.5em;
}

/* ============================= Formulaires =============================== */
label.debutLigne {
	display : inline-block ;
	text-align : right ;
	width : 10em ;
	margin-right : 0.4em;
	margin-top : 0.4em;
	vertical-align : top ;
}

.apresDebutLigne {
	margin-left : 13.5em ;
	margin-top : 0.5em ;
	font-style : italic;
}

input[type="submit"] {
	height : 1.5em ;
	width : 1.5em ;
	background-size : 100% 100% ;
	background-position : 0 0 ;
	background-repeat : no-repeat;
	background-color : transparent ;
	border : none ;
	transition-duration: 500ms;
}

input[type="submit"]:hover {
	transform : scale(2, 2) ;
	transform-origin: 50% 50%;
}

.inputRequired {
	color : red ;
}

.smallText {
	font-size : 80%;
	color : grey ;
}

.longInput {
	width : 30em ;
}

span.error {
	color:red;
	font-weight : 900 ;
}

input.error {
	border : 2px solid orange ;
	position : relative ;
	top : -2px
}

.errorBorder {
	border-color : red ;
}

.chosen-container-single .chosen-single {
	line-height: 1.1em !important;
	height: 1.3em !important;
}


.formSaisie {
	z-index: 900000;
	background-color: white;
	border : 1px solid #606060 ;
	border-radius : 1em ;
	padding : 1em ;
}

.formSaisie .annee {
	width : 7em ;
}

.formSaisie .titre, .formSaisie .source {
	width : 40em ;
}

.formSaisie select {
	max-width : 40em ;
}

.formSaisie textarea {
	width : 34em ; /* Si quelqu'un peut m'expliquer pourquoi 34em dans un textarea = 40 em dans un input, je suis preneur  */
	height : 6em ;
}

.formSaisie .error {
	color: red;
	font-size: 80%;
	white-space: normal;
}

.formSaisie .apresDebutLigne {
	margin-left : 13em !important ;
	max-width : 70%;
}

.formSaisie .twoColumns {
	display : grid ;
	grid-template-columns: 1fr 1fr ;
}

.formSaisie .twoColumns h3 {
	text-align : center ;
}

.formSaisie .twoColumns *:nth-child(2) {
	border-left : 1px solid #909090 ;
}

/* ================= barre de boutons et icônes cliquables ================= */
.buttonsBar {
	background-color : #DBDBDB ;
	border-radius : 1em ;
	width : 5em ;
	position : relative ;
	left: 50%;
	transform: translate(-50%, 25%);
	margin-top : 1em ;
	display : flex ;
	justify-content: space-around;
	padding : 0.5em 1em ;
}

.iconAction {
	height : 100% ;
    display: inline-block;
    cursor: pointer;
}

.iconAction.golden {
	color : golden ;
}

.iconBulleAction {
	max-width : 16px;
	height : 16px;
	position:absolute;
	display : inline-block ;
	cursor : pointer ;
	transition : all .2s ease-in-out;
	z-index:9998;
	border-radius : 2px;
}

.iconBulleAction:hover {
	transform: scale(2);
	border:0px solid white;
	border-radius : 4px;
	z-index:9998;
}

.actionButton {
	height : 1em ;
	cursor : pointer ;
	transition-duration: 300ms;
}

.inlineButton {
	position: relative;
	top: 0.25em;
}

.buttonsBar .actionButton {
	height : 1.5em ;
}

.actionButton:hover {
	transform : scale(1.5, 1.5) ;
}

.closeAction {
	float : right ;
	cursor : pointer ;
}

.clickable {
	cursor : pointer ;
	color : #0090C0 ;
	text-decoration: underline;
}

.selectable {
	cursor : pointer ;
	color : #0090C0 ;
}

.invisible {
	display : none ; /* Ne pas mettre !important car ça empeche jQuery show et hide de fonctionner */
}
.veryInvisible {
	display : none !important ;
}

/*	====================================================================================
	Icons
	==================================================================================== */
	/* .inactiveIcon, .symbolIcon {
		color : var(--inactive-message) ;
	}
	.helpIcon, .saveIcon, .okIcon, .optionIcon {
		color : var(--ok-message) !important ;
	}
	.actionIcon {
		color : var(--basic-blue) ;
	}
	.warningIcon {
		color : var(--warning-message) ;
	}
	.closeIcon, .errorIcon {
		color : var(--error-message) ;
	}
	.contrastIcon {
		color : white ;
	}
	.leftSpacedIcon {
		margin-left : 0.5em ;	
	}
	.iconOnRight {
		float : right ;
		margin-right : 0.5em ;	
	}
	.smallIcon {
		font-size : 80%;
		position : relative ;
		top : -10% ;
	}
	.helpIcon, .actionIcon, .closeIcon, .saveIcon {
		cursor : pointer ;
	}
	.helpIcon, .actionIcon, .closeIcon, .saveIcon, .smallIcon, .symbolIcon, .optionIcon {
		transition: all .2s ease-in-out;
		transform-origin: center;
	}
	.helpIcon:hover, .actionIcon:hover, .closeIcon:hover, .saveIcon:hover, .smallIcon:hover, .symbolIcon:hover, .optionIcon:hover {
		transform: scale(1.5);
	} */

/* ================================ modalBackground ================================== */
#wait {
	position : fixed ;
	top : 0 ;
	left : 0 ;
	width : 100%;
	height : 100%;
	background-color: rgba(255,255,255,0.9);
	z-index : 9999 ;
	display : inline-block;
	vertical-align: middle ;
	text-align : center ;
}

.bigPopup {
	width : 99vw ;
	font-size : 16px !important ;
	position : fixed ;
	top : 4em ;
	left : 0 ;
	background-color: rgba(255,255,255,0.85);
	z-index : 999999 ;
	display : inline-block;
	font-family : initial ;
	padding : 0 1em 1em 1em ;
}

.bigPopup h1 {
	font-size : 16px ;
	color : #0090C0 ;
	display : flex;
	align-items:center ;
	justify-content : space-between;
	margin-bottom : 3em ;
}

.bigPopup sup {
	color : #FF7B7B ;
}

.bigPopup tr:hover td, .bigPopup tr:hover th {
	background-color : #0090C040 ;
}

.bigPopup td {
	padding : 0 0.5em ;
}

.bigPopup th:first-child {
	padding : 0 0.5em 0 0 ;
	text-align : right ;
}

#wait .interactionArea {
	width : 60%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding : 0.5em;
	color : #577DA7 ;
}

#wait img {
	width : 4em;
}

/* ================================ Divers ================================== */

.hyperlien {
	width : 2.6em !important ;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	white-space: nowrap;
}

.listePersonnesSelection, .shortListePersonnesSelection, .listeSelectionAnimal {
	border: 1px solid var(--color-base);
	z-index: 9998;
	background-color: white;
	width: 20em;
	font-size: 80%;
}

.shortListePersonnesSelection {
	position : relative ;
	left : 15em;
}

.listePersonnesSelection {
	position : absolute ;
}

.shortListePersonnesSelection header {
	height : 1em;
}
.shortListePersonnesSelection header .actionButton {
	top : 0 !important ;
}

.listePersonnesSelection > ul, .shortListePersonnesSelection section, .listeSelectionAnimal > ul {
	width: calc(100% - 0.5em);
	max-height: 10vh;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	padding-left: 0.8em;
	margin-left: 0.5em;
}

.listePersonnesSelection ul li, .listeSelectionAnimal ul li {
	cursor : pointer ;
}

.shortListePersonnesSelection section h4 {
	margin : 0 ;
	color : #0090C0 ;
}

.blinking {
	animation: blinker 1s linear infinite;
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}

.anticWriting {
	font-family : junicode ;
}
.smallCaps {
	font-variant:small-caps;
}

.specialCharsList {
    position: fixed;
    top: 5em;
    z-index: 99999999;
    border: 1px solid var(--basic-blue);
    padding: 0.2em 1em 1em 1em;
    border-radius: 0.5em;
    left: 50%;
    transform: translate(-50%,0);
	background-color: #F6F6F6;
}

.specialCharsList header {
	height : 1.3em ;
}

.specialCharsList .content {
	font-family: junicode;
	max-width: 25vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
}

.specialChar {
    border: 0.5px solid var(--basic-blue);
    margin: 0.25em;
    padding: 0 0.25em;
    border-radius: 0.1em;
    cursor: pointer;
	background-color: #FEFEFE;
}

.toolBar {
    margin-left: 11em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 15em;
    padding: 0.2em 0;
}

.toolBar > span {
    max-height: 1em !important;
    height: auto !important;
    font-size: 0.7em !important;
    position: static;
    width: auto !important;
    margin: 0 !important;
    border: 0.5px solid gray !important;
	padding: 0.2em;
	border-radius: 0.2em;
	user-select: none;
	cursor: pointer;
	font-family: sans-serif;
	font-weight:100;
}

.toolbar > *:hover {
	background-color : orange ;
}

#confirm {
	position : fixed ;
	bottom : 1em ;
	right : 1em ;
	z-index : 999999 ;
	display : inline-block ;
	color : white ;
	background-color: #00ac00;
	padding: 0.5em;
	border-radius: 0.4em;
	display : none ;
}

gras {
	font-weight : bolder;
} 
ital {
	font-style: italic;
}
raye {
	/* text-decoration: line-through black;
	color: darkgray; */

	text-decoration: line-through #2f2f2fcc;
	text-decoration-thickness: 3px;
}

.listJustifs, .listTagsAndBiblio {
	border: 1px solid var(--color-base);
	z-index: 9998;
	background-color: white;
	width: 20em;
	font-size: 80%;
	position : relative ;
	display : block ;
	margin-left: 14em;
	width: calc(100% - 15em);
}

.listJustifs header, .listTagsAndBiblio header {
	height : 1em;
}
.listJustifs header .actionButton, .listTagsAndBiblio header .actionButton {
	top : 0 !important ;
}

.listJustifs > ul, .shortListePersonnesSelection section, .listTagsAndBiblio > ul, .shortListePersonnesSelection section {
	width: calc(100% - 0.5em);
	max-height: 10vh;
	overflow-x: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	padding-left: 0.8em;
	margin-left: 0.5em;
}

.listJustifs ul li, .listTagsAndBiblio ul li {
	cursor : pointer ;
}

.listJustifs section h4, .listTagsAndBiblio section h4 {
	margin : 0 ;
	color : #0090C0 ;
}

.listJustifs.photos > ul {
	list-style-type: none ;
	padding-left : 0 ;
}

.listJustifs.photos > ul li:not(:first-child) {
	margin-top:5px ;
}