/*Color variables: todo use tools to add backwards compatibility*/
:root {
    --color-light-blue: #7cbef3;
    /*--color-light-blue-new: #e4f3ff;*/
    --color-light-blue-new: #e6f7ff;
    --color-light-blue-active: #68a3d2;
    --color-light-blue-old: #e4f0ff;
    --color-light-blue-active-new: #d6eafb;
    --color-dark-blue: #0054da;
    --color-dark-blue-new: #517ec5;


}





html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}


#wrapper {
    /*Prevent all horizontal scrollbars (used to fix 100vw header and index items)*/
    
    max-width: 100vw;
    overflow-x: hidden;


}

body {
    /*font-family: Archivo, sans-serif;*/
    font-family: "Open Sans", sans-serif;
    font-size: 1.5em;
    background: #ffffff;
}

body.first-page {
    background: #e5e5e5;
}

/*Boostrap container width on large displays (desktop)*/
/*Includes 15px padding on each side*/
/*Default: 1170*/
@media (min-width: 1200px) {
    .container{
        max-width: 970px;
    }
}

#wrapper {
    min-height: 100%;
    position: relative;
    <!--[if IE 6]>
    height:100%;
    <![endif]-->
}



main {
    padding-bottom: 102px;  /* height of footer + 50 px for good measure */
}

#logo {
    margin-top: -1.4em;
    /*Use padding to compensate for the margin*/
    padding-bottom: 1.4em;
    /*margin-left: -1.3em;*/
}

/*Fix squished logo on tablet view*/
@media (max-width:990px) and (min-width:768px) {
    #logo {
        margin-left: -1.1em;
    }

}

#login-container {
    margin-top: 5px;
}

#login {
    position: absolute;
    top: -6px;
    /*less than 100 to account for the padding*/
    width: 90%;
    right: 18px;
    z-index: 1001;
    top: 4.3em;
    background: #fff;
    border-radius: 1%;
}

#login > p {
    text-align: center;
    padding: 1em;
}

#login > p > .btn {
    margin-top: 1em;
    color: inherit;
}


#login label {
    text-align: left;
    margin-left: 0.2em;
}

.login-header {
    padding-left: 1em;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    margin-top: 1em;
    background-color: #c6e68e;
    color: black;
    margin-bottom: 1em;
    font-weight: 600;
}

/*Hide asterisk behind field names in the login UI,
  because it's obvious those fields are required*/
#login .asteriskField,
.privacy-checkboxes .asteriskField {
    display:none;
}

#div_id_username .asteriskField{
    display:none;
}

#div_id_password .asteriskField{
    display:none;
}

/*Set proper widths for the login forms
  To ensure taht both buttons fit on one line
  and the text fits inside the buttons.

  To make sure both of the above is true, the
  login button needs to have slightly smaller padding on the letft and right*/
.btn-login-form-login {
    width: 38%;
    padding: 6px 9px;
    margin-top: 1em;
}

.btn-login-form-register {
    width: 59%;
}

.vertical-align {
    display: flex;
    align-items: center;
}

.vertical-align-container {
    display: flex;
    align-items: center;
}

.vertical-align-bottom {
    display: flex;
    align-self: flex-end;
}


.header-buttons-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: -14px;
}

.header-buttons-container a,
.header-buttons-container a:hover{
    text-decoration: none;
}


#main-buttons{
    margin-top: 0.5em;
    float:right;
}


#main-buttons a:hover {
    text-decoration: none;
}


/* space-evenly alternative
#main-buttons-search{
    padding-left: 40px;
}

#main-buttons-user{
    padding-right: 40px;
}
*/


.main-button:hover {
    cursor: pointer;
}

.icon-small {
    width: 8em;
    height: 8em;
    margin: auto;
    margin-top: 0.9em;
    margin-bottom: 0.9em;
}

.icon-small> img:nth-child(2) {
    margin-left: 2em;
}

/*
#frontpage-table img.cross-icon{
    height: 36%;
}
*/
header {
    padding-top: 3em;
}


/*Only show header background on non-phones. Phones get a different design*/
/*@media (min-width: 768px) {*/
    header:after {
        /*background-color: #eaeaea;*/
        background: linear-gradient(#a5d04b, #c9e894);
        content : " ";
        height: 120px;
        /*Has to be 99, not 100vw or 99.5, else chrome ets a scroll bar at the bottom */
        width: 100vw;
        background-size: cover;
        position: absolute;
        top:0;
        left: 0;
        z-index: -1;
        /* Needs some padding, otherwise
         * we get a horizontal scrollbar at the bottom
         */ 
        padding-left: 1em;
        padding-right: 1em;
        padding-bottom: 3em;
    }
/*}*/

header h1 {
        letter-spacing: 0.5rem;
}


.index {
    /*background : url("/static/izdelki/resources/img/index/pozdravni_banner.jpg") no-repeat center;*/
    height: 651px;
}


.between-arrows {
    margin-top: 4em;
    color: #fff;
}

.arrow-explanation {
    margin-top: 7em;
    color: #fff;
    font-style: oblique;
}

.arrow-explanation > .text-center > a,
.arrow-explanation > .text-center > a:visited,
.arrow-explanation > .text-center > a:active,
.arrow-explanation > .text-center > a:hover {
    color : #fff;
    text-decoration: none;
}

#searchBtn {
    padding: 0;
}


.index-add-icon{
    margin-top:2em;
}
.row-bordered {
    border-top: 2px #d1d1d1 solid;
}

.last-row {
    border-bottom: 2px #d1d1d1 solid;
}



.oblique {
    font-style: oblique;
}


.banner h2 {
    margin-bottom: 1.5em;
}



#namen .col-sm-4:nth-child(2) {
    margin-top: 5em;
}



#avtorji .col-sm-4:nth-child(1) {
    margin-top: 2em;
}

#avtorji > .logos {
    margin-top: 3em;
}

#avtorji > .logos img {
    width: 160px;
}

#database {
    padding-top: 2em;
}

#database img {
    width: 100%;
}

#database > .row:nth-child(2) {
    margin-top: 5em;
}

#database h3 {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
}

footer {
    position: relative;
    color: #ffffff;
    font-size: 1.1em;
    width: 100%;
    flex-shrink: 0;
    bottom: 0;
    padding-top: 15px;
    padding-bottom: 15px;

}

footer a {
    color: #9c9c9c;
}

footer a:hover {
    text-decoration: none;
    
    color: #656565;
}

/*testiraj na IND8120*/
#product-img {
    width: 100%;
    padding: 2px;
    background-color: #e6f7ff;
    border: 1px solid #d1d1d1;
    margin-bottom: 13px;
    background-repeat: no-repeat;
    background-position: center center;
    
    display:flex;
    height:293px;
 }

#product-img.has-image {
    background-color: #ffffff;
}

#product-img.has-image-detail {
    background-color: #ffffff;
}



/*Displays the entire image without cutting it off*/
#product-img img {
    max-height: 100%;
    max-width: 100%;
    margin: auto;
    align-self: center;
}



/*Hide the + icon, but show the delete icon*/
#product-img.has-image img {
    display: none;
}

#product-img.has-image img#remove-product-photo,
#product-img.has-image-detail img#remove-product-photo {
    display: block;
}


