@import url("https://use.typekit.net/bdj1oop.css");

html,
body,
.content {
    height: 100%
}

body {
    background: url(../images/gridline.svg) fixed;
    background-size: 65px 65px;
    background-blend-mode: overlay;
    font-family: "futura-pt", sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    letter-spacing: .05em;
    color: #fff
}

a,
a:hover,
a:focus {
    text-decoration: none;
    transition: all .2s ease-out
}

button {
    background: unset;
    border: unset
}

hr.dashed {
    border: 0;
    border-bottom: 1px dashed #fff;
    margin: 3em 0
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0 0 25px 0;
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
    color: #fff
}

h1.page-title {
    text-align: center
}

a {
    font-weight: 400
}

.site-logo {
    z-index: 3
}

img.custom-logo {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: auto;
    height: fit-content
}

header {
    z-index: 5;
    width: 100%
}

header .menu-top-menu-container {
    display: inline
}

ul.menu {
    padding: 0
}

header .top-bar {
    display: inline-flex
}

header .container {
    justify-content: center;
    align-items: center;
    height: 100%
}

header .top-bar li a,
.mobile-menu ul a {
    color: #fff;
    text-transform: uppercase;
    font-family: "futura-pt-bold", sans-serif
}

header .top-bar li a:hover {
    color: #fff
}

header .top-bar li .sub-menu {
    display: none;
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    background: #212529;
    margin: 3.25em 0 0;
    padding: 0;
    list-style: none;
    width: 15em
}

header .top-bar li .sub-menu a {
    color: #fff;
    padding: .25rem;
    text-align: center
}

header .top-bar>.menu-item-has-children:hover>.sub-menu,
header .top-bar .menu-item-has-children .sub-menu>.menu-item-has-children:hover .sub-menu {
    display: block
}

header .top-bar .sub-menu li .sub-menu {
    top: 0;
    left: 100%
}

@media only screen and (min-width:768px) {
    .desktop-menu {
        display: inline
    }

    header .desktop-menu li {
        margin: .2em 1em
    }

    .main-nav {
        display: none
    }
}

@media only screen and (max-width:991px) {
    header .desktop-menu li {
        margin: .2em
    }

    header .top-bar li a {
        padding: .5em .3em
    }
}

@media only screen and (max-width:767px) {
    .desktop-menu {
        display: none
    }

    footer {
        margin: 4em 0;
        text-align: center
    }
}

#footer-sidebar ul {
    list-style: none;
    padding-left: 0;
    line-height: 2
}

h3.widget-title {
    border-bottom: 1px solid #fff;
    padding: 0 0 .5em;
    margin: 0 1em .5em;
    font-size: large
}

h2.widget-title:after {
    content: "";
    width: 40px;
    height: 3px;
    display: block;
    margin: 20px auto 0
}

.search-form {
    position: relative;
    float: right
}

.search-form input {
    width: 100px;
    border: 0;
    float: right;
    padding: .5em 1em;
    padding-right: 3.5em;
    font-size: 12px;
    border-radius: .5em;
    outline: none;
    transition: width 1s ease-in-out, padding-left 1s ease-in-out, padding-right 1s ease-in-out
}

.search-form button {
    text-align: right;
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    border: none;
    width: 2em;
    color: #b7b7b7;
    background-color: transparent;
    cursor: pointer;
    transform: rotateY(180deg)
}

@media screen and (min-width:1024px) {
    .search-form input:hover {
        width: 200px
    }
}

#menu-product-categories li {
    list-style: none;
    padding: .8em 0;
    margin: .2em 0
}

#menu-product-categories a {
    font-size: medium;
    font-weight: 600
}

.wpc-filter-collapsible .wpc-filter-title button .wpc-open-icon,
.wpc-filter-has-selected .wpc-filter-collapsible.wpc-closed .wpc-filter-title button .wpc-open-icon {
    border-left: 1px solid #fff !important;
    border-top: 1px solid #fff !important
}

.accordion-button:focus {
    border-color: unset !important;
    box-shadow: unset !important
}

.accordion-button:not(.collapsed) {
    color: #fff !important;
    background-color: #fff !important
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important
}

