/* 
Template Name: Disaster Prevention Monitoring
Version: 1.0.0
Author: EunSik Yoon
Website:

::  1.0  General Reset & Setup
-------------------------------------------
    1.1  Font Setup
    1.2  Reset
    1.3  Disaster Prevention Monitoring Reset
    
::  2.0  Layout
-------------------------------------------
    2.1  All
    	2.1.1 Scrollbar Style
    	2.1.2 Scrollbar Background
    2.2  Header
    	2.2.1 Monitoring Header
    2.3  Slidebar
	2.4  Container
		2.4.1 Event Container
		2.4.2 Dashboard Container
		2.4.3 All Container
		2.4.4 Chart Container
		2.4.5 Gas Sensor Event Container
	2.5  Footer
	2.6  Viewer
	2.7  Right Silder
		2.7.1 Management Right Silder
		2.7.2 Monitoring Right Silder
	2.8  Popup
		2.8.1 감지기 상세정보 팝업
		2.8.2 minimap
		2.8.3 계통정보 팝업
		2.8.4 Equip Information Popup
		2.8.5 Option Popup
		2.8.6 Mobile User Popup
		2.8.7 상황보기팝업
		2.8.8 위험지역정보 Popup
		2.8.9 관련설비목록 Popup
		2.8.10 가스감지기 현황 Popup
		2.8.11 차트데이터 상세보기 Popup
		2.8.12 수신지역설정 Popup
		2.8.13 가스 기준 정보 등록 Popup
	2.9  Login
	2.10  Media query
    2.11  Tooltip

::  3.0  Predefined CSS Setting
-------------------------------------------
	3.1  Predefined Classes
	3.2  Disaster Prevention Monitoring Predefined Classes
	3.3  Button Color
*/

/* -------------------------------
   1.0 General reset & setup
------------------------------- */

/* 1.1 Font Setup */

/* 
 * Nanum Gothic (Korean) http://www.google.com/fonts/earlyaccess
 */
 
@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    src: url(../font/NanumGothic/NanumGothic-Regular.eot);
    src: url(../font/NanumGothic/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'), url(../font/NanumGothic/NanumGothic-Regular.woff2) format('woff2'), url(../font/NanumGothic/NanumGothic-Regular.woff) format('woff'), url(../font/NanumGothic/NanumGothic-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 700;
    src: url(../font/NanumGothic/NanumGothic-Bold.eot);
    src: url(../font/NanumGothic/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'), url(../font/NanumGothic/NanumGothic-Bold.woff2) format('woff2'), url(../font/NanumGothic/NanumGothic-Bold.woff) format('woff'), url(../font/NanumGothic/NanumGothic-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 800;
    src: url(../font/NanumGothic/NanumGothic-ExtraBold.eot);
    src: url(../font/NanumGothic/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'), url(../font/NanumGothic/NanumGothic-ExtraBold.woff2) format('woff2'), url(../font/NanumGothic/NanumGothic-ExtraBold.woff) format('woff'), url(../font/NanumGothic/NanumGothic-ExtraBold.ttf) format('truetype');
}


@font-face {
	font-family: NotoSans-Black;
	src: local(※), url(../font/NotoSans/NotoSans-Black.woff) format('woff')
}

@font-face {
	font-family: NotoSans-Bold;
	src: local(※), url(../font/NotoSans/NotoSans-Bold.woff) format('woff')
}

@font-face {
	font-family: NotoSans-Medium;
	src: local(※), url(../font/NotoSans/NotoSans-Medium.woff) format('woff')
}

@font-face {
	font-family: NotoSans-Regular;
	src: local(※), url(../font/NotoSans/NotoSans-Regular.woff)
		format('woff')
}

@font-face {
	font-family: NotoSans-Light;
	src: local(※), url(../font/NotoSans/NotoSans-Light.woff) format('woff')
}

@font-face {
	font-family: NotoSans-Thin;
	src: local(※), url(../font/NotoSans/NotoSans-Thin.woff) format('woff')
}

@font-face {
	font-family: 'weathericons';
	src: url('../font/weather/weathericons-regular-webfont.eot');
	src: url('../font/weather/weathericons-regular-webfont.eot?#iefix')
		format('embedded-opentype'),
		url('../font/weather/weathericons-regular-webfont.woff2')
		format('woff2'),
		url('../font/weather/weathericons-regular-webfont.woff')
		format('woff'),
		url('../font/weather/weathericons-regular-webfont.ttf')
		format('truetype'),
		url('../font/weather/weathericons-regular-webfont.svg#weather_iconsregular')
		format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'eun-font-icon';
	src: url('../font/eun-font-icon/eun-font-icon.eot?k1kma1');
	src: url('../font/eun-font-icon/eun-font-icon.eot?k1kma1#iefix')
		format('embedded-opentype'),
		url('../font/eun-font-icon/eun-font-icon.ttf?k1kma1')
		format('truetype'),
		url('../font/eun-font-icon/eun-font-icon.woff?k1kma1') format('woff'),
		url('../font/eun-font-icon/eun-font-icon.svg?k1kma1#eun-font-icon')
		format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="eun-"], [class*=" eun-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'eun-font-icon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.eun-AUTO_FIRE:before {
	content: "\e900";
}

.eun-CCTV:before {
	content: "\e901";
}

.eun-check:before {
	content: "\e902";
}

.eun-DUCT:before {
	content: "\e903";
}

.eun-EQUIP:before {
	content: "\e904";
}

.eun-GAS:before {
	content: "\e905";
}

.eun-INHALE_FIRE:before {
	content: "\e906";
}

.eun-LEAK:before {
	content: "\e907";
}

.eun-radio-off:before {
	content: "\e908";
}

.eun-radio-on:before {
	content: "\e909";
}

.eun-sensor:before {
	content: "\e90a";
}

.eun-zone:before {
	content: "\e90b";
}

.eun-phone:before {
	content: "\e90c";
}

.eun-phone2:before {
	content: "\e90d";
}

.eun-logo_text:before {
	content: "\e90e";
}

.eun-logo:before {
	content: "\e90f";
}

.eun-new-logo:before {
	content: "\e910";
}

.eun-new-logo2:before {
	content: "\e911";
}

.eun-rectangle:before {
	content: "\e912";
}

.eun-rectangle-stroke:before {
	content: "\e913";
}

.eun-sort.down:before{
	content: "\e914";
}

.eun-sort.up:before{
	content: "\e915";
}

.eun-sort:before{
	content: "\e916";
}

/* 1.2 Reset */
html, body {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}

.s-fade {
	transition: background-color 200ms linear, border-color 200ms linear,
		color 200ms linear, box-shadow 200ms linear;
}

* {
	box-sizing: border-box;
}

li {
	list-style: none;
}

/* 1.3 Disaster Prevention Monitoring Reset */
html, body {
	font-family: Dotum,'돋움';
	color: #333;
	font-size: 13px;
	height: 100%;
	overflow: hidden; /*min-width: 1280px;*/
}

ul {
	margin-top: 0;
	display: block;
}

/* -------------------------------
   2.0 Layout
------------------------------- */

/* 2.1 All */
.s-page-container {
	position: relative;
	/*     background: #d5d8da; */
	background: rgba(0, 0, 0, 0);
	height: 100%;
}

.s-body-tile {
	padding-top: 56px;
	height: 100%;
	margin-left: 250px;
	transition: all .3s ease;
	/*  min-width: 1030px; */
}

.s-body-tile.s-left-slide-close {
	margin-left: 50px;
	/* 	min-width: 1230px; */
}

/* 2.1.1 Scrollbar Style */

/*************** SCROLLBAR BASE CSS ***************/
.scroll-wrapper {
	overflow: hidden !important;
	padding: 0 !important;
	position: relative;
}

.scroll-wrapper.s-situation-view-table-wrap, .scroll-wrapper.s-situation-view-table-wrap-double
	{
	width: 100%;
}

.scroll-wrapper.s-situation-view-table-wrap-overflow {
	width: 870px;
	margin-left: 18px;
	margin-bottom: 18px;
}

.scroll-wrapper>.scroll-content {
	border: none !important;
	box-sizing: content-box !important;
	height: auto;
	left: 0;
	margin: 0;
	max-height: none;
	max-width: none !important;
	overflow-y: scroll !important;
	overflow-x: scroll !important;
	padding: 0;
	position: relative !important;
	top: 0;
	width: 337px !important;
}

.s-alarm-input-wrap .scroll-wrapper>.scroll-content {
	width: 295px !important;
}

.s-situation-view-table-wrap.scroll-wrapper>.scroll-content {
	width: calc(100% + 5px) !important;
	overflow-x: hidden;
	padding-right: 29px;
}

.s-situation-view-table-wrap-double.scroll-wrapper>.scroll-content {
	width: 100% !important;
	padding-right: 18px;
	padding-bottom: 18px;
}

.scroll-wrapper>.scroll-content::-webkit-scrollbar {
	height: 0;
	width: 0;
}

.scroll-element {
	display: none;
}

.scroll-element, .scroll-element div {
	box-sizing: content-box;
}

.scroll-element.scroll-x.scroll-scrollx_visible, .scroll-element.scroll-y.scroll-scrolly_visible
	{
	display: block;
}

.scroll-element .scroll-bar, .scroll-element .scroll-arrow {
	cursor: default;
}

.scroll-textarea {
	border: 1px solid #cccccc;
	border-top-color: #999999;
}

.scroll-textarea>.scroll-content {
	overflow: hidden !important;
}

.scroll-textarea>.scroll-content>textarea {
	border: none !important;
	box-sizing: border-box;
	height: 100% !important;
	margin: 0;
	max-height: none !important;
	max-width: none !important;
	overflow: scroll !important;
	outline: none;
	padding: 2px;
	position: relative !important;
	top: 0;
	width: 100% !important;
}

.s-alarm-input-wrap .scroll-textarea>.scroll-content>textarea {
	padding: 8px;
}

.scroll-textarea>.scroll-content>textarea::-webkit-scrollbar {
	height: 0;
	width: 0;
}

/*************** SIMPLE OUTER SCROLLBAR ***************/
.scroll-wrapper.tab_container.scrollbar-outer {
	height: calc(100% - 42px);
}

.scrollbar-outer>.scroll-element, .scrollbar-outer>.scroll-element div {
	border: none;
	margin: 0;
	padding: 0;
	position: absolute;
	z-index: 10;
}

.scrollbar-outer>.scroll-element {
	background-color: transparent;
}

.scrollbar-outer>.scroll-element div {
	display: block;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
}

.scrollbar-outer>.scroll-element.scroll-x {
	bottom: 0;
	height: 10px;
	left: 0;
	width: 100%;
}

.s-situation-view-table-wrap .scroll-element.scroll-x {
	display: none;
}

.s-situation-view-table-wrap-double .scroll-element.scroll-x {
	display: block;
}

.s-situation-view-table-wrap-overflow .scroll-element.scroll-x {
	display: block;
}

.scroll-wrapper.tab_container.scrollbar-outer .scroll-element.scroll-x {
	display: none;
}

.scrollbar-outer>.scroll-element.scroll-y {
	height: 100%;
	right: -13px;
	top: 0;
	width: 12px;
}

.s-situation-view-table-wrap .scroll-element.scroll-y,
	.s-situation-view-table-wrap-double .scroll-element.scroll-y {
	top: 6px;
}

.s-situation-view-table-wrap-overflow .scroll-element.scroll-y {
	top: 6px;
}

.scroll-wrapper.tab_container.scrollbar-outer .scroll-element.scroll-y {
	top: 6px;
	right: -12px;
}

.s-alarm-input-wrap .scrollbar-outer>.scroll-y.scroll-element {
	right: -14px;
	top: 0;
}

.scrollbar-outer>.scroll-element.scroll-x .scroll-element_outer {
	height: 6px;
	top: 2px;
}

.scrollbar-outer>.scroll-element.scroll-y .scroll-element_outer {
	left: -9px;
	width: 6px;
}

.scrollbar-outer>.scroll-element .scroll-element_outer {
	overflow: hidden;
}

.scrollbar-outer>.scroll-element .scroll-element_track {
	background-color: rgba(0, 0, 0, .1);
}

.scrollbar-outer>.scroll-element .scroll-element_outer, .scrollbar-outer>.scroll-element .scroll-element_track,
	.scrollbar-outer>.scroll-element .scroll-bar {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.scrollbar-outer>.scroll-element .scroll-bar {
	background-color: rgba(255, 255, 255, .35);
	transition: background-color 200ms linear;
}
/* .scrollbar-outer > .scroll-element .scroll-bar:hover { background-color: rgba(255,255,255,.45); } */
.scrollbar-outer:hover .scroll-element .scroll-bar {
	background-color: rgba(255, 255, 255, .45);
}

.scrollbar-outer>.scroll-element.scroll-draggable .scroll-bar {
	background-color: rgba(255, 255, 255, .6);
}

.s-alarm-input-wrap .scrollbar-outer>.scroll-element .scroll-bar {
	background-color: rgba(0, 0, 0, .35);
	transition: background-color 200ms linear;
}

.s-alarm-input-wrap .scrollbar-outer:hover .scroll-element .scroll-bar {
	background-color: rgba(0, 0, 0, .45);
}

.s-alarm-input-wrap .scrollbar-outer>.scroll-element.scroll-draggable .scroll-bar
	{
	background-color: rgba(0, 0, 0, .6);
}

.s-situation-view-table-wrap.scrollbar-outer>.scroll-element .scroll-bar
	{
	background-color: rgba(0, 0, 0, .3);
	transition: background-color 200ms linear;
}

.s-situation-view-table-wrap.scrollbar-outer:hover .scroll-element .scroll-bar
	{
	background-color: rgba(0, 0, 0, .45);
}

.s-situation-view-table-wrap.scrollbar-outer>.scroll-element.scroll-draggable .scroll-bar
	{
	background-color: rgba(0, 0, 0, .6);
}

.s-situation-view-table-wrap-double.scrollbar-outer>.scroll-element .scroll-bar
	{
	background-color: rgba(0, 0, 0, .3);
	transition: background-color 200ms linear;
}

.s-situation-view-table-wrap-double.scrollbar-outer:hover .scroll-element .scroll-bar
	{
	background-color: rgba(0, 0, 0, .45);
}

.s-situation-view-table-wrap-double.scrollbar-outer>.scroll-element.scroll-draggable .scroll-bar
	{
	background-color: rgba(0, 0, 0, .6);
}

.s-situation-view-table-wrap-overflow.scrollbar-outer>.scroll-element .scroll-bar
	{
	background-color: rgba(0, 0, 0, .3);
	transition: background-color 200ms linear;
}

.s-situation-view-table-wrap-overflow.scrollbar-outer:hover .scroll-element .scroll-bar
	{
	background-color: rgba(0, 0, 0, .45);
}

.s-situation-view-table-wrap-overflow.scrollbar-outer>.scroll-element.scroll-draggable .scroll-bar
	{
	background-color: rgba(0, 0, 0, .6);
}

.s-black-style.scrollbar-outer>.scroll-element .scroll-bar {
	background-color: rgba(0, 0, 0, .3);
	transition: background-color 200ms linear;
}

.s-black-style.scrollbar-outer:hover .scroll-element .scroll-bar {
	background-color: rgba(0, 0, 0, .45);
}

.s-black-style.scrollbar-outer>.scroll-element.scroll-draggable .scroll-bar
	{
	background-color: rgba(0, 0, 0, .6);
}

/* scrollbar height/width & offset from container borders */
.scrollbar-outer>.scroll-content.scroll-scrolly_visible {
	left: -12px;
	margin-left: 12px;
}

.scrollbar-outer>.scroll-content.scroll-scrollx_visible {
	top: 0px;
	margin-top: 0px;
}

.scrollbar-outer>.scroll-element.scroll-x .scroll-bar {
	min-width: 10px;
}

.scrollbar-outer>.scroll-element.scroll-y .scroll-bar {
	min-height: 10px;
}

/* update scrollbar offset if both scrolls are visible */
.scrollbar-outer>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track
	{
	left: -14px;
}

.scrollbar-outer>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track
	{
	top: -14px;
}

.scrollbar-outer>.scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size
	{
	left: -14px;
}

.scrollbar-outer>.scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size
	{
	top: -14px;
}

/* 상황보기 공사작업 동시에 스크롤*/
.s-situation-view-table-wrap-double .scroll-element.scroll-y.scroll-scrollx_visible.scroll-scrolly_visible .scroll-element_outer
	{
	background: white;
	padding: 2px;
	border-radius: 0;
	top: -6px;
	left: -13px;
	width: 8px;
}

.s-situation-view-table-wrap-double .scroll-element.scroll-y.scroll-scrollx_visible.scroll-scrolly_visible .scroll-element_track
	{
	top: 0px;
	width: 6px;
	left: 4px;
	height: 113px;
}

.s-situation-view-table-wrap-double .scroll-element.scroll-y.scroll-scrollx_visible.scroll-scrolly_visible .scroll-bar
	{
	height: 51px;
	width: 6px;
	left: 4px;
}

.s-situation-view-table-wrap-double .scroll-element.scroll-x.scroll-scrollx_visible.scroll-scrolly_visible .scroll-element_outer
	{
	background-color: white;
	border-radius: 0;
	height: 13px;
	top: -2px;
}

.s-situation-view-table-wrap-double .scroll-element.scroll-x.scroll-scrollx_visible.scroll-scrolly_visible .scroll-element_track
	{
	height: 6px;
	top: 5px;
}

.s-situation-view-table-wrap-double .scroll-element.scroll-x.scroll-scrollx_visible.scroll-scrolly_visible .scroll-bar
	{
	top: 5px;
	height: 6px;
}

/* 2.1.2 Scrollbar Background */
.s-sidebar-bg {
	width: 100%;
	position: absolute;
}

.s-body-tile .s-sidebar-bg.s-bg-monitoring, .s-body-tile .s-sidebar-bg.s-bg-main
	{
	margin-left: -250px;
}

.s-body-tile.s-left-slide-close .s-sidebar-bg.s-bg-monitoring,
	.s-body-tile.s-left-slide-close .s-sidebar-bg.s-bg-main {
	margin-left: -50px;
}

.s-bg-main {
	background-color: #d5d8da;
}

.s-bg-monitoring {
	background-color: #627785 !important;
}

/* 2.2 Header */
.s-logo-wrap {
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	overflow: hidden;
	width: 224px;
	height: 56px;
}

.s-logo {
	position: absolute;
	left: 18px;
	color: #bdbfc6;
	font-size: 32px;
	top: 7px;
	width: 38px;
	text-align: center;
	background-image: url("../images/logo.svg");
	height: 38px;
	background-size: 38px;
}

.s-logo i {
	line-height: 54px;
}

/* .s-logo-text { */
/* 	font-size: 20px; */
/* 	line-height: 56px; */
/* 	font-family: NotoSans-Bold; */
/* 	padding-left: 62px; */
/* 	color: #30373e; */
/* 	width: 120px; */
/* 	white-space: nowrap; */
/* 	position:absolute; */
/* } */
.eun-logo_text {
	font-size: 149px;
	position: absolute;
	left: 60px;
	top: -47px;
}

.s-body-tile .s-header {
	margin-left: -250px;
}

.s-body-tile.s-left-slide-close .s-header {
	margin-left: -50px;
}

.s-header {
	width: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	height: 56px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: left;
	justify-content: left;
	z-index: 1;
	border-bottom: 1px solid #d0d0d0;
	min-width: 1280px;
}

.s-user-name-wrap {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 300px;
	height: 56px;
}

.s-user-name {
	position: absolute;
	font-size: 13px;
	line-height: 58px;
	right: 20px;
	padding-left: 24px;
	padding-right: 24px;
}

.s-user-name .fa-user-circle {
	position: absolute;
	left: 0;
	top: 21px;
	font-size: 15px;
}

.s-user-name .fa-sign-out-alt {
	position: absolute;
	right: 0;
	top: 21px;
	cursor: pointer;
	font-size: 15px;
	color: #333;
}

/* 2.2.1 Monitoring Header */
.s-header-bars {
	position: absolute;
	height: 55px;
	color: #fff;
	padding: 0 58px 0 20px;
	background: #ffb620;
	cursor: pointer;
}

.s-header-bars i {
	line-height: 55px;
	color: #fff;
	font-size: 18px;
}

.s-header-bars span {
	position: absolute;
	font-size: 12px;
	left: 42px;
	top: 17px;
}

.s-monitoring-header {
	width: 100%;
	height: 55px;
	background-color: #444444;
	border-bottom: 1px solid #0b0b0b;
	position: relative;
	float: left;
	z-index: 2;
}

.header-center-box {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	padding-top: 6px;
	margin: 0 auto;
	width: 1182px;
}

.header-sm-tit {
	padding: 11px 14px 11px 30px;
	font-size: 12px;
	cursor: default;
	float: left;
	line-height: 24px;
	font-weight: bold;
}

.header-input-wrap {
	float: left;
	position: relative;
	margin: 5px 0 0;
}

/* 나중에 그냥 삭제 해도됨 */
/* .header-input-wrap .s-multiple-select-text { */
/* 	position: absolute; */
/* 	top:0; */
/* 	left:0; */
/* 	background: #fff; */
/* 	width: 138px; */
/* 	height: 34px; */
/* 	z-index: 1; */
/* 	line-height: 31px; */
/* 	border-radius: 3px; */
/* 	text-indent: 9px; */
/* 	border: 1px solid #d0d0d0; */
/* 	pointer-events: none; */
/* 	font-size: 13px; */
/* } */
.header-input-wrap .sbHolder {
	width: 148px;
}

.header-input-wrap .sbSelector {
	width: 150px;
}

.select2-container {
	font-size: 13px;
}

.DPM-select+.select2-container .select2-selection--single {
	height: 34px;
}

.DPM-select+.select2-container--default .select2-selection--single {
	border-color: #d0d0d0;
}

.DPM-select+.select2-container--default .select2-selection--single:hover
	{
	border-color: #c4c4c4;
}

.DPM-select+.select2-container--default .select2-selection--single:focus
	{
	outline: none;
}

.DPM-select+.select2-container--open .select2-selection.select2-selection--single
	{
	border-color: #c4c4c4;
}

.DPM-select+.select2-container--default .select2-selection--single .select2-selection__rendered
	{
	line-height: 32px;
}

.DPM-select+.select2-container--default .select2-selection--single .select2-selection__arrow
	{
	height: 32px;
}

.select2-container--default .select2-results__option[aria-selected=true]
	{
	background-color: #fff;
	color: #2a94db !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected]
	{
	background-color: #f6fafd;
	color: #262626;
}

.header-select+.select2 {
	width: 138px !important;
	font-size: 13px;
}

.popup-select+.select2 {
	width: 100% !important;
	font-size: 13px;
}

.select2-container--default .select2-selection--multiple {
	border: 1px solid #d0d0d0;
	height: 34px;
}

.select2-container--focus.select2-container--default .select2-selection--multiple
	{
	border: 1px solid #d0d0d0;
	height: 34px;
}

.s-header-btn {
	float: left;
	text-align: center;
	padding: 0 10px;
	border-radius: 3px;
	color: #252525;
	background: #ffffff;
	cursor: pointer;
	border: 1px solid #d0d0d0;
	font-size: 13px;
	margin-left: 16px;
	height: 34px;
	line-height: 32px;
	margin-top: 5px;
	box-sizing: border-box;
}

.header-btn:hover {
	border-color: #e3e3e3;
	background: #f0f0f0;
}

.select2-selection__rendered {
	height: 32px;
}

.s-multiselect {
	padding-left: 18px;
	position: relative;
}

.s-multiselect i {
	position: absolute;
	left: 1px;
	top: 4px;
}

.s-multiselect .fa-check-square-o {
	color: #333;
}

.select2-container--default [aria-selected=false].select2-results__option .fa-check-square-o:before
	{
	content: "\f096";
}

/* 2.3 Slidebar */
.s-left-slidebar {
	width: 250px;
	background: #3C454D;
	position: fixed;
	bottom: 0;
	top: 56px;
	left: 0;
	transition: width .3s ease;
	z-index: 1;
	overflow: hidden;
}

.s-left-slidebar.close {
	width: 50px;
}

.s-left-slidebar.close .s-has-sub>a {
	padding: 16px 9px 36px;
}

.s-left-slidebar.close .s-has-sub>a>span {
	display: none;
}

.s-divider {
	margin: 30px 0;
	height: 2px;
	background: #30373e;
}

.s-sidebar-minify-btn {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
	background: #24292e;
	color: #b1b5b8;
	margin: -15px auto;
	left: 0;
	right: 0;
	line-height: 30px;
	border-radius: 50%;
	padding: 0;
	text-align: center;
	padding: 0 !important;
	cursor: pointer;
}

.s-sidebar-minify-btn i {
	text-align: center;
	border-radius: 6px;
	position: relative;
	overflow: hidden;
	float: left;
	width: inherit !important;
	height: inherit !important;
	display: inline !important;
	font-size: 14px !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: inherit !important;
	color: inherit !important;
	background: 0 0 !important;
}

.s-sidebar-minify-btn:hover {
	background: #50585f;
}

.s-nav {
	position: relative;
	display: block;
	padding-left: 0;
}

.s-nav>li {
	position: relative;
	display: block;
}

.s-has-sub>a {
	color: #b1b5b8;
	font-family: NotoSans-Light;
	padding: 16px 20px;
	position: relative;
	display: block;
	cursor: pointer;
	height: 52px;
}

.s-has-sub>a>span {
	position: absolute;
	top: 16px;
	left: 64px;
}

.s-has-sub>a:hover {
	background: rgba(255, 255, 255, 0.1);
}

.s-nav>li>a>i {
	text-align: center;
	border-radius: 6px;
	font-size: 16px;
	color: rgba(255, 255, 255, .5);
	background: rgba(0, 0, 0, .5);
	position: relative;
	overflow: hidden;
	float: left;
	width: 32px;
	height: 32px;
	line-height: 32px;
	margin: -6px 13px -6px 0;
	z-index: 2000;
}

.s-has-sub.active>a>i {
	background: #16abaa;
	color: #0f6655;
}

.s-has-sub.active>a>span {
	color: #fff;
}

.s-has-sub.active>a {
	background: #24292e !important;
}

/* 2.4 Container */
.s-page-header {
	font-size: 24px;
	margin: 0 0 18px;
	color: #30373e;
	font-family: NotoSans-Light;
	height: 52px;
	box-shadow: 0px 4px 4px rgba(0,0,0,0.12);
}

.s-page-header small {
	color: #777;
	font-size: 58%;
	font-family: NotoSans-Light;
	padding-left: 2px;
}

.s-row {
	margin: 0 -10px;
}

.s-container {
	/*     margin-left: 250px; */
	background: #d5d8da;
	position: relative;
	padding: 25px;
	min-height: 100%;
	transition: all .3s ease;
	overflow: auto;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: auto;
	height: 1px;
	padding-bottom: 10px;
}

.s-container.s-right-slidebar-open {
	margin-right: 320px;
}

.s-container.s-left-slide-close {
	/* 	margin-left:50px; */
	
}

.s-container.s-bg-d5d8da {
	background-color: #d5d8da;
}

.s-event-map {
	width: 100%;
	float: left;
	margin-bottom: 20px;
	height: 782px;
	box-shadow: 0px 4px 4px rgba(0,0,0,0.12);
	border-radius: 5px;
	overflow: hidden;
	position: relative;
}

.s-recent-event {
	width: 100%;
	height: 319px;
	float: left;
	box-shadow: 0px 4px 4px rgba(0,0,0,0.12);
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 20px;
	position: relative;
}

.s-mobile-message {
	width: 100%;
	height: 316px;
	float: left;
	box-shadow: 0px 4px 4px rgba(0,0,0,0.12);
	border-radius: 5px;
	overflow: hidden;
	position: relative;
}

.s-title {
	font-size: 16px;
	line-height: 38px;
	color: #616161;
	padding: 0;
	position: absolute;
	z-index: 3;
	display: inline-block;
	top: 4px;
	left: 13px;
	font-family: NotoSans-Bold;
	width: calc(100% - 24px);
}

.s-content {
	background: #fff;
	box-sizing: border-box;
	position: relative;
}

.s-recent-event .s-content {
	height: 100%;
	padding: 13px;
	padding-top: 45px;
}

.s-mobile-message .s-content {
	height: 100%;
	padding-top: 38px;
	min-height: 107px;
}

.s-event-map .s-content {
/* 	background-image: url("../images/map.jpg"); */
	position: relative;
	height: 100%;
}

.weather-left-wrap {
	border-right: 1px solid #d0d0d0;
	margin-bottom: 16px;
	width: 70%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	height: 259px;
}

.weather-right-wrap {
	width: 30%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
	border-left: none;
}

.s-weather-address-wrap {
	height: 22px;
	font-family: NotoSans-Bold;
	color: #777;
	margin-top: 8px;
	margin-bottom: 0;
	width: 100%;
	text-align: center;
	font-size: 13px;
}

.s-weathe-five-block {
	width: 100%;
	text-align: center;
	font-size: 12px;
	border-bottom: 1px solid #d0d0d0;
	padding-bottom: 17px;
	height: 52px;
	margin: 0 6px;
}

.s-weathe-five-block:last-child {
	border-bottom: none;
}

.s-weathe-five-block-tit {
	margin-bottom: 1px;
	color: #888;
	margin-top: 9px;
	margin-bottom: 6px;
	font-weight: bold;
}

.s-weather-icon-wrap {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	height: 41px;
}

.s-fine-dust-wrap {
	width: 168px;
	text-align: center;
	font-size: 11px;
	height: 1px;
	color: #888;
	line-height: 20px;
}

.s-fine-dust-tit {
	width:58px;
	display: inline-block;
	text-align: left;
	float: left;
}

.s-weather-unit {
	width: 27px;
	display: inline-block;
	text-align: left;
	margin-left: 4px;
}

.s-fine-dust-tit1 {
	width:60px;
	text-align: left;
	margin-right: 10px;
}

.s-fine-particulate-matter-wrap {
	width: 100%;
	text-align: right;
	font-size: 11px;
	margin-top: -13px;
	height: 1px;
	color: #888;
}

.s-fine-dust4 {
	color: #f04b46;
	width: 98px;
	display: inline-block;
	text-align: right;
}

.s-fine-dust3 {
	color: #fcaf41;
	width: 98px;
	display: inline-block;
	text-align: right;
}

.s-fine-dust2 {
	color: #17b6a4;
	width: 98px;
	display: inline-block;
	text-align: right;
}

.s-fine-dust1 span:first-child, .s-fine-dust2 span:first-child, .s-fine-dust3 span:first-child, .s-fine-dust4 span:first-child{
	width: 30px;
}

.s-fine-dust1 span:nth-child(3), .s-fine-dust2 span:nth-child(3), .s-fine-dust3 span:nth-child(3), .s-fine-dust4 span:nth-child(3){
	margin-left: 6px;
}

.s-fine-dust1 {
	color: #2184da;
	width: 98px;
	display: inline-block;
	text-align: right;
}

.s-fine-grade {
	magin-left : 5px;
}

.s-temperature-unit {
	-webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
    margin-bottom: 11px;
    font-size: 23px;
    margin-left: 4px;
    font-family: NotoSans-Bold;
}

.s-weather-icon {
	float: left;
	
	-webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
}

.s-weather-icon:before {
	font-family: weathericons;
	content: "\f00d";
	color: #000;
	font-size: 62px;
}

.s-wind-icon {
	height: 22px;
	line-height: 22px;
	text-align: center;
	position: absolute;
	font-style: normal;
	margin: auto;
	right: 0;
	left: 0;
	top: 6px;
	bottom: 0;
}

.s-wind-icon:before {
	font-family: weathericons;
	content: "\f0b1";
	color: #000;
	font-size: 26px;
}

.clear_sky:before {
	content: "\f00d";
}

.few_clouds:before {
	content: "\f041";
}

.scattered_clouds:before {
	content: "\f013";
}

.broken_clouds:before {
	content: "\f012";
}

.shower_rain:before {
	content: "\f008";
}

.rain:before {
	content: "\f019";
}

.thunderstorm:before {
	content: "\f01e";
}

.snow:before {
	content: "\f01b";
}

.mist:before {
	content: "\f014";
}

.s-weather-degree {
	font-size: 34px;
	text-align: center;
	float: left;
	width: 100%;
}

.s-weather-title {
	text-align: center;
	font-size: 16px;
	float: left;
	width: 100%;
	margin-bottom: 30px;
}

.s-weather-row {
	float: left;
	width: 100%;
	padding: 0 20px 0 20px;
}

.s-weather-right-text {
	line-height: 31px;
	width: 50%;
	display: inline-block;
	text-align: center;
	white-space: nowrap;
}

.s-weather-right-text-r {
	width: 50%;
	display: inline-block;
	text-align: center;
	position: relative;
	height: 31px;
	line-height: 31px;
}

.s-weather {
	height: 30px;
	background: #fafafa;
	width: 100%;
	font-size: 13px;
	line-height: 30px;
}

.s-weather-img {
	background-image: url("../images/weather.jpg");
	width: 36px;
	height: 30px;
	float: left;
}

/* 2.4.1 Event Container */

.s-sensorlist-wrap {
	float:left; width:100%;
}

.s-event-sub-tap-container{
	float:left;
	width:100%;
}

.s-event-top-wrap {
	background: #fff;
	padding: 18px;
	box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.07);
	border-radius: 5px;
	min-width: 1220px;
	position: relative;
	float: left;
	width: 100%;
}

.s-event-top-wrap .ui-jqgrid table {
	border-collapse: collapse;
}

.s-event-top-wrap .ui-jqgrid {
	float: left;
	margin: 18px 0;
	border: none;
	border-radius: 0;
}

.s-event-top-wrap .ui-jqgrid th {
	height: 38px;
	border-top: none !important;
	border-right: 1px solid #bec3c6 !important;
	border-bottom: none !important;
	font-size: 13px;
}

.s-event-top-wrap .ui-jqgrid-hdiv {
	background-color: #ebeced;
	border-top: 2px solid #bec3c6 !important;
	border-bottom: 2px solid #bec3c6 !important;
}

.s-event-top-wrap .ui-jqgrid .ui-jqgrid-bdiv td {
	border: 1px solid #d0d0d0 !important;
	height: 36px;
}

.s-event-top-wrap .ui-jqgrid .ui-jqgrid-bdiv td:first-child {
	border-left: none !important;
}

.s-event-top-wrap .ui-jqgrid-bdiv table tr:first-child td {
	border-top: none !important;
	border-bottom: none !important;
}

.s-event-top-wrap .ui-jqgrid-bdiv table tr:nth-child(2) td {
	border-top: none !important;
}

.s-event-top-wrap .ui-jqgrid-pager {
	border-top: 1px solid #bec3c6;
	border-bottom: 2px solid #bec3c6;
	background-color: #ebeced;
}

/* .s-event-top-wrap .ui-jqgrid-bdiv table tr:nth-child(2n-1) td{ */
/* 	background-color: #f9f9f9 !important; */
/* } */
.s-event-top-wrap tr.active {
	background-color: #eeeeee;
}

.s-event-top-wrap tr.success td {
	background-color: #d1f0ed !important;
	color: #108073 !important;
}

#gasSensorContents .s-event-top-wrap tr.success td {
	background-color: #0099ff !important;
	color: #333 !important;
}

.s-event-top-input-wrap {
	float: left;
	position: relative;
	margin: 5px 0 0;
	height: 36px;
}

.s-event-top-row {
	height: 44px;
	margin: 4px -0.5%;
	float: left;
	width: calc(100% - 90px);
}

.ui-jqgrid {
	background: #fff;
}

.s-event-tabs {
	margin-left: -39px;
	margin-bottom: 10px;
}

ul.s-event-tabs li.s-event-tit-tap {
	margin-right: 4px;
	color: #8a8f94;
	border: 2px solid #8a8f94;
	padding: 8px 13px;
	border-radius: 6px;
	display: inline-block;
	font-family: NotoSans-Regular;
}

ul.s-event-tabs li.s-event-tit-tap:hover {
	background: #eeeeee;
	color: #888f95;
}

ul.s-event-tabs li.s-event-tit-tap.active {
	background: #17B6A4;
	border-color: rgba(0, 0, 0, .3);
	color: #fff;
}

.s-event-tit-tap {
	font-size: 16px;
	cursor: pointer;
}

.s-event-sub-tap {
	font-size: 14px;
	cursor: pointer;
	background-color: #eeeeee !important;
	display: inline-block;
	padding: 8px 14px;
	margin-bottom: 6px;
	border-radius: 3px;
	color: rgb(138, 143, 148) !important;
	border: 1px solid #d0d0d0;
	margin-right: 4px;
	font-family: NotoSans-Regular;
}

.s-event-sub-tap.active {
	background-color: #d1f0ed !important;
	color: #108073 !important;
	/* 	border: 1px solid #108073 !important; */
}

.btn-search-wrap {
	position: absolute;
	right: 0;
	top: 19px;
}

.s-event-top-row .s-event-top-input-wrap {
	width: calc(100% - 83px);
}

.s-event-top-row .s-event-tween-input-wrap {
	float: left;
	position: relative;
	margin: 5px 0 0;
	height: 36px;
	width: calc(50% - 42px);
}

.s-event-top-row .s-y-select {
	width: 100%;
}

.s-event-top-row .header-sm-tit {
	padding: 11px 8px 11px 0;
	width: 83px;
	text-align: right;
}

.s-sensor-code {
	border: 1px solid #d0d0d0;
	height: 34px;
	line-height: 34px;
	border-radius: 3px;
	width: 100%;
	padding: 0 8px;
	float: left;
}

.s-sensor-code:focus {
	border: 1px solid #c4c4c4;
}

.s-mobile-user {
	width: 34px;
	height: 34px;
	float: left;
	background-color: #ebeced;
	border: 1px solid #d0d0d0;
	cursor: pointer;
	margin-left: 6px;
	border-radius: 3px;
	text-align: center;
}

.s-mobile-user:hover {
	background-color: #bcbdbe;
	border: 1px solid #c4c4c4;
}

.s-mobile-user:hover i {
	color: #525252;
}

.s-mobile-user i {
	font-size: 18px;
	line-height: 32px;
	color: #7c7c7c;
}

.s-period {
	border: 1px solid #d0d0d0;
	height: 34px;
	line-height: 34px;
	border-radius: 3px;
	width: calc(100% - 52px);
	padding: 0 8px;
}

.s-period+img {
	position: absolute;
	right: 22px;
	top: 8px;
}

.s-event-back-text {
	font-size: 12px;
	cursor: default;
	float: left;
	line-height: 45px;
}

#eventSubGrid {
	float: left;
	width: 100%;
}

#sensorSubGrid {
	float: left;
}

