@font-face {
    font-family: "Open Sans";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/OpenSans-Regular.eot");
    src: url("../fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/OpenSans-Regular.woff") format("woff"),
    url("../fonts/OpenSans-Regular.ttf") format("truetype"),
    url("../fonts/OpenSans-Regular.svg") format("svg");
}

@font-face {
    font-family: "Open Sans";
    font-weight: 600;
    font-style: normal;
    src: url("../fonts/OpenSans-Semibold.eot");
    src: url("../fonts/OpenSans-Semibold.eot?#iefix") format("embedded-opentype"),
    url("../fonts/OpenSans-Semibold.woff") format("woff"),
    url("../fonts/OpenSans-Semibold.ttf") format("truetype"),
    url("../fonts/OpenSans-Semibold.svg#Semibold") format("svg");
}

*::-moz-selection {background: #4285d2; color: #fff;}

html {overflow-y: scroll;}
body {margin: 0px; padding: 0px; background: #fbfbfb; color: #222; letter-spacing: 0; font-family: "Open Sans", Arial, sans-serif; font-size: 14px;}
input, textarea {font-family: "Open Sans", Arial, sans-serif; font-size: 14px;}
a {color: #267E54; text-decoration: none;}

.main-wrapper {width: 100%; min-width: 250px; margin: 0px auto;}
section.main-area {margin-top: 46px;}

/* Footer */
.main-footer {display: block; width: 100%; padding: 20px 20px; font-size: 14px; line-height: 18px; color: #999; text-align: center;}
.main-footer > a {color: #267E54;}
.main-footer > a:hover {text-decoration: underline;}

/* Header */
.main-header {background: #3c4252; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25); align-items: center; position: fixed; width: 100%; top: 0; z-index: 99;}
.main-header > .inner {display: flex; flex-flow: row nowrap; width: 1200px; margin: 0px auto; align-items: center;}
.main-header > .inner > .logo {display: block; flex: 0 0 auto; width: 170px; color: #fff; font-size: 24px; line-height: 24px; text-transform: uppercase; text-shadow: 1px 1px 1px #000;}

.main-header > .inner > .nav {display: flex; flex: 1 1 auto; align-items: center; font-size: 0px;}
.main-header > .inner > .nav > li {display: block; flex: 0 1 auto; position: relative; margin-left: 30px;}
.main-header > .inner > .nav > li:first-child {margin-left: 0px;}
.main-header > .inner > .nav > li > a,
.main-header > .inner > .nav > li > span {display: block; height: 46px; line-height: 46px; font-size: 14px; color: #fff;}
.main-header > .inner > .nav > li > span {cursor: default;}
.main-header > .inner > .nav > li > span:hover {opacity: 0.5;}
.main-header > .inner > .nav > li:hover > a {color: #f2f2f2;}

.main-header > .inner > .nav > li > .subitems {display: none; position: absolute; z-index: 9; left: -5px; top: 46px; width: 170px; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.35); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;}
.main-header > .inner > .nav > li > .subitems > li {display: block; flex: 0 1 auto; position: relative;}
.main-header > .inner > .nav > li > .subitems > li > a {display: block; padding: 10px 7px; font-size: 14px; line-height: 18px; color: #000;}
.main-header > .inner > .nav > li > .subitems > li:hover > a {color: #333;background: #dddddd5e;}
.main-header > .inner > .nav > li:hover > .subitems {display: block;}

.main-header > .inner > .user {display: block; position: relative; flex: 0 0 auto; cursor: pointer;}
.main-header > .inner > .user > img {display: block; position: absolute; left: 0px; top: 0px; width: 32px; height: 32px; border-radius: 16px; box-shadow: 0px 0px 1px 0px #333846;}
.main-header > .inner > .user > i {display: block; position: absolute; right: 5px; top: 0px; color: #fff; height: 32px; line-height: 32px;}
.main-header > .inner > .user > .name {display: block; height: 32px; padding: 0px 25px 0px 40px; line-height: 32px; font-size: 13px; color: #fff;}
.main-header > .inner > .user:hover > .name {color: #f2f2f2;}
.main-header > .inner > .user:hover > i {color: #f2f2f2;}

.main-header > .inner > .quick {display: flex; flex: 0 0 auto; width: 100px;}
.main-header > .inner > .quick > .cell {display: block; flex: 1 1 auto; width: 50%; height: 46px; line-height: 46px; text-align: center; border-left: 1px solid #333846; cursor: pointer;}
.main-header > .inner > .quick > .cell > i {font-size: 14px; color: #fff;}
.main-header > .inner > .quick > .cell.last {border-right: 1px solid #333846;}
.main-header > .inner > .quick > .cell:hover {background: #333846;}
.main-header > .inner > .quick > .cell:hover > i {color: #f2f2f2;}

/* Module */
.module-wrapper {width: 1200px; margin: 0px auto; padding: 30px 0px;}
.module-wrapper > .submenu {display: block; margin: 0px 0px 25px 0px;}
.module-wrapper > .submenu > li {display: inline-block; vertical-align: middle;}
.module-wrapper > .submenu > li a {display: block; padding: 5px 10px; line-height: 18px; font-size: 14px; border: 2px solid #2d8d5f; border-radius: 3px;}

.pcep-title {display: block; position: relative; margin: 0px 0px 25px 0px;}
.pcep-title > .title {display: block; font-size: 28px; line-height: 32px; color: #333;}
.pcep-title > .title > .info {display: inline-block; vertical-align: baseline; margin-left: 15px; font-size: 24px; line-height: 32px; color: #444;}
.pcep-title > .side {display: block; position: absolute; right: 0px; top: -1px; text-align: right; font-size: 0px;}
.pcep-title > .side > .label {display: inline-block; vertical-align: middle; font-size: 13px; line-height: 15px; color: #222;}

/* Tabs */
.pcep-tabs {display: block; margin: 0px 0px 25px 0px; font-size: 0px; border: 1px solid #ccc; background: #fff;}
.pcep-tabs > .tab {display: inline-block; position: relative; vertical-align: middle; padding: 10px 15px; border-right: 1px solid #ddd;}
.pcep-tabs > .tab > .icon {display: inline-block; vertical-align: middle; margin-right: 8px; font-size: 16px; line-height: 16px; color: #444;}
.pcep-tabs > .tab > .title {display: inline-block; vertical-align: middle; font-size: 14px; line-height: 16px; color: #222;}
.pcep-tabs > .tab > .notice {display: block; position: absolute; right: 3px; top: -7px; width: 16px; height: 16px; border: 2px solid #fe9514; border-radius: 8px; font-size: 12px; line-height: 12px; font-weight: bold; color: #fe9514; text-align: center; background: #fff;}
.pcep-tabs > .tab > .ok {display: block; position: absolute; right: 3px; top: -5px; width: 16px; height: 16px; text-align: center;}
.pcep-tabs > .tab > .ok > i {font-size: 16px; line-height: 16px; color: #2d8d5f;}
.pcep-tabs > .tab:hover {}
.pcep-tabs > .tab.active {background: #fbfbfb;}
.pcep-tabs > .tab.active > .icon {color: #267E54;}
.pcep-tabs > .tab.active > .title {color: #267E54;}

/* Panel */
.pcep-panel {display: block; background: #fff; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);}
.pcep-panel > .header {display: block; position: relative; min-height: 45px; border-bottom: 1px solid #eee; font-size: 0px;}
.pcep-panel > .header > .title {display: block; padding: 12px 15px; line-height: 20px; color: #222; font-size: 14px; font-weight: bold;}
.pcep-panel > .header > .side {display: block; position: absolute; right: 0px; top: 5px; padding-right: 10px; text-align: right; font-size: 0px;}
.pcep-panel > .header > .side > .label {display: inline-block; vertical-align: middle; font-size: 13px; line-height: 15px; color: #222;}
.pcep-panel > .content {padding: 15px 20px;}


.pcep-action-bar {display: flex; flex: 1 1 auto; align-items: center;}
.pcep-action-bar.center {justify-content: flex-start;}
.pcep-action-bar.right {justify-content: flex-end;}

.pcep-action-bar > .cell {display: block; flex: 0 0 auto;}
.pcep-action-bar > .cell:last-child {padding-right: 0px;}
.pcep-action-bar > .cell > .inline-btn {margin: 0px 0px;}

/* Confirmation */
.pcep-confirm {width: 300px;}
.pcep-confirm > .text {display: block; text-align: center; margin: 0px 0px 25px 0px; font-size: 15px; line-height: 18px;}
.pcep-confirm > .actions {text-align: center;}
.pcep-confirm > .actions > .inline-btn {width: 70px; text-align: center;}

.pcep-warning {margin: 0px 0px 25px 0px; padding: 15px 20px; background: #fbf6dc; color: #c09853; font-size: 14px; line-height: 20px; border-radius: 3px; border: 1px solid #eee097; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.10);}

@media all and  (max-width: 1200px) {
    .main-header {padding: 0px 20px;}
    .main-header > .inner {width: 100%;}
}
@media all and  (max-width: 800px) {
}

@media all and  (max-width: 500px) {
    .main-footer {font-size: 13px; line-height: 17px; padding-left: 30px; padding-right: 30px;}
}