html {
    background-color: var(--color-bg-primary);
}

body {
    font-family: "Roboto", sans-serif;
    max-width: var(--max-width);
    background-color: var(--color-bg-primary);
    font-family: var(--font-family);
    line-height: var(--line-height);
    padding-left: 25px;
    padding-right: 35px;
}

/*Grid*/

.main-grid-container {
    display: grid;
    grid-template-columns: 75% 25%;
    gap: 1.5rem;
}

#col1 {

}

#col2 {
    background-color: var(--color-bg-secondary);
    padding: 8px;
    border-radius: var(--border-radius);
}

@media (max-width: 768px) {
    .main-grid-container {
        display: grid;
        gap: 1.5rem;
        grid-template-columns: 1fr;
    }
}


#main {
    transition: margin-left .5s;
    padding: 16px 16px 100px 16px;
}

/* Main content */
.main {
    margin-left: 250px; /* Same as the width of the sidenav */
    font-size: 20px; /* Increased text to enable scrolling */
    padding: 0px 10px;
    width: 100%;
}


/*Elements*/

h1, h2 {
    color: var(--color-primary);
    font-family: var(--font-family-secondary);

}

h3, h4, h5, h6 {
    color: var(--color-secondary);
    font-family: var(--font-family-secondary);

}


/*Form Elements*/

fieldset {
    border: 1px solid LightGrey;
    border-radius: 10px 10px 10px 0;
    width: var(--width-card-wide);
}

legend {
    font-size: .8rem;
}

label {
    font-size: .8rem;
    font-weight: bold;
    color: var(--color-text);
    padding: 5px;
    margin-bottom: 7px;
}


input,
select,
color {
    padding: 5px;
    margin: 2px 0px;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    border: 1px solid lightgrey;
    background-color: #fff;
    color: var(--color-text);
    font-size: 1rem;
}

input:focus,
select:focus,
color:focus,
textarea:focus {
    outline: none !important;
    border-color: var(--color-focus-border);
    box-shadow: var(--box-shadow) var(--color-focus-boxshadow);
}

input[type="text"] {
    width: 100%;
    color: var(--color-text);
}

textarea {
    width: 100%;
    height: 60px;
    padding: 8px;
    margin: 8px 0;
    resize: vertical;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    border: 1px solid lightgrey;
    background-color: var(--color-bg-primary);
    color: var(--color-text);
    font-size: 1rem;
}

input[type=search] {
    transition: width 0.4s ease-in-out;
}

input[type=search]:focus {
    width: 100%;
}

input[type=button],
input[type=submit],
input[type=reset]{
    background-color: var(--color-bg-primary);
    border: none;
    color: var(--color-text-reversed);
    padding: 10px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

input[type=image]{
    border: none;
    color: var(--color-text-reversed);
    padding: 5px 5px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
}

button {
    background-color: var(--color-secondary);
    border: none;
    border-radius: var(--border-radius);
    color: var(--color-text-reversed);
    padding: 10px 32px;
    text-decoration: none;
    margin: 4px 2px;
    cursor: pointer;
    font-weight: bold;
}

input[type="radio"].toggle {
    display: none;
}
input[type="radio"].toggle:checked + label {
    /* Style for the selected state */
    /* You can customize this part */
}

.formdiv {
    margin-top: 15px;
    margin-bottom: 18px;
}

.formsetlegend {
    padding-bottom: 2px;
    margin-bottom: 7px;
    font-size: .8rem;
    color: var(--color-text);
    font-weight: bold;
}

/* Grid #col2 styling*/
#col2 button {
    margin-top: 10px;
    margin-bottom: 10px;
}


.col2scrolldiv {
    height: 200px;
    overflow-y: scroll;
    scrollbar-color: var(--color-scrollbar);
}

#col2 .metadiv {
    background-color: var(--color-bg-tertiary);
    padding: 0px 10px;
    margin-bottom: 25px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.col2 {
    padding-left:10px;
}

/*Utility Classes*/
.fullwidth {
    width: 100%;
    background-color: var(--color-bg-secondary);
}




.footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    color: #FFF;
    background-color: Black;
    z-index: 100;
    animation: 5s fadeIn;
    animation-fill-mode: forwards;
}

.center {
    text-align: center;
}

.usr-btn {
    font-size: 40px;
    padding-right: 5px;
    float: right;
    //color: #54519f;
}

.hidden {
    display: none;
}