.s-event-sub-tab-container {
	float: left;
	width: 100%;
}

.s-event-bottom-table {
	width: 100%;
	border-collapse: collapse;
}

.s-event-bottom-table th {
	border: 1px solid #bec3c6;
	height: 34px;
	padding: 0 8px;
	text-align: center;
	background-color: #ebeced;
}

.s-event-bottom-table td {
	border: 1px solid #d0d0d0;
	height: 34px;
	padding: 0 8px;
	background-color: #fff;
}

.fa-map-marker-alt {
	font-size: 13px;
	cursor: pointer;
	background: #ebeced;
	padding: 5px 8px;
	border-radius: 3px;
	border: 1px solid #8d8e8e;
}

.fa-map-marker-alt:hover {
	background: #bcbdbe;
	border: 1px solid #5e5e5f;
}

.fa-list-alt {
	font-size: 13px;
	cursor: pointer;
	background: #ebeced;
	padding: 5px 8px;
	border-radius: 3px;
	border: 1px solid #8d8e8e;
}

.fa-list-alt:hover {
	background: #bcbdbe;
	border: 1px solid #5e5e5f;
}

.ui-th-div.ui-jqgrid-sortable {
	width: 100%;
}

.ui-grid-ico-sort.ui-icon-asc.ui-sort-ltr.glyphicon.glyphicon-triangle-top
	{
	background-image: url("../images/up_semo.png");
	width: 8px;
	height: 8px;
	top: 4px;
}

.ui-grid-ico-sort.ui-icon-asc.ui-sort-ltr.glyphicon.glyphicon-triangle-top.ui-disabled
	{
	background-image: url("../images/up_semo.png");
}

.ui-grid-ico-sort.ui-icon-desc.ui-sort-ltr.glyphicon.glyphicon-triangle-bottom
	{
	background-image: url("../images/down_semo.png");
	width: 8px;
	height: 8px;
	top: 5px;
}

.ui-grid-ico-sort.ui-icon-desc.ui-sort-ltr.glyphicon.glyphicon-triangle-bottom.ui-disabled
	{
	background-image: url("../images/down_semo.png");
}

.glyphicon.glyphicon-step-backward {
	background-image: url("../images/step-backward.png");
	width: 8px;
	height: 8px;
	padding: 7px;
}

.glyphicon.glyphicon-backward {
	background-image: url("../images/backward.png");
	width: 8px;
	height: 8px;
	padding: 7px;
}

.glyphicon.glyphicon-forward {
	background-image: url("../images/forward.png");
	width: 8px;
	height: 8px;
	padding: 7px;
}

.glyphicon.glyphicon-step-forward {
	background-image: url("../images/step-forward.png");
	width: 8px;
	height: 8px;
	padding: 7px;
}

#sensorSubGrid {
	width: 100%;
}

.s-sms-number {
	border: 1px solid #d0d0d0;
	height: 34px;
	line-height: 34px;
	border-radius: 3px;
	width: calc(100% - 40px);
	padding: 0 8px;
	float: left;
}

.s-sms-number:focus {
	border: 1px solid #c4c4c4;
}

/* 2.4.2 Dashboard Container */
.s-page-header-intext {
	position: absolute;
	color: #fff;
	background-color: #30373e;
	line-height: 52px;
	padding: 0 20px;
	border-radius: 3px 0 0 3px;
	font-family: NotoSans-Medium;
}

