::-webkit-scrollbar{width:13px}::-webkit-scrollbar-track{background:#cccccc;border-radius:0px}::-webkit-scrollbar-thumb{background:#2e2e2e;border-radius:0px}

body, html, body *{
    padding:0;
    margin: 0;
    font-family:"Open Sans", sans-serif;
    font-size:14px;
}

header{
    background-color: #121d3a;
    color: #fff;
    position: relative;
    width: 100%;
    top:0;
    margin: 0!important;
}

footer{
    background-color: #121d3a;
    color: #fff;
    height: 60px;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px;
}

body > .wrapper
{
    height: 83vh;
    height: calc(100vh - 130px);
    width:100%;
    overflow-y:auto;

}

body > .wrapper:before{
	 content: "";
	 background-image: url(images/splash-page-cover.png);
	 background-size: auto 130%;
	 position: absolute;
	 top: 0px;
	 right: 0px;
	 bottom: 0px;
	 left: 0px;
	 opacity: 0.05;
	 z-index:-1;
	 background-repeat: no-repeat;
	 background-position: center center;
}

.content_height{
	height: 83vh;
	height: calc(100vh - 130px);

}

nav .navbar-brand{
	height: 50px;
	width: 180px;
	display: inline-block;
	padding: 0;
}

nav .navbar-brand img{
	height:100%
}

@media(max-height:512px){
    header{
        height: 60px;
    }
    footer{
        height:50px;
    }

    body > .wrapper{

        height:70vh;
        height:calc(100vh - 110px);

    }

	.content_height{
		height: 70vh;
		 height:calc(100vh - 110px);
	}

	nav .navbar-brand{
		height: 40px;
		width:  120px;
		display: inline-block;
		padding: 0;
	}
}

input, select, textarea{
    padding:10px 8px;
    min-width:220px;
    border-radius:4px;
    border:none;
    background:rgba(0,0,0,0.1);
}

input[type="checkbox"],
input[type="radio"]{
	min-width:16px;
}


form label{
    display:block;
}

.flex-containter{
    display:flex;
    justify-content: center;
    align-items: center;
}

.flex-containter .content{
    margin-top:9vh;
}

body.login_page form{
    max-width: 600px;
    align-self: flex-start;
}

body.login_page form label{
    display:block;
}

footer:before{
    content:"CodeAudio Streaming";
    position:fixed;
    bottom:2px;
    left:2px;
    font-style:italic;
    font-weight:bold;
    color:silver;
    font-size:12px;
}


.form-group input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 1.5em;
  width: 1.5em;
  z-index:1;
}


.checkmark {
  display:inline-block;
  height: 1.5em;
  width: 1.5em;
  margin-bottom:-0.3em;
}

input[type="checkbox"] ~ .checkmark {
  background-color: rgba(0,0,0,0.1);
}

input[type="checkbox"]:hover ~ .checkmark {
   background-color: rgba(0,0,0,0.2);
}

.form-group input[type="checkbox"] ~ .checkmark{
  margin-right:4px;
}

.checkmark:after {
  position: absolute;
  display: inline-block;
  text-align:center;
  height: 1.5em;;
  width: 1.5em;;
  line-height:1.5em;
}

/* Show the checkmark when checked */
.form-group  input:checked ~ .checkmark:after {
  content:"\2714";
  color: black;
}

/* Style the checkmark/indicator */
.form-group  .checkmark:after {

}

.link_button{
  border:none;
  color:#27a4f6;
  background:none;
  margin:10px 0;
}

.active_user{
  float:right;
  line-height:15px;
  max-height:8px;
}

.active_user > *{
  font-size:12px;
  display:block;
  text-decoration:none;
  font-style:italic;
  line-height:9px;
}

.active_user a{
  color:#2bbdff;
  text-decoration:none;
}

.active_user a:hover{
  color:#0c9dde;
  text-decoration:none;
}

.active_user a i{
  display:inline-block;
  width:26px;
  height:26px;
  line-height:26px;
  font-weight:bold;
  background:rgba(0,0,0,0.2);
  text-align:center;
  border-radius:10px;
  margin-top: 5px;
}



@media(max-width:720px){


}

