* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	/*--index: calc(1vw + 1vh);*/
	/*--color-header: #f4efec;*/
	/*--color-text: #cdc6c3;*/
	/*--gallery-gap: calc(var(--index) * 7.5)*/
	--color-more: rgb(1, 165, 92);
	--color-less: rgb(165, 3, 3);
	--weight-card: 20rem;
	--card-background-color: rgba(208, 214, 214, 0.52);
	/*--height-card: max-;*/
	--nav-bar-bg-color: rgb(107, 116, 124)
}
#root{
	/*display: flex;*/
	/*justify-content: center;*/
	/*position: relative;*/
	/*width: 100vw;*/

}
.navbar{
	background-color: var(--nav-bar-bg-color);
}
#div-body{

}
.application_items{
	margin: 10px;
}


/*	Bills	*/
.inform_card,
.rate-card,
.subs_card,
.bills_card{
	width: var(--weight-card);
	/*height: 6rem;*/
	border: black 1px solid;
	border-radius: 10px;
	/*padding: 5px;*/
	position: relative;
	box-shadow: 2px 2px 20px 2px;
	background-color: var(--card-background-color);
}
.bills_card_body, .rate-card-body{
	margin: 5px;
}
.bills-card-header, .rate-card-header{
	display: flex;
	justify-content: space-between;
}

.bills-title{
	font-weight: bold;
}
.bills-payment_date{}


.bills-indications{
	position: relative;
	display: flex;
	justify-content: space-between;
}
.bills-indications-value{
	font-weight: bolder;
}
.bills-amount{
	font-weight: bolder;
}
.bills-difference{
	position: relative;
	display: flex;
	justify-content: space-between;
}
.bills-indications-diff{
	font-size: 9pt;
	font-weight: bolder;
}
.bills-amount-diff{
	font-size: 9pt;
	font-weight: bolder;
}

.bills-indications-unit{
	font-weight: normal;
	font-size: .8em;
}
.bills-indications-unit-pow{
	font-size: .7em;
	position: relative;
  	bottom: 1ex;
}

.card-buttons{
	padding: 10px 10px;
}

.card_buttons_control{
	display: none;
	position: absolute;
	/*width: 95%;*/
	border-radius: 10px;
	background-color: rgba(208, 214, 214, 0);
	justify-content: center;
	align-content: center;
}
.subs_buttons_control{
	top: 0;
	bottom: 0;
	left: 5px;
	right: 5px;
	margin: auto;
	height: 40px;
	/*margin-inside: 100px;*/
}
.rent_buttons_control{
	bottom: 160px;
	left: 5px;
	right: 5px;
}
.water_supply_buttons_control{
	bottom: 90px;
	left: 5px;
	right: 5px;
}
.electricity_buttons_control{
	bottom: 0;
	left: 5px;
	right: 5px;
}

.subs_card:hover{
	.subs_card_body{
		filter: blur(3px);
	}
	.subs_buttons_control{
		display: flex;
	}
}
.rent_item:hover{
	.rent_card_body{
		filter: blur(3px);
	}
	.rent_buttons_control{
		display: flex;
	}
}
.electricity_item:hover{
	.electricity_card_body{
		filter: blur(3px);
	}
	.electricity_buttons_control{
		display: flex;
	}
}
.water_supply_item:hover{
	.water_supply_card_body{
		filter: blur(3px);
	}
	.water_supply_buttons_control{
		display: flex;
	}
}

.inform_card{
	padding: 5px;
	.inform_card_body{
		.inform_card_date{
			text-align: right;
		}
	}
	.weather_main{
		padding: 10px;
		display: flex;
		justify-content: space-between;
		border: solid 1px #888888;
		box-shadow: 0 0 10px #4c4c4c;
		.weather_temp{
			font-size: 22pt;
			font-weight: bold;

			.weather_img{
			--img-w-h: 50px;
			width: var(--img-w-h);
			height: var(--img-w-h);
			}
		}

		.weather_description_div{

			.weather_description{
				margin: 0;
				font-weight: bold;
				font-size: 10pt;
			}

			.weather_feels_like{
				margin: 0;
				font-size: 10pt;

				.weather_feels_like_title{
					font-size: 8pt;
				}
			}
		}
	}
	.weather_min_max{
		display: flex;
		justify-content: space-between;
		font-size: 10pt;
	}
}



/* edit bills ---------------------------- */
.edit-bills-container{
	margin-top: 10px;
	/*max-width: var(--weight-card);*/
	max-width: max-content;
}
/*----------------------------*/
.card-hr-title{
	margin: 5px;
}
.bills-data{
	display: flex;
	justify-content: space-around;
}
.water_supply-total-data{
	display: flex;
	justify-content: space-around;
}
.water_supply-cold_water-cold_water_volume{
	border: rgba(3, 74, 251, 0.45) solid 2px;
	border-radius: 5px;
	padding: 0 5px;
}
.water_supply-hot_water-hot_water_volume{
	border: rgba(251, 3, 3, 0.45) solid 2px;
	border-radius: 5px;
	padding: 0 5px;
}
.electricity_indications{
	border: rgb(10, 83, 190) solid 2px;
	border-radius: 5px;
	padding: 0 5px;
}


