@charset "UTF-8";
.icoSpec24, .icoSpec20, .icoSpec16, .icoSpec12 {
  -webkit-mask-image: url("../images/icoSpec.svg?WBK25120901");
          mask-image: url("../images/icoSpec.svg?WBK25120901");
}

.icoSpecCt {
  -webkit-mask-image: url("../images/icoSpecCt.svg?WBK25120901");
          mask-image: url("../images/icoSpecCt.svg?WBK25120901");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background-color: #fff;
}

.icoSpecTool20, .icoSpecTool16, .icoSpecTool12 {
  -webkit-mask-image: url("../images/icoSpecTool.svg?WBK25120901");
          mask-image: url("../images/icoSpecTool.svg?WBK25120901");
}

.icoSpec24.otpKakao, .icoSpec24.otpMail, .icoSpec16.user, .icoSpec16.unit, .icoSpec16.pgm, .icoSpec16.calendar {
  -webkit-mask-image: unset;
          mask-image: unset;
  -webkit-mask-position: unset;
          mask-position: unset;
  background-color: unset;
  background-repeat: no-repeat;
}

.icoSpec12 {
  display: flex;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-color: #fff;
  background-position-y: 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.icoSpec12.addItem {
  -webkit-mask-position: 0px 0;
          mask-position: 0px 0;
}
.icoSpec12.minus {
  -webkit-mask-position: -12px 0;
          mask-position: -12px 0;
}
.icoSpec12.confirm {
  -webkit-mask-position: -24px 0;
          mask-position: -24px 0;
}
.icoSpec12.selectArrow {
  -webkit-mask-position: -36px 0;
          mask-position: -36px 0;
}
.icoSpec12.close {
  -webkit-mask-position: -48px 0;
          mask-position: -48px 0;
}
.icoSpec12.pgm {
  -webkit-mask-position: -60px 0;
          mask-position: -60px 0;
}
.icoSpec12.confirm {
  background-color: #3D4857;
}

.icoSpec16 {
  display: flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: #fff;
  background-position-y: -22px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.icoSpec16.quickAdd {
  -webkit-mask-position: 0px -22px;
          mask-position: 0px -22px;
}
.icoSpec16.delete {
  -webkit-mask-position: -16px -22px;
          mask-position: -16px -22px;
}
.icoSpec16.close {
  -webkit-mask-position: -32px -22px;
          mask-position: -32px -22px;
}
.icoSpec16.calendar {
  -webkit-mask-position: -48px -22px;
          mask-position: -48px -22px;
}
.icoSpec16.pgm {
  -webkit-mask-position: -64px -22px;
          mask-position: -64px -22px;
}
.icoSpec16.unit {
  -webkit-mask-position: -80px -22px;
          mask-position: -80px -22px;
}
.icoSpec16.user {
  -webkit-mask-position: -96px -22px;
          mask-position: -96px -22px;
}
.icoSpec16.info {
  -webkit-mask-position: -112px -22px;
          mask-position: -112px -22px;
}
.icoSpec16.edit {
  -webkit-mask-position: -128px -22px;
          mask-position: -128px -22px;
}
.icoSpec16.cellMerge {
  -webkit-mask-position: -144px -22px;
          mask-position: -144px -22px;
}
.icoSpec16.remove {
  -webkit-mask-position: -160px -22px;
          mask-position: -160px -22px;
}
.icoSpec16.refresh16 {
  -webkit-mask-position: -176px -22px;
          mask-position: -176px -22px;
}
.icoSpec16.reset16 {
  -webkit-mask-position: -192px -22px;
          mask-position: -192px -22px;
}
.icoSpec16.calendar {
  background-image: url("../images/icoSpec.svg");
  background-position: -48px -22px;
}
.icoSpec16.pgm {
  background-image: url("../images/icoSpec.svg");
  background-position: -64px -22px;
}
.icoSpec16.unit {
  background-image: url("../images/icoSpec.svg");
  background-position: -80px -22px;
}
.icoSpec16.user {
  background-image: url("../images/icoSpec.svg");
  background-position: -96px -22px;
}

.icoSpec20 {
  display: flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: #fff;
  background-position-y: -48px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.icoSpec20.arrowFrom {
  -webkit-mask-position: 0px -48px;
          mask-position: 0px -48px;
}
.icoSpec20.cancel {
  -webkit-mask-position: -20px -48px;
          mask-position: -20px -48px;
}
.icoSpec20.chart {
  -webkit-mask-position: -40px -48px;
          mask-position: -40px -48px;
}
.icoSpec20.text {
  -webkit-mask-position: -60px -48px;
          mask-position: -60px -48px;
}
.icoSpec20.emphasis {
  -webkit-mask-position: -80px -48px;
          mask-position: -80px -48px;
}
.icoSpec20.attatch {
  -webkit-mask-position: -100px -48px;
          mask-position: -100px -48px;
}
.icoSpec20.lock {
  -webkit-mask-position: -120px -48px;
          mask-position: -120px -48px;
}
.icoSpec20.history {
  -webkit-mask-position: -140px -48px;
          mask-position: -140px -48px;
}
.icoSpec20.notes {
  -webkit-mask-position: -160px -48px;
          mask-position: -160px -48px;
}
.icoSpec20.pgmInfo {
  -webkit-mask-position: -180px -48px;
          mask-position: -180px -48px;
}
.icoSpec20.pgmLayout {
  -webkit-mask-position: -200px -48px;
          mask-position: -200px -48px;
}
.icoSpec20.pgmSummary {
  -webkit-mask-position: -220px -48px;
          mask-position: -220px -48px;
}
.icoSpec20.tableInfo {
  -webkit-mask-position: -240px -48px;
          mask-position: -240px -48px;
}
.icoSpec20.multiset {
  -webkit-mask-position: -260px -48px;
          mask-position: -260px -48px;
}
.icoSpec20.expand {
  -webkit-mask-position: -280px -48px;
          mask-position: -280px -48px;
}
.icoSpec20.edit {
  -webkit-mask-position: -300px -48px;
          mask-position: -300px -48px;
}
.icoSpec20.share {
  -webkit-mask-position: -320px -48px;
          mask-position: -320px -48px;
}
.icoSpec20.print {
  -webkit-mask-position: -340px -48px;
          mask-position: -340px -48px;
}
.icoSpec20.search {
  -webkit-mask-position: -360px -48px;
          mask-position: -360px -48px;
}
.icoSpec20.undo {
  -webkit-mask-position: -380px -48px;
          mask-position: -380px -48px;
}
.icoSpec20.redo {
  -webkit-mask-position: -400px -48px;
          mask-position: -400px -48px;
}
.icoSpec20.lang {
  -webkit-mask-position: -420px -48px;
          mask-position: -420px -48px;
}
.icoSpec20.reflesh {
  -webkit-mask-position: -440px -48px;
          mask-position: -440px -48px;
}
.icoSpec20.load {
  -webkit-mask-position: -460px -48px;
          mask-position: -460px -48px;
}
.icoSpec20.register {
  -webkit-mask-position: -480px -48px;
          mask-position: -480px -48px;
}
.icoSpec20.delete {
  -webkit-mask-position: -500px -48px;
          mask-position: -500px -48px;
}
.icoSpec20.checkout {
  -webkit-mask-position: -520px -48px;
          mask-position: -520px -48px;
}
.icoSpec20.expand {
  transform: rotate(180deg);
}
.icoSpec20.expand.collapse {
  transform: rotate(0deg);
}

.icoSpec24 {
  display: flex;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-color: #fff;
  background-position-y: -78px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.icoSpec24.browse {
  -webkit-mask-position: 0px -78px;
          mask-position: 0px -78px;
}
.icoSpec24.checkin {
  -webkit-mask-position: -24px -78px;
          mask-position: -24px -78px;
}
.icoSpec24.checkout {
  -webkit-mask-position: -48px -78px;
          mask-position: -48px -78px;
}
.icoSpec24.create {
  -webkit-mask-position: -72px -78px;
          mask-position: -72px -78px;
}
.icoSpec24.button {
  -webkit-mask-position: -96px -78px;
          mask-position: -96px -78px;
}
.icoSpec24.check {
  -webkit-mask-position: -120px -78px;
          mask-position: -120px -78px;
}
.icoSpec24.combo {
  -webkit-mask-position: -144px -78px;
          mask-position: -144px -78px;
}
.icoSpec24.date {
  -webkit-mask-position: -168px -78px;
          mask-position: -168px -78px;
}
.icoSpec24.label {
  -webkit-mask-position: -192px -78px;
          mask-position: -192px -78px;
}
.icoSpec24.more {
  -webkit-mask-position: -216px -78px;
          mask-position: -216px -78px;
}
.icoSpec24.sheet {
  -webkit-mask-position: -240px -78px;
          mask-position: -240px -78px;
}
.icoSpec24.tree {
  -webkit-mask-position: -264px -78px;
          mask-position: -264px -78px;
}
.icoSpec24.logoSymbol {
  -webkit-mask-position: -288px -78px;
          mask-position: -288px -78px;
}
.icoSpec24.svcInfo {
  -webkit-mask-position: -312px -78px;
          mask-position: -312px -78px;
}
.icoSpec24.new {
  -webkit-mask-position: -336px -78px;
          mask-position: -336px -78px;
}
.icoSpec24.publish {
  -webkit-mask-position: -360px -78px;
          mask-position: -360px -78px;
}
.icoSpec24.reset {
  -webkit-mask-position: -384px -78px;
          mask-position: -384px -78px;
}
.icoSpec24.save {
  -webkit-mask-position: -408px -78px;
          mask-position: -408px -78px;
}
.icoSpec24.popup {
  -webkit-mask-position: -432px -78px;
          mask-position: -432px -78px;
}
.icoSpec24.apply {
  -webkit-mask-position: -456px -78px;
          mask-position: -456px -78px;
}
.icoSpec24.lang {
  -webkit-mask-position: -480px -78px;
          mask-position: -480px -78px;
}
.icoSpec24.otpMail {
  -webkit-mask-position: -504px -78px;
          mask-position: -504px -78px;
}
.icoSpec24.otpKakao {
  -webkit-mask-position: -528px -78px;
          mask-position: -528px -78px;
}
.icoSpec24.icocheck {
  -webkit-mask-position: -552px -78px;
          mask-position: -552px -78px;
}
.icoSpec24.otpMail {
  background-image: url("../images/icoSpec.svg");
  background-position: -504px -78px;
}
.icoSpec24.otpKakao {
  background-image: url("../images/icoSpec.svg");
  background-position: -528px -78px;
}

.icoSpecCt {
  display: flex;
  flex-shrink: 0;
}
.icoSpecCt.logoIo {
  width: 43px;
  height: 17px;
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}
.icoSpecCt.logoSpec {
  width: 43px;
  height: 17px;
  -webkit-mask-position: -53px 0;
          mask-position: -53px 0;
}
.icoSpecCt.editAddSec {
  width: 34px;
  height: 17px;
  -webkit-mask-position: -106px 0;
          mask-position: -106px 0;
}
.icoSpecCt.editExpander {
  width: 40px;
  height: 32px;
  -webkit-mask-position: -150px 0;
          mask-position: -150px 0;
}
.icoSpecCt.editExpanderH {
  width: 40px;
  height: 32px;
  -webkit-mask-position: -200px 0;
          mask-position: -200px 0;
}
.icoSpecCt.editMergeSec {
  width: 34px;
  height: 25px;
  -webkit-mask-position: -250px 0;
          mask-position: -250px 0;
}
.icoSpecCt.editSplitter {
  width: 50px;
  height: 16px;
  -webkit-mask-position: -294px 0;
          mask-position: -294px 0;
}
.icoSpecCt.editSplitterV {
  width: 16px;
  height: 28px;
  -webkit-mask-position: -354px 0;
          mask-position: -354px 0;
}

.icoSpecTool12 {
  display: flex;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background-color: #fff;
  background-position-y: 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.icoSpecTool12.toolbar {
  -webkit-mask-position: 0px 0;
          mask-position: 0px 0;
}
.icoSpecTool12.canvas {
  -webkit-mask-position: -12px 0;
          mask-position: -12px 0;
}
.icoSpecTool12.groupbox {
  -webkit-mask-position: -24px 0;
          mask-position: -24px 0;
}
.icoSpecTool12.grid {
  -webkit-mask-position: -36px 0;
          mask-position: -36px 0;
}
.icoSpecTool12.combo {
  -webkit-mask-position: -48px 0;
          mask-position: -48px 0;
}
.icoSpecTool12.date {
  -webkit-mask-position: -60px 0;
          mask-position: -60px 0;
}
.icoSpecTool12.text {
  -webkit-mask-position: -72px 0;
          mask-position: -72px 0;
}
.icoSpecTool12.codehelp {
  -webkit-mask-position: -84px 0;
          mask-position: -84px 0;
}
.icoSpecTool12.float {
  -webkit-mask-position: -96px 0;
          mask-position: -96px 0;
}
.icoSpecTool12.check {
  -webkit-mask-position: -108px 0;
          mask-position: -108px 0;
}
.icoSpecTool12.button {
  -webkit-mask-position: -120px 0;
          mask-position: -120px 0;
}
.icoSpecTool12.sheet {
  -webkit-mask-position: -132px 0;
          mask-position: -132px 0;
}
.icoSpecTool12.label {
  -webkit-mask-position: -144px 0;
          mask-position: -144px 0;
}
.icoSpecTool12.chart {
  -webkit-mask-position: -156px 0;
          mask-position: -156px 0;
}
.icoSpecTool12.tree {
  -webkit-mask-position: -168px 0;
          mask-position: -168px 0;
}
.icoSpecTool12.multitext {
  -webkit-mask-position: -180px 0;
          mask-position: -180px 0;
}
.icoSpecTool12.pw {
  -webkit-mask-position: -192px 0;
          mask-position: -192px 0;
}
.icoSpecTool12.mask {
  -webkit-mask-position: -204px 0;
          mask-position: -204px 0;
}
.icoSpecTool12.radio {
  -webkit-mask-position: -216px 0;
          mask-position: -216px 0;
}
.icoSpecTool12.file {
  -webkit-mask-position: -228px 0;
          mask-position: -228px 0;
}
.icoSpecTool12.editor {
  -webkit-mask-position: -240px 0;
          mask-position: -240px 0;
}
.icoSpecTool12.img {
  -webkit-mask-position: -252px 0;
          mask-position: -252px 0;
}
.icoSpecTool12.schedule {
  -webkit-mask-position: -264px 0;
          mask-position: -264px 0;
}
.icoSpecTool12.planner {
  -webkit-mask-position: -276px 0;
          mask-position: -276px 0;
}
.icoSpecTool12.expander {
  -webkit-mask-position: -288px 0;
          mask-position: -288px 0;
}
.icoSpecTool12.tab {
  -webkit-mask-position: -300px 0;
          mask-position: -300px 0;
}
.icoSpecTool12.expand {
  -webkit-mask-position: -312px 0;
          mask-position: -312px 0;
}
.icoSpecTool12.collapse {
  -webkit-mask-position: -324px 0;
          mask-position: -324px 0;
}
.icoSpecTool12.add {
  -webkit-mask-position: -336px 0;
          mask-position: -336px 0;
}
.icoSpecTool12.delete {
  -webkit-mask-position: -348px 0;
          mask-position: -348px 0;
}
.icoSpecTool12.move {
  -webkit-mask-position: -360px 0;
          mask-position: -360px 0;
}
.icoSpecTool12.quickAdd {
  -webkit-mask-position: -372px 0;
          mask-position: -372px 0;
}
.icoSpecTool12.comboArrow {
  background-color: #333;
  -webkit-mask-position: -312px 0;
          mask-position: -312px 0;
}

.icoSpecTool16 {
  display: flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: #fff;
  background-position-y: -22px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.icoSpecTool16.close {
  -webkit-mask-position: 0px -22px;
          mask-position: 0px -22px;
}
.icoSpecTool16.alignTop {
  -webkit-mask-position: -16px -22px;
          mask-position: -16px -22px;
}
.icoSpecTool16.alignLeft {
  -webkit-mask-position: -32px -22px;
          mask-position: -32px -22px;
}
.icoSpecTool16.fix {
  -webkit-mask-position: -48px -22px;
          mask-position: -48px -22px;
}
.icoSpecTool16.delete {
  -webkit-mask-position: -64px -22px;
          mask-position: -64px -22px;
}

.icoSpecTool20 {
  display: flex;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: #fff;
  background-position-y: -48px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.icoSpecTool20.layer {
  -webkit-mask-position: 0px -48px;
          mask-position: 0px -48px;
}
.icoSpecTool20.toolbar {
  -webkit-mask-position: -20px -48px;
          mask-position: -20px -48px;
}
.icoSpecTool20.text {
  -webkit-mask-position: -40px -48px;
          mask-position: -40px -48px;
}
.icoSpecTool20.number {
  -webkit-mask-position: -60px -48px;
          mask-position: -60px -48px;
}
.icoSpecTool20.codehelp {
  -webkit-mask-position: -80px -48px;
          mask-position: -80px -48px;
}
.icoSpecTool20.combo {
  -webkit-mask-position: -100px -48px;
          mask-position: -100px -48px;
}
.icoSpecTool20.date {
  -webkit-mask-position: -120px -48px;
          mask-position: -120px -48px;
}
.icoSpecTool20.check {
  -webkit-mask-position: -140px -48px;
          mask-position: -140px -48px;
}
.icoSpecTool20.button {
  -webkit-mask-position: -160px -48px;
          mask-position: -160px -48px;
}
.icoSpecTool20.sheet {
  -webkit-mask-position: -180px -48px;
          mask-position: -180px -48px;
}
.icoSpecTool20.label {
  -webkit-mask-position: -200px -48px;
          mask-position: -200px -48px;
}
.icoSpecTool20.chart {
  -webkit-mask-position: -220px -48px;
          mask-position: -220px -48px;
}
.icoSpecTool20.tree {
  -webkit-mask-position: -240px -48px;
          mask-position: -240px -48px;
}
.icoSpecTool20.multitext {
  -webkit-mask-position: -260px -48px;
          mask-position: -260px -48px;
}
.icoSpecTool20.pw {
  -webkit-mask-position: -280px -48px;
          mask-position: -280px -48px;
}
.icoSpecTool20.mask {
  -webkit-mask-position: -300px -48px;
          mask-position: -300px -48px;
}
.icoSpecTool20.radio {
  -webkit-mask-position: -320px -48px;
          mask-position: -320px -48px;
}
.icoSpecTool20.file {
  -webkit-mask-position: -340px -48px;
          mask-position: -340px -48px;
}
.icoSpecTool20.word {
  -webkit-mask-position: -360px -48px;
          mask-position: -360px -48px;
}
.icoSpecTool20.image {
  -webkit-mask-position: -380px -48px;
          mask-position: -380px -48px;
}
.icoSpecTool20.schedule {
  -webkit-mask-position: -400px -48px;
          mask-position: -400px -48px;
}
.icoSpecTool20.planner {
  -webkit-mask-position: -420px -48px;
          mask-position: -420px -48px;
}
.icoSpecTool20.tab {
  -webkit-mask-position: -440px -48px;
          mask-position: -440px -48px;
}
.icoSpecTool20.toolbar {
  background-color: #1CC2AC;
}

/*icon definition*/
.ico {
  fill: #fff;
}
.ico.i-logo-symbol {
  width: 20px;
  height: 16px;
}
.ico.i-logo-io {
  width: 43px;
  height: 17px;
}
.ico.i-logo-spec {
  width: 43px;
  height: 17px;
}
.ico.i-lock {
  width: 13px;
  height: 15px;
}
.ico.i-checkin {
  width: 16px;
  height: 16px;
}
.ico.i-checkout {
  width: 16px;
  height: 16px;
}
.ico.i-cancel {
  width: 16px;
  height: 15px;
}
.ico.i-ctrl-toolbar {
  width: 17px;
  height: 17px;
}
.ico.i-ctrl-quick-add {
  width: 10px;
  height: 10px;
}
.ico.i-ctrl-text {
  width: 14px;
  height: 14px;
}
.ico.i-ctrl-number {
  width: 20px;
  height: 12px;
}
.ico.i-ctrl-combo {
  width: 18px;
  height: 13px;
}
.ico.i-ctrl-date {
  width: 17px;
  height: 15px;
}
.ico.i-ctrl-check {
  width: 17px;
  height: 17px;
}
.ico.i-ctrl-button {
  width: 17px;
  height: 14px;
}
.ico.i-ctrl-sheet {
  width: 17px;
  height: 14px;
}
.ico.i-ctrl-label {
  width: 16px;
  height: 16px;
}
.ico.i-ctrl-chart {
  width: 15px;
  height: 15px;
}
.ico.i-ctrl-tree {
  width: 16px;
  height: 18px;
}
.ico.i-ctrl-multitext {
  width: 18px;
  height: 14px;
}
.ico.i-ctrl-password {
  width: 18px;
  height: 6px;
}
.ico.i-ctrl-mask {
  width: 20px;
  height: 8px;
}
.ico.i-ctrl-radio {
  width: 16px;
  height: 16px;
}
.ico.i-ctrl-file {
  width: 17px;
  height: 18px;
}
.ico.i-ctrl-word {
  width: 16px;
  height: 16px;
}
.ico.i-ctrl-image {
  width: 16px;
  height: 14px;
}
.ico.i-ctrl-scheduler {
  width: 16px;
  height: 17px;
}
.ico.i-ctrl-planner {
  width: 18px;
  height: 14px;
}
.ico.i-ctrl-tab {
  width: 20px;
  height: 8px;
}
.ico.i-delete {
  width: 13px;
  height: 13px;
}
.ico.i-undo {
  width: 16px;
  height: 12px;
}
.ico.i-confirm {
  width: 8px;
  height: 11px;
}
.ico.i-redo {
  width: 16px;
  height: 12px;
  transform: scaleX(-1);
}
.ico.i-new {
  width: 19px;
  height: 15px;
}
.ico.i-edit {
  width: 13px;
  height: 13px;
}
.ico.i-publish {
  width: 15px;
  height: 13px;
}
.ico.i-save {
  width: 16px;
  height: 15px;
}
.ico.i-apply {
  width: 18px;
  height: 16px;
}
.ico.i-search-pgm {
  width: 16px;
  height: 16px;
}
.ico.i-tab-close {
  width: 10px;
  height: 10px;
}
.ico.i-add-item {
  width: 10px;
  height: 10px;
}
.ico.i-menu-pgm-info {
  width: 9px;
  height: 17px;
}
.ico.i-menu-pgm-layout {
  width: 18px;
  height: 18px;
}
.ico.i-menu-pgm-summary {
  width: 18px;
  height: 15px;
}
.ico.i-menu-table-info {
  width: 18px;
  height: 15px;
}
.ico.i-menu-service-info {
  width: 22px;
  height: 12px;
}
.ico.i-menu-notes {
  width: 16px;
  height: 12px;
}
.ico.i-menu-history {
  width: 16px;
  height: 16px;
}
.ico.i-edit-add-sec {
  width: 34px;
  height: 17px;
}
.ico.i-edit-merge-sec {
  width: 34px;
  height: 25px;
}
.ico.i-edit-splitter {
  width: 50px;
  height: 16px;
}
.ico.i-edit-splitter-v {
  width: 16px;
  height: 28px;
}
.ico.i-edit-expander {
  width: 40px;
  height: 32px;
}
.ico.i-edit-expander-h {
  width: 40px;
  height: 32px;
}
.ico.i-multiset {
  width: 17px;
  height: 12px;
}
.ico.i-selectbox-arrow {
  width: 11px;
  height: 6px;
}
.ico.i-panel-expand {
  width: 15px;
  height: 9px;
  transform: rotate(180deg);
}
.ico.i-panel-expand.collapse {
  transform: rotate(0);
}
.ico.i-panel-close {
  width: 12px;
  height: 12px;
}
.ico.i-layout-type-empty, .ico.i-layout-type-01, .ico.i-layout-type-02 {
  width: 85px;
  height: 97px;
}
.ico.i-pgm-edit {
  width: 18px;
  height: 16px;
}
.ico.i-pgm-duplicate {
  width: 18px;
  height: 18px;
}
.ico.i-pgm-share {
  width: 16px;
  height: 14px;
}
.ico.i-delete-item {
  width: 12px;
  height: 14px;
}
.ico.i-reset {
  width: 20px;
  height: 16px;
}
.ico.i-browse {
  width: 18px;
  height: 16px;
}
.ico.i-create-pgm {
  width: 17px;
  height: 14px;
}
.ico.i-print {
  width: 16px;
  height: 14px;
}
.ico.i-file-attatch {
  width: 18px;
  height: 17px;
}

html, body {
  height: 100%;
}

.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
}

.dlg {
  position: fixed;
  left: 100px;
  top: 100px;
  display: inline-block;
  padding: 5px 15px 15px 15px;
  padding: 5px 15px 15px 15px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
  z-index: 4;
}
.dlg > .titleArea {
  position: relative;
  padding-top: 5px;
}
.dlg > .titleArea > h3 {
  font-size: 16px;
  color: #333;
}
.dlg > .titleArea > .btnClose {
  position: absolute;
  right: 0px;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.dlg > .titleArea > .btnClose:hover {
  cursor: pointer;
  background-color: #d3d8e1;
}
.dlg > .titleArea > .btnClose::before, .dlg > .titleArea > .btnClose::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 9px;
  width: 2px;
  height: 15px;
  background-color: #000;
  transform: rotate(-45deg);
}
.dlg > .titleArea > .btnClose::before {
  transform: rotate(45deg);
}
.dlg > .titleArea > .btnClose::after {
  transform: rotate(-45deg);
}
.dlg > section {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.dlg > section.workerChange {
  width: calc(100% + 30px);
  flex-shrink: 0;
  margin: 10px -15px;
  padding: 15px;
  flex-direction: column;
  background-color: #f9f9f9;
}
.dlg > section > .inputGroup {
  position: relative;
  width: 100%;
  margin-bottom: 10px;
}
.dlg > section button {
  min-height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  color: #fff;
  background-color: #44c9cd;
}
.dlg > section input[type=text], .dlg > section textarea {
  display: inline-flex;
  align-items: center;
  min-height: 35px;
  height: 100%;
  font-size: 16px;
  color: #999;
  border: 0px;
  border-bottom: 1px solid #eef2f4;
  background-color: #fff;
}
.dlg > section input[type=text]:focus, .dlg > section textarea:focus {
  color: #44c9cd;
  border-bottom: 2px solid #44c9cd;
}
.dlg > .dlgBtnArea {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dlg > .dlgBtnArea > .btn {
  height: 30px;
}
.dlg.CheckInOut {
  display: none;
  width: 400px;
  height: auto;
}
.dlg.CheckInOut > section {
  flex-wrap: nowrap;
  padding: 4px 0;
  height: auto !important;
}
.dlg.CheckInOut > section > #WorkYMArea {
  display: none;
}
.dlg.CheckInOut > section textarea {
  width: 100%;
  height: 55px;
  padding: 4px;
  border: 1px solid #ccc;
}
.dlg.CheckInOut > section textarea:focus {
  border: 2px solid #44c9cd;
}
.dlg.Remark {
  display: none;
  width: 400px;
  height: auto;
}
.dlg.Remark > section {
  padding: 4px 0;
  height: auto !important;
  justify-content: center;
}
.dlg.Remark > section textarea {
  height: 150px;
}
.dlg.Remark > section textarea:focus {
  border: 2px solid #44c9cd;
}
.dlg.Remark > section input, .dlg.Remark > section textarea {
  width: 100%;
  padding: 4px;
  min-height: 30px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btnPanelClose {
  position: absolute;
  right: 10px;
  top: 15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.btnPanelClose:before {
  transform: rotate(45deg);
}
.btnPanelClose:after {
  transform: rotate(-45deg);
}
.btnPanelClose:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
}
.btnPanelClose:active {
  background-color: rgba(0, 0, 0, 0.2);
}
.btnPanelClose::before, .btnPanelClose::after {
  content: "";
  top: 7px;
  position: absolute;
  left: 14px;
  width: 2px;
  height: 16px;
  background-color: #000;
}

.Combobox {
  position: relative;
}
.Combobox > .txtValue {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  width: 100%;
  font-size: 12px;
}
.Combobox > .txtValue > .icon {
  position: relative;
  width: 20px;
  height: 20px;
}
.Combobox > .txtValue .icon:before {
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  top: 5px;
  left: 5px;
  border: 3px solid;
  border-color: #454e5f #454e5f transparent transparent;
  transform: rotate(135deg);
  transition: ease-in 0.3s;
}
.Combobox > .hiddenCheck:checked + .comboItem {
  top: 20px;
  opacity: 1;
  display: block;
}
.Combobox > .hiddenCheck:checked + .comboItem + .txtValue .icon:before {
  top: 9px;
  transform: rotate(-45deg);
}
.Combobox > .comboItem {
  opacity: 0;
  display: none;
  position: absolute;
  top: -50px;
  left: 0px;
  width: 100%;
  min-width: 200px;
  max-height: 400px;
  border: 1px solid #333;
  background-color: #fff;
  z-index: 9;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 5px;
  overflow-y: auto;
  transition: opacity top ease-in 0.3s;
}
.Combobox > .comboItem > .tabRadio {
  display: flex;
  width: 100%;
  height: 40px;
  padding: 5px 10px 0;
  border-bottom: 1px solid #ddd;
}
.Combobox > .comboItem > .tabRadio > label {
  display: flex;
  height: 100%;
  align-items: center;
  padding: 0 10px;
  border-bottom: 2px solid transparent;
  color: #999;
  font-size: 12px;
  cursor: pointer;
}
.Combobox > .comboItem > .tabRadio > label > i {
  margin-left: 5px;
  padding: 2px 4px;
  border-radius: 3px;
  background-color: #f2f2f2;
  background-image: none;
  color: #999;
  font-size: 9px;
  font-style: normal;
}
.Combobox > .comboItem > .tabRadio > input[type=radio]:not(:checked) + label:hover {
  color: #333;
  font-weight: bold;
  transform: translateY(-3px);
}
.Combobox > .comboItem > .tabRadio > input[type=radio]:not(:checked) + label:hover > i {
  background-color: #eee;
  color: #333;
  font-weight: normal;
}
.Combobox > .comboItem > .tabRadio > input[type=radio] {
  display: none;
}
.Combobox > .comboItem > .tabRadio > input[type=radio]:checked + label {
  border-bottom-color: #333;
  color: #333;
  font-weight: bold;
}
.Combobox > .comboItem > .tabRadio > input[type=radio]:checked + label > i {
  background-color: #333;
  color: #eee;
  font-weight: normal;
}
.Combobox > .comboItem li {
  padding: 8px 15px;
  font-size: 14px;
  color: #333;
}
.Combobox > .comboItem li:last-child {
  border-bottom: 0px;
}
.Combobox > .comboItem li:hover {
  background-color: #F8F8F8;
  cursor: pointer;
}
.Combobox > .comboItem li.Selected {
  color: #fff;
  font-weight: bold;
  background-color: #44c9cd;
}

.TreeControl {
  position: relative;
  overflow: auto;
}
.TreeControl * {
  transition: ease-in 0.2s;
}
.TreeControl > .ulTree > li {
  padding: 0px;
  font-size: 14px;
  font-weight: bold;
}
.TreeControl li ul {
  display: none;
}
.TreeControl li.Open > ul {
  display: block;
}
.TreeControl li.Open > .txtValue:before {
  transform: rotate(0deg);
}
.TreeControl li > .txtValue > .icon.Arrow {
  height: 12px;
  background-position: -7px -4px;
}
.TreeControl > ul > li {
  padding: 0;
}
.TreeControl ul > li {
  padding: 0px 0px 0px 20px;
  font-size: 13px;
  font-weight: normal;
}
.TreeControl ul > li > p.txtValue:hover {
  cursor: pointer;
  background-color: #dce1e4;
}
.TreeControl ul > li > .txtValue {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 5px;
}
.TreeControl ul > li > .txtValue > .txtName {
  white-space: nowrap;
  -webkit-user-select: none;
}
.TreeControl ul > li.Selected > p.txtValue {
  color: #fff;
  background-color: #5381ff;
}
.TreeControl ul > li.Folder > .txtValue {
  padding: 6px 10px 6px 5px;
}
.TreeControl ul > li.Folder > .txtValue:after {
  content: "";
  position: absolute;
  right: 10px;
  top: calc(50% + 1px);
  width: 5px;
  height: 5px;
  border: 1px solid black;
  border-top: 0px;
  border-left: 0px;
  transform: rotate(225deg);
}
.TreeControl ul > li.Folder.Open > .txtValue:after {
  top: calc(50% - 4px);
  transform: rotate(45deg);
}

.ContextMenu {
  position: absolute;
  display: inline-block;
  min-width: 100px;
  z-index: 4;
}
.ContextMenu ul {
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0 10px;
}
.ContextMenu ul > li {
  position: relative;
  padding: 0;
}
.ContextMenu ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  color: #333;
  font-size: 13px;
}
.ContextMenu ul > li > a.subDepth:after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #ccc;
}
.ContextMenu ul > li:hover > a {
  cursor: pointer;
  color: #fff;
  background-color: #454e5f;
}
.ContextMenu ul > li.Dis > a {
  cursor: not-allowed;
  opacity: 0.3;
}
.ContextMenu li > ul {
  display: none;
  min-width: 60px;
}
.ContextMenu li > ul > li.checkout > a {
  justify-content: space-between;
}
.ContextMenu li > ul > li.checkout > a::after {
  content: "";
  width: 6px;
  height: 9px;
  background-image: url("../images/btnIcon.svg");
  background-repeat: no-repeat;
  background-position: -491px -132px;
}
.ContextMenu li > ul > li.checkout:hover > a::after {
  background-position-x: -507px;
}
.ContextMenu li:hover > ul {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
}

.ui-datepicker {
  background-color: #fff;
  border-radius: 8px;
  border: 1px solid #c4cfe8;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
  display: none;
}
.ui-datepicker > .ui-datepicker-header {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4px 0;
  margin: 16px;
}
.ui-datepicker > .ui-datepicker-header > select {
  font-size: 16px;
  font-weight: bold;
}
.ui-datepicker .ui-datepicker-prev {
  left: 0;
}
.ui-datepicker .ui-datepicker-next {
  right: 0;
}
.ui-datepicker .ui-datepicker-title {
  display: inline-flex;
  justify-content: flex-end;
  font-size: 12px;
  font-weight: bold;
}
.ui-datepicker .ui-datepicker-calendar {
  border-spacing: 0;
  margin: 0 16px 16px 16px;
}
.ui-datepicker .ui-datepicker-calendar th {
  font-size: 12px;
  font-weight: normal;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}
.ui-datepicker .ui-datepicker-calendar td {
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 50%;
}
.ui-datepicker .ui-datepicker-calendar td a {
  color: #333;
}
.ui-datepicker td.ui-datepicker-today {
  background-color: #45c9cc;
}
.ui-datepicker td.ui-datepicker-today a {
  font-weight: bold;
  color: #fff;
}
.ui-datepicker > table {
  width: calc(100% - 20px);
  margin: -10px 10px 10px 10px;
}
.ui-datepicker > table td {
  height: 45px;
  border-radius: 30px;
}
.ui-datepicker > table td:hover {
  background-color: #44c9cd;
  color: #fff;
  cursor: pointer;
}
.ui-datepicker > table td.ui-state-disabled {
  color: #ddd;
  cursor: default;
}
.ui-datepicker > table td.ui-state-disabled:hover {
  background-color: transparent;
  color: #ddd;
  cursor: default;
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
  position: absolute;
  display: inline-block;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 12px;
}

.ui-datepicker .ui-datepicker-next:hover,
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-calendar td:hover {
  cursor: pointer;
  background-color: #ddf4f5;
}

.ui-datepicker .ui-datepicker-next:hover span,
.ui-datepicker .ui-datepicker-prev:hover span,
.ui-datepicker .ui-datepicker-calendar td:hover a {
  color: #45c9cc;
}

.dig .tooltipProcessInfo {
  position: relative;
  display: block;
  background-color: #F9F9F9;
  border: 0px;
  border-radius: 0;
}

.tooltipProcessInfo {
  position: absolute;
  display: inline-block;
  padding: 10px 10px 0px 10px;
  max-width: 250px;
  max-height: 200px;
  background-color: #fff;
  border: 1px solid #0f1f31;
  border-radius: 10px;
  z-index: 3;
}
.tooltipProcessInfo::before {
  content: "";
  position: absolute;
  left: 20px;
  top: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #0f1f31;
}
.tooltipProcessInfo::after {
  content: "";
  position: absolute;
  left: 20px;
  top: -7px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}
.tooltipProcessInfo.Up::before {
  top: auto;
  bottom: -8px;
  border-bottom: unset;
  border-top: 8px solid #0f1f31;
}
.tooltipProcessInfo.Up::after {
  top: auto;
  bottom: -7px;
  border-bottom: unset;
  border-top: 8px solid #fff;
}

.processInfo > .titleArea {
  display: flex;
  align-items: center;
}
.processInfo > .titleArea > .processStatus {
  padding: 4px 8px 3px 8px;
  color: #5574F7;
  font-size: 11px;
  border: 1px solid #5574F7;
  border-radius: 15px;
  flex-shrink: 0;
}
.processInfo > .titleArea > .txtTitle {
  padding-left: 5px;
  color: #5574F7;
  font-size: 14px;
}
.processInfo > .contentsArea {
  margin: 10px 5px 5px 5px;
  font-size: 12px;
}
.processInfo > .contentsArea > .txtUser {
  font-weight: bold;
}
.processInfo.Design > .titleArea > .processStatus {
  color: #1CC2AC !important;
  border: 1px solid #1CC2AC !important;
}
.processInfo.Design > .titleArea > .txtTitle {
  color: #1CC2AC;
}
.processInfo.Packaging > .titleArea > .processStatus {
  color: #5574F7 !important;
  border: 1px solid #5574F7 !important;
}
.processInfo.Packaging > .titleArea > .txtTitle {
  color: #5574F7;
}
.processInfo.Test > .titleArea > .processStatus {
  color: #EE6723 !important;
  border: 1px solid #EE6723 !important;
}
.processInfo.Test > .titleArea > .txtTitle {
  color: #EE6723;
}
.processInfo.Complete > .titleArea > .processStatus {
  color: #6C717D !important;
  border: 1px solid #6C717D !important;
}
.processInfo.Complete > .titleArea > .txtTitle {
  color: #6C717D;
}

.processInfo > .contentsArea > .txtCheckOutContents,
.processInfo > .contentsArea > .txtCheckOutDate {
  color: #888;
}

body * {
  transition: ease-in 0.15s;
}

.divActionBtnArea {
  position: fixed;
  left: 5px;
  bottom: 5px;
  display: flex;
  align-items: center;
}

.btnRound {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-image: url("../images/btnIcon.svg");
  background-size: 39px 75px;
  background-repeat: no-repeat;
  background-color: #2699FB;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px;
}
.btnRound + .btnRound {
  margin-left: 5px;
}
.btnRound:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 5px;
}
.btnRound.ProASQuery {
  background-position: 8px 12px;
}
.btnRound.New {
  background-color: #44c9cd;
  background-position: 10px -35px;
}

header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding-left: 60px;
  border-bottom: 1px solid #333;
  background-color: #fff;
}
header > .leftArea {
  display: inline-flex;
  justify-content: space-between;
  height: 100%;
  width: 300px;
  border-right: 1px solid #333;
}
header > .leftArea .Combobox {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  height: 100%;
  font-size: 13px;
}
header > .leftArea .Combobox .txtValue {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-left: 25px;
  font-size: 13px;
  height: 100%;
}
header > .leftArea .Combobox .txtValue .txtDescription {
  display: none;
  font-size: 11px;
}
header > .leftArea .Combobox .txtValue .icon {
  position: absolute;
  left: 5px;
  top: 10px;
}
header > .leftArea .Combobox .comboItem {
  top: 49px !important;
}
header > .leftArea .Combobox:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
}
header .serviceModelSelectedArea {
  width: 100%;
}
header .serviceModelSelectedArea > .Information {
  display: inline-block;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  margin-left: 10px;
  padding: 2px 0px;
  border-radius: 50%;
}
header .serviceModelSelectedArea > .Information > span, header .serviceModelSelectedArea > .Information > span::before, header .serviceModelSelectedArea > .Information span::after {
  position: absolute;
  top: 0px;
  left: 5px;
  content: "";
  width: 3px;
  height: 3px;
  background-color: #454e5f;
  border-radius: 50%;
}
header .serviceModelSelectedArea > .Information > span {
  display: inline-block;
  position: relative;
}
header .serviceModelSelectedArea > .Information > span::before {
  position: absolute;
  left: 6px;
}
header .serviceModelSelectedArea > .Information > span::after {
  position: absolute;
  left: 12px;
}
header .serviceModelSelectedArea > .Information:hover {
  background-color: #fff;
}
header .serviceModelSelectedArea .comboItem {
  width: 400px;
}
header .serviceModelSelectedArea .comboItem li {
  position: relative;
  padding-right: 30px;
}

header .serviceModelSelectedArea .tabList {
  display: none;
}
header .serviceModelSelectedArea .tabList.Show {
  display: block;
}
header .serviceModelSelectedArea .tabList li {
  display: flex;
  flex-direction: column;
}
header .serviceModelSelectedArea .tabList li > .txtTitle {
  display: flex;
  align-items: center;
}
header .serviceModelSelectedArea .tabList li > .txtDescription {
  display: flex;
  padding-top: 2px;
  padding-left: 25px;
  font-size: 12px;
  opacity: 0.5;
}
header .serviceModelSelectedArea .tabList li.ServiceModel .txtTitle:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 22px;
  margin-right: 5px;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -171px -182px;
}
header .serviceModelSelectedArea .tabList li.Company .txtTitle:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 22px;
  margin-right: 5px;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -215px -207px;
}
header .serviceModelSelectedArea .tabList .ulFixed > li {
  border-bottom: 1px solid #ddd;
  background-color: rgba(68, 201, 205, 0.15);
}
header .serviceModelSelectedArea .tabList .ulFixed > li:hover {
  background-color: rgba(68, 201, 205, 0.25);
}
header .serviceModelSelectedArea .tabList .ulFixed li > .btnPin {
  background-position: -244px -79px;
  opacity: 0.5;
}
header .serviceModelSelectedArea .tabList .ulFixed li > .btnPin:hover {
  opacity: 1;
}
header .serviceModelSelectedArea .tabList .ulDefault li.Fixed .btnPin {
  background-position-y: -79px;
}
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 8px 0;
}
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl + dl {
  border-top: 1px solid #ddd;
}
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl dt {
  padding: 8px 15px;
  font-size: 12px;
  font-weight: bold;
}
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl dd {
  position: relative;
  display: flex;
  padding: 6px 30px 6px 15px;
}
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl dd > .txtTitle {
  display: flex;
  align-items: center;
}
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl dd:hover {
  background-color: #f8f8f8;
}
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl dd.Fixed .btnPin {
  background-position-y: -79px;
}
header .serviceModelSelectedArea .comboItem > .txtTitle {
  padding: 10px 8px;
  font-size: 14px;
  font-weight: bold;
}
header .serviceModelSelectedArea .ulProject {
  display: none;
  background-color: #EDF1FF;
}
header .serviceModelSelectedArea .ulProject > li.Selected {
  color: #5574f7;
  background-color: #EDF1FF;
}
header .serviceModelSelectedArea .ulProject > li.Selected:before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  left: 10px;
  display: inline-block;
  width: 4px;
  height: 8px;
  border: 1px solid #5574f7;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
