/* Copyright (c) 2016 ZipSocket, Inc.  */
/* All rights reserved.      */

/*
 * Everything in the middle of the site, including the iframe (not including 
 * the control panel).
 *
 */

/* ------------------------------------- */

#shareUrlContainer {
   position: fixed;
   top: 48px; /* just under the header bar */
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 10;
   background-color: rgb(220,222,222); /* decide on a background color later */
   overflow: hidden;
   
}

#localScreenShareContainer {
   position: absolute;
   background-color: rgba(0,0,0,1);
   z-index: 3; /* above iframe */
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 33vh 33vw;

   /* flexbox */
   display: flex;
   flex-flow: column nowrap;
   align-items: stretch;
   justify-content: center;
}

.noPadding {
   padding: 0px !important;
}

#screenShareVideoAndMessage {
   position: relative;
   width: 100%;
   height: 100%;
   /*min-width: 200px;*/
   /*min-height: 200px;*/
}

#screenShareMessageContainer {
   top:0px;
   left:0px;
   width: 100%;
   height: 100%;
   /*min-width: 200px;*/
   /*min-height: 200px;*/
   position: absolute;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

#screenShareMessage {
   background-color: rgba(166,202,211,.7);
   width: 100%;
   height: 100%;
   text-align: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

#screenShareVideo {
   width: 100%;
   height: 100%;
   /*min-width: 200px;*/
   /*min-height: 200px;*/
   transition: opacity 0.4s;

   flex: 1 1 auto;
}

.blurVideoPreview {
   filter: contrast(90%) grayscale(90%);
   opacity: 0.5;
}


#erizoDiv {
   position: absolute;
   background-color: rgba(20,20,20,1);
   z-index: 5; /* above screen share video */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.erizoChild {
   position: absolute;
   background-color: rgba(20,20,20,1);
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

#iframeScrollContainer {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 2; /* above the background status blocker */

   /* added inline - supposed to avoid ios bugs
   -webkit-overflow-scrolling: touch;
   overflow: auto;
   */
}

.shareIframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: none;
   background-color: white;
}

#shareUrlContainer .shareUrlTitle {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 40px;
   font-size: 1.2em;
   color: #333333;
   font-weight: bold;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 3px;
   width:100%
   background-color: rgba(255, 255, 255, 0.75);
}

#backgroundStatusGroup {
   position: absolute;
   z-index: 1;
   width: 100%;
   height: 100%;
   color: #666;
   background-color: #C8D2DB;
   transition: color 0.5s ease-in-out,
               background-color 0.5s ease-in-out;
   
   /* flexbox */
   display: flex;
   flex-flow: column nowrap;
   align-items: stretch;
   justify-content: flex-end;
}


#iframeBackgroundBlocker {
   position: absolute;
   z-index: 4;
   width: 100%;
   height: 100%;
   background-color: black;
   opacity: .75;
   pointer-events: none;
   transition: opacity 0.75s linear;

   display: flex;
   flex-flow: column nowrap;
   align-items: center;
   justify-content: center;
}

.loadingStreamSpinner {
   background-image: url("../images/spinner.svg");
   background-repeat: no-repeat;
   background-size: 128px 128px;
   width: 128px;
   height: 128px;
   margin: 30px;
   opacity: 0.5;
}

#loadingStreamError {
   color: #BBB;
   font-size: 1.3em;
   max-width: 800px;
   margin: 0px 50px;
   text-align: center;
}

@media (min-width : 800px) {
   #backgroundStatusGroup {
      justify-content: space-between;
   }
}

.screenShareTitle {
   background-color: #3f565da8;
   color: #FFF;
   font-weight: 200;
   text-align: center;
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 0px;
   width: 100%;
   height: 20%;
   z-index: 2;
}

.screenShareExpandIcon {
   color: #DDD;
   padding: 2px;
   width: 32px;
   height: 32px;
   bottom: 0px;
   right: 0px;
   position: absolute;
   /*align-self: center;*/
}


html.useHover .screenShareExpandIcon:hover {
   color: #3FBAE7;
}