body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
}
h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #303030;
    font-weight: 600;
    margin-bottom: 30px;
}
h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
}
.jumbotron {
    background: url('https://www.spoonomics.co.uk/uploads/1/0/6/5/10653372/spoonomic-dynamic-qr-code-metrics-dashboard_orig.jpg') no-repeat center center;
    background-size: cover;
    color: #000;
    padding: 100px 25px;
    font-family: Montserrat, sans-serif;
    position: relative; /* Relative positioning for inner content */
}
.transparent-panel {
    background-color: rgba(255, 255, 255, 0.7); /* White background with 50% transparency */
    border-radius: 15px; /* Rounded corners */
    padding: 20px; /* Padding inside the panel */
    display: inline-block; /* Shrink to content size */
    text-align: center; /* Center align the text */
    max-width: 80%; /* Optional: limit the max width of the panel */
    margin: 0 auto; /* Center the panel within the jumbotron */
}

/* Style for the table container */
.table-container {
    width: 70%; /* Set the width to 70% of the parent container */
    margin: 0 auto; /* Center the container horizontally */
    border-radius: 20px; /* Apply rounded corners */
    overflow: hidden; /* Ensure content stays within the container */
}

.table td, .table th {
    text-align: left;
}

/* Responsive design for mobile devices */
@media (max-width: 767px) {
    .table-container {
        width: 100%; /* Full width on mobile devices */
    }
}
/* Style for the "dashboard_main" table container */
.table-container-dash-main {
    width: 49%; /* Set the width to 70% of the parent container */
    margin-left: 0 auto; /* Align to the left of the page */
    border-radius: 0px; /* Apply rounded corners */
    overflow: hidden; /* Ensure content stays within the container */
    border: 1px solid #ccc;
}
/* Responsive design for mobile devices */
@media (max-width: 767px) {
    .table-container-dash-main {
        width: 100%; /* Full width on mobile devices */
    }
}
   /* Media query to hide specific columns on screens smaller than 768px */
   @media (max-width: 768px) {
    .hide-on-mobile {
        display: none; /* Hide columns on smaller screens */
    }

    /* Make the table full width */
    table {
        width: 100%;
    }
}

.container-fluid {
    padding: 30px 50px;
}
.bg-grey {
    background-color: #f6f6f6;
}
.logo-small {
    color: #f4511e;
    font-size: 50px;
}
.logo {
    color: #f4511e;
    font-size: 200px;
}
.thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}
.thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}
.carousel-control.right, .carousel-control.left {
    background-image: none;
    color: #f4511e;
}
.carousel-indicators li {
    border-color: #f4511e;
}
.carousel-indicators li.active {
    background-color: #f4511e;
}
.item h4 {
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
}
.item span {
    font-style: normal;
}
.panel {
    border: 1px solid #f4511e; 
    border-radius:0 !important;
    transition: box-shadow 0.5s;
}
.panel:hover {
    box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
.panel-footer .btn:hover {
    border: 1px solid #f4511e;
    background-color: #fff !important;
    color: #f4511e;
}
.panel-heading {
    color: #fff !important;
    background-color: #f4511e !important;
    padding: 25px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.panel-footer {
    background-color: white !important;
}
.panel-footer h3 {
    font-size: 32px;
}
.panel-footer h4 {
    color: #aaa;
    font-size: 14px;
}
.panel-footer .btn {
    margin: 15px 0;
    background-color: #f4511e;
    color: #fff;
}
.navbar {
    margin-bottom: 0;
    background-color: #f4511e;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
    color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
    color: #f4511e !important;
    background-color: #fff !important;
}
.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}
footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f4511e;
}
.slideanim {visibility:hidden;}
.slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
@media screen and (max-width: 768px) {
    .col-sm-4 {
        text-align: center;
        margin: 25px 0;
    }
    .btn-lg {
        width: 100%;
        margin-bottom: 35px;
    }
}
@media screen and (max-width: 480px) {
    .logo {
        font-size: 150px;
    }
}
.subscribe-form {
    width: 50%;
    margin: 0 auto; /* Center the form horizontally */
}
.activation-form {
    width: 40%;
    margin: 0 auto; /* Center the form horizontally */
    position: relative; /* Ensure the eye icon is positioned correctly */
}
.activation-form .input-group {
    margin-bottom: 15px; /* Add space between the fields */
}
/* Media query for mobile devices */
@media (max-width: 768px) {
    .activation-form {
        width: 90%; /* Set form width to 90% on mobile devices */
    }
}
.input-group-addon {
    background-color: #f4511e; /* Match the button colour */
    color: #fff; /* Text colour in the addon */
}
.toggle-password {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #f4511e;
}
.whitespace-container {
    margin-top: 30px; /* Adjust the top margin as needed */
    margin-bottom: 30px; /* Adjust the bottom margin as needed */
}
.baumans-regular {
font-family: "Baumans", system-ui;
font-weight: 400;
font-style: normal;
}
/* Apply the Baumans font to .navbar-brand */
.navbar-brand {
font-family: 'Baumans', sans-serif;
font-size: 24px;
color: #333;
}
/* Default styles for the button row (horizontal layout) */
.button-row {
    display: flex;
    flex-direction: row; /* Align buttons horizontally by default */
    justify-content: center; /* Centre the buttons horizontally */
    gap: 10px; /* Space between buttons */
    flex-wrap: nowrap; /* Prevent wrapping */
    margin: 20px 0; /* Add margin for spacing */
}
/* Style for individual buttons */
.button-row .btn {
    font-family: 'Baumans', system-ui; /* Use Baumans font */
    background-color: #1E90FF; /* Trending blue colour */
    color: #fff; /* White text */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    padding: 10px 20px; /* Padding inside buttons */
    text-transform: uppercase; /* Uppercase text */
    font-size: 14px; /* Font size */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effect */
    }
    .button-row .btn:hover {
    background-color: #4682B4; /* Darker blue on hover */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
    }
