body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], input[type=number], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  flex: 1; /* fab */
}

.button {
  background-color: #f44336; /* Red, #4CAF50; Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: -80px;
  margin-bottom: 25px;
  margin-left: 125px;
}

.button:hover {
     Background-color:  #8B0000;
     Color: #ffffff;
}

 button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin-top: -80px;
  margin-bottom: 25px;
  margin-left: 25px;
}

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
 
.my-notify-info, .my-notify-success, .my-notify-warning, .my-notify-error {
    padding:10px;
    margin:10px 0;
 
}
.my-notify-info:before, .my-notify-success:before, .my-notify-warning:before, .my-notify-error:before {
    font-family:FontAwesome;
    font-style:normal;
    font-weight:400;
    speak:none;
    display:inline-block;
    text-decoration:inherit;
    width:1em;
    margin-right:.2em;
    text-align:center;
    font-variant:normal;
    text-transform:none;
    line-height:1em;
    margin-left:.2em;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.my-notify-info:before {
    content:"\f05a";
}
.my-notify-success:before {
    content:'\f00c';
}
.my-notify-warning:before {
    content:'\f071';
}
.my-notify-error:before {
    content:'\f057';
}
.my-notify-info {
    color: #00529B;
    background-color: #BDE5F8;
}
.my-notify-success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
.my-notify-warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
.my-notify-error {
    color: #D8000C;
    background-color: #FFD2D2;
}

/* Style buttons */
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 20px;
}

/* Darker background on mouse-over */
.btn:hover {
  background-color: RoyalBlue;
}

/* Style buttons */
.btn-edit {
  background-color: Emerald Green;
  border: none;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 20px;
}

/* Darker background on mouse-over */
.btn-edit:hover {
  background-color: Forest Green;
}

.btn-trim {
  background-color: Black;
  border: none;
  color: white;
  padding: 20px 20px;
  cursor: pointer;
  font-size: 20px;
}

/* Darker background on mouse-over */
.btn-trim:hover {
  background-color: DarkSlateGrey;
}

.btn-copy {
  background-color: Purple;
  border: none;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 20px;
}

/* Darker background on mouse-over */
.btn-copy:hover {
  background-color: blueviolet;
}

/* Style buttons */
.btn-delete {
  background-color: Crimson;
  border: none;
  color: white;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 20px;
}

/* Darker background on mouse-over */
.btn-delete:hover {
  background-color: DarkRed;
}

/* tool tip experiment */

[data-tooltip]:before {            
    position : absolute;
     content : attr(data-tooltip);
     opacity : 0;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 240px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}