/* general */
body { background-color:#a3a3c2; }
input[type="radio"], input[type="checkbox" i] { width:20px; height:20px;}
span.titleNo, span.dataNo {display: -webkit-flex !important; display:flex !important;}
hr {border:1px dashed;}
#msgAction td {color:red;}
.center {text-align:center;}
.left {text-align:left;}
.right {text-align:right;}
.required {
    font-size:12px;
    color:red;
    padding-right:5px;
}
.sk {
    width:25%;
    height:25px;
    border:1px solid #cccccc;
}
.note {color:red;}
.btn {
    padding: 2px 10px;
    margin-right: 2px;
    color: #ffffff;
    background: #2980B9;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    border-radius: 3px;
}
.btn a {color:#ffffff;}
.more {
    padding: 10px 0 0 0;
    color: #2980b9;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}
.more::after {
    content: "▼";
    width: 100%;
    height: auto;
    display: block;
}
.sortable {
    margin:0px;
    padding:0px;
    list-style:none;
}
.sortable li:first-child {
    background: #333;
    color: #ccc;
}
.sortable li {
    margin-bottom:1px;
    background:#e6f2ff;
    line-height:25px;
	padding: 10px;
    display:none;
}
.sortable li:after {
    content:'';
    display:block;
    clear:both;
}
.links {width:60%;}
.linksTable {width:90%;}
.linksTable th {
    width:8%;
    text-align:right;
}
.linksTable td {
    width:92%;
    text-align:left;
}
.statusOn {color:#00b300;}
.statusOff {color:#ff0000;}
/* index */
#loginZone {
    margin:0px;
    width:100%; height:auto;
    text-align:center;
}
#loginZone h1.title {color: #fff; font-size: 36px; margin: 15px 0;text-shadow: 0 0 1px #401a2059;}
#loginTable {
    margin:0px;
    width:25%;
	height:auto;
    color:#0000ff;
    padding: 30px 15px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 10px #0000004d;
}
#loginTable td { padding:10px;}
#loginTable td input { padding:10px;width: 100%;}
#loginTable td input[name="submit"] {border-radius: 50px;
    background: #F44336;
    color: #fff;
    cursor: pointer;}
#loginTable td .btn-a {text-align: center;
    margin: 10px auto 0;
    display: block;}

#errorMsg {
    padding:10px 0px 0px 0px;
    color:#cc0000;
    font-size:8px;
}
#signupZone {
    margin:0px; padding:120px 0px 0px 0px;
    width:100%; height:auto;
}
#signupTable {
    margin:0px; padding:5px;
    width:40%; height:auto;
    border:3px solid #dddddd;
}
#signupTable th.title {
    font:bold 16px "新細明體","Times New Roman",Georgia,Arial,Verdana;
    color:#0000ff;
    text-align:center;
}
#signupTable th {
    width:25%;
    text-align:right;
}
#signupTable td {
    width:75%;
    padding-left:60px;
}
/* system setup - company */
/* form */
#companyZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
#companyZone div#title {
    font-weight:bold;
    font-size:20px;
    text-align:center;
    background:#99ccff;
}
#companyZone div.save {margin: 10px auto; text-align: center;}
#companyZone div.tr {
    width:100%;
    margin-bottom:2px;
	padding: 5px 0;
}
#companyZone div.tr::after {
    content: "";
    clear: both;
    display: table;
}
#companyZone div.tr div {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}
#companyZone span.th {
    width: auto;
}
#companyZone span.td {
    -webkit-flex: 1;
    flex: 1;
    margin-left: 10px;
}
#companyZone .removeImg { background: #fe0000;}
#companyZone span.td input[type="text"] {padding: 10px; width: 100%; }

#image-1 { width:30%; }
#companyTable th, #companyTable td { padding:10px;}

