/*
$gray1 : hsl(240, 18%, 9%);
$gray2: hsl(240, 18%, 14%);
$gray3: hsl(240, 18%, 18%);

$text : hsl(240, 5%, 65%);

$accentRed: hsl(15, 100%, 35%);
$accentGreen: hsl(112, 40%, 20%);
 */

/* **** Global **** */

html, body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    width: 100%;
    height: 100%;
    background: hsl(240, 18%, 9%);
    color: hsl(240, 5%, 75%);
    font-size: 20px;
    user-select: none;
    overflow: hidden;
}

input {
    background: hsl(240, 18%, 18%);
    border: 0;
    border-bottom: 2px solid hsl(240, 5%, 65%);
    color: hsl(240, 5%, 65%);
    font-size: 20px;
    padding-left: 10px;
}

textarea {
    background: hsl(240, 18%, 18%);
    border: 0;
    border-bottom: 2px solid hsl(240, 5%, 65%);
    color: hsl(240, 5%, 65%);
    font-size: 20px;
    padding-left: 10px;
}

textarea:focus, input:focus {
    outline: none;
}

select {
    background: hsl(240, 18%, 18%);
    color: hsl(240, 5%, 65%);
    border: 0;
    border-bottom: 2px solid hsl(240, 5%, 65%);
    font-size: 20px;
}

::-webkit-scrollbar {
    /*width: 12px;  !* for vertical scrollbars *!*/
    /*height: 12px; !* for horizontal scrollbars *!*/
}

::-webkit-scrollbar-corner {
    background: hsl(180, 30%, 18%);
}

::-webkit-scrollbar-track {
    background: hsl(180, 30%, 18%);
}

::-webkit-scrollbar-thumb {
    background: hsl(180, 30%, 22%);
}

/* **** Loading **** */

#loading {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
}

#loadingContainer {
    font-size: 40px;
}

#loadingSpinner {
    position: relative;
    top: 25px;
    left: 0;

    height: 50px;
    width: 50px;
}

#loadingLogo {
    position: relative;
    top: -25px;
    left: 0;

    height: 50px;
    width: 50px;

    text-align: center;
}

/* **** Login **** */

#login {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
}

#loginInnerContainer {
    background: hsl(240, 18%, 14%);
    padding: 20px;
}

#loginBanner {
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;
}

#login input {
    display: inline-block;
    width: 200px;
}

.inputLine {
    margin: 0 0 10px 0;
}

.loginLabel {
    display: inline-block;
    width: 100px;
}

.loginButton {
    width: 100%;
    padding: 10px;
    background: hsl(240, 18%, 18%);
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
}

.loginButton:hover {
    background: hsl(112, 40%, 20%);
}

#loginSubmitButton {
    margin-top: 20px;
}

#loginError {
    color: hsl(15, 100%, 35%);
    display: none;
    text-align: center;
    margin-top: 15px;
}

/* **** Main **** */

.columnContainer {
    max-width: 1000px;
    margin: 0 auto 0 auto;
}

#root {
    height: 100%;
    width: 100%;

    display: flex;
    flex-direction: column;
}

#globalHeader {
    flex: 0 0 42px;

    display: flex;
    background: hsl(180, 30%, 26%);
}
.globalHeaderSideSpacer {
    flex: 1 1 0;
}
#globalHeaderContent {
    flex: 0 1 1000px;
    padding: 10px 0 10px 0;

    display: flex;
}
.globalHeaderContentPartition {
    flex: 1 1 0;
}
#globalHeaderBack {
    text-align: left;
    padding-left: 10px;
    cursor: pointer;
}
#globalHeaderTitle {
    text-align: center;
}
#globalHeaderLogout {
    text-align: right;
    padding-right: 10px;
    cursor: pointer;
}

#content {
    flex: 1 1 auto;

    width: 100%;
    height: 100%;
    min-height: 0;
}

#main {
    width: 100%;
    height: 100%;

    overflow-y: auto;
}
#mainContainer {
    padding-top: 10px;
}

#mainTabs {
    display: flex;
    margin: 0 10px 0 10px;
    padding-top: 10px;
}
.mainTabActive {
    background: hsl(240, 18%, 14%) !important;
}
.mainTab:nth-child(1) {
    margin: 0;
}
.mainTab {
    display: inline-block;
    flex: 0 0 auto;

    padding: 15px;
    margin-left: 10px;

    background: hsl(240, 18%, 12%);
}

#mainHeaderContainer {
    display: flex;
    margin: 0 10px 0 10px;
}

