
/* Drivers Menu Page - Custom Controller -- START ********************************************************************/
.driverContainer{
	overflow: hidden;
    /* display: flex; */
	width: 100%;
	padding-top: 5px;
	font-size: 20px;
	text-align: center;
	/* border: solid 1px rgb(251, 3, 3); */
}
.driverInfoBox {
	position: relative;
    display:inline-block;   
	/* float: left; */
	width: 222px;
	height: 146px;
	padding: 5px 0px;
	margin-top: -3px;
	margin-right: -1px;
	/* height: 100px; */
	border: solid 1px #fff;
}
.driverInfoBox:hover .driverPinEditButton {
	display: block;
}
.driverInfoCol1 {
	float: left;
	width: 75px;
	padding-right: 5px;
	text-align: right;
	color: rgb(0, 234, 255);
	/* border: solid 1px rgb(255, 0, 0); */

}
.driverInfoCol2 {
	float: left;
	width: 145px;
	text-align: left;
	/* border: solid 1px rgb(2, 225, 255); */
	
}
.driverName {
	font-size: 13px;
}
.driverNameEdit {
	width: 130px;
	font-size: 13px;
}
.driverLabel {
	font-size: 22px;
	font-weight: bold;
	text-align: center;
}
.driverSettingBox {
	width: 100%;
	height: 25px;
	/* padding: 10px; */
	margin-bottom: 10px;
	/* border: solid 1px #0020ff; */
}
.driverRadioOption {
	margin-right: 12px;
	float: left;
	font-size: 17px;
	/* font-size: 25px;
	color: #000000; */
}
.boardSelectLabel {
	float: left;
	margin-right: 11px;
	font-size: 17px;
	color: #686767;
	/* border: solid 1px #0020ff; */
}
.driverPinEditButton {
	display: none;
	position: absolute;
	width: 50px;
	left: 165px;
	text-align: right;
	top: 2px;
	color: #FF0000;
	font-size: 12px;
	/* border: solid 1px #0020ff; */
}
.driverPinEditButton:hover {
	cursor: pointer;
}
.driverPinEditButton2 {
	/* display: none; */
	position: absolute;
	width: 50px;
	left: 165px;
	text-align: right;
	top: 2px;
	color: #FF0000;
	font-size: 12px;
	/* border: solid 1px #0020ff; */
}
.driverPinEditButton2:hover {
	cursor: pointer;
}
.editIconDriver {
	color: #FF0000;
}
.editIconDriver:hover {
	cursor: pointer;
}
/* Drivers Menu Page - Custom Controller -- END **********************************************************************/

/* Drivers Menu Page - Robo-Tank -- START ********************************************************************/

