/*
    Main styling for website.
 */


/*
    vh is a newer unit of measurement representing the viewport.
    This makes sure the flex layout displays correctly.
*/
html, body {
    height: 100vh;
}

body {
    background-color: ghostwhite;
    color: black;
    font-family: Verdana, sans-serif;
    font-size: 18px;
    padding: 24px;

    display: flex;
    flex-direction: column;
}

/*
    This makes the main content area of the page size to the available length of the screen as well as keeps the footer at the bottom.
 */
.content {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
}

.header-div {
    text-align: center;
}

.header-div p {
    text-align: left;
}

/*
    Used before footer was added in Variables assignment.
 */
.footer-info {
    position: absolute;
    bottom: 0;
    left: 0;
}

/*
    Used for the php config page so that contents correctly display at bottom.
 */
.footer-info-php-config {
    bottom: 0;
    left: 0;
}

.title {
    background-image: radial-gradient(ellipse, rgba(99, 149, 238, 1) 50%, rgba(99, 149, 238, 0.5) 50%);
}
footer {
    margin-top: 20px;
}

footer p {
    display: inline;
}

footer a {
    display: inline;
}

a {
    text-decoration: none;
}

a:visited, a:link {
    color: black;
    text-decoration: none;
}

a:active, a:hover {
    color: black;
    text-decoration-line: underline;
}

/*
    For Orgchart and employees
 */
.orgchart {
    text-align: center;
}

.orgchart img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

div.content div.employeeInfo {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

div.content div.employeeInfo ul {
    margin: 0;
    padding: 0;
    list-style: none none inside;
    overflow: hidden;
}

div.content div.employeeInfo div.leftInfo {
    text-align: right;
    flex-basis: fit-content;
}

div.content div.employeeInfo div.rightInfo {
    text-align: left;
}

/*
    Styling for the menubar shown on every page.
 */

/*
    Styling for all menu items and the menu itself.
    This makes it so the spacing and look of a list are removed.
 */

.menubar ul {
    margin: 0;
    padding: 0;
    list-style: none inside none;
    overflow: hidden;
    text-align: center;
}

/*
    Makes the list items flow horizontally next to each other.
 */
.menubar li {
    display: inline-block;
    float: none;
}

/*
    For styling forms
 */

div.formMain {
    text-align: center;
}

div.content h3 {
    text-align: center;
}

div.form {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-evenly;
}

div.form div.formImg {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
}
div.content div.surveyResults {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

div.content div.surveyResults div.surveyInfo {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
}

div.content div.surveyResults div.surveyInfo ul {
    margin: 0;
    padding: 0;
    list-style: none none inside;
    overflow: hidden;
}

div.content div.surveyResults div.surveyInfo div.leftInfo {
    text-align: right;
    flex-basis: fit-content;
}

div.content div.surveyResults div.surveyInfo div.rightInfo {
    text-align: left;
}

/*
    style index page items
 */
div.content div.items {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 5px;
}

div.content div.items div.item {
    width: 25%;
    flex-shrink: 0;
}

div.content div.items div.item form {
    width: 100px;
}

/*
    style tables
 */

table, th, td {
    border: 1px solid;
    border-collapse: collapse;
    text-align: center;
    padding: 5px;
}

/*
    styling the pricing
 */

div.content div.pricing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

div.content div.pricing table {
    width: 50%;
    flex-basis: auto;
    flex-grow: 0;
}

/*
    styling login
 */

div.content div.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*
    style feedback
 */

div.content div.feedbackSubmitted {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*
    comment styling
 */

div.content div.comments {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;

}

div.content div.comments th:first-child, div.content div.comments td:first-child {
    border-left: none;
}