.leftGrid {
  grid-column: 1;
}

.rightGrid {
  grid-column: 2;
}

input[type="submit"] {
  margin: 28px 0 0 0;
}

form span {
  position: relative;
}

/* ------------------------------------------------------------------------------------------ */
/* Suggestions ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border: 1px solid #434343 !important;
}

body.darkmode input:focus,
body.darkmode textarea:focus,
body.darkmode select:focus {
  outline: none;
  border: 1px solid #8a9ab7 !important;
}

.suggestionView {
  position: relative;
  border-bottom: none !important;
}

.suggestions {
  position: absolute;
  height: 0px;
  width: 100%;
  top: 39px;
  left: 0px;
  opacity: 0;
  padding: 0px 8px;
  transition: 100ms;
  background-color: #fff;
  border-left: 1px solid #434343;
  border-right: 1px solid #434343;
  border-bottom: 1px solid #434343;
  border-top-right-radius: 0px !important;
  border-top-left-radius: 0px !important;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  pointer-events: none !important;
  z-index: 1;
}

body.darkmode .suggestions {
  background-color: var(--box-input-bg);
  border-left: 1px solid #8a9ab7;
  border-right: 1px solid #8a9ab7;
  border-bottom: 1px solid #8a9ab7;
}

.suggestions.visible {
  height: unset;
  pointer-events: all !important;
  padding: 8px;
  opacity: 1;
  overflow-y: auto;
  z-index: 3;
}

.suggestions div {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px;
  font-size: 14px;
  border-radius: 6px;
}

.suggestions div:hover {
  background-color: rgba(0, 0, 0, 0.024);
  cursor: pointer;
}

body.darkmode .suggestions div:hover {
  background-color: rgba(0, 0, 0, 0.064);
}

.no-result {
  color: #888;
  cursor: default;
}

/* ------------------------------------------------------------------------------------------ */
/* Form Topics ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.form_paragraph {
  font-size: 14px;
  color: #314a63;
  margin-top: 12px;
}

.form_info {
  display: inline;
  width: 100%;
  min-height: 50px;
  font-size: 14px;
  border-radius: var(--default-border-radius);
  border: 1px solid #000;
  background-image: url('../assets/icons/info.svg');
  background-size: 32px;
  background-repeat: no-repeat;
  background-position: 10px center;
  padding: 16px 16px 16px 52px;
  grid-column: 1 / span 2;
  gap: 8px;
}
.form_info.red {
  background-image: url('../assets/icons/cancel.svg') !important;
}
.form_info.orange {
  background-image: url('../assets/icons/warning.svg') !important;
}
.form_info.green {
  background-image: url('../assets/icons/check_circle.svg') !important;
}

body.darkmode .form_info {
  color: #000;
}

.form_info a {
  text-decoration: underline;
}

form {
  display: flex;
  flex-direction: column;
}

form .form_row {
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  gap: 16px;
}

form .form_row {
  grid-template-rows: auto auto auto;
}

.form_row input,
.form_row select {
  grid-column: 1 / span 2;
}

/* ------------------------------------------------------------------------------------------ */
/* Custom Radio Button ---------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------ */

.radio-toolbar {
  position: relative;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}

.radio-toolbar .radio-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.radio-toolbar .radio-btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 14px 9px 34px;
  width: fit-content;
  border-radius: var(--default-secondary-border-radius);
  background: transparent;
  font-size: 14px;
  margin: 0;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease, border-color .12s ease;
}

.radio-toolbar .radio-btn::after {
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .24;
  background-image: url("../assets/icons/inputs/radio_button_unchecked.svg");
  background-repeat: no-repeat;
}

body.darkmode .radio-toolbar .radio-btn::after {
  filter: invert(88%) sepia(19%) saturate(1148%) hue-rotate(181deg) brightness(100%) contrast(108%);
}

