div.dt-button-collection {
  position:absolute;
  top:0;
  left:0;
  width:150px;
  margin-top:3px;
  padding:1px 1px 1px 1px;
  border:1px solid black;
  border:1px solid rgba(0,0,0,0.4);
  background-color:black;
  overflow:hidden;
  z-index:2002;
  border-radius:5px;
  box-shadow:3px 3px 3px 3px rgba(0,0,0,1);
  box-sizing:border-box
}

div[role='menu']>button , 
.nfsButton , .spButton , .spDP , .spDate, .spBlack ,
 input[name="Παρατηρήσεις"], input[name="Παρατηρήσειςgr"] {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px black;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
   /* background-image: linear-gradient(to top, darkgray 0%, black 50%, darkgray 100%);*/
    background-image: linear-gradient(to top, rgb(50, 50, 50) 0%, rgb(0, 0, 0) 50%, rgb(50, 50, 50) 100%);
    color: #FFF;
    text-decoration: none;
    text-transform: none;
    cursor:pointer;
/*-webkit-user-select: none; 
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;*/
  }
div[role='menu'],.dt-button-collection{
  background :  black;
  cursor:default;
} 
div[role='menu']>button:disabled ,.nfsButton:disabled,.spButton:disabled,.spBlack:disabled,
.spDP:disabled ,.spDate:disabled ,
 input[name="Παρατηρήσεις"]:disabled,input[name="Παρατηρήσειςgr"]:disabled{
  /*background-color: #ddd;*/
  background :  #696969;
  cursor:default;
}
.nonButton{
   background:none;
    border: none;
    cursor:default; 
    display: inline-block;
    padding: 5px 5px;
    white-space: nowrap;
    text-align:left;
    color: #FFF;
}
.spButton{width: 100%;}
.nonButton{
    text-decoration: none;
    width: 100%;
}
 input[name="Παρατηρήσεις"]  {
    line-height: 200%;
    width: 100%;
 }     
 input[name="Παρατηρήσειςgr"] {
    line-height: 200%;
    width: 80%;
 }     
.spButton ,.spBlack {
    display: inline-block;
    padding: 5px 5px;
    white-space: nowrap;
    text-align:left;
}
.spDP {
    display: inline-block;
    text-align:center;
    width: 75px;
    line-height: 200%;
}  
.spDate {
    display: inline-block;
    text-align:center;
    line-height: 200%;
}  

.nfsButton {
    display: block;
    white-space: nowrap;
    width: auto;
    line-height: 200%;
}

div[role='menu']>button:hover ,div.dt-button-collection,
.nfsButton:hover , .spButton:hover ,
.spBlack:hover:not(:disabled) {
  background-image: linear-gradient(to top, black 0%,darkgray  50%, black 100%);
}
div[role='menu']>button:active , div.dt-button-collection ,
.nfsButton:active ,.spButton:active,
.spBlack:active:not(:disabled) {
    background: darkgray; 
} 

div[role='menu']>button:hover ,div[role='menu']>button:active{
    color:black;
  background-image: linear-gradient(to top, black 0%,darkgray  50%, black 100%);
}

a[data-title]  {
  position: relative;
  cursor : pointer;
}

a[data-title]:hover::before  {
  content: attr(data-title);
  position: absolute;
  bottom : -60%;
  display: inline-block;
  padding: 3px 6px; 
  border-radius: 2px;
  background: #000;
  color: #fff;
 /* background-image: linear-gradient(to top, gray 0%, black 50%, gray 100%);*/
    background-image: linear-gradient(to top, rgb(70, 70, 70) 20%, rgb(0, 0, 0) 50%, rgb(70, 70, 70) 80%);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  font-size : 12px;
  z-index: 1000;
}
a[data-title]:hover::after  {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 8px;
  display: inline-block;
  color: #fff;
  border: 8px solid transparent;	
  border-bottom: 8px solid #000;
  z-index: 1000;
}
::-moz-selection { 
  color: blue;
  background: lightgreen;
}

::selection {
  color: blue;
  background: lightgreen;
}