upgrade bs from 4.6 to v5.x

assets/css/style.css

@@ -6,8 +6,8 @@
  */
 @font-face {
   font-family: "icomoon";
-  src: url("../fonts/icomoon.eot?uymxx12");
-  src: url("../fonts/icomoon.eot?uymxx12#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?uymxx12") format("truetype"), url("../fonts/icomoon.woff?uymxx12") format("woff"), url("../fonts/icomoon.svg?uymxx12#icomoon") format("svg");
+  src: url("../fonts/icomoon.eot?ugtl3hq");
+  src: url("../fonts/icomoon.eot?ugtl3hq#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?ugtl3hq") format("truetype"), url("../fonts/icomoon.woff?ugtl3hq") format("woff"), url("../fonts/icomoon.svg?ugtl3hq#icomoon") format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
@@ -224,6 +224,7 @@
   --bs-link-decoration: none;
   --bs-link-hover-color: rgb(122.4, 0, 122.4);
   --bs-link-hover-color-rgb: 122, 0, 122;
+  --bs-link-hover-decoration: underline;
   --bs-code-color: #e83e8c;
   --bs-highlight-color: #212529;
   --bs-highlight-bg: rgb(255, 242.6, 205.4);
@@ -468,6 +469,7 @@ a {
 }
 a:hover {
   --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
+  text-decoration: underline;
 }
 
 a:not([href]):not([class]), a:not([href]):not([class]):hover {
@@ -3152,6 +3154,7 @@ textarea.form-control-lg {
 }
 .btn:hover {
   color: var(--bs-btn-hover-color);
+  text-decoration: none;
   background-color: var(--bs-btn-hover-bg);
   border-color: var(--bs-btn-hover-border-color);
 }
@@ -3480,6 +3483,9 @@ textarea.form-control-lg {
   --bs-btn-focus-shadow-rgb: 168, 38, 168;
   text-decoration: none;
 }
+.btn-link:hover, .btn-link:focus-visible {
+  text-decoration: underline;
+}
 .btn-link:focus-visible {
   color: var(--bs-btn-color);
 }
@@ -3808,6 +3814,7 @@ textarea.form-control-lg {
 }
 .dropdown-item:hover, .dropdown-item:focus {
   color: var(--bs-dropdown-link-hover-color);
+  text-decoration: none;
   background-color: var(--bs-dropdown-link-hover-bg);
 }
 .dropdown-item.active, .dropdown-item:active {
@@ -3886,6 +3893,7 @@ textarea.form-control-lg {
 }
 .nav-link:hover, .nav-link:focus {
   color: var(--bs-nav-link-hover-color);
+  text-decoration: none;
 }
 .nav-link:focus-visible {
   outline: 0;
@@ -4039,6 +4047,7 @@ textarea.form-control-lg {
 }
 .navbar-brand:hover, .navbar-brand:focus {
   color: var(--bs-navbar-brand-hover-color);
+  text-decoration: none;
 }
 
 .navbar-nav {
@@ -10733,6 +10742,10 @@ textarea.form-control-lg {
     display: none !important;
   }
 }
+.btn.w-100:has(+ .btn) {
+  margin-bottom: 3px;
+}
+
 .btn {
   transition-property: background, color, border;
 }
@@ -10750,16 +10763,16 @@ textarea.form-control-lg {
   padding-bottom: 1.26rem;
 }
 .btn-hero.btn-iconed > .btn-icon {
+  margin-top: calc((1.54rem + 1px) * -1);
+  margin-bottom: calc((1.26rem + 1px) * -1);
   margin-left: 1.8rem;
-  margin-top: -1.54rem;
-  margin-bottom: -1.26rem;
-  margin-right: -1.8rem;
+  margin-right: calc((1.8rem + 1px) * -1);
   width: 4em;
 }
 .btn-hero.btn-iconed-left .btn-icon {
   order: -1;
   justify-self: flex-start;
-  margin-left: -1.8rem;
+  margin-left: calc((1.8rem + 1px) * -1);
   margin-right: 1.8rem;
 }
 
@@ -10773,6 +10786,8 @@ textarea.form-control-lg {
   text-align: left;
   padding-top: 0.4125rem;
   padding-bottom: 0.3375rem;
+  --bs-btn-icon-bg: transparent;
+  --bs-btn-icon-color: inherit;
 }
 
 .btn-iconed > .btn-icon {
@@ -10784,10 +10799,21 @@ textarea.form-control-lg {
   justify-content: center;
   justify-self: flex-end;
   width: 2.25em;
+  margin-top: calc((0.4125rem + 1px) * -1);
+  margin-bottom: calc((0.3375rem + 1px) * -1);
   margin-left: 0.75rem;
-  margin-top: -0.4125rem;
-  margin-bottom: -0.3375rem;
-  margin-right: -0.75rem;
+  margin-right: calc((0.75rem + 1px) * -1);
+  color: var(--bs-btn-icon-color);
+  background-color: var(--bs-btn-icon-bg);
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .btn-iconed > .btn-icon {
+    transition: none;
+  }
+}
+.btn-iconed > .btn-icon {
+  box-shadow: var(--bs-btn-box-shadow);
 }
 
 .btn-iconed > .btn-icon:before {
@@ -10800,7 +10826,7 @@ textarea.form-control-lg {
 
 .btn-lg .btn-icon {
   width: 2.1em;
-  margin-right: -1rem;
+  margin-right: calc((1rem + 1px) * -1);
 }
 
 .btn-iconed-left {
@@ -10810,116 +10836,92 @@ textarea.form-control-lg {
 .btn-iconed-left .btn-icon {
   order: -1;
   justify-self: flex-start;
-  margin-left: -0.75rem;
+  margin-left: calc((0.75rem + 1px) * -1);
   margin-right: 0.75rem;
 }
 
 .btn-iconed-default {
   --bs-btn-color: #212529;
   --bs-btn-bg: #E0E0E0;
-  --bs-btn-hover-color: ;
-  --bs-btn-hover-bg: rgb(201.05, 201.05, 201.05);
-  --bs-btn-active-color: ;
-  --bs-btn-active-bg: rgb(201.05, 201.05, 201.05);
-  --bs-btn-border-width: 0;
-  --activetes: ;
-}
-.btn-iconed-default > .btn-icon {
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .btn-iconed-default > .btn-icon {
-    transition: none;
-  }
-}
-.btn-iconed-default > .btn-icon {
-  background: rgb(217.28, 217.28, 217.28);
+  --bs-btn-border-color: #E0E0E0;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: #CACACA;
+  --bs-btn-hover-border-color: #CACACA;
+  --bs-btn-focus-shadow-rgb: 195, 196, 197;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: rgb(230.2, 230.2, 230.2);
+  --bs-btn-active-border-color: rgb(227.1, 227.1, 227.1);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #E0E0E0;
+  --bs-btn-disabled-border-color: #E0E0E0;
+  --bs-btn-icon-color: #212529;
+  --activetes: rgb(230.2, 230.2, 230.2);
+  --bs-btn-icon-bg: #CACACA;
 }
 
 .btn-iconed-default-white {
-  --bs-btn-color: #fff;
+  --bs-btn-color: #ABABAB;
   --bs-btn-bg: #CACACA;
-  --bs-btn-hover-color: ;
-  --bs-btn-hover-bg: rgb(179.05, 179.05, 179.05);
-  --bs-btn-active-color: ;
-  --bs-btn-active-bg: rgb(179.05, 179.05, 179.05);
-  --bs-btn-border-width: 0;
-  --activetes: ;
-}
-.btn-iconed-default-white > .btn-icon {
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .btn-iconed-default-white > .btn-icon {
-    transition: none;
-  }
-}
-.btn-iconed-default-white > .btn-icon {
-  background: rgb(195.94, 195.94, 195.94);
+  --bs-btn-border-color: #CACACA;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: rgb(209.95, 209.95, 209.95);
+  --bs-btn-hover-border-color: rgb(207.3, 207.3, 207.3);
+  --bs-btn-focus-shadow-rgb: 197, 197, 197;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: rgb(212.6, 212.6, 212.6);
+  --bs-btn-active-border-color: rgb(207.3, 207.3, 207.3);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #CACACA;
+  --bs-btn-disabled-border-color: #CACACA;
+  --bs-btn-icon-color: #ABABAB;
+  --activetes: rgb(212.6, 212.6, 212.6);
+  --bs-btn-icon-bg: rgb(209.95, 209.95, 209.95);
+  --bs-btn-color: #fff;
 }
 
 .btn-iconed-anthrazit-08-primary {
-  --bs-btn-color: #5C005C;
+  --bs-btn-color: #000;
   --bs-btn-bg: #F7F7F7;
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: #990099;
-  --bs-btn-active-color: ;
-  --bs-btn-active-bg: #990099;
-  --bs-btn-border-width: 0;
-  --activetes: #990099;
-}
-.btn-iconed-anthrazit-08-primary > .btn-icon {
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .btn-iconed-anthrazit-08-primary > .btn-icon {
-    transition: none;
-  }
-}
-.btn-iconed-anthrazit-08-primary > .btn-icon {
-  color: #990099;
-  background: rgb(239.59, 239.59, 239.59);
-}
-
-.btn-iconed-simple {
+  --bs-btn-border-color: #F7F7F7;
+  --bs-btn-hover-color: #000;
+  --bs-btn-hover-bg: rgb(248.2, 248.2, 248.2);
+  --bs-btn-hover-border-color: rgb(247.8, 247.8, 247.8);
+  --bs-btn-focus-shadow-rgb: 210, 210, 210;
+  --bs-btn-active-color: #000;
+  --bs-btn-active-bg: rgb(248.6, 248.6, 248.6);
+  --bs-btn-active-border-color: rgb(247.8, 247.8, 247.8);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #000;
+  --bs-btn-disabled-bg: #F7F7F7;
+  --bs-btn-disabled-border-color: #F7F7F7;
+  --bs-btn-icon-color: #000;
+  --activetes: rgb(248.6, 248.6, 248.6);
+  --bs-btn-icon-bg: rgb(248.2, 248.2, 248.2);
   --bs-btn-color: #fff;
-  --bs-btn-bg: #E0E0E0;
-  --bs-btn-hover-color: ;
-  --bs-btn-hover-bg: rgb(201.05, 201.05, 201.05);
-  --bs-btn-active-color: ;
-  --bs-btn-active-bg: rgb(201.05, 201.05, 201.05);
-  --bs-btn-border-width: 0;
-  --activetes: ;
-}
-.btn-iconed-simple > .btn-icon {
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .btn-iconed-simple > .btn-icon {
-    transition: none;
-  }
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #5C005C;
 }
 
 .btn-iconed-primary {
   --bs-btn-color: #fff;
   --bs-btn-bg: #990099;
-  --bs-btn-hover-color: ;
-  --bs-btn-hover-bg: rgb(107.1, 0, 107.1);
-  --bs-btn-active-color: ;
-  --bs-btn-active-bg: rgb(107.1, 0, 107.1);
-  --bs-btn-border-width: 0;
-  --activetes: ;
-}
-.btn-iconed-primary > .btn-icon {
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-}
-@media (prefers-reduced-motion: reduce) {
-  .btn-iconed-primary > .btn-icon {
-    transition: none;
-  }
-}
-.btn-iconed-primary > .btn-icon {
-  background: rgb(148.41, 0, 148.41);
+  --bs-btn-border-color: #990099;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: rgb(130.05, 0, 130.05);
+  --bs-btn-hover-border-color: rgb(122.4, 0, 122.4);
+  --bs-btn-focus-shadow-rgb: 168, 38, 168;
+  --bs-btn-active-color: #fff;
+  --bs-btn-active-bg: rgb(122.4, 0, 122.4);
+  --bs-btn-active-border-color: rgb(114.75, 0, 114.75);
+  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  --bs-btn-disabled-color: #fff;
+  --bs-btn-disabled-bg: #990099;
+  --bs-btn-disabled-border-color: #990099;
+  --bs-btn-icon-color: #fff;
+  --activetes: rgb(122.4, 0, 122.4);
+  --bs-btn-icon-bg: rgb(130.05, 0, 130.05);
 }
 
 html {

src-ui/scss/_custom.scss

@@ -0,0 +1,287 @@
+// General variable structure
+//
+// Variable format should follow the `$component-modifier-state-property` order.
+
+$image: '../img/';
+$font: '../fonts/';
+
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret:              true !default;
+$enable-rounded:            true !default;
+$enable-shadows:            true !default;
+$enable-gradients:          false !default;
+$enable-transitions:        true !default;
+$enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes:       true !default;
+$enable-print-styles:       true !default;
+
+// stylelint-disable
+$spacer: 1rem !default;
+$spacers: () !default;
+$spacers: map-merge((
+  0: 0,
+  1: ($spacer * .25),
+  2: ($spacer * .5),
+  3: $spacer * 1.5,
+  4: ($spacer * 2),
+  5: ($spacer * 2.5),
+  6: ($spacer * 3),
+  7: ($spacer * 4.5)
+), $spacers);
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:                12 !default;
+$grid-gutter-width:           30px !default;
+
+$common-padding:				$grid-gutter-width;
+
+// Color system
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$grays: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$grays: map-merge(
+  (
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900
+  ),
+  $grays
+);
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #28a745 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$colors: map-merge(
+  (
+    "blue":       $blue,
+    "indigo":     $indigo,
+    "purple":     $purple,
+    "pink":       $pink,
+    "red":        $red,
+    "orange":     $orange,
+    "yellow":     $yellow,
+    "green":      $green,
+    "teal":       $teal,
+    "cyan":       $cyan,
+    "white":      $white,
+    "gray":       $gray-600,
+    "gray-dark":  $gray-800
+  ),
+  $colors
+);
+
+$antrazit:              #2D2D2D;
+$antrazit85:            #4C4C4C;
+$antrazit60:            #818181;
+$antrazit40:            #ABABAB;
+$antrazit25:            #CACACA;
+$antrazit15:            #E0E0E0;
+$antrazit08:            #EFEFEF;
+$antrazit05:            #F7F7F7;
+
+$border-color:          $antrazit08;
+$border-color-darken:   $antrazit25;
+
+// Grayscale and brand colors for use across Bootstrap.
+
+$gray-dark:                 $antrazit;
+$gray:                      $antrazit85;
+$gray-light:                $antrazit60;
+$gray-lighter:              $antrazit25;
+$gray-lightest:             $antrazit08;
+
+$primary:             #990099;
+$primary-d-100:			#5C005C;
+$primary-d-200:			#250025;
+$primary-l-100:			#C955D9;
+$primary-l-200:			#D196D9;
+$secondary:             $antrazit60;
+
+$success:             #5cb85c;
+$info:                #5bc0de;
+$warning:             #f0ad4e;
+$danger:              #d9534f;
+$inverse:             $gray-dark;
+
+
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                   $white;
+$body-color:                $gray-900;
+
+
+
+$paragraph-margin-bottom:   2rem;
+
+$font-family-sans-serif:      "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+$font-size-base:              1rem; 
+$font-size-sm:                0.75rem;
+$font-size-md:                0.875rem;
+$font-size-xl:                1.5rem;
+
+$h1-font-size:                $font-size-base * 2;
+$h2-font-size:                $font-size-base * 1.5;
+$h3-font-size:                $font-size-base * 1.25;
+$h4-font-size:                $font-size-base;
+$h5-font-size:                $font-size-base;
+$h6-font-size:                $font-size-base;
+
+$headings-margin-bottom:      1.5rem;
+$headings-font-weight:        bold;
+
+$border-radius:               0 !default;
+$border-radius-lg:            0 !default;
+$border-radius-sm:            0 !default;
+
+$input-border-color:          $antrazit25;
+
+$input-btn-padding-y:         .375rem !default;
+$input-btn-padding-x:         .75rem !default;
+
+$btn-border-width:               1px;
+$btn-font-weight: 				bold;
+
+$btn-block-spacing-y:         .625rem !default;
+
+$btn-primary-color:              #fff !default;
+$btn-primary-bg:                 $primary !default;
+$btn-primary-border:             $btn-primary-bg !default;
+
+$btn-secondary-color:            $gray-dark !default;
+$btn-secondary-bg:               #fff !default;
+$btn-secondary-border:           #ccc !default;
+
+$btn-info-color:                 #fff !default;
+$btn-info-bg:                    $antrazit40 !default;
+$btn-info-border:                $antrazit40 !default;
+
+$btn-success-color:              #fff !default;
+$btn-success-bg:                 $success !default;
+$btn-success-border:             $btn-success-bg !default;
+
+$btn-warning-color:              #fff !default;
+$btn-warning-bg:                 $warning !default;
+$btn-warning-border:             $btn-warning-bg !default;
+
+$btn-danger-color:               #fff !default;
+$btn-danger-bg:                  $danger !default;
+$btn-danger-border:              $btn-danger-bg !default;
+
+$btn-padding-x-xl:               1.2rem !default;
+$btn-padding-y-xl:               .615rem !default;
+
+$btn-padding-x-xxl:               1rem !default;
+$btn-padding-y-xxl:               .615rem !default;
+
+$btn-border-radius:              $border-radius !default;
+$btn-border-radius-lg:           $border-radius-lg !default;
+$btn-border-radius-sm:           $border-radius-sm !default;
+$btn-border-radius-xl:           $border-radius-lg !default;
+$btn-border-radius-xxl: 		 $border-radius-lg !default;
+
+$btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-x:               $input-btn-padding-x !default;
+
+
+$btn-iconed-padding-top: 		$btn-padding-y*1.1;
+$btn-iconed-padding-bottom:  	$btn-padding-y*0.9;
+
+$btn-hero-padding-y:               1.4rem !default;
+$btn-hero-padding-x:               1.8rem !default;
+
+$btn-hero-iconed-padding-top: 			$btn-hero-padding-y*1.1;
+$btn-hero-iconed-padding-bottom:  		$btn-hero-padding-y*0.9;
+
+
+$dropdown-min-width:                0rem;
+$dropdown-box-shadow:               0 2px 15px rgba($black, .2);
+$dropdown-border-radius:            3px;
+$dropdown-border-width:             0;
+$dropdown-padding-y:                23px;
+
+$dropdown-item-padding-y:           7px;
+$dropdown-item-padding-x:           30px;
+
+$dropdown-link-color:               $body-color;
+$dropdown-link-hover-color:         $primary;
+$dropdown-link-hover-bg:            transparent;
+
+$dropdown-link-active-color:        $primary;
+$dropdown-link-active-bg:          	transparent;
+
+
+$lead-font-size:                    1.25rem;
+
+$caret-spacing:                     0.357143em;
+
+
+//@import "../node_modules/bootstrap/scss/variables";
+
+
+
+$nav-tabs-border-color:             $gray-200;
+
+$nav-tabs-link-hover-border-color:  transparent;
+
+$nav-tabs-link-active-color:        $body-color;
+$nav-tabs-link-active-bg:           $gray-100;
+$nav-tabs-link-active-border-color: $gray-200 $gray-200 $nav-tabs-link-active-bg;
+
+
+$common-padding:				$grid-gutter-width;
+
+$modal-inner-padding:         0 !default;
+$modal-footer-border-width:     0;
+
+$modal-md:                      540px;
+
+$font-family-icons:				'icomoon';
+
+$accordion-border-radius:		10px;
+
+
+$link-decoration: none;
+$link-hover-decoration: underline;
+
+// Dropdowns
+//
+// Dropdown menu container and contents.

src-ui/scss/_layout.scss

@@ -0,0 +1,242 @@
+// general style corrections
+
+
+// stretch content -> sticky footer
+
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	display: flex;
+	flex-direction: column;
+	overflow-y: scroll;
+	min-height: 100vh;
+	position: relative;
+}
+
+#ch-ggs-web-suite-content {
+	flex: 1 0 auto;
+}
+
+.ch-ggs-web-suite-section-gray {
+	background: $antrazit05;
+}
+.ch-ggs-web-suite-section-dark {
+	background: $primary-d-200;
+	&,
+	& a:not([class]) {
+		color: $white;
+	}
+}
+
+
+h1, h2 {
+	font-weight: 300;
+}
+
+footer h2 {
+	margin-bottom: 1.5rem;
+}
+
+.ch-ggs-web-suite-section-title {
+	margin-bottom: 2.5rem;
+}
+
+.navbar-brand svg,
+.navbar-brand img {
+	max-width: 243px;
+	max-height: 60px;
+	width: auto;
+}
+
+// header
+
+#ch-ggs-web-suite-header {
+	padding: 18px 0;
+	border-bottom: 2px solid $primary;
+}
+
+// Navigation
+
+#ch-ggs-web-suite-toggler-nav {
+	li.level-rel-0 > .nav-link {
+		color: $antrazit85;
+		font-weight: bold;
+		font-size: $font-size-md;
+		text-transform: uppercase;
+		padding: 0.5rem 1rem;
+		line-height: 1;
+		&:hover {
+			color: $primary;
+		}
+		&.ch-ggs-web-suite-language-nav {
+			background-color: $antrazit05;
+			margin-left: 2px;
+			padding: 0.5rem 0.75rem;
+			&.active {
+				background-color: $primary;
+				color: white;
+			}
+		}
+
+		.ifc {
+			vertical-align: middle;
+			position: relative;
+			top: -1px;
+		}
+	}
+}
+
+.navbar-brand {
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
+.navbar-toggler {
+
+	&:focus {
+		outline: none;
+	}
+	
+	.navbar-toggler-bar {
+		background-color: #2d2d2d;
+		display: block;
+		height: 4px;
+		width: 26px;
+		transform: rotate(0deg);
+		transform-origin: left center;
+		transition: .25s ease-in-out;
+		will-change: transform;
+	}
+
+	.navbar-toggler-bar:not(:first-child) {
+		margin-top: 5px;
+	}
+
+	&[aria-expanded="true"] {
+		.navbar-toggler-bar:nth-child(1) {
+			transform: rotate(45deg);
+			top: 20px;
+			left: 20px;
+		}
+		.navbar-toggler-bar:nth-child(2) {
+			width: 0;
+			opacity: 0;
+		}
+		.navbar-toggler-bar:nth-child(3) {
+			transform: rotate(-45deg);
+			top: 39px;
+			left: 20px;
+		}
+	}
+}
+
+@include media-breakpoint-down(md) {
+	.navbar-brand svg,
+	.navbar-brand img {
+		max-width: 180px;
+		max-height: 44px;
+	}
+
+	#ch-ggs-web-suite-toggler-nav {
+		> .navbar-nav {
+			padding: 40px 0;
+		}
+		li.level-rel-0 > .nav-link {
+			padding-left: 0;
+		}
+		
+		.dropdown-menu {
+			border: none;
+			padding: 0.1rem 0 0.8rem;
+			.dropdown-item {
+				padding: 0.15rem .5rem;
+			}
+		}
+
+		.ch-ggs-web-suite-language-nav {
+			display: inline-block;
+		}
+	}
+}
+
+@include media-breakpoint-up(lg) {
+	#ch-ggs-web-suite-nav {
+		padding: 0;
+	}
+}
+
+
+// content
+
+h1 {
+	color: $primary;
+	text-align: center;
+	border-bottom: 1px solid $antrazit05;
+	padding-bottom: 22px;
+	margin-bottom: 30px;
+}
+
+
+#ch-ggs-web-suite-content > .container,
+#ch-ggs-web-suite-content > section > .container {
+	padding-top: 120px;
+	padding-bottom: 120px;
+}
+
+#ch-ggs-web-suite-content > section > .container:last-child > *:last-child,
+.ch-ggs-web-suite-common-content-holder:last-child > .ch-ggs-web-suite-common-content > *:last-child {
+	margin-bottom: 0;
+}
+
+#ch-ggs-web-suite-content-step {
+	background-color: $antrazit05;
+	padding: 15px 0;
+}
+
+
+
+// footer
+
+#ch-ggs-web-suite-footer-addr {
+	border-top: 5px solid $primary-d-100;
+	background-color: $primary;
+	color: white;
+	padding: 40px 0 28px;
+	a {
+		color: white;
+	}
+}
+
+#ch-ggs-web-suite-footer-payment {
+	padding: 20px 0;
+	dl {
+		margin: 0;
+		> dt {
+			display: inline-block;
+		}
+		> dd {
+			display: inline-block;
+			font-weight: bold;
+			color: $antrazit60;
+		}
+	}
+	img {
+		width: auto;
+		height: 40px;
+		margin-right: 15px;
+	}
+}
+
+#ch-ggs-web-suite-footer-copyright {
+	background-color: $antrazit;
+	color: white;
+	padding: 18px;
+	a {
+		color: white;
+	}
+}
+#ch-ggs-web-suite-footer-creator > a {
+	color: $antrazit60;
+}

