label {
  font-size: 0.85rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: start;
  flex-wrap: nowrap !important;
}

.input-group > div {
  display: flex;
}

.input-group-row {
  gap: 40px;
}

form input {
  height: 23px;
  background: transparent;
  width: 60%;
  border: 1px solid #4166f7;
  margin: 2px;
  outline-offset: 3px;
  color: var(--theme-text-color);
  border-radius: 2px !important;
  border-color: var(--input-border);
}

form input:focus {
  border: 1px solid #4166f7;
  outline: 1px solid var(--input-outline);
}

form textarea {
  width: 60%;
  background: transparent;
  color: var(--theme-text);
  border-radius: 0px !important;
}

form textarea:focus {
  border-radius: 0px !important;
}

/*default input*/
.default {
  border-radius: 0px;
  color: black;
  outline: none;
  border: 1px solid black;
  background: white;
}

.default:focus {
  border: 1px solid black;
  outline: none;
}

.default::placeholder {
  font-size: 0.75rem;
}

/*sidebar form*/
.side-control-panel .input-group label {
  font-size: 0.8rem !important;
}

/*end of sidebar form*/
/*toolbar*/
* .tool-bar {
  height: 36px;
  width: 100%;
  border-bottom: 1px solid var(--default-border);
  display: flex;
}
* .tool-btn {
  gap: 6px;
  height: 100%;
  padding-inline: 8px;
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
}
* .tool-btn:hover {
  cursor: pointer;
  background: #404040;
}
* .theme-light .tool-btn:hover {
  background: #d7d7d7;
}
* .tool-icon {
  color: #0082ff;
}
* .material {
  transform: scale(0.85);
}
* .btsrp {
  font-size: 1.2rem;
}
* .tool-processing, * .tool-processing span {
  pointer-events: none;
  cursor: default !important;
  color: #424242 !important;
}
* .tool-processing:hover {
  background: inherit;
}

/*end of toolbar*/
/*schema*/
.element-type-tag {
  padding-inline: 8px;
  border-radius: 3px;
  background: var(--app-blue);
  color: white;
  width: fit-content;
  font-size: 0.8rem;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*endofschema*/
.input-group-disabled {
  filter: brightness(0.4);
  opacity: 0.7;
  pointer-events: none;
  background: rgba(118, 118, 118, 0.1176470588);
  border-radius: 0px;
}

.element-form {
  gap: 14px !important;
}

.option-valid {
  border-color: #57ca40 !important;
  border: 1px solid #57ca40;
}

.option-invalid {
  border-color: red;
  border: 1px solid red;
}

.side-panel-label, .side-panel-label * {
  font-weight: 600;
  color: var(--theme-text-color);
  font-size: 0.75rem !important;
}

textarea {
  width: 100%;
}

.login-form {
  padding-inline: 0px !important;
}
.login-form .form-floating {
  padding: 0px !important;
  margin: 0px !important;
}
.login-form .tag-input-group {
  justify-content: start;
}
.login-form .tag-group {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: center;
  justify-items: center;
  justify-content: center;
}
.login-form .tag-group > div {
  display: flex;
  align-items: center;
  position: relative;
}
.login-form .colon {
  font-weight: 700;
}
.login-form .label-span {
  color: var(--gray-text-light) !important;
}
.login-form input:placeholder-shown + .label-span {
  height: fit-content;
  transition: all 0.1s ease;
  font-size: 0.6rem;
  font-weight: 600;
  position: absolute;
  background: var(--theme-bg-box);
  background: var(--theme-bg) !important;
  padding-inline: 4px;
  background: red;
}
.login-form .label-span {
  height: fit-content;
  transition: all 0.1s ease;
  font-size: 0.6rem;
  font-weight: 600;
  position: absolute;
  background: var(--theme-bg-box);
  background: var(--theme-bg) !important;
  padding-inline: 4px;
  top: -4px !important;
  left: 9px;
  color: var(--theme-text-color);
}
.login-form input:placeholder-shown + .label-span {
  top: 14px !important;
}
.login-form .theme-light input:placeholder-shown + .label-span {
  background: #ffffff !important;
}
.login-form .tag-group input:focus + .label-span {
  background: var(--theme-bg-box);
  bottom: unset !important;
  color: var(--app-blue) !important;
  top: -4px !important;
}
.login-form .theme-light .tag-group input:focus + .label-span {
  background: #ffffff !important;
}
.login-form .theme-light .label-span {
  background: #ffffff !important;
}
.login-form .tag-group input {
  background: transparent;
  display: flex;
  flex-grow: 1;
  height: 35px;
  border: 1px solid rgba(142, 142, 142, 0.5450980392);
  font-size: 0.8rem;
  padding-inline: 4px;
  color: rgba(142, 142, 142, 0.5450980392);
  min-width: 100%;
}
.login-form .tag-group input:focus {
  border-color: transparent;
  border: 2px solid var(--app-blue);
  outline: none;
  color: var(--theme-text-color);
}