/*    test2 */

:root{
  --bg-color : #e0e0e0
}
html {
  scroll-snap-type: y mandatory;
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  /*    background:#E0E0E0; */
  background: var(--bg-color) ;
  padding: 0;
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
}
body {
  margin:0; 
  padding:0;
}

section {
  left: 0rem;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  font-size: 5vw;
  color: black;
  height: 61.8vh;
  width: 100vw;
  scroll-snap-align: start;
  padding: 0;
  margin: 0;
  z-index:0;
}

.buttons{
  /*   border-style:solid; */
  top: 61.8vh;
  bottom:0;
  left: 0rem;
  margin:0;
  padding:0;
  width: 100vw;
  position: fixed;
  z-index:5;

}

.buttonp {
  border: 0px solid white;
  z-index: 5;
  /*   margin-bottom: 1px; */
  color: rgba(49, 49, 49, 0.6);
  text-shadow: 0 0 0px rgba(0,0,0,0);
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow:  20px 20px 60px #bebebe,
    -20px -20px 60px #ffffff;
  /*   flex-grow: 1; */
  padding: 1rem;
  /*   max-width: 15rem; */
  margin: 1rem;
  /*   margin-right: 5rem; */
  height:2.5rem;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity:1;
}



#approve_shadow_container{
  /*   border-style:solid; */
    position: absolute;
    top: 10vh;
    bottom: 2.5rem;
    left:0;
    right: 66.6vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around ;
    align-items: center;
    margin: 0;
    padding: 0;
  
  }
  
  #cancel_container{
    position: absolute;
    top: 10vh;
    bottom: 2.5rem;
    left:0;
    right: 66.6vw;
    /*   border-style:solid; */
    /*   border-color: red; */
    display: flex;
    flex-direction: column;
    /*   flex-direction: row; */
    justify-content: space-around ;
    align-items: center;
    margin: 0;
    padding: 0;
    
  }
  
  .approve{
  /*   border-style:solid; */
  /*   position: absolute; */
     width: 30vw;
  /*   height: 2.5rem; */
    margin: 0;
    padding: 0;
    z-index:5;
    display: flex;
  /* flex-direction: column; */
    justify-content: center;
    align-items: center;
  }
  .shadow{
  /*   border-style:solid; */
  /*   position: absolute; */
    width: 30vw;
    margin: 0;
    padding: 0;
    z-index:5;
    display: flex;
  /* flex-direction: column; */
    justify-content: center;
    align-items: center;
  }


#yesbtn{
  position: absolute;
  width: 40vw;
  height: 10vw;
  bottom: 2rem;
  left: 1rem;
  margin: 0;
  padding:0;
}

#cancelbtn{
  position: absolute;
  width: 40vw;
  height: 10vw;
  bottom: 2rem;
  right: 1rem;
  margin: 0;
  padding:0;
}

#surecontainer{
  position: fixed;
  background: var(--bg-color);
  top: 100vh;
  left: 0;
  margin: 0;
  padding:0;
  width: 100vw;
  height: 100vh;
  z-index: 52;
}
.animatesurecontainer{
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-name: animation_surecontainer;
}
.animatesurecontainerout{
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-name: animation_surecontainer_out;
}
@keyframes animation_surecontainer_out {
  from {
    top: 0;
  }
  to {
    top: 100vh;
  }
}

@keyframes animation_surecontainer {
  from {
    top: 100vh;
  }
  to {
    top: 0;
  }
}

#loading{
  position: fixed;
  background: var(--bg-color);
  margin: 0;
  padding:0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 6;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity:1;


}

#loadingtext{
  font-size: 2rem;
  z-index: 6;
  margin: 0;
  padding: 0;
  opacity: 0;
}

#loadingpercent{
  font-size: 1.5rem;
  z-index: 6;
  margin: 0;
  padding: 0;
  display: none;
}



#loadingbar{
  position: fixed;
  top:0;
  left:0;
  background: black;
  z-index: 4;
  width: 0vw;
  height: 2px;
  opacity:1;
  margin: 0;
  padding: 0;
  display: none;
}






