:root {
  --grey-color: #414141;
  --light-grey-color: #525252;
  --blue-color: #15b7d5;
  --blue-hover-color: #1d99af;
  --blue-depressed-color: #338897;
  --sub-text: #cccccc;
}
#iconBtn{
  padding: 12px 18px;
}
#icon{
  width: 40px;
  height: auto;
}
body{
  margin: 0px;
  background-color: var(--grey-color);
}
.btn-blue, .btn-blue:disabled{
  color: white !important;
  border: none !important;
  background-color: var(--blue-color);
}
.btn-blue:hover,.btn-blue:focus{
  color: white !important;
  border: none !important;
  background-color: var(--blue-hover-color) !important;
}
.btn-blue:active{
  color: white !important;
  border: none !important;
  background-color: var(--blue-depressed-color) !important;
}
.form-check-input:checked{
  background-color: var(--blue-color) !important;
}
.dropdown-item:active{
  background-color: var(--blue-depressed-color) !important;
}
.topnav {
  background-color: var(--light-grey-color);
  overflow: hidden;
}
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: var(--blue-hover-color);
}
.topnav a.active {
  background-color: var(--blue-color);
}
.topnav .right{
  float: right;
}
.topnav .menuButton{
  display: none;
}
@media (max-width: 950px){
  .topnav .left{
    display: none;
  }
  .topnav .menuButton{
    display: block;
  }
  #iconBtn{
    padding: 12px 7px;
  }
}
.menu-overlay{
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}
.menu-overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.menu-overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: white;
  display: block;
  transition: 0.3s;
}
.menu-overlay a:hover, .menu-overlay a:focus {
  color: var(--blue-color);
  font-size: 45px;
}
.menu-overlay .closebtn {
  position: absolute;
  top: 0px;
  left: 5px;
  padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.menu-overlay a {font-size: 20px}
.menu-overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
}
}

#container{
  padding: 20px;
}
.message{
  color: red;
  margin: 0px;
  position: absolute;
  bottom: 0px;
}

/* Login Page */
#loginPage #container{
  max-width: 400px;
  margin: 0px auto;
  text-align: center;
}
#loginPage input{
  margin-bottom: 5px;
}
#loginPage #loginBtn{
  margin-top: 10px;
  width: 100%;
  margin-bottom: 10px;
}

/* Forgot Password Page */
#forgotPasswordPage #container{
  max-width: 480px;
  margin: 0px auto;
}
#forgotPasswordPage input{
  margin-bottom: 5px;
}
#forgotPasswordPage #resetBtn{
  margin-top: 10px;
  width: 100%;
  margin-bottom: 10px;
}
#forgotPasswordPage #loginLine{
  text-align: center;
}

/* Reset Password Page */
#resetPasswordPage #container{
  max-width: 480px;
  margin: 0px auto;
}
#resetPasswordPage input{
  width: 100%;
  margin-bottom: 5px;
}
#resetPasswordPage #updateBtn{
  margin-top: 10px;
  width: 100%;
  margin-bottom: 10px;
}
#resetPasswordPage #loginLine{
  text-align: center;
}

/* Registration Page */
#registrationPage #container{
  max-width: 500px;
  margin: 0px auto;
}
#registrationPage input{
  width: 100%;
  margin-bottom: 5px;
}
#registrationPage #registerBtn{
  margin-top: 10px;
  width: 100%;
  margin-bottom: 5px;
}
#registrationPage #loginLine{
  text-align: center;
}

/* Home Page */
#homePage #text{
  color: white;
}

/* Screens */
#screensPage #playlistList{
  max-height: 300px;
  overflow-y: scroll;
}
#screensPage #message{
  color: red;
  margin: 0px;
  position: absolute;
  bottom: 0px;
}
#screensPage #screensContainer,#mediaPage #mediaContainer{
  margin-top: 10px;
}
#screensPage .screen, #screenPage .screen, #adminPage .screen, #mediaPage .media, #adminPage .user{
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 2px;
  border-radius: 7px;
  background-color: #313131;
  color: white;
}
#screensPage .screenLabel, #screenPage .screenLabel, #adminPage .screenLabel, #mediaPage .mediaLabel, #adminPage #usersContainer .user > .username{
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
}
#screensPage .screenStatus, #screenPage .screenStatus, #adminPage .screenStatus, #mediaPage .badge{
  margin-right: 8px;
  position: relative;
  bottom: 1px;
}
#screensPage .screenStatus.OFFLINE, #screenPage .screenStatus.OFFLINE, #adminPage .screenStatus.OFFLINE{
  background: rgb(135, 135, 135);
}
#screensPage .screenStatus.ONLINE, #screenPage .screenStatus.ONLINE, #adminPage .screenStatus.ONLINE{
  background: rgb(38, 192, 92);
}
#screensPage .infoContainer > div:first-child, #mediaPage .infoContainer > div:first-child, #adminPage .infoContainer > div:first-child{
  margin-top: 5px;
}
#screensPage .infoContainer > div > *, #mediaPage .infoContainer > div > *, #adminPage .infoContainer > div > *{
  display: inline-block;
}
#screensPage .infoContainer .icon, #mediaPage .infoContainer .icon, #adminPage .infoContainer .icon{
  margin-top: -3px;
}
#screensPage .infoContainer > div > p, #mediaPage .infoContainer > div > p, #adminPage .infoContainer > div > p{
  color: var(--sub-text);
  margin-bottom: 0px;
  margin-left: 5px;
}
#screensPage .infoContainer > p, #mediaPage .infoContainer > p, #adminPage .infoContainer > p{
  margin-bottom: 0px;
}
#screensPage .screenPlaylist{
  margin: 0px;
  margin-left: 10px;
}
#screensPage .screenBtnContainer, #adminPage .screenBtnContainer, #adminPage .userBtnContainer{
  float: right;
}

