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;
}
a {
  text-decoration: none;
  color: unset; 
}

/*Loading screen and permissions Start*/
#loadBackground, #requestingCameraPermissions{
  background-color: #181224 !important;
}
#loadImage{
  top: auto !important;
  bottom: 17% !important;
}
/*Wallet Connect PopUp*/
#WEB3_CONNECT_MODAL_ID {
  z-index:999 !important;
}

/*General UI settings start*/
.screen-main-ui {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position:absolute;
  left:0;
  top:0;
  //transition: left 0.5s ease-out;
}
/*Launch Screen*/
#launch_screen {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position:absolute;
  left:0;
  top:0;
  background-color: #002456;
}
#launch_screen_content {
  width: 100%;
  height: 100%;
  position:absolute;  
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/launch_screen_img.png');
  background-size: 100% auto; 
  background-repeat: no-repeat;
  background-position: center;
}
/*General UI settings end*/
/*Loading_Start*/
.loader {
  //display: none;
  width: 60px;
  height: 60px;
  border: 3px 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;
  z-index: 99;
}
.loader::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted #7352f7;
  border-style: solid solid dotted;
  width: 50px;
  height: 50px;
  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);
  }
}
  .loading {
    display: flex;
    display: none;
    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*/
/*Passcode_Start*/
#passcode_flow {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;	
  text-align: center;
  z-index: 2;
  position:fixed;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  background-color: #130a1d;  
}
#passcode_dexgo_link{
  //display:none;	
  width: 100%;
  height: 20%;
  text-align:center;  
  position:fixed;
  top: 13%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #2c2c2c;
}
#passcode_dexgo_link_description{	
  color: #ffffff;
  font-size: 3vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;   
  position:absolute;
  top: 25%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#passcode_dexgo_link_link{	
  color: #ffffff;
  font-size: 5vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;   
  position:absolute;
  top: 60%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-decoration: underline;
}
#passcode {
  width: 75%;
  height: 50%;
  margin: 0;
  padding: 0;	
  position:absolute;  
  top: 48%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color:#ffffff;
}
#passcode p {
  padding: 0 15vw;
}
#passcode_numpad {
  background-color: #000000;
  margin: 0 auto;
  width: 100%;
  border-radius: 3vh;
  padding: 2vh 0;
}
#passcode_numpad a:active {
  color:#14ff61;
  font-size: 4.9vh;
}
#passcode_numpad a {
  text-align: center;
  font-size: 5vh;
  display: inline-block;
  width: 32%;
  height: 10vh;
  line-height: 70px;
}
#passcode_enter {
  background-color: #000000;
  border-radius: 3vh;
  //border: 2px solid #ffffff;
  font-size: 5vh;
  //margin-top: 4vh;
  width: 75%;
  height: 10%;
  position:absolute;  
  top:80%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color:#ffffff;
}
#passcode_enter:active {
  color:#14ff61;
  border-radius: 3vh;
  font-size: 4.9vh;
  width: 74%;
  height: 9.8%;  
}
#passcode_enter span{
  position:absolute;  
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
/*Passcode_End*/


/*MapBoxStyles_Start*/
#mapbox-map {
  position: absolute;
  width: 100%;
  height: 110%;
  left: 0;
  top: -5%;
}
#Anchor_Map #mapbox-map { height: 100%; } 
#main-page #mapbox-map { top: -45%; }
#route-map #mapbox-map { top: -19%; }
.mapboxgl-marker-anchor-center {display: none;}
/*MapBoxStyles_End*/

/*UserLocationMarkerStyles_Start*/
.marker {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  //background-image: url('./assets/css/img/Routes/RM_Quest_Marker.png');
  background-size: 100%;
  width: 2em;
  height: 2em;
}
.marker.traveled {
  //background-image: url('./assets/css/img/Routes/RM_Quest_Marker_Comp.png');
}

#user-location-marker {
  width: 6.5vh;
  height: 6.5vh; 
  cursor: pointer;  
  position: relative;	
  z-index: 2; 
}
.user-location-marker_img {
  width: 100%;
  height: 100%; 
  background-image: url('./assets/css/img/map/map_player_marker.png');
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center;
  transform: rotate(0deg);
}
/*Route Map Distance*/
.route_map_quest_distance{
  width: 6.5vh;
  height: 6.5vh;  
  position: absolute;               
  top: 50%;
  left: 50%;	
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
#main_page .route_map_quest_distance{
  display: none;
}
.route_map_quest_distance_flow{
  width: 7vh;
  height: 7vh;  
  position: absolute;               
  top: -60%;
  right: -60%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/Routes/RM_Distance_Marker2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;  
}
.route_map_quest_distance_line {
  width: 7vh;
  height: 0.1vh;  
  position: absolute;               
  top: 2%;
  left: 19%;	
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  transform: rotate(-65deg);
}
#route_map_quest_distance_total{		  
  font-size: 1.8vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700; 
  color: #ffffff;  
  z-index: 10;
  position: absolute;
  top: 22%;
  left: 50%;	
  margin-right: -50%;
  transform: translate(-50%, -50%);;
}
.route_map_quest_distance_text{		  
  font-size: 1.3vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400; 
  color: #ffffff;  
  z-index: 10;
  position: absolute;
  top: 48%;
  left: 50%;	
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#route_map_quest_distance_current{		  
  font-size: 1.8vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700; 
  color: #ffffff;  
  z-index: 10;
  position: absolute;
  top: 73%;
  left: 50%;	
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
/*Route Map Distance End*/
/*UserLocationMarkerStyles_End*/
/*Route Marker*/
#route_marker, .route-marker, .quest-marker{
  width: 8.5vh;
  height: 8.5vh;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color:#000000;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400; 
  color: #ffffff;
  font-size: 0.8vh;	
}
#route_marker.active, .route-marker.active {
  transform: scale(1.25);
  transition: all .2s ease-in-out;
}
#route_marker.traveled, .route-marker.traveled {
  display: none;
}
#route_marker_flow{
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  //opacity:50%;  
}
#route_marker_flow_mask {
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
 -webkit-mask-image: url('./assets/css/img/map/map_route_marker_mask.png');
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-position: center center;
 -webkit-mask-size: 100% 100%;
  mask-image: url('./assets/css/img/map/map_route_marker_mask.png');
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 100% 100%;
  z-index:1;  
}
#route_marker_flow_mask img{
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.route_marker_flow_bg{
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_route_marker.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}
.route_marker_flow_bg_traveled{
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_route_marker_traveled.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}
.route_marker_flow_name_style{
  width: 7vh;
  height: 3vh;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.route_marker_flow_name_style span{
  width: 7vh;
  height: 2.5vh;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #ffffff;
  font-size: 0.8vh;
  line-height:1vh;
}
/*Route Marker End*/

/*Anchors_Start*/
/*Anchor_Map*/
#anchor_map {
  width: 100%;
  height: 200%;	
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  	
}
#anchor_map_map_block {
  width: 100%;
  height: 100%;	
  margin:0px;
  padding:0px 0px 0px 0px;
  z-index:1;  
}
#anchor_map_wayspot_marker, .wayspot-marker{
  width: 6vw;
  height: 6vw;
  cursor: pointer;
  position: absolute;  
  top: 45%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  z-index:10;
  background-image: url('./assets/css/img/Routes/RM_Quest_Marker.png');
  background-size: 100%; 
  background-repeat: no-repeat;
  background-position: center;
  display: none;
}
#anchor_map_wayspot_marker p, .wayspot-marker p{
  position: absolute;  
  top: -120%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  z-index:10;
  color: #000000;
  font-size: 2.5vw;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
   text-shadow: 
    0.3vw 0 0 white,
    0 -0.3vw 0 white, 
    0.3vw 0 0 white, 
    0 0.3vw 0 white;   
}
#anchor_map_localization_btn{
  width: 42vw;
  height: 14vw;
  position: absolute; 
  top: 70%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  z-index: 10;
  text-align: center;
  background-image:url('./assets/css/img/L_UI_Big_Btn.png');
  background-size: contain;
  background-repeat: no-repeat;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;	
  font-size: 2.5vw;
  display: none;
}
#anchor_map_localization_btn:active {
  background-image:url('./assets/css/img/L_UI_Big_Btn_Active.png');
  background-size: contain;
  background-repeat: no-repeat;
  font-size: 2.2vw;
}
#anchor_map_localization_btn p{ 
  margin: 0;
  position: absolute;               
  top: 50%;
  left: 50%;	
  margin-right: -50%;
  transform: translate(-50%, -50%);	
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;  
  font-weight: 700;
  //text-shadow: 
    0.3vw 0 0 #f2d40d,
    0 -0.3vw 0 #f2d40d, 
    0.3vw 0 0 #f2d40d, 
    0 -0.3vw 0 #f2d40d;   
}
#anchor_map_selected-wayspot-name {
  position: absolute;
  bottom: 24%;
  left: 50%;
  padding: 5px;
  z-index: 10;
  background-color: #ffffff;
  text-align: center;
  transform: translate(-50%, -50%);
  border: 1px solid #000;
  width: 80%;
}
#anchor_map_gps-switch {
  position: absolute;
  top: 26%;
  left: 5%;
  padding: 12px;
  z-index: 10;
  background-color: #ffffff;
  text-align: center;
  border: 1px solid #000;
}
#anchor_map_selected-wayspot-name p, #anchor_map_gps-switch p {
  margin: 0;
}
/*Anchor_Load*/
/*#anchor_load {
  width: 100%;
  height: 100%;	
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
}
#anchor_load_title{
  width: 70vw;
  height: 8vh;
  position: absolute;  
  top: 1%;
  left: 1%; 
  z-index:10;
  background-image: url('./assets/css/img/Anch_Rectangle.png');
  background-size: 100% 100%; 
  background-repeat: no-repeat;
  background-position: center;
  text-align: left;  
}
#anchor_load_title p{
  margin-top: 2.9vh;
  margin-left: 3vw;
  font-size: 1.6vh;  
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;  
  font-weight: 700;  
}
#anchor_load_status, #wayspot_tracking_status{
  width: 8vh;
  height: 8vh;
  position: absolute;  
  top: 1%;
  right: 1%; 
  z-index:10;
  background-image: url('./assets/css/img/Anch_Square.png');
  background-size: 100% 100%; 
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;  
}
#wayspot_tracking_status {
  top:20%;
  left:1%;
  right:unset;
}
#anchor_load_status p, #wayspot_tracking_status p{
  margin-top: 0.5vw;
  font-size: 0.9vh;  
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;  
  font-weight: 700;  
}
#anchor_load_status_true{
  display: none;	
  width: 4vh;
  height: 4vh;
  position: absolute;
  top: 65%;
  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;  
}
#anchor_load_status_load{
  //display: none;	
  width: 4vh;
  height: 4vh;
  position: absolute;
  top: 65%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/User_Connection/UC_Spinner.gif');
  background-size: 100% 100%; 
  background-repeat: no-repeat;
  background-position: center;  
}
#anchor_load_load_anchors_btn, #anchor_load_remove_anchors_btn, #anchor_load_grid_btn, #anchor_load_exit_btn, #anchor_load_back_btn, #anchor_load_save_btn, #wayspot_rescan_btn{
  width: 8vh;
  height: 8vh;   
  z-index:10;
  background-image: url('./assets/css/img/Anch_Btn.png');
  background-size: 100% 100%; 
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  font-size: 1.2vh;  
}
#anchor_load_load_anchors_btn:active, #anchor_load_remove_anchors_btn:active, #anchor_load_grid_btn:active, #anchor_load_exit_btn:active, #anchor_load_back_btn:active, #anchor_load_save_btn:active, #wayspot_rescan_btn:active{  
  z-index:10;
  background-image: url('./assets/css/img/Anch_Btn.png');
  background-size: 90% 90%; 
  background-repeat: no-repeat;
  background-position: center;
  font-size: 1.1vh;   
}
#anchor_load_load_anchors_btn{
  position: absolute;
  top: 10%;
  left: 1%;	
}
#anchor_load_remove_anchors_btn{
  position: absolute;
  top: 20%;
  left: 1%;	
}
#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_back_btn{
  position: absolute;
  bottom: 7%;
  left: 10%;	
}
#anchor_load_save_btn{
  position: absolute;
  bottom: 7%;
  Right: 10%;	
}
#anchor_load_load_anchors_btn p, #anchor_load_remove_anchors_btn p, #anchor_load_grid_btn p, #anchor_load_exit_btn p, #anchor_load_back_btn p, #anchor_load_save_btn p, #anchor_load_add_btn p, #wayspot_rescan_btn p{   
  position: absolute;
  top: 35%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);    
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;  
  font-weight: 700;	
}
#anchor_load_add_btn{
  width: 12vh;
  height: 12vh;
  position: absolute;
  bottom: 10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%);  
  z-index:10;
  background-image: url('./assets/css/img/Anch_Circle.png');
  background-size: 100% 100%; 
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  font-size: 1.2vh;  
}
#anchor_load_add_btn:active{  
  z-index:10;
  background-image: url('./assets/css/img/Anch_Circle.png');
  background-size: 90% 90%; 
  background-repeat: no-repeat;
  background-position: center;
  font-size: 1.1vh;   
}
#anchor_load_aim{
  width: 6vh;
  height: 6vh;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  z-index:10;
  background-image: url('./assets/css/img/Anch_Aim.png');
  background-size: 100% 100%; 
  background-repeat: no-repeat;
  background-position: center; 
}*/
/*Anchor_PopUp*/
#anchor_load_popup {
  //display: none;	
  width: 90%;
  height: 75%;  
  max-width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/PopUp1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99;  
}
#anchor_load_popup_title{
  width: 90%;	
  position: absolute;
  top: 8%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;		
  color:#f2d40d;
 -webkit-text-stroke-width: 1.0px; 
 -webkit-text-stroke-color: #ffffff;  
  text-align: center;
  font-size: 5vh;   
  z-index:6;   	
}
#anchor_load_popup_descr{
  width: 70%;
  height: 65%;  
  position: absolute;
  top: 47%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;		
  color:#ffffff;
  text-align: center;
  font-size: 3vh;
  background-image:url('./assets/css/img/PopUp2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;     	
}
#anchor_load_popup_descr span{
  width: 90%;	
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);      	
}
#anchor_load_popup_btn_flow{
  width: 90%;
  height: 10%;  
  position: absolute;
  top: 89%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);   	
}
#anchor_load_popup_btn{
  width: 22vh;
  height: 8vh;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  color: #ffffff;
  font-size: 2.5vh;
  z-index: 6;
  background-image:url('./assets/css/img/L_UI_Big_Btn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;		
}
#anchor_load_popup_btn:active {
  background-image:url('./assets/css/img/L_UI_Big_Btn_Active.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 2.4vh;
}
#anchor_load_popup_btn span{	
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  user-select:none;
  text-transform: uppercase;
}
/*Anchors_End*/

