@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
	background: rgb(17, 18, 23);
	/*min-width: 1903px;*/
}
.add-cancle-button:hover{
	cursor: pointer;
}
.token-set-button{
	background:rgb(218 236 249);
	color: black;
	font-weight: bold;
}
.token-set-button:hover{	
	cursor:pointer;
	background:rgb(143, 176, 202);
}

.systemManagement-container {
	position: relative;
	width: 98%;
	border: 1px solid rgb(204, 204, 220, 0.65);
	height: 90%;
	margin: 0 auto;
	background: #454648;
}
.add-column-button:hover{
	cursor: pointer;
	background: #a6a6a6;
	border: 1px solid #a6a6a6;
}
.delete-column-button{
	font-size: 20px;
    font-weight: bold;
}
.delete-column-button:hover{
	cursor: pointer;
	background: #a6a6a6;
	border: 1px solid #a6a6a6;
}
.result-box {
	top: 1px;
	width: 1870px;
	height: 780px;
	background: white;
	position: relative;
	border: 1px solid rgb(52, 58, 66);
	position: relative;
}

.node-search{
	position: relative;
	width: 100%;
	color: white;
	font-size: 18px;
	height: 50px;
	border-top: 2px solid red;
	background: rgb(0, 120, 215);
	line-height: 50px;
	font-weight: bold;
	top: 2px;
	display: flex;
	flex-direction: row;
}

.data-table > .table-column {
	position: sticky;
	background: #e7e8e9;
	top: 49px;
	z-index:2;
	height: 45px;
	font-weight: bold;
}
.consumer-info > .table-column {
	position: sticky;
	background: #e7e8e9;
	top: 49px;
	z-index:2;
	height: 45px;
	font-weight: bold;
}

.node-search>input {
	position: relative;
	border: 1px solid rgb(176, 213, 214);
	width: 200px;
	height: 25px;
}

.node-search>div:nth-child(1) {
	position: relative;
	left: 10px;
}

.node-search>div:nth-child(2) {
	position: relative;
	left: 30px;
}

.node-search>div:nth-child(3) {
	position: relative;
	left: 45px;
}

.city-select {
	position: relative;
	border: 1px solid rgb(176, 213, 214);
	width: 200px;
	height: 30px;
	text-align: center;
	top: -2px;
}

.gu-select {
	position: relative;
	border: 1px solid rgb(176, 213, 214);
	width: 200px;
	height: 30px;
	text-align: center;
	top: -2px;
}

.intersection-select {
	position: relative;
	border: 1px solid rgb(176, 213, 214);
	width: 250px;
	height: 30px;
	top: -2px;
	text-align: center;
}

.table-box {
	position: relative;
	width: 1815px;
	height: 670px;
	margin: 10px auto;
	border: 2px solid rgb(0, 120, 215);
	border-radius: 5px 5px 5px 5px;
	background: white;
	padding: 18px;
	overflow: auto;
}
.data-table-box{
	position: relative;
	width: 100%;
	overflow: auto;
	margin: 0 auto;
	height: 100%;
}
.consumer-box1{
	position: relative;
	width: 1815px;
	height: 340px;
	margin: 10px auto;
	border: 2px solid rgb(0, 120, 215);
	border-radius: 5px 5px 5px 5px;
	background: white;
	overflow: auto;
	padding: 18px;
}
.consumer-box2{
	position: relative;
	display: none;
	width: 1815px;
	height: 279px;
	margin: 10px auto;
	border: 2px solid rgb(0, 120, 215);
	border-radius: 5px 5px 5px 5px;
	background: white;
	overflow: auto;
	padding: 18px;
}
.table-title2{
	height: 50px;
	background: rgb(143, 176, 202);
	color: white;
	font-size: 18px;
	font-weight: bold;
	position: sticky;
	top: -20px;
	z-index:2;
}
.table-column2{
	position: sticky;
	background: #e7e8e9;
	top: 30px;
	z-index:2;
}
.systemManagement-container {
	display: flex;
	flex-direction: column;
	border: 1px solid rgb(204, 204, 220, 0.65);
	position: relative;
	width: 1872px;
	height: 833px;
	margin: 0 auto;
	background: rgb(70, 71, 73);
}