/* PLAYLIST */
#playlistPage #screenList{
  max-height: 300px;
  overflow-y: scroll;
}
#playlistPage #playlistContainer{
  margin-top: 10px;
}
#playlistPage .playlist{
  margin-bottom: 2px;
  border-radius: 7px;
  min-height: 60px;
  padding: 10px;
  background-color: #313131;
  color: white;
  cursor: pointer;
}
#playlistPage .playlist:hover{
  background-color: var(--blue-color);
}
#playlistPage .playlistLabel{
  float: left;
  margin-bottom: 0;
  margin-top: 5px;
  font-weight: bold;
}
#playlistPage .playlistBtnContainer{
  margin-top: 5px;
  float: right;
}
#playlistPage .mediaDropdown{
  display: none;
  margin-top: 40px;
}
#playlistPage .playlistItemLabel{
  margin-left: 7px;
  margin-top: 7px;
}
#playlistPage .screenLabel{
  margin: 0px 0px 0px 5px;
}
#playlistPage #screenList{
  margin-bottom: 20px;
}
#playlistPage .mediaItem{
  display: inline-block;
  width: 100%;
  margin-bottom: 2px;
  border-radius: 7px;
  background-color: #505050;
  color: white;
}
#playlistPage .mediaItem > p{
  margin: 0;
}
#playlistPage .mediaItem > .playMedia{
  float: right;
}

/* CREATE PLAYLIST PAGE */
#createPlaylistPage .labelContainer, #editPlaylistPage .labelContainer{
  background: #727272;
  display: inline-block;
  padding: 5px 10px;
  border-radius: 0.375rem 0.375rem 0rem 0rem;
}
#createPlaylistPage .label, #editPlaylistPage .label{
  margin: 0px;
  color: white;
}
#playlistPage .mediaBtnContainer, #createPlaylistPage .mediaBtnContainer, #editPlaylistPage .mediaBtnContainer{
  float: right;
  padding: 5px;
}
#playlistPage .mediaLabel, #createPlaylistPage .mediaLabel, #editPlaylistPage .mediaLabel{
  margin-left: 7px;
  margin-top: 7px;
}
#playlistPage #previewModal iframe, #createPlaylistPage #previewModal iframe, #editPlaylistPage #previewModal iframe{
  height: 500px;
  overflow-y: scroll;
}
#playlistPage #previewModal video, #playlistPage #previewModal img, #createPlaylistPage #previewModal video, #createPlaylistPage #previewModal img, #editPlaylistPage #previewModal video, #editPlaylistPage #previewModal img{
  width: 100%;
}
#createPlaylistPage .mediaType, #editPlaylistPage .mediaType{
  margin-right: 8px;
  position: relative;
  color: black;
  bottom: 1px;
}
#createPlaylistPage .mediaType.IMAGE, #editPlaylistPage .mediaType.IMAGE{
  background: rgb(255, 153, 153);
}
#createPlaylistPage .mediaType.VIDEO, #editPlaylistPage .mediaType.VIDEO{
  background: rgb(141, 255, 181);
}
#createPlaylistPage .mediaType.LINK, #editPlaylistPage .mediaType.LINK{
  background: rgb(164, 205, 255);
}
#createPlaylistPage .mediaType.YOUTUBE, #editPlaylistPage .mediaType.YOUTUBE{
  background: #FF0000;
  color: white;
}
#createPlaylistPage #fileList, #editPlaylistPage #fileList{
  border-radius: 0px 0.375rem 0.375rem 0.375rem;
  border: 3px solid #727272;
  margin-bottom: 10px;
  max-height: 248px;
  overflow-y: scroll;
}
#createPlaylistPage #selectedMedia, #editPlaylistPage #selectedMedia{
  border: 3px solid #727272;
  margin-bottom: 20px;
  max-height: 496px;
  overflow-y: scroll;
}
#createPlaylistPage .playlistItemBtnContainer, #editPlaylistPage .playlistItemBtnContainer{
  float: right;
  padding: 5px;
}
#createPlaylistPage .playlistItemLabel, #editPlaylistPage .playlistItemLabel{
  display: block;
  margin-bottom: 5px;
}
#createPlaylistPage .rotateContainer, #editPlaylistPage .rotateContainer{
  display: inline-flex;
  margin-left: 5px;
}
#createPlaylistPage .rotateText, #editPlaylistPage .rotateText{
  display: flex;
  margin-top: 4px;
  margin-right: 10px;
}
#createPlaylistPage .rotationLabel, #editPlaylistPage .rotationLabel{
  margin-right: 5px;
}
#createPlaylistPage .rotation, #editPlaylistPage .rotation{
  margin-bottom: 0px;
  width: 23px;
}
#createPlaylistPage .rotateBtnContainer > button, #editPlaylistPage .rotateBtnContainer > button{
  padding-bottom: 7px;
}
#createPlaylistPage .file,#createPlaylistPage .selected, #editPlaylistPage .file,#editPlaylistPage .selected{
  width: 100%;
  display: inline-block;
  border-radius: 5px;
  background-color: #5d5d5d;
  border-bottom: 0px;
}
#createPlaylistPage .file:nth-child(odd),#createPlaylistPage .selected:nth-child(odd), #editPlaylistPage .file:nth-child(odd),#editPlaylistPage .selected:nth-child(odd){
  background-color: rgb(52 52 52);
}
#createPlaylistPage .selected, #editPlaylistPage .selected{
  padding: 5px;
}
#createPlaylistPage #createPlaylist, #editPlaylistPage #updatePlaylist{
  float: right;
  margin-bottom: 20px;
}

