:root {
  --HDR_SIZE : 47px;
}
html {
  width:100%;
  height:100%;
}
body {
  background-color: #F2F2F2;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #414141;
  margin: 0px 0px;
  padding: 0px 0px;
  border:0px;
  width:100%;
  height:100%;
}

img { border:0px;padding:0px;margin:0px;}
ul{  list-style-type: none;  margin: 0px;  padding:0px;border:0px;}


/* Input, Textarea Form elements... */
input,textarea,select {
    border : 2px solid #999;
    border-radius :5px;   
    padding:7px;
    margin: 0px;
    font-size : 1em;
    font-family : Arial;
}
input.small,textarea.small,select.small {
    font-size : 12px;
    border-radius :3px;
    padding:2px;
}
input[type="checkbox"].selector{
    width: 14px;
    height: 14px;
    position: relative;
}            
input[type="checkbox"].selector::before {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    border: solid 2px black;
    background-color: white;
    /* background: radial-gradient(#940506,#ca9090); */
    content: "";
    position: absolute;
    margin-left: -2px;
    margin-top : -2px;
}
input[type="checkbox"].selector:checked::before {
    background : radial-gradient(circle at center, #49b56d 0, #49b56d, #f3f5f3 100%);
    /* background: radial-gradient(#009933,#aedbbd); */
    content: "";
}


input:hover,textarea:hover, select:hover,input:focus,textarea:focus, select:focus {
    border-color : #555555;
}

input::placeholder,textarea::placeholder, select::placeholder{
	color:#ccc;
}

input:read-only{
	background-color:#E8E8E8;
}

/* Input, Textarea Form elements... */
input.input_ko,textarea.input_ko,select.input_ko {
    border : 4px solid red;
}


/* Form Table (left side : field name, right side= inputs*/
/*
<table class="form_table">
<tr>
  <th>Field 1</th>
  <td class="filler"/>
  <td><input type="text" placeholder="yo"></td>
</tr>
<tr>
  <th>Field 2</th>
  <td class="filler"/>
  <td><input type="text" placeholder="yo2"></td>
</tr>
</table>
*/


#D4_TOP {
    display: flex;
    position: relative;
    top: 0px;
    flex-flow: row nowrap;
    width: 100%;
    background: linear-gradient(to right, black , #43718f);
    z-index: 750;
}


#D4_toolbar_menu {
  padding: 0px 20px;
/* not required?
  height:45px; */
  /*border: 1px solid white;*/
  text-align:center;
  /* transition: visibility 0s, opacity 0.5s linear; */
  /* opacity : 0; */
  /* visibility:hidden; */
}
#D4_toolbar_menu.active,#D4_toolbar_menu:hover {
  background-color: #43718F;
  /* visibility:visible; */
  /* opacity : 1; */
}

#D4_logon{
    position:absolute;
    top:0px;
    left:0px;
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-flow: column nowrap;
    align-items: center; 
    justify-content: center; 
}

#D4_logon div.shadow{
    width: 100%; 
    height: 100%; 
    opacity: 0.8; 
    background-color: rgb(0, 0, 0); 
    z-index: 9501; 
    position: absolute; 
    top:0px;
    color: rgb(255, 255, 255);
}
#D4_logon div.shadow_login{
    width: 100%; 
    height: 100%; 
    opacity: 0.5; 
    background-color: rgb(0, 0, 0); 
    z-index: 9503; 
    position: absolute; 
    top:0px;
    display:none;
    color: rgb(255, 255, 255);
}

#D4_logon div.prompt{
    position: absolute;
    top: 25%;
    width: 500px;
/*     height: 400px;
 */    /* border: 2px solid white; */
    border-radius: 25px;
    /* background: linear-gradient(170deg,#112e3c,#4d87b5); */
    opacity: 1;
    font-size: 20px;
    z-index: 9502;
    color: white;
    background-color: #4d4d4d;
}
#D4_logon .sso{
    /* display: inline-block; */
    /* transform: translateY(-50%); */
    vertical-align: middle;
    margin-left: 20px;
    border-left: solid 2px black;
    padding-left: 30px;
}

#D4_logon select { font-size: 12px;}
/* #D4_logon input { font-size: 12px;} */
#D4_logon select { font-size: 12px;}

