.button1 {
  background-color: #4CAF50;/* Green */
  vertical-align: middle;
  font-size: 1em;
  color: whitesmoke;
  height: 6em;
  width: 6em;
  text-align: center;
  padding: 4px;
  margin: 2px;
  border-style: none;
  border-radius: .6em;
}

.button2 {
  /* Blue */
  background-color: #008CBA;
}

.button3 {
  /* Red */
  background-color: #f44336;
}

.button4 {
  /* Gray */
  background-color: #e7e7e7;
  color: black;
}

.button5 {
  /* Black */
  background-color: #555555;
}

.btn {
  opacity:.8;
  margin:.5em;
}

.btn:hover {
  opacity:1;
}

.btn.disabled, .btn[disabled] {
  opacity:.5;
}

.btn.disabled:hover {
  opacity:.5;
}

.btn-lg {
  font-weight:bold;
}

.btn.norm {
  min-width:150px;
  font-size: 14px;
}

.btn-outline-success {
  min-width: 200px;
  color:white;
  background-color: var(--c-save);
  border-color: green;
  margin-top: 1em;
  margin-bottom: 1em;
}

.btn-outline-add {
  min-width: 200px;
  color:white;
  background-color: var(--c-add);
  margin-top: 1em;
  margin-bottom: 1em;
  text-decoration: none;
}

.btn-outline-danger {
  min-width: 200px;
  color:white;
  background-color: var(--c-cancel);
  margin-top: 1em;
  margin-bottom: 1em;
  border-color: var(--c-cancel);
}

.btn-outline-add:hover {
  opacity: .9;
  color: white;
}

.undoable {
  border:solid medium;
  border-color:var(--undoable-border);
  border-radius: .5em;
  background-color:transparent;
  color:inherit;
}

.undoable:hover {
  border-color:black;
  outline:solid black medium;
  outline-offset:-8px;
  background-color:rgba(255,255,0,.9);
  color:black;
}

.undoable-menu:hover {
  background-color:rgba(255,255,0,.9);
  color:black;
}

.btn.btn-aliceblue {
  color:black;
  background-color:aliceblue;
}

.btn.btn-antiquewhite {
  color:black;
  background-color:antiquewhite;
}

.btn.btn-aqua {
  color:black;
  background-color:aqua;
}

.btn.btn-aquamarine {
  color:black;
  background-color:aquamarine;
}

.btn.btn-azure {
  color:black;
  background-color:azure;
}

.btn.btn-beige {
  color:black;
  background-color:beige;}

.btn.btn-bisque {
  color:black;
  background-color:bisque;
}

.btn.btn-black {
  color:white;
  background-color:black;
}

.btn.btn-blanchedalmond {
  color:black;
  background-color:blanchedalmond;
}

.btn.btn-blue {
  color:white;
  background-color:blue;
}

.btn.btn-blueviolet {
  color:white;
  background-color:blueviolet;
}

.btn.btn-brown {
  color:white;
  background-color:brown;
}

.btn.btn-burlywood {
  color:black;
  background-color:burlywood;
}

.btn.btn-cadetblue {
  color:white;
  background-color:cadetblue;
}

.btn.btn-chartreuse {
  color:black;
  background-color:chartreuse;
}

.btn.btn-chocolate {
  color:white;
  background-color:chocolate;
}

.btn.btn-coral {
  color:black;
  background-color:coral;
}

.btn.btn-cornflowerblue {
  color:black;
  background-color:cornflowerblue;
}

.btn.btn-cornsilk {
  color:black;
  background-color:cornsilk;
}

.btn.btn-crimson {
  color:black;
  background-color:crimson;
}

.btn.btn-cyan {
  color:black;
  background-color:cyan;
}

.btn.btn-darkblue {
  color:white;
  background-color:darkblue;
}

.btn.btn-darkcyan {
  color:black;
  background-color:darkcyan;
}

.btn.btn-darkgoldenrod {
  color:black;
  background-color:darkgoldenrod;
}

.btn.btn-darkgray {
  color:black;
  background-color:darkgray;
}

.btn.btn-darkgrey {
  color:black;
  background-color:darkgrey;
}

.btn.btn-darkgreen {
  color:white;
  background-color:darkgreen;
}

.btn.btn-darkkhaki {
  color:black;
  background-color:darkkhaki;
}

.btn.btn-darkmagenta {
  color:white;
  background-color:darkmagenta;
}

.btn.btn-darkolivegreen {
  color:white;
  background-color:darkolivegreen;
}

.btn.btn-darkorange {
  color:black;
  background-color:darkorange;
}

.btn.btn-darkorchid {
  color:white;
  background-color:darkorchid;
}

.btn.btn-darkred {
  color:white;
  background-color:darkred;
}

