body::-webkit-scrollbar{width: 0.8em}
body::-webkit-scrollbar-track{background-color:transparent}
body::-webkit-scrollbar-thumb{background-color: #333;border-radius:30px;}


html{
  background:black;
  color:white;
  font-family:arial;
}
.form-div-in,.form-div-out,.json-div-out,.json-div-in,.info,.text-div{
    border:solid 0px green;
}

.info{
  text-align:center;
}

#submit-animation{
   position:fixed;
   display:none;
   width:98%;
   height:70%;
   top:10%;
   left:0%;
   z-index:99999;
}

h1{
  font-family:cursive;
  color:grey;
}
#motive-logo-div{
  position:relative;
  text-align:center;
  display:inline-block;
  border:solid 0px green;
  border-radius:50%;
  padding:0px;
  z-index:9999;
}
#motive-logo{
  position:relative;
  /* border:solid 4px #333; */
  box-shadow:0 0 20px 7px teal;
  border-radius:50%;
  width:50px;
  height:50px;
  padding:5px;
  animation:logo 1s linear,logo2 1s infinite;
}
#motive-report-logo{
  position:relative;
  box-shadow:0 0 20px 7px teal;
  border-radius:50%;
  width:30px;
  height:30px;
  padding:5px;
  animation:logo 1s linear,logo2 1s infinite;
}
@-webkit-keyframes logo{
  from{transform: scale(0.1);}
  to{transform: scale(1);}
}
@keyframes logo{
  from{transform: scale(0.1);}
  to{transform: scale(1);}
}
@-webkit-keyframes logo2{
  from{box-shadow:0 0 30px 7px grey;}
  to{box-shadow:0 0 20px 7px teal;}
}
@keyframes logo2{
  from{box-shadow:0 0 30px 7px grey;}
  to{box-shadow:0 0 20px 7px teal;}
}

.main-div{
  position:relative;
  background:black;
  border:solid 0px blue;
  border-radius:4px;
  padding:5px;
  width:80%;
  margin:5px auto;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.form-div-out{
  top:0px;
  display:inline-block;
  background:black;
  border-radius:0px;
  padding:10px;
  margin:5px;

}
.form-div-in{
  display:inline-block;
  text-align:left;
  /* background:black; */
  padding:15px 60px;
  margin:5px;
  border-radius:0px;
}
.text-div{
  position:relative;
  margin:5px;
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
  color:teal;
  display:flex;
  /* min-height: 30%; */
  margin-top: 30px;
  align-self: stretch;
}
#OR{
  position:relative;
  /* left:-8px; */
  font-weight:bold;
  writing-mode: initial;
  text-orientation: normal;
}
.json-div-out{
  position:relative;
  display:inline-block;
  background:black;
  border-radius:7px;
  padding:10px;
  margin:5px;
  min-height: 100%;
  margin-bottom: auto;
  align-self: stretch;
}
.json-div-in{
  display:inline-block;
  position:relative;
  min-height:100%;
  padding:15px 60px;
}

#all-msg-choice-div{
   position:relative;
   background-color: transparent;
   padding:5px;
   max-height:200px;
   overflow-y:scroll;
}
.msg-choice-div{
   position:relative;
   padding:2px 5px;
   background:#111111;
   margin:2px auto;
   text-align:left;
   border-radius:4px;
   min-height: 20px;
   overflow: hidden;
}
.msg-choice-div input{
   position:relative;
   display:block;
   width: 14px;
   height: 14px;
   margin:12px 30px 0 0;
   padding:0px;
   border:solid 2px green;
}

input,select{
  position:relative;
  display:inline-block;
  margin:5px;
  padding:5px 12px;
  border:solid 2px #333;
  border-radius:3px;
  /* font-size:16px; */
  width:200px;
  max-width:200px;
  float:right;
  background:#333;
  color:white;
}
.form-div-in label{
  position:relative;
  margin:5px;
  padding:4px 10px;
  display:inline-block;
  opacity:0.7;
  font-size:16px;
}

