@charset "utf-8";

.modal {
  overflow: auto !important;
}

/*******************************************************************************
  ȭ�鿡 ���� CSS
*******************************************************************************/
/*@media screen and (min-width:1280px) {*/

@media screen and (min-width:1px) {

  #wrapper {
    /*background-color: #fff;*/
    width: 100%;
    height: 100%;
    min-height: 900px;
    min-width:1600px;

  }

  #left-menu {
    margin:0px;
    padding:0px;
    width:240px;
    height: calc(100% - 60px);
    min-height: calc(100% - 60px);
    /*background-color:#1b1f28;*/
    background-color:#fff;
    color:#555;
    float:left;
    animation: leftmenu-slideright .5s ease both;
    border-right:solid 1px #d8d0d0;
  }

  #left-menu > h2 {
    margin:0px;
    padding:10px;
    background-color:#22272d;
    /*background-color:#fff;*/
    font-size:30px;
  }

  #left-menu > h2 > a > #logo_icon:before {
    content: "\e901";
  }

  #left-menu.small {
    margin:0px;
    padding:0px;
    height:100%;
    background-color:#fff;
    color:#555;
    float:left;
    animation: leftmenu-slideleft .5s ease both;
  }

  #left-menu.small > h2 {
    margin:0px;
    padding:10px;
    background-color:#22272d;
    text-align:center;
  }

  #left-menu.small > h2 > a > #logo_icon:before {
    content: "\e900";
  }

  .left-info {
    clear:both;
    padding:0px;
  }

  .left-info h3 {
    font-size:10pt;
    font-family:'Titillium Web', sans-serif;
    color: #000 !important;
    padding:10px;
  }

  .login-info {
    padding:10px;
    height:60px;
    margin-top:10px;
  }

  .login-user-picture {
    float:left;
    width:50px;
    height:50px;
  }

  .login-user-picture > img {
    width:50px;
    height:50px;
    border-radius:500px;
  }

  .user-name {
    display:block;
    font-size:10pt;
    margin-top:5px;
    color: #626684;
  }

  .user-position {
    display:block;
    font-size:8pt;
    color: #b0b3c8;
    margin-top:5px;
  }

  #left-menu .login-info .welcome {
    float:left;
    margin-left:15px;
  }

  #left-menu.small .login-info .welcome {
    display:none;
  }

  #left-menu.small .menu-title {
    display:none;
  }

  .mainmenu {
    clear:both;
    padding:0px;
  }

  .mainmenu h3 {
    font-size:10pt;
    font-family:'Titillium Web', sans-serif;
    color: #000 !important;
    padding:10px;
  }

  .mainmenu > ul {
    margin:0px;
    padding:0px;
    list-style-type:none;
  }

  .mainmenu > ul > li {

  }

  .mainmenu > ul > li > a {
    display:block;
    padding:8px 0px 8px 15px;
    /*color:#8d92b5;*/
    color:#444444;
    width:100%;
    font-weight:normal;
  }

  #left-menu.small .mainmenu > ul > li > a {
    display:block;
    padding:8px 0px 8px 0px;
    width:100%;
    font-weight:bolder;
    font-size:15px;
    text-align:center;
  }

  #left-menu.small .left-info-detail {
    list-style-type:none !important;
    padding:0px;
    display:none;
  }

  #left-menu .left-info-detail-small {
    display:none;
  }

  #left-menu.small .left-info-detail-small {
    list-style-type:none !important;
    padding:0px;
    display:block;
  }

  #left-menu .left-menu-slide {
    text-align:right;
    padding-right:20px;
  }

  #left-menu.small .left-menu-slide {
    text-align:center;
    padding-right:0px;
  }

  .mainmenu > ul > li > a:hover {
    /*background-color: #1aae88;*/
    background-color: #30a5ff;
    color:#fff;
  }

  .mainmenu > ul > li > a:hover, a:active, a:visited, a:focus {
    text-decoration:none !important;
  }

  .mainmenu > ul .on {
    /*background-color: #1aae88;*/
    background-color: #30a5ff;
    color:#fff !important;
  }

  .mainmenu > ul .on > a {
    color:#fff;
    font-weight:bolder;
  }

  .submenu .subon {
    /*color:#fff !important;*/
    font-weight:bolder;
  }

  .mainmenu .menu-icon {
    padding-right:10px;
  }

  #left-menu.small .mainmenu .menu-icon {
    padding-right:0px;
  }

  .mainmenu .submenu-arrow {
    float:right;
    margin-right:20px;
    font-size:8px;
  }

  #left-menu.small .submenu-arrow {
    display:none;
  }

  .mainmenu .project-badge {
    float:right;
    margin-right:20px;
    background-color:#414f70;
  }

  .mainmenu .submenu {
    margin-left:10px;
  }

  #left-menu.small .mainmenu .submenu {
    margin-left: 10px;
    position: absolute;
    left: 71px;
    width: 200px;
    z-index: 99999;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 10px 20px 10px 40px;
    margin: 0px;
    display: inline-block;
    margin-top: -45px;
  }

  .mainmenu .submenu > li {

  }

  .mainmenu .submenu a {
    display:block;
    padding:5px 0px 5px 0px;
    /*color: #8287a9;*/
    color:#555;
    width:100%;
    font-size:12px;
  }

  .mainmenu .submenu a:hover {
    /*
    text-decoration:none;
    color:white;
    */
    font-weight:bold;
    color:black;
  }

  .contents {
    float:left;
    width:-webkit-calc(100% - 240px);
    width: -moz-calc(100% - 240px);
    width: calc(100% - 240px);
    animation: contents-slideright .5s ease both;
    background-color: #EDEDED;
    height:-webkit-calc(100% - 65px);
    height: -moz-calc(100% - 65px);
    height: calc(100% - 65px);
  }

  .contentsApproval {
    height:auto !important;
  }

  .contents.small {
    height:100%;
    float:left;
    animation: contents-slideleft .5s ease both;
  }

  .contents .header {
    padding:10px 15px;
    background-color:#000;
    width:100%;
    height:54px;
  }

  .header {
    background-color:#000;
  }

  .header .header-left {
    float:left;
  }

  .header a {
    color:#555 !important;
  }

  .header .header-right {
    float:right;
  }

  .header .form-group {
    margin-bottom:0px !important;
  }

  .header-quick-menu {
    float:left;
    padding:5px 0px;
  }

  .header-search {
    float:left;
    padding:0px 0px 0px 10px;
  }

  .header .btn-submit {
    margin-left:5px !important;
  }

  .header-alert {
    float:right;
    padding:10px;
    height:60px;
    line-height:45px;
  }

  .header-alert a {
    color:white !important;
  }

  .header-logout {
    float:right;
    height:60px;
    margin-right:20px;
    line-height:55px;
  }

  .badge-up {
    position:relative;
    left:-10px;
    top:-10px;
    background-color:#bf1e1e !important;
    font-size:8pt !important;
    font-family:'Titillium Web', sans-serif;
  }

  .header-login-info {
    float:left;
    padding:0px 20px 0px 10px;
  }

  .header-login-user-picture {
    float:left;
    width:35px;
    height:35px;
  }

  .header-login-user-picture > img {
    width:35px;
    height:35px;
    border-radius:500px;
  }

  .header .header-login-info .header-welcome {
    float:left;
    margin-left:10px;
  }

  .header .user-name {
    display:block;
    font-size:10pt;
    margin-top:2px;
    color: #b0b3c8;
  }

  .header .user-position {
    display:block;
    font-size:8pt;
    color: #626684;
    margin-top:0px;
  }


  .data-list-area {
    margin-top:0px;
    height:100%;
    height:-webkit-calc(100%-200px);
    height:-moz-calc(100%-200px);
    height:calc(100%-200px);
  }


  .left-panel {
    height:95%;
    height:-webkit-calc(100% - 20px);
    height:-moz-calc(100% - 20px);
    height:calc(100% - 20px);
  }

  .right-panel {
    height:95%;
    height:-webkit-calc(100% - 20px);
    height:-moz-calc(100% - 20px);
    height:calc(100% - 20px);
  }

  .common-group-list {
    overflow-y:auto;
    height:95%;
    height:-webkit-calc(100% - 50px);
    height:-moz-calc(100% - 50px);
    height:calc(100% - 50px);
  }

  .common-group-list a {
    border-radius: 0px;
    border-left-width:0px !important;
    border-right-width:0px !important;
  }

  .common-group-list a:first-child,.common-group-list a:last-child {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .common-list-area {
    overflow-y:auto;
    height:95%;
    height:-webkit-calc(100% - 50px);
    height:-moz-calc(100% - 50px);
    height:calc(100% - 50px);
  }

  .bootstrap-select.form-control:not([class*=col-]) {
      width: auto !important;
      margin-top: 5px;
      width: 200px !important;
  }
  .bootstrap-select > button {
    padding:3px 6px;
  }

  .common_search {
    padding:5px;
  }

  .common-list-area table {
    border-collapse:collapse;
  }
  .common-list-area th {
    border-right:solid 1px #ddd !important;
    border-bottom:solid 0px #ddd !important;
    text-align:center;
  }
  .common-list-area th:last-child {
    border-right:solid 0px #ddd !important;
  }

  .tbody-center > tr > td {
    text-align:center;
  }

  tbody > .active {
    background-color:#337ab7 !important;
    color:#fff !important;
  }

  tbody > .active > td > span {
    color:#fff !important;
  }

  tbody > .active > td {
    background-color:#337ab7 !important;

    color:#fff !important;
  }

  .container-fluid label {
    width:120px;
    text-align:right;
    padding-right:0px;
    padding-top:3px;
  }

  .container-fluid .input-group {
    padding-left:5px;
  }

}

