#error-message {
    background-color: #ffeae8;
    color: darkred;
    padding: 10px 5px;
    border-radius: 10px;
    border: 1px solid red;
    display: none;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

#error-message.show{
    display: block;
}


#loginContainer{
    text-align: center;
}

.autocomplete-suggestions {
    text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);

    /* core styles should not be changed */
    position: absolute; display: none; z-index: 9999; max-height: 80%; overflow: hidden; overflow-y: auto; box-sizing: border-box;
}
.autocomplete-suggestion {
    position: relative;
    padding: 7px;
    line-height: 23px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.02em;
    color: #333;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
.autocomplete-suggestion.selected {
    background-color: #fcfcf0;
    background-size: contain;
    border-color: #ccc;
    /*padding-left: 45px;*/
    cursor: pointer;
    font-weight: bold;
    text-transform: capitalize;
}
.autocomplete-suggestion.selected b{
    font-weight: bold;
    color: #000;
}


input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

[list]::-webkit-calendar-picker-indicator {
    display: none;
  }

input[type=number] {
  -moz-appearance: textfield;
}

button{
    cursor: pointer;
}

#top-bar{
    transition: top 0.35s;
}

#top-bar.slideUp{
    top: -48px;
}

#top-bar.slideUp #slideDown{
    transform: rotate(180deg);
}

button:active, #back:active{
    background-color: #f74;
    color: #fff;
    box-shadow: none;
    transform: translate(0, 2px);
    border: none;
}

#footer{
    background-color: #d5e4f0;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
    margin-top: 80px;
}

#footer>div{
    padding: 10px;
    min-width: 300px;
}

#footer>div>a{
    display: block;
    color: #333;
    text-decoration: none;
    padding: 3px;
    margin: 3px;
}

.searchKeyword{
    color: #1f8dd6;
    background-color: #fff;
}

#sidemenu {
    position: fixed; top: 0; left: -310px;
    z-index: 1200;
    background-color: rgb(240, 245, 241);
    width: 300px;
    height: 100%;
    -webkit-transition: left 0.35s;
    transition: left 0.35s;
    /*overflow-y: auto;*/
}
#vs{ display: none;}
#sidemenu.show{
    box-shadow: 2px 0 24px rgba(0,0,0,0.5);
}
#sidemenu.show, #sidemenu.show .searchBtn, #sidemenu.show .showOnlyRaw {left: 0;}
#sidemenu.show .searchBtn{top: 40px;}
#sideMenuContent{
    top: 45px;
    bottom: 0;
    position: absolute;
    overflow-y: auto;
    width: 290px;
}
#sideMenuContent.list{ top: 90px;}
#sidemenu .showOnlyRaw,#rdaTargets{display: block; font-size: 20px; width: 240px; margin: 10px; padding: 10px;}
#sideMenuContent>div{
    display: block;
    font-size: 16px;
    margin: 6px 0 0 10px;
    background-color: #fff;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
#sideMenuContent>div label{
    display: block;
    padding: 10px;
}

#sideMenuContent>div a{
    display: block;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #000;
    margin-top: 5px;
}

#sideMenuContent a, h1>a{
    display: inline-block;
    /*font-size: 18px;*/
    text-decoration: none;
    /*color: #004574;*/
    color: #000;
    /*margin: 20px 0 0 10px;*/
    /*font-weight: bold;*/
}

#sideMenuContent ul{
    margin-top: 0;
}
#sideMenuContent li{
    padding: 4px;
}

#sidemenu.show .searchBtn input[type="search"]{width: 240px;}

#slideBack{
    text-align: center; font-size: 20px; padding: 10px; color: #fff;
    background-color: #359a67;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}
#slideBack b{
    font-family: Arial, sans-serif;
    display: inline-block;
    margin-left: 5px;
}

