/*Main*/
.container {
    width: calc(100% - 20px);
    max-width: 1000px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 10px auto;
    box-sizing: border-box;
    text-align: center;
    overflow: auto;
}
.tag-info {
    margin-bottom: 20px;
    line-height: 1.6;
}
.tag-info p {
    font-size: 1.2em;
    margin: 10px 0;
}
.tag-info p strong {
    font-size: 1.4em;
}
label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.1em;
}
input, textarea, select {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
input[type="submit"] {
    background-color: #007BFF;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
}
input[type="submit"]:hover {
    background-color: #0056b3;
}
.message {
    font-size: 1.4em;
    font-weight: bold;
    color: green;
    margin-bottom: 20px;
    text-align: center;
}

/*Media*/
@media (max-width: 600px) {
    .tag-info p {
        font-size: 1em;
    }
    .tag-info p strong {
        font-size: 1.2em;
    }
    .form-container label, .form-container input, .form-container textarea, .form-container input[type="submit"] {
        font-size: 1em;
    }
}


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

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

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:auto; padding:10px auto;}

#logo {width:auto; height:100px; margin:25px auto 25px auto;}

#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%; position:fixed; top:0px; left:-320px; z-index:100; transition:0.5s;}

#menu-top {width:100%; height:50px; background-color:#BBBBBB;}

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

.menu-top-toggle {width:50px; height:50px; background-color:#BBBBBB; background-image:url('/themes/default/assets/images/menu-toggle.png'); background-repeat:no-repeat; background-position:center; border-bottom-right-radius:5px; cursor:pointer; float:left; position:fixed; top:0px; left: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:#FFFFFF;}

.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:#444444; 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; 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;}

/*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;}

/*Table*/
table {border:1px solid #dededf; height:auto; width:100%; min-width:500px; border-collapse:collapse; border-spacing:1px; text-align:center;}

caption {caption-side:top; text-align:left;}

th {border:1px solid #dededf; background-color:#eceff1; color:#000000; padding:5px;}

td {border:1px solid #dededf; background-color:#ffffff; color:#000000; padding:5px; font-size:14px;}

/*NFC*/
.nfcbutton {margin:0px auto; padding:15px 30px; font-size:1.2em; cursor:pointer; background-color:#007BFF; color:white; border:none; border-radius:5px; display:block;}

#nfcmessage {margin-top:10px; color:gray; text-align:center;}

/*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;}
}