* {
	font-family: 'Montserrat', sans-serif;
}

:root {
	/*--pri-color: teal;*/
	--pri-color: #f43b3b;
	--bg-color: #1c2a2e;
}

body {
	background: #f0f0f0;
	padding-bottom: 50px;
	background: rgb(238,174,202);
/*    background: -webkit-linear-gradient(42deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 73%);
    background: -o-linear-gradient(42deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 73%);
    background: linear-gradient(132deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 73%);*/	

    background: rgb(238,238,238);/*
    background: -webkit-linear-gradient(48deg, rgba(238,238,238,1) 26%, rgba(28,42,46,0.9) 100%);
    background: -o-linear-gradient(48deg, rgba(238,238,238,1) 26%, rgba(28,42,46,0.9) 100%);
    background: linear-gradient(138deg, rgba(238,238,238,1) 26%, rgba(28,42,46,0.9) 100%); */
    /*background: #1c2a2e;*/
	height: 100vh;
	width: 100%;
}

body::before {
	content: '';
	position: fixed;
    background: url(images/bg.jpg);
	background-size: cover;
	/*background-size: 100% 100%;*/
	height: 100vh;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}

input[type="text"]:disabled {
	color: #a0a0a0;
}

.text-bold {
	font-weight: bold;
}

.flex {
	display: flex;
	display: -moz-flex;
	display: -webkit-flex;
}

.flex-wrap {
	flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
}

.justify-between {
	justify-content: space-between;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
}

.navigation {
	width: 100%;
	position: fixed;
	padding: 10px;
	/*background: #fff;*/
	/*background: var(--bg-color);*/
	background: rgba(255,255,255,.8);
	height: 50px;
	box-shadow: 0px 2px 5px 1px rgba(0,0,0,0.2);
	display: flex;
	display: -moz-flex;
	display: -webkit-flex;
	z-index: 500;
}

.sm-menu-bars, .menu-container .lang-button-container {
	display: none;
}

.menu-container {
	display: block;
	position: absolute;
	left: 100px;
	top: 50%;
	transform: translateY(-50%);
	font-weight: bold;
}

.menu-container a {
	margin-right: 30px;
	color: #102030 !important;
	text-decoration: none;
	transition: .2s;
	display: inline-block;
}

.menu-container a:not(.active):hover, .menu-container a.active {
	color: var(--pri-color) !important;
	transform: scale(1.2);
}

.menu-container a.active {
	text-transform: uppercase;
}

.clear-navigation {
	position: fixed;
	top: 0;
	width: 100%;
	padding: 10px;
	z-index: 500;
	height: 50px;
}

.navigation .logo {
	font-size: 1.4em;
	font-weight: bold;
	text-transform: uppercase;
	/*color: var(--pri-color);*/
	color: #fff;
	transition: .3s;
	padding: 5px;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
}

.header-logo {
	width: 45px;
}

.navigation .floating-button, .clear-navigation .floating-button {
	position: absolute;
	right: 0px;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	background-color: var(--pri-color);
	box-shadow: 0px 2px 2px rgba(0,0,0,.2);
	transition: .3s;
	border-radius: 50%;
	/*border: 2px solid currentcolor;*/
	color: var(--bg-color);
	color: #fff;
	width: 38px;
	height: 38px;
	display: flex;
	display: -moz-flex;
	display: -webkit-flex;
	align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
}

.navigation .floating-button.member-button {
	right: 45px;
}

.navigation .profile-menu-container {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 20px;
	background: rgba(255,255,255,.9);
	border-radius: 5px;
	z-index: 100px;
	padding: 10px 5px;
	box-shadow: 0px 3px 5px rgba(0,0,0,.1);
	animation: slideDown .3s;
}

@keyframes slideDown {
	0% {top: calc(100% - 10px)};
	100% {top: 100%};
}

.navigation .profile-menu-container a, 
.clear-navigation .profile-menu-container a {
	padding: 10px;
	font-size: .9em;
	color: var(--bg-color);
}

.navigation .floating-button i.fa,
.clear-navigation .floating-button i.fa {
	font-size: 1.6em;
}

.navigation .logo:hover, .navigation .floating-button:hover,
.clear-navigation .floating-button:hover {
	text-decoration: none;
	transform: translateY(-50%) scale(1.1);
}

.navigation .floating-button:focus,
.clear-navigation .floating-button:focus {
	text-decoration: none;
}

.navigation .floating-button:hover,
.clear-navigation .floating-button:hover {
	box-shadow: 0 2px 3px rgba(0,0,0,.3);
	transform: translate(-50%, -50%) scale(1.1);
}

.navigation-bottom {
	height: 80px;
}

.login-form-regist-button {
	padding: 15px 0px 5px;
	text-align: center;
}

