.new-header {
  display: flex;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
  position: relative;
  /* Add minimal height to still serve as content even if no image is provided */
  /* !important needed to override BSI's built-in styling applied to [data-bsi-element], otherwise weird display results in BSI Editor */
  min-height: 150px!important;
}
.new-header .new-header-img {
  width: 100%;
  height: auto;
}
.new-header .new-header-logo-container {
  width: auto;
  height: 40px;
  display: inline-block;
}
.new-header .new-header-logo-container .new-header-logo {
  width: 120px;
  height: auto;
}
.new-header .new-header-title {
  position: absolute;
  z-index: 1;
  bottom: 30px;
  /* Only display on larger screens, otherwise weird appearance */
  overflow: hidden;
  height: 0;
}
/* Fallback Background Colour of Header, if no background image is provided */
/* Controlled Via Style Variants */
.new-header.baloise-turkish,
.new-header.baloise-turkish .new-header-img {
  background-color: #94e3d4;
}
.new-header.baloise-yellow,
.new-header.baloise-turkish .new-header-img {
  background-color: #fae052;
}
.new-header.baloise-red,
.new-header.baloise-turkish .new-header-img {
  background-color: #ffaca6;
}
.new-header.baloise-violet,
.new-header.baloise-turkish .new-header-img {
  background-color: #b8b2ff;
}
@media (min-width: 769px) {
  /* Add minimal height to still serve as content even if no image is provided */
  /* !important needed to override BSI's built-in styling applied to [data-bsi-element], otherwise weird display results in BSI Editor */
  .new-header {
    min-height: 250px!important;
  }
  .new-header .new-header-logo-container .new-header-logo {
    width: 180px;
  }
  .new-header .new-header-title {
    height: auto;
  }
}
/* Fix Height Issues with Header */
.header {
  height: auto!important;
}
/* Make Logo Within Basic Header Optional */
.basic-header-without-image .new-header-logo-container {
  display: none;
}
.new-header .optional-baloise-logo-container {
  position: absolute;
  top: 30px;
  z-index: 1;
}
.header-co-branding-container {
  overflow: visible;
  height: 262px;
  background: linear-gradient(0deg, #fff, #fff 12px);
}
@media only screen and (min-width: 720px) and (max-width: 959px) {
  .header-co-branding-container {
    height: 331px;
  }
}
@media only screen and (min-width: 960px) {
  .header-co-branding-container {
    height: 495px;
  }
}
@media only screen and (min-width: 1920px) {
  .header-co-branding-container {
    height: 695px;
  }
}
@media only screen and (min-width: 2880px) {
  .header-co-branding-container {
    height: 895px;
  }
}
/* Make Image in Top Header Co-Branding Optional */
.top-header-co-branding-without-image .header__branding-logo-wrapper {
  display: none;
}
.header__logo.top-header-co-branding-logo-anchor {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.co-branding-logo-container {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}
.new-header-image.u-grid .co-branding-content-container {
  display: flex;
}
/* behave in the same way as logo in the header element */
.top-header-co-branding-logo-anchor {
  width: auto;
  height: 40px;
}
.top-header-co-branding-logo-anchor img {
  width: 120px;
  height: auto;
}
.co-branding-logo-container div img {
  max-height: 45px;
}
@media (min-width: 769px) {
  .top-header-co-branding-logo-anchor img {
    width: 180px;
  }
  .co-branding-logo-container div img {
    max-height: 65px;
  }
}
/* Reset submit button styles provided by default stylesheet from customer */
.cta-element.cta-element-for-button input[type="submit"] {
  margin: 0 0 4px 0;
}
.form-buttons-container {
  display: flex;
  flex-direction: row;
}
input[type="reset"] {
  margin-left: 20px;
}
.cta-element.cta-element-for-button .cta-element-link[disabled] {
  display: none;
}
#required-missing-feedback {
  display: flex;
  width: 100%;
  justify-content: center;
  color: #ea1800;
  overflow: hidden;
  height: 0;
  font-family: 'Baloise Text Bold';
}
#required-missing-feedback.enable {
  height: auto;
  margin: 20px 0 40px 0;
}
/* Styles see forms/input-text/styles.less */
/* Majority already setup via forms/form-checkbox/styles.less */
/* General Checkbox Styling */
/* Style Variants (Vertical and Horizontal Display) */
.radiobutton-set-container {
  display: flex;
}
.vertically-displayed-radiobuttons .radiobutton-set-container {
  flex-direction: column;
}
.horizontally-displayed-radiobuttons .radiobutton-set-container {
  flex-direction: row;
}
.horizontally-displayed-radiobuttons .radiobutton-set-container .custom-radiobutton-container {
  min-width: 150px;
}
/* highlight required radiobutton sets with required star */
.required-radiobutton-field::after {
  content: "*";
  color: #000d6e;
  padding-left: 5px;
}
/* disable default radiobutton display */
input[type="radio"] {
  display: none;
}
/* correctly align content */
.custom-radiobutton-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-start;
}
/* accomodate spacing for custom checkbox in label */
.custom-radiobutton-container label {
  padding-left: 30px;
  width: calc(100% - 30px);
  /* In BSI, the label cannot wrap around the input element,
as it is traditionally done when using custom checkbox for optimal
UX + styling. Hence, we have to position the checkbox label
above the .custom-checkbox-frame; otherwise the checkbox would
not be directly clickable */
  /* to assure that checkbox is always clickable (place label above) */
  z-index: 2;
  margin-left: -15px;
}
.custom-radiobutton-container label:hover {
  cursor: pointer;
}
/* create custom checkbox frame */
.custom-radiobutton-container .custom-radiobutton-frame {
  background-color: white;
  width: 15px;
  height: 15px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  /* assure that checkbox is clickable (place below label) */
  z-index: 1;
}
/* create custom checkbox checked symbol */
.custom-radiobutton-frame::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 100px;
  background: transparent;
  display: none;
  /* to assure that checkbox is clickable (place below label) also when checked */
  z-index: 1;
}
.custom-radiobutton-container input:checked ~ .custom-radiobutton-frame::after {
  display: block;
}
/* Baloise Checkbox Styling */
.baloise-checkbox-label {
  font-family: "Baloise Text Regular";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000d6e;
}
.custom-radiobutton-container {
  margin-bottom: 15px;
}
.custom-radiobutton-container .custom-radiobutton-frame {
  border-radius: 100px;
  border: 2px solid #000d6e;
  height: 24px;
  width: 24px;
}
/* Hover */
.custom-radiobutton-container label:hover ~ .custom-radiobutton-frame,
.custom-radiobutton-frame:hover {
  border-color: #0014aa;
}
.custom-radiobutton-container label:hover {
  color: #0014aa;
}
/* Focus */
.custom-radiobutton-container label:focus ~ .custom-radiobutton-frame,
.custom-radiobutton-container input:focus ~ .custom-radiobutton-frame,
.custom-radiobutton-frame:focus {
  border-color: #000739;
  background: #e8e8e8;
}
.custom-radiobutton-container label:focus,
.custom-radiobutton-container input:focus {
  color: #000739;
}
/* Checked */
.custom-radiobutton-frame {
  align-items: center;
}
.custom-radiobutton-container input:checked ~ .custom-radiobutton-frame {
  background-color: #000d6e;
}
.custom-radiobutton-container input:checked ~ .custom-radiobutton-frame::after {
  background: white;
}
.custom-radiobutton-frame::after {
  width: 6px;
  height: 6px;
}
/* Active Hover */
.custom-radiobutton-container:hover input:checked ~ .custom-radiobutton-frame {
  border-color: #0014aa;
  background-color: #0014aa;
}
.custom-radiobutton-container:hover input:checked ~ label {
  color: #0014aa;
}
/* Active Focus */
.custom-radiobutton-container:focus input:checked ~ .custom-radiobutton-frame,
.custom-radiobutton-container:focus input:checked:focus ~ .custom-radiobutton-frame {
  border-color: #000d6e;
  background-color: rgba(0, 13, 110, 0.12);
}
.custom-radiobutton-container:focus input:checked ~ .custom-radiobutton-frame::after,
.custom-radiobutton-container:focus input:checked:focus ~ .custom-radiobutton-frame::after {
  background: white;
}
.custom-radiobutton-container:hover input:checked ~ label,
.custom-radiobutton-container:hover input:checked:focus ~ label {
  color: #0014aa;
}
/* control disabled and global error via js + class added on parent container, as styles will be applied on multiple layers; see forms/input-text/custom.js,
implemented js to track changes of HTML 'disabled' attribute */
/* Part of styles already covered in forms/input-text/styles.less, as also input */
.disabled-form-field input {
  pointer-events: none;
}
.disabled-form-field .custom-radiobutton-frame {
  background-color: #f6f6f6 !important;
  pointer-events: none;
  border-color: transparent!important;
}
.disabled-form-field .custom-radiobutton-frame::after {
  background: #747474;
  display: block;
}
/* Error Styling */
/* Part of styles already covered in forms/input-text/styles.less, as also input */
.error-form-field .custom-radiobutton-frame {
  background-color: #ebebeb !important;
  border-color: #ea1800 !important;
}
.error-form-field .custom-radiobutton-frame::after {
  display: none;
}
.error-form-field .custom-radiobutton-container input:checked ~ .custom-radiobutton-frame::after {
  background: #000d6e;
  display: block;
}
.checkbox-title {
  display: block;
}
.error-form-field ~ .checkbox-title {
  color: #ea1800 !important;
}
/* General Checkbox Styling */
/* disable default checkbox display */
input[type="checkbox"] {
  display: none;
}
/* correctly align content */
.custom-checkbox-container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-start;
}
/* accomodate spacing for custom checkbox in label */
.custom-checkbox-container label {
  padding-left: 30px;
  width: calc(100% - 30px);
  /* In BSI, the label cannot wrap around the input element,
as it is traditionally done when using custom checkbox for optimal
UX + styling. Hence, we have to position the checkbox label
above the .custom-checkbox-frame; otherwise the checkbox would
not be directly clickable */
  /* to assure that checkbox is always clickable (place label above) */
  z-index: 2;
  margin-left: -15px;
}
.custom-checkbox-container label:hover {
  cursor: pointer;
}
/* create custom checkbox frame */
.custom-checkbox-container .custom-checkbox-frame {
  background-color: white;
  width: 15px;
  height: 15px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  /* assure that checkbox is clickable (place below label) */
  z-index: 1;
}
/* create custom checkbox checked symbol */
.custom-checkbox-frame::after {
  content: "";
  width: 5px;
  height: 10px;
  transform: rotate(45deg);
  border-bottom: 2px solid black;
  border-right: 2px solid black;
  display: none;
  /* to assure that checkbox is clickable (place below label) also when checked */
  z-index: 1;
}
.custom-checkbox-container input:checked ~ .custom-checkbox-frame::after {
  display: block;
}
/* Baloise Checkbox Styling */
.baloise-checkbox-label {
  font-family: "Baloise Text Regular";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000d6e;
}
.custom-checkbox-container {
  margin-bottom: 15px;
}
.custom-checkbox-container .custom-checkbox-frame {
  border-radius: 4px;
  border: 2px solid #000d6e;
  height: 24px;
  width: 24px;
}
/* Hover */
.custom-checkbox-container label:hover ~ .custom-checkbox-frame,
.custom-checkbox-frame:hover {
  border-color: #0014aa;
}
.custom-checkbox-container label:hover {
  color: #0014aa;
}
/* Focus */
.custom-checkbox-container label:focus ~ .custom-checkbox-frame,
.custom-checkbox-container input:focus ~ .custom-checkbox-frame,
.custom-checkbox-frame:focus {
  border-color: #000739;
  background: #e8e8e8;
}
.custom-checkbox-container label:focus,
.custom-checkbox-container input:focus {
  color: #000739;
}
/* Checked */
.custom-checkbox-frame {
  align-items: center;
}
.custom-checkbox-container input:checked ~ .custom-checkbox-frame {
  background-color: #000d6e;
}
.custom-checkbox-frame::after {
  border-radius: 0 0 1px 0;
}
.custom-checkbox-container input:checked ~ .custom-checkbox-frame::after {
  border-bottom: 2px solid white;
  border-right: 2px solid white;
}
.custom-checkbox-frame::after {
  width: 7px;
  height: 14px;
  margin-bottom: 2px;
}
/* Active Hover */
.custom-checkbox-container:hover input:checked ~ .custom-checkbox-frame {
  border-color: #0014aa;
  background-color: #0014aa;
}
.custom-checkbox-container:hover input:checked ~ label {
  color: #0014aa;
}
/* Active Focus */
.custom-checkbox-container:focus input:checked ~ .custom-checkbox-frame,
.custom-checkbox-container:focus input:checked:focus ~ .custom-checkbox-frame {
  border-color: #000d6e;
  background-color: rgba(0, 13, 110, 0.12);
}
.custom-checkbox-container:focus input:checked ~ .custom-checkbox-frame::after,
.custom-checkbox-container:focus input:checked:focus ~ .custom-checkbox-frame::after {
  border-bottom: 2px solid #000d6e;
  border-right: 2px solid #000d6e;
}
.custom-checkbox-container:hover input:checked ~ label,
.custom-checkbox-container:hover input:checked:focus ~ label {
  color: #0014aa;
}
/* control disabled and global error via js + class added on parent container, as styles will be applied on multiple layers; see forms/input-text/custom.js,
implemented js to track changes of HTML 'disabled' attribute */
/* Part of styles already covered in forms/input-text/styles.less, as also input */
.disabled-form-field input {
  pointer-events: none;
}
.disabled-form-field .custom-checkbox-frame {
  background-color: #f6f6f6 !important;
  pointer-events: none;
  border-color: transparent!important;
}
.disabled-form-field .custom-checkbox-frame::after {
  border-bottom: 2px solid #747474 !important;
  border-right: 2px solid #747474 !important;
  display: block;
}
/* Error Styling */
/* Part of styles already covered in forms/input-text/styles.less, as also input */
.error-form-field .custom-checkbox-frame {
  background-color: #ebebeb !important;
  border-color: #ea1800 !important;
}
.error-form-field .custom-checkbox-container input:checked ~ .custom-checkbox-frame::after {
  border-bottom: 2px solid #000d6e !important;
  border-right: 2px solid #000d6e !important;
  display: block;
}
.c-form--default .baloise-form__select {
  width: 100%;
  border: 2px solid #e8e8e8;
  padding: 12px 11px;
  border-radius: 4px !important;
  background-color: #ffffff;
  color: #000d6e;
  font-family: "Baloise Text Regular";
  font-size: 16px;
  line-height: initial;
}
.c-form--default .baloise-form__select::placeholder {
  color: #666ea8;
  font-size: 16px;
  line-height: 24px;
  font-family: "Baloise Text Regular";
}
.c-form--default .baloise-form__select:hover,
.c-form--default .baloise-form__select:hover::placeholder {
  color: #0014aa;
  background-color: #f6f6f6;
}
.c-form--default .baloise-form__select:focus,
.c-form--default .baloise-form__select:focus::placeholder {
  color: #000739;
  background-color: #f6f6f6;
}
.c-form--default .baloise-form__select:focus {
  border-color: #000739;
}
.custom-select-container {
  position: relative;
}
.custom-select-container i {
  position: absolute;
  right: 22px;
  top: 55px;
  color: #000d6e;
}
.disabled-form-field select,
.disabled-form-field .custom-select-container i {
  color: #747474 !important;
}
.disabled-form-field select {
  background-color: #f6f6f6 !important;
  pointer-events: none;
}
/* Error Styling; majority already in forms/input-text/template.twig */
.error-form-field label,
.error-form-field .form-field-helper-text {
  color: #ea1800 !important;
}
.error-form-field select {
  border-color: #ea1800 !important;
  background-color: #fde8e6 !important;
}
.error-form-field .custom-select-container i {
  color: #ea1800 !important;
}
div > .disclaimer-checkbox-title::after {
  content: "*";
  color: #000d6e;
  padding: 0 0 0 5px;
  background: none;
  border: none;
  margin: 0;
}
/* generally used form stylings */
textarea {
  resize: none;
}
/* increased padding for select to have same appearance as input fields */
select {
  padding: 10px 10px;
}
select::-ms-expand {
  display: none;
}
*:-moz-focusring {
  outline: none;
}
*:focus {
  outline: none;
}
select:hover {
  cursor: pointer;
}
input[type="submit"] {
  color: white;
  padding: 10px 20px;
  border-radius: 0;
  font-size: 16px;
  margin: 20px 0;
  transition: border-color 0.5s, color 0.5s, background 0.5s;
}
input[type="submit"] {
  background: red;
  border: 3px solid red;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
  color: red;
  border-color: red;
  background-color: white;
}
input[type="submit"]:hover {
  cursor: pointer;
}
/* to ensure same perceived size of these fields, 48px height is actually figma height */
input:not([type="submit"]):not([type="reset"]),
select {
  height: 48px;
}
/* Reverse for Required Styles */
.reverse-for-required {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}
/* spacing needed due to reversing */
.reverse-for-required > label {
  margin-bottom: 3px;
}
input:not([id="disclaimer-checkbox"]):not([type="radio"]):required ~ label::after,
select:required ~ label::after,
textarea:required ~ label::after {
  content: "*";
  color: #000d6e;
  padding-left: 5px;
}
/* General Form Label + Field Styling */
.baloise-form-label {
  font-family: "Baloise Text Bold";
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  color: #000d6e;
  padding-bottom: 8px;
}
/*
disabled as tooltip is not needed according to request; if needed, only need to re-enable this rule

.baloise-form-label::after {
    content: "i";
    margin-left: 10px;
    background: @styles[core_blue];
    color: white;
    padding: 0px 8px;
    border: 1px solid @styles[core_blue];
    border-radius: 16px;
    width: 14px;
    height: 14px;
}
*/
.baloise-form-field {
  border: 2px solid #e8e8e8;
  padding: 12px 16px;
  border-radius: 4px!important;
  background-color: #ffffff;
  color: #000d6e;
  font-family: "Baloise Text Regular";
  font-size: 16px;
  line-height: 24px;
}
.baloise-form-field::placeholder {
  color: #666ea8;
  font-size: 16px;
  line-height: 24px;
  font-family: "Baloise Text Regular";
}
.form-field-helper-text {
  font-size: 12px;
  line-height: 16px;
  color: #666ea8;
  font-family: "Baloise Text Regular";
  padding-top: 5px;
  margin-bottom: 15px!important;
}
.baloise-form-field:hover,
.baloise-form-field:hover::placeholder {
  color: #0014aa;
  background-color: #f6f6f6;
}
.baloise-form-field:focus,
.baloise-form-field:focus::placeholder {
  color: #0014aa;
  background-color: #f6f6f6;
}
.baloise-form-field:focus {
  border-color: #000d6e;
}
/* control disabled and global error via js + class added on parent container, as styles will be applied on multiple layers; see custom.js,
implemented js to track changes of HTML 'disabled' attribute */
.disabled-form-field input::placeholder,
.disabled-form-field input,
.disabled-form-field label,
.disabled-form-field textarea,
.disabled-form-field .form-field-helper-text {
  color: #747474 !important;
}
.disabled-form-field input {
  background-color: #f6f6f6 !important;
  pointer-events: none;
}
/* Error Styling */
.error-form-field label,
.error-form-field .form-field-helper-text {
  color: #ea1800 !important;
}
.error-form-field input,
.error-form-field textarea {
  border-color: #ea1800 !important;
  background-color: #fde8e6 !important;
}
.error-form-field input::placeholder {
  color: #000d6e !important;
  opacity: 1;
  /* needed in Firefox */
}
/* All provided in forms/input-text/styles.less */
/* All provided in forms/input-text/styles.less */
/* As based on a checkbox, most of the styles are already provided in forms/form-checkbox/styles.less */
.switch-container {
  height: 24px;
  width: 40px;
  background: rgba(0, 13, 110, 0.1);
  border-radius: 40px;
  position: relative;
  padding: 0 4px;
  transition: background 0.5s;
}
.switch-toggle {
  height: 16px;
  width: 16px;
  background: #666ea8;
  border-radius: 40px;
  display: block;
  position: absolute;
  top: 4px;
  right: 20px;
  transition: right 0.5s;
}
/* Assure that switch is toggleable by clicking on switcher itself (broader as checkbox, so need to account for that */
.custom-checkbox-container .switch-label {
  padding-left: 50px;
  width: calc(100% - 50px);
  margin-left: -35px;
}
/* Hover */
.custom-checkbox-container:hover .switch-toggle {
  background: #0014aa;
}
.custom-checkbox-container:hover .baloise-checkbox-label {
  color: #0014aa;
}
/* Focus (label focus already done in forms/form-checkbox/styles.less) */
.custom-checkbox-container input:focus ~ .switch-container .switch-toggle {
  background: #000d6e;
  transition: background 0.5s;
}
.custom-checkbox-container input:focus ~ label {
  color: #0014aa;
}
/* Checked */
.custom-checkbox-container input:checked ~ .switch-container .switch-toggle {
  right: 4px;
  background: #fff;
}
.custom-checkbox-container input:checked ~ .switch-container {
  background: #158841;
}
/* Checked + Hover */
.custom-checkbox-container:hover input:checked ~ .switch-container {
  background: #116b34;
}
/* Checked + Focus */
.custom-checkbox-container input:checked:focus ~ .switch-container {
  background: #0c5227;
}
/* control disabled and global error via js + class added on parent container, as styles will be applied on multiple layers; see forms/input-text/custom.js,
implemented js to track changes of HTML 'disabled' attribute */
/* Part of styles already covered in forms/input-text/styles.less, as also input */
.disabled-form-field .custom-checkbox-container {
  pointer-events: none;
}
.disabled-form-field .switch-container {
  background-color: #f6f6f6 !important;
  transition: none;
}
.disabled-form-field .switch-toggle {
  transition: none;
  right: 4px;
  background: #747474 !important;
  pointer-events: none;
}
.error-form-field .switch-toggle {
  transition: none;
  background: #ea1800 !important;
}
/* All provided in forms/input-text/styles.less; except from calendar styles */
.date-field-wrapper {
  position: relative;
}
.date-picker-buttons {
  display: flex;
  width: 100%;
  max-width: 384px;
}
.date-picker-selects-container {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}
.fa-angle-down,
.fa-angle-right,
.fa-angle-left {
  font-size: 11px;
}
select {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}
.date-picker-calendar {
  margin-top: 20px;
  font-family: "Baloise Text Regular";
  color: #000d6e;
  border-spacing: 4px;
  border-collapse: separate;
}
.date-picker-calendar td:hover {
  border: 1px solid #000d6e;
  cursor: pointer;
  color: #0014aa;
}
.date-picker-calendar .date-picker-selected-day {
  background: #000d6e;
  color: #fff;
}
.date-picker-calendar .date-picker-selected-day:hover {
  background: #fff;
  color: #0014aa;
  cursor: pointer;
}
.date-picker-calendar .date-picker-day-disabled-date {
  background: transparent;
  color: #747474;
  opacity: 0.5;
  pointer-events: none;
}
.previous-month:hover,
.next-month:hover,
.date-picker-month-selector:hover,
.date-picker-year-selector:hover,
.previous-month:focus,
.next-month:focus,
.date-picker-month-selector:focus,
.date-picker-year-selector:focus {
  cursor: pointer;
  border: 1px solid #000d6e;
}
/* Responsiveness Datepicker */
.date-picker-month-select-container {
  width: 65px;
  margin-right: 2px;
  position: relative;
}
.date-picker-year-select-container {
  width: 80px;
  margin-left: 2px;
  position: relative;
}
.date-picker-month-selector,
.date-picker-year-selector {
  background-color: #fff;
  font-family: "Baloise Headline Bold";
  font-size: 16px;
  color: #000d6e;
  width: 100%;
  height: 100%;
  border: 1px solid #fff;
  border-radius: 4px;
  padding: 0 0 0 10px;
}
.date-picker-inner-select-container {
  height: 32px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid transparent;
}
.date-picker-calendar td {
  /* The style specs mention 32x32, but this gets way to small and hampers UX, hence increased to 36x36, resulting in a total width of 304px for mobile screens for the date picker, still being ok for the assumption of the smallest screen being 320px  */
  width: 36px;
  height: 36px;
  background: #fff;
  border-radius: 4px;
  vertical-align: middle;
  text-align: center;
  color: #000d6e;
  font-size: 14px;
}
.date-picker-calendar tr:first-of-type th {
  padding-bottom: 20px;
  font-size: 14px;
}
.date-picker-buttons span {
  height: 32px;
  width: 32px;
  border-radius: 80px;
  border: none;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.date-picker-container {
  background: #ebebeb;
  padding: 10px;
  border-radius: 4px;
  width: 304px;
  position: absolute;
  z-index: 11;
  top: 90px;
}
.date-picker-inner-select-container .fa {
  position: absolute;
  top: 11px;
  right: 10px;
}
/* In table view, the date picker rearranger has a passive role */
#date-picker-rearranger {
  display: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 769px) {
  .date-picker-month-selector,
  .date-picker-year-selector {
    font-size: 20px;
  }
  .date-picker-calendar td,
  .date-picker-calendar th {
    font-size: 18px;
  }
  .date-picker-calendar td {
    width: 50px;
    height: 44px;
  }
  .date-picker-buttons span {
    width: 44px;
    height: 44px;
  }
  .date-picker-container {
    width: 430px;
    padding: 20px;
  }
  .date-picker-inner-select-container {
    height: 44px;
  }
  .date-picker-inner-select-container .fa {
    top: 16px;
  }
  .date-picker-month-select-container {
    width: 75px;
  }
  .date-picker-year-select-container {
    width: 90px;
  }
}
@media (max-width: 350px) {
  #date-picker-rearranger {
    position: absolute;
    top: 0px;
    width: 100%;
    margin-left: -17%;
    z-index: 3;
  }
}
/* All provided in forms/input-text/styles.less */
/* 
Styles shared across all titles of the 'headings' group
The Bold and Light Variants Are applied in the same way onto all the headings; hence styled here
*/
.bold-title-version .element-holding-title {
  font-family: 'Baloise Headline Bold';
  font-style: normal;
  font-weight: 700;
  color: #000d6e;
}
.light-title-version .element-holding-title {
  font-family: 'Baloise Headline Light';
  font-style: normal;
  font-weight: 350;
  color: #000d6e;
}
/* 'title-h2' specific styles */
/* mobile first */
.title-h2 h2 {
  font-size: 28px;
  line-height: 32px;
}
/* same for tablet & desktop */
@media (min-width: 769px) {
  .title-h2 h2 {
    font-size: 40px;
    line-height: 48px;
  }
}
/* mobile first */
.title-h2-large h2 {
  font-size: 28px;
  line-height: 32px;
}
/* same for tablet & desktop */
@media (min-width: 769px) {
  .title-h2-large h2 {
    font-size: 40px;
    line-height: 48px;
  }
}
/* mobile first */
.title-h3 h3 {
  font-size: 24px;
  line-height: 32px;
}
/* same for tablet & desktop */
@media (min-width: 769px) {
  /* font sizes differ from light vs bold in this case */
  .bold-title-version.title-h3 h3 {
    font-size: 32px;
    line-height: 40px;
  }
  .light-title-version.title-h3 h3 {
    font-size: 32px;
    line-height: 48px;
  }
}
/* mobile first */
.title-h3-large h3 {
  font-size: 24px;
  line-height: 32px;
}
/* same for tablet & desktop */
@media (min-width: 769px) {
  /* font sizes differ from light vs bold in this case */
  .bold-title-version.title-h3-large h3 {
    font-size: 32px;
    line-height: 40px;
  }
  .light-title-version.title-h3-large h3 {
    font-size: 32px;
    line-height: 48px;
  }
}
/* mobile first */
.title-h4 h4 {
  font-size: 20px;
  line-height: 24px;
}
/* same for tablet & desktop */
@media (min-width: 769px) {
  .title-h4 h4 {
    font-size: 24px;
    line-height: 32px;
  }
}
/* mobile first */
.title-h4-large h4 {
  font-size: 20px;
  line-height: 24px;
}
/* same for tablet & desktop */
@media (min-width: 769px) {
  .title-h4-large h4 {
    font-size: 24px;
    line-height: 32px;
  }
}
/* Same across all devices */
.title-h5 h5 {
  font-size: 16px;
  line-height: 24px;
}
/* Same across all devices */
.title-h5-large h5 {
  font-size: 16px;
  line-height: 24px;
}
/* applied to all button variants */
.cta-element.cta-element-for-button .cta-element-link {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  gap: 10px;
  font-family: "Baloise Headline Bold";
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  border-radius: 4px;
  text-decoration: none;
  margin-bottom: 5px;
}
.cta-element-link-container {
  margin-top: 8px!important;
}
.cta-element.cta-element-for-button {
  text-align: unset;
}
.cta-element a.cta-element-link[disabled],
.cta-element input.cta-element-link[disabled] {
  color: #747474;
  border: 2px solid #e8e8e8;
  background: #e8e8e8;
}
.cta-element .cta-element-link-container {
  display: flex;
  align-items: center;
  flex-direction: row;
}
/* Tablet */
@media (min-width: 769px) {
  .cta-element .cta-element-link {
    padding: 6px 24px;
  }
}
/* primary */
.primary-cta .cta-element-link {
  background: #000d6e;
  color: #ffffff;
  border: 2px solid #000d6e;
}
.primary-cta .cta-element-link:hover {
  background: #0014aa;
  border: 2px solid #0014aa;
  color: #ffffff;
}
.primary-cta .cta-element-link:focus {
  background: #000739;
  border: 2px solid #000739;
  color: #ffffff;
  /* No flying focus state; client agreed */
  outline: none;
}
/* secondary */
.secondary-cta .cta-element-link {
  background: #ffffff;
  color: #000d6e;
  border: 2px solid #000d6e;
}
.secondary-cta .cta-element-link:hover {
  background: #e5f1fe;
  border: 2px solid #0014aa;
  color: #0014aa;
}
.secondary-cta .cta-element-link:focus {
  background: #e5f1fe;
  border: 2px solid #000739;
  color: #000739;
  /* No flying focus state; client agreed */
  outline: none;
}
/* tertiary */
.tertiary-cta .cta-element-link {
  background: #ffffff;
  color: #000d6e;
  border: 2px solid #ffffff;
}
.tertiary-cta .cta-element-link:hover {
  background: #a7d1fa;
  border: 2px solid #a7d1fa;
  color: #000d6e;
}
.tertiary-cta .cta-element-link:focus {
  background: #0014aa;
  border: 2px solid #0014aa;
  color: #ffffff;
  /* No flying focus state; client agreed */
  outline: none;
}
/* Alignments (Not provided until now, but most likely useful */
.cta-align-center .cta-element-link-container {
  justify-content: center;
}
.cta-align-left .cta-element-link-container {
  justify-content: flex-start;
}
.cta-align-right .cta-element-link-container {
  justify-content: flex-end;
}
.content__headline {
  margin-bottom: 8px!important;
}
/* font-style:normal ommitted here to still provide possibility of underlined / cursive text, configured via text edit */
.bold-text-version .formatted-text-content-container {
  font-family: "Baloise Text Bold";
  font-weight: 700;
  color: #000d6e;
}
.regular-text-version div .bold-text-version div {
  margin-bottom: 15px;
}
.regular-text-version .formatted-text-content-container {
  font-family: "Baloise Text Regular";
  font-weight: 350;
  color: #000d6e;
  margin-bottom: 5px;
}
.regular-text-version div b,
.regular-text-version div strong {
  font-weight: 700;
}
.regular-text-version ul,
.bold-text-version ul,
.regular-text-version ol,
.bold-text-version ol {
  list-style-position: outside !important;
  padding-left: 16px;
}
.teaser-column > div {
  height: 100%;
}
.teaser-column > div > div {
  height: 100%;
  justify-content: flex-start;
}
.teaser-column > div > div > div:last-child {
  flex-grow: 1;
  display: flex;
  align-items: flex-end;
}
.image-teaser-group-col-new-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}
.teaser-group-col-new-image {
  width: 100%;
  height: auto;
  border-radius: 15px;
}
/* Prevent CSS transform initially present in element */
.c-image-teaser--default:hover img {
  transform: none;
}
.image-teaser-group-col-new-dropzone,
.image-teaser-group-col-new-dropzone > * {
  width: 100%;
}
.accordion__btn .accordion__btn-inner {
  font-family: "Baloise Text Regular";
  font-weight: 350;
  color: #000d6e;
}
.footer {
  padding-top: 80px;
}
.footer .footer__metalist {
  padding-top: 90px;
  background-color: #000d6e;
}
.footer .footer__metalist-linklist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 40px 0;
  list-style: none;
}
@media only screen and (min-width: 960px) {
  .footer .footer__metalist-linklist {
    margin: 50px 0;
  }
}
@media only screen and (max-width: 719px) {
  .footer .footer__metalist-linkitem {
    flex: 1 1 50%;
    text-align: center;
  }
}
@media only screen and (min-width: 720px) and (max-width: 959px) {
  .footer .footer__metalist-linkitem {
    text-align: center;
  }
}
@media only screen and (min-width: 720px) {
  .footer .footer__metalist-linkitem {
    margin-right: 30px;
  }
}
.footer .footer__metalist-linkitem:last-child {
  margin-right: 0;
}
.footer .footer__metalist-link {
  font-family: "Baloise Text Regular", Arial, sans-serif;
  font-weight: 400;
  text-transform: none;
  font-size: 12px;
  line-height: 16px;
  color: #fff;
  text-decoration: none;
}
@media only screen and (min-width: 720px) and (max-width: 959px) {
  .footer .footer__metalist-link {
    font-size: 12px;
    line-height: 16px;
  }
}
@media only screen and (min-width: 960px) {
  .footer .footer__metalist-link {
    font-size: 15px;
    line-height: 20px;
  }
}
.footer .footer__metalist-link:active,
.footer .footer__metalist-link:focus,
.footer .footer__metalist-link:hover {
  text-decoration: underline;
}
.footer-logo {
  margin-bottom: 50px;
}
.footer-social {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
}
.footer-social a {
  margin: 0 20px;
}
.footer-navigation {
  display: block;
  padding: 16px 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
.footer-navigation .footer-navigation__link {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.footer-navigation .footer-navigation__link a {
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  line-height: 24px;
  font-family: "Baloise Headline Bold", Arial, sans-serif;
}