/*Global Background start*/ 
#global-background {	
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  background-color:#181224;  
}
#global-background_up_gradient {
  width: 100%;
  height: 20%;
  position:absolute;  
  top: 10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  background: linear-gradient(to bottom, #8a1198, #181224);    
}

/*Global Background end*/ 

/*Global header start*/ 
#global_header{
  //display:none;	
  width: 100%;
  height: 8%; 
  margin: 0;
  padding: 0;
  position: absolute;  
  top: 0%;
  text-align:center;
  z-index:980;	
}
#global_header_bg{	
  width: 100%;
  height: 100%; 
  margin: 0;
  padding: 0;
  background-color:#000000;
  opacity: 0.85;  
}
#global_header_logo{
  //display:none;
  width: 14vw;
  height: 75%; 
  position:absolute;
  top: 50%;
  left: 10%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/header/header_logo_anim.gif');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;  
}
#global_header_logo_progress{
  display:none;
  width: 14vw;
  height: 75%; 
  position:absolute;
  top: 50%;
  left: 10%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/header/header_loading_logo.gif');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;  
}
#global_header_connect_wallet_btn{
  //display:none;
  width: 38vw;
  height: 75%;
  max-width:200px;
  color: #ffffff;
  text-decoration: none;
  font-size: 1.7vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;   
  position:absolute;
  top: 50%;
  left: 52%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background-image:url('./assets/css/img/header/header_wallet_btn.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  text-transform: uppercase;
}
#global_header_connect_wallet_btn span{ 
  width: 78%;
  position:absolute;
  top: 50%;
  left: 55%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 0.4vh black;
}
#global_header_connect_wallet_btn:active{	
  //font-size: 1.55vh;
  background-image:url('./assets/css/img/header/header_wallet_btn_active.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#global_header_balance{
  display:none;
  width: 36vw;
  height: 75%;
  max-width:300px;
  text-align:left;
  color: #ffffff;
  font-size: 1.5vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;   
  position:absolute;
  top: 50%;
  left: 52%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#global_header_balance_bg{
  //display:none;
  width: 100%;
  height: 100%; 
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/header/header_wallet_label.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#global_header_balance_progress{
  display:none;
  width: 100%;
  height: 100%; 
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/header/header_wallet_label_anim3.gif');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#global_header_balance_nft{	
  width:80%; 
  position:absolute;
  top: 25%;
  left: 47%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
} 
#global_header_balance_usd{	
  width:80%;  
  position:absolute;
  top: 75%;
  left: 47%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
} 
.global_header_balance_nft_usd_text{
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  //color:#cbcbcb;
  font-size: 1.7vh;
  text-transform: uppercase;
}
#global_header_balance_nft_value, #global_header_balance_usd_value{
  font-size: 1.7vh;
}
#global_header_menu_btn{	
  width: 10vw;
  height: 45%;  
  position:absolute;
  top: 50%;
  left: 90%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/header/header_menu_icon.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#global_header_create_route{
  display:none;
  width: 45%;
  height: 100%; 
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1.6vh;
  color: #ffffff;
}
#global_header_create_route span{
  width: 100%;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
}

/*Global Header Wallet PopUp*/ 
#global_header_connect_wallet_popup {
  width: 90%;
  height: 80%;  
  max-width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999; 
  text-align:center;
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;
  text-transform: uppercase;
  display: none;
}
#global_header_connect_wallet_popup span{
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.global_header_connect_wallet_popup_bg {
  width: 100%;
  height: 100%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#181224;
  border-radius: 2vh;
  border: 0.2vh solid #ffffff; 
}
.global_header_connect_wallet_popup_overlay {
  width: 100vw;
  height: 100vh;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#181224;
  opacity: 0.7; 
}
#global_header_connect_wallet_popup_title{
  width: 100%;
  height: 7%;
  position: absolute;
  top: 14%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-weight: 700;		
  text-align: center;
  font-size: 2.5vh;
  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;
  z-index:6; 	
}
#global_header_connect_wallet_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;	
}
#global_header_connect_wallet_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;
}
#global_header_connect_wallet_popup_address{
  width: 90%;
  height: 23%;
  position: absolute;
  top: 32%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#global_header_connect_wallet_popup_seed{
  width: 90%;
  height: 23%;
  position: absolute;
  top: 58%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#global_header_connect_wallet_popup_key{
  width: 90%;
  height: 23%;
  position: absolute;
  top: 84.1%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.global_header_connect_wallet_popup_field_title_styles {
  width: 65%;
  height: 18%;  
  position: absolute;
  top: 14%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#b022d7;
  border-radius: 0.7vh 0.7vh 0vh 0vh;
  border: 0.2vh solid #ffffff; 
  font-weight: 300;
  font-size: 1.7vh;
}
#global_header_connect_wallet_popup_seed_title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}
.global_header_connect_wallet_popup_field_text_styles {
  width: 90%;
  height: 35%;  
  position: absolute;
  top: 41%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#181224;
  border-radius: 0.7vh;
  border: 0.2vh solid #ffffff; 
  word-break: break-all; 
  font-weight: 300;
  font-size: 1.3vh;
}
.global_header_connect_wallet_popup_field_copy_btn_styles{
  width: 35%;
  height: 28%;   
  position:absolute;
  top: 85%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border:0.2vh solid #14ff61;
  border-radius: 0.7vh;
  font-weight: 400;
  font-size: 1.7vh;
}
.global_header_connect_wallet_popup_field_copy_btn_styles:active {
  width: 34%;
  height: 27%;
  font-size: 1.65vh;
}

/*Main Menu start*/ 
#global_header_menu {
  //visibility: hidden; 	/*Использовать "visibility: visible;" для включения меню или закоментировать строку*/ 
  width: 100%;
  height: 100%;
  text-align:center;
  color: #ffffff;
  font-size: 2.5vh;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;  
  position:fixed;
  top: 0;
  left: 0;
  //background-color: #181224;
  z-index:1000;  
  overflow-y: auto;
  display: none;
}
#global_header_menu_bg {
  width: 100%;
  height: 100%;
  background-color: #181224;
  opacity: 0.9;
}
#global_header_menu div nav {
  width:100%;  
  list-style: none;
  padding: 0;
  margin: 0;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

#global_header_menu nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#global_header_menu nav li {
  margin: 3vh 0;
}

#global_header_menu nav a {
  width:100%;
  display: block;
  padding: 1vh;
  transition: background-color 0.3s ease;
}

#global_header_menu nav a:hover {
  width:100%;
  background-image:url('./assets/css/img/menu/menu_active_page_btn_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  color: #ffffff;
}
#global_header_menu nav a:active {
  width:100%;
  background-image:url('./assets/css/img/menu/menu_active_page_btn_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  color: #ffffff;
}
#global_header_menu_close_btn {	
  width: 3vh;
  height: 3vh;  
  position:fixed;
  top: 2.5%;
  right: 7%;
  background-image:url('./assets/css/img/menu/menu_close_btn.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;  
}
#global_header_menu_close_btn:active {
  width: 2.9vh;
  height: 2.9vh;
}
/*MainMenu end*/ 
/*Global menu end*/ 

/*MainPage start*/ 
#main_page{	
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  z-index:1;  
}

#main_page_map {	
  width: 100%;
  position:absolute;  
  height: 100%;  
  top: 54%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  text-align:center;  
}
#main_page_map img{
  width: 100%;	
  height: 100%;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  position:absolute;  
}

#main_page_map_flow {
  width: 100%;
  height: 100%;	
  margin:0px;
  padding:0px 0px 0px 0px;	
  z-index:5;  
}
#main_page_map_info {
  width: 40%;
  height: 6%;
  max-width:200px;
  position: absolute;
  top: 90%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  color: #ffffff;  
  background-color:#c105e7;
  border-radius: 1vh;
  //border: 0.2vh solid #ffffff;
  z-index: 10;
  text-transform: uppercase;  
}
#main_page_map_info:active {
  width: 39%;
  height: 5.8%;  
}

#main_page_map_info_route {
  //display:none;	
  font-size: 1.9vh;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#main_page_map_info_route:active {
  font-size: 1.8vh;
}
#main_page_map_info_start {
  display:none;
  width: 90%;
  font-size: 1.5vh;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#main_page_map_info_start:active {
  font-size: 1.4vh;
}
#main_page_map_btns {
  width: 6vh;
  height: 43vh; 
  z-index: 9;
  position: absolute;
  bottom: 14%;
  right: 3%;
}
#main_page_map_btns_bg {
  width: 100%;
  height: 100%; 
  background-color:#000000;
  border-radius:1vh;
  opacity:20%;
}
#main_page_map-zoom-out {
  width: 5vh;
  height: 5vh;
  z-index: 10;
  position: absolute;
  top: 90%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_zoom_out_btn2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center; 
}
#main_page_map-zoom-out:active {
  background-image:url('./assets/css/img/map/map_zoom_out_btn3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center; 
}
#main_page_map-zoom-in {
  width: 5vh;
  height: 5vh; 
  z-index: 10;
  position: absolute;
  top: 70%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_zoom_in_btn2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;  
}
#main_page_map-zoom-in:active {
  background-image:url('./assets/css/img/map/map_zoom_in_btn3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#main_page_map-reset{
  width: 5vh;
  height: 5vh;  
  position: absolute;
  top: 30%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_reset_map_btn2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;	  
}
#main_page_map-reset:active {
  background-image:url('./assets/css/img/map/map_reset_map_btn3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#main_page_map-routes-reset {
  width: 5vh;
  height: 5vh; 
  position: absolute;  
  top: 10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-image:url('./assets/css/img/map/map_reset_path_btn2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;	
}
#main_page_map-routes-reset:active {
  background-image:url('./assets/css/img/map/map_reset_path_btn3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;	
}

#main_page_map_share_route_btn{	
  //display: none;
  width: 5vh;
  height: 5vh;
  position: absolute;  
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_share_route_btn.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}  
#main_page_map_share_route_btn:active {
  background-image:url('./assets/css/img/map/map_share_route_btn_purple.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/*Main Page PopUps*/

#main_page_info_popup {
  width: 95%;
  height: 88%;  
  max-width: 600px;
  position: absolute;
  top: 53.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999; 
  display: none;
  text-align:center;
}
#main_page_info_popup span{
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
}
#main_page_start_route_popup {
  width: 95%;
  height: 88%;  
  max-width: 600px;
  position: absolute;
  top: 53.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  text-align:center;
  display: none;
}
#main_page_start_route_popup span{
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
}
#main_page_no_sneakers_popup {
  width: 95%;
  height: 88%;  
  max-width: 600px;
  position: absolute;
  top: 53.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  text-align:center;
  display: none;
}
#main_page_no_sneakers_popup span{
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
}
.main_page_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; 
}
.main_page_popup_inside_bg {
  width: 90%;
  height: 45%;  
  position: absolute;
  top: 63%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#181224;
  border-radius: 2vh;
  border: 0.2vh solid #ffffff; 
}
.main_page_popup_overlay {
  width: 120vw;
  height: 120vh;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#181224;
  opacity: 0.7; 
}
#main_page_info_popup_reset_route_btn{
  width: 35%;
  height: 7%;
  position: absolute;
  top: 92%;
  left: 25%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  color: #ffffff;
  font-size: 1.8vh;
  z-index: 6;
  border-radius: 1vh;
  border: 0.3vh solid #b222d7; 
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;		
}
#main_page_info_popup_reset_route_btn:active {	
  border: 0.2vh solid #ffffff; 
}