#bgbox,.lightbox{
    background-color: #38445a;
    pointer-events: none;
}
#bgbox.show,.lightbox.show{
    position: fixed;
    height: 100%; top:0; left:0; width: 100%;
    opacity: 0.7;
    cursor: pointer;
    z-index: 1150;
    display: block;
    pointer-events: auto;
    /*-webkit-transition: opacity 0.5s;*/
    /*transition: opacity 0.5s;*/

}

#bgbox.show:active {
    opacity: 0.9;
}



input[type='text'], input[type='number'], input[type='search'], select {
    padding: 7px 5px 5px 5px;
    font-size: 1em;
    border-radius: 3px;
    border: 1px solid #666;
    box-shadow: inset 1px 1px 4px #ccc;
    box-sizing: border-box;
    margin-bottom: 10px;
}


#start_time, #servings{
    max-width: 75px;
    width: 70px;
    text-align: center;
}


input[type='submit']{
    padding: 7px 5px 5px 5px;
    font-size: 1em;
    border-radius: 3px;
    border: 1px solid #333;
    box-shadow: 2px 2px 5px #ccc;
    box-sizing: border-box;
}

#vurl, #title, #description{
    width: 100%;
}

label {
    padding: 15px 0 5px 5px;
    display: inline-block;
}

label[for='servings'], label[for='start_time']{
    min-width: 73px;
}

#thumbnail_container{
    width: 100%;
    max-width: 440px;
}

#ytnail{
    width: 100%;
    height: 0;
    margin: 5px 0;
}

#ytnail.image{
    padding-bottom: 56.25%;
    border: 1px solid #000;
    border-radius: 15px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}



.add_icon{
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 25px;
    color: #008c1f;
    pointer-events: none;

}

#add_ingredient, #add_ingredient_weight{
    padding-left: 30px;
    width: 300px;
}

#weights{
    margin-bottom: 10px;
}

#step2, #submitNewRecipe{
    display: none;
}

#step2.show, #submitNewRecipe.show{
    display: block;
}

#add_new_video{
    position: relative;
}

#batchAdd{
    display: inline-block;
    padding: 5px;
    border: 1px solid #000;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

#textIngredients{
    display: none;
}

.commentText{
    padding: 3px 0;
}

#commentField{
    width: 100%;
    min-height: 100px;
    box-sizing: border-box;
}

.comment{
    padding: 5px;
    background-color: #eee;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
}
.comment b{
    display: block;
    font-size: 0.9em;
    line-height: 160%;
}

.editCommentMenu{
    display: none;
}

.editCommentMenu button{
    line-height: normal;
    min-height: 30px;
    margin: 2px 10px;
}

.comment:hover .editCommentMenu{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}

#textIngredients textarea, #textIngredients button{
    display: none;
}

#textIngredients.active button{
    display: inline-block;
}

#textIngredients.active textarea{
    width: 100%;
    height: 400px;
    display: inline-block;
    line-height: 200%;
    white-space: nowrap;
}

#minimizeBatch{
    padding: 5px;
    cursor: pointer;
}

input.amount, input.grams{
    width: 70px;
    margin: 5px 10px 5px 0;
    text-align: center;
}

#ingredients>div{
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    position: relative;
    padding: 7px 0 0 5px;
    box-sizing: border-box;
    margin-bottom: 10px;
    max-width: 720px;
}

#ingredients>div>b{
    min-width: 80px;
    display: block;
}


#ingredients select{
    padding-left: 2px;
}

.delIngredient{
    color: red;
    font-size: 36px;
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    position: absolute;
    top: -6px;
    right: -3px;
    text-shadow: 1px 2px 3px rgba(0,0,0,0.5);
}


#nutritionData{
    border: 1px solid #000;
    background-color: #fff;
    z-index: 10;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    padding: 5px 0;
}

.nutriTab{
    display: inline-block;
    width: 76px;
    padding: 10px 5px;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 5px 5px 0 0;
    margin-left: 3px;
    text-align: center;
    position: relative;
    bottom: -6px;
    background-color: #ffc;
    cursor: pointer;
    font-size: 12px;
}


