body {
    margin: auto;
    padding: 50px;
    color: #000;
    font-family: 'Lato', sans-serif;
}

/* Box (for corners & padding) */
.box {
    padding-left: 20px;
    /* border-radius: 10px; */
    background-color: #ddd;
}


/* Set up grids... specifics */

/*  #### Grid for Main page #### */


.wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
        "banner"
        "nav"
        "main"
        "footer";
        grid-gap: 4px;
    }

    .banner {
        grid-area: banner;
        background-color: #000;
    }
    
    .nav {
        grid-area: nav;
        background-color: #DDD;  /* silver */
        font-size: 120%;
        border: solid 1px;
    }
    
    .main {
        grid-area: main;
        background-color: #a6ddcf;  /* very pale grey */
        border: solid 1px #CCC;
    }
    
    
    .footer {
        grid-area: footer;
        text-align: right;
        padding: 20px;
    }
    

.logo-text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.title-text {
    padding-left: 20px;
}


/* Styles navigation links (mostly for admin) */
.linkwrapper {

    padding: 10px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;

    /* display: grid;
    grid-template-columns: 1fr 300px 200px;
    grid-template-areas: 
        "tools quicksearch logout";
    grid-gap: 4px; */
}



.login-wrapper {
    display: grid;
    grid-template-columns: 49% 49%;
    grid-template-rows: auto;
    grid-template-areas: 
    "student-login teacher-login";
    grid-gap: 20px;
    padding: 20px;
    margin: auto;    
}

.student-login {
    grid-area: student-login;
    background-color: white;
    padding: 10px;
}

.teacher-login {
    grid-area: teacher-login;
    background-color: peachpuff;
    padding: 10px;
}



/* ### Additional div styling (put colours / corners here) */

/* logo, banner and footer background are the same */
.footer {
     background-color: #888; /* dark grey */
}

/* Set font on dark areas to white */
.banner, .side, .footer {
    color: #fff;
}

/* #### Links Styling  #### */

a.heading:link, a.heading:visited {color: #fff; 
text-decoration: none; }

/* Navigation Links */
a.topnav {font-weight: bold;}
a.topnav:link, a.topnav:visited {color: #007c72;} /*dark teal */
a.topnav:hover {color: #707a00; text-decoration: none;} 


/* links in page */
a {font-weight: bold;}
a:link{color: #007c72;} /* dark teal */
a:visited{color: #222;} /* dark grey */
a:hover{color: #707a00;}    /* Dark Green*/

/* #### Headings / text styling #### */
h1, h2, h3, h4 {
    font-family: 'Ubuntu', sans-serif;
}

hr {
    width: 95%;
}

p {
    width: 90%;
}

/* ### Form / Search  Styling #### */

form, .nice-middle  {
    max-width: 750px;
    margin: auto;
}

form.quick {
    margin: none;
    max-width: 400px;
}

.search {
    background:#fff;
    width: 200px;
}

.submit::-moz-focus-inner { 
    border: 0;
}


.submit {
    font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    position:relative;
    width: 45px;
    font-size: 14px;
    
    left:-5px;
    background-color: #000; 
    color:#d6d3d7;
    border: 1px solid #000;
    border-radius: 0 5px 5px 0;   
    display: inline-block;
    padding: 10px;
}


input[type="submit"]:hover {
    background-color: #ffd575;
    color: #000;
}


input {
    font-size: 14px;
    padding: 10px;
    display: inline-block;
    border: 1px solid #000;
    box-sizing: border-box; 
}


/* ##### Results styling, includes 'tags' buttons ##### */
.results {
    background-color: #f7f7f7;
    border: solid 1px #00c1b4;
    padding: 10px;
    
    margin-right: 20px;
    border-radius: 20px;
}

td {
    padding: 5px;
}

tr:nth-child(even) {background: #d6fff4}
tr:nth-child(odd) {background: #FFF}

.error {
    background-color: #ffcece;
    color: #721a1a;
    border-radius: 10px;
    padding: 10px;
    border: solid 1px #721a1a;
}

.blue {
    background-color: #00c1b4;
    padding: 10px;
}

/* Period Styling for day order page */
.period {
    padding: 5px;
    width: 75%;
}

.period-1 {
    background-color: #ffe4b8;
}

.period-2 {
    background-color: #fdbeec;
}

.period-3 {
    background-color: #b6b5ff;
}

.period-4 {
    background-color: #e0e0e0;
}

.period-5 {
    background-color: #9fffc5;
}

/* Button formatting for delete page <etc> */
button {
    padding: 10px;
}

/* Form Formatting css */

.block-center{
    margin:auto;
}

/* make height of drop downs slightly larger */
select {
    height: 40px;
    padding: 5px;
}


/* field backgrounds */
.form-ok {
    background-color:#fff;
}

.form-error {
    background-color: #ff9e9e;
}

/* error messages */
.no-error {
    display: none;
}

.error-text {
    color: darkred;
}

textarea,
input[type=text] {
    font-family: 'Lato', sans-serif;
    padding: 10px;
    border-width: 1px;
    margin: auto;
}

.comment-text {
    width: 90%;
}

.add-field {
    width: 90%;

}

.width-18 {
    width: 18%;
}

.width-70 {
    width: 70%;
}

.width-250 {
    width: 250px;
}

.width-93px {
    width: 93px;
}

/* Table width for managing ingredients */
.width-100 {
    width: 100%;
}

.amount-field {
    width: 100px;

}

.submit-size {
    width: 100%;
}


/* Formats ingredients box */
.select2-container--default .select2-selection--single{
    height: 39px;
}

@media only screen and (max-width: 1100px) {

    .login-wrapper {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: 
        "student-login"
        "teacher-login"
        ;
    }

}