#emv_root {
    --theme-platform-color: #007aa6;
    --theme-emv-select: #0299cf;
    --theme-emv-hover: #ffb684;
}

#emv_main {
    font-size: var(--theme-sfont-size); 
    background: var(--theme-bg-color);    
}

#emv_main .sb_widget .sb_icon {
    display: none;
}

#emv_projects_sidepanel .treenode #tree_update_entity {
    color: #ff5858;
}

#emv_projects_sidepanel .treepanel.selected {
    border: 1px solid #ff5858;
}

#emv_projects_sidepanel .treenode.selected {
    border: 1px solid #ff5858;
}

#emv_projects_sidepanel .treeref.selected {
    border: 1px solid #ff5858;
}

#emv_projects_sidepanel .treenodebar input {
    cursor: pointer;
}

#emv_projects_sidepanel .treenodevalue input {
    width: 150px;
}


#emv_projects_sidepanel .treenode  li > span:first-child > label   {
    display:none;
}

#emv_projects_sidepanel .treenode .sb_link.active + ul {
	border:1px solid;
}

/*------------------------------------------------- SERVER -----------------------------------------------*/

#button_terminal, #button_card, #button_router {
    background: red;
}


/*------------------------------------------------- AIDS TABLE -----------------------------------------------*/

#emv_aidspanel td {
    line-height: inherit;    
    border-top: 1px solid var(--theme-button-border-color);
    border-left: 1px solid var(--theme-button-border-color);    
}


/*------------------------------------------------- TAGS TABLE -----------------------------------------------*/

#emv_tagspanel td {
    line-height: inherit;    
    border-top: 1px solid var(--theme-button-border-color);
    border-left: 1px solid var(--theme-button-border-color);    
    white-space: break-spaces;    
}

/*------------------------------------------------- SW1SW2 TABLE -----------------------------------------------*/

#emv_sw1sw2panel td {
    text-align: center;
    line-height: inherit;    
    border-top: 1px solid var(--theme-button-border-color);
    border-left: 1px solid var(--theme-button-border-color);    
}

#emv_sw1sw2panel td:nth-child(4) {
    text-align: left !important;
}

/*------------------------------------------------- APDU TABLE -----------------------------------------------*/

#emv_capdupanel td {
    text-align: center;
    line-height: inherit;    
    border-top: 1px solid var(--theme-button-border-color);
    border-left: 1px solid var(--theme-button-border-color);    
}

#emv_sw1sw2panel td:nth-child(4) {
    text-align: left !important;
}


/*---------------------------------------------------------------- MAIN PAGE -------------------------------------------------------------------------*/

#emv_testerpage {
    background: var(--theme-bg-color);
}

#emv_tester_tab .sb_close-tabs {
  /*  display:none; */
}


/*--------------------------------------------------------------------------- BYTE PANEL --------------------------------------------------------------*/

.bytepanel .sb_sidebarheadertitle {
    flex:none;
}

.emvbyte {
    width: max-content;
    font-size: var(--theme-sfont-size);    
    font-family: Calibri, sans-serif;
    text-transform: none;    
}

.emvbyte td, .emvbyte th  {
    height: 17px !important;
    width: 17px !important;
    text-align:center;
    line-height: inherit;
    border: 1px solid var(--theme-button-border-color);
}

.emvbyte td:nth-child(9){
    text-align:left;
}

.emvbyte td:nth-child(9) {
    width:320px !important;
}

.emvbyte tr:hover td:nth-child(9), tr:hover td[byte]   {
    color : var(--theme-hover-color);
    background: var(--theme-hover-bg-color);
}

.emvbyte tr.selected td:nth-child(9), tr.selected  td[byte]{
    color : var(--theme-emv-select);
    background: var(--theme-select-bg-color);
}

.emvbyte tr.marked td:nth-child(9), tr.marked  td[byte]{
    color: black;
    background: var(--theme-emv-select);
 }
 
 .emvbyte tr.active {
    background-color: unset;
    color: unset;
 }

 .emvbyte td.selected {
    color : var(--theme-emv-select) !important;
    background: var(--theme-select-bg-color)!important;
 }

 .emvbyte td.marked {
    color: black !important;
    background: var(--theme-emv-select) !important;
 }
