/* Define general color palette */
:root {

    --font-family: 'Source Sans Pro', sans-serif;
    --font-size-body: 19px;
    --line-height-body: 28px;

    --idsk-primary-blue: #126DFF; /* Main Blue */
    --idsk-primary-dark-blue: #072C66; /* Dark Blue */
    --idsk-primary-background: #FFFFFF; /* Background White */

    /* Extended Primary Palette */
    --idsk-primary-P600: #072C66;
    --idsk-primary-P500: #0B4199;
    --idsk-primary-P400: #126DFF;
    --idsk-primary-P300: #88B3F6;
    --idsk-primary-P200: #C3D9F9;
    --idsk-primary-P100: #EFF5FE;

    /* Alert Palette */
    --idsk-alert-base-dark: #072C66;
    --idsk-alert-base: #126DFF;
    --idsk-alert-base-medium: #C3D9F9;
    --idsk-alert-base-light: #EFF5FE;
    --idsk-alert-warning-dark: #4E0711;
    --idsk-alert-warning: #C3112B;
    --idsk-alert-warning-medium: #F8B5B9;
    --idsk-alert-warning-light: #FBEEF0;
    --idsk-alert-positive-dark: #033608;
    --idsk-alert-positive: #078814;
    --idsk-alert-positive-medium: #9FDAA5;
    --idsk-alert-positive-light: #EBF5EC;
    --idsk-alert-notice-dark: #4E2A00;
    --idsk-alert-notice: #BD730C;
    --idsk-alert-notice-medium: #EBCFAA;
    --idsk-alert-notice-light: #FAF4EC;

    /* Text Colors */
    --idsk-text-black: #0b0c0c;
    --idsk-text-gray: #757575;
    --idsk-text-light-gray: #E0E0E0;
    --idsk-text-white: #FFFFFF;
    --idsk-text-dark: #072C66;
    --idsk-text-medium: #0B4199;
    --idsk-text-light: #88B3F6;
    --idsk-text-primary: #126DFF;
    --idsk-text-positive-dark: #033608;
    --idsk-text-positive: #078814;
    --idsk-text-warning-dark: #4E0711;
    --idsk-text-warning: #C3112B;
    --idsk-focus-state: #D96E00;

    /* Slovak Palette */
    --idsk-slovak-white: #FFFFFF;
    --idsk-slovak-red: #C3112B;
    --idsk-slovak-blue: #1E4E9D;
    --idsk-slovak-gray: #DDDEDE;

}

/* Buttons */

