@charset "utf-8";
/*	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *	Styles:	main.css						v3.0.1
 *	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 	Designed for:	CMX AI 					v2.0.1
 *	&				CMX Default website		v3.0.0
 *	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *	Author:		DNC Thomas
 *	Last edit:	03/10/2023 13:06
 *	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*	Variables
 * 	Generally you chould only change values here to affect the whole site	*/

html {
	--siteWidth: 1200;
	--rowGap: 	 2vh;
	--columnGap: 1vw;
	--fixedColumn: 1em;
	--shadow:	 3px 3px 6px rgba(128, 128, 128, 0.5);
}

/*	Only change below if you are compentant using css	*/

body, p, label, td, li {
	font-family: Inter, serif;
	font-size: clamp( 0.875rem, 0.8175rem + 0.25vw, 1rem);
	font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1.05rem);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Red Rose', Inter, serif;
}

h1 { font-size: clamp(1.75rem, 1.5625rem + 0.75vw, 2.125rem);}

h2 { font-size: clamp( 1.375rem, 1.2188rem + 0.625vw, 1.6875rem ); }

h3 { font-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem); }

h4 { font-weight: 600; font-size: clamp(1.125rem, 1.0625rem + 0.25vw, 1.25rem);}

h5 { font-size: clamp( 0.9rem, 0.8rem + 0.3vw, 1.05rem ); font-weight: 700;}

h6 { font-size: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem); font-weight:600; font-style: italic; }

.siteWidth {
	max-width: calc( var(--siteWidth) * 1px);
	margin: auto;
	padding: 0 1vw;
}

#siteLogo {
	margin: 0.5vh 0 1vh 0;
	width: 25vw;
	max-width:335px;
	min-width: 170px;
}

#content {
	padding: 1vh 0;
	position: relative;
}

.VBar:before {
	/*	Used in the header as a separator between location data	*/
	content:"|";
	padding: 0.5em;
}

.ow-codeSpan {
	font-family:Consolas,"courier new";
	font-size: 115%;
	border-bottom: thin dashed var(--add5);
	color: var(--theme);
	font-weight: 700;
	margin: 0 1em;
}

.statusBar:before {
	content: "status: ";
	padding-left: 0.5em;
	color: var(--theme);
	margin: 0;
}

/*	Cards	*/
.ow-card {
	padding: 0.5vh 1vw 1vh 1vw;
	box-shadow: var(--shadow);
}

.ow-Gradient1 {
	background-image: var(--Gradient1);
	color: var(--Grad1Text)
}

.ow-Gradient2 {
	background-image: var(--Gradient2);
	color: var(--Grad2Text);
}

/*	Containers	*/
.ow-container {
	padding: 0.5vh 1vw;
	/*margin-bottom: 1vh;*/
}

.moonImage {
	height: 100%;
	max-height:120px;
	width: auto;
}

.ow-txt-small {
	font-size: 82%;
}

.ow-at { font-size: 100%}

.ow-at:before {
	content: "@";
	padding: 0 0.5em;
	font-size: 75%;
	vertical-align: top;
}

.ow-modal {
	margin:auto!important;
	width: 50vw;
	max-width: 750px;
	min-width: 400px;
	box-shadow: var(--shadow);
}

.ow-icon-small {
	height:1em;
	width: auto;
	margin: 0 0.5em;
}

.ow-icon-medium {
	height: 2em;
	width: auto;
	margin: 0 0.5em;
}

.TempUnit, 
.PressUnit, 
.WindUnit, 
.RainUnit {
	padding: 0.5em 0;
}

.ow-clickable {
	cursor: pointer;
}

/*	Psudo Tables	*/
/*.ow-tableRow {
	border-bottom: thin solid var(--add5);
}
*/
.ow-tableRow:hover,
.ow-tableRow2:hover {
	background: var(--add3);
	color: var(--sub3);
}
/*
.ow-tableRow * {
	margin:0;
	line-height: 2.5em;
}
*/
.ow-tableRow {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	column-gap: var(--columnGap);
	border-bottom: thin dotted var(--add5);
	margin: 2px 0;
}

.ow-tableRow * {
	line-height: 2.5em;
	margin:0;
}

/*	FLEX CONTAINERS	*/
.ow-titleBar {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	column-gap: var(--columnGap);
	gap: var(--columnGap) var(--rowGap);
	margin: 0;
}

.ow-fixedCol {
	/*	Not currently used but may be useful	*/
	column-gap: var(--fixedColumn);
}

.ow-titleBar > *,
.ow-btnBar > * { margin: 0; padding: 0;}

.ow-flex-top {
	align-items: flex-start;
}

.ow-flex-center {
	align-items: center;
}

.ow-flex-bottom {
	align-items: flex-end;
}