/*---------------------------------------------------------------- PROCESS DIAGRAM -----------------------------------------------------------*/
/* All parameters */
:root {
    --linethick: 1px;
    --linewidth: 1.8em;
  }
  
  .process_diagram .seehowbutton {
    display: none;
  }
  
  /* connecting lines between nodes */
  .process_diagram li:before,
  .process_diagram li:after,
  .process_diagram ul:before,
  .process_diagram ul:after,
  .process_diagram div:before,
  .process_diagram div:after {border-style:solid; border-color:var(--theme-button-border-color);}
  
  /* debug connecting lines * /
  .process_diagram div:before,
  .process_diagram div:after {border-color:green;}
  .process_diagram ul:before,
  .process_diagram ul:after {border-color:red;}
  /**/
  
  /************************************************************/
  
  /* positioning for the diagram */
  .process_diagram,
  .process_diagram ol,
  .process_diagram ul,
  .process_diagram li {margin:0 auto; padding:0; display:block; list-style:none;vertical-align:middle;}
  
  .process_diagram li {position:relative;}
  
  .process_diagram,
  .process_diagram ol {display:table; width:100%; border-collapse:collapse; }
  
  .process_diagram > li,
  .process_diagram ol > li {display:table-cell; }
  
  .process_diagram > li,
  .process_diagram ol > li,
  .process_diagram ul > li {padding:.2em 0}
  
  /* a dash before and behind all uls */
  .process_diagram ul {position:relative; padding:0 var(--linewidth);}
  .process_diagram ul:before,
  .process_diagram ul:after {position:absolute; content:""; top:50%; width: var(--linewidth); display:block; border-width:var(--linethick) 0 0; }
  .process_diagram ul:before {left:0;}
  .process_diagram ul:after {right:0;}
  
  /* put connecting vertical lines */
  .process_diagram ul > li:after,
  .process_diagram ul > li:before {position:absolute; content:""; top:0; bottom:0; width:var(--linewidth); height:100%; display:block;}
  .process_diagram ul > li:before {left:0; border-width:0 0 0 var(--linethick);}
  .process_diagram ul > li:after {right:0; border-width:0 var(--linethick) 0 0; background: red;display: none;}
  
  /* correct length and position of dashes for first and last li-item in ul */
  .process_diagram ul > li:first-child:before,
  .process_diagram ul > li:first-child:after {top:50%; bottom:auto; height:50%; }
  .process_diagram ul > li:last-child:before,
  .process_diagram ul > li:last-child:after {top:0; bottom:auto; height:50%;}
  .process_diagram ul > li:first-child:last-child:before,
  .process_diagram ul > li:first-child:last-child:after {top:0; bottom:auto; height:50%;display:none;}
  
  /* put left and right dashes */

  .process_diagram li > div {position:relative;margin:0 var(--linewidth);padding: 1em;border-width:var(--linethick); width: auto;background-color: var(--theme-bg-color); color: var(--theme-color); border-style:solid; border-color:var(--theme-button-border-color); cursor: pointer;}
  .process_diagram li > div:before,
  .process_diagram li > div:after {content:""; top:50%; width:var(--linewidth); position:absolute; border-width:var(--linethick) 0 0; height:50%;}
  .process_diagram li > div:after {right: calc(0em - var(--linewidth)); margin-right: calc(0px - var(--linethick));display: none;}
  .process_diagram li > div:before {left: calc(0em - var(--linewidth)); margin-left: calc(0px - var(--linethick));}
  .process_diagram li:last-child > div:after,
  .process_diagram li:last-child > div:before {top:1px; border-width: 0 0 var(--linethick);}
  
  /* remove dash for the very first/last nodes keeping margin and padding */
  .process_diagram > li:first-child > div:before,
  .process_diagram > li:first-child > ul:before,
  .process_diagram > li:first-child > ul > li:before,
  .process_diagram > li:first-child > ul > li > div:first-child:before,
  .process_diagram > li:first-child > ul > li > ol > li:first-child > div:before,
  .process_diagram > li:last-child > div:after,
  .process_diagram > li:last-child > ul:after {border:0;}
  
  /* remove double dashes */
  ol.process_diagram > li > div:after,
  .process_diagram ol > li > div:after,
  ol.process_diagram > li > ul:after,
  .process_diagram ol > li > ul:after {display:none}
  ol.process_diagram > li > div,
  .process_diagram ol > li > div {margin-right: 0;}
  ol.process_diagram > li > ul,
  .process_diagram ol > li > ul {padding-right: 0;}
  
  /* last dashes are not double and need to be recovered */
  ol.process_diagram > li:last-child > div:after,
  .process_diagram ol > li:last-child > div:after,
    ol.process_diagram > li:last-child > ul:after,
  .process_diagram ol > li:last-child > ul:after {display:none;}
  
  ol.process_diagram > li:last-child > div,
  .process_diagram ol > li:last-child > div {margin-right: 0; width: 40%;/* max-width: 300px; text-align: center;*/}
  
  ol.process_diagram > li:last-child > ul,
  .process_diagram ol > li:last-child > ul {padding-right: 0; }
  
  .process_diagram ol > li:last-child > ul li > div {padding: 0.8em;}
  .process_diagram ol ol > li:last-child > ul li > div {padding: 0.5em;}

  ol.process_diagram > li:first-child {vertical-align: top; padding-top: 120px;}
  ol.process_diagram > li:nth-child(2) {}
  ol.process_diagram > li:nth-child(2) > ul:first-child:before {top: 145px;}
  
  .process_diagram ul:after {display:none}


