@charset "utf-8";
/* CSS Document */

.wrraper-boxs-form{width:100%; max-width:1200px; background:#f1f7f4 url("../imgs/bg-container.png")center top no-repeat;    background-size:cover; padding:40px; border-radius:10px; text-align:center;}
.container-boxs-form{width:100%; max-width:626px; padding:20px 40px; border:1px solid #a9c4b3; border-radius:6px; margin:0 auto;}
.box-form{width:100%; display:flex; justify-content:space-between; margin-bottom:20px;}
.box-label{display:inline-block; width:auto; height:40px; line-height:40px; text-align:right; font-family:'Inter Medium'; 
 font-size:16px;}
.box-label-wide{display:inline-block; width:auto; height:40px; line-height:40px; margin-right:10px; font-family:'Inter Medium'; 
 font-size:16px;}


.field-text{display:block; width:360px; height:40px; font-family:'Inter Regular'; font-size:16px; outline:none;
background:#fff; padding:0 10px; border:1px solid #d2d8d6; border-radius:4px; margin:0 0 0 0;}

.field-text-small{display:block; width:100px; height:40px; font-family:'Inter Regular'; font-size:16px; outline:none;
background:#fff; padding:0 10px; border:1px solid #d2d8d6; border-radius:4px; margin:0 0 0 0;}

.field-select{display:block; width:360px; height:40px; font-family:'Inter Regular'; font-size:16px; 
-webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; outline:none; 
background:#fff url("../imgs/fleche-select.png") 98% center no-repeat; padding:0 10px; border:1px solid #d2d8d6; 
border-radius:4px; margin:0 0 0 0;}
.field-select:invalid{color:gray;}




.msg-succes-end{width:100%; max-width:720px; text-align:center; color:#37614e; font-family:'Inter Medium'; font-size:18px; background:#eff6f2 url("../imgs/bg-container.png")center 0 no-repeat; background-size:cover; padding:20px; border-radius:10px; margin:50px auto; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.34);}

i[role="succes-big"]{display:block; width:50px; height:50px;
background: url("../imgs/icone-succes-big.png")center center no-repeat; margin:0 auto;}


.btn-link{display:inline-block; width:auto; padding:15px 20px; background:#3D9E72; color:#fff; font-family:'Inter Medium'; 
 font-size:16px; border-radius:30px; margin:0 auto;}


.container-btn-actions{width:120px; display:flex; justify-content:center; padding:0 4px; margin:0 auto;}
.container-btn-actions a{margin:0 2px;}
a[role="supviser"]{width:30px; height:30px; background:#1f9477 url("../imgs/icone-btn-superviser.png")center center no-repeat;
 border-radius:3px;}
a[role="modifier"]{width:30px; height:30px; background:#4171a5 url("../imgs/icone-btn-modifier.png")center center no-repeat;
 border-radius:3px;}
a[role="suprimer"]{width:30px; height:30px; background:#c7543e url("../imgs/icone-btn-supprimer.png")center center no-repeat;
 border-radius:3px;}





.bgchecked{background:#000;}


/*CHECKBOX special*/
.wrraper-checkbox-special{width:100%; max-width:620px; background:#f9f9f5; border:1px solid #ebeae5; border-radius:8px; 
 margin:0 auto;}
.container-checkbox-special{border-bottom:1px solid #ebeae5; margin-bottom:4px; position:relative;}
.container-checkbox-special:last-child{border-bottom:none;}
.checkbox-special{display:none;}
.label-special{width:100%; height:70px; display:flex; flex-direction:row-reverse; justify-content:space-between; 
 align-items: center; position:relative; font-family:'Inter Regular'; font-size:16px;
text-align:left; cursor:pointer; padding:0 20px; margin:0 auto 0 auto;}
.label-special > span{display:flex; width:26px; height:26px; justify-content:center;  border-radius:50px;
border:2px solid #3ba196; transition:all 0.1s ease-in-out;}
.checkbox-special:checked + label > span{background:#3ba196; transition:all 0s ease-in-out;}
.checkbox-special:checked + label > span:before{content:''; margin:8px 0 0 -6px; 
border-right:3px solid transparent; border-bottom:3px solid transparent; transform:rotate(45deg); transform-origin:0% 100%;
animation:checked-box 80ms 120ms forwards;}
.label-special .champ{margin: 0 10px 0 10px;}
@keyframes checked-box{
0%{width:0; height:0; border-color:#fff; transform:translate(0,0) rotate(45deg);}
33%{width:4px; height:0; border-color:#fff; transform:translate(0,0) rotate(45deg);}
100%{width:4px; height:8px; border-color:#fff; transform:translate(0,-8px) rotate(45deg);}
}