/***********************************************************
**********************  TEMPLATE  **************************
************************************************************/

body {
	min-width: 450px;
	width: 100%;
	overflow-x: hidden;
	margin: auto;
	background-color: #FFFFFF;
	font-family: 'Raleway', 'Arial','Helvetica', sans-serif;
}


/***********************************************************
 HEADER 
***********************************************************/

header {
	height: 70px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
	padding-left: 0px;
}

.container-fluid > .navbar-collapse , .container-fluid > .navbar-header , .container > .navbar-collapse , .container > .navbar-header {
	margin-right: 0;
	margin-left: 0;
}

/* titre */
#titleHeader {
	margin-top: 5px;
	margin-left: 50px;
	text-align: left;
}

#titleHeader  a:link , #titleHeader  a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

 #titleHeader  a:hover {
	 color: #DCDCDC;
	 text-decoration: none;
 }
 
 #titleHeader  a:active {
 	color: #FFFFFF;
	text-decoration: none;
 }

.titleText {
	display: inline;
	margin-left: 0px;
	line-height: unset;
}

.titleText > a {
	margin-top: 20px;
	font-size: 28px;
}

/* logo */
#logo {
	display: inline;
	text-align: left;
}

#logoClient {
	/*height: 100%;*/
	width: auto;
	max-height: 50px;
	margin-top: -10px;
	margin-left: 5px;
}

/* boutons */
#burger {
	font-size: 200%;
}

#btnDeconnexion {
	margin-top: 10px;
	margin-right: 65px;
	color: #FFFFFF;
	text-decoration: none;
}


@media( max-width:768px ) {
	#btnDeconnexion {
		display: none;
	}
}

/***********************************************************
 FOOTER
***********************************************************/

footer {
	position: relative;
	z-index: 100;
	opacity: 0.8;
}

#copyright {
	margin: 0 15px;
	padding-top: 7px;
	text-align: center;
}

#copyright > a {
	text-decoration: underline;
}
#copyright > a:hover {
	text-decoration: none;
}


/* mode libre */	
#modeLibre {
	margin-top: 0px;
	text-align: left;
}

#libre {
	display: none;
	margin-left: 20px;
}

#remplissage {
	position: relative;
	width: 100%;
	bottom: 0px;
	height: 50px;
	overflow-y: hidden;
	opacity: 0.9;
}

/***********************************************************
CONNEXION / SAFARI / ERREUR / NOJS /SIGNATURE
***********************************************************/

/* row */
#container_signature,#container_connexion, #container_safari,#container_noJs,#container_error,#container_admin {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 85vh;
}

#connexion,#safari,#error {
	margin-left: 80px;
	margin-right: 80px;
}

/* Description sur la page de connexion */
.descriptionAppli {
	margin-top: 30px;
	margin-bottom: 30px;
	font-size: 22px;
}

/* Formulaires */

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    border: 1px solid #0091B8;
}

.inputForm { 
	border: 1px solid #A9A9A9;
}

#btnConnexion , #btnValidSignature , #btnForgottenPwd {
    background-color: #FFFFFF;
	-webkit-appearance: none;
	
}
#btnValidSignature {
	margin-top: 30px;
}

#formForgottenPwd {
	display: none;
}

#forgot-password:hover , #retour {
	cursor: pointer;
}

#btnConnexion, #btnForgottenPwd {
	background-color:#0091b8;
	color:#FFFFFF;
}

#btnConnexion:hover, #btnValidSignature:hover, #btnForgottenPwd:hover {
	background-color:#9ACD32;
	color:#FFFFFF;
}

.red {
	color:#FF0000;
}

.green {
	color:#228B22;
}

#navigateurs a, .listLink a {
	display:inline-block;
	height:100px;
	width:100px;
	text-align:center;
}

.logoNav {
	height:75px;
	width:75px;
	margin:10px;
}

.labelNav {
	vertical-align:bottom;
}