.radio-toolbar .radio-btn:hover::after {
  opacity: 0.64;
  filter: invert(1);
  background-image: url("../assets/icons/inputs/radio_button_checked.svg");
}

.radio-toolbar .radio-input:focus-visible+.radio-btn {
  border: 2px solid rgba(122, 162, 247, .9);
}

.radio-toolbar .radio-input:checked+.radio-btn {
  color: #fff;
  border-color: transparent;
}

.radio-toolbar .radio-input:checked+.radio-btn::after {
  opacity: 1;
  filter: invert(1);
  background-image: url("../assets/icons/inputs/radio_button_checked.svg");
}

body.darkmode .radio-toolbar .radio-input:checked+.radio-btn {
  color: #fff;
  border-color: transparent;
}

.radio-toolbar .radio-highlight {
  position: absolute;
  z-index: 1;
  border-radius: var(--default-secondary-border-radius);
  background: var(--selected-radio, #E9F1FF);
  width: 0;
  height: 0;
  transform: translate(0, 0);
  transition: opacity .16s cubic-bezier(.2, .9, .15, 1);
  opacity: 0;
}

body.darkmode .radio-toolbar .radio-highlight {
  background: var(--hovered-radio, #516f9e);
}

@media (prefers-reduced-motion: reduce) {

  .radio-toolbar .radio-highlight,
  .radio-toolbar .radio-btn {
    transition: none;
  }
}

/* ------------------------------------------------------------------------------------------ */
/* Inputs ----------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------ */

.form-input {
  position: relative;
  flex-direction: column;
}

.form-input,
.form-textarea,
.form-dropdown,
.form-search,
.form-message,
.form-password {
  border-radius: var(--default-border-radius);
}

.form-input,
.form-textarea,
.form-dropdown,
.form-search,
.form-message,
.form-password span {
  position: relative;
  height: fit-content;
  display: flex;
}

.form-textarea {
  flex-direction: column;
}

.form-search,
.form-message {
  align-items: center;
}

.form-textarea:hover textarea,
.form-search:hover input,
.form-message:hover input,
.form-input:hover input {
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.12);
}

.form-password span {
  width: 100%;
}

.form-dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-color {
  height: 40px;
}

.form-item {
  position: relative;
  width: 100%;
  height: 40px;
  border-radius: var(--default-secondary-border-radius);
  border: 1px solid var(--box-border-light);
  padding: 0 16px;
  color: #444444;
  background: #FFF;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.04);
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  caret-color: auto;
}

#chat_message .richTextEditor {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

body.darkmode .form-item {
  color: #fff;
  background-color: var(--box-bg);
  border: 1px solid var(--box-border);
}

body.darkmode box .form-item {
  background-color: var(--box-input-bg);
  border: 1px solid var(--box-input-border);
}

.form-textarea textarea {
  min-height: 124px;
  font-size: 14px;
  width: 100%;
  padding: 16px 24px;
  resize: vertical;
}

.form-dropdown:hover select {
  cursor: pointer;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.12);
}

.form-item+label,
.form-dropdown label {
  position: absolute;
  font-size: 14px;
  padding: 0px 16px;
  border-radius: 16px;
  top: 12px;
  pointer-events: none;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.form-textarea label {
  top: 16px;
}

body.darkmode .form-item+label,
body.darkmode .form-dropdown label {
  color: #fff;
}

.form-item+label.active,
.form-dropdown label {
  max-width: fit-content;
  top: -8px;
  left: 0px !important;
  font-size: 12px;
  padding: 0px 10px;
  text-overflow: none;
  margin: 0 6px;
  color: #1c1c1c;
  background: rgb(255, 255, 255);
  background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 44%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, 0) 100%);
}

body.darkmode .form-item+label.active,
body.darkmode .form-dropdown label {
  color: #fff;
  background: var(--box-bg);
  background: linear-gradient(0deg, var(--box-bg) 0%, var(--box-bg) 50%, rgba(62, 90, 135, 0.16) 50%, rgba(62, 90, 135, 0) 100%);
}

