/**
 * @dev: I expected a boat app to be offline on sea, so I included Roboto font as a files, not as @import url
 */
 @font-face {
  font-family: 'Roboto';
  src:  url('../fonts/Roboto-Regular.ttf') format('ttf');
  font-weight: 400;
}
@font-face {
  font-family: 'Roboto';
  src:  url('../fonts/Roboto-Bold.ttf') format('ttf');
  font-weight: 700;
}
body, 
html {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	background: #121212;
}
a { 
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease; 
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    outline: none !important; 
}

/**
 * Header part
 */
#header {
    background: #303030;
    box-shadow: 0px 4px 4px #272727;
    height: 80px;
    text-align: center;
    vertical-align: middle;
    display: table;
    width: 100%;
}
#header > * {
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 42px;
    color: #428AFF;
    vertical-align: middle;
    display: table-cell;
}
#header .status .dot {
	background: #27AE60;
	/* box-shadow: 0px 4px 4px #27AE60; */
	width: 45px;
	height: 45px;
	display: inline-block;
	border-radius: 200px; 
	margin-left: 20px;
	vertical-align: middle;
}
#header .status.inactive .dot {
	background: red;
	/* box-shadow: 0px 4px 4px red; */
}

.battery {
	position: absolute;
    right: 25px;
}
.battery span {
	background: url(../images/battery_half.svg);
    width: 80px;
    height: 80px;
    display: inline-block;
    background-position: center;
}
.battery span.empty {
	background: url(../images/battery_empty.svg);
	background-position: center;
}
.battery span.full {
	background: url(../images/battery_full.svg);
	background-position: center;
}

/**
 * Sidebar Left part
 */
 
/* .box is a drop shadow effect applied everywhere */
.box {
	box-sizing: border-box;
	position: relative;
}
.box * {
    position: relative;
    z-index: 5;
}
/* Workaround for filter: drop shadow affecting children when applied to parent .box */
.box:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px solid #6B6A6A;
	box-sizing: border-box;
	filter: drop-shadow(0px 2px 4px #6B6A6A);
	border-radius: 5px;
	top: 0;
    left: 0;
}
#left_sidebar {
    width: 20%;
    position: absolute;
}
#left_sidebar .box {
    height: 15vh;
    margin-bottom: 20px;
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#left_sidebar .box .title {
	font-style: normal;
	font-weight: normal;
	font-size: 36px;
	line-height: 42px;
	text-align: center;
	color: #FFFFFF;
	width: 100%;
    display: block;
	margin-bottom: 20px;
}
#left_sidebar .box .value {
	font-style: normal;
	font-weight: 500;
	font-size: 36px;
	line-height: 42px;
	text-align: center;
	color: #428AFF;
	width: 100%;
    display: block;
}

/**
 * Sidebar right part
 */
 
#right_sidebar {
    position: absolute;
    right: 35px;
    top: 35px;
}
#right_sidebar a {
	display: block;
	width: 114px;
	height: 114px;
	background: #545454;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
	margin-bottom: 25px;
	text-decoration: none;
	position: relative;
	filter: drop-shadow(0px 4px 4px #545454);
}
#right_sidebar .system_settings {
	background: url(../images/system_settings.svg) no-repeat center #545454;
}
#right_sidebar .user_settings {
	background: url(../images/user.svg) no-repeat center #545454;
}
#right_sidebar .warnings {
	background: url(../images/warnings.svg) no-repeat center #545454;
}
#right_sidebar .system_overview {
	background: url(../images/system_overview.svg) no-repeat center #545454;
}

.warnings_number {
	font-style: normal;
	font-weight: bold;
	font-size: 36px;
	line-height: 42px;
	background: #EB5757;
	color: #F2F2F2;
	text-decoration: none;
	width: 50px;
	height: 50px;
	display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
	border-radius: 50px;
	position: absolute;
    right: -10px;
    top: -10px;
}

/**
 * Poweroff part
 */
#poweroff {
    position: fixed;
    bottom: 0;
    right: 35px;
	z-index: 20;
}
#poweroff .poweroff_switch {
    display: block;
    width: 80px;
    height: 80px;
    background: #545454;
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 10px;
    margin-bottom: 30px;
    text-decoration: none;
    position: relative;
    filter: drop-shadow(0px 4px 4px #545454);
	background: url(../images/poweroff.svg) no-repeat center #545454;
}
#poweroff .poweroff_switch:hover {
	background: url(../images/poweroff.svg) no-repeat center red;
}

