body {font-size:10pt;font-family:'malgun gothic','Helvetica',sans-serif;padding:0;margin:0;}

a,
a:hover,
a:visited {text-decoration:none;color:#6e5ca4;}

input[readonly],
textarea[readonly],
select[readonly] {background:#f4f4f4;color:#666;}

.shadow,
.hover-shadow:hover {box-shadow:#c0c0c0 1px 2px 4px;}

.nav-pin {width:48px;float:left;position:relative;}
.nav-pin a {display:block;height:48px;line-height:44px;text-align:center;}

.top-nav {height:48px;background:#333;color:#ccc;position:fixed;left:0;width:100%;top:0;z-index:10;}
.top-nav .nav-pin a {background:#000;color:#fff;}
.top-nav .expand {display:none;}
.top-nav .nav-path {float:left;}
.top-nav .nav-path a {display:block;float:left;text-align:center;line-height:48px;position:relative;font-size:1.2em;color:#ccc;padding:0 1em;}
.top-nav .nav-path a:first-child {min-width:172px;padding:0;}
.top-nav .nav-path a:hover {color:#fff;}
.top-nav .nav-path a:before {content:'>';position:absolute;top:0;left:-10px;display:block;width:20px;text-align:center;color:#888;}
.top-nav .nav-path a:first-child:before {display:none;}
.top-nav .nav-util {float:right;padding:9px 20px 0 0;}
.top-nav .nav-util a {color:#fff;line-height:30px;margin-left:1em;}
.nav-toggle {display:none;color:#eee;float:right;width:40px;height:40px;padding:0;margin-top:4px;line-height:40px;text-align:center;background:#555;border-radius:20px;font-size:20px;}

.left-nav {position:fixed;left:0;top:0;height:100%;padding-top:48px;z-index:9;background:#fff;}
.left-nav .nav-pin {background:#f1f1f1;height:100%;}
.left-nav .nav-pin a {color:#888;}
.left-nav .nav-pin a.active {background:#fff;}
.left-nav .nav-pin a:hover,
.left-nav .nav-pin a.active {color:#000;}
.left-nav .nav-sub ul {display:none;padding:0 16px 16px 16px;margin:0 0 0 48px;list-style:none;}
.left-nav .nav-sub ul li strong {display:block;padding:0 5px;line-height:47px;border-bottom:solid 1px #eee;font-size:1.1em;margin-bottom:24px;}
.left-nav .nav-sub ul li a {display:block;padding:5px;color:#444;}
.left-nav .nav-sub ul li a:hover {font-weight:bold;}
.left-nav .nav-sub ul li a.current {color:#161f9d;font-weight:bold;}
.left-nav .nav-sub ul li hr.line {clear:none;}
.left-nav .nav-sub ul.active {display:block;}

.nav-collapse .top-nav .collapse {display:none;}
.nav-collapse .top-nav .expand {display:block;}
.nav-collapse .left-nav {width:48px;box-shadow:none;}
.nav-collapse .left-nav .nav-sub {display:none;}
.left-nav,
.nav-collapse .left-nav:hover {width:220px;box-shadow:#ccc 1px 2px 4px;}
.nav-collapse .left-nav:hover .nav-sub {display:block;}

.bottom-nav {clear:both;}
.bottom-nav .footer {padding:3em 20px;background:#ddd;}
.bottom-nav a {color:#888;}
.bottom-nav a:hover {color:#000;}

body {padding:48px 0 0 220px;background-color:#ddd;}
body.nav-collapse {padding:48px 0 0 48px;}

.page-head,
.page-main {background-color:#fff;}

.page-head {height:48px;padding:0 20px 0 240px;border-bottom:solid 1px #eee;position:fixed;left:0;top:48px;width:100%;z-index:2;background-color:#fff;}
.page-head h1 {float:left;font-size:1.2em;padding:0;margin:0;line-height:48px;}
.page-head .btns {float:right;margin-top:0.7em;}
.page-main {padding:68px 20px 50px 20px;min-height:400px;}
.page-main .heading {margin:0;padding:0;line-height:2.5;}
.page-main h2 {font-size:1.2em;}
.page-main h3 {font-size:1.1em;}
.nav-collapse .page-head {padding-left:68px;}

.page-main a:hover {text-decoration:underline;}

hr.line {height:1px;overflow:hidden;background:#eee;padding:0;line-height:1px;border:none;clear:both;}

table.tbl {width:100%;border-collapse:collapse;border-spacing:0;}
table.tbl caption {text-align:center;}
table.tbl thead th,
table.tbl thead td {border-bottom:solid 1px #888;}
table.tbl thead tr:last-child th,
table.tbl thead tr:last-child td {border-bottom-color:#000;}
table.tbl thead th {padding:0.5em 0;text-align:center;}
table.tbl tbody td {padding:0.5em;}
table.tbl.fixed {table-layout:fixed;}
table.tbl.border th,
table.tbl.border td {border:solid 1px #ccc;}
table.tbl.stripe tbody tr:nth-child(2n) {background:#f6f6f6;}
table.tbl.hover tbody tr:hover {background:#def;}
table.tbl.prime thead th {background:#7867a7;color:#fff;border-color:#6e5ca4 !important;}
table.tbl.second thead th {background:#85ce36;color:#fff;border-color:#7dba3c !important;}
table.tbl.danger thead th {background:#dc3545;color:#fff;border-color:#bc2836 !important;}
table.tbl.dark thead th {background:#333;color:#fff;border-color:#000 !important;}
table.tbl tbody tr.prime {background:#ddf !important;}
table.tbl tbody tr.danger {background:#fdd !important;}
table.tbl tbody tr.second {background:#dfd !important;}

.formbox {padding:0 0 0 0;border:solid 1px #eee;}
.formbox.shadow {border-width:0;padding-top:1px;}
.formbox .flow-items > * {padding:1em;}
.formbox .flow-items input,
.formbox .flow-items textarea,
.formbox .flow-items select {max-width:100%;}
.formbox > hr.line {margin-left:1em;margin-right:1em;}
.formbox > hr.line.m0 {margin-top:0;margin-bottom:0;}
.formbox.bg {padding-bottom:0;}
.formbox.bg .flow-items {margin-top:0;border-bottom:solid 1px #eee;}
.formbox.bg .flow-items:last-child {border-bottom-width:0px;}
.formbox.bg .flow-items > label {background-color:#f6f6f6;}
.formbox.bg.arrow .flow-items > label {position:relative;}
.formbox.bg.arrow .flow-items > label:before {content:'\25b6';position:absolute;font-size:20px;right:-12px;line-height:1em;color:#f6f6f6;top:50%;transform:translateY(-50%);}
.formbox .required:after {content:'*';color:#f00;font-weight:bold;}
.formbox:not(.bg) .flow-items > label {position:relative;}
.formbox:not(.bg) .flow-items > label:after {content:'';display:block;width:1px;position:absolute;top:1em;bottom:1em;right:0;background:#eee;}

.formbox .controls {display:table;border-spacing:0;border-collapse:collapse;height:2.2em;}
.formbox .controls > * {display:table-cell;vertical-align:middle;white-space:nowrap;margin-right:0.2em;}
.formbox .controls > *:last-child {margin-right:0;}
.formbox .controls > input {display:block;float:left;width:auto;}

.help {color:#333;font-size:9pt;}
.help.prime {color:#7867a7;}
.help.second {color:#85ce36;}
.help.danger {color:#dc3545;}
span.help {display:inline-block;white-space:nowrap;line-height:1.8;}
div.help {display:block;line-height:1.8;}
div.help.prime {border:dotted 1px #7867a7;padding:0.5em;}
div.help.second {border:dotted 1px #85ce36;padding:0.5em;}
div.help.danger {border:dotted 1px #dc3545;padding:0.5em;}
div.help.dark {border:dotted 1px #333;padding:0.5em;}

/* desktop, under 1200px */
@media (max-width: 1199.98px) {
    .top-nav .nav-pin {display:none;}
    .left-nav {width:48px;box-shadow:none;}
    .left-nav .nav-sub {display:none;}
    .left-nav:hover {width:220px;box-shadow:#ccc 1px 2px 4px;}
    .left-nav:hover .nav-sub {display:block;}
    body {padding:48px 0 0 48px;}
    .page-head {padding-left:68px;}

    .formbox .flow-items > * {padding:0.5em;}
	.formbox.bg.arrow .flow-items > label:before {right:-8px;}
    .formbox > hr.line {margin-left:0.5em;margin-right:0.5em;}
}

/* tablet, under 992px */
@media (max-width: 991.98px) {
    span.help {white-space:normal;}
}

/* phone, landscape, under 768px */
@media (max-width: 767.98px) {
    .top-nav .nav-path a {font-size:1em;letter-spacing:-1px;}
    .top-nav .nav-path a:first-child {min-width:1px;padding-left:1em;padding-right:1em;font-size:1.1em;display:block !important;}
    .top-nav .nav-path a:last-child {display:none;}
    .page-head {position:absolute;}

    .flow-items {display:block;}
    .flow-items.inline {display:block;}
    .flow-items > * {display:block;}
    .flow-items > *.flow-full {display:block;}
    .flow-items.check > * {display:inline;}
    .flow-items.check > label:first-child {display:block;}

    .formbox.bg .flow-items > label {width:100%;}
	.formbox.bg.arrow .flow-items > label:before {content:'';}
    .formbox:not(.bg) .flow-items > label {padding-bottom:0;}
    .formbox:not(.bg) .flow-items > label:after {display:none;}
}

@media screen and (max-width: 767.98px) {
	.tablebox table.tbl {width:auto;min-width:100%;}
	.tablebox {padding-bottom:25px;overflow-x:auto;}
    .tablebox table th,
    .tablebox table td {white-space:nowrap;padding-left:0.5em !important;padding-right:0.5em !important;}
}

/* phone, under 578px */
@media (max-width: 575.98px) {
    body {padding:20px 0 0 0;}
    body.nav-collapse {padding-left:0;}
    body.nav-on {overflow:hidden;}
    .top-nav {padding-left:10px;padding-right:10px;overflow:hidden;}
    .top-nav .nav-pin {display:none;}
    .top-nav .nav-path a:first-child {padding-left:0;}
    .top-nav .nav-util {display:none;}
    .nav-toggle {display:block;transition:all 0.3s;}
    .nav-on .nav-toggle {transform:rotateZ(360deg);background:#eee;color:#666;}
    .nav-collapse .left-nav,
    .left-nav,
    .left-nav:hover {width:100%;box-shadow:none;position:fixed;display:none;overflow-y:auto;}
    body.nav-on .left-nav {display:block;}
    .left-nav .nav-pin {width:100%;height:auto;text-align:center;font-size:0;}
    .left-nav .nav-pin a {display:inline-block;width:48px;font-size:10pt;}
    .left-nav .nav-sub {background-color:#fff;display:block !important;}
    .left-nav .nav-sub ul {margin-left:0;}
    .left-nav .nav-sub ul * {text-align:center;}
    .page-main {padding:100px 10px 50px 10px;}
    .page-head,
    .nav-collapse .page-head {top:48px;padding:0 10px;position:absolute;}
    .nav-collapse .left-nav:hover {width:100%;}

    .formbox .flow-items:not(.inline) input,
    .formbox .flow-items:not(.inline) textarea,
    .formbox .flow-items:not(.inline) select {width:100%;}
    .formbox .check input,
	.formbox .check select {width:auto !important;}

	.formbox .controls {width:100%;}
	.formbox .controls > * {width:1%;}
	.formbox .controls > input {width:100%;}
}