@charset "UTF-8";

:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 177, 82, 44;
    --bs-secondary-rgb: 0,0,0;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-rgb: 33, 37, 41;
    --bs-font-sans-serif: "Calibri", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-bg: #fff;
}





html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.RedBorder{
    border:5px solid red;
}
.BlueBorder {
    border: 5px solid blue;
}

.MenuItem {
    
    border: 2px solid lightgrey;
}

.MenuItem:hover {
    border: 2px solid black;
}

.MainColour {
    color: rgb(177, 82, 44);
}

.checkboxRole:checked
{
    color:red;
    background-color:red;
}

.backGroundPrimary {
    background-color: rgba(177, 82, 44, 0.5);
}


/* Sidebar Styling */
.sidebar {
    height: 70vh;
    position: relative;
    width: 250px;
    background-color: #f8f9fa;
    padding-top: 20px;
}

    .sidebar a {
        padding: 10px;
        text-decoration: none;
        display: block;
        color: rgba(var(--bs-primary-rgb)) !important;
        transition: 0.3s;
    }

        .sidebar a:hover, .sidebar a.active {
            background-color: rgba(var(--bs-primary-rgb));
            color: white !important;
            border-radius: 5px;
        }

/* Responsive Sidebar */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
    }

    .content {
        margin-left: 0;
    }

    .responsive-textarea {
        height: 8rem;
    }
}

    /* Container to hold the image */
    .content-container {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 70vh; /* Default height, adjusts for desktop */
        /* margin-top: 20px;
    border: 2px solid #ccc; /* Optional border for visual effect */
    }

    /* Applying the Ken Burns effect to the image */
    .moving-background {
        width: 100%;
        height: 100%;
        background-image: url('https://d1yv4ntisp48q0.cloudfront.net/wp-content/uploads/2023/01/Amber-River-HDA-Cheltenham-office-525040863-Large.jpeg');
        background-size: cover;
        background-position: center;
        animation: kenburns 30s infinite alternate ease-in-out;
    }

    /* Keyframe animation for the Ken Burns effect */
    @keyframes kenburns {
        0% {
            transform: scale(1);
        }

        100% {
            transform: scale(1.2);
        }
    }

    /* Mobile-friendly adjustments using media queries */
    @media (max-width: 768px) {
        .content-container {
            height: 40vh; /* Smaller height for mobile */
        }

        #mobileMenu {
            position: relative;
            z-index: 10;
        }

        .moving-background {
            position: relative;
            z-index: 1;
        }
    }

    /* For smaller mobile screens */
    @media (max-width: 480px) {
        .content-container {
            height: 30vh; /* Even smaller height for very small screens */
        }
    }

    .overlay-text {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -30%);
        text-align: center;
        color: white;
        font-family: "Calibri", sans-serif;
        z-index: 10;
    }

    @media (min-width: 768px) {
        .extra-large-margin-top {
            margin-top: 8rem; /* or 7rem etc. */
        }
    }