/**
 * Main part
 */
#main {
	padding: 35px;
	position: relative;
}

#content {
	text-align: center;
}
#boat {
	display: block;
    width: 819px;
    height: 676px;
    position: absolute;
    left: calc(50% - 410px);
	z-index: 10;
}
#boat_body {
	display: block;
    width: 100%;
    height: 100%;
	background: url(../images/boat_body.png) no-repeat center transparent;
	background-size: contain;
    position: absolute;
	z-index: 10;
}
#boat #rotor {
    display: block;
    width: 81px;
    height: 81px;
    background: url(../images/boat_rotor.png) no-repeat center transparent;
    background-size: contain;
    margin: 0 auto;
    margin-top: 360px;
    position: absolute;
    left: calc(50% - 40.5px);
	
	-webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}


@-moz-keyframes spin { 
    100% { -moz-transform: rotate(-360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(-360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(-360deg); 
        transform:rotate(-360deg); 
    } 
}

#circle_beam_wrapper {
	position: absolute;
	top: 70%;
	left: calc(50% - 30px);
	/* transform: translate(-50%, -50%); */
	width: 60px;
	height: 130px;
	transform-origin: top center;
}

#circle {
	position: relative;
	top: 83%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	background: #ccc;
	border: 3px solid #fff;
	border-radius: 50%;
	overflow: hidden;
}
.wave{
	position: relative;
	width: 100%;
	height: 100%;
	background: #4973ff;
	border-radius: 50%;
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}
.wave .before,
.wave .after
{
	content: '';
	position: absolute;
	width: 200%;
	height: 200%;
	top: 0;
	left: 50%;
	transform: translate(-50%, -75%);
}
.wave .before {
	border-radius: 45%;
	background: rgba(255, 255, 255, 1);
	animation: animate 5s linear infinite;
}
.wave .after {
	border-radius: 40%;
	background: rgba(255, 255, 255, .5);
	animation: animate 10s linear infinite;
}
@keyframes animate{
	0%{
		transform: translate(-50%, -75%) rotate(0deg);
	}
	100%{
		transform: translate(-50%, -75%) rotate(360deg);
	}
}
#beam {
	width: 20px;
    height: 100px;
    border: 5px solid white;
    position: absolute;
    left: calc(50% - 15px);
    top: 0px;
	transform-origin: top center;
}
#waterline_mask {
    width: 590px;
    height: 17px;
    overflow: hidden;
    position: absolute;
    left: calc(50% - 295px);
    margin-top: 340px;
	z-index: 15;
}
#waterline {
	width: 930px;
	height: 17px;
	display: block;
    background: url(../images/water_line.svg) repeat-x center transparent;
    background-size: contain;
	
	animation: animatedBackground 10s linear infinite;
    -moz-animation: animatedBackground 10s linear infinite;
    -webkit-animation: animatedBackground 10s linear infinite;
    -ms-animation: animatedBackground 10s linear infinite;
    -o-animation: animatedBackground 10s linear infinite;
}
@keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -930px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -930px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -930px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -930px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: 0 0; }
    100% { background-position: -930px 0; }
}


#top_measurement_scale {
	display: block;
    width: 779px;
    height: 169px;
    background: url(../images/top_measurement_scale.png) no-repeat center transparent;
    background-size: contain;
    margin: 0 auto;
    margin-top: 110px;
    position: absolute;
    left: calc(50% - 387px);
}
#bottom_measurement_scale {
    display: block;
    width: 408px;
    height: 126px;
    background: url(../images/bottom_measurement_scale.png) no-repeat center transparent;
    background-size: contain;
    margin: 0 auto;
    margin-top: 520px;
    position: absolute;
    left: calc(50% - 200px);
}

#title,
#bottom_line {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 42px;
    text-align: center;
    color: #FFFFFF;
    width: calc(100% - 70px);
    display: block;
    position: absolute;
}
#bottom_line {
	margin-top: 655px;
}
#title {
	margin-top: 10px;
}

/**
 * Developer access part
 */
#developer_access {
	display: none;
	
	position: fixed;
    bottom: 0;
    width: 100%;
	padding: 20px;
	
}
#developer_access.visible {
	display: flex;
    flex-wrap: wrap;
}
#developer_access .property {
	margin-right: 20px;
}
#developer_access .title {
	color: white;
	margin-bottom: 10px;
}
#developer_access .slider {
	vertical-align: middle;
}
#developer_access .property_status {
	color: white;
    display: inline-block;
    vertical-align: middle;
}