.ow-flex-baseline {
	align-items: baseline;
}

.ow-btnBar {
	display: flex;
	justify-content: space-between; 
	flex-flow: wrap;
	gap: var(--rowGap) var(--rowGap);
	margin: 0;
}

.ow-btnBar > button {
	/*	Buttons used in chart & record navigation	*/
	flex: 1 0 auto;
	cursor: pointer;
	border-radius: 1em;
	font-family: 'red Rose';
	background: var(--BtnGradient);
	border: thin solid var(--theme);
}

.ow-btn {
	border-radius: 1em;
	background: var(--BtnGradient) ;
	/*box-shadow: var(--shadow);*/
}

.ow-btnBar > button:hover {
	background: var(--BtnGradientHvr) ;
}

.ow-flexCenter {
	display:flex;
	gap: var(--rowGap) var(--columnGap);
	justify-content: center;
	align-items: center;
}

.ow-sixCol,
.ow-fiveCol,
.ow-fourCol,
.ow-threeCol,
.ow-twoCol {
	display: flex;
	justify-content: space-evenly;
	flex-flow: wrap;
	gap: var(--rowGap) var(--columnGap );
	margin-bottom: 3vh;
}

.ow-oneCol {
	display: flex;
	flex-flow: column;
	gap: var(--rowGap) var(--columnGap);
	margin-bottom: 3vh;
}

.ow-flex-bottom { align-items: flex-end; }

.ow-sixCol > div {
	/*	All child divs of six col flex	*/
	min-width: calc( var(--siteWidth) * 1px / 7);
	max-width: calc( ( var(--siteWidth) * 1px - (var(--columnGap) * 6)) / 6 );
	flex: 1;
}

.ow-fiveCol > div {
	min-width: calc( var(--siteWidth) * 1px / 6);
	max-width: calc( ( var(--siteWidth) * 1px - (var(--columnGap) * 5)) / 5 );
	flex: 1;
}

.ow-fourCol > div {
	min-width: calc( var(--siteWidth) * 1px / 5);
	max-width: calc( ( var(--siteWidth) * 1px - (var(--columnGap) * 4)) / 4 );
	flex: 1;
}

.ow-threeCol > div {
	min-width: calc( var(--siteWidth) * 1px / 4);
	max-width: calc( ( var(--siteWidth) * 1px - (var(--columnGap) * 3)) / 3 );
	flex: 1;
}

.ow-twoCol > div {
	min-width: calc( var(--siteWidth) * 1px / 3);
	max-width: calc( ( var(--siteWidth) * 1px - (var(--columnGap) * 2)) / 2 );
	flex: 1;
}

@media only screen and (max-width: 825px) {
	.ow-twoCol > div {min-width: 100%!important;}
}

@media only screen and (max-width: 500px) {
	.ow-fourCol > div {min-width:100%!important;}
	.ow-threeCol > div {min-width: 100%!important;}
}

@media only screen and (max-width: 355px) {
	.ow-sixCol > div {min-width: 100%!important;}
	.ow-fiveCol > div {min-width: 100%!important;}
}

@media only screen and (max-width: 618px) {
	.ow-threeCol > div { min-width: 100%!important;}
}

@media only screen and (max-width: 412px) {
	.ow-fiveCol > div { min-width: 100%!important;}
}
/*	MENUES	*/
.ow-menu {
	font-family: 'Red Rose', Inter, serif;
}

.ow-divider {
	border-bottom: thin solid var(--theme);
	height: 1px!important;
	margin: 0 -1vw;
	/*box-shadow: var(--shadow);*/
}

.ow-defaultInt, .ow-menuMobile {
	border-radius: 2em 0 0 2em;
	/*background-image: linear-gradient( to right, var(--theme), var(--add3));*/
	background: var(--LRgradient);
}
.ow-defaultInt.mobile {
	max-width: 16em;
	margin-left: calc( 100% - 16em);
}

.ow-subMenu:before {
	content: ">>";
	padding: 0 1em;
}

.w3-bar-item i {
	margin-left:1em;
	float:right;
}

.ow-caret {
	margin-left: 0.5em;
}


/*	ANIMATIONS	*/
/*	Used for menus	*/
.ow-animate-drop {
	transform-origin: top left;
	animation: scale-down 1s;
}

@keyframes scale-down {
	0%	 { opacity: 0.2; transform: scaleY(0);}
	80%  { opacity: 1; }
	100% { transform: scale(1);}
}

.ow-animate-fadeIn {
	animation: fadeIn 2s;
}

@keyframes fadeIn {
	0%	 { opacity: 0;}
	100% { opacity: 1;}
}

/*	Used for LEDs	*/
.ow-LED-on {
	animation: pulseRed 1.5s infinite;
}
.indicatorOn {
	animation: pulseRed 1.5s infinite;
}

