/* =============================================================================
    Forgot Passeword
 =============================================================================*/

.GXCO_ident .secondaryLink {
    display: block;
    text-align: right;
    width: fit-content;
    margin-right: 0;
    margin-left: auto;
}
#forgotPassword #blocform {
    border: none;
}

form#forgotPassword fieldset { 
    padding: 0;
}
.information-connexion {
    background-color: var(--background-light);
    padding: 8px;
    margin-top: 24px;
}

@media screen and (min-width: 1000px) {
    .GXCO_ident {
        width: 70%;
    }
    .GXCO_forgotPwd .field {
        width: 60%;
    }
}


/* =============================================================================
   $Forms
   ========================================================================== */
.checkbox {
    appearance: none; 
    vertical-align: text-bottom; 
    outline: 0; 
    cursor: pointer;
    width: 2rem;
    height: 2rem; 
    background-color: #fff; 
    border-radius: 4px; 
    box-shadow: inset 0 0 0 2px #d2d4d6; 
    transition: background-color .15s;

    &:checked {
        background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%208%208%22%20enable-background%3D%22new%200%200%208%208%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z%22%20%2F%3E%0A%3C%2Fsvg%3E);
        background-size: 60% 60%;
        background-position: center;
        background-repeat: no-repeat;
        background-color: #e2000b;
        box-shadow: inset 0 0 0 1px #e2000b;
    }
}

/* input byline */
.field, 
.bigField {
    position: relative;
    text-align: left;
    clear: both;
}

.field {
    min-height: 68px;

    +.note {
        font-size: 1.1rem;
        line-height: 2rem;
        color: var(--color-grey);
    }

    span.error {
        position: absolute;
        bottom: 4px;
        line-height: 1.8rem;
        color: var(--error);
        font-size: 1.25rem;
        font-style: italic;
    }
}

.field.column{
    width: 47%;
}

@media (max-width: 800px){
    .field.column {
        width: 100%;
    }
}


li.field {
    min-height: 16px;
}

.bigField {
    height: 115px;
}

.flexForm{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
@media (max-width: 800px){
    .flexForm{
        display: block;
    }
}

.smallField {
	height: auto;
}

.labelField,
.inputField {
	position: absolute;
	cursor: text;
}

.inputField {
    z-index: 1;
    width: 100%;
    border: solid 1px #d1d1d1;
    padding: 9px 16px;
    line-height: 2.3rem;
    vertical-align: middle;
    box-sizing: border-box;
    color: #172328;
    height: 44px;
}

.inputField.limited {
    max-width: 60%;
}

.inputField::-webkit-input-placeholder,
.inputField:-moz-placeholder,
.inputField::-moz-placeholder,
.inputField:-ms-input-placeholder {
	color: transparent;
}

.labelField {
	display: block;
	z-index: 2;
	left: 12px;
	padding: 0 4px;
	background-color: #fff;
	color: #777;
	transform: translateY(6px);
	transition: all .3s;
	transform-origin: 0 50%;
}

.field.focused .labelField {
	transform: translateY(-50%);
	font-size: 1rem;
}

.hasLabel .labelField,
.field.active .labelField {
	transform: translateY(-50%) scale(1);
	font-size: 1rem;
}

.selectField {
	position: absolute;
	z-index: 1;
	width: 60%;
	border: solid 1px #d1d1d1;
	padding: 9px 16px;
	font-size: 1.4rem;
	line-height: 1.75;
	vertical-align: middle;
	cursor: pointer;
	height: 48px
}

.labelSelect {
	transform: translateY(-50%);
	font-size: 1rem;
}

.checkboxDiv {
    padding: 12px 6px;
}
.checkboxDiv:not(.active) {
    background-color: var(--background-200);
}

.labelCheckbox {
	display: block;
	z-index: 2;
	padding: 0 4px;
	color: #777;
	font-size: 1.4rem;
}

.checkboxDiv input[type=radio],
.checkboxDiv input[type=checkbox] {
	display: none
}

.checkboxDiv input[type=radio]+label:before {
	background: #fff;
	border: 2px solid #d1d1d1;
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
	content: '';
	width: 14px;
	height: 14px
}

.checkboxDiv input[type=radio]:checked + label:before {
	box-shadow: inset 0 0 0 2px #fff;
    background: var(--main);
    border-color: var(--main);
}

.checkboxDiv input[type=checkbox] + label:before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border: solid 2px #d2d4d6;
	border-radius: 2px;
	margin-right: 10px;
	vertical-align: middle;
}

