#changeuuid input[type="submit"],
#changeuuid input[type="text"] {
    /* display: none; */
    visibility: hidden;
    opacity: 0.1;
    transition: visibility 0.3s, opacity 0.3s linear;
}

#changeuuid:hover input[type="submit"],
#changeuuid:hover input[type="text"] {
    /* display: block; */
    /* transition: 0.5s; */
    visibility: visible;
    opacity: 1;
}

/* uuid button area */
.changeuuid p {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.changeuuid input[type="text"] {
    /* padding: 5px; */
    width: 100%;
}

.changeuuid input[type="submit"] {
    display: inline-block;
    padding: 5px;
    margin: 5px;
    /* width: 50%; */
}

.changeuuid label {
    color: white;
}


/* terminal output */
.terminal-body {
    background-color: black;
}

.terminal {
    background-color: rgb(31, 30, 30);
    color: lightgreen;
    /* color: #0f0; */
    padding: var(--spacing);
    margin: var(--spacing);
    border-radius: 5px;
    border: 1px solid green;

}

#terminal-raw {
    border: 1px solid green;
    background-color: black;
    font-family: "Courier New", monospace;
    color: lightgreen;
    /* color: #0f0; */
    display: flex;
    flex-direction: column-reverse;
    height: 40rem;
    max-height: 40rem;
    overflow: auto;
}

.progress-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing);
    width: 98%;
    margin: 0 auto;
}

.progress-container form {
    display: flex;
}

.progress-container button {
    flex: 1;
}

/* outer progress bar span */
#total {
    /*
    display: inline-block;
    overflow: hidden;
    width: 400px;
    height: 30px;
    border: 1px solid #333333;
    border-radius: var(--round-corner);
    margin: var(--spacing);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 4px;
    */
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 1.8rem;
    border: 0.06rem solid #333333;
    border-radius: var(--round-corner);
    overflow: hidden;
    box-shadow: var(--window-shadow);
}

/* inner progress bar span */
#generate {
    display: flex;
    height: 100%;
    background: linear-gradient(90deg, var(--blue4-color) 0%,
            var(--blue1-color) 100%);
    border-radius: var(--round-corner);
    color: white;
    align-items: center;
    font-weight: bold;
    justify-content: right;
    padding-right: 4px;
    transition: width 0.3s linear;
}

/* error related */
#error-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
} 

/* error p */
#error-text {
    padding: var(--spacing) var(--spacing) 0 var(--spacing);
    margin: var(--spacing) var(--spacing) 0 var(--spacing);
}

#error-text p {
    color: red;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.table-container {
    margin: var(--spacing);
    max-width: 100%;
    max-height: 37.5rem;
    overflow-x: auto;
    overflow-y: auto;
}

/* general table, used for html rendering of csvs */
table {
    font-family: Arial, Helvetica, sans-serif;
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    margin: 0;
}

td,
th {
    border: 1px solid #ddd;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    color: white;
}

/* body  */
body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-pack);
    background-color: var(--white3-color);
}

/* headers */
h1,
h3 {
    text-align: center;
    text-shadow: var(--font-shadow);
    color: var(--white1-color);
    margin: var(--spacing);
    padding: var(--spacing);
}

h2,
h4,
p {
    color: var(--black1-color);
    margin: var(--spacing);
    padding: var(--spacing);
}

header {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: radial-gradient(var(--black2-color), var(--black1-color));
    box-shadow: var(--window-shadow);
}

/* #logout {
    ;
} */

#logout a {
    color: white;
    /* background-color: var(--blue4-color); */
}

/* footer */
footer {
    text-align: center;
    background-image: radial-gradient(var(--black2-color), var(--black1-color));
}

/* class specific items */
.app {
    min-height: 100vh;
    background-color: var(--white3-color);
    display: flex;
    flex-direction: column;
    font-family: var(--font-pack);
}

.grid-container, .data-safety-div, .readability-div, .compliance-div {
    display: grid;
    /* padding: var(--spacing); */
    flex: 1;
    align-content: start;
    height: fit-content;
}

.navbar {
    margin: var(--spacing);
    padding: var(--spacing);
    background-color: transparent;
}

.navbar ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
    background-color: transparent;
}

.navbar ul li {
    margin: var(--spacing);
    text-align: center;
    text-decoration: none;
    border-radius: var(--round-corner);
}

.navbar ul li a {
    padding: var(--spacing);
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: var(--white1-color);
}

.first-section {
    margin: var(--spacing);
    padding: var(--spacing);
    border-radius: var(--round-corner);
    box-shadow: var(--window-shadow);
    background-color: var(--white1-color);
    min-width: 0;
}

.search-form {
    display: flex;
    flex-direction: column;
}

/* upload section */
.upload-form {
    width: fit-content;
    display: flex;
    flex-direction: column;
}

.upload-form p {
    margin: var(--spacing);
}

input[type=file] {
    margin: var(--spacing);
}

/* .blue-upload {
    color: white;
    background-color: blue;
    width: fit-content;
} */

/* .blue-upload:hover {
    background-image: linear-gradient(to bottom right, var(--blue4-color), var(--blue2-color));
} */

/* the login button, by id */
#loginButton {
    color: white;
    background-color: blue;
}

