/* 
    CSS for our sweet application

    Here's some colors to keep: 

    Background Grey: #77838D
    Slate Blue: #474E57
    Roundabout Blue: #10b0ae

    Dark Red: #972B34
    Engine Red: #e62951
    Orange Red: #EB4A24
 */

 /* BACKGROUND VIDEO ON LOGIN */
html, body { height: 100%; width: 100%; margin: 0; }

section { flex-shrink: 0; }

.squish {
  padding:8px;
}

.squish h2, 
.squish h3, 
.squish h4{
    margin:0px;
    padding:0px;
}

.stopfade { 
   opacity: .5;
}

.dropzone {
  height: 45px;
  border: 1px solid rgba(0,0,0,0.25);
  color: rgba(0,0,0,0.25);
  text-align: center;
  font-family: Arial;
}

.dropzone:hover {
  border: 1px solid #000;
  color: #000;
}

/* Toast Css'n */
.error {
  background-color: red;
}

.error-close {
  background-color: red !important;
  color:white !important;
}

.warn {
  background-color: yellow;
}

.warn-close {
  background-color: yellow !important;
  color:white !important;
}

.success {
  background-color: green;
}

.success-close {
  background-color:#006400 !important;
  color:white !important;
}

.md-toast {
  position:fixed;
}

.loginDialog {
    max-width:600px !important;
}

.fullscreen-dialog {
  height:100%;
  width:100%;
  max-height:100%;
  max-width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 0;
 }

/* Hate Hate doing this, but right now there's no real good way */
/* TODO: Fix this hacky thing that doesn't pull from our theme */
.gridOdd {
  background-color:#a3c0cc
}

.gridEven {
  background-color:#cee5e5 
}

.clipName {
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  text-align: left;
  font-size:10px !important;
  line-height:12px !important;
  padding: 4px;
}

md-grid-tile-footer figcaption  {
  width:100%;
}

md-grid-tile-footer {
  background:rgba(0, 0, 0, 0.50) !important;
}

/* Back to Top Button */

.backToTop {
  bottom: 2em;
  right: 1.5em;
  position: fixed;
  z-index:99;
}

/* Search Bar */
.searchBar {
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index:99;
}

.searchBarResultBackground {
  background-color:#a3c0cc
}

.clip-search-template li {
  border-bottom: 1px solid #ccc;
  height: auto;
  padding-top: 4px;
  padding-bottom: 4px;
  white-space: normal; 
}
.clip-search-template li:last-child {
  border-bottom-width: 0; 
}

.clip-search-template .search-name{
  display: block;
  line-height: 2; 
}

/* Stop the video from being highlighted when we open a clip */
#clipMediaVideo{
  outline: none;
}

.video-js .vjs-control {
  width: 5em;
}

.clipSelected{
  border: 3px solid #F44336;
}

/* Upload Bar Styling */
.downloadBar {
    height:10px;
}

.downloadBar .md-container{
    height:10px;
}

.downloadBar .md-container .md-bar{
    height:10px;
}

.error .md-container .md-bar{
    background-color: red !important;
}

.success .md-container .md-bar{
    background-color: green !important;
}

/* Right Click Menu */
.rightClick{
  background-color: red !important;
  position:fixed;
  z-index:999;
  border: #193946 1px solid;
}

/* PDF Viewer CSS */
.pdfPageNumber{
  width:80px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border-style: hidden;
  margin:5px;
  padding:5px;
  text-align:center;
}

/* Keyword searches on catalogs and clips and stuff */
.keywordSearchSubheader .md-subheader-inner{
  padding:8px 0px 0px 8px;
}

.keywordSearch{
  padding:0px;
}

/* Additional CSS for Tree control*/
.c-iExpanded + i + div{
  font-weight: bold;
}

/* Squishing button text */
button.squish-button{
  line-height:18px !important;
}

button.hiddenButton{
  visibility:hidden;
}

/* CSS Divider */
.divider {
  border: 1px solid #a3c0cc;
  margin: 10px;
  height: 20px;
}

#secondaryToolbar{
  background-color:#CCCCCC;
}

.clipRowNoHighlight {
  border:none !important;
  outline:none !important;
}

.clipTableHeader{
  background-color:#E6E6E6;
}

.clipTableHeader th{
  font-size:16px !important;
}

.rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
.rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); }
.rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); }
.rotate270 {-webkit-transform: rotate(270deg); transform: rotate(270deg); }

.clipVideo{
  background: #000;
}

.eventsPanel {
  margin:2px;
  border: 1px solid #DDD;
  background: #eee;
}

.eventScroller {
  border-top: 1px solid #DDD;
}

@-moz-document url-prefix() {
    .eventScroller{
      border-top: 1px solid #DDD;
      height:80vh;
    }
}

.event-container {
  min-height: 100px;
  width: 100%;
  border-bottom: 1px solid #aaa;
  text-align: left;
  overflow:auto;
  overflow-wrap:break-word;
  white-space:normal !important;
  background:#FFF;
}

.event-container-buttons {
  height:33px;
}

.repeated-item h4{
  padding-top:0px;
  margin-top:0px;
}

md-virtual-repeat-container {
  border: solid 1px grey; 
}

/* Making a smaller version of the form stuff */
.mini md-input-container{
  margin: 8px 0;
}

.mini button{
  margin: 3px 4px;
}

.jumpToEvent {
  background-color:#a3c0cc;
  cursor: pointer;
}

.editEvent {
  background-color:#cee5e5;
  cursor: pointer;
}

.deleteEvent {
  background-color:red;
  cursor: pointer;
}

.eventForm {
  min-height: 250px;
}

.eventSelected {
  background-color:#cee5e5;
}

.eventSelectedHeader {
  height:10px;
  width:100%;
  text-align: center;
  background-color:#cee5e5;
}