#pick-photo {
    position: absolute;
    left: -99999px;
}

#remove-product-photo {
    position: absolute;
    right: 20px;
    top: 45px;
    display: none;
}



.product dt {
    margin-top: 1em;
}

.product-main {
    padding-right: 3em;
    padding-top: 0.9em;
}

.product-main.no-padding-top {
    padding-top: 0;
}


.product-sidebar h2,
.product-main h2,
.product-first h2 {
    width: 100%;
    background: #c8e791;
    color: 555;
    padding: 0.4em;
    padding-left: 0.5em;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 1em;
    font-weight: bold;
}

.product-main         .add-help-text,
.product-sidebar      .add-help-text,
.product-sidebar-help .add-help-text,
.product-first .add-help-text,
h1.product-name{
    font-size: 2.05em;
    font-weight: 300;
    font-family: "Open Sans", sans-serif;
    margin-top: 0;
    margin-bottom: 0.5em;
    display: inline-block;
}





.margin-top-58 {
    margin-top:58.5px
}

.product-main .add-help-text.add-help-text-no-user {
    margin-top: 35px;
}

.add-label-row .product-main .add-help-text {
    margin-bottom: 29px;
}

.add-label-row .product-main .add-help-text.small-margin {
    margin-bottom: 16px;
}

/*Overwrite the above top margin for the first header text, since that already gets margin elswhere*/
.product-first .add-help-text,
.about-pages h1,
h1.product-name {
    margin-top: 0;
}

.product-main    .add-help-text-top {
    margin-top: 0;
}



.add-help-text-small {

    font-size: 1.5em;
    font-weight: 300;
    font-family: "Open Sans", sans-serif;
    margin-top: 1.04em;   
}


.product-sidebar-help {
    margin-top: 62px;
}

.detail-sidebar {
    margin-top: 0.8em;
}

.add-help-text-sidebar {
    color: gray;
    opacity: 0.65;
}

.add-help-text-sidebar.add-help-text-top {
    margin-top: 0.6em;
}

.add-help-text-sidebar.add-help-text-middle {
    margin-top: 0.6em;
}

.add-help-text-sidebar.add-help-text-bottom {
    margin-top: 0.6em;
}


h2.product-sidebar-image-header-detail {
   margin-top: 0.9em;
}

#product-sidebar-image-header {
    margin-top: 13.5px;
}

.product-sidebar-details {
    margin-top: 0.9em;
}


/*Hide the help text in a single column (small screen/mobile) layout*/
@media (max-width: 992px) {
    .product-sidebar-help {
        display: none;
    }
}

/*Instead, show a help button that is otherwise hidden*/
@media (max-width: 992px) {
    #add-help-icon {
        display: block;
        text-align: right;
    }
}
@media (min-width: 992px) {
    #add-help-icon {
        display: none;
    }
}

#add-help-icon-text {
    text-align: left;
}

#add-help-icon .glyphicon{
    opacity: 0.5;
}




.product-main h4 {
    margin-top: 2em;
    font-size: 1em;
    font-weight: 600;
}


#reset-product {
    /*With help text in the body*/
    /*height: 4.56em;*/

    /*With help text on the side*/
    height: 0.85em;

    width:100%;
    position: relative;
}

#reset-product  img {
    position: absolute;
    bottom: 0;
    left: 95%;
}

.product-table td:first-child {
    width: 50%;
}

.product-table td:nth-child(2), .product-table td:nth-child(3), .product-table td:nth-child(4) {
    width: 16.6%;
}


.label-edit-components-table td:nth-child(2) {
    width: 32%;
}

.product-table-unit-select {
    border: 0;
    outline: 0;
    font-weight: normal;
    margin-right: 0.3em;
    font-size: 0.92em;
    color: #517ec5;
}

.product-table-unit-select:focus {
    outline: none;
}

.product-table tr:first-child th {
    text-align: center;
}

.product-table td {
    text-align: right;
}

.product-table td {
    margin-bottom: 0.5em;
    font-size: 0.95em;
}

.product-table th {
    font-size: 1em;
}

.product-button {
    margin-top: 0.1em;
    /*margin-left: 1%;*/
    width: 100%;
    background: #e6f7ff;
    color: #0051da;
    font-weight: bold;
    border-radius: 0;
}

.product-button img {
    margin-right: 5px;
}

.product-button:hover,
.product-button:active,
.product-button:focus {
    background: #d6eafb !important;
    color: #0051da !important;
}

table.add-product-table tr td:nth-child(1) {
    width: 78.5%;
}


.method-mass-container {
    white-space: nowrap;
    margin-left: -3px;
}

.edit-delete-item {
    position: absolute;
    top: -22px;
    right: 15px;

}


.align-right-ingredient-table {
    float: right;
    font-family: monospace;
}

/*Add page mobile styles*/
.mobile-only {
    display: none !important;
}


@media (max-width: 992px) {
    .product-main {
        padding-right: 15px;
    }

    .product-sidebar-margin-top {
        margin-top: 3em;
    }

    .mobile-only {
        display: inline-block !important;
    }

    .hide-on-mobile {
        display: none !important;
    }

    .product-main {
        margin-top: 2em;
    }

    .add-label-container .product-main {
        margin: 0;
    }

    .edit-delete-item {
        top: -35px;
    }
}

@media (max-width: 768px) {
    .product-main {
        padding-right: 15px;
    }

    #help-product {
        display: none;
    }

    .components-help-text {
        display: none;
    }


    table.add-product-table tr td:nth-child(1) {
        width: 50%;
    }

    .tooltip {
        display: none !important;
    }

    .align-right-ingredient-table{
        display: none !important;
    }

    .add-label-container .product-main {
        margin: 0;
    }

    .hide-on-very-small {
        display: none !important;
    }


}


#login button {
    color: white;
}


.product-button-selected {
    margin-top: 0.1em;
    margin-left: 1%;
    background: #7f7f7f;
    font-weight: bold;
}



#dim {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    z-index: 1000;
}


/*Same as dim, but with a bigger z index to make sure it covers the login button/name*/
#dim-search {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    z-index: 2000;
}


#login-button {
    z-index: 1001;
    position: relative;
}

#search-form {
    margin-left: -1px;
}



#search-results {
    margin-top: 1.5em;
}


#login-container {
    /*float: right;*/
    /*margin-right: -1.8em;*/
}

.login-user-name {
    font-weight: bold;
    white-space: nowrap;
}

/*Ussually, text larger than the container div overflows to the right
This class makes it overflow equaly to both left and right, so that the verall text is centered
https://stackoverflow.com/a/28233945*/
.center-overflow-text {
    display: flex;
    justify-content: center;
    position: relative;
    white-space: nowrap;
    text-align: center
}

.center-overflow-text:before {
    content: "";
    margin-left: -100%;
}

.center-overflow-text:after {
    content: "";
    margin-right: -100%;
}


#login form {
    padding: 1em;
}

tr.clickable-row {
    cursor: pointer;
}


/* BS TABLES */

.table-hover tbody tr:hover td {
    background-color: #e5e5e5;
}

.table > thead > tr > th {
   border-bottom: 2px solid #d1d1d1;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
   border-top: 1px solid #d1d1d1;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
   border-color: #d1d1d1;
}