/* Signature */
#noModele {
	display:none;
	color:#FF0000;
	font-weight:bold;
	text-transform:uppercase;
	text-decoration:underline;
}

#accordeon , #accordeon2 {
	position:relative;
}

.titles {
	padding-left: 75px !important;
}

.titles > a {
	font-size:18px;
	text-decoration:none;
	text-transform:none;
}

.details {
	margin-left:20px;
	margin-top:3px;
	text-transform:none;
	font-size:10px;
	font-style:italic;
}

#signature , #detectOS , #tuto {
	margin-left:50px;
	margin-right:50px;
	border:none;
}

#signature {
	height: 90% !important;
}

#signature , #detectOS , #tuto {
	width: 100% !important;
}

#customBloc , .btnSignature {
	display:none;
}

#indicationModele {
	margin-top:0px;
	margin-bottom:0px;
}
#selectModele {
	margin-top:0px;
	margin-bottom:0px;
}
#customBloc {
	margin-top:3px;
	margin-bottom:3px;
}

h4 {
	font-size:16px;
}

#listeModele , #indicationModele > h4 {
	margin-left:13px;
}

#listeModele {
	background-image:url("/images/icon/ic_arrow_drop_down_white_24dp_1x.png");
	background-position:100% 50%;
	background-repeat:no-repeat ;
	height:30px;
	width: 250px;
	overflow: hidden;
    border: none;
	outline:none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
	appearance:none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding: 5px;
	box-shadow: none;
}

#listeModele:hover , .dlogiciels:hover , .tutoOs:hover , #tuto h4 , .tLogiciels:hover , .versionLogiciel:hover , .function_buttons:hover , .function_buttons_modele:hover {
	cursor: pointer;
}

input {
	border-radius: 0;
}

.inputForm , .number, .textarea {
	width: 250px;
	margin-bottom: 5px;
}
textarea.textarea {
	height: 90px;
	font-size: 11px;
}


.labeli {
	margin: 3px 0 3px 0;
}

#labelCheck {
	vertical-align:top;
	margin: 0 12px 0 7px;
	padding-top: 3px;
	font-size: 12px!important;
	text-transform: none !important;
	font-weight: normal !important;
	font-style: italic;
}
.fac-checkbox {
	margin-left: 15px!important;
}

#customBloc label {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
}



#customFormBloc , #frameBloc , #btnSignature1 , #codeHtmlBloc {
	margin-top: 15px;
}

iframe {
	width: 100%;
	

}

#frame {
	border: 1px solid #000;
	border-radius: 2px;
	height: 400px;
}

#codeHtml {
	width: 600px;
	height: 350px;
	resize: none;
}
.close {
	opacity: 1;
	font-weight: 700;
	color: #DC143C;
}

.listOptions {
	padding-left: 0px;
	list-style-type: none;
}

@media screen and (min-width:992px) and (max-width:1200px) {
	#listOptions1 li {
		display: inline-block;
	}
}

.btnAdvance {
	display: inline-block;
	-webkit-appearance: none;
	background-color: transparent;
	border: none;
	width: 15px;
	height: 15px;
	padding: 0 0px 0 0px;
}

.btnAdvance.remove {
	display: none;
}

.optionAdvance {
	font-size: 14px;
}


.button {
	text-align: center;
	margin-top: 10px;
	padding: 5px 3px;
}

.showBtn {
	display: none;
	-webkit-appearance: none;
	border: 1px solid #A9A9A9;
	background-color: transparent;
	width: 150px;
}

.hide {
	display: none;
}

.showBtn:hover {
	background-color:#D3D3D3;
	color:#FFFFFF;
}

/* detect / tuto */
#detectOschoixLogiciel , #choixOs {
	margin-top: 0px;
	margin-bottom: 0px;
}

.dlogiciels , .tutoOs , .tLogiciels {
	display: inline-block;
	width: 120px;
	height: 100px;
	margin: 5px;
	text-align: center;
}

.dlogoLogiciel , .logoOs , .tlogoLogiciel {
	width: 75px;
	height: 75px;
	margin-bottom: 5px;
}

