html {
    /*border: 5px solid black;*/

    display: flex;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    height: 100%;
}

body {
    /*border: 5px solid red;*/

    display: flex;
    margin: 7;
    padding: 0 0 0 0;
    flex-direction: column;
    flex: 1;
}

a:link, a:visited {
    color: rgb(125,125,207);
}

.header {
    /*border: 1px solid black;*/
    display: flex;
    justify-content: space-between;
    background-color: rgb(253, 164, 122);
    padding: 5px 5px 5px 5px;
    /*border-radius:25px 6px 25px 6px;*/
    border-radius:2em 0.4em 2em 0.4em;
}

.header img {
    margin: 0.25em;
    height: 4em;
}

.header .logo {
    /*border: 1px solid black;*/
    display: flex;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    /*flex-direction: column;*/
}

.header .logo p {
    /*border: 1px solid black;*/
    color: rgb(125,125,207);
    margin-top: auto;
    margin-bottom: 0.5em;
    font-size: 1.5em;
    font-weight: bold;
}

.header .tools {
    /*border: 1px solid black;*/
    /*margin: auto;*/
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.header .user {
    /*border: 1px solid black;*/
    display: flex;
    /*justify-content: right;*/
    flex-direction: row;
    align-items: center;
}

.header .user .language {
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    /*flex-wrap: nowrap;*/
    flex-direction: column;
    /*border: 1px solid black;*/
    /*border: 0.1em solid rgb(125,125,207);
    border-radius: 2em;*/
}

.header .user .language a {
    display: flex;
}

.header .user .language a img {
    height: 2em;
}

.header .user .language img {
    display: flex;
    height: 1.3em;
}

.header .user .login img {
    height: 4em;
}

.header .user .login {
    display: flex;
    margin-left: auto;
    /*justify-content: right;*/
    /*border: 0.1em solid rgb(125,125,207);
    border-radius: 2em;*/
    /*flex-direction: column;*/
}

.header .user .logout {
    display: flex;
    /*margin-left: auto;*/
    flex-direction: column;
}

.header .user .logout img {
    height: 2.7em;
}

.header .user .logout p {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    font-size: 1em;
    color: rgb(125,125,207);
}

.body {
    /*border: 1px solid black;*/
    padding: 5px 5px 5px 5px;
    display: flex;
    flex-direction: column;
    flex: 1;
    /*background-color: rgb(225,203,193);*/
}

.body .tools {
    /*border: 1px solid black;*/
    margin: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.body .tools img {
    margin: 1em;
    height: 9em;
}

.body .viewer h1.title {
    /*border: 1px solid black;*/
    text-align: center;
    margin: 0;
    font-size: 2.5em;
}

.body .viewer h2.desc {
    /*border: 1px solid black;*/
    text-align: center;
    font-style: italic;
    margin: 0;
    font-size: 1em;
}

.body .viewer p.quantities {
    display: flex;
    /*border: 1px solid black;*/
    justify-content: space-around;
    font-size: 1em;
    flex-wrap: wrap;
}

.body .viewer p.quantities span.quantity {
    /*border: 1px solid black;*/
}

.body .viewer .alternatives {
    display: flex;
    border: 1px solid black;
    justify-content: space-around;
    flex-wrap: wrap;
}

.body .viewer .alternatives .alternative {
    border: 1px solid black;
    font-size: 1em;
}

.body .viewer .making {
    /*border: 1px solid black;*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0.5em 0 0.5em 0;
}

.body .viewer .making .consumables {
    /*border: 1px solid black;*/
    flex: 1;
    border: 0.1em solid rgb(125,125,207);
    border-radius: 1em;
    margin: 0.5em;
    padding: 0.5em;
}

.body .viewer .making .instructions {
    display: flex;
    flex-direction: column;
    /*border: 1px solid black;*/
    flex: 2;
}

.body .viewer .making .instructions .instruction {
    /*border: 1px solid black;*/
    border: 0.1em solid rgb(125,125,207);
    border-radius: 1em;
    margin: 0.5em;
    padding: 0.5em;
    /*margin: 1em;*/
    /*padding: 0.5em;*/
    /*border-radius: 1em;*/
    /*background-color: rgb(225,203,193);*/
    /*background-color: rgb(243,200,243);*/
    /*background-color: rgb(245,220,160);*/
}

.body .editor {
    /*border: 1px solid black;*/
    display: flex;
    flex-direction: column;
    flex: 1;
}

.body .editor span.missing {
    color: rgb(200, 0, 0);
    font-weight: bold;
}

.body .editor .status {
    border: 1px solid black;
}

.body .editor .message {
    border: 1px solid black;
}

.body .editor .content {
    border: 1px solid black;
    display: flex;
    flex-direction: row;
}

.body .editor .content .menu {
    border: 1px solid black;
    flex: 1;
}

.body .editor .content .tool {
    border: 1px solid black;
    flex: 2;
}

.body .editor .content .tool .button {
    height: 2em;
    margin: 0.5em 1em;
}

.body .editor .content .tool ul .consumable {
    list-style-type: none;
}

.body .editor .content .tool .actions .step {
    width: 1em;
}

.body .editor .content .tool .actions {
    border: 1px solid black;
    display: flex;
    align-items: center;
}

.body .editor .content .tool .consumable {
    border: 1px solid black;
}

.body .editor .drafts {
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    flex: 1;
}

.body .editor .drafts .button {
    height: 2em;
}

.body .editor .drafts .draft {
    /*border: 1px solid black;*/
    display: flex;
    flex-direction: column;
    padding: 1em;
    border-radius: 1em;
    text-decoration: none;
    align-items: center;
    background-color: rgb(255,240,200);
    /*width: 20%;
    height: 20%;
    overflow: hidden;*/
}

.body .editor .drafts .draftadd {
    border: 1px solid black;
    display: flex;
    /*flex-direction: column;
    justify-content: center;
    width: 20%;
    height: 20%;*/
}

/*
.body .viewer .instruction h2 {
    margin: 0;
}

.body .viewer .instruction ol {
    margin: 0.5em 0 0 0;
}
*/

.body .search {
    display: flex;
    flex-direction: row;
    /*border: 1px solid black;*/
    align-items: center;
    justify-content: center;
    /*margin: auto;*/
}

.body .search .keywords {
    display: flex;
    /*border: 1px solid black;*/
}

.body .search .keywords input {
    margin: 0.5em;
    font-size: 1.5em;
}

.body .search .button {
    display: flex;
    /*border: 1px solid black;*/
}

.body .search .button input {
    height: 2em;
}

.body hr {
    display: flex;
    /*border: 1px solid black;*/
    /*background-color: black;*/
    border-radius: 2em;
    background-color: rgb(125,125,207);
    height: 0.2em;
    width: 96%;
}

.body .results {
    display: flex;
    flex-direction: column;
    /*border: 1px solid black;*/
    /*align-items: center;*/
    margin: 0 7% auto 7%;
    flex-grow: 0;
    /*margin: auto 0;*/
}

.body .results .result {
    display: flex;
    margin: 0.5em;
    /*flex-direction: column;*/
    /*border: 1px solid black;*/
    /*align-items: center;*/
    /*margin: auto;*/
}

.body .results .result p {
    padding: 0;
    margin: 0;
    /*border: 1px solid black;*/
}

.body .results .result .title {
    font-size: 2em;
}

.body .results .result .desc {
    font-size: 1em;
    color: black;
    /*text-decoration: none;*/
    font-style: italic;
}

.body .authentication {
    margin: auto;
    display: flex;
    align-items: center;
    border: 0.3em solid rgb(125,125,207);
    border-radius: 1em;
}

.body .authentication .credentials {
    display: flex;
    flex-direction: column;
}

.body .authentication .credentials input {
    margin: 0.5em;
    font-size: 1.5em;
}

.body .authentication .button {
    display: flex;
    /*border: 1px solid black;*/
    margin: auto 0.25em;
}

.body .authentication .button input {
    height: 4em;
}

.footer {
    padding: 5px 5px 5px 5px;
    background-color: rgb(253,164,122);
    text-align: center;
    color: rgb(125,125,207);
    /*border-radius: 6px 25px 6px 25px;*/
    border-radius: 0.4em 2em 0.4em 2em
}

.class_body_welcome {
    /*border: 1px solid black;*/

    margin-top: auto;
    margin-bottom: auto;
}

.class_body_logo {
    /*border: 1px solid black;*/

    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.class_body_search {
    /*border: 1px solid black;*/

    margin-left: auto;
    margin-right: auto;

    padding-top: 20px;
    padding-bottom: 20px;

    text-align: center;
}

.class_body_search input[type=text] {
    font-size: 2em;
}

.class_body_activities {
    /*border: 1px solid black;*/

    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}