.mail a {
	padding: 0;
}

.mail .flex {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}
.mail .flex .logo_wodr {
	margin-right: 1rem;
}

.mail .mail-logo,
.mail .mail-content {
	padding-bottom: 1rem;
}

.mail .mail-footer {
	border-top: 1px solid #ccc;
	margin-top: 2rem;
	padding: 2rem 0 1rem 0;
}

.mail .msg {
	border-top: 1px solid #ccc;
	margin: .5rem 0;
	padding: .5rem 0;
}

.red {
	color: var(--red);
}

.blue {
	color: var(--menu-links-hover);
}

.green {
	color: var(--green);
}

.black {
	color: var(--black);
}

.checked .red {
	color: #c99;
}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.top {
	vertical-align: baseline;
}

.page-header {
	text-align: center;
	margin-bottom: 1rem;
}

.page-header h1 {
	margin-bottom: .25rem;
}

.page-header h2 {
	font-size: 0.75rem;
	margin-bottom: .75rem;
}

.page-header p {
	margin-top: .75rem;
}

.left {
	text-align: left;
}

img.fgi {
	border: 1px solid #666;
	border-radius: 5px;
	width: 60%;
}

body>header .main-menu {
	background-color: #000;
	color: #fff;
	line-height: 4rem;
}

body>header .sub-menu {
	background-color: #666;
	color: #fff;
	font-size: 14px;
	line-height: 2.25rem;
	text-align: right;
}

body>header a {
	color: #fff;
}

body>main {
	padding: 1.25rem 0 4rem;
}

body>footer {
	height: 4rem;
}

h1 {
	font: 1.8rem/1em sans-serif;
	margin: 0 0 .75em;
}

h2 {
	font: 1.4rem/1em sans-serif;
	margin: 0 0 .75em;
}

.copyrights {
	font: 12px/16px sans-serif;
	text-align: center;
}

small {
	font-size: 11px;
	opacity: .5;
}

.small {
	font-size: 13px;
	line-height: 20px;
}

a {
	color: var(--black);
	text-decoration: none;
	transition: .25s;
}

a:hover {
	text-decoration: underline;
}

main a {
	color: var(--blue);
}

main a:hover {
	color: var(--light-blue);
	text-decoration: none;
}

a.del {
	color: var(--red);
}

a.add,a.info,a.edit {
	color: var(--blue);
}

a.add,a.info,a.del,a.edit {
	margin: 0 .2rem;
	text-decoration: none;
}

a.add:hover,a.info:hover,a.edit:hover {
	color: var(--light-blue);
}

a.del:hover {
	color: var(--dark-red);
}

select {
	border: 1px solid var(--dark-gray);
	border-radius: 3px;
	background-color: #fff;
	font-size: 14px;
	line-height: 24px;
	padding: 4px 8px;
	margin: 8px;
}

input,
textarea {
	border: 1px solid var(--dark-gray);
	border-radius: 3px;
	background-color: var(--white);
	font-size: 14px;
	line-height: 24px;
	margin: 8px;
	padding: .25rem .75rem;
}

.full,
textarea {
	width: 100%;
}

textarea {
	color: #111;
	font-family: sans-serif;
	padding: .75rem 1rem;
}

input.readonly {
	border: 1px dotted var(--gray);
}

input[type="submit"] {
	padding: 6px 16px;
	margin: 0;
}

input[type="submit"]:hover {
	background-color: #e0e0e0;
}

input[type="password"] {
	background-color: #fff;
	color: #ccc;
}

input[type="submit"].red,input[type="submit"].cancel {
	color: #fff;
	background-color: #D92626;
	border: none;
}

input[type="submit"].red:hover,input[type="submit"].cancel:hover {
	background-color: #AE1F1F;
}

input[type="submit"].blue,input[type="submit"].close,input[type="submit"].save {
	color: #fff;
	background-color: #267BD9;
	border: none;
}

input[type="submit"].blue:hover,input[type="submit"].close:hover,input[type="submit"].save:hover {
	background-color: #1F62AE;
}

.checked,.checked a {
	color: #999;
}

.flex {
	display: flex;
}

.flex.tables {
    flex-wrap: wrap;
    justify-content: space-around;
}

main ul.list {
	margin: 0.25rem 0;
}

main ul.list>li {
	font-weight: normal;
	margin-bottom: 0.25rem;
}

main ol>li,main ul>li {
	margin-bottom: .75rem;
}

main ul {
	list-style-type: square;
	margin: 0 0 1rem;
}

main ol ul>li,main ul ul>li {
	color: #333;
	font-weight: normal;
	margin-bottom: 0;
}

div.search {
	display: flex;
	align-items: center;
	justify-content: center;
}

div.unit {
	align-items: center;
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-gap: 48px;
	margin: .5rem 0 .75rem;
	text-align: left;
}

