:root {
    --muted-gray: #F8F8F8;
    --muted-blue: #eef2fb;
    --muted-yellow: #f9f5f0;
    --muted-green: #e8f6f5;

    --muted-teal: #82a6a1;
    --muted-orange: #d4a373;
    --muted-rose: #caa6b1;
    --muted-olive: #a8a878;
    --muted-lavender: #b5a1c8;

    --muted-purple: #eeeffe;
    --muted-coral: #d8a39d;
    --muted-charcoal: #36454F; /* Charcoal Gray */
    --muted-mint: #c4e3cb;
    --muted-sky: #c6d8e4;
    --muted-sand: #e2d4c5;
}


:root {
    --green-color: #5e9f5c; /* Darker muted green */
    --dark-green: #185642; /* Darker muted green */
    --light-green: #D6EDD9; /* Darker muted green */
    --dark-green-hover: #21765a; /* Slightly darker shade for hover */
    --green-hover: #4f8a4d; /* Even deeper muted green for hover */
}


html, body {
    height: 100%;
    width: 100%;
    font-family: 'Inter', sans-serif !important;
}


/*
 * Responsive font scaling for smaller devices
 * When the viewport width is 768px or less (typically tablets and mobile),
 * reduce the base html font-size to 14px.
 * This scales down all rem-based spacing and text sizes proportionally,
 * keeping the design compact and readable on smaller screens.
 */

/* Default (desktop and large screens) */
html {
    font-size: 16.5px;
}

/*!* Extra large desktops and down (max-width: 1749px) *!*/
/*@media (max-width: 1749px) {*/
/*  html {*/
/*    font-size: 16.5px;*/
/*  }*/
/*}*/

/*!* Large desktops and down (max-width: 1500px) *!*/
/*@media (max-width: 1500px) {*/
/*  html {*/
/*    font-size: 16px;*/
/*  }*/
/*}*/

/*!* Medium desktops and down (max-width: 1399px) *!*/
/*@media (max-width: 1399px) {*/
/*  html {*/
/*    font-size: 15px;*/
/*  }*/
/*}*/

/*!* Small desktops and down (max-width: 1199px) *!*/
/*@media (max-width: 1199px) {*/
/*  html {*/
/*    font-size: 13px;*/
/*  }*/
/*}*/

/*!* Tablets and down (max-width: 991px) *!*/
/*@media (max-width: 991px) {*/
/*  html {*/
/*    font-size: 15.5px;*/
/*  }*/
/*}*/

/*!* Small tablets and large phones (max-width: 767px) *!*/
/*@media (max-width: 767px) {*/
/*  html {*/
/*    font-size: 15px;*/
/*  }*/
/*}*/

/*!* Phones (max-width: 575px) *!*/
/*@media (max-width: 575px) {*/
/*  html {*/
/*    font-size: 14px;*/
/*  }*/
/*}*/

/*!* Extra small phones (max-width: 340px) *!*/
/*@media (max-width: 340px) {*/
/*  html {*/
/*    font-size: 12px;*/
/*  }*/
/*}*/



/* Medium desktops and large tablets */
@media (max-width: 1500px) {
    html {
        font-size: 16px;
    }
}

@media (max-width: 1399px) {
    html {
        font-size: 15px;
    }
}

/* Tablets and small desktops */
@media (max-width: 1199px) {
    html {
        font-size: 14px;
    }
}

/* Tablets and large phones */
@media (max-width: 991px) {
    html {
        font-size: 13.5px;
    }
}

/* Phones */
@media (max-width: 768px) {
    html {
        font-size: 13px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    html {
        font-size: 12.5px;
    }
}

@media (min-width: 1750px) {
    .container {
        max-width: 1548px;
    }
}

@media (max-width: 1749px) {
    .container {
        width: 100%;
        max-width: calc(100% - 10rem);
    }
}

@media (max-width: 991px) {
    .container {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 767px) {
    .container,
    .container-fluid {
        padding: 0 .7142857143rem;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    input:not(.dataTables_filter input),
    textarea,
    select {
        font-size: 16px !important; /* Prevent Safari zoom */
    }
}



.text-dark-green {
    color: var(--dark-green) !important;
}

.text-green {
    color: var(--green-color) !important;
}


.green-links a {
    color: var(--green-color) !important;
    text-decoration: none; /* optional, cleaner look */
}

.black-links a {
    color: black !important;
}


.heading-16 { font-size: 1rem; font-weight: 500; color: #282c2d; }      /* 16px */
.heading-20 { font-size: 1.25rem; font-weight: 500; color: #282c2d; }   /* 20px */
.heading-24 { font-size: 1.5rem; font-weight: 500; color: #282c2d; }    /* 24px */
.heading-32 { font-size: 2rem; font-weight: 500; color: #282c2d; }      /* 32px */
.heading-40 { font-size: 2.5rem; font-weight: 500; color: #282c2d; }    /* 40px */
.heading-42 { font-size: 2.625rem; font-weight: 500; color: #282c2d; }  /* 42px */

.heading-36 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem); /* 24px–36px */
    font-weight: 500;
    color: #282c2d;
}

.heading-46 {
    font-size: clamp(1.75rem, 4.5vw, 2.875rem); /* 28px–46px */
    font-weight: 500;
    color: #282c2d;
}

.heading-48 {
    font-size: clamp(2rem, 5vw, 3rem); /* min 32px, fluid, max 48px */
    font-weight: 500;
    color: #282c2d;
}

.heading-60 {
    font-size: clamp(2.25rem, 5.5vw, 3.75rem); /* min ~36px, fluid, max 60px */
    font-weight: 500;
    color: #282c2d;
}

.heading-70 {
    font-size: clamp(2.75rem, 6.5vw, 4.375rem); /* min 44px, fluid, max 70px */
    font-weight: 500;
    color: #282c2d;
}

.heading-100 {
    font-size: clamp(3rem, 8vw, 6.25rem); /* min 48px, ideal fluid, max 100px */
    font-weight: 500;
    color: #282c2d;
}

.heading-125 {
    font-size: clamp(3.5rem, 10vw, 7.8125rem); /* min 56px, max 125px */
    font-weight: 500;
    color: #282c2d;
}

.text-14 {
    font-size: 0.875rem; /* 14px */
    font-weight: 400;
    line-height: 1.4;
}

.text-16 {
    font-size: 1rem;
    font-weight: 400;
} /* 16px */

.text-20 {
    font-size: 1.25rem;
    font-weight: 400;
} /* 20px */

.text-24 {
    font-size: 1.5rem;
    font-weight: 400;
} /* 24px */

.text-32 {
    font-size: 2rem;
    font-weight: 400;
} /* 32px */

.text-40 {
    font-size: 2.5rem;
    font-weight: 400;
} /* 40px */

.text-42 {
    font-size: 2.625rem;
    font-weight: 400;
} /* 42px */


.fs-xxs {
  font-size: 0.625rem !important;
}


/* Responsive border utilities (mimicking Bootstrap naming) */

@media (min-width: 992px) {
    .border-lg {
        border: 1px solid #E6E6E6;
    }
    .border-lg-0 {
        border: 0 !important;
    }
    .border-lg-top {
        border-top: 1px solid #E6E6E6;
    }
    .border-lg-end {
        border-right: 1px solid #E6E6E6;
    }
    .border-lg-bottom {
        border-bottom: 1px solid #E6E6E6;
    }
    .border-lg-start {
        border-left: 1px solid #E6E6E6;
    }
}


/* Entity card rules */

.copyright-icon {
  width: 113.98px;
  height: 40px;
}

.entity-card-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}


.entity-card-type-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
}


.entity-info-accordion {
    border-width: 1px 0px 1px 0px; /* Top, right, bottom, left */
    border-style: solid;
    border-color: #E6E6E6;
}

/* Add chevron to accordion button */
.entity-info-accordion .accordion-button::after {
    content: "›"; /* Right chevron symbol */
    font-size: 1.8rem;
    margin-left: auto; /* Push to the right */
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

/* Rotate the chevron when the accordion is open */
.entity-info-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(90deg); /* Pointing down when open */
}




.entity-info-accordion table tr {
    background: rgba(209, 231, 254, 0.3) !important;
    border: 1px solid #ffffff !important;
}

.entity-info-accordion table tr td {
    background: transparent !important;
}



/*@media (max-width: 600px) {*/
/*  button {*/
/*    margin: 8px 4px;*/
/*  }*/
/*}*/


/* Margin Y utilities - only for small screens, using rem, whole numbers only */
@media (max-width: 480px) {
    .sm-my-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .sm-my-1 {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
    }
    .sm-my-2 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }
    .sm-my-3 {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
    }
    .sm-my-4 {
        margin-top: 4rem !important;
        margin-bottom: 4rem !important;
    }
    .sm-my-5 {
        margin-top: 5rem !important;
        margin-bottom: 5rem !important;
    }
}

/* Padding Y utilities - only for small screens, using rem, whole numbers only */
@media (max-width: 480px) {
    .sm-py-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .sm-py-1 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .sm-py-2 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .sm-py-3 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    .sm-py-4 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    .sm-py-5 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
}



.bg-kg-green {
    background-image:
            linear-gradient(to top, #292c2d 0%, rgba(41, 44, 45, 0.73) 35%, rgba(41, 44, 45, 0) 100%),
            url('/static/images/kg-green-bg.png') !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-attachment: scroll !important; /* avoid fixed on mobile */
    color: #fff !important;
}


.bg-muted {
    background-color: var(--muted-gray) !important;
}

.bg-muted-blue {
    background-color: var(--muted-blue) !important;
}

.bg-muted-yellow {
    background-color: var(--muted-yellow) !important;
}

.bg-muted-green {
    background-color: var(--muted-green) !important;
}

.bg-light-green {
    background-color: var(--light-green) !important;
}

.bg-dark-green {
    background-color: var(--dark-green) !important;
}

.bg-muted-teal {
    background-color: var(--muted-teal) !important;
    color: white !important;
}

.bg-muted-orange {
    background-color: var(--muted-orange) !important;
    color: white !important;
}

.bg-muted-rose {
    background-color: var(--muted-rose) !important;
    color: white !important;
}

.bg-muted-olive {
    background-color: var(--muted-olive) !important;
    color: white !important;
}

.bg-muted-lavender {
    background-color: var(--muted-lavender) !important;
    color: white !important;
}

.bg-muted-charcoal {
    background-color: var(--muted-charcoal); /* Charcoal Gray */
}

.bg-green-gradient {
    background: linear-gradient(180deg, #68D0C6 0%, #FFFFFF 76.91%);
    background-size: cover;
}


#site-footer {
    font-size: .8235294118rem;
    font-weight: 300;
    color:white;
    /*background: #212529;*/
}
#site-footer-menu {
    font-size: .8235294118rem;
    line-height: 1em;
    font-weight: 300;
}

.hidden-content {
    display: none;
}

.hidden-data {
    display: none;
}

@media (min-width: 992px) {
    .col-lg-1-7 {
        flex: 0 0 14.2857%;
        max-width: 14.2857%;
    }
}

.footer3 .footer3-text,
.footer3 .footer3-menu {
    font-size: 0.8235294118rem;
    line-height: 1.4em;
}


.nav-link.scroll-link:hover {
    color: #0d6efd !important; /* Bootstrap primary, or replace with your brand color */
    transition: color 0.3s ease;
}


/*#site-footer-logos .logo{*/
/*  width: 10rem;*/
/*  height: 5.2941176471rem;*/
/*  margin: 0 auto 1.7647058824rem;*/
/*}*/

/*#site-footer-logos {*/
/*  padding:4.7058823529rem 0 3.5294117647rem*/
/*}*/


/*#site-footer-logos  .logo[_ngcontent-serverApp-c8]   img[_ngcontent-serverApp-c8] {*/
/*  display:block;*/
/*  margin:auto;*/
/*  width:100%;*/
/*  height:100%;*/
/*  object-fit:cover*/
/*}*/


#site-footer-logos {
    margin-top: 10rem;
}


#site-footer-menu a {
    /*background-color: var(--green-color); !* Charcoal Gray *!*/
    background-color: #212529
; /* Charcoal Gray */
    color: #FFFFFF; /* White text color */
    text-decoration: none; /* Remove underline */
    border-radius: 4px; /* Optional: rounded corners */
}

#site-footer-menu a:hover {
    color: #ffffff;
    font-weight: bold;
}


@media (max-width: 991px) {
    #site-footer-menu .col {
        margin-bottom: 2em;
        line-height: 1.2em;
    }
}