body.darkmode .modal .form-item+label.active,
body.darkmode .modal .form-dropdown label {
  color: #fff;
  background: var(--box-input-bg);
  background: linear-gradient(0deg, var(--box-input-bg) 0%, var(--box-input-bg) 35%, var(--box-bg) 76%, var(--box-bg) 100%);
}

.form-dropdown options,
.form-input options {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 0px;
  right: 8px;
  gap: 8px;
}

body.darkmode .modal .form-item {
  background-color: var(--box-input-bg);
  border: 1px solid var(--box-input-border);
}

.form-item+label.centered {
  left: 50% !important;
  width: fit-content;
  transform: translate(-50%, 0%);
  text-align: center;
  margin: 0 !important;
}

.form-textarea .inputIcon {
  top: 14px;
  left: 14px;
}

.form-suggestions .inputIcon {
  left: unset;
  right: 10px;
}

.inputIcon {
  position: absolute;
  height: 24px;
  left: 8px;
  top: 8px;
  aspect-ratio: 1 / 1;
  opacity: 0.64;
  pointer-events: none;
  overflow: hidden;
}

.inputIcon .icon {
  height: 24px;
  aspect-ratio: 1 / 1;
  transition: all 0.12s;
}

.inputIcon .icon.open {
  margin-top: 24px;
}

.inputIcon .icon::after {
  position: absolute;
  content: '';
  width: 24px;
  height: 24px;
  top: -24px;
  background: url('../assets/icons/search.svg');
  left: 0;
}

.inputIcon .icon.loading {
  background: url('../assets/icons/progress_activity.svg') !important;
}

body.darkmode .inputIcon .icon {
  filter: invert(1);
}

.inputIcon .icon.loadingList::after {
  background: url('../assets/icons/progress_activity.svg') !important;
}

.form-input.error input,
.form-password.error input {
  border: 1px solid #C65959;
}

.form-input.error label,
.form-password.error label {
  color: #C65959;
}

.form-input.warning input,
.form-password.warning input {
  border: 1px solid #EF943F;
}

.form-input.warning label,
.form-password.warning label {
  color: #EF943F;
}

