@charset "utf-8";

@import url("skin/default.css");
@import url("common.css");

body {
	background: #f6f6f6;
}

.login-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-container .login-wrap {
	width: max-content;
	height: 376px;
}

.login-container .login-wrap h2 {
	font-size: 40px;
	color: var(--dark-color);
	margin-bottom: 55px;
	text-align: center;
	width: 100%;
}

.login-container .login-wrap .form-group .input-login {
	width: 494px;
	height: 56px;
	padding: 12px 20px;
}

.login-container .login-wrap .form-group + .btn {
	margin-top: 28px;
}

.login-container .login-wrap .btn {
	width: 494px;
	height: 56px;
	font-size: 18px;
}

.wrapper {
	display: flex;
	min-width: 1920px;
}

.wrapper .content-wrapper {
	float: left;
	height: 100vh;
	background: #F6F6F6;
	flex-grow: 1;
}

.wrapper .main-header {
	position: relative;
	background: #FFFFFF;
	border: 0;
	padding: 0px;
	height: 112px;
    align-items: flex-start;
}

.wrapper .navbar-header {
	width: 320px;
	height: 78px;
	padding: 16px 20px 10px;
	background: #ffffff;
	margin-bottom: 16px;
}

.wrapper .main-header .menubar-wrapper {
	width: 100%;
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 47px 7px;
    background: var(--main-color);
}