#menu .navbar-toggler-icon {
    width: 40px; /* Adjust the width to make it larger */
    height: 40px; /* Adjust the height to make it larger */
    background-size: 40px 40px; /* Ensure the background scales with the size */

    /* Updated background image: white SVG with dark stroke */
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}


.footer-title {
    font-weight: 700;
    margin-bottom: 1.5em;
    font-size: 1rem;
}

.footer-dark {
    background-color: #1e2024;
}

/*@media screen and (max-width:1600px) {*/
/*  .btn-vr-tour, .li-info, .suggested-search, .video {display:none}*/
/*}*/

.icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px;
    width: 50px;
    height: 50px;
}

.btn1 {
    cursor:pointer;
    font-size:1rem;
    display:inline-block;
    background:#0176D5;
    color:#fff!important;
    border-radius:.2941176471rem;
    border:none;
    min-height:2.9411764706rem;
    align-items:center;
    justify-content:center;
    padding:.5882352941rem 1.7647058824rem;
    line-height:1.7647058824rem;
    text-align:center;
    text-decoration:none;
}

/* Smaller button style */
.btn1-sm {
    cursor: pointer;
    font-size: 0.75rem; /* Smaller font size */
    display: inline-block;
    background: #0176D5;
    color: #fff !important;
    border-radius: 0.18rem; /* Smaller border-radius */
    border: none;
    min-height: 1.8rem; /* Smaller height */
    align-items: center;
    justify-content: center;
    padding: 0.3rem 1rem; /* Reduced padding */
    line-height: 1.2rem; /* Compact line height */
    text-align: center;
    text-decoration: none;
}

/* Medium button style */
.btn1-md {
    cursor: pointer;
    font-size: 0.875rem; /* Medium font size */
    display: inline-block;
    background: #0176D5;
    color: #fff !important;
    border-radius: 0.25rem; /* Medium border-radius */
    border: none;
    min-height: 2.2rem; /* Medium height */
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1.25rem; /* Medium padding */
    line-height: 1.4rem; /* Medium line height */
    text-align: center;
    text-decoration: none;
}

.btn1-lg {
    width: 100% !important;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}



.btn1-teal {
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    background: #20C997; /* Teal background color */
    color: #fff !important; /* White text for contrast */
    border-radius: .2941176471rem; /* Rounded corners */
    border: none; /* No border */
    min-height: 2.9411764706rem; /* Minimum height */
    align-items: center; /* Vertical alignment */
    justify-content: center; /* Horizontal alignment */
    padding: .5882352941rem 1.7647058824rem; /* Inner spacing */
    line-height: 1.7647058824rem; /* Line height for vertical text alignment */
    text-align: center; /* Center text horizontally */
    text-decoration: none; /* No underline */
    transition: background-color 0.2s, color 0.2s; /* Smooth hover effect */
}

.btn1-teal:hover {
    background: #17a589; /* Darker teal for hover effect */
    color: #f8f9fa !important; /* Slightly off-white text on hover */
}

/* Apply margin styling for extra small screens */
@media (max-width: 575.98px) {
    .btn1-teal {
        margin-top: 0.5rem !important; /* Matches Bootstrap's my-2 */
        margin-bottom: 0.5rem !important;
    }
}


@media (min-width: 992px) {
    .btn1 {
        transition: color .2s, background-color .2s, border-color .2s, filter .2s, opacity .2s
    }
}

.btn1:hover {
    background-color:#004d8b;
}

/* Disabled button style */
.btn1:disabled {
    cursor: not-allowed;
    background: #b0b0b0; /* Gray background for disabled state */
    color: #fff !important; /* Text color remains consistent */
    opacity: 0.6; /* Slightly fade the button */
}

.btn1.btn-100 {
    display: block;
    width:100%;
}

@media (max-width: 991px) {
    .btn1 {
        padding-left: 1em;
        padding-right: 1em;
    }
}


.btn1-outline {
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    background: transparent; /* No background for outline button */
    color: #0176D5 !important; /* Text color set to the same as the border */
    border-radius: .2941176471rem;
    border: 2px solid #0176D5; /* Outline border with same color */
    min-height: 2.9411764706rem;
    align-items: center;
    justify-content: center;
    padding: .5882352941rem 1.7647058824rem;
    line-height: 1.7647058824rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s; /* Smooth transition effect */
}

.btn1-outline:hover {
    background: #0176D5; /* Background color on hover */
    color: #fff !important; /* Text color changes to white on hover */
}

/*.btn1.btn-light {*/
/*	background-color: #fff;*/
/*	color: #0176d5 !important;*/
/*	border: 1px solid #0176D5;*/
/*}*/

/*.btn-light {*/
/*    display: inline-flex; !* Makes links inline but still allows flex properties *!*/
/*    min-height: auto;*/
/*    font-size: .8823529412rem;*/
/*    padding: .4117647059rem .7058823529rem;*/
/*    font-weight: 500;*/
/*    background-color: #fff;*/
/*    color: #0176d5 !important;*/
/*    border: 1px solid #0176D5;*/
/*    text-decoration: none;*/
/*    transition: background-color 0.3s ease, color 0.3s ease;*/
/*    margin-right: 0.5rem; !* Adds space between buttons *!*/
/*}*/

.btn-light {
    display: inline-flex; /* Keeps links inline while allowing flex properties */
    min-height: auto;
    font-size: .8823529412rem;
    padding: .4117647059rem .7058823529rem;
    font-weight: 500;
    background-color: #fff;
    color: #0176d5 !important;
    border: 1px solid #0176D5;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-right: 0.5rem; /* Adds space between buttons */

    /* New additions */
    border-radius: 50rem !important; /* Makes it pill-shaped */
    padding-left: 1rem;  /* Extra horizontal padding */
    padding-right: 1rem; /* Extra horizontal padding */
}


@media (max-width: 768px) {
    .btn-light {
        margin-top: 0.3rem; /* Smaller top margin on medium screens */
        margin-bottom: 0.3rem; /* Smaller bottom margin on medium screens */
    }
}



.btn-light:hover {
    background-color: #0176d5;
    color: #fff !important;
}


.btn-no-border {
    background-color: #f8f9fa !important; /* Light background color in hex */
    color: black; /* Set text color to black */
    padding: 0.5rem 1rem; /* Add padding */
    font-size: 1rem; /* Set font size */
    cursor: pointer; /* Pointer cursor on hover */
    border: none; /* Remove border */
    border-radius: 4px; /* Optional: Rounded corners */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth hover transition */
    text-decoration: none; /* Remove underline for links */
    width: auto;
}

/* Hover effect */
.btn-no-border:hover {
    background-color: #e2e6ea !important; /* Slightly darker grey on hover */
    color: black; /* Keep text color black on hover */
}




.tr-space {
    line-height: 35px;
}

.table-scroll {
    height:60vh;
    overflow-y:scroll;
}

.table-scroll-lg {
    height:80vh;
    overflow-y:scroll;
}

.mb-em-1 {
    margin-bottom: 1em;
}

a.result:focus {
    opacity: 1;
}

.break-url {
    /* Ensures long URLs break and wrap on small screens */
    word-break: break-all;
    overflow-wrap: anywhere;
}


.ui-autocomplete {
    max-height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}


#slider {
    height: 10px;
}

#slider .noUi-connect {
    background-color: #FFFFFF;

}

#slider .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px; /* half the width */
    border-radius: 9px;
}

/*#slider  .noUi-handle .noUi-touch-area {*/
/*  border-radius: 50%;*/
/*  border: solid 1px #0176D5;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  background-color: #fff;*/
/*}*/

/* #slider .noUi-value {*/
/*    color: #000000; !* Black text *!*/
/*}*/


/*#slider .noUi-value {*/
/*    color: #000000; !* Black text *!*/
/*    position: absolute;*/
/*    top: 150%; !* Moves values below the slider *!*/
/*    transform: translateX(-50%); !* Centers horizontally *!*/
/*    left: 50%; !* Aligns text with the handle *!*/
/*    white-space: nowrap; !* Prevents wrapping *!*/
/*}*/

/*#slider .noUi-value::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: -110%; !* Extends the line upwards *!*/
/*    left: 50%;*/
/*    width: 2px; !* Line thickness *!*/
/*    height: 100%; !* Line length *!*/
/*    background-color: #ffffff; !* White line *!*/
/*    transform: translateX(-50%);*/
/*}*/




.tag {
    display: inline-block;
    white-space: nowrap;
    font-size: .8235294118rem;
    line-height: 1.3em;
    line-height: 1.7647058824rem;
    background-color: #eef2fb;
    /*color: #0176d5;*/
    border-radius: .2941176471rem;
    position: relative;
    padding: 0 1.9411764706rem 0 .7058823529rem;
    margin: 0 .5882352941rem .5882352941rem 0;
}


.keyword-filter:focus, .search:focus {
    background-color:#F8F8F8;
}

.owl-carousel .owl-stage {
    display:flex !important
    /*!important not required but maybe need if there some others css rules for .owl-stage display */
}

.owl-carousel .item {
    padding: 0 5px; /* gives space on both sides */
    box-sizing: border-box;
}


/*.noUi-handle {*/
/*    background-image: url('/home/alex/VRTI-Graph/static/images/timeline_bar_chart.png');*/
/*}*/

/*.bar {*/
/*    z-index: 1;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    bottom: 0;*/
/*    width: 1%;*/
/*    background-color: #0176d5;*/
/*    border-right: solid 1px rgba(255,255,255,.1);*/
/*}*/

/*.results-header .row {*/
/*    padding-bottom:10em;*/
/*}*/


/*!*.results-header .header-text {*!*/
/*!*    font-size: 2.8235294118rem;*!*/
/*!*    font-weight: 500;*!*/
/*!*    letter-spacing: -.02em;*!*/
/*!*}*!*/

/*.module-search-pg .spg-date-filter .timeline .decade {*/
/*    flex-grow: 1;*/
/*    height: inherit;*/
/*    position: relative;*/
/*}*/



.container-status-bar {
    height:3px;
    position:relative;
    top:100%;
}

#status-bar {
    position: absolute;
    bottom: 15%;
    width: 100%;
    height: 3px;
    background-color: #eee;
    overflow: hidden;
    border-radius: 5px;
}

