body {
    background: linear-gradient(to bottom, #000000,#2C2C2C, #B0B0B0); /* Black to anthracite (dark gray) to light gray */
    background-attachment: fixed; /* Ensures the gradient stays fixed */
    margin: 0;
    padding: 0;
}

p {
    color: white; /* Change all paragraphs to green */
}

.custom-panel {
    background-color: #ff5722; /* Custom color */
    color: white; /* Text color */
}

.breadcrumb {
    background-color: transparent; /* Optional: Remove breadcrumb background */
    color: white; /* Set default breadcrumb text color to white */
}

.breadcrumb .breadcrumb-item a {
    color: white; /* Make breadcrumb links white */
    text-decoration: none; /* Optional: Remove underline */
}

.breadcrumb .breadcrumb-item a:hover {
    color: #ddd; /* Optional: Slightly lighter white on hover */
}

.breadcrumb .breadcrumb-item.active {
    color: white; /* Set active breadcrumb text color to white */
    font-weight: bold; /* Optional: Make it bold */
}

/* Style the logo container to center its contents */
.logo-container {
    display: flex;               /* Use Flexbox for centering */
    justify-content: center;     /* Horizontally center the content */
    align-items: center;         /* Vertically center the content (optional) */
    width: 100%;                 /* Ensure the container spans full width */
    text-align: center;          /* Fallback for inline elements */
    margin: 0 auto;              /* Ensure the container itself is centered */
}

/* Ensure the logo is responsive and properly aligned */
.logo {
    max-width: 100%;             /* Prevent the logo from exceeding the container width */
    height: auto;                /* Maintain aspect ratio */
    max-height: 200px;           /* Optional: Restrict the maximum height */
    display: block;              /* Convert inline image to a block element */
    margin: 0 auto;              /* Center the image horizontally */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .logo {
        max-height: 150px;       /* Reduce logo size for tablets */
    }
}

@media (max-width: 576px) {
    .logo {
        max-height: 100px;       /* Further reduce logo size for phones */
    }
}

/* Center the content on the page */
.site-login {
    display: flex;                /* Use Flexbox */
    flex-direction: column;       /* Arrange items vertically */
    align-items: center;          /* Center items horizontally */
    justify-content: center;      /* Center items vertically */
 /*   min-height: 100vh;            /* Make the container full screen height */
    color: white;                 /* Set font color to white */
    text-align: center;           /* Center-align text */
   /* background-color: #333;       /* Optional: Add a dark background for contrast */
}

/* Style links */
.site-login a {
    color: yellow;                /* Change link color to yellow */
    text-decoration: none;        /* Remove underline */
}

.site-login a:hover {
    color: #ffd700;               /* Slightly darker yellow on hover */
    text-decoration: underline;   /* Optional: Add underline on hover */
}

/* Form alignment */
.site-login .form-group, .site-login .form-control {
    width: 100%;                  /* Stretch form elements */
 /*   max-width: 400px;             /* Optional: Set a max width */
    margin: auto;                 /* Center the form */
}

/* Center buttons */
.site-login .form-group button {
    margin-top: 10px;
    margin-bottom: 10px;
}

.custom-control.custom-checkbox label {
    color: white; /* Set text color to white */
}

/* Center the content on the page */
.site-error {
    display: flex;                /* Use Flexbox */
    flex-direction: column;       /* Arrange items vertically */
    align-items: center;          /* Center items horizontally */
    justify-content: center;      /* Center items vertically */
    /*   min-height: 100vh;            /* Make the container full screen height */
    color: white;                 /* Set font color to white */
    text-align: center;           /* Center-align text */
    /* background-color: #333;       /* Optional: Add a dark background for contrast */
}

/* Style links */
.site-error a {
    color: yellow;                /* Change link color to yellow */
    text-decoration: none;        /* Remove underline */
}

.site-error a:hover {
    color: #ffd700;               /* Slightly darker yellow on hover */
    text-decoration: underline;   /* Optional: Add underline on hover */
}

/* Form alignment */
.site-error .form-group, .site-login .form-control {
    width: 100%;                  /* Stretch form elements */
    /*   max-width: 400px;             /* Optional: Set a max width */
    margin: auto;                 /* Center the form */
}

/* Center buttons */
.site-error .form-group button {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Center the content on the page */
.site-reset-password {
    display: flex;                /* Use Flexbox */
    flex-direction: column;       /* Arrange items vertically */
    align-items: center;          /* Center items horizontally */
    justify-content: center;      /* Center items vertically */
    /*   min-height: 100vh;            /* Make the container full screen height */
    color: white;                 /* Set font color to white */
    text-align: center;           /* Center-align text */
    /* background-color: #333;       /* Optional: Add a dark background for contrast */
}

/* Style links */
.site-reset-password a {
    color: yellow;                /* Change link color to yellow */
    text-decoration: none;        /* Remove underline */
}

.site-reset-password a:hover {
    color: #ffd700;               /* Slightly darker yellow on hover */
    text-decoration: underline;   /* Optional: Add underline on hover */
}

/* Form alignment */
.site-reset-password .form-group, .site-login .form-control {
    width: 100%;                  /* Stretch form elements */
    /*   max-width: 400px;             /* Optional: Set a max width */
    margin: auto;                 /* Center the form */
}

/* Center buttons */
.site-reset-password .form-group button {
    margin-top: 10px;
    margin-bottom: 10px;
}


/* Center the content on the page */
.site-resend-verification-email {
    display: flex;                /* Use Flexbox */
    flex-direction: column;       /* Arrange items vertically */
    align-items: center;          /* Center items horizontally */
    justify-content: center;      /* Center items vertically */
    /*   min-height: 100vh;            /* Make the container full screen height */
    color: white;                 /* Set font color to white */
    text-align: center;           /* Center-align text */
    /* background-color: #333;       /* Optional: Add a dark background for contrast */
}

/* Style links */
.site-resend-verification-email a {
    color: yellow;                /* Change link color to yellow */
    text-decoration: none;        /* Remove underline */
}

.site-resend-verification-email a:hover {
    color: #ffd700;               /* Slightly darker yellow on hover */
    text-decoration: underline;   /* Optional: Add underline on hover */
}

/* Form alignment */
.site-resend-verification-email .form-group, .site-login .form-control {
    width: 100%;                  /* Stretch form elements */
    max-width: 400px;             /* Optional: Set a max width */
    margin: auto;                 /* Center the form */
}

/* Center buttons */
.site-resend-verification-email .form-group button {
    margin-top: 10px;
    margin-bottom: 10px;
}


/* Center the content on the page */
.site-request-password-reset {
    display: flex;                /* Use Flexbox */
    flex-direction: column;       /* Arrange items vertically */
    align-items: center;          /* Center items horizontally */
    justify-content: center;      /* Center items vertically */
    /*   min-height: 100vh;            /* Make the container full screen height */
    color: white;                 /* Set font color to white */
    text-align: center;           /* Center-align text */
    /* background-color: #333;       /* Optional: Add a dark background for contrast */
}

/* Style links */
.site-request-password-reset a {
    color: yellow;                /* Change link color to yellow */
    text-decoration: none;        /* Remove underline */
}

.site-request-password-reset a:hover {
    color: #ffd700;               /* Slightly darker yellow on hover */
    text-decoration: underline;   /* Optional: Add underline on hover */
}

/* Form alignment */
.site-request-password-reset .form-group, .site-login .form-control {
    width: 100%;                  /* Stretch form elements */
    /*   max-width: 400px;             /* Optional: Set a max width */
    margin: auto;                 /* Center the form */
}

/* Center buttons */
.site-request-password-reset .form-group button {
    margin-top: 10px;
    margin-bottom: 10px;
}

.container .role-index h1 {
    color: white; /* Apply only to h1 inside .role-index within .container */
}

.container .role-index .summary {
    color: white; /* Apply only to h1 inside .role-index within .container */
}

.container .user-index h1 {
    color: white; /* Apply only to h1 inside .role-index within .container */
}

.container .user-index .summary {
    color: white; /* Apply only to h1 inside .role-index within .container */
}

.container .assignment-index h1 {
    color: white; /* Apply only to h1 inside .role-index within .container */
}

.container .assignment-index .summary {
    color: white; /* Apply only to h1 inside .role-index within .container */
}

.email-input {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.min-width-row {
    min-width: 400px;
}