/**
background-color	: #004b87
hover			: #007BFF
**/

/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    background-color: #eef2f3;
    color: #333;
}

/* Header styles */
header {
    background-color: #004b87;
    color: white;
    padding: 1rem 0;
    text-align: center;
}

header h1 {
    color: #004b87;
}

.header-container {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center align items vertically */
    justify-content: space-between; /* Space between logo/title and profile icon */
    padding: 15px; /* Add padding around the header */
    background-color: #f8f9fa; /* Light background color for the header */
    border-bottom: 1px solid #ccc; /* Light border at the bottom */
}

nav {
	padding-top	: 10px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a, footer a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover, footer a:hover {
    color: #cfe37e;
}

button, .btn {
  padding: 10px 20px;
  background-color: #004b87;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}

button:hover, .btn:hover {
  background-color: #0069d9;
}





/* Main content styles */
main {
	padding		: 2rem;
}

.main-default {
	background-image	: url("/img/contributed/email_banner.jpg");
	background-repeat	: no-repeat;
	background-position	: center;
}

.main-view {
	background-image	: url("/img/contributed/seniors.jpg");
	background-repeat	: no-repeat;
	background-position	: center;
}

section {
    background			: white;
    margin			: 1rem 0;
    padding: 1.5rem;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    clear	: both;
}

/* Footer styles */
footer {
    text-align: center;
    padding: 1rem 0;
    background-color: #004b87;
    color: white;
    position: relative;
    bottom: 0;
    width: 100%;
}

h1, h2 {
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

.data-summary {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center align items vertically */
    margin: 1rem 0; /* Add some margin for spacing */
    padding: 10px; /* Add padding for better spacing */
    background-color: #f9f9f9; /* Light background color */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.data-summary img {
	padding-right: 5px; /* Add padding for better spacing */
}

.datum-details {
    display: flex; /* Flexbox for event details */
    flex-direction: column; /* Stack name and description vertically */
}

.datum-detail {
	
}

.datum-name {
    font-weight: bold; /* Make the event name bold */
}

.datum-name a {
    	text-decoration: none; /* Remove the underscore */
	color: inherit;
}

.datum-description {
    color: #555; /* A lighter color for the description */
    font-size: 0.9rem; /* Slightly smaller font size for description */
}

.data-view {
	width		: 80%;
        background-color: #ffffff;
	border-radius	: 8px;
	box-shadow	: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin		: 0 auto;
	padding		: 10px 20px;
}

.data-view-description {
	width		: 80%;
	font-size	: 1.2rem;
	margin		: 0 auto;
}

.data-view-description p {
	margin-bottom	: 1.2rem;
}

.logo {
    max-height: 50px; /* Limit height of the logo */
    margin-right: 15px; /* Space between logo and title */
}



/* Profile icon styles */
.profile-icon {
    margin-left: auto; /* Pushes the profile icon to the right */
}

.icon {
    max-height: 40px; /* Limit height of the profile icon */
    width: auto; /* Maintain aspect ratio */
}

.summary-section-wide {
	width		: 80%;
    	margin		: 0 auto;
}

.repository {
    list-style-type: none; /* Remove default list styling */
    padding: 0; /* Remove padding */
    display: flex; /* Use flexbox to align items */
    justify-content: center; /* Center items horizontally */
    gap: 10px; /* Space between buttons */
}

.repository li {
    /* Style for each button */
}

.repository a {
    display: inline-block; /* Make the link behave like a button */
    padding: 10px 20px; /* Button padding */
    font-size: 16px; /* Font size */
    color: white; /* Text color */
    background-color: #004b87; /* Button color */
    border-radius: 5px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s, transform 0.2s; /* Transition effects */
}

.repository a:hover {
    background-color: #0056b3; /* Darker shade on hover */
    transform: translateY(-2px); /* Slight lift effect on hover */
}

.datum-custom-fields {
    max-width: 600px; /* Limit the width of the container */
    margin: 20px auto; /* Center the container */
    padding: 20px; /* Add padding */
    border: 1px solid #ccc; /* Add a border */
    border-radius: 8px; /* Rounded corners */
    background-color: #f9f9f9; /* Light background color */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

.data-view-contact-details, 
.data-view-link, 
.data-view-email-address {
    margin-bottom: 15px; /* Space between sections */
}











.slideshow-container {
  width: 100%;
  position: relative;
}

.slideshow-container .caption {
  font-weight: bold;
}

.slideshow-container .slide {
  display: none;
  transition: opacity 1s ease-in-out;
  text-align: center;
}

.slideshow-container .fade {
  opacity: 0;
}

.slideshow-container .slide.active {
  opacity: 1;
}

.slideshow-container .dots {
  text-align: center;
}

.slideshow-container .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.slideshow-container .active {
  background-color: #717171;
}

.slideshow-container .thumbnails {
  text-align: center;
}

.slideshow-container .thumbnails img {
  cursor: pointer;
  height: 100px;
  width: 100px;
  margin: 5px;
}














        #login {
            max-width: 400px; /* Maximum width of the form */
            margin: 50px auto; /* Centering the form */
            padding: 20px; /* Padding inside the form */
            background-color: #ffffff; /* White background for the form */
            border-radius: 8px; /* Rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
        }

        #login .input {
            margin-bottom: 15px; /* Spacing between input fields */
        }

        #login .input label {
            display: block; /* Block layout for labels */
            margin-bottom: 5px; /* Space between label and input */
            color: #333; /* Dark text color */
        }

        input[type="text"],
        input[type="password"] {
            width: 100%; /* Full width of the input */
            padding: 10px; /* Padding inside the inputs */
            border: 1px solid #ccc; /* Light gray border */
            border-radius: 4px; /* Slightly rounded corners */
            font-size: 16px; /* Font size for inputs */
            transition: border 0.3s; /* Smooth transition for border color */
        }

        input[type="text"]:focus,
        input[type="password"]:focus {
            border-color: #004b87; /* Change border color on focus */
            outline: none; /* Remove default outline */
        }

        #login .submit input[type="submit"] {
            width: 100%; /* Full width of the button */
            padding: 10px; /* Padding inside the button */
            background-color: #004b87; /* Primary button color */
            color: white; /* Text color */
            border: none; /* Remove border */
            border-radius: 4px; /* Slightly rounded corners */
            font-size: 16px; /* Font size for button */
            cursor: pointer; /* Pointer cursor on hover */
            transition: background-color 0.3s; /* Smooth transition for background color */
        }

        #login .submit input[type="submit"]:hover {
            background-color: #004b87; /* Darker shade on hover */
        }

        #login .form_tip {
            text-align: center; /* Center align the tip */
            margin-top: 15px; /* Spacing above the link */
            color: white;
        }

        
