html {
background-color:#454545;
}

body {
background-color:#454545;
}

.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;
}

.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%;
    background:#303030;
    overflow: hidden;
    border-radius: 0.5em;
    border: 1px solid white;
}

.square:hover {
background-color:#2c2c2c;
border: 1px solid grey;
}


@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: 1.3em;}
}

.content .rs {
overflow: hidden;
min-height: 8vw;
min-width: 8vw;
}

/* 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%;

}


.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;
    min-height:14vw;
    max-height:100%;
    max-width:100%;
}
.content-empty .rs-empty{
    width: auto;
    height: 12vw;
    max-height: 100%;
    max-width: 100%;
    filter: invert(1);
    opacity: 0.6;
    margin-top: 0.4rem;
}

/*  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;}