:root {
  --brand-light: #f4f4f4;
  --brand-dark: rgba(33, 38, 41, 0.9);
  --brand-dark-hover: #282828;
  --brand-black: #324050;
  --brand-primary: #8e9aa6;
  --brand-primary-hover: #77818a;
  --brand-logo-black: '';
  --brand-logo-white: '';
  --brand-border-radius: 0.75rem;
  --farbe1: var(--brand-primary);
  --brand-input-border-width: 2px;
  --brand-input-border-radius: var(--brand-border-radius);
  --brand-input-background-color: #f4f6f9; /* azure */ /* #f4f6f9; */ /* #f4f6f9; */  /* #dfe3e9; */ /* #f9f9f9 */
  --brand-input-border-color: transparent;
  --brand-input-hover-background-color: #f0f2f5;
  --brand-input-hover-border-color: #f0f2f5;
  --brand-option-border-width: 2px; /* var(--brand-input-border-width) */
  --brand-option-border-radius: var(--brand-border-radius);
  --brand-option-background-color: #dfe3e9; /* beige */ /* #dfe3e9; */ /* #dfe3e9; */ /* #d0d6df; */ /* #eee */
  --brand-option-border-color: transparent; /* green */
  --brand-option-hover-background-color: #caccce;
  --brand-option-hover-border-color: #caccce;
}



/* ----- Body ----- */


@media (prefers-color-scheme: light) {
  body:not(.rex-theme-dark) {
    background-color: var(--brand-light);
  }
}



/* ----- Backend Navbar ----- */

.rex-is-logged-in .rex-nav-top,
#rex-page-setup .rex-nav-top {
  z-index: 1066;
}
.rex-is-logged-in .rex-nav-main-navigation,
#rex-page-setup .rex-nav-main-navigation {
  padding-left: 15px;
  padding-right: 15px;
  font-weight: 500;
}



/* ----- Backend Logo ----- */

.rex-is-logged-in .rex-nav-top .navbar-brand,
#rex-page-setup .rex-nav-top .navbar-brand {
  margin-left: 0px;
  padding: 25px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
}
.rex-is-logged-in .rex-nav-top .navbar-brand svg,
#rex-page-setup .rex-nav-top .navbar-brand svg {
  opacity: 0.0;
  display: none !important;
}
.rex-is-logged-in .rex-nav-top a {
  font-weight: 500;
}



/* ----- Farbe anpassen ----- */

.navbar-brand,
.rex-branding {
  background-image: var(--brand-logo-white);
}
.rex-nav-main {
  background-color: var(--brand-dark);
}
@media (prefers-color-scheme: light) {
  body:not(.rex-theme-dark) .rex-nav-main li > a:hover,
  body:not(.rex-theme-dark) .rex-nav-main li > a:focus {
    background-color: var(--brand-dark);
  }
}



/* ----- Backend Navbar ----- */

.rex-is-logged-in .rex-nav-top .navbar,
#rex-page-setup .rex-nav-top .navbar {
  background-color: var(--brand-primary);
}

.rex-nav-top,
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  border-radius: var(--brand-input-border-radius) !important;
}
.rex-nav-main li > a {
  border-radius: var(--brand-input-border-radius);
}

@media (prefers-color-scheme: light) {
  body:not(.rex-theme-dark) .rex-nav-main li > a:hover,
  body:not(.rex-theme-dark) .rex-nav-main li > a:focus {
    background-color: var(--brand-dark-hover);
    border-color: var(--brand-dark-hover) !important;
    color: var(--brand-primary);
  }
  body:not(.rex-theme-light) .nav-pills>li.active>a,
  body:not(.rex-theme-light) .nav-pills>li.active>a:hover,
  body:not(.rex-theme-light) .nav-pills>li.active>a:focus {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary) !important;
    color: #fff !important;
  }
}

@media (prefers-color-scheme:dark) {
  body:not(.rex-theme-light) .rex-nav-main li > a:hover,
  body:not(.rex-theme-light) .rex-nav-main li > a:focus {
    color: var(--brand-primary);
  }
  body:not(.rex-theme-light) .nav-pills>li.active>a,
  body:not(.rex-theme-light) .nav-pills>li.active>a:hover,
  body:not(.rex-theme-light) .nav-pills>li.active>a:focus {
    background-color: var(--brand-primary);
    color: #000 !important;
  }
  body:not(.rex-theme-light).rex-is-logged-in .rex-nav-top .navbar,
  body:not(.rex-theme-light)#rex-page-setup .rex-nav-top .navbar {
    background-color: #1867a6;
    background-color: var(--brand-primary);
  }
  body:not(.rex-theme-light) .btn-brand-primary,
  body:not(.rex-theme-light) .btn-apply,
  body:not(.rex-theme-light) .btn-save,
  body:not(.rex-theme-light) .btn-select,
  body:not(.rex-theme-light) .btn-send,
  body:not(.rex-theme-light) .btn-setup,
  body:not(.rex-theme-light) .btn-update {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
  }
}



