:root {
    --white: #fff;
    --dark-white: #f5f5f5;
    --light-grey: #e6e6e6;
    --grey: #777;
    --dark-grey: #333;
    --dark-blue: #002266;
    --dark-green: #1b3409;
    --light-green: #9bd770;
    --darker-blue: #001133;
    --light-blue: #0054cc;
    --orange: #FC600A;
    --orange-dark: #fa6d0e;
    --orange-light: #fb9048;
    --yellow: #fabd29;
    --yellow-light: #fbca53;
    --fourk-gold: #d4af37;
    --font-main: "Open sans", sans-serif;
}

@font-face {
    font-family: 'BerkshireSwash';
    src: url('./webfonts/BerkshireSwash-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@media (min-width: 768px) {
    .modal-xl {
        width: 90% !important;
        max-width: 1200px !important;
    }
}

html, body {
    background-color: black !important; /* Forces the black background */
    margin: 0;
    padding: 0;
    height: 100%;
    position: relative;
    z-index: -3;
}

#menu {
    min-height: 74px;
}

.logotopcorner {
    position: fixed; /* Fixes the logo in the top-left corner, not affected by scrolling */
    top: 10px; /* Adjust the vertical positioning */
    left: 10px; /* Adjust the horizontal positioning */
    z-index: 9999; /* Ensures it stays in front of all other elements */
    width: 150px; /* Adjust the size of the logo */
    height: auto; /* Maintain the aspect ratio */
    pointer-events: none; /* Prevents logo from interfering with clickable elements */
    z-index: -1;
}


body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto; /* Ensures the image is not scaled */
    opacity: 0.5; /* Adjust the transparency of the overlay image */
    z-index: -2;
}

.op95 {
    opacity: 0.91;
}

.op90 {
    opacity: 0.9;
}

.op80 {
    opacity: 0.8;
}

.nav-pill:hover {
    opacity: 1;
}

header, footer {
    background-color: transparent; /* Transparent header and footer */
    z-index: 2; /* Make sure it sits above the background overlay */
}

.main-content {
    position: relative;
    z-index: 2; /* Ensures content appears above the overlay */
}

/* Font and other settings */
.text-tiny {
    font-size: 0.75em;
}

.heading, .uc {
    text-transform: uppercase;
}

.swash {
    font-family: 'BerkshireSwash', sans-serif; /* Fallback to sans-serif */
}

.text-lg {
    font-size: 1.4em;
!important
}

/* Sign-in specific */
.form-signin {
    max-width: 330px;
    padding: 1rem;
}

.form-signin .form-floating:focus-within {
    z-index: 2;
}

/* Other styles */
#message {
    z-index: 9999;
    position: absolute;
    width: 30%;
    bottom: 10px;
    right: 10px;
}

#messageTop {
    z-index: 9999;
    position: absolute;
    width: 30%;
    top: 15px;
    right: 10px;
}


.tooltip {
    pointer-events: none;
}


/*  For password policy popups */
.valid-feedback, .invalid-feedback {
    display: none;
}

.is-invalid .invalid-feedback {
    display: block;
}

.is-valid .valid-feedback {
    display: block;
}


/* TODO: All needs condensing and cleaning up as theme relatd */


/* fun CSS for responses pages */
.fun-form-container {
    background-color: #f8f9fa; /* Light background color */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
    padding: 20px; /* Spacing around content */
    margin-bottom: 20px; /* Space below the form */
}

.fun-form-container label {
    font-weight: bold; /* Bold labels for emphasis */
    margin-bottom: 10px; /* Space below labels */
}

.fun-form-container select {
    border: 1px solid #007bff; /* Custom border color */
    border-radius: 5px; /* Rounded corners */
    padding: 8px; /* Inner spacing */
    width: 100%; /* Full width */
}

.fun-table-header {
    background-color: #007bff; /* Primary color */
    color: white; /* White text */
    text-align: center; /* Centered text */
    padding: 10px; /* Spacing */
}

.welcome-message {
    font-size: 1.2rem; /* Larger text size */
    margin-bottom: 15px; /* Space below message */
}


.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* CSS for the modal */
.modal-custom {
    max-width: 111vw; /* 2/3 of the viewport width */
    max-height: 66.67vh; /* 2/3 of the viewport height */
    width: auto; /* Allow for responsiveness */
    height: auto; /* Allow for responsiveness */
}

.modal-body {
    overflow: hidden; /* Prevents overflow */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive canvas */
.image-to-edit {
    max-width: 100%; /* Make sure image is responsive */
    max-height: 100%; /* Make sure image fits inside modal */
}

/* footer */
footer {
    margin-top: 20px; /* Adds margin between the footer and main content */
    background-color: transparent; /* Ensures the footer background is transparent */
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 5px;
}

.facebook {
    background-color: #4267B2; /* Facebook blue */
}

.youtube {
    background-color: #FF0000; /* YouTube red */
}

.fourk {
    background-color: #FFA500; /* 4K orange */
}

.social-icon svg {
    fill: #ffffff; /* Set the color of the SVG icon to white */
    transition: transform 0.2s ease;
}

.social-icon svg:hover {
    transform: scale(1.2); /* Slightly enlarges the icon on hover */
}

footer .container {
    padding-bottom: 20px; /* Adjusts the padding inside the footer */
}

.text-white {
    color: #ffffff; /* Set the text color to white */
}

/* Pulsing text for responses page category */

.pulse-text {
    display: inline-block;
    animation: pulse 1.5s infinite; /* Controls the duration and repetition */
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1); /* Normal size */
    }
    50% {
        transform: scale(1.1); /* Slightly larger size */
    }
}

/* New styles 23/10/2024 */
.main-content-container {
    max-width: 70%;
    margin: auto;
    background-color: #faf9f5;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.hr-fourk-dashed {
    border-top: 2px dashed #d4af37;
    margin: 2rem 0;
}

.text-glow {
    text-shadow : 1px 1px 10px #d4af37, 1px 1px 10px #d4af37;
    color: #fff;
}