#mainSearchContainer {
    background: hsl(240, 18%, 14%);
    flex: 1 0 auto;
    display: flex;
    min-width: 0;

    padding: 20px;
}
#mainHeaderSpacer {
    flex: 0 0 10px;
}
#mainHeaderButtonContainer {
    flex: 0 0 auto;
}

.mainSearchLabel {
    display: inline-block;
    flex: 0 0 70px;
}
#search {
    display: inline-block;
    flex: 1 1 0;
    min-width: 0;
}
#addRecipeButton {
    flex: 0 0 105px;
    height: 100%;
    padding: 0 15px 0 15px;
    background: hsl(112, 30%, 18%);

    display: flex;
    flex-direction: column;
    justify-content: center;
}
#addRecipeButton:hover {
    background: hsl(112, 30%, 20%);
    cursor: pointer;
}

#recipesContainer {
    margin: 0 10px 0 10px;
}
.searchResultText {
    text-align: center;
    margin-top: 30px;
}
.searchRecipeRow {
    width: 100%;
    background: hsl(240, 18%, 14%);
    margin-top: 10px;
}
.searchRecipeRow:hover {
    background: hsl(240, 18%, 20%);
    cursor: pointer;
}
.searchRecipeName {
    padding: 20px;
}
.searchRecipeId {
    display: none;
}

/* **** Edit Recipe **** */

#editRecipe {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#editRecipeContainer {
    margin: 0 auto 0 auto;
    padding-top: 10px;
}

.editRecipeInputBlock:nth-child(1) {
    margin-top: 0;
}

.editRecipeInputBlock {
    background: hsl(240, 18%, 14%);

    min-width: 0;

    margin: 10px 10px 0 10px;
}
.editRecipeInputTitle {
    background: hsl(240, 18%, 20%);
    padding: 20px;
}
.editRecipeInputContents {
    background: hsl(240,20%,16%);
    padding: 20px;
}
.editRecipeAddSection {
    padding: 20px;

    display: flex;
}
.editRecipeAddButton:hover {
    background: hsl(112, 40%, 20%);
    cursor: pointer;
}
.editRecipeAddButton {
    padding: 15px;
    width: fit-content;
    background: hsl(240, 18%, 18%);;
}

#editRecipeNameBlock {

}
#editRecipeNameLabel {

}
#editRecipeName {
    width: 100%;
}

#editRecipeImagesBlock {
    display: block;
}
#editRecipeImagesContainerContainer {
    display: flex;
}
#editRecipeImagesContainer {
    overflow-x: auto;
    display: flex;
    overflow-y: hidden;
}
.editRecipeImageLink:nth-child(1) {
    margin-left: 0;
}
.editRecipeImageLink {
    margin-left: 10px;
}
.editRecipeImage {
    max-height: 300px;
}

#editRecipeAddIngredientText {
    flex: 1 1 auto;
    min-width: 0;
}
#editRecipeAddIngredientButton {
    flex: 0 0 auto;
    margin-left: 10px;
}

#editRecipeAddTagText {
    flex: 1 1 auto;
    min-width: 0;
}

#editRecipeAddStepButton:hover {
    background: hsl(240, 18%, 20%);
}
#editRecipeAddStepButton {
    padding: 20px;
    background: hsl(240, 18%, 18%);
    width: 100%;
    text-align: center;
    cursor: pointer;
}

.autoCompleteContainer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;

    padding: 10px;
    background: hsl(180, 30%, 26%);
}
.autoCompleteWrapper {
    display: flex;
    align-items: flex-start;
}
.autoCompleteContent {
    flex: 1 1 auto;
    min-width: 0;
}
.autoCompleteClose {
    flex: 0 0 auto;
    padding: 10px;
    margin-left: 10px;
}
.autoCompleteClose:hover {
    background: hsl(180, 30%, 30%);
}
.autoCompleteResultRow:hover {
    background: hsl(180, 30%, 30%);
}
.autoCompleteResultRow:nth-child(1) {
    margin-top: 0;
}
.autoCompleteResultRow {
    margin-top: 10px;
    padding: 10px;
}
.autoCompleteCreateButton:hover {
    background: hsl(0, 30%, 30%);
}
.autoCompleteCreateButton {
    background: hsl(0, 30%, 26%);
    padding: 10px;
    margin-top: 10px;
    text-align: center;
}