#main_page_info_popup_continue_route_btn{
  width: 35%;
  height: 7%;
  position: absolute;
  top: 92%;
  left: 75%;
  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;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;		
}
#main_page_info_popup_continue_route_btn:active {
  border: 0.2vh solid #ffffff; 
}

#main_page_start_route_popup_start_btn{
  width: 43%;
  height: 7%;
  position: absolute;
  top: 92%;
  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;	
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;	
}
#main_page_start_route_popup_start_btn:active {
  border: 0.2vh solid #ffffff; 
}
#main_page_no_sneakers_popup_marketplace_btn{
  width: 42%;
  height: 8%;
  position: absolute;
  top: 90%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  color: #ffffff;
  font-size: 1.8vh;
  z-index: 6;
  border-radius: 1vh;
  background-image:url('./assets/css/img/shoes/segment_controller_btn2.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;	
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;	
}
#main_page_no_sneakers_popup_marketplace_btn:active {
  width: 41%;
  height: 7.5%;
  font-size: 1.75vh; 
}

#main_page_popup_title{
  width: 100%;
  height: 7%;
  position: absolute;
  top: 14%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;		
  color:#ffffff;
  text-align: center;
  font-size: 2.2vh;
  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;
  z-index:6; 	
}
#main_page_popup_title span{
  width: 85%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;   	
}
#main_page_no_sneakers_popup_title{
  width: 100%;
  height: 7%;
  position: absolute;
  top: 14%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;		
  color:#ffffff;
  text-align: center;
  font-size: 2.8vh;
  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;
  z-index:6; 	
}
#main_page_no_sneakers_popup_title span{
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;   	
}
#main_page_popup_route_img {
  width: 50%;
  height: 20%;  
  position: absolute;
  top: 28.8%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
 -webkit-mask-image: url('./assets/css/img/map/map_route_marker_mask.png');
 -webkit-mask-repeat: no-repeat;
 -webkit-mask-position: center center;
 -webkit-mask-size: contain;
  mask-image: url('./assets/css/img/map/map_route_marker_mask.png');
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: contain;
}
#main_page_popup_route_img img{
  width: 150%;
  height: 150%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

#main_page_no_sneakers_popup_img{
  width: 90%;
  height: 50%;
  position: absolute;
  top: 43%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  background-image:url('./assets/css/img/shoes/shoes_clear_tab_img.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  z-index:6; 	
}

#main_page_popup_description{
  width: 85%;
  height: 20%;	
  font-weight: 300; 
  font-size: 1.8vh;   
  position: absolute;  
  top: 72%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#main_page_popup_description span{
  overflow: hidden;
  text-overflow: ellipsis; 	
}

#main_page_no_sneakers_popup_description{
  width: 95%;
  height: 20%;	
  font-weight: 400; 
  font-size: 2.2vh;   
  position: absolute;  
  top: 75%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#main_page_no_sneakers_popup_description span{
  overflow: hidden;
  text-overflow: ellipsis; 	
}

#main_page_popup_profit_title{   
  width: 42%;
  height: 5%;
  position: absolute;
  top: 49%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  background-color: #af22d5;
  border-radius: 0.7vh 0.7vh 0vh 0vh;
  font-weight: 400; 
  font-size: 1.8vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
}

.main_page_popup_profit_value_align{   
  width: 60%;
  height: 7%;
  position: absolute;
  top: 55%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  border-radius: 0.7vh;
  border: 0.2vh solid #ffffff;	
  font-size: 2.8vh;
}
.main_page_close_popup_btn{
  width: 2.5vh;
  height: 2.5vh;
  position: absolute;
  top: 6%;
  right: 9%;
  //margin-left: -50%;
  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;	
}
.main_page_close_popup_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;

}
/*Main Page end*/

/*Route Distance*/
.MP_Route_Distance_Pos{
  width: 3vw;
  height: 3vw;  
  position: relative;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-image:url('./assets/css/img/User_Location.png');
  //background-size: 100% 100%;
  //background-repeat: no-repeat;
  //background-position: center;
  z-index: 3;	
}
.MP_Route_Distance{   
  width: 11vw;
  height: 20.9vw;  
  position: absolute;
  top: -20vw;
  left: -4vw;
  z-index: 11;
  background-image:url('./assets/css/img/Distance_Map.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;  	
}
.MP_Route_Distance p{
  font-family: 'Open Sans', sans-serif;
  font-weight: 400; 
  color:#ffffff;
  font-size: 2.6vw;   
  z-index:6;
  text-align: center;  
  //position: absolute;
  //top: -0.5vw;
  //left: 3vw; 
}
.MP_Route_Distance b{
  font-family: 'Open Sans', sans-serif;
  font-weight: 700; 
  color:#ffffff;
  font-size: 2vw;   
  z-index:6; 
  position: absolute;
  top: 6vw;
  left: 3.75vw;
}


/*Shoes Tab Start*/

#shoes_tab {	
  width: 100%;
  height: 100%;  
  position: absolute;  
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  z-index:10;
  text-align:center;
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;
  //background-color:#000000;
}
.shoes_main_img {
  width: 100%;
  height: 55%; 
  position: absolute;
  top: 35%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
.shoes_main_img_marketplace {  
  width: 100%;
  height: 55%;  
  position: absolute;  
  top: 35%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
}
.shoes_main_img_sneakers {
  width: 100%;
  height: 55%;   
  position: absolute;  
  top: 40%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
}
.shoes_main_img_settings { 
  width: 100%;
  height: 100%;  
  position: absolute;  
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;  
}
#shoes_main_img_space_pioneers{
  //display: none;
  background-image:url('./assets/css/img/shoes/shoes_img/space_pioneers_big.png'); 
}
#shoes_main_img_trailblazer{
  display: none;
  background-image:url('./assets/css/img/shoes/shoes_img/trailblazer_big.png'); 
}
#shoes_main_img_top_tokers{
  display: none;
  background-image:url('./assets/css/img/shoes/shoes_img/top_tokers_big.png'); 
}
#shoes_main_img_cyber_warriors{
  display: none;
  background-image:url('./assets/css/img/shoes/shoes_img/cyber_warriors_big.png'); 
}
#shoes_main_img_robots{
  display: none;
  background-image:url('./assets/css/img/shoes/shoes_img/robots_big.png'); 
}
#shoes_segmented_controller{
  //display:none;
  width: 80%;
  height: 5%;
  max-width:800px;
  font-weight: 300; 
  font-size: 1.7vh;   
  position:absolute;
  top: 15%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.7vh;
  border: 0.2vh solid #ffffff;
}
#shoes_segmented_controller span{ 
  width: 95%; 
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
}
#shoes_segmented_controller_buy_btn{
  width: 33%;
  height: 100%;  
  position:absolute;
  top: 50%;
  left: 16.5%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  /*background-image:url('./assets/css/img/shoes/segment_controller_btn2.png');!*Удалить эту следующие 4 строки при подключении :active в JS*!*/
  background-size: 100% 100%;
  background-position: center center;
  border-radius: 0.7vh 0vh 0vh 0.7vh;
  //border: 0.2vh solid #ffffff;
  color: #b1b1b1;
}
#shoes_segmented_controller_buy_btn:active {
  background-image:url('./assets/css/img/shoes/segment_controller_btn2.png');
  background-size: 100% 100%;
  background-position: center center;
  border-radius: 0.7vh 0vh 0vh 0.7vh;
  border: 0.2vh solid #ffffff;
  color: #ffffff;
}
#shoes_segmented_controller_rent_btn{
  width: 33%;
  height: 100%;  
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #b1b1b1;
}
#shoes_segmented_controller_rent_btn:active {
  background-image:url('./assets/css/img/shoes/segment_controller_btn2.png');
  background-size: 100% 100%;
  background-position: center center;
  border-radius: 0vh 0vh 0vh 0vh;
  border: 0.2vh solid #ffffff;
  color: #ffffff;
}
#shoes_segmented_controller_my_sneakers_btn{
  width: 33%;
  height: 100%;  
  position:absolute;
  top: 50%;
  left: 83.5%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #b1b1b1;
}
#shoes_segmented_controller_my_sneakers_btn:active {
  background-image:url('./assets/css/img/shoes/segment_controller_btn2.png');
  background-size: 100% 100%;
  background-position: center center;
  border-radius: 0vh 0.7vh 0.7vh 0vh;
  border: 0.2vh solid #ffffff;
  color: #ffffff;
}
.shoes_shoes_name_align{
  width: 100%;
  height: 3.5%;
  text-align:center;
  position:absolute;
  top: 53%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_title_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  color: #ffffff;
}
.shoes_shoes_name_marketplace{
  //display:none;
  width: 100%;
  height: 3.5%;
  text-align:center;
  position:absolute;
  top: 53%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_title_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  color: #ffffff;
}
.shoes_shoes_name_sneakers{
  //display:none;
  width: 100%;
  height: 3.5%;
  text-align:center;
  position:absolute;
  top: 64%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_title_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  color: #ffffff;
}
#shoes_shoes_name{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 400; 
  font-size: 2.2vh;
  text-transform: uppercase;
}
/*Marketplace блок*/
#shoes_marketplace{
  display:none;
  width: 100%;
  height: 48%;   
  position:absolute;
  top: 75%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#shoes_marketplace_shoes_price_flow{
  width: 100%;
  height: 7.8%;  
  position:absolute;
  top: 12%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 300; 
  font-size: 2.2vh;
  text-transform: uppercase;
  background-image:url('./assets/css/img/shoes/shoes_price_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  color: #ffffff;
}
#shoes_marketplace_shoes_price_flow b{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#shoes_marketplace_shoes_price {
  font-weight: 400; 
  font-size: 2.2vh;
  color: #ffffff;
}

