@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 {
    background:#1f1f1f; /* 12% Black*/
   font-family: Verdana, Helvetica, sans-serif;
}

h1 {
   font-family: Verdana, Helvetica, sans-serif;
}

h3,h4 , h5 {
   font-family: Verdana, Helvetica, sans-serif;
    font-weight:lighter;
}

h2{
    font-size:22px;
}

h3 {
    font-size:22px;
    /*color:#b2c831*/
    color:#3399ff; /* 60% Blue */
}

h5 {
    color:#3399ff; /* 60% Blue */
    margin-left:5px;
}

.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:100px;
	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: center;
	column-gap: var(--columnGap);
	gap: var(--columnGap) var(--rowGap);
	margin: auto;
}

.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);
}
.w3-display-position{position:absolute}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}
.w3-padding{padding:8px 16px}
.w3-display-hover{display:none}
.w3-padding-small{padding:4px 8px}
.w3-padding{padding:8px 16px}
.w3-padding-large{padding:12px 24px}
.w3-padding-16{padding-top:16px;padding-bottom:16px}
.w3-padding-24{padding-top:24px;padding-bottom:24px}
.w3-padding-32{padding-top:32px;padding-bottom:32px}
.w3-padding-48{padding-top:48px;padding-bottom:48px}
.w3-padding-64{padding-top:64px;padding-bottom:64px}
.w3-padding-top-64{padding-top:64px}
.w3-padding-top-48{padding-top:48px}
.w3-padding-top-32{padding-top:32px}
.w3-padding-top-24{padding-top:24px}
.w3-display-container:hover .w3-display-hover{display:block}
.w3-display-container:hover span.w3-display-hover{display:inline-block}
.w3-display-hover{display:none}
.w3-display-position{position:relative}
.w3-circle{border-radius:50%}
.w3-round-small{border-radius:2px}
.w3-round,.w3-round-medium{border-radius:4px}
.w3-round-large{border-radius:8px}
.w3-round-xlarge{border-radius:16px}
.w3-round-xxlarge{border-radius:32px}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-container,.w3-panel{padding:0.01em 16px}
.w3-animate-fading{animation:fading 10s infinite}
@keyframes fading{
	0%{opacity:0}
	50%{opacity:1}
	100%{opacity:0}
}
.w3-animate-opacity{animation:opac 0.8s}
@keyframes opac{
	from{opacity:0}
	to{opacity:1}
}
.w3-animate-top{position:relative;animation:animatetop 0.4s}
@keyframes animatetop{
	from{top:-300px;opacity:0}
	to{top:0;opacity:1}
}
.w3-animate-left{position:relative;animation:animateleft 0.4s}
@keyframes animateleft{
	from{left:-300px;opacity:0}
	to{left:0;opacity:1}
}
.w3-animate-right{position:relative;animation:animateright 0.4s}
@keyframes animateright{
	from{right:-300px;opacity:0}
	to{right:0;opacity:1}
}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}
@keyframes animatebottom{
	from{bottom:-300px;opacity:0}
	to{bottom:0;opacity:1}
}
.w3-animate-zoom {animation:animatezoom 0.6s}
@keyframes animatezoom{
	from{transform:scale(0)}
	to{transform:scale(1)}
}
.w3-animate-input{transition:width 0.4s ease-in-out}
.w3-animate-input:focus{width:100%!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}
.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-opacity-max{opacity:0.25}
.w3-opacity-min{opacity:0.75}
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}
.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
.w3-sepia{filter:sepia(75%)}
.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}
.w3-sepia-min{filter:sepia(50%)}
.w3-tiny{font-size:10px}
.w3-small{font-size:12px}
.w3-medium{font-size:15px}
.w3-large{font-size:18px}
.w3-xlarge{font-size:24px}
.w3-xxlarge{font-size:36px}
.w3-xxxlarge{font-size:48px}
.w3-jumbo{font-size:64px}
.w3-left-align{text-align:left}
.w3-right-align{text-align:right!important;}
.w3-justify{text-align:justify}
.w3-center{text-align:center!important;}
.w3-border-0{border:0}
.w3-border{border:1px solid #ccc;}
.w3-border-top{border-top:1px solid #ccc;}
.w3-border-bottom{border-bottom:1px solid #ccc;}
.w3-border-left{border-left:1px solid #ccc;}
.w3-border-right{border-right:1px solid #ccc;}
.w3-topbar{border-top:6px solid #ccc;}
.w3-bottombar{border-bottom:6px solid #ccc;}
.w3-leftbar{border-left:6px solid #ccc;}
.w3-rightbar{border-right:6px solid #ccc;}
.w3-section,.w3-code{margin-top:16px;margin-bottom:16px}
.w3-margin{margin:16px}
.w3-margin-top{margin-top:16px}
.w3-margin-bottom{margin-bottom:16px}
.w3-margin-left{margin-left:16px}
.w3-margin-right{margin-right:16px}
.w3-padding-small{padding:4px 8px}
.w3-padding{padding:8px 16px}
.w3-padding-large{padding:12px 24px}
.w3-padding-16{padding-top:16px;padding-bottom:16px}
.w3-padding-24{padding-top:24px;padding-bottom:24px}
.w3-padding-32{padding-top:32px;padding-bottom:32px}
.w3-padding-48{padding-top:48px;padding-bottom:48px}
.w3-padding-64{padding-top:64px;padding-bottom:64px}
.w3-padding-top-64{padding-top:64px}
.w3-padding-top-48{padding-top:48px}
.w3-padding-top-32{padding-top:32px}
.w3-padding-top-24{padding-top:24px}
.w3-left{float:left!important;}
.w3-right{float:right!important;}
.w3-button:hover{color:#000;background-color:#ccc}
.w3-transparent,.w3-hover-none:hover{background-color:transparent}
.w3-hover-none:hover{box-shadow:none}