.btn.btn-darksalmon {
  color:black;
  background-color:darksalmon;
}

.btn.btn-darkseagreen {
  color:black;
  background-color:darkseagreen;
}

.btn.btn-darkslateblue {
  color:white;
  background-color:darkslateblue;
}

.btn.btn-darkslategray {
  color:white;
  background-color:darkslategray;
}

.btn.btn-darkslategrey {
  color:white;
  background-color:darkslategrey;
}

.btn.btn-darkturquoise {
  color:black;
  background-color:darkturquoise;
}

.btn.btn-darkviolet {
  color:white;
  background-color:darkviolet;
}

.btn.btn-deeppink {
  color:black;
  background-color:deeppink;
}

.btn.btn-deepskyblue {
  color:black;
  background-color:deepskyblue;
}

.btn.btn-dimgray {
  color:white;
  background-color:dimgray;
}

.btn.btn-dimgrey {
  color:white;
  background-color:dimgrey;
}

.btn.btn-dodgerblue {
  color:white;
  background-color:dodgerblue;
}

.btn.btn-firebrick {
  color:white;
  background-color:firebrick;
}

.btn.btn-floralwhite {
  color:black;
  background-color:floralwhite;
}

.btn.btn-forestgreen {
  color:white;
  background-color:forestgreen;
}

.btn.btn-fuchsia {
  color:white;
  background-color:fuchsia;
}

.btn.btn-gainsboro {
  color:black;
  background-color:gainsboro;
}

.btn.btn-ghostwhite {
  color:black;
  background-color:ghostwhite;
}

.btn.btn-gold {
  color:black;
  background-color:gold;
}

.btn.btn-goldenrod {
  color:black;
  background-color:goldenrod;
}

.btn.btn-gray {
  color:white;
  background-color:gray;
}

.btn.btn-grey {
  color:white;
  background-color:grey;
}

.btn.btn-green {
  color:white;
  background-color:green;
}

.btn.btn-greenyellow {
  color:black;
  background-color:greenyellow;
}

.btn.btn-honeydew {
  color:black;
  background-color:honeydew;
}

.btn.btn-hotpink {
  color:black;
  background-color:hotpink;
}

.btn.btn-indianred {
  color:white;
  background-color:indianred;
}

.btn.btn-indigo {
  color:white;
  background-color:indigo;
}

.btn.btn-ivory {
  color:black;
  background-color:ivory;
}

.btn.btn-khaki {
  color:black;
  background-color:khaki;
}

.btn.btn-lavender {
  color:black;
  background-color:lavender;
}

.btn.btn-lavenderblush {
  color:black;
  background-color:lavenderblush;
}

.btn.btn-lawngreen {
  color:black;
  background-color:lawngreen;
}

.btn.btn-lemonchiffon {
  color:black;
  background-color:lemonchiffon;
}

.btn.btn-lightblue {
  color:black;
  background-color:lightblue;
}

.btn.btn-lightcoral {
  color:black;
  background-color:lightcoral;
}

.btn.btn-lightcyan {
  color:black;
  background-color:lightcyan;
}

.btn.btn-lightgoldenrodyellow {
  color:black;
  background-color:lightgoldenrodyellow;
}

.btn.btn-lightgray {
  color:black;
  background-color:lightgray;
}

.btn.btn-lightgrey {
  color:black;
  background-color:lightgrey;
}

.btn.btn-lightgreen {
  color:black;
  background-color:lightgreen;
}

.btn.btn-lightpink {
  color:black;
  background-color:lightpink;
}

.btn.btn-lightsalmon {
  color:black;
  background-color:lightsalmon;
}

.btn.btn-lightseagreen {
  color:black;
  background-color:lightseagreen;
}

.btn.btn-lightskyblue {
  color:black;
  background-color:lightskyblue;
}

.btn.btn-lightslategray {
  color:white;
  background-color:lightslategray;
}

.btn.btn-lightslategrey {
  color:white;
  background-color:lightslategrey;
}

.btn.btn-lightsteelblue {
  color:black;
  background-color:lightsteelblue;
}

.btn.btn-lightyellow {
  color:black;
  background-color:lightyellow;
}

.btn.btn-lime {
  color:black;
  background-color:lime;
}

.btn.btn-limegreen {
  color:white;
  background-color:limegreen;
}

.btn.btn-linen {
  color:black;
  background-color:linen;
}

.btn.btn-magenta {
  color:white;
  background-color:magenta;
}

.btn.btn-maroon {
  color:white;
  background-color:maroon;
}

.btn.btn-mediumaquamarine {
  color:black;
  background-color:mediumaquamarine;
}

.btn.btn-mediumblue {
  color:white;
  background-color:mediumblue;
}

