:root {
  /* colors */
  --black: #000;
  --white: #fff;
  --light-grey: #cdcdcd;
  --red: #ff0000;
  --red-background: rgb(255,	0,	0, 0.3);
  --cic: rgba(255, 155, 0, 1);
  --cic-hover: rgb(219, 110, 0);
  --cic-bright: rgb(160, 60, 0);
  --line-color: rgba(255, 155, 0, 0.8);
  /* this color was created for grey border lines only */
  --grey-line-color: #999;
  --boc: rgb(255, 255, 255);
  --makara: #897d6e;

  /* bottom corner social contact dark mode  */

  /* dark mode */  
  --dark: #000000;
  --dark2: #1d1102;
  --dark3: #534e4b;
	
  --font-color-dark: #fff;
  --contact-box-dark: #191919;
  --contact-box-dark-hover:#232323;
  --overlay-background-color: rgba(0, 0, 0, 0.8);

  /* light mode  */
  --bright: #ffffff;
  --bright2: #c6c0be;
  --bright3: #948b87;

  --font-color-light: #333;
  --contact-box-light: #F5F5F5;
  --contact-box-light-hover: #ebebeb;
  --overlay-background-color: rgba(255, 255, 255, 0.95);

  /* text color */
  --tc1-bright: #fff;
  --tc1-dark: #000;
  --tc2: #897d6e;

  /* label colors */
  --label-neu: #343a40;
  --label-verkauft: rgb(139, 37, 0);
  --label-premium: #fd7e14;

  /* text variables*/

  --ca1: "open_sansitalic";
  
  --m1: "open_sansregular";
  --m2: "open_sansregular";

  --h1: "antonregular";
  --h2: "antonregular";
  --h3: "antonregular";
  --h4: "antonregular";
  --h5: "antonregular";

  --sub1: "saira_condensedregular";
  --sub2: "saira_condensedregular";
  --sub3: "saira_condensedregular";
  --sub4: "saira_condensedregular"; /* just for the footer. sub3 brakes the boxes */

  --bo1: "open_sansregular";
  --bo2: "open_sansregular";
  --bo3: "open_sanscondensed_light", sans-serif;
  --bo4: "open_sansregular"; /* this is just for the footer - 14px brakes the boxes */
}

/* installed fonts start ========================================== */

