@charset "utf-8";
/* CSS Document */
@font-face {
	font-family: 'Roboto-Regular';
	src: url('webfonts/Roboto-Regular.eot');
	src: url('webfonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
	url('webfonts/Roboto-Regular.svg#Roboto-Regular') format('svg'),
	url('webfonts/Roboto-Regular.ttf') format('truetype'),
	url('webfonts/Roboto-Regular.woff') format('woff'),
	url('webfonts/Roboto-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}

body { 
	height:100%;
	margin:0;
	padding:0;
	background-color:#F5F5F5;
	font-family: 'Roboto-Regular', sans-serif;
	overflow:auto;
}

#header { 
	width:100%;
	height:auto;
	margin-top:0;
	background-image: linear-gradient(90deg,rgba(0,0,0,0) 12%,#750000 100%),url('../images/tennis-club-027.jpg') !important;
	border-bottom: solid 3px #750000;
	cursor:pointer;
}

#header .row {
	width:70%;
	margin-left:auto;
	margin-right:auto;
	padding-top:1vw;
	padding-bottom:1vw;
	display:flex;
}

#header .row .logo {
	height:8vw;
	width:8vw;
	background-image:url('../images/szentesi_tenisz_logo_k.png');
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
}

#header .row .pageTitle {
	margin-left:2vw;
	padding-top:1vw;
}

#header .row .pageTitle h1 {
	color:#FFFFFF;
	font-size:3vw;
	margin:0;
}

#header .row .pageTitle p {
	color:#750000;
	font-size:1.5vw;
	margin-top:0;
}

#container {
	background-image: linear-gradient(180deg,#ffffff 0%,rgba(255,255,255,0.5) 100%),url('../images/tennis-club-015.jpg') !important;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	width: 100%;
	min-height:76vh;
	overflow:auto;
}

#container_login {
	width:60%;
	margin-left:auto;
	margin-right:auto;
	padding-top:3vh;
}

#container_login h2 {
	font-size: 3vh;
	font-weight: 300;
	margin-top:0;
	margin-bottom:5vh;
}

#login {
	text-align:center;
	background-color:rgba(0, 0, 0, 0.4);
	box-shadow: 0 8px 20px #BBBBBB;
	border-radius:5px;
	margin-top:2vh;
	margin-bottom:5vh;
	padding-top:2vh;
}

#login_user {
	width:7vh;
	height:7vh;
	margin-left:auto; 
	margin-right:auto;
	background-image:url('../images/user_login.png'); 
	background-size:cover;
	background-repeat:no-repeat;
}

#login_title { color:#750000; padding-top:2vh; padding-bottom:2vh; font-weight:300; font-size:3vh; text-transform: uppercase; }

#login input[type=text], #login input[type=password] {
	width:80%; height:30px; 
	color:#191919; font-size:14px; 
	font-weight:bold; padding-left:10px; 
	border:solid 1px #747474; 
	border-radius:5px;
	margin-top:10px;
	font-family: 'Roboto-Regular', 'Font Awesome 6 Free', sans-serif;
	-webkit-transition: all 0.30s ease-in-out;
  	-moz-transition: all 0.30s ease-in-out;
  	-ms-transition: all 0.30s ease-in-out;
  	-o-transition: all 0.30s ease-in-out;
}

input[type=text]:focus, input[type=password]:focus {
  box-shadow: 0 0 5px rgba(112, 109, 83, 1);
  border: 1px solid rgba(112, 109, 83, 1);
  outline: none;
}

#login input[type=button] {
	width:10vw;
	margin-top:4vh;
	margin-bottom:3vh;
	font-size:1.6vw;
	padding:0.5vw;
	text-align:center;
	background: #f9f9f9 linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	box-shadow:inset 0 1px 0 #ffffff;
	color:#666666;
	border:1px solid #747474;
	border-radius:6px;
	cursor:pointer;
}

#login input[type=button]:hover {
	background: #e9e9e9 linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
	color:#750000;
}

#login_options {
	width:60%;
	margin-left:auto;
	margin-right:auto;
	margin-top:3vh;
	text-align:center;
}

#login_options span {
	display:inline-block;
	padding-left:3%;
	padding-right:3%;
	font-size:2vh;
	cursor:pointer;
}

#login_options span:hover {
	color:#750000;
}

#menubar {
	width:70%;
	height:3vh;
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
	background: #f9f9f9 linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	border-left: solid 1px #750000;
	border-right: solid 1px #750000;
	border-bottom: solid 1px #750000;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	box-shadow: 0 8px 20px #BBBBBB;
	font-size:1.6vh;
	padding-top:1vh;
	display:flex;
	z-index:0;
}