#shoes_marketplace_buy_crypto_btn{
  width: 28%;
  height: 12%;
  max-width:250px;
  position:absolute;
  top: 27%;
  left: 17%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 300; 
  font-size: 1.7vh;
  text-transform: uppercase;
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #17ded7;
  color: #ffffff;
}
#shoes_marketplace_buy_crypto_btn:active{
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #ffffff;
}
#shoes_marketplace_buy_crypto_btn span{
  width: 95%;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  overflow: hidden;
  text-transform: uppercase;
}
#shoes_marketplace_info_btn{
  width: 28%;
  height: 12%;
  max-width:250px;
  position:absolute;
  top: 27%;
  left: 83%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 300; 
  font-size: 1.7vh;
  text-transform: uppercase;
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #c305e6;
  color: #ffffff;
}
#shoes_marketplace_info_btn:active{
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #ffffff;
}
#shoes_marketplace_info_btn a{
  width: 95%; 
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-transform: uppercase;
}
#shoes_marketplace_buy_card_btn{
  width: 32%;
  height: 12%;
  max-width:250px;
  position:absolute;
  top: 27%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 300; 
  font-size: 1.7vh;
  text-transform: uppercase;
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #c305e6;
  color: #ffffff;
}
#shoes_marketplace_buy_card_btn:active{
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #ffffff;
}
#shoes_marketplace_buy_card_btn span{
  width: 95%; 
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-transform: uppercase;
}
#shoes_marketplace_description{
  width: 100%;
  height: 40%;
  position:absolute;
  top: 61%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 300; 
  font-size: 1.7vh;
  text-align: left;
}
#shoes_marketplace_description_luck{
  width: 40%;
  position:absolute;
  top: 10%;
  left: 25%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #b1b1b1;
}
#shoes_marketplace_description_wear{
  width: 40%;
  position:absolute;
  top: 30%;
  left: 25%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #b1b1b1;
}
#shoes_marketplace_description_stamina{
  width: 40%;
  position:absolute;
  top: 50%;
  left: 25%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #b1b1b1;
}
#shoes_marketplace_description_luck_value{
  width: 40%;
  position:absolute;
  top: 10%;
  left: 60%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  color: #ffffff;
}
#shoes_marketplace_description_wear_value{
  width: 40%;
  position:absolute;
  top: 30%;
  left: 60%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  color: #ffffff;
}
#shoes_marketplace_description_stamina_value{
  width: 40%;
  position:absolute;
  top: 50%;
  left: 60%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 600;
  color: #ffffff;
}
#shoes_marketplace_menu{
  width: 100%;
  height: 40%;
  position:absolute;
  bottom: -22%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_bottom_menu_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_marketplace_menu_space_pioneers_btn{
  width: 18%;
  height: 50%;
  position:absolute;
  bottom: -10%;
  left: 12%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_img/space_pioneers_small.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_marketplace_menu_space_pioneers_btn:active{
  width: 18%;
  height: 50%;
  position:absolute;
  bottom: -3%;
  left: 12%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#shoes_marketplace_menu_trailblazer_btn{
  width: 18%;
  height: 50%;
  position:absolute;
  bottom: -10%;
  left: 31%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_img/trailblazer_small.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_marketplace_menu_trailblazer_btn:active{
  width: 18%;
  height: 50%;
  position:absolute;
  bottom: -3%;
  left: 31%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#shoes_marketplace_menu_top_tokers_btn{
  width: 18%;
  height: 50%;
  position:absolute;
  bottom: -10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_img/top_tokers_small.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_marketplace_menu_top_tokers_btn:active{
  width: 18%;
  height: 50%;
  position:absolute;
  bottom: -3%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#shoes_marketplace_menu_cyber_warriors_btn{
  width: 18%;
  height: 50%;
  position:absolute;
  bottom: -10%;
  left: 69%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_img/cyber_warriors_small.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_marketplace_menu_cyber_warriors_btn:active{
  width: 18%;
  height: 50%;
  position:absolute;
  bottom: -3%;
  left: 69%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#shoes_marketplace_menu_robots_btn{
  width: 18%;
  height: 50%;
  position:absolute;
  bottom: -10%;
  left: 88%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_img/robots_small.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_marketplace_menu_robots_btn:active{
  width: 18%;
  height: 50%;
  position:absolute;
  bottom: -3%;
  left: 88%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

/*My Sneakers блок*/
#shoes_no_sneakers_flow{
  display:none;
  width: 100%;
  height: 80%;   
  position:absolute;
  top: 59%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;
  z-index: 99; 
}
#shoes_no_sneakers_flow_img{
  width: 100%;
  height: 65%;   
  position:absolute;
  top: 32%;
  left: 51%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_clear_tab_img.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_no_sneakers_flow_description{
  width: 90%;
  height: 15%;   
  position:absolute;
  top: 68%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 700;
  font-size:2vh;
}
#shoes_no_sneakers_flow_description span{
  width: 95%;
  height: 100%;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);   
  overflow: hidden;
  text-overflow: ellipsis;
}
#shoes_no_sneakers_flow_description b{
  font-weight: 300;
  font-size:2vh;
}
#shoes_no_sneakers_flow_btn{
  width: 20vh;
  height: 7vh;  
  position:absolute;
  top: 85%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh;
  font-size: 1.8vh;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_red.png');
  background-size: 100% 100%;
  background-position: center center;
}
#shoes_no_sneakers_flow_btn span{ 
  width: 95%; 
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
#shoes_no_sneakers_flow_btn:active{  
  width: 19vh;
  height: 6.5vh;
  font-size: 1.7vh;
}

#shoes_my_sneakers{
  display:none;
  width: 100%;
  height: 48%;   
  position:absolute;
  top: 75%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;
}
#shoes_my_sneakers_slider {
  //display: none;
  width: 100%;
  height: 35%;   
  position: absolute;
  top: 75%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  /*background-color: #9d40bc;*/
}

.swiper_my_sneakers {
  width: 100%;
  height: 100%;
  max-width: 800px; /* Set a maximum width for better alignment */
  margin: 0 auto; /* Center the container horizontally */
  position: relative;
  //display: flex;
  //align-items: center;
  //overflow: hidden;
}
.swiper-slide {
  //display: flex;
  //justify-content: center;
  //align-items: center;
  //height: 100%;
  transition-duration: 300ms; /* Плавная анимация при перемещении */
  //background:#ffffff;
  min-width: 0;
    }

#shoes_my_sneakers_slider_block{
  position: relative;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  //margin-right: 10px;
}
.swiper-slide-next,
.swiper-slide-prev {
  //transform: scale(0.8); /* Уменьшение соседних слайдов */
  opacity:0.5;
}

.swiper-slide-active div:last-child {
  //transform: scale(1.2); /* Увеличение активного слайда */
  opacity:1;
  //border-left: 1px solid #ffffff;
  //border-right: 1px solid #ffffff;
}

#shoes_my_sneakers_slider_block_shoes_img{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
#shoes_my_sneakers_slider_block_shoes_img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#shoes_my_sneakers_slider_block_id{
  width: 100%;
  height: 10%;
  position:absolute;
  top: 75%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 600; 
  font-size: 1.3vh;
}
#shoes_my_sneakers_slider_left_shadow{
  //display: none;  
  width: 10%;
  height: 100%;
  position:absolute;
  top: 0;
  left: 0;
  z-index:99;
}
#shoes_my_sneakers_slider_left_shadow img{
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0;
  left: 0;
}
#shoes_my_sneakers_slider_right_shadow{
  //display: none;  
  width: 10%;
  height: 100%;
  position:absolute;
  top: 0;
  right: 0;
  z-index:99;
}
#shoes_my_sneakers_slider_right_shadow img{
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0;
  right: 0;
}
#shoes_my_sneakers_center_arrow{
  display: none;
  width: 100%;
  height: 7%;
  position:absolute;
  top: 95%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_mysneakers_arrow.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_my_sneakers_restore_btn{
  display: none;
  width: 28%;
  height: 12%;
  max-width:250px;
  position:absolute;
  top: 48%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #00e36e;
}
#shoes_my_sneakers_restore_btn:active{
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #ffffff;
}
#shoes_my_sneakers_restore_btn span{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  margin-right: -50%;
  font-weight: 300; 
  font-size: 1.7vh;
  width: 95%;
  overflow: hidden;
  text-transform: uppercase;
}
#shoes_my_sneakers_add_btn{
  display: none;
  width: 26%;
  height: 12%;
  max-width:250px;
  position:absolute;
  top: 48%;
  left: 20%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #00e36e;
}
#shoes_my_sneakers_add_btn:active{
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #ffffff;
}
#shoes_my_sneakers_add_btn span{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  margin-right: -50%;
  font-weight: 300; 
  font-size: 1.7vh;
  width: 95%;
  overflow: hidden;
  text-transform: uppercase;
}
#shoes_my_sneakers_set_rent_btn{
  display: none;
  width: 26%;
  height: 12%;
  max-width:250px;
  position:absolute;
  top: 48%;
  left: 80%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #cc1fe1;
}
#shoes_my_sneakers_set_rent_btn:active{
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #ffffff;
}
#shoes_my_sneakers_set_rent_btn span{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  margin-right: -50%;
  font-weight: 300; 
  font-size: 1.7vh;
  width: 95%;
  overflow: hidden;
  text-transform: uppercase;
}
#shoes_my_sneakers_block_id{
  display: none;
  width: 25%;
  height: 9%;
  position:absolute;
  top: -58%;
  left: 91%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_id_label.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  white-space: nowrap;
}
#shoes_my_sneakers_block_id span{
  width: 58%;
  overflow: hidden;
}
.shoes_my_sneakers_block_id_align{
  position:absolute;
  top: 50%;
  left: 47%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  margin-right: -50%;
  font-weight: 400; 
  font-size: 1.8vh;
}
#shoes_my_sneakers_block_wear{
  display: none;
  position: absolute;
  top: 18%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 26%;
  height: 8%;
  background-color:#371454;
  border-radius:0.5vh;
}
#shoes_my_sneakers_block_wear_25{
  width: 2.7vh;
  height: 2.7vh;  
  position:absolute;
  top: 50%;
  left: 13%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#f5569f;
  border-radius:0.3vh;
}
#shoes_my_sneakers_block_wear_50{
  width: 2.7vh;
  height: 2.7vh;  
  position:absolute;
  top: 50%;
  left: 38%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#fdf468;
  border-radius:0.3vh;
}
#shoes_my_sneakers_block_wear_75{
  width: 2.7vh;
  height: 2.7vh;  
  position:absolute;
  top: 50%;
  left: 62%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#17c354;
  border-radius:0.3vh;
}
#shoes_my_sneakers_block_wear_100{
  width: 2.7vh;
  height: 2.7vh;  
  position:absolute;
  top: 50%;
  left: 87%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#19f165;
  border-radius:0.3vh;
}

/*Rent блок*/
#shoes_no_rent_flow{
  display:none;
  width: 100%;
  height: 80%;   
  position:absolute;
  top: 59%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;
  z-index: 99;
}
#shoes_no_rent_flow_img{
  width: 100%;
  height: 65%;   
  position:absolute;
  top: 32%;
  left: 51%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_clear_tab_img.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_no_rent_flow_description{
  width: 90%;
  height: 15%;   
  position:absolute;
  top: 68%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-weight: 700;
  font-size:2vh;
}
#shoes_no_rent_flow_description span{
  width: 95%;
  height: 100%;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);   
  overflow: hidden;
  text-overflow: ellipsis;
}
#shoes_no_rent_flow_description b{
  font-weight: 300;
  font-size:2vh;
}
#shoes_no_rent_flow_btn{
  width: 20vh;
  height: 7vh;  
  position:absolute;
  top: 85%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh;
  font-size: 1.8vh;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_red.png');
  background-size: 100% 100%;
  background-position: center center;
}
#shoes_no_rent_flow_btn span{ 
  width: 95%; 
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
#shoes_no_rent_flow_btn:active{  
  width: 19vh;
  height: 6.5vh;
  font-size: 1.7vh;
}


#shoes_rent{
  display:none;
  width: 100%;
  height: 48%;   
  position:absolute;
  top: 75%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;
}
#shoes_rent_slider {
  //display: none;
  width: 100%;
  height: 35%;   
  position: absolute;
  top: 75%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  /*background-color: #9d40bc;*/
}

#shoes_rent_slider_container {
  //height: 100%;
  //width: 100%;
  //max-width: 600px;
  //margin: auto;
  //box-sizing: border-box;
}
.swiper_rent {
  width: 100%;
  height: 100%;
  max-width: 800px; /* Set a maximum width for better alignment */
  margin: 0 auto; /* Center the container horizontally */
  position: relative;
  //display: flex;
  //align-items: center;
  //overflow: hidden;
}
#shoes_rent_slider_block{
  position: relative;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  //margin-right: 10px;
}

