#alertLayer td {
    width: 100%;
   /* margin:0;
   /* padding:0;*/
   
}

#alertLayer input{
   font-size: 9pt;
   font-family: arial;
   font-weight:bold;
   width: 50px;
   height:	25px;
   padding: 2px;

}
#alertLayer .cancelButton{
   background-color: white;
   color: #000000;

}
#alertLayer .okButton {
   background-color: #00ffff;
   color: #000000;

}
#alertLayer .noButton {
   background-color: #00ffff;
   color: #000000;

}

.alertTitle {
   /*box-sizing:  border-box;*/
   background-color: #0000FF;
   border:1px solid blue;
   font-family: arial;
   font-size: 11pt;
   min-height: 30px;
   color: white;
   font-weight: bold;
   padding:10px;
   text-align: center;
}
.alertMessage {
   /*box-sizing:  border-box;*/
   margin:5px;
   font-family: arial;
   font-size: 10pt;
   color: #FF0000;
   /*font-weight: bold;*/
   line-height: 20px;

   padding-top: 10px;
   padding-bottom: 15px;
}
.alertBoxStyle {
   display:block;
   cursor: default;
   filter: alpha(opacity=90);
   background-color: white;
   position: absolute;
   top: 45px;
   left: 20px;
   min-width: 180px; 
   /* min-height: 100px; */
   visibility:hidden; z-index: 999;
   border-style: solid;
   border-width: 5px;
   border-color: #0099FF;
   text-align: center;
   padding:0px;
   margin:10px;
   word-break:keep-all;
} 




/*tooltip CSS : ajouter au html : data-tooltip et la classe : topTip ou bottomTip*/


*:before,
*:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing:    border-box;
   box-sizing:         border-box;
}


/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
   position: relative;
   z-index: 2;
   cursor: help;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
   visibility: hidden;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity: 0;
   pointer-events: none;
}

/* arrow */
[data-tooltip]:after {
   z-index: 2;
   position: absolute;
   margin:1px;
   margin-left: -30%;
   width: 0;
   border: 3px solid black;
   background-color: white;
   content: "";
}


/* Position tooltip above the element */
[data-tooltip]:before {
   z-index: 2;
   position: absolute;
   /*bottom: 100%;
   left: 50%;*/
   margin: 4px;
   margin-left: -30%;
   padding: 5px;
   white-space: nowrap;
   border:0;

   -webkit-border-radius: 5px;
   -moz-border-radius:    5px;
   border-radius:         5px;
   background-color: #00ffff;
   color: blue;
   content: attr(data-tooltip);
   text-align: center;
   font-size: 12px;
   font-weight: bold;
   font-style: italic;
   line-height: 1.1;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
   visibility: visible;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   opacity: 1;
   border:1px solid blue;
}


.topTip:before,
.topTip:after
{
   bottom: 100%;
   left: 50%;
}

.bottomTip:before,
.bottomTip:after
{
   top: 100%;
   left: 50%;
}