.cold_water-droplet-icon{
	color: #0a53be;
}
.hot_water-droplet-icon{
	color: #be0a0a;
}
.electricity-icon{
	color: #1275e4;
}

.invoice_container{
	margin-top: 20px;
	width: var(--weight-card);
	.invoice_header{
		padding: 0;
		text-align: right;
	}
	.invoice_body{
		padding: 5px;
	}
	.invoice_row{
	}
	.bill_title{
		margin-right: 10px;
		font-size: 10pt;
	}
	.bills_value{
		font-weight: bolder;
	}
}

/*================================================*/
.subs_container{
	margin-top: 10px;
	max-width: 20rem;
}
.subs_header_control{
	display: flex;
	justify-content: space-between;
}
.subs_header{
	display: flex;
	justify-content: space-between;
	/*padding: 0;*/
}
.subs_subheader{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-left: 5px;
	margin-right: 5px;
}
.subs_logo{
	margin: 5px 10px 5px 5px;
	/*border: black solid 1px;*/
	width: 50px;
	height: 50px;
}
.subs_logo_img{
	width: 100%;
	height: 100%;
}
.subs_div_desc{
	margin: 5px 5px 5px 10px;
}
.subs_title{
	margin: 0;
	font-size: 14pt;
	font-weight: bolder;
}
.subs_start_of_subscription{
	margin: 0;
	font-size: 8pt;
}

.div_next_payment{}
.div_spacer{
	background-color: #737171;
	/*border: solid 1px #737171;*/
	width: 2px;
	height: 30px;
}
.div_amount{}

.p_next_payment{
	margin: 0;
	font-weight: bolder;
}
.p_next_next_payment_title{
	margin: 0;
	font-size: 6pt;
	text-transform: uppercase;
}
.p_amount{
	margin: 0;
	font-weight: bolder;

}
.p_amount_title{
	margin: 0;
	font-size: 8pt;
}

.subs_body{
	padding: 10px;
}
.sub_body_row{
	display: flex;
	justify-content: space-between;
}
.sub_body_title{
	margin-right: 10px;
	font-size: 8pt;
}
.sub_body_value{
	margin-left: 10px;
	color: black;
	font-weight: bolder;
	font-size: 8pt;
}
.sub_link{
	/*color: white;*/
	/*padding: 5px;*/
	text-align: center;
}
@media screen and (max-width: 450px) {
	.subs_container{
		max-width: 100vw;
	}
}
/*############################################################################*/
.subscriptions_container{
	margin-top: 10px;
}
.subscriptions_card{
	width: var(--weight-card);
	margin-bottom: .5rem;
}
.subs_item_header{
	display: flex;
	justify-content: space-between;
}
.subs_item_logo{
	width: 40px;
	height: 40px;
}
.subs_item_body{
	padding: 5px;
	display: flex;
	justify-content: space-between;
}
.subs_item_next_payment{
	font-size: 10pt;
}
.subs_item_amount{
	font-size: 10pt;
	font-weight: bolder;
}

/*============================================================*/
.edit_subs_container{
	max-width: 20rem;
}
.edit_subs_body{
	padding: 5px;
}
.edit_subs_header_control{
	display: flex;
	justify-content: right;
}
.div_edit_row{
	display: flex;
	align-items: center;
}
.label_edit_row{
	width: 100%;
}
.img_edit_logo{
	height: 50px;
	width: 50px;
}
.io_edit_logo{
	margin: 20px;
	/*height: 20px;*/
	width: 200px;
}
@media screen and (max-width: 450px) {
	.edit_subs_container{
		max-width: 100vw;
	}
}
.subs_card_body{
	padding: 5px;
}
.subs_div{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.subs_div_col1{
	display: flex;
	align-items: center;
}
.subs_div_col2{
	text-align: right;
}

.subs_logo{
	--size: 35px;
	width: var(--size);
	height: var(--size);
}
.subs_title{
	font-weight: bolder;
	font-size: 12pt;
}
.subs_title_dash{
	font-weight: bold;
	font-size: 12pt;
	text-transform: uppercase;
}
.subs_str_next_payment_date{
	font-size: 8pt;
	font-weight: bolder;
}.subs_next_payment_date{
	font-size: 10pt;
}
.subscriptions_cart_title, .bills_cart_title {
	text-align: center;
	text-transform: uppercase;
	font-weight: bolder;
}

/*	login	############################*/

#login_form {
    max-width: 20rem;
    padding: 5px 5px 5px 10px;
    border-radius: 10px;
    box-shadow: 5px 5px 20px 5px;
	.btn_submit{
		margin-top: 1rem;
		text-align: right;
	}
}

#form_login label{
    font-weight: bolder;
}

/*		############################*/