.threeBase {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    background:yellow;
    z-index:102;
}


.loader {
    margin:0;
    padding:0;
    overflow:hidden;
    position:absolute;
    z-index:160;
    background: rgb(96,147,174);
    background: linear-gradient(30deg, rgba(147,165,207,1) 0%, rgba(228,239,233,1) 100%);
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    color:black;
}

#app {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 150px;
  height: 45px;
}

#percentage {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index:161;
  text-align: center;
  font-size: x-small;
  padding-top:14%;
  color:#F5E9F1;
  text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.2);
}

#container {
  width: 70px;
  height: 35px;
  overflow: hidden;
  position: absolute;
  top: calc(50% - 17px);
  left: calc(50% - 35px);
}

#loaderBase {
  width: 70px;
  height: 70px;
  border-style: solid;
  border-top-color: #F5E9F1;
  border-right-color: #F5E9F1;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotate 3s ease-in-out infinite;
  transform: rotate(-200deg)
}

#speechBubble{
  -webkit-transition: filter .2s ease-in-out, transform  .2s ease-in-out, left .4s ease-in-out;
  transition: filter .2s ease-in-out, transform  .2s ease-in-out, left .4s ease-in-out;
  width: 100px;
  height: 100px;
  left: 50vw;
  margin-left: -50px;
  bottom: -13px;
  position: fixed;
  z-index: 980;
  
}
	body.saipien-open:not(.saipien-fullscreen) #speechBubble{
	    left: 30vw;
	}
@media screen and (max-width: 768px) {
	body.saipien-open #speechBubble{
		left: 50vw !important;
	}
}

#speechBubble .inner{
  background: rgba(0,0,0,1);
  border-radius: 0;
  cursor: pointer;
  transition: background .2s ease-in-out;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: scaleX(0.5) scaleY(0.05);
  filter: blur(0);
}
#speechBubble > svg{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  pointer-events: none;
  transition: opacity .2s;
  opacity: 0;
}
#speechBubble:not(.animation-pause) .inner:before {
  position: absolute;
  content: "";
  margin-left: -50px;
  width: 200px;
  height: 400px;

  margin-top: -150px;
}
#speechBubble.animation-pause > svg{
  opacity: 1;
  transform: translate(-50%, -50%) scale(0.7);
}
#speechBubble.animation-pause .inner{
  transform: scaleX(0.5) scaleY(0.5) !important;
  border-radius: 150px;
}
#speechBubble.nomic:after{
  content:"";
  width: 20px;
  height: 1px;
  background: black;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}
#speechBubble.animation-waiting{
  transform: scaleX(0.5);
  filter: blur(0px);
}
#speechBubble.animation-send{
  transform: scaleX(0.6);
  filter: blur(0px);
  transition: filter .2s ease-in-out, transform  .2s ease-in-out;
}
#speechBubble.animation-send.animation-thinking{
  transform: scaleX(1.2);
  filter: blur(0px);
}
#speechBubble.animation-timer .inner {
  background: rgba(0,0,0,.5);
}

#speechBubble.animation-error .inner {
  background: rgba(255,0,0,.8);
}
#speechBubble.animation-send .inner {
  background: rgba(0, 0, 0, 0.75);
}
#speechBubble.animation-send .pause {
  background: rgba(0,0,0,.2);
}
#avatarImg,
#avatarVideo {
  -webkit-transition: width .4s ease-in-out;
  transition: width .4s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  object-fit: cover;
}
body.saipien-open:not(.saipien-fullscreen) #avatarImg,
body.saipien-open:not(.saipien-fullscreen) #avatarVideo{
  width: 50vw;
}
@media screen and (max-width: 768px) {
	body.saipien-open #avatarImg,
	body.saipien-open #avatarVideo{
		width: 100vw !important;
	}
}