/**
* This file is part of the aiExtraGlaze distribution.
*
* @version      2.0.0 2018-07-28
* @copyright    2018 Alex Dobrin. All rights reserved.
* @license      http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
* @link         https://www.algisinfo.com
*/
.calculation_panels {
	max-width: 1000px;
}

ul.calculation_panels .hide {
	display: none !important;
}

ul.calculation_panels p {
	margin: 0px;
}

ul.calculation_panels select,
ul.calculation_panels textarea,
ul.calculation_panels input[type="text"],
ul.calculation_panels input[type="number"] {
	margin: 0px !important;
}

ul.calculation_panels,
ul.calculation_panels li.l_panel {
	list-style: none;
	display: block;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	width: 100%;
}

ul.calculation_panels .panel_content_fields_list {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

ul.calculation_panels div.panel_container {
	display: block;
	margin: 5px 0px;
	padding: 0px;
	border: 1px solid #1abd00;
	border-radius: 8px;
	background: linear-gradient(#eefaec, #48b84e);
}

ul.calculation_panels .panel_header {
	display: block;
	margin: 5px 5px 0px 5px;
	padding: 5px;
	background: #CCC;
	text-align: center;
	background: linear-gradient(#3be528, #38bb45);
	font-size: 18px;
	font-weight: bold;
	border-radius: 4px 4px 0px 0px;
	line-height: 26px;
}

ul.calculation_panels .panel_header .btnDeleteContainer,
ul.calculation_panels .btn_remove_supplements {
	display: block;
	float: right;
	margin-right: 5px;
}

ul.calculation_panels .panel_header .btnDeleteContainer button,
ul.calculation_panels .btn_remove_supplements button {
	display: block;
	color: #009a00;
	font-size: 12px;
	text-decoration: none;
	padding: 0px !important;
	border: none !important;
	background-color: transparent !important;
}

ul.calculation_panels .panel_header .btnDeleteContainer button svg,
ul.calculation_panels .btn_remove_supplements button svg {
	fill: #009a00;
}

ul.calculation_panels .panel_header .btnDeleteContainer button:hover,
ul.calculation_panels .btn_remove_supplements button:hover {
	text-decoration: none;
	color: #333;
}

ul.calculation_panels .panel_header .btnDeleteContainer button:hover svg,
ul.calculation_panels .btn_remove_supplements button:hover svg {
	fill: #333;
}

ul.calculation_panels .panel_content {
	display: block;
	margin: 0px 5px;
	padding: 5px 10px 10px 10px;
	border: 1px solid #1abd00;
	background: #eefaec;
	border-radius: 0px 0px 4px 4px;
}

ul.calculation_panels .panel_content::after {
	content: " ";
	display: block;
	float: none;
	clear: both;
}

ul.calculation_panels .panel_footer {
	display: block;
	margin: 0px;
	padding: 5px;
}

ul.calculation_panels .panel_footer .panel_Quantity {
	display: block;
	float: left;
	margin-left: 25px;
	color: #FFF;
}

.calculation_view_panels_container ul.calculation_panels .panel_footer .panel_Quantity {
	font-size: 16px;
}

ul.calculation_panels .panel_footer .panel_quantity_select_field {
	display: inline-block;
	margin: 0px;
	padding: 4px 0px;
	width: 45px;
	text-align: center;
}

ul.calculation_panels .td_supplements_field label {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

ul.calculation_panels .td_supplements_field label>input {
	margin: 0px 5px 0px 0px;
}

.calculation_panels .panel_name_container,
.calculation_panels .panel_extra_container {
	display: block;
	width: calc(100% - 190px) !important;
	float: right;
	clear: both;
}

.calculation_panels .panel_type_container {
	display: block;
	width: calc(100% - 190px) !important;
	float: right;
}

.calculation_panels .panel_content_fields_list .panel_content_field {
	display: block;
	width: calc(100% - 190px) !important;
	float: right;
	clear: none;
}

.calculation_panels .panel_content_fields_list .panel_content_field.top_info_comments {
	float: left;
	clear: both;
	margin-left: 190px;
}

.calculation_panels .panel_content_fields_list .div_panel_img_container {
	display: block;
	width: 180px !important;
	float: left;
	clear: none;
}

.calculation_panels .panel_diy_warning {
	display: block;
	width: calc(100% - 190px) !important;
	float: right;
	clear: none;
	padding: 0px 0px 10px 0px;
}

.calculation_panels .bottom_info_on_warnings {
	display: block;
	width: calc(100% - 190px) !important;
	float: right;
	clear: none;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: 11px;
	font-style: italic;
}

.calculation_panels .bottom_info_on_warnings::after {
	content: " ";
	display: block;
	float: none;
	clear: both;
}

.lbl_calculations_diy_warning {
	color: #0000FF;
}

.DiyWarningChecked {
	color: #333;
}

ul.calculation_panels .covered_panels_container .panel_content_label {
	display: inline-block !important;
	width: auto !important;
}

ul.calculation_panels .covered_panels_container .panel_content_value {
	display: inline-block;
	width: auto !important;
	min-width: 1px !important;
}

.calculation_view_panels_container ul.calculation_panels .panel_color_container .panel_content_label {
	display: inline-block;
	width: 100px;
}

.calculation_view_panels_container ul.calculation_panels .panel_color_container .panel_content_value {
	display: inline-block;
	width: auto !important;
}

ul.calculation_panels .l_panel_deleted .panel_header {
	color: red;
}

ul.calculation_panels .l_panel_deleted .panel_content {
	margin: 0px 5px 5px 5px;
}

ul.calculation_panels .l_panel_deleted .panel_content_field,
ul.calculation_panels .l_panel_deleted .panel_extra_container,
ul.calculation_panels .l_panel_deleted .panel_content_fields_list .panel_content_field.panel_size_container {
	display: none;
}

ul.calculation_panels .l_panel_deleted .panel_footer {
	display: none;
}

ul.calculation_panels .l_panel_deleted .panel_name_container {
	display: block;
	margin-bottom: 10px;
}

ul.calculation_panels .panel_name_container input.panel_name_fld,
ul.calculation_panels .panel_extra_container input.panel_extra_fld {
	width: 100% !important;
}

ul.calculation_panels .l_panel_deleted .panel_header .btnDeleteContainer a {
	color: red;
}

ul.calculation_panels .l_panel_deleted .panel_header {
	background: linear-gradient(#999, #CCC);
}

ul.calculation_panels .l_panel_deleted div.panel_container {
	border: 1px solid #999;
	background: #f0f0f0;
}

ul.calculation_panels .l_panel_deleted div.panel_diy_warning,
ul.calculation_panels .l_panel_deleted div.panelSizeValidationMessages,
ul.calculation_panels .l_panel_deleted div.bottom_info_on_warnings {
	display: none !important;
}

ul.calculation_panels .input_panel_name input,
ul.calculation_panels .input_panel_extra input {
	box-sizing: border-box;
	width: 100%;
}

ul.calculation_panels .panel_type,
ul.calculation_panels .panel_color,
ul.calculation_panels .covered_panels_select_field {
	width: auto;
	max-width: 100%;
}

ul.calculation_panels .div_panel_img_container {
	width: auto;
}

ul.calculation_panels .panel_content_field_on_type .panel_content_value {
	width: 100%;
}

ul.calculation_panels .panel_content_field {
	padding: 0px 0px 10px 0px;
}

ul.calculation_panels .panel_content_field.panelSizeValidationMessages {
	padding: 0px;
}

ul.calculation_panels .l_panel_sfs .panel_content_field.panelSizeValidationMessages {
	padding-bottom: 20px;
}

ul.calculation_panels .panel_content_field.panelSizeValidationMessages>div {
	padding: 10px 0px 10px 10px;
}

ul.calculation_panels .panel_content_field_on_type.clearfix {
	width: 100%;
	height: 1px;
	margin: 0px;
	padding: 0px;
	line-height: 1px;
	box-sizing: border-box;
}

ul.calculation_panels .chk_calculations_diy_warning,
#chk_bottom_non_conveyable_warning,
#chk_bottom_diy_warning {
	margin: -3px 5px 0px;
}

ul.calculation_panels .lbl_calculations_diy_warning,
#lbl_bottom_non_conveyable_warning,
#lbl_bottom_diy_warning {
	margin: 0px;
}

ul.calculation_panels .clearfix {
	float: none !important;
	clear: both !important;
}

ul.calculation_panels .covered_panels_container {
	float: left;
}

ul.calculation_panels .panel_color_container .panel_content_label {
	padding-bottom: 5px;
}

ul.calculation_panels .panel_color_container select.panel_color {
	max-width: 100%;
	width: calc(100% - 24px);
}

ul.calculation_panels .panel_color_container .panel_color_label {
	display: inline-block;
	margin-right: 0px;
}

ul.calculation_panels .panel_color_container .view_colors_link_container {
	display: inline-block;
}

ul.calculation_panels .panel_color_container .view_colors_link {
	display: inline-block !important;
	border: none !important;
	padding: 0px 5px !important;
	margin: 0px !important;
	background-color: transparent !important;
	text-decoration: none !important;
	color: #009a00 !important;
}

ul.calculation_panels .panel_color_container .view_colors_link:hover {
	color: #333 !important;
	text-decoration: underline !important;
}

ul.calculation_panels .panel_content_field_130_label .control-label {
	width: 130px;
	text-align: left;
}

ul.calculation_panels .panel_content_field_130_label .controls {
	margin-left: 140px;
}

ul.calculation_panels .panel_content_field .covered_panels_select_field {
	width: auto;
}

ul.calculation_panels li {
	display: block;
	width: 500px;
	float: left;
}

ul.calculation_panels .view_panel_container {
	display: block;
	border: 1px solid #1abd00;
	border-radius: 4px;
	padding: 5px;
	width: auto;
	float: left;
	margin: 10px;
	background: #eefaec;
	color: #212529;
	font-size: 13px;
}

ul.calculation_panels .view_panel_container li {
	line-height: 16px;
}

ul.calculation_panels .view_panel_container .view_panel_image {
	display: block;
	float: left;
	width: 180px;
}

ul.calculation_panels .view_panel_container .view_panel_fields {
	display: block;
	float: left;
	width: calc(100% - 190px);
}

ul.calculation_panels .view_panel_container .panel_content_field {
	display: block;
	padding: 0px;
	position: relative;
	float: none;
	clear: both;
}

ul.calculation_panels .view_panel_container .div_panel_name_container,
ul.calculation_panels .view_panel_container .div_panel_extra_container,
ul.calculation_panels .view_panel_container .panel_color_container,
ul.calculation_panels .view_panel_container .div_panel_type_container,
ul.calculation_panels .view_panel_container .panel_size_enter,
ul.calculation_panels .view_panel_container .panel_size_calculated,
ul.calculation_panels .view_panel_container .covered_panels_container,
ul.calculation_panels .view_panel_container .div_panel_quantity_container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: baseline;
	align-content: center;
}

ul.calculation_panels .view_panel_container .div_panel_name_container .panel_content_value,
ul.calculation_panels .view_panel_container .div_panel_extra_container .panel_content_value,
ul.calculation_panels .view_panel_container .panel_color_container .panel_content_value,
ul.calculation_panels .view_panel_container .div_panel_type_container .panel_content_value,
ul.calculation_panels .view_panel_container .panel_size_enter .panel_size_field,
ul.calculation_panels .view_panel_container .panel_size_calculated .panel_size_field,
ul.calculation_panels .view_panel_container .covered_panels_container .panel_content_value,
ul.calculation_panels .view_panel_container .div_panel_quantity_container .panel_content_value {
	display: inline-block;
	padding-left: 4px;
	width: calc(100% - 130px) !important;
}

ul.calculation_panels .div_panel_extra_container * {
	color: #F00 !important;
	font-weight: bold;
}

ul.calculation_panels .div_panel_extra_container.div_panel_extra_container_empty * {
	color: #dddddd !important;
}

ul.calculation_panels .view_panel_container .panel_color_container .panel_content_label {
	padding: 0px;
	position: relative;
}

ul.calculation_panels .view_panel_container .div_panel_no_container {
	font-weight: bold;
	font-size: 15px;
	padding-bottom: 5px;
}

ul.calculation_panels .view_panel_container .panel_content_field .panel_content_label,
ul.calculation_panels .view_panel_container .panel_content_field .panel_size_width_height .lbl_panel_size,
ul.calculation_panels .view_panel_container .panel_size_enter .panel_size_label,
ul.calculation_panels .view_panel_container .panel_size_calculated .panel_size_label {
	display: inline-block;
	width: 115px !important;
	min-width: 115px !important;
	text-align: right;
	padding: 0px;
	margin: 0px;
}

.view_panel_container .panel_content_field .panel_content_value {
	display: inline-block;
	width: auto !important;
}

ul.calculation_panels .view_panel_container .panel_content_field td {
	padding: 0px !important;
	line-height: 16px !important;
	height: 16px !important;
	vertical-align: middle;
}

ul.calculation_panels .top_info_comments h4 {
	color: #B2BABB;
	margin: 10px 0px 0px 0px;
}

ul.calculation_panels .panel_container_diy_warning {
	display: inline-block;
	margin: 0px;
	padding: 10px;
	border: 1px solid #CCC;
	border-radius: 4px;
	transition: padding 0.4s;
}

ul.calculation_panels .panel_container_diy_warning a {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	margin-bottom: 10px;
}

ul.calculation_panels .DiyWarningChecked .panel_container_diy_warning {
	border: 1px solid #eefaec;
	padding: 10px 10px 0px 0px;
	background-color: #eefaec;
}

ul.calculation_panels td.lbl_panel_size {
	width: 100px !important;
	text-align: left;
}

ul.calculation_panels .panel_size_calculated td.lbl_panel_size {
	padding-left: 10px;
}

.panel_container .panel_color_container .div_select_combo {
	margin: 0px;
}

.panel_container .panel_color_container .info_panel_color {
	display: block;
	margin: 0px;
}

.panel_container .panel_color_container .info_panel_color ul {
	list-style: none;
	margin: 0px;
}

.panel_container .panel_color_container .info_panel_color li {
	list-style: none;
	margin: 0px 0px 0px 25px;
}

.panel_container .panel_color_container .info_panel_color li.noIndent {
	margin: 0px;
}

.panel_container .panel_extra_empty,
.panel_container .panel_extra_hidden {
	display: none !important;
}

.panel_container .panel_extra_container .input_panel_extra {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

.panel_container .panel_extra_container .input_panel_extra .panel_extra_section {
	margin: 0px 5px 0px 0px;
}

.panel_container .panel_extra_container .input_panel_extra .panel_extra_not_last_section::after {
	content: ', ';
	margin: 0px 5px 0px 0px;
}

.panel_container .panel_extra_container .panel_extra_field_section {
	display: block;
	width: 100%;
	margin: 0px;
}

.panel_container .panel_extra_container .panel_extra_field_section input {
	margin: 0px;
}

.panel_container .panel_size_width_height {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-content: center;
	align-items: flex-start;
}

.panel_container .panel_size_width_height .panel_size_enter {
	width: 50%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
}

.panel_container .panel_size_calculated {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
	margin-left: 50%;
	margin-top: 10px;
}

.panel_container .panel_size_width_height .panel_size_enter input[type="number"],
.panel_container .panel_size_calculated input[type="number"],
.panel_container .covered_panels_container .covered_panels_select_field {
	margin-left: 5px !important;
}

.panel_container .panel_size_width_height .panel_size_label,
.panel_container .panel_size_calculated .panel_size_label {
	width: 100px;
	text-align: right;
	margin-right: 5px;
}

.panel_container .panel_size_width_height .panel_size_enter_width .panel_size_label {
	width: auto;
	text-align: left;
}

#supplements_paint_costs td {
	vertical-align: middle;
	padding: 2px 4px;
}

#supplements_paint_costs td.cost {
	min-width: 120px;
	text-align: right;
}

#supplements_paint_costs input {
	margin: 0px;
}

