@media (max-width:992px){
    .contenu_main{display: flex; flex-direction: column;align-items: center;}
    .container_connexion{margin-bottom: 8%!important;}
}

@media (max-width:576px){
    .contenu_main {padding: 20px!important;}
    .container_connexion {margin-bottom: 3%!important;}
}

#etape-2,
#etape-3 {
    display: none;
}

html body {
    background-image: none
}

.div1 {
    width: 50%;
    justify-content: end;
    display: flex;
    padding-right: 20px
}

.div2 {
    display: flex;
    width: 50%;
    justify-content: center;
    padding-left: 20px;
}

.principalDiv {
    display: flex;
    flex-wrap: wrap;
    padding: 100px 20px 100px 100px;
}
.btn:focus{
    background-color: var(--bs-primary);
}
.form-employe {
    display: flex;
    flex-wrap: wrap;
    resize: both;
    overflow: clip;
}

.form-employe input[type=text],
input[type=email],
input[type=password], 
[data-password-etape="3"] input {
    background-color: #f2f2f2;
    border: none;
    border-radius: 50px;
    padding: 18px;
    width: 100%;
}

.form-employe input[type=submit] {
    margin-top: 50px;
    margin-left: 0px !important
}

.form-divs {
    /* padding-bottom: 20px;
    display: grid;
    width: 100%;
    resize: both;
    overflow: clip; */
    cursor: pointer;
}

.form-employe label {
    margin-bottom: 10px;
}

.btnForm {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap !important;
    padding-right: 16%;
    padding-left: 16%;
    margin-top: 19%;
}

.form-employe input[type=text]:focus,
input[type=email]:focus-visible,
input[type=password]:focus {
    outline: none;
    box-shadow: 0px 7px 22px rgba(143, 134, 200, 0.08)
}

h6.card-title.titleEmpl {
    font-size: 50px !important;
    line-height: 1.6
}

p.card-text {
    line-height: 1.8;
    padding-left: 65px;
    padding-right: 65px
}

.card-text {
    margin-top: 45px !important;
}

::placeholder {
    color: #919191
}

input.btn.btn-primary.fw-semiBold.py-12.px-xl-43.ms-xl-12.rounded-pill {
    padding: 18px 45px !important;
    width: 100%;
    margin-left: 0px !important
}

.form-submit {
    width: 100% !important
}

input.btnSwap1 {
    width: 100%;
    border-style: none;
    border-radius: 2px;
    height: 6px;
    margin-top: 30px
}

input.btnSwap2 {
    width: 100%;
    border-style: none;
    border-radius: 2px;
    height: 6px;
    margin-top: 30px
}

input.btnSwap0 {
    width: 100%;
    border-style: none;
    border-radius: 2px;
    height: 6px;
    margin-top: 30px
}

.swap1,
.swap2,
.swap0 {
    padding: 0px 5px;
}

.swap.active {
    width: 110% !important;
}

.swap .btnSwap {
    background-color: #f2f2f2
}

.swap.active .btnSwap {
    background-color: #7fc2c8
}

.slideForm1 {
    display: block
}

.slideForm2 {
    display: none
}

.nomError {
    display: none;
    color: #da5353;
    padding-top: 10px;
    font-style: italic;
    font-size: 14px
}

.prenomError {
    display: none;
    color: #da5353;
    padding-top: 10px;
    font-style: italic;
    font-size: 14px
}

.cpError, .villeError {
    display: none;
    color: #da5353;
    padding-top: 10px;
    font-style: italic;
    font-size: 14px
}

.formatError {
    display: none;
    color: #da5353;
    padding-top: 10px;
    font-style: italic;
    font-size: 14px
}

.cpFormat,
.telError,
.telFormat {
    display: none;
    color: #da5353;
    padding-top: 10px;
    font-style: italic;
    font-size: 14px
}

.emailError,
.mailTaken {
    display: none;
    color: #da5353;
    padding-top: 10px;
    font-style: italic;
    font-size: 14px
}

.password2Error {
    display: none;
    color: #da5353;
    padding-top: 10px;
    font-style: italic;
    font-size: 14px
}

/* .nomAfter,
.prenomAfter,
.telAfter,
.emailAfter,
.cpAfter {
    display: none;
    color: #da5353;
} */

input.btn.btn-primary.fw-semiBold.py-12.px-xl-43.ms-xl-12.rounded-pill.btnEmpl:active,
input.btn.btn-primary.fw-semiBold.py-12.px-xl-43.ms-xl-12.rounded-pill.btnEmpl:focus {
    background-color: #7fc2c8;
    border-color: #7fc2c8
}

.valide {
    background-image: url("https://workeez.dev/public/assets/images/icon/valideIcon.png");
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: 20px
}

.labelCheck {
    font-family: Poppins;
    font-weight: 600;
    font-size: 20px;
    line-height: 30px;
}

.spanCheck {
    font-family: Poppins;
    font-weight: 600;
    font-size: 20px;
    color: #7fc2c8;
    line-height: 30px;
}

input#emploi {
    display: none
}

input#alternance {
    display: none
}
input#stage {
    display: none
}
/* .radioForm {
    box-shadow: 0px 7px 22px rgb(143 134 196 / 7%);
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 40px 55px;
    gap: 20px;
    margin-bottom: 30px
} */
/* .radioForm:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 5px 2px rgba(156, 156, 156, 0.331);
} */
.activeDivRadio {
    box-shadow: 0px 0px 0px 0px white;
    border: 3px solid #7fc2c8
}

.unmask {
    padding-top: 18px;
    right: 70px
}

.unmask2 {
    padding-top: 16px;
    right: 70px
}

.slideForm2 label {
    font-size: 18px;
}

.imgValide {
    width: 20px
}

.greenFields {
    color: green;
}

.redFields {
    color: red;
}

.form-divs label {
    font-size: 18px !important;
    cursor: pointer;
}

.confirmInput {
    width: 13%;
    border: none;
    border-bottom: 1px solid black;
    margin-left: 10px;
    font-size: 23px;
    height: 60px;
    text-align: center;
    background-color: transparent
}

.form-confirmation {
    display: none
}

ul.ulPass {
    padding-left: 28px
}

.noEmptyDigit {
    color: #7fc2c8;
    border-color: #7fc2c8;
}

@media (max-width:1410px) {
    .col-12.col-md-6.col-lg-4.my-12 {
        width: 65% !important
    }
}

@media (max-width:1024px) {
    .div1 {
        width: 100% !important;
        justify-content: center !important;
        padding-right: 0px !important
    }

    .div2 {
        width: 100% !important;
        justify-content: center !important;
        padding-left: 0px !important
    }

    .principalDiv {
        box-shadow: 0px 7px 22px rgb(143 134 196 / 7%)
    }

    .col-12.col-md-6.col-lg-4.my-12 {
        width: 100% !important
    }
}

@media (max-width:576px) {
    .titleEmpl {
        font-size: 40px !important;
    }

    .principalDiv {
        padding: 40px 20px !important;
    }

    .card-icon {
        padding: 20px !important;
    }
}