:root
{
  /* Text href */  
  --color_text_href: #efc143;
  --color_text_href_underline: rgba(239,193,67,0.7);
  /* Body */
  --color_body_background: #ffffff;
  /* Text colors */  
  --color_headline: #386a94;
  --color_bold: #292e33;
  --color_light: #404040;
  --color_error : #ff0000;
  --color_container_headline: #2d3338;
  --color_headline_tile: #31373d;
  /* Buttons */
  --color_button: #ffffff;
  --color_button_background: #efc143;
  --color_button_disabled_background: #d0d0d0;
  --border_radius_buttons: 5px;  
  /* Progress bar */
  --color_progress_bar: #386a94;
  --color_progress_bar_background: #c0c0c0;
  /* Cookie banner */
  --color_cookie_hints: #ffffff;
  --color_cookie_hints_background: #2b5273;
  /* Login form */
  --color_login_form_background: #f0f0f0;
  --color_login_form_email: #e56606;
  --color_login_animation: #f2b212;
  --color_login_animation: #efc143;
  --shadow_login_input: rgba(230,182,50,0.75);
  /* Upload form */
  --color_upload_form_background: #f4f4f4;
  /* Menu */
  --color_menu: #386a94;
  --color_active_menu: #f2b212;
  --color_menu_hover: #20b0e4;
  --color_offcanvas_menu: #386a94;
  --color_offcanvas_text: #ffffff;
  /* Body start */
  --color_header_background: #f8f8f8;
  --color_body_1_background: #f8f8f8;
  --color_body_2_background: #ffffff;
  --color_body_3_background: #f8f8f8;
  /* Full width container */
  --color_page_light_background: #ffffff;
  --color_page_dark_background: #f4f4f4;
  /* Footer */
  --color_footer: #ffffff;
  --color_line_footer: #ffffff;
  --color_footer_background: #386a94;
  /* Lines */
  --color_line_common: #d0d0d0;
  /* Misc */
  --color_border_inputs: #e0e0e0;
}

