@charset "utf-8";

/*************************************************************
**************************************************************
						DHTMLX STYLE
**************************************************************
 -------------------------------------------------------------------[ 스타일 적용 _ 버튼 ]
 className : 'search_btn'	(민트버튼 : 검색)
 className : 'red_btn'		(빨간버튼 : 저장)
 className : 'orange_btn'	(오렌지버튼 : 수정)
 className : 'gray_btn'		(진회색버튼 : 삭제)
 className : 'report_btn'	(진파랑버튼: 승인요청)
 className : 'blue_btn'		(연파랑버튼 : 승인요청취소)
 className : 'xml_btn'		(그린버튼: 엑셀버튼)
 className : 'light_btn'	(올리브버튼 : 목록열기)
 className : 'purple_btn'	(연보라버튼 : 첨부파일)
 className : 'brown_btn'	(갈색버튼 : 공통으로 정의되지 않고, 특정 화면에서 별도의 기능을 수행하는 버튼에 사용)
 className : 'pink_btn'		(핑크버튼 : 검색조건 초기화 버튼에 사용)
 
 -------------------------------------------------------------------[ 스타일 적용 _ 컨테이너 ]
  - 컨테이너 오브젝트 외부 테두리 삭제					
 className: 'div_objline_del'
 
 - 컨테이너의 테두리 사용
 className: 'container_border'

 -------------------------------------------------------------------[ 스타일 적용 _ 폼 라벨 ]
 - 라벨을 기본 글자 크기와 동일하게 사용할 때 | {type:'label', className:'mini_label' ...
 className : 'mini_label'
 
 - 라벨을 기본 글자크기 + 회색으로 사용할 때 (줄간격 좁음)
  className : 'mini_info_label'
 
 - 라벨을 작고 회색으로 이용할 때 (헤더에 가능)
 <span id='small_col'>(샘플 미니텍스트)</span>
 
 - 디테일 페이지 단락별 분류 라벨
  - ① 폼에 블럭 별도로 설정
  	, {type: 'block', className: 'block_padding', list: [
		{type: 'label', className: '', name: 'dtlTitle_01', label: '<span class=dtl_label>사옥 기본정보</span>'}
	]}
  - ② function으로 라벨 셋팅
	 listForm.setItemLabel('dtlTitle_01', '<span class=dtl_label>사옥 기본정보</span>');
	 
 - 폼 라벨로 설명문 사용 (폰트크기:보통, 색:회색)
 {type: 'label', name: '', label: '<span class=gyro_info_text>변경된 값은 [수정]버튼을 눌러야 저장됩니다.</span>'}
 
 -------------------------------------------------------------------[ 스타일 적용 _ 그리드 ]
 - 리스트 건수 부분 '목록 [2]건' 앞에 문구 추가 시
 <span>이력</span>	or	<span>신규</span> ... =>	신규목록[2]건
 
 - 멀티헤더(그리드 헤더 2줄)을 사용할 때
 <div id='multi_col'>(샘플 서브헤더)</div>
 
 - 그리트 타이틀 label을 감싼 블럭의 상단 여백 지정
 className: 'block_padding'
 
 - 그리드 헤더에 입력 가능한 컬럼 표시 _ 필수 입력
 <span class='req_cell_red'>*</span>
 
 - 그리드 헤더에 입력 가능한 컬럼 표시 _ 입력 가능
 <span class='req_cell_blue'>*</span>
 
 - 그리드에 들어가는 링크버튼
 <input type='button' value='선택' class='gridListBtn' />
 
 -------------------------------------------------------------------[ 스타일 적용 _ 폼 버튼 ]
 - 폼 버튼 우측정렬 + 상단여백 (상단버튼그룹에 사용_우측정렬)
 className: 'block_dtl_btn_position'
 
 - 폼 버튼 우측정렬 + 상단여백 없음 (폼 내부에서 인풋 아래 붙일 때 사용_우측정렬)
  className: 'block_dtl_btn_position_tight'
 
 -------------------------------------------------------------------[ 스타일 적용 _ 링크 텍스트 ]
 - 레드
 className: 'gyro_link_red'
 - 호버 시 레드
 className: 'gyro_link_red_hover'
 - 스카이 블루
 className: 'gyro_link_blue'
 - 호버 시 스카이 블루
 className: 'gyro_link_blue_hover'
 
 -------------------------------------------------------------------[ 스타일 적용 _ 인풋 테두리 색상주기 ]
 - 레드
 className:'input_border_red'
 - 블루
 className:'input_border_blue'
 
 -------------------------------------------------------------------[ 스타일 적용 _ 인풋에 시계 아이콘 보여주기 ]
 - 폼 타입이 켈린더인 경우 적용 가능 {type:'calendar', className:'input_time_img'
 className:'input_time_img'
*************************************************************
*************************************************************/
#web_main_close_alltab_area {/* 탭바 > 전체닫기 버튼 영역 */
	float: right;
	position : absolute;
	top : 88px;
	right : 30px;
	/* z-index: 1100; */
	display: none;
}

#web_gyro_tab_close_btn {/* 전체닫기 버튼 */
    background-color: #be222f;
    border: transparent;
    font-size: 0.75em;
    color: #fff;
    width: 85px;
    height: 24px;
    padding-top: 3px;
    cursor: pointer;
}
#web_gyro_tab_close_btn img{
    width: 16px;
    height: 16px;
	padding-right: 5px;
    padding-bottom: 3px;
}

/** 폼 라벨을 이용한 설명문(보통글씨,회색) **/
.gyro_info_text {
	color: #7a7a7a;
	font-weight: normal;
	font-size: 13px;
	position: relative;
	top: -2px;
}

/** 디테일 페이지 분류 라벨 | 단락별 라벨 **/
.dtl_label {
    color: #851821;
    font-size: 1em;
    font-weight: bold;
    padding: 3px 15px 5px 5px;
    border-left: 10px solid #f9d6d9;
    border-top: 2px solid #f9d6d9;
    margin-left: -10px;
}

/** grid 멀티 헤더(헤더 2줄) | 작은 회색 글씨 **/
#multi_col {
	font-size: 10px;
	color: #b2b2b2;
	height: 16px;
	line-height: 16px;
	position: relative;
	top: -3px;
}

/** grid 멀티 헤더(헤더 1줄) | 작은 회색 글씨 **/
#small_col {
	font-size: 11px;
	color: #828282;
}

/** 컨텐츠 영역 **/
 #layoutObj{
     font-family:'맑은 고딕',HelveticaNeue,DroidSans,Sans-serif,Helvetica;
     width: 100%;
     height: 100%;
     position: relative;
     top:0px;
     left: 0;
 }

/** 그리드에 들어가는 링크버튼 **/
.gridListBtn {
  background: #cce9ff;
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  color: #192b75;
  font-size: 12px;
  padding: 2px 25px 2px 25px;
  border: solid #03c0fa 0px;
  text-decoration: none;
  font-family: 'Malgun Gothic','맑은 고딕';
}

.gridListBtn:hover {
  background: #197ce6;
  text-decoration: none;
  color: #fff;
}

/** 그리드에 들어가는 아이콘 **/
.grid_ico {
	width: 16px;
	height: 16px;
	padding-top: 3px;
	padding-left: 10px;
}

.gyro_link_red {
	color: #e21737;
}
.gyro_link_red_hover:hover {
	color: #e21737;
}
.gyro_link_blue {
	color: #3da0e3;
}
.gyro_link_blue_hover:hover {
	color: #3da0e3;
}