.s-moving-sign {
	background-color: #3c454d;
	font-size: 15px;
	line-height: 52px;
	color: #fff;
	border-radius: 3px;
	padding: 0 10px;
	overflow: hidden;
	font-family: NotoSans-Regular;
}

.marquee {
	width: 100%;
	overflow: hidden;
	background-color: #3c454d;
	position: relative;
	float: right;
}

.marquee p:after {
	content: "";
	white-space: nowrap;
	padding-right: 50px;
}

.marquee p {
	margin: 0;
	display: inline-block;
	white-space: nowrap;
	-webkit-animation-name: marquee;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 100s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-name: marquee;
	-moz-animation-timing-function: linear;
	-moz-animation-duration: 100s;
	-moz-animation-iteration-count: infinite;
	-ms-animation-name: marquee;
	-ms-animation-timing-function: linear;
	-ms-animation-duration: 100s;
	-ms-animation-iteration-count: infinite;
	-o-animation-name: marquee;
	-o-animation-timing-function: linear;
	-o-animation-duration: 100s;
	-o-animation-iteration-count: infinite;
	animation-name: marquee;
	animation-timing-function: linear;
	animation-duration: 100s;
	animation-iteration-count: infinite;
}
/* @-webkit-keyframes marquee { */
/*   from   { -webkit-transform: translate(0%);} */
/*   99%,to { -webkit-transform: translate(-250%);} */
/* } */
/* @-moz-keyframes marquee { */
/*   from   { -moz-transform: translate(0%);} */
/*   99%,to { -moz-transform: translate(-250%);} */
/* } */
/* @-ms-keyframes marquee { */
/*   from   { -ms-transform: translate(0%);} */
/*   99%,to { -ms-transform: translate(-250%);} */
/* } */
/* @-o-keyframes marquee { */
/*   from   { -o-transform: translate(0%);} */
/*   99%,to { -o-transform: translate(-250%);} */
/* } */
/* @keyframes marquee { */
/*   from   { transform: translate(0%);} */
/*   99%,to { transform: translate(-250%);} */
/* } */
@keyframes marquee {
	from { margin-left:100%; }
	99%,to { margin-left: -250%; }
}

.s-moving-sign-text {
	/* 	white-space: nowrap; */
	/* 	width:100%; */
	
}

.s-balloon-wrap {
}

.s-balloon {
	width: 72%;
	height: 72%;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	border: 6px solid #fff;
	border-radius: 20px;
	box-sizing: border-box;
	background-color: #fff;
	/* 	height: 68px; */
	-webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.75);
	-moz-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.75);
	box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.75);
}

.s-balloon-text-length {
	color: #fff;
	text-align: center;
	white-space: nowrap;
	font-size: 15px;
	padding-bottom: 16px;
	top: 16%;
}

.s-balloon-text-first {
	position: absolute;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	font-size: 15px;
	padding-bottom: 16px;
	top: 10%;
	width: 100%;
}

.s-balloon-text-first-transparents {
	color: rgba(0,0,0,0);
	text-align: center;
	white-space: nowrap;
	font-size: 15px;
	padding-bottom: 16px;
	top: 16%;
	width: 100%;
}

.s-balloon-text-second {
	position: absolute;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	font-size: 15px;
	padding-bottom: 16px;
	top: 52%;
	width: 100%;
}

.s-balloon-allow {
	position: absolute;
	margin: auto;
	right: 0;
	left: 0;
	border: 6px solid #fff;
	width: 18%;
	height: 43%;
	transform: scale(0.7, 3.8) rotate(45deg);
	background-color: #fff;
	bottom: -28%;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.75);
	-moz-box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.75);
	box-shadow: 0px 0px 8px 0px rgba(255, 255, 255, 0.75);
}

.s-balloon-allow-2 {
	position: absolute;
	margin: auto;
	right: 0;
	left: 0;
	width: 11%;
	height: 29%;
	transform: scale(0.7, 3.8) rotate(45deg);
	background-color: #b7b7b7;
	bottom: -10%;
}

.s-balloon-allow-3 {
	position: absolute;
	width: 100%;
	background-color: #b7b7b7;
	border-radius: 14px;
	height: 100%;
	top: 0;
	left: 0;
}

.s-balloon.red {
	animation: circle 2s 0s infinite linear;
	border: 6px solid #ed1c24;
	background-color: #f3696e;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(237, 28, 36, 0.75);
	-moz-box-shadow: 0px 0px 8px 0px rgba(237, 28, 36, 0.75);
	box-shadow: 0px 0px 8px 0px rgba(237, 28, 36, 0.75);
}

.s-balloon.red .s-balloon-allow {
	/* 	animation:circle 2s 0s infinite linear; */
	background-color: #f3696e;
	border: 6px solid #ed1c24;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(237, 28, 36, 0.75);
	-moz-box-shadow: 0px 0px 8px 0px rgba(237, 28, 36, 0.75);
	box-shadow: 0px 0px 8px 0px rgba(237, 28, 36, 0.75);
}

.s-balloon.red .s-balloon-allow-2 {
	/* 	animation:circlebg 2s 0s infinite linear; */
	background-color: #f3696e;
}

.s-balloon.red .s-balloon-allow-3 {
	/* 	animation:circlebg 2s 0s infinite linear; */
	background-color: #f3696e;
}

@keyframes circle { 
0% {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);}
60% {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);}
70% {border-color: #ed1c24; background: #f3696e; transform: scale(1.1, 1.1);}
80% {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);}
90% {border-color: #ed1c24; background: #f3696e; transform: scale(1.1, 1.1);}
100% {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);}
}

/* @keyframes circlebg { */
/* 	 0%  {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);} */
/* 	 25% {border-color: #ed1c24; background: #f3696e; transform: scale(1.1, 1.1);} */
/* 	 50% {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);} */
/* 	 75% {border-color: #ed1c24; background: #f3696e; transform: scale(1.1, 1.1);} */
/* 	 100%  {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);} */
/* } */

/* dotballoon */

.s-dotballon-wrap {
	position: absolute;
}

.s-dotballon-wrap.number-none .s-dotballon-number{
	display: none;
}

.s-dotballon-tit {
	font-family: NotoSans-Bold;
	color: #30373e;
	font-size: 16px;
	white-space: nowrap;
	background-color: #fff;
	padding: 9px 15px;
	border-radius: 6px;
	margin-left: -50%;
	margin-right: 50%;
	margin-top: -134px;
	border: 2px solid #30373e;
}

.s-dotballon-number {
	font-family: NotoSans-Bold;
	font-size: 12px;
	left: 36%;
	top: -138px;
	line-height: 24px;
	text-align: center;
	border-radius: 50%;
	color: #fff;
	width: 24px;
	height: 24px;
	position: absolute;
	background-color: #f04b46;

	animation: dotcircle 2s 0s infinite linear;
}

@keyframes dotcircle { 
0% {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);}
60% {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);}
70% {border-color: #ed1c24; background: #f3696e; transform: scale(1.2, 1.2);}
80% {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);}
90% {border-color: #ed1c24; background: #f3696e; transform: scale(1.2, 1.2);}
100% {border-color: #ed1c24; background: #f3696e; transform: scale(1, 1);}
}

.s-dotballon-stick {
	position: absolute;
	width: 2px;
	height: 91px;
	background-color: #30373e;
	margin: 0 auto 0;
	left: -100%;
	right: 0;
}

.s-dotballon-dot {
	border-radius: 50%;
	position: absolute;
	width: 8px;
	height: 8px;
	background-color: #30373e;
	margin: 0 auto;
	left: -100%;
	right: 0;
	bottom: -8px;
}

.s-body-tile .s-container-main-min {
	min-width: 1030px;
}

.s-body-tile.s-left-slide-close .s-container-main-min {
	min-width: 1046px;
}

.scroll-wrapper.s-dashboard-table-wrap.scrollbar-outer.s-black-style {
	height: 227px;
}

.s-dashboard-table-wrap .scroll-element.scroll-y.scroll-scrolly_visible {
	right: -10px !important;
}

.s-dashboard-table-wrap .scroll-element.scroll-x.scroll-scrollx_visible {
	bottom: 2px !important;
	width: calc(100% - 18px);
}

.s-dashboard-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 12px;
}

.s-dashboard-table th {
	background: #ebeced;
	border: 1px solid #d0d0d0 !important;
	padding-top: 10px;
	padding-bottom: 7px;
}

.s-dashboard-table th:first-child {
	border-left: none !important;
}

.s-dashboard-table th:last-child {
	border-right: none !important;
}

.s-dashboard-table th, .s-dashboard-table td {
	text-align: center;
}

.s-dashboard-table td {
	border: 1px solid #d0d0d0;
	line-height: 27px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.s-dashboard-table td:first-child {
	border-left: none !important;
}

.s-dashboard-table td:last-child {
	border-right: none !important;
}

.s-dashboard-table tr:hover td {
	background-color: #eeeeee;
}

.s-dashboard-table tr.active td {
	background-color: #d1f0ed !important;
	color: #108073 !important;
}

.s-locname {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#alarm-total {
	position: absolute;
	background: rgba(0, 0, 0, .9);
	z-index: 1;
	display: none;
	border-radius: 3px;
	color: #fff;
	font-size: 13px;
	padding: 0 5px 5px;
}

#alarm-bldg-title {
	padding: 4px 2px;
	margin-right: 22px;
}

#alarm-total i {
	position: absolute;
	right: 8px;
	top: 8px;
	font-size: 11px;
	cursor: pointer;
}

#alarm-table {
	border-collapse: collapse;
	width: 100%;
}

#alarm-table th, #alarm-table td {
	border: 1px solid rgba(255, 255, 255, .5);
	padding: 2px 5px;
	text-align: center;
}

#alarm-table tr td {
	cursor: default !important;
}

#alarm-table tr.cursor td {
	cursor: pointer !important;
}

#alarm-table td:last-child {
	text-align: right;
}

#alarm-table tr:hover td {
	background-color: rgba(255, 255, 255, .4);
	cursor: pointer;
}

#alarm-table tr:focus {
	background-color: red;
}

#alarm-table tr.active td {
	background-color: rgba(255, 255, 255, 1);
	color: #000;
	cursor: pointer;
}

#recentlyEventHead {
	width: 100%;
	overflow: hidden !important;
}

#recentlyEvent {
	width: 100% !important;
	height: 228px !important;
	overflow-x: scroll;
	overflow-y: hidden;
}

#recentlyEventHead .s-dashboard-table {
	width: 100%;
	min-width: 600px;
}

#recentlyEvent .s-dashboard-table {
	width: 100%;
	min-width: 600px;
	table-layout: fixed;
}

.s-mobile-small-header {
	background-color: #fff;
	float: left;
	position: absolute;
	font-size: 12px;
	left: 18px;
	top: 43px;
	z-index: 1;
	color: #424242;
	line-height: 23px;
}

.s-mobile-input-wrap {
	float: left;
	position: relative;
	height: 36px;
	width: calc(100% - 28px);
	margin: 29px 14px 19px;
}

.s-mobile-textarea-wrap {
	float: left;
	position: relative;
	margin: 11px 14px;
	width: calc(100% - 28px);
}

.s-mobile-input {
	background-color: rgba(255, 255, 255, .5);
	box-sizing: border-box;
	font-size: 13px;
	padding: 8px;
	float: left;
	width: 100%;
	border-radius: 3px;
	color: #333;
	cursor: text;
	font-family: NotoSans-Regular;
	border: 1px solid #d0d0d0;
	height: 125px;
	overflow: auto;
}

.s-mobile-input:focus {
	background-color: #fff;
	border: 1px solid #c4c4c4 !important;
}

.s-weather-table {
	border-collapse: collapse;
	float: left;
	width: calc(100% - 24px);
	margin: 12px;
}

.s-weather-table td {
	text-align: center;
	white-space: nowrap;
	padding: 0;
	border: 1px solid #d0d0d0;
}

.s-weather-table th {
	white-space: nowrap;
	padding: 5px 0;
	border: 1px solid #d0d0d0;
	background-color: #ebeced;
}

#temperature {
	font-size: 36px;
	line-height: 30px;
	-webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
    margin-left: 8px;
    font-family: NotoSans-Medium;
}

.s-now-date {
	line-height: 18px;
	-webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
    width: 100%;
    text-align: center;
    font-size: 16px;
    height: 34px;
    margin-right: 12px;
    border-bottom: 1px solid #d0d0d0;
    text-indent: 12px;
    margin-left: 6px;
}

#weather-state {
	color: #555;
	float: left;
	width: calc(50% - 6px);
	font-family: NotoSans-Bold;
	font-size: 15px;
}

#now-date {
	font-size: 10px;
	color: #888;
	white-space: nowrap;
	float: left;
	width: calc(50% - 12px);
	font-size: 11px;
}

.s-main-loading {
	background-color: #627785;
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 51;
}

.s-earthquake-content {
	padding: 7px 12px 14px;
	line-height: 24px;
}

.s-earthquake-copyright {
	font-size: 11px;
	padding: 8px 12px 12px;
	border-top: 1px solid #ddd;
	word-break: break-all;
}

.s-earthquake-copyright img {
	float: left;
	padding-right: 10px;
	padding-top: 4px;
}

.s-wrap-box-all {
	border:1px solid #d0d0d0;
	position: absolute;
	border-radius: 3px;
	pointer-events: none;
}

.s-wrap-box-all:before {
	content:"";
	background-color: #ebeced;
	border-bottom: 1px solid #bec3c6;
	width: 17px;
	height: 31px;
	position: absolute;
	right: 0;
	border-radius: 0 3px 0 0;
/* 	border-left: 1px solid #bec3c6; */
}

.s-wrap-box-all:after {
	content:"";
	background-color: #f1f1f1;
	width: 17px;
	height: 17px;
	position: absolute;
	right: 0;
	bottom: 0;
	border-radius: 0 0 3px 0;
}

.s-wrap-box-all.situation-two {
	width:calc(100% - 26px);
	height: 172px;
	top: 257px;
	left: 13px;
}

.s-wrap-box-x {
	border:1px solid #d0d0d0;
	position: absolute;
	border-radius: 3px;
	pointer-events: none;
}


.s-wrap-box-x.s-recently-event {
	width:calc(100% - 24px);
	height: 262px;
	margin-left: -1px;
}

.s-wrap-box-y {
	border:1px solid #d0d0d0;
	position: absolute;
	border-radius: 3px;
	pointer-events: none;
}

.s-wrap-box-y:before {
	content:"";
	background-color: #ebeced;
	border-bottom: 1px solid #bec3c6;
	width: 17px;
	height: 31px;
	position: absolute;
	right: 0;
	border-radius: 0 3px 0 0;
}

.s-wrap-box-y.s-phone-number {
	width:calc(100% - 30px);
	height: 247px;
	top:78px;
	left:13px;
}

.s-wrap-box-y.s-relation {
	width:calc(100% - 26px);
	height: 245px;
	top:48px;
	left:13px;
}

.s-wrap-box-y.situation-one {
	width:calc(100% - 26px);
	height: 153px;
	top:54px;
	left:13px;
}

.s-wrap-box-y.situation-three {
	width:calc(100% - 26px);
	height: 153px;
	top: 478px;
	left: 13px;
}

.s-wrap-box-y.s-alarm {
	width:calc(100% - 22px);
	height: 213px;
	top: 46px;
	left: 11px;
}

.s-wrap-box-y.s-concentration {
	width:calc(100% - 22px);
	height: 213px;
	top: 46px;
	left: 11px;	
}

.s-wrap-box-y.s-record {
	width:calc(100% + 1px);
	height: 286px;
	top: 32px;
	left: -1px;	
}

.s-wrap-box-none {
	border:1px solid #d0d0d0;
	position: absolute;
	border-radius: 3px;
	pointer-events: none;
}

.s-wrap-box-none.s-earthquake-alarm-list {
	width:calc(100% - 24px);
	height: 175px;
	top: 0;
	left: 12px;
	z-index: 1;	
}

/* 2.4.3 All Container */

.s-loading {
	background-color: #627785;
	width: calc(100% - 250px);
	height: calc(100% - 56px);
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	margin-left: 250px;
	margin-top: 56px;
	z-index: 51;
}

.s-left-slide-close .s-loading {
	width: calc(100% - 50px);
	margin-left: 50px;
}

.s-loading-text {
	margin: auto;
	width: 130px;
	height: 34px;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	position: absolute;
	font-size: 16px;
	line-height: 34px;
	padding-left: 42px;
	color: #fff;
	font-weight: bold;
}

.s-loading-text i {
	position: absolute;
	left: 10px;
	top: 5px;
	font-size: 24px;
}

/* 2.4.4 Chart Container */

.d-alarm-chart-info {
	float: left;
}

.s-detail-popup {
	position: absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;
	margin: auto;
	width: 900px;
	height: 472px;
	background: #fff;
	z-index: 10;
	display: block;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0px 0px 20px rgba(115, 115, 115, 0.6);
}

.s-detail-popup-tit {
	background: #30373e;
	width: 100%;
	color: #fff;
}

.s-popup-sensor-code {
	line-height: 45px;
	font-family: NotoSans-Medium;
	text-indent: 18px;
	display: inline-block;
	font-size: 16px;
}

.s-detail-popup-tit i.fa-times {
	position: absolute;
	right: 16px;
	top: 16px;
	cursor: pointer;
	font-size: 15px;
}

.s-popup-sensor-loc-wrap {
	display: inline-block;
	margin-left: 4px;
}

.s-popup-sensor-loc {
	display: inline-block;
	border-radius: 2px;
	border:1px solid #79b777;
	padding: 0 3px;
	font-size: 11px !important;
	margin-right: 6px;
	line-height: 16px !important;
	background-color: #8bc48a;
	color: #fff;
	text-indent: 0;
}

.s-popup-sensor-loc-second {
	display: inline-block;
	border-radius: 2px;
	padding: 0 3px;
	font-size: 12px;
	margin-right: 6px;
	color: #bbb;
	text-indent: 0;	
}

.s-ppm {
	font-size: 26px;
	font-family: NotoSans-Bold;
	float: left;
	line-height: 63px;
	padding-right: 14px;
}

.s-detail-info {
	padding: 15px;
}

.s-detail-info-top {
	width: 100%;
	height: 66px;
	margin-bottom: 10px;
	border: 1px solid #d0d0d0;
	border-radius: 3px;
}

.s-grade {
	width: 52px;
	height: 52px;
	line-height: 53px;
	font-size: 32px;
	color: #444;
	text-align: center;
	float: left;
	margin: 6px;
	
	background-color: #fff;
	color: #fff;
	line-height: 50px !important;
	
	border:1px solid #d0d0d0;
	
	position: relative;
}

.s-grade.s-grade-a {
/* 	background-color: #fcdbda; */
/* 	color: #d8443f; */
	
	background-color: #f04b46;
	color: #fff;
}

.s-grade.s-grade-b {
/* 	background-color: #feefd9; */
/* 	color: #b17b2e; */
	
	background-color: #fcaf41;
	color: #fff;
}

.s-grade.s-grade-c {
/* 	background-color: #d1f0ed; */
/* 	color: #108073; */
	
	background-color: #2184da;
	color: #fff;
}

.s-grade.s-grade-fdc {
	background-color: #5f50c5;
	color: #fff;
}

.s-grade:after {	
	content: "정상";
	font-family: "NotoSans-Regular";
	font-size: 19px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-weight: 900;
	color: #666;
	white-space: nowrap;
	position: absolute;
	top: 1px;
	left: 8px;
}

.s-grade.s-grade-a:after {
	content: "A";
	font-family: NotoSans-Regular;
	color: #fff;
	font-size: 30px;
	left: 17px;
	top: 0;
}

.s-grade.s-grade-b:after {
	content: "B";
	font-family: NotoSans-Regular;
	color: #fff;
	font-size: 30px;
	left: 16px;
	top: 0;
}

.s-grade.s-grade-c:after {
	content: "C";
	font-family: NotoSans-Regular;
	color: #fff;
	font-size: 30px;
	left: 16px;
	top: 0;
}

.s-grade.s-grade-fdc:after {
	content: "\f12a";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #fff;
	font-size: 30px;
	left: 20px;
	top: 0;
}


.s-time-graph-button {
	border-radius: 3px;
	padding:6px 10px;
	float: left;
	background: tomato;
	margin-right: 4px;
	font-size: 12px;
	cursor: pointer;
	background-color: #eeeeee;
	border:1px solid #d0d0d0;
	color: #999;
}

.s-time-graph-button.active {
	background-color: #d1f0ed !important;
	color: #108073 !important;
	border:1px solid #b8dad6 !important;
	font-weight: bold;
}

.s-time-graph-comment {
	color : #FF0000;
	/* margin-top : 10px; */
	float : right;
	font-size : 12px;
}

.s-time-graph-button-wrap {
	width: 420px;
	float: left;
	margin-bottom: 4px;
}

.s-chart-data-detail-table-wrap {
	width:419px;
	float: left;
	position: relative;
}

.s-chart-data-detail-table-left-wrap {
	float: left;
	width: 435px;
	margin-right: 16px;
}

.s-exceed-value {
	font-size: 15px;
	float: left;
	line-height: 65px;
}

