.note {
          position:relative;
          font-size:22px;
          padding:1em 1.5em;
          color:#eee;
          background:#97C02F;
      }

      .note:before {
          content:"";
          position:absolute;
          top:0;
          right:0;
          border-width:0px 56px 56px 0; /* This trick side-steps a webkit bug */
          border-style:solid;

          /* Optional: shadow */
          -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
          -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
          box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

          /* Border rounded */
          -webkit-border-radius:5px 0 5px 5px;
          -moz-border-radius:5px 0 5px 5px;
          border-radius:5px 0 5px 5px;
      }

      .note.red {background-color:#C93213;}
      .note.red:before {border-color:#fff #fff #97010A #97010A; background-color:#97010A;}


/*************************************************************************************/
.ui-dialog {
    background-color: #C93213;
    border:5px solid maroon;
    border-radius: 20px;
    left: 0;
    outline: 0 none;
    padding: 0 !important;
    position: absolute;
    top: 0;
}


.ui-widget-header {
  /*Change the Header color here*/
    background: #CC99FF;
    border: 0;
    color: #fff;
    font-size: 25px;
    font-weight:bold;
    text-align:center;
   	height: 80px;

}

.ui-dialog-titlebar-close span { display: none;}


.dialog {
	position: relative;
	margin: 10% 30%;
}

.dialog:before, .dialog:after {
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
}