#menubar .menu {
	width:9%;
	height: 100%;
	display: block;
	margin-left:1%;
	cursor:pointer;
}

#menubar .menu:hover {
	color:#750000;
}

#menubar .dropDown {
	position:relative;
	top:1.3vh;
	left:0;
	width:20vw;
	padding:0.5vh;
	display:none;
	background: #a2a2a2;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	box-shadow: 0 8px 20px #BBBBBB;
	font-size:1.6vh;
	z-index:100;
}

#menubar .dropDown .subMenu {
	color: #000000;
	padding-left:1.5vh;
	padding-top:1vh;
	padding-bottom:1vh;
}

#menubar .dropDown .subMenu:hover {
	background: rgb(201, 201, 201);
	color:#750000;
}

#menubar .whitespace {
	width:50%;
}

#menubar .userInfo {
	width:25%;
	text-align:right;
}

#menubar .timeLock {
	width:10%;
	text-align:center;
}

#menubar .logOut {
	width:4%;
	margin-right:1%;
	text-align:center;
	cursor:pointer;
}

#menubar .logOut:hover {
	color:#750000;
}

#content {
	width:70%;
	margin-left:auto;
	margin-right:auto;
	padding-top:3vh;
}

#content h2 {
	font-size:1.5vw;
	font-weight:300;
	margin-top:0;
	margin-bottom:1vw;
}

#content h3 {
	font-size:1vw;
	color: #750000;
}

#markers {
	padding-top:0.5vw;
	padding-bottom:0.5vw;
	margin-bottom:1vw;
	display:flex;
}

#markers .text {
	font-size:0.8vw;
}

#markers .notavailable, #markers .available, #markers .reserved, #markers .tempreserved {
	display:inline-block;
	width:1vw;
	height:1vw;
	margin-left:1%;
	margin-right:0.5%;
}

#markers .notavailable {
	background-color:#bfbfbf;
}

#markers .available {
	background-color:#006622;
}

#markers .reserved {
	background-image: linear-gradient(135deg, #750000 25%, #cccccc 25%, #cccccc 50%, #750000 50%, #750000 75%, #cccccc 75%, #cccccc 100%);
	background-size: 14.14px 14.14px;
}

#markers .tempreserved {
	background-image: linear-gradient(135deg, #ffae00 25%, #cccccc 25%, #cccccc 50%, #ffae00 50%, #ffae00 75%, #cccccc 75%, #cccccc 100%);
	background-size: 14.14px 14.14px;
}

#dateInfo {
	width:100%;
	margin-top: 0.5vw;
	margin-bottom: 1vw;
	display: flex;
	background: #f9f9f9 linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
	border:1px solid #747474;
	border-radius:5px;
	font-size: 0.8vw;
}

#dateInfo .text {
	width:50%;
	text-align: center;
	padding-top: 0.5vw;
	padding-bottom: 0.5vw;
}

#dateInfo .whitespace, #dateInfo .prevWeek, #dateInfo .nextWeek {
	width:24%;
	padding-top: 1vw;
	padding-bottom: 0.5vw;
}

#dateInfo .prevWeek {
	padding-left: 1%;
	text-align: left;
	cursor: pointer;
}

#dateInfo .prevWeek:hover {
	color: #750000;
}

#dateInfo .nextWeek {
	padding-right: 1%;
	text-align: right;
	cursor: pointer;
}

#dateInfo .nextWeek:hover {
	color: #750000;
}

#row {
	width:100%;
}

#row .col {
	width:48%;
	padding:1%;
	float:left;
}

#row .col .court_name {
	font-size:1vw;
	padding-bottom:0.5vw;
	cursor: pointer;
}

#row .col .court_name:hover {
	color: #750000;
}

#row .col .court_name:hover ~ #weeklyCal {
	box-shadow:0 0 10px rgba(112, 109, 83, 1);
}

#row .col .court_desc {
	font-size:0.8vw;
	padding-bottom:0.5vw;
	text-align:justify;
}

#weeklyCal {
	width:100%;
	height:auto;
	overflow:auto;
	border:1px solid #747474;
	border-radius:5px;
}

#weeklyCal .calRowHead,  #weeklyCal .calRow {
	width:100%;
	height:auto;
	overflow:auto;
}

#weeklyCal .calRow {
	border-top:1px solid #747474;
	margin-left:0.1%;
}

#weeklyCal .calRowHead .column, #weeklyCal .calRow .column {
	width:12.3%;
	height:2vh;
	font-size:1.5vh;
	padding-top:0.25vh;
	padding-bottom:0.25vh;
	float:left;
	text-align:center;
}

#weeklyCal .calRow .column.notavailable {
	background-color:#bfbfbf;
}

