body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: -1px 0px 0px 0px !important;
  padding: 0;
  user-select:none;
  text-shadow: 0 0 0.4vh black;
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;
}
a {
  text-decoration: none;
  color: unset; 
}

/*Default Quest*/
#default_quest {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position:absolute;
  left:0;
  top:0;
}
#default_quest_flow{
  //display: none;	
  width: 100%;
  //max-width:600px;
  height: 100%;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);	
  text-align:center; 
}
#default_quest_header {	
  //display: none;
  width: 100%;
  height: 8%;
  margin-top:-0,1%;
  position:absolute;
  top: 4%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  z-index:1; 
  text-transform: uppercase; 
}
#default_quest_header_bg{
  width: 100%;
  height: 100%;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);	
  background-color: #8f72f2;
  opacity: 0.85;
}	
#default_quest_header_left_label {
  width: 30%;
  height: 35%;  
  position:absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
  z-index: 2;
  background-image: linear-gradient(to right, rgba(203, 8, 219, 1), rgba(255, 0, 0, 0));
}
#default_quest_header_left_label span{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 300;
  color: #fff;
  font-size: 1.3vh;  
}
#default_quest_header_right_label {
  width: 30%;
  height: 35%;
  position:absolute;
  top: 50%;
  right: 0%;
  transform: translate(0%, -50%);
  z-index: 2;
  background-image: linear-gradient(to left, rgba(203, 8, 219, 1), rgba(255, 0, 0, 0));
}
#default_quest_header_right_label b{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 60%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 300;
  color: #fff;
  font-size: 1.3vh; 
}

#default_quest_header_middle_up_label {
  width: 24%;
  height: 70%; 
  position: absolute;  
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  color: #fff;
  font-size: 1.8vh;
  font-weight: 300;
  z-index: 2; 
}
#default_quest_header_middle_up_label_bg {
  width: 100%;
  height: 100%; 
  position: absolute;  
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  background-color: #000000;
  border-radius: 0.7vh;
  opacity: 0.3;
}
#default_quest_header_middle_label_name{ 
  position: absolute;
  top: 22%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
}
#default_quest_header_middle_label_value {
  position: absolute;
  top: 65%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  color: #fff;
  font-size: 2.8vh;
  font-weight: 700;
  z-index: 2; 
}

#default_quest_end_button {
  width: 15vh;
  height: 7vh;
  color: #fff;
  font-size: 1.8vh;
  bottom: 5vh;
  right: 4.5vw; 
  position: absolute;
  text-align:center;
  z-index:900;
  text-transform: uppercase;
  font-weight: 400;
}
#default_quest_end_button_bg {
  width: 100%;
  height: 100%;
  background-color: #cb08db;
  border-radius: 0.7vh;
  opacity: 0.85;
}
#default_quest_end_button:active {
  width: 14.5vh;
  height: 6.8vh;
  font-size: 1.75vh;  
}
#default_quest_end_button span{
  position: absolute;  
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  user-select:none;
}
#default_quest_restart_button {
  width: 15vh;
  height: 7vh;
  color: #fff;
  font-size: 1.8vh;
  bottom: 5vh;
  text-align:center;
  left: 4.5vw; 
  position: absolute;
  z-index:900;
  text-transform: uppercase;
  font-weight: 400;  
}
#default_quest_restart_button_bg {
  width: 100%;
  height: 100%;
  background-color: #8f72f2;
  border-radius: 0.7vh;
  opacity: 0.85;
}
#default_quest_restart_button:active {
  width: 14.5vh;
  height: 6.8vh;
  font-size: 1.75vh; 
}
#default_quest_restart_button span{
  position: absolute;  
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  user-select:none;  
}

