/*Экспресс оценка инвест проекта"*/

h2 {

    font-size: 1.9rem;
    font-weight: bold;
    line-height: 3rem;
    margin: 5px;

}



/*Ошибки валидации*/

form.exspresinvest label{
    
    
    font-size: 14px;
    margin:10px 0 5px 0;
    color: white;
    padding: 7px;
    background:#4FB3C3;
    text-decoration: underline;
    
    border: 0px solid #400000;
    position: relative;
    display: block;
}



form.exspresinvest label:hover::after {
    content: attr(data-title); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 0%; top: 100%; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: #EDEDED; /* Полупрозрачный цвет фона */
    font-family: Arial, sans-serif; /* Гарнитура шрифта */
    font-size: 14px; /* Размер текста подсказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333;
    border-radius:0px 0px 5px 5px;
    color:#3F3F3E; 
    font-weight: normal;
    
   }

form.exspresinvest input[type="text"]{
    
width: 100%;
font-size: 18px;
color:#014d54;
font-weight: bold;

}


form.exspresinvest input[type="submit"] {
width:250px;
padding: 10px;
height: 50px;
padding: 0;
font-size: 22px;
font-weight: normal;
text-align: center;
text-indent: 0;
background-color: #F49F00;
border-radius:0px;

margin:20px auto 10px;
display: block;
position: relative;
color: white;
font-weight: bold;
}

form.exspresinvest input[type="submit"]:hover {

background:#F08C00;
}



form.exspresinvest .form_error{
    font-size: 17px;
    color: red;
    text-indent: 0;

    
}


.err_valid_info{
    
    color: red;
    padding: 10px;
    background-color: white;
    border: 1px solid silver;
    margin: 10px 0;
    width: 100%;
    display: block;
    
}

    .form_error{
        
color: red;
font-size: 1.8rem;
font-weight: normal;
text-indent: 0px;
padding: 0;    
        
    }

.form_expinvest{
    
    margin-top: 0px;
    
}

.form_cell{
    
    border: 1px solid #BDBDBD;
    background:#EDEDED;
    padding: 10px;
    margin-top: 0px;
    position: relative;
    
}


p.descrip_input_hag span{

    color:#275860;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 23px;
    text-decoration: underline;
    
}


.form_cell span.hag{
    
    display: block;
    position: absolute;
    width: 70px;
    height: auto;
    background:#bfbdbc;
    border: 1px solid #5C3535;
    top:-15px;
    left: 10px;
    text-align: center;
    padding-top: 1px;
    border-radius:0px;
    color:white;
    font-weight: bold;
}


.vn_activ{
    
    width: 100%;
    text-align: center;
    cursor: pointer;
    font-size: 18px;
    color:#014d54;
    font-weight: bold;
    
}









/* 
Обычные стили для десктопов/лэптопов 
*/
table.indicator{ 
  width: 100%; 
  border-collapse: collapse; 
}
/* Черно-белые полоски */
table.indicator tr:nth-of-type(odd) { 
  background: #eee;
  text-align: left; 
}
table.indicator th { 
  background:#4AA6B5; 
  color: white; 
  font-weight: bold; 
}
table.indicator td, table.indicator th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: center; 
}    






/*Адаптивная таблица - склад*/


@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Заставьте таблицу больше не вести себя как таблица */
	table.indicator, table.indicator thead, table.indicator tbody, table.indicator th, table.indicator td, table.indicator tr { 
		display: block; 
        font-size: 1.5rem;
	}
	
	/* Скройте заголовки таблицы (но в целях доступности не с display: none;) */
	table.indicator thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.indicator tr { border: 1px solid #ccc; }
	
	table.indicator td { 
		/* Поведение как у «строки» */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	table.indicator td:before { 
		/* Теперь как у заголовка таблицы */
		position: absolute;
		/* Значения top/left имитируют отступ */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Пометьте данные
	*/

	table.indicator td:nth-of-type(1):before { content: "Показатель"; }
	table.indicator td:nth-of-type(2):before { content: "Значение"; }
    
	table.indicator td:nth-of-type(3):before { content: "Единица измерения"; }

   

} 






















/*Стилизация ползунка горизонта расчета экспрес анализ проекта*/


input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -14px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #FF7F50;
  border-radius: 1.3px;
  border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 16px;
  width: 16px;
  border-radius: 0%;
  background: red;
  cursor: pointer;
  
}
input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 16px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}



output[for=fader],output[for=fader_1],output[for=fader_2]{text-align: center;
font-size: 20px;
font-weight: bold;
color: #014d54;

} 

















@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Заставьте таблицу больше не вести себя как таблица */
	table.exspresinvest, table.exspresinvest thead, table.exspresinvest tbody, table.exspresinvest th, table.exspresinvest td, table.exspresinvest tr { 
		display: block; 
        font-size: 1.5rem;
	}
	
	/* Скройте заголовки таблицы (но в целях доступности не с display: none;) */
	table.exspresinvest thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.exspresinvest tr { border: 1px solid #ccc; }
	
	table.exspresinvest td { 
		/* Поведение как у «строки» */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	table.exspresinvest td:before { 
		/* Теперь как у заголовка таблицы */
		position: absolute;
		/* Значения top/left имитируют отступ */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Пометьте данные
	*/
	table.exspresinvest td:nth-of-type(1):before { content: "Исходный параметр"; }
	table.exspresinvest td:nth-of-type(2):before { content: "Значение"; }


    

} 

























.result_exspesinvest span{
display: block; 
margin-top: 5px;
font-size: 16px;
text-align: center;
    
}

.total_value{
    
    
    border: 0px solid #004080;
    padding: 0px;
}



/*Кнопка печати блока страницы*/



.calcul{
width: 270px;

height: 50px;
padding: 0;
font-size: 20px;
font-weight: normal;
text-align: center;
text-indent: 0;
background-color: #F49F00;
border-color: #d43f3a;
border-radius: 3px;
margin: 20px auto 10px;
display: block;
position: relative;
color: white;
line-height: 45px;
  
}

.calcul:hover{
     
     color:white 
    
}