/* BS PAGINATION */
.pagination > li > a,
.pagination > li > span {
    border-color: #d1d1d1;
    color: #7f7f7f;
}

.pagination > li.active > a,
.pagination > li.active > a:focus,
.pagination > li.active > a:hover,
.pagination > li.active > span:focus,
.pagination > li.active > span:hover {
    background-color: #7f7f7f;
    color: #fff;
    border-color: #7f7f7f;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    background-color: #eaeaea;
    color : #7f7f7f;
    border-color: #eaeaea;
}

.highlight {
    background-color: #faffab;
}

/*.business-only {*/
    /*display: none;*/
/*}*/

/*#register .help-block {*/
    /*display: none;*/
    /*font-size: 0.75em;*/
/*}*/

/*#register .form-control-feedback {*/
    /*display: none;*/
/*}*/

.unit-change .popover {
    border: 1px solid #d1d1d1;
    padding: 0;
}

.unit-change .popover-content {
    padding: 0;
    background-color: #eaeaea;
    text-align: center;
    font-size: 0.9em;
    border: none;
}

.unit-change .popover.top .arrow:after {
    border-top-color: #eaeaea;
}

.unit-change .popover.top .arrow {
    border-top-color: #d1d1d1;
}

.unit-change .popover-content ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.unit-change .popover-content li {
    display: block;
    width: 100%;
    padding: 0.3em 0.8em;
    background-color: #eaeaea;
    color: #7f7f7f;
}

.unit-change .popover-content li:hover,
.unit-change .popover-content li:active
{
    background-color: #7f7f7f;
    color: #eaeaea;
    cursor: pointer;
}

.unit-change .product-table-unit-select {
    font-weight: normal;
    cursor: pointer;
}




.add-button {
    display:inline-block;
    border-radius: 0;
    width: 100%;
    background-color: #e6f7ff !important;
    box-sizing: border-box;
}

.add-button:hover,
.add-button:active,
.add-button:focus
 {
    background-color: #d6eafb !important;
}



@media (min-width: 992px) {
    .add-button {
        display:inline-block;
        border-radius: 0;
        background: #e6f7ff;
        box-sizing: border-box;
    }

}

#labelForm .add-button {
    background: #e5e5e5;
}



.recipeMenu{
    box-sizing: border-box;
}

.recipeMenu label {
    color: #0051da;
    margin-left: 0.25em;
    font-weight: 600;
}

.searchIngredients-input {
    width: 100%;
    height: 2em;
}


/* Ingredient searchbox ingredient names*/
.searchbox-text {
    width:270px;
    padding-right: 30px;
    white-space: nowrap;
    display: inline-block;
    font-weight: 600;
    font-family: "Open Sans", sans-serif !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


.list-header {
    margin-bottom: 0.5em;
    font-weight: 600;
}

input.inputLikeTd {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    height: 100%;
}

td.containsInput {
    margin: 0; padding: 0;
    padding-left: 1em;
}


table.add-product-table tr td:nth-child(3) {
    margin: 0;
    padding-left: 1em;
    border-left: 1px solid #d1d1d1;
}

table.add-product-table input.inputLikeTd {
    text-align: right;
}

table.add-product-table tr:last-of-type {
    border-bottom: 1px solid #d1d1d1;
}

table.add-product-table tr td:first-child::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #7f7f7f;
    border-radius: 50%;
    margin-right: 7px;
    margin-bottom: 2px;
}

table#listMethod.add-product-table tr td:first-child::before {
    margin-right: 0;
}

/*
Hide the dot before cooking method, since there can only be 1 at a time
*/
#listMethod.add-product-table tr td:first-child::before {
    width: 0px;
    height: 0px;
}

#listMethod.add-product-table th {
    font-weight: 600;
}

#listMethod.add-product-table th:last-child {
    display: inline-block;
    width:0;
    margin-right: -1em;
}






#listComponents {
    border-bottom: none;
    border-right: none;
}
#listComponents tr:last-child > td:last-child {
    border-bottom: none;
    border-right: none;
}

.label-edit-components-table input{
    border: none;
}


input.productInput,
div.productInput {
    width: 100%;
    border: none;
}

dl.product input.productInput,
dl.product div.productInput {
    padding-top: 5px;
    padding-bottom: 5px;
    background: #e6f7ff url("/static/izdelki/resources/img/add_small.png") no-repeat center;
    border: 1px solid #d1d1d1;
}

#listComponents #port-header {
    background-color: #e6f7ff;
}

#inputPortionSize{
    background: #e6f7ff url("/static/izdelki/resources/img/add_small.png") no-repeat center;
}

#inputPortionSize:focus{
    background: #e6f7ff;
}


#inputPortionSize.nonempty{
    background: #e6f7ff;
}

#labelForm input{
    background: #e6f7ff url("/static/izdelki/resources/img/add_small.png") no-repeat center;
}

#labelForm input:focus{
    background: white;
}


#labelForm input.nonempty{
    background: white;
}


#inputPortionSize:focus + span#inputPortionSizeUnits::after{
    content:" g";
}

#inputPortionSize.nonempty + span#inputPortionSizeUnits::after{
    content:" g";
}

#componentsInput{
    background: #e6f7ff url("/static/izdelki/resources/img/add_small.png") no-repeat center;
    height:1.4em;
}

.componentsInput-container {
    background-color: #e6f7ff;
}

#componentsInput::placeholder {
    opacity: 0;
}

#componentsInput:focus{
    background: #ffffff;
}

#componentsInput:focus::placeholder {
    opacity: 0.5;
}

#componentsInput.nonempty{
    background: #ffffff;
}

#componentsInputLabel{
    background-color: inherit;
    background: url("/static/izdelki/resources/img/add_small.png") no-repeat center;
    /*Needs to be tall enough for the + icon to fit inside*/
    height:1.7em;
}

#componentsInputLabel::placeholder {
    opacity: 0;
}

#componentsInputLabel:focus{
    background: inherit;
}

#componentsInputLabel:focus::placeholder {
    opacity: 0.5;
}

#componentsInputLabel.nonempty{
    background: inherit;
}

dl.product input.productInput:focus,
dl.product div.productInput:focus {
    background: #ffffff;
    border : 1px solid #d1d1d1;
}

dl.product input.productInput.nonempty,
dl.product div.productInput.nonempty {
    background: #ffffff;
    border : 1px solid #d1d1d1; 
}

/*dl.product input.productInput:not([value=""]) {*/
    /*background: #ffffff;*/
/*}*/

/*dl.product input.productInput[value=""] {*/
    /*background: #e5e5e5 url("/static/izdelki/resources/img/add_small.png") no-repeat center;*/
/*}*/


#inputPortionSize {
    width: 3em;
    text-align: right;
}

#ingredientsDetailTable > tbody > tr > td.weight:last-of-type {
    text-align: right;
}

#ingredientsDetailTable,
#product-img.product-img-detail {
    margin-bottom: 50px;
}

.error {
    color: #ff0000;

}

.error-large {
    color: #ff0000;
    font-size: 125%;
}


