/* CSS */
head{font-family:'xsphone,phone,xlphone,tablet,xltablet,desktop,xldesktop'}@media only screen and (min-width:105em){body:after{font-family:xltablet}}@media only screen and (max-width:85.375em){body:after{font-family:xltablet}}@media only screen and (max-width:75em){body:after{font-family:desktop}}@media only screen and (max-width:64em){body:after{font-family:tablet}}@media only screen and (max-width:60em){body:after{font-family:xlphone}}@media only screen and (max-width:40em){body:after{font-family:phone}}@media only screen and (max-width:31.25em){body:after{font-family:xsphone}}*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

* { /*margin: 0px;*/ padding: 0px; }

html {
  border : 0 none ; 
  font-size:92.8%;
  height: 100%;
  min-height: 100%;
  position:relative;
  background-color: #f4f4f4;
}

body {
  font-family: Montserrat, sans-serif;
  border : 0 none; 
  color : #646464; 
  font-size:1em;line-height:1.5em;
  min-height: 100%;
  height: 100%;
} 

div,td { font-size:1em;line-height:1.5em; padding: 0px; }
#header { padding: 16px; color: #b4b4b4; background: #222222; border-bottom: solid 1px #3e4959; } 

#topmenu { width: 100%; clear: both; z-index: 1;}
#topmenu  nav { width: 100%; font-size: 18px; position: sticky; top: 0; }
#topmenu  nav > ul { margin: 0px; padding: 0px; display: flex; text-align: center; box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.3); height: 50px; }
#topmenu  nav ul { list-style-type: none; }
#topmenu  nav > ul > li { color: #FFFFFF; background-color: #303030; position: relative; height: 100%; flex: 1; }
#topmenu  nav > ul > li:hover > a { color: #3a7fc5 !important; }
#topmenu  nav > ul > li > a { color: #FFFFFF !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#topmenu  nav > ul > li.on { background: #5e5e5e ; text-decoration: none; color: #242424; } 
#topmenu  li a { text-decoration: none; color: white; }
#topmenu .menu-deroulant > a:after{ content: '❯'; font-size: 15px; margin-left: 7px; display: inline-block; }
#topmenu .menu-deroulant:hover > a:after{ animation: rotationFleche 0.2s linear forwards; }

  @keyframes rotationFleche {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(45deg);
    }
    100%{
      transform: rotate(90deg);
    }
  }
  
#topmenu .sous-menu { margin-top: 50px; width: 100%; text-align: left; overflow: hidden; max-height: 0; border-radius: 2px; background-color: white; }
#topmenu .menu-deroulant:hover > .sous-menu { animation: apparitionSousMenu 1s forwards; }
  
  @keyframes apparitionSousMenu {
    0% {
      box-shadow: 0px 3px 3px 1px rgba(0,0,0,0);
      border-top: 3px solid #2169EC;
    }
    30% {
      box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
    }
    100% {
      max-height: 50em;
      border-top: 3px solid #2169EC;
      box-shadow: 0px 3px 3px 1px rgba(0,0,0,0.3);
    }
  }
  
#topmenu .sous-menu > li:hover { background-color: #3a7fc5; }
#topmenu .sous-menu > li > a { background: #f4f4f4; color: black; position: relative; align-items: center; display: flex; height: 50px; padding-left: 20px; width: 100%; }
#topmenu .sous-menu > li:hover > a { background-color: white; }

#header a,  #header a:active {   text-decoration: none; color: #c4c4c4;}
#header a:link, #header a:visited { text-decoration: none; color: #c4c4c4; }
#header a:hover {  color: #FFFFFF; text-decoration: none;  } 
#header .the-icons { font-size: 15px; letter-spacing: -.5px; } 

#mobilemenulinks ul li a { 
	padding: 8px 24px;
	border-top:1px solid #000000;
	display: block;
	background-color: #343434;
	 font-family: "Roboto",Arial;
	 text-transform: uppercase;
}

#mobilemenulinks ul { 
	list-style: none; 
	margin: 0; 
	padding: 0; 
	text-align: left; 
	 font-family: "Roboto",Arial;
}
#mobilemenubutton .the-icons { text-shadow: none;  color: #FFFFFF; font-size: 32px; font-family: "Roboto",Arial; } 

.headersearchcontainer { display: flex; flex-wrap: wrap; text-align: center;  justify-content: center;  } 
.headersearch { font-size: 17px; padding: 4px; box-sizing: border-box; margin-bottom: 6px; margin-top: 0px; height: 36px; margin-right: 2px; } 
.headersearchselect { font-size: 15px; padding: 4px; margin-top: 0px; height: 36px;margin-left: 2px;  } 