.driverConfigurePort:hover {
	cursor: pointer;
	/* border: solid 1px #ec0000; */

}
.driversControllerContainer {
	display: flex;
	width: 100%;
	overflow: hidden;
	/* border: solid 1px #ec0000; */
}
.driversControllerBox {
	display: flex;
	float: left;
	/* width: auto; */
	flex: 0 0 635px;
	height: auto;
	/* height: 480px; */
	margin-left: 10px;
	text-align: center;
	/* object-fit: cover;   */
	/* border: solid 1px #ffffff; */
}
.driversControllerMapIconBox {
    float: left;
	width: 140px;
    height: auto;
	/* text-align: center; */
	/* width: 600px; */
	/* 499px */
	/* height: auto;   */
	/* padding-right: 20px; */
	margin-top: 75px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-right: solid 1px #686767;
	/* border-top: solid 1px #686767;
	border-bottom: solid 1px #686767; */
	/* border: solid 1px #0026ff; */
}
.driversControllerMapIcons {
	text-align: center;
	float: left;
	width: 100%;
	max-width: 122px;
	/* 499px */
	/* height: auto;   */
	/* margin-top: 10px; */
    /* padding: 10px; */
	/* border: solid 1px #ff0000; */
	border-bottom: solid 1px #686767;
}
.driversControllerMapIcon {
	text-align: left;
	float: left;
	/* width: 600px; */
	/* 499px */
	/* height: auto;   */
	margin-top: 10px;
	margin-bottom: 10px;
    padding: 10px;
	/* border: solid 1px #ff0000; */
}
.driversControllerMapIcon:hover {
	cursor: pointer;
}
.driversControllerMap {
	/* float: right; */
	display: inline-block;
	align-self: flex-end;
	/* justify-content: center; */
	justify-content: right;
    max-width: 100%;
    height: auto;
	/* height: 100%; */
	text-align: right;
	/* float: right; */
	vertical-align: middle;
	/* width: 600px; */
	/* 499px */
	/* height: auto;   */
	/* border: solid 1px #0020ff; */
}
.driversControllerInfoBox {
	/* float: left; */
	flex: 1;
	display: inline-block;
	align-self: center;
	justify-content: center;
	padding-top: 40px;
	text-align: center;
	/* width: 400px; */
	/* border: solid 1px #ffffff; */
}
.driversEditDB9Box {
	/* width: 100%; */
	/* width: 340px; */
	/* display: flex; */
	/* height: 200px; */
	margin-top: 15px;
	/* margin-left: 30px; */
	/* margin-right: 10px; */
	padding: 6px;

	border: solid 1px #686767;
}
.driversEditDB9Rows {
	display: flex;
	/* height: 200px; */
	margin-top: 3px;
	/* margin-left: 30px; */
	/* margin-right: 10px; */
	/* border: solid 1px #0020ff; */
}
.driverDB9Name {
	float: left;
	flex: 0 0 95px;
	margin-top: 5px;
	margin-right: 10px;
	font-size: 15px;
	text-align: right;
}
.driverDB9icon {
	/* border: solid 1px rgb(19, 185, 88); */
    width: 27px;
    margin-left: 6px;
	background-color: #00b610;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}
.driverDB9icon:hover {
    /* margin-left: 20px; */
    /* width: 50px; */
    cursor: pointer;
}
.driverDB9pinFunction {
	float: left;
	/* width: 85%; */
	/* flex: 1; */
	flex: 0 0 0px;
	direction: rtl;  /* open select box to left side */
	max-width: 22px;
	height: 28px;
	font-size: 16px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-left: 6px;
	border: 1px solid rgb(129, 128, 128);
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-sizing: border-box;
	background-color: rgb(255, 255, 255);
}
.driverDB9pinFunction:focus {
    outline: none;
}
#db9PinTable {
	margin-top: 6px;
}
.driverDB9tableHeader {
	margin-bottom: 10px;
	height: 35px;
	margin-left: -6px;
	margin-right: -6px;
	padding-right: 12px;
	font-size: 20px;
	border-bottom: 1px solid rgb(129, 128, 128);
	font-weight: bold;
	text-align: center;
}
.driverDB9pinName {
	float: left;
	width: 100%;
	/* flex: 1; */
	/* flex: 0 0 0px; */
	/* max-width: 122px; */
	height: 28px;
	font-size: 16px;
	padding:  2px 0px 2px 5px;
	margin-left: 6px;
	border: 1px solid rgb(129, 128, 128);
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-sizing: border-box;
	background-color: rgb(255, 255, 255);
}
.driverDB9pinName:focus {
    outline: none;
}
.driversControllerEditBox {
	/* width: 100%; */
	/* width: 340px; */
	display: flex;
	/* height: 200px; */
	margin-top: 10px;
	/* margin-left: 30px; */
	margin-right: 10px;
	/* border: solid 1px #0020ff; */
}
.driverControllerEditCol1 {
	float: left;
	width: 130px;
	padding-right: 5px;
	text-align: right;
	color: rgb(0, 234, 255);
	/* border: solid 1px #0020ff; */

}
.driverControllerEditCol2 {
	float: left;
	width: 200px;
	text-align: left;
	/* border: solid 1px #0020ff; */

}
.driverControllerName {
	float: left;
	flex: 0 0 95px;
	margin-top: 5px;
	margin-right: 10px;
	font-size: 18px;
	text-align: right;
}
.driverControllerField {
	float: left;
	/* width: 85%; */
	flex: 1;
	height: 30px;
	font-size: 16px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 6px;
	border: 1px solid rgb(129, 128, 128);
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-sizing: border-box;
	background-color: rgb(255, 255, 255);
}
.driverControllerField:focus {
    outline: none;
}
.driversControllerPort {
	margin-bottom: 25px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	/* border: 1px solid rgb(129, 128, 128); */
}
.driversControllerPortInfo {
	padding-left: 6px;
	font-size: 14px;
	font-weight: normal;
}
#portIcon {
	display: table;
	justify-content: center;
	width: 84px;
	height: 84px;
	margin-bottom: 30px;
	text-align: center;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
}
#portIcon:hover {
	cursor: pointer;
}
.updatePortIcons {
	margin: 4px;
	background-color: #444444;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    transition-duration: .5s;
}
.updatePortIcons:hover {
	background-color: #707070;
    transition-duration: .5s;
	cursor: pointer;
}
@media (max-width: 1023px) {
	.driversControllerContainer {
		display: block;
	}
	.driversControllerBox {
		width: 635px;
		/* min-width: 635px; */
	}
	.driversControllerInfoBox {
		width: 100%;
		padding-top: 10px;
	}
}
@media (max-width: 700px) {
	.driversControllerBox {
		display: inline;
		width: auto;
	}
	.driversControllerMapIconBox {
		display: flex;
		float: left;
		width: 100%;
		height: auto;
		text-align: center;
		margin-top: 0px;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-right: none;
		border-bottom: solid 1px #686767;
		/* border: solid 1px #0026ff; */
	}
	.driversControllerMapIcons {
		/* position: relative; */
		text-align: center;
		/* float: left; */
		width: 0px;
		overflow: hidden;
		/* min-width: 379px; */
		/* max-width: 122px; */
		/* 499px */
		/* height: auto;   */
		/* margin-top: 10px; */
		/* padding: 10px; */
		/* border: solid 1px #ff0000; */
		/* border-bottom: solid 1px #686767; */
	}
	.driversControllerMapIcon {
		display: inline-block;
		align-self: flex-end;
		justify-content: center;
		text-align: left;
		width: 100px;
		height: auto;  
		margin-top: 0px;
		margin-left: 10px;
		margin-right: 10px;
		padding: 10px;
		/* border: solid 1px #ff0000; */
	}
	.driversControllerMap {
		display: inline;
		/* align-self: flex-end;
		justify-content: center; */
		float: left;
		flex: 1;
		width: 100%;
		height: auto;
		text-align: center;
	}
}
@media (max-width: 400px) {
	.driversControllerMapIconBox {
		margin-left: -15px;
	}
}
/* Drivers Menu Page - Robo-Tank -- END **********************************************************************/