#default_quest_scanning {
  //display: none;	
  width: 35vh;
  height: 1.5vh;
  position: absolute;   
  top: 65%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  z-index:10;
  text-align: center;
  background-image:url('../../assets/css/img/Level_PB_BG.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;  
}
#default_quest_scanning img{
  width: 70%;
  height: 0.5vh;
  padding-left:0.5vh;  
  padding-top:0.5vh;  
  float: left;
  margin: auto;  
}
#default_quest_scanning span{
  position: absolute;   
  top: -90%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.8vh;
  font-weight: 300;
  color:#ffffff;  
  user-select:none;  
}
#default_quest_scanning_success {
  display: none;	
  width: 25vh;
  height: 25vh;
  position: absolute;   
  top: 40%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);    
  z-index:15;
  text-align: center;  
}
.default_quest_scanning_bg {
  width: 100%;
  height: 100%;
  background-color: #000000;
  border-radius: 0.7vh;
  opacity: 0.80;  
}
#default_quest_scanning_success_icon {
  width: 9vh;
  height: 9vh;
  position: absolute;
  top: 25%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('../../assets/css/img/Anch_Success.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;   
}
#default_quest_scanning_success span{
  width: 90%; 
  position: absolute;  
  top: 60%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  font-weight: 700;
  font-size: 2.5vh;
  color:#fff;  
  user-select:none;  
}
#default_quest_scanning_wrong {
  display: none;	
  width: 25vh;
  height: 25vh;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);    
  z-index:15;
  text-align: center; 
}
#default_quest_scanning_wrong_icon{
  position: absolute;   
  top: 25%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  font-weight: 700;
  font-size: 6vh;
  color:#f13030;  
  user-select:none;  
}
#default_quest_scanning_wrong span{
  width: 90%; 
  position: absolute;   
  top: 60%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  font-weight: 700;
  font-size: 1.8vh;
  color:#fff;  
  user-select:none;  
}

/*PopUps*/
.default_quest_popup_overlay{
  //display: none;	
  width: 120vw;
  height: 120vh;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color: #000000;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.7;   
}
.default_quest_popup_bg {	
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#181224;
  border-radius: 1vh;
  border: 0.2vh solid #ffffff; 
}
.default_quest_popup_title{
  width: 100%;
  height: 7%;
  position: absolute;
  top: 14%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-weight: 700;		
  color:#ffffff;
  text-align: center;
  font-size: 3vh;
  background-image:url('../../assets/css/img/menu/menu_active_page_btn_bg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center; 
  text-transform: uppercase;	
}
#default_quest_start_popup{
  display: none;
  width: 95%;
  height: 88%;  
  max-width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 1000; 
  text-align:center;
}
#default_quest_start_popup span{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
}

#default_quest_start_popup_close_btn{
  width: 2.5vh;
  height: 2.5vh;
  position: absolute;
  top: 6%;
  right: 9%;
  transform: translate(50%, -50%); 
  text-align: center;
  z-index: 7;
  background-image:url('../../assets/css/img/menu/menu_close_btn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;	
}
#default_quest_start_popup_close_btn:active {	
  width: 2.4vh;
  height: 2.4vh;	
  background-image:url('../../assets/css/img/menu/menu_close_btn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#default_quest_start_popup_target_mask {	
  width: 60%;
  height: 40%;
  position: absolute;
  top: 43%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
 -webkit-mask-image: url('../../assets/css/img/User_Connection/Pop_Up_Field_Mask.png');
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-position: center center;
 -webkit-mask-size: 100% 100%;
  mask-image: url('../../assets/css/img/User_Connection/Pop_Up_Field_Mask.png');
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 100% 100%;   
}
#default_quest_start_popup_target_mask img{
  width: 130%;
  height: 130%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  object-fit: contain;  
}
#default_quest_start_popup_descriprion {
  width: 90%;
  height: 15%;	
  position: absolute;  
  top: 70%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  font-weight: 300;
  font-size: 1.8vh;      
}
#default_quest_start_popup_start_btn{
  width: 45%;
  height: 8%;
  position: absolute;
  top: 85%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  color: #ffffff;
  font-size: 1.8vh;
  z-index: 6;
  border-radius: 1vh;
  border: 0.3vh solid #27f697; 
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;		
  text-transform: uppercase; 
}
#default_quest_start_popup_start_btn:active {
  border: 0.2vh solid #ffffff; 
}

#default_quest_task_popup {
  display: none;
  width: 95%;
  height: 88%;  
  max-width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999; 
  text-align:center;
}
#default_quest_task_popup span{
  width:90%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
}
#default_quest_task_popup_target_mask {	
  width: 60%;
  height: 40%;
  position: absolute;
  top: 43%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
 -webkit-mask-image: url('../../assets/css/img/User_Connection/Pop_Up_Field_Mask.png');
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-position: center center;
 -webkit-mask-size: 100% 100%;
  mask-image: url('../../assets/css/img/User_Connection/Pop_Up_Field_Mask.png');
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 100% 100%;    
}
#default_quest_task_popup_target_mask img{
  width: 130%;
  height: 130%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  object-fit: contain;   
}
#default_quest_popup_descriprion {
  width: 90%;
  height: 15%;	
  position: absolute;  
  top: 70%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  font-weight: 300;
  font-size: 1.8vh;      
}
#default_quest_task_popup_start_btn{
  width: 45%;
  height: 8%;
  position: absolute;
  top: 85%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  color: #ffffff;
  font-size: 1.8vh;
  z-index: 6;
  border-radius: 1vh;
  border: 0.3vh solid #27f697; 
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;		
  text-transform: uppercase;  
}
#default_quest_task_popup_start_btn:active {
  border: 0.2vh solid #ffffff; 
}

