@import url('https://fonts.googleapis.com/css?family=Raleway');

body{
  padding: 0;
  margin: 0;
  overflow: hidden;
  height: 100%;
  position: fixed;
  width: 100%;
}
#background-gradient {
  width:100%;
  height:100%;
  position:absolute;
  background-image: radial-gradient(ellipse closest-corner, rgba(200, 200, 200, 0.5), rgb(65, 65, 65));
}
#background-image {
  background: url(/static/img/HelpCastWhite.png) no-repeat center center fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  width:100%;
  height:100%;
  position:absolute;
}
#drawing-canvas {
  display: none;
  position: absolute;
  background-color: #000000;
  top: 0px;
  left: 0px;
  z-index: 3000;
}

#incoming-canvas {
  display: none;
  position: absolute;
  background-color: #000000;
  top: 0px;
  left: 0px;
  z-index: 2999;
}

#video{
  position: absolute;
  object-fit: cover;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}

body.helper #videoContainer{
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body.helper #video{
  object-fit: contain;
}
body.voice #viewContainer, body.voice #colour-btn, body.voice #clear-btn, body.voice #drawing-btn, body.voice #pause-btn,
body.voice #redo-btn, body.voice #undo-btn{
  display: none;
}

#rendererContainer{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

#rendererContainer::before{
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

#renderer{
  display: inline-block;
  position: relative;
  object-fit: contain;
  top: 0px;
  left: 0px;
  z-index:1;
  vertical-align: middle;
}

#btn-container{
  flex-direction: row;
}
.btn{
  position: absolute;
  height: 4.33rem;
  width: 5rem;
  background-size: contain;
  z-index:2;
  background-repeat: no-repeat;
}
.state-btn{

}
.freezeFrame{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%!Important;
  height: 100%!Important;
  object-fit: cover;
}
.colour-btn:not(.selected-colour){
  display:flex;
}
.colour-btn.selected-colour{
  display:none;
}

.flip-btn{
  right: 0.75rem;
}
.hidden{
  display:none;
}

.ui-layer {
  z-index: 2;
}

.button-row{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  pointer-events: none;
}

.button-row > .btn{
  position: relative;
  margin: 0 0.75rem 0.75rem 0;
  max-width: calc(20vw - 0.9rem); /* (100/num)vw - (num+1)/(num)*margin */
  max-height: calc(17.32vw - 0.7794rem); /* max-width * aspect-ratio */
}

.button-row > .btn:first-child{
  margin: 0 0.75rem 0.75rem;
}

.space{
  flex: 1 0 0;
  pointer-events: none;
}

#clear-btn{
  background-image: url('/static/img/ClearScene.png');
  bottom: 50%;
  left: 0.75rem;
}

#camflip-btn{
  background-image: url('/static/img/MobileCam.png');
}
#camflip-btn2{
  background-image: url('/static/img/SelfieCam.png');
}

#undo-btn{
  background-image: url('/static/img/Undo2.png');
}
#redo-btn{
  background-image: url('/static/img/Redo.png');
}
#pause-btn{
  background-image: url('/static/img/Lock.png');
  visibility: hidden;
}
#swap-btn{
  background-image: url('/static/img/Undo2.png');
  left: 0.75rem;
}

#swap-btn,
#camflip-btn,
#camflip-btn2{
  display: none!important;
}

#self-video {
  top:0.75rem;
  right:0.75rem;
  position: absolute;
  width:6rem;
  height:10rem;
  background: white;
  border:1px solid black;
}
/* images opposite because drawGreen and drawRed are actually backwards.
this way color matches line */
#green-btn{
  background-image: url('/static/img/Red.png');
  bottom: 0.75rem;
  right: 0.75rem;
}
#red-btn{
  background-image: url('/static/img/Green.png');
  bottom: 0.75rem;
  right: 0.75rem;
}

#colour-btn{
  background-image: url('/static/img/Green.png');
  z-index: 3;
}

#colour-picker-container{
  pointer-events: all;
  z-index: 2;
  width: 12rem;
}

.thickness-picker-wrapper{
  width: 4rem;
  height: 100%;
  padding: 0;
  margin-block: -2rem;
}

#thickness-picker{
  width: 8rem;
  height: 100%;
  margin: 0;
  transform-origin: 3rem 7.3rem;
  transform: rotate(-90deg);
}

#draw-options-container{
  display: none;
  position:absolute;
  top: -14rem;
  left: -10.5rem;
}

.circle{
  width: 2rem;
  height: 2rem;
  background-color: white;
  border-radius: 50%;
  margin: auto;
  display: flex;
}

.large-circle{
  width: 1.5rem;
  height: 1.5rem;
  background-color: rgb(0, 255, 0);
  border-radius: 50%;
  margin: auto;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

.small-circle{
  width: 0.5rem;
  height: 0.5rem;
  background-color: rgb(0, 255, 0);
  border-radius: 50%;
  margin: auto;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

.layout_default.picker_wrapper{
  width: 12rem !important;
}
.picker_done{
  display:none !important;
}

#link-container-container {
  z-index:2;
}

#link-container{
  z-index:2;
  display:flex;
  justify-content: space-between;
}

