body { 
    background:#000;
   font-family:arial;
   color:#888;
   min-width:300px;
   min-height:300px;
}
body
{
   font-size:12px;
   // background: url(background.png) no-repeat fixed 100% 100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   padding:0;
}
.scrollable {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
      overflow:scroll;
}

.app-padding {
   padding:5px;
}
.appbox {
            background-color:#aaa;
            color:#000;
            border-radius:5px;
            padding:10px;
            width:100%;
            margin-bottom:5px;
            margin-left:0px;
            margin-top:0px;
            margin-right:10px;
            cursor:pointer;
}


.cinefull {
   border-style:none;
}
.splash-guard {
   background-color:#000;
   height:100v; 
   padding:20px;
   border-radius:20px;
   margin-left:5px;
   margin-top:5px;
}
.server {
   opacity:1.0;
   width:180px; 
   height:180px; 
   margin-left:5px;
   margin-top:5px;
   color:#aaa;
   border-radius:10px;
   background-color:#444;
   padding:10px;
   cursor: pointer;
   float:left;
}

.info {
   opacity:1.0;
   width:100%;
   margin-0;
   margin-0;
   margin-left:0px;
   margin-right:0px;
   margin-top:0px;
   margin-bottom:5px;
   color:#fff;
   NOTborder-radius:10px;
   background-color:#444;
   background-color:#000;
   padding:10px;

}
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}
#server-iframe { 
  border-style:none;
  width:100%;
  height:100v;
}
.animate-show {
  opacity: 1;
}
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s 0s;
  transition: all linear 0.5s 0s;
}
.animate-show.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s 0s;
  transition: all linear 0.5s 0;
}

.animate-show.ng-hide {
  opacity: 0;

}

.pg  {
   width:100%;
   position:absolute;
   padding:0px;
   overfloat:hide;


}


/* app css stylesheet */

body {
    background-color:#000;
    color:#ddd;
    font-family: neuhelvetica, sanserif, arial;
    margin: 0;
    padding: 0;
margin:0;
    padding: 0;
    width:100%;
body { overflow-x: hidden; }
}
a {
    color:#dad;
    text-decoration: none;

}

.cine-btn {
   border-style:solid;
   border-color:#fff;
   border-width:1px;
   padding: 10px;
   border-radius:10px;
   background-color:#aaa;
   color:#000;
   margin-right:5px;
}

::-webkit-scrollbar {
    -webkit-border-radius: 1ex;
    height: 12px;
        width: 12px;
        background: #000;
    }
::-webkit-scrollbar-thumb {
    background: #888;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(1, 1, 1, 0.75);
}
::-webkit-scrollbar-corner {
    background: #000;
}


.menu {
  list-style: none;
  border-bottom: 0.1em solid black;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

.cinput { margin:2px; vertical-align: bottom; width:auto; height:38px; font-size: 140%; padding-left:10px;padding-right:10px; border-style:none; border-radius:5px; background-color:#aaa; color:#222; }
}
.cmbtn { width:50px; padding:0px; height:36px; margin:0px; font-size: 150%; border-style:none; border-radius:5px; background-color:#333; color:#aaa; }
.cmbtn:hover { background-color:#555; color:#aaa; }
.cmbtn:active { background-color:#999; color:#222; }
.spanel  {
 padding:10px;
 font-size: 100%;margin:5px; border-style:none; border-radius:5px; background-color:#999; color:#333; }


.sbtn-sm { height:42px; font-size: 120%;margin:5px; border-style:none; border-radius:5px; background-color:#999; color:#333; }

.sbtn-sm:hover { background-color:#555; color:#aaa; }
.sbtn-sm:active { background-color:#999; color:#222; }

.sbtn { width:160px; height:82px; font-size: 100%;margin:5px; vertical-align:bottom; border-style:none; border-radius:5px; background-color:#999; color:#333; }

sbtn img {
    max-width: 50%;
    max-height: 50%;
    height: auto;
}


.fa-2x {
    font-size: 25px;
    line-height: 10px; 
}
.sbtn:hover { background-color:#555; color:#aaa; }
.sbtn:active { background-color:#999; color:#222; }
.cspc { display:block; float:left; }
.cselect { cursor:pointer; padding:10px; margin:2px; height:48px; font-size: 120%; border-style:none; border-radius:5px; background-color:#aaa; color:#000; }
.clabel { font-size: 150%;}
.cbtn { min-width:64px; cursor:pointer; padding:10px; margin:2px; height:48px; font-size: 120%; border-style:none; border-radius:5px; background-color:#333; color:#fff; }
.cbtn:hover { background-color:#555; color:#aaa; }
.cbtn:active { background-color:#999; color:#222; }
.cmenu { position:relative; width:150px; font-size: 150%; border-style:none; border-radius:5px; background-color:#333; color:#aaa; }
.ritem.img { width:250px;}
.csettings {display:block; width:100%;padding:0;border-width:0 ; position:absolute;  z-index:100; opacity:1.; margin-top:2px; margin-bottom:5px; border-radius:5px; background-color:#222; color:#aaa; }


.logo {
    width:310px;
    height:180px;
    overflow:hidden;
    background-color:#888;
    border-radius:5px;
 
}
@media (max-width: 320px) { 

}
@media (max-width: 480px) { 
.logo {
    width:568px;
    height:180px;
}

}
@media (max-width: 568px) { 
.logo {
    width:568px;
    height:180px;
}
}
@media (max-width: 640px) { 
   .pg {
	padding:0px;
   }
}


* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

input[type="range"]{
    background: rgb(30, 30, 30);
    width: 130px;
    height: 45px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}

input[type="range"]:hover{
    background: rgb(30, 30, 30);
    width: 130px;
    height: 45px;
    -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}

input[type="range"]::-webkit-slider-thumb{
   -webkit-appearance:none !important;  
   width:15px;
   height:45px;
   -webkit-appearance: none;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border:1px solid black;

    background: #a90329;
    background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019));
    background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
    background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
    background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
    background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );
 }

input[type="range"]::-webkit-slider-thumb:hover{

   -webkit-appearance:none !important;  
	   width:15px;
	   height:45px;
	   -webkit-appearance: none;
	    border-radius: 8px;
	    -moz-border-radius: 8px;
	    -webkit-border-radius: 8px;
	    background-color:rgb(56, 13, 13);
	    border:1px solid black;

	    background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
	    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254));
	    background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
	    background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
	    background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
	    background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
	    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );
	 }


.cinebutton {    display: inline; min-width:64px; cursor:pointer; padding:10px; margin:2px; height:48px; font-size: 120%; border-style:none; border-radius:5px; background-color:#333; color:#fff;  }