html, body {margin:0; font-family: sans-serif;height: 100%;}
   
   input, select, textarea { 
        border: solid 1px #c7c7c7;padding: 0.5em; border-radius: 1em; border: none;box-shadow: 0 0 15px #d3d1d1; margin: 0.2em;
        box-sizing: border-box;
     }
  
     .fa-sign-out-alt {
          color: #fff;  
          padding: 0.5em;
          cursor: pointer;
     }

   .btn {
          border: none;
          padding: 0.5em;
          border-radius: 0.2em;
          color: #fff;
          font-weight: bold;
          display: inline-block;
          text-decoration: none;
    }

    .btn-submenu {
          color: black;
    }

    .version { position: absolute; margin: 1em; }

     /*// TOP TOOLBAR //////////////////////*/

     .logo { position: absolute; top:0; z-index: 3000; }
     .logo img { width: 45px; margin: 0 .5em; box-shadow: 0 0 25px white; }
     
     .activeBtn {
          background: white;
          color: #3f3f3f;
          border-bottom: solid 5px white;
    }
  
   .noJs { background: blue; color: white; text-align: center; padding: 1em; }
   
   .version { float: right; color: white; font-size: 0.5em;}
   
    .message {
          background-color: green;
          /*color: white;*/
          text-align: center;
          animation: hideMe 5s forwards;
    }
    .error {
          background-color: rgb(252, 137, 137);
          color: white;
          text-align: center;
    }
    .error ul {
          margin: 0;
          display: inline-block;
    }

     @keyframes hideMe{
          0%{
              opacity: 1;
          }
          99.99%{
              opacity: 1;
          }
          100%{
              opacity: 0;
              height: 0;
          }
     }

   .topBar {
        /*z-index: 2500;
        position: fixed;*/
        background: #da2128;
        width: 100%;
        /*border-bottom: solid 1px #bfbfbf;*/
    }
    
    .topBarSubmenu {
          box-shadow: 5px 5px 5px #c7c7c7;
          width: 100%;
     }

    .topBar form {display: inline;}
    
    .btn { cursor:pointer;}
    
    .main .btn { background:#868686; display: inline-block; font-size: 0.8em;}
    
    .topBar a.btn {
        padding: 0.5em;
        border-radius: 0;
    }
    
    .topBar a.btn:hover {
        background:#db7979;
    }
    
    .topBar a.activeBtn:hover {
          background: white;
          color: #3f3f3f;
     }    

    .btn.add {
        display: inline-block;
        padding: 0 0.5em;
        text-decoration: none;
        font-weight: normal;
    }
    
    .topBar .btn:nth-child(2) { margin-left:4em; }

     .btn.ingredientsBtn, .btn.materialsBtn { text-decoration: none;}
     
     .btn.login, .btn.logout, .btn.help, .logout  { float:right;}
    

    .ui-draggable-helper { box-shadow: 0 0 10px black; z-index: 1000; }
   .ingredientTable { position: fixed;height: 100%; width: 350px; float: left; overflow: scroll;}
   /* margin-top: 2.5em; */
   
   #searchBox {  width: 94%;
    border: solid 2px #dcdcdc;
    padding: 0.5em;
    background: url(../images/search.svg) no-repeat scroll top 0.1em right 0.4em;
    padding-right: 30px;
    margin: 0em;
    border-radius: 2em;
    margin: 0.5em 3%;
   }
   
   #searchBox:focus { outline: none; }
   
   .ingredientTableRow {  padding: 0.5em; border: solid 1px #ebebeb; background: #fff; }
   .dragging { box-shadow: 0 0 10px black; z-index:1000;}
   .ingredientTableRow input { display:none; }
   .ingredientDrop, .conditionDrop {display: none; margin-right: 5px; }
   .ingredientWeight { text-align: center; width: 5em; margin-right: 0.5em; }
   .main, .mainFullwidth {
        min-height: 100%;
        background-color:#e5e5e5;
        padding: 0 1em;
        border-left: solid 2px #d9d9d9;
        box-shadow: inset #c3c3c3 0 0 105px;
    }

    .mainFullwidth textarea { width: 50%; }

    .main { margin-left: 350px; }
    
    .main input, label { margin: 0.3em; }
    
    .main label {
        font-size: 0.7rem;
        padding: 0.3rem;
        border: solid 1px #c2c2c2;
    }
   

   .main input.saveRecipeBtn {
        background: green; 
   }
    
   .recipeTable, #conditionsTable {
        position: relative;
        padding: 0.5em;
        border: dashed 1px #c0c0c0;
        margin: 0.5em 0;
    }
    
    #conditionsTable .fa-window-close { color: red; }
    
    .recipeName { width: 100%; }
    
    .recipeTable .fa-window-close, .recipeTable .fa-times-circle { color: red; cursor: pointer; }
    
    .recipeTable .fa-window-close {float:right; position: absolute;top: 0.2em;right: 0.2em;}
    
    .subrecipeName { display: none; width: 95%; }
    
    .placeholderRecipeTable {
        width:100%;
        background: radial-gradient(white,rgba(255,255,255,0.1),rgba(255,255,255,0));
        padding: 1em 0;
        text-align: center;
        vertical-align: middle;
    }
    
   .recipeTableRow {
        width: 100%;
        width: 100%;
        border-bottom: solid 1px #dfdede;
        display: table;
   }
   .recipeTableRow *  { display: table-cell; vertical-align: middle; }

   .hiddenRecipeAdm { background-color: #dfdfdf!important; }

   .hiddenRecipeUsr { display: none; }

   .recipeTableRow:nth-child(2n)  { background: linear-gradient(90deg,#f0f0f000,#f0f0f0,#f0f0f000);
    }
   
   .recipeTableRow .btn, .recipeTableRow .recipeUrl, .recipeTableRow .view  { width:1%; }




   /*.recipeTableRow:hover {  cursor: pointer; }*/
   
   .recipeTableRow .id { color:#b9b9b9; padding: 0.5em; width: 1.5em; /*display: inline-block;*/ }
   
   .recipeLink { text-decoration: none; color: #3a3a3a; }
   
   .recipeUrl { text-decoration:none;color: black;border-bottom: dashed 1px #cecece; padding: 0.1em; margin-left:0.5em; }
   .recipeUrl .fa-link { margin-right: 0.2em;}
     
  
   

   
   .recipeTableRow .btn.delete, .recipeTableRow .btn.change, .recipeTableRow .btn.pdf, .ingredients .btn.pdf {
        padding: 0.2 0.5em;
        margin: 0 0.5em;
        text-decoration: none;
        font-weight: normal;
   }
   
   .recipeTableRow .btn.pdf, .ingredients .btn.pdf, .btn.back {
        background:green;
   }
   #recipeTableRow a.btn.change, #recipeTableRow a.btn.delete { margin: 0; }
     #recipeTableRow .fa-window-close { color: red; }
     #recipeTableRow .fa-clone { color: #d8d300; }
     #recipeTableRow .fa-edit { color: #007eff; }
     .editIngredient { color: #ad1319!important; } 
     #recipeTableRow .fa-eye, .ingredients .fa-eye { color: #399444; }
     #recipeTableRow .fa-eye-slash, .ingredients .fa-eye-slash { color: #6e6e6e; }
     .white { color:white!important;}
   
   .recipeImage {
          display: none;
          width: 0.1px;
          height: 0.1px;
          opacity: 0;
          overflow: hidden;
          position: absolute;
          z-index: -1;
     }
     .recipeImage + label {
          font-size: 1.25em;
          font-weight: 700;
          color: white;
          display: inline-block;
      }
      
      .recipeImage:focus + label,
     
   
   .note { width: 100%;height: 150px; }

     /* recipe pic preview */
     .hover_recipe_img { display:inline-block; }
     .hover_recipe_img a span { position:absolute; display:none; z-index:99; }
     .hover_recipe_img a:hover span { display:block; }
   
   /* ***USER**** */


     #loginForm {
          background: #da2128;
          display: inline-block;
          padding: 2em;
          box-shadow: 5px 15px 35px rgb(0 0 0 / 50%);
     }
          
     #loginForm button {
          border-radius: 1.5em;
          padding: 0.5em 2em;
          margin: 0.5em auto auto auto;
          width: 100%;
          color: black;
     }
          
     #loginForm div:first-child {     
          width: 100%;
     }
     #loginForm input { margin: 0.5em; color: black; }
     #loginForm * { 
          float: left;
          clear: both;
          color: white;
          text-align: center;
     }
     .loginOuterWrapper {
          display:table;
          display: table;
          width: 100%;
          height: 100%;}
     .loginWrapper { display:table-cell;width:100%; height:100%; background: url('../images/bg.jpg'); vertical-align: middle; text-align: center;}
   
   #searchBoxUser {
    width: 50%;
    background: linear-gradient(white,#cecece);
    border: solid 2px #d7d7d7;
    box-shadow: inset 0 0 15px #d3d3d3;
    margin: 0.5em;
    outline-width: 0;}
    

    .recipeTableRow *  { display: table-cell; }
    .ingredients { padding: 1em; list-style-type: none;}
    .ingredientsSub { display:none}
    /*.ingredient:nth-child(odd) { background: #f6f6f6; }*/
    .ingredient { display:table-row;}
    
    .ingredient  *  { display: table-cell}; 

    

    .invisible {opacity:0;cursor:default;}
    .ingredients { margin-top: 0; ;} /* display:none */
    .ingredients .id {color:#b9b9b9;display: inline-block;margin-right: 0.5em;}
    .ourIngredient { color: #007eff; }
    .addIngredient {
          padding: 0.5em;
          border: dashed 1px lightgrey;
          margin: 0.5em auto;
          display: block;
    }
    .addIngredient input { margin-left:0.5em; }
    .addIngredientBtn { background: green; display: inline-block; margin-left:0.5em; }
    /*#ingredients .back { margin-top: 2.5em; }*/





    #ingredients .spec { display: inline-block; background: green; margin:0 0.5em;}
    #ingredients .inactive { background: rgb(168, 168, 168); cursor:default;}
    #ingredients .ingredientFlag {   
          color: white;
          border-radius: 0.1em;
          font-size: 0.7em;
          padding: 0.2em;
          display: block;
          margin-right: 0.5em;
          text-align: center;
     }
     #ingredients .import {   
          background: #c74040;
     }
     #ingredients .our {   
          background: #56bd27;
     }
     .ingredientGroupHeader { text-align:center;background:#ebebeb; border-radius:0.5em; margin:1em!important;display: inline-block; width: 28%; padding: 0.5em 1em;}
    
    .green { color:green; }

    .specs { margin-left:0; }
    .specForm textarea { width: 100%; }
    .ingredientAllergyTable { display: table; }
    .ingredientAllergyTable .ingredientAllergyTableRow { display: table-row; }
    .ingredientAllergyTable div { display: table-cell; }
    .resetAllergyComponentSwitch { cursor: pointer; padding-left: 0.5em; color: red;}
    
    /*// INGREDIENTS LIST /////////////////*/
    .ingredient { padding: 0.5em; border-top: solid 1px #ebebeb;}
    .ingredient { color: black; }
    .ingredientCategory { margin-right: 1em; color:#aba9a9; text-transform: lowercase; font-weight: lighter; text-align: right; }

 
    

     /*// SPECS /////////////////////////*/
     .ingredientEnergyTable { display: table;  }
     .ingredientEnergyTableRow { display: table-row; }
     .ingredientEnergyTableRow div { display: table-cell; border: solid 1px #ebebeb; padding: 0.3em;}
     .ingredientEnergyTableRow:first-child { background: rgb(161, 161, 161); }
     .specsTitle {
          background: #b3afaf;
          margin: 1em 0;
          padding: 0.5em;
          border-radius: 0.5em;
     }
     #specsTable textarea { height: 10em; }
     .saveSpecBtn { background: green;  }

    /*// HELP ///////////////////*/
    .helpBody { padding: 3em 1em 1em 1em; }
    .helpBody p { margin: 0 0 3em 1em; }
    .imgMiddle {     margin: 1em auto; display: block; }
    .faq p:nth-child(even) { margin-bottom: 0;}
    .inlineElementHelp { height: 1.2em; }


    /*// MEDIA ///////////////////*/
    .mediaArea {
          padding: 1em;
          border: dashed 1px #c0c0c0;
          border-radius: 1em;
          margin-top: 1em;
    }
    .mediaItem {
          position: relative;
          width: 200px;
          height: 200px;
          overflow: hidden;
          display: inline-block;
          border-radius: 0.5em;
          margin: 1em;
          border: solid 1px darkgray;
          box-shadow: lightgrey 5px 5px 6px;
    } 
    .mediaItem img { 
          width:100%;
          position: absolute;
          top: 0;
          margin: auto;
     }
    .mediaRemoveBtn { padding: 0.1em;border: solid 1px lightgrey;z-index: 1;margin: 2px; position: absolute; text-decoration: none; background: white; border-radius: 5px; }
    .fa-link { color: grey; }
    .mediaRemoveBtn .fa-window-close { color: red; display: inline-block; margin: 0 0.2em;}
    .mediaFiletypeLabel { padding: 0 0.5em; display: inline-block; }
    .mediaPlaceholder { text-align: center; }
    .showMedia { color: green!important; } 
    .showMediaInactive { color: rgb(178, 178, 178); } 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px){ 
     .logo, form.logout, .help { display: none;}

     .topBar .btn {
          margin-left: 0;
          width: 45%;
          text-align: center;
      }

      .topBar .btn:nth-child(2) {
          margin-left: 0;
      }

      #searchBoxUser, #newIngredientName { width: calc(100% - 1em); }
      
      .ingredientGroupHeader  { 
          width: calc(100% - 4em);
          font-size: larger;
     }
}