#status-bar::before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%; /* Full width during animation */
    background: linear-gradient(90deg, #000000, #333333, #000000);
    border-radius: 5px;
    animation: moveRight 3s linear infinite;
}

/* Keyframes to move bar from left to right then reset */
@keyframes moveRight {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.bold-header {
    font-weight:400;
}

.module-search-pg .spg-results .spg-result .image {
    display: block;
    width: 100%;
    padding: 100% 0 0;
    position: relative;
    overflow: hidden;
    border-radius: .2941176471rem;
}


.bg-muted-purple {
    background-color: #eeeffe !important;
}

.lg-p-text {
    font-size:1.3em;
}


.my-10 {
    margin-top: 10rem;
    margin-bottom: 10rem;
}

.my-15 {
    margin-top: 15rem;
    margin-bottom: 15rem;
}

.py-20 {
    padding-top: 20rem;
    padding-bottom: 20rem;
}

.carousel-img {
    object-fit: cover;
    height: 240px;
    object-position: top;
}

.py-10 {
    padding-top: 10rem;
    padding-bottom: 10rem;
}

/*.photo img {*/
/*  position: absolute;*/
/*  left: 0;*/
/*  top: 0;*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  object-fit: cover;*/
/*}*/

.box-modal-result:hover {
    opacity: 0.8;
}

.small-text {
    font-size: 0.95rem;
}

.bg-whiter {
    background-color: #ffffff; /* Bright white */
    color: #000000; /* Optional: ensure text color contrasts well */
}


@media (min-width: 1750px) {
    .container {
        max-width: 1548px;
    }
}

/* Wrapper for carousel navigation buttons */
.gallery-nav {
    display: flex;  /* Enables flexbox */
    justify-content: right;  /* Aligns items to the right */
    gap: 20px;  /* Increased space between buttons */
    margin-bottom: 50px;
}

/* Hide gallery-nav on small screens */
@media (max-width: 576px) {
    .gallery-nav {
        display: none;
    }
}

.gallery-arrow {
    padding: 12px 18px;  /* Slightly bigger padding */
    font-size: 20px;  /* Increased font size */
    border: none;
    background-color: white;  /* White button */
    color: black;  /* Icon color */
    border-radius: 50%;  /* Makes it circular */
    width: 50px;  /* Increased width */
    height: 50px; /* Increased height */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.gallery-muted-arrow .gallery-arrow {
    background-color: #E5E5E5;
}

/* Hover Effect */
.gallery-arrow:hover {
    transform: scale(1.1);  /* Slight zoom effect */
}

/* Active (Click) Effect */
.gallery-arrow:active {
    transform: scale(0.95); /* Shrinks slightly when clicked */
}


@media (min-width: 992px) {
    .media-gallery-img {
        width: 624.34px;
        height: 416.18px;
        object-fit: cover;
        border-radius: 0.5rem; /* optional */
    }
}

.btn-view-all {
    width: 98px;
    height: 42px;
    gap: 8px; /* Optional: gap only works if you're using flex/grid */
    border-radius: 4px;
    padding: 8px;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    background-color: #E5E5E5;
    color: black;
    text-decoration: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* General styles for the custom prev and next buttons */
.custom-prev-btn,
.custom-next-btn {
    position: absolute;
    top: 50%; /* Center vertically */
    transform: translateY(-50%); /* Perfect center alignment */
    z-index: 1000; /* On top of carousel */
    background-color: white; /* White button */
    color: black; /* Icon color */
    border: none; /* No border */
    padding: 12px 18px; /* Similar padding */
    font-size: 20px; /* Increased font size */
    border-radius: 50%; /* Circular buttons */
    width: 50px; /* Fixed size for consistency */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Optional: Hover effect for better interaction */
.custom-prev-btn:hover,
.custom-next-btn:hover {
    background-color: #f0f0f0; /* Light grey hover */
    transform: translateY(-50%) scale(1.1); /* Slight grow on hover */
}



@media (max-width: 992px) {
    .custom-prev-btn,
    .custom-next-btn {
        display: none;
    }
}


/*!* General styles for the custom prev and next buttons *!*/
/*.custom-prev-btn, .custom-next-btn {*/
/*    position: absolute;*/
/*    top: 50%; !* Align vertically in the middle *!*/
/*    transform: translateY(-50%); !* Center the button vertically *!*/
/*    z-index: 1000; !* Ensure the buttons are on top of the carousel *!*/
/*    background: rgba(0, 0, 0, 0.5); !* Optional: dark background for visibility *!*/
/*    color: white; !* Arrow color *!*/
/*    border: none; !* Remove button border *!*/
/*    padding: 10px;*/
/*    cursor: pointer;*/
/*    border-radius: 50%; !* Make the buttons circular *!*/
/*}*/

/* Previous button: positioned with space from the left */
.custom-prev-btn {
    left: -50px; /* Adds space from carousel, adjust as needed */
}

/* Next button: positioned with space from the right */
.custom-next-btn {
    right: -50px; /* Adds space from carousel, adjust as needed */
}

/* Adjust the size of the icons inside the buttons */
.custom-prev-btn i, .custom-next-btn i {
    font-size: 24px; /* Adjust arrow size */
}

/*!* Add hover effects for the buttons *!*/
/*.custom-prev-btn:hover, .custom-next-btn:hover {*/
/*    background: rgba(0, 0, 0, 0.7); !* Darker background on hover *!*/
/*}*/

/* Ensure the carousel wrapper has a relative position to anchor the buttons */
.owl-carousel {
    position: relative;
}

/*.search-bar-link {*/
/*    !*padding: .4rem .6rem; !* Compact padding *!*!*/
/*    background-color: rgba(0, 0, 1, 0.05); !* Light transparent black background for contrast *!*/
/*    !*background-color: rgba(0, 0, 0, 0.1); !* Light transparent black background for contrast *!*!*/
/*    border: 1px solid rgba(0, 0, 0, 0.15); !* Light border to improve visibility on white background *!*/
/*    border-radius: 5px; !* Rounded corners *!*/
/*    color: #000; !* Black text for visibility on light backgrounds *!*/
/*    font-size: 0.7rem; !* Adjusted font size *!*/
/*    text-decoration: none; !* Remove underline *!*/
/*    transition: color .2s, background-color .2s, border-color .2s, filter .2s, opacity .2s; !* Smooth transitions *!*/
/*}*/

/*!*.search-bar-link:not(:last-child) {*!*/
/*!*    margin-right: 5px;*!*/
/*!*}*!*/


/*.search-bar-link:hover {*/
/*    background-color: rgba(0, 0, 0, 0.2); !* Slightly darker transparent background on hover *!*/
/*    color: #000; !* Keep black text on hover *!*/
/*    text-decoration: none; !* No underline on hover *!*/
/*}*/



.asearch-bar-link {
    /*padding: .4rem .6rem; !* Compact padding *!*/
    background: rgba(255, 255, 255, 0.4); /* Light transparent black background for contrast */
    /*background-color: rgba(0, 0, 0, 0.1); !* Light transparent black background for contrast *!*/
    border: 1px solid rgba(0, 0, 0, 0.15); /* Light border to improve visibility on white background */
    border-radius: 5px; /* Rounded corners */
    color: #000; /* Black text for visibility on light backgrounds */
    font-size: 0.7rem; /* Adjusted font size */
    text-decoration: none; /* Remove underline */
    transition: color .2s, background-color .2s, border-color .2s, filter .2s, opacity .2s; /* Smooth transitions */
}


.search-bar-link:hover {
    background-color: rgba(0, 0, 0, 0.2); /* Slightly darker transparent background on hover */
    color: #000; /* Keep black text on hover */
    text-decoration: none; /* No underline on hover */
}

.image-container {
    position: relative;
    display: block;
    height: 100%;
    text-decoration: none; /* Remove underline for the clickable area */
}

/*.image-container img {*/
/*    width: 100%;*/
/*    height: 600px;*/
/*    object-fit: cover;*/
/*}*/

.image-description {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 1rem;
    box-sizing: border-box;
}

.image-container:hover .image-description {
    background-color: rgba(0, 0, 0, 0.7); /* Darker background on hover */
}

.image-container:hover img {
    filter: brightness(85%); /* Slight darkening of the image on hover */
}



/* Style for readonly input to make it appear disabled */
.disabled-input {
    background-color: #e9ecef;  /* Light gray background (like Bootstrap's disabled input) */
    opacity: 1; /* Keep the text fully opaque */
    cursor: not-allowed; /* Show 'not-allowed' cursor to indicate the field is disabled */
    pointer-events: none; /* Disable any interactions, so the input feels like it's fully disabled */
    color: #6c757d; /* Muted text color */
}

.disabled-input:focus {
    outline: none; /* Remove the focus outline */
    box-shadow: none; /* No shadow when clicked */
}


.global-module-header-with-border {
    border-top: 1px solid #E6E6E6;
    padding-top: 1.176rem;
    margin-bottom: 2.5em;
}

.header h3 {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

/*@media (max-width: 768px) {*/
/*    .header h3 {*/
/*        font-size: 1.5rem; !* Adjust font size for smaller screens *!*/
/*        display: block;*/
/*    }*/
/*}*/


/*Default styling for larger screens */
.txt-intro {
    font-size: 1.125rem;
    line-height: 1.5;
    color: #343c3c;
}


/*.txtlg2, .txt-intro {*/
/*	font-size: 1.4117647059rem;*/
/*	line-height: 1.586em;*/
/*	line-height: 1.417em;*/
/*	letter-spacing: -.02em;*/
/*}*/

/* Smaller styling for small screens */
@media (max-width: 576px) {
    .txt-intro {
        font-size: 0.9rem; /* Smaller font size */
        line-height: 1.4; /* Adjust line height for smaller font */
    }
}


/* Default styling for larger screens */
.responsive-heading {
    font-size: 1.25rem; /* h5 default size */
}

/* Smaller styling for small screens */
@media (max-width: 576px) {
    .responsive-heading {
        font-size: 1rem; /* Adjusted to match h6 size */
    }
}


.color-blue {
    color: #0d6efd;
}

.text-nowrap {
    white-space: nowrap;
}

.mt-1 {
    margin-top: 0.25rem;
}


@media (max-width: 575.98px) {
    .pt-xs-5 {
        padding-top: 3rem; /* Same as pt-5 */
    }
}

@media (max-width: 576px) {
    .xs-spacing-top {
        padding-bottom: 3rem; /* Same as pt-5 */
    }
}

/*@media (max-width: 576px) {*/
/*  .col, [class^="col-"], [class*=" col-"] {*/
/*    !*padding-top: 3rem;    !* Same as pt-5 in Bootstrap *!*!*/
/*    padding-bottom: 2rem; !* Same as pb-5 in Bootstrap *!*/
/*    !*padding-bottom: 20px; !* Same as pb-5 in Bootstrap *!*!*/
/*  }*/
/*}*/

a.hu {
    text-decoration: none;
    color: #0d6efd; /* Color for the link */
    white-space: nowrap;
    margin-top: 0.25rem;
}

/* Container for the autocomplete dropdown */
.ui-autocomplete {
    position: absolute;
    z-index: 1000;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px; /* Slightly larger rounding for a modern look */
    max-height: 300px; /* Limit height for scroll */
    overflow-y: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Softer shadow for better depth */
    padding: 0;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem; /* Adds spacing from the bottom when open */
}

/* Each item in the autocomplete dropdown */
.ui-menu-item {
    list-style: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effect */
}

/* Wrapper for the content of each item */
.ui-menu-item-wrapper {
    padding: 0.5rem 0;
}

/* Bolded part of the item (likely the search match) */
.ui-menu-item-wrapper strong {
    font-weight: bold;
    color: #333;
}

/* Secondary information, styled to stand out less */
.ui-menu-item-wrapper i {
    display: block;
    color: #888;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Hover and focus state styles */
.ui-menu-item:hover, .ui-menu-item.ui-state-focus {
    background-color: rgba(0, 0, 0, 0.05); /* Light transparent gray for hover and focus */
    color: #000; /* Keep the text color black */
}

/* Active/focused item styling (transparent/gray instead of blue) */
.ui-state-active {
    background-color: rgba(0, 0, 0, 0.05); /* Light transparent gray for active state */
    color: #000;
}

/* Custom styling for jQuery UI Autocomplete hover and active states */

/* Hover and focus state styles */
.ui-menu-item:hover, .ui-menu-item.ui-state-focus {
    background-color: rgba(0, 0, 0, 0.05) !important; /* Light transparent gray for hover and focus */
    color: #000; /* Keep text black */
}

/* Active/focused item styling */
.ui-state-active {
    background-color: rgba(0, 0, 0, 0.05) !important; /* Light transparent gray for active state */
    color: #000; /* Keep text black */
}


section.custom-section-border {
    border-top: 1px solid #e0e0e0; /* Light gray border, inspired by the light borders */
    border-bottom: 1px solid #e0e0e0; /* Light gray border, inspired by the light borders */
    /*border-radius: 8px; !* Slightly rounded corners for a smooth look *!*/
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for a soft effect */
    /*overflow: hidden; !* Hide any content that overflows the section *!*/
}

div.custom-div-border {
    border-top: 1px solid #e0e0e0; /* Light gray border, inspired by the light borders */
    border-bottom: 1px solid #e0e0e0; /* Light gray border, inspired by the light borders */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for a soft effect */
    padding: 2rem; /* Adds some padding inside the div */
    border-radius: 8px; /* Slightly rounded corners for a smooth look */
    overflow: hidden; /* Hide any overflowing content */
}

.btn-search {
    width: 12.3529411765rem;
}

/* Add padding-left and padding-right (px-5) to all links in the delve-deeper-content */
#delve-deeper-content a {
    padding-left: 3rem; /* Equivalent to Bootstrap's px-5 */
    padding-right: 3rem; /* Equivalent to Bootstrap's px-5 */
}

/* Add padding-right between <i> (icon) and the text in <a> tags */
#delve-deeper-content a i {
    padding-right: 0.5rem; /* Adds space between icon and text */
}


.alphabet-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.alphabet-item {
    flex: 0 0 auto; /* prevent growing or shrinking */
    width: 80px;
    height: 80px;
    text-align: center;
    padding: 20px;
    background-color: #68D0C833;
    font-size: 24px;
    font-weight: bold;
    border-radius: 50%; /* Perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    text-decoration: none;
    color: #185642; /* Updated text color */
}

@media (max-width: 480px) {
    .alphabet-item {
        width: 40px;
        height: 40px;
    }
}




.alphabet-item:hover {
    transform: scale(1.1);
    background-color: #d1eeec;
}

@media (max-width: 768px) {
    .alphabet-item {
        padding: 2px;

    }
}

.list-group-item-muted {
    background-color: #f1f1f1; /* Slightly darker than #F8F8F8 */
    color: #6c757d; /* Muted text color (Bootstrap's muted text color) */
}

.list-group-item-muted:hover {
    background-color: #e2e6ea; /* Even darker background on hover */
    color: #495057; /* Darker text color on hover */
}


/* Styles specifically for .search-field-group */
.search-field-group {
    position: relative;
}

/* Override focus styles to remove orange border */
.search-field-group .search-field:focus {
    border-color: #80bdff; /* Change to blue or desired color */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Optional shadow to highlight input */
    outline: none; /* Remove default browser outline */
}

/* Hide the label visually (but keep it accessible for screen readers) */
.hide-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Styles for the input inside .search-field-group */
.search-field-group .search-field {
    width: 100%; /* Ensures input takes full width of parent */
    padding: 1.17rem; /* Add some padding */
    font-size: 1rem; /* Normal text size */
    border: 1px solid transparent; /* Standard border */
    border-radius: 0.25rem; /* Rounded corners */
    box-sizing: border-box; /* Ensures padding is included in width */
}

/*!* Example of styles for pristine/invalid/touched states (can be modified based on actual validation logic) *!*/
/*.search-field.ng-pristine {*/
/*    background-color: #fff;*/
/*}*/
/*.search-field.ng-invalid {*/
/*    border-color: #dc3545; !* Red border for invalid input *!*/
/*}*/
/*.search-field.ng-touched {*/
/*    outline: 1px solid #80bdff; !* Highlight input when focused *!*/
/*}*/

.search-field.q {
    padding-left: 3.5294117647rem; /* Adds space to the left of the input field for the icon */
    background: url('https://virtualtreasury.ie/icon_search.9a902f519cc72c72.svg') 1.1764705882rem center no-repeat #F1F2F4; /* Adds search icon and background color */
    background-size: 1.1764705882rem auto; /* Sets the size of the background icon */
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1608);
}




/* Custom Offcanvas Styles */
#menu .offcanvas {
    background-color: #FFFFFF;
    font-family: Inter,Helvetica,Arial,sans-serif;
}

#menu .offcanvas-body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;

}



.offcanvas-auto-width {
    width: auto !important;
    max-width: 100vw; /* Prevent overflow */
}



@media (min-width: 992px) {
    .no-padding-lg {
        padding: 0 !important;
    }
}



/* Menu title and link styles */
#menu .menu-title {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/*#menu .menu-main-title {*/
/*    font-weight: bold;*/
/*    font-size: 2rem;*/
/*    margin-bottom: 5rem;*/
/*    padding-top: 10px;*/
/*}*/

.menu-main-title {
    font-size: 4.7058823529rem;
    font-weight: 600;
    line-height: 1em;
}

.menu-main-title-container {
    padding-bottom: 3rem;
}


@media (max-width: 1300px) {
    .menu-main-title {
        font-size: 3rem; /* Adjust as needed */
    }
}

@media (max-width: 768px) {
    .menu-main-title-container {
        padding-bottom: 1rem; /* Adjust as needed */
    }
}

/*@media (max-width: 480px) {*/
/*    .menu-main-title {*/
/*        font-size: 1.5rem; !* Adjust as needed *!*/
/*    }*/
/*}*/

@media (max-width: 480px) {
    .menu-main-title-container {
        padding-bottom: 0.2rem; /* Adjust as needed */
    }
}



.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before {
    font-size: 1.1rem;
}


#menu .menu-links {
    /*font-size: .95rem;*/
    font-size: .8235294118rem;
    line-height: 1.4117647059rem;
    font-weight: 300;
    list-style: none;
    padding: 0;
}


