/* -------------------------------------------------------*/
/*            WorkSpace or /media Styling                 */
/* -------------------------------------------------------*/

:root {
  --main-fixed-header: 64px;
  --mobile-fixed-header: 55px;
}

/* -------------------------------------------------------*/
/*        Fix Workspace Controls like L H S Dash          */
/* -------------------------------------------------------*/

#WorkSpaceControls {
  position: fixed;
  height: 100vh;
  top: var(--main-fixed-header);
}
@media only screen and (max-width : 600px) {
  #WorkSpaceControls { top: var(--mobile-fixed-header); }
}

@media only screen and (max-width : 600px) {
  /* Very specific iPhone Mobile - the joys of mobile and CSS - */
  #WorkSpaceControls .controls-inner { margin-left: 6px !important;}
}

#WorkSpaceFiles {
  overflow-y: scroll;                             /* Allow vertical scroll bar */
}

/* -------------------------------------------------------*/
/*              Mobile CSS for Upload Area                */
/* -------------------------------------------------------*/

@media only screen and (max-width : 600px) {

  #WorkSpaceUpload { position:relative; top: -55px !important; }
  #WorkSpaceLocation { position:relative; top: -55px !important; }
  #WorkSpaceFiles { position:relative; top: -55px !important; }

}

/*

  N e e d s   a   R E V I E W

*/


/* -------------------------------------------------------*/
/*         Workspace override | check style.css           */
/* -------------------------------------------------------*/


.zinc { background: -webkit-linear-gradient(0deg, #ADA996 0, #EAEAEA 100%); }
.metallic { background: -webkit-linear-gradient(0deg, #ABBAAB 0, #FFFFFF 100%); }

.hidden, .invisible { display: none !important; }

.thumbnail-image {  width: 90%; }
.thumbnail-image-drag {  width: 100px; }

.tight-text { font-size: 1rem !important; line-height: 1rem !important; }

/* ----------- Masonry ----------- */

/* Default to large screens */
.grid-sizer, .grid-item { width: 25%; }
.grid-sizer-wide, .grid-item-wide { width: 50%; }

@media only screen and (max-width : 992px) {
  .grid-sizer, .grid-item { width: 50%; }
}

@media only screen and (max-width : 600px) {
  .grid-sizer, .grid-item { width: 100%; }
  .grid-sizer-wide, .grid-item-wide { width: 100%; }
}

/* ----------- File Upload ----------- */

input[type="file"] { height: 0px; display: none; }

.my-file-upload {
    color: white;
    border: 1px solid white;
    display: inline-block;
    padding: 8px 20px;
    cursor: pointer;
}

.choose-files { 
  font-size: 0.8em;
  vertical-align: center;
  line-height: 1.1em;
}

.progress { background-color: #f4ff81; }

#FileDropArea {
  border: 2px dashed grey;
  border-radius: 20px;
  margin-top: 20px;
  vertical-align: middle;
  height: 120px;
}

#FileDropArea.highlight-file-drop-area { border-color: red; }

.highlight-as-droppable { border: 5px red dashed;  background-color: #E0E0E0; }
.file-make-me-draggable { z-index: 100; }   /* > my_slider: 99 */

.ui-dialog { z-index: 102; }   /* > any file icons */

.overlay-file-action {
  position: absolute;
  top: 5%;
  left: 25%;
  right: 25%;
  width: 50%;
  -moz-box-shadow: 0px 20px 10px -10px #888;
  -webkit-box-shadow: 0px 20px 10px -10px #888;
  z-index: 101;   /* > file-make-me-draggable  */
}

/* ----------- Rows ----------- */

.workspace-row { margin-bottom: 0px; padding-bottom: 0px;}
.workspace-row .workspace-col { padding: 0px 0px; }
/* .nospace, .no-space { line-height: 0px; } */

/* ----------- Padding ----------- */

.workspace-no-padding { padding: 0px !important; }
.workspace-my-padding { padding: 10px !important; }
.workspace-my-padding-top { padding-top: 20px; }
.workspace-my-x-padding { padding: 20px !important; }

.workspace-my-x-padding-not-top {
  padding-left: 20px; padding-right: 20px; padding-bottom: 20px;
}

/* ----------- User Guide ----------- */

/* tr:nth-child(even) { background-color: #f2f2f2 } */

/* ----------- Video JS ----------- */

#MyWebCam {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

#MyTV {
  position: fixed;
  left: 0%;
  width: 0%;
  height: 0%;
  top: 0%;
  z-index: 105;
}

#MyTVOffButton {
  position: fixed;
  right: 0%;
  top: 0%;
  z-index: 106;
}

#MyTVControls {
  position: fixed;
  left: 0%;
  top: 0%;
  z-index: 106;
}

video::-internal-media-controls-download-button { display:none; }
video::-webkit-media-controls-enclosure { overflow:hidden; }