/* Global styles */
body, html {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-family: Arial, sans-serif; /* Specify a generic font family */
}

/* Set a minimum height for the body */
body {
  min-height: 100%;
}

.card-count {
  border: 1px solid #e0e0e0;
  padding: 5px 5px;
  border-radius: 5px;
  display: inline-block;
  background-color: #f9f9f9;
  margin-bottom: 2px;
  font-size: 14px; /* Adjust font size for smaller screens */
}

.bold-count {
  font-weight: bold;
}

/* Main content styles */
.main-content {
  margin-top: 5px;
  padding: 20px;
  margin-left:15%;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  body, html {
    font-size: 14px; /* Reduce font size for smaller screens */
  }

  .main-content {
    margin-left: 0; /* Remove left margin on smaller screens */
  }

  .main-content h1 {
    font-size: 20px; /* Reduce heading font size for smaller screens */
  }

  .main-content p {
    font-size: 14px; /* Reduce paragraph font size for smaller screens */
    line-height: 1.4; /* Adjust line height for better readability on smaller screens */
  }
}



/* Header styles */
.header {
background-color: #333333;
color: #ffffff;
padding: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
font-size: 14px;
font-weight: bold;
margin: 0;
}

.user-profile {
display: flex;
align-items: center;
font-size: 24px;
margin: 0px
}

.user-profile img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 10px;
}
















/* Style for the user avatar */
.user-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

/* Style for the user name */
.user-name {
  font-size: 16x;
  font-weight: bold;
  color: #333;
}

/* Style for the user role */
.user-role {
  font-size: 12px;
  color: #E5D8D5;
  text-transform: uppercase;
}




/* DASHBOARD */
/* Add your custom styles here */
.dashboard-card {
  background: #e0dede;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 5px;
  transition: all 0.3s ease-in-out;
}

.dashboard-card:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  transform: scale(1.05);
}

.icon-container {
  flex: 0.3;  /* Decreased from 1 */
}

.info-container {
  flex: 1.7;  /* Increased from 1 */
  margin-left: 10px;  /* You can adjust this value as per your requirement */
}

.icon {
  font-size: 1rem;
  color: #000000;
}

.info-container h4,
.info-container p {
  margin: 0;
  padding: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  padding: 5px;
}



/* LEAVE BALANCE */
.leave-balance-container {
  display: inline-block;
  vertical-align: top;
  margin-right: 20px; /* Adjust as needed for spacing */
}

.leave-balance-container h5 {
  margin-bottom: 5px;
}

.leave-balance-container table {
  width: 200px; /* Adjust the width as needed */
  border-collapse: collapse;
}

.leave-balance-container th, .leave-balance-container td {
  padding: 5px;
  text-align: left;
  border: 1px solid #ccc;
}

.leave-balance-container th {
  background-color: #f0f0f0;
}




/* styles.css */
.update-button {
  background-color: #3498db;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.delete-button {
  background-color: #e74c3c;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}




.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.button-container button {
  margin: 10px 0;
}



  /* CSS Styles for the Modal */
  .custom-modal {
    max-width: 1000px; /* Adjust the width as needed */
    font-size: 12px; /* Set all text to 12 font */
  }
  
  /* CSS Styles for Labels */
  label {
    font-weight: bold;
    margin-right: 5px; /* Reduce space between label and input tags */
    font-size: 12px; /* Set label text to 12 font */
  }
  
  /* CSS Styles for Input Tags */
  input {
    font-size: 12px; /* Set input text to 12 font */
    margin: 0; /* Remove any default margin */
  }

  /* text in input tags */
  input[type="text"] {
    color: black;
    font-size: 12px; 
  }

  
  /* CSS Styles for Attribute Values */
  .attribute {
    color: black;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px; /* Set attribute text to 12 font */
  }
  

  /* CSS Styles for the Horizontal Rule with Text */
  .hr-text {
      display: flex;
      color:red;
      font-weight: bold;
      align-items: center;
      text-align: center;
      text-transform: uppercase;
  }
  .hr-text::before,
  .hr-text::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid #000;
  }
  .hr-text::before {
      margin-right: 10px;
  }
  .hr-text::after {
      margin-left: 10px;
  }