.s-measurement-time {
	position: absolute;
	left: 776px;
	top: 72px;
	color: #999;
	
	display: inline-block;
	border-radius: 2px;
	border:1px solid #757575;
	padding: 0px 3px;
	font-size: 11px;
	background-color: #8a8f94;
	color: #fff;
	line-height: 18px;
}

.s-measurement-time2 {
	position: absolute;
	left: 736px;
	top: 95px;
	color: #999;
}

.s-max-value {
	position: absolute;
	top: 72px;
	left: 530px;
	color: #999;
	
	display: inline-block;
	border-radius: 2px;
	border:1px solid #b7777a;
	padding: 0px 3px;
	font-size: 11px;
	background-color: #c48a8c;
	color: #fff;
	line-height: 18px;
}

.s-max-value2 {
	position: absolute;
	left: 530px;
	top: 95px;
	color: #fe3b4d;
}

.s-min-value {
	position: absolute;
	left: 649px;
	top: 72px;
	color: #999;

	display: inline-block;
	border-radius: 2px;
	border:1px solid #7788b7;
	padding: 0px 3px;
	font-size: 11px;
	background-color: #8a99c4;
	color: #fff;
	line-height: 18px;
}

.s-min-value2 {
	position: absolute;
	left: 653px;
	top: 95px;
	color: #1e8df9;
}

.s-chart-view {
	float: left;
	background: #fff;
	width: 100%;
	height: 497px;
	overflow-y: auto;
	box-shadow: 0px 4px 4px rgba(0,0,0,0.12);
	text-indent: 0;
	border-radius: 0 3px 3px 3px;
	position:relative;
}

.s-chart-no-data {
	width : 100%;
	height : 497px;
	line-height : 497px;
	text-align : center;
}

.s-chart-btn {
	font-size: 16px;
	color: #aaa;
	line-height: 46px;
	font-family: NotoSans-Bold;
	display: inline-block;
	height: 46px;
	border:2px solid #aaa;
	border-radius: 3px 3px 0 0;
	padding:0 22px 0 16px;
	margin-right: 4px;
	background-color: #d5d8da;
	border-bottom: none;
	position: relative;
	cursor: pointer;
}

.s-circle-popup {
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 20px;
	white-space: nowrap;
	background-color: #f04b46;
	display: inline-block;
	border-radius: 50%;
	color: #fff;
	font-size: 11px;
	position: absolute;
	top:4px;
	right:4px;
	
}

.s-chart-btn.active {
	background-color: #fff;
	color: #616161; 
	border:2px solid #fff;
}

.s-chart-tit {
	font-size: 16px;
	color: #616161;
	line-height: 46px;
	font-family: NotoSans-Bold;
	background-color: #fff;
	text-indent: 1px;
}

.s-alarm-grid {
	margin-top: 20px;
	width: 100%;
	height: 270px;
	display: inline-block;
	float: left;
	background-color: #fff;
	border-radius: 3px;
	overflow: hidden;
	padding: 0 12px 12px 12px;
	box-shadow: 0px 4px 4px rgba(0,0,0,0.12);
	position: relative;
}

.s-concentration-grid {
	margin-top: 20px;
	width: 100%;
	height: 270px;
	display: inline-block;
	float: left;
	background-color: #fff;
	border-radius: 3px;
	overflow: hidden;
	padding: 0 12px 12px 12px;
	box-shadow: 0px 4px 4px rgba(0,0,0,0.12);
	position: relative;
}

.s-receive-area-setup {
	background-color: #fff;
	border: 1px solid #bbb;
	position: absolute;
	right: 0;
	top: 4px;
	padding: 6px 10px;
	border-radius: 3px;
	cursor: pointer;
}

.s-receive-area-setup:hover {
	background-color: #eee;
	border: 1px solid #aaa;
}

.s-alarm-chart-name, .s-fdc-chart-name {
	height: 68px;
	border: 1px solid #bec3c6;
	overflow: hidden;
	border-radius: 3px 3px 3px 3px;
	font-size: 13px;
	background-color: #d4d1f0;
}

.s-alarm-chart-info-tit {
	color: #333;
	line-height: 39px;
	font-size: 15px;
	font-family: NotoSans-Bold;
}

.s-chart-content-wrap {
	border:1px solid #bec3c6;
	border-top: none;
	border-radius: 0 0 3px 3px;
}

.s-alarm-chart-info {
	width: calc(33.333% - 11px);
/* 	border: 1px solid #bec3c6; */
	display: inline-block;
	border-radius: 3px;
	margin-left: 8px;
	margin-top: 8px;
	margin-right: 0;
	margin-bottom: 0;
	line-height: 40px;
	position: relative;
	text-indent: 12px;
	cursor: pointer;
	
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
	-ms-transform: translatez(0);
	-o-transform: translatez(0);
	transform: translatez(0);
	background-color: #fff;
	box-shadow: 0 1px 2px rgba(0,0,0,.12);
	outline: none;
	transition: .2s;
	
	overflow: hidden;
}

.s-alarm-chart-info:hover {
/* 	background-color: #ddd; */
}

.highcharts-background {
/* 	fill: #6d747a; */
}

.s-alarm-chart-info:hover .s-alarm-chart-name, .s-alarm-chart-info:hover .s-fdc-chart-name{
/* 	background-color: #50585f; */
}

.s-alarm-chart-name:hover, .s-fdc-chart-name:hover {
/* 	border: 1px solid #16abaa; */
}

.s-chart-data-detail-table-th-wrap {
	width: calc(100% - 17px);
	height: 34px;
	float: left;
}

.s-chart-data-detail-table-td-wrap {
	height: 181px;
	width: 100%;
	float: left;
	overflow-y: scroll;
	margin-top: -2px;
}

.s-open-chart {
	padding-right: 20px;
	position: relative;
	width: 100%;
	padding-bottom: 30px;
	padding-top: 8px;
}

.s-img-alarmdate {
	position: absolute;
	background: #ffffff url('../images/alarmdate.png') 50% 50% no-repeat;
	top:316px;
	width: 30%;
	height: 19px;
	text-align: center;
	margin: 0 auto;
	left: 0;
	right: 0;
	line-height: 55px;
	text-indent: 0;
	font-size: 11px;
	font-family: NotoSans-Light;
}

.s-img-finaldate {
	position: absolute;
	background: #ffffff url('../images/finaldate.png') 50% 50% no-repeat;
	top:316px;
	right:5%;
	width: 30%;
	height: 19px;
	text-align: center;
	line-height: 55px;
	text-indent: 0;
	font-size: 11px;
	font-family: NotoSans-Light;
}

.s-alarm-chart-info-ppm {
	position: absolute;
	top: 0;
	right: 96px;
	width: 72px;
	text-align: right;
	text-indent: 0;
	color: #333;
	font-size: 14px;
	font-family: NotoSans-Bold;
}

.s-alarm-chart-info-gas {
	position: absolute;
	top: 0;
	right: 36px;
	width: 60px;
	text-align: center;
	text-indent: 0;
	color: #333;
	font-size: 13px;
}

.s-alarm-chart-info-grade {
	position: absolute;
	top: 5px;
	right: 6px;
	text-align: center;
	width: 30px;
	height: 30px;
	color: #888;
	font-size: 12px;
	font-family: NotoSans-Light;
	
	background-color: #fff;
	color: #fff;
	font-size: 16px;
	line-height: 30px;
	text-indent: 0;
	border: 1px solid #d0d0d0;
}

.s-table-grade-fdc {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 25px;
    background-color: #5f50c5;
    color: #fff;
    float: none;
    text-align: center;
    top: 2px;
    margin: 0px;
}

.s-table-grade-fdc::after {
    content: "\f12a";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #fff;
    font-size: 12px;
    top: -15px;
    left: 7px;
}


.s-grade-a .s-alarm-chart-info-grade {
/* 	background-color: #fcdbda; */
	background-color: #f04b46;
	line-height: 41px;

}

.s-grade-b .s-alarm-chart-info-grade {
/* 	background-color: #feefd9; */
	background-color: #fcaf41;
	line-height: 41px;
	
}

.s-grade-c .s-alarm-chart-info-grade {
/* 	background-color: #d1f0ed; */
	background-color: #2184da;
	line-height: 41px;
}

.s-grade-fdc .s-alarm-chart-info-grade {
/* 	background-color: #d1f0ed; */
	background-color: #5f50c5;
	line-height: 41px;
}

.s-alarm-chart-info-grade i{
	width: 100%;
	text-align: center;
}

.s-alarm-chart-info-grade:after {
	content: "정상";
	position: absolute;
	right: 2px;
	top: -6px;
	color: #444;
	font-size: 11px;
	font-family: "돋움";
	line-height: 42px;
	font-weight: bold;
	white-space: nowrap;
}

.s-grade-a .s-alarm-chart-info-grade:after {
	content: "A";
	position: absolute;
	right: 10px;
	top: -6px;
	color: #fff;
	font-size: 15px;
	font-family: NotoSans-Regular;
	line-height: 40px;
}

.s-grade-b .s-alarm-chart-info-grade:after {
	content: "B";
	position: absolute;
	right: 10px;
	top: -6px;
	color: #fff;
	font-size: 15px;
	font-family: NotoSans-Regular;
	line-height: 40px;
}

.s-grade-c .s-alarm-chart-info-grade:after {
	content: "C";
	position: absolute;
	right: 10px;
	top: -6px;
	color: #fff;
	font-size: 15px;
	font-family: NotoSans-Regular;
	line-height: 40px;
}

.s-grade-fdc .s-alarm-chart-info-grade:after {
	content: "\f12a";
	position: absolute;
	right: 11px;
	top: -6px;
	color: #fff;
	font-size: 15px;
	font-family: "Font Awesome 5 Free";
	line-height: 40px;
	font-weight: 900;
}

.s-chart-view .scroll-element_outer {
	left: -14px !important;
}

.s-rainbow-box-wrap {
	position: absolute;
	right: 17px;
	top: 13px;
	z-index: 1;
}

.s-rainbow-box {
	display: inline-block;
	border-radius: 2px;
	border:1px solid #757575;
	padding: 0 2px;
	font-size: 11px;
	margin-right: 4px;
	line-height: 15px;
	background-color: #8a8f94;
	color: #fff;
	height: 16px;
}

.s-new-box {
	display: inline-block;
	border-radius: 2px;
	padding: 0px 2px;
	font-size: 9px;
	background-color: #f04b46;
	color: #fff;
	margin-left: 4px;
}

.s-rainbow-box-second {
	display: inline-block;
	border-radius: 2px;
	padding: 0 3px;
	font-size: 12px;
	margin-right: 6px;
	color: #666;
}

.s-position-box-wrap {
	position: absolute;
	left: 0;
	top: 36px;
	line-height:0;
}

.s-position-box {
	display: inline-block;
	border-radius: 2px;
	border:1px solid #333;
	padding: 0 3px;
	font-size: 11px !important;
	margin-right: 6px;
	line-height: 16px !important;
	background-color: #8a8f94;
	color: #fff;
	text-indent: 0;
}

.s-position-box-second {
	display: inline-block;
	border-radius: 2px;
	padding: 0 3px;
	font-size: 11px;
	margin-right: 6px;
	color: #999;
	text-indent: 0;	
}

.s-position-box-wrap {
	position: absolute;
	left: 0;
	top: 38px;
	line-height:0;
}

.s-position-box {
	display: inline-block;
	border-radius: 2px;
	border:1px solid #79b777;
	padding: 0 2px;
	font-size: 11px !important;
	margin-right: 6px;
	line-height: 13px !important;
	background-color: #8bc48a;
	color: #fff;
	text-indent: 0;
	height: 16px;	
}

.s-position-box-second {
	display: inline-block;
	border-radius: 2px;
	padding: 0 3px;
	font-size: 11px;
	margin-right: 6px;
	color: #333;
	text-indent: 0;	
}

.s-alarmdate-box-wrap-s-finaldate-box-wrap {
	margin: 0 auto;
	top: 297px;
	position: absolute;
	right: 0;
	left: 0;
	width: 433px;
	font-size: 11px;
}

.s-alarmdate-box-wrap {
	display:inline-block;
	line-height:0;
	float: left;
	text-indent: 0;
	margin-right: 18px;
	margin-left: 6px;
}

.s-alarmdate-box {
	display: inline-block;
	border-radius: 2px;
	border:1px solid #b7777a;
	padding: 0 2px;
	margin-right: 8px;
	line-height: 13px !important;
	background-color: #c48a8c;
	color: #fff;
	text-indent: 0;
	height: 16px;
}

.s-alarmdate-box-second {
	display: inline-block;
	border-radius: 2px;
	color: #999;
	text-indent: 0;	
}

.s-finaldate-box-wrap {
	display:inline-block;
	line-height:0;
	float: left;
	text-indent: 0;
}

.s-finaldate-box {
	display: inline-block;
	border-radius: 2px;
	border:1px solid #7788b7;
	padding: 0 2px;
	margin-right: 8px;
	line-height: 13px !important;
	background-color: #8a99c4;
	color: #fff;
	text-indent: 0;
	height: 16px;
}

.s-finaldate-box-second {
	display: inline-block;
	border-radius: 2px;
	margin-right: 6px;
	color: #999;
	text-indent: 0;	
}