.validationMessagesContainer {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	padding: 0px !important;
}

.validationMessagesContainer .aiSvgIcon {
	width: 28px;
	min-width: 28px;
}

.validationMessagesContainer svg {
	fill: #0000FF !important;
}

.validationMessagesContainer button {
	border: none !important;
	display: flex !important;
	flex-flow: row;
	text-align: left;
	justify-content: flex-start;
	align-content: center;
	align-items: center;
	padding: 0px !important;
	background-color: transparent !important;
}

@media (max-width: 980px) {

	.calculation_panels .panel_name_container,
	.calculation_panels .panel_extra_container,
	.calculation_panels .panel_content_fields_list .panel_type_container,
	.calculation_panels .panel_content_fields_list .panel_type_container select.panel_type,
	.calculation_panels .panel_content_fields_list .panelSizeValidationMessages,
	.calculation_panels .panel_diy_warning,
	.calculation_panels .bottom_info_on_warnings {
		width: 100% !important;
		float: left;
	}

	ul.calculation_panels td.lbl_panel_size {
		width: 100px !important;
		text-align: left;
	}

	ul.calculation_panels .panel_size_calculated td.lbl_panel_size {
		width: 100px !important;
		padding-left: 0px;
	}

	.calculation_panels .panelSizeValidationMessages {
		margin: 0px;
	}

	.calculation_panels .panel_content_fields_list .panel_content_field.top_info_comments {
		margin-left: 0px;
	}
}

