* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: #d8eefe;
    font-family: 'Inter', sans-serif;
}

.blue {
    color: #094067;
    margin-bottom: 20px;
}



/******************************************************************************

FONT STYLINGS

*******************************************************************************/

h1 {
    text-transform: uppercase;
}

.login-container h1, .login-container h3 {
    color: #094067;
    text-align: center;
}

.login-container h3 {
    font-weight: 400;
    font-size: 1rem;
}

.generic {
    color: #5f6c7b;
    font-size: 1.1rem;
}

textarea {
    font-family: 'Inter', sans-serif;
}

/******************************************************************************

LOGIN PAGE, REGISTER AND FORGOT PASSWORD

*******************************************************************************/

.login-container {
    width: 60%;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login-container form {
    background-color: #fffffe;
    padding: 60px;
    border-radius: 12px;
    min-width: 500px;
    margin-top: 50px;
}

.login-container [type=text], .login-container [type=password] {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    width: 100%;
    border-radius: 10px;
    padding: 12px 15px;
    margin: 6px 0px 12px 0px;
    font-size: 1rem;
    color: #a4b2c3;
}

label {
    color: #5f6c7b;
    font-size: 1rem;
}

.btn-login {
    width: 100%;
    background-color: #3da9fc;
    border: none;
    font-weight: 700;
    color: #fffffe;
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 1rem;
    display: inline-block;
    margin: 40px 0px 10px 0px;
}

.btn-login:hover {
    background-color: #2d91dd;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.btn-login:active {
    background-color: #2d91dd;
}

.login-container img {
    display: block;
    margin-bottom: 30px;
}

.login-container a:link, .request-content a:link, .edit-profile-content a:link {
    color: #ef4565;
    text-decoration: none;
}

.login-container a:visited, .request-content a:visited, .edit-profile-content a:visited {
    color: #ef4565;
}

.login-container a:hover, .request-content a:hover, .edit-profile-content a:hover {
    color: #ef4565;
    text-decoration: underline;
}

.logo {
    width: 93px;
    height: 112px;
}

input:focus {
    outline: 3px solid #2d91dd;
    color: #094067;
    background-color: #fffffe;
    font-size: 1rem;
}



.login-container ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.login-container form p {
    color: #5f6c7b;
}

.center {
    text-align: center;
}

.flash-messages p  {
    padding: 12px;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


.flash-messages .success {
    background-color: #74e489;
    color: #000;
}

.flash-messages .error {
    background-color: #f94d4d;
    color: #000;
}


/******************************************************************************

DASHBOARD - PROFILE

*******************************************************************************/


.profile-container {
    width: 100%;
    background-color: #094067;
    padding: 30px 0px;
}

.profile-content {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.profile-content h2 {
    color: #fffffe;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 10px 0px 30px 0px;
}

.profile-content ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.user-avatar {
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 50%;
    margin: 0 auto;
}

.user-details {
    margin-top: 30px;
}

.btn-dashboard {
    background-color: #ef4565;
    border-radius: 12px;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 12px 15px;
    display: inline-block;
    color: #fffffe;
}

.btn-dashboard:visited {
    color: #fffffe;
    font-weight: 700;
}

.btn-dashboard:hover {
    background-color: #d42546;
    transition: 0.3s ease-in-out;
}

.btn-dashboard:active {
    color: #fffffe;
}

.profile-content p {
    color: #fffffe;
}

main {
    width: 100%;
}

main h2 {
    color: #094067;
    text-align: center;
}


/******************************************************************************

DASHBOARD - ATTENDANCE

*******************************************************************************/

.attendance {
    width: 90%;
    padding: 50px 0px;
    margin: 0 auto;
    text-align: center;
}

.logged-in {
    color: #094067;
    font-size: 1rem;
    margin: 10px 0px;
}

.btn-blue {
    background-color: #3da9fc;
    font-size: 1rem;
    color: #fffffe;
    border-radius: 12px;
    border: none;
    text-decoration: none;
    padding: 12px 15px;
}

.btn-blue:visited {
    color: #fffffe;
}

.btn-blue:hover {
    background-color: #2290e4;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.btn-blue:active {
    color: #fffffe;
}

.attendance ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.empty {
    padding: 20px;
}


/******************************************************************************

DASHBOARD - ANNOUNCEMENTS

*******************************************************************************/

.announcements {
    width: 90%;
    padding: 0px 0px 50px 0px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.announcements-card {
    border-radius: 12px;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
}

.announcements-card h3 {
    color: #094067;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.announcement-text {
    color: #5f6c7b;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.announcement-text-center {
    color: #094067;
    font-size: 1rem;
    margin-bottom: 15px;
    text-align: center;
}

.posted-by {
    color: #a4b2c3;
    font-size: 0.9rem;
}

.ok {
    border: none;
    background-color: #3da9fc;
    color: #fffffe;
    padding: 8px 10px;
    margin-top: 10px;
    border-radius: 12px;
}

.ok:hover {
    background-color: #2290e4;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

/******************************************************************************

DASHBOARD - HOLIDAYS

*******************************************************************************/

.holidays {
    width: 90%;
    padding: 0px 0px 50px 0px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.holidays-card {
    border-radius: 12px;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
}

.holidays-status {
    color: #ef4565;
    font-size: 0.9rem;
}

.holidays-card h3 {
    color: #094067;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.holidays-text {
    color: #094067;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.btn-status {
    background-color: #3da9fc;
    font-size: 0.8rem;
    color: #fffffe;
    border-radius: 12px;
    border: none;
    text-decoration: none;
    padding: 6px;
    margin-top: 10px;
}

.btn-status:visited {
    color: #fffffe;
}

.btn-status:hover {
    background-color: #2290e4;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

/******************************************************************************

DASHBOARD - ALLOWANCES

*******************************************************************************/

.allowances-container {
    width: 100%;
    padding: 0px 0px 50px 0px;
    
}

.allowances {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    background-color: #094067;
    border-radius: 12px;
    color: #fffffe;
    padding: 30px;
    text-align: center;
    margin-top: 20px;
    gap: 20px;
}


.allowances h2 {
    color: #fffffe;
}

.large {
    font-size: 1.8rem;
}

/******************************************************************************

DASHBOARD - CALENDAR

*******************************************************************************/

.calendar-container {
    width: 90%;
    padding: 0px 0px 50px 0px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
}

.calendar-content {
    width: 100%;
    margin: 0 auto;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    margin-top: 20px;
}

.calendar-content table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;

}

th, td {
    padding-bottom: 10px;
}

th {
    color: #094067;
}

td {
    color: #5f6c7b;
}

.on-holiday {
    background-color: #ef4565;
    color: #fff;
}

/******************************************************************************

DASHBOARD - SICK DAYS

*******************************************************************************/

.sick-days {
    width: 90%;
    padding: 0px 0px 50px 0px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.sick-days-card {
    border-radius: 12px;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
}

/******************************************************************************

DASHBOARD - NOTIFICATIONS

*******************************************************************************/

.notifications {
    width: 90%;
    padding: 0px 0px 50px 0px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.notifications-card {
    border-radius: 12px;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
}

.notifications-card h3 {
    color: #094067;
    font-size: 1.2rem;
    margin-bottom: 5px;
}



/******************************************************************************

REQUEST HOLIDAY

*******************************************************************************/

.request-container {
    width: 100%;
    padding: 20px 0px;
    margin: 0 auto;
    text-align: center;
    margin-top: 50px;
}

.request-content {
    width: 90%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding-top: 20px;
}

.request-field {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    width: 100%;
    border-radius: 10px;
    padding: 12px 15px;
    margin: 6px 0px 12px 0px;
    font-size: 1rem;
    color: #a4b2c3;
}

.request-content label, .edit-profile-content label {
    color: #094067;
}


.text-field {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    width: 100%;
    border-radius: 10px;
    padding: 12px 15px;
    margin: 6px 0px 12px 0px;
    font-size: 1rem;
    color: #a4b2c3;
}

textarea:focus {
    outline: 3px solid #2d91dd;
    color: #094067;
    background-color: #fffffe;
    font-size: 1rem;
}

/******************************************************************************

EDIT PROFILE

*******************************************************************************/

.edit-profile-container {
    width: 100%;
    padding: 50px 0px;
}

.edit-profile-content {
    width: 90%;
    margin: 0 auto;
    padding-top: 20px;
}

.edit-profile-content img {
    width: 50%;
    margin: 0 auto;
    height: auto;
    display: block;
    margin-bottom: 20px;
    border-radius: 12px;
}

.files-container {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}

.files-container > div {
    margin-bottom: 20px;
}


/******************************************************************************

ATTENDANCE

*******************************************************************************/

.attendance-container {
    width: 100%;
    padding: 50px 0px;
}

.attendance-content, .record-content {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 20px;
}

.attendance-content > div, .record-content > div {
    width: 100%;
    border-radius: 12px;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    text-align: center;
}

.attendance-content p, .record-content p {
    color: #5f6c7b;
    font-size: 1.1rem;
}

.attendance-content h3, .record-content h3 {
    color: #094067;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.record-container {
    width: 100%;
    padding: 0px 0px 50px 0px;
}

.btn-wrapper {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
}


/******************************************************************************

EXPENSES

*******************************************************************************/

.expense-container {
    padding: 50px 0px;
}

.expense-content {
    width: 90%;
    margin: 0 auto;
}

.submitted-expenses {
    width: 90%;
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.expense-card {
    width: 100%;
    border-radius: 12px;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    margin-top: 20px;
}

.expense-card a:link {
    display: inline-block;
    margin-top: 20px;
}



/******************************************************************************

ADMIN DASHBOARD

*******************************************************************************/

.admin-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 4fr;
    min-height: 100vh;  
}

.admin-left {
    background-color: #094067;
    position: sticky;
    top: 0;
    z-index: 1;
    align-self: start;            
    overflow-y: auto;             
    height: 100vh;
    -ms-overflow-style: none;  
    scrollbar-width: none;
    padding-bottom: 20px;
}

.admin-left::-webkit-scrollbar {
    display: none;  
}

.admin-left h2 {
    color: #fffffe;
}

.admin-main {
    padding: 40px;
}

.admin-main h2 {
    color: #094067;
    text-align: left;
}

/******************************************************************************

ADMIN DASHBOARD - LEFT MENU

*******************************************************************************/

.welcome-back {
    width: 100%;
    padding: 20px;
    margin: 0 auto;
    text-align: center;
}

.welcome-back img {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
    margin-bottom: 20px;
}

.welcome-back h2 {
    color: #fffffe
}

.actions-menu {
    padding: 50px 30px 0px 30px;
}

.actions-menu i {
    margin-right: 15px;
}

.message-menu {
    padding: 0px 30px;
    text-align: center;
}

.message-menu p {
    color: #d8eefe;
}

.btn-message {
    background-color: #ef4565;
    font-size: 1rem;
    color: #fffffe;
    border-radius: 12px;
    border: none;
    text-decoration: none;
    padding: 12px 15px;
    display: inline-block;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 10px;
}

.btn-message:hover {
    background-color: #d42546;
    transition: 0.3s ease-in-out;
}

.btn-admin {
    background-color: #3da9fc;
    font-size: 1rem;
    color: #fffffe;
    border-radius: 12px;
    border: none;
    text-decoration: none;
    padding: 12px 15px;
    display: inline-block;
    width: 100%;
    font-weight: 700;
    font-size: 1.1rem;
}

.btn-admin:hover {
    background-color: #2d91dd;
    transition: 0.3s ease-in-out;
}

.actions-menu ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.actions-menu h3 {
    color: #fffffe;
}

/******************************************************************************

ADMIN DASHBOARD - ANALYTICS

*******************************************************************************/

.analytics {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.analytics i {
    font-size: 2rem;
    color: #fffffe;
}

.analytics p {
    color: #fffffe;
    margin-top: 5px;
}

.analytics h3 {
    color: #fffffe;
    margin-top: 10px;
    font-size: 2.2rem;
}

.analytics > div {
    background-color: #3da9fc;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
}


/******************************************************************************

ADMIN DASHBOARD - CLOCKED IN

*******************************************************************************/

.clocked-in-container {
    width: 100%;
    border-radius: 12px;
    margin-top: 30px;
}

.clocked-in-content {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.clocked-container {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
}

.clocked-in-content h3 {
    font-size: 1rem;
    color: #094067;
}

.person-avatar {
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.clocked-entry{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid #dae3ea;
    padding: 10px 20px;
    gap: 20px;
}

.clocked-entry:last-of-type {
    border: none;
}

.staff-name {
    color: #ef4565;
    font-weight: 700;
}

.clocked-team {
    color: #5f6c7b;
}

.clocked-since {
    font-size: 0.9rem;
    color: #889aaf;
}

.green-dot {
    background-color: #7deb85;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.red-dot {
    background-color: #d42546;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.not-dot {
    background-color: #f08119;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.clocked-info {
    flex: 1;
}

.clocked-unique {
    
}


/******************************************************************************

ADMIN DASHBOARD - HOLIDAY REQUEST

*******************************************************************************/

.admin-holiday-request-container {
    width: 100%;
    margin-top: 30px;
}

.admin-holiday-request-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 50px;
}

.admin-holiday-request-card {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.request-buttons {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
    gap: 5px;
    margin-left: auto;
}

.btn-approve {
    background-color: #3da9fc;
    border-radius: 12px;
    color: #fffffe;
    border: none;
    padding: 8px 15px;
    font-size: 0.9rem;
    display: inline;
}

.btn-deny {
    background-color: #3da9fc;
    border-radius: 12px;
    color: #fffffe;
    border: none;
    padding: 8px 15px;
    font-size: 0.9rem;
    display: inline;
}

.btn-delete {
    background-color: #3da9fc;
    border-radius: 12px;
    color: #fffffe;
    border: none;
    padding: 8px 15px;
    font-size: 0.9rem;
    display: inline;
}

.btn-approve:hover, .btn-deny:hover, .btn-delete:hover {
    background-color: #2d91dd;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.holiday-status {
    color: #d42546;
}

/******************************************************************************

ADMIN DASHBOARD - ANNOUNCEMENTS

*******************************************************************************/

.admin-announcement-container {
    width: 100%;
    padding: 0px 0px;
}

.admin-announcement-content {
    width: 100%;
    margin: 0 auto;
}

.admin-announcement-container h2 {
    color: #094067;
    margin-bottom: 20px;
}

.admin-announcement-content h3 {
    color: #094067;
    margin-bottom: 20px;
}

.admin-announcement-content label, .expense-content label {
    color: #094067;
}


.admin-announcement-card {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.manage-user-container {
    margin-top: 30px;
}

.allowances-card {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}


/******************************************************************************

ADMIN DASHBOARD - CALENDAR

*******************************************************************************/

.admin-calendar-container {
    width: 100%;
    padding: 0px 0px 0px 0px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
}

.admin-calendar-content {
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    background-color: #fffffe;
    border-radius: 12px;
    margin-top: 20px;
}

.admin-calendar-content table {
    border-collapse: collapse;
    width: 100%;
    text-align: center;
}

.admin-calendar-content th, .admin-calendar-content td, .admin-calendar-content tr {
    border: 1px solid #dae3ea;
}

.admin-calendar-content th {
    padding: 1rem;
    background-color: #c4d8e6;
}

.admin-calendar-content td {
    padding: 1rem;
}

.conflict {
    color: #fffffe;
    background-color: #000;
}


.calendar-wrapper {
    margin-top: 20px;
}

.calendar-link:hover {
    text-decoration: underline;
}

.admin-calendar-conflict {
    margin-top: 30px;
    background-color: #fffffe;
    padding: 30px;
    border: 1px solid #dae3ea;
    border-radius: 12px;
}

.calendar-user.approved {
    background-color: #57d425;
    color: #fffffe;
    margin: 5px 0px;
    padding: 5px 0px;
}

.calendar-user.pending {
    background-color: #d47a25;
    color: #fffffe;
    margin: 5px 0px;
    padding: 5px 0px;
}

.calendar-user.denied {
    background-color: #d42525;
    color: #fffffe;
    margin: 5px 0px;
    padding: 5px 0px;
}

/******************************************************************************

ADMIN DASHBOARD - TEAMS

*******************************************************************************/

.team-container {
    width: 100%;
    border-radius: 12px;
    margin-top: 30px;
}

.teams-content {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.teams-content h3 {
    padding: 20px 20px 10px 20px;
    color: #094067;
}

/******************************************************************************

ADMIN DASHBOARD - VIEW PROFILE

*******************************************************************************/

.view-profile-container {
    width: 100%;
}

.view-profile-img {
    width: 40%;
    height: auto;
    display: block;
    margin: 20px 0px;
    border-radius: 12px;
}

.view-profile-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.view-profile-card {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    padding: 20px;
}

.view-profile-container a:link, .view-profile-container a:visited {
    color: #ef4565;
    text-decoration: none;
}

.view-profile-container a:hover {
    color: #d42546;
    transition: 0.3s ease-in-out;
}

.view-profile-card p {
    color: #5f6c7b;
}

/******************************************************************************

ADMIN DASHBOARD - EDIT PROFILE

*******************************************************************************/

.admin-edit-profile-container {
    width: 100%;
    margin-top: 20px;
}

.admin-edit-profile-container label, .special-days-container label {
    color: #094067;
}

.admin-edit-profile-container input[type=text], .form-control, #dbs_check, #resume, #training_certificate, #employment_contract, #profile_image {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    width: 100%;
    border-radius: 10px;
    padding: 12px 15px;
    margin: 6px 0px 12px 0px;
    font-size: 1rem;
    color: #a4b2c3;
}

.edit-pic {
    width: 50%;
    height: auto;
    display: block;
    margin: 20px 0px;
}

.admin-edit-profile-container input[type=checkbox] {
    margin: 10px 0px 20px 0px;
}

/******************************************************************************

ADMIN DASHBOARD - SPECIAL DAYS

*******************************************************************************/

.special-days-container {
    margin-top: 20px;
}

.special-days-container input[type=text], #date {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    width: 100%;
    border-radius: 10px;
    padding: 12px 15px;
    margin: 6px 0px 12px 0px;
    font-size: 1rem;
    color: #a4b2c3;
}

.special-days-container h3 {
    color: #094067;
    margin: 20px 0px 20px 0px;
}

.special-card-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.special-day-card {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 20px;
}


/******************************************************************************

ADMIN DASHBOARD - MESSAGES

*******************************************************************************/

.new-msg {
    background-color: #ef4565;
    color: #fffffe;
    padding: 6px;
    display: inline-block;
    border-radius: 12px;
    font-size: 0.8rem;
}

.msg-container {
    display: grid;
    grid-template-columns: 1fr 5fr;
    gap: 50px;
    text-align: left;
}

.message-container {
    width: 100%;
    padding: 50px 0px;
}

.message-content {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 20px;
}

.message-content > div {
    width: 100%;
    border-radius: 12px;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    text-align: center;
}

.message-content h3 {
    color: #ef4565;
    font-size: 1.2rem;
}

.message-content h4 {
    margin-bottom: 10px;
    color: #094067;
    font-size: 1.2rem;
}

.msg-left {
    text-align: center;
}

.message-content p {
    margin-bottom: 20px;
}

.message-content p:last-of-type {
    margin-bottom: 10px;
}

.message-content img {
    margin-bottom: 10px;
}

.message-divider {
    border-top: 1px solid #dae3ea;
    padding-top: 10px;
}


.message-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-top: 10px;
}




/******************************************************************************

ADMIN DASHBOARD - EXPENSES

*******************************************************************************/

.admin-expense-container {
    width: 100%;
}

.admin-submitted-expenses {
    width: 100%;
    margin: 0 auto;
    margin-top: 50px;
    display: grid;
}

.admin-expense-card {
    width: 100%;
    border-radius: 12px;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.expense-list {
    list-style-type: none;
    display: flex;
    justify-content: flex-start;
    gap: 20px;
}

.expense-box {
    border-radius: 12px;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    margin-top: 20px;
}

/******************************************************************************

ADMIN DASHBOARD - TODAY'S EXPENSES

*******************************************************************************/

.expense-today-content {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 50px;
}

.expense-h3 {
    color: #094067;
    font-size: 2.2rem;
    margin: 10px 0px;
}

/******************************************************************************

ADMIN DASHBOARD - POLICIES

*******************************************************************************/

.admin-announcement-card h4 {
    color: #094067;
}

/******************************************************************************

ADMIN DASHBOARD - STAFF ATTENDANCE

*******************************************************************************/

.status-indicator status-in {
    background-color: #74e489;
    width: 20px;
}

.today {
    font-size: 1rem;
    color: #094067;
    margin-top: 20px;
    margin-bottom: 30px;
}

.today-two {
    margin-top: 40px;
    margin-bottom: 30px;
}

.today-card {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.today-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.today-container > div {
    border-radius: 12px;
    padding: 30px;
    background-color: #fffffe;
    border: 1px solid #dae3ea;
}

/******************************************************************************

MOBILE - 576PX - ADMIN 

*******************************************************************************/

@media (max-width: 1200px) {

.admin-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
}


.admin-left {
    background-color: #094067;
    position: static;
    z-index: 0;
}

.analytics, .clocked-in-content, .teams-content, .view-profile-content, .msg-container, .expense-today-content {
    grid-template-columns: 1fr;
}

.admin-holiday-request-card {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.admin-announcement-card {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    gap: 20px;
}

.today-card {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    gap: 20px;
}

.allowances-card {
    background-color: #fffffe;
    border: 1px solid #dae3ea;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.request-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    gap: 5px;
}

.login-container {
    width: 90%;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.login-container form {
    background-color: #fffffe;
    padding: 60px;
    border-radius: 12px;
    min-width: 300px;
    max-width: 350px;
    margin-top: 50px;
}

.today-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}



}

/******************************************************************************

MOBILE - 576PX - ADMIN 

*******************************************************************************/