header .serviceModelSelectedArea .ulProject > li:hover {
  color: #5574f7;
  background-color: #e7ebfe;
}
header > .leftArea .Combobox.Project .txtValue .txtName {
  color: #5574f7;
}
header > .leftArea > .btnServiceProjectQuery {
  position: relative;
  width: 35px;
  color: #454e5f;
}
header > .leftArea > .btnServiceProjectQuery:hover {
  cursor: pointer;
  color: #44c9cd;
  background-color: #e0f4f4;
}
header > .leftArea > .btnServiceProjectQuery:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 16px;
  left: 8px;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
header > .leftArea > .btnServiceProjectQuery:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 27px;
  left: 21px;
  width: 2px;
  height: 5px;
  background-color: currentColor;
  transform: rotate(135deg);
}
header .modelProjectQueryArea {
  display: block;
  position: fixed;
  left: 60px;
  top: 0;
  width: 299px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 2px 2px 5px;
  z-index: 10;
}
header .modelProjectQueryArea .queryArea {
  position: relative;
  width: 100%;
  height: 49px;
}
header .modelProjectQueryArea .queryArea > input {
  width: 100%;
  height: 100%;
  padding: 0 30px 0 10px;
  border-bottom: 1px solid #454e5f;
}
header .modelProjectQueryArea .queryArea > input:focus {
  color: #44c9cd;
  font-weight: bold;
  border-bottom: 2px solid #44c9cd;
}
header .modelProjectQueryArea .queryArea > .btnQuery {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 48px;
  width: 31px;
  color: #454e5f;
}
header .modelProjectQueryArea .queryArea > .btnQuery:hover {
  cursor: pointer;
  color: #44c9cd;
  background-color: #e0f4f4;
}
header .modelProjectQueryArea .queryArea > .btnQuery:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 16px;
  left: 8px;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
header .modelProjectQueryArea .queryArea > .btnQuery:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 26px;
  left: 21px;
  width: 2px;
  height: 5px;
  background-color: currentColor;
  transform: rotate(135deg);
}
header .modelProjectQueryArea .scrollArea {
  display: inline-block;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
}
header .modelProjectQueryArea .scrollArea .ulQuery > li {
  position: relative;
  padding: 8px 45px 8px 20px;
}
header .modelProjectQueryArea .scrollArea .ulQuery > li:hover {
  cursor: pointer;
  background-color: #eef2f4;
}
header .modelProjectQueryArea .scrollArea .ulQuery > li > .btnPin {
  position: absolute;
  opacity: 0;
  right: 10px;
  top: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -245px 3px;
  background-size: unset;
}
header .modelProjectQueryArea .scrollArea .ulQuery > li > .btnPin:hover {
  cursor: pointer;
  opacity: 0.5;
}
header .modelProjectQueryArea .scrollArea .ulQuery > li.Pin > .btnPin {
  opacity: 1;
}
header .modelProjectQueryArea .scrollArea .ulQuery > li > .txtTitle {
  display: flex;
  align-items: center;
  font-size: 13px;
}
header .modelProjectQueryArea .scrollArea .ulQuery > li > .txtDescription {
  font-size: 11px;
  opacity: 0.7;
}
header .modelProjectQueryArea .scrollArea .ulQuery > li.Project > .txtTitle:before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 20px;
  margin-right: 4px;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -170px 0px;
}
header > .topMenuArea {
  height: 30px;
  display: inline-flex;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid #000;
  border-radius: 15px;
}
header > .topMenuArea > button {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 10px;
  height: 100%;
  border-radius: 15px;
  background-color: #fff;
}
header > .topMenuArea > button:hover {
  cursor: pointer;
  background-color: #dce1e4;
}
header > .topMenuArea > button.Selected {
  color: #fff;
  background-color: #000;
}
header > .programBtnArea {
  display: inline-flex;
  flex-shrink: 0;
  margin-right: 80px;
  align-items: center;
}
header > .programBtnArea > .linkERPArea {
  position: relative;
  flex-shrink: 0;
  padding-right: 10px;
}
header > .programBtnArea > .linkERPArea > input[type=checkbox] {
  display: none;
}
header > .programBtnArea > .linkERPArea > label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 4px;
  background-color: #EDEFF5;
  font-size: 13px;
  font-weight: 500;
}
header > .programBtnArea > .linkERPArea > label:hover {
  background-color: #dce1e4;
  cursor: pointer;
}
header > .programBtnArea > .linkERPArea > label > i {
  display: block;
  width: 10px;
  height: 6px;
  margin-left: 5px;
  background-position: -230px -6px;
  transition: none;
}
header > .programBtnArea > .linkERPArea > input[type=checkbox]:checked + label {
  background-color: #333;
  color: #fff;
}
header > .programBtnArea > .linkERPArea > input[type=checkbox]:checked + label > i {
  background-position-x: -252px;
  transition: none;
}
header > .programBtnArea > .linkERPArea > input[type=checkbox]:checked ~ .linkList {
  display: block;
}
header > .programBtnArea > .linkERPArea .linkList {
  display: none;
  position: absolute;
  top: 32px;
  left: 0;
  padding: 5px 0;
  border: 1px solid #EBEBEB;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  z-index: 9;
}
header > .programBtnArea > .linkERPArea .linkList > li a {
  display: flex;
  align-items: center;
  min-width: 240px;
  padding: 8px 15px;
  font-size: 13px;
}
header > .programBtnArea > .linkERPArea .linkList > li a:hover {
  background-color: #EDEFF5;
  cursor: pointer;
}
header > .programBtnArea > .linkERPArea .linkList > li a > i {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  background-position: -200px -2px;
}
header > .programBtnArea > a {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 2px;
  border-radius: 50%;
}
header > .programBtnArea > a > i {
  width: 28px;
  height: 22px;
  background-position: -136px 1px;
}
header > .programBtnArea > a.Home > i {
  background-position: 1px 0px;
}
header > .programBtnArea > a.Message > i {
  background-position: -67px 0px;
}
header > .programBtnArea > a.Message > .iconNew {
  display: none;
  position: absolute;
  right: 2px;
  top: 5px;
  width: 8px;
  height: 8px;
  background-color: #f10057;
  border-radius: 50%;
}
header > .programBtnArea > a.Logout > i {
  background-position: -101px 0px;
}
header > .programBtnArea > a.Office > i {
  background-image: url("../images/logo_Office.svg");
  background-position: center;
}
header > .programBtnArea > a:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
}
header > .programBtnArea > a.Profile {
  margin-left: 5px;
  background-color: #D9F4F5;
  color: #44c9cd;
  font-weight: bold;
  font-size: 12px;
}
header > .programBtnArea > a.Profile.On {
  border: 3px solid #A4DBDB;
}
header .userInfoArea {
  position: fixed;
  right: 20px;
  top: 40px;
  width: 200px;
  height: 180px;
  padding: 20px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  background-color: #fff;
  font-weight: normal;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0 10px;
  z-index: 9;
}
header .userInfoArea > .iconUser {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #D9F4F5;
  border-radius: 50%;
  color: #44c9cd;
  font-weight: bold;
  font-size: 24px;
}
header .userInfoArea > .txtUserName {
  margin-top: 10px;
  color: #000;
  font-size: 16px;
}
header .userInfoArea > .txtUserID {
  color: #999;
  font-size: 12px;
}
header .userInfoArea > .btnLogout {
  display: inline-block;
  margin: 10px 0;
  padding: 5px 20px;
  border-radius: 30px;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  font-size: 12px;
}
header .userInfoArea > .btnLogout:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
}

header .serviceModelSelectedArea .tabList li > .btnPin,
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl > dd > .btnPin {
  position: absolute;
  top: 8px;
  right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -244px -59px;
  background-size: unset;
  opacity: 0;
}

header .serviceModelSelectedArea .tabList li:hover > .btnPin,
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl > dd:hover > .btnPin {
  cursor: pointer;
  opacity: 0.5;
}

header .serviceModelSelectedArea .tabList li > .btnPin:hover,
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl > dd > .btnPin:hover {
  opacity: 1;
}

header .serviceModelSelectedArea .tabList li.Project .txtTitle:before,
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl dd.Project > .txtTitle:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 22px;
  margin-right: 5px;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -170px 2px;
}

header .serviceModelSelectedArea .tabList li.AddProject .txtTitle:before,
header .serviceModelSelectedArea .tabList .ulProjectDefault > dl dd.AddProject > .txtTitle:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 22px;
  margin-right: 5px;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -170px -207px;
}

header > .leftArea .Combobox.Project .txtValue .txtDescription,
header .serviceModelSelectedArea.Project .ulProject {
  display: block;
}

main {
  position: relative;
  display: flex;
  height: calc(100% - 50px);
  overflow: hidden;
}

#tbtnLeftArea:checked + .tbtnLeftArea:before {
  transform: rotate(225deg);
  left: 14px;
}

#tbtnLeftArea:checked + .tbtnLeftArea {
  border-right: 1px solid #333;
}

#tbtnRightArea:checked + .tbtnRightArea:before {
  transform: rotate(45deg);
  right: 10px;
}

#tbtnRightArea:checked + .tbtnRightArea {
  border-left: 1px solid #333;
}

#tbtnLeftArea:checked + .tbtnLeftArea ~ .LeftArea {
  width: 260px;
  opacity: 1;
}

#tbtnRightArea:checked + .tbtnRightArea ~ .RightArea {
  width: 260px;
  padding: 10px;
  opacity: 1;
}

#tbtnLeftArea:checked + .tbtnLeftArea + #tbtnRightArea ~ .ContentsArea {
  width: calc(100% - 260px);
}

.tbtnLeftArea, .tbtnRightArea {
  position: fixed;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 49px;
}

