/* Import the Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* Base font settings */
html {
    font-size: 13px; /* Increased base font size */
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 13px; /* Increased base font size for larger screens */
    }
}

body {
    margin-bottom: 50px;
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
}

/* Custom text color */
.custom-text-color {
    color: red;
}

/* Font settings for various elements */
body,
.navbar-nav .nav-link,
.dropdown-menu .dropdown-item,
h1, h2, h3, h4, h5, h6,
table,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select,
option,
button {
    font-family: 'Roboto', sans-serif;
    font-weight: 500; /* Medium weight for better readability */
    font-size: 13px; /* Slightly increased font size for better readability */
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600; /* Bold for headings */
}

label {
    font-weight: 500; /* Medium weight for labels */
}


/* Table styles */
table, th, td {
    font-family: 'Roboto', sans-serif;
    font-weight: 500; /* Medium weight for table data */
    font-size: 12px; /* Slightly increased font size for better readability */
    vertical-align: middle;
    padding: 1px; /* Reduced padding for table cells */
    border: 1px solid #dee2e6;
}


th {
    background-color: #e9ecef;
    font-weight: 600;
}


/* Action area styles */
.action-area {
    border: 1px solid #dee2e6;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    background-color: #ffffff;
    margin-top: 1rem; /* Reduced space above action area */
}

/* Action link styles */
.action-link {
    display: block;
    width: 100%;
    padding: 0.25rem; /* Reduced padding for buttons */
    margin: 5px 0;
    border-radius: 3px;
    border: none; /* Remove border */
    background-color: #B3D9E8; /* Lighter teal color */
    color: #1B4965; /* Dark teal text color */
    font-weight: bold; /* Bold text */
    font-size: 0.90rem; /* Adjusted font size */
    text-align: center;
    text-decoration: none;
    font-family: 'Lato', sans-serif; /* Apply Lato font */
    margin-bottom: 0.25rem; /* Reduced space below buttons */
}

    .action-link:hover {
        background-color: #2b617a; /* Slightly darker teal color on hover */
        color: #fff; /* Ensure text color remains white on hover */
    }

/* Navbar and dropdown styles */
.navbar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding-top: 5px;
    padding-bottom: 5px;
}

.navbar-nav .nav-link {
    color: #000;
    padding: 5px 5px;
    margin: 0 5px;
    transition: background-color 0.3s, color 0.3s;
}

    .navbar-nav .nav-link:hover {
        background-color: #dee2e6;
        color: #000;
        border-radius: 5px;
    }

.dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .dropdown-menu .dropdown-item {
        color: #000;
        padding: 2px 10px;
        margin: 2px 0;
        transition: background-color 0.3s, color 0.3s;
    }

        .dropdown-menu .dropdown-item:hover {
            background-color: #f1f1f1;
            color: #000;
        }

/* Desktop view styles */
@media all and (min-width: 992px) {
    .dropdown-menu li {
        position: relative;
    }

    .nav-item .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: -7px;
    }

    .nav-item .submenu-left {
        right: 100%;
        left: auto;
    }

    .dropdown-menu > li:hover {
        background-color: #f1f1f1;
    }

        .dropdown-menu > li:hover > .submenu {
            display: block;
        }
}

/* Small devices styles */
@media (max-width: 991px) {
    .dropdown-menu .dropdown-menu {
        margin-left: 0.7rem;
        margin-right: 0.7rem;
        margin-bottom: .5rem;
    }
}

/* Add margin to all buttons for consistent spacing */
button, input[type="submit"], .btn {
    margin-top: 5px;
    padding: 5px 10px;
    font-size: 13px; /* Increased font size */
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

/* Primary button styles */
.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

    .btn-primary:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: #fff;
    }

/* Secondary button styles */
.btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

    .btn-secondary:hover {
        background-color: #5a6268;
        border-color: #5a6268;
        color: #fff;
    }

/* Custom CSS class to set minimum width for buttons */
.min-width-button {
    min-width: 75%;
}

div > a {
    display: inline-block;
    margin-top: 5px;
}

/* Heading styles */
h3.create-heading {
    color: #6c757d;
}

.footer {
    padding: 0.5rem 0;
    font-size: 0.875rem;
    line-height: 1.5;
    border-top: none;
    margin-top: 1rem;
}

/* Additional styles for better layout and appearance */
.card {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
    background-color: #4f6274;
    color: white;
    font-size: 1.125rem;
    font-weight: bold;
    padding: 10px 10px;
}

.card-body {
    padding: 10px;
}

.form-floating {
    margin-bottom: 1rem;
}

.form-control {
    border: 1px solid #dee2e6;
    border-radius: 5px;
    padding: 5px;
    font-size: 14px; /* Slightly increased font size for better readability */
    margin-bottom: 0.5rem; /* Reduced space below form controls */
}

    .form-control:focus {
        border-color: #dee2e6;
        box-shadow: 0 0 0 0.2rem rgba(222, 226, 230, 0.25);
    }

/* Custom background color */
.slate-blue {
    background-color: #4f6274;
    color: white;
}

/* Custom heading styles */
.heading-caption {
    font-size: 1.5rem; /* Adjusted font size */
    font-weight: bold; /* Bold text */
    color: #1B4965; /* Dark teal color */
    text-transform: uppercase; /* Uppercase text */
    letter-spacing: 1px; /* Spacing between letters */
    display: inline-block; /* Display inline */
    margin-right: 1rem; /* Space between headings */
}

.sub-heading {
    font-size: 1.2rem; /* Adjusted font size */
    color: #6c757d; /* Light grey color */
    display: inline-block; /* Display inline */
}

/* Table styles */
.table {
    margin-top: 1rem;
}

.thead-dark th {
    background-color: #343a40;
    color: #fff;
}

.table-responsive {
    overflow-x: auto;
}

/* Custom heading class */
.custom-heading {
    font-size: 1.5rem; /* Adjust the size as needed */
    font-weight: bold;
    color: #333; /* Adjust the color as needed */
    margin-bottom: 1rem; /* Add some space below the heading */
}

.form-control, .custom-select {
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
}

    .form-control:focus, .custom-select:focus {
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

.form-group {
    margin-bottom: 1rem;
}

fieldset {
    border: 1px solid #ced4da;
    padding: 1rem;
    border-radius: 0.25rem;
    margin-bottom: 1.5rem;
}

legend {
    width: auto;
    padding: 0 5px;
    font-size: 1.25rem;
    font-weight: 600;
}

.card-header h3 {
    margin-bottom: 0;
}

.card-body {
    padding: 1rem;
}
.beautiful-text {
    color: #0056b3; /* Example color, you can choose any color you like */
    font-weight: bold;
}

.sticky-form {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; /* Adjust as needed */
    z-index: 1000; /* Ensure it stays on top */
    background-color: white; /* Ensure background color is consistent */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}