@charset "utf-8";
/* CSS Document */


.deposit-calculator-container {

}

.deposit-calculator-container * {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.deposit-calculator-container h1 {
	margin: 0 20px 20px;
	line-height: 30px;
}

.form-box {
	overflow: hidden;
}

.left-box {
	float: left;
	width: 725px;
	background: #fffaf7;
	background: -moz-linear-gradient(top, #fffaf7 0%, #ffffff 60%, #ffffff 100%);
	background: -webkit-linear-gradient(top, #fffaf7 0%,#ffffff 60%,#ffffff 100%);
	background: linear-gradient(to bottom, #fffaf7 0%,#ffffff 60%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffaf7', endColorstr='#ffffff',GradientType=0 );
}

.closed-box .left-box {
	border: 1px dashed #fee2d2;
}

.right-box {
	font-size: 14px;
    color: #878787;
    width: 275px;
    float: right;
    padding: 60px 40px 0;
}

.closed-box .right-box {
	padding: 0 40px;
}

.box-header {
	
}

.box-header_num {
	float: left;
}

.box-header_num span {
	display: block;
    margin: 12px 20px;
    font-size: 16px;
	font-weight: 700;
    color: #fff;
    background-color: #f78f4a;
    padding: 5px 0;
    border-radius: 16px;
	width: 30px;
    text-align: center;
}

.box-header_text {
	font-size: 16px;
	font-weight: 700;
	color: #f78f4a;
	padding: 17px 0;
	border-bottom: 1px solid #fee2d2;
	overflow: hidden;
	position: relative;
}

.box-header_text span {
	font-weight: 400;
}

.closed-box .box-header_text {
	border: none;
}

.box-body {
	padding: 20px 0 30px 70px;
	overflow: hidden;
}

.closed-box .box-body { display: none; }

.box-body_row {
	overflow: hidden;
}

.box-input_input { height: 43px; }

.box-input {
	float: left;
	margin: 0 0 20px;
}
.box-input-left { width: 285px;}
.box-input-right { width: 370px;}

.box-input_label {
	color: #585858;
    font-size: 14px;
	margin: 0 0 10px 0;
}

.box-body input,
.box-body select {
	border: 1px solid #eaeaea;
	background-color: #fcfcfc;
	outline: none;
	box-shadow: none;
	font-size: 16px;
	padding: 10px 15px;
}

.box-body input.datepicker {
	width: 250px;
	background: #fcfcfc url(../images/page-deposit-calc/datepicker_bg.png) right 10px center no-repeat;
	line-height: 1;
}

.box-body input.datepicker.small {
	width: 150px;
}

.box-body input.default_input {
	width: 160px;
	text-align: center;
	line-height: 1;
}

.box-body input.default_input.small {
	width: 100px;
}

.box-body select {
	width: 250px;
	-webkit-appearance: none;
	-moz-appearance: none;
	background: #fcfcfc url(../images/page-deposit-calc/select_arrow.png) right 10px center no-repeat;
	cursor: pointer;
	line-height: 18px;
}

.box-body select::-ms-expand {
    display: none;
}


.radio_group.closed { display: none; }
.radio_group input[type=radio] { display: none; }
.radio_group .radio_element { margin: 0 0 5px 0; }
.radio_group input[type=radio] + label {
	font-size: 16px;
	color: #000;
	cursor: pointer;
    position: relative;
    margin: 0 0 0 25px;
    display: inline-block;
}

.radio_group input[type=radio] + label:before {
	content: '';
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    top: 1px;
    left: -25px;
    border: 1px solid #bcbcbc;
    border-radius: 8px;
    box-sizing: border-box;
}

.radio_group input[type=radio]:checked + label:before {
	background: #fff url(../images/page-deposit-calc/radio_selected.png) center center no-repeat;
	border: 1px solid #63cf34;
}

.checkbox_group { margin: 0 0 20px 0; }
.checkbox_group .checkbox_element{ margin: 0 0 5px 0; }
.checkbox_group input[type=checkbox] { display: none; }
.checkbox_group input[type=checkbox] + label {
	font-size: 16px;
	color: #000;
	cursor: pointer;
    position: relative;
    margin: 0 0 0 25px;
    display: inline-block;
}

.checkbox_group input[type=checkbox] + label:before {
	content: '';
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    top: 1px;
    left: -25px;
    border: 1px solid #bcbcbc;
    border-radius: 3px;
    box-sizing: border-box;
}

.checkbox_group input[type=checkbox]:checked + label:before {
	background: #fff url(../images/page-deposit-calc/checkbox_selected.png) center center no-repeat;
	border: 1px solid #63cf34;
}

.box-rate_type_base-container,
.box-rate_type_date-container,
.box-insertion-container {
	background-color: #f4f4f4;
	padding: 15px;
	overflow: hidden;
	width: 100%;
}

.box-rate_type_base-container { display: none; }
.box-rate_type_date-container { display: none; }
.box-insertion-container { display: none; }

.dop_row {
	padding: 0 0 20px 0;
	overflow: hidden;
}

.box-rate_type_base-container .dop_row-box-left {
	float: left;
    width: 180px;
}

.box-rate_type_base-container .dop_row-box-right {
	float: left;
	width: 120px;
}

.box-rate_type_date-container .dop_row-box-left {
	float: left;
    width: 180px;
}

.box-rate_type_date-container .dop_row-box-right {
	float: left;
	width: 120px;
}

.box-insertion-container .dop_row-box-left {
	float: left;
    width: 145px;
}

.box-insertion-container .dop_row-box-left input.default_input {
	width: 125px
}

.box-insertion-container .dop_row-box-right {
	float: left;
    width: 155px;
}

.box-insertion-container .dop_row-box-right input.datepicker {
	width: 135px;
}

.box-selection-period .dop_row-box-left {
	float: left;
    width: 180px;
}

.box-selection-period .dop_row-box-left select {
	width: 160px;
}

.box-selection-period .dop_row-box-right {
	float: left;
    width: 180px;
}

.box-selection-period .dop_row-box-right input.default_input {
	width: 160px;
}

.box-selection-period-container .dop_row-box-left {
	float: left;
	width: 180px;
}

.box-selection-period-container .dop_row-box-left input.default_input {
	width: 160px;
}

.box-selection-period-container .dop_row-box-right {
	float: left;
	width: 180px;
}

.box-selection-period-container .dop_row-box-right input.datepicker {
	width: 160px;
}

.box-selection-custom-container .dop_row-box-left {
	float: left;
	width: 145px;
}

.box-selection-custom-container .dop_row-box-left input.default_input {
	width: 125px;
}

.box-selection-custom-container .dop_row-box-right {
	float: left;
	width: 155px;
}

.box-selection-custom-container .dop_row-box-right input.datepicker {
	width: 135px;
}

.dop_row-remove {
	position: relative;
	float: left;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 1px dashed #f66060;
    border-radius: 20px;
	cursor: pointer;
}

.dop_row-remove:hover {
	border-style: solid;
}

.dop_row-remove:before {
	content: '—';
	color: #f66060;
	display: block;
    width: 16px;
    margin: 8px auto;
    font-weight: 700;
	
}

.dop_row-add {
	position: relative;
	float: left;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 1px dashed #62ca36;
    border-radius: 20px;
	cursor: pointer;
}

.dop_row-add:hover {
	border-style: solid;
}

.dop_row-add:before {
	content: '+';
	color: #62ca36;
	display: block;
	width: 9px;
	margin: 12px auto;
    font-weight: 700;
    line-height: 1;
}

.dop_row-add:after {
	position: absolute;
    top: 0;
    left: 50px;
    color: #62ca36;
    margin: 8px 0;
}

.box-rate_type_base-container .dop_row-add:after,
.box-rate_type_date-container .dop_row-add:after {
	content: 'Добавить еще одну ставку';
    width: 175px;
}

.box-insertion-container .dop_row-add:after {
	content: 'Добавить еще одно пополнение';
    width: 215px;
}

.box-selection-custom-container .dop_row-add:after {
	content: 'Добавить еще одно частичное снятие';
    width: 250px;
}



.row_label,
.row_label_switch {
	color: #585858;
	font-size: 14px;
	float: left;
	padding: 10px 0;
	margin: 0 0 20px;
}

.row_label { width: 285px; }
.row_label_switch { width: 160px; }

.radio_switch {
	float: left;
	overflow: hidden;
}

.radio_switch .radio_element {
	font-size: 16px;
	padding: 12px 25px;
	margin: 0 15px 0 0;
	text-align: center;
	float: left;
	color: #62ca36;
	background-color: #fff;
	border: 1px dashed #62ca36;
	border-radius: 3px;
	cursor: pointer;
}

.radio_switch .radio_element.checked {
	background-color: #62ca36;
	border-style: solid;
	color: #fff;
	cursor: auto;
}

.add_elements .box-input_add {
	float: right;
}
.add_elements .box-input_add.closed { display: none; }

.add_elements .box-input-right > .box-input_input {
	margin: 30px 0 0 0;
}
.add_elements .row_label {
	margin: 30px 0 20px;
}
.insertion_elements select {
	width: 160px;
}
.insertion_elements .row_label {
	margin: 30px 0 20px;
}
.insertion_elements .box-input_add {
	float: right;
	margin: 0 20px 0 0;
	display: none;
}
.insertion_elements .box-input_add.closed { display: none; }

.selection_elements .row_label {
	padding: 0 65px 0 0;
}

.toggle_selections {
	position: relative;
	float: left;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 1px dashed #62ca36;
    border-radius: 20px;
	cursor: pointer;
}

.toggle_selections.opened {
	border: 1px dashed #f66060;
}

.toggle_selections:hover {
	border-style: solid;
}

.toggle_selections:before {
	content: '+';
	color: #62ca36;
	display: block;
	width: 9px;
	margin: 12px auto;
    font-weight: 700;
    line-height: 1;
}

.toggle_selections.opened:before {
	content: '—';
	width: 14px;
	color: #f66060;
}

.toggle_selections:after {
	content: 'Добавить частичное снятие';
	position: absolute;
    top: 0;
    left: 50px;
    width: 200px;
    color: #62ca36;
    margin: 8px 0;
}

.toggle_selections.opened:after {
	content: 'Убрать частичное снятие';
	color: #f66060;
}

.selection_box {
	overflow: hidden;
    margin: 60px 0 0px 5px;
}

.selection_box.closed { display: none; }

.box-selection-container,
.box-selection-period,
.box-selection-period-container,
.box-selection-custom-container {
	margin: 20px 0 0 0;
	overflow: hidden;
}

.box-selection-period-container { padding: 0 0 15px 0; }

.box-selection-period-container.closed { display: none; }
.box-selection-custom-container.closed { display: none; }



.data_toggle {
	position: absolute;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 1px dashed #62ca36;
    border-radius: 20px;
	cursor: pointer;
	right: 90px;
	top: 7px;
}

.data_toggle:hover {
	border-style: solid !important;
}

.data_toggle:before {
	content: '+';
	color: #62ca36;
	display: block;
	width: 9px;
	margin: 12px auto;
    font-weight: 700;
    line-height: 1;
}

.data_toggle:after {
	content: 'Показать';
	position: absolute;
    top: 0;
    left: 50px;
    width: 200px;
    color: #62ca36;
    margin: 8px 0;
	font-weight: 400;
	font-size: 14px;
}

.opened-box .data_toggle {
	border: 1px dashed #f66060;
}

.opened-box .data_toggle:before  {
	content: '—';
	color: #f66060;
	display: block;
	margin: 8px auto;
	width: 16px;
	line-height: 20px;
}

.opened-box .data_toggle:after  {
	content: 'Скрыть';
	color: #f66060;
}

.data_elements select {
	width: 100%;
}

.data_elements .box-input-right {
	padding: 0 20px 0 0;
}

.box-input-end_date.closed { display: none; }
.box-input-deposit_period.closed { display: none; }


span.toggle-input {
	display: block;
    float: right;
    margin: 8px 15px 0 0;
    color: #0c77f8;
    border-bottom: 1px dashed #0c77f8;
    cursor: pointer;
}

span.toggle-input:hover {
	border: none;
}






.ui-slider {
	background: #ffdfa0;
	border: none;
	border-radius: 0;
}

.ui-slider .ui-slider-handle {
	position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    cursor: default;
    touch-action: none;
	top: 3px;
    margin-left: -7px;
	background: transparent url('../images/page-deposit-calc/selector.png') center center no-repeat;
	outline: none;
	border: none;
    border-radius: 0;
}

.ui-slider .ui-slider-range {
	background: #62ca36;
}

.sum_selector {
	height: 3px;
	width: 160px;
}

.sum_selector.small {
	width: 125px;
}

.form-send-button {
	position: relative;
    margin: 70px 0 0 0;
    border-top: 1px solid #62ca36;
}

.form-send-button button {
	background-color: #62ca36;
    border: none;
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    padding: 30px 100px;
    border-radius: 3px;
    margin: 0 auto;
    display: block;
    position: relative;
    top: -40px;
    line-height: 1;
    cursor: pointer;
	outline: none;
}

.diagrammBoxHead {
	font-size: 24px;
    padding: 0 40px;
	margin: 0 0 40px 0;
}

.leftDiagrammBox {
	float: left;
	width: 50%;
	padding: 0 50px 0 120px;
	margin: 0 0 40px 0;
}

.leftElement { margin: 0 0 30px 0; }

.leftElement p {
	font-size: 16px;
	margin: 0 0 15px 0;
}

#result_sum {
	color: #62ca36;
	font-size: 30px;
	font-weight: 700;
}

#result_rate {
	font-size: 30px;
}

.leftDiagrammBox  .downloadCalculation {
	margin: 0 0 15px 0;
}

.downloadCalculation {
	width: 200px;
	font-size: 16px;
	padding: 16px 20px 16px 45px;
	line-height: 1;
	border: 1px dashed #62ca36;
	border-radius: 5px;
	color: #62ca36;
	cursor: pointer;
	background: url('../images/page-deposit-calc/download_calculation.png') left 15px center no-repeat;
}

.downloadCalculation:hover {
	border-style: solid;
}

.downloadCalculation.loading {
	background-image: url('../images/ajax-loader-mini.gif');
}

.copyCalculationLink.hidden {
	visibility: hidden;
}

.copyCalculationLink {
	padding: 16px 0 16px 45px;
	width: 250px;
	color: #989898;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	background: url('../images/page-deposit-calc/copy_link.png') left 15px center no-repeat;
}

.copyCalculationLink span {
	display: inline-block;
	border-bottom: 1px dashed #989898;
}

.copyCalculationLink:hover span {
	border-style: solid;
}

.changeCalculation {
	width: 250px;
	font-size: 16px;
	padding: 16px 20px 16px 45px;
	line-height: 1;
	border: 1px solid #62ca36;
	border-radius: 3px;
	color: #62ca36;
	cursor: pointer;
	background: #e9ffdf url('../images/page-deposit-calc/update_calculation.png') left 15px center no-repeat;
	position: relative;
}

.changeCalculation.saved:after {
	content: attr(data-time);
    display: block;
    position: absolute;
    font-size: 14px;
    width: 100%;
    left: 0;
    text-align: center;
    bottom: -25px;
}

.changeCalculation.loading {
	background-image: url('../images/ajax-loader-mini.gif');
}

.diagrammButtons {
	clear: both;
	text-align: center;
}

.diagrammButtons > div {
	display: inline-block;
	margin: 0 20px;
}

#tableBox {
	margin: 40px 0 0 0;
}

.tableButtons {
	text-align: center;
	margin: 30px 0;
}

.tableButtons > div {
	display: inline-block;
	margin: 0 15px;
}

#resultTable, #taxesTable {
	display: table;
	margin: 0 auto;
}