/* general button */
button,
input[type=submit] {
    margin: var(--spacing);
    padding: 0.65rem;
    color: var(--white1-color);
    border: none;
    cursor: pointer;
    font-weight: bold;
    border-radius: var(--round-corner);
}

.newuuidbutton {
    color: white;
    background-image: linear-gradient(to bottom right, var(--blue3-color), var(--blue1-color));
}

.newuuidbutton:hover {
    background-image: linear-gradient(to bottom right, var(--blue4-color), var(--blue2-color));
}

/* form class */
.form-group {
    display: flex;
    flex-direction: column;
    margin: var(--spacing);
    padding: var(--spacing);
}

.form-group textarea,
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="password"],
.form-group,
select {
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
    padding: var(--spacing);
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: var(--spacing);
    margin-bottom: var(--spacing);
}

/* checkbox by class */
.checkbox-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    /* prevents breaking text */
}

.second-section {
    margin: var(--spacing);
    padding: var(--spacing);
    border-radius: var(--round-corner);
    box-shadow: var(--window-shadow);
    background-color: var(--white1-color);
    min-width: 0;
}

.analyze-bar {
    display: flex;
    gap: var(--spacing);
    width: 100%;
}

.analyze-bar form {
    flex: 1;
}
.analyze-bar input[type='submit'] {
    /* flex: 1; */
    min-height: 4rem;
    font-size: 1rem;
    /* width: 100%; */
}

.toolbar {
    display: flex;
    justify-content: center;
    gap: var(--spacing);
    margin: var(--spacing);
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: white;
    width: 25rem;
    margin: 15% auto;
    padding: 1.25rem;
    border-radius: var(--round-corner);
    box-shadow: var(--window-shadow);
}

.close {
    float: right;
    font-size: 1.5rem;
    cursor: pointer;
}

@media(max-width: 1023px) {
    header {
        justify-content: center;
        flex-direction: column;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }

}

@media(min-width: 1024px) {
    .grid-container {
        grid-template-columns: 1fr 3fr 1fr;
    }

    .first-section {
        grid-column: 2;
    }

    .second-section {
        grid-column: 2;
    }
}

.blue-interact, .logout-button, .blue-interact-noactions {
    background-image: linear-gradient(to bottom right, var(--blue3-color), var(--blue1-color));
}

.blue-interact-disabled {
    background-image: linear-gradient(to bottom right, var(--blue4-color), var(--blue3-color));
    color: grey !important;
}

.blue-interact:hover, .logout-button:hover, .blue-interact-noactions:hover {
    background-image: linear-gradient(to bottom right, var(--blue4-color), var(--blue2-color));
}

.green-interact, .uuid-button, .green-interact-noactions {
    background-image: linear-gradient(to bottom right, var(--green3-color), var(--green1-color));
}

.green-interact:hover, .uuid-button:hover, .green-interact-noactions:hover {
    background-image: linear-gradient(to bottom right, var(--green4-color), var(--green2-color));
}

.green-interact-disabled {
    background-image: linear-gradient(to bottom right, var(--green3-color), var(--green1-color));
    color: grey !important;
}

.red-interact, .home-button, .red-interact-noactions {
    background-image: linear-gradient(to bottom right, var(--red3-color), var(--red1-color));
}

.red-interact:hover, .home-button:hover, .red-interact-noactions:hover {
    background-image: linear-gradient(to bottom right, var(--red4-color), var(--red2-color));
}

.red-interact-disabled {
    background-image: linear-gradient(to bottom right, var(--red4-color), var(--red2-color));
    color: grey !important;
}

.black-interact, .black-interact-noactions {
    background-image: linear-gradient(to bottom right, var(--black3-color), var(--black4-color));
}

.black-interact:hover, .black-interact-noactions:hover {
    background-image: linear-gradient(to bottom right, var(--black1-color), var(--black2-color));
}

.interact-disabled {
    background: rgb(0, 0, 0);
    color: grey !important;
}

.extra-space {
    padding: var(--spacing);
}


/* vars */
:root {
    --white1-color: rgb(255, 255, 255);
    --white2-color: rgb(245, 245, 245);
    --white3-color: rgb(235, 235, 235);
    --black1-color: rgb(0, 0, 0);
    --black2-color: rgb(50, 50, 50);
    --black3-color: rgb(30, 30, 30);
    --black4-color: rgb(60, 60, 60);
    --blue1-color: rgb(0, 0, 255);
    --blue2-color: rgb(0, 0, 205);
    --blue3-color: rgb(0, 0, 150);
    --blue4-color: rgb(0, 0, 100);
    --green1-color: rgb(50, 120, 50);
    --green2-color: rgb(40, 100, 40);
    --green3-color: rgb(30, 80, 30);
    --green4-color: rgb(20, 70, 25);
    --red1-color: rgb(200, 0, 0);
    --red2-color: rgb(180, 0, 0);
    --red3-color: rgb(160, 0, 0);
    --red4-color: rgb(130, 0, 0);
    --font-pack: Arial, Helvetica, sans-serif;
    --font-shadow: 0.15rem 0.15rem 0.15rem rgb(0, 0, 0);
    --window-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.25);
    --spacing: 0.5rem;
    --round-corner: 0.625rem;
    --edge: 0.1rem solid rgb(50, 50, 50);
}