* {
	margin:0;
	padding:0;
	box-sizing:border-box;
/*	background-image: url('/images/sky1.jpg');
	background-attachment: fixed;
	background-size: cover;
*/

}



html, body {
	width:100%;
	height:100%;
		
}

body {
	background-color:#B6DFF4;
}

header, #form {
	border-bottom:1px solid #000;
	margin-bottom:1rem;
}

section {
	padding-left: 2rem;
	padding-right: 2rem;
}



h1, .h1 {
	color:red;	
	padding:1rem 0;
}

@media only screen and (max.width:479px) {
	h1, .h1 {
	font-size:1.0rem;
	}	
	
}
@media (max-width: 600px) {
  .image {
    width: 100%;
  }
}
input[type="checkbox"] {
  width: 2rem;
  height: 2rem;
}

label, legend {
	color:blue;
	font-size:1.5rem;	
}


.fullwidth {
	width:100%;
	max-width: 30rem;
	
	
}

.iconWidth {
	border-radius: 50%; 
	width:50px;
	text-align: center;
	
	
}
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
}

.image {
  width: 20%;
  padding: 10px;
}

.rowWrap{
	display:flex;
	flex-direction:row;
	width:100%;
	justify-content:center;
	align-items:stretch;
}

@media (max-width:767px)  {
	.rowWrap{
		flex-direction:column;
		align-items:center;	
	}
}

.station {
	color:blue;
	font-size:1.5rem;	

	
}
.rowWrap2{
	display:flex;
	flex-direction:column;
	width:100%;

	justify-content:center;
	align-items:center;
}
.outputBox {
	display:flex;
	flex-direction:column;	
	width:100%;
	max-width:12rem;
	border: 1px solid black;
	padding: 10px;
	margin:0.15rem;  
	background-color:white;
	margin-bottom:1rem;

}
.dailyBox {
	display:flex;
	flex-direction:column;	
	width:100%;
	max-width:30rem;
	align-items: left;
	padding: 10px;
	padding-right: 15px;

	margin:0.15rem;  
 	margin-right:0.5rem;  
	background-color:white;
	margin-bottom:1rem;	
}
.buttonFlexCheckLoc {
	display:flex;
	align-items:center;
	padding:1rem;
}
.planRanges  {

	width:100%;
	text-align:center;

}
.planRangeDisplayBoxBlue {
	border:3px solid blue;
	width:60%;
	margin-top:0.5rem;
}

.planOutsideBox {
	display:flex;
	flex-direction:column;	
	width:100%;
	max-width:30rem;
	align-items: left;
	padding: 10px;  
	background-color:#00BFFF;

	font-size:0.75rem;
}

.imageBox {
	display:flex;
	flex-direction:column;		
	width:100%;
	border: 1px solid black;

	margin:0.15rem;  
	background-color:#FFFFE0;


}
.planCategoryBox  {
	padding:0.25rem;
	border:1px solid red;
	text-align:center;
	font-size:1.25rem;
	color:black;
	margin-bottom:0.25rem;

	
}
.planRangeInputRow  {
	display:flex;
	flex-direction:row;		
	width:100%;
	padding: 0.25rem;
	justify-content: space-between;	
}

.planRangeInputColumn40  {
	display:flex;
	flex-direction:column;		
	width:40%;
	border:1px solid blue;
	padding-left:1rem;
	padding-right:1rem;	
	padding-bottom:0.5rem;	



}
.planLabelSize {
	font-size:1.25rem;	
}

.planTitle {
	font-size:2rem;
	margin-top:0.5rem;
	margin-bottom:0.5rem;
}

.planRanges {
	font-size:0.85rem;	
}

.planInputSize{
	width:100%;
	display:flex;
	flex-direction:column;	
	text-align:center;
	align-items:center;

}

.planInputBox  {
	font-size:1.25rem;
	color:black;
	width:100%;
	text-align:center;

}

.planSubmit  {
	display:flex;
	flex-direction:column;		

	text-align:center;
}

.planHeaderBox {
	display:flex;
	flex-direction:row;		
	width:100%;
/*	border: 0.5px solid blue; */

/*	border-bottom:1px solid black;*/
	background-color:white;



}
.plannerBoxStart {
	display:flex;
	flex-direction:row;		
	width:100%;
	border-top: 2px solid black; 


	background-color:white;



}
.plannerBoxStartSunset {
	display:flex;
	flex-direction:row;		
	width:100%;
	border-top: 2px solid black; 


	background-color:#DCDCDC;


}
.plannerBox {
	display:flex;
	flex-direction:row;		
	width:100%;
/*	border: 0.5px solid blue; */


	background-color:white;


}
.plannerBoxSunset {
	display:flex;
	flex-direction:row;		
	width:100%;
/*	border: 0.5px solid blue; */


	background-color:#DCDCDC;


}
.plannerText {
	text-align:center;
	
	color:black;
	width:100%;

}

