:root {
	--heightHeaderMobile: 40px;
	--heightHeader: 60px;
	--heigthPaddingMenu: 10px;
	--heigthBtnMenu: 40px;
	--colorBtn: #c35a3d;
	--colorDbg: #fef180;
	--colorKo: #cc3333;
	--menuBg: #685751;
	--colorBody: #f4f4f4;
	--colorTxt: #675851;
	--bgContent: #fff;
	--colorDarkBg: #fff;
	--colorLink: #1da0cc;
	--colorLinkVisited: #f09a29;
	--colorLinkHover: #f09a29;
	--colorPlaceholder: #a4a4a4;
	--bgError: #ffecec;
	--widthTablet: 769px;
	--widthDesktop: 1176px;
	--widthHd: 1601px;
	--colorOk: #70c066;
}


*,*::after,*::before {
	box-sizing: border-box;
}

@font-face {
	font-family: 'qfont';
	src: url('Urbanist.ttf');
}

#rm {
	color: var(--colorDbg);
}

#rt {
	color: var(--colorDbg);
}

#rd {
	color: var(--colorDbg);
}

#rh {
	color: var(--colorDbg);
}

body {
	margin: 0;
	display: flex;
	flex-flow: column;
	min-height: 100vh;
	font-family: qfont;
	background: var(--colorBody);
	color: var(--colorTxt);
	overflow-x: hidden;
}

body> div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100vw;
	flex-grow: 1;
}

body> div> div {
	background: var(--bgContent);
}

header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	background: var(--colorBody)#f0f0f0;
	position: sticky;
	top: 0;
	z-index: 4000;
	width: 100vw;
}

header .hc {
	display: flex;
	flex-direction: row;
}

header .hc> .hsolf {
	flex-grow: 2;
	display: flex;
	flex-direction: row;
	margin: auto 0 auto 20px;
}

header .hc> .hsolf> a {
	margin: auto 0 auto 0;
}

header .hc img {
	min-width: 40px;
	max-width: 40px;
	min-height: 40px;
	max-height: 40px;
	margin: auto 10px auto 0;
}

header .hc> .hsolf #solfego {
	font-weight: bolder;
	cursor: pointer;
}

header .hc> .hsolf #tagline label {
	margin: auto 0 auto 0;
	font-size: 25px;
	color: var(--menuBg);
}

footer {
	display: flex;
	flex-direction: row;
	justify-content: center;
	min-height: 30px;
	max-height: 30px;
	background: var(--menuBg);
}

footer>* {
	margin: auto 0 auto 0;
}

footer> a {
	color: var(--colorDarkBg);
}

footer> a.ml {
	margin-left: 20px;
}

footer> a:visited {
	color: var(--colorDarkBg);
}

nav {
	z-index: 100;
}

input {
	padding-left: 10px;
}

input::placeholder {
	color: var(--colorPlaceholder);
	font-size: 14px;
}

input.er {
	background: var(--bgError);
	color: var(--colorKo);
}

#burger> img {
	width: 100%;
	height: 100%;
}

.btn {
	display: flex;
	flex-direction: row;
	justify-content: center;
	min-width: 150px;
	max-width: 150px;
	margin-right: 10px;
	outline: none;
}

.btn:hover,.btn:focus,.btn.selected {
	background-color: #f78c6a;
}

.btn> div {
	display: none;
}

.btn.wait .lbl {
	display: none;
}

.btn.wait> div {
	box-sizing: border-box;
	display: block;
	position: absolute;
	border-radius: 50%;
	animation: btn-ring 1.2s cubic-bezier(0.5,0,0.5,1) infinite;
	border: 10px solid #fff;
	border-color: #fff transparent transparent transparent;
	min-height: 19px;
	max-height: 19px;
	min-width: 19px;
	max-width: 19px;
}

@keyframes btn-ring {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}

#mainMenu> div> a,.btn {
	min-height: var(--heigthBtnMenu);
	max-height: var(--heigthBtnMenu);
	border-radius: 4px;
	background-color: var(--colorBtn);
	text-decoration: none;
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: bolder;
	padding-top: 8px;
	cursor: pointer;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#mainMenu> div> a.mrg {
	margin-right: 10px;
}