#shoes_rent_slider_block_shoes_img{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
#shoes_rent_slider_block_shoes_img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#shoes_rent_slider_left_shadow{
  //display: none;  
  width: 10%;
  height: 100%;
  position:absolute;
  top: 0;
  left: 0;
  z-index:99;
}
#shoes_rent_slider_left_shadow img{
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0;
  left: 0;
}
#shoes_rent_slider_right_shadow{
  //display: none;  
  width: 10%;
  height: 100%;
  position:absolute;
  top: 0;
  right: 0;
  z-index:99;
}
#shoes_rent_slider_right_shadow img{
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0;
  right: 0;
}
#shoes_rent_center_arrow{
  display:none;
  width: 100%;
  height: 7%;
  position:absolute;
  top: 95%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_mysneakers_arrow.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_rent_restore_btn{
  display: none;
  width: 28%;
  height: 12%;
  max-width:250px;
  position:absolute;
  top: 48%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #00e36e;
}
#shoes_rent_restore_btn:active{
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #ffffff;
}
#shoes_rent_restore_btn span{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  margin-right: -50%;
  font-weight: 300; 
  font-size: 1.7vh;
  width: 95%;
  overflow: hidden;
  text-transform: uppercase;
}
#shoes_rent_rent_btn{
  display: none;
  width: 26%;
  height: 12%;
  max-width:250px;
  position:absolute;
  top: 48%;
  left: 20%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #00e36e;
}
#shoes_rent_rent_btn:active{
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #ffffff;
}
#shoes_rent_rent_btn span{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  margin-right: -50%;
  font-weight: 300; 
  font-size: 1.7vh;
  width: 95%;
  overflow: hidden;
  text-transform: uppercase;
}
#shoes_rent_return_btn{
  display: none;
  width: 26%;
  height: 12%;
  max-width:250px;
  position:absolute;
  top: 48%;
  left: 80%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #cc1fe1;
}
#shoes_rent_return_btn:active{
  border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
  border: 0.3vh solid #ffffff;
}
#shoes_rent_return_btn span{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  margin-right: -50%;
  font-weight: 300; 
  font-size: 1.7vh;
  width: 95%;
  overflow: hidden;
  text-transform: uppercase;
}
#shoes_rent_block_id{
  display: none;
  width: 25%;
  height: 9%;
  position:absolute;
  top: -58%;
  left: 91%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/shoes_id_label.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  white-space: nowrap;
}
#shoes_rent_block_id span{
  width: 58%;
  overflow: hidden;
}
.shoes_rent_block_id_align{
  position:absolute;
  top: 50%;
  left: 47%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  margin-right: -50%;
  font-weight: 400; 
  font-size: 1.8vh;
}
#shoes_rent_block_rented{
  display: none;
  width: 30%;
  height: 9%;
  position:absolute;
  top: -58%;
  left: 15%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/shoes/Shoes_rented_flow_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#shoes_rent_block_rented span{
  position:absolute;
  top: 50%;
  left: 45%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.8vh;
  width: 95%;
  overflow: hidden;
  text-transform: uppercase;
}
#shoes_rent_block_percent_top{
  display: none;
  position: absolute;
  top: 19%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 40%;
  max-width:400px;
  height: 6.5%;
  background-color:#cb02e9;
  border-radius:0.4vh;
  font-size: 1.8vh;
}
#shoes_rent_block_percent_bg{
  //display: none;
  position: absolute;
  top: 50%;
  left: 61%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 85%;
  background-color:#181224;
  border-radius:0.3vh;
}
#shoes_rent_block_percent_fill_holder{
  position: absolute;
  top: 50%;
  left: 1.5%;
  transform: translate(0%, -50%);
  float:left;
  width: 97%;
  height: 80%;
}
#shoes_rent_block_percent_fill{
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(0%, -50%);
  float:left;
  width: 100%;
  height: 100%;
  background-color:#14f262;
  border-radius:0.2vh;
}
#shoes_rent_block_percent_curent{
  position: absolute;
  top: 50%;
  left: 13%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 24%;
  height: 100%;
}
#shoes_rent_block_percent_curent span{
  position: absolute;
  top: 50%;
  left: 20%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#shoes_rent_block_percent_total{
  position: absolute;
  top: 50%;
  left: 87%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 24%;
  height: 100%;
}
#shoes_rent_block_percent_total span{
  position: absolute;
  top: 50%;
  left: 20%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

#shoes_rent_block_percent_bottom{
  //display: none;
  width: 40%;
  height: 12%;
  position:absolute;
  top: 87%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  max-width:140px;
  background-color:#cb02e9;
  border-radius:0.3vh;
  font-size: 1.2vh;
}


/*Shoes Tab End*/
/*Routes Tab Start*/

#routes_tab {	
  width: 100%;
  height: 100%;  
  position: absolute;  
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  z-index:10;
  text-align:center;
  font-family: 'Open Sans', sans-serif;
  color:#ffffff;
  //background-color:#000000;
}
#routes_segmented_controller{
  //display:none;
  width: 80%;
  height: 5%;
  max-width:800px;
  font-weight: 300; 
  font-size: 1.8vh;   
  position:absolute;
  top: 15%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.7vh;
  border: 0.2vh solid #ffffff;
}
#routes_segmented_controller span{  
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_segmented_controller_list_btn{
  width: 33%;
  height: 100%;  
  position:absolute;
  top: 50%;
  left: 16.5%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  /*background-image:url('./assets/css/img/shoes/segment_controller_btn2.png');!*Удалить эту следующие 4 строки при подключении :active в JS*!*/
  background-size: 100% 100%;
  background-position: center center;
  border-radius: 0.7vh 0vh 0vh 0.7vh;
  //border: 0.2vh solid #ffffff;
  color: #b1b1b1;
}
/*#routes_segmented_controller_list_btn:active {*/
/*  background-image:url('./assets/css/img/shoes/segment_controller_btn2.png');*/
/*  background-size: 100% 100%;*/
/*  background-position: center center;*/
/*  border-radius: 0.7vh 0vh 0vh 0.7vh;*/
/*  border: 0.2vh solid #ffffff;*/
/*  color: #ffffff;*/
/*}*/
#routes_segmented_controller_my_btn{
  width: 33%;
  height: 100%;  
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #b1b1b1;
}
/*#routes_segmented_controller_my_btn:active {*/
/*  background-image:url('./assets/css/img/shoes/segment_controller_btn2.png');*/
/*  background-size: 100% 100%;*/
/*  background-position: center center;*/
/*  border-radius: 0vh 0vh 0vh 0vh;*/
/*  border: 0.2vh solid #ffffff;*/
/*  color: #ffffff;*/
/*}*/
#routes_segmented_controller_create_btn{
  width: 33%;
  height: 100%;  
  position:absolute;
  top: 50%;
  left: 83.5%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color: #b1b1b1;
}
/*#routes_segmented_controller_create_btn:active {*/
/*  background-image:url('./assets/css/img/shoes/segment_controller_btn2.png');*/
/*  background-size: 100% 100%;*/
/*  background-position: center center;*/
/*  border-radius: 0vh 0.7vh 0.7vh 0vh;*/
/*  border: 0.2vh solid #ffffff;*/
/*  color: #ffffff;*/
/*}*/
/*Routes List*/
#routes_tab_list{
  //display:none;
  width: 100%;
  height: 80%;   
  position:absolute;
  top: 58%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #000000;
  color: #ffffff;
  font-weight: 300; 
  font-size: 1.8vh;
}
#routes_tab_list_choose_route_title{
  width: 80%;
  height: 5%;   
  position:absolute;
  top: 4%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/routes/Routes_title_label.png');
  background-size: 100% 100%;
  background-position: center center;
  text-transform: uppercase;
  //display: none;
}
#routes_tab_list_choose_route_title span{  
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.9vh;
  font-weight: 400;
}
#routes_tab_list_sort{
  display: none;
  width: 100%;
  height: 20%;   
  position:absolute;
  top: 11%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_list_sort span{
  width: 95%; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}
#routes_tab_list_sort_title{
  width: 80%;
  height: 25%;   
  position:absolute;
  top: 15%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/routes/Routes_title_label.png');
  background-size: 100% 100%;
  background-position: center center;
}
#routes_tab_list_sort_title span{  
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.9vh;
  font-weight: 400;
}
#routes_tab_list_sort_segment_controller{
  width: 100%;
  max-width: 600px;
  height: 38%;   
  position:absolute;
  top: 55%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #000000;
}
#routes_tab_list_sort_segment_controller span{  
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_list_sort_segment_controller_reward_btn{
  width: 20%;
  height: 80%;   
  position:absolute;
  top: 50%;
  left: 20%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_list_sort_segment_controller_reward_btn:active {
  border-radius: 0.7vh;
  border:0.2vh solid #14ff61;
}
#routes_tab_list_sort_segment_controller_distance_btn{
  width: 20%;
  height: 80%;   
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_list_sort_segment_controller_distance_btn:active {
  border-radius: 0.7vh;
  border:0.2vh solid #14ff61;
}
#routes_tab_list_sort_segment_controller_visits_btn{
  width: 20%;
  height: 80%;   
  position:absolute;
  top: 50%;
  left: 80%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_list_sort_segment_controller_visits_btn:active {
  border-radius: 0.7vh;
  border:0.2vh solid #14ff61;
}
#routes_tab_list_routes_flow{
  width: 90%;
  max-width: 600px;
  height: 94%;   
  position:absolute;
  top: 8.5%;
  left: 50%;;
  transform: translate(-50%, 0%);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
  grid-row-gap: 2.5vh; /* Отступы по вертикали */
  grid-column-gap: 5%; /* Отступы по горизонтали */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  //display: none;
}
#routes_tab_list_routes_flow_block{
  width: 98%;
  height: 35vh; 
  position: relative;
  border-radius: 1vh;
  border: solid 0.2vh #ffffff;
}
.routes_tab_list_routes_flow_block_img_mask {
  width: 100%;
  height: 60%;  
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0.7vh 0.7vh 0vh 0vh;
  overflow: hidden;
}
.routes_tab_list_routes_flow_block_img_mask img{
  width: 105%;
  height: auto;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //object-fit: contain;
}
#routes_tab_list_routes_flow_block_name{
  width: 100%;
  height: 8%;
  position: absolute;
  top: 62%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.3vh;
  font-weight: 400;
  background-color: #8e3cc4;
}
#routes_tab_list_routes_flow_block_name span{
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
}
#routes_tab_list_routes_flow_block_profit_flow{
  width: 6vh;
  height: 6vh;
  position: absolute;
  top: 3%;
  right: 5%;
  background-color: #cc1fe1;
  border-radius: 100%;
  border: solid 0.2vh #ffffff;
}

#routes_tab_list_routes_flow_block_profit_title{
  width:80%;
  position: absolute;
  top: 30%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.2vh;
  white-space: nowrap;
  overflow: hidden; 
  text-transform: uppercase;
}
#routes_tab_list_routes_flow_block_profit_value{
  width:90%;
  position: absolute;
  top: 60%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.8vh;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden; 
  text-transform: uppercase;
}
#routes_tab_list_routes_flow_block_distance{
  //display: none;
  width: 95%;
  height: 7%;
  position: absolute;
  top: 73%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: left;
  background: linear-gradient(to right, #cc1fe1, rgba(255, 0, 0, 0));
  border-radius: 0.3vh;
}
#routes_tab_list_routes_flow_block_view{
  //display: none;
  width: 95%;
  height: 7%;
  position: absolute;
  top: 83%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: left;
  background: linear-gradient(to right, #cc1fe1, rgba(255, 0, 0, 0));
  border-radius: 0.3vh;
}
#routes_tab_list_routes_flow_block_visits{
  //display: none;
  width: 95%;
  height: 7%;
  position: absolute;
  top: 93%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: left;
  background: linear-gradient(to right, #cc1fe1, rgba(255, 0, 0, 0));
  border-radius: 0.3vh;
}
.routes_tab_list_routes_flow_block_title{
  width: 50%;
  position: absolute;
  top: 50%;
  left: 26%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vh;
  font-weight: 400;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
}
.routes_tab_list_routes_flow_block_value_align{
  width: 20%;
  position: absolute;
  top: 50%;
  left: 65%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vh;
  font-weight: 600;
  overflow: hidden;
}
.routes_tab_list_routes_flow_block_descr{
  width: 20%;
  position: absolute;
  top: 50%;
  left: 90%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.4vh;
  font-weight: 300;
  overflow: hidden;
  text-overflow: ellipsis;
}