#breadcrumb,#lbb_diag{
  display:none;
}

#breadListIcon,
.listIcon{
  display:none;
  cursor:pointer;
}
sup{
  color:teal;
  font-size:18px;
  font-weight: bold;
}
select::-webkit-scrollbar {width: 0.4em;height:0.4em}
select::-webkit-scrollbar-track {
  background-color:#171717;
}
select::-webkit-scrollbar-thumb {
  background-color: grey;
  border-radius:30px;}

#submit{
  display:block;
  position:relative;
  margin:5px auto;
  background:teal;
  border:none;
  color:white;
  width:100px;
  max-width:100px;
  padding:9px 3px;
}
#submit:hover{
  background:grey;
}
#json-submit-btn{
 display:none;
}


#VIN_info{
  display:block;
  font-size:12px;
  font-weight:bold;
}
.error{color:red;}
.success{color:green;}


#bc-POP,
#selected-pop,
#lbb-POP,#SD-POP,
#dtc-POP,#EStp-POP,
#VM-POP,#ES-POP,
#VS-POP,#DP-POP,
#BU-POP,#IFTA-POP,
#AUTH-POP,
#IDLE-POP,
#BATCH-POP,
#CAMERA-POP,
#MOTION-POP,
#DG-POP,
#HB-POP,
#BADC-POP,
#TI-POP,
#SB-POP,
#AF-POP,
#ICA-POP,
#SR-POP,
#SC-POP,
#SEC-POP,
#SOCKETC-POP,
#SOU-POP,
#UD-POP,
#HBC-POP,
#PR-POP,
#OUR-POP,
#ECR-POP,
#MD-POP,
#ID-POP,
#OTAUR-POP,
#SOCKETD-POP,
#CPSU-POP{
  position: fixed;
  display:none;
  top:0%;
  left:0%;
  width:80%;
  height:80%;
  background:#333;
  z-index: 99999;
  padding:10px;
  box-shadow:5px 5px 30px 3px #2A2A2A;
  transform: translate(10%, 10%);
  -webkit-transform: translate(10%, 10%);
  -moz-transform: translate(10%, 10%);
  -o-transform: translate(10%, 10%);
  -ms-transform: translate(10%, 10%);
}

.all-pop-data{
  width:100%;
  height:90%;
  overflow-y:scroll;
}

.all-pop-data::-webkit-scrollbar{width: 0.4em;height:0.4em}

.all-pop-data::-webkit-scrollbar-track{
  background-color:#171717;
}

.all-pop-data::-webkit-scrollbar-thumb{
  background-color: grey;
  border-radius:30px;
 }



.msg-type-div{
  border:solid 0px grey;
  display:block;
  margin:5px;
}
.msg-type{
  display:inline;
  color:grey;
  font-size:12px;
}
.msg-type-input,
.lbb_diag-type-input,
.dtc-type-input{
  all: revert;
}
.parameter-div{
  position:relative;
  display:none;
  padding:2px 10px;
  margin-left:30px;
  background:transparent;
  border:solid 0px grey;
  min-width:200px;
}
.parameter-div input{
  margin:0 10px;
}

.parameter-select{
  all: revert;
  position:relative;
  display:inline-block;
  top:0px;
  background:#E1E1E1;
  color:black;
  font-size:13px;
  padding:2px 5px;
  border-radius:3px;
  cursor:pointer;
}
.para-items{
  position:absolute;
  display:none;
  background:#171717;
  padding:5px;
  margin-top:2px;
  border-radius:3px;
  z-index:99999999;
  box-shadow:0 0 10px 1px #828181;
}