#weeklyCal .calRow .column.available {
	background-color:#006622;
	color:#cccccc;
}

#weeklyCal .calRow .column.reserved {
	background-color:#750000;
	color:#FFFFFF;
}

#weeklyCal .calRow .column.tempreserved {
	background-image: linear-gradient(135deg, #ffae00 25%, #cccccc 25%, #cccccc 50%, #ffae00 50%, #ffae00 75%, #cccccc 75%, #cccccc 100%);
	background-size: 14.14px 14.14px;
}

#weeklyCal .whitespace, #weeklyCal .column-border {
	height:2.5vh;
	float:left;
}

#weeklyCal .whitespace {
	width: 0.2%;
}

#weeklyCal .column-border {
	width: 0.2%;
	background-color: #747474;
}

#newBooking {
	width:95%;
	padding:2%;
	border: solid 1px #747474;
	border-radius:5px;
	margin-top:0.5vw;
}

#newBooking .court_name {
	cursor: default !important;
	color: #000000 !important;
}

#newBooking .court_price {
	font-size:0.7vw;
}

#newBooking hr {
	margin-bottom:1vw;
	color: #750000;
}

#newBooking .row {
	width:100%;
	height:2vw;
}

#newBooking .row label {
	display:inline-block;
	width:35%;
	font-size:0.8vw;
}

#newBooking .row input {
	display:inline-block;
	width:60%;
	padding:0.2vw 0.2vw;
	border: solid 1px #BBBBBB;
	border-radius:5px;
	font-size:0.8vw;
}

#newBooking .row select {
	display:inline-block;
	width:61.7%;
	padding:0.2vw 0.2vw;
	border: solid 1px #BBBBBB;
	background-color: #ffffff;
	border-radius:5px;
	font-size:0.8vw;
}

#newBooking .formBtns {
	width:50%;
	margin-left:auto;
	margin-right:auto;
	margin-top:5vh;
	text-align:center;
}

#newBooking .formBtns .btn {
	width:38%;
	height:5vh;
	margin-left:2%;
	margin-right:2%;
	padding:1%;
}

#newBooking .formBtns .btn:hover {
	cursor:pointer;
}

#bookInfo {
	font-size: 1vw;
	text-align: justify;
}

#bookInfo .btns {
	width:50%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	margin-top:3vw;
}

#bookInfo .btn {
	width:38%;
	height:3vw;
	margin-left:2%;
	margin-right:2%;
	padding:1%;
	font-size:1vw;
	cursor: pointer;
}

#bookInfo .btn:hover {
	color: #750000;
}

#simplePayInfo {
	width:98%;
	height:auto;
	margin-bottom:10px;
	border:solid 1px #750000;padding: 1%;
	overflow:auto;
}

#simplePayInfo .simpleLogo {
	width:25%;
	padding-top:10px;
	float:left;
}

#simplePayInfo .simpleLogo img {
	width: 90%;
	height: auto;
}

#simplePayInfo .text {
	width:75%;
	float:left;
	text-align: justify;
}

#simplePayInfo .text a {
	color:#750000;
	text-decoration:none;
}

#simplePayInfo .text a:hover {
	text-decoration:underline;
}

#simplePayInfo .text a:visited {
	color:#750000;
	text-decoration:none;
}

.changePassForm {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

.changePassForm  label {
	display:inline-block;
	width:30%;
	font-size:1.6vh;
}

.changePassForm  input[type=password] {
	width:66%; height:30px;
	color:#191919; font-size:1.6vh;
	font-weight:bold; padding-left:1%;
	border:solid 1px #747474;
	border-radius:5px;
	margin-top:10px;
	font-family: 'Roboto-Regular', 'Font Awesome 6 Free', sans-serif;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
}

.changePassBtns {
	margin-top:2vh;
}

.pass-wrapper {
	margin-left:34%;
	width:64.5%;
	font-size:1.4vh;
}
.pass-graybar {
	margin-left:0;
	width:67%;
}

.user-information {
	width:100%;
}

.user-information tr {
	height:2vw;
}

.user-information td {
	width:50%;
}

.user-information td input[type=text], .user-information td input[type=password] {
	width:90%; height:30px;
	color:#191919; font-size:1.6vh;
	font-weight:bold; padding-left:10px;
	border:solid 1px #747474;
	border-radius:5px;
	margin-top:10px;
	font-family: 'Roboto-Regular', 'Font Awesome 6 Free', sans-serif;
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
}

.links {
	margin-top:4vh;
}

#newUser {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}

#newUser .pass-wrapper {
	margin-left:3%;
	width:90%;
	font-size:1.4vh;
}