.ow-LED-off {
	background-color: green;
}
.indicatorOff {
	background: green;
}

@keyframes pulseRed {
	0%	 { background-color: #000; }
	20%	 { background-color: #F44; }
	80%  { background-color: #F44; }
	100% { background-color: #000; }
}

/*	Used for the seagull	*/
#ow-gullLeft, #ow-gullRight {
	position: absolute;
	bottom: 0;
	left: 5vw;
	width: 9vw;
	min-width: 70px;
	max-width: 130px;
	height: auto;
	z-index:-200;
	transform-origin: bottom left;
	transform: skewX(-10deg);
}

#ow-gullRight {
	left: 88vw;
	transform-origin: bottom right;
	transform: skewX(10deg);
}

#ow-gullLeft {
	left: 5vw;
	transform-origin: bottom right;
	transform: skewX(-10deg);
}


@keyframes floatDownLeft {
	0%   { opacity: 0.2; bottom: 100%; transform: scale(0) }
	100% { opacity: 1;   bottom: 0;    transform: scale(1) skewX(-10deg) }
}

@keyframes floatDownRight {
	0%   { opacity: 0.2; bottom: 100%; transform: scale(0) }
	100% { opacity: 1;   bottom: 0;    transform: scale(1) skewX(10deg) }
}

@keyframes appearLeft {
	0%	 { opacity: 0.2; transform: scale(0) }
	100% { opacity: 1;   transform: scale(1) skewX(-10deg) }
}

@keyframes appearRight {
	0%	 { opacity: 0.2; transform: scale(0) }
	100% { opacity: 1;   transform: scale(1) skewX(10deg) }
}

@keyframes slideLeft {
	0%   { opacity: 0.2; left: 100%; transform: scale(0);}
	100% { opacity: 1;   left: 5vw; transform: scale(1) skewX(-10deg);}
}

@keyframes slideRight {
	0%	 { opacity: 0.2; left: 0%; transform: scale(0); }
	100% { opacity: 1;   left: 88vw; transform: scale(1) skew(10deg);}
}

/*	LEDs	*/
.ow-led {
	display:inline-block;
	background-color: green;
	box-shadow: inset 2px 2px 4px rgba(240, 240, 240, 0.7),inset -2px -2px 4px rgba(32, 32, 32, 0.7);
	/*border: thin solid var(--sub5);*/
	width: 1.4em;
	height: 1.4em;
	margin: 0 0.25vw -0.3em 0.25vw;
}

.ow-led.ow-brick {
	width: 1.6em;
	height: 0.8em;
	margin-bottom:0;
}

.ow-led.ow-oval {
	width: 1.6em;
	height: 0.8em;
	border-radius: 0.4em;
	margin-bottom:0;
}

.ow-led.ow-lozenge {
	width: 1.6em;
	height: 0.8em;
	border-radius: 50%;
	margin-bottom:0;
}

.ow-led.ow-round {
	border-radius: 50%;

}

.ow-led.ow-small {
	width: 1em;
	height:1em;
	margin-bottom: -0.15em;
}

/*	w3Pro Over-rides	*/
.w3-btn { 
	padding: 5px 14px; 
}
.w3-btn:hover { 
	box-shadow: 0 4px 8px 0 rgba(128, 128, 128, 0.2), 0 4px 8px 0 rgba(0,0,0,0.19); 
}
.w3-bar-item { 
	padding: 5px 14px!important;
}
.w3-dropdown-content { 
	border-radius: 0 0 1vh 1vh; 
	border-top: 5px solid var(--sub5);
	/*min-width: 98vw!important;*/
}

@media only screen and (max-width: 992px) {
	.w3-dropdown-content {
		min-width: 98vw!important;
	}
}
.w3-dropdown-content > a { 
	margin: 0.3vh 0.3vw 0.3vh 0; 
}

/*	Buttons	*/
.w3-btn:hover i {
/*	Modifies hover for fontawsome icons	*/
	color: var(--add3);
}

.w3-table td:first-child{padding-left:8px;}

.w3-striped tbody tr:nth-child(even){background: var(--add4); color: var(--sub4);}

.w3-hoverable tbody tr:hover { background: var(--add3); color: var(--sub5);}

/*	Record Editor Overlay	*/
.loading-overlay {
	display: none;
	background: rgba(26, 26, 26, 0.7);
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 5;
	top: 0;
}

.loading-overlay-image-container {
	/*display: none;*/
	position: fixed;
	z-index: 7;
	top: 50%;
	width: 350px;
	left: calc( (100vw - 350px) / 2);
	/*transform: translate(-50%, -50%);*/
}

.loading-overlay-img {
	width: 70px;
	height: auto;
	border-radius: 5px;
	background: var(--theme);
}