/* Responsive design adjustments for mobile screens */
    @media (max-width: 768px) {
    .button-row {
        flex-direction: column; /* Stack buttons vertically on narrow screens */
        align-items: center; /* Centre the buttons horizontally in column layout */
        gap: 10px; /* Maintain space between buttons */
    }

    .button-row .btn {
        width: 100%; /* Make buttons take full width of their container */
        max-width: 300px; /* Limit maximum width for better appearance */
    }
    }
/* Ensure modal is centered and backdrop covers the entire page */
.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(50% - 1.75rem); /* Adjust to ensure it's centered vertically */
}

.modal-backdrop.show {
    opacity: 0.5; /* Darken the background */
}

.modal-content {
    border-radius: 10px; /* Optional: Rounded corners for the modal */
}

.modal-dialog {
    margin: 15% auto; /* 25% from the top, auto for left/right */
    max-width: 500px; /* Adjust max width as needed */
    width: auto; /* Allow auto width */
}

.modal-dialog-butch-cassidy {
    margin: 15% auto; /* 25% from the top, auto for left/right */
    top: -30%;
    max-width: 500px; /* Adjust max width as needed */
    width: auto; /* Allow auto width */
}

/* Style for tooltip */
/* Tooltip container */
.tooltip-text {
    visibility: hidden;
    background-color: #f44336;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 9999; /* Ensures it appears above other elements */
    bottom: 125%; /* Positions the tooltip above the input */
    left: 50%;
    transform: translateX(-50%);
    width: 350x;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    transition: opacity 0.3s ease;
    opacity: 0; /* Hidden initially */
}

.tooltip-text::after {
    content: '';
    position: absolute;
    top: 100%; /* Arrow below the tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #f44336 transparent transparent transparent;
}

i {
    cursor: pointer;
    margin-left: 10px;
}

/* Show tooltip on hover */
#password-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1; /* Fade in tooltip */
}

.btn-edit {
    background-color: lightblue; /* Light blue background */
    border: none; /* Remove default border */
    border-radius: 15px; /* Rounded corners */
    padding: 5px 10px; /* Padding for better appearance */
    cursor: pointer; /* Pointer cursor on hover */
}

.btn-edit:hover {
    background-color: deepskyblue; /* Darker blue on hover */
}