.btn.btn-mediumorchid {
  color:white;
  background-color:mediumorchid;
}

.btn.btn-mediumpurple {
  color:black;
  background-color:mediumpurple;
}

.btn.btn-mediumseagreen {
  color:black;
  background-color:mediumseagreen;
}

.btn.btn-mediumslateblue {
  color:black;
  background-color:mediumslateblue;
}

.btn.btn-mediumspringgreen {
  color:black;
  background-color:mediumspringgreen;
}

.btn.btn-mediumturquoise {
  color:black;
  background-color:mediumturquoise;
}

.btn.btn-mediumvioletred {
  color:white;
  background-color:mediumvioletred;
}

.btn.btn-midnightblue {
  color:white;
  background-color:midnightblue;
}

.btn.btn-mintcream {
  color:black;
  background-color:mintcream;
}

.btn.btn-mistyrose {
  color:black;
  background-color:mistyrose;
}

.btn.btn-moccasin {
  color:black;
  background-color:moccasin;
}

.btn.btn-navajowhite {
  color:black;
  background-color:navajowhite;
}

.btn.btn-navy {
  color:white;
  background-color:navy;
}

.btn.btn-oldlace {
  color:black;
  background-color:oldlace;
}

.btn.btn-olive {
  color:white;
  background-color:olive;
}

.btn.btn-olivedrab {
  color:white;
  background-color:olivedrab;
}

.btn.btn-orange {
  color:black;
  background-color:orange;
}

.btn.btn-orangered {
  color:white;
  background-color:orangered;
}

.btn.btn-orchid {
  color:black;
  background-color:orchid;
}

.btn.btn-palegoldenrod {
  color:black;
  background-color:palegoldenrod;
}

.btn.btn-palegreen {
  color:black;
  background-color:palegreen;
}

.btn.btn-paleturquoise {
  color:black;
  background-color:paleturquoise;
}

.btn.btn-palevioletred {
  color:black;
  background-color:palevioletred;
}

.btn.btn-papayawhip {
  color:black;
  background-color:papayawhip;
}

.btn.btn-peachpuff {
  color:black;
  background-color:peachpuff;
}

.btn.btn-peru {
  color:black;
  background-color:peru;
}

.btn.btn-pink {
  color:black;
  background-color:pink;
}

.btn.btn-plum {
  color:black;
  background-color:plum;
}

.btn.btn-powderblue {
  color:black;
  background-color:powderblue;
}

.btn.btn-purple {
  color:white;
  background-color:purple;
}

.btn.btn-rebeccapurple {
  color:white;
  background-color:rebeccapurple;
}

.btn.btn-red {
  color:white;
  background-color:red;
}

.btn.btn-rosybrown {
  color:black;
  background-color:rosybrown;
}

.btn.btn-royalblue {
  color:white;
  background-color:royalblue;
}

.btn.btn-saddlebrown {
  color:white;
  background-color:saddlebrown;
}

.btn.btn-salmon {
  color:black;
  background-color:salmon;
}

.btn.btn-sandybrown {
  color:black;
  background-color:sandybrown;
}

.btn.btn-seagreen {
  color:white;
  background-color:seagreen;
}

.btn.btn-seashell {
  color:black;
  background-color:seashell;
}

.btn.btn-sienna {
  color:white;
  background-color:sienna;
}

.btn.btn-white {
  color:black;
  background-color:white;
}

.btn.btn-skyblue {
  color:black;
  background-color:skyblue;
}

.btn.btn-slateblue {
  color:white;
  background-color:slateblue;
}

.btn.btn-slategray {
  color:white;
  background-color:slategray;
}

.btn.btn-slategrey {
  color:white;
  background-color:slategrey;
}

.btn.btn-snow {
  color:black;
  background-color:snow;
}

.btn.btn-springgreen {
  color:black;
  background-color:springgreen;
}

.btn.btn-steelblue {
  color:white;
  background-color:steelblue;
}

.btn.btn-tan {
  color:black;
  background-color:tan;
}

.btn.btn-teal {
  color:white;
  background-color:teal;
}

.btn.btn-thistle {
  color:black;
  background-color:thistle;
}

.btn.btn-tomato {
  color:white;
  background-color:tomato;
}

.btn.btn-turquoise {
  color:black;
  background-color:turquoise;
}

.btn.btn-violet {
  color:black;
  background-color:violet;
}

.btn.btn-wheat {
  color:black;
  background-color:wheat;
}

.btn.btn-white {
  color:black;
  background-color:white;
}

.btn.btn-whitesmoke {
  color:black;
  background-color:whitesmoke;
}

.btn.btn-yellow {
  color:black;
  background-color:yellow;
}

.btn.btn-yellowgreen {
  color:white;
  background-color:yellowgreen;
}