.checkboxDiv input[type=checkbox]:hover + label:before {
	border-color: #212121;
}

.checkboxDiv input[type=checkbox]:checked + label:before {
	background-color: #212121;
    border-color: #212121;
	box-shadow: inset 0 0 0 2px #fff;
}
.checkboxDiv label {
	cursor: pointer;
	margin-right: 16px;
	height: 24px;
	font-size: 1.4rem;
	line-height: 1.5;
	color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-connexion,
.form-creation {
    margin-top: 14px;
}
.civiliteDiv {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.civiliteDiv .societe {
    font-weight: 700;
}
.civiliteDiv label {
    height: auto;
    display: block;
}
.civiliteDiv label:first-of-type {
    padding: 1rem;
    border: 1px solid;
    margin: 0;
    border-radius: 5px 0 0 5px;
}
.civiliteDiv label:nth-of-type(2) {
    padding: 1rem;
    border: 1px solid;
    margin: 0;
    border-radius: 0 5px 5px 0;
    margin-left: -2px;
}
.civiliteDiv label:last-of-type {
    margin-left: auto;
    text-decoration: underline;
    margin-top: 10px;
    @media screen and (min-width: 420px){
        margin-top: 0;
    }
} 
.civiliteDiv label:last-of-type::before {
    display: none!important;
}
.civiliteDiv input[type=radio] + label:before {
    width: auto;
    height: auto;
    border: none;
    box-shadow: none;
}
.civiliteDiv input[type=radio]:checked + label {
    border-width: 2px;
}
.civiliteDiv input[type=radio]:checked + label:before {
    content: '\02713';
    border: none;
    background: none;
    box-shadow: none;
}
.labelNoMove {
	transform: translateY(-50%);
	font-size: 1rem;
}

.inputField:focus,
.selectField:focus {
	outline: none;
	border: 2px solid #777
}

label.inlineLabel {
    display: inline;
    line-height: 45px;
    margin-right: 10px;
    padding-left: 15px;
}

label.inlineLabel::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 45px;
    background-color: var(--color-grey);
}

/* Form Validation */
.containerInputError {
    min-height: 115px;

    label {
        color: #E3013A;
    }
}

@media screen and (min-width: 1000px) {
    .containerInputError {
       min-height: initial;
    }
}

.bigField.containerInputError {
    min-height: 140px;
}

div.messageInputError {
    color: #E3013A;
}

#lPasswordMessages {
    margin-top: 0;
    color: #FF5B00;

    &:empty {
        display: none;

        &:before {
            content: none;
        }
    }
}

input.messageInputError {
    border: solid 1px #E3013A;
}

.radio.messageInputError, 
.checkbox.messageInputError {
    box-shadow: inset 0 0 0 2px #E3013A;
}

.bigField div.messageInputError { 
    top: 119px;
}

@media screen and (min-width: 1000px) {
    .bigField div.messageInputError {
        top: calc(50% - 40px) !important;
    }
}

div.messageInputError:before, 
#lPasswordMessages:before {
    position: absolute;
    top: -2px;
    left: 0;
    font-family: 'IcoLIM';
    font-size: 1.6rem;
    vertical-align: middle;
}


#lPasswordMessages.allValid:before {
    color: green;
}

.inputField.error {
    border-color: var(--error);
}

label.error {
    color: var(--error);
}

.hpUser {
    display: none;
}


