// Colors
$green: #0B9D9D;
$green-light: #DAF0F0;
$green-dark: #054545;
$blue-light: #E1EAEF;
$gray-light: #DBDBDB;
$gray-dark: #707070;

$ff-ss-serif: 'Source Sans pro', sans-serif;

$base-font: 16;
$scale: 0.75;

$font-size: 100% * ( 18 / $base-font );

$fz-1: 50rem / $base-font * $scale * (100% / $font-size);
$fz-2: 46rem / $base-font * $scale * (100% / $font-size);
$fz-3: 40rem / $base-font * $scale * (100% / $font-size);
$fz-4: 34rem / $base-font * $scale * (100% / $font-size);
$fz-4-mobile: 25rem / $base-font * $scale * (100% / $font-size);
$fz-5: 24rem / $base-font * $scale * (100% / $font-size);
$fz-6: 18rem / $base-font * $scale * (100% / $font-size);
$fz-small: 14rem / $base-font;
$fz-xsmall: 10rem / $base-font;

$space-small: 5px * $scale;
$space-msmall: 7px * $scale;
$space-medium: 10px * $scale;
$space-mmedium: 15px * $scale;
$space-large: 20px * $scale;
$space-xlarge: 35px * $scale;

$border-radius-small: 10px;

$width: 1920px * $scale;

$font-family: $ff-ss-serif;

$font-size-small: $fz-small;
$font-color: black;

$link-color: $green-dark;
$link-decoration: underline;

$primary-color: $green;

$toplinks-style: none;
$header-logo-width: 640px * $scale;
$mobile-logo-width: 200px * $scale;

$nav-border-color: transparent;
$nav-button-background: transparent;
$nav-button-bar-height: 3px;
$nav-button-color: black;
$nav-item-selected-border: none;
$nav-item-selected-mode: bottom-border;
$nav-mobile-bottom-bar-background: $green;
$nav-mobile-bottom-bar-color: white;
$nav-mobile-bottom-bar-item-selected-background: $green-dark;
$nav-mobile-bottom-bar-item-selected-color: white;
$nav-mobile-bottom-bar-item-hover-background: $green-light;
$nav-mobile-bottom-bar-item-hover-color: $green-dark;
$nav-mobile-limit: 50000px;
$nav-mobile-menu-background: transparent;
$nav-mobile-menu-item-hover-background: transparent;
$nav-mobile-menu-item-hover-color: black;
$pwa-nav-limit: 960px;
$nav-after-image: false;

$sidebar-width: 20%;

$title-font-size: $fz-4;
$title-weight: 600;
$title-border: none;
$title-color: black;
$title-background: $green-light;
$title-padding: $space-large;

$cell-border: 1px solid $gray-dark;
$cell-border-radius: $border-radius-small;
$cell-entry-border-color: $gray-dark;
$cell-entry-hover-background: $green-light;
$cell-image-padding: $space-small $space-small $space-small $space-medium;
$cell-open-foldable-icon: "\f0d7"; // caret-down
$cell-close-foldable-icon: "\f0d8"; // caret-up
$cell-entry-color: black;

$button-background: $green;
$button-hover-background: $gray-dark;
$button-color: white;
$button-border: 0;
$button-border-radius: $border-radius-small;
$widget-padding: $space-medium;
$widget-unique-checkbox-position: left;

$footer-background: $green-light;
$footer-color: black;

$form-title-style: none;
$form-accent-color: $green;
$form-sidebar-width: 400px * $scale;

$wcs-step-border-bottom: none;
$wcs-step-color: $gray-dark;
$wcs-step-current-color: $green;
$wcs-step-current-marker-background: $green;
$wcs-step-current-marker-color: white;
$wcs-step-marker-background: $gray-dark;
$wcs-step-marker-color: white;
$wcs-step-marker-size: 2.1em !default;
$wcs-step-marker-type: disc; // square || tied || disc || disc tied
$wcs-steps-spacing: $space-large;
$wcs-steps-spacing: 0;

$buttons-with-icons: true;
$buttons-order: previous (grow),cancel (grow),submit;

$submit-button-icon: '\f061'; /* arrow right */
$previous-button-icon: '\f060'; /* arrow left */
$cancel-button-icon: none;
$notification_info_color: $green-light;

$widget-border: 1px solid $gray-dark;
$widget-focus-border: 1px solid $green;
$widget-focus-outline: 1px solid $green;
