#hkbembed-button {
	position: fixed;
	bottom: 20px;
	right: 20px;
	border-radius: 99px;
	background: var(--hkbembed-bg);
	cursor: pointer;
	height: 48px;
	width: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	animation: htfadein ease .5s;
	z-index: 9999999;
}

#hkbembed-button.hkbembed-button--open .hkbembed-button-open {
	opacity: 0;
	transform: scale(.5);
}

#hkbembed-button.hkbembed-button--open .hkbembed-button-close {
	opacity: 1;
	transform: scale(1);
}

#hkbembed-button .hkbembed-button-open {
	opacity: 1;
	transition: opacity .15s ease-in-out, transform .3s ease-in-out;
	transform: scale(1);
}

#hkbembed-button .hkbembed-button-close {
	opacity: 0;
	transition: opacity .15s ease-in-out, transform .3s ease-in-out;
	transform: scale(.5);
}

#hkbembed-button span {
	position: absolute;
}

#ht-kb-fe-embed-contents {
	position: fixed;
	top: 20px;
	left: 20px;
	bottom: 88px;
	right: 20px;
	z-index: 999999;
	pointer-events: none;
	display: flex;
	align-items: end;
	justify-content: flex-end;
}

#ht-kb-fe-embed-contents.hkbembed-contents--open #ht-kb-fe-embed-iframe {
	transform: scale(1);
	opacity: 1;
	visibility: visible;
}

#ht-kb-fe-embed-iframe {
	width: 100%;
	max-width: 380px;
	height: calc(100% - 34px);
	max-height: 550px;
	box-shadow: rgba(0, 0, 0, .15) 0 4px 40px, rgba(0, 0, 0, .05) 20px 100px 45px;
	transition: opacity .2s ease 0s, height .3s ease 0s, box-shadow .3s ease 0s, transform .15s ease-in-out 0s;
	border-radius: 6px;
	border: none;
	pointer-events: all;
	opacity: 0;
	visibility: hidden;
	transform: scale(.8);
	transform-origin: bottom right;
}

@keyframes htfadein {
	0% {
		opacity: 0;
		transform: scale(.9);
	}
	
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.hkb-embedbtn {
	bottom: 20px;
	right: 20px;
	border-radius: 99px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .5rem;
	max-height: 32px;
	max-width: 32px;
}