.login-form-regist-button a {
	color: var(--pri-color);
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: underline dotted;
	margin: 0 2px;
}

.login-logo {
	width: 120px;
	padding: 10px 0 25px;
	margin: auto !important;
}

.login-logo img {
	width: 100%;
	display: block;
}

.login-form-regist-button a:hover {
	text-decoration: underline;
}

#court-div {
	display: none;
}

.box {
	background: rgba(255,255,255,0.88);
	background: rgba(255,255,255,0.9);
	padding: 10px 15px 20px;
	border-radius: 5px;
	border-top: 3px solid var(--pri-color);
	box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
	position: relative;
	display: none;
}

.box {
	margin-bottom: 50px;
}

.box.active {
	animation: boxIn .8s;
	display: block;
}

@keyframes boxIn {
	0% {opacity: 0; top: 20px;}
	/*20% {opacity: 0; top: 20px;}*/
	100% {opacity: 1; top: 0px;}
}

@keyframes modalIn {
	0% {opacity: 0; top: calc(48% + 20px);}
	/*20% {opacity: 0; top: 20px;}*/
	100% {opacity: 1; top: 48%;}
}

/*@keyframes fadeIn {
	0% {opacity: 0; }
	20% {opacity: 0; top: 20px;}
	100% {opacity: 1;}
}*/

.court-tabbing {
    margin-bottom: 10px;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
}

.court-tab-button {
	padding: 8px 25px;
	background: #fff;
	/*border: 1px solid var(--pri-color);*/
	/*border: 1px solid #ccc;*/
	display: inline-block;
	border-radius: 60px;
	font-weight: bold;
	color: var(--pri-color);
	transition: .3s;
	box-shadow: 0px 2px 2px rgba(0,0,0,.1);
	margin-right: 5px;
	margin-top: 3px;
	top: 0px;
	position: relative;
}

.court-tab-button:not(.active):hover, .court-tab-button:active {
	background: var(--pri-color);
	opacity: .7;
	color: #fff;
	text-decoration: none;
	top: -3px;
}

.court-tab-button:focus {
	text-decoration: none;
}

.court-tab-button.active {
	background: var(--pri-color);
	box-shadow: 0px 2px 6px rgba(0,0,0,.4);
	color: #fff;
	top: -3px;
}

.modal {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background: rgba(0,0,0,.5);
}

.reservation-container, .reservation-modal {
	max-width: 500px;
	width: calc(100% - 20px);
	background-color: #fff;
	border-radius: 5px;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	margin-top: 30px;
	border-top: 3px solid var(--pri-color);
	box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}

.reservation-container {
	position: relative;
	animation: boxIn .6s;
}

.reservation-container.login-container, .reservation-container.register-container, .reservation-modal {
	max-width: 400px;
	position: absolute;
	margin: 0;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: modalIn .6s;
}

/*.login-container, .register-container {
	background: var(--bg-color);
	color: #fff;
}

.login-container .input-div *,
.register-container .input-div * {
	background: transparent;
	color: #fff;
}
*/
.reservation-container.register-container, .reservation-modal {
	max-width: 500px;
}

.reservation-header, .reservation-body, .reservation-footer {
	padding: 20px;
	position: relative;
}

.reservation-header {
	color: var(--pri-color);
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}

.reservation-header * {
	margin: 0;
	font-weight: bold;
}

.reservation-info-div {
	padding: 0 20px;
	font-weight: bold;
	text-transform: uppercase;
	color: var(--pri-color);
}

.reservation-info-div .reservation-status {
	padding: 5px 15px;
	background: var(--pri-color);
	color: #fff;
	font-weight: normal;
	border-radius: 30px;
	font-size: .8em;
}

.reservation-footer {
	border-top: 1px solid #ddd;
}

.reservation-container.login-container .reservation-footer, .reservation-container.register-container .reservation-footer {
	border-top: none;
}

.reservation-footer .input-div {
	padding-top: 0;
	position: relative;
	top: -5px;
}

.reservation-form-total {
	font-weight: bold;
	font-size: 2em;
	text-align: right;
	color: var(--pri-color);
}

.reservation-form-total span:first-child {
	/*font-weight: normal;*/
	font-size: .5em;
	margin-right: 3px;
}

.button-group {
	text-align: center;
	display: flex;
	display: -moz-flex;
	display: -webkit-flex;
}

.button {
	font-weight: 1.2em;
	padding: 10px 20px;
	background: var(--pri-color);
	font-weight: bold;
	border-radius: 50px;
	color: #fff;
	text-transform: uppercase;
	display: inline-block;
	transition: .3s;
	border: none;
}

.button:disabled {
	cursor: not-allowed;
	opacity: .6;
}