.systemManagement-container>div:nth-child(1) {
	display: flex;
	flex-direction: row;
	position: relative;
	width: 750px;
	height: 50px;
}

.consumer-search-button:hover {
	cursor: pointer;
	background: url('/image/Btn_Search_Hover.png');
	background-repeat: no-repeat;
	background-position: 50%;
}

.consumer-search-button {
	position: relative;
	left: 70px;
	background: url('/image/Btn_Search_Nomal.png');
	background-repeat: no-repeat;
	width: 110px;
	height: 40px;
	top: 5px;
}

.search-button:hover {
	cursor: pointer;
	background: url('/image/Btn_Search_Hover.png');
	background-repeat: no-repeat;
	background-position: 50%;
}

.search-button {
	position: relative;
	left: 80px;
	background: url('/image/Btn_Search_Nomal.png');
	background-repeat: no-repeat;
	width: 110px;
	height: 40px;
	top: 5px;
}

.manager-on {
	background: rgba(113, 113, 117, 0.65);
	position: relative;
	width: 248px;
	top: 2px;
	height: 46px;
	font-size: 20px;
	font-weight: bold;
	color: white;
	text-align: center;
	line-height: 50px;
	border-top: 3px solid red;
	border-left: 1px solid rgb(16, 29, 216);
	border-right: 1px solid rgb(16, 29, 216);
	border-bottom: 1px solid rgb(16, 29, 216);
}

.manager-on:hover {
	cursor: pointer;
}

.manager-off {
	background: white;
	position: relative;
	width: 248px;
	top: 2px;
	height: 46px;
	font-size: 20px;
	font-weight: bold;
	color: rgb(139, 136, 136);
	text-align: center;
	line-height: 48px;
	border-top: 3px solid rgb(250, 213, 6);
	border-left: 1px solid rgb(16, 29, 216);
	border-right: 1px solid rgb(16, 29, 216);
	border-bottom: 1px solid rgb(16, 29, 216);
}

.manager-off:hover {
	cursor: pointer;
	background: rgba(113, 113, 117, 0.65);
	position: relative;
	width: 248px;
	top: 2px;
	height: 46px;
	font-size: 20px;
	font-weight: bold;
	color: white;
	text-align: center;
	line-height: 50px;
	border-top: 3px solid red;
	border-left: 1px solid rgb(16, 29, 216);
	border-right: 1px solid rgb(16, 29, 216);
	border-bottom: 1px solid rgb(16, 29, 216);
}

.add-button {
	position: relative;
	width: 108px;
	color:#706f6f; 
	left: 122px;
	top: 6px;
	height: 36px;
	line-height: 36px;
	border: 1px solid #eeeeee;
	background: white;
	text-align: center;
}
.excel-button{
	position: relative;
	width: 108px;
	color:#706f6f; 
	left: 101px;
	top: 6px;
	height: 36px;
	line-height: 36px;
	border: 1px solid #eeeeee;
	background: white;
	text-align: center;
}
.cancle-button{
	position: relative;
	width: 108px;
	color:#706f6f;
	left: 101px;
	top: 6px;
	height: 36px;
	line-height: 36px;
	border: 1px solid #eeeeee;
	background: white;
	text-align: center;
	display: none;
}
.cancle-button:hover{
	cursor: pointer;
	background: rgb(0, 120, 215);
	color: white;
	border-color: white;
}
.add-button:hover,.excel-button:hover {
	cursor: pointer;
	background: rgb(0, 120, 215);
	color: white;
	border-color: white;
}
.update-button {
	position: relative;
	width: 108px;
	color:#706f6f;
	left: 143px;
	top: 6px;
	height: 36px;
	line-height: 36px;
	border: 1px solid #eeeeee;
	background: #f7f7f6;;
	text-align: center;
}

