/* RADAR */

#radar {
	display: block; 
	width: 200px; 
	height: 200px; 
	margin: 16px auto;
	position:relative;
	background-size: 100% 100%;
	border-radius: 50%;
}

#radar:after {
	display: flex; 
  content: "q";
	z-index: 30; 
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 100%; 
	height: 100%;
	font-size: 36px;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	opacity: .75;
}

#radar[data-mode="0"]:after {content: "Пошук машини";}
#radar[data-mode="1"]:after {content: "Пошук машини з вантажниками"; font-size: 30px;}
#radar[data-mode="2"]:after {content: "Пошук вантажників";}

#radar .pulse {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border-radius:50%;
	background:#dcf48a;
	-moz-animation: pulsating 3s ease-in-out;
	-moz-animation-iteration-count: infinite;
	-webkit-animation: pulsating 3s ease-in-out;
	-webkit-animation-iteration-count: infinite;
	opacity:0.0;
	z-index:5;
}

#radar .ringbase {
  position:absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity:0.0;
  z-index:10;
}

#radar .ring1 {
  box-shadow:0 0 2px 1px #8eb716, inset 0 0 2px 1px #8eb716;
  -moz-animation: ring 2s ease-in-out;
  -moz-animation-iteration-count: infinite;
  -webkit-animation: ring 2s ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation: ring 2s ease-in-out;
  animation-iteration-count: infinite;
}

#radar .ring2 {
  box-shadow:0 0 1px 0px #cbe572, inset 0 0 1px 0px #cbe572;
  -moz-animation: ring 2s ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-delay: 0.5s;
  -webkit-animation: ring 2s ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-delay: 0.5s;
  animation: ring 2s ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: 0.5s;
}

@-webkit-keyframes pulsating {
  0% {opacity: 0.0;}
  50% {opacity: 0.2;}
  100% {opacity: 0.0;}
}

@-moz-keyframes pulsating {
  0% {opacity: 0.0;}
  50% {opacity: 0.2;}
  100% {opacity: 0.0;}
}

@keyframes pulsating {
  0% {opacity: 0.0;}
  50% {opacity: 0.2;}
  100% {opacity: 0.0;}
}

@-webkit-keyframes ring {
  0% {-webkit-transform: scale(0.4, 0.4); opacity: 0.0;}
  50% {opacity: 0.6;}
  100% {-webkit-transform: scale(1.1, 1.1); opacity: 0.0;}
}

@-moz-keyframes ring {
  0% {-moz-transform: scale(0.4, 0.4); opacity: 0.0;}
  50% {opacity: 0.6;}
  100% {-moz-transform: scale(1.1, 1.1); opacity: 0.0;}
}

@keyframes ring {
  0% {transform: scale(0.4, 0.4); opacity: 0.0;}
  50% {opacity: 0.6;}
  100% {transform: scale(1.1, 1.1); opacity: 0.0;}
}

#radar .pointer {
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-animation: circling 3s linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: circling 3s linear;
  -moz-animation-iteration-count: infinite;
  animation: circling 3s linear;
  animation-iteration-count: infinite;
  z-index: 20;
}

#radar .pointer div {
  width: 49%;
  border-bottom:3px solid #8eb716;
}

#radar .dot {
  opacity: 0;
  border: 3px solid #e0f4a5;
  border-radius: 100%;
  position:absolute;
  -webkit-animation: blink 2s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: blink 2s ease-out;
  -moz-animation-iteration-count: infinite;
  animation: blink 2s ease-out;
  animation-iteration-count: infinite;
  z-index: 25;
}

@-webkit-keyframes circling {
  0% {-webkit-transform: rotate(0deg);}
  50% {-webkit-transform: rotate(180deg);}
  100% {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes circling {
  0% {-moz-transform: rotate(0deg);}
  50% {-moz-transform: rotate(180deg);}
  100% {-moz-transform: rotate(360deg);}
}

@keyframes circling {
  0% {transform: rotate(0deg);}
  50% {transform: rotate(180deg);}
  100% {transform: rotate(360deg);}
}

@-webkit-keyframes blink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes blink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

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


/* STAR RATING */


#stars {
  background: url(/online/img/star-inactive.svg) repeat-x left top; 
  background-size: 56px 56px; 
  width: 280px;
  height: 56px;
  margin: 24px auto;
  position: relative;
  top: 0;
  left: 0;
}

#stars span {
  height: 56px;
  width: 56px;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
}

