/*==========================================*/
		 /*------------- common meanings ------------*/
		/*==========================================*/

* {
	box-sizing: border-box;
	font-family: var(--fontFamily, segoe ui);
	/* transition: all 0.5s ease-in-out; */
	font-weight: 600;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	background-image: url('../images/Background.jpg');
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}

input{
	height: 25px;
	padding-left: 7px;
	background: #00000020;
	border: 1px solid #707070;
	border-radius: 5px;
	color: black;
}
input:focus{
	outline: none;
	border: 1px solid transparent;
	border: 1px solid white;
}

.wrapper{
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-rows: 10px 1fr 10px;
}

          /*=================================*/
		 /*------------- header ------------*/
		/*=================================*/

.header{
	/* background: var(--bgLight, #171717); */
	/* border-bottom: 1px solid var(--brBasic, #707070); */
}
	.headerTopLine{
		width: 100%;
		height: 40px;
		background: #00000020;
		border-bottom: 1px solid black;
		.logo{
			max-height: 25px;
			margin: 7.5px 20px;
		}
	}

          /*==============================*/
         /*------------- row ------------*/
        /*==============================*/

.row{
	display: grid;
	grid-template-columns: 10px 1fr 10px;
}

          /*======================================*/
         /*------------- leftSidebar ------------*/
        /*======================================*/

.leftSidebar{
	/* background: var(--bgLight, #171717); */
}

          /*==================================*/
         /*------------- content ------------*/
        /*==================================*/

.content{
	/* background: #00000060; */
	border: 1px solid #000000;
	border-radius: 10px;
}

	.widthCont{
		width: 100%;
		/* height: 100px; */
		height: auto;
		min-height: 100px;
		background: #00000005;
		padding: 10px;
		border-top: 1px solid #ffffff50;
		color: black;

		.widthP{
		}
		.widthX{
			float: left;
			margin: 0px;
		}
		.widthI{
			float: left;
			margin: 0px;
		}
	}

	.heightCont{
		width: 100%;
		height: 100px;
		background: #00000005;
		padding: 10px;
		border-top: 1px solid #000000;
		border-bottom: 1px solid #000000;
		color: black;
		.heightI{
			color: blue;
		}
	}

	.showerOptions{
		width: 100%;
		height: auto;
		background: #00000005;
		/* padding: 10px; */
		border-bottom: 1px solid #000000;
		color: black;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}



          /*=======================================*/
         /*------------- rightSidebar ------------*/
        /*=======================================*/

.rightSidebar{
	/* background: var(--bgLight, #171717); */
	/* background: #000000; */
}


          /*=================================*/
         /*------------- footer ------------*/
        /*=================================*/

.footer{
	/* background: var(--bgLight, #181818); */
	/* border-top: 1px solid var(--brBasic, #707070); */
}

          /*======================================*/
         /*------------- Media query ------------*/
        /*======================================*/

@media screen and (max-width: 650px) {
	
	html, body {
		background-image: url('../images/Background mobile.jpg');
	}
	
	.widthCont{
		height: auto;
		min-height: 100px;

		.widthP{
		}
		.widthX{
			float: none;
			opacity: 0;
			display: none;
		}
		.widthI{
			float: none;
			margin: 0px;
			margin-top: 10px;
			display: block;
		}
	}
	
}
/* Portrait tablets and small desktops */
@media screen and (min-device-width: 768px) and (max-device-width: 991px) {
}

/* Landscape phones and portrait tablets */
@media screen and (min-device-width: 511px) and (max-device-width: 767px) {
}

/* Portrait phones and smaller */
@media screen and (min-device-width: 321px) and (max-device-width: 510px) {

}

/* Less than 320 pixels*/
@media screen and (max-device-width: 320px) {

}