/* Pour la zone de chargement */
.overlay 
{
	display: none;
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: rgba( 255, 255, 255, .8 )
				url('https://i.stack.imgur.com/FhHRx.gif')
				50% 50%
				no-repeat;
}

body.loading {
	overflow: hidden;
}

body.loading .overlay {
	display: block;
}


#container-signin {
   width:26%;
   margin-left: 37%;
   margin-top : 50px;
   background-color : #F2F2F2;
   min-width: 300px;
   
   padding : 40px;
   
    /* shadows and rounded borders */
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.3);
}

#container-padlock span.glyphicon-lock {
    font-size: 60px;
	color : #02DCDE;
}

#container-games
{
	min-height: 78vh;
}

.message-info {
    font-size: 16px;
    color: #003300;
}
.message-error {
    font-size: 16px;
    color:red;
}

.bg-theme
{
	background-color : #02DCDE;
}
.color-theme
{
	color : #02DCDE;
}

.bg-dark-theme
{
	background-color : #03C2C6;
}

.color-white
{
	color : #FFF;
}

.bg-white
{
	background-color : #FFF;
}
.bg-light-gray
{
	background-color : #F2F2F2;
}

.container-options
{
	border : 1px solid #02DCDE;
}

#container-new-game
{
	background-color : #F2F2F2;
	max-height : 85vh;
	overflow-y:auto;
}

div
{
	margin-bottom: 5px;
}

nav a
{
	color : white;
}

#general-section
{
	background-color : #D8D8D8;
	max-height:83vh;
	overflow-y:auto;
}


#hacsModal .modal-body
{
	background-color : #F2F2F2;
	max-height:600px;
	overflow-y:auto;
}
#hacsModal .modal-footer
{
	background-color : #D8D8D8;
}

/*CONCEPTS*/
#glyph-ok
{
	font-size:50px;
	color: #1E8449
}
#glyph-fail
{
	font-size:50px;
	color: #C0392B
}


/*VISUALIZATIONS SECTION*/
#navbar-menu
{
	background-color:#02DCDE;
}

#navbar-menu .menuItem
{
	width:16%;
}

#navbar-menu ul.navbar-nav
{
	width:100%;
}
.btn-navbar
{
	width:100%;
	background-color:#02DCDE;
	color:#FFF;
	border : 1px solid #E6E6E6;
	white-space: normal;
	height:55px;
	border:none;
}

#navbar-menu-simple .nav-header
{
	background-color:#02DCDE;
	font-weight:bold;
	color: #FFF;
}
#navbar-menu-simple .category-title
{
	font-size: 22px;
}
#navbar-menu-simple .category-item
{
	font-weight: bold;
	cursor: pointer;
}
#navbar-menu-simple .category-item .selected
{
	background-color: #FF5B1A;
}
#navbar-menu-simple .category-item div
{
	/*padding-bottom: 0px !important;*/
	padding-top: 2px !important;
	min-height: 25px;
	max-height: 30px;
}

.category-item-span
{
	padding: 10px;
}
.text-directive
{
	font-size: 11px;
}

#navbar-menu-simple .info-sign
{
	/*background-color: #FF5B1A;*/
	font-size: 25px;
	font-style: italic;
	color: #FFF;
	min-height: 100%;
}
#navbar-menu-simple .info-sign-on
{
	background-color: #B404AE;
	
}
#navbar-menu-simple .info-sign-off
{
	background-color: #FF5B1A;
	
}
#navbar-menu-simple .glyphicon-info-sign
{
	padding-top: 13%;
}

.padding-top-10
{
	padding-top: 10px;
}

#container-logo-ludov
{
	padding: 0px;
	margin: 0px;
	float: left;
}
#container-logo-ludov img
{
	max-height: 70px;
	max-width: 100%;
	
	position: relative;
	top: -35px;
}

#container-logo-hacs
{
	float:left;
	padding-top: 10px;
	padding-left: 20px;
	max-width:220px;
}
#container-logo-hacs img
{
	max-height: 34px;
	max-width: 100%;
}


#topOptions
{
	margin:1%;
}

.themeBox
{
	background-color:#02DCDE;
	color:#FFF;
	border-right:2px solid;
	border-color:#FFFFFF;
	height:50px;
	padding-top:15px;

}

.chosenOptions div
{
	float:left;
	width:16%;
	height:50px;
	border-right:2px solid;
	border-color:#FFFFFF;
	text-align: center;
	padding-top:15px;
	font-weight:bold;
	color: #FFFFFF;
}

.chosenOptions
{
	width:100%;
	position: fixed;
	bottom: 55px;
	z-index:2;
}


.noDifference
{
	 background-color: 	none;
}
.Total
{
	 background-color: 	green;
	 color:white;
}
.percentageRslt {
  display: table;
  margin: 0 auto;
}
.Difference
{
	 background-color: 	red;
}
#columnchart
{
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	z-index : 3;
}

