/* Fonts for linux */
@font-face {
    font-family: 'Segoe UI';
    src: url('font/segeo/Segoe UI.ttf');
}

@font-face {
    font-family: 'Segoe UI';
    src: url('font/segeo/Segoe UI Bold.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('font/segeo/Segoe UI Italic.ttf');
    font-style: italic;
}

@font-face {
    font-family: 'Segoe UI';
    src: url('font/segeo/Segoe UI Bold Italic.ttf');
    font-weight: bold;
    font-style: italic;
}

html, body {
    /* Make the background of the webpage gray */
    background-color: #f0f0f0;

    /* Bootstrap font */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;

}

.top-buttons {
    position: fixed;
    right: 0px;
    top: 0px;
    z-index: 9999;  /* Make sure the button is above all other elements */
}

.container {
    /* A4 dimensions */
    height: 297mm;
    width: 210mm;
    /* White background for A4 pages */
    background-color: white;
    /* Use box-shadow for a "paper" effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    /* Add some margin to separate pages */
    margin-top: 2.5mm ;
    margin-bottom: 2.5mm ;
    /* Inner spacing */
    padding: 16mm;
    /* Standard font */
    font-size: 16px;
    /* Override Bootstrap's max-width */
    max-width: initial;
    /* For footer absolute */
    position: relative;

}
.container-cover {
    /* Use dark blue grey as the background color */
    /* background-color: rgb(47,85,151); */
    /* color: white; */
    color: black;
}
/* .cover-bg {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    height: 55%;
} */
#report-wrapper {
    transform-origin: 0 0;
    transition: transform 0.3s ease;
}

.footer {
    /* Position the footer at the bottom of the container */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Set the height of the footer */
    height: 32px;
    /* Set the background color */
    /* background-color: rgb(47,85,151); */
    /* Set the color of the text */
    /* color: white; */
    /* Font settings */
    font-size: 16px;
    line-height: 32px; /* To vertically center text */
    z-index: 5;
}

.footer-text {
    text-align: center;
}

.footer-page-number {
    position: absolute;
    bottom: 0;
    right: 8mm; /* Converted 2em to pixels assuming 1em = 16px */
}

.h4_banner {
    font-weight: bold;
    position: absolute;
    top: 10mm;
    left: 0mm;
    width: 210mm;
    height: 14mm;
    padding-left: 16mm;
    padding-top: 3mm;
    padding-bottom: 3mm;
    background-color: #f8f8f8;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
.h4_filler {
    position: relative;
    height: 10mm;
    width: 100%;

}
.content_table_filler {
    height: 240mm;
    width: 100%;
    overflow: visible;
}


.h4_banner span {
    position: relative;
}
.line-h4 {
    position: absolute;
    bottom: 3px;
    left: 0;
    height: 7px;
    width: 100%;
    background-color: #ffb095;
    z-index: 0;
}

.h4-img-logo {
    position: absolute;
    top: 11mm;
    right: 5mm;
    width:  auto;
    height: 12mm;
    z-index: 99;
    cursor: default !important;
}
.logo-noh {
    top: 5mm;
    right: 4mm;
    opacity: 70%;
    width:  auto;
    height: 14mm;
}
.img-logo-modal {
    position: absolute;
    bottom: 6mm;
    left:   6mm;
    width:  auto;
    height: 24mm;
    cursor: default !important;
    opacity: 50%;
}

.img_title {
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}

@media print {
    /* Set page size to A4 */
    @page {
        size: A4;
    }

    /* Avoid talbes border in some pdf readers*/
    table, th, td {
        border: 0px none #ffffff !important;
    }
    table th, table td {
        text-align: left;
    }

    /* Hide elements that are not necessary to print */
    .navbar, .page-links, .back-button, .dl-button, .zoom-button, .upgrade-button {
        display: none;
    }

    /* Adjust the container for printing */
    .container {
        box-shadow: none; /* remove box-shadow for print */
        margin: 0px; /* remove margin */
        page-break-after: always;
    }

}
/* Boostrap headins in CSS2.1 for webkit */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 10px; /* ~0.5rem when the default body font-size is 16px */
}

h1 {
    font-size: 40px; /* ~2.5em with default body font-size of 16px */
}

h2 {
    font-size: 32px; /* ~2em */
}

h3 {
    font-size: 28px; /* ~1.75em */
}

h4 {
    font-size: 24px; /* ~1.5em */
}

h5 {
    font-size: 21px; /* ~1.25em */
}
/* h5 span {
    background-image: linear-gradient(90deg, #fdbca6, #fdbca6);
    background-repeat: no-repeat;
    background-position: 0 94%;
    background-size: 100% 6px;
} */
h5 span {
    position: relative;
}
.line-h5 {
    position: absolute;
    bottom: 1px;
    left: 0;
    height: 6px;
    width: 100%;
    background-color: #fdbca6;
    z-index: 0;
}

h6 {
    font-size: 19px; /* ~1em */
}