#error-text{
  z-index:2;
  position: absolute;
  background: white;
  border: 1px solid black;
  padding:5px;
  color:red;
  top:50px;
}

#status-text{
  background: #3335;
  z-index: 2;

  color: white;
  flex-grow: 1;
  font-size: 24px;

}

#copy-div {
  z-index:2;
}

#copy-button {
  z-index:2;
  border: 1px solid black;
  height:100%;
  font-size:24px;
}

.stretch {
  width:100%;
  height:100%;
  display: flex;
  position: absolute;
  top:0;
  z-index: 2;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.ptr {
  pointer-events: all;
}

.square-btn-size {
  height: 5rem;
  width: 5rem;
  background-size: contain;
}

/* .btn-size {
  width: 5rem;
  height: 4.33rem;
  background-size: contain;
} */

.big-center-btn {
  width:10rem;
  height:8.66rem;
  background-size: contain;
  position: absolute;
}

#start-btn {
  background-image: url('/static/img/OfferHelp.png');
  position: static;
}
#start2-btn {
  margin-top: 4%;
  background-image: url('/static/img/ReceiveHelp.png');
  position: static;
}
#start3-btn {
  margin-top: 4%;
  background-image: url('/static/img/VoiceOnly.png');
  position: static;
}
#start2-btn-con {
  width: 10rem;
}
#join-btn {
  background-image: url('/static/img/Join.png');
}
#close-btn{
  /*hiding the close button for now it needs more work*/
  bottom: 50%;
  right: 0.75rem;
}
/* btn is kinda misleading its more of an icon
  but oh well */
#drawing-btn{
  background-image: url('/static/img/Drawing.png');
  pointer-events:none;
}
#share-btn {
  background-image: url('/static/img/Share.png');
  right:0.75rem;
  bottom:50%;
}
#show-video-btn {
  right:0.75rem;
  height:5rem;
  width:5rem;
  bottom:50%;
  display: none;
}

.share-choice {
  margin:10px;
}

.share-link-text{
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 0.8em;
}

#mute-btn{
  background-image: url('/static/img/MicUnmute.png');
}

#not-mute-btn{
  background-image: url('/static/img/MicMute.png');
}

.blink-me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#clear-text {
  padding-bottom:5px;
  font-family: 'Raleway', sans-serif;
  font-size: calc(0.7em + 1vw);
  text-align: center;
}

.yes-no-btns {
  display: flex;
  justify-content: space-evenly;
}

.no-btn {
  color:white;
  border:0px solid white;
  background:red;
  border-radius: 10px;
  font-size:calc(0.5em + 1vw);
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  padding:3% 17% 3% 17%;
  text-transform: uppercase;
}

.yes-btn {
  color:white;
  border:0px solid white;
  background:#356FB0;
  border-radius: 10px;
  font-size:calc(0.5em + 1vw);
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  padding:3% 15% 3% 15%;
  text-transform: uppercase;
}

.reload-btn-container{
  display: flex;
  justify-content: center;
  margin-block: 1rem;
}

.viewContainer{
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 0;
  white-space: nowrap;
  text-align: center;
}
.viewContainerPC{

}

.reload-btn {
  color:white;
  border:0px solid white;
  background:#356FB0;
  border-radius: 10px;
  font-size:calc(0.5em + 1vw);
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  padding:1% 2% 1% 2%;
  text-transform: uppercase;
  margin-inline: 2%;
}

.flex-between {
  display: flex;
  justify-content: space-evenly;
}

.modal {
  background:#000000f0;
  height:fit-content;
  color:white;
  font-size:2rem;
  padding:50px;
  margin-top:50px;
  opacity: 0;
  visibility: hidden;
  border-radius: 10px;
  transition: opacity 100ms ease-in, visibility 0ms ease-in 250ms;
}
.modal[show] {
  opacity: 1;
  visibility: visible;
  transition: opacity 100ms ease-in, visibility 0ms ease-in 0ms;
}

.share-icon {
  width:2em;
  padding:0.3em;
}

.toggle-show {
  visibility: hidden;
}
.toggle-show[show] {
  visibility: visible;
}
.toggle-show:not([show]){
    display: none;
}

.flex-wrap {
  flex-wrap: wrap;
}

.no-btn {
  margin:0.2em;
}

.yes-btn {
  margin:0.2em;
}

.click {
  cursor: pointer;
  pointer-events: all;
}

/* Splash screen */
#splashScreen{
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(24, 40, 51, 1);
  opacity: 1;
  pointer-events: none;
  transition: opacity 2s ease 1s, height 0s linear 3s;
  display: none;
  text-align: center;
  overflow: hidden;
}

#splashScreen::before{
  content: "";
  height: 100%;
  vertical-align: middle;
  display: inline-block;
  width: 0;
}

body.splash-screen #splashScreen{
  opacity: 1;
  display: block;
}

body.page-loaded  #splashScreen.splash-image-loaded{
  opacity: 0;
  height: 0;
}