#refreshchartbtn{
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
  margin: 0;
  padding:0;
  text-align: center;
  z-index:5;
  rotate: 0deg;
}
.animaterefreshbtn{
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-name: animation_refreshbtn;
}

@keyframes animation_refreshbtn{
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}


.searchbtns {
  /*   border-style:solid; */
    border: 0px;
    z-index: 5;
    color: rgba(49, 49, 49, 0.6);
    text-shadow: 0 0 0px rgba(0,0,0,0);
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    background: none;
    padding: 0;
    margin: 0;
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity:1;
  }
.searchbtns:active {
    border-radius: 50px;
    background: #e0e0e0;
    box-shadow: 4px 4px 12px #c5c5c5,
      -4px -4px 12px #fbfbfb;
}
  
.searchbtns_active{
    border-radius: 50px;
    background: #e0e0e0;
    box-shadow: 4px 4px 12px #c5c5c5,
      -4px -4px 12px #fbfbfb;
}
  
#searchbtns{
    position: fixed;
  /*   border-style:solid; */
  /*   border-color: red; */
    margin: 0;
    padding:0;
    bottom: 0;
    width:100vw;
    height: 6.5vh;
    display: flex;
  /*   flex-wrap: wrap; */
    align-content: center;
    justify-content: center;
}
  
#searchbtns botton{
    flex-grow: 2;
}
#searchbtns div{
  /*   width: 3rem; */
    z-index: 4;
    margin:0;
    padding:0;
  
}
  
  
#zoombtn{
  /*   border-style: solid; */
  position: fixed;
  left: 0;
  top: 0rem;
  width: 100vw;
  z-index: 51;
  height: 61.8vh;
  margin: 0;
  padding: 0;
  display: "block";
}
.grafik{
  /*   border-style: solid; */
  right: 0;
  top: 0;
  width: 100vw;
  font-weight:500;
  font-size: 10vh;
  z-index: 0;
  height: 61.8vh;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

.last{
  right: 0;
  top: 0;
  width: 100vw;
  margin: 0;
  padding: 0;
  z-index: 0;
  height: 38.2vh;
}

.grafikinnen{
  /*   border-style: solid; */
  width: 90%;
  height: 90%;
  z-index: 0;

  margin: 0;
  padding: 0;
}

.sun{
  top: 0px;
  left: 0px;
  padding: 0;
  margin: 0;
  position: fixed;
  z-index:4;
  width: 100vw;
  height: 100vh;
  background:-webkit-radial-gradient(circle at 0% 0%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 100%);
  background:radial-gradient(circle at 0% 0%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 100%);


}

.blurbg{
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  top: 61.8vh;
  bottom: 0;
  width: 100vw;
  position: fixed;
  z-index: 1;
  left: 0px;
  padding: 0;
  margin: 0;
}
/* .textee{
opacity=1;
z-index: 2;
} */

#textee{
  pointer-events: none;
  left:0;
  top:61.8vh;
  bottom: 0;
  width: 100vw;
  position: fixed;
  z-index: 2;
  margin:0;
  padding:0;
  display: -webkit-flex;
  display: flex;
}




.buttonp:active {
  box-shadow: 4px 4px 12px #c5c5c5,
    -4px -4px 12px #fbfbfb;
}

#state_con{
  /*   border-style: solid; */
    position: absolute;
    top: 10vh;
    bottom: 6.5vh;
    left:33.3vw;
    right: 33.3vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  
#pattern_order_trade_id_con{
  /*   border-style: solid; */
    position: absolute;
    top: 10vh;
    bottom: 6.5hv;
    left: 66.6vw;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start ;
    align-items: center;
    margin: 0;
    padding: 0;
  }

#patternid{

  color: rgba(49, 49, 49, 1);
  font-size: 1rem;
  width: 30vw;
  margin: 0;
  padding: 0;
  z-index:2;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}

#orderid{

  color: rgba(49, 49, 49, 1);
  font-size: 1rem;
  width: 30vw;
  margin: 0;
  padding: 0;
  z-index:2;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}