p {
    margin-top: 0;
    margin-bottom: 16px; /* ~1rem when the default body font-size is 16px */
}
/* Table styling */
tr.alternate {
    background-color: #f2f2f2; /* Light gray color for the striped effect */
}
tr.stars {
    font-size: 24px;
    background-color: #f2f2f2;
    color: #ffd700; /* Gold color for the stars */
    text-shadow: 0px 0px 2px #4b4000 ;
}
.table-s {
    line-height: 18px  !important; /* Adjust as needed */

}
.table-margin-s {
    margin-bottom: 0;
}
.table-text-s {
    font-size: 13px !important;
}
.table-text-xs {
    font-size: 12px !important;
    line-height: 16px !important;
}
.table-text-xxs {
    font-size: 11px !important;
    line-height: 15px !important;
}
.table-text-xxxs {
    font-size: 10.5px !important;
    line-height: 13.5px !important;
}
.table-text-xxxxs {
    font-size: 9px !important;
    line-height: 13.5px !important;
}
.table-padding-xs {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
table td, table th {
    padding:     4px !important; /* Adjust as needed */
    line-height: 19px  !important; /* Adjust as needed */
}


/* Cover page specific styles */
#cover-page {
    /* Center the contents */
    text-align: center;
}

#cover-page .header-center {
    position: absolute;
    top: -5mm;
    left: 86mm;
    width: 38mm;
    height: 53mm;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Style the logo */
#cover-page .img-logo {
    position: absolute;
    top:    10mm;
    left:   90mm;
    width:  30mm;
    height: 30mm;
    cursor: default !important;
}

/* Style the title */
#cover-page .title {
    position: absolute;
    top: 64mm;
    left: 0;
    width: 210mm;
    font-size: 40px;
    font-weight: bold;
    /* margin-bottom: 30mm; */
}
.title span {
    position: relative;
}
.title-spacer {
    display: inline-block;
    width: 22px;
}
.line-title {
    position: absolute;
    bottom: 2px;
    left: 0;
    height: 12px;
    width: 100%;
    background-color: #ffb095;
    z-index: 0;
}

#cover-page .made-date {
    position: absolute;
    top: 82mm;
    left: 0;
    width: 100%;
    font-size: 16px;
    text-align: center;
    color:rgba(0, 0, 0, 0.6)
}

/* Style the subtitle */
#cover-page .text-container {
    position: absolute;
    top: 110mm;
    left: 26mm;
    width: 158mm;
}
#cover-page .subtitle {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    min-height: 90px;
}

/* Style the shop closeup image */
#cover-page .img-shop-closeup {
    position: absolute;
    top: 158mm;
    left: 30mm;
    width: 150mm;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

/* Style the address */
#cover-page .address {
    position: absolute;
    top: 262mm;
    left: 16mm;
    width: 178mm;
    font-size: 18px;
}

/* Images styling */
.img-description {
    margin-top: 9px;
    margin-bottom: 12px;
}
.img-size-xl {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 178mm;
    max-height: 230mm;
}
.img-size-ll {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 178mm;
    max-height: 210mm;
}
.img-size-l {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 178mm;
    max-height: 190mm;
}
.img-size-l-square {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 178mm;
    max-height: 178mm;
}
.img-margin-l {
    margin-top: 10mm;
}
.img-margin-b-l {
    margin-bottom: 10mm;
}
.img-size-m {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 160mm;
    max-height: 190mm;
}
.img-margin-m {
    margin-top: 5mm;
}
.img-size-s {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 160mm;
    max-height: 170mm;
}
.img-size-xs {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 160mm;
    max-height: 125mm;
}
.img-size-xxs {
    margin-left: auto;
    margin-right: auto;
    max-height: 40mm;
    width: auto;
}
.img-size-legend {
    height: 4mm;
    width: auto;
    margin-bottom: 2px;
}
.img-margin-b-s {
    margin-bottom: 5mm;
}

.img-rounded {
    border-radius: 4px;
}

.img-rounded-l {
    border-radius: 8px;
}

.alert-secondary {
    color: #383d41;
    background-color: #f1f1f1 !important;
    border-color: #f1f1f1 !important;
    padding: 8px;
    margin-bottom: 16px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.dl-button {
    min-width: 130px; /* You can adjust this to your needs */
}

/* Style of the contents page */
h5 {
    padding-left: 16px;
}
h6 {
    padding-left: 32px;
}
#id_contents_page a {
    color: inherit; /* blue colors for links too */
    text-decoration: inherit; /* no underline */
}
#id_contents_page td {
    padding-top: 3px !important;
}
#id_contents_page .contents_h4 {
    font-size: 18px;
}

#id_contents_page .contents_h5 {
    padding-left: 16px;
}

#id_contents_page .contents_h6 {
    font-size: 14px;
    padding-left: 32px;
    font-style: italic;
}
#id_contents_page .td-compact {
    padding-top: 1px !important;
    padding-bottom: 2px !important;
}

.vertical-center_in_container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;  /* horizontally center as well */
}

.free-notes hr {
    margin-top: 10mm;
}