.d-val-up { background: #fcdbda; }
.d-val-up .s-chart-table-impact{ color: #333; display: inline-block; }
.d-val-down { background: #d7eff6; }
.d-val-down .s-chart-table-impact{ color: #333; display: inline-block; }
.d-new-alarm { background: #feefd9; }

.d-val-up .s-val-number { color: #d8443f; display: inline-block; margin-right: 2px;}
.d-val-down .s-val-number { color: #2184da; display: inline-block; margin-right: 1px;}

.d-val-up .s-val-icon { background-image:url("../images/ico_up.gif"); width:9px; height:10px; display: inline-block; background-repeat: no-repeat; background-position: left center; margin-left: 2px;}
.d-val-down .s-val-icon { background-image:url("../images/ico_down.gif"); width:9px; height:10px; display: inline-block; background-repeat: no-repeat; background-position: left center; margin-left: 2px;}

.s-cal {
	display: inline-block;
}

.eun-sort {
	font-size: 11px;
	color: #333;
	display: inline-block;
	cursor: pointer;
	margin-left: 1px;
}

.s-table-alarm-grade {
	color: #fff;
	display: inline-block;
	padding: 3px 6px;
	font-weight: bold;
}

.s-table-alarm-grade.AGRADE {
	background-color: #f04b46;
}

.s-table-alarm-grade.BGRADE {
	background-color: #fcaf41;
}

.s-table-alarm-grade.CGRADE {
	background-color: #2184da;
}

/* 2.4.5 Gas Sensor Event Container */

.s-gas-kind {
	font-size: 24px;
	font-family: NotoSans-Bold;
	color: #555;
	float: left;
	line-height: 64px;
	padding-left: 20px;
	padding-right: 18px;
}

.s-100-wrap {
	width:calc(100% - 36px) !important; float:left;
}

.s-gas-list-wrap {
	width: 100%;
	position: relative;
	float: left;
	margin-top: 50px;
}

/* 2.5 Footer */
.s-footer {
	height: 39px;
	text-align: left;
	font-size: 11px;
	padding: 15px 25px;
	background: #d5d8da;
	background: rgba(0, 0, 0, 0);
	color: #657380;
	font-family: NotoSans-Light;
	border-top: 2px solid #c8cbcd;
	float: left;
	width: 100%;
}

/* 2.6 Viewer */
.s-viewer {
	background-image: url("../images/bgbg.jpg");
	width: calc(100% - 320px);
	height: calc(100% - 55px);
	float: left;
}

/* 2.7 Right Silder */
.s-option-align {
	position: absolute;
	left: -62px;
	top: 26px;
	width: 40px;
}

.s-right-slidebar {
	width: 0px;
	height: calc(100% - 55px);
	background: #3C454D;
	float: left;
	position: fixed;
	right: 0;
	top: 56px;
	z-index: 11;
	transition: all .3s ease;
}

.s-right-slidebar.open {
	width: 320px;
}

.s-right-slidebar-switch {
	cursor: pointer;
	font-weight: bold;
	font-size: 19px;
	position: absolute;
	width: 18px;
	height: 36px;
	top: -54px;
	right: 0;
	bottom: 0;
	left: -18px;
	background: #3C454D;
	border-radius: 6px 0 0 6px;
	margin: auto 0;
	z-index: 1;
}

.s-2d-3d {
	position: absolute;
	left: -84px;
	top: 14px;
	width: 70px;
	height: 36px;
	border-radius: 3px;
	background: #3c454d;
	text-align: center;
	line-height: 36px;
	color: #b1b5b8;
	font-size: 14px;
	cursor: pointer;
	font-family: NotoSans-Medium;
}

.s-2d-3d:hover {
	background: #50585f;
}

.s-2d-3d.active {
	color: #0f6655;
	background: #16abaa;
}

.s-right-slidebar-switch i {
	line-height: 36px;
	padding-left: 7px;
	color: #b1b5b8;
	font-size: 20px;
}

.s-add-big-menu {
	color: #fff;
	line-height: 42px;
	position: relative;
	font-size: 14px;
	text-align: center;
	padding-right: 20px;
	cursor: default;
	font-family: NotoSans-Regular;
}

.s-add-big-menu i {
	top: 8px;
	left: 117px;
	text-align: center;
	border-radius: 3px;
	font-size: 26px;
	color: #fff !important;
	background-color: rgba(0, 0, 0, 0) !important;
	position: absolute;
	overflow: hidden;
	float: left;
	width: 26px;
	height: 26px;
	line-height: 28px;
	text-indent: -1px;
}

.s-add-small-menu-wrap {
	background-color: #3c454d;
}

.s-add-small-menu {
	color: #b1b5b8;
	line-height: 37px;
	position: relative;
	padding-left: 19px;
	font-size: 12px;
	background-color: #30373e;
	cursor: default;
	font-weight: bold;
}

.s-add-small-menu i {
	position: absolute;
	top: 0;
	left: 1px;
	width: 39px;
	height: 44px;
	line-height: 37px;
	text-align: center;
	color: #fff !important;
	background: rgba(0, 0, 0, 0) !important;
	font-size: 24px;
	display: none;
}

.equip_list_search {
	float: left;
	height: 55px;
	width: calc(100% - 34px);
	position: relative;
}

.e_l_s_input {
	margin: 10px 10px 10px 18px;
	box-sizing: border-box;
	font-size: 13px;
	border: 1px solid rgba(255, 255, 255, 0);
	padding: 6px 26px 4px 8px;
	float: left;
	width: 100%;
	font-family: TitilliumWeb-Regular, NanumBarunGothic;
	border-radius: 4px;
	background-color: rgba(255, 255, 255, 0.2);
	height: 32px;
}

.e_l_s_input:hover {
	border: 1px solid rgba(255, 255, 255, 0);
	background-color: rgba(255, 255, 255, 0.25);
}

.e_l_s_input:focus {
	border: 1px solid #fff;
	outline: 0;
	background-color: #fff;
}
.e_l_s_input::-webkit-input-placeholder {
	color : #b1b5b8;
	font-size : 11px;
}
.e_l_s_input::-moz-placeholder {
    color : #b1b5b8;
	font-size : 11px;  
}
.e_l_s_input:-ms-input-placeholder {
    color : #b1b5b8;
	font-size : 11px;  
}
.e_l_s_btn {
	position: absolute;
	top: -1px;
	right: -10px;
	width: 36px;
	height: 36px;
	border-radius: 3px;
	float: left;
	margin-top: 12px;
	margin-left: 8px;
	cursor: pointer;
}

.e_l_s_btn i {
	position: absolute;
	font-size: 18px;
	top: 6px;
	left: 18px;
	color: #464646;
}

.e_l_s_btn:hover i {
	color: #262626;
}

.equip_list_table_wrap {
	float: left;
	width: 320px;
	height: calc(100% - 97px);
}

.equip_list_table_wrap .scroll-scrollx_visible.scroll-x.scroll-element {
	display: none !important;
}

.equip_list_table_wrap .scroll-y.scroll-element {
	right: -12px !important;
	top: 6px !important;
}

.equip_list_table {
	border-collapse: collapse;
	font-size: 12px;
	width: 100%;
	color: #b1b5b8;
}

.equip_list_table i {
	text-align: center;
	border-radius: 3px;
	font-size: 24px;
	color: rgba(0, 0, 0, .7);
	background: rgba(0, 0, 0, .5);
	position: relative;
	overflow: hidden;
	float: left;
	width: 24px;
	height: 24px;
	line-height: 24px;
	z-index: 2000;
	margin-left: 18px;
}

.equip_list_table tr {
	cursor: pointer;
	border-top: 1px solid #30373e;
	border-bottom: 1px solid #30373e;
}

.equip_list_table tr:hover td {
	background: rgba(255, 255, 255, 0.1);
}

.equip_list_table .active td {
	background: #24292e !important;
	color: #fff;
}

.equip_list_table td {
	line-height: 38px;
}

.equip_list_table td:first-child {
	text-align: center;
}

.equip_list_table_left_space {
	border-collapse: collapse;
	font-size: 12px;
	width: 100%;
	color: #b1b5b8;
}

.equip_list_table_left_space tr {
	cursor: pointer;
	border-top: 1px solid #4f575e;
	border-bottom: 1px solid #4f575e;
}

.equip_list_table_left_space tr:first-child {
	border-top: none;
}

.equip_list_table_left_space tr:last-child {
	border-bottom: none;
}

.equip_list_table_left_space tr:hover td {
	background: rgba(255, 255, 255, 0.1);
}

.equip_list_table_left_space.hover-none tr:hover td {
	background: rgba(255, 255, 255, 0);
	cursor: default;
}

.equip_list_table_left_space .active td {
	background: #16abaa !important;
	color: #fff;
}

.equip_list_table_left_space td {
	line-height: 38px;
}

.equip_list_table_left_space td:nth-child(2) {
	text-align: center;
}

/* tab */
.tabs_wrap {
	height: 41px;
	/* 	border-bottom: 1px solid #30373e; */
}

ul.tabs {
	margin: 0;
	padding: 0;
	list-style: none;
	height: 40px;
	font-family: NotoSans-Light;
	font-size: 14px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-around;
	justify-content: space-around;
	width: 100%;
}

ul.tabs li {
	display: block;
	text-align: center;
	cursor: pointer;
	width: 100%;
	height: 40px;
	line-height: 40px;
	background: #24292e;
	overflow: hidden;
	position: relative;
	font-family: NotoSans-Light;
	color: #b1b5b8 !important;
	/* 	border-bottom: 2px solid #3c454d; */
}

ul.tabs li.active {
	background: #3c454d !important;
	/* 	border-bottom: 2px solid #16abaa; */
	color: #fff !important;
}

ul.tabs li.active:hover {
	background: #FFFFFF;
	/* 	border-bottom: 2px solid #16abaa; */
	color: #fff;
}

ul.tabs li:hover {
	/* 	border-bottom: 2px solid rgba( 255, 255, 255, 0.1); */
	color: #fff !important;
	background: rgba(255, 255, 255, 0.1);
}

.tab_container_wrap {
	height: calc(100% - 42px);
	float: left;
	position: relative;
}

.tab_container {
	border-top: none;
	clear: both;
	float: left;
	width: 100%;
	background: #3c454d;
	height: 100%;
	position: relative;
	overflow-y: auto;
	height: calc(100% - 25px);
}

.tab_content {
	font-size: 12px;
	display: none;
	height: 100%;
/* 	position: relative; */
	width: 100%;
}

.tab_container .tab_content ul {
	width: 100%;
	margin: 0px;
	padding: 0px;
}

.tab_container .tab_content ul li {
	list-style: none;
}

.mCSB_inside>.mCSB_container {
	margin-right: 0 !important;
}

.mCSB_scrollTools {
	width: 8px !important;
}

.mCSB_scrollTools.mCS-dark-3 .mCSB_dragger:hover .mCSB_dragger_bar {
	background-color: rgba(255, 255, 255, .7) !important;
}

.mCSB_scrollTools.mCS-dark-3 .mCSB_dragger .mCSB_dragger_bar {
	background-color: rgba(255, 255, 255, .4) !important;
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
	.mCS-dark-3.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar
	{
	background-color: rgba(255, 255, 255, .5) !important;
}

/* 2.7.1 Management Right Silder */
.s-draw-btn {
	float: left;
	text-align: center;
	padding: 0 10px;
	border-radius: 3px;
	color: #252525;
	background: #ffffff;
	cursor: pointer;
	border: 1px solid #d0d0d0;
	font-size: 13px;
	margin-left: 16px;
	height: 34px;
	line-height: 32px;
	margin-top: 13px;
	box-sizing: border-box;
	width: 288px;
}

.s-draw-btn:hover {
	border-color: #e3e3e3;
	background: #f0f0f0;
}

/* 2.7.2 Monitoring Right Silder */   

.s-monitoring-alarm-list {
	height: 131px;
	padding: 6px 6px 6px 12px;
	position: relative;
	color: #fff;
	margin-right: 14px;
	width: 320px;
	margin: 0 6px 0 0;
	border-top: 1px solid #30373e;
	border-bottom: 1px solid #30373e;
	cursor: pointer;
}

.s-monitoring-alarm-list:first-child {
	border-top: none;
}

.s-monitoring-alarm-list:hover {
	background-color: #50585f;
}

.s-monitoring-alarm-list.selected {
	background-color: #24292e;
	height: 131px;
	padding: 6px 6px 6px 12px;
	position: relative;
	color: #fff;
	margin-right: 14px;
	width: 320px;
	margin: 0 6px 0 0;
	border-top: 1px solid #30373e;
	border-bottom: 1px solid #30373e;
	cursor: pointer;
}

.s-monitoring-alarm-list .s-login-check.eun-check {
	position: absolute;
	right: 27px;
	top: 12px;
	font-size: 30px;
	color: rgba(2565, 255, 255, .2);
}

.s-monitoring-alarm-list .s-login-check.eun-check.checked {
	position: absolute;
	right: 27px;
	top: 12px;
	font-size: 30px;
	color: rgba(2565, 255, 255, 1);
}

.s-monitoring-alarm-no-data {
	vertical-align : middle;
	height: 50px;
	line-height : 50px;
	
	font-size : 13px;
	text-align : center;
	color : #b1b5b8;
}

.s-alarm-icon {
	float: left;
	width: 50px;
	height: 40px;
	text-align: center;
	padding: 7px 11px;
}

.s-alarm-icon i {
	font-size: 27px;
	text-align: center;
	border-radius: 3px;
	color: rgba(0, 0, 0, .7);
	background: rgba(0, 0, 0, .5);
	position: relative;
	overflow: hidden;
	float: left;
	width: 28px;
	height: 28px;
	line-height: 28px;
	z-index: 2000;
}

.s-alarm-title {
	float: left;
	width: 208px;
	height: 40px;
	font-size: 15px;
	line-height: 42px;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: bold;
}

.s-alarm-address {
	float: left;
	width: 288px;
	color: #b1b5b8;
	line-height: 24px;
	text-indent: 10px;
}

.s-alarm-level {
	float: left;
	width: 260px;
	line-height: 24px;
	text-indent: 10px;
	color: #b1b5b8;
}

.s-alarm-date {
	float: left;
	width: 260px;
	line-height: 24px;
	text-indent: 10px;
	color: #b1b5b8;
}

/* list_setup_icon */
.list_setup_icon_next_wrap {
	width: 34px;
	height: 52px;
	float: left;
	position: absolute;
	bottom: 11px;
	right: -15px;
}

.s-right-slidebar.open .list_setup_icon_next_wrap {
	right: 27px;
}

.list_setup_icon {
	cursor: pointer;
	display: block;
	position: absolute;
	right: 4px;
	bottom: 9px;
	width: 22px;
	height: 22px;
	padding-top: 1px;
	background: #ffffff;
	border: 1px solid #d8d8d8;
	border-radius: 3px;
	color: #ababab;
	text-align: center;
	line-height: 20px;
	bottom: 4px;
}

.list_setup_icon i {
	position: absolute;
	top: 1px;
	left: 1px;
	font-size: 18px;
}

.list_setup_icon:hover i {
	color: #16abaa;
}

.cog_popup {
	overflow: hidden;
	display: block;
	position: absolute;
	background: #fff;
	border: 1px solid #adafaa;
	width: 74px;
	right: 25px;
	text-align: left;
	bottom: -1px;
	box-sizing: border-box;
	font-size: 13px;
	color: #777777;
	line-height: 23px;
	border-radius: 3px;
	z-index: 3;
	transform: translateX(10px);
	visibility: hidden;
	opacity: 0;
	transition-property: opacity, transform, visibility;
	transition-duration: 70ms, 250ms, 250ms;
	transition-timing-function: linear, cubic-bezier(0.23, 1, 0.32, 1);
	transition-delay: 25ms, 50ms, 0ms;
}

.cog_popup.open {
	transform: translateX(0);
	visibility: visible;
	opacity: 1;
	transition-duration: 100ms, 150ms, 25ms;
	transition-delay: 35ms, 50ms, 25ms;
	display: block;
}

.cog_popup_div {
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0);
	padding-left: 5px
}

.cog_popup_div:hover {
	background: #ebebeb;
}

.cog_popup_line {
	height: 1px;
	background: #dcdcdc;
}

.cog_popup_open .cog_popup {
	display: block;
}

/* 2.8 Popup */
.popup_sm_tit {
	padding: 10px 0 5px 5px;
	font-size: 13px;
	width: 100%;
	cursor: default;
	float: left;
	font-weight: bold;
}

.popup_alarm_tit {
	padding: 8px 9px 8px 24px;
	font-size: 14px;
	width: 97px;
	cursor: default;
	float: left;
}

.popup_onelow_text {
	padding: 8px;
	float: left;
	width: 221px;
	font-family: NotoSans-Light;
	color: #b1b5b8;
}

.library_name_input_wrap {
	float: left;
	width: 100%;
	position: relative;
}

.library_name_input_wrap.s-y-select-width-full .s-y-select {
	width: 100%;
}

.s-alarm-input-wrap {
	float: left;
	width: calc(100% - 41px);
	position: relative;
	margin: 4px 0 0 24px;
}

.l_n_i_input {
	box-sizing: border-box;
	font-size: 13px;
	border: 1px solid #d0d0d0;
	padding: 9px 8px 8px 8px;
	float: left;
	width: 100%;
	border-radius: 1px;
	cursor: auto;
}

.l_n_i_input:hover {
	border: 1px solid #b7d4f0;
	box-shadow: 0px 0px 4px rgba(183, 212, 240, 0.4);
}

input[type="text"].l_n_i_input:disabled {
	border: 1px solid #d0d0d0 !important;
	box-shadow: 0px 0px 4px rgba(183, 212, 240, 0);
}

.l_n_i_input:focus {
	border: 1px solid #62a1df;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
		rgba(98, 161, 223, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
		rgba(98, 161, 223, 0.6);
}

.s-alarm-input {
	background-color: rgba(255, 255, 255, .5);
	height: 68px;
	box-sizing: border-box;
	font-size: 13px;
	border: 1px solid rgba(255, 255, 255, 0);
	padding: 8px;
	float: left;
	width: 100%;
	border-radius: 3px;
	color: #333;
	cursor: text;
	font-family: NotoSans-Regular;
}

.s-alarm-input:hover {
	background-color: rgba(255, 255, 255, .6);
	border: 1px solid rgba(255, 255, 255, 0);
	box-shadow: 0px 0px 4px rgba(71, 192, 192, 0.4);
}

.s-alarm-input:focus {
	background-color: #fff;
	border: 1px solid #fff;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
		rgba(71, 192, 192, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
		rgba(71, 192, 192, 0.6);
}

.s-information-popup {
	box-shadow: 0px 0px 20px rgba(115, 115, 115, 0.75);
	position: absolute;
	background: #fff;
	display:;
	left: 256px;
	top: 110px;
	width: 320px;
	border-radius: 3px;
	box-sizing: border-box;
	max-height: 892px;
	overflow: hidden;
}

.s-left-slide-close .s-information-popup {
	left: 56px;
}

.s-information-popup-tit-box {
	width: 212px;
	text-align: center;
	border-bottom: 2px solid #2a94db;
	height: 40px;
	font-size: 17px;
	line-height: 42px;
}

.s-information-popup-tit-box .fa-info {
	line-height: 40px;
	font-size: 18px;
}

.s-information-popup .s-information-popup-tit-box-wrap {
	width: 100%;
	height: 42px;
	border-bottom: 1px solid #d0d0d0;
}

.s-information-popup .s-information-popup-x-box-wrap {
	width: 100%;
	height: 16px;
	background: #fafafa;
	border-bottom: 1px solid #d0d0d0;
}

.s-information-popup .s-information-popup-x-box-wrap .fa-times {
	position: absolute;
	right: 2px;
	top: 0px;
	color: #8d8d8d;
	cursor: pointer;
	font-size: 15px;
}

.s-information-popup .s-information-popup-x-box-wrap .fa-times:hover {
	color: #414141;
}

.s-alarm-popup {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	position: absolute;
	background: #3c454d;
	display:;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 320px;
	border-radius: 3px;
	box-sizing: border-box;
	max-height: 892px;
	height: 352px;
	color: #fff;
}

.s-alarm-popup-tit-box {
	text-align: center;
	height: 42px;
	font-size: 15px;
	line-height: 42px;
}

.s-alarm-popup-tit-box .fa-info {
	line-height: 40px;
	font-size: 18px;
}

.s-alarm-popup .s-alarm-popup-tit-box-wrap {
	height: 42px;
	margin: 0 0 10px;
	background-color: rgba(255, 255, 255, .3);
	border-radius: 3px 3px 0 0;
}

.s-alarm-popup .s-alarm-popup-tit-box-wrap .fa-times {
	position: absolute;
	right: 14px;
	top: 14px;
	color: #fff;
	cursor: pointer;
	font-size: 15px;
}

.s-alarm-popup .s-alarm-popup-tit-box-wrap .fa-times:hover {
	color: rgba(0, 0, 0, .5);
}

.datum_point_popup_sm_tit {
	font-size: 13px;
	cursor: default;
	float: left;
	text-align: center;
	border-radius: 21px;
	margin: 10px 6px 3px 44px;
	width: 20px;
	height: 20px;
	line-height: 20px;
}

.datum_point_popup_input_wrap {
	float: left;
	width: 134px;
	position: relative;
}

.datum_point_popup_input {
	margin-top: 6px;
	box-sizing: border-box;
	font-size: 12px;
	border: 1px solid #d0d0d0;
	padding: 6px;
	float: left;
	width: 100%;
	border-radius: 1px;
	text-align: right;
	font-family: Dotum, '돋움';
}

.datum_point_popup_input[type=text]::-ms-clear {
	display: none;
}

.datum_point_popup_input:hover {
	border: 1px solid #b7d4f0;
	box-shadow: 0px 0px 4px rgba(183, 212, 240, 0.4);
}

.datum_point_popup_input:focus {
	border: 1px solid #62a1df;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
		rgba(98, 161, 223, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px
		rgba(98, 161, 223, 0.6)
}

.datum_point_popup_sm_tit_back {
	line-height: 41px;
	padding: 0 8px;
	font-size: 15px;
	width: 80px;
	cursor: default;
	float: left;
	text-align: left;
	height: 41px;
}

/* s-popup-tab */
#s-popup-tab-container {
	float: left;
}

.tabs-wrap {
	height: 40px;
}

.s-popup-tab-content {
	display: none;
	font-size: 12px;
	padding-top: 10px;
	height: 142px;
	background-color: #d1f0ed;
	border-radius: 0 0 3px 3px;
	border: 1px solid #d0d0d0;
	position: relative;
}

.s-popup-tab-content.active {
	display: block;
}

ul.s-popup-tabs {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 40px;
	font-size: 15px;
}

ul.s-popup-tabs li {
	float: left;
	text-align: center;
	cursor: pointer;
	width: 33.333333333%;
	height: 41px;
	line-height: 41px;
	overflow: hidden;
	position: relative;
	color: rgba(0, 0, 0, 0.55);
	font-size: 13px;
	border-radius: 3px 3px 0 0;
}

ul.s-popup-tabs li.active {
	background: #d1f0ed;
	color: #000;
	border: 1px solid #d0d0d0;
	border-bottom: none;
	font-weight: bold;
}

ul.s-popup-tabs li.active:hover {
	background: #d1f0ed;
	color: #000;
}

ul.s-popup-tabs li:hover {
	color: #000 !important;
}

.s-popup-btn-wrap {
	float: left;
	width: 100%;
	margin-top: 12px;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	margin-bottom: 10px;
}

.s-popup-btn {
	float: left;
	text-align: center;
	padding: 0 10px;
	border-radius: 3px;
	color: #252525;
	background: #ffffff;
	cursor: pointer;
	border: 1px solid #d0d0d0;
	font-size: 12px;
	margin: 0 6px;
	height: 34px;
	line-height: 32px;
	box-sizing: border-box;
}

.s-popup-btn i {
	line-height: 34px;
}

.s-popup-btn:hover {
	border-color: #e3e3e3;
	background: #f0f0f0;
}

.s-popup-tap-ul {
	display: block;
	float: left;
	padding-left: 0;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 0;
}

.s-popup-tap-li {
	display: inline-block;
	float: left;
	border: 1px solid #d0d0d0;
	border-radius: 3px 3px 0 0;
	padding: 6px 10px;
	cursor: pointer;
	font-size: 13px;
	background-color: #eee;
/* 	color: rgb(138, 143, 148); */
	margin-right: 2px;
	position: relative;
	bottom: -1px;
}

.s-popup-tap-li i.fas.fa-times {
	margin-left: 6px;
	margin-right: -2px;
}

.s-popup-tap-li:after {
/* 	background-color: #bec3c6; */
	content: "";
	width: calc(100% + 2px);
	height: 1px;
	position: absolute;
	bottom: -1px;
	left: -1px;
}

.s-popup-tap-li.selected:after {
/* 	background-color: #ebeced; */
	content: "";
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: -1px;
	left: 0;
}

.s-popup-tap-li.selected-1 {
	background-color: #F6CEF5;
	border: 1px solid #F6CEF5;
	background-color: #F6CEF5 !important;
	color: #610B5E !important;	
}

.s-popup-tap-li.selected-2 {
	background-color: #F6CECE;
	border: 1px solid #F6CECE;
	background-color: #F6CECE !important;
	color: #B40404 !important;	
}

.s-popup-tap-content {
	width: calc(100% - 20px);
	margin-left: 10px;
	border: 1px solid #bec3c6;
	float: left;
	border-radius: 0 3px 3px 3px;
	overflow: hidden;
}

#alarm-chart-edge {
	margin-left: 9px;
}

#galContainer > .highcharts-container, #mmiContainer > .highcharts-container {
	border-top: 1px solid #999;
	border-radius: 6px;
}

/* 2.8.1 감지기 상세정보 팝업 */

.s-sensor-info-popup {
	box-shadow: 0px 0px 20px rgba(115, 115, 115, 0.6);
	position: absolute;
	background: #fff;
	left: 256px;
	top: 110px;
	width: 369px;
	border-radius: 3px;
	box-sizing: border-box;
	overflow: hidden;
	z-index: 2;
}

.s-left-slide-close .s-sensor-info-popup {
	left: 56px;
}

.s-sensor-info-tit {
	background: #30373e;
	font-family: NotoSans-Medium;
	color: #fff;
	height: 45px;
}

.s-main-tit-wrap {
	background: #fff;
}

.s-sensor-info-tit-text {
	line-height: 47px;
	text-indent: 18px;
	font-family: NotoSans-Medium;
	font-size: 14px;
}

.s-earthquake-title {
	line-height: 45px;
	text-indent: 14px;
	font-family: NotoSans-Bold;
	font-size: 16px;
	color: #616161;
}

.s-sensor-info-tit i.fa-times {
	position: absolute;
	right: 16px;
	top: 16px;
	cursor: pointer;
}

.s-sensor-info-content {
	float: left;
	background: #fff;
	width: 100%;
	position: relative;
}

.s-line-info-content {
	float: left;
	width: 100% !important;
	/* 	height: calc(100% - 45px); */
	/* 	padding: 9px !important; */
}

.s-sensor-info-content-inside {
	margin: 0 -16px 0;
}

.s-sensor-sm-tit {
	font-size: 14px;
	line-height: 30px;
	width: 100%;
	float: left;
	background-color: #ebeced;
	color: #30373e;
	padding: 0 17px;
	font-family: NotoSans-Medium;
}

.s-equip-route-tab-1 {
	background-color: #F6CEF5;
}

.s-equip-route-tab-2 {
	background-color: #F6CECE;
}

.s-sensor-sm-tit-situation {
	font-size: 14px;
	line-height: 30px;
	float: left;
	background-color: #ebeced;
	color: #30373e;
	padding: 0 10px;
	font-family: NotoSans-Medium;
	margin-left: 14px;
	text-align: left;
	display: inline-block;
	border-radius: 3px;
	margin-bottom: 4px;
	margin-top: 2px;
	height: 30px;
}

.s-sensor-item-tit-wrap {
	width: 122px;
	float: left;
	padding: 4px 0;
	font-size: 13px;
}

.s-sensor-item-tit-wrap .s-sensor-item-tit:last-child {
	border-bottom: none;
	height: 30px;
	line-height: 34px;
}

.s-sensor-item-content-wrap {
	width: calc(100% - 122px);
	float: left;
	padding: 4px 0;
	font-size: 13px;
	position: relative;
}
.highcharts-container {
	width : 100% !important;
} 
.s-sensor-item-content-wrap .s-sensor-item-content:last-child {
	border-bottom: none;
	height: 30px;
	line-height: 34px;
}

.s-popup-last-line {
	border-bottom: 2px solid #d0d0d0;
}

.s-sensor-item-tit {
	line-height: 30px;
	border-bottom: 1px solid #d0d0d0;
	margin-left: 17px;
	font-family: NotoSans-Medium;
	height: 30px;
}

.s-sensor-item-content {
	line-height: 30px;
	border-bottom: 1px solid #d0d0d0;
	font-family: NotoSans-Regular;
	margin-right: 17px;
	height: 30px;
	float: left;
	width: 181px;
	position: relative;
}

.move_access_road {
	position: absolute;
	top: 12px;
	right: 42px;
}

.move_access_road .styled_input_y {
	position: absolute;
	left: -66px;
}

.move_access_road .styled_label_y {
	width: 97px;
	height: 29px;
	position: absolute;
	top: -6px;
}

.s-move_access_road {
	position: absolute;
	top: 12px;
	right: 42px;
	padding-left: 28px;
	color: #b1b5b8;
	cursor: pointer;
}

.s-move_access_road.on {
	color: #47c0c0;
}

.s-move_access_road .s-login-check.eun-check {
	position: absolute;
	top: -2px;
	left: 0;
	font-size: 24px;
}

.s-rel-equip-list-search-btn {
	border: 1px solid #d1d2d3;
	position: absolute;
	right: 3px;
	bottom: 3px;
	line-height: 24px;
	padding: 0 6px;
	border-radius: 3px;
	cursor: pointer;
	font-size: 12px;
	background-color: #ebeced;
	display: inline-block;
	z-index: 1;
}

.s-rel-equip-list-search-btn:hover {
	background-color: #d0d0d0;
}

/* 2.8.2 상황보기 팝업 */
.s-situation-view-table-th-wrap {
	width: calc(100% - 42px);
	height: 34px;
	float: left;
	margin-left: 14px;
}

.s-situation-view-table-th-wrap-overflow {
	height: 34px;
	width: 730px;
	float: left;
	margin-left: 14px;
	overflow-x: hidden;
	overflow-y: hidden;
}

.s-situation-view-table-wrap {
	height: 212px;
	float: left;
	width: calc(100% - 28px);
	margin-left: 14px;
	overflow-y: scroll;
	margin-bottom: 14px;
	margin-top: -2px;
}

.s-situation-view-table-wrap-double {
	height: 138px;
	float: left;
	overflow: scroll;
	width: calc(100% - 28px);
	margin-left: 14px;
	margin-bottom: 15px;
}

.s-situation-view-popup {
	box-shadow: 0px 0px 20px rgba(115, 115, 115, 0.6);
	position: absolute;
	background: #fff;
	top: 110px;
	width: 775px;
	border-radius: 3px;
	box-sizing: border-box;
	overflow: hidden;
}

.s-left-slide-close .s-situation-view-popup {
	left: 431px;
}

.s-situation-view-table-th-wrap-overflow .s-situation-view-table {
	width: 1600px;
}

.s-situation-view-table-wrap-double .s-situation-view-table {
	width: 1600px;
}

.s-line-info-popup {
	box-shadow: 0px 0px 20px rgba(115, 115, 115, 0.6);
	position: absolute;
	background: #fff;
	left: 583px;
	top: 110px;
	border-radius: 3px;
	box-sizing: border-box;
	overflow: hidden;
	min-width: 200px;
}

.s-left-slide-close .s-line-info-popup {
	left: 431px;
}

/* 2.8.2  Minimap */
#mini {
	left: 251px;
	width: 166px;
	height: 166px;
	position: absolute;
	bottom: 0;
	border: 1px solid #c4c4c4;
}

.s-left-slide-close #mini {
	left: 50px;
}

/* 2.8.3 상황보기 */
.s-situation-view-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 13px;
}

.s-situation-view-table th:first-child {
	border-left: none !important;
}

.s-situation-view-table th:last-child {
	border-right: none !important;
}

.s-situation-view-table th {
	background: #ebeced;
	height: 32px;
	border: 1px solid #bec3c6 !important;
}

.s-situation-view-table th, .s-situation-view-table td {
	text-align: center;
}

.s-situation-view-table td {
	height: 30px;
	border: 1px solid #d0d0d0;
}

.s-situation-view-table td:first-child {
	border-left: none !important;
}

.s-situation-view-table td:last-child {
	border-right: none !important;
}

/* 2.8.3 계통정보 팝업 */

.s-line-info-content .scroll-element.scroll-x.scroll-scrolly_visible.scroll-scrollx_visible
	{
	display: none !important;
}

/* 2.8.4 Equip Information Popup */
.s-rotation-row {
	position: relative;
	float: left;
}

.s-90-degree {
	position: absolute;
	width: 22px;
	height: 22px;
	background-color: #fff;
	border: 1px solid #828282;
	border-radius: 3px;
	top: 9px;
	text-align: center;
	cursor: pointer;
}

.s-90-degree.left {
	right: 6px;
}

.s-90-degree.right {
	right: 32px;
}

.s-90-degree i {
	line-height: 20px;
	color: #828282;
}

.s-90-degree:hover i {
	background-color: rgba(0, 0, 0, 0.1);
	width: 20px;
	border-radius: 1px;
}

.s-chain {
	display: none;
	position: absolute;
	width: 100px;
	height: 100px;
	right: 50px;
	top: 0;
}

.s-chain-check.checked+.s-chain {
	display: block;
}

.s-chain i.fa-link {
	position: absolute;
	top: 62px;
	right: 31px;
	font-size: 18px;
	color: #636363;
}

.s-chain-line-1 {
	position: absolute;
	border: 2px solid #636363;
	width: 14px;
	height: 43px;
	border-left: none;
	right: 56px;
	top: 28px;
}

.s-chain-line-2 {
	position: absolute;
	border: 2px solid #636363;
	width: 14px;
	height: 43px;
	border-left: none;
	right: 56px;
	top: 69px;
}

.s-chain-check {
	float: left;
	position: relative;
	padding-left: 26px;
	margin-left: 45px;
	margin-top: 8px;
	cursor: default;
	font-size: 12px;
	line-height: 18px;
}

.s-chain-check .s-chain-check-box i.fa-check {
	display: none;
}

.s-chain-check.checked .s-chain-check-box i.fa-check {
	display: block;
}

.s-chain-check-box {
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border: 1px solid #333;
	text-align: center;
	background-color: #fff;
}

.s-chain-check-box i.fa-check {
	line-height: 15px;
	color: #333;
	font-size: 12px;
}

.s-popup-row {
	float: left;
	font-size: 12px;
	border-bottom: 1px solid #ddd;
	width: calc(100% - 32px);
	line-height: 20px;
	margin: 0 16px 0 16px;
	position: relative;
}

.s-popup-row-tit {
	float: left;
	width: 106px;
	padding: 6px 0;
	font-weight: bold;
}

.s-popup-row-content {
	float: left;
	width: calc(100% - 106px);
	line-height: 20px;
	padding: 6px 0px;
}

.s-popup-row.s-popup-row-last-line {
	width: 100%;
	margin: 0;
	border-bottom: 2px solid #ddd;
}

.s-popup-row.s-popup-row-last-line .s-popup-row-tit {
	padding: 6px 0 0 16px;
	width: 122px;
}

.s-popup-row.s-popup-row-last-line .s-popup-row-content {
	width: calc(100% - 137px);
}

.s-popup-row.s-bottom-none {
	border-bottom: none;
}

/* 2.8.5 Option Popup */
.s-graphic-option-containter {
	position: relative;
	float: left;
	margin-bottom: 10px;
}

.s-option-state {
	background: rgb(221, 221, 221);
	border-radius: 50px;
	width: 40px;
	height: 40px;
	text-align: center;
	color: rgb(97, 97, 97);
	padding-top: 6px;
	margin-bottom: 10px;
	cursor: pointer;
	pointer-events: auto;
}

.s-option-state i {
	font-size: 21px;
	line-height: 27px;
}

.s-option-active {
	background: #fcaf41;
}

.s-graphic-option-list {
	background: #fff;
	border-radius: 3px;
	border-image: none;
	left: -298px;
	top: 2px;
	width: 288px;
	position: absolute;
	pointer-events: auto;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
	transform: translateX(0);
	visibility: visible;
	opacity: 1;
	transition-duration: 100ms, 150ms, 25ms;
	transition-delay: 35ms, 50ms, 25ms;
	display: block;
}

.s-option-list {
	background: #fff;
	border-radius: 3px;
	border-image: none;
	left: -298px;
	top: 2px;
	width: 288px;
	position: absolute;
	pointer-events: auto;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
	transform: translateX(0);
	visibility: visible;
	opacity: 1;
	transition-duration: 100ms, 150ms, 25ms;
	transition-delay: 35ms, 50ms, 25ms;
	display: block;
}

.s-system-list {
	background: #fff;
	border-radius: 3px;
	border-image: none;
	left: -298px;
	top: 2px;
	width: 288px;
	position: absolute;
	pointer-events: auto;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
	transform: translateX(0);
	visibility: visible;
	opacity: 1;
	transition-duration: 100ms, 150ms, 25ms;
	transition-delay: 35ms, 50ms, 25ms;
	display: block;
}

.s-option-list-close {
	transform: translateX(10px);
	visibility: hidden;
	opacity: 0;
	transition-property: opacity, transform, visibility;
	transition-duration: 70ms, 250ms, 250ms;
	transition-timing-function: linear, cubic-bezier(0.23, 1, 0.32, 1);
	transition-delay: 25ms, 50ms, 0ms;
}

.s-option-title-graphic {
	text-align: center;
	font-size: 15px;
	background: #fff;
	border-radius: 4px 4px 0px 0px;
	font-weight: bold;
	padding: 6px;
	background: #fcaf41;
	font-family: NotoSans-Regular;
	line-height: 24px;
}

.s-option-main-list {
	width: 100%;
	height: 90%;
}

.s-option-table {
	margin: 4px 10px 10px 10px;
	border: 1px solid #444444;
	border-collapse: collapse;
	float: left;
	table-layout: fixed;
}

.s-option-table-td-div-wrap {
	width: 280px;
	margin-top: 11px;
	margin-bottom: 10px;
}

.s-option-table-td-div {
	width: 268px;
	height: 42px;
	margin: 0px 2px 0px 10px;
	border: 1px solid #d0d0d0;
	margin-bottom: -1px;
}

.s-option-table-td-div-title {
	display: inline-block;
	height: auto;
	width: 114px;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	border-right: 1px solid #d0d0d0;
	line-height: 40px;
	float: left;
	background-color: #ebeced;
}

.s-option-table-span-div {
	display: inline-block;
	border-top-width: 5px;
	padding-top: 8px;
	padding-bottom: 3px;
	float: left;
	margin-left: 42px;
	line-height: 26px;
}

.s-option-table-tr {
	height: 40px;
}

.s-option-table-th {
	border: 1px solid #d0d0d0;
	background-color: #ebeced;
}

.s-option-table-td {
	text-align: center;
	border: 1px solid #d0d0d0;
	width: 153px;
}

.s-option-table-td span.d-graphic {
	font-size: 13px ! important;
}

.s-shadow-range {
	width: 136px;
	padding-top: 2px;
	padding-bottom: 2px;
}

.s-graphic-three {
	height: 100%;
	background-color: #d0d0d0;
	border: 1px solid;
	border-radius: 20px;
	margin: 1px 1px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-top: 1px;
	cursor: pointer;
	font-size: 12px
}

.s-graphic-three:hover {
	background-color: #bcbdbe;
}

.s-graphic {
	height: 100%;
	border: 1px solid;
	border-radius: 20px;
	margin: 1px;
	padding-left: 7px;
	padding-right: 7px;
	padding-bottom: 1px;
	padding-top: 1px;
	cursor: pointer;
	background-color: #d0d0d0;
	font-size: 12px;
}

.s-graphic:hover {
	background-color: #bcbdbe;
}

.interpace-active {
	background: #fcaf41;
	color: #fff;
	border: 1px solid #976927;
}

.interpace-active:hover {
	background: #ca8c34;
	border: 1px solid #65461a;
}

.s-option-containter {
	position: relative;
	float: left;
	margin-bottom: 10px;
}

.s-system-containter {
	position: relative;
	float: left;
	margin-bottom: 10px;
}

.s-option-table-td-div-title {
	width: 164px;
}

.s-option-table-span-div {
	margin-left: 18px;
}

/* 2.8.6 Mobile User Popup */
.s-mobile-user-name {
	display: inline-block;
	float: left;
	width: 74px;
	padding-left: 17px;
	margin-top: 27px;
	margin-left: 130px;
	font-weight: bold;
}

.s-mobile-user-search-wrap {
	float: left;
	width: 100%;
	margin-bottom: 14px;
	background-color: #ebeced;
}

.s-situation-view-table tr:hover td {
	background-color: #ededed;
}

.s-situation-view-table tr.active td {
	background-color: #d1f0ed !important;
	color: #108073 !important
}

.s-option_containter {
	position: absolute;
	left: -55px;
	top: 17px;
}

/* 2.8.7 상황보기팝업 */

/* 2.8.8 위험지역정보 Popup */
.s-danger-grade-text {
	float: left;
	width: 99px;
}

.s-danger-grade {
	float: left;
	padding: 2px 10px;
	margin: 6px 3px;
	line-height: 24px;
	color: #aaa;
	border-radius: 3px;
}

.s-sensor-sm-tit.HIGH .s-danger-grade.red {
	background-color: #f26c4f;
	color: #fff;
}

.s-sensor-sm-tit.MIDDLE .s-danger-grade.yellow {
	background-color: #fff568;
	color: #777;
}

.s-sensor-sm-tit.LOW .s-danger-grade.green {
	background-color: #3cb878;
	color: #fff;
}

/* 2.8.9 관련설비목록 Popup */

.s-table-hide.row2 {
	top: 297px;
	height: 139px;
}

.s-table-hide.row3 {
	top: 519px;
}

.s-table-hide-rigth-white {
	position: absolute;
	background-color: #fff;
	width: 12px;
	height: 122px;
	right: -13px;
	top: -1px;
}

/* 2.8.10 가스감지기 현황 Popup */
.s-search-no {
	line-height: 238px;
	text-align: center;
	padding-right: 10px;
	padding-bottom: 20px;
	font-family: NotoSans-Regular;
}

.s-search-table-no {
	line-height: 253px;
	text-align: center;
	border: 1px solid #d0d0d0;
}

.s-content-title {
	padding: 12px 20px;
}

.s-search-box {
	background-color: #ebeced;
	margin: 0 17px;
	border-radius: 3px;
	padding: 10px;
	height: 53px;
	position: relative;
}

#gs-calendar {
	border: 1px solid #d0d0d0;
	height: 34px;
	line-height: 34px;
	border-radius: 3px;
	padding: 0 11px;
	float: left;
	width: 93px;
	background-color: #fff;
}

#gs-calendar:focus {
	border: 1px solid #c4c4c4;
}

.s-gas-search-tit {
	float: left;
	line-height: 34px;
	margin-right: 6px;
	margin-left: 6px;
}

.s-gas-input-wrap img {
	float: left;
	margin: 8px;
}

.s-gas-time {
	width: 52px;
	height: 34px;
	line-height: 34px;
	border: 1px solid #d0d0d0;
	border-radius: 3px;
	padding: 0 0 0 6px;
	background-color: #fff !important;
	-webkit-appearance: none; /* 네이티브 외형 감추기 */
	-moz-appearance: none;
	appearance: none;
	background: url('../images/select_bg.jpg') no-repeat 95% 50%;
	/* 화살표 모양의 이미지 */
}

select.s-gas-time::-ms-expand {
	display: none;
}

.fa-chart-line.grid {
	font-size: 13px;
	cursor: pointer;
	background: #ebeced;
	padding: 5px;
	border-radius: 3px;
	border: 1px solid #8d8e8e;
	color: #333 !important;
}

.fa-chart-line.grid:hover {
	background: #bcbdbe;
	border: 1px solid #5e5e5f;
}

.s-gas-wave {
	float: left;
	line-height: 34px;
	margin: 0 8px;
}

.s-gas-time-between {
	float: left;
	line-height: 34px;
	margin: 0 4px;
}

#chartTab {
	margin-left: -24px;
	margin-top: 13px;
	margin-bottom: 6px;
}

#chartTab li {
	display: inline-block;
	font-size: 12px;
	cursor: pointer;
	display: inline-block;
	padding: 8px 14px;
	margin-bottom: 4px;
	border-radius: 3px;
	margin-right: 2px;
	background-color: #eeeeee;
}