.dropdown-menu.dropdown-add {
    border-radius: 0;
    width: 100%;
    background-color: #e6f7ff;
    z-index: 10000; /*Make sure this dropdown is always above anything else*/
}
.dropdown-menu.dropdown-add li {
    border-bottom: 1px #ffffff solid;
    background-color: #e6f7ff;
    /*color:  #0054da;*/
    color: #517ec5;
    font-size: 1.1em;
    padding: 0.5em;
}

.dropdown-menu.dropdown-add li:hover {
    /*color: #517ec5;*/
    color: #0054da;
    background-color: #d6eafb;
    cursor: pointer;
}

.allergens-add,
.method-add {
    width: 100%;
}

#listAllergens tr td:first-child {
    width: 100%;
}

#listAllergens tr td:last-child {
    padding-right: 5px;
    text-align: right;
}

#listAllergensLabel td:last-child {
    padding-left: 10em;
}

#listAllergensLabel {
    margin-bottom: 3em;
}

#listMethod tr:first-of-type th {
    border-top: none;
}

#listMethod tr:first-of-type th:last-child {
    text-align: center;
}

dt.required:after,
.add-label-header label.required:after {
    content: '*';
}

dl.product ul.errorlist {
    list-style-type: none;
    color: #b90000;
    margin: 0;
    padding: 0;
}

dl.product ul.errorlist > li {
    margin: 5px 2px;
}






.dl-horizontal dt { text-align: left; }

.box-button {
    margin-top: 0.1em;
    width: 100%;
    background: #eaeaea;
    font-weight: bold;
}

.row.fix {
  display: flex;
  flex-wrap: wrap;
}

.dashboard-empty-text {
    color: gray;
}

.product-img-dash {
    width: 100%;
    padding: 2px;
    background-color: #e6f7ff;
    background-repeat: no-repeat;
    background-position: center center;
    
    overflow: hidden;
}

.product-box {
    width: 100%;
    border: 1px solid #d1d1d1;
    background-color: #e6f7ff;
   /*cursor: pointer;*/
}

.product-box:hover {
    border: 1px solid #bababa;
    background-color: #d6eafb;
}

.product-box:hover .product-img-dash,
.product-box:hover .dash-product-img-bg {
   background-color: #d6eafb; 
}

.product-box dl {
    margin: 0 0.5em;
}

.product-box dt {
    font-weight: 400;
}


.dash-item-name-container{
    position: relative;
    padding: 0.2em;
    margin-bottom: -0.95em;
    width: 100%;
    font-weight: 600;
    display: block;
    height: 1.5em;
    margin-top: 2em;


    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-box-product-name {
    position: absolute;
    bottom: 0;

}
.dash-img-container{
    vertical-align: middle;
    float:none;
    text-align: center;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.dash-img-container-empty-add{
    vertical-align: middle;
    float:none;
    text-align: center;
}


.dash-img-container-empty-add img{
    /*Vertically center the + icon in dashboard products with no image*/
    padding-top: 4.6em;
    opacity: 0.3;
}



.dash-img-container-empty{
    height:18em;
    vertical-align: middle;
    float:none;
    text-align: center;

}


.dash-product-img-bg {
    width: 100%;
    background-color: #e6f7ff;
}



 .dash-product-img {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
}


.dash-box-container .img-responsive {
    display: block;
    width: auto;
    max-height: 100%;
}

.product-main-dash{
    margin-bottom: 15px;
}


hr.dash-line {
    color: #9c9c9c;
    opacity: 0.5;
    background: #9c9c9c;
    font-size: 0;
    border: 0;
    height:2px;
}

.dash-line.dash-line-bottom {
    margin: 0;
}

.img-centered {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto; 
    margin: auto;
    position: relative;
}



.pick-photo-dash {
    position: absolute;
    left: -99999px;
}


.dashboard-components-box{
    font-size: 0.7em;
    white-space: nowrap;
    padding: 0.2em;
    opacity: 0.5;
}

.dashboard-item-container {
    display: flex;
    flex-direction: column;
}

.dashboard-item-container .product-box.container {
    display: flex;
    flex-direction: row;
}



.dashboard-header .btn {
    background-color: #e6f7ff;
    /*color: #517ec5;*/
    color: #0054da;
    font-size:14px;
}

.dashboard-header .btn:hover {
    color: #0054da !important;
}

.dashboard-header-name {
    margin-left: 1em;
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



.dl-horizontal dd{
    white-space: nowrap;
    margin:0;
}

.dl-horizontal dt{
    width:60%;
}

#profile-info td {
    padding-left: 2em;
}


/*#index-main-buttons .text-light-gray*/
.text-light-gray {
    color: #d1d1d1;
}

a.no-hover:hover,
a.no-hover:visited,
a.no-hover:link,
a.no-hover:active{
    text-decoration: none;
    color: inherit;
}


#search-button{
    background-color:#0054da; 
    border-color:#0054da; 
    /*Make the button a rectangle*/
    padding-left: 20px;
    padding-right: 20px;
}

#search-container {
    margin-top: -5px;
}


#search-new {
    position:absolute;
    bottom: -55px;
    width:300px;
    z-index: 5000;
}


/*CSS hack to draw a triangle above the search input box
  First, use CSS to draw a triangle, as explained here:
  https://css-tricks.com/snippets/css/css-triangle/

  This gives us a filled triangle of a single color, but we would just like the borders of it colored
  To do this, we draw two triangles:
  First, we draw a colored triangle (in :after), 
  then draw a white triangle of the same size 1px below it (in :before)*/
#search-new:after{
    content:" ";
    width: 0; 
    height: 0; 
    /*The two transparent borders determine the shape of the triangle
      The smaller the size, the sharper the triangle
      Each border changes the angle of one triangle edge
      If we want both the left and right edge to look the same, the numbers should be the same*/
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    
    /*Determines the size (height) of the triangle.
      Should always be the same as the size of the smaller triangle*/
    border-bottom: 21px solid #ccc;

    /*Position the triangle. Use left:2px, 
      because positioning it exsactly on the left border looks weird*/
    position: absolute;
    left: 2px;
    top: -20px;
    /*Must be lower than the z-index of the triangle below*/
    z-index: 99;
}

/*Not supported in Edge or IE yet.
  They won't get a blue outline on the triangle when selecting the search field*/
#search-new:focus-within:after{
    border-bottom: 21px solid rgba(102,175,233,.6);
}

#search-new:before{
    content:" ";
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 21px solid #fff;
    position: absolute;
    left: 2px;
    top: -19px;
    z-index: 100;
}


/*Do the same for the login box
  Has problems interacting with jquery-ui collapse() function used to toggle login.
  The triangle only appears after the animation finishes*/
@media (min-width: 768px) {
    #login-arrow:before{
        content: " ";
        width: 0px;
        height: 0px;
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-bottom: 14px solid #fff;
        position: absolute;
        z-index: 10000;
        right: 27px;
        top: 51px;
    }
}



