/* CSS used for Admin pages. */

/* Used on the main content container for the Admin page(s). */
/* I really want to get rid of this. */
.content-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    overflow-x: auto; /* Allow horizontal scrolling on smaller screens */
}

/****** ADMIN/HOME ******/

.dashboard-container {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
}

.side-panel-container * {
    margin-top: 0px;
    margin-bottom: 8px;
}

.side-panel-container li {
    list-style: none;
    padding: 4px;
    border-radius: 8px;
    font-size: 14px;
}

.side-panel-container li:hover {
    background-color: lightgrey;
}

.main-panel-container * {
    margin-top: 0px;
    margin-bottom: 8px;
}

.main-panel-container > div {
    margin-bottom: 16px;
}

.main-panel-container h2 {
    font-size: 20px;
    font-weight: bold;
    padding: 8px 0px;
    border-top: 3px solid grey;
    border-bottom: 1px solid lightgrey;
    margin-bottom: 16px;
}

.dynamic-output-box {
    border: 1px solid;
    border-radius: 6px;
    border-color: grey;
    background-color: lightgrey;
    padding: 8px;
}

.dynamic-output-box * {
    margin: 0px;
    font-size: 16px;
}


/****** ADMIN/LOGIN ******/

.login-container {
    margin: 20px auto;
    padding: 8px;
    border-radius: 8px;
    background-color: #C8E3F1;

    border-radius: 8px;
    border: 1px solid;
}

.login-header {
    /* background-color: blue; */
}

.login-form {
    padding: 8px;
}

.login-form > div {
    padding: 4px 0px; 
}

button#login {
    font-family: "DM Sans";
    color: #395767
}

.button-download {
    text-align: center;
    text-decoration: none;
    color: black;
    width: 100%;
    background-color: #EEEEEE;
    border-radius: 6px;
    outline: solid;
    outline-color: black;
    outline-width: 2px;
    padding: 8px 16px;
    font-size: 16px;
}

h1.login-header {
    font-family: "Zilla Slab";
    color: #395767;
}

p {
    font-family: "DM Sans";
    color: #395767;
}