@media (max-width: 991px) {
    #menu .menu-links {
        font-size: .9285714286rem;
    }

    #menu .menu-links li {
        margin-bottom: .3em;
    }
}


#menu .menu-links li {
    margin-bottom: 0.5rem;
}

#menu .menu-links a {
    text-decoration: none;
    color: #6c757d; /* Bootstrap secondary color */
}


#menu .menu-links a:hover {
    color: #000000; /* Black on hover */
}


#menu .menu-social {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 1rem;
}

#menu .menu-social a {
    font-size: 0.8rem;
    color: #343c3c;
    text-decoration: none;
}

#menu .menu-social a:hover {
    color: #0d6efd;
}

#menu .footer {
    padding-top: 20px;
    font-size: 0.6rem;
    margin-right: 0.2rem;
}

#menu .menu-footer-links {
    display: flex;
    gap: 1rem; /* Optional: Adds space between list items */
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
}

#menu .menu-footer-links a {
    text-decoration: none;
    color: #343c3c;
}

#menu .menu-footer-links a:hover {
    color: black;
}

/* Ensure the button is visible by giving it a border and background color */
#menu .navbar-toggler {
    background-color: #ffffff; /* Light background color */
}

/* Customize the size of the toggler icon */
#menu .navbar-toggler-icon {
    width: 40px; /* Adjust the width to make it larger */
    height: 40px; /* Adjust the height to make it larger */
    background-size: 40px 40px; /* Ensure the background scales with the size */
    border-color: rgba(255, 255, 255, 0.5); /* Change the button border to white (optional) */
    /*background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");*/
    background-image: url("data:image/svg+xml;charset=UTF8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}




.menu-highlight #image-ellipses {
    z-index: 0;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #68D0C6 0%, #FFF 84%);
    /*background: linear-gradient(180deg, #68D0C6 0%, #FFF 76.91%);*/
    /*width: 21rem;*/
    width: 22.9411764706rem;
}

#menu-highlight .image-and-ellipses-wrapper .bg-ellipses {
    /*position: absolute;*/
    width: 200%;
    top: -7%;
    left: -30%;
    /*transform-origin: center;*/
    /*opacity: 0.5;*/
    /*animation: rotateCounterClockwiseHome 10s ease-in-out alternate infinite;*/
}

.menu-highlight #vrt-logo {
    position: relative;
    z-index: 1;
    width: 16rem;
}

.menu-highlight #menu-images {
    padding: 4.1176470588rem 0 0;
}

.menu-highlight .menu-profile-img-wrapper {
    text-align: center;
    margin-bottom: 4.4117647059rem;
}

.menu-highlight #menu-thumbnail {
    position: relative;
    z-index: 1;
    border-radius: 100%;
    width: 14.4117647059rem;
    height: 14.4117647059rem;
    object-fit: cover;
    object-position: top;
}

.menu-highlight #kg-description {
    margin-top: 3rem;
    padding: 0 1rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.menu-highlight .menu-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.menu-highlight #kg-icon {
    height: 50px !important;
    width: 50px !important;
    z-index: 1;
    opacity: 1;
}

.menu-highlight #kg-title {
    margin-top: 1.1764705882rem;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 1.1764705882rem;
    font-size: 1.7647058824rem;
}


.menu-highlight #kg-text {
    font-size: 1.1rem;
    margin-bottom: 1.7647058824rem;
    line-height: 1.647em;
}

.menu-highlight #advanced-search-button {
    display: block;
    margin: 0 auto;
    pointer-events: auto;
}





.module-breadcrumbs {
    border-top: solid 1px #E6E6E6;
    border-bottom: solid 1px #E6E6E6;
    padding: .8823529412rem 0;
}

/* Custom Breadcrumb Styling with Bootstrap's Muted Text Color */
.module-breadcrumbs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Wrap items on smaller screens */
}


.module-breadcrumbs li {
    display: inline-block;
    color: #040404;
    font-size: 0.875rem; /* 14px */
    line-height: 18px;
    font-weight: 400;
}

.module-breadcrumbs li a {
    text-decoration: none;
    color: #040404; /* Bootstrap muted text color */
}

/*.module-breadcrumbs li a:hover {*/
/*    color: #0d6efd; !* Optional: Bootstrap blue color for hover state *!*/
/*}*/

.module-breadcrumbs li a:hover {
    color: #1f3f49; /* Bootstrap success green */
}


