a {
  color: var(--f-f7);
}

a:hover, a:focus, a:active {
  color: var(--f-o8);
}

/* Backend */
.ds-backend {
  --lf-gray: var(--f-g5);
  --lf-gray-100: var(--f-g1);
  --lf-gray-200: var(--f-g2);
  --lf-gray-300: var(--f-g3);
  --lf-gray-400: var(--f-g4);
  --lf-gray-500: var(--f-g5);
  --lf-gray-600: var(--f-g6);
  --lf-gray-700: var(--f-g7);
  --lf-gray-800: var(--f-g8);
  --lf-gray-900: var(--f-g9);
  --lf-primary: var(--f-primary);
  --lf-secondary: var(--f-secondary);
  --lf-success: var(--f-success);
  --lf-info: var(--f-info);
  --lf-warning: var(--f-warning);
  --lf-danger: var(--f-danger);
  --lf-light: var(--f-light);
  --lf-dark: var(--f-dark);
  --lf-primary-rgb: 11, 67, 220;
  --lf-secondary-rgb: 90, 90, 90;
  --lf-success-rgb: 27, 180, 118;
  --lf-info-rgb: 36, 127, 188;
  --lf-warning-rgb: 245, 175, 0;
  --lf-danger-rgb: 223, 33, 3;
  --lf-light-rgb: 243, 243, 243;
  --lf-dark-rgb: 13, 13, 13;
  --lf-white-rgb: 255, 255, 255;
  --lf-black-rgb: 0, 0, 0;
  --lf-body-color-rgb: 13, 13, 13;
  --lf-body-bg-rgb: 230, 230, 230;
  --lf-font-sans-serif: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --lf-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --lf-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --lf-body-font-family: var(--lf-font-sans-serif);
  --lf-body-font-size: 1rem;
  --lf-body-font-weight: 400;
  --lf-body-line-height: 1.5;
  --lf-body-color: var(--f-d9);
  --lf-body-bg: var(--f-g3);
  --lf-border-width: 1px;
  --lf-border-style: solid;
  --lf-border-color: var(--f-g4);
  --lf-border-color-translucent: rgba(0, 0, 0, 0.175);
  --lf-border-radius: 0.375rem;
  --lf-border-radius-sm: 0.25rem;
  --lf-border-radius-lg: 0.5rem;
  --lf-border-radius-xl: 1rem;
  --lf-border-radius-2xl: 2rem;
  --lf-border-radius-pill: 50rem;
  --lf-heading-color: ;
  --lf-link-color: var(--f-f7);
  --lf-link-hover-color: var(--f-f8);
  --lf-code-color: #d63384;
  --lf-highlight-bg: #fdefcc;

  background: var(--f-g1);
}

/* Backend header */
.ds-nav-site-name {
  font-size: 0px;
  font-weight: bold;
  vertical-align: bottom;
}

.ds-nav-site-name::before {
  content: "Frama";
  font-size: 1.5rem;
  color: var(--f-f7);
}

.ds-nav-site-name::after {
  content: "forms 𝘣𝘦𝘵𝘢";
  font-size: 1.5rem;
  color: var(--f-o7);
}

.ds-main-navbar svg {
  color: var(--f-g6);
}

/* Backend sidebar */
.ds-main-sidebar {
  background: var(--f-g3)
}
.ds-menu li {
  padding: .5rem;
  border-left: .25rem solid transparent;
}

.ds-menu li.active {
  padding: .5rem;
  border-left-color: var(--f-o4);
}

.ds-menu li:hover {
  background: var(--f-g2);
}

.ds-menu li a {
  color: var(--f-g8);
  border: none !important;
  padding: 0 !important;
}

.ds-menu li a svg {
  color: var(--f-g7)
}

/* Backend elements */
.nav {
  --lf-nav-pills-link-active-color: var(--f-d1);
  --lf-nav-pills-link-active-bg: var(--f-f7);
}

.list-group, .ds-list-group {
  --lf-list-group-color: var(--f-g9);
  --lf-list-group-bg: var(--f-d1);
  --lf-list-group-border-color: rgba(0, 0, 0, 0.125);
  --lf-list-group-border-width: 1px;
  --lf-list-group-border-radius: 0.375rem;
  --lf-list-group-item-padding-x: 1rem;
  --lf-list-group-item-padding-y: 0.5rem;
  --lf-list-group-action-color: var(--f-g5);
  --lf-list-group-action-hover-color: var(--f-g5);
  --lf-list-group-action-hover-bg: var(--f-g5);
  --lf-list-group-action-active-color:  var(--f-g9);
  --lf-list-group-action-active-bg:  var(--f-g2);
  --lf-list-group-disabled-color:  var(--f-g6);
  --lf-list-group-disabled-bg:  var(--f-d1);
  --lf-list-group-active-color:  var(--f-d1);
  --lf-list-group-active-bg: var(--f-f7);
  --lf-list-group-active-border-color: var(--f-f7);
}