.planHourGoodTop {
	border-top:3px solid blue;

}
.planHourGoodSide {
	border-left:3px solid blue;

}
.planHourGoodRightSide {
	border-right:3px solid blue;

}
.planHourBadTop {
	border-top:3px solid blue;

}
.plannerColumn35 {
	display:flex;
	flex-direction:column;		
	width:35%;
	padding-left:0.25rem;
	padding-right:0.25rem;	
	text-align: center;	
		
}

.plannerColumn20 {
	display:flex;
	flex-direction:column;		
	width:20%;
	padding-left:0.25rem;
	padding-right:0.25rem;	
	text-align: center;	
		
}
.plannerColumn15 {
	display:flex;
	flex-direction:column;		
	width:15%;
	padding-left:0.25rem;
	padding-right:0.25rem;	
	text-align: center;	
		
}
.sunsetShade {
	background-color:#DCDCDC;
}

.bgColorLtYellow  {
	background-color:#FFFFE0;
}

.planPrecipInRange {
	background-color:lightblue;
}

.planTempInRange {
	background-color:#F08080;
}
.planWindInRange {
	background-color:lightgreen;
}
.planNotInRange {
	background-color:white;
}
.plannerFont {
	font-size:0.75rem;
}

.splitDateColumnLeft {
	display:flex;
	flex-direction:column;		
	width:10%;


	text-align: center;	
	
}
.splitDateColumnRight {
	display:flex;
	flex-direction:column;		
	width:10%;


	text-align: center;	
	
}
.plannerRow {
	display:flex;
	flex-direction:row;		
	
	
}
.dayDateSmallLeft {

	color:blue;
	display:flex;
	flex-direction:row;	
	text-align: center;	
	padding-left:0.5rem;
	
}
.dayDateSmallRight {

	color:blue;
	display:flex;
	flex-direction:row;	
	text-align: right;		
	
}


.airportCodeBox {
	display:flex;
	flex-direction:row;
	width:30%;
	padding:0.25rem;
	align-items:center;
	
}
.latLonBox  {
	display:flex;
	flex-direction:row;
	border: 1px solid black;
	width: 100%;
	padding:0.05rem;
	padding-bottom:0.25rem;
	margin-bottom:0.5rem;
}
.gpsLocation{
	display:flex;
	flex-direction:row;	

	width:100%;
	padding-left:0.25rem;
}

.latLonRow{
	display:flex;
	flex-direction:column;
	width:40%;
	padding-left:0.25rem;
}


.latLonRowRight{
	display:flex;
	flex-direction:column;
	width:50%;
	padding-left:2rem;

}


.cityStateRow {
	display:flex;
	flex-direction:row;
	width:100%;
	padding-left:0.25rem;


}

.wide100 {
	width:100%;
}

.radiusButton  {
	border-radius:20px;
	border:1px solid black;
	
}


.cityInputBox {
	padding:0.25rem;
	border:1px solid black;
	margin-bottom:0.5rem;
}
.state {
	margin-left:0rem;
	width:100%;
	margin-top:0.25rem;
}

.paddingOneLeft  {
	padding-left:0.5rem;
}


.detailsBox {
	display:flex;
	flex-direction:column;		
	width:100%;
	border: 1px solid black;
	padding:0.25rem;
	margin:0.15rem;  
	background-color:white;


}
.clearPage  {
	text-align: center;
	padding-top: 0.5rem;

}
.blackBorder {
	border: 2px solid black;
	
}

.black {
	color:black;
	
}
.blue {
	color:blue;
	
}
.green {
	color:green;
	
}
.red {
	color:red;
	
}
.italics {
	font-style: italic;
}

.seventyFive {
	font-size:0.75rem;
}
.eightyFive {
	font-size:0.85rem;
}

.eightyFiveDaily {
	font-size:0.85rem;
}

.oneRem {
	font-size:1.00rem;
}

.emailText {
	width:100%;
    max-width: 50rem;
	padding-left: 0.2rem;
	padding-right: 0.2rem;	
	color:blue;
	font-size:1.0rem;
}	
.oneTwentyFive {
	font-size:1.25rem;
}
.oneFifty {
	font-size:1.5rem;
}
.oneSeventyFive {
	font-size:1.75rem;
}

