.color-1{

    background-color:white; 
    color:navy
}
.affix {
    top: 0;
    width: 100%;
    z-index: 9997 !important;
}
.ui-widget-overlay {
    border-radius: 0px;
    opacity: 0.6;
    background-color: navy;
    z-index:9999 !important;
   
}
.link{
    color:navy;
    cursor:pointer;
    text-decoration:underline;
}
.link:hover{
    color:navy;
    cursor:pointer;
    text-decoration:normal;
}
.color-2{

    color:white;     
    background-color:navy;
} 
.navbar-inverse .navbar-nav > li > a {
    color:white;   
}
.color-3{

    color:black;
    background-color:white;

}
.color-4{
    color:black;
    background-color:lightgreen;
}    

.color-5{
    color:maroon;
    background-color:lightcoral;
}    


body {

    font-family: Helvetica, sans-serif;
    font-size:16px;
}
.panel_recipe{
    box-shadow: 0px 1px 1px rgba(255, 255, 255, 0.05);
    padding:10px;

}
.main {
    text-align:left; 
    max-width:1200px;
    margin:auto;
    padding-left:0px;
    padding-right:0px;


}

body>.wrapper {
    width: 100%;


}


legend {
    font-weight: bold;
}



fieldset {
    margin: auto;
    border-width: 0px;
}

.big_card{
    font-size:21px;
    padding:20px;
    margin-right:5px;


}
.balken-label{
    clear:both;
    padding-top:10px;
    //background-color:white;
}

.balken-container{ 

    min-height:30px;

    height:30px;

}
.balken{ 

    width:100%; 
    height:20px; 
    float:left; 
    z-index:1; 
}
.balken-front{ 
    width:20px; 
    height:20px; 
    opacity:0.5;
    transform:skew(0deg,-45deg); 
    -moz-transform:skew(0deg,-45deg); 
    -webkit-transform:skew(0deg,-45deg); 
    -o-transform:skew(0deg,-45deg); 
    margin-right:-100%; 
    margin-top:-10px; 
    float:left; 
    z-index:100; 
}
.balken-side{ 
    opacity:0.7;
    width:100%; 
    height:20px; 
    transform:skew(-45deg,0deg);
    -moz-transform:skew(-45deg,0deg); 
    -webkit-transform:skew(-45deg,0deg); 
    -o-transform:skew(-45deg,0deg); 
    margin-left:10px; 
    z-index:1; 

}
.button{
    margin-bottom:5px;
}
.stat_panel{

    overflow:hidden;
    padding:10px;
    background-color:wheat;
    color:black;
    padding-top:10px;
}
.kb{
    background-color:lightblue;
    text-align:center;
    margin-right:10px;
    cursor:pointer;
    font-family:Courier;
    font-size:18px;
    float:left;
    margin-bottom:5px;
    width:35px;
    margin-top:5px;
    
}
.action{
    font-size:14px;
    float:left;
    margin-right:10px;

}
.caption{
    color:black;
    margin-left:10px;
    margin-top:-2px;
    padding:0px;
    float:right;
    font-family:Courier;

}
.navi{
    background-color:white;
    padding:0px;
    margin-right:10px;
    cursor:pointer;
    font-family:Courier;
    font-size:14px;
    float:left;
    margin-bottom:5px;
    margin-top:5px;

}

.choose-alpha{
    background-color:white;
    padding:5px;
    margin-right:10px;
    cursor:pointer;
    font-family:Courier;
    font-size:21px;
    float:left;
    margin-bottom:5px;
    font-weight:bold;
    color:red;
}
.choose-loud{
    background-color:white;
    padding:5px;
    margin-right:10px;
    cursor:pointer;
    font-family:Courier;
    font-size:21px;
    float:left;
    margin-bottom:5px;
    font-weight:bold;
    color:green;
}    
.add_bag{
    font-size:10px;
    margin-right:10px;
    float:left
}
.hear{
    font-size:10px;
    float:left
}
.edit{
    font-size:10px;
    float:left;
    margin-left:10px;    
}
.rescan{
    font-size:10px;
    margin-left:10px;  
    float:left
}
#head  {

    overflow:hidden;
    width:"100%";

}
#head > div {
    display:inline;

}
div .reihe:hover{
    background-color:white;

}
div .reihe{
    font-size:20px;

}
div .word:hover{
    background-color:#eeeeff;
    cursor:pointer;

}
.tabelle{
    width:100%;

    overflow:hidden;

}
.spalte{
    width:50%;
    float:left;
    overflow:hidden;

}
.spalte-rechts{

    overflow:hidden;
    display:block;
    float:right;
}
.trilte{
    width:25%;
    float:left
}
.navi_large{
    width:48%;
    padding:1px;

}
.kategorie{

    width:180px;
    margin-left:5px 
}
.zutat{
    font-size:14px;
    margin:0.5em;
    padding:0em;
    line-height:20px;

}
#zutatencontainer{
    max-width:450px;
    padding:0em;
    margin:0em;
}
#add_zutat {
    cursor: pointer;
    height:20px;
    margin-left:0em;


}
#erase{
    cursor: pointer;
}
.zutat-neu{
    margin:0px;
    padding:0px
}
.zutat-box{
    margin:0px;
    padding:0px;
    display:block;
    width:100%
}
.arrow {
    float:right;
    cursor: pointer;
    height:auto;
    margin:0px;
    margin-right:5px;
    line-height:10px;
    color:black;
    font-size:14px;
}
textarea{
    width:100%;
}
.colorinput{
    margin-bottom:20px;

}
.red{
    color:red
}
.pager{
    margin:0px;
    margin-right:5px;

}
.row{
    
   margin-bottom:10px; 
}
.custom_height{
        height:400px;
    }
