@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

.rental-widget-outer{
    all: unset;
}

.widget-overlay{
	position: fixed;
	z-index: 2147483645;
	top: 0px;
	bottom: 0px;
	left: 0px; 
	right: 0px; 
	background-color: rgba(0,0,0,0.2);
	display: none;
}

.widget-popup{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 2147483646;
	display: none;
	font-family: 'Open Sans', sans-serif;
	width: 100%; 
	max-width: 350px;
}

.widget-popup-close{
	position: absolute;
	right: 12px; 
	top: 15px; 
	z-index: 10; 
	width: 30px; 
	height: 30px; 
	text-align: center; 
	font-size: 30px; 
	color: #c0c0c0; 
	padding: 0px 0px 0px 0px; 
	cursor: pointer;
}

.widget-popup-inner{
	background-color: #fff;
	border-radius: 5px;
	font-size: 14px!important;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);
	padding: 15px 15px 10px 15px;
	box-sizing: border-box;
}

.widget-popup-inner .widget-popup-inner-col{
	width: 100%;
	margin: 0px 0px 10px 0px;
}

.widget-popup-inner .widget-popup-inner-col table{
	width: 100%!important;
	border: 0px!important;
	margin: 0px!important;
}

.widget-popup-inner .widget-popup-inner-col-header-title{
	display: block;
	font-size: 16px;
	color: #444;
	font-weight: 600;
	margin: 0px;
	padding: 0px 0px 5px 0px;
}

.widget-popup-inner .widget-popup-inner-col-header{
	display: block;
	font-size: 14px;
	color: #444;
	font-weight: 400;
	margin: 0px;
	padding: 0px 0px 4px 0px;
}

.widget-popup-inner .widget-popup-book-now-inner{
	width: 100%;
	margin: 0px;
	padding: 10px 0px 0px 0px;
	border-top: 1px solid #d4d4d4;
}

.widget-popup-inner .widget-button{
	width: 100%;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	padding: 12px 0px;
	outline: none;
	display: block;
	border: 0px;
	position: relative;
	-webkit-transition:
	background .3s;
	-o-transition:
	background .3s;
	transition: background .3s;
	z-index: 1;
	display: block;
	margin: 8px 0px 0px 0px;
	text-align: center;
	border-radius: 25px;
	box-sizing: border-box;
}

.widget-popup-inner .widget-button:hover{
	background-color: #555555;
}

.widget-popup-inner .widget-button-no-availability{
	width: 100%;
	font-weight: 700;
	background: #fff;
	font-size: 15px;
	line-height: 1;
	text-decoration: none;
	color: #C0C8D1;
	cursor: default;
	padding: 12px 20px;
	box-sizing: border-box;
	outline: none;
	display: block;
	border: 1px solid #C0C8D1;
	position: relative;
	-webkit-transition: background .3s;
	-o-transition: background .3s;
	transition: background .3s;
	z-index: 1;
	display: block;
	margin: 8px 0px 0px 0px;
	text-align: center;
	border-radius: 25px;
}

.clear-rows{
	clear: both;
}



.rental-widget-outer{
	width: 100%; 
	font-family: 'Open Sans', sans-serif;
	position: relative;
}

.rental-widget-header{
	width: 100%; margin: 0px; padding: 0px 0px; position: relative; height: 40px;
}

.rental-widget-header-no-left{
	position: absolute; top: 0px; bottom: 0px; left: 0px; width: 50px; padding: 10px 10px; font-size: 20px; background-color: #fff; color: #F1F1F1; text-align: left; box-sizing: border-box;
}
.rental-widget-header-left{
	position: absolute; top: 0px; bottom: 0px; left: 0px; width: 50px; padding: 10px 10px; font-size: 20px; background-color: #fff; color: #C8C8C8; cursor: pointer; text-align: left; box-sizing: border-box;
}

.rental-widget-header-no-right{
	position: absolute; top: 0px; bottom: 0px; right: 0px; width: 50px; padding: 10px 10px; font-size: 20px; background-color: #fff; color: #F1F1F1; text-align: right; box-sizing: border-box;
}