.process_diagram .EMVStep.active {
    background: unset;
    color: unset;
}

.process_diagram .EMVStep.selected {
    border-color:  var(--theme-emv-select) !important;
    border-radius: 0px;    
    background: var(--theme-select-bg-color) !important;    
    color:var(--theme-main-color) !important; 
}

.process_diagram .EMVSubStep.selected {
    border-color:  var(--theme-emv-select) !important;
    border-radius: 0px;    
    background: var(--theme-select-bg-color) !important;      
    color:var(--theme-main-color) !important;       
} 


/*--------------------------------------------------------------------------  STEPS & PRESENTATION CLASS STEP PANEL --------------------------------------------------------------------*/


#emv_presentation_steps_bar .sb_link {
    width: 100%;;
    text-transform: uppercase!important;    
    border:1px solid var(--theme-button-border-color);
}

#emv_presentation_steps_bar .sb_link.checked {
    border-color:var(--theme-platform-color);
}

#emv_presentation_panel {
    padding-right: 3px;    
   /* border:1px solid var(--theme-border-color);"/
}

#emv_presentationpanel .card {
    border:none;
}

#emv_presentation_panel .EMVStep.active {
    background: unset;
    color: unset;
}

#emv_presentation_panel .EMVStep.selected {
  
}

#emv_presentation_panel .EMVSubStep.selected {
  
} 


#emv_presentation_panel .content .body {
    overflow:auto;
}

#emv_presentation_panel  > .steps .number {
    display:none;
}

#emv_presentation_panel .steps {
    min-height: unset;
    padding: 5px 0px;
    background: var(--theme-main-bg-color);
}

#emv_presentation_panel > .steps > ul  {
    height: auto;
}

#emv_presentation_panel > .steps a {
    padding: 0 !important;
}

#emv_presentation_panel  > .steps > ul > li {
   /* border: 1px solid var(--theme-button-border-color);*/
    margin: 1px;   
    font-size: 11px; 
}

#emv_presentation_panel  > .steps .current a,
#emv_presentation_panel  > .steps .current a:hover,
#emv_presentation_panel  > .steps .current a:active {
    border: 0px solid var(--theme-platform-color);
}

#emv_presentation_panel  > .steps .current  {
    border: 1px solid var(--theme-platform-color);
}

#emv_presentation_panel .alert-primary {
    border-color: var(--theme-button-border-color);
    border-radius: 0px;
    color: var(--theme-color);
    background: var(--theme-bg-color);
}

