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

package/dist/Form/Radio/Radio.scss

@@ -1,4 +1,3 @@
-@use "../../common/common" as common;
 @use "../core/FormCore";
 @use "../../common/grid";
 
@@ -6,106 +5,118 @@
 .af-form {
   &__radio {
     position: relative;
-    display: block;
-    border-bottom: 1px solid common.$color-silver;
+    display: flex;
+    border-bottom: 1px solid var(--gray40);
+  }
+
+  &__radio,
+  &__radio-inline {
     align-items: center;
 
+    --radio-color: var(--disabled-color);
+    --label-color: var(--text-color);
+
+    color: var(--label-color);
+
     &:nth-last-child(1) {
       border-bottom: 0;
     }
-  }
 
-  &__radio-inline {
-    position: relative;
-    display: inline-flex;
-    margin-right: 1rem;
-    align-items: center;
-
-    .af-form__label {
-      padding: 0;
+    &:hover,
+    &:focus-within {
+      --radio-color: var(--brand-primary);
+      --label-color: var(--brand-primary);
     }
-  }
 
-  &__radio,
-  &__radio-inline {
-    &--error {
-      .af-form__label {
-        color: common.$color-red-axa;
+    &:has(.af-form__input-radio:checked) {
+      --radio-color: var(--brand-primary);
+      --label-color: var(--brand-primary);
+    }
 
-        &::before {
-          border-color: common.$color-red-axa;
-        }
-      }
+    &:has(.af-form__input-radio[aria-invalid="true"]) {
+      --radio-color: var(--error-color);
+      --label-color: var(--error-color);
     }
 
-    &--warning {
-      .af-form__label {
-        color: common.$color-orange-dark;
+    &:has(.af-form__input-radio:disabled) {
+      --radio-color: var(--disabled-color);
+      --label-color: var(--disabled-color);
 
-        &::before {
-          border-color: common.$color-orange-dark;
-        }
-      }
+      cursor: not-allowed;
     }
 
-    &--disabled {
-      .af-form__label {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
+    .af-form__input-radio[aria-invalid="true"]:checked {
+      background-color: var(--radio-color);
     }
 
-    .af-form__label {
-      &::before {
-        position: absolute;
-        top: 50%;
-        left: 0;
+    .af-form__input-radio {
+      display: grid;
+      width: 20px;
+      height: 20px;
+      border: 1px solid var(--radio-color);
+      border-radius: 50%;
+      place-content: center;
+      cursor: pointer;
+      appearance: none;
+
+      &:checked::before {
         display: block;
-        width: 1.25rem;
-        height: 1.25rem;
-        margin-right: 0.5em;
-        border: 1px solid common.$color-silver;
-        border-radius: 100%;
-        background: common.$white;
-        transform: translate(0, -50%);
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        background-color: var(--radio-color);
+        transition: 120ms transform ease-in-out;
         content: "";
       }
 
-      &::after {
-        position: absolute;
-        top: 50%;
-        left: 3px;
-        display: none;
-        width: 0.9rem;
-        height: 0.9rem;
-        margin-right: 0.5em;
-        border-radius: 100%;
-        background: common.$color-azur;
-        transform: translate(0, -50%);
-        content: "";
+      &:disabled {
+        cursor: not-allowed;
+
+        & + .af-form__label {
+          cursor: not-allowed;
+        }
       }
     }
+  }
 
-    .af-form__input-radio {
-      position: absolute;
-      opacity: 0;
+  &__radio-inline {
+    position: relative;
+    display: flex;
+    margin-right: 1rem;
+    align-items: center;
 
-      &:checked + .af-form__label {
-        &::after {
-          display: block;
-        }
-      }
+    .af-form__label {
+      padding: 0;
+    }
 
-      &:focus + .af-form__label {
-        color: common.$color-axa;
+    .af-form__description {
+      padding-left: 0.5rem;
+    }
+  }
 
-        &::before {
-          border-color: common.$color-axa;
+  .af-form__text:has(.af-form__input-radio-inline) {
+    display: flex;
+  }
+
+  &__text {
+    &--warning {
+      .af-form__radio,
+      .af-form__radio-inline,
+      .af-form__radio:has(.af-form__input-radio:checked),
+      .af-form__radio-inline:has(.af-form__input-radio:checked) {
+        --radio-color: var(--warning-color);
+        --label-color: var(--warning-color);
+
+        .af-form__input-radio:checked {
+          background-color: var(--warning-color);
         }
       }
     }
   }
 
+  /**
+    * This is the "button" variant of the radio inputs.
+    */
   &__radio-custom {
     position: relative;
     display: inline-flex;
@@ -114,12 +125,16 @@
     text-align: center;
 
     .af-form__label {
+      --background-color: var(--inactive-button-background);
+      --border-color: var(--inactive-button-border-color);
+      --label-color: var(--text-color);
+
       margin: 0;
       padding: 0.6rem 2rem;
-      border: common.$color-gray;
       font-weight: normal;
-      background: common.$color-mercury;
-      box-shadow: inset 0 -2px 0 0 common.$color-scorpion;
+      color: var(--label-color);
+      background: var(--background-color);
+      box-shadow: inset 0 -2px 0 0 var(--border-color);
       cursor: pointer;
     }
 
@@ -128,26 +143,26 @@
     }
 
     .af-form__input-radio {
-      position: absolute;
-      opacity: 0;
-
-      &:checked + .af-form__label {
-        color: common.$white;
-        background-color: common.$color-azur;
-        box-shadow: inset 0 -2px 0 0 common.$color-axa;
-      }
+      appearance: none;
 
+      &:checked + .af-form__label,
       &:focus + .af-form__label {
-        color: common.$white;
-        background-color: common.$color-azur;
-        box-shadow: 0 0 5px common.$color-axa;
+        --background-color: var(--brand-primary);
+        --border-color: var(--active-button-border-color);
+        --label-color: var(--white);
       }
     }
 
+    .af-form__label:hover:hover {
+      --background-color: var(--brand-primary);
+      --border-color: var(--active-button-border-color);
+      --label-color: var(--white);
+    }
+
     &--disabled {
       .af-form__label {
         opacity: 0.6;
-        box-shadow: inset 0 -2px 0 0 common.$color-silver;
+        box-shadow: inset 0 -2px 0 0 var(--gray40);
         cursor: not-allowed;
       }
 
@@ -158,28 +173,17 @@
 
     &--error {
       .af-form__label {
-        border: 1px solid common.$error-custom-border;
-        color: common.$color-red-axa;
-        background: common.$error-custom-bg;
-        box-shadow: inset 0 -2px 0 0 common.$color-red-axa;
+        --label-color: var(--error-color);
+        --background-color: var(--error-button-background);
+        --border-color: var(--error-color);
       }
     }
 
     &--warning {
       .af-form__label {
-        border: 1px solid common.$color-alertDanger-colorBorder;
-        color: common.$color-orange-dark;
-        background: common.$color-alertDanger-bgColor;
-        box-shadow: inset 0 -2px 0 0 common.$color-orange-dark;
-      }
-    }
-
-    &: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;
+        --label-color: var(--warning-color);
+        --background-color: var(--orange10);
+        --border-color: var(--warning-color);
       }
     }
   }

package/dist/Form/Radio/RadioCardGroup.css

@@ -0,0 +1,86 @@
+.af-form__radio-card-group {
+  display: inline-flex;
+  grid-gap: 25px;
+  flex-flow: row wrap;
+
+  .af-card {
+    --color-radio-input-border: var(--gray50);
+
+    width: var(--width-radio-card, initial);
+    min-width: 11.25rem;
+    height: var(--height-radio-card, initial);
+    text-align: center;
+    cursor: pointer;
+
+    input[type="radio"] {
+      display: grid;
+      width: 1.1875rem;
+      height: 1.1875rem;
+      margin-bottom: 1.5rem;
+      border: 1px solid var(--color-radio-input-border);
+      border-radius: 50%;
+      place-content: center;
+      transform: translateY(-0.075em);
+      cursor: pointer;
+      appearance: none;
+
+      &::before {
+        width: 0.6875rem;
+        height: 0.6875rem;
+        border-radius: 50%;
+        box-shadow: inset 1em 1em var(--color-radio-input-border);
+        transform: scale(0);
+        transition: 120ms transform ease-in-out;
+        content: "";
+      }
+
+      &:checked {
+        --color-radio-input-border: var(--color-border-hover);
+      }
+
+      &:disabled {
+        --color-radio-input-border: var(--gray40);
+
+        cursor: not-allowed;
+      }
+
+      &:checked::before {
+        transform: scale(1);
+      }
+    }
+
+    &:hover {
+      --color-radio-input-border: var(--axablue80);
+    }
+
+    &:has(input[type="radio"]:checked) {
+      border: 2px solid var(--color-border-selected);
+
+      --card-text-color: var(--gray80);
+      --card-icon-color: var(--axablue80);
+    }
+
+    &:has(input[type="radio"]:disabled) {
+      --card-border-color: transparent;
+      --card-text-color: var(--gray40);
+      --card-icon-color: var(--gray40);
+
+      cursor: not-allowed;
+    }
+  }
+
+  .af-card--error {
+    --color-radio-input-border: var(--red30);
+  }
+}
+
+.af-form__radio-card-group--horizontal {
+  display: flex;
+  flex-flow: column nowrap;
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  .af-card input[type="radio"] {
+    margin-right: 1.5rem;
+    margin-bottom: 0;
+  }
+}

package/dist/Form/Select/Select.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{bottom:-20px;color:#7f7f7f;display:block;font-size:.8125em;position:absolute}.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__select{position:relative}.af-form__select-container{background:#fff;border:1px solid #ccc;display:inline-block;position:relative}.af-form__select-container .glyphicon-menu-down{font-size:.7em;height:.7em;position:absolute;right:1em;top:50%;transform:translateY(-50%)}.af-form__select--success .af-form__select-container,.af-form__select--valid .af-form__select-container{margin-right:1rem}.af-form__select--success:after,.af-form__select--valid:after{color:#1cc54e;content:"\eaba";font-family:icons}.af-form__select--success>.af-btn--circle,.af-form__select--success>.af-form__message,.af-form__select--valid:after,.af-form__select--valid>.af-btn--circle,.af-form__select--valid>.af-form__message{display:none}.af-form__select--valid .glyphicon-ok{margin-left:2px;position:absolute;right:-25px;top:50%;transform:translateY(-50%);width:17px;fill:#1cc578}.af-form__select--disabled .af-form__select-container{background:#e5e5e5;cursor:not-allowed}.af-form__select--error .af-form__input-text,.af-form__select--error .af-form__select-container{border:1px solid #ff1721;color:#ff1721}.af-form__select--error select{color:#ff1721}.af-form__select--warning .af-form__input-text,.af-form__select--warning .af-form__select-container{border:1px solid #c5901b;color:#c5901b}.af-form__input-select{-webkit-appearance:none;appearance:none;background:#0000;border:0;font-size:1em;padding:.5em 2.7em .5em 1em;position:relative;z-index:1}.af-form__input-select::-ms-expand{display:none}.af-form__input-select:focus{outline:1px solid #00008f}.af-form__input-select--hasinfobulle{margin-right:1rem}
+.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{bottom:-20px;color:var(--help-color);display:block;font-size:.8125em;position:absolute}.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__select{position:relative}.af-form__select-container{background:var(--white);border:1px solid var(--input-border-color);display:inline-block;position:relative}.af-form__select-container .glyphicon-menu-down{font-size:.7em;height:.7em;position:absolute;right:1em;top:50%;transform:translateY(-50%)}.af-form__select--success .af-form__select-container,.af-form__select--valid .af-form__select-container{margin-right:1rem}.af-form__select--success:after,.af-form__select--valid:after{color:var(--valid-element-color);content:"\eaba";font-family:icons}.af-form__select--success>.af-btn--circle,.af-form__select--success>.af-form__message,.af-form__select--valid:after,.af-form__select--valid>.af-btn--circle,.af-form__select--valid>.af-form__message{display:none}.af-form__select--valid .glyphicon-ok{margin-left:2px;position:absolute;right:-25px;top:50%;transform:translateY(-50%);width:17px;fill:#1cc578}.af-form__select--disabled .af-form__select-container{background:#e5e5e5;cursor:not-allowed}.af-form__select--error .af-form__input-text,.af-form__select--error .af-form__select-container{border:1px solid var(--error-color);color:var(--error-color)}.af-form__select--error select{color:var(--error-color)}.af-form__select--warning .af-form__input-text,.af-form__select--warning .af-form__select-container{border:1px solid var(--warning-color);color:var(--warning-color)}.af-form__input-select{-webkit-appearance:none;appearance:none;background:#0000;border:0;font-size:1em;padding:.5em 2.7em .5em 1em;position:relative;z-index:1}.af-form__input-select::-ms-expand{display:none}.af-form__input-select:focus{outline:solid 1px var(--brand-primary)}.af-form__input-select--hasinfobulle{margin-right:1rem}