@charset "UTF-8"; // colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154 $green: #64d16e; $black: #000000; $ugly-purple: #b24eb7; $lavender-pink: #e9bdeb; $white: #ffffff; $dark-lavender: #7d6c99; $dusty-orange: #f18647; $violet: #bd10e0; $red: #cd0000; $cool-grey: #aeafb1; $warm-grey: #807e7e; $wisteria: #bf83c2; $pale-purple: #d198d4; $purple: #8a4d76; $pink: #fa7c91; $brown: #757763; $beige-light: #d0d1cd; $beige-lighter: #eff0eb; // DINUM colors $d-primary-intense: #3e3882; // bleu 800 $d-blue-700: #4f47af; // bleu 700 $d-primary: #6359cf; // bleu 600 $d-grey: #e3e3ea; $d-blue30: #f6f5fd; // bleu 300 $d-rule: #e2e0fa; // bleu 100 $d-neutral: #b5b5c6; $d-border: #4e4c59; $d-grey: #767486; $d-black: #383838; $d-alt: #a9607f; $d-info: #ecf4ff; $d-info-text: #316ec7; $intense-blue: #0a76f6; $d-success: #ecfff5; $d-success-text: #128149; $d-warning: #dcd3bb; $d-warning-text: #86671b; $d-error: #ffecee; $d-error-text: #d51b38; // interpretations in app $outline-color: $intense-blue; // #0a76f6 $success_color: $d-success-text; $primary_color: $d-primary; $primary-light: mix($d-primary, $white); $primary: $d-primary; $secondary_color: $d-primary-intense; $bg-grey: $d-blue30; $bar-progress-grey: #e3e3ea; $font_color: $d-black; $font_color_light: $d-grey; $logo_color: $d-primary; $logo_color_2: $d-primary-intense; $legend_color: $d-info-text; $legend_color_2: $d-info; $choice_select_border_color: $d-info; $hover-color: $d-neutral; $rules: $d-rule; $border-color: $d-neutral; $input-border-color: $d-border; $dark: $d-border; $grey: $font_color_light; $grey-dark: $d-primary; $grey-lighter: $beige-light; $clicked-color: $d-primary; $mini-button-color: $d-primary-intense; $warning: $d-warning; $warning-dark: mix($d-warning, $dark); $danger: $d-error; $success: $d-success; $default_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono'; $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono'; // sizes and breakpoints $large-column-width: 588px; $main-column-width: 25rem; $main-column-width-inner: 23.75rem; $logo-side: 40px; $mobile-size: 25rem; $header-nav-height: 4.85rem; $header-nav-inner-height: 4.5rem; $widescreen-width-main-column: 75rem; $stepper-nav-height: 2rem; $stepper-progress-bar-height: 5px; $home-nav-height: 2rem; $home-nav-height-small: 3.5rem; //$widescreen: 60em; // datepicker $cell-size-datepicker-small: 30px; $cell-size-datepicker-desktop: 42px; $cell-size-datepicker: 50px; // css vars :root { --main-col-width: $main-column-width-inner; }