#footer-menu .accordion-item {
    border: unset;
    border-bottom: 1px solid #fff;
    background-color: transparent !important
}

#footer-menu .accordion-item:first-of-type,
#footer-menu .accordion-item:last-of-type {
    border-radius: 0
}

#footer-menu .accordion-button {
    background-color: transparent !important;
    padding: 1em 0;
    box-shadow: none !important
}

#footer-menu .accordion-body {
    padding: 0
}

#footer-menu .accordion-header ul,
#footer-menu .accordion-header .textwidget,
#footer-menu .accordion-body .widget-title {
    display: none
}

.custom-category-thumbnail {
    position: relative;
    aspect-ratio: 16/9
}

.custom-category-thumbnail:before,
.bevel:before,
.stylish-container:before {
    content: '';
    box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .5), inset -1px -1px 1px rgba(0, 0, 0, .5)
}

.custom-category-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.custom-category-thumbnail .text-box {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%)
}

.custom-category-thumbnail .text-box h2 {
    line-height: 1
}

.stylish-container {
    background-color: rgba(0, 0, 0, .2);
    border-radius: .2em;
    backdrop-filter: blur(2px);
    color: #fff;
    overflow: hidden;
    border: rgba(255, 255, 255, .2) 1px solid
}

#__wp-uploader-id-2,
#__wp-uploader-id-2 a,
#__wp-uploader-id-2 span {
    color: #000
}

#__wp-uploader-id-2 button.button.media-button.button-primary.button-large.media-button-select {
    width: auto
}

#__wp-uploader-id-2 .media-frame-toolbar .media-toolbar {
    top: auto;
    bottom: -47px;
    height: auto;
    overflow: visible;
    border-top: 1px solid #dcdcde
}

#overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 10;
    cursor: pointer;
    overflow: scroll
}

.overlay-content {
    position: relative;
    transform: translate(-50%, 10%);
    left: 50%;
    padding: 2em;
    background: #fff
}

@media only screen and (min-width:768px) {
    .overlay-content {
        width: 75%
    }
}

@media only screen and (max-width:767px) {
    .overlay-content {
        width: 100%
    }
}

.profile-container {
    margin-top: -6em
}

.profile_form {
    max-width: 700px;
    width: 100%;
    position: relative;
    transform: translate(-50%, 20%);
    left: 50%;
    padding: 2em;
    background: #fff;
    color: #000
}

.profile_form .acf-form-fields {
    display: flex;
    flex-wrap: wrap;
    margin: -.75rem 0 0 -.75rem
}

.profile_form .acf-field-image {
    text-align: center;
    width: 100%
}

.profile_form .acf-form-submit {
    text-align: center;
    margin: 1em 0
}

.profile_form .acf-fields>.acf-field,
.profile_form .acf-field-group>.acf-label {
    width: 100%
}

.profile_form .acf-field-group>.acf-label {
    border-bottom: 1px solid #000
}

.profile_form .-border {
    border: unset !important
}

.acf-field input[type=text],
.acf-field input[type=password],
.acf-field input[type=date],
.acf-field input[type=datetime],
.acf-field input[type=datetime-local],
.acf-field input[type=email],
.acf-field input[type=month],
.acf-field input[type=number],
.acf-field input[type=search],
.acf-field input[type=tel],
.acf-field input[type=time],
.acf-field input[type=url],
.acf-field input[type=week],
.acf-field textarea,
.acf-field select {
    font-size: 13px !important
}

.user-role li {
    background: none;
    color: #fff
}

#outer {
    padding: 0;
    margin: 0 auto;
    width: 100%
}

.wpc-filters-section {
    border-bottom: 1px solid #fff
}

#breadcrumbs {
    font-size: 14px;
    color: #fff;
    padding: 1em 0;
    text-align: center;
    margin: 0 0 2em
}

#breadcrumbs a {
    text-decoration: none
}

#breadcrumbs a:last-child {
    font-weight: bold;
    text-transform: uppercase
}

a {
    color: var(--secondary-colour)
}

a:hover {
    color: #fff
}

.primary-text,
.custom-category-thumbnail .text-box,
.custom-category-thumbnail .text-box h2 {
    color: var(--primary-colour) !important
}