.editRecipeIngredientRow:nth-child(1) {
    margin-top: 0;
}
.editRecipeIngredientRow {
    display: flex;
    margin-top: 20px;
}
.editRecipeIngredientQuantity {
    min-width: 0;
    height: 43px;
}
.editRecipeIngredientName {
    flex: 1 1 auto;
    align-self: center;
}
.editRecipeRowRemoveButton:hover {
    background: hsl(0, 30%, 30%);
}
.editRecipeRowRemoveButton {
    background: hsl(0, 30%, 26%);
    padding: 10px;
    align-self: flex-start;
}

.editRecipeTagRow:nth-child(1) {
    margin-top: 0;
}
.editRecipeTagRow {
    display: flex;
    margin-top: 20px;
}
.editRecipeTagName {
    flex: 1 1 auto;
    align-self: center;
}

.editRecipeStepRow:nth-child(1) {
    margin-top: 0;
}
.editRecipeStepRow {
    display: flex;
    margin-top: 20px;
}
.editRecipeStepNumber {
    height: 43px;
}
.editRecipeStepText {
    flex: 1 1 auto;
    margin: 0 20px 0 20px;
}

#editRecipeDivider {
    margin-bottom: 10px;
}
#editRecipeSaveButton:hover {
    background: hsl(112, 30%, 20%);
}
#editRecipeSaveButton {
    width: 100%;
    text-align: center;
    padding: 20px 0 20px 0;
    margin: 10px 0 20px 0;

    cursor: pointer;
    background: hsl(112, 30%, 18%);
}

/* **** View Recipe **** */
#viewRecipe {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

#viewRecipeName {
    text-align: center;
    margin: 20px 0 10px 0;
    font-size: 40px;
}

#viewRecipeTags {
    text-align: center;
}
.viewRecipeTagRow:nth-child(1) {
    /*margin-left: 0;*/
}
.viewRecipeTagRow {
    display: inline-block;

    /*background-color: hsl(240, 5%, 75%);*/
    /*color: hsl(240, 18%, 9%);*/

    color: hsl(240, 5%, 75%);

    /*margin-left: 10px;*/
    padding: 5px;
    border-radius: 5px;
    font-size: 20px;
}
.viewRecipeTagSpacer {
    display: inline-block;
    margin: 0 5px 0 5px;
}
.viewRecipeTagName {
    display: inline-block;
}

.viewRecipeBlock {
    background: hsl(240, 18%, 14%);

    min-width: 0;

    margin: 10px 10px 0 10px;
}
.viewRecipeBlockTitle {
    background: hsl(240, 18%, 20%);
    padding: 20px;
}
.viewRecipeBlockContents {
    background: hsl(240,20%,16%);
    padding: 20px;
}

#viewRecipeIngredients {

}
#viewRecipeIngredientsBlockContent {
    padding: 0;
}
.viewRecipeIngredientsTable {
    width: 100%;
}
.viewRecipeIngredientsTable tr:first-child td {

}
.viewRecipeIngredientsTable tr:nth-child(even) td {
    background-color: hsl(240, 18%, 14%)
}
.viewRecipeIngredientsTable td:nth-child(1) {

}
.viewRecipeIngredientsTable td {
    padding: 10px;
}
.viewRecipeIngredientRow {

}
.viewRecipeIngredientQuantity {
    display: inline-block;
}
.viewRecipeIngredientUnit {
    display: inline-block;
    margin-left: 10px;
}
.viewRecipeIngredientName {

}

#viewRecipeStepsBlock {
    background-color: hsl(240, 18%, 9%);
}
#viewRecipeSteps {

}
#viewRecipeStepsBlockContent {
    padding: 0;
}
.viewRecipeStepRow:nth-child(1) {

}
.viewRecipeStepRow:nth-child(even) {
    background-color: hsl(240, 18%, 14%)
}
.viewRecipeStepRow {
    display: flex;
    padding: 10px;
}
.viewRecipeStepNumber {
    display: inline-block;
    flex: 0 0 auto;
    font-size: 40px;
    margin-right: 20px;
}
.viewRecipeStepText {
    display: inline-block;
    flex: 1 1 auto;
}

#viewRecipeSaveButton:hover {
    background: hsl(112, 30%, 20%);
}
#viewRecipeSaveButton {
    width: 100%;
    text-align: center;
    padding: 20px 0 20px 0;
    margin: 10px 0 10px 0;

    cursor: pointer;
    background: hsl(112, 30%, 18%);
}

/* desktop-like devices */
@media (min-width: 800px) {
    #viewRecipeReflowContainer {
        display: flex;
        align-items: flex-start;
    }

    #viewRecipeIngredientsBlock {
        display: inline-block;
        flex: 0 0 auto;
    }

    #viewRecipeStepsBlock {
        flex: 1 1 auto;
        min-width: 0;
    }
}