#joinchat_form {
  --red: 37;
  --green: 211;
  --blue: 102;
  --color: rgb(var(--red), var(--green), var(--blue));
  --bw: 100;
  --text: hsl(0deg 0% clamp(0%, var(--bw)*1%, 100%) / clamp(70%, var(--bw)*1%, 100%));
}

.inline-notice {
  background: #fff;
  border-top: 1px solid #ccd0d4;
  border-right: 1px solid #ccd0d4;
  border-bottom: 1px solid #ccd0d4;
  border-left-style: solid;
  border-left-width: 4px;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
  margin: 5px 0 2px;
  padding: 1px 12px;
}

.inline-notice p {
  margin: 0.5em 0;
  padding: 2px;
}

/* Button ico field */
.joinchat__button_ico {
  visibility: visible !important;
}

.form-table td .joinchat__button_ico label {
  display: inline-block;
  margin: 0 0.5em 0.25em 0 !important;
}

.joinchat__button_ico input {
  position: absolute;
  opacity: 0;
}

.joinchat__button_ico span {
  display: inline-flex;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color, #25d366);
  overflow: hidden;
  /* for SVG fill */
  color: var(--text, #fff);
}

.joinchat__button_ico svg {
  width: 60%;
  height: 60%;
  margin: auto;
}

.joinchat__button_ico .joinchat--original span {
  background: #25d366 var(--joinchat-ico) no-repeat center;
  background-clip: content-box;
}

.joinchat__button_ico label:hover span {
  box-shadow: 0 0 0 3px #5b9dd9;
}

.joinchat__button_ico input:checked+span {
  box-shadow: 0 0 0 3px #0073aa;
}

.joinchat__button_ico input:focus+span {
  box-shadow: 0 0 0 3px #0073aa, 0 0 2px 4px rgba(30, 140, 190, 0.8);
}

/* Channels sortable */
#joinchat_channels__sortables {
  max-width: 730px;
}

#joinchat_channels .postbox {
  margin-bottom: 10px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.joinchat_postbox--channel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: stretch;
  max-width: 730px;
  padding: 6px;
}

.joinchat_postbox--channel .hndle {
  flex-shrink: 0;
  width: 30px;
  margin: 0;
  border: none;
  line-height: inherit;
  color: #bbb;
}

.joinchat_postbox--channel .fieldandhelp {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 5px;
}

.joinchat_postbox--channel label {
  flex-shrink: 0;
  width: 200px;
  margin: 0 5px;
}

.joinchat_postbox--channel label svg,
.joinchat_postbox--channel label img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
  overflow: hidden;
  vertical-align: middle;
}

[dir=rtl] .joinchat_postbox--channel label svg,
[dir=rtl] .joinchat_postbox--channel label img {
  margin-right: 0;
  margin-left: 10px;
}

.joinchat_postbox--channel .description {
  display: inline-block;
  line-height: 1.5;
}

@media screen and (max-width: 782px) {
  .joinchat_postbox--channel {
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
  }

  .joinchat_postbox--channel .hndle {
    display: none;
  }

  .form-table .joinchat_postbox--channel input[type="text"] {
    display: inline-block;
    width: auto;
  }

  .joinchat_postbox--channel span.description {
    display: inline-block;
  }
}

@media (max-width: 600px) {
  .joinchat_postbox--channel {
    flex-direction: column;
    align-items: start;
  }

  .joinchat_postbox--channel label svg,
  .joinchat_postbox--channel label img {
    width: 20px;
    height: 20px;
  }

  .joinchat_postbox--channel label+div {
    width: 100%;
    padding: 4px 0 6px;
  }

  .form-table .joinchat_postbox--channel input[type="text"] {
    display: block;
    width: 100%;
  }
}