/* GLOBAL */
body {
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 14px;
}
/* Přihlášení */
div#nadpis {
  margin: 0px auto;
  position: relative;
  width: 15em;
  font-size: 1.4em;
}
div#prihlaseni {
  margin: 0px auto;
  position: relative;
  width: 18em;
  min-width: 20em;
  border: solid #96CA2D 2px;
  padding: 10px;
  /*background-color: #0066FF;*/
  background-color: #B5E655;
}
div#prihlaseni_nadpis {
  margin: 0px 0px 10px 0px;
  font-weight: bold;
  font-size: 20px;

}
#login {
  background-color: #4BB5C1;
  height: 30px;
  margin: 10px 0px 0px 0px;
  border: none;
}
input.vstup {
  border: none;
}

.error-message {
  color: #a94442;
  background-color: #f2dede;
  padding: 15px;
  margin: 10px auto;
  border: 1px solid #ebccd1;
  border-radius: 4px;
  max-width: 20em;
}

@media only screen and (max-width: 700px) {
  div#prihlaseni {
    width: auto;
    max-width: 21em;
  }
}

/* Obsah */
* {
    box-sizing: border-box;
}
.hidden {
    display: none;
}
body.new-desing {
    font-family: "Arial", Gadget, sans-serif;
    font-size: 1.05em;
    background-color: #EDF7F2;
    margin: 0px;
    min-width: 340px;
}
.logout {
    float: right;
    padding: 5px;
}
.location {
    clear: both;
    float: left;
    background-color: #B5E655;
    width: 100%;
    margin-bottom: 5px;
}
.location div{
    float: left;
}
.title {
    /*clear: both;*/
    display: block;
}
.title div {
    padding: 5px;
}
.data-all {
    clear: both;
    float: left;
}
.data:first-child{

}
.data {
    margin-right: 5px;
}
.data div {
    height: 30px;
    padding: 5px;
    display: inline-block;
}
.key {
    background-color: #96CA2D;
    min-width: 170px;
}
.value {
    background-color: #4BB5C1;
    min-width: 170px;
}
.no-float {
    /*clear: both;*/
}
a.picture {
/*    float: left;*/
    margin-right: 5px;
}
video {
/*    float: left;*/
    width: 640px;
    height: 480px;
}
a.picture img.detail {
    max-width: 99%;
}
video.detail {
    max-width: 100%;
    height: auto;
}
div.detail.videos {
/*    float: left;*/
}
div.content {
    float: left;
}
input.switch-image-button {
/*    height: 480px;*/
    vertical-align: top;
}
input.switch-image-button.hidden {
    display: none;
    vertical-align: top;
}

.content .stream-control input {
    display: inline-block;
}
.content .stream-control.stream-off input.turn-stream-off {
    display: none;
}
.content .stream-control.stream-on input.turn-stream-on {
    display: none;
}


.content .ptz-control {
    display: inline-block;
    vertical-align: top;    
}
.content .ptz-control.hidden {
    display: none;
}
.content .ptz-control .control {
    margin-top: 20px;
}
.content .ptz-control .control table {
    border: none;
    text-align: center;
}
.content .ptz-control .control .ptz-control-button {
    width: 60px;
    height: 40px;
}


/* only icon general */
.data .only-icon {
    height: 20px;
    display: inline-block;
    margin-left: 6px;
    background-repeat: no-repeat;
    vertical-align: middle;
}
/* only icon specific */
.data .only-icon.temp-0 {
    width: 15px;
    background-image: url("/img/icons/thermometer-empty.svg");
}
.data .only-icon.temp-1 {
    width: 15px;
    background-image: url("/img/icons/thermometer-quarter.svg");
}
.data .only-icon.temp-2 {
    width: 15px;
    background-image: url("/img/icons/thermometer-half.svg");
}
.data .only-icon.temp-3 {
    width: 15px;
    background-image: url("/img/icons/thermometer-three-quarters.svg");
}
.data .only-icon.temp-4 {
    width: 15px;
    background-image: url("/img/icons/thermometer-full.svg");
}

.data .value input,
.data .value button {
    vertical-align: middle;
}

.data .value.button-5 input,
.data .value.button-5 button {
    width: 15.5%;
    padding: 0px;
}
.data .value.button-5 input.off-button,
.data .value.button-5 button.off-button {
    width: 20%;
    padding: 0px;
}

.data .value.button-2 input,
.data .value.button-2 button {
    width: 50%;
}
.data .value.button-2 .no-icon {
    width: 80%!important;
}
.data .value.button-2 .icon {
    width: 20%!important;
}

