body { font-family: Arial, sans-serif; margin: 0 auto; padding: 10px;
    color: black;  /* Example of changing text color for better visibility */
}


table { width: 100%; border-collapse: collapse; margin: 5px 0; font-size: 0.90rem;}
table, th, td { border: 1px solid #ddd; }
th, td { padding: 4px; text-align: left; }
th { background-color: #DCDCDC; }

label { display: block; margin: 5px 0 1px; }
input, select { width: 100%; padding: 2px; margin-bottom: 5px; box-sizing: border-box; }

/* class styling */
.btn { display: inline-block; padding: 4px 8px; background: #42AFBA; color: white;
       text-decoration: none; border-radius: 4px; margin-right: 2px;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.btn:hover {background-color: #0056b3; /* Darker Blue */
    color: #ffffff; /* Ensures visibility */ }
.btn-primary {color: #fff; background-color: #007bff; border-color: #007bff; }
.btn-secondary {color: #fff; background-color: #6c757d; border-color: #6c757d; }
.btn-success { color: #fff; background-color: #42AFBA; border-color: #28a745; }
.btn-danger { color: #fff; background-color: #B6160A; border-color: #dc3545; }
.button-group { margin-top: 20px; display: flex; gap: 10px; }
.cancel-button { background-color: #c82333; color: #fff; padding: 4px 8px; color: white; border: none; cursor: pointer;}
.btn-sm {padding: 0.25rem 0.5rem; font-size: 0.75rem; border-radius: 0.2rem;}
.accept-button { background-color: #42AFBA; color: #fff; padding: 4px 8px; color: white; border: none; cursor: pointer;}


.flash-messages { padding: 10px; margin: 10px 0; background: #b9f2ff; border-radius: 4px; }
form { display: flex; flex-direction: column; gap: 2px;}
.form-row {display: flex; margin-bottom: 2px; align-items: center; gap: 2px}
.form-row label { flex: 0 0 80px; margin: 0;}
.form-row input,
.form-row textarea {flex: 1; padding: 4px; margin: 0; }                     /* Adjust as needed */
.form-row button {margin-left: 70px;}                           /* Should match width of label + margin-right */
.small-text {font-size: 0.80rem;}
.header-container {
  text-align: center;
  background-color: #b9f2ff;  /* light blue color */
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header-container h2 {margin: 0; color: #333;}
.nav-container {
display: flex;}
.profile-btn {margin-left: auto;}


textarea {
    width: 100%;
    min-height: 80px;
    height: 120px; /* Adjust height as needed */
    box-sizing: border-box; /* Ensures padding and border are included in width */
    resize: vertical; /* Allows vertical resizing but prevents horizontal resizing */
  }

/* Targeting only the specific input field with id 'is_admin' */
#is_admin {
    width: 10px; /* Set width of this specific input */
    padding: 5px; /* Adjust padding for a smaller size */
}

#is_admin + label {
    font-size: 0.9em; /* Smaller font size for the hint */
    white-space: nowrap; /* Prevent wrapping of the hint text */
    margin-left: 10px; /* Add space between the input field and the hint */
}

/* Navigation Bar */
nav {
    background-color: #333;
    padding: 5px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    margin: 0;
    padding: 0;
}

nav ul li a {
    display: block;
    padding: 10px 20px;
    color: white;
    text-decoration: none;
}

nav ul li a:hover {
    background-color: #555;
}

.editor-container {
    width: 100%;
    margin: 0 auto;
    margin-left: 80px;
}