/* Local Google fonts*/
@font-face
{
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v40-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
 
@font-face
{
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/open-sans-v40-latin-500.woff2') format('woff2'),  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v40-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
 
@font-face
{
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v40-latin-600.woff2') format('woff2'),  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/open-sans-v40-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
 
/* Text colors */
h1, h2, h3, h4
{
  color: var(--color_headline);
}

/* Text styles */
.text_href, .text_href_label
{
  color: var(--color_text_href) !important;
  font-weight: 500;
}

.text_href_bw
{
  color: var(--bs-body-color);
}

.text_href_link 
{
  position: relative;
  left: 1.1rem !important;
  color: var(--color_text_href) !important;
  font-weight: 500;
}

.text_href_link::before  
{
  content: '';
  position: absolute;
  background: url('pictograms/link.png') no-repeat left center/cover;
}

.cookie_href
{
  color: var(--color_footer) !important;
  text-decoration: none !important;
}

.href_mail, .href_mail_footer, .href_phone_footer
{
  position: relative;
  left: 1.6rem;
}

.href_mail::before, .href_mail_footer::before, .href_phone_footer::before
{
  content: '';
  position: absolute;
  left: -1.6rem;
}

.href_mail::before
{
  background: url('pictograms/mail.png') no-repeat left center/cover;
}

.href_mail_footer::before
{
  background: url('pictograms/mail_footer.png') no-repeat left center/cover;
}

.href_phone_footer::before
{
  background: url('pictograms/phone_footer.png') no-repeat left center/cover;
}

.text_href_hover
{
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine)
{
  .text_href_hover:hover
  {
    text-underline-offset: 5px !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: var(--color_text_href_underline) !important;
  }

  .text_href_bw_hover:hover
  {
    color: var(--bs-body-color) !important;
    text-underline-offset: 5px !important;
    text-decoration: underline !important;
  }

  .cookie_href_hover:hover
  {
    text-underline-offset: 5px !important;
    text-decoration: underline !important;
  }
}

.text_href_touch
{
  color: var(--color_text_href) !important;
  text-underline-offset: 5px !important;
  text-decoration: underline !important;
}

.text_href_footer_hover
{
  color: var(--text_color_footer) !important;
}

@media (hover: hover) and (pointer: fine)
{
  .text_href_footer_hover:hover
  {
    color: var(--text_color_footer) !important;
    text-underline-offset: 5px;
    text-decoration: underline;
  }
}

.text_href_footer_touch
{
  text-underline-offset: 5px !important;
  text-decoration: underline !important;
}

#sp-bottom
{
  padding-top: 2px;
  background-color: var(--color_footer_background) !important;
  background-image: none !important;
}

#sp-footer
{
  background-color: var(--color_footer_background) !important;
  padding-top: 0px;
  padding-bottom: 0.1rem;
}

#sp-component
{
  margin-top: 0.5rem;
  margin-bottom: 1.0rem;
}

.text_highlight
{
  color: var(--color_bold);
  font-weight: bold;
  font-weight: 600;
}

.text_error_highlight
{
  color: var(--color_error);
  font-weight: bold;
}

/* Lines */
hr.hr_footer
{
  opacity: 0.75;
  border-top: 1.5px solid var(--color_line_footer);
  margin-bottom: 0.75rem;
}

/* Custom lists */
li::marker
{
  content: '\f0da\00a0\00a0';
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  color: var(--color_maker_li);
}

/* Start page */
#sp-header
{
  background-color: var(--color_header_background);
}

#sp-main-body-1
{
  background-color: var(--color_body_1_background);
}

#sp-main-body-2
{
  background-color: var(--color_body_2_background);
}

#sp-main-body-3
{
  background-color: var(--color_body_3_background);
}

.container_spacer_bottom
{
  height: calc(35px + 5 * (100vw - 320px) / 320);
}

.container_spacer_bottom_ext
{
  height: calc(45px + 5 * (100vw - 320px) / 320);
}

.menu_start_container
{
  margin-bottom: 1rem;
  padding-bottom:  0.4rem;
}

.blog-featured article.item
{
  margin-bottom: 100px;
}

@media (hover: hover) and (pointer: fine)
{
  .link_faq_password
  {
    cursor: pointer;
  }
}

/* Page contents */
.headline_section
{
  padding-top: 2.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.headline_section_top
{
  padding-top: 0.5rem !important;
}

.section_text
{
  padding-bottom: 1.0rem;
  text-align: center !important;
  color: var(--color_headline_tile) !important;
}

@media (min-width: 992px)
{
  .section_text
  {
    padding-bottom: 1.5rem !important;
  }
}

.container_full_width_light
{
  background-color: var(--color_page_light_background);
  margin: 0 -500%;
  padding: 1rem 500% 0.2rem 500% !important;
}

.container_full_width_dark
{
  background-color: var(--color_page_dark_background);
  margin: 0 -500%;
  padding: 1rem 500% 0.2rem 500% !important;
}

.container_full_width_bottom
{
  padding-bottom: 0px !important;
}

/* Bottom */
#sp-bottom .container
{
  padding-top: 45px;
  padding-bottom: 15px;
}

.container_link_bottom
{
  display: inline-block;
}

.link_bottom
{
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding-left: 18px !important;
  color: var(--color_footer) !important;
  margin-right: 30px;
  -webkit-transition: padding 0.25s;
  -moz-transition: padding 0.25s;
  transition: padding 0.25s;
}

#sp-bottom a, .link_bottom a
{
  color: var(--color_footer) !important;
  overflow: hidden;
}

.link_bottom::before
{
  content: '';
  position: absolute;
  left: 0px;
  background: url('pictograms/link_bottom.png') no-repeat left center/cover;
}

.link_bottom a::after
{
  content: '';
  position: absolute;
  bottom: -13px;
  left: 14px;
  width: calc(100% - 14px);
  height: 2px;
  background-color: var(--color_footer);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
  transform: scaleX(0);
  transform-origin: center;
}

@media (hover: hover) and (pointer: fine)
{
  .link_bottom a:hover::after, .link_bottom a:focus::after
  {
    opacity: 1;
    transform: translate3d(0, 0.2em, 0);
    transform: scaleX(1);
  }
}

.text_footer, .text_footer_bottom
{
  text-align: left;
  color: var(--color_footer);
  margin-bottom: 0px !important;
}

.text_footer_margin_bottom
{
  margin-bottom: 0.2rem !important;
}

.text_footer_bottom
{
  padding-bottom: 15px !important;
}

@media (min-width: 768px)
{
  .text_align_right_md
  {
    text-align: right;
  }
}

/* Login and upload forms */
.hidden
{
  display: none !important;
}

@media (min-width: 992px)
{
  .login_col_padding_right
  {
    padding-right: 30px;
  }

  .upload_col_padding_right
  {
    padding-right: 20px;
  }

  .login_col_padding_left, .upload_col_padding_left
  {
    padding-left: 20px;
  }

  .participant_col_padding_left
  {
    padding-left: 40px;
  }
}

.container_headline
{
  padding: 0.2rem 0px 1.2rem 0px;
  color: var(--color_container_headline);
}

.container_login_form
{
  background-color: var(--color_login_form_background);
  padding: 15px 20px 15px 20px;
}
 
.container_upload_form
{
  background-color: var(--color_upload_form_background);
  padding: 15px 20px 15px 20px;
}
 
.login_button, .upload_button, .clear_button, .progress_button, .perform_checks_button, .send_account_button, .send_reminder_button, .query_cancel_button, .query_ok_button
{
  display: inline-block;
  position: relative;
  color: var(--color_button);
  background-color: var(--color_button_background);
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  border: none;
  border-radius: var(--border_radius_buttons);
}

.perform_checks_button, .send_account_button, .send_reminder_button
{
  margin-top: 5px;
  margin-bottom: 0px;
}

.button_row_spacer
{
  height: 0.5rem;
}

label, input, textarea, .text_href_label
{
  font-size: 0.9rem !important;
  line-height: 1.3rem !important;
}

textarea, input
{
  color: var(--color_light) !important;
}

input[type="text"]:focus, input[type="password"]:focus
{
  -webkit-box-shadow: 0px 0px 4px 0px var(--color_text_href);
  box-shadow: 0px 0px 4px 0px var(--shadow_login_input);
}

.container_label_multi_line
{
  margin: 1.4rem 0px 1.4rem 0px;
  position: relative;
  display: flex;
  width: 100%; 
}

.label_multi_line
{
  font-size: 0.9rem !important;
  line-height: 0.9rem !important;
  display: inline-block; 
  position: relative;
  top: -1px;
  width: 90%; 
  margin-left: 8px;
}

@media (max-width: 1320px)
{
  .label_multi_line
  {
    top: 0px;
  }
}

.input_disabled
{
  cursor: not-allowed !important;
}

@media(hover: hover) and (pointer: fine)
{
  .input_disabled:hover
  {
    cursor: not-allowed !important;
  }
}

.login_notify_conditions
{
  height: 1.3rem !important;
}

.login_notify_conditions:checked::before
{
  content: '';
  position: relative;
  display: inline-block;
  background: url('pictograms/checkmark.png') no-repeat left center/cover;
  width: 18px;
  height: 18px;
}

.login_verify, .login_verify_label
{
  display: none;
}

.container_password
{
  position: relative;
  width: 100%;
}

.show_hide_password
{
  position: absolute;
  z-index: 10;
  font-size: 1.0rem !important;
  right: 5px;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transition: translateY(-50%);
  transform: translateY(-50%);
  cursor: pointer;
}

.show_password::before
{
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: " \f06e";
}

.hide_password::before
{
  font-family: "Font Awesome 5 Free";
  font-weight: 400;
  content: " \f070";
}

.login_notify_conditions
{
  -moz-appearance: none;
  -webkit-appearance: none;
  -o-appearance: none;
  overflow: hidden;
  border-radius: 5px;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0; 
  background-color: var(--color_body_background);
  border: 1.5px solid var(--color_border_inputs) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.login_account_password
{
  border: 1.5px solid var(--color_border_inputs) !important;
  margin: 0.2rem 0px 0.8rem 0px;
}

.login_border_highlight
{
  border: 1.5px solid var(--color_error) !important;
}

.login_highlight, .popup_highlight 
{
  color: var(--color_error) !important;
}

.container_files_upload
{
  position: relative;
  width: 100%;
  height: 250px;
}

.container_upload_bottons
{
  position: relative;
  width: 100%;
}

.select_files_upload
{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}

.list_files_webspace, .list_files_upload
{
  padding: 10px;
  width: 100%;
  height: 250px;
  resize: none;
  background-color: var(--color_body_background) !important;
  cursor: default !important;
  border: none !important;
}

.list_files_upload
{
  position: absolute;
  z-index: 1;
}

.list_files_upload_info_text
{
  text-align:center;
  font-weight:600;
  padding: 0px 10% 0px 10%;
}

.webspace_summary
{
  display: inline-block;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 4px 0px 4px 0px;
}

/* Progress bar */
.upload_progress_popup
{ 
  background: var(--color_body_background);
  z-index: 9995;
  position: fixed;
  left: 50%; 
  top: 25%;
  transform: translate(-50%, -25%);
  padding: 1.5rem 2rem 2rem 2rem;
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
  -moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
  display: none;
  width: 95vw;
  max-width: 800px;
  height: auto;
}

.upload_progress_container
{
  position: relative;
  width: 100%;
  height: 100%;
}

.upload_progress_headline
{
  margin-bottom: 1.5rem;
  text-align: center;
}

.upload_progress_bar
{
  position: relative;
  left: 0px;
  width: 100%;
  height: 30px;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  background-color: var(--color_body_background);
}

.upload_progress_bar_frame
{
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--color_progress_bar_background);
}

.upload_progress_bar_slider
{
  position: absolute;
  z-index: 2;
  left: 0px;
  top: 0px;
  width: 0%;
  height: 100%;
  background-color: var(--color_progress_bar);
}

.upload_progress_bar_text
{
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--color_body_background);
}

.progress_fade_out
{
  opacity: 0.0;
  -webkit-transition: opacity 1s;
  -ms-transition: opacity 1s;
  transition: opacity 1s; 
}

.progress_fade_in
{
  opacity: 1.0;
  -webkit-transition: opacity 1s;
  -ms-transition: opacity 1s;
  transition: opacity 1s; 
}

.progress_button
{
  margin-top: 20px;
  margin-bottom: 0px;
  float: right;
}

/* Buttons */
.button_wide
{
  padding: 4px 3.0rem 4px 3.2rem;
}

.button_animated, .button_disabled
{
  padding: 4px 1.3rem 4px 2.2rem;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

.button_wide_animated, .button_sm_wide_animated, .button_wide_disabled
{
  padding: 4px 2.8rem 4px 3.0rem;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

@media (max-width: 577px) 
{
  .button_sm_wide_animated
  {
    padding: 4px 1.5rem 4px 2.4rem;
  }
}

.button_disabled, .button_wide_disabled
{
  background-color: var(--color_button_disabled_background);
  cursor: not-allowed !important;
}

.button_animated::after, .button_wide_animated::after, .button_sm_wide_animated::after, .button_disabled::after, .button_wide_disabled::after
{
  position: relative;
  content: "\f054";
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  left: -20px;
  opacity: 0;
} 

@media (hover: hover) and (pointer: fine)
{
  .button_animated:hover
  {
    padding-left: 1.3rem;
    padding-right: 2.2rem;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  .button_wide_animated:hover, .button_sm_wide_animated:hover
  {
    padding-left: 2.5rem;
    padding-right: 3.3rem;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  @media (max-width: 577px) 
  {
    .button_sm_wide_animated:hover
    {
      padding: 4px 2.0rem 4px 1.9rem;
      -webkit-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
    }
  }

  .button_animated:hover::after, .button_wide_animated:hover::after, .button_sm_wide_animated:hover::after
  {
    opacity: 1;
    left: 0.7rem;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
  }

  .button_disabled:hover
  {
    cursor: default;
  }
}

.button_hover_size_opacity  
{
  position: absolute;
  z-index: 1000;
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  transition: opacity 0.2s;
  transform: scale(1.0);
  -webkit-transition: transform 0.2s;
  -moz-transition: transform 0.2s;
  transition: transform 0.2s; 
}

@media(hover: hover) and (pointer: fine)
{
  .button_hover_size_opacity:hover
  {
    cursor: pointer;
    opacity: 1.0;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    transition: opacity 0.2s;
    transform: scale(1.05);
    -webkit-transition: transform 0.2s;
    -moz-transition: transform 0.2s;
    transition: transform 0.2s; 
  }
}

.button_align_right
{
  float: right;
}

/* Dot animation */
.form_animation
{
  position: fixed;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -30%);
  width: 100px;
  z-index: 9998;
  visibility: hidden;
}

.form_animation .animation_dot
{
  width: 25px;
  height: 25px;
  background-color: var(--color_login_animation);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: keyframe_scale_dot 1.5s infinite;
  animation: keyframe_scale_dot 1.5s infinite;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.form_animation .dot_2
{
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
}

.form_animation .dot_3
{
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

@-webkit-keyframes keyframe_scale_dot
{
  0%, 80%, 100%
  {
    -webkit-transform: scale(0);
  }
  40%
  {
    -webkit-transform: scale(1);
  }
}

@keyframes keyframe_scale_dot
{
  0%, 80%, 100%
  { 
    transform: scale(0);
  }
  40%
  { 
    transform: scale(1);
  }
}

/* Cookie popup */
#cookie_hints_popup
{ 
  position: fixed;
  width: 100%;
  left: 0px; 
  bottom: 0px;
  z-index: 9998;
  text-align: left;
  background-color: var(--color_cookie_hints_background);
}

.cookie_hints_button
{
  display: inline-block;
  position: relative;
  color: var(--color_cookie_hints_background);
  background-color: var(--color_cookie_hints);
  cursor: pointer;
  margin: 0px 0px 20px 18px;  
  border-radius: var(--border_radius_buttons);
}

.cookie_hints_text
{ 
  padding: 16px 16px 8px 16px;
  color: var(--color_cookie_hints);
  margin-right: 0px;
}

#cookie_hints_popup.hidden
{
  display: none;
}

.cookie_hints_button_touch
{
  color: var(--color_cookie_hints);
  background-color: var(--color_cookie_hints_background);
  box-shadow: 0px 0px 0px 1px var(--color_cookie_hints) inset;
}

/* Images */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
  .sp-default-logo, .sp-mobile-logo, .sp-retina-logo, .render_img
  {
    image-rendering: -webkit-optimize-contrast !important;
  }
}

.render_img
{
  position: relative;
  z-index: 2;
}

/* Accordion */
.accordion_container
{
  position: relative;
  border-top: 1.5px solid var(--color_line_common);
}

.accordion_container_bottom
{
  border-bottom: 1.5px solid var(--color_line_common);
}

.accordion_headline_container
{
  position: relative;
  padding: 15px 0px 5px 10px;
}

.accordion_headline
{
  position: relative;
  max-width: calc(100% - 50px);
}

.accordion_headline_bw
{
  color: var(--bs-body-color);
}

.accordion_contents
{
  padding-left: 10px;
  max-width: 95%;
  overflow: hidden;
}

@media (max-width: 768px) 
{
  .accordion_contents
  {
    max-width: 93%;
  }
}

.accordion_contents_spacer
{
  height: 10px;
}

.accordion_contents_show
{
  max-height: 2000px;
  max-height: var(--accordion_max-height);
  -webkit-transition: max-height 0.4s;
  -ms-transition: max-height 0.4s;
  transition: max-height 0.4s; 
}

.accordion_contents_hide
{
  max-height : 0px;
  overflow: hidden;
  -webkit-transition: max-height 0.4s;
  -ms-transition: max-height 0.4s;
  transition: max-height 0.4s; 
}

.accordion_button_container
{
  position: relative;
}

.accordion_button
{
  position: absolute;
  right: 0px;
  height: 50px !important;
  top: 0.1rem;
}

.pic_rotate_none
{
  transform: scale(1.0) rotate(0deg);
  -webkit-transition: transform 0.25s;
  -ms-transition: transform 0.25s;
  transition: transform 0.25s; 
}

.pic_rotate
{
  transform: scale(1.0) rotate(180deg);
  -webkit-transition: transform 0.25s;
  -ms-transition: transform 0.25s;
  transition: transform 0.25s; 
}

@media (hover: hover) and (pointer: fine)
{
  .accordion_headline_container:hover
  {
    cursor: pointer;
  }

  .accordion_headline:hover
  {
    color: var(--color_headline);
  }

  .accordion_headline_container:hover .pic_rotate_none
  {
    transform: scale(1.2) rotate(0deg);
    -webkit-transition: transform 0.25s;
    -ms-transition: transform 0.25s;
    transition: transform 0.25s; 
  }

  .accordion_headline_container:hover .pic_rotate
  {
    transform: scale(1.2) rotate(180deg);
    -webkit-transition: transform 0.25s;
    -ms-transition: transform 0.25s;
    transition: transform 0.25s; 
  }
}

.accordion_button_touch
{                     
  /* to do */
}

/*  Scaling */
@media (min-width: 768px) and (max-width: 991px) 
{
  .button_accordion
  {
    font-size: 17px;
  }
}

@media (min-width: 992px)
{
  .button_accordion
  {
    font-size: 18px;
  }
}

/* Instructor login */
.container_checks_headline, .container_participant_headline, .container_mail_headline
{
  position: relative;
}

.container_checks_data
{
  position: absolute;
  top: 0px;
  left: 8.6rem;
}

.container_participant_data
{
  position: absolute;
  top: 0px;
  left: 4.7rem;
}

.container_mail_data
{
  position: absolute;
  top: 0px;
  left: 3.6rem;
}

.container_buttons_outer
{
  position: relative;
  height: 100%;
}

.container_buttons
{
  width: fit-content;
}

@media (min-width: 768px)
{
  .container_buttons
  {
    position: absolute;
    bottom: 1.2rem;
  }
}

.send_reminder_button
{
  width: 100%;
}

.container_security_query_buttons
{
  position: relative;
  width: 100%;
  height: fit-content;
  margin-top: 25px;
}

/* Template overrides */
/*  hide alert notifications */
.alert-notice
{
  display: none;
}

/*  Form colors */
.uneditable-input:focus
{
  border-color: var(--color_headline) !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(69, 132, 183,0.6) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(69, 132, 183,0.6) !important;
}

/*  menu colors */
.sp-megamenu-parent > li > a::after
{
  content: '';
  position: absolute;
  bottom: 35px;
  left: 10px;
  width: calc(100% - 20px);
  height: 2px;
  background-color: var(--color_menu);
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 300ms, transform 300ms;
}

@media (min-width: 991px)
{
  .sp-megamenu-parent > li > a::after
  {
    left: 12px;
    width: calc(100% - 25px);
  }
}

@media (min-width: 1200px)
{
  .sp-megamenu-parent > li > a::after
  {
    left: 15px;
    width: calc(100% - 30px);
  }
}

@media (hover: hover) and (pointer: fine)
{
  .sp-megamenu-parent > li > a:hover::after, .sp-megamenu-parent > li > a:focus::after
  {
    opacity: 1;
    transform: translate3d(0, 0.2em, 0);
    transform: scaleX(1);
  }
}

.sp-megamenu-parent > li > a
{
  text-decoration: none;
  overflow: hidden;
  color: var(--color_menu) !important;
}

.sp-megamenu-parent > li.active > a
{
  text-underline-offset: 7px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  color: var(--color_active_menu);
}

.sp-megamenu-parent > li.active > a::after
{
  opacity: 0 !important;
  transform: scale(0) !important;
}

/*  off-canvas menu */
#offcanvas-toggler .fa, .text_offcanvas
{
  color: var(--color_offcanvas_menu) !important;
}

.text_offcanvas
{
  font-weight: 400;
  font-size: 11px !important;
  line-height: 16px !important;
  -webkit-transition: color 0.25s;
  -moz-transition: color 0.25s;
  transition: color 0.25s;
}

.offcanvas-menu
{
  background-color: var(--color_offcanvas_menu);
  color: var(--color_offcanvas_text);
}

.offcanvas-menu .offcanvas-inner .sp-module ul > li
{
  border-bottom: 1px solid rgba(255,255,255,0.5) !important;
}

.offcanvas-inner .sp-module
{
  margin-top: 15px !important;
}

/*  indent for lists */
ul
{
  padding-left: 15px; 
}

/*  header */
#sp-header
{
  box-shadow: none !important;
  max-width: 100% !important;
}

.sp-default-logo, .sp-retina-logo, .sp-mobile-logo
{
  max-width: none !important;
  height: 90px;
}

#sp-header, #sp-header .logo, #sp-menu
{
  height: 125px;
}

#sp-menu
{
  padding-top: 45px;
}

/*  size off-canvas menu bars */
@media (max-width: 991px)
{
  .sp-megamenu-parent > li > a, #offcanvas-toggler
  {
    font-size: 33px; 
  }

  .text_offcanvas
  {
    font-size: 12px !important;
  }
}

/*  Scaling */
@media (min-width: 768px) and (max-width: 991px) 
{
  .sp-megamenu-parent > li > a
  {
    font-size: 15px;
  }
}

@media (min-width: 992px)
{
  .sp-megamenu-parent > li > a
  {
    font-size: 20px;
  }
}

/* Scrollup */
.scrollup
{
  bottom: 4vmin !important;
  right: 4vmin !important;
}

.scrollup:hover:before
{
  color: var(--color_button_background) !important;
  opacity: 0.8 !important;
}

.scrollup:before
{
  font-size: calc(30px + (50 - 30) * (100vmin - 320px) / (1500 - 320)) !important;
  color: var(--color_button_background) !important;
  opacity: 0.9 !important;
}

.scrollup_hide
{
  display: none !important;
}

.scrollup:hover
{                     
  transform: scale(1.0);
  -webkit-transition: transform 0.2s;
  -ms-transition: transform 0.2s;
  transition: transform 0.2s; 
}

@media (hover: hover) and (pointer: fine)
{
  .scrollup:hover
  {                     
    transform: scale(1.1);
    -webkit-transition: transform 0.2s;
    -ms-transition: transform 0.2s;
    transition: transform 0.2s; 
  }
}

.scrollup_touch
{                     
  transform: scale(1.18) !important;
}

/* Responsive */
@media (max-width: 400px)  
{
  #sp-bottom .container
  {
    padding-top: 35px !important;
    padding-bottom: 15px !important;
  }

  .container_link_bottom
  {
    min-width: 150px;
  }

  .link_bottom
  {
    margin-bottom: 6px;
  }

  .footer_spacer
  {
    height: 225px;
  }

  .sp-default-logo, .sp-retina-logo, .sp-mobile-logo
  {
    height: 70px;
  }

  #sp-header, #sp-header .logo, #sp-menu
  {
    height: 95px;
  }

  #sp-menu
  {
    padding-top: 25px !important;
  }
}

@media (min-width: 401px) and (max-width: 500px) 
{
  #sp-bottom .container
  {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
  }

  .container_link_bottom
  {
    min-width: 160px;
  }

  .link_bottom
  {
    margin-bottom: 6px;
  }

  .footer_spacer
  {
    height: 200px;
  }

  .sp-default-logo, .sp-retina-logo, .sp-mobile-logo
  {
    height: 80px !important;
  }

  #sp-header, #sp-header .logo, #sp-menu
  {
    height: 110px !important;
  }

  .sp-megamenu-parent > li > a, #offcanvas-toggler
  {
    font-size: 32px !important; 
  }

  #sp-menu
  {
    padding-top: 35px !important;
  }

  .text_offcanvas
  {
    font-size: 12px !important;
  }
}

@media (min-width: 501px) and (max-width: 575px) 
{
  .footer_spacer
  {
    height: 175px;
  }
}

@media (min-width: 576px) and (max-width: 767px) 
{
  .footer_spacer
  {
    height: 175px;
  }

  .sp-default-logo, .sp-retina-logo, .sp-mobile-logo
  {
    height: 100px;
  }

  #sp-header, #sp-header .logo, #sp-menu
  {
    height: 135px;
  }

  .sp-megamenu-parent > li > a, #offcanvas-toggler
  {
    font-size: 40px; 
  }

  #sp-menu
  {
    padding-top: 55px;
  }

  .text_offcanvas
  {
    font-size: 15px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) 
{
  .cookie_hints_text
  { 
    padding: 20px 20px 10px 20px;
  }

  .cookie_hints_button
  {
    margin-left: 20px !important;
  }

  .link_bottom
  {
    padding-left: 22px !important;
    margin-right: 40px;
  }

  .footer_spacer
  {
    height: 200px;
  }

  .sp-default-logo, .sp-retina-logo, .sp-mobile-logo
  {
    height: 110px;
  }

  #sp-header, #sp-header .logo, #sp-menu
  {
    height: 150px;
  }

  .sp-megamenu-parent > li > a
  {
    font-size: 17px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #sp-menu
  {
    padding-top: 70px;
  }

  .text_offcanvas
  {
    font-size: 16px !important;
  }
}

@media (min-width: 992px)
{
  .cookie_hints_text
  { 
    padding: 28px;
    margin: 0px 20px 0px 0px !important;
  }

  .cookie_hints_button
  {
    position: absolute;
    top: 50%;
    -webkit-transition: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    float: right !important;
    right: 24px !important;
    margin: 0px !important;
  }

  .link_bottom
  {
    padding-left: 24px !important;
    margin-right: 40px;
  }

  .footer_spacer
  {
    height: 150px;
  }

  .sp-default-logo, .sp-retina-logo, .sp-mobile-logo
  {
    height: 120px;
  }

  #sp-header, #sp-header .logo, #sp-menu
  {
    height: 165px;
  }

  #sp-menu
  {
    padding-top: 80px;
  }

  .sp-megamenu-parent > li > a
  {
    font-size: 18px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

@media (min-width: 1200px)
{
  .footer_spacer
  {
    height: 150px;
  }
}

@media (min-width: 1680px) 
{
  .sp-megamenu-parent > li > a
  {
    font-size: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Text sizes */
html
{
  font-size: calc(14px + 0.2vw) !important;
}

h1, h2
{
  font-size: 1.6rem !important;
  line-height: 2.1rem !important;
}

h2
{
  margin-bottom: 1.4rem !important;
}

h3
{
  font-size: 1.3rem !important;
  line-height: 1.65rem !important;
  margin-bottom: 1rem !important;
}

.h3_add_margin_bottom
{
  margin-bottom: 1.2rem !important;
}

.h4_add_margin_bottom
{
  margin-bottom: 1.0rem !important;
}

.h4_align_center
{
  text-align: center;
  margin-bottom: 1.0rem !important;
}

h4
{
  font-size: 1.1rem !important;
  line-height: 1.7rem !important;
}

p, li, .cookie_hints_text, .text_href, .text_href_link
{
  font-size: 1.0rem !important;
  line-height: 1.6rem !important;
}

.blank_line_s
{
  font-size: 0.25rem !important;
  line-height: 0.4rem !important;
  margin-bottom: 0.6rem !important;
}

.blank_line_m
{
  font-size: 0.4rem !important;
  line-height: 0.45rem !important;
  margin-bottom: 0.6rem !important;
}

.blank_line_l
{
  font-size: 0.6rem !important;
  line-height: 0.7rem !important;
  margin-bottom: 0.9rem !important;
}

.blank_line_xl
{
  font-size: 0.8rem !important;
  line-height: 1.0rem !important;
  margin-bottom: 1.1rem !important;
}

.text_add_margin_top
{
  margin-top: 0.3rem !important;
}

.text_reduce_margin_bottom
{
  margin-bottom: 0.3rem !important;
}

.href_mail::before, .href_mail_footer::before, .href_phone_footer::before
{
  top: 0.2rem !important;
  width: 1.1rem !important;
  height: 1.1rem !important;
}

.href_phone_footer::before
{
  top: 0.3rem !important;
}

.text_href_link::before
{
  left: -1.1rem !important;
  top: 0.3rem !important;
  width: 0.8rem !important;
  height: 0.8rem !important;
}

p
{
  margin-bottom: 0.8rem !important;
}

.section_text, .button_href a, .login_button, .upload_button, .clear_button, .progress_button, .perform_checks_button, .send_account_button, .send_reminder_button, .query_cancel_button, .query_ok_button, .cookie_hints_button, .link_bottom, .container_headline
{
  font-size: 1.2rem !important;
  line-height: 1.8rem !important;
  font-size: 1.1rem !important;
  line-height: 1.7rem !important;
}

@media (max-width: 575px)
{
  .clear_button, .upload_button
  {
    width: 175px !important;
  }
}

.webspace_summary
{
  font-size: 1.0rem !important;
  line-height: 1.8rem !important;
}

.button_animated::after, .button_wide_animated::after
{
  font-size: 1.2rem !important;
  line-height: 1.8rem !important;
  top: 0.08rem !important;
  font-size: 1.0rem !important;
  line-height: 1.6rem !important;
  top: 0.01rem !important;
}

.link_bottom
{
  margin-bottom: 10px;
}

.link_bottom::before  
{
  top: 0.5rem !important;
  width: 0.9rem !important;
  height: 0.9rem !important;
}

.link_bottom a::after
{
  bottom: -0.2rem !important;
  left: 1.25rem !important;
  width: calc(100% - 1.2rem) !important;
}

/* Overlay */
.page_overlay
{
  background: rgba(0,0,0,0.4);
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9994;
  visibility: hidden;
}

.page_overlay_fade_out
{
  opacity: 0;
  -webkit-transition: opacity 0.75s;
  -ms-transition: opacity 0.75s;
  transition: opacity 0.75s; 
}

.page_overlay_fade_in
{
  opacity: 1.0;
  -webkit-transition: opacity 0.75s;
  -ms-transition: opacity 0.75s;
  transition: opacity 0.75s; 
}

.form_overlay_background
{
  background: rgba(0, 0, 0, 0.4);
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9997;
  visibility: hidden;
  opacity: 0.75;
} 

.stop_scrolling
{
  height: 100%;
  width: calc(100% - var(--scrollbar_width));
  overflow: hidden;
}

/* Popups */
.login_popup, .upload_popup, .security_query_popup
{
  display: none;
  position: fixed;
  z-index: 9998;
  display: none;
  left: 50%; 
  top: 25%;
  transform: translate(-50%, -25%);
  width: 90vw;
  max-width: 800px;
}

.security_query_popup
{
  z-index: 9998;
  background-color: var(--color_body_background);
  color: var(--bs-body-color);
  padding: calc(20px + 3 * (100vw - 320px) / 320) calc(20px + 3 * (100vw - 320px) / 320) calc(10px + 2 * (100vw - 320px) / 320) calc(20px + 3 * (100vw - 320px) / 320);
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important;
  -webkit-border-radius: var(--border_radius) !important;
  -moz-border-radius: var(--border_radius) !important;
  border-radius: var(--border_radius) !important;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.4);
  width: 95vw;
  max-width: 680px;
}

.login_popup_content, .upload_popup_content
{
  display: none;
  z-index: 9998;
  background-color: var(--color_body_background);
  color: var(--bs-body-color);
  padding: calc(25px + 2 * (100vw - 320px) / 320); 
  width: 100%;
  height: 100%;
  -webkit-border-radius: 0px !important;
  -moz-border-radius: 0px !important;
  border-radius: 0px !important;
  -webkit-border-radius: var(--border_radius) !important;
  -moz-border-radius: var(--border_radius) !important;
  border-radius: var(--border_radius) !important;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.4);
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.4);
}

.login_button_popup_close, .upload_button_popup_close
{
  position: absolute;
  right: calc(5px - 1 * (320px - 100vw) / 320);
  top: calc(5px - 1 * (320px - 100vw) / 320);
  width: calc(50px + 2 * (100vw - 320px) / 320);
  height: calc(50px + 2 * (100vw - 320px) / 320);
}

.login_popup_content h4, .upload_popup_content h4
{
  max-width: 90%;
}

/* Bootstrap overwrites */
.container, .container-lg, .container-md, .container-sm, .container-xl
{
  max-width: 100% !important;
  padding-right: 5vw !important;
  padding-left: 5vw !important;
}

@media (min-width: 1400px)
{
  .container, .container-lg, .container-md, .container-sm, .container-xl
  {
    max-width: 1500px !important;
  }
}