/*Route List End*/
/*Routes My*/
#routes_tab_my{
  display:none;
  width: 100%;
  height: 80%;   
  position:absolute;
  top: 58%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #000000;
  color: #ffffff;
  font-weight: 300; 
  font-size: 1.8vh;
}
#routes_tab_my_sort{
  display: none;
  width: 100%;
  height: 20%;   
  position:absolute;
  top: 11%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #535353;
}
#routes_tab_my_sort_title{
  width: 80%;
  height: 25%;   
  position:absolute;
  top: 15%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/routes/Routes_title_label.png');
  background-size: 100% 100%;
  background-position: center center;
}
#routes_tab_my_sort_title span{  
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.9vh;
  font-weight: 400;
}
#routes_tab_my_sort_segment_controller{
  width: 100%;
  max-width: 600px;
  height: 38%;   
  position:absolute;
  top: 55%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #000000;
}
#routes_tab_my_sort_segment_controller span{  
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
  font-size: 1.5vh;
}
#routes_tab_my_sort_segment_controller_date_btn{
  width: 15%;
  height: 80%;   
  position:absolute;
  top: 50%;
  left: 25%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_my_sort_segment_controller_date_btn:active {
  border-radius: 0.7vh;
  border:0.2vh solid #14ff61;
}
#routes_tab_my_sort_segment_controller_approved_btn{
  width: 20%;
  height: 80%;   
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_my_sort_segment_controller_approved_btn:active {
  border-radius: 0.7vh;
  border:0.2vh solid #14ff61;
}
#routes_tab_my_sort_segment_controller_not_approved_btn{
  width: 25%;
  height: 80%;   
  position:absolute;
  top: 50%;
  left: 78%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_my_sort_segment_controller_not_approved_btn:active {
  border-radius: 0.7vh;
  border:0.2vh solid #14ff61;
}
#routes_tab_my_sort_column_name{
  width: 100%;
  max-width: 600px;
  height: 20%;   
  position:absolute;
  top: 90%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #000000;
}
#routes_tab_my_sort_column_name span{  
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color:#db11ef;
  font-size: 1.4vh;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
  width: 95%;
}
#routes_tab_my_sort_column_name_route{
  width: 20%;
  height: 100%;   
  position:absolute;
  top: 50%;
  left: 9.5%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_my_sort_column_name_date{
  width: 20%;
  height: 100%;   
  position:absolute;
  top: 50%;
  left: 29.5%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_my_sort_column_name_approved{
  width: 20%;
  height: 100%;   
  position:absolute;
  top: 50%;
  left: 49.5%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_my_routes_flow{
  width: 100%;
  max-width: 600px;
  height: 80%;   
  position:absolute;
  top: 62%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; 
}
#routes_tab_my_routes_flow_block{
  width: 100%;
  height: 13%;
  position:relative;  
  margin-bottom: 1vh;
  background-image:url('./assets/css/img/routes/Routes_route_flow.png');
  background-size: 100% 100%;
  background-position: center center;
}
#routes_tab_my_routes_flow_block span{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}
#routes_tab_my_routes_flow_block_name{
  width: 18%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 10%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vh;
  //background-color: #000000;
}
#routes_tab_my_routes_flow_block_date{
  width: 15%;
  height: 40%;
  position: absolute;
  top: 50%;
  left: 30%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.2vh;
  background-color: #000000;
  border-radius: 0.5vh;
}
#routes_tab_my_routes_flow_block_approved{
  display: none;
  width: 15%;
  height: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vh;
  background-color: #000000;
  border-radius: 0.5vh;
}
#routes_tab_my_routes_flow_block_notapproved{
  //display: none;
  width: 15%;
  height: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.5vh;
  background-color: #000000;
  border-radius: 0.5vh;
}
#routes_tab_my_routes_flow_block_on_btn{
  //display:none;
  width: 15%;
  height: 60%;
  position: absolute;
  top: 50%;
  left: 70%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.8vh;
  font-weight: 600;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_green.png');
  background-size: 100% 100%;
  background-position: center center;
  border-radius: 0.5vh;
}
#routes_tab_my_routes_flow_block_on_btn:active{
  width: 14%;
  height: 55%;
  font-size: 1.7vh;
}
#routes_tab_my_routes_flow_block_off_btn{
  //display:none;
  width: 15%;
  height: 60%;
  position: absolute;
  top: 50%;
  left: 70%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.8vh;
  font-weight: 600;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_yellow.png');
  background-size: 100% 100%;
  background-position: center center;
  border-radius: 0.5vh;
}
#routes_tab_my_routes_flow_block_off_btn:active{
  width: 14%;
  height: 55%;
  font-size: 1.7vh;
}
#routes_tab_my_routes_flow_block_wait_staus{
  //display:none;
  width: 15%;
  height: 40%;
  position: absolute;
  top: 50%;
  left: 70%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 3vh;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_grey.png');
  background-size: 100% 100%;
  background-position: center center;
  border-radius: 0.5vh;
}
#routes_tab_my_routes_flow_block_remove_btn{
  //display:none;
  width: 15%;
  height: 60%;
  position: absolute;
  top: 50%;
  left: 90%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.2vh;
  font-weight: 600;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_red.png');
  background-size: 100% 100%;
  background-position: center center;
  border-radius: 0.5vh;
  text-transform: uppercase;
}
#routes_tab_my_routes_flow_block_remove_btn:active{
  width: 14%;
  height: 55%;
  font-size: 1.7vh;
}
/*Route My End*/
/*Route Create*/
#routes_tab_create{
  display:none;
  width: 100%;
  height: 80%;   
  position:absolute;
  top: 59%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #000000;
  color: #ffffff;
  font-weight: 300; 
  font-size: 1.7vh;
}
#routes_tab_create_title{
  width: 100%;
  height: 5%;   
  position:absolute;
  top: 5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/routes/Routes_title_label.png');
  background-size: 100% 100%;
  background-position: center center;
}
#routes_tab_create_title span{  
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 1.8vh;
  font-weight: 400;
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}
#routes_tab_create_form {
  width: 100%;
  height: 60%;
  position:absolute;
  top: 38%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_create_form_bg {
  width: 100%;
  height: 100%;
  background-image:url('./assets/css/img/routes/Routes_create_flow_bg.png');
  background-size: 100% 100%;
  background-position: center center;
  opacity:0.5;
}
#routes_tab_create_form_progress {
  width: 80%;
  height: 8.2%;
  position:absolute;
  top: 5.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_create_form_progress_value,
#routes_tab_create_form_total_value {
  display: none;
}
#progress_bar {
  position:absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#progress_bar_content {
  position: relative;
  flex-grow: 1;
  //height: 4px;
  //background-color: gray;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress_bar_content_progress_line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 95%;
  height: 8%;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_grey.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  z-index: -1;
  transition: width 0.5s ease-in-out;
}

.progress_bar_content_progress_line_between {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 0.5vh;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_green.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  z-index: -1;
  transition: width 0.5s ease-in-out;
}
.progress_bar_content_progress_dot.active {
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_green.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

.progress_bar_content_progress_dot {
  position: relative;
  width: 3vh;
  height: 3vh;
  border-radius: 50%;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_grey.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  transform: translateX(-50%);
  margin-left: 1.5vh;
  margin-right: -1.5vh;
}

.progress_bar_content_progress_dot:first-child {
  margin-left: 0;
}

.progress_bar_content_progress_dot:last-child {
  //margin-right: 0;
}

.routes_tab_create_form-field {
  width: 80%;
  height: 70%;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background: #000;
}
.routes_tab_create_form-field label{
  width: 100%;
  height: 30%;
  position:absolute;
  top: 10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 2vh;
}
.routes_tab_create_form-field span{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

#routes_tab_create_form_instruction_button {
  width: 45%;
  height: 18%;
  position:absolute;
  top: 37%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  color:#ffffff;
  border: none;
  border-radius: 0.8vh;
  font-size: 1.8vh;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_red.png');
  background-size: 100% 100%;
  background-position: center center;
  text-shadow: 0 0 0.4vh black;
  font-family: 'Open Sans', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
}
#routes_tab_create_form_instruction_button:active{
  width: 19vh;
  height: 5.9vh;
  font-size: 1.7vh;
}
.routes_tab_create_form_text{
  width: 100%;
  height: 20%;
  position:absolute;
  top: 65%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh;
}
.routes_tab_create_form_text::placeholder,
.routes_tab_create_form_textarea::placeholder,
.routes_tab_create_form_line::placeholder {
  font-style: italic;
}
.routes_tab_create_form_textarea{
  width: 100%;
  height: 50%;
  position:absolute;
  top: 58%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh;
}
.routes_tab_create_form_line{
  width: 100%;
  height: 20%;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 0.8vh;
}
.routes_tab_create_form_file{
  //width: 80%;
  //height: 5vh;
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

/* Скрытие стандартного input[type="file"] */
.routes_tab_create_form_file input[type="file"] {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

/* Стилизация кнопки "Выбрать файлы" */
.routes_tab_create_form_file label {
  width: 15vh;
  height: 5vh;
  display: inline-block;
  color:#ffffff;
  border: none;
  border-radius: 0.8vh;
  font-size: 1.7vh;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_red.png');
  background-size: 100% 100%;
  background-position: center center;
  cursor: pointer;
}
.routes_tab_create_form_file label span{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

/* Стилизация надписи с выбранными файлами */
.routes_tab_create_form_file #fileNames {
  display: block;
  margin-top: 40px;
}

/* Обновление надписи с выбранными файлами при выборе файлов */
.routes_tab_create_form_file input[type="file"]:not(:empty) + label + #fileNames {
  display: none;
}

.routes_tab_create_form_file input[type="file"]:not(:empty) + label::before {
  content: "Файлы выбраны";
}

.routes_tab_create_form_file input[type="file"]:not(:empty) + label::after {
  content: attr(data-file-names);
}


.hidden {
  display: none;
}


.fade-out {
      animation: fadeOut 0.5s ease-in-out forwards;
    }

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fade-in {
      animation: fadeIn 0.5s ease-in-out forwards;
    }


@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#routes_tab_create_form_previous_btn {
  //display:none;
  width: 30%;
  height: 13%;
  position:absolute;
  top: 90%;
  left: 25%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 0.8vh;
  color:#ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.8vh;
  font-weight: 300;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_grey.png');
  background-size: 100% 100%;
  background-position: center center;
  z-index:99;
  cursor: pointer;
  text-shadow: 0 0 0.4vh black;
}
#routes_tab_create_form_previous_btn:disabled {
  cursor: not-allowed;
  display:none;
}
#routes_tab_create_form_previous_btn:active {
  width: 29%;
  height: 12%;
  font-size: 1.7vh;
}
#routes_tab_create_form_previous_btn span{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
}
#routes_tab_create_form_next_btn {
  //display:none;
  width: 30%;
  height: 13%;
  position:absolute;
  top: 90%;
  left: 75%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 0.8vh;
  color:#ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.9vh;
  font-weight: 700;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_green.png');
  background-size: 100% 100%;
  background-position: center center;
  z-index:99;
  cursor: pointer;
  text-shadow: 0 0 0.4vh black;
}
#routes_tab_create_form_next_btn:disabled {
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_grey.png');
  background-size: 100% 100%;
  background-position: center center;
  cursor: not-allowed;
  color:#969696;
  font-size: 1.8vh;
  font-weight: 300;
}
#routes_tab_create_form_next_btn:active {
  width: 29%;
  height: 12%;
  font-size: 1.7vh;
}
#routes_tab_create_form_next_btn span{
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
}

#routes_tab_create_bottom_block{
  //display:none;
  width: 100%;
  height: 30%;   
  position:absolute;
  top: 85%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #000000;
  color: #ffffff;
}
#routes_tab_create_bottom_block_first_text{ 
  display: none;  
  position:absolute;
  top: 5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #000000;
  font-weight: 800; 
  font-size: 3.5vh;
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}
#routes_tab_create_bottom_block_second_text{ 
  display: none; 
  position:absolute;
  top: 25%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //background-color: #000000;
  font-weight: 500; 
  font-size: 3.2vh;
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}
#routes_tab_create_bottom_block_telegram_btn{
  width: 36%;
  height: 27%;
  border: none;
  border-radius: 0.8vh;  
  position:absolute;
  top: 55%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/routes/Routes_flow_btn_bg_red.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  font-weight: 400; 
  font-size: 1.8vh;
}
#routes_tab_create_bottom_block_telegram_btn_img{
  width: 20%;
  height: 70%;  
  position:absolute;
  top: 50%;
  left: 20%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_create_bottom_block_telegram_btn_img img{
  width: 100%;
  height: 100%;  
  position:absolute;
  top: 50%;
  left: 25%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
}
#routes_tab_create_bottom_block_telegram_btn:active{
  width: 35%;
  height: 26%;  
  font-size: 1.7vh;
}
#routes_tab_create_bottom_block_telegram_btn a{ 
  position:absolute;
  top: 50%;
  left: 60%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
}

/*Route Create End*/
/*Route PopUp Start*/
#routes_tab_route_info_popup {
  width: 95%;
  height: 90%;  
  max-width: 600px;
  position: absolute;
  top: 54%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 990;
  display: none;
}
#tiktok_embed {
  display: none;
  position: absolute;
  top: 51.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 72%;
}

#tiktok_embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
#tiktok_no_embed {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75);
  width: 100%;
  height: 100%;
}
.routes_tab_list_tiktok_no_embed_mask {
  width: 90%;
  height: 50%;  
  position: absolute;
  top: 28%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border-radius: 1vh;
  overflow: hidden;
}
.routes_tab_list_tiktok_no_embed_mask img{
  width: 105%;
  height: auto;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#routes_tab_route_info_popup_route_description {
  width: 95%;
  height: 40%;  
  position: absolute;
  top: 80%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 2.5vh;
}

