/***********************************************
	fcoo-web-pages.scss,

	(c) 2023, FCOO

	https://github.com/FCOO/fcoo-web-pages
	https://github.com/FCOO


************************************************/
/************************************************************
INCLUDE-JQUERY-BOOTSTRAP-VARIABLES
USED IN FOR OTHER PACKAGES TO INCLUDE ALL SCSS-FILES NEEDED
TO HAVE ACCESS TO ALL BOOTSTRAP AND FCOO/JQUERY-BOOTSTRAP SCSS-VARIABLES
************************************************************/
/************************************************************
FUNCTIONS
************************************************************/
/***********************************************
FUNCTIONS TO CONVETRT FROM PX TO REM
To make it easier to design and calculate dimensions
the function rem defined
************************************************/
/************************************************************
HEADER, TITLE, AND FOOTER PADDING AND FONT-SIZE
Padding are set to button y-padding (moving text to the left)
************************************************************/
/************************************************************
BOOTSTRAP_COLORSTEXT

A copy of the colorws defined in bootstrap/scss_variables.scss
************************************************************/
/************************************************************
VARIABLES-BOOTSTRAP
Adjust Bootstrap 5 variables default values

Variables should follow the `$component-state-property-size` formula for
consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.

All non-Bootstrap variables are prefixed with $jb-


************************************************************/
/***********************************************
Customize Bootstrap
See https://getbootstrap.com/docs/5.2/customize/options/ for description
/star star/ = Differnet from default
************************************************/
/**/
/**/
/**/
/***********************************************
OPACITY
************************************************/
/***********************************************
TEXT-COLOR
************************************************/
/***********************************************
BACKGROUND-COLOR
************************************************/
/***********************************************
BORDER-COLOR
************************************************/
/***********************************************
CHECKBOX, RADIO, AND SELECT
text-color and bg-color for selected item in <select> varies for different browsers.
text-color = rgb(255, 255, 255)   for all
    Browser     bg-color
    Chrome      rgb( 30, 144, 255)
    Firefox     rgb(  0, 120, 215)
    Safari      rgb( 30, 144, 255)
    Edge        rgb(195, 195, 195)  = gray

For checkbox and radio default Bootstrap uses:
text-color  = $form-check-input-checked-color    = $component-active-color = $white   = rgb(255, 25, 255);
bg-color    = $form-check-input-checked-bg-color = $component-active-bg    = $primary = rgb(13, 110, 253);

** BUT JQUERY-BOOTSTRAP USES SAME COLORS AS <SELECT> IN CHROME AND SAFARI **
************************************************/
/*
indeterminate colors = checkbox or checkbox-button with semi-selected state
Use $orange as bg-color and same bg-image as selected and standard border-color
*/
/***********************************************
PADDING AND FONT-SIZE
Padding and font-size for different sizes of
    buttons,
    accordion-, modal-, popup-, and tooltip-header/footer
************************************************/
/************************************************************
Modal and popover header and content
Bootstrap default = normal size
************************************************************/
/***********************************************
Accordion
***********************************************/
/***********************************************
Grid columns
Set the number of columns and specify the width of the gutters.

$grid-columns:                12 !default;
$grid-gutter-width:           1.5rem !default;
$grid-row-columns:            6 !default;

// Container padding
$container-padding-x: $grid-gutter-width !default;
***********************************************/
/***********************************************
Card
***********************************************/
/***********************************************
Form
***********************************************/
/***********************************************
Toast
***********************************************/
/***********************************************
Tables
For some (unknown) reason the padding of table cells
are done by scss-variables instead of var(...) ???
***********************************************/
/***********************************************
Nav, Pills and Tabs
***********************************************/
/***********************************************
BUTTONS
************************************************
SYNTAX AND RELATIONS IN BOOTSTRAP
    $input-btn-padding-x[-sm|-lg] = A Value
    $input-btn-padding-y[-sm|-lg] = A Value
    $input-btn-font-size[-sm|-lg] = A Value
    $border-radius[-sm|-lg]       = A Value

Used for button:
    $btn-padding-y[-sm|-lg]      : $input-btn-padding-y[-sm|-lg] !default;
    $btn-padding-x[-sm|-lg]      : $input-btn-padding-x[-sm|-lg] !default;
    $btn-font-size[-sm|-lg]      : $input-btn-font-size[-sm|-lg] !default;
    $btn-border-radius[-sm|-lg]  : $border-radius[-sm|-lg]       !default;

Used for input
    $input-padding-y[-sm|-lg]    : $input-btn-padding-y[-sm|-lg] !default;
    $input-padding-x[-sm|-lg]    : $input-btn-padding-x[-sm|-lg] !default;
    $input-font-size[-sm|-lg]    : $input-btn-font-size[-sm|-lg] !default;
    $input-border-radius[-sm|-lg]: $border-radius[-sm|-lg]       !default;

BOOTSTRAP 5 DEFAULT
    $input-btn-line-height  : 1.5
*/
/************************************************************
Including "size" xs as in Bootstrap 5
************************************************************/
/***********************************************
Adjust bootstrap-variables to only have dimensions
in integer px from rem
************************************************/
/************************************************************
Other adjustments
************************************************************/
/************************************************************
Make all font-size and margin for header (<h1>, <h2>,...<h6>)
releative to container (rem -> em)
Default (not changed): $font-size-base = $spacer = 1rem
************************************************************/
/************************************************************
Adjust dropdown-menu
************************************************************/
/************************************************************
Adjust modal
************************************************************/
/***********************************************

jquery-scroll-container-variables.scss

************************************************/
:root {
  --jsc-scroll-size: 10px;
  --jsc-scroll-padding: 10px;
  --jsc-scroll-auto-padding: 10px;
}

