html,body{
height:100%;
background-color:white;
font-size: 11px;
font-family: Verdana, sans-serif;
    background-image: url("../images/backForm.png");
    background-repeat: no-repeat;
    background-size: 35%;
    background-position-x: 90%;
    background-position-y: 60%;
}


#wrap{
	min-height:100%;
	height:auto;
	background-image: url("../images/demicercles.png");
	background-repeat: no-repeat;
    background-size: 23%;
    background-position-x: -5%;
    background-position-y: 118%;

}
.message{
	border: 1px solid #ced4da;
	text-align: center;
    border-radius: 2px;
}

#gauche{
	float: left; 
	width:30%;
}

#titre{
padding-left:15%;
padding-top:20px;
color:white;
}

#droite{
	float: right; 
	width:70%;
}
#global{
	width:100%;
	display: inline-block;
}

/*#footer{height:80px;background-color:#fff;background-color:rgba(255,255,255,0.9);text-align:center;padding-top:10px;overflow:hidden}*/
#icon-user{
	width:40px;
	padding-bottom:10px;
	padding-right:5px;
}

#icon-user2{
	width:35px;
	padding-bottom:5px;
	padding-right:5px;
}

#header img{
	width:30%;
	margin-left:25px;
	margin-top: 10px;
}

#header{
	background: #b52d51;
	margin-bottom: 20px;
}

.container{
	padding-right: 15px;
    padding-left: 15px;
	margin-left:initial;
}

.form label{
	font-weight: 500;
    color: #203242;;
    margin-bottom: 10px;
    padding-left: 20px;
    text-transform: uppercase;
    display: block;
}

.form input[type=text],[type=password] {
	appearance: none;
    display: flex;
    background: rgba(234, 243, 245, 0.5019607843);
    border-radius: 25px;
    width: 100%;
    padding: 10px 30px;
	border: 1px solid #ced4da;
}

.btn{
    position: relative;
    z-index: 1;
    font-family: futura-pt, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 26px;
    background: none;
    color: white;
    text-decoration: none;
    padding: 10px 52px 10px 20px;
    border: 2px solid #000000;
    border-radius: 50px;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
}

.btn:before {
    content: "";
    position: absolute;
    background-color: #b52d51;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    left: -6px;
    bottom: -6px;
    z-index: -1;
    -webkit-transition: all 300ms;
    -moz-transition: all 300ms;
    -ms-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:after {
    content: "";
    position: absolute;
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    font-size: 1.125rem;
    right: 20px;
}

#headerform {
    position: relative;
    font-family: futura-pt, sans-serif;
    font-size: 2.4em;
	margin-left:5%;
    font-weight: 600;
    line-height: 64px;
    color: #203242;;
    z-index: 2;
	text-align:center;
    width: fit-content;
	margin-top: -5px;

}

#btn1:hover, #btn2:hover{
    background-color: #9BAAB9;
	border-color: #203242;	
	color:white;	
}

#btn1:hover::before, #btn2:hover::before{
    background-color: transparent;
}

#headForm{
		text-align: center!important;
		margin-bottom: -15px;
}

/*#headerform:before {
    content: "";
    position: absolute;
    bottom: -20px;
    right: 42px;
    width: 105%;
    height: 15px;
    z-index: 1;
    background-color: #F58500;
}*/

.fa-stack-1x, .fa-stack-2x {
    position: absolute;
    left: 30px;
    bottom: 7px;
    width: 100%;
    text-align: center;
}

.card,.navbar-light{background-color:#fff;background-color:rgba(255,255,255,0.9);background-image:none; margin-top:15px}

.login,.password{padding:20px;}

div.form{margin:8px;max-width:100%;}

div.actions{margin:10px 0 0 0}

div.actions a{margin-top:10px}

.fa-circle {
    color: #1490b3;
}

.card{
	border: none;
}

.card-header {
    padding: 20px;
    background-color: #d5d5d5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.buttons{text-align:center;margin:10px 0 0 0;cursor:pointer}

.btn{white-space:normal}.btn span.fa{padding-right:8px}

#btn1, #btn2{
	display: block;
	margin : auto;
	margin-top:5%;
}

li.ui-state-active{background-color:#fafafa;background-color:rgba(250,250,250,0.9)}

#txt{margin-bottom: 2rem;padding-top:7px; margin-left:10px;}

#txt2{margin-bottom: 50px;}

#link{margin-left:10px;}

#captcha, #mail, #password1, #user{
	font-size: 17px;
    height: calc(1.5em + 0.75rem + 5px);
}

#password{
	font-size:14px;
}

#copyright{color: black;font-size: 80%;text-align: center;margin-top:25px}

#appslist,

#password,

#loginHistory,

#logout,

#oidcConsents{margin-top:20px}

div.category{margin:10px 0;cursor:grab}

div.application{margin:5px 0;overflow:hidden}

div.application a,div.application a:hover{text-decoration:none}

p.notifCheck label{margin-left:5px;margin-top:3px;display:inline-block}

img.langicon{cursor:pointer}

button.idploop{max-width:300px}

button.idploop img{max-height:30px}

div.oidc_consent_message>ul{text-align:left;list-style:circle}

@media screen and (min-width: 960px) {
  #logincontent, #mailcontent, #errorcontent {
    width: 60%;
  }
  #headerform{
	  font-size: 19px;
  }
}

@media screen and (min-width: 1280px) {
  #logincontent,#mailcontent, #errorcontent  {
    width: 40%;
    margin-left: 12%;
  }
  #headerform{
	  font-size: 17px;
  }
}

@media only screen and (max-width: 700px) {
  
  #logincontent,#mailcontent, #errorcontent  {
    width: 100%;
  }
  #headerform{
	  font-size: 12px;
  }
  body{
	  background-image: none;
  }
  #header img{
	margin-bottom: 20px;
	padding-right: 1px;
	width: 40%;
  }
  .fa-stack-1x, .fa-stack-2x {
    left: 15px;
}
 
}
@media only screen and (max-width: 855px) {
  
  #logincontent,#mailcontent, #errorcontent  {
    width: 100%;
	margin-left: auto !important;
  }
  
  #icon-user {
    width: 30px;
  }
  
  #headerform{
	  font-size: 11px;
  }
  body{
	  background-image: none;
  }
  #header img{
	width: 50%;
	padding-top:15px;
  }
  .fa-stack-1x, .fa-stack-2x {
    left: 15px;
	}
}
/***********/
/*@media(min-width: 1200px){
#logincontent {max-width: 30%;}
}*/



@media(min-width:768px){
	
	div.application{height:80px}
	div.application h4.appname{margin:0}
	#wrap{margin:0 auto -60px}
	/*#footer{height:60px}*/}

.hiddenFrame{border:0;display:hidden;margin:0}

.noborder{border:0}
.max{width:100%}
.link{cursor:pointer}
.nodecor:hover,
.nodecor:active.nodecor:focus{text-decoration:none}
.fa.icon-blue{color:blue}
.progress-bar-animated{width:100%}
input.key{font-family:'password';width:100px}
@font-face{font-family:'password';src:url(/static/common/fonts/password.ttf)}