.parameter-list{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.parameter-list li{
      border:solid 0px grey;
      margin:2px;
      padding:2px;
      border-radius:3px;
      display:block;
      align-items:left;
}
.parameter-list li>input{
     all:revert;
     display:inline-block;
}

.parameter-name{
  font-size:13px;
}


.threshold-div{
  display:inline-block;
  border:solid 0px red;
}
.threshold-class,
.threshold-margin{
  all: revert;
  width:90px;
  opacity:0.3;
  margin:3px 0px;
}

.threshold-margin{
 width:90px;
 display:none;
 opacity:1;
}

.value-div{
  display:inline-block;
  border:solid 0px red;
}
.value-class,
.value-margin{
  all: revert;
  width:90px;
  opacity:0.3;
  margin:3px 0px;
}

.value-margin{
 width:90px;
 display:none;
 opacity:1;
}

.tooltip{
 font-size:11px;
 color:black;
 background:grey;
 padding:1px 4px;
 border-radius:50%;
 display:none;
}

#tooltip-div{
  position:fixed;
  top:0px;
  left:0px;
  background:grey;
  color:white;
  font-size:12px;
  font-weight:normal;
  font-family:courier;
  border-radius:4px;
  padding:5px 10px;
  box-shadow:0 0 20px 1px black;
  margin:2px;
  z-index:999999;
  display:none;
}

.alt-msg-type-div,
.alt-column-div,
.operand-div,
.resultant_value-div
.alt-content-div,
.content-div{
  display:inline-block;
  border:solid 0px red;
}

.altcolumn-class,
.altmsgtype-class,
.operand-class,
.resultantvalue-class,
.altcontent-class,
.content-class{
  all: revert;
  width:90px;
  opacity:0.3;
  margin:3px 0px;
}

.closer{
  display:block;
  width:auto;
  height:5%;
  padding:5px;
  margin:5px;
  /* background-color: #171717; */
  text-align: center;
  border-bottom:solid grey 2px;
}

.cross,.cancel{
  position:relative;
  display:inline-block;
  background:teal;
  color:white;
  font-size:13px;
  cursor:pointer;
  padding:5px 15px;
  margin-right:15px;
  margin-left:15px;
  border:solid 0px white;
  border-radius:3px;
}
.cross{
  float:right;
  right:0px;
}
.cross:hover{
  background:grey;
}
.cancel{
  float:right;
  background:red;
}
.cancel:hover{
  background:grey;
}

/*..................for manual input..................*/
.manual-div{
position:fixed;
width:23%;
right:30px;
top:90%;
background:#1D1D1D;
padding:5px;
border-radius:4px;
opacity:0.3;
}

/*..................manual input ended..................*/



#breadList{
  color:grey;
  line-height: 1.5;
  font-size:12px;
}

#breadList{
  position:relative;
  table-layout:fixed;
  width:95%;
  margin:5px auto;
  text-align:center;
  background:black;
  border:solid 0px grey;
}
#breadList th{
    color:white;
}

#breadList td,#breadList th{
    border:groove 0.5px grey;
    word-wrap: break-word;
}
/*.wrong{
  color:red;
}*/

/*......................for notification.................*/
#notification-div{
  position:fixed;
  display:none;
  width:90%;
  left:5%;
  padding:3px 10px;
  top:0px;
  background:red;
  color:white;
  font-weight:bold;
  z-index:9999999999;
  animation:note 0.5s linear;
}
@-webkit-keyframes note{
  from{top:-60px};
  to{top:0px};
}
@keyframes note{
  from{top:-60px;}
  to{top:0px};
}

#notification-msg-div{
  position:relative;
  display:inline-block;
  width:97%;
  text-align:center;
  background:transparent;
}

#notification{
  position:relative;
  font-size:14px;
  display:inline;
  top:5px;
}

#close-notification{
  position:relative;
  float:right;
  right:0px;
  font-size:24px;
  cursor:pointer;
}
#close-notification:hover{
  color:black;
}
/*....................notification ended....................*/


#hidden_form{
  display:none;
}