#resultTable .row, #taxesTable .row {
	display: table-row;
}

#resultTable .col, #taxesTable .col{
	display: table-cell;
	border-bottom: 1px solid #e8e8e8;
}

#resultTable .label, #taxesTable .label {
	display: none;
	color: #989898;
	font-size: 14px;
	padding: 12px;
	height: 60px;
}

#resultTable .row:first-child .label, #taxesTable .row:first-child .label  { display: block; }

#resultTable .col.c_date, #taxesTable .col.c_date { width: 90px; }
#resultTable .col.c_number, #taxesTable .col.c_number  { width: 70px; }
#resultTable .col.c_charged, #taxesTable .col.c_charged  { width: 120px; }
#resultTable .col.c_tax, #taxesTable .col.c_tax { width: 110px; }
#resultTable .col.c_percentage, #taxesTable .col.c_percentage  { width: 110px; }
#resultTable .col.c_insertion, #taxesTable .col.c_insertion  { width: 110px; }
#resultTable .col.c_selection, #taxesTable .col.c_selection  { width: 110px; }
#resultTable .col.c_result, #taxesTable .col.c_result  { width: 130px; }

#resultTable .col .value, #taxesTable .col .value {
	text-align: center;
	padding: 12px;
}

#resultTable .col.c_date .value, #taxesTable .col.c_date .value { text-align: left; }