.rental-widget-header-right{
	position: absolute; top: 0px; bottom: 0px; right: 0px; width: 50px; padding: 10px 10px; font-size: 20px; background-color: #fff; color: #C8C8C8; cursor: pointer; text-align: right; box-sizing: border-box;
}

.rental-widget-header-title{
	width: 100%; text-align: center; padding: 10px 0px; font-size: 14px; font-weight: 400; color: #333333!important;
}

.rental-widget-header-left i.fas, .rental-widget-header-left i.fab, .rental-widget-header-right i.fas, .rental-widget-header-right i.fab{
    padding: 0px!important;
}

.rental-widget-header-no-left i.fas, .rental-widget-header-no-left i.fab, .rental-widget-header-no-right i.fas, .rental-widget-header-no-right i.fab{
    padding: 0px!important;
}

.rental-widget-body{
	width: 100%; box-sizing: border-box; padding: 0px 0px 0px 0px;
}

.rental-widget-mobile-days{
	width: 100%; padding: 5px 0px; font-size: 12px; color: #333333!important;
}

.rental-widget-desktop-days{
	width: 100%;
}

.rental-widget-mobile-day{
	float: left; width: 14.28%; text-align: center;
}

.rental-widget-desktop-days-spacer{
	float: left; width: 15%;
}

.rental-widget-desktop-day{
	float: left; height: 20px; padding: 0px 0px; text-align: center;
}

.rental-widget-subgroup-name-desktop{
	float: left; width: 15%; background-color: #f1f1f1; height: 32px; padding: 0px 10px; box-sizing: border-box; font-size: 13px; cursor: default; line-height: 31px; border: 1px solid #fff;
}

.rental-widget-subgroup-name-mobile{
	width: 100%; padding: 10px 0px 5px 0px; font-size: 16px; cursor: default; text-align: center; font-weight: bold;
}

.rental-widget-available{
	float: left; height: 32px; line-height: 31px; padding: 0px 0px; background-color: #31A952; color: #fff; font-size: 13px; text-align: center; box-sizing: border-box; border: 1px solid #fff;
}

.rental-widget-available:hover{
	background-color: #2B9146; cursor: pointer; -webkit-transition: background .3s; -o-transition: background .3s; transition: background .3s;
}

.rental-widget-closed{
	float: left; height: 32px; line-height: 31px; padding: 0px 0px; background-color: #f8f8f8; color: #767789; font-size: 13px; text-align: center; box-sizing: border-box; border: 1px solid #fff;
	cursor: default;
}

.rental-widget-not-booked{
	float: left; height: 32px; line-height: 31px; padding: 0px 0px; background-color: #54CD75; color: #BDECCA; font-size: 13px; vertical-align: middle; text-align: center; box-sizing: border-box; border: 1px solid #fff;
	cursor: default;
}

.rental-widget-booked{
	float: left; height: 32px; line-height: 31px; padding: 0px 0px; background-color: #EB4132; color: #FFA06D; font-size: 13px; vertical-align: middle; text-align: center; box-sizing: border-box; border: 1px solid #fff;
	cursor: default;
}

.rental-widget-not-month{
	float: left; width: 14.28%; height: 32px; line-height: 31px; padding: 0px 0px; background-color: #fff; color: #333; vertical-align: middle; text-align: center; box-sizing: border-box; border: 1px solid #fff;
}

.rental-widget-loading{
	display: none; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; text-align: center; z-index: 2; background-color: rgba(100,100,100,0.4); color: #fff;
}

.rental-widget-chart{
	width: 100%; margin: 15px 0px; padding: 10px 0px; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1;
}

.rental-widget-chart-col{
	float: left; width: 25%; margin: 0px 0px 2px 0px;
}

.rental-widget-chart-col table{
	border: 0px!important;
}

.rental-widget-chart-col table td{
	border: 0px!important;
}