#chartTab li.active {
	background-color: #d1f0ed !important;
	color: #108073 !important;
}

#chartContents {
	width: 573px;
	display: block;
	margin: 0 16px 16px 16px;
	padding: 20px 0 10px 10px;
	border: 1px solid #d0d0d0;
}

.s-gas-table.scroll-content {
	overflow-x: hidden !important;
}

/* 2.8.11 차트데이터 상세보기 Popup */

.s-chart-popup-tab {
	display: inline-block;
	font-size: 12px;
	cursor: pointer;
	display: inline-block;
	padding: 6px 10px;
	margin-bottom: 4px;
	border-radius: 3px;
	margin-right: 2px;
	background-color: #eeeeee;
	border:1px solid #d0d0d0;
	color: #999;
}

.s-chart-popup-tab.active {
	background-color: #d1f0ed !important;
	color: #108073 !important;
	border:1px solid #b8dad6 !important;
	font-weight: bold;
}

.s-chart-data-detail-table {
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}

.s-chart-data-detail-table a{
	color: #16abaa;
	text-decoration: underline;
	cursor: pointer;
}

.s-chart-data-detail-table th {
	background: #ebeced;
	height: 32px;
	border: 1px solid #bec3c6 !important;
	text-align: center;
	font-size: 13px;
}

.s-chart-data-detail-table th:first-child {
	border-left: none !important;
}

.s-chart-data-detail-table th:last-child {
	border-right: none !important;
}

.s-chart-data-detail-table td {
	height: 30px;
	border: 1px solid #d0d0d0;
	text-align: center;
	font-size: 11px;
}

.s-chart-data-detail-table td:first-child {
	border-left: none !important;
}

.s-chart-data-detail-table td:last-child {
	border-right: none !important;
}

.s-popup-tab-div {
	width: 421px;
	height: 286px;
}

.s-detail-chart-wrap {
	border: 1px solid #d0d0d0;
	border-radius: 3px;
	width: 100%;
	height: 286px;
	float: left;
}

.s-up-down-color {
	color:#666;
	float:left;
	width: 402px;
}

.s-up-down-color.up {
	color:#f04b46;
}

.s-up-down-color.down {
	color:#2184da;
}

.s-alarm-chart-name:hover, .s-fdc-chart-name:hover{
	border: 1px solid #aaa;
}

.s-alarm-chart-name.s-grade-a {
	background-color: #fcdbda;
}

.s-alarm-chart-name.s-grade-a .s-alarm-chart-info-ppm{
	color: #d8443f;
}

.s-alarm-chart-name.s-grade-a:hover {
	border: 1px solid #F04B46;
}

.s-alarm-chart-name.s-grade-b {
	background-color: #feefd9;
}

.s-alarm-chart-name.s-grade-b .s-alarm-chart-info-ppm{
	color: #b17b2e;
}

.s-alarm-chart-name.s-grade-b:hover {
	border: 1px solid #e39e3b;
}

.s-alarm-chart-name.s-grade-c {
	background-color: #d7eff6;
}

.s-alarm-chart-name.s-grade-c .s-alarm-chart-info-ppm{
	color: #277b94;
}

.s-alarm-chart-name.s-grade-c:hover {
	border: 1px solid #38AFD3;
}

.s-alarm-chart-name.s-grade-fdc:hover {
	border: 1px solid #5346ac;
}

.s-popup-tab-div-th-wrap {
	width: 100%;
	height: 34px;
	float: left;
}

.s-popup-tab-div-td-wrap .scroll-element_outer {
	left: -12px !important;
}

/* 2.8.12 수신지역설정 Popup */

.s-receive-area-setup-table {
	border: 1px solid #d0d0d0;
	float: left;
	width: 100%;
	border-radius: 0 0 3px 3px;
	height: 152px;
	overflow-y: scroll;
}

.s-receive-area-setup-table-tit {
	background-color: #ebeced;
	float: left;
	width: 100%;
	position: relative;
	border-radius: 3px 3px 0 0;
	border: 1px solid #d0d0d0;
	padding:0 20px 0 10px;
	line-height: 34px;
	margin-top: 10px;
}


.s-receive-area-setup-row {
	position: relative;
	border-bottom:1px solid #d0d0d0;
	line-height: 34px;
	padding:0 20px 0 10px;
}

.s-receive-area-setup-row:last-child {
}

.s-receive-area-setup-row i{
	position: absolute;
	right:16px;
	top:0;
	line-height: 34px;
	cursor: pointer;
	color:#555;
	
}

.s-receive-area-setup-row i:hover{
	color:#111;
}

.s-receive-area-setup-table-delete-tit {
	position: absolute;
	right:26px;
	top:0;
	line-height: 34px;	
}

.s-receive-area-setup-tit-box {
	background-color: #ebeced;
	float: left;
	border-radius: 3px;
	padding-top: 10px;
	width: 488px;
	margin-top: 10px;
	margin-bottom: 4px
}