/* ----- Backend Panel ----- */

.panel-add,
.panel-edit {
  border: none;
  border-radius: var(--brand-border-radius);
  /* overflow: hidden; */
}

.panel-add > .panel-heading,
.panel-edit > .panel-heading {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  border-top-left-radius: var(--brand-input-border-radius);
  border-top-right-radius: var(--brand-input-border-radius);
}
.panel-add .panel-body,
.panel-edit .panel-body {
  background-color: #fff;
}
.btn-save,
.btn-apply {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  font-weight: 500;
}
.btn-save:hover,
.btn-apply:hover {
  background-color: var(--brand-primary-hover) !important;
  border-color: var(--brand-primary-hover) !important;
}
.panel-footer {
  border-bottom-left-radius: var(--brand-input-border-radius);
  border-bottom-right-radius: var(--brand-input-border-radius);
}
.panel-footer .btn {
  margin-bottom: 0.5rem;
}

@media (prefers-color-scheme:dark) {
  body:not(.rex-theme-light) .btn-save,
  body:not(.rex-theme-light) .btn-apply {
    color: #000;
  }
  body:not(.rex-theme-light) .btn-save:hover,
  body:not(.rex-theme-light) .btn-apply:hover {
    color: #000;
  }
}





/* ----- Backend Footer ----- */

.rex-global-footer .rex-redaxo-logo {
  height: 11px;
  margin-top: -3px;
  margin-left: 4px;
}
.rex-redaxo-logo .st0 {
  fill: #fff;
  opacity: 0.65;
}
@media (min-width: 992px) {
  .rex-is-logged-in .rex-global-footer,
  #rex-page-setup .rex-global-footer {
    margin-left: 190px;
  }
}
@media (min-width: 2560px) {
  .rex-is-logged-in .rex-global-footer,
  #rex-page-setup .rex-global-footer {
    margin-left: 250px;
  }
}



#rex-page-login .rex-nav-footer svg path {
  fill: #fff !important;
  opacity: 0.5;
}


@media (prefers-color-scheme: light) {
  body:not(.rex-theme-dark) .rex-is-logged-in .rex-nav-footer svg > g > g > * {
    fill: #000 !important;
    opacity: 0.65;
  }
  body:not(.rex-theme-dark) .rex-is-logged-in .rex-nav-footer svg path {
    fill: #000 !important;
    opacity: 0.65;
  }
}
@media (prefers-color-scheme: dark) {
  body:not(.rex-theme-light) .rex-is-logged-in .rex-nav-footer a {
    color: rgba(255, 255, 255, 0.75);
  }
  body:not(.rex-theme-light) .rex-is-logged-in .rex-nav-footer svg > g > g > * {
    fill: #fff !important;
    opacity: 0.5;
  }
  body:not(.rex-theme-light) .rex-is-logged-in .rex-nav-footer svg path {
    fill: #fff !important;
    opacity: 0.5;
  }
}





/* ----- Table ----- */

@media (prefers-color-scheme: light) {
  body:not(.rex-theme-dark) .table-hover > tbody > tr:hover {
    background-color: var(--brand-input-background-color);
  }
}



/* ----- Input ----- */


.btn {
  border-radius: var(--brand-input-border-radius);
}
.btn-group,
.btn-group-vertical {
  border-radius: var(--brand-input-border-radius);
}
.rex-panel-options .btn-group {
  overflow: hidden;
}
.redactor-box.redactor-styles-on,
.btn-default,
.dropdown-toggle {
  overflow: hidden;
}


.form-control {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  border-width: var(--brand-input-border-width);
  border-radius: var(--brand-input-border-radius) !important;
}
.form-control.focus,
.form-control:focus,
.redactor-box.redactor-styles-on.redactor-focus,
.redactor-box.redactor-styles-on.redactor-focus:focus {
  border-color: var(--brand-primary);
  outline: 0;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}