#search{
    border-color:#757575;

    overflow: hidden;
    /*We first set max width to 0 to make a hidden searchbar, then animate that
    to 200px with the show-search class and css transitions*/
    max-width: 0;
    width: 200px;
    
    /*Hide the element initially*/
    opacity: 0;
    padding: 0;
    
    /*Make sure the searchbar slides from right to left*/
    /*
    position: absolute;
    right: 0;
    */
   
    /*Make sure the searchbar slides from left to right*/
    position: absolute;
    left: 100%;
    top:0;
    /*by default, the above puts it on the right edge of the search button
    We want it to expand from the left edge, so we add some padding*/
    /*
    margin-right: 40px;
    */
    /*We also need opacity transitions*/
    /*This one fires going from show to hide
    We want opacity to be at 1 until the element is fully collapsed*/
    transition: max-width 0.5s, opacity 0.5s step-end;

}

#search.show-search {
    opacity: 1;
    max-width: 200px;
    /*We also need opacity transitions*/
    /*This one fires going from hide to show
    We want opacity to instantly jump to 1, so that we can see the expanding animation*/
    transition: max-width 0.5s, opacity 0s;

    

    /*Increase the z-index to make it show up over the dimmed background
    The dim has a z-index of 2000, so this needs to be higher*/
    

    z-index: 2002;

}

#search-button.show-search {
    /*Increase the z-index to make it show up over the dimmed background*/
    /*The z index also needs to be hiher than the search bar, otherwise the
    bar would overlap it.*/
    z-index: 2002;
}

/*Align search button with the right column*/
#search-bar{
    margin-left:-22px;
}


.glyphicon-white{
    color:white;
}

#namen {
    color:#d6d6d6;
}

#avtorji {
    color:#d6d6d6;
}


#img-oznacba{
    opacity: 0.6;
}

#img-author {
    opacity: 0.6;
}

#search-no-results{
    font-size: 2em;
    margin: auto;
    text-align: center;
}




.highlight-result{
    font-weight: bold;
}

/*
.removeImg,
.removeComponent {
    opacity:0.5;
}
*/

.removeComponent {
    margin-right: 7px;
}


.add-product-img {
    padding-right: 0.5em;
}

.add-product-focus{
    color: #fff;
    background-color: #7f7f7f;
    border: 0;
}


.add-product-focus:hover{
    color: #fff;
    background-color: #7f7f7f;
    border: 0;
}

.product-no-ingredients {
    opacity: 0.5;
}


.compare-input {
    width: 3em;
    text-align: right;
    border-width:1px;
    padding: 0px;
    /*If we want the component table to not change size,
      The compare input boxes must be the same size as before comparing.
      Since we add 1px of border, we need to take away 1px of margin*/
    margin: -1px;

}


th a {
    color: inherit;
    text-decoration: none;
    :hover = none;
}

th a:hover {
    color: inherit;
    text-decoration: none;
}

th a:active {
    color: inherit;
    text-decoration: none;
}

th a:focus {
    color: inherit;
    text-decoration: none;
}



tr.searchtable th span.selected {
    color: black;
}

.searchtable {
    color: #727272;
}

.searchtable a img {
    margin-left: 5px;
}

.searchtable-body {
    color: #1863da;
    /*color: #0054da;*/
    background-color:  #e6f7ff;
}


.searchtable-body tr.row-odd {
    background-color: #ebf9ff;
}

#searchtable-body tr:hover,
#searchtable-body tr:hover td{
    background-color: #d6eafb;
}


table.searchtableTop {
    table-layout:fixed
    width: 100%;
}

table.searchtableTop td {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
td.searchExpand {
    white-space: pre-line;
}
*/

table.searchtableTop td {
    -ms-word-break: break-all;
    word-break: break-all;
}


/*Search result table widths
  In precanteges, which should sum up to 100%

  We know the needed width for some columns:
    Barcode (13 characters max)
    Group name (always needs to fit the largest group name)

  These columns should always be exactly wide enough to fit their content, not wider
  The other two columns (Porducer, Name) can have content of any length
  so we will give hem the remaining space, then trim names to proper widths
*/


  /*
  We use different widths for different screen sizes, 
  We always want to fit the column headings into one row 
  (or else the sort icon looks bad since it gets pushed into a new row first)
  We will need to solve this some other way (smaller table that only displays one or two columns?)
  Hovering to show full length names also doesn't work on mobile devices. 
  */
@media (min-width: 576px) {
    /*In small display screen widths, setting good column sizes is basically impossible,
     because there isn't enough space on the screen*/
    #searchBarcode{
        width: 19%;
    }
}


@media (min-width: 768px) {
    #searchProductName {
        width: 30%;
    }

    #searchProducerName{
        width: 25%;
    }

    #searchGroupName{
        width: 27%;
    }

    #searchBarcode{
        width: 18%;
    }
}

@media (min-width:  992px) {
    #searchProductName {
        width: 30%;
    }

    #searchProducerName{
        width: 20%;
    }

    #searchGroupName{
        width: 23%;
    }

    #searchBarcode{
        width: 13%;
    }
}

@media (min-width: 1200px) {
    #searchProductName {
        width: 30%;
    }

    #searchProducerName{
        width: 20%;
    }

    #searchGroupName{
        width: 23%;
    }


    #searchBarcode{
        width: 13%;
    }
}




/*End search table widths*/

#photoError {
    color: red;
}

.align-right {
    float: right;
    font-family: monospace;
}




.index-help-text{
    text-align: left;
    display: inline-block;
}

div.index-help-text h2 {
    font-size:27px;
    line-height: 0.7;
}


.align-right-bottom{
   position: absolute;
   right:0;
   bottom:0; 
}



/*
Autocomplete hover
Defaults to white color, which makes nutrition information impossible to see (white on white background)
*/
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-state-active.ui-button:hover 
{
  color:inherit;
}


span.preserve-whitespace {
    white-space: pre;
}

#labelDiv {
    background: white;
    border: 1px solid #b1b1b1;
    margin: auto;
    margin-top: 0.1em;
    padding: 0 15px;
    background-color: #f0f0f0;

}

.addLabelComponentsTable {
    border-spacing: 2px;
    border-collapse: collapse;
    width:100%;

}

#addLabelForm {
    color: black;
}

.addLabelComponentsTable th{
   /* border-color: #ffffff;
    border-width: 2px;
    border-style: solid;
    border-spacing: 2px;
    */

}

.addLabelComponentsTable td{
    border-color: #ccc;
    border-width: 1px;
    border-style: solid;
    
    padding: 0.1em;
    background-color: #e6f7ff;
}

.addLabelComponentsTable th{
    border-bottom-color: #ccc;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-right-color: #ccc;
    border-right-width: 1px;
    border-right-style: solid;

    width: 50%;
    padding: 0.1em;
    padding-left: 0.5em;
    font-weight: 600;
    height: 32px;
    
}

.addLabelComponentsTable tr:last-child th{
    border-right-color: black;
    border-right-color: #ccc;
    background-color: #e6f7ff;
}

.addLabelComponentsTable input{
    width:100%;
}




.addLabelComponentsTableInput{
    float: right;
    border: none;
    background: #e6f7ff;
    text-align: right;
}

.addLabelComponentsNewComponent{
    float: right;
    border: none;
    background: #e6f7ff url("/static/izdelki/resources/img/add_small.png") no-repeat center;
}

.addLabelComponentsNewComponent:focus {
    background: #e6f7ff;
}

.addLabelComponentsNewComponent.nonempty {
    background: #e6f7ff;
}




.addLabelComponentsTable label {
  display: inline-block;
  width: 5em;
  text-align: right;
}