.s-risk-grade-select-wrap {
	float: left;
	background-color: #ebeced;
	border-radius: 3px;
	height: 54px;
	display: inline-block;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 4px;
}

.s-risk-grade-select-tit {
	float: left;
	display: inline;
	line-height: 54px;
	padding-left: 16px;
}

.s-risk-grade-select-box {
	float: left;
	color: #fff;
	padding: 4px 10px;
	margin: 12px 0px 16px 36px;
	cursor: pointer;
}

.s-risk-grade-select-box.AGRADE {
	background-color: #f04b46;
}

.s-risk-grade-select-box.BGRADE {
	background-color: #fcaf41;
}

.s-risk-grade-select-box.CGRADE {
	background-color: #2184da;
}

.s-risk-grade-select-box:after {
 	content: "\f0c8";
	color: #fff;
	display: inline-block;
	margin-left: 4px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
 }


.s-risk-grade-select-box.checked:after {
	content: "\f14a";
	color: #fff;
	display: inline-block;
	margin-left: 4px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	font-weight: 900;
}

/* 2.8.13 가스 기준 정보 등록 Popup */

.s-popup-unit-select-wrap .s-y-select {
	width: 100%;
}

.s-grade-input {
	border: 1px solid #d0d0d0;
	height: 34px;
	line-height: 34px;
	border-radius: 3px;
	width: 100%;
	padding: 0 8px;
	text-align: right;
}

/* 2.9 Login */
.s-login-line {
	width: 100%;
	height: 1px;
	background-color: #ccc;
	margin-top: 12px;
	margin-bottom: 40px;
	float: left;
}

#gnb {
	width: 100%;
}

#ms_login {
	width: 80%;
}

.main {
	margin: 0 auto;
	height: 100%;
	background-color: #f5f6f7;
	margin-top: -26px;
	padding-top: 26px;
}

.body {
	margin-left: 0;
	min-width: none;
}

.login_box {
	width: 460px;
	margin: 0 auto;
}

.input-group .form-control {
	height: 34px !important;
}

.login_main_text {
	text-align: center;
	color: #47c0c0;
	font-size: 82px;
	width: 100%;
	height: 103px;
	margin-top: 26px;
	line-height: 52px;
	font-family: NotoSans-Bold;
	margin-bottom: 90px;
}

.login_main_text span {
	font-size: 24px;
	font-family: NotoSans-Medium;
}

.login_input {
	width: 100%;
	height: 50px;
	margin: 0 0 24px;
	padding: 10px 15px 10px 15px;
	border: solid 1px #dadada;
	font-size: 15px;
	line-height: 16px;
	border-radius: 3px;
}

#user_pwd {
	margin-bottom: 18px;
}

.login_input:focus {
	border: solid 1px #47c0c0;
	outline: none;
}

.btn-login {
	background: #3399ff;
	color: #fff;
	width: 100%;
	height: 50px;
	text-align: center;
	border-radius: 3px;
	margin-top: 14px;
	font-size: 17px;
	line-height: 50px;
	border: 1px solid #2183c5;
	cursor: pointer;
	float: left;
	font-family: NotoSans-Regular;
}

.btn-login:hover {
	color: #fff;
	border-color: #207ebc #207ebc #13496e;
	background: #248cd2;
}

.styled_input_y {
	display: none;
}

.styled_label_y {
	width: 70px;
	height: 32px;
	cursor: pointer;
	line-height: 46px;
	float: left;
	color: #cacacf;
	position: absolute;
	right: 0;
}

.styled_input_y[type='checkbox']:checked+.styled_label_y {
	color: #47c0c0;
}

.styled_radio_y {
	display: none;
}

.styled_radio_y+i {
	pointer-events: none;
	position: absolute;
	left: 0;
	color: #cacacf;
	font-size: 29px;
	margin-top: 2px;
}

.styled_radio_y:checked+i:before {
	content: "\e902";
	color: #47c0c0;
}

.styled_radio_label_y {
	width: 70px;
	height: 32px;
	line-height: 32px;
	font-weight: normal !important;
	display: inline-block;
	margin-bottom: 5px;
	position: relative;
	padding-left: 31px;
}

.s-login-check {
	font-size: 29px;
}

.login_footer_wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 10px;
	float: left;
}

.login_footer {
	width: 460px;
	padding-top: 16px;
	border-top: 1px solid #ccc;
	text-align: center;
	font-size: 13px;
}

.login_footer span {
	color: #47c0c0;
	font-size: 13px;
}

.login_footer div {
	display: inline;
}

@media ( max-width : 900px) {
	.main {
		width: 100%;
	}
	.header {
		width: 100%;
	}
}

@media ( max-width : 375px) {
	.login_main_text {
		font-size: 70px;
		height: 74px;
		margin-top: 16px;
		line-height: 44px;
	}
	.login_main_text span {
		font-size: 20px;
	}
	.login_box {
		width: calc(100% - 40px);
		margin: 20px;
	}
	.login_input {
		height: 50px;
		padding: 10px 35px 10px 15px;
		border: solid 1px #dadada;
		font-size: 15px;
		line-height: 16px;
	}
	.login_footer {
		font-size: 10px;
	}
	.login_footer span {
		font-size: 10px;
	}
}

/* 2.10 Media query */
@media screen and (max-width: 480px) {
	.s-weather {
		width: 100%;
	}
	.s-recent-event {
		width: 100%;
	}
	.s-mobile-message {
		width: 100%;
	}
	.s-event-map {
		width: 100%;
	}
}

@media screen and (max-width: 1280px) {
	.s-container {
		padding: 15px;
	}
	
	.s-open-chart {
		padding-right: 12px;
		padding-top:0;
	}
	
	.s-alarmdate-box-wrap-s-finaldate-box-wrap {
		font-size: 10px;
	}
	
	.s-alarmdate-box {
		margin-right: 3px;
	}
	
	.s-alarmdate-box-wrap {
		margin-right: 8px;	
	}
	
	.s-finaldate-box {
		margin-right: 3px;
	}
}

@media screen and (max-width: 1400px) {
	.s-fine-dust-tit {
		width: 51px;
	}
	
	.s-fine-dust1, .s-fine-dust2, .s-fine-dust3, .s-fine-dust4 {
		width: 88px;
	}
}

@media screen and (max-width: 1662px) {
	.s-weather-icon::before {
		font-size: 44px;
	}
	
	#temperature {
		font-size: 25px;
	}
	
	.s-temperature-unit {
		font-size: 15px;
		margin-left: 4px;
		margin-bottom: 2px;
	}
}

/* 2.11 Tooltip */

.ui-widget-shadow {
	box-shadow: none;
}


.ui-widget.ui-widget-content {
	border: 1px solid rgba(0,0,0,0);
}

.ui-tooltip, .arrow:after {
   background: black;
   border: 2px solid rgba(0,0,0,0);
 }
 
 .ui-tooltip {
   padding: 3px 6px;
   color: white;
   border-radius: 3px;
   font: normal 12px NotoSans-Regular;
   text-transform: uppercase;
   text-shadow: none;
 }
 
 .arrow {
   width: 72px;
   height: 16px;
   overflow: hidden;
   position: absolute;
   left: 50%;
   margin-left: -36px;
   bottom: -16px;
 }
 
 .arrow.top {
   top: -16px;
   bottom: auto;
 }
 
 .arrow.left {
   left: 20%;
 }
 
 .arrow:after {
   content: "";
   position: absolute;
   left: 25px;
   top: -20px;
   width: 18px;
   height: 18px;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
 }
 
 .arrow.top:after {
   bottom: -20px;
   top: auto;
 }

/* -------------------------------
   3.0 Predefined CSS Setting
------------------------------- */

/* 3.1 Predefined Classes */
.s-m-t-0 {
	margin-top: 0px !important;
}

.s-m-t-1 {
	margin-top: 1px !important;
}

.s-m-t-2 {
	margin-top: 2px !important;
}

.s-m-t-3 {
	margin-top: 3px !important;
}

.s-m-t-4 {
	margin-top: 4px !important;
}

.s-m-t-5 {
	margin-top: 5px !important;
}

.s-m-t-10 {
	margin-top: 10px !important;
}

.s-m-t-15 {
	margin-top: 15px !important;
}

.s-m-t-20 {
	margin-top: 20px !important;
}

.s-m-t-25 {
	margin-top: 25px !important;
}

.s-m-t-30 {
	margin-top: 30px !important;
}

.s-m-t-35 {
	margin-top: 35px !important;
}

.s-m-t-40 {
	margin-top: 40px !important;
}

.s-m-r-0 {
	margin-right: 0px !important;
}

.s-m-r-1 {
	margin-right: 1px !important;
}

.s-m-r-2 {
	margin-right: 2px !important;
}

.s-m-r-3 {
	margin-right: 3px !important;
}

.s-m-r-4 {
	margin-right: 4px !important;
}

.s-m-r-5 {
	margin-right: 5px !important;
}

.s-m-r-10 {
	margin-right: 10px !important;
}

.s-m-r-15 {
	margin-right: 15px !important;
}

.s-m-r-17 {
	margin-right: 17px !important;
}

.s-m-r-18 {
	margin-right: 18px !important;
}

.s-m-r-19 {
	margin-right: 19px !important;
}

.s-m-r-20 {
	margin-right: 20px !important;
}

.s-m-r-25 {
	margin-right: 25px !important;
}

.s-m-r-30 {
	margin-right: 30px !important;
}

.s-m-r-35 {
	margin-right: 35px !important;
}

.s-m-r-40 {
	margin-right: 40px !important;
}

.s-m-b-0 {
	margin-bottom: 0px !important;
}

.s-m-b-1 {
	margin-bottom: 1px !important;
}

.s-m-b-2 {
	margin-bottom: 2px !important;
}

.s-m-b-3 {
	margin-bottom: 3px !important;
}

.s-m-b-4 {
	margin-bottom: 4px !important;
}

.s-m-b-5 {
	margin-bottom: 5px !important;
}

.s-m-b-10 {
	margin-bottom: 10px !important;
}

.s-m-b-15 {
	margin-bottom: 15px !important;
}

.s-m-b-20 {
	margin-bottom: 20px !important;
}

.s-m-b-25 {
	margin-bottom: 25px !important;
}

.s-m-b-30 {
	margin-bottom: 30px !important;
}

.s-m-b-35 {
	margin-bottom: 35px !important;
}

.s-m-b-40 {
	margin-bottom: 40px !important;
}

.s-m-l-0 {
	margin-left: 0px !important;
}

.s-m-l-1 {
	margin-left: 1px !important;
}

.s-m-l-2 {
	margin-left: 2px !important;
}

.s-m-l-3 {
	margin-left: 3px !important;
}

.s-m-l-4 {
	margin-left: 4px !important;
}

.s-m-l-5 {
	margin-left: 5px !important;
}

.s-m-l-10 {
	margin-left: 10px !important;
}

.s-m-l-15 {
	margin-left: 15px !important;
}

.s-m-l-20 {
	margin-left: 20px !important;
}

.s-m-l-25 {
	margin-left: 25px !important;
}

.s-m-l-30 {
	margin-left: 30px !important;
}

.s-m-l-35 {
	margin-left: 35px !important;
}

.s-m-l-40 {
	margin-left: 40px !important;
}

.s-p-t-0 {
	padding-top: 0px !important;
}

.s-p-t-1 {
	padding-top: 1px !important;
}

.s-p-t-2 {
	padding-top: 2px !important;
}

.s-p-t-3 {
	padding-top: 3px !important;
}

.s-p-t-4 {
	padding-top: 4px !important;
}

.s-p-t-5 {
	padding-top: 5px !important;
}

.s-p-t-10 {
	padding-top: 10px !important;
}

.s-p-t-15 {
	padding-top: 15px !important;
}

.s-p-t-20 {
	padding-top: 20px !important;
}

.s-p-t-25 {
	padding-top: 25px !important;
}

.s-p-t-30 {
	padding-top: 30px !important;
}

.s-p-t-35 {
	padding-top: 35px !important;
}

.s-p-t-40 {
	padding-top: 40px !important;
}

.s-p-r-0 {
	padding-right: 0px !important;
}

.s-p-r-1 {
	padding-right: 1px !important;
}

.s-p-r-2 {
	padding-right: 2px !important;
}

.s-p-r-3 {
	padding-right: 3px !important;
}

.s-p-r-4 {
	padding-right: 4px !important;
}

.s-p-r-5 {
	padding-right: 5px !important;
}

.s-p-r-10 {
	padding-right: 10px !important;
}

.s-p-r-15 {
	padding-right: 15px !important;
}

.s-p-r-20 {
	padding-right: 20px !important;
}

.s-p-r-25 {
	padding-right: 25px !important;
}

.s-p-r-30 {
	padding-right: 30px !important;
}

.s-p-r-35 {
	padding-right: 35px !important;
}

.s-p-r-40 {
	padding-right: 40px !important;
}

.s-p-b-0 {
	padding-bottom: 0px !important;
}

.s-p-b-1 {
	padding-bottom: 1px !important;
}

.s-p-b-2 {
	padding-bottom: 2px !important;
}

.s-p-b-3 {
	padding-bottom: 3px !important;
}

.s-p-b-4 {
	padding-bottom: 4px !important;
}

.s-p-b-5 {
	padding-bottom: 5px !important;
}

.s-p-b-10 {
	padding-bottom: 10px !important;
}

.s-p-b-15 {
	padding-bottom: 15px !important;
}

.s-p-b-20 {
	padding-bottom: 20px !important;
}

.s-p-b-25 {
	padding-bottom: 25px !important;
}

.s-p-b-30 {
	padding-bottom: 30px !important;
}

.s-p-b-35 {
	padding-bottom: 35px !important;
}

.s-p-b-40 {
	padding-bottom: 40px !important;
}

.s-p-l-0 {
	padding-left: 0px !important;
}

.s-p-l-1 {
	padding-left: 1px !important;
}

.s-p-l-2 {
	padding-left: 2px !important;
}

.s-p-l-3 {
	padding-left: 3px !important;
}

.s-p-l-4 {
	padding-left: 4px !important;
}

.s-p-l-5 {
	padding-left: 5px !important;
}

.s-p-l-10 {
	padding-left: 10px !important;
}

.s-p-l-15 {
	padding-left: 15px !important;
}

.s-p-l-20 {
	padding-left: 20px !important;
}

.s-p-l-25 {
	padding-left: 25px !important;
}

.s-p-l-30 {
	padding-left: 30px !important;
}

.s-p-l-35 {
	padding-left: 35px !important;
}

.s-p-l-40 {
	padding-left: 40px !important;
}

.s-f-s-8 {
	font-size: 8px !important;
}

.s-f-s-9 {
	font-size: 9px !important;
}

.s-f-s-10 {
	font-size: 10px !important;
}

.s-f-s-11 {
	font-size: 11px !important;
}

.s-f-s-12 {
	font-size: 12px !important;
}

.s-f-s-13 {
	font-size: 13px !important;
}

.s-f-s-14 {
	font-size: 14px !important;
}

.s-f-s-15 {
	font-size: 15px !important;
}

.s-f-s-16 {
	font-size: 16px !important;
}

.s-f-s-17 {
	font-size: 17px !important;
}

.s-f-s-18 {
	font-size: 18px !important;
}

.s-f-s-19 {
	font-size: 19px !important;
}

.s-f-s-20 {
	font-size: 20px !important;
}

.s-f-s-21 {
	font-size: 21px !important;
}

.s-f-s-22 {
	font-size: 22px !important;
}

.s-f-s-23 {
	font-size: 23px !important;
}

.s-f-s-24 {
	font-size: 24px !important;
}

.s-f-s-30 {
	font-size: 30px !important;
}

.s-display-none {
	display: none;
}

.s-pull-left {
	float: left !important;
}

.s-pull-right {
	float: right !important;
}

.s-pull-none {
	float: none !important;
}

.s-width-xs {
	width: 150px !important;
}

.s-width-sm {
	width: 300px !important;
}

.s-width-md {
	width: 450px !important;
}

.s-width-lg {
	width: 600px !important;
}

.s-width-full {
	width: 100% !important;
}

.s-width-half {
	width: 50% !important;
}

.s-l-30 {
	width: 30% !important;
	float: left !important;
	padding: 0 10px !important;
}

.s-l-40 {
	width: 40% !important;
	float: left !important;
	padding: 0 10px !important;
}

.s-l-50 {
	width: 50% !important;
	float: left !important;
	padding: 0 10px !important;
}

.s-l-60 {
	width: 60% !important;
	float: left !important;
	padding: 0 10px !important;
}

.s-l-70 {
	width: 70% !important;
	float: left !important;
	padding: 0 10px !important;
}

.s-l-100 {
	width: 100% !important;
	float: left !important;
	padding: 0 10px !important;
}

.s-l-h-30 {
	line-height: 30px !important;
}

/* 3.2 Disaster Prevention Monitoring Predefined Classes */
.d-ellipsis div {
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.d-ellipsis {
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	overflow: hidden !important;
}

.s-t-18 {
	top: 18px !important;
}

.s-display-none {
	display: none !important;
}

.s-p-0 {
	padding: 0px !important;
}

.s-f-s-20 {
	font-size: 20px !important;
}

.s-f-s-26 {
	font-size: 26px !important;
}

.s-f-s-28 {
	font-size: 28px !important;
}

.s-l-h-58 {
	line-height: 58px !important;
}

.equip_list_table_left_space i {
	text-align: center;
	border-radius: 3px;
	font-size: 24px;
	color: rgba(0, 0, 0, .7);
	background: rgba(0, 0, 0, .5);
	position: relative;
	overflow: hidden;
	float: left;
	width: 24px;
	height: 24px;
	line-height: 24px;
	z-index: 2000;
}

/* i.AUTO_FIRE_01 { */
/* 	background-color: #f04b46; */
/* } */

/* i.AUTO_FIRE_02 { */
/* 	background-color: #f07946; */
/* } */

/* i.AUTO_FIRE_03 { */
/* 	background-color: #fcaf41; */
/* } */

/* i.CCTV_01 { */
/* 	background-color: #65c56f;	 */
/* } */

/* i.CCTV_02 { */
/* 	background-color: #16abaa; */
/* } */

/* i.DUCT_01 { */
/* 	background-color: #34a853; */
/* } */

/* i.GAS_01 { */
/* 	background-color: #7d1e72; */
/* } */

/* i.INHALE_FIRE_01 { */
/* 	background-color: #5f50c5; */
/* } */

/* i.INHALE_FIRE_02 { */
/* 	background-color: #d250d4; */
/* } */

/* i.LEAK_01 { */
/* 	background-color: #38afd3; */
/* } */

/* i.LEAK_02 { */
/* 	background-color: #2184da; */
/* } */

/* i.LEAK_03 { */
/* 	background-color: #3b59d1; */

/* } */

/* i.EQUIP_01 { */
/* 	background-color: #362f2d; */
/* } */

/* i.EQUIP_02 { */
/* 	background-color: #534741; */
/* } */

/* i.EQUIP_03 { */
/* 	background-color: #736357; */
/* } */

/* i.EQUIP_04 { */
/* 	background-color: #998675; */
/* } */
i.DP {
	border: 4px solid #8393ca;
	border-radius: 0;
	width: 20px;
	height: 20px;
	margin-left: 2px;
	background-color: rgba(0, 0, 0, 0);
}

i.NP {
	border: 4px solid #6dcff6;
	border-radius: 0;
	width: 20px;
	height: 20px;
	margin-left: 2px;
	background-color: rgba(0, 0, 0, 0);
}

i.EP {
	border: 4px solid #a186be;
	border-radius: 0;
	width: 20px;
	height: 20px;
	margin-left: 2px;
	background-color: rgba(0, 0, 0, 0);
}

i.FP {
	border: 4px solid #f49ac1;
	border-radius: 0;
	width: 20px;
	height: 20px;
	margin-left: 2px;
	background-color: rgba(0, 0, 0, 0);
}

i.ROW {
	border-radius: 0;
	width: 20px;
	height: 20px;
	margin-left: 2px;
	background-color: #82ca9c;
}

i.MIDDLE {
	border-radius: 0;
	width: 20px;
	height: 20px;
	margin-left: 2px;
	background-color: #fff799;;
}

i.HIGH {
	border-radius: 0;
	width: 20px;
	height: 20px;
	margin-left: 2px;
	background-color: #f69679;
}

i.AUTO_FIRE_01 {
	background-color: #ff0066;
}

i.AUTO_FIRE_02 {
	background-color: #ff0000;
}

i.AUTO_FIRE_03 {
	background-color: #fc6600;
}

i.CCTV_01 {
	background-color: #fccc00;
}

i.CCTV_02 {
	background-color: #ffff00;
}

i.DUCT_01 {
	background-color: #36b700;
}

i.GAS_01 {
	background-color: #009297;
}

i.INHALE_FIRE_01 {
	background-color: #4d009a;
}

i.INHALE_FIRE_02 {
	background-color: #80007f;
}

i.LEAK_01 {
	background-color: #0611f2;
}

i.LEAK_02 {
	background-color: #003a9a;
}

i.LEAK_03 {
	background-color: #00007e;
}

i.EQUIP_01 {
	background-color: #65c56f;
}

i.EQUIP_02 {
	background-color: #38afd3;
}

i.EQUIP_03 {
	background-color: #5f50c5;
}

i.EQUIP_04 {
	background-color: #fcaf41;
}

i.DEFAULT {
	background-color: #BDBDBD;
}

i.IDLE {
	background-color: #FFBB00;
}

i.PROCESS {
	background-color: #99E000;
}

i.RUN {
	background-color: #489CFF;
}

i.DOWN {
	background-color: #EAEAEA;
}

.s-w-20 {
	float: left;
	width: 19%;
	margin: 0 0.5%;
}

.s-w-40 {
	float: left;
	width: 39%;
	margin: 0 0.5%;
}

.s-p-l-6 {
	padding-left: 6px !important;
}

.s-p-l-8 {
	padding-left: 8px !important;
}

.s-p-r {
	position: relative !important;
}

.s-w-calc-100-45 {
	width: calc(100% - 45px) !important;
}

.s-top-border {
	border-top: 2px solid #30373e;
}

.s-m-0 {
	margin: 0 !important;
}

.s-m-t-14 {
	margin-top: 14px !important;
}

.s-m-b-12 {
	margin-bottom: 10px !important;
}

.s-m-l-18 {
	margin-left: 18px !important;
}

.s-p-0 {
	padding: 0 !important;
}

.s-p-10 {
	padding: 10px !important;
}

.s-p-6-16-12 {
	padding: 6px 16px 12px !important;
}

.s-p-b-8 {
	padding-bottom: 8px !important;
}

.s-overflow-hidden {
	overflow: hidden !important;
}

.s-l-h-50 {
	line-height: 50px !important;
}

.s-h-12 {
	height: 12px !important;
}

.s-w-606 {
	width: 606px !important;
}

.s-ab-center {
	margin: auto !important;
	top: 0 !important;
	left: 0 !important;
	bottom: 0 !important;
	right: 0 !important;
}

.s-m-l-6 {
	margin-left: 6px !important;
}

.s-color-red {
	background-color: #ff0000 !important;
	color: #fff;
}

.s-color-blue {
	background-color: #0000ff !important;
	color: #fff;
}

.s-color-green {
	background-color: #00ff00 !important;
	color: #fff;
}

.s-red-bg {
	background-color: #f04b46 !important;
}

.s-orange-bg {
	background-color: #f7941d !important;
}

.s-yellow-bg {
	background-color: #fff200 !important;
}

.s-table-border-none {
	border: none !important;
}

.s-blue-color {
	color: #5084d8 !important;
}

.s-red-color {
	color: #f04b46 !important;
}

.s-orange-color {
	color: #f7941d !important;
}

.s-yellow-color {
	color: #fff200 !important;
}

.s-green-color {
	color: #65c56f !important;
}

/* 3.3  Button Color */
.s-green-btn {
	background: #47c0c0 !important;
	color: #fff !important;
	border: 1px solid #168f48 !important;
}

.s-green-btn i {
	color: #fff !important;
}

.s-green-btn:hover {
	background: #36a6a6 !important;
	border: 1px solid #12753a !important;
}

.s-disable-btn {
	background: #a9d8d3 !important;
	color: #fff !important;
	border: 1px solid #91c3be !important;
	pointer-events: none;
}

.s-disable-btn i {
	color: #fff !important;
}

/******************************************************************************************************************************************************************/

.fa-chart-bar {
	font-size: 13px;
	cursor: pointer;
	background: #ebeced;
	padding: 5px 8px;
	border-radius: 3px;
	border: 1px solid #8d8e8e;
}

.fa-chart-bar:hover {
	background: #bcbdbe;
	border: 1px solid #5e5e5f;
}

.fa-envelope {
	font-size: 13px;
	cursor: pointer;
	background: #ebeced;
	padding: 5px 8px;
	border-radius: 3px;
	border: 1px solid #8d8e8e;
}

.fa-envelope:hover {
	background: #bcbdbe;
	border: 1px solid #5e5e5f;
}

#earthquakeSubGrid {
	float: left;
	width: 100%;
}