#my_devices{
	height: 85%;
	overflow-y: auto;
	height: calc(100% - 35px);
}

.system_message,
.system_error{
	font-style:italic;
	background:rgba(0,0,0,0.05);
	padding:4px;
}

.system_message{
    color:#014401;
}

.system_error{
	color:red;
}

#dashboard_sidepanel h4{
	text-align:center;
	color: #585353;
	font-size:16px;
	background: rgba(0,0,0,0.2);
	padding: 13px 4px;
	margin-top: 10px;
}

nav .navbar-brand img{
}

nav .search-box{
	display:flex;
}

nav .search-box input{
	color:white;
}

nav .nav-item.current{
	background:rgba(0,0,0,0.1);
}


.data_loader_wrapper{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:none;
	z-index:9999;
	background: rgba(0,0,0,0.3);
	padding-top: 33vh;
}

body.data_buissy .data_loader_wrapper{
	display:block;
}

body.data_buissy {
	/*overflow:hidden;*/
}

.data_loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
  }
}


BODY.grid_view .wrapper{
	overflow:hidden;
}



toolbox{
	height: 40px;
	background: #4e4e4e;
	width: 100%;
	display: block;
	margin: 0;
	padding:3px;
}

toolbox *{
	color:white;
}

toolbox button{
	min-width:100px;
}

toolbox > span{
	margin:0 3px;
	padding:0
}

toolbox > span input{
	padding:5px
}

#cell_editing_box{
	float:right;
}

#cell_editing_box *{
    font-size:12px;
    color:silver;
}

#cell_editing_box input{
	position:relative;
	top:+3px;
}


.modal-body .form-group{
	display:flex;
	align-items: stretch;
}

.modal-body .form-group label{
	display:inline-block;
	min-width:140px;
}

.bg-dark .modal-body input,
.bg-dark .modal-body select,
.bg-dark .modal-body textarea{
    width:80%;
    width:calc(100% - 140px);
   background:#fbfbfb;
}

.jump_messages{
	position:fixed;
	right:25px;
	bottom: -150vh;
	z-index:99999999;
}

.jump_message{
	display:inline-block;
    width:40vw;
	min-width:200px;
	max-width:640px;
	position:fixed;
	right:25px;
	bottom: -150vh;
	max-height:70vh;
	overflow-y:scroll;
	background:rgba(181, 226, 253, 0.75);;
	color:#033f73;
	padding:10px;
	line-height:11px;
	font-size:12px;
	z-index:1001;
	font-weight:bold;
	height:auto;
	border-radius:6px;
}

.jump_message.error{
	color:red;
}

.jump_message.show-floating{
	animation-duration: var(--messgage-duration);
	animation-name: floating-message-box;
}

@keyframes floating-message-box{
	5% { bottom:30px;}
	90% {bottom:30px;}
	100% {bottom:-150vh;}
}

.jump_messages > .show-floating:nth-child(2n) {
	transform: translate(0px, -50px);
}

.jump_messages  > .show-floating:nth-child(3n) {
	transform: translate(0px, -100px);
}

.jump_messages > .show-floating:nth-child(4n) {
	transform: translate(0px, -150px);
}

.jump_messages > .show-floating:nth-child(5n) {
	transform: translate(0px, -200px);
}

.readonly_data,
.readonly_data > *{
	display:inline-block;
}

.readonly_data > *{
	margin:4px;
	font-size:12px;
	font-style:italic;
}

.validation_message{
	color:red!important;
	font-size:11px;
	display:block;
	margin:1px;
	padding:0;
	position: absolute;
	margin-top: -15px;
}

.readonly_data.noval{
	display:none;
}

.readonly_data label:after{
	content:":";
}

.modal.adding .onupdate,
.modal.updating .oncreate{
	display:none;
}

.modal.adding .oncreate_show,
.modal.updating .onupdate_show{
	display:block;
}

.modal.adding .oncreate_hide,
.modal.updating .onupdate_hide{
	display:none;
}

#cnt_picker_map{
	height:70vh;
}


.map_picker_current{
	display:inline-block;
}

.map_picker_current label{
	font-size:12px;
	padding-right:6px;
	color:silver;
}