#resultTable .col.c_tax .label, #taxesTable  .col.c_tax .label { padding: 12px 26px; }
#resultTable .col.c_selection  .label, #taxesTable  .col.c_selection  .label  { padding: 12px 20px; }
#resultTable .col.c_result .label,#taxesTable  .col.c_result .label  { padding: 12px 4px; }

#rightDiagrammBox {
	float: left;
	width: 50%;
	height: 325px;
	padding: 0 40px 10px 0;
	margin: 0 0 40px 0;
}

#calcResult {
	margin: 0 20px 20px;
    border-radius: 3px;
    font-weight: 700;
    padding: 15px 30px;
    font-size: 16px;
	display: none;
}

#calcResult.e {
	border: 1px dashed #ff4a68;
	background: #ffdbdb;
	color: #f95555;
}

#calcResult.s {
	border: 1px dashed #62ca36;
	background: #e9ffdf;
	color: #62ca36;
}


#resultBox { display: none; }

#otherDiagrams { 
	overflow: hidden;
	margin: 0 40px;
}
#otherDiagrams p { padding: 0; }
.diagram {
	min-width: 310px;
    max-width: 100%;
    margin: 15px auto 0;
}

#container {
	margin: 0;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    border: none;
}

@media all and (max-width: 1000px) {
	.form-box {
		width: 725px;
		margin: 0 auto;
	}
	
	.left-box {
		float: none;
		width: 100%;
	}
	
	.right-box,
	.closed-box .right-box{
		width: auto;
		float: none;
		padding: 0;
	}
	.right-box p { margin-bottom: 7px; }
}