.smallTemp {
	font-size:0.6rem;
	color:black;
	
}
.dailyImage {
		display:block;
		width:100%;
		height:auto;								
}
.hourlyImage {
		max-height:85px;
		max-width:85px;
}
.width25percent {
		width:25%;
}
.day {
	margin-left:0.25rem; 
	width:37%;
	
		
}
.dayRight {
	margin-left:0.15rem; 
	width:38%;
	text-align: right;
		
}
.rowBox {
	margin:0.25rem; 
		display:flex;
	

		
}
.temperature {
	font-size:1.0rem;	
	color:blue;
	width:100%;
}
.dewpoint {
	font-size:1.0rem;	
	color:red;
	width:100%;
}

@media (max-width:767px)  {
	.outputBox{
		max-width:calc(100% - 2rem);
		
	
	}
}



.stationBox {
	color:blue;
	font-size:1.25rem;	
	border: 1px solid red;
	justify-content: center;
	align-items: center;
	text-align: center;	
	margin-bottom:0.5rem;
	background-color:#FFFFE0;
	
}

.forecastBox {
	color:black;
	font-size:0.85rem;	
	border: 1px solid blue;
	justify-content:left;
	text-align: left;	
	margin-bottom:0.5rem;
	padding:0.25rem;


	
}
.tempoBox {
	color:black;
	font-size:0.65rem;	
	border: 1px solid black;
	text-align: center;	
	margin-bottom:0.5rem;
	padding:0.25rem;
	background-color:yellow;


}

.centeredText {
	text-align:center;

	
	
}
.discussTitleStation {
	text-align:center;
	color:black;	
	font-size:1.5rem;
}
.discussGeneral{
	font-size:1.25rem;
	text-align: justify;
	text-justify: inter-word;
}

.currentObs {
	text-align:center;
	font-size:1rem;	
	color:black;
	border: 1px solid green;	
	margin-bottom:0.5rem;	
	background-color:#F0F8FF;
	
}
.tinyText {
	text-align:center;
	font-size:0.75rem;	
	color:grey;

}
.dateTimeText {
	text-align:center;
	font-size:1.0rem;	
	color:black;
	width:100%;

}
.dateTimeText85 {
	text-align:center;
	font-size:0.85rem;	
	color:black;
	width:100%;

}
.distanceElevation {
	text-align:center;
	font-size:0.85rem;	
	color:black;
	padding-top:0.25rem;
	padding-bottom:0.25rem;

}
.windsTimeText {
	text-align:center;
	font-size:1.0rem;	
	color:blue;
	width:100%;

}

.issuedText {
	text-align:center;
	font-size:1.0rem;	
	width:100%;

}

.SunriseSunsetLogo{
	height:1rem;
	margin-left:2rem;
}

.dateTime {
		font-size:0.75rem;	
		color:blue;
		
	
}

.valid {
	font-size:0.85rem;	
	color:blue;
	margin-bottom:0.5rem;	
	text-align:center;
}


.sunrise {
		font-size:0.75rem;	
		color:blue;
		text-align:center;
		border: 1px solid blue;
		margin-top:auto;
	
		
}
.nameAirport {
		font-size:0.75rem;		
		color:black;
		text-align:center;
	
		
}
.windsAloft {
		font-size:0.75rem;		
		color:black;
		text-align:left;
	
		
}

.sunTitle {
		font-size:1rem;	
		color:black;
		text-align:center;
}


.wind {
		color:blue;

}

.standardText {
		color:black;
		font-size:0.85rem;		
}

.dateRange {
		color:black;
		font-size:0.85rem;		
}

.thinSpace {
		padding-bottom:0.5rem;		
}

.windshear {
	font-size:0.75rem;	
	color:blue;

}

.alignTitle {
	align-items:center;
	
	
}
.noBorder {
	border:1px;
}

.border1blackBottom {
	border-bottom: 1px solid black;
}

.ltaWeatherTitle{
	color:blue;
	font-size:2.25rem;
	padding-left:0.5rem;
}

.padTop  {
	padding-top:0.5;
}

.ltaTitleGraphic  {
	height:60px;
}

.pageTitle {
	padding-bottom:0.25;
}

.skyConditions {
	text-align: left;	
	padding-left:1rem;	
	color:green;
	font-size:0.85rem;			
}

