body.landing { min-width: 380px; background: url('/_image/bg.jpg'); background-attachment: fixed; background-size: cover; background-position: center; padding: 50px; }
div.is-wrapper { max-width: 1200px; margin: auto; background: #ffffffde; box-shadow: 0 0 4px 3px #00000050; }
header.header { display: flex; align-items: center; border-bottom: 1px solid #0095da45; padding-bottom: 10px; margin-bottom: 25px; }
header.header div.is-logo { min-width: 140px; height: 135px; background: url('/_image/logo.svg'); background-size: cover; margin-right: 30px; }
header.header h1.title { margin: 0; font-size: 3em; font-weight: bold; color: #0095da; }
header.header h2.title { margin: 3px 0 0; }
header.header a.is-getaccess { min-width: 50%; font-weight: bold; text-transform: uppercase; }

article.media { align-items: center; }
article.media div.icon.is-large { width: 5rem; height: 3rem; }
div.icon i.fa-4x { font-size: 4rem; }
article.media div.media-content p { font-size: 1.3em; font-style: italic; }
article.media div.media-content p strong { font-size: 1.5em; }

div.is-price-block { display: flex; flex-direction: column; align-items: center; margin-top: 50px; }
div.is-price-block p:not(:last-child) { margin: 0; }
div.is-price-block p.is-price-prefix, div.is-price-block p.is-discont-info { font-size: 1.5em; font-weight: bold; text-transform: uppercase; }
div.is-price-block p.is-price { font-size: 5em; font-weight: bold; margin-top: -1.5rem; }
div.is-price-block p.is-full-price { font-size: 3em; position: relative; margin-top: -35px; padding: 0 20px; }
div.is-price-block p.is-full-price::before {
	content: '';
	border-bottom: 5px solid #f14668;
	position: absolute;
	width: 100%;
	height: 50%;
	transform: rotate(-6deg);
	top: 6px;
	left: 0;
	}
div.is-price-block p.is-discont, div.is-price-block p.is-discont-info { color: #f14668; }

h3.has-text-danger { padding-left: 15px; }
div.is-access-wrapper { border: 5px solid #f14668; border-radius: 15px; padding: 20px 10px; border-top: 0; border-bottom: 0; }
div.content h3.title { font-size: 2em; }
div.content h3.title.is-4 { font-size: 1.5em; }
div.column.is-qrcode { max-width: min-content; }
div.column.is-qrcode figure { margin: 0; }
div.column.is-qrcode figure img { max-width: 200px; }
div.column.is-qrcode + div.column { display: flex; flex-direction: column; justify-content: center; }
div.column.is-qrcode + div.column h4.title { margin-bottom: 5px; font-size: 1.5em; }
div.column.is-qrcode + div.column p { font-size: 1.3em; }

a.button.is-info:link { background: #0095da; }

textarea.textarea::placeholder, input.input::placeholder { color: #777; }
form.task-box:not(:target) { display: none; }
div.grade-empty, div.grade-1, div.grade-2, div.grade-3 { width: 25px; height: 25px; border-radius: 50px; border: 1px solid black; }
div.grade-empty { background: grey; }
div.grade-1 { background: red; }
div.grade-2 { background: orange; }
div.grade-3 { background: green; }
a.tag.addUnit { background: #cfcdcd; }
span.grade-0, span.grade-1, span.grade-2, span.grade-3 { display: inline-flex; position: relative; top: 4px; width: 20px; height: 20px; border-radius: 50px; border: 1px solid black; }
span.grade-0 { background: grey; }
span.grade-1 { background: red; }
span.grade-2 { background: orange; }
span.grade-3 { background: green; }

span.tag.is-help { background: #cfcdcd; border-radius: 50px; margin-left: 5px; cursor: help; }
span.tag.is-help:hover { background: #ccc; }

table.table.grades td:not(:first-child), table.table.grades th:not(:first-child) { text-align: center; }
span.is-right { background: #cbffab; }
span.is-wrong { background: #ffabab; }

table.table.result td, table.table.result th { text-align: center; width: calc(100% / 7); }
table.table.result td div { display: inline-block; }

table.table.detailed td, table.table.detailed th { text-align: center; }
table.table.detailed td div { display: inline-block; }

table.table.statistic { margin-bottom: 5px; }
table.table.statistic, table.table.statistic td, table.table.statistic th { border-color: #707070; }
table.table.statistic th:first-child { width: 100px; text-align: center; vertical-align: middle; }
table.table.statistic td { height: 30px; }
table.table.statistic td.is-completed { background: #a3aee9; }

div.taskMenu { gap: 5px; }
div.taskMenu a.column {
	min-width: 150px;
	text-align: center;
	border: 1px solid;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

div.navbar-menu.is-active { position: absolute; right: 0; }
div.navbar-menu.is-active .button.is-light:not(.is-active) { background-color: #485fc7; }

section.section div.box { overflow-x: auto; }

@media screen and (max-width: 1150px) {
	header.header div.is-logo { min-width: 120px; height: 115px; }
	header.header h1.title { font-size: 2.5em; }
	header.header h2.title { font-size: 1.5em; }
	}
@media screen and (max-width: 1150px) {
	body.landing { padding: 0; }
	div.is-wrapper { margin: 0!important; }
	}
@media screen and (max-width: 880px) {
	section.section { padding: .5rem; }
	}
@media screen and (max-width: 850px) {
	header.header h1.title { font-size: 2em; }
	header.header h2.title { font-size: 1.15em; }
	div.content h3.title { font-size: 1.5em; }
	article.media div.icon.is-large { width: 4rem; height: 2rem; }
	div.icon i.fa-4x { font-size: 3rem; }
	article.media div.media-content p { font-size: 1.1em; }
	article.media div.media-content p strong { font-size: 1.2em; }
	div.column.is-qrcode + div.column h4.title { font-size: 1.2em; }
	div.column.is-qrcode + div.column p { font-size: 1.1em; }
	}
@media screen and (max-width: 768px) {
	div.column.is-qrcode { min-width: 100%; }
	}
@media screen and (max-width: 700px) {
	header.header div.is-logo { min-width: 100px; height: 96px; margin-right: 15px; }
	}
@media screen and (max-width: 665px) {
	header.header { flex-direction: column; text-align: center; }
	}
@media screen and (max-width: 550px) {
	h3.title.has-text-danger { text-align: center; padding: 0; }
	div.is-price-block p.is-price-prefix, div.is-price-block p.is-discont-info { font-size: 1.2em; }
	div.is-price-block p.is-full-price { font-size: 2em; margin-top: -25px; }
	div.is-price-block p.is-price { font-size: 4em; }
	}
@media screen and (max-width: 450px) {
	article.media div.icon.is-large { width: 2rem; height: 2rem; }
	div.icon i.fa-4x { font-size: 2rem; }
	article.media div.media-content p { font-size: 1.1em; }
	div.column.is-qrcode + div.column h4.title { font-size: 1.1em; }
	div.column.is-qrcode + div.column p { font-size: 1em; }
	div.is-price-block p.is-price-prefix, div.is-price-block p.is-discont-info { font-size: 1em; }
	div.is-price-block p.is-full-price { font-size: 1.5em; margin-top: -20px; padding: 0 10px; }
	div.is-price-block p.is-full-price::before { border-bottom-width: 3px; top: 3px; }
	div.is-price-block p.is-price { font-size: 3em; margin-top: -1rem; }
	}
@media screen and (max-width: 400px) {
	div.content h3.title { font-size: 1.2em; }
	}