.tbtnLeftArea {
  left: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.tbtnRightArea {
  right: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.tbtnRightArea:before {
  transform: rotate(225deg);
  right: 6px;
  left: auto;
}

.tbtnLeftArea:hover, .tbtnRightArea:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
}

.tbtnLeftArea:before,
.tbtnRightArea:before {
  position: absolute;
  content: "";
  top: 22px;
  left: 10px;
  width: 0;
  height: 0;
  border: 3px solid;
  border-color: #454e5f #454e5f transparent transparent;
  transform: rotate(45deg);
}

.tbtnLeftArea > .iconList, .tbtnRightArea > .iconList {
  position: relative;
  display: inline-block;
}

.tbtnLeftArea > .iconList,
.tbtnLeftArea > .iconList:before,
.tbtnLeftArea > .iconList:after,
.tbtnRightArea > .iconList,
.tbtnRightArea > .iconList:before,
.tbtnRightArea > .iconList:after {
  width: 17px;
  height: 2px;
  background-color: #454e5f;
}

.tbtnLeftArea > .iconList:before,
.tbtnLeftArea > .iconList:after,
.tbtnRightArea > .iconList:before,
.tbtnRightArea > .iconList:after {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
}

.tbtnLeftArea > .iconList:after,
.tbtnRightArea > .iconList:after {
  top: 5px;
}

main > .LeftArea {
  position: relative;
  flex-shrink: 0;
  width: 0px;
  border-right: 1px solid #333;
  overflow: hidden;
  opacity: 0;
  transition: ease-in 0.3s;
  height: 100%;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  border: 2px solid transparent;
  border-bottom-color: #eef2f4;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea:focus-within {
  border: 2px solid #44c9cd;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnRefresh {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 2px;
  border-radius: 50%;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnRefresh:hover {
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnRefresh > i {
  width: 20px;
  height: 20px;
  background-position: -6px -108px;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnRefresh:active > i {
  transform: rotate(-360deg);
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .inputQuery {
  height: 100%;
  padding: 0 5px;
  width: 100%;
  border: 0px;
  background-color: #fff;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .inputQuery:focus {
  font-weight: bold;
  color: #44c9cd;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnQuery {
  position: absolute;
  top: 2px;
  right: 2px;
  height: calc(100% - 4px);
  width: 30px;
  border: 0px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnQuery:hover {
  cursor: pointer;
  background-color: #44c9cd;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnQuery:hover:before {
  border-color: #fff;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnQuery:hover:after {
  background-color: #fff;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnQuery:active {
  background-color: #229194;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnQuery:before {
  top: 8px;
  left: 7px;
  width: 10px;
  height: 10px;
  border: 2px solid #162537;
  border-radius: 50%;
}
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnQuery:after {
  top: 19px;
  left: 20px;
  width: 2px;
  height: 5px;
  background-color: #162537;
  transform: rotate(-45deg);
}
main > .LeftArea.ProcessTree > .sortArea {
  display: flex;
  align-items: center;
  height: 35px;
}
main > .LeftArea.ProcessTree > .sortArea > .Combobox {
  width: calc(100% - 31px);
}
main > .LeftArea.ProcessTree .TreeControl {
  height: calc(100% - 80px);
}
main > .LeftArea.ProcessTree .TreeControl ul > li > .txtValue > .icon {
  flex-shrink: 0;
  height: 18px;
  width: 25px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li > .txtValue > .txtName {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
main > .LeftArea.ProcessTree .TreeControl ul > li > .txtValue > .txtNumber {
  flex-shrink: 0;
  padding-right: 20px;
  color: #2A58AD;
  font-size: 12px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li > .txtValue > .txtMessage {
  position: absolute;
  right: 0;
  padding: 0 3px;
  display: none;
  align-items: center;
  max-width: 80px;
  margin-left: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
  font-size: 11px;
  color: #4a5664;
  border-radius: 10px;
  background-color: #fff;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.Folder.CheckOut > .txtValue > .icon {
  background-position: -5px -4px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.Folder > .txtValue > .icon {
  background-position: -38px -4px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.Folder.Open > .txtValue > .icon {
  background-position: -4px -4px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.CheckIn > .txtValue > .icon {
  background-position: -78px -41px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.CheckIn.MyProcess > .txtValue > .icon {
  background-position: -98px -41px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.CheckOut > .txtValue > .icon {
  background-position: -1px -40px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.CheckOutOther > .txtValue > .icon {
  background-position: -57px -41px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.ReadOnly > .txtValue > .icon {
  background-position: -33px -43px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.ReadOnly > .txtValue > .txtName {
  color: #999;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.Function > .txtValue > .icon {
  background-position: -8px -76px;
  width: 15px;
  height: 15px;
}
main > .LeftArea.ProcessTree .TreeControl ul > li.Program > .txtValue > .icon {
  background-position: -30px -77px;
  height: 15px;
  width: 15px;
}
main > .LeftArea.ProcessTree .ReferenceProcessArea .TreeControl {
  height: 100%;
}
main > .LeftArea.ProcessTree .ReferenceProcessArea .sectionContentsArea {
  overflow-y: auto;
  height: calc(100% - 20px);
}
main > .LeftArea.ProcessTree .ReferenceProcessArea .sectionContentsArea > ul {
  margin-bottom: 60px;
}
main > .LeftArea.ProcessTree .btnArea {
  width: 100%;
  display: flex;
}
main > .LeftArea.ProcessTree .btnArea > button {
  width: 50%;
  margin-right: 3px;
  padding: 0;
  color: #44c9cd;
  border: 1px solid #44c9cd;
  border-radius: 0;
  background-color: #fff;
}
main .txtSectionTitle {
  display: flex;
  align-items: center;
  height: 20px;
  font-size: 11px;
  color: #454e5f;
  padding: 0 0 0 10px;
  border-top: 1px solid #a7b2c3;
  background-color: #dce1e4;
}
main > .ContentsArea {
  position: relative;
  width: 100%;
  height: 100%;
}
main > .ContentsArea > .btnPanel {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 34px;
  background-color: #fff;
  z-index: 9;
}
main > .ContentsArea > .btnPanel > .iconArrow {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: -3px;
  border-left: 1px solid #454e5f;
  border-bottom: 1px solid #454e5f;
  transform: rotate(225deg);
  transition: ease-in 0.3s;
}
main > .ContentsArea > .btnPanel:hover {
  cursor: pointer;
  background-color: #cbecf3;
}
main > .ContentsArea > .btnPanel:hover > .iconArrow {
  border-left: 1px solid #44c9cd;
  border-bottom: 1px solid #44c9cd;
}
main > .ContentsArea > .btnPanel.Left {
  left: 0;
  border-right: 1px solid #eef2f4;
}
main > .ContentsArea > .btnPanel.Right {
  right: 0;
  border-left: 1px solid #eef2f4;
}
main > .ContentsArea > .btnPanel.Right > .iconArrow {
  margin-left: 3px;
  transform: rotate(45deg);
}

main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnQuery:before,
main > .LeftArea.ProcessTree > .serviceModelQueryArea > .btnQuery:after {
  content: "";
  position: absolute;
}

main > .LeftArea.ProcessTree .TreeControl ul > li.CheckOut > .txtValue > .txtName,
main > .LeftArea.ProcessTree .TreeControl ul > li.CheckOutOther > .txtValue > .txtName {
  max-width: calc(100% - 80px);
}

main > .LeftArea.ProcessTree .TreeControl ul > li.CheckOut > .txtValue > .txtMessage,
main > .LeftArea.ProcessTree .TreeControl ul > li.CheckOutOther > .txtValue > .txtMessage {
  display: inline-flex;
}

.inputQueryArea {
  position: relative;
  display: flex;
  height: 35px;
}
.inputQueryArea > .inputQuery {
  height: 100%;
  padding: 0 5px;
  width: 100%;
  border: 0px;
  background-color: #fff;
  border: 1px solid #eef2f4;
}
.inputQueryArea > .inputQuery:focus {
  font-weight: bold;
  color: #44c9cd;
  border: 2px solid #44c9cd;
}
.inputQueryArea > .btnQuery {
  position: absolute;
  top: 2px;
  right: 2px;
  height: calc(100% - 4px);
  width: 30px;
  border: 0px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
}
.inputQueryArea > .btnQuery:hover {
  cursor: pointer;
  background-color: #44c9cd;
}
.inputQueryArea > .btnQuery:hover:before {
  border-color: #fff;
}
.inputQueryArea > .btnQuery:hover:after {
  background-color: #fff;
}
.inputQueryArea > .btnQuery:active {
  background-color: #229194;
}
.inputQueryArea > .btnQuery:before {
  top: 6px;
  left: 5px;
  width: 13px;
  height: 13px;
  border: 2px solid #162537;
  border-radius: 50%;
}
.inputQueryArea > .btnQuery:after {
  top: 18px;
  left: 20px;
  width: 2px;
  height: 7px;
  background-color: #162537;
  transform: rotate(-45deg);
}

.inputQueryArea > .btnQuery:before,
.inputQueryArea > .btnQuery:after {
  content: "";
  position: absolute;
}

.MainDashboard {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.MainDashboard .txtTitle {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #000;
  margin-bottom: 20px;
}
.MainDashboard .proASProjectArea {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 1010px;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  gap: 16px;
  overflow: auto;
}
.MainDashboard .proASProjectArea .dashboardBox {
  position: relative;
  display: flex;
  flex: 0 0 calc(50% - 8px);
  flex-direction: column;
  width: 50%;
  height: calc(50% - 8px);
  border: 1px solid #e4e4e4;
  border-radius: 12px;
  overflow: hidden;
}
.MainDashboard .proASProjectArea .dashboardBox .txtTitle {
  padding: 16px 16px 0;
}
.MainDashboard .proASProjectArea .dashboardBox .txtTitle.rightToggle {
  justify-content: space-between;
}
.MainDashboard .proASProjectArea .dashboardBox .txtTitle .checkToggle input[type=checkbox] {
  display: none;
}
.MainDashboard .proASProjectArea .dashboardBox .txtTitle .checkToggle input[type=checkbox] + label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.MainDashboard .proASProjectArea .dashboardBox .txtTitle .checkToggle input[type=checkbox] + label > i {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 32px;
  height: 17px;
  margin-left: 5px;
  border-radius: 20px;
  background-color: #d5d5d5;
  transition: background-color 0.2s;
}
.MainDashboard .proASProjectArea .dashboardBox .txtTitle .checkToggle input[type=checkbox] + label > i::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #fff;
  transition: left 0.2s;
  z-index: 1;
}
.MainDashboard .proASProjectArea .dashboardBox .txtTitle .checkToggle input[type=checkbox]:checked + label > i {
  background-color: #44c9cd;
}
.MainDashboard .proASProjectArea .dashboardBox .txtTitle .checkToggle input[type=checkbox]:checked + label > i::before {
  left: 19px;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess, .MainDashboard .proASProjectArea .dashboardBox.workingListArea, .MainDashboard .proASProjectArea .dashboardBox.recentListArea {
  display: flex;
  flex-direction: column;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea {
  overflow-y: auto;
  flex: 1;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess {
  display: flex;
  flex-direction: column;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  gap: 8px;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li .stateWrap, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li .stateWrap, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li .stateWrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li .stateWrap .processStatus, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li .stateWrap .processStatus, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li .stateWrap .processStatus {
  flex-shrink: 0;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li .stateWrap i, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li .stateWrap i, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li .stateWrap i {
  background-color: #44c9cd;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li .stateWrap .icon.checkOut, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li .stateWrap .icon.checkOut, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li .stateWrap .icon.checkOut {
  background-image: url(../images/iconProcessTree.svg);
  background-color: unset;
  background-position: -57px -41px;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li .processTitleWrap, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li .processTitleWrap, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li .processTitleWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li .processTitleWrap .titleArea .txtName, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li .processTitleWrap .titleArea .txtName, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li .processTitleWrap .titleArea .txtName {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li .processTitleWrap .titleArea .txtCheckOutContents, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li .processTitleWrap .titleArea .txtCheckOutContents, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li .processTitleWrap .titleArea .txtCheckOutContents {
  font-size: 12px;
  font-weight: 500;
  color: #999;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li .processTitleWrap .subInfoArea .processDate, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li .processTitleWrap .subInfoArea .processDate, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li .processTitleWrap .subInfoArea .processDate {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: right;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li .processTitleWrap .subInfoArea .processWriter, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li .processTitleWrap .subInfoArea .processWriter, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li .processTitleWrap .subInfoArea .processWriter {
  font-size: 12px;
  font-weight: 500;
  color: #999;
  text-align: right;
}
.MainDashboard .proASProjectArea .dashboardBox.checkoutProcess .scrollArea .ulProcess li:hover, .MainDashboard .proASProjectArea .dashboardBox.workingListArea .scrollArea .ulProcess li:hover, .MainDashboard .proASProjectArea .dashboardBox.recentListArea .scrollArea .ulProcess li:hover {
  background-color: #dce1e4;
  cursor: pointer;
}
.MainDashboard .proASProjectArea .dashboardBox.processStatusArea .tableWrap {
  position: relative;
  flex: 1 1 auto;
  overflow-y: scroll;
  padding: 0 16px 16px;
}
.MainDashboard .proASProjectArea .dashboardBox.processStatusArea .tableWrap .statusTable {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.MainDashboard .proASProjectArea .dashboardBox.processStatusArea .tableWrap .statusTable th, .MainDashboard .proASProjectArea .dashboardBox.processStatusArea .tableWrap .statusTable td {
  border: 1px solid #ddd;
  padding: 6px;
}
.MainDashboard .proASProjectArea .dashboardBox.processStatusArea .tableWrap .statusTable thead {
  position: sticky;
  top: 0;
  background-color: #f4f4f4;
  font-size: 13px;
  font-weight: 500;
  color: #333;
}
.MainDashboard .proASProjectArea .dashboardBox.processStatusArea .tableWrap .statusTable thead .subHeader {
  background-color: #D9F4F5;
  text-align: right;
}
.MainDashboard .proASProjectArea .dashboardBox.processStatusArea .tableWrap .statusTable tbody .groupCell {
  text-align: left;
}
.MainDashboard .proASProjectArea .dashboardBox.processStatusArea .tableWrap .statusTable tbody td {
  font-size: 13px;
  color: #333;
  text-align: right;
}
.MainDashboard .proASProjectArea .dashboardBox .emptyData {
  display: none;
}
.MainDashboard .proASProjectArea .dashboardBox .emptyData > i {
  width: 90px;
  height: 71px;
  background-image: url(../images/imgProAs.svg);
  background-size: 90px 70px;
  background-repeat: no-repeat;
  background-position: center;
}
.MainDashboard .proASProjectArea .dashboardBox .emptyData > .txtMessage {
  font-size: 13px;
  color: #2D3B4B;
}
.MainDashboard .proASProjectArea .dashboardBox.empty .scrollArea, .MainDashboard .proASProjectArea .dashboardBox.empty .tableWrap {
  display: none;
}
.MainDashboard .proASProjectArea .dashboardBox.empty .emptyData {
  display: flex;
  flex-direction: column;
}
.MainDashboard > .recentProcessArea > ul {
  height: calc(100% - 40px);
  overflow-y: auto;
}
.MainDashboard > .recentProcessArea > ul .txtName.CheckOut, .MainDashboard > .recentProcessArea > ul .txtName.CheckOutOther {
  padding-left: 25px;
}
.MainDashboard > .recentProcessArea > ul .txtName.CheckOut::before, .MainDashboard > .recentProcessArea > ul .txtName.CheckOutOther::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 18px;
  width: 25px;
  background-image: url("../images/iconProcessTree.svg");
  background-size: 117px 150px;
  background-position: -1px -40px;
}
.MainDashboard > .recentProcessArea > ul .txtName.CheckOut:before {
  background-position: -1px -54px;
}
.MainDashboard > .recentProcessArea > ul .txtName.CheckOutOther:before {
  background-position: -57px -54px;
}
.MainDashboard > .recentProcessArea ul.ulProcess > li:hover {
  cursor: pointer;
  background-color: #dce1e4;
}
.MainDashboard > .serviceModelInformationArea {
  padding: 10px 0px;
  border-left: 1px solid #e4e4e4;
  overflow: hidden;
}
.MainDashboard > .serviceModelInformationArea > .txtTitle {
  padding-left: 20px;
}
.MainDashboard > .serviceModelInformationArea > .serviceModelCountArea {
  position: relative;
  height: 80px;
  padding: 10px 20px;
  display: flex;
  flex-basis: auto;
  flex-wrap: nowrap;
  min-width: 420px;
}
.MainDashboard > .serviceModelInformationArea > .serviceModelCountArea .ulCount {
  display: flex;
  flex-shrink: 0;
}
.MainDashboard > .serviceModelInformationArea > .serviceModelCountArea .ulCount > li {
  display: inline-block;
  padding-right: 15px;
  text-align: center;
  flex-shrink: 0;
}
.MainDashboard > .serviceModelInformationArea > .serviceModelCountArea .ulCount > li .txtCount {
  font-weight: bold;
  font-size: 24px;
}
.MainDashboard > .serviceModelInformationArea > .serviceModelCountArea .ulReqCount {
  width: 100%;
  font-size: 11px;
  color: #666;
  text-align: right;
}
.MainDashboard > .serviceModelInformationArea > .serviceModelCountArea .ulReqCount > li {
  display: flex;
  justify-content: flex-end;
  padding: 2px 0;
}
.MainDashboard > .serviceModelInformationArea > .serviceModelCountArea .ulReqCount .txtCaption {
  position: relative;
  display: inline-block;
  max-width: 140px;
  min-width: 65px;
  padding-right: 10px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.MainDashboard > .serviceModelInformationArea > .serviceModelCountArea .ulReqCount .txtCaption::after {
  content: ": ";
  position: absolute;
  right: 0;
  top: 0;
}
.MainDashboard > .serviceModelInformationArea > .serviceModelCountArea .ulReqCount .txtCount {
  display: inline-block;
  width: 34px;
  text-align: right;
}
.MainDashboard > .serviceModelInformationArea > .serviceModelCountArea .ulReqCount .txtCount::after {
  content: var(--gae);
}
.MainDashboard > .serviceModelInformationArea > .txtTitleArea {
  display: flex;
  align-items: center;
  height: 25px;
  padding-left: 20px;
  margin: 5px 0px;
  font-size: 12px;
  background-color: #F1F5F8;
}
.MainDashboard > .serviceModelInformationArea > .scrollArea {
  height: calc(100% - 40px - 80px - 25px);
  padding-left: 20px;
  overflow-y: auto;
}
.MainDashboard > .serviceModelInformationArea .ulProcess > li .subInfoArea {
  right: 20px;
}
.MainDashboard > .proASProcessArea {
  position: relative;
  width: 100%;
  padding: 10px 20px;
  height: 260px;
  border-top: 1px solid #e4e4e4;
  background-color: #F1F5F8;
  overflow-x: auto;
}
.MainDashboard > .proASProcessArea::-webkit-scrollbar-thumb {
  background: #ccc;
}
.MainDashboard > .proASProcessArea::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}
.MainDashboard > .proASProcessArea::-webkit-scrollbar-thumb:active {
  background: #aaa;
}
.MainDashboard > .proASProcessArea > .ulProAS {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}
.MainDashboard > .proASProcessArea > .ulProAS > li {
  position: relative;
  flex-shrink: 0;
  padding: 16px 20px;
  width: calc((100% - 40px) / 5);
  height: 130px;
  color: #474E5D;
  background-color: #fff;
  min-width: 200px;
}
.MainDashboard > .proASProcessArea > .ulProAS > li > .icon {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  background-image: url("../images/iconProAS.svg");
  background-size: 45px 36px;
  background-repeat: no-repeat;
}
.MainDashboard > .proASProcessArea > .ulProAS > li > .txtServiceName {
  font-size: 12px;
}
.MainDashboard > .proASProcessArea > .ulProAS > li > .txtProcessName {
  display: -webkit-box;
  width: 100%;
  margin: 2px 0 5px 0;
  font-size: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.MainDashboard > .proASProcessArea > .ulProAS > li > .btn {
  padding: 0px 10px;
  height: 22px;
  color: #5574F7;
  font-size: 12px;
  border: 1px solid #5574F7;
  border-radius: 11px;
  background-color: #fff;
}
.MainDashboard > .proASProcessArea > .ulProAS > li .subInfoArea {
  position: absolute;
  bottom: 10px;
  left: 20px;
  font-size: 12px;
}
.MainDashboard > .proASProcessArea > .ulProAS > li .subInfoArea > span {
  display: inline-block;
  margin-right: 5px;
}
.MainDashboard > .proASProcessArea > .ulProAS > li.Update > .icon {
  background-position: 1px -5px;
}
.MainDashboard > .proASProcessArea > .ulProAS > li.Update > .btn {
  color: #5574F7;
  border: 1px solid #5574F7;
}
.MainDashboard > .proASProcessArea > .ulProAS > li.New > .icon {
  background-position: -30px -6px;
}
.MainDashboard > .proASProcessArea > .ulProAS > li.New > .btn {
  color: #EE6723;
  border: 1px solid #EE6723;
}

.MainDashboard > .recentProcessArea,
.MainDashboard > .serviceModelInformationArea {
  position: relative;
  float: left;
  display: inline-block;
  width: 50%;
  height: calc(100% - 220px);
  margin: 0;
  padding: 10px 20px;
}

.processArea {
  position: relative;
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  padding: 20px;
  background-color: #fff;
}
.processArea > .titleArea {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
  height: 30px;
}
.processArea > .titleArea > .txtTitle {
  margin: 0 0 0 5px;
  padding: 0;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: 100%;
  font-size: 16px;
}
.processArea > .titleArea > .processMenuArea {
  position: relative;
  display: inline-flex;
  padding: 2px 0 2px 8px;
}
.processArea > .titleArea > .processMenuArea .btnProcessMenuSmall {
  display: none;
}
.processArea > .titleArea > .processMenuArea > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.processArea > .titleArea > .processMenuArea > ul > li {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0 10px;
  padding: 0px 5px;
  border-radius: 10px;
  font-size: 12px;
  color: #999;
}
.processArea > .titleArea > .processMenuArea > ul > li:hover {
  cursor: pointer;
  background-color: #eee;
}
.processArea > .titleArea > .processMenuArea > ul > li::after {
  content: "";
  position: absolute;
  right: -20px;
  top: calc(50% - 3px);
  width: 5px;
  height: 5px;
  margin: 0 10px;
  border: solid #454e5f;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.processArea > .titleArea > .processMenuArea > ul > li:last-child {
  border-right: 0px;
}
.processArea > .titleArea > .processMenuArea > ul > li:last-child::after {
  display: none;
}
.processArea > .titleArea > .processMenuArea > ul > li.Selected {
  color: #333;
  font-weight: bold;
}
.processArea > .titleArea .divProcessAction {
  position: absolute;
  right: 0px;
  top: 5px;
}
.processArea > .titleArea .divProcessAction > .btn {
  position: relative;
  height: auto;
  padding: 4px 8px;
  margin-right: 3px;
  color: #454e5f;
  font-size: 12px;
  border: 1px solid #454e5f;
  border-radius: 15px;
  background-color: #fff;
}
.processArea .txtTitle > .txtNoArea {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  margin-right: 5px;
  background-color: #C3EFF8;
  border-radius: 15px;
}
.processArea .txtTitle > .txtNoArea > span {
  display: inline-flex;
  align-items: center;
}
.processArea .txtTitle > .txtNoArea > .btn {
  position: relative;
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 8px;
  line-height: 19px;
  font-size: 11px;
  border-radius: 10px;
}
.processArea .txtTitle > .txtNoArea > .btn + .btn {
  margin-left: 5px;
}
.processArea .txtTitle > .txtNoArea > .btn:before {
  content: "";
  width: 11px;
  position: absolute;
  left: 0px;
  top: 6px;
  height: 8px;
  margin: 0 3px 0 5px;
  background-repeat: no-repeat;
  background-position: 1px 0px;
  background-image: url("../images/iconProcessTitle.svg");
  background-size: 11px 23px;
}
.processArea .txtTitle > .txtNoArea > .btn.Compare {
  padding-left: 20px;
}
.processArea .txtTitle > .txtNoArea > .btn.Compare:before {
  background-position: 1px -14px;
}
.processArea .txtTitle > .txtNoArea .processStatus {
  margin: 0 10px 0 0;
  background-color: transparent;
}
.processArea .txtTitle > .txtNoArea.Design {
  background-color: rgba(28, 194, 172, 0.09);
}
.processArea .txtTitle > .txtNoArea.Design .txtNo {
  color: #1CC2AC;
}
.processArea .txtTitle > .txtNoArea.Design .btn {
  background-color: #1CC2AC;
}
.processArea .txtTitle > .txtNoArea.Design .processStatus {
  color: #1CC2AC;
  border: 1px solid #1CC2AC !important;
}
.processArea .txtTitle > .txtNoArea.Packaging {
  background-color: #E5E9FD;
}
.processArea .txtTitle > .txtNoArea.Packaging .txtNo {
  color: #5574F7;
}
.processArea .txtTitle > .txtNoArea.Packaging .btn {
  background-color: #5574F7;
}
.processArea .txtTitle > .txtNoArea.Packaging .processStatus {
  color: #5574F7 !important;
  border: 1px solid #5574F7 !important;
}
.processArea .txtTitle > .txtNoArea.Test {
  background-color: #FCE7DD;
}
.processArea .txtTitle > .txtNoArea.Test .txtNo {
  color: #EE6723;
}
.processArea .txtTitle > .txtNoArea.Test .btn {
  background-color: #EE6723;
}
.processArea .txtTitle > .txtNoArea.Test .processStatus {
  color: #EE6723 !important;
  border: 1px solid #EE6723 !important;
}
.processArea .txtTitle > .txtNoArea.Complete {
  background-color: #E8E9EB;
}
.processArea .txtTitle > .txtNoArea.Complete .txtNo {
  color: #6C717D;
}
.processArea .txtTitle > .txtNoArea.Complete .btn {
  background-color: #6C717D;
}
.processArea .txtTitle > .txtNoArea.Complete .processStatus {
  color: #6C717D !important;
  border: 1px solid #6C717D !important;
}
.processArea .txtTitle .txtNo {
  font-size: 16px;
  color: #2B92A8;
  margin-right: 5px;
}
.processArea .txtTitle .txtNo::after {
  content: " ㅣ ";
}
.processArea > .processWrap {
  width: 100%;
  height: calc(100% - 30px);
}
.processArea .toolbarArea {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 34px;
  background-color: #dce1e4;
  border-radius: 20px;
}
.processArea .toolbarArea > ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  padding: 0 4px;
  overflow: hidden;
}
.processArea .toolbarArea > ul > li {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 20px;
  font-size: 12px;
}
.processArea .toolbarArea > ul > li:hover {
  cursor: pointer;
  background-color: #fff;
}
.processArea .toolbarArea > ul > li.bar1 {
  margin: 0 5px;
  padding: 0;
  width: 1px;
  height: 10px;
  background-color: #a7b2c3;
}
.processArea .toolbarArea > ul > li > .txtName {
  display: none;
}
.processArea .toolbarArea > ul > li svg {
  display: none;
  width: 15px;
  height: 14px;
}
.processArea .toolbarArea > ul > li > .icon {
  width: 18px;
  height: 18px;
  background-position: -16px -6px;
}
.processArea .toolbarArea > ul > li.Function > .icon {
  background-position: -15px -41px;
}
.processArea .toolbarArea > ul > li.Program > .icon {
  background-position: -42px -41px;
}
.processArea .toolbarArea > ul > li.If > .icon {
  background-position: -68px -41px;
}
.processArea .toolbarArea > ul > li.Start > .icon {
  background-position: -105px -41px;
}
.processArea .toolbarArea > ul > li.End > .icon {
  background-position: -129px -41px;
}
.processArea .toolbarArea > ul > li.AlignLeft > .icon {
  background-position: -102px -6px;
}
.processArea .toolbarArea > ul > li.AlignCenterX > .icon {
  background-position: -129px -6px;
}
.processArea .toolbarArea > ul > li.AlignRight > .icon {
  background-position: -154px -6px;
}
.processArea .toolbarArea > ul > li.AlignTop > .icon {
  background-position: -16px -6px;
}
.processArea .toolbarArea > ul > li.AlignCenterY > .icon {
  background-position: -44px -6px;
}
.processArea .toolbarArea > ul > li.AlignBottom > .icon {
  background-position: -68px -6px;
}
.processArea .toolbarArea > ul > li.AlignRow > .icon {
  background-position: -183px -6px;
}
.processArea .toolbarArea > ul > li.AlignColumn > .icon {
  background-position: -207px -6px;
}
.processArea .toolbarArea > ul > li.Open > .icon {
  background-position: -14px -100px;
}
.processArea .toolbarArea > ul > li.Save > .icon {
  background-position: -67px -99px;
}
.processArea .toolbarArea > ul > li.SaveAs > .icon {
  background-position: -41px -99px;
}
.processArea .toolbarArea > ul > li.Load > .icon {
  background-position: -14px -99px;
}
.processArea .toolbarArea > ul > li.AddTable > .icon {
  background-position: -125px -99px;
}
.processArea .toolbarArea > ul > li.AddColumn > .icon {
  background-position: -154px -99px;
}
.processArea .toolbarArea > ul > li.RemoveColumn > .icon {
  background-position: -179px -99px;
}
.processArea .toolbarArea > ul > li.AddLink > .icon {
  background-position: -206px -97px;
}
.processArea .toolbarArea > ul > li.Print > .icon {
  background-position: -14px -131px;
}
.processArea .toolbarArea > ul > li.PrintSpec > .icon {
  width: 19px;
  height: 17px;
  background-position: -41px -131px;
}
.processArea .toolbarArea > ul > li.PrintIo > .icon {
  width: 19px;
  height: 17px;
  background-position: -68px -131px;
}
.processArea .toolbarArea > .searchArea {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 220px;
  height: 100%;
  padding-left: 15px;
  border: 2px solid #dce1e4;
  border-radius: 20px;
  background-color: #fff;
}
.processArea .toolbarArea > .searchArea:focus-within {
  border-color: #44c9cd;
}
.processArea .toolbarArea > .searchArea > input[type=text] {
  width: 100%;
  height: 100%;
}
.processArea .toolbarArea > .searchArea > input[type=text]:focus {
  color: #44c9cd;
}
.processArea .toolbarArea > .searchArea > .btnPrgSearch {
  position: relative;
  display: block;
  width: 40px;
  height: 100%;
  color: #454e5f;
}
.processArea .toolbarArea > .searchArea > .btnPrgSearch:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 8px;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.processArea .toolbarArea > .searchArea > .btnPrgSearch:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px;
  left: 21px;
  width: 2px;
  height: 5px;
  background-color: currentColor;
  transform: rotate(135deg);
}
.processArea .toolbarArea > .searchArea > .btnPrgSearch:hover {
  color: #44c9cd;
  cursor: pointer;
}
.processArea .toolbarArea > .btnToolbarMore {
  display: none;
  position: absolute;
  right: 0px;
  top: 0;
  display: inline-flex;
  align-items: center;
  height: 100%;
  width: 20px;
}
.processArea .toolbarArea > .btnToolbarMore > .icon {
  height: 13px;
  background-position: 3px 3px;
}
.processArea .toolbarArea > .btnToolbarMore:hover {
  cursor: pointer;
  background-color: #44c9cd;
}
.processArea .toolbarArea.More {
  display: none;
  position: absolute;
  right: 0;
  top: 30px;
  height: auto;
}
.processArea .toolbarArea.More > ul > li {
  display: flex;
  padding: 4px 8px;
}

.processMapArea {
  height: calc(100% - 34px);
  padding: 10px 0 0 0;
  overflow: auto;
}
.processMapArea > #sample {
  height: 100%;
  overflow: hidden;
  border: 1px solid #dce1e4;
  border-radius: 10px;
}
.processMapArea > #sample .designerToolbar {
  height: 100%;
  float: left;
  width: 100px;
  height: 100%;
  border-right: 1px solid #ebebeb;
  background-color: #fff;
}
.processMapArea > #sample .designerEditor {
  position: relative;
  float: left;
  width: calc(100% - 100px);
  height: 100%;
}
.processMapArea > #sample.ViewMode .designerToolbar {
  width: 0;
  display: none;
}
.processMapArea > #sample.ViewMode .designerEditor {
  width: 100%;
}

.packagingArea {
  height: calc(100% - 10px);
}
.packagingArea > .packagingInfoArea {
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 95px;
  padding: 12px 0px;
  border-bottom: 1px solid #333;
}
.packagingArea > .packagingSettingArea {
  position: relative;
  display: flex;
  height: calc(100% - 78px);
}
.packagingArea > .packagingSettingArea > .elementListArea .ulElementList > li {
  padding: 8px 0px 8px 0;
}
.packagingArea > .packagingSettingArea > .elementListArea .ulElementList > li > .txtName {
  width: calc(100% - 110px);
}
.packagingArea > .packagingSettingArea > .TreeControl.Element {
  display: none;
  width: 260px;
  height: 100%;
  flex-shrink: 0;
  border-right: 1px solid #eef2f4;
}
.packagingArea > .packagingSettingArea > .TreeControl.Element ul {
  display: block !important;
}

.packagingInfoArea > .ingState {
  width: 230px;
}
.packagingInfoArea > .ingState > h2 {
  display: flex;
  align-items: center;
  font-size: 21px;
}
.packagingInfoArea > .ingState > h2 > span {
  display: inline-block;
  padding-right: 5px;
}
.packagingInfoArea .btnMore {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  color: #aaa;
  border-radius: 50%;
  background-color: #e8e8e9;
}
.packagingInfoArea .btnMore:hover {
  cursor: pointer;
  transform: scale(1.15);
}
.packagingInfoArea .btnMore:after {
  border-top: none;
  border-bottom: 2px solid;
  top: 11px;
}
.packagingInfoArea .btnMore::before, .packagingInfoArea .btnMore::after {
  position: absolute;
  content: "";
  display: block;
  height: 1px;
  width: 8px;
  top: 6px;
  left: 6px;
  border-top: 2px solid;
  border-bottom: 2px solid;
}
.packagingInfoArea .btnPackaging {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0px 25px;
  border-radius: 25px;
  color: #fff;
  font-size: 16px;
  background-color: #44c9cd;
}
.packagingInfoArea .btnPackaging > span {
  color: #fff;
}
.packagingInfoArea .btnPackaging:hover {
  cursor: pointer;
  background-color: #26d6da;
}
.packagingInfoArea .btnPackaging.Start {
  padding: 0px 25px 0 50px;
}
.packagingInfoArea .btnPackaging.Start:before {
  content: "";
  position: absolute;
  left: 28px;
  top: 15px;
  width: 0px;
  height: 0px;
  border-width: 8px 8px 12px;
  border-style: solid;
  border-color: transparent transparent white;
  transform: rotate(90deg);
}
.packagingInfoArea .btnPackaging.Start:hover:before {
  animation: aniMoveLeft 0.5s infinite;
}
@keyframes aniMoveLeft {
  0% {
    left: 28px;
  }
  45% {
    left: 34px;
  }
  100% {
    left: 28px;
  }
}
.packagingInfoArea .btnPackaging.Ing {
  cursor: not-allowed;
  background-color: #a7b2c3;
}
.packagingInfoArea .btnPackaging.Ing:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  height: 28px;
  width: 28px;
  border: 3px solid rgba(255, 255, 255, 0.33);
  border-top-color: #fff;
  border-radius: 50%;
  animation: aniFadeIn 0.33s ease, aniRotation 0.66s linear 0s infinite;
}
.packagingInfoArea .txtDescription {
  padding: 4px 0;
  display: block;
  font-size: 12px;
  color: #a5a8ac;
}
.packagingInfoArea .txtDescription > span {
  position: relative;
  padding-right: 16px;
}
.packagingInfoArea .txtDescription > span + span:before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 1px;
  height: 100%;
  background-color: #edf1f3;
}

@keyframes aniFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes aniRotation {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
.stateInfoArea {
  display: inline-block;
  padding: 0 20px;
}
.stateInfoArea > .txtCaption {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-size: 12px;
  color: #a5a8ac;
}
.stateInfoArea > .txtCaption > span {
  display: inline-block;
  padding-right: 5px;
}
.stateInfoArea > .ulCount {
  display: flex;
}
.stateInfoArea > .ulCount > li {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
}
.stateInfoArea > .ulCount > li > span {
  display: inline-block;
  margin-right: 3px;
}
.stateInfoArea > .ulCount > li > .icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #dce1e4;
}
.stateInfoArea > .ulCount > li > .txtCaption {
  font-size: 12px;
  color: #878f98;
}
.stateInfoArea > .ulCount > li > .txtValue {
  font-size: 21px;
  font-weight: 400;
  color: #0f1f31;
}
.stateInfoArea > .ulCount > li.Edit > .icon {
  background-color: #6cd636;
}
.stateInfoArea > .ulCount > li.Add > .icon {
  background-color: #5381ff;
}
.stateInfoArea > .ulCount > li.Error > .icon {
  background-color: #f25f7e;
}
.stateInfoArea > .ulCount > li.Alert > .icon {
  background-color: #f9b542;
}
.stateInfoArea > .ulCount > li.Manual > .icon {
  width: 15px;
  height: 15px;
  background-image: url("../Images/icon.svg");
  background-position: -2px -151px;
  background-color: #fff;
  border-radius: 0;
}
.stateInfoArea.Error .btnMore {
  background-color: #fce0e6;
}

.stateInfoArea.Error .txtCaption,
.stateInfoArea.Error .btnMore {
  color: #f25f7e;
}

.elementListArea .scrollArea {
  height: calc(100% - 30px);
  overflow-y: auto;
}

.packagingSettingArea > .elementListArea {
  width: calc(100% - 300px);
  height: 100%;
  border-right: 1px solid #333;
}
.packagingSettingArea > .elementListArea .headerArea {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  background-color: #f1f5f8;
  overflow: hidden;
}
.packagingSettingArea > .elementListArea .headerArea > div {
  display: flex;
  height: 100%;
  padding: 3px 0;
}
.packagingSettingArea > .elementListArea .headerArea .txtCaption {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-left: 10px;
  font-size: 12px;
  color: #1a2a3c;
}
.packagingSettingArea > .elementListArea .headerArea > .divLeft {
  padding-left: 5px;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight {
  position: relative;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight .btn {
  width: 30px;
  height: 100%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: transparent;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight .btn + .btn {
  margin-left: 0;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight .btn:hover {
  cursor: pointer;
  background-color: #e0e0e0;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight .btn > i {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-image: url("../images/icon.svg");
}
.packagingSettingArea > .elementListArea .headerArea > .divRight .btn.QueryProcessElement {
  position: absolute;
  right: 5px;
  top: 0;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight .btn.QueryProcessElement > i {
  background-position: -100px -148px;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight .btn.DelElement > i {
  background-position: -66px -148px;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight .btn.AddProcessElement > i {
  background-position: -31px -148px;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight > .queryArea {
  position: relative;
  width: 30px;
  height: 100%;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight > .queryArea:hover > input[type=text] {
  display: block;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight > .queryArea > input[type=text] {
  display: none;
  position: absolute;
  right: 0px;
  top: -3px;
  height: 30px;
  width: 160px;
  margin-left: 10px;
  padding: 0 10px;
  font-size: 12px;
  border: 2px solid #545454;
  border-radius: 15px;
}
.packagingSettingArea > .elementListArea .headerArea > .divRight > .queryArea > input[type=text]:focus {
  color: #000;
  font-weight: bold;
  border: 1px solid #454e5f;
}

.ERDiagramWrap {
  width: 100%;
  height: calc(100% - 30px);
}

.ERDiagramArea {
  height: calc(100% - 30px);
  padding: 10px 0 0 0;
  overflow: auto;
}
.ERDiagramArea > #sample2 {
  height: 100%;
  overflow: hidden;
  border: 1px solid #dce1e4;
  border-radius: 10px;
  background-color: #f9f9f9;
}
.ERDiagramArea > #sample2 .designerEditor {
  position: relative;
  float: left;
  width: calc(100% - 100px);
  height: 100%;
}

.ulElementList {
  height: calc(100% - 30px);
  padding: 0px 20px 10px 20px;
  overflow-y: auto;
}
.ulElementList > li {
  position: relative;
  padding: 8px 10px 8px 0;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.ulElementList > li > .txtType {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #0f1f31;
}
.ulElementList > li > .txtType > i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #dce1e4;
  background-image: none;
}
.ulElementList > li > .txtType > span {
  display: inline-block;
  margin-right: 5px;
}
.ulElementList > li .txtNameGroup {
  display: flex;
  align-items: center;
}
.ulElementList > li .txtName {
  position: relative;
  padding: 3px 0;
  width: 100%;
  font-size: 16px;
  color: #0f1f31;
}
.ulElementList > li .txtName > span + span {
  font-size: 12px;
}
.ulElementList > li .txtName > span + span:before {
  content: " - ";
}
.ulElementList > li > .txtDate {
  position: absolute;
  right: 10px;
  top: calc(50% - 12px);
  font-size: 12px;
  color: #a7b2c3;
}
.ulElementList > li > .txtRemark {
  font-size: 12px;
  color: #a7b2c3;
}
.ulElementList > li > .btnDel {
  opacity: 0;
  position: absolute;
  right: 10px;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.ulElementList > li > .btnDel > i {
  display: inline-block;
  width: 15px;
  height: 15px;
}
.ulElementList > li > .btnDel > i:before {
  transform: rotate(45deg);
}
.ulElementList > li > .btnDel > i:after {
  transform: rotate(-45deg);
}
.ulElementList > li > .btnDel:hover {
  cursor: pointer;
  background-color: #FCE0E6;
}
.ulElementList > li:hover {
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}
.ulElementList > li:hover > .txtDate {
  right: 35px;
}
.ulElementList > li:hover > .btnDel {
  opacity: 1;
}
.ulElementList > li.Add > .txtType > i {
  background-color: #5381ff;
}
.ulElementList > li.Edit > .txtType > i {
  background-color: #6cd636;
}
.ulElementList > li.Error > .txtType > i {
  background-color: #f25f7e;
}
.ulElementList > li.Error > .txtName > span {
  color: #f25f7e;
}
.ulElementList > li.Alert > .txtType > i {
  background-color: #f9b542;
}
.ulElementList > li.Dis > .txtType > i {
  position: relative;
  border-radius: 0;
  background-color: #454e5f;
}
.ulElementList > li.Dis > .txtType > i:before {
  content: "";
  position: absolute;
  top: -3px;
  left: 2px;
  width: 2px;
  height: 5px;
  border-radius: 3px;
  border: 1px solid #454e5f;
}
.ulElementList > li.Dis > .txtType > i:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: #fff;
}
.ulElementList > li.Manual .txtName {
  padding-left: 20px;
}
.ulElementList > li.Manual .txtName:before {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0;
  top: 7px;
  background-image: url("../Images/icon.svg");
  background-position: -2px -151px;
}

.ulElementList > li > .btnDel > i:before,
.ulElementList > li > .btnDel > i:after {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 2px;
  height: 12px;
  background-color: #F25F7E;
  border-radius: 1px;
}

.packagingSettingArea > .elementAddArea {
  flex-shrink: 0;
  width: 300px;
  height: 100%;
}
.packagingSettingArea > .elementAddArea .txtSubTitle:before {
  position: absolute;
  content: "";
  top: 0px;
  left: 0px;
  width: 20px;
  height: 30px;
}
.packagingSettingArea > .elementAddArea .txtSubTitle:after {
  position: absolute;
  content: "";
  top: 13px;
  left: 5px;
  width: 0;
  height: 0;
  border: 3px solid;
  border-color: #454e5f #454e5f transparent transparent;
  transform: rotate(45deg);
}
.packagingSettingArea > .elementAddArea > .inputGroup {
  height: calc(100% - 30px - 40px);
  padding: 20px;
  overflow-y: auto;
}
.packagingSettingArea > .elementAddArea > .inputGroup > dl {
  margin-top: 0;
}
.packagingSettingArea > .elementAddArea > .btnArea {
  padding-bottom: 10px;
  height: 50px;
  text-align: center;
}
.packagingSettingArea > .elementAddArea > .btnArea > .btn {
  height: 32px;
  min-width: 80px;
  font-size: 13px;
}
.packagingSettingArea > .elementAddArea.Extension {
  width: 50%;
  margin-left: -1px;
  background-color: #fff;
  border-left: 1px solid #333;
}
.packagingSettingArea > .elementAddArea.Extension .txtSubTitle:after {
  transform: rotate(225deg);
  left: 13px;
}
.packagingSettingArea > .elementAddArea.Extension .Script > dl {
  display: inline-block;
  width: 33%;
  margin: 10px -4px 0 0;
}
.packagingSettingArea > .elementAddArea.Extension .Script > dl:last-child {
  width: 100%;
}
.packagingSettingArea > .elementAddArea.Extension .Script > dl:last-child textarea {
  height: 200px;
}
.packagingSettingArea .txtSubTitle {
  position: relative;
  display: flex;
  align-items: center;
  height: 30px;
  padding-left: 25px;
  font-size: 12px;
  font-weight: normal;
  color: #333;
  background-color: #f1f5f8;
}
.packagingSettingArea > .packaingLoading {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 10px, rgba(240, 240, 240, 0.8) 10px, rgba(240, 240, 240, 0.8) 20px);
}
.packagingSettingArea > .packaingLoading .progressBar {
  position: absolute;
  left: 0;
  top: -5px;
  width: 100%;
  height: 15px;
}
.packagingSettingArea > .packaingLoading .progressBar > progress {
  margin: 0;
  width: 100%;
  height: 100%;
  background-color: #f2f3f7;
}
.packagingSettingArea > .packaingLoading .progressBar > progress::-webkit-progress-bar {
  background-color: #f2f3f7;
}
.packagingSettingArea > .packaingLoading .progressBar > progress::-webkit-progress-value {
  background-color: #5381ff;
}
.packagingSettingArea > .packaingLoading .progressBar > span {
  position: absolute;
  left: 10px;
  top: 4px;
  font-size: 11px;
  color: #fff;
}
.packagingSettingArea > .packaingLoading section > p {
  padding: 10px 0 20px 0;
  color: #2d3b4b;
  font-size: 21px;
  text-align: center;
}

.processLoading {
  position: relative;
  background: #dce5ff;
  width: 400px;
  height: 4px;
  overflow: hidden;
}
.processLoading > span {
  position: absolute;
  background: #fff;
  width: 120px;
  height: 4px;
}
.processLoading > .dot1 {
  background-color: #f25f7e;
  animation: aniProcessLoading 2s infinite;
}
.processLoading > .dot2 {
  background-color: #f9b542;
  animation: aniProcessLoading 2s 0.5s infinite;
}
.processLoading > .dot3 {
  background-color: #5381ff;
  animation: aniProcessLoading 2s 1s infinite;
}

@keyframes aniProcessLoading {
  from {
    left: 0;
  }
  to {
    left: 400px;
  }
}
.popup.packagingError {
  justify-content: center;
}

.packagingError .txtMessageBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 0 30px;
  height: 40px;
  color: #fff;
  background-color: #a7b2c3;
  border-radius: 20px;
}
.packagingError .txtMessageBox.Error {
  background-color: #f25f7e;
}
.packagingError .txtMessageBox.Alert {
  background-color: #f9b542;
}
.packagingError .processTitleArea {
  padding: 10px 0;
  height: 65px;
  border-bottom: 1px solid #dce1e4;
}
.packagingError .processTitleArea > .txtTitle {
  color: #f25f7e;
  font-size: 16px;
}
.packagingError .processTitleArea > .txtTitle > .status {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  border-radius: 15px;
  background-color: #fce0e6;
}
.packagingError .processTitleArea > .txtDescription {
  padding: 4px 10px;
  font-size: 12px;
  color: #999;
}

.popup.packagingError > .contentsArea > .errorMsgArea {
  padding: 10px 0;
  height: calc(100% - 80px);
  font-size: 12px;
  overflow-y: auto;
}

.stateInfoArea.ErrorList {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
  border-left: 0;
  border-bottom: 1px solid #dce1e4;
}

.popup.packagingHisroty {
  max-width: 1000px;
  max-height: 600px;
}

.packagingHisroty .contentsArea {
  display: flex;
  width: calc(100% + 60px);
  margin: 0 -30px;
}
.packagingHisroty .historyArea {
  width: 250px;
  border-right: 1px solid #edf1f4;
}
.packagingHisroty .historyArea > .ingInfo {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 15px;
}
.packagingHisroty .historyArea > .ingInfo > .txtNo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 40px;
  margin-right: 5px;
  color: #44c9cd;
  font-size: 21px;
  background-color: #c3eff8;
  border-radius: 15px;
}
.packagingHisroty .historyArea .txtDescription {
  font-size: 12px;
  color: #a7b2c3;
}
.packagingHisroty .historyArea .ulProcessHistory {
  height: calc(100% - 60px);
  overflow-y: auto;
}
.packagingHisroty .historyArea .ulProcessHistory > li {
  padding: 15px 0 15px 25px;
}
.packagingHisroty .historyArea .ulProcessHistory > li.LastProcess .txtTitle {
  position: relative;
  padding-left: 12px;
  font-weight: 400;
}
.packagingHisroty .historyArea .ulProcessHistory > li.LastProcess .txtTitle:before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background-color: #44c9cd;
  border-radius: 50%;
}
.packagingHisroty .historyArea .ulProcessHistory > li:hover {
  cursor: pointer;
  background-color: #eef2f4;
}
.packagingHisroty .historyArea .ulProcessHistory > li.Selected {
  background-color: #ecf9fa;
}
.packagingHisroty .elementListArea {
  width: calc(100% - 250px);
}
.packagingHisroty .elementListArea > .sortARea {
  position: relative;
  display: flex;
  height: 30px;
  background-color: #edeff5;
}
.packagingHisroty .elementListArea > .sortARea > select {
  display: inline-flex;
  padding: 0 10px;
  background-color: #edeff5;
  height: 100%;
  min-width: 100px;
  color: #0f1f31;
  font-size: 13px;
}
.packagingHisroty .elementListArea > .sortARea > .checkGroup {
  position: absolute;
  right: 20px;
  top: 4px;
}
.packagingHisroty .elementListArea > .sortARea > .btnSort {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 100%;
  border-left: 1px solid #fff;
}
.packagingHisroty .elementListArea > .sortARea > .btnSort:hover {
  cursor: pointer;
  background-color: #dce1e4;
}
.packagingHisroty .elementListArea > .sortARea > .btnSort:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 13px;
  background-image: url("../images/iconToolbar.png");
  background-position: -13px -76px;
  left: 8px;
  top: 9px;
}
.packagingHisroty .elementListArea > .sortARea > .btnSort.Asend:before {
  background-position: -47px -76px;
}
.packagingHisroty .elementListArea .ulElementList {
  height: calc(100% - 25px);
}

.packagingHisroty .elementListArea .ulElementList > li.Add .txtName,
.packagingHisroty .elementListArea .ulElementList > li.Add .txtType {
  color: #5381ff;
}

.packagingHisroty .elementListArea .ulElementList > li.Edit .txtName,
.packagingHisroty .elementListArea .ulElementList > li.Edit .txtType {
  color: #6cd636;
}

.uploadPkgArea {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uploadPkgArea > .contentArea {
  padding-top: 100px;
  width: 420px;
  height: 420px;
  background-color: #FBFBFC;
  border-radius: 50%;
  text-align: center;
}
.uploadPkgArea > .contentArea > .img {
  width: 80px;
  height: 80px;
  background-image: url("../images/imgPkgStart.svg");
  background-size: 72px 58px;
  background-position: center;
}
.uploadPkgArea > .contentArea > .txtDescription {
  font-size: 14px;
}
.uploadPkgArea > .contentArea > .txtTitle {
  margin: 10px 0;
  font-size: 24px;
}
.uploadPkgArea > .contentArea > button {
  display: none;
  margin: 10px 0;
  padding: 8px 26px;
  color: #fff;
  font-size: 16px;
  border: 1px solid #44c9cd;
  border-radius: 20px;
  background-color: #44c9cd;
}
.uploadPkgArea > .contentArea .processLoading {
  display: none;
  margin: 10px 0;
}
.uploadPkgArea > .contentArea .stateInfoArea.uploadResult {
  display: none;
  padding: 10px 20px;
  border: 1px solid #a7b2c3;
  border-radius: 10px;
  background-color: #fff;
}
.uploadPkgArea > .contentArea.Start button {
  display: inline-block;
}
.uploadPkgArea > .contentArea.Ing .processLoading {
  display: block;
  margin-left: 10px;
}
.uploadPkgArea > .contentArea.End {
  padding-top: 0px;
  width: auto;
  height: auto;
  background-color: transparent;
}
.uploadPkgArea > .contentArea.End .stateInfoArea.uploadResult {
  display: block;
}
.uploadPkgArea > .contentArea.End > .img {
  background-image: url("../images/imgPkgEnd.svg");
  background-size: 69px 66px;
}

.Page.NewProcess {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 0px);
  height: calc(100% - 0px);
  padding: 40px;
  background-color: #fff;
  z-index: 3;
  overflow: hidden;
}
.Page.NewProcess > section {
  position: relative;
  display: inline-block;
  height: calc(100% - 50px);
  width: 50%;
  color: #454e5f;
  overflow-y: auto;
}
.Page.NewProcess > section > h2 {
  height: 50px;
  font-size: 24px;
  font-weight: bold;
}
.Page.NewProcess > section > h3 {
  font-size: 18px;
  font-weight: normal;
}
.Page.NewProcess > section > .txtDescription {
  font-size: 12px;
  opacity: 0.7;
}
.Page.NewProcess > section.processInfoArea {
  padding-right: 40px;
  border-right: 1px solid #dce1e4;
}
.Page.NewProcess > section.FunctionArea {
  padding: 45px 0 0 30px;
}
.Page.NewProcess > section.FunctionArea .ulFunctionList {
  max-height: calc(100% - 100px);
}
.Page.NewProcess > section.FunctionArea .ulFunctionList > li {
  display: flex;
  align-items: center;
}
.Page.NewProcess > section.FunctionArea .ulFunctionList .inputGroup > .btnDel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 10px;
  width: 23px;
  height: 23px;
  border: 1px solid #EE6723;
  border-radius: 50%;
}
.Page.NewProcess > section.FunctionArea .ulFunctionList .inputGroup > .btnDel > i {
  display: inline-block;
  width: 13px;
  height: 1px;
  background-color: #EE6723;
}
.Page.NewProcess > section.FunctionArea .ulFunctionList .inputGroup > .btnDel:hover {
  background-color: #EE6723;
  cursor: pointer;
}
.Page.NewProcess > section.FunctionArea .ulFunctionList .inputGroup > .btnDel:hover > i {
  background-color: #fff;
}
.Page.NewProcess > section.FunctionArea input {
  width: calc(49% - 20px);
  margin-right: 10px;
}
.Page.NewProcess > section.FunctionArea input:first-child {
  width: 50px;
}
.Page.NewProcess > section.FunctionArea .btn {
  position: relative;
  float: right;
  margin: 20px;
  height: auto;
  padding: 6px 16px 6px 25px;
  color: #454e5f;
  font-size: 12px;
  border: 1px solid #454e5f;
  background-color: #fff;
}
.Page.NewProcess > section.FunctionArea .btn:before {
  left: 15px;
  top: 9px;
  width: 1px;
  height: 11px;
}
.Page.NewProcess > section.FunctionArea .btn:after {
  left: 10px;
  top: 14px;
  width: 11px;
  height: 1px;
}
.Page.NewProcess > .btnArea {
  width: 100%;
  padding-top: 10px;
  height: 60px;
  border-top: 1px solid #eef2f4;
  text-align: center;
}

.Page.NewProcess > section.FunctionArea .btn:before,
.Page.NewProcess > section.FunctionArea .btn:after {
  content: "";
  position: absolute;
  background-color: #454e5f;
}

.Deploy {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 1024px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  z-index: 7;
  overflow: hidden;
}
.Deploy > .processArea {
  position: relative;
  padding: 0;
  border-right: 1px solid #333;
}
.Deploy > .processArea > .queryArea {
  padding: 10px;
  display: flex;
  font-size: 12px;
  justify-content: space-between;
}
.Deploy > .processArea > .queryArea .queryItemBox {
  display: flex;
  flex-wrap: wrap;
}
.Deploy > .processArea > .queryArea .queryItemBox > .worker {
  width: calc(100% - 190px - 280px - 100px);
}
.Deploy > .processArea > .queryArea .queryItemBox > .worker > dt {
  min-width: unset;
}
.Deploy > .processArea > .queryArea .checkboxControl {
  flex-shrink: 0;
  width: 100px;
  padding: 0px 0px 10px 5px;
}
.Deploy > .processArea > .queryArea .queryInput {
  display: flex;
  width: calc(100% - 190px - 100px - 280px);
}
.Deploy > .processArea > .queryArea input[type=text]:focus {
  border: 1px solid #44c9cd;
}
.Deploy > .processArea > .queryArea dl {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0px 5px 10px 10px;
  margin: 0;
}
.Deploy > .processArea > .queryArea dl > dt {
  flex-shrink: 0;
  width: 65px;
}
.Deploy > .processArea > .queryArea dl > dd {
  height: 100%;
  width: 100%;
  display: inline-flex;
  align-items: center;
}
.Deploy > .processArea > .queryArea button {
  width: 70px;
  height: 70px;
  padding: 0 10px;
  flex-shrink: 0;
  color: #fff;
  background-color: #44c9cd;
}
.Deploy > .processArea > .queryArea button:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.1) 3px 5px 5px;
}
.Deploy > .processArea > .titleBar {
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background-color: #EDEFF5;
}
.Deploy > .processArea > .titleBar > .checkboxControl {
  width: 100%;
}
.Deploy > .processArea > .titleBar > .btnConfirmCancel:before {
  width: 13px;
  background-position: -79px -327px;
}
.Deploy > .processArea > .titleBar > .btnConfirm {
  position: relative;
  padding-left: 12px;
}
.Deploy > .processArea > .titleBar > .btnConfirm:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #454e5f;
  border-bottom: 2px solid #454e5f;
  transform: rotate(45deg);
}
.Deploy > .processArea > .processListArea {
  height: calc(100% - 60px - 75px);
  width: 100%;
  overflow-y: auto;
}
.Deploy > .processArea > .processListArea li {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 10px 40px;
  font-size: 12px;
  color: #999;
  border: 2px solid #fff;
}
.Deploy > .processArea > .processListArea li.Selected {
  border: 2px solid #333;
}
.Deploy > .processArea > .processListArea li:hover {
  cursor: pointer;
  background-color: #f1f1f1;
}
.Deploy > .processArea > .processListArea li > .checkboxControl {
  position: absolute;
  left: 20px;
  top: 12px;
}
.Deploy > .processArea > .processListArea li > div > .txtTitle {
  font-size: 16px;
  color: #000;
}
.Deploy > .processArea > .processListArea li > div .txtPackingYearMonth {
  display: inline-flex;
  margin: 0 8px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 20px;
  background-color: #eef2f4;
}
.Deploy > .processArea > .processListArea li .iconStatus {
  margin-left: 5px;
  padding: 2px 6px;
  color: #4d8dff;
  border: 1px solid transparent;
  background-color: rgba(77, 141, 255, 0.2117647059);
  border-radius: 10px;
}
.Deploy > .processArea > .processListArea li .iconStatus.Confirm:hover {
  border-color: #4d8dff;
  background-color: transparent;
}
.Deploy > .processArea > .processListArea li .iconStatus.Publish {
  color: #0f2438;
  background-color: #e6e2e0;
}
.Deploy > .processArea > .processListArea li .iconStatus.Publish:hover {
  cursor: none;
}
.Deploy > .siteArea {
  position: relative;
  font-size: 12px;
}
.Deploy > .siteArea > .checkboxControl {
  margin: 10px 10px 10px 20px;
  font-weight: bold;
}
.Deploy > .siteArea > .siteListArea {
  height: calc(100% - 35px - 50px - 45px);
  padding: 0 20px;
  overflow-y: auto;
}
.Deploy > .siteArea > .siteListArea li {
  position: relative;
  padding: 5px 0;
  display: flex;
  align-items: center;
}
.Deploy > .siteArea > .siteListArea li .checkboxControl > input[type=checkbox]:checked + label {
  color: #44c9cd;
}
.Deploy > .siteArea > .btnArea {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}
.Deploy > .siteArea > .btnArea > .btn {
  padding: 0 15px;
}
.Deploy > .processHistoryArea {
  position: relative;
  width: 100%;
  font-size: 12px;
  border-top: 1px solid #333;
  background-color: #f9f9f9;
}
.Deploy > .processHistoryArea > .titleArea {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
}
.Deploy > .processHistoryArea .btnArea > button {
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  border-radius: 15px;
  border: 1px solid #000;
  background-color: transparent;
}
.Deploy > .processHistoryArea .btnArea > button:hover {
  cursor: pointer;
  color: #fff;
  background-color: #000;
}
.Deploy > .processHistoryArea > .historyArea {
  height: calc(100% - 40px);
  overflow-y: auto;
}
.Deploy > .processHistoryArea > .historyArea table {
  width: 100%;
  border: 0px;
  border-spacing: 0px;
}
.Deploy > .processHistoryArea > .historyArea table th {
  height: 30px;
  background-color: #CAD9E3;
}
.Deploy > .processHistoryArea > .historyArea table td {
  padding: 4px 0;
  height: 35px;
  text-align: center;
}
.Deploy > .processHistoryArea > .historyArea table td .status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 15px;
  background-color: #ebebeb;
}
.Deploy > .processHistoryArea > .historyArea table td > button {
  display: none;
  padding: 3px 6px;
  font-size: 11px;
  color: #F25F7E;
  border: 1px solid #F25F7E;
  border-radius: 15px;
  background-color: transparent;
}
.Deploy > .processHistoryArea > .historyArea table td > button:hover {
  cursor: pointer;
  color: #fff;
  background-color: #F25F7E;
}
.Deploy > .processHistoryArea > .historyArea table tr.Error > td {
  color: #F25F7E;
}
.Deploy > .processHistoryArea > .historyArea table tr.Error td .status {
  background-color: #F8DAE0;
}
.Deploy > .processHistoryArea > .historyArea table tr.Error td > button {
  display: inline-block;
}

.Deploy > .processArea > .queryArea .queryItemBox > .packagingYearMonth,
.Deploy > .processArea > .queryArea .queryItemBox > .function {
  width: 190px;
}

.Deploy > .processArea > .queryArea .queryItemBox > .date,
.Deploy > .processArea > .queryArea .queryItemBox > .releaseServiceModel {
  width: 280px;
}

.Deploy > .processArea > .queryArea input[type=text],
.Deploy > .processArea > .queryArea select {
  padding: 0 4px;
  margin: 0 5px;
  height: 100%;
  width: 100%;
  border: 1px solid #ccc;
}

.Deploy > .processArea > .titleBar > .btnConfirm,
.Deploy > .processArea > .titleBar > .btnConfirmCancel,
.Deploy > .processArea > .titleBar > .btnDownLoad {
  display: inline-flex;
  align-items: center;
  opacity: 0.5;
  font-size: 12px;
  flex-shrink: 0;
  margin-left: 15px;
}

.Deploy > .processArea > .titleBar > .btnConfirmCancel:before,
.Deploy > .processArea > .titleBar > .btnDownLoad:before {
  content: "";
  display: inline-block;
  margin-right: 4px;
  width: 10px;
  height: 15px;
  background-image: url("../images/icon.svg");
  background-position: -11px -327px;
  background-repeat: no-repeat;
}

.Deploy > .processArea > .titleBar > .btnConfirm:hover,
.Deploy > .processArea > .titleBar > .btnConfirmCancel:hover,
.Deploy > .processArea > .titleBar > .btnDownLoad:hover {
  cursor: pointer;
  opacity: 1;
}

main > .RightArea {
  position: relative;
  flex-shrink: 0;
  width: 0px;
  opacity: 0;
  padding: 0px;
  overflow: hidden;
  height: 100%;
  border-left: 1px solid #333;
}

main > .RightArea > h2,
main > .RightArea > div > h2 {
  height: 35px;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 16px;
}

main > .RightArea > .btnClose {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

main > .RightArea > .btnClose:hover {
  cursor: pointer;
  transform: rotate(180deg);
  transition: ease-in 0.3s;
  background-color: #f8efe9;
}

main > .RightArea > .btnClose:hover > span {
  background-color: #ff6a00 !important;
}

main > .RightArea > .btnClose > .bar1,
main > .RightArea > .btnClose > .bar2 {
  position: absolute;
  width: 15px;
  height: 1px;
  background-color: #454e5f;
  transition: ease-in 0.3s;
}

main > .RightArea > .btnClose > .bar1 {
  transform: rotate(45deg);
}

main > .RightArea > .btnClose > .bar2 {
  transform: rotate(-45deg);
}

main > .RightArea > .propertyArea {
  height: calc(100% - 35px);
  overflow-y: auto;
  overflow-x: hidden;
}

main > .RightArea > .propertyArea > dl {
  position: relative;
}

main > .RightArea > .propertyArea > dl > dt {
  padding-bottom: 5px;
  font-size: 11px;
  color: #666;
}

main > .RightArea > .propertyArea > dl.Non > dt {
  position: relative;
  padding-left: 15px;
}

main > .RightArea > .propertyArea > dl.Non > dt:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 9px;
  transform: rotate(45deg);
  border-right: 2px solid #fb792a;
  border-bottom: 2px solid #fb792a;
}

main > .RightArea > .propertyArea > dl > dd {
  position: relative;
  border-bottom: 1px solid #eef2f4;
}

main > .RightArea > .propertyArea > dl > dd input,
main > .RightArea > .propertyArea > dl > dd select {
  height: 100%;
  width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 0px;
}

main > .RightArea > .propertyArea > dl > dd input[type=checkbox] {
  width: auto;
}

main > .RightArea > .propertyArea > dl > dd textarea {
  height: 100%;
  min-height: 100px;
  width: 100%;
  padding: 4px 8px;
  border: 0px;
}

main > .RightArea > .propertyArea > dl > dd input:focus,
main > .RightArea > .propertyArea > dl > dd textarea:focus {
  margin-bottom: -1px;
  color: #44c9cd;
  border-bottom: 2px solid #44c9cd;
}

main > .RightArea > .propertyArea > dl > dd select option:checked,
main > .RightArea > .propertyArea > dl > dd select option:hover {
  background: #44c9cd;
  color: #fff;
  font-size: 13px;
}

main > .RightArea > .propertyArea button {
  position: relative;
  display: inline-block;
  padding: 4px 10px;
  text-align: center;
  color: #000;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 20px;
  overflow: hidden;
}

main > .RightArea > .propertyArea button:hover {
  cursor: pointer;
  color: #fff;
  background-color: #000;
}

main > .RightArea > .propertyArea button:after {
  position: absolute;
  content: "";
  width: 1px;
  height: 1px;
  left: 50%;
  top: 20%;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}

main > .RightArea > .propertyArea button:active:after {
  transform: scale(200);
  transition: all 0.3s;
}

.messagePanel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: #fff;
}

.messagePanel > .messagePanelArea {
  position: relative;
  height: calc(100% - 100px);
  overflow: auto;
}

.messagePanel > .messagePanelArea > .txtDateArea {
  position: relative;
  width: 100%;
  height: 30px;
  text-align: center;
}

.messagePanel > .messagePanelArea > .txtDateArea:before,
.messagePanel > .messagePanelArea > .txtDateArea:after {
  content: "";
  width: 20%;
  height: 1px;
  position: absolute;
  top: 45%;
  background-color: #a7b2c3;
}

.messagePanel > .messagePanelArea > .txtDateArea:before {
  left: 0;
}

.messagePanel > .messagePanelArea > .txtDateArea:after {
  right: 0;
}

.messagePanel > .messagePanelArea > .txtDateArea > span {
  display: inline-block;
  padding: 4px 10px;
  color: #858d96;
  font-size: 12px;
}

.messagePanel > .messagePanelArea > ul > li {
  position: relative;
  padding: 4px 10px 4px 50px;
  min-height: 45px;
}

.messagePanel > .messagePanelArea > ul > li > .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0px;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: #fff;
  border-radius: 50%;
  background-image: url("../images/iconMessage.svg");
  background-position: 100px 100px;
  background-color: #44c9cd;
  background-repeat: no-repeat;
}

.messagePanel > .messagePanelArea > ul > li > .icon.User {
  background-color: #0f1f31;
  background-position: 12px 14px;
}

.messagePanel > .messagePanelArea > ul > li > .icon.System {
  background-color: #a7b2c3;
  background-position: -25px 12px;
}

.messagePanel > .messagePanelArea > ul > li > .icon.Important {
  background-color: #EE6723 !important;
}

.messagePanel > .messagePanelArea > ul > li > .txtDescription {
  font-size: 11px;
  color: #a7b2c3;
}

.messagePanel > .messagePanelArea > ul > li > .txtMessage {
  font-size: 12px;
  color: #333;
}

.messagePanel > .messageInputArea {
  position: relative;
  height: 70px;
  padding: 5px 0;
}

.messagePanel > .messageInputArea .lbCheckbox,
.messagePanel > .messageInputArea p {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}

.messagePanel > .messageInputArea .lbCheckbox {
  position: absolute;
  top: 5px;
  right: 10px;
  color: #858d96;
}

.messagePanel > .messageInputArea .lbCheckbox > span {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  width: 17px;
  height: 17px;
  border: 1px solid #dce1e4;
  border-radius: 2px;
}

.messagePanel > .messageInputArea .lbCheckbox > span:before,
.messagePanel > .messageInputArea .lbCheckbox > span:after {
  content: "";
  position: absolute;
  width: 3px;
}

.messagePanel > .messageInputArea .lbCheckbox > span:before {
  top: 5px;
  left: 4px;
  height: 8px;
  transform: rotate(-45deg);
}

.messagePanel > .messageInputArea .lbCheckbox > span:after {
  top: 0px;
  left: 11px;
  height: 14px;
  transform: rotate(45deg);
}

.messagePanel > .messageInputArea .lbCheckbox:hover > span:before,
.messagePanel > .messageInputArea .lbCheckbox:hover > span:after {
  background-color: #dce1e4;
}

.messagePanel > .messageInputArea .hiddenCheck:checked + .lbCheckbox > span:before,
.messagePanel > .messageInputArea .hiddenCheck:checked + .lbCheckbox > span:after {
  background-color: #44c9cd;
}

.messagePanel > .messageInputArea > .inputArea {
  display: flex;
  align-items: center;
  height: 30px;
}

.messagePanel > .messageInputArea input[type=text] {
  padding: 0 5px;
  width: calc(100% - 50px);
  height: 100%;
  border: 1px solid #dce1e4;
}

.messagePanel > .messageInputArea input[type=text]:focus {
  color: #44c9cd;
  border: 1px solid #44c9cd;
}

.messagePanel > .messageInputArea button {
  height: 100%;
  color: #44c9cd;
  font-size: 12px;
  background-color: #fff;
  border: 1px solid #44c9cd;
}

.messagePanel > .messageInputArea button:hover {
  cursor: pointer;
  color: #fff;
  background-color: #44c9cd;
}

.messagePanel > .messageInputArea button:active {
  background-color: #2c9497;
}

.LoginArea {
  height: 100%;
  width: 100%;
  position: relative;
  min-width: 600px;
  background-color: #44C9CC;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.LoginArea .loginArea-wrap {
  height: 100%;
}
.LoginArea .site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px;
  background-color: #e6ebf2;
  z-index: 1;
}
.LoginArea .site-footer .footer-copyright {
  font-size: 14px;
  font-weight: 500;
  color: #999;
}
.LoginArea .site-footer .footer-links .footer-link {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.LoginArea .site-footer .footer-links .footer-link:hover {
  text-decoration: underline;
}
.LoginArea .bottomToast {
  display: flex;
  align-items: center;
  padding: 16px 40px;
  gap: 8px;
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  background: #4257FF;
  border-radius: 40px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
}
.LoginArea .bottomToast .toastMsg {
  color: white;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

.loginImg {
  background-size: 100%;
  position: absolute;
  left: 0;
  bottom: 58px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 60%;
  background-image: url("../images/img_Login.svg");
  background-repeat: no-repeat;
  background-position: bottom left;
  transition: 0.3s;
}

.loginImgCloud {
  position: absolute;
  top: 8%;
  left: 0%;
  height: 193px;
  width: 300px;
  background-image: url("../images/img_Cloud.svg");
  background-repeat: no-repeat;
  background-size: cover;
  animation-name: animate-cloud;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}

.loginImgCloud.S {
  top: 25%;
  left: 0%;
  height: 65px;
  width: 100px;
  animation-delay: 2s;
}

.loginImgCloud.M {
  top: 2%;
  left: 0%;
  height: 130px;
  width: 200px;
  animation-delay: 5s;
}

@keyframes animate-cloud {
  0% {
    transform: translateX(0px);
    opacity: 0;
  }
  50% {
    transform: translateX(1000px);
    opacity: 0.6;
  }
  100% {
    transform: translateX(3000px);
    opacity: 0;
  }
}
.LoginSection {
  position: absolute;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  top: 48%;
  width: 50%;
  transform: translateY(-50%);
  right: 0;
  /* box-sizing:  border-box; */
  /*20251118 2차인증 및 디자인 변경*/
}
.LoginSection .LoginInputArea {
  padding: 64px;
  background: #fff;
  border-radius: 20px;
}
.LoginSection .LoginInputArea .LoginTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
}
.LoginSection .LoginInputArea .LoginTop .imgLogo {
  width: 200px;
  height: 28px;
  background-image: url("../images/logo-color.svg");
  background-repeat: no-repeat;
  background-position: center;
}
.LoginSection .LoginInputArea .LoginTop .comboLanguage {
  background-color: transparent;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.7;
}
.LoginSection .LoginInputArea .LoginTop .comboLanguage:hover {
  cursor: pointer;
  opacity: 1;
}
.LoginSection .LoginInputArea .accountActions {
  display: flex;
  width: 100%;
  margin-top: 24px;
}
.LoginSection .LoginInputArea .accountActions a {
  flex: 1;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  opacity: 0.7;
}
.LoginSection .LoginInputArea .accountActions a:hover {
  opacity: 1;
}
.LoginSection .LoginInputArea .accountActions .divider {
  color: #ccc;
  font-weight: 300;
  pointer-events: none;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap {
  width: 340px;
  padding: 20px;
  border-radius: 8px;
  background: #f8f8f8;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-channel {
  display: flex;
  align-items: center;
  gap: 8px;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-channel span {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-wrap-hr {
  border: none;
  height: 1px;
  background-color: #ddd;
  margin: 12px 0;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-timer {
  display: flex;
  align-items: center;
  height: 32px;
  margin-bottom: 8px;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-timer .otp-time {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  padding-left: 10px;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-form .field-row {
  display: flex;
  align-items: center;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-form .field-row input {
  width: 230px;
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background: #fff;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  width: 96px;
  margin-right: 16px;
  flex-shrink: 0;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-resend {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-resend .msg-resend {
  font-size: 14px;
  font-weight: 500;
  color: #999;
}
.LoginSection .LoginInputArea .otp-card .otp-wrap .otp-resend .btn-resend {
  background: none;
  border: none;
  padding: 0;
  color: #5574F7;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.LoginSection .LoginInputArea .otp-card .txtError {
  max-width: 300px;
  text-align: center;
  margin: 16px auto 0 auto;
}
.LoginSection .LoginInputArea .otp-card .txtError span {
  color: #EC5555;
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
}
.LoginSection .LoginInputArea .otp-card .actions {
  display: flex;
  margin-top: 30px;
  gap: 8px;
}
.LoginSection .LoginInputArea .otp-card .actions button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 30px;
  text-align: center;
  cursor: pointer;
}
.LoginSection .LoginInputArea .otp-card .actions .btn-login-secondary {
  border: 1px solid #2699FB;
  color: #2699FB;
  background: none;
}
.LoginSection .LoginInputArea .otp-card .actions .btn-login-primary {
  background-color: #2699FB;
  color: #fff;
}
.LoginSection .LoginInputArea > .txtTitle {
  margin-bottom: 20px;
  color: #333;
  font-size: 34px;
}
.LoginSection .LoginInputArea > ul {
  width: 340px;
}
.LoginSection .LoginInputArea > ul > li {
  position: relative;
  margin-bottom: 12px;
}
.LoginSection .LoginInputArea > ul > li.input.PW {
  margin-bottom: 15px;
}
.LoginSection .LoginInputArea > ul > li > input {
  position: relative;
  height: 45px;
  width: 100%;
  padding-left: 40px;
  color: #1b202d;
  font-size: 14px;
  border-radius: 25px;
  background: #f4f4f4;
}
.LoginSection .LoginInputArea > ul > li > input::-moz-placeholder {
  color: #9FA5AD;
}
.LoginSection .LoginInputArea > ul > li > input::placeholder {
  color: #9FA5AD;
}
.LoginSection .LoginInputArea > ul > li > input[type=password] {
  font-family: auto;
}
.LoginSection .LoginInputArea > ul > li > input:focus {
  color: #333;
  font-weight: bold;
  border: 2px solid #2699FB;
}
.LoginSection .LoginInputArea > ul > li.input:before {
  content: "";
  position: absolute;
  left: 15px;
  top: calc(50% - 10px);
  width: 20px;
  height: 20px;
  background-image: url("../images/iconLogin.svg");
  background-repeat: no-repeat;
  z-index: 1;
}
.LoginSection .LoginInputArea > ul > li.input.ID:before {
  background-position: -2px -2px;
}
.LoginSection .LoginInputArea > ul > li.input.PW:before {
  background-position: 0px -29px;
}
.LoginSection .LoginInputArea > ul > li.idSaveCheck {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 10px;
  cursor: pointer;
}
.LoginSection .LoginInputArea > ul > li > input[type=checkbox] {
  display: none;
}
.LoginSection .LoginInputArea > ul > li.idSaveCheck > label {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #666;
  font-size: 13px;
  cursor: pointer;
}
.LoginSection .LoginInputArea > ul > li.idSaveCheck > label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  border-radius: 2px;
  border: 1px solid #7DBEB5;
  background-color: #fff;
}
.LoginSection .LoginInputArea > ul > li.idSaveCheck > label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  display: inline-block;
  width: 4px;
  height: 8px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.LoginSection .LoginInputArea > ul > li.txtCapslock,
.LoginSection .LoginInputArea > ul > li.txtError {
  max-width: 300px;
  margin: 0 auto;
  text-align: center;
}
.LoginSection .LoginInputArea > ul > li.txtCapslock span,
.LoginSection .LoginInputArea > ul > li.txtError span {
  font-size: 14px;
  color: #ec5555;
}
.LoginSection .LoginInputArea > ul > li.txtCapslock > span {
  font-size: 13px;
  color: #1B8B8E;
}
.LoginSection .LoginInputArea > ul > li.txtCapslock > span > i {
  display: inline-block;
  margin-right: 5px;
  padding: 2px 5px;
  border: 1px solid #1B8B8E;
  border-radius: 4px;
  color: #1B8B8E;
  font-size: 12px;
  font-style: normal;
}
.LoginSection .LoginInputArea > ul > li.txtError > div > ul > li {
  font-size: 13px;
  color: #1B8B8E;
}
.LoginSection .LoginInputArea > ul > li.txtError > div > ul > li:before {
  content: "!";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #1B8B8E;
  color: #A4E1E2;
  font-size: 11px;
  text-align: center;
  line-height: 16px;
}
.LoginSection .LoginInputArea > ul > li.btnLogin {
  margin-top: 24px;
}
.LoginSection .LoginInputArea > ul > li > input[type=checkbox]:checked + label:before {
  border: 1px solid #83c6ff;
  background-color: #2699fb;
}
.LoginSection .LoginInputArea > ul > li .forgotPW {
  position: absolute;
  right: 10px;
  top: 2px;
  font-size: 13px;
  color: #fff;
  opacity: 0.7;
}
.LoginSection .LoginInputArea > ul > li .forgotPW:hover {
  cursor: pointer;
  opacity: 1;
}
.LoginSection .LoginInputArea > ul > li > button {
  width: 100%;
  height: 44px;
  border-radius: 30px;
  background-color: #2699FB;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.LoginSection .LoginInputArea > ul > li > button:hover {
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.1) 5px 5px 10px;
}
.LoginSection .LoginInputArea > ul > li.newAccount {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.LoginSection .LoginInputArea > ul > li.newAccount > span {
  font-size: 14px;
  color: #666;
}
.LoginSection .LoginInputArea > ul > li.newAccount > a {
  padding: 10px 16px;
  color: #333;
  font-size: 14px;
  opacity: 0.7;
}
.LoginSection .LoginInputArea > ul > li.newAccount > a:hover {
  cursor: pointer;
  opacity: 1;
}

.LoginArea .LogoArea {
  position: absolute;
  top: calc(50% - 100px);
  left: 7%;
  height: 200px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.LoginArea .LogoArea .txtLogo > .txtDescription {
  width: 100%;
  color: rgba(255, 255, 255, 0.3);
  font-size: 14px;
  padding-left: 3px;
}

.txtLogo span {
  display: inline-block;
  font-size: 55px;
  color: #00e678;
  font-family: arial;
  font-weight: bold;
  opacity: 0;
  transform: translate(-150px, 0) scale(0.3);
  animation: AniLogo 0.5s forwards;
  box-shadow: 0px 60px 25px -20px rgba(0, 0, 0, 0.5);
}

@keyframes AniLogo {
  40% {
    transform: translate(50px, 0) scale(0.7);
    opacity: 1;
    color: #fff;
  }
  60% {
    color: #44c9cd;
  }
  80% {
    transform: translate(0) scale(2);
    opacity: 0;
  }
  100% {
    transform: translate(0) scale(1);
    opacity: 1;
  }
}
.txtLogo span:nth-of-type(2) {
  animation-delay: 0.05s;
}

.txtLogo span:nth-of-type(3) {
  animation-delay: 0.1s;
}

.txtLogo span:nth-of-type(4) {
  animation-delay: 0.15s;
}

.txtLogo span:nth-of-type(5) {
  animation-delay: 0.2s;
}

.txtLogo span:nth-of-type(6) {
  animation-delay: 0.25s;
}

.txtLogo span:nth-of-type(7) {
  animation-delay: 0.3s;
}

.popup.ServiceModel {
  max-width: 1000px;
  max-height: 650px;
  flex-wrap: nowrap;
}
.popup.ServiceModel .authMng .ContentsGap {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
  overflow: hidden;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .authBtnArea {
  display: flex;
  align-items: center;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .authBtnArea .btn {
  height: 32px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  background-color: white;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .authBtnArea .btn.authDelete {
  color: #EE6723;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .authBtnArea .btn.authAdd {
  color: #333;
  gap: 4px;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .authBtnArea .btn.authAdd i {
  background-color: #1CC2AC;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .authBtnArea .btn:hover {
  background-color: #f4f4f4;
  cursor: pointer;
  box-shadow: none;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .searchArea {
  position: relative;
  width: 200px;
  height: 30px;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .searchArea > input {
  width: 100%;
  height: 100%;
  padding: 0 32px 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .searchArea > input:focus {
  border-color: #44c9cd;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .searchArea > .btnSearch {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  background-color: transparent;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .searchArea > .btnSearch > i {
  background-color: currentColor;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .searchArea > .btnSearch:hover {
  cursor: pointer;
}
.popup.ServiceModel .authMng .ContentsGap .authTopArea .searchArea > .btnSearch:hover > i {
  background-color: #44c9cd;
}
.popup.ServiceModel .authMng .ContentsGap .authList {
  position: relative;
  width: 100%;
  height: 100%;
  border-top: 1px solid #ddd;
  overflow-y: auto;
}
.popup.ServiceModel .authMng .ContentsGap .authList table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  color: #333;
}
.popup.ServiceModel .authMng .ContentsGap .authList table thead {
  position: sticky;
  top: 0;
  background-color: #f4f4f4;
  z-index: 1;
}
.popup.ServiceModel .authMng .ContentsGap .authList table thead th {
  font-weight: 700;
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.popup.ServiceModel .authMng .ContentsGap .authList table thead th:first-child {
  width: 60px;
  text-align: center;
}
.popup.ServiceModel .authMng .ContentsGap .authList table tbody tr {
  border-bottom: 1px solid #eee;
}
.popup.ServiceModel .authMng .ContentsGap .authList table tbody tr td {
  padding: 10px;
}
.popup.ServiceModel .authMng .ContentsGap .authList table tbody tr td:first-child {
  text-align: center;
}
.popup.ServiceModel .authMng .ContentsGap .authList table .inputCheck input[type=checkbox] {
  display: none;
}
.popup.ServiceModel .authMng .ContentsGap .authList table .inputCheck input[type=checkbox]:checked + label:before {
  border: 1px solid #44c9cd;
  background-color: #44c9cd;
}
.popup.ServiceModel .authMng .ContentsGap .authList table .inputCheck > label {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.popup.ServiceModel .authMng .ContentsGap .authList table .inputCheck > label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #ddd;
  background-color: #fff;
}
.popup.ServiceModel .authMng .ContentsGap .authList table .inputCheck > label:after {
  content: "";
  position: absolute;
  top: 3px;
  left: 6px;
  display: inline-block;
  width: 4px;
  height: 8px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.popup.ServiceModel .popup.addAuthTarget {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 425px;
  height: auto;
  display: flex;
  flex-direction: column;
  padding: 30px;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea {
  position: relative;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchBar {
  position: relative;
  margin-bottom: 12px;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchBar input[type=text] {
  padding: 0 40px 0 12px;
  width: 100%;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #e4e4e4;
  background-color: #fff;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchBar input[type=text]:focus {
  border: 2px solid #44c9cd;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchBar .btnSearch {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  background: none;
  cursor: pointer;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchBar .btnSearch i {
  background-color: #44c9cd;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchSuggest {
  position: absolute;
  top: 40px;
  z-index: 2;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #E4E4E4;
  background: #FFF;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchSuggest .searchSuggestList {
  padding: 6px;
  max-height: 216px;
  overflow-y: auto;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchSuggest .searchSuggestList .searchSuggestItem {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 12px;
  border-bottom: 1px solid #e4e4e4;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchSuggest .searchSuggestList .searchSuggestItem:last-child {
  border-bottom: none;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchSuggest .searchSuggestList .searchSuggestItem:hover {
  background-color: #f4f4f4;
  cursor: pointer;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchSuggest .searchSuggestList .searchSuggestItem .itemName {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.popup.ServiceModel .popup.addAuthTarget .targetSearchArea .searchSuggest .searchSuggestList .searchSuggestItem .itemMail {
  font-size: 14px;
  font-weight: 400;
  color: #454e5f;
}
.popup.ServiceModel .popup.addAuthTarget .selectedListWrap {
  display: flex;
  flex-direction: column;
  min-height: 152px;
  padding: 12px;
  margin-bottom: 24px;
  border-radius: 6px;
  border: 1px solid #E4E4E4;
}
.popup.ServiceModel .popup.addAuthTarget .selectedListWrap .listTitle {
  font-size: 13px;
  font-weight: 500;
  color: #666;
  margin-bottom: 12px;
}
.popup.ServiceModel .popup.addAuthTarget .selectedListWrap .listCnts {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.popup.ServiceModel .popup.addAuthTarget .selectedListWrap .listCnts .selectedList {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.popup.ServiceModel .popup.addAuthTarget .selectedListWrap .listCnts .selectedList .selectedItem {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 40px;
  background: rgba(40, 76, 196, 0.06);
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.popup.ServiceModel .popup.addAuthTarget .selectedListWrap .listCnts .selectedList .selectedItem .selectedItemRemove {
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
}
.popup.ServiceModel .popup.addAuthTarget .selectedListWrap .listCnts .selectedList .selectedItem .selectedItemRemove i {
  background-color: #999;
}
.popup.ServiceModel .popup.addAuthTarget .selectedListWrap .listCnts .emptyText {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  font-size: 14px;
  color: #a7b2c3;
}
.popup.ServiceModel .popup.addAuthTarget .btn {
  width: 80px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
}
.popup.ServiceModel .popup.addAuthTarget .btn:hover {
  box-shadow: none;
  background-color: #44b6b9;
}

.popup.ServiceModel > aside {
  flex-shrink: 0;
  display: inline-block;
  width: 220px;
  height: 100%;
  padding: 16px;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.popup.ServiceModel > aside > .ModelNameArea {
  width: 100%;
  height: 200px;
  display: inline-block;
}

.popup.ServiceModel > aside > .ModelNameArea > .icon {
  width: 80px;
  height: 80px;
  margin: 50px 0 10px 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #81d4e6;
  font-size: 21px;
  border-radius: 50%;
  background-color: #c3eff8;
}

.popup.ServiceModel > aside > .ModelNameArea > .txtName {
  color: #1f2e3f;
  font-size: 0.9rem;
}

.popup.ServiceModel > aside > .ulLeftMenu > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 30px;
  padding-left: 35px;
  margin-bottom: 5px;
  border-radius: 15px;
  font-size: 12px;
}

.popup.ServiceModel > aside > .ulLeftMenu > li:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 10px;
  top: 5px;
  background-image: url("../images/iconModelLmn.svg");
  background-size: 20px 100px;
}

.popup.ServiceModel > aside > .ulLeftMenu > li.ModelDetail:before {
  background-position: 0px 0px;
}

.popup.ServiceModel > aside > .ulLeftMenu > li.ModelReq:before {
  background-position: 0px -35px;
}

.popup.ServiceModel > aside > .ulLeftMenu > li.ModelNewReq:before {
  background-position: 0px -67px;
}

.popup.ServiceModel > aside > .ulLeftMenu > li:hover {
  cursor: pointer;
  background-color: #dce1e4;
}

.popup.ServiceModel > aside > .ulLeftMenu > li.On {
  background-color: #dce1e4;
}

.popup.ServiceModel .contentsArea {
  display: inline-block;
  height: 100%;
  padding: 30px 0 30px 20px;
  overflow: hidden;
}

.popup.ServiceModel > .contentsArea section {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.popup.ServiceModel > .contentsArea section.fileList {
  flex-direction: row;
  gap: 5px;
}

.popup.ServiceModel > .contentsArea .txtTitle {
  height: 50px;
  font-size: 20px;
  font-weight: 600;
  color: #0f1f31;
}

.popup.ServiceModel .contentsArea .txtSubTitle {
  margin: 30px 0 20px;
  font-size: 14px;
  font-weight: bold;
  color: #0f1f31;
}

.popup.ServiceModel > .contentsArea .divContentsArea {
  position: relative;
  height: 100%;
  overflow-y: hidden;
}

.popup.ServiceModel > .contentsArea .divBtnArea {
  height: 40px;
  text-align: center;
}

.divContentsArea ul {
  display: flex;
  flex-wrap: wrap;
}

.divContentsArea ul > li {
  display: inline-block;
  width: 100%;
  position: relative;
  margin-bottom: 10px;
}

.divContentsArea ul > li.FileUpLoad {
  display: flex;
  flex-direction: column;
}

.divContentsArea ul > li.half {
  width: 50%;
}

.divContentsArea ul > li.half.Left {
  width: calc(50% - 20px);
  margin-right: 20px;
}

.divContentsArea ul > li .txtCaption {
  position: relative;
  font-size: 12px;
  color: #878f98;
}

.divContentsArea ul > li .txtCaption.Ess {
  padding-left: 15px;
}

.divContentsArea ul > li .txtCaption.Ess:before {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 9px;
  transform: rotate(45deg);
  border-right: 2px solid #fb792a;
  border-bottom: 2px solid #fb792a;
}

.divContentsArea ul > li input[type=text],
.divContentsArea ul > li input[type=date],
.divContentsArea ul > li textarea,
.divContentsArea ul > li select {
  width: 100%;
  padding: 4px 0;
  font-size: 14px;
  color: #0f1f31;
  border: 0px;
  border-bottom: 1px solid #dce1e4;
  background-color: #fff;
}

.divContentsArea ul > li input[type=text]:not(:disabled):hover, .divContentsArea ul > li input[type=text]:not(:disabled):focus {
  font-weight: bold;
  border-bottom: 2px solid #44c9cd;
}

.ModelReqArea {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: none;
  background-color: #fff;
}

.medelReqListArea {
  width: 50%;
  height: 100%;
  border-right: 1px solid #0F1F31;
}

.medelReqListArea > .queryArea {
  position: relative;
  height: 45px;
  padding: 10px;
}

.medelReqListArea > .queryArea .inputSearch {
  height: 100%;
  width: 100%;
  padding: 0 50px 0 5px;
  font-size: 13px;
  border: 1px solid #44c9cd;
}

.medelReqListArea > .queryArea .inputSearch:focus {
  font-weight: bold;
  border: 2px solid #44c9cd;
}

.medelReqListArea > .queryArea .btnQuery {
  position: absolute;
  right: 10px;
  top: 10px;
  height: calc(100% - 20px);
  width: 50px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  border: 0px solid #44c9cd;
  background-color: #44c9cd;
}

.medelReqListArea > .queryArea .btnQuery:hover {
  cursor: pointer;
  background-color: #3a9e98;
}

.medelReqListArea > .reqListArea {
  position: relative;
  height: calc(100% - 45px - 60px);
  overflow-x: auto;
}

.medelReqListArea > .reqListArea > ul > li {
  position: relative;
  padding: 8px 15px;
  border-bottom: 1px solid #ebebeb;
}

.medelReqListArea > .reqListArea > ul > li:hover {
  cursor: pointer;
  background-color: #F1F5F8;
}

.medelReqListArea > .reqListArea > ul > li.Selected {
  background-color: #F1F5F8;
}

.medelReqListArea > .reqListArea > ul > li .txtDescriptionArea span {
  display: inline-block;
  font-size: 11px;
  color: #888;
  margin: 0 1px 3px 4px;
}

.medelReqListArea > .reqListArea > ul > li .txtDescriptionArea span:after {
  content: " l";
  margin-left: 4px;
}

.medelReqListArea > .reqListArea > ul > li > .txtTitleArea {
  display: flex;
  padding-right: 60px;
  font-size: 16px;
}

.medelReqListArea > .reqListArea > ul > li > .txtTitleArea > .txtStatus {
  flex-shrink: 0;
  padding: 3px 10px;
  display: inline-flex;
  height: 22px;
  margin-right: 5px;
  font-size: 11px;
  border-radius: 11px;
  color: #5D8EFF;
  background-color: #DCE6FE;
}

.medelReqListArea > .reqListArea > ul > li > .txtTitleArea > .txtStatus.Req {
  color: #A57814;
  background-color: #FAEACA;
}

.medelReqListArea > .reqListArea > ul > li > .txtTitleArea > .txtStatus.Stop {
  color: #F25F7E;
  background-color: #F8DAE0;
}

.medelReqListArea > .reqListArea > ul > li > .txtTitleArea > .txtStatus.compleated {
  color: #888;
  background-color: #ebebeb;
}

.medelReqListArea > .reqListArea > ul > li > .txtDateArea {
  position: absolute;
  right: 10px;
  top: 35%;
  font-size: 12px;
  color: #888;
  text-align: right;
}

.btnReqAllUploadArea {
  position: relative;
  padding: 0 10px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.btnReqAllUploadArea > .btnReqAll {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #1b7346;
  border-radius: 15px;
  color: #1b7346;
  font-size: 13px;
}

.btnReqAllUploadArea > input {
  opacity: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
}

.btnReqAllUploadArea > input:hover {
  cursor: pointer;
}

.modelNewReqArea {
  width: 50%;
  padding: 14px 0px 0 30px;
}

.modelNewReqArea > .divContentsArea {
  max-height: calc(100% - 60px);
  overflow-y: auto;
}

.modelNewReqArea > .divBtnArea {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modelNewReqArea > .divBtnArea .New {
  color: #44c9cd;
  border: 2px solid #44c9cd;
  background-color: #fff;
}

.modelNewReqArea > .divBtnArea .Del {
  background-color: #EE6723;
}

.btn.NewReq {
  position: absolute;
  right: 20px;
  top: 40px;
  height: 30px;
  font-size: 14px;
}

.divContentsArea ul > li .lbReqStop {
  position: absolute;
  right: 5px;
  top: 18px;
  display: inline-block;
  padding: 2px 6px;
  width: 57px;
  height: 22px;
  color: #999;
  font-size: 12px;
  text-align: right;
  border-radius: 20px;
  border: 1px solid #dce1e4;
  background-color: #dce1e4;
}

.divContentsArea ul > li .lbReqStop:before {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #dce1e4;
  background-color: #fff;
}

.divContentsArea ul > li #newReqStop:checked + .lbReqStop {
  color: #fff;
  text-align: left;
  border: 1px solid #f37646;
  background-color: #f37646;
}

.divContentsArea ul > li #newReqStop:checked + .lbReqStop:before {
  left: auto;
  right: -2px;
  border: 1px solid #f37646;
}

.popup.ServiceModel > .contentsArea .divContentsArea.Req > table {
  width: 700px;
}

.popup.ServiceModel > .contentsArea .divContentsArea.Req > table td:nth-child(1) {
  width: 50px;
}

.popup.ServiceModel > .contentsArea .divContentsArea.Req > table td:nth-child(2) {
  width: 50px;
}

.popup.ServiceModel > .contentsArea .divContentsArea.Req > table td:nth-child(3) {
  width: 40px;
}

.popup.ServiceModel > .contentsArea .divContentsArea.Req > table td:nth-child(4) {
  width: 80px;
}

.popup.ServiceModel > .contentsArea .divContentsArea.Req > table td:nth-child(5) {
  text-align: left;
  width: 200px;
}

.popup.ServiceModel > .contentsArea .divContentsArea.Req > table td:nth-child(6) {
  width: 100px;
}

.popup.ServiceModel > .contentsArea .divContentsArea.Req > table td:nth-child(7) {
  width: 100px;
}

.popup.ServiceModel > .contentsArea .divContentsArea.Req > table td:nth-child(8) {
  width: 80px;
}

.popup.ServiceModel > .contentsArea .divContentsArea > table {
  width: 100%;
  border-spacing: 0;
  padding: 0;
}

.popup.ServiceModel > .contentsArea .divContentsArea > table th {
  padding: 8px 0;
  font-size: 12px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  background-color: #a7b2c3;
}

.popup.ServiceModel > .contentsArea .divContentsArea > table td {
  max-width: 0;
  text-align: center;
  padding: 8px 6px;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
  overflow: hidden;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.popup.ServiceModel > .contentsArea .divContentsArea > table td:first-child {
  border-left: 2px solid transparent;
}

.popup.ServiceModel > .contentsArea .divContentsArea > table td:last-child {
  border-right: 2px solid transparent;
}

.popup.ServiceModel > .contentsArea .divContentsArea > table tr:nth-child(2n+1) > td {
  background-color: #edf0f3;
}

.popup.ServiceModel > .contentsArea .divContentsArea > table td.alignLeft {
  text-align: left;
}

.popup.ServiceModel > .contentsArea .divContentsArea > table tr:hover > td {
  cursor: pointer;
  border-top: 2px solid #454e5f;
  border-bottom: 2px solid #454e5f;
}

.popup.ServiceModel > .contentsArea .divContentsArea > table tr:hover > td:first-child {
  border-left: 2px solid #454e5f;
}

.popup.ServiceModel > .contentsArea .divContentsArea > table tr:hover > td:last-child {
  border-right: 2px solid #454e5f;
}

.popup.ProAs {
  width: 1000px;
  height: 600px;
}

.popup.ProAs > .contentsArea .proAsProcessList > li {
  position: relative;
  padding: 14px 8px;
  display: flex;
  align-items: center;
  border: 1px solid #fff;
  border-bottom: 1px solid #eef2f4;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > input[type=checkbox] {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1px solid #44c9cd;
  display: inline-block;
  background-color: #fff;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .listContents {
  position: relative;
  width: 100%;
  padding-left: 100px;
  font-size: 13px;
  color: #454e5f;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .listContents .divImg {
  position: absolute;
  left: 5px;
  top: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  text-align: center;
  color: #999;
  border: 1px solid #ebebeb;
  background-color: #fff;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .listContents > .txtTitle {
  margin-bottom: 5px;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .listContents .txtPart {
  display: inline-block;
  padding: 2px 6px;
  color: #454e5f;
  font-size: 12px;
  border: 1px solid #454e5f;
  border-radius: 15px;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .listContents .txtProcessName {
  font-size: 16px;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .listContents .txtFuntion {
  font-size: 12px;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .listContents .txtDescription {
  font-size: 12px;
  color: #999;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .listContents .txtMemo {
  position: relative;
  padding: 2px 4px;
  margin: 6px 20px 4px 0;
  font-size: 11px;
  background-color: #eef2f4;
  border-radius: 5px;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .listContents .txtMemo:before {
  content: "";
  position: absolute;
  left: 12px;
  top: -4px;
  border: 5px solid;
  border-color: transparent transparent #eef2f4 #eef2f4;
  transform: rotate(135deg);
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .addContentsArea {
  display: inline-flex;
  flex-wrap: wrap;
  width: 140px;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .addContentsArea > p {
  position: relative;
  display: none;
  align-items: flex-start;
  justify-content: center;
  margin-right: 5px;
  width: 60px;
  height: 60px;
  font-size: 21px;
  border-radius: 50%;
  border: 1px solid #dce1e4;
}

.popup.ProAs > .contentsArea .proAsProcessList > li > .addContentsArea > p:before {
  content: attr(title);
  position: absolute;
  bottom: 8px;
  font-size: 11px;
  color: #999;
}

.popup.ProAs > .contentsArea .proAsProcessList > li button.btnNewPage,
.popup.ProAs > .contentsArea .proAsProcessList > li button.btnDownload {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 4px;
  margin-bottom: 5px;
  color: #519ab1;
  background-color: #e0f2f6;
  font-weight: bold;
  font-size: 12px;
  border-radius: 3px;
}

.popup.ProAs > .contentsArea .proAsProcessList > li button:hover {
  cursor: pointer;
  color: #fff;
  background-color: #44c9cd;
}

.popup.codeHelpList > .contentsArea {
  flex-direction: column;
}

.popup.codeHelpList .scrollArea > ul > li {
  cursor: pointer;
  position: relative;
  padding: 6px 8px;
  display: flex;
  align-items: flex-start;
  border: 1px solid #fff;
  border-bottom: 1px solid #d3d8e1;
}

.popup.codeHelpList .scrollArea > ul > li > span {
  display: inline-block;
  color: #454e5f;
}

.popup.codeHelpList .scrollArea > ul > li:hover > span {
  color: #44c9cd;
}

.popup.codeHelpList .scrollArea > ul > li > span.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: #454e5f;
}

.popup.codeHelpList .scrollArea > ul > li span.txtTitle {
  display: block;
  margin-right: 10px;
  font-size: 14px;
  width: 100%;
  flex-shrink: 0;
}

.popup.codeHelpList .scrollArea > ul > li span.txtDescription {
  font-size: 12px;
  opacity: 0.6;
  margin-right: 10px;
}

.popup.processFunction {
  max-width: 1000px;
  max-height: 700px;
}

.popup.processFunction > .contentsArea {
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 100px);
  width: 100%;
}

.popup.processFunction .inputFunctionName {
  width: 100%;
  height: 50px;
  padding: 4px 0;
  font-size: 16px;
  border-bottom: 2px solid #ebebeb;
}

.popup.processFunction > .contentsArea .listArea {
  width: calc(100% - 300px);
  height: calc(100% - 50px);
  overflow-x: auto;
}

.popup.processFunction > .contentsArea .listArea ul * {
  transition: none;
}

.popup.processFunction > .contentsArea .listArea ul {
  position: relative;
}

.popup.processFunction > .contentsArea .listArea ul > li {
  position: relative;
  padding: 8px 20px 10px 30px;
  border-bottom: 1px solid #ebebeb;
  cursor: move;
}

.popup.processFunction > .contentsArea .listArea ul > li:last-child {
  border-bottom: 0px;
}

.popup.processFunction > .contentsArea .listArea ul > li .txtDescription {
  font-size: 13px;
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn {
  position: absolute;
  top: 7px;
  padding: 0;
  width: 20px;
  height: 20px;
  background-color: #fff;
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn.Move {
  left: 0;
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn.Move > i {
  width: 10px;
  height: 1px;
  background-color: #000;
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn.Move > i:before,
.popup.processFunction > .contentsArea .listArea ul > li > .btn.Move > i:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1px;
  background-color: #000;
  position: absolute;
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn.Move > i:before {
  margin-top: -3px;
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn.Move > i:after {
  margin-top: 3px;
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn.Del {
  right: 5px;
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn.Del > i {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 11px;
  height: 11px;
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn.Del > i:before,
.popup.processFunction > .contentsArea .listArea ul > li > .btn.Del > i::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #EE6723;
  transform: rotate(45deg);
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn.Del > i::after {
  transform: rotate(-45deg);
}

.popup.processFunction > .contentsArea .listArea ul > li > .btn.Del:hover {
  cursor: pointer;
  background-color: #ffe7e3;
}

.popup.processFunction > .contentsArea .listArea ul > li.move {
  border: 0.5px solid #333;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
}

.popup.processFunction > .contentsArea .listHeader {
  display: flex;
  align-items: center;
  width: 100%;
  height: 30px;
  padding: 0px 20px 0px 30px;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
}

.popup.processFunction > .contentsArea .listHeader > label {
  width: 100%;
  margin-right: 8px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.popup.processFunction > .contentsArea .listHeader > .checkbox {
  flex-shrink: 0;
  width: 50px;
}

.popup.processFunction > .contentsArea .listArea li > .valueArea {
  display: flex;
  align-items: center;
}

.popup.processFunction > .contentsArea .listArea li > .valueArea > span {
  display: inline-block;
  padding: 0 8px;
  font-size: 13px;
}

.popup.processFunction > .contentsArea .listArea li > .valueArea > span.txtStatus {
  border-radius: 10px;
  color: #5574f7;
  background-color: #dae0f7;
}

.popup.processFunction > .contentsArea .listArea li > .valueArea > span + span {
  border-right: 1px solid #ccc;
}

.popup.processFunction > .contentsArea .listArea li > .valueArea > span:last-child {
  border-right: 0px;
}

.popup.processFunction.erColumn > .contentsArea .listArea {
  width: 100%;
  height: calc(100% - 50px - 30px);
}

.popup.processFunction.erColumn > .contentsArea .listArea li > .valueArea > span {
  width: 100%;
  padding: 3px 6px;
  margin-right: 8px;
}

.popup.processFunction.erColumn > .contentsArea .listArea li > .valueArea > .checkbox {
  flex-shrink: 0;
  width: 50px;
  text-align: center;
}

.popup.processFunction > .contentsArea .listArea li.CheckOut > .valueArea {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  padding-top: 4px;
}

.popup.processFunction > .contentsArea .listArea li.CheckOut > .valueArea > input,
.popup.processFunction > .contentsArea .listArea li.CheckOut > .valueArea > select {
  width: 100%;
  padding: 3px 6px;
  margin-right: 8px;
  border: 1px solid #ccc;
}

.popup.processFunction > .contentsArea .listArea li.CheckOut > .valueArea > input[type=checkbox] {
  flex-shrink: 0;
  width: 50px;
}

.popup.processFunction > .contentsArea .listArea li.CheckOut > .valueArea > input:focus {
  border: 1px solid #44c9cd;
}

.popup.processFunction > .contentsArea .programCodehlep {
  width: 300px;
  height: calc(100% - 50px);
  border-left: 1px solid #454e5f;
}

.popup.processFunction > .contentsArea .programCodehlep > .queryArea {
  position: relative;
}

.popup.processFunction > .btnArea {
  position: relative;
}

.popup.processFunction > .btnArea .ProgramAdd {
  position: absolute;
  top: 10px;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 30px;
  height: 30px;
}

.popup.processFunction > .btnArea .ProgramAdd::before,
.popup.processFunction > .btnArea .ProgramAdd::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background-color: #fff;
}

.popup.processFunction > .btnArea .ProgramAdd::after {
  transform: rotate(90deg);
}

.popup.processFunction > .contentsArea .programCodehlep > .queryArea > input {
  width: 100%;
  padding: 10px 30px 10px 10px;
  border-bottom: 1px solid #ebebeb;
}

.popup.processFunction > .contentsArea .programCodehlep > .queryArea > .btnQuery {
  position: absolute;
  top: 2px;
  right: 2px;
  height: 30px;
  width: 30px;
  border: 0px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  border-radius: 50%;
}

.popup.processFunction > .contentsArea .programCodehlep > .queryArea > .btnQuery:hover {
  cursor: pointer;
  background-color: #44c9cd;
}

.popup.processFunction > .contentsArea .programCodehlep > .queryArea > .btnQuery:hover:before {
  border-color: #fff;
}

.popup.processFunction > .contentsArea .programCodehlep > .queryArea > .btnQuery:hover:after {
  background-color: #fff;
}

.popup.processFunction > .contentsArea .programCodehlep > .queryArea > .btnQuery:before,
.popup.processFunction > .contentsArea .programCodehlep > .queryArea > .btnQuery:after {
  content: "";
  position: absolute;
}

.popup.processFunction > .contentsArea .programCodehlep > .queryArea > .btnQuery:before {
  top: 6px;
  left: 5px;
  width: 13px;
  height: 13px;
  border: 2px solid #162537;
  border-radius: 50%;
}

.popup.processFunction > .contentsArea .programCodehlep > .queryArea > .btnQuery:after {
  top: 18px;
  left: 20px;
  width: 2px;
  height: 7px;
  background-color: #162537;
  transform: rotate(-45deg);
}

.popup.processFunction > .contentsArea .programCodehlep > .programListArea {
  padding: 0 5px;
  height: calc(100% - 40px);
  overflow-y: auto;
  overflow-x: hidden;
}

.popup.processFunction > .contentsArea .programCodehlep > .programListArea li {
  display: flex;
  align-items: flex-start;
  padding: 4px 0;
}

.popup.processFunction > .contentsArea .programCodehlep > .programListArea li > .btnAdd {
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  border: 1px solid #44c9cd;
  border-radius: 50%;
  background-color: #fff;
}

.popup.processFunction > .contentsArea .programCodehlep > .programListArea li > .btnAdd:before,
.popup.processFunction > .contentsArea .programCodehlep > .programListArea li > .btnAdd:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 7px;
  position: absolute;
  left: 6px;
  top: 3px;
  background-color: #44c9cd;
}

.popup.processFunction > .contentsArea .programCodehlep > .programListArea li > .btnAdd:after {
  left: 3px;
  top: 6px;
  width: 7px;
  height: 1px;
}

.popup.processFunction > .contentsArea .programCodehlep > .programListArea li > .btnAdd:hover {
  cursor: pointer;
  background-color: #44c9cd;
}

.popup.processFunction > .contentsArea .programCodehlep > .programListArea li > .btnAdd:hover:before,
.popup.processFunction > .contentsArea .programCodehlep > .programListArea li > .btnAdd:hover:after {
  background-color: #fff;
}

.popup.processFunction > .contentsArea .programCodehlep > .programListArea li span {
  display: block;
  padding: 0 8px;
  font-size: 12px;
}

.popup.processFunction > .contentsArea .programCodehlep > .programListArea li span + span {
  font-size: 11px;
  color: #999;
}

.popup.processFunction > .btnArea {
  border-top: 1px solid #454e5f;
}

.popup.elementAddDel {
  max-width: 1000px;
  max-height: 600px;
}
.popup.elementAddDel > .contentsArea {
  display: inline-flex;
  height: calc(100% - 100px);
}
.popup.elementAddDel .headerArea {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 35px;
  font-size: 13px;
  background-color: #DDE7FE;
}
.popup.elementAddDel .headerArea .txtCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 26px;
  padding: 0 8px;
  margin-left: 5px;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  background-color: #5574F7;
}
.popup.elementAddDel .headerArea.Del {
  background-color: #D3D8E1;
}
.popup.elementAddDel .headerArea.Del .txtCount {
  background-color: #474E5D;
}
.popup.elementAddDel .ulElementList {
  height: calc(100% - 35px);
  overflow-y: auto;
}
.popup.elementAddDel .ulElementList > li {
  position: relative;
  padding-left: 20px;
}
.popup.elementAddDel .ulElementList > li > .checkboxControl {
  position: absolute;
  left: 0;
  top: 29px;
}
.popup.savePgmList {
  max-width: 1000px;
  max-height: 600px;
}
.popup.savePgmList > .contentsArea {
  display: inline-flex;
  height: calc(100% - 145px);
}
.popup.savePgmList .searchBox {
  display: flex;
  align-items: center;
  width: 250px;
  height: 30px;
  margin-bottom: 15px;
  border: 1px solid #dce1e4;
  border-radius: 4px;
}
.popup.savePgmList .searchBox > .icoSearch {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
}
.popup.savePgmList .searchBox > .icoSearch::before {
  position: absolute;
  top: 7px;
  left: 7px;
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.popup.savePgmList .searchBox > .icoSearch::after {
  position: absolute;
  top: 18px;
  left: 21px;
  content: "";
  width: 1px;
  height: 6px;
  background-color: #ccc;
  transform: rotate(-45deg);
}
.popup.savePgmList .searchBox input {
  width: 100%;
  height: 100%;
  padding: 0 10px 0 0;
}
.popup.savePgmList .headerArea {
  display: flex;
  align-items: center;
  padding-left: 20px;
  height: 35px;
  font-size: 13px;
  background-color: #DDE7FE;
}
.popup.savePgmList .headerArea .txtCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 26px;
  padding: 0 8px;
  margin-left: 5px;
  color: #fff;
  font-size: 12px;
  border-radius: 10px;
  background-color: #5574F7;
}
.popup.savePgmList .headerArea.Del {
  background-color: #D3D8E1;
}
.popup.savePgmList .headerArea.Del .txtCount {
  background-color: #474E5D;
}
.popup.savePgmList .ulElementList {
  height: calc(100% - 35px);
  overflow-y: auto;
}
.popup.savePgmList .ulElementList > li {
  position: relative;
}
.popup.savePgmList .ulElementList > li .treeTitle {
  display: flex;
  align-items: center;
}
.popup.savePgmList .ulElementList > li .treeTitle .icoWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.popup.savePgmList .ulElementList > li .treeTitle .icoWrap .icoTreeArrow {
  width: 5px;
  height: 5px;
  border-top: 6px solid #333;
  border-bottom: 0px solid transparent;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.popup.savePgmList .ulElementList > li .treeTitle .icoWrap.collapse .icoTreeArrow {
  border-bottom: 6px solid #333;
  border-top: 0px solid transparent;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.popup.savePgmList .ulElementList > li .treeTitle .txt {
  font-size: 14px;
  font-weight: bold;
}
.popup.savePgmList .ulElementList > li > ul {
  padding-left: 20px;
  margin-top: 5px;
}
.popup.savePgmList .ulElementList > li > ul .pgm {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
}
.popup.savePgmList .ulElementList > li > ul .pgm .checkboxControl {
  padding-top: 5px;
}
.popup.savePgmList .ulElementList > li > ul .pgm .pgmItem .titleWrap {
  display: flex;
  align-items: center;
}
.popup.savePgmList .ulElementList > li > ul .pgm .pgmItem .titleWrap .txtType {
  padding: 3px 5px;
  border-radius: 4px;
  background-color: #5574F7;
  color: #fff;
  font-size: 10px;
  margin-right: 5px;
}
.popup.savePgmList .ulElementList > li > ul .pgm .pgmItem .titleWrap .txtName {
  font-size: 14px;
}
.popup.savePgmList .ulElementList > li > ul .pgm .pgmItem .pgmID {
  color: #999;
  font-size: 13px;
}
.popup.savePgmList .ulElementList > li > ul .pgm:last-child {
  margin-bottom: 0;
}

.popup.ProcessDownLoad {
  width: 400px;
  height: 220px;
  flex-wrap: unset;
  flex-direction: column;
}

.popup.ReservationDeploy .headerArea {
  position: relative;
}

.popup.ReservationDeploy .headerArea .checkboxControl {
  position: absolute;
  right: 10px;
  top: 10px;
}

.popup.ReservationDeploy .ulList {
  padding: 10px;
  height: calc(100% - 35px);
  overflow-y: auto;
}

.popup.ReservationDeploy .ulList > li {
  position: relative;
  padding: 5px 60px 5px 0;
}

.popup.ReservationDeploy .ulList > li .txtType {
  font-size: 12px;
  color: #999;
}

.popup.ReservationDeploy .ulList > li .txtName {
  font-size: 14px;
}

.popup.ReservationDeploy .ulList > li > .inputTime {
  width: 50px;
  position: absolute;
  right: 0;
  top: 6px;
  padding: 0 5px;
  font-size: 16px;
  border-bottom: 1px solid #dcdcdc;
}

.popup.ReservationDeploy .ulList > li > .inputTime.Dis {
  color: #999;
  background-color: #ebebeb;
}

.TestWrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.TestWrap > .testStart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.TestWrap > .testStart > .contentsWrap,
.dlgTest.stepSeanario > .contentWrap.Finish > .contentsBox {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.TestWrap > .testStart > .contentsWrap > .icon,
.dlgTest.stepSeanario > .contentWrap.Finish > .contentsBox > .icon {
  display: inline-block;
  width: 73px;
  height: 70px;
  margin-bottom: 20px;
  background-image: url("../images/imgTestStart.svg");
}

.TestWrap > .testStart > .contentsWrap > .txtTitle,
.dlgTest.stepSeanario > .contentWrap.Finish > .contentsBox > .txtTitle {
  font-size: 24px;
}

.TestWrap > .testStart > .contentsWrap > .txtDescription,
.dlgTest.stepSeanario > .contentWrap.Finish > .contentsBox > .txtDescription {
  margin-bottom: 30px;
  font-size: 13px;
  text-align: center;
}

.TestWrap > .testStart > .contentsWrap > .btn,
.dlgTest.stepSeanario > .contentWrap.Finish > .contentsBox > .btn {
  width: 250px;
  height: 50px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(45deg, #44C9CC, #5784FF);
}

.TestWrap > .testArea {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.TestWrap > .testArea > .seanarioList {
  height: 100%;
  overflow-y: auto;
}

.TestWrap > .testArea > .seanarioList .ulSeanario {
  display: flex;
  flex-wrap: wrap;
}

.TestWrap > .testArea > .seanarioList .ulSeanario > li {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  width: calc(50% - 30px);
  max-width: 300px;
  height: 400px;
  margin: 0 30px 40px 0;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #DCE1E4;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 3px;
}

.TestWrap > .testArea > .seanarioList .ulSeanario > li:before {
  content: "";
  position: absolute;
  left: 15px;
  bottom: -12px;
  width: calc(100% - 30px);
  height: 10px;
  border-radius: 0 0 10px 10px;
  border: 1px solid #DCE1E4;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 3px;
}

.ulSeanario > li .btnEdit {
  position: absolute;
  right: 15px;
  top: 15px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-image: url("../images/icon.svg");
  background-position: 2px -147px;
  background-repeat: no-repeat;
}

.ulSeanario > li .btnEdit:hover {
  cursor: pointer;
  background-color: #ebebeb;
}

.ulSeanario > li .titleArea {
  flex-shrink: 0;
}

.ulSeanario > li .titleArea > .txtTitle {
  font-weight: bold;
  font-size: 16px;
}

.ulSeanario > li .infoArea {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 0;
  overflow: hidden;
}

.ulSeanario > li .btnArea {
  flex-shrink: 0;
}

.ulSeanario > li .btnArea > .btn {
  width: 100%;
  color: #44C9CC;
  font-weight: bold;
  font-size: 13px;
  background-color: rgba(68, 201, 204, 0.2);
}

.ulSeanario > li .txtDescription,
.ulSeanario > li .txtDate {
  font-size: 12px;
  color: #666;
}

.ulSeanario > li .txtCaption {
  font-size: 12px;
}

.ulSeanario > li .txtCaption span + span:before {
  content: " : ";
}

.ulSeanario > li .progress {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  margin: 10px 0;
  height: 30px;
  width: 100px;
  background-color: rgba(83, 129, 255, 0.12);
  border-radius: 3px;
}

.ulSeanario > li .progress:before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 15px;
  margin-right: 5px;
  background-image: url(../images/icon.svg);
  background-position: -4px -184px;
}

.ulSeanario > li .progress > .txtDate {
  color: #5381FF;
}

.ulSeanario > li .progress > .value {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: rgba(83, 129, 255, 0.3);
  border-radius: 3px;
}

.ulSeanario > li .infoArea > .txtDescription {
  overflow-y: auto;
}

.ulSeanario > li.Late .btnArea > .btn {
  color: #EE6723;
  background-color: rgba(238, 103, 35, 0.2);
}

.ulSeanario > li.Late .progress {
  background-color: rgba(238, 103, 35, 0.12);
}

.ulSeanario > li.Late .progress:before {
  background-position: -34px -184px;
}

.ulSeanario > li.Late .progress > .txtDate {
  color: #EE6723;
}

.ulSeanario > li.Late .progress > .value {
  background-color: rgba(238, 103, 35, 0.3);
}

.TestWrap > .testArea > .seanarioList .ulSeanario > li.Stop,
.TestWrap > .testArea > .seanarioList .ulSeanario > li.Stop:before {
  background-color: #f9f9f9;
}

.ulSeanario > li.Stop .titleArea > .txtTitle {
  text-decoration: line-through;
}

.ulSeanario > li.Finish .btnArea > .btn,
.ulSeanario > li.Stop .btnArea > .btn {
  color: #474E5D;
  background-color: rgba(155, 155, 155, 0.2);
}

.ulSeanario > li.Finish .progress,
.ulSeanario > li.Stop .progress {
  background-color: rgba(155, 155, 155, 0.12);
}

.ulSeanario > li.Finish .progress:before {
  background-position: -64px -184px;
}

.ulSeanario > li.Stop .progress:before {
  background-position: -4px -209px;
}

.ulSeanario > li.Finish .progress > .txtDate,
.ulSeanario > li.Stop .progress > .txtDate {
  color: #474E5D;
}

.ulSeanario > li.Finish .progress > .value,
.ulSeanario > li.Stop .progress > .value {
  background-color: rgba(155, 155, 155, 0.3);
}

.dlgTest {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px 0;
  background: #fff;
  z-index: 9;
}

.dlgTest .btnClose {
  position: absolute;
  top: 15px;
  right: 10px;
  height: 30px;
  width: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.dlgTest .btnClose:hover {
  cursor: pointer;
  background-color: #a7b2c3;
}

.dlgTest .btnClose > i {
  position: relative;
  display: inline-block;
  width: 1px;
  height: 20px;
}

.dlgTest .btnClose > i:before,
.dlgTest .btnClose > i:after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 2px;
  height: 20px;
  background-color: #454e5f;
}

.dlgTest .btnClose > i:before {
  transform: rotate(45deg);
}

.dlgTest .btnClose > i:after {
  transform: rotate(135deg);
}

.dlgTest .titleArea {
  flex-shrink: 0;
  padding: 0 20px;
}

.dlgTest .titleArea > .txtTitle {
  font-size: 16px;
}

.dlgTest .masterArea {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
  padding: 10px 20px 10px 20px;
  background-color: #E6EBF2;
}

.dlgTest .masterArea dl {
  display: inline-flex;
  align-items: center;
  margin: 8px 3% 8px 0;
}

.dlgTest .masterArea dl > dt {
  flex-shrink: 0;
  margin-right: 10px;
  font-size: 12px;
  min-width: 95px;
}

.dlgTest .masterArea dl > dd {
  display: inline-flex;
  width: 100%;
}

.dlgTest .masterArea dl > dd > input[type=text],
.dlgTest .masterArea dl > dd > textarea {
  height: 100%;
  width: 100%;
  min-height: 25px;
  padding: 0 8px;
  border-radius: 5px;
  border: 2px solid transparent;
}

.dlgTest .masterArea dl > dd > input[type=text]:focus,
.dlgTest .masterArea dl > dd > textarea:focus {
  border: 2px solid #44c9cd;
}

.dlgTest .masterArea dl > dd > input[type=text]:disabled,
.dlgTest .masterArea dl > dd > textarea:disabled {
  background-color: rgba(255, 255, 255, 0.5);
}

.dlgTest .masterArea dl > dd > input[type=text] + span {
  display: inline-block;
  margin: 0 10px;
}

.dlgTest .masterArea .checkboxControl {
  margin-right: 3%;
}

.dlgTest .masterArea .btn {
  position: relative;
  margin: 8px 0 0 0px;
  height: 30px;
  font-size: 13px;
  background-color: #5574F7;
}

.dlgTest .masterArea .btn.CheckIn {
  background-color: #A7B2C3;
}

.dlgTest .masterArea .btn.Other {
  background-color: #A7B2C3;
}

.dlgTest .masterArea .btn.Other:after {
  content: "";
  position: absolute;
  right: -10px;
  top: -10px;
  width: 30px;
  height: 30px;
  background-image: url(../images/icon.svg);
  background-position: -118px -17px;
  background-color: #e6ebf2;
  border-radius: 50%;
  background-repeat: no-repeat;
}

.dlgTest .masterArea dl.w10 {
  width: 10%;
  min-width: 200px;
}

.dlgTest .masterArea dl.w20 {
  width: 20%;
  min-width: 300px;
}

.dlgTest .masterArea dl.w30 {
  width: 30%;
  min-width: 300px;
}

.dlgTest .masterArea dl.w100 {
  width: 100%;
}

.dlgTest .sheetArea {
  height: 100%;
  overflow-y: auto;
}

.dlgTest .masterArea .txtDescription {
  width: 100%;
  padding: 8px 0;
  font-size: 12px;
}

.dlgTest .masterArea.Test {
  justify-content: space-around;
  overflow: hidden;
  flex-wrap: nowrap;
}

.dlgTest .masterArea.Test > .dataArea {
  width: 100%;
}

.dlgTest .masterArea .btn.Start {
  flex-shrink: 0;
  height: 80%;
}

.dlgTest .masterArea .btn.Start:before {
  content: "";
  margin-right: 10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #ffffff;
}

.dlgTest.htmlEditor {
  width: 800px;
  height: 600px;
  border: 1px solid #ebebeb;
  left: calc(50% - 400px);
  top: calc(50% - 300px);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
  z-index: 10;
}

.dlgTest.htmlEditor > .htmlArea {
  padding: 20px 0;
  height: 100%;
}

.dlgTest.htmlEditor > .htmlArea > .htmlEditor {
  height: 100%;
}

.dlgTest.stepSeanario {
  align-items: center;
  justify-content: center;
  background: transparent;
}

.dlgTest.stepSeanario > .contentWrap {
  position: relative;
  width: 1000px;
  height: 650px;
  display: inline-flex;
  flex-direction: column;
  border: 1px solid #454e5f;
  background-color: #fff;
}

.dlgTest.stepSeanario > .contentWrap > .titleArea {
  margin: 20px 0;
}

.dlgTest.stepSeanario > .contentWrap > .progress {
  position: relative;
  height: 3px;
  background-color: #ebebeb;
}

.dlgTest.stepSeanario > .contentWrap > .progress > .value {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #FDBD39;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap {
  display: flex;
  height: 100%;
  overflow: hidden;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .overviewWrap {
  width: 100%;
  padding: 20px;
  overflow-y: auto;
}

.dlgTest.stepSeanario .overviewWrap .programNameArea {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px;
}

.dlgTest.stepSeanario .overviewWrap .programNameArea > .txtName {
  margin-right: 20px;
  font-size: 21px;
  font-weight: bold;
}

.dlgTest.stepSeanario .overviewWrap .programNameArea > .ulStep {
  display: flex;
}

.dlgTest.stepSeanario .overviewWrap .programNameArea > .ulStep > li {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  font-size: 12px;
  color: #454e5f;
  border: 1px solid #a7b2c3;
  border-radius: 50%;
}

.dlgTest.stepSeanario .overviewWrap .programNameArea > .ulStep > li.Complete {
  border: 1px solid #5784FF;
  background-color: #5784FF;
  color: #5784FF;
}

.dlgTest.stepSeanario .overviewWrap .programNameArea > .ulStep > li.Complete:before {
  content: "";
  display: inline-block;
  margin-left: 5px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.dlgTest.stepSeanario .overviewWrap .programNameArea > .ulStep > li.Complete:after {
  background-color: #5784FF;
  height: 2px;
}

.dlgTest.stepSeanario .overviewWrap .programNameArea > .ulStep > li.Ing {
  border: 2px solid #5784FF;
  color: #5784FF;
  font-weight: bold;
}

.dlgTest.stepSeanario .overviewWrap .programNameArea > .ulStep > li:after {
  content: "";
  position: absolute;
  left: 24px;
  height: 1px;
  width: 10px;
  background-color: #a7b2c3;
}

.dlgTest.stepSeanario .overviewWrap .programNameArea > .ulStep > li:last-child:after {
  display: none;
}

.dlgTest.stepSeanario .overviewWrap .detailWrap .txtTitle {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #5784FF;
}

.dlgTest.stepSeanario .overviewWrap .detailWrap .valueArea {
  margin-bottom: 20px;
  font-size: 12px;
  line-height: 20px;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 100%;
  padding: 10px 20px;
  color: #fff;
  background-color: #5784FF;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap > .btnExpand {
  position: absolute;
  left: -20px;
  top: 0px;
  width: 20px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #5784FF;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap > .btnExpand:hover {
  cursor: pointer;
  background-color: #586dc9;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap > .btnExpand > i {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 8px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(45deg);
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap > .txtTitle {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: bold;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap .ulDataResult {
  margin-bottom: 20px;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap .ulDataResult > li {
  display: inline-flex;
  width: 100%;
  padding: 8px 0;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap .ulDataResult > li.radioControl > input[type=radio] + label > span {
  background-color: transparent;
  border: 1px solid #fff;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap .ulDataResult > li.radioControl > input[type=radio]:checked + label > span:after {
  background-color: #fff;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap > .htmlEditor {
  height: 100%;
  margin-bottom: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap > input[type=text] {
  margin-bottom: 20px;
  padding: 4px;
  height: 40px;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  border-radius: 5px;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap > .btnArea {
  display: flex;
  padding: 0px;
  justify-content: space-between;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap > .btnArea > .btn {
  position: relative;
  width: 100%;
  background-color: #fff;
  color: #5574F7;
  font-weight: bold;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap > .btnArea > .btn.Prev:before {
  content: "";
  margin-right: 12px;
  width: 8px;
  height: 8px;
  border-left: 2px solid #5574F7;
  border-bottom: 2px solid #5574F7;
  transform: rotate(45deg);
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap > .btnArea > .btn.Next:after {
  content: "";
  margin-left: 12px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #5574F7;
  border-top: 2px solid #5574F7;
  transform: rotate(45deg);
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap.ExpandMode {
  width: 800px;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap.ExpandMode > .btnExpand > i {
  transform: rotate(225deg);
  margin-left: 0px;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap.ExpandMode .ulDataResult {
  display: flex;
  justify-content: flex-start;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap.ExpandMode > input[type=text] {
  position: absolute;
  left: 20px;
  bottom: -10px;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap.ExpandMode > .btnArea {
  justify-content: flex-end;
}

.dlgTest.stepSeanario > .contentWrap > .seanarioWrap > .testDataWrap.ExpandMode > .btnArea > .btn {
  width: 100px;
}

.dlgTest.stepSeanario > .contentWrap.Finish {
  justify-content: center;
}

.TestWrap .btnArea {
  position: relative;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 0 20px;
}

.TestWrap .btnArea > .btn {
  font-size: 13px;
}

.TestWrap .btnArea > .btn.AddRow {
  position: absolute;
  left: 10px;
  top: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 10px;
  border-radius: 5px;
  color: #111;
  font-size: 13px;
  font-weight: bold;
  background-color: transparent;
  cursor: pointer;
}

.TestWrap .btnArea > .btn.AddRow:hover {
  background-color: #e6ebf2;
}

.TestWrap .btnArea > .btn.AddRow:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #26D6DA;
  background-image: url(../images/icon.svg);
  background-position: -3px -261px;
  background-repeat: no-repeat;
}

.TestWrap .btnArea > .btn.DelRow {
  position: absolute;
  left: 100px;
  top: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 10px;
  border-radius: 5px;
  color: #111;
  font-size: 13px;
  font-weight: bold;
  background-color: transparent;
  cursor: pointer;
}

.TestWrap .btnArea > .btn.DelRow:hover {
  background-color: #f2ebe6;
}

.TestWrap .btnArea > .btn.DelRow:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #ee6723;
}

.TestWrap .btnArea > .btn.DelRow:after {
  content: "";
  position: absolute;
  left: 15px;
  top: 17px;
  display: inline-block;
  width: 10px;
  height: 2px;
  background-color: #fff;
}

.TestWrap .btnArea > .btn.Gray {
  background-color: #A7B2C3;
}

.TestWrap .btnArea > .btn.Light {
  color: #44C9CC;
  font-weight: bold;
  font-size: 13px;
  background-color: rgba(68, 201, 204, 0.2);
}

.popup.indexSetting {
  width: 350px;
  height: 450px;
}

.popup.indexSetting > .contentsArea {
  height: calc(100% - 100px);
}

.IndexDashbord {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  background-color: #FAFAFA;
}
.IndexDashbord > .TopBarWrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding-left: 30px;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
.IndexDashbord > .TopBarWrap .logo {
  display: block;
  width: 121px;
  height: 16px;
  background-image: url(../images/iconHeader.svg);
  background-position: -287px -2px;
}
.IndexDashbord > .TopBarWrap .rightArea {
  display: flex;
  align-items: center;
}
.IndexDashbord > .TopBarWrap .rightArea .comboCompany {
  display: flex;
  align-items: center;
}
.IndexDashbord > .TopBarWrap .rightArea .comboCompany > .iconCompany {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background-image: url(../images/iconHeader.svg);
  background-position: -254px -1px;
}
.IndexDashbord > .TopBarWrap .rightArea .comboCompany > dl dt {
  padding-left: 4px;
  font-size: 12px;
  color: #999;
}
.IndexDashbord > .TopBarWrap .rightArea .comboCompany > dl .comboCompany {
  color: #5574F7;
  font-size: 13px;
  font-weight: 600;
}
.IndexDashbord > .TopBarWrap .rightArea .comboCompany::after {
  content: "";
  width: 1px;
  height: 24px;
  background-color: #ccc;
  margin: 0 12px;
}
.IndexDashbord > .TopBarWrap .rightArea > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}
.IndexDashbord > .TopBarWrap .rightArea > a > i {
  width: 22px;
  height: 22px;
  background-image: url(../images/iconHeader.svg);
}
.IndexDashbord > .TopBarWrap .rightArea > a:hover {
  background-color: #ddd;
}
.IndexDashbord > .TopBarWrap .rightArea > a.btnHelp > i {
  background-position: -140px 1px;
}
.IndexDashbord > .TopBarWrap .rightArea > a.btnRecent {
  height: 51px;
  margin-bottom: -1px;
  background-color: #F1F5F8;
  border-left: 1px solid #ccc;
}
.IndexDashbord > .TopBarWrap .rightArea > a.btnRecent > i {
  background-position: -170px 1px;
}
.IndexDashbord > .TopBarWrap .rightArea > a.btnProfile {
  width: 30px;
  height: 30px;
  margin: 0 10px;
  border-radius: 50%;
  background-color: #D9F4F5;
  color: #44c9cd;
  font-weight: bold;
  font-size: 12px;
}
.IndexDashbord > .TopBarWrap .rightArea > a.btnProfile:hover {
  cursor: pointer;
}
.IndexDashbord > .ServiceModelWrap {
  width: calc(100% - 320px);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap {
  display: flex;
  justify-content: space-between;
  padding: 40px 25px 20px 25px;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea {
  width: 100%;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > h1 {
  padding-bottom: 10px;
  font-size: 30px;
  font-weight: normal;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .txtDescription {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .txtDescription > i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -250px -30px;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .txtDescription > span {
  font-weight: bold;
  color: #333;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .queryArea {
  flex-shrink: 0;
  position: relative;
  height: 40px;
  margin: 10px 0px 0px 0px;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .queryArea > input[type=text] {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  padding-right: 42px;
  border-radius: 5px;
  border: 1px solid #ebebeb;
  background-color: #fff;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .queryArea > input[type=text]:focus {
  color: #44c9cd;
  font-weight: bold;
  box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 15px;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .queryArea > .btnQuery {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  border-radius: 0 5px 5px 0;
  color: #454e5f;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .queryArea > .btnQuery::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 14px;
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .queryArea > .btnQuery::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 23px;
  width: 2px;
  height: 7px;
  background-color: currentColor;
  transform: rotate(135deg);
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .queryArea > .btnQuery:hover {
  background-color: #e0f4f4;
  color: #44c9cd;
  cursor: pointer;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea {
  display: flex;
  align-self: start;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  padding-left: 20px;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal {
  display: inline-flex;
  flex-shrink: 0;
  padding: 8px;
  border: 1px solid #DCE1E4;
  border-radius: 5px;
  background-color: #F1F5F8;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > li {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 0;
  max-width: 100px;
  min-width: 70px;
  height: 60px;
  padding: 0 10px;
  border-radius: 5px;
  color: #474E5D;
  opacity: 0.5;
  cursor: pointer;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > li > .txtCount {
  font-weight: bold;
  font-size: 24px;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > li > .txtCaption {
  font-size: 12px;
  text-align: center;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > li.Project > .txtCount {
  color: #5574F7;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > li.AddProject > .txtCount {
  color: #FD6AB3;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > li + li:before {
  content: "";
  position: absolute;
  top: 15%;
  left: 0;
  width: 1px;
  height: 70%;
  background-color: #999;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > .Selected {
  background-color: #fff;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2);
  opacity: 1;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > .Selected::before {
  display: none;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > .Selected + li:before {
  display: none;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .btnStandard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 0;
  width: 70px;
  height: 78px;
  margin-left: 15px;
  border: 1px solid #DCE1E4;
  border-radius: 5px;
  background-color: #F1F5F8;
  color: #474E5D;
  cursor: pointer;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .btnStandard .txtCount {
  font-weight: bold;
  font-size: 24px;
  color: #44c9cd;
  opacity: 0.5;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .btnStandard .txtCaption {
  font-size: 12px;
  opacity: 0.5;
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .btnStandard.Selected {
  background-color: #fff;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
}
.IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .btnStandard.Selected .txtCaption, .IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .btnStandard.Selected .txtCount {
  opacity: 1;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px 10px;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .btnERP {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 5px;
  background-color: #474E5D;
  color: #fff;
  font-size: 12px;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .btnERP:hover {
  background-color: #3d434f;
  box-shadow: rgba(0, 0, 0, 0.15) 2px 5px 5px;
  cursor: pointer;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .btnLeftArea {
  display: flex;
  align-items: center;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .btnLeftArea .checkboxControl {
  margin-left: 20px;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .ulViewMode {
  display: inline-flex;
  padding: 4px;
  background-color: #F1F5F8;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 3px;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .ulViewMode > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 24px;
  height: 24px;
  opacity: 0.3;
  overflow: hidden;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .ulViewMode > li > span {
  display: inline-flex;
  background-color: #474E5D;
  position: relative;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .ulViewMode > li:hover {
  cursor: pointer;
  opacity: 1;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .ulViewMode > li.tile {
  padding: 4px 2px 4px 5px;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .ulViewMode > li.tile > span {
  width: 6px;
  height: 6px;
  margin-right: 2px;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .ulViewMode > li.table {
  padding: 5px 0 5px 6px;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .ulViewMode > li.table > span {
  width: 14px;
  height: 2px;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .ulViewMode > li.table > span::before {
  content: "";
  display: inline-block;
  height: 2px;
  width: 2px;
  margin-left: 2px;
  background-color: #ffffff;
}
.IndexDashbord > .ServiceModelWrap > .ServiceModelBtnWrap .ulViewMode > li.Selected {
  border-radius: 4px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 2px;
  opacity: 1;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap {
  height: 100%;
  overflow-y: auto;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel {
  display: flex;
  padding: 0 25px 0 5px;
  flex-wrap: wrap;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  width: calc(25% - 20px);
  height: 215px;
  margin: 0 0 20px 20px;
  padding: 0;
  border: 1px solid #DCE1E4;
  border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li > .txtTitle {
  flex-shrink: 0;
  width: 100%;
  height: 30px;
  padding: 7px 10px 0 10px;
  text-align: center;
  white-space: nowrap;
  word-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li > .txtDate {
  flex-shrink: 0;
  width: 100%;
  height: 30px;
  padding: 0 10px 0 10px;
  text-align: center;
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  word-wrap: break-word;
  text-overflow: ellipsis;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li > .txtDescription {
  flex-shrink: 0;
  width: 100%;
  height: 30px;
  padding: 20px 10px 0 10px;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
  word-wrap: break-word;
  text-overflow: ellipsis;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li > .dataArea {
  display: flex;
  width: 100%;
  padding: 0 5%;
  overflow: hidden;
  align-items: center;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .pieChart {
  height: 100%;
  flex-shrink: 0;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .ulCount {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 120px);
  padding: 0 0 0 10px;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .ulCount > li {
  width: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 5px;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .ulCount > li > .txtCaption {
  font-size: 12px;
  color: #999;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .ulCount > li > .txtCaption.Complete > .txtValue {
  font-weight: 800;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .ulCount .txtValue .error {
  font-weight: bold;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .ulCount .txtValue span + span::before {
  content: " l ";
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .btnArea {
  flex-shrink: 0;
  display: flex;
  width: 100%;
  height: 40px;
  border-top: 1px solid #D1D5DA;
  background-color: #FAFAFA;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .btnArea > .btn {
  width: 100%;
  height: 100%;
  padding: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #6C717D;
  border-radius: 0;
  background-color: transparent;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .btnArea > .btn:hover {
  color: #333;
  background-color: #ebebeb;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .btnArea > .btn + .btn {
  border-left: 1px solid #D1D5DA;
  margin: 0;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .btnPin {
  opacity: 0;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -245px 3px;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li .btnPin:hover {
  background-color: #ebebeb;
  opacity: 0.7;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li:hover {
  cursor: pointer;
  background-color: #f4f4f4;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li:hover .btnPin {
  opacity: 0.2;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.Project {
  height: 240px;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.Project > .txtDescription,
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.Project .ppc-percents span {
  color: #516FED;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.Project .ppc-progress .ppc-progress-fill,
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.Project .progress-pie-chart.gt-50 {
  background: #516FED;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.AddProject {
  height: 240px;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.AddProject > .txtDescription,
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.AddProject .ppc-percents span {
  color: #FE6AB4;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.AddProject .ppc-progress .ppc-progress-fill,
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.AddProject .progress-pie-chart.gt-50 {
  background: #FE6AB4;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.Error .ulCount .txtValue .error,
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.Error .ppc-percents span {
  color: #DC5F20;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.Error .ppc-progress .ppc-progress-fill,
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.Error .progress-pie-chart.gt-50 {
  background: #DC5F20;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li.Pin .btnPin {
  opacity: 1;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel {
  position: relative;
  width: calc(100% - 50px);
  border-spacing: 0;
  border: 0px;
  border-top: 2px solid #474E5D;
  margin: 0 25px;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel thead {
  position: sticky;
  top: 0px;
  left: 0;
  z-index: 1;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel th {
  padding: 6px 0;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-weight: bold;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background-color: #474E5D;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel th.ready {
  background-color: #E3E4E5;
  color: #333;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel th.ing {
  background-color: #7E96F8;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel th.compleat {
  background-color: #5574F7;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel th:last-child {
  border-right: 0;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel td {
  position: relative;
  text-align: right;
  padding: 8px 6px 8px 4px;
  border-right: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
  font-size: 12px;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel td .bar {
  position: absolute;
  top: calc(50% - 10px);
  left: 0;
  height: 20px;
  background-color: rgba(85, 116, 247, 0.15);
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel td .value {
  font-weight: 800;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel td.title {
  font-weight: 800;
  text-align: left;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel td.date {
  text-align: left;
  color: #666;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel td.ready .bar {
  background-color: rgba(85, 85, 85, 0.2);
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel td.ing .value {
  color: #5574F7;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel td.compleat .bar {
  background-color: rgba(85, 116, 247, 0.3);
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel td:last-child {
  border-right: 0;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel .line {
  border-right: 2px solid #474e5d !important;
}
.IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .tableServiceModel tr:hover > td {
  cursor: pointer;
  background-color: #f4f4f4;
}
.IndexDashbord > .RecentWrap {
  position: relative;
  width: 320px;
  height: 100%;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  padding: 40px 30px 10px;
  border-left: 1px solid #ccc;
  background-color: #F1F5F8;
}
.IndexDashbord > .RecentWrap > .btnRecentClose {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.IndexDashbord > .RecentWrap > .btnRecentClose:hover {
  background-color: #ddd;
  cursor: pointer;
}
.IndexDashbord > .RecentWrap > .btnRecentClose::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 19px;
  background-color: #999;
  transform: rotate(45deg);
}
.IndexDashbord > .RecentWrap > .btnRecentClose::after {
  content: "";
  position: absolute;
  width: 19px;
  height: 1px;
  background-color: #999;
  transform: rotate(45deg);
}
.IndexDashbord > .RecentWrap > h2 {
  padding-bottom: 20px;
  font-weight: normal;
  font-size: 30px;
}
.IndexDashbord > .RecentWrap > .queryArea {
  flex-shrink: 0;
  position: relative;
  height: 40px;
}
.IndexDashbord > .RecentWrap > .queryArea > input[type=text] {
  width: 100%;
  height: 100%;
  padding-left: 32px;
  border-radius: 5px;
  border: 1px solid #ebebeb;
  background-color: #fff;
}
.IndexDashbord > .RecentWrap > .queryArea > input[type=text]:focus {
  color: #44c9cd;
  font-weight: bold;
  box-shadow: rgba(0, 0, 0, 0.2) 3px 3px 15px;
}
.IndexDashbord > .RecentWrap > .queryArea > i {
  position: absolute;
  left: 8px;
  top: 8px;
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #44c9cd;
}
.IndexDashbord > .RecentWrap > .queryArea > i::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 2px;
  height: 6px;
  background-color: #44c9cd;
  transform: rotate(135deg);
}
.IndexDashbord > .RecentWrap > .scrollArea {
  height: 100%;
  overflow-y: auto;
  padding: 10px 0;
}
.IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li {
  position: relative;
  margin-top: 16px;
}
.IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li > .txtTitle {
  display: inline-flex;
  font-size: 16px;
  cursor: pointer;
}
.IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li > .txtDescription {
  font-size: 12px;
  color: #999;
}
.IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li > .txtDescription span + span:before {
  content: " l ";
}
.IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li.iconType > .txtTitle:before {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -170px -184px;
}
.IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li.Project > .txtTitle:before {
  background-position: -170px 1px;
}
.IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li.AddProject > .txtTitle:before {
  background-position: -170px -208px;
}
.IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li.Design > .txtTitle:before {
  background-position: -170px -62px;
}
.IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li.Packaging > .txtTitle:before {
  background-position: -170px -93px;
}
.IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li.Test > .txtTitle:before {
  background-position: -170px -124px;
}
.IndexDashbord > .RecentWrap > .btnArea {
  flex-shrink: 0;
  height: 70px;
  padding: 10px 0;
}
.IndexDashbord > .RecentWrap > .btnArea > .btn {
  position: relative;
  height: 100%;
  width: 100%;
  padding: 10px 20px 10px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #454e5f;
}
.IndexDashbord > .RecentWrap > .btnArea > .btn > .icon {
  display: inline-block;
  width: 23px;
  height: 23px;
  margin-right: 4px;
  background-image: url("../images/icon.svg");
  background-repeat: no-repeat;
  background-position: -210px -30px;
}
.IndexDashbord > .RecentWrap > .btnArea > .btn::after {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  right: 15px;
  top: calc(50% - 4px);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}
.IndexDashbord > .RecentWrap > .btnArea > .btn:hover {
  cursor: pointer;
  background-color: #47587E;
}
.IndexDashbord.recentHide > .TopBarWrap > .rightArea > a.btnRecent {
  height: 50px;
  margin-bottom: 0;
  border-left-color: transparent;
  background-color: transparent;
}
.IndexDashbord.recentHide > .TopBarWrap > .rightArea > a.btnRecent:hover {
  background-color: #ddd;
}
.IndexDashbord.recentHide > .ServiceModelWrap {
  width: 100%;
}
.IndexDashbord.recentHide > .recentWrap {
  display: none;
}
.IndexDashbord.recentHide > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
  width: calc(20% - 20px);
}

.unserInfoWrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  z-index: 9;
}
.unserInfoWrap .userInfoArea {
  position: absolute;
  top: 40px;
  right: 20px;
  width: 200px;
  height: 180px;
  padding: 20px;
  border: 1px solid #ebebeb;
  border-radius: 5px;
  background-color: #fff;
  font-weight: normal;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0 10px;
}
.unserInfoWrap .userInfoArea > .iconUser {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: #D9F4F5;
  border-radius: 50%;
  color: #44c9cd;
  font-weight: bold;
  font-size: 24px;
}
.unserInfoWrap .userInfoArea > .txtUserName {
  margin-top: 10px;
  color: #000;
  font-size: 16px;
}
.unserInfoWrap .userInfoArea > .txtUserID {
  color: #999;
  font-size: 12px;
}
.unserInfoWrap .userInfoArea > .btnLogout {
  display: inline-block;
  margin: 10px 0;
  padding: 5px 20px;
  border-radius: 30px;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  font-size: 12px;
}
.unserInfoWrap .userInfoArea > .btnLogout:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
}

.progress-pie-chart {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
}

.progress-pie-chart.gt-50 {
  background-color: #44C9CC;
}

.ppc-progress {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 60px);
  top: calc(50% - 60px);
  width: 120px;
  height: 120px;
  clip: rect(0, 120px, 120px, 60px);
}

.ppc-progress .ppc-progress-fill {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 60px);
  top: calc(50% - 60px);
  width: 120px;
  height: 120px;
  clip: rect(0, 60px, 120px, 0);
  background: #44C9CC;
  transform: rotate(60deg);
}

.gt-50 .ppc-progress {
  clip: rect(0, 60px, 120px, 0);
}

.gt-50 .ppc-progress .ppc-progress-fill {
  clip: rect(0, 120px, 120px, 60px);
  background: #E5E5E5;
}

.ppc-percents {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - 48px);
  top: calc(50% - 48px);
  width: 96px;
  height: 96px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 10px;
  text-align: center;
  display: table;
}

.ppc-percents span {
  display: block;
  font-size: 30px;
  color: #44C9CC;
}

.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.popup.CheckinHistory {
  width: 400px;
  height: 360px;
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
  flex-wrap: unset;
  overflow: hidden;
}

.popup.CheckinHistory .contentsArea {
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.popup.CheckinHistory > .titleArea {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px 30px;
}

.popup.CheckinHistory > .titleArea > .txtTitle {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.popup.CheckinHistory .txtProcessName {
  flex-shrink: 0;
  padding: 10px 30px;
  background-color: #ebefff;
}

.popup.CheckinHistory .txtProcessName > .txtTitle {
  display: flex;
  align-items: center;
  color: #5574F7;
  font-size: 16px;
}

.popup.CheckinHistory .txtProcessName > .txtDescription {
  font-size: 12px;
  opacity: 0.7;
}

.popup.CheckinHistory .CheckinHistoryList {
  height: 100%;
  padding: 10px 0 0 0;
  overflow-y: auto;
}

.popup.CheckinHistory .CheckinHistoryList .ulCheckinHistory {
  width: 100%;
}

.popup.CheckinHistory .CheckinHistoryList .ulCheckinHistory > li {
  padding: 8px 30px;
}

.popup.CheckinHistory .CheckinHistoryList .ulCheckinHistory > li > .titleArea {
  font-size: 12px;
  padding: 4px 0;
}

.popup.CheckinHistory .CheckinHistoryList .ulCheckinHistory > li > .titleArea > .txtName {
  font-weight: bold;
}

.popup.CheckinHistory .CheckinHistoryList .ulCheckinHistory > li > .titleArea > .txtTime:before {
  content: " l ";
}

.popup.CheckinHistory .CheckinHistoryList .ulCheckinHistory > li > .titleArea > .txtTime {
  opacity: 0.7;
}

.popup.CheckinHistory .CheckinHistoryList .ulCheckinHistory > li > .txtMemo {
  display: flex;
  align-items: center;
  color: #474E5D;
  font-size: 12px;
}

.popup.CheckinHistory .CheckinHistoryList .ulCheckinHistory > li > .txtMemo:before {
  content: "";
  display: inline-block;
  margin-right: 6px;
  width: 16px;
  height: 14px;
  background-image: url("../images/icon.svg");
  background-position: -6px -292px;
}

.popup.CheckinHistory .CheckinHistoryList .ulCheckinHistory > li:hover {
  cursor: pointer;
  background-color: #eef2f4;
  color: #5574f7;
}

@media screen and (max-width: 1550px) {
  .IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
    width: calc(33.3% - 20px);
  }
  .IndexDashbord.recentHide > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
    width: calc(25% - 20px);
  }
}
@media screen and (max-width: 1200px) {
  .IndexDashbord > .ServiceModelWrap {
    width: calc(100% - 240px);
  }
  .IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
    width: calc(50% - 20px);
  }
  .IndexDashbord.recentHide > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
    width: calc(33.3% - 20px);
  }
  .IndexDashbord > .RecentWrap {
    width: 240px;
  }
  .IndexDashbord > .RecentWrap > .scrollArea .ulRecent > li > .txtTitle {
    font-size: 14px;
  }
  .ContentsArea .MainDashboard {
    flex-direction: column;
    flex-wrap: nowrap;
    overflow-y: auto;
  }
  .ContentsArea .MainDashboard .dashboardBox {
    width: 100%;
    min-width: 480px;
  }
}
@media screen and (max-width: 1000px) {
  .IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
    width: calc(50% - 20px);
  }
  .IndexDashbord.recentHide > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
    width: calc(33% - 20px);
  }
}
@media screen and (max-width: 900px) {
  #tbtnLeftArea:checked + .tbtnLeftArea + #tbtnRightArea ~ .ContentsArea {
    width: 100%;
  }
}
@media screen and (max-width: 900px) and (max-width: 800px) {
  .IndexDashbord > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
    width: 100%;
  }
  .IndexDashbord.recentHide > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
    width: calc(50% - 20px);
  }
}
@media screen and (max-width: 900px) and (max-width: 600px) {
  .IndexDashbord > .ServiceModelWrap {
    width: 100%;
  }
  .IndexDashbord > .TopBarWrap .rightArea > a.btnRecent,
  .IndexDashbord > .RecentWrap {
    display: none;
  }
  .IndexDashbord.recentHide > .ServiceModelWrap .ServiceModelListWrap .ulServiceModel > li {
    width: 100%;
  }
}
@media screen and (max-width: 900px) and (max-width: 1060px) {
  .IndexDashbord > .ServiceModelWrap > .totalWrap {
    flex-direction: column;
    padding-top: 30px;
  }
  .IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > .txtDescription {
    display: none;
  }
  .IndexDashbord > .ServiceModelWrap > .totalWrap > .leftArea > h1 {
    font-size: 25px;
  }
  .IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea {
    justify-content: flex-start;
    margin-top: 10px;
    padding: 0;
  }
  .IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal {
    padding: 4px;
  }
  .IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > li {
    justify-content: flex-start;
    flex-direction: row;
    width: auto;
    max-width: 140px;
    height: 30px;
    padding: 0 10px;
    border-radius: 5px;
  }
  .IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .ulTotal > li > .txtCount {
    padding-left: 5px;
    font-size: 17px;
  }
  .IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .btnStandard {
    justify-content: flex-start;
    flex-direction: row;
    width: auto;
    height: 40px;
    padding: 0 10px;
  }
  .IndexDashbord > .ServiceModelWrap > .totalWrap > .rightArea .btnStandard .txtCount {
    padding-left: 5px;
    font-size: 17px;
  }
  .IndexDashbord > .RecentWrap {
    padding: 30px 20px 10px;
  }
  .IndexDashbord > .RecentWrap > h2 {
    font-size: 25px;
  }
  .IndexDashbord > .RecentWrap > .scrollArea {
    padding-top: 0;
  }
}
@media screen and (max-width: 900px) and (max-width: 1366px) {
  .processArea > .titleArea > .processMenuArea .btnProcessMenuSmall {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #fff;
  }
  .processArea > .titleArea > .processMenuArea .btnProcessMenuSmall:hover {
    cursor: pointer;
  }
  .processArea > .titleArea > .processMenuArea .btnProcessMenuSmall > i {
    position: relative;
    display: inline-block;
    height: 2px;
    width: 100%;
    background-color: #333;
  }
  .processArea > .titleArea > .processMenuArea .btnProcessMenuSmall > i:before,
  .processArea > .titleArea > .processMenuArea .btnProcessMenuSmall > i:after {
    content: "";
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: currentColor;
  }
  .processArea > .titleArea > .processMenuArea .btnProcessMenuSmall > i:before {
    top: -4px;
  }
  .processArea > .titleArea > .processMenuArea .btnProcessMenuSmall > i:after {
    top: 4px;
  }
  .processArea > .titleArea > .processMenuArea .btnProcessMenuSmall:hover > i,
  .processArea > .titleArea > .processMenuArea .btnProcessMenuSmall:hover > i:before,
  .processArea > .titleArea > .processMenuArea .btnProcessMenuSmall:hover > i:after {
    background-color: #5574f7;
  }
  .processArea > .titleArea > .processMenuArea > ul {
    display: none;
  }
  .processArea > .titleArea > .processMenuArea input[type=checkbox]:checked + .btnProcessMenuSmall {
    border: 1px solid #474E5D;
  }
  .processArea > .titleArea > .processMenuArea input[type=checkbox]:checked + .btnProcessMenuSmall + ul {
    display: block;
    position: absolute;
    right: 0;
    top: 30px;
    min-width: 150px;
    background-color: #fff;
    border: 1px solid #474E5D;
    z-index: 3;
  }
  .processArea > .titleArea > .processMenuArea > ul > li {
    padding: 8px;
  }
  .processArea > .titleArea > .processMenuArea > ul > li:after {
    right: 10px;
    margin: 0;
    transform: rotate(135deg);
    border-color: #ccc;
  }
  .processArea > .titleArea > .processMenuArea > ul > li {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
  .packagingSettingArea > .elementAddArea.Extension {
    width: 600px;
    position: absolute;
    right: 0;
    top: 0;
  }
}
@media screen and (max-width: 900px) and (max-width: 800px) {
  .loginImg {
    display: none;
  }
  .LoginSection {
    width: 100%;
    top: 50%;
    background-position: 10vw bottom;
  }
  .serviceModelSelectedArea.Combobox .txtName,
  header > .leftArea .Combobox.Project .txtValue .txtDescription {
    display: none;
  }
  main > .LeftArea {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 4;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 20px;
  }
  main > .RightArea {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.2) -10px -10px 20px;
    z-index: 4;
  }
  .MainDashboard > .proASProcessArea > .ulProAS > li {
    width: calc((100% - 30px) / 3);
  }
  .packagingSettingArea > .elementListArea {
    width: calc(100% - 25px);
  }
  .packagingSettingArea > .elementAddArea {
    width: 25px;
  }
  .packagingSettingArea .txtSubTitle > span,
  .packagingSettingArea > .elementAddArea > .inputGroup,
  .packagingSettingArea > .elementAddArea > .btnArea {
    opacity: 0;
  }
  .packagingSettingArea > .elementAddArea.Extension {
    width: 100%;
  }
  .packagingSettingArea > .elementAddArea.Extension .txtSubTitle > span,
  .packagingSettingArea > .elementAddArea.Extension > .inputGroup,
  .packagingSettingArea > .elementAddArea.Extension > .btnAre {
    opacity: 1;
  }
  .packagingArea > .packagingSettingArea > .elementListArea .ulElementList > li > .txtName {
    width: 100%;
  }
  .ulElementList > li > .txtDate {
    position: relative;
    right: auto !important;
  }
  .stateInfoArea {
    padding: 0;
  }
}
@media screen and (max-width: 900px) and (max-width: 576px) {
  .loginImg,
  .LoginSection {
    width: 100%;
    top: 50%;
  }
  header > .programBtnArea > a.Help,
  header > .programBtnArea > a.Office,
  header > .programBtnArea > a.Logout,
  .serviceModelSelectedArea.Combobox .txtName {
    display: none;
  }
  main > .LeftArea {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 20px;
    z-index: 4;
  }
  main > .RightArea {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.2) -10px -10px 20px;
    z-index: 4;
  }
  .MainDashboard > .recentProcessArea,
  .MainDashboard > .serviceModelInformationArea {
    width: 100%;
    height: calc((100% - 220px) / 2);
    border-bottom: 1px solid;
  }
  .MainDashboard > .proASProcessArea > .ulProAS > li {
    width: calc(100% - 10px);
  }
  .Page.NewProcess > section.processInfoArea {
    height: calc(75% - 50px);
    width: 100%;
    margin-right: 0;
    border-right: 0px;
  }
  .Page.NewProcess > section.FunctionArea {
    height: 25%;
    min-height: 100px;
    width: 100%;
    padding: 20px 0px;
    border-top: 1px solid #333;
  }
  .Page.NewProcess > section.FunctionArea .btn {
    position: absolute;
    top: 0px;
    right: 0px;
  }
  .popup {
    width: 100% !important;
    height: 100% !important;
    left: 0 !important;
    top: 0 !important;
  }
  .popup.ServiceModel {
    flex-wrap: wrap;
  }
  .popup.ServiceModel > aside {
    width: 100%;
    height: auto;
    border-right: 0px;
  }
  .popup.ServiceModel .contentsArea {
    padding: 0;
    height: 50%;
  }
  .ModelReqArea {
    flex-wrap: wrap;
  }
  .medelReqListArea {
    width: 100%;
    height: 50%;
    border-right: 0px;
  }
  .modelNewReqArea {
    width: 100%;
    height: 50%;
    border-top: 1px solid #a7b2c4;
  }
  .popup.processFunction > .contentsArea .listArea {
    width: 100%;
    height: 50%;
  }
  .popup.processFunction > .contentsArea .programCodehlep {
    width: 100%;
    height: 50%;
    border-left: 0px;
    border-top: 1px solid #454e5f;
  }
  .popup.processFunction > .btnArea {
    justify-content: flex-end;
  }
  .popup.elementAddDel > .contentsArea {
    flex-wrap: wrap;
  }
  .popup > .contentsArea > .sectionHalf {
    width: 100%;
    height: 50%;
    border-left: 0px;
    border-top: 1px solid #454e5f;
  }
  .stateInfoArea {
    display: block;
  }
}/*# sourceMappingURL=Layout.css.map */