.category  {
	text-align: left;	
	color:red;
	font-size:0.85rem;		
}
.dateRange {
		font-size:0.75rem;

}

.moveOver {
	padding-left:0.90rem;
}

.airportCodeText {
	font-size:1.25rem;
	padding-left:0.5rem;
	margin-right:1.0rem;	
	color:blue;
}
.round-button {
  style:none;
  text-decoration: none;
  border: none;
  background-color: transparent;
  
}

.round-button-circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #0099ff;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease-in-out;
}

.round-button-circle:hover {
  background-color: #0077cc;
  transform: scale(1.1);
}

.round-button-text {
  display: block;
  text-align: center;
  line-height: 1;
}

.bold {
	  font-weight: bold;
}

.pointFiveRem {
	font-size:0.5rem;
	
}


@media (max-width:767px)  {
		.tempoBox {
			font-size:1.0rem;
		}	
		.stationBox {
			font-size:1.5rem;	

			
		}
		.ltaWeatherTitle{
			color:blue;
			font-size:2.0rem;
			
		}		
		.airportCodeText {
			font-size:1.35rem;

		}		
		.wind {

				font-size:1.25rem;		
		}
	
		.eightyFive {
			font-size:1.25rem;
		}
	
		
		.eightyFiveDaily {
			font-size:0.9rem;
		}		
		.standardText {
				font-size:1.25rem;		
		}
		.windshear {
			font-size:1.25rem;	

		}
		.skyConditions {
			font-size:1.25rem;

		}
		.category  {
			font-size:1.25rem;

		}	
		.sunrise {
				font-size:1.0rem;	
	
				
		}
		.nameAirport {
				font-size:1.25rem;			
				
				
		}	

		.windsAloft {
				font-size:1.25rem;		

			
				
		}		

		.sunTitle {
				font-size:1.25rem;	
;
		}	
		.dateTime {
				font-size:1.25rem;	

			
		}	
		.dateTimeText {

			font-size:1.25rem;	


		}
		.distanceElevation {
			font-size:1.0rem;	

		}		
		.windsTimeText {

			font-size:1.25rem;	


		}			
		.currentObs {

			font-size:1.5rem;	

		}	
		.valid {
			font-size:1.25rem;	

		}	
		.dateRange {
				font-size:1.25rem;
	
		}
		.moveOver {
			padding-left:1.71rem;
		}	
		.wide50 {
			width:60%;
		}	
		.oneTwentyFive {
			font-size:1.35rem;
		}	
	
		
		.pointFiveRem {
			font-size:0.75rem;
			
		}
	
		.discussTitleStation {
			font-size:1.5rem;
}

}


.column {
	display:flex;
	flex-direction:column;
}

.row{
	display:flex;
	flex-direction:row;
	
}



.column.center {
	align-items:center;
	
}

.text.center {
	text-align:center;
	margin-left:1rem;
	padding-left:2rem;
	
}
.topMargin1 {

	margin-top:1rem;
	
}
.topMarginHalf {

	margin-top:0.5rem;
	
}



.row.center {
	justify-content:center;
}

.center-self {
	align-self:center;
}

.formgroup {
	padding:0.5rem;

	
}

.input-font {
	font-size:1.25rem;
	padding-left:0.5rem;
	max-width:40%;
}

.blue-font {
	font-size:1.25rem;

	color:blue;
}

.green-font {
	font-size:1.25rem;

	color:green;
}
.black-font {
	font-size:1.25rem;

	color:#000;
}

.pl-1 {
	padding-left:1rem;	
}

.pt-1 {
	padding-top:1rem;
}

.pt-2 {
	padding-top:2rem;
}

.pb-1 {
	padding-bottom:1rem;

}

.paddingAll1 {
	padding:1rem;
}

.altitude-font {
	font-size:2.5rem;
	padding-left:0.5rem;
	color:green;
}

.weatherInput {
	font-size:1.5rem;
	padding-left:0.5rem;
	margin-right:1.0rem;	
	color:blue;
}



.latLonInput {
	font-size:1.40rem;
	width:100%;
	max-width:22rem;
	padding-left:0.5rem;
	margin-right:1.0rem;	
	color:blue;
}

.noteFont {
	font-size:1.5rem;
	width:100%;
	max-width:20rem;
	padding-left:0.5rem;
	margin-right:1.0rem;	
	color:black;
}

