@charset "utf-8";
/* CSS Document */
body {
	margin:0;
	padding:0;
	text-align: center;
	font-family: Roboto,Helvetica Neue,Arial,sans-serif;
	font-size: 12px;
	background-color: #f9fafc;
    background-image: url("../img/background01.jpg");
    background-size: cover;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

select {
  font-family: 'FontAwesome', 'DuepuntozeroProBold';
}

/* td */

.text_td {
  font-size: 14px;
  color: #52545c;
}

/* Search */

.search_field_background {
  border-radius: 10px;
  background-color: #07516a;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.search_field_background_icons {
	color:#fff;
	font-size: 30px;
}

.search_field_text {
  margin-left: 20px;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-family: DuepuntozeroProBold;
}


/* timeCARD 3.0 */

.timeCARD_3_background {
  border-radius: 10px;
  background-color: #07516a;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  background-image: url(../img/timeCARD_qrcode.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  padding-right: 40px; /* Je nach Größe des Icons anpassen */
}

.timeCARD_3_headline {
  font-size: 24px;
  font-family: DuepuntozeroProBold;
  color: #fff;
}

.timeCARD_3_headline a{
  font-size: 24px;
  font-family: DuepuntozeroProBold;
  color: #fff;
}

.timeCARD_3_subheadline {
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
}

.timeCARD_3_card_number {
  font-size: 24px;
  font-family: DuepuntozeroProBold;
  color: #fff;
}

.timeCARD_3_card_valid {
  font-size: 14px;
  font-family: DuepuntozeroProBold;
  color: #fff;
}

.timeCARD_3_no_picture {
  font-size: 80px;
  font-family: DuepuntozeroProBold;
  color: #fff;
}

/* Header */

.header {
  z-index: 99997;
  position: fixed;
  left: 0;
  top: 0;
  margin-left: 60px;
  width: 100%;
  height: 60px;
  background-image: url(../img/header.jpg);
  background-color: #2264b0;
}
.page-info-btn {
  margin-left: 20px;
  margin-top: 15px;
  max-width: 600px;
  text-align: left;
  color: #ffffff;
  opacity: .7;
  font-size: 22px;
  font-family: DuepuntozeroProBold;
}


/* Footer */

.footer {
  z-index: 99999;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  text-align: center;
  background-image: url(../img/background_footer.jpg);
}

.footer_text {
	font-size: 12px;
	color: #d8d9da;
}
.footer_text a{
	font-size: 12px;
	color: #d8d9da;
}

.footer_text_green {
	font-size: 12px;
	color: #04FF04;
}

/* Sidebar */

.sidebar {
	z-index: 99998;
	position: fixed;
	background-color: #202426;
	height: 100%;
	width: 60px;
	left: 0px;
	padding: 0px;
	top: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-bottom: 0px;
	box-shadow: 5px 0 10px -5px #52545c;
}
.sidebar_icons {
	color:#e9edf2;
	opacity: .7;
	font-size: 20px;
	width: 60px;
}
.sidebar_logo {
	background-color: #081f3f;
    height: 60px;
}

/* h1,h2,h3,h4 tags */

.h4 {
  margin-left: 20px;
  text-align: left;
  color: #fff;
  font-size: 22px;
  font-family: DuepuntozeroProBold;
}

/* WELCOME TITLE */

.welcome_title {
    font-size: 30px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-family: DuepuntozeroProBold;
    text-shadow: 3px 3px 4px #777;
}

.welcome_subtitle {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    text-shadow: 3px 3px 4px #777;
    font-family: DuepuntozeroProBold;
}

/* BIRTHDAY DASHBOARD */

.birthday_text {
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    font-family: DuepuntozeroProBold;
}

.birthday_text_icon {
    font-size: 24px;
    color: #fff;
    text-decoration: none;
    font-family: DuepuntozeroProBold;
}

.birthday_text a {
    font-size: 16px;
    color: #07516a;
    text-decoration: none;
    font-family: DuepuntozeroProBold;
}

/* ASSIGNMENTS DASHBOARD */

.assignments_text {
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    font-family: DuepuntozeroProBold;
}

.assignments_text_icon {
    font-size: 24px;
    color: #fff;
    text-decoration: none;
    font-family: DuepuntozeroProBold;
}

.assignments_text a {
    font-size: 16px;
    color: #07516a;
    text-decoration: none;
    font-family: DuepuntozeroProBold;
}

/* BUTTONS */

.icon_button {
  margin-left: 20px;
  text-align: center;
  color: #fff;
  font-size: 60px;
}

.button_dashboard_green {
  border-radius: 10px;
  background-color: #00c3ed;
}

.button_dashboard_green:hover {
  background-color: #fd9b10;
  border-radius: 10px;
  opacity: .9;
}

.button_dashboard_orange {
  border-radius: 10px;
  background-color: #087fa7;
}

.button_dashboard_orange:hover {
  background-color: #fd9b10;
  border-radius: 10px;
}

.button_dashboard_erweiterungen {
  border-radius: 10px;
  background-color: #ef4f98;
}

.button_dashboard_erweiterungen:hover {
  background-color: #fd9b10;
  border-radius: 10px;
}


/* HEADLINES */

.text_headline {
  font-size: 22px;
  color: #52545c;
  text-decoration: none;
  font-weight: 600;
  font-family: DuepuntozeroProBold;
}
.text_headline_small {
  font-size: 19px;
  color: #52545c;
  text-decoration: none;
  font-family: DuepuntozeroProBold;
}
.text_headline_h1 { 
  font-size: 24px;
  color: #67696c;
  font-family: DuepuntozeroProBold;
}

.dashboard_text_headline_box {
  font-size: 14px;
  text-align: left;
  color: #07516a;
}

/* TITLES */

.titel_dashboard_blue {
  border-radius: 5px;
  background-color: #07516a;
}

.titel_dashboard_green {
  border-radius: 5px;
  background-color: #00cc00;
}

.titel_dashboard_lightblue {
  border-radius: 5px;
  background-color: #00c3ed;
}

/* BUTTONS */

.button_v3_blue {
  border-radius: 10px;
  background-color: #00c3ed;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.button_v3_blue:hover {
  background-color: #00c3ed;
  border-radius: 10px;
  opacity: .6;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.text_button_v3_blue {
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.button_icon_v3_blue {
	color:#fff;
	font-size: 30px;
}

.button_v3_green {
  border-radius: 10px;
  background-color: #02da1b;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.button_v3_green:hover {
  background-color: #02da1b;
  border-radius: 10px;
  opacity: .6;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.text_button_v3_green {
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.button_icon_v3_green {
	color:#fff;
	font-size: 30px;
}

.button_v3_pink {
  border-radius: 10px;
  background-color: #ef4f98;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.button_v3_pink:hover {
  background-color: #ef4f98;
  border-radius: 10px;
  opacity: .6;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}


.button_add_green {
  border-radius: 10px;
  background-color: #02da1b;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.button_add_green:hover {
  background-color: #02da1b;
  border-radius: 10px;
  opacity: .6;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.button_add_green_icons {
	color:#fff;
	font-size: 30px;
}

.button_add_blue {
  border-radius: 10px;
  background-color: #00c3ed;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.button_add_blue:hover {
  background-color: #00c3ed;
  border-radius: 10px;
  opacity: .6;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.button_add_blue_icons {
	color:#fff;
	font-size: 30px;
}

.button_add_pink {
  border-radius: 10px;
  background-color: #ef4f98;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.button_add_pink:hover {
  background-color: #ef4f98;
  border-radius: 10px;
  opacity: .6;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.button_add_pink_icons {
	color:#fff;
	font-size: 30px;
}

/* TEXT */

.text_button_v3_pink {
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.text_button_v3_pink a {
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.text_icon_button {
  margin-left: 20px;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-family: DuepuntozeroProBold;
}

.more_options_blue_text_icon {
  font-size: 14px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.more_options {
  border-radius: 5px;
  background-color: #ef4f98;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.more_options:hover {
  background-color: #ef4f98;
  border-radius: 5px;
  opacity: .6;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.more_options_blue {
  border-radius: 5px;
  background-color: #00c3ed;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.more_options_blue:hover {
  background-color: #fd9b10;
  border-radius: 5px;
  opacity: .6;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.more_options_pink {
  border-radius: 5px;
  background-color: #ef4f98;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.more_options_pink:hover {
  background-color: #fd9b10;
  border-radius: 5px;
  opacity: .6;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.more_options_green {
  border-radius: 5px;
  background-color: #02da1b;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.more_options_green:hover {
  background-color: #fd9b10;
  border-radius: 5px;
  opacity: .6;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.text_new_headline { 
  font-size: 16px;
  font-family: DuepuntozeroProBold;
  color: #000;
  opacity: .6;
}

.text_new_headline a { 
  font-size: 16px;
  font-family: DuepuntozeroProBold;
  color: #000;
  opacity: .6;
  text-decoration: none;
}
.header_new_edit { 
  background-color: #00c3ed;
  border-radius: 5px;
  font-size: 22px;
  font-family: DuepuntozeroProBold;
  color: #fff;
}

.sub_new_edit { 
  background-color: #00c3ed;
  border-radius: 5px;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
}

.save_button_green {
  background-color: #04e004;
  border: none;
  color: white;
  padding: 7px 32px 7px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
}

.save_button_green:hover {
  background-color: #04e004;
  border: none;
  color: white;
  padding: 7px 32px 7px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  opacity: .6;
}


.textfield_white_450_new {
	font-size: 14px;
	color: #52545c;
	background-color: #fff;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	height: 35px;
	width: 450px;
}

/* Rating NEW 3.0 */

.rating_letter { 
  font-size: 30px;
  font-family: DuepuntozeroProBold;
  color: #52545c;
}

/* Payment NEW 3.0 */

.payment_warning { 
  background-color: #ef4f98;
  border-radius: 5px;
  font-size: 22px;
  font-family: DuepuntozeroProBold;
  color: #fff;
}

.invoice_open { 
  background-color: #ef4f98;
  border-radius: 5px;
  font-size: 14px;
  font-family: DuepuntozeroProBold;
  color: #fff;
}

/* table_td NEW 3.0 */

.table_white_bg {
  background-color: #fff;
  border-radius: 5px;
}

.table_white_bg_trans {
  background-color: #fff;
  border-radius: 5px;
  opacity: .8;
}

.table_td { 
  background-color: #ffffff;
  border-radius: 5px;
  font-size: 14px;
  font-family: DuepuntozeroProBold;
  color: #52545c;
}

.table_td_care_contract { 
  background-color: #C5C4C4;
  border-radius: 5px;
  font-size: 14px;
  font-family: DuepuntozeroProBold;
  color: #52545c;
}

.table_td_first_column { 
  background-color: #dee5ed;
  border-radius: 5px;
  font-size: 14px;
  font-family: DuepuntozeroProBold;
  color: #52545c;
}

.table_td_cancellation {
  background-color: #ffffff;
  border-radius: 5px;
  font-size: 14px;
  font-family: DuepuntozeroProBold;
  color: #52545c;
  text-decoration: line-through;
}

.line-through-contract {
  font-size: 14px;
  text-align: left;
  color: #52545c;
  text-decoration: line-through;
}

.table_footer_navi_blue {
  border-radius: 5px;
  background-color: #00c3ed;
}

.table_subheadline_blue {
  border-radius: 5px;
  background-color: #07516a;
}

.table_subheadline_blue_text {
  font-size: 16px;
  color: #ffffff;
}

.text_footer_navi_blue {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.arrow_footer_navi_blue{
  font-size: 19px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.text_button_online_article_add_pink {
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.text_button_online_article_add_pink a {
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

/* table icons */

.table_icons_active_pink {
	color:#ef4f98;
	opacity: .7;
	font-size: 20px;
}

.table_icons_active_lightgray {
	color:#d3d3d3;
	opacity: .7;
	font-size: 20px;
}

/* popup */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: #00c3ed;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  overflow: auto;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9998;
}

.time-input {
  height: 45px;
  width: 100px; 
  font-weight: 300;
  text-decoration: none;
  font-family: DuepuntozeroProBold;
  font-size: 28px;
}

.popup-table {
  width: 100%;
  min-height: 45vh;
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
}

.popup-table td {
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  border: none;
}

.popup-table .button {
  background-color: orange;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.info-icon-popup {
    font-size: 90px;
    color: #fff;
    font-weight: 300;
    text-decoration: none;
    font-family: DuepuntozeroProBold;
}

.info-text-popup {
    font-size: 28px;
    color: #fff;
    font-weight: 300;
    text-decoration: none;
    font-family: DuepuntozeroProBold;
}

.button-label {
    font-size: 32px;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    text-shadow: 3px 3px 4px #777;
    font-family: DuepuntozeroProBold;
}

.button-label-sub {
    font-size: 18px;
    color: #eaeaea;
    text-decoration: none;
    font-weight: 300;
    text-shadow: 3px 3px 4px #777;
    font-family: DuepuntozeroProBold;
}

.button-show {
  width: 260px;
  height: 50px;
  background-color: #ef4f98;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
}

.button-show:hover {
  background-color: #c43c7c;
}

/* timetable cases */

.timetable_background {
  border-radius: 10px;
  background-color: #07516a;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.timetable_background_header {
  border-radius: 10px;
  background-color: #043140;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.timetable_table_background {
  border-radius: 8px;
  background-color: #09769b;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.timetable_table_background_free {
  border-radius: 8px;
  background-color: #064960;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.timetable_table_background_break {
  border-radius: 8px;
  background-color: #ef4f98;
  font-size: 18px;
  font-family: DuepuntozeroProBold;
  color: #fff;
  text-decoration: none;
}

.timetable_title {
    font-size: 24px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-family: DuepuntozeroProBold;
}

.timetable_time {
    font-size: 22px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    font-family: DuepuntozeroProBold;
}

.timetable_description {
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    font-family: DuepuntozeroProBold;
}

.timetable_main_case_background {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #000;
  background-color: #fff;
}

.timetable_main_case_background_gray {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #000;
  background-color: #ccc;
}

.timetable_main_case_background_green {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #000;
  background-color: #02da1b;
}

.timetable_main_case_background_pink {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #000;
  background-color: #ef4f98;
}

.timetable_main_case_background_striped_background_green {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #000;
  background: linear-gradient(to right, #ffffff 50%, #02da1b 50%);
  background-size: 8px 100%;
}

.timetable_main_case_background_striped_background_pink {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #000;
  background: linear-gradient(to right, #ffffff 50%, #ef4f98 50%);
  background-size: 8px 100%;
}

.timetable_main_case_background_striped_background_blue {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #000;
  background: linear-gradient(to right, #ffffff 50%, #00c3ed 50%);
  background-size: 8px 100%;
}

.timetable_main_case_background_striped_background_blue_corner {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #000;
  background: linear-gradient(45deg, #ffffff 50%, #00c3ed 50%);
  background-size: 8px 100%;
}

.timetable_main_case_background_striped_background_gray_corner {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #000;
  background: linear-gradient(45deg, #ffffff 50%, #cccccc 50%);
  background-size: 8px 100%;
}

.timetable_main_case_background_striped_background_gray {
  font-size: 15px;
  font-family: DuepuntozeroProBold;
  color: #000;
  background: linear-gradient(to right, #ffffff 50%, #cccccc 50%);
  background-size: 8px 100%;
}

/* Logfile */
.console-cell {
    background-color: #04303f; /* Dunkler Hintergrund, ähnlich wie in einer Konsole */
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    padding: 10px; /* Innenabstand für bessere Lesbarkeit */
    border: 1px solid #333; /* Eine leichte Umrandung */
    white-space: pre; /* Behält Zeilenumbrüche und Leerzeichen bei */
    border-radius: 5px; /* Abgerundete Ecken */
    height: 200px; /* Feste Höhe */
    overflow-y: auto; /* Vertikales Scrollen aktivieren, wenn Inhalt zu groß */
}

.console-table {
    width: 100%; /* Tabelle auf 100% Breite setzen */
    border-collapse: collapse; /* Damit keine Abstände zwischen den Zellen */
}

.console-table td {
    padding: 5px; /* Optional: Abstand in den Zellen */
}

.console-cell-text-green {
    color: #00ff00; /* Helle, grüne Schriftfarbe, wie in alten Konsolen */
}

.console-cell-text-orange {
    color: #fd9b10; /* Helle, orangene Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.console-cell-text-pink {
    color: #f73990; /* Helle, pinke Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.console-cell-text-gray {
    color: #cccccc; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.console-cell-text-gray-dark {
    color: #687981; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 900;
}

.console-cell-text-red {
    color: #ff5c5c; /* Helle, red Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

/* exchange mod */
.exchange-list-cell {
    background-color: #04303f; /* Dunkler Hintergrund, ähnlich wie in einer Konsole */
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    padding: 10px; /* Innenabstand für bessere Lesbarkeit */
    border: 1px solid #333; /* Eine leichte Umrandung */
    white-space: pre; /* Behält Zeilenumbrüche und Leerzeichen bei */
    border-radius: 5px; /* Abgerundete Ecken */
}

.exchange-list-cell-background {
    background-color: #03232e;
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.exchange-list-text {
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.exchange-list-text a {
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
    text-decoration: none;
}

.exchange-text-gray-dark {
    color: #687981; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 900;
}

.exchange-box-headline-gray {
    color: #cccccc; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 900;
    font-size: 18px;
}

.exchange-icon-gray {
    color: #cccccc; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 900;
}

.mailbox-status-green {
    color: #00ff00; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.mailbox-status-orange {
    color: #fd9b10; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.mailbox-status-gray {
    color: #cccccc; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.mailbox-status-red {
    color: #ff5c5c; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.mailbox-status-pink {
    color: #f73990; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.exchange-list-input {
    font-size: 14px;
    color: #cccccc;
    background-color: #03232e;
    width: 100%;
    height: 25px; /* Höhe des Input-Felds */
    border: none; /* Entfernt den Rahmen */
    box-sizing: border-box; /* Padding beeinflusst nicht die Größe */
    outline: none; /* Entfernt den Standard-Fokusrahmen */
    caret-color: #ffffff; /* Farbe des blinkenden Cursors */
    padding-left: 3px; /* Schiebt den Text 3px nach rechts */
}

.exchange-list-select {
    font-size: 14px;
    color: #cccccc;
    background-color: #03232e;
    width: 100%;
    height: 25px; /* Höhe des Select-Feldes */
    border: none; /* Entfernt den Standardrahmen */
    box-sizing: border-box; /* Padding beeinflusst nicht die Größe */
    outline: none; /* Entfernt den Fokusrahmen */
    appearance: none; /* Entfernt das Standarddesign des Select-Felds (optional) */
    -webkit-appearance: none; /* Für Safari */
    -moz-appearance: none; /* Für Firefox */
    padding-left: 5px; /* Optional: Innenabstand links */
}

.save-button {
    font-size: 14px;
    color: #ffffff; /* Weiße Schrift für Kontrast */
    background-color: #089eac; /* Passender Blauton */
    border: none; /* Entfernt den Standardrahmen */
    border-radius: 5px; /* Runde Ecken */
    padding: 8px 16px; /* Innenabstand für eine angenehme Größe */
    cursor: pointer; /* Zeigt den Klickzeiger bei Hover an */
    transition: background-color 0.3s ease; /* Sanfter Hover-Übergang */
}

.exchange-master-headline {
    background-color: #03232e;
    padding: 10px; /* Innenabstand für bessere Lesbarkeit */
    border: 1px solid #333; /* Eine leichte Umrandung */
    white-space: pre; /* Behält Zeilenumbrüche und Leerzeichen bei */
    border-radius: 5px; /* Abgerundete Ecken */
    color: #cccccc;
    font-size: 20px;
}

.exchange-master-headline-text {
    color: #cccccc;
    font-size: 24px;
}

/** hosting mod */

.hosting-status-orange {
    color: #fd9b10;
    font-weight: 700;
}

.hosting-status-pink {
    color: #f73990;
    font-weight: 700;
}

.hosting-status-green {
    color: #00ff00;
    font-weight: 700;
}

.hosting-status-gray {
    color: #cccccc;
    font-weight: 700;
}

/** domain mod */
.domain-list-cell {
    background-color: #04303f; /* Dunkler Hintergrund, ähnlich wie in einer Konsole */
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    padding: 10px; /* Innenabstand für bessere Lesbarkeit */
    border: 1px solid #333; /* Eine leichte Umrandung */
    white-space: pre; /* Behält Zeilenumbrüche und Leerzeichen bei */
    border-radius: 5px; /* Abgerundete Ecken */
}

.domain-list-cell-background {
    background-color: #03232e;
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.domain-check-cell-background {
    background-color: #04303f;
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.domain-list-text {
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.domain-list-text a {
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
    text-decoration: none;
}

.domain-text-gray-dark {
    color: #687981; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 900;
}

.domain-box-headline-gray {
    color: #cccccc; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 900;
    font-size: 18px;
}

.domain-icon-gray {
    color: #cccccc; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 900;
}

.domain-status-green {
    color: #00ff00;
    font-weight: 700;
}

.domain-status-orange {
    color: #fd9b10;
    font-weight: 700;
}

.domain-status-red {
    color: #ff5c5c;
    font-weight: 700;
}

.domain-list-input {
    font-size: 14px;
    color: #cccccc;
    background-color: #03232e;
    width: 100%;
    height: 25px; /* Höhe des Input-Felds */
    border: none; /* Entfernt den Rahmen */
    box-sizing: border-box; /* Padding beeinflusst nicht die Größe */
    outline: none; /* Entfernt den Standard-Fokusrahmen */
    caret-color: #ffffff; /* Farbe des blinkenden Cursors */
    padding-left: 3px; /* Schiebt den Text 3px nach rechts */
}

.domain-list-select {
    font-size: 14px;
    color: #cccccc;
    background-color: #03232e;
    width: 100%;
    height: 25px; /* Höhe des Select-Feldes */
    border: none; /* Entfernt den Standardrahmen */
    box-sizing: border-box; /* Padding beeinflusst nicht die Größe */
    outline: none; /* Entfernt den Fokusrahmen */
    appearance: none; /* Entfernt das Standarddesign des Select-Felds (optional) */
    -webkit-appearance: none; /* Für Safari */
    -moz-appearance: none; /* Für Firefox */
    padding-left: 5px; /* Optional: Innenabstand links */
}

.domain-master-headline {
    background-color: #03232e;
    padding: 10px; /* Innenabstand für bessere Lesbarkeit */
    border: 1px solid #333; /* Eine leichte Umrandung */
    white-space: pre; /* Behält Zeilenumbrüche und Leerzeichen bei */
    border-radius: 5px; /* Abgerundete Ecken */
    color: #cccccc;
    font-size: 20px;
}

.domain-master-headline-text {
    color: #cccccc;
    font-size: 24px;
}

.delete-button {
    font-size: 14px;
    color: #ffffff; /* Weiße Schrift für Kontrast */
    background-color: #089eac; /* Passender Blauton */
    border: none; /* Entfernt den Standardrahmen */
    border-radius: 5px; /* Runde Ecken */
    padding: 8px 16px; /* Innenabstand für eine angenehme Größe */
    cursor: pointer; /* Zeigt den Klickzeiger bei Hover an */
    transition: background-color 0.3s ease; /* Sanfter Hover-Übergang */
}

.table_icons_active_gray {
  color: #ccc;
  opacity: .7;
  font-size: 20px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 25px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 19px;
    width: 19px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #00ff00;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

.domain-update-status-text {
    color: #cccccc;
    font-size: 18px;
}

.domain-update-billing-icon-green {
    color: #00ff00;
    font-weight: 700;
}

.domain-update-billing-icon-red {
    color: #ff5c5c;
    font-weight: 700;
}

.domain-update-billing-icon-orange {
    color: #fd9b10;
    font-weight: 700;
}

/** software log mod */

.logfile-list-text {
    font-family: monospace;
    color: #b5b6b6; 
    font-weight: 700;
}

.logfile-list-text a {
    font-family: monospace;
    color: #b5b6b6;
    font-weight: 700;
    text-decoration: none;
}

.logfile-list-text-green {
    font-family: monospace;
    color: #00ff00;
    font-weight: 700;
}

.logfile-list-text-orange {
    font-family: monospace;
    color: #fd9b10;
    font-weight: 700;
}

.logfile-list-text-pink {
    font-family: monospace;
    color: #f73990;
    font-weight: 700;
}

.logfile-list-text-gray {
    font-family: monospace;
    color: #cccccc;
    font-weight: 700;
}

.logfile-list-text-gray-dark {
    font-family: monospace;
    color: #687981;
    font-weight: 700;
}

.logfile-list-text-red {
    font-family: monospace;
    color: #ff5c5c;
    font-weight: 700;
}


/** articles mod */

.article-list-text-orange {
    font-family: monospace;
    color: #fd9b10;
    font-weight: 700;
}

.article-list-text-gray {
    font-family: monospace;
    color: #cccccc;
    font-weight: 700;
}

.article-list-text-green {
    font-family: monospace;
    color: #00ff00;
    font-weight: 700;
}

.article-name-gray {
    font-size: 16px;
    font-family: monospace;
    color: #cccccc;
    font-weight: 700;
}


/** dashboard mod */

.button_dashboard_blue {
  border-radius: 10px;
  background-color: #04303f;
}

.button_dashboard_blue:hover {
  background-color: #021b24;
  border-radius: 10px;
}


/** work to do mod */

.work-todo-text-orange {
    font-family: monospace;
    color: #fd9b10;
    font-weight: 700;
}

.work-todo-text-gray {
    font-family: monospace;
    color: #cccccc;
    font-weight: 700;
}

.work-todo-text-green {
    font-family: monospace;
    color: #00ff00;
    font-weight: 700;
}

.work-todo-text-red {
    font-family: monospace;
    color: #ff5c5c;
    font-weight: 700;
}

.work-todo-text-pink {
    font-family: monospace;
    color: #f73990;
    font-weight: 700;
}

.work-todo-list-cell-background {
    background-color: #03232e;
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
    font-size: 12px
}

.work-icon-plus-green {
    font-family: monospace;
    color: #00ff00;
    font-weight: 700;
    font-size: 16px;
}

.work-ticket-status-green {
    font-family: monospace;
    color: #00ff00;
    font-weight: 700;
}


/** invoices mod */

.payment-exceeded-red {
    font-family: monospace;
    color: #ff5c5c;
    font-weight: 700;
}

.payment-exceeded-green {
    font-family: monospace;
    color: #00ff00;
    font-weight: 700;
}

.payment-exceeded-gray {
    font-family: monospace;
    color: #cccccc;
    font-weight: 700;
}

.warnings_notice_css {
    font-size: 12px;
    font-family: monospace;
    color: #f73990;
    font-weight: 700;
}


/** acquisition mod */
.acquisition-list-cell {
    background-color: #04303f; /* Dunkler Hintergrund, ähnlich wie in einer Konsole */
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    padding: 10px; /* Innenabstand für bessere Lesbarkeit */
    border: 1px solid #333; /* Eine leichte Umrandung */
    white-space: pre; /* Behält Zeilenumbrüche und Leerzeichen bei */
    border-radius: 5px; /* Abgerundete Ecken */
}

.acquisition-list-cell-background {
    background-color: #03232e;
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.acquisition-list-text {
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
}

.acquisition-list-text a {
    font-family: monospace; /* Monospace-Schriftart für Konsolen-Look */
    color: #b5b6b6; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 700;
    text-decoration: none;
}

.acquisition-text-gray-dark {
    color: #687981; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 900;
}

.acquisition-box-headline-gray {
    color: #cccccc; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 900;
    font-size: 18px;
}

.acquisition-icon-gray {
    color: #cccccc; /* Helle, graue Schriftfarbe, wie in alten Konsolen */
    font-weight: 900;
}

.acquisition-list-input {
    font-size: 14px;
    color: #cccccc;
    background-color: #03232e;
    width: 100%;
    height: 25px; /* Höhe des Input-Felds */
    border: none; /* Entfernt den Rahmen */
    box-sizing: border-box; /* Padding beeinflusst nicht die Größe */
    outline: none; /* Entfernt den Standard-Fokusrahmen */
    caret-color: #ffffff; /* Farbe des blinkenden Cursors */
    padding-left: 3px; /* Schiebt den Text 3px nach rechts */
}

.acquisition-list-select {
    font-size: 14px;
    color: #cccccc;
    background-color: #03232e;
    width: 100%;
    height: 25px; /* Höhe des Select-Feldes */
    border: none; /* Entfernt den Standardrahmen */
    box-sizing: border-box; /* Padding beeinflusst nicht die Größe */
    outline: none; /* Entfernt den Fokusrahmen */
    appearance: none; /* Entfernt das Standarddesign des Select-Felds (optional) */
    -webkit-appearance: none; /* Für Safari */
    -moz-appearance: none; /* Für Firefox */
    padding-left: 5px; /* Optional: Innenabstand links */
}

.acquisition-master-headline {
    background-color: #03232e;
    padding: 10px; /* Innenabstand für bessere Lesbarkeit */
    border: 1px solid #333; /* Eine leichte Umrandung */
    white-space: pre; /* Behält Zeilenumbrüche und Leerzeichen bei */
    border-radius: 5px; /* Abgerundete Ecken */
    color: #cccccc;
    font-size: 20px;
}

.acquisition-master-headline-text {
    color: #cccccc;
    font-size: 24px;
}

.acquisition-status-red {
    font-family: monospace;
    color: #ff5c5c;
    font-weight: 700;
}

/* articles mod */

.article-img-red {
    color: #ff5c5c;
    font-weight: 600;
    font-size: 16px;
}

.article-img-gray {
    color: #cccccc;
    font-weight: 600;
    font-size: 16px;
}

.article-img-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.article-img-slot {
  width: 100px;
  height: 120px;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.article-img-slot img {
  width: 100px;
  height: 100px;
  border: 3px solid #cccccc;
  flex-shrink: 0;
}

.article-img-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  width: 100%;
  padding-right: 4px;
  font-size: 14px;
  margin-top: auto; /* rutscht ganz nach unten */
}

.article-img-placeholder {
  width: 100px;
  height: 100px;
  border: 3px solid #cccccc;
  background: transparent;
  color: #888;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.article-img-placeholder input[type="file"] {
  display: none;
}