.map_picker_current input{
	font-size:13px;
	padding:3px;
	max-width:150px;
	min-width:100px;
	color:white;
	text-align:center;
}

.doc{
	color:#33aee8;
	border:1px dotted rgba(0,0,0,0.6);
	padding:3px;
	border-radius:3px;

}

.doc:hover{
	color:white;
}

.doc i{
	background:rgba(0,0,0,0.2);
	border-radius:20px;
	display:inline-block;
	width:20px;
	height:20px;
	text-align:center;
	margin-left:3px;
}

#my_devices .box-device {
	padding:15px;
	border:1px dotted silver;
	margin: 0px;
	background: #e6b2b2;
	margin-bottom:7px;
}

#my_devices .box-device[status="active"] {
	background: #d5f5ff;
}

#my_devices .box-device[status*="active:"] {
	background: #d5ffd9;
}


#my_devices > div p{
	padding:3px;
	margin:0;
	font-style:italic;
}

#my_devices .box-device > div[prop1=""] .cmd-open-device{
	opacity:0.4;
	pointer-events:none;
}

#my_devices .box-device > div[prop1=""] *[bind_html]:before{
	content:"-";
}

.presentable-2{
    color:#003d8a;
}

.presentable--2{
	color:red;
}

.presentable-1{

}

.presentable--1{

}

.inmap_cmd button{
	min-width:100px;
	margin-right:10px;
	float:right;
}

.inmap_info{
	font-weight:bold;
	padding:1px;
	margin:1px;
}

.inmap_status{
	font-weight:bold;
	padding:1px;
	margin:1px;
	border:1px solid gray;
	border-radius:3px;
	background: #fffff7;
}

.inmap_address,
.inmap_person,
.inmap_email,
.inmap_phone{
	padding:1px;
	margin:1px;
	font-size:12px;
}

*[clickref]{
	cursor:pointer;
}

.cancel_pl{
	background:red;
	padding:1px 8px;
	border-radius:6px;
	color:white;
	font-size:11px;
	float:right;
}

.cancel_pl:hover{
	text-decoration:none;
	color:white;
}

.media_item_status_row,
.device_status_row{
	padding:5px;
	border-bottom:1px dotted gray;
	border-top:1px dotted gray;

}

.subgrid-modal .modal-body{
	min-height:75vh;
    min-height:calc(100vh - 180px);
	padding:0;
}

.subgrid-modal .modal-body canvas{
	position:absolute;
}

.user_playlist{
	margin:0;
	padding:4px;
	line-height:28px
}

.user_playlist *[bind_html="playlist_name"]{
	display:inline-block;
	min-width:200px;
}

.user_playlist *[bind_html="playlist_url"]{
	font-size:12px;
	font-style:italic;
}


.user_playlist *[type="checkbox"]{
	margin:5px 20px 15px;
}

.device_playlists > .user_playlist:nth-child(odd){
	background:rgba(0,0,0,0.05)
}

.device_settings{
	padding:10px;

}

.device_settings h4{
	margin-bottom:25px
}

.device_settings h5{
	font-style:italic;
	color:#797777;
}



.box-device button{
	margin:3px;
}

@media only screen and (max-width:768px){
    .box-device *{
        font-size:10px;
    }
}

.device_settings h4.device_title {
	background:rgba(0,0,0,0.2);
	padding:10px;
	word-break: break-all;
	color: #585353;
}

*[bind_html="device"]{
	word-break:break-all;
}

#dashboard_sidepanel{
	width:98%;

}
/*
body.modal-open footer{
    z-index:-1;
}
*/

@media (max-width: 991px){
  .navbar-collapse .nav-item a{
  	padding:15px 5px;
  	border-bottom:1px dotted white;
  }

  toolbox{
  	height:auto;
  }

  toolbox > button{
  	margin:3px;
  }
}


/* custom new */
.row-connected { background-color: #a1ff79; }
.row-connected-logged-in { background-color: #5bbf36; }
.row-disconnected { background-color: #ff7979; }
.row-header { background-color: #6C757D; color: white; }
.js-device-row:hover { background-color: lightgray !important; }