body {
    background-color: #f8faf9;
}

.frame {
    border: 1px solid #F8FAF9; /* Solid black border */
    padding: 20px; /* More padding inside the frame */
    /*margin: 55px;*/ /*Margin*/
    margin-bottom: 10px; /* Space below each frame */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Horizontal offset, vertical offset, blur radius, spread radius and color */
    transition: 0.3s; /* Smooth transition for hover effect */
}

    .frame:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Larger shadow for hover effect */
        background-color: #e9ecef; /* Light grey background on hover */
        cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
    }

.framelogin {
    border: 1px solid #1878BB; /* Navbar Blue Color */
    padding: 20px; /* More padding inside the frame */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Horizontal offset, vertical offset, blur radius, spread radius and color */
}



/* Navbar background Color */
.navbar {
    background-color: #1878BB;
}

    /* Color of navbar text */
    .navbar .navbar-nav .nav-link {
        color: #ffffff; /* Sets the text color to white */
    }

        /* hover color of navbar text */
        .navbar .navbar-nav .nav-link:hover {
            color: #cccccc;
        }

    /* Colour of the text of navbar brand */
    .navbar .navbar-brand {
        color: #ffffff;
    }

        /* hover colour of the navbar brand */
        .navbar .navbar-brand:hover {
            color: #cccccc;
        }

label {
    font-weight: bold;
    color: #718288;
}

.form-group label {
    font-weight: bold;
}



/* Assuming you have already included Font Awesome or similar icon library */
.sidebar {
    background-color: #718288; /* Adjust the color to match your design */
    color: white;
    padding-top: 20px; /* Add some space at the top */
    position: sticky; /* Make it stick to the top when you scroll */
    top: 0px; /* Adjust this value to the height of your fixed-top navbar */
    height: calc(100vh - 40px); /* Subtract the height of the navbar */
    overflow-y: auto; /* Add scroll to the sidebar if content is taller than the screen */
}

.sidebar-item {
    padding: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #475a72; /* Slightly lighter than the background for the separator */
    text-align: center; /* Center align the text and icon */
}

.sidebar-link {
    display: block; /* Block display to put it on its own line */
    align-items: center;
    text-decoration: none;
    color: #adb5bd; /* Grayish text color */
    transition: color 0.3s ease; /* Smooth transition for hover effect */
    font-size: 15px; /* Adjust the icon size */
    margin: 0 auto 10px; /* Center the icon and add space below */
}

    .sidebar-link:hover,
    .sidebar-link:focus {
        color: white; /* Text color on hover/focus */
    }

.sidebar-icon {
    font-size: 24px; /* Adjust the icon size */
    width: 30px;
}

.sidebar-text {
    display: block; /* Block display to ensure it goes below the icon */
    font-weight: 500;
    letter-spacing: 0.5px; /* Optional: Adjust letter spacing for better readability */
}

/* Additional styles for active state, if needed */
.sidebar-link.active {
    background-color: #2c3e50; /* Darker background for active link */
    color: white; /* White text for active link */
}

.carousel-item img {
    max-width: 500px !important;
    max-height: 500px !important;
    height: auto !important;
}


/* For Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* For Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinners {
    -moz-appearance: textfield;
}

.readonly {
    background-color: #e9ecef; /* Gray background */
    color: #495057; /* Slightly darker text color for better readability */
    cursor: not-allowed; /* Shows a 'no entry' cursor on hover */
}

#footer1, #footer2 {
    background: #545454; /* Set the same background for both footer1 and footer2 */
}

.footerlinks {
    color: #ffffff; /* Set default color for footer links */
    text-decoration: none !important; /* Important to override any other styles */
}

    .footerlinks:hover {
        color: #1878BB; /* Change color on hover */
    }