html {
}

body {
background-size: 100vw 100vh!Important;
background: rgba(28,4,-1);
height: -webkit-fill-available;
}

.backtodash {
   font-weight: 800; 
   color: rgba(255,255,255,0.9)!important; 
   width: auto!Important; 
   word-spacing: -0.06em; 
   margin-left: 8px;
}

.content-empty {
   position: absolute;
   height: 90%;
   width: 90%;
   padding: 5%;
   background-image: url(../../dashboard/img/icons/appstore-add.png);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 50% 50%;
   opacity: 0.2;
}


*:focus {
    -webkit-tap-highlight-color: transparent!Important;
    outline: none!Important;
    -ms-touch-action: manipulation!Important;
    touch-action: manipulation!Important;
}

a{
-webkit-tap-highlight-color: transparent;
}

::selection {
    background: transparent!important;
}

::-moz-selection {
    background: transparent!important;
}

ul.breadcrumb li span:hover {
    color: white!Important;
    opacity: 1;
    margin-top: 0px!important;
}

.categories-text {
    position: relative;
    margin: -1em auto -1em auto;
    background: transparent;
    max-width: 100%;
    padding: 1em;
    font-size: 1.2rem;
    border-radius: 1em;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 100;
    height: 1px;
    text-align: center;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    opacity: 0.5;
    zoom: 0.8;
    padding-top: 1em;
}

@media screen and (max-width:500px) {
.categories-text {
   opacity:0;
}
}

@media screen and (min-width:386px) and (max-width:502px) {
.content .rs {
height: 5em;
}
}

@media screen and (max-width:312px) {
.content .rs {
height: -2em;
}
}

@media screen and (min-width:903px) {
.categories-text {
   font-size:2vw;
}
}

@media screen and (min-width:1135px) {
.categories-text {
   margin-top:0em;
}
}

@media screen and (min-width:502px) and (min-width:902px) {
.categories-text {
   padding-top:0em;
}
}

.square {
    float: left;
    position: relative;
    width: 15.66%!important;
    padding-bottom: 17%;
    margin: 1.99%;
    overflow: hidden;
    border-radius: 0.5em;
    border:solid rgba(255,255,255,0.3) 1.5px;
}

.square:hover {
background-color: rgba(255,255,255,0.3)!important;
}


@media screen and (max-width: 900px) {
.square {
    min-width: 25vw;
    min-height: 12vw;
    line-height: 8vw;
}

.square-empty {
    min-width: 25vw;
    line-height: 8vw;
}

.categories-text {font-size:3.7vw;line-height: 1em;}
}

.content .rs {
overflow: hidden;
min-width: 8vw;
max-height: 19%!important;
    height: 89px;
    min-height: calc(3vw + 3.3em)!important;
    min-width: 10vw;
    padding: 0px;
    margin: 0px;
    opacity: 1;
    overflow: hidden;
    max-width: 53%!important;
    opacity:0.6;
}

.container .box .box-cell {
    display:table-cell;
    width:28vw;
    padding:20px 45px 13px 20px;
}

.container .box .box-cell.box1 {
    background:transparent;
    text-align:left;
    position:fixed;
    min-heigh:10vh;
}

.container .box .box-cell.box2 {
    background: transparent;
    font-size: 2rem;
    text-align: center;
    padding-left: 100px;
    font-weight: bold;
}

.container .box .box-cell.box3 {
    background:transparent;
    text-align:right;
    position: relative;
}


/* Sets the dimensions of the entire scrollbar */
body::-webkit-scrollbar {
    width: 30px;
    height: 30px;
}
/* The grabbable scrollbar button  */
html::-webkit-scrollbar-thumb {
    background: -webkit-gradient(linear,left top,left bottom,from(#ff8a00),to(#e52e71));
    background: linear-gradient(180deg,#ff8a00,#e52e71);
	 border-radius: 30px;
    box-shadow: inset 2px 2px 2px hsla(0,0%,100%,.25), inset -2px -2px 2px rgba(0,0,0,.25);
}

/* The vertical scrollbar background */
html::-webkit-scrollbar-track {
    background: linear-gradient(90deg,#201c29,#201c29 1px,#100e17 0,#100e17);
}


.square-empty {
    float: left;
    position: relative;
    min-width: 16%;
    padding-bottom: 16%;
    margin: 1.66%;
    background-color:rgba(255,255,255,0.02);
    overflow: hidden;
    border-radius: 0.5em;
    border:2px dotted rgba(255,255,255,0.4);
opacity:0.4;
max-height:0em;
}

.content {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;
    background:rgba(25,7,3);
}


.table{
    display:table;
    width:100%;
    height:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
}
.table-empty{
    display:table;
    width:100%;
    height:100%;
}
.table-cell-empty{
    display:table-cell;
    vertical-align:middle;
}


/*  For list */
ul{
    text-align:left;
    margin:5% 0 0;
    padding:0;
    list-style-position:inside;
}
li{
    margin: 0 0 0 5%;
    padding:0;
}


/*  For responsive images */
.content .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
    opacity:1;
}
.content-empty .rs-empty{
    width:auto;
    height:50px;
    max-height:90%;
    max-width:100%;
}

/*  For responsive images as background */

.bg{
    background-position:center center;
    background-repeat:no-repeat;
   /*  background-size:cover;  you change this to "contain" if you don't want the images to be cropped */
    color:#1a1a1a;
    background-blend-mode: soft-light;
    background-size: 90% 90%;
}


.bgimg1{
    background-position:center center;
    background-repeat:no-repeat;
   /*  background-size:cover;  you change this to "contain" if you don't want the images to be cropped */
    color:#1a1a1a;
    background-blend-mode: soft-light;
    background-size: 140% 140%;
}

.img1{
    background-image: url('dashboard/img/icons/emby.png');
    background-blend-mode: hue!important;
/*  following just for the demo */
}


.bgimg2{
    background-position:center center;
    background-repeat:no-repeat;
   /*  background-size:cover;  you change this to "contain" if you don't want the images to be cropped */
    color:#1a1a1a;
    background-blend-mode: soft-light!important;
    background-size: 90% 90%;
}

.img2 {
    background-image: url('../img/icons/remote-control.png');
    background-blend-mode:hue;
}



.bgimg3{
    background-position:center center;
    background-repeat:no-repeat;
   /*  background-size:cover;  you change this to "contain" if you don't want the images to be cropped */
    color:#1a1a1a;
    background-blend-mode: soft-light;
    background-size: 90% 90%;
}

.img3 {
    background-image: url('../img/icons/09-512.png');
    background-blend-mode:hue;
}

body {
    font-size:20px;
    font-family: verdana, sans-serif;
    color: #fff;
    text-align:center;
}
p{
    margin:0;
    padding:0;
    text-align:left;
}

.numbers{
    font-weight:900;
    font-size:100px;
}

#bottom {
    clear:both;
    margin:0 1.66%;
    width:89.68%;
    padding: 3.5%;
    background-color:#1E1E1E;
    color: #fff;
}
#bottom p{
    text-align:center;
    line-height:2em;
}
#bottom a{
    color: #000;
    text-decoration:none;
    border:1px solid #000;
    padding:10px 20px 12px;
    line-height:70px;
    background:#ccc;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#bottom a:hover{
    background:#ECECEC;
    border:1px solid #fff;
}

a:link, a, a:hover {color:white!Important;text-decoration:none!important;}