:root {
	--color-green: #32ad33;
	--color-orange: #f79a15;
	--category-item-radius: 34px;
}

main {
	min-height: 260px;
}

.learn-top-bar {
	background: #f0f0f0;
	color: #000;
}

.btn.category,
.btn.buy {
	margin-top: -2px;
	padding: 10px 13px;
	color: #fff;
}

.btn.category {
	background: var(--color-green);
}

.btn.buy {
	background: #f74b15;
}
.category-nav a.btn.buy{
	background: #f74b15;
}

.btn.category,
.dropdown-menu.category {
	min-width: 50px;
}

.dropdown-menu.category li {
	padding: 5px;
}

.category-nav,
.demo-notice {
	height: 50px;
	line-height: 50px;
	text-align: center;
}

.category-nav > .category-text {
	margin-right: 10px;
}

.category-nav > ul {
	display: inline-block;
	margin-bottom: 0;
}
.notice-text {
	padding-right: 10px;
}

.demo-notice-text{
	padding-top:2px;
}

.skeleton {
	--color-primary-main: #f5af1d;
	--color-primary-dark: #f58707;
	--margin-top: 17px;
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--margin-top));
	margin-top: var(--margin-top);
}

.skeleton > .header {
	flex: 0 52px;
}

.skeleton > .main {
	display: flex;
	flex: 1;
	flex-direction: row;
	align-items: stretch;
}

.skeleton .process-navigation {
	display: flex;
	flex: 7;
	height: 106px;
}

.skeleton .content {
	display: flex;
	flex: 13;
	flex-direction: column;
	justify-content: space-between;
}

.skeleton .slide-pane {
	flex-grow: 1;
}

.skeleton .tabs {
	flex: 0 36px;
}

.skeleton .loading-progress {
	flex: 0 5px;
	width: 0;
	animation-name: skeleton-loading-progress;
	animation-duration: 30s;
	animation-fill-mode: forwards;
	transition: width;
}

.skeleton .slide-header {
	flex: 0 62px;
	background: #f1f1f1;
}

.skeleton .slide-navigation {
	flex: 0 52px;
}

.skeleton .background-gradient {
	background: var(--color-primary-main);
	background: linear-gradient(to right,
	var(--color-primary-dark) 0%,
	var(--color-primary-main) 40%,
	var(--color-primary-main) 60%,
	var(--color-primary-dark) 100%
	);
}

.skeleton .background-plain {
	background: var(--color-primary-main);
}

.skeleton .visible-mobile {
	display: block;
}

.skeleton .hidden-mobile {
	display: none;
}

@keyframes skeleton-loading-progress {
	0% {
		width: 0;
	}

	100% {
		width: 95%;
	}
}

@media screen and (min-width: 600px) {
	.skeleton .content {
		margin: 0 8px 0 16px;
	}

	.skeleton .loading-progress {
		margin-top: 2px;
	}

	.skeleton .process-navigation {
		margin: 0 16px 0 8px;
	}

	.skeleton .hidden-mobile {
		display: block;
	}

	.skeleton .visible-mobile {
		display: none;
	}
}

.web-app-wrapper {
	width: 100%;
	height: 100%;
}

.menu--hidden {
	/*display: none !important;*/
}

button.advBtn {
	line-height: 28px;
}

a {
	text-decoration: none !important;
}

a:hover, button:hover {
	cursor: pointer !important;
}