.btn-login {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background-color: var(--idsk-primary-dark-blue);
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
  }
  
  .btn-login:hover {
    background-color: var(--idsk-primary-blue);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: #ffffff;
  }
  
  .btn-login:active {
    background-color: #002f54; /* Even darker for active state */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

.btn-primary {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    border: 2px solid #002f54; /* Darker border */
    background-color: var(--idsk-primary-dark-blue);
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.btn-primary:hover {
    background-color: var(--idsk-primary-blue);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: #ffffff;
}

/* White Button with Border */
.btn-white {
    background-color: white; 
    color: black; 
    border: 2px solid #bababa; 
    border-radius: 5px;
    padding: 10px 20px; 
    cursor: pointer; 
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth hover effect */
}

/* Hover State */
.btn-white:hover {
    background-color: #bababa;
    color: black; 
    border-color: black; 
}

/* Focus State */
.btn-white:focus {
    outline: none; /* Remove default focus outline */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Add a subtle shadow */
}


/* General body styling */
body {
    font-family: 'Source Sans Pro', Arial, sans-serif;
    color: var(--text-color);
    height: 100%; /* Full viewport height */
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Main content container */
.app-container {
    display: flex;
    flex-direction: column;
    min-height: 65vh; /* Full viewport height - this makes the footer sticked to the bottom */
}

/* Footer styles */
.footer {
    background-color: var(--idsk-primary-dark-blue); /* Footer background */
    color: white; /* Text color */
    padding: 15px 0; /* Vertical padding for the footer */
    text-align: center; /* Center-align text */
    font-size: 0.9rem;
}


@media (min-width: 731px) {
    body {
        font-size: 19px;
        line-height: 28px;
        font-weight: 400; /* Font cut: Regular (400 is the standard for regular fonts) */
    }

    /* Headline Styles */
    h1 {
        font-size: 48px;
        line-height: 55px;
        font-weight: 900; /* Font cut: Black */
        margin: 0 0 20px;
    }

    h2 {
        font-size: 36px;
        line-height: 45px;
        font-weight: 700; /* Font cut: Bold */
        margin: 0 0 18px;
    }

    h3 {
        font-size: 24px;
        line-height: 35px;
        font-weight: 700; /* Font cut: Bold */
        margin: 0 0 15px;
    }

    h4 {
        font-size: 20px;
        line-height: 26px;
        font-weight: 700; /* Font cut: Bold */
        margin: 0 0 12px;
    }
}

@media (max-width: 730px) {
    body {
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
    }

    /* Headline Styles */
    h1 {
        font-size: 36px; /* Size */
        line-height: 45px; /* Line size */
        font-weight: 700; /* Font cut: Bold */
        margin: 0 0 20px; /* Spacing after the headline */
    }

    h2 {
        font-size: 24px; /* Size */
        line-height: 35px; /* Line size */
        font-weight: 700; /* Font cut: Bold */
        margin: 0 0 18px; /* Spacing after the headline */
    }

    h3 {
        font-size: 20px; /* Size */
        line-height: 26px; /* Line size */
        font-weight: 700; /* Font cut: Bold */
        margin: 0 0 15px; /* Spacing after the headline */
    }

    h4 {
        font-size: 19px; /* Size */
        line-height: 24px; /* Line size */
        font-weight: 700; /* Font cut: Bold */
        margin: 0 0 12px; /* Spacing after the headline */
    }
}

/* Header styling */
header {
    background-color: var(--header-background);
    color: var(--button-text-color);
    padding: 10px 0;
    text-align: center;
}


/* Links */
.footer a {
    color: #333; /* Neutral link color */
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 1rem; /* Match link text size with the rest */
}


/* Footer list styling */
.footer ul {
    padding: 0;
    list-style-type: none;
    margin: 0;
}

.footer ul li {
    margin-bottom: 0.2rem; /* Tighter spacing between list items */
}

/* Logo text */
.logo-text {
    font-weight: bold;
    color: #A46D87; /* Logo accent color */
    font-size: 1.2rem; /* Larger logo text */
    margin-bottom: 0.3rem; /* Reduced spacing below the logo */
}

/* Footer bottom */
.footer-bottom {
    background-color: var(--idsk-primary-dark-blue); /* Accent background color */
    color: white; /* White text */
    padding: 2px 0; /* Minimal padding to slim the height */
    font-size: 0.9rem; /* Larger text in footer bottom */
    line-height: 1; /* Tighten line height to prevent extra space */
}

/* Text inside the footer bottom */
.footer-bottom p {
    margin: 0; /* Remove all margin */
    font-size: inherit; /* Match the font size of the container */
}

/* Social media icons */
.footer-bottom ul {
    padding: 0;
    margin: 0 0 0 10px; /* Adjust spacing from the text */
    display: flex;
    gap: 6px; /* Tighter spacing between icons */
}

.footer-bottom a {
    color: white; /* White for icons */
    font-size: 1rem; /* Match size with larger footer text */
    transition: transform 0.3s ease; /* Subtle hover effect */
}

.footer-bottom a:hover {
    transform: scale(1.1); /* Slight hover effect */
}

/* Image column */
.footer-image {
    text-align: center; /* Center-align image within the column */
}

.footer-image img {
    max-width: 80px; /* Slightly smaller image width */
    height: auto; /* Maintain aspect ratio */
    margin: 5px auto; /* Reduce spacing around the image */
    display: block; /* Ensure the image stays centered */
    border-radius: 5px; /* Optional: Slightly rounded corners */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .footer-image img {
        max-width: 60px; /* Smaller size for small screens */
    }
}

@media (max-width: 768px) {
    .footer .row {
        text-align: center; /* Center-align columns */
    }

    .footer .col {
        margin-bottom: 5px; /* Reduce spacing between rows */
    }

    .footer-bottom {
        flex-direction: column;
    }

    .footer-bottom p {
        margin-bottom: 5px; /* Reduce spacing below text */
    }
}






/* Links */
a {
    color: var(--link-color);
    /*text-decoration: none;*/
}

a:hover {
    color: var(--idsk-primary-blue);
    text-decoration: underline;
}

/* Buttons */
button {
    background-color: var(--button-background);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: darken(var(--button-background), 10%);
}

/* General container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
}

/* Card component */
.card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Typography */
h1, h2, h3 {
    color: var(--text-color);
}

p {
    line-height: 1.6;
}

/* Utility classes */
.text-center {
    text-align: center;
}

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

.text-secondary {
    color: var(--secondary-color);
}

.bg-primary {
    background-color: var(--primary-color);
    color: #fff;
}

.bg-secondary {
    background-color: var(--secondary-color);
    color: #fff;
}


.top-info-bar {
    background: var(--idsk-primary-dark-blue);
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-info-bar .top-info-bar-inner {
    display: flex;
    justify-content: space-between;  /* Space between left text and language selector */
    width: 100%;  /* Ensure the inner container takes up full width */
    max-width: 1200px;  /* Optional max-width to control the layout width */
}

.top-info-bar .left-text {
    margin: 0;
}

.top-info-bar .language-selector {
    position: relative;
    display: inline-block;
    color: white;
    font-family: inherit;
    border: none;
    background: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 20px; /* Space for the arrow */
}

.top-info-bar .language-selector::-ms-expand {
    display: none; /* Hide default arrow in IE */
}

.top-info-bar .language-selector-wrapper {
    position: relative;
}

.top-info-bar .language-selector-wrapper::after {
    content: '▼'; /* Custom arrow */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 12px;
    color: white;
}

.navbar {
    font-family: var(--font-family); 
}

.navbar-nav .nav-link {
    font-size: 19px; /* Match body text */
    margin: 0 10px;
    transition: color 0.3s ease;
    color: var(--idsk-text-black);
}

.navbar-nav .nav-link:hover {
    text-decoration: underline;
}

.navbar-nav .nav-link.active {
    position: relative;
    text-decoration: underline;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Adjust to place underline at the bottom edge */
    left: 0; /* Start from the beginning of the text */
    width: 100%; /* Match the width of the text */
    height: 3px; /* Thickness of the underline */
    background-color: var(--secondary-color); /* Underline color */
    display: block; /* Ensure it behaves like a block element */
}



/* Background Container */
.background-shapes {
    /*position: absolute; 
    top: 80px; 
    left: 0;
    width: 100%;
    height: calc(100vh - 80px); 
    background-color: white; 
    z-index: -1; 
    overflow: hidden; */

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Place below the content and footer */
    background-color: white;
    overflow: hidden;

    
}

/* Left Triangle (Bigger and on top of right triangle) */
.background-shapes::before {
    content: "";
    position: absolute;
    top: 150px;
    left: 0;
    width: 100%; /* Increase size for the left triangle */
    height: 100%;
    background-color: #95697c; /* Left triangle color */
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    z-index: -2; /* Layered above the right triangle */
}

/* Right Triangle (Smaller and underneath the left triangle) */
.background-shapes::after {
    content: "";
    position: absolute;
    top: 250px;
    right: 0;
    width: 50%; /* Smaller width for the right triangle */
    height: 100%;
    background-color: #b39bb2; /* Right triangle color */
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
    z-index: -3; /* Layered below the left triangle */
}

/* Content Layer */
.page-content {
    position: relative; /* Content stays above the background */
    z-index: 1; /* Higher than the background */
}
/* Wrapper for centering the accordion */
.page-wrapper {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100vh; /* Full viewport height */
    background-color: #f8f8f8; /* Optional light gray background */
    padding: 20px; /* Padding for smaller screens */
    box-sizing: border-box; /* Include padding in height */
}

/* Card container for accordion */
.card-container {
    max-width: 800px; /* Restrict max width */
    width: 100%; /* Ensure responsiveness */
    margin: 0 auto; /* Center horizontally */
    background-color: #ffffff; /* White background */
    border: 1px solid #d3d3d3; /* Light border */
    border-radius: 4px; /* Rounded edges */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px; /* Padding around accordion */
}

/* Accordion container */
.accordion {
    border: none; /* Remove outer border */
}

/* Accordion item */
.accordion-item {
    border: none; /* Remove Bootstrap default borders */
    margin-bottom: 4px; /* Add space between items */
}

/* Icon transition on hover */
.accordion-button:hover .icon {
    color: #555; /* Slightly darker hover color */
}

/* Accordion body styling */
.accordion-body {
    padding: 15px 20px; /* Spacing for readability */
    font-size: 16px; /* Standard font size */
    line-height: 1.5; /* Improve readability */
    background-color: #ffffff; /* White background for content */
    color: #333; /* Neutral text color */
    border-top: 1px solid #d3d3d3; /* Divider line */
}

/* Link styling inside accordion body */
.accordion-body a {
    color: #0b63ce; /* Blue for links */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Bold for emphasis */
}

.accordion-body a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .accordion-button {
        font-size: 16px; /* Slightly smaller font */
        padding: 12px 15px; /* Compact padding */
    }

    .accordion-body {
        padding: 12px 15px; /* Compact padding for body */
    }
}

/* Responsive icon container */
.responsive-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%; /* Makes it a circle */
    margin: 0 auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Login icon styling */
.login-icon {
    width: 50px;
    height: 50px;
    background-image: url('https://uxwing.com/wp-content/themes/uxwing/download/crime-security-military-law/privacy-icon.png'); /* New nicer icon */
    background-size: contain; /* Ensures the icon fits inside the circle */
    background-repeat: no-repeat;
    background-position: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .responsive-icon {
        width: 80px;
        height: 80px;
    }

    .login-icon {
        width: 40px;
        height: 40px;
    }
}

/* Card header */
.card-header {
    background-color: #e7ecf3 !important;
}

.active > .page-link, .page-link.active {
    z-index: 3;
    color: white !important;
    background-color: var(--idsk-primary-dark-blue) !important;
    border-color: var(--idsk-primary-dark-blue) !important;
  }


  /* Home page - Section 1: Header */
/* Section 1: Header Section */
.header-section {
    background: url('images/triangles_grey.png') no-repeat center center/cover;
    padding: 80px 20px;
    text-align: center;
    color: var(--idsk-text-dark);
}

.header-content {
    display: inline-block;
    /* background-color: rgba(255, 255, 255, 0.9);  Slight transparency */
    padding: 20px;
    border-radius: 10px;
}

.header-icon {
    width: 60px;
    margin-bottom: 10px;
}

.search-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 5px;
}

.search-bar input {
    width: 450px; /* Default width */
    padding: 10px;
    font-size: 1rem;
    border: 1px solid var(--idsk-primary-dark-blue);
    border-radius: 5px 0 0 5px;
    outline: none;
    transition: width 0.3s ease;
}

.search-bar button {
    background-color: var(--idsk-primary-blue);
    border: none;
    color: white;
    padding: 10px 15px;
    font-size: 1rem;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-bar button:hover {
    background-color: var(--idsk-primary-dark-blue);
}

/* Responsive Design */
@media (max-width: 768px) {
    .search-bar {
        flex-direction: column; /* Stack input and button vertically */
        gap: 10px;
    }

    .search-bar input {
        width: 100%; /* Full width */
        border-radius: 5px; /* Reset border radius */
    }

    .search-bar button {
        border-radius: 5px; /* Reset border radius */
        width: 100%; /* Full width button */
    }
}

@media (max-width: 480px) {
    .header-content {
        padding: 10px; /* Reduce padding for smaller screens */
    }

    .search-bar input {
        font-size: 0.9rem; /* Smaller text */
        padding: 8px; /* Adjust padding */
    }

    .search-bar button {
        font-size: 0.9rem; /* Smaller text */
        padding: 8px 10px; /* Adjust padding */
    }
}


/* Section 2: Cards */
.cards-section {
    position: relative;
    background: url('images/education_grey.png') no-repeat center center/cover;
    padding: 100px 20px; /* Increased height */
}

.cards-container {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping */
    justify-content: center;
    gap: 30px; /* Space between cards */
    text-align: center;
}

.card-intro {
    background-color: white;
    border: 1px solid var(--idsk-primary-dark-blue);
    border-radius: 10px;
    padding: 40px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    flex: 1 1 calc(33.333% - 30px); /* Responsive: 3 cards per row with spacing */
    max-width: 250px; /* Default width for cards */
    height: 270px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between title and button */
}

.card-intro h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: var(--idsk-text-dark);
}

.btn-cards {
    background-color: var(--idsk-primary-dark-blue);
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: auto;
    font-weight: bold;
}

.btn-cards:hover {
    background-color: var(--idsk-primary-blue);
    font-weight: bold;
    text-decoration: none;
}

/* First Card Specific Styling */
.cards-container .card-intro:first-child {
    background-color: var(--idsk-primary-dark-blue);
    color: #ffffff;
    border: none;
}

.cards-container .card-intro:first-child h3 {
    color: #ffffff;
}

.cards-container .card-intro:first-child .btn-cards {
    background-color: #ffffff;
    color: var(--idsk-primary-dark-blue);
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cards-container .card-intro:first-child .btn-cards:hover {
    background-color: var(--idsk-primary-blue);
    color: #ffffff;
}

/* Responsive Design */
@media (max-width: 992px) { /* Tablets and smaller laptops */
    .card-intro {
        flex: 1 1 calc(50% - 30px); /* 2 cards per row */
    }
}

@media (max-width: 768px) { /* Mobile devices */
    .card-intro {
        flex: 1 1 100%; /* 1 card per row */
        max-width: 100%; /* Full width cards */
    }

    .cards-section {
        padding: 60px 10px; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 480px) { /* Small mobile devices */
    .card-intro h3 {
        font-size: 1.2rem; /* Reduce heading size */
    }

    .btn-cards {
        padding: 8px 15px; /* Smaller buttons for small screens */
    }
}

/* Section 3: Process Image */
.process-section {
    text-align: center;
    padding: 40px 20px;
    background-color: none;
}

.process-section h2 {
    margin-bottom: 20px;
    color: var(--idsk-text-dark);
    font-size: 1.5rem;
}

.process-image {
    max-width: 1000px;
    width: 1000px;
    height: auto;
}

/* Section 3: Process Text */
.process-text {
    text-align: justify;
    padding: 10px 20px;
    background-color: none;
}

.process-text h2 {
    text-align: center;
    margin-bottom: 20px;
    color: var(--idsk-text-dark);
    font-size: 1.5rem;
}

/* Manual: Blue text */
.manual-text-blue {
    text-align: justify;
    padding: 10px 20px;
    color: var(--idsk-primary-dark-blue);
    background-color: none;
}

/* Icons: Dark blue style */
.isvd-icon-dark-blue {
    color: var(--idsk-primary-P100);
    background-color: var(--idsk-primary-dark-blue);
}

/* Navmenu: Dark blue style */
.isvd-nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--idsk-primary-dark-blue);
    --bs-nav-link-hover-color: var(--idsk-primary-blue);
    --bs-nav-link-disabled-color: var(--bs-secondary-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
  
.isvd-nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: none;
    border: 0;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Grid: color style*/
.isvd-grid-title {
    font-size: larger;
    background-color: #C3D9F9;
}

.isvd-grid-title-normal {
    font-size: medium;
    background-color: #C3D9F9;
}

.isvd-grid-subtitle {
    background-color: #DFDFDF;
}

.isvd-grid-subtitle-normal {
    font-size: medium;
    background-color: #DFDFDF;
}

.isvd-grid-item-normal {
    font-size: medium;
    background-color: #FFFFFF;
}

/* Card: color styles */
.isvd-card, .isvd-card-primary {
    background-color: #EFF5FE;
    border: 2px solid #ddd;
    border-radius: 8px;
    width: 300px;
    padding: 0px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    min-height: 15rem;
}

.isvd-card-header, .isvd-card-header-primary {
    background-color: #EFF5FE !important;
    font-weight: bold;
}

.isvd-card-secondary {
    background-color: #C3D9F9;
    border: 2px solid #ddd;
    border-radius: 8px;
    width: 300px;
    padding: 0px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    min-height: 15rem;
}

.isvd-card-header-secondary {
    background-color: #C3D9F9 !important;
    font-weight: bold;
}

.isvd-card-tertiary {
    background-color: #88B3F6;
    border: 2px solid #ddd;
    border-radius: 8px;
    width: 300px;
    padding: 0px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    min-height: 15rem;
}

.isvd-card-header-tertiary {
    background-color: #88B3F6 !important;
    font-weight: bold;
}

.isvd-card-quaternary {
    background-color: #126DFF;
    border: 2px solid #ddd;
    border-radius: 8px;
    width: 300px;
    padding: 0px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    min-height: 15rem;
}

.isvd-card-header-quaternary {
    background-color: #126DFF !important;
    font-weight: bold;
}

.isvd-card-light {
    background-color: #FFFFFF;
    color: #777777;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 0px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    min-height: 15rem;
}

.isvd-card-header-light {
    background-color: #FFFFFF !important;
    color: #777777;
    font-weight: bold;
}

/* Cookies banner styling */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    color: #333;
    padding: 16px;
    font-size: 14px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;

    box-shadow: 
    0 0 10px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(0, 0, 0, 0.2),
    0 0 30px rgba(0, 0, 0, 0.1);
}

.cookie-banner p {
    margin: 0;
    padding-right: 16px;
    flex: 1;
}

.button-container {
    display: flex;
    gap: 8px;
}

.accept-button, .decline-button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #072C66;
    color: white;
}

.accept-button:hover, .decline-button:hover {
    background-color: #126DFF;
}