div.unit label {
	font-weight: bold;
}

div.unit label,
div.unit textarea {
	display: inline-block;
	text-align: left;
}

div.unit textarea {
	height: 10vw;
	margin: 8px;
	padding: .5rem .75rem;
}

div.msg {
	border-radius: 3px;
	display: inline-block;
	margin-bottom: 1rem;
	padding: 1rem 2rem;
	text-align: center;
}

div.msg.red {
	background-color: #FFF0F0;
	border: 1px solid #FFC0C0;
	color: #FF3535;
}

div.msg.blue {
	background-color: #E8F7FF;
	border: 1px solid #C0D7FF;
	color: #007BB8;
}

div.canvas {
	background-color: #f6f6f6;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	margin: 0 auto;
	padding: 2rem 2rem 3rem;
	width: 960px;
}

div.grid1 {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 2rem;
}

div.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 2rem;
}

div.grid3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 2rem;
}

.grid131 {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	grid-gap: 2rem;
}

.grid14 {
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-gap: 2rem;
}

.grid141 {
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	grid-gap: 2rem;
}

.grid151 {
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	grid-gap: 2rem;
}

.grid161 {
	display: grid;
	grid-template-columns: 1fr 6fr 1fr;
	grid-gap: 2rem;
}

.menu {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	list-style-type: none;
	margin: 0;
}

.menu li {
	margin-left: 1.5rem;
}

.inline {
	align-items: center;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	list-style-type: none;
	margin: 0 0 2rem;
	padding: 0;
}

.inline li {
	margin-left: 1.5rem;
}

.info table {
	border: 1px #d3d3d3 solid;
	border-collapse: collapse;
	font: 14px/16px sans-serif;
	margin: 2em auto 3em auto;
	width: 100%;
}

.info table caption {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: .5rem;
	text-align: left;
}

.info table th {
	background: #e9e9e9;
	border-bottom: 1px #f3f3f3 solid;
	padding: .75em .75em;
	font-weight: 700;
	text-align: left;
	width: 35%;
}

.info table td {
	background: #fff;
	border-bottom: 1px #f3f3f3 solid;
	padding: .75em .75em;
	text-align: left;
	width: 65%;
}

.info table tr:last-child th,.info table tr:last-child td {
	border-bottom: none
}

.buttons {
	margin-bottom: 1rem;
}

.result h1 {
	margin: 0 0 .25rem;
}

.preview {
	background-color: #fff;
	border: 1px #d3d3d3 solid;
	border-radius: 6px;
	margin: .5em auto 3em auto;
	padding: 2rem;	
}

.preview ul {
	color: #444;
}

.preview div:nth-child(1){
	font-weight: bold;
	margin-bottom: 1rem;
}

.result table {
	border: 1px #d3d3d3 solid;
	border-collapse: collapse;
	font: 14px/16px sans-serif;
	margin: .5em auto 3em auto;
	width: 100%;
}

.result table th {
	background: #e9e9e9;
	font-weight: 700;
}

.result table th,.result table td {
	border-bottom: 1px #f3f3f3 solid;
	padding: .75em .75em;
}

.result table td.left {
	text-align: left;
}

.result table th:not:first-child,.result table td:not:first-child {
	border-left: 1px #f3f3f3 solid
}

.result table tr:last-child td {
	border-bottom: none
}

.result table th,.result table td,.result table th:not:first-child,.result table td:not:first-child
	{
	border-color: #ddd
}

.result table tbody tr:nth-child(odd) {
	background-color: #fff
}

.result table tbody tr:nth-child(even) {
	background-color: #f9f9f9
}

.result table tr:hover td {
	background: #f1f1f1;
}

.info table .nowrap,.result table .nowrap {
	white-space: nowrap
}

.input table {
	margin: 0 auto;
}

.input table th {
	text-align: left;
}

.confidential {
	display: none;
}

fieldset {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	margin: 1rem 0;
	padding: 16px 24px;
}

legend {
	font-size: 18px;
	font-weight: bold;
	padding: 4px 8px
}

label {
	display: inline-block;
}

label.w250 {
	min-width: 250px;
}

input.field {
	display: inline-block;
	width: 60%;
}

table input {
	width: 96%;
}

textarea[readonly],
input[readonly] {
	background-color: #f6f6f6;
	color: #555;
}

textarea {
    border: 1px solid #ddd;
    display: inline-block;
    height: 300px;
    margin: 0.25em 0;
    padding: 4px 2px;
    width: 100%
}

textarea.small {
    height: 200px;
}

div.wrapper.login {
	margin: 0 auto;
	width: 350px;
}

@media only screen and (max-width: 1279px) {
	div.wrapper {
		width: 90vw;
	}
}