.ath {
	position: absolute;
	left: 0;
	right: 0;
	display: none;
	z-index: 1000;
	background-color: #eee;
	color: #000;
	justify-content: space-between;
	align-items: center;
	font-family: sans-serif;
	animation-duration: 1s;
	animation-fill-mode: both;
}

body > .ath {
	position: fixed;
}

.ath.bottom {
	bottom: 0;
	top: auto;
	border-top: 1px solid #ddd;
}
.ath.top {
	bottom: auto;
	top: 0;
	border-bottom: 1px solid #ddd;
}

.ath > div {
	padding: 6px;
}

.ath .appIcon {
	padding: 0;
}

.ath .appIcon img {
	width: 60px;
	height: 60px;
	display: block;
}

.ath .iosIcon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox="0 0 16 16"%3E%3Cg fill="%233a93fa" fill-rule="evenodd"%3E%3Cpath d="M3.5 6a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-8a.5.5 0 0 0-.5-.5h-2a.5.5 0 0 1 0-1h2A1.5 1.5 0 0 1 14 6.5v8a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 14.5v-8A1.5 1.5 0 0 1 3.5 5h2a.5.5 0 0 1 0 1h-2z"%2F%3E%3Cpath d="M7.646.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 1.707V10.5a.5.5 0 0 1-1 0V1.707L5.354 3.854a.5.5 0 1 1-.708-.708l3-3z"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
	background-size: 20px 20px;
}

.ath .installNative {
	color: #0c84ff;
	cursor: pointer;
}

.ath.flex {
	display: flex !important;
}

.ath .close {
	font-size: 24px;
	cursor: pointer;
	background: transparent;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	width: 1em;
	height: 1em;
	display: inline-block;
	padding: 0;
	position: relative;
	margin-right: 6px;
	transition: 0.25s ease;
}
.ath .close:hover {
	background: #000;
	color: #fff;
}
.ath .close:before, .ath .close:after {
  position: absolute;
  top: 15%;
  left: calc(50% - .0625em);
  width: 0.125em;
  height: 70%;
  border-radius: 0.125em;
  transform: rotate(45deg);
  background: currentcolor;
  content: "";
}
.ath .close:after {
  transform: rotate(-45deg);
}

/** Animations **/

@keyframes athSlideInUp {
	from {
		transform: translate3d(0, 100%, 0);
		visibility: visible;
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes athSlideOutDown {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
	}
}

@keyframes athSlideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes athSlideOutUp {
  from {
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
  }
}

.athSlideOutUp {
	animation-name: athSlideOutUp;
}

.athSlideInDown {
	animation-name: athSlideInDown;
}

.athSlideInUp {
	animation-name: athSlideInUp;
}

.athSlideOutDown {
	animation-name: athSlideOutDown;
}