html,
        body {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            overflow: hidden;
            padding: 0 0 0 0;
            margin: 0 0;
        }

        body {
            background-image: url('./icons/background-image.png');
            background-size: cover;
            background-position: bottom center;
            background-repeat: no-repeat;
        }

        .logo-small {
            background-image: url('./icons/logo-small.png');
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            bottom: 25px;
            left: 50%;
            margin-left: -200px;
            z-index: 11;
            width: 400px;
            height: 300px;
            filter: drop-shadow(0 0 8px white);
        }

        .dx-tile {
            position: absolute;
            color: rgba(0, 0, 0, .87);
            background-color: transparent;
            border: 1px solid rgba(224, 224, 224, .6);
            text-align: left;
        }

        .icon-tile {
            background-position: center !important;
            background-size: contain !important;
            background-repeat: no-repeat !important;
            border-radius: 3px 3px 3px 3px !important;
            width: 75px !important;
            height: 75px !important;
        }

        .dx-tile,
        .dx-item.dx-tile.dx-state-focused {
            background-color: transparent !important;
            border-color: transparent;

        }

        .dx-item.dx-tile {
            border-color: transparent;
        }

        .dx-item.dx-tile:hover {
            border: solid 1px !important;
            border-color: #ff5722 !important;
            border-radius: 3px 3px 3px 3px;
            transition: border-color .3s ease-in-out;
        }

        .dx-multiview-wrapper {
            width: 100%;
            height: 100%;
        }

        .dx-tile-item {
            border: unset !important;
        }

        #title-container {
            width: 100%;
            height: 35px;
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            justify-content: flex-end;
            font-size: 25pt;
            font-weight: 100;
            margin-right: -5px;
            padding-right: 5px;
            padding-left: 5px;


        }

        #title-material-line {
            height: 1px;
            width: 0px;
            position: absolute;
            right: 0px;
            transition: width .3s ease-in-out;
        }

        #title-material-line.grow {
            width: 350px;
        }


        .bg-fade {
            opacity: 0;
            transition: opacity 1s ease-in;
        }

        .bg-fade.visible {
            opacity: 1;
        }

        #desktop-control-container {
            opacity: 0;
            height: 35px;
            padding-right: 25px;
            padding-left: 25px;
            position: absolute;
            z-index: 100;
            left: 0px;
            right: 0px;
            bottom: 25px;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;

        }

        #desktop-control-container.visible {
            opacity: 1;
        }