.primary-bg,
header,
hr.dashed,
#breadcrumbs {
    background-color: var(--primary-colour) !important
}

.primary-border {
    border-color: var(--primary-colour) !important
}

.secondary-text {
    color: var(--secondary-colour) !important
}

.secondary-bg {
    background-color: var(--secondary-colour) !important
}

.secondary-border {
    border-color: var(--secondary-colour) !important
}

::selection {
    color: var(--primary-colour);
    background: var(--secondary-colour)
}

.bgimg {
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
    object-position: 50% 50%
}

.subcategories-navigation ul {
    list-style: none;
    padding: 0
}

.subcategories-navigation li {
    background-color: #fff;
    padding: .5em;
    margin: .5em 0
}

.subcategories-navigation a {
    color: var(--primary-colour);
    font-weight: bold;
    text-transform: uppercase
}

.subcategories-navigation li:hover {
    background-color: var(--secondary-colour)
}

.series-navigation ul {
    list-style: none;
    padding: 0
}

.series-navigation li {
    border-bottom: 1px solid #eee;
    padding: .5em 0
}

.series-navigation a {
    color: #fff
}

.series-navigation a:hover {
    color: var(--secondary-colour)
}

#installButton {
    position: fixed;
    padding: 2em;
    background-color: var(--secondary-bg-color, #fff);
    color: var(--primary-text-color, #000);
    text-transform: uppercase;
    font-size: 1.5em;
    padding: .5em;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
    display: none;
    font-family: 'futura-pt-bold', sans-serif;
    bottom: 5em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    border-radius: 25px
}

.tiktok-placeholder {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    background: #f3f3f3;
    position: relative
}

.tiktok-embed-container {
    display: none
}

.hamburgler.no-hamburgler {
    transform: rotate(-45deg)
}

.bun,
.meat {
    display: block;
    width: 100%;
    background: #fff;
    background-color: #fff;
    height: 15%;
    transition: .3s ease all;
    border-radius: 2px
}

.no-hamburgler .top {
    height: 38%;
    width: 20%;
    margin-left: 40%;
    border-radius: 50px 50px 0 0
}

.no-hamburgler .bottom {
    height: 38%;
    width: 20%;
    margin-left: 40%;
    border-radius: 0 0 50px 50px
}

.meat {
    margin: 15% 0
}

.no-hamburgler .meat {
    margin: 2% 0
}

.custom-woocommerce img {
    max-width: 100%;
    height: auto
}

.custom-woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
    width: 38% !important
}

.custom-woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
    width: 58%
}

@media only screen and (max-width:767px) {

    h1.product_title,
    .sub-title {
        text-align: center
    }
}

@media only screen and (min-width:768px) {

    h1.product_title,
    .sub-title {
        display: inline-block
    }
}

h1.product_title {
    margin-bottom: 0
}

.sub-title {
    font-family: "futura-pt", sans-serif;
    letter-spacing: .05em;
    line-height: 1.5;
    opacity: .7;
    margin: 0 .5rem;
    color: var(--secondary-colour);
}

img.attachment-shop_catalog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.sku_wrapper {
    display: block;
    clear: both;
    content: ""
}

.cart {
    width: 100%;
    padding: 1em 0
}

.cart button {
    color: #fff
}

.custom-woocommerce span.onsale {
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    z-index: 1;
    width: 6em;
    padding: .5em;
    text-align: center;
    left: 0
}

.products span.onsale {
    transform: scale(.7);
    left: unset;
    margin: 0 -2.5em
}

.products a.add_to_cart_button {
    width: 100%
}

.defaultSwiper4 span.onsale {
    transform: scale(.6);
    left: -1.5em;
    margin: 0
}

.custom-woocommerce span.onsale:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 70%;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg) translateY(-70%);
    width: 1.8em;
    height: 1.8em;
    border-radius: .1em .2em
}

.products.custom-woocommerce span.onsale:after {
    top: 49%;
    left: 71%
}

.custom-woocommerce .quantity .qty {
    text-align: center;
    font-size: 20px;
    width: 100%;
    height: 100%
}

.custom-woocommerce div.product form.cart {
    margin-top: 2em
}

.custom-woocommerce div.product form.cart .variations label {
    padding: 1em .5em
}