/* Chart */
#chart_wrapper {
	position: absolute;
	left: calc(50% - 300px);
	width: 600px !important;
	height: 600px !important;
	margin-top: 60px;
}
#chart {
	background: rgb(29,60,110);
	background: linear-gradient(90deg, rgba(29,60,110,1) 0%, rgba(190,86,42,0.2) 25%, rgba(18,18,18,0) 50%, rgba(190,86,42,0.2) 75%, rgba(29,60,110,1) 100%);
}
#chart_y *,
#chart_x *,
#chart_x_bottom * {
	color: white;
}
#chart_y {
	position: absolute;
    top: 0;
    right: -80px;
    height: 105%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: -2.5%;
}
#chart_y * {
	font-style: normal;
	font-weight: bold;
	font-size: 36px;
	line-height: 42px;
	color: #F2F2F2;
}
#chart_x {
    display: flex;
    justify-content: space-between;
    width: 88%;
    margin: 0 auto;
	margin-top: 5px;
}
#chart_x * {
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 42px;
    color: #F2F2F2;
    width: 10%;
}
#chart_x_bottom {
	display: flex;
    justify-content: space-between;
    width: 120%;
    margin: 0 auto;
    margin-top: 15px;
    margin-left: -10%;
}
#chart_x_bottom > * {
    font-style: normal;
    font-weight: bold;
    font-size: 36px;
    line-height: 42px;
    color: #F2F2F2;
    width: 10%;
}
.title_air_keel {
	position: relative;
	display: inline-block;
}
.title_air_keel:after {
	content: "";
	width: 100%;
	height: 4px;
	background: #428AFF;
	position: absolute;
	display: block;
	bottom: 0px;
}
.title_heel {
	position: relative;
	display: inline-block;
}
.title_heel:after {
	content: "";
	width: 100%;
	height: 4px;
	background: #27AE60;
	position: absolute;
	display: block;
	bottom: 0px;
}
#main.system_overview {
    padding: 2vw;
}
#system_overview_wrapper {
    background: url(../images/system_overview_background.svg) no-repeat center top transparent;
    background-size: contain;
    width: 100%;
    height: calc(200vh - 250px);
    margin: 0 auto;
    position: absolute;
    margin-top: 100px;
	max-width: 1850px;
	max-height: 1080px;
}
#system_overview_wrapper > * {
	position: absolute;
	display: flex;
    justify-content: center;
    align-items: center;
}
#system_overview_wrapper > * > * {
	font-style: normal;
    font-weight: bold;
    font-size: 1.65vw;
    text-align: center;
    color: #FFFFFF;
    display: block;
}
#system_overview_wrapper .status {
	background: #27AE60;
    /* box-shadow: 0px 4px 4px #27ae60; */
    width: 3vw;
    height: 3vw;
    display: inline-block;
    border-radius: 200px;
    vertical-align: middle;
    position: absolute;
    top: -1.4vw;
    right: -1.4vw;
}
#system_overview_wrapper .status.inactive {
	background: red;
    /* box-shadow: 0px 4px 4px red; */
}
.system_overview #content {
	transform: scale(1);
}


#bilge_pump_wrapper {
	left: 25vw;
    top: 0vw;
    width: 11.5vw;
    height: 6.5vw;
}
#limit_switches_wrapper {
    left: 7.45vw;
    top: 5.2vw;
    width: 13vw;
    height: 6.5vw;
}
#control_wrapper {
    left: 49vw;
    top: 1vw;
    width: 13.5vw;
    height: 9vw;
}
#control_wrapper #control_text {
    font-size: 2.4vw;
}
#battery_wrapper {
    left: 70.8vw;
    top: 3vw;
    width: 9.5vw;
    height: 5vw;
}
#batteries_wrapper {
    left: 81vw;
    top: 9.5vw;
    width: 14.5vw;
    height: 14.8vw;
}
#batteries_wrapper #batteries_text {
    font-size: 2.4vw;
}
#encoder_wrapper {
	left: 48vw;
    top: 19.5vw;
    width: 12.5vw;
    height: 6.8vw;
}
#encoder_wrapper #encoder_text {
	font-size: 2vw;
}
#motor_wrapper {
    left: 30.6vw;
    top: 15.5vw;
    width: 14.8vw;
    height: 14.8vw;
}
#motor_wrapper #motor_text {
    font-size: 2.4vw;
}
#gear_wrapper {
    left: 16.4vw;
    top: 17.5vw;
    width: 11.5vw;
    height: 11.8vw;
}
#air_keel_wrapper {
	left: 3.4vw;
    top: 38.5vw;
    width: 16.5vw;
    height: 6.8vw;
}
#air_keel_wrapper #air_keel_text {
	font-size: 2.4vw;
}