.module-breadcrumbs li + li::before {
    content: "\003e"; /* Unicode for '>' character */
    padding: 0 10px;  /* Adds space around the arrow */
    /*color: #3C87EF; !* Muted color for the breadcrumb arrows *!*/
    color: var(--dark-green); /* Muted color for the breadcrumb arrows */
}

/* Hide elements beyond the second breadcrumb on screens smaller than 576px */
@media (max-width: 1200px) {
    .module-breadcrumbs ul li:nth-child(n+4) {
        display: none;
    }
}

/*!* Responsive Adjustments *!*/
/*@media screen and (max-width: 768px) {*/
/*    .module-breadcrumbs ul li:first-child::before {*/
/*        content: "\003e"; !* Unicode for '>' character *!*/
/*        padding: 0 10px;  !* Adds space around the arrow *!*/
/*        color: var(--dark-green); !* Muted color for the breadcrumb arrows *!*/
/*    }*/
/*}*/

/*@media screen and (max-width: 480px) {*/

/*    .module-breadcrumbs ul li {*/
/*        font-size: 0.9rem;*/
/*    }*/
/*}*/


/*!* Shrink font size on smaller screens *!*/
/*@media (max-width: 768px) {*/
/*    .module-breadcrumbs ul {*/
/*        font-size: 0.8rem; !* Adjust font size for tablet screens (about 14px if root is 16px) *!*/
/*    }*/
/*}*/

/*@media (max-width: 480px) {*/
/*    .module-breadcrumbs ul {*/
/*        font-size: 0.8rem; !* Adjust font size for small screens (about 12px if root is 16px) *!*/
/*    }*/
/*}*/



.module-page-title {
    padding: 1.7647058824rem 0;
    background: #F8F8F8;
    min-height: 14.7058823529rem;
}

.module-page-title.taller {
    min-height: 20.5882352941rem;
}


.delve-deeper-container {
    margin-top: 5rem;
    min-height: 150px;
}

/* Default styling for banner links */
.banner-link {
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s, opacity 0.2s;
    text-decoration: none;
    color: #333;
    padding: 1rem 1rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}

/* Responsive styling for smaller screens */
@media (max-width: 768px) {
    /* Stack the banner links vertically */
    .banner-link {
        display: flex;
        padding: 0.5rem 1rem; /* Reduced padding */
        font-size: 0.9rem; /* Smaller font size */
        border: none; /* Remove borders to save space */
    }

    /* Center the links on the screen */
    .col.d-flex {
        flex-direction: column;
        align-items: center;
    }
}

/* Extra small screens */
@media (max-width: 576px) {
    .banner-link {
        padding: 0.4rem 0;
        font-size: 0.9rem;
    }

    /* Hide specific links if desired for a cleaner layout */
    .banner-link.d-none.d-sm-block {
        display: none;
    }
}


/*@media (max-width: 768px) {*/
/*    .banner-link {*/
/*        transition: color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s, opacity 0.2s;*/
/*        text-decoration: none; !* Remove the underline *!*/
/*        color: #333; !* Default text color *!*/
/*        padding: 0.5rem 0.6rem; !* Adjust padding for smaller screens *!*/
/*        border-radius: 4px;*/
/*        display: inline-flex;*/
/*        align-items: center;*/
/*        border-right: 1px solid white; !* Lighter border to the right *!*/
/*        border-left: 1px solid white; !* Lighter border to the left *!*/
/*        font-size: 0.9rem; !* Slightly smaller font size *!*/
/*        !*width: 50%;*!*/
/*    }*/
/*}*/

/*!* Add left border for the first link *!*/
/*.banner-link:first-child {*/
/*    border-left: 1px solid #eee; !* Lighter border to the left *!*/
/*}*/

/* Default: Keep inline */
.resource-tag-header {
    display: inline;
    margin-bottom: 0;
}

/* Extra Small Screens (XS) - Apply d-block and mb-2 */
@media (max-width: 575.98px) {
    .resource-tag-header {
        display: block;
        margin-bottom: 0.5rem; /* Equivalent to Bootstrap mb-2 */
    }
}


/* Add padding to the <i> elements inside banner links */
.banner-link i {
    padding-left: 0.5rem; /* Adjust padding as needed */
}

/* Default hover effect for desktop */
@media (hover: hover) {
    .banner-link:hover {
        color: #007bff;
        background-color: #f0f0f0;
        border-color: #007bff;
    }
}


.bg-main-img {
    background-color: #36454F; /* Charcoal Gray */
    color: white; /* Ensure text is visible on the dark background */
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* Adjust the logo's filter for better visibility on the dark background, except the logo inside .logo-preloader */
.bg-main-img img:not(.logo-preloader img) {
    filter: invert(100%) brightness(1.2);
}

/* Button styling */
.btn-vr {
    border: 2px solid #ffffff; /* White outline for the button */
    color: #ffffff;
    background-color: transparent; /* Transparent background */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Button hover effect */
.btn-vr:hover {
    background-color: #ffffff; /* White background on hover */
    color: #002855; /* Dark blue text on hover */
}

.copy-button {
    font-size: 0.8rem;
}

/* Heading and paragraph text inside the section */
.bg-main-img h1, .bg-main-img h5 {
    text-align: center;
}

/*!* Base styles *!*/
/*.bg-main-img h1 {*/
/*    font-size: 1.5rem; !* Smaller default for mobile *!*/
/*    font-weight: bold;*/
/*}*/

/*!* Small screens (mobile devices) *!*/
/*@media (max-width: 600px) {*/
/*    .bg-main-img h1 {*/
/*        font-size: 1.25rem; !* Further reduced for small screens *!*/
/*    }*/
/*}*/

/*!* Medium screens (tablets and up) *!*/
/*@media (min-width: 768px) {*/
/*    .bg-main-img h1 {*/
/*        font-size: 2rem;*/
/*    }*/
/*}*/

/*!* Large screens (desktops and up) *!*/
/*@media (min-width: 1024px) {*/
/*    .bg-main-img h1 {*/
/*        font-size: 2.5rem;*/
/*    }*/
/*}*/

/*!* Extra large screens *!*/
/*@media (min-width: 1440px) {*/
/*    .bg-main-img h1 {*/
/*        font-size: 3rem;*/
/*    }*/
/*}*/




.bg-main-img h5 {
    font-size: 1.2rem;
}

.btn-kg-icon {
    width: 32px;
    height: 31.767187118530273px;
    margin-left: 0.5rem; /* Adjust as needed */
}


.btn-kg-icon-sm {
    width: 20px;
    height: 20px;
    margin-left: 0.5rem; /* Adjust as needed */
}
/*.search-bar-link {*/
/*    background-color: transparent; !* Transparent background *!*/
/*    color: black; !* Text color - adjust based on your background *!*/
/*    border: 2px solid white; !* White border - adjust as needed *!*/
/*    !*padding: 0.5rem 0.5rem; !* Padding for the button *!*!*/
/*    border-radius: 4px; !* Rounded corners *!*/
/*    text-decoration: none; !* Remove underline *!*/
/*    font-size: 0.85rem; !* Adjust font size *!*/
/*    transition: background-color 0.3s ease, color 0.3s ease; !* Smooth transition for hover *!*/
/*}*/

/*.search-bar-link:hover {*/
/*    background-color: white; !* Change background color on hover *!*/
/*    color: #002855; !* Dark blue or any contrasting color for hover state *!*/
/*    border-color: white; !* Keep the border white *!*/
/*}*/


.search-bar-link {
    padding: 7px 10px;
    border-radius: 4px;
    border: 0.5px solid #FFFFFF;
    background: rgba(255, 255, 255, 0.4); /* #FFFFFF66 */
    color: black;
    text-decoration: none;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: none; /* Remove hover transitions if not needed */
}


.search-bar-link:hover {
    background-color: #ffffff; /* Optional: solid white on hover */
    color: #002855;
    border-color: #ffffff;
}



.card-transparent {
    background-color: rgba(255, 255, 255, 0.4); /* 40% white */
    border: 0.5px solid #FFFFFF; /* white, thin border */
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03); /* subtle shadow */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 1.5rem;
    transition: all 0.3s ease;
    box-sizing: border-box; /* makes borders appear 'inner' */
}

.card-thumbnail {
    object-fit: cover;
    object-position: top;
  width: 120px;
  height: 120px;
    border-radius: 50%;
}

/*.card-thumbnail {*/
/*  width: 120px;*/
/*  height: 120px;*/
/*  object-fit: cover;*/
/*  object-position: top;*/
/*}*/



.btn-transparent {
    background-color: rgba(255, 255, 255, 0.4); /* 40% white */
    border: 0.5px solid rgba(255, 255, 255, 1);
    color:#222322 !important;
}



/*!* Targeting cards in the card-container *!*/
/*.card-container .card {*/
/*    transition: transform 0.3s ease, box-shadow 0.3s ease; !* Smooth transition for hover effect *!*/
/*    border-radius: 8px; !* Optional: to give the cards rounded corners *!*/
/*}*/

/*!* Hover effect *!*/
/*.card-container .card:hover {*/
/*    transform: translateY(-10px); !* Move the card up slightly on hover *!*/
/*    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); !* Add a shadow to give a lift effect *!*/
/*}*/

/*!* Optional: Ensure the images inside the cards also scale slightly *!*/
/*.card-container .card img {*/
/*    transition: transform 0.3s ease; !* Add transition to the image *!*/
/*}*/

/*!* Hover effect on the image *!*/
/*.card-container .card:hover img {*/
/*    transform: scale(1.05); !* Slightly enlarge the image on hover *!*/
/*}*/


/*@media (min-width: 992px) {*/
/*    .card-container {*/
/*        margin-bottom: 8rem; !* Large bottom margin for large screens *!*/
/*    }*/
/*}*/


/* Styling for the vrti-links row container */
.vrti-links {
    padding: 1.5rem;
    background-color: #f5f8fc; /* Light background for the whole section */
    border-radius: 1rem;
    border: 1px solid #dee2e6; /* Subtle border */
}

/* Center the spinner and text when loading */
#vrti-links-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Styling for no results message */
#vrti-links-no-result {
    text-align: center;
    color: #6c757d;
}

/* Style for the scrollable links container */
#vrti-links-table-container {
    max-height: 300px;
    overflow-y: auto; /* Adds scrolling */
    padding: 1rem;
}

/* Styling for list group items */
#vrti-links-list .list-group-item {
    border: none;
    border-bottom: 1px solid #e9ecef;
    background-color: #f8f9fa; /* Light background for the items */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
    border-radius: 0.5rem; /* Rounded corners */
}

/* Hover effect for list items */
#vrti-links-list .list-group-item:hover {
    background-color: #e2e6ea; /* Slightly darker background on hover */
}

/* Style the first list group item (header-like) */
#vrti-links-list .list-group-item:first-child {
    font-weight: bold;
    font-size: 1.25rem;
    background-color: #f1f3f5;
}

@media (max-width: 768px) {
    /* Style the first list group item (header-like) only on small screens */
    #vrti-links-list .list-group-item {
        font-size: 1rem;          /* Slightly larger font size for emphasis on small screens */
        padding: 0.5rem 0.75rem;    /* Adjust padding for small screens */
    }
    #vrti-links-list .list-group-item:first-child {
        font-size: 1rem;          /* Slightly larger font size for emphasis on small screens */
        padding: 0.5rem 0.75rem;    /* Adjust padding for small screens */
    }
}