.formActions .checkboxContainer {
    position: relative;
}

    .formActions .checkboxContainer .messageInputError  {
        margin-top: 0;
    }

    .formActions .checkboxContainer + .checkboxContainer {
        margin-top: 24px;
    }

    .formActions .checkbox {
        display: inline-block;
    }

    .formActions .checkboxContainer label {
        width: calc(100% - 45px);
        vertical-align: middle;
    }


    .formActions a:last-child {
        float: none;
    }

    @media screen and (min-width: 1000px) {
        .blocButtons {
            width: 60%;
        }
    }

    .blocButtons .bt_neutral {
        width: 100%;
    }



.field.civilite .labelField, .field.civilite .radio {
    position: static;
    float: none;
    margin-top: 10px;
}

#showPassword, #showPassword2, #showPassword3{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    position: absolute;
    right: 0;
    z-index: 2;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    color: #777;
}

.devicelimit-connect-container{

    .icon_devicelimit{
        height: 100px;
        text-align: center;

        img{
            height: 100px;
        }
    }

    .corps_container p{
        font-size: 1.4rem;
        text-align: center;
        margin: 0;
    }

    span.bold{
        font-weight: bold;
    }

    .modalBlocButtons{
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 8px;

        &>*{
            width: 100%;
            white-space: normal;
            word-wrap: break-word;
            line-height: 24px;
            padding: 8px 16px;
        }

        #btLogin_devicelimit{
            white-space: normal;
            text-transform: none;
            line-height: 24px;
            padding: 8px 16px;
        }

        #bt-devicelimit-form-cancel{
            border: 1px solid transparent;
            font-weight: bold;

            &:hover{
                border: 1px solid var(--error);
                background-color: unset;
                color: var(--error);
            }
        }

    }

    .textBloc{
        text-align: center;
        padding-top: 10px;
        width: 50%;
        float: right;

        span{
            color: #929292;
        }
    }

    .showMoreText{
        background-color: #dddddd;
        margin-top: 15px;

        .showMoreTitle{
            cursor: pointer;
            padding: 8px 16px;
            line-height: 24px;
            position: relative;

            &::after {
                content: "haut";
                font-family: 'IcoLIM';
                font-size: 1rem;
                position: absolute;
                margin-left: 10px;
                right: 16px;
            }
        }

        .content_text{
            margin: 15px 16px 10px;
            
            p{
                font-size: 1.4rem;
            }

            p:last-child{
                margin-bottom: 0;
            }
        }

        .mini .content_text{
            display: none;
        }

        .mini .showMoreTitle::after{
            content: "bas";
        }
    }

    p{
        line-height: 2.2rem;
    }

    
}

.GXCO_content .devicelimit_True .alert--danger, .GXCO_content .devicelimit_True .alertdangermodale{
    display: none;
}

/*.smartphone {*/
@media screen and (max-width: 999px) {
    .GXCO_content {
        padding-bottom: 0px;

        .modalBlocButtons >*{
            width: 100% !important;
        }

        .textBloc{
            margin-bottom: 15px;
            width: 100%;
            float: none;
        }
        
        .showMoreText{
            position: relative;
            width: 100vw;
            margin-left: -16px;

            .showMoreTitle, .content_text{
                margin: 15px 16px 0 16px
            }
            
        }
    }

    
}