.d-earthquake-two-block {
	text-align: left;
	font-size: 12px;
	border-bottom: 1px solid #ddd;
	padding: 16px 0;
	margin: 5px 8px;
	
}

#location {
	font-size: 18px;
	margin-bottom: 4px;
	display: inline-block;
	font-family: NotoSans-Regular;
	white-space: nowrap;
	text-align: center;
}

.d-earthquake-block-contents {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}

.d-earthquake-two-block-tit {
  width: 20%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1px;
  margin-top: 6px;
  color: #888;
}

.d-earthquake-two-block-content {
  width: 80%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 1px;
  margin-top: 6px;
}

.damage-degree {
	color: #16abaa;
	margin-left: 4px;
}

.d-earthquake-top-wrap .ui-jqgrid table {
	border-collapse: collapse;
}

.d-earthquake-top-wrap .ui-jqgrid {
	float: left;
	margin: 13px;
	border: none;
	border-radius: 0;
	margin-top: 0;
}

.d-earthquake-top-wrap .ui-jqgrid th {
	height: 22px;
	border-top: none !important;
	border-right: 1px solid #bec3c6 !important;
	border-bottom: none !important;
}

.d-earthquake-top-wrap .ui-jqgrid-hdiv {
	background-color: #ebeced;
	border-top: 1px solid #bec3c6 !important;
	border-bottom: 1px solid #bec3c6 !important;
}

.d-earthquake-top-wrap .ui-jqgrid .ui-jqgrid-bdiv td {
	border: 1px solid #d0d0d0 !important;
	height: 24px;
	font-size: 12px;
}
.d-earthquake-top-wrap .ui-jqgrid .ui-jqgrid-sortable.ui-th-div {
	width: 100%;
	font-size: 12px;
}

.d-earthquake-top-wrap .ui-jqgrid .ui-jqgrid-bdiv td:first-child {
	border-left: none !important;
}

.d-earthquake-top-wrap .ui-jqgrid-bdiv table tr:first-child td {
	border-top: none !important;
	border-bottom: none !important;
}

.d-earthquake-top-wrap .ui-jqgrid-bdiv table tr:nth-child(2) td {
	border-top: none !important;
}

.d-earthquake-top-wrap .ui-jqgrid-pager {
	border-top: 1px solid #bec3c6;
	border-bottom: 2px solid #bec3c6;
	background-color: #ebeced;
}

/* .d-earthquake-top-wrap .ui-jqgrid-bdiv table tr:nth-child(2n-1) td{ */
/* 	background-color: #f9f9f9 !important; */
/* } */
.d-earthquake-top-wrap tr.active {
	background-color: #eeeeee;
}

.d-earthquake-top-wrap tr.success td {
	background-color: #d1f0ed !important;
	color: #108073 !important;
}

/* earthquakeMain - 실시간 계측 정보에 들어가는 부분 */

.d-earthquake-wrap-contents {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  float: left;
}

.d-earthquake-wrap-half-contents {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
/*   padding: 10px 0; */
  width: 50%;
  float: left;
}

.d-earthquake-mmiValue {
  width: 114px !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  margin-right: -1px;
  background-color: #fff;
  font-size:42px;
  border: 1px solid #bec3c6;
  align-items: center;
  height: 122px;
  border-radius: 6px;
  font-family: NotoSans-Bold;
}

.d-earthquake-mmi-info-contents {
  width: calc(100% - 130px) !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  height: 121px;
  margin-left: 7px;
}

.d-earthquake-table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

.d-earthquake-table th {
  background: #ebeced;
  border: 1px solid #bec3c6;
  width: 24%;
  font-size: 13px;
}

.d-earthquake-table td {
  border: 1px solid #bec3c6;
  text-align: center;
  height: 27px;
}

#earthquakeTable th {
	width: 16.666666666666666666666667%;
}

/* ************************************* */

.d-mmiIcon {
	font-family: Dotum,'돋움';
	font-style: normal;
	line-height: 28px;
	font-size: 12px;
	font-weight: bold;
}

.d-mmiInfoBox{
  margin: 0px auto; 
  width: 74px; 
  text-align: center;
  padding: 3px 5px;
  border-radius: 0;
  cursor: pointer;
  display: inline-block;
  position: relative;
  margin-bottom: 1px;
}

#earthquakeDetailContents .d-mmiInfoBox {
	padding: 1px 5px;
}

.d-mmiInfoBox:first-child {
	border-radius: 3px;
}

.d-mmiInfoBox:last-child {
	border-radius: 0 0 5px 0;
}

.d-mmiInfoBox .d-mmiInfo{
  display: none;
  background: #fff;
  border: 1px solid #bec3c6;
  border-radius: 3px;
  font-size: 12px;
  text-align: left;
  padding: 5px 10px;
  position: absolute;
  left: 2px;
  bottom: 50px;
  width: 250px;
  z-index: 10;
}

.d-mmiInfoBox:hover .d-mmiInfo, 
.d-mmiInfoBox:focus .d-mmiInfo {
  display: inline-block;
}

.d-mmiInfoBox .d-mmiInfo-2{
  display: none;
  background: #fff;
  border: 1px solid #bec3c6;
  border-radius: 3px;
  font-size: 12px;
  text-align: left;
  padding: 5px 10px;
  position: absolute;
  left: -245px;
  bottom: 50px;
  width: 300px;
  z-index: 10;
  color: #333 !important;
}

.d-mmiInfoBox:hover .d-mmiInfo-2, 
.d-mmiInfoBox:focus .d-mmiInfo-2 {
  display: inline-block;
}

/* jqgrid custom pager */

.customPaginateBar .fa{
 font-size: 10px;
 text-align: center;
 opacity: 0.2;
 padding: 5px;
}

.customPaginateBar .faPointer{
 cursor: pointer;
 opacity: 1;
 color: #333;
 font-size: 10px;
}

.customPaginateBar .faPointer:hover{
 opacity: 0.2;
}
 
.customPageNumberBtn{
 margin-left: 5px;
 margin-right: 5px;
 text-align: center;
 padding-top: 4px;
}

.customPageNumberBtn a{ 
 text-decoration: none;
 color: #333;
}

.customPageNumberBtn .pageNumBtnSel{ 
 color: rgba(17, 133, 150, 1);
}

.customPageMoveBtn{
 text-align: center;
}
 
.customPaginateBar {
 border: 1px solid #D5D5D5;
 background-color : rgba(234, 235, 236, 1);
 background-position-y : 50%;
 margin-top: -1px;
 height: 25px;
 position: relative;
 width: 100%;
 float: left;
 border-bottom: 1px solid #bec3c6;
 font-size: 12px;
 border-radius: 0 0 3px 3px;
}

.d-earthquake-top-wrap .customPaginateBar {
	width: 756px !important;
}

.customPaginateBar table{
  line-height: 15px;
}

.s-main-tit-wrap i.btn {
  top: 8px;
  right: 12px;
  color: #7c7c7c;
  font-size: 16px;
  position: absolute;
  cursor: pointer;
  background-color: #ebeced;
  border-radius: 3px;
  width: 30px;
  text-align: center;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
}

.s-main-tit-wrap i.btn:hover {
	background-color: #bcbdbe;
}

.fas.fa-check-circle {
  top: 10px;
  right: 16px;
  color: rgba(124, 124, 124, 0.4);
  font-size: 24px;
  position: absolute;
  cursor: pointer;
}

.fas.fa-check-circle.checked {
  top: 10px;
  right: 16px;
  color: rgba(124, 124, 124, 1);
  font-size: 24px;
  position: absolute;
  cursor: pointer;
}


.fas.fa-check-square {
  top: 10px;
  right: 38px;
  color: rgba(255, 255, 255, 0.2);
  font-size: 24px;
  position: absolute;
  cursor: pointer;
}

.fas.fa-check-square.checked {
  top: 10px;
  right: 38px;
  color: rgba(255, 255, 255, 1);
  font-size: 24px;
  position: absolute;
  cursor: pointer;
}

.d-siteTableContent {
  position: absolute;
  border-radius: 5px;
  width: 144px;
  overflow: hidden;
}

.d-siteTableContent:nth-child(4) {
	top: 440px !important;
	left: 15px !important;
}

.d-siteTableContent:nth-child(3) {
	top: 520px !important;
	left: 15px !important;
}

.d-siteTableContent:first-child {
	top: 600px !important;
	left: 15px !important;
}

.d-siteTableContent:nth-child(2) {
	top: 680px !important;
	left: 15px !important;
}



.d-siteTableTitle {
  color: #fff;
  background-color: rgba(22, 171, 170,.6);
  padding: 3px 6px;
  font-size: 13px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  float: left;
  cursor: pointer;
  font-weight: bold;
}

.d-siteTable {
  width: 100%;
  display: table;
  border:2px solid rgba(22, 171, 170,.6);
  border-radius: 0 3px 3px 3px;
  background-color: rgba(255,255,255,.35);
  padding: 4px;
  cursor: pointer;
}

.d-siteRow {
  display: table-row;
  position: relative;
  padding: 5px;
}

/* .d-siteRow:first-child { */
/*   background-color: rgba(0, 0, 0, 0.25); */
/* } */

/* .d-siteRow:last-child { */
/*   background-color: rgba(57, 70, 78, 0.25); */
/* } */

.d-siteCell {
  display: table-cell;
  padding: 2px;
  font-size: 13px;
}

.d-siteCell:first-child {
  color: black;
}

.d-siteTableContent.focus .d-siteTableTitle{
	background-color: rgba(22, 171, 170,1);
}

.d-siteTableContent.focus .d-siteTable {
	border:2px solid rgba(22, 171, 170,1);
	background-color: rgba(255,255,255,1);
}

.s-earthquake-line {
	width:176px;
	height: 2px;
	background-color: rgba(22, 171, 170,1);
	position: absolute;
}

.s-earthquake-line:after {
	content:"";
	width:6px;
	height:6px;
	background-color: rgba(22, 171, 170,1);
	position: absolute;
	right:0;
	top:-2px;
	z-index: 1;
	border-radius:50%;
}

.s-earthquake-line.kh {
	top:504px;
	left:156px;
	transform: rotate(14deg);
	width: 154px;
}

.s-earthquake-line.hs {
	top:544px;
	left:154px;
	transform: rotate(342deg);
	width: 142px;
}

.s-earthquake-line.pt {
	top: 593px;
	left: 141px;
	transform: rotate(325deg);
	width: 182px;
}

.s-earthquake-line.ca {
	top:642px;
	left:120px;
	transform: rotate(312deg);
	width: 230px;
}

/* 2018.03.26 minjungSim 지진계 스타일 추가 */
/******************************************************************************************************************************************************************/

/** JaeHyeon 가스감지기 모니터링 Trend 조회 css 추가 */

.d-trendTableContent {
/*   position: absolute; */
  border: 1px solid #bec3c6;
  border-radius: 3px;
  background-color: #fcdbda;
  width: 154px;
  height : 30px;
  font-size: 14px !important;
  line-height: 28px;
  cursor: default;
/*   top: 10px; */
}

.d-trendTableContent .s-grade-box {
	color: #fff;
	background-color: #fcdbda;
	width:22px;
	height: 22px;
	line-height: 25px;
	margin-top: 3px;
	margin-left: 3px;
	float: left;
	font-weight: bold;
}

.d-trendTableContent .s-gasname {
	font-family: NotoSans-Bold;
	float: left;
	padding: 0 0 0 6px;
	font-size: 15px;
	line-height: 28px;
	width: 41px;
	text-align: left;
}

.d-trendTableContent .s-gasval {
	float: left;
	width: 56px;
	text-align: right;
	margin-right: 2px;
	line-height: 32px;
	font-weight: bold;
	white-space: nowrap;
}

.d-trendTableContent.A {
	background-color: #fcdbda;
	border: 1px solid #F04B46;
}

.d-trendTableContent.A .s-grade-box {
	background-color: #f04b46;
}

.d-trendTableContent.B {
	background-color: #feefd9;
	border: 1px solid #e39e3b;
}

.d-trendTableContent.B .s-grade-box {
	background-color: #fcaf41;
}

.d-trendTableContent.C {
	background-color: #d7eff6;
	border: 1px solid #38AFD3;
}

.d-trendTableContent.C .s-grade-box {
	background-color: #2184da;
}

.d-trendTableContent .s-chart {
	float: left;
	width: 22px;
	height: 22px;
	background-color: #3C454D;
	margin-top: 3px;
	margin-left: 3px;
	position: relative;
	cursor: pointer;
}

.d-trendTableContent .s-chart i {
	color: #fff;
	position: absolute;
	left: 4px;
	top: 5px;
}

/** FIXME : 에스원 신규추가 */
.area-function-btn-group {
	transition-property: background, background-color, border-color, color, box-shadow, top, left, right, bottom;
	transition-duration: 100ms, 100ms, 100ms, 100ms, 100ms, 200ms, 200ms, 200ms, 200ms;
	transition-timing-function: linear, linear, linear, linear, linear, ease, ease, ease, ease;
	width: calc(100% - 400px);
	height: 100px;
	position: absolute;
	bottom: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
}

.area-function-btn {
	box-shadow: 0px 0px 16px rgba(115, 115, 115, 0.75);
	cursor: pointer;
	font-weight: bold;
	font-size: 19px;
	width: 38px;
	height: 38px;
	background: rgba(42, 148, 219, 1);
	border-radius: 32px;
	border: 2px solid rgba(33, 131, 197, 1);
	text-align: center;
	line-height: 38px;
	z-index: 1;
	margin: 0 20px;
	pointer-events: auto;
}

.display-none {
    display: none;
}

/* 버튼 색 */
.red-btn {
	background: #db3b21;
	color: #fff;
	border: 1px solid #c0341d;
}

.red-btn i {
	color: #fff;
}

.red-btn:hover {
	background: #c0341d;
	border: 1px solid #a62d19;
}

.red-btn-o {
	background: #ffffff;
	color: #db3b21;
	border: 1px solid #db3b21;
}

.red-btn-o i {
	color: #db3b21;
}

.red-btn-o:hover {
	background: #db3b21;
	color: #fff;
	border: 1px solid #c0341d;
}

.red-btn-o:hover i {
	color: #fff;
}

.green-btn {
	background: #1aaa55;
	color: #fff;
	border: 1px solid #168f48;
}

.green-btn i {
	color: #fff;
}

.green-btn:hover {
	background: #168f48;
	border: 1px solid #12753a;
}

.green-btn-o {
	background: #ffffff;
	color: #1aaa55;
	border: 1px solid #1aaa55;
}

.green-btn-o i {
	color: #1aaa55;
}

.green-btn-o:hover {
	background: #1aaa55;
	color: #fff;
	border: 1px solid #168f48;
}

.green-btn-o:hover i {
	color: #fff;
}

.blue-btn {
	background: #2a94db;
	color: #fff;
	border-width: 1px;
	border-style: solid;
	border-color: #2183c5;
}

.blue-btn i {
	color: #fff;
}

.blue-btn:hover {
	background: #248cd2;
	border-color: #207ebc #207ebc #13496e;
}

.blue-btn-o {
	background: #ffffff;
	color: #2a94db;
	border: 1px solid #2a94db;
}

.blue-btn-o i {
	color: #2a94db;
}

.blue-btn-o:hover {
	background: #2a94db;
	color: #fff;
	border-color: #207ebc #207ebc #13496e;
}

.blue-btn-o:hover i {
	color: #fff;
}

.yellow-btn {
	background: #fc9403;
	color: #fff;
	border: 1px solid #de7e00;
}

.yellow-btn i {
	color: #fff;
}

.yellow-btn:hover {
	background: #de7e00;
	border-color: #c26700;
}

.yellow-btn-o {
	background: #ffffff;
	color: #fc9403;
	border: 1px solid #fc9403;
}

.yellow-btn-o i {
	color: #fc9403;
}

.yellow-btn-o:hover {
	background: #fc9403;
	color: #fff;
	border: 1px solid #de7e00;
}

.yellow-btn-o:hover i {
	color: #fff;
}

.draw_list_table {
	border-collapse: collapse;
	font-size: 12px;
	width: 100%;
	color: #b1b5b8;
}

.draw_list_table i {
	text-align: center;
	border-radius: 3px;
	font-size: 24px;
	color: rgba(0, 0, 0, .7);
	background: rgba(0, 0, 0, .5);
	position: relative;
	overflow: hidden;
	float: left;
	width: 24px;
	height: 24px;
	line-height: 24px;
	z-index: 2000;
	margin-left: 18px;
}

.draw_list_table tr {
	cursor: pointer;
	border-top: 1px solid #30373e;
	border-bottom: 1px solid #30373e;
}

.draw_list_table tr:hover td {
	background: rgba(255, 255, 255, 0.1);
}

.draw_list_table .active td {
	background: #24292e !important;
	color: #fff;
}

.draw_list_table td {
	line-height: 38px;
}

.draw_list_table td:first-child {
	text-align: center;
}

.draw_list_table .edit_btn {
	margin: 0 0 0 3px;
	background: none;
	font-size: 17px;
	color: #c4c4c4;
	margin-left: 56px;
}

.draw_list_table .name-input {
	width: 150px;
	padding: 3px;
	margin-top: 8px;
	border-radius: 3px;
}