.close-modal-button {
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
	display: flex;
	display: -moz-flex;
	display: -webkit-flex;
	align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	font-size: 1.4em;
	color: #ccc;
	position: absolute;
	top: 16px;
	right: 16px;
	padding: 5px;
	transition: .3s;
}

.close-modal-button:hover {
	text-decoration: none;
	color: var(--pri-color);
}

.warning-button {
	background: #ffc34d;
}

.text-disabled, .text-disabled * {
	color: #ddd;
}

.button:not(:disabled):hover {
	filter: brightness(90%);
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 2px 3px rgba(0,0,0,.3);
}

.button-group .full-button {
	width: 100%;
	display: block;	
}

.button-group .full-button:not(:first-child) {
	margin-top: 10px;
}

.input-div {
	display: flex;
	display: -moz-flex;
	display: -webkit-flex;
	align-items: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	justify-content: space-between;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	padding: 10px 0;
	/*margin-bottom: 5px;*/
}

.align-top {
	align-items: flex-start;
	-moz-align-items: flex-start;
	-webkit-align-items: flex-start;
}

.input-div p {
	width: 150px;
	font-size: .9em;
	color: #444;
	margin: 0;
	padding: 7px 0;
}

.input-div > div {
	width: calc(100% - 150px);
}

.input-div > div > input, .input-div > div > select, .input-div > div > textarea {
	padding: 5px 10px;
	width: 100%;
	border: none;
	border-bottom: 1px solid #e0e0e0;
	resize: none;
	border-radius: 0;
}

.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
	border-color: #fff;
	border-color: #eee;
}

.not-editable-event:hover {
	cursor: default;
}

.editable-event:hover {
	cursor: pointer;
}

.fc.fc-unthemed.fc-ltr {
  font-family: inherit;
}
.fc-head td, .fc th {
  border: none;
  padding: 3px 0;
}
.fc-ltr .fc-basic-view .fc-day-top {
  /*! display: flex; */
  align-items: center;
}
.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;}
.fc-ltr .fc-basic-view .fc-day-top:not(.fc-today) .fc-day-number:hover {
  /*background: #eee;*/
  background: rgba(255,255,255,0.6);
  text-decoration: none;
}
.fc-ltr .fc-basic-view .fc-day-top.fc-today .fc-day-number {
  background-color: var(--pri-color);
  color: #fff;
}
.fc-ltr .fc-basic-view .fc-day-top.fc-today .fc-day-number:hover {
  filter: brightness(90%);
  text-decoration: none;
}
.fc .fc-toolbar button {
  background: #fff;
  /*border: 1px solid var(--pri-color);*/
  border: 1px solid #ccc;
  border-radius: 35px;
  text-transform: capitalize;
  padding: 0 15px;
}
.fc .fc-toolbar button.fc-state-disabled {
  background: #ebebeb;
}
.fc .fc-toolbar button.fc-prev-button, .fc .fc-toolbar button.fc-next-button {
  width: 2.1em;
  text-align: center;
  padding: 0;
}
.fc-left, .fc-right {
	padding: 10px 0;
}
.fc-center {
  max-width: 350px;
  width: 100%;
}
.fc-center h2 {
  /*max-width: 300px;*/
  width: calc(100% - 100px);
}
.fc .fc-toolbar button:not(.fc-state-disabled):hover {
  background: var(--pri-color);
  color: #fff;
}
.fc .fc-toolbar .fc-button-group > button {
  border: none;
  border-radius: 0;
}
.fc .fc-toolbar .fc-button-group {
  /*border: 1px solid var(--pri-color);*/
  border: 1px solid #ccc;
  border-radius: 35px;
  overflow: hidden;
}
.fc .fc-toolbar .fc-button-group > button:not(:first-child) {
  /*border-left: 1px solid var(--pri-color);*/
  border-left: 1px solid #ccc;
}
.fc .fc-toolbar .fc-button-group > button:focus {
  z-index: 0;
}
.fc .fc-toolbar button.fc-state-active {
  background: var(--pri-color);
  color: #fff;
  box-shadow: none;
}



.select2-container--default .select2-selection--single {
  border: none;
  border-bottom: 1px solid #e0e0e0;
  border-radius: 0;
}
.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 10px;
}
.select2-dropdown {
  border: 1px solid #ddd;
  border-bottom: none;
  box-shadow: 0px 3px 6px rgba(0,0,0,.2);
}
.select2-container--default .select2-results > .select2-results__options {
}


