::-webkit-input-placeholder {color:#000000; opacity:1;}/* webkit */
		::-moz-placeholder          {color:#000000; opacity:1;}/* Firefox 19+ */
		:-moz-placeholder           {color:#000000; opacity:1;}/* Firefox 18- */
		:-ms-input-placeholder      {color:#000000; opacity:1;}/* IE */
		
			body {
background-image: url(https://proezdnoy59.files.wordpress.com/2022/05/fon.png);	
	background-attachment: fixed;
	font-family: roboto;
	overflow-x:hidden;
	}
	
	
	.shap {
	
		Width: 100vw;
		height: 7.8125vh;
		
		margin: 0.8854vh 0px 0.8854vh 0px;	
		
	}
	.shap_x {
		Width: 100vw;
		background-color: white;
		height: 7.8125vh;
		
		margin: 0px 0px 0.8854vh 0px;
		position: absolute;
		top: 0%;
		position: fixed;
		z-index: 999996;
		box-shadow: 0 0 0.6vh rgba(0,0,0,0.2);
		left: 0%;
		
		
	}
			.mini_line {
			width: 7.1296vw;
			background-color: rgb(152,152,152);
			height: 0.3125vh;
			border-radius: 0.9259vw;
			margin: 2.3958vh 0 0 1.666vh;
			z-index: 999999;
			}
			.mini_line2 {
			width: 7.1296vw;
			background-color: rgb(152,152,152);
			height: 0.3125vh;
			border-radius: 0.9259vw;
			margin: 0.8854vh 0 0 1.666vh;
			z-index: 999999;
			}
			.shap_cen {
			position: absolute;
			top: 50%;	
			transform: translate(-50%, -50%);
			margin-left: calc(12vw + 10vh)
			
			}
				.null_shap
				{
				height: 0.9375vh
				}
				zo {
				font-family: roboto;
				font-size: calc(1.5vw + 1.2vh);
				
				}
				op {
				font-family: roboto;
				font-size: calc(1.5vw + 1.5vh);
				font-weight: 600;
				
				}
	.marshrut {
		text-align: center;
		background-color: white;
		Width: 87vw;
		height: calc(18vh + 23vw);
		border-radius: 2vw;
		position: relative;
		margin: 0.8854vh auto 0.8854vh auto;	
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
	}
			.null_marsh {
			height: 0.520833vh;
			}
			mar {
			font-family: roboto;	
			font-size: calc(3.5vw + 1.8vh);
			}
			mar1 {
				font-family: roboto;	
				font-size: calc(3.5vw + 1.8vh);
				display: flex;
				justify-content: center;
				}
			kal {
			font-family: roboto;
			font-weight: 600;	
			font-size: calc(3.5vw + 1.8vh);
			}
			kal1 {
				font-family: roboto;
				font-weight: 600;	
				font-size: calc(3.5vw + 1.8vh);
				display: flex;	
				justify-content: center;
				align-items: center;
				}
			ust {
				font-size: calc(2vw + 1.5vh);
				font-family: roboto;
			}
			pixel {
				font-size: calc(2vw + 1.5vh);
				font-family: roboto;
				font-weight: 600;
			}
			.inp_avt {
			font-family: roboto; 
			font-size: calc(3.5vw + 2vh); 
			font-weight: 600; height: 3.6458vh; 
			max-width: 45vw; 
			text-transform: uppercase; 
			border: solid 1px white
			}
			.inp_ust {
			border: solid 1px white; 
			text-align: center; 
			width: 46.3vw; 
			font-family: roboto; 
			font-size: calc(1vw + 2vh); 
			font-weight: 600;
			}
	.time_pos {
		text-align: center;
		font-family: roboto;
		font-weight: 600;
		background-color: white;
		Width: 87vw;
		height: 14.84vh;
		border-radius: 2vw;
		position: relative;
		margin: 0.8854vh auto 0.8854vh auto;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
		}
			.null_pos
			{
			height: 0.5vh; 
			width: 2vw
			}
			t {
				font-size: calc(1vw + 1vh);
				}
			x {
				font-size: calc(2vw + 3vh);
				
				}
			y {
				font-size: calc(1vw + 1.5vh);
				}
		.text_t_p {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-right: -50%;
		transform: translate(-50%, -50%);
		}
		
		
	.timer {
		text-align: center;
		font-family: roboto;
		font-weight: 600;
		background-color: white;
		Width: 87vw;
		height: 11.45vh;
		border-radius: 2vw;
		position: relative;
		margin: 0.8854vh auto 0.8854vh auto;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
	}
		timere {
			font-size: calc(2vw + 3vh);
	}
			.inp_timer
			{
				font-family: roboto; 
				font-weight: 600;
				font-size: calc(3vw + 2.5vh); 
				border: solid 1px white; 
				position: relative; 
				width: 30vw; 
				text-align: center
			}
		.clock
		{
			color: black;
}
	
	.qr {
		background-color: white;
		Width: 87vw;
		height: 18.75vh;
		border-radius: 2vw;
		position: relative;
		margin: 0.8854vh auto 0.8854vh auto;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
			
		
	}
		.imqr {
			height: 23.148vw; 
			width: 23.148vw
		}
	.ost {
		text-align: center;
		font-family: roboto;
		background-color: white;
		Width: 87vw;
		height: 5.2vh;
		border-radius: 2vw;
		position: relative;
		margin: 0.8854vh auto 0.8854vh auto;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
		}
	
	.control {
		text-align: center;
		font-family: roboto;
		background-color: white;
		Width: 87vw;
		height: 40vh;
		position: relative;
		margin: 1.3vh auto 1.3vh auto;
		outline: dotted 0.7vw rgb(105,105,105);
		padding: 0.5vh 0 0.5vh 0;
		}
			n {
				font-size: calc(1.7vw + 1vh);
				line-height: 2.5vh;
				
			}
			kim {
				font-size: calc(1.7vw + 1vh);
				font-family: roboto;
				font-weight: 600;
				
			}
			bilet {
				font-size: calc(1.7vw + 1vh);
				font-family: roboto;
					
			}
		.line {
		border-bottom: solid 0.3703vw rgb(198,198,198);
		width: 75.46vw;
		position: center;
		}
		.null_cont {
		height: 0.8vh; 
		width: 2vw
		}
		.null_cont2 {
		height: 1vh; 
		width: 2vw
		}
		.null_cont3 {
		height: 0.4vh; 
		width: 2vw
		}
		.inp_avt2 {
		font-family: roboto; 
		font-size: calc(2vw + 1vh); 
		text-transform: uppercase
		}
		.marshrut_dviz {
		margin-left: 1vw; 
		text-align: left; 
		width: 75vw;
		font-size: calc(2vw + 0.85vh); 
		width: 69.44vw;
		}
			marshrutfont {
			font-size: calc(2vw + 0.85vh); 
			width: 69.44vw;
			}
			marshrutfont2 {
			font-size: calc(2vw + 0.85vh); 
			width: 69.44vw;
			color: white;
			}
	.bottom {
	background-color: white;
		Width: 100vw;
		height: 6vh;
		position: relative;
		bottom: 0%;
		margin: 0px 0px 0vh 0px;
		padding-bottom: 1vh;
		opacity: 0%;
	}
	
	.bottom_m {
		display: flex;
		justify-content: space-around;
	
  }
  
	.bottom_x{
	background-color:white;
		Width: 100vw;
		height: 6.78vh;
		margin: 0px 0px 0px 0px;
		position: absolute;
		bottom: 0%;	
		left: 0%;
		z-index: 999998;
		position: fixed;
		box-shadow: 0 0 0.6vw rgba(0,0,0,0.2);
		padding-bottom: 1vh
	}
		.fig_1 {
			margin: 0.5vh 0 0 0; 
			width: 15vw; 
			text-align: center;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: space-between;
			height: 6.3vh;

		}
			.img_fig_1 {
				height: 4.166vh;
			}
			.font_fig_1 {
			font-size: calc(1vw + 1vh); 
			color: rgb(17,121,145)
			}
		.fig_2 {
			margin: 0.5vh 0 0 0; 
			width: 15vw; 
			text-align: center;
			display: flex;
			align-items: center;
			flex-direction: column; 
			justify-content: space-between;
			height: 6.3vh;

		}
			.img_fig_2 {
				height: 4.166vh; 
			}
			.font_fig_2 {
			font-size: calc(1vw + 1vh);  
			color: rgb(110, 110, 110)
			}
		.fig_3 {
			margin: 0.5vh 0 0 0; 
			width: 15vw; 
			text-align: center;
			display: flex;
			align-items: center;
			flex-direction: column; 
			justify-content: space-between;
			height: 6.3vh;

		}
			.img_fig_3 {
				height: 4.166vh;
			}
			.font_fig_3 {
			font-size: calc(1vw + 1vh);
			color: rgb(110, 110, 110)
			}
		.fig_4 {
		margin: 0.5vh 0 0 0; 
		width: 15vw; 
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		height: 6.3vh;

		}
			.img_fig_4 {
				height: 4.166vh;
			}
			.font_fig_4 {
			font-size: calc(1vw + 1vh); 
			color: rgb(110, 110, 110)
			}
	.profile_new {
      display: none;
      width: 100vw;
      height: 10vh;
      background-color: white;
      border-radius: 2vw;
	  box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
    }
	
	.profile_new_img {
			 width:13vw; 
			 height:13vw; 
			 opacity: 90%;
			
			
	}
	
	.prof_cen {
			position: relative;
			top: 50%;	
			transform: translate(-50%, -50%);
			margin-left: 36vw
			
			}
		email {
		  position: absolute;
		  top: 30%;
		  margin-left: 2vw;
		  font-size: calc(2vw + 1.2vh);
		  font-family: roboto;
		  float: left; 
		  font-weight: 500;
		}
		
		.profile_new2 {
      display: none;
      width: 100vw;
      height: 61vh;
      background-color: white;
	  box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
	  margin-top: 1.5vh
    }
	
	.profile_menu {
		width: 100vw;
		height: 6vh;
		border-bottom: solid 0.1px grey;
	}
	
	profile_menu {
		  position: relative;
		  top: 30%;
		  margin-left: 2vw;
		  font-size: calc(1.5vw + 1.2vh);
		  font-family: roboto;
		  float: left; 
		  font-weight: 500;
		}
		
	.schedule_new {
      display: none;
      width: 80vw;
      height: 70vh;
      margin: 0.8854vh auto 0.8854vh auto;
    }
	
	.schedule_block {
		width: 80vw;
		height: 7vh;
		margin-bottom: 0.8854vh;
		background-color: white;
		border-radius: 2vw;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
	}
	
	.schedule_block_N {
		width: 80vw;
		height: 7vh;
		margin-bottom: 0.8854vh;
		background-color: rgb(233, 233, 233);
		border-radius: 2vw;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
	}
	
	.img_schedule_menu {
	    position: relative;
    float: right;
    width: 10vw;
    height: 10vw;
    top: 10%;
    margin-right: 1.5vw;
	}
	
	.schedule_block_outline {
	width: 64vw;
    outline: solid 0.2vw rgb(34,34,34);
    margin: 3vw 0 0 3vw;
    height: 4vh;
    display: inline-block;
	border-radius: 0.5vw;
	}
	
	.time_schedule {
	
    font-size: 4vw;
    position: relative;
    top: 50%;
    left: 85%;
    transform: translate(-50%, -50%);
	}
	
	.schedule_star {
	position: absolute;
    right: 2%;
    top: 1%;
    z-index: 999999;
	width: calc(6vw + 3vh);
    height: calc(6vw + 3vh);
	}
	
	.proezdnoy_new {
      display: none;
      width: 100vw;
      height: 80vw;
    }
	
	.proezdnoy_greycard {

		width: 80vw;
		position: relative;
		left: 10%;
	}
	
	.proezdnoy_redplus {

		width: calc(2vw + 1vh);
		position: relative;
		left: 50%;
		transform: translate(-50%, -50%);
		margin-top: 2vh;
	}
	.proezdnoy_cardnumber {
		text-align: center;
		font-family: roboto;
		background-color: white;
		Width: 80vw;
		height: 15vh;
		border-radius: 2vw;
		position: relative;
		margin: 0.8854vh auto 0.8854vh auto;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
		background-color: white;
		display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: nowrap;
	

		}
		numcard {
		    font-size: calc(1vw + 1.5vh);
			font-family: roboto;
			font-weight: 500;

		}
		
		proezdnoy_num {
		color: rgb(119, 119, 119);
		font-size: calc(2vw + 1.5vh);
		
		}
		numunder {
		font-size: calc(1vw + 1vh);
		}
		
	.proezdnoy_block_outline {
	width: 35vw;
    outline: solid 0.5vw rgb(119, 119, 119);
    margin: 0vw 0 0 2vw;
    height: 6vh;
    display: inline-block;
	border-radius: 0.5vw;
	}
	
	.proezdnoy_flex {
	display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
	}
	
	.add_card {
	text-align: center;
		font-family: roboto;
		background-color: rgb(117,117,117);
		Width: 80vw;
		height: 6vh;
		border-radius: 2vw;
		position: relative;
		margin: 0.8854vh auto 0.8854vh auto;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
		background-color: rgb(117,117,117);
		display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
    justify-content: center;
		
	}
	.add_card_img {
		width: 5vw;
		height: 5vw;
		margin: 0 1.5vw 0 0;
	}
	add_text {
	color: white;
	font-size: 4vw;
	}
	.new_control {
		text-align: center;
		font-family: roboto;
		background-color: white;
		Width: 87vw;
		height: 15vh;
		border-radius: 2vw;
		position: relative;
		margin: 0.8854vh auto 0.8854vh auto;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
		display: none;
		}

		.new_control.none {
			display: none;
			}

	.control_img_left {
	width: 16vw;
	margin-right: 1vw
	}
	
	.control_img_right {
	width: 16vw;
	margin-left: 1vw
	}
	
	.button {
      font-family: roboto;
      background-color: rgb(0,84,190);
      width: 87vw;
      height: 5vh;
      border-radius: 2vw;
      margin: 0.8854vh auto;
      box-shadow: 0 0 0.8854vh rgba(0, 0, 0, 0.2);
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: transform 0.2s;
    }

	.button.off {
		font-family: roboto;
		background-color: rgb(0,84,190);
		width: 87vw;
		height: 5vh;
		border-radius: 2vw;
		margin: 0.8854vh auto;
		box-shadow: 0 0 0.8854vh rgba(0, 0, 0, 0.2);
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: transform 0.2s;
	  }

    .button:hover {
      background-color: rgb(7, 61, 103);
    }

    .button:active {
      transform: scale(0.95);
    }
	
	bilet {
				font-size: calc(2vw + 1.5vh);
				font-family: roboto;					
			}

.left_menu {
	position: fixed;
	Width: 65vw;
	top: -100%;
	left: 0%;
	height: 100vh;
	background-color: white;
	z-index: 999997;
	display:flex;
	justify-content: center;
	transition: left 0.5s ease;
	}
	
	.left_menu_point {
	width: 57vw;
	border-bottom: solid 2px grey;
	border-top: solid 1vh white;
	color: black;
	height: 6vh;
    font-size: 3.75vw;
	display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
}
	.img_left_menu {
	margin-right: 2vw;
    height: 6vw;
    Width: 6vw;
	margin-left: 1vw
	}
	
	.left_menu_exit {
	height: 10vw;
    width: 10vw;
    margin: 2vh 0 2vh 0;
	}
	
	
	#left_menu {
      top: 0;
      left: -100%;
      transition: left 0.5s ease;
    }
	
	.mini_line.transparent {
      opacity: 0.3;
    }
	
	.mini_line2.transparent {
      opacity: 0.3;
    }
	
	.shadow {
	height: 100vh;
	width: 100vw;
	z-index: 999996;
	opacity: 0;
	position: fixed;
	top: 0%;
	left: 0%;
	transition: opacity 0.5s ease;
	background-color: black;
	pointer-events: none;
	}
	
	.shadow.transparent {

	opacity: 0.3;
	transition: opacity 0.5s ease;
	}
	
	.poriadok_oplati_text {
	height: 100vh;
	Width: 100vw;
	background-color: white;
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	
	}
	
	.poriadok_oplati_text2 {
	font-size: 3.7vw;
    line-height: 1.5;
	position: absolute;
    top: 8vh;
	display: none;
	}
	
	.arrow_img {
	display: none;
	position: fixed;
    top: 2.25%;
    left: 4%;
    height: 6vw;
    width: 6vw;
    z-index: 999999;
	}
	
	.scan_QR_fon {
	position: fixed;
	display: none;
	background-color: black;
	flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0%;
	z-index: -1;
	}
	.scan_QR_elements {
	display: flex;
    height: 88vw;
    flex-direction: column;
    justify-content: space-around;
    align-content: flex-start;
    align-items: center;
	z-index: 1;
	}
	
	QR_text {
	    font-size: 4vw;
    font-weight: 600;
	color: black;
	}
	
	.scan_QR_border {
	outline: solid 0.5vw black;
    width: 70vw;
    height: 70vw;
	}
	
	.scan_QR_img {
    height: 30vh;
    width: 10vw;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
	}
	
	.QR_border_img {
	display: flex;
    align-items: center;
    flex-direction: row;
    align-content: center;
    flex-wrap: nowrap;
    width: 86vw;
    justify-content: space-evenly;
    margin: 0 0 0 13vw;
	}
	
	.num_QR_ts {
		text-align: center;
		font-family: roboto;
		background-color: white;
		Width: 80vw;
		height: 12vh;
		border-radius: 2vw;
		position: relative;
		margin: 0.8854vh auto 0.8854vh auto;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
		background-color: white;
		display: flex;
    align-content: center;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    flex-wrap: nowrap;
	

		}

		
		numQR {
		color: black;
		font-size: calc(1.5vw + 1vh);
		}
		
	.num_QR_ts_outline {
	width: 35vw;
    outline: solid 0.5vw rgb(119, 119, 119);
    margin: 0vw 0 0 2vw;
    height: 6vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	border-radius: 0.5vw;
	}
	
	.num_QR_ts_flex {
	display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
	}
	
	.continue {
	text-align: center;
		font-family: roboto;
		background-color: rgb(117,117,117);
		Width: 80vw;
		height: 6vh;
		border-radius: 2vw;
		position: relative;
		margin: 0.8854vh auto 0.8854vh auto;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
		background-color: rgb(117,117,117);
		display: flex;
    align-content: center;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	}
	
	.num_QR_inp {
	color: white;
    background: none;
    border: none;
    height: inherit;
    width: 30vw;
    font-size: calc(2vw + 1.5vh);
    font-weight: 500;
    text-align: center;
	outline: none;
	}
	
	.num_QR_box {
		display: none;
	}
	
	.card_box {
	display: none;
	margin: 0 auto 0 auto;
	width: 75vw;
	}
	
	.card_flex {
	display: flex;
	}
	
	.virtual_card {
	width: 75vw;
	box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
	margin: 0.8854vh auto 0 auto;
	}
	
	.balance {
	height: 6vh;
	width: 75vw;
	margin: 0.8854vh auto 0 auto;
	border-radius: 2vw;
	background-color: white;
	box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
	display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
	}
	.green_box {
	height: 6vh;
	width: 75vw;
	margin: 0.8854vh auto 0 auto;
	border-radius: 2vw;
	background-color: rgb(48,154,90);
	box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
	display: flex;
    align-items: center;
    justify-content: center;
	}
	.blue_box {
	height: 6vh;
	width: 75vw;
	margin: 0.8854vh auto 0 auto;
	border-radius: 2vw;
	background-color: rgb(15,126,252)	;
	box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
	display: flex;
    align-items: center;
    justify-content: center;
	}
	
	balance_text {
	color: black;
	font-size: 4.5vw;
	}
	
	.balance_box {
	    width: 15vw;
    height: 4vh;
    background-color: rgb(130,200,207);
    border-radius: 2vw;
    margin-left: 2vw;
	display: flex;
    align-items: center;
    justify-content: center;
	
	}
	kam {
	font-family: roboto;
    font-weight: 600;
    font-size: calc(2.25vw + 1vh);
    color: black;
	}
	
	.wallet {
		    height: 4vh;
			margin-right: 1vw;
	}
	
	.orange_alert {
	height: 32vh;
    width: 75vw;
    margin: 0.8854vh auto 0 auto;
    border-radius: 2vw;
    background-color: rgb(253,210,163);
    box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
	}
	
	.orange_alert_text {
	    display: flex;
    width: 67vw;
    flex-direction: column;
    align-content: center;
    align-items: center;
    height: 30vh;
    justify-content: space-evenly;
	}
	
	.more {
		    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: center;
    background-color: rgb(239,169,102);
    width: 35vw;
    height: 7vh;
    box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
    border-radius: 2vw;
	}
	
	more_text {
	font-family: roboto;
    font-size: calc(2.25vw + 1vh);
    color: black;
	}
	
	qropl {
	font-family: roboto;
    font-size: calc(2vw + 1vh);
    color: rgb(228,174,122);
    font-weight: 600;
	}
	
	qropl2 {
	    font-family: roboto;
    font-size: calc(1.5vw + 1vh);
    color: rgb(228,174,122);
    text-align: justify;
	}
	
	.right_up_img {
		display: none;
	position: fixed;
    right: 3%;
    top: 2%;
    z-index: 999996;
    width: 6vw;
    height: 6vw;
	}
	
	.copy_img {
		display: none;
	position: fixed;
    right: 20vw;
    top: 1%;
    z-index: 999996;
    width: calc(1.5vw + 1.5vh);
    height: calc(1.5vw + 1.5vh);
	}
	
	.history_box {
	display: none;	
	
	}
	
	.history_line {
	height: 7vh;
    width: 75vw;
    margin: 0.8854vh auto 0 auto;
    border-radius: 2vw;
    background-color: white;
    box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
	}
	
	.greenbus_box {
    height: 4.5vh;
    width: 14vw;
    border-radius: 1vw;
    background-color: rgb(48,154,90);
    box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
	}
	
	.green_box_bus {
	    width: 5.5vw;
    margin: 0 1vw 0 0;
	}
	
	.greenbus_box_num {
	    color: white;
    font-weight: 600;
    font-size: 3.5vw;
	}
	
	.random_date {
	color: black;
    font-weight: 600;
    font-size: 3vw;
	}
	
	greenn {
	color: rgb(44,146,85);
    font-weight: 600;
    font-size: 3vw;
	display: flex;
    align-items: center;
	}

	.history_paid_box {
		display: none;	
		
		}
		
		.history_paid_line {
		height: 7vh;
		width: 75vw;
		margin: 0.8854vh auto 0 auto;
		border-radius: 2vw;
		background-color: white;
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: space-around;
		align-items: center;
		}
		
		.green_paid_box {
		height: 4vh;
		width: 23vw;
		border-radius: 1vw;
		background-color: rgb(48,154,90);
		box-shadow: 0 0 0.8854vh rgba(0,0,0,0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		}
		
		
		.green_paid_num {
			color: white;
		font-weight: 600;
		font-size: 3.5vw;
		}

		.TS_map_box {
			display: none;
		}

		.map {
			height: 100vh;
		}

		.blue_button {
			background-color: rgb(0, 84, 190);
			width: 87vw;
			height: 5vh;
			border-radius: 2vw;
			margin: 0.8854vh auto;
			box-shadow: 0 0 0.8854vh rgba(0, 0, 0, 0.2);
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			transition: transform 0.2s;
			font-size: calc(1vw + 1vh);
			border: none;
		}

		.blue_button:hover {
			background-color: rgb(7, 61, 103);
		  }
	  
		.blue_button:active {
			transform: scale(0.95);
		  }

		@media (pointer: coarse) {
			.blue_button:hover {
				background-color: rgb(0, 84, 190);
			}
		  }
		.bluetooth {
			font-size: calc(1vw + 1.7vh);
			margin-right: 2vw;
		}

		.buy_img {
			height: calc(3.5vw + 1.8Vh);
			margin: 0 1vw;
		}

		.green_img {
			height: 5vw;
			margin: 0 1vw;

		}

		#oplata {
			margin: 0 1vw 0 0 ;
		}

		.container {
    position: fixed;
    top: 40%;
    right: 25%;
      transition: opacity 0.5s;
      
    }
    .input-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    
    }
    
    .inp_id {
    width: 50vw;
    height: 8vh;
    border-radius: 4vw;
        font-size: 6vw;
        font-weight: 600;
        border: 0px;
        text-align: center;
    }
    
    .btn_id {
    margin-top: 1vh;
    width: 30vw;
    height: 8vh;
    border-radius: 4vw;
        font-size: 4vw;
        font-weight: 600;
        border: 0px;
        transition: background-color 0.3s;
    } 
    
    button:hover {
      background-color: green;
    }
    
    .fon {
    background-color: black;
    opacity: 60%;
    position: fixed;
    top:0%;
    left:0%;
    width: 100vw;
    height: 100vh;	
    transition: opacity 0.3s
    
    }
    
    .container.block {
      opacity: 100%;
      pointer-events: all;
	     z-index: 1000000;

    }
    
    .fon.block {
      opacity: 80%;
      pointer-events: all;
	   z-index: 1000000;
    }

    .container.hidden,
    .fon.hidden {
      opacity: 0;
      pointer-events: none;
	  z-index: 1000000;
    }
    
    .disable-elements {
      pointer-events: none;
    }
    

       .ups {
        font-size: 6vw;
        font-weight: 600;
        position: relative;
        top: 35vh;
        margin: 0 auto 0 auto;
        width: 80vw;
        text-align: center;
        display: none;
       }