.login-field {
    font-size: 12px;
    position: relative;
    height: 59px;
    padding: 12px 0 8px 0;    
}
.login-field-label{
    position: relative;
    margin: 0;
    display: block;
 
    color:  #bfbfbf;
    line-height: 16px;
    font-size: 16px;
    font-weight: 400;
 
    transform: translateY(20px);
    transition: transform 0.3s, color 0.3s;
    transform-origin: 0 50%;
 }
 .login-field-input{
    position: relative;
    display: block;
    width: 100%;
    height: 22px;
    padding: 5px 8px 3px 8px;
    color:white;
 
    line-height: 16px;
    font-family: Roboto;
    font-size: 16px;
 
    background: transparent;
    border: none;
    -webkit-appearance: none;
    outline: none;
 }
 .login-field::after, .login-field::before{
    content:'';
    height: 2px;
    width: 100%;
    position: absolute;
    bottom: 6px;
    left: 0;
 
    background-color: #e6e6e6;
 }
 
 .login-field::after{
    background-color: rgb(115, 164, 207);
    transform: scaleX(0);
    transition: transform 0.3s;
 }

 .has-label .login-field-label{
    transform: translateY(0) scale(0.75);
 }
 
 .is-focused .login-field-label{
    color: rgb(202, 211, 214);;
 }
 .login-field.is-focused::after{
    transform: scaleX(1);
 }


#D4_logo {
  padding: 0px 35px 0px 20px;
  height:47px;
  line-height: 47px;
  /*width:150px;*/
  vertical-align: top;
  color:white;
  font-size:1.5em;
}

#D4_navbar_cont {
  padding: 0px 20px;
  height:47px;
  vertical-align:top;
  padding:0px;
}
#D4_navbar{
  height:47px;
  list-style-type: none;
  margin: 0px;
  padding:0px;
  vertical-align:top;
  display:flex
}


#D4_user {
  padding: 0px 20px;
/* not required?
height:45px; */
  border: 1px solid white;
  text-align:center;
  margin-left: auto;
}
#D4_user.active,#D4_user:hover {
  background-color: black;
}

#D4_usermenu {
    position: absolute;
    top     : 47px;
    right   : 0px;
    margin  :0px;
    padding :0px;
    /*background-color: #43718F;
     background-color: black;*/
    background: linear-gradient(210deg,black,#43718F);     
    padding : 10px;
    border-radius: 0px 0px 0px 15px;
    min-width: 200px;
    /*height: 10%;*/
    z-index : 650;
    display : none;
}



.D4_menuobj{
    background-color: white;
    border-radius:8px 2px 8px 2px;
    padding:10px 10px;
    margin : 20px 10px;
    color:#43718F;
    font-weight:bold;
    font-size: 1.2em;
}


#D4_notifs{
    position:fixed;
    top:0px;
    right:0px;
    width:260px;
    vertical-align: top;
    z-index:9999;

}
ul.D4alert {
    list-style-type: none;
    padding: 5px 10px;
    margin-bottom: 8px;
    margin:0px; 
    text-align: left;
    text-indent: 5px;
    font-size: 16px;
    font-weight: bold; 
}

ul.D4alert li{
    background-color:#f2dede;
    border-radius: 5px;
    padding: 10px 5px;
    vertical-align: middle;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 10px;
    display:flex;
}
ul.D4alert div {
    margin-top: auto;
    margin-bottom: auto;
}
ul.D4alert img {
    width:30px;
}

ul.D4alert li.info {
    background-color: #dff0d8;
    color: #3c763d;

}
ul.D4alert li.alert {
    background-color:#f2dede;
    color: #a94442;
}
ul.D4alert li.warning {
    background-color:#f5dea4;
    color: #711614;
}
.span{
    width:100%;height:100%;
}
.table{
    display : table;
    table-layout: fixed;
}
.row{
    display : table-row;
}
.cell{
    display : table-cell;
    vertical-align: top;
}

/* Positionning Helpers Class*/
.centered {
    position:relative;top: 50%;transform: translateY(-50%);
}