.btn-primary {
  --lf-btn-bg: var(--f-f7);
  --lf-btn-color: var(--f-d1);
  --lf-btn-border-color: transparent;
  --lf-btn-hover-color: var(--f-d1);
  --lf-btn-hover-bg: var(--f-f8);
  --lf-btn-hover-border-color: transparent;
  --lf-btn-focus-shadow-rgb: 90, 90, 90;
  --lf-btn-active-color: var(--f-d1);
  --lf-btn-active-bg: var(--f-f7);
  --lf-btn-active-border-color: transparent;
  --lf-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --lf-btn-disabled-color: var(--f-d1);
  --lf-btn-disabled-bg: var(--f-f7);
  --lf-btn-disabled-border-color: transparent;

  border-radius: .25rem;
}

.btn-outline-primary {
  --lf-btn-color: var(--f-f7);
  --lf-btn-border-color: var(--f-f7);
  --lf-btn-hover-color: var(--f-d1);
  --lf-btn-hover-bg: var(--f-f8);
  --lf-btn-hover-border-color: var(--f-f8);
  --lf-btn-active-color: var(--f-d1);
  --lf-btn-active-bg: var(--f-f8);
  --lf-btn-active-border-color: var(--f-f8);
  --lf-btn-disabled-color: var(--f-f7);
  --lf-btn-disabled-bg: transparent;

  border-radius: .25rem;
}

.btn-outline-secondary {
  --lf-btn-bg: var(--f-g2);
  --lf-btn-color: var(--f-g6);
  --lf-btn-border-color: transparent;
  --lf-btn-hover-color: #fff;
  --lf-btn-hover-bg: var(--f-g7);
  --lf-btn-hover-border-color: transparent;
  --lf-btn-focus-shadow-rgb: 90, 90, 90;
  --lf-btn-active-color: #fff;
  --lf-btn-active-bg: var(--f-g6);
  --lf-btn-active-border-color: transparent;
  --lf-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --lf-btn-disabled-color: var(--f-g6);
  --lf-btn-disabled-bg: var(--f-g2);
  --lf-btn-disabled-border-color: transparent;

  border-radius: .25rem;
}

.pagination {
  --lf-pagination-bg:  var(--f-d1);
  --lf-pagination-border-color: transparent;
  --lf-pagination-hover-bg: var(--f-f8);
  --lf-pagination-hover-border-color: transparent;
  --lf-pagination-focus-bg: var(--f-f8);
  --lf-pagination-active-color: var(--f-d1);
  --lf-pagination-active-bg: var(--f-f7);
  --lf-pagination-active-border-color: transparent;
  --lf-pagination-disabled-color: var(--f-g6);
  --lf-pagination-disabled-bg: var(--f-d1);
  --lf-pagination-disabled-border-color: transparent;
}

.text-bg-warning {
  color: var(--f-o7) !important;
  background-color: var(--f-o2) !important;
}

.ds-wrapper-white {
  background: transparent;
}

.card {
  border-color: transparent;
}

.table {
  background: var(--f-d1);
}

.input-group-text {
  color: var(--f-g9);
  background-color: var(--f-d1);
}

.form-select, .form-control {
  color: var(--f-g9);
  background-color: var(--f-d1);
}

.ds-chart-container {
  background: var(--f-d1);
  border: .5rem solid var(--f-d1);
  border-radius: .25rem;
}

/* Frontend */
.ds-frontend .ds-liberaform {
  background: var(--f-o1);
  border-top: 8px solid var(--f-o5);
  border-radius: .5rem;
  padding: 1.5rem 1.5rem 0 1.5rem;
}

.ds-frontend .ds-header-title-with-button {
  background: var(--f-d1);
  border: none;
}

.ds-frontend main#main-content {
  padding-bottom: 4rem;
}

.form-check-input,
#fb-render .formbuilder-checkbox-inline input,
#fb-render .formbuilder-radio-inline input,
#fb-renderer .formbuilder-checkbox-inline input,
#fb-renderer .formbuilder-radio-inline input,
#fb-editor .formbuilder-checkbox-inline input,
#fb-editor .formbuilder-radio-inline input,
#fb-render .formbuilder-checkbox input,
#fb-render .formbuilder-radio input,
#fb-renderer .formbuilder-checkbox input,
#fb-renderer .formbuilder-radio input,
#fb-editor .formbuilder-checkbox input,
#fb-editor .formbuilder-radio input {
  background-color: var(--f-d1);
  border-color: var(--f-g6);
  width: 1.125rem;
  height: 1.125rem;
}

.form-check-input:checked,
#fb-render .formbuilder-checkbox-inline input:checked,
#fb-render .formbuilder-radio-inline input:checked,
#fb-renderer .formbuilder-checkbox-inline input:checked,
#fb-renderer .formbuilder-radio-inline input:checked,
#fb-editor .formbuilder-checkbox-inline input:checked,
#fb-editor .formbuilder-radio-inline input:checked,
#fb-render .formbuilder-checkbox input:checked,
#fb-render .formbuilder-radio input:checked,
#fb-renderer .formbuilder-checkbox input:checked,
#fb-renderer .formbuilder-radio input:checked,
#fb-editor .formbuilder-checkbox input:checked,
#fb-editor .formbuilder-radio input:checked {
  background-color: var(--f-f7);
  border-color: var(--f-f7);
}

/* Framafooter */
.ds-backend #f-footer {
  display: none !important;
}

/* Fix Framanav alerts */
#f-- .ds-backend #fp-alert {
  margin-top: 3.5rem;
}