.routes_tab_route_info_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; 
  //display: none;
}
.routes_tab_route_info_popup_overlay {
  width: 150%;
  height: 150%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#181224;
  opacity: 0.7; 
}

#routes_tab_route_info_popup_title{
  width: 100%;
  height: 6%;
  position: absolute;
  top: 10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;		
  color:#ffffff;
  text-align: center;
  font-size: 2.2vh;
  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;  	
}
#routes_tab_route_info_popup_title span{
  width: 85%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;    	
}
#routes_tab_route_info_popup_view_btn{
  width: 51%;
  height: 8%;
  position: absolute;
  top: 94%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  color: #ffffff;
  z-index: 999;
  border-radius: 0.7vh;
  //border: 0.3vh solid #27f697;
  background-image: url('./assets/css/img/routes/Routes_flow_btn_bg_red.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  font-weight: 400; 
  font-size: 1.8vh;
  font-family: 'Open Sans', sans-serif;	
}
#routes_tab_route_info_popup_view_btn:active {
  width: 50%;
  height: 7.5%; 
  font-size: 1.75vh;
}
#routes_tab_route_info_popup_view_btn span{	
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  user-select:none;
}
#routes_tab_route_info_popup_close_btn{
  width: 2.5vh;
  height: 2.5vh;
  position: absolute;
  top: 4.5%;
  right: 7%;
  //margin-left: -50%;
  transform: translate(50%, -50%); 
  text-align: center;
  z-index: 999;
  background-image:url('./assets/css/img/menu/menu_close_btn.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;	
}
#routes_tab_route_info_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;

}
/*Route PopUp End*/
/*Routes Tab End*/

/*Route Map*/
#route_map{	
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  color: #ffffff; 
  z-index:1;  
}

#route_map_map {	
  width: 100%;
  position:absolute;  
  height: 100%;  
  top: 54%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  //background-image:url('./assets/css/img/MainMenu_MapBorder.png');
  //background-size: 100% 100%;
  //background-repeat: no-repeat;
  //background-position: center center; 
  text-align:center;  
}
#route_map_map img{
  width: 100%;	
  height: 100%;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  position:absolute;  
}

#route_map_map_flow {
  width: 100%;
  height: 100%;	
  margin:0px;
  padding:0px 0px 0px 0px;	
  z-index:5;  
}
#route_map_finish_route {
  width: 40%;
  height: 7%;
  max-width:200px;
  position: absolute;
  top: 90%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 400; 
  background-color:#c105e7;
  border-radius: 1vh;
  font-size: 1.9vh;
  z-index: 10;  
}

#route_map_finish_route span { 
  width:95%; 
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase;
}
#route_map_finish_route:active {
  font-size: 1.8vh;
  width: 37%;
  height: 6.5%;
}
#route_map_map_btns {
  width: 6vh;
  height: 36vh; 
  z-index: 9;
  position: absolute;
  bottom: 14%;
  right: 3%;
}
#route_map_map_btns_bg {
  width: 100%;
  height: 100%; 
  background-color:#000000;
  border-radius:1vh;
  opacity:20%;
}
#route_map_map-zoom-out {
  width: 5vh;
  height: 5vh;
  z-index: 10;
  position: absolute;
  top: 90%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_zoom_out_btn2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center; 
}
#route_map_map-zoom-out:active {
  background-image:url('./assets/css/img/map/map_zoom_out_btn3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center; 
}
#route_map_map-zoom-in {
  width: 5vh;
  height: 5vh; 
  z-index: 10;
  position: absolute;
  top: 64%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_zoom_in_btn2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;  
}
#route_map_map-zoom-in:active {
  background-image:url('./assets/css/img/map/map_zoom_in_btn3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#route_map_map-reset{
  width: 5vh;
  height: 5vh;  
  position: absolute;
  top: 10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_reset_map_btn2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;	  
}
#route_map_map-reset:active {
  background-image:url('./assets/css/img/map/map_reset_map_btn3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

#route_map_map_share_route_btn{	
  //display: none;
  width: 5vh;
  height: 5vh;
  position: absolute;  
  top: 36%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_share_route_btn.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}  
#route_map_map_share_route_btn:active {
  background-image:url('./assets/css/img/map/map_share_route_btn_purple.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
#route_map_name_route {
  width: 100%;
  height: 3vh;
  position: absolute;
  top: 5.4%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 400; 
  background-color:#936ded;
  font-size: 1.8vh;
  z-index: 10;  
}

#route_map_name_route span {
  width: 95%;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
}

#route_map_route_stat {
  width: 100%;
  height: 6%;
  position: absolute;
  top: 12.8%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 9;  
}
.route_map_route_stat_block {
  width: 16%;
  height: 100%;
  position: absolute;
  transform: translate(0%, -50%);  
}
.route_map_route_stat_title{
  width: 99%;
  position: absolute;
  top: 25%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 300; 
  font-size: 1.5vh;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase; 
}

.route_map_route_stat_value{
  width: 99%;
  position: absolute;
  top: 65%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 700; 
  font-size: 2.1vh;
  overflow: hidden; 
}
#route_map_route_stat_distance_value{
  width: 99%;
  position: absolute;
  top: 65%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
#route_map_route_stat_distance_value span{
  font-weight: 500; 
  font-size: 1vh;  
}
#route_map_route_stat_distance_value b{
  font-weight: 500; 
  font-size: 1.4vh; 
}
.route_map_route_stat_bg1 {
  width: 100%;
  height: 100%;
  background-color:#936ded;
  opacity:0.9;
  border-radius: 0vh 0vh 0.7vh 0.7vh; 
}
.route_map_route_stat_bg2 {
  width: 100%;
  height: 100%;
  background-color:#c105e7;
  opacity:0.9;
  border-radius: 0vh 0vh 0.7vh 0.7vh;  
}

#route_map_route_stat_distance {  
  top: 0%;
  left: calc((100% - (4 * 15%)) / 5);
}

#route_map_route_stat_quests {  
  top: 0%;
  left: calc(2 * ((100% - (4 * 15%)) / 5) + 15%);
}

#route_map_route_stat_points {  
  top: 0%;
  left: calc(3 * ((100% - (4 * 15%)) / 5) + 2 * 15%);
}

#route_map_route_stat_profit {  
  top: 0%;
  left: calc(4 * ((100% - (4 * 15%)) / 5) + 3 * 15%);
}

/*Route Page PopUps*/
/*Route Page Select Path*/
#route_map_path_selection {
  display: none;
  width: 95%;
  height: 35%;  
  max-width: 600px;
  position: absolute;
  top: 80%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999; 
  text-align:center;
}
#route_map_path_selection span{
  width: 99%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  //white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#route_map_path_selection_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; 
  opacity: 0.8;
}
#route_map_path_selection_title {
  width: 60%;
  height: 20%;  
  position: absolute;
  top: 10%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 700; 
  font-size: 3vh;
  border-bottom:0.2vh solid #ffffff;
}
#route_map_path_selection_description {
  width: 95%;
  height: 10%;  
  position: absolute;
  top: 35%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-weight: 300; 
  font-size: 2vh;
}
#route_map_path_selection_left_path_btn{
  width: 18vh;
  height: 5.5vh;
  position: absolute;
  top: 58%;
  left: 20%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  z-index: 999;
  border-radius: 0.7vh;
  border: 0.3vh solid #27f697;
  font-weight: 300; 
  font-size: 1.8vh;
}
#route_map_path_selection_left_path_btn:active {
  border: 0.3vh solid #ffffff;
}
#route_map_path_selection_right_path_btn{
  width: 18vh;
  height: 5.5vh;
  position: absolute;
  top: 58%;
  left: 80%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  z-index: 999;
  border-radius: 0.7vh;
  border: 0.3vh solid #27f697;
  font-weight: 300; 
  font-size: 1.8vh;
}
#route_map_path_selection_right_path_btn:active {
  border: 0.3vh solid #ffffff;
}
#route_map_path_selection_confirm_path_btn{
  width: 18vh;
  height: 6vh;
  position: absolute;
  top: 87%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  border-radius: 0.7vh;
  background-image: url('./assets/css/img/routes/Routes_flow_btn_bg_red.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  font-weight: 300; 
  font-size: 1.8vh;
}
#route_map_path_selection_confirm_path_btn:active {
  width: 17vh;
  height: 5.5vh; 
  font-size: 1.75vh;
}

/*Route Page Select Path End*/

#route_map_info_quest_popup {
  width: 95%;
  height: 88%;  
  max-width: 600px;
  position: absolute;
  top: 53.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999; 
  display: none;
  text-align:center;
}
#route_map_info_quest_popup span{
  width:90%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-overflow: ellipsis;
}
#route_map_start_quest_popup {
  width: 95%;
  height: 88%;  
  max-width: 600px;
  position: absolute;
  top: 53.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999; 
  display: none;
  text-align:center;
}
#route_map_start_quest_popup span{
  width:90%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-overflow: ellipsis;
}
#route_map_close_route_popup {
  width: 95%;
  height: 88%;  
  max-width: 600px;
  position: absolute;
  top: 53.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999; 
  display: none;
  text-align:center;
}
#route_map_close_route_popup span{
  width:90%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-overflow: ellipsis;
}
#route_map_finish_route_popup {
  width: 95%;
  height: 88%;  
  max-width: 600px;
  position: absolute;
  top: 53.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999; 
  display: none;
  text-align:center;
}
#route_map_finish_route_popup span{
  width:90%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-overflow: ellipsis;
}
.route_map_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; 
}
.route_map_popup_overlay {
  width: 120vw;
  height: 120vh;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#181224;
  opacity: 0.7; 
}

#route_map_info_popup_continue_route_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;	
}
#route_map_info_popup_continue_route_btn:active {
  border: 0.3vh solid #ffffff; 
}

#route_map_start_route_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;		
}
#route_map_start_route_popup_start_btn:active {
  border: 0.3vh solid #ffffff; 
}
#route_map_close_route_finish_btn{
  width: 35%;
  height: 8%;
  position: absolute;
  top: 85%;
  left: 75%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  font-size: 1.8vh;
  z-index: 6;
  border-radius: 1vh;
  border: 0.3vh solid #fc24ee; 
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;		
}
#route_map_close_route_finish_btn:active {
  border: 0.3vh solid #ffffff; 
}
#route_map_close_route_continue_btn{
  width: 35%;
  height: 8%;
  position: absolute;
  top: 85%;
  left: 25%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  font-size: 1.8vh;
  z-index: 6;
  border-radius: 1vh;
  border: 0.3vh solid #27f697; 
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;		
}
#route_map_close_route_continue_btn:active {
  border: 0.3vh solid #ffffff; 
}
#route_map_finish_route_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;
  background-image:url('./assets/css/img/routes/Routes_flow_btn_bg_red.png');
  background-size: 100% 100%;
  background-position: center center; 
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;		
}
#route_map_finish_route_finish_btn:active {
  border: 0.2vh solid #ffffff; 
}

#route_map_popup_quest_name{
  width: 100%;
  height: 7%;
  position: absolute;
  top: 14%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-weight: 700;		
  font-size: 2.8vh;
  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;
  z-index:6;
  white-space: nowrap;
  text-transform: uppercase;   	
}
#route_map_popup_close_route_name{
  width: 100%;
  height: 7%;
  position: absolute;
  top: 14%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-weight: 700;		
  font-size: 2.8vh;
  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;
  z-index:6; 
  white-space: nowrap;
  text-transform: uppercase;   	
}
#route_map_finish_route_title{
  width: 100%;
  height: 7%;
  position: absolute;
  top: 14%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-weight: 700;		
  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;
  z-index:6; 
  white-space: nowrap;
  text-transform: uppercase;   	
}
.route_map_popup_distance_title{
  width: 85%;	
  font-weight: 300; 
  font-size: 2.6vh;   
  z-index:6;
  position: absolute;  
  top: 25%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 	
}
.route_map_popup_distance_value_align{
  width: 85%;	
  font-weight: 300; 
  font-size: 3vh;   
  z-index:6;
  position: absolute;  
  top: 30%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  	
}
#route_map_popup_description{
  width: 85%;	
  font-weight: 300; 
  font-size: 2vh;   
  z-index:6;
  position: absolute;  
  top: 45%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 	
}
#route_map_popup_arrived_description{
  width: 85%;
  height:20%;	
  font-weight: 500; 
  font-size: 2.5vh;   
  z-index:6;
  position: absolute;  
  top: 45%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 	
}
#route_map_close_route_description{
  width: 85%;
  height:30%;	
  font-weight: 500; 
  font-size: 2.5vh;   
  z-index:6;
  position: absolute;  
  top: 58%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 	
}
#route_map_finish_route_description{
  width: 85%;
  height:20%;	
  font-weight: 700; 
  font-size: 2.8vh;   
  z-index:6;
  position: absolute;  
  top: 45%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 	
}
#route_map_finish_route_smile {	
  width: 9vh;
  height: 9vh;
  position: absolute;
  top: 29%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);    
  background-image:url('./assets/css/img/Roll_Dice/Emote_Smile.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;  
}
#route_map_popup_coord_title{   
  width: 42%;
  height: 5%;
  position: absolute;
  top: 63%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  z-index: 7;
  background-color: #af22d5;
  border-radius: 0.7vh 0.7vh 0vh 0vh;
  //border: 0.2vh solid #ffffff;
}