.redactor-box.redactor-styles-on,
.dropdown-toggle {
  border-width: var(--brand-input-border-width) !important;
  border-radius: var(--brand-input-border-radius);
}
.redactor-box.redactor-styles-on .redactor-toolbar {
  border-bottom-width: var(--brand-input-border-width);
}
.redactor-toolbar a.re-button.re-separator {
  width: var(--brand-input-border-width) !important;
}
.custom-link .input-group-btn .btn {
  width: 4.75rem;
}



.redactor-box.redactor-styles-on,
.btn-default,
.dropdown-toggle,
.rex-js-widget.custom-link {
  box-shadow: none;
  border-width: var(--brand-input-border-width);
  border-radius: var(--brand-input-border-radius) !important;
}



.input-group .input-group-btn {
  border-radius: var(--brand-input-border-radius);
  /* overflow: hidden; */
}

.custom-link .input-group-btn .btn {
  border-top-width: var(--brand-option-border-width);
  border-right-width: var(--brand-option-border-width);
  border-bottom-width: var(--brand-option-border-width);
}

.custom-link .form-control {
  border-width: var(--brand-option-border-width);
  border-top-left-radius: var(--brand-option-border-radius);
  border-bottom-left-radius: var(--brand-input-border-radius);
}


.form-control.focus,
.form-control:focus,
.redactor-focus.redactor-styles-on,
.redactor-focus:focus.redactor-styles-on,
.redactor-box.redactor-styles-on.redactor-focus,
.redactor-box.redactor-styles-on.redactor-focus:focus,
.custom-link .input-group-btn .btn:focus {
  box-shadow: none !important;
  z-index: 100;
}


.btn:active,
.btn.active {
  box-shadow: none;
}