.deviceLimitOAuthRedirect{

    body &{
        padding-top: 0;
    }

    margin: 0 29px;

    .icon_devicelimit{
        height: 100px;
        text-align: center;

        img{
            height: 100px;
        }
    }

    &>.title{
        font-size: 2.8rem;
		font-weight: 600;
        line-height: 3.8rem;
        color: #212121;
    }

    .corps_container p{
        font-size: 1.4rem;
        text-align: center;
        margin: 0;
    }

    span.bold{
        font-weight: bold;
    }

    #btLogin_devicelimit{
        width: 100%;
    }

    .blocButtons{
        text-align: center;

        &>a{
            width: 100%;
            color: #fff;
            position: relative;
            background-image: none;
            border: none;
        }

        .btLogin_devicelimit{
            white-space: normal;
            line-height: 20px;
            text-transform: none;
            background-color: var(--error);

            &:hover{
                background-color: var(--color-dark-grey);
            }

            .skin_blue1 &{
                background-color: #0068b1;

                &:hover{
                    background-color: #0068b1;
                }
            }

            .skin_blue2 &{
                background-color: #0076c0;

                &:hover{
                    background-color: #0076c0;
                }
            }
        }

        .bt_reverse{
            border: none;
            font-weight: bold;
            color: var(--error);

            &:hover{
                color: var(--error);
                background-color: unset;
                border: 1px solid var(--error);
            }

            .skin_blue1 &{
                color: #0068b1;

                &:hover{
                    color: #0068b1;
                    background-color: unset;
                    border: 1px solid #0068b1;
                }
            }

            .skin_blue2 &{
                color: #0076c0;

                &:hover{
                    color: #0076c0;
                    background-color: unset;
                    border: 1px solid #0076c0;
                }
            }
        }
    }

    .textBloc{
        text-align: center;
        padding-top: 10px;
        width: 50%;
        float: right;

        span{
            color: #929292;
        }
    }

    .showMoreText{
        background-color: #dddddd;
        position: relative;
        width: calc(100vw - 17px);
        margin-left: -29px;

        .showMoreTitle{
            height: 48px;
            cursor: pointer;
            margin-left: 64px;
            line-height: 48px;
            margin: 15px 29px 0 29px;

            &::after {
                content: "haut";
                font-family: 'IconLIM';
                font-size: 2rem;
                position: absolute;
                margin-left: 10px;
            }
        }

        .content_text{
            margin: 15px 29px 0 29px;
            
            p{
                font-size: 1.4rem;
            }
        }

        .mini .content_text{
            display: none;
        }

        .mini .showMoreTitle::after{
            content: "keyboard_arrow_down";
        }
    }

    p{
        line-height: 2.2rem;
    }
}

.GXCO_forgotPwd{
    margin-bottom: 30px;
}

@media (max-width:1000px){
    #updatePassword #divPasswordMessages {
        padding-top: 55px;
    }

    #updatePassword #lPasswordMessages {
        position: relative;
        top: 0;
    }

    #updatePassword #lPasswordMessages .rulesKO, #updatePassword #lPasswordMessages .rulesOK {
        display: inline-block;
        margin-right: 15px;
    }

    #updatePassword div.messageInputError {
        top: 35px;
    }
}

.rappel {
    font-size: 1.3rem;
    margin-left: 20px;
    text-decoration: underline;
    @media screen and (max-width: 1019px) {
        margin: 0 auto;
        text-align: center;
        width: 100%;
        display: inline-block;
    }
    &:hover {
        text-decoration: none;
    }
}

/*======================================*/
/* Changepassewordbylink */
/*======================================*/
.GXCO_ResetPassword label {
    font-size: 1.8rem;
    font-weight: 700;
}
.GXCO_ResetPassword .formRow:not(:first-child) {
    margin-top: 24px;
}
.GXCO_ResetPassword .oblig span {
    color: var(--error);
}

.GXCO_ResetPassword .wrap-form {
    display: flex;
    flex-direction: row-reverse;
    gap: 8px;
}
.GXCO_ResetPassword .wrap-form > div {
    flex: 2;
}
.GXCO_ResetPassword .wrap-form > div input {
    width: 100%;
}
.GXCO_ResetPassword .wrap-form .helpIcon {
    flex: 1;
    background: var(--background-100);
    padding: 6px;
}
.GXCO_ResetPassword .wrap-form .helpIcon::before {
    content: "info";
    display: block;    
    font-family: icoEBS;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 2rem;
    color: var(--error);
    
}
@media screen and (max-width: 999px) {
    .GXCO_ResetPassword .wrap-form {
        flex-direction: column;
    }
    
}