/*
red: #ce2819
lighter_green: #e8efc3
light_green: #cfde7e
green: #a4bd00
light_gray: #f1f1f1
gray: ccccc9
beige: #fef9e9
lighter_orange: #faf4e2
light_orange: fdf4d8
orange: ecd691
dark_orange: dab34e
*/

#content .hideme { display: none; }
#foodcalculator_form { width: 450px; float: left; }
#foodcalculator_form label { margin: 10px 0; position: relative; }
#foodcalculator_form button[type=submit] { display: none; }

#foodcalculator_form > label > span.attribute_label, .foodcalculator_titles {
    color: #ce2819; padding: 10px 25px; font-size: 16px; cursor: pointer;
    background: url(../images/food_calculator/info.svg) no-repeat left center;
    background-size: 20px; display: inline-block; min-width: 100px;
}
.foodcalculator_titles.no_info { background: transparent; padding-left: 0; }
#foodcalculator_form span.attribute_input { display: inline-block; }
#foodcalculator_form span.attribute_input > i { display: block; font-size: 12px; }
#foodcalculator_form label.radio_button {
    display: inline-block; width: 14.4%;
}
#foodcalculator_form .radio_buttons_container { position: relative; }
#foodcalculator_form label.radio_button span {
    background: #f1f1f1; padding: 10px; cursor: pointer; text-align: center;
}
#foodcalculator_form label.radio_button input { display: none; }
#foodcalculator_form label.radio_button input:checked ~ span { background: #cfde7e; }
#foodcalculator_form input, #foodcalculator_form select, span.nutrition_display {
    border: 2px solid #ccccc9; background: #fef9e9; padding: 10px 5px;
    width: 270px; box-sizing: border-box; -webkit-box-shadow: none; -moz-box-shadow: none;
    box-shadow: none;
}
#foodcalculator_form .puppy_mode span[data-help_text="weight"] { width: 236px; }
#foodcalculator_form .puppy_mode span.attribute_input { width: 133px; }
#foodcalculator_form .puppy_mode input { width: 100%; vertical-align: bottom; }
#foodcalculator_form select { padding: 9px 4px; }

.foodcalculator_results {
    margin-bottom: 20px; border-collapse: initial; width: 100%;
}
.foodcalculator_results tr > * { padding: 5px 10px; text-align: center; }
.foodcalculator_results tr *:first-child,
.foodcalculator_results tr *:last-child {
    background: #fdf4d8; border: 2px solid #fdf4d8; border-top: 0;
}
.foodcalculator_results tr.foodcalculator_results_description_rows td {
    background: #ecd691; border: 2px solid #ecd691; border-bottom: 0;
}
.foodcalculator_results tr.foodcalculator_results_header td {
    background: #dab34e; border-color: #dab34e;
}
.foodcalculator_results tr.foodcalculator_results_numbers td {
    border-color: #dab34e; border-bottom: 2px solid #dab34e; background: #f8edc7;
}
.foodcalculator_results tr.foodcalculator_results_numbers td:nth-child(2) {
    background: #faf4e2;
}
.foodcalculator_results tr.foodcalculator_recommended_meat_lighter td {
    background: #cfde7e; border-color: #cfde7e;
}
.foodcalculator_results tr.foodcalculator_recommended_meat td {
    border-color: #a4bd00; background: #a4bd00; color: white;
}
.foodcalculator_results tr.foodcalculator_recommended_meat_numbers td {
    border-color: #a4bd00; border-bottom: 2px solid #a4bd00; background: #e7e7a4;
}
.foodcalculator_results tr.foodcalculator_recommended_meat_numbers td:nth-child(2) {
    background: #e8efc3;
}
.foodcalculator_results tr.foodcalculator_results_numbers td:first-child {
    border-right: 0;
}
.foodcalculator_results tr.foodcalculator_results_numbers td:last-child {
    border-left: 0;
}
.foodcalculator_results_spacer { height: 2px; }