.nutriTab.active{
    background-color: #fff;
    z-index: 15;
    bottom: -2px;
    border-bottom-color: #fff;
}

/* Start social icons */

#socialIcons {
    left: 0;
    min-width: 200px;
    width: 100%;
    bottom: 0;
    border-radius: 0;

    /*border-top: 1px solid #0c4a8a;*/
    /*background-color: rgba(108, 185, 206, 0.34);*/
    padding: 2px;
    position: relative;
    box-sizing: border-box;
}

#socialIcons_link{
    position: fixed;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid #0c4a8a;
    width: 90%;
    max-width: 600px;
    min-height: 450px;
    max-height: 560px;
    height: 40%;
    top: 50%;
    left:50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 5px 10px;
    z-index: 1151;
    box-sizing: border-box;
}

.twitter, .facebook, .googleplus, .closeSocial, .pinterest {

    width: 40px;
    height: 40px;
    display: inline-block;
    cursor: pointer;
    background: url('/images/social.png')
    0 0 / auto 40px
    no-repeat;
    margin-right: 16px;
}

a.closeSocial {
    display: none;
    margin: 0;
    position: absolute;
    width: 36px;
    height: 36px;
    background-position: -108px 0;
    background-size: auto 36px;
    top: 5px;
    right: 5px;
}

#socialIcons_link h2{
    margin-top: 5px;
    letter-spacing: -0.05em;
    font-size: 1.2em;
}

#socialIcons_link a.closeSocial{
    right: -15px;
    top: -15px;
    display: block;
}

#socialIcons_link textarea{
    width: 100%;
    height: 200px;
    background-image: url(/images/click2copy.png);
    background-size: 159px 200px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: relative;
    padding: 10px;
    box-sizing: border-box;

}

#socialIcons_link .help_tip.copied::before{
    content: 'Copied';
    position: absolute;
    font-size: 64px;
    display: block;
    font-weight: bold;
    color: #4a9968;
    opacity: 0;
    top: 300px;
    left: 0;
    width: 100%;
    text-align: center;
    pointer-events: none;
    animation-name: copied;
    animation-duration: 1.5s;
}


@keyframes copied {
    0%   {opacity: 0;}
    20%  {top: 300px; opacity: 1;}
    100% {top: 100px; opacity: 0;}
}

.twitter {
    background-position: -80px 0;
}

.googleplus {
    background-position: -40px 0;
}

.pinterest {
    background-position: -160px 0;
}


#embed-html, #embed-bb, #get-url{
border-radius: 10px 10px 0 0;
    padding: 7px 9px;
    margin: 5px 0 -6px 5px;
    border: 1px solid #777;
    float: right;
    cursor: pointer;
    font-size: 0.8em;
    line-height: normal;
    box-shadow: none;
    background-color: #e9f1f8;
    position: relative;
}

#embed-html.active, #embed-bb.active, #get-url.active{
    background-color: #fff;
    border-bottom: #ffffff;
    transform: translateY(-4px);
    cursor: default;
    z-index: 50;
}

button:focus {outline:0;}

/* End social icons */

@media only screen and (min-width: 760px){
    /*#top-bar.slideUp{*/
        /*top: 0;*/
    /*}*/

    #nutritionData{
        border-radius: 15px;
    }

    .nutriTab{
        margin: 0 0 0 15px;
        font-size: 16px;
        padding: 10px;
        width: 100px;
    }

    #textIngredients.show{
        position: fixed;
        min-width: 300px;
        width: 30%;
        background-color: #fff;
        border: 1px solid #000;
        border-radius: 10px;
        padding: 5px;
        right: 10px;
        top: 10px;
        z-index: 300;
        display: block;
    }
}

@media only screen and (min-width: 1024px){
    #recipe_details{
        border-radius: 15px;
        border: 1px solid #ccc;
    }

    #ingredients>div>b{
        min-width: 80px;
        display: inline-block;
    }

    input.amount{
        width: 70px;
        margin: 5px 10px;
        text-align: center;
    }

}