/************************************************************
VARIABLES

Defines scss-variables used in jquery-bootstrap
Some of these variables are based on Bootstrap variables
************************************************************/
/***********************************************
Checkbox
************************************************/
/***********************************************
Button
************************************************/
/***********************************************
Modal
************************************************/
/***********************************************
Button And Modal
Opacity for semi-transparent and transparent content using color-mix
************************************************/
/***********************************************
$type-2-alert-color
Conections between "type" and Bootstrap color-class-names
Used in _noty.scss and _modal.scss
************************************************/
/************************************************************
MIXIN
************************************************************/
/************************************************************
PROPERTY-VARIANT
Varients of different properties
************************************************************/
/************************************************************
HEADER and FOOTER-VARIANT
Adjust padding and font-size for header and footer
************************************************************/
/************************************************************
BUTTON-VARIANT
button-text-color-variant
button-border-color-variant
button-background-color-variant
Adjust text-, border-, and background-color for a button
************************************************************/
/************************************************************
TABLE COLORS
************************************************************/
/*****************************************************************
create-table-variant($postfix, $background, $default, $color)
Adjusted copy of Bootstrap table-variant($state, $background) to
create css-var to set colors in tables
*****************************************************************/
/*****************************************************************
incl-table-variant($postfix)
Include special version of Bootstrap table-var
The var must have been created by create-table-variant first
*****************************************************************/
/*****************************************************************
table-no-hover()
Prevent any hover effect
*****************************************************************/
html[lang=da] *[lang=en] {
  display: none !important;
}

html[lang=en] *[lang=da] {
  display: none !important;
}

h1 div[lang], h2 div[lang], h3 div[lang], h4 div[lang], h5 div[lang], h6 div[lang], li div[lang] {
  display: inline;
}

html.no-desktop *[device*=desktop],
html.no-tablet *[device*=tablet],
html.no-phone *[device*=phone] {
  display: none !important;
}

html {
  font-size: 100%;
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  font-family: var(--fmn-font-family);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  text-align: left;
  overflow-y: auto;
  overflow-x: clip;
  margin: 0;
  margin-left: var(--jsc-scroll-size) !important;
  margin-right: var(--jsc-scroll-size) !important;
  width: calc(100% - 2 * var(--jsc-scroll-size));
}
html.scrollbar-visible body {
  margin-right: 0 !important;
  width: calc(100% - var(--jsc-scroll-size));
}

