/*### FOR ALL ###*/
@media screen  {
html {
	width:100%;
	height:100%;
	position:fixed;
}
body, * {
  font-family:ptsans;
  font-size:14px;
}
select,
option {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height:20px;
	height:20px;
}

body {
	position:relative;
	width:100%;
	height:100%;
}
.dropdownlist {
	position:relative;
	display:inline-block;
	z-index:1000;
	white-space:nowrap;
}
.dropdownlist.open {
	z-index:1100;
}

		.dropdownlist {
			height:30px;
		}
		.dropdownlist .group,
		.dropdownlist .option {
			height:25px;
			line-height:25px;
		}
		.dropdownlist .face {
			position:relative;
			display:inline-block;
			padding:0 30px 0 5px;
			line-height:30px;
			height:30px;
			box-sizing:border-box;
			cursor:pointer;
			min-width:160px;
	}
		.dropdownlist .text {
			display:inline-block;
			width:100%;
			overflow:hidden;
			user-select:none;
	}
		.dropdownlist .arrow {
			position:absolute;
			top:50%;
			transform:translateY(-50%);
			right:5px;
			width:14px;
			height:10px;
			pointer-events:none;
		}
		.dropdownlist.open .arrow {
			transform:translateY(-50%) rotate(180deg);
		}
		.dropdownlist .list {
			position:absolute;
			display:none;
			top:calc(100% + 3px);
			min-width:100%;
			max-height:20em;
			overflow-y:auto;
			overflow-x:hidden;
			scrollbar-width: none;
			scrollbar-height: none;
			box-sizing:border-box;
		}
		nav::-webkit-scrollbar {
			width:0px;
			height:0px;
		}

		.dropdownlist.open .list {
			display:block;
		}
				.dropdownlist .group {
					display:block;
					font-size:18px;
					padding:0 5px;
					font-family:haettenschweiler !important;
				}
				.dropdownlist .option {
					display:block;
					padding:0 5px 0 10px;
					cursor:pointer;
					white-space:nowrap;
				}
				.dropdownlist .wait {
					position:absolute;
					top:3px;
					right:2px;
					pointer-events:none;
				}
.dropdownlist.waiting {
	pointer-events:none;
}
		.dropdownlist.waiting .arrow {
			display:none;
		}

button,
.buttons a,
.bt{
	display:inline-block;
	position:relative;
	padding:3px 5px;
	border:1px solid;
	border-radius:0px;
	cursor:pointer;
}
a.faicon:before {
	display:inline-block;
	margin-left:3px;
	margin-right:9px;
}
.buttons a:before,
.bt:before {
	display:inline-block;
	margin-left:3px;
	margin-right:9px;
	opacity:0.7;
}
.buttons a:hover:before,
.bt:hover:before {
	opacity:1;
}
.buttons a.icon svg,
.bt.icon svg {
	position:absolute;
	left:2px;
	top:50%;
	transform:translateY(-50%);
	height:16px;
	width:16px;
}


@keyframes uwait {
    0%   {transform:rotate(0deg);}
    25%  {transform:rotate(90deg);}
    50%  {transform:rotate(180deg);}
    75%  {transform:rotate(270deg);}
    100% {transform:rotate(360deg);}
}    
.wait {
  display:none;
  width:20px;
  height:20px;
}
    .wait svg {
      width:20px;
      height:20px;
      animation-name: uwait;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      transform-origin:10px 10px;
      animation-timing-function: steps(2, end);
    }
    .wait path {
      stroke-width:2px;
      stroke-linejoin:round;
      fill:none;
    }
.waiting .wait {
  display:inline-block;
}

.onoff {
	--height:16px;
	--pad:2px;
	position:relative;
	display:inline-block;
	height:var(--height);
	width:calc(var(--height) * 1.5 + var(--pad));
	cursor:pointer;
}
.onoff:before {
	content:'';
	position:absolute;
	display:block;
	top:0;
	right:0;
	width:100%;
	height:var(--height);
	border-radius:calc(var(--height) / 2);
	transition:0.2s;
	box-sizing:border-box;
	border:1px solid transparent;
}
.onoff:after {
	--size:calc(var(--height) - var(--pad) * 2);
	content:'';
	position:absolute;
	display:block;
	top:var(--pad);
	left:var(--pad);
	width:var(--size);
	height:var(--size);
	border-radius:50%;
	transition:0.2s;
}
.onoff.on:before {
	transition:0.2s;
}
.onoff.on:after {
	left:calc(100% - var(--size) - var(--pad));
	transition:0.2s;
}
	
}

/*### FLAGS AND ICONS ###*/
@media screen  {
.flag {
	width:22px;
	height:15px;
	background-size:22px 15px;
	background-repeat:no-repeat;
}
.flag.fr,
.fr .flag,
*[rel='fr'] .flag {
  background-image:url(../../assets/img/flag_fr.svg);
}
.flag.en,
.en .flag,
*[rel='en'] .flag {
  background-image:url(../../assets/img/flag_en.svg);
}
.icon.good,
.chk1 {
	background-image:url(../../assets/img/icon_good.svg);
	background-position:center 7px;
	background-size:16px 16px;
	background-repeat:no-repeat;
	min-width:25px;
}
.icon.bad,
.chk0 {
	background-image:url(../../assets/img/icon_bad.svg);
	background-position:center 7px;
	background-size:16px 16px;
	background-repeat:no-repeat;
	min-width:25px;
}

.icon {
	background-repeat:no-repeat;
}
.bt.icon {
	padding-left:22px;
	background-position:3px center;
}
.icon.mail {
	background-image:url(../../assets/img/icon_mail.svg);
}
.icon.txt {
	background-image:url(../../assets/img/icon_txt.svg);
}
.icon.excel {
	background-image:url(../../assets/img/icon_excel.svg);
}
.icon.csv {
	background-image:url(../../assets/img/icon_csv.svg);
}
.icon.xml {
	background-image:url(../../assets/img/icon_xml.svg);
}
.special {
	height: 18px;
	background-image: url(../../assets/img/icon_new.svg);
	background-position:center 5px;
	background-size:16px 16px;
	background-repeat: no-repeat;
	padding-left: 10px !important;
	padding-right: 10px !important;
}
*[draggable] {
	cursor:grab;
}
}