.floatRight{
    text-align:right;
    float:right;
    margin-right: 0.3em;
}

.addLabelInfoTable {
    margin-top: 1.5em;
    table-layout: fixed;
    width:100%;
    border-spacing: 2px;
    margin-bottom: 1.5em;
}

.addLabelInfoTable td{
    border-color: #ccc;
    border-width: 1px;
    border-style: solid;
    border-right-width: 1px; 
    width:50%;
    padding: 0.1em;
    background-color: #e6f7ff;
}

.addLabelInfoTable th{
    width: 50%;

}

.addLabelInfoTable th label {
    padding-left: 0.5em;
    font-weight: 600;
}

#labelForm td.error,
#recipeForm dd.error div,
#add-label-components-table td.error input,
#recipeFormData .group_dropdown_container.error:after{  
   box-shadow: inset 0 0 0 2px #ff0000; 
}


#labelForm input{  
    color: black;
}

#labelForm input.error{  
    color: #ff0000;
}

#labelForm .is_public_container{
    margin-left: 0.5em;
    margin-top: 2em;
}

#labelForm .is_public_container label {
    font-weight: 600;
}

#labelForm h4 {
    margin-left: 0.5em;
}

.addLabelInfoTable th{
    border-bottom-color: #ccc;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-right-color: #ccc;
    border-right-width: 1px;
    border-right-style: solid;
    border-top-color: #ccc;
    border-top-width: 1px;
    border-top-style: solid;
    width:50%;
    padding: 0.1em;
}

.addLabelInfoTableInput{
    float: right;
    border: none;
    background-color: #e6f7ff;
}

.addLabelInfoTable span.select2 {
    /*
        For some reason, the dropdown group selection box gets a hardcoded style tag that sets width to 100px
        We don't want that, since we want the box to fill the entire table box
        For now, this is a fix which shouldn't break anything: !important overwrites any other styles. Otherwise, style tags have the highest priority
        A better fix would be to find where the style tag is being added and change that
    */
    width:100%  !important;
}

table.addLabelComponentsTable th.text-center {
    border: none;
}

#index-authors-text {
    margin-left: 3em;
    padding-left: 1em;
}

#index-authors-text p,
#index-namen-text p {
    font-size: 18px;
}

#select2-id_group-container {
    background-color: #e6f7ff;
    border: 0px;
}


.group_dropdown_container #select2-id_group-container.nonempty {
    background-color: white;
    border : 1px solid #d1d1d1;
}

.group_dropdown_container #select2-id_group-container.nonempty {
    background-color: white;
    border : 1px solid #d1d1d1;
}

/*
#labelDiv .group_dropdown_container #select2-id_group-container.nonempty {
    background-color: #e5e5e5;
    border : 1px solid #d1d1d1;
}
*/
.group_dropdown_container{
    position:relative;
}



/*Make the select 2 dropdown box look the same as other input boxes when empty*/
/*Create a new element with :after, put it above the input box, and gice it the same apperance as other boxes*/

/*We need to use pointer events to allow the user to click
 on the dropdown box behind the placeholder background element.
 pointer-events does that, but isn't supported everywhere
 without support, the user can't click on the ropdown box,
 so he can't select a group. In that case, we won't display the background
 and leave the dropdown box with its default look*/
@supports (pointer-events: none) {
    #recipeFormData .group_dropdown_container:after {
        background : #e6f7ff url("/static/izdelki/resources/img/add_small.png") no-repeat center;
        content : "";
        position: absolute;
        height: 111%;
        width: 100%;
        cursor:text;
        top:0;
        left: 0;
        z-index: 1000;
        pointer-events: none;
        border: 1px solid #d1d1d1;
    }

    #labelForm .group_dropdown_container:after {
        background : #e6f7ff url("/static/izdelki/resources/img/add_small.png") no-repeat center;
        content : "";
        position: absolute;
        height: 100%;
        width: 100%;
        cursor:text;
        top:0;
        left: 0;
        z-index: 1000;
        pointer-events: none;
        border: 1px solid #d1d1d1;
    }

    .group_dropdown_container.nonempty:after {
        display: none;
    }
}

.select2-container--default .select2-selection--single {
    border: 0px;
}

/*select2 (group dropdown) input box border*/
.select2-search { 
    background-color: #e6f7ff;
    color: #517ec5;
    /*color: #0054da;*/
}

/*select2 (group dropdown) input box*/
.select2-search input { 
    background-color: white;
    color: black;
}

/*select2 (group dropdown) dropdown*/
.select2-results{
    background-color: #e6f7ff;
    color: #517ec5;
    /*color: #0054da;*/
}

/*Select2 dropdown outer box*/
.select2-results__options {
   max-height: 300px !important;
}

/*select2 dropdown items*/
.select2-results__options  * {
    padding: 0.5em;
   border-bottom: 1px solid white;
}

.select2-choices {
  overflow-y: auto;
}


/*select2 hover color*/
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #d6eafb;
    /*color: #517ec5;*/
    color: #0054da;
}

/*ingredient autocomplete body*/
.ui-menu .ui-menu-item a{ 
    background: #e6f7ff none no-repeat; 
    color: #0051da;
    padding:0;
    margin:0;
    display:block;
    border:0;
    border-collapse:collapse;
    padding: 0.5em;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
}

.ui-menu-item img {
    vertical-align: baseline;
    margin-right: 5px;
}

.autocomplete-large {
    min-height: 400px;
}

/*ingredient autocomplete box*/
.ui-autocomplete{
    background-color: #e6f7ff;
    color: #517ec5;
    /*color: #0054da;*/
    /*Add scrollbar*/
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;

    padding-left: 0.2em;
    padding-top: 15px;
}

/*ingredient autocomplete header*/
.ui-autocomplete .list-header {
    font-weight: 700;
    font-size: 1.1em;
    margin-left: 0.1em;
}

/*ingredient autocomplete item hover*/
.ui-menu-item a:hover {
    background-color: #d6eafb;
    /*color: #517ec5;*/
    color: #0054da;
    text-decoration: none;
}

/*ingredient autocomplete top input*/
#searchIngredients .searchIngredients-input{
    background-color: #e6f7ff;
    border:1px solid #ccc;
    color: #517ec5;
   /* color: #0054da;*/
}



#password-reset-btn {
    margin-left: 0.2em;
}

/*
.help-img {
    margin: 1em;
    width: 400px;
    overflow: hidden;
}

.help-img img {
 height: auto;
 width: 400px;
}

.help-img-large {
    margin: 1em;
    width: 900px;
}
*/


/*help.html*/
.help-img-small {
    margin: 2em 0 0 2em;
    height: 200px;
    width: auto;
    /*overflow: hidden;*/
}


.help-img-small.no-margin {
    margin-top: 0;
}

.help-img img {
    height:150px;
    width:200px;
    object-fit: cover;
    border: 1px solid;
}

.help-img-large {
    margin: 1em;
    width:100%;
}

.help-img-large img {
    height:100%;
}

.help-header {
    margin-bottom: 3em;
}


.help-img-pad-bottom {
    margin-top: 45px;
}


.help-img-pad-bottom {
    margin-top: 55px;
}


