@charset "utf-8";
@import "base.css";
@import "ionicons.min.css";

/***********************************************************************************
title		: NIA 통합플랫폼 템플릿 스타일 가이드 - 공통 컴포넌트에 대한 스타일 정의
작성시작일  : 2016-07_20
************************************************************************************/

/*wrap*/
#temptype_wrap{padding:30px 35px 30px 30px; min-width:900px;}

/* SBUx.css 수정*/
.sb-selectbox {/*padding:0 18px 0 5px;*/padding:0;border:1px solid #c2c6ce; background-color:#fff !important;}
p.sbux-pik-group{margin:0;}
p.sbux-pik-group + .sbux-pik-group{margin-left:10px;}
input.form-control{height:30px;}
span.sbux-input-normal {margin:0;}
h1, h2, h3, h4, h5, h6{margin:0;}
.btn {font-size:12px;}
.form-control {
    padding-left: 4px !important;
}
/*SBUxCustom 수정*/
textarea.sbux-txa {width:100%;}

/*sbgrid default.css 수정*/
.sbgrid_cell_st{border-color:#cbcbcb;}
.sbgrid_data_row_hover_st{background-color: #ebf0f8 !important;}
.sbgrid_focus_st{background-color: #ebf0f8 !important;}

/* 공통 */
.btn_padding{padding:0 10px !important;}
.fileLink{color:blue;text-decoration:underline !important;}

/*title*/
.title_area{margin-bottom:20px;position:relative;}
.title_area h3{font-size:20px;color:#222;padding-bottom:10px;border-bottom:1px solid #e5e5e5;font-weight:700;letter-spacing:-0.1em;}
.subTitle_area{position:relative;margin-top:20px;height:20px;}
.subTitle_area h4{font-size:14px;font-weight:700;color:#222;letter-spacing:-0.07em;}
.subTitle_area h4:before {
    content:"\f3d1";
    font-family:ionicons;
    font-size: 14px;
    font-weight:700;
    color:#357acd;
    padding-left:1px;
    padding-right:7px;
}

/*button*/
.btn_blue, 
.btn_blue:hover, 
.btn_blue:active{background-color:#357acd !important;border:0;} 
.btn_navy, 
.btn_navy:hover, 
.btn_navy:active{background-color:#495462 !important;border:0;}
.btn_black, 
.btn_black:hover, 
.btn_black:active{background-color:#212a31 !important;border:0;}
.btn_gray, 
.btn_gray:hover, 
.btn_gray:active{background-color:#565656 !important;border:0;}

.title_area .btn_area{position:absolute;top:-10px;right:0;text-align:right;}
.subTitle_area .btn_area{position:absolute;top:-10px;right:0;text-align:right;}
.td_btnArea{text-align:right;vertical-align:bottom !important;}
.btnRight_area{text-align:right;}
.btnLeft_area{text-align:left;}
.btnCenter_area{text-align:center;}

/*btn*/
.btn-cblue{background:#5e738f;color:#fff;border:1px #4a5b72 solid;}
.btn-gray{background:#eaeaea;color:#525252;border:1px #acacac solid;}
.btn-gray2{background:#eaeaea;color:#525252;border:1px #acacac solid;}
.btn-gray2:hover{background:#fff;color:#888;border:1px #acacac solid;}
.btn-white{background:#fff;color:#555;border:1px #acacac solid;}
.btn-dgray{background:#4a4a4a;color:#fff;border:1px #2b2b2b solid;}
.btn-dgray:hover{background:#111;color:#fff;border:1px #2b2b2b solid;}
.btn-blue{background:#0a7bed;color:#fff;border:1px #044b93 solid;}
.btn-blue:hover{background:#0866c6;color:#fff;border:1px #044b93 solid;}
.btn-blue2{background:#fff;color:#0866c6;border:1px #0866c6 solid;}
.btn-blue2:hover{background:#0866c6;color:#fff;border:1px #0866c6 solid;}
.btn-green{background:#438b14;color:#fff;border:1px #3c7815 solid;}
.btn-green:hover{background:#377210;color:#fff;border:1px #377210 solid;}
.btn-red{background:#b42c29;color:#fff;border:1px #a02624 solid;}
.btn-cyan{background:#0093a8;color:#fff;border:1px #026979 solid;}
.btn-cyan:hover{background:#008195;color:#fff;border:1px #026979 solid;}
.btn-cyan2{background:#fff;color:#008195;border:1px #008195 solid;}
.btn-cyan2:hover{background:#008195;color:#fff;border:1px #026979 solid;}

/*paginate*/
.paginate_area{text-align:center;margin-bottom:20px;}
.paginate_area ul.paginate{display:inline-block;}
.paginate_area ul.paginate li {display:inline-block;float:left;margin-right:10px;}
.paginate_area ul.paginate li a{display:block;width:25px;height:25px;line-height:23px;background:#fff;border:1px solid #e0e0e0;font-size:12px;font-weight:700;color:#555;}
.paginate_area ul.paginate li a i{font-size:15px;}
.ion-android-arrow-dropleft:before {height:25px;line-height:23px;}
.ion-android-arrow-dropright:before {height:25px;line-height:23px;}
.paginate_area ul.paginate li a.curr{color:#fff;background:#357acd;border:1px solid #357acd;}



/*attached file*/
.MultiFile-holder{position:relative;}
.MultiFile-list{padding: 8px 0 8px 10px;overflow-y:auto;width:100%;height:80px;border:1px solid #c2c6ce;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
.MultiFile-wrap input{display: none;}
.btn_inline {display:inline-block;position:relative;overflow:visible;}
.btn-multiFile{margin-top:5px;}

/*divide*/
.divide_area{width:100%;position:relative;margin-bottom:10px}
.divide_area:after {display:block;clear:both;content:"";}
.divide_area .left_area{float:left;}
.divide_area .right_area{float:right;}
.divide_area .divide_control{position:absolute;left:48%;top:150px;width:4%;text-align:center;}
.divide_area .divide_control a{margin:0 auto;display:block;width:25px;height:25px;text-align:center;background:#357acd;border-radius:2px;margin-bottom:5px;}
.divide_area .divide_control a i{color:#fff;font-size:15px;}
.ion-ios-arrow-forward:before {height:30px;line-height:25px;}
.ion-ios-arrow-back:before {height:30px;line-height:25px;}


/*tabs*/
.tabs_area .nav-tabs{border-bottom:1px solid #495462;}
.tabs_area .nav-tabs>li{}
.tabs_area .nav-tabs>li>a{border:1px solid #cdcdcd;border-bottom:0;background-color:transparent;margin-right:5px;padding:10px 20px;font-size:14px;}
.tabs_area .nav-tabs>li.active>a{border:1px solid #495462;background-color:#357acd;line-height:18px;cursor:default;}
.tabs_area .nav-tabs>li.active>a>span.sbux-tab-txt{color:#fff;} 
.tabs_area .tab-content{border:0;padding:10px 0;overflow:visible;}

/*graph*/
.graph_area{width:100%;height:250px;line-height:250px;background:#fff;border:2px solid #cbcbcb;font-size:30px;text-align:center;}

/*comment*/
.comment_area{width:100%;margin-bottom:40px;border:2px solid #357acd;background:#f8f8f8;}
.comment_area ul{width:100%;margin:10px 0;position:relative;}
.comment_area ul li{padding:3px 0 3px 20px;}

/*datepicker*/
/* div.datepickerMode table.modeDay{margin:0;} */
.sbux-pik-icon-btn, 
.sbux-inb-bk-btn{height:30px !important;}
.datepickerMode table tr th,
.datepickerMode table tr td{padding:0;border:0;background:transparent;}
.datepickerMode table tr th{color:white;text-align:center;}

div.datepickerMode table tr td.sbux-pik-pop-regularday span{color:#adaeb6;}
div.datepickerMode table tr td.sbux-pik-pop-saturday span{color: #146894;}
div.datepickerMode table tr td.sbux-pik-pop-sunday span{color: #af2921;}

div.datepickerMode table.modeMonth td span,div.datepickerMode table.modeYear td span{color: #adaeb6}


.datepickerMode table.modeMonth td .btn, 
.datepickerMode table.modeYear td .btn{padding:7px 0;}

/*required*/
.search_area .required:after{
  content:"*";
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  color:#ff0000;
  vertical-align:middle;
}

.tableDetail_area .required:after{
  content:"*";
  position: absolute;
  left: 10px;
  width: 10px;
  height: 10px;
  color:#ff0000;
  vertical-align:middle;
}

/*modal popup*/
.modal_area .modal-header{background:#357acd;}
.modal_area .modal-title{color:#fff;}
.modal_area .btn-primary{background-color:#357acd;border:1px solid #357acd;}


/*공통ui, 검색영역, 그리드*/
#ui_wrap{padding:30px 35px 30px 30px; min-width:940px;}
.uiTitle_area{margin-bottom:50px;}
.uiTitle_area>h3{font-size:40px;margin-bottom:30px;}
.uiTitle_area div.ui_back{width:100%;padding:20px;background:#E0FFDB;box-shadow:0 3px 2px 0 #eee;}
.uiSubTitle_area{margin-bottom:50px;}
.uiSubTitle_area>h4{font-size:24px;margin-bottom:20px;padding-left:10px;}
.uiSubTitle_area h4 i{margin-right:5px;}
.uiSubTitle_area h5{font-size:16px;font-weight:700;margin-bottom:15px;padding-left:10px;}
.uiSubTitle_area h4 span, 
.uiSubTitle_area h5 span{margin-left:20px;font-size:13px;}
.uiSubTitle_area div.ui_back{width:100%;padding:20px;background:#FFFFD2;box-shadow:0 3px 2px 0 #eee;}
div.ui_back p{font-size:18px;margin:0;line-height:1.5em;}
.input_ex table tr th,
.input_ex table tr td{padding:5px 0;vertical-align:middle;}
.input_ex table tr th{text-align:left;}
.picker_area{border:0;background:transparent;padding:0;}

/*tree area*/
.tree_area{width:100%;background:#fff;border:2px solid #cbcbcb;font-size:30px;overflow-y:scroll;padding:5px 0;}
.tree_area .tree{margin: auto;padding: 0 0 0 10px;
}
.tree_area .tree .tree-plus.sbux-icon:first-child{background:#357acd;border-color:#357acd;}

/*selectbox 추가수정*/
.sb-selectbox {padding-left:4px !important;    padding-right: 20px;}
.sbux-pik-icon-btn {padding:7px 10px !important;}
@media only screen and (max-width:1400px) {
span.sbux-inb-icon{display:none;} 
.has-feedback .form-control{padding-right: 0px !important;}
.tableDetail_area table tr td .input-group {width:35% !important;}
}
.search_area span.sbux-pik-group {
    margin: 0 5px 0 2px;
}
.sbgrid_datagrid_Output {padding:5px;}

/*jjoong*/

/*btn*/
.btn-cblue{background:#5e738f;color:#fff;border:1px #4a5b72 solid;}
.btn-gray{background:#eaeaea;color:#525252;border:1px #acacac solid;}
.btn-gray2{background:#eaeaea;color:#525252;border:1px #acacac solid;}
.btn-gray2:hover{background:#fff;color:#888;border:1px #acacac solid;}
.btn-white{background:#fff;color:#555;border:1px #acacac solid;}
.btn-dgray{background:#4a4a4a;color:#fff;border:1px #2b2b2b solid;}
.btn-dgray:hover{background:#111;color:#fff;border:1px #2b2b2b solid;}
.btn-blue{background:#0a7bed;color:#fff;border:1px #044b93 solid;}
.btn-blue:hover{background:#0866c6;color:#fff;border:1px #044b93 solid;}
.btn-blue2{background:#fff;color:#0866c6;border:1px #0866c6 solid;}
.btn-blue2:hover{background:#0866c6;color:#fff;border:1px #0866c6 solid;}
.btn-green{background:#438b14;color:#fff;border:1px #3c7815 solid;}
.btn-green:hover{background:#377210;color:#fff;border:1px #377210 solid;}
.btn-red{background:#b42c29;color:#fff;border:1px #a02624 solid;}
.btn-cyan{background:#0093a8;color:#fff;border:1px #026979 solid;}
.btn-cyan:hover{background:#008195;color:#fff;border:1px #026979 solid;}
.btn-cyan2{background:#fff;color:#008195;border:1px #008195 solid;}
.btn-cyan2:hover{background:#008195;color:#fff;border:1px #026979 solid;}

/*search*/
.search_area{position:relative;margin-bottom:20px;padding:5px 120px 5px 5px;box-sizing:border-box;border:2px solid #357acd;background:#f8f8f8;}
.search_area > table{width:100%;}
.search_area > table th{line-height:14px;text-align:left;padding:3px 5px 3px 10px;width:90px;}
.search_area > table td.th{text-align:left;padding:3px 5px 3px 25px;width:120px;}
.search_area > table td{line-height:14px;padding:3px 5px;text-align:left;}
.search_area > table td.inputGroup_width .input-group{width:30%;}
/* .search_area > table + button {margin-top:10px;} */
.search_area > button {position:absolute;right:20px;top:50%;margin-top:-17px;}

/*tableDetail*/
.tableDetail_area{margin-bottom:40px;background:#f4f4f4;}
.tableDetail_area>table{width:100%;border-top:2px solid #444;margin-top:6px;}
.tableDetail_area > table > tbody > tr > th,
.tableDetail_area > table > tbody > tr > td{padding:13px 10px;border:1px solid #cbcbcb;text-align:left;vertical-align:middle;}
.tableDetail_area > table > tbody > tr > th{font-weight:700;padding-left:20px;}
.tableDetail_area > table > tbody > tr > td{padding-left:10px;vertical-align:middle;background:#fff;}

/*tableDetail + Input
.tableDetail_area > table > tbody > tr > td select{width:30%;}*/
.tableDetail_area > table > tbody > tr > td .input-group{width:30%;float:left;}
.tableDetail_area > table > tbody > tr > td sbux-button{padding:0;}
.input_area > table > tbody > tr > th{padding:4px 10px 3px 20px;}
.input_area > table > tbody > tr > th.center{text-align:center;padding:11px 0 11px 0;}
.input_area > table > tbody > tr > th.th_check{text-align:center;padding:0 10px;vertical-align:middle;}
.input_area > table > tbody > tr > td.th{background:#f2f4f7;padding:11px 10px;}
.input_area > table > tbody > tr > td{padding:5px 10px;}
.input_area > table > tbody > tr > td.center{text-align:center;}

/*table*/
table tr th{color:#333;font-weight:700;position:relative;}
table tr td{color:#4c4c4c;}
table tr td select{width:100%;height:30px;line-height:30px;}
table tr th select{width:100%;height:30px;line-height:30px;}
label {margin-bottom:0 !important;}
.sbgrid_PA{margin-top:5px;}
.sb-check-wrap .sb-chk-tit {padding:5px 6px 3px 0 !important;display:inline-block;}
.sb-check-wrap>input {position:absolute;left:-9999px;}
/* .sb-check-wrap>input,.sb-chk-tit.sbux-chk-txt {position:absolute;left:-9999px;} */
.close+.modal-title {color:#fff }
.modal-header .close .glyphicon  {color:#fff !important }

/*sbux-tab*/
.scroll_tabs_container div.scroll_tab_inner li.sbux-tab-item.active>a span, 
.scroll_tabs_container div.scroll_tab_inner li.sbux-tab-item.active>a:hover span, 
.scroll_tabs_container div.scroll_tab_inner li.sbux-tab-item.active>a:focus span{color:#fff !important;} 

.fade.in {z-index:10000 !important;}
.modal-open .modal {z-index:10001 !important;}