.cityInput {
	font-size:1.5rem;
	width:100%;
	max-width:20rem;
	padding-left:0.5rem;
	margin-right:1.0rem;	
	color:blue;
}
.emailInput {
	font-size:1.5rem;
	width:100%;
	max-width:60rem;
	padding-left:0.5rem;
	padding-right:0.5rem;	
	
	color:blue;
}
.forecastDiscussionText {
	/*font-size:3rem; */
	width:100%;
	max-width:60rem;
	padding-left:1.5rem;
	padding-right:1.5rem;	
	
	color:blue;
}

.useGPS {
	font-size:1.5rem;
	padding-left:0.5rem;
	padding-bottom:0.5rem;
	margin-right:1.0rem;	
	color:blue;
}

.checkBox {
	font-size:6.0rem;
	
	
}

.noDecoration {
	text-decoration:none;
}


.cazooee-tag {
	color:#695dff ;
	text-decoration:none;	
}
.line {
	border-bottom:1px solid #000;
	margin-bottom:0.25rem;	
}

.bottom {
	border-bottom:1px solid #000;	
	margin-bottom:0.5rem;	
}



.button {
	min-width:48px;
	min-height:48px;
	padding:0.5rem;
	text-decoration:none;
	cursor:pointer;
	font-size:1.25rem;	
	border-radius:0.25rem;
	font-family:helvetica;
		
}

.selectionOutputBox {
	padding-bottom: 1rem;
}
.buttonRound {
	min-width:48px;
	min-height:48px;
	padding-right: 1rem;
	padding-left: 1rem;
	text-decoration:none;
/*	cursor:pointer;  */
	font-size:1.25rem;	
	border-radius:1.0rem;
	font-family:helvetica;
		
}
.button-small {
	min-width:48px;
	min-height:30px;
	text-decoration:none;
	cursor:pointer;	
	border-radius:1rem;
		
}
.button-tall {
	height:100px;
}



.menubutton {
	width:100%;
	text-align:center;
	margin:.15em;
	/*font-size:1.5rem;  */

}

.selectbutton {
	width:100%;
	text-align:center;
	margin:.15em;
	font-size:1.5rem;  

}
.menubutton-small {
	width:100%;
	text-align:center;
	margin:.15em;
	font-size:1rem;


}

.icon {
	border-radius: 50%;
	width: 75px;
	text-decoration: none;


}
.button-round {
	border-radius: 50%;
	width: 75px;
	text-decoration: none;
	border:none;
	text-align:center;
	background-color:transparent;
	font:inherit;
	cursor:pointer;
	

}


.iconName {
	font-size:.85rem;
	color:black;

}
.iconBox  {
	text-align:center;
	margin:.15em;
	padding:0.5rem;
	flex:1;
	justify-content:left;
}

.buttonBox  {
	text-align:center;
	margin:.15em;
	font-size:1.5rem; 
	padding-top:0.5rem;
	padding-bottom:1rem;
	padding-right:1rem;
	
}
.button-green {
	background-color:#99cc00;
	color:white;
}
.button-green:hover {

	background-color:#4CAF50;
	color:black;

}

.button-blue {
	background-color:#2E86C1 ;
	color:white;
}
.button-blue:hover {
	background-color:#85C1E9 ;
	color:black;
}

.button-red {
	background-color:#CB4335;
	color:white;
}
.button-red:hover {
	background-color:F1948A;
	color:black;
}


.button-grey {
	background-color:#909497;
	color:white;
}

.button-grey:hover {
	background-color:#E5E7E9 ;
	color:black;
}

.button-tan {
	background-color:#ED9957;
	color:white;
}

.button-tan:hover {
	background-color:#F1B88B ;
	color:black;
}

.button-yellow {
	background-color:#F1C40F;
	color:white;
}
.button-yellow:hover {
	background-color:##F9E79F;
	color:black;
}
.button-lt-blue {
	background-color:#85C1E9;
	color:white;
}
.button-lt-blue:hover {
	background-color:#D6EAF8;
	color:black;
}
.button-pink {
	background-color:hsl(336, 100%, 50%);
	color:white;
}
.button-pink:hover {
	background-color:hsl(300, 100%, 70%);
	color:black;
}




.button-clear {
	background-color:none;		
}

.temp-option {
	font-size:1.25rem;
	color:black;
}

.img-rounded {
	border-radius:0.5rem;
}
.lift {

	border-bottom:1px solid #000;
	margin-bottom:1rem;
	border-top:1px solid #000;
	margin-top:1rem;	
}

.reference-only {
	color:blue; 
	font-size: .8rem; 
	font-style:italic;	
}