.form-password i {
  position: absolute;
  box-sizing: content-box;
  height: 100%;
  width: 24px;
  right: 10px;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.visibility,
.visibility_off {
  filter: invert(29%) sepia(5%) saturate(6630%) hue-rotate(169deg) brightness(66%) contrast(73%);
  opacity: 0.64;
}

body.darkmode .visibility,
body.darkmode .visibility_off {
  filter: invert(1);
}

.visibility {
  background: url("../assets/icons/inputs/visibility.svg") no-repeat;
}

.visibility_off {
  background: url("../assets/icons/inputs/visibility_off.svg") no-repeat;
}

.form-search .input_buttons,
.form-message .input_buttons,
.form-textarea .input_buttons {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  height: 38px;
  width: fit-content;
  border-radius: var(--default-border-radius);
  background-color: #fff;
  z-index: 3;
}

.form-textarea .input_buttons.rich {
  left: 8px;
  right: unset;
}

.form-search .input_buttons,
.form-message .input_buttons {
  top: 1px;
  right: 4px;
}

.form-textarea .input_buttons {
  right: 7px;
  top: 7px;
}

body.darkmode .form-search .input_buttons,
body.darkmode .form-message .input_buttons,
body.darkmode .form-textarea .input_buttons {
  background-color: var(--box-bg);
}

.form-search .input_buttons button {
  filter: none;
  opacity: 0.72;
}

.input_buttons button img {
  filter: invert(0);
}

body.darkmode .input_buttons button img {
  filter: invert(1);
}

.form-search .input_buttons button,
.form-message .input_buttons button,
.form-textarea .input_buttons button {
  justify-content: center;
  align-items: center;
  height: 32px;
  aspect-ratio: 1 / 1;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  padding: 0;
  border: none;
}

@media only all and (max-width: 620px) {

  .form-search .input_buttons,
  .form-message .input_buttons,
  .form-textarea .input_buttons {
    height: calc(52px - 2px);
  }

  .form-search .input_buttons button,
  .form-message .input_buttons button,
  .form-textarea .input_buttons button {
    height: calc(52px - 2px);
  }
}

.form-search .input_buttons button:hover,
.form-message .input_buttons button:hover,
.form-textarea .input_buttons button:hover {
  background-color: rgba(0, 0, 0, 0.044);
}

body.darkmode .form-search .input_buttons button:hover,
body.darkmode .form-message .input_buttons button:hover,
body.darkmode .form-textarea .input_buttons button:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

.form-message .btn_input_attachment,
.form-textarea .btn_input_attachment {
  background: url('../assets/icons/attach_file.svg') no-repeat center;
}

.form-message .btn_input_screencast,
.form-textarea .btn_input_screencast {
  background: url('../assets/icons/videocam.svg') no-repeat center;
}

.form-search .btn_input_search {
  background: url('../assets/icons/search.svg') no-repeat center;
}

.form-input button .btnContent img {
  opacity: 1 !important;
}

.form-dropdown::after {
  position: absolute;
  content: '';
  height: 32px;
  width: 32px;
  top: 6px;
  right: 7px;
  transition: all 0.16s;
  background: url('../assets/icons/expand_more.svg') no-repeat center;
  background-color: #fff;
  opacity: 0.85;
  pointer-events: none;
}

.form-dropdown.multiValue::after {
  position: absolute;
  content: '';
  height: 32px;
  width: 32px;
  top: 5px;
  right: calc(28px + 4px);
  background: url('../assets/icons/expand_more.svg') no-repeat center;
  background-color: #fff;
  opacity: 0.85;
  pointer-events: none;
}

.form-dropdown:active .form-item {
  border-bottom: none !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.form-dropdown:active::after {
  transform: rotate(180deg);
  transition: all 0.16s;
}

.form-input .form-dropdown::after {
  right: 95px;
}

body.darkmode .form-dropdown::after {
  filter: invert(1);
  background-color: transparent;
}
.dropdownIcon {
    position: absolute;
    height: 24px;
    left: 8px;
    top: 8px;
    aspect-ratio: 1 / 1;
    opacity: 0.64;
    pointer-events: none;
    overflow: hidden;
}
body.darkmode .dropdownIcon {
  filter: invert(1);
}
.dropdownIcon .icon{
  height: 24px;
  aspect-ratio: 1 / 1;
  transition: all 0.12s;
}

.form-dropdown select {
  width: 100%;
  -webkit-appearance: none;
}

.iconPreview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--box-border-light);
  flex-shrink: 0;
  background: #FFF;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.04);
  border-radius: var(--default-secondary-border-radius);
}

.iconPreview::after {
  position: absolute;
  content: 'PREVIEW';
  font-size: 7px;
  color: #444444;
  top: -5px;
  background-color: #fff;
  padding: 0 4px;
}

body.darkmode .iconPreview {
  background-color: var(--box-input-bg);
  border: 1px solid var(--box-input-border);
}

body.darkmode .iconPreview::after {
  color: #fff;
  background: linear-gradient(0deg, var(--box-input-bg) 0%, var(--box-input-bg) 35%, var(--box-bg) 76%, var(--box-bg) 100%);
}

.iconPreview img {
  height: 70%;
}

body.darkmode .iconPreview img {
  filter: invert(1);
}

/* ------------------------------------------------------------------------------------------ */
/* Switch ----------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------ */

.switch_box {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: nowrap;
  min-height: 40px;
  border-radius: var(--default-border-radius);
  padding: 10px;
  gap: 16px;
}

