@charset "utf-8";

/***********************************************/
/*******************  GLOBAL  ******************/
/***********************************************/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body{
	font-size:1.000em;
	top:0;
}

body, html {
	height: 100%;
	font-family: "Roboto","Helvetica","Arial",sans-serif;
	color:#404040;
	padding:0;
	margin:0;
}

a , img, input[type="button"]{
    outline:none;
}

img{
	display:block;
	width:100%;
}

div{
	position:relative;
}

button:focus, button:active, textarea:focus, input:focus{
   outline: none;
}

ul{
	list-style-position: inside;
}

textarea, input{
   font-family: inherit;
   font-size: inherit;
}

.display-block{
	display:block;
}

.button{
	display:inline-block;
	font-weight:normal;
	padding:4px 8px;
	border-radius:5px;
	color:#fff;
	background:#0f7e8a;
	font-size:16px;
	text-decoration:none;
	border:1px solid #0f7e8a;
	cursor:pointer;
	margin-bottom:10px;
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 0 3px 8px rgba(188, 188, 188, 0);
	-webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 0 3px 8px rgba(188, 188, 188, 0);
	-webkit-transition-property: background, color, -webkit-box-shadow;
	-webkit-transition-duration: 300ms;
	transition-property: background, color, box-shadow;
	transition-duration: 300ms;
}

.button:hover{
	color:#0f7e8a;
	background:#fff;
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 0 3px 6px rgba(188, 188, 188, 1);
	-webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 0 3px 6px rgba(188, 188, 188, 1);
}

.button.red{
	background:#b91818;
	border:1px solid #b91818;
}

.button.red:hover{
	color:#b91818;
	background:#fff;
}

.button[type=submit], input[type="button"]{
	text-transform:uppercase;
	padding: 8px 15px;
}

.button i{
	margin-right:5px;
	-webkit-transition-property: color;
	-webkit-transition-duration: 300ms;
	transition-property: color;
	transition-duration: 300ms;
}

.button:hover i{
	color:#b91818;
}

.wrapper_top{
	background: linear-gradient(#FFF, #DFDFDF);
	width:100%;
	height:80px;
    position: fixed;
    z-index: 5000;
}

.header_top{
	display:table;
	width: 1000px;
    height: 80px;
	margin:0 auto;
}

.header_row{
	display:table-row;
}

.header_logo{
	display:table-cell;
	width: 160px;
    height: 70px;
    background: no-repeat url(../img/logo.png) right 5px;
    background-size: 160px 70px;
}

.header_title{
	display: table-cell;
    font-size: 25px;
    font-weight: bold;
	padding-top:6px;
    color: #0f7e8a;
	text-align:center;
	vertical-align:middle;
}

.header_menu{
	display: table-cell;
	padding-top:6px;
    color: #0f7e8a;
	text-align:right;
	width:315px;
}

.wrapper{
	width:100%;
	text-align:center;
	padding:10px 5px;
	background:#FFF;
	font-size: 1em;
	padding-top: 100px;
	height: 100vH;
}

.wrapper.green{
	background:#e1fbdb;
	color:#428f30;
}

.wrapper.red{
	background:#fbdbdb;
	color:#712020;
}

.wrapper h2{
	color:#0f7e8a;
}

.wrapper a{
	text-decoration:none;
	color:#0f7e8a;
	border-bottom:1px solid #0f7e8a;
	border-bottom-width:1px;
	border-bottom-style:solid;
	border-bottom-color:rgba(15, 126, 138, 1);
	-webkit-transition-property: border-bottom-color;
	-webkit-transition-duration: 300ms;
	transition-property: border-bottom-color;
	transition-duration: 300ms;
}

.wrapper a:hover{
	text-decoration:none;
	border-bottom-color:rgba(15, 126, 138, 0);
}

/******************************************************************************/
/**************                 AUTHENTIFICATION                  *************/
/******************************************************************************/

.info{
	font-weight:bold;
	text-align:center;
	margin-bottom:30px;
	font-size:18px;
}

.info.cadre{
	text-align:left;
	width:70%;
	margin-left:auto;
	margin-right:auto;
}

.info.cadre .ligne_info{
	display:block;
	line-height:30px;
}

.t_form table{
	width:60%;
	margin:0 auto;
}

.t_form td{
	padding:5px;
	vertical-align:top;
}
.t_form .label{
	padding-top:8px;
	width:40%;
}

.t_form td.right{
	text-align:right;
}

.t_form td.left{
	text-align:left;
}

.t_form td.center{
	text-align:center;
}

.t_form td.center .text{
	width:80%;
	max-width:300px;
	border-radius:5px;
	border:1px solid #0f7e8a;
	cursor:pointer;
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 0 0px 8px rgba(15, 126, 138, 0);
	-webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 0 0px 8px rgba(15, 126, 138, 0);
	-webkit-transition-property: -webkit-box-shadow;
	-webkit-transition-duration: 300ms;
	transition-property: box-shadow;
	transition-duration: 300ms;
}

.t_form td.center .text:focus{
	cursor:auto;
	box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 0 0px 8px rgba(15, 126, 138, 0.5);
	-webkit-box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0), 0 0px 8px rgba(15, 126, 138, 0.5);
}