/* Positionning Helpers Class*/
/* To be applied within a <div style="display:inline-flex">*/
div.align_left {
    margin-right: auto;
    margin-left: 0;
    text-align: left;                
}
/* To be applied within a <div style="display:inline-flex">*/
div.align_right {
    margin-left: auto;
    margin-right: 0;
    text-align: right;                
}

.clickable{cursor:pointer;}
.hidden{display:none !important;}
.tab_body_inactive{display:none;}

/* Button */
.button1 {
    min-height:30px;
    min-width:100px;
    padding: 0px 15px;
    border : 2px solid transparent;
    border-radius : 15px;
    background-color:#232d34;
    color:white;
    cursor:pointer;
}

.button1.selected,.button1:active {
    background-color:#1EA2C7;
}

.button1:hover {
    border : 2px solid rgb(202, 219, 194);
    background-color:#4a7490;
    /* border: 2px solid transparent; */
    /* background-color: #4a7490; */
    transition: background-color 0.2s ease-out;    
}

/* Tab */
.tab1 {
    min-height:30px;
    min-width:100px;
    padding: 7px 15px;
    border : 1px solid transparent;
    border-radius : 15px 15px 0px 0px;
    background-color:#444;
    color:white;
}

.tab1.selected {
    background-color:#43718F;
    color:white;   
}

.tab1:hover {
    border : 1px solid black;
}

.tab_text1 {
    font-size : 16px;
}

.tab2 {
    min-height:30px;
    min-width:100px;
    padding: 0px 15px;
    margin-right: 3px;
    border : 3px solid transparent;
    border-radius : 0px 0px 15px 15px ;
    background-color:#c2cde1;;
    /* background-color:#444;
    color:white; */
    cursor:pointer;
    outline: none; /* for chrome selection highlighting*/
    
}
.tab2.selected, .tab2:active,.tab2.selected:hover {
    background-color:#43718F;
    color:white;
}
.tab2:hover {
    border : 3px solid #43718F;
    border-top : 3px solid transparent;    
    background-color: #ffffff;
    color: #43718f;
    transition: background-color 0.5s ease-out;    
}

/* Small  horizontal tabs */
.tab3 {
    padding: 2px 10px;
    min-width:80px;
    margin-right: 5px;
    border : 2px solid transparent;
    border-radius : 0px 0px 5px 5px ;
    background-color:#444;
    color:white;
    outline: none; /* for chrome selection highlighting*/
}
.tab3.selected, .tab3:active {
    background-color:#43718F;
    color:white;
}
.tab3:hover {
    border-color :  #43718F;
    border-top-color : transparent;    
}



.tab4 {
    min-height:30px;
    min-width:100px;
    padding: 0px 15px;
    border : 3px solid transparent;
    border-radius : 0px 0px 0px 5px ;
    background-color:#444;
    color:white;
    outline: none; /* for chrome selection highlighting*/
    display: flex;
    flex-direction: row;
    align-items: center;    
    
}
.tab4.selected, .tab2:active {
    background-color:#43718F;
    color:white;
}
.tab4:hover {
    background-color:#4c8e97;
}


/**************************
  LIST Table
**************************/

/* Result table*/
/* Header*/
table.result_table {
    font-size:12px;
}


table.result_table>thead>tr>th {
  background-color: #000;
  color:white;
  padding:5px;
}

/* Data*/
table.result_table>tbody>tr>td{
  padding:1px 4px;
}
table.result_table>tbody>tr:nth-child(odd){
  background-color: #ddd;
}
table.result_table>tbody>tr:hover{
  background-color: #444;
  color:white;
}

table.result_table img.icon{
  height:15px;
  padding:2px 5px;
}


/**************************
  FORMS
**************************/
table.form_table {
border : 0px solid transparent;
margin:0px;
border-collapse: collapse;
}

table.form_table>tbody>tr>th {
    width : 150px;
    text-align: right;
    padding: 10px 15px;
    background-color:#EFF5FB;
    font-size : 16px;
}
table.form_table.small>tbody>tr>th {
    width : 100px;
    text-align: right;
    padding: 10px 5px;
    background-color:#EFF5FB;
    font-size : 12px;
}
table.form_table.Small>tbody>tr>td.filler {
	width:5px;
    background-color:black;
    padding:0px;

}
table.form_table>tbody>tr>td {
	padding: 10px 20px;
    font-size : 12px;
}
table.form_table.small>tbody>tr>td {
    padding: 10px 10px;
    font-size : 12px;
}