@media (max-width: 1350px) {
	
	#title,
	#title.graph {
		width: calc(100%);
	}

	#content {
		transform: scale(0.75);
	}
	#right_sidebar a {
		width: 7vw;
		height: 7vw;
		background-size: 70% !important;
		margin-bottom: 15px;
	}
	#poweroff .poweroff_switch {
		width: 5vw;
		height: 5vw;
		background-size: 70% !important;
	}
	#left_sidebar .box .title {
		font-size: 2vw;
		line-height: 2vw;
		margin-bottom: 1vw;
	}
	#left_sidebar .box .value {
		font-size: 2vw;
		line-height: 2vw;
	}
	.warnings_number {
		width: 3vw;
		height: 3vw;
		font-size: 2vw;
	}
	#header > * {
		font-size: 2vw;
		line-height: 2vw;
	}
	#header .status .dot {
		width: 2.5vw;
		height: 2.5vw;
	}
	.battery span {
		width: 5vw;
		height: 5vw;
		background-size: contain;
		margin-top: 1vw;
	}
	#main {
		padding: 25px;
	}
	#main.system_overview {
		padding: 2vw;
	}
}
@media (max-height: 870px) {
	#content {
		transform: scale(0.75);
	}
	#right_sidebar a {
		width: 7vw;
		height: 7vw;
		background-size: 70% !important;
		margin-bottom: 15px;
	}
	#poweroff .poweroff_switch {
		width: 5vw;
		height: 5vw;
		background-size: 70% !important;
	}
	#left_sidebar .box .title {
		font-size: 2vw;
		line-height: 2vw;
		margin-bottom: 1vw;
	}
	#left_sidebar .box .value {
		font-size: 2vw;
		line-height: 2vw;
	}
	.warnings_number {
		width: 3vw;
		height: 3vw;
		font-size: 2vw;
	}
	#header > * {
		font-size: 2vw;
		line-height: 2vw;
	}
	#header .status .dot {
		width: 2.5vw;
		height: 2.5vw;
	}
	.battery span {
		width: 5vw;
		height: 5vw;
		background-size: contain;
		margin-top: 1vw;
	}
	#main {
		padding: 25px;
	}
	#main.system_overview {
		padding: 2vw;
	}
}

/* This is just for super large devices but I do not think you will need it. But who knows */ 
@media (min-width: 1920px) {
	#bilge_pump_wrapper {
		left: calc(50% - 442px);
		top: 0px;
		width: 221px;
		height: 125px;
	}
	#limit_switches_wrapper {
		left: calc(50% - 782px);
		top: 98px;
		width: 250px;
		height: 125px;
	}
	#control_wrapper {
		left: calc(50% + 8px);
		top: 15px;
		width: 260px;
		height: 173px;
	}
	#control_wrapper #control_text {
		font-size: 2.4vw;
	}
	#battery_wrapper {
		left: calc(50% + 425px);
		top: 60px;
		width: 185px;
		height: 97px;
	}
	#batteries_wrapper {
		left: calc(50% + 625px);
		top: 183px;
		width: 280px;
		height: 280px;
	}
	#batteries_wrapper #batteries_text {
		font-size: 2.4vw;
	}
	#encoder_wrapper {
		left: calc(50% - 5px);
		top: 377px;
		width: 240px;
		height: 130px;
	}
	#encoder_wrapper #encoder_text {
		font-size: 2vw;
	}
	#motor_wrapper {
		left: calc(50% - 337px);
		top: 299px;
		width: 285px;
		height: 285px;
	}
	#motor_wrapper #motor_text {
		font-size: 2.4vw;
	}
	#gear_wrapper {
		left: calc(50% - 610px);
		top: 337px;
		width: 221px;
		height: 227px;
	}
	#air_keel_wrapper {
		left: calc(50% - 854px);
		top: 733px;
		width: 317px;
		height: 130px;
	}
	#air_keel_wrapper #air_keel_text {
		font-size: 2.4vw;
	}
	#system_overview_wrapper {
		left: calc(50% - 920px);
	}
}