@charset "UTF-8";

html {
    width: 100%;
}
body {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, /*'Noto Sans TC', 'Noto Sans SC', 'Noto Sans JP', */
    'Noto Sans KR', sans-serif;
    outline: none;
    padding-top: 125px;
    /* background-image: url(../images/bg.jpg); */
    /* background-size: 100%; */
    color: #555;
}

/* SubTopBar를 쓰지 않는 신규 페이지(알람관리, 데이터뷰 등)에서는 padding-top을 메뉴(56px)만큼으로 축소.
   페이지 마운트 시 .no-subtopbar 클래스를 body에 추가/제거 */
body.no-subtopbar {
    padding-top: 56px;
}

#vueWrapper {
    height: 100%;
}
/* *:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
} */
.fixed {
    overflow: hidden;
}
.main-wrapper.full,
.content.full {
    height: 100%;
}

i {
    font-style: normal;
}

a,
a:hover {
    cursor: pointer;
    color: #3396ff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
}

ul > li {
    list-style: none;
}

button.btn:disabled:hover,
button.btn:disabled {
    background-color: #556d77;
    opacity: 0.2;
}

::-webkit-file-upload-button {
    cursor: pointer;
}

select[disabled] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
textarea.vertical {
    resize: vertical;
}
.table {
    display: table;
}
.table-row {
    display: table-row;
}
.table-cell {
    display: table-cell;
}
.dotted {
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-style: none none dotted;
}

.thin {
    font-weight: 100 !important;
}

.light {
    font-weight: 300 !important;
}

.regular {
    font-weight: 400 !important;
}

.medium {
    font-weight: 500 !important;
}

.bold {
    font-weight: 700 !important;
}

.black {
    font-weight: 900 !important;
}
.transparentBG {
    background-color: transparent;
}
.relative {
    position: relative;
}

.valign-middle {
    vertical-align: middle;
}

.col-count-2 {
    column-count: 2;
    column-gap: 30px;
    word-break: break-all;
    text-align: justify;
}

.col-count-3 {
    column-count: 3;
    column-gap: 30px;
    word-break: break-all;
    text-align: justify;
}
.overflow-visible {
    overflow: visible;
}
.t_Center,
table.t_Center th {
    text-align: center !important;
}

.t_Left {
    text-align: left !important;
}

.t_Right {
    text-align: right !important;
}

.mar_0 {
    margin: 0px !important;
}
.mar_5 {
    margin: 5px !important;
}

.mar_10 {
    margin: 10px !important;
}

.mar_L {
    margin-left: 10px !important;
}

.mar_L_20 {
    margin-left: 20px !important;
}

.mar_R {
    margin-right: 10px !important;
}

.mar_R_15 {
    margin-right: 15px !important;
}

.mar_R_20 {
    margin-right: 20px !important;
}

.mar_C {
    margin-right: 10px !important;
    margin-left: 10px !important;
}

.mar_C_15 {
    margin-right: 15px !important;
    margin-left: 15px !important;
}
.mar_C_0 {
    margin-right: 0px !important;
    margin-left: 0px !important;
}
.mar_C_30 {
    margin-right: 30px !important;
    margin-left: 30px !important;
}
.mar_M {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.mar_M_15 {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

.mar_M_20 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
}

.mar_T {
    margin-top: 10px !important;
}

.mar_T_15 {
    margin-top: 15px !important;
}

.mar_T_20 {
    margin-top: 20px !important;
}

.mar_T_30 {
    margin-top: 30px !important;
}

.mar_B {
    margin-bottom: 10px !important;
}

.mar_B_5 {
    margin-bottom: 5px !important;
}

.mar_B_7 {
    margin-bottom: 7px !important;
}

.mar_B_15 {
    margin-bottom: 15px !important;
}

.mar_B_20 {
    margin-bottom: 20px !important;
}

.pad_0 {
    padding: 0 !important;
}
.pad_0_5 {
    padding: 0px 5px !important;
}
.pad_0_10 {
    padding: 0px 10px !important;
}

.pad_0_15 {
    padding: 0px 15px !important;
}

.pad_10_0 {
    padding: 10px 0 !important;
}

.pad_10 {
    padding: 10px !important;
}

.pad_15 {
    padding: 15px !important;
}

.pad_15_0 {
    padding: 15px 0px !important;
}
.pad_20 {
    padding: 20px !important;
}

.pad_20_10 {
    padding: 20px 10px !important;
}

.pad_20_0 {
    padding: 20px 0 !important;
}

.pad_20_15 {
    padding: 20px 15px !important;
}

.pad_20_30 {
    padding: 20px 30px !important;
}

.pad_20_30_0 {
    padding: 20px 30px 0 !important;
}

.pad_0_20 {
    padding: 0px 20px !important;
}

.pad_0_30 {
    padding: 0px 30px !important;
}

.pad_L_20 {
    padding-left: 20px !important;
}

.pad_L_10 {
    padding-left: 10px !important;
}

.pad_L_40 {
    padding-left: 40px !important;
}

.pad_L_5 {
    padding-left: 5px !important;
}

.pad_L_0 {
    padding-left: 0 !important;
}
.pad_R_0{
    padding-right: 0 !important;
}
.pad_R_5{
    padding-right: 5px !important;
}
.text-blue {
    color: #3396ff;
}
.upgrade {
    display: none;
}
.upgradeItem[upgrade="true"] .upgrade {
    display: inline;
}
.upgradeItem[upgrade="true"] * {
    pointer-events: none;
}
.upgradeItem[upgrade="true"] .loginStyle:before {
    display: none;
}
.upgrade {
    position: relative;
}
.upgrade:after {
    position: absolute;
    top: 0;
    right: -65px;
    background-color: #229bf1;
    color: #fff;
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    line-height: 1.5;
    content: 'Upgrade';
    padding: 2px 5px;
    border-radius: 10px 0 10px 0;
    -webkit-border-radius: 10px 0 10px 0;
    -moz-border-radius: 10px 0 10px 0;
    -ms-border-radius: 10px 0 10px 0;
    -o-border-radius: 10px 0 10px 0;
}
.dashCountTitle .upgrade:after {
    top: 38px;
    right: 1px;
}
.gn-menu .upgrade:after {
    top: 18px;
    right: auto;
    left: 5px;
}
.gn-menu-wrapper {
    overflow: visible;
}
.gn-menu ul {
    opacity: 0;
}
.gn-open-all .gn-menu ul {
    opacity: 1;
}
.gn-submenu li {
    position: relative;
    overflow: visible;
}
.gn-thirdmenu {
    position: relative;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.2);
}
.gn-submenu li a.active:after {
    top: 50%;
    left: 34px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.gn-submenu .upgrade:after {
    top: -2px;
    right: auto;
    left: -50px;
}
.packageItem.upgradeItem[upgrade="true"] * {
    pointer-events: all;
}
.packageItem.upgradeItem[upgrade="true"] .upgrade {
    float: right;
    cursor: pointer;
}
.packageItem.upgradeItem[upgrade="true"] .upgrade:after {
    position: relative;
    display: inline-block;
    top: 5px;
    right: 20px;
}
.packageMenuItem {
    position: relative;
    display: none;
}
.packageMenuItem[use-item="true"] {
    display: block;
}
.packageMenuItem:after {
    content: '';
    /* display: none; */
    position: absolute;
    top: 25px;
    left: 45px;
    width: 0;
    height: 0;
    background-color: orange;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
}
/* 확장패키지 그룹핑 시 CSS */
/* .gn-open-all .packageMenuItem.new:after {
    top: 20px;
    left: 55px;
    width: 10px;
    height: 10px;
}
.gn-selected .packageMenuItem.new:after {
    display: inline-block;
} */
/* 확장패키지 그룹핑 시 CSS 끝 */

/* 확장패키지 그룹핑 안 할 시 CSS */
.packageMenuItem.new:after {
    top: 20px;
    left: 40px;
    width: 10px;
    height: 10px;
}
.packageMenuItem.new:after {
    display: inline-block;
}
/* 확장패키지 그룹핑 안 할 시 CSS 끝 */

/* .gn-menu > li.packageGroup {
    background: rgba(0, 119, 255, 0.1) !important;
}
.gn-menu > li.packageGroup .gn-submenu {
    background: rgba(119, 183, 255, 0.2) !important;
} */
.gn-menu > li > a {
    position: relative;
}
.gn-menu > li > a > .badge {
    position: absolute;
    top: 15px;
    left: 35px;
    background-color: orange;
    color: #fff;
    opacity: 1;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}
.gn-menu > li > a > .badge:empty::before {
    content: '';
}
.gn-menu > li > a > .badge:empty {
    opacity: 0;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
}
.mi {
    line-height: inherit;
    vertical-align: middle;
}
.btn {
    padding: 7px 12px;
    font-size: 16px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}
.btn:focus {
    box-shadow: 0px 0px 0px 3px rgba(255,255,255,0.5) inset;
}
.btn-lg+.btn-lg {
    margin-left: 10px;
}

.btn-group {
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.btn-group .btn.selected {
    background-color: #63A8EB;
    color: #fff;
}

.btn-lg {
    overflow: hidden;
}

.btn-label {
    background:rgba(0, 0, 0, 0.09);
}

.btn.btn-primary,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary:focus {
    color: #fff;
    font-weight: 400;
    border: 0;
    background: #1b5eb4;
    background: -moz-linear-gradient(left, #1b5eb4 0%, #0595e5 100%);
    background: -webkit-linear-gradient(left, #1b5eb4 0%,#0595e5 100%);
    background: linear-gradient(to right, #1b5eb4 0%,#0595e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b5eb4', endColorstr='#b26ba5',GradientType=0 );
}

.btn.btn-primary:focus,
.btn.btn-primary:active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:active:focus,
.open > .dropdown-toggle.btn-primary:focus:focus,
.open > .dropdown-toggle.btn-primary:focus:active:focus {
    background-color: #735794;
    border-color: #735794;
}

.btn.btn-danger,
.open > .dropdown-toggle.btn-danger,
.open > .dropdown-toggle.btn-danger:focus {
    color: #fff;
    font-weight: 400;
    border: 0;
    background: #eb227c;
    background: -moz-linear-gradient(left, #eb227c 0%, #f95d8b 100%);
    background: -webkit-linear-gradient(left, #eb227c 0%,#f95d8b 100%);
    background: linear-gradient(to right, #eb227c 0%,#f95d8b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb227c', endColorstr='#f95d8b',GradientType=0 );
}

.btn.btn-info,
.open > .dropdown-toggle.btn-info,
.open > .dropdown-toggle.btn-info:focus {
    color: #fff;
    font-weight: 400;
    border: 0;
    background: #00aaea ;
    background: -moz-linear-gradient(left, #00aaea  0%, #39c3f6 100%);
    background: -webkit-linear-gradient(left, #00aaea  0%,#39c3f6 100%);
    background: linear-gradient(to right, #00aaea  0%,#39c3f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00aaea ', endColorstr='#39c3f6',GradientType=0 );
}
.btn.btn-success,
.open > .dropdown-toggle.btn-success,
.open > .dropdown-toggle.btn-success:focus {
    color: #fff;
    font-weight: 400;
    border: 0;
    background: #42b382 ;
    background: -moz-linear-gradient(left, #42b382  0%, #24be7b 100%);
    background: -webkit-linear-gradient(left, #42b382  0%,#24be7b 100%);
    background: linear-gradient(to right, #42b382  0%,#24be7b 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42b382 ', endColorstr='#24be7b',GradientType=0 );
}
.btn-line {
    background-color: transparent;
    border: 2px solid;
}
.btn-line.white {
    border-color: #fff;
    color: #fff;
}
.btn-line.white:hover {
    background-color: rgba(255,255,255,0.3);
}
.btn-line.white:focus {
    box-shadow: none;
}
.radio label > * {
    line-height: 17px;
}
.radio.radio-big label > * {
    line-height: 22px;
}
.radio label > span {
    margin: 0 20px 0 0;
}
.radio.radio-big i:before {
    top: unset;
}
.radio.radio-big i:after {
    top: 2px;
    left: 5px;
    width: 14px;
    height: 14px;
}
.checkbox input[type="checkbox"]:disabled + i,
.radio input[type="radio"]:disabled + i {
    opacity: 0.5;
}

.checkbox input[type="checkbox"]:disabled+i+span,
.radio input[type="radio"]:disabled+i+span {
    color: #c7d2d6;
    cursor: not-allowed;
}

.radio-success input[type="radio"]:checked + i::before {
    border-color: #1b5eb4;
}

.radio-success input[type="radio"]:checked + i::after {
    background-color: #1b5eb4;
}

.checkbox-success i:before,
.radio-success i:before {
    background-color: #edf5ff  !important;
    border-color: #1b5eb4;
}

.checkbox-success input[type="checkbox"]:checked + i::before,
.checkbox-success input[type="radio"]:checked + i::before {
    background-color: #1b5eb4 !important;
    border-color: #1b5eb4;
}
.checkbox.i-block {
    vertical-align: middle;
}
.switcher[disabled="true"] + label {
    opacity: 0.5;
    cursor: not-allowed;
}
.modal {
    padding-right: 0 !important;
}

.modal-footer .btn-lg {
    padding: 10px 32px;
}

.modal-backdrop {
    z-index: 1201;
}

.modal-backdrop ~ .modal-backdrop {
    background-color: transparent;
}

.modal.simple-modal .close {
    font-weight: 100;
    padding: 0;
}

.simple-modal .modal-header .close:hover {
    color: #5f5f5f;
}
.multi-modal {
    background-color: transparent;
    transition: 0.2s ease-in-out;
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -ms-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
}
.multi-modal.in {
    background-color: rgba(0,0,0,0.5);
}
.btn-labeled {
    padding-top: 0;
    padding-bottom: 0;
    /* padding: 0px 16px; */
}

.btn-labeled .btn-label {
    padding: 10px 12.5px;
    left: -12.5px;
}

.btn-cancel {
    background-color: #C1C1C1;
    color: #fff;
}

.btn-cancel:focus,
.btn-cancel:active {
    background-color: #a8a8a8;
    color: #fff;
}

.btn-cancel:hover {
    background-color: #b9b9b9;
    color: #fff;
}
.onlyMobile {
    visibility: collapse;
    display: inline-block;
    width: 0;
}
.onlyPC {
    visibility: visible;
    display: unset;
    width: unset;
}
.pcHide{
    display: none;
}
.content-box.fit-box {
    height: 100%;
}

.form-margin {
    margin-right: 7px;
}

.toast-popup {
    top: 32px !important;
    /* top: 6px !important; */
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #5d636b;
    font-size: 18px !important;
    padding: 10px 25px;
    border: 0;
    box-shadow: 0px 2px 10px rgba(85, 85, 85, 0.3);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.modal-full {
    width: calc(100% - 50px);
}

.modal-big {
    width: 70%;
}

.modal-body-content.full_content {
    height: 100%;
}

.modal-header .close {
    padding: 6px;
}

.modal-header .close:hover {
    color: #63A8EB;
}

.modal-header,
.modal-footer {
    border: 0;
}

.modal-title i,
.confirmation-modal .modal-title:before {
    color: #1b5eb4;
    margin-right: 6px;
}

.modal-body-content {
    min-height: 100px;
}

table .checkbox,
table .radio {
    line-height: 1;
}

table .checkbox i:after {
    line-height: 1.8;
}
/* .form-group .checkbox label {
    padding-top: 10px;
} */
.form-group:empty {
    margin-bottom: 0;
}
.form-control[readonly] {
    cursor: default;
}

.file_uploader {
    cursor: pointer !important;
}

.fileinput .form-control {
    overflow: hidden;
    /* white-space: pre-wrap; */
    background-color: #F5F5F5;
}

/* .input_loading:after {
	left: 45px;
} */
.loading + .chosen-container > * {
    color: #fff;
}
.input_loading:after {
	position: absolute;
	left: 70px;
	line-height: 30px;
	content: 'LOADING...';
	font-weight: 500;
    color: #388bf6;
}
.input_loading {
	display: none;
	position: absolute;
	top: 4px;
	right: 110px;
	width: 70px;
    height: 30px;
    
	background-image:
			linear-gradient(#fff,#388bf6,#fff),
			linear-gradient(#fff,#388bf6,#fff),
			linear-gradient(#fff,#388bf6,#fff),
			linear-gradient(#fff,#388bf6,#fff),
			linear-gradient(#fff,#388bf6,#fff),
			linear-gradient(#fff,#388bf6,#fff),
			linear-gradient(#fff,#388bf6,#fff);

	background-position:
			calc(50% - 15px) 50%,
			calc(50% - 10px) 50%,
			calc(50% - 5px) 50%,
			50% 50%,
			calc(50% + 5px) 50%,
			calc(50% + 10px) 50%,
			calc(50% + 15px) 50%;

	background-size:
			3px 10px,
			3px 10px,
			3px 10px,
			3px 10px,
			3px 10px,
			3px 10px,
			3px 10px;
	background-repeat: no-repeat;

	animation: l-bars 1s linear infinite alternate;
	-webkit-animation: l-bars 1s linear infinite alternate;
}
@keyframes l-bars {
	0% {
		background-size:
				3px 20px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px;
	}
	16.6% {
		background-size:
				3px 10px,
				3px 20px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px;
	}
	33.2% {
		background-size:
				3px 10px,
				3px 10px,
				3px 20px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px;
	}
	49.8% {
		background-size:
				3px 10px,
				3px 10px,
				3px 10px,
				3px 20px,
				3px 10px,
				3px 10px,
				3px 10px;
	}
	66.4% {
		background-size:
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 20px,
				3px 10px,
				3px 10px;
	}
	83% {
		background-size:
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 20px,
				3px 10px;
	}
	100% {
		background-size:
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 10px,
				3px 20px;
	}
}

.bfd-dropfield-inner {
    font-size: 18px;
    padding-top: 20px !important;
    font-weight: 100;
}

.bfd-dropfield-inner:before {
    display: block;
    content: '\f167';
    font-family: 'Material Design Icons';
    font-size: 150px;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    opacity: 0.2;
    line-height: 1;
}

.bfd-dropfield-inner:hover:before {
    display: block;
    content: '\f167';
    font-family: 'Material Design Icons';
    color: #92AAB0;
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    opacity: 1;
}
.gm-style-mtc > div {
    width: 100%;
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700;
    height: 30px !important;
}
.gm-style-mtc > div > * {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    height: 30px !important;
    margin: 0 !important;
    margin: -5px 2px 10px !important;
    background-color: transparent !important;
}
.gm-style-mtc > div[aria-pressed="true"] {
    background-color: #3396ff !important;
    color: #fff !important;
}
.gm-style-mtc span[role="checkbox"] > img {
    transform: translateY(-0.1em) !important;
    -webkit-transform: translateY(-0.1em) !important;
    -moz-transform: translateY(-0.1em) !important;
    -ms-transform: translateY(-0.1em) !important;
    -o-transform: translateY(-0.1em) !important;
}
.gm-style-iw-ch {
    display: none;
}
.gm-style-iw-chr {
    position: absolute;
    right: 0;
}
.gm-style .gm-style-iw-d {
    padding-top: 14px;
    padding-right: 30px;
    padding-left: 0;
}
/* .bfd-ok,
.bfd-cancel {
    padding: 10px 32px;
    font-size: 16px;
    font-weight: 400;
    color: #fff !important;
}

.bfd-cancel {
    background-color: #c1c1c1 !important;
} */
.attachList {
    padding: 10px 0px;
    margin: 0 -5px;
}
.attachList:after {
    display: block;
    content: '';
    clear: both;
}
.attachItem {
    /* display: inline-block; */
    float: left;
    max-width: 100%;
    padding: 4px 10px 4px;
    border: 1px solid #88bcd2;
    background-color: #ebf5ff;
    color: #838c95;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    margin: 5px;
    white-space: nowrap;
}
.attachItem.readonly {
    cursor: pointer;
}
.attachItem > i:first-child {
    color: #2371c0;
    margin-right: 5px;
}

.attachItem > i:last-child {
    color: #e91717;
    cursor: pointer;
}

.attachItem.readonly > i:last-child {
    display: inline-block;
    visibility: hidden;
    width: 0;
}

.attachItem > .fileName {
    display: inline-block;
    /* max-width: 100%; */
    /* width: calc(100% - 35px); */
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
}

select.form-control,
input.form-control {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 8px 10px 8px 10px;
    height: auto;
}
.form-control::placeholder {
    color: #bbbbbb;
}
select.form-control {
    padding: 8px 20px 8px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-background-image: url(../images/select_arrow.png);
    background-image: url(../images/select_arrow.png);
    background-position: 99% 8px;
    background-repeat: no-repeat;
}
select.form-control::-ms-expand {
    display: none;
}
select.form-control.material::-ms-expand {
    display: block;
}
select.form-control.material:disabled {
    line-height: 18px;
}
select.form-control:disabled {
    background-image: none;
}
.form-group {
    margin-bottom: 10px;
}

.form-group.material {
    position: relative;
    /* margin-top: 25px; */
    margin-bottom: 45px;
    padding: 0 15px;
}
.form-group.material .form-control {
    font-size: 18px;
}
.form-group.material input.form-control ~ label {
    position: absolute;
    pointer-events: none;
    top: 8px;
    left: 15px;
    font-size: 18px;
    font-weight: 300;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.form-group.material input.form-control:focus ~ label, 
.form-group.material input.form-control:valid ~ label {
    top: -20px;
    left: 15px;
    font-size: 14px;
    color: #1b5eb4;
    font-weight: 500;
    padding: 0;
}
.form-group.material input.form-control:focus ~ label > .materialPlaceholder,
.form-group.material input.form-control:valid ~ label > .materialPlaceholder {
    display: none;
}
.form-group.material .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 20%;
    left: 15px;
    pointer-events: none;
    opacity: 0.5;
}
.form-group.material input.form-control:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}
.form-control:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 5px rgba(0,123,255,.25);
}
.form-group.material > i {
    position: absolute;
    top: 7px;
    left: 15px;
    font-size: 24px;
    line-height: 1;
    opacity: 0.5;
}
.form-group.material .inputMsg {
    position: absolute;
    color: #ff5722;
    padding: 3px 0;
}
.form-group.material > i ~ input.form-control {
    padding-left: 31px;
}
.form-group.material > i ~ .highlight {
    left: 46px;
}
.form-group.material > i ~ label {
    padding-left: 30px;
}
/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}


select.form-control option:disabled {
    color: rgba(0, 0, 0, 0.3);
}

.searchForm {
    position: relative;
    padding-right: 40px;
}

.searchForm .btnSearch {
    position: absolute;
    background-color: unset;
    border: none;
    top: 0;
    right: 0;
    width: 37px;
    height: 100%;
    float: right;
    text-align: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.05);
    color: #1b5eb4;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.searchForm .btnSearch:hover {
    background-color: #1b5eb4;
    color: #fff;
}

.searchForm .btnSearch:active {
    background-color: #1250a1;
    color: #fff;
}

.searchForm .btnSearch:before {
    content: '\f349';
    font-size: 24px;
    font-family: 'Material Design Icons';
}

.searchForm .btnSearch:disabled {
    color: #dddddd;
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.05);
}

.fileinput-new .form-control[data-trigger=fileinput] {
    border-radius: 0 50px 50px 0 !important;
    -webkit-border-radius: 0 50px 50px 0 !important;
    -moz-border-radius: 0 50px 50px 0 !important;
    -ms-border-radius: 0 50px 50px 0 !important;
    -o-border-radius: 0 50px 50px 0 !important;
}

.form-control.material {
    padding-left: 0;
    border: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1b5eb4), to(#1b5eb4)), -webkit-gradient(linear, left top, left bottom, from(#d2d2d2), to(#d2d2d2)) !important;
    background-image: -webkit-linear-gradient(#1b5eb4, #1b5eb4), -webkit-linear-gradient(#d2d2d2, #d2d2d2) !important;
    background-image: linear-gradient(#1b5eb4, #1b5eb4), linear-gradient(#d2d2d2, #d2d2d2) !important;
}
select.form-control.material {
    -webkit-appearance: menulist;
}
textarea.form-control.material {
    background-color: #fbfbfb;
    padding: 5px;
    resize: vertical;
    min-height: 100px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) inset !important;
    border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
}

input[type=number].form-control.material {
    padding-right: 0;
}

.fileinput input[type=file] {
    width: 100%;
}

.fileinput input[type=file][disabled] {
    cursor: not-allowed;
}

.fileinput .btn {
    box-shadow: none;
    border: 1px solid #E7EBEC;
}

.fileinput .btn-default:active,
.fileinput .btn-default:focus {
    background-color: #fff !important;
    border-color: #E7EBEC;
}

.fileinput-filename {
    word-break: break-all;
}

.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
    border-radius: 50px 0 0 50px;
    -webkit-border-radius: 50px 0 0 50px;
    -moz-border-radius: 50px 0 0 50px;
    -ms-border-radius: 50px 0 0 50px;
    -o-border-radius: 50px 0 0 50px;
}
.processList {
    position: relative;
    overflow: hidden;
    margin: 0 15px;
    /*height: 240px;*/
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.processList:after {
    content: '';
    display: block;
    clear: both;
}
.processItem {
    position: absolute;
    width: 100%;
    top: 0;
    left: 100%;
    float: left;
    visibility: hidden;
    opacity: 0;
    margin-top: 20px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.processItem.active {
    visibility: visible;
    opacity: 1;
    left: 0;
}
.processItem.passed {
    left: -100%;
}

.processItem .btn-lg {
    padding: 10px 32px;
}

.multiple-group .btn {
    color: #63A8EB;
}

.fn_comment {
    word-break: keep-all;
    padding-left: 22px;
    font-size: 14px;
}

.fn_comment:before {
    content: "\f27b";
    font-family: 'FontAwesome';
    color: #ff5722;
    margin-right: 8px;
    margin-left: -22px;
}
.fn_guide .fn_comment:last-child {
    margin-bottom: 0;
}
.progress_bar {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 5px;
}

.loginProgress {
    position: fixed;
    width: 100%;
    height: 5px;
    top: 0;
    left: 0;
    z-index: 999;
}

.progress_range {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    background-color: #1b5eb4;
}

.tabbable .nav-tabs > li > a {
    font-size: 20px;
    background: rgba(0,0,0,0.05);
}
.tabbable .nav-tabs > li:hover a {
    background: rgba(0,0,0,0.03);
}
.nav-tabs > li > a > i {
    margin-right: 5px;
    color: #1b5eb4;
}
.nav-justified + .tab-content .tab-pane {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
h2.content_box_title {
    margin: 0px 30px 20px;
    white-space: nowrap;
    /* border-bottom: 2px solid #ccc; */
}

h2.content_box_title > span {
    padding-right: 20px;
    line-height: 40px;
}

h2.content_box_title > span > i {
    margin-right: 5px;
    color: #1b5eb4;
}
/* h2.content_box_title button {
    margin-top: -10px;
} */
.control-label {
    font-size: 15px;
    font-weight: 500;
}
.form-horizontal .control-label {
    padding-left: 38px;
}
.control-label:before {
    content: "\f4fc";
    font-family: "Material Design Icons";
    color: #1b5eb4;
    margin-left: -23px;
    margin-right: 8px;
}
/* label.mustItem > span:after, */
.control-label.mustItem:after {
    content: '*';
    color: #ff5722;
    margin-left: 5px;
}
.scheduleControl .mustItem:after {
    content: '*';
    color: #ff5722;
    margin-left: 5px;
}
.tabs-with-bg {
    background: rgba(228, 228, 228, 0.5);
}
.tabs-with-bg .nav-tabs {
    position: relative;
    z-index: 1;
}
.tabs-with-bg i {
    margin-right: 0px;
}

.dateRangePicker .input-group-addon:hover,
.datetimepicker .input-group-addon:hover {
    background-color: #1b5eb4;
    color: #fff;
}

.dateRangePicker .input-group-addon:active,
.datetimepicker .input-group-addon:active {
    background-color: #1b5eb4;
}

.dateRangePicker .input-group-addon,
.datetimepicker .input-group-addon {
    background-color: rgba(0, 0, 0, 0.05);
    color: #1b5eb4;
    border: 1px solid transparent;
    cursor: pointer;
    border: 0;
    border-radius: 0 20px 20px 0;
    -webkit-border-radius: 0 20px 20px 0;
    -moz-border-radius: 0 20px 20px 0;
    -ms-border-radius: 0 20px 20px 0;
    -o-border-radius: 0 20px 20px 0;
}
.dateRangePicker .input-group-addon {
    background-color: #E7EBEC;
}
.daterangepicker .ranges li {
    font-weight: 500;
}
.datetimepicker.material-group .input-group-addon {
    border: 0;
    /*padding: 6px 10px;*/
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.bootstrap-datetimepicker-widget a[data-action] {
    box-shadow: none;
}

.tableContainer.ag-theme-alpine {
    border-bottom: 0;
}
.tableContainer.ag-theme-alpine-dark {
    border-bottom: 0;
}
/* ag grid custom */

.ag-root-wrapper {
    font-family: 'Roboto','Noto Sans KR',sans-serif;
    background-color: rgba(0,0,0,0.01) !important;
    border: 1px solid rgba(0,0,0,0.5) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
}

.ag-header {
    border-bottom: 1px solid rgba(0,0,0,0.5) !important;
}
.ag-row {
    background-color: rgba(0,0,0,0) !important;
}
.ag-row-hover .ag-cell {
    background-color: rgba(0,0,0,0.02) !important;
}
.ag-pinned-left-header {
    border-color: rgba(0,0,0,0.1) !important;
}
.ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
    border-right-color: rgba(0,0,0,0.1) !important;
}
.ag-row {
    border-top-color: rgba(0,0,0,0.1) !important;
}
.ag-row-last {
    border-bottom-color: rgba(0,0,0,0.1) !important;
}
.ag-header,
.ag-row-odd {
    background-color: rgba(0,0,0,0.05) !important;
}

/* ag grid custom end */

.confirmation-modal .modal-title {
    color: inherit;
    font-size: 20px;
    font-weight: 500;
}

.confirmation-modal .modal-title:before {
    content: '\f02a';
    font-family: 'Material Design Icons';
}
.modalPackageIcon {
    width: 16.66666667%;
    padding: 15px;
    background-color: #f6f9fb;
    border: 1px solid #ebebeb;
    float: left;
    border-radius: 15%;
    -webkit-border-radius: 15%;
    -moz-border-radius: 15%;
    -ms-border-radius: 15%;
    -o-border-radius: 15%;
}
.modalPackageIcon img{
    width: 100%;
    max-width: 65px;
    transform-origin: bottom;
}
.modalPackageIntro {
    width: 83.33333333%;
    padding: 0 15px;
    float: left;
}
.iconAIMS img{
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.packageModal .modal-header {
    padding-bottom: 0;
    /* border-bottom: 1px solid #ebebeb; */
}
.packageModal .modal-header .close {
    position: relative;
    z-index: 2;
}
/* .packageModal .modal-body {
    padding-top: 0;
} */
.packageHeader {
    width: 91.66666667% !important;
    margin-top: 5px;
}
.modalPackageTitle {
    font-size: 23px;
    font-weight: 700;
}

.modalPackageSummary {
    max-width: 500px;
    margin: 25px 0 20px 0;
    font-weight: 300;
    word-break: keep-all;
}

h2.modal_box_title {
    padding: 5px 10px;
    white-space: nowrap;
    font-size: 18px;
}

h2.modal_box_title > span {
    padding-right: 20px;
    line-height: 40px;
    color: #1b5eb4;
}
h2.modal_box_title > span > i {
    color: #1b5eb4;
    font-size: 20px;
}
.packageScreen {
    background-color: #f6f9fb;
    border-top: 1px solid rgba(60, 64, 67, 0.15);
    border-bottom: 1px solid rgba(60, 64, 67, 0.15);
    padding: 40px 15px;
}
.screenShotGrid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}
.screenShotGrid::-webkit-scrollbar {
    height: 8px;
}
.screenShotGrid::-webkit-scrollbar-thumb {
    background: rgba(60, 64, 67, 0.3);
    border-radius: 4px;
}
.screenShotGrid::-webkit-scrollbar-track {
    background: transparent;
}
.screenShotItem {
    flex: 0 0 60%;
    max-width: 520px;
    min-width: 280px;
    background: #fff;
    cursor: pointer;
    border: 1px solid rgba(60, 64, 67, 0.1);
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.screenShotItem > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}
.screenShotItem:hover > img {
    transform: scale(1.03);
}
.swiper-container {
    width: 100%;
    /* height: 300px; */
    /* margin: 20px auto; */
}
.swiper-container:before,
.swiper-container:after {
    content: '';
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 2;
    background: #f6f9fb;
}
.swiper-container:before {
    left: 0;
    background: -moz-linear-gradient(right, #f6f9fb 40%, rgba(250, 250, 250, 0) 99%);
    background: -webkit-linear-gradient(right, #f6f9fb 40%, rgba(250, 250, 250, 0) 99%);
    background: linear-gradient(to right, #f6f9fb 40%, rgba(250, 250, 250, 0) 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f6f9fb', endColorstr='rgba(250, 250, 250, 0)', GradientType=1);
    -webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f9fb', endColorstr='rgba(250, 250, 250, 0)', GradientType=1);
}
.swiper-container:after {
    right: 0;
    background: -moz-linear-gradient(left, #f6f9fb 40%, rgba(250, 250, 250, 0) 99%);
    background: -webkit-linear-gradient(left, #f6f9fb 40%, rgba(250, 250, 250, 0) 99%);
    background: linear-gradient(to left, #f6f9fb 40%, rgba(250, 250, 250, 0) 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f6f9fb', endColorstr='rgba(250, 250, 250, 0)', GradientType=1);
    -webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f9fb', endColorstr='rgba(250, 250, 250, 0)', GradientType=1);
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide > img {
    width: 100%;
}
.swiper-button-next, 
.swiper-button-prev {
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.fullLayerModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    z-index: 2000;
    overflow: auto;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.fullLayerContent {
    position: absolute;
    width: 90%;
    padding-top: 40px;
    padding-bottom: 40px;
    top: 50%;
    left: 50%;
    text-align: center;
    overflow: hidden;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.fullLayerContent > img {
    max-width: 100%;
}
.fullLayerClose {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    cursor: pointer;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.fullLayerHidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.package_slider .col-lg-6 {
    padding-left: 5px;
    padding-right: 5px;
}

.confirmation-modal .modal-body {
    font-size: 16px;
    font-weight: 100;
    text-align: center;
    word-break: keep-all;
}

.confirmation-modal .confirmMessageIcon {
    color: #F8BB86;
    font-size: 120px;
    line-height: 1;
    margin: 20px auto;
    padding: 0;
    position: relative;
    box-sizing: content-box;
}

.sweet-alert {
    margin-left: -239px;
    font-family: inherit;
    color: inherit;
    padding-bottom: 30px;
}

.sweet-alert p {
    /* line-height: 1.5; */
    /* line-height: 2; */
    font-weight: 400;
    line-height: 1.7;
    font-size: 18px;
    margin-bottom: 15px;
    word-break: keep-all;
}

.sweet-alert button {
    font-size: 16px;
    font-weight: 400;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}
.sweet-alert input {
    text-align: center;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.sweet-alert h2 {
    font-weight: 500;
    color: inherit;
}

.sweet-alert .sa-input-error {
    top: 24px;
    right: 11px;
}

.sweet-alert .sa-input-error::before,
.sweet-alert .sa-input-error::after {
    display: none;
}
.tooltipIcon {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 2px;
    margin-top: -3px;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    white-space: normal;
}
.tooltipIcon .tooltipBtn:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\f64e';
    font-family: 'Material Design Icons';
    font-weight: 300;
    color: #1b5eb4;
    font-size: 16px;
    line-height: 1;
    border: 1px solid #1b5eb4;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.tooltipContent {
    display: none;
    position: fixed;
    max-width: 500px;
    height: auto;
    max-height: min-content;
    /* bottom: 0; */
    margin: 0 25px 25px;
    z-index: 98;
    padding: 24px 15px 15px;
    background-color: rgba(255,255,255,0.7);
    border: 1px solid #d2d7dc;
    border-radius: 3px;
    text-align: left;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    overflow: auto;
    cursor: default;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.modal .tooltipContent {
    margin-top: -30px;
}
.tooltipContent * {
    word-break: keep-all;
    color: #5a5a5a;
}
.tooltipContent a, a:hover {
    cursor: pointer;
    color: #3396ff;
}
.tooltipContent h4 {
    font-weight: 500;
    margin: 5px 0 10px;
    font-size: 16px;
    /* color: #5a5a5a; */
}

.tooltipContent p {
    line-height: 1.6;
    font-weight: 300;
    font-size: 15px;
}

.tooltipClose {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    color: #9ca0a3;
    font-weight: 100;
}

.tooltipClose:before {
    content: '\f156';
    font-family: 'Material Design Icons';
}
.qToolTip {
    display: inline-block;
    position: relative;
}
.qToolTip .qToolTipText {
    background-color: #1f2031;
    color: #fff;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    white-space: nowrap;
    font-size: 12px;
    padding: 2px 8px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.qToolTip:hover .qToolTipText {
    visibility: visible;
    opacity: 1;
}
.qToolTipText:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
}
.qToolTipText.top {
    top: -3px;
    left: 50%;
    transform: translate(-50%, -100%);
    -webkit-transform: translate(-50%, -100%);
    -moz-transform: translate(-50%, -100%);
    -ms-transform: translate(-50%, -100%);
    -o-transform: translate(-50%, -100%);
}
.qToolTipText.top:before {
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid #1f2031;
}
.qToolTipText.left {
    left: -3px;
    top: 50%;
    transform: translate(-100%, -50%);
    -webkit-transform: translate(-100%, -50%);
    -moz-transform: translate(-100%, -50%);
    -ms-transform: translate(-100%, -50%);
    -o-transform: translate(-100%, -50%);
}
.qToolTipText.left:before {
    right: -10px;
    top: 50%;
    margin-top: -5px;
    border-left: 5px solid #1f2031;
}
.floatTooltipTarget {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}
.floatTooltip {
    background-color: #1f2031;
    color: #fff;
    position: fixed;
    white-space: nowrap;
    pointer-events: none;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.floatTooltip:hover {
    background-color: rgba(0,0,0,0.5);
}
.floatTooltip.top {
    transform: translate(-50%, -170%);
    -webkit-transform: translate(-50%, -170%);
    -moz-transform: translate(-50%, -170%);
    -ms-transform: translate(-50%, -170%);
    -o-transform: translate(-50%, -170%);
}
.floatTooltip:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
}
.floatTooltip.top:before {
    bottom: -10px;
    left: 50%;
    margin-left: -5px;
    border-top: 5px solid #1f2031;
}
.packageDetail {
    position: relative;
    display: inline-block;
    padding-left: 18px;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.packageDetail .packageBtn:before {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 300;
    color: #1b5eb4;
    font-size: 16px;
    line-height: 1;
    border: 1px solid #1b5eb4;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.packageBtn {
    position:relative;
    bottom: 0;
    border-radius: 5px;
    border: 1px solid rgba(60, 64, 67, 0.3);
    background-color: #fff;
    padding: 5px 10px 4px 10px;
    color: #1b5eb4;
    font-weight: 400;
}

.packageBtn:hover,
.packageBtn:active,
.packageBtn:focus {
    border: 1px solid #a7caee;
    box-shadow: rgba(60, 64, 67, 0.2) 1px 1px 2px;
}
.packageFeatures {
    padding: 0 15px;
}
.packageFeatures li {
    color:#616970;
    padding: 2px 0;
    font-weight: 500;
    font-size: 16px;
    padding-left: 20px;
    word-break: keep-all;
}
.packageFeatures li p {
    color: #76828E;
    font-weight: 400;
    font-size: 15px;
    padding: 3px 0 0 0;
    margin-top: 5px;
}
.packageFeatures li .featureName:before {
    content: '\FE6E';
    font-family: 'Material Design Icons';
    color: #63c59b;
    margin-left: -20px;
    margin-right: 5px;
}
.packageContent {
    display: none;
    position: fixed;
    max-width: 500px;
    height: auto;
    max-height: min-content;
    margin: 0 25px 25px;
    z-index: 98;
    padding: 25px 25px 15px 25px;
    background-color: #fff;
    border: 1px solid #a7caee;
    border-radius: 3px;
    text-align: left;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    overflow: auto;
    cursor: default
}
.packageLabel {
    position: absolute;
    left: 0;
    bottom: 15px;
    width: 100%;
}
.packageLabel .packageDetail {
    float: left;
}
.packageLabel .switch {
    float: right;
    padding-top: 5px;
    padding-right: 20px;
    display: block;
    color: #697480;
}
.packageLabel .switch span {
    font-size: 14px;
}
.packageLabel .switch > * {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.modal .packageContent {
    margin-top: -30px;
}
.packageContent * {
    word-break: keep-all;
    color: #5a5a5a;
}
.packageContent a, a:hover {
    cursor: pointer;
    color: #3396ff;
}
.packageContent h4 {
    font-weight: 500;
    margin: 5px 0 10px;
    font-size: 16px;
    /* color: #5a5a5a; */
}

.packageContent p {
    line-height: 1.6;
    font-weight: 300;
    font-size: 15px;
}

.packageClose {
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    height: 24px;
    font-size: 18px;
    cursor: pointer;
    color: #63A8EB;
    font-weight: 100;
}

.packageClose:before {
    content: '\f156';
    font-family: 'Material Design Icons';
}

.form-group .note-editor {
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
}

.note-toolbar {
    z-index: 97;
    position: relative !important;
}

.note-editor.note-frame.fullscreen {
    z-index: 5000;
}

.note-popover.popover {
    z-index: 5100;
}

.note-editor.note-frame {
    border: 1px solid #cacaca;
}

.note-editing-area,
.note-editable {
    min-height: 140px;
}

.note-editable img {
    max-width: 100%;
}
.note-editor .form-group {
    margin-right: 0;
    margin-left: 0;
}

.checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin-top: 0;
}

.link-dialog .checkbox input[type="checkbox"],
.note-dialog .checkbox input[type="checkbox"] {
    opacity: 1;
}

.note-editor .dropdown-menu {
    left: unset;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}
/* .form-group.note-group-image-url {
    overflow: visible !important;
} */
.note-group-image-url,
.note-form-group {
    padding: 10px;
}
.note-group-image-url:after,
.note-form-group:after {
    content: '';
    clear: both;
}
.dropdown-menu.note-table {
    overflow: hidden;
}
button.note-btn.disabled,
button.note-btn.disabled:hover {
    background-color: #fff;
    border-color: #e2e2e2;
    color: #76828E;
    opacity: 0.6;
}
.note-editor.note-frame .note-editing-area .note-editable[contenteditable="false"] {
    background-color: #ffffff;
}
.note-status-output {
    padding-top: 0;
}
/* scroll-to-top */

a.scroll_to_top {
    display: inline-block;
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border: 1px solid #fff;
    background-color: #1b5eb4;
    font-size: 36px;
    text-align: center;
    line-height: 55px;
    color: #fff;
    z-index: 601;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

a.scroll_to_top:hover {
    background-color: #fff;
    border: 1px solid #1b5eb4;
    color: #1b5eb4;
}

/* locale */

.cs-skin-elastic > span::after {
    right: 13px;
    font-family: 'Material Design Icons';
    content: '\f140';
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-size: 20px;
}

.cs-select .cs-selected span::after {
    font-family: 'Material Design Icons';
    content: '\f12c';
    margin-left: 1em;
}

.cs-skin-elastic .cs-options {
    padding-bottom: 0;
    width: auto;
    min-width: 100%;
}

.cs-skin-elastic .cs-options > ul::before {
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
}

.simpleTopToolBox .cs-options {
    margin-top: -3px;
}

.simpleTopToolBox .cs-skin-elastic .cs-options span,
.gn-menu-main .cs-skin-elastic .cs-options span {
    padding-left: 52px;
    text-align: left;
    font-weight: 400 !important;
}

.simpleTopToolBox .cs-skin-elastic .cs-options .cs-selected span,
.simpleTopToolBox .cs-skin-elastic .cs-options span:hover,
.gn-menu-main .cs-skin-elastic .cs-options .cs-selected span,
.gn-menu-main .cs-skin-elastic .cs-options span:hover {
    color: #1b5eb4;
    font-weight:500;
}

/* locale end */

/*menu*/

.gn-menu-main,
.simpleTopbar {
    background: #2C393F;
}

.login .login-top {
    background: #90c1f1;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
}

.login .login-top > h1 {
    cursor: pointer;
}
.login .login-top > h1 > img {
    height: 78px;
    max-width: 100%;
}
.loginBody .login .login-top > h1 > img {
    height: 50px;
    max-width: 100%;
}
.loginBody .introBG .btn-block {
    width: calc(50% - 5px);
    float: left;
}
.loginBody .introBG .btn-block:first-child {
    margin-right: 5px;
}
.loginBody .introBG .btn-block:last-child {
    margin-left: 5px;
}
.loginBody .introBG .btn-block i{
    display: none;
}

.loginBody .introBG .form-control.material {
    border: 1px solid #E4E7EB;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 8px 15px 8px 15px;
    height: 48px;
    background-image: unset !important;
}
.loginBody .introBG .form-control.material:focus {
    outline: 1px solid #267DFF;
}
.loginBody .introBG .btn {
    display: block;
    transition: background 300ms ease-in-out;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.loginBody .introBG .btn-success {
    border: 1px solid #267DFF;
    height: 48px;
    color: #267DFF !important;
    background-color: #fff;
    background-image: linear-gradient(45deg, #267DFF 50%, transparent 50%);
    background-position: 100%;
    background-size: 400%;
    margin-left: 5px;
}
.loginBody .introBG .btn-success:hover {
    background-position: 0;
    color: #267DFF !important;
    box-shadow: 0 1px 3px #267DFF;
    background-image: linear-gradient(45deg, rgb(235, 244, 255) 50%, transparent 50%);
    font-weight: 500;
}
.loginBody .introBG .btn-primary {
    border: 1px solid #267DFF;
    height: 48px;
    color: #fff !important;
    background-color: #267DFF;
    background-image: linear-gradient(45deg, #fff 50%, transparent 50%);
    background-position: 100%;
    background-size: 400%;
    margin-right: 5px;
}
.loginBody .introBG .btn-primary:hover {
    background-position: 0;
    color: #267DFF !important;
    box-shadow: 0 1px 3px #267DFF;
    background-image: linear-gradient(45deg, rgb(235, 244, 255) 50%, transparent 50%);
    font-weight: 500;
}
.loginBody .introBG .btn.btn-primary:focus, 
.loginBody .introBG .btn.btn-primary:active:focus {
    background-color: #267DFF;
}
.loginBody .introBG .btn.btn-success:focus, 
.loginBody .introBG .btn.btn-success:active:focus {
    background-color: #267DFF;
    color: #fff !important;
}
.loginBody .loginFind {
    display: block;
    padding-top: 90px;
    color: #267DFF;
}
.loginBody .loginFind span {
    color: #78828D;
}
.loginBody .loginBottom {
    border: 1px solid #D7E9FF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    /*background: -moz-linear-gradient(bottom, #fff  0%, #D7E9FF 100%);
    background: -webkit-linear-gradient(bottom, #fff  0%,#D7E9FF 100%);
    background: linear-gradient(to bottom, #fff 60%,#D7E9FF 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#D7E9FF',GradientType=0);*/
}
.loginBody .loginBottom a {
    color: #3E496A;
}
.loginBody .loginBottom a:hover {
    font-weight: 500;
    color: #267DFF;
    text-decoration: none;
}
.loginBody .loginBottom span {
    color: #D7E9FF;
}
/* .gn-menu-main,
.simpleTopbar,
.login .login-top {
    background: #4fa7ff;
    background: -moz-linear-gradient(left, #4fa7ff 16%, #034498 99%);
    background: -webkit-linear-gradient(left, #4fa7ff 16%, #034498 99%);
    background: linear-gradient(to right, #4fa7ff 16%, #034498 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4fa7ff', endColorstr='#034498', GradientType=1);
    -webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fa7ff', endColorstr='#034498', GradientType=1);
} */
.gn-menu-main,
.simpleTopbar,
.login .login-top,
.licenseTitle {
    background: #00aaea;
    background: -moz-linear-gradient(left, #00aaea 16%, #034498 99%);
    background: -webkit-linear-gradient(left, #00aaea 16%, #034498 99%);
    background: linear-gradient(to right, #00aaea 16%, #034498 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00aaea', endColorstr='#034498', GradientType=1);
    -webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00aaea', endColorstr='#034498', GradientType=1);
}
.loginBody .introBG .login .login-top {
    background: #267DFF;
    width: 40%;
    max-width: 420px;
    float: left;
    padding-top: 130px;
}
.loginBody .introBG .login .login-top:after {
    background-image: url('../images/loginboxBg.png');
    background-size: 100%;
    position: absolute;
    bottom: -50px;
    content: "";
    width: 284px;
    height: 317px;
    z-index: 999;
}
.loginBody .login .login-form {
    float: right;
    width: 60%;
    height: 100%;
    padding: 120px 90px 30px 90px;
}
.gn-icon {
    background-color: rgba(255, 255, 255, 0.05);
}

.hamburger span,
.cross span {
    background: #273238;
}

.gn-menu-main .navbar-right .cs-select > span,
.simpleTopToolBox .cs-select > span {
    background: transparent;
    border-color: transparent;
    font-weight: 500;
}

.gn-menu-main .navbar-right .cs-select:hover > span,
.simpleTopToolBox .cs-select:hover > span {
    /* background: rgba(148, 207, 255, 0.05) !important; */
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.0) !important;
}
.gn-menu-main .navbar-right a {
    padding: 0 15px !important;
}
.gn-menu-main .navbar-right a:focus,
.gn-menu-main .navbar-right a:hover {
    /* background-color: rgba(148, 207, 255, 0.1) !important; */
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.no-touch .gn-menu-main a:hover,
.no-touch .gn-search-item:hover {
    /* background: rgba(148, 207, 255, 0.1); */
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
}

.no-touch .gn-menu-main .gn-menu > li a:hover {
    background: rgba(255, 255, 255, 0.03);
}

.no-touch .gn-menu-main .gn-menu > li > .gn-submenu a:hover {
    background: transparent;
}

.gn-menu-main .logo {
    line-height: 50px;
    vertical-align: top;
}

.gn-menu-main .logo img {
    height: 40px;
}
.gn-menu-main,
.gn-menu-main ul {
    font-weight: 500;
}
.gn-menu > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.gn-menu > li:hover > a {
    color: #fff !important;
}

.gn-menu-main ul.gn-menu a {
    color: #77829f;
}
.gn-menu-main ul.gn-submenu a {
    /* color: #a8a5c3; */
    color: #a5b1c3;
}
.gn-submenu > li:hover {
    background-color: rgba(148, 207, 255, 0.05);
}

.gn-submenu > li:hover > a {
    color: #fff !important;
}
.gn-menu-head {
    background-color: rgba(40, 100, 170, 0.5);
}
.no-touch .gn-menu-main .gn-menu > li.gn-menu-head > a,
.no-touch .gn-menu-main .gn-menu > li.gn-menu-head > a:hover {
    background: transparent;
}
.gn-menu-head:hover {
    background-color: rgba(40, 100, 170, 0.8);
}
.gn-menu .user_pofile_box,
.gn-menu .service_img_box {
    position: relative;
    width: 66px;
    height: 65px;
    vertical-align: top;
    float: left;
}

.gn-menu .user_pofile_box .shadow_mask,
.gn-menu .service_img_box .shadow_mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1) inset;
    z-index: 5;
}

.gn-menu .user_pofile_info,
.gn-menu .service_info_box {
    display: inline-block;
    padding: 0;
    padding-right: 10px;
    width: calc(100% - 66px);
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    vertical-align: middle;
    overflow: hidden;
    word-break: keep-all;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.gn-menu .user_pofile_box:before,
.gn-menu .service_img_box:before {
    display: inline-block;
    position: absolute;
    /* content: '\f004';
    font-family: 'Material Design Icons'; */
    content: '\EB14';
    font-family: 'micon';
    font-size: 24px;
    line-height: 46px;
    width: 46px;
    height: 46px;
    margin: 10px;
    text-align: center;
    /* background-color: #78909C; */
    background-color: rgba(32, 167, 255, 0.5);
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.7);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.gn-menu .service_img_box:before {
    font-family: 'Material Design Icons';
    content: '\F72A';
}
.gn-menu .user_pofile_box > img,
.gn-menu .service_img_box > img {
    position: absolute;
    vertical-align: middle;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    margin: 10px;
    overflow: hidden;
    object-fit: cover;
    background-color: #fff;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    z-index: 1;
}
.gn-menu .profileMenu {
    position: relative;
}
.gn-menu i:before {
    display: inline-block;
    text-align: center;
    width: 19px;
}
.gn-menu .account i,
.gn-menu .usage i {
    padding: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
}
.gn-menu .account i:hover,
.gn-menu .usage i:hover {
    color: #fff;
}
.gn-menu .usage {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.gn-menu > li ul > li > a > i {
    padding: 0 10px;
}

.gn-menu li > a > i.mi:before {
    /* line-height: 45px; */
    margin-top: -2px;
    vertical-align: top;
}

.gn-submenu > li > a {
    padding-left: 55px;
}

.gn-menu > li.select > a,
.gn-menu > li.select > div > a {
    color: #fff !important;
}

.gn-menu .label.sublabel {
    margin-top: 15px;
}

.gn-open-all .bottom-bnts a.select {
    color: #fff !important;
}

.gn-open-all .bottom-bnts a.fix-nav,
.bottom-bnts .fix-nav {
    display: inline-block;
    width: 100%;
}

.gn-open-all .bottom-bnts {
    text-align: center;
}
.gn-submenu {
    background: #47495f !important;
}
.gn-submenu li {
    transition: max-height .3s;
    -webkit-transition: max-height .3s;
    -moz-transition: max-height .3s;
    -ms-transition: max-height .3s;
    -o-transition: max-height .3s;
}
.gn-menu-wrapper.gn-open-all .gn-submenu li {
    max-height: 1000px;
    height: fit-content;
    line-height: inherit;
}
/* 프로필 메뉴 아이콘 */
.metismenu > li:first-child .fa.arrow:before {
    content: '\F1D9';
    font-family: 'Material Design Icons';
}
/* .bottom-bnts {
    display: none;
}
.gn-scroller {
    height: 100%;
} */

/*menu end*/

/*alarm sidebar*/
.alarms {
    position: relative;
    display: block;
    float: left;
    font-size: 18px;
    padding: 0 25px;
    line-height: 56px;
    cursor: pointer;
}
.alarms:hover {
    background-color: rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.1);
}
.alarms .label {
    position: absolute;
    top: 8px;
    left: 34px;
    right: auto !important;
    font-weight: 500;
    padding: .2em .4em;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.alarms .label:empty {
    display: none;
}
.simpleTopToolBox .alarms {
    margin-right: 4px;
}
.alarmSidebar {
    position: fixed;
    top: 56px;
    right: -395px;
    width: 395px;
    max-width: 100%;
    height: calc(100% - 56px);
    background-color: rgba(255, 255, 255, 0.5);
    padding: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: right 0.2s ease-in-out;
    -webkit-transition: right 0.2s ease-in-out;
    -moz-transition: right 0.2s ease-in-out;
    -ms-transition: right 0.2s ease-in-out;
    -o-transition: right 0.2s ease-in-out;
}
.alarmSidebar.in {
	right: 0px;
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.3);
}
.alarmContainer {
    height: 100%;
}
.alarmHeader {
    position: relative;
    padding: 22px 25px;
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 4px rgb(0 0 0 / 20%);
    box-shadow: 0px 1px 4px rgb(0 0 0 / 20%);
}
.alarmHeader h2 {
    color: #76828E;
    font-size: 18px;
}
.alarmHeader h2 i {
    color: #1b5eb4;
    margin-right: 10px;
}
.alarmHeader .alarmClose {
    position: absolute;
    top: 50%;
    right: 0px;
    width: 70px;
    height: 70px;
    font-size: 18px;
    line-height: 70px;
    text-align: center;
    cursor: pointer;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.alarmTools {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    clear: both;
}
.alarmToggle {
    position: relative;
    float: left;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    background-size: cover;
    background-color: #fff;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid #c2c2c2;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.alarmToggle.disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none;
}
.alarmToggle::before,
.alarmToggle::after {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    color: #fff;
}
.alarmToggle.active::before {
    content: '';
    background-color: rgba(0,0,0,0.4);
}
.alarmToggle.active::after {
    content: '\F12C';
    font-family: 'Material Design Icons';
}
.alarmToggle.all {
	background-image: url('../images/monitoring/all.png');
}
.alarmToggle.info {
	background-image: url('../images/monitoring/safty.png');
}
.alarmToggle.warning {
	background-image: url('../images/monitoring/warning.png');
}
.alarmToggle.danger {
	background-image: url('../images/monitoring/danger.png');
}
.alarmFooter {
    position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
    background-color: rgba(0,0,0,0.05);
    cursor: pointer;
}
.alarmFooter > * {
    display: block;
    float: left;
    width: 50%;
    height: 100%;
    padding: 10px;
    overflow: hidden;
    cursor: pointer;
    line-height: 24px;
    font-weight: 500;
}
.alarmFooter > * i {
    display: inline-block;
    height: 24px;
    font-size: 24px;
    margin-right: 5px;
    vertical-align: middle;
}
.alarmFooter > *.disabled {
    color: #a9b0b6;
    cursor: not-allowed !important;
    pointer-events: none;
}
.alarmStatusToggle span {
    display: block;
}
.alarmStatusToggle span.active {
    display: none;
}
.alarmStatusToggle:hover,
.clearAlarm:hover {
    background: #1b5eb4;
    background: -moz-linear-gradient(left, #1b5eb4 0%, #0595e5 100%);
    background: -webkit-linear-gradient(left, #1b5eb4 0%,#0595e5 100%);
    background: linear-gradient(to right, #1b5eb4 0%,#0595e5 100%);
    color: #fff;
}
.alarmBodyWrap {
    height: calc(100% - 113px);
}
.alarmBodyWrap .contentsLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 300;
}
.alarmBody {
    height: 100%;
}
.alarmList {
    position: relative;
    height: 100%;
    overflow: auto;
    padding: 0;
    margin-top: 0;
}
.alarmList .blankItem {
    padding: 50px 10px;
    text-align: center;
}
.alarmList .blankItem::before {
    display: block;
    width: 100px;
    height: 100px;
    margin: 10px auto;
    font-size: 80px;
    line-height: 85px;
    content: '\F0211';
    font-family: 'Material Design Icons';
    color: #c5c5c5;
    background-color: #fff;
    border: 4px solid #ebebeb;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.alarmItem {
    position: relative;
    margin: 10px;
    cursor: pointer;
}
.alarmItem:after {
    content: '\F140';
    font-family: 'Material Design Icons';
    position: absolute;
    right: 6px;
    bottom: 2px;
    opacity: 0.5;
}
.alarmItem.expanded:after {
    content: '\F143';
}
.alarmBox {
    position: relative;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.7);
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.alarmBox:first-child {
    margin-top: 0;
}
.alarmBox .alarmItemHeader {
    margin-left: 40px;
    display: block;
}
.alarmBox .alarmCheck,
.alarmBox .alarmDelete {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    padding: 0 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
    text-align: center;
    overflow: hidden;
    color: #fff;
    z-index: 2;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.alarmBox .alarmCheck > span,
.alarmBox .alarmDelete > span {
    display: inline-block;
    visibility: hidden;
    font-size: 12px;
    vertical-align: middle;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
}
.alarmBox .alarmCheck:hover,
.alarmBox .alarmDelete:hover {
    width: auto;
}
.alarmBox .alarmCheck:hover > span,
.alarmBox .alarmDelete:hover > span {
    visibility: visible;
    width: auto;
    height: auto;
    padding: 0 4px;
    opacity: 1;
}
.alarmBox .alarmCheck{
    background: #018ed4;
}
.alarmBox .alarmCheck:hover{
    background: #1b5eb4;
    background: -moz-linear-gradient(left, #1b5eb4 0%, #0595e5 100%);
    background: -webkit-linear-gradient(left, #1b5eb4 0%,#0595e5 100%);
    background: linear-gradient(to right, #1b5eb4 0%,#0595e5 100%);
}
.alarmBox .alarmDelete{
  background-color: rgba(44, 57, 63, 0.5);
}   
.alarmBox .alarmDelete:hover{
  background-color: rgba(44, 57, 63, 0.6);
}
.alarmItem.checked .alarmBox .alarmCheck {
  font-weight: 500;
  background: #1b5eb4;
  background: -moz-linear-gradient(left, #1b5eb4 0%, #0595e5 100%);
  background: -webkit-linear-gradient(left, #1b5eb4 0%,#0595e5 100%);
  background: linear-gradient(to right, #1b5eb4 0%,#0595e5 100%);
  color: #fff;
  opacity: 0.5;
}
.alarmCheck,
.read .alarmDelete {
    display: block;
}
.alarmDelete,
.read .alarmCheck {
    display: none;
}
.read .alarmTitle {
  /* color: rgb(138, 138, 138) !important; */
  opacity: 0.5;
}
.read .alarmLinks {
  display: none;
}
.alarmTitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
}
.alarmTime {
    color: #999;
    margin-top: 3px;
    font-size: 12px;
}
.alarmItemBody {
    display: none;
    padding: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
}
.alarmItemBody > * {
    clear: both;
    padding: 5px 0;
    overflow: hidden;
}
.alarmInfoLabel,
.alarmInfoContent {
    display: block;
    float: left;
}
.alarmInfoLabel {
    width: 85px;
    font-weight: 500;
}
.alarmInfoLabel::before {
    content: '';
    font-family: 'Material Design Icons';
    margin-right: 5px;
    color: #1b5eb4;
}
.alarmServiceInfo .alarmInfoLabel::before {
    content: '\F72A';
}
.alarmLocationInfo .alarmInfoLabel::before {
    content: '\F352';
}
.alarmDeviceInfo .alarmInfoLabel::before {
    content: '\F469';
}
.alarmUnitInfo .alarmInfoLabel::before {
    content: '\f61a';
}
.alarmContentInfo .alarmInfoLabel::before {
    content: '\F09F';
}
.alarmInfoContent {
    width: calc(100% - 85px);
    word-break: keep-all;
}
.alarmText {
    display: block;
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    color: inherit;
    word-break: keep-all;
    word-wrap: normal;
    white-space: pre-wrap;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}                
.alarmText i {
    width: 10px;
} 
.alarmText span {
    width: 10px;
}
.alarmLinks a {
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: #1b5eb4;
    display: block;
    width: calc(33.333% - 6px);
    margin: 3px;
    float: left;
    padding: 3px;
    text-align: center;
    background-color: #fff;
    border: 1px solid rgba(60, 64, 67, 0.3);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    transition: all 0.05s ease-in-out;
    -webkit-transition: all 0.05s ease-in-out;
    -moz-transition: all 0.05s ease-in-out;
    -ms-transition: all 0.05s ease-in-out;
    -o-transition: all 0.05s ease-in-out;
}
.alarmLinks a:hover {
    background-color: #1b5eb4;
    border-color: #1b5eb4;
    color: #fff;
}
/*alarm list*/
.alarmDetail_item {
    padding-top: 5px;
    padding-bottom: 5px;
    word-break: keep-all;
}
.alarmDetail_item + .alarmDetail_item {
    border-top: 1px solid rgba(255,255,255,0.2);
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgba(255, 255, 255, 0.2);
}
.sub_list {
    padding: 10px 5px;
}
.sub_item > i {
    margin-left: -17px;
}
.sub_item > i.mdi-close {
    padding: 5px 0 !important;
    margin: 0 !important;
}
.alarmItem.info.selected,
.alarmItem.info.selected:hover {
	border-color: #63A8EB;
	background-color: rgb(99, 168, 235, 0.2);
}
.alarmItem.warning.selected,
.alarmItem.warning.selected:hover {
	border-color: #eb8c20;
	background-color: rgb(235, 140, 32, 0.2);
}
.alarmItem.danger.selected,
.alarmItem.danger.selected:hover {
	border-color: #eb6363;
	background-color: rgba(235, 99, 99, 0.2);
}
.alarmItem.info .alarmTitle {
	color: #3a9cff;
}
.alarmItem.warning .alarmTitle {
	color: #ff8800;
}
.alarmItem.danger .alarmTitle {
	color: #ff4444;
}
.alarmItem .alarmIcon:after {
	content: '';
	position: absolute;
	width: 35px;
	height: 35px;
	top: 12px;
	left: 0px;
	margin: 4px 10px;
	background-size: cover;
}
.alarmItem.info .alarmIcon:after {
	background-image: url('../images/monitoring/safty.png');
}
.alarmItem.warning .alarmIcon:after {
	background-image: url('../images/monitoring/warning.png');
}
.alarmItem.danger .alarmIcon:after {
	background-image: url('../images/monitoring/danger.png');
}
.alarmBox > i:hover {
    opacity: 1;
}
.alarmBox > i {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    opacity: 0.5;
    cursor: pointer;
}
.notificationModal {
    position: fixed;
    perspective: 800px;
    top: 65px;
    right: 10px;
    z-index: 1199;
    color: #fff;
    pointer-events: none;
}
.notificationModal.in {
    pointer-events: all;
}
.notificationModal .notificationContainer {
    display: block;
    width: 373px;
    max-width: calc(100vw - 30px);
    padding: 20px;
    background-color: #4b4b4b;
    transform-origin: 50% -10px;
    opacity: 0;
    cursor: pointer;
    -webkit-box-shadow: 0 13px 10px -5px rgb(0 0 0 / 20%);
    box-shadow: 0 13px 10px -5px rgb(0 0 0 / 20%);
    transform: rotate3d(1,0,0,-90deg);
    -webkit-transform: rotate3d(1,0,0,-90deg);
    -moz-transform: rotate3d(1,0,0,-90deg);
    -ms-transform: rotate3d(1,0,0,-90deg);
    -o-transform: rotate3d(1,0,0,-90deg);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.notificationModal.in .notificationContainer {
    opacity: 1;
    transform: rotate3d(1,0,0,0deg);
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
}
.notificationModal i {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}
.notificationModal .notificationContainer::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    top: -5px;
    left: 15px;
    background-color: #4b4b4b;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.notificationModal[alarm-level="info"] .notificationContainer::before,
.notificationModal[alarm-level="info"] .notificationContainer {
    background-color: rgba(58, 156, 255);
}
.notificationModal[alarm-level="warning"] .notificationContainer::before,
.notificationModal[alarm-level="warning"] .notificationContainer {
    background-color: rgba(244, 123, 43);
}
.notificationModal[alarm-level="danger"] .notificationContainer::before,
.notificationModal[alarm-level="danger"] .notificationContainer {
    background-color: rgba(239, 72, 72);
}
.notiInfo {
    font-size: 12px;
    margin-bottom: 5px;
}
.notificationModal .alarmTitle:before {
    font-family: 'Material Design Icons';
    margin-right: 5px;
}
.notificationModal[alarm-level="info"] .alarmTitle:before {
    content: '\F2FD';
}
.notificationModal[alarm-level="warning"] .alarmTitle:before {
    content: '\F02A';
}
.notificationModal[alarm-level="danger"] .alarmTitle:before {
    content: '\FCC3';
}
.notificationContainer .alarmTime {
    color: inherit;
}
/* simpleTopbar */

.simpleTopbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 56px;
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
    /* background: #2C393F; */
    color: #fff;
    z-index: 1200;
}

.simpleTopbar .back_btn {
    display: inline-block;
    cursor: pointer;
    width: 56px;
    height: 56px;
    font-size: 36px;
    line-height: 56px;
    text-align: center;
    vertical-align: middle;
}

.simpleTopbar .back_btn:hover,
.simpleTopbar .logo:hover,
.simpleTopTool:hover,
.simpleTopProfile:hover {
    background: rgba(255, 255, 255, 0.1);
}

.simpleTopbar .logo {
    display: inline-block;
    font-weight: 300;
    height: 56px;
    padding: 0 20px;
    cursor: pointer;
    vertical-align: middle;
    white-space: nowrap;
}

.simpleTopbar .logo:before {
    display: inline-block;
    height: 100%;
    content: '';
    vertical-align: middle;
}

.simpleTopbar .logo img {
    height: 40px;
    vertical-align: middle;
}
.solutionLogo img {
    height: 40px;
}
.simpleTopToolBox {
    float: right;
}

.simpleTopToolBox > * {
    margin-left: -4px;
    vertical-align: top;
}

.simpleTopToolBox .lang {
    display: inline-block;
    vertical-align: top;
    margin-top: -1px;
}

.simpleTopToolBox > a,
.simpleTopProfile > span {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
}

.simpleTopProfile {
    position: relative;
    display: inline-block;
    padding: 0 35px 0 15px;
    font-size: 16px;
    line-height: 56px;
    height: 56px;
    cursor: pointer;
    font-weight: 500;
}
.simpleTopProfile:after {
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Material Design Icons';
    content: '\f140';
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    font-size: 20px;
    font-weight: 300;
}
.userMenu {
    position: relative;
}
.userMenu.active .simpleTopProfile:after {
    -webkit-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
}
ul.userMenuList {
    position: absolute;
    right: 0;
    width: max-content;
    min-width: 100%;
    text-align: left;
    display: none;
    color: #424242;
    background-color: #fff;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
    -webkit-transform: scale3d(1,0,1);
	transform: scale3d(1,0,1);
	background: #fff;
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}
.userMenu.active ul.userMenuList {
    display: block;
    -webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
	-webkit-transition: none;
	transition: none;
	-webkit-animation: expand 0.6s ease-out;
  	animation: expand 0.6s ease-out;
}
.userMenuItem {
    line-height: 1.5;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    opacity: 0;
    -webkit-transform: translate3d(0,-25px,0);
    transform: translate3d(0,-25px,0);
    -webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
    transition: opacity 0.15s, transform 0.15s;
}
.userMenu.active .userMenuItem {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 1;
    -webkit-transition: none;
    transition: none;
    -webkit-animation: bounce 0.6s ease-out;
    animation: bounce 0.6s ease-out;
}
.userMenuItem:hover {
    font-weight: 500;
    color: #1b5eb4;
}
.userMenuItem i {
    float: right;
    font-size: 24px !important;
    line-height: 1;
    margin-left: 10px;
    color: #1b5eb4;
}
.userThumb {
    display: inline-block;
    position: relative;
    width: 35px;
    height: 35px;
    margin-right: 5px;
    background-color: #78909C;
    overflow: hidden;
    /* -webkit-mask-image: -webkit-radial-gradient(white, black); */
    text-align: center;
    line-height: 35px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.userThumb:empty:before {
    /* content: '\f004'; */
    /* font-family: 'Material Design Icons'; */
    content: '\EB14';
    font-family: 'micon';
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
}

.userThumb img {
    position: absolute;
    vertical-align: middle;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    object-fit: cover;
    background-color: #fff;
    z-index: 1;
}

.simpleTopTool {
    display: inline-block;
    padding: 0 15px;
    height: 56px;
    line-height: 56px;
    font-size: 18px;
    cursor: pointer;
}
.topUsage,
.topFullscreen,
.TopLogout {
    font-size: 30px;
    height: 56px;
}

/* simpleTopbar end */

/* subTopbar */

.subTopbar {
    position: fixed;
    display: block;
    top: 56px;
    left: 0;
    width: 100%;
    height: 69px;
    padding: 0 20px;
    border-bottom: 1px solid #d6dee2;
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -webkit-transition: width, margin, .4s;
    -moz-transition: width, margin, .4s;
    -ms-transition: width, margin, .4s;
    -o-transition: width, margin, .4s;
    transition: width, margin, .4s;
    z-index: 99;
}

.mini-nav .subTopbar {
    width: calc(100% - 66px);
    margin: 0 0 0 66px;
}

.subTopbar > .pageNav > .navlist {
    cursor: default;
}

.subTopbar > .pageNav > .navlist.link {
    cursor: pointer;
}

.subTopbar > .pageNav > .navlist > * {
    vertical-align: middle;
}

.subTopbar > .pageNav > .navlist > i {
    /* font-family: 'Material Design Icons';
    content: '\f72a'; */
    font-size: 22px;
    color: #1b5eb4;
    /*color: #63A8EB;*/
    margin-right: 5px;
}

.subTopbar > .pageNav {
    display: inline-block;
    height: 100%;
    margin: 0;
    vertical-align: middle;
    white-space: nowrap;
}

.subTopbar > .pageNav > .navlist {
    font-size: 20px;
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
}

.subTopbar > .pageNav > .back {
    position: relative;
    display: inline-block;
    font-size: 30px;
    width: 69px;
    line-height: 69px;
    text-align: center;
    height: 100%;
    margin-left: -20px;
    vertical-align: middle;
    cursor: pointer;
    color: #1b5eb4;
}

.subTopbar > .pageNav > .back:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.subTopbar > .pageNav > .navlist+.navlist:before {
    font-family: 'Material Design Icons';
    content: '\f142';
    margin: 0 5px;
    color: #1b5eb4;
    vertical-align: middle;
    opacity: 0.3;
}

.subTopbar > .pageNav:before {
    display: inline-block;
    content: '';
    width: 0;
    margin-left: -4px;
    height: 100%;
    vertical-align: middle;
}

.subTopTool {
    position: absolute;
    top: 0;
    right: 15px;
    /* float: right; */
    height: 100%;
}

.subTopTool:before {
    display: inline-block;
    content: '';
    height: 100%;
    vertical-align: middle;
}

.subTopTool > * {
    vertical-align: middle;
}

.serviceInfo {
    position: relative;
    margin-left: 4px;
}

.serviceInfo i:before {
    font-family: 'Material Design Icons';
    content: '\FA37';
    font-size: 18px;
    color: #00aaea;
    cursor: pointer;
    line-height: inherit;
}

.serviceInfo.active i:before {
    content: '\f159';
}

.serviceCont {
    display: none;
}

.serviceInfo.active .serviceCont {
    position: absolute;
    display: inline-block;
    width: 300px;
    top: 37px;
    left: 50%;
    margin-left: -152px;
    padding: 15px;
    font-weight: 300;
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    background-color: #ebe1ff;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
    user-select: none;
    word-break: keep-all;
    white-space: normal;
    color: #464646;
}

.serviceInfo.active:before {
    position: absolute;
    font-size: 14px;
    font-family: 'Material Design Icons';
    content: '\f536';
    color: #ebe1ff;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    top: 25px;
    left: 50%;
    margin-left: -9px;
    width: 14px;
    height: 14px;
    line-height: 14px;
}

.content {
    padding: 20px;
    padding-bottom: 0;
    overflow: hidden;
}

.content.contentOverflow {
    overflow: visible;
    padding-bottom: 20px;
}
.mini-nav .content {
    margin: 0 0 0 66px;
}
.footer {
    position: fixed;
    width: 100%;
    height: 69px;
    bottom: -69px;
    padding: 20px 0;
    background-color: #2f2e3a;
    color: rgba(255,255,255,0.5);
    z-index: 500;
    line-height: 1;
    padding-left: 0px;
    word-break: keep-all;
    clear: both;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    /* backdrop-filter: blur(2px); */
}
.mini-nav .footer {
    padding-left: 66px;
}
.footer.in {
    bottom: 0;
}
.footerToggler {
    position: fixed;
    bottom: 0;
    right: 0;
    cursor: pointer;
} 
.footerToggler:before {
    display: block;
    content: '';
    width: 0px;
    height: 0px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid rgba(42, 41, 54, 0.5);
    border-right: 20px solid rgba(42, 41, 54, 0.5);
    border-left: 20px solid  transparent;    
}
.footerToggler:after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '\F64E';
    font-family: 'Material Design Icons';
    color: #fff;
    font-size: 24px;
}
.footer.in .footerToggler:after {
    content: '\F156';
}
.footer a {
    white-space: nowrap;
}

/* login */

.registration-form,
.login .login-form {
    padding: 30px 80px 30px;
}

.registration-form button i,
.login .login-form button i {
    font-size: 24px;
    vertical-align: middle;
}
.login {
    max-width: 520px;
    width: 100%;
    min-width: 280px;
}
.loginBody .login {
    min-width: 900px;
    height: 600px;
}

.login .content-box {
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    z-index: 999;
}

.login h1 {
    font-size: 40px;
    font-weight: 100;
}

.login h2 {
    font-size: 30px;
    font-weight: 100;
}

.stayLoginMessage {
    display: none !important;
    position: relative;
    clear: both;
    box-sizing: border-box;
    font-size: 14px;
    width: 100%;
    text-align: left;
    margin-bottom: 10px;
    padding: 12px 10px 2px;
    background-color: rgba(74, 97, 119, 0.7);
    color: #fff;
    border-radius: 5px 15px 15px;
    -webkit-border-radius: 5px 15px 15px;
    -moz-border-radius: 5px 15px 15px;
    -ms-border-radius: 5px 15px 15px;
    -o-border-radius: 5px 15px 15px;
}

.stayLoginMessage:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid rgba(74, 97, 119, 0.7);
    top: -5px;
    left: 4px;
}

.stayLoginMessage p {
    padding-left: 20px;
}

.stayLoginMessage i {
    margin-left: -20px;
    margin-right: 3px;
}

.stayLoginMessage p span {
    display: inline-block;
    width: calc(100% - 20px);
    margin-left: 2px;
    vertical-align: top;
    word-break: keep-all;
}

.loginFind {
    line-height: 14px;
    padding-top: 20px;
    text-align: center;
}

.loginFind .bar {
    width: 1px;
    height: 12px;
    text-indent: -999em;
    margin: 0 10px;
    color: #76828E;
}
.loginMail {
    line-height: 14px;
    padding: 15px 0 30px 0;
    text-align: center;
}

.loginBottom {
    border: 1px solid rgb(221, 223, 224);
    border-radius: 10px;
    padding: 11px 0 10px 0;
    line-height: 14px;
    margin-top: 30px;
    text-align: center;
    display: block;
}
.loginBottom a {
    color: #0059ff;
    padding: 0 10px;
}

.loginBottom .bar {
    width: 1px;
    height: 12px;
    text-indent: -999em;
    margin: 0 14px;
    color: #76828E;
}

.loginBody .introBG {
    position: relative;
    top: -125px;
    height: calc(100% + 125px);
    background-color: #ECF0F3;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.loginBody .introBG:before {
    background-image: url('../images/introBG-before.png');
    background-size: 100%;
    position: fixed;
    left: -90px;
    top: -10px;
    content: "";
    width: 523px;
    height: 539px;
}
.loginBody .introBG:after {
    background-image: url('../images/introBG-after.png');
    background-size: 100%;
    position: fixed;
    right: -80px;
    bottom: -80px;
    content: "";
    width: 448px;
    height: 501px;
    z-index: 0;
}
.introBG .content-box {
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.send_img {
    position: relative;
    height: 109px;
    font-size: 105px;
    line-height: 1;
    color: #267DFF;
}
.login .send_img {
    height: 140px;
}

.join_timeout {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

.join_email {
    font-size: 18px;
    font-weight: 500;
    color: #1b5eb4;
    display: block;
}

.join_form {
    position: relative;
    /* padding: 20px 0 0 0; */
    margin-bottom: 5px;
    padding-bottom: 20px;
    z-index: 5;
}

.join_p {
    position: absolute;
    display: none;
    width: 100%;
    /* font-weight: 400; */
    text-align: right;
    bottom: -5px;
    left: 0;
}
.addUserItem .join_p {
    padding-right: 10px;
}
.join_p .mdi-loading {
    color: #28498f;
}
.join_p .mdi-check {
    color: #01c131;
}
.join_p .mdi-close {
    color: #ec0101;
}
.join_p .mdi-alert-outline {
    color: #ec8e01;
}
/* .send_img > i {
    position: relative;
    opacity: 0;
    left: -200px;
    transition: left 0.2 ease-in;
    -webkit-transition: left 0.2 ease-in;
    -moz-transition: left 0.2 ease-in;
    -ms-transition: left 0.2 ease-in;
    -o-transition: left 0.2 ease-in;
}
.send_img.in > i {
    opacity: 1;
    left: 0;
    transition: left 0.2 ease-in;
    -webkit-transition: left 0.2 ease-in;
    -moz-transition: left 0.2 ease-in;
    -ms-transition: left 0.2 ease-in;
    -o-transition: left 0.2 ease-in;
} */

.memberType {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    color: #fff;
    line-height: 235px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.memberType:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    opacity: 0;
    transform-origin: center;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transition: all 0.23s ease-in-out;
    -webkit-transition: all 0.23s ease-in-out;
    -moz-transition: all 0.23s ease-in-out;
    -ms-transition: all 0.23s ease-in-out;
    -o-transition: all 0.23s ease-in-out;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.memberType:hover:before {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    opacity: 1;
}

.memberType.invidiual {
    background-color: #238a5d;
}

.memberType.invidiual:before {
    background-color: #42b382;
}

.memberType.enterprise {
    background-color: #2371c0;
}

.memberType.enterprise:before {
    background-color: #63A8EB;
}

.memberType h1 {
    position: relative;
    display: inline-block;
    font-weight: 100;
    line-height: 1.2;
    z-index: 2;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.memberType.disabled {
    background-color: rgba(0,0,0,0.2);
    cursor: not-allowed;
}
.memberType.disabled:before {
    background-color: rgba(0,0,0,0.1);
}
.memberType.disabled:hover h1 {
    margin-top: 100%;
}
.memberType.disabled:after {
    content: 'Coming Soon';
    position: absolute;
    width: 100%;
    text-align: center;
    color: #000;
    top: -200px;
    left: 0;
    font-size: 24px;
    margin-top: -12px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.memberType.disabled:hover:after {
    top: -10px;
}
.joinInfo > i {
    display: block;
    font-size: 64px;
    color: #ff5722;
}

.joinInfo > h1 {
    display: inline-block;
    max-width: 400px;
    word-break: keep-all;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 20px;
}

.typeInfo {
    font-size: 16px;
    margin: 20px auto;
    max-width: 240px;
    word-break: keep-all;
}

/* login end */

/* join */

.password_box {
    position: relative;
    z-index: 5;
}

.password-background {
    position: relative;
    top: -36px;
    height: 36px;
    width: 0;
    z-index: -1;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.password_box > div {
    position: relative;
}

.registration-form .password_box{
    margin-bottom: 18px;
}

.password {
    background: none;
}

.show-password {
    font-size: 24px;
    text-decoration: none;
    color: #8f8f8f !important;
}

.strength {
    margin-right: 10px;
}
.password_box .strength,
.join_form .strength {
    position: absolute;
    width: 260px;
    bottom: -25px;
    right: -15px;
    font-size: 13px;
}
.passwordTools {
    position: absolute !important;
    right: 20px;
    z-index: 5;
    top: 0;
    text-align: right;
}

.registration-form .passwordTools {
    right: 5px;
}

.passwordTools > * {
    display: inline-block;
    vertical-align: middle;
}

.form-group.material .password-background {
    height: 41px;
    margin-top: -8px;
}
.form-group.material .mustItem:after {
    content: '*';
    color: #ff5722;
    margin-left: 5px;
}
/* join end */

/* serviceDocs */

.serviceDocs {
    display: block;
    font-size: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
    column-count: 2;
    column-gap: 60px;
    text-align: justify;
    word-break: break-all;
}
.serviceDocs:before {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
    background-color: #ebebeb;
}
.serviceDocsContainer {
    height: 150px;
    border: 1px solid #e6e6e6;
    background-color: #f9f9f9;
    padding: 6px 12px;
    overflow: auto;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.serviceDocsContainer .serviceDocs {
    margin-top: 10px;
}
.serviceDocs h2 {
    font-size: 20px;
    font-weight: 500;
}
.serviceDocs h2,
.serviceDocs h3,
.serviceDocs h4 {
    padding: 20px 0 10px;
}

.serviceDocs h3:first-child {
    margin-top: 0;
}

.serviceDocs h4 {
    font-weight: 500
}

.serviceDocsContent,
.serviceDocsSubContent {
    padding-left: 15px;
}

.registration-form .serviceDocs {
    column-count: 1;
    column-gap: 0;
}
.registration-form .serviceDocs:before {
    display: none;
}
.registration-form p {
    font-size: 15px;
    word-break: keep-all;
}
.registration-form .checkbox i {
    text-align: left;
}
/* serviceDocs end */

/* profile */

.profile_img {
    /* display: inline-block; */
    margin: 0 auto;
    box-sizing: content-box;
    position: relative;
    background-color: #fff;
    width: 120px;
    height: 160px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
}

.profile-sidebar {
    border-bottom: 8px solid #1b5eb4;
}

.profile_top_bg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 123px;
    background-color: #1b5eb4;
    background-image: url('../images/cube_bg.png');
    background-position: center;
}

.profile_img:empty:before {
    position: absolute;
    font-size: 80px;
    top: 50%;
    left: 50%;
    background-color: #78909C;
    content: '\EB14';
    font-family: 'micon';
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
/* .adminImg:empty:before {
    content: '\FCBF';
} */
.profile-usermenu ul li {
    color: #76828E;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 10px 0;
}

.profile-usermenu ul li p {
    padding: 10px 0;
    font-size: 18px;
    color: #1b5eb4;
    margin: 0;
}

.profile-usermenu ul li {
    border-top: 1px solid #EFEFEF;
    border-bottom: none;
}

.profile-usermenu ul li:last-child {
    border-bottom: 1px solid #EFEFEF;
}

.profile_img img {
    position: absolute;
    vertical-align: middle;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.myprofile {
    position: relative;
}

.myprofile .profile_img {
    width: 180px;
    height: 180px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    margin: 20px auto;
    overflow: hidden !important;
}
.myprofile .profile_img:empty {
    background-color: #78909C;
}
.myprofile .profile_img:empty:before {
    text-align: center;
    font-size: 100px;
}

.uploadPicture {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: 45px;
    width: 40px;
    height: 40px;
    background-color: #cfd6de;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    overflow: hidden;
    cursor: pointer !important;
    z-index: 5;
}

.uploadPicture input {
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: inherit;
}
.uploadPicture input[disabled=true] {
    display: none;
}
.uploadPicture:hover {
    background-color: #1b5eb4;
}

.uploadPicture:before {
    position: absolute;
    content: '\f552';
    width: 28px;
    height: 28px;
    top: 50%;
    left: 50%;
    margin-top: -14px;
    margin-left: -14px;
    font-family: 'Material Design Icons';
    color: #78909C;
    font-size: 28px;
    line-height: 1;
}

.uploadPicture:hover:before {
    color: #fff;
}

.profile-usermenu {
    margin-top: 0;
}
/* end */

/* service */

.services {
    /* min-height: calc(100% - 40px); */
    padding: 20px 0;
}

.welcome {
    font-size: 50px;
    font-weight: 100;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
    padding: 10px 0 5px;
    word-break: keep-all;
}

.serviceList {
    display: inline-block;
    width: 100%;
    max-width: 1300px;
    margin-top: 20px;
    text-align: center;
}

.serviceItem {
    position: relative;
    display: inline-block;
    width: 33.33%;
    padding-right: 15px;
    padding-left: 15px;
    cursor: pointer;
    margin-right: -4px;
    vertical-align: top;
}

.serviceItem .content-box {
    box-shadow: 0 2px 5px rgba(21, 35, 48, 0.2);
    border-radius: 28px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    -ms-border-radius: 28px;
    -o-border-radius: 28px;
}

.serviceItem:before {
    content: none;
}

.serviceItem.placeholderList {
    width: 100%;
    cursor: default;
    margin-top: 20px;
}

.placeholderList:before {
    content: none;
}

.serviceItem.placeholderList .placeholderList-box,
.serviceItem .content-box {
    height: 300px;
}

.serviceItem.placeholderList .placeholderList-box h1 {
    word-break: keep-all;
}
.blankListIcon,
.placeholderListIcon {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    font-size: 200px;
    line-height: 1;
    margin: 50px 0;
    cursor: pointer;
}
.blankListIcon {
    cursor: default;
}
.blankListIcon .beforeIcon,
.placeholderListIcon .beforeIcon {
    opacity: 0.5;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.placeholderListIcon:hover .beforeIcon {
    opacity: 1;
    color: #1E88E5;
    transform: rotate3d(0, 2, 0, 180deg);
    -ms-transform: rotate3d(0, 2, 0, 180deg);
    -webkit-transform: rotate3d(0, 2, 0, 180deg);
    -moz-transform: rotate3d(0, 2, 0, 180deg);
    -o-transform: rotate3d(0, 2, 0, 180deg);
}
.blankListIcon .beforeIcon:before,
.placeholderListIcon .beforeIcon:before {
    font-family: 'Material Design Icons';
    color: inherit;
}

.serviceList .placeholderListIcon .beforeIcon:before {
    content: '\F72A';
}
.originDeviceList .blankListIcon .beforeIcon:before,
.originDeviceList .placeholderListIcon .beforeIcon:before {
    content: '\f61a';
}

.placeholderListIcon:hover .beforeIcon:before {
    content: '\f417' !important;
}

.placeholderListIcon .afterIcon {
    color: inherit;
    font-family: inherit;
    position: absolute;
    top: 100px;
    left: 0;
    width: 200px;
    font-size: 0;
    font-weight: 500;
    opacity: 0;
    transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition-delay: 0.1s;
}

.placeholderListIcon:hover .afterIcon {
    top: 200px;
    font-size: 24px;
    opacity: 1;
}

.serviceItem .content-tools {
    position: absolute;
    top: 25px;
    right: 25px;
    height: 40px;
    text-align: center;
}

.content-tools > a {
    position: relative;
    width: 36px;
    height: 36px;
    top: 0;
    right: 0;
    margin-left: 5px;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    line-height: 36px;
    text-align: center;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    background-color: rgba(44, 57, 63, 0.5);
}

.content-tools > a > i {
    line-height: 28px;
}

.content-tools > a:before {
    top: 0px;
    left: 0px !important;
    width: 100%;
    height: 100%;
    background-color: #1b5eb4;
}

.content-tools .dropdown-menu {
    font-size: 15px;
    top: 40px;
    margin-top: 0px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
}

.rule_list .content-tools .dropdown-menu {
    left: -110px;
}

.serviceList .content-tools .dropdown-menu {
    left: -54px;
}

.deviceList .content-tools .dropdown-menu {
    left: -110px;
}

.dropdownItem {
    color: #76828E;
    padding: 8px 20px;
    margin-left: 0;
    display: block;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #76828E;
    white-space: nowrap;
}

.dropdownItem:hover {
    background-color: #f5f5f5;
}

.dropdownItem i {
    float: right;
}

.serviceSummary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 70px 15px 15px;
    color: #fff;
    display: none;
    background-color: rgba(53, 68, 80, 0.7);
    word-break: keep-all;
    text-align: left;
    z-index: 11;
}

.serviceSummary.in {
    display: block;
}

.serviceSummary p,
.serviceItem .serviceSummary pre {
    height: calc(100% - 60px);
    overflow: auto;
    margin: 0;
    padding-top: 10px;
}
.serviceSummary .serviceKey {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    padding: 10px 15px;
    background-color: rgba(0,0,0,0.4);
    font-size: 18px;
    font-weight: 500;
}
.serviceSummary .service_URL {
    font-weight: 500;
}
.serviceSummary .service_URL .url {
    display: inline-block;
    width: calc(100% - 50px);
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.serviceInfoContent {
    margin: -15px;
    margin-bottom: 15px;
    padding: 10px 15px;
    background-color: rgba(0,0,0,0.02);
    border: 1px dashed rgba(0,0,0,0.2);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.serviceContent .serviceKey,
.serviceContent .service_URL {
    font-size: 20px;
    font-weight: 500;
    margin: 5px 0;
}
.serviceContent .serviceKey label,
.serviceContent .service_URL label {
    font-size: 18px;
    font-weight: 700;
}
.serviceContent .keyCode,
.serviceContent .url {
    font-family: 'consolas', 'Inconsolata';
    font-weight: 500;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    width: calc(100% - 200px);
    vertical-align: middle;
}
.unitCommentContent pre,
.serviceContent pre,
.serviceSummary pre {
    display: block;
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    word-break: inherit;
    word-wrap: inherit;
    white-space: pre-wrap;
    background-color: transparent;
    border: none;
    overflow: hidden;
    font-family: inherit;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.keyCopy,
.urlCopy {
    position: relative;
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    vertical-align: middle;
    /* background-color: #63a8eb; */
    background-color: rgba(44, 57, 63, 0.5);
    color: #fff;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin: 0 5px;
    text-align: center;
    cursor: pointer;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.productCodeCopy,
.serviceKeyCopy,
.serviceUrlCopy,
.customDomainCopy,
.hostingURLCopy {
    position: relative;
    display: inline-block;
    font-size: 24px;
    font-weight: 300;
    vertical-align: middle;
    /* background-color: #63a8eb; */
    background-color: rgba(44, 57, 63, 0.5);
    color: #fff;
    margin-left: 10px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.forCustomDomain {
    display: none;
}
.servicecopybox {
    border: 1px solid #E7EBEC;
    padding: 30px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(21, 35, 48, 0.2);
}

.serviceKEY .servicekey,
.serviceURL .service_URL,
.customDomain .custom_URL,
.hostingURL .hosting_URL {
    width: calc(100% - 50px);
    float: left;
    font-family: 'consolas', 'Inconsolata';
    font-weight: 500;
    font-size: 18px;
    text-overflow: ellipsis;
}
.serviceURL .service_URL::placeholder {
    font-family: inherit !important;
    font-size: 14px;
}
.serviceKEY .control-label,
.serviceURL .control-label,
.customDomain .control-label {
    padding-bottom: 5px;
}

.keyCopy:hover,
.urlCopy:hover {
    color: #fff;
    /* background-color: #63a8eb; */
}
.keyCopy i,
.urlCopy i {
    position: relative;
    z-index: 1;
}
.keyCopy:before,
.urlCopy:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 100%;
    height: 100%;
    background-color: #1b5eb4;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.keyCopy:hover:before,
.urlCopy:hover:before {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.productCodeCopy:hover,
.serviceKeyCopy:hover,
.serviceUrlCopy:hover,
.customDomainCopy:hover {
    color: #fff;
    /* background-color: #63a8eb; */
}
.productCodeCopy i,
.serviceKeyCopy i,
.serviceUrlCopy i,
.customDomainCopy i {
    position: relative;
    z-index: 1;
}
.productCodeCopy:before,
.serviceKeyCopy:before,
.serviceUrlCopy:before,
.customDomainCopy::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px !important;
    width: 100%;
    height: 100%;
    background-color: #1b5eb4;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    -moz-transition: transform .2s ease-in-out;
    -ms-transition: transform .2s ease-in-out;
    -o-transition: transform .2s ease-in-out;
}
.productCodeCopy:hover:before,
.serviceKeyCopy:hover:before,
.serviceUrlCopy:hover:before,
.customDomainCopy:hover:before {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.content-tools a,
.rule-toole a {
    z-index: 10;
}

.content-tools a.infoToggle {
    z-index: 12;
}

.infoToggle i:before {
    font-family: 'Material Design Icons';
    content: '\f64e';
}

.infoToggle.active i:before {
    font-family: 'Material Design Icons';
    content: '\f156';
    color: #fff;
}

.confirmShare {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    background-color: rgba(53, 68, 80, 0.7);
    text-align: center;
    margin: 15px;
    z-index: 7;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.confirmShare:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.listThumb {
    position: relative;
    height: 230px;
    background-color: #f6f9fb;
    font-size: 200px;
    line-height: 230px;
    text-align: center;
    color: rgba(32, 167, 255, 0.5);
    /* border-bottom: 1px solid #dedede; */
    overflow: hidden;
}

.listThumb:empty {
    background-color: #425a7d;
}

.serviceThumb,
.originDeviceThumb {
    border-bottom: 1px solid #dedede;
}
.serviceItem .serviceThumb {
    height: 230px;
}
.serviceThumb {
    height: 300px;
}
.contentInfo .originDeviceThumb {
    border: 1px solid #dedede;
}

.serviceThumb:empty:before {
    content: '\F72A';
    font-family: 'Material Design Icons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.logoThumb {
    position: relative;
    padding: 10px;
    height: 170px;
    font-size: 100px;
    box-shadow: 0 0 50px rgba(0,0,0,0.1) inset;
    background-image: url(../images/transparnt-pattern-alpha.png);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.logoThumb:empty:before {
    position: absolute;
    top: 50%;
    left: 50%;
    /* content: 'Service Logo'; */
    content: '\f975';
    font-family: 'Material Design Icons';
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.lightBG .logoThumb {
    color: #1b5eb4;
    background-color: #F1F4F5;
}
.darkBG .logoThumb {
    color: #fff;
    background-color: #606163;
}
.listThumb > img {
    position: absolute;
    vertical-align: middle;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.logoThumb > img {
    max-width: calc(100% - 20px);
    max-height: calc(100% - 20px);
    object-fit: contain;
}
.logoThumb + .uploadPicture {
    box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}

.modal .listThumb {
    height: 250px;
    line-height: 250px;
    font-size: 200px;
    border: 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.listThumb +.uploadPicture {
    top: 10px;
    left: -20px;
    bottom: unset;
}

.serviceBrand {
    padding: 20px 0;
    border-bottom: 1px solid #ebebeb;
}

.serviceBrand:last-child {
    border: 0;
}

#color-picker-1 .input-group-addon {
    padding: 6px;
}
.colorpicker {
    z-index: 98;
}
.modal .colorpicker {
    z-index: 2500;
}
.colorpicker-element .input-group-addon i, 
.colorpicker-element .add-on i {
    width: 50px;
    height: 50px;
    border-radius: 2px;
}
input.colorPickerCode {
    height:64px;
    background-color:#FAFAFA;
    font-size:36px;
    font-weight:700;
    color: #3f4849;
    border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -ms-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
}
input.colorPickerCode:focus {
    box-shadow: 0 0 0 5px rgba(0,123,255,.25) inset;
    
}
.colorpicker-2x .colorpicker-saturation {
    width: 200px;
    height: 200px;
}
  
.colorpicker-2x .colorpicker-hue,
.colorpicker-2x .colorpicker-alpha {
    width: 36px;
    height: 200px;
}
  
.colorpicker-2x .colorpicker-color,
.colorpicker-2x .colorpicker-color div {
    height: 30px;
}
.colorpicker-selectors i {
    width: 20px;
    height: 20px;
}
.colorpicker-selectors i + i {
    margin-left: 2px;
}
.loginStyle {
    position: relative;
    width: 25%;
    padding-top: 20%;
    float: left;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    border: 10px solid #fff;
    box-sizing: border-box;
    overflow: hidden;
}
.loginStyle:before {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 25px;
    height: 25px;
    content: '';
    font-family: 'Material Design Icons';
    font-size: 20px;
    line-height: 25px;
    text-align: center;
    color: #fff;
    background-color: rgb(201, 201, 201);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border: 2px solid #fff;
    box-sizing: content-box;
    z-index: 10;
}
.loginStyle.selected:before {
    content: '\f12c';
    background-color: #1b5eb4 ;
}

.deviceItem.unUsing .deviceItemBox {
    filter: grayscale(0.5);
    -webkit-filter: grayscale(0.5);
}
.deviceItem.unUsing .deviceInfo {
    opacity: 0.4;
    filter: brightness(0.8);
    -webkit-filter: brightness(0.8);
}
.deviceItem.unUsing .deviceDetail {
    pointer-events: none;
}
.deviceItem .listToggle {
    top: 7px;
    left: 7px;
}
.listToggle:before {
    font-family: 'Material Design Icons';
}
.loginStyle.loginType_1 {
    background-image: url(../images/loginType_1.png);
}
.loginStyle.loginType_2 {
    background-image: url(../images/loginType_2.png);
}
.loginStyle.loginType_3 {
    background-image: url(../images/loginType_3.png);
}
.loginStyle.loginType_4 {
    background-image: url(../images/loginType_4.png);
}
.originDeviceThumbBox .listThumb,
.virtualDeviceThumbBox .listThumb {
    padding-top: 100%;
    height: 300px;
    line-height: 300px;
    margin-top: 10px;
    border: 1px solid #dedede;
    transition: padding-top 0.2s ease-in-out;
    -webkit-transition: padding-top 0.2s ease-in-out;
    -moz-transition: padding-top 0.2s ease-in-out;
    -ms-transition: padding-top 0.2s ease-in-out;
    -o-transition: padding-top 0.2s ease-in-out;
}
.originDeviceThumbBox .listThumb:empty {
    border: 1px solid transparent;
    padding-top: 0;
}
.shared .modifyList {
    display: none !important;
}

.serviceTitle {
    position: relative;
    padding: 8px 15px 5px;
    z-index: 9;
}

.serviceTitle > span {
    display: block;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.serviceCreate {
    position: relative;
    padding: 0px 15px;
    white-space: nowrap;
    z-index: 8;
    font-size: 12px;
}

.sharer {
    position: absolute;
    display: none;
    top: 15px;
    left: 15px;
    padding: 5px 30px 5px 10px;
    background-color: #2976cc;
    color: #fff;
    font-weight: 500;
    border-radius: 3px 0 30px 0;
    -webkit-border-radius: 3px 0 30px 0;
    -moz-border-radius: 3px 0 30px 0;
    -ms-border-radius: 3px 0 30px 0;
    -o-border-radius: 3px 0 30px 0;
    white-space: nowrap;
    z-index: 8;
}

.blind .sharer {
    color: #fff;
    background-color: #738ba0;
}

.sharer:before {
    content: '\f497  by ';
    font-family: 'Roboto', 'Material Design Icons', sans-serif;
}

.shared .sharer {
    display: block;
}

.blind .confirmShare {
    display: block;
}

.blind .dropdown-toggle,
.blind a i {
    color: #fff;
}

.blind .serviceTitle,
.blind .serviceCreate {
    color: #fff;
}

.solutionThumb {
    height: 230px;
    float: right;
    background-color: #f6f9fb;
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    transition-delay: 0.15s;
    /*box-shadow: 0 0 2px rgba(54, 68, 82, 0.3) inset;*/
}

/* .solutionThumb:hover {
    background-size: 120%;
} */


.solutionItem {
    overflow: hidden;
    background-color: #f6f9fb;
    border: 1px solid #E7EBEC;
    padding: 20px 10px 10px 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(21, 35, 48, 0.2);
}
.solutionName {
    font-size: 23px;
    font-weight: 700;
    color: #76828E;
}

.solutionName i {
    color: #1b5eb4;
}

.solutionName .switch {
    float: right;
    margin-left: 5px;
    display: block;
    color: #76828E;
}

.solutionName .switch span {
    font-size: 14px;
}

.solutionName .switch > * {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.packageModal img{
    width: 100%;
}
.packageContentWrap {
    position: relative;
    height: 220px;
    border: 1px solid rgba(60, 64, 67, 0.15);
    border-radius: 5px;
    background-color: #fbfbfb;
    box-shadow: 0px 1px 2px rgba(60, 64, 67, 0.2);
    padding: 20px 15px;
    overflow: hidden;
}
.packageContentWrap:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    top: 0;
    left: 0;
    background-color: #dfefff;
}
.packageList {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.packageItem {
    padding-right: 5px !important;
    padding-left: 5px !important;
    margin-bottom: 10px;
    list-style: none;
}
.packageContentBox > div {
    display: inline-block;
    vertical-align: top;
}
.packageIcon {
    margin-right: 15px;
    padding: 5px;
}
.packageIcon img{
    width: 50px;
}
.packageTitleWrap {
    width: calc(100% - 80px);
}
.dashBox .cbp_tmtimeline > li .cbp_tmlabel {
    margin-left: 10%;
}
.packageName {
    font-size: 18px;
    font-weight: 700;
    color: #76828E;
    word-break: keep-all;
}
.packageSummary {
    position: relative;
    height: 100px;
    margin-top: 5px;
    font-weight: 300;
    overflow: hidden;
    word-break: keep-all;
    white-space: pre-wrap;
    text-overflow: ellipsis;
}
.packageSummary:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 15px;
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fafafa 1%, rgba(250, 250, 250, 0) 99%);
    background: -webkit-linear-gradient(top, #fbfbfb 1%, rgba(250, 250, 250, 0) 99%);
    background: linear-gradient(to top, #fbfbfb 1%, rgba(250, 250, 250, 0) 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='rgba(250, 250, 250, 0)', GradientType=1);
    -webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbfbfb', endColorstr='rgba(250, 250, 250, 0)', GradientType=1);
}
/* .solutionName input.switcher + label:after {
    border: 1px solid #ddd;
} */
.dashboardThumb {
    background-image: url(../images/service01.png);
}

.connectivityThumb {
    background-image: url(../images/service02.png);
}

.iotRuleThumb {
    background-image: url(../images/service03.png);
}

.mobileAppThumb {
    background-image: url(../images/service04.png);
}

.dataViewThumb {
    background-image: url(../images/service07.png);
}

.userMngThumb {
    background-image: url(../images/service08.png);
}

.aiSpeakerThumb {
    background-image: url(../images/service10.png);
}

.mapMonitorThumb {
    background-image: url(../images/solutionThumbWAMS.png);
}

.siteMonitorThumb {
    background-image: url(../images/solutionThumbFMS.png);
}

.aiMonitorThumb {
    background-image: url(../images/solutionThumbAIMS.png);
}

.deviceMonitorThumb {
    background-image: url(../images/solutionThumbDMS.png);
}

.coldchainMonitorThumb {
    background-image: url(../images/solutionThumbColdchain.png);
}

.mdi-spin:before {
    -webkit-animation: mdi-spin 0.5s infinite linear;
    animation: mdi-spin 0.5s infinite linear
}

.mdi-spin-slow:before {
    -webkit-animation: mdi-spin 1.5s infinite linear;
    animation: mdi-spin 1.5s infinite linear
}

.checkbox .solutionName i:after {
    padding-top: 4px;
}

.checkbox .solutionName i:before {
    top: 3px;
}

.solutionSummary {
    margin: 10px 0 20px;
    word-break: keep-all;
}
.solutionFeatures h3:before {
    content: '\FA49';
    font-family: 'Material Design Icons';
    color: #1b5eb4;
    margin-right: 5px;
}
.solutionFeatures li {
    padding: 3px 0;
    font-weight: 500;
    font-size: 16px;
    padding-left: 20px;
    word-break: keep-all;
}
.solutionFeatures li:before {
    content: '\FE6E';
    font-family: 'Material Design Icons';
    color: #63c59b;
    margin-left: -20px;
    margin-right: 5px;
}

/* service end */

/* Dashboard */

.dashTitle {
    position: relative;
    font-size: 20px;
    font-weight: 400;
    margin: -20px;
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #ece8f3;
    /* background-color: #fbfafd; */
    /* color: #fff; */
    /* border-radius: 0 0 50px 0;
    -webkit-border-radius: 0 0 50px 0;
    -moz-border-radius: 0 0 50px 0;
    -ms-border-radius: 0 0 50px 0;
    -o-border-radius: 0 0 50px 0; */
}
.timelineTools {
    position: relative;
    height: 24px;
    margin: 0  0 10px 0;
    text-align: right;
}
.timelineTools > i,
.dashTitle > i {
    display: inline-block;
    box-sizing: content-box;
    width: 48px;
    height: 42px;
    line-height: 42px;
    margin: -10px 0;
    text-align: center;
    /* 글리프는 박스 가운데 정렬 + 구분선은 박스 오른쪽 끝 → 글리프 기준 좌/우 간격 동일(대칭).
       좌우 여백 동시 조절: width (↑넓게 ↓좁게).  전체 가로 위치(세로선 정렬): margin-left */
    margin-left: 5px;
    margin-right: 10px;
    border-right: 1px solid #ece8f3;
    color: #1b5eb4;
}
.dashTitle .reloadData {
    right: 5px;
}
.serviceAlarms {
    position: absolute;
    top: -8px;
    right: 15px;
    line-height: 1;
    font-size: 14px;
    font-weight: 500;
}
.serviceAlarms span {
    position: absolute;
    left: 0;
    background-color: #E9585B;
    color: #fff;
    padding: .2em .4em;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.serviceAlarms span:empty {
    display: none;
}
.dashTitle .timelineTop {
    position: absolute;
    top: 10px;
    right: 45px;
}
.dashCountBox > .content-box:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 12px;
    top: 0;
    left: 0;
    background-color: #3a8ce3;
    background-image: url(../images/UA_Title_BG.png);
}
/*.dashCountBox:nth-child(odd) .content-box {
    background: #1b5eb4;
    background: -moz-linear-gradient(left, #1b5eb4 16%, #ef7395 99%);
    background: -webkit-linear-gradient(left, #1b5eb4 16%, #ef7395 99%);
    background: linear-gradient(to right, #1b5eb4 16%, #ef7395 99%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1b5eb4', endColorstr='#ef7395', GradientType=1);
    -webkit-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b5eb4', endColorstr='#ef7395', GradientType=1);
}
.dashCountBox:nth-child(even) .content-box {
    background: #4f5b60;
    background: -moz-linear-gradient(-45deg, #4f5b60 0%, #97a9b2 100%);
    background: -webkit-linear-gradient(-45deg, #4f5b60 0%, #97a9b2 100%);
    background: linear-gradient(135deg, #4f5b60 0%, #97a9b2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#4f5b60, endColorstr=#97a9b2,GradientType=1 );
    -webkit-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#4f5b60, endColorstr=#97a9b2,GradientType=1 );
} */
.countContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: -10px;
    height: 72.5px;
}
.countItem {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    flex-grow: 1;
    padding: 0 10px;
    height: 100%;
}
.countItem + .countItem {
    border-left: 1px solid rgba(0,0,0,0.1);
}
.countItem * {
    /* overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; */
    word-break: keep-all;
    flex-grow: 1;
}
.countItem:hover:before {
    content: '';
    position: absolute;
    background-color: rgba(0,0,0,0.05);
    top: 0;
    left: 0;
    width: calc(100% - 10px);
    height: calc(100% + 6px);
    margin: -3px 5px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.countTitle {
    font-weight: 500;
    padding-left: 22px;
}
.countTitle i {
    font-size: 18px;
    line-height: 14px;
    margin-left: -22px;
    margin-right: 6px;
    vertical-align: middle;
}
.countTitle i.unlinked,
.countTitle i.danger {
    color: #ff4444;
}
.countTitle i.warning {
    color: #ff8800;
}
.countTitle i.all,
.countTitle i.linked,
.countTitle i.info {
    color: #3a9cff;
}
.countTitle i.unknown {
    opacity: 0.7;
}
.countTitle span {
    line-height: 21px;
}
@media (max-width: 500px) {
    .countTitle span {
        display: none;
    }
}
.countValue {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    font-size: 24px;
    font-weight: 500;
    text-align: right;
    vertical-align: middle;
}
.alarmsBox {
    position: relative;
    overflow: visible !important;
}
.devicesBox .countContainer,
.alarmsBox .countContainer {
    position: relative;
    cursor: pointer;
    z-index: 2;
}
.dashCountTitle {
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    margin: 20px 20px 17px;
}
.dashCountTitle i {
    width: 58px;
    height: 58px;
    font-size: 50px;
    line-height: 58px;
    color: #1b5eb4;
}
.dashCount {
    text-align: right;
}
.dashCount > span {
    display: block;
    margin-left: 60px;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
}
.dashCount > span .mi {
    margin-top: -7px;
}
.deviceCount > div {
    margin-top: 4.5px;
}
.dashCount .smallLabel,
.dashCount .smallCount {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
}
.dashCount .smallCount {
    font-weight: 500;
    font-size: 24px;
    margin-left: 5px;
}
.dashCount label {
    display: block;
    margin-top: 10px;
    margin-bottom: -8px;
    font-size: 14px;
    cursor: pointer;
}
.dashCount label i {
    width: 20px;
    height: 20px;
    margin-left: 4px;
    line-height: 20px;
    text-align: center;
    color: #1b5eb4;
}
.dashBox {
    /* padding-top: 12px; */
    overflow: hidden;
}

.h100 {
    height: 100%;
}

/* .dashBox > .row,
.dashBox > .row > .h100 {
    height: 100%;
} */

/* .dashBox_100 {
    min-height: 100px;
}

.dashBox_200 {
    min-height: 200px;
}

.dashBox_400 {
    min-height: 400px;
}

.dashBox_500 {
    min-height: 500px;
}

.dashBox_600 {
    min-height: 600px;
}

.dashBox_700 {
    min-height: 700px;
}

.dashBox_800 {
    min-height: 800px;
} */

.dashBoxTitle {
    margin-bottom: 16px;
}
.searchDevices{
    position: absolute;
    top: 7px;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
}

.timeline {
    right: 9px;
}

.timeline:before {
    font-family: 'Material Design Icons';
    content: '\fbb0';
    opacity: 0.3;
}

.selected .timeline:before {
    /* content: '\f208'; */
    color: #1b5eb4;
    opacity: 1;
}

.searchDevices{
    right: 6px;
}

.reloadData {
    right: 7px;
}
.serviceAlarmTop,
.timelineTop,
.reloadData {
    float: right;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
}
.reloadData {
    margin-right: 10px;
}
.serviceAlarmTop i,
.timelineTop i,
.reloadData i {
    opacity: 0.5;
}
.serviceAlarmTop:hover i,
.timelineTop:hover i,
.reloadData:hover i {
    color: #1b5eb4;
    opacity: 1;
}

.searchDevices i,
.reloadData i.mdi-spin {
    opacity: 1;
}

/* .searchDevice, */

.reloadData i.mdi-spin:before {
    color: #1b5eb4;
    content: '\f771';
}

.searchDevices{
    position: absolute;
    width: auto;
    height: 100%;
    top: 0;
    right: 42px;
    z-index: 5;
    max-width: calc(100% - 42px);
}

.searchDevices.in {
    border-left: 0;
}

.searchDevices > * {
    float: left;
}

.searchDevices > input:focus {
    outline: 0;
}

.searchDevices > input {
    position: relative;
    display: inline-block;
    width: 0;
    /* margin-top: -7px; */
    font-size: 14px;
    font-weight: 300;
    /* margin-right: -7px; */
    /*color: #fff;*/
    border: 0;
    padding: 0;
    /* padding-left: 15px; */
    height: 44px;
    line-height: 44px;
    /* background-color: #fbfbfb; */
    background-color: rgba(0,0,0,0.02);
    box-sizing: border-box;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    /* border-radius: 20px 0 0 20px;
    -webkit-border-radius: 20px 0 0 20px;
    -moz-border-radius: 20px 0 0 20px;
    -ms-border-radius: 20px 0 0 20px;
    -o-border-radius: 20px 0 0 20px; */
}

.searchDevices.in > input {
    width: 256px;
    max-width: 100%;
    padding: 0 10px;
    border-left: 1px solid rgba(0,0,0,0.1);
}

.searchDevices > button {
    position: absolute;
    top: 0px;
    right: -42px;
    width: 42px;
    height: 43px;
    padding: 0;
    border: 0;
    background-color: transparent;
    /* color: #a4acb4; */
    border-radius: 0 3px 0 0;
    -webkit-border-radius: 0 3px 0 0;
    -moz-border-radius: 0 3px 0 0;
    -ms-border-radius: 0 3px 0 0;
    -o-border-radius: 0 3px 0 0;
}

.searchDevices > i {
    position: absolute;
    width: 42px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    top: 0px;
    right: -42px;
}

.searchDevices.in > button,
.searchDevices.in > i {
    border-left: 1px solid rgba(0,0,0,0.1);
}

.searchDevices> button:hover,
.searchDevices> button:focus {
    opacity: 1;
}
.searchDevices.in > button.btnSearchDevice:focus {
    background-color: #63a8eb;
    color: #fff;
}
.searchDevices.writing > button.btnsearchDevices{
    display: block !important;
}
.searchDevices.writing > button.btnCloseSearch {
    display: none !important;
}
.searchDevicesResult {
    display: none;
    position: absolute;
    top: 43px;
    right: 0;
    width: 100%;
    max-height: 200px;
    overflow: auto;
    background-color: #fff;
    color: #76828E;
    padding: 10px 0;
    box-shadow: 0 2px 2px rgba(0,0,0,0.3);
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
}
.searchDevicesResult:empty {
    padding: 0;
    box-shadow: none;
}
.searchDevicesBlankItem,
.searchDevicesResultItem {
    display: block !important;
    width: 100%;
    font-size: 16px;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(0,0,0,0.01);
    cursor: default;
}
.searchDevicesResultItem.focus,
.searchDevicesResultItem:hover {
    cursor: pointer;
    background-color: #3396ff;
    color: #fff;
}
.listToggle {
    position: absolute;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    /* z-index: 20; */
}
.link_Item .listToggle {
    top: 7px;
    left: 40px;
}
.deviceItem.unUsing .deviceItemBox {
    filter: grayscale(0.5);
    -webkit-filter: grayscale(0.5);
}
.deviceItem.unUsing .deviceInfo {
    opacity: 0.4;
    filter: brightness(0.8);
    -webkit-filter: brightness(0.8);
}
.deviceItem.unUsing .deviceDetail {
    pointer-events: none;
}
.deviceItem .listToggle {
    top: 7px;
    left: 7px;
}
.listToggle:before {
    font-family: 'Material Design Icons';
}

.listToggle[list-expanded="false"]:before {
    content: '\f140';
}

.listToggle[list-expanded="true"]:before {
    content: '\f142';
    color: #1b5eb4;
}

.unitTypeItem {
    padding: 5px;
}
.unitTypeItem.active {
    background-color: #f4f2f5;
}
.unitTypeItem {
    cursor: pointer;
}

.unitTypeItem .listTool span,
.unitTypeItem02 .listTool span {
    cursor: pointer;
}

.unitTypeItem td i,
.unitTypeItem02 td i{
    padding: 0 3px;
    font-size: 24px;
}

.unitTypeItem:active {
    background-color: #f4f2f5;
}

.unitTypeItem td .icon-edit02,
.unitTypeItem02 td .icon-edit {
    color: #0160c3;
}
.unitTypeItem td .icon-edit02:hover,
.unitTypeItem02 td .icon-edit:hover{
    color: #0075ef;
}
.unitTypeItem td .icon-edit02:active,
.unitTypeItem02 td .icon-edit:active {
    color: #0031a5;
}

.unitTypeItem td .icon-delete,
.unitTypeItem02 td .icon-delete {
    color: #eb6a93;
}
.unitTypeItem td .icon-delete:hover,
.unitTypeItem02 td .icon-delete:hover{
    color: #ff98cb;
}
.unitTypeItem td .icon-delete:active,
.unitTypeItem02 td .icon-delete:active {
    color: #c5476f;
}

.dashBox .unitItem:hover
.dashBox .unitItem:hover {
    background-color: rgba(184, 199, 211, 0.05);
}

.dashBox .unitItem > .unitContents {
    font-size: 18px;
    padding: 5px;
}


.iotDevice .unitItem > .unitContents,
.iotDevice .deviceItem {
    border-color: rgba(126, 104, 206, 0.5);
}

.iotDevice .deviceItem:last-child {
    border-bottom-color: rgba(126, 104, 206, 0.2);
}

.localDevice .unitItem > .unitContents,
.localDevice .deviceItem {
    border-color: rgba(54, 145, 195, 0.5);
}

.localDevice .deviceItem:last-child {
    border-bottom-color: rgba(54, 145, 195, 0.2);
}

.lpwaDevice .unitItem > .unitContents,
.lpwaDevice .deviceItem {
    border-color: rgba(47, 190, 190, 0.5);
}

.lpwaDevice .deviceItem:last-child {
    border-bottom-color: rgba(47, 190, 190, 0.2);
}

.iotDevice .deviceItem:hover {
    border-top-color: rgba(126, 104, 206, 0.7);
}

.localDevice .deviceItem:hover {
    border-top-color: rgba(54, 145, 195, 0.7);
}

.lpwaDevice .deviceItem:hover {
    border-top-color: rgba(47, 190, 190, 0.7);
}

.dashBox .unitAction {
    float: left;
    line-height: 0.9;
}

.dashBox .unitAction i {
    width: 16px;
    height: 16px;
    margin-right: 3px;
}

.dashBox .unitAction i:before {
    font-size: 16px !important;
}

.dashBox .unitAction.dataReciveSend i {
    width: 16px;
    height: 16px;
}

.dashBox .unitAction.dataSend i:before,
.dashBox .unitAction.dataRecive i:before {
    top: unset;
    left: unset;
    margin-left: unset;
    margin-top: unset;
}
.dashBox .unitAction.dataReciveSend i:before,
.dashBox .unitAction.dataReciveSend i:after {
    font-size: 11px !important;
}

.dashBox .unitAction.dataReciveSend i:before {
    margin-top: -4px !important;
    margin-left: -1px !important;
}

.dashBox .unitAction.dataReciveSend i:after {
    margin-top: -9px !important;
}

.dashBox .unitInfo {
    font-size: 14px;
    font-weight: 300;
    color: rgba(0, 0, 0, 0.2) !important;
    text-decoration: none !important;
    cursor: default !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}
.dashBox .unitInfo span {
    font-weight: 400;
    color: #76828e !important;
    vertical-align: middle;
}

.dashBox .unitInfo .unitName:hover {
    color: inherit;
    text-decoration: none;
    cursor: default;
}
.dashBox .unitValueBox {
    text-align: center;
    clear: both;
    padding: 5px 0;
    margin-top: 3px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
}

.dashBox .unitValueBox > div {
    display: inline;
}

.dashBox .unitValue {
    font-size: 28px;
    font-weight: 300;
}

.dashBox .linkPagination {
    text-align: center;
}

.dashBox .linkPagination .pagination {
    margin: 20px 0 0px;
}
.deviceStatusContainer,
.serviceAlarmListBox,
.dashBox .timelineListBox {
    border: 1px solid rgba(0, 0, 0, 0.05);
}
.dashBox .cbp_tmtimeline > li .cbp_tmlabel {
    margin-left: 10%;
}

.dashBox .cbp_tmtimeline > li .cbp_tmlabel a {
    color: #fff;
}

.dashBox .cbp_tmtimeline > li .cbp_tmicon {
    left: 5%;
    top: 5px;
}

.dashBox .cbp_tmtimeline:before {
    left: calc(5% + 26.5px);
    margin-top: 50px;
}

.dashBox .cbp_tmtimeline > li .cbp_tmtime {
    display: inline;
    padding-right: 0;
    position: relative;
}
.deviceStatusTools {
    margin-top: -10px;
}
.deviceStatusBox {
    position: relative;
}
.deviceStatusBox .contentsLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    z-index: 5;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.deviceStatusBox .deviceList {
    padding: 10px;
    overflow: hidden;
    overflow-y: auto;
}
.deviceStatusBox .deviceItem {
    position: relative;
    background-color: #fff;
    line-height: 1.1;
    margin-bottom: 10px;
    padding-left: 10px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.deviceStatusBox .deviceItem:before {
    position: absolute;
    top: 5px;
    left: 5px;
    content: '';
    width: 5px;
    height: calc(100% - 10px);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.deviceStatusBox .deviceItem[device-type="iotDevice"]:before {
    background-color: #034498;
}
.deviceStatusBox .deviceItem[device-type="localDevice"]:before {
    background-color: #00aaea;
}
.deviceStatusBox .deviceItem[device-type="aiDevice"]:before {
    background-color: #af5dde;
}
.deviceStatusBox .deviceItem[device-type="aiDevice"] .deviceThumb {
    border: 0;
    background-color: transparent;
}
.deviceStatusBox .deviceName {
    font-weight: 500;
    font-size: 120%;
}
.deviceStatusBox .deviceKey {
    font-size: 90%;
    opacity: 0.8;
}
.deviceStatusBox .deviceStatusHeader {
    position: relative;
    padding: 5px;
}
.deviceStatusBox .deviceItem .linkStatus {
    position: absolute;
    top: 50%;
    right: 45px;
    margin: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.deviceStatusBox .deviceItem .linkStatus:before {
    content: '';
    font-family: 'Material Design Icons';
    font-size: 24px;
    
}
.deviceStatusBox .deviceItem[link-status='linked'] .linkStatus:before {
    content: '\F5E0';
    color: #3a9cff;
}
.deviceStatusBox .deviceItem[link-status='unlinked'] .linkStatus:before {
    content: '\F697';
    color: #ff4444;
}
.deviceStatusBox .deviceItem[link-status='unknown'] .linkStatus:before {
    content: '\F2D7';
    color: inherit;
    opacity: 0.7;
}
.deviceStatusBox .deviceInfoContainer {
    display: flex;
    width: calc(100% - 80px);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.deviceStatusBox .deviceBasicInfo > div {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deviceStatusBox .deviceInfoContainer .deviceInfo {
    display: flex;
    width: calc(100% - 185px);
}
.deviceStatusBox .updateTime {
    width: 185px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deviceStatusBox .deviceBasicInfo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 40px);
    padding-left: 10px;
}
.deviceStatusBox .deviceKey:before {
    content: '|';
    margin: 0 5px;
    opacity: 0.5;
}
@media (max-width: 1599px){
    .devicesBox .countValue,
    .alarmsBox .countValue {
        font-size: 18px;
    }
    .countTitle span {
        display: none;
    }
    .deviceStatusBox .deviceInfoContainer .deviceInfo {
        display: flex;
        width: calc(100% - 185px);
    }
    .deviceStatusBox .updateTime {
        width: 185px;
        text-align: right;
    }
    .deviceStatusBox .deviceBasicInfo {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .deviceStatusBox .deviceKey:before {
        display: none;
    }
}
@media (max-width: 1199px){
    .countTitle span {
        display: initial;
    }
    .devicesBox .countValue,
    .alarmsBox .countValue {
        font-size: 24px;
    }
    .deviceStatusBox {
        min-height: calc(100vh - 300px) !important;
    }
    .deviceStatusBox .deviceBasicInfo {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .deviceStatusBox .deviceKey:before {
        display: inline;
    }
}
@media (max-width: 767px){
    .devicesBox .countValue,
    .alarmsBox .countValue {
        font-size: 18px;
    }
    .countTitle span {
        display: none;
    }
    .deviceStatusBox .deviceStatusHeader {
        padding-left: 10px;
    }
    .deviceStatusBox .deviceThumb {
        display: none;
    }
    .deviceStatusBox .deviceInfoContainer {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .deviceStatusBox .deviceInfoContainer .deviceInfo {
        justify-content: flex-start;
        align-items: center;
        width: 100%;
    }
    .deviceStatusBox .deviceBasicInfo > div {
        display: flex;
    }
    .deviceStatusBox .updateTime {
        width: 100%;
        height: 20px;
        line-height: 20px;
        text-align: left;
        font-size: 90%;
    }
    .deviceStatusBox .deviceBasicInfo {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 20px;
        padding-left: 0px;
        overflow: hidden;
    }
    .deviceStatusBox .deviceKey:before {
        display: inline;
    }
}
@media (max-width: 630px){
    .deviceStatusBox .deviceBasicInfo > div.deviceKey {
        display: none;
    }
}
.deviceStatusBox .deviceThumb {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0;
}
.deviceStatusBox .deviceThumb:empty:before {
    font-size: 30px;
    line-height: 40px;
}
.deviceStatusBox .reloadData {
    position: absolute;
    top: 50%;
    right: 10px;
    margin: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.deviceStatusBox .deviceItem .unitListContainer {
    position: relative;
    height: 215px;
    max-height: 0;
    margin: 0 5px;
    padding: 0;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.deviceStatusBox .deviceItem.in .unitListContainer {
    max-height: 215px;
    margin: 0 5px 5px;
    padding-bottom: 5px;
    overflow: auto;
}
.deviceStatusBox .deviceItem.in .unitListContainer .contentsLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
}
.deviceStatusBox .unitListBox {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .1) inset;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}   
.deviceStatusBox .unitList {
    
}
.deviceStatusBox .unitItem {
    float: left;
    width: 20%;
    padding: 5px;
}
.deviceStatus .devicePagination {
    position: relative !important;
}
@media (max-width:1599px){
    .deviceStatusBox .unitItem {
        width: 25%;
    }
}
@media (max-width:1199px){
    .deviceStatusBox .unitItem {
        width: 20%;
    }
}
@media (max-width:959px){
    .deviceStatusBox .unitItem {
        width: 25%;
    }
}
@media (max-width:767px){
    .deviceStatusBox .unitItem {
        width: 33.333%;
    }
}
@media (max-width:639px){
    .deviceStatusBox .unitItem {
        width: 50%;
    }
}
@media (max-width:479px){
    .deviceStatusBox .unitItem {
        width: 100%;
    }
}
.deviceStatusBox .unitItemBox > div {
    padding: 4px 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
}
.deviceStatusBox .unitItemBox {
    background-color: #FFF;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.deviceStatusBox .unitName {
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.deviceStatusBox .unitData {
    text-align: right;
}
.deviceStatusBox .unitValue {
    font-size: 24px;
}
.deviceStatusBox .unitItem .unitName:hover {
    color: inherit;
    text-decoration: none;
    cursor: default;
}
.deviceStatusBox .arrayPopup .tooltip-inner {
    max-height: 100px;
    margin-left: -25%;
}
.deviceStatusBox .arrayPopup.bottom .tooltip-close {
    bottom: -14px;
    right: 25%;
}
/* Dashboard end */

/* devices */
.originDeviceList {
    position: relative;
    padding: 10px;
    min-height: 420px;
}

.originDeviceItem {
    position: relative;
    margin: 15px 0;
}

.originDeviceItem:before {
    content: '';
    position: absolute;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    top: 50%;
    bottom: 0;
    left: 30px;
    right: 30px;
    border-radius: 100px / 10px;
}

.itemContent {
    display: block;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(21, 35, 48, 0.2);
    padding-bottom: 10px;
    cursor: pointer;
}
.locationItemContent.placeholderList,
.locationGroupItemContent.placeholderList,
.itemContent.placeholderList {
    display: block !important;
    text-align: center;
    box-shadow: none;
    clear: both;
    cursor: default;
}
.thumbLocationItem .content-tools {
    position: absolute;
    top: 10px;
    right: 25px;
    height: 40px;
    text-align: center;
}

.originDeviceItem .itemContent:before,
.cloudDeviceItem:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    z-index: 5;
}

.originDeviceItem .itemContent.unshared:before,
.cloudDeviceItem.unshared:before {
    border-top: 70px solid rgba(44, 57, 63, 0.5);
}

.originDeviceItem .itemContent.shared:before {
    border-top: 70px solid rgba(84, 181, 255, 0.8);
}
.originDeviceItem .itemContent:after,
.cloudDeviceItem:after {
    font-family: 'Material Design Icons';
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1;
    font-size: 24px;
    color: #fff;
    padding: 8px;
    z-index: 5;
}

.itemContent.unshared:after,
.cloudDeviceItem.unshared:after {
    content: '\f33e';
}

.itemContent.shared:after {
    content: '\f160';
}

.originDeviceItem .content-tools {
    position: absolute;
    top: 10px;
    right: 25px;
}

.dropdownItem {
    cursor: pointer;
}

.originDeviceThumb:empty:before {
    content: '\f61a';
    font-family: 'Material Design Icons';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.virtualDeviceThumb:empty:before {
    content: "";
    width: 100%;
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url(../images/aiIcon.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.5) inset;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.originDeviceModel,
.originDeviceInfo {
    padding: 10px 15px;
}
.originDeviceModel {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.originDeviceInfo {
    line-height: 1.5;
    padding-top: 0;
}
.originDeviceInfo > div {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.infoLabel {
    display: inline-block;
    width: 120px;
}
.infoLabel:before {
    content: '\f316';
    font-family: 'Material Design Icons';
    margin-right: 5px;
    color: #1b5eb4;
}
.pagination {
    font-size: 16px;
    overflow: hidden;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}

.pagination > li > a {
    color: #1b5eb4;
    border: none !important;
    background-color: transparent;
    padding: 2px 8px;
    margin: 2px;
    border-radius: 15px !important;
    -webkit-border-radius: 15px !important;
    -moz-border-radius: 15px !important;
    -ms-border-radius: 15px !important;
    -o-border-radius: 15px !important;
}

.pagination > li > a > i {
    line-height: 1;
}

.pagination > li:hover > a {
    background-color: rgba(0, 0, 0, 0.05);
    color: #1b5eb4;
}

.pagination > li.active:hover > a {
    color: #fff;
    background: #1b5eb4;
}

.pagination li.active a {
    background: #1b5eb4;
    border-color: #1b5eb4 !important;
}

.pagination li.active a:hover,
.pagination li.active a:focus {
    background: #1b5eb4;
}

.pagination > li.disabled > a,
.pagination > .disabled > a,
.pagination > .disabled > a:focus,
.pagination > .disabled > a:hover,
.pagination > .disabled > span,
.pagination > .disabled > span:focus,
.pagination > .disabled > span:hover {
    background-color: transparent !important;
    color: #e8eaec !important;
}
.mini-pagination {
    display: table;
    width: 100%;
    margin-top: 5px;
    text-align: center;
}
.mini-pagination > * {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.mini-pagination a {
    width: 30px;
    font-size: 24px;
    line-height: 1;
    padding: 0;
    margin: 0;
    color: inherit;
    cursor: pointer;
    background-color: transparent;
    border: 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.mini-pagination a:hover {
    color: #337ab7;
    background-color: rgba(0,0,0,0.05);
}
.mini-pagination a.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.mini-pagination input {
    /* width: calc(100% - 10px); */
    width: fit-content;
    margin: 0 5px;
    outline: 0;
    border: 1px solid #ccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.mini-pagination input:focus {
    -webkit-box-shadow: 0 0 0 2px rgba(0,123,255,.25);
    box-shadow: 0 0 0 2px rgba(0,123,255,.25);
}
.viewFilterLabel {
    width: 100px;
    float: left;
    padding-left: 15px;
    line-height: 40px;
}

.viewFilterLabel > * {
    vertical-align: middle;
}

.viewFilterLabel i {
    display: inline-block;
    margin-right: 5px;
}

.viewFilterLabel i:before {
    content: '\f232';
    font-family: 'Material Design Icons';
    font-size: 24px;
    color: #63A8EB;
}

.viewFilterList {
    width: calc(100% - 100px);
    margin: 0;
    float: left;
}

.viewFilterList > div {
    display: inline-block;
    line-height: 44px;
    color: #c1ccd1;
}

.viewFilterList > div > span {
    display: inline-block;
    line-height: 1;
}

.viewFilterList > div > span > i {
    display: inline-block;
    text-align: center;
    width: 19px;
    padding: 2px;
    color: #63A8EB;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}

.optionText {
    margin-right: 5px;
}

.viewFilterItem {
    display: inline-block;
    margin-right: 10px;
    padding: 8px 14px;
    background-color: #84c2ff;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    margin: 3px 10px 3px 0;
    vertical-align: top;
}

.viewFilterItem:hover {
    background-color: #63A8EB;
}

.viewFilterItem i:before {
    content: '\f156';
    font-family: 'Material Design Icons';
    cursor: pointer;
}
.productCode input {
    width: calc(100% - 50px);
    float: left;
    font-family: consolas,Inconsolata;
    font-weight: 500;
    font-size: 18px;
    text-overflow: ellipsis;
}
/* .linkTypeSelector {
    display: inline-block;
    width: 200px;
    height: 200px;
    line-height: 200px;
    cursor: pointer;
}
.linkTypeSelector {
    position: relative;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    color: #fff;
    overflow: hidden;
}

.linkTypeSelector.cloudDevice {
    background-color: #1E88E5;
}

.linkTypeSelector.edgeDevice {
    background-color: #074174;
}

.linkTypeSelector > span {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 200px;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.linkTypeSelector > span {
    top: 0px;
}
.linkTypeSelector:hover > span {
    top: -200px;
}
.linkTypeSelector.selected:hover > span:first-child,
.linkTypeSelector.selected > span:first-child {
    top: -48px;
    z-index: 100;
}
.linkTypeSelector.selected:hover > span:last-child,
.linkTypeSelector.selected > span:last-child {
    top: 0px;
}
.linkTypeSelector.selected::before,
.linkTypeSelector.selected::after {
    position: absolute;
    font-size: 48px;
    color: #fff;
    font-family: 'Material Design Icons';
    z-index: 100;
    line-height: 1;
}
.linkTypeSelector.selected::before {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
}
.linkTypeSelector.selected::after {
    content: '\f12c';
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
}
.linkImage {
    background-position: center;
    background-repeat: no-repeat;
}
.cloudDevice > .linkImage {
    background-image: url(../images/cloud_link.png);
}
.edgeDevice > .linkImage {
    background-image: url(../images/edge_link.png);
} */

/* devices end */

/* device Page */
/* .contentInfoWrapper {
    border-right: 1px dotted #e0e0e0;
}
.contentInfoWrapper + .contentInfoWrapper {
    border-left: 1px dotted #e0e0e0;
} */
.deviceInfoBox .listThumb {
    padding-top: 100%;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    overflow: hidden;
    transition: padding-top 0.2s ease-in-out;
    -webkit-transition: padding-top 0.2s ease-in-out;
    -moz-transition: padding-top 0.2s ease-in-out;
    -ms-transition: padding-top 0.2s ease-in-out;
    -o-transition: padding-top 0.2s ease-in-out;
}
.deviceInfoBox .listThumb:empty {
    padding-top: 0;
}
.tableContainer {
    width: 100%;
    overflow: auto;
    border-bottom: 1px solid #111;
}
.tableContainer th,
.tableContainer td {
    word-break: keep-all;
    white-space: nowrap;
    line-height: 40px;
}

.tableContainer tr:last-child td {
    border-bottom: 0;
}
.tableContainer tbody tr:hover td {
    color: #000;
}
.tableContainer tbody tr:nth-child(odd) td,
.stripe tbody tr:nth-child(odd) td {
    background-color: rgba(0,0,0,0.0) !important;
}
.tableContainer tbody tr:nth-child(even) td,
.stripe tbody tr:nth-child(even) td {
    background-color: rgba(0,0,0,0.03) !important;
}
.tableContainer tbody tr.blankItem td {
    background-color: transparent !important;
}
.tableContainer tbody tr.blankItem {
    font-size: inherit !important;
}
.tableContainer tbody tr:hover,
.stripe tbody tr:hover {
    background-color: rgba(0,0,0,0.01) !important;
}
.tableContainer table {
    width: 100%;
}
.tableContainer tr {
    /* border-bottom: 1px solid #e0e0e0; */
    border-bottom: 0 !important;
}

.tableContainer thead th, .tableContainer thead td {
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
}

.modal .tableContainer {
    border-top: 1px solid #111;
}
.modalTable thead th {
    border-top: 0px solid #111;
}

.tableContainer th,
.tableContainer td {
    padding: 5px 10px;
    white-space: nowrap;
}

.tableContainer > * > tr.blankItem {
    border-bottom: 0px;
}
.tableContainer.selectable tr {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
.tableContainer.selectable tr.selected {
    background-color: #ceedff !important;
}
.fixed-table {
    position: relative;
    width:100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    border-top: 1px solid #111;
    /* border-bottom: 1px solid #111; */
}
.fixed-table table {
    width: 100%;
    /* height: 100%; */
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}
/* .fixed-table th,
.fixed-table td {
    padding: 10px 18px;
} */

.fixed-table thead th {
    background-color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    /* transform: scale(0.99);
    -webkit-transform: scale(0.99);
    -moz-transform: scale(0.99);
    -ms-transform: scale(0.99);
    -o-transform: scale(0.99); */
}
.fixed-table.tableContainer thead th,
.fixed-table.tableContainer thead td {
    border-top: 0;
}
/* safari and ios need the tfoot itself to be position:sticky also */
.fixed-table tfoot,
.fixed-table tfoot th,
.fixed-table tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background-color: #fff;
    z-index:4;
}

.fixed-table th:first-child,
.fixed-table td:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 6;
    background-color: #fff;
    border-right: 1px solid #ccc;
}
.fixed-table .blankItem td {
    position: unset;
    border-right: 0;
    background-color: unset;
}
.fixed-table thead th:first-child,
.fixed-table tfoot th:first-child {
    z-index: 5;
}
.fixed-table thead th,
.fixed-table tfoot th {
    z-index: 4;
}
.fixed-table tbody tr:nth-child(odd) td:first-child {
    background-color: #fff !important;
    z-index: 1;
}
.fixed-table tbody tr:hover:nth-child(odd) td:first-child {
    background-color: #fcfcfc !important;
}
.fixed-table tbody tr:nth-child(even) td:first-child {
    background-color: #f7f7f7  !important;
    z-index: 1;
}
.fixed-table tbody tr:hover:nth-child(even) td:first-child {
    background-color: #f4f4f4 !important;
}
.fixed-table thead th, 
.fixed-table th:first-child, 
.fixed-table td:first-child {
    background-color: #fff !important;
}
.tableContainer thead th.sorting {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    padding-right: 20px;
}
.tableContainer thead th.sorting {
    background-repeat: no-repeat;
    background-position: center right;
    background-image: url(../images/sort_both.png);
}
.tableContainer thead th.sorting[data-sort="asc"] {
    background-image: url(../images/sort_asc.png);
}
.tableContainer thead th.sorting[data-sort="desc"] {
    background-image: url(../images/sort_desc.png);
}

.unitList {
    width: 100%;
}

.unitTypeList,
.unitTypeList02 {
    width: 100%;
}

.unitItem .unitName {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

.unitItem .unitName:hover {
    color: #1E88E5;
    text-decoration: underline;
}

.unitItem .unitTypeName {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

.unitItem .unitTypeName:hover {
    color: #1b5eb4;
    text-decoration: underline;
}
/* .deployed .unitItem .unitName:hover {
    color: inherit;
    text-decoration: none;
    cursor: not-allowed;
} */

.deployed .uploadPicture {
    display: none;
}
.deployed input[type="text"]:disabled,
.deployed input[type="number"]:disabled,
.deployed select:disabled {
    color: #c7c7c7;
}
.tableContainer.unitListContainer {
    min-height: auto;
}
.tableContainer.unitTypeContainer {
    min-height: auto;
}
/* .unitList > * > tr {
    border-bottom: 1px solid rgb(224, 224, 224);
}
.unitList > thead > tr {
    border-top: 1px solid rgb(182, 182, 182);
    border-bottom: 1px solid rgb(182, 182, 182);
}
.unitList > * > tr.blankItem {
    border-bottom: 0px;
} */
.unitList th,
.unitList td {
    padding: 5px 10px;
}
.unitTypeList > * > * > th,
.unitTypeList > * > * > td,
.unitTypeList02 > * > * > th,
.unitTypeList02 > * > * > td  {
    padding: 5px 10px;
    height: 51px;
    white-space: nowrap;
}
.adminclientList > * > tr,
.unitTypeList > * > tr,
.unitTypeList02 > * > tr {
    border-bottom: 1px solid rgb(224, 224, 224);
}
.adminclientList > thead > tr,
.unitTypeList > thead > tr,
.unitTypeList02 > thead > tr {
    border-top: 1px solid rgb(182, 182, 182);
    border-bottom: 1px solid rgb(182, 182, 182);
}
.adminclientList > * > tr.blankItem,
.unitTypeList > * > tr.blankItem,
.unitTypeList02 > * > tr.blankItem {
    border-bottom: 1px solid rgb(182, 182, 182);
}

.unitTypeList > * > * > th,
.unitTypeList > * > * > td,
.unitTypeList02 > * > * > th,
.unitTypeList02 > * > * > td {
    padding: 5px 10px;
    white-space: nowrap;
    text-align: center;
}

tbody > .blankItem > td {
    padding: 50px 10px;
    text-align: center;
}

.blankItem i {
    color: #ff7b00;
    font-size: 24px;
    vertical-align: middle;
}

.rowHead {
    width: 30px;
}

tbody .unitName {
    font-weight: 500;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}


tbody .unitTypeName {
    font-weight: 500;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

th.unitNumber,
td.unitNumber {
    width: 1%;
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;
}

th.unitCode,
td.unitCode {
    width: 1%;
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;
}

th.unitAction,
td.unitAction {
    width: 1%;
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;
}

.unitAction > span,
.unitAction > i {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.unitAction > span:before,
.unitAction > span:after,
.unitAction > i:before,
.unitAction > i:after {
    font-family: 'Material Design Icons';
    font-size: 24px !important;
    left: 0;
}

label .unitAction > span:before,
label .unitAction > span:after {
    line-height: 17px;
}

span.unitAction {
    position: absolute;
    left: 20px;
    margin-right: 5px;
}

/* .unitAction > span {
    width: unset;
    height: unset;
} */

.unitAction > span:before,
.unitAction > span:after {
    font-size: inherit;
}

.unitComment,
.dataSymbol,
.controlTest {
    width: 1%;
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;
}
/* .modelInfo i, */
.unitComment i {
    cursor: pointer;
    color: #1b5eb4;
}
/* .modelInfo i:before, */
.unitComment i:before {
    font-family: 'Material Design Icons';
    content: '\f188';
}

/* .unitAction > span,
.unitAction > i {
    transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    -o-transform: rotate(-25deg);
} */
#unitAction {
    margin: 8px 0;
}
.dataSend > span:before,
.dataSend > i:before,
.dataRecive > span:before,
.dataRecive > i:before {
    line-height: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -12px;
    margin-left: -12px;
}

.dataSend > span:before,
.dataSend > i:before {
    /* content: '\f443'; */
    content: '\f349';
    color: #0160c3;
}

.dataRecive > span:before,
.dataRecive > i:before {
    /* content: '\f441'; */
    content: '\f8d5';
    color: #eb6a93;
}

.dataReciveSend > i:before,
.dataReciveSend > i:after {
    position: absolute;
    line-height: 1;
}

.dataReciveSend > i:after {
    content: '\f349';
    color: #0160c3;
    top: 50%;
    margin-top: -18px;
    margin-left: 6px;
}

.dataReciveSend > i:before {
    content: '\f8d5';
    color: #eb6a93;
    top: 50%;
    margin-top: -6px;
    margin-left: -6px;
}

.approvalTool > i,
.listTool > i,
.controlTest > i {
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: #1b5eb4;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.unitControlBox > .notAvailable {
    display: inline-block;
    width: 60px;
    font-size: 16px;
    text-align: center;
    color: #fff;
    background-color: #ced1d4;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.approvalTool > i:hover,
.listTool > i:hover,
.controlTest > i:hover {
    background-color: #1b5eb4;
}

.controlTest > i:after {
    font-family: 'Material Design Icons';
    content: '\f454';
}

.methodContainer {
    border-left: 3px solid #ccc;
    padding-left: 15px;
}

.flipToggle {
    float: right;
    cursor: pointer;
}

.flipToggle > * {
    display: inline-block;
    vertical-align: middle;
}

.flipToggle i {
    margin-left: 5px;
}

.flipToggle i:before {
    content: '\f140';
    font-family: 'Material Design Icons';
    color: #1E88E5;
    font-size: 20px;
}

.flipToggle.active i:before {
    content: '\f143';
}

.boundedForm > .boundedVal {
    width: calc(50% - 15px);
}
.boundedForm > .minVal {
    float: left;
}
.boundedForm > .maxVal {
    float: right;
}
.boundedForm:after {
    content: '~';
    display: block;
    line-height: 34px;
    text-align: center;
}
.boundedVal,
.boundedFormStep,
.booleanVal {
    position: relative;
}
.boundedVal:before,
.boundedFormStep:before,
.booleanVal:before {
    position: absolute;
    top: 0;
    padding: 8px 4px;
}
.minVal:before {
    content: 'min :';
}
.maxVal:before {
    content: 'max :';
}
.trueVal:before {
    content: 'true :';
}
.falseVal:before {
    content: 'false :';
}
.boundedFormStep:before {
    content: 'step :';
}
.minVal .form-control,
.trueVal .form-control,
.boundedFormStep .form-control {
    padding-left: 40px;
}
.maxVal .form-control,
.falseVal .form-control {
    padding-left: 45px;
}
.deviceOptionalInfo {
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
}

.deviceOptionalInfo.active {
    visibility: visible;
    max-height: 2000px;
}

.simple-modal {
    color: #191816;
    z-index: 1951;
}

.simple-modal .modal-header {
    /* background-color: #fdfd86; */
    background-color: #fafafa;
}

.simple-modal .modal-content {
    position: relative;
    /* min-height: 460px; */
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    /* border-bottom-right-radius: 60px 5px; */
    /* background: #ffff88; */
    /* Old browsers */
    /* background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); */
    /* FF3.6+ */
    /* background: -webkit-gradient(linear, left top, right bottom, color-stop(81%, #ffff88), color-stop(82%, #ffff88), color-stop(82%, #ffff88), color-stop(100%, #ffffc6)); */
    /* Chrome,Safari4+ */
    /* background: -webkit-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); */
    /* Chrome10+,Safari5.1+ */
    /* background: -o-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); */
    /* Opera 11.10+ */
    /* background: -ms-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); */
    /* IE10+ */
    /* background: linear-gradient(135deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); */
    /* W3C */
    /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6', GradientType=1); */
    /* IE6-9 fallback on horizontal gradient */
}

.simple-modal .modal-body-content > div {
    padding: 20px;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
    word-break: keep-all;
}
.fileWrapper {
    position: relative;
    height: 250px;
    background-color: #f5f5f5;
    border: 2px dotted #bbb;
    border-radius: 5px;
    text-align: center;
    margin-bottom: -30px;
    margin-top: 20px;
}
.filePlaceholder {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto;
    color: #92AAB0;
}
.filePlaceholder i {
    font-size: 80px;
    color: #e1e6e7;
}
.fileContainer {
    position: relative;
    z-index: 2;
}
.fileRemove {
    position: relative;
    color: #ec5252;
    margin-bottom: -30px;
    z-index: 5;
}
.fileRemove i {
    cursor: pointer;
}
.filename {
    padding: 10px 15px;
    background-color: #fff;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}
label[for="selDriverOption"],
.selDriverOption {
    display: inline-block;
    width: auto;
}
label[for="selDriverOption"] {
    margin-right: 10px;
}
.driver,
.rule {
    min-height: 465px;
    margin: 20px 0;
    padding: 0 10px;
}
.fn_guide,
.driverGuide {
    border: 1px dashed #cacaca;
    padding: 20px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.driverGuide {
    min-height: 465px;
}
.driverGuide > .driverGuideTitle {
    text-align: center;
    margin: 0;
    margin-top: -25px;
}
.driverGuide > .driverGuideTitle > span {
    background-color: #fff;
    padding: 5px 15px;
    border: 2px solid #dfdfdf;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.driverGuideContent > h3 {
    margin: 15px 0;
}
.driverGuideContent > h3:before,
.driverGuideContent > p:before {
    font-size: 24px;
    margin-right: 5px;
    font-weight: 400;
}
.driverGuideContent > h3:before {
    content: 'Q.';
    color: #1b5eb4;
}
.driverGuideContent > p:before {
    content: 'A.';
    color: #1E88E5;
}
#driverTabNav.nav-tabs > li a {
    padding: 10px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
    opacity: 0.7;
}
#driverTabNav.nav-tabs > li.active a {
    border: 1px solid #ddd !important;
    border-bottom: 0 !important;
    opacity: 1;
}
#driverTabNav.nav-tabs > li a:hover {
    opacity: 1;
    background-color: #f9f9f9;
}
.driverTab {
    box-shadow: none;
}
.optionContent {
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.caseTitle {
    background-color: #fbfbfb;
    margin: 0;
    padding: 20px;
}
.caseContent {
    background-color: #fbfbfb;
    padding: 0 20px 20px;
    word-break: keep-all;
    line-height: 1.8;

}
.driverCodeContainer,
.ruleCodeContainer {
    position: relative;
    overflow: hidden;
    height: 400px;
    margin-bottom: 20px;
    z-index: 4;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.discriptionBox {
    position: relative;
    overflow: hidden;
    z-index: 4;
    /* -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05); */
}
.discriptionBox.fullscreenMode,
.driverCodeContainer.fullscreenMode,
.ruleCodeContainer.fullscreenMode {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5000;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    -ms-border-radius:0;
    -o-border-radius:0;
}
.discriptionTitle,
.driverCodeTitle,
.ruleCodeTitle,
.scheduleCodeTitle {
    position: relative;
    padding: 12px 10px;
    background-color: #E7EBEC;
    box-sizing: border-box;
    border: 1px solid #cacaca;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -ms-border-radius: 5px 5px 0 0;
    -o-border-radius: 5px 5px 0 0;
}
.discriptionTitle i,
.driverCodeTitle i,
.ruleCodeTitle i,
.scheduleCodeTitle i {
    color: #1b5eb4;
}
.fullscreenMode .discriptionTitle,
.fullscreenMode .driverCodeTitle,
.fullscreenMode .ruleCodeTitle,
.fullscreenMode .scheduleCodeTitle {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.fullscreenMode .discription {
    height: calc(100% - 45px) !important;
}
.discription {
    background-color: #fbfbfb;
    padding: 5px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) inset !important;
    width: 100%;
    height: 150px !important;
    overflow: auto;
    padding: 10px !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
}
.driverCodeWin,
.ruleCodeWin,
.scheduleCodeWin {
    position: relative;
    height: calc(100% - 44px);
}
.driverCodeWin .codemirror,
.ruleCodeWin .codemirror,
.scheduleCodeWin .codemirror {
    height: 100%;
}
.discriptionFullscreen,
.codeFullscreen {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 24px;
    cursor: pointer;
}
.discriptionFullscreen > i:before,
.codeFullscreen > i:before {
    font-family: 'Material Design Icons';
    content: '\f293';
}
.fullscreenMode .discriptionFullscreen > i:before,
.fullscreenMode .codeFullscreen > i:before {
    content: '\f294';
}
.guideBox,
.mailAttach {
    border: 1px dashed #cacaca;
    padding: 15px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.CodeMirror pre {
    font-size: 16px;
    font-family: 'consolas', 'Inconsolata';
    font-weight: 400;
}
.mailAttach .attachList {
    padding: 0;
    margin: -5px;
}
.processBarContainer {
    padding-top: 20px;
    padding-bottom: 15px;
}
.processBar {
    display: flex;
    width: 100%;
}
.processStep {
    flex : 1;
    text-align: center;
}
.processPiont {
    display: inline-block;
    width: 100%;
    clear: both;
}
.processPiont span {
    float: left;
    width: 30px;
    height: 30px;
    background-color: #b2d0f6;
    color: #fff;
    line-height: 30px;
    font-weight: 500;
    text-align: center;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.focus .processPiont span {
    position: relative;
    background-color: #1b5eb4;
    box-shadow: 0 0 0px 5px #d4e6fd;
    z-index: 2;
}
.focus .processPiont span div {
    display: none;
}
.focus .processPiont span:before {
    content: '\f12c';
    font-family: 'Material Design Icons';
}
.processPiont:before,
.processPiont:after {
    position: relative;
    content: '';
    float: left;
    width: calc(50% - 15.1px);
    height: 4px;
    margin: 13px 0;
    background-color: rgba(120, 144, 156, 0.2);
}
.processStep:first-child .processPiont:before,
.processStep:last-child .processPiont:after {
    opacity: 0;
    visibility: hidden;
}
.processContent {
    padding: 10px 10px 0;
    font-size: 15px;
    font-weight: 500;
}
.orderTool .sendOrder {
    display: inline-block;
}
.orderTool .reSendOrder {
    display: none;
}
.orderTool.sended .sendOrder {
    display: none;
}
.orderTool.sended .reSendOrder {
    display: inline-block;
}

.codeTool .sendConfirm {
    display: inline-block;
}
.codeTool .modifDriver {
    display: none;
}
.codeTool.sended .sendConfirm {
    display: none;
}
.codeTool.sended .modifDriver {
    display: inline-block;
}
.orderMailContainer {
    margin-bottom: 20px;
}
/* device Page end */

/* connectivity */

.linkContainer,
.timelineDeviceContainer {
    display: inline-block;
    width: 100%;
    padding: 5px;
    min-height: 300px;
    margin: 20px 0 10px 0;
    background-color: #daddde;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    overflow: auto;
}

.timelineDeviceList {
    margin: 0;
    /* padding-bottom: 60px; */
}

.timelineDeviceList > .blankItem {
    text-align: center;
    padding: 24px 15px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px dashed #ccc;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}

.timelineDeviceItem {
    position: relative;
    background-color: #fff;
    padding: 8px 50px 8px 8px;
    /* color: #fff; */
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    cursor: pointer;
    /* opacity: 0.7; */
    background-color: rgba(255,255,255,0.7);
}
.timelineDeviceItem.connected {
    /* opacity: 1; */
    background-color: #fff;
}

.timelineDevice .timelineDeviceItem.iotDevice:before {
    background-color: #034498;
}

.timelineDevice .timelineDeviceItem.localDevice:before {
    background-color: #00aaea;
}

.timelineDevice .timelineDeviceItem.lpwaDevice:before {
    background-color: #2fbebe;
}

.timelineDevice .timelineDeviceItem.aiDevice:before {
    background-color: #af5dde;
}

.timelineDevice .timelineDeviceItem.iotDevice:hover:before {
    background-color: #003985;
}

.timelineDevice .timelineDeviceItem.localDevice:hover:before {
    background-color: #009bd3;
}

.timelineDevice .timelineDeviceItem.lpwaDevice:hover:before {
    background-color: #27afaf;
}

.timelineDevice .timelineDeviceItem.aiDevice:hover:before {
    background-color: #984bc5;
}

.timelineDeviceItem + .timelineDeviceItem {
    margin-top: 5px;
}
.timelineDeviceItem .deviceThumb,
.timelineDeviceItem .timelineDeviceInfo {
    display: inline-block;
    vertical-align: middle;
}
.timelineDeviceItem.aiDevice .deviceThumb:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #2c5a9c;
    box-shadow: 0 0 0.7em 0 rgb(0 0 0 / 30%) inset;
    background-image: url(../images/aiIcon.png);
    background-size: cover;
}
.timelineDeviceInfo {
    width: calc(100% - 75px);
}
.timelineDeviceName {
    padding-right: 60px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

.linkType {
    float: left;
    clear: right;
}

.timelineDeviceKey {
    clear: both;
}

.timelineDeviceName,
.linkType,
.linkStatus,
.timelineDeviceKey {
    position: relative;
    z-index: 1;
}

/* .iotDevice .linkType:before {
    content: 'Direct Device';
}

.localDevice .linkType:before {
    content: 'Gateway Device';
}

.lpwaDevice .linkType:before {
    content: 'LPWA Device';
} */

.timelineDeviceKey {
    font-size: 13px;
    opacity: 0.7;
}

.timelineDevice .timelineDeviceItem:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -ms-border-radius: 0 3px 3px 0;
    -o-border-radius: 0 3px 3px 0;
}
.checkInfo > * {
    display: inline-block;
    vertical-align: middle;
}

.list_container {
    width: 100%;
    height: 100%;
    background-color: #F1F4F5;
    /* background-image: url(../images/body_bg.png); */
    border-radius: 5px;
    border: 1px solid #ddd;
    box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
    overflow: auto;
}

.list_container ul {
    display: inline-block;
    padding: 0;
    text-align: left;
    width: 100%;
}

.list_container ul > li {
    position: relative;
    width: 200px;
    height: 260px;
    margin: 15px;
    list-style: none;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    overflow: hidden;
    cursor: pointer;
    background-color: #fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.list_container ul > li > .imgBox {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.list_container ul > li > .imgBox:empty {
    background-color: #425a7d;
}

.list_container ul > li > .imgBox:empty:before {
    content: '\f61a';
    color: rgba(32, 167, 255, 0.5);
    font-family: 'Material Design Icons';
    font-size: 140px;
    text-align: center;
    line-height: 200px;
}
.list_container ul > li.aiDevice > .imgBox:empty:before {
    content: '';
    display: inline-block;
    background-image: url(../images/aiIcon.png);
    width: 100%;
    height: calc(100% - 60px);
    line-height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.list_container ul > li > .imgBox > img {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    object-fit: cover;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.list_container ul > li:hover > .imgBox > img,
.list_container ul > li.selected > .imgBox > img {
    width: 260px;
    height: 260px;
    transition-delay: 0.3s;
    /* -webkit-animation: blur 0.3s linear both;
    -moz-animation: blur 0.3s linear both;
    -ms-animation: blur 0.3s linear both;
    -o-animation: blur 0.3s linear both;
    animation: blur 0.3s linear both;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    animation-delay: 0.3s; */
}

/* @-webkit-keyframes blur {
    to {
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }
}

@-moz-keyframes blur {
    to {
        -webkit-filter: blur(3px);
        filter: blur(3px);
    }
}

@keyframes blur {
    to {
        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        filter: blur(3px);
    }
} */

.hover_div {
    position: absolute;
    top: calc(100% - 60px);
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.list_container ul > li.selected .hover_div,
.list_container ul > li:hover .hover_div {
    top: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition-delay: 0.3s;
}

.hover_cont {
    display: inline-block;
    /* position: absolute; */
    width: 100%;
    /* top: 0%; */
    color: #fff;
    font-weight: 400;
    vertical-align: middle;
    padding: 10px;
    transition: top 0.3s ease-in-out;
    -webkit-transition: top 0.3s ease-in-out;
    -moz-transition: top 0.3s ease-in-out;
    -ms-transition: top 0.3s ease-in-out;
    -o-transition: top 0.3s ease-in-out;
}
.hover_div:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -5px;
}
.hover_cont > .hover_cont_inbox {
    display: inline-block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}
.hover_cont > .hover_cont_inbox > .maker_name {
    margin-top: 10px;
}
.hover_cont > .hover_cont_inbox > .device_type {
    margin-top: 10px;
    margin-bottom: -25px;
}
.select_div {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0,0,0,0.5);*/
    text-align: left;
    padding: 10px;
}

.selected .select_div {
    display: block;
}

.select_div i {
    /* display: inline-block; */
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    border-radius: 100%;
    background-color: #63A8EB;
    color: #fff;
}

.size_toggler {
    position: absolute;
    top: calc(50% - 50px);
    left: -15px;
    width: 30px;
    height: 100px;
    background-color: #eee;
    text-align: center;
    font-size: 16px;
}

.size_toggler:hover {
    background-color: #63A8EB;
    color: #fff;
    cursor: pointer;
}

.size_toggler:before {
    display: inline-block;
    height: 100%;
    content: '';
    vertical-align: middle;
}

.size_toggler > i {
    margin-left: -3px;
}

.cloudDeviceInfo {
    position: relative;
    height: 100%;
    /* padding: 15px; */
    background-color: #F5F5F5;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0px -1px 5px rgba(0, 0, 0, 0.2) inset;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    overflow: auto;
}

.modal .deviceInfoBox {
    padding: 10px 15px;
}

.modalProcessLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);
    -o-transform:translate(-50%, -50%);
}

.modalProcessLoading i {
    font-size: 56px;
    color: #28498f;
}
.contentsLoading {
    padding: 50px 0;
}


.contentsLoading i.mdi-spin:before {
    font-size: 56px;
    color: #28498f;
}

.driver_model {
    color: #bdbdbd;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.form_title {
    font-size: 18px;
    font-weight: 500;
    padding-top: 10px;
    padding-bottom: 10px;
}

.form_title:before {
    content: '\f04b';
    font-family: "Material Design Icons";
    color: #63A8EB;
    margin-left: -3px;
    margin-right: 5px;
}
.cloudDeviceInfo .unitListBox {
    margin-top: 10px;
    border-bottom: 1px solid #111;
}
.cloudDeviceInfo .unitPaginationContainer {
    margin-top: 0;
}
.discriptionContainer {
    min-height: 100px;
    max-height: 400px;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #ddd;
    line-height: 1.7;
    overflow: auto;
    margin-top: 10px;
}

.cloudDeviceInfo .textareaBox {
    display: inline-block;
    padding: 15px;
    width: 100%;
    height: 100%;
}

.cloudDeviceInfo .textareaBox img {
    max-width: 100%;
}
.cloudDeviceInfo hr {
    margin: 15px -15px;
    border-color: #ddd;
}
a.attachItem {
    display: block;
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
}
a.attachItem span,
.attachItem span.fileName {
    display: inline-block;
    width: calc(100% - 35px);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    vertical-align: middle;
}
a.attachItem span {
    width: calc(100% - 20px);
}


.noDevice_msg,
.noselect_msg {
    width: 100%;
    /* height: 220px; */
    text-align: center;
    /* font-weight: 400; */
    font-size: 17px;
    color: #BDBDBD;
}

.noDevice_msg i,
.noselect_msg i {
    height: 150px;
    line-height: 1;
    font-size: 150px;
    color: #B0BEC5;
}

.noDevice_msg p,
.noselect_msg p {
    word-break: keep-all;
}
.deviceStatus .deviceList .blankItem,
.serviceAlarmList .blankItem,
.timelineList .blankItem,
.deviceList .blankItem,
.noDeviceSelect {
    text-align: center;
    font-size: 16px;
}

.serviceAlarmList .blankItem,
.timelineList .blankItem {
    margin-top:15%;
}
.deviceStatus .deviceList .blankItem {
    margin-top: 90px;
}
.serviceAlarmList:empty,
.timelineList:empty {
    position: relative;
    height: 100%;
}
.serviceAlarmList .blankItem > i,
.timelineList .blankItem > i,
.noDeviceSelect i {
    display: block;
    font-size: 150px;
    color: #B0BEC5;
}
.deviceSection,
.unitSection {
    /* float: left; */
    position: absolute;
    height: 100%;
}
.deviceSection {
    left: 0;
    width: 60%;
}
.deviceSection.full {
    width: 100%;
}
.deviceSectionHeader,
.unitSectionHeader {
    position: relative;
    height: 68px;
    padding: 14px 20px;
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    z-index: 1;
}
.deviceSectionHeaderTool {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.deviceSectionBody,
.unitSectionBody {
    height: calc(100% - 137px);
    overflow: auto;
}
.deviceSectionFooter,
.unitSectionFooter {
    position: absolute;
    width: 100%;
    height: 69px;
    text-align: center;
    padding: 0 20px;
    bottom: 0;
    -webkit-box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
.unitSectionHeader,
.unitSectionFooter {
    -webkit-box-shadow: none;
    box-shadow: none;
}
.unitSection {
    /* padding: 15px 20px; */
    right: 0;
    width: 40%;
    background-color: #fff;
    -webkit-box-shadow: -1px 0px 4px rgba(0, 0, 0, 0.2);
    box-shadow: -1px 0px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}
.unitSectionBody {
    padding: 15px 20px;
}
.unitSectionToggler {
    display: none;
}
.scheduleContents {
    height: 100%;
}
.scheduleContainer {
    height: 100%;
}
.deviceList,
.scheduleList {
    position: relative;
    height: 100%;
    overflow: auto;
    padding: 0px 5px;
}
.deviceList:after,
.scheduleList:after {
    content: '';
    clear: both;
}
.deviceList > .blankItem i,
.unitListBox > .blankItem i,
.scheduleList > .blankItem i {
    display: block;
    font-size: 150px;
    color: #B0BEC5;
}
.deviceList .blankItem,
.scheduleList .blankItem {
    margin-top: 10%;
}
.unitListBox > .blankItem {
    margin-top: 15%;
    text-align: center;
    font-size: 16px;
}
.deviceItemBox {
    position: relative;
    padding: 0px;
    background-color: #fff;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    margin: 15px 0;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
/* .deviceItem.active .deviceItemBox {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 0 5px #cacaca;
} */
.deviceItem[device-type="aiDevice"].active .deviceItemBox {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(175, 93, 222, 0.2);
}
.deviceItem[device-type="iotDevice"].active .deviceItemBox {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(3, 68, 152, 0.2);
}
.deviceItem[device-type="localDevice"].active .deviceItemBox {
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2), 0 0 0 5px rgba(0, 170, 234, 0.2);
}

/* .deviceItem + .deviceItem {
    margin-top: 15px;
} */
.cloudDeviceInfo .unitItem:hover > .unitName,
.deviceItemBox .unitItem > .unitName:hover {
    color: inherit;
    text-decoration: none;
    cursor: default;
}
.cloudDeviceInfo .unitItem:hover > .unitName {
    color: #000;
}
.deviceItemBox .deviceHeader,
.deviceItemBox .deviceDetail {
    padding: 5px 10px;
    display: block;
}
/* [신아키 이관 누락 복구] gov nubison-cloud-static 의 디바이스 카드 메타(.deviceMeta) CSS.
   현재 devices.vue 템플릿이 .deviceDetailInfo/.deviceMeta/.deviceMetaList 를 쓰는데 이관 중 빠져 카드가 깨졌었음 */
.deviceItem .deviceDetailInfo {
    position: relative;
    height: 200px;
}
.deviceDetailInfo > .deviceMeta {
    position: absolute;
    visibility: hidden;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0px;
    padding: 0px 10px;
    border-top: 1px solid #ccc;
    background-color: #eaeff1;
    z-index: 20;
    overflow: auto;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}
.deviceDetailInfo > .deviceMeta:hover {
    background-color: #eff3f6;
}
.metaView .deviceDetailInfo > .deviceMeta {
    visibility: visible;
    height: calc(100% - 35px);
    opacity: 1;
}
.deviceMeta li {
    display: flex;
    flex-direction: row;
    line-height: 2;
    border-bottom: 1px solid #e1e1e1;
}
.deviceMeta li:first-child {
    margin-top: 5px;
}
.deviceMeta li:last-child {
    border-bottom: 0;
    margin-bottom: 5px;
}
.deviceMeta li > span {
    display: inline-block;
    word-break: break-all;
    padding: 0 5px;
}
.deviceMeta li > span:first-child {
    font-weight: 500;
    white-space: nowrap;
}
.deviceDetailInfo > .deviceMeta .deviceMetaList {
    color: #000;
}
.deviceDetailInfo > .deviceMeta .deviceMetaList:empty {
    height: 100%;
    text-align: center;
    overflow: hidden;
    color: inherit;
}
.deviceDetailInfo > .deviceMeta .deviceMetaList:empty::before {
    content: '\F626';
    font-family: 'Material Design Icons';
    font-size: 80px;
    opacity: 0.5;
    text-align: center;
    transform: translateY(-50%);
}
/* [신아키 이관 누락 복구] 토글 스위치(.switch) — '디바이스 속성 보기' 등.
   라벨 간격(margin-left:5px) + 세로정렬(vertical-align:middle) + 슬라이더 토글 UI */
.switch {
    user-select: none;
}
.switch > label {
    margin-bottom: 0;
}
.switch > label + span {
    margin-left: 5px;
    font-weight: 400;
    vertical-align: middle;
}
.switch > label > input[type="checkbox"] {
    display: none;
}
.switch > label > input[type="checkbox"] + i {
    position: relative;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    width: 40px;
    height: 24px;
    background-color: #ccc;
    border-radius: 20px;
    transition: all 0.1s linear;
}
.switch > label > input[type="checkbox"] + i:before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 20px;
    transition: left 0.1s linear;
}
.switch > label > input[type="checkbox"]:checked + i:before {
    left: 18px;
}
.switch.green-switch > label > input[type="checkbox"]:checked + i {
    background-color: #25bc25;
}
.switch.light-blue-switch > label > input[type="checkbox"]:checked + i {
    background-color: #03aaea;
}
.deviceInfo {
    display: inline-block;
    width: 100%;
    clear: both;
    cursor: pointer;
}
.mini-label,
.info-label {
    display: block;
    font-weight: 400;
}
.info-label {
    width: 120px;
    float: left;
}
.relatedInfoDetail .info-label {
    width: 170px;
}
.mini-label:before,
.info-label:before {
    content: '|';
    font-weight: 100;
    margin-right: 5px;
    color: #63a8eb;
}
.info-data {
    /* display: inline-block; */
    max-width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.relatedInfoDetail .info-data {
    max-width: calc(100% - 140px);
}
.rule_info .info-data {
    display: inline-block;
    max-width: calc(100% - 110px);
}
.rule_info .ruleTarget .info-data {
    display: inline-block;
    max-width: calc(100% - 135px);
}
.info-data > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deviceDetail .info-data > div {
    display: inline;
    max-width: 50%;
}
.deviceThumb {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: #fff;
    margin-right: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    overflow: hidden;
}

.deviceThumb > img,
.scheduleThumb >img {
    position: absolute;
    vertical-align: middle;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #fff;
    z-index: 1;
}
.deviceThumb > img.aiDeviceThumb,
.deviceThumb:empty {
    background-color: #2c5a9c;
    text-align: center;
    border: 0;
    box-shadow: 0 0 0.7em 0 rgba(0, 0, 0, 0.6) inset;
}
.viewDeviceModal .deviceThumb > img.aiDeviceThumb,
.viewDeviceModal .deviceThumb:empty {
    box-shadow: 0 0 3em 0 rgba(0, 0, 0, 0.6) inset;
}
.scheduleThumb:empty {
    background-color: #ffffff;
    text-align: center;
    border: 0;
}

.deviceThumb:empty:before {
    content: '\f61a';
    color: rgba(104, 195, 255, 0.5);
    font-family: 'Material Design Icons';
    font-size: 40px;
    text-align: center;
    line-height: 50px;
}
.scheduleThumb:empty::before {
    content: '\f61a';
    color: rgba(104, 195, 255, 0.5);
    font-family: 'Material Design Icons';
    font-size: 50px;
    text-align: center;
    line-height: 65px;
}

.deviceDetail,
.relatedInfoDetail {
    font-size: 15px;
    clear: both;
    padding: 10px 0;
    /* height: 184px; */
    height: 200px;
    background-color: #fafafa;
}

.deviceDetail > div,
.relatedInfoDetail > div {
    padding: 2px 0;
    line-height: 1.6;
}
.deviceStatus .deviceDetail,
.deviceStatus .relatedInfoDetail {
    background-color: transparent;
}
.deviceHeader {
    position: relative;
    height: 65px;
    padding-top: 5px !important;
    border-bottom: 1px solid #ccc;
}
.deviceHeader > div {
    vertical-align: middle;
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.deviceHeader > .deviceName {
    width: calc(100% - 100px);
    font-size: 20px;
    font-weight: 500;
    margin-top: 0px;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
}
/* [신아키 이관 누락 복구] 템플릿이 .deviceName 을 .deviceNameWrap 으로 감쌌는데(deviceHeader>deviceNameWrap>deviceName)
   CSS는 옛 셀렉터(.deviceHeader>.deviceName)만 있어 안 맞았음. gov 기준 wrap 규칙 추가 */
.deviceHeader > .deviceNameWrap {
    width: calc(100% - 100px);
    font-size: 20px;
    font-weight: 500;
    margin-top: 0px;
    max-height: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
}
.deviceHeader > .deviceNameWrap > div {
    overflow: hidden;
    text-overflow: ellipsis;
}
.deviceHeader > .deviceNameWrap > .deviceIdentifier {
    font-size: 14px;
    opacity: 0.6;
}

.deviceDetail .control-label {
    margin: 0;
}
.deviceDetail > div {
    float: unset;
}
.detailItem > div {
    vertical-align: top;
}
.detailItem.unlinked .info-data {
    color: #ff0000;
}
.detailItem.linked .linkedDeviceName:after {
    content: '|';
    opacity: 0.5;
    margin: 0 5px;
}
.deviceFooter {
    position: relative;
    border-top: 1px solid #ccc;
    font-size: 17px;
    height: 34px;
}
.deviceFooter i {
    display: inline-block;
    min-width: 24px;
    line-height: 24px;
    text-align: center;
}
.deviceFooter > div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px;
    border-right: 1px solid #ccc;
}
.deviceFooter .deviceType,
.deviceFooter .regdate {
    float: left;
}
.deviceFooter .regdate {
    font-size: 12px;
    border: 0;
    max-width: calc(100% - 70px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deviceFooter .modelInfo {
    float: right;
    border-left: 1px solid #ccc;
    border-right: 0 !important;
}
.deviceItem .deviceItemBox {
    border-top: 5px solid ;
}
/* .deviceItem {
    color: rgb(181, 188, 196);
}
.deviceItem.notAvailable,
.deviceItem.connected,
.deviceItem.disconnected {
    color: inherit;
} */
.deviceItem[device-type="aiDevice"] .deviceItemBox {
    border-color: #af5dde;
}
.deviceItem[device-type="iotDevice"] .deviceItemBox {
    border-color: #034498;
}
.deviceItem[device-type="localDevice"] .deviceItemBox {
    border-color: #00aaea;
}
.deviceItem[device-type="aiDevice"] .deviceType > i:before {
    content: '\F9D0';
    color: #af5dde;
}
.deviceItem[device-type="iotDevice"] .deviceType > i:before {
    content: '\FA5F';
    color: #034498;
}
.deviceItem[device-type="localDevice"] .deviceType > i:before {
    content: '\FC79';
    color: #00aaea;
}
.deviceItem.noRule .ruleName > .info-data {
    opacity: 0.4;
}
.deviceItem .modelInfo > i:before {
    content: '\f188';
}
.control-data {
    padding: 0 10px 0 5px;
}

.deviceItemBox > .content-tools {
    position: absolute;
    top: 12px;
    right: 5px;
}

.deviceItemBox > .content-tools.ofIoTRule {
    position: absolute;
    top: 21px;
    right: 45px;
}
.deviceItem[iot-device-rule="false"] > .deviceItemBox > .content-tools.ofIoTRule > a {
    color: #e2e2e2;
}
.deviceItem[iot-device-rule="true"] > .deviceItemBox > .content-tools.ofIoTRule > a {
    color: #00aaea;
}
.deviceItem > .deviceItemBox > .content-tools.ofIoTRule > a:hover {
    color: #fff;
}
.deviceItem[iot-device-rule="true"] > .deviceItemBox > .content-tools.ofIoTRule > a:before {
    background-color: #00aaea;
}
.deviceItem[iot-device-rule="false"] .content-tools.ofIoTRule .duplicateIoTRule {
    display: none;
    pointer-events: none;
}
.deviceItemBox > .content-tools a {
    background-color: transparent;
    color: #556d77;
}

.deviceItemBox > .content-tools a:hover {
    color: #fff;
}

.deviceItemBox > .content-tools > a:before {
    background-color: rgba(145, 160, 165, 0.7);
}

.unitContainer {
    background-color: #fff;
    padding: 10px;
    margin-top: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.unitListBox,
.tableContainer.unitListBox {
    position: relative;
    overflow: auto;
    min-height: auto !important;
    max-height: auto !important;
}
.unitSection .unitListBox {
    display: block;
    height: 100%;
    min-height: unset !important;
    max-height: calc(100% - 82px) !important;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    margin-top: 15px;
    overflow: auto;
}
.unitSection .unitListBox:empty {
    background-image: unset;
    overflow: hidden;
    background-position: top left;
    border: 0;
    text-align: center;
    background-position: center;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    -ms-border-radius:0;
    -o-border-radius:0;
}
.unitSection .unitListBox:empty:after {
    content: '';
    display: none;
}
.unitSection .unitListBox .unitList {
    margin-top: -1px;
}
.unitSection .unitName:hover {
    color: inherit;
    text-decoration: none;
    cursor: default;
}
.unitListBox .contentsLoading,
.serviceAlarmListBox .contentsLoading,
.timelineListBox .contentsLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -55px;
    margin-left: -28px;
    padding: 0;
}
.deviceList .contentsLoading,
.scheduleList .contentsLoading {
    margin-top: 15%;
}

.unitListBox .rowHead {
    display: none;
}
.modal .dashBox .unitList {
    padding: 0 0 10px;
    overflow: hidden;
}
.viewDeviceModal.modal .unitListHeader {
    /* position: relative; */
    background-color: #017cc5;
    padding: 15px;
    color: #fff;
    overflow: hidden;
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -ms-border-radius: 5px 5px 0 0;
    -o-border-radius: 5px 5px 0 0;
}
.viewDeviceModal.modal .unitListHeader.disconnected {
    background-color: #6b818d;
}
.viewDeviceModal.modal .unitListHeader .connectionIcon:before{
    color: #fff;
    content: '\f771';
    display: inline-block;
    width: 52px;
    height: 52px;
    line-height: 52px;
    margin: -15px;
    margin-right: 0px;
    text-align: center;
    font-family: 'Material Design Icons';
}
.viewDeviceModal.modal .unitListHeader.connected .connectionIcon:before{
    content: '\F339';
}
.viewDeviceModal.modal .unitListHeader.disconnected .connectionIcon:before{
    content: '\F33A';
}
.viewDeviceModal.modal .unitListHeader.notavailable .connectionIcon:before{
    content: '\0041/\004E';
    letter-spacing: -22px;
    text-indent: -5px;
}
.viewDeviceModal.modal .unitListHeader.loading .connectionIcon:before {
    animation: connectionloading 0.5s infinite linear;
    -webkit-animation: connectionloading 0.5s infinite linear;
}
@-webkit-keyframes connectionloading {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(359deg);
              transform: rotate(359deg);
    }
}
@keyframes connectionloading {
    0% {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(359deg);
              transform: rotate(359deg);
    }
}

.viewDeviceModal.modal .unitListHeader .refresh {
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    margin: -15px;
    cursor: pointer;
}
.viewDeviceModal.modal .unitListHeader .refresh:hover {
    background-color: rgba(0,0,0,0.2);
}
.viewDeviceModal.modal .unitListBox {
    position: relative;
    min-height: 323px !important;
    padding:10px;
    background-color: #fafafa;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
}
.statusContainer {
    overflow: hidden;
    min-height: 235px;
}
.statusContainer:nth-child(2) {
    border-left: 1px dotted #ccc;
}
.viewDeviceModal.modal .deviceThumb {
    width: 165px;
    height: 165px;
    margin: 15px 15px 15px 0;
    float: left;
}
.viewDeviceModal.modal .deviceThumb:empty:before {
    font-size: 100px;
    line-height: 165px;
}
.viewDeviceModal.modal .deviceDetail {
    float: left;
    width: calc(100% - 180px);
    clear: none;
    margin: 15px 0;
    padding: 0;
    height: auto;
}
.viewDeviceModal.modal .relatedInfoDetail {
    float: left;
    width: 100%;
    clear: none;
    margin: 15px 0;
    padding: 0;
    height: auto;
}
.viewDeviceModal .linkedDevice .blankItem,
.viewDeviceModal .relatedInfoDetail .blankItem {
    min-height: 165px;
    margin: 15px 0;
    background-color: rgba(0, 0, 0, 0.01);
    text-align: center;
    font-size: 17px;
    line-height: 2;
    border: 2px dotted rgb(231, 231, 231);
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
.viewDeviceModal .relatedInfoDetail .blankItem {
    margin: 0;
}
.viewDeviceModal .unitList {
    min-height: 303px;
}
.viewDeviceModal .unitList .blankItem i,
.viewDeviceModal .linkedDevice .blankItem i,
.viewDeviceModal .relatedInfoDetail .blankItem i {
    display: block;
    font-size: 100px;
    margin-top: 10px;
    line-height: 1;
    color: #e5e5e5;
}
.viewDeviceModal .unitList .blankItem  {
    text-align: center;
    font-size: 17px;
}
.modal .dashBox .unitItem {
    padding: 10px;
}
.modal .dashBox .unitItem > .unitContents {
    padding: 6px 10px;
    background-color: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-top: 4px solid #0075ef;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.modal .unitValueBox {
    text-align: right;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.modal .unitControlBox {
    margin-top: 5px;
    height: 30px;
    line-height: 30px;
    text-align: right;
}
.modal .unitControlBox i {
    vertical-align: inherit;
}
.modal .unitControlBox .controlTest i:hover {
    background-color: #006fe2;
}
.modal .dataRecive + .unitInfo + .unitValueBox,
.modal .dataSend + .unitInfo + .unitValueBox + .unitControlBox {
    color: rgba(118, 130, 142, 0.3);
}

.modal .updateTime {
    padding-left: 20px;
    font-size: 14px;
}
.modal .updateTime:before {
    content: '|';
    margin-left: -10px;
    margin-right: 10px;
    font-weight: 100;
}

.unitPaginationContainer {
    text-align: center;
    margin-top: 20px;
}

.contentInfoContentBox {
    /* height: 300px; */
    max-height: 600px;
    min-height: 300px;
    overflow: auto;
    background-color: #fafafa;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    /* border-bottom-right-radius: 60px 5px; */
}

/* .contentInfoContentBox.mCS_no_scrollbar {
    background-color: transparent;
    box-shadow: none;
} */

.contentInfoContentBox table {
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto;
}

.contentInfoContentBox img {
    max-width: 100% !important;
}

.contAttachFiles:empty {
    padding: 0 !important;
}

.contAttachFiles .attachItem {
    display: inline-block;
    background-color: rgba(235, 245, 255, 0.5);
    font-size: 14px;
}

.testLoading {
    position: relative;
    padding: 15px;
    background-color: #c6c7c7;
    color: #fff;
    text-shadow: 0 0 5px #191816;
    background-image: url(../images/UA_Title_BG.png);
    overflow: hidden;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
}

.testLoading h3 {
    position: relative;
    z-index: 2;
}

.testLoadingBar {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #63a8eb;
    background-image: url(../images/UA_Title_BG.png);
    z-index: 2;
}

.testing i {
    color: #2067d3;
}

.testing i.mdi-spin:before {
    margin-right: 5px;
}

.resultWindow textarea {
    width: 100%;
    min-height: 250px;
    resize: vertical;
    background-color: #52504a;
    color: #bec5ca;
    font-size: 18px;
    line-height: 1.6;
    padding: 10px 20px;
    border: 0;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
}

.resultWindow textarea:focus {
    outline: none;
}

.aiSelect {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: calc(100% - 110px);
    vertical-align: middle;
    border: 1px solid rgba(255,255,255,0);
    margin: -5px -10px;
    padding: 3px 8px;
    z-index: 11;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.aiSelect * {
    white-space: nowrap;
}
.deviceItem .aiSelect:hover {
    background-color: rgba(255,255,255,1);
    border: 1px solid #80bdff;
    box-shadow: 0 0 0 3px rgba(0,123,255,.25);
}
.deviceItem .aiSelect:after {
    content: "\EAC2";
    font-family: 'micon';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    color: #000;
    font-size: 10px;
    pointer-events: none;
}
.deviceItem .aiSelect.open {
    box-shadow: none;
    border: 0;
}
.aiSelect.open:after {
    display: none;
}
.selectedItem {
    overflow: hidden;
    text-overflow: ellipsis;
    margin: -5px -10px;
    padding: 5px 10px;
}
.aiSelect.open .selectedItem {
    display: none;
}
.aiSelect.open .aiListContainer {
    display: block;
    background-color: #fff;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.25);
}
.aiListContainer {
    position: absolute;
    display: none;
    bottom: -32px;
    left: 0;
    width: 100%;
    max-height: 179px;
    padding: 4px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.aiConfigItem {
    position: relative;
    padding: 5px 6px;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}
.newConfig,
.releaseConfig {
    background-color: rgba(0,0,0,0.05);
}
.releaseConfig {
    margin: 5px 0;
}
.newConfig:hover,
.releaseConfig:hover {
    background-color: #7a7a7a !important;
    color: #fff;
}
.aiConfigList .aiConfigItem.selected {
    background-color: rgba(51, 121, 183, 1) !important;
    color: #fff;
}
.aiConfigList .aiConfigItem.highlighted {
    background-color: rgba(51, 121, 183, 0.7);
    color: #fff;
}
.selectedItem .nonConfig {
    opacity: 0.4;
}
.aiSelect.open .nonConfig,
.aiSelect.open .placeholder {
    cursor: default;
}
.aiConfigItem.releaseConfig:before,
.aiConfigItem.newConfig:before,
.aiConfigItem:hover .removeConfig:before {
    font-family: "Material Design Icons";
    position: absolute;
    font-size: 24px;
    line-height: 1;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.aiConfigItem.newConfig:before  {
    content: "\F415";
    opacity: 1;
}
.aiConfigItem.releaseConfig:before  {
    content: "\F338";
    opacity: 1;
}
.aiConfigItem:hover .removeConfig:before {
    content: "\F1C0";
    opacity: 0.4;
}

.aiConfigItem:hover .removeConfig:hover:before {
    opacity: 1;
}
.aiConfigItem.selected .removeConfig {
    display: none;
}
.selectedItem span,
.aiConfigName {
    display: block;
    width: calc(100% - 30px);
    overflow: hidden;
    text-overflow: ellipsis;
}
/* connectivity end */

/* aiConfiguration */
.referenceFromDevices {
    height: 100%;
}
.dataSection {
    min-height: 342px;
}
.dataSection.full {
    position: fixed;
    display: inline-block;
    width: 100%;
    height: 100% !important;
    top: 0;
    left: 0;
    z-index: 1300;
    background-color: #fff;
    padding: 20px;
}
.dataSection .tableContainer:empty {
    min-height: unset;
    height: calc(100% - 70px);
    margin: 15px 0;
}
.dataSection .tableContainer {
    overflow: auto;
    height: calc(100% - 70px);
    margin: 15px 0;
}
.dataSection .tableContainer th, 
.dataSection .tableContainer td {
    line-height: 1.5;
    text-align: center;
}
.timelineList {
    position: relative;
}
.originalData th:first-child,
.learningData th:first-child {
    width: 150px;
}
.originalData th:first-child {
    cursor: default;
}
.originalData th,
.learningData th {
    cursor: cell;
}
.originalData td:nth-child(2),
.learningData th,
.learningData td {
    cursor: cell;
}
.originalData td:hover:before,
.learningData td:hover:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.01);
}
.dataSection .expand {
    position: relative;
    float: right;
    margin-left: 10px;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    border: 0;
    cursor: pointer;
    background: #1b5eb4;
    background: -moz-linear-gradient(left, #1b5eb4 0%, #0595e5 100%);
    background: -webkit-linear-gradient(left, #1b5eb4 0%,#0595e5 100%);
    background: linear-gradient(to right, #1b5eb4 0%,#0595e5 100%);
    -webkit-box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, 0.12);
    box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, 0.12);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.dataSection .expand:active,
.dataSection .expand:focus {
    -webkit-box-shadow: 0px 0px 0px 3px rgba(255,255,255,0.5) inset;
    box-shadow: 0px 0px 0px 3px rgba(255,255,255,0.5) inset;
}
.dataSection .expand:before {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '\F616';
    display: inline;
    font-family: "Material Design Icons";
    line-height: 1;
    vertical-align: middle;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.dataSection.full .expand:before {
    content: '\F615';
}
.keyValListHeader {
    margin: 0;
    padding: 5px 45px 5px 10px;
}
.keyValListHeader > div {
    padding: 0;
    font-weight: 500;
}
.keyValListHeader > div:before {
    content: "\f4fc";
    font-family: "Material Design Icons";
    color: #1b5eb4;
    margin-right: 5px;
}
.algorithmOptions .control-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.numberOfSplit {
    width: calc(100% - 120px);
    margin-right: 9px;
}
html[lang='en'] .numberOfSplit {
    width: calc(100% - 180px);
}
.learnResult {
	width: 180px;
	height: 180px;
	margin: 0 auto;
	text-align: center;
	border-radius: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.learnResult:nth-child(1) {
	background-color: #99c07d;
}
.learnResult:nth-child(2) {
	background-color: #8ab1da;
}
.learnResult:nth-child(3) {
	background-color: #5f758c;
}
.learnResult:nth-child(4) {
	background-color: #af6d7f;
}
.learnResult:nth-child(5) {
	background-color: #bda54f;
}
.learnResult:nth-child(6) {
	background-color: #9b66a9;
}
.learnResult:nth-child(7) {
	background-color: #ce6767;
}
.learnResult:nth-child(8) {
	background-color: #68c59f;
}
.learnResult:nth-child(9) {
	background-color: #9591d0;
}
.learnResult:nth-child(10) {
	background-color: #e0a65d;
}
.learnResult:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.learnResult_container {
	display: inline-block;
	vertical-align: middle;
	color: #fff;
}
.learnResult_container hr {
	margin-top: 10px;
    margin-bottom: 10px;
	opacity: 0.3;
}
.learnResult_count {
	font-size: 24px;
}
.learnResult_count:before {
	content: '# ';
}
.learnResult_Data {
	font-size: 36px;
	font-weight: 700;
}
.result_container {
	padding: 30px;
	border-bottom: 1px solid rgba(0,0,0,0.3);
	height: 750px;
	text-align: center;
	overflow: auto;
}
.f_measure_result {
    margin: 20px;
}
/* aiConfiguration end */

/* users */
.userTableContainer,
.userDeviceContainer,
.userChildContainer {
    /* max-height: 455px; */
    /* display: inline-block; */
    width: 100%;
    /* height: 455px; */
    overflow-x: auto;
    overflow-y: auto;
    /* border-bottom: 1px solid #111; */
}

.adminUserNum{
    width: 80px;
    text-align: center;
}

.adminDay,
.adminuUserName {
    width: 200px;
    text-align: center;
}

td.userID{
    margin-left: 15px;
}

/* .regDay, */
/* .regStatus, */
.inviteDate {
    width: 200px;
}
.inviteDate {
    display: none;
}

.inviteStasus {
    width: 100px;
    text-align: center;
}

.sort {
    width: 200px;
    text-align: center;
}

.joinStatus {
    width: 150px;
    text-align: center;
}

.approvalTool {
    width: 120px;
    text-align: center;
    height: 51px;
}

.listTool {
    width: 80px;
    text-align: center;
}

.approvalTool > i:after {
    font-family: 'Material Design Icons';
    content: '\f160';
}

.listTool > i:after {
    font-family: 'Material Design Icons';
    content: '\f48a';
}

.userList .userItem {
    cursor: pointer;
}

.userList .userItem td.userNum {
    padding-left: 10px;
}

.adminUserList .userItem td{
    padding: 10px 10px;
}

.adminUserList .userItem td.userNum {
    padding-left: 10px;
}

.adminMemberList .memberItem td{
    padding: 10px;
    line-height: 1.5;
    height: auto;
}
.adminMemberList .memberItem td a {
    font-weight: 500;
}
.adminUserList .userItem td a {
    font-weight: 500;
}
.unpaid .currentCharge,
.unpaid:hover .currentCharge,
.unpaid .paymentStatus a,
.unpaid .daysOverdue,
.unpaid:hover .daysOverdue,
.unpaid .serviceStatus a,
.unpaid .paymentFee,
.unpaid .paymentStatus,
.unpaid:hover .paymentFee,
.unpaid:hover .paymentStatus {
    color: red;
}
.memberItem td a {
    text-decoration: underline;
}
.userItem[invite-status="fail"] {
    background-color: #fff8f9;
}
.userItem[joine-status="fail"] .joinStatus {
    color: #e91717;
}
.userItem[join-status="fail"] {
    background-color: #fff8f9 !important;
}
.userItem:hover[join-status="fail"] {
    background-color: #fff5f6 !important;
}
.fixed-table .userItem[join-status="fail"]:nth-child(odd) td:first-child {
    background-color: #fff8f9 !important;
}
.fixed-table .userItem[join-status="fail"]:hover:nth-child(odd) td:first-child {
    background-color: #fff5f6 !important;
}
.fixed-table .userItem[join-status="fail"]:nth-child(even) td:first-child {
    background-color: #f7f0f1 !important;
}
.fixed-table .userItem[join-status="fail"]:hover:nth-child(even) td:first-child {
    background-color: #f7edee !important;
}

.userItem[join-status="fail"] .joinStatus {
    color: #e91717;
    font-weight: 500;
}
.userItem[join-status="standby"] {
    background-color: #eaecff !important;
}
.userItem:hover[join-status="standby"] {
    background-color: #e8eaff !important;
}
.userItem[join-status="standby"] .joinStatus {
    color: #6c5ce7;
    font-weight: 500;
}
.fixed-table .userItem[join-status="standby"]:nth-child(odd) td:first-child {
    background-color: #eaecff !important;
}
.fixed-table .userItem[join-status="standby"]:hover:nth-child(odd) td:first-child {
    background-color: #e8eaff !important;
}

.fixed-table .userItem[join-status="standby"]:nth-child(even) td:first-child {
    background-color: #e3e5f7 !important;
}
.fixed-table .userItem[join-status="standby"]:hover:nth-child(even) td:first-child {
    background-color: #e1e3f7 !important;
}

.userItem[join-status="success"] .joinStatus {
    color: #76828E;
    font-weight: 500;
}
.tableContainer .userNameCell {
    padding-left: 0 !important;
}
.userNameCell.rowHead {
    width: unset;
}
.userNameCell .checkbox {
    margin: 0;
    padding: 10px;
    cursor: default;
}
.userNameCell .checkbox * {
    cursor: default;
}
.userTableContainer .userName {
    margin-left: 10px;
}
.users-download a{
    font-size: 15px;
    font-weight: 300;
    line-height: 2.4;
    vertical-align: middle;
}
.users-download a:hover{
    font-weight: 500;
}

.tokenfield .token-input {
    min-width: 120px !important;
    max-width: 100% !important;
}
.tokenfield .token-input:last-child {
    margin-bottom: 0;
}
.tokenfield.form-control {
    padding: 8px 10px;
}
.tokenfield.form-control.focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 5px rgba(0,123,255,.25);
}
.tokenfield .token-input::-moz-placeholder {
    color: #999;
    opacity: 1;
}
.tokenfield .token-input:-ms-input-placeholder {
    color: #999;
}
.tokenfield .token-input::-webkit-input-placeholder {
    color: #999;
}
.tokenfield .token.active {
    background-color: #52a8ec;
    color: #fff;
    border-color: #52a8ec;
    border-color: rgba(82, 168, 236, 0.8);
}
.tokenfield .token.active .close {
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,0.1);
    opacity: 1;
}
.childMembers,
.usingDevices {
    text-align: center;
}
.addUserItem {
    position: relative;
    padding: 15px 0;
    background-color: #f9fafa;
    border: 1px solid #d2d7d8;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.removeUserListItem,
.addUserListItem {
    cursor: pointer;
}
.removeUserListItem {
    position: absolute;
    display: none;
    top: 0;
    right: 2px;
}
.addUserItem:hover .removeUserListItem {
    display: block;
}
.removeUserListItem:hover {
    color: #e31607;
}
.addUserListItem:hover {
    color: #0595e5;
}
/* users end */

/* groups */
.authorityGroupListBox {
    background-color: #f1f4f5;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: auto;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) inset;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.authorityGroupList {
    padding: 10px;
    list-style: none;
    margin: 0;
}
.authorityGroupListBox .mCSB_container,
.authorityGroupListBox .mCustomScrollBox {
    width: 100% !important;
}
.authorityGroupItem {
    position: relative;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 15px;
    margin-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.authorityGroupItem:hover,
.authorityGroupItem.active {
    background-color: #fff;
}
.authorityGroupItem:hover .authorityGroupNameContainer:after,
.authorityGroupItem.active .authorityGroupNameContainer:after {
    content: '\F142';
    position: absolute;
    right: 10px;
    top: 50%;
    font-family: 'Material Design Icons';
    font-size: 24px;
    vertical-align: middle;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.authorityGroupItem:hover .authorityGroupNameContainer:after {
    color: #c5d0dd;
    opacity: 0.5;
}
.authorityGroupItem.active .authorityGroupNameContainer:after {
    color: #1b5eb4;
}
.authorityGroupNameContainer {
    display: block;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    margin-top: 0px;
    float: none;
}
.authorityGroupNameContainer > i {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 26px;
    background-color: #c5d0dd;
    color: #fff;
    text-align: center;
    vertical-align: middle;
    margin-right: 10px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.authorityGroupItem.active .authorityGroupNameContainer > i {
    background-color: #1b5eb4;
}
.authorityGroupItem.defaultGroup .authorityGroupNameContainer > i:after {
    content: '\F355';
    font-family: 'Material Design Icons';
    position: absolute;
    top: -5px;
    right: -10px;
    width: 25px;
    height: 25px;
    line-height: 27.5px;
    font-size: 14px;
    text-align: center;
    background-color: #e8e8e8;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.authorityGroupItem.active.defaultGroup .authorityGroupNameContainer > i:after {
    background-color: #ffb317;
}
.authorityGroupName {
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 85px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.authorityGroupInfoBox {
    display: flex;
    flex-direction: column;
}
.authorityGroupInfoBox .authorityGroupInfoContainer {
    flex: 1 1 auto;
}
.authorityGroupSaveWrapper {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: right;
}
/* groups end */

/* rules */

.rule_list {
    padding: 0px 15px;
}

.rule_list > li {
    cursor: pointer;
    margin: 20px 0;
}

.ruleItem:before {
    content: '';
    position: absolute;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    top: 50%;
    bottom: -14px;
    left: 30px;
    right: 30px;
    margin: 20px 0;
    border-radius: 100px / 10px;
    cursor: pointer;
}

.rule_box {
    position: relative;
    width: 100%;
    height: 330px;
    text-align: center;
    background-color: #e9ebec;
    background-image: url('../images/blockly_bg.png');
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 5px rgba(21, 35, 48, 0.2);
    box-shadow: 0 2px 5px rgba(21, 35, 48, 0.2);
    overflow: hidden;
}

.ruleItem .content-tools {
    position: absolute;
    top: 10px;
    right: 20px;
    height: 40px;
    z-index: 5;
}

.rule_modify,
.rule_remove {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 21px;
    text-align: center;
    border: 2px solid #fff;
    border-radius: 50%;
    box-sizing: content-box;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
}

.rule_modify:hover,
.rule_remove:hover {
    background-color: #63A8EB;
}

.rule_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.rule_icon {
    position: relative;
    margin-top: 60px;
    height: 120px;
}
.rule_list .beforeIcon {
    height: 200px;
}
.rule_list .beforeIcon:before,
.rule_list .beforeIcon:after,
.rule_icon:before,
.rule_icon:after {
    position: absolute;
    white-space: pre;
    font-family: 'consolas', 'Inconsolata';
    line-height: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.rule_list .placeholderListIcon .beforeIcon:before,
.rule_list .blankListIcon .beforeIcon:before,
.rule_icon:before {
    content: '{   }';
    font-size: 100px;
    letter-spacing: -5px;
}
.rule_list .placeholderListIcon .beforeIcon:after,
.rule_list .blankListIcon .beforeIcon:after,
.rule_icon:after {
    content: 'if\A else';
    font-size: 60px;
    font-weight: 700;
    color: rgba(27, 94, 180, 0.5);
}
.rule_list .placeholderListIcon:hover .beforeIcon:before {
    font-family: 'Material Design Icons';
    content: '\f417' !important;
    font-size: 200px;
}
.rule_list .placeholderListIcon:hover .beforeIcon:after {
    display: none;
}
.rule_list .placeholderListIcon:hover .afterIcon {
    top: 220px;
}
.rule_list .placeholderListIcon,
.rule_list .blankListIcon {
    position: relative;
    text-align: center;
    line-height: 0px;
}
.rule_info {
    position: absolute;
    display: inline-block;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 15px;
    text-align: left;
    background-color: #fbfbfb;
    border-top: 1px solid #d3d2d2;
    overflow: hidden;
}
.rule_info > div {
    padding: 5px 0;
    white-space: nowrap;
}
.rule_info label {
    width: 110px;
    margin: 0;
}
.rule_info .devices {
    padding: 0 5px;
    margin-left: 5px;
    background-color: #678dff;
    color: #fff;
    font-weight: 500;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.rule_title {
    position: absolute;
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fbfbfb;
    padding: 15px 50px 15px 15px;
    border-bottom: 1px solid #d3d2d2;
    font-size: 20px;
    font-weight: 500;
    color: inherit;
    text-align: left;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rule_title:before {
    content: '\F295';
    font-family: "Material Design Icons";
    color: #1b5eb4;
}

.rule_thumb {
    background-color: #e3e7e8;
    background-image: url('../images/blockly_bg.png');
}

.rule_thumb .rule_icon {
    margin: 25px auto;
}

.deviceRule .ruleTarget .info-data {
    max-width: calc(100% - 160px);
}
/* rules end */

/* rule */

.content.blokly {
    position: fixed;
    margin: 0;
    padding: 0;
    width: 100%;
    height: calc(100% - 125px);
}

.mini-nav .content.blokly {
    margin: 0 0 0 66px;
    padding: 0;
    width: calc(100% - 66px);
}

.bottom_bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #ccc;
    padding: 0 20px;
    text-align: center;
    line-height: 67px;
    /* background-color: #ECEFF1; */
    background-color: #FFF;
    z-index: 71;
}

#blocklyArea {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.blocklyTitle,
.codeTitle {
    display: inline-block;
    /* float: left; */
    height: 40px;
    padding: 0 10px;
    background-image: url(../images/UA_title_BG.png);
}

.blocklyTitle {
    background-color: #63a8eb;
}

.codeTitle {
    background-color: #4281bd;
}

.blocklyTitle h3,
.codeTitle h3 {
    color: #fff;
    margin: 0;
    line-height: 40px;
}

.blocklyTitle {
    width: 100%;
}

.blocklyBox {
    display: inline-block;
    height: 100%;
    /* float: left; */
}

.codeTitle,
.codeBox,
.codeBox_modal {
    position: absolute;
    width: 800px;
    right: -800px;
    top: 0;
    z-index: 1000;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#blocklyArea.in .codeBox,
#blocklyArea.in .codeBox_modal {
    right: 0px;
}

.CodeMirror {
    margin: 0;
    height: 100%;
}

.codeBox {
    display: inline-block;
    height: calc(100% - 66px);
}

.codeBox_modal {
    display: inline-block;
    height: 100%;
}

.codeBox.expended,
.codeBox_modal.expended {
    position: absolute;
    width: 100%;
    z-index: 9999;
}

.codeBox .codeTool {
    height: 40px;
    background-color: #63a8eb;
    background-image: url(../images/UA_title_BG.png);
    color: #fff;
}

.codeBox .codemirror {
    height: calc(100% - 40px);
}

.codeBox_modal .codemirror {
    height: 100%;
}

.codeToolHead {
    line-height: 40px;
    padding: 0 15px;
    color: #fff;
}

.codeExpend {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    float: right;
    color: #fff;
}

.codeExpend:before {
    content: "\F616";
    font-family: "Material Design Icons"
}

.expended .codeExpend:before {
    content: "\F615";
}

.codeExpend:hover {
    background-color: rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

.cm-s-zenburn .CodeMirror-activeline {
    background-color: rgba(0, 0, 0, 0.1);
}

.cm-s-zenburn .CodeMirror-activeline-background {
    background-color: rgba(0, 0, 0, 0.1);
}

.blocklyToolboxDiv {
    /* width: 250px; */
    /* background-color: rgba(255,255,255,1); */
    background-color: #cbd3dd;
    background-image: url(../images/white_4px_45deg_bg.png);
    border-right: 1px solid #b1b5b9;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    /*overflow: hidden;*/
    /* padding:12px 15px; */
    padding: 12px 0px 12px 25px;
    /* color: #fff; */
    -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3) inset;
}

/* .blocklyTreeRow:not(.blocklyTreeSelected):hover {
  background-color: rgba(0,0,0,0.3);
} */

.blocklyFlyoutBackground {
    /* fill: rgba(205, 205, 207, 0.9); */
    fill: rgba(203, 211, 221, 0.9);
    fill-opacity: 0.7;
}

.blocklyFlyout {
    border-right: 1px solid #cbcbcb;
}

.blocklyTreeRow {
    height: 50px;
    line-height: 50px;
    margin-bottom: 7px;
    padding-left: 6px !important;
    padding-right: 20px;
    border-radius: 0 0 0 8px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.3);
}

.blocklyTreeRow:not(.blocklyTreeSelected):hover {
    background-color: rgba(255, 255, 255, 0.7);
}

.blocklyTreeRow > * {
    cursor: pointer;
}

.blocklyTreeIcon {
    display: none !important;
}

.blocklyText,
.blocklyTreeLabel,
.blocklySvg text,
.blocklyBlockDragSurface text {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, 'Noto Sans KR', sans-serif;
}

.blocklyTreeLabel {
    font-weight: 500;
    color: #3d484e;
}

.blocklySvg {
    background-image: url(../images/blockly_bg.png), url(../images/body_bg.png);
}

.blocklyHtmlInput {
    text-align: center;
}

.rulePlayer {
    position: absolute;
    top: 35px;
    right: 35px;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    text-align: center;
    line-height: 80px;
    font-size: 50px;
    color: #fff;
    z-index: 999;
    cursor: pointer;
}

.rulePlayer.pause {
    background-color: #1b5eb4;
}

.rulePlayer.play {
    background-color: #fe9a1f;
}

.ruleInterval {
    display: inline-block;
    border: 2px solid #63A8EB;
    padding: 8px 13px;
    margin: 0 5px;
    border-radius: 50px;
    vertical-align: middle;
    white-space: nowrap;
}

.ruleInterval span {
    margin-right: 5px;
    color: #63A8EB;
}

.ruleInterval select {
    border: 0;
    /* border-bottom: 1px solid #63A8EB; */
}

.ruleInterval select:focus {
    outline: none;
}

/* rule end */

/* timeline */

.timelineContainer {
    position: relative;
}

.timelineBox .timelineContainer {
    margin-top: -30px;
    margin-bottom: 20px;
}

.timelineOption.content-box {
    padding-bottom: 5px;
    overflow: visible;
}
/*
.content-box .col-lg-2 {
    padding-right: 7px;
    padding-left: 0;
}

.content-box .col-lg-2:first-child{
    padding-left: 15px;
}
*/
.timelineBox .timelineContainer:before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 10px;
    top: 0;
    z-index: 1;
    background: rgba(240,243,244,0);
    background: -moz-linear-gradient(top, rgba(240,243,244,1) 0%, rgba(240,243,244,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(240,243,244,1)), color-stop(100%, rgba(240,243,244,0)));
    background: -webkit-linear-gradient(top, rgba(240,243,244,1) 0%, rgba(240,243,244,0) 100%);
    background: -o-linear-gradient(top, rgba(240,243,244,1) 0%, rgba(240,243,244,0) 100%);
    background: -ms-linear-gradient(top, rgba(240,243,244,1) 0%, rgba(240,243,244,0) 100%);
    background: linear-gradient(to bottom, rgba(240,243,244,1) 0%, rgba(240,243,244,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f3f4', endColorstr='#f0f3f4', GradientType=0 );
}
.timelineBox .timelineContainer:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    bottom: 0;
    z-index: 1;
    background: rgba(240,243,244,0);
    background: -moz-linear-gradient(top, rgba(240,243,244,0) 0%, rgba(240,243,244,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(240,243,244,0)), color-stop(100%, rgba(240,243,244,1)));
    background: -webkit-linear-gradient(top, rgba(240,243,244,0) 0%, rgba(240,243,244,1) 100%);
    background: -o-linear-gradient(top, rgba(240,243,244,0) 0%, rgba(240,243,244,1) 100%);
    background: -ms-linear-gradient(top, rgba(240,243,244,0) 0%, rgba(240,243,244,1) 100%);
    background: linear-gradient(to bottom, rgba(240,243,244,0) 0%, rgba(240,243,244,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f3f4', endColorstr='#f0f3f4', GradientType=0 );
}
.deviceStatusContainer,
.serviceAlarmListBox,
.timelineListBox {
    position: relative;
    height: 100%;
    overflow: auto;
    background-color: #f2f4f5;
    /* background-color: #e2e8ea; */
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.serviceAlarmList,
.timelineList {
    position: relative;
    height: 100%;
    padding: 0 30px;
}
.serviceAlarmItem.firstItem,
.timelineItem.firstItem {
    background-color: #f2f4f5;
    padding-bottom: 20px;
    margin-bottom: -60px;
}
.serviceAlarmList .blankItem p i,
.timelineList .blankItem p i {
    color: #1b5eb4;
}
.nomoreServiceAlarm,
.nomoreTimeline {
    text-align: center;
    margin-left: 10%;
    margin-bottom: 30px;
}
.loadingServiceAlarm,
.loadingTileline {
    display: none;
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    z-index: 2;
}
.serviceAlarmItemBody {
    overflow: hidden;
}
.serviceAlarmItemBody > * {
    clear: both;
}
.serviceAlarmItemBody .alarmLinks {
    padding-top: 10px;
}
.serviceAlarmItemBody .alarmInfoLabel::before {
    color: #fff;
}
.dashBox .cbp_tmtimeline > li .cbp_tmlabel a.alarmLinkBtn {
    color: #1b5eb4;
}
.dashBox .cbp_tmtimeline > li .cbp_tmlabel a.alarmLinkBtn:hover {
    color: #fff;
}
.stage {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
    margin: 0 -5%;
    overflow: hidden;
}

.dot-pulse {
    position: relative;
    left: -9999px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #63A8EB;
    color: #63A8EB;
    box-shadow: 9999px 0 0 -5px #63A8EB;
    animation: dotPulse 1s infinite linear;
    -webkit-animation: dotPulse 1s infinite linear;
    animation-delay: .2s;
}

.dot-pulse::before, .dot-pulse::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #63A8EB;
    color: #63A8EB;
}

.dot-pulse::before {
    box-shadow: 9984px 0 0 -5px #63A8EB;
    animation: dotPulseBefore 1s infinite linear;
    -webkit-animation: dotPulseBefore 1s infinite linear;
    animation-delay: 0s;
}

.dot-pulse::after {
    box-shadow: 10014px 0 0 -5px #63A8EB;
    animation: dotPulseAfter 1s infinite linear;
    -webkit-animation: dotPulseAfter 1s infinite linear;
    animation-delay: .4s;
}
@keyframes dotPulseBefore {
    0% {
        box-shadow: 9984px 0 0 -5px #63A8EB;
    }
    30% {
        box-shadow: 9984px 0 0 2px #63A8EB;
    }
    60%,
    100% {
        box-shadow: 9984px 0 0 -5px #63A8EB;
    }
}
@keyframes dotPulse {
    0% {
        box-shadow: 9999px 0 0 -5px #63A8EB;
    }
    30% {
        box-shadow: 9999px 0 0 2px #63A8EB;
    }
    60%,
    100% {
        box-shadow: 9999px 0 0 -5px #63A8EB;
    }
}
@keyframes dotPulseAfter {
    0% {
        box-shadow: 10014px 0 0 -5px #63A8EB;
    }
    30% {
        box-shadow: 10014px 0 0 2px #63A8EB;
    }
    60%,
    100% {
        box-shadow: 10014px 0 0 -5px #63A8EB;
    }
}

.cbp_tmtimeline:before {
    background-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1) inset;
}

.blankList.cbp_tmtimeline:before {
    display: none;
}

.cbp_tmtimeline li {
    position: relative;
}

.cbp_tmtimeline > li .cbp_tmlabel h2 {
    font-size: 1.3em;
    margin-bottom: 0.714em;
    line-height: 1.3;
    word-break: keep-all;
}
/* .dashBox .cbp_tmtimeline > li .cbp_tmlabel h2 {
    padding-right: 6.5em;
} */
.cbp_tmtimeline > li .cbp_tmtime {
    padding-right: 150px;
    min-width: 80px;
}
.cbp_tmtimeline > li .cbp_tmtime span {
    white-space: nowrap;
}
.cbp_tmtimeline > li .cbp_tmtime span:first-child {
    font-size: 14px;
    color: #a7b6be;
}
/* info */

.cbp_tmtimeline > li.info .cbp_tmtime span:last-child {
    color: #63A8EB;
}

.cbp_tmtimeline > li.info:nth-child(even) .cbp_tmicon,
.cbp_tmtimeline > li.info:nth-child(even) .cbp_tmlabel {
    background: #368fe5;
}
.cbp_tmtimeline > li .cbp_tmlabel:after {
    border-width: 8px;
    top: 0px;
}
.cbp_tmtimeline > li.info:nth-child(even) .cbp_tmtime span:last-child {
    color: #368fe5;
}
.cbp_tmtimeline > li.info:nth-child(even) .cbp_tmlabel {
    background: #368fe5;
}
.cbp_tmtimeline > li.info:nth-child(even) .cbp_tmlabel:after {
    border-top-color: #368fe5;
    border-right-color: #368fe5;
}
.cbp_tmtimeline > li.info:nth-child(even) .cbp_tmtime span:last-child {
    color: #368fe5;
}

.cbp_tmtimeline > li.info:nth-child(odd) .cbp_tmicon,
.cbp_tmtimeline > li.info:nth-child(odd) .cbp_tmlabel {
    background: #63A8EB;
}
.cbp_tmtimeline > li.info:nth-child(odd) .cbp_tmtime span:last-child {
    color: #63A8EB;
}
.cbp_tmtimeline > li.info:nth-child(odd) .cbp_tmlabel {
    background: #63A8EB;
}
.cbp_tmtimeline > li.info:nth-child(odd) .cbp_tmlabel:after {
    border-top-color: #63A8EB;
    border-right-color: #63A8EB;
}
.cbp_tmtimeline > li.info:nth-child(odd) .cbp_tmtime span:last-child {
    color: #63A8EB;
}
/*  */
/* danger */
.cbp_tmtimeline > li.danger .cbp_tmicon {
    -webkit-box-shadow: 0 0 0 8px #ffa6a6;
    box-shadow: 0 0 0 8px #ffa6a6;
}
.cbp_tmtimeline > li.danger .cbp_tmtime span:last-child {
    color: #eb6363;
}

.cbp_tmtimeline > li.danger:nth-child(even) .cbp_tmicon,
.cbp_tmtimeline > li.danger:nth-child(even) .cbp_tmlabel {
    background: #f04949;
}

.cbp_tmtimeline > li.danger:nth-child(even) .cbp_tmtime span:last-child {
    color: #f04949;
}
.cbp_tmtimeline > li.danger:nth-child(even) .cbp_tmlabel {
    background: #f04949;
}
.cbp_tmtimeline > li.danger:nth-child(even) .cbp_tmlabel:after {
    border-top-color: #f04949;
    border-right-color: #f04949;
}
.cbp_tmtimeline > li.danger:nth-child(even) .cbp_tmtime span:last-child {
    color: #f04949;
}

.cbp_tmtimeline > li.danger:nth-child(odd) .cbp_tmicon,
.cbp_tmtimeline > li.danger:nth-child(odd) .cbp_tmlabel {
    background: #eb6363;
}
.cbp_tmtimeline > li.danger:nth-child(odd) .cbp_tmtime span:last-child {
    color: #eb6363;
}
.cbp_tmtimeline > li.danger:nth-child(odd) .cbp_tmlabel {
    background: #eb6363;
}
.cbp_tmtimeline > li.danger:nth-child(odd) .cbp_tmlabel:after {
    border-top-color: #eb6363;
    border-right-color: #eb6363;
}
.cbp_tmtimeline > li.danger:nth-child(odd) .cbp_tmtime span:last-child {
    color: #eb6363;
}
/*  */
/* error */
.cbp_tmtimeline > li.errors .cbp_tmicon {
    -webkit-box-shadow: 0 0 0 8px #ffa6a6;
    box-shadow: 0 0 0 8px #ffa6a6;
}
.cbp_tmtimeline > li.errors .cbp_tmtime span:last-child {
    color: #eb6363;
}

.cbp_tmtimeline > li.errors:nth-child(even) .cbp_tmicon,
.cbp_tmtimeline > li.errors:nth-child(even) .cbp_tmlabel {
    background: #f04949;
}

.cbp_tmtimeline > li.errors:nth-child(even) .cbp_tmtime span:last-child {
    color: #f04949;
}
.cbp_tmtimeline > li.errors:nth-child(even) .cbp_tmlabel {
    background: #f04949;
}
.cbp_tmtimeline > li.errors:nth-child(even) .cbp_tmlabel:after {
    border-top-color: #f04949;
    border-right-color: #f04949;
}
.cbp_tmtimeline > li.errors:nth-child(even) .cbp_tmtime span:last-child {
    color: #f04949;
}

.cbp_tmtimeline > li.errors:nth-child(odd) .cbp_tmicon,
.cbp_tmtimeline > li.errors:nth-child(odd) .cbp_tmlabel {
    background: #eb6363;
}
.cbp_tmtimeline > li.errors:nth-child(odd) .cbp_tmtime span:last-child {
    color: #eb6363;
}
.cbp_tmtimeline > li.errors:nth-child(odd) .cbp_tmlabel {
    background: #eb6363;
}
.cbp_tmtimeline > li.errors:nth-child(odd) .cbp_tmlabel:after {
    border-top-color: #eb6363;
    border-right-color: #eb6363;
}
.cbp_tmtimeline > li.errors:nth-child(odd) .cbp_tmtime span:last-child {
    color: #eb6363;
}
/*  */
/* warning */
.cbp_tmtimeline > li.warning .cbp_tmicon {
    -webkit-box-shadow: 0 0 0 8px #ffc67c;
    box-shadow: 0 0 0 8px #ffc67c;
}

.cbp_tmtimeline > li.warning:nth-child(even) .cbp_tmicon,
.cbp_tmtimeline > li.warning:nth-child(even) .cbp_tmlabel {
    background: #f57c2c;
}

.cbp_tmtimeline > li.warning:nth-child(even) .cbp_tmtime span:last-child {
    color: #f57c2c;
}
.cbp_tmtimeline > li.warning:nth-child(even) .cbp_tmlabel {
    background: #f57c2c;
}
.cbp_tmtimeline > li.warning:nth-child(even) .cbp_tmlabel:after {
    border-top-color: #f57c2c;
    border-right-color: #f57c2c;
}
.cbp_tmtimeline > li.warning:nth-child(even) .cbp_tmtime span:last-child {
    color: #f57c2c;
}

.cbp_tmtimeline > li.warning:nth-child(odd) .cbp_tmicon,
.cbp_tmtimeline > li.warning:nth-child(odd) .cbp_tmlabel {
    background: #f5972c;
}

.cbp_tmtimeline > li.warning:nth-child(odd) .cbp_tmtime span:last-child {
    color: #f5972c;
}
.cbp_tmtimeline > li.warning:nth-child(odd) .cbp_tmlabel {
    background: #f5972c;
}
.cbp_tmtimeline > li.warning:nth-child(odd) .cbp_tmlabel:after {
    border-top-color: #f5972c;
    border-right-color: #f5972c;
}
.cbp_tmtimeline > li.warning:nth-child(odd) .cbp_tmtime span:last-child {
    color: #f5972c;
}

/* .cbp_tmtimeline > li.cloudOut .cbp_tmicon,
.cbp_tmtimeline > li.cloudOut .cbp_tmlabel {
    background: #8c9fb1;
}

.cbp_tmtimeline > li.cloudOut .cbp_tmicon {
    -webkit-box-shadow: 0 0 0 8px #d5dde4;
    box-shadow: 0 0 0 8px #d5dde4;
}

.cbp_tmtimeline > li.cloudOut .cbp_tmtime span {
    color: #8c9fb1;
}

.cbp_tmtimeline > li.cloudOut .cbp_tmlabel:after {
    border-right-color: #8c9fb1;
}

.cbp_tmtimeline > li.cloudOut:nth-child(odd) .cbp_tmlabel {
    background: #99aec2;
}

.cbp_tmtimeline > li.cloudOut:nth-child(odd) .cbp_tmlabel:after {
    border-right-color: #99aec2;
}

.cbp_tmtimeline > li.cloudOut:nth-child(odd) .cbp_tmtime span:last-child {
    color: #99aec2;
} */

.cbp_tmtimeline > li .cbp_tmtime span:last-child {
    font-size: 1.8em;
    line-height: 1;
    padding-bottom: 10px;
}
.dashBox .cbp_tmtimeline > li .cbp_tmtime span:last-child {
    font-size: 1.5em;
}

.cbp_tmtimeline > li .cbp_tmicon {
    font-family: 'Material Design Icons';
}
.cbp_tmtimeline > li.danger .cbp_tmicon:before,
.cbp_tmtimeline > li.errors .cbp_tmicon:before {
    content: '\f6bc';
}

.cbp_tmtimeline > li.warning .cbp_tmicon:before {
    content: '\f026';
}

.cbp_tmtimeline > li.info .cbp_tmicon:before {
    content: '\f64e';
}
/*
.cbp_tmtimeline > li.cloudIn .cbp_tmicon:before {
    content: '\fb5a';
}

.cbp_tmtimeline > li.success .cbp_tmicon:before {
    content: '\f12c';
}

.cbp_tmtimeline > li.cloudOut .cbp_tmicon:before {
    content: '\f164';
}

.cbp_tmtimeline > li.userControl .cbp_tmicon:before {
    content: '\fb2f';
}

.cbp_tmtimeline > li.ruleControl .cbp_tmicon:before {
    content: '\f295';
} */

.cbp_tmtimeline {
    margin-top: 30px;
    padding-bottom: 60px;
}
.cbp_tmtimeline:before {
    left: calc(20% + 17.5px);
    margin-top: 45px;
}
.cbp_tmtimeline > li .cbp_tmlabel {
    padding: 1em;
    font-size: 1.071em;
    border-radius: 0 8px 8px;
    -webkit-border-radius: 0 8px 8px;
    -moz-border-radius: 0 8px 8px;
    -ms-border-radius: 0 8px 8px;
    -o-border-radius: 0 8px 8px;
}
.dashBox .cbp_tmtimeline > li .cbp_tmlabel {
    padding: 1em 1em 2em;
}
.dashBox .cbp_tmtimeline > li.serviceAlarmItem .cbp_tmlabel {
    padding: 1em;
}
.timelineDevice .timelineDeviceItem.selected {
    background-color: #fff;
}
.timelineDevice .timelineDeviceItem:after{
    position: absolute;
    content: '';
    right: 10px;
    top: 10px;
    bottom: unset;
    width: 22px;
    height: 22px;
    background-color: rgba(0,0,0,0.3);
    border: 2px solid rgba(255,255,255,0.9);
    font-family: 'Material Design Icons';
    font-size: 18px;
    color: #fff;
    line-height: 1;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.timelineDevice .timelineDeviceItem.selected:after {
    content: '\f12c';
    background-color: rgba(255,255,255,0.9);
    color: #1E88E5;
}
.releaseServiceAlarm {
    position: absolute;
    top: 0.5em;
    right: 1em;
    cursor: pointer;
}
.goToDetail {
    position: absolute;
    bottom: 0.5em;
    right: 1em;
}
.timelineMsgList {
    display: table;
    width: 100%;
}
.timelineMsgItem {
    display: table-row;
}
.serviceAlarmItemBody > * > *,
.timelineMsgItem > * {
    display: table-cell;
    padding: 3px 0;
}
.serviceAlarmItemBody .alarmInfoLabel,
.timelineMsgList .timelineLabel {
    width: 9.286em;
    font-weight: 500;
}
.serviceAlarmItemBody .alarmInfoContent {
    width: calc(100% - 9.286em); 
}
.timelineMsgList .timelineLabel:before {
    font-family: 'Material Design Icons';
    margin-right: 5px;
}
.deviceInfoItem .timelineLabel:before {
    content: '\F696';
}
.unitInfoItem .timelineLabel:before {
    content: '\F61A';
}
.controlInfoItem .timelineLabel:before {
    content: '\FD3C';
}
.userInfoItem .timelineLabel:before {
    content: '\FB35';
}
.clientInfoItem .timelineLabel:before {
    content: '\FFD0';
}
.ruleInfoItem .timelineLabel:before {
    content: '\F295';
}
/* timeline end */

/* dataView */
.dataOptions {
    display: none;
}
.optionContainer {
    min-height: 560px;
}
.optionContainer .dataSetContainer {
    height: calc(100vh - 683px);
    min-height: 190px;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, .05);
    overflow: auto;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: height 0.2s ease-in-out;
    -webkit-transition: height 0.2s ease-in-out;
    -moz-transition: height 0.2s ease-in-out;
    -ms-transition: height 0.2s ease-in-out;
    -o-transition: height 0.2s ease-in-out;
}
.optionContainer .dataSetContainer.rawDataSet {
    height: calc(100vh - 587px);
    /* min-height: 286px; */
    transition: height 0.2s ease-in-out;
    -webkit-transition: height 0.2s ease-in-out;
    -moz-transition: height 0.2s ease-in-out;
    -ms-transition: height 0.2s ease-in-out;
    -o-transition: height 0.2s ease-in-out;
}
.optionContainer.singleDevice .dataSetContainer {
    height: calc(100vh - 683px - 48px);
}
.optionContainer.singleDevice .dataSetContainer.rawDataSet {
    height: calc(100vh - 587px - 48px);
}
.optionContainer .dataSetList > .blankItem {
    background-color: rgba(255,255,255,0.1) !important;
    border: 1px dashed rgba(0, 0, 0, .1) !important;
    margin: 5px;
}
.optionContainer .dataSetItem {
    position: relative;
    color: #76828E;
    background-color: #fff;
    margin: 5px;
    padding: 5px;
    border: 1px solid #ebebeb;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}
.optionContainer .dataSetItem:after {
    content: '';
    display: block;
    clear: both;
}
.optionContainer .chartColor {
	width: 38px;
	height: 38px;
	float: left;
}
.optionContainer .colorpicker-element .input-group-addon i,
.optionContainer .colorpicker-element .add-on i {
	width: 38px;
	height: 38px;
	border: 5px solid #ebebeb;
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-ms-border-radius: 100%;
	-o-border-radius: 100%;
}
.optionContainer .colorpicker-element input {
	display: none;
}
.optionContainer .input-group-addon.colorChip {
	padding: 0;
	background-color: transparent;
	box-shadow: none;
}
.optionContainer .colorpicker {
	z-index: 9999;
}
.optionContainer .deviceName {
    line-height: 38px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: move;
}
.optionContainer .deviceName:before {
    font-family: 'Material Design Icons';
    content: '\F54F';
    margin-right: 5px;
}
.optionContainer .dataSetItem .deviceName {
    padding-left: 5px;
    user-select: none;
}
.optionContainer .dataSetItem .unitSelect {
    padding-right: 5px;
}
.optionContainer .dataSetItem .chartColor,
.optionContainer .dataSetItem .deviceName,
.optionContainer .dataSetItem .unitSelect,
.optionContainer .dataSetItem .chartSelect {
    float: left;
}
.optionContainer .dataSetItem .removeDataSetBox {
    position: absolute;
    top: 5px;
    right: 5px;
}
.optionContainer .dataSetItem .deviceName {
    width: calc(100% - 38px);
}
.optionContainer .dataSetItem .unitSelect {
    width: calc(100% - 162px);
}
.optionContainer .dataSetItem .chosen-drop {
    width: max-content;
    min-width: 100%;
}
.optionContainer .dataSetItem > div {
    float: left;
}
.optionContainer .dataSetItem .dataSetItemHeader {
    width: 35%;
}
.optionContainer .dataSetItem .dataSetItemBody {
    width: 65%;
}
.optionContainer .dataSetItem .chosen-disabled,
.optionContainer .dataSetItem .chosen-disabled .chosen-single {
    cursor: not-allowed !important;
    opacity: 1 !important;
}
.optionContainer .dataSetItem .chosen-disabled .chosen-single b {
    display: none;
}
.optionContainer .chartSelect {
    width: 124px;
}
.optionContainer .removeDataSetBox {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 24px;
    text-align: center;
}

.optionContainer .removeDataSet {
    opacity: 0.5;
    cursor: pointer;
}

.optionContainer .removeDataSet:hover {
    opacity: 1;
}

.optionContainer .dataSetContainer .chosen-results {
    max-height: 200px;
}
.optionContainer .dataSetTool {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.content-tab-container {
    min-height: 550px;
}
/* .content-tab-container .tableContainer:empty {
    min-height: unset;
} */
.content-tab-container .chartContainer:empty,
.content-tab-container .chartContainer {
    min-height: 494px;
}
.content-tab-container .tableContainer:empty,
.content-tab-container .tableContainer {
    min-height: 415px;
}


.chartContainer {
    position: relative;
}
.chartContainer.rawDataChart {
    margin: 20px 50px;
}
.canvasjs-chart-container {
    width: 100%;
}
.tableContainer:empty {
    min-height: 563px;
}
.chartContainer,
.tableContainer {
    position: relative;
}
.asTable {
    max-height: 563px;
}
.chartContainer:empty,
.tableContainer:empty {
    background-image: url(../images/UA_BG.png);
    /* background-color: #fdfdfd; */
    overflow: hidden;
    background-position: top left;
    border: 1px solid rgba(0,0,0,0.05);
    /*border-top: 0;*/
    /*border-left: 0;*/
    text-align: center;
    background-position: center;
    /* box-shadow: 0 0 50px rgba(0,0,0,0.02) inset; */
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.chartContainer:empty:after,
.tableContainer:empty:after {
    font-family: 'Material Design Icons';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;
    margin-left: -75px;
    color: #e5e5e5;
    font-size: 150px;
    line-height: 1;
}
.chartContainer:empty:after {
    content: '\f127';
}
.chartContainer .unableChart {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    padding: 20px;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.unableChart h3 {
    margin-bottom: 15px;
}
.unableChart p {
    word-break: keep-all;
}
.unableChartIcon {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 200px;
    height: 200px;
    font-size: 150px;
    color: #ebebeb;
    background-color: rgba(235, 235, 235, 0.15);
    margin-top: -30px;
    margin-bottom: 20px;
    border: 5px solid #ebebeb;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.unableChartIcon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.tableContainer:empty:after {
    content: '\f4f1';
}
.optionContainer {
    padding-bottom: 5px;
}
.chosen-container {
    width: 100% !important;
}
.chosen-search input[type="text"],
.ps-search-container input[type="text"] {
    outline: 0;
}
.chosen-search input[type="text"]:focus,
.ps-search-container input[type="text"]:focus {
    box-shadow: 0 0 0 2px rgba(0,123,255,.25);
}
.chosen-container-multi .chosen-choices .search-field input[type="text"] {
    padding: 0 5px;
    width: auto !important;
}
.chosen-container-multi .chosen-choices .search-choice {
    margin: 4px 2px;
    padding: 5px 20px 5px 10px;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.chosen-container-multi .chosen-choices .search-choice .search-choice-close {
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.form-control + .chosen-container-multi .chosen-choices,
.form-control + .chosen-container-single .chosen-single {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    padding: 8px 10px 8px 10px;
    border-color: #E7EBEC;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 38px;
    line-height: 1.42857143;
}
.form-control + .chosen-container-multi .chosen-choices {
    padding: 2px 5px;
}
.form-control + .ps-wrap .ps-selected,
.form-control + .chosen-container-active .chosen-single {
    transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
}
.form-control + .ps-wrap.ps-active .ps-selected,
.form-control + .chosen-container-active.chosen-container-multi.chosen-with-drop .chosen-choices,
.form-control + .chosen-container-active.chosen-with-drop .chosen-single {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-control + .chosen-container-active .chosen-choices,
.form-control + .chosen-container-active .chosen-single,
.form-control + .chosen-container-active.chosen-with-drop .chosen-choices,
.form-control + .chosen-container-active.chosen-with-drop .chosen-single {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 5px rgba(0,123,255,.25);
}
.form-control + .chosen-container-single .chosen-single div b {
    background-position: 0px 7px;
}
.form-control + .chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: -18px 7px;
}
.form-control.material + .chosen-container-multi .chosen-choices,
.form-control.material + .chosen-container-single .chosen-single {
    padding-left: 0;
    border: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#1b5eb4), to(#1b5eb4)), -webkit-gradient(linear, left top, left bottom, from(#d2d2d2), to(#d2d2d2));
    background-image: -webkit-linear-gradient(#1b5eb4, #1b5eb4), -webkit-linear-gradient(#d2d2d2, #d2d2d2);
    background-image: linear-gradient(#1b5eb4, #1b5eb4), linear-gradient(#d2d2d2, #d2d2d2);
    background-size: 0 2px,100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom, center -webkit-calc(100% - 1px);
    background-position: center bottom, center calc(100% - 1px);
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.form-control.material + .chosen-container-multi .chosen-choices {
    padding: 0;
}
.form-control.material + .chosen-container-active .chosen-choices,
.form-control.material + .chosen-container-active .chosen-single,
.form-control.material + .chosen-container-active.chosen-with-drop .chosen-choices,
.form-control.material + .chosen-container-active.chosen-with-drop .chosen-single {
    outline: none;
    border: 0;
    -webkit-animation: input-highlight .5s forwards;
    animation: input-highlight .5s forwards;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
}
.form-control.material + .chosen-container-single .chosen-single div b {
    background-position: 3px 7px;
}
.form-control.material:disabled + .chosen-container-single .chosen-single div b {
    display: none;
}
.form-control.material:disabled + .chosen-container-single .chosen-single:hover {
    cursor: not-allowed;
}
.form-control.material + .chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: -15px 7px;
}

.chosen-container-multi .chosen-choices {
    max-height: 92px;
    overflow-y: auto;
}
.chosen-container .chosen-results li.disabled-result {
    color: rgba(0, 0, 0, 0.3);
}
.chosen-container .chosen-results li {
    font-weight: 300;
    color: #555;
}
.chosen-container .chosen-drop {
    /* margin-top: 0.5px; */
    border-top: 1px solid transparent;
    outline: none;
}
.chosen-container .chosen-results li.group-result {
    font-weight: 700;
}
.dataTableContainer {
    border-bottom: 0;
}
.dataTables_wrapper {
    margin-top: 0;
}
.dataTable th,
.dataTable td {
    word-break: keep-all;
    white-space: nowrap;
}
table.dataTable thead .sorting {
    background-image: url(../images/sort_both.png);
}
table.dataTable thead .sorting_asc {
    background-image: url(../images/sort_asc.png);
}
table.dataTable thead .sorting_desc {
    background-image: url(../images/sort_desc.png);
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    background-color: unset;
}

table.dataTable thead th, table.dataTable thead td {
    padding: 10px 18px;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
}

table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background-color: #fff;
}
.DTFC_LeftHeadWrapper,
.DTFC_LeftBodyWrapper {
    /* border-bottom: 1px solid #111; */
    border-right: 1px solid #ccc;;
    z-index: 1080;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #fff;
    font-size: 16px;
    padding: 2px 8px;
    border-right: unset;
    color: #1b5eb4 !important;
    margin: 2px;
    border-radius: 15px !important;
    -webkit-border-radius: 15px !important;
    -moz-border-radius: 15px !important;
    -ms-border-radius: 15px !important;
    -o-border-radius: 15px !important;
}

.dataTables_wrapper .dataTables_paginate {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
    box-shadow: unset;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:active,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #1b5eb4;
    border-color: #1b5eb4;

}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    color: #1b5eb4 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    color: #e8eaec !important;
    cursor: not-allowed;
}
.dataTables_wrapper.no-footer .dataTables_scrollBody {
    border-bottom: 0;
}
.dataTables_wrapper .dataTables_processing {
    top: 230px;
    width: 140px;
    height: 140px;
    margin-left: -70px;
    margin-top: 0;
    font-size: unset;
    background: rgba(0,0,0,0.03);
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    z-index: 999;
}
.dataTables_processing .mdi-loading {
    color: #28498f;
}
.dataTable {
    width: 100% !important;
}
.unitColumn {
    position: relative;
    text-align: center;
}
.mediaViewerWrap {
    position: fixed;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    width: 0px;
    height: 0px;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999;
    color: #fff;
    opacity: 0;
    user-select: none;
    backdrop-filter: blur(5px);
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.mediaViewerHeader {
    display: block;
    background-color: rgba(0,0,0,0.5);
}
.mediaViewerBody {
    display: flex;
    flex: 1 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: auto;
}
.mediaViewerWrap[media-size="fitWindow"] .mediaViewerBody img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.mediaViewerWrap[media-size="original"] .mediaViewerBody img {
    width: unset;
    height: unset;
}
.mediaContainer {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
}
.mediaContainer::after {
    content: '';
    display: block;
    padding-bottom: 20px;
}
.mediaViewerWrap[media-size="fitWindow"] .mediaContainer {
    padding: 20px;
}
.mediaViewerWrap[media-size="original"] .mediaContainer {
    padding-top: 20px;
}
.mediaInfo {
    float: left;
    padding: 20px 15px;
    overflow: hidden;
}
.mediaTools {
    float: right;
    padding: 10px;
    padding-bottom: 0;
}
.mediaInfo span,
.mediaTools span {
    margin: 0 5px;
    font-weight: 500;
    font-size: 16px;
    vertical-align: middle;
    white-space: nowrap;
}
.mediaViewerWrap[media-size="fitWindow"] .mediaToggle .showFitWindow {
    display: none;
}
.mediaViewerWrap[media-size="original"] .mediaToggle .showOriginal {
    display: none;
}
.mediaTools span.closeMediaViewer {
    display: inline-block;
    font-size: 36px;
    line-height: 36px;
    height: 36px;
    margin: 0 10px;
    cursor: pointer;
}

.dataTable .arrayPopup .tooltip-inner {
    max-height: 56px;
}
.unit_Item .arrayPopup .tooltip-inner {
    max-height: 84px;
}
.unitItem .arrayPopup .tooltip-inner {
    max-height: 130px;
}
.arrayPopup .tooltip-inner {
    max-width: 100%;
    padding: 0 5px;
    word-break: break-all;
    text-align: left;
    font-size: 14px;
    overflow: auto;
    cursor: copy;
    border: 1px solid #000;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.arrayPopup .tooltip-close {
    position: absolute;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    right: -14px;
    font-size: 12px;
    cursor: pointer;
    color: #fff;
    background-color: #ff0000;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.arrayPopup.top .tooltip-close {
    top: -10px;
    right: -14px;
}
.arrayPopup.bottom .tooltip-close {
    bottom: -10px;
    right: -14px;
}
.arrayPopup.right .tooltip-close {
    top: 0px;
    right: -14px;
}
.arrayPopup.left .tooltip-close {
    top: 0px;
    left: -14px;
}
.arrayPopup .tooltip-close:before {
    content: '\F156';
    font-family: 'Material Design Icons';
}
.tooltip-inner table tr,
.tooltip-inner table td {
    background: transparent !important;
    line-height: normal;
    color: #fff !important;
}
.tooltip-inner table td {
    white-space: nowrap;
    word-break: keep-all;
    padding: 5px 3px !important;
    font-family: 'consolas', 'Inconsolata';
}
.tooltip-inner table td:first-child {
    text-align: right;
    color: rgba(255,255,255,0.5) !important;
}
.tooltip-inner table td:first-child::after {
    content: '\F35F';
    font-family: 'Material Design Icons';
    /* float: left; */
    color: #0072ff;
}
.canvasjs-chart-toolbar {
    border: 0 !important;
}
.canvasjs-chart-toolbar button {
    margin: 0 5px !important;
    padding: 6px 12px !important;
    border: 0 !important;
    border-radius: 3px;
    padding: 6px 12px;
    outline: none;
    background-color: transparent !important;
}

.canvasjs-chart-toolbar button:hover {
    background: #1b5eb4 !important;
}

.canvasjs-chart-toolbar div div:hover{
    background: #1b5eb4 !important;
}
#chartCarousel.carousel {
    margin-bottom: 0;
}
#chartCarousel.carousel .carousel-control span {
    position: absolute;
    top: 50%;
    margin-left: -20px;
    margin-top: -30px;
    padding-top: unset;
}
#chartCarousel.carousel .carousel-indicators {
    /* top: 100%; */
    position: relative;
    width: 100%;
    margin-left: -50%;
    margin-bottom: 0;
    padding-top: 15px;
    bottom: unset;
}
#chartCarousel .carousel-control {
    width: 60px;
}
#chartCarousel .carousel-control .mdi {
    font-size: 40px;
    text-shadow: none;
}
#chartCarousel .chartItem {
    height: 500px;
    margin: 0 60px;
}
.carousel.white-bg .carousel-indicators li {
    background: #1b5eb4;
}
.content-tab-list {
    margin: -20px -20px 0;
    background-color: #F1F4F5;
}
.tab-justified {
    display: table;
    width: calc(100% + 40px);
    background-color: rgba(0,0,0,0.1);
}
.content-tab-item {
    display: table-cell;
    padding: 20px;
    cursor: pointer;
    border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    -o-border-radius: 3px 3px 0 0;
}
.content-tab-item h2 {
    line-height: 40px;
    opacity: 0.5;
}
.content-tab-item:hover {
    background-color: rgba(255,255,255,0.5);
}
.content-tab-item.active {
    background-color: #fff;
    cursor: default;
    pointer-events: none;
}
.content-tab-item.active h2 {
    opacity: 1;
}
.content-tab-container {
    position: relative;
    width: 100%;
    height: 100%;
}
.content-tab {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.content-tab.in {
    z-index: 3;
}
.chartContainer .prevBtn,
.chartContainer .nextBtn {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    color: #ccc;
    font-size: 50px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    opacity: 1;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.chartContainer .prevBtn.disabled,
.chartContainer .nextBtn.disabled {
    opacity: 0.2;
    cursor: not-allowed;
}
.chartContainer .prevBtn:hover,
.chartContainer .nextBtn:hover {
    color: #00aaea;
}
.chartContainer .prevBtn.disabled:hover,
.chartContainer .nextBtn.disabled:hover {
    color: #ccc;
}
.chartContainer .prevBtn {
    left: -50px;
}
.chartContainer .nextBtn {
    right: -50px;
}
.chartContainer .prevBtn:after,
.chartContainer .nextBtn:after {
    font-family: 'micon';
}
.chartContainer .prevBtn:after {
    content: '\EAC3';
}
.chartContainer .nextBtn:after {
    content: '\EAC6';
}
.content-tab {
    padding-top: 20px;
}
/* dataView end */

/* clients */
.confirmKey {
    text-align: right !important;
}


ul.clients-Table{
    width: 100%;
    height: 45px;
    padding: 7px 10px;
    line-height: 1.5;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

ul.clients-Table li{
    width: 23%;
    float: left;
    padding: 5px 10px;
    white-space: nowrap;
    text-align: left;
}

ul.clients-Table:hover{
    border: 1px solid #1b5eb4;
}

ul.clients-Table li:last-child{
    width: 8%;
}

ul.clients-Table li i{
    color: #1b5eb4;
    line-height: 0.4;
    font-size: 25px;
    vertical-align: middle;
}

ul.clients-Table li i:hover{
    color: #1b5eb4;
}

.th{
    color: #fff;
    font-weight: 500;
    font-size: 15px;
    text-align: center !important;
    background-color: #1b5eb4 !important;
}

.clientItem .content-tools {
    position: absolute;
    top: 15px;
    right: 25px;
    height: 40px;
    z-index: 5;
}
.client-box-container {
    min-height: calc(inherit - 168px);
    /* height: calc(100% - 168px); */
}

.client-list {
    padding: 0 15px;
}

.client-list .clientItem {
    margin: 15px 0;
}

.client-list .content-tools .dropdown-menu {
    left: -110px;
}

.client-list .blankItem {
    width: 100%;
    text-align: center;
    cursor: default;
    margin-top: 20px;
    font-size: 16px;
}

.client-list .blankItem i {
    display: block;
    font-size: 150px;
    color: #B0BEC5;
}

.client-icon:before {
    font-family: 'Material Design Icons';
    color: #1b5eb4;
    opacity: 0.8;
    font-size: 45px;
    padding: 0 0 0 17px;
}
.webServer .client-icon:before {
    content: '\f48d';
}
.webClient .client-icon:before {
    content: '\f379';
}
.mobileAndroid .client-icon:before {
    content: '\f032';
}
.mobileIOS .client-icon:before {
    content: '\f035';
}

.device .client-icon:before {
    content: '\f469';
}

.client-box {
    position: relative;
    width: 100%;
    text-align: center;
    background-color: #fff;
    border-top: 5px solid #00aaea;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 5px rgba(21, 35, 48, 0.2);
    box-shadow: 0 2px 5px rgba(21, 35, 48, 0.2);
}
.client-box:before {
    content: '';
    position: absolute;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    top: 50%;
    bottom: 0;
    left: 30px;
    right: 30px;
    border-radius: 100px / 10px;
}
.client-title{
    color: #4c4c4c;
    position: relative;
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    padding: 15px 0 15px 15px;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
}

.client-title .client-title-box {
    display: inline-block;
    width: calc(100% - 90px);
    position: relative;
    top: 0;
    padding-left: 5px;
    line-height: 1.3;
    display: inline-block;
    vertical-align: middle;
}
.client-title-box > div {
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
}
.client-icon{
    width: 80px;
    height: 80px;
    display: inline-block;
    /* border-radius: 7px; */
    /* background-color: #e6e9e9; */
    line-height: 1.7;
    vertical-align: middle;
}
.clientType {
    font-size: 15px;
    font-weight: 400;
    color: #76828E;
}
.client-cont{
    position: relative;
    clear: both;
    background-color: #fafafa;
    border-top: 1px dashed #ccc;
}
.client-cont .control-label:before {
    margin-left: 0;
}
.client-info {
    padding: 25px 25px 10px;
}
.client-info:after {
    content: '';
    display: block;
    clear: both;
}
.client-cont input {
    background-color: transparent;
}
.clientID,
.clientSecret {
    font-size: 18px;
    font-weight: 500;
    color: #4c4c4c;
}
.clientID,
.clientSecret {
    cursor: pointer;
}
.clientID i,
.clientSecret i {
    color: #ccc;
}
.clientID:hover i,
.clientSecret:hover i {
    color: inherit;
}
.clientID input,
.clientSecret input {
    border: 0;
    width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    outline: none;
    font-family: 'consolas', 'Inconsolata';
    cursor: pointer;
}
/* clients end */

/* adminclients */

.clientNumber {
    text-align: center;
}
.adminClientNumber,
.accessValidity,
.refreshValidity {
    text-align: center;
}
.adminClientItem {
    cursor: pointer;
}
/* adminclients end */

/* adminDevice */
.adminDeviceList .thumb {
    text-align: center;
    width: 80px;
}
.adminDeviceList .thumb .deviceThumb,
.adminDeviceList .thumb .scheduleThumb {
    margin: 5px 0;
}
.adminDeviceItem {
    cursor: pointer;
}
.adminDeviceItem[driver-status="order"] {
    background-color: #fcf4ff;
}
.adminDeviceItem[driver-status="confirm"] {
    background-color: #eaecff;
    /* display: none; */
}
.adminDeviceItem[driver-status="working"] {
    background-color: #fffbf5;
}
.shareStasus {
    text-align: center;
}
.driverStasus {
    height: 51px;
    text-align: center;
}
.adminDeviceItem .driverStasus > i {
    display: none;
    padding: 2px 15px;
    line-height: 30px;
    text-align: center;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
.adminDeviceItem .driverStasus > i:before {
    font-family: 'Material Design Icons';
    font-size: 20px;
    vertical-align: middle;
    margin-right: 5px;
}
.adminDeviceItem[driver-status="complete"] .driverStasus > i {
    display: inline-block;
    background-color: #29b989;
}
.adminDeviceItem[driver-status="complete"] .driverStasus > i:before {
    content: '\f0d7';
}
.adminDeviceItem[driver-status="order"] .driverStasus > i {
    display: inline-block;
    background-color: #1b5eb4;
}
.adminDeviceItem[driver-status="order"] .driverStasus > i:before {
    content: '\f8e9';
}
.adminDeviceItem[driver-status="confirm"] .driverStasus > i {
    display: inline-block;
    background-color: #798cca;
}
.adminDeviceItem[driver-status="confirm"] .driverStasus > i:before {
    content: '\fa2c';
}
.adminDeviceItem[driver-status="working"] .driverStasus > i {
    display: inline-block;
    background-color: #f1a23b;
}
.adminDeviceItem[driver-status="working"] .driverStasus > i:before {
    content: '\f46e';
}
/* adminDevice end */

/* locations start */
.thumbLocationList {
    position: relative;
    padding: 10px;
    min-height: 420px;
}
.thumbLocationItem {
    position: relative;
    margin: 15px 0;
}
.locationGroupItem:before,
.thumbLocationItem:before {
    content: '';
    position: absolute;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
    top: 50%;
    bottom: 0;
    left: 30px;
    right: 30px;
    border-radius: 100px / 10px;
}
.locationItemContent {
    display: block;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(21, 35, 48, 0.2);
    /*padding-bottom: 10px;*/
    cursor: pointer;
}
.locationListThumb {
    position: relative;
    height: 200px;
    background-color: #f6f9fb;
    font-size: 200px;
    line-height: 230px;
    text-align: center;
    color: rgba(32, 167, 255, 0.5);
    border-bottom: 1px solid #dedede;
    overflow: hidden;
}
.mapImage {
    position: relative;
    height: 100%;
}
.mapImage img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    margin-top: -50%;
    margin-left: -50%;
}
.mapImage:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    top: calc(50% - 20px);
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    background-image: url('../images/marker_red.png');
    z-index: 1;
}
.mapImage.noImage {
    background-image: url('../images/transparnt-pattern-alpha.png');
    background-position: center;
}
.mapImage.noImage:before {
    width: 80%;
    height: 80%;
    top: 50%;
    left: 50%;
    background-image: url('../images/marker_blank.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.mapImage:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 0 50px rgba(0,0,0,0.3) inset;
    -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.3) inset;
    z-index: 1;
}
.thumbLocationName, .thumbLocationInfo {
    padding: 3px 15px;
}
.thumbLocationName {
    height: 30px;
}
.thumbLocationInfo {
    line-height: 1.5;
}
.thumbLocationAddr > span {
    display: block;
    overflow-x: hidden;
    word-break: keep-all;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.locationRegInfo {
    margin: 10px -15px;
    font-size: 16px;
    font-weight: 500;
}
.thumbLocationRegDate {
    padding: 0 0 8px;
    border-bottom: 1px solid #ebebeb;
}
.thumbLocationName:before,
.thumbLocationAddr > .mainAddr:before,
.thumbLocationRegDate:before {
    font-family: 'Material Design Icons';
    line-height: 1;
    margin-right: 5px;
    color: #1b5eb4;
    vertical-align: middle;
}
.thumbLocationName:before {
    content: '\f4a1';
    margin-left: -2px;
}
.thumbLocationAddr > .mainAddr:before {
    content: '\f7d8';
}
.locationRegInfo .locations .infoLabel:before {
    content: '\F34E';
}
.locationRegInfo .iotDevices .infoLabel:before {
    content: '\F4AA';
}
.locationRegInfo .locationUsers .infoLabel:before {
    content: '\F00E';
}
.thumbLocationRegDate:before {
    content: '\f150';
}
.thumbLocationList .blankListIcon .beforeIcon:before {
    content: '\f983';
}
.thumbLocationList .placeholderListIcon .beforeIcon:before {
    content: '\f982';
}
.mapContainer {
    position: relative;
}
.gMapSearchBox {
    position: absolute;
    padding: 0;
    top: 20px;
    right: 25px;
    width: 300px;
    z-index: 100;
}
.gMapSearchBox * {
    font-size: 18px;
}
.gMapSearchBox .btnSearch {
    width: 41px;
    height: 41px;
    background-color: #3396ff;
    color: #fff;
    margin: 4px;
}
.gMapSearchBox .form-control {
    padding: 10px 53px 10px 15px;
    font-weight: 400;
    border: 2px solid #1b5eb4;
    border-radius: 50px;;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}
.gm-style-iw-d {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 18px;
}
.locationMap {
    margin: 10px 0;
    min-height: 477px;
    height: calc(100vh - 461px);
    border: 1px solid #d2d2d2;
    transition: height 0.15s ease-in-out;
    -webkit-transition: height 0.15s ease-in-out;
    -moz-transition: height 0.15s ease-in-out;
    -ms-transition: height 0.15s ease-in-out;
    -o-transition: height 0.15s ease-in-out;
}
.locationMap.movable {
    height: 429px;
}
.listHeader {
    padding: 8px 10px 7px;
    background-color: #c3e0ff;
    border: 1px solid #8baacc;
    border-bottom: 0;
    border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -ms-border-radius: 5px 5px 0 0;
    -o-border-radius: 5px 5px 0 0;
}
.listHeader .checkbox {
    margin: 0;
}
.contextListTitle {
    padding-bottom: 10px;
    font-size: 16px;
}
.contextListTitle:before {
    content: "\F142";
    font-family: "Material Design Icons";
    color: #1b5eb4;
    margin-left: -2px;
    margin-right: 5px;
}
.listBody {
    /* height: 209px; */
    height: calc(50vh - 261px);
    min-height: 209px;
    border: 1px solid #8baacc;
    background-color: rgba(249, 249, 249, 0.8);
    border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
}
.locationDeviceList,
.locationUserList {
    padding: 10px;
}
.locationContextItem {
    border-bottom: 1px solid #ebebeb;
    user-select: none;
}
.locationContextItem:first-child {
    border-top: 1px solid #ebebeb;
}
.locationContextItem .checkbox {
    margin: 0;
}
.locationContextItem .checkbox label > span {
    cursor: pointer;
    padding-left: 5px;
}
.locationContextItem .checkbox i {
    padding: 0;
}
.locationlistManager .checkbox i:before {
    background-color: #fff !important;
}
.locationContextItem .checkbox input:disabled + i + span {
    cursor: not-allowed !important;
    opacity: 0.7;
}
.locationContextItem .checkbox label {
    display: block;
    padding: 10px 5px 10px 23px;
}
.locationContextItemName:after {
    content: '|';
    opacity: 0.2;
    margin: 0 5px;
}
.locationContextItem.blankItem {
    text-align: center;
    padding: 10px 0;
    border: 1px dotted #ebebeb;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.locationContextTools {
    /* padding: 10px 0; */
    padding-top: 20px;
    text-align: center;
}
.locationContextTools > button {
    display: inline-block;
    background-color: #3396ff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    border: 0;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.locationContextTools > button[disabled] {
    cursor: not-allowed;
    opacity: 0.8;
    background-color: #d6ebff;
}
.contextRemove:before,
.contextAdd:before {
    font-family: 'Material Design Icons';
    line-height: 1;
}
.contextRemove:before {
    content: '\f143';
}
.contextAdd:before {
    content: '\f140';
}
.locationContextTools > button + button {
    margin-left: 20px;
}
.listBody .contentsLoading {
    text-align: center;
    padding: 20px;
}

/* locationGroups start */
.locationGroupItem {
    position: relative;
    margin: 15px 0;
}
.locationGroupItem .content-tools {
    position: absolute;
    top: 10px;
    right: 25px;
    height: 40px;
    text-align: center;
}
.locationGroupItemContent {
    display: block;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 5px rgb(21 35 48 / 20%);
    /* padding-bottom: 10px; */
    cursor: pointer;
}
.locationGroupThumb {
    position: relative;
    height: 190px;
    padding: 30px 0;
    margin-bottom: 10px;
    text-align: center;
    background-image: url(../images/transparnt-pattern-alpha.png);
    background-position: center;
    overflow: hidden;
}
.locationGroupThumb img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.locationGroupThumb:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 0 50px rgb(0 0 0 / 30%) inset;
    -webkit-box-shadow: 0 0 50px rgb(0 0 0 / 30%) inset;
    z-index: 1;
}
.boundaryIcon {
    position: absolute;
    border: 4px solid rgb(66, 168, 255);
    background-color: rgba(66, 168, 255, 0.5);
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.boundaryIcon:before,
.boundaryIcon:after,
.boundaryIcon > span:before,
.boundaryIcon > span:after {
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    border: 4px solid rgba(66, 168, 255, 1);
    background-color: #f6f9fb;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
}
.boundaryIcon:before {
    top: -12px;
    left: -12px;
}
.boundaryIcon:after {
    top: -12px;
    right: -12px;
}
.boundaryIcon > span:before {
    bottom: -12px;
    left: -12px;
}
.boundaryIcon > span:after {
    bottom: -12px;
    right: -12px;
}
.locationGroupItemContent .beforeIcon {
    width: 200px;
    height: 200px;
}
.locationGroupItemContent .placeholderListIcon .boundaryIcon,
.locationGroupItemContent .placeholderListIcon .boundaryIcon,
.locationGroupItemContent .blankListIcon .boundaryIcon,
.locationGroupItemContent .blankListIcon .boundaryIcon {
    position: relative;
}
.locationGroupItemContent .placeholderListIcon:hover .boundaryIcon,
.locationGroupItemContent .placeholderListIcon:hover .boundaryIcon + i {
    display: none;
}
.locationGroupItemContent .blankListIcon .beforeIcon:before {
    content: '';
    display: none;
}
.locationGroupItemContent .placeholderListIcon .beforeIcon:before {
    content: '';
    display: none;
}
.locationGroupItemContent .placeholderListIcon:hover .beforeIcon:before {
    content: '\f417' !important;
    display: block;
    font-family: 'Material Design Icons';
    font-size: 200px;
}
.locationGroupItemContent .beforeIcon i:before,
.locationGroupThumb i:before {
    content: '\FDB0';
    font-family: 'Material Design Icons';
    font-size: 100px;
    color: #1b5eb4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.locationGroupRegDate {
    padding: 0 0 8px;
}
.locationGroupName, 
.locationGroupInfo {
    padding: 3px 15px;
}
.locationGroupItem .locationRegInfo .infoLabel {
    width: auto;
    margin-right: 5px;
}
.locationGroupItem .locationRegInfo {
    margin: 10px -5px;
    font-size: 14px;
}
.locationGroupItem .locationRegInfo .col-lg-4 {
    padding: 0 5px;
}
.locationGroupInfo > div {
    display: block;
    overflow-x: hidden;
    word-break: keep-all;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.locationGroupInfo > div label {
    margin-right: 5px;
}
.locationGroupName:before,
.locationGroupAddr:before,
.locationGroupZoomLevel:before,
.regLocations:before,
.locationGroupRegDate:before {
    font-family: 'Material Design Icons';
    line-height: 1;
    margin-right: 5px;
    color: #1b5eb4;
    vertical-align: middle;
}
.locationGroupName:before {
    content: '\FDB0';
    margin-left: -2px;
}
.locationGroupAddr:before {
    content: '\F4FE';
}
.locationGroupZoomLevel:before {
    content: '\F983';
}
.regLocations:before {
    content: '\F350';
}
.locationGroupRegDate:before {
    content: '\f150';
}
/* 위치 그룹 상세 시작 */
.locationGroupMap {
    height: calc(100vh - 278px) !important;
	min-height: 627px !important;
	background: url('../images/monitoring/loading_n.png') !important;
}
.locationGroupMap > div:nth-child(3) > div:nth-child(2):hover > div:last-child {
    display: none !important;
}
.mapComment {
    margin-top: -20px;
    margin-bottom: 10px;
}
.groupMapContainer {
	position: relative;
	background-color: #efeeef;
	border: 1px solid rgba(0, 0, 0, 0.05);
	overflow: hidden;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}
.applyToLocationWrap {
    min-height: 440px !important;
    height: calc(100vh - 467px) !important;
}
.groupMapContainer .mapLevel {
    width: 32px;
    font-size: 18px;
    line-height: 1;
    background-color: rgba(0,0,0,0.7);
    background-color: #fff;
    color: #3596fe;
    text-align: center;
    font-weight: 500;
    padding-bottom: 8px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 2px 0px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.mapLevel label {
    font-size: 10px;
    margin-bottom: 5px;
    color: #5d6975;
}
.mapCenter {
	position: absolute;
    pointer-events: none;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	z-index: 5;
}
.mapCenter:before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	width: 4px;
	height: 4px;
	background-color: #fff;
	box-shadow: 0 0 1px 1px rgba(0,0,0,0.5);
	border-radius: 100%;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	-ms-border-radius: 100%;
	-o-border-radius: 100%;
}
.mapCenter span {
	position: absolute;
	top: 50%;
	left: 50%;
	background-color: #fff;
	box-shadow: 0 0 1px 1px rgba(0,0,0,0.5);
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
}
.mapCenter span:nth-child(odd){
	width: 15px;
	height: 2px;
	margin-top: -1px;
}
.mapCenter span:nth-child(even){
	width: 2px;
	height: 15px;
	margin-left: -1px;
}
.mapCenter span:first-child {
	transform: translateX(calc(-50% - 15px));
	-webkit-transform: translateX(calc(-50% - 15px));
	-moz-transform: translateX(calc(-50% - 15px));
	-ms-transform: translateX(calc(-50% - 15px));
	-o-transform: translateX(calc(-50% - 15px));
}
.mapCenter span:nth-child(2) {
	transform: translateY(calc(-50% - 15px));
	-webkit-transform: translateY(calc(-50% - 15px));
	-moz-transform: translateY(calc(-50% - 15px));
	-ms-transform: translateY(calc(-50% - 15px));
	-o-transform: translateY(calc(-50% - 15px));
}
.mapCenter span:nth-child(3) {
	transform: translateX(calc(-50% + 15px));
	-webkit-transform: translateX(calc(-50% + 15px));
	-moz-transform: translateX(calc(-50% + 15px));
	-ms-transform: translateX(calc(-50% + 15px));
	-o-transform: translateX(calc(-50% + 15px));
}
.mapCenter span:nth-child(4) {
	transform: translateY(calc(-50% + 15px));
	-webkit-transform: translateY(calc(-50% + 15px));
	-moz-transform: translateY(calc(-50% + 15px));
	-ms-transform: translateY(calc(-50% + 15px));
	-o-transform: translateY(calc(-50% + 15px));
}
.groupMapContainer[map="kakao"] .reaction {
	position: absolute;
	top: 3px;
	left: 331px;
	z-index: 2;
}
.groupMapContainer[map="kakao"] .boundaryColorPicker {
	position: absolute;
	top: 3px;
	left: 294px;
	z-index: 2;
}
.groupMapContainer[map="kakao"] .mapLevel {
    position: absolute;
    top: 231px;
    left: 3px;
    z-index: 2;
}
.reaction button {
	font-size: 24px;
	padding: 0 5px;
	border: 0;
	line-height: 33px;
	background-color: #fff;
	box-shadow: rgb(153 153 153) 0px 1px 2px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
}
.reaction button:disabled {
	color: #ccc;
	/* background-color: rgba(255,255,255,0.5); */
}

.boundaryColorPicker .colorCode {
	display: none;
}
.boundaryColor {
	display: inline-block;
	width: 34px;
	height: 34px;
}
.colorpicker-element .input-group-addon {
	padding: 2px;
	background-color: #fff;
	box-shadow: rgb(153 153 153) 0px 1px 2px;
}
.boundaryColorPicker .colorpicker-element .input-group-addon i {
	width: 26px;
	height: 26px;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
}
.input-group-addon.colorChip {
	border: 0;
	padding: 4px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
}
.boundaryColorPicker .colorpicker-element .input-group-addon i:after {
	content: '\F20B';
	font-family: 'Material Design Icons';
	color: rgba(255,255,255,0.5);
	font-size: 14px;
	line-height: 26px;
	text-align: center;
}
.markerOverlay {
	position:relative;
	width: 0;
	overflow: visible;
	float:left;
}
.markerOverlay .title:before {
	content: '';
	position: absolute;
	left: 49%;
	bottom: -7px;
	width: 10px;
	height: 10px;
	background: #fff;
	box-shadow:2px 2px 2px rgba(0, 0, 0, 0.5);
	transform: rotate(45deg) translateX(-50%);
	-webkit-transform: rotate(45deg) translateX(-50%);
	-moz-transform: rotate(45deg) translateX(-50%);
	-ms-transform: rotate(45deg) translateX(-50%);
	-o-transform: rotate(45deg) translateX(-50%);
	transition: all 0.2 ease-in-out;
	-webkit-transition: all 0.2 ease-in-out;
	-moz-transition: all 0.2 ease-in-out;
	-ms-transition: all 0.2 ease-in-out;
	-o-transition: all 0.2 ease-in-out;
}
.markerOverlay .title {
	position: relative;
	display:block;
	text-align:center;
	background:#fff;
	border-radius:6px;
	padding:5px 10px;
	font-size:14px;
	font-weight:bold;
	box-shadow:0px 2px 2px rgba(0, 0, 0, 0.5);
}
.markerOverlay.selected .title:before,
.markerOverlay.selected .title {
    background: #006fe2;
    color: #fff;
}
.markerOverlay .link {
	position: absolute;
	bottom: 50px;
	text-decoration:none;
	color:#000;
	text-align:center;
	font-size:14px;
	font-weight:bold;
	border-radius:6px;
	cursor: pointer;
	z-index: 2;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
}
/* 위치 그룹 상세 끝 */
/* usage start */
.usageSelectorBox {
    position: relative;
}
.usageSelectorBox:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 160px;
    background-image: linear-gradient(#fff 10%, #f7fdff 60%, #ddf4ff 100%);
    z-index: 1;
    border-radius: 3px 3px 30% 0;
    -webkit-border-radius: 3px 3px 30% 0;
    -moz-border-radius: 3px 3px 30% 0;
    -ms-border-radius: 3px 3px 30% 0;
    -o-border-radius: 3px 3px 30% 0;
}
.usageSelectorBox > * {
    position: relative;
    z-index: 2;
}
.usageSelectorBox.content-box {
    overflow: visible;
}
.monthSelector {
    padding: 6px 0;
    /* margin: 0 !important; */
    text-align: center;
}
.monthSelector h1 {
    font-weight: 700;
    font-size: 30px;
    color: #000;
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}
.monthSelector h1 i {
    opacity: 0.3;
    cursor: pointer;
}
.monthSelector h1 i:hover {
    color: #00aaea;
    opacity: 1;
}
.monthSelector h1 i.disabled {
    opacity: 0;
    cursor: default;
    pointer-events: none;
}
.countContainer h1 {
    color: #303030;
    padding: 0 5px;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.countContainer h1 i {
    color: #1b5eb4;
}
.currentMonth {
    font-size: 15px;
    padding: 5px 10px;
    font-weight: 400;
}
.currentFee {
    padding: 5px 0;
}
.viewOptionTools span {
    display: inline-block;
    color: #d5dade;
    font-size: 32px;
    width: 38px;
    text-align: center;
    cursor: pointer;
}
.viewOptionTools span:hover {
    opacity: 0.5;
}
.viewOptionTools span:hover,
.viewOptionTools span.active {
    color: #00aaea;
}
.viewOptionTools span.active {
    opacity: 1;
    cursor: default;    
}
.dataContainer {
    position: relative;
}
.dataContainer .tableContainer,
.dataContainer .chartContainer {
    position: absolute;
    width: 100%;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
.dataContainer[view-option="table"] .tableContainer,
.dataContainer[view-option="chart"] .chartContainer {
    opacity: 1;
    visibility: visible;
}
.dataContainer[view-option="chart"] .tableContainer,
.dataContainer[view-option="table"] .chartContainer {
    opacity: 0;
    visibility: hidden;
}
.chartContainer .contentsLoading,
.tableContainer .contentsLoading,
.dataContainer .contentsLoading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.asOfTimeContainer {
    font-size: 15px;
    font-weight: 400;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ece8f3;
}
.choiceComment {
    text-align: center;
    margin: 0 0 20px;
    padding: 0 10px;
}
.licenseList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}
.licenseItem {
    border: 1px solid #ebebeb;
    margin: 0 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    overflow: hidden;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}
.licenseTitle {
    padding: 25px 5px;
    margin-bottom: 20px;
    color: #fff;
}
.featureList {
    font-size: 15px;
    line-height: 1.7;
}
.featureList h3 {
    margin: 15px 0;
}
.featureItem:before {
    content: '\F12C';
    font-family: 'Material Design Icons';
    color: #35b435;
    margin-right: 3px;
}
.choicePrice {
    margin-top: 20px;
}
.currentMonth,
.choiceDate {
    color: #76828E;
    font-size: 14px;
    font-weight: 300;
}
.choiceContainer {
    margin-left: 5px;
    border-left: 3px solid #ebebeb;
    padding-left: 13px;
    line-height: 2;
    float: left;
}
.paymentHistory {
    color: #3396ff !important;
    font-size: 14px;
}
/* usage end */

/* IoT rule Start */
.applyTo {
    display: none;
}
.applyToProductImage {
    position: relative;
    height: 300px;
    border: 1px solid #ccc;
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.applyToProductImage:empty {
    background-color: #425a7d;
}
.applyToProductImage:empty:before {
    content: '\f61a';
    font-family: 'Material Design Icons';
    display: block;
    height: 300px;
    font-size: 200px;
    line-height: 300px;
    text-align: center;
    color: rgba(32, 167, 255, 0.5);
}
.applyToProductImage img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    /* width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%; */
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.referenceFromDeviceWrap,
.applyToLocationWrap,
.applyToDeviceWrap {
    position: relative;
    min-height: 230px;
    overflow: hidden;
    background-color: #fafafa;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid #ccc;
}
.referenceFromDeviceContainer,
.applyToLocationContainer,
.applyToDeviceContainer {
    height: 100%;
    height: calc(100% - 35px);
}
.referenceFromDeviceList,
.applyToLocationList,
.applyToDeviceList {
    height: 100%;
    padding: 10px;
}
.locationGroupContextsModalContent {
    height: calc(100vh - 240px) !important;
}
.locationGroupContextName,
.deviceContextName {
    font-weight: 500;
}
.locationGroupContextPagination,
.locationContextPagination,
.deviceContextPagination,
.deviceStatus .devicePagination {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 5px 0;
    margin: 0;
    background-color: #fff;
    border-top: 1px solid #ccc;
}
.iotRuleSection {
    height: 100%;
    min-height: 533px;
}
/* .iotRuleSection:first-child {
    border-right: 1px solid #ebebeb;
} */
.locationGroupContextWrap,
.deviceContextWrap,
.iotRuleListWrap,
.conditionListWrap,
.ruleWorkListWrap,
.workContentsWrap {
    position: relative;
    height: calc(100% - 61px);
    overflow: hidden;
    background-color: #fafafa;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3) inset;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border: 1px solid #ccc;
}
.referenceFromDeviceWrap,
.applyToLocationWrap,
.applyToDeviceWrap,
.deviceContextWrap,
.locationGroupContextWrap,
.iotRuleListWrap,
.ruleWorkListWrap {
    background-image: url('../images/blockly_bg.png');
}
.locationGroupContext,
.deviceContext {
    height: 100%;
    width: calc(50% - 50px);
    float: left;
}
.locationGroupContextWrap,
.deviceContextWrap {
    height: calc(100% - 130px);;
}
.locationGroupContextWrap .contentsLoading,
.deviceContextWrap .contentsLoading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fafafa;
    background-image: url('../images/blockly_bg.png');
}
.locationGroupContextWrap .contentsLoading > div,
.deviceContextWrap .contentsLoading > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.locationGroupContextContainer,
.deviceContextContainer {
    height: 100%;
}
.locationGroupContextContainer.paging,
.deviceContextContainer.paging {
    height: calc(100% - 35px);
}
.locationGroupContextSelector,
.deviceContextSelector {
    position: relative;
    height: 100%;
    width: 100px;
    float: left;
}
.locationGroupSelectorTools,
.deviceSelectorTools {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
.locationGroupSelectorTools > button,
.deviceSelectorTools > button {
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 25px;
    text-align: center;
    font-size: 24px;
    color: #fff;
    border: 0;
    background-color: #3396ff;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.locationGroupSelectorTools > button[disabled],
.deviceSelectorTools > button[disabled] {
    cursor: not-allowed;
    opacity: 0.8;
    background-color: #d6ebff;
}
.conditionListWrap {
    padding-bottom: 30px;
    min-height: 120px;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3) inset;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3) inset;
    overflow: visible;
}

.iotRuleListContainer,
.conditionListContainer,
.ruleWorkListContainer,
.workContentsContainer {
    height: 100%;
}
.conditionListContainer .mCSB_container,
.ruleWorkListContainer .mCSB_container {
    overflow: visible;
}
.locationGroupContextList,
.deviceContextList {
    padding: 10px;
}
.iotRuleList {
    padding: 15px 5px;
}
.iotRuleList {
    padding: 15px;
    padding-bottom: 230px;
}
.ruleWorkList {
    position: relative;
    display: none;
    opacity: 0;
    padding: 0;
    transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
}
.ruleWorkList.in {
    display: block;
    opacity: 1;
    padding: 15px;
    padding-bottom: 230px;
}
.conditionList {
    padding: 10px;
}
.conditionList:after {
    content: '';
    clear: both;
}
.locationGroupContextItem,
.deviceContextItem,
.referenceFromDeviceItem,
.applyToDeviceItem,
.applyToLocationItem,
.iotRuleItem,
.ruleWorkItem {
    position: relative;
    padding: 10px;
    /* background-color: #dfe3e6; */
    background-color: #e9ebec;
    margin-bottom: 30px;
    cursor: pointer;
    border: 1px solid #bebfbf;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.2s ease-in-out;
    -webkit-transition: box-shadow 0.2s ease-in-out;
    -moz-transition: box-shadow 0.2s ease-in-out;
    -ms-transition: box-shadow 0.2s ease-in-out;
    -o-transition: box-shadow 0.2s ease-in-out;
}
.locationGroupContextItem,
.deviceContextItem,
.referenceFromDeviceItem,
.applyToLocationItem,
.applyToDeviceItem {
    margin-bottom: 10px;
    padding-right: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.locationGroupContextItem,
.deviceContextItem {
    padding: 0;
}
.locationGroupContextItem .checkbox,
.deviceContextItem .checkbox {
    margin: 0;
}
.locationGroupContextItem .checkbox label,
.deviceContextItem .checkbox label {
    display: block;
    padding: 10px;
    padding-left: 30px;
}
.referenceFromDeviceItem:last-child,
.applyToLocationItem:last-child,
.applyToDeviceItem:last-child {
    margin-bottom: 0;
}
.referenceFromDeviceItem > i,
.applyToLocationItem > i,
.applyToDeviceItem > i {
    color: #1b5eb4;
    font-size: 20px;
    margin-right: 5px;
}
.iotRuleItem.selected,
.ruleWorkItem.selected {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0px 3px #678dff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0px 3px #678dff;
    /* background-color: #678dff; */
}
.applyToLocationItem > * {
    vertical-align: middle;
}
.ruleWorkItem {
    margin-bottom: 20px;
    padding-bottom: 0;
}
.iotRuleName {
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
    width: calc(100% - 85px);
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
}
.iotRuleHead {
    position: relative;
    line-height: 40px;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    /* display: inline-block; */
}
.removeDevice,
.removeRule,
.removeCondition,
.removeWork {
    position: absolute;
    display: none;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.removeDevice,
.selected .removeRule,
.selected .removeCondition,
.selected .removeWork {
    display: block;
}
.removeWork {
    right: 40px;
}
.addCondition {
    position: absolute;
    display: none;
    bottom: 12px;
    right: 20px;
}
.iotRuleItem.selected .addCondition {
    display: block;
}
.removeDevice i,
.removeRule i,
.removeCondition i,
.addCondition i,
.removeWork i {
    font-size: 24px;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
}
.removeDevice:hover i,
.removeRule:hover i,
.removeCondition:hover i,
.removeWork:hover i {
    opacity: 1;
    color: #ff4500;
}
.addCondition:hover i {
    opacity: 1;
    color: #678dff;
}
.optionContainer .dataSetList > .blankItem,
.locationGroupContextList > .blankItem,
.deviceContextList > .blankItem,
.referenceFromDeviceList > .blankItem,
.applyToLocationList > .blankItem,
.applyToDeviceList > .blankItem,
.iotRuleList > .blankItem,
.conditionList > .blankItem,
.ruleWorkListBox > .blankItem,
.ruleWorkList > .blankItem {
    text-align: center;
    padding: 10px;
    border: 1px dashed #ccc;
    background-color: rgba(255,255,255,0.7);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
}
.ruleWorkListBox > .blankItem {
    margin: 15px;
}
.locationGroupContextList > .blankItem > i,
.deviceContextList > .blankItem > i,
.applyToLocationList > .blankItem > span > i,
.iotRuleContainer .blankItem > span > i {
    color: #1b5eb4;
}
.scheduleList > .blankItem {
    text-align: center;
    padding: 15px;
    margin: 0 10px;
    border: 1px dashed #ccc;
    background-color: rgba(175,175,175,.1);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.scheduleList .blankItem > span > i {
    color: #1b5eb4;
    font-size: 40px;
}
.conditionItem {
    position: relative;
    line-height: 38px;
    padding: 10px;
    padding-right: 40px;
    margin-bottom: 30px;
    background-color: #fff;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.iotRuleItem:before,
.iotRuleItem:after,
.conditionItem:before,
.conditionItem:after {
    content: '';
    position: absolute;
}
.iotRuleItem:last-child,
.conditionItem:last-child {
    margin-bottom: 0;
}
.iotRuleItem:last-child:before,
.iotRuleItem:last-child:after,
.conditionItem:last-child:before,
.conditionItem:last-child:after {
    display: none;
}
.iotRuleItem:before,
.conditionItem:before {
    width: 100%;
    height: 0;
    left: 0;
    bottom: -15px;
    border-bottom: 1px dashed #ebebeb;
}
.iotRuleItem:after,
.conditionItem:after {
    font-size: 20px;
    /* font-weight: 500; */
    line-height: 1;
    background-color: #fafafa;
    color: rgba(118, 130, 142, 0.5);;
    left: 50%;
    bottom: -26px;
    padding: 0 10px;
    z-index: 2;
    text-align: center;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.iotRuleItem:after {
    content: 'OR';
}
.conditionItem:after {
    content: 'AND';
}
.conditionItem .conditionFormWrap {
    padding: 0 10px;
}
.conditionItem .conditionForm {
    padding: 0 5px;
}
/* .conditionItem .conditionForm, */
.conditionItem .conditionForm * {
    white-space: nowrap;
}
.conditionItem .conditionForm .form-group {
    margin: 5px 0;
}
.workContentsWrap {
    margin-bottom: 10px;
    overflow: visible;
}
.workHead {
    position: relative;
    margin-bottom: 10px;
}
.ruleWorkItem h2 {
    padding: 10px 5px;
}
.ruleWorkItem h2 > i {
    color: #1b5eb4;
}
.workToggle {
    position: absolute;
    top: 50%;
    right: 10px;
    font-size: 24px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}
.workToggle:hover {
    color: #1b5eb4;
}
.workToggle.opened i:before {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}
.workContents {
    padding: 10px;
}
.workContents textarea {
    resize: vertical;
}
.workContents textarea.receiverInput,
.workContents textarea.serverAddrTextarea {
    min-height: 40px;
}
.workContents textarea.serverAddrTextarea,
.workContents .tokenfield {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

.receiverContainer .tokenfield,
.deviceContainer .tokenfield {
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}
.workContents textarea.mailTextTextarea,
.workContents textarea.alarmTextTextarea,
.workContents textarea.headerTextarea,
.workContents textarea.bodyParamTextarea {
    min-height: 100px;
}
.deviceNameCell.rowHead {
    width: unset;
}
.keyValList {
    background-color: #fff;
    padding: 5px;
    border:1px solid #E7EBEC;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}
.keyValItem {
    position: relative;
    padding: 5px;
    padding-right: 40px;
    border-bottom: 1px solid #ebebeb;
}
.keyValItem:last-child {
    border: 0;
}
.keyValItem:after {
    content: '';
    display: block;
    clear: both;
}
.keyValItem > div {
    padding: 0;
}
.keyValItem > div:first-child {
    border-right: 1px solid #ebebeb;
    border-bottom: 0;
}
.keyValItem input {
    width: 100%;
    padding: 8px 5px;
    border: 0px;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
}
.keyValItem input:focus {
    outline: 0;
    box-shadow: 0 -1px 0 #80bdff inset;
    box-sizing: border-box;
}
.keyValItem input::placeholder {
    color: #b4b4b4;
}
.keyValItem .keyData {
    font-weight: 500;
}
.removeKeyVal {
    position: absolute;
    display: none;
    top: 50%;
    right: 10px;
    opacity: 0.3;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transition: opacity 0.2s ease-in-out;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
}
.keyValItem:hover .removeKeyVal {
    display: block;
}
.removeKeyVal:hover {
    opacity: 1;
    color: #ff4500;
}
.bodyParamTab .nav-tabs {
    border-bottom: 1px solid #ddd !important;
}
.bodyParamTab .nav-tabs > li {
    margin-bottom: -2px;
    /* margin-right: -1px; */
}
.bodyParamTab .nav-tabs > li > a {
    font-size: 14px;
    padding: 10px 20px 8px;
    border: 1px solid #E7EBEC !important;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.bodyParamTab .nav-tabs > li.active > a {
    background: #fafafa !important;
    border: 1px solid #E7EBEC !important;
    border-bottom: transparent !important;
    padding: 10px 20px;
    box-shadow: 0 3px 0 #678dff inset;
}
.bodyParamTab .nav-tabs li a {
    background: #f5f5f5;
    border-bottom: 1px solid #E7EBEC !important;
}
.bodyParamTab .nav-tabs li a:hover {
    background: #eee;
}
.bodyParamTab + .tab-content > .tab-pane.active {
    background: transparent;
}
.bodyParamTab + .tab-content > .tab-pane {
    box-shadow: unset;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
.smsTextTextarea,
.mailTextTextarea {
    resize: vertical;
    min-height: 100px;
    overflow: auto;
    font-family: inherit;
}
/* IoT rule end */
.choiceTitle {
    display: inline-block;
    margin: 10px 0;
}
.choiceTitle:before {
    content: '\F316';
    font-family: 'Material Design Icons';
    color: #1b5eb4;
    margin-right: 5px;
}
.choiceInfo {
    /* display: inline-block; */
    padding: 0 5px;
    margin-top: 10px;
}
.choiceName {
    display: inline-block;
    margin-right: 10px;
    color: #000;
    font-size: 16px;
}
.choiceName:before {
    content: '\F12C';
    font-family: 'Material Design Icons';
    color: #1b5eb4;
    margin-right: 5px;
}
/*404 에러페이지*/
.section-content-wrapper {
    margin: 5% auto;
    max-width: 700px;
    text-align: left;
}

.section-content-wrapper .errorPage {
    font-size: 15rem;
    color: #333;
    float:left;
}
.statusMsg {
    font-size: 15rem;
    line-height: 1;
    font-weight: 600;
}
.statusMsg + h1 {
    font-size: 6rem;
    font-weight: 900;
}
.error-bar {
    background: #1b5eb4;
    margin-top: 3rem;
    margin-bottom: 3rem;
    width: 5rem;
    height: .25rem;
}

/*404 에러페이지*/
.section-content-wrapper {
    margin: 5% auto;
    max-width: 700px;
    text-align: left;
}

.section-content-wrapper .errorPage {
    font-size: 15rem;
    color: #333;
    float:left;
}
.statusMsg {
    font-size: 15rem;
    line-height: 1;
    font-weight: 600;
}
.statusMsg + h1 {
    font-size: 6rem;
    font-weight: 900;
}
.error-bar {
    background: #1b5eb4;
    margin-top: 3rem;
    margin-bottom: 3rem;
    width: 5rem;
    height: .25rem;
}

.error-text {
    position: relative;
    max-width: 480px;
    font-size: 2.5rem;
    color: #606f7b;
    line-height: 1.5;
    font-weight: 300;
    position: relative;
    opacity: 0;
    -webkit-animation-name: errortext; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    animation-name: errortext;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
    z-index: 1;
}
.error-time {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: #333;
    float:left;
    padding-top: 30px;
}
.error-time h1 {
    font-size: 72px;
    font-weight: 900;
    text-transform: uppercase;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes errortext {
    0%   {opacity:0.0; left:200px;}
    100% {opacity:1; left:0;}
}

/* Standard syntax */
@keyframes errortext {
    0%   {opacity:0.0; left:200px;}
    100% {opacity:1; left:0;}
}

.errorPage button {
    width:130px;
    height: 50px;
    font-weight: 500;
}

.errorPage button i {
    font-size: 20px;
    padding-right: 3px;
}

.error-image-wrap,
.forbidden-image-wrap {
    float:right;
}

.error-image {
    position: relative;
    background-image: url('../images/404_main.png');
    background-repeat: no-repeat;
    width: 220px;
    height: 513px;
    z-index: 2;
}
.forbidden-image {
    position: relative;
    background-image: url('../images/403_main.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 220px;
    height: 513px;
    z-index: 2;
}
.error-content-wrapper {
    margin: 5% auto;
    max-width: 900px;
    text-align: left;
}

.error-time-image {
    float:right;
    margin-right: -100px;
}

.error-time-image img {
    float: right;
    position: relative;
    background-repeat: no-repeat;
    width: 500px;
    z-index: 2;
}

.error-sigh {
    left:90px;
    top:120px;
    width: 67px;
    height: 69px;
    position: relative;
    -webkit-animation-name: sigh; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    animation-name: sigh;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    opacity:0;
}

.error-time button {
    width: 130px;
    height: 50px;
    font-weight: 500;
    margin-top: 200px;
}

/*IoT 스케줄*/

.scheduleList {
    position: relative;
    height: 100%;
    overflow: auto;
    padding: 0;
    margin-top: 0;
}
.schedule_Item {
    padding: 0 10px;
}
.schedule_Item.in .scheduleDeviceName:after {
	content: '\f143';
}

.scheduleDeviceName:after {
    content: '\f140';
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px;
    font-size: 24px;
    line-height: 1;
}

.scheduleBox {
    margin: 5px 0;
    background-color: rgba(175,175,175,.2);
}

.scheduleBox > h3 {
    cursor: pointer;
}

.scheduleBox, .unitBox {
    position: relative;
    border: 1px solid rgba(216, 216, 216, 0.3);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 8px;
}

.scheduleThumb {
    position: relative;
    display: inline-block;
    width: 65px;
    height: 65px;
    text-align: center;
    /* float: unset; */
    margin-right: 3px;
    vertical-align: middle;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
}

.scheduleThumb img {
    width: 100%;
    height: 100%;
}

.scheduleThumb > img {
    position: absolute;
    vertical-align: middle;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #fff;
    z-index: 1;
}

.scheduleThumb + span {
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 75px);
    overflow: hidden;
    white-space: nowrap;
    word-break: keep-all;
    text-overflow: ellipsis;
    clear: both;
}

.scheduleDeviceName {
    margin-top: 4px;
}

.scheduleDeviceName:after {
    font-family: 'Material Design Icons';
}

.scheduleDeviceID {
    padding-left: 0;
    margin-top: 6px;
    float: left;
    color: #999;
    padding: 4px 5px 0 0;
    font-size: 12px;
}


.scheduleDeviceIdentifier {
    margin-top: 2px;
    float: left;
    max-width: 100%;
    font-size: 12px;
    color: #999;
}

.schedule-data:before {
    content: '\f18f';
    font-size: 14px;
    font-family: 'Material Design Icons';
    color: #1b5eb4;
    margin-right: 5px;
}

.schedule-label {
    width: 80px;
    font-size: 13px;
    float: left;
    display: block;
    font-weight: 400;
}
.schedule-label:before {
    content: '|';
    font-weight: 100;
    margin-right: 5px;
    color: #1b5eb4;
}
.schedule-data {
    display: inline-block;
    max-width: calc(100% - 80px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
}
.schedule-data > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.width75 {
    width: 75%;
    float: left;
}

.scheduleBody {
    height: calc(100% - 130px);
}

.scheduleSearch {
    padding: 0 10px;
}

.adminScheduleNameCell.rowHead {
    width: unset;
}

.adminScheduleItem {
    cursor: pointer;
}

.scheduleCodeContainer {
    position: relative;
    overflow: hidden;
    height: 794px;
    margin-bottom: 20px;
    z-index: 4;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.scheduleCodeContainer.fullscreenMode {
    position: fixed;
    width: 100%;
    height: 100% !important;
    top: 0;
    left: 0;
    z-index: 5000;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    -ms-border-radius:0;
    -o-border-radius:0;
}

.schedule_contents {
	position: absolute;
	top: 45px;
	right: -500px;
	width: 500px;
	height: calc(100% - 45px);
	background-color: rgba(255, 255, 255, 1);
	border-top: 1px solid rgba(175, 175, 175, 0.5);
	border-left: 1px solid rgba(97, 97, 97, 0.5);
	z-index: 1000;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	padding: 15px 10px;
}
.schedule_contents.in {
	right: 0px;
}
.schedule_contents_toggler {
	position: absolute;
	width: 15px;
	height: 45px;
	top: 17px;
	left: -16px;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
	text-align: center;
}

.schedule_contents:before,
.locationSidebar:before {
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: #08C; */
}
.schedule_contents:before {
	border-radius: 15px 0 0;
	-webkit-border-radius: 15px 0 0;
	-moz-border-radius: 15px 0 0;
	-ms-border-radius: 15px 0 0;
	-o-border-radius: 15px 0 0;
}

.schedule_contents_toggler:hover .nav_toggle_UI > path, 
.nav_toggle:hover .nav_toggle_UI > path {
		fill: #ba88ff !important;
		fill: #00a5e6  !important;
}

.locationSidebar_toggler svg {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
.locationSidebar_toggler {
    transform-origin: top left;
}
.locationSidebar_toggler, 
.schedule_contents_toggler {
    transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transition: all 0.15s ease-in-out;
    -webkit-transition: all 0.15s ease-in-out;
    -moz-transition: all 0.15s ease-in-out;
    -ms-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
}
.in .locationSidebar_toggler,
.in .schedule_contents_toggler {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}
.locationSidebar_toggler {
	transform-origin: top left;
}
.schedule_contents_toggler {
	transform-origin: top right;
}
.nav_toggle {
	position: absolute;
	top: 1px;
	left: -15px;
	height: 45px;
	width: 15px;
	cursor: pointer;
}
.nav_toggle_UI,
.nav_chevron {
	position: absolute;
	height: 45px;
	width: 15px;
	top: 0;
	right: 0;
}
.nav_chevron i {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -12px;
	margin-left: -7px;
}
.locationSidebar_toggler .nav_chevron i {
	margin-left: -10px;
}
.nav_toggle_UI > path {
    fill: #757171 !important;
		fill: #00a5e6 !important;
}
.nav_show {
	display: block;
}
.nav_hide {
	display: none;
}
.in .nav_show {
	display: none;
}
.in .nav_hide {
	display: block;
}

.locationSidebar {
	position: absolute;
	top: 0;
	left: -300px;
	width: 300px;
	height: 100%;
	background-color: rgba(0,0,0,0.75);
	border-right: 1px solid rgba(255,255,255,0.5);
	z-index: 1001;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	padding: 10px 0;
}
.locationSidebar.in{
	left: 0;
}
.in .locationSidebar_toggler,
.in .schedule_contents_toggler {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

.scheduleHeader {
    color: #76828E;
}

.scheduleHeader h2 {
    color: #76828E;
}
.scheduleName {
	padding-bottom: 10px;
    /*border-bottom: 1px solid rgba(128, 128, 128, 0.3);*/
}

.scheduleName i {
    color: #1b5eb4;
}

.scheduleUnitListContainer {
    display: none;
    background-color: #fff;
    margin-top: 10px;
    padding: 2px 10px;
    color: #666;
    border-radius: 5px;
}

.scheduleUnitList td {
    padding: 8px 10px 5px 10px;
}

.dashBox .scheduleUnitAction {
    float: left;
    line-height: 0.9;
}

.dashBox .scheduleUnitAction i {
    width: 16px;
    height: 16px;
    margin-right: 3px;
}

.dashBox .scheduleUnitAction i:before {
    font-size: 16px !important;
}

.dashBox .scheduleUnitAction.dataReciveSend i {
    width: 16px;
    height: 16px;
}
.dashBox .scheduleUnitAction.dataSend i:before,
.dashBox .scheduleUnitAction.dataRecive i:before {
    top: unset;
    left: unset;
    margin-left: unset;
    margin-top: unset;
}
.dashBox .scheduleUnitAction.dataReciveSend i:before,
.dashBox .scheduleUnitAction.dataReciveSend i:after {
    font-size: 11px !important;
}

.dashBox .scheduleUnitAction.dataReciveSend i:before {
    margin-top: -4px !important;
    margin-left: -1px !important;
}

.dashBox .scheduleUnitAction.dataReciveSend i:after {
    margin-top: -9px !important;
}

.scheduleUnitAction.dataSend > span:before, 
.scheduleUnitAction.dataSend > i:before, 
.scheduleUnitAction.dataRecive > span:before, 
.scheduleUnitAction.dataRecive > i:before {
    margin-left: 0;
}

th.scheduleUnitAction,
td.scheduleUnitAction {
    width: 1%;
    text-align: center;
    word-break: keep-all;
    white-space: nowrap;
}

.scheduleUnitAction > span,
.scheduleUnitAction > i {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.scheduleUnitAction > span:before,
.scheduleUnitAction > span:after,
.scheduleUnitAction > i:before,
.scheduleUnitAction > i:after {
    font-family: 'Material Design Icons';
    font-size: 20px !important;
    left: 0;
}

label .scheduleUnitAction > span:before,
label .scheduleUnitAction > span:after {
    line-height: 17px;
}

span.scheduleUnitAction {
    position: absolute;
    left: 20px;
    margin-right: 5px;
}

.scheduleUnitActionn > span:before,
.scheduleUnitAction > span:after {
    font-size: inherit;
}

.scheduleUnitItem {
    font-weight: 400;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    border-bottom: 1px solid rgba(146, 146, 146, 0.3)
}

.scheduleUnitItem:last-child {
    border: none;
}

.schedulePagenation {
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    z-index: 999;
}
.tablePagination {
    height: 50px;
    text-align: right ;
  }
.tablePagination .pagination {
    margin: 10px 0;
}
.schedulePagenation .pagination {
    margin: 12px 0 6px 0;
    font-size: 14px;
}

.scheduleUnitPagenation .pagination {
    margin: 5px 0 4px 0;
    font-size: 14px;
}

/*회원가입 UI변경*/
.introBG {
    position: relative;
    top: -125px;
    height: calc(100% + 125px);
    background-color: #ECF0F3;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.introBG:before {
    background-image: url(../images/introBG-before.png);
    background-size: 100%;
    position: fixed;
    left: -90px;
    top: -10px;
    content: "";
    width: 523px;
    height: 539px;
}
.introBG:after {
    background-image: url(../images/introBG-after.png);
    background-size: 100%;
    position: fixed;
    right: -80px;
    bottom: -80px;
    content: "";
    width: 448px;
    height: 501px;
}
.introBG .login .login-top {
    display: inline-block;
    background: #267DFF;
    width: 40%;
    max-width: 420px;
    padding-top: 130px;
}
.login .login-top > h1 > img {
    height: 50px;
    max-width: 100%;
}
.introBG .login .login-top:after {
    background-image: url(../images/loginboxBg.png);
    background-size: 100%;
    position: absolute;
    bottom: -50px;
    content: "";
    width: 284px;
    height: 317px;
}
.introBG .login {      
    min-width: 900px;
}
.registration-form h2,
.login .registration-form h1 {
    font-size: 29px;
    font-weight: 300;
    color: #bbcfe8;
}
.login .registration-form {
    float: right;
    width: 60%;
    height: 100%;
    padding: 90px 90px 80px 90px;
}
.login .registration-form .pad_20_0 {
    padding: 0 !important;
}
.login form:before {
    display: block;
    content: 'Member Login';
    font-size: 29px;
    font-weight: 300;
    margin-top: -4px;
    margin-bottom: 35px;
    color: #bbcfe8;
}
.introBG .form-control.material {
    border: 1px solid #E4E7EB;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 8px 15px 8px 15px;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
    height: 48px;
    background-image: unset !important;
}
.introBG .form-control.material:focus {
    outline: 1px solid #267DFF;
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
.introBG .btn-success {
    border: 1px solid #267DFF;
    height: 48px;
    color: #fff !important;
    background-color: #267DFF;
    background-image: linear-gradient(45deg, #fff 50%, transparent 50%);
    background-position: 100%;
    background-size: 400%;
    margin-left: 5px;
}
#agree_cont h3 {
    font-size: 16px;
}
#agree_cont .serviceDocsContainer h3 {
    font-size: 16px;
    padding: 10px 0;
}
#agree_cont .serviceDocs {
    font-size: 14px;
    margin-top: 0;
}
#agree_cont .serviceDocs h2 {
    font-size: 16px;
}
#agree_cont .checkbox, .radio {
    margin-top: 0;
}

.registration-form .btn {
    display: block;
    transition: background 300ms ease-in-out;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.registration-form .btn-primary {
    border: 1px solid #267DFF;
    height: 48px;
    color: #fff !important;
    background-color: #267DFF;
    background-image: linear-gradient(45deg, #fff 50%, transparent 50%);
    background-position: 100%;
    background-size: 400%;
}
.registration-form .btn-primary:hover {
    background-position: 0;
    color: #267DFF !important;
}
.registration-form .btn.btn-primary:focus,
.registration-form .btn.btn-primary:active:focus {
    background-color: #267DFF;
    border-color: #267DFF;
}
.join_form {
    padding-bottom: 15px;
}
.join_p {
    font-size: 13px;
}
.join_form .show-password,
.password_body .show-password {
    padding: 7px 5px 0 0;
}
/* 회원가입(introBG/registration-form) 비밀번호 입력란: 눈 아이콘 세로 중앙 정렬.
   .join_form 은 input + padding-bottom(15px) 구조 → 컨테이너 세로중앙(top:50%)이 input 중앙보다
   padding-bottom 의 절반만큼 아래로 치우친다. input 영역(컨테이너 높이 - padding-bottom)의 중앙에
   맞추기 위해 그만큼 위로 보정. join.vue body 는 loginBody 가 아니라 serviceLoginBody 를 붙이므로
   셀렉터를 .introBG .registration-form 으로 잡는다(loginBody 아님). */
.introBG .registration-form .join_form .passwordTools {
    top: 50%;
    bottom: auto;
    height: auto;
    transform: translateY(calc(-50% - 7.5px)); /* padding-bottom 15px 의 절반 보정 */
    display: flex;
    align-items: center;
}
.introBG .registration-form .join_form .show-password {
    padding: 0 5px 0 0;
    line-height: 1;
}
/* 비밀번호 재설정(/help/pw-inquiry/:token, role=U) 화면 보정.
   help.vue 는 role=U 일 때 introBG + registration-form 만 붙이고 loginType_* 클래스를 붙이지
   않는다(서비스 로그인 전용). 그 결과 두 가지 서비스 로그인 전용 스타일이 어긋난 채로 새어든다. */

/* ① .password_box:before(serviceLogin.css)는 모든 .password_box 에 mdi 글리프(\F7F4)를 깔지만
   width/left/top/color 등 절대배치는 .loginType_* 아래에서만 선언된다. role=U 에는 loginType 이
   없어 글리프가 인풋 위 흐름에 그대로 떠 깨진 박스로 보인다. 이 화면에선 좌측 장식 아이콘을 끈다. */
.introBG .registration-form .password_body .password_box::before {
    content: none;
}

/* ② 눈 아이콘 세로 중앙 정렬. .passwordTools 는 top:0 절대배치이고 input(material)이 더 높아
   상단에 치우친다. join_form 과 동일한 보정을 password_body 에도 적용한다. */
.introBG .registration-form .password_body .passwordTools {
    top: 50%;
    bottom: auto;
    height: auto;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}
.introBG .registration-form .password_body .show-password {
    padding: 0 5px 0 0;
    line-height: 1;
}
.join_form .password-background,
.password_body .password-background {
    top: -48px;
    margin-bottom: -48px;
    height: 48px;
}
/*아이디찾기*/
.introBG .password_body {
    padding-top: 30px;
    text-align: center;
}
.introBG .login .password_body p {
    margin: 20px auto;
}
.password_body p {
    margin: 0 auto 20px auto;
    text-align: center;
}
/*인증메일 재발송*/
/* .registration-form h2 {
    font-size: 25px;
    font-weight: 500;
    text-align: center;
} */
.registration-form .resend_body .pad_20_0 {
    text-align: center;
    padding: 15px 0 20px 0 !important;
}
button.btn:disabled:hover, button.btn:disabled {
    background-image: none;
    color: #fff !important;
}
.resend_body button {
    margin-top: 20px !important;
}
.resend_body .join_p {
    font-size: 13px;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes sigh {
    0%   {opacity:0.1; left:90px; top:120px;}
    100% {opacity:1; left:150px; top:140px;}
}

/* Standard syntax */
@keyframes sigh {
    0%   {opacity:0.1; left:90px; top:120px;}
    100% {opacity:1; left:150px; top:140px;}
}

.error-sweat{
    width: 15px;
    height: 25px;
    position: relative;
    opacity: 0;
    -webkit-animation-name: sweat; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    animation-name: sweat;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes sweat {
    0%   {opacity:0.4; left:125px; top:-20px;}
    100% {opacity:1; left:125px; top:10px;}
}

/* Standard syntax */
@keyframes sweat {
    0%   {opacity:0.4; left:125px; top:-20px;}
    100% {opacity:1; left:125px; top:10px;}
}

@media (max-width: 1600px){
    .client-cont .col-lg-5,
    .client-cont .col-lg-7 {
        float: inherit;
        width: 100%;
    }
}
@media (min-width:1200px) and (max-width:1600px) {
    .optionContainer .dataSetItem .dataSetItemHeader {
        width: 100%;
    }
    .optionContainer .dataSetItem .dataSetItemBody {
        width: 100%;
        padding-left: 38px;
    }
    .optionContainer .dataSetItem .deviceName {
        width: calc(100% - 76px);
    }
    .optionContainer .dataSetItem .unitSelect {
        width: calc(100% - 124px);
    }
}

@media (min-width:1200px) and (max-width:1360px) {
    .packageItem {
        width: 50% !important;
    }
}
@media (max-width: 1199px) {
    .locationGroupMap {
		min-height: 627px !important;
	}
    .applyToLocationWrap {
        min-height: 332px !important;
        height: calc(100vh - 576px) !important;
    }
    .locationGroupContextsModalContent {
        height: unset !important;
    }
    .locationGroupContextContainer {
        height: 300px !important;
    }
    .pad_R_0{
        padding-right: 15px !important;
    }

    .pad_L_5 {
        padding-left: 15px !important;
    }
    .pad_R_5{
        padding-right: 15px !important;
    }

    .mobileHide {
        display: none;
    }
    .onlyMobile {
        visibility: visible;
        display: unset;
        width: unset;
    }
    .onlyPC {
        visibility: collapse;
        display: inline-block;
        width: 0;
    }
    .pcHide {
        display: block;
    }
    .welcome {
        font-size: 32px;
        padding: 10px 15px 5px;
    }
    .serviceList {
        margin-top: 10px;
    }
    .serviceItem {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        cursor: pointer;
        text-align: left;
        overflow: hidden;
    }
    .serviceItem.placeholderList {
        width: 100%;
        text-align: center;
        overflow: visible;
        margin-top: 0;
    }
    .serviceItem .content-tools {
        top: 15px;
    }
    .serviceList .serviceThumb,
    .serviceList .serviceTitle,
    .serviceList .serviceCreate {
        float: left;
    }
    .serviceList .serviceThumb {
        width: 150px;
        height: 100%;
        font-size: 80px;
        line-height: 130px;
        border-bottom: 0px solid #dedede;
        border-right: 1px solid #dedede;
    }
    .serviceTitle {
        margin-top: 25px;
        width: calc(100% - 150px);
    }
    .serviceCreate {
        width: calc(100% - 150px);
    }
    .serviceItem.placeholderList .placeholderList-box,
    .serviceItem .content-box {
        height: 130px;
    }
    .serviceItem > .content-box.mar_M_15 {
        margin: 5px 0 !important;
    }
    .confirmShare {
        text-align: left;
        margin: 5px 15px;
        height: calc(100% - 10px);
    }
    .serviceTitle > * {
        vertical-align: top;
        /* white-space: normal; */
    }
    .serviceSummary {
        padding: 65px 10px 0;
    }
    .service_URL {
        width: 30%;
        float: left;
    }
    .serviceContent .service_URL {
        width: auto;
        float: none;
    }
    .serviceSummary p,
    .serviceItem .serviceSummary pre {
        height: 100%;
        width: 70%;
        padding-top: 0px;
        padding-left: 10px;
    }
   
    .sharer {
        left: 170px;
        top: 85px;
        background-color: transparent;
        font-weight: 300;
        color: inherit;
    }

    .blind .sharer {
        color: #fff;
        background-color: transparent;
    }

    .btn-confirmShare {
        margin-left: 23px;
    }
    .solutionName {
        display: block;
    }

    /* .solutionName .solutionTitle {
        float: left;
    } */

    /* .solutionSummary {
        float: left;
    } */
    .solutionSummary {
        width: calc(100% - 100px);
        min-height: 90px;
        margin: 0;
    }
    .solutionItem {
        overflow: hidden;
    }
    .floatUI {
        margin-top: 0 !important;
        position: relative;
    }
    .listThumb > img {
        object-fit: cover;
    }
    .fit-box {
        min-height: unset !important;
    }
    .size_toggler {
        display: none;
    }
    .contentInfoWrapper {
        border-right: 0;
        border-bottom: 1px dotted #e0e0e0;
        margin-bottom: 20px;
    }

    .form-margin{
        margin-right: 0;
    }

    select.form-control {
        background-position: 99% 8px;
    }
    .userTableContainer,
    .userDeviceContainer,
    .userChildContainer {
        /* max-height: 455px; */
        height: unset;
        /* overflow: auto; */
    }
    /* .content-box .col-lg-2 {
        padding-right: 15px;
        padding-left: 15px;
    }

    .content-box .col-lg-2:first-child{
        padding-left: 15px;
    } */
    .deviceSection {
        width: 100%;
    }
    .unitSection {
        left: calc(100% + 60px);
        width: calc(100% - 60px);
        left: 100%;
        width: 100%;
        z-index: 20;
        transition: left 0.3s ease-in-out;
        -webkit-transition: left 0.3s ease-in-out;
        -moz-transition: left 0.3s ease-in-out;
        -ms-transition: left 0.3s ease-in-out;
        -o-transition: left 0.3s ease-in-out;
    }
    .unitSection.in {
        left: 0;
    }
    .unitSectionToggler {
        display: block;
        position: absolute;
        content:'';
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        background-color: rgba(0,0,0,0);
        cursor: pointer;
        z-index: 21;
        border-radius: 100%;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        -ms-border-radius: 100%;
        -o-border-radius: 100%;
    }
    .unitSection.in .unitSectionToggler {
        background-color: rgba(0,0,0,0.6);
    }
    .unitSectionToggler i {
        position: absolute;
        color: #fff;
        top: 50%;
        left: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 24px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }
    .unitSection .unitListBox .unitList * {
        font-size: 95%;
    }
    .unitSection .unitListBox .unitList .unitComment {
        display: none;
    }
    .deviceSection .deviceThumb,
    .deviceSection .scheduleThumb {
        width: 30px;
        height: 30px;
    }
    .deviceHeader > .deviceName {
        width: calc(100% - 75px);
    }
    /* [신아키 이관 누락 복구] 모바일(≤1199px) deviceNameWrap 보정 — gov 기준 */
    .deviceHeader > .deviceNameWrap {
        width: calc(100% - 75px);
        line-height: 1.2;
    }
    .deviceHeader > .deviceNameWrap > .deviceName {
        font-size: 16px;
    }
    .deviceHeader > .deviceNameWrap > .deviceIdentifier {
        font-size: 12px;
    }
    .deviceSection .deviceHeader {
        height: 50px;
    }
    .deviceSection .deviceItemBox > .content-tools {
        top: 6px;
    }
    .solutionThumb {
        width: 30%;
        margin: 20px auto;
        text-align: center;
        float: none;
    }
    .confirmKey {
        text-align: left !important;
    }
    .referenceFromDeviceWrap,
    .applyToDeviceWrap,
    .iotRuleListContainer,
    .ruleWorkListContainer {
        max-height: 400px;
    }
    .locationGroupContext,
    .deviceContext,
    .locationGroupContextSelector,
    .deviceContextSelector,
    .locationGroupSelectorTools,
    .deviceSelectorTools {
        width: 100%;
        float: unset;
    }
    .locationGroupContextContainer.paging,
    .deviceContextContainer.paging {
        margin-bottom: 35px;
    }
    .locationGroupContextSelector,
    .deviceContextSelector {
        height: 100px;
    }
    .locationGroupSelectorTools > button,
    .deviceSelectorTools > button {
        transform: rotate(0);
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
    }
    .removeCondition {
        top: 15px;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
    }
    .modalPackageIcon {
        width: 94.66px;
        margin-left: 10px;
    }
    .modalPackageIntro {
        width: 100%;
    }
    .modalPackageTitle {
        padding-top: 20px;
        font-size: 20px;
    }
    .scheduleBody {
        height: calc(100% - 180px);
    }
    .cbp_tmtimeline > li .cbp_tmtime span:last-child {
        font-size: 1.5em;
    }
    .cbp_tmtimeline > li .cbp_tmtime span {
        text-align: left;
    }
    .dashBox .cbp_tmtimeline > li .cbp_tmtime span {
        text-align: right;
    }
}


@media (max-width:991px) {
    /* .licenseItem {
        width: 100%;
    } */
    .locationGroupMap {
		min-height: 320px !important;
	}
    .packageLabel {
        position: relative;
        bottom: 0;
    }
    .packageContentWrap {
        width: 100%;
        height: auto;
    }
    .packageDetail {
        padding-left: 0;
    }
    .packageLabel .switch {
        padding-right: 5px;
    }

    .errorPage {
        font-size: 8rem;
        margin: 0 auto;
        width:100%;
    }

    .errorPage p{
        font-size: 2.0rem;
        color: #606f7b;
        line-height: 1.5;
        font-weight: 300;
        margin: auto;
    }

    .error-bar{
        margin: 30px auto;
    }

    .section-content-wrapper {
        margin:0 auto;
        padding:0 10%;
        width: 100%;
        max-width: 100%;
        text-align: center;

    }

    .error-image-wrap,
    .forbidden-image-wrap {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .error-image {
        background-image: url('../images/404_main.png');
        background-repeat: no-repeat;
        width: 200px;
        height: 550px;
        margin: 0 auto;
    }
    .forbidden-image {
        background-image: url('../images/403_main.png');
        background-repeat: no-repeat;
        width: 300px;
        height: 550px;
        margin: 0 auto;
    }
    .loginStyle {
        width: 100%;
        padding-top: 80%;
    }
    .solutionThumb {
        width: 50%;
        margin: 10px auto 10px auto;
        text-align: center;
        float: none;
    }

    .error-content-wrapper{
        margin: 0 auto;
        padding: 0 10%;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .error-time {
        font-size: 48px;
        padding-top: 5%;
        margin: 0 auto;
        text-align: center;
        float: none;
    }

    .error-time-image {
        margin: 0 auto;
        width: 100%;
    }

    .error-time button {
        margin-top: 20px;
    }

    .error-time-image,
    .error-time-image img {
        width: 100%;
        padding-top: 10px;
        float: none;
    }

    .licenseList {
        grid-template-columns: repeat(1, 1fr);
    }
    .keyValItem > div:first-child {
        border-bottom: 1px dashed #ebebeb;
        border-right: 0;
    }
    .loginBody .login {
        min-width: 100%;
        height: 100%;
    }
    .loginBody .introBG .login .login-top {
        background: #267DFF;
        width: 100%;
        max-width: 100%;
        height: 80px;
        padding-top: 20px;
    }
    .loginBody .introBG .login .biggest-box {
        padding: 18px 0 0 0;
    }
    .login .content-box {
        height: 100%;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
    }
    .loginBody .login .login-form {
        float: right;
        width: 100%;
        height: 100%;
        padding: 25% 8% 5% 8%;
    }
    .loginBody .introBG:before,
    .loginBody .introBG:after,
    .loginBody .introBG .login .login-top:after {
        display: none;
    }
    .loginBody .introBG .btn-block {
        width: 100%;
    }
    .loginBody .introBG .btn-primary {
        margin-right: 0;
    }
    .loginBody .introBG .btn-success {
        margin-left: 0;
    }
    .loginBody .introBG .mar_M {
        margin-bottom: 0 !important;
    }
    .loginBody .loginFind {
        padding-top: 150px;
    }
    .loginBody .loginBottom a {
        font-size: 12px !important;
    }
    .loginBody .btn {
        font-size: 14px;
    }
    .loginBody .login .login-top > h1 > img {
        height: 50px;
    }
    /*회원가입*/
    .introBG .content-box {
        flex-direction: column;
    }
    .introBG .login {
        min-width: 100%;
        height: 100%;
    }
    .introBG .login .login-top {
        background: #267DFF;
        width: 100%;
        max-width: 100%;
        height: 80px;
        padding-top: 20px;
    }
    .introBG .login .biggest-box {
        padding: 15px 0 0 0;
    }
    .login .registration-form {
        float: inherit;
        width: 100%;
        height: 100%;
        padding: 10% 8% 5% 8%;
    }
    .introBG:before,
    .introBG:after,
    .introBG .login .login-top:after {
        display: none;
    }
    .introBG .btn-block {
        width: 100%;
    }
    .introBG .btn-primary {
        margin-right: 0;
    }
    .introBG .btn-success {
        margin-left: 0;
    }
    .introBG .mar_M {
        margin-bottom: 0 !important;
    }
    .loginFind {
        padding-top: 150px;
    }
    .loginBottom a {
        font-size: 12px !important;
    }
    .login .login-top > h1 > img {
        height: 50px;
    }
    .join_form {
        width: 100%;
    }
    .introBG .form-group {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .logo {
        display: inline-block !important;
    }
    .gn-menu-main .logo img,
    .simpleTopbar .logo img,
    .solutionLogo img {
        height: 32px;
    }
    /* .simpleTopProfile, */
    .simpleTopToolBox > a.topFullscreen {
        display: none;
    }
    .solutionItem {
        padding: 20px 0 0 0;
    }
    .solutionThumb {
        width: 60%;
        margin: 0px auto 0 auto;
        text-align: center;
        float: none;
    }
    .userMenu {
        text-align: right;
    }
}
@media (max-width: 767px) {
    .reaction {
		display: none;
	}
    .locationSidebar.in {
        left: 0;
    }
    .locationSidebar {
        left: -200px;
        width: 200px;
    }
    .gn-menu-main .logo {
        padding: 0 5px;
    }
    .simpleTopbar .logo {
        padding: 0 8px;
    }
    .welcome {
        display: none;
    }
    .serviceList {
        margin-top: 0;
    }
    .serviceInfo {
        display: none;
    }
    .serviceDocs {
        column-count: 1;
        column-gap: 0;
    }
    .serviceDocs:before {
        display: none;
    }
    .modal-full {
        width: calc(100% - 20px);
        margin-left: 10px;
    }
    .modal-big {
        width: inherit;
    }
    .navlist {
        display: none;
    }
    .navlist:first-child,
    .navlist:last-child {
        display: inline-block;
    }
    .nav-tabs > li {
        margin-right: 0;
    }
    .pagination li {
        display: inline !important;
    }
    .unitCountBox {
        display: none;
    }
    .cbp_tmtimeline:before {
        left: calc(5% + 26.5px);
        margin-top: 45px;
    }
    .cbp_tmtimeline > li .cbp_tmtime {
        display: inline;
        padding-right: 0;
        position: relative;
    }
    .cbp_tmtimeline > li .cbp_tmtime span {
        text-align: right;
    }
    .footer{
        line-height: 20px;
    }

    select.form-control {
        background-position: 98% 8px;
    }

    .col-count-2 {
        column-count: 1;
        word-break: inherit;
        text-align: inherit;
    }

    .col-count-3 {
        column-count: 1;
        word-break: inherit;
        text-align: inherit;
    }
    #driverTabNav.nav-tabs > li.active a,
    #driverTabNav.nav-tabs > li a {
        border: 1px solid #ddd !important;
    }
    #driverTabNav.nav-tabs > li.active a {
        background-color: #fff;
    }
    #driverTabNav.nav-tabs > li a {
        background-color: rgba(0,0,0,0.05);
    }
    .deviceDetail {
        height: auto;
    }
    /* [신아키 이관 누락 복구] 모바일(≤767px) — 카드 상세 높이 고정 해제 (gov 기준) */
    .deviceDetailInfo {
        height: auto;
    }
    .statusContainer:nth-child(2) {
        border-left: 0px;
    }
    .statusContainer:nth-child(2) h2 {
        border-top: 1px solid #eee;
        padding-top: 10px;
        margin-top: 5px !important;
    }
}

@media all and (max-width: 540px) {
    .viewDeviceModal.modal .deviceThumb {
        width: 100%;
    }
    
    .viewDeviceModal.modal .deviceDetail {
        width: 100%;
    }
    
    .sweet-alert {
        width: 100%;
        margin-left: -15px;
        margin-right: 0;
        left: 15px;
        right: 15px;
    }
    .viewFilterList > div {
        padding-top: 10px;
    }
    .list_container ul {
        text-align: center;
    }
    .btn-lg+.btn-lg {
        margin-left: 0px;
    }
    /* .pagination li.first,
    .pagination li.last {
        display: none !important ;
    } */

    .pad_0_10 {
        padding: 0px !important;
    }

    select.form-control {
        background-position: 97% 8px;
    }

    .client-box{
        height: 100%;
    }

    .client-title span{
        text-overflow:ellipsis;
        white-space:nowrap;
        word-wrap:normal;
        overflow:hidden;
    }
    .solutionThumb {
        width: 80%;
        float: none;
    }
    .solutionName {
        font-size: 18px;
        margin-bottom: 0;
    }
    .loginBottom .bar {
        margin: 0 3px;
    }
    .mediaInfo {
        width: 100%;
        text-align: center;
    }
    
}

@media (max-width: 570px) {
    .schedule_contents {
		width: calc(100% - 30px);
		right: calc(30px - 100%);
    }
    .serviceAlarmItemBody > * > *,
    .timelineMsgItem > * {
        display: block;
        width: 100% !important;
        padding: 3px 0;
        margin: 0;
    }
    .timelineMsgItem > span {
        padding: 0 0 3px 0;
        margin-bottom: 5px;
    }
    .timelineItem .goToDetail > a {
        font-size: 12px;
    }
    .timelineItem .goToDetail > a > i {
        display: inline-block;
    }
    .loginBody .login .login-form {
        float: right;
        width: 100%;
        height: 100%;
        padding: 25% 8% 5% 8%;
    }
    .optionContainer .dataSetItem .dataSetItemHeader {
        width: 100%;
    }
    .optionContainer .dataSetItem .dataSetItemBody {
        width: 100%;
        padding-left: 38px;
    }
    .optionContainer .dataSetItem .deviceName {
        width: calc(100% - 76px);
    }
    .optionContainer .dataSetItem .unitSelect {
        width: calc(100% - 124px);
    }
}

@media (max-width: 435px) {
    body {
        padding-top: 112px;
    }
    .gn-menu-main .logo img, .simpleTopbar .logo img, .solutionLogo img {
        height: 28px;
    }
    h2,
    .dashTitle {
        font-size: 16px;
    }
    .btn,
    .sweet-alert button,
    .sweet-alert p {
        font-size: 12px;
    }
    .navbar-right.right-menu {
        position: fixed;
        top: 0;
        right: 0;
    }
    .subTopbar {
        padding: 0 15px;
        height: 56px;
    }
    .subTopbar > .pageNav > .navlist {
        font-size: 15px;
    }
    .subTopbar > .pageNav > .navlist > i {
        font-size: 24px;
    }
    .login .content-box {
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
    }
    .registration-form,
    .login .login-form {
        padding: 30px;
    }
    .originDeviceItem {
        padding: 0;
    }
    .originDeviceItem .content-tools {
        right: 10px;
    }
    .tooltipContent {
        width: calc(100% - 50px);
        left: 0;
        right: 0;
        margin-top: 25px;
    }
    .subTopbar > .pageNav > .back {
        font-size: 24px;
        width: 56px;
        line-height: 56px;
    }

    .content-tools > a {
        position: relative;
        width: 30px;
        height: 30px;
        top: -5px;
        right: 0;
        margin-left: 2px;
        font-size: 20px;
        color: #fff;
        cursor: pointer;
        line-height: 30px;
        text-align: center;
    }
    .simpleTopProfile > span.UserName {
        display: none;
    }
    .dataSection .expand {
        display: none;
    }
    .loginBottom .bar {
        margin: 0;
    }
    .login .login-top > h1 > img {
        height: 40px;
        margin-top: 10px;
    }
    .login .registration-form {
        padding: 10% 8% 5% 8%;
    }
    .optionContainer .dataSetItem .dataSetItemBody {
        padding: 0;
    }
}

@media (max-width: 320px) {

}

@media (min-width: 1920px) and (min-height: 1081px) {
    .solutionThumb {
        height: 280px;
    }
}

html[lang="vn"] body,
html[lang="vn"] .blocklyText,
html[lang="vn"] .blocklyTreeLabel,
html[lang="vn"] .blocklySvg text,
html[lang="vn"] .blocklyBlockDragSurface text,
html[lang="vn"] .gm-style,
html[lang="vn"] .gm-style-iw-d,
html[lang="vn"] .ag-root-wrapper,
html[lang="vn"] .ag-theme-alpine-dark .ag-root-wrapper,
html[lang="vn"] .gm-style-mtc > div,
html[lang="vn"] .gm-style-mtc > div > * {
    font-family: "Segoe UI", sans-serif !important;
}



/* 로그인페이지 다국어 대응 추가 */

.loginBottom-multilingual{
    display: block;
    margin-bottom: 10px;
}
.loginBottom-multilingual:last-child {
    margin-bottom: 0;
}
.loginBottom .loginBottom-multilingual a:hover {
    font-weight: 300; 
}
.joinBody .loginBottom {
    border: 1px solid #D7E9FF;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
.joinBody .loginBottom a {
    color: #3E496A;
}
.joinBody .loginBottom a:hover {
    font-weight: 300;
    color: #267DFF;
    text-decoration: none;
}
.joinBody .loginBottom span {
    color: #D7E9FF;
}