:root {
--size-sm: 540px;
--size-md: 960px;
--size-lg: 1140px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	overflow-y: scroll;
	background: #eff2f7;
	font-size: 14px;
	font-family: verdana, sans-serif;
	min-width: 320px;
	width: 100%;
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
}

.container-1	{ display: grid; grid-template-columns: 1fr; }
.container-2	{ display: grid; grid-template-columns: 1fr 1fr; }
.container-3	{ display: grid; grid-template-columns: 1fr 1fr 1fr; }
.container-4	{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.container-12	{ display: grid; grid-template-columns: 1fr 2fr; }
.container-21	{ display: grid; grid-template-columns: 2fr 1fr; }
.container-13	{ display: grid; grid-template-columns: 1fr 3fr; }
.container-31	{ display: grid; grid-template-columns: 3fr 1fr; }

@media screen and (max-width: 960px) {
.container-4	{ display: grid; grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 540px) {
.container-2	{ display: grid; grid-template-columns: 1fr; }
.container-3	{ display: grid; grid-template-columns: 1fr; }
.container-4	{ display: grid; grid-template-columns: 1fr; }
.container-12	{ display: grid; grid-template-columns: 1fr; }
.container-21	{ display: grid; grid-template-columns: 1fr; }
.container-13	{ display: grid; grid-template-columns: 1fr; }
.container-31	{ display: grid; grid-template-columns: 1fr; }
}

.header-screen {
	background: linear-gradient(#000088, #0c5adb);
	border-width: 1px;
	border-style: none none solid none;
	border-color: #000088;
	position: sticky;
	top: 0px;
	height: 42px;
	box-shadow: rgba(0,0,0,0.8) 0px 0px 5px 0;
	z-index: 1000;
}
.header {
	padding: 0.2em 1em;
	display: grid;
	grid-template-columns: 140px minmax(100px, 1fr) auto;
}

.header-logo {}

.header-buttons {
	margin: auto 0 auto auto;
}
.header-menu-checkbox1 { display: none; }
.header-menu-checkbox2 { display: none; }

/* header-menu - desktop - begin */
.header-menu-field-box {
	display: none;
}
.header-menu {
	margin: auto auto auto 0;
}
.header-menu nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
}
.header-menu nav ul li {
	display: inline-block;
}
.header-menu nav div,
.header-menu nav a {
	display: block;
	padding: 0 1em;
	line-height: 2em;
	font-weight: bold;
	color: #efefef;
	text-decoration: none;
}
.header-menu nav div:hover,
.header-menu nav a:hover {
	background-color: #00006e;
}
.header-menu nav ul ul {
	display: none;
	position: absolute;
	background: #ab2b28;
	box-shadow: rgba(0,0,0,0.5) 0px 0px 2px 0;
	margin: 0 -1em;
}
.header-menu nav ul ul li {
	display: list-item;
}
.header-menu nav div:hover > ul {
	display: block;
}
.header-menu-checkbox2:checked ~ div {
	background-color: #6e0000;
}
.header-menu-checkbox2:checked ~ div ul {
	display: block;
}
.search-field-input-li {
	display: none;
}
/* header-menu - desktop - end */
/* header-menu - mobile - begin */
@media (max-width: 960px) {
.header			{ grid-template-columns: 140px minmax(10px, 1fr) 32px; }
.search-field-box 	{ display: none; }
.header-menu-field-box	{ display: block; }
.header-menu-checkbox1:checked  + nav {
	display: block;
}
.header-menu nav {
	display: none;
	position: fixed;
	overflow: scroll;
	width: 100%;
	xheight: calc(100vh - 42px);
	top: 42px;
	left: 0px;
	background-color: #ab2b28;
}
.header-menu nav ul li {
	padding: 0.1em 1em;
	display: block;
}
.header-menu nav div {
	padding: 0 1em 0.2em 1em;
	line-height: 3em;
}
.header-menu nav ul ul {
	display: none;
	position: relative;
	box-shadow: none;
}
.header-menu nav ul ul li a {
	line-height: 3em;
	xletter-spacing: 0.05em;
}
.header-menu-checkbox2:not(:checked) ~ div {
	background-color: none !important;
}
.header-menu-checkbox2:not(:checked) ~ div ul {
	display: none !important;
}
.search-field-box-li {
	margin: 1em 0;
}
.search-field-input-li {
	display: block;
	width: 100%;
	padding: 0.5em;
	border: 1px solid #bdbdbd;
	border-radius: 0.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bdbdbd' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
}
.search-field-input-li:focus {
	outline: 0;
	background-color: #fcfcbb;
	border-color: #bdbdbd;
	box-shadow: 0 0 0 0.2em rgba(0,0,0,0.2);
}
}
@media handled {}
/* header-menu - mobile - end */

.search-field-box {
}
.search-field-input {
	padding: 0.2em 2em 0.3em 0.5em;
	border: 1px solid #bdbdbd;
	border-radius: 0.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bdbdbd' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 4px center;
}
@media screen and (min-width: 960px) {
.search-field-input { width: 100px; }
}
@media screen and (min-width: 1140px) {
.search-field-input { width: 200px; }
}
.search-field-input:focus {
	outline: 0;
	background-color: #fcfcbb;
	border-color: #bdbdbd;
	box-shadow: 0 0 0 0.2em rgba(0,0,0,0.2);
}
.search-field-icon		{ color: #bdbdbd; cursor: pointer; vertical-align: middle; padding: 5px; }
.search-field-icon :hover	{ color: #212529; }

.main-screen {
	#margin: 5px auto;
	margin: 5px;
	z-index: 1;
}

.main-section {
	padding: 1em;
	background: #ffffff;
	height: calc(100% - 20px);
}

.footer-screen {
	xbackground: linear-gradient(#626262, #424242);
	background: #000088;
}
.footer {
	padding: 0.5em 1em;
	color: #d6d3d3;
	font-size: small;
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.footer a {
	color: #d6d3d3;
	text-decoration: none;
	border-bottom: 1px dashed #d6d3d3;
}
.footer a:hover {
	color: #b10e21;
}

.ppolicy {
	text-align: right;
}

h1, h2, h3, h4, h5, h6 { padding: 0; font-weight: bold; }
h1	{ font-size: 1.3em; margin: 0.7em 0; }
h2	{ font-size: 1.2em; margin: 0.8em 0; }
h3	{ font-size: 1.1em; margin: 0.9em 0; }
h4	{ font-size: 1.0em; margin: 1em 0; }
h5	{ font-size: 1.0em; margin: 1em 0; }
h6	{ font-size: 1.0em; margin: 1em 0; }

p {
	margin: 1em 0 1em 0;
	padding: 0;
}

ul, ol	{ padding-left: 2em; }
li	{ }

hr	{
	background-color:#bcbcbc;
	border: none; 
	height: 1px;
}

blockquote {
	background: #efefef;
	border: 1px solid #dbdbdb;
	margin: 1em 0 1em 2em;
	padding: 1em;
}

img {
	display: block;
}

table	{ border: 0px; border-collapse: collapse; }
th, td	{ padding: 5px 10px; }
.table tr:hover	{ background: #f9f9f9; }
.table th	{ background: #ebebeb; }
.table th,
.table td	{ border: 1px solid #bcbcbc; }

a		{ color: #206bc4; text-decoration: none; }
a:hover		{ color: #ff0000; text-decoration: underline; }

.date		{ color: #666666; font-size: 0.8em; }

.card-clean {
	margin: 4px;
	padding: 0 1em;
	line-height: 1.5;
}

.card {
	border: 1px solid #c0c0c0;
	border-radius: 8px;
	box-shadow: 0 0 7px 0 rgb(0 0 0 / 10%);
	margin: 4px;
	padding: 0 1em;
	background: #ffffff;
	line-height: 1.5;
}

.marrow {
	background-position: right;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="8" width="8" viewBox="0 0 123.97 123.97" fill="currentColor"><path d="M51.802,96.062c2.801,2.801,6.5,4.2,10.2,4.2s7.4-1.399,10.2-4.2l47.3-47.3c5.5-5.5,6.101-14.6,0.8-20.3 c-5.6-6.1-15.1-6.3-20.899-0.5l-30.4,30.3c-3.899,3.9-10.2,3.9-14.1,0l-30.3-30.3c-5.801-5.8-15.301-5.7-20.9,0.5 c-5.3,5.7-4.8,14.8,0.8,20.3L51.802,96.062z"/></svg>');

}

.navbar {
	--bs-navbar-padding-y: 0;
	--bs-navbar-brand-padding-y: 0;
}
