/*********************************************/
	/*********Perso élèments thème sbadmin********/
	/*********************************************/

	/* Open Sans Font */
	@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

	/* Bodega Font */
	@font-face{
		font-family: 'BodegaBlack';
		src: url('../SbAdmin/bodega-font/fonts/bodegasans-black.ttf');
		}

	@font-face{
	font-family: 'BodegaMedium';
		src: url('../SbAdmin/bodega-font/fonts/bodegasans-medium.ttf');
	}

	@font-face{
		font-family: 'BodegaLight';
			src: url('../SbAdmin/bodega-font/fonts/bodegasansoldstyle.ttf');
		}

	html{
		height:100%;
	}

	.bodegaBlack {
		font-family: BodegaBlack;
		color: #000;
		font-size: xx-large;
	}

	.bodegaMedium {
		font-family: BodegaMedium;
		color: #000;
		font-size: xx-large;
	}

	.bodegaLight {
		font-family: BodegaLight;
		color: #000;
		font-size: xx-large;
	}

	a{
		color: #375E77;
	}

	.nav > li > a:focus, .nav > li > a:hover {
		background-color: #f8f8f8;
		color: #078;
	}

	.navbar-default .navbar-brand{
		color: #000;
	}

	.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
		color: #000;
	}

	.btn-primary{
		color: #ffffff;
		background-color: #375E77;
		border-color: #375E77;
	}

	.btn-default {
		color: #ffffff;
		background-color: #aea79f;
		border-color: #aea79f;
	}

	.btn-primary:hover {
		background-color: #078;
		border-color: #078;
	}

	.form-control:focus {
		border-color: #078;
	}

	#page-wrapper{
		padding-top:15px;
		position: relative;
	}

	.page-header {
		margin-top:0;
		font-size:24px;
		font-weight:normal;
	}

	.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th{
		vertical-align:middle;
	}

	.form-control{
		height:38px;
		color:#333;
	}

	.panel-orange > .panel-heading {
		background-color: #e95420 !important;
		border-color: #e95420;
		opacity: 1;
	}

	.panel-orange {
		border-color: #e95420;
		color:#fff;
	}

	.panel-orange a:hover{
		color: #e95420;
		text-decoration:none;
	}

	.panel-yellow a:hover,.panel-red a:hover{
		text-decoration:none;
	}

	.panel-blue .panel-heading a,.panel-darkBlue .panel-heading a, .panel-cyan .panel-heading a
	{
		color: #fff;
		opacity: 1;
		text-decoration: none;
	}


	/*********************************************/
	/***************Autres éléments***************/
	/*********************************************/

	#logo-agora{
		margin-top:3px;
	}

	.div-img{
		text-align:center;
	}

	.form-group .form-error li{
		list-style-type:none;
		color:red;
	}

	.form-group .form-error ul{
		padding-left:0;
	}

	@media screen and (max-width: 768px) {
		#logo-agora {
			display:none;
		}
	}

	.btn-green{
		background: green;
	}

	.btn-red {
		background: red;
	}

	.btn-tarif {
		background-color: #B43104;
		border-color: #B43104;
	}

	.label-current{
		background: orange;
	}

	.jumbotron{
		padding-left:60px;
		padding-right:60px;

	}

	.vertical-center {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);

	}

	.panel-body {
		background-color: #fff;
		position: relative;
	}

	#bg-image {
		background-image: url("../img/agora.jpg");
		opacity: 0.2;


		position: fixed;
		/* Add the blur effect
		filter: blur(8px);
		-webkit-filter: blur(8px);
	*/

		height: 100%;
		width: 100%;
		margin-left: -28px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	/*Ligne 2 */
	.table-striped tbody tr:nth-of-type(odd) {
		background-color: rgba(230, 230, 230, 1);
	}
	table {
		background-color: rgba(255, 255, 255, 1);
	}
	.btn {
		position: relative;
	}
	input {
		position: relative;
	}

	select {
		position: relative;
	}

	table {
		position: relative;
	}

	#guideFormats {
		background:#375E77;
		padding:3px;
		font-weight:bold;
		text-align: center;
		color:#fff;
	}

	.h2Title {
		color: #375E77;
		margin-bottom: 20px;
		text-align: center;
	}

	#page-wrapper th, #page-wrapper td {
		text-align: center;
	}

	#page-wrapper label {
		display: block;
	}

	td > .form-group {
		margin-bottom: 0;
	}

	input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control {
		line-height: initial;
	}

	h1.page-header {
		color: #375E77;
	}

	/*********************************************/
	/******************Page LOGIN*****************/
	/*********************************************/

	body.login .btn-primary {
		top: 10px;
	}

	body.login {
		background-color:#fff;
		border-color: #fff;
		height:100%;
	}

	body.login .block-login{
		width:38%;
		background:#65C2C9;
		display:flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		float:left;
	}

	body.login .block-login-img{
		display:flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		width:62%;
		float:right;
	}

	body.login .block-login-img img{
		max-width: 800px;
	}


	.contactLogin {
		color: #375E77;
		font-family: 'Open Sans', sans-serif;
		font-weight: bold;
	}

	body.login .text-right img {
		width: 40px;
		height: 40px;
		margin-left: 5px;
	}

	body.login .text-right > span {
		vertical-align: middle;
	}

	body.login .text-right {
		margin: 8px;
	}

	.modal-dialog {
		top: 50%;
		margin: 0 auto;
		-webkit-transform: translate(0,-50%);
		-o-transform: translate(0,-50%);
		transform: translate(0,-50%);
	}
	body.login .modal-login .modal-body{
		padding:70px 50px;
	}
	body.login .modal-login input{
		margin-top:40px;
		margin-left:auto;
		margin-right: auto;
		width:95%;
		font-size:16px;
		z-index:1000;
	}
	body.login .modal-login input#username{
		margin-top:30px;
	}
	body.login .modal-login input#password{
		margin-bottom:40px;
	}
	body.login .modal-login .btn-primary{
		background: #65C2C9;
		border: #65C2C9;
		padding: 10px 25px;
		font-size:16px;
		z-index:1000;
	}

	body.login a {
		color: #375E77;
	}

	#libelle-ex-repro{
		color: #fff;
		font-size:18px;
		margin-top:15px;
		display: flex;
	}

	#wcb {
		position: absolute;
		bottom: 0;
		right: 2rem;
	}

	/*********************************************/
	/****************** Page MAS *****************/
	/*********************************************/

	#retourMAS{
		margin-bottom: 30px;
	}

	/*********************************************/
	/************* Page Facturation **************/
	/*********************************************/

	.table-facturation{
		font-size:12px;
	}

	.table-facturation th{
		text-align: center;
	}

	.table-facturation td, .table-facturation th {
		padding: 2px !important;
		vertical-align: middle;
	}

	.table-facturation a{
		text-decoration:underline;
	}

	#table-factur-conso td, #table-factur-conso th{
		max-width: 100px;
	}

	/*********************************************/
	/************* Page Contact **************/
	/*********************************************/

	.container50 .form-control {
		width: 50%;
		display: initial;
	}

	.is_logged .btn-circle {
		width: 15% !important;
		background-color: transparent;
		color: #333;
	}

	/* Qui Sommes Nous */
	#quiSommesNous {
		text-align: center;
		padding-top: 30px;
		color: #375E77;
	}

	/* Nous contacter */
	#contactSpan {
		padding-right: 15px;
	}


	@media screen and (max-width: 1600px) {
		body.login .block-login  {
			width:40%;
		}
		body.login .block-login-img{
			width:60%;
		}
		body.login .block-login-img img {
			max-width: 700px;
		}
		body.login .modal-login .modal-body {
			padding: 60px 35px;
		}
	}

	@media screen and (max-width: 1400px) {
		body.login .block-login-img img {
			max-width: 600px;
		}
		body.login .modal-login .modal-body {
			padding: 40px 20px;
		}
	}

	@media screen and (max-width: 1200px) {
		body.login .block-login  {
			width:50%;
		}
		body.login .block-login-img{
			width:50%;
		}
		body.login .block-login-img img {
			max-width: 500px;
		}
	}

	@media screen and (max-width: 1080px) {
		body.login .block-login  {
			width:55%;
		}
		body.login .block-login-img{
			width:45%;
		}
		body.login .block-login-img img {
			max-width: 400px;
		}
	}

	@media screen and (max-width: 950px) {
		body.login .block-login  {
			width:100%;
		}
		body.login .block-login-img{
			display: none;
		}
		#wcb {
			position: relative;
			bottom: inherit;
			right: inherit;
		}
	}

	@media screen and (max-width: 580px) {
		body.login .block-login form  {
			width:85%;
		}
		body.login .div-img img {
			max-width:100%;
		}
		body.login .block-login{
			align-items: flex-start;
			padding-top:25px;
		}
	}