.custom-link .form-control {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.input-group-btn .btn {
  border-width: var(--brand-option-border-width);
}



.rex-page-main .btn.btn-popup {
  padding: 6px 12px;
}
.rex-page-main .btn.intern_link,
.rex-page-main .btn.external_link,
.rex-page-main .btn.media_link,
.rex-page-main .btn.email_link,
.rex-page-main .btn.phone_link,
.rex-page-main .btn.delete_link {
  padding: 9.5px 12px;
}
.rex-yform .btn.btn-popup {
  padding: 9px 12px;
}


.rex-js-media-preview img {
  border-radius: var(--brand-input-border-radius);
}




.rex-select-style::after {
  z-index: 100;
}
.input-group {
  border-radius: var(--brand-input-border-radius);
}
.rex-is-logged-in .input-group-btn {
  border-radius: var(--brand-option-border-radius);
  /* overflow: hidden; */
}
.rex-is-logged-in .panel-body .input-group-btn {
  overflow: hidden;
}




.input-group-addon {
  border-width: var(--brand-option-border-width);
  border-radius: var(--brand-option-border-radius);
}

.btn-default:hover,
.btn-abort:hover,
.btn-back:hover,
.btn-clang:hover,
.btn-move:hover,
.btn-popup:hover,
.btn-reset:hover,
.btn-search:hover {
  border-radius: var(--brand-input-border-radius) !important;
}


.redactor-toolbar a:hover,
.redactor-air a:hover {
  border-radius: var(--brand-input-border-radius);
}



.dropdown,
.bootstrap-select,
.dropdown-toggle,
.rex-select-style {
  border-radius: var(--brand-input-border-radius);
}


.bootstrap-select .dropdown-toggle:focus,
.bootstrap-select > select.mobile-device:focus + .dropdown-toggle,
.open > .btn-default.dropdown-toggle,
.btn-default.dropdown-toggle:hover {
  outline: none !important;
}



.dropdown-menu {
  border-radius: var(--brand-border-radius);
}




@media (prefers-color-scheme: light) {


  /*
  body:not(.rex-theme-dark) .btn:focus,
  body:not(.rex-theme-dark) .btn:hover,
  body:not(.rex-theme-dark) .btn:active {
    background-color: var(--brand-input-hover-background-color);
  }
  */




  /* --- Button --- */

  /*
  body:not(.rex-theme-dark) .btn-default,
  body:not(.rex-theme-dark) .btn-abort,
  body:not(.rex-theme-dark) .btn-back,
  body:not(.rex-theme-dark) .btn-clang,
  body:not(.rex-theme-dark) .btn-move,
  body:not(.rex-theme-dark) .btn-popup,
  body:not(.rex-theme-dark) .btn-reset,
  body:not(.rex-theme-dark) .btn-search {
    background-color: var(--brand-option-background-color);
    border-color: var(--brand-option-border-color);
  }

  body:not(.rex-theme-dark) .btn-default:focus,
  body:not(.rex-theme-dark) .btn-abort:focus,
  body:not(.rex-theme-dark) .btn-back:focus,
  body:not(.rex-theme-dark) .btn-clang:focus,
  body:not(.rex-theme-dark) .btn-move:focus,
  body:not(.rex-theme-dark) .btn-popup:focus,
  body:not(.rex-theme-dark) .btn-reset:focus,
  body:not(.rex-theme-dark) .btn-search:focus,
  body:not(.rex-theme-dark) .btn-default:hover,
  body:not(.rex-theme-dark) .btn-abort:hover,
  body:not(.rex-theme-dark) .btn-back:hover,
  body:not(.rex-theme-dark) .btn-clang:hover,
  body:not(.rex-theme-dark) .btn-move:hover,
  body:not(.rex-theme-dark) .btn-popup:hover,
  body:not(.rex-theme-dark) .btn-reset:hover,
  body:not(.rex-theme-dark) .btn-search:hover,
  body:not(.rex-theme-dark) .btn-default:active,
  body:not(.rex-theme-dark) .btn-abort:active,
  body:not(.rex-theme-dark) .btn-back:active,
  body:not(.rex-theme-dark) .btn-clang:active,
  body:not(.rex-theme-dark) .btn-move:active,
  body:not(.rex-theme-dark) .btn-popup:active,
  body:not(.rex-theme-dark) .btn-reset:active,
  body:not(.rex-theme-dark) .btn-search:active {
    background-color: var(--brand-option-hover-background-color) !important;
    border-color: var(--brand-option-hover-border-color) !important;
  }
  */



  /* --- Form-Control --- */

  body:not(.rex-theme-dark) .form-control {
    background-color: var(--brand-input-background-color);
    border-color: var(--brand-input-border-color);
  }
  body:not(.rex-theme-dark) .form-control:focus,
  body:not(.rex-theme-dark) .form-control:hover,
  body:not(.rex-theme-dark) .form-control:active {
    background-color: var(--brand-input-hover-background-color);
    border-color: var(--brand-input-hover-border-color);
  }
  body:not(.rex-theme-dark) .form-control:focus:not([readonly]) {
    background-color: var(--brand-input-background-color);
  }
  body:not(.rex-theme-dark) .form-control.focus,
  body:not(.rex-theme-dark) .form-control:focus,
  body:not(.rex-theme-dark) .redactor-focus.redactor-styles-on,
  body:not(.rex-theme-dark) .redactor-focus:focus.redactor-styles-on,
  body:not(.rex-theme-dark) .redactor-box.redactor-styles-on.redactor-focus,
  body:not(.rex-theme-dark) .redactor-box.redactor-styles-on.redactor-focus:focus,
  body:not(.rex-theme-dark) .custom-link .input-group-btn .btn:focus {
    border-color: var(--brand-primary) !important;
  }
  body:not(.rex-theme-dark) .form-control[disabled],
  body:not(.rex-theme-dark) .form-control[readonly],
  body:not(.rex-theme-dark) fieldset[disabled] .form-control {
    background-color: var(--brand-input-background-color);
  }



  /* --- Select/Dropdown --- */

  body:not(.rex-theme-dark) .dropdown,
  body:not(.rex-theme-dark) .bootstrap-select,
  body:not(.rex-theme-dark) .dropdown-toggle,
  body:not(.rex-theme-dark) .rex-select-style {
    background-color: var(--brand-input-background-color);
    border-color: var(--brand-input-border-color);
  }
  body:not(.rex-theme-dark) .dropdown:focus,
  body:not(.rex-theme-dark) .dropdown:hover,
  body:not(.rex-theme-dark) .dropdown:active,
  body:not(.rex-theme-dark) .dropdown.open,
  body:not(.rex-theme-dark) .bootstrap-select:focus,
  body:not(.rex-theme-dark) .bootstrap-select:hover,
  body:not(.rex-theme-dark) .bootstrap-select:active,
  body:not(.rex-theme-dark) .bootstrap-select.open,
  body:not(.rex-theme-dark) .dropdown-toggle:focus,
  body:not(.rex-theme-dark) .dropdown-toggle:hover,
  body:not(.rex-theme-dark) .dropdown-toggle:active,
  body:not(.rex-theme-dark) .dropdown-toggle.open,
  body:not(.rex-theme-dark) .open > .btn-default.dropdown-toggle,
  body:not(.rex-theme-dark) .rex-select-style:focus,
  body:not(.rex-theme-dark) .rex-select-style:hover,
  body:not(.rex-theme-dark) .rex-select-style:active {
    background-color: var(--brand-input-hover-background-color);
    border-color: var(--brand-input-hover-border-color);
  }
  body:not(.rex-theme-dark) .dropdown-menu > li > a:focus,
  body:not(.rex-theme-dark) .dropdown-menu > li > a:hover {
    background-color: var(--brand-input-background-color);
  }
  body:not(.rex-theme-dark) .dropdown-menu > .active > a,
  body:not(.rex-theme-dark) .dropdown-menu > .active > a:focus,
  body:not(.rex-theme-dark) .dropdown-menu > .active > a:hover {
    background-color: var(--brand-primary);
  }
  body:not(.rex-theme-dark) .rex-select-style::after {
    background: transparent url("data:image/png;base64,R0lGODlhDwAUAIABAAAAAP///yH5BAEAAAEALAAAAAAPABQAAAIXjI+py+0Po5wH2HsXzmw//lHiSJZmUAAAOw==") no-repeat 50% 50%;
  }







/*
  .bootstrap-select .dropdown-toggle:focus,
  .bootstrap-select > select.mobile-device:focus + .dropdown-toggle,
  .open > .btn-default.dropdown-toggle,
  .btn-default.dropdown-toggle:hover {
    background-color: var(--brand-input-hover-background-color) !important;
    border-color: var(--brand-input-hover-border-color) !important;
  }
  body:not(.rex-theme-dark) .rex-select-style select {
    background-color: var(--brand-input-background-color);
  }
  body:not(.rex-theme-dark) .rex-select-style,
  body:not(.rex-theme-dark) .redactor-box.redactor-styles-on {
    border: var(--brand-input-border-width) solid var(--brand-input-border-color) !important;
    border-radius: var(--brand-input-border-radius);
  }
  body:not(.rex-theme-dark) .rex-select-style select {
    background-color: var(--brand-input-background-color);
  }
  body:not(.rex-theme-dark) .rex-select-style::after {
    background-color: var(--brand-input-background-color);
  }
*/



  /* --- Redactor --- */

  body:not(.rex-theme-dark) .redactor-styles {
    background-color: var(--brand-input-background-color);
  }
  body:not(.rex-theme-dark) .redactor-box.redactor-styles-on {
    background-color: var(--brand-input-background-color);
    border-color: var(--brand-input-border-color);
  }
  body:not(.rex-theme-dark) .redactor-box.redactor-styles-on .redactor-toolbar {
    background-color: var(--brand-option-background-color) !important;
    background-image: none !important;
    border-color: var(--brand-input-border-color) !important;
  }
  body:not(.rex-theme-dark) .redactor-box.redactor-styles-on .redactor-toolbar a.re-button.re-separator {
    background-color: var(--brand-input-border-color) !important;
  }
  body:not(.rex-theme-dark) .redactor-toolbar a:hover,
  body:not(.rex-theme-dark) .redactor-air a:hover {
    background-color: var(--brand-primary) !important;
  }

  .redactor-box.redactor-styles-on.redactor-toolbar-on.redactor-blur:hover {
    border-color: var(--brand-input-hover-background-color) !important;
  }


  body:not(.rex-theme-dark) .redactor-box.redactor-styles-on:focus .redactor-styles,
  body:not(.rex-theme-dark) .redactor-box.redactor-styles-on.redactor-focus .redactor-styles,
  body:not(.rex-theme-dark) .redactor-box.redactor-styles-on:hover .redactor-styles,
  body:not(.rex-theme-dark) .redactor-box.redactor-styles-on:active .redactor-styles {
    background-color: var(--brand-input-hover-background-color) !important;
    border-color: var(--brand-input-hover-border-color) !important;
  }






  /* --- Custom-Link --- */

  body:not(.rex-theme-dark) .rex-js-widget.custom-link {
    background-color: var(--brand-input-background-color);
    border-color: var(--brand-input-border-color);
  }



  body:not(.rex-theme-dark) .custom-link .input-group-btn .btn {
    background-color: var(--brand-option-background-color);
    border-top-color: var(--brand-option-border-color);
    border-right-color: var(--brand-option-border-color);
    border-bottom-color: var(--brand-option-border-color);
  }
  body:not(.rex-theme-dark) .custom-link .form-control {
    border-color: var(--brand-option-border-color);
  }

  body:not(.rex-theme-dark) .rex-js-widget.custom-link:hover .form-control {
    background-color: var(--brand-input-hover-background-color);
    border-color: var(--brand-input-hover-border-color);
  }





  /* --- Input-Group --- */

  body:not(.rex-theme-dark) .input-group-btn {
    background-color: var(--brand-option-background-color);
    border-top-color: var(--brand-option-border-color);
    border-right-color: var(--brand-option-border-color);
    border-bottom-color: var(--brand-option-border-color);
  }

  body:not(.rex-theme-dark) .panel-body .input-group {
    background-color: var(--brand-input-background-color);
  }
  body:not(.rex-theme-dark) .rex-is-logged-in .input-group-btn {
    background-color: var(--brand-option-background-color);
  }
  body:not(.rex-theme-dark) .rex-is-logged-in .input-group-btn .btn:hover,
  body:not(.rex-theme-dark) .rex-is-logged-in .input-group-btn .btn:active {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff;
  }
  body:not(.rex-theme-dark) .input-group-addon {
    background-color: var(--brand-option-background-color);
    border-color: var(--brand-option-background-color);
  }
  body:not(.rex-theme-dark) .input-group .btn {
    background-color: var(--brand-option-background-color);
    border-color: var(--brand-option-border-color);
  }
  body:not(.rex-theme-dark) .input-group .btn:focus,
  body:not(.rex-theme-dark) .input-group .btn:hover,
  body:not(.rex-theme-dark) .input-group .btn:active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
  }




  /* --- List --- */

  body:not(.rex-theme-dark) .sortable-list .btn-default {
    background-color: var(--brand-option-background-color);
    border-color: var(--brand-option-border-color);
  }
  body:not(.rex-theme-dark) .sortable-list .btn-default:focus,
  body:not(.rex-theme-dark) .sortable-list .btn-default:hover,
  body:not(.rex-theme-dark) .sortable-list .btn-default:active {
    background-color: var(--brand-option-hover-background-color) !important;
    border-color: var(--brand-option-hover-border-color) !important;
  }




}







