/* CSS file */

/* CSS for tank form input manuals  */

.formBackground{
	background-color: darkgrey !important;
	padding:30px;
	border-radius:8px;
}

.table {
	background-color: darkgrey !important;
	border-collapse: collapse;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.table th:first-child {
	border-radius: 5px 0 0 0;
}

.table th:last-child {
	border-radius: 0 5px 0 0;
}

.table tr:last-child td:first-child {
	border-radius: 0 0 0 5px;
}

.table tr:last-child td:last-child {
	border-radius: 0 0 5px 0;
}

.add-a-tank{
	flex-wrap: wrap;
	max-width: 100%;
}

.logo-image{
	width: 50%;
	height: auto;
	margin: 0 auto;

}
.image-responsive {
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.btn{
padding:0 0 0 20px ;
}


.manual-image-nine,
.manual-image-eight,
.manual-image-seven{
	display:flex;
	flex-direction:column;
	justify-content:center;
}


.manual-image-three,
.manual-image-four,
.manual-image-five,
.manual-image-six{
	flex: 1 0 100%;
	max-width: 100%;
	margin: 1%;
}

.responsive-img1 {
	width: 100%;
	height: auto;
}


/* rules for screens larger than 600px */
@media screen and (min-width: 600px) {
	.manual-image-three,
	.manual-image-four,
	.manual-image-five,
	.manual-image-six {
		flex: 1 0 45%; /* you can adjust this value to get the desire spacing */
		max-width: 45%;
	}
}

/* rules for screens larger than 900px */
@media screen and (min-width: 900px) {
	.manual-image-three,
	.manual-image-four,
	.manual-image-five,
	.manual-image-six {
		flex: 1 0 22%; /* you can adjust this value to get the desire spacing */
		max-width: 22%;
	}
	.responsive-img2 {
		width: 50%;
		height: auto;
		/*width: 10%;*/
	}
}

.add-tank-bnt-layout{
	display:flex;
	flex-direction: row !important;
	flex-wrap:wrap;
	justify-content:center;
	padding:0 0 15px 0;
	align-content: center;
}

/*.add-tank-bnt-layout2{*/
/*	display:flex;*/
/*	flex-direction: row !important;*/
/*	flex-wrap:wrap;*/
/*	justify-content:center;*/
/*	padding:30px 0 15px 0;*/
/*	align-content: center;*/
/*}*/

.manual-image-header{
	display:flex;
	flex-direction: column;
	justify-content:center;
	background-color:white;
	width:100%;
	border-radius:15px;
	padding:0 0 30px 0;
}

.manual-landing-page-top-row{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content:space-between;
	background-color:white;
	width:100%;
	border-radius:15px;
	padding:0 0 30px 0;
}

.manual-landing-page-second-row{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content:space-evenly;
	background-color:white;
	width:100%;
	border-radius:15px;
	padding:0 0 30px 0;
}


/*.manual-heading{*/
/*	padding: 0 10px 0 10px;*/
/*}*/

.test-additional_objects {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin:0 0 20px 0 ;
}
.manual-heading{
	flex-direction: row;
	flex-wrap:wrap;
	justify-content:center;
	text-decoration: underline;
	text-align:center;
	padding: 10px 10px 10px 10px;
	width:100%;

}
.Manual-outer-div{
	display:flex;
	flex-direction: column;
}
.manual-top-row{
	display:flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content:space-evenly;
}
.manual-image-one{
	display:flex;
	flex-direction: column;
	flex-wrap:wrap;
	justify-content:center;
}
.text-decoration-bold{
	font-weight:bold;
}
.text-decoration-italic{
	font-style: italic;

}
.manual-image-two{
	/*margin:50px 0 10px 0;*/
}
.manual-text{
	margin:15px 40px 0 40px;
	font-size: 1.3em;

}
.manual-image-three{


}
.responsive-img {
	width: 60%;
	height: auto;
}
.responsive-img2 {
	/*width: 100%;*/
	/*height: auto;*/
	width: 85%;
}

@media screen and (max-width: 600px) {
	.responsive-img {
		width: 50%;
		height: auto;
	}

	.responsive-img2 {
		/*width: 100%;*/
		/*height: auto;*/
		width: 50%;
	}

}
.manual-image-four{

}
.manual-checkbox-row{
	display:flex;
	flex-direction: row;
	justify-content:space-evenly;
	margin: 0 0 0 30px;
}
.manual-checkbox2-row{
	display:flex;
	flex-direction: row;
	justify-content:flex-start;
	margin: 20px 0 0 40px;
}

	/* CSS for tank form input manuals  */

.add-tank-form-check-boxes{
	padding-left:40px;
}
.form-field-spacing{
	padding:20px 0 0 0;

}


.tank-setting-header{
	border-bottom: 1px solid black !important;
	padding-bottom:15px;
	text-align:center;

	/*class="tank-setting-header"*/
}

.add-tank-form-col1{
	display: flex;
	flex-direction: column !important;
	padding-left:8px !important;
	/*border-right:1px solid black;*/
}

.add-tank-form-col2{
	display: flex;
	flex-direction: column !important;
	padding:0 0 0 8px !important;
	/*border-right:1px solid black;*/
}

.add-tank-form-row{
	display: flex;
	flex-direction: row !important;
	padding: 0 0 20px 0 ;
	justify-content:space-evenly !important;
	flex-flow: wrap;
	/*border-right:1px solid black;*/
}

.add-tank-form{

	display: flex;
    flex-direction: row !important;
	justify-content:space-between !important;
    /*align-items: center;*/

}

.add-tank_bnt{
	margin: 15px 0 0 35px !important;
	width:35%;
	/*margin-left: 52px !important;*/
}


.signup-box{
	width: 60%;
	margin:auto;
}


/* Ensure your CSS selectors target the form inputs when within the modal */
.form-control {
	border: 2px solid #888 !important;  /* Adjust border color as per your theme */
	outline: none;
}

.water-tank-value-form {
	/*display: flex;*/
	/*justify-content:space-evenly;*/
	/*!*flex-direction: row !important;*!*/
	width: 50% !important;
	margin: auto; /* this will center the div if you need it */

}

.reserve-tank-value-form{

	width: 60% !important;
	margin: auto; /* this will center the div if you need it */

}

.res-additional-subtank-form{

	width: 60% !important;
	margin: auto; /* this will center the div if you need it */

}

.additional-subtank-form{
	width: 60% !important;
	margin: auto; /* this will center the div if you need it */

}


/*.custom-modal-class {*/
/*	z-index: 1050 !important;*/
/*}*/

/*.custom-modal-backdrop-class {*/
/*	z-index: 1020 !important;*/
/*}*/

/*#myModal{*/
/*	z-index: 10001;*/
/*}*/

.vw-customer-status-res-2-view {

	width:80%;
	margin:auto;
}

.content{

	/*margin:0 20px 0 20px ;*/
	margin:auto;
	width: 85%;
}
.help-block{
	color:  red;
}


.water-tank-value-index{
	margin:0 30px 30px 30px;
	padding:10px;


}

.grid-view{
	right:30px;
	padding:0 15px 0 0;

}

.complex-building-index {
	padding:10px;
}
.additional-subtank-index{
	padding:10px;
}

.pebble-device-index{
	padding:10px;
}
.content .card{
	margin:30px 10px 30px 10px;
}

.vw-customer-status-res2-index{
	padding:0 15px 10px 15px;

}


.vw-customer-status-res-view{
	padding:30px 10px 30px 10px;
}


.sidebar{

	background: #17173b !important;
}
.main-sidebar{
	background:  #17173b !important;
	/*max-width:200px !important;*/
}


.html{
	width:50vw !important;
}


.content-wrapper {

	flex-direction:column;
}
.modal-buffer{

}

.content{
	background-color: rgba(154, 154, 154, 0.6) !important; /* Semi-transparent white background */
	/*backdrop-filter: blur(5px); causes Modal not to work look like it works with %  */
	/*background-size: contain;*/
	padding:40px 15px 30px 30px !important;
	border-radius:10px;
}

.navbar{
	/*background: linear-gradient(to bottom right, rgba(0, 21, 255, 0.7), #00008B) !important;*/
	background: #17173b !important;
	backdrop-filter: blur(10px)!important;
	/*height:70px !important;*/

}

/* Styles for screens smaller than 600px */
@media screen and (max-width: 576px) {
	.water-tank-value-form {
		/*display: flex;*/
		/*justify-content:space-evenly;*/
		/*!*flex-direction: row !important;*!*/
		width: 95% !important;
		margin: auto; /* this will center the div if you need it */

	}

	.reserve-tank-value-form{

		width: 95% !important;
		margin: auto; /* this will center the div if you need it */

	}

	.res-additional-subtank-form{

		width: 95% !important;
		margin: auto; /* this will center the div if you need it */

	}

	.additional-subtank-form{
		width: 95% !important;
		margin: auto; /* this will center the div if you need it */

	}

}

@media screen and (max-width: 768px) {
	.water-tank-value-form {
		/*display: flex;*/
		/*justify-content:space-evenly;*/
		/*!*flex-direction: row !important;*!*/
		width: 95% !important;
		margin: auto; /* this will center the div if you need it */

	}

	.reserve-tank-value-form{

		width: 70% !important;
		margin: auto; /* this will center the div if you need it */

	}

	.res-additional-subtank-form{

		width: 70% !important;
		margin: auto; /* this will center the div if you need it */

	}

	.additional-subtank-form{
		width: 95% !important;
		margin: auto; /* this will center the div if you need it */

	}

}

@media screen and (max-width: 992px){
	.water-tank-value-form {
		/*display: flex;*/
		/*justify-content:space-evenly;*/
		/*!*flex-direction: row !important;*!*/
		width: 60% !important;
		margin: auto; /* this will center the div if you need it */

	}

	.reserve-tank-value-form{

		width: 60% !important;
		margin: auto; /* this will center the div if you need it */

	}

	.res-additional-subtank-form{

		width: 60% !important;
		margin: auto; /* this will center the div if you need it */

	}

	.additional-subtank-form{
		width: 60% !important;
		margin: auto; /* this will center the div if you need it */

	}

}