.help-img-pad-middle {
    margin-top: 60px;
}


.help-img-pad-top {
    margin-top: 50px;
}

.help-row ol,
.help-row ul {
    padding-left: 22px;
}

.help-row {
    padding-top: 2em;
}

.ui-tooltip{
    white-space: pre-line;
}

.text-center-no-margin {
    margin: 0;
    text-align: center;
}

#header-title {
    padding-right: 2em;
}

#header-title h1{
    font-size: 32px;
    font-weight: 700;
    margin-top: -2px;
    color: white;
    /*Repeat the same filter to increase intensity*/
    text-shadow: 3px 1px 14px #6bbbff;
}





.dashboard-label-components {
    text-align: right;
}

.font-weight-bold {
    font-weight: bold;
}

.labelInput {
    background-color: #e6f7ff;
}

/*Custom css for 5 column rows in bootstrap 3*/
/*https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap*/
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}













/*Remove gutters (side padding) from bootstrap 3 grids*/
.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

.empty-content{
    opacity: 0.5;
}




a.no-decoration {
  color: inherit;
  text-decoration: inherit;
}

a.no-decoration:link {
  color: inherit;
  text-decoration: inherit;
}

a.no-decoration:hover {
  color: inherit;
  text-decoration: inherit;
}

/*Word wrap for long names*/
.product-name {
    word-wrap:  break-word;
    overflow-wrap: break-word;
}

/*Properly center footer*/
.banner{
    position: relative;
    /*
    padding-left:10em;
    padding-right:10em;
    */
    width: 100%;
    padding-left:4em;
    padding-right:4em;
    margin-top: 3px;
    color: #ffffff;
    font-size: 1.1em;
}



.footer-container {       
    display: flex;
    justify-content: space-between;
}

/*USe before and after to get the same effect as space-evenly, but supported on all browsers*/
/*https://stackoverflow.com/questions/47534216/how-to-make-css-justify-contentspace-evenly-fallback-to-space-between-on-safari?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa*/
.footer-container:before,
.footer-container:after {
    content: "";
    width: 1px;
    display: block;
}



footer.banner {
    margin-top: 0px;
}


/*Font weight for add/edit*/
.product-sidebar dt,
#listComponents th,
#listComponentsLabel th
.add-button,
.product-button,
.product-sidebar label {
    font-weight: 600;
}

#recipeFormData {
    margin-top: 0.9em;    
}

#recipeFormData.recipe-form-data-add-label {
    margin-top: 45px;   
}

#recipeForm input {
    padding-left: 5px;
}

#recipeForm .help {
    display: none;
}

#recipeForm dt {
    display: inline-block;
}

#listComponentsLabel td input  {
    text-align: right;
    padding-right: 0.3em;
}

#listComponentsLabel {
    border: 1px #ccc solid;
    border-top: none;
}

/*
.edit-product-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
*/

/*Applies some extra empty space on the edit screen when the instruction text are removed*/
.empty-help-padding {
    margin-top: 5em;
}



.column-pad-right {
    padding-right: 3em;
}


/*Highlight input fields on focus*/

input[type=text], textarea, .expandable-input{
  -webkit-transition: box-shadow 0.15s ease-in-out;
  -moz-transition: box-shadow 0.15s ease-in-out;
  -ms-transition: box-shadow 0.15s ease-in-out;
  -o-transition: box-shadow 0.15s ease-in-out;
  transition: box-shadow 0.15s ease-in-out;
  outline: none;
}
 


input[type=text]:focus, textarea:focus,
#search-input:focus + span .btn,
.expandable-input:focus {
  box-shadow: 0 0 8px rgba(20, 103, 255, 1);
}


/*Force the footer to stay at the bottom*/
/*https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/*/
/*https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/*/
.main-wrapper .container {
  display: flex;
  flex-direction: column;
  min-height: 100vh; 
}

header,
footer {
  flex-shrink: 0; 
}
main {
  flex: 1 0 auto; 
}

.cookie-table {
    margin-top: 1em;
}

.cookie-table th, 
.cookie-table td{
    padding: 5px;
}

main {
    margin-top: 2em;
}



.from-label-container {
    text-align: left;
}

.recipe-menu-row {
    margin-top: 5px;
}



.ingredientSearch input {
    padding-left: 0.5em;
}

.first-row {
    margin-top: 15px;
}

.first-row-label {
    margin-top: 45px;
}

.dashboard-header {
    background-color:  #c8e791;
    color: black;
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1em;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.about-pages.first-row {
    margin-top: 21px;
}



.no-info {
    opacity: 0.3;
}

.about-pages h1{
    margin-bottom: 33.25px;
}

.search-page.first-row h1{
    margin-bottom: 30px;
}

.about-pages h2 {
    font-size: 2.5em;
    font-weight: 300;
    font-family: "Open Sans", sans-serif;
    margin-bottom: 33.25px;
    display: inline-block;
}

.about-pages h3 {
    font-weight: 600;
    font-size: 18px;
    margin-top: 1em;
}

.about-pages h3.first {
    margin-top: 0;
}

.about-pages h4 {
    margin-top: 2em;
}

.margin-top {
    margin-top: 1em;
}

.flex-center {
    display: flex;
    justify-content: center;
    text-align: center
}

.margin-top-large {
    margin-top: 5em;
}

.margin-top-medium {
    margin-top: 3em;
}

.margin-bottom {
    margin-bottom: 1em;
}

/*Mobile layout*/
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
    }

    #logo {
        padding-top: 0.5em;
    }
}

.underline {
    text-decoration: underline;
}

#addAllergensLabel {
    z-index: 9999;
}


/*
.header-img {
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
}
*/

.header-img:hover {
    -webkit-filter: brightness(105%);
    filter: brightness(105%);
}

.header-img-80{
    margin-bottom: -4px;
    -webkit-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
}

#logo-img {
    height:66px;
}

#id_is_public {
    /*color: #517ec5;*/
    color: #0054da;
    margin-right: 5px;
}

.is-public-label {
    color: #0051da;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .is-public-label {
        white-space: normal;
    }
}

#help-product span {
    color: #0051da;
    display: inline-block;
    top: -19px;
    height: 24px;
    font-size: 1.25em;
    float: right;
    right: 30px;
}

#help-product span.help-solo {
    right: 0px;
}

#help-product {
    height: 0.85em;
    text-align: left;
}



#exportDropdown .dropdown-menu {
    width: 100%;
}


.glyphicon-flip-horizontal {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

#register_form label,
.user-form label{
    font-weight: 600;
}


.login-link-container {
    margin-bottom: -1em;
}


.register-link-container {
    margin-top: 0.3em;
    margin-bottom: -0.5em;
    width:50%;
    display: inline-block;
}

.reset-password-link-container {
    width:50%;
    display: inline-block;
    text-align: right;
}

/*Tablet header definitions*/
@media (max-width: 992px) {
    #header-title h1 {
        font-size: 26px;
        font-weight: 700;
        margin-top: -2px;
        color: white;
        text-shadow: 3px 1px 14px #6bbbff;;
        white-space: nowrap;
        padding-left: 10px;
       
    }
}


.top-menu-text {
    color: #6bbbff;
    font-weight: 800;
    margin-top: 3px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.8em;
    letter-spacing: 0.03em;
}

