/*Main*/
html {width:100%; height:100%;}

body {width:100%; min-width:320px; height:100%; min-height:300px; margin:0px; padding:0px; border:0px; font-family:sans-serif; /*background-color:#EEEEEE;*/ background:linear-gradient(145deg, #2980b9, #222222); background-size:100% 100%; overflow:hidden;}

div, input, textarea {box-sizing:border-box;}

img {display:block;}

a {text-decoration:none;}

#preload {display:none;}

#no-js {width:100%; height:50px; margin-bottom:10px; background-color:#E67E22; font-family:helvetica; font-size:20px; font-weight:100; text-align:center; line-height:50px; color:#FFFFFF;}

#wrapper {width:100%; height:100%; overflow:hidden;}

#blackout {width:100%; height:100%; background:-webkit-radial-gradient(50% 50%, ellipse closest-corner, rgba(0,0,0,0.3) 25%, rgba(0,0,0,0.8) 100%); position:fixed; top:0px; left:0px; right:0px; bottom:0px; z-index:75; display:none;}

#overlay {width:100%; max-width:750px; min-width:320px; height:auto; max-height:calc(100% - 100px); min-height:10px; padding-right:10px; background-color:#222222; border-radius:5px; border-top:10px solid #222222; border-left:10px solid #222222; border-bottom:10px solid #222222; box-shadow:0px 0px 10px 0px #000000; overflow:auto; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:100; display:none;}

#overlay::-webkit-scrollbar-track {border-radius:10px; background-color:#353535;}

#overlay::-webkit-scrollbar {width:10px;}

#overlay::-webkit-scrollbar-thumb {border-radius:10px; background-color:#005790;}

#overlay-title {width:auto; height:auto; margin-bottom:5px; font-family:helvetica; font-size:25px; font-weight:100; text-align:center; line-height:50px; color:#FFFFFF; border-bottom:1px solid #555555;}

#overlay-content {width:100%; height:auto; overflow:auto;}

.overlay-content-header {width:100%; height:auto; padding-left:10px; padding-right:10px; background-color:#2980B9; font-family:helvetica; font-size:18px; font-weight:100; text-align:left; line-height:40px; color:#FFFFFF;}

.overlay-content-settings {width:100%; height:auto; margin-bottom:10px; padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:0px; overflow:auto; background-color:#666666;}

.overlay-content-settings-text {width:100%; height:auto; margin-bottom:10px; font-family:helvetica; font-size:15px; font-weight:normal; text-align:left; color:#c7c7c7;}

#overlay-buttons {width:100%; height:auto; margin-top:-10px; padding-top:10px; background-color:#222222; overflow:auto; position:sticky; bottom:0px;}

.overlay-button {width:calc(50% - 5px); height:50px; overflow:hidden; font-family:helvetica; font-size:18px; font-weight:100; text-align:center; line-height:50px; color:#FFFFFF; border:0px; cursor:pointer;}

.overlay-button-cancel {background-color:#C0392B; float:left;}
.overlay-button-cancel:hover {background-color:#E74C3C;}

.overlay-button-update {background-color:#2980B9; float:right;}
.overlay-button-update:hover {background-color:#3498DB;}

#data-overlay {width:auto; height:auto; margin:0; padding:10px; background-color:rgba(0, 0, 0, 0.75); border-radius:10px; position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:99; color:#FFFFFF; font-size:20px; display:none;}

fieldset {border:0px; display:flex; flex-direction:row; justify-content:center; flex-wrap:wrap;}

.overlay-content-checkbox {width:auto; height:auto; margin:5px; padding:10px; line-height:25px; display:flex; flex-direction:column; justify-content:center; flex-wrap:wrap; float:left; color:#FFFFFF; background-color:rgba(255, 255, 255, 0.1); border-radius:5px;}

.overlay-content-checkbox-input {width:25px; height:25px; margin-left:auto; margin-right:auto; border:0px; border-radius:5px;}

.overlay-content-date {width:40%; height:auto; margin:5px; padding:10px; line-height:25px; display:flex; flex-direction:column; justify-content:center; color:#FFFFFF; background-color:rgba(255, 255, 255, 0.1); border-radius:5px; float:left;}

.overlay-content-date-input {width:100%; max-width:150px; height:50px; margin-left:auto; margin-right:auto; padding:5px; border:0px; border-radius:5px;}

.loader {width:70px; height:auto; margin-left:auto; margin-right:auto;}
.loader div {display:inline-block; width:10px; height:10px; border-radius:100%; background-color:#FFFFFF;}
.loader div:nth-child(2) {margin-right:5px; animation:loader 1s ease-in-out infinite;}
.loader div:nth-child(3) {animation:loader 1s ease-in-out 0.2s infinite;}
.loader div:nth-child(4) {margin-left:5px; margin-right:5px; animation:loader 1s ease-in-out 0.4s infinite;}
.loader div:nth-child(5) {animation:loader 1s ease-in-out 0.6s infinite;}
.loader div:nth-child(6) {margin-left:5px; animation:loader 1s ease-in-out 0.8s infinite;}
@keyframes loader {
	0%, 75%, 100% {-webkit-transform:translateY(0); -ms-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0);}
	25% {-webkit-transform:translateY(-10px); -ms-transform:translateY(-10px); -o-transform:translateY(-10px); transform:translateY(-10px);}
}

#update-good {width:100px; height:100px; background-color:#2ECC71; background-image:url('/themes/default/assets/images/update-good.png'); background-position:center; background-repeat:no-repeat; border-radius: 50%; box-shadow:0px 0px 100px 0px #000000; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(1); animation:update-good 0.5s ease; z-index:100; display:none;}
@keyframes update-good {
    0% {transform:translate(-50%,-50%) scale(0);}
    100% {transform:translate(-50%,-50%) scale(1);}
}

#device {width:320px; height:100%; box-shadow:0px 0px 10px 0px #000000; background-color:rgba(44, 62, 80, 0.75); position:fixed; top:0px; left:-320px; z-index:100; transition:0.5s;}

#device-top {width:100%; height:50px; background-color:rgba(41, 128, 185,1);}

.device-top-toggle {width:auto; max-width:320px; height:50px; padding-left:10px; padding-right:10px; background-color:rgba(41, 128, 185,1); font-family:helvetica; font-size:18px; font-weight:100; color:#FFFFFF; text-align:left; line-height:50px; border-bottom-right-radius:5px; /*box-shadow:0px 0px 10px 0px #000000; */overflow:hidden; cursor:pointer; float:left; position:fixed; top:0px; left:0px; z-index:999;}

#device-top-open {}

#device-top-close {display:none;}

#options {width:100%; height:auto;}

.option-title {width:100%; height:auto; margin-bottom:10px; line-height:30px; color:#FFFFFF; border-bottom:1px solid #FFFFFF; font-size:16px; text-align:center;}

.option-group {width:100%; height:auto; max-height:calc(33.333% - 10px); padding:10px; overflow:auto;}

.option-group::-webkit-scrollbar-track {border-radius:10px; background-color:#353535;}

.option-group::-webkit-scrollbar {width:10px;}

.option-group::-webkit-scrollbar-thumb {border-radius:10px; background-color:#005790;}

.option-split {width:100%; height:10px; margin-top:10px; margin-bottom:10px; background-color:rgba(0,0,0,0.5);}

.option-list {width:100%; height:auto;}

.device-list-device {width:100%; height:auto; margin-bottom:10px; background-color:rgba(0,0,0,0.25); overflow:auto; cursor:pointer; border-radius:5px;}
.device-list-device:hover {background-color:rgba(0,0,0,0.25);}

.device-list-device-viewing {background-color:rgba(39, 174, 96,0.75) !important;}

.device-list-device-name {width:100%; height:auto; padding:10px; font-family:helvetica; font-size:16px; font-weight:100; text-align:center; color:#FFFFFF;}

.device-list-device-status {width:100%; height:auto; padding:5px; background-color:rgba(0,0,0,0.5); overflow:auto; display:flex; flex-direction:row; flex-wrap:wrap; align-content:center; justify-content:flex-start; gap:5px;}

.device-list-device-status-enabled {width:auto; height:20px; float:left; border-radius:5px; padding-left:10px; padding-right:10px; line-height:20px;}

.device-list-device-status-alert {width:auto; height:20px; float:left; border-radius:5px; padding-left:10px; padding-right:10px; line-height:20px; background-color:#E74C3C;}

.device-list-device-status-power {width:auto; height:15px; float:right; overflow:auto;}

.device-list-device-status-power-icon {width:10px; height:15px; float:left;}

.device-list-device-status-power-text {width:auto; height:15px; font-family:helvetica; font-size:12px; font-weight:100; text-align:center; color:#FFFFFF; float:right;}

#menu {width:320px; height:100%; box-shadow:0px 0px 10px 0px #000000; position:fixed; top:0px; right:-320px; z-index:100; transition:0.5s;}

#menu-top {width:100%; height:50px; background-color:rgba(41, 128, 185,1);}

#menu-top-name {width:calc(100% - 50px); height:50px; padding-left:10px; padding-right:10px; float:left; font-family:helvetica; font-size:18px; font-weight:100; color:#FFFFFF; text-align:left; line-height:50px; overflow:hidden;}

.menu-top-toggle {width:50px; height:50px; background-color:rgba(41, 128, 185,1); background-image:url('/themes/default/assets/images/menu-toggle.png'); background-repeat:no-repeat; background-position:center; border-bottom-left-radius:5px; cursor:pointer; float:left; position:fixed; top:0px; right:0px; z-index:999;}

#menu-top-open {/*box-shadow:0px 0px 10px 0px #000000;*/}

#menu-top-close {display:none;}

#menu-main {width:100%; height:calc(100% - 50px); padding:10px; background-color:rgba(44, 62, 80,0.75);}

.menu-main-button {width:100%; height:50px; margin-bottom:10px; background-color:rgba(0,0,0,0.25); border-radius:5px; font-family:helvetica; font-size:16px; font-weight:100; text-align:center; line-height:50px; color:#FFFFFF; display:block; cursor:pointer;}
.menu-main-button:hover {background-color:rgba(0,0,0,0.25);}
.menu-main-button:last-of-type {padding-bottom:0px;}

.switch {width:100%; height:50px; margin-bottom:10px; background-color:rgba(0,0,0,0.25); border-radius:5px; cursor:pointer;}
.switch:hover {background-color:rgba(0,0,0,0.5);}
.switch:last-of-type {padding-bottom:0px;}

.switch-text {width:calc(100% - 100px); height:50px; font-family:helvetica; font-size:16px; font-weight:100; text-align:center; line-height:50px; color:#FFFFFF; float:left;}

.switch-button {width:75px; height:30px; margin-top:10px; margin-right:10px; margin-bottom:10px; padding:4px; background-color:#444444; border-radius:15px; float:right;}

.switch-button-open {width:22px; height:22px; background-color:#E74C3C; border-radius:50%; float:left;}

.switch-button-close {width:22px; height:22px; background-color:#2ECC71; border-radius:50%; float:right; display:none;}

.menu-main-splitter {width:100%; height:auto; margin-bottom:10px; border-bottom:1px solid #AAAAAA;}

#header {width:100%; height:auto; overflow:auto; position:fixed; top:0px; left:0px; z-index:100;}

#header-main {width:100%; height:50px; overflow:auto;}

#header-main-menu-open {width:50px; height:50px; background-image:url('/themes/default/assets/images/menu-toggle.png'); background-repeat:no-repeat; background-position:center; cursor:pointer; float:right;}

.header-main-block {width:auto; height:auto; padding-left:25px; padding-right:25px;}

#header-main-device {background-color:rgba(0,138,255,0.75); font-family:helvetica; font-size:20px; font-weight:100; color:#FFFFFF; text-align:center; line-height:50px; float:left;}

#header-main-user {font-family:helvetica; font-size:20px; font-weight:100; color:#FFFFFF; text-align:center; line-height:50px; float:left;}

#header-main-settings-view {font-family:helvetica; font-size:20px; font-weight:100; color:#FFFFFF; text-align:center; line-height:50px; float:right;}

#content {width:100%; height:100%; overflow:auto;}

/*Form*/
form {width:auto; height:auto; margin:0px; overflow:auto;}

.form-label {width:100%; height:auto; padding:3px; overflow:auto; background-color:#AAAAAA; font-family:helvetica; font-size:13px; font-weight:100; text-align:center; color:#444444;}

.form-split {width:100%; height:auto; overflow:auto;}

.form-text {width:100%; height:auto; margin-bottom:10px; padding:10px; background-color:#DDDDDD; font-family:helvetica; font-size:16px; font-weight:100; line-height:25px; color:#444444; border:0px;}

.form-number {width:100%; height:auto; margin-bottom:10px; padding:10px; background-color:#DDDDDD; font-family:helvetica; font-size:16px; font-weight:100; line-height:25px; color:#444444; border:0px;}

.form-select {width:100%; height:auto; margin-bottom:10px; padding:10px; background-color:#DDDDDD; font-family:helvetica; font-size:16px; font-weight:100; line-height:25px; color:#444444; border:0px;}

.form-checkbox {width:100%; height:auto; margin-bottom:10px; padding:10px; overflow:auto; background-color:#DDDDDD;}

.form-checkbox-name {width:calc(100% - 50px); height:auto; font-family:helvetica; font-size:16px; font-weight:100; line-height:25px; color:#444444; float:left;}

.form-checkbox-checkbox {width:25px; height:25px; margin:0px; border:0px; float:right;}

.form-button {width:100%; height:50px; overflow:hidden; font-family:helvetica; font-size:16px; font-weight:100; text-align:center; line-height:50px; color:#FFFFFF; border:0px; cursor:pointer;}

.form-button-half {width:calc(50% - 5px) !important;}

#form-button-forgot {background-color:#888888; color:#FFFFFF; border:0px; float:left; cursor:pointer;}

#form-button-submit {background-color:#008AFF; color:#FFFFFF; border:0px; float:right; cursor:pointer;}

#form-button-cancel {background-color:#C0392B; color:#FFFFFF; border:0px; float:right; cursor:pointer;}

.form-message-bad {width:100%; height:auto; padding:10px; background-color:#D35400; font-family:helvetica; font-size:18px; font-weight:100; text-align:center; color:#FFFFFF;}

/*Login*/
#login {width:100%; max-width:750px; min-width:320px; height:auto; overflow:auto; position:absolute; top:50%; left:50%; display:block; transform:translate(-50%,-50%);}

#login-account {width:auto; height:auto; margin:10px; overflow:auto; background-color:#AAAAAA; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}

#login-access {width:auto; height:auto; margin:10px; overflow:auto; background-color:#AAAAAA; box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}

#login-header {width:100%; height:auto; background-color:#CCCCCC; font-family:helvetica; font-size:25px; font-weight:100; text-align:center; line-height:40px; color:#444444;}

#login-content {width:100%; height:auto; padding:10px; background-color:#666666; overflow:auto;}

.login-message-bad {margin-bottom:5px;}

/*Map*/
#map {width:100%; height:100%; padding-top:0px; position:fixed !important; top:0px; left:0px; z-index:1;}

#map-nodata {width:auto; padding:25px; height:auto; background-color:rgba(0,0,0,0.1); font-family:helvetica; font-size:25px; font-weight:100; text-align:center; color:#FFFFFF; border-radius:10px; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:50;}

#map, #map > div {background-color:#335171 !important;}

.marker_green {
    width: 10px;
    background-color: #00FF00;
    border-radius: 100%;
    position: relative;
}
.marker_green::after {
    width: 15px;
    background-color: #22FF22;
}

.widget-scene-canvas {width:100% !important; height:100% !important;}

div[dir="ltr"] {top:60px !important;}

.gm-style > .gmnoprint:last-of-type {top:auto !important; bottom:0px !important; left:0px !important;}

.gmnoprint {top:auto !important; bottom:0px !important;}

/*.gm-bundled-control {top:50px !important; right:28px !important;}*/

.gm-style-mtc > div:last-of-type {border-top-left-radius:2px !important; border-top-right-radius:2px !important; border-bottom-left-radius:0px !important; border-bottom-left-radius:0px !important; top:-31px !important;}

a[href^="http://maps.google.com/maps"], a[href^="https://maps.google.com/maps"], .gm-style-cc {display:none !important}

.gm-iv-address-link {display:none;}

#map-details {width:100%; height:250px; position:fixed; left:0px; right:0px; bottom:calc(-250px); z-index:50; transition:0.5s;}

#map-details-tab {width:125px; height:30px; margin-left:auto; margin-right:auto; padding:0px 5px 0px 5px; border-top-left-radius:15px; border-top-right-radius:15px; background-color:rgba(41, 128, 185,1); color:#FFFFFF; text-align:center; line-height:35px; cursor:pointer; position:absolute; top:-30px; left:50%; transform:translateX(-50%);}

#map-details-data {width:100%; height:250px; margin-left:auto; margin-right:auto; padding:5px; background-color:rgba(41, 128, 185,1); color:#FFFFFF; text-align:center; line-height:100px; font-size:25px; overflow-x:hidden;}

#map-details-data::-webkit-scrollbar-track {border-radius:10px; background-color:#353535;}

#map-details-data::-webkit-scrollbar {width:10px;}

#map-details-data::-webkit-scrollbar-thumb {border-radius:10px; background-color:#005790;}

#map-details-toggle {width:125px; height:30px; margin-left:auto; margin-right:auto; background-color:rgba(41, 128, 185,1); border-top-left-radius:5px; border-top-right-radius:5px; font-family:helvetica; font-size:16px; font-weight:100; text-align:center; line-height:30px; color:#FFFFFF; cursor:pointer;}

#map-details-toggle-open {display:block;}

#map-details-toggle-close {display:none;}

#map-details-more-toggle {width:125px; height:30px; margin-left:auto; margin-right:auto; background-color:rgba(41,128,185,0.5); border-top-left-radius:5px; border-top-right-radius:5px; font-family:helvetica; font-size:16px; font-weight:100; text-align:center; line-height:30px; color:#FFFFFF; cursor:pointer;}

#map-details-more-toggle-open {display:block;}

#map-details-more-toggle-close {display:none;}

#map-details-info {width:100%; height:auto; max-height:1000px; padding:5px; background-color:rgba(0,0,0,0.5); border-top-left-radius:5px; border-top-right-radius:5px; overflow:auto; display:none;}

.map-details-info-block {width:auto; min-width:calc(20% - 5px); height:auto; padding:5px; margin:2.5px; background-color:rgba(255,255,255,0.85); font-family:helvetica; font-size:16px; font-weight:normal; text-align:left; float:left; line-height:20px;}

.map-details-info-block-name {color:#27AE60;}

.map-details-info-block-data {color:#2980B9;}

#control {width:100%; height:auto; overflow:auto;}

.control-text {width:calc(100% - 100px); height:50px; font-family:helvetica; font-size:16px; font-weight:100; text-align:center; line-height:50px; color:#FFFFFF; float:left;}

.control-button {width:75px; height:30px; margin-top:10px; margin-right:10px; margin-bottom:10px; padding:4px; background-color:#444444; border-radius:15px; float:right;}

.control-button-open {width:22px; height:22px; background-color:#E74C3C; border-radius:50%; float:left;}

.control-button-close {width:22px; height:22px; background-color:#2ECC71; border-radius:50%; float:right; display:none;}

.control-dropdown {width:75px; height:30px; margin-top:10px; margin-right:10px; margin-bottom:10px; padding:4px; background-color:#444444; border-radius:15px; float:right; color:#FFFFFF;}

.map-details-control-block {width:auto; min-width:calc(20% - 5px); height:50px; padding:5px; margin:2.5px; font-family:helvetica; font-size:16px; font-weight:normal; text-align:left; float:left; line-height:20px; background-color:rgba(0,0,0,0.25); border-radius:5px; cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
.map-details-control-block:hover {background-color:rgba(0,0,0,0.5);}

.gm-fullscreen-control {display:none;}

@keyframes marker-selected {
    0% {box-shadow:rgb(255, 255, 255) 0px 0px 60px 10px}
    50% {box-shadow:rgb(255, 255, 255) 0px 0px 40px 5px;}
    100% {box-shadow:rgb(255, 255, 255) 0px 0px 60px 10px}
}

/*Devices*/
.devices-header {width:100%; height:auto; padding-left:10px; padding-right:10px; background-color:#2980B9; font-family:helvetica; font-size:18px; font-weight:100; text-align:left; line-height:40px; color:#FFFFFF;}

.devices-settings {width:100%; height:auto; margin-bottom:10px; padding:10px; overflow:auto; background-color:#666666;}

.devices-settings-text {width:100%; height:auto; margin-bottom:10px; font-family:helvetica; font-size:15px; font-weight:normal; text-align:left; color:#c7c7c7;}

/*Demo*/
#menu-main-button-demo {width:100%; height:auto; margin-bottom:10px; padding:10px; background-color:rgba(0,0,0,0.5); font-family:helvetica; font-weight:100; text-align:center; display:block;}
/*Demo*/

/*Media*/
@media screen and (max-width:2000px) {
	.map-details-info-block, .map-details-control-block {min-width:calc(20% - 5px);}
}

@media screen and (max-width:1500px) {
	.map-details-info-block, .map-details-control-block {min-width:calc(25% - 5px);}
}

@media screen and (max-width:1200px) {
	.map-details-info-block, .map-details-control-block {min-width:calc(33.33% - 5px);}
}

@media screen and (max-width:1000px) {
	.map-details-info-block, .map-details-control-block {min-width:calc(50% - 5px);}
}

@media screen and (max-width:728px) {
	.map-details-info-block, .map-details-control-block {min-width:100%;}
}

@media only screen and (min-height: 250px) {
	.map-details-info {max-height:55px;}
}