/* ----- Login ----- */

#rex-page-login button .rex-icon {
  color: #fff;
}
#rex-form-login svg.rex-redaxo-logo {
  display: none;
}
#rex-form-login .rex-branding {
  width: 6rem;
  height: 3rem;
  display: inline-block;
  background-repeat: no-repeat !important;
  background-position: center;
}
#rex-page-login .btn-brand-primary {
  background-color: var(--brand-primary) !important;
}
#rex-page-login .btn-primary {
  background-color: var(--brand-primary) !important;
  border-radius: var(--brand-input-border-radius) !important;
}
#rex-page-login .btn-primary:hover,
#rex-page-login .btn-primary:focus {
  background-color: var(--brand-primary-hover) !important;
}
#rex-page-login .input-group-addon {
  border-color: transparent;
}
#rex-page-login .form-control {
  border-color: transparent;
  border-radius: 0px !important;
}
#rex-page-login .input-group-btn {
  border-radius: 0px;
}
#rex-page-login .input-group-btn .btn-view {
  background-color: var(--brand-primary);
  border-color: transparent;
}
#rex-page-login .input-group-btn .btn-view:hover {
  background-color: var(--brand-primary-hover) !important;
}
#rex-form-login .input-group-addon {
  border-radius: 0px ;
}
#rex-form-login .input-group {
  border-radius: var(--brand-input-border-radius);
  overflow: hidden;
}






