p {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 30px;
  text-align: center;
}

caption {
  display: table-caption;
  text-align: left;
  font-weight: bold;
  font-size: 30px;
}

label {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  text-align: center;
}

.workout_name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  border-radius: 8px;
  outline: none;
}

.button {
  background-color: #2196F3; /* Blue */
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  width: 100px;
  height: 33px;
  border-radius: 8px;
}

.holder {
  width: 500px;
  height: 500px;
}

.dropzone {
  background-color: #fff;
  border: dashed 4px;
  border-color: #aaa;
  height: 200px;
  width: 750px;
}

.draggable {
  width: 200px;
  height: 50px;
  font-size: 20px;
  background-color: #2196F3; /* Blue */
  color: white;
  margin: 0 auto;
  border-radius: 8px;
  outline: none;
  touch-action: none;
}

.action_button {
  width: 200px;
  height: 50px;
  font-size: 20px;
  background-color: #fff; /* Blue */
  color: black;
  margin: 0 auto;
  border-radius: 8px;
  outline: none;
}

.drop-active {
  border-color: #000;
}

.drop-target {
  background-color: #fff;
  border-color: #aaa;
  border-style: dashed;
}

.draggable.can-drop {
  color: white;
  background-color: #4CAF50; /* Green */
}

.tap-target {
  background-color: #2196F3; /* Blue */
  color: white;
  text-align: center;
  width: 225px;
  height: 50px;
  font-size: 20px;
  border-radius: 8px;
  cursor: pointer;
  touch-action: none;
  transition: all 0.3s;
  outline: none;
}

.tap-target.switch-bg {
  background-color: #4CAF50; /* Green */
}

.table {
  border-collapse: collapse;
  width: 100%;
  font-family: Arial, Helvetica, sans-serif;
  touch-action: none;
  font-size: 20px;
}

.th {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  touch-action: none;
}

.tr:hover {
  background-color:#f5f5f5;
  touch-action: none;
}

/* Style the tab */
.tab {
  overflow: hidden;
  margin: auto;
  width: 100%;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  text-align: center;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 20px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
  text-align: center;
}