#services th{    font-size: 13px;}
#popup_div, #popup_liq, #popup_history{
	background-color: #fff;
	border-radius: 10px;
	padding: 20px 15px;
	max-width: 600px;
	width: 98%;
	margin: 0 auto;
	position: relative;
}
div#popup_history{
	max-width: 900px;
}
hr {
	width: 100%;
}
.pay_form>div>span{
	display: inline-block;
    margin-left: 5px; 
    font-size: 23px;
	margin-right: 15px;
}
.pay_form>div{
	display: flex;
    align-items: center;
}
.pay_form input[type="text"]{
	width: 130px;
    text-align: center;
}
.pay_form button{
	margin-left: 10px;
}
.pay_form{
	display: flex;
	flex-wrap: wrap;
	padding: 8px;
    border: 1px solid #bbbbbb;
}
.und_but_pay_text{
	margin: 2px 0;
	width: 100%;
}
.d-f{
	display: flex;
}
.btn-platon:hover {
    color: #fff;
    background-color: #ff8249;
    border-color: #ff8249;
}
.btn-platon{
	color: #fff;
    background-color: #E7682E;
    border-color: #E7682E;
}
.btn-platon:not(:disabled):not(.disabled):active:focus{
    box-shadow: 0 0 0 0.2rem rgba(255, 130, 73, 0.76);
}


table .btn {
	margin-bottom:3px;	
}
.col-form-label {
    margin: 0;
	padding-left: 0;
    padding-top: 0;
}
#change_period {
	min-width: 167px;
	margin-bottom:6px;
}

.form-group {
	position: relative;
}
.open-button {
	position: absolute;
	bottom: 5px;
	right: 3px;
	width: 25px;
	height: 25px;
	background: #fff;
	pointer-events: none;
  }
  
  .open-button button {
	border: none;
	background: transparent;
  }

.no-padding {
	padding-right: 0!important;
    padding-left: 0!important;
}
.form-export {
	max-width: 480px;
	margin: 0 auto;
}
.form-export label{
	margin: 0;
}
.form-export .btn{
	clear: both;
}

.form-group.fromdate,
.form-group.todate {
    width: 140px;
    float: left;
    margin: 0 5px;
    margin-bottom: 1rem;
}

@media (max-width: 768px)  { 
	.pay_form .d-flex {
		flex-wrap: wrap;
	}
	.pay_form input[type="text"] {
		margin-bottom: 5px;
	}
	.pay_form button {
		margin-left: 0;
	}
}

/* 
Responsive tables

Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
table#meters th {text-align: right;}
table#meters th:last-child {text-align: center;}
table#meters th:nth-of-type(1), table#meters th:nth-of-type(2), table#meters th:nth-of-type(3),
table#meters td:nth-of-type(1), table#meters td:nth-of-type(2), table#meters td:nth-of-type(3) {
	text-align: left;
}
table#meters td:nth-of-type(6) { white-space: nowrap; }

table#services th { text-align: right;}
table#services th:nth-of-type(1) { text-align: left;}
table#services td:nth-of-type(1) { text-align: left;}

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

	/* Force table to not be like tables anymore */
	table.table-responsive-sm, 
	table.table-responsive-sm thead, table.table-responsive-sm tbody, 
	table.table-responsive-sm th, table.table-responsive-sm td, table.table-responsive-sm tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	table.table-responsive-sm thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	table.table-responsive-sm tr { border: 1px solid #ccc; }
	
	table.table-responsive-sm td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		text-align:right;
		padding-left: 42%!important;	
		min-height: 46px;
	}
	table#meters td:nth-of-type(5) {
		 padding-left: 56%!important;	
	}
	
	table.table-responsive-sm td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 13px;
		left: 6px;
		width: 42%; 
		padding-right: 10px; 
		padding-bottom: 5px;
		white-space: nowrap;
		font-size:13px;
		font-weight: bold;
		text-align: left;
	}
	table.table-responsive-sm td.text-center {
		text-align:right!important;
	}
	table.table-responsive-sm td.text-center .btn {
		margin-right:0;
	}
	
	/*
	Label the data
	*/
	table#meters td:nth-of-type(1):before { content: "Послуга"; }
	table#meters td:nth-of-type(2):before { content: "№ приладу"; }
	table#meters td:nth-of-type(3):before { content: "Місце встанов."; }
	table#meters td:nth-of-type(4):before { content: "Дата монтажу"; }
	table#meters td:nth-of-type(5):before { content: "Дата наступ. повірки"; }
	table#meters td:nth-of-type(6):before { content: "Тип ПО"; }
	table#meters td:nth-of-type(7):before { content: "Од. вим"; }
	table#meters td:nth-of-type(8):before { content: "Дата показ."; }
	table#meters td:nth-of-type(9):before { content: "Поч. показ."; }
	table#meters td:nth-of-type(10):before { content: "Кін. показ."; }
	table#meters td:nth-of-type(11):before { content: "Ввести показання"; }
	
	table#services td:nth-of-type(1):before { content: "Послуга"; }
	table#services td:nth-of-type(2):before { content: "Поч. залишок"; }
	table#services td:nth-of-type(3):before { content: "Нараховано"; }
	table#services td:nth-of-type(4):before { content: "Оплачено"; }
	table#services td:nth-of-type(5):before { content: "Кін. залишок"; }
	
	/* #popup_history table td:nth-of-type(1):before { content: "Дата"; }
	#popup_history table td:nth-of-type(2):before { content: "Показання приладу обліку"; }
	#popup_history table td:nth-of-type(3):before { content: "Джерело"; } */
}