.t_form .text, .t_form .select{
	border:1px solid #CCC;
	-webkit-border-radius:2px; 
	-moz-border-radius:2px; 
	border-radius:2px;
	padding:10px;
}

.t_form td.center .select{
	width:80%;
	max-width:300px;
}

.t_form .error{
	color:#b91818;
}

.t_form .text.error{
	border:1px solid #b91818;
}

.t_form  span.error{
	display:block;
	margin: 5px 0 10px 0;
}

/******************************************************************************/
/**************                      CONTENU                      *************/
/******************************************************************************/

span.ligne{
	display:block;
	margin-bottom: 10px;
}

.picto i{
	font-size:6em;
}

.immatriculation{
	font-size:2em;
}

.wrapper.green a{
	color:#428f30;
	border-bottom-color:rgba(66, 143, 48, 1);
	-webkit-transition-property: border-bottom-color;
	-webkit-transition-duration: 300ms;
	transition-property: border-bottom-color;
	transition-duration: 300ms;
}

.wrapper.green a:hover{
	border-bottom-color:rgba(15, 126, 138, 0);
}

.bold{
	font-weight:bold;
}

.uppercase{
	text-transform:uppercase;
}

.underline{
	text-decoration:underline;
}

.center{
	text-align:center;
}

.display-block, .candidate_form .row.display-block{
	display:block;
}

.display-none, .candidate_form .row.display-none{
	display:none;
}

/*************************************************************************************/
/*****************************          CAPTCHA            ***************************/
/*************************************************************************************/

.slidercaptcha {
	margin: 10px auto;
	width: 80%;
    max-width: 320px;
	height: 286px;
	border-radius: 4px;
}

.slidercaptcha .card-body {
	padding: 1rem;
}

.slidercaptcha canvas:first-child {
	border-radius: 4px;
	border: 1px solid #e6e8eb;
}

.slidercaptcha.card .card-header {
	background-image: none;
	background-color: rgba(0, 0, 0, 0.03);
}

.slider:hover {
    background: #12909e;
}

.sliderContainer_success .sliderMask {
    border: 1px solid #22916a;
    background-color: #e7fff7;
}

.sliderContainer_success .slider {
    border: 1px solid #22916a;
    background-color: #22916a !important;
}

.sliderContainer_fail .sliderMask {
    border: 1px solid #e13232;
    background-color: #ffe8e8;
}

.sliderContainer_fail .slider {
    border: 1px solid #e13232;
    background-color: #e13232 !important;
}

.verification_code{
	display:none;
}

@media(max-width: 650px){
	body{
		font-size:0.9em;
	}
	
	.header_top {
		width: 100%;
	}
	
	.header_logo{
		width: 80px;
		height: 36px;
		background: no-repeat url(../img/logo.png) right 20px;
		background-size: 80px 36px;
	}
	
	.header_title {
		font-size: 12px;
		text-align: center;
		padding: 3px 0 0 5px;
	}
	
	.header_menu {
		width: 210px;
	}
	
	.button{
		font-size:11px;
		margin:5px 0;
		padding: 5px 3px;
	}
	
	.t_form table {
		width: 95%;
	}
	
	.slidercaptcha {
		width: 95%;
	}
	
	.info {
		font-size: 15px;
	}
	
	.wrapper h2 {
		font-size: 20px;
	}
}