.update-button:hover {
	cursor: pointer;
	background: rgb(0, 120, 215);
	color: white;
	border-color: white;
}

.alarm-update-button,
.alarm-cancel-button,
.alarm-save-button {
	position: relative;
	width: 108px;
	color:#706f6f;
	top: 6px;
	height: 36px;
	line-height: 36px;
	border: 1px solid #eeeeee;
	background: #f7f7f6;
	text-align: center;
	
}
.alarm-update-button{
	left:-195px;
}
.alarm-cancel-button{
	left:-85px;
	display: none;
}
.alarm-save-button{
	left:-70px;
	display: none;
}
.alarm-update-button:hover,
.alarm-cancel-button:hover,
.alarm-save-button:hover {
	cursor: pointer;
	background: rgb(0, 120, 215);
	color: white;
	border-color: white;
}


.delete-button {
	position: relative;
	width: 108px;
	color:#706f6f;
	left: 164px;
	top: 6px;
	text-align: center;
	height: 36px;
	line-height: 36px;
	border: 1px solid #eeeeee;
	background: white;
}

.delete-button:hover {
	cursor: pointer;
	background: rgb(0, 120, 215);
	color: white;
	border-color: white;
}

.save-button {
	position: relative;
	width: 108px;
	color:#706f6f;
	display: none;
	top:6px;
	height: 36px;
	line-height: 36px;
	border: 1px solid #eeeeee;
	left: 125px;
	background: white;
	text-align: center;
}

.save-button:hover {
	cursor: pointer;
	background: rgb(0, 120, 215);
	color: white;
	border-color: white;
}

.consumer-cancle-button,
.consumer-save-button,
.consumer-add-button,
.consumer-update-button,
.consumer-delete-button{
	position: relative;
	width: 108px;
	color:#706f6f;
	top: 6px;
	height: 36px;
	line-height: 36px;
	border: 1px solid #eeeeee;
	background: white;
	text-align: center;
}
.consumer-add-button {
	left: 132px;
}
.consumer-delete-button{
	left: 190px;
}
.consumer-update-button{
	left: 161px;
}
.consumer-cancle-button{
	display: none;
	left: 90px;
}
.consumer-save-button{
	display: none;
	left: 115px;
}
.consumer-save-button:hover,
.consumer-add-button:hover,
.consumer-update-button:hover,
.consumer-delete-button:hover,
.consumer-cancle-button:hover {
	cursor: pointer;
	background: rgb(0, 120, 215);
	color: white;
	border-color: white;
}

.button-box {
	display: flex;
	position: relative;
	width: 100%;
	line-height: 90px;
	justify-content: center;
	height: 90px;
}

.data-table {
	text-align: center;
	border-collapse: collapse;
	position: relative;
	border: 1px solid rgb(204, 204, 220, 0.65);
	width: 100%;
}
.token-td{
	max-width:220px;
	word-break:break-all;
}
.token-td:hover{
	cursor: pointer;
}
.data-table>tr, th, td {
	text-align: center;
	border: 1px solid rgb(204, 204, 220, 0.65);
}

.data-table > tr:hover{
	background: rgb(231 232 233);
}

.data-table>tr {
	height: 30px;
}

.delete-all {
	position: relative;
	left: 698px;
	height: 75%;
	width: 110px;
	font-size: 18px;
	font-weight: bold;
	color: #8c8787;
	background: #f9f9f9;
	border: 1px solid #f9f9f9;
	cursor: pointer;
}

.delete-all:hover {
	background: #989090;
	border: 1px solid #989090;
	color: white;
}