/* MEDIA PAGE */
#mediaPage .media, #mediaPage .thumbAndMedia{
  display: flex;
}
#mediaPage .thumbContainer{
  margin-right: 10px;
  display: flex;
  position: relative;
  align-items: center;
  height: 80px;
  overflow: hidden;
  min-width: 142px;
}
#mediaPage .thumb{
  width: 142px;
  height: auto;
}
#mediaPage .overlay {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(68, 131, 162, 0.7);
  justify-content: center;
  align-items: center;
  opacity: 0;
}
#mediaPage .thumbContainer:hover .overlay {
  opacity: 1;
  cursor: pointer;
}
#mediaPage .overlayText {
  color: white;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  margin: 0px;
}
#mediaPage .mediaBtnContainer{
  margin-left: auto;
}
#mediaPage .badge{
  color: black;
}
#mediaPage .mediaType.IMAGE{
  background: rgb(255, 106, 106);
}
#mediaPage .mediaType.VIDEO{
  background: rgb(131, 255, 175);
}
#mediaPage .mediaType.LINK{
  background: rgb(96, 168, 255);
}
#mediaPage .mediaType.YOUTUBE{
  background: #FF0000;
  color: white;
}
#mediaPage .badge.converting{
  background: black;
  color: white;
}
#mediaPage #previewModal video, #mediaPage #previewModal img{
  width: 100%;
}
#mediaPage #previewModal iframe{
  height: 500px;
  overflow-y: scroll;
}
#iframeContainer{
  width: 100%;
  height: auto;
}
#mediaPage #previewModal iframe.youtubeEmbed, #createPlaylistPage #previewModal iframe.youtubeEmbed, #playlistPage #previewModal iframe.youtubeEmbed, #editPlaylistPage #previewModal iframe.youtubeEmbed{
  width: 100%;
}
@media (max-width: 600px){
  #mediaPage .thumbAndMedia{
    flex-direction: column;
  }
  #mediaPage .thumbContainer{
    margin-bottom: 10px;
  }
}
@media (max-width: 991px){
  #playlistPage #previewModal iframe.youtubeEmbed, #mediaPage #previewModal iframe.youtubeEmbed{
    max-height: 200px;
  }
}

.flexContainer{
  display: flex;
}

/* Admin Page */
#adminPage #userRoleContainer{
  display: inline-flex;
  width: 100%;
}
#adminPage #userRoleContainer > .icon{
  margin-top: 8px;
  margin-right: 8px;
}
#adminPage .form-field{
  margin-bottom: 5px;
}
#adminPage #tabs{
  font-size: 0;
}
#adminPage .tab {
  display: inline-block;
  padding: 10px 20px;
  cursor: pointer;
  background-color: var(--light-grey-color);
  border-bottom: none;
  font-size: 16px;
  color: white;
  border-radius: 5px;
  margin-right: 10px;
}
#adminPage .tab:hover {
  background-color: var(--blue-hover-color);
}
#adminPage .tab.active {
  background-color: var(--blue-color);
}
#adminPage .tab-content {
  display: none;
  margin-top: 10px;
}
#adminPage .tab-content.active {
  display: block;
}
#adminPage .icon.enabled{
  color: rgb(0, 225, 0);
}
#adminPage .icon.disabled{
  color: red;
}

/* 404 Invalid Page */
#invalidPage{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  margin: 0;
  color: white;
}
#invalidPage .container {
  text-align: center;
}
#invalidPage h1 {
  font-size: 5em;
  margin: 0;
}
#invalidPage p {
  font-size: 1.5em;
  margin: 10px 0 0;
}
#invalidPage #backToHomeBtn{
  margin-top: 20px;
  font-size: 1.2em;
}