:root {
  --fs-blue: #325AA6;
  --fs-white: #FFFFFF;
  --fs-light-blue: #E7F3FF;
  --fs-dark-blue: #0059AC;
  --fs-border-blue: #BFD9ED;
  --fs-gray: #393939;
  --fs-light-gray: #F8F8F8;
  --fs-table-border: #BEBEBE;
  --fs-hover-blue: #EAF4FF;
  --fs-copyright-blue: blue;
  --fs-copyright-green: green;
  --fs-copyright-red: red;
  --fs-copyright-yellow: yellow;
}

/* Custom extra small heading based on UIKit's uk-heading-small */
.uk-heading-xsmall {
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 0.5em;
}

/* Custom extra extra small heading based on uk-heading-xsmall */
.uk-heading-xxsmall {
    font-size: 1rem;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 0.5em;
}

/* General reconfiguration for uk-button */
.fs-button-login {
  line-height: 25px;
  background-color: var(--fs-blue);
  color: var(--fs-white);
}

.uk-active {
    text-decoration-line: underline;
}

.fs-button-aflys {
  line-height: 25px;
  background-color: var(--fs-light-blue);
  color: var(--fs-dark-blue);
  border: 1px solid var(--fs-border-blue);
}

/* Scale icon by container width */
.fs-button-aflys .uk-icon {
  width: 1.6em;   /* scales with button font-size */
  height: auto;   /* optional; width drives the size */
}

/* Make the SVG fill the container responsively */
.fs-button-aflys .uk-icon svg {
  display: block;      /* avoid inline whitespace */
  width: 100%;         /* fill the parent's width */
  height: auto;        /* maintain aspect ratio */
}

.fs-button-aflys .uk-icon { 
    vertical-align: middle; 
}

.uk-form-help-block {
    font-style: italic;
    font-size: 0.9em;
}

.chevron-right-ture {
  color: var(--fs-gray);
}

.navbar-gradient-divider {
  height: 64px; /* Adjust height as needed */
  background: linear-gradient(to bottom, var(--fs-light-gray) 50%, rgba(248,248,248,0) 100%);
  /* Use the actual background color of your navbar as the first color */
  margin-bottom: 2%;
}

.fs-customer-header {
  font-size: 38px;
  color: var(--fs-blue);
}

/* .uk-navbar-right {
  align-items: center;
} */

.uk-logo {
    aspect-ratio: 2 / 1;
    object-fit: contain;
    width: 150px;
    height: auto;
}

/* -------------------------------------------------------------
   Base: normalize row borders so we control the look
   ------------------------------------------------------------- */
table.uk-table.uk-table-striped tbody tr {
  background: transparent; /* wipe UIkit's default odd striping */
  border-top: 1px solid var(--fs-table-border);
  border-bottom: 1px solid var(--fs-table-border);
}

/* -------------------------------------------------------------
   Pair-based striping: a shared color for summary-ture+details-ture
   Summary-ture rows occur at 1,3,5,... (odd). We alternate by pairs.
   ------------------------------------------------------------- */

/* Stripe A for pairs starting at rows 1,5,9,... (summary-ture at 4n+1) */
table.uk-table.uk-table-striped tbody tr.summary-ture:nth-child(4n + 1),
table.uk-table.uk-table-striped tbody tr.summary-ture:nth-child(4n + 1) + tr.details-ture {
  background-color: var(--fs-light-gray); /* light gray A */
}

/* Stripe B for pairs starting at rows 3,7,11,... (summary-ture at 4n+3) */
table.uk-table.uk-table-striped tbody tr.summary-ture:nth-child(4n + 3),
table.uk-table.uk-table-striped tbody tr.summary-ture:nth-child(4n + 3) + tr.details-ture {
  background-color: var(--fs-white); /* white B */
}

/* -------------------------------------------------------------
   Remove the inner border between summary-ture & details-ture (unify pair)
   ------------------------------------------------------------- */
table.uk-table.uk-table-striped tbody tr.summary-ture {
  border-bottom: none; /* merge with the details-ture row below */
}
table.uk-table.uk-table-striped tbody tr.details-ture {
  border-top: none;    /* merge with the summary-ture row above */
}

/* tighter details-ture row content */
table.uk-table.uk-table-striped tbody tr.details-ture td {
  padding-top: 0;
  padding-bottom: 0;
}

/* -------------------------------------------------------------
   Hover highlighting for summary-ture + details-ture pairs
   ------------------------------------------------------------- */

table.uk-table.uk-table-hover tbody tr.summary-ture:hover {
  background-color: var(--fs-hover-blue);
}

/* Forward hover:
   When hovering the summary-ture, also highlight its adjacent details-ture
   — but only if the details-ture row is visible (not hidden). */
table.uk-table.uk-table-hover tbody tr.summary-ture:hover + tr.details-ture:not([hidden]) {
  background-color: var(--fs-hover-blue);
}

/* Ensure hover color applies even when inner cells paint over row */
.uk-table.uk-table-hover tbody tr.details-ture:hover,
.uk-table.uk-table-hover tbody tr.details-ture:hover > td {
  background-color: var(--fs-hover-blue); 
}

/* When the details-ture row is hovered, also highlight its preceding summary-ture row */
table.uk-table.uk-table-hover.uk-table-striped tbody tr.summary-ture:has(+ tr.details-ture:hover) {
  background-color: var(--fs-hover-blue);
}

/* Optional: also highlight the details-ture if the summary has keyboard focus */
table.uk-table.uk-table-hover tbody tr.summary-ture:focus,
table.uk-table.uk-table-hover tbody tr.summary-ture:focus + tr.details-ture:not([hidden]) {
  background-color: var(--fs-hover-blue);
  outline: none; /* you can keep default focus ring on cells if desired */
}

/* Large Screen (4k) */
@media (min-width: 1599px){

    #fs_copyright_text {
      color: var(--fs-copyright-blue);
    }

}

/* Normal Screen */
@media (max-width: 1598px) and (min-width: 960px) {
    #fs_copyright_text {
      color: var(--fs-copyright-green);
    }
}

/* Medium Screen (e.g. phone landscape) */
@media (max-width: 959px) and (min-width: 640px) {

    #fs_copyright_text {
      color: var(--fs-copyright-red);
    }

    .uk-logo {
        width: 100px;
    }
}

/* Small device (e.g. phone) */
@media (max-width: 639px) {

    #fs_copyright_text {
      color: var(--fs-copyright-yellow);
    }
    
    .uk-navbar-right {
        float: none !important;
        justify-content: center !important;
        display: flex !important;
        width: 100%;
    }
    
    .fs-customer-header {
        font-size: 18px;
        /* margin-left: 10px; */
    }

    .uk-logo {
        width: 50px;
    }
}

/*Printing CSS*/
@media print {

    /* this affects the margin in the printer settings */
    @page{margin: 10mm 0mm 0mm 7mm;}


    /*imporant to make uk-grid print over several pages!*/
    .uk-grid {display:block;}

    /* hide menu and sticky items from page*/
    div.uk-sticky-placeholder{display:none;}
}