/* ----- Geteilte Ansicht ----- */

.rex-is-logged-in .rex-nav-main,
#rex-page-setup .rex-nav-main {
  width: 190px;
}

#ansicht {
  display: flex;
  flex-direction: column;
  padding: 0px;
  margin: 0px;
  height: 100vh;
}
#ansicht .vorschaubereich {
  padding: 0px;
  position: relative;
}
#ansicht .geteilt {
  display: block;
}
#ansicht .vorschaubereich.backend {
  box-shadow: 0rem 0.05rem 0.15rem rgba(41, 41, 41, 0.2);
  z-index: 100;
  width: 100%;
  overflow-y: scroll;
}
#ansicht .vorschaubereich.frontend {
  width: 100%;
}

/* Im YForm-Editiermodus Suche ausblenden */
#ansicht .vorschaubereich.backend.yform-edit .col-sm-3.col-md-3.col-lg-2 {
  display: none;
}
#ansicht .vorschaubereich.backend.yform-edit .col-lg-10 {
  width: 100%;
}

/* Im YForm-Editiermodus Suche ausblenden */
#ansicht .vorschaubereich.backend.yform-edit .btn-save {
  display: none;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #ansicht {
    flex-direction: row;
  }
  #ansicht .vorschaubereich.backend {
    width: 60%;
  }
  #ansicht .vorschaubereich.frontend {
    width: 40%;
  }
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #ansicht .vorschaubereich.backend {
    width: 50%;
  }
  #ansicht .vorschaubereich.frontend {
    width: 50%;
  }
}
/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  #ansicht .vorschaubereich.backend {
    width: 40%;
  }
  #ansicht .vorschaubereich.frontend {
    width: 60%;
  }
}
@media (min-width: 1700px) {
  #ansicht .vorschaubereich.backend {
    width: 40%;
  }
  #ansicht .vorschaubereich.frontend {
    width: 60%;
  }
}
@media (min-width: 2000px) {
  #ansicht .vorschaubereich.backend {
    width: 40%;
  }
  #ansicht .vorschaubereich.frontend {
    width: 60%;
  }
}
@media (min-width: 2560px) {
  .rex-is-logged-in .rex-nav-main,
  #rex-page-setup .rex-nav-main {
    width: 250px;
  }
  #ansicht .vorschaubereich.backend {
    width: 33%;
  }
  #ansicht .vorschaubereich.frontend {
    width: 67%;
  }
}



