.page__background{
	background-color: #f4fc14 !important;
}

#cancelled.modal{
	background-color: transparent; !important;
	background-image: url("../img/cancelled.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

#modal .modal__content {
	background-color: #f4fc14 !important;
}

.page__content {
	font-family: Helvetica, Arial, sans-serif !important;
	/*background: url('') !important;
	/*background: url('../img/bgimg.png') !important;*/
    /*background-repeat: no-repeat !important;
    background-size: auto 100% !important;*/
}


.wind-bg-image {
	background: url('../img/bgimg.png') !important;
    background-repeat: no-repeat !important;
    background-size: auto 100% !important;
}

.title {
	height: 32px;
	line-height: 32px;
	font-size: 18px;
}

.row-container{
	width: 100%;
	background-color: rgba(160, 160, 160, 0.2);
}

.info-panel {
	/*width: 68%;*/
	max-width: 260px;
	margin: auto;
	
}

.info-panel.title {
	font-size:14px;
	height: 24px;
	padding-bottom: 0px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.wind-chart{
	font-size:14px;
	padding-bottom: 0px;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.info-panel.icons {
	height: 64px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	padding-bottom: 0px;
}

/*.info-panel.icons .col span{
	border: 1px solid red;
	display: inline-block;
	width: 64px;
	height: 64px;
}*/

.info-panel.chart {
	height: 64px;
	/*padding-bottom: 5px;*/
	border-radius: 5px;
}




.col {
	text-align: center;
}

#carousel {
	height: 80vh;
	/*border: 1px solid red;*/
}

#speed {
	position: absolute;
	top:30%;
	transform: translate(0, -30%);
	margin: 0;
	width: 100%;
	text-align:center;
	font-size:14px;
}

.wind-chart {
	position: absolute;
	top:60%;
	transform: translate(0, -60%);
	margin: 0;
	width: 100%;
	text-align:center;
	font-size:14px;
}

.center {
	text-align: center !important;
}


#arrow{
	height: 52px;
	width: 52px;
	margin-top: 5px;
	background-size: 52px 52px;
	background-position: center;
	background-repeat: no-repeat;
}

#weather-icon{
	/*background-image: url('../img/broken-clouds.png');*/
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	font-size:14px;
	line-height: 52px;
	margin-top: 5px;
	height: 52px;
    width: 52px;
}

#speed #value{
	font-size:130px;
	padding-left:15px;
	text-shadow: 3px 3px 10px #666;
}



#conditions {
	text-align:center;
}

#angle {
	font-size:14px;
	text-align: center;
	margin-bottom: 15px;
    margin-top: 15px;
}

.wave-icon {
	background-image: url('../img/wave-icon.png');
	background-size: 35px 35px;
	background-position: center 10px;
	background-repeat: no-repeat;
	font-size:14px;
	text-align: center;
	margin-left: 3px;
    padding-top: 6px;
    line-height: 22px;
    /*border: 1px solid;*/
}

.temp {
	text-align: center;
	//float: left;
	//background-color: #F1FB6E;
	border-radius: 19px;
	//border-bottom-right-radius: 4px;
	//border-top-right-radius: 4px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-weight: 500;
	text-align: center;
	font-size:14px;
	margin: auto;
	margin-top: 10px;
}

.tide-height-time {
	position: absolute;
	bottom: 0;
	left:50%;
	transform: translate(-50%, 0);
	width: 260px;
	font-size:14px;
	margin: auto;
	text-align: left;
}

/*canvas styles for chart*/
#windChart{
	width: 80% !important;
	height: auto !important;
	margin: auto;
	margin-top: 10px;
}

#tideChart{
	width: 260px !important;
	height:64px !important;
	margin: auto;
}



.footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
}

.toast{
	background: #ffffff !important;
	margin: auto;
	max-width: 450px !important;
}

.toast__message {
	margin: 0 !important;
	color: #333333;
}