.device {
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr 30px;
	min-height: 0;
}

.device .tabs {
	min-height: 22px;
	border-top: 1px solid #aaaaaa;
	border-bottom: 1px solid #aaaaaa;
	padding-top: 1px;
	padding-bottom: 1px;
}

.device .tab {
	display: inline-block;
	/* width: 40px; */
	text-align: center;
	line-height: 21px;
	font-size: 13px;
	margin-left: 5px;
	margin-right: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.device .tab.unselected {
	/* background: #f0f0f0; */
	cursor: pointer;
}

.device .tab.unselected:hover {
	background: #dddddd;
	cursor: pointer;
}

.device .tab.selected {
	/* background: #f0f0f0; */
	cursor: pointer;
	border-bottom: 2px solid #2163a6;
}

.device .tab.selected:hover {
	cursor: pointer;
}

.device .model-content {
    overflow: auto;
    min-height: 0;
}

.device .ctls {
    display: flex;
    justify-content: center;
    border-top: 1px solid #aaaaaa;
}

#footer-note {
    font-size: smaller;
}

.device .ctls button {
    height: 18px;
    font-size: 12px;
    margin: 5px;
}

.device .model {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	padding-bottom: 5px;
	overflow: auto;
}

.device .model.unselected {display: none;}

.device .model.selected {display: grid;}

.device .group {
    font-size: 12px;
}

.device .group .header {
	display: grid;
	grid-template-columns: 20px 330px 130px 130px 80px 80px 50px 1fr 40px;
	grid-auto-rows: auto;
	margin-bottom: 2px;
	/* background: rgb(226, 238, 248); */
	background: #f0f0f0;
}

.cvalue-container {
	display: flex;
	align-items: center;
	gap: 4px;
}

.cvalue-icon {
	display: none;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}

.cvalue-icon.visible {
	display: inline-flex;
}

.cvalue-icon img {
	width: 16px;
	height: 16px;
}

.info-cell {
	display: flex;
	align-items: center;
	justify-content: center;
}

.info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.info-icon img {
	width: 16px;
	height: 16px;
}

.device .group .header .label {
    padding-top: 3px;
}

.device .group .ctl {
	margin: 0px;
	height: 20px;
	width: 20px;
}

.device .group .ctl.closed {
	background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve"><g id="XMLID_1_"><polygon id="XMLID_3_" points="34.3,20.5 61.8,48 34.3,75.5 	"/></g></svg>');
}

.device .group .ctl.open {
	background-image: url('data:image/svg+xml;utf8,<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve"><g id="XMLID_1_"><polygon id="XMLID_3_" points="20.5,34.2 48,61.8 75.5,34.2 	"/></g></svg>');
}

.device .group .label {
	display: inline;
	margin: 0px;
}

.device .group .entries.closed {display: none;}

.device .group .entries.open {display: grid;}

.device .group .point {
	display: grid;
	grid-template-columns: 350px 130px 130px 80px 80px 50px 1fr 40px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-bottom: 1px solid #cccccc;
}

.device .group .point .label {
	margin: 0;
	text-align: left;
}

.device .group .point .label .text {
	display: inline-block;
}

.device .group .point .label .name {
	display: inline-block;
	padding-left: 8px;
	color: rgb(40, 108, 164);
	/* color: rgba(38, 103, 156); */
	/* color: rgb(41, 111, 168); */
	/* color: rgb(34, 92, 140); */
}

.device .group .point .value {
	padding-left: 10px;
	overflow-wrap: break-word;
}

.device .group .point.unimpl .value {
	color: #888888;
}

.device .group .point .value.rw {
	padding-left: 2px;
}

.device .group .point .value.rw input {
    height: 15px;
    padding: 5px;
    width: 80px;
    font-size: 12px;
}

.device .group .point .value.rw input.dirty {
    background-color: #d5f1b3;
}

.device .group .point .cvalue {
	color: rgb(40, 108, 164);
}

.device .group .point .mbaddr {
	padding-left: 10px;
	text-align: right;
	color: #007000;
}

.device .group .point .mbvalue {
    padding-left: 10px;
	font-family:'Courier New';
}