#special-breadcrumbs-div{
  position:absolute;
  background:transparent;
  padding:10px;
  border:solid 0px red;
}
.special-breadcrumb-pop{
  position:fixed;
  display:none;
  top:0%;
  left:0%;
  width:60%;
  height:60%;
  background:#333;
  z-index: 9999999;
  padding:3px 10px;
   box-shadow:0 0 60px 30px black;
  transform: translate(30%, 20%);
  -webkit-transform: translate(30%, 20%);
  -moz-transform: translate(30%, 20%);
  -o-transform: translate(30%, 20%);
  -ms-transform: translate(30%, 20%);
}

.special-nav{
  display:block;
  padding:5px 15px 15px 15px;
  margin:5px;
  text-align:center;
  border-bottom:solid 2px grey;
}





.special-msgs-div{
  max-height:85%;
  overflow-y:scroll;
}

.special-breadcrumb-div{
  position:relative;
  background:transparent;
  box-shadow:inset 0 0 20px 1px #171717;
  margin:5px;
  padding:5px 10px;
  font-size:11px;
  border-radius:5px;
}
.special-breadcrumb-div select{
  all:revert;
}
.special-span{
  margin-right:20px;
  color:grey;
}


#special-div,.graph-container{
position:relative;
display:flex;
justify-content:center;
align-items:center;
flex-flow:wrap;
background:#171717;
box-shadow:inset 0 0 800px 100px black;
padding:10px;
margin:10px;
}

.graph-div{
position:relative;
display:block;
padding: 3px;
margin:10px;
box-shadow: 0 0 5px 1px #333;
border-radius:6px;
}

#veh-graph-div{
width:70%;
margin:10px auto;
}




.heading{
  position:relative;
  text-align:center;
  font-size:23px;
  font-family:cursive;
  background: -webkit-linear-gradient(white,grey,teal);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.headers-ul{
  position:relative;
  background:#171717;
  border:solid 0px grey;
  border-radius:6px;
  display:flex;
  padding:5px 15px;
  margin:5px;
  list-style-type:none;
  justify-content: center;
  align-items:center;
  color:grey;
  box-shadow: inset 0 0 15px 1px grey;
}
.headers-ul li{
  margin:1px 10px;
}
.headers-ul i{
  font-size:13px;
  color:white;
  opacity:1;
  background:transparent;
  padding:5px 10px;
  border-radius:4px;
}

#report-table{
  table-layout:fixed;
  position:relative;
  width:90%;
  margin:5px auto;
  text-align:center;
  border:solid 0px grey;
  margin-top:20px;
}

#report-table tr:hover>.tdata{
  background:#333;
}
#report-table th{
  border-bottom:solid 1px grey;
  border-radius:4px;
  padding:5px 9px;
  Font-size:13px;
  background:#171717;
  box-shadow:inset 0 0 10px 1px grey;
}
.parameter{
  position:relative;
    width:10%;
}
.threshold{
  position:relative;
    width:25%;
}
.verdict{
  position:relative;
    width:8%;
}
#report-table td{
  color:white;
  margin:1px 4px;
  padding:3px 9px;
  font-size:13px;
  border-top:    0px dotted grey;
  border-right:  1px solid black;
  border-bottom: 2px solid black;
  border-left:   2px solid  black;
  border-radius:4px;
  /* overflow-x:scroll; */
}
/* #report-table td::-webkit-scrollbar{width:0.3em;height:0.4em;}
#report-table td::-webkit-scrollbar-track{background-color:transparent}
#report-table td::-webkit-scrollbar-thumb{background-color: grey;border-radius:2px;} */
.tdata{
  background:#171717;
  cursor:pointer;
}

.tdata-wrap{
  background:#171717;
  cursor:pointer;
  overflow-wrap: break-word;
  min-width:300px;
}

.tdata i,sub{
  color:grey;
  font-size:10px;
}

.fail{
  background:red;
  font-size:10px;
  font-weight:bold;
}
.pass{
  background:green;
  font-size:10px;
  font-weight:bold;
}
.unpredicted{
  background:grey;
  font-size:10px;
  font-weight:bold;
  opacity:0.7;
}