#stars span:hover {
  background: url(/online/img/star-active.svg) repeat-x left top; 
  background-size: 56px 56px; 
}

#stars span:nth-child(5) {width: 100%; z-index: 1;}
#stars span:nth-child(4) {width: 80%; z-index: 2;}
#stars span:nth-child(3) {width: 60%; z-index: 3;}
#stars span:nth-child(2) {width: 40%; z-index: 4;}
#stars span:nth-child(1) {width: 20%; z-index: 5;}

#starline {
  background: url(/online/img/star-active.svg) repeat-x left top; 
  background-size: 56px 56px; 
  height: 56px;
  width: 0;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
}
#stars:hover #starline {display: none;}

#startext {font-weight: bold; text-align: center;}

/* ORDER INFO */

.log-dt {color: #999;}

#order-log .form-row.flex {display: flex;}
#order-log .form-row.flex .log-dt {flex: 1 1 60px; border-right: 1px solid #999; padding-right: 10px; margin-right: 10px;}
#order-log .form-row.flex .log-info {flex: 1 1 240px; font-weight: bold;}
#order-log .form-row.flex .log-info.canceled {color: red;}

#cancel-message {
  margin: 12px; 
  background: #fc0 url(/online/img/alert.svg) no-repeat right 8px center; 
  background-size: 24px 24px;
  color: #333; 
  font-weight: bold; 
  padding: 10px 40px 10px 15px; 
  border-radius: 
  8px;
}

.timer {text-align: center; font-size: 32px;}

#price-section {margin: 10px 16px;}
#price-section .plus {padding-bottom: 16px; font-size: 21px;}
.price-caption {width: 100%; text-align: center; font-size: 14px;}
.order-price {margin: 8px; display: flex; justify-content: center; align-items: center; user-select: none; flex-direction: row; flex-wrap: wrap; width: 95%;}
.order-price .price {display: flex; flex-direction: column; align-items: center; font-weight: bold; margin: 0 20px;}
.order-price .price .top {font-size: 28px; border-bottom: 2px solid #000;}
.order-price .price .bottom {font-size: 16px;}
.order-price .action {
  display: block; 
  width: 36px; 
  height: 36px; 
  line-height: 36px; 
  font-size: 32px;
  background-color: #999; 
  color: #fff; 
  
  text-align: center; 
  border-radius: 6px;
  cursor: pointer;  
  user-select: none;
}
.order-price .action:hover {box-shadow: 0 0 0 5px #eee; background-color: #29c273; }
.order-price.price-auto .price .top {font-size: 21px; border-bottom: 0 none; line-height: 44px;}
.order-price.price-auto .price .bottom {display: none;}

/* PRICE */
.price {display: flex; align-items: center; font-size: 15px; color: #55f;}
.price-value {font-size: 1.87em; margin-right: 5px; font-weight: bold;}
.price-unit {display: flex; flex-direction: column; font-size: 0.73em;}
.price-unit span:first-child {border-bottom: 1px solid #55f;}

/* LOADERS */
#loaders-row {margin-top: 8px;}
#loaders-price {}
#loaders-min-price {font-size: 14px; margin: 10px auto -6px auto; text-align: center; color: #55f;}
#loaders-price-loading {text-align: center; color: #999; font-size: 14px;}
#loaders-group.expanded { background: #eee; }

#loaders-group.expanded > label {
  background: linear-gradient(0deg, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 45%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 100%);
  text-shadow: 0 0 10px #fff !important;
}
#loaders-row label {
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45%, rgba(238,238,238,1) 45%, rgba(238,238,238,1) 100%); 
  text-shadow: 0 0 10px #fff !important;
}