table.form_table>tbody>tr>td.filler {
    width:2px;
    background-color:black;
    padding:0px;
}



ul.form_table {
    border : 0px solid transparent;
    margin:0px;
    border-collapse: collapse;
    vertical-align: middle;
    display: flex;
}
ul.form_table>li:first-child {
    width:175px;
    border-right: 3px solid black;
    text-indent: 10px;
    text-align:right;
    background-color:#EFF5FB;
    padding: 10px 10px;
    vertical-align: middle;
    font-size : 14px;
    font-weight:bold;
}
ul.form_table>li:nth-child(2){
	padding: 10px 20px;
    font-size : 12px;
    vertical-align: middle;
    border-top: solid 1px #d0d0d0;
    width: 100%;    
}


form.elem_edit_form input[type="text"],textarea {
  width : 250px
}
ul.form_table input[type="text"],textarea {
    width : 250px
  }
.form_table_S input[type="text"],textarea {
    width : 250px
}

ul.form_table_S {
    border : 0px solid transparent;
    margin : 0px;
    border-collapse: collapse;
    vertical-align: middle;
    display: flex;
}
ul.form_table_S>li:first-child {
    width: 150px;
    border-top: 1px solid rgb(169, 215, 245);
    text-indent: 10px;
    text-align: right;
    background-color: #385f78;
    padding: 20px 10px;
    vertical-align: middle;
    font-size: 12px;
    font-weight: bold;
    color: white;
}
ul.form_table_S>li:nth-child(2){
    width   : 100%;
    padding : 10px 20px;
    font-size : 12px;
    background-color : white;
    vertical-align   : middle;
    border-top: 1px solid #c9d4dc;    
}
ul.form_table_S>li:nth-child(2):hover{
    background-color:  #dbe4f3
}
ul.form_table_S input.readonly,select.readonly,textarea.readonly {
    background-color : transparent;
    border:0px;
}

ul.form_table input.readonly,select.readonly,textarea.readonly {
    background-color : transparent;
    border:0px;
}





ul.prompt {
    border : 0px solid transparent;
    margin : 0px;
    border-collapse: collapse;
    vertical-align: middle;
    display: flex;
    margin-bottom: 3px;
    margin-left: auto;
    margin-right: auto;
}

ul.prompt>li:first-child {
    width:110px;
    border-right: 3px solid black;
    text-indent: 10px;
    text-align:right;
    padding: 20px 10px;
    vertical-align: middle;
    font-size : 12px;
    font-weight:bold;
}
ul.prompt>li:nth-child(2){
    width   : 250px;
    text-align:left;
    padding : 10px 20px;
    font-size : 12px;
    vertical-align   : middle;
}


.parameter {
    background-color: #3e6985;
    border-radius: 4px;
    padding-right: 5px;
    padding-left: 5px;
    color: #fdfdfd;
    margin-right: 3px;
    margin-left: 0px;
    margin-top: 2px;
    margin-bottom: 2px;
    font-size:0.9em;
    display:inline-block;
}
.highlight {
    background-color: #67737a;
    border-radius: 4px;
    padding-right: 5px;
    padding-left: 5px;
    color: #fdfdfd;
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 2px;
    margin-bottom: 2px;
}

/**************************
IMG css
***************************/

img.icon15{
    max-height:15px;
    max-width:15px;    
}
img.icon20{
    max-height:20px;
    max-width:20px;    
}
img.icon30{
    max-height:30px;
    max-width:30px;    
}
img.iconh15{    height:15px;}
img.iconh20{    height:20px;}
img.iconh25{    height:25px;}
img.iconh30{    height:30px;}
img.iconh40{    height:40px;}
img.icon40{
    max-height:40px;
    max-width:40px;    
}

img.iconH15{    height:15px;}
img.iconH20{    height:20px;}
img.iconH25{    height:25px;}
img.iconH30{    height:30px;}
img.iconH40{    height:40px;}


.font10{font-size : 10px;}
.font12{font-size : 12px;}
.font16{font-size : 16px;}