#route_map_popup_coord_value{   
  width: 60%;
  height: 8%;
  position: absolute;
  top: 69.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  z-index: 7;
  border-radius: 0.7vh;
  border: 0.2vh solid #ffffff; 	
}
#route_map_popup_coord_value b{
  font-family: 'Open Sans', sans-serif;
  font-weight: 300; 
  color: #ffffff;
  font-size: 1.8vh;   
  z-index:6; 
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  	
}
#route_map_close_route_profit_title{   
  width: 42%;
  height: 5%;
  position: absolute;
  top: 27%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  z-index: 7;
  background-color: #af22d5;
  border-radius: 0.7vh 0.7vh 0vh 0vh;
  //border: 0.2vh solid #ffffff;
}

#route_map_close_route_profit_value{   
  width: 60%;
  height: 8%;
  position: absolute;
  top: 33.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  z-index: 7;
  border-radius: 0.7vh;
  border: 0.2vh solid #ffffff;
  font-size: 3vh;
  font-weight: 700;  	
}
#route_map_finish_route_profit_title{   
  width: 42%;
  height: 5%;
  position: absolute;
  top: 59%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  z-index: 7;
  background-color: #af22d5;
  border-radius: 0.7vh 0.7vh 0vh 0vh;
  //border: 0.2vh solid #ffffff;
}

#route_map_finish_route_profit_value{   
  width: 60%;
  height: 8%;
  position: absolute;
  top: 65.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  text-align: center;
  z-index: 7;
  border-radius: 0.7vh;
  border: 0.2vh solid #ffffff;
  font-size: 3vh;
  font-weight: 700;  	
}
.route_map_popup_close_btn{
  width: 2.5vh;
  height: 2.5vh;
  position: absolute;
  top: 6%;
  right: 9%;
  //margin-left: -50%;
  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;	
}
.route_map_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;

}
/*Route End*/
/*Route Create Content Start*/
#create_route{	
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position:absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%); 
  z-index:1;  
}

#create_route_map {	
  width: 100%;
  position:absolute;  
  height: 100%;  
  top: 54%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  text-align:center;  
}
#create_route_map_flow{
  width: 100%;
  height: 100%;	
  margin:0px;
  padding:0px 0px 0px 0px;	
  z-index:5;  
}
#create_route_map_btns {
  width: 6vh;
  height: 25vh; 
  z-index: 9;
  position: absolute;
  bottom: 30%;
  right: 3%;
}
#create_route_map_btns_bg {
  width: 100%;
  height: 100%; 
  background-color:#000000;
  border-radius:1vh;
  opacity:20%;
}
#create_route_map-zoom-out {
  width: 5vh;
  height: 5vh;
  z-index: 10;
  position: absolute;
  top: 85%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_zoom_out_btn2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center; 
}
#create_route_map-zoom-out:active {
  background-image:url('./assets/css/img/map/map_zoom_out_btn3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center; 
}
#create_route_map-zoom-in {
  width: 5vh;
  height: 5vh; 
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_zoom_in_btn2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;  
}
#create_route_map-zoom-in:active {
  background-image:url('./assets/css/img/map/map_zoom_in_btn3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#create_route_map-reset{
  width: 5vh;
  height: 5vh;  
  position: absolute;
  top: 15%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image:url('./assets/css/img/map/map_reset_map_btn2.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;	  
}
#create_route_map-reset:active {
  background-image:url('./assets/css/img/map/map_reset_map_btn3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
#create_route_control_btns {
  width: 100%;
  height: 9vh;
  position: absolute;
  bottom: 5%;
  left: 0%;
  z-index: 9; 
}
#create_route_control_btns span{
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  text-transform: uppercase; 
}
.create_route_control_btns_style {
  width: 8vh;
  height: 8vh;
  position: absolute;
  transform: translate(0%, -50%);
  border-radius: 1vh;
  //border: 0.2vh solid #ffffff; 
  overflow: hidden;
  text-align: center;
  font-weight: 300; 
  font-size: 1.5vh;
  color: #ffffff;  
}
.create_route_control_btns_style:active {
  border: 0.2vh solid #ffffff;  
}
.create_route_control_bg{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color: #000000;
  opacity:20%;
}
#create_route_control_save_btn {  
  top: 50%;
  left: calc((100% - (4 * 8vh)) / 5);
}

#create_route_control_scan_btn {  
  top: 50%;
  left: calc(2 * ((100% - (4 * 8vh)) / 5) + 8vh);
}

#create_route_control_add_btn {  
  top: 50%;
  left: calc(3 * ((100% - (4 * 8vh)) / 5) + 2 * 8vh);
}

#create_route_control_record_btn {  
  top: 50%;
  left: calc(4 * ((100% - (4 * 8vh)) / 5) + 3 * 8vh);
  //display: none;
}
#create_route_control_stop_record_btn {  
  top: 50%;
  left: calc(4 * ((100% - (4 * 8vh)) / 5) + 3 * 8vh);
  display: none;
}
.create_route_control_save_btn_img{
  width: 90%;
  height: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/routes/route_create_save.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.create_route_control_scan_btn_img{
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/routes/route_create_scan_icon.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.create_route_control_add_btn_img{
  width: 80%;
  height: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/routes/route_create_add_icon.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.create_route_control_record_btn_img{
  width: 75%;
  height: 75%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/routes/route_create_record_icon.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
.create_route_control_stop_record_btn_img{
  width: 75%;
  height: 75%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/routes/route_create_stop_icon.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#create_route_request_camera_btn{
  width: 8vh;
  height: 8vh;
  position: absolute;
  top: 15%;
  right: 2.5%;
  background-image: url('./assets/css/img/shoesIcons/Camera_Icon_Small.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  display: none;
}
#create_route_request_camera_btn:active{
  width: 7.8vh;
  height: 7.8vh;
  position: absolute;
  top: 15.2%;
  right: 2.8%;
}
#create_route_camera_flow_small{
  width: 16vh;
  height: 16vh;
  position: absolute;
  top: 9.5%;
  right: 3%;
  border: 0.2vh solid #ffffff;
  border-radius:1vh;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 
  overflow: hidden;
  //display: none;
}
#create_route_camera_flow_small_example{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/routes/Route_Create_small_camera_img.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#create_route_camera_flow_small_camera{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#create_route_camera_flow_small_zoom_in_btn{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: 5%;
  right: 5%;
  background-image: url('./assets/css/img/map/map_zoom_in_btn2.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#create_route_camera_flow_small_zoom_in_btn:active{
  background-image: url('./assets/css/img/map/map_zoom_in_btn3.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#create_route_camera_flow_small_switch_btn{
  width: 5vh;
  height: 5vh;
  position: absolute;
  bottom: 6%;
  left: 5%;
  background-image: url('./assets/css/img/routes/route_create_switch_icon.png');
  background-size: 75% 75%;
  background-position: center center;
  background-repeat: no-repeat;
}
#create_route_camera_flow_small_switch_btn:active{
  background-image: url('./assets/css/img/routes/route_create_switch_icon_active.png');
  background-size: 75% 75%;
  background-position: center center;
  background-repeat: no-repeat;
}

#create_route_camera_flow_big{
  width: 70%;
  height: 70%;
  position: absolute;
  top: 48%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border: 0.2vh solid #ffffff;
  border-radius:1vh;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); 
  overflow: hidden;
  display: none;
}
#create_route_camera_flow_big_example{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/routes/Route_Create_big_camera_img.png');
  background-size: auto 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#create_route_camera_flow_big_camera{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}
#create_route_camera_flow_big_zoom_out_btn{
  width: 5vh;
  height: 5vh;
  position: absolute;
  top: 2%;
  right: 3%;
  background-image: url('./assets/css/img/map/map_zoom_out_btn2.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#create_route_camera_flow_big_zoom_out_btn:active{
  background-image: url('./assets/css/img/map/map_zoom_out_btn3.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
#create_route_camera_flow_big_switch_btn{
  width: 8vh;
  height: 8vh;
  position: absolute;
  top: 93%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-image: url('./assets/css/img/routes/route_create_switch_icon.png');
  background-size: 75% 75%;
  background-position: center center;
  background-repeat: no-repeat;
}
#create_route_camera_flow_big_switch_btn:active{
  background-image: url('./assets/css/img/routes/route_create_switch_icon_active.png');
  background-size: 75% 75%;
  background-position: center center;
  background-repeat: no-repeat;
}

#create_route_content_menu {
  width: 95%;
  height: 88%;  
  max-width: 600px;
  position: absolute;
  top: 53.5%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  z-index: 999; 
  display: none;
  text-align:center;
}
#create_route_content_menu span{
  width: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
}
.create_route_content_menu_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; 
}
.create_route_content_menu_overlay {
  width: 120vw;
  height: 120vh;  
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#181224;
  opacity: 0.7; 
}
#create_route_content_menu_title{
  width: 100%;
  height: 7%;
  position: absolute;
  top: 14%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);  
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;		
  text-align: center;
  font-size: 2.8vh;
  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;
  z-index:6; 	
}
#create_route_content_menu_title span{
  text-overflow: ellipsis; 
  text-transform: uppercase;   	
}
.create_route_close_popup_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;	
}
.create_route_close_popup_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;

}

#create_route_content_menu_flow{
  width: 95%;
  height: 80%;   
  position:absolute;
  top: 60%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; 
}
#create_route_content_menu_block{
  width: 99%;
  height: 18%;
  position:relative;  
  margin-bottom: 1vh;
  border-radius: 1vh;
  border: 0.2vh solid #ffffff;
  font-weight: 300;		
  font-size: 1.9vh;
}
#create_route_content_menu_block span{
  text-overflow: ellipsis;   	
}
.create_route_content_menu_block_file_name_style {
  width: 60%;
  height: 22%;  
  position: absolute;
  top: 20%;
  left: 33%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#575757;
  border-radius: 0.7vh;
  text-align: left; 
}

.create_route_content_menu_block_file_time_style {
  width: 30%;
  height: 22%;  
  position: absolute;
  top: 20%;
  left: 82%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  background-color:#575757;
  border-radius: 0.7vh;
  text-align: center; 
}
#create_route_content_menu_block_save_btn{
  width: 5.5vh;
  height: 5.5vh;
  position: absolute;
  top: 66%;
  left: 52%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 7;
  background-image:url('./assets/css/img/routes/route_create_file_icon.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.7vh;
  border: 0.2vh solid #ffffff;	
}
#create_route_content_menu_block_save_btn:active{
  width: 5.2vh;
  height: 5.2vh;	
}
#create_route_content_menu_block_share_btn{
  width: 5.5vh;
  height: 5.5vh;
  position: absolute;
  top: 66%;
  left: 70%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 7;
  background-image:url('./assets/css/img/routes/route_create_share_icon.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.7vh;
  border: 0.2vh solid #ffffff;	
}
#create_route_content_menu_block_share_btn:active{
  width: 5.2vh;
  height: 5.2vh;	
}
#create_route_content_menu_block_save_btn:active{
  width: 5.2vh;
  height: 5.2vh;	
}
#create_route_content_menu_block_remove_btn{
  width: 5.5vh;
  height: 5.5vh;
  position: absolute;
  top: 66%;
  left: 88%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 7;
  background-image:url('./assets/css/img/routes/route_create_remove_icon.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.7vh;
  border: 0.2vh solid #ffffff;	
}
#create_route_content_menu_block_remove_btn:active{
  width: 5.2vh;
  height: 5.2vh;	
}
/*Route Create Content End*/