#foodcalculator_form .label_daily_flakes_in_gram { display: none; }
#foodcalculator_form.expert_mode .label_daily_flakes_in_gram { display: inline-block; }
#foodcalculator_form .label_daily_treats_in_gram { display: inline-block; }
#foodcalculator_form .label_daily_treats_in_gram input,
#foodcalculator_form .label_flakes select,
#foodcalculator_form .label_daily_flakes_in_gram input { width: 133px; }
#foodcalculator_form .label_flakes { display: inline-block; }
#foodcalculator_form.expert_mode .label_flakes { display: none; }
#foodcalculator_form .label_flakes span.attribute_label,
#foodcalculator_form .label_daily_flakes_in_gram span.attribute_label { display: none; }
#foodcalculator_form .label_endured_temperature span.attribute_label { display: none; }
#foodcalculator_form .label_daily_hours_in_cold_temperature,
#foodcalculator_form .label_race { display: block; }
#foodcalculator_form .label_daily_hours_in_cold_temperature span.attribute_input,
#foodcalculator_form .label_race span.attribute_input,
#foodcalculator_form .label_endured_temperature span.attribute_input {
    margin-left: 25px;
}
#foodcalculator_form .label_daily_hours_in_cold_temperature span.attribute_input input,
#foodcalculator_form .label_race span.attribute_input select,
#foodcalculator_form .label_endured_temperature span.attribute_input input {
    width: 400px;
}
#foodcalculator_form div.line_info {
    color: white; background: #dab34e; padding: 10px; font-weight: bold;
}
#content #leftside { background: transparent; width: auto; float: none; }
#foodcalculator_results {
    float: right; width: 450px; margin-bottom: 20px; position: relative;
}

#content input:invalid { border: 2px solid red; }
#content .label_nutritions_treat_articles span.attribute_label,
#content .label_nutritions_meat_articles span.attribute_label,
#content .label_nutritions_flake_articles span.attribute_label { display: block; }
/* Chrome, Safari, Edge, Opera */
#content .label_daily_treats_in_gram input::-webkit-outer-spin-button,
#content .label_daily_treats_in_gram input::-webkit-inner-spin-button,
#content .label_daily_flakes_in_gram input::-webkit-outer-spin-button,
#content .label_daily_flakes_in_gram input::-webkit-inner-spin-button {
  -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
#content .label_daily_treats_in_gram input[type="number"],
#content .label_daily_flakes_in_gram input[type="number"] {
    -moz-appearance: textfield;
}

#content span.nutrition_display { width: 130px; display: inline-block; margin-left: 25px; }
a.add_nutrition {
    background: url(../images/food_calculator/plus.svg) no-repeat left center;
    background-size: 20px; display: inline-block; min-width: 100px; padding-left: 25px;
    margin-left: 25px;
}
a.add_nutrition:hover { background-image: url(../images/food_calculator/plus_hover.svg); }

#content .nutritions_articles label {
    background: #fef9e9; border: 2px solid #ecd691; margin-left: 25px; padding: 10px 5px;
    display: none;
}
#content .nutritions_articles label.visible { display: block; }
#content .nutritions_articles label span { display: inline-block; width: 190px; }
#content .nutritions_articles input { background: white; width: 70px; padding: 5px; }
#content .nutritions_articles a.delete_nutrition {
    background: url(../images/food_calculator/bin.png) no-repeat 0 0;
    float:right; width: 31px; height: 31px;
}
#content .nutritions_articles a.delete_nutrition:hover {
    background-position: 0 -31px;
}

#content #foodcalculator_form .nutritions_popup {
    background: #ccccc9; padding: 8px; margin-top: 5px; display: inline-block;
    margin-left: 25px;
}
#content #foodcalculator_form .nutritions_popup select,
#content #foodcalculator_form .nutritions_popup input { width: 115px; }
#content #foodcalculator_form .nutritions_popup select { margin-right: 8px; width: 250px; }
#foodcalculator_form .nutritions_popup a.add_nutrition_link {
    display: inline-block; width: 30px; height: 40px; background: #008000;
    background: url(../images/food_calculator/plus_hover.svg) no-repeat center center;
    background-size: 20px; margin-left: 5px; vertical-align: top;
}
#foodcalculator_form .nutritions_popup a.add_nutrition_link:hover {
    background-image: url(../images/food_calculator/plus.svg);
}

#foodcalculator_form .label_nutritions_treat_articles,
#foodcalculator_form .label_nutritions_meat_articles,
#foodcalculator_form .label_nutritions_flake_articles,
#foodcalculator_form .nutritions_articles,
#foodcalculator_form .label_endured_temperature,
#foodcalculator_form .label_daily_hours_in_cold_temperature,
#foodcalculator_results .expert_results { display: none; position: relative; }