/**************************
  HEADERS
**************************/
div.hdr_35{
    background-color:#222;
    height:35px;
    line-height:35px;
    font-size:24px;
    color:white;
    text-align:left;
    padding:10px 10px 10px 20px;
    border-top: solid 1px black;
}
div.hdr_30{
    background-color:#444;
    height:30px;
    line-height:30px;
    font-size:22px;
    color:white;
    text-align:left;
    padding:8px 8px 8px 20px;
    border-top: solid 1px black;
}
div.hdr_25{
   /* background: linear-gradient(to right, #1e3340 , #43718f);;*/
    background-color:  #1e3340 ;
    height:25px;
    line-height:25px;
    font-size:20px;
    color:white;
    text-align:left;
    padding:8px 8px 8px 20px;
    border-top: solid 1px black;
}
div.hdr_20{
    background-color:#888;
    height:20px;
    line-height:20px;
    font-size:18px;
    color:white;
    text-align:left;
    padding:8px 8px 8px 20px;
    border-top: solid 1px black;
}

/**************************
  TAB_MENU
**************************/

div.tab_menu{
    text-align : left;
    border :0px;
    border-right : 5px solid black;
    width: 250px;
    background-color: #3e5d7d;
    position: relative;
    display: inline-block;
    margin-left: 0px;
    transition: all 0.4s ease 0s;
}

div.tab_menu>ul{
    list-style-type: none;
    padding:5px 10px;
    background-color: white;
    border-radius: 0px 5px 0px 5px;
    margin: 15px 15px 3px 15px;
    text-align:left;
    text-indent: 5px;
    font-size:16px;
    font-weight:bold;
    padding-top:15px;
}
div.tab_menu>ul>li {
/*    border: 3px solid transparent;*/
    border-left: 4px solid transparent;
    padding: 10px 5px;
    vertical-align:middle;
    font-size:14px;
    font-weight:normal;
    word-break: break-all;
}
div.tab_menu>ul>li>img {
    vertical-align: middle;
    margin-right:  5px;
}
div.tab_menu>ul>li:hover {
    border-left: 4px solid black;
    /*border-radius: 5px;*/
    background-color:#eee;
    transition: border-left 0.5s ease-out;
}
div.tab_menu>ul>li.selected {
/*    border: 3px solid #3c7fc3;
    border-radius: 5px;*/
    border-left: 4px solid #3c7fc3;
    font-weight:bold;
    transition: border-left 0.5s ease-out;
    /*border-radius: 5px;*/
    /*background-color:#e; */
}


/**************************
  TAB_MENU (table format)
**************************/
table.tab_menu{
    text-align : left;
    width  :100%;
    height :100%;
    border :0px;
    margin :0px;
    padding: 0px;
    border-collapse: collapse;
}
table.tab_menu>tbody>tr>td:first-child {
    width: 225px;
    font-size:1em;
    vertical-align:top;
    text-align: left; 
    border-radius : 0px 0px 0px 7px;
    color:black;
}
table.tab_menu>tbody>tr>td{
    vertical-align:top;
    text-align: left; 
    padding: 0px;
    margin: 0px;
}
table.tab_menu>tbody>tr>td.filler{
    width:5px;
    background-color:black;
}
table.tab_menu>tbody>tr>td:first-child>ul{
    list-style-type: none;
    padding:5px 10px;
    background-color: white;
    border-radius: 0px 5px 0px 5px;
    margin: 15px 15px 3px 15px;
    text-align:left;
    text-indent: 5px;
    font-size:16px;
    font-weight:bold;
    padding-top:15px;
}
table.tab_menu>tbody>tr>td:first-child>ul>li {
/*    border: 3px solid transparent;*/
    border-left: 4px solid transparent;
    padding: 10px 5px;
    vertical-align:middle;
    font-size:14px;
    font-weight:normal;
}
table.tab_menu>tbody>tr>td:first-child>ul>li>img {
    vertical-align: middle;
    margin-right:  5px;
}
table.tab_menu>tbody>tr>td:first-child>ul>li:hover {
    border-left: 4px solid black;
    /*border-radius: 5px;*/
    background-color:#eee;
}
table.tab_menu>tbody>tr>td:first-child>ul>li.selected {
/*    border: 3px solid #3c7fc3;
    border-radius: 5px;*/
    border-left: 4px solid #3c7fc3;
    font-weight:bold;
    /*border-radius: 5px;*/
    /*background-color:#e; */
}