#mainMenu> div> a.selected,#mainMenu> div> a:hover {
	background-color: #f78c6a;
}

#bgmenu> a,#bgmenu> a:visited {
	font-size: 20px;
	color: #fff;
	text-decoration: none;
	padding-top: 5px;
}

header .hc> .hsolf #recherche> input {
	min-width: 200px;
	max-width: 200px;
	min-height: 40px;
	max-height: 40px;
	padding-left: 10px;
	z-index: 4000;
	border: 0;
	background: var(--colorBody);
	outline: none;
}

header .hc> .hsolf #recherche> img {
	min-width: 20px;
	max-width: 20px;
	min-height: 20px;
	max-height: 20px;
	cursor: pointer;
}

#resultSearch {
	position: absolute;
	z-index: 5000;
	flex-direction: row;
	border-radius: 5px;
	padding: 10px;
	background: var(--bgContent);
	box-shadow: 1px 1px 10px 0px #d5d1d0;
	min-width: 300px;
	min-height: 50px;
}

#resultSearch .trr,#searchr .trr {
	display: flex;
	flex-direction: row;
}

#resultSearch .trr> img,#searchr .trr> img {
	min-width: 30px;
	max-width: 30px;
	min-height: 30px;
	max-height: 30px;
}

#resultSearch .trr> label,#searchr .trr> label {
	font-weight: bolder;
	font-size: 20px;
	margin: auto 0 auto 10px;
}

#resultSearch #rspl,#resultSearch #rspr {
	display: flex;
	flex-direction: column;
	min-width: 400px;
	max-width: 400px;
}

#resultSearch .secr {
	display: flex;
	flex-direction: column;
	padding-left: 10px;
	margin-bottom: 10px;
}

#resultSearch .snr {
	margin: auto;
	color: var(--colorKo);
	font-size: 24px;
}

#recnr {
	margin: 20px auto auto auto;
	color: var(--colorKo);
	font-size: 28px;
}

#searchl {
	border: solid 1px var(--colorBtn);
	outline: none;
}

#searchr {
	display: flex;
}

#searchr label {
	margin-bottom: 10px;
}

#searchr .seac {
	display: flex;
	flex-direction: column;
	padding: 5px 0 20px 15px;
}

#dialog {
	position: absolute;
	flex-direction: column;
	background: var(--bgContent);
	padding: 15px;
	max-width: 100%;
	z-index: 1000;
}

#dialog> .title {
	min-width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
}

#dialog> .dcnt {
	min-width: 100%;
	max-width: 100%;
}

#dialog> .dcnt> .cbxComp {
	margin: 4px 0 4px 0;
}

#dialog.close {
	display: none;
}

#dialog.open {
	display: flex;
}

#dialog> .title> label {
	text-align: center;
	font-size: 25px;
	font-weight: bolder;
}

#glass {
	position: absolute;
	display: none;
	background-color: #000;
	opacity: 0.5;
	width: 100%;
	z-index: 500;
}

#glass.active {
	display: block;
	animation: fadeInGlass 0.5s;
	opacity: 0.5;
}

.hidden,.hide {
	display: none;
}

.flex {
	display: flex;
}

a {
	color: var(--colorLink);
	font-size: 18px;
	text-decoration: none;
	outline: none;
}

a:hover,a:focus,a:visited:focus,a:visited:hover {
	color: var(--colorLinkHover);
}

a:visited {
	color: var(--colorLink);
	text-decoration: underline;
}

.framePub {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	min-width: 100%;
	max-width: 100%;
}

.framePubContent {
	flex-grow: 2;
	display: flex;
	flex-direction: column;
}

.framePubContent.row {
	flex-direction: row;
}

h1 {
	color: var(--colorH1);
	text-align: center;
}

.mtpub> div {
	min-height: 100px;
	max-height: 100px;
	margin: auto;
}

#vpubtab {
	overflow: hidden;
}

#vpub {
	overflow: hidden;
}

#vpub> div,#vpubtab> div {
	position: relative;
	background: var(--bgContent);
}

.vflex {
	display: flex;
	flex-direction: column;
}