.custom-woocommerce div.product form.cart .variations select {
    padding: 1em .5em
}

.flex-control-nav {
    display: flex;
    padding-left: 0;
    list-style: none
}

.custom-woocommerce table.shop_attributes {
    width: 100%;
    margin: 1em 0;
    clear: both
}

.custom-woocommerce table.shop_attributes p {
    margin-bottom: 0
}

.woocommerce-product-attributes-item p {
    margin: 0
}

.collapsed {
    border-bottom: 1px solid rgb(255, 255, 255, 1)
}

.stock {
    border-bottom: 1px dashed rgb(255, 255, 255, .2);
    padding: 2em 0;
    width: 100%
}

.share-button {
    text-align: center;
    font-size: large
}

a.wl-add-to.wl-add-but.button,
.share-links {
    font-size: 25px;
    border-radius: 0;
    text-align: center;
    width: 100%;
    padding: 0;
    line-height: unset;
    background: none
}

.wishlist-wrapper>a,
.share-button>a,
.input-text> {
    position: relative;
    top: calc(50% - 10px)
}

#social-group {
    display: none;
    float: right
}

#social-group a {
    width: 10%;
    font-size: xx-large;
    text-align: center;
    margin: 0 .2em
}

td.woocommerce-product-attributes-item__value {
    padding: 1em 0 1em 2em
}

.collapsed i.fa-solid.fa-chevron-up {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

i.fa-solid.fa-chevron-up {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg)
}

ul.page-numbers {
    display: flex;
    list-style: none;
    padding-left: 0;
    justify-content: center
}

.page-numbers li {
    margin: 0 .5em;
    text-align: center
}

.page-numbers a,
.page-numbers span {
    padding: .3em .7em;
    width: 2em;
    height: 2em;
    text-align: center
}

li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--dashboard span:before {
    content: "\f015 \0020";
    font: var(--fa-font-solid);
    font-size: x-large
}

li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--orders span:before {
    content: "\f290 \0020";
    font: var(--fa-font-solid);
    font-size: x-large
}

li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--downloads span:before {
    content: "\f358 \0020";
    font: var(--fa-font-solid);
    font-size: x-large
}

li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--edit-address span:before {
    content: "\f2b9 \0020";
    font: var(--fa-font-solid);
    font-size: x-large
}

li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--edit-account span:before {
    content: "\f2bd \0020";
    font: var(--fa-font-solid);
    font-size: x-large
}

li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--bookings span:before {
    content: "\f02e \0020";
    font: var(--fa-font-solid);
    font-size: x-large
}

li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--customer-logout span:before {
    content: "\f2f5 \0020";
    font: var(--fa-font-solid);
    font-size: x-large
}

.single_add_to_cart_button {
    text-transform: uppercase;
    border-radius: .25rem;
    border: 1px solid #dee2e6
}

li.woocommerce-MyAccount-navigation-link span:before {
    font-size: large !important
}

li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--points-and-rewards span:before {
    content: "\f005";
    font: var(--fa-font-solid)
}

li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--account-wishlists span:before {
    content: "\f004";
    font: var(--fa-font-solid)
}

li.woocommerce-MyAccount-navigation-link {
    border-bottom: 1px dashed #fff
}

.woocommerce-MyAccount-navigation-link a {
    color: #fff;
    font-size: large;
    text-transform: uppercase
}

.acf-map {
    width: 100%;
}

.acf-map img {
    max-width: inherit !important
}

.gm-style-iw-d {
    overflow: visible !important;
    max-height: unset !important;
    padding: 2em 0;
    width: min-content;
    min-width: 250px
}

.gm-style-iw.gm-style-iw-c {
    padding: 0 !important;
    max-width: unset !important;
    max-height: unset !important
}

.gm-style-iw-chr {
    position: absolute;
    right: 0;
}