@font-face {
  font-family: "antonregular";
  src: url("../fonts/Anton/anton-regular-webfont.woff2") format("woff2"),
       url("../fonts/Anton/anton-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures text is visible while the font is loading */
}

@font-face {
  font-family: "open_sansregular";
  src: url("../fonts/Open_Sans/opensans-variablefont_wdthwght-webfont.woff2") format("woff2"),
       url("../fonts/Open_Sans/opensans-variablefont_wdthwght-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures text is visible while the font is loading */
}

@font-face {
  font-family: "open_sanscondensed_light";
  src: url("opensans-condlight-webfont.woff2") format("woff2"),
       url("opensans-condlight-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures text is visible while the font is loading */
}

@font-face {
  font-family: "open_sansitalic";
  src: url("../fonts/Open_Sans/opensans-italic-variablefont_wdthwght-webfont.woff2") format("woff2"),
       url("../fonts/Open_Sans/opensans-italic-variablefont_wdthwght-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap; /* Ensures text is visible while the font is loading */
}

@font-face {
  font-family: "saira_condensedregular";
  src: url("../fonts/Saira_Condensed/sairacondensed-regular-webfont.woff2") format("woff2"),
       url("../fonts/Saira_Condensed/sairacondensed-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Ensures text is visible while the font is loading */
}

/* installed fonts end ========================================== */

/* .bgc.bright  and .bgc.dark -> the background color for this one needs to be changed directly on the variable. */

.bgc {
  background-color: var(--black)!important;
  color: var(--white) !important;
}

.bgc.dark {
  /* background-color: #0f0f0f !important;  */
  background-color: var(--dark) !important;
  border-color: var(--line-color);
  color: var(--white) !important;
}

.bgc.dark2 {
  /* background-color: #0f0f0f !important;  */
  background-color: var(--dark2) !important;
  border-color: var(--line-color);
  color: var(--white) !important;
}

.bgc.dark3 {
  background-color: var(--dark3) !important;
  border-color: var(--line-color);
  color: var(--white) !important;
}

.bgc.dark4 {
  background-color: var(--dark4) !important;
  border-color: var(--line-color);
  color: var(--white) !important;
}

.bgc.bright {
  /* background-color: #fff !important;  */
  background-color: var(--bright) !important;
  color: var(--black) !important;
  border-color: var(--line-color) !important;
}

.bgc.bright2 {
  /* background-color: #0f0f0f !important;  */
  background-color: var(--bright2) !important;
  color: var(--black) !important;
  border-color: var(--line-color);
}

.bgc.bright3 {
  background-color: var(--bright3) !important;
  color: var(--black) !important;
  border-color: var(--line-color);
}

.bgc.bright4 {
  background-color: var(--bright4) !important;
  color: var(--black) !important;
  border-color: var(--line-color);
}

/* this was created so that the background of journal header UL has an opacity */
.journal-header-bc-opacity .bgc.bright {
  background-color: rgba(255,255,255,0.5)!important; 
}

.journal-header-bc-opacity .bgc.dark {
  background-color: rgba(0,0,0,0.5)!important; 
}

.cic.dark {
  background-color: var(--black) !important;
  color: var(--line-color) !important;
}

/* this dark mode was created just for reporter cover */

.bgc.dark  .reporter-cover-bw  { color: var(--white) !important; }

.bgc.bright  .reporter-cover-bw { color: var(--white) !important; }


.bgc.dark  .subtitle-reporter-cover  { color: var(--white) !important; }

.bgc.bright  .subtitle-reporter-cover { color: var(--black) !important; }


/* ends here  ====================  */

.bright a { color: var(--black); }

.dark a { color: var(--white); }

.tc1.dark { color: var(--tc1-dark); }

.tc1.bright { color: var(--tc1-bright); }

/* this is for the lines that separate the layouts*/

.line1Container {
  background-color: var(--bgc-dark) !important;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line1 {
  width: 80px;
  height: 1px;
  background-color: var(--line-color);
  margin: 80px auto;
}

.line1Container .bright {
  background-color: var(--white) !important;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line2 {
  height: 2px;
  background-color: var(--line-color);
}

.line1-sidebar {
  width: 80px;
  height: 1px;
  background-color: var(--line-color);
  margin: 40px auto;
}

.boc { background-color: rgba(0, 0, 0, 0.8); }

/* LINKS
============================================= */

a { color: rgb(150, 150, 150); }

a:hover {
  text-decoration: none;
  color: #908270;
}

*[data-toggle="collapse"].show,
.active > *,
a.active,
a:hover,
.m1 a:active,
.m1 a:hover {
  color: var(--cic);
}

/* TEXT
================================================== */

/* Don't delete these because they might be used in some place and break the layout */

h1 {
  font-size: 60px !important;
  font-family: var(--h1) !important;
  line-height: 100% !important;
  hyphens: none !important;
}

h2 {
  font-size: 40px !important;
  font-family: var(--h2) !important;
  line-height: 100% !important;
  hyphens: none !important;
  color: inherit !important;
}

h3 {
  font-size: 32px !important;
  font-family: var(--h3) !important;
  line-height: 100% !important;
  hyphens: none !important;
}

h4 {
  font-size: 16px !important;
  font-family: var(--h4) !important;
  line-height: 100% !important;
  hyphens: none !important;
  color: inherit !important;
}

h5 {
  font-size: 14px !important;
  font-family: var(--h5) !important;
  line-height: 100% !important;
  hyphens: none !important;
  color: inherit !important;
}

/* I've turned the H's into classes - his way we maintain a googd logic for the search engines. Meaning we only use onw H1 in the cover layouts and, on the others, we use classes. */

.h1 {
  font-size: 60px !important;
  font-family: var(--h1) !important;
  line-height: 100% !important;
  hyphens: none !important;
}

.h2 {
  font-size: 40px !important;
  font-family: var(--h2) !important;
  line-height: 100% !important;
  hyphens: none !important;
  color: inherit !important;
}

.h3 {
  font-size: 32px !important;
  font-family: var(--h3) !important;
  line-height: 100% !important;
  hyphens: none !important;
}

.h4 {
  font-size: 16px !important;
  font-family: var(--h4) !important;
  line-height: 100% !important;
  hyphens: none !important;
  color: inherit !important;
}

.h5 {
  font-size: 14px !important;
  font-family: var(--h5) !important;
  line-height: 100% !important;
  hyphens: none !important;
  color: inherit !important;
}

.sub1 {
  font-size: 32px;
  font-family: var(--sub1) !important;
  line-height: 100% !important;
  hyphens: none !important;
  font-weight: bold !important;
}

.sub2 {
  font-size: 26px !important;
  font-family: var(--sub2) !important;
  line-height: 100%!important;
  hyphens: none !important;
  font-weight: bold !important;
}

.sub3 {
  font-size: 20px !important;
  font-family: var(--sub3) !important;
  line-height: 100% !important;
  hyphens: none !important;
  font-weight: bold !important;
}

/* sub4 created just for the footer */
.sub4 {
  font-size: 18px !important;
  font-family: var(--sub4) !important;
  line-height: 100% !important;
  hyphens: none !important;
  font-weight: bold !important;
}

.m1 a {
  color: var(--makara) !important;
}

.m1 {
  font-family: var(--m1) !important;
  font-weight: lighter !important;
  font-size: 16px !important;
}

.m2 {
  font-family: var(--m2) !important;
  font-weight: lighter !important;
  font-size: 14px !important;
}

.ca1 {
  font-family: var(--ca1) !important;
  font-style: italic !important;
  line-height: 100% !important;
  font-size: 12px !important;
}

.bo1 {
  font-family: var(--bo1) !important;
  line-height: 150% !important;
  font-size: 18px !important;
}

.bo2 {
  font-family: var(--bo2) !important;
  line-height: 150% !important;
  font-size: 16px !important;
}

.bo3 {
  font-family: var(--bo3) !important;
  line-height: 150% !important;
  font-size: 14px !important;
}

/* this was created only for the footer / article list on partials - 14px breaks the boxes */
.bo4 {
  font-family: var(--bo4) !important;
  line-height: 150% !important;
  font-size: 12px !important;
}

/* new button created for search */
.filterbutton {
  font-size: 18px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 4px 8px;
  white-space: nowrap;
}

/* Clamp was not working properly so I created a media querie to properly resize the fonts*/

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

  h1 { font-size: 36px !important; } /* 60% of the original size */

  h2 { font-size: 24px !important; } /* 60% of the original size */

  h3 { font-size: 19.2px !important; } /* 60% of the original size */

  /* same logic for the H's here */

  .h1 { font-size: 36px !important; } /* 60% of the original size */

  .h2 { font-size: 24px !important; } /* 60% of the original size */

  .h3 { font-size: 19.2px !important; } /* 60% of the original size */

  /* .sub1 { font-size: 19.2px !important; } */

  .sub1 { font-size: 25px !important; }
}

/* Special black and white them for using opacity  
================================================== */

.background-opacity {
 background-color: rgba(0,0,0,0.8) !important;
 color: #fff;
}

.background-opacity.bright {
  background-color: rgba(255,255,255, 0.8) !important;
  color: #000;
}

/* Icons 
================================================== */

/* sqm icon ============ */

.bgc.dark .ruler-icon-search {
  background-image: url('/img/ruler-icon-dark.svg') !important;
}

.bgc.bright .ruler-icon-search {
  background-image: url('/img/ruler-icon-light.svg');
}

/* room/zimmer icon ============ */

.bgc.dark .room-icon-search {
  background-image: url('/img/floorplan-icon-dark.svg') !important;
}

.bgc.bright .room-icon-search {
  background-image: url('/img/floorplan-icon-light.svg');
}

/* bed/bad icon ============ */

.bgc.dark .bathroom-icon-search {
  background-image: url('/img/bath-icon-dark.svg') !important;
}

.bgc.bright .bathroom-icon-search {
  background-image: url('/img/bath-icon-light.svg');
}

/* BUTTONS 
================================================== */

/* other buttons */

.button1.dark {
  background-color: var(--makara) !important;
  color: #fff !important;
}

.button1.bright {
  background-color: var(--makara) !important;
  color: var(--cic) !important;
}

.button2 {
  padding: 2px 5px !important;
  border-top: 1px solid !important;
  border-bottom: 1px solid !important;
  border-right: none !important;
  border-left: none !important;
  cursor: pointer !important;
  border-color: var(--red) !important;
  background-color: var(--black);
  color: #fff;
}

.button2:hover { color: var(--red) !important; }

.button3 {
  background-color: var(--cic);
  color: #fafafa;
  border-radius: 10px;
  height: 40px;
  width: 100%;
  transition: background-color 0.5s ease, color 0.5s ease;
}

.button3:hover {
  background-color: var(--cic-hover);
  color: white;
}

button.dark {
  color: #fff !important;
  background-color: rgb(25, 25, 25) !important;
}

button.bright {
  color: var(--cic) !important;
  background-color: rgb(25, 25, 25) !important;
}

@media (min-width: 960px) {

  .mobile-only { display: none !important; }
}

/* Necessary to ensure the text inside the button is editable in safari */
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* change the color of svgs ==================== */

.svg-black-white { fill: white; }

.svg-black-white.bright { fill: black; }

/* this is the shadow bellow the header ==================== */
.shadow-bellow-header {
  margin: 0;
  box-shadow: 3px 1px 4px 4px rgba(0, 0, 0, 0.8) !important;
  z-index: 1 !important;
}

.shadow-bellow-header.bright {
  margin: 0;
  box-shadow: 3px 1px 4px 4px rgba(221, 220, 220, 0.4) !important;
  z-index: 1 !important;
}

@media all and (max-width: 768px) {	
/* created just for the reporter cover */

.bgc.dark  .reporter-cover-bw  { color: var(--white) !important; }

.bgc.bright  .reporter-cover-bw { color: var(--black) !important; }
}

@media all and (max-width: 640px) {	}

  /* only for the modal - this changes border color around the pop up. it stays here to keep consistency with the colors */

  .modal-content { border: 1px solid var(--cic) !important; }  

  /* bottom corner social contact dark mode ==================== */

  .send-message-info { background-color: var(--contact-box-dark)!important; }  

  .send-message-info.bright { background-color: var(--bgc-light) !important; }

  .bright .contact-item a  { 
    color: var(--font-color-light) !important; 
    background-color: var(--contact-box-light) !important;
  }

  .contact-item a { 
    color: var(--font-color-dark) !important;
    background-color: var(--bgc-dark) !important; 
  } 

  .contact-box { background-color: var(--contact-box-dark) !important; }

  .contact-box.bright { background-color: var(--contact-box-light) !important; }

  .contact-item a:hover { background-color: var(--contact-box-dark-hover) !important; }

  .bright .contact-item a:hover { background-color: var(--contact-box-light-hover) !important; }

  /* coop-label */
  .coop-label {
    position: absolute;
    z-index: 9;
    margin-top: 30px;
    width: 50%;
    font-size: 32px;
    line-height: 32px;
    padding: 0 5px;
    text-transform: uppercase;
  }
  
  .coop-label.keine { display: none; }
  
  .coop-label.neu {
    color: var(--white);
    background-color: var(--label-neu);
    text-align: center;
  }
  
  .coop-label.verkauft {
    color: var(--white);
    background-color: var(--label-verkauft);
    text-align: center;
    font-size: 11px;
    line-height: 2.1;
  }
  
  .coop-label.premium {
    color: var(--white);
    background-color: var(--label-premium);
    text-align: center;
  }

#toolbarContainer #tPosition {
  display: flex;
  width: 238px;
}

#toolbarContainer .removeAddImg {
  display: flex;
  text-align: center;
  width: 231px;
  margin: auto;
}

#toolbarContainer .wButton {
  height: 18px;
  background-color: #fff;
}

#toolbarContainer .bButton {
  height: 18px;
  background-color: #000;
}

#toolbarContainer #cpInput, #cpInputBackground {
  display: none;
}

#toolbarContainer label[for="colorpicker"] {
  line-height: 18px;
  width: 100%;
}