#tradeid{

  color: rgba(49, 49, 49, 1);
  font-size: 1rem;
  width: 30vw;
  margin: 0;
  padding: 0;
  z-index:2;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}



#state{
  color: rgba(49, 49, 49, 1);
  font-size: 1rem;
  font-weight: 500;
  width: 30vw;
  margin: 0;
  padding: 0;
  z-index:2;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}

#pcs{
  color: rgba(49, 49, 49, 1);
  font-size: 1rem;
  font-weight: 500;
  width: 30vw;
  margin: 0;
  padding: 0;
  z-index:2;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}


#name {
  color: rgba(49, 49, 49, 1);
  text-shadow: 0.1rem 0.1rem 0.2rem rgba(49, 49, 49, 0.4), -0.1rem -0.1rem 0.2rem rgba(255, 255, 255, .8);
  font-size: 1.4rem;
  font-weight: 500;
  padding:0;
  margin: 0;
  z-index: 2;
}

#pair_name_con{
  left: 50px;
  right: 15px;
  top: 15px;
  text-align: left;
  margin: 0;
  position: absolute;
  color: rgba(49, 49, 49, 1);
  font-size: 2rem;
  border-bottom: 1px solid black;
  z-index: 2;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}


#pair {
  text-align: left;
  margin: 0;
  color: rgba(49, 49, 49, 1);
  font-size: 1.2rem;
  z-index: 2;

}




@keyframes scrollstart {
  0% {
    color: rgba(49, 49, 49, 0.6);
    opacity: 1;
    box-shadow:  0.5rem 0.5rem 1rem #c5c5c5, -0.5rem -0.5rem 1rem #fbfbfb;
  }

  36% {
    color: rgba(49, 49, 49, 0.6);
    opacity: 1;
    box-shadow:  0rem 0rem 0rem #c5c5c5, 0rem 0rem 0rem #fbfbfb;
  }

  48% {
    color: rgba(49, 49, 49, 0);
    opacity: 1;
    box-shadow:  0rem 0rem 0rem #c5c5c5, 0rem 0rem 0rem #fbfbfb;
  }
  60% {
    color: rgba(49, 49, 49, 0);
    opacity: 0;
    box-shadow:  0rem 0rem 0rem #c5c5c5, 0rem 0rem 0rem #fbfbfb;
  }
  100% {
    color: rgba(49, 49, 49, 0);
    opacity: 0;
    box-shadow:  0rem 0rem 0rem #c5c5c5, 0rem 0rem 0rem #fbfbfb;
  }
}
.scrollin {
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-name: scrollstart;
}

@keyframes scrollstop {
  0% {
    color: rgba(49, 49, 49, 0);
    opacity: 0;
    box-shadow:  0rem 0rem 0rem #c5c5c5, 0rem 0rem 0rem #fbfbfb;
  }

  20% {
    color: rgba(49, 49, 49, 0);
    opacity: 1;
    box-shadow:  0rem 0rem 0rem #c5c5c5, 0rem 0rem 0rem #fbfbfb;
  }

  33% {
    color: rgba(49, 49, 49, 0.6);
    opacity: 1;
    box-shadow:  0rem 0rem 0rem #c5c5c5, 0rem 0rem 0rem #fbfbfb;
  }
  66% {
    color: rgba(49, 49, 49, 0.6);
    opacity: 1;
    box-shadow:  0.7rem 0.7rem 1rem #c5c5c5, -0.7rem -0.7rem 1rem #fbfbfb;
  }
  100% {
    color: rgba(49, 49, 49, 0.6);
    opacity: 1;
    box-shadow:  0.5rem 0.5rem 1rem #c5c5c5, -0.5rem -0.5rem 1rem #fbfbfb;
  }
}
.scrollout {
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-name: scrollstop;
}





@keyframes scrollstarttextee {
  0% {
    opacity: 1;
  }  
  48% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.scrollintextee {
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-name: scrollstarttextee;
}

@keyframes scrollstoptextee {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.scrollouttextee {
  animation-duration: 300ms;
  animation-fill-mode: forwards;
  animation-name: scrollstoptextee;
}