@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Barlow:wght@300;400&display=swap");

* {
  --mainbg: #222;
  --mainfont: "Barlow";
  --titlefont: "Barlow Condensed";
  font-family: var(--mainfont);
  font-size: 1rem;
  font-weight: 200;
  --queue-btn-size: 1.5rem;
  --size-xsmol: 0.6rem;
  --size-smol: 0.8rem;
  --size-med: 1rem;
  --size-big: 2rem;
}
table,
td,
tr,
tbody,
thead {
  font-size: var(--size-smol);
}
thead {
  font-size: var(--size-med) !important;
  padding: 0 var(--size-med) !important;
}
.comfy-menu {
  z-index: 1;
  
}
.comfy-menu,
.comfy-modal {
  background-color: var(--mainbg);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}
select,
option {
  appearance: none;
  background-color: transparent;
  border: none !important;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-size: var(--size-smol) !important;
  border-radius: 0px !important;
  padding: 0.1rem 1rem !important;
}
select:focus {
  border: none !important;
}
input[type="text"] {
  border: none;
  border-radius: 0;
  border-bottom: solid 1px #333;
  text-decoration: none;
}
input[type="text"]:focus {
  border: none;
  border-bottom: 1px dashed #d9ffa9;
  outline: 0;
}
.comfy-menu {
  display: flex;
  flex-direction: column;
  width: auto;
  padding: 1rem;
  max-width: 180px !important;
  height: auto;
  overflow: hidden;
  transition: height 0.5s ease-in-out;
}
.comfy-menu > div:nth-child(3) {
  margin-top: 5px;
}

.comfy-menu > button {
  font-family: var(--titlefont);
  border: solid 0px #000;
  border-radius: 0.3rem;
  font-weight: 600;
  font-size: var(--size-smol);

  padding: 10px 5px;
  background: #222;
  margin: 5px 0px;
}
.comfy-list-items > button,
.comfy-list-actions > button,
.comfy-menu-btns > button {
  background: #111 !important;
  font-size: var(--size-xsmol) !important;
  padding: 2px 1rem !important;
  box-shadow: none;
}
.comfy-list {
}
.drag-handle {
  padding: 20px 0;
}
.drag-handle > span {
  cursor: move;
  font-weight: 100;
  color: #fff;
  font-size: var(--size-smol);
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
.comfy-queue-btn {
  background-color: rgb(212, 30, 30) !important;
  font-size: var(--queue-btn-size) !important;
  color: #fff;
  text-transform: uppercase;
  font-weight: 900;
}
.comfy-menu-btns > button {
  border: solid 0px rgb(36, 26, 26);
  margin: 3px 3;
  background-color: #2e2e2e;
}
.comfy-menu-btns {
  margin: 5px 0;
}
#extraOptions > label {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
}
#extraOptions > label > input {
  width: 20% !important;
  box-sizing: border-box;
  background: #222;
  border: transparent;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: var(--size-smol);
  text-align: center;
  padding: 9px 0px;
}
#extraOptions > label > input:nth-child(2) {
  width: 50% !important;
  padding: 3px 0px;
}
textarea {
  font-family: var(--mainfont);
  font-size: var(--size-smol) !important;
  padding: 0.5rem !important;
  text-transform: none;
}
button,
button.cm-btn-disable,
button.cm-btn-install {
  font-family: var(--titlefont);
  border: solid 0px #000;
  border-radius: 0.3rem !important;
  font-weight: 300;
  font-size: var(--size-med) !important;
  box-shadow: 0 2px 5px #111;
  padding: 0.2rem 0.5rem !important;
  background: #222;
  margin: 0.2rem 0px;
}

.cm-node-author {
  font-size: var(--size-smol);
  font-weight: 600;
}
.cm-node-name > a,
.cm-node-name > a > font > b {
  text-decoration: none;
  font-size: var(--size-smol);
  font-weight: 600;
  color: #fd0;
}
.cm-node-desc {
  padding: 1rem 0.2rem;
}
.cm-node-desc > p {
  font-size: var(--size-smol);
  padding: 0.3rem 1rem;
  background-color: #bd2121 !important;
  color: #fff !important;
  border-radius: 0.3rem;
}
.cm-node-filename {
  background-color: #111;
  border-radius: 0.2rem;
  color: #fff;
  padding: 0.1rem;
  margin: 0;
}
.comfy-modal-content > tr.td,
.comfy-modal-content > tr > font {
  font-family: var(--titlefont);
  font-weight: 600;
  font-size: var(--size-big);
  text-transform: uppercase;
  background-color: transparent !important;
}