#rules input, #rules select {
  background: var(--background);
  border-radius: 50px;
  overflow: clip;
  border: none;
}

#rules input[type="number"] {
  width: 25px;
  padding: 5px 10px;
}

#rules select {
  padding: 5px 10px;
  width: fit-content;
  cursor: pointer;
}

#rules .rule > res > select,
#rules .rule > cond > select {
    outline: 1px solid grey;
}

#template-select {
  margin-bottom: 15px;
}

val table {
  border: 0px;
  border-collapse: collapse;
  border-radius: 15px;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

val.squared table {
  padding: 5px 0;
}

td {
  width: 10px;
  height: 10px;
}

td.black {
  background: black; 
  outline: 1px solid var(--hl);
}

td.white {
  background: var(--darker); 
  outline: 1px solid var(--hl);
}

val.squared {
  border-radius: 5px;
}

select.val, select.inbubble  {
  width: fit-content;
  display: inline-block;
  cursor: pointer;
}

val select.val, select.inbubble {
  background: white;
  border: none;
  vertical-align: top;
}

#rules-buttons {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  border-radius: 15px;
  overflow: clip;
}

.rule-wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

.rule-wrapper .edit-btn {
  padding: 10px;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  color: grey;
}

#rules:not(.editing) .edit-btn,
#rules:not(.editing) .new-rule-btns {
  display: none;
}

.rule-wrapper:hover .edit-btn {
  display: inline-block !important;
}

.new-rule-btns {
  display: flex;
  gap: 10px;
}

.new-rule-btn {
  font-size: 2em;
  cursor: pointer;
  padding: 20px;
  border-radius: 7px;
  background: transparent;
  outline: 2px dashed grey;
  color: grey;
  opacity: 0.7;
}

table.uneditable {
  pointer-events: none !important;
}

op, val, select.val {
  display: inline-block;
  padding: 5px 10px;
  background: white;
  border-radius: 50px;
  border: 1px solid grey;
}

val, select.val {
  background: var(--hl);
  vertical-align: middle;
}

.rule {
  border-radius: 7px;
  display: inline-block;
  padding: 10px 20px;
  background: white;
  width: fit-content;
}

#rules {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  gap: 10px 20px;
  background: var(--light-grey);
  padding: 40px;
  overflow-x: auto;
  height: calc(100% - 80px);
}