/* Add your custom CSS styles here */
body {
    font-family: Arial, sans-serif;
  }
  
  .container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .header {
    background-color: #f2f2f2;
    padding: 10px;
    margin-bottom: 20px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .btn {
    padding: 10px 20px;
    background-color: #4caf50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
  }
  
  .btn:hover {
    background-color: #45a049;
  }
  
  .error {
    color: red;
  }
  
.container h2 {
    color: black;
}
.login_container h2{
    color: white;
}
  ul {
    float: right;
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  ul li {
    display: inline-block;
  }
  
  ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
  }

  .search_bar, .add_cert{

display: inline-block;
  }
  .add_cert{
    float: right;
  }
#certificates-table{
  margin-top: 40px;
}

/* Default table styles */
.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 8px;
  border: 1px solid #ccc;
}

/* Responsive styles */
@media (max-width: 767px) {
  /* Hide table headers on smaller screens */
  .table thead {
    display: none;
  }

  /* Display table rows as blocks for vertical stacking */
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  /* Style individual table cells */
  .table td {
    text-align: right;
    border: none;
    position: relative;
    padding-left: 50%;
  }

  .table td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 8px;
    font-weight: bold;
  }

  /* Add spacing between table cells */
  .table td:not(:last-child) {
    margin-bottom: 10px;
  }
}
.actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.actions div a,.actions div form {
  display: block;

  width: 50% !important;
  margin-bottom: 5px;
}
.actions div form button {
  border: solid thick red;
}

.search_bar button {
  margin-left: 10px;
}
table{
  margin-bottom: 15px;
}
.alert-danger{
  color: red;
}
.alert-success{
  color: #4caf50;
}
.alert{
  margin-top: 10px;
}
.login_button_div{
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Horizontally center the items */
  align-items: center; /* Vertically center the items */

  gap: 20px; /* Adjust the desired gap value */
}

/* Welcome Area */

.welcome_container{
  background-color: rgb(40, 53, 56);
  border-radius: 10px;
}
.welcome_container h1, h2, h3{
 text-align: center;
 color: #f2f2f2;
}
.welcome_footer{
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Horizontally center the items */
  align-items: center; /* Vertically center the items */

  gap: 20px; /* Adjust the desired gap value */
  font-size: 14px;
  text-align: center;
}
.welcome_footer span{
  display: inline-block;
}

/* Login Area */
.login_container {
  display: grid;
  place-items: center;
  background-color: rgb(40, 53, 56);
  border-radius: 10px;
}


.login_container label{
  color: #f2f2f2;
}
.container h2 {
  margin-bottom: 20px;
}

.form-group {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}
.button-form-group,.btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Horizontally center the items */
  align-items: center; /* Vertically center the items */
  gap: 20px; 
  margin-top: 10px;
}
.error {
  color: red;
  max-width: inherit;
  margin-bottom: 20px;
}