.widget .wpc-term-count-0:not(.wpc-has-not-empty-children) a,
.widget-area .widget .wpc-term-count-0:not(.wpc-has-not-empty-children) a,
.widget-area .wpc-filters-labels li.wpc-term-count-0:not(.wpc-has-not-empty-children) label,
.widget-area .wpc-filters-labels li.wpc-term-count-0:not(.wpc-has-not-empty-children) label span.wpc-filter-label-wrapper,
.wpc-filters-labels li.wpc-term-count-0:not(.wpc-has-not-empty-children) label,
.wpc-filters-labels li.wpc-term-count-0:not(.wpc-has-not-empty-children) label span.wpc-filter-label-wrapper,
.wpc-term-count-0:not(.wpc-has-not-empty-children),
.wpc-term-count-0:not(.wpc-has-not-empty-children) a,
body .wpc-filters-main-wrap li.wpc-term-count-0:not(.wpc-has-not-empty-children) label,
body .wpc-filters-main-wrap li.wpc-term-count-0:not(.wpc-has-not-empty-children) label a {
    opacity: 1 !important;
}

header .top-bar li {
    width: auto;
}

#youtube-playlists-list ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#youtube-playlists-list li {
    display: inline-flex;
    flex-flow: wrap;
}

#youtube-playlists-list a.playlist-link {
    padding: 0.5em 1em;
    border-radius: 0.2em;
    margin: 0 1em;
}

#youtube-playlists-list a.playlist-link.active {
    color: var(--primary-colour);
    background-color: var(--secondary-colour);
    font-weight: bold;
}

@media screen and (min-width: 992px) {
    .page-header-bg {
        aspect-ratio: 16 / 3;
    }
}

.page-header-bg {
    width: 100%;
    position: relative;
    overflow: hidden;
}

@media screen and (min-width: 576px) {
    .portal-header {
        height: 150px;
    }
}

.portal-header {
    margin: 0 auto;
    max-width: 800px;
    position: relative;
}

@media screen and (min-width: 346px) and (max-width: 575px) {
    .page-header-bg {
        aspect-ratio: 16 / 10;
    }
}

.portal-header h2,
.portal-content,
.portal-content h6 {
    color: #212529;
}

.portal-content {
    background-color: #eee;
    width: 100%;
    padding: 2em 0;
    z-index: 99;
}

.bg-white,
.bg-white h1,
.bg-white h2,
.bg-white h3,
.bg-white h4,
.bg-white h5,
.bg-white h6 {
    color: #333;
}

.portal-content .grid {
    margin: 2em 2%;
}

.info-title {
    letter-spacing: 3px;
    color: #808080;
    font-size: small;
    margin-bottom: 1em;
    text-transform: uppercase;
}

.info-title:before {
    content: '|';
    color: var(--secondary-colour);
    margin: 0 0.5em 0 0;
    font-size: small;
    vertical-align: top;
}


.portal-content .repeater-group {
    padding: 2em 0;
    border-bottom: 1px solid #999;
}

.add-btn {
    width: 100%;
    max-width: 500px;
    margin: 2em auto;
}

#a4-canvas,
.a4-page {
    color: #333;
    font-size: small;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 10mm;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    "

}

#a4-content ul {
    list-style: none;
    margin: 0;
}

@media print {
    #overlay {
        display: none;
    }

    #a4-canvas {
        box-shadow: none;
        width: 100%;
        min-height: auto;
        margin: 0;
        padding: 0;
    }
}

.logo img {
    width: 100%;
    display: block;
    padding: 20px 20px 0 0px;
}

#a4-canvas h1,
#a4-canvas h2,
#a4-canvas h3,
#a4-canvas h4,
#a4-canvas h5,
#a4-canvas h6,
#a4-canvas,
.a4-page h1,
.a4-page h2,
.a4-page h3,
.a4-page h4,
.a4-page h5,
.a4-page h6,
.a4-page {
    color: #333;
}

th.no {
    width: 35px;
}

th.time {
    width: 70px;
}

th.customer {
    width: 193.13px;
}

th.region {
    width: 60px;
}

th.textbox {
    width: 150px;
}


.group-container {
    page-break-inside: avoid;
    /* Prevent breaking inside */
    break-inside: avoid;
    /* Modern syntax */
}

.table {
    page-break-inside: avoid;
}


#report-modal {
    width: 400px;
    border-radius: 5px;
}