.btn-light-blue {
    background-color: #003366; /* Dark blue background */
    color: #ffffff; /* White text */
    border-radius: 8px; /* Rounded corners */
    border: 1px solid #002244; /* Slightly darker blue border */
    padding: 5px 10px; /* Padding for button size */
    cursor: pointer;
}

.btn-light-blue:hover {
    background-color: #002244; /* Darker blue on hover */
    color: #ffffff; /* Ensures text stays white */
}

.btn-light-blue:active,
.btn-light-blue:focus {
    background-color: #001122; /* Even darker blue when clicked or focused */
    color: #ffffff; /* Keeps text white */
    outline: none; /* Removes default outline */
}
    .btn-custom {
        background-color: #003366; /* Dark blue background */
        color: white !important; /* White text */
        border-radius: 8px; /* Rounded corners */
        border: 1px solid #002244; /* Slightly darker blue border */
        padding: 5px 10px; /* Padding for button size */
        cursor: pointer;
    }

    .btn-custom:hover {
        background-color: #002244; /* Darker blue on hover */
    }

    .btn-custom-danger {
        background-color: #dc3545; /* Red background for Wipe button */
        color: #ffffff; /* White text */
        border-radius: 8px; /* Same rounded corners as Edit */
        border: 1px solid #a71d2a; /* Darker red border */
        padding: 5px 10px; /* Padding for button size */
        cursor: pointer;
    }

    .btn-custom-danger:hover {
        background-color: #a71d2a; /* Darker red on hover */
    }

    .btn-custom-disabled {
        background-color: #6c757d; /* Grey background for disabled button */
        color: #ffffff; /* White text */
        border-radius: 8px; /* Same rounded corners */
        border: 1px solid #5a6268; /* Slightly darker grey border */
        padding: 5px 10px;
        cursor: not-allowed;
    }

    /* Style for when no forwarding link is set */
    .btn-secondary {
        background-color: transparent; /* Transparent background */
        color: #6c757d; /* Light grey text */
        border-radius: 8px; /* Rounded corners */
        border: 1px solid #d3d3d3; /* Faint grey border */
        padding: 5px 10px; /* Padding to define button size */
        cursor: pointer;
    }

    .btn-secondary:hover {
        background-color: #f8f9fa; /* Slight grey background on hover */
        border-color: #b3b3b3; /* Slightly darker grey border on hover */
    }

    .social-sharing-container {
        margin-top: 20px;
    }

    .social-icons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px; /* Space between icons */
    }

    .social-icon {
        font-size: 100px; /* Icon size */
        color: #333; /* Default icon color */
        text-decoration: none;
        transition: color 0.3s;
    }

    .social-icon:hover {
        color: #007bff; /* Change color on hover (optional) */
    }

    @media (max-width: 576px) {
        .social-icons {
            flex-direction: column;
            align-items: center;
        }
    }

    /* Smaller Toggle switch CSS */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;  /* Adjusted width */
    height: 20px; /* Adjusted height */
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;  /* Adjusted size for the toggle handle */
    width: 16px;   /* Adjusted size for the toggle handle */
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
  }
  
  input:checked + .slider {
    background-color: #2196F3;
  }
  
  input:checked + .slider:before {
    transform: translateX(20px); /* Adjusted for the smaller width */
  }
  
  .slider.round {
    border-radius: 20px;  /* Rounded for the smaller size */
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  
  /* Style for the invisible table */
  .email-preferences-table {
    width: 100%; /* Make the table responsive */
    margin-top: 20px;
    border-collapse: collapse; /* Invisible table by collapsing the borders */
  }
  
  /* Style for the table cells */
  .email-preferences-table td {
    padding: 10px 20px; /* Space between the label and the toggle */
    text-align: left;
    font-size: 16px; /* Adjust text size */
  }
  
  /* Responsive adjustments for mobile */
  @media (max-width: 768px) {
    .email-preferences-table td {
      padding: 8px 10px; /* Smaller padding on mobile */
    }
  }
  /* Navbar logo size */
.navbar-brand img {
    height: 50px;
    width: 137px;
}

/* Header below navbar with dark background */
.dark-header {
    background-color: #2b2b2b;
    color: #fff;
    text-align: center;
    padding: 20px 0 20px 0; /* Increased top padding to create more dark space above the text */

}

.dark-header h1 {
    font-size: 24px;
    font-weight: 500;
    margin: 0;
}

.dark-header p {
    margin: 5px 0 0;
    font-size: 14px;
    opacity: 0.8;
}

/* Optional: Adjust container margin for the admin panel */
.container {
    margin-top: 0px; /* Adjust depending on your navbar height */
}

    /* Styling for the button-row container */
    .button-row {
        display: flex;
        justify-content: center; /* Center elements horizontally */
        margin-bottom: 20px;
    }

    /* Styling for the hyperlinks */
    .btn-link {
        display: inline-block;
        margin: 0 10px; /* Add spacing between links */
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 5px;
    }

    .btn-link:hover {
        background-color: #0056b3;
    }

   
    .custom-navbar {
        box-shadow: 0 4px 2px -2px gray; /* Adds shadow for a clean, professional look */
        margin-bottom: 0;
        background-color: #f4511e; /* Main background color */
        z-index: 9999;
        border: 0;
        font-size: 14px !important;
        line-height: 1.42857143 !important;
        letter-spacing: 4px;
        border-radius: 0;
        font-family: Baumans, sans-serif;
    }
    
    /* Logo styling */
    .custom-navbar .navbar-brand img {
        max-height: 40px; /* Ensures the logo doesn’t get too large */
    }
    
    /* Default link colour */
    .custom-navbar .nav-link {
        color: #000 !important; /* Set default text color to black */
        padding: 10px;
        border: none; /* Remove any border */
        box-shadow: none; /* Remove any box-shadow */
        text-shadow: none; /* Remove any text-shadow */ 
        text-decoration: none; /* Remove underline from links */
    }
    
    /* Hover effect for links */
    .custom-navbar .nav-link:hover {
        color: #333 !important; /* Set hover color to dark grey */
    }
    
    /* Dropdown menu styling */
    .custom-navbar .dropdown-menu {
        background-color: #f4511e; /* Dropdown menu matches navbar background */
        color: #000 !important; /* Set default text color to black */
    }
    
    /* Right align search form elements */
    .custom-navbar .form-control {
        margin-right: 10px; /* Adds space between search and buttons */
    }
    th {
        cursor: pointer; /* Change cursor to pointer for clickable headers */
        background-color: #f8f9fa; /* Light grey background */
        transition: background-color 0.3s; /* Smooth transition for hover effect */
    }

    th:hover {
        background-color: #e2e6ea; /* Darker grey on hover */
    }
    
    #downloadButton {
        display: block; /* Ensure it behaves as a block element */
        margin: 20px auto; /* Center it horizontally */
        text-align: center; /* Align text to the centre (optional) */
        /* Optional styles for better visibility */
        padding: 10px 20px; /* Add some padding */
        font-size: 16px; /* Adjust font size as needed */
    }
    /* White "back to top" link area above footer */
