@charset "utf-8";
/* Author : PULIP COMMUNICATIONS, Smart Media Group */
html,
body {
    height: 100vh;
    background: #dcd6d3;
    overflow: hidden !important;
}

.biostarUIContainer {
    overflow: hidden;
}
/* wrap */
.wrap {
    overflow: hidden;
    position: relative;
    width: 100vw;
    padding: 0;
}

.leftMainMenu {
    position:absolute;
    background: #594b4f;
    left: 0;
    top: 68px; /* 위에 header 값 만큼 가변적으로 띄어줌 */
    height:calc(100vh - 100px);
}

.wrap .wrap.bgPrint {
    background: #fff;
}

.wrap.filterPage {
}

/* header */
header {
    overflow: hidden;
    position: relative;
    height: 68px;
    border-bottom: 1px solid #020202;
    background: #312d2e;
    z-index: 500;
}

header h1 {
    float: left;
    width: 107px;
    height: 13px;
    margin: 29px 42px 0 22px;
    font-size: 1.250em;
    color: #fff;
    font-weight: bold;
    text-indent: -9999px;
    background: url(../images/common/sp_layout.png) 0 0 no-repeat;
}

header .quickActionButton {
    float: left;
    margin: 25px 0 0 52px;
}

header .quickActionButton li {
    float: left;
}

header .quickActionButton button {
    display: inline-block;
    position: relative;
    width: 130px;
    height: 28px;
    padding: 0px 20px;
    margin: 0 10px 0 0;
    font-size: 0.917em;
    color: #000;
    bottom: 3px;
}

header .skipMenu {
    float: left;
    margin: 25px 0 0 0;
}

header .skipMenu li {
    float: left;
}

header .skipMenu a {
    display: inline-block;
    position: relative;
    height: 20px;
    padding: 5px 0 0 26px;
    margin: 0 13px 0 0;
    font-size: 0.917em;
    color: #fff;
}

header .skipMenu a:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 21px;
    background-image: url(../images/common/sp_layout.png);
    background-repeat: no-repeat;
}

header .skipMenu a:hover, header .skipMenu a:focus {
    color: #e1c855;
}

header .skipMenu a:active {
    color: #19a5a0;
}

header .skipMenu button {
    display: inline-block;
    position: relative;
    height: 20px;
    padding: 0 0 0 27px;
    margin: 0 10px 0 0;
    font-size: 0.917em;
    color: #fff;
}

header .skipMenu button:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 21px;
    background-image: url(../images/common/sp_layout.png);
    background-repeat: no-repeat;
}

header .skipMenu button:hover, header .skipMenu button:focus {
    color: #e1c855;
}

header .skipMenu button:active {
    color: #19a5a0;
}

/* icon */
header .skipMenu .help:before {
    background-position: -60px -12px;
}

header .skipMenu .help:hover:before, header .skipMenu .help:focus:before {
    background-position: -80px -12px;
}

header .skipMenu .help:active:before {
    background-position: -100px -12px;
}

header .skipMenu .setting:before {
    background-position: -120px -12px;
}

header .skipMenu .setting:hover:before, header .skipMenu .setting:focus:before {
    background-position: -140px -12px;
}

header .skipMenu .setting:active:before {
    background-position: -160px -12px;
}

header .skipMenu .portSetting:before {
    background-position: -258px -12px;
}

header .skipMenu .portSetting:hover:before, header .skipMenu .portSetting:focus:before {
    background-position: -278px -12px;
}

header .skipMenu .portSetting:active:before {
    background-position: -298px -12px;
}

header .skipMenu .about:before {
    background-position: -180px -12px;
}

header .skipMenu .about:hover:before, header .skipMenu .about:focus:before {
    background-position: -200px -12px;
}

header .skipMenu .about:active:before {
    background-position: -220px -12px;
}

header .memberInfo {
    position: relative;
    float: right;
    padding: 7px 30px 0 0;
    margin: 10px 22px 0 0;
}

header .memberInfo .member {
    font-size: 0.917em;
    color: #fff;
    text-align: right;
}

header .memberInfo .member b {
    font-size: 1.083em;
}

header .memberInfo .visit {
    margin: 7px 0 0 0;
    text-align: right;
}

header .memberInfo .visit span {
    display: inline-block;
    float: left;
    margin: 6px 7px 0 0;
    font-size: 0.917em;
    color: #828282;
}

header .memberInfo figure {
    position: absolute;
    right: 0px;
    top: 0px;
}

header .memberInfo figure img {
    width: 42px;
    height: 42px;
    border: 1px solid #f5f4f4;
}

header .memberInfo .logout {
    display: inline-block;
    float: right;
    position: relative;
    width: 69px;
    height: 21px;
    margin: 0 -2px 0 0;
    padding: 0 0 0 23px;
    font-size: 0.917em;
    color: #fff;
    line-height: 19px;
    text-align: left;
    border-radius: 2px;
    border: 1px solid #151414;
    box-shadow: inset 0 0 0 1px #3b3736;
    background: #312d2e;
}

header .memberInfo .logout:before {
    display: block;
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    width: 11px;
    height: 11px;
    background-image: url(../images/common/sp_layout.png);
    background-position: 0 -13px;
    background-repeat: no-repeat;
}

header .memberInfo .logout:hover, header .memberInfo .logout:focus {
    color: #e1c855;
    border: 1px solid #e1c855;
    box-shadow: none;
}

header .memberInfo .logout:hover:before, header .memberInfo .logout:focus:before {
    background-position: -20px -13px;
}