.session-flash {
	width		: 100%;
	text-align	: center;
}

.notification {
    border-radius: 0.5rem;
    font-size: 1.8rem;
}

.notification ol,
.notification ul {
    margin-top: 1rem;
    margin-bottom: 0;
    font-size: 1.8rem;
    line-height: 1.5;
}

.error-message,
.notification {
    position: relative;
    margin: 0 0 3rem 0;
    border: 0.2rem solid;
    background-position: 1.2rem 1.2rem !important;
    background-repeat: no-repeat !important;
}

.notification.attention {
    background-color: #feefb3;
    background-image: url("/img/icons/exclamation.svg");
    background-size: 2.1rem;
    border-color: #e2b503;
    color: #322801;
}

.notification.information {
    background-color: #bde5f8;
    background-image: url("/img/icons/information.svg");
    background-size: 2.1rem;
    border-color: #1696d3;
    color: #052331;
}

.notification.success {
    background-color: #dff2bf;
    background-image: url("/img/icons/circle-check.svg");
    background-size: 2.1rem;
    border-color: #86be27;
    color: #1e2a09;
}

.error-message,
.notification.error {
    background-color: #ffeded;
    background-image: url("/img/icons/exclamation_circle.svg");
    background-size: 2.1rem;
    border-color: #bc0000;
    color: #6e0000;
}

.notification div {
    padding: 1.2rem 6.5rem 1.2rem 4rem;
}

.notification div ol,
.notification div ul {
    line-height: 1.5;
}

.notification .close {
    color: #990000;
    font-size: 1.4rem;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    text-decoration: none;
    right: 0.5rem;
    top: 0.5rem;
}

