@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);@import url(https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css);@import url(https://fonts.googleapis.com/css?family=Montserrat:Regular&display=swap);@import url(https://fonts.googleapis.com/css?family=Montserrat:Bold&display=swap);@import url(https://fonts.googleapis.com/css?family=Montserrat:ExtraBold&display=swap);@charset "UTF-8";

html,body{
	background-color: white !important;	
	height: 100%;
	font-family: MontSerrat;
	color: #646363 !important;	
}
a{
	text-decoration: none !important;
	color: #646363 !important;
}
.bkg-photo{
	background-image:url(../images/log-in-background.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: calc(100% - 66px);	
}
.maxi-card{
	width: 100%;
	height: 100%;
	border-radius: 20px;
}

.photos-box-agri{
	background-color: #F3D813;
	border-radius: 10px;
	margin-right: -15px;
}
.login-card{
	background-color: white;
	/*background-image:url(../images/i-visionaute-gris.png);*/
	background-size: 70%;
	background-position: top right;
	background-repeat: no-repeat;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	font-family: MontSerrat;
}
input{
    border: none;
}
input:hover
{
    border: none;
}
input:focus
{
    border: none;
}

.simple-input-agri{
	display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #646363;
	text-align: center;
    background-color: transparent;
    background-clip: padding-box;    
	border-bottom: 1px solid #F3D813 !important;	
}

input::placeholder{
    color: #E5E8E8;
}
.login-text-1{
	font-size: 2rem;
	color: #646363;
}
.login-text-2-agri{
	color: #F3D813;
}
.login-text-3{
	font-size: 0.6rem;
	color: #646363;
	text-decoration: underline;
}
.login-text-4{
	font-size: 1.5rem;
	color: #F3D813;
}
.login-btn-agri{
	height: 26px;
	width: 100px;
	font-size: 0.6rem;
	border-radius: 4px;
	background-color: #F3D813;	
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	color: #646363;	
}

/*secu style*/
.photos-box-secu{
	background-color: black;
}
.login-btn-secu{
	height: 22px;
	width: 80px;
	font-size: 0.6rem;
	border-radius: 4px;
	background-color: black;	
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	color: white;	
}
.login-text-2-secu{
	color: black;
}
.simple-input-secu{
	display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #646363;
	text-align: center;
    background-color: #fff;
    background-clip: padding-box;    
	border-bottom: 1px solid black !important;	
}
/*animation*/
.front{
	z-index: 20;	
}

.back{
	z-index: 10;
}

.face{
	position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    text-align: center;
}

.flip-vertical-right {
	-webkit-animation: flip-vertical-right 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-vertical-right 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
.flip-vertical-left {
	-webkit-animation: flip-vertical-left 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-vertical-left 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-7-28 8:10:38
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-vertical-right
 * ----------------------------------------
 */
@-webkit-keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@keyframes flip-vertical-right {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2021-7-28 8:14:49
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-vertical-left
 * ----------------------------------------
 */
@-webkit-keyframes flip-vertical-left {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
  }
}
@keyframes flip-vertical-left {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
  }
}


/* Responsivité et mise en place du  slide tournant */

.containerSlider {
	position: relative;
}

.rowSlider {
	position: relative;
	top: 25%;
	height: 50%;
}

.photoAgri {
	background-image: url(include/images/Agri-video-pannel-login.jpg);
	background-size: 90%;
	background-position: right top;
	background-repeat: no-repeat;
}

.photos-box-secu {
	background-color: #231F20;
	border-radius: 10px;
	margin-right: -15px;
}

.login-text-2-secu {
	color: #231F20;
}

.simple-input-secu {
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #646363;
	text-align: center;
	background-color: transparent;
	background-clip: padding-box;
	border-bottom: 1px solid #231F20 !important;
}

.login-btn-secu {
	height: 26px;
	width: 100px;
	font-size: 0.6rem;
	border-radius: 4px;
	background-color: #231F20;
	display: inline-block;
	vertical-align: middle;
	font-weight: bold;
	color: white;
}

@media (min-width: 1000px) {

	.rowSlider {
		position: relative;
		top: 25%;
		height: 50%;
	}

	.tailleDivFormLogin {
		width: 100%!important;
	}

	.nextSecu {
		position: absolute;
		right: 2%;
		bottom: -3%;
		color: #646363;
	}
	
}

@media (max-width:999px) {

	.rowSlider {
		position: relative;
		top: 18%;
		height: 50%;
	}

	.tailleDivFormLogin {
		width: 126%!important;
		margin-left: -17%;
	}

	.txtNextSecu {
		position: absolute;
	    right: 3%;
		bottom: -3%;
	}

	.txtNextAgri {
		position: absolute;
		right: 3%;
		bottom: -4%;
		color: #231F20;
	}

	.noImgCenter {
		background-position: top;
	}

	.heightImageTab {
		height: 339px;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	.tailleDivFormLogin {
		width: 126%!important;
		height: 190%;
	}

	.rowSlider {
		position: relative;
		top: 2%;
		left: -8%;
		height: 50%;
	}
}

.imageLoginMobile {
	width: 100%;
}

.rowSelectionForm {
	position:relative;
}

.txtFormLoginMobile {
	padding-left: 10%;
	font-size: 31px;
}

.positionTxtLoginMobile {
	width: 100%;
	margin-left: 16%;
	padding-top: 3%;
}

.positionInputLoginMobile {
	left: -26px;
	position: relative;
}

.positionBtnLoginMobile {
	width: 40%;
	height: 100%;
	margin-left: 30%;
	padding: 5px;
	font-size: 17px;
}

.txtMDPLoginMobile {
	width: 50%;
	margin-top: 4px;
	margin-left: 25%;
	text-align: center;
	text-decoration: underline!important;
}

.btnAgriNextMobile {
	position: absolute;
	width: auto;
	height: 18%;
	margin-left: 10%;
	padding: 5px;
	top: 41%;
	font-size: 17px;
}

/* New password */
	.paddingNewPsw {
		padding: 10px;	
	}

	.labelInput {
        position: relative;
    }

    .labelInput input {
		font-size: 1em;
		color: black;
		background: transparent;
		padding: 1rem 3.2rem;
		border-radius: 5px;
		transition: all 0.2s;
    }

    .labelInput .password-icon {
        align-items: center;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        width: 20px;
        color: black;
        transition: all 0.2s;
    }
    .labelInput .password-icon:hover {
        cursor: pointer;
        color: #ff4754;
    }

    .labelInput .password-icon .eye-off {
        display: none;
    }
	.labelInput .password-icon .eye {
        display: block;
    }

	.labelInput .password-icon-mobile {
        align-items: center;
        position: absolute;
        top: 50%;
        right: 35px;
        transform: translateY(-50%);
        width: 20px;
        color: black;
        transition: all 0.2s;
    }
    .labelInput .password-icon-mobile:hover {
        cursor: pointer;
        color: #ff4754;
    }

    .labelInput .password-icon-mobile .eye-off {
        display: none;
    }
	.labelInput .password-icon-mobile .eye {
        display: block;
    }
	
	.changementSecuPc {
		cursor: pointer;
	}

	.changementAgriPc {
		cursor: pointer;
	}

	/* Loading */
	.positionLoader {
		margin-right: 50px;
	}
	.loader-40 {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		display: inline-block;
		position: relative;
		background: #FFF;
		box-shadow: -24px 0 #FFF, 24px 0 #FFF;
		-webkit-animation: shadowPulse 2s linear infinite;
				animation: shadowPulse 2s linear infinite;
	}

	.positionLoaderMobile {
		margin-left: 48%;
	}
	.loaderMobile-40 {
		width: 20px;
		height: 20px;
		/* font-size: 50px; */
		border-radius: 50%;
		display: inline-block;
		position: relative;
		background: #FFF;
		box-shadow: -24px 0 #fff, 24px 0 #fff;
		-webkit-animation: shadowPulse 2s linear infinite;
		animation: shadowPulse 2s linear infinite;
	}
	@-webkit-keyframes shadowPulse {
		33% {
		  background: #FFF;
		  box-shadow: -24px 0 #F3D813, 24px 0 #FFF;
		}
		66% {
		  background: #F3D813;
		  box-shadow: -24px 0 #FFF, 24px 0 #FFF;
		}
		100% {
		  background: #FFF;
		  box-shadow: -24px 0 #FFF, 24px 0 #F3D813;
		}
	  }
	  @keyframes shadowPulse {
		33% {
		  background: #FFF;
		  box-shadow: -24px 0 #F3D813, 24px 0 #FFF;
		}
		66% {
		  background: #F3D813;
		  box-shadow: -24px 0 #FFF, 24px 0 #FFF;
		}
		100% {
		  background: #FFF;
		  box-shadow: -24px 0 #FFF, 24px 0 #F3D813;
		}
	  }