body.splash-screen .splash-screen-image{
  pointer-events: none;
  width: 60%;
  height: 60%;
  transition: width 2s ease 1s, height 2s ease 1s;
  background-image: url('/static/img/SplashScreen/3300.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

body.splash-screen .splash-screen-link{
  pointer-events: auto;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0s 1.25s;
}

@media screen and (max-width: 2750px) {
  body.splash-screen .splash-screen-image{
    background-image: url('/static/img/SplashScreen/1650.png');
  }
}

@media screen and (max-width: 1834) {
  body.splash-screen .splash-screen-image{
    background-image: url('/static/img/SplashScreen/1100.png');
  }
}

@media screen and (max-width: 1375) {
  body.splash-screen .splash-screen-image{
    background-image: url('/static/img/SplashScreen/825.png');
  }
}

@media screen and (max-width: 1100) {
  body.splash-screen .splash-screen-image{
    background-image: url('/static/img/SplashScreen/660.png');
  }
}

@media screen and (max-width: 550) {
  body.splash-screen .splash-screen-image{
    background-image: url('/static/img/SplashScreen/330.png');
  }
}

@media screen and (max-width: 367) {
  body.splash-screen .splash-screen-image{
    background-image: url('/static/img/SplashScreen/220.png');
  }
}

body.page-loaded .splash-image-loaded .splash-screen-image{
  width: 40%;
  height: 40%;
}

body.page-loaded .splash-image-loaded .splash-screen-link{
  top: -100%;
}

@import url('https://fonts.googleapis.com/css?family=Abel|Archivo+Narrow|PT+Sans+Narrow|Saira+Semi+Condensed|Signika|Crete+Round1111&display=swap');
.TOUContainer{
    border-radius: 0.75rem;
    height:90%;
    margin-top: 4%;
    width:30%;
    margin-left: 35%;
    position: absolute;
    z-index: 10;
    background-color: rgba(37, 37, 37, 0.85);
    color: white;
    overflow: auto;
    display: none;
    flex-direction: column;
}

body.share-targeting .TOUContainer{
  background-color: rgba(37, 37, 37, 1);
}

#TOULogo{
    width: 100%;
    align-self: center;
    background-image: url('/static/img/SplashScreen/3300.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

@media only screen and (max-width: 5640px){
  #TOULogo{
    background-image: url('/static/img/SplashScreen/1650.png');
  }
}

@media only screen and (max-width: 3760px){
  #TOULogo{
    background-image: url('/static/img/SplashScreen/1100.png');
  }
}

@media only screen and (max-width: 2820px){
  #TOULogo{
    background-image: url('/static/img/SplashScreen/825.png');
  }
}

@media only screen and (max-width: 2256px){
  #TOULogo{
    background-image: url('/static/img/SplashScreen/660.png');
  }
}

@media only screen and (max-width: 1128px){
  #TOULogo{
    background-image: url('/static/img/SplashScreen/330.png');
  }
}

@media only screen and (max-width: 900px) {
    /* For mobile phones: */
    .TOUContainer{
        width: 90%;
        margin-left: 5%;
    }

}

@media only screen and (max-width: 900px) and (min-width:500px){
    /* For mobile phones: */
    #TOULogo{
        width: 60%;
        background-image: url('/static/img/SplashScreen/660.png');
    }

}

.TOUTitle{
    display: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.15rem;
    background-color: rgba(0,0,0, 0.5);
    color: white;
    font-family: abel, sans-serif;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    line-height: 2rem;
}
.TOUHTMLCont{
    border-bottom:1px solid rgba(0, 0, 0, 0.5);
    flex: 1;
    padding-left: 2.5%;
    display: flex;
}
.TOUPrompt{
    font-family: 'Raleway', sans-serif;
    font-size: 75%;
    margin-left: 5%;
    margin-bottom: 3%;
    width: 70%;
    padding: 1% 0;
}
.TOUBtn{
    color: /* #383838 */ #fff !important;
    background-color: /* #d0d0d0 #d8372d */ /* #00CAE3 */ #1b75bc !important;
    border: 0px solid /* #d0d0d0 #d8372d */ /* #00CAE3 */ #1b75bc !important;
    padding: 0.75em;
    font-size: 0.85em;
    text-transform: uppercase;
    margin-bottom: 3%;
    margin-top: .5%;
}
.btnPrime{
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    line-height: 1.5;
    height: 2.5rem;
    margin-left: 5%;
    margin-right: 2%;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}


/* TOU (Terms of Use) */
#TOU .modal-body {
    padding: 2rem !important;
    max-height: calc(100vh - 400px);
    overflow-y: auto;
}

#TOU .modal-footer p {
    margin-bottom: 0rem;
}

#tou-expand {
    color:white;
}

#again-btn {
  width:50vw;
  max-width:300px;
  margin: auto;
  padding-top:2%;
}
#explore-btn{
  width: 50vw;
  max-width:300px;
  margin: auto;
  padding-top:2%;
}
#session-over {
  width: 100%;
  height: 100%;
  margin:auto;
}

#session-over #clear-text{
  font-size: calc(0.6em + 0.8vw);
}

#session-over .yes-no-btns{
  flex-direction: column;
}

.session-ended-font{
  font-size: calc(0.5em + 0.8vw)!important;
}