/* Icon styling for the list items */
#vrti-links-list .bi {
    color: #007bff; /* Make icons the primary color */
    font-size: 1.2rem;
}

/* Badge (number) styling */
#vrti-links-list .badge {
    font-size: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
}

/* Ensuring the "no result" message is centered */
#vrti-links-no-result .row {
    justify-content: center;
    align-items: center;
}


/* Adding a subtle shadow effect on list items */
#vrti-links-list .list-group-item {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}


/* Styling for the knowledge panel heading */
.knowledge-panel-title {
    font-weight: 500;
    font-size: 1.75rem; /* Adjust font size */
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Spacing between icon and text */
    margin-bottom: 1rem;
}

/* Styling for the knowledge text container */
.knowledge-text {
    /*background-color: #f5f8fc; !* Light muted blue background *!*/
    border: 1px solid #dee2e6; /* Soft border around the container */
    border-radius: 0.5rem; /* Slight rounding of the corners */
    padding: 1.5rem; /* Padding inside the container */
    font-size: 1rem; /* Base font size for content */
    line-height: 1.6; /* Line height for readability */
    color: #495057; /* Text color */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Soft shadow for depth */
}

@media (max-width: 768px) {
    #knowledge-links caption.caption-top.h3 {
        font-size: 1.2rem !important; /* Force smaller font size on small screens */
    }
}

/* Default (Extra Small Screens) */
#knowledge-links {
    margin-top: 1rem;  /* Smaller margin for extra-small screens */
    margin-bottom: 1rem;

}

/* Medium Screens and Larger */
@media (min-width: 768px) {
    #knowledge-links {
        margin-top: 150px;  /* Bigger margin for medium and larger screens */
        /*margin-top: 8rem;  !* Bigger margin for medium and larger screens *!*/
        margin-bottom: 300px;
        /*margin-bottom: 10rem;*/
    }
}



/* Default width for large screens */
#repository-modal .modal-dialog {
    width: 60vw; /* 50% of the viewport width */
    max-width: 900px; /* Maximum width constraint */
}

/* For medium-sized screens (tablets) */
@media (max-width: 1200px) {
    #repository-modal .modal-dialog {
        width: 80vw; /* 70% of the viewport width */
    }
}

/* For small screens (phones) */
@media (max-width: 1000px) {
    #repository-modal .modal-dialog {
        width: 90vw; /* 90% of the viewport width */
    }
}

/* For extra small screens (very small phones) */
@media (max-width: 750px) {
    #repository-modal .modal-dialog {
        width: 100vw; /* Full width */
    }
}

/* Default width for larger screens */
.offcanvas-wide {
    min-width: 50vw; /* Set width to 50% of the viewport on larger screens */
}

/* Set width to 100% on small screens */
@media (max-width: 576px) { /* Adjust breakpoint as needed */
    .offcanvas-wide {
        min-width: 100vw; /* Full viewport width on smaller screens */
    }
}

/* Offcanvas header */
#glossaryOffcanvas .offcanvas-header {
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0.5rem;
}

/* Offcanvas title */
#glossaryOffcanvas .offcanvas-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #0176D5;
}

/* Glossary list item styling */
#glossaryOffcanvas .list-group-item {

    border: none;
    padding: 1rem;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

/* Term title styling */
#glossaryOffcanvas .list-group-item strong {
    font-size: 1rem;
    color: #333;
}

/* Description box styling */
#glossaryOffcanvas .list-group-item .description-box {
    background-color: #ffffff; /* White background for the description */

    color: #555;
    border-radius: 4px;
    padding: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Soft shadow */
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Hover effect for white background */
#glossaryOffcanvas .list-group-item:hover {
    background-color: #f8f9fa; /* Light gray for subtle contrast */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

/* Mobile-specific adjustments */
@media (max-width: 576px) {
    #glossaryOffcanvas .offcanvas-header {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
    #glossaryOffcanvas .offcanvas-title {
        font-size: 1.1rem;
    }
    #glossaryOffcanvas .list-group-item {
        padding: 0.75rem;
    }
    #glossaryOffcanvas .list-group-item .description-box {
        padding: 0.5rem;
    }
}


.btn-glossary {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 0 0.5rem; /* top right bottom left (equivalent to ms-2) */
    font-size: 1.2rem;
    color: black;
    box-shadow: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.btn-glossary:focus,
.btn-glossary:active {
    outline: none;
    box-shadow: none;
}

.btn-glossary i {
    pointer-events: none;
}


.heading.h3 {
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: 2.8235294118rem;
    line-height: 1.25em;
}


/* Container and Row Styling */
#knowledge-links {
    padding-top: 2rem;
    border-top: 1px solid #ccc;
}

/* Column Styles */
#knowledge-links .col-lg-6 {
    margin-bottom: 2rem;
}

/* Table Styles */
#knowledge-links .table {
    width: 100%;
    line-height: 1.5; /* Adjusts line height */
    border-collapse: separate;
}

#knowledge-links .table-hover tbody tr:hover {
    background-color: #f8f9fa; /* Light hover effect */
}

/* Caption Styles */
#knowledge-links .table .caption-top {
    font-size: 1.8rem;
    font-weight: 500;
    color: #333;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

#knowledge-links .caption-top i {
    margin-left: 0.5rem;
}

/* Row Spacing */
#knowledge-links .tr-space td {
    padding: 0.75rem;
    vertical-align: top;
}

/* Link Styles */
#knowledge-links a {
    color: #0056b3;
    text-decoration: none;
}

#knowledge-links a:hover {
    color: #004085;
    text-decoration: underline;
}

/* Specific Column Widths */
#knowledge-links .col-1 {
    width: 35%;
}

#knowledge-links td {
    padding: 0.5rem 1rem;
}

.highlight {
    background-color: yellow; /* Or any color you prefer */
}

/* Scoped to .module-knowledge-graph-numbers */
.module-knowledge-graph-numbers .h2 {
    font-size: 3rem;
    font-weight: 500;
    line-height: 1.1em;
    letter-spacing: -0.02em;
    color: #282c2d;
}

.module-knowledge-graph-numbers .h3,
.module-knowledge-graph-numbers .h4 {
    font-size: 2.1176470588rem;
    line-height: 1.25em;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #282c2d;
}

.module-knowledge-graph-numbers .h1,
.module-knowledge-graph-numbers .h2,
.module-knowledge-graph-numbers .h3,
.module-knowledge-graph-numbers .h4,
.module-knowledge-graph-numbers .h5,
.module-knowledge-graph-numbers .h6 {
    color: #282c2d;
}

.module-knowledge-graph-numbers .fw-bold {
    font-weight: 700 !important;
}

.module-knowledge-graph-numbers .mb-em-1 {
    margin-bottom: 1em !important;
}

.mb-em-2 {
    margin-bottom: 2em;
}


.txtlg {
    font-size: 1.4117647059rem;
    line-height: 1.586em;
}

.census-heading-background {
    background-image: url("https://virtualtreasury.ie/backend/cms/wp-content/uploads/2024/06/Birr-1821-IMG_20230629_121615-1.jpeg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.census-heading-background .overlay {
    background: rgba(0, 0, 0, 0.5); /* Dark overlay for readability */
    padding: 15px;
    border-radius: 5px;
}

.census-heading-background h3,
.census-heading-background p {
    margin: 0;
    color: #fff; /* Ensures text is light for readability */
}

/* Adjust font size of <small> on extra-small screens */
@media (max-width: 576px) {
    .small-xs {
        font-size: 0.75rem; /* Adjust as needed for smaller text */
    }
}

@media (max-width: 767.98px) { /* Targeting sm screens and smaller */
    #glossaryOffcanvas .offcanvas-body .list-group-item {
        font-size: 0.8rem; /* Adjust the size as needed, e.g., 0.875rem for smaller text */
    }
}

.banner-link-full {
    display: block;
    width: 100%;            /* Sets a maximum width for the button */
    /*margin: 100px auto 100px auto;    !* Centers the button and adds a small bottom margin *!*/
    margin-top: 4rem;
    text-align: center;          /* Centers the text within the button */
    padding: 10px 0;             /* Adds padding for a better click area */
    background-color: #f8f8f8;   /* Light grey background */
    color: inherit;              /* Keeps the text color consistent */
    text-decoration: none;       /* Removes underline */
    font-weight: 500;            /* Slightly bold text */
    border: none;                /* Removes any border */
    border-radius: 0.4rem;       /* Adds slight rounding to edges */
}

.banner-link-full:hover {
    background-color: #e0e0e0;   /* Slightly darker grey on hover */
}

.icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px;
    width: 50px;
    height: 50px;
}

/* Container styling */
.container.card-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Card styling */
.container.card-container .card {
    width: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
    height: 100%; /* Make card height consistent across columns */
}

.container.card-container .card:hover {
    transform: scale(1.03);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
}

/* Card image styling */
.container.card-container .card-img-top {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 300px;
    object-fit: cover;
    object-position: top;
    transition: opacity 0.3s ease;
}

.container.card-container .card:hover .card-img-top {
    opacity: 0.9;
}

/* Card body styling */
.container.card-container .card-body {
    text-align: center;
    padding: 1rem;
}

.container.card-container .card-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.container.card-container .card-text {
    color: #6c757d;
    font-size: 1rem;
    margin-bottom: 1rem;
}

/* Remove default button styling */
.container.card-container a.btn1 {
    display: block;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: #007bff;
    text-decoration: none;
    /*margin-top: 1rem;*/
}

/* Media queries for responsive adjustments */
@media (max-width: 768px) {
    .container.card-container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .container.card-container .card-title {
        font-size: 1.3rem;
    }

    .container.card-container .card-text {
        font-size: 0.9rem;
    }

    .container.card-container a.btn1 {
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    .container.card-container .card {
        margin-bottom: 1rem !important; /* Adjust the margin as needed */
    }
}

@media (max-width: 1200px) {
    .container.card-container .col-lg-4 {
        margin-bottom: 1rem !important; /* Adjust the margin as needed */
    }
}

@media (max-width: 768px) {
    .btn-text {
        display: none;
    }
}

/* Prevents mobile browser styles from treating numbers as links */
.no-tel-link {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.responsive-text {
    font-size: clamp(12px, 2vw, 16px); /* adjusts automatically */
}

@media (max-width: 768px) {
    .responsive-text {
        font-size: 14px; /* fallback for specific breakpoints */
    }
}

@media (max-width: 480px) {
    .responsive-text {
        font-size: 12px;
    }
}

#resource-uri {
    white-space: normal;
    /*font-size: clamp(12px, 2vw, 18px);*/
    word-break: break-all;
}


.search-collection {
    cursor: pointer;
    transition: color 0.3s ease;
}

.search-collection:hover {
    color: blue;
}

/*.person-carousel img {*/
/*    height: 650px;*/
/*    object-fit: cover;*/
/*    object-position: top;*/
/*}*/

/* Description text styling above the main search bar */
.main-search-desc {
    font-weight: 400;
    color: #f8f9fa;
    line-height: 1.6;
    font-size: 1.25rem;
}

/* Global scrollbar styles for Webkit-based browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
    height: 12px; /* Height of the scrollbar for horizontal scroll */
}
::-webkit-scrollbar-track {
    background: #f4f4f4; /* Track color */
    border-radius: 10px; /* Rounded corners for track */
}
::-webkit-scrollbar-thumb {
    background-color: #888; /* Thumb color */
    border-radius: 10px; /* Rounded corners for thumb */
    border: 3px solid #f4f4f4; /* Adds padding around the thumb for better appearance */
}
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker color on hover */
}