.delete-cancle {
	position: relative;
	height: 75%;
	width: 110px;
	left: 708px;
	font-size: 18px;
	font-weight: bold;
	color: #8c8787;
	background: #f9f9f9;
	border: 1px solid #f9f9f9;
	cursor: pointer;
}

.delete-cancle:hover {
	background: #989090;
	border: 1px solid #989090;
	color: white;
}

.consumer-search{
	display: none;
	position: relative;
	width: 100%;
	color: white;
	font-size: 18px;
	height: 50px;
	border-top: 2px solid red;
	background: rgb(0, 120, 215);
	line-height: 50px;
	font-weight: bold;
	top: 2px;
	flex-direction: row;
}
.alarm-search{
	display: none;
	position: relative;
	width: 100%;
	color: white;
	font-size: 18px;
	height: 50px;
	border-top: 2px solid red;
	background: rgb(0, 120, 215);
	line-height: 50px;
	font-weight: bold;
	top: 2px;
	flex-direction: row;
	justify-content: flex-end;
}

.consumer-search>div:nth-child(1) {
	position: relative;
	left: 50px;
}

.consumer-search>div:nth-child(1)>input {
	position: relative;
	top: -3px;
	width: 400px;
	padding: 10px;
	border: 1px solid rgb(176, 213, 214);
	height: 6px;
	font-size: 15px;
	color: black;
}

.api-token-search {
	display: none;
	position: relative;
	width: 100%;
	color: white;
	font-size: 18px;
	height: 50px;
	border-top: 2px solid red;
	background: rgb(0, 120, 215);
	line-height: 50px;
	font-weight: bold;
	top: 2px;
	flex-direction: row;
}
.consumer-info{
	border-collapse: collapse;
	position: relative;
	width: 100%;
	border: 1px solid rgb(204, 204, 220, 0.65); 
	text-align: center;
}
.consumer-info-section{
	width: 200px;
	background: #eeeeee;
}
.consumer-info-input{
	width: 400px;
	background: #eeeeee;
}
.consumer-info > tr > td > input{
	position: relative;
	width: 97%;
	border: 1px solid white;
	text-align: center;
	height: 94%;
}
.consumer-info > tr > td > select{
	position: relative;
	width: 98%;
	border: 1px solid white;
	text-align: center;
	height: 90%;
}
.consumer-info > tr > td{
	height: 26px;
	font-size: 14px;
}
.data-table > tr > td{
	font-size: 14px;
}
.data-table > tr > td > input{
	text-align: center;
	border: 1px solid white;
}
.data-table > tr > td > select{
	text-align: center;
	border: 1px solid white;
	width: 100px;
}
.consumer-info >tbody > tr > td > select{
	position: relative;
	width: 98%;
	border: 1px solid white;
	text-align: center;
}
.config-table{
	display: none;
    border-collapse: collapse;
	position: relative;
	width: 732px;
    left: 10px;
	border: 1px solid rgb(204, 204, 220, 0.65); 
	text-align: center;
	float: left;
	height: 279px;
	table-layout: fixed;
}
.update-table{
	border-collapse: collapse;
	position: relative;
	width: 1070px;
  	height: 279px;
  	margin: 0 auto;
	border: 1px solid rgb(204, 204, 220, 0.65); 
	text-align: center;
	float: left;
	table-layout: fixed;
}
.update-table > tr,td {
  border: 1px solid rgb(204, 204, 220, 0.65);
}
.config-table > tr,td {
  border: 1px solid rgb(204, 204, 220, 0.65);
}


.update-table > tbody > tr > td > input,select{
  width: 97%;
  height: 90%;
  border: 1px solid white;
  text-align: center;
}
.table-title {
	height: 50px;
	background: rgb(143, 176, 202);
	color: white;
	font-size: 18px;
	font-weight: bold;
	position: sticky;
	top: -1px;
	z-index:2;
}
.switch {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 34px;
  vertical-align:middle;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(67px);
  -ms-transform: translateX(67px);
  transform: translateX(67px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}