body.modal-open {
  overflow-y: auto !important;
  overflow-x: clip !important;
}

header {
  height: 90px;
  width: 100%;
  padding: 0px;
  margin: 0;
  background-color: #fff;
  position: sticky;
  z-index: 1000000;
  top: 0;
}
html:not([data-scroll="0"]) header .header {
  border-bottom: 5px solid white !important;
  -webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  clip-path: inset(0 0 -10px 1px);
}
header .header {
  height: 100%;
  border-bottom: 5px solid #3f5b58 !important;
}
header .header .logo-da {
  height: 80px;
}
header .header .logo-en {
  height: 83px;
}
header .header .small-logo {
  width: 40px;
}
header .header a {
  cursor: pointer;
  display: inline-block;
}
@media (max-width: 800px) {
  header .header a.logo-container {
    display: none;
  }
}
header .header a.small-logo-container {
  display: none;
}
@media (max-width: 800px) {
  header .header a.small-logo-container {
    display: inline-block;
  }
}
header .header .lang-link {
  font-size: 0.76471em;
  margin: 0 0 0 25px;
  line-height: 1.5;
  letter-spacing: -0.4px;
  color: #465A5A;
  text-decoration: none;
}
header .header a.lang-link {
  cursor: pointer;
}
header .header .links-language-setup {
  height: 54px;
  padding-bottom: 10px;
}
header .header .links-language-setup a.setup-button {
  width: 18px;
  height: 18px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gNi43LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UgKENvbW1lcmNpYWwgTGljZW5zZSkgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTIyMy4zIDM3LjhjLjQtMS41IDEuMy0yLjggMi40LTMuOGM5LjktMS4zIDIwLTIgMzAuMy0yczIwLjQgLjcgMzAuMyAyYzEuMSAxIDEuOSAyLjMgMi40IDMuOGwxMy43IDQ3LjdjMy41IDEyLjEgMTIuMiAyMS4xIDIyLjUgMjYuMWM3LjYgMy42IDE0LjggNy44IDIxLjcgMTIuNWM5LjQgNi41IDIxLjcgOS41IDMzLjkgNi41bDQ4LjItMTJjMS41LS40IDMtLjMgNC40IC4yYzUuNCA2LjkgMTAuNCAxNC4yIDE0LjkgMjEuOGw0LjMgNy40YzQuMiA3LjUgNy45IDE1LjMgMTEuMiAyMy4zYy0uMyAxLjUtMSAyLjktMi4xIDRMNDI2LjggMjExYy04LjcgOS0xMi4yIDIxLjEtMTEuMyAzMi41Yy4zIDQuMSAuNSA4LjMgLjUgMTIuNXMtLjIgOC40LS41IDEyLjVjLS45IDExLjQgMi42IDIzLjUgMTEuMyAzMi41bDM0LjUgMzUuN2MxLjEgMS4xIDEuOCAyLjUgMi4xIDRjLTMuMyA4LTcgMTUuOC0xMS4yIDIzLjRsLTQuMiA3LjNjLTQuNiA3LjYtOS42IDE0LjgtMTQuOSAyMS44Yy0xLjQgLjUtMi45IC41LTQuNCAuMmwtNDguMi0xMmMtMTIuMi0zLTI0LjQgMC0zMy45IDYuNWMtNi45IDQuNy0xNC4xIDguOS0yMS43IDEyLjVjLTEwLjMgNC45LTE5LjEgMTQtMjIuNSAyNi4xbC0xMy43IDQ3LjdjLS40IDEuNS0xLjMgMi44LTIuNCAzLjhjLTkuOSAxLjMtMjAgMi0zMC4zIDJzLTIwLjQtLjctMzAuMy0yYy0xLjEtMS0xLjktMi4zLTIuNC0zLjhsLTEzLjctNDcuN2MtMy41LTEyLjEtMTIuMi0yMS4xLTIyLjUtMjYuMWMtNy42LTMuNi0xNC44LTcuOC0yMS43LTEyLjVjLTkuNC02LjUtMjEuNy05LjUtMzMuOS02LjVsLTQ4LjIgMTJjLTEuNSAuNC0zIC4zLTQuNC0uMmMtNS40LTctMTAuNC0xNC4yLTE1LTIxLjhsLTQuMi03LjNjLTQuMi03LjUtNy45LTE1LjMtMTEuMi0yMy40Yy4zLTEuNSAxLTIuOSAyLjEtNEw4NS4yIDMwMWM4LjctOSAxMi4yLTIxLjEgMTEuMy0zMi41Yy0uMy00LjEtLjUtOC4zLS41LTEyLjVzLjItOC40IC41LTEyLjVjLjktMTEuNC0yLjYtMjMuNS0xMS4zLTMyLjVMNTAuNyAxNzUuMmMtMS4xLTEuMS0xLjgtMi41LTIuMS00YzMuMy04IDctMTUuOCAxMS4yLTIzLjRsNC4yLTcuM2M0LjYtNy42IDkuNi0xNC44IDE1LTIxLjhjMS40LS41IDIuOS0uNSA0LjQtLjJsNDguMiAxMmMxMi4yIDMgMjQuNCAwIDMzLjktNi41YzYuOS00LjcgMTQuMS04LjkgMjEuNy0xMi41YzEwLjMtNC45IDE5LjEtMTQgMjIuNS0yNi4xbDEzLjctNDcuN3pNMjU2IDBjLTEzIDAtMjUuOSAxLTM4LjQgMi45Yy0xLjcgLjMtMy40IC44LTUgMS42Yy05LjUgNC45LTE2LjkgMTMuNi0yMCAyNC41TDE3OC45IDc2LjdjLS42IDIuMi0yLjUgNC41LTUuNiA2Yy05LjEgNC4zLTE3LjggOS40LTI2IDE1Yy0yLjggMS45LTUuOCAyLjQtOCAxLjhsLTQ4LjItMTJDODAuMiA4NC44IDY5IDg2LjkgNjAgOTIuNmMtMS41IC45LTIuOCAyLjEtMy45IDMuNUM0OSAxMDUgNDIuNCAxMTQuMyAzNi41IDEyNC4xbC0uMSAuM0wzMiAxMzJsLS4xIC4zYy01LjQgOS44LTEwLjIgMTkuOS0xNC4zIDMwLjRjLS42IDEuNi0xIDMuMy0xLjEgNWMtLjUgMTAuOCAzLjMgMjEuNiAxMS4yIDI5LjhsMzQuNSAzNS43YzEuNiAxLjcgMi43IDQuNCAyLjQgNy44Yy0uNCA1LS42IDEwLS42IDE1cy4yIDEwLjEgLjYgMTVjLjMgMy40LS44IDYuMi0yLjQgNy44TDI3LjcgMzE0LjZjLTcuOSA4LjItMTEuNyAxOS0xMS4yIDI5LjhjLjEgMS43IC41IDMuNCAxLjEgNWM0LjEgMTAuNSA4LjkgMjAuNiAxNC4zIDMwLjRsLjEgLjMgNC40IDcuNiAuMSAuM2M1LjkgOS44IDEyLjQgMTkuMiAxOS42IDI4LjFjMS4xIDEuNCAyLjQgMi42IDMuOSAzLjVjOSA1LjcgMjAuMiA3LjggMzEuMSA1LjFsNDguMi0xMmMyLjItLjYgNS4yLS4xIDggMS44YzguMiA1LjcgMTYuOSAxMC43IDI2IDE1YzMuMSAxLjUgNC45IDMuOCA1LjYgNkwxOTIuNiA0ODNjMy4xIDEwLjggMTAuNSAxOS41IDIwIDI0LjVjMS42IC44IDMuMiAxLjQgNSAxLjZDMjMwLjEgNTExIDI0MyA1MTIgMjU2IDUxMnMyNS45LTEgMzguNC0yLjljMS43LS4zIDMuNC0uOCA1LTEuNmM5LjUtNC45IDE2LjktMTMuNiAyMC0yNC41bDEzLjctNDcuN2MuNi0yLjIgMi41LTQuNSA1LjYtNmM5LjEtNC4zIDE3LjgtOS40IDI2LTE1YzIuOC0xLjkgNS44LTIuNCA4LTEuOGw0OC4yIDEyYzEwLjkgMi43IDIyLjEgLjcgMzEuMS01LjFjMS41LS45IDIuOC0yLjEgMy45LTMuNWM3LjEtOC45IDEzLjYtMTguMiAxOS41LTI4bC4yLS4zTDQ4MCAzODBsLjEtLjNjNS40LTkuNyAxMC4yLTE5LjkgMTQuMy0zMC40Yy42LTEuNiAxLTMuMyAxLjEtNWMuNS0xMC44LTMuMy0yMS42LTExLjItMjkuOGwtMzQuNS0zNS43Yy0xLjYtMS43LTIuNy00LjQtMi40LTcuOGMuNC01IC42LTEwIC42LTE1cy0uMi0xMC4xLS42LTE1Yy0uMy0zLjQgLjgtNi4yIDIuNC03LjhsMzQuNS0zNS43YzcuOS04LjIgMTEuNy0xOSAxMS4yLTI5LjhjLS4xLTEuNy0uNS0zLjQtMS4xLTVjLTQuMS0xMC41LTguOS0yMC42LTE0LjMtMzAuNGwtLjEtLjMtNC40LTcuNi0uMi0uM2MtNS45LTkuOC0xMi40LTE5LjItMTkuNS0yOGMtMS4xLTEuNC0yLjQtMi42LTMuOS0zLjVjLTktNS43LTIwLjItNy44LTMxLjEtNS4xbC00OC4yIDEyYy0yLjIgLjYtNS4yIC4xLTgtMS44Yy04LjItNS43LTE2LjktMTAuNy0yNi0xNWMtMy4xLTEuNS00LjktMy44LTUuNi02TDMxOS40IDI5Yy0zLjEtMTAuOC0xMC41LTE5LjUtMjAtMjQuNWMtMS42LS44LTMuMi0xLjQtNS0xLjZDMjgxLjkgMSAyNjkgMCAyNTYgMHpNMjAwIDI1NmE1NiA1NiAwIDEgMSAxMTIgMCA1NiA1NiAwIDEgMSAtMTEyIDB6bTE0NCAwYTg4IDg4IDAgMSAwIC0xNzYgMCA4OCA4OCAwIDEgMCAxNzYgMHoiLz48L3N2Zz4=);
}

