/*change theme*/
:root {
  --dark: #333;
  --light: #fff;
}

/*change theme button*/
.main-logo-container {
  display: flex !important;
  align-items: center;
  gap: 1rem;
}

.data-theme-toggle-container {
  position: relative;
}
.data-theme-toggle {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  z-index: 1;
}
.data-theme-toggle-label {
  display: block;
  position: relative;
  width: 50px;
  height: 25px;
  background-color: var(--dark);
  border-radius: 25px !important;
  transition: 0.4s;
}
.data-theme-toggle-label::before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: auto;
  left: 0;
  bottom: 0;
  width: 25px;
  height: 25px;
  border-radius: 100% !important;
  border: 1px var(--dark) solid;
  background-color: var(--light);
  color: var(--dark);
  transition: 0.4s;
  content: "";
  font-family: "Font Awesome 5 Free";
  font-size: 15px;
  font-weight: 900;
  box-sizing: border-box;
}
.data-theme-toggle:checked + .data-theme-toggle-label {
  background-color: var(--light);
}
.data-theme-toggle:checked + .data-theme-toggle-label::before {
  left: calc(100% - 25px);
  border-color: var(--light);
  background-color: var(--dark);
  color: var(--light);
  content: "";
}

/* Dark mode styles for fmpbs.css elements */
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-fg: #000000;
  --color-primary: #0080ff;
  --color-secondary: #c0c0c0;
  --color-highlight: #80bfff;
  --color-muted: #808080;
  --color-border: #c0c0c0;
  --color-bg-alt: #edeff0;
}

[data-theme="dark"] {
  --color-bg: #121212;
  --color-fg: #e0e0e0;
  --color-primary: #80bfff;
  --color-secondary: #555555;
  --color-highlight: #80bfff;
  --color-muted: #808080;
  --color-border: #555555;
  --color-bg-alt: #333333;
}

html[data-theme="dark"] .main .container .content .portlet {
  background-color: var(--color-bg);
  color: var(--color-fg);
}
html[data-theme="dark"] body {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .fm-check > i {
  background-color: var(--color-bg-alt);
  border-color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .fm-check input:checked + i {
  border-color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .fm-check input:checked + i:before {
  background-color: var(--color-highlight);
}

html[data-theme="dark"] .fm-form .fm-check input[disabled] + i {
  border-color: var(--color-secondary);
  background-color: var(--color-bg-alt);
}

html[data-theme="dark"] .fm-form .fm-check input[disabled] + i:before {
  background-color: var(--color-bg-alt);
}

html[data-theme="dark"] .fm-form .fm-check > span {
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .fm-check > span .active {
  color: var(--color-highlight);
}

html[data-theme="dark"] .fm-progress {
  background-color: var(--color-bg-alt);
  border-color: var(--color-secondary);
}

html[data-theme="dark"] .fm-progress > .fm-progress-bar {
  background-color: var(--color-highlight);
}

html[data-theme="dark"] .fm-progress > .fm-progress-bar-pre,
html[data-theme="dark"] .fm-progress > .fm-progress-bar-post {
  background-color: var(--color-bg-alt);
}

html[data-theme="dark"] .fm-progress > .fm-progress-text {
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .form-control {
  background-color: var(--color-bg-alt);
  border-color: var(--color-secondary);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .form-control:focus {
  border-color: var(--color-highlight);
}

html[data-theme="dark"] .fm-form label {
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .radio label,
html[data-theme="dark"] .fm-form .checkbox label {
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .help-block {
  color: var(--color-muted);
}

html[data-theme="dark"] .fm-form .fm-questions,
html[data-theme="dark"] .fm-navigation {
  background-color: var(--color-bg);
}

html[data-theme="dark"] .fm-form .fm-header > .fm-header-text {
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .fm-question > .fm-question-text {
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .fm-question > .fm-answer {
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .line-dashed {
  border-color: var(--color-secondary);
}

html[data-theme="dark"] .fm-form .textconcept-main {
  background-color: var(--color-bg-alt);
  border-color: var(--color-secondary);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .textconcept-btns .btn {
  background-color: var(--color-bg-alt);
  border-color: var(--color-secondary);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .textconcept-btns .btn.selected {
  background-color: var(--color-highlight);
  color: var(--color-bg);
}

html[data-theme="dark"] .fm-form .textconcept-txt {
  background-color: var(--color-bg-alt);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .btn-next:disabled {
  color: var(--color-secondary);
}

html[data-theme="dark"]
  .fm-form
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .select2-container .select2-selection--single {
  background-color: var(--color-bg-alt);
  border-color: var(--color-secondary);
}

html[data-theme="dark"] .fm-form .qcont {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .qcont .qcol {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .border {
  border-color: var(--color-secondary);
}

html[data-theme="dark"] .fm-form .right-cont {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .right-cont .basket-txt {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .basket-fill-width-or-more div {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .basket-fill-width-or-labels div {
  background-color: var(--color-bg);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .fm-single-img,
html[data-theme="dark"] .fm-form .fm-multi-img {
  background-color: var(--color-bg-alt);
  border-color: var(--color-secondary);
}

html[data-theme="dark"] .fm-form .fm-single-img > span,
html[data-theme="dark"] .fm-form .fm-multi-img > span {
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .fm-single-img-selected > img,
html[data-theme="dark"] .fm-form .fm-multi-img-selected > img {
  border-color: var(--color-highlight);
}

html[data-theme="dark"] .fm-form .fm-captcha,
html[data-theme="dark"] .fm-form .fm-captcha-selected {
  background-color: var(--color-bg-alt);
  border-color: var(--color-secondary);
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .fm-captcha > span {
  color: var(--color-fg);
}

html[data-theme="dark"] .fm-form .fm-hidden-single-img,
html[data-theme="dark"] .fm-form .fm-hidden-multi-img {
  background-color: var(--color-bg-alt);
  border-color: var(--color-secondary);
}

html[data-theme="dark"] .fm-form .fm-hidden-single-img > span,
html[data-theme="dark"] .fm-form .fm-hidden-multi-img > span {
  color: var(--color-fg);
}

html[data-theme="dark"] .select2-dropdown {
  background-color: var(--color-bg-alt);
  border-color: var(--color-secondary);
  color: var(--color-fg);
}

html[data-theme="dark"] .select2-search__field {
  background-color: var(--color-bg-alt) !important;
  border-color: var(--color-secondary) !important;
  color: var(--color-fg) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--color-border);
}