#emv_presentation_panel .alert-primary li {
    list-style-type:square;
    margin-left: 5%;    
 }

 #emv_presentation_panel mark {
    background-color: transparent;
    color: var(--theme-emv-select);
}

#emv_presentation_steppanels .related-primary {
    display:flex;
    flex-wrap:wrap;
    background:transparent;
}


#emv_presentation_steppanels .related-primary label{
    margin:2px 2px
}

#emv_presentation_steppanels .related-primary.Info {
    color:  rgb(255, 182, 132) !important;
    align-items: flex-start;
}

.emv_button_show {
    font-size: 0.8rem;
    padding: 0px 6px 2px 6px;
    background: var(--theme-select-bg-color);
    border: 1px solid var(--theme-emv-select);
    margin: 1px 0px 1px 0px;
    cursor: pointer;
}

.emv_button_show:active {
    background: var(--theme-emv-select);    
    color: black;    
}

.EMVSubStep.selected .alert-primary{
    border-color: var(--theme-emv-select) !important;
    border-radius: 0px;    
    background: var(--theme-select-bg-color) !important;  
    color: var(--theme-main-color) !important;    
}    

.EMVStep.selected>.card-body>.card-text>.alert-primary  {
    border-color: var(--theme-emv-select) !important;
    border-radius: 0px;    
    background: var(--theme-select-bg-color) !important;  
    color: var(--theme-main-color) !important;    
}
/*-------------------------------------------------------------------------- EMV STEPS PANEL --------------------------------------------------------------------*/

#emv_tree_steps_panel {
    width: 420px;
}

#emv_tree_steps_panel .sb_widget-description {
    white-space: break-spaces;
}


#emv_tree_steps_panel .sb_widget-title {
    color: unset !important;
}

#emv_tree_steps {
    overflow: auto;
}
 
#emv_tester_stepsgroup .EMVStep {
    background: white;
}


#emv_tester_stepsgroup .EMVStep.selected {
    background:var(--theme-emv-select);
}


/*--------------------------------------------------------- RIGHT PANEL ----------------------------------------------------*/

#emv_rightpanel {
    flex : none;
    font-size: var(--theme-sfont-size);
    width:350px;
}

/*--------------------------------------------------------- BOTTOM PANEL ----------------------------------------------------*/

#emv_bottompanel {
    flex : none;
    font-size: var(--theme-sfont-size);
    height:35px;
}

#emv_bottompanel .nav-item {
    flex:none;
}

#emv_bottomtabs .sb_content {
    background: var(--theme-bg-color);
 
}

#emv_bottomtabs .sb_controls {
    margin-left: inherit;
}

#emv_bottomtabs .sb_controls a {
    min-width: 20px;
}


/*----------------------------------------------------------------------------- TLV PARSE-------------------------------------------------------------------------------*/

.treetable {
    border: 1px solid var(--theme-button-border-color);
    user-select: none;
}

.treetable .header {

    border-bottom: 1px solid var(--theme-button-border-color);
    box-sizing: border-box;
    height: 24px;
    overflow: hidden
}