.only-lang {
  font-size: 0.76471em;
  line-height: 1.75;
  color: #465A5A;
  text-decoration: none;
  width: 100%;
  text-align: center;
  margin: auto;
}

.bg-lightgray {
  background-color: lightgray;
}

.container, .only-lang, h1 {
  padding: 0 !important;
}
@media (max-width: 576px) {
  .container, .only-lang, h1 {
    padding: 0 15px !important;
  }
}
@media (min-width: 576px) {
  .container, .only-lang, h1 {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container, .only-lang, h1 {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container, .only-lang, h1 {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container, .only-lang, h1 {
    max-width: 1140px;
  }
}

/* From Bootstrap:
                        Bootstrap                   FMI             FCOO
$font-size-base     :   1rem;
$h1-font-size       :   $font-size-base * 2.5;      2.70588em       2.70588em
$sub-title-font-size                                1.3529411765em  1.3529411765em
$h2-font-size       :   $font-size-base * 2;        2.35294em       1.75em
$h3-font-size       :   $font-size-base * 1.75;     1.75rem         1.50em
$h4-font-size       :   $font-size-base * 1.5;      Not set         1.25em
$h5-font-size       :   $font-size-base * 1.25;     Not set         1.25em
$h6-font-size       :   $font-size-base;            Not set         1.00em
*/
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.2;
  margin-top: 1em;
  margin-bottom: 0.5rem;
}

:root {
  --font-size-factor: 1;
}

h1 {
  font-weight: bold;
  font-size: calc(2.70588rem * var(--font-size-factor));
  line-height: 1.5;
  letter-spacing: -2px;
  width: 100%;
  text-align: center;
  margin-bottom: 1rem !important;
  margin-top: 0;
  margin: auto;
}

h1.first {
  font-size: 2.70588rem;
}

h2 {
  font-weight: bold;
  font-size: calc(1.75rem * var(--font-size-factor));
  line-height: 1.5;
  letter-spacing: -2px;
}
h2.sub-title {
  font-weight: normal;
  font-size: calc(1.3529411765rem * var(--font-size-factor));
  letter-spacing: -0.5px;
  word-break: break-word;
  margin-top: 0;
  margin-bottom: 1rem !important;
}

h3 {
  font-size: calc(1.5rem * var(--font-size-factor));
  line-height: 1.5;
}

h4 {
  font-size: calc(1.25rem * var(--font-size-factor));
}

h5 {
  font-size: calc(1.25rem * var(--font-size-factor));
}

h6 {
  font-size: calc(1rem * var(--font-size-factor));
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.5px;
}

/* p:empty { display: none; } */
.font-size-smaller {
  font-size: smaller;
}

@media (max-width: 991.98px) {
  :root {
    --font-size-factor: .85;
  }
  p {
    font-size: 0.94118em;
  }
}
.main-content {
  --a-color: initial;
  --a-text-decoration: underline dotted;
  --a-hover-color: darkblue;
  --a-hover-text-decoration: underline dotted;
}
.main-content a {
  color: var(--a-color);
  text-decoration: var(--a-text-decoration);
  outline-style: none;
}
.main-content a:hover {
  color: var(--a-hover-color);
  text-decoration: var(--a-hover-text-decoration);
}

.img-fluid {
  max-width: 100%;
  height: auto;
  margin: auto;
  display: block;
}

div.loading-inline {
  font-size: 1.5rem;
  width: 100%;
  text-align: center;
  height: 4rem;
}

h3.error {
  font-size: 1.3em;
  color: red;
  text-align: center;
}
h3.error code {
  font-size: 1.2em;
}

h4.error {
  font-size: 1.1em;
  color: red;
  text-align: center;
}
h4.error code {
  font-size: 1em;
}

.breadcrumbs {
  font-size: 0.76471em;
  height: 1.8em;
  line-height: 1;
  padding-left: 0em;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.breadcrumbs a {
  --a-color: #465A5A;
  --a-text-decoration: none;
  display: inline-block;
  letter-spacing: -0.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 25%;
}
.breadcrumbs .arrow {
  color: #8d1b3d;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.breadcrumbs .arrow:before {
  content: "/";
}
.breadcrumbs .arrow:first-child {
  display: none;
}

.footer {
  border-top: 5px solid #3f5b58 !important;
  margin-top: 10px;
}
.footer .footer-row {
  margin-top: 20px;
  margin-bottom: 10px;
  padding-right: 0.5em;
}
.footer .horizontal {
  display: flex;
}
@media (min-width: 992px) {
  .footer .fcoo-app-standard-logo {
    margin: 0 auto;
  }
}
.footer .title {
  font-size: 0.88235em;
  line-height: 1.5;
  letter-spacing: -0.3px;
  font-weight: bold;
  margin: 0 0 18px 0;
}
.footer .description {
  font-size: 0.94118em;
  line-height: 1.5;
  letter-spacing: -0.4px;
  margin-top: 20px;
}
.footer .description.first {
  margin-top: 0px;
}
.footer .link {
  color: #000;
  text-decoration: none;
  vertical-align: middle;
}

.page-bottom {
  width: calc(100% + 2 * var(--jsc-scroll-size));
  margin-left: calc(-1 * var(--jsc-scroll-size));
  height: 30px;
  background-color: #F3F3F3;
}

html .table.table-center {
  width: initial;
  margin: 0 auto;
}

/**************************************
image-list = Simple horizontal list of images
**************************************/
.image-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2em;
  row-gap: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.image-list img {
  max-width: 450px;
  border: 1px solid black;
}

@media (max-width: 991.98px) {
  .image-list {
    flex-direction: column;
    align-items: center;
  }
  .image-list img {
    max-width: 80%;
  }
}
/**************************************
table-of-content = Green bg with header and desc
table-of-feed    = Image, header and desc
Different padding, lines between elements etc.
**************************************/
.table-of-content, .table-of-feed {
  --a-text-decoration: none;
  --a-hover-color: var(--a-color);
  width: 100%;
}
.table-of-content .list, .table-of-feed .list {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 6em;
  -moz-column-gap: 6em;
  column-gap: 6em;
}
.table-of-content .list .element, .table-of-feed .list .element {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  -moz-column-break-inside: avoid;
  break-inside: avoid;
}
.table-of-content .list .element .item h2.title, .table-of-feed .list .element .item h2.title {
  font-weight: 700;
  font-size: 1.1764705882em;
  line-height: 1.5;
  letter-spacing: -0.4px;
  margin: 0;
  margin-bottom: 8px;
}

.table-of-content {
  background-color: #3f5b58;
  color: #fff;
  margin: 60px 0 60px 0;
  padding: 5em 2em;
}
.table-of-content .list .element .item {
  color: #fff;
  display: block;
  margin-bottom: 40px;
}
.table-of-content .list .element .item h2.title {
  text-decoration: underline;
}

.table-of-feed {
  --a-hover-text-decoration: none;
}
.table-of-feed .list .element .item {
  display: inline-block;
  border-bottom: 1px solid #767676;
  margin: 15px 0;
  padding: 0 0 15px 0;
  padding: 2px 2px 15px 2px;
  border: 1px solid transparent;
  width: 100%;
}
.table-of-feed .list .element .item:hover {
  border-color: darkblue;
}
.table-of-feed .list .element .item .description {
  min-height: 3em;
}

@media (max-width: 991.98px) {
  .table-of-content .list, .table-of-feed .list {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .table-of-content .list .element .item .description, .table-of-feed .list .element .item .description {
    min-height: auto;
  }
}
/**************************************
sitemap
Note: For now there are now gray-scaled background-color
**************************************/
ul.sitemap {
  --color: white;
  --border-color: #adb5bd;
  --bs-code-color: black;
  --a-text-decoration: none;
  border: 2px solid black;
  text-align: left;
  display: inline-block;
  padding-left: 0.5em !important;
  list-style-type: none !important;
}
ul.sitemap, ul.sitemap ul {
  list-style-type: square;
  padding-left: 20px;
  margin-top: 0.5em;
}
ul.sitemap li, ul.sitemap ul li {
  padding: 0.5em 4px 0.5em 4px;
  border-top: 1px solid var(--border-color);
}
ul.sitemap li:last-child, ul.sitemap ul li:last-child {
  border-bottom: 1px solid var(--border-color);
}
ul.sitemap.level-1, ul.sitemap ul.level-1 {
  --color: #adb5bd;
}
ul.sitemap.level-2, ul.sitemap ul.level-2 {
  --color: #ced4da;
}
ul.sitemap.level-3, ul.sitemap ul.level-3 {
  --color: #dee2e6;
}
ul.sitemap.level-4, ul.sitemap ul.level-4 {
  --color: #e9ecef;
}
ul.sitemap.level-5, ul.sitemap ul.level-5 {
  --color: #f8f9fa;
}
ul.sitemap > li {
  border-top: none !important;
  border-bottom: none !important;
}
ul.sitemap li.selected > a {
  font-weight: bold;
}
ul.sitemap ul li.selected {
  list-style-type: disclosure-closed;
}
ul.sitemap ul li.selected::marker {
  color: red;
}

/*# sourceMappingURL=fcoo-web-pages.css.map */