.spinner {
    margin: 0 auto;
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.grid {
    display: flex;
    position: relative;
    margin: 2em auto;
    padding: 0;
}

.grid-item {
    padding: 1%;
}


#report-modal-overlay,
#edit-comment-modal-overlay,
#group-summary-modal-overlay,
#edit-report-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0 0 5em 0;
}

#edit-report-modal-content {
    width: 100%;
    max-width: 500px;
    background-color: #fff;
    padding: 1em;
    color: #333;
}

#report-modal-content,
#edit-comment-modal,
#group-summary-modal,
#edit-report-modal-content {
    max-height: 95vh;
    overflow-y: auto;
    padding: 10px;
}

.pages-container,
#preview-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Gap between pages, not blocks */
}

.report-page {
    color: #333;
    margin: 0 auto 10px auto;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 5mm;
    position: relative;
    page-break-after: always;
}

@media only screen and (min-width: 768px) {
    .report-page {
        width: 210mm;
        height: 297mm;
    }
}

@media only screen and (max-width: 767px) {
    .report-page {
        width: 100%;
        height: auto;
    }
}

.a4-page {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    page-break-after: always;
}



.report-page h6 {
    color: #333;
}



.report-header,
.report-footer {
    padding: 10px;
    text-align: center;
    flex-shrink: 0;
}

.report-header {
    flex: 0 0 auto;
    text-align: center;
    margin-bottom: 10px;
}

.report-footer {
    flex: 0 0 auto;
    text-align: center;
    margin-top: 10px;
}

.report-content {
    display: flex;
    flex-direction: column;
    padding: 0 30px;
    box-sizing: border-box;
    font-size: small;
}

.report-content th {
    text-transform: uppercase;
}

.report-block {
    margin: 0;
    padding: 15px 0;
}

#loading-message {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
}




/* Modal Overlay */
#preview-modal-overlay {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
}

/* Modal Content */
#preview-modal-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

/* A4 Page */


/* Page Content */
.page-content {
    height: 100%;
    overflow: hidden;
}

.iti.iti--container {
    color: #000;
}

.product-row td {
    padding: 6px 2px;
}

.profile-image-wrapper {
    width: 100%;
    max-width: 220px;
    border: 5px solid var(--primary-colour);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
    background-color: #fff;
    margin: 0 auto 1rem auto;
    position: absolute;
}

@media screen and (min-width: 576px) {
    .profile-image-wrapper {
        bottom: 0;
    }
}

@media screen and (max-width: 575px) {
    .profile-container {
        height: 300px;
    }

    .profile-image-wrapper {
        left: 50%;
        transform: translateX(-50%);
        bottom: 95px;
    }
}

.profile-image-wrapper img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

#overlay-profile {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    cursor: pointer;
    overflow: scroll;
}

@media only screen and (min-width: 768px) {
    .overlay-content {
        width: 75%;
    }
}

.overlay-content {
    position: relative;
    transform: translate(-50%, 10%);
    left: 50%;
    padding: 2em;
    background: #fff;
}

.select2-selection__rendered {
    padding: 0 !important;
    font-size: small;
    width: 100%;
}

input.select2-search__field {
    border: 0 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--secondary-colour) !important;
    color: var(--primary-colour) !important;
}

.select2-container.select2-container--open .select2-dropdown--below {
    min-width: 250px; !important;
}


.image-preview-wrapper {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: #f9f9f9;
}

.image-preview-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-preview-wrapper .delete-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: red;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
  font-weight: bold;
}

.report-table {
    font-family: "futura-pt-condensed", sans-serif;
}

.report-table th {
    font-weight: 700;
    text-transform: uppercase;
}

.report-table td{
    font-weight: 400;
}

.table-wrapper {
  max-height: 500px;
  overflow-y: auto;
}

.table-wrapper table {
  margin-bottom: 0;
}

.table.report-table thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
  border-bottom:1px solid #000;
  z-index: 1;
}


.dark-matte-glass{
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
    --bs-bg-opacity: 0.25;
    backdrop-filter: blur(5px);
}

.report-actions {
    position: absolute;
    border-radius: .25rem;
    background-color: #fff;
    padding: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    justify-content: space-between;
    --bs-gutter-y: 0.25rem;
    --bs-gutter-x: 0.25rem;
    width:250px;
    z-index: 9;
}