@axa-fr/design-system-slash-css 1.2.1-alpha.8 → 1.2.1-alpha.80

package/dist/Form/Checkbox/Checkbox.scss

@@ -1,4 +1,3 @@
-@use "../../common/common" as common;
 @use "../core/FormCore";
 @use "../../common/grid";
 
@@ -6,6 +5,20 @@
 .af-form {
   &__checkbox,
   &__checkbox-inline {
+    .af-form__indicator {
+      display: flex;
+      width: 1rem;
+      height: 1rem;
+      border: 1px solid var(--input-border-color);
+      background-color: var(--white);
+      fill: none;
+
+      .ok-icon {
+        display: none;
+        fill: var(--white);
+      }
+    }
+
     &--disabled {
       .af-form__label {
         opacity: 0.4;
@@ -15,21 +28,32 @@
 
     &--error {
       .af-form__label {
-        color: common.$color-red-axa;
+        color: var(--error-color);
       }
 
       .af-form__indicator {
-        border-color: common.$color-red-axa;
+        border-color: var(--error-color);
+      }
+
+      .af-form__input-checkbox:checked + .af-form__label {
+        .af-form__indicator {
+          border-color: var(--error-color);
+          background-color: var(--error-color);
+        }
+
+        .ok-icon {
+          display: block;
+        }
       }
     }
 
     &--warning {
       .af-form__label {
-        color: common.$color-orange-dark;
+        color: var(--warning-color);
       }
 
       .af-form__indicator {
-        border-color: common.$color-orange-dark;
+        border-color: var(--warning-color);
       }
     }
   }
@@ -40,18 +64,24 @@
 
     &:checked + .af-form__label {
       .af-form__indicator {
-        border-color: common.$color-azur;
-        color: common.$white;
-        background-color: common.$color-azur;
+        border-color: var(--button-primary-default);
+        color: var(--white);
+        background-color: var(--button-primary-default);
 
-        .glyphicon-ok {
+        .ok-icon {
           display: block;
         }
       }
     }
 
-    &:focus + .af-form__label {
-      color: common.$color-azur;
+    &:focus {
+      & + .af-form__label {
+        color: var(--brand-primary);
+
+        .af-form__indicator {
+          border-color: var(--brand-primary);
+        }
+      }
     }
   }
 
@@ -61,7 +91,7 @@
   &__checkbox {
     position: relative;
     display: block;
-    border-bottom: 1px solid common.$color-silver;
+    border-bottom: 1px solid var(--disabled-color);
     align-items: center;
 
     &:nth-last-child(1) {
@@ -82,8 +112,7 @@
   }
 
   /* Custom */
-  &__checkbox-custom,
-  &__checkbox-toggle {
+  &__checkbox-custom {
     position: relative;
     display: inline-flex;
     margin: 0 0.3rem 0.3rem 0;
@@ -93,15 +122,23 @@
     .af-form__label {
       margin: 0;
       padding: 0.5rem 2rem;
-      border: common.$color-gray;
       font-weight: normal;
-      background: common.$color-mercury;
-      box-shadow: inset 0 -2px 0 0 common.$color-scorpion;
+      background: var(--gray20);
+      box-shadow: inset 0 -2px 0 0 var(--gray50);
       cursor: pointer;
     }
 
     .af-form__indicator {
       left: 1rem;
+      display: flex;
+      width: 1rem;
+      height: 1rem;
+      border: 1px solid var(--input-border-color);
+      background-color: var(--white);
+
+      .ok-icon {
+        display: none;
+      }
     }
 
     .af-form__description {
@@ -113,58 +150,90 @@
       opacity: 0;
 
       &:checked + .af-form__label {
-        color: common.$white;
-        background-color: common.$color-azur;
-        box-shadow: inset 0 -2px 0 0 common.$color-axa;
+        color: var(--white);
+        background-color: var(--brand-primary);
+        box-shadow: inset 0 -2px 0 0 var(--axablue90);
 
         .af-form__indicator {
-          border: 1px solid common.$color-silver;
-          color: common.$color-mine-shaft;
-          background: common.$white;
+          border-color: var(--brand-primary);
+          background: var(--white);
 
-          .glyphicon-ok {
-            color: common.$color-azur;
+          .ok-icon {
+            fill: var(--brand-primary);
           }
         }
       }
 
       &:focus + .af-form__label {
-        color: common.$white;
-        background-color: common.$color-axa;
-        box-shadow: 0 0 5px common.$color-axa;
+        color: var(--white);
+        background-color: var(--brand-primary);
+        box-shadow: 0 0 5px var(--brand-primary);
       }
-    }
 
-    &--disabled {
-      .af-form__label {
-        opacity: 0.6;
-        box-shadow: inset 0 -2px 0 0 common.$color-silver;
+      &:disabled + .af-form__label {
+        background-color: var(--gray20);
+        box-shadow: inset 0 -2px 0 0 var(--disabled-color);
         cursor: not-allowed;
+
+        .af-form__description {
+          color: var(--disabled-color);
+        }
+
+        .af-form__indicator {
+          border: 1px solid var(--gray50);
+          background: var(--white);
+
+          .ok-icon {
+            fill: var(--gray50);
+          }
+        }
       }
 
-      .af-form__description {
-        opacity: 0.4;
+      &[aria-invalid="true"] + .af-form__label {
+        color: var(--error-color);
+        background-color: var(--red10);
+        box-shadow: inset 0 -2px 0 0 var(--error-color);
+
+        .af-form__indicator {
+          border-color: var(--error-color);
+
+          .ok-icon {
+            fill: var(--error-color);
+          }
+        }
       }
-    }
 
-    &--error {
-      .af-form__label {
-        color: common.$color-red-error;
-        background: common.$error-custom-bg;
-        box-shadow: inset 0 -2px 0 0 common.$color-red-error;
+      &[aria-invalid="true"]:focus + .af-form__label {
+        box-shadow: none;
+        outline: 2px solid var(--button-primary-default);
+        outline-offset: 0;
       }
 
-      .af-form__indicator {
-        border-color: common.$color-red-error;
+      &[aria-invalid="true"]:disabled + .af-form__label {
+        background-color: var(--gray20);
+        box-shadow: inset 0 -2px 0 0 var(--error-color);
+        cursor: not-allowed;
+
+        .af-form__description {
+          color: var(--disabled-color);
+        }
+
+        .af-form__indicator {
+          border-color: var(--disabled-color);
+
+          .ok-icon {
+            color: var(--disabled-color);
+          }
+        }
       }
     }
 
     &:hover {
       .af-form__label {
-        border-color: common.$color-axa;
-        color: common.$white;
-        background-color: common.$color-azur;
-        box-shadow: inset 0 -2px 0 0 common.$color-axa;
+        border-color: var(--brand-primary);
+        color: var(--white);
+        background-color: var(--brand-primary);
+        box-shadow: inset 0 -2px 0 0 var(--axablue90);
       }
     }
   }
@@ -172,22 +241,34 @@
   /* Toggle */
 
   &__checkbox-toggle {
+    position: relative;
+    display: inline-flex;
+
     .af-form__label {
-      padding: 1rem 1.6rem;
+      width: 48px;
+      height: 24px;
+      padding: 0;
       border: none;
       border-radius: 50px;
-      box-shadow: none;
+      background-color: var(--input-border-color);
     }
 
     .af-form__indicator {
-      position: absolute;
-      top: 50%;
-      left: 5px;
-      padding: 0.7rem;
+      width: 20px;
+      height: 20px;
+      margin: 0 2px;
       border: 0;
       border-radius: 100%;
-      transform: translate(0, -50%);
+      background-color: var(--white);
       transition: 0.4s;
+
+      @media (prefers-reduced-motion: reduce) {
+        transition: none;
+      }
+
+      .ok-icon {
+        display: none;
+      }
     }
 
     .af-form__description {
@@ -196,55 +277,79 @@
 
     .af-form__input-checkbox {
       &:checked + .af-form__label {
-        border: none;
-        color: common.$white;
-        background-color: common.$color-green-4;
-        box-shadow: none;
+        color: var(--white);
+        background-color: var(--button-primary-default);
 
         .af-form__indicator {
-          color: common.$color-mine-shaft;
-          background: common.$white;
-          transform: translate(17px, -50%);
-
-          .glyphicon-ok {
-            display: none;
-            color: common.$color-azur;
+          color: var(--text-color);
+          background: var(--white);
+          transform: translateX(24px);
+
+          .ok-icon {
+            position: absolute;
+            left: -22px;
+            display: block;
+            width: 18px;
+            height: 100%;
+            animation: show-ok-icon 0.4s linear;
+            fill: var(--white);
+
+            @media (prefers-reduced-motion: reduce) {
+              animation: none;
+            }
           }
         }
       }
 
       &:focus + .af-form__label {
-        border: none;
-        color: common.$white;
-        background-color: common.$color-axa;
-        box-shadow: none;
+        outline: 3px solid var(--button-primary-default);
+        outline-offset: -1px;
       }
-    }
 
-    &:hover {
-      .af-form__label {
-        border: none;
-        box-shadow: none;
+      &:disabled + .af-form__label {
+        background-color: var(--disabled-color);
+        cursor: not-allowed;
+
+        .af-form__indicator {
+          background-color: var(--inactive-button-border-color);
+
+          .ok-icon {
+            display: none;
+          }
+        }
       }
     }
 
-    &--error {
+    &:hover {
       .af-form__label {
-        background-color: common.$color-red-error;
+        outline: 3px solid var(--button-primary-default);
+        outline-offset: -1px;
       }
-    }
 
-    &--warning {
-      .af-form__label {
-        background-color: common.$color-orange-dark;
+      .af-form__input-checkbox:disabled + .af-form__label {
+        outline: none;
       }
     }
 
-    &--disabled:hover {
+    &--error {
       .af-form__label {
-        background-color: common.$color-gray-3;
+        background-color: var(--error-color);
       }
     }
   }
 }
+
+@keyframes show-ok-icon {
+  0% {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
 /* stylelint-enable no-descending-specificity */

package/dist/Form/Date/Date.css

@@ -1 +1 @@
-.af-form{background:#f5f5f5;padding:1rem}.af-form__group{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:3rem}.af-form__group--label-top{align-items:flex-start}.af-form__group-label{font-weight:400;margin:0}.af-form__group-label--required:after{color:#c7102e;content:" *"}.af-form__message{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-start;margin:.2rem 0;min-height:1.6em;position:absolute}.af-form__message .glyphicon{margin-right:.4rem;width:17px}.af-form__message--error{color:#ff1721}.af-form__message--warning{color:#c5901b}.af-form__help{color:#7f7f7f;font-size:.8125em}.af-form__input-cmplt{display:inline-flex;margin-left:1rem}.af-form__fields-inline{align-items:flex-start;display:flex;justify-content:flex-start}.af-form__fields-inline .af-form__text{padding:0}.af-form__input-inline{margin-right:1rem}.af-form__label{align-items:center;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1rem 0}.af-form__indicator{background:#fff;border:1px solid #ccc;height:1rem;left:0;position:absolute;top:50%;transform:translateY(-50%);width:1rem}.af-form__indicator .glyphicon-ok{display:none;font-size:.625rem;font-weight:100;left:2px;position:absolute;top:2px;width:10px}.af-form__description{padding-left:1.8rem}.container{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:100%}@media (width >= 576px){.container{max-width:540px}}@media (width >= 768px){.container{max-width:720px}}@media (width >= 992px){.container{max-width:960px}}@media (width >= 1200px){.container{max-width:1440px}}.container-fluid{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:100%}.row{display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}.no-gutters{margin-left:0;margin-right:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{padding-left:15px;padding-right:15px;position:relative;width:100%}.col{flex-basis:0;flex-grow:1;max-width:100%}.col-auto{flex:0 0 auto;max-width:100%;width:auto}.col-1{flex:0 0 8.3333%;max-width:8.3333%}.col-2{flex:0 0 16.6667%;max-width:16.6667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.3333%;max-width:33.3333%}.col-5{flex:0 0 41.6667%;max-width:41.6667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.3333%;max-width:58.3333%}.col-8{flex:0 0 66.6667%;max-width:66.6667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.3333%;max-width:83.3333%}.col-11{flex:0 0 91.6667%;max-width:91.6667%}.col-12{flex:0 0 100%;max-width:100%}.no-gutters>.col,.no-gutters>[class*=col-]{padding-left:0;padding-right:0}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{margin-left:8.3333%}.offset-2{margin-left:16.6667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333%}.offset-5{margin-left:41.6667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333%}.offset-8{margin-left:66.6667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333%}.offset-11{margin-left:91.6667%}@media (width >= 576px){.col-sm{flex-basis:0;flex-grow:1;max-width:100%}.col-sm-auto{flex:0 0 auto;max-width:100%;width:auto}.col-sm-1{flex:0 0 8.3333%;max-width:8.3333%}.col-sm-2{flex:0 0 16.6667%;max-width:16.6667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.3333%;max-width:33.3333%}.col-sm-5{flex:0 0 41.6667%;max-width:41.6667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.3333%;max-width:58.3333%}.col-sm-8{flex:0 0 66.6667%;max-width:66.6667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.3333%;max-width:83.3333%}.col-sm-11{flex:0 0 91.6667%;max-width:91.6667%}.col-sm-12{flex:0 0 100%;max-width:100%}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333%}.offset-sm-2{margin-left:16.6667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333%}.offset-sm-5{margin-left:41.6667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333%}.offset-sm-8{margin-left:66.6667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333%}.offset-sm-11{margin-left:91.6667%}}@media (width >= 768px){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.col-md-auto{flex:0 0 auto;max-width:100%;width:auto}.col-md-1{flex:0 0 8.3333%;max-width:8.3333%}.col-md-2{flex:0 0 16.6667%;max-width:16.6667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.3333%;max-width:33.3333%}.col-md-5{flex:0 0 41.6667%;max-width:41.6667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.3333%;max-width:58.3333%}.col-md-8{flex:0 0 66.6667%;max-width:66.6667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.3333%;max-width:83.3333%}.col-md-11{flex:0 0 91.6667%;max-width:91.6667%}.col-md-12{flex:0 0 100%;max-width:100%}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333%}.offset-md-2{margin-left:16.6667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333%}.offset-md-5{margin-left:41.6667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333%}.offset-md-8{margin-left:66.6667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333%}.offset-md-11{margin-left:91.6667%}}@media (width >= 992px){.col-lg{flex-basis:0;flex-grow:1;max-width:100%}.col-lg-auto{flex:0 0 auto;max-width:100%;width:auto}.col-lg-1{flex:0 0 8.3333%;max-width:8.3333%}.col-lg-2{flex:0 0 16.6667%;max-width:16.6667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.3333%;max-width:33.3333%}.col-lg-5{flex:0 0 41.6667%;max-width:41.6667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.3333%;max-width:58.3333%}.col-lg-8{flex:0 0 66.6667%;max-width:66.6667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.3333%;max-width:83.3333%}.col-lg-11{flex:0 0 91.6667%;max-width:91.6667%}.col-lg-12{flex:0 0 100%;max-width:100%}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.3333%}.offset-lg-2{margin-left:16.6667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.3333%}.offset-lg-5{margin-left:41.6667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333%}.offset-lg-8{margin-left:66.6667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333%}.offset-lg-11{margin-left:91.6667%}}@media (width >= 1200px){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.col-xl-auto{flex:0 0 auto;max-width:100%;width:auto}.col-xl-1{flex:0 0 8.3333%;max-width:8.3333%}.col-xl-2{flex:0 0 16.6667%;max-width:16.6667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.3333%;max-width:33.3333%}.col-xl-5{flex:0 0 41.6667%;max-width:41.6667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.3333%;max-width:58.3333%}.col-xl-8{flex:0 0 66.6667%;max-width:66.6667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.3333%;max-width:83.3333%}.col-xl-11{flex:0 0 91.6667%;max-width:91.6667%}.col-xl-12{flex:0 0 100%;max-width:100%}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.3333%}.offset-xl-2{margin-left:16.6667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.3333%}.offset-xl-5{margin-left:41.6667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333%}.offset-xl-8{margin-left:66.6667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333%}.offset-xl-11{margin-left:91.6667%}}.af-form__date--disabled .af-form__input-date{cursor:not-allowed}.af-form__date--success .af-form__input-date{margin-right:1rem}.af-form__date--success:after{color:#1cc54e;content:"\eaba";font-family:icons;position:relative;top:5px}.af-form__date--success>.af-btn--circle{margin-right:1rem}.af-form__date--error{padding:0}.af-form__date--error .af-form__input-date{border:1px solid #ff1721;color:#ff1721}.af-form__date--warning{padding:0}.af-form__date--warning .af-form__input-date{border:1px solid #c5901b;color:#c5901b}.af-form__date-wrapper{display:inline-flex;position:relative}.af-form__input-date{border:1px solid #ccc;font-size:1em;line-height:20px;padding:.5625rem 1.2rem}.af-form__input-date:focus{border-color:#00008f;color:#00008f}.af-form__input-date--hasinfobulle{margin-right:1rem}.af-form__input-date::-ms-clear,.af-form__input-date::-ms-reveal{display:none}.af-form__help{bottom:-20px;display:block;position:absolute}.af-form__clear{position:absolute;right:3rem;top:.75rem}.af-form__clear:hover{background:#e5e5e5;border-radius:100%;box-shadow:0 0 0 6px #e5e5e5}
+.af-form{background:#f5f5f5;padding:1rem}.af-form__group{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:3rem}.af-form__group--label-top{align-items:flex-start}.af-form__group-label{font-size:1rem;font-weight:400;margin:0}.af-form__group-label--required:after{color:var(--error-color);content:" *"}.af-form__message{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-start;margin:.2rem 0;min-height:1.6em;position:absolute}.af-form__message .glyphicon{margin-right:.4rem;width:17px}.af-form__message--error{color:var(--error-color)}.af-form__message--warning{color:var(--warning-color)}.af-form__help{color:var(--help-color);font-size:.8125em}.af-form__input-cmplt{display:inline-flex;margin-left:1rem}.af-form__fields-inline{align-items:flex-start;display:flex;justify-content:flex-start}.af-form__fields-inline .af-form__text{padding:0}.af-form__input-inline{margin-right:1rem}.af-form__label{align-items:center;cursor:pointer;display:flex;font-weight:400;margin:0;padding:1rem 0}.af-form__description{padding-left:1.8rem}.container{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:100%}@media (width >= 576px){.container{max-width:540px}}@media (width >= 768px){.container{max-width:720px}}@media (width >= 992px){.container{max-width:960px}}@media (width >= 1200px){.container{max-width:1440px}}.container-fluid{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;width:100%}.row{display:flex;flex-wrap:wrap;margin-left:-15px;margin-right:-15px}.no-gutters{margin-left:0;margin-right:0}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{padding-left:15px;padding-right:15px;position:relative;width:100%}.col{flex-basis:0;flex-grow:1;max-width:100%}.col-auto{flex:0 0 auto;max-width:100%;width:auto}.col-1{flex:0 0 8.3333%;max-width:8.3333%}.col-2{flex:0 0 16.6667%;max-width:16.6667%}.col-3{flex:0 0 25%;max-width:25%}.col-4{flex:0 0 33.3333%;max-width:33.3333%}.col-5{flex:0 0 41.6667%;max-width:41.6667%}.col-6{flex:0 0 50%;max-width:50%}.col-7{flex:0 0 58.3333%;max-width:58.3333%}.col-8{flex:0 0 66.6667%;max-width:66.6667%}.col-9{flex:0 0 75%;max-width:75%}.col-10{flex:0 0 83.3333%;max-width:83.3333%}.col-11{flex:0 0 91.6667%;max-width:91.6667%}.col-12{flex:0 0 100%;max-width:100%}.no-gutters>.col,.no-gutters>[class*=col-]{padding-left:0;padding-right:0}.order-first{order:-1}.order-last{order:13}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-9{order:9}.order-10{order:10}.order-11{order:11}.order-12{order:12}.offset-1{margin-left:8.3333%}.offset-2{margin-left:16.6667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333%}.offset-5{margin-left:41.6667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333%}.offset-8{margin-left:66.6667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333%}.offset-11{margin-left:91.6667%}@media (width >= 576px){.col-sm{flex-basis:0;flex-grow:1;max-width:100%}.col-sm-auto{flex:0 0 auto;max-width:100%;width:auto}.col-sm-1{flex:0 0 8.3333%;max-width:8.3333%}.col-sm-2{flex:0 0 16.6667%;max-width:16.6667%}.col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.3333%;max-width:33.3333%}.col-sm-5{flex:0 0 41.6667%;max-width:41.6667%}.col-sm-6{flex:0 0 50%;max-width:50%}.col-sm-7{flex:0 0 58.3333%;max-width:58.3333%}.col-sm-8{flex:0 0 66.6667%;max-width:66.6667%}.col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.3333%;max-width:83.3333%}.col-sm-11{flex:0 0 91.6667%;max-width:91.6667%}.col-sm-12{flex:0 0 100%;max-width:100%}.order-sm-first{order:-1}.order-sm-last{order:13}.order-sm-0{order:0}.order-sm-1{order:1}.order-sm-2{order:2}.order-sm-3{order:3}.order-sm-4{order:4}.order-sm-5{order:5}.order-sm-6{order:6}.order-sm-7{order:7}.order-sm-8{order:8}.order-sm-9{order:9}.order-sm-10{order:10}.order-sm-11{order:11}.order-sm-12{order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.3333%}.offset-sm-2{margin-left:16.6667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333%}.offset-sm-5{margin-left:41.6667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333%}.offset-sm-8{margin-left:66.6667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333%}.offset-sm-11{margin-left:91.6667%}}@media (width >= 768px){.col-md{flex-basis:0;flex-grow:1;max-width:100%}.col-md-auto{flex:0 0 auto;max-width:100%;width:auto}.col-md-1{flex:0 0 8.3333%;max-width:8.3333%}.col-md-2{flex:0 0 16.6667%;max-width:16.6667%}.col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.3333%;max-width:33.3333%}.col-md-5{flex:0 0 41.6667%;max-width:41.6667%}.col-md-6{flex:0 0 50%;max-width:50%}.col-md-7{flex:0 0 58.3333%;max-width:58.3333%}.col-md-8{flex:0 0 66.6667%;max-width:66.6667%}.col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.3333%;max-width:83.3333%}.col-md-11{flex:0 0 91.6667%;max-width:91.6667%}.col-md-12{flex:0 0 100%;max-width:100%}.order-md-first{order:-1}.order-md-last{order:13}.order-md-0{order:0}.order-md-1{order:1}.order-md-2{order:2}.order-md-3{order:3}.order-md-4{order:4}.order-md-5{order:5}.order-md-6{order:6}.order-md-7{order:7}.order-md-8{order:8}.order-md-9{order:9}.order-md-10{order:10}.order-md-11{order:11}.order-md-12{order:12}.offset-md-0{margin-left:0}.offset-md-1{margin-left:8.3333%}.offset-md-2{margin-left:16.6667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333%}.offset-md-5{margin-left:41.6667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333%}.offset-md-8{margin-left:66.6667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333%}.offset-md-11{margin-left:91.6667%}}@media (width >= 992px){.col-lg{flex-basis:0;flex-grow:1;max-width:100%}.col-lg-auto{flex:0 0 auto;max-width:100%;width:auto}.col-lg-1{flex:0 0 8.3333%;max-width:8.3333%}.col-lg-2{flex:0 0 16.6667%;max-width:16.6667%}.col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.3333%;max-width:33.3333%}.col-lg-5{flex:0 0 41.6667%;max-width:41.6667%}.col-lg-6{flex:0 0 50%;max-width:50%}.col-lg-7{flex:0 0 58.3333%;max-width:58.3333%}.col-lg-8{flex:0 0 66.6667%;max-width:66.6667%}.col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.3333%;max-width:83.3333%}.col-lg-11{flex:0 0 91.6667%;max-width:91.6667%}.col-lg-12{flex:0 0 100%;max-width:100%}.order-lg-first{order:-1}.order-lg-last{order:13}.order-lg-0{order:0}.order-lg-1{order:1}.order-lg-2{order:2}.order-lg-3{order:3}.order-lg-4{order:4}.order-lg-5{order:5}.order-lg-6{order:6}.order-lg-7{order:7}.order-lg-8{order:8}.order-lg-9{order:9}.order-lg-10{order:10}.order-lg-11{order:11}.order-lg-12{order:12}.offset-lg-0{margin-left:0}.offset-lg-1{margin-left:8.3333%}.offset-lg-2{margin-left:16.6667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.3333%}.offset-lg-5{margin-left:41.6667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333%}.offset-lg-8{margin-left:66.6667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333%}.offset-lg-11{margin-left:91.6667%}}@media (width >= 1200px){.col-xl{flex-basis:0;flex-grow:1;max-width:100%}.col-xl-auto{flex:0 0 auto;max-width:100%;width:auto}.col-xl-1{flex:0 0 8.3333%;max-width:8.3333%}.col-xl-2{flex:0 0 16.6667%;max-width:16.6667%}.col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.3333%;max-width:33.3333%}.col-xl-5{flex:0 0 41.6667%;max-width:41.6667%}.col-xl-6{flex:0 0 50%;max-width:50%}.col-xl-7{flex:0 0 58.3333%;max-width:58.3333%}.col-xl-8{flex:0 0 66.6667%;max-width:66.6667%}.col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.3333%;max-width:83.3333%}.col-xl-11{flex:0 0 91.6667%;max-width:91.6667%}.col-xl-12{flex:0 0 100%;max-width:100%}.order-xl-first{order:-1}.order-xl-last{order:13}.order-xl-0{order:0}.order-xl-1{order:1}.order-xl-2{order:2}.order-xl-3{order:3}.order-xl-4{order:4}.order-xl-5{order:5}.order-xl-6{order:6}.order-xl-7{order:7}.order-xl-8{order:8}.order-xl-9{order:9}.order-xl-10{order:10}.order-xl-11{order:11}.order-xl-12{order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.3333%}.offset-xl-2{margin-left:16.6667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.3333%}.offset-xl-5{margin-left:41.6667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333%}.offset-xl-8{margin-left:66.6667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333%}.offset-xl-11{margin-left:91.6667%}}.af-form__date--disabled .af-form__input-date{cursor:not-allowed}.af-form__date--success .af-form__input-date{margin-right:1rem}.af-form__date--success:after{color:#1cc54e;content:"\eaba";font-family:icons;position:relative;top:5px}.af-form__date--success>.af-btn--circle{margin-right:1rem}.af-form__date--error{padding:0}.af-form__date--error .af-form__input-date{border:1px solid #ff1721;color:#ff1721}.af-form__date--warning{padding:0}.af-form__date--warning .af-form__input-date{border:1px solid #c5901b;color:#c5901b}.af-form__date-wrapper{display:inline-flex;position:relative}.af-form__input-date{border:1px solid #ccc;font-size:1em;line-height:20px;padding:.5625rem 1.2rem}.af-form__input-date:focus{border-color:#00008f;color:#00008f}.af-form__input-date--hasinfobulle{margin-right:1rem}.af-form__input-date::-ms-clear,.af-form__input-date::-ms-reveal{display:none}.af-form__help{bottom:-20px;display:block;position:absolute}.af-form__clear{position:absolute;right:3rem;top:.75rem}.af-form__clear:hover{background:#e5e5e5;border-radius:100%;box-shadow:0 0 0 6px #e5e5e5}