.rental-widget-availability-box-inner-col-100-label{
	display: block; font-size: 14px!important; font-weight: 700!important; color: #444!important; text-align: left!important; padding: 0px 0px 4px 0px!important;
}

.desktop-days{
	display: block;
}

.mobile-days{
	display: none;
}

.red-to-darkgreen{
	background-color: #31A952; background: linear-gradient(to right bottom, #EB4132 50%, #31A952 50%); background: -webkit-gradient(to right bottom, #EB4132 50%, #31A952 50%); background: -moz-gradient(to right bottom, #EB4132 50%, #31A952 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EB4132', endColorstr='#31A952',GradientType=1 ); 
}	

.darkgreen-to-red{
	background-color: #EB4132; background: linear-gradient(to right bottom, #31A952 50%, #EB4132 50%); background: -webkit-gradient(to right bottom, #31A952 50%, #EB4132 50%); background: -moz-gradient(to right bottom, #31A952 50%, #EB4132 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#31A952', endColorstr='#EB4132',GradientType=1 ); 
}

.block-with-text{
	overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; color: #333!important;
}	

.block-with-text a{
	text-decoration: none; color: #333!important;
}


.widget-popup-inner select{
	width: 130%; color: #7f7f7f!important; font-size: 14px;	border: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; line-height: 25px; height: 25px; 
	-moz-border-radius: 0px; -webkit-border-radius: 0px; border-radius: 0px; background-clip: padding-box; padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 0px;
	font-family: 'Open Sans', sans-serif;
	background: url('/Images/arrow2.png') #fff no-repeat right 3px;
}

.widget-popup-inner select:focus{
    border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05), 0 0 4px rgba(102, 175, 233, 0.4); box-shadow: inset 0 1px 1px rgba(0,0,0,.05), 0 0 4px rgba(102, 175, 233, 0.4);
}

.widget-popup-inner .form{
	width: 100%; font-size: 13px; line-height: 1.42857; color: #7f7f7f!important; background-color: #fff; border: 1px solid #BBBBBB; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 35px; height: 35px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;	padding-right: 5px;	padding-left: 10px;	padding-top: 0px; padding-bottom: 0px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); background-clip: padding-box; -webkit-appearance: none; -moz-appearance: none; appearance: none;
	font-family: 'Open Sans', sans-serif;
}

.widget-popup-inner .form:hover{
    border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05), 0 0 4px rgba(102, 175, 233, 0.4); box-shadow: inset 0 1px 1px rgba(0,0,0,.05), 0 0 4px rgba(102, 175, 233, 0.4);
}






.spinner {
	margin: 0px auto 0;
	text-align: center;
	position: absolute;
	top: 50%; 
	left: 50%;
	transform: translate(-50%,-50%);
}

.spinner > div {
	width: 10px; height: 10px; background-color: #ffffff; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
	-webkit-animation-delay: -0.32s; animation-delay: -0.32s;
}

.spinner .bounce2 {
	-webkit-animation-delay: -0.16s; animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
	0%, 80%, 100% { -webkit-transform: scale(0) }
	40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
	0%, 80%, 100% { 
		-webkit-transform: scale(0);
		transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		transform: scale(1.0);
	}
}

@media screen and (max-width: 1100px)
{
	.rental-widget-chart{
		padding: 10px 0px 0px 0px;
	}
	.rental-widget-chart-col{
		width: 50%; margin: 0px 0px 10px 0px;
	}
}

@media screen and (max-width: 800px)
{
	.desktop-days{
		display: none!important;
	}	
	.mobile-days{
		display: block!important;
	}	
	.days{
		width: 14.28%!important;
	}

	.rental-widget-chart-col{
		width: 100%;
	}	
}

@media screen and (max-width: 600px)
{
	.widget-popup{
		left: 0%;
		top: 0%;
		right: 0%;
		bottom: 0%;
		width: 100%; 
		max-width: 100%;
		height: 100%;
		transform: translate(0%,0%);
	}
	.widget-popup-inner{
		width: 100%; 
		height: 100%;
		border-radius: 0px;		
		overflow-y: auto;
	}
	
}