@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500);
html {
  height: 100%;
  font-size: 18px;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
body {
  font-family: 'Roboto', Calibri, Arial, sans-serif;
  background: #ffffff;
  font-weight: 300;
  font-size: 1rem;
  color: #333;
  -webkit-font-smoothing: antialiased;
  width: 100%;
}
a {
  color: #333;
  text-decoration: none;
}
a.ablue {
  color: #0075bf;
}
h1 {
  font-size: 2rem;
}
h1 span {
  font-weight: normal;
}
.mainbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: stretch;
  max-width: 100%;
  height: 100%;
}
.footer, .lines_mozaic {
  flex: 1 1 100%;
  padding: 5vh 5vw;
  line-height: 1.5rem;
  min-height: 47px;
}
.footer_logo {
  background: url(/images/logo_szs.svg) no-repeat center top;
  display: block;
  background-size: contain;
  height: 110px;
  width: 129px;
  margin: 0 28px;
  float: left;
}
.input_box .footer_logo {
	display: none;
}
.szslogo {
  flex: 1 1 25%;
}
.menubox {
  flex: 1 1 25%;
}
.logo, .main, .main_p {
  flex: 1 1 75%;
}
.dommenu {
  display: block;
  padding: 10px 10px 10px 7vw;
}
.main {
  padding: 10px 5vw 10px 10px;
}
.topline1, .topline2 {
  background-color: #0075bf;
  background: linear-gradient(180deg, rgba(0, 86, 165, 1) 0%, rgba(0, 117, 191, 1) 100%);
  color: #32bdf8;
  letter-spacing: 1px;
  font-size: 0.8rem;
}
.topline2 {
  text-align: right;
  padding: 5px 5vw 5px 5px;
  flex: 1 1 65%;
}
.topline1 {
  padding: 5px 5px 5px 5vw;
  flex: 1 1 25%;
}
.szslogo {
  background: url(/images/logo_szs_text.svg) no-repeat 5vw center;
  background-size: auto 24px;
  height: 45px;
  background-color: #fff;
}
.logo {
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 90px;
  height: 100px;
  background-color: #fff;
}
.lines_mozaic {
  padding: 10px 5vw;
  text-align: right;
}
.dommenu ul {
  list-style: none;
  margin-bottom: 2rem;
}
.dommenu ul li {
  margin: 10px 0;
/*  padding-left: 0.5vw;*/
  font-size: 1.2rem;
  font-weight: 400;
  color: #999;
}
.dommenu ul li a {
  color: #999;
}
.dommenu ul li.select a, .dommenu ul li.select:hover {
  color: #0075bf;
}
.dommenu ul li:before {
  content: "\00B7";
  height: 1.3rem;
  width: 1.2em;
  margin-left: -1.2rem;
  position: absolute;
  text-align: center;
}
.dommenu ul li.allcm:before, .dommenu ul li.aero:before {
  content: " ";
}
.dommenu ul li.select:before {
  content: " ";
  background: url('/images/cam.png') no-repeat center;
  background-size: 1.2rem;
  height: 1.3rem;
  width: 1.2em;
  margin-left: -1.7rem;
  position: absolute;
}
.dommenu ul li:first-child {
  padding-bottom: 1rem;
  margin-top: 0;
}
.dommenu ul li a:hover {
  color: #000;
  /*  cursor: pointer;*/
}
.dommenu ul li.allcm, .dommenu ul li.aero {
  padding-left: 0;
}
.oneitem {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: stretch;
  max-width: 100%;
  margin-bottom: 2rem;
}
.play, .ptz-cover {
  height: 110px;
  flex: 0 1 110px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #33333380;
}
.ptz-cover {
  display: block;
  background: url('/images/corn360.svg') no-repeat;
  background-position: right 0 top;
}
.oneitem .ptz-cover {
  background-size: 45px auto;
}
.oneitem_p .ptz-cover {
  background-size: 60px auto;
}
.play a {
  display: block;
  width: 100%;
  height: 100%;
  background: url('/images/play.png') no-repeat center;
  background-size: cover;
  opacity: 0.5;
}
.play a:hover {
  opacity: 0.9;
}
a.camaero:hover .play {
  filter: contrast(1.3);
  border: #000 2px solid;
}
.desc {
  min-height: 110px;
  height: auto;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
}
.camname {
  font-size: 1.6rem;
  font-weight: 400;
  padding: 0.5rem 1.5rem 0.9rem 1.5rem;
  flex: 1 1 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.camname span {
  font-weight: 300;
}
.camnotify {
  padding: 0.5rem 1.5rem 0.9rem 1.5rem;
  color: red;
}
.camaero .camname {
  display: flex;
  align-items: center;
}
.camaero .camname_p {
  background-color: rgba(0, 0, 0, 0.2);
}
.camnavi {
  flex: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: stretch;
  max-width: 100%;
  overflow: hidden;
  text-transform: uppercase;
  background-color: #E6E6E6;
  margin-left: 5px;
  height: 1.8rem;
}
.camnavi a {
  line-height: 1.8rem;
  padding-top: 0;
  padding-bottom: 0;
}
.kn_tlaps {
  flex: 1 1 16%;
  background: url('/images/icon_timelaps.png') no-repeat 1rem center;
}
.kn_archive {
  flex: 1 1 21%;
  border-right: 2px solid #fff;
  background: url('/images/icon_archive.png') no-repeat 1rem center;
}
.kn_link {
  flex: 1 1 22%;
  border-left: 2px solid #fff;
  background: url('/images/icon_share.png') no-repeat 1rem center;
}
.kn_geo {
  flex: 1 1 16%;
  border-left: 2px solid #fff;
  background: url('/images/icon_geo.png') no-repeat 1rem center;
}
.kn_live {
  flex: 1 1 16%;
  border-left: 2px solid #fff;
  background: url('/images/icon_multi_add.svg') no-repeat 1rem center;
}
.kn_live_del {
  flex: 1 1 16%;
  color: #e20613;
  border-left: 2px solid #fff;
  background: url('/images/icon_multi_del.svg') no-repeat 1rem center;
}
.kn_tlaps, .kn_archive, .kn_link, .kn_geo, .kn_live, .kn_live_del {
  padding: 5px 2rem 5px 2.7rem;
  background-size: 1.2rem;
  height: 100%;
}
.kn_tlaps:hover, .kn_archive:hover, .kn_link:hover, .kn_geo:hover, .kn_live:hover {
  background-color: #D6D4D4;
}
.topline2 a {
  display: inline-block;
  padding: 0.5rem 0 0.5rem 2rem;
  margin-left: 1rem;
  color: #32bdf8;
}
.topline1 a {
  display: inline-block;
  padding: 0.5rem 0 0.5rem 2rem;
  color: #32bdf8;
}
.a_home {
  background: url('/images/icon_home.svg') no-repeat 0.2rem center;
  background-size: 1.2rem;
}
.a_logout {
  background: url('/images/icon_out.svg') no-repeat 0.5rem center;
  background-size: 1.2rem;
}
.a_help {
  background: url('/images/icon_help.svg') no-repeat 0.5rem center;
  background-size: 1.2rem;
}
.a_live {
  background: url('/images/icon_multi.svg') no-repeat 0.5rem center;
  background-size: 1.2rem;
}
.a_acc {
  background: url('/images/icon_acc.svg') no-repeat 0.5rem center;
  background-size: 1.2rem;
}
.a_admin {
  background: url('/images/icon_admin.svg') no-repeat 0.5rem center;
  background-size: 1.2rem;
}
.led {
  flex: 1;
  color: #fff;
  text-align: center;
  padding: 0 20px 0 10px;
  line-height: 1.8rem;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  margin: 0 -10px;
  height: 100%;
}
.led div {
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
}
.offline {
  background: rgb(245, 142, 103); /* Old browsers */
  background: -moz-linear-gradient(left, rgba(245, 142, 103, 1) 0%, rgba(249, 177, 112, 1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(245, 142, 103, 1) 0%, rgba(249, 177, 112, 1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(245, 142, 103, 1) 0%, rgba(249, 177, 112, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f58e67', endColorstr='#f9b170', GradientType=1); /* IE6-9 */
}
.online {
  background: rgb(83, 185, 93); /* Old browsers */
  background: -moz-linear-gradient(left, rgba(83, 185, 93, 1) 0%, rgba(150, 210, 124, 1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, rgba(83, 185, 93, 1) 0%, rgba(150, 210, 124, 1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, rgba(83, 185, 93, 1) 0%, rgba(150, 210, 124, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#53b95d', endColorstr='#96d27c', GradientType=1); /* IE6-9 */
}
.main_p {
  padding: 10px 5vw 10px 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: stretch;
}
.oneitem_p {
  flex: 0 1 19%;
  margin-right: 1%;
  margin-bottom: 1rem;
  position: relative;
}
.main_p .play_p {
  height: 200px;
}
.main_p.s4 .oneitem_p {
  flex: 0 1 24%;
}
.main_p.s4 .play_p {
  height: 220px;
}
.main_p.s3 .oneitem_p {
  flex: 0 1 32.3%;
}
.main_p.s3 .play_p {
  height: 250px;
}
.play_p {
  height: 250px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-color: #33333380;
}
.play_p a {
  display: block;
  width: 100%;
  height: 100%;
  background: url('/images/play.png') no-repeat center;
  background-size: 50%;
  opacity: 0.5;
  position: relative;
}
.play_p a:hover {
  opacity: 0.9;
}
.camaero .play_p a {
  background-image: none;
  opacity: 0;
}
a.camaero:hover .play_p {
  filter: contrast(1.3);
}
.submenu_p {
  display: flex;
  overflow: hidden;
  background-color: #D6D4D4;
}
.camname_p {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0;
  width: 100%;
  color: #fff;
  padding: 10px;
}
.camname_p span {
  display: block;
}
.camnavi_p {
  display: none;
  position: absolute;
  width: 100%;
  background-color: #E6E6E6;
  bottom: 1.8rem;
  padding: 5px;
}
.action .camnavi_p {
  display: block;
}
.kp_tlaps, .kp_archive, .kp_link, .kp_geo, .kp_live, .kp_live_del {
  display: block;
  padding: 5px 10px 5px 2.2rem;
  margin-bottom: 2px;
}
.kp_live_disable {
  opacity: 0.4;
  cursor: no-drop;
}
.kp_archive {
  background: url('/images/icon_archive.png') no-repeat 2px center #E6E6E6;
  background-size: 1.1rem;
}
.kp_link {
  background: url('/images/icon_share.png') no-repeat 3px center #E6E6E6;
  background-size: 1.1rem;
}
.kp_tlaps {
  background: url('/images/icon_timelaps.png') no-repeat 5px center #E6E6E6;
  background-size: 1.1rem;
}
.kp_geo {
  background: url('/images/icon_geo.png') no-repeat 5px center #E6E6E6;
  background-size: 1.1rem;
}
.kp_live {background: url('/images/icon_multi_add.svg') no-repeat 5px center #E6E6E6;
  background-size: 1.1rem;
}
.kp_live_del {background: url('/images/icon_multi_del.svg') no-repeat 5px center #E6E6E6;
  color: #e20613;
  background-size: 1.1rem;
}
.pmenu {
  display: block;
  /*  height: 30px;*/
  flex: 1 1 50%;
  background: url('/images/icon_hamburg.png') no-repeat 10px center #E6E6E6;
  background-size: 1.1rem;
  cursor: pointer;
  line-height: 2rem;
}
.action .pmenu {
  background: url('/images/icon_close.png') no-repeat 10px center #D6D4D4;
  background-size: 1.1rem;
}
.camnavi_p a:hover, .submenu_p a:hover, .pmenu:hover {
  background-color: #D6D4D4;
}
.the_mosaic, .the_list {
  white-space: nowrap;
}
.the_list span, .the_mosaic span {
  background: url('/images/list.png') no-repeat #efefef;
  background-size: auto 100%;
  margin: 0 5px;
  display: inline-block;
  width: 44px;
  height: 1.2rem;
  border-radius: 1.2rem;
  border: 2px solid #ededed;
  vertical-align: text-bottom;
}
.the_mosaic span {
  background-position: left center;
}
.the_list span {
  background-position: right center;
}
.map {
  display: inline-block;
  padding: 0 40px 0 25px;
  flex: 0 1 0;
  background: url('/images/icon_geo.png') no-repeat left center;
  background-size: auto 20px;
}
.icon_online {
  display: inline-block;
  padding: 0 0 0 25px;
  flex: 0 1 0;
  background: url('/images/cam_gray.png') no-repeat left center;
  background-size: auto 20px;
}
.list {
  display: inline-block;
  padding: 0 0 0 25px;
  background: url('/images/icon_list.png') no-repeat left center;
  background-size: auto 20px;
}
.mozaic_step {
  display: inline-block;
  padding: 0 0 0 15px;
  flex: 0 1 0;
}
.mozaic_step a.s3 {
  background: url('/images/setka_3.png') no-repeat center #efefef;
  background-size: auto 15px;
  width: 30px;
}
.mozaic_step a.s3.select {
  background: url('/images/setka_3s.png') no-repeat center #efefef;
  background-size: auto 15px;
}
.mozaic_step a.s4 {
  background: url('/images/setka_4.png') no-repeat center #efefef;
  background-size: auto 15px;
  width: 40px;
}
.mozaic_step a.s4.select {
  background: url('/images/setka_4s.png') no-repeat center #efefef;
  background-size: auto 15px;
}
.mozaic_step a.s5 {
  background: url('/images/setka_5.png') no-repeat center #efefef;
  background-size: auto 15px;
  width: 45px;
}
.mozaic_step a.s5.select {
  background: url('/images/setka_5s.png') no-repeat center #efefef;
  background-size: auto 15px;
}
.mozaic_step a {
  height: 1.2rem;
  display: inline-block;
  border: 15px;
  margin-right: 1vw;
  border-radius: 17px;
  vertical-align: text-bottom;
}
.c-hamburger {
  display: none;
}
.input_box {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: url('/images/back.png') #ececec center;
  background-size: cover;
  overflow: auto;
}
.input_box .m_input {
  text-align: center;
  width: 30%;
  min-width: 320px;
  max-width: 500px;
  margin: auto;
  padding: 0;
}
.form_win .m_win {
  text-align: center;
  width: 30%;
  margin: auto;
}
.form_win .p_win {
  text-align: center;
  width: 100vw;
  height: 100vh;
  margin: auto;
}
.input_box .m_input label, .form-account label {
  display: block;
  text-align: left;
  padding: 10px 0;
  padding: 5px;
  line-height: 2rem;
}
.f_box label {
  flex: 1 1 50%;
  display: block;
  text-align: left;
  padding: 5px;
  line-height: 2rem;
  min-width: 400px;
  max-width: 800px;
}
.f_box .pass_log {
  flex: 1 1 50%;
}
.input_box .m_input label:first-letter {
  text-transform: uppercase;
}
.input_box .m_input label span {
  display: none;
}
.input_box .m_input label.invalid input, .form-account label.invalid input {
  border: solid 1px red;
}
.input_box .m_input label.invalid, .form-account label.invalid {
  color: red;
}
.input_box .m_input label.invalid span {
  display: inline;
}
.pass_log {
  visibility: hidden;
}
.invalid.pass_log {
  color: red;
  visibility: visible;
  padding: 5px;
}
.form-signin {
  padding: 3vh 0;
  width: 100%;
}
.form-account {
  padding: 3vh 0;
  width: 100%;
}
.input_box .szslogoin {
  background: url(http://lk2.webcam.exdesign.ru/images/logo_szs.svg) no-repeat center top;
  background-size: auto 74px;
  height: 100px;
  width: 100%;
}
.m_input {
  position: relative;
  width: 90%;
  margin: auto;
  padding: 10vh 10%;
  /*  background-color: #fff;*/
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.b_win, .tlaps_win, .form_win {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.90)
}
.b_win, .form_win {
  z-index: 200;
}
.accname {
  background-color: #efefef;
  margin: 3vh 0;
}
.acc4 {
  color: #999;
  font-weight: 400;
  padding-top: 10px;
}
.tlaps_win {
  z-index: 250;
  height: 100%;
}
.m_win {
  position: relative;
  width: 70%;
  max-width: 900px;
  min-width: 600px;
  margin: auto;
  padding: 10vh 3% 5vh;
  background-color: #fff;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  border-radius: 5px;
}
.tlaps_win .m_win {
  background: none;
  /*  padding: 0 20px;*/
  padding: 0;
  width: 100%;
  /*  height: 95%;*/
  height: 100%;
  max-width: inherit;
  min-width: inherit;
}
.close_win, .tlaps_win .close_win {
  display: block;
  height: 40px;
  width: 40px;
  position: absolute;
}
.tlaps_win .close_win {
  background: url('/images/icon_close_w.png') no-repeat center;
  background-size: 40px;
  right: 10px;
  top: 22px;
}
.tlaps_win .correct_size .close_win {
  top: 0;
  right: 0;
  margin-right: 0;
  margin-top: 5vh;
}
.close_win {
  background: url('/images/icon_close.png') no-repeat center;
  background-size: 40px;
  top: 20px;
  right: 20px;
}
.p_win .close_win {
  background: url('/images/icon_close_w.png') no-repeat center #00000020;
  background-size: 40px;
  top: 20px;
  right: 20px;
}
.tlaps_win h1 {
  font-size: 1.5rem;
  color: #fff;
}
.win_box h3 {
  padding: 1rem;
  margin: 30px 0 5px 0;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 1.5rem;
}
.win_box {
  display: flex;
  flex-direction: column;
  /*  flex-wrap: wrap;*/
  align-items: stretch;
  justify-content: space-around;
  max-width: 1000px;
  width: 95%;
  height: 95%;
}
.correct_size {
  height: 100%;
  width: 100%;
  margin: auto;
  max-width: calc(100vw - 20px);
  height: calc(100vh - 0px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.win_box > div, .win_box h1, .win_box h3 {
  text-align: center;
}
.tlaps_win .win_box {
  max-width: inherit;
  /*  padding: 0 40px;*/
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t_link, .t_iframe {
  padding: 5px;
  width: 100%;
  font-size: 1.2rem;
  font-weight: 300;
  font-family: 'Roboto';
  border: solid 1px #ccc;
}
.t_iframe {
  height: 120px;
}
.btn, .btn_in, .btn_save {
  padding: 10px;
  width: 40%;
  font-size: 1rem;
  border-radius: 2px;
  margin: 1vh 5px;
  font-weight: 300;
  font-family: 'Roboto';
  background-color: #0075bf;
  border: 0;
  color: #efefef;
  letter-spacing: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
a.btn_in {
  display: inline-block;
}
.form-account .btn_in {
  width: 40%;
}
.btn_save {
  width: 200px;
  float: right;
}
.f_box {
  display: flex;
  flex-direction: column;
  width: 94%;
  margin-left: 6%;
}
.f_1, .f_2 {
  flex: 1 1 50%;
  padding: 0 5% 0 0;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
}
.add_new_user {
  display: none;
}
.new_user_box {
  width: 100%;
  margin: auto;
  text-align: center;
  background: #efefef url('/images/userback.png') no-repeat left top;
  background-size: contain
}
.itislogin {
  font-size: 1.2rem;
  text-align: left;
  flex: 1 1 100%;
}
.board {
  font-size: 1.5rem;
}
.btn:active, .btn_in:active {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 5px rgba(0, 0, 0, 0.3);
  /*		  color: #32bdf8;*/
}
.copied {
  background: #efefef;
  transition: background 0.3s;
  color: #000;
  box-shadow: none;
}
.any {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #efefef;
  margin: 3vh 0 0;
}
.any:hover {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #D6D4D4;
}
.play_any {
  background: url('/images/camany.jpg') no-repeat center;
  background-size: cover;
}
.play_any_7 {
  background: url('/images/camany7.jpg') no-repeat center;
  background-size: cover;
}
.play_any div, .play_any_7 div {
  width: 80px;
  height: 60px;
  background: url('/images/play.png') no-repeat center;
  background-size: cover;
  margin: 2px;
  opacity: 0.8;
}
.any:hover .play_any div, .any:hover .play_any_7 div {
  opacity: 1;
}
.text_any {
  padding: 10px 20px;
  font-size: 1.5rem;
}
.btn_box {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.main h2 {
  padding: 6vh 0;
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 1.5rem;
  text-transform: uppercase;
}
.logo h1 {
  padding: 2vh 50px 2vh 0;
  margin-top: 13px;
  font-size: 2rem;
  text-align: center;
}
.radiobox {
  line-height: 1.7rem;
  padding: 0.5rem 0;
  font-size: 1.1rem;
}
.radiobox label {
  display: inline-block;
  padding: 0 5px;
}
.radiobox label .sizepx {
  display: none;
}
.radiobox label input:checked + .sizepx {
  display: inline-block;
}
.radiobox input {
  vertical-align: middle;
  margin: 0 4px;
}
.sizepx {
  display: inline-block;
}
.sizepx input {
  width: 50px;
}
.helpbox h1, .helpbox h2 {
  text-align: center;
  padding: 6vh 1vw 0;
}
.helpbox img {
  width: 100%;
  height: auto;
}
.goback {
  display: block;
  position: fixed;
  width: 9vw;
  height: 50px;
  padding: 5px;
  background: #808080 url('/images/goback.svg') no-repeat center;
  background-size: auto 80%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.3);
}
.old {
  display: inline-block;
  padding: 5px 0 5px 25px;
  background: url('/images/icon_in.png') no-repeat left center;
  background-size: auto 20px;
  color: #999;
}
.forgot {
  display: inline-block;
  padding: 5px 0;
  color: #999;
}
.forgot:hover, .old:hover {
  color: #333;
}
/*adminpage start*/
.admin_box {
  width: 100%;
  padding: 0 4vw;
}
.one_user_box {
  width: 100%;
  border: rgba(239, 239, 239, 1.00) solid 1px;
  margin: 5px 0;
  padding: 5px;
}
.one_user_box .new_user_box, .one_user_box .houses_tbl {
  display: none;
}
.one_user_box.select .new_user_box, .one_user_box.select .houses_tbl {
  display: block;
}
.add_user_box {
  width: 100%;
  margin: 5px 0;
  padding: 5px;
  text-align: right;
}
.add_user_box a {
  display: inline-block;
  background: url('/images/icon_adduser.png') left center no-repeat;
  background-size: 1.3rem;
  padding-left: 2rem;
  font-size: 1.3rem;
  margin: 10px;
}
.left_box {
  width: 100%;
  margin: 5px 0;
  padding: 5px;
  text-align: left;
}
.left_box a {
  display: inline-block;
  background: url('/images/left_arrow.png') left center no-repeat;
  background-size: 1.3rem;
  padding-left: 2rem;
  font-size: 1.3rem;
  margin: 10px;
}
.a_table {
  display: table;
  width: 100%;
}
.a_table > div > * {
  background-color: rgba(239, 239, 239, 0.50);
}
.a_table-row {
  display: table-row;
}
.a_table-row:hover {
  background: #efefef;
}
.a_table-row.allselect:hover, .a_table-row.tabhead:hover {
  background: none rgba(239, 239, 239, 0);
}
label.a_table-cell:hover {
  background: #cdcdcd;
  cursor: pointer;
}
label input:hover {
  cursor: pointer;
}
.a_table-cell {
  display: table-cell;
  width: 9%;
  text-align: center;
  border-left: 1px solid #dcdcdc;
  padding: 10px 5px;
}
.a_table-cell:nth-child(2) {
  width: 27%;
  text-align: left;
  padding-left: 1%;
}
.a_table-row.tabhead .a_table-cell {
  border-left: 0;
}
.a_table-cell:nth-child(3), .a_table-cell:nth-child(1) {
  width: 5%;
}
.a_table-cell:nth-child(3), .a_table-cell:nth-child(1) {
  width: 5%;
}
.a_table-cell:nth-child(1) input + span {
  display: block;
  height: 20px;
  width: 100%;
  background: url('/images/icon_switch.png') no-repeat center -50px;
  background-size: 40px;
}
.a_table-cell:nth-child(1) input:checked + span {
  background: url('/images/icon_switch.png') no-repeat center -10px;
  background-size: 40px;
}
.a_table-cell:nth-child(1) input {
  display: none;
}
.user_table {
  display: table;
  width: 100%;
}
.user_table > div:first-child {
  display: table-row;
  background: #efefef;
}
.user_table .u_name {
  display: table-cell;
  width: 90%;
  padding: 10px 1%;
  background: url('/images/down_arrow.png') 99% center no-repeat;
  background-size: 2rem;
  font-size: 2rem;
  font-weight: bold;
}
.one_user_box.select .user_table .u_name {
  background: url('/images/up_arrow.png') 99% center no-repeat;
  background-size: 2rem;
}
.a_edit {
  display: table-cell;
  width: 5%;
  background: url('/images/icon_edit.png') center no-repeat;
  background-size: 1.3rem;
}
.a_del {
  display: table-cell;
  width: 5%;
  background: url('/images/icon_del.png') center no-repeat;
  background-size: 1.3rem;
}
.user_table div a:hover, .one_user_box.select .user_table div a:hover {
  background-color: #cdcdcd50;
}
.allselect > * {
  border-bottom: 1px solid #cdcdcd;
  border-top: 1px solid #cdcdcd;
  font-weight: bold;
}
/*.allselect > div:first-child {
  border-bottom: rgba(239, 239, 239, 0.50);
  border-top: rgba(239, 239, 239, 0.50);
}*/
.save_close {
  display: inline-block;
  background: url('/images/icon_save.png') left center no-repeat;
  background-size: 1.4rem;
  padding-left: 2rem;
  font-size: 1.3rem;
  float: right;
  margin: 10px;
}
.checkall {
  background: url('/images/icon_checkall.png') center no-repeat;
  background-size: 1.4rem;
}
.a_table-row.shutoff {
  background: url('/images/offback.gif') repeat-x left center;
}
.a_table-row.shutoff .a_table-cell input {
  opacity: 0.3;
}
.a_table-row.shutoff label.a_table-cell:hover {
  background-color: rgba(239, 239, 239, 0.50);
}
/*adminpage finish*/
/*aero quadro page start*/
.qdr {
  background-image: url('/images/quadro_full.png');
  border: solid 2px #ccc;
}
.scr {
  background-image: url('/images/screen_full.png');
  border: solid 2px #ccc;
}
.dommenu.aeropage ul li:first-child {
  padding-bottom: 0;
  margin-top: 65px;
}
.dates_box {
  flex: 1;
  padding: 0 0;
}
.dates_box select {
  /*  -moz-appearance: none;
  -webkit-appearance: none;*/
  border: none;
  outline: none;
  font-size: 15px;
  overflow: auto;
  width: 100%;
  height: 100%;
  background: #fff;
}
.dates_box option {
  padding: 7px;
  height: auto
}
.dates_box option:hover {
  background: #0075bf10;
  cursor: pointer;
}
.aero_box {
  display: flex;
  margin: 2vh 0;
}
.aero_box h3 {
  padding: 2px 1%;
  color: #999;
}
.aero_select {
  flex: 5;
  border: 1px solid #ccc;
  padding: 2vh 1vw;
}
.aero_video_box, .aero_photo_box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}
.aero_video_box > div {
  margin: 1%;
}
.aero_photo_box a {
  width: 18%;
  display: block;
  height: auto;
  margin: 1%;
}
.aero_photo_box a img {
  width: 100%;
  height: auto;
  border: 2px solid #ccc;
  cursor: pointer;
}
.aero_photo_box a:hover img {
  border: 2px solid #000;
}
.aero_video_box + h3 {
  margin-top: 1%;
}
.vplay {
  background: #ccc;
  width: 32vw;
  height: 18vw;
}
.vload {
  font-size: 20px;
  background: url(/images/icon_dload.png) no-repeat 8px center #efefef;
  background-size: 20px;
  padding: 5px 36px;
  display: block;
  color: #666;
}
.vload:hover {
  color: #000;
  background-color: #ccc;
}
/* the viewer container must have a defined size */
#panorama {
  width: 100%;
  height: 100%;
}
/* blueimp-gallery change */
.blueimp-gallery > .close {
  background: url(/images/icon_close_w.png) no-repeat left #00000020;
  background-size: 40px;
  top: 40px !important;
  right: 30px !important;
  width: 40px !important;
  margin: 0px !important;
}
.blueimp-gallery > .prev {
  background: url(/images/left_arrow_w.png) no-repeat center #00000020 !important;
  background-size: 30px !important;
  margin-top: 0 !important;
}
.blueimp-gallery > .next {
  background: url(/images/right_arrow_w.png) no-repeat center #00000020 !important;
  background-size: 30px !important;
  margin-top: 0 !important;
}
/*Шахматка*/
.container {
  position: relative;
  /*max-width: 998px;*/
  width: 100%;
  margin: 0 auto;
  padding: 1vw;
}
.card-columns {
  -webkit-column-count: 4; /*Выставляем кол-во колонок*/
  -moz-column-count: 4; /*Выставляем кол-во колонок*/
  column-count: 4; /*Выставляем кол-во колонок*/
  -webkit-column-gap: 1vw; /*Отступы между колонками*/
  -moz-column-gap: 1vw; /*Отступы между колонками*/
  column-gap: 1vw; /*Отступы между колонками*/
  orphans: 1; /*минимальное число строк в блочном контейнере*/
  widows: 1; /*минимальное количество линий на странице*/
}
.card {
  overflow: hidden;
  position: relative;
  display: inline-block;
  width: 100%;
  word-wrap: break-word;
  margin-bottom: 10px;
}
.card-reveal .card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  text-align: center;
  height: 100%;
  bottom: -100%;
  -webkit-transition: bottom .2s ease-in-out;
  transition: bottom .2s ease-in-out;
}
.card-reveal .card-img-top {
  -webkit-transition: -webkit-transform .5s ease-in-out;
  transition: -webkit-transform .5s ease-in-out;
  transition: transform .5s ease-in-out;
  transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out;
}
.card-reveal:hover .card-body {
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.card-reveal:hover .card-img-top {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}
.card-reveal .card-body .card-title {
  font-size: .75rem;
  margin: 0;
  text-transform: uppercase;
  font-weight: bolder;
  color: #fff;
}
.card-reveal {
  display: block;
/*  max-width: 500px;*/
  width: 100%;
  height: auto;
  aspect-ratio: 1.615;
  box-shadow: -2px 3px 5px 3px rgb(0 0 109 / 18%);
}

.card-reveal iframe {
width: 100%;
height: calc(100% - 1.9rem);
/*height: calc(--width*0.5619469026548673);*/
}
.drop-zone {
  background-color: #eee;
  margin-bottom: 10px;
  padding: 10px;
}
.drag-el {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 5px;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.info-card-live {
  display: flex;
  width: 100%;
  height: 1.9rem;
  align-items: center;
  justify-content: space-between;
  padding: 5px;
  cursor: grab;
  background-color: #b2b2b2;
  overflow: hidden;
}
.delete-card-live {
  width: 1.7rem;
  height: 1.7rem;
  background: url('/images/icon_cross_del.png') no-repeat center;
  background-size: 1.5rem;
  cursor: pointer;
}
.empty-list-live {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.move-icon {
  flex: 1 1 auto;
  width: 1.7rem;
  height: 1.7rem;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
  background: url('/images/icon_move.png') no-repeat center;
  background-size: 1.5rem;
  margin-left: 2.2rem;
}
.move_back_skew {
  width: 100%;
  height: 1.7rem;
  background: #dcdcdc;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
  border-radius: 5px;
  margin: 0 0 0 -2.2rem;
}
.back-home {
  padding: 0vh 4vw;
  color: #32bdf8;
}
.back-home a {
  display: inline-block;
  color: #32bdf8;
  padding: 0.5rem 0 0.5rem 3rem;
  background: url(/images/icon_back.svg) no-repeat 1.3rem center;
  background-size: 1.2rem;
}
.switch-btn {
  display: inline-block;
  width: 44px; /* ширина */
  height: 1.2rem; /* высота */
  border-radius: 19px; /* радиус скругления */
  background: #bfbfbf; /* цвет фона */
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  position: relative;
  transition-duration: 300ms; /* анимация */
}
.switch-btn::after {
  content: "";
  height: 16px; /* высота кнопки */
  width: 16px; /* ширина кнопки */
  border-radius: 17px;
  background: #fff; /* цвет кнопки */
  top: 3px; /* положение кнопки по вертикали относительно основы */
  left: 3px; /* положение кнопки по горизонтали относительно основы */
  transition-duration: 300ms; /* анимация */
  position: absolute;
  z-index: 1;
}
.switch-on {
  background: #118c4e;
}
.switch-on::after {
  left: 25px;
}
@media (max-width: 768px) {
  .card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }
}
/*Шахматка*/
/*aero quadro page finish*/
@media screen and (max-width: 1750px) {
  .oneitem_p {
    flex: 0 1 24%;
  }
  .mozaic_step a.s5 {
    display: none;
  }
  .tabhead {
    font-size: 0.9rem
  }
  .correct_size {
    width: 90vw !important;
    max-width: none !important;
  }
}
@media screen and (max-width: 1500px) {
  .oneitem_p {
    flex: 0 1 32%;
  }
  .mozaic_step a.s3 {
    display: none;
  }
  .mozaic_step a.s4 {
    display: none;
  }
  .led span {
    display: none;
  }
  .led {
    flex: 1;
  }
  .kn_tlaps, .kn_archive, .kn_link, .kn_geo, .kn_live {
    padding: 3px 1rem 3px 2.5rem;
  }
}
@media screen and (max-width: 1280px) {
  html {
    font-size: 15px;
  }
  .main_p.s4 .oneitem_p .play_p {
    height: 180px;
  }
  .vplay {
    width: 56vw;
    height: 31.5vw;
  }
  .aero_photo_box a {
    width: 31.3%;
    height: auto;
    margin: 1%;
  }
  .tabhead {
    font-size: 0.8rem
  }
  .switch-btn {
    width: 35px; /* ширина */
  }
  .switch-btn::after {
    height: 12px; /* высота кнопки */
    width: 12px; /* ширина кнопки */
  }
  .switch-on::after {
    left: 20px;
  }
}
@media screen and (max-width: 1000px) {
  .szslogo {
    display: none
  }
  .dommenu {
    background-color: #ededed;
    position: absolute;
    z-index: 100;
    right: 0;
    top: 30px;
    width: 100%;
    display: none;
    padding: 25px 5vw 25px 6vw;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25), 0 0 10px rgba(0, 0, 0, 0.12);
  }
  .dommenu.dis_play {
    display: block;
  }
  .dommenu ul li {
    font-size: 1.2rem;
    padding-left: 1.7rem;
  }
  .logo, .main, .main_p {
    flex: 1 1 100%;
    padding: 10px 2vw 10px 2vw;
  }
  .logo {
    background-position: 2vw center;
  }
  .topline1 {
    padding: 5px 5px 5px 2vw;
    font-size: 0.9rem;
  }
  .topline2 {
    padding: 5px 2vw 5px 5px;
    font-size: 0.9rem;
  }
  .kn_tlaps, .kn_archive, .kn_link, .kn_geo, .kn_live {
    padding: 3px 5px 3px 1.5rem;
    background-size: 1rem;
    height: 100%;
    background-position: 0.2rem center;
    font-size: 1rem;
  }
  .play {
    height: 80px;
    flex: 0 1 70px;
  }
  .desc {
    min-height: 80px;
    height: auto;
  }
  .play_p {
    height: 160px;
  }
  .camname {
    font-size: 1.3rem;
    padding: 0 0.7rem;
  }
  .camname span {
    display: block
  }
  .lines_mozaic {
    padding: 10px 2vw;
  }
  /*gamburger*/
  .c-hamburger {
    display: block;
    position: absolute;
    z-index: 150;
    overflow: hidden;
    right: 2vw;
    margin: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    font-size: 0;
    top: 50px;
    text-indent: -9999px;
    appearance: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
  }
  .c-hamburger:focus {
    outline: none;
  }
  .c-hamburger span {
    display: block;
    position: absolute;
    top: 18px;
    left: 0;
    height: 4px;
    width: 40px;
    background-color: #333;
  }
  .c-hamburger span::before, .c-hamburger span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #333;
    content: "";
  }
  .c-hamburger span::before {
    top: -12px;
  }
  .c-hamburger span::after {
    bottom: -12px;
  }
  .c-hamburger--htx {
    background: none;
  }
  .c-hamburger--htx span::before, .c-hamburger--htx span::after {
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s;
  }
  .c-hamburger--htx span::before {
    transition-property: top, transform;
  }
  .c-hamburger--htx span::after {
    transition-property: bottom, transform;
  }
  /* состояние active при открытом меню  */
  .c-hamburger--htx.is-active {
    background: none;
  }
  .c-hamburger--htx.is-active span {
    background: none;
  }
  .c-hamburger--htx.is-active span::before {
    top: 0;
    transform: rotate(45deg);
  }
  .c-hamburger--htx.is-active span::after {
    bottom: 0;
    transform: rotate(-45deg);
  }
  .c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after {
    transition-delay: 0s, 0.3s;
  }
  .logo h1 {
    padding: 0vh 50px 2vh 0;
    margin-top: 13px;
    font-size: 1.5rem;
  }
  /*  .tlaps_win .close_win {
    top: 10px;
  }
  .tlaps_win .win_box {
    padding: 0;
  }
  .tlaps_win .win_box {
    width: 98%;
  }
  .tlaps_win .m_win {
    padding: 60px 0 0 0;
    height: 100%;
  }*/
  .m_win {
    padding: 35px 4% 10px;
  }
  .close_win {
    top: 10px;
    right: 10px;
  }
  .tlaps_win .correct_size .close_win {
    top: 0;
    right: 0;
    margin-right: 0;
    margin-top: -45px;
  }
  .win_box h3, .win_box h1 {
    margin: 20px 0 0px 0;
  }
  .input_box {
    background: url('/images/back.png') #ececec center;
    background-size: cover;
  }
  a.a_admin, a.a_live {
    display: none
  }
}
@media screen and (max-width: 768px) {
  .kn_tlaps, .kn_archive, .kn_link, .kn_geo, .kn_live {
    font-size: 0.9rem;
    padding: 0.2rem 5px 0 1.5rem;
  }
  .camnavi {
    /*    height: 1.5rem;*/
  }
  .kn_link, .led, .kn_geo, .kn_live {
    flex: 0;
  }
  .oneitem_p {
    flex: 0 1 49% !important;
    font-size: 15px;
  }
  .pmenu, .action .pmenu {
    background-size: 1.6rem;
  }
  .kp_archive, .kp_tlaps, .kp_link, .kp_geo {
    background-size: 1.4rem;
  }
  .camnavi_p {
    bottom: 2rem;
  }
  .main_p .play_p {
    height: 160px;
  }
  .oneitem .led {
    padding: 0 10px 0 10px;
  }
  .oneitem_p .led {
    padding: 0 20px 0 10px;
    line-height: 2;
  }
  .kn_geo, .kn_link, .kn_live {
    padding-right: 15px
  }
  .kn_link span, .led span, .kn_geo span, .kn_live span {
    display: none
  }
  .lines_mozaic {
    font-size: 0.9rem;
  }
  .mozaic_step {
    display: none;
  }
  .camname {
    font-size: 1.2rem;
    padding: 0 0.7rem 0.2rem;
    line-height: 1.5rem;
  }
  .camname span {
    font-size: 1.1rem;
  }
  .b_win .m_win, .form_win .m_win {
    padding: 35px 4% 10px;
    width: 95%;
    /*	height: 95%;*/
    max-width: inherit;
    min-width: inherit;
  }
  .win_box {
    width: 100%;
  }
  .btn {
    width: 65%;
  }
  .win_box .btn.kn-1 {
    width: 32%;
  }
  .win_box .btn.kn-2 {
    width: 68%;
  }
  .topline1 {
    display: none;
  }
  .topline2 {
    padding: 5px 2vw 5px 0;
    font-size: 0.7rem;
  }
  .a_logout {
    background-size: 1rem;
  }
  .topline2 a {
    padding: 0px 0 0 1.8rem;
    margin-left: 0.5rem;
  }
  .aero_select {
    flex: 3;
  }
  .vplay {
    width: 92.4vw;
    height: 52vw;
  }
  .aero_photo_box a {
    width: 48%;
    height: auto;
    margin: 1%;
  }
  .aero_box {
    display: block;
    margin: 2vh 0;
  }
  .dates_box select {
    padding: 1vh 2%;
    box-shadow: 0px 0px 7px #ccc;
    height: auto;
    margin-bottom: 1vh;
  }
  a.a_admin {
    display: none
  }
  .blueimp-gallery > .close {
    top: 90% !important;
    /* right: 50% !important; */
    left: 50% !important;
    margin-left: -20px !important;
  }
  @media screen and (max-width: 480px) {
    .play {
      height: 75px;
      flex: 0 1 65px;
    }
    .desc {
      min-height: 60px;
      height: auto;
    }
    .kn_tlaps, .kn_archive {
      padding: 0.2rem 3px 0 1.2rem;
      background-size: 0.8rem;
      font-size: 0.8rem;
      flex: 1 1 25%;
    }
    .kn_link, .kn_geo, .kn_live {
      padding: 5px 0;
      background-position: center;
      background-size: 0.8rem;
      flex: 1;
    }
    .camnavi .led {
      -webkit-transform: skew(0);
      -moz-transform: skew(0);
      -o-transform: skew(0);
      margin: 0;
      padding: 5px 0;
      flex: 1;
    }
    .map {
      padding: 0 2vw 0 23px;
    }
    .the_list span, .the_mosaic span {
      margin: 0 0px;
      width: 35px;
    }
    .win_box h3 {
      margin: 8px 0 0px 0;
      font-size: 1rem;
    }
    .play_any div, .play_any_7 div {
      width: 60px;
      height: 60px;
    }
    .text_any {
      padding: 5px 10px;
      font-size: 1.2rem;
    }
    .any {
      margin: 8vh 0 2vh;
      width: 100%;
    }
    .b_win .close_win {
      top: 10px;
      right: 10px;
    }
    a.a_admin {
      display: none
    }
  }