src-ui/scss/_navigation.scss

@@ -0,0 +1,28 @@
+
+
+.ch-ggs-web-suite-aside-nav ul {
+	list-style: none;
+	padding: 0;
+}
+
+.ch-ggs-web-suite-aside-nav a {
+	padding: 6px 0;
+	display: block;
+	color: $body-color;
+	text-decoration: none;
+}
+
+.ch-ggs-web-suite-aside-nav li.active > a,
+.ch-ggs-web-suite-aside-nav li.open > a,
+.ch-ggs-web-suite-aside-nav a:hover,
+.ch-ggs-web-suite-aside-nav a:focus {
+	color: $primary;
+}
+
+.ch-ggs-web-suite-aside-nav li.nav-level-1 > a {
+	font-weight: bolder;
+}
+
+.ch-ggs-web-suite-aside-nav li.nav-level-2 > a {
+	padding-left: 20px;
+}

src-ui/scss/_project.scss

@@ -0,0 +1,1546 @@
+/*
+ * GENERAL
+ */
+
+// fonts
+@font-face {
+	font-family:"Fira Sans";
+	src:url("../fonts/fira-sans-v6-latin-300.eot");
+	src:url("../fonts/fira-sans-v6-latin-300.eot?#iefix") format("embedded-opentype"),
+		url("../fonts/fira-sans-v6-latin-300.ttf?") format("truetype"),
+		url("../fonts/fira-sans-v6-latin-300.woff?") format("woff"),
+		url("../fonts/fira-sans-v6-latin-300.svg?") format("svg");
+	font-weight:300;
+	font-style:normal;
+	font-display: swap;
+}
+@font-face {
+	font-family:"Fira Sans";
+	src:url("../fonts/fira-sans-v6-latin-regular.eot");
+	src:url("../fonts/fira-sans-v6-latin-regular.eot?#iefix") format("embedded-opentype"),
+	url("../fonts/fira-sans-v6-latin-regular.ttf?") format("truetype"),
+	url("../fonts/fira-sans-v6-latin-regular.woff?") format("woff"),
+	url("../fonts/fira-sans-v6-latin-regular.svg?") format("svg");
+	font-weight:normal;
+	font-style:normal;
+	font-display: swap;
+}
+@font-face {
+	font-family:"Fira Sans";
+	src:url("../fonts/fira-sans-v6-latin-700.eot");
+	src:url("../fonts/fira-sans-v6-latin-700.eot?#iefix") format("embedded-opentype"),
+	url("../fonts/fira-sans-v6-latin-700.ttf?") format("truetype"),
+	url("../fonts/fira-sans-v6-latin-700.woff?") format("woff"),
+	url("../fonts/fira-sans-v6-latin-700.svg?") format("svg");
+	font-weight:600;
+	font-style:normal;
+	font-display: swap;
+}
+
+h2 {
+	margin-bottom: 0.5rem;
+}
+
+h3, h4, h5, h6,
+.h3, .h4, .h5, .h6 {
+	margin-bottom: 0;
+}
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+	&:first-child {
+		margin-top: 0;
+	}
+}
+
+h3,
+.h3 {
+	margin-top: 40px;
+	margin-bottom: 0.5rem;
+}
+
+h4,
+.h4 {
+	margin-top: 30px;
+}
+
+h4 + hr {
+	margin-top: 10px;
+}
+
+.dropdown-item-important {
+  --#{$prefix}dropdown-link-color: rgba($antrazit, .6);
+  --#{$prefix}dropdown-link-hover-color: $body-color;
+  --#{$prefix}dropdown-link-hover-bg: $body-color;
+  //--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
+  //--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
+	//color: rgba($antrazit, .6);
+	font-weight: bold;
+	//@include hover-focus() {
+	//	color: $body-color;
+	//}
+}
+
+.dropdown-item-important:last-child {
+	margin-top: 15px;
+}
+
+@include media-breakpoint-down(md) {
+	.dropdown-menu {
+		box-shadow: none; 
+	}
+}
+
+@include media-breakpoint-up(lg) {
+	.dropdown-divider {
+		margin-left: $dropdown-item-padding-x;
+		margin-right: $dropdown-item-padding-x;
+	}
+}
+
+.ch-ggs-web-suite-h2 {
+	color: $primary;
+	font-weight: bold;
+}
+
+.text-muted-dark {
+	color: $gray-700;
+}
+
+.btn-back {
+	padding-left: 0;
+}
+
+.btn-white {
+	@include button-variant($white, $white, $primary, shade-color($white, $btn-hover-bg-shade-amount), shade-color($white, $btn-hover-bg-shade-amount));
+	//color: $primary;
+}
+
+.ch-ggs-web-suite-landing-section-hero,
+.ch-ggs-web-suite-cta-box {
+	.btn-white:hover,
+	.btn-white:focus {
+		color: $primary;
+	}
+}
+
+//modal
+.modal-content {
+	padding: 40px 40px 60px;
+}
+
+.modal-header .close {
+	margin: 0;
+	padding: 0;
+}
+
+.modal-header {
+	padding: 0 0 10px 0;
+}
+
+.modal-header [data-dismiss*="modal"] {
+	align-self: center;
+	text-decoration: none;
+}
+
+.modal-header [data-dismiss*="modal"] .ifc {
+	font-size: 20px;
+}
+
+.modal-footer {
+	padding: 0;
+	display: block;
+}
+
+.modal-title {
+	color: $primary;
+	font-size: $font-size-lg;
+}
+
+.modal-body {
+	padding: $common-padding 0;
+}
+
+
+//Forms
+
+form > .form-group:first-child > h3:first-child,
+form > .form-group:first-child > .h3:first-child {
+	margin-top: 1rem;
+}
+
+label {
+	margin-bottom: .25rem;
+}
+
+.input-group {
+	background: white;
+}
+
+.input-group .btn {
+	border-width: $input-border-width;
+	border-color: $input-border-color;
+}
+
+.ch-ggs-web-suite-input-group-iconed .btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 38px;
+}
+
+
+
+
+//links
+
+.ch-ggs-web-suite-card-link {
+	margin-top: auto;
+	font-weight: bold;
+	color: $antrazit60;
+	transition: $transition-base;
+	transition-property: color;
+	.ifc {
+		margin-left: 5px;
+		display: inline-block;
+		position: relative;
+		transform: translateX(0);
+		transition: $transition-base;
+		transition-property: transform;
+	}
+}
+
+.ch-ggs-web-suite-article:hover,
+.ch-ggs-web-suite-card-simple:hover,
+.ch-ggs-web-suite-card-simple:focus {
+	.ch-ggs-web-suite-card-link {
+		color: $primary;
+		.ifc {
+			transform: translateX(8px);
+		}
+	}
+}
+
+
+.ch-ggs-web-suite-file-input-box[type="file"] {
+	background: $antrazit05;
+	padding: 20px;
+    &::file-selector-button {
+      background: $antrazit15;
+      border-right: none;
+    }
+}
+
+// seelct
+
+.ch-ggs-web-suite-select {
+	position: relative;
+	background: $input-bg;
+	overflow: hidden;
+}
+
+.ch-ggs-web-suite-select:after {
+	content: "\e901";
+	font-family: icomoon;
+	position: absolute;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	top: 0px;
+	right: 0px;
+	bottom: 0px;
+	width: 2.2em;
+	margin: auto;
+	pointer-events: none;
+	transform: scale(1.5);
+}
+
+//background
+.ch-ggs-web-suite-select:before {
+	content: "";
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	bottom: 0px;
+	width: 2.2em;
+	background: $antrazit15;
+	border: 1px solid $input-border-color;
+	pointer-events: none;
+}
+
+.ch-ggs-web-suite-select select {
+	background: transparent;
+	width: 100%;
+	padding-right: 2.5em;
+	appearance: none;
+	// Disable ugly ass outline on firefox 
+    &:-moz-focusring {
+		color: transparent;
+		text-shadow: 0 0 0 #000;
+	}
+	// Disable default arrow on IE 11+
+    &::-ms-expand {
+	display: none;
+	}
+}
+
+// IE 9 only 
+@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
+	.ch-ggs-web-suite-select{ 
+	  select {
+		padding-right: 0;
+	  }
+  
+	  &:after, &:before {
+		display: none;
+	  }
+	}
+  }
+
+
+// step navigation
+
+$step-number-block-margin:	20px;
+$step-margin:				30px;
+
+ol.ch-ggs-web-suite-order-steps {
+    counter-reset: section;
+    list-style-type: none;
+    text-align: left;
+    margin-bottom: -$step-margin/4;
+	padding-left: 0;
+	
+	li.error,
+	li.loading,
+	li.done,
+	li.active {
+		color: $primary;
+
+		& .nav-link:before {
+			background: $white;
+			color: $primary;
+			border-color: $white;
+		}
+		& .nav-link:after {
+			background: $primary;
+		}
+	}
+
+	li {
+		display: block;
+		position: relative;
+		color: $antrazit25;
+		margin-bottom: $step-margin/4;
+		.nav-link {
+			padding: 0px 30px 0px 0;
+			background: $antrazit05;
+			font-weight: bold;
+			position: relative;
+			display: flex;
+			align-items: center;
+			z-index: 0;
+			&:before {
+				// counter-increment: section;
+				// content: counters(section,"");
+				content: "";
+				display: inline-block;
+				flex: 0 0 2em;
+				width: 2em;
+				height: 2em;
+				border-radius: 2em;
+				line-height: 2em;
+				margin: $step-number-block-margin $step-number-block-margin*2 $step-number-block-margin $step-number-block-margin;
+				font-size: 1.25rem;
+				background: $antrazit08;
+				color: $antrazit25;
+				border: 1px solid $antrazit25;
+				text-align: center;
+			}
+			&:after {
+				z-index: -1;
+				content: "";
+				background: $antrazit08;
+				position: absolute;
+				left: 0;
+				top: 0;
+				width: calc(2em + #{$step-number-block-margin*2});
+				height: calc(2em + #{$step-number-block-margin*2});
+				font-size: 1.25rem;
+			}
+		}
+
+		.ch-ggs-web-suite-order-step-link-multi {
+			// display: inline-flex;
+			// flex-direction: column;
+			position: relative;
+			top: -10px;
+		}
+
+
+		a:link:not(:hover):not(:focus), 
+		a:visited:not(:hover):not(:focus) {
+			color: inherit;
+		}
+	}
+
+	li.active,
+	li.error,
+	li.done {
+		.nav-link {
+			&:before {
+				content: unicode("e900");
+				font-family: $font-family-icons;
+				line-height: 1.8em;
+				speak: none;
+				font-style: normal;
+				font-weight: normal;
+				font-variant: normal;
+				text-transform: none;
+			}
+		}
+	}
+
+	li.error {
+		.nav-link {
+			&:before {
+				content: unicode("e906"); 
+			}
+		}
+	}
+
+	li.loading { 
+		.nav-link {
+			&:before {
+				opacity: 0;
+			}
+		}
+	}
+
+	.ch-ggs-web-suite-order-steps-loader {
+		position: absolute;
+		left: 19px;
+		top: 19px;
+		width: calc(2em + 10px);
+		height: calc(2em + 10px);
+		border-width: 0.2em;
+	}
+}
+
+// step navigation
+ol.ch-ggs-web-suite-steps {
+    counter-reset: section;
+    list-style-type: none;
+    display: inline-block;
+    text-align: left;
+    margin-bottom: -15px;
+    margin-left: -30px;
+	padding-left: 0;
+	
+	li.active {
+		color: $primary;
+
+		&::before {
+			border-color: $primary;
+		}	
+	}
+
+	li {
+		display: block;
+		float: left;
+		position: relative;
+		color: $antrazit60;
+		font-weight: bold;
+		white-space: nowrap;
+		margin: 0 30px 15px;
+		&::before {
+			counter-increment: section;
+			content: counters(section,"");
+			position: relative;
+			display: inline-block;
+			margin-right: 10px;
+			width: 2em;
+			height: 2em;
+			border-radius: 2em;
+			background: #fff;
+			border: 1px solid #ababab;
+				border-top-color: rgb(171, 171, 171);
+				border-right-color: rgb(171, 171, 171);
+				border-bottom-color: rgb(171, 171, 171);
+				border-left-color: rgb(171, 171, 171);
+			text-align: center;
+			line-height: 2em;
+			font-size: 1.25rem;
+		}
+
+		a:link:not(:hover):not(:focus), 
+		a:visited:not(:hover):not(:focus) {
+			color: inherit;
+		}
+	}
+}
+
+
+// image
+
+.ch-ggs-web-suite-image {
+	margin-bottom: $paragraph-margin-bottom;
+}
+
+
+// download
+
+.ch-ggs-web-suite-download {
+	display: flex;
+	margin-bottom: $paragraph-margin-bottom;
+}
+
+a.ch-ggs-web-suite-download { 
+	text-decoration: none;
+}
+
+.ch-ggs-web-suite-download-icon {
+	width: 70px;
+	height: 70px;
+	flex: 0 0 70px;
+	background: $primary;
+	color: $white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: $grid-gutter-width;
+	transition: $transition-base;
+	transition-property: background;
+	a.ch-ggs-web-suite-download:hover &, 
+	a.ch-ggs-web-suite-download:focus & {
+		background: $link-hover-color;
+	}
+	> .ifc {
+		font-size: 24px;
+	}
+}
+
+.ch-ggs-web-suite-download-info > *:last-child {
+	margin-bottom: 0;
+}
+
+.ch-ggs-web-suite-download-title {
+	font-weight: bold;
+	color: $primary;
+	display: inline-block;
+	margin-bottom: 5px;
+	transition: $transition-base;
+	transition-property: color;
+	&:first-child {
+		margin-top: 22px;
+	}
+
+	a.ch-ggs-web-suite-download:hover &, 
+	a.ch-ggs-web-suite-download:focus & {
+		color: $link-hover-color;
+
+	} 
+}
+
+.ch-ggs-web-suite-download-text {
+	color: $text-muted;
+} 
+
+
+// cards
+
+.ch-ggs-web-suite-card-group {
+	margin-bottom: 70px;
+}
+
+.ch-ggs-web-suite-card-holder {
+	margin-bottom: -30px;
+}
+
+.ch-ggs-web-suite-card {
+	position: relative;
+    display: flex;
+    flex-direction: column;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+	border-bottom-color: #efefef;
+	box-shadow: 0 0 15px 0 rgba(0,0,0,0);
+	transition: $transition-base;
+	transition-property: box-shadow;
+	margin-bottom: 30px;
+}
+
+a.ch-ggs-web-suite-card {
+	text-decoration: none;
+}
+
+
+
+.ch-ggs-web-suite-card-img-fake {
+	background: $antrazit08;
+	color: $primary;
+	display: flex;
+	transition: $transition-base;
+	transition-property: background-color;
+}
+
+.ch-ggs-web-suite-card-img-fake:before {
+	content: "";
+	display: table;
+	float: left;
+	padding-bottom: 100%;
+}
+
+.ch-ggs-web-suite-card-img-fake .ifc {
+	font-size: 120px;
+	align-self: center;
+	margin-left: auto;
+	margin-right: auto;
+	transition: $transition-base;
+	text-shadow: 4px 8px 12px rgba(black, 0);
+	transition-property: text-shadow, color;
+}
+
+.ch-ggs-web-suite-card-img-fake .ifc-train-front {
+	font-size: 130px;
+}
+
+.ch-ggs-web-suite-card-img-fake .ifc-sea-ship-with-containers {
+	font-size: 150px;
+}
+
+.ch-ggs-web-suite-card-img-fake .ifc-air-transport {
+	font-size: 150px;
+}
+
+.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-img-fake,
+.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-img-fake {
+	background: $primary-d-100;
+	color: white;
+	text-shadow: 4px 8px 12px rgba(black, 0.2);
+}
+
+.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-img-fake .ifc,
+.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-img-fake .ifc {
+	text-shadow: 4px 8px 12px rgba(black, 0.2);
+}
+
+.ch-ggs-web-suite-card-main {
+	flex: 1 1 auto;
+	padding: 30px 15px 15px;
+	display: flex;
+	flex-direction: column;
+}
+
+.ch-ggs-web-suite-card:hover,
+.ch-ggs-web-suite-card:focus {
+	box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
+}
+
+.ch-ggs-web-suite-card .btn {
+	background: white;
+	border-color: white;
+}
+
+.ch-ggs-web-suite-card .btn,
+.ch-ggs-web-suite-card .btn .ifc {
+	color: $antrazit60;
+}
+
+.ch-ggs-web-suite-card:hover .btn,
+.ch-ggs-web-suite-card:focus .btn {
+	background: $antrazit15;
+	border-color: $antrazit15;
+}
+
+.ch-ggs-web-suite-card-title {
+	text-align: center;
+	font-weight: bold;
+	font-size: 1.25rem;
+	color: $body-color;
+	margin-bottom: 15px;
+}
+
+.ch-ggs-web-suite-card:hover .ch-ggs-web-suite-card-title,
+.ch-ggs-web-suite-card:focus .ch-ggs-web-suite-card-title {
+	color: $primary-d-100;
+}
+
+.ch-ggs-web-suite-card-text {
+	color: $body-color;
+}
+
+.ch-ggs-web-suite-card-plain-group {
+	margin-bottom: 70px;
+}
+
+.ch-ggs-web-suite-card-plain-holder {
+	margin-bottom: -30px;
+}
+
+.ch-ggs-web-suite-card-plain {
+	padding: 25px 25px 0px;
+	position: relative;
+	z-index: 0;
+    display: flex;
+	flex-direction: column;
+	background: $white;
+	margin-bottom: 30px;
+}
+
+a.ch-ggs-web-suite-card-plain {
+	text-decoration: none;
+	&,
+	&:hover,
+	&:focus {
+		color: $body-color;
+	}
+}
+
+.ch-ggs-web-suite-card-plain-img-icon {
+	color: $primary;
+	display: flex;
+	transition: $transition-base;
+	transition-property: background-color;
+	margin-bottom: 20px;
+}
+
+.ch-ggs-web-suite-card-plain-img-icon .ifc {
+	font-size: 40px;
+	align-self: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.ch-ggs-web-suite-card-plain-main {
+	flex: 1 1 auto;
+	display: flex;
+	flex-direction: column;
+}
+
+.ch-ggs-web-suite-card-plain-title {
+	text-align: center;
+	font-weight: bold;
+	font-size: $h4-font-size;
+	color: $body-color;
+	margin-bottom: 0.75em;
+}
+
+.ch-ggs-web-suite-card-plain:hover .ch-ggs-web-suite-card-plain-title,
+.ch-ggs-web-suite-card-plain:focus .ch-ggs-web-suite-card-plain-title {
+	color: $primary-d-100;
+}
+
+.ch-ggs-web-suite-card-plain-text {
+	text-align: center;
+	font-size: $font-size-md;
+	margin-bottom: 0;
+}
+
+.ch-ggs-web-suite-card-simple-group {
+	margin-bottom: 70px;
+}
+
+.ch-ggs-web-suite-card-simple-holder {
+	margin-bottom: -30px;
+}
+
+.ch-ggs-web-suite-card-simple {
+	position: relative;
+	z-index: 0;
+    display: flex;
+	flex-direction: column;
+	background: $white;
+	margin-bottom: 30px;
+	&:after {
+		content: "";
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: -1;
+		box-shadow: 0 2px 4px 0 rgba(0,0,0,0.12), 0 8px 24px 0 rgba(0,0,0,0.2);
+		opacity: 0;
+		transition: $transition-base;
+		transition-property: opacity;
+	}
+
+	&:before {
+		content: "";
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: -1;
+		border: 3px solid $primary;
+		opacity: 0;
+		transition: $transition-base;
+		transition-property: opacity;
+	}
+}
+
+.ch-ggs-web-suite-card-simple:hover,
+.ch-ggs-web-suite-card-simple:focus {
+	&:before,
+	&:after {
+		opacity: 1;
+	}
+}
+
+a.ch-ggs-web-suite-card-simple {
+	text-decoration: none;
+	&,
+	&:hover,
+	&:focus {
+		color: $body-color;
+	}
+}
+
+.ch-ggs-web-suite-card-simple-img-icon {
+	color: $primary;
+	display: flex;
+	transition: $transition-base;
+	transition-property: background-color;
+}
+
+.ch-ggs-web-suite-card-simple-img-icon .ifc {
+	margin-top: 60px;
+	font-size: 60px;
+	align-self: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.ch-ggs-web-suite-card-simple-main {
+	flex: 1 1 auto;
+	padding: 25px;
+	display: flex;
+	flex-direction: column;
+}
+
+.ch-ggs-web-suite-card-simple-title {
+	text-align: center;
+	font-weight: bold;
+	font-size: 1.25rem;
+	color: $body-color;
+	margin-bottom: 15px;
+}
+
+.ch-ggs-web-suite-card-simple:hover .ch-ggs-web-suite-card-simple-title,
+.ch-ggs-web-suite-card-simple:focus .ch-ggs-web-suite-card-simple-title {
+	color: $primary-d-100;
+}
+
+.ch-ggs-web-suite-card-simple-text {
+	color: $body-color;
+}
+
+
+// article
+
+.ch-ggs-web-suite-article {
+	margin-bottom: 90px;
+}
+
+a.ch-ggs-web-suite-article {
+	color: inherit;
+	text-decoration: none;
+}
+
+.ch-ggs-web-suite-article-content {
+	padding: 40px 25px 0;
+	position: relative;
+	z-index: 0;
+
+	> *:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.ch-ggs-web-suite-article-title {
+	color: $primary;
+	transition: $transition-base;
+	transition-property: color;
+
+	.ch-ggs-web-suite-article:hover & {
+		color: $primary-d-100;
+	}
+}
+
+@include media-breakpoint-up(md) {
+	.ch-ggs-web-suite-article-content {
+		padding: 40px 25px;
+	}
+}
+
+@include media-breakpoint-up(lg) {
+	.ch-ggs-web-suite-article {
+		margin-bottom: 120px;
+	}
+}
+
+
+
+// link with icons
+
+.ch-ggs-web-suite-icon-link {
+	display: inline-flex;
+}
+
+a.ch-ggs-web-suite-icon-link {
+	text-decoration: none;
+}
+
+.ch-ggs-web-suite-icon-link:hover,
+.ch-ggs-web-suite-icon-link:focus {
+	opacity: 0.8;
+}
+
+.ch-ggs-web-suite-icon-link .ifc {
+	margin-right: 10px;
+	top: 5px;
+	width: 15px;
+	position: relative;
+}
+
+/*
+ * STEP 3
+ */
+
+.ch-ggs-web-suite-dropdown .btn-block + .btn-block {
+	margin-top: 0.3125rem;
+}
+
+.ch-ggs-web-suite-btn-group {
+	margin-top: -$btn-block-spacing-y;
+}
+
+.ch-ggs-web-suite-btn-group-btn-group .btn {
+	margin-top: $btn-block-spacing-y;
+}
+
+#ch-ggs-web-suite-packing-details {
+	background-color: $antrazit08;
+	padding: 20px;
+}
+
+.ch-ggs-web-suite-packing-cmds a {
+	color: $antrazit25;
+	text-decoration: none;
+}
+
+.ch-ggs-web-suite-packing-cmds a .ifc {
+	width: 40px;
+	height: 40px;
+	margin-top: -10px;
+	margin-bottom: -10px;
+	font-size: 20px;
+	color: $body-color;
+}
+
+.ch-ggs-web-suite-packing-cmds a:hover,
+.ch-ggs-web-suite-packing-cmds a:focus,
+.ch-ggs-web-suite-packing-cmds a:hover .ifc,
+.ch-ggs-web-suite-packing-cmds a:focus .ifc {
+	color: $primary;
+}
+
+
+//step 4
+
+.ch-ggs-web-suite-steps-pricing-details {
+	margin-bottom: $common-padding;
+}
+
+.ch-ggs-web-suite-steps-pricing-details .ch-ggs-web-suite-steps-price {
+	font-size: $font-size-xl;
+	color: $primary;
+	font-weight: bold;
+	line-height: 20px;
+	margin-top: 15px;
+}
+
+.ch-ggs-web-suite-steps-pricing-details .ch-ggs-web-suite-steps-tax {
+	margin-top: 12px;
+}
+
+
+// product Option
+
+.ch-ggs-web-suite-aside-box {
+	position: sticky;
+	top: 30px;
+}
+
+.ch-ggs-web-suite-boxed-gray {
+	background: $gray-100;
+	border: 1px solid $gray-200;
+	padding: 25px 20px;
+	margin-bottom: $grid-gutter-width;
+}
+
+.ch-ggs-web-suite-boxed-gray > *:last-child {
+	margin-bottom: 0;
+}
+
+.ch-ggs-web-suite-payment-info {
+	margin-top: $grid-gutter-width;
+}
+
+
+// new common box
+
+.ch-ggs-web-suite-boxed {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 100%;
+	background: $gray-100;
+	border: 1px solid $gray-200;
+	padding: 25px 20px;
+	margin-bottom: $grid-gutter-width;
+}
+
+.ch-ggs-web-suite-boxed-main {
+	width: 100%;
+}
+
+.ch-ggs-web-suite-boxed-main:last-child > *:last-child {
+	margin-bottom: 0;
+}
+
+.ch-ggs-web-suite-boxed-footer {
+	margin-top: auto;
+	width: 100%;
+}
+
+.ch-ggs-web-suite-boxed-big {
+	padding: 25px 30px;
+}
+
+.ch-ggs-web-suite-boxed-xl {
+	padding: 30px 40px;
+}
+
+// accordion
+
+.ch-ggs-accordion {
+	margin-bottom: $paragraph-margin-bottom;
+	border-radius: $border-radius;
+}
+
+.ch-ggs-accordion-group .ch-ggs-accordion {
+	margin-bottom: 0;
+	border-radius: 0;
+	border: 1px solid $antrazit15;
+}
+
+.ch-ggs-accordion-group .ch-ggs-accordion + .ch-ggs-accordion {
+	margin-top: -1px;
+}
+
+.ch-ggs-accordion-group .ch-ggs-accordion:first-child .ch-ggs-accordion-head,
+.ch-ggs-accordion-group .ch-ggs-accordion:first-child {
+	border-top-left-radius: $accordion-border-radius;
+	border-top-right-radius: $accordion-border-radius;
+}
+.ch-ggs-accordion-group .ch-ggs-accordion:last-child:not([open]) .ch-ggs-accordion-head,
+.ch-ggs-accordion-group .ch-ggs-accordion:last-child .ch-ggs-accordion-content,
+.ch-ggs-accordion-group .ch-ggs-accordion:last-child {
+	border-bottom-left-radius: $accordion-border-radius;
+	border-bottom-right-radius: $accordion-border-radius;
+}
+
+.ch-ggs-accordion-head {
+	background: $antrazit05;
+	list-style: none;
+	display: flex;
+	padding: 17px 20px;
+	font-size: $font-size-base;
+	&:hover {
+		color: $primary;
+	}
+}
+
+.ch-ggs-accordion-content {
+	padding: 30px;
+	border-top: 1px solid $antrazit15;
+	margin-top: -1px;
+}
+
+.ch-ggs-accordion-icon {
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 30px;
+	color: $primary;
+	&:before {
+		margin-right: 5px;
+	}
+}
+
+.ch-ggs-accordion-icon:before {
+	transition: $transition-base;
+	transition-property: transform;
+	transform: rotate(0deg);
+	margin-right: 0;
+	margin-left: 5px;
+}
+
+.ch-ggs-accordion[open] .ch-ggs-accordion-icon:before {
+	transform: rotate(180deg);
+}
+
+// package
+
+.ch-ggs-packages {
+	margin-bottom: $paragraph-margin-bottom;
+}
+
+.ch-ggs-package:not(:last-child) {
+	padding-bottom: $grid-gutter-width;
+	margin-bottom: $grid-gutter-width;
+	border-bottom: 1px solid $antrazit15;
+}
+
+.ch-ggs-package-title {
+	display: flex;
+	font-weight: bold;
+}
+
+.ch-ggs-package-icon {
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 26px;
+	color: $primary;
+	&:before {
+		margin-right: 5px;
+	}
+}
+
+
+// account
+
+.tab-content {
+	border-top: none;
+}
+
+.ch-ggs-web-suite-account-tabs-box > .nav-tabs {
+	flex-wrap: nowrap;
+}
+.ch-ggs-web-suite-account-tabs-box > .nav-tabs .nav-item {
+	flex: 1 1 100%;
+}
+
+.ch-ggs-web-suite-account-tabs-box > .nav-tabs .nav-link.active {
+	background: $gray-100;
+}
+
+.ch-ggs-web-suite-book-progress {
+	height: 4px;
+	margin-top: -1px;
+}
+
+// loading bar
+
+.ch-ggs-web-suite-loading-bar {
+	position: relative;
+	padding: 20px 30px;
+	text-align: center;
+	background: $antrazit05;
+	margin-bottom: $paragraph-margin-bottom;
+	overflow: hidden;
+	&:before,
+	&:after {
+		content: "";
+		position: absolute;
+		left: 0;
+		bottom: 0;
+		height: 4px;
+		background: $antrazit08;
+		width: 100%;
+	}
+
+	&:after {
+		background: $primary;
+		left: -200px;
+		width: 200px;
+		animation: loading 2s linear infinite;
+	}
+}
+
+@keyframes loading {
+	from{left:-200px; width: 10%;}
+	50% { width: 30%; }
+	80% { left: 50%; }
+	95% { left: 120%; width: 80%}
+	to { left: 100%; }
+  }
+
+
+// new landing
+
+.ch-ggs-web-suite-landing-section {
+	min-height: 100vh;
+	padding: 120px 0;
+}
+
+.ch-ggs-web-suite-landing-section-dark {
+	color: $white;
+	background: $primary-d-200;
+}
+
+.ch-ggs-web-suite-landing-section-hero {
+	min-height: calc(100vh - 91px);
+	background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xs.jpg');
+	background-size: cover;
+	display: flex;
+	align-items: center;
+}
+
+.ch-ggs-web-suite-landing-section-title {
+	font-size: 32px;
+	display: flex;
+	font-weight: 700;
+	margin-bottom: 20px;
+}
+
+.ch-ggs-web-suite-landing-section-title-image {
+	margin-bottom: 80px;
+	max-height: 70px;
+	width: auto;
+}
+
+.ch-ggs-web-suite-landing-section-title-icon {
+	margin-right: 12px;
+}
+
+.ch-ggs-web-suite-landing-hero-title,
+.ch-ggs-web-suite-landing-hero-text {
+	color: $white;
+}
+
+.ch-ggs-web-suite-landing-hero-title {
+	font-size: 52px;
+	font-size: 1.75rem;
+    font-size: clamp(1.75rem, 4vw, 3.5rem);
+	font-weight: 700;
+	line-height: 1.35;
+	text-align: left;
+	border-bottom: 0;
+	padding-bottom: 0;
+	margin-bottom: 20px;
+}
+
+.ch-ggs-web-suite-article-landing {
+	color: $body-color;
+	
+	&:hover,
+	&:focus {
+		text-decoration: none;
+	}
+}
+
+.ch-ggs-web-suite-article-landing-image {
+	margin-bottom: 80px;
+	max-height: 70px;
+	width: auto;
+}
+
+.ch-ggs-web-suite-article-landing {
+	display: block;
+}
+
+.ch-ggs-web-suite-article-landing:not(:last-child) {
+	margin-bottom: 180px;
+}
+
+.ch-ggs-web-suite-article-landing .lead {
+	font-size: 20px;
+}
+
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-article-landing {
+	color: $white;
+}
+
+.ch-ggs-web-suite-landing-article-content-aside {
+	color: $primary-d-100;
+}
+
+.ch-ggs-web-suite-landing-section-dark .ch-ggs-web-suite-landing-article-content-aside {
+	color: $primary-l-200;
+}
+
+.ch-ggs-web-suite-landing-hero-text {
+	font-size: 22px;
+	margin-bottom: 80px;
+}
+
+.ch-ggs-web-suite-card-hover-text {
+	opacity: 1;
+	transition: $transition-base;
+	transition-property: opacity;
+	font-size: 18px;
+	color: $body-color;
+}
+
+.ch-ggs-web-suite-card-hover-title {
+	margin-bottom: 20px;
+	font-weight: 700;
+}
+
+.ch-ggs-web-suite-card-hover {
+	margin-bottom: $grid-gutter-width;
+	padding: 30px;
+	position: relative;
+	z-index: 0;
+	display: flex;
+	width: 100%;
+	&:after {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background: white;
+		transition: $transition-base;
+		transition-property: transform;
+		transform: scale(1);
+		z-index: -1;
+	}
+	
+	&:hover,
+	&:focus {
+		text-decoration: none;
+		.ch-ggs-web-suite-card-hover-title {
+			color: $primary;
+		}
+		.ch-ggs-web-suite-card-hover-text {
+			opacity: 0;
+		}
+		&:after {
+			transform: scale(1.025);
+		}
+
+	}
+}
+
+.ch-ggs-web-suite-card-hover-logo {
+	max-height: 40px;
+	width: auto;
+	align-self: start;
+	margin-bottom: 20px;
+}
+
+.ch-ggs-web-suite-card-hover-main {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+.ch-ggs-web-suite-card-hover-title {
+	display: flex;
+	font-size: 21px;
+}
+
+.ch-ggs-web-suite-card-hover-icon {
+	margin-right: 12px;
+}
+
+.ch-ggs-web-suite-landing-article-title {
+	margin-top: 20px;
+	margin-bottom: 20px;
+	font-size: 2.625rem;
+	display: flex;
+	align-items: start;
+	gap: 30px;
+}
+
+
+.ch-ggs-web-suite-article-landing {
+	font-size: 20px;
+}
+
+.ch-ggs-web-suite-simple-list {
+	padding-left: 22px;
+	@-moz-document url-prefix() {
+		padding-left: 20px;
+	}
+}
+
+.ch-ggs-web-suite-facts-list {
+	list-style: none;
+	padding-left: 0;
+	font-size: 22px;
+}
+
+
+.ch-ggs-web-suite-facts-list-item {
+	margin-bottom: 10px;
+}
+
+.ch-ggs-web-suite-facts-list-item-important {
+	margin-top: 20px;
+	font-weight: bolder;
+}
+
+.ch-ggs-web-suite-landing-nav {
+	font-size: 1.125rem;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-link .ifc {
+	transform: rotate(-90deg);
+	display: inline-block;
+	position: relative;
+	bottom: -0.125em;
+}
+
+.ch-ggs-web-suite-landing-nav .nav-link.active {
+	color: $primary-l-200;
+}
+
+.ch-ggs-web-suite-cta-box {
+	background: $primary;
+	color: $white;
+	padding: 80px 60px;
+	display: block;
+	font-size: 1.375rem;
+}
+
+.ch-ggs-web-suite-cta-box-title {
+	font-size: 2.625rem;
+	margin-bottom: 20px;
+	font-weight: 700;
+}
+
+a.ch-ggs-web-suite-cta-box {
+	text-decoration: none;
+}
+
+.ch-ggs-web-suite-cta-box-btn {
+	margin-top: 80px;
+}
+
+@include media-breakpoint-up(sm) {
+	.ch-ggs-web-suite-landing-section-hero {
+		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-sm.jpg');
+	}
+}
+
+@include media-breakpoint-up(md) {
+	.ch-ggs-web-suite-landing-section-hero {
+		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-md.jpg');
+	}
+
+	.ch-ggs-web-suite-card-hover-text {
+		opacity: 1;
+		transition: $transition-base;
+		transition-property: opacity;
+		margin-bottom: 0;
+	}
+
+	.ch-ggs-web-suite-card-hover-link {
+		margin-top: auto;
+		position: absolute;
+		opacity: 0;
+		transition: $transition-base;
+		transition-property: opacity;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+	}
+
+	.ch-ggs-web-suite-card-hover {
+		&:hover,
+		&:focus {
+			.ch-ggs-web-suite-card-hover-text {
+				opacity: 0;
+			}
+			.ch-ggs-web-suite-card-hover-link {
+				opacity: 1;
+			}
+		}
+	}
+
+	.ch-ggs-web-suite-landing-nav {
+		position: sticky;
+		z-index: 1;
+		overflow: hidden;
+		top: 0;
+		margin-top: -75px;
+		&,
+		& a {
+			color: $white;
+		}
+		.container {
+			position: relative;
+			z-index: 0;
+			background: $primary-d-200;
+			&:before,
+			&:after {
+				content: "";
+				background: $primary-d-200;
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				z-index: -1;
+				transition: $transition-base;
+				transition-duration: 0.5s;
+				transition-property: transform;
+				width: calc((100vw - 720px)/2);
+				transform: scaleX(0.3);
+			}
+
+			&:before {
+				right: 100%;
+				transform-origin: right;
+			}
+			&:after {
+				left: 100%;
+				transform-origin: left;
+			}
+		}
+	}
+
+	.ch-ggs-web-suite-landing-nav.stuck .container:before,
+	.ch-ggs-web-suite-landing-nav.stuck .container:after {
+		// max-width: 100%;
+		transform: scaleX(1);
+	}
+}
+
+@include media-breakpoint-up(lg) {
+	.ch-ggs-web-suite-landing-section-hero {
+		min-height: calc(100vh - 98px);
+		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-lg.jpg');
+	}
+
+	.ch-ggs-web-suite-landing-nav {
+		.container {
+			&:before,
+			&:after {
+				width: calc((100vw - 960px)/2);
+			}
+		}
+	}
+}
+
+@include media-breakpoint-up(xl) {
+	.ch-ggs-web-suite-landing-section-hero {
+		background-image: linear-gradient(270deg, rgba(201,85,217,0.30) 0%, #8D3E97 100%), url('#{$image}/hero-xl.jpg');
+	}
+
+	.ch-ggs-web-suite-landing-nav {
+		.container {
+			&:before,
+			&:after {
+				width: calc((100vw - 1140px)/2);
+			}
+		}
+	}
+}

src-ui/scss/custom/_buttons.scss

@@ -0,0 +1,147 @@
+
+
+
+// CUSTOM Button Sizes
+
+.btn.w-100:has(+.btn) {
+  margin-bottom: 3px;
+}
+
+.btn {
+	transition-property: background, color, border;
+}
+
+.btn-lg {
+	font-size: $font-size-lg;
+}
+
+.btn-hero {
+	font-size:	1.125rem;
+	padding: $btn-hero-padding-y $btn-hero-padding-x;
+	&.btn-iconed {
+		padding-top: $btn-hero-iconed-padding-top;
+		padding-bottom: $btn-hero-iconed-padding-bottom;
+	};
+
+	&.btn-iconed > .btn-icon {
+		//margin-left: $btn-hero-padding-x;
+		//margin-top: -$btn-hero-iconed-padding-top;
+		//margin-bottom: -$btn-hero-iconed-padding-bottom;
+		//margin-right: -$btn-hero-padding-x;
+      margin-top: calc(calc($btn-hero-iconed-padding-top + $btn-border-width)*-1);
+      margin-bottom: calc(calc($btn-hero-iconed-padding-bottom + $btn-border-width)*-1);
+      margin-left: calc($btn-hero-padding-x);
+      margin-right: calc(calc($btn-hero-padding-x + $btn-border-width)*-1);
+		width: 4em;
+	}
+
+	&.btn-iconed-left .btn-icon {
+		order: -1;
+		justify-self: flex-start;
+        margin-left: calc(calc($btn-hero-padding-x + $btn-border-width)*-1);
+        margin-right: calc($btn-hero-padding-x);
+	}
+}
+
+.btn-iconed {
+	justify-content: space-between;
+	display: inline-flex;
+	align-items: center;
+	font-weight: bold;
+	position: relative;
+	white-space: normal;
+	text-align: left;
+	padding-top: $btn-iconed-padding-top;
+	padding-bottom: $btn-iconed-padding-bottom;
+    --#{$prefix}btn-icon-bg: transparent;
+    --#{$prefix}btn-icon-color: inherit;
+	
+}
+
+.btn-iconed > .btn-icon {
+	align-self: stretch;
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	justify-self: flex-end;
+	width: 2.25em;
+    margin-top: calc(calc($btn-iconed-padding-top + $btn-border-width)*-1);
+    margin-bottom: calc(calc($btn-iconed-padding-bottom + $btn-border-width)*-1);
+    margin-left: calc($btn-padding-x);
+    margin-right: calc(calc($btn-padding-x + $btn-border-width)*-1);
+    color: var(--#{$prefix}btn-icon-color);
+    @include gradient-bg(var(--#{$prefix}btn-icon-bg));
+    @include transition($btn-transition);
+    @include box-shadow(var(--#{$prefix}btn-box-shadow));
+}
+
+.btn-iconed > .btn-icon:before {
+	margin-top: -0.1em;
+}
+
+.btn-iconed .btn-icon.ifc-add:before {
+	font-size: 1.2em;
+}
+
+.btn-lg .btn-icon {
+	width: 2.1em;
+	margin-right: calc(calc($btn-padding-x-lg + $btn-border-width)*-1);
+}
+
+// iconed specific
+.btn-iconed-left {
+	justify-content: flex-start;
+}
+.btn-iconed-left .btn-icon {
+	order: -1;
+	justify-self: flex-start;
+    margin-left: calc(calc($btn-padding-x + $btn-border-width)*-1);
+    margin-right: calc($btn-padding-x);
+}
+
+//iconed Buttons
+.btn-iconed-default {
+	@include iconed-button-variant($antrazit15, $antrazit15, $body-color, $antrazit25, $antrazit25);
+  //--#{$prefix}btn-color: #{$body-color};
+}
+
+.btn-iconed-default-white {
+	@include iconed-button-variant($antrazit25, $antrazit25, $antrazit40);
+  --#{$prefix}btn-color: #{$white};
+}
+
+.btn-iconed-anthrazit-08-primary {
+	@include iconed-button-variant($antrazit05, $antrazit05 /*, $antrazit05*/, $simple: false);
+    --#{$prefix}btn-color: #{$white};
+    --#{$prefix}btn-hover-color: #{$white};
+    --#{$prefix}btn-hover-bg: #{$primary-d-100};
+	//@include hover-focus() {
+	//	background: $primary;
+	//	color: $white;
+	//	>.btn-icon {
+	//		background: $primary-d-100;
+	//		color: $white;
+	//	}
+	//}
+
+	//&.active {
+	//	background: $primary;
+	//	color: $white;
+	//	>.btn-icon {
+	//		background: $primary-d-100;
+	//		color: $white;
+	//	}
+	//}
+}
+
+//.btn-iconed-simple {
+//	//@include iconed-button-variant($white, $antrazit15/*, $antrazit15*/, null, true);
+//    @include iconed-button-variant($antrazit15, $white/*, $antrazit15*/, null, true);
+//}
+
+.btn-iconed-primary {
+	//@include iconed-button-variant($white, $btn-primary-bg/*, $btn-primary-bg*/);
+     @include iconed-button-variant($btn-primary-bg, $btn-primary-bg /*, $btn-primary-bg*/);
+}

src-ui/scss/custom/_functions.scss

@@ -0,0 +1,3 @@
+@function unicode($str) {
+    @return unquote("\"")+unquote(str-insert($str, "\\", 1))+unquote("\"")
+  }

src-ui/scss/custom/mixins/_buttons.scss

@@ -0,0 +1,104 @@
+//@mixin button-variant(
+//  $background,
+//  $border,
+//  $color: color-contrast($background),
+//  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+//  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+//  $hover-color: color-contrast($hover-background),
+//  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+//  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+//  $active-color: color-contrast($active-background),
+//  $disabled-background: $background,
+//  $disabled-border: $border,
+//  $disabled-color: color-contrast($disabled-background)
+//) {
+//  --#{$prefix}btn-color: #{$color};
+//  --#{$prefix}btn-bg: #{$background};
+//  --#{$prefix}btn-border-color: #{$border};
+//  --#{$prefix}btn-hover-color: #{$hover-color};
+//  --#{$prefix}btn-hover-bg: #{$hover-background};
+//  --#{$prefix}btn-hover-border-color: #{$hover-border};
+//  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+//  --#{$prefix}btn-active-color: #{$active-color};
+//  --#{$prefix}btn-active-bg: #{$active-background};
+//  --#{$prefix}btn-active-border-color: #{$active-border};
+//  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+//  --#{$prefix}btn-disabled-color: #{$disabled-color};
+//  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+//  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+//}
+
+@mixin iconed-button-variant(
+  $background,
+  $border,
+  $color: color-contrast($background),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: color-contrast($disabled-background),
+  $simple: false,
+  $icon-color: $color
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+  --#{$prefix}btn-icon-color: #{$icon-color};
+
+  --activetes: #{$active-background};
+
+  @if ($simple == false) {
+    --#{$prefix}btn-icon-bg: #{$hover-background};
+  }
+
+}
+
+//@mixin iconed-button-variant($color, $background, $border, $hoverColor: null, $simple: false, $iconColor: null, $active-background: null) {
+//
+//	//border raus
+//	$active-background: if($active-background, $active-background, darken($background, 9%));
+//	$active-border: darken($border, 12%);
+//	$hoverColor: if($hoverColor, $hoverColor, $color);
+//
+//	color: $color;
+//	background-color: $background;
+//
+//	//@include box-shadow($btn-box-shadow);
+//
+//	//@include hover-focus {
+//	//	color: $hoverColor;
+//	//	background-color: $active-background;
+//	//	border-color: $active-border;
+//	//}
+//
+//	//&.active {
+//	//	color: $hoverColor;
+//	//	background-color: $active-background;
+//	//	border-color: $active-border;
+//	//}
+//
+//	& > .btn-icon {
+//		@include transition($btn-transition);
+//		@if ($iconColor) {
+//			color: $iconColor;
+//		}
+//		@if ($simple == false) {
+//			background: $active-background;
+//		}
+//	}
+//}

src-ui/scss/custom/mixins/_type.scss

@@ -0,0 +1,3 @@
+@mixin font-size-px-to-rem-root($font-size-px) {
+	font-size: ($font-size-px / $font-size-base) * 1rem;
+}

src-ui/scss/iconfont/_icomoon.scss

@@ -0,0 +1,30 @@
+$unique-id:			unique-id();
+
+@font-face {
+  font-family: 'icomoon';
+  src:  url("../fonts/icomoon.eot?#{$unique-id}");
+  src:  url("../fonts/icomoon.eot?#{$unique-id}#iefix") format('embedded-opentype'),
+    url("../fonts/icomoon.ttf?#{$unique-id}") format('truetype'),
+    url("../fonts/icomoon.woff?#{$unique-id}") format('woff'),
+    url("../fonts/icomoon.svg?#{$unique-id}#icomoon") format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+.ifc {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@import "icons";

src-ui/scss/iconfont/_icons.scss

@@ -0,0 +1,79 @@
+.ifc-publish:before {
+  content: unicode("e255");
+}
+.ifc-vertical_align_bottom:before {
+  content: unicode("e258");
+}
+.ifc-check:before {
+  content: unicode("e900");
+}
+.ifc-chevron_down:before {
+  content: unicode("e901");
+}
+.ifc-content_copy:before {
+  content: unicode("e902");
+}
+.ifc-remove:before {
+  content: unicode("e903");
+}
+.ifc-add:before {
+  content: unicode("e904");
+}
+.ifc-phone2:before {
+  content: unicode("e905");
+}
+.ifc-close:before {
+  content: unicode("e906");
+}
+.ifc-arrow-left:before {
+  content: unicode("e907");
+}
+.ifc-arrow-right:before {
+  content: unicode("e908");
+}
+.ifc-chain:before {
+  content: unicode("e90a");
+}
+.ifc-link:before {
+  content: unicode("e90a");
+}
+.ifc-phone:before {
+  content: unicode("e90b");
+}
+.ifc-envelope:before {
+  content: unicode("e90c");
+}
+.ifc-barrel:before {
+  content: unicode("e909");
+  color: #4c4c4c;
+}
+.ifc-eq:before {
+  content: unicode("e90d");
+}
+.ifc-lq:before {
+  content: unicode("e90e");
+}
+.ifc-stacked-boxes:before {
+  content: unicode("e90f");
+}
+.ifc-tanks:before {
+  content: unicode("e910");
+}
+.ifc-airplane-shape:before {
+  content: unicode("e911");
+}
+.ifc-air-transport:before {
+  content: unicode("e912");
+}
+.ifc-delivery-truck:before {
+  content: unicode("e913");
+}
+.ifc-frontal-truck:before {
+  content: unicode("e914");
+}
+.ifc-sea-ship-with-containers:before {
+  content: unicode("e915");
+}
+.ifc-train-front:before {
+  content: unicode("e916");
+}

src-ui/scss/style.scss

@@ -0,0 +1,73 @@
+@import "../node_modules/bootstrap/scss/mixins/banner";
+@include bsBanner("");
+
+@import "../node_modules/bootstrap/scss/functions";
+@import "custom";
+@import "custom/functions";
+//iconfont
+@import "iconfont/icomoon";
+ 
+// ch-ggs-web-suite mixins files
+
+@import "custom/mixins";
+
+@import "../node_modules/bootstrap/scss/variables";
+@import "../node_modules/bootstrap/scss/variables-dark";
+@import "../node_modules/bootstrap/scss/maps";
+@import "../node_modules/bootstrap/scss/mixins";
+@import "../node_modules/bootstrap/scss/utilities";
+
+// Layout & components
+
+@import "../node_modules/bootstrap/scss/root";
+@import "../node_modules/bootstrap/scss/reboot";
+@import "../node_modules/bootstrap/scss/type";
+@import "../node_modules/bootstrap/scss/images";
+@import "../node_modules/bootstrap/scss/containers";
+//@import "../node_modules/bootstrap/scss/code"; // bs 5.x code is in reboot
+@import "../node_modules/bootstrap/scss/grid";
+@import "../node_modules/bootstrap/scss/tables";
+@import "../node_modules/bootstrap/scss/forms";
+@import "../node_modules/bootstrap/scss/buttons";
+@import "../node_modules/bootstrap/scss/transitions";
+@import "../node_modules/bootstrap/scss/dropdown";
+// @import "../node_modules/bootstrap/scss/button-group";
+//@import "../node_modules/bootstrap/scss/input-group"; // bs 5.x no longer
+//@import "../node_modules/bootstrap/scss/custom-forms"; // bs 5.x no longer
+@import "../node_modules/bootstrap/scss/nav";
+@import "../node_modules/bootstrap/scss/navbar";
+// @import "../node_modules/bootstrap/scss/card";
+// @import "../node_modules/bootstrap/scss/accordion";
+// @import "../node_modules/bootstrap/scss/breadcrumb";
+// @import "../node_modules/bootstrap/scss/pagination";
+// @import "../node_modules/bootstrap/scss/badge";
+@import "../node_modules/bootstrap/scss/alert";
+@import "../node_modules/bootstrap/scss/progress";
+// @import "../node_modules/bootstrap/scss/list-group";
+// @import "../node_modules/bootstrap/scss/close";
+// @import "../node_modules/bootstrap/scss/toasts";
+@import "../node_modules/bootstrap/scss/modal";
+// @import "../node_modules/bootstrap/scss/tooltip";
+// @import "../node_modules/bootstrap/scss/popover";
+// @import "../node_modules/bootstrap/scss/carousel";
+@import "../node_modules/bootstrap/scss/spinners";
+//@import "../node_modules/bootstrap/scss/offcanvas";
+//@import "../node_modules/bootstrap/scss/placeholders";
+
+
+// Helpers
+@import "../node_modules/bootstrap/scss/helpers";
+
+// Utilities
+@import "../node_modules/bootstrap/scss/utilities/api";
+
+
+// ch-ggs-web-suite sass files
+@import "custom/mixins";
+@import "custom/buttons";
+@import "layout";
+@import "navigation";
+@import "project";
+
+
+