#foodcalculator_form.expert_mode .label_nutritions_treat_articles,
#foodcalculator_form.expert_mode .label_nutritions_meat_articles,
#foodcalculator_form.expert_mode .label_nutritions_flake_articles,
#foodcalculator_form.expert_mode .nutritions_articles,
#foodcalculator_form.expert_mode .label_endured_temperature,
#foodcalculator_form.expert_mode .label_daily_hours_in_cold_temperature,
#foodcalculator_results.expert_mode .expert_results { display: block; }

#foodcalculator_form a.expert_mode_switcher {
    margin-left: 0; display: inline-block; background: #fdf4d8; padding: 7px;
    margin-top: 10px; border: 2px solid #ecd691;
}
#foodcalculator_form a.expert_mode_switcher .standard_text { display: none; }
#foodcalculator_form.expert_mode a.expert_mode_switcher .expert_text { display: none; }
#foodcalculator_form.expert_mode a.expert_mode_switcher .standard_text { display: block; }
#foodcalculator_form .standard_mode_warning {
    background: #e8efc3; border: 2px solid #f1f1f1; padding: 7px; display: none; margin-top: 20px;
    clear: both;
}
#foodcalculator_form.expert_mode .standard_mode_warning {
    display: block;
}

#foodcalculator_help_texts { display: none; }
#foodcalculator_help_popup {
    position: absolute; top: 50px; left: 0px; box-shadow: 5px 5px 20px #848484;
    width: 400px; padding: 7px; background: white; border: 2px solid #cfde7e; z-index: 300;
}
.label_daily_treats_in_gram #foodcalculator_help_popup { top: 70px; }
.radio_buttons_container #foodcalculator_help_popup { top: 60px; }
#foodcalculator_help_popup p:first-child { margin-top: 0; }
#foodcalculator_help_popup p:last-child { margin-bottom: 0; }
#content #foodcalculator_help_popup span { display: initial; }
#foodcalculator_help_popup:after, #foodcalculator_help_popup:before {
	bottom: 100%;
	left: 35px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

#foodcalculator_help_popup:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 15px;
	margin-left: -15px;
}
#foodcalculator_help_popup:before {
	border-color: rgba(207, 222, 126, 0);
	border-bottom-color: #cfde7e;
	border-width: 18px;
	margin-left: -18px;
}

.foodcalculator_disclaimer { margin: 20px 0 80px 0; }
.foodcalculator_disclaimer td { padding: 7px; }

@media screen and (max-width: 1020px) {
    #foodcalculator_results { float: none; width: auto; }
    #foodcalculator_form { width: auto; float: none; }
    #foodcalculator_form > label > span.attribute_label, .foodcalculator_titles,
    #foodcalculator_form span.attribute_input,
    #foodcalculator_form .label_flakes,
    #foodcalculator_form .label_daily_treats_in_gram,
    #content #foodcalculator_form .nutritions_popup {
        display: block;
    }
    #content span.nutrition_display,
    #content .nutritions_articles label,
    #content #foodcalculator_form .nutritions_popup,
    #content #foodcalculator_form .attribute_input {
        margin-left: 0;
    }
    #content #foodcalculator_form span.attribute_input input,
    #content #foodcalculator_form span.attribute_input select { width: 100%; }
    #foodcalculator_form .radio_buttons_container label { width: 23.5%; float: left; margin-right: 5px; }
    #foodcalculator_help_popup { width: auto; }
    .label_daily_treats_in_gram #foodcalculator_help_popup,
    .radio_buttons_container #foodcalculator_help_popup { top: 50px; }

    #foodcalculator_form .puppy_mode span:first-child { width: auto; }
    #foodcalculator_form .puppy_mode span.attribute_input { width: 100%; }
    #foodcalculator_form .puppy_mode input { width: 100%; vertical-align: inherit; }
    #foodcalculator_form select { padding: 9px 4px; }
}

@media screen and (max-width: 450px) {
    #foodcalculator_form .radio_buttons_container label { width: 100%; margin-bottom: 0; }
}

@media print {
    #foodcalculator_results { float: none; width: auto; }
    #slider { display: none; }
    #foodcalculator_form > label > span.attribute_label, .foodcalculator_titles {
        background: transparent; padding-left: 0;
    }
    #foodcalculator_results table { border-collapse: collapse; }
    #foodcalculator_results td { border: 1px solid gray!important; }
    #foodcalculator_results th { border: 0!important; }
    #foodcalculator_results .foodcalculator_results_spacer { display: none; }
    #sitetitle { display: none; }
    #print_logo { text-align: center; }
    #print_logo img { width: 100px; }
    #leftside { padding: 0!important; }
}