.footer-top-link {
    background-color: #f9f9f9; /* Light/white background */
    padding: 10px 0;
}

.footer-top-link a {
    color: #333; /* Dark color for contrast */
    font-size: 18px;
    text-decoration: none;
}

.footer-top-link a:hover {
    color: #555;
}

/* Dark footer styling */
.footer-container {
    background-color: #333; /* Dark background */
    color: #fff;
    padding: 20px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Full-width copyright notice */
.footer-top {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #555; /* Optional divider line */
}

/* Two-column layout within footer-bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    padding: 20px;
}

/* Full-width copyright notice with smaller text */
.footer-end {
    width: 80%;
    padding: 10px 0;
    text-align: center;
    border-bottom: 1px solid #555; /* Optional divider line */
    font-size: 1.3rem; /* Smaller font size (14px, adjust as needed) */
    color: #bbb; /* Slightly lighter color for a subtler look */
}

.footer-col {
    flex: 1;
    padding: 10px;
    text-align: center;
}

/* Styling for footer links */
.footer-links {
    list-style-type: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: #fff;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Prevent footer styling from affecting other parts of the page */
html, body {
    height: auto; /* Reset from affecting page layout */
    margin: 0;
}

.footer-container {
    min-height: 100px;
    margin-top: auto;
}
textarea {
    resize: none; /* Disable resizing */
    width: 100%; /* Make it full-width */
    height: 6rem; /* Fixed height */
    font-size: 1.5rem; /* Adjust text size */
    padding: 5px;
}
.message {
    font-size: 1.5rem;
    color: green;
}
.error {
    font-size: 1.5rem;
    color: red;
}
textarea {
    padding: 0; /* Remove padding to check for visual alignment */
    margin: 0;  /* Ensure no external spacing */
}
@media (min-width: 768px) and (max-width: 1024px) {
    /* Ensures the collapse works on tablets */
    .navbar-collapse {
        display: block; /* Ensure the menu is visible on tablets in this range */
    }

    /* Hide the toggle button (hamburger) when the navbar is expanded */
    .navbar-header .navbar-toggle {
        display: none; /* Hide the toggle button on larger screens (tablets in landscape) */
    }
}


#password-requirements {
    text-align: left; /* Ensure text is aligned left */
}

#password-requirements div {
    margin-bottom: 5px; /* Add space between the requirements */
    color: red; /* Default color for invalid items */
}