.treetable .header .label {
    font-weight: 700;
    height: 100%;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.treetable .content {
    overflow: overlay;
    overflow-x: hidden;
    scrollbar-width: none
}

.treetable ul.root {
    padding-left: 0
}

.treetable ul {
    list-style: none;
    margin: 0;
    padding-left: 20px
}

.treetable .rh {
    height: 24px;
    line-height: 24px
}

.treetable .tv {
    border-right: 1px solid  var(--theme-button-border-color);
    overflow: hidden;
    padding-left: 3px;
    text-overflow: ellipsis;
    width: auto
}

.treetable .tv-row {
    float: right;
    overflow: hidden;
    padding-left: 3px
}


.treetable .active {
    background-color: var(--theme-select-bg-color);
    cursor: default;
    text-shadow: 0 -1px 0 rgba(0,0,0,.2)
}

.treetable .tv-row .tc {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.treetable .ctrl {
    background: url(https://paymentcardtools.com/resources/line-middle.gif);
    background-position: 0;
    background-repeat: no-repeat;
    float: left;
    width: 19px
}

.treetable .trunk {
    background-image: url(https://paymentcardtools.com/resources/line-trunk.gif);
    background-repeat: repeat-y;
    cursor: pointer;
    display: block
}

.treetable .end {
    background-image: url(https://paymentcardtools.com/resources/tv-line-last.gif);
    background-position: 0;
    background-repeat: no-repeat;
    cursor: pointer
}

.roww {
    width:30vw
}


#emv_tlvparserpanel  .sb_label {
    flex: 0.15;
    font-size: 14px;    
}

#tlvparsereditor {
    font-size:var(--theme-sfont-size);
}

#emv_box_tlvparser .sb_boxbody {
    max-height: unset;
}

/*----------------------------------------------------------------------------- APPLICATION PANEL -------------------------------------------------------------------------------*/

#emv_AIDPanel #emv_aidPanel {
    max-width:300px;
    padding: .375rem .75rem;
    font-size: var(--theme-font-size);
}

/*----------------------------------------------------------------------------- MANAGER PANEL -------------------------------------------------------------------------------*/

#emv_projects_sidepanel .formcontrol {
    max-width:300px;
    padding: .375rem .75rem;
    font-size: var(--theme-font-size);
}

/*--------------------------------------------------------- TREE ------------------------------------------------------*/

#emv_tree_applications, #emv_tree_terminals, #emv_tree_acquirer, #emv_tree_acceptor {
    display:none;
}



/*----------------------------------------------------------------------------- TESTER PANEL -------------------------------------------------------------------------------*/

#emv_tester_panel {
    flex:1;
}

#emv_tester_terminalpanel {
    height: 30px; 
    flex:none;   
}

#emv_tester_terminalpanel.toggled {
    flex:1;
}

#emv_tester_cardpanel {
    height: 30px;
    flex:none;           
}

#emv_tester_cardpanel.toggled {
    flex:1;
}

#emv_tester_recordbar {
    padding: 10px;
    height: 60px;
    flex: none;
}

#emv_tester_commandpanel {
    flex:0;
}

#emv_tester_stepsbar {
    justify-content: center;
}


#emv_tester_commandgroup {
    padding: 10px;
}

#emv_tester_terminalinput {
   /* border-top: 1px solid var(--theme-button-border-color);*/
}

#emv_card_input {
   /* border-top: 1px solid var(--theme-button-border-color);*/
}

#emv_tester_play_button {
    width:59px;
}

#emv_tester_start_button {
    width:30px; 
}

#emv_tester_forward_button {
    width:30px; 
}

#emv_tester_stepsgroup {
    flex-wrap: wrap;
}

#emv_tester_filtergroup {
    flex-wrap: wrap;
    flex: 1;
    height: 50px;
    overflow: hidden;
    flex-direction: column;
    background: var(--theme-form-bg-color);
    border: 1px solid var(--theme-button-border-color);
}    


#emv_tester_filtergroup span{
    width: 58px;
}

/*----------------------------------------------------------------------------- ADPU  -------------------------------------------------------------------------------*/

#emv_apdupanel {
    height:30px;
    flex:none;
}

#emv_apdupanel.toggled {
    flex:1;
}

#apdu_table  td {
    text-align: center;
    line-height: inherit;
    border-top: 1px solid var(--theme-button-border-color);
    border-left: 1px solid var(--theme-button-border-color);
}


#emv_apdutreepanel {
    font-size: var(--theme-sfont-size);    
    font-family: Calibri, sans-serif;    
    overflow:auto;
    color:var(--theme-color);
    margin-top: -1px;  
   /* border-top: 1px solid var(--theme-button-border-color);        */
}

#emv_apdutreepanel .sb_formcontainer {
    padding: 7px;
    border: 1px solid var(--theme-border-color);
}

#emv_apdu_roottree {                                         /* root span */
    display:none;
}

#emv_apdu_roottree .treenode .sb_link[step^="3"] {
    background: var(--theme-bg-color);
   
 } 

.emv_apdutreeclass label {
    width: 40px;
    padding: 0px 0px;
}