/* For Firefox */
* {
    scrollbar-width: thin; /* Makes the scrollbar thinner */
    scrollbar-color: #888 #f4f4f4; /* Thumb and track colors */
}

/* Attribution for leaflet map */
.custom-attribution {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 1000;
}


/* The position of search bar on person map */
.person-map-container .search-container {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1000;
    width: 300px;
}

.person-map-container .search-container .search-input {
    padding: 10px;
    font-size: 14px;
    width: 100%; /* Ensure the input takes the full width of the container */
    box-sizing: border-box; /* Prevent padding from affecting width */
}

.person-map-container .search-container .suggestions {
    position: absolute;
    top: 40px;
    width: 100%; /* Match the width of the parent container */
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    z-index: 1100;
    max-height: 200px; /* Limit height and enable scrolling */
    overflow-y: auto; /* Allow scrolling if content exceeds height */
    display: none; /* Initially hidden */
}

.person-map-container .map {
    height: 800px; /* Height of the map */
}


.map-iframe {
    width: 100%;
    height: 80vh;
    border-radius: 10px;
    border: 2px solid #ddd;
}
.map-close-button {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  padding: 0;
  z-index: 1000000; /* Must be higher than iframe */
}


.map-close-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* darker on hover */
}

/* Responsive: move to top-right on medium and smaller screens */
@media (max-width: 991.98px) { /* Bootstrap md breakpoint */
  .map-close-button {
    left: auto;
    right: 20px;
    transform: none;
  }
}

@media (max-width: 575.98px) {
    .map-close-button {
        display: none !important;
    }
}


#map-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    text-align: center;
    display: none;
    background-color: rgba(255, 255, 255, 0.8); /* Light, semi-transparent background */
    padding: 50px; /* Adds padding around the text */
    border-radius: 8px; /* Optional: rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: subtle shadow for depth */
    width: 98%; /* Full width on small screens */
    max-width: 800px; /* Prevents it from being too wide */
}

/* Apply 70% width on extra-large screens (1200px and up) */
@media (min-width: 1200px) {
    #map-spinner {
        width: 70%;
    }
}

.census-card {
    background-image: url('https://virtualtreasury.ie/backend/cms/wp-content/uploads/2023/06/HeroImage-Tighe-Woodstock.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    overflow: hidden;
    height: 300px;
    display: block;
    color: white;
    text-decoration: none;
    position: relative;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.census-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.3);
}

.census-card .card-overlay {
    background: rgba(0, 0, 0, 0.1); /* Reduced opacity for better background visibility */
    border-radius: 15px;
    padding: 20px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease;
}

/*.census-card:hover .card-overlay {*/
/*    background-color: rgba(0, 0, 0, 0.3); !* Lighter overlay on hover *!*/
/*}*/

.census-card .card-body {
    text-align: center;
    max-width: 90%;
}

.census-card h5.card-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.census-card p.card-text {
    font-size: 1rem;
    margin-bottom: 15px;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

.census-card span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 1rem;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 10px 15px;
    border-radius: 20px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.census-card span:hover {
    background-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}



/*!* General badge styling *!*/
/*.badge {*/
/*    padding-left: 1rem !important;*/
/*    padding-right: 1rem !important;*/
/*    border-radius: 50rem !important; !* Rounded pill shape *!*/
/*    display: inline-block;*/
/*    font-size: 0.875rem; !* Adjust font size as needed *!*/
/*    font-weight: 600;*/
/*    padding: 0.5rem 1rem;*/
/*}*/


.search-result-badge {
    font-weight: 600;  /* Slightly bolder for readability */
    /*padding: 0.4rem 0.6rem;  !* Adds padding for a larger, more readable badge *!*/
    /*border-radius: 0.5rem;  !* Slightly rounded corners *!*/
    color: #2A2A2A !important;  /* Neutral dark gray for readability across all backgrounds */
    border-radius: 50rem !important;  /* Slightly rounded corners */
    padding: 0.5rem 0.8rem !important;
    /*padding-left: 1rem !important;*/
    /*padding-right: 1rem !important;*/
}

.rounded-pill {
    border-radius: 50rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}


/* General Tooltip Styles */
.leaflet-tooltip {
    font-family: Arial, sans-serif; /* Simple, clean font */
    font-size: 14px; /* Default font size for tooltip content */
    line-height: 1.5; /* Improves readability with proper line spacing */
    color: var(--dark-green); /* Gold text color for content */
    /*background-color: #000 !important; !* Black background for contrast *!*/
    border-radius: 6px; /* Rounded corners for a modern look */
    padding: 8px; /* Adds internal spacing for better structure */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Adds a soft shadow for visibility */
    border: 1px solid var(--dark-green) !important; /* Gold border for a distinct style */
}

/* Heading Styles Inside Tooltip */
.leaflet-tooltip h1,
.leaflet-tooltip h2,
.leaflet-tooltip h3,
.leaflet-tooltip h4,
.leaflet-tooltip h5,
.leaflet-tooltip h6 {
    font-size: 16px; /* Uniform heading size for all levels */
    margin: 0 0 6px 0; /* Space below the headings */
    color: var(--dark-green); /* Gold text color for headings */
    font-weight: bold; /* Makes headings stand out */
}

/* Strong Element Styling */
.leaflet-tooltip strong {
    color: var(--dark-green); /* Matches tooltip theme with gold text */
    font-weight: bold; /* Emphasizes the strong content */
}

/* Line Break Styling */
.leaflet-tooltip-content br {
    margin-bottom: 4px; /* Adds space between lines for better readability */
}

#citeModal .citation-info {
  color: #0176d5 !important;
    font-size: 1rem;
}


#citeModal .wrapper-copy p {
    background-color: #f0f1fa;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    margin: 0;
}

#citeModal .wrapper-copy img {
    margin: 0 1.1764705882rem 0 .2941176471rem;
    height: 30px;
}

#citeModal .wrapper-copy {
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    overflow-x: auto;
    max-width: 100%;
}

#citeModal .wrapper-copy:hover {
    background-color: #f8f9fa; /* Light gray background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
}

#citeModal .citation-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    display: block;
    font-size: 1rem;
}


#citeModal .modal-footer p {
    font-size: 13px;
    line-height: 1.3;
    font-weight: 500;
    margin: 0 0 1.4em;
}

#citeModal .modal-title{
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: .5882352941rem;
}

@media (max-width: 992px) {
    #citeModal .modal-dialog {
        max-width: none !important; /* Override Bootstrap's max-width */
        width: calc(100vw - 2rem) !important;
        /*height: calc(100vh - 2rem) !important;*/
        margin: 1rem auto;
    }
}



.section-divider {
    border-top: 1px solid #E6E6E6;
    /*margin-top: 5rem;*/
    margin-bottom: 1rem;
}

.section-header {
    padding-top: 2rem;
    padding-bottom: 2rem;
}


/* On mobile, make the border shorter than full width */
@media (max-width: 576px) {
    .section-divider {
        width: calc(100% - 1rem); /* creates left/right gaps */
        margin: 0 auto;           /* center it horizontally */
    }
}


/*.citation-text {*/
/*    white-space: normal; !* Ensures spaces behave properly *!*/
/*    display: inline; !* Prevents unintended block behavior *!*/
/*}*/


.subpage-header {
    font-weight: 700;
    font-size: clamp(2.5rem, 6vw, 6.25rem); /* Scales between 2.5rem and 6.25rem */
    color: #185642;
}

.subpage-desc {
    font-weight: 700;
    font-size: clamp(1.1rem, 2vw, 1.5rem); /* default scaling on bigger screens */
    line-height: 1.6;
    color: #185642;
}


.carousel-item-name {
    font-weight: 700;
    font-size: 1.125rem; /* 18px */
    color: #000000;
    margin-bottom: 0.25rem;
}

.carousel-item-dates {
    font-size: 0.9375rem; /* 15px */
    color: #444444;
    margin-bottom: 0.5rem;
}

.carousel-item-description {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.5rem;  /* 24px */
    color: #444444;
}

.carousel-thumbnail {
    width: 120px !important;
    height: 120px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
}







.landing-bg {
    background:
        /*url('/static/images/landing-banner-bg.svg') no-repeat center 50px,*/
            linear-gradient(180deg, #68D0C6 0%, #FFFFFF 76.91%);
    background-size: cover;
}



/*.homepage-background {*/
/*    background:*/
/*        url('/static/images/homepage-banner-v2.svg') no-repeat center center,*/
/*        linear-gradient(180deg, #68D0C6 0%, #FFFFFF 76.91%);*/
/*    background-size: cover;*/
/*}*/


.badge-rounded {
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 500 !important;
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.692 !important;   /* 22px / 13px */
    letter-spacing: 0 !important;
    border-radius: 50rem !important;
    padding-left: 1rem;   /* 16px */
    padding-right: 1rem;  /* 16px */
    gap: 0.5rem !important;            /* 8px between children */
}


/*#tbl-treasury-items img {*/
/*    width: 80px;*/
/*    height: 80px;*/
/*}*/


.tbl-img {
    width: 80px;
    height: 80px;
}

@media (max-width: 768px) {
    .tbl-img {
        width: 50px;
        height: 50px;
    }
}


.tbl-img-sm {
    width: 45px;
    height: 45px;
}

#tbl-treasury-items .img-thumbnail:not(.fallback-image) {
    object-fit: contain;        /* Only real thumbnails */
    border-radius: 7px;
    background-color: #282C2D;  /* Only real thumbnails */
}

#tbl-related-people td img {
    object-fit: cover; /* Optional: keeps the image nicely cropped in its circle */
    object-position: top;
}



/* Default: Mobile first (small screens) */
#randomiser #random-item-image {
    width: clamp(130px, 30vw, 578px);
    height: clamp(130px, 30vw, 578px);
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    display: block;
}

#randomiser .randomiser-icon-img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

#randomiser .randomiser-icon-label {
  font-weight: 500;
  font-size: 14px;
}

#randomiser .randomiser-name {
  font-size: 28px;
}

#randomiser .randomiser-time-period {
  font-size: 0.625rem;
}

#randomiser .randomiser-description {
  font-size: 14px;
}



.tbl-thumbnail {
    width: 90px;
    height: 90px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;               /* Circle shape */

    /* Mimic Bootstrap's .img-thumbnail */
    padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    box-sizing: border-box;           /* Keeps padding inside width/height */
}

@media (max-width: 768px) {
    .tbl-thumbnail {
        width: 50px;
        height: 50px;
    }
}


/*!* Tablet and up (≥768px) *!*/
/*@media (min-width: 768px) {*/
/*    #randomiser #person-image {*/
/*        width: 350px;*/
/*        height: 350px;*/
/*    }*/
/*}*/

/*!* Custom Large and up (≥896px) *!*/
/*@media (min-width: 896px) {*/
/*    #randomiser #person-image {*/
/*        width: 500px;*/
/*        height: 500px;*/
/*    }*/
/*}*/

/*!* Custom XL desktop and up (≥1224px) *!*/
/*@media (min-width: 1224px) {*/
/*    #randomiser #person-image {*/
/*        width: 578px;*/
/*        height: 578px;*/
/*    }*/
/*}*/