.switch_box:hover {
  background-color: rgba(0, 0, 0, 0.032);
}

body.darkmode .switch_box:hover {
  background-color: #202c3f;
}

body.darkmode .switch_box.tooltip::after {
  filter: invert(1);
}

.switch_box label:last-of-type {
  display: inline;
  align-items: center;
  min-height: 18px;
  margin-top: 3px;
  pointer-events: none;
  font-size: 14px;
}

.switch_radio {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
}

.switch_radio input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch_radio_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: background-color 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--default-border-radius);
  overflow: hidden;
}

body.darkmode .switch_radio_slider {
  background-color: rgba(255, 255, 255, 0.24);
}

.switch_radio_slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: #fff;
  transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: var(--default-secondary-border-radius);
  z-index: 2;
}

.switch_radio_slider .ON,
.switch_radio_slider .OFF {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  bottom: 0px;
  transition: transform 0.16s cubic-bezier(0.4, 0, 0.2, 1);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  opacity: 0.24;
}

body.darkmode .switch_radio_slider .ON,
body.darkmode .switch_radio_slider .OFF {
  opacity: 0.32;
}

.switch_radio_slider .ON {
  left: 0px;
  transform: translateX(-24px);
  background-image: url('../assets/icons/check_small.svg');
  z-index: 1;
}

.switch_radio_slider .OFF {
  right: 0px;
  transform: translateX(0px);
  background-image: url('../assets/icons/close_small.svg');
  z-index: 1;
}

body.darkmode .switch_radio_slider:before {
  background-color: rgba(255, 255, 255, 0.64);
}

body.darkmode input:checked+.switch_radio_slider:before {
  background-color: #fff;
}

input:checked+.switch_radio_slider {
  background-color: #45aa55;
}

body.darkmode input:checked+.switch_radio_slider {
  background-color: #45aa55;
}

input:focus+.switch_radio_slider {
  box-shadow: 0 0 1px var(--button-bg);
}

input:checked+.switch_radio_slider:before {
  transform: translateX(20px) rotate(180deg);
}

input:checked+.switch_radio_slider .OFF {
  transform: translateX(24px);
}

input:checked+.switch_radio_slider .ON {
  transform: translateX(0px);
}

@media only all and (max-width: 620px) {
  .switch_box {
    align-items: center;
  }
  .switch_radio{
    height: 26px;
  }

  .switch_radio_slider:before{
    height: 18px;
    width: 18px;
  }

  input:checked+.switch_radio_slider:before {
    transform: translateX(19px);
  }

  .switch_radio_slider .ON,
  .switch_radio_slider .OFF {
    height: 26px;
    width: 23px;
  }
}

/* ------------------------------------------------------------------------------------------ */
/* Custom Checkbox Button ------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------ */

