/* CSS Document - REDAC 2019 */

/* =============================================================================
   $Forms
   ========================================================================== */
/* form {

} */

.messageBox {
    margin-bottom: 2rem;
    padding: 2rem;
}

span.oblig{
    display: inline-block;
    padding: 0 0 0 5px;
}

.skin_red span.oblig{
    color: #e3013a;
    color: var(--red);
}

.skin_blue span.oblig{
    color: #0069b2;
    color: var(--blue);
}

[type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], select, textarea {
    width: 100%;
    padding: 10px 15px;
    margin: 0 0 24px 0;
    /*
    -webkit-box-shadow: 0 0 0 1px #D1D1D1 inset;
    box-shadow: 0 0 0 1px #D1D1D1 inset;
    */
    color: #777777;
    font-family: "UnitOT", "Trebuchet MS", Arial, Helvetica, sans-serif;
    border: 1px solid #e6e6e6;
    border: 1px solid var(--lightGrey);
}

[type="text"]:focus,[type="password"]:focus{
    border: 1px solid #777;
    background-color: #FFF;
}

[type="submit"] {
    box-shadow: none;
}

label, form .title { 
    display: block;
    margin-bottom: 15px;
    font-size: 1.6rem;
    color: #757575;
    color: var(--grey); 
}

fieldset {
    padding: 0;
}

fieldset:not(:first-child) {
    margin-top: 30px;
}

fieldset legend {
    display: block;
    margin-bottom: 0;
    padding-bottom: 14px;
    line-height: 2.4rem;
    border-bottom: 1px solid #F4F4F4;
    font-family: "UnitOT-Medi", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    color: #000000;
}

.legendInfos {
    float: right;
    line-height: 2rem;
    font-family: "UnitOT", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    color: #757575;
    color: var(--grey);
    text-transform: capitalize;
}

.formRow + .formRow, 
.field + .formRow, 
.field + .formActions, 
.formRow + .formActions { 
    margin-top: 24px; 
}

.formActions {
    margin-top: 24px;
}

/* .formActions a:last-child{
    float: right;
} */

input + label { 
    display: inline;
    margin: 0 10px; 
}

.blocButtons {
    clear: both;
    overflow: hidden;
    margin-top: 27px;
}

/*knacss*/.radio { 
    -webkit-box-shadow: inset 0 0 0 2px #D2D4D6;
            box-shadow: inset 0 0 0 2px #D2D4D6;
}

/*knacss*/.checkbox {
    -webkit-box-shadow: inset 0 0 0 2px #D2D4D6;
            box-shadow: inset 0 0 0 2px #D2D4D6;
}

/* Skins red */
.skin_red1 .radio:checked { 
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23e3013a%22/%3E%3C/svg%3E");    
    -webkit-box-shadow: inset 0 0 0 2px #e3013a;
    -webkit-box-shadow: inset 0 0 0 2px var(--red1);
            box-shadow: inset 0 0 0 2px #e3013a;
            box-shadow: inset 0 0 0 2px var(--red1);
}

.skin_red1 .checkbox:checked {
    background-color: #e3013a;
    background-color: var(--red1);
    -webkit-box-shadow: inset 0 0 0 1px #e3013a;
    -webkit-box-shadow: inset 0 0 0 1px var(--red1);
            box-shadow: inset 0 0 0 1px #e3013a;
            box-shadow: inset 0 0 0 1px var(--red1);
}

.skin_red2 .radio:checked { 
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23e3013a%22/%3E%3C/svg%3E");    
    -webkit-box-shadow: inset 0 0 0 2px #e30613;
    -webkit-box-shadow: inset 0 0 0 2px var(--red2);
            box-shadow: inset 0 0 0 2px #e30613;
            box-shadow: inset 0 0 0 2px var(--red2);
}

.skin_red2 .checkbox:checked {
    background-color: #e30613;
    background-color: var(--red2);
    -webkit-box-shadow: inset 0 0 0 1px #e30613;
    -webkit-box-shadow: inset 0 0 0 1px var(--red1);
            box-shadow: inset 0 0 0 1px #e30613;
            box-shadow: inset 0 0 0 1px var(--red1);
}

.skin_red .radio:checked,
.skin_white .radio:checked { 
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23e2000b%22/%3E%3C/svg%3E");    
    -webkit-box-shadow: inset 0 0 0 2px #e2000b;
    -webkit-box-shadow: inset 0 0 0 2px var(--red);
            box-shadow: inset 0 0 0 2px #e2000b;
            box-shadow: inset 0 0 0 2px var(--red);
}