/* For mobile phones: */
@media only screen and (max-width: 360px) {
    #companyZone div.tr div { width:100%; }
    #companyZone span.th { width:25%; }
    #companyZone span.td { width:75%;margin-left:2px; }
    #image-1 { width:70%; }
}
/* system setup - lead schedule */
#businessLeadScheduleZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
#businessLeadScheduleZone li span {
    display:block;
    float:left;
}
#businessLeadScheduleZone span.titleNo, #businessLeadScheduleZone span.dataNo {
    width:5%;
}
#businessLeadScheduleZone span.titleName, #businessLeadScheduleZone span.dataName {
    width:15%;
}
#businessLeadScheduleZone span.titleStartdate, #businessLeadScheduleZone span.dataStartdate {
    width:10%;
}
#businessLeadScheduleZone span.titleEnddate, #businessLeadScheduleZone span.dataEnddate {
    width:10%;
}
#businessLeadScheduleZone span.titleFinish, #businessLeadScheduleZone span.dataFinish {
    width:52%;
}
#businessLeadScheduleZone span.titleStatus, #businessLeadScheduleZone span.dataStatus {
    width:4%;
}
#businessLeadScheduleZone span.titleMod, #businessLeadScheduleZone span.dataMod {
    width:4%;
}
/* form */
#businessLeadScheduleZone div#title {
    font-weight:bold;
    font-size:20px;
    text-align:center;
    background:#99ccff;
}
#businessLeadScheduleZone div.save {margin:10px 0px 10px 0px;}
#businessLeadScheduleZone div.tr {width:100%;margin-bottom:2px;}
#businessLeadScheduleZone div.tr::after {
    content: "";
    clear: both;
    display: table;
}
#businessLeadScheduleZone div.tr div {
    width:50%;
    float:left;
}
#businessLeadScheduleZone span.th {
    width:20%;
    text-align:right;
    display:inline-block;
}
#businessLeadScheduleZone span.td {
    width:80%;
    margin-left:10px;
}
/* For mobile phones: */
@media only screen and (max-width: 360px) {
    #businessLeadScheduleZone span.titleNo, #businessLeadScheduleZone span.dataNo { width:15%; }
    #businessLeadScheduleZone span.titleName, #businessLeadScheduleZone span.dataName { width:25%; }
    #businessLeadScheduleZone span.titleFinish, #businessLeadScheduleZone span.dataFinish { width:25%; }
    #businessLeadScheduleZone span.titleStatus, #businessLeadScheduleZone span.dataStatus { width:20% }
    #businessLeadScheduleZone span.titleMod, #businessLeadScheduleZone span.dataMod { width:15%; }
    #businessLeadScheduleZone span.titleStartdate, #businessLeadScheduleZone span.dataStartdate { display:none; }
    #businessLeadScheduleZone span.titleEnddate, #businessLeadScheduleZone span.dataEnddate { display:none; }
    #businessLeadScheduleZone div.tr div { width:100%; }
    #businessLeadScheduleZone span.th { width:25%; }
    #businessLeadScheduleZone span.td { width:75%;margin-left:2px; }
}
/* system setup - lead priority */
#leadPriorityZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
#leadPriorityZone span.titleNo, #leadPriorityZone span.dataNo {
    width:5%;
    display:block;
    float:left;
}
#leadPriorityZone span.titleName, #leadPriorityZone span.dataName {
    width:91%;
    display:block;
    float:left;
}
#leadPriorityZone span.titleMod, #leadPriorityZone span.dataMod {
    width:4%;
    display:block;
    float:left;
}
/* form */
#leadPriorityZone div#title {
    font-weight:bold;
    font-size:20px;
    text-align:center;
    background:#99ccff;
}
#leadPriorityZone div.save {margin:10px 0px 10px 0px;}
#leadPriorityZone div.tr {width:100%;margin-bottom:2px;}
#leadPriorityZone div.tr::after {
    content: "";
    clear: both;
    display: table;
}
#leadPriorityZone div.tr div {
    width:50%;
    float:left;
}
#leadPriorityZone span.th {
    width:20%;
    text-align:right;
    display:inline-block;
    vertical-align:top;
}
#leadPriorityZone span.td {
    width:30%;
    margin-left:10px;
    display:inline-block;
    vertical-align:top;
}
/* For mobile phones: */
@media only screen and (max-width: 360px) {
    #leadPriorityZone span.titleNo, #leadPriorityZone span.dataNo { width:15%; }
    #leadPriorityZone span.titleName, #leadPriorityZone span.dataName { width:70%; }
    #leadPriorityZone span.titleMod, #leadPriorityZone span.dataMod { width:15%; }
    #leadPriorityZone div.tr div { width:100%; }
    #leadPriorityZone span.th { width:25%; }
    #leadPriorityZone span.td { width:70%;margin-left:2px; }
}
/* business leads */
#businessleadsZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
#businessleadsZone li span {
    display:block;
    float:left;
}
#businessleadsZone span.titleNo, #businessleadsZone span.dataNo { width:5%; }
#businessleadsZone span.titlePriority, #businessleadsZone span.dataPriority { width:5%; }
#businessleadsZone span.titleName, #businessleadsZone span.dataName { width:22%; }
#businessleadsZone span.titleOrgan, #businessleadsZone span.dataOrgan { width:33%; }
#businessleadsZone span.titlePhone, #businessleadsZone span.dataPhone { width:27%; }
#businessleadsZone span.titleStatus, #businessleadsZone span.dataStatus { width:4%; }
#businessleadsZone span.titleMod, #businessleadsZone span.dataMod { width:4%; }
/* search */
#businessLeadEditBar { width:100%; }
#businessLeadSearchBar { width:100%; }
#businessLeadExportBar { width:25%; }
/* form */
#businessleadsZone div#title {
    font-weight:bold;
    font-size:20px;
    text-align:center;
    background:#99ccff;
}
#businessleadsZone div.save {margin:10px 0px 10px 0px;}
#businessleadsZone div.tr {width:100%;margin-bottom:2px;}
#businessleadsZone div.tr::after {
    content: "";
    clear: both;
    display: table;
}
#businessleadsZone div.tr div {
    width:50%;
    float:left;
}
#businessleadsZone span.th {
    width:20%;
    text-align:right;
    display:inline-block;
}
#businessleadsZone span.td {
    width:80%;
    margin-left:10px;
}
/* For mobile phones: */
@media only screen and (max-width: 360px) {
    #businessleadsZone span.titleNo, #businessleadsZone span.dataNo { width:15% }
    #businessleadsZone span.titlePriority, #businessleadsZone span.dataPriority { width:15% }
    #businessleadsZone span.titleName, #businessleadsZone span.dataName { width:20% }
    #businessleadsZone span.titleOrgan, #businessleadsZone span.dataOrgan { width:35% }
    #businessleadsZone span.titlePhone, #businessleadsZone span.dataPhone { display:none; }
    #businessleadsZone span.titleStatus, #businessleadsZone span.dataStatus { width:15% }
    #businessleadsZone span.titleMod, #businessleadsZone span.dataMod { width:15% }
    #businessleadsZone span.tilteSchedule, #businessleadsZone span.dataSchedule { width:15% }
    #businessleadsZone div.tr div { width:100%; }
    #businessleadsZone span.th { width:25%; }
    #businessleadsZone span.td { width:75%;margin-left:2px; }
}
/* business leads track */
#businessLeadsTrackZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
#businessLeadsTrackZone span {
    display:block;
    float:left;
}
#businessLeadsTrackZone span.titleNo, #businessLeadsTrackZone span.dataNo { width:5%; }
#businessLeadsTrackZone span.tileFile, #businessLeadsTrackZone span.dataFile { width:5%; }
#businessLeadsTrackZone span.titleQName, #businessLeadsTrackZone span.dataQName { width:9%; }
#businessLeadsTrackZone span.titleQuestion, #businessLeadsTrackZone span.dataQuestion { width:28%; }
#businessLeadsTrackZone span.titleAName, #businessLeadsTrackZone span.dataAName { width:9%; }
#businessLeadsTrackZone span.titleAnswer, #businessLeadsTrackZone span.dataAnswer { width:29%; }
#businessLeadsTrackZone span.titleDate, #businessLeadsTrackZone span.dataDate { width:10%; }
#businessLeadsTrackZone span.titleMod, #businessLeadsTrackZone span.dataMod { width:4%; }
#businessLeadsTrackZone hr {border-style: dashed;}
/* form */
#businessLeadsTrackZone div#title {
    font-weight:bold;
    font-size:20px;
    text-align:center;
    background:#99ccff;
}
#businessLeadsTrackZone div.save {margin:10px 0px 10px 0px;}
#businessLeadsTrackZone div.tr {width:100%;margin-bottom:2px;}
#businessLeadsTrackZone div.tr::after {
    content: "";
    clear: both;
    display: table;
}
#businessLeadsTrackZone div.tr div {
    width:100%;
    float:left;
}
#businessLeadsTrackZone span.th {
    width:10%;
    text-align:right;
    display:inline-block;
}
#businessLeadsTrackZone span.td {
    width:80%;
    margin-left:10px;
    display:inline-block;
    vertical-align:top;
}
#businessLeadsTrackZone span.td a {
    color:#1a1aff;
    text-decoration: none;
}
#businessLeadsTrackZone span.td a:hover, #leadsTrackZone span.td a:active { color:#ff3333; }
#businessLeadsTrackZone span.td textarea {width:60%;height:200px;}
#businessLeadsTrackZone span.td ul {margin:0px;padding:0px;list-style-type:decimal;}
#businessLeadsTrackZone span.td ul li {margin-left:20px;float:left;}
/* For mobile phones: */
@media only screen and (max-width: 360px) {
    #businessLeadsTrackZone span.titleNo, #businessLeadsTrackZone span.dataNo { width:15%; }
    #businessLeadsTrackZone span.titleQName, #businessLeadsTrackZone span.dataQName { width:40%; }
    #businessLeadsTrackZone span.titleQuestion, #businessLeadsTrackZone span.dataQuestion { display:none; }
    #businessLeadsTrackZone span.titleAName, #businessLeadsTrackZone span.dataAName { display:none; }
    #businessLeadsTrackZone span.titleAnswer, #businessLeadsTrackZone span.dataAnswer { display:none; }
    #businessLeadsTrackZone span.titleDate, #businessLeadsTrackZone span.dataDate { width:30%; }
    #businessLeadsTrackZone span.titleMod, #businessLeadsTrackZone span.dataMod { width:15%; }
    #businessLeadsTrackZone div.tr div { width:100%; }
    #businessLeadsTrackZone span.th { width:25%; }
    #businessLeadsTrackZone span.td { width:65%;margin-left:2px; }
    #businessLeadsTrackZone span.td textarea {width:100%;height:200px;}
}
/* leads */
#leadsZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
#leadsZone li span {
    display:block;
    float:left;
}
#leadsZone span.titleNo, #leadsZone span.dataNo { width:5%; }
#leadsZone span.titlePriority, #leadsZone span.dataPriority { width:5%; }
#leadsZone span.titleName, #leadsZone span.dataName { width:23%; }
#leadsZone span.titleOrgan, #leadsZone span.dataOrgan { width:32%; }
#leadsZone span.titlePhone, #leadsZone span.dataPhone { width:27%; }
#leadsZone span.titleStatus, #leadsZone span.dataStatus { width:4%; }
#leadsZone span.titleMod, #leadsZone span.dataMod { width:4%; }
#leadsZone span.tilteCopy, #leadsZone span.dataCopy { width:4%; }
#leadsTable > div { padding:5px 0;}
#leadsTable .upload input {
	width: 100%;
    background: #fff;
    padding: 10px;
    cursor: pointer;
}
#leadsTable .btn-box { margin: 10px auto; text-align: center;}
/* search */
#leadEditBar { width:100%; }
#leadSearchBar { width:100%; }
#leadExportBar { width:25%; }
/* form */
#leadsZone div#title {
    font-weight:bold;
    font-size:20px;
    text-align:center;
    background:#99ccff;
}
#leadsZone div.save {margin:10px 0px 10px 0px;}
#leadsZone div.tr {width:100%;margin-bottom:2px;}
#leadsZone div.tr::after {
    content: "";
    clear: both;
    display: table;
}
#leadsZone div.tr div {
    width:50%;
    float:left;
}
#leadsZone span.th {
    width:20%;
    text-align:right;
    display:inline-block;
}
#leadsZone span.td {
    width:80%;
    margin-left:10px;
}
/* For mobile phones: */
@media only screen and (max-width: 360px) {
    #leadsZone span.titleNo, #leadsZone span.dataNo { width:16%; }
    #leadsZone span.titlePriority, #leadsZone span.dataPriority { width:15%; }
    #leadsZone span.titleOrgan, #leadsZone span.dataOrgan { width:35%; }
    #leadsZone span.titleName, #leadsZone span.dataName { width:25%; }
    #leadsZone span.titlePhone, #leadsZone span.dataPhone { display:none; }
    #leadsZone span.titleMod, #leadsZone span.dataMod { width:15%; }
    #leadsZone span.tilteCopy, #leadsZone span.dataCopy { width:15%; }
    #leadsZone span.tilteSchedule, #leadsZone span.dataSchedule { width:15%; }
    #leadsZone div.tr div { width:100%; }
    #leadsZone span.th { width:25%; }
    #leadsZone span.td { width:75%;margin-left:2px; }
}
/* lead schedule */
#leadScheduleZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
#leadScheduleZone li span {
    display:block;
    float:left;
}
#leadScheduleZone span.titleNo, #leadScheduleZone span.dataNo {
    width:5%;
}
#leadScheduleZone span.titleName, #leadScheduleZone span.dataName {
    width:15%;
}
#leadScheduleZone span.titleStartdate, #leadScheduleZone span.dataStartdate {
    width:10%;
}
#leadScheduleZone span.titleEnddate, #leadScheduleZone span.dataEnddate {
    width:10%;
}
#leadScheduleZone span.titleFinish, #leadScheduleZone span.dataFinish {
    width:56%;
}
#leadScheduleZone span.titleMod, #leadScheduleZone span.dataMod {
    width:4%;
}
/* form */
#leadScheduleZone div#title {
    font-weight:bold;
    font-size:20px;
    text-align:center;
    background:#99ccff;
}
#leadScheduleZone div.save {margin:10px 0px 10px 0px;}
#leadScheduleZone div.tr {width:100%;margin-bottom:2px;}
#leadScheduleZone div.tr::after {
    content: "";
    clear: both;
    display: table;
}
#leadScheduleZone div.tr div {
    width:50%;
    float:left;
}
#leadScheduleZone span.th {
    width:20%;
    text-align:right;
    display:inline-block;
}
#leadScheduleZone span.td {
    width:80%;
    margin-left:10px;
}
#leadPeriod {
    color:#ff0000;
    font-size:20px;
}
/* For mobile phones: */
@media only screen and (max-width: 360px) {
    #leadScheduleZone span.titleNo, #leadScheduleZone span.dataNo { width:15%; }
    #leadScheduleZone span.titleName, #leadScheduleZone span.dataName { width:40%; }
    #leadScheduleZone span.titleFinish, #leadScheduleZone span.dataFinish { width:25%; }
    #leadScheduleZone span.titleMod, #leadScheduleZone span.dataMod { width:20%; }
    #leadScheduleZone span.titleStartdate, #leadScheduleZone span.dataStartdate { display:none; }
    #leadScheduleZone span.titleEnddate, #leadScheduleZone span.dataEnddate { display:none; }
    #leadScheduleZone div.tr div { width:100%; }
    #leadScheduleZone span.th { width:25%; }
    #leadScheduleZone span.td { width:75%;margin-left:2px; }
}
/* users */
#usersZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
#usersZone span.titleNo, #usersZone span.dataNo {
    width:5%;
    display:block;
    float:left;
}
#usersZone span.titleName, #usersZone span.dataName {
    width:20%;
    display:block;
    float:left;
}
#usersZone span.titleEmail, #usersZone span.dataEmail {
    width:66%;
    display:block;
    float:left;
}
#usersZone span.titleStatus, #usersZone span.dataStatus {
    width:5%;
    display:block;
    float:left;
}
#usersZone span.titleMod, #usersZone span.dataMod {
    width:4%;
    display:block;
    float:left;
}
/* form */
#usersZone div#title {
    font-weight:bold;
    font-size:20px;
    text-align:center;
    background:#99ccff;
}
#usersZone div.save {margin:10px 0px 10px 0px;}
#usersZone div.tr {width:100%;margin-bottom:2px;}
#usersZone div.tr::after {
    content: "";
    clear: both;
    display: table;
}
#usersZone div.tr div {
    width:100%;
    float:left;
}
#usersZone span.th {
    width:20%;
    text-align:right;
    display:inline-block;
}
#usersZone span.td {
    width:80%;
    margin-left:10px;
}
/* For mobile phones: */
@media only screen and (max-width: 360px) {
    #usersZone span.titleNo, #usersZone span.dataNo { width:15%; }
    #usersZone span.titleName, #usersZone span.dataName { width:70%; }
    #usersZone span.titleEmail, #usersZone span.dataEmail { display:none; }
    #usersZone span.titleStatus, #usersZone span.dataStatus { display:none; }
    #usersZone span.titleMod, #usersZone span.dataMod { width:15%; }
    #usersZone div.tr div { width:100%; }
    #usersZone span.th { width:35%; }
    #usersZone span.td { width:65%;margin-left:2px; }
}
/* leads track */
#leadsTrackZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
#leadsTrackZone span {
    display:block;
    float:left;
}
#leadsTrackZone span.titleNo, #leadsTrackZone span.dataNo { width:5%; }
#leadsTrackZone span.tileFile, #leadsTrackZone span.dataFile {width:5%; }
#leadsTrackZone span.titleQName, #leadsTrackZone span.dataQName { width:7%; }
#leadsTrackZone span.titleQuestion, #leadsTrackZone span.dataQuestion { width:30%; }
#leadsTrackZone span.titleAName, #leadsTrackZone span.dataAName { width:7%; }
#leadsTrackZone span.titleAnswer, #leadsTrackZone span.dataAnswer { width:31%; }
#leadsTrackZone span.titleDate, #leadsTrackZone span.dataDate { width:10%; }
#leadsTrackZone span.titleMod, #leadsTrackZone span.dataMod { width:5%; }
/* from */
#leadsTrackZone div#title {
    font-weight:bold;
    font-size:20px;
    text-align:center;
    background:#99ccff;
}
#leadsTrackZone div.save {margin:10px 0px 10px 0px;}
#leadsTrackZone div.tr {width:100%;margin-bottom:2px;}
#leadsTrackZone div.tr::after {
    content: "";
    clear: both;
    display: table;
}
#leadsTrackZone div.tr div {
    width:100%;
    float:left;
}
#leadsTrackZone span.th {
    width:10%;
    text-align:right;
    display:inline-block;
}
#leadsTrackZone span.td {
    width:80%;
    margin-left:10px;
    display:inline-block;
    vertical-align:top;
}
#leadsTrackZone span.td a {
    color:#1a1aff;
    text-decoration: none;
}
#leadsTrackZone span.td a:hover, #leadsTrackZone span.td a:active { color:#ff3333; }
#leadsTrackZone span.td textarea {width:60%;height:200px;}
#leadsTrackZone span.td ul {margin:0px;padding:0px;list-style-type:decimal;}
#leadsTrackZone span.td ul li {margin-left:20px;float:left;}
/* For mobile phones: */
@media only screen and (max-width: 360px) {
    #leadsTrackZone span.titleNo, #leadsTrackZone span.dataNo { width:15%; }
    #leadsTrackZone span.titleQName, #leadsTrackZone span.dataQName { width:40%; }
    #leadsTrackZone span.titleQuestion, #leadsTrackZone span.dataQuestion { display:none; }
    #leadsTrackZone span.titleAName, #leadsTrackZone span.dataAName { display:none; }
    #leadsTrackZone span.titleAnswer, #leadsTrackZone span.dataAnswer { display:none;}
    #leadsTrackZone span.titleDate, #leadsTrackZone span.dataDate { width:30%; }
    #leadsTrackZone span.titleMod, #leadsTrackZone span.dataMod { width:15%; }
    #leadsTrackZone div.tr div { width:100%; }
    #leadsTrackZone span.th { width:25%; }
    #leadsTrackZone span.td { width:65%;margin-left:2px; }
    #leadsTrackZone span.td textarea {width:100%;height:200px;}
}
/* track page zone */
#trackPageZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
#trackPageZone span {
    display:block;
    float:left;
    height:25px;
}
#trackPageZone span.titleNo, #trackPageZone span.dataNo {
    width:3%;
    background-color:#3399ff;
    color:#ffffff;
    padding:3px 0px 3px 5px;
}
#trackPageZone span.titlePriority, #trackPageZone span.dataPriority {
    width:5%;
    background-color:#3399ff;
    color:#ffffff;
    padding:3px 0px 3px 0px;
}
#trackPageZone span.titleOrgan, #trackPageZone span.dataOrgan {
    width:26%;
    background-color:#3399ff;
    color:#ffffff;
    margin:0px 10px 0px 0px;
    padding:3px 0px 3px 0px;
}
#trackPageZone span.dataOrgan a {color:#ffffff;}
#trackPageZone span.titleSchedule, #trackPageZone span.dataSchedule {
    width:50%;
}
.dataSchedule span {
	box-sizing: border-box;
	border:0;
	margin:0px 12px 0px 0px;
	padding:2px 0px 0px 5px;
	outline:0;
}
.scheduleRed {
    margin: 0px 15px;
    padding:0px 10px;
    background:red;
    color:#fff;
    width:8%;
    height:25px;
    text-align:center;
    position:relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    float:left;
}
.scheduleRed:before {
	content: '';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    left: -10px;
    top: 0;
    border-style: solid;
    border-width: 13px 0 12px 10px;
    border-color: red red red transparent;
}
.scheduleRed:after {
	content: '';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    border-style: solid;
    border-width: 13px 0px 12px 10px;
    border-color: transparent transparent transparent red;
}
.scheduleGreen {
    margin: 0px 15px;
    padding:0px 10px;
    background:green;
    color:#fff;
    width:8%;
    height:25px;
    text-align:center;
    position:relative;
    display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
    float:left;
}
.scheduleGreen:before {
	content: '';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    left: -10px;
    top: 0;
    border-style: solid;
    border-width: 13px 0 12px 10px;
    border-color: green green green transparent;
}
.scheduleGreen:after {
	content: '';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    border-style: solid;
    border-width: 13px 0px 12px 10px;
    border-color: transparent transparent transparent green;
}
.scheduleFuchsia {
    margin: 0px 15px;
    padding:0px 10px;
    background:#ff00ff;
    color:#fff;
    width:8%;
    height:25px;
    text-align:center;
    position:relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    float:left;
}
.scheduleFuchsia:before {
	content: '';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    left: -10px;
    top: 0;
    border-style: solid;
    border-width: 13px 0 12px 10px;
    border-color: #ff00ff #ff00ff #ff00ff transparent;
}
.scheduleFuchsia:after {
	content: '';
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    border-style: solid;
    border-width: 13px 0px 12px 10px;
    border-color: transparent transparent transparent #ff00ff;
}
/* For mobile phones: */
@media only screen and (max-width: 360px) {
    #trackPageZone span.titleNo, #trackPageZone span.dataNo { width:15%; }
    #trackPageZone span.titlePriority, #trackPageZone span.dataPriority { width:15%; }
    #trackPageZone span.titleOrgan, #trackPageZone span.dataOrgan { width:65%; }
    #trackPageZone span.titleSchedule, #trackPageZone span.dataSchedule { width:100%; }
    .scheduleRed { width:25%; }
    .scheduleGreen { width:25%; }
}
/* forget password */
#password
{
    margin:0px;
    width:100%; height:auto;
    text-align:center;
}
#passwordTable
{
    margin:0px;
    width:25%;
	height:auto;
    color:#0000ff;
    padding: 30px 15px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 10px #0000004d;
}
#passwordTable .title
{
    color: #fff;
    font-size: 36px;
    margin: 15px 0;
    text-shadow: 0 0 1px #401a2059;
}
#passwordTable th, #passwordTable td { padding:10px; display: block; text-align: left;}
#passwordTable td input {
    padding: 10px;
    width: 100%;
}
#passwordTable td input[type="radio"] { width:auto;}
#passwordTable td input[type="submit"] {
    border-radius: 50px;
    background: #4CAF50;
    color: #fff;
    cursor: pointer;
}
/* static */
#staticZone {
    width:100%;
    border:1px solid #dddddd;
    padding:0px 5px 5px 5px;
    background-color:#f2f2f2;
}
.clearfix {
  overflow: auto;
}
#staticSelect {padding:0px 0px 5px 20px;}
#chart_div {
    margin:0px 20px; 0px 0px;
    display:block;
    float:left;
}
#chart_div2 {
    display:block;
    float:left;
}
#chart_div3 {
    margin:20px 20px; 0px 0px;
    display:block;
    float:left;
}
#chart_div4 {
    margin:20px 0px; 0px 0px;
    display:block;
    float:left;
}
#alert_div {
    margin:10px 20px; 0px 0px;
    padding:5px;
    width:95%;
    height:100px;
    display:block;
    padding: 10px;
    border:1px solid #b3b3cc;
    color:#0000ff;
}