.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/png;base64,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);
	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;
}