.data .value.button-1 input,
.data .value.button-1 button {
    width: 100%;
    
}

.data .value button.icon {
    line-height: 0px;
    padding: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("/img/icons/clock.svg");
    border: 1px solid #adadad;
    background-color: #e1e1e1;
    height: 20px;
}
.data .value button.icon img {
    width: 16px;
}
.text-red {
    color: red;
}

/* Message Box */
div.message-box {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: scroll;
}
div.message-box-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #0f0f0f;
    opacity: 0.7;
}
div.message-box-window {
    position: fixed;
    top: 30%;
    left: calc(50% - 340px);
    background-color: #B5E655;
    opacity: 1;
    width: 800px;
    margin: 0px auto;
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.7);
}
div.message-box-window div.header {
    background-color: #8BD300;
    padding: 15px;
    font-size: 1.4em;
}
div.message-box-window div.header .js-header-switch{
    position: absolute;
    right: 15px;
}
div.message-box-window div.body {
    margin: 5px 0px;
    padding: 5px;
}
div.message-box-window div.footer {
    border-top: 1px solid #8BD300;
    padding: 5px;
    text-align: right;
    /*background-color: #4BB5C1;*/
}
div.message-box-window div.footer .button-ok {
    width: 100px;
}

@media only screen and (max-width: 700px) {
    div.message-box-window {
        position: relative;
        top: 0px;
        left: 0px;
        width: auto;
        min-width: 580px;
    }
}

/* message-box Schedule settings */
div.schedule-settings table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
div.schedule-settings table thead th {
    background-color: #4BB5C1;
    padding: 5px;
}
div.schedule-settings table tbody tr:nth-child(odd){
    background-color: #9BD529;
}
div.schedule-settings table tbody td {
    padding: 5px;
}
div.schedule-settings table tbody tr.record-new {
    background-color: #A0BF63;
}
div.message-box .button {
    height: 25px;
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
    background-repeat: no-repeat;
    vertical-align: middle;
}
/* Icon buttons */
div.message-box table .button.button-edit {
    width: 28px;
    background-image: url("/img/icons/edit.svg");
}
div.schedule-settings table .button.button-remove {
    width: 22px;
    background-image: url("/img/icons/trash-alt.svg");
}
div.schedule-settings table .button.button-save {
    width: 22px;
    background-image: url("/img/icons/save.svg");
}
div.schedule-settings table .button.button-add {
    width: 22px;
    background-image: url("/img/icons/plus.svg");
}
div.schedule-settings table .button.button-calendar {
    width: 22px;
    background-image: url("/img/icons/calendar-alt.svg");
}
div.schedule-settings table .button.button-repeat {
    width: 22px;
    background-image: url("/img/icons/repeat.svg");
}
div.message-box .button.button-condition {
    width: 19px;
    background-image: url("/img/icons/code-branch.svg");
}
div.message-box .button.button-time {
    width: 19px;
    background-image: url("/img/icons/clock.svg");
}

/* SWITCH */

.switch {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 62px;
  height: 25px;
  padding: 3px;
  background-color: white;
  border-radius: 18px;
  box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
  background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
  background-image: -o-linear-gradient(top, #eeeeee, white 25px);
  background-image: linear-gradient(to bottom, #eeeeee, white 25px);
}

.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.switch-label {
  position: relative;
  display: block;
  height: 20px;
  font-size: 10px;
  text-transform: uppercase;
  background: #eceeef;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
  -webkit-transition-property: opacity background;
  -moz-transition-property: opacity background;
  -o-transition-property: opacity background;
  transition-property: opacity background;
}
.switch-label:before, .switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  line-height: 1;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
}
.switch-label:before {
  content: attr(data-off);
  right: 11px;
  color: #aaa;
  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
}
.switch-label:after {
  content: attr(data-on);
  left: 11px;
  color: white;
  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
  opacity: 0;
}
.switch-input:checked ~ .switch-label {
  background: #47a8d8;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-input:checked ~ .switch-label:before {
  opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
  opacity: 1;
}

.switch-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  background: white;
  border-radius: 10px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
  background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
  background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
  background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
  background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
}
.switch-handle:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
  width: 12px;
  height: 12px;
  background: #f9f9f9;
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
  background-image: -webkit-linear-gradient(top, #eeeeee, white);
  background-image: -moz-linear-gradient(top, #eeeeee, white);
  background-image: -o-linear-gradient(top, #eeeeee, white);
  background-image: linear-gradient(to bottom, #eeeeee, white);
}
.switch-input:checked ~ .switch-handle {
  left: 40px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

.switch-green > .switch-input:checked ~ .switch-label {
  background: #4fb845;
}