@media all and (max-width: 750px) {
	.form-box {
		width: 500px;
	}
	
	.row_label,
	.row_label_switch {
		padding: 0;
		margin: 0 0 5px;
		float: none;
		width: auto;
	}
	.add_elements .row_label { margin: 30px 0 5px; }
	.add_elements .box-input-right { margin: -25px 0 0 0; }
	
	.insertion_elements .row_label { margin: 0 0 5px; }
	.selection_elements .row_label { padding: 0; }
	.box-header_text span { display: none; }
	
	#diagrammBox {
		overflow: hidden;
		margin: 0 40px;
	}
	
	.leftDiagrammBox {
		float: none;
		width: 300px;
		padding: 0;
		margin: 0 auto;
	}
	
	#rightDiagrammBox {
		float: none;
		width: 310px;
		padding: 0;
		margin: 0 auto;
	}
	
	.copyCalculationLink {
		padding: 16px 0 16px 25px;
		background-position: left 5px center;
	}
	
	.diagrammButtons {
		clear: none;
		padding: 0 0 18px 0;
	}
	
	.diagrammButtons > div { margin: 5px 20px; }
	
	#tableBox { margin: 0; }
	
	.tableButtons .copyCalculationLink { margin: 20px 0 0 0; }
	.resultTableWrapper {
		overflow-y: hidden;
		overflow-x: scroll;
	}
	
	#resultTable, #taxesTable { width: 886px; }
	.resultTableWrapper::-webkit-scrollbar {
		-webkit-appearance: none;
		width: 14px;
		height: 14px;
	}

	.resultTableWrapper::-webkit-scrollbar-thumb {
		border-radius: 8px;
		border: 3px solid #fff;
		background-color: rgba(0, 0, 0, .3);
	}
}