.emv_apdutreeclass .sb_widget {
    width: unset;
    height: unset;
}

.emv_apdutreeclass .sb_formgroup label {
    justify-content: center;
    min-width: 50px;
} 

.emv_apdutreeclass .sb_formgroup div {
  /*  border: 1px solid var(--theme-border-color);*/
} 

.emv_apdutreeclass span.tagextension   {
    height: unset; 
} 

.emv_apdutreeclass span.tagextension input {
    color:rgb(255, 182, 132) !important  ;
} 

.emv_apdutreeclass .sb_link input:first-child {
    cursor:pointer;    
    background: transparent !important;    
    color: var(--theme-color);    
}

#emv_apdu_roottree_ref  > li > ul >li > span.selected,
#emv_apdu_roottree_ref  > li > ul >li > span.selected div span {
    border: 1px solid var(--theme-emv-select);
    color: var(--theme-main-color);
}

.emv_apdutreeclass .rapduerror span  {
    color: #ff5858 !important; 
    background: var(--theme-hover-bg-color) !important; 
    border: 1px solid #5e4037 !important; 
}

.emv_apdutreeclass .searchtag,
.emv_apdutreeclass .searchtag span {
    border : 1px solid var(--theme-emv-select);
}

.emv_apdutreeclass .searchtag + * {
    border : 1px solid var(--theme-emv-select);
}

#emv_apdu_tree_bar {
    width:100%;
}


/*------------------------------------------------- TRANSACTION TAGS TABLE -----------------------------------------------*/

#emv_transactiontagspanel {
    height:30px;
    flex:none;
}

#emv_transactiontagspanel td {
    line-height: inherit;
    border-top: 1px solid var(--theme-button-border-color);
    border-left: 1px solid var(--theme-button-border-color);
}

#emv_transactiontagspanel td:nth-child(3) {
    max-width: 300px;
}


#emv_transactiontagspanel #emv_transactiontags_tablepanel {
    display:none;
}

#emv_transactiontagspanel.toggled {
    flex:1;
}

#emv_transactiontagspanel.toggled #emv_transactiontags_tablepanel {
    display:flex;
}

#emv_transactiontags_tablepanel {
   /* border-top: 1px solid var(--theme-button-border-color);        */
    margin-top: -1px;    
}

#emv_transactiontags_table_info {

   /* display:none; */
}


/*----------------------------------------------------------------------------- INFO PANEL -------------------------------------------------------------------------------*/

#emv_tester_toprightpanel .sb_tab {
   /* height:24px;*/
}

#emv_tester_toprightpanel .sb_bar {
  /*  min-height:unset; */

}

#emv_tester_toprightpanel .sb_f_classic {
  /*  font-size:11px !important;*/
}

#emv_tester_terminalbyteinfo,
#emv_tester_cardbyteinfo {
   /* height :450px; */
}

#emv_tester_cardpage,
#emv_tester_terminalpage {
   /* width: 380px !important; */
   /* max-width: 380px;         */
   /* padding: 0px 0px 0px 10px;*/
}

#emv_tester_cardpage .bytepanel,
#emv_tester_terminalpage .bytepanel{
   /* padding: 5px;*/
}


#emv_tester_cardpage td:nth-child(9),
#emv_tester_terminalpage td:nth-child(9) {
    width: 220px !important;
    max-width: 220px;
}

#emv_tester_tacpanel, #emv_tester_iacpanel {
    flex:1;
}

#emv_tester_tacpanel td:nth-child(9),
#emv_tester_iacpanel  td:nth-child(9) {
    width: 220px !important;
    max-width: 220px;
}

#emv_tester_terminalbyteinfobar,
#emv_tester_cardbyteinfobar {
   /* background: var(--theme-platform-color); */
}

#emv_tester_sidebarpanel .emvbyte td:nth-child(9) {
    width: 220px !important;
    max-width: 220px;
}

/*----------------------------------------------------------------------------- ACCEPTOR SECTION -------------------------------------------------------------------------------*/

#emv_acceptor_section {
    flex-wrap: wrap;
}

/*----------------------------------------------------------------------------- TERMINAL SECTION -------------------------------------------------------------------------------*/