/**************************
  TAB_MENU_Onglets horiz
**************************/
ul.h_tab_menu{
    display:flex;
}
ul.h_tab_menu>li{
    list-style-type: none;
    margin: 5px 10px 0px 5px;
    padding: 5px 18px 10px 18px;
    border-radius: 5px 5px 0px 0px;
    border-top: 3px solid transparent ;
    background-color: #43718f;
    color:white;
    text-align: center;
    font-size: 14px;
    cursor:pointer;
}
ul.h_tab_menu>li:hover {
    border-top: 3px solid black;
    /*border-radius: 5px;*/
    background-color:#43718f;
    color:black;
}
ul.h_tab_menu>li.selected {

    border-top: 3px solid #3c7fc3;
    font-weight:bold;
    background-color: #dae5ff;
    color:black;
}

/*
data menu 
*/
.datamenu{
    list-style-type: none;
    background-color: #cecece;
    /* border-radius: 0px 3px 0px 3px; */
    padding-top: 11px;
    border-top: 2px solid black;
    text-align: left;
    text-indent: 5px;
    font-size: 14px;
    font-weight: bold;
    vertical-align: middle;
    /* line-height: 20px; */
    margin: 0px;    
}
.datamenu>li {
    border-left: 6px solid transparent;
    border-bottom: 1px solid black;
    height: 40px;
    line-height: 40px;
    padding: 0px 5px;
    vertical-align:middle;
    font-size:12px;
    font-weight:normal;
    background-color:#fff;
    justify-content: space-between;
    display:flex;
    flex-flow: row nowrap;    
}

.datamenu>li img {
    border:1px solid transparent;
    height : 20px;
    transform: translateY(10px);
    vertical-align: middle;
    margin-right:  3px;
}
.datamenu>li img:hover {
    border:1px solid #43718f;
}

.datamenu>li:hover {
    border-left: 6px solid #03718f;
    /*border-radius: 5px;*/
    background-color : #c9eef9;
}
.datamenu>li.selected {

    border-left: 6px solid #03718f;
    font-weight:bold;
    background-color:white;
}



/* Table of results*/
/* table.list_table>thead>tr>th {
    background-color: #9c9b9b;
    border-radius: 5px 5px  0px 0px;
    padding:5px 15px;
}

table.list_table>tfoot>tr>th {
    background-color: #9c9b9b;
    height: 5px;
    border-radius: 0px 0px 5px 5px; 
} */

table.result_list {
    border: 1px solid #9c9b9b;
    border-collapse: collapse;
}
table.result_list>thead>tr>th {
    padding: 2px 5px;
    border: 1px solid #9c9b9b;
    background-color: black;
    font-size: 12px;
    color: #c8eafb;
    font-weight: bold;
    height: 24px;
}

table.result_list>tbody>tr{
    padding: 3px 5px;
    background-color:white;
    color: #43718F;
}

table.result_list>tbody>tr.selected {
    background-color:#91c4d4;
}
table.result_list>tbody>tr:hover{
  background-color:#6397a7;
  color:white;
}
table.result_list>tbody>tr:hover select.readonly{
  color:white;
}
table.result_list>tbody>tr:hover input.readonly{
  color:white;
}
table.result_list>tbody>tr>td {
    border: 1px solid #9c9b9b;
    border-collapse: collapse;
    padding: 3px 5px;
}

/* TOOLTIP (replacement of "title"*/
.tooltip {
    position: relative;
    vertical-align: middle;    
    display: inline-block;
    padding: 0px 3px;
  }

.tooltip .tooltiptext {
    visibility: hidden;
    width: 250px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 5px;
    font-size : 11px;
    /* Position the tooltip */
    position: absolute;
    z-index: 1000;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    transition: all 0.5s;
}

.CodeMirror {
    resize: both;
    /* overflow: auto !important; */
    border: 1px solid #eee;
    height: auto
}
  

  .leftpanel {
    background-color: #8195ab;
    color:white;
  }


.grouptree-item{
    border-left: 1px dotted#bbb3b3;
    padding-left: 7px;
    margin-left: 3px;
}