.small-box
{
	width:20px;
	height:20px;
	cursor: pointer;
}

.hdr-category
{
	background-color: #E6E6E6;
	height:40px;
	padding-left:3px;
	padding-top:10px;
}

#adsListModal .modal-body
{
	max-height:70vh;
	overflow-y: auto;
}

.modal-lg
{
	width:84%;
}

#gameDetailsModal .modal-body
{
	max-height:75vh;
	overflow-y: auto;
}

#general-section-1
{
	background-color : #D8D8D8;
	max-height:72vh;
	overflow-y:auto;
}

#donutchart {
	position: relative;

}

#dchart
{
	 margin: 0 auto;
}
.lblOverlay {

	display:block;

	text-align:center;
	vertical-align: middle;
	position: absolute;
	top: 85px;  /* 0 chartArea top  */
	/*left: 328px; /* 0 chartArea left */
	font-size: 35px;
	margin-top: 60px;
}

/*To avoid google chart tooltip flickering*/
svg > g > g:last-child { pointer-events: none }

#lblOverlay1 {

	left: 328px; /* chartArea left */
}
#lblOverlay2 {

	left: 318px; /* chartArea left */
}
#lblOverlay3 {

	left: 308px; /* chartArea left */
}


/*media queries*/
@media screen and (max-height: 800px) /*and (min-height: 420px)*/ {
	
	#navbar-menu-simple .category-title
	{
		font-size: 18px;
	}
	#navbar-menu-simple .nav-header
	{
		max-height: 42px;
	}
	#columnchart
	{
		max-height: 35vh;
	}
	
}

@media screen and (max-width: 1023px) and (min-width: 700px) {
	
	#topOptions .themeBox
	{
		font-size:9px;
	}
	#lblOverlay1 {

	left: 213px; /* chartArea left */
	}
	#lblOverlay2 {

		left: 203px; /* chartArea left */
	}
	#lblOverlay3 {

		left: 193px; /* chartArea left */
	}

}

@media screen and (max-width: 1279px) and (min-width: 1024px) {
	
	#topOptions .themeBox
	{
		font-size:11px;
	}
	#lblOverlay1 {

	left: 218px; /* chartArea left */
	}
	#lblOverlay2 {

		left: 208px; /* chartArea left */
	}
	#lblOverlay3 {

		left: 198px; /* chartArea left */
	}

}


@media screen and (max-width: 1365px) and (min-width: 1280px) {
    
	#topOptions .themeBox
	{
		font-size:12px;
	}
	
	#lblOverlay1 {

	left: 250px; /* chartArea left */
	}
	#lblOverlay2 {

		left: 240px; /* chartArea left */
	}
	#lblOverlay3 {

		left: 230px; /* chartArea left */
	}

}


@media screen and (max-width: 1439px) and (min-width: 1366px) {
    
	#topOptions .themeBox
	{
		font-size:13px;
	}
	
	#lblOverlay1 {

	left: 268px; /* chartArea left */
	}
	#lblOverlay2 {

		left: 258px; /* chartArea left */
	}
	#lblOverlay3 {

		left: 248px; /* chartArea left */
	}

}

@media screen and (max-width: 1535px) and (min-width: 1440px) {
    
	#lblOverlay1 {

	left: 288px; /* chartArea left */
	}
	#lblOverlay2 {

		left: 278px; /* chartArea left */
	}
	#lblOverlay3 {

		left: 268px; /* chartArea left */
	}

}

@media screen and (max-width: 1599px) and (min-width: 1536px) {
    
	#lblOverlay1 {

	left: 318px; /* chartArea left */
	}
	#lblOverlay2 {

		left: 308px; /* chartArea left */
	}
	#lblOverlay3 {

		left: 298px; /* chartArea left */
	}

}

@media screen and (max-width: 1679px) and (min-width: 1600px) {
    
	#lblOverlay1 {

	left: 328px; /* chartArea left */
	}
	#lblOverlay2 {

		left: 318px; /* chartArea left */
	}
	#lblOverlay3 {

		left: 308px; /* chartArea left */
	}

}

@media screen and (max-width: 1919px) and (min-width: 1680px) {
    
	#lblOverlay1 {

	left: 348px; /* chartArea left */
	}
	#lblOverlay2 {

		left: 338px; /* chartArea left */
	}
	#lblOverlay3 {

		left: 328px; /* chartArea left */
	}

}

@media screen and (min-width: 1920px) {
    
	#lblOverlay1 {

	left: 408px; /* chartArea left */
	}
	#lblOverlay2 {

		left: 398px; /* chartArea left */
	}
	#lblOverlay3 {

		left: 388px; /* chartArea left */
	}

}