.skin_red .checkbox:checked,
.skin_white .checkbox:checked {
    background-color: #e2000b;
    background-color: var(--red);
    -webkit-box-shadow: inset 0 0 0 1px #e2000b;
    -webkit-box-shadow: inset 0 0 0 1px var(--red);
            box-shadow: inset 0 0 0 1px #e2000b;
            box-shadow: inset 0 0 0 1px var(--red);
}

/* Skins blue */
.skin_blue1 .radio:checked {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%230069b4%22/%3E%3C/svg%3E");
    -webkit-box-shadow: inset 0 0 0 2px #0069b4;
    -webkit-box-shadow: inset 0 0 0 2px var(--blue1);
            box-shadow: inset 0 0 0 2px #0069b4;
            box-shadow: inset 0 0 0 2px var(--blue1);
}

.skin_blue1 .checkbox:checked {
    background-color: #0069b2;
    background-color: var(--blue1);
    -webkit-box-shadow: inset 0 0 0 1px #0069b4;
    -webkit-box-shadow: inset 0 0 0 1px var(--blue1);
            box-shadow: inset 0 0 0 1px #0069b4;
            box-shadow: inset 0 0 0 1px var(--blue1);
}

.skin_blue2 .radio:checked {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%230076c0%22/%3E%3C/svg%3E");
    -webkit-box-shadow: inset 0 0 0 2px #0076c0;
    -webkit-box-shadow: inset 0 0 0 2px var(--blue2);
            box-shadow: inset 0 0 0 2px #0076c0;
            box-shadow: inset 0 0 0 2px var(--blue2);
}

.skin_blue2 .checkbox:checked {
    background-color: #0076c0;
    background-color: var(--blue2);
    -webkit-box-shadow: inset 0 0 0 1px #0076c0;
    -webkit-box-shadow: inset 0 0 0 1px var(--blue2);
            box-shadow: inset 0 0 0 1px #0076c0;
            box-shadow: inset 0 0 0 1px var(--blue2);
}

.skin_blue .radio:checked {
    background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%230068b1%22/%3E%3C/svg%3E");
    -webkit-box-shadow: inset 0 0 0 2px #0068b1;
    -webkit-box-shadow: inset 0 0 0 2px var(--blue);
            box-shadow: inset 0 0 0 2px #0068b1;
            box-shadow: inset 0 0 0 2px var(--blue);
}

.skin_blue .checkbox:checked {
    background-color: #0076c0;
    background-color: var(--blue);
    -webkit-box-shadow: inset 0 0 0 1px #0068b1;
    -webkit-box-shadow: inset 0 0 0 1px var(--blue);
            box-shadow: inset 0 0 0 1px #0068b1;
            box-shadow: inset 0 0 0 1px var(--blue);
}
/* input byline */
.field, 
.bigField {
    position: relative;
    text-align: left;
    clear: both;
    margin: 24px 0 0 0;
}

.field {
    min-height: 48px
}

.bigField {
    height: 115px;
}

/*@media screen and (min-width: 1000px) {
    .field, 
    .bigField { 
        width: 60%;
    }
}*/

.smallField {
	height: auto;
}

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

.inputField {
    z-index: 1;
    width: 100%;
    border: solid 1px #d1d1d1;
    padding: 9px 16px;
    font-size: 1.6rem;
    font-family: "UnitOT", "Trebuchet MS", Arial, Helvetica, sans-serif;
    line-height: 1.75;
    vertical-align: middle;
    box-sizing: border-box;
    color: #172328;
}

.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;
	font-size: 1.6rem;
    font-family: "UnitOT", "Trebuchet MS", Arial, Helvetica, sans-serif;
	vertical-align: middle;
	-webkit-transform: translateY(16px);
	transform: translateY(16px);
	transition: all .3s;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
}

.field.focused .labelField {
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 12px
}

.hasLabel .labelField {
	-webkit-transform: translateY(-50%) scale(1);
	transform: translateY(-50%) scale(1);
	font-size: 12px
}

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

.labelSelect {
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 12px
}

.checkboxDiv {
	margin-top: 8px
}

.labelCheckbox {
	display: block;
	z-index: 2;
	padding: 0 4px;
	color: #777;
	font-size: 16px;
	vertical-align: middle;
}

.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%;
	margin-top: -3px;
	margin-right: 6px;
	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;
}

.skin_red1 .checkboxDiv input[type=radio]:checked + label:before {
    background: #e3013a;
    background: var(--red1);
    border-color: #e3013a;
    border-color: var(--red1);
}