#toolbarContainer .colorpicker-element .input-group-addon i,
#toolbarContainer .colorpicker-element .add-on i {
  width: 100%;
  height: 16px;
}

#sToolbar {
  display: none;
  position: fixed;
  top: 40%;
  right: 0;
  margin-top: -15px;
  padding: 2px 5px;
  border: 1px solid #fff;
  color: #fff;
  background: #000;
  font-size: 24px;
  border-right-width: 0;
  cursor: pointer;
  z-index: 9999;
  box-sizing: content-box;
}

#member-suche .selection2button label {
  height: 16px;
  text-align: center !important;
}

#member-suche label,
#member-suche .selection2button {
  padding-top: 0px !important;
}

#member-suche ul { margin: 0 auto; }

#member-suche li,
#member-suche #search {
  width: 100%;
  margin: 10px 0;
  text-align: center;
}

.tableFixHead {
  overflow-y: auto;
  height: 150px;
  margin: 25px 0;
}

.tableFixHead thead th {
  position: sticky;
  top: 0;
}

.toggleDisplay {
  transition-duration: 600ms;
}

toolbarContainer a.pl { color: red; }

.found { display: block !important; }

/* New Machine Configurations */
.mac-black { color: #000; }

.mac-mokka { color: rgb(50, 40, 0); }

.mac-grey-dark { color: rgb(90, 100, 100); }

.mac-m1 { font-size: 12px; }

.mac-m1:hover { color: rgb(200, 20, 20) !important; }

.menubutton {
  color: rgb(255, 255, 255) !important;
  border-top: solid rgb(200, 20, 20) 1px !important;
  border-bottom: solid rgb(200, 20, 20) 1px !important;
  opacity: 80%;
  font-weight: 600;
  cursor: pointer;
  height: 18px;
}

.menubutton:hover { color: rgb(200, 20, 20) !important; }

.bgc-mac-grey-light { background-color: rgb(180, 190, 190) !important; }

.mac-grey-light { background-color: rgb(180, 190, 190) !important; }

.mac-grey-medium { background-color: rgb(130, 145, 145) !important; }

.mac-green-medium { background-color: rgb(100, 160, 60); }

.selectionbutton {
  border-top: 1px solid rgb(200, 20, 20);
  border-bottom: 1px solid rgb(200, 20, 20);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  font-weight: 600;
  background-color: rgb(90, 100, 100) !important;
  color: rgb(250, 250, 250);
}

.selectionbutton:hover { color: rgb(200, 20, 20); }

.selection2button a {
  text-decoration: none;
  line-height: 13px;
  font-weight: normal;
}

.selection2button:hover {
  cursor: pointer;
  color: rgb(200, 20, 20) !important;
}

.selection2button {
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  font-weight: 600;
  color: rgb(250, 250, 250);
  height: 20px;
  padding-top: 1px;
  margin-top: 12px;
  padding-right: 5px;
  padding-left: 5px;
  height: 16px;
  padding-bottom: 6px;
  position: relative;
}

.selection3button {
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
  font-weight: 600;
  background-color: transparent !important;
  color: rgb(0, 0, 0);
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 12px;
  height: 16px;
}

.selection3button:hover { color: rgb(200, 20, 20); }

.selection4button {
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
  background-color: transparent(120, 120, 120) !important;
  font-weight: 600;
  border-radius: 0;
  color: rgb(0, 0, 0);
  height: 20px;
  width: 230px;
  padding-top: 1px;
  margin-top: 12px;
  position: relative;
}

.headbutton {
  color: rgb(255, 255, 255);
  font-size: 12px;
}

.selection2button-btn:hover {
  color: rgb(200, 20, 20) !important;
  cursor: pointer;
}

.content-container {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
}

.navi {
  max-width: 1400px;
  margin: 0 auto;
}

.toolbar-spacing-big { margin-top: 40px !important; }

.toolbar-spacing-medium { margin-top: 20px !important; }

.toolbar-spacing-small { margin-top: 10px !important; }

.personality-submenu {
  width: 231px;
  margin: auto;
}

.suchen-list:last-child { margin-bottom: 20px !important; }

.publisher-select {
  height: 12px;
  display: flex;
  width: 68%;
  color: #555;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%) !important;
}

.black-arrow-left {
  color: white;
  background: black;
  padding: 2px;
}

.hovered { background-color: grey; }

#trash-fields > div { margin-top: 1rem !important; }

.invalid-email-bg{ background: var(--red); }