style_pop.css

#plus_modal,#minus_modal.active,#zero_prb,#pop_rst{
    font-family:Arial, Helvectia, sans-serif;
	transform:translate(-50%,-50%) scale(0);
	border:1.5px solid black;
	border-radius:8px;
	overflow:auto;
	z-index:1;
	background-color:white;
	padding:1vw 1vw 1vw 0vw;
	max-width:70%; 
    display:none;
    box-shadow: 0 10px 30px black;
    opacity:1;
}
#plus_modal.active{
	position:fixed;
	bottom:-5%;
	right:-5%;
}
#minus_modal.active{
	position:fixed;
	bottom:-5%;
	right:-7%;
}
#zero_prb{
	position:fixed;
	bottom:0%;
	right:-8%;
}
#pop_rst{
	position:fixed;
	bottom:0;
	right:0;
}
#plus_modal.active,#minus_modal.active,#zero_prb,#pop_rst{
	transform:translate(-50%,-50%) scale(1);
}
.icon-up{
	float:left;
	font-size:50px;
	margin-right:0px;
	margin-left:5px;
	padding-left:7%;
	padding-right:3px;
	color:blue;
}
.txt{	
	font-size:18px;
	padding-top:7px;
}
.icon-up,.txt,.cross1{
	display:inline-block;
}
.txt1,.txt3{
	display:block;
	float:left;
	padding-left:0.5vw;
	font-size: 14px;
}
.txt2{
    margin:10px;
    font-size: 20px;
    
}
.icon-sad{
	float:left;
	font-size:40px;
	/*margin-right: 20px;*/
	margin-left:30%;
	color:blue;
}
.icon-sad,.txt2,.cross2{
	display:inline-block;
}
.cross1,.cross2,.cross3,.cross4{
	float:right;
    font-size:14px;
	cursor:pointer;
	
}
.txt4{
	margin-left:40%;
}
.txt5{
	text-align: center;
	float:left;
	font-size:16px;
	padding-left:10px;
}
.cross1:hover,.cross2:hover,.cross3:hover,.cross4:hover{
	color:red;	
}
.run,.cross4{
	display:inline-block;
}
.run{
	padding-left:40%;
	color:blue;
	font-size: 20px;
}
.cross4{
	margin-left:10%;
}