:root {
  --bg-play: #3598DC;
}

.main-menu {
  z-index: 10;
}

.navigation:hover {
  background-color: #566769;
}

.send {
  background-color: #39b24b;
  border: 0;
}

.send:hover {
  background-color: #288035;
}

ul {
  list-style-type: "-  ";
}

ol li span.header {
  text-decoration: underline;
  font-weight: 600;
}

.response {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table {
  width: 100%;
  table-layout: fixed;
}

.response-cell {
  width: 50%;
  /* You can adjust the value as needed */
}

/* Send Tab button */
#nav-send-tab[aria-selected=true] {
  background-color: transparent;
  color: #31AEF2;
}

#nav-send-tab[aria-selected=false] {
  background-color: #31AEF2;
  color: white;
  font-weight: 600;
}

/* History Tab button */
#nav-history-tab[aria-selected=true] {
  background-color: transparent;
  color: #FFC20D;
}

#nav-history-tab[aria-selected=false] {
  background-color: #FFC20D;
  color: white;
  font-weight: 600;
}

/* Data Tab button */
#nav-data-tab[aria-selected=true] {
  background-color: transparent;
  color: #6A9955;
}

#nav-data-tab[aria-selected=false] {
  background-color: #6A9955;
  color: white;
  font-weight: 600;
}

/* IMAP Tab button */
#nav-imap-tab[aria-selected=true] {
  background-color: transparent;
  color: #DC3545;
}

#nav-imap-tab[aria-selected=false] {
  background-color: #DC3545;
  color: white;
  font-weight: 600;

}

/* Tracking Tab button */
#nav-tracking-tab[aria-selected=true] {
  background-color: transparent;
  color: #8812FC;
}

#nav-tracking-tab[aria-selected=false] {
  background-color: #8812FC;
  color: white;
  font-weight: 600;
}

/* SMTP Check Tab button */
#nav-smtp-check-tab[aria-selected=true] {
  background-color: transparent;
  color: black;
}

#nav-smtp-check-tab[aria-selected=false] {
  background-color: black;
  color: white;
  font-weight: 600;
}

button[aria-selected=false]:hover {
  color: gray;
}

button[aria-selected=true] {
  color: white;
  font-weight: 600;
}

.nav-link {
  padding-inline: 2rem;
}

.refresh-dropbox {
  background-color: #0062FF;
}

.random-divs:empty:before {
  content: attr(data-placeholder);
  color: #595C5F;
}

.random-divs {
  overflow: auto;
}

#serverContainer:empty::before {
  content: attr(data-placeholder);
  color: #595C5F;
}

.properties {
  resize: none;
  white-space: nowrap;
  overflow: hidden;
}

.token {
  background-color: #D7D7D7;
  width: fit-content;
  padding-block: 4px;
  margin: 3px;
  border: 0.5px solid #BFBFBF;
  border-radius: 5px;
  display: inline-flex;
  gap: 5px;
  font-size: 0.85rem;
}

.tokenButton {
  border: 0;
  background-color: transparent;
  margin-top: -2px;
}

.removeCreative {
  width: 44px;
  height: 41px;
  position: absolute;
  width: fit-content;
  right: 0px;
  padding-right: 0;
}

.drop-zone {
  background-color: white;
}

.drag-over {
  background-color: #cef0db;
}

.childElements {
  pointer-events: none;
}

#uploadButton {
  pointer-events: unset;
}

.dataEntry {
  cursor: pointer;
  padding: 0.75rem;
  margin: 0.25rem;
  border-radius: 10px;
}

.dataEntry[data-selected=true] {
  background-color: #BFD0FC;
  color: #1F3487;
  border: #1F3487 1.5px solid;
}

.dataEntry[data-selected=false] {
  background-color: white;
  color: #262431;
  border: #5C5E6B 1.5px solid;
}

.dataEntry[data-selected=false]:hover {
  background-color: #E2EAFE;
}

.loadRecipientBtnContainer {
  visibility: hidden;
}

.dataEntry:hover>.loadRecipientBtnContainer {
  visibility: visible;
}

.dataInfos {
  user-select: none;
  /* display: flex;
  flex-direction: column;
  gap: 0.5rem; */
}

.loadRecipientBtn {
  color: #1F3487;
}

.loadRecipientBtn:hover {
  background-color: #BFD0FC;
}

.loadRecipientBtn:active {
  color: white;
  background-color: #769AFA;
}

.btn.loadRecipientBtn:first-child:active {
  color: white;
  background-color: #769AFA;
}

.dataEntry[data-selected=true]>div>.loadRecipientBtn:hover {
  background-color: #769AFA;
}

.dataEntry[data-selected=true]>div>.loadRecipientBtn:active {
  background-color: #3F72F8;
}

.dataEntry[data-selected=true]>div>.btn.loadRecipientBtn:first-child:active {
  background-color: #3F72F8;
}

#btnContainer,
.btnContainer {
  display: flex;
  border-radius: 0 12px 12px 0;
  background-color: white;
}

.btnContainer>button {
  padding-right: 5px;
}

.idle {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--bg-play) 20%);
}

.idle:hover {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--bs-btn-hover-bg) 20%);
}

.idle:active {
  --bs-btn-active-bg: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #1E70A6 20%);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #1E70A6 20%);
}

.ok {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #39b24b 20%);
}

.ok:hover {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #288035 20%);
}

.ok:active {
  --bs-btn-active-bg: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #146c43 20%);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #146c43 20%);
}

#btnContainer>button:nth-child(4) {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--bs-danger) 20%);
}

#btnContainer>button:nth-child(4):hover {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--bs-btn-hover-bg) 20%);
}

#btnContainer>button:nth-child(4):active {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #9C2531 20%);
}

.server-token {
  background-color: #0062ff3d;
  color: #0062FF;
  font-weight: 600;
  display: inline-flex;
  margin: 5px;
  padding: 5px 10px;
  gap: 10px;
  /* border: 1.5px solid #0062FF; */
  border-radius: 8px;
}

.server-token>* {
  user-select: all;
}

.server-token>*:first-child {
  user-select: none;
  background-color: white;
  padding-inline: 5px;
  border-radius: 50rem;
}

/* Remove button style */
.server-token>*:last-child>svg {
  pointer-events: auto;
  padding: 1px;
  margin-bottom: 2px;
  border-radius: 50%;
  fill: #DC3545;
}

/* Remove button style on hover */
.server-token>*:last-child>svg:hover {
  background-color: var(--bs-red);
  fill: white;
}