@media (max-width: 840px) {

	.panel_container .panel_size_width_height .panel_size_enter,
	.panel_container .panel_size_calculated {
		flex-flow: row wrap;
		align-content: center;
	}

	.panel_container .panel_size_width_height .panel_size_label,
	.panel_container .panel_size_calculated .panel_size_label {
		text-align: right;
	}
}

@media (max-width: 680px) {
	#extraglaze_body ul.calculation_panels .panel_color_container {
		width: calc(100% - 10px);
	}

	#extraglaze_body ul.calculation_panels td.fld_panel_size {
		padding-right: 0px;
	}
}

@media (max-width: 640px) {

	.panel_container .panel_size_width_height .panel_size_enter,
	.panel_container .panel_size_calculated {
		flex-flow: column wrap;
		align-content: flex-start;
		align-items: flex-start;
	}

	.panel_container .panel_size_width_height .panel_size_label,
	.panel_container .panel_size_calculated .panel_size_label {
		text-align: left;
	}
}

@media (max-width: 520px) {

	.panel_container .panel_size_width_height .panel_size_enter,
	.panel_container .panel_size_calculated {
		flex-flow: row wrap;
	}
}

@media (max-width: 450px) {

	.panel_container .panel_size_width_height .panel_size_enter,
	.panel_container .panel_size_calculated {
		flex-flow: column wrap;
	}
}