header .memberInfo .logout:active {
    color: #19a5a0;
    border: 1px solid #19a5a0;
    box-shadow: none;
}

header .memberInfo .logout:active:before {
    background-position: -40px -13px;
}

/* sm-container */
.sm-container {
    position: unset;
    height: calc(100vh - 68px);
    padding: 0;
    z-index: 300;
}

.bgPrint .sm-container {
    max-width: 100%;
}

.panelAreaOpen .sm-container {
}

/* nav */
nav {
    position: relative;
    float: left;
    width: 80px;
    background: #594b4f;
    z-index: 300;
}

.sm-nav button {
    white-space: pre;
    display: block;
    position: relative;
    width: 100%;
    height: 85px;
    padding: 42px 0 0 0;
    font-size: 0.833em;
    color: #9b9196;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #453e40;
    background-image: url(../images/common/sp_layout.png);
    background-repeat: no-repeat;
    line-height: 1.10em;
}
.sm-nav button:active, .sm-nav button:hover {
    color: #e1c855;
    text-shadow:
    -2px -2px 1px #73666a,
    2px -2px 1px #73666a,
    -2px 2px 1px #73666a,
    2px 2px 1px #73666a;
}

.sm-nav .on button {
    color: #fff;
    box-shadow: inset -3px 0 2px 0 #e06162;
    background-color: #f47971;
}

.sm-nav .on button:active, .sm-nav .on button:hover {
    color: #fff;
    text-shadow: none;
}

/* icon */
.sm-nav li.DASHBOARD button {
    padding: 35px 0 0 0;
    background-position: 0px -33px;
}

.sm-nav li.USER button {
    background-position: -80px -33px;
}

.sm-nav li.DEVICE button {
    background-position: -160px -33px;
}

.sm-nav li.ACCESS_CONTROL button {
    background-position: -240px -33px;
}

.sm-nav li.MONITORING button {
    padding: 38px 0 0 0;
    background-position: -320px -33px;
}

.sm-nav li.TA button {
    padding: 38px 0 0 0;
    background-position: -401px -36px;
}

.sm-nav li.DOOR button {
    background-position: -560px -33px;
}

.sm-nav li.ZONE button {
    background-position: -640px -33px;
}

.sm-nav li.TIME_ATTENDANCE button {
    background-position: -640px -33px;
}

/* hover */
.sm-nav li.DASHBOARD button:hover, .sm-nav li.DASHBOARD button:focus {
    background-position: 0px -203px;
}

.sm-nav li.USER button:hover, .sm-nav li.USER button:focus {
    background-position: -80px -203px;
}

.sm-nav li.DEVICE button:hover, .sm-nav li.DEVICE button:focus {
    background-position: -160px -203px;
}

.sm-nav li.ACCESS_CONTROL button:hover, .sm-nav li.ACCESS_CONTROL button:focus {
    background-position: -240px -203px;
}

.sm-nav li.MONITORING button:hover, .sm-nav li.MONITORING button:focus {
    background-position: -320px -203px;
}

.sm-nav li.TA button:hover, .sm-nav li.TA button:focus {
    background-position: -401px -206px;
}

.sm-nav li.DOOR button:hover, .sm-nav li.DOOR button:focus {
    background-position: -560px -203px;
}

.sm-nav li.ZONE button:hover, .sm-nav li.ZONE button:focus {
    background-position: -640px -203px;
}

.sm-nav li.TIME_ATTENDANCE button:hover, .sm-nav li.TIME_ATTENDANCE button:focus {
    background-position: -640px -203px;
}

/* on */
.sm-nav li.DASHBOARD.on button {
    background-position: 0px -118px;
}

.sm-nav li.USER.on button {
    background-position: -80px -118px;
}

.sm-nav li.DEVICE.on button {
    background-position: -160px -118px;
}

.sm-nav li.ACCESS_CONTROL.on button {
    background-position: -240px -118px;
}

.sm-nav li.MONITORING.on button {
    background-position: -320px -118px;
}

.sm-nav li.TA.on button {
    background-position: -401px -121px;
}

.sm-nav li.DOOR.on button {
    background-position: -560px -118px;
}

.sm-nav li.ZONE.on button {
    background-position: -640px -118px;
}

.sm-nav li.TIME_ATTENDANCE .on button {
    background-position: -640px -118px;
}

/* context menu */
.sm-navContextMenu {
    display: none;
    position: absolute;
    min-width: 124px;
    border: 1px solid #f47971;
    border-left: none;
    background: rgba(255, 240, 240, 0.9);
    z-index: 50;
    left: calc(0vw + 6.7em);
}

.sm-navContextMenu.open {
    display: block;
}

.sm-navContextMenu li {
    border-top: 1px solid #ffc3c3;
}

.sm-navContextMenu li:first-child {
    border-top: 0;
}

.sm-navContextMenu a {
    display: block;
    height: 27px;
    padding: 8px 16px;
    font-size: 11px;
    color: #f47971;
    font-weight: bold;
    text-align: left;
}

.sm-navContextMenu li.on a, .sm-navContextMenu li a:hover, .sm-navContextMenu li a:focus {
    background: rgba(244, 121, 113, 0.15);
}

/* panelArea */
.panelArea {
    display: none;
    float: left;
    width: 240px;
    background: #fff;
    margin-bottom: 30px;
    height: calc(100vh - 100px);
    z-index: 200;
}

