.red{color:#FC0000}
/* Template manager */
.template-form {
  margin-bottom: 20px;
}

.template-list.active{background: #fcfcfc}
.template-icons-selected{
  display: flex;
  gap: 4px;
}

.template-status {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px 20px;
  background: #f1f1f1;
  color: #000000;
  border-bottom-left-radius: 20px;
  border: 2px solid #fff;
  border-top: 0px;
  border-right: 0px;
}

.template-status.active {
  background: #0069FF;
  color: #ffffff;
}

.template-available-icons {
  column-gap: 8px;
  row-gap: 4px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-height: 200px;
  overflow: auto;
  padding: 0.4rem;
  border-radius: 0.4rem;
}

.browse-media{color: #ccc}
.browse-media:hover{color: unset}

.panel-container{
  display: grid;
  grid-template-columns: 35% 65%;
  gap: 10px;
}
.panel-left,
.panel-right {
  padding: 15px;
  background-color: #f1f1f1;
}

@media screen and (max-width: 768px) {
  .panel-container {
    grid-template-columns: 1fr; 
  }
}

/* END Template manager */

/* Template setting display */

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.grid-container .template-name {
  font-weight: 700;
}

.template-position {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #ccc;
  color: #000;
  font-size: 10px;
  padding: 2px 6px;
  border-bottom-left-radius: 4px
}

.grid-item {
  transition: all 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.grid-item.gray {
  background-color: #f0f0f0;
  opacity: 0.6;
  pointer-events: auto;
  filter: grayscale(80%);
}

.grid-item.gray:hover {
  background-color: #fff;
  opacity: 1;
  filter: none;
}

.grid-item .buttons, .template-list .buttons {
  margin-top: auto;
  text-align: center;
}

.grid-item button, .template-list button {
  margin: 0 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
}

.template-list button{background-color: #eaeaea;}

.grid-item button.edit {
  background-color: #007bff;
  color: #fff;
}

.grid-item button.active, .template-list button.active {
  background-color: #28a745;
  color: #fff;
}

/* END Template setting display */

/* Buttons */
.position-buttons button {
  margin-right: 10px;
  padding: 5px 10px;
}

.btn-posu-preset-select.selected, .btn-posu-select.selected, .btn-posu-select:hover{
  color: white;
}

.btn-posu-select.selected, .btn-posu-select:hover {
  background-color: #006aff;
}
.btn-posu-preset-select.selected {
  background-color: #fc7070;
}

.btn-aios {
  margin-top: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  color: white;
}

.btn-posu-select, .btn-posu-preset-select {
  background-color: #f9fafa;
  color: #000
}

.btn-posu-save-template,
.btn-posu-update-template {
  background-color: #28a745;
}

.btn-posu-save-template:hover,
.btn-posu-update-template:hover {
  background-color: #218838;
}

/* END Buttons */

/* Tooltips */
.tooltip {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.tooltip[style*="visibility: visible"] {
  opacity: 1;
  transform: translateY(0);
}
.tooltip[style*="visibility: hidden"] {
  opacity: 0;
  transform: translateY(10px);
}

/* END Tooltips */