@media (max-width:1100px) {
    .main {
        padding-left:10px;
        padding-right:10px;
        background-color:white;
    }
    .subpiccontainer{

        width:350px;
    }
    .subpiccontainer #piccontainer{
        background-color:transparent;
        width:150px;
    }
    #piccontainer{
        width:350px;
    }
    .tabelle{
        width:100%;

    }
    .spalte{
        width:50%;
        float:left;

    }

    .navi_large{
        width:48%;
        padding:1px;

    }
    .spalte input[type="text"]{
        width:100%;
    }
    .caption{
        color:blueviolet;
        display:none;
    }
}


@media (max-width:639px) {
    .main {
        padding-left:1px;
        padding-right:1px;
        background-color:white;
    }
    .subpiccontainer{

        width:100%;

    }
    .subpiccontainer #piccontainer{
        background-color:transparent;
        width:100%;

    }
    #piccontainer{
        width:100%;
    }
    .tabelle{
        width:100%;

    }
    .kb{
        
        font-size:12px;    
    }  
    .tiny .ui-button-text-only .ui-button-text {
        padding: 2px;
       
        font-size:13px;
        width:100%;
    }
     #pagerwidth .ui-button-text-only .ui-button-text {
        padding: 0px;
        font-size:13px;
        width:100%;
    }
    .col-sm-6{
        padding:0px;
        margin:0px;

    }
    .col-sm-2{
        padding:0px;
        margin:0px;

    }
    
     .col-sm-4{
        padding:0px;
        margin:0px;

    }
    .col-xs-6{
        

    }
    .col-xs-10, .col-xs-12{
       
    }
    .navi{
        width:40px;
        padding:1px;
        font-size:7px;
    }
    #jump_page{
       font-size:11px;
       
    }
    .col-xs-2{
        padding:0px;
        padding-left:10px;
        margin:0px;

    }
    .action{
        font-size:10px;
        float:left;
        margin-right:2px;
    }
    .caption{

        display:none;    
    }
    .button-xs{
       
        margin:2px;
    }
     .bag{
        width:100%;
    }
    .advance{
        width:100%;
    }

}
@media (max-width:500px) {
    
    .custom_height{
        height:200px;
    }
    .main {
        padding-left:1px;
        padding-right:1px;
        background-color:white;
    }
    
    .subpiccontainer{

        width:100%;

    }
    .subpiccontainer #piccontainer{
        background-color:transparent;
        width:100%;

    }
    #piccontainer{
        width:100%;
    }
    .tabelle{
        width:100%;

    }
    .navi{
        font-size:11px;

    }
    #jump_page{
        font-size:7px;
    }
    .action{
        font-size:9px;
        float:left;
        margin-right:2px;   
    }

    .kb{
        background-color:white;
        font-size:12px; 
        margin-top:0px;
    }        
    .col-xs-1{
        padding:0px;
        margin:0px;

    }
    .col-xs-11{
        padding:0px;
        margin:0px;

    }
    .col-xs-12{
        padding:2px;
        margin:2px;

    }
    .col-sm-4{
        padding:0px;
        margin:0px;

    }
    .col-sm-6{
       padding:5px;
       margin:0px;
       
    }
    .col-sm-2{
        padding:0px;
        margin:0px;

    }
    .col-sm-6{
        padding:0px;
        margin:0px;

    }
    #marker{
        width:100%;
    }
    .col-xs-10, .col-xs-12{
        
    }
    .user-stat .col-xs-12{
        padding-left:10px;
         
    }
    .col-xs-2{
        padding:0px;
        margin:0px;

    }
    .col-xs-6{
        padding:0px;
        margin:0px;

    }
    .ui-widget{
        padding:0px;
        margin:0px;
    }
    .row{
        margin-bottom:5px;
    }
    #jump_page{
        margin:0px;
        padding:0px;

    }
    #pagerwidth .navi{
        font-size:11px;
        width:100%;
    }
    #xs-container .navi{
        font-size:11px;
        width:100%;
    }
    #xs-container .jump_page{
        font-size:45em;
        width:3em;
        padding:0px;
        margin:0px;
        top:0px;
        line-height:2em
    }
    .tiny .ui-button-text-only .ui-button-text {
        padding: 2px;
        font-size:13px;
        width:100%;
    }
    #pagerwidth .ui-button-text-only .ui-button-text {
        padding: 0px;
        font-size:13px;
        width:100%;
    }
    #pagerwidth  #jump_page{
        display:none;
    }
    #xs-container .ui-button-text-only .ui-button-text {
        padding: 0px;
        font-size:13px;
        width:100%;
    }
    .ui-button{
        padding:0px;
        margin:0px;
    }
    #bookmark_dialog{
        font-size:12px;
    }
    #add_bag_dialog{
        font-size:12px;
    }
     #bookmark_dialog{
        font-size:12px;
    }
    #login-dialog{
        font-size:12px;
    }
    .bag{
        width:100%;
    }
    .advance{
        width:100%;
    }
    .caption{

        display:none;    
    }
    .button{
       
        margin:0px;
        background-color:white;
    }
     .button-xs{
       margin:2px; 
       
    }
    
    #xs-search input[type="text"] {
         width:auto;
    }
    
    input[type="text"], input[type="password"]{
        width:100%;
        margin-left:2px;
        margin-right:2px;
    }
    
    
}