.leftTreeMenu {
    height: calc(100vh - 170px);
    overflow-y: scroll;
}

#monitoringTree .tree-title {
    width: 100%;
}

.sm-container:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: -20px;
    width: 100%;
    height: 25px;
    background:#312d2e;
    z-index: -1;
}

.panelAreaOpen .panelArea {
    display: block;
    position: relative;
    border-top-right-radius: 8px;
}

.panelAreaBtn {
    padding: 18px 12px 14px 12px;
    text-align: center;
    border-top-right-radius: 8px;
    border-bottom: 1px solid #b4b4b4;
    background: #f4f3f2;
}

.panelAreaBtn .sm-btn {
    display: inline-block;
    padding: 0 0 3px 0;
}

.panelAreaBtn .sm-btn > button,
.panelAreaBtn .sm-btn > a {
    display: block;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    border-radius: 5px;
}

.panelAreaBtn .sm-btn > button .icon,
.panelAreaBtn .sm-btn > a .icon {
    display: inline-block;
    text-align: left;
    text-transform: uppercase;
}



/* USER */
.panelAreaBtn .sm-btn > [class*="USicon"] {
    width: 216px;
    height: 34px;
    margin: 0 0 6px 0;
}

.panelAreaBtn .sm-btn > [class*="USicon"]:last-child {
    margin-bottom: 0;
}

.panelAreaBtn .sm-btn > [class*="USicon"] .icon {
    height: 32px;
    text-align: center;
    line-height: 31px;
}