#cnx> div {
	background: var(--menuBg);
	min-width: 400px;
	max-width: 400px;
}

#usr {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#usr> div {
	display: inline-box;
	background: #ff0;
}

#usr #prf {
	cursor: pointer;
	min-width: 40px;
	max-width: 40px;
	min-height: 40px;
	max-height: 40px;
}

#usr #connected {
	cursor: pointer;
	position: absolute;
	margin-left: 25px;
	margin-top: 25px;
	min-width: 15px;
	max-width: 15px;
	min-height: 15px;
	max-height: 15px;
}

.lnact {
	display: flex;
}

.lnb {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin-bottom: 20px;
}

.lnc> label {
	font-weight: bolder;
	margin-bottom: 10px;
}

.lncb> label {
	margin: auto 10px auto 0;
	min-width: 160px;
	max-width: 160px;
}

.lnp {
	margin: 5px 0 10px 0;
}

.lnb .smallBtn.ml {
	margin-left: 20px;
}

.zm {
	margin-bottom: 20px;
}

.zm> label {
	margin: auto 10px auto 0;
}

.score {
	min-height: 40px;
	max-height: 40px;
}

.score> img {
	min-height: 40px;
	max-height: 40px;
	min-width: 40px;
	max-width: 40px;
}

.score> div {
	margin-left: 10px;
	font-size: 20px;
}

#lsco,#lsct {
	min-width: 40px;
	max-width: 40px;
	text-align: center;
	font-weight: bolder;
}

#lsco.la {
	color: var(--colorKo);
}

#lsco.lb {
	color: #f58915;
}

#lsco.lc {
	color: var(--colorOk);
}

.rdBtn {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	cursor: pointer;
}

.rdBtn> div {
	min-width: 24px;
	max-width: 24px;
	min-height: 24px;
	max-height: 24px;
	margin: 3px 5px 3px 0;
	border-radius: 12px;
	background-color: var(--bgContent);
	border: 1px solid var(--colorBtn);
	outline: none;
}

.rdBtn> div> div {
	background-color: var(--bgContent);
	margin-left: 4px;
	margin-top: 4px;
	border-radius: 7px;
	min-width: 14px;
	max-width: 14px;
	min-height: 14px;
	max-height: 14px;
}

.rdBtn.selected> div> div {
	background-color: var(--colorBtn);
}

.rdBtn> label {
	margin: auto 0 auto 0;
}

.share {
	min-width: 40px;
	max-width: 40px;
}

.share> div {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.share img {
	cursor: pointer;
}

#sharepnl {
	position: absolute;
	z-index: 6000;
	flex-direction: row;
	justify-content: space-evenly;
	border-radius: 5px;
	padding: 4px;
	background: var(--menuBg);
	box-shadow: 1px 1px 10px 0px #d5d1d0;
	min-width: 200px;
	max-width: 200px;
	min-height: 50px;
	max-height: 50px;
}

#sharepnl img {
	cursor: pointer;
	min-width: 42px;
	max-width: 42px;
	min-height: 42px;
	max-height: 42px;
}

div.smallBtn {
	min-width: 40px;
	max-width: 40px;
	min-height: 40px;
	max-height: 40px;
	margin-right: 4px;
	border-radius: 4px;
	background-color: var(--colorBtn);
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	color: #fff;
	font-size: 18px;
	font-weight: bolder;
	padding-top: 8px;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

div.smallBtn.param {
	background: #525e86;
}

div.smallBtn.disabled,div.smallBtn.param.disabled,div.smallBtn.disabled:hover,div.smallBtn.disabled.selected,.smallBtn.disabled.param:hover,.smallBtn.disabled.param.selected {
	cursor: auto;
	background: #b2b2b2;
	color: #fff;
}

.smallBtn:hover,.smallBtn.selected {
	background-color: #f78c6a;
}

.smallBtn.param:hover,.smallBtn.param.selected {
	background-color: #7689c8;
}

.hfc {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.vfc {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hflex {
	display: flex;
	flex-direction: row;
}

.hfm> label {
	min-width: 170px;
	max-width: 170px;
	margin: auto 0 auto;
}

.w100 {
	width: 100%;
}