/*Makes the website take up the whole page*/
html, body {
  margin: 0;
  height: 100%;
  width: 100%;
}


#notification {
  z-index: -1;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  color: #4A5561;
  font-size: 1.4em;
  border-radius: 0.5em;
  padding: 0.5em;
}
@keyframes notifyOpacity {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
.notify {
  animation-name: notifyOpacity;
  animation-iteration-count: 1;
  animation-duration: 1s;
}

/*Defines the width and height of all elements*/
.homepage {
  display: grid;
  grid-template-columns: 4fr 100fr 2fr 50fr 4fr;
  grid-template-rows: 7fr 100fr 3fr 15fr 0.2fr 15fr 1fr 2fr 3fr;
  height: 100%;
  width: 100%;
}

/*Spacing at the top*/
.header {
  grid-column-start: span 5;
}

/*Spacing on the left*/
.left {
  grid-row-start: span 7;
}

/*Video container*/
.video {
  background: #444;
  background-image: url("images/video.PNG");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/*Toolbars container*/
.toolbar {
  border: 1px solid #555;
  color: #AAA;
  overflow: hidden;
}

/*Spacing on the right*/
.right {
  grid-row-start: span 7;
}

/*Spacing underneath the video and tabs*/
.middle {
  grid-column-start: span 3;
}

/*Topmost bar beneath the video*/
.top-bar {
  background: #444;
  grid-column-start: span 3;
}

/*Spacing between the bars*/
.bar-spacing {
  grid-column-start: span 3;
}

/*Bottommost bar beneath the video*/
.bottom-bar {
  background: #444;
  grid-column-start: span 3;
}

/*Spacing between the bottommost bar and the scrollbar*/
.scrollbar-spacing {
  grid-column-start: span 3;
}

/*Scrollbar for the two bars above it*/
.scrollbar {
  background: #444;
  grid-column-start: span 3;
}

/*Spacing at the bottom*/
.footer {
  grid-column-start: span 5;
}

/*Tab container*/
.tabs {
  overflow: hidden;
  width: 100%;
}

/*Buttons that link to each tab*/
.tabs button {
  margin: 0;
  background-color: inherit;
  float: left;
  border: 1px solid black;
  padding: 0.5em 0;
  width: 25%;
  font-size: large;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
}
.tabs button:hover {
  background-color: #ddd;
}
.tabs button.active {
  background-color: #ccc;
}

/*Tabs themselves*/
.tabcontent {
  display: none;
  width: 100%;
  height: calc(100% - 2.5em);
}

/*Videos tab*/
#Videos {
  display: block;
  height: calc(100% - 2.5em);
  width: 100%;
}
#videoUtils {
  width: 100%;
  height: 1.8em;
  margin-top: 0.9em;
}
#videoUtils span {
  position: relative;
}
#videoUtils span p {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  background: black;
  color: white;
  border-radius: 0.6em;
  padding: 0.5em;

}
#videoUtils span a:hover+p {
  visibility: visible;
}
#videoUtils #search {
  width: calc(92% - 4em);
}
#videoUtils a {
  padding: 0.4em 0.7em;
  border-radius: 2em;
  background-color: #31af91;
  color: white;
  font-weight: bolder;
  margin: 0 2% 0 6%;
  text-decoration: none;
}
#ScrollableVideos {
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 2.8em);
  max-width: 99%;
}
#VideoDivs {
  max-height: inherit;
  overflow-y: auto;
}
.videoDiv {
  width: 90%;
  height: 6em;
  margin: 10px 5%;
  border: 1px solid #99a4b5;
  overflow: hidden;
}
.videoDiv img {
  width: 5.6em;
  height: 4.3em;
  position: relative;
  left: 0.5em;
  top: 0.7em;
}
.videoDiv p {
  color: #505b66;
  position: relative;
  left: 7em;
}
.videoDiv .name {
  top: -5em;
}
.videoDiv .length {
  top: -6em;
}
.videoDiv .date {
  top: -7em;
}
.videoDiv .size {
  top: -8em;
  margin-bottom: 0;
}

/*Tools tab*/
#Tools {
  display: none;
}
#Tools p {
  margin-left: 1em;
  color: #48535f;
  margin: 1em 0 0.3em 1em;
}
#Tools .flex-container{
  display: flex;
  flex-flow: row wrap;
  margin-left: 1em;
}
#Tools img {
  height: 2.8em;
  width: 2.8em;
  margin-left: 1em;
  cursor: pointer;
}
#Tools span {
  position: relative;
}

#Tools span p {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  background: black;
  color: white;
  border-radius: 0.6em;
  padding: 0.5em;
}
#Tools span:hover p {
  visibility: visible;
}

/*Share tab*/
#Share {
  display: none;
  font-size: 1.4em;
  color: #4A5561;
}
#Share table {
  margin-top: 6%;
}
#Share p {
  margin: 2em 0 0 0;
}
#Share hr {
  width: 80%;
}
#Share img {
  padding: 1em 0 0.4em 0;
}
#Share .button {
  background-color: #00A6FF;
  border: none;
  color: #ffffff;
  font-size: 22px;
  padding: 0.4em 1.2em;
  border-radius: 0.8em;
  margin: 0 0 0 3em;
  text-decoration: none;
}

/*Chat tab*/
#Chat {
  display: none;
}
#Chat #chat-box {
  border: 1px solid #8492a6;
  width: 90%;
  height: calc(100% - 6em);
  margin: 4% 5% 2% 5%;
  border-radius: 0.8em;
  line-height: 1.8em;
}
#Chat #text-box #text-area{
  width: calc(90% - 5em);
  margin-left: 5%;
  border: 1px solid black;
  height: 2em;
  border-radius: 0.8em;
  font-size: 0.9em;
}
#Chat #text-box #send-button {
  text-align: center;
  background-color: #007aff;
  border: none;
  border-radius: 0.8em;
  font-size: 1em;
  color: white;
  cursor: pointer;
  padding: 0.5em 1em;
}