/* CSS Document */


.wizardPopup {  /* full screen */
	display: none; /* Hidden by default */
	position: fixed;
	resize: horizontal;
	/* position: fixed; Stay in place */
	z-index: 4000000; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	/* overflow: auto; Enable scroll if needed */
	/* background-color: rgb(0,0,0); /* Fallback color */
	/* background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.wizardPopup-box {
	position: relative;
	background-color: #fefefe;
	margin: 200px auto;
	padding: 0;
	/* border: 1px solid #888; */
    width: 80%;
    max-width: 1000px;
    height: 60%;
    overflow-y: auto;
	-webkit-box-shadow: 4px 4px 10px 10px #b2b2b2;
	-moz-box-shadow: 4px 4px 4px 0px #b2b2b2;
	box-shadow: 6px 6px 6px 0px #b2b2b2a8;
	animation-name: animatetop;
	animation-duration: 1.0s;
	border-radius: 20px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	/* border: 5px solid rgb(255, 0, 0); */
}
.wizardPopupHeader {  
	padding: 8px 16px;
	background:-webkit-linear-gradient(127deg, rgb(40, 0, 255) 0%, rgb(0, 32, 255) 26%, rgb(0, 80, 255) 71%);
	background:-o-linear-gradient(127deg, rgb(40, 0, 255) 0%, rgb(0, 32, 255) 26%, rgb(0, 80, 255) 71%);
	background:-moz-linear-gradient(127deg, rgb(40, 0, 255) 0%, rgb(0, 32, 255) 26%, rgb(0, 80, 255) 71%);
	background:linear-gradient(127deg, rgb(40, 0, 255) 0%, rgb(0, 32, 255) 26%, rgb(0, 80, 255) 71%);
	color: white;
	font-size: 15px;
	/* border-radius-top: 20px;
	-moz-border-radius: 20px;
    -webkit-border-radius: 20px; */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
	/* font-weight: bold; */
  }  
.wizardPopup-body {
    /* padding: 2px 16px; */
    height: auto;
    width: 100%;
    /* margin-bottom: -24px; */
	/* border: 1px solid rgb(255, 0, 0); */
}

#wizardQuitButton {
    /* position: absolute; */
    /* float: right; */
    width: 220px;
    height: 30px;
    margin-right: 10px;
    margin-bottom: 15px;
    position: absolute;
    bottom: 0%;
    right: 0%;
	/* border: 1px solid rgb(255, 0, 0); */
}
#wizardBackButton {
    /* position: absolute; */
    /* float: right; */
    width: 220px;
    height: 30px;
    margin-left: 10px;
    margin-bottom: 15px;
    position: absolute;
    bottom: 0%;
    left: 0%;
	/* border: 1px solid rgb(255, 0, 0); */
}

#wizardTitle {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 30px;
}
.wizardMenuBox {
    /* border: 1px solid rgb(0, 255, 21); */
    width: 100%;
    height: 80px;
}
#wizardMenuPic {
    float: left;
    margin-left: 20px;
    margin-right: 15px;
    width: 60px;  /* adjust image size */
    height: 80px;
    /* border: 1px solid rgb(255, 0, 0); */
}
#wizardMenuPic img {
    width: 100%;
    height: auto;
}
#wizardMenuPic:hover {
	cursor: pointer;
    /* width: 70px;  adjust image size
	transition-duration: .7s; */
}
#wizardMenuLabel {
    float: left;
    margin: 0 auto;
    padding: 0;
    line-height: 60px;
    /* width: auto;  */
    /* overflow-wrap: anywhere; */
    height: 80px;
    font-size: 16px;
    font-weight: bold;
    /* border: 1px solid rgb(0, 47, 255); */
}
#wizardMenuLabel:hover {
    color: rgb(0, 32, 255);
	cursor: pointer;
}
.wizardOptionsIconsBox {
    /* border: 1px solid rgb(0, 130, 134); */
    margin-left: 15%;
    margin-right: 5%;
    width: 80%;
    /* height: auto; */
}
.wizardOptionsIcons {
    /* margin-top: 30px; */
    float: left;
    /* border: 1px solid rgb(255, 0, 0); */
    width: 50%;
}

@media (max-width: 768px) {

    .wizardOptionsIcons {
        /* margin-top: 20px; */
        /* float: left; */
        /* border: 1px solid rgb(255, 0, 0); */
        width: 100%;
    }
    .wizardPopup-box {
        width: 100%;
    }
}
.newPCA9685diagram {
    width: 40%;
    float: right;
    /* border: 1px solid rgb(255, 0, 0); */
}
.newPCA9685pins {
    border: 1px solid rgb(17, 0, 255);

}
#newPCA9685error {
	color: red;
	width: 60%;
	/* border: solid 1px rgb(19, 185, 88); */
    text-align: center;
    margin-top: 10px;
	/* margin-left: 22%; */
}
.newPCA9685icon {
	/* border: solid 1px rgb(19, 185, 88); */
    width: 11px;
    margin-left: 6px;
}
.newPCA9685icon:hover {
    /* margin-left: 20px; */
    /* width: 50px; */
    cursor: pointer;
}
.editPCA9685icon {
	/* border: solid 1px rgb(19, 185, 88); */
    width: 14px;
    margin-left: 6px;
	background-color: #444444;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	transition-duration: 1s;
}
.editPCA9685icon:hover {
    /* margin-left: 20px; */
	transition-duration: 1s;
    width: 84px;
    cursor: pointer;
}
.tg-name {
    margin:-3px -8px;
    border: none;
    border-width: 0px;
    /* background-color:#fffc9e; */
    background-color:#e6e6e6;
    vertical-align: middle;
}
.tg-enable {
    /* margin-left: 20px; */
    text-align: center;
    width: 100%;
    vertical-align: middle;
}
.tg-enable:hover {
    /* margin-left: 20px; */
    cursor: pointer;
}

