@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700&subset=latin,cyrillic);


/*Применяемые цвета*/

:root {
  --fff-color: #fff;
  --border-color: #ccc;
  --input-border: #999;
  --apple-color: #b5f57b; /* кислотный зелёный цвет */
  --blue-color: #c9dbff; /* светло-голубой цвет */
  --green-color: #47A76A; /*Цвет кнопки "+" */
  --red-color: #F6768E; /*Цвет кнопки "-" */
}

/*Обнуление стилей*/
* {
padding:0;
margin:0;
box-sizing: border-box;
}



body {

min-width:600px;
background-image: url('img/bg_rgb_tr.png');


}

/*Контейнер для выравнивания logo и main_content*/

.wrapper {

max-width:1000px;

margin: 0 auto;

background-color: #fff;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); 

}

/*Контейнер для выравнивания footer*/

.wrapper2 {

max-width:1002px;

margin: 0 auto;

background-color: #fff;

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.7); 

}

/*Контейнер - шапка сайта*/

#logo {

text-align:center;


}

/*Контейнер под логотип*/

a.logolink {

display:inline-block;

}


/*Контейнер - основной контент*/

#main_content {

min-height:900px;
border-top: 1px solid #ddd;
}

/*Контейнер - footer*/

#footer {

position: relative;

border-top: 3px solid #b5f57b;

width:100%;

min-height: 100px;

background-color: #474A51;

padding: 20px 120px 20px 20px;
}

#footer  .footer-info{

color: var(--fff-color);

}

#site_counter {
color:#333;
position: absolute;
top:20px;
right:20px;
width:88px;
height:31px;
background-color: #fff;
}


#logo, #main_content {
padding:10px;
}

/*Контейнер под вывод итоговой таблицы*/
#box_summ {
max-width:800px;
margin:40px auto 0;
text-align:left;
}

/*Подпись к итоговой таблице*/

#box_summ span {
display:inline-block;
background-color: var(--blue-color);
padding: 5px 10px;
}


/*Итоговая таблица*/

table#tsumm {
width:100%;
max-width:800px;
margin:0 auto 20px;
border:3px solid var(--blue-color);
/*border-collapse: collapse;*/

}

#tsumm  th, #tsumm td {
position:static;	
text-align: center;
border: 1px solid var(--blue-color);
padding:4px;
margin:0;
}

#tsumm  th {
background-color: var(--blue-color);
}

#tsumm  tr {
border: 1px solid var(--blue-color);
}

#tsumm  tfoot td {
padding-top: 10px;
font-size:110%;
font-weight: bold;
}

/*Особый стиль для 1-й ячейки в строке*/
#tsumm tbody tr td:first-child,
#tresult tbody tr td:first-child  {
text-align: left;
padding-left:10px;
padding-right:10px;
}



/***ОБЩИЙ ВИД КОНТЕЙНЕРОВ***/

/*Контейнер под калькулятор*/
#calc_block{
font-size: 120%;	
max-width:800px;
margin:20px auto;
border:3px solid var(--blue-color);
padding:10px;
}

/*Контейнер под калькулятор*/
#calc_block fieldset {
padding:20px 15px;
}

/*Оформление блоков ввода-вывода данных*/
#calc_block legend {
font-size: 80%;
display:block;
padding:2px 5px;
}

/*Граница блоков ввода-вывода данных*/
#calc_block fieldset, #calc_block legend {
border:1px solid var(--border-color);
}


/******************-END-*******************/


/***ОБЩИЙ ВИД INPUT***/

/*Инпуты типа селект и текст*/
#calc select, #calc input[type="text"]  {
font-family: Roboto Condensed, arial;
font-size: 100%;
width:100%;
min-height: 40px;
}

#calc input[type="button"]  {
font-family: Roboto Condensed, arial;
font-size: 100%;
min-height: 40px;
}

/*Задаём отступы во всех инпутах*/
#calc input  {
padding:0 5px;
}

#calc select  {
padding:0 5px;
}

/*Закругляем инпуты типа селект и оформляем границу*/
#calc select, #calc input{
border-radius:3px;
border:1px solid var(--input-border);
}


/******************-END-*******************/


/***ОБЩИЙ ВИД КНОПОК -РАСЧЁТ- И -СБРОС-***/

/*Блок кнопок -расчёт- и -сброс-*/
#button_block {
position:relative;
padding: 15px 0;
}

/*Задаём стили кнопок -расчёт- и -сброс-*/
#calc input.gobutton, #calc input.resetbutton {
padding: 5px 0;
font-family: Roboto Condensed, arial;
cursor:pointer;
}
/*Кнопка -расчёт*/
#calc input.gobutton {
width:65%;
margin-right:10px;
}

/*Кнопка -сброс*/
#calc input.resetbutton {
width:30%;
position:absolute;
right:3px; /*Отступ справа*/
}
/******************-END-*******************/

/*ОФОРМЛЕНИЕ РЕЗУЛЬТАТОВ РАСЧЁТА*/

/*Контейнер вывода результата*/
#result {
position:relative;
padding-right: 45px;
}

/*Кнопка - добавить продукт в таблицу*/
#calc input#add_dish {
position: absolute;	
right:0;
bottom: 0;	

font-size:26px;
line-height:40px;
font-weight: 900;
font-family: "Times New Roman", Times, serif;
color: var(--fff-color);

width: 40px;
height:40px;
padding:0;	
text-align:center;

border: 0 none;
border-radius: 5px;
background-color: var(--green-color);	

cursor: pointer;
}


/*Кнопка "удалить строку" в таблице с итогом*/
#tsumm input.delete_row {
	
font-size:20px;
/*line-height:26px;*/ 
font-weight: 900;
font-family: "Times New Roman", Times, serif;
color: var(--fff-color);

/*width:26px;
height:26px;*/
text-align:center;
padding: 0 11px 5px;

border: 0 none;
border-radius: 4px;	
background-color: var(--red-color);	

cursor: pointer;


	
}

#tresult {	
border-collapse: collapse;
width:100%;
}

/*Скрываем крайние ячейки таблицы - там расположены кнопки удаления строки*/

#tresult .lastcell {

display:none;	
	
}

#tresult td, #tresult th{
background-clip: padding-box;
border: 1px solid #ddd;
text-align:center;	
padding: 4px;

}

#tresult tr{
}

/******************-END-*******************/



/*ВЫВОД ИНФОРМАЦИОННОГО СООБЩЕНИЯ, ВЫДЕЛЕНИЕ ИНФОРМАЦИИ*/
#calc_block .err {
color: red;
line-height:26px;
}



/*ВЫВОД РЕЗУЛЬТАТОВ РАСЧЁТА РАЗЛИЧНЫМИ ЦВЕТАМИ*/
#calc_block b.important_blue, #calc_block b.important_green, 
#calc_block b.important_red, #calc_block b.important_gold,
#calc_block b.important_white {
font-weight: 500;
border-radius: 4px;
padding: 4px 4px; 
}

#calc_block b.important_blue{
background: #0066cc;
color: #fff;
}

#calc_block b.important_green {
background: #009966;
color: #fff;
}

#calc_block b.important_red {
background: #ff6633;
color: #fff;
}

#calc_block b.important_gold {
background: #f4c430;
color:#222;
}

#calc_block b.important_white {
background: #eee;
color: #222;
border: 1px solid #ddd;
}