#password-requirements .valid {
    color: green; /* Color for valid requirements */
}

#password-requirements .invalid {
    color: red; /* Color for invalid requirements */
}

#password-requirements span {
    margin-left: 10px; /* Space between requirement text and tick */
}
.url-table a {
    text-decoration: none;
    color: #007bff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 250px;
    vertical-align: middle;
}
.url-table a:hover {
    text-decoration: underline;
}
.table.table-striped a {
    text-decoration: none;
    color: #007bff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 250px; /* Limit the visible width of the link */
    vertical-align: middle;
}

.table.table-striped a:hover {
    text-decoration: underline;
}
.table-responsive {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
#staffPhoto {
    max-width: 100%; /* Prevents the image from exceeding the modal's width */
    height: auto; /* Maintains the aspect ratio */
    display: block; /* Ensures the image doesn't add unnecessary inline space */
    margin: 0 auto; /* Centers the image horizontally */
}
.menu-container {
    margin: 10px 0;
}

.menu-toggle {
    display: none; /* Hide the button by default */
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
}

.menu-toggle:focus {
    outline: none;
}

.menu-content {
    display: none; /* Hide the menu content by default */
    flex-direction: column; /* Ensure buttons stack vertically */
    gap: 10px; /* Add spacing between buttons */
}

.menu-content .btn {
    margin: 5px 0;
}

/* Media query for mobile devices */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Show the toggle button on mobile */
    }

    .menu-content {
        display: none; /* Hide the menu by default on mobile */
    }
}



/* Add spacing for the second table */
.second-table {
    margin-top: 20px; /* Creates a gap between the two tables */
}
/* Wrapper for table and image */
.table-and-image-container {
    display: flex; /* Align the table and image side by side */
    justify-content: space-between; /* Distribute space between table and image */
    align-items: flex-start; /* Align items at the top */
    margin-bottom: 20px; /* Space below the container */
}

/* Style for the table container */
.table-container-dash-main {
    flex: 1; /* Take up remaining space */
    margin-right: 20px; /* Space between table and image */
}

/* Style for the image container */
.image-container {
    flex: 1; /* Ensure the image container takes remaining space */
    max-width: 40%; /* Limit image container width */
}

/* Make the image responsive */
.responsive-image {
    width: 100%; /* Ensure image fills container */
    height: auto; /* Maintain aspect ratio */
    display: block;
}

/* Mobile responsiveness: stack table and image */
@media screen and (max-width: 768px) {
    .table-and-image-container {
        flex-direction: column; /* Stack table and image vertically */
        align-items: center; /* Center the items */
    }

    .table-container-dash-main {
        width: 100%; /* Table takes full width on smaller screens */
        margin-right: 0; /* Remove margin */
    }

    .image-container {
        width: 100%; /* Image takes full width */
        margin-top: 20px; /* Add space between table and image */
    }
}