.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:3px 8px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:3px 8px;word-break:normal;}
/* .tg .tg-z0iz{background-color:#fffc9e;text-align:left;vertical-align:middle} */
.tg .tg-z0iz{background-color:#e6e6e6;text-align:left;vertical-align:middle}
.tg .tg-km22 {
    padding:7px 0;
    /* background-color:#34cdf9; */
	background:-webkit-linear-gradient(127deg, rgb(40, 0, 255) 0%, rgb(0, 32, 255) 26%, rgb(0, 80, 255) 71%);
	background:-o-linear-gradient(127deg, rgb(40, 0, 255) 0%, rgb(0, 32, 255) 26%, rgb(0, 80, 255) 71%);
	background:-moz-linear-gradient(127deg, rgb(40, 0, 255) 0%, rgb(0, 32, 255) 26%, rgb(0, 80, 255) 71%);
	background:linear-gradient(127deg, rgb(40, 0, 255) 0%, rgb(0, 32, 255) 26%, rgb(0, 80, 255) 71%);
    border-color:inherit;
    color: #FFF;
    font-size:16px;
    /* font-weight:bold; */
    position:-webkit-sticky;
    position:sticky;
    text-align:center;
    top:-1px;
    vertical-align:middle;
    will-change:transform;
}
.tg .tg-6e8n{background-color:#ffffff;border-color:inherit;font-weight:bold;text-align:left;vertical-align:middle}
.tg .tg-0pky {
    padding: 0 10px;
    font-size:12px;
    border-color:inherit;
    text-align:left;
    vertical-align:middle;
    background-color:#e6e6e6;
}
.tg-sort-header::-moz-selection{background:0 0}
.tg-sort-header::selection{background:0 0}.tg-sort-header{cursor:pointer}
.tg-sort-header:after{content:'';float:right;margin-top:7px;border-width:0 5px 5px;border-style:solid;
  border-color:#404040 transparent;visibility:hidden}
.tg-sort-header:hover:after{visibility:visible}
.tg-sort-asc:after,.tg-sort-asc:hover:after,.tg-sort-desc:after{visibility:visible;opacity:.4}
.tg-sort-desc:after{border-bottom:none;border-width:5px 5px 0}
@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}}


/* Update -- START **********************************************************************/
.updateRoller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}
.updateRoller div {
    animation: updateRoller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}
.updateRoller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(2, 38, 240);
    margin: -4px 0 0 -4px;
}
.updateRoller div:nth-child(1) {
    animation-delay: -0.036s;
}
.updateRoller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}
.updateRoller div:nth-child(2) {
    animation-delay: -0.072s;
}
.updateRoller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}
.updateRoller div:nth-child(3) {
    animation-delay: -0.108s;
}
.updateRoller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}
.updateRoller div:nth-child(4) {
    animation-delay: -0.144s;
}
.updateRoller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}
.updateRoller div:nth-child(5) {
    animation-delay: -0.18s;
}
.updateRoller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}
.updateRoller div:nth-child(6) {
    animation-delay: -0.216s;
}
.updateRoller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}
.updateRoller div:nth-child(7) {
    animation-delay: -0.252s;
}
.updateRoller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}
.updateRoller div:nth-child(8) {
    animation-delay: -0.288s;
}
.updateRoller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}
@keyframes updateRoller {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
}
  /* Update -- END ************************************************************************/

  
  /* Support Page -- START ************************************************************************/
.optionGroup {
	/* border: 1px solid rgb(255, 0, 0); */
	max-width: 200px;
	width: 100%;
	margin: auto;
	padding-bottom: 20px;
}
.subColumnBox {
	/* border: 1px solid rgb(0, 47, 255); */
	/* height: 100%; */
	max-width: 850px;
}
.subColumn {
	min-height: 232px;
	min-width: 210px;
	width: 100%;
	margin: auto;
	margin-bottom: 30px;
	padding-top: 17px;
	padding-bottom: 17px;
	/* display: flex; */
	/* margin: 20px; */
	float: left;
	/* justify-content: center; */
	/* align-items: center; */
	text-align: center;
	border: 1px solid rgb(189, 189, 189);
}
.supportLink:hover {
    cursor: pointer;
    color: #00FF00;
}
/* Support Page -- END **************************************************************************/