.panelAreaBtn .STiconAccount .icon {
    padding-left: 28px;
    background-image: url(../images/common/ic_add_custom.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .USiconAddUser .icon {
    padding-left: 28px;
    background-image: url(../images/common/icon_us_adduser.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .USiconAddUser:active .icon {
    background-image: url(../images/common/icon_us_adduser_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .USiconAddUser.disabled .icon {
    background-image: url(../images/common/icon_us_adduser_disabled.png);
    background-position: 2px 6px;
}

.panelAreaBtn .USiconImportUser .icon {
    padding-left: 28px;
    background-image: url(../images/common/icon_us_importuser.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .USiconImportUser:active .icon {
    background-image: url(../images/common/icon_us_importuser_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .USiconImportUser.disabled .icon {
    background-image: url(../images/common/icon_us_importuser_disabled.png);
    background-position: 2px 6px;
}

/* DEVICE */
.panelAreaBtn .sm-btn > [class*="DVicon"] {
    width: 216px;
    height: 34px;
    margin: 0 0 6px 0;
}

.panelAreaBtn .sm-btn > [class*="DVicon"]:last-child {
    margin-bottom: 0;
}

.panelAreaBtn .sm-btn > [class*="DVicon"] .icon {
    height: 32px;
    text-align: center;
    line-height: 31px;
}

.panelAreaBtn .DViconSearchDevice .icon {
    padding-left: 28px;
    background-image: url(../images/common/icon_dv_searchdevice.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .DViconSearchDevice:active .icon {
    background-image: url(../images/common/icon_dv_searchdevice_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .DViconSearchDevice.disabled .icon {
    background-image: url(../images/common/icon_dv_searchdevice_disabled.png);
    background-position: 2px 6px;
}

.panelAreaBtn .DViconAdvancedSearch .icon {
    padding-left: 28px;
    background-image: url(../images/common/icon_dv_advancedsearch.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .DViconAdvancedSearch:active .icon {
    background-image: url(../images/common/icon_dv_advancedsearch_active.png);
    background-position: 2px 5px;
}

.panelAreaBtn .DViconAdvancedSearch.disabled .icon {
    background-image: url(../images/common/icon_dv_advancedsearch_disabled.png);
    background-position: 2px 5px;
}

/* ACCESS CONTROL */
.panelAreaBtn .sm-btn > [class*="ACicon"] {
    width: 216px;
    height: 34px;
    margin: 0 0 6px 0;
}

.panelAreaBtn .sm-btn > [class*="ACicon"]:last-child {
    margin-bottom: 0;
}

.panelAreaBtn .sm-btn > [class*="ACicon"] .icon {
    height: 32px;
    text-align: center;
    line-height: 31px;
}

.panelAreaBtn .ACiconNewDoor .icon {
    padding-left: 23px;
    background-image: url(../images/common/icon_ac_newdoor.png);
    background-repeat: no-repeat;
    background-position: left 5px;
}

.panelAreaBtn .ACiconNewDoor:active .icon {
    background-image: url(../images/common/icon_ac_newdoor_active.png);
    background-position: 2px 7px;
}

.panelAreaBtn .ACiconNewDoor.disabled .icon {
    background-image: url(../images/common/icon_ac_newdoor_disabled.png);
    background-position: 2px 7px;
}

.panelAreaBtn .ACiconNewElevator .icon {
  padding-left: 28px;
  background-image: url(../images/common/icon_ac_elevator.png);
  background-repeat: no-repeat;
  background-position: left 5px;
}

.panelAreaBtn .ACiconNewElevator:active .icon {
  background-image: url(../images/common/icon_ac_elevator_active.png);
  background-position: 2px 7px;
}

.panelAreaBtn .ACiconNewElevator.disabled .icon {
  background-image: url(../images/common/icon_ac_elevator_disabled.png);
  background-position: 2px 7px;
}


.panelAreaBtn .ACiconMultipleDoors .icon {
    padding-left: 28px;
    background-image: url(../images/common/icon_ac_multipledoors.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .ACiconMultipleDoors:active .icon {
    background-image: url(../images/common/icon_ac_multipledoors_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .ACiconMultipleDoors.disabled .icon {
    background-image: url(../images/common/icon_ac_multipledoors_disabled.png);
    background-position: 2px 6px;
}

.panelAreaBtn .ACiconNewZone .icon {
    padding-left: 25px;
    background-image: url(../images/common/icon_ac_newzone.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .ACiconNewZone:active .icon {
    background-image: url(../images/common/icon_ac_newzone_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .ACiconNewZone.disabled .icon {
    background-image: url(../images/common/icon_ac_newzone_disabled.png);
    background-position: 2px 6px;
}

.panelAreaBtn .ACiconAccess .icon {
    padding-left: 28px;
    background-repeat: no-repeat;
    background-position: left 3px;
}
.panelAreaBtn .ACiconAccess .icon.group {
    background-image: url(../images/common/icon_ac_group.png);
}
.panelAreaBtn .ACiconAccess .icon.level {
    background-image: url(../images/common/icon_ac_level.png);
}

.panelAreaBtn .ACiconAccess:active .icon.group {
    background-image: url(../images/common/icon_ac_group_active.png);
    background-position: 2px 5px;
}

.panelAreaBtn .ACiconAccess:active .icon.level {
    background-image: url(../images/common/icon_ac_level_active.png);
    background-position: 2px 5px;
}

.panelAreaBtn .ACiconAccess.disabled .icon.group {
    background-image: url(../images/common/icon_ac_group_disabled.png);
    background-position: 2px 5px;
}
.panelAreaBtn .ACiconAccess.disabled .icon.level {
    background-image: url(../images/common/icon_ac_level_disabled.png);
    background-position: 2px 5px;
}

.panelAreaBtn .ACiconAccess .icon.floor {
    padding-left: 31px;
    background-image: url(../images/common/icon_ac_floor.png);
    background-repeat: no-repeat;
    background-position: 2px 4px;
}

.panelAreaBtn .ACiconAccess:active .icon.floor {
    background-image: url(../images/common/icon_ac_floor_active.png);
    background-position: 2px 4px;
}

.panelAreaBtn .ACiconAccess.disabled .icon.floor {
    background-image: url(../images/common/icon_ac_floor_disabled.png);
    background-position: 2px 4px;
}

/* MONITORING */
.panelAreaBtn .sm-btn > [class*="MTicon"] {
    width: 216px;
    height: 34px;
    margin: 0 0 6px 0;
}

.panelAreaBtn .sm-btn > [class*="MTicon"]:last-child {
    margin-bottom: 0;
}

.panelAreaBtn .sm-btn > [class*="MTicon"] .icon {
    height: 32px;
    text-align: center;
    line-height: 31px;
}

.panelAreaBtn .MTiconGrid .icon {
    padding-left: 28px;
    background-image: url(../images/common/icon_mt_grid.png);
    background-repeat: no-repeat;
    background-position: left 5px;
}

.panelAreaBtn .MTiconGrid:active .icon {
    background-image: url(../images/common/icon_mt_grid_active.png);
    background-position: 2px 7px;
}

.panelAreaBtn .MTiconGrid.disabled .icon {
    background-image: url(../images/common/icon_mt_grid_disabled.png);
    background-position: 2px 7px;
}

.panelAreaBtn .MTiconMap .icon {
    padding-left: 31px;
    background-image: url(../images/common/icon_mt_map.png);
    background-repeat: no-repeat;
    background-position: left 5px;
}

.panelAreaBtn .MTiconMap:active .icon {
    background-image: url(../images/common/icon_mt_map_active.png);
    background-position: 2px 7px;
}

.panelAreaBtn .MTiconMap.disabled .icon {
    background-image: url(../images/common/icon_mt_map_disabled.png);
    background-position: 2px 7px;
}

.panelAreaBtn .MTiconFilter .icon {
    padding-left: 31px;
    background-image: url(../images/common/icon_mt_filter.png);
    background-repeat: no-repeat;
    background-position: left 6px;
}

.panelAreaBtn .MTiconFilter:active .icon {
    background-image: url(../images/common/icon_mt_filter_active.png);
    background-position: 2px 8px;
}

.panelAreaBtn .MTiconFilter.disabled .icon {
    background-image: url(../images/common/icon_mt_filter_disabled.png);
    background-position: 2px 8px;
}

/* T&A */
.panelAreaBtn .sm-btn > [class*="TAicon"] {
    width: 216px;
    height: 34px;
    margin: 0 0 6px 0;
}

.panelAreaBtn .sm-btn > [class*="TAicon"]:last-child {
    margin-bottom: 0;
}

.panelAreaBtn .sm-btn > [class*="TAicon"] .icon {
    height: 32px;
    text-align: center;
    line-height: 31px;
}

.panelAreaBtn .TAiconPayCode .icon {
    padding-left: 29px;
    background-image: url(../images/common/icon_ta_paycode.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .TAiconPayCode:active .icon {
    background-image: url(../images/common/icon_ta_paycode_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .TAiconPayCode.disabled .icon {
    background-image: url(../images/common/icon_ta_paycode_disabled.png);
    background-position: 2px 6px;
}

.panelAreaBtn .TAiconShift .icon {
    padding-left: 32px;
    background-image: url(../images/common/icon_ta_shifttemplate.png);
    background-repeat: no-repeat;
    background-position: left 6px;
}

.panelAreaBtn .TAiconShift:active .icon {
    background-image: url(../images/common/icon_ta_shifttemplate_active.png);
    background-position: 2px 8px;
}

.panelAreaBtn .TAiconShift.disabled .icon {
    background-image: url(../images/common/icon_ta_shifttemplate_disabled.png);
    background-position: 2px 8px;
}

.panelAreaBtn .TAiconRule .icon {
    padding-left: 29px;
    background-image: url(../images/common/icon_ta_rule.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .TAiconRule:active .icon {
    background-image: url(../images/common/icon_ta_rule_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .TAiconRule.disabled .icon {
    background-image: url(../images/common/icon_ta_rule_disabled.png);
    background-position: 2px 6px;
}

.TAiconShiftTemplate {
}

/* Settings */
.panelAreaBtn .sm-btn > [class*="STicon"] {
    width: 216px;
    height: 34px;
    margin: 0 0 6px 0;
}

.panelAreaBtn .sm-btn > [class*="STicon"]:last-child {
    margin-bottom: 0;
}

.panelAreaBtn .sm-btn > [class*="STicon"] .icon {
    height: 32px;
    text-align: center;
    line-height: 31px;
}

.panelAreaBtn .STiconLevel .icon {
    padding-left: 29px;
    background-image: url(../images/common/icon_st_level.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .STiconLevel:active .icon {
    background-image: url(../images/common/icon_st_level_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .STiconLevel.disabled .icon {
    background-image: url(../images/common/icon_st_level_disabled.png);
    background-position: 2px 6px;
}

.panelAreaBtn .STiconAlarm .icon {
    padding-left: 30px;
    background-image: url(../images/common/icon_st_alarm.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .STiconAlarm:active .icon {
    background-image: url(../images/common/icon_st_alarm_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .STiconAlarm.disabled .icon {
    background-image: url(../images/common/icon_st_alarm_disabled.png);
    background-position: 2px 6px;
}

.panelAreaBtn .STiconSchedule .icon {
    padding-left: 28px;
    background-image: url(../images/common/icon_st_schedule.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .STiconSchedule:active .icon {
    background-image: url(../images/common/icon_st_schedule_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .STiconSchedule.disabled .icon {
    background-image: url(../images/common/icon_st_schedule_disabled.png);
    background-position: 2px 6px;
}

.panelAreaBtn .STiconHoliday .icon {
    padding-left: 29px;
    background-image: url(../images/common/icon_st_holiday.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .STiconHoliday:active .icon {
    background-image: url(../images/common/icon_st_holiday_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .STiconHoliday.disabled .icon {
    background-image: url(../images/common/icon_st_holiday_disabled.png);
    background-position: 2px 6px;
}

.panelAreaBtn .STiconBatchEnroll .icon {
    padding-left: 31px;
    background-image: url(../images/common/icon_st_batchenroll.png);
    background-repeat: no-repeat;
    background-position: left 6px;
}

.panelAreaBtn .STiconBatchEnroll:active .icon {
    background-image: url(../images/common/icon_st_batchenroll_active.png);
    background-position: 2px 8px;
}

.panelAreaBtn .STiconBatchEnroll.disabled .icon {
    background-image: url(../images/common/icon_st_batchenroll_disabled.png);
    background-position: 2px 8px;
}

.panelAreaBtn .STiconCard .icon {
    padding-left: 29px;
    background-image: url(../images/common/icon_st_card.png);
    background-repeat: no-repeat;
    background-position: left 7px;
}

.panelAreaBtn .STiconCard:active .icon {
    background-image: url(../images/common/icon_st_card_active.png);
    background-position: 2px 9px;
}

.panelAreaBtn .STiconCard.disabled .icon {
    background-image: url(../images/common/icon_st_card_disabled.png);
    background-position: 2px 9px;
}

.panelAreaBtn .USiconAddGraphicMap .icon {
    padding-left: 28px;
    background-image: url(../images/graphicMap/icon_mt_graphicmap.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn .USiconAddGraphicMap:active .icon {
    background-image: url(../images/graphicMap/icon_mt_graphicmap_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn .USiconAddGraphicMap.disabled .icon {
    background-image: url(../images/graphicMap/icon_mt_graphicmap_disabled.png);
    background-position: 2px 6px;
}

.panelAreaBtn-NoHide {
    padding: 18px 12px 14px 12px;
    text-align: center;
    border-top-right-radius: 8px;
    border-bottom: 1px solid #b4b4b4;
    background: #f4f3f2;
}

.panelAreaBtn-NoHide .sm-btn {
    display: inline-block;
    padding: 0 0 3px 0;
}

.panelAreaBtn-NoHide .sm-btn > button,
.panelAreaBtn-NoHide .sm-btn > a {
    display: block;
    font-weight: bold;
    text-align: center;
    line-height: 1;
    border-radius: 5px;
}

.panelAreaBtn-NoHide .sm-btn > button .icon,
.panelAreaBtn-NoHide .sm-btn > a .icon {
    display: inline-block;
    text-align: left;
    text-transform: uppercase;
}

.panelAreaBtn-NoHide .sm-btn > [class*="USicon"] {
    width: 216px;
    height: 34px;
    margin: 0 0 6px 0;
}

.panelAreaBtn-NoHide .sm-btn > [class*="USicon"]:last-child {
    margin-bottom: 0;
}

.panelAreaBtn-NoHide .sm-btn > [class*="USicon"] .icon {
    height: 32px;
    text-align: center;
    line-height: 31px;
}

.panelAreaBtn-NoHide .USiconAddGraphicMap .icon {
    padding-left: 28px;
    background-image: url(../images/graphicMap/icon_mt_graphicmap.png);
    background-repeat: no-repeat;
    background-position: left 4px;
}

.panelAreaBtn-NoHide .USiconAddGraphicMap:active .icon {
    background-image: url(../images/graphicMap/icon_mt_graphicmap_active.png);
    background-position: 2px 6px;
}

.panelAreaBtn-NoHide .USiconAddGraphicMap.disabled .icon {
    background-image: url(../images/graphicMap/icon_mt_graphicmap_disabled.png);
    background-position: 2px 6px;
}

/* btnMT */
.btnMT {
    height: 25px;
    border-radius: 4px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    background: -moz-linear-gradient(top, #fbfbfb 0%, #ebebeb 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #ebebeb)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fbfbfb 0%, #ebebeb 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fbfbfb 0%, #ebebeb 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #fbfbfb 0%, #ebebeb 100%); /* IE10+ */
    background: linear-gradient(to bottom, #fbfbfb 0%, #ebebeb 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#ebebeb'); /* IE6-9 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='#ebebeb'); /* IE6-9 */
}

.btnMT a {
    display: block;
    float: left;
    position: relative;
    width: 33.33%; /* TODO map, grid view가 필요하면 이 값을 20%로 수정한다.*/
    height: 25px;
    border: 1px solid #b4b4b4;
    border-right: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.btnMT a:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.btnMT a:last-child {
    border-right: 1px solid #b4b4b4;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.btnMT a mark {
    display: none;
    position: absolute;
    top: -21px;
    padding: 6px 8px 5px 7px;
    font-size: 0.917em;
    color: #fa4b37;
    font-weight: normal;
    white-space: nowrap;
    border: 1px solid #fa4b37;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
    background: #fef1f1;
}

.btnMT a:after {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 20px;
    margin-left: -11px;
    margin-top: -10px;
    background-repeat: no-repeat;
}

.btnMT a.btnMT_table:after {
    background-image: url(../images/common/btn_typeC_table.png);
    background-position: center 2px;
}

.btnMT a.btnMT_grid:after {
    background-image: url(../images/common/btn_typeC_grid.png);
    background-position: center 2px;
}

.btnMT a.btnMT_map:after {
    background-image: url(../images/common/btn_typeC_map.png);
    background-position: center 2px;
}

.btnMT a.btnMT_event:after {
    background-image: url(../images/common/btn_typeC_event.png);
    background-position: center 5px;
}

.btnMT a.btnMT_audit:after {
    background-image: url(../images/common/btn_typeC_audit.png);
    background-position: center 3px;
}

.btnMT + .sm-btn {
    margin: 10px 0 0 0;
}

/* mark */
.btnMT a.btnMT_table mark, .btnMT a.btnMT_grid mark, .btnMT a.btnMT_map mark, .btnMT a.btnMT_event mark {
    left: -11px;
}

.btnMT a.btnMT_audit mark {
    right: 11px;
}

.btnMT a:hover mark, .btnMT a:focus mark {
    display: block;
}

/* hover */
.btnMT a:hover, .btnMT a:focus {
    border: 1px solid #19a5a0;
    border-right: 0;
}

.btnMT a:hover:last-child, .btnMT a:focus:last-child {
    border-right: 1px solid #19a5a0;
}

.btnMT a:hover + a, .btnMT a:focus + a {
    border-left: 1px solid #19a5a0;
}

.btnMT a.btnMT_table:hover:after, .btnMT a.btnMT_table:focus:after {
    background-image: url(../images/common/btn_typeC_table_hover.png);
    background-position: center 2px;
}

.btnMT a.btnMT_grid:hover:after, .btnMT a.btnMT_grid:focus:after {
    background-image: url(../images/common/btn_typeC_grid_hover.png);
    background-position: center 2px;
}

.btnMT a.btnMT_map:hover:after, .btnMT a.btnMT_map:focus:after {
    background-image: url(../images/common/btn_typeC_map_hover.png);
    background-position: center 2px;
}

.btnMT a.btnMT_event:hover:after, .btnMT a.btnMT_event:focus:after {
    background-image: url(../images/common/btn_typeC_event_hover.png);
    background-position: center 5px;
}

.btnMT a.btnMT_audit:hover:after, .btnMT a.btnMT_audit:focus:after {
    background-image: url(../images/common/btn_typeC_audit_hover.png);
    background-position: center 3px;
}

/* on */
.btnMT a.on, .btnMT a:active {
    border: 1px solid #19a5a0;
    border-right: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    background: -moz-linear-gradient(top, #7dcace 0%, #6db9be 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7ecace), color-stop(100%, #6db9be)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7ecace 0%, #6db9be 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7ecace 0%, #6db9be 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7ecace 0%, #6db9be 100%); /* IE10+ */
    background: linear-gradient(to bottom, #7ecace 0%, #6db9be 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ecace', endColorstr='#6db9be'); /* IE6-9 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ecace', endColorstr='#6db9be'); /* IE6-9 */
}

.btnMT a.on:last-child {
    border-right: 1px solid #19a5a0;
}

.btnMT a.on + a {
    border-left: 1px solid #19a5a0;
}

.btnMT a.btnMT_table.on:after, .btnMT a.btnMT_table:active:after {
    background-image: url(../images/common/btn_typeC_table_on.png);
    background-position: center 0;
}

.btnMT a.btnMT_grid.on:after, .btnMT a.btnMT_grid:active:after {
    background-image: url(../images/common/btn_typeC_grid_on.png);
    background-position: center 0;
}

.btnMT a.btnMT_map.on:after, .btnMT a.btnMT_map:active:after {
    background-image: url(../images/common/btn_typeC_map_on.png);
    background-position: center 0;
}

.btnMT a.btnMT_event.on:after, .btnMT a.btnMT_event:active:after {
    background-image: url(../images/common/btn_typeC_event_on.png);
    background-position: center 2px;
}

.btnMT a.btnMT_audit.on:after, .btnMT a.btnMT_audit:active:after {
    background-image: url(../images/common/btn_typeC_audit_on.png);
    background-position: center 1px;
}


.splitterDiv {
    position: absolute;
    float: right;
    top: 90px;
}

.splitterRight {
    display: block;
    position: absolute;
    right: -19px;
    width: 19px;
    height: 32px;
    margin-top: -16px;
    background: url(../images/common/sp_layout.png) no-repeat -20px -380px;
    cursor: w-resize;
    z-index: 1000;
}

.splitterRight:hover {
    height: 62px;
    margin-top: -31px;
    background-position: -20px -420px;
    z-index: 1000;
}

.splitterLeft {
    display: block;
    position: absolute;
    right: -19px;
    /*top: 50%;*/
    width: 19px;
    height: 32px;
    margin-top: -16px;
    background: url(../images/common/sp_layout.png) no-repeat 0 -380px;
    cursor: w-resize;
    z-index: 100;
}

.splitterLeft:hover {
    height: 62px;
    margin-top: -31px;
    background-position: 0 -420px;
    z-index: 100;
}

/* formArea */
/* lnb */
.lnb {
}

.lnb li {
    position: relative;
}

.lnb li > span,
.lnb li > a {
    cursor: pointer;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 36px;
    padding: 12px 0 0 34px;

    border-bottom: 1px solid #ebebeb;
    z-index: 10;
}

.lnb li > span:before,
.lnb li > a:before {
    display: block;
    content: "";
    position: absolute;
    left: 17px;
    top: 8px;
    width: 20px;
    height: 20px;
    background-image: url(../images/common/sp_layout.png);
    background-position: -440px -288px;
    background-repeat: no-repeat;
}

.lnb li > span:hover, .lnb li > span:focus, .lnb li > span:active,
.lnb li > a:hover, .lnb li > a:focus, .lnb li > a:active {
    background-color: #f7f2c0;
}

.lnb .sm-btn {
    position: absolute;
    right: 17px;
    top: 12px;
    z-index: 30;
}

.lnb .sm-btn span {
    margin-left: 2px;
}

.lnb li.selection span, .lnb li.on span,
.lnb li.selection a, .lnb li.on a {
    background-color: #dcf1f2;
}

.lnb li.selection span, .lnb li span.on,
.lnb li.selection a, .lnb li a.on {
    background-color: #dcf1f2;
}

.lnb > ul > li > span,
.lnb > ul > li > a {
    display: inline-block;
    padding-left: 34px;
}

.lnb > ul > li > span:before,
.lnb > ul > li > a:before {
    left: 17px;
    background-position: -440px -288px;
}

.lnb > ul > li > ul > li > span,
.lnb > ul > li > ul > li > a {
    padding-left: 50px;
}

.lnb > ul > li > ul > li > span:before,
.lnb > ul > li > ul > li > a:before {
    left: 36px;
    background-position: -460px -288px;
}

.lnb > ul > [class*="lnbIcon"] > span,
.lnb > ul > [class*="lnbIcon"] > a {
    padding-left: 41px;
}

.lnb > ul > li.lnbIconPaycode > span:before,
.lnb > ul > li.lnbIconPaycode > a:before {
    background-position: -320px -288px;
}

.lnb > ul > li.lnbIconShift > span:before,
.lnb > ul > li.lnbIconShift > a:before {
    background-position: -400px -288px;
}

.lnb > ul > li.lnbIconRule > span:before,
.lnb > ul > li.lnbIconRule > a:before {
    background-position: -320px -288px;
}

.lnb li.editForm {
    height: 36px;
    padding: 3px 14px;
    border-bottom: 1px solid #ebebeb;
}

.lnb li.editForm .input {
    width: 100%;
}

/* contents */
.contents {
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
    margin-right: 0px;
    height: calc(100vh - 100px);
    padding: 31px 25px 60px 35px; /*border-left: 1px solid #b4acab;*/
    background: #dcd6d3;
    zoom: 1;
    z-index: 100;
    background-image: url('../images/sp_contents_left_border.png');
    background-repeat: repeat-y;
}

.contents:after {
    content: "";
    display: block;
    clear: both;
}

.help-contents {
    position: relative;
    overflow: hidden;
    padding: 31px 25px 31px 35px;
    border-left: 1px solid #b4acab;
    border-top-left-radius: 8px;
    background: #dcd6d3;
    zoom: 1;
    z-index: 100;
}

.help-contents:after {
    content: "";
    display: block;
    clear: both;
}

.bgPrint .contents {
    background: #fff;
}

.panelAreaOpen .panelArea+.contents {
    border-top-left-radius: 8px;
}
.panelAreaOpen .panelArea.off+.contents {
    border-top-left-radius: 0;
}

/* FullScreen */
.wrap.FullScreen header,
.wrap.FullScreen nav,
.wrap.FullScreen .ticker {
    display: none;
}

/* ticker */
.ticker {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 32px;
    border-top: 2px solid #19a5a0;
    background: #312d2e;
    z-index: 500;
}

.ticker > div {
    padding: 0 0 0 80px;
}

.ticker .message {
    position: relative;
    float: left;
    height: 22px;
    padding: 10px 0 0 30px;
    color: #fff;
}

.ticker .message:before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 23px;
    height: 23px;
    background-image: url(../images/common/sp_layout.png);
    background-position: 0 -335px;
    background-repeat: no-repeat;
}

.ticker .alarmBadge {
    float: right;
    margin: 6px 25px 0 0;
}

.ticker .alarmBadge > a.bounce {
    animation-name: bounceTypeSmall;
    transform-origin: center bottom;
}

.ticker .alarmBadge a {
    display: inline-block;
    float: left;
    min-width: 20px;
    height: 20px;
    padding: 0 4px 0 4px;
    margin: 0 0 0 4px;
    font-size: 12px;
    color: #fff;
    font-weight: bold;
    line-height: 17px;
    text-align: left;
    white-space: nowrap;
    border-radius: 15px;
}

.ticker .alarmBadge a.green {
    border: 1px solid #108682;
    background: -moz-linear-gradient(top, #46a4a7 0%, #59b4b8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #46a4a7), color-stop(100%, #59b4b8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #46a4a7 0%, #59b4b8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #46a4a7 0%, #59b4b8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #46a4a7 0%, #59b4b8 100%); /* IE10+ */
    background: linear-gradient(to bottom, #46a4a7 0%, #59b4b8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#46a4a7', endColorstr='#59b4b8'); /* IE6-9 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#46a4a7', endColorstr='#59b4b8'); /* IE6-9 */
}

.ticker .alarmBadge a.yellow {
    border: 1px solid #c7b137;
    background: -moz-linear-gradient(top, #b99b1d 0%, #ccb130 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b99b1d), color-stop(100%, #ccb130)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #b99b1d 0%, #ccb130 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #b99b1d 0%, #ccb130 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #b99b1d 0%, #ccb130 100%); /* IE10+ */
    background: linear-gradient(to bottom, #b99b1d 0%, #ccb130 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b99b1d', endColorstr='#ccb130'); /* IE6-9 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b99b1d', endColorstr='#ccb130'); /* IE6-9 */
}

.ticker .alarmBadge a.red {
    border: 1px solid #dc503c;
    background: -moz-linear-gradient(top, #f2544b 0%, #f3645c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2544b), color-stop(100%, #f3645c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #f2544b 0%, #f3645c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #f2544b 0%, #f3645c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #f2544b 0%, #f3645c 100%); /* IE10+ */
    background: linear-gradient(to bottom, #f2544b 0%, #f3645c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2544b', endColorstr='#f3645c'); /* IE6-9 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2544b', endColorstr='#f3645c'); /* IE6-9 */
}

.ticker.tickerWarning {
    border-top: 2px solid #f0d232;
}

.ticker.tickerWarning p:before {
    background-position: -23px -335px;
}

.ticker.tickerDanger {
    border-top: 2px solid #fa4b37;
}

.ticker.tickerDanger p:before {
    background-position: -46px -335px;
}

/* accessibility */
.accNav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 1000;
}

.accNav h2 {
    visibility: hidden;
}

.accNav h2, .accNav ul, .accNav ul li {
    height: 0;
}

.accNav a {
    display: block;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin-left: -1px;
    margin-bottom: -1px;
    color: #000;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}

.accNav a:hover, .accNav a:focus, .accNav a:active {
    width: 100%;
    height: auto;
    padding: 10px 0;
    color: #fff;
    background: #f47971;
    z-index: 1100;
}

.blind {
    visibility: hidden;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
}

/* dashboard common */
/* switch */
.switch {
    position: relative;
    margin: 0;
    height: 22px;
    width: 164px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
    background: #8c8282;
}

.switch-label {
    position: relative;
    float: left;
    width: 50%;
    height: 22px;
    padding: 6px 0 0 0;
    margin: 0;
    font-size: 11px;
    color: #bebebe;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    z-index: 2;
}

.switch-label:hover, .switch-label:focus {
    color: #fff;
}

.switch-label:active {
    color: #fff;
}

.switch-label-off {
}

.switch-label-on {
}

.switch-input {
    display: none;
}

.switch-input:checked + .switch-label {
    color: #594b4f;
    font-weight: bold;
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
}

.switch-input:checked + .switch-label-on ~ .switch-selection {
    left: 0%;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.switch-selection {
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    width: 50%;
    height: 22px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border: 1px solid #1aa69f;
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.15);
    background: -moz-linear-gradient(top, #7ccace 0%, #6cbabe 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7ccace), color-stop(100%, #6cbabe)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7ccace 0%, #ebebeb 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7ccace 0%, #6cbabe 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7ccace 0%, #6cbabe 100%); /* IE10+ */
    background: linear-gradient(to bottom, #7ccace 0%, #6cbabe 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ccace', endColorstr='#6cbabe'); /* IE6-9 */
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7ccace', endColorstr='#6cbabe'); /* IE6-9 */
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
    z-index: 1;
}

.main-ng-view {
    position: relative;
    left: 80px;
    margin-right: 0px;
    padding-right: 80px;
    overflow: hidden;
    height : calc(100vh - 100px);
}

#my_progress_bar{
    position: absolute;
    top: 50vh;
    left: 50vh;
    z-index: 1000;
    background: white;
}