/* Mobile (default) */
#randomiser #refresh-button {
    width: 130px;
    height: 130px;
}

/* Tablet (medium screens ≥768px and <1200px) */
@media (min-width: 768px) and (max-width: 1199.98px) {
    #randomiser #refresh-button {
        width: 160px;
        height: 160px;
    }
}

/* Desktop (large screens ≥1200px) */
@media (min-width: 1200px) {
    #randomiser #refresh-button {
        width: 190px;
        height: 190px;
    }
}


.icon-shadow {
    background-color: rgba(255, 255, 255, 0.1); /* #FFFFFF at 10% opacity */
    box-shadow: inset 0 0 24px 12px rgba(255, 255, 255, 0.2); /* Inner shadow */
    border-radius: 50%; /* Makes it a perfect circle */
    overflow: hidden;   /* Ensures inner shadow doesn't leak outside */
}




.icon-large {
    width: 13.666rem;   /* 218.65px / 16 */
    height: 13.666rem;
    max-width: 100%;
}

@media (max-width: 768px) {
    .icon-large {
        width: 5.183rem;   /* 82.9357px / 16 */
        height: auto;
    }
}


/*.icon-transparent ellipse,*/
/*.icon-transparent path {*/
/*    fill: #E6E6E6 !important;*/
/*}*/






/* Base style (desktop) */
.homepage-logo {
    width: 220px;  /* adjust as needed */
    height: auto;  /* maintains aspect ratio */
    display: block;
    object-fit: contain;
    /*padding-top: 20px;*/
    /*margin-bottom: 40px;*/
}

/* Shrink for smaller screens */
@media (max-width: 768px) {
    .homepage-logo {
        width: 180px;  /* adjust as needed */
        height: auto;  /* maintains aspect ratio */
    }
}


.vertical-divider {
    border-left: 1px solid black;
    height: 30px;
    margin-right: 10px;
}

.navbar-kg-icon {
    width: 23.86px;
    height: 23.69px;
    margin-right: 6px;
}


.navbar-logo {
    width: 156.32400512695312px;
    height: 45.145790100097656px;
}


/* Button */
/* Button */
.navbar-btn {
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 50rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none;
    outline: none;

}

@media (max-width: 767.98px) {
    .navbar-btn {
        width: 40px;
        height: 40px;
        padding: 0; /* remove padding to keep shape circular */
        border-radius: 50%;
        justify-content: center; /* center icon/content */
        gap: 0; /* remove gap if no text */
    }
}

/*!* Only the text inside the button bold *!*/
/*.navbar-btn span:first-child {*/
/*  font-weight: bold;*/
/*}*/

.navbar-btn .dropdown-icon {
    width: 20px;
    height: 20px;
}

.navbar-btn .icon-bg {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .navbar-btn .icon-bg{
        display: none !important;
    }
}


.navbar-dropdown {
    margin-top: 0.5rem;
    padding: 0.5rem 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    background-color: white;
    width: auto;           /* Prevents overflow if content gets too wide */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}


/* Dropdown items */
.navbar-dropdown .dropdown-item-custom {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: inherit;
}


.navbar-dropdown .dropdown-item-custom.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}



.navbar-dropdown .dropdown-item-custom:hover {
    background-color: #f8f9fa;
    text-decoration: none;
}

/*.navbar-dropdown .dropdown-item-custom img {*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    border-radius: 50%;*/
/*    object-fit: cover;*/
/*    object-position: top;*/
/*}*/

.navbar-dropdown .dropdown-item-text {
    display: flex;
    flex-direction: column;
}

/*.navbar-dropdown .dropdown-item-text span:first-child {*/
/*  font-weight: 500;*/
/*}*/

.navbar-dropdown .dropdown-item-text span:last-child {
    font-size: 0.85rem;
    color: gray;
}


.navbar-thumbnail {
    width: clamp(40px, 5vw, 60px);
    height: clamp(40px, 5vw, 60px);
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
}

:root {
    --curated-tag-color: #666DD9;
    --gold-seam-tag-color: #FFBF27;
    --portal-tag-color: #0dcaf0;
}

.collection-tag {
    padding: 7px 8px;
    border-radius: .294rem;
    margin-right: 5px;
    /*margin-bottom: 10px;*/
    white-space: nowrap;
    display: inline-block;
    font-size: .823rem;
    line-height: 18px;
    text-decoration: none;

    background-color: var(--tag-bg, #ccc); /* fallback */
    color: #282c2d; /* default text color */
}

/* Assign background color only */
.curated-tag .collection-tag {
    --tag-bg: var(--curated-tag-color);
    color: #fff;
}

.gold-seam-tag .collection-tag {
    --tag-bg: var(--gold-seam-tag-color);
}

.portal-tag .collection-tag {
    --tag-bg: var(--portal-tag-color);
}







.carousel-item-border {
    border-left: 1px solid #dee2e6;
    border-right: none;
    border-top: none;
    border-bottom: none;
}


.table-section {
    min-height: 700px;
    padding-block: 3rem;
}

.table-section .table-container {
    max-height: 600px;
    overflow-y: auto;
}

@media (max-width: 576px) {
    .table-section {
        min-height: 400px;
    }

    .table-section .table-container {
        max-height: 400px;
    }
}


.profile-thumbnail {
    width: 190px;
    height: 190px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%; /* This makes it a circle */
}

@media (max-width: 600px) {
    .profile-thumbnail {
        width: 120px;
        height: 120px;
    }
}


/* Forces dropdown to appear to the left of the button */
.dropdown-menu-leftward {
    left: auto !important;
    right: 100%; /* Attach the right edge of the menu to the left edge of the button */
    top: 100%; /* Aligns it below the button (optional, default behavior) */
    margin-top: 0.5rem; /* Optional spacing */
}





.portal {
    background-color: #1f2724;
    color: white;
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.portal.theme-blue {
    --primary-color: #42E8FB;
    --primary-color-hover: #00bcd4;
}

.portal.theme-orange {
    --primary-color: #FF5722;
    --primary-color-hover: #e64a19;
}

.portal.theme-green {
    --primary-color: #4CAF50;
    --primary-color-hover: #43A047;
}
.portal .portal-title {
    color: white;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3rem); /* min 32px, fluid, max 48px */
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}


.portal .portal-title::before {
    content: '';
    width: 40px;  /* was 50px */
    height: 30px; /* was 40px */
    border: 8px solid var(--primary-color); /* was 10px */
    background: transparent;
    display: inline-block;
    margin-right: 10px;
    box-sizing: border-box;
}


.portal .highlight-line {
    width: 6.84rem;
    height: 0.91rem;
    background-color: var(--primary-color);
    margin-top: 0.94rem;
    margin-bottom: 1.2rem;
}


/*.portal .btn-custom {*/
/*    background-color: var(--primary-color);*/
/*    color: #1f2724;*/
/*    border: none;*/
/*    min-width: 200px;*/
/*    margin-top: auto; !* Pushes the button to the bottom inside a flex column *!*/
/*}*/


.portal .btn-custom {
    display: inline-block;
    width: auto;
    min-width: 14.1176470588rem;
    font-weight: 500;
    font-size: 1.0588235294rem;
    text-align: center;
    white-space: nowrap;
    line-height: 1.9411764706rem;
    background: #42E8FB;
    color: #292c2d;
    border-radius: 0.2941176471rem;
}

@media (min-width: 992px) {
    .portal .btn-custom {
        transition: color 0.2s, background-color 0.2s, border-color 0.2s, filter 0.2s, opacity 0.2s;
    }

    .portal .btn-custom:hover {
        filter: brightness(0.9);
    }
}



.portal .text-custom {
    color: var(--primary-color);
}


/*.portal .btn-custom:hover {*/
/*    background-color: var(--primary-color-hover);*/
/*    color: white;*/
/*}*/

.portal a {
    color: var(--primary-color);
    text-decoration: none;
}

.portal a:hover {
    text-decoration: none;
}

.portal .content-wrapper {
    align-items: center;
    border-top: 2px solid rgba(255, 255, 255, 1);
    padding-top: 2rem;
}

.portal .overlay-heading {
    white-space: normal;
    max-width: 100%;
    display: block;
    color: white;         /* ✅ Moved outside media query */
    font-weight: 600;
}

/* Apply styles only on large screens (≥ 992px) */
@media (min-width: 992px) {
    .portal .overlay-heading {
        margin-left: -10rem;

        /* Word breaking */
        word-break: break-word;
        overflow-wrap: break-word;
    }
}


.portal .image-wrapper img {
    border-radius: 5px;
}



/* Style for leaflet map county boundaries */
.boundary-label-text {
    font-size: 14px;
    font-weight: bold;
    color: black;
    text-align: center;
    text-shadow: 1px 1px 2px white;
    pointer-events: none;
}


/* Styles for rotating background */
.image-and-ellipses-wrapper {
    position: relative;
    width: 330px;
    flex-shrink: 0;
    margin-right: 7%;
    z-index: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .image-and-ellipses-wrapper {
        position: relative;
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
        pointer-events: none;
    }
}

.image-and-ellipses-wrapper .bg-ellipses {
    position: absolute;
    top: -150%;
    transform-origin: center;
    opacity: 0.5;
    animation: rotateCounterClockwiseHome 10s ease-in-out alternate infinite;
}

.image-and-ellipses-wrapper .bg-ellipses.counter {
    animation: rotateCounterCounterClockwiseHome 10s 2s ease-in-out alternate infinite;
}

@media (max-width: 768px) {
    .image-and-ellipses-wrapper .bg-ellipses {
        width: 320%;
        top: -80%;
        left: -120%;
    }
}

.image-and-ellipses-wrapper .images {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: 2;
}

.image-and-ellipses-wrapper .images img {
    position: relative;
    object-fit: cover;
    opacity: 0;
    /*transition: all 1s ease-in-out;*/
}

.image-and-ellipses-wrapper .images img.active {
    opacity: 1;
    z-index: 1;
}

.image-and-ellipses-wrapper .ellipses-animation-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.image-and-ellipses-wrapper .ellipses-animation-wrapper .ellipses-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

@keyframes rotateCounterClockwiseHome {
    0% {
        transform: translateX(-15%) rotate(0);
    }
    100% {
        transform: translateX(-15%) rotate(70deg);
    }
}

@keyframes rotateCounterCounterClockwiseHome {
    0% {
        transform: translateX(-15%) rotate(70deg);
    }
    100% {
        transform: translateX(-15%) rotate(0);
    }
}



/*
Custom table styling
 */



.table1.dataTable tbody tr {
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

/*.table1.dataTable tbody tr:hover {*/
/*    background-color: #f5f5f5 !important;*/
/*}*/



.table1 {
    font-size: 0.8235294118rem !important;
    line-height: 1.6em !important;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-top: solid 1px #E6E6E6;
    min-width: 600px; /* optional: prevents table from squishing too much */
    /*color: #343c3c;*/
}



.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/*
Time period font on people-homepage
 */

.period-title {
    font-weight: 500;
    font-size: clamp(2rem, 8vw, 6.5rem); /* scales between 2rem and 6.5rem */
    line-height: 127%;
    letter-spacing: -1px;
}

.period-date {
    font-weight: 500;
    font-size: clamp(1.5rem, 4vw, 3rem); /* scales between 1.5rem and 3rem */
    line-height: 127%;
    letter-spacing: -1px;
    color: #6F7070;
}