#detectOsTutoSelect {
	display: none;
	margin-top: 10px;
	margin-bottom: 20px;
}

#btnSignature2 , #btnSignature3 {
	margin-top: 10px;
}

#btnSignature2 input , #btnSignature3 input {
	margin-top: 0;
}

#tutoSelect {
	margin-top: 10px;
}

.dlabelLogiciel {
	white-space: nowrap; 
	width: 117.15px;
	height: 18.2px;
	overflow: hidden;
	text-overflow: ellipsis; 
}

#listeVersion {
	list-style-type: none;
	padding-left: 0;
}

.versionLogiciel {
	display: inline-block;
	vertical-align: top;
	width: 100px;
	height: auto;
	text-align: center;
	margin: 5px;
}

.msg_error {
	color: red;
}

#frameTuto1 , #frameTuto2 {
	border: 1px solid #F1F1F1;
	border-radius: 3px;
	height: 350px !important;
	overflow: hidden;
}

/** Tuto **/
#step .row {
	margin-left: 0;
}

#menuTuto {
	position: fixed;
	background-color: #DCDCDC;
	color: #000;
	width: 100%;
	margin-top: 0px;
	left: 0px;
}

#menuTuto > h4 {
	margin-left: 15px;
	margin-bottom: 0;
	/*height: 40px;*/
	font-size: 20px;
	text-decoration: none;
	font-weight: bold;
}

.pagination {
	margin: 0 0 0px 0 !important;
	padding-top: 6px;
}

.espace {
	width: 100%;
	height: 1px;
}

.espaceBis {
	width: 100%;
	height: 1px;
}

.navigationTuto {
	margin-left: 80%;
}

.navigationTuto > a {
	padding-top: 50px;
}

.etapesTutoriel {
	margin: 120px 0 120px 0px;
	font-size: 18px;
}

#step input.showBtn {
	display: block;
}

#step input.showBtn:hover {
	background-color: inherit;
	color: inherit;
}

.stepExemple {
	font-style: italic;
}

.stepOption {
	font-style: italic;
	color: orange;
}

.vignettes {
	overflow: hidden;
	width: 40px;
	height: 40px;
	border: 1px solid #000;
}
.clickView {
	font-size: 15px;
}

#safari_door {
	position:absolute;
	bottom:0;
	right:0;
	/*background-color:red;*/
}
/***********************************************************
**********************   ADMIN   **************************
************************************************************/


/* bloc : liste des clients / liste des modeles */

#blocAdmin1,#blocAdmin2 {
	margin:10px;
	padding: 40px;
}

/* TABLEAUX */

/* boutons, champs avant les tableaux */
.dt-buttons , .dataTable_filter {
	margin: 0 0 40px 0 !important;
}

 .dataTables_scrollBody {
    overflow-x: hidden !important;
}

/* tableau liste de modele */
#listeModele td {
	white-space: nowrap;
	overflow: hidden !important;
}

#listeModele td:nth-child(1) {
	min-width: 160px !important;
	max-width: 160px !important;
}

#listeModele td:nth-child(2) {
	min-width: 140px !important;
	max-width: 140px !important;
}

#listeModele td:nth-child(3) {
	min-width: 120px !important;
	max-width: 120px !important;
}

#listeModele td:nth-child(4) {
	min-width: 40px !important;
	max-width: 40px !important;
}

#listeModele td:nth-child(5) {
	min-width: 40px !important;
	max-width: 40px !important;
}

.logoDatatable {
	width: 20px;
	height: 20px;
}

/* couleur etat ( activé / désactivé ) dans le tableau */
.etatActiv {
	color:green;
}

.etatDesactiv {
	color:red;
}

/* bouton options dans les tableaux */
.function_buttons, .function_buttons_modele {
	text-align:center;
}

/* Formulaire client */
#formClient {
	display:none;
}

#formModele {
	display:none;
}

/* Champ etat dans le formulaire */
.form-group.etat {
	display:none;
}