.skin_red2 .checkboxDiv input[type=radio]:checked + label:before {
    background: #e30613;
    background: var(--red2);
    border-color: #e30613;
    border-color: var(--red2);
}
.skin_red .checkboxDiv input[type=radio]:checked + label:before,
.skin_white .checkboxDiv input[type=radio]:checked + label:before {
    background: #e2000b;
    background: var(--red);
    border-color: #e2000b;
    border-color: var(--red);
}
.skin_blue1 .checkboxDiv input[type=radio]:checked + label:before {
    background: #0069b4;
    background: var(--blue1);
    border-color: #0069b4;
    border-color: var(--blue1);
}

.skin_blue2 .checkboxDiv input[type=radio]:checked + label:before {
    background: #0076c0;
    background: var(--blue2);
    border-color: #0076c0;
    border-color: var(--blue2);
}
.skin_blue .checkboxDiv input[type=radio]:checked + label:before {
    background: #0068b1;
    background: var(--blue);
    border-color: #0068b1;
    border-color: var(--blue);
}

.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: #d2d4d6;
	box-shadow: inset 0 0 0 2px #fff
}

.checkboxDiv label {
	cursor: pointer;
	margin-right: 16px;
	height: 24px;
	font-size: 16px;
	line-height: 1.5;
	color: #172328
}

.labelNoMove {
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 12px
}

.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(--grey);
}

.infoAvatar, .bloctxt {
    display: block;
    margin-top: 16px;
    font-family: "UnitOT", "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    line-height: 1.8rem;
    color: #757575;
    color: var(--grey);
}

.uploadAvatar {
    height: auto;
}

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

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

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

    .containerInputError label {
        color: #E3013A;
    }

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

div.messageInputError, 
#lPasswordMessages {
    position: absolute;
    top: 55px;
    z-index: 1;
    display: block;
    width: 100%;
    margin-top: 14px;
	padding: 0 0 0 30px !important;
	vertical-align: middle !important;
	line-height: 20px;
    font-family: "UnitOT", "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.4rem !important;
	font-weight: normal !important;
}

div.messageInputError {
    color: #E3013A;
}

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

    #lPasswordMessages:empty {
        display: none;
    }

        #lPasswordMessages:empty:before {
            content: none;
        }

    #lPasswordMessages .rulesKO,
    #lPasswordMessages .rulesOK { 
        margin-left: 0;
        line-height: 1.5rem; 
        font-size: 1.3rem; 
    }

    #lPasswordMessages .rulesKO {
        color: #FF5B00 !important;
    }

    #lPasswordMessages .rulesOK {
        color: green !important;
    }

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

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

@media screen and (min-width: 1000px) {
    div.messageInputError,
    #lPasswordMessages {
        top: 0 !important;
        left: calc(100% + 15px);
        width: 65%;
    }
}

.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: 'IconRedac';
        font-size: 1.6rem;
        vertical-align: middle;
    }

    div.messageInputError:before {
        content: '\ea07';
    }
     
    #lPasswordMessages:before {
        content: '\ea0c';
    }

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

.skin_red1 .inputField.error {
    border-color: #e3013a;
    border-color: var(--red1);
}

.skin_red1 label.error {
    color: #e3013a;
    color: var(--red1);
}

.skin_red2 .inputField.error {
    border-color: #e30613;
    border-color: var(--red2);
}

.skin_red2 label.error {
    color: #e30613;
    color: var(--red2);
}
.skin_red .inputField.error,
.skin_white .inputField.error {
    border-color: #e2000b;
    border-color: var(--red);
}

.skin_red label.error,
.skin_white label.error {
    color: #e2000b;
    color: var(--red);
}

.skin_blue1 .inputField.error {
    color: #0069b2;
    border-color: var(--blue1);
}

.skin_blue1 label.error {
    color: #0069b2;
    color: var(--blue1);
}

.skin_blue2 .inputField.error {
    color: #0069b2;
    border-color: var(--blue2);
}

.skin_blue2 label.error {
    color: #0069b2;
    color: var(--blue2);
}
.skin_blue .inputField.error {
    color: #0068b1;
    border-color: var(--blue);
}

.skin_blue label.error {
    color: #0068b1;
    color: var(--blue);
}

.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;
    }

    @media screen and (min-width: 1000px) {
        .formActions .checkboxContainer label {
            width: 310px;
        }
    }

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

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

        .blocButtons .bt_neutral {
            width: 100%;
        }

.helpMessage {
    width: max-content;
}

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

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

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

    #updatePassword div.messageInputError, #updatePassword #lPasswordMessages {
        position: relative;
        top: 0;
    }

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