#footer {
	width:100%;
	height:auto;
	background-color:#750000;
	color:#FFFFFF;
	font-size:1vh;
	text-align:center;
	padding-top:1vh;
	padding-bottom:1vh;
	z-index:1;	
}

.ui-widget-overlay
{
	opacity: .70 !important; /* Make sure to change both of these, as IE only sees the second one */
	filter: Alpha(Opacity=70) !important;
	background: rgb(50, 50, 50) !important; /* This will make it darker */
}

.ui-button:focus { outline:none !important }

@media only screen and (max-width: 810px) {
	#header .row {
		width:80%;
		padding-top: 1vh;
	}
	#header .row .logo {
		height:8vh;
		width:8vh;
	}
	#header .row .pageTitle {
		margin-left:2vh;
		padding-top:1.5vh;
	}
	#header .row .pageTitle h1 {
		font-size:2vh;
	}
	#header .row .pageTitle p {
		color: #ffffff;
		font-size:1.5vh;
		margin-top:1vh;
	}
	#container_login {
		width:70%;
		padding-top:2vh;
	}
	#container_login h2 {
		font-size: 2.5vh;
		font-weight: 300;
		margin-bottom:2vh;
	}
	#login input[type=button ] {
		width:14vh;
		height:6vh;
		font-size: 2.5vh;
	}
	#login_options {
		width:70%;
		margin-top:1vh;
	}
	#login_options span {
		display:block;
		font-size:2vh;
		margin-bottom:2vh;
	}
	#menubar {
		width:100%;
		border-left:none;
		border-right:none;
		border-bottom-left-radius:0;
		border-bottom-right-radius:0;
		padding-top:1vh;
	}
	#menubar .menu {
		width:28%;
		margin-left:2%;
	}
	#menubar .whitespace {
		display: none;
	}
	#menubar .userInfo {
		width:35%;
	}
	#menubar .timeLock {
		width:25%;
	}
	#menubar .logOut {
		width:8%;
		margin-right:2%;
		text-align:right;
	}
	#content {
		width:90%;
		margin-left:auto;
		margin-right:auto;
		padding-top:1vh;
	}
	#content h2 {
		font-size:2vh;
		margin-bottom:1vh;
	}
	#content h3 {
		font-size:1.5vh;
	}
	#markers .text {
		font-size:1vh;
	}
	#markers .notavailable, #markers .available, #markers .reserved, #markers .tempreserved {
		width:1vh;
		height:1vh;
		margin-right:1%;
	}
	#dateInfo {
		font-size: 1vh;
	}
	#dateInfo .text {
		padding-top:0.5vh;
		padding-bottom:0.5vh;
	}
	#dateInfo .whitespace, #dateInfo .prevWeek, #dateInfo .nextWeek {
		width:24%;
		padding-top:1vh;
		padding-bottom:0.5vh;
	}
	#row .col {
		width:98%;
		padding:1%;
		margin-bottom:2vh;
	}
	#row .col .court_name {
		font-size:1.5vh;
		padding-bottom:0.5vh;
	}
	#row .col .court_desc {
		font-size:1.2vh;
		padding-bottom:1vh;
	}
	#newBooking .court_price {
		font-size:1.2vh;
		padding-bottom:0.5vh;
	}
	#newBooking hr {
		margin-bottom:2vh;
	}
	#newBooking .row {
		height:5vh;
	}
	#newBooking .row label {
		font-size:1.5vh;
	}
	#newBooking .row input {
		padding:0.5vh 0.5vh;
		font-size:1.5vh;
	}
	#newBooking .row select {
		padding:0.5vh 0.5vh;
		font-size:1.5vh;
	}
	#newBooking .formBtns {
		width:100%;
		margin-top:1vh;
	}
	#newBooking .formBtns .btn {
		width:38%;
		height:5vh;
		margin-left:2%;
		margin-right:2%;
		padding:1%;
	}
	#menubar .dropDown {
		width:50vw;
	}
	#bookInfo {
		font-size: 2vh;
	}
	#bookInfo .btns {
		width: 100%;
		margin-top:6vh;
	}
	#bookInfo .btn {
		width:80%;
		height:6vh;
		font-size:2vh;
	}
	.profile_pic img{
		width: 40%;
	}
	.changePassForm {
		width: 90%;
	}
	.user-information td input[type=text] {
		font-size:1.5vh;
		font-weight: normal;
	}
	#newUser {
		width:100%;
	}
	#simplePayInfo .simpleLogo {
		width:60%;
		float:unset;
		margin-left: auto;
		margin-right: auto;
	}
	#simplePayInfo .simpleLogo img {
		width: 100%;
		height: auto;
	}
	#simplePayInfo .text {
		width:98%;
		float:unset;
		margin-left: auto;
		margin-right: auto;
	}
}