@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/icons.woff2) format('woff2');
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

.micon, .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
html, body{
   font-family: 'Roboto-Regular';
    -webkit-touch-callout: none; 
    -webkit-user-select: none;
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    color: #6c6c6c;
 
  }
*:focus {
    outline: none;
}
.signageplay{
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  color:#fff;
}
  .fullscren, .settings, .refresh, .playtoggle{
    height: 100px;
    width: 100px;
    position: fixed;
    border:1px;
    z-index:999;
    cursor: pointer;
  }
  .fullscren:hover, .settings:hover, .refresh:hover, .playtoggle:hover{
    border:1px solid rgb(90, 90, 90);
  }
  .prev, .next{
    position: fixed;
    z-index:999;
    top:0px;bottom:0px;
    width: 80px;
    height: 100%;
    cursor: pointer;
  }
 
  .prev{
    left:0px;
  }
  .next{
    right: 0px;
  }
  .fullscren{
      right:0px;
      top:0px;
  }
  .settings{
    left: 0px;top:0px;
  }
  .refresh{
      bottom:0px;right:0px;
  }
  .playtoggle{
    bottom:0px;left:0px;
  
  }
  .playtoggle span::after, .settings span::after, .refresh span::after, .fullscren span::after{
    font-family: 'Material Icons';
    color:rgb(90, 90, 90);
    font-size:50px;
    margin-left:25px;
    line-height: 100px;
  }

  .playtoggle:active, .settings:active, .refresh:active, .fullscren:active, .prev:active, .next:active{
    background: rgba(90, 90, 90, 0.2);
  }

  .prev span::after, .next span::after{
    font-family: 'Material Icons';
    color:rgb(90, 90, 90);
    font-size:50px;
    position: absolute;
     top:45%;
  }
  .prev:hover span::after{
   /* content: 'keyboard_arrow_left'; */
    left:10px;
  } .next:hover span::after{
   /* content: 'keyboard_arrow_right'; */
    right:10px;
  }
  
  .prev.active span::after{
    content: 'keyboard_arrow_left'; 
    left:10px;
  } .next.active span::after{
    content: 'keyboard_arrow_right'; 
    right:10px;
  }
  
  .refresh:hover span::after{
    content: 'refresh';
  }
  .fullscren:hover span::after{
    content: 'fullscreen';
  }
  .settings:hover span::after{
    content: 'settings';
  }
  .playtoggle:hover span::after{
    content: 'pause';
  }
  .playtoggle.active:hover span::after{
    content: 'play_arrow';
  }