/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 500; /* Sit on top */
    left: 0;
    top: 0;
    right:0;
    bottom:0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

.modal a {
	font-size:11px;
	color:#999;
}

.modal-left img {
	width: 100%;
}

/* Modal Content/Box */
.modal-content {
    width: 800px;
    height: 500px;
    margin-top: 50vh; /* poussé de la moitié de hauteur de viewport */
  	transform: translateY(-50%); /* tiré de la moitié de sa propre hauteur */
  	margin-left:auto;
  	margin-right:auto;
    background-color: white; /* Fallback color */
    border-radius: 8px;
}

.modal-account{
	text-align:center;
	font-size:11px;
}

.modal-errconn{
	display: none;
}

.modal-account .login{
	background-color: #f3f3f3;
    border: solid 1px #ccc;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 3px;
    font-weight: bold;
    padding: 10px;
    margin: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 70%;
    color: #333;
    font-size: 14px;
}

.modal-account .login{
	background-color: #f3f3f3;
    border: solid 1px #ccc;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 3px;
    font-weight: bold;
    padding: 10px;
    margin: 3px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 70%;
    color: #333;
    font-size: 14px;
}
.modal-account #connect{
	background-color: darkgrey;
	color: #fff;
	cursor: pointer;
}

#input_mdp{
	border: 1px solid #454545;
    background: #a9a9a9;
    height: 14px;
    width: 180px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    margin: 0 0 4px 0;
    padding: 5px 10px;
}

#ok_mdp{
	background: #a9a9a9;
    width: 22px;
    height: 20px;
    color: #fff;
    font-size: 9px;
    font-weight: normal;
    cursor: pointer;
}


.modal-txt{
	text-align:center;
	font-size: 14px;
}

.modal-ou{
	width: 70%;
	margin-left: auto;
  	margin-right: auto;
}

.modal-left{
	display: inline-block;
    height: 100%;
    width: 50%;
    vertical-align: top;
    overflow: hidden;
    border-radius: 8px 0 0 8px;
}
    
.modal-right{
	display: inline-block;
    height: 100%;
    width: 49%;
    vertical-align: top;
}

/* The Close Button */
.modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}