.mat-pick-border {
  position:relative;
  margin:0.5em 0 0.5em;
 <cfif (isdefined('url.mtNo') and url.mtNo eq 3) and (isdefined('url.fltNo2') and url.fltNo2 neq 0)> 
  background: #E1E1E1;
  border: 1px solid #A0A0A0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.36);
 <cfelse> 
  background: #eee;
  border: 1px solid #ccc;  
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);  
 </cfif> 
  padding: 8px;
  border-radius: 3px;

  color:#333;

  /* css3 */
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

/* THE TRIANGLE */
.mat-pick-border:before {
  content:"";
  position:absolute;
  bottom:-12px; /* value = - border-top-width - border-bottom-width */
  left:7px; /* controls horizontal position */
  border-width:12px 11px 0;
  border-style:solid;
 <cfif (isdefined('url.mtNo') and url.mtNo eq 3) and (isdefined('url.fltNo2') and url.fltNo2 neq 0)> 
  border-color:##A0A0A0 transparent;
 <cfelse>
  border-color:##ccc transparent;
 </cfif>
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}
/* creates the smaller  triangle */
.mat-pick-border:after {
  content:"";
  position:absolute;
  bottom:-10px; /* value = - border-top-width - border-bottom-width */
  left:8px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:10px 10px 0;
  border-style:solid;
 <cfif (isdefined('url.mtNo') and url.mtNo eq 3) and (isdefined('url.fltNo2') and url.fltNo2 neq 0)> 
  border-color:##E1E1E1 transparent;
 <cfelse> 
  border-color:##eee transparent;
 </cfif> 
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}