.graph-legend {
    font-size: 14px;
    text-align: center;
    font-style: italic;
    color:rgb(73, 73, 73);
    margin-top: 8px;
}

.table-ticks {
    padding: 1px !important;
    margin: 0px !important;
}

/*Images zoom*/
img:hover {
    cursor: zoom-in;
}
.modal_img_top {
    background-color: var(--color-6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Dummy text blur */
.text-dummy {
    /* color: transparent;
    text-shadow: 0 0 6px #00000086, 0 0 7px #00000096; */
    filter: blur(3px);
}
.container-report-images {
    position: relative;
    text-align: center;
}
.report-images-text-centered {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px;
    background-color: rgba(var(--color-3-n), 0.9);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    cursor: pointer;
    color: white;
}
.report-images-text-centered-adv {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 16px;
    background-color: rgba(var(--color-2-n), 0.9);
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    cursor: pointer;
    color: white;
}
.report-images-text-lower {
    font-size: 14px;
    position: absolute;
    bottom: 0%;
    margin-bottom: 14px;
    left: 50%;
    transform: translate(-50%, 0%);
    padding: 3px;
    padding-left: 8px;
    padding-right: 8px;
    /* background-color: rgba(var(--color-12-n), 0.65); */
    background-color: var(--bs-gray);
    opacity: 0.8;
    color: var(--color-7);
    border-radius: 4px;
}

/* Table cells color scheme */
.table-header-color-feet {
    background-color: rgba(56, 194, 97, 0.25) !important;
}
.table-header-color-cycle {
    background-color: rgba(56, 162, 194, 0.25) !important;
}
.table-header-color-car {
    background-color: rgba(194, 102, 56, 0.25) !important;
}
.table-header-color-country {
    background-color: #cdc8f8 !important;
}
.table-cell-color-positive {
    background-color: rgba(192, 236, 210, 0.55) !important;
}
.table-cell-color-negative {
    background-color: rgba(255, 213, 213, 0.5) !important;
}

.popover {
    z-index: 9999 !important;
}

.competitors-txt-info {
    position: relative;
    font-size: 10px;
    color: grey;
    text-align: center;
    z-index: 2;
    background-color: white;
    width: 100%;
    padding-top: 1mm;
    padding-bottom: 1mm;
}
.competitors-warning {
    position: absolute;
    left: 19mm;
    width: 190mm;
    bottom: 36px;
    font-size: 9px;
    color: grey;
    text-align: justify;
}

.div-advertisement-short {
    margin-top: 16px;
    width: 673px;
    height: 852px;
}
.div-advertisement {
    margin-top: 16px;
    width: 673px;
    height: 900px;
}
.bg-header {

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e7f3fc+0,fff7f4+50,ebf8f2+100 */
    background: #e7f3fc; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZTdmM2ZjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmN2Y0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ViZjhmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-45deg,  #e7f3fc 0%, #fff7f4 50%, #ebf8f2 100%); /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e7f3fc), color-stop(50%,#fff7f4), color-stop(100%,#ebf8f2)); /* Chrome4-9,Safari4-5 */
    background: -webkit-linear-gradient(-45deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* Chrome10-25,Safari5.1-6 */
    background: -o-linear-gradient(-45deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* Opera 11.10-11.50 */
    background: -ms-linear-gradient(-45deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* IE10 preview */
    background: linear-gradient(135deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f3fc', endColorstr='#ebf8f2',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */


}
.bg-footer {

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e7f3fc+0,fff7f4+50,ebf8f2+100 */
    background: #e7f3fc; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZTdmM2ZjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmN2Y0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ViZjhmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-45deg,  #e7f3fc 0%, #fff7f4 50%, #ebf8f2 100%); /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e7f3fc), color-stop(50%,#fff7f4), color-stop(100%,#ebf8f2)); /* Chrome4-9,Safari4-5 */
    background: -webkit-linear-gradient(-45deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* Chrome10-25,Safari5.1-6 */
    background: -o-linear-gradient(-45deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* Opera 11.10-11.50 */
    background: -ms-linear-gradient(-45deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* IE10 preview */
    background: linear-gradient(135deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f3fc', endColorstr='#ebf8f2',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */


}
.bg-rainbow {

    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e7f3fc+0,fff7f4+50,ebf8f2+100 */
    background: #e7f3fc; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZTdmM2ZjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZmZmN2Y0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ViZjhmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(-45deg,  #e7f3fc 0%, #fff7f4 50%, #ebf8f2 100%); /* FF3.6-15 */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#e7f3fc), color-stop(50%,#fff7f4), color-stop(100%,#ebf8f2)); /* Chrome4-9,Safari4-5 */
    background: -webkit-linear-gradient(-45deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* Chrome10-25,Safari5.1-6 */
    background: -o-linear-gradient(-45deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* Opera 11.10-11.50 */
    background: -ms-linear-gradient(-45deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* IE10 preview */
    background: linear-gradient(135deg,  #e7f3fc 0%,#fff7f4 50%,#ebf8f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7f3fc', endColorstr='#ebf8f2',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */


}

.hide-content {
    display: none !important;
}