@media screen and (max-width: 767px) {

	.navigation .logo {
		font-size: 1.1em;
		left: 55px;
		transform: translateY(-50%);
	}

	.navigation .floating-button,
	.clear-navigation .floating-button {
		position: absolute;
		right: 0px;
		top: 50%;
		width: 35px;
		height: 35px;
	}

	.navigation .floating-button i.fa,
	.clear-navigation .floating-button i.fa {
		font-size: 1.3em;
	}

	.navigation .logo:hover {
		text-decoration: none;
		transform: translateY(-50%) scale(1.1);
	}

	.navigation-bottom {
		height: 70px;
	}

	.court-tab-button {
		padding: 5px 15px;
		font-size: .9em;
	}

	.fc-left, .fc-right {
		padding: 5px 0;
		float: left !important;
		display: block;
		width: 100%;
		font-size: .9em;
	}

	.fc-toolbar.fc-header-toolbar {
		margin-bottom: -8px;
	}

	.fc-head td, .fc th {
		font-size: .9em;
		padding: 0px 0px 2px;
	}

	.reservation-body .input-div {
		display: block;
	}

	.reservation-body .input-div p, .reservation-body .input-div div {
		width: 100%;
	}

	.sm-menu-bars {
	    display: block;
	    position: absolute;
	    left: 0;
	    top: 50%;
	    transform: translateY(-50%);
	    font-weight: bold;
	    font-size: 1.5em;
	    padding: 5px 20px;
	    color: #000;
	    transition: .2s;
	}

	.sm-menu-bars {
		color: var(--pri-color);
	}

	.menu-container {
		display: none;
	    position: absolute;
	    left: 5px;
	    top: 100%;
	    margin-top: 10px;
	    transform: unset;
	    font-weight: bold;
	    padding: 15px;
	    background: rgba(255,255,255,.9);
	    border-radius: 5px;
	    box-shadow: 0px 3px 10px rgba(0,0,0,.3);
	    z-index: 10;
	    animation: slideDown .3s;
	}

	.menu-container a {
	    margin-right: 20px;
	    color: #102030 !important;
	    text-decoration: none;
	    transition: .2s;
	    display: block;
	    text-align: center;
	    padding: 10px 40px;
	    margin: 0;
	}

	.menu-container a:not(.active):hover, .menu-container a.active {
		color: var(--pri-color) !important;
		transform: scale(1.2);
	}
	
}


.label-container{
	position:fixed;
	bottom:48px;
	right:105px;
	display:table;
	visibility: hidden;
}

.label-text{
	color:#FFF;
	background:rgba(51,51,51,0.5);
	display:table-cell;
	vertical-align:middle;
	padding:10px;
	border-radius:3px;
}

.label-arrow{
	display:table-cell;
	vertical-align:middle;
	color:#333;
	opacity:0.5;
}

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	background-color:#06C;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	box-shadow: 2px 2px 3px #999;
}

.my-float{
	font-size:24px;
	margin-top:18px;
}

a.float + div.label-container {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s ease;
}

a.float:hover + div.label-container{
  visibility: visible;
  opacity: 1;
}



.tnc-checkbox-container {
  font-size: .9em;
  display: flex;
  justify-content: center;
  padding: 5px 0px 10px
}
.tnc-checkbox-container a {
	text-decoration: underline;
	text-decoration-style: dotted;
}
.checkbox-div {
  	display: inline-block;
	width: 20px;
	position: relative;
	height: 100%;
	margin-right: 4px;
}

.checkbox-div input {
  opacity: 0;
  position: absolute;
  top: 0;
  z-index: 2;
  left: 0;
  cursor: pointer;
}

.checkbox-div span.checkbox-icon {
	position: absolute;
	cursor: pointer;
}

.checkbox-div span.checkbox-icon::before {
  content: '\f096';
  font-family: 'FontAwesome';
  font-size: 1.4em;
  position: absolute;
  display: block;
  left: 0;
  top: 1px;
  line-height: 1em;
  padding: 0;
}

.checkbox-div input:checked + span.checkbox-icon::before {
  content: '\f046';
  color: var(--pri-color);
}

.modal-text-div {
    overflow-y: auto;
    height: 100%;
}

#tnc-modal {
	display: none;
}

#payment-confirmation-modal {
	display: none;
}

.lang-button-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 75px;
}

.lang-button-container a.active {
    font-weight: bold;
    color: var(--pri-color);
    font-size: 1.2em;

}
.lang-button-container a {
    padding: 0 5px;
    color: #999;
}

.note-text {
	/*color: #666;*/
	font-size: .9em;
}

.contact-detail span {
	width: 150px;
	display: inline-block;
	margin-bottom: 5px;
}

.box-title {
	margin-bottom: 20px;
	font-size: 48px;
	text-align: center;
}

.map-container {
	margin-top: 40px;
}

#map {
	height: calc(100vh - 350px);
	background: rgba(0,0,0,.05);
	border: 1px solid rgba(0,0,0,.07);
}