#emv_terminals_section {
    flex-wrap: wrap;
}

/*----------------------------------------------------------------------------- CVM PANEL -------------------------------------------------------------------------------*/

.cvmpanel {
    font-size: var(--theme-sfont-size);
    font-family: Calibri, sans-serif;
    text-transform: uppercase;
}

/*----------------------------------------------------------------------------- TERMINAL TYPE PANEL -------------------------------------------------------------------------------*/

.ttpanel {
  /*  padding:10px;*/
}

.ttpanel .TT_value:hover {
    color : var(--theme-hover-color) !important;
}

.ttpanel .TT_value.selected {
    color : var(--theme-emv-select) !important;
    background: var(--theme-select-bg-color) !important;
}

#emv_tt_Panel {
    /*padding:10px;*/
}

/*----------------------------------------------------------------------------- TERMINAL COUNTRY CODE PANEL -------------------------------------------------------------------------------*/

#emv_TCCPanel #emv_tccPanel {
    max-width:300px;
    padding: .375rem .75rem;
    font-size: var(--theme-font-size);    
}

#emv_TCCPanel span {
    justify-content:left !important;
    padding:10px;    
}

/*----------------------------------------------------------------------------- TERMINAL SERIAL PANEL PANEL -------------------------------------------------------------------------------*/

#emv_TSNPanel #emv_tsnPanel {
    max-width:300px;
    padding: .375rem .75rem;
    font-size: var(--theme-font-size);
}

#emv_TSNPanel span {
    justify-content:left !important;
    padding:10px;     
}

/*----------------------------------------------------------------------------------- TAG HEADERS --------------------------------------------------------------------------*/

.tagheader {
    margin: 0;
    text-transform: uppercase;
    font-family: inherit;
    font-weight: 400;
    line-height: 1.1;
    font-size: var(--bs-nav-link-font-size);
    color: var(--theme-main-color);
    justify-content: left;
    height: 35px;    
    padding: 15px 0px 15px 5px !important;
}

#treenode-emvmanager-0 {
    display:none;
}

#emv_root .treenode {
    text-transform: uppercase;
   /* color: var(--theme-main-color); */
}

/*----------------------------------------------------------------------------- RIGHT SIDE PANEL -------------------------------------------------------------------------------*/

#emv_tester_maintop {
    position:relative;
}

.emv_tester_sidebarpanel {

    font-size: var(--theme-sfont-size);
    position: absolute;
    inset: -1px 0px 0px calc(100% - 50px);
    transition: transform .3s cubic-bezier(0,0,.3,1);
    border-radius: 10px 0px 0px 10px;
    height: 100%;
    width: 450px;
    padding-left: 13px;
    padding-right: 3px;
    margin: 0px 0px 0px 0px;
    border-top: 1px solid var(--theme-border-color);
    border-bottom: 1px solid var(--theme-border-color);
    color: var(--theme-color);
    background: var(--theme-main-bg-color); 
    z-index: 9;
}

.emv_tester_sidebarpanel.toggled {
    display: flex;    
    transition: transform .3s cubic-bezier(0,0,.3,1);
    transform: translate(-450px, 0px);   
}


.emv_tester_sidebarpanel.pinned {
    position: static;    
    display: none;    
    width: 450px;
    padding-left: 3px;   
    padding-right: 3px;       
    overflow: hidden;  
    flex-direction: column;
    flex:none;  
    height: unset;
    border-radius: unset;
    border-top: none;
    border-bottom: none;    
}

.emv_tester_sidebarpanel.pinned .sb_rightsidebarheader {
    border-radius:0px;
    margin: -1px 0px 0px -4px;    
}

.emv_tester_sidebarpanel.toggled.pinned {
    display: flex;    
    transition: none;
    transform: none;    
}

#emv_tester_sidebarheader label {
    font-size: 12px;
    /* color: var(--theme-platform-color); */
    background: #0299cf !important;
    border: 0px solid #5e4037 !important;

}
#emv_tester_sidebarheader .sb_sidebarheadertitle {
    flex-flow: column;
}