.tooltip-approval,
.tooltip-member {
  display:none;
}


.arrow-div1 {
  position: absolute;
  background: #fff;
  border: 1px solid #aaa;
  box-shadow: 1px 1px 5px lightgray;
  width:500px;
  margin-left:-400px;
  margin-top:10px;
  padding:10px 15px 10px 15px;
  border-radius:10px;
  z-index:100;
}

.arrow-div2 {
  position: absolute;
  background: #fff;
  border: 1px solid #aaa;
  box-shadow: 1px 1px 5px lightgray;
  width:800px;
  margin-left:-640px;
  margin-top:10px;
  padding:10px 15px 10px 15px;
  border-radius:10px;
  z-index:1000000000;
}

.arrow-div1:after, .arrow-div1:before,
.arrow-div2:after, .arrow-div2:before {
  bottom: 100%;
  left: 80%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow-div1:after,
.arrow-div2:after {
  border-color: rgba(241, 241, 241, 0);
  border-bottom-color: #fff;
  border-width: 15px;
  margin-left: -10px;
}

.arrow-div1:before,
.arrow-div2:before {
  border-color: rgba(221, 221, 221, 0);
  border-size:1px;
  border-bottom-color: #999;
  border-width: 16px;
  margin-left: -11px;
}

.document-number {
  color: #000;
}