* {
    margin: 0;
}

.nav-item.active .nav-link {
    background-color: #4b75ff !important;
    color: white !important;
    border-radius: 4px;
}

.nav-link:hover:not(.active) {
    background-color: #e9ecef;
    border-radius: 4px;
}

.search-bar {
    transition: width 0.3s ease-in-out;
    width: 100px;
}

.search-bar:focus {
    width: 400px;
}

.content {
    padding-top: 50px;
}

/* Login-Form */
.centered {
    margin: 0 auto;
}
/* Bordered form */
#login_form {
    border: 3px solid #f1f1f1;
    width: 700px;
}

.line-wrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
}

.justify-end {
    justify-content: flex-end;
}

label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100px;
}

/* Width inputs */
#login_form input[type="text"],
#login_form input[type="password"] {
    width: 80%;
    padding: 12px 20px;
    margin: 8px auto;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

/* Set a style for all buttons */
#login-btn {
    background-color: #04aa6d;
    display: flex;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 110px;
    justify-content: center;
}

/* Add a hover effect for buttons */
#login-btn:hover {
    opacity: 0.8;
}

/* Add padding to containers */
.container {
    padding: 16px;
}

/* The "Forgot password" text */
span.psw {
    display: flex;
    align-items: center;
    padding-right: 8px;
}

/* Alerts

.alert {
width: 80%;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}

.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

.alert-warning {
  background-color: #fcf8e3;
  border-color: #faebcc;
  color: #8a6d3b;
}

.alert-warning hr {
  border-top-color: #f7e1b5;
}

.alert-success {
  background-color: #dff0d8;
  border-color: #d6e9c6;
  color: #3c763d;
}

.alert-success hr {
  border-top-color: #c9e2b3;
} */

/* Django-tables2 sort indicators */
.table-container th.asc:after {
    content: '\0000a0\0025b2';
    float: right;
}
.table-container th.desc:after {
    content: '\0000a0\0025bc';
    float: right;
}

.table-container th {
    vertical-align: top !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.table-container th a {
    vertical-align: top !important;
    line-height: 1.2 !important;
}

/* General stuff */

h1 {
    width: 700px;
    padding: 20px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }
}