.error { background: #d22c1a; border: solid 1px #ac2314; color: #FFFFFF; padding: 8px; text-shadow: 1px 1px 1px #ac2314;  }
.inlineerror { background: #d22c1a; border: solid 1px #ac2314; color: #FFFFFF; padding: 8px; text-shadow: 1px 1px 1px #ac2314; display: inline-block; border-radius: 2px; }
.error .the-icons { color: #FFFFFF; text-shadow: none; } 
.success { background-color: #97D692; border: solid 1px #3C9E33; color: #FFFFFF; padding: 8px; text-shadow: 1px 1px 1px #3C9E33;  }
.good {  background: #1AD157; border: solid 1px #14AD47;   color: #FFFFFF; padding: 8px; text-shadow: 1px 1px 1px #14AD47;}

.revise { background: #E7933F; border: solid 1px #E7933F; color: #FFFFFF; padding: 8px; text-shadow: 1px 1px 1px #b7731F;  }
	
.error a, .error a:active { text-decoration: none; color: #FFFFCC; }
.error a:link, .error a:visited { text-decoration: none; color: #FFFFCC; }
.error a:hover { color: #FFFF00; text-decoration: underline; } 

#success { font-size: 13px; 	font-weight: bold;  color: #135E0C; background-color: #97D692; border: solid 1px #3C9E33; padding: 6px; }
#success a:link, #success a:visited {  font-weight: normal; text-decoration: none; color: #FFFFFF; }
#success a:hover {  font-weight: normal; color: #FFFFFF; text-decoration: underline; } 
#success a:active {  font-weight: normal; text-decoration: none; color: #FFFFFF; }

#windowedit { display: none; opacity: 0; z-index: 301; }

.smallfullshow { width: 100% !important; }

#log { display: none; position: fixed; top:8px; left: 8px; background: #008ad3; color: #FFFFFF; z-index: 1000; border: solid 1px #008ad3; border-radius: 2px; padding: 4px; } 
.nofloat { float: none !important; width: 100% !important; margin: auto; }
.the-icons { font-size: 16px;  line-height: 16px;  color: #545454; }
.the-icons:hover { cursor: pointer; text-decoration: none; color: #000000;} 
.infoboxes {  border: solid 1px #e1e1e1; background: #f0f0f0; } 
.infoboxes .infoinner { padding: 16px; } 
.infotips { color: #545454;  } 
.infotips:hover { color: #000000; }
.moreinfo .info { text-align:left;padding: 12px; display: none; background: #FFFFFF; border: solid 1px #C4C4C4; border-radius: 2px; box-shadow: 0px 0px 8px rgba(0,0,0,.5);  width: 500px; position: absolute; z-index: 1000; } 

#leftside { width: 15%;background: #3e4959; float: left; min-height: 1200px; height: 100%; color: #C4C4C4; } 
#leftside h3 { color: #EFEFEF; text-shadow: none; } 
#leftside .inner{ }

#rightside { width: 85%; float: left; background: #F4F4F4;} 
#rightside .inner {  margin: 24px ;background: #FFFFFF; border-radius: 4px; border: solid 1px #E8E8E8; padding: 16px 32px; }

#fullsite .inner {  margin: 24px ;background: #FFFFFF; border-radius: 4px; border: solid 1px #E8E8E8; padding: 16px 32px; }

@media (max-width: 800px) {
	#rightside .inner {  margin: 8px 4px 8px 4px ; background: #FFFFFF; padding: 4px; } 
}

.p2 { width: 2%; }
.p3 { width: 3%; }
.p4 { width: 4%; }
.p5 { width: 5%; }
.p6 { width: 6%; }
.p7 { width: 7%; }
.p8 { width: 8%; }
.p9 { width: 9%; }
.p10 { width: 10%; }
.p11 { width: 11%; }
.p12 { width: 12%; } 
.p13 { width: 13%; }
.p15 { width: 15%; }
.p16 { width: 16%; }
.p17 { width: 17%; }
.p18 { width: 18%; }
.p20 { width: 20%; }
.p23 { width: 23%; }
.p25 { width: 25%; } 
.p27 { width: 27%; }
.p30 { width: 30%; }
.p32 { width: 32%; }
.p35 { width: 35%; }
.p38 { width: 38%; } 
.p40 { width: 40%; } 
.p45 { width: 45%; } 
.p50 { width: 50%; } 
.p55 { width: 55%; } 
.p60 { width: 60%; }
.p64 { width: 64%; }  
.p65 { width: 65%; } 
.p70 { width: 70%; } 
.p75 { width: 75%; } 
.p80 { width: 80%; } 
.p85 { width: 85%; } 
.p90 { width: 90%; } 
.p95 { width: 95%; } 
.p100 { width: 100%; } 

#goToTop{
  position:fixed;
  bottom:0;
  right: 0;
  z-index: 1000;
}

.optionsep { height: 2px; background: #f2e7df;  max-width: 80%; border: 0; margin: 32px auto; } 

.newtitles { margin-bottom: 16px; }
.newtitles span { font-size: 30px; 	font-weight:700;color:#000000; }

#contentArea { padding: 0px; height: 100%; min-height: 100%; position: relative;} 
#container{height: 100%;min-height: 100%; }

ul.sidemenus { font-size: 17px; margin-top: 16px;  } 
ul.sidemenus li { list-style: none; } 
ul.sidemenus li a {padding: 12px 12px 12px 20px; font-size: 15px; display: block; color: #FFFFFF;  } 
ul.sidemenus li a:hover { text-decoration: none; color: #efefef;  text-shadow: 1px 1px 1px #000000; }
ul.sidemenus li.on a { background: #F4F4F4; text-decoration: none; color: #242424;  } 
ul.sidemenus li.on a:hover { text-shadow: none;  } 

a, a:active { font-weight: normal; text-decoration: none; color: #1893D0; }
a:link, a:visited { font-weight: normal; text-decoration: none; color: #1893D0;}
a:hover { font-weight: normal; color: #0D5071; text-decoration: none;} 
a.bluelink { color: #0000c4; text-decoration: underline; } 
a.bluelink:hover { color: #0000FF; text-decoration: underline; } 

.listnolink { color: #000000;  font-size: 19px; font-weight: 700; } 
.underline .listlink, .underline .listlink:visited { font-size: 19px; font-weight: 700; color: #1893D0; } 
.underline .listlink:hover { font-size: 19px; font-weight: 700; color: #0D5071; } 
.listsublink { font-weight: 700; color: #797979;}
.underline .listsublink a, .underline .listsublink a:visited { color: #797979; font-weight: 700;} 
.underline .listsublink a:hover { color: #1893D0; } 
.listsublinksmall { font-weight: 400; color: #797979;}
.underlinehl .listlink, .underlinehl .listlink:visited { font-size: 19px; font-weight: 700; color: #1893D0; } 
.underline .listsublinksmall a, .underline .listsublinksmall a:visited { color: #797979; font-weight: 400;} 
.underline .listsublinksmall a:hover { color: #1893D0; }
.underlinehl .listsublink a, .underlinehl .listsublink a:visited { color: #797979; font-weight: 700;} 
.underlinehl .listsublink a:hover { color: #1893D0; } 

.center { text-align: center; } 
.left { float: left; } 
.right { float: right; }
.clear { clear:both; font-size: 0px;line-height: 0px; width: 0px; height: 0px; }
.textright { text-align: right; } 
.field100 { width: 100%; box-sizing: border-box;}
.field90 { width: 90%; box-sizing: border-box;}
.field80 { width: 80%; box-sizing: border-box;}
.field70 { width: 70%; box-sizing: border-box;}
.field60 { width: 60%; box-sizing: border-box;}
.field50 { width: 50%; box-sizing: border-box;}
.field40 { width: 40%; box-sizing: border-box;}
.field25 { width: 25%; box-sizing: border-box;}
.field20 { width: 20%; box-sizing: border-box;}
.field15 { width: 15%; box-sizing: border-box;}
.field10 { width: 10%; box-sizing: border-box;}
.pageContent, .pc { padding: 4px; } 

.selectallbuttons span {border: solid 1px #949494; padding: 4px 8px 4px 4px; border-radius: 2px; font-size: 13px; box-sizing: border-box; color: #949494;}  
.selectallbuttons span:hover {background: #3a7fc5; border: solid 1px #3a7fc5;  color: #FFFFFF;} 

.underline { border-bottom: solid 1px #f4f4f4;  padding: 12px 8px; -webkit-transition: background-color .2s;    transition: background-color .2s;   } 
.underline:hover { border-bottom: solid 1px #f4f4f4; background: #f9f9f9; color: #000000;  -webkit-transition: background-color .2s;    transition: background-color .2s; } 
.underlinecolumn { border-bottom: solid 1px #f4f4f4;  padding: 12px 8px;  color: #a4a4a4;} 

.underline:nth-child(even) {
	background-color: #FCFCFC;
	}
.underline:nth-child(even):hover {
	background-color: #f9f9f9;
	}

.underline .bold { color: #090909; font-weight: bold; padding: 4px 0; } 
.underlinelabel { border-bottom: solid 1px #f4f4f4; margin: 0 0 8px 0; padding: 8px; color: #090909;  font-size: 17px; } 
.underlinespacer {  margin: 0 0 8px 0; padding: 8px; } 
.underline .sub { padding: 8px 0 2px 0; } 
.underline .small, .underlinelabel .small { font-size: 11px; } 
.underline .label { padding: 0 0 4px 0 ; color: #545454; font-size: 14px; } 
.underline .descr { padding: 0 0 4px 0 ; } 
.underlinesection { background: #F9F9F9; border: solid 1px #e4e4e4; padding: 8px; } 
.underlinesection .underline {  border-bottom: solid 1px #e4e4e4; } 

.labels { box-sizing: border-box; padding: 4px; border-radius: 4px; margin: 4px; font-size: 11px;  white-space:nowrap; } 
.labelselect { opacity: .4; cursor: pointer; } 
.labelselect:hover { opacity: 1; } 
.mainlabelselect { opacity: .4; cursor: pointer; } 
.mainlabelselect:hover { opacity: 1; cursor: pointer; }

.labeleditingselected { box-shadow: 0px 0px 8px rgba(0,0,0,.7); cursor: pointer; } 

.hidden, .hide { display: none; } 

.np { padding: 4px; background: #FFFFFF; border: solid 1px #E4E4E4; margin: 4px; color: #c4c4c4; } 
a.np { padding: 4px; background: #F4F4F4; border: solid 1px #c4c4c4; margin: 4px; color: #000000; box-shadow: none;} 

  .pageTitle,h1,.head,.sectiontitle {
    font-weight:700;
    font-family:"Roboto","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;	
    font-size:27px;
    line-height:1.6em;margin-bottom:.2em;letter-spacing:-0.029em;
    color: #000000;
    width: 100%;
    font-weight: normal;
    margin: 8px 0 8px 0 ;
  }

  a.pageTitle:active,h1 a ,h1 a:active,a.head :active { text-decoration: none; color: #264C9E; text-shadow:1px 1px 1px #FFF;  }
  a.pageTitle:link, a.pageTitle:visited,a.head :link,a.head :visited,h1 a:link,h1 a:visited { text-decoration: none; color: #1893D0; }
  a.pageTitle:hover,a.head:hover ,h1 a:hover { color: #1893D0; text-decoration: underline; } 

  h2, .h2 {
    font-size: 23px;
    color: #000000;
    width: 100%;
    font-weight: 700;
    text-shadow:1px 1px 1px #FFF; 
  }

  h2 a,h2 a:active{ text-decoration: none; color: #1893D0; font-weight: normal; }
  h2 a:link,h2 a:visited { text-decoration: none; color: #1893D0; }
  h2 a:hover { color: #0D5071; text-decoration: none; } 
  
  a.h2:active  { text-decoration: none; color: #1893D0; }
  a.h2:link ,a.h2 :visited { text-decoration: none; color: #1893D0; }
  a.h2:hover { text-decoration: none; color: #0D5071; }
    
  h3, .h3 {
    font-size: 19px;
    color: #000000;
    width: 100%;
    font-weight: normal;
    text-shadow:1px 1px 1px #FFF; 
  }
  h3 a:active{ text-decoration: none; color: #1893D0; }
  h3 a:link,h3 a:visited { text-decoration: none; color: #1893D0; }
  h3 a:hover { color: #0D5071; text-decoration: none; } 
  
  h4, .h4 {
    font-size: 17px;
    color: #000000;
    width: 100%;
    
    text-shadow:1px 1px 1px #FFF; 
  }
  h4 a:active{ text-decoration: none; color: #000000; }
  h4 a:link,h4 a:visited { text-decoration: none; color: #000000; }
  h4 a:hover { color: #1893D0; text-decoration: none; } 
  
.buttons a {  background: #3a7fc5; color: #FFFFFF; padding: 8px; text-shadow:0px 0px 1px #B36C2B; border: solid 1px #2a6fa5; border-radius: 4px; white-space:nowrap; margin-bottom: 4px; } 
.buttons a:hover {background: #FFFFFF; color: #000000; padding: 8px; text-decoration: none; box-shadow: 0px 0px 4px rgba(0,0,0,.5); border: solid 1px #999999; white-space:nowrap;} 
.buttons .the-icons:hover { color: #ffffff; } 
.buttons .the-icons { color: #ffffff; } 
.buttonsgray .numberCircle { background: #63717e; } 
.buttonsgray .on { background: #263140; } 
.buttonsgray .uploadblue { background: #008ad3; } 
.buttonsgray { margin-bottom: 16px; border-bottom: solid 1px #F5F5F5; letter-spacing: -.5px; text-transform: uppercase; } 
.buttonsgray ul li a { padding: 8px; display: inline-block;	background-color: #a4a4a4; color: #FFFFFF; float: left; margin: 0px 4px 4px 0px; }
.buttonsgray ul { list-style: none; margin: 0; padding: 0; text-align: left; }
.buttonsgray ul li a:hover { background-color:  #263140; }
.buttonsgray ul .drop { padding: 8px;	display: inline-block; background-color: #a4a4a4; color: #FFFFFF; float: left; margin: 0px 4px 4px 0px; text-transform: uppercase; }
.buttonsgray ul .drop a { display: block;	float: none; }
.buttonsgray .the-icons { color: #FFFFFF; opacity: 1; } 

.numberCircle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  padding: 8px;
  font-size: 10px;
  line-height: 1em;
  background:#9fa2a5;
  position: relative;
  display: inline-block;
  margin-left: -10px;
}

.numberCircle .height_fix { margin-top: 100%; }
.numberCircle .content {
  position: absolute;
  left: 0;
  top: 50%;
  height: 100%;
  width: 100%;
  text-align: center;
  margin-top: -5px; /* Note, this must be half the font size */
  color: #FFFFFF;
  text-shadow: 1px 1px 1px #777f87; 
  text-shadow: none;
}

@media (max-width: 800px) {
	.buttonsgray ul li a { 
		padding: 8px;
		/* display: block;
		 float: none; */
		background-color: #a4a4a4;
		color: #FFFFFF;
		margin: 0px 4px 4px 0px;
	}
}

input.submit,.submitButton,.saveform  { 
	font-size: 15px; 
	cursor: pointer;
	color: #FFFFFF;
	border: solid 1px #3a7fc5;
	padding: 8px;
	margin: 0;
	background: #3a7fc5;
	box-shadow: none;
	border-radius: 2px; 
	transition: box-shadow 0.2s ease-out; 
	text-shadow: 1px 1px 1px #2667a7; 
}

input.deleteButton {
	font-size: 15px; 
	cursor: pointer;
	color: #FFFFFF;
	border: solid 1px #c53a3a;
	padding: 8px;
	margin: 0;
	background: #c53a3a;
	box-shadow: none;
	border-radius: 2px; 
	transition: box-shadow 0.2s ease-out; 
	text-shadow: 1px 1px 1px #c53a3a; 
}

input.submit:hover,.submitButton:hover, .submitSmall:hover, .submitBig:hover, .saveform:hover { 
	background: #569be1 ;
	border: solid 1px #3a7fc5;
	color: #FFFFFF;
	box-shadow: 0px 0px 8px rgba(0,0,0,.8);
}

input.deleteButton:hover { 
	background: #b94b4b ;
	border: solid 1px #c53a3a;
	color: #FFFFFF;
	box-shadow: 0px 0px 8px rgba(0,0,0,.8);
}

.submitmenu, .submitSmall { 
	cursor: pointer;
	color: #FFFFFF;
	border: solid 1px #222222;
	background: #444444;
	padding: 4px;
	background-image: none;
}

#pageTitle { font-size: 27px; color: #000000; padding: 4px; font-weight: 900; 	text-shadow:1px 1px 1px #FFF;	font-family: "Roboto","Helvetica Neue", arial; margin: 0 0 4px 0 ;} 
#pageTitle .sep { width: 19px; height: 26px;  background: #FFFFFF url('../graphics/sep.gif') left top no-repeat;} 
#pageTitle a,  #pageTitle a:active {   text-decoration: none; color: #646464; }
#pageTitle a:link, #pageTitle a:visited { text-decoration: none; color: #646464;   }
#pageTitle a:hover {  color: #1893D0; text-decoration: none;  } 

.TFpagetitle, .pagetitle,.pagetitle:active,.pageTitle,.pageTitle:active {	font-size: 120%; 	color: #000000; }
a.pagetitle:link, a.pagetitle:visited, a.pageTitle:link, a.pagetitle:visited,a.pageTitle:visited{ font-size: 120%; font-weight: bold; text-decoration: none; color: #000000; }
a.pagetitle:hover,a.pageTitle:hover { font-size: 120%; font-weight: bold; color: #000000; text-decoration: underline; }

#windowframe { z-index: 200; position: fixed;  background: #FFFFFF; border: solid 2px #000000; width: 60%; height: 80%; margin: auto; left: 20%; top: 10%;	-moz-box-shadow: 1px 1px 10px #000000;	-webkit-box-shadow: 1px 1px 10px #000000;	-goog-ms-box-shadow: 1px 1px 10px #000000;	box-shadow: 1px 1px 10px #000000; }
#windowlargeframe { z-index: 200; position: fixed;  background: #FFFFFF; border: solid 2px #000000; width: 80%; height: 80%; margin: auto; left: 10%; top: 10%;	-moz-box-shadow: 1px 1px 10px #000000;	-webkit-box-shadow: 1px 1px 10px #000000;	-goog-ms-box-shadow: 1px 1px 10px #000000;	box-shadow: 1px 1px 10px #000000; }
#windowframefull { z-index: 200; position: fixed;  background: #FFFFFF; border: solid 2px #000000; width: 100%; height: 100%; margin: auto; left: 0%; top: 0%;	-moz-box-shadow: 1px 1px 10px #000000;	-webkit-box-shadow: 1px 1px 10px #000000;	-goog-ms-box-shadow: 1px 1px 10px #000000;	box-shadow: 1px 1px 10px #000000; }

textarea, input, select { 
	background: #FCFCFC;
	color: #242424;
	border: solid 1px #E0E0E0;
	font-weight: normal;
	border-radius: 2px;
	padding: 6px;
	font-family : 'Roboto',Arial, "Century Gothic", Verdana, Tahoma; 
font-size: 13px;
}

@media (max-width: 800px) {
	.hidesmall { display: none; } 
	.showsmall { display: block; } 
	.nofloatsmall {  float: none !important; width: 100% !important; margin: auto;} 
	.nofloatsmall div {  } 
}

#framewindow { padding: 20px; } 

@media (max-width: 800px) {
#framewindow { padding: 2px; } 
}

.pform { position: absolute; width: 950px; top: 20%; left: 50%; margin-left: -475px;  background: #ffffff; border: solid 1px #c4c4c4; box-shadow: 0 0 30px rgba(0,0,0,.6); z-index: 100; }
.pformsmall { position: absolute; width: 98%; top: 0px; left: 0; margin-left: 1%; background: #ffffff; border: solid 1px #c4c4c4; box-shadow: 0 0 0px rgba(0,0,0,.8); z-index: 100; }

#loadingbar { position: fixed; top: 0; left: 0; z-index: 1000;} 

.load-bar {
  position: relative;
  width: 100%;
  height: 6px;
  background-color: #fdba2c;
}
.bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
}
.bar:nth-child(1) {
  background-color: #da4733;
  animation: loading 3s linear infinite;
}
.bar:nth-child(2) {
  background-color: #3b78e7;
  animation: loading 3s linear 1s infinite;
}
.bar:nth-child(3) {
  background-color: #fdba2c;
  animation: loading 3s linear 2s infinite;
}
@keyframes loading {
    from {left: 50%; width: 0;z-index:100;}
    33.3333% {left: 0; width: 100%;z-index: 10;}
    to {left: 0; width: 100%;}
}

.loadingcircle {
  height: 24px;
  width: 24px;
  margin:auto;
  position: relative;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left: 6px solid rgba(144, 144, 144, .15);
  border-right: 6px solid rgba(144, 144, 144, .15);
  border-bottom: 6px solid rgba(144, 144, 144, .15);
  border-top: 6px solid rgba(144, 144, 144, .8);
  border-radius: 100%;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}

@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#newsuccessmessage { position: fixed; z-index: 2000; left: 8px; top: 8px; box-sizing: border-box; padding: 16px; background:#56ad56; width: 300px; color: #FFFFFF; font-size: 17px; display: none; } 
#newsuccessmessage .the-icons { color: #FFFFFF; text-shadow: none; } 
#newerrormessage { position: fixed; z-index: 1000; left: 8px; top: 8px; box-sizing: border-box; padding: 16px; background: #990000; width: 300px; color: #FFFFFF; font-size: 17px; display: none; } 
#newerrormessage .the-icons { color: #FFFFFF; text-shadow: none; } 

.masterpad { padding: 0px 2px 6px 13px; }
@media (max-width: 800px) {
	.masterpad { padding: 0px 2px 2px 2px; }
}

.roundedFormColContainer { padding: 6px; } 
.roundedFormColLabel { float: left; color: #a9a9a9; } 

#roundedForm, .listbox ,#roundedSide, .boxedContent   { 
	-moz-border-radius:2px;
	border-radius: 2px;
	padding: 6px;
	border: solid 1px #F4F4F4;
}
#roundedForm .row, #roundedForm .rowhover, .tdlines, .roundedSideSep {
	padding: 12px 8px; 
	color: #646464;
	border-bottom: solid 1px #F4F4F4;
	text-shadow:1px 1px 1px #FFF;
}

.styledbox .row { padding: 12px 2px; border-bottom: solid 1px #e7e7e7; }
#roundedForm .rowspacer, .rowspacer { padding: 12px 8px; }
#roundedForm .row b { color: #000000; } 
.rowhover .submenu .hovermenu { display: none; color: #FFFFFF; } 
#roundedForm .rowhoveron {
	padding: 8px 4px;
	color: #000000;
	border-bottom: solid 1px #E4E4E4;
	text-shadow:1px 1px 1px #FFF;
	background: #FFFFFF;
}
#roundedForm .rowhoveron .submenu  a, #roundedForm .rowhover .submenu  a{ color: #949494; font-size: 12px; font-weight: normal; }
#roundedForm .rowhoveron .submenu  a:hover, #roundedForm .rowhover .submenu  a:hover{ color: #242424; font-size: 12px; font-weight: normal; }
#roundedForm .rowhover:hover { background: #F4F4F4; }
#roundedForm .large a{	color: #212121; font-weight: bold; font-size: 17px; } 
#roundedForm .large2 a{	color: #212121; font-weight: bold; font-size: 15px; } 
#roundedForm .label, .tdtop, #roundedSide .label {
	padding: 8px 0px;
	color: #000000; font-weight: bold;
	border-bottom: solid 1px #F4f4f4;
	text-shadow:1px 1px 1px #FFF;
}
#roundedForm .label a{ color: #000000; font-weight: bold; }
#roundedForm .small{ font-size: 11px; }
#roundedForm .lines{ padding: 4px; border-bottom: solid 1px #e4e4e4;}
#roundedForm .pad{ padding: 4px;}
#roundedForm  .muted, .muted{ color: #999999; }
#roundedForm  .muted:hover, .muted:hover{ color: #212121; }

#roundedForm .thumbnail { 
	-moz-box-shadow: 1px 1px 8px #444444;
	-webkit-box-shadow: 1px 1px 8px #444444;
	-goog-ms-box-shadow: 1px 1px 8px #444444;
	box-shadow: 1px 1px 8px #444444;
	border: solid 1px #242424;
}

.bottomSave { 
	position: fixed; bottom: 0px;  text-align: center; 
	z-index: 103;
	background: #FFFFFF;
	width: 100%;
	left: 0;
	padding: 8px; 
	border-top: solid 1px #efefef;
	text-transform: uppercase;
	box-shadow: 0px 0px 8px rgba(0,0,0,.6);
}
.bottomSave input { text-transform: uppercase; } 

input[type=checkbox] + label {
	color: #848484;
} 
input[type=checkbox]:checked + label {
  color: #000000;
  font-style: normal;
  font-weight: bold;
} 
input.checkbox,.toselect ,input.radio, .checkbox, .results1{ 
	background: transparent url();
	border: 0px;
	margin: 0;
	outline: none;box-shadow: none;
}

.valign { 
	display: flex;
   /* justify-content: center; */
    align-items: center;
}

/* New CSS for rows and such */
.row { box-sizing: border-box; padding: 8px 12px; margin: 8px 0px; } 
.row .label, .rowlined .label { margin-bottom: 8px; color: #141414;  } 
.row .muted, .rowlined .muted { color: #b4b4b4; box-sizing: border-box; padding: 8px 0px;  } 
.rowsectiontitle { box-sizing: border-box; padding: 8px 12px; margin: 8px 0px 8px 0px; border-bottom: solid 1px #e4e4e4; font-weight: bold; color: #000000; font-size: 17px; } 
.rowlined { box-sizing: border-box; padding: 8px 12px; margin: 8px 0px; border-bottom: solid 1px #e4e4e4; } 
.rowdescr { box-sizing: border-box; padding: 4px 12px; margin: 0px 0px; } 
.margin12bottom { margin-bottom: 12px; } 
.margin16bottom { margin-bottom: 16px; } 
.margin12top { margin-top: 12px; } 
.margin16top { margin-top: 16px; } 

.toppageinfo { padding: 16px 16px; margin: 16px 0px; box-sizing: border-box; background: #FAFAFA; border: solid 1px #F7F7F7; box-shadow: 0px 0px 6px rgba(0,0,0,.2); } 

/* Pages with 2 colums */
.twocolumns { width: 100%; } 
.twocolumns .leftside { width: 50%; float: left; } 
.twocolumns .rightside { width: 50%; float: left; } 
.twocolumns .leftside .content { margin-right: 48px; } 
.twocolumns .rightside .content { margin-left: 48px; } 

@media (max-width: 800px) {
	.twocolumns .leftside { width: 100%; float: none; } 
	.twocolumns .rightside { width: 100%; float: none; } 
	.twocolumns .leftside .content { margin-right: 0px; } 
	.twocolumns .rightside .content { margin-left: 0px; } 
}

#loadpage { width:100%; height:100%; min-height: 100%; position: absolute;  overflow: hidden; display: block;	background-image: url('../img/loading3.gif');	background-repeat:no-repeat; background-position:center; }
#shadepagecontainer { width:100%; height:100%; min-height: 100%; margin:0; position: fixed; z-index: 200; left: 0; top: 0; }
#shadepage {
  width:100%;
  height:100%;
  min-height: 100%;
  /* background-image: url(pcicons/blurbg.png); */
  background-color:#242424;
  /* for IE */
  filter:alpha(opacity=95);
  /* CSS3 standard */
  opacity:0.95;
  position: absolute; 
  overflow: hidden;
  display: block;
  }

#shadepagecontent { color:#242424;	width: 100%; position: absolute; display: block; z-index: 201; left: 0; top: 10px; margin: auto; text-align: center; }

.flex { display: flex; } 
.flexrow { flex-flow: row  wrap;justify-content: space-around; } 

#pagewindowbgcontainer {
  width:100%;
  height:100%;
  min-height: 100%;
  margin:0;
  position: fixed;
  z-index: 300;
  left: 0;
  top: 0;
	display: none;
box-shadow: 0px 0px 60px 4px rgba(0, 0, 0, 0.8) inset; 
}

#sidemenuclose { 
	float: right;
	display: none;
	z-index: 1001;
	position: absolute;
	right: 4%;
	top: 40px;
}
.leftsidemobile { width:80% !important; z-index:1000; float:left; position:absolute; } 

#sidemenuclose .the-icons { color: #c4c4c4; font-size: 36px; } 
#sidemenubgcontainer {
  width:100%;
  height:100%;
  min-height: 100%;
  margin:0;
  position: absolute;
  z-index: 300;
  left: 0;
  top: 0;
	display: none;
	background: #000000;
}

#pagewindowbg  {
  width:100%;
  height:100%;
  min-height: 100%;
  /* background-image: url(pcicons/blurbg.png); */
  background-color:#000000;
  /* for IE */
  filter:alpha(opacity=50);
  /* CSS3 standard */
  opacity:0.5;
  position: absolute; 
  overflow: hidden;
  display: block;
box-shadow: 0px 0px 40px 4px rgba(0, 0, 0, 0.8) inset; 
}

/* Admin home page */
.homeh3 a, .homeh3 a:link, .homeh3 a:visited { color: #FFFFFF; } 
.homeh3 a:hover { color: #000000; text-shadow: 0px 0px 1px #c4c4c4; } 
.styledbox { border: solid 1px #F4F4F4; background: #F9F9F9; padding: 16px 12px; margin-top: -12px;   ; } 
.styledbox .row { padding: 12px 2px; border-bottom: solid 1px #e7e7e7; } 
.homebig1 { font-size: 30px; color: #000000; } 
.homebig2 { font-size: 21px; color: #000000; } 
.homebutton { padding: 4px; background: #ffffff; border: solid 1px #e4e4e4; color: #000000;} 
.homebutton :hover{ padding: 4px; background: #000000; border: solid 1px #e4e4e4; color: #000000;} 
.homelabel { background: #FFFFFF; border: solid 1px #DDDDDD; padding: 8px;  color: #242424;float: left; clear: right; margin-left: 8px; font-size: 17px; } 
.homelabel a { color: #000000; } 
.homelabel a:hover { color: #309DF0; text-decoration: none; } 
.homeactionbullet { color: #b4b4b4; font-size: 17px; cursor: pointer; } 
.homeactionbullet:hover { color: #5DBC4C; font-size: 17px; cursor: pointer; font-weight: bold; } 

.homesections { background: #FFFFFF; border: solid 1px #E9E9E9; padding: 16px; margin-bottom: 32px; border-radius: 2px;  } 
.homesections .header { color: #242424;  font-size: 19px;   } 
.homesections .sectioncontent {  border-top: solid 1px #F4F4F4;  padding-top: 4px; margin-top: 16px;  } 
.homesections .header a {color: #7d8896; font-size: 19px;  } 
.homesections .header a:hover { color: #1893D0 } 
.homeunderline { border-bottom: solid 1px #f4f4f4; padding: 10px 0px; } 

.homesectionsmuted { background: #949494; border: solid 1px #949494; padding: 16px; margin-bottom: 32px; border-radius: 2px; color: #747474 } 
.homesectionsmuted .header { color: #242424;  font-size: 19px;   } 
.homesectionsmuted .sectioncontent {  border-top: solid 1px #898989;  padding-top: 4px; margin-top: 16px; color: #747474; } 
.homesectionsmuted .header a {color: #444444; font-size: 19px;  } 
.homesectionsmuted .header a:hover { color: #000000 } 
.homesectionsmuted .nodata { color: #747474; } 

.homesections a {   } 
.homesections a:hover {  } 
.homeactions { }
.homesections:hover .homeactions { display: block; } 
.hometop {} 

.hometop .container { box-sizing:border-box; padding: 16px; float: left; width: 20%; text-align: center;  ; } 
.hometop .container div { color: #b4b6b8; } 
.hometop .big { font-size: 40px; color: #3e4959; font-weight: 600; text-shadow: 1px 1px 1px #FFFFFF; } 
.hometop .muted { color: #c4c4c4; } 
.hometop .homegreen { color: #04a65a; } 
.homeinner { padding: 0px 16px; } 

.home { background: #3e4959;  } 
.hometop .container { color: #F4F4F4; } 
.hometop .container div { color: #9fa2a5; } 
.hometop .container .big { font-size: 40px; color: #c4c4c4; font-weight: 600; text-shadow: 1px 1px 1px #0c1b30; } 
.hometop .muted { color: #5c6776; } 
.hometop .homegreen { color: #17c473; } 
.hometop .smallstats { color: #c4c4c4; font-weight: 600; text-shadow: 1px 1px 1px #0c1b30;} 
.hometop .smallhomegreen { color: #17c473;font-weight: 600; text-shadow: 1px 1px 1px #0c1b30; } 

.nodata { text-align: center; padding: 8px; box-sizing:border-box; color: #b4b4b4; } 
.inputtitle { font-size: 17px; } 

#sitecontent { font-size: 12px; color: #545454;  color: #FFFFFF;background: #3e4959; } 
#sitecontent a { color: #FFFFFF; } 
#sitecontent .large { font-size: 17px; } 
#sitecontent .info { padding: 4px 4px 4px 12px; } 
#sitecontent h2 a { font-size: 24px; color: #FFFFFF; line-height: 100%; text-shadow: none; } 
#sitecontent .info .inner{ padding: 8px; margin-right: 12px; border: solid 1px #cccccc;max-height: 150px; overflow-y: scroll; background: transparent;} 
#sitecontent .rowhover {  color: #FFFFFF; padding: 12px 12px 24px 20px;  display: block; font-size: 12px;}
#sitecontent .rowhover .submenu .hovermenu { display: none; font-size: 12px; line-height: 12px; color: #FFFFFF;  } 
#sitecontent .rowhover .submenu .hovermenu a {  font-size: 12px; color: #FFFFFF; text-shadow: 1px 1px 1px #000000;  } 
#sitecontent .rowhover .submenu .hovermenu a:hover{ color: #FFFFFF; } 
#sitecontent .rowhoveron { padding: 12px 12px 32px 20px; color: #000000;	text-decoration: none; background: #F4F4F4; }
#sitecontent .rowhoveron div  a { color: #444444; }
#sitecontent .rowhoveron a:hover { color: #000000; }
#sitecontent .rowhoveron .submenu a{ color: #444444; font-size: 12px; font-weight: normal; }
#sitecontent .rowhoveron .submenu a:hover { color: #000000; font-size: 12px; font-weight: normal; }
#sitecontent .rowhover:hover { color: #FFFFFF; text-shadow: 1px 1px 1px #000000; }
#sitecontent .rowhover:hover a { color: #FFFFFF; text-shadow: 1px 1px 1px #000000; }
#sitecontent .large a{	 font-size: 17px; } 
#sitecontent .large2 a{	font-size: 15px; } 

.BGyellow { background: rgb(255, 226, 145); }
.BGgreen { background: rgb(143, 255, 143); }
.BGred { background: rgb(255, 185, 185) !important;}
.BGgrey { background: rgba(199, 199, 199, 0.5); }

.greenpercent { color:rgb(51, 161, 93); }
.redpercent { color:rgb(158, 52, 52); }

.requiredFieldEmpty {	background: #fbd3d3 url('../graphics/alert.png') left center no-repeat; color:#000000; border: solid 1px #c64040; font-weight: normal;	text-indent: 18px; }

/* The switch - the box around the slider */
.switch { position: relative; display: inline-block; width: 44px; height: 18px; }

/* Hide default HTML checkbox */
.switch input { opacity: 0; width: 0; height: 0; }

/* The slider */
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }

/* Rounded sliders */
.slider.round { border-radius: 24px; }
.slider.round:before { border-radius: 50%; }

.tooltip{ position:fixed; z-index:9999; color:#fff; background:#000000; border: solid 1px #000000; padding:8px; display: none; text-shadow: none; text-align: left; font-size: 13px; -moz-border-radius: 4px; max-width: 500px; font-weight: normal; }
.tooltip div{ margin:0; padding:4px; padding:2px 7px; display: block; white-space: normal; }

.mobilesidemenu { margin: 6px 0 0px 0 ; font-size: 30px; }

#roundedFormContain { }

.cssClear { clear:both;font-size: 0px;line-height: 0px; width: 0px; height: 0px; }

.updatemessage, .blue { background: #468BB9; border: solid 1px #3477A4; padding: 8px; color: #FFFFFF; text-shadow: 1px 1px 1px #3477A4; font-family: "Roboto",Arial; } 
.updatemessage a, .updatemessage a:link, .updatemessage a:hover, .updatemessage a:visited { color:#FFFFFF; text-decoration: underline; } 

.wine-photo-nav-prev { position: absolute; left: 0px; top: 45%; font-size: 48px; z-index: 55; } 
.wine-photo-nav-next { position: absolute; right: 0px; top: 45%; font-size: 48px; z-index: 55; }

/* Tasting Map */
.carte { width: 85%; margin: 0 auto; }
path { stroke: #000000; stroke-width: 1px; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .25; fill: #86aae0; }
g:hover path { fill: #86cce0; }
g path:hover { fill: #86eee0; }