.btn_agent_settings {
  font-size: 12px;
  color: var(--color-greyMedium);
  background-color: transparent;
  border-radius: 100px;
  border: 1px var(--color-greyLight) solid;
  height: 28px;
  padding: 0px 8px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.btn_agent_settings:hover {
  background-color: var(--color-greyLight);
}

.btn_agent_settings img {
  height: 20px;
}

#modal_agent_settings .modal-content {
  width: 350px;
  padding: 24px;
}

#modal_agent_settings .modal-header {
  padding: 0px;
  border: 0px;
  margin-bottom: 24px;
}

#modal_agent_settings .modal-body {
  padding: 0px;
  border: 0px;
  margin-bottom: 24px;
}

#modal_agent_settings .modal-body .box_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#modal_agent_settings .modal-body .box_col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#modal_agent_settings .modal-body label {
  color: var(--color-greyMedium);
  font-size: 14px;
}

#modal_agent_settings .modal-body input {
  width: 130px;
  font-size: 14px;
  border: 1px var(--color-greyLight) solid;
  border-radius: 10px;
  padding: 8px 12px;
  background-color: var(--color-white);
}

#modal_agent_settings .modal-body input:focus {
  outline: none !important;
  border: 1px var(--color-black) solid;
}

#modal_agent_settings .modal-body textarea {
  font-size: 14px;
  border: 1px var(--color-greyLight) solid;
  border-radius: 10px;
  padding: 8px 12px;
  background-color: var(--color-white);
  resize: none;
}

#modal_agent_settings .modal-body textarea:focus {
  outline: none !important;
  border: 1px var(--color-black) solid;
}

#modal_agent_settings .modal-footer {
  padding: 0px;
  border: 0px;
}

#modal_agent_settings .modal-footer button {
  width: 100%;
  font-size: 14px;
  height: 40px;
}

body.dark-mode .btn_agent_settings {
  color: var(--color-greyLightMedium);
  border: 1px var(--color-greyDark) solid;
}

body.dark-mode .btn_agent_settings:hover {
  background-color: var(--color-greyDark);
}