.nav{
position:relative;
width:95%;
margin:5px auto;
}
.nav-btn{
padding:4px 7px;
}

#searchbox-div,
#Lbb_searchbox-div,
.searchbox-div{
  position:relative;
  display:inline-block;
  float:left;
  border:solid 0px green;
  margin:0px 5px;
}
#searchbox,
#Lbb_searchbox,
.search-input{
  all:revert;
  background:black;
  color:white;
  display:inline;
  padding:4px 10px;
  border:solid 2px grey;
  border-radius:4px;
}
#search-closer,
#Lbb_search-closer,
.search-closer{
  cursor:pointer;
  font-weight:bold;
  display:none;
}
.search-closer:hover{
  color:red;
}
#resultbox,
#lbb-resultbox,
.resultbox{
  position:absolute;
  z-index: 9999999;
  width:100%;
  padding:5px 10px;
  background:black;
  color:white;
  display:none;
  text-align:left;
}
.search-result{
  cursor:pointer;
  font-size:13px;
}
.search-result:hover{
  color:teal;
}
.search-click-result{
  background:#171717;
}



/*.......loader css........*/
#loader-out{
position:relative;
width:90%;
margin: 2px auto;
font-family:courier;
font-weight:bold;
}

#loader-in{
position:relative;
width:45px;
height:45px;
margin:5px auto;
border-top: solid 5px white;
border-right: solid 5px white;
border-bottom: solid 5px white;
border-left: solid 5px transparent;
border-radius: 50%;
animation: loading 0.6s infinite linear;
}
@-webkit-keyframes loading{
from{ transform: rotate(0deg); }
to{ transform: rotate(360deg);}
}
@keyframes loading{
from{
transform: rotate(0deg);
}
to{ transform: rotate(360deg); }
}
/*.......loader css ended..*/



/*....Lbb_diags-results table......*/
#Lbb_diags-table{
    position:relative;
    table-layout:fixed;
    width: 95%;
    margin: 5px auto;
    border-spacing: 5px 1em;
}
#Lbb_diags-table th{
  position:relative;
  border-bottom:solid 1px grey;
  border-radius:4px;
  padding:5px 9px;
  Font-size:13px;
  background:#171717;
  box-shadow:inset 0 0 10px 1px grey;
}

#Lbb_diags-table td{
    border:solid 1px #333;
    border-radius:4px;
    padding:4px;
}

.Lbb_timestamps-th,
.Lbb_types-th{
  width:10%;
}

.Lbb_timestamps-td,
.Lbb_types-td{
  background-color:#303030;
  text-align:center;
  overflow-wrap: break-word;
  word-wrap: break-word; /* Firefox support */
  font-family:arial;
  font-size:12px;
}
.Lbb_types-td{
 cursor:pointer;
}
.Lbb_types-td:hover{
 opacity:0.8;
}
.Lbb_values-th{
   width:80%;
}
.Lbb_values-td{
   color:grey;
   overflow-wrap: break-word;
   word-wrap: break-word; /* Firefox support */
   font-family:courier;
   max-height:25px;
   overflow:auto;
}
.resizeable-div{
      display:block;
      resize: vertical;
      overflow:scroll;
      height:25px;
      padding:7px;
      margin:0px;
      font-size:12px;
      font-family:courier;
      background:#111111;
      color:grey;
}
/*....Lbb_diags-results table ended......*/

/*.... error.html css......*/
.line-div{
position:relative;
width:95%;
height:4px;
border-radius:3px;
background:#333;
margin:10px auto;
}

.error-div{
background-color:#171717;
position:relative;
width:90%;
margin:20px auto;
padding:20px;
border-radius:5px;
}
.error-head{
opacity:0.9;
}
.error-json{
font-family:courier;
color:white;
opacity:0.8;
}
/*.... error.html css ended......*/