/* ----- iFrame Frontend ----- */

#ansicht #iframe-frontend {
  padding-top: 60px;
  border: 0px;
}



/* ----- Content-Edit ----- */

#rex-page-content-edit #rex-js-structure-content-nav li:nth-of-type(1) {
  display: none;
}
#rex-page-content-edit {
  height: 100vh;
  overflow: scroll;
}
#rex-page-content-edit .row > .col-lg-4,
#rex-page-content-edit .row > .col-lg-8 {
  width: 100%;
}
#rex-message-container {
  display: none;
}
.rex-main-sidebar {
  margin-top: 6rem;
  opacity: 1;
}
#rex-js-main-sidebar .panel.panel-default {
  box-shadow: none;
}

.panel-default,
.panel.panel-edit {
  border-radius: var(--brand-input-border-radius);
}

@media (prefers-color-scheme: light) {
  body:not(.rex-theme-light) .rex-main-frame {
    background-color: var(--brand-light);
  }
}



/* ----- Blockquote ----- */

blockquote a {
  font-weight: 500;
}

@media (prefers-color-scheme: light) {
  blockquote {
    background-color: var(--brand-input-background-color) !important;
  }
}

@media (prefers-color-scheme: dark) {
  body:not(.rex-theme-light) blockquote {
    background-color: rgba(32, 43, 53, 0.6) !important;
  }
  body:not(.rex-theme-light) .navbar-right .text-muted {
    color: #324050;
  }
  body:not(.rex-theme-light) .redactor-box.redactor-styles-on {
    background: rgba(32, 43, 53, 0.6) !important;
    border: none !important;
  }
  body:not(.rex-theme-light) .redactor-box.redactor-styles-on p {
    color: #fff !important;
  }
  body:not(.rex-theme-light) .redactor-box.redactor-styles-on .redactor-toolbar {
    background-color: rgba(35, 45, 57, 0.8) !important;
    background-image: none !important;
  }
}





/* ----- Tabs ----- */

.rex-page-nav .nav-tabs {
  font-weight: 500;
}
.rex-page-nav .nav-tabs > li > a:not(.btn):hover,
.rex-page-nav .nav-tabs > li > a:not(.btn):focus {
  color: var(--brand-primary);
}
@media (prefers-color-scheme: dark) {
  body:not(.rex-theme-light) .rex-page-nav .nav-tabs > li > a:not(.btn):hover,
  body:not(.rex-theme-light) .rex-page-nav .nav-tabs > li > a:not(.btn):focus {
    color: var(--brand-primary);
  }
}



/* ----- Online / Offline ----- */

.rex-online,
.rex-text-online {
  color: var(--brand-primary);
}



