:root {
	--modal-mobile-top-offset: 20%;
	--modal-bg-color: #282828;
}

gb-modal {
	height: calc(100vh - var(--modal-mobile-top-offset));
	top: var(--modal-mobile-top-offset);
}

gb-modal gb-content-well {
	opacity: 1 !important;
	visibility: visible !important;
}

gb-modal .content-container {
	margin: 0;
	width: 100%;
}

gb-modal .content-container .gb-modal-close-btn {
	position: fixed;
	right: 10px;
	top: var(--modal-mobile-top-offset);
}

gb-modal .gb-modal-content-header.hide~.gb-modal-close-btn {
	background-color: transparent;
}

gb-modal .content-container {
	background-color: var(--modal-bg-color);
}

gb-modal .content-container .gb-modal-content-body,
gb-modal .gb-modal-content {
	background-color: var(--modal-bg-color);
}

@media (width >= 800px) {
	gb-modal {
		height: 100vh;
		margin-left: auto;
		right: 0;
		top: 0;
		width: 80%;
	}

	gb-modal .content-container .gb-modal-close-btn {
		right: 20px;
		top: 0;
	}
}