.notification .close img {
    display: inline-block;
    vertical-align: middle;
}

.notification .close:hover {
    background: transparent;
    color: #330000;
}

.input .error-message,
.input .notification {
    padding: 0.5rem 0.5rem 0.5rem 3.5rem;
    border: 0;
    font-size: 1.4rem;
}

.input-error {
    display: block;
}

.input .error-message {
    color: #6e0000;
    background: #ffeded url("/img/icons/exclamation_circle.svg") left center no-repeat;
    background-size: 1.6rem;
    background-position: 1.2rem 0.6rem !important;
    margin: 0;
    margin-top: 0.4rem;
    font-style: italic;
}

.message {
    clear: both;
    color: #fff;
    font-weight: bold;
    margin: 0 0 1.5rem 0;
    padding: 0.5rem;
}

.cake-debug,
.cake-error,
.error-message,
.message,
.notice,
p.error {
    background: #ffcc00;
    border: 0.1rem solid rgba(0, 0, 0, 0.2);
    margin-bottom: 3rem;
    padding: 1rem 1.5rem;
    color: #404040;
    border-radius: 0.5rem;
}

.success {
    clear: both;
    color: #fff;
    border: 0.1rem solid rgba(0, 0, 0, 0.5);
    background: #3b8230;
}

p.error {
    padding: 1.5rem;
    margin: 1.5rem 0;
}

p.error em {
    font-weight: normal;
    line-height: 140%;
}

.notice {
    color: #000;
    display: block;
    padding: 1.5rem;
    margin: 1.5rem 0;
}


/* Responsive styles */
@media (min-width: 600px) {
    main {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    section:not(.summary-section-wide) {
        flex: 0 1 calc(50% - 1rem); /* Two sections per row */
        margin: 0.5rem;
    }
}

@media (min-width: 900px) {
    section:not(.summary-section-wide) {
        flex: 0 1 calc(33.333% - 1rem); /* Three sections per row */
    }
}





.data-michif {
    text-decoration: none;
    color: #007BFF;
    position: relative; /* For relative positioning if needed */
}

.data-michif-div {
    display: flex; /* Use flexbox for easy alignment */
    align-items: center; /* Center align items vertically */
}

.data-michif-viewable {
    margin: 0; /* Remove default margin to avoid spacing issues */
    padding-right: 10px; /* Add some spacing between the heading and the icon */
}

.data-michif-icon {
    display: inline-flex; /* Use flexbox for centering */
    justify-content: center; /* Center the icon horizontally */
    align-items: center; /* Center the icon vertically */
    width: 30px; /* Set the width of the circular background */
    height: 30px; /* Set the height of the circular background */
    border-radius: 50%; /* Make it circular */
    background-color: #004b87; /* Background color */
    color: white; /* Icon color */
    font-size: 16px; /* Increase the icon size */
    margin-right: 6px; /* Space after the icon */
    font-weight: bold; /* Make the icon bold */
}

.data-michif-icon img {
    width: 20px; /* Set a width for the icon */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle; /* Align vertically with the text */
}

#michif_display {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px; /* Set a fixed width for the display */
    padding: 20px; /* Add padding */
    background-color: #f1f1f1; /* Background color */
    border: 1px solid #ccc; /* Border styling */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    margin: 20px auto; /* Center the display */
    z-index: 1000; /* Ensure modal is on top */
}

#michif_content {
    display: block; /* Make the span a block element */
    font-size: 24px; /* Increase font size */
    font-weight: bold; /* Make the text bold */
    color: #333; /* Text color */
    text-align: center; /* Center the text */
    margin-bottom: 40px; /* Space for the close button */
}

#michif_display_close {
    position: absolute; /* Position the button absolutely */
    bottom: 10px; /* Position from the bottom */
    right: 10px; /* Position from the right */
    padding: 10px 15px; /* Button padding */
    font-size: 14px; /* Button font size */
    color: white; /* Button text color */
    background-color: #004b87; /* Button background color */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners for button */
    cursor: pointer; /* Change cursor on hover */
    transition: background-color 0.3s; /* Transition for hover effect */
}

#michif_display_close:hover, .data-michif-icon:hover {
    background-color: #007BFF; /* Darker shade on hover */
}