:host {
	display: block;
	margin-bottom: 7px;
	min-width: 550px;
	max-width: 700px;
	width: 95%;
	height: 225px;
}


.container {
	background-color: #FFFFFF;
	border: 1px dashed #CCCCCC;
	border-radius: 7px;
	box-sizing: border-box;
	display: flex;
	height: 100%;
	position: relative;
	width: calc(100% - 60px);
}

.header {
	align-items: center;
	border-radius: 7px 0 0 7px;
	background-color: #02688C;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	position: relative;
	width: 40px;
}

.table-icon {
	cursor: pointer;
	height: 15px;
	width: 20px;
	top: 17px;
}

.header-line {
	box-sizing: border-box;
	height: 1px;
	width: 22px;
	border-top: 1px solid #FFFFFF;
	opacity: 0.48;
	position: relative;
	top: 2px;
}

.h-name {
	display: flex;
	height: 22px;
	justify-content: center;
	width: 145px;
	color: #FFFFFF;
	font-family: Roboto;
	font-size: 16px;
	font-weight: bold;
	line-height: 22px;
}

.body {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	padding: 5px;
	width: calc(100% - 40px);
}

.ctrl-hdr {
	color: #555555;
	font-family: Roboto;
	font-size: 12px;
	font-weight: 500;
	line-height: 15px;
	padding: 1px 0px;
	width: 125px;
}

.control-grp {
	height: 70px;
}

.control-grp,
.control-pwm1,
.control-pwm2 {
	display: flex;
}

.control {
	margin: 0;
	padding: 3px 6px;
}

.slider {
	margin-right: 15px;
	width: 335px;
}

.toggle {
	width: 150px;
}

.toggle>ti-widget-custom-toggle::shadow .ctrl-hdr,
.toggle>ti-widget-custom-toggle::shadow .ctrl-cnt {
	width: auto !important;
}

.fet-terminal1 {
	position: absolute;
	left: 100%;
	top: 36px;
}

.fet-terminal2 {
	position: absolute;
	left: 100%;
	top: 148px;
}

.fet-connection1 {
	position: absolute;
	left: calc(100% + 5px);
	top: 42px;
}

.fet-connection2 {
	position: absolute;
	left: calc(100% + 5px);
	top: 154px;
}

.motor-cnt-branch {
	position: absolute;
	left: calc(100% + 15px);
	top: 37px;
}

.motor-cnt-branch1 {
	position: absolute;
	left: calc(100% + 15px);
	top: 56px;
}

.motor-cnt-branch2 {
	position: absolute;
	left: calc(100% + 15px);
	top: 59px;
}

.motor-cnt-branch3 {
	position: absolute;
	left: calc(100% + 15px);
	top: 112px;
}

.motor-cnt-branch4 {
	position: absolute;
	left: calc(100% + 15px);
	top: 149px;
}

.inpt-2-1-3 {
	align-items: center;
	display: flex;
	height: 40px;
	width: 100%;
}

.disabled {
	cursor: not-allowed !important;
	color: rgba(128, 128, 128, 0.3) !important;
}

.disabled * {
	cursor: not-allowed !important;
	color: rgba(128, 128, 128, 0.3) !important;
}

.opacity-05 {
	opacity: 0.5;
}

.rad {
	display: flex;
	width: 100%;
}

.rad>.hdr {
	color: #555555;
	font-family: Roboto;
	font-size: 11px;
	font-weight: 500;
	line-height: 14px;
	margin-right: 10px;
}

.rad>.val {
	display: flex;
}

.rad>.val>.cir {
	background-color: #FFFFFF;
	border: 1px solid #98999B;
	border-radius: 50%;
	cursor: pointer;
	height: 14px;
	margin-right: 5px;
	position: relative;
	top: -1px;
	width: 14px;
}

.rad>.val>.cir.active {
	border: 4px solid #02688C;
	border-radius: 50%;
	height: 14px;
	width: 14px;

}

.rad>.val>.disp {
	color: #555555;
	font-family: Roboto;
	font-size: 11px;
	line-height: 14px;
	margin-right: 5px;
}

.radio {
	width: 200px;
}