.checkboxToolbar {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

.checkboxToolbar.centered {
  justify-content: center;
}

label[name="checkbox"] {
  display: flex;
  align-items: center;
}

input[type="checkbox"] {
  width: 24px;
  height: 24px;
  background: url("../assets/icons/inputs/check_box_outline_blank.svg") no-repeat;
  margin: 0 12px 0 0;
  display: inline-block;
}

input[type="checkbox"]:checked {
  background: url("../assets/icons/inputs/check_box_FILL.svg") no-repeat;
  display: inline-block;
}

.checkboxToolbar input[type="checkbox"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.checkboxToolbar label {
  position: relative;
  display: inline-flex;
  min-height: 40px;
  width: 100%;
  padding: 12px 16px 13px 46px;
  font-size: 14px;
  margin: 0;
  color: #1c1c1c;
  border-left: none;
  border-right: none;
  background-origin: padding-box;
  border-radius: var(--default-border-radius);
  gap: 6px;
  cursor: pointer;
}

.checkboxToolbar label:hover {
  background-color: #e5ebf44a;
}

body.darkmode .checkboxToolbar label:hover {
  background-color: #364762;
}

.checkboxToolbar label:hover::after {
  background-image: url("../assets/icons/inputs/check_box_outline_blank.svg");
  background-repeat: no-repeat;
}

.checkboxToolbar .checkboxToolbar input[type="checkbox"]:checked label:hover {
  opacity: 0.72;
  color: #fff !important;
}

.checkboxToolbar label img {
  height: 20px;
  width: 20px;
}

.checkboxToolbar label a {
  width: fit-content;
  text-decoration: underline;
}

.checkboxToolbar input[type="checkbox"]:checked+label {
  background-color: rgba(39, 76, 137, 0.064);
}

body.darkmode .checkboxToolbar input[type="checkbox"]+label {
  color: #fff !important;
  opacity: 0.72;
}

body.darkmode .checkboxToolbar input[type="checkbox"]:checked+label {
  background-color: #283851;
  color: #fff !important;
  opacity: 1;
}

.checkboxToolbar label::after {
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  top: 9px;
  left: 14px;
  transition: 0.24s;
  background-image: url("../assets/icons/inputs/check_box_outline_blank.svg");
  filter: invert(94%) sepia(16%) saturate(0%) hue-rotate(212deg) brightness(88%) contrast(89%);
  background-repeat: no-repeat;
  opacity: 1;
}

body.darkmode .checkboxToolbar label::after {
  background-color: rgba(255, 255, 255, 0.064);
  filter: invert(1);
  opacity: 0.64;
}

.checkboxToolbar input[type="checkbox"]:checked+label:hover::after {
  opacity: 0.64;
}

.checkboxToolbar input[type="checkbox"]:checked+label::after {
  background-image: url("../assets/icons/inputs/check_box_FILL.svg");
  filter: invert(22%) sepia(37%) saturate(2248%) hue-rotate(194deg) brightness(97%) contrast(86%);
  background-position: center;
  opacity: 1;
}

body.darkmode .checkboxToolbar input[type="checkbox"]:checked+label::after {
  filter: invert(88%) sepia(19%) saturate(1148%) hue-rotate(181deg) brightness(100%) contrast(108%);
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

.form-textarea .richTextEditor {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  min-height: 50px;
  width: 100%;
  border: 1px solid var(--box-border-light);
  border-bottom-left-radius: 0;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 6px;
  padding: 8px;
}

body.darkmode .form-textarea .richTextEditor {
  background-color: var(--box-input-bg);
  border: 1px solid var(--box-input-border);
}

.form-textarea .editor {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid #bbbcbc;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 0;
  border-top: none;
  font-size: 15px;
  word-wrap: normal;
  resize: none;
  resize: none;
  color: #4d4d4d;
  padding: 14px 26px 16px 16px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  caret-color: auto;
}

body.darkmode .form-textarea .editor {
  border: 1px solid #314A63;
  border-top: none;
  color: #CAE4FF;
}

.form-textarea .editor span,
.form-textarea .editor div,
.form-textarea .editor * {
  color: unset !important;
  background-color: transparent !important;
}

.form-textarea .characterCount {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  align-items: center;
  padding: 0 10px;
}

/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------ */

@media only all and (max-width: 620px) {
  .iconPreview {
    width: 52px;
    height: 52px;
  }

  .form-textarea .richTextEditor button {
    height: 50px;
    width: 50px;
  }

  .form-textarea .richTextEditor {
    height: 64px;
  }

  .checkboxToolbar label {
    height: 52px;
    padding-top: 17px;
  }

  .checkboxToolbar label::after {
    top: 13px;
  }

  .form-item+label.centered,
  input[type="input"]+label,
  input[type="password"]+label {
    top: 18px;
  }

  .form-item+label.active,
  .form-dropdown label {
    top: -8px !important;
  }

  .form-item {
    height: 52px;
  }

  .form-dropdown::after {
    top: 10px;
  }

  .inputIcon {
    top: 13px;
  }
}