/* ----- Block hinzufügen ----- */

.rex-slice-select > .dropdown > .btn-default {
  background-color: #d3e6c9;
  border: none;
  color: var(--brand-primary);
  border-radius: var(--brand-input-border-radius);
}
.rex-slice-select > .dropdown > .btn-default:focus,
.rex-slice-select > .dropdown > .btn-default.focus,
.rex-slice-select > .dropdown > .btn-default:hover,
.rex-slice-select > .dropdown > .btn-default.hover,
.rex-slice-select > .dropdown > .btn-default:active,
.rex-slice-select > .dropdown > .btn-default.active,
.open > .rex-slice-select > .dropdown > .btn-default.dropdown-toggle {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff;
}



/* ----- Medienpool ----- */

@media (prefers-color-scheme: light) {

  body:not(.rex-theme-dark) .rex-has-panel-options .btn-default.dropdown-toggle,
  body:not(.rex-theme-dark) .rex-has-panel-options .btn.btn-search {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff;
  }
  body:not(.rex-theme-dark) .rex-has-panel-options .open > .btn-default.dropdown-toggle,
  body:not(.rex-theme-dark) .rex-has-panel-options .btn.btn-search:hover {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
  }

}



/* ----- Online / Offline / Editieren / Verschieben ----- */

.rex-panel-options .btn-group-xs {
  border-radius: calc(var(--brand-input-border-radius) * 0.5);
}
.rex-panel-options .btn-group-xs .btn {
  border: none;
  border-radius: 0px !important;
}
.btn-edit {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-edit:hover {
  background-color: var(--brand-primary-hover);
}
.rex-online:hover,
.rex-offline:hover,
.btn-move:hover {
  background-color: #eef1f4;
}



/* ----- Focuspoint ----- */

#focuspoint-panel .btn {
  box-shadow: none;
}

@media (prefers-color-scheme: light) {
  body:not(.rex-theme-dark) #focuspoint-panel .btn {
    background-color: var(--brand-input-background-color);
    border-color: var(--brand-input-border-color);
    color: var(--brand-black);
  }
  body:not(.rex-theme-dark) #focuspoint-panel .btn:focus,
  body:not(.rex-theme-dark) #focuspoint-panel .btn:hover,
  body:not(.rex-theme-dark) #focuspoint-panel .btn:active,
  body:not(.rex-theme-dark) #focuspoint-panel .btn-group.open .btn {
    background-color: var(--brand-input-hover-background-color);
    border-color: var(--brand-input-hover-border-color);
  }
  body:not(.rex-theme-dark) .focuspoint-input-group .input-group-btn i {
    color: var(--brand-black);
  }
  body:not(.rex-theme-dark) .focuspoint-input-group .input-group-btn:focus i,
  body:not(.rex-theme-dark) .focuspoint-input-group .input-group-btn:hover i,
  body:not(.rex-theme-dark) .focuspoint-input-group .input-group-btn:active i {
    background-color: var(--brand-primary);
    color: #fff;
  }
}

@media (prefers-color-scheme: dark) {
  body:not(.rex-theme-light) #focuspoint-panel .btn {
    background-color: rgba(46, 59, 74, 0.8);
    border-color: rgba(46, 59, 74, 0.8);
    color: rgba(255, 255, 255, 0.75);
  }
  body:not(.rex-theme-light) #focuspoint-panel .btn:focus,
  body:not(.rex-theme-light) #focuspoint-panel .btn:hover,
  body:not(.rex-theme-light) #focuspoint-panel .btn:active,
  body:not(.rex-theme-light) #focuspoint-panel .btn-group.open .btn {
    background-color: rgba(54, 69, 87, 0.8);
    border-color: rgba(54, 69, 87, 0.8);
  }
}



/* ----- Alert ----- */

.alert-success {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}





/* ----- SRT-Inhalte ----- */

#srt-kontakt-container {
  background-color: var(--farbe1);
  padding: 3rem;
  color: #fff;
  position: relative;
  margin-top: 0rem;
  margin-bottom: 3rem;
  margin-left: 15px;
  margin-right: 15px;
  border-radius: var(--brand-border-radius);
}
#srt-kontakt-container img {
  margin-bottom: 1rem;
}
#srt-kontakt-container p {
  margin: 0;
}
#srt-kontakt-container a {
  color: #fff;
}
/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  #srt-kontakt-container {
    margin-left: 30px;
    margin-right: 30px;
  }
}