@media all and (max-width: 550px) {
	.form-box { width: 310px; }
	.box-header_num span { margin: 12px 8px; }
	.box-body { padding: 20px 0 30px 5px; }
	.box-input-left { width: 305px; }
	.box-input-right { width: 305px; }
	span.toggle-input {  margin: -30px 15px 0 0; }
	
	.box-rate_type_base-container,
	.box-rate_type_date-container,
	.box-insertion-container {
		padding: 8px;
	}
	
	.box-rate_type_base-container .dop_row-box-left,
	.box-rate_type_date-container .dop_row-box-left { width: 150px; }
	
	.box-rate_type_base-container input.default_input, 
	.box-rate_type_date-container input.default_input { width: 130px; }
	
	.box-rate_type_base-container .sum_selector { width: 130px; }
	
	.box-rate_type_base-container .dop_row-box-right, 
	.box-rate_type_date-container .dop_row-box-right { width: 95px; }
	
	.box-rate_type_base-container input.default_input.small,
	.box-rate_type_date-container input.default_input.small { width: 80px; }
	
	.radio_switch { float: none; }
	.radio_switch .radio_element {
		padding: 10px 5px;
		font-size: 15px;
		margin: 0 10px 0 0;
	}
	.radio_switch .radio_element:last-child { margin: 0; }
	
	.add_elements .box-input_add { margin: 0 5px 0 0; }
	.add_elements input.default_input.small { width: 80px; }
	.add_elements select { width: 200px; }
	
	.insertion_elements .box-input_add { margin: 0; }
	.insertion_elements .box-input_add input.default_input { width: 130px; }
	.insertion_elements .box-input_add .sum_selector { width: 130px; }
	
	.box-insertion-container .dop_row-box-left { width: 105px; }
	.box-insertion-container .dop_row-box-left input.default_input { width: 95px; }
	.box-insertion-container .dop_row-box-left .sum_selector { width: 95px; }
	
	.box-insertion-container .dop_row-box-right { width: 140px; }
	.box-insertion-container .dop_row-box-right input.datepicker { width: 130px; }
	
	.box-selection-period .box-input_label {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.box-selection-period .dop_row-box-left { width: 150px; }
	.box-selection-period .dop_row-box-left select { width: 140px; }
	.box-selection-period .dop_row-box-right { width: 150px; }
	.box-selection-period .dop_row-box-right input.default_input { width: 150px; }
	
	.box-selection-period-container .dop_row-box-left { width: 150px; }
	.box-selection-period-container .dop_row-box-left input.default_input { width: 140px; }
	.box-selection-period-container .dop_row-box-left .sum_selector { width: 140px; }
	.box-selection-period-container .dop_row-box-right { width: 150px; }
	.box-selection-period-container .dop_row-box-right input.datepicker { width: 150px; }
	
	.box-selection-custom-container .dop_row-box-left { width: 110px; }
	.box-selection-custom-container .dop_row-box-left input.default_input { width: 100px; }
	.box-selection-custom-container .dop_row-box-left .sum_selector { width: 100px; }
	
	.box-selection-custom-container .dop_row-box-right { width: 145px; }
	
	.data_toggle { right: 10px; }
	.data_toggle:after { display: none; }
	
	#diagrammBox { margin: 0; }
	.tableButtons .changeCalculation { margin: 30px 0 0 0; }
	#otherDiagrams { margin: 0; }
	#otherDiagrams p { margin: 0 5px 18px 5px; }
	.form-send-button button {
		padding: 20px 60px;
		top: -30px;
	}
}