@import "style.css";

h1:not(#title) {
    text-align: center;
}

input,
select {
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #ccc;
border-radius: 4px;
color: var(--text);
background-color: var(--button-background-color);
}

table,
caption {
border: 2px solid var(--table-color) !important;
border-collapse: collapse !important;
padding: 6px;
text-align: center;
margin-left: auto;
margin-right: auto;
width: 100%;
}

button {
background-color: var(--button-background-color);
color: var(--button-color);
padding: 0.6%;
border-radius: 4px;
cursor: pointer;
width: 100%;
}

button:hover {
background-color: var(--button-hover-background-color);
}

input, textarea {
color: var(--text);
}

.hr_options {
    margin: 0;
    padding: 2%;
    display: flex;
    list-style-type: none;
    justify-content: space-between;
}

.hr_options li {
    width: 80%;
    margin-left:2%;
    margin-right:2%;
}

.hr_options li button {
    padding: 4%;
    margin-bottom: 4%;
}

.logout_button {
    display:block;
    width:10%;
}