.top-menu-text-gray {
    color: #727272;
}



/*Phone header definitions*/
@media (max-width: 768px) {
    header {
        padding-top: 0;
    }

    header:after {
        height: 220px;
    }

    .header-buttons-container {
        justify-content: space-around;
        margin-top: 1em;
    }


    #logo {
        /*Center logo*/
        margin: auto;
    }

    #logo img {
        margin: auto;
    }

    #header-title {
        padding-right: 15px;
    }


    #main-buttons-add,
    #dash-img {
        margin: 0;
        padding: 0;
    }



    .footer-container div{
        margin-bottom:1em;
    }

    footer {
        padding-bottom: 0;
    }

    .dashboard-header-button-containers .btn {
        width:100%;
    }

    .dashboard-components-box dd{
        margin-top: -1.2em;
    }

    /*Margin between the image and the components*/
    .dashboard-components-box dd:nth-child(2){
        margin-top: 0.5em;
    }

    #header-title h1 {
        white-space: pre-line;
    }

}

.padding-left {
    padding-left: 15px;
}



#product-edit-title {
    padding-right: 0;
}



.tooltip-container-left {
    display:inline-block;
    width: 80%;
    text-align: left;
    float:left;
}

.tooltip-align-left {
    display: inline-block;
    text-align: left;
}

.tooltip-container-right {
    display: inline-block;
    width: 20%;
    float:right;
    text-align: right;
}

.tooltip-inner-large {
    min-width: 150px;
    max-width: 150px;
    font-size: 14px;
}


.label-table-input {
    width: 80%;
}

/*The inputs added in with javascript have less margin then the ones added by HTML (why?)
  Manually fix this*/
.label-table-input.extra-margin {
    margin-right: 4px;
}


/*The extra margin is only needed in the large edit table
  It breaks the one on the add page*/
#addLabelForm .label-table-input.extra-margin {
    margin-right: 0px;
}

.label-table-units {
    font-weight: 400;
}

/*Disable them in the label popupwindow for now*/
#addLabelForm .label-table-units {
    display: none;
}

.float-right {
    float: right;
}

.inline-block {
    display: inline-block;
}

.expandable-input {
    min-height: 2em;
    word-wrap: break-word;
}

.text-one-line-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*Add-from-label dropdown*/
.add-label-header {
    margin-top: 1em;
}

.add-label-header label {
    font-weight: 600;
}

.add-label-input-wrapper input {
    height: 33px;
    border: 1px solid #d1d1d1;
}

/*ix problems with divs containing only float elements*/
/*https://stackoverflow.com/questions/5369954/why-is-my-divs-height-zero*/
.addLabelInfoTable div {
    overflow: hidden;
}

.addLabelInfoTable .select2-selection {
    height: 33px;
}

.add-label-input-wrapper:focus-within {
    box-shadow: 0 0 8px rgba(20, 103, 255, 1);
}

.add-label-input-wrapper{
  -webkit-transition: box-shadow 0.15s ease-in-out;
  -moz-transition: box-shadow 0.15s ease-in-out;
  -ms-transition: box-shadow 0.15s ease-in-out;
  -o-transition: box-shadow 0.15s ease-in-out;
  transition: box-shadow 0.15s ease-in-out;
  outline: none;
}



@media (max-width: 768px) {
    main {
        padding-bottom: 20px; 
    }
}


#add-label-components-table input.numericInput {
    width: 100%;
    height: 100%;
    padding: 6px;
    padding-right: 34px;
    background: #e6f7ff url(/static/izdelki/resources/img/add_small.png) no-repeat center;
}

#add-label-components-table td {
    padding: 0;
    position: relative;
    width:50%;
    vertical-align: middle;
    background: #e6f7ff;
    background-clip: padding-box; /*https://stackoverflow.com/a/16337203*/
}

#add-label-components-table th {
    font-weight: 600;
} 


#add-label-components-table label {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translate(0%, -50%);
    color: #e6f7ff;
}

#add-label-components-table input.numericInput.nonempty,
#add-label-components-table input.numericInput:focus,
#add-label-components-table td.nonempty {
    background: white; 
    background-clip: padding-box; /*https://stackoverflow.com/a/16337203*/
}

/*Put focus-within in its own section to prevent the CSS breaking in browsers that don't support it
  If it was included in the above block, then browsers that don't support focus-within (Edge)
  would ignore the entire block*/
#add-label-components-table td:focus-within {
    background: white; 
    background-clip: padding-box; /*https://stackoverflow.com/a/16337203*/
}


#add-label-components-table input.numericInput.nonempty + label,
#add-label-components-table input.numericInput:focus + label {
    color: black;
}


/*This style is added by javascript whenever we add extra component rows, but interferes with the table on the add_label page
  So we need to remove the extra margin it adds in this table*/
#add-label-components-table .label-table-input.extra-margin{
    margin-right: 0px;
}

#add-label-components-table table {
    margin-bottom: 0;
    border: none;
}

.product-info-row {
    margin-bottom: 20px;
}

div.no-margin-top{
    margin-top: 0;
    padding-top: 0;
}

div.no-padding-left{
    padding-left: 0;
}


.background-grey .col-md-8{
    background-color: #f0f0f0;
    padding-right: 15px;
}

@media (min-width: 992px) {
    .add-label-container .col-md-8{
        width: 63.6%;
    }
}

@media (max-width:  992px) {
    /*Fix weird background issues in add_label page*/
    div.no-margin-top{
        padding-top: 15px;
        padding-bottom: 15px;
    }
}


.add-label-container .col-md-8 {
    background-color: #f0f0f0;
    padding-right: 15px;
}

.add-label-container .product-info-row .col-md-8 {
    padding-bottom: 15px;
}

.help-icon {
    color: #6bbbff;
    vertical-align: text-top;
    cursor: pointer;
    font-size: 1.2em;
}

.dashboard-header-container .help-icon,
.product-main .help-icon,
.product-first .help-icon{
    top:-2px;
}




/*Make the profile page disabled input look like normal text until the user clicks on the edit button*/
.form-control-plaintext {
    display: block;
    font-size: 10.5pt;
    width: 100%;
    padding-top: .6rem;
    padding-bottom: .5rem;
    padding-left: 1.3rem;
    margin-bottom: 0;
    line-height: 1.5;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
    cursor: default;
}

.as-link {
    color: #337ab7;
    text-decoration: none;
    cursor: pointer;
}

.as-link:hover {
    color: #23527c;
    text-decoration: underline;
}

.top-menu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 16%;
}

.title-large {
    font-size: 2.5em;
    font-weight: 300;
    font-family: "Open Sans", sans-serif;

    display: inline-block;
}

.add-page-title-margins {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.product-main .add-help-text.add-label-bottom {
    margin-bottom: 15px;
}

.add-label-button {
    margin-top: 1px;
}

.scrollbar-fix {
    padding-right: 17px;
}


.margin-top-13{
    margin-top: 13.5px;
}

.margin-top-50 {
    margin-top: 50px
}


.margin-top-55 {
    margin-top: 55px
}

.margin-top-71 {
    margin-top: 71px
}

.horizontal-login-button {
    margin-top: 15px;
    width: 17%;
}