#default_quest_result_popup {
  display: none;
  width: 95%;
  height: 80%;  
  max-width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999; 
  text-align:center;
}
#default_quest_result_popup span{

  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
}
#default_quest_result_popup_title{
  width: 90%;	
  position: absolute;
  top: 8%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;		
  color:#f2d40d;
 -webkit-text-stroke-width: 1.0px; 
 -webkit-text-stroke-color: #fff;  
  text-align: center;
  font-size: 4vh;   
  z-index:6;   	
}
#default_quest_result_popup_descr{
  width: 90%;
  height: 15%;	
  position: absolute;  
  top: 70%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  font-weight: 500;
  font-size: 2.2vh;    	
}
#default_quest_result_popup_result{	
  width: 40%;
  height: 30%;  
  position: absolute;
  top: 43%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#cb08db;
  border-radius: 1vh;    	
}
#default_quest_result_popup_text{
  width: 140%;
  height: 35%;  	
  position: absolute;
  top: 15%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 700;		
  background-color:#8f72f2;
  border-radius: 1vh; 
  font-size: 2.2vh;
  text-transform: uppercase;  
}
#default_quest_result_popup_value{  	
  position: absolute;
  top: 48%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);f;
  font-weight: 300;		
  font-size: 2.4vh;   
}
#default_quest_result_popup_points{  	
  position: absolute;
  top: 75%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);f;
  font-weight: 700;		
  font-size: 8vh;   
}
#default_quest_result_popup_finish_btn{
  width: 45%;
  height: 8%;
  position: absolute;
  top: 85%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  color: #ffffff;
  font-size: 1.8vh;
  z-index: 6;
  border-radius: 1vh;
  border: 0.3vh solid #27f697; 
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;		
  text-transform: uppercase;		
}
#default_quest_result_popup_finish_btn:active {
  border: 0.2vh solid #ffffff; 
}

#wayspot_tracking_status{
  width: 8vh;
  height: 8vh;
  position: absolute;  
  top:20%;
  left:1%;
  z-index:10;
  border-radius: 0.7vh;
  text-align: center;  
}
#wayspot_tracking_status_bg {
  width: 100%;
  height: 100%;
  background-color: #000000;
  border-radius: 0.7vh;
  opacity: 0.85;
}

#wayspot_tracking_status span{
  width: 95%;
  position: absolute;
  top: 20%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 0.9vh;  
  color:#ffffff;  
  font-weight: 300;  
}
#anchor_load_status_true{
  display: none;	
  width: 4vh;
  height: 4vh;
  position: absolute;
  top: 65%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  user-select:none;  
}
.anchor_load_status_true_img{	
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('../../assets/css/img/Anch_Success.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;   
}
#anchor_load_status_load{
  //display: none;	
  width: 4vh;
  height: 4vh;
  position: absolute;
  top: 65%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
}
#anchor_load_grid_btn, #wayspot_rescan_btn{
  width: 8vh;
  height: 8vh;   
  z-index:10;
  text-align: center;
  font-size: 1.2vh;  
}
#anchor_load_grid_btn_bg, #wayspot_rescan_btn_bg {
  width: 100%;
  height: 100%;
  background-color: #8f72f2;
  border-radius: 0.7vh;
  opacity: 0.85;
}

#anchor_load_grid_btn:active, #wayspot_rescan_btn:active{  
  width: 7.8vh;
  height: 7.8vh;  
  font-size: 1.15vh;   
}

#anchor_load_grid_btn{
  position: absolute;
  top: 30%;
  left: 1%;	
}
#anchor_load_exit_btn, #wayspot_rescan_btn{
  position: absolute;
  top: 40%;
  left: 1%;	
}

#anchor_load_grid_btn span, #wayspot_rescan_btn span{   
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);    
  color:#ffffff;  
  font-weight: 400;	
}
/*Loading_Start*/
.loaderStatus {
  //display: none;
  width: 28px;
  height: 28px;
  border: 2px dotted #fc24ee;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}
.loaderStatus::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 2px dotted #7352f7;
  border-style: solid solid dotted;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
  .loadingStatus {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    }
/*Loading_End*/