.wrapper .main-header .menubar-wrapper .menu-bar {
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.wrapper .main-header .menubar-wrapper .navbar-logout {
	position: relative;
	width: 195px;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	padding-left: 31px;
}

.btn-logout {
	background-repeat: no-repeat;
	background-position: left;
	background-size: 32px 32px;
	font-size: 16px;
	color: #ffffff;
	width: 164px;
	height: 42px;
	text-align: left;
	padding-left: 46px;
}

.btn-logout-01 { background-image: url("../images/icon_login1.png"); }
.btn-logout-02 { background-image: url("../images/icon_login2.png"); }
.btn-logout-03 { background-image: url("../images/icon_login3.png"); }
.btn-logout-04 { background-image: url("../images/icon_login4.png"); }

.wrapper .main-header .menubar-wrapper .navbar-logout .logout-menu {
	position: absolute;
	top: 42px;
	left: 77px;
	padding: 14px 10px;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	background-color: #fff;
	display: none;
}

.wrapper .main-header .menubar-wrapper .navbar-logout .logout-menu li {
	min-width: 113px;
	height: 20px;
	color: var(--grey-dark-color);
	cursor: pointer;
}

.wrapper .main-header .menubar-wrapper .language-wrap {
	display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px;
    gap: 35px;
    position: relative;
}

.btn-lang {
	width: 82px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: right;
	background-size: 32px auto;
	background-image: url("../images/icon_btn_arrow_down.png");
	font-size: 18px;
	color: #ffffff;
	padding-right: 32px;
}

.btn-lang.on { transform:rotate(90deg); }

.btn-bell {
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px auto;
	background-image: url("../images/icon_bell.png");
}

.btn-bell.on { background-image: url("../images/icon_bell_on.png"); }

.lang-menu {
	position: absolute;
	top: 42px;
	left: 0px;
	width: 94px;
	padding: 10px 0px;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	background-color: #fff;
	display: none;
}

.lang-menu li {
	width: 100%;
	height: 28px;
	color: var(--grey-dark-color);
	cursor: pointer;
	padding: 4px 10px;
}

.navbar-nav { gap: 38px; }
.navbar-nav > li { position: relative; }

.navbar-nav > li .sub-menu-list {
	position: absolute;
	top: 57px;
	left: 0px;
	width: max-content;
    height: 46px;
    padding: 10px 0px;
    display: none;
}

.navbar-nav > li.on .sub-menu-list { display: block; }

.navbar-nav > li .sub-menu-list > li {
	font-size: 16px;
	color: var(--grey1);
	cursor: pointer;
	width: max-content;
	float: left;
	display: flex;
	align-items: center;
}

.navbar-nav > li .sub-menu-list > li + li {
	margin-left: 25px;
	border-left: 1px solid var(--grey3);
	padding-left: 25px;
}

.navbar-nav > li.on .sub-menu-list > li.on {
	font-weight: 700;
	color: var(--main-color);
}

.btn-navi-menu {
	width: 50px;
	height: 50px;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 38px 38px;
	border-radius: 5px;
}

.btn-navi-menu:hover { background-color: rgba(255, 255, 255, 0.1); }
.navbar-nav > li.on .btn-navi-menu { background-color: rgba(0, 0, 0, 0.2); }
.btn-navi-menu.btn-menu-1 { background-image: url("../images/icon_menu_home.png"); }
.navbar-nav > li.on .btn-navi-menu.btn-menu-1 { background-image: url("../images/icon_menu_home_on.png"); }
.btn-navi-menu.btn-menu-2 { background-image: url("../images/icon_menu_device.png"); }
.navbar-nav > li.on .btn-menu-2 { background-image: url("../images/icon_menu_device_on.png"); }
.btn-navi-menu.btn-menu-3 { background-image: url("../images/icon_menu_contents.png"); }
.navbar-nav > li.on .btn-menu-3 { background-image: url("../images/icon_menu_contents_on.png"); }
.btn-navi-menu.btn-menu-4 { background-image: url("../images/icon_menu_schedule.png"); }
.navbar-nav > li.on .btn-menu-4 { background-image: url("../images/icon_menu_schedule_on.png"); }
.btn-navi-menu.btn-menu-5 { background-image: url("../images/icon_menu_report.png"); }
.navbar-nav > li.on .btn-menu-5 { background-image: url("../images/icon_menu_report_on.png"); }
.btn-navi-menu.btn-menu-6 { background-image: url("../images/icon_menu_setting.png"); }
.navbar-nav > li.on .btn-menu-6 { background-image: url("../images/icon_menu_setting_on.png"); }

.tree-header {
	width: 100%;
	padding: 16px 16px 18px 16px;
}
.tree-header .search-group { margin-top: 12px; }

.search-group {
	height: 34px;
	border: 2px solid var(--grey3);
	background: #ffffff;
	border-radius: 5px;
	padding: 5px 10px;
	display: flex;
    align-items: center;
    justify-content: center;
}

.search-group .search-input {
	border: none;
	padding: 0px;
	height: 24px;
	flex-grow: 1;
}

.search-group .search-input:focus { border: none; }

.search-group .btn-search {
	width: 26px;
	height: 26px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 26px 26px;
	background-image: url("../images/icon_search.png");
}

.main-sector { padding: 20px 32px 17px 32px; }

.page-navi {
	width: 100%;
	height: 30px;
	background: #ffffff;
	border-radius: 5px;
	font-size: 16px;
	color: var(--grey1);
	padding: 3px 12px;
	margin-bottom: 20px;
}

.page-navi li {
	float: left;
	display: flex;
    align-items: center;
    height: 24px;
    cursor: pointer;
}

.page-navi li:nth-child(n+2)::before {
	content: '';
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
	background-image: url("../images/icon_group_navi_arrow.png");
}

.page-navi li:last-child {
	font-size: 16px;
	font-weight: 700;
	color: var(--grey-dark-color);
}

.tab-list {
	margin-top: 20px;
	width: 1040px;
	height: 61px;
	border-radius: 10px 10px 0px 0px;
	background: #ffffff;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.tab-list li {
	width: 260px;
	height: 61px;
	background: #ffffff;
	float: left;
	padding: 8px 18px;
	display: flex;
    justify-content: center;
    cursor: pointer;
}

.tab-list li span {
	font-weight: 700;
	font-size: 18px;
	color: var(--grey1);
}
.tab-list li span:first-child { flex-grow: 1; }
.tab-list li span:last-child { color: var(--grey-dark-color); }
.tab-list li.on { background: var(--main-color); }
.tab-list li.on span { color: #ffffff; }
.tab-list li + li { border-left: 1px solid var(--grey3); }
.tab-list li:first-child { border-radius: 10px 0px 0px 0px; }
.tab-list li:last-child { border-radius: 0px 10px 0px 0px; }

.grid-area {
	position: relative;
	width: 100%;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
	margin-top: -9px;
	padding: 18px 28px 40px 28px;
}

.tb-cms-dashboard-list tr { cursor: default; }
.tb-cms-dashboard-list th:nth-child(1),
.tb-cms-dashboard-list td:nth-child(1) { width: 23px; }
.tb-cms-dashboard-list th:nth-child(2),
.tb-cms-dashboard-list td:nth-child(2) { width: 34px; line-height: 10px; }
.tb-cms-dashboard-list th:nth-child(3),
.tb-cms-dashboard-list td:nth-child(3) { width: 110px; }
.tb-cms-dashboard-list th:nth-child(4),
.tb-cms-dashboard-list td:nth-child(4) { width: 110px; }
.tb-cms-dashboard-list th:nth-child(5),
.tb-cms-dashboard-list td:nth-child(5) { width: 82px; }
.tb-cms-dashboard-list th:nth-child(6),
.tb-cms-dashboard-list td:nth-child(6) { width: 166px; }
.en .tb-cms-dashboard-list th:nth-child(7) { line-height: 10px; font-size: 12px; }
.tb-cms-dashboard-list th:nth-child(7),
.tb-cms-dashboard-list td:nth-child(7) { width: 106px; }
.tb-cms-dashboard-list th:nth-child(8),
.tb-cms-dashboard-list td:nth-child(8) { width: 106px; }
.en .tb-cms-dashboard-list th:nth-child(9) { line-height: 10px; font-size: 12px; }
.tb-cms-dashboard-list th:nth-child(9),
.tb-cms-dashboard-list td:nth-child(9) { width: 119px; }
.tb-cms-dashboard-list th:nth-child(10),
.tb-cms-dashboard-list td:nth-child(10) { width: 77px; }
.tb-cms-dashboard-list th:nth-child(11),
.tb-cms-dashboard-list td:nth-child(11) { width: 48px; }
.tb-cms-dashboard-list th:nth-child(12),
.tb-cms-dashboard-list td:nth-child(12) { width: 91px; }
.tb-cms-dashboard-list th:nth-child(13),
.tb-cms-dashboard-list td:nth-child(13) { width: 70px; }

.tb-ai-dashboard-list tr { cursor: default; }
.tb-ai-dashboard-list th:nth-child(1),
.tb-ai-dashboard-list td:nth-child(1) { width: 23px; }
.tb-ai-dashboard-list th:nth-child(2),
.tb-ai-dashboard-list td:nth-child(2) { width: 34px; line-height: 10px; }
.tb-ai-dashboard-list th:nth-child(3),
.tb-ai-dashboard-list td:nth-child(3) { width: 155px; }
.tb-ai-dashboard-list th:nth-child(4),
.tb-ai-dashboard-list td:nth-child(4) { width: 166px; }
.tb-ai-dashboard-list th:nth-child(5),
.tb-ai-dashboard-list td:nth-child(5) { width: 82px; }
.tb-ai-dashboard-list th:nth-child(6),
.tb-ai-dashboard-list td:nth-child(6) { width: 166px; }
.tb-ai-dashboard-list th:nth-child(7),
.tb-ai-dashboard-list td:nth-child(7) { width: 126px; }
.tb-ai-dashboard-list th:nth-child(8),
.tb-ai-dashboard-list td:nth-child(8) { width: 126px; }
.tb-ai-dashboard-list th:nth-child(9),
.tb-ai-dashboard-list td:nth-child(9) { width: 168px; }
.tb-ai-dashboard-list th:nth-child(10),
.tb-ai-dashboard-list td:nth-child(10) { width: 174px; }

.tb-iot-dashboard-list tr { cursor: default; }
.tb-iot-dashboard-list th:nth-child(1),
.tb-iot-dashboard-list td:nth-child(1) { width: 23px; }
.tb-iot-dashboard-list th:nth-child(2),
.tb-iot-dashboard-list td:nth-child(2) { width: 33px; line-height: 10px; }
.tb-iot-dashboard-list th:nth-child(3),
.tb-iot-dashboard-list td:nth-child(3) { width: 116px; }
.tb-iot-dashboard-list th:nth-child(4),
.tb-iot-dashboard-list td:nth-child(4) { width: 116px; }
.tb-iot-dashboard-list th:nth-child(5),
.tb-iot-dashboard-list td:nth-child(5) { width: 81px; }
.tb-iot-dashboard-list th:nth-child(6),
.tb-iot-dashboard-list td:nth-child(6) { width: 165px; }
.tb-iot-dashboard-list th:nth-child(7),
.tb-iot-dashboard-list td:nth-child(7) { width: 125px; }
.tb-iot-dashboard-list th:nth-child(8),
.tb-iot-dashboard-list td:nth-child(8) { width: 125px; }
.tb-iot-dashboard-list th:nth-child(9),
.tb-iot-dashboard-list td:nth-child(9) { width: 167px; }
.tb-iot-dashboard-list th:nth-child(10),
.tb-iot-dashboard-list td:nth-child(10) { width: 176px; }
.tb-iot-dashboard-list th:nth-child(11),
.tb-iot-dashboard-list td:nth-child(11) { width: 69px; }

.tb-device-list th:nth-child(1),
.tb-device-list td:nth-child(1) { width: 20px; }
.tb-device-list th:nth-child(2),
.tb-device-list td:nth-child(2) { width: 23px; }
.tb-device-list th:nth-child(3),
.tb-device-list td:nth-child(3) { width: 34px; line-height: 10px; }
.tb-device-list th:nth-child(4),
.tb-device-list td:nth-child(4) { width: 58px; }
.tb-device-list th:nth-child(5),
.tb-device-list td:nth-child(5) { width: 101px; }
.tb-device-list th:nth-child(6),
.tb-device-list td:nth-child(6) { width: 101px; }
.tb-device-list th:nth-child(7),
.tb-device-list td:nth-child(7) { width: 57px; }
.tb-device-list th:nth-child(8),
.tb-device-list td:nth-child(8) { width: 128px; }
.en .tb-device-list th:nth-child(9) {font-size: 12px; line-height:10px;}
.tb-device-list th:nth-child(9),
.tb-device-list td:nth-child(9) { width: 48px; }
.tb-device-list th:nth-child(10),
.tb-device-list td:nth-child(10) { width: 73px; }
.tb-device-list th:nth-child(11),
.tb-device-list td:nth-child(11) { width: 106px; }
.en .tb-device-list th:nth-child(12) {font-size: 12px; line-height:10px;}
.tb-device-list th:nth-child(12),
.tb-device-list td:nth-child(12) { width: 121px; }
.tb-device-list th:nth-child(13),
.tb-device-list td:nth-child(13) { width: 44px; }
.tb-device-list th:nth-child(14),
.tb-device-list td:nth-child(14) { width: 48px; }
.tb-device-list th:nth-child(15),
.tb-device-list td:nth-child(15) { width: 47px; }
.tb-device-list th:nth-child(16),
.tb-device-list td:nth-child(16) { width: 72px }

.tb-equipment-list th:nth-child(1),
.tb-equipment-list td:nth-child(1) { width: 23px; }
.tb-equipment-list th:nth-child(2),
.tb-equipment-list td:nth-child(2) { width: 33px; line-height: 10px; }
.tb-equipment-list th:nth-child(3),
.tb-equipment-list td:nth-child(3) { width: 52px; }
.tb-equipment-list th:nth-child(4),
.tb-equipment-list td:nth-child(4) { width: 135px; }
.tb-equipment-list th:nth-child(5),
.tb-equipment-list td:nth-child(5) { width: 135px; }
.tb-equipment-list th:nth-child(6),
.tb-equipment-list td:nth-child(6) { width: 58px; }
.tb-equipment-list th:nth-child(7),
.tb-equipment-list td:nth-child(7) { width: 56px; }
.tb-equipment-list th:nth-child(8),
.tb-equipment-list td:nth-child(8) { width: 162px; }
.tb-equipment-list th:nth-child(9),
.tb-equipment-list td:nth-child(9) { width: 109px; }
.tb-equipment-list th:nth-child(10),
.tb-equipment-list td:nth-child(10) { width: 78px; }
.tb-equipment-list th:nth-child(11),
.tb-equipment-list td:nth-child(11) { width: 212px; }
.tb-equipment-list th:nth-child(12),
.tb-equipment-list td:nth-child(12) { width: 122px; }

.tb-device-schedule-list th:nth-child(1),
.tb-device-schedule-list td:nth-child(1) { width: 23px; }
.tb-device-schedule-list th:nth-child(2),
.tb-device-schedule-list td:nth-child(2) { width: 71px; }
.tb-device-schedule-list th:nth-child(3),
.tb-device-schedule-list td:nth-child(3) { width: 71px; }
.tb-device-schedule-list th:nth-child(4),
.tb-device-schedule-list td:nth-child(4) { width: 286px; }
.tb-device-schedule-list th:nth-child(5),
.tb-device-schedule-list td:nth-child(5) { width: 113px; }
.tb-device-schedule-list th:nth-child(6),
.tb-device-schedule-list td:nth-child(6) { width: 113px; }
.tb-device-schedule-list th:nth-child(7),
.tb-device-schedule-list td:nth-child(7) { width: 255px; }
.tb-device-schedule-list th:nth-child(8),
.tb-device-schedule-list td:nth-child(8) { width: 147px; }
.tb-device-schedule-list th:nth-child(9),
.tb-device-schedule-list td:nth-child(9) { width: 169px; }

.contentsschedulefrm .tb-device-schedule-list th:nth-child(1),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(1) { width: 23px; }
.contentsschedulefrm .tb-device-schedule-list th:nth-child(2),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(2) { width: 71px; }
.contentsschedulefrm .tb-device-schedule-list th:nth-child(3),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(3) { width: 71px; }
.contentsschedulefrm .tb-device-schedule-list th:nth-child(4),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(4) { width: 122px; }
.contentsschedulefrm .tb-device-schedule-list th:nth-child(5),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(5) { width: 122px; }
.contentsschedulefrm .tb-device-schedule-list th:nth-child(6),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(6) { width: 185px; }
.contentsschedulefrm .tb-device-schedule-list th:nth-child(7),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(7) { width: 113px; }
.contentsschedulefrm .tb-device-schedule-list th:nth-child(8),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(8) { width: 113px; }
.contentsschedulefrm .tb-device-schedule-list th:nth-child(9),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(9) { width: 154px; }
.contentsschedulefrm .tb-device-schedule-list th:nth-child(10),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(10) { width: 73px; }
.contentsschedulefrm .tb-device-schedule-list th:nth-child(11),
.contentsschedulefrm .tb-device-schedule-list td:nth-child(11) { width: 141px; }

.tb-content-list th:nth-child(1),
.tb-content-list td:nth-child(1) { width: 20px; }
.tb-content-list th:nth-child(2),
.tb-content-list td:nth-child(2) { width: 23px; }
.tb-content-list th:nth-child(3),
.tb-content-list td:nth-child(3) { width: 74px; }
.tb-content-list th:nth-child(4),
.tb-content-list td:nth-child(4) { width: 72px; }
.tb-content-list th:nth-child(5),
.tb-content-list td:nth-child(5) { width: 287px; max-width: 287px; }
.tb-content-list th:nth-child(6),
.tb-content-list td:nth-child(6) { width: 110px; }

#groupDiv .tb-content-list th:nth-child(7) { font-size: 13px; }
.tb-content-list th:nth-child(7),
.tb-content-list td:nth-child(7) { width: 134px; }
.tb-content-list th:nth-child(8),
.tb-content-list td:nth-child(8) { width: 152px; }
.tb-content-list th:nth-child(9),
.tb-content-list td:nth-child(9) { width: 112px; }
.tb-content-list th:nth-child(10),
.tb-content-list td:nth-child(10) { width: 150px; }
.tb-content-list th:nth-child(11),
.tb-content-list td:nth-child(11) { width: 72px; }

.tb-user-list th:nth-child(1),
.tb-user-list td:nth-child(1) { width: 20px; }
.tb-user-list th:nth-child(2),
.tb-user-list td:nth-child(2) { width: 23px; }
.tb-user-list th:nth-child(3),
.tb-user-list td:nth-child(3) { width: 142px; }
.tb-user-list th:nth-child(4),
.tb-user-list td:nth-child(4) { width: 152px; }
.tb-user-list th:nth-child(5),
.tb-user-list td:nth-child(5) { width: 209px; }
.tb-user-list th:nth-child(6),
.tb-user-list td:nth-child(6) { width: 150px; }
.tb-user-list th:nth-child(7),
.tb-user-list td:nth-child(7) { width: 507px; }
.tb-user-list th:nth-child(8),
.tb-user-list td:nth-child(8) { width: 78px; }

.tb-schedule-list th:nth-child(1),
.tb-schedule-list td:nth-child(1) { width: 20px; }
.tb-schedule-list th:nth-child(2),
.tb-schedule-list td:nth-child(2) { width: 23px; }
.tb-schedule-list th:nth-child(3),
.tb-schedule-list td:nth-child(3) { width: 50px; }
.tb-schedule-list th:nth-child(4),
.tb-schedule-list td:nth-child(4) { width: 72px; }
.tb-schedule-list th:nth-child(5),
.tb-schedule-list td:nth-child(5) { width: 72px; }
.tb-schedule-list th:nth-child(6),
.tb-schedule-list td:nth-child(6) { width: 101px; }
.tb-schedule-list th:nth-child(7),
.tb-schedule-list td:nth-child(7) { width: 101px; }
.tb-schedule-list th:nth-child(8),
.tb-schedule-list td:nth-child(8) { width: 113px; }
.tb-schedule-list th:nth-child(9),
.tb-schedule-list td:nth-child(9) { width: 74px; }
.tb-schedule-list th:nth-child(10),
.tb-schedule-list td:nth-child(10) { width: 74px; }
.tb-schedule-list th:nth-child(11),
.tb-schedule-list td:nth-child(11) { width: 190px; }
.tb-schedule-list th:nth-child(12),
.tb-schedule-list td:nth-child(12) { width: 105px; }
.tb-schedule-list th:nth-child(13),
.tb-schedule-list td:nth-child(13) { width: 160px; }

.tb-schedule-order th:nth-child(1),
.tb-schedule-order td:nth-child(1) { width: 29px; }
.tb-schedule-order th:nth-child(2),
.tb-schedule-order td:nth-child(2) { width: 72px; }
.tb-schedule-order th:nth-child(3),
.tb-schedule-order td:nth-child(3) { width: 72px; }
.tb-schedule-order th:nth-child(4),
.tb-schedule-order td:nth-child(4) { width: 101px; }
.tb-schedule-order th:nth-child(5),
.tb-schedule-order td:nth-child(5) { width: 140px; }
.tb-schedule-order th:nth-child(6),
.tb-schedule-order td:nth-child(6) { width: 113px; }
.tb-schedule-order th:nth-child(7),
.tb-schedule-order td:nth-child(7) { width: 74px; }
.tb-schedule-order th:nth-child(8),
.tb-schedule-order td:nth-child(8) { width: 74px; }
.tb-schedule-order th:nth-child(9),
.tb-schedule-order td:nth-child(9) { width: 256px; }
.tb-schedule-order th:nth-child(10),
.tb-schedule-order td:nth-child(10) { width: 105px; }
.tb-schedule-order th:nth-child(11),
.tb-schedule-order td:nth-child(11) { width: 170px; }
.tb-schedule-order tbody tr { cursor: move; }

.tb-schedule-cont-list { margin-top: 11px; }
.tb-schedule-cont-list th:nth-child(1),
.tb-schedule-cont-list td:nth-child(1) { width: 29px; }
.tb-schedule-cont-list th:nth-child(2),
.tb-schedule-cont-list td:nth-child(2) { width: 74px; }
.tb-schedule-cont-list th:nth-child(3),
.tb-schedule-cont-list td:nth-child(3) { width: 54px; }
.tb-schedule-cont-list th:nth-child(4),
.tb-schedule-cont-list td:nth-child(4) { width: 433px; max-width: 433px; }
.tb-schedule-cont-list th:nth-child(5),
.tb-schedule-cont-list td:nth-child(5) { width: 178px; }

@media (min-width: 1921px) {
    .tb-content-list-for-group thead,
    .tb-content-list-for-group tbody {
        display: block;
    }
    
    .tb-content-list-for-group tbody tr {
    	display: flex;
    }
}

.tb-content-list-for-group th:nth-child(1),
.tb-content-list-for-group td:nth-child(1) { width: 24px; }
.tb-content-list-for-group td:nth-child(1) {
	justify-content: center;
}
.tb-content-list-for-group th:nth-child(2),
.tb-content-list-for-group td:nth-child(2) { width: 53px; }
.tb-content-list-for-group th:nth-child(3),
.tb-content-list-for-group td:nth-child(3) { width: 142px; }
.tb-content-list-for-group th:nth-child(4),
.tb-content-list-for-group td:nth-child(4) { width: 60px; }

.tb-new-content-list-for-group th:nth-child(1),
.tb-new-content-list-for-group td:nth-child(1) { width: 29px; }
.tb-new-content-list-for-group td:nth-child(1) {
	justify-content: center;
}
.tb-new-content-list-for-group th:nth-child(2),
.tb-new-content-list-for-group td:nth-child(2) { width: 53px; }
.tb-new-content-list-for-group th:nth-child(3),
.tb-new-content-list-for-group td:nth-child(3) { width: 53px; }
.tb-new-content-list-for-group th:nth-child(4),
.tb-new-content-list-for-group td:nth-child(4) { width: 254px; max-width: 254px; }
.tb-new-content-list-for-group th:nth-child(5),
.tb-new-content-list-for-group td:nth-child(5) { width: 128px; justify-content: space-between; }
.tb-new-content-list-for-group td:nth-child(5) .btn-remove-item { margin-top: 0px; }

.tb-creative-cont-list th:nth-child(1),
.tb-creative-cont-list td:nth-child(1) { width: 29px; }
.tb-creative-cont-list th:nth-child(2),
.tb-creative-cont-list td:nth-child(2) { width: 53px; }
.tb-creative-cont-list th:nth-child(3),
.tb-creative-cont-list td:nth-child(3) { width: 211px; }
.tb-creative-cont-list th:nth-child(4),
.tb-creative-cont-list td:nth-child(4) { width: 117px; }
.tb-creative-cont-list td:nth-child(4) .btn-remove-item { margin-top: 0px; margin-left: 10px; }

.tb-sync-content-list th:nth-child(1),
.tb-sync-content-list td:nth-child(1) { width: 53px; }
.tb-sync-content-list th:nth-child(2),
.tb-sync-content-list td:nth-child(2) { width: 78px; }
.tb-sync-content-list th:nth-child(3),
.tb-sync-content-list td:nth-child(3) { width: 179px; }
.tb-sync-content-list th:nth-child(4),
.tb-sync-content-list td:nth-child(4) { width: 199px; }

.tb-device-version-list th:nth-child(1),
.tb-device-version-list td:nth-child(1) { width: 33px; }
.tb-device-version-list th:nth-child(2),
.tb-device-version-list td:nth-child(2) { width: 53px; }
.tb-device-version-list th:nth-child(3),
.tb-device-version-list td:nth-child(3) { width: 252px; }
.tb-device-version-list th:nth-child(4),
.tb-device-version-list td:nth-child(4) { width: 252px; }
.tb-device-version-list th:nth-child(5),
.tb-device-version-list td:nth-child(5) { width: 101px; }
.tb-device-version-list th:nth-child(6),
.tb-device-version-list td:nth-child(6) { width: 143px; }
.tb-device-version-list th:nth-child(7),
.tb-device-version-list td:nth-child(7) { width: 95px; }
.tb-device-version-list th:nth-child(8),
.tb-device-version-list td:nth-child(8) { width: 144px; }
.tb-device-version-list th:nth-child(9),
.tb-device-version-list td:nth-child(9) { width: 74px; }
.tb-device-version-list th:nth-child(10),
.tb-device-version-list td:nth-child(10) { width: 76px; }

@media (min-width: 768px) {	
	body:not(.sidebar-mini-md) .content-wrapper,
	body:not(.sidebar-mini-md) .main-footer,
	body:not(.sidebar-mini-md) .main-header {
		margin-left: 0px;
	}
}

.map-area {
	width: 100%;
	height: 703px;
	background: var(--grey3);
	margin-top: 4px;
}

.panel {
	width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0px;
}

.panel .panel-left {
	width: 757px;
    height: 90px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel .panel-left li {
	height: 100%;
	display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
}

.panel .panel-left li span:first-child {
	font-size: 14px;
	font-weight: 500;
	color: var(--grey1);
}

.panel .panel-left li span:last-child {
	font-size: 16px;
	font-weight: 500;
	color: var(--grey-dark-color);
}

.panel .panel-left li:nth-child(n + 2) {
	border-left: 1px solid var(--grey3);
}

.panel .panel-left li:nth-child(1) {
	width: 274px;
	background-size: 54px 54px;
	background-repeat: no-repeat;
	background-position: 28px center;
	padding-left: 112px;
}

.panel .panel-left li:nth-child(1).user-01 { background-image: url("../images/icon_login1.png"); }
.panel .panel-left li:nth-child(1).user-02 { background-image: url("../images/icon_login2.png"); }
.panel .panel-left li:nth-child(1).user-03 { background-image: url("../images/icon_login3.png"); }
.panel .panel-left li:nth-child(1).user-04 { background-image: url("../images/icon_login4.png"); }

.panel .panel-left li:nth-child(2) {
	width: 224px;
	padding-left: 30px;
}

.panel .panel-left li:nth-child(3) {
	width: 257px;
	padding-left: 30px;
}

.panel .panel-right {
	width: 757px;
    height: 90px;
    border-radius: 10px;
    background: #f5574d;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel .panel-right li {
	width: 50%;
	height: 100%;
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 28px;
}

.panel .panel-right li:last-child {
	border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.panel .panel-right li span {
	font-weight: 700;
	font-size: 18px;
	color: #ffffff;
}

.cont-space-between {
	width: 100%;
	height: max-content;
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
}

.cont-center {
	width: 100%;
	height: max-content;
	display: flex;
	justify-content: center;
	align-items: center;
}

.user-tree-wrap {
	width: 391px;
	height: 457px;
	border: 1px solid var(--grey3);
	border-radius: 5px;
	position: relative;
}

.user-tree-wrap.lg {
	height: 637px;
}

.user-tree-wrap .tree-list{
	height: calc(100% - 134px);
}

.user-tree-wrap .tree-list-footer {
	height: 60px;
	border-radius: 0px 0px 5px 5px;
}

.user-form-wrap {
	width: 390px;
	margin-left: 30px;
}

.form-fieldset {
    width : 100%;
    margin-bottom: 38px;    
}

.form-fieldset .form-field {
	margin-bottom: 14px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
}

.form-fieldset .form-field.no-label {
    justify-content: flex-end;
}

.form-fieldset .form-field .form-label {
	width: 30%;
	color: var(--grey-dark-color);
	font-size: 16px;
	font-weight: 500;
	position: relative;
}

.form-fieldset .form-field .form-label.essential::before {
	content: '*';
	color: var(--main-color);
	position: absolute;
	top: -10px;
	left: 0px;
}

.form-control {
	width: 70%;
	height: 34px;
	padding: 0px 19px 0px 10px;
	border-radius: 5px;
	border: 2px solid rgba(226, 226, 226, 0.88);
	background-color: #FFF;
	color: var(--grey-dark-color);
	font-size: 14px;
	font-weight: 500;
	float: left;
}

.form-control::placeholder {
	font-size: 14px;
	font-weight: 400;
	color: var(--grey2);
}

.form-fieldset.md .form-field .form-label {
	width: 20%;
}

.form-fieldset.md .form-field .form-control {
	width: 80%;
}

.form-fieldset.md .form-field .form-control.has-btn {
	width: 267px;
}

.form-fieldset.md2 .form-field .form-label {
	width: 25%;
}

.form-fieldset.md2 .form-field .form-control {
	width: 75%;
}

.form-fieldset .form-field.error-field {
    flex-flow: wrap;
}

.form-fieldset .error-field .form-control {
	border: 2px solid var(--red-color);
}

.form-fieldset  .error-txt {
	color: var(--red-color);
	display: none;
}

.form-fieldset .error-field .error-txt {
	display: block;
}

.form-fieldset .form-field .input-group,
.form-fieldset .form-field .btn-form {
	width: 70%;
}

.form-fieldset .form-field .error-wrap {
	height: 55px;
}

.form-fieldset:has(.error-field) {
	margin-bottom: 17px;
}

.input-group-text {
	background-color: transparent;
	border-color: transparent;
	padding: 0px 5px;
}

.device-form-wrap {
	width: calc(50% - 26px);
}

.form-fieldset .form-field .toggle-switch +  input.form-control {
	width: 214px;
	margin-left: 10px;
}

.form-fieldset .form-field .form-label.toggle-txt {
	width: max-content;
    height: 34px;
    border-left: 1px solid var(--grey3);
    line-height: 30px;
    margin-left: 10px;
    margin-right: 22px;
    padding-left: 10px;
}

.form-fieldset .form-field .form-label.toggle-txt.no-border {
	border-left: none;
}

.form-fieldset.md .form-field .form-control.sync-no,
.form-control.sync-no {
	width: 46px;
	padding: 0px 8px;
	text-align: right;
}

.form-control.select-equip {
	width: 236px;
}

.equip-list-wrap {
	width: 644px;
	height: 597px;
	border: 1px solid var(--grey3);
	background-color: var(--grey4);
	border-radius: 5px;
	margin-top: 6px;
	position: relative;
	padding: 18px;
	overflow:auto;
}

.equip-list-wrap.sm {
	height: 474px;
}

.equip-list-wrap .hint {
	color: var(--grey1);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.equip-list-wrap .equip-item {
	width: 100%;
	height: max-content;
}

.equip-list-wrap .equip-item::after {
	content:'';
	display:block;
	clear:both;
}

.equip-list-wrap .equip-item .item-title {
	color: var(--grey-dark-color);
	width: 110px;
	float: left;
	margin-top: 7px;
}

.equip-list-wrap .equip-item .item-content {
	float: left;
	width: 464px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.equip-list-wrap .equip-item .item-content .item-input-wrap {
	border: 2px solid var(--grey3);
	background: #ffffff;
	padding: 7px 10px;
	width: 230px;
	height: 34px;
	border-radius: 5px;
	display: flex;
    align-items: center;
    justify-content: flex-start;
}

.equip-list-wrap .equip-item .item-content .item-input-wrap label {
	color: var(--grey-dark-color);
}

.equip-list-wrap .equip-item .item-content .item-input-wrap input {
	background: transparent;
	color: var(--grey-dark-color);
	text-align: right;
    margin-left: 4px;
    width: 100px;
    flex-grow: 1;
}

.equip-list-wrap .equip-item .item-content .item-input-wrap .unit-txt {
	color: var(--grey-dark-color);
	margin-left: 4px;
}

.equip-list-wrap .equip-item .item-content .item-input-wrap input:placeholder {
	color: var(--grey2);
}

.equip-list-wrap .equip-item .item-content .item-input-wrap:has(input:disabled) {
	border-color: var(--grey3);
	background: var(--grey4);
}

.equip-list-wrap .equip-item .item-content .item-input-wrap:has(input:disabled) label,
.equip-list-wrap .equip-item .item-content .item-input-wrap input:disabled {
	color: var(--grey1);
}

.equip-list-wrap .equip-item .item-content .item-input-wrap:has(input:focus) {
	border-color: var(--grey1);
	background: #ffffff;
}

.btn-remove-item {
	width: 20px;
	height: 20px;
	background-image: url('../images/icon_remove.png');
	background-size: 20px 20px;
	background-position: center center;
	background-repeat: no-repeat;
	float: right;
	margin-top: 7px;
}

.equip-list-wrap .equip-item + .equip-item {
	margin-top: 24px;
}

.device-tree-wrap {
	display: none;
	position: absolute;
	left: 20%;
	top: 40px;
	width: 518px;
	height: 457px;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	background-color: #fff;
	z-index: 10;
}

.device-tree-wrap .tree-list{
	height: calc(100% - 135px);
}

.device-tree-wrap .tree-list-footer {
	height: 60px;
	border-radius: 0px 0px 5px 5px;
}

.equip-select-list-wrap {
	display: none;
}

.equip-select-list {
	width: 644px;
	height: 117px;
	border: 1px solid var(--grey3);
	border-radius: 5px;
	margin-top: 7px;
}

.equip-select-list::after {
	content:'';
	display:block;
	clear:both;
}

.equip-select-list .lst-grp {
	float: left;
	width: 214px;
	height: 117px;
	border-right: 1px solid var(--grey3);
}

.equip-select-list .lst-grp:last-child {
	border-right: none;
}

.equip-select-list .lst-grp .lst-header {
	width: 100%;
	height: 28px;
	background: var(--grey4);
	padding: 0px 10px;
	color: var(--grey1);
	line-height: 28px;
    border-bottom: 1px solid var(--grey3);
}

.equip-select-list .lst-grp .lst-body {
	width: 100%;
	height: 83px;
	background: #ffffff;
	padding: 0px 10px;
	overflow-y: auto;
}

.equip-select-list .lst-grp .lst-body li {
	width: 100%;
	height: 28px;
	line-height: 28px;
	color: var(--grey1);
	border-bottom: 1px solid var(--grey3);
	cursor: pointer;
}

.equip-select-list .lst-grp .lst-body li.on {
	color: var(--main-color);
	font-weight: 700;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 24px 24px;
}

.panel-list {
	width: 100%;
	height: 288px;
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 19px;
}

.panel-list .panel-item {
	width: 292px;
	height: 134px;
	padding: 18px 28px;
	border-radius: 10px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
	background-color: #fff;
	cursor: pointer;
}

.panel-list .panel-item .grp-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--dark-color);
	padding-left: 20px;
    position: relative;
    margin-bottom: 14px;
}

.panel-list .panel-item .grp-name::before {
	content: '';
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 12px;
    background: var(--green-color);
    position: absolute;
    top: 8px;
    left: 0px;
}

.panel-list .panel-item.error .grp-name::before {
	background: var(--red-color);
}

.panel-list .panel-item.check .grp-name::before {
	background: #fd902c;
}

.progress {
	height: 8px;
	background-color: var(--grey3);
	border-radius: 10px;
	margin-bottom: 8px;
}

.progress-bar {
	height: 8px;
	background-color: #f5574d;
	border-radius: 10px;
}

.grp-summary {
	width: 100%;
	display: flex;
	align-items: center;
    justify-content: space-between;
}

.grp-summary .ta-left div:first-child,
.grp-summary .ta-right div:first-child {
	font-size: 12px;
	color: var(--grey1);
}

.grp-summary .ta-left div:last-child,
.grp-summary .ta-right div:last-child {
	font-size: 18px;
	font-weight: 700;
}

.grp-summary .ta-left div:last-child {
	color: var(--grey-dark-color);
}

.grp-summary .ta-right div:last-child {
	color: var(--green-color);
}

.panel-list .panel-item.error .grp-summary .ta-right div:last-child {
	color: var(--red-color);
}

.panel-list .panel-item.check .grp-summary .ta-right div:last-child {
	color: #fd902c;
}

.panel-pagination {
	display: flex;
	justify-content: center;
    align-items: center;
    margin-top: 14px;
    margin-bottom: 20px;
}

.panel-pagination .pagination {
	justify-content: center;
    align-items: center;
    text-align: center;
    width: 292px;
    height: 36px;
    background: #ffffff;
    border-radius: 10px;
}

.table tbody tr.dt-rowReorder-moving>.reorder::before{
	content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px; /* 아이콘 크기 */
    height: 22px; /* 아이콘 크기 */
    background-image: url('../images/moving-icon.png');
    background-size: cover; /* 아이콘 크기에 맞게 배경 이미지 조정 */
    background-repeat: no-repeat;
}


.schedule-form {
	width: 894px;
	height: 637px;
}

.schedule-form .schedule-tab {
	width: 100%;
	height: 40px;
}

.schedule-form .schedule-tab::after {
	content:'';
	display:block;
	clear:both;	
}

.schedule-form .schedule-tab li {
	float: left;
	width: 106px;
	height: 40px;
	padding: 10px;
	border: 1px solid var(--grey3);
	border-bottom: none;
	color: var(--grey1);
	background-color: #FFFFFF;
	cursor: pointer;
}

.schedule-form .schedule-tab li.on {
	color: #FFFFFF;
	background-color: var(--main-color);
}

.schedule-form .schedule-tab li:first-child {
	border-radius: 5px 0px 0px 0px;
}

.schedule-form .schedule-tab li:last-child {
	border-radius: 0px 5px 0px 0px;
}

.schedule-form .schedule-tab li + li {
	border-left: none;
}

.schedule-tab-cont {
	width: 894px;
	height: 598px;
	border: 1px solid var(--grey3);
	border-radius: 0px 5px 5px 5px;
}

.schedule-tab-cont .form-fieldset {
    padding: 18px 18px 0px 18px;
}

.schedule-tab-cont .form-fieldset .form-field .form-label {
	width: 108px;
}

.schedule-tab-cont .form-fieldset .form-field .form-control.lg {
	width: 524px;
}

.schedule-tab-cont .form-fieldset .form-field .form-control.sm {
	width: 116px;
}

.schedule-tab-cont .form-fieldset .form-field .form-control.md {
	width: 258px;
}

.schedule-tab-cont .form-fieldset .form-field .input-group {
	width: 116px;
}

.schedule-tab-cont .form-fieldset .form-field .input-group.lg {
	width: 240px;
}

.schedule-tab-cont .form-fieldset .form-field .input-group:last-child {
	width: 140px;
}

.schedule-tab-cont .form-fieldset .form-field .input-group:last-child.lg {
	width: 270px;
}

.schedule-tab-cont .form-fieldset .form-field .input-group>.form-control {
	flex: none;
}

.schedule-tab-cont .form-fieldset .form-field .input-group>.custom-select:not(:first-child), 
.schedule-tab-cont .form-fieldset .form-field .input-group>.form-control:not(:first-child) {
	border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-left: 6px;
}

.schedule-tab-cont .form-fieldset .form-field .input-group>.custom-select:not(:last-child),
.schedule-tab-cont .form-fieldset .form-field .input-group>.form-control:not(:last-child) {
	border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.hyphen {
	color: var(--grey-dark-color);
	margin: 0px 6px;
}

.schedule-tab-cont .form-fieldset .form-field .custom-chkbox3 label,
.schedule-tab-cont .form-fieldset.field-block .right-section .form-field .custom-chkbox3 label {
	width: max-content;
}

.schedule-tab-cont .form-fieldset .form-field .custom-chkbox3 + .custom-chkbox3 {
	margin-left: 16px;
}

.schedule-tab-cont .form-fieldset {
	margin-bottom: 11px;
}

.schedule-tab-cont .form-fieldset .form-field:last-child {
	margin-bottom: 0px;
}

.schedule-tab-cont .tab-cont {
	display: none;
}

.form-fieldset.field-block {
	width: 858px;
	height: 182px;
	border: 1px solid var(--grey3);
	background-color: var(--grey4);
	border-radius: 5px;
	margin: 0px auto;
	display: flex;
	padding: 18px;
	margin-bottom: 10px;
}

.form-fieldset.field-block.lg {
	height: 515px;
}

.form-fieldset.field-block .left-section {
	width: 90px;
	border-right: 1px solid var(--grey3);
	margin-right: 20px;
}

.form-fieldset.field-block .right-section {
	width: 100%;
}


.form-fieldset.field-block .left-section .form-field {
	flex-direction: column;
    align-items: flex-start;
}

.form-fieldset.field-block .right-section .form-field .form-label {
	width: 93px;
}

.form-fieldset.field-block .left-section:not(:has(.toggle-input:checked)) + .right-section .form-field .form-label,
.form-fieldset.field-block .left-section:not(:has(.toggle-input:checked)) + .right-section .form-field .input-group .input-group-text,
.form-fieldset.field-block .left-section:not(:has(.toggle-input:checked)) + .right-section .form-field .input-group .input-group-text .fa,
.form-fieldset.field-block .left-section:not(:has(.toggle-input:checked)) + .right-section .form-field .hyphen,
.right-section .form-field.disabled .form-label,
.right-section .form-field.disabled .input-group .input-group-text {
	color: var(--grey1);
}

.form-field .form-control:disabled,
.table td .form-control:disabled {
	border: 2px solid var(--grey3);
	background-color: var(--grey4);
	color: var(--grey1);
}

.form-field .form-control.select-box {
	width: 142px;
}

.form-field .form-control.select-box2 {
	width: 66px;
}

.form-field .form-control.select-box3 {
	width: 232px;
}

.form-field .form-control.select-box4 {
	width: 94px;
}

.form-field .form-control.select-box5 {
	width: 158px;
}

.form-field .form-control.select-box6 {
	width: 200px;
}

.time-sched-cont .form-fieldset.field-block {
	padding-top: 10px;
}

.time-sched-cont .form-fieldset .form-field {
	margin-bottom: 8px;
}

.time-sched-cont .form-fieldset .form-field .form-field{
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid var(--grey3);
	width: max-content;
}

.hidden {
	display: none !important;
}

#scheduleContentTable_wrapper .row:nth-child(1),
#scheduleContentTable_wrapper .row:nth-child(3) {
	margin: 0px 10.5px;
}

#scheduleContentTable_wrapper div.dataTables_filter .search-group {
	width: 240px;
}

.grid-thumbnail {
	width: 54px;
	height: 30px;
	background: var(--grey2);
	cursor: pointer;
}

.ai-select-wrap {
	display: flex;
}

.alarm-target-list {
	width: 615px;
	height: 296px;
	background-color: #ffffff;
	border: 2px solid rgba(226, 226, 226, 0.88);
	border-radius: 5px;
	padding: 18px 10px 18px 18px;
}

.alarm-target-list ul {
	width: 100%;
	max-height: 222px;
	overflow-y: auto;
}

.alarm-target-list ul li {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.alarm-target-list ul li + li {
	margin-top: 10px;
}

.alarm-target-list ul li select:first-child {
	margin-right: 49px;
}

.alarm-target-list ul li button:last-child {
	margin-left: 16px;
	margin-top: 0px;
}

.alarm-target-list .btn-area {
	width: 100%;
	height: max-content;
	text-align: center;
	margin-top: 10px;
}

.alarm-target-list .custom-radio label {
	display: flex;
    align-items: center;
}

.btn-add-target {
	width: 26px;
	height: 26px;
	border-radius: 5px;
	border: 1px solid rgba(226, 226, 226, 0.88);
	background-color: #FFFFFF;
	background-image: url('../images/icon_add_target.png');
	background-size: 20px 20px;
	background-position: center center;
	background-repeat: no-repeat;
}

.dataTables_scrollBody > .table > thead > tr {
	visibility: collapse;
}

.dashboard-wrap {
	width: 100%;
	height: 338px;
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.dashboard-wrap.iot-dashboard {
	justify-content: center;
	padding: 8px 28px;
	border-radius: 10px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
	background-color: #fff;
}

.dashboard-wrap .left-area {
	width: max-content;
	height: max-content;
}

.dashboard-wrap .right-area {
	width: 1246px;
	height: 338px;
	padding: 8px 24px;
	border-radius: 10px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	flex-grow: 1;
}

.dashboard-wrap .left-area .box {
	width: 266px;
	height: 160px;
	padding: 18px 28px 28px 28px;
	border-radius: 10px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.dashboard-wrap .left-area .box + .box {
	margin-top: 20px;
}

.dashboard-wrap .left-area .box.box-red {
	background-color: #f5574d;
}

.dashboard-wrap .left-area .box.box-blue {
	background-color: #578efa;
}

.dashboard-wrap .left-area .box .box-header {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 22px;
}

.dashboard-wrap .left-area .box .box-body {
	width: 100%;
}

.dashboard-wrap .left-area .box .box-body li {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dashboard-wrap .left-area .box .box-body li span {
	color: rgba(255, 255, 255, 0.8);
	line-height: 30px;
}

.dashboard-wrap .left-area .box .box-body li span:last-child {
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	margin-top: 4px;
}

.dashboard-wrap .right-area .left-chart {
	width: 678px;
	height: 322px;
	padding: 10px 28px 10px 0px;
	margin-right: 28px;
	border-right: 1px solid var(--grey3);
	display: flex;
    align-items: flex-end;
}

.dashboard-wrap .right-area .right-chart {
	width: 490px;
	height: 322px;
	padding: 10px 0px;
}

.dashboard-wrap .chart-title {
	width: 100%;
	font-size: 18px;
	font-weight: 700;
	color: var(--dark-color);
}

.dashboard-wrap .right-area .chart-area1 {
	width: 405px;
	height: 275px;
	/* background: rgba(255, 0, 0, 0.3); */
}

.dashboard-wrap .right-area .chart-area2 {
	width: 208px;
	height: 275px;
	background: rgba(0, 0, 255, 0.3);
}

.dashboard-wrap .right-area .chart-area3 {
	width: 489px;
	height: 275px;
	background: rgba(0, 255, 0, 0.3);
}

.iot-dashboard .chart-wrap1 {
	width: 810px;
	height: 100%;
	padding: 10px 0px;
	display: flex;
	justify-content: space-around;
    align-items: flex-start;
    flex-grow: 0.5;
}

.iot-dashboard .chart-wrap1 .left-chart {
	position: relative;
	width: 347px;
	height: 309px;
}

.iot-dashboard .chart-wrap1 .left-chart .chart-area1 {
	width: 100%;
	height: calc(100% - 114px);
	margin-top: 62px;
}

.iot-dashboard .chart-wrap1 .right-chart {
	position: relative;
	width: 439px;
	padding-top: 90px;
	height: 302px;
}

.iot-dashboard .chart-wrap1 .right-chart .chart-area2 {
	width: 100%;
    height: 275px;
	/* background: rgba(0, 255, 0, 0.3); */
}

.iot-dashboard .chart-wrap2 {
	width: 264px;
	margin: 0px 28px;
	padding: 10px 28px;
	border-left: 1px solid var(--grey3);
	border-right: 1px solid var(--grey3);
}

.iot-dashboard .chart-wrap2 .chart-area3 {
	width: 100%;
    height: 206px;
    margin-top: 15%;
	/* background: rgba(0, 0, 255, 0.3); */
}

.iot-dashboard .chart-wrap3 {
	width: 350px;
	height: 100%;
	padding: 10px 0px;
	display: flex;
	justify-content: space-around;
    flex-grow: 0.5;
}

.iot-dashboard .chart-wrap3 .left-chart,
.iot-dashboard .chart-wrap3 .right-chart {
	width: 170px;
	height: 100%;
}

.iot-dashboard .box-list {
	width: 170px;
	height: max-content;
	margin-top: 14px;
}

.iot-dashboard .box-list li {
	width: 170px;
	height: 120px;
	border-radius: 10px;
	padding: 12px 18px 15px 17px;
	background-color: rgba(87, 142, 250, 0.1);
}

.iot-dashboard .box-list li + li {
	margin-top: 10px;
}

.iot-dashboard .box-list li .box-header {
	position: relative;
	color: var(--grey-dark-color);
	border-bottom: 1px solid rgba(55, 124, 255, 0.3);
	padding-left: 20px;
	padding-bottom: 2px;
}

.iot-dashboard .box-list li .box-header::before {
    content: '';
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 12px;
    background: #377cff;
    position: absolute;
    top: 5px;
    left: 0px;
}

.iot-dashboard .box-list li .box-body {
	margin-top: 8px;
	height: 60px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
    justify-content: flex-end;
}

.iot-dashboard .box-list li .box-body > div {
	width: 100%;
	height: 27px;
	line-height: 27px;
	font-size: 18px;
	font-weight: bold;
	color: #377cff;
	text-align: right;
}

.iot-dashboard .box-list li.red { background-color: rgba(234, 51, 51, 0.1); }
.iot-dashboard .box-list li.red .box-header { border-bottom: 1px solid rgba(234, 51, 51, 0.3); }
.iot-dashboard .box-list li.red .box-header::before { background: #ea3333; }
.iot-dashboard .box-list li.red .box-body > div { color: #ea3333; }

.iot-dashboard .box-list li.blue { background-color: rgba(87, 142, 250, 0.1); }
.iot-dashboard .box-list li.blue .box-header { border-bottom: 1px solid rgba(55, 124, 255, 0.3); }
.iot-dashboard .box-list li.blue .box-header::before { background: #377cff; }
.iot-dashboard .box-list li.blue .box-body > div { color: #377cff; }

.iot-dashboard .box-list li.green { background-color: rgba(38, 198, 140, 0.1); }
.iot-dashboard .box-list li.green .box-header { border-bottom: 1px solid rgba(38, 198, 140, 0.3); }
.iot-dashboard .box-list li.green .box-header::before { background: #26c68c; }
.iot-dashboard .box-list li.green .box-body > div { color: #26c68c; }

.iot-area.iot-dashboard {
	display: flex;
}

.iot-area.iot-dashboard .chart-wrap1 {
	width: 868px;
	position: relative;
	display: block;
	padding-right: 28px;
	margin-right: 28px;
	border-right: 1px solid var(--grey3);
}

.iot-area.iot-dashboard .chart-wrap1 .chart-summary {
	top: 10px;
	right: 28px;
}

.iot-area.iot-dashboard .chart-wrap1 .chart-area2 {
	width: 100%;
	height: 287px;
	background: rgba(255, 0, 0, 0.3);
}

.iot-area.iot-dashboard .chart-wrap3 {
	width: 584px;
}

.iot-area.iot-dashboard .chart-wrap3 .left-chart,
.iot-area.iot-dashboard .chart-wrap3 .right-chart,
.iot-area.iot-dashboard .box-list,
.iot-area.iot-dashboard .box-list li {
	width: 287px;
}

.group-cont-tree-wrap {
	width: 248px;
    height: max-content;
}

.group-cont-tree-wrap .tree-body {
	width: 248px;
	height: 535px;
	border: 1px solid var(--grey3);
    border-radius: 5px;
    position: relative;
    margin-top: 16px;
}

.group-cont-tree-wrap .tree-body.group-cont-tree-tbody{
	height: 578px;
}

.group-cont-tree-wrap .tree-list-footer {
	height: 58px;
	border-radius: 0px 0px 5px 5px;
}

.group-cont-tree-wrap .tree-list {
	margin-top: 12px;
	height: calc(100% - 94px);
}

.group-cont-tree-wrap .tree-header {
	padding: 8px 12px;
}

.group-cont-tree-wrap .tree-header .search-group {
	margin-top: 0px;
}

.group-cont-tree-wrap .tree-header .search-group .search-input {
	width: 160px;
}

.tb-content-list-for-group {
	width: 386px;
}

.group-content-list {
	width: 386px;
    border-bottom: 1px solid var(--grey3);
}

.new-content-wrap {
	border-bottom: 1px solid var(--grey3);
}

.btn-bttom-wrap {
	width: 100%;
	height: 75px;
	padding: 20px 18px;
	border-top: 1px solid var(--grey3);
}

.btn-move-content {
	width: 24px;
	height: 24px;
	background-color: transparent;
	background-image: url('../images/icon_arrow_move_content.png');
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center center;
	margin: 0px 14px;
}

.btn-move-content.on {
	background-image: url('../images/icon_arrow_move_content_on.png');
}

.tb-content-list-for-group div.dataTables_wrapper div.dataTables_filter .search-group {
	width: 194px;
}

.refresh-wrap {
	display: none;
	position: absolute;
	bottom: 7px;
	right: 32px;
}

.refresh-wrap > span {
	vertical-align: middle;
}

.btn-refresh {
	width: 32px;
	height: 32px;
	background-color: #FFFFFF;
	background-image: url('../images/icon_refresh.png');
	background-repeat: no-repeat;
	background-position: center, center;
	background-size: 32px 32px;
	vertical-align: middle;
	margin-left: 14px;
}

.chart-summary {
	position: absolute;
	top: 0px;
	right: 0px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

.chart-summary .summary-box {
	width: 171px;
	height: 73px;
	padding: 12px 18px;
	border-radius: 10px;
	background-color: var(--grey4);
}

.chart-summary .summary-box .summary-header {
	border-bottom: 1px solid var(--grey3);
	padding-bottom: 2px;
	color: var(--grey-dark-color);
}

.chart-summary .summary-box .summary-txt {
	font-size: 16px;
	font-weight: 700;
	color: var(--grey-dark-color);
	text-align: right;
}

.chart-summary .summary-box.on {
	background-color: #f5574d;
}

.chart-summary .summary-box.on .summary-header,
.chart-summary .summary-box.on .summary-txt {
	color: #FFFFFF;
}

.tot-dashboard {
	width: 100%;
	height: max-content;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	margin-bottom: 0px;
	gap: 20px;
}

.tot-dashboard .cms-area {
	width: 340px;
	height: 338px;
	padding: 18px 28px;
	border-radius: 10px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
	background-color: #fff;
}

.tot-dashboard .cms-area .cms-chart-area1 {
	width: 100%;
	height: 187px;
	background: rgba(255, 0, 0, 0.3);
}

.tot-dashboard .cms-area .cms-status-area {
	width: 100%;
	height: max-content;
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

.tot-dashboard .cms-area .cms-status-area .cms-status-box {
	width: 138px;
	height: 73px;
	background-color: var(--grey4);
	padding: 12px 18px;
	border-radius: 10px;
}

.tot-dashboard .cms-area .cms-status-area .cms-status-box .cms-status-hdr {
	border-bottom: 1px solid var(--grey3);
	padding-bottom: 2px;
	color: var(--grey-dark-color);
}

.tot-dashboard .cms-area .cms-status-area .cms-status-box .cms-status-bd {
	font-size: 16px;
	font-weight: 700;
	color: var(--grey-dark-color);
	text-align: right;
}

.tot-dashboard .ai-area {
	width: 1176px;
	height: 338px;
	padding: 8px 28px;
	border-radius: 10px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
	background-color: #fff;
	display: flex;
	justify-content: space-around;
    flex-grow: 1;
}

.tot-dashboard .ai-area .ai-chart-left {
	width: 508px;
	height: 100%;
	margin-right: 28px;
	padding: 10px 28px 10px 0px;
	border-right: 1px solid var(--grey3);
}

.tot-dashboard .ai-area .ai-chart-area1 {
	width: 220px;
	height: 265px;
	background: rgba(0, 255, 0, 0.3);
}

.tot-dashboard .ai-area .ai-chart-area2 {
	width: 220px;
	height: 265px;
	background: rgba(0, 0, 255, 0.3);
	margin-left: 20px;
}

.tot-dashboard .ai-area .ai-chart-area3 {
	width: 220px;
	height: 265px;
	background: rgba(255, 0, 0, 0.3);
}

.tot-dashboard .ai-area .ai-chart-right {
	width: 584px;
	height: max-content;
	padding: 10px 0px;
}

.tot-dashboard .ai-area .ai-chart-right .ai-box-list li {
	width: 294px;
	height: 79px;
	padding: 12px 18px;
	border-radius: 10px;
	background-color: var(--grey4);
}

.tot-dashboard .ai-area .ai-chart-right .ai-box-list li .box-hdr {
	color: var(--grey-dark-color);
	padding-bottom: 2px;
	border-bottom: 1px solid var(--grey3);
}

.tot-dashboard .ai-area .ai-chart-right .ai-box-list li .box-cont {
	width: 100%;
	margin-top: 7px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tot-dashboard .ai-area .ai-chart-right .ai-box-list li .box-cont .box-cont-text {
	width: 120px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tot-dashboard .ai-area .ai-chart-right .ai-box-list li .box-cont .box-cont-text .dt {
	color: var(--grey1);
}

.tot-dashboard .ai-area .ai-chart-right .ai-box-list li .box-cont .box-cont-text .dd {
	font-size: 16px;
	font-weight: 700;
	color: var(--grey-dark-color);
}

.tot-dashboard .ai-area .ai-chart-right .ai-box-list li.on {
	background-color: #f5574d;
}

.tot-dashboard .ai-area .ai-chart-right .ai-box-list li.on .box-hdr {
	color: #FFFFFF;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.tot-dashboard .ai-area .ai-chart-right .ai-box-list li.on .box-cont .box-cont-text .dt,
.tot-dashboard .ai-area .ai-chart-right .ai-box-list li.on .box-cont .box-cont-text .dd {
	color: #FFFFFF;
}

.tot-dashboard .ai-area .ai-chart-right .ai-box-list li + li {
	margin-top: 10px;
}

.tot-dashboard .iot-area {
	width: 100%;
	height: 350px;
	padding: 8px 28px;
	border-radius: 10px;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
	background-color: #fff;
	justify-content: space-around;
}

.status-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	text-indent: -1000px;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 12px;
    background-color: #000000;
}

.status-dot.on {
	background-color: var(--green-color);
}

.status-dot.off {
	background-color: var(--red-color);
}

.status-dot.disabled {
	background-color: var(--grey3);
}

.status-dot + .status-dot {
	margin-left: 6px;
}

.activ-dot {
	width: 18px;
	height: 18px;
	text-indent: -1000px;
    white-space: nowrap;
    overflow: hidden;
    border-radius: 18px;
    display: inline-block;
	background-color: var(--grey1); /* 체크 시 내부 원으로 표시될 색상 */
	border: 3px solid #ffffff; /* 테두리가 아닌, 테두리와 원 사이의 색상 */
	box-shadow: 0 0 0 1px var(--grey1); /* 얘가 테두리가 됨 */
}

.activ-dot.on {
	background-color: var(--green-color); /* 체크 시 내부 원으로 표시될 색상 */
	box-shadow: 0 0 0 1px var(--green-color); /* 얘가 테두리가 됨 */
}

.heatmap-area {
	width: 764px;
	height: max-content;
}

.heatmap-area .heatmap {
	width: 764px;
	height: 574px;
	background-color: rgba(0, 0, 0, 0.3);
}

.heatmap-area .heatmap img {
	width: 764px;
	height: 574px;
}

.heatmap-area .heatmap-paging {
	width: 100%;
	margin-top: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.heatmap-area .heatmap-paging .btn-paging {
	width: 16px;
	height: 16px;
	background-color: #FFFFFF;
	background-image: url('../images/icon_paging_arrow.png');
	background-repeat: no-repeat;
	background-position: center, center;
	background-size: 16px 16px;
	cursor: pointer;
}

.heatmap-area .heatmap-paging .btn-paging.btn-prev {
	transform: rotate(0deg);
}

.heatmap-area .heatmap-paging .btn-paging.btn-next {
	transform: rotate(180deg);
	margin-left: 14px;
}

.heatmap-area .heatmap-paging .paging-dot-list {
	display: flex;
	align-items: center;
	justify-content: center;
}

.heatmap-area .heatmap-paging .paging-dot-list .btn-dot {
	width: 12px;
	height: 12px;
	border-radius: 12px;
	background-color: var(--grey1);
	cursor: pointer;
	margin-left: 14px;
}

.heatmap-area .heatmap-paging .paging-dot-list .btn-dot.on {
	background-color: var(--main-color);
}

.tree-wrapper {
	width: 100%;
	height: calc(100% - 94px);
}

.tippy-box {
	background-color: #ffffff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	color: var(--grey-dark-color);
}

.tippy-arrow {
	color: #FFFFFF;
}

.chart-tooltip {
	background-color: #ffffff;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	padding: 8px 11px;
	color: var(--grey-dark-color);
	font-weight: 700;
	position: relative;
}

.chart-tooltip::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 8px solid transparent;
	border-top-color: #ffffff;
	border-bottom: 0;
	margin-left: -12px;
	margin-bottom: -8px;
}

.chart-tooltip label {
	color: var(--grey1);
	font-weight: 500;
}

.al-items-start { align-items: flex-start; }
.w100 { width: 100px !important; }
.w166 { width: 166px !important; }
.w176 { width: 179px !important; }
.w376 { width: 376px !important; }
.w372 { width: 372px !important; }

.creative-info-wrap {
	width: 514px;
	height: 717px;
}

.creative-info-wrap .form-fieldset {
	margin-bottom: 47px;
}

.creative-info-wrap .form-fieldset .form-field span.dt {
	color: var(--grey1);
	margin-right: 10px;
	width: 14px;
}

.creative-info-wrap .form-fieldset .form-field label {
	width: 110px;
	margin-right: 32px;
}

.creative-info-wrap .form-fieldset .form-field label.sm {
	width: 90px;
}

.creative-info-wrap.sync .form-fieldset .form-field label {
	width: 127px;
	margin-right: 10px;
}

.creative-info-wrap .creative-info-area {
	position: relative;
	width: 514px;
	height: 550px;
	border-radius: 5px;
	border: 1px solid var(--grey3);
	padding-top: 10px;
	padding-bottom: 14px;
	padding: 10px 18px 14px 18px;
}

.creative-info-wrap .creative-info-area .hint {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--grey1);
	width: max-content;
}

.creative-screen-wrap {
	position: relative;
	width: 1158px;
	height: 717px;
	margin-left: 52px;
	border-radius: 5px;
	border: 1px solid var(--grey3);
	background-color: var(--grey4);
	overflow: auto;
    padding: 90px 100px;
}

.creative-screen-wrap .canvas-area {
	width: 945px;
	height: 532px;
	border: 2px solid var(--grey1);
	background-color: #FFFFFF;
	
	/* 드래그방지 */
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}

.creative-screen-wrap .menu-wrap {
	position: fixed;
    top: 83px;
    right: 43px;
}

.creative-screen-wrap .menu-wrap .menu-area {
	width: 42px;
	height: 126px;	
	border-radius: 5px;
	background-color: var(--main-color);
	padding: 4px;
}

.creative-screen-wrap .menu-wrap .menu-area li {
	width: 34px;
	height: 34px;
	border-radius: 5px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 30px auto;
	cursor: pointer;
}

.creative-screen-wrap .menu-wrap .menu-area li.on {
	background-color: rgba(0, 0, 0, 0.2);
}

.creative-screen-wrap .menu-wrap .menu-area li + li {
	margin-top: 6px;
}

.creative-screen-wrap .menu-wrap .menu-area li:nth-child(1) {
	background-image: url('../images/icon_creative_menu_1.png');
}

.creative-screen-wrap .menu-wrap .menu-area li:nth-child(2) {
	background-image: url('../images/icon_creative_menu_2.png');
}

.creative-screen-wrap .menu-wrap .menu-area li:nth-child(3) {
	background-image: url('../images/icon_creative_menu_3.png');
}

.creative-screen-wrap .menu-wrap .component-menu-list {
	position: absolute;
	top: 46px;
	right: 48px;
	width: 146px;
	height: 180px;
	padding: 10px 0;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	background-color: #fff;
	display: none;
}

.creative-screen-wrap .menu-wrap .component-menu-list li {
	width: 100%;
	height: 28px;
	padding: 4px 9px;
	color: var(--grey-dark-color);
	cursor: pointer;
}

.creative-screen-wrap .menu-wrap .component-menu-list li.on {
	background-color: rgba(134, 28, 60, 0.1);
	color: var(--main-color);
	background-position: right 10px center;
	background-repeat: no-repeat;
	background-size: 24px auto;
}

.creative-screen-wrap .zoom-wrap {
	position: fixed;
    bottom: 90px;
    right: 43px;
    display: flex;
    align-items: center;
    gap: 6px; 
}

.creative-screen-wrap .zoom-wrap .zoomin,
.creative-screen-wrap .zoom-wrap .zoomout {
	width: 40px;
	height: 40px;
	background-size: 20px auto;
	background-repeat: no-repeat;
	background-position: center;	
}

.creative-screen-wrap .zoom-wrap .zoomin {
	background-image: url('../images/icon_zoomin.png');
}

.creative-screen-wrap .zoom-wrap .zoomout {
	background-image: url('../images/icon_zoomout.png');
}

.canvas-area .canvas-layer {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 320px;
	height: 180px;
	background-color: rgba(179, 179, 179, 0.2);
	border: 2px solid var(--grey1);
	font-size: 30px;
	color: var(--grey-dark-color);
	display: flex;
	align-items: center;
    justify-content: center;
    cursor: pointer;
}

.canvas-area .canvas-layer.on {
	background-color: rgba(134, 28, 60, 0.2);
	border: 2px dashed var(--main-color);
	color: var(--main-color);
}

.canvas-area .canvas-layer .btn-remove-item {
	position: absolute;
	top: 8px;
	right: 8px;
	margin-top: 0px;
	background-color: #FFFFFF;
	display: none;
}

.canvas-area .canvas-layer.on .btn-remove-item {
	display: block;
}

.creative-info-area .layer-info {
	display: none;
	width: 100%;
	height: 100%;
}

.creative-info-area .layer-info .layer-title {
	font-size: 18px;
	color: var(--grey-dark-color);
	border-bottom: 1px solid var(--grey3);
	padding-bottom: 2px;
	margin-bottom: 14px;
}

.btn-lock {
	width: 26px;
	height: 26px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 26px auto;	
	background-image: url('../images/icon_unlock.png');
	margin-left: 8px;
}

.context-menu-wrap {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 10;
	display: none;
}

.context-menu-wrap .context-menu {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 136px;
	height: 104px;
	padding: 10px 0;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	background-color: #fff;
}

.context-menu-wrap .context-menu li {
	width: 100%;
	height: 28px;
	line-height: 28px;
	padding: 0px 10px;
	background-position: right 10px center;
	background-repeat: no-repeat;
	background-size: 24px auto;	
	background-image: url('../images/icon_context_arrow.png');
	color: var(--grey-dark-color);
	cursor: pointer;
}

.context-menu-wrap .context-menu li.on {
	background-color: rgba(134, 28, 60, 0.1);
	background-image: url('../images/icon_context_arrow_on.png');
}

.context-menu-wrap .context-submenu {
	position: absolute;
	top: 0px;
	left: 136px;
	width: 200px;
	height: max-content;
	padding: 10px 0;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	background-color: #fff;
	display: none;
}

.context-menu-wrap .context-submenu li {
	width: 100%;
	height: 28px;
	line-height: 28px;
	padding: 0px 10px;
	color: var(--grey-dark-color);
	cursor: pointer;
}

.context-menu-wrap .context-submenu li.on {
	background-color: rgba(134, 28, 60, 0.1);
	background-position: right 10px center;
	background-repeat: no-repeat;
	background-size: 24px auto;
}

.content-type-wrap {
	margin-left: -18px;
	margin-right: -18px;
	display: none;
}

.sync-content-tb-wrap {
	margin-left: -18px;
	margin-right: -18px;
}

.content-type-wrap .attr-title {
	font-size: 16px;
	color: var(--grey-dark-color);
	border-bottom: 1px solid var(--grey3);
	padding: 0px 18px 2px 18px;
}

.content-type-wrap .url-list {
	max-height: 300px;
	overflow-y: auto;
	padding: 18px;
}

.content-type-wrap .url-list li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	color: var(--grey-dark-color);
}

.content-type-wrap .url-list li + li {
	margin-top: 10px;
}

.content-type-wrap .url-list li .title {
	width: 64px;
	margin-top : 3px;
}

.content-type-wrap .url-list li .form-control {
	width: 372px;
	height: 34px;
	color: var(--grey-dark-color);
	margin-bottom: 4px;
}

.content-type-wrap .url-list li .form-control:disabled {
    border: 2px solid var(--grey3);
    color: var(--grey1);
}

.content-type-wrap .url-list li .form-control.component-input{
	width: 335px;
}

.sync-content-conf-wrap {
	position: relative;
	width: 1158px;
	height: 717px;
	border-radius: 5px;
	border: 1px solid var(--grey3);
	background-color: var(--grey4);
}

.sync-content-conf-wrap .hint {
	color: var(--grey1);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.sync-content-conf-wrap .sync-content-conf-list {
	width: 100%;
	height: max-content;
	padding: 21px 17px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 23px;
	max-height: 100%;
    overflow-y: auto;
}

.sync-content-conf-wrap .sync-content-conf-list .sync-item {
	width: 542px;
	height: 109px;
	cursor: pointer;
}

.sync-content-conf-wrap .sync-content-conf-list .sync-item .box-hdr {
	width: 112px;
	height: 32px;
	padding: 6px 9px;
	border-radius: 5px 5px 0px 0px;
	border: 1px solid var(--grey3);
	background-color: #fff;
	color: var(--grey1);
}

.sync-content-conf-wrap .sync-content-conf-list .sync-item .box-body {
	width: 542px;
	height: 77px;
	background-color: #fff;
}

.sync-content-conf-wrap .sync-content-conf-list .sync-item.on .tb-sync-item {
	border: 2px dashed var(--main-color);
}

.sync-content-conf-wrap .sync-content-conf-list .sync-item.on .box-hdr {
	border: 1px solid var(--main-color);
	background-color: var(--main-color);
	color: #ffffff;
}

.tb-sync-item {
	border: 2px solid var(--grey1);
	width: 100%;
	display: table;
}

.tb-sync-item tbody,
.tb-sync-item thead {
	display: block;
}

.tb-sync-item tr,
.tb-sync-item tr td,
.tb-sync-item tr th {
	display: flex;
	align-items: center;
}

.tb-sync-item thead {
	border-bottom: 1px solid var(--grey3);
	width: 100%;
}

.tb-sync-item thead tr {
	padding: 2px 0px;
}

.tb-sync-item th {
	border-left: 1px solid var(--grey3);
	height: 34px;
	padding: 0px 12px;
	color: var(--grey-dark-color);
}

.tb-sync-item td {
	border-left: 1px solid var(--grey3);
	height: 38px;
	padding: 2px 12px;
	color: var(--grey-dark-color);
}

.tb-sync-item th:nth-child(1),
.tb-sync-item td:nth-child(1) {
	border-left: none;
}


.tb-sync-item th:nth-child(1),
.tb-sync-item td:nth-child(1) { width: 47px; }
.tb-sync-item th:nth-child(2),
.tb-sync-item td:nth-child(2) { width: 77px; }
.tb-sync-item th:nth-child(3),
.tb-sync-item td:nth-child(3) { width: 274px; }
.tb-sync-item th:nth-child(4),
.tb-sync-item td:nth-child(4) { width: 140px; }

.tb-sync-item td .form-control {
	width: 82px;
	height: 33px;
	padding: 6px 10px;
}

.tb-sync-item .btn-remove-item {
	margin-top: 0px;
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    -webkit-animation: none !important;
    -moz-animation: none !important;
    -ms-animation: none !important;
    -o-animation: none !important;
    animation: none !important;
}

.datepicker {
	padding: 18px;
}

.datepicker .datepicker-switch {
	font-size: 16px;
	font-weight: 700;
	color: var(--grey-dark-color);
}

.datepicker .prev,
.datepicker .next {
	font-size: 27px;
	font-weight: 700;
	color: var(--grey-dark-color);
}

.datepicker td,
.datepicker th {
	width: 40px;
	height: 40px;
}

.datepicker th.dow {
	color: var(--grey1);	
}

.datepicker th.dow:first-child {
	color: #f5574d;	
}

.datepicker th.dow:last-child {
	color: #578efa;	
}

.datepicker table tr td {
	color: var(--grey-dark-color);
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
	color: var(--grey2);	
}

.datepicker table tr td.active:hover,
.datepicker table tr td.active:hover:hover,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active.disabled:hover:hover,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active:hover.disabled,
.datepicker table tr td.active.disabled.disabled,
.datepicker table tr td.active.disabled:hover.disabled,
.datepicker table tr td.active[disabled],
.datepicker table tr td.active:hover[disabled],
.datepicker table tr td.active.disabled[disabled],
.datepicker table tr td.active.disabled:hover[disabled] {
	border-radius: 40px;
	background: var(--main-color);
}

.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
	border-radius: 40px;
	background: #0E56AB;
	color: #ffffff;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused {
	border-radius: 40px;
	background: var(--main-color);
	color: #ffffff;
}

.fa, .fab, .fad, .fal, .far, .fas {
	color: var(--main-color);
}

.datepicker table tr td span:hover,
.datepicker table tr td span.focused {
	border-radius: 50%;
	background: var(--main-color);
	color: #fff;	
}

.alarm-list {
	width: 350px;
	height: 285px;
	position: absolute;
	top: 42px;
	right: 0px;
	background: #ffffff;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	padding: 10px 10px 10px 18px;
	z-index: 1;
	display: none;
}

.alarm-list ul {
	width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-right: 8px;
}

.alarm-list ul li {
	cursor: pointer;
}

.alarm-list ul li + li {
	margin-top: 10px;
}

.alarm-list ul li .header {
	display: flex;
	align-items: center;
	justify-content: space-between;	
}

.alarm-list ul li .header span {
	font-size: 12px;
	font-weight: 500;
	color: var(--grey-dark-color);
}

.alarm-list ul li .header span .group-navi {
	color: var(--grey1);
}

.alarm-list ul li .body {
	margin-top: 10px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--grey3);
	font-size: 12px;
	font-weight: 500;
	color: var(--grey-dark-color); 
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 6px;
}

.alarm-list ul li .body .alarm-icon {
	width: 12px;
	height: 12px;
	background-image: url('../images/icon_alarm.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 12px auto;
}

.device-version-form-wrap {
	width: 445px;
}

textarea.form-control {
	height: 100px;
}

textarea.form-control.lg {
	height: 360px;
}

.notDevice {
	display: none;
}

.obj_remove_btn{
	display:none;
	cursor: pointer;
}

.obj_text{
	pointer-events: none;
}

.menu-text{
	color: white;
	font-size: 12px;
	text-align: right;
}

.limitbtn{
	width : 28px; 
	height: 28px;
    float: right;
    margin-top: 2px;
    border-radius: 5px;
    cursor: pointer;
}

.limitbtn.off{
	background: url(/static/images/limitoff.png) no-repeat center / 32px auto;
}

.dt-rowReorder-float {
    display: none;
}

.display-none{
	display:none;
}