:root {
  --red: #dd1a03;
  --wiedervorlage: #dd1a03;
  --anlage: #391463;
  --aktivitaet: #488b49;
  --mitarbeiter: #e87461;
  --anspechpartner: #a48;
  --scrollbar-color: rgba(15,91,120,1);
  --pg_icon-arrow-right:url(../img/arrow_right.svg);
  }
 #header {background-color: #3a3834 !Important;}
 .isLogedin
{
  position: fixed;
  bottom: 6%;
  left: 50%;
  padding: 5px;
  border: 1px solid;
  border-radius: 4px;
}  

#VERSION
{
  position: absolute;
  right: 8px;
  top: 4px;
  color: #aaa;
  font-size: 12px;
  padding: 4px;
} 
 
.infobtn {
	padding: 2px 6px;
	background-color: blue;
	color: white;
	border-radius: 50%;
	font-size: 9px;
	margin-left: 2px;
	vertical-align: 2px;
	cursor: pointer;
  }
  
#AKTINFO p {  line-height: 1.3;margin: 0;font-size: 13px !important}
.paste_hint
{
	margin-right: 20px;
	color: #f44;
}
.paste_hint p {
  background:var(--pg_icon-arrow-right) bottom right no-repeat;
  padding:0 36px 24px 0;
  right:30px;
  top:0;
  transform:rotate(-1deg);
  text-align: right;
}
.paste_hint p,
{
  color:var(--paste-hint);
  font-family:Architects Daughter,cursive;
  font-size:1rem;
  position:absolute
}  
  
.pg_flex{display: flex; justify-content: space-between;}
.tinytext {font-size: 10px;line-height: 1.4em; font-weight: normal}

/*Abstände*/
.pg_spacer {display: block}
.pg_spacer.spacer_white {background-color: #fff}
.pg_spacer.spacer_10 {height: 10px}

/*Scrollbalken*/
#pg_marketingFrame * {scrollbar-width: thin;scrollbar-color: var(--scrollbar-color) transparent}
#pg_marketingFrame *::-webkit-scrollbar-thumb {background: var(--scrollbar-color)}
#pg_marketingFrame *::-webkit-scrollbar {width: 6px}
#pg_marketingFrame *::-webkit-scrollbar-track {background: transparent}
#pg_marketingFrame *::-webkit-scrollbar-thumb {background: rgba(0,0,0,0.35);border-radius: 20px;border: 2px solid transparent;background-clip: padding-box;}
#pg_marketingFrame *::-webkit-scrollbar-thumb:hover {background: rgba(0,0,0,0.55);}

.tox-statusbar__right-container, .tox-promotion-link{display: none!Important}
/*Irgendwas…?!*/
.mitshortname{
	font-size: 8px;
  	padding: 4px 2px;
  	border: 1px solid var(--mitarbeiter);
  	border-radius: 50%;
  	background-color: var(--mitarbeiter);
  	position: absolute;
  	right: 36px;
  	top: 16px;
  	color: #fff;
  	font-weight: bold;
	width: 18px;
    border: 1px solid var(--mitarbeiter);
    height: 18px;
    text-align: center;
}
.mitshortnameLeft{
	font-size: 8px;
  	padding: 4px 2px;
  	border: 1px solid var(--mitarbeiter);
  	border-radius: 50%;
  	background-color: var(--mitarbeiter);
  	position: absolute;
  	left: 0px;
  	top: 0px;
  	color: #fff;
  	font-weight: bold;
}
.aktmitshortname
{
	font-size: 8px;
  	padding: 4px 2px;
  	border: 1px solid var(--mitarbeiter);
  	border-radius: 50%;
  	background-color: var(--mitarbeiter);
  	position: absolute;
  	left: 2px;
  	top: 2px;
  	color: #fff;
  	font-weight: bold;
}
.akt_anlagencount
{
font-size: 8px;
  padding: 4px 2px;
  border: 1px solid var(--anlage);
  border-radius: 50%;
  background-color: var(--anlage);
  position: absolute;
  right: 4px;
  top: 2px;
  color: #fff;
  font-weight: bold;
  width: 18px;
  border: 1px solid var(--anlage);
  height: 18px;
  text-align: center;
}
.pg_relative{position: relative;}
.pg_smalllistItem{max-height: 4em;
  overflow: hidden;
  font-size: 13px;}
.anlagencount{
margin-left: 6px;
  background-color: var(--anlage);
  width: 18px;
  height: 18px;
  color: #fff;
  padding: 3px 6px;
  border-radius: 50%;
  font-size: 10px;
  vertical-align: 2px;
  text-align: center;
}
.invkontakte{
    margin-left: 6px;
    background-color: var(--mitarbeiter);
    width: 18px;
    height: 18px;
    color: #fff;
    border-radius: 50%;
    font-size: 8px;
    vertical-align: 2px;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}



#AKTVERFASSERLIST .anlagencount {position: absolute; top: 16px; right: 15px; width: 18px; height: 18px}

.aktivitaetcount{
margin-left: 6px;
  background-color: var( --aktivitaet);
  width: 20px;
  color: #fff;
  padding: 3px 6px;
  border-radius: 50%;
  font-size: 10px;
  vertical-align: 2px;
  text-align: center;
}
.pg_tabcountAP{
background-color: var( --anspechpartner);
  width: 20px;
  color: #fff;
  padding: 5px 0px;
  border-radius: 50%;
  font-size: 8px;
  vertical-align: 4px;
  position: absolute;
  top: -7px;
  right: -7px;
  text-align: center;

}
.pg_tabcountAK{
background-color: var( --aktivitaet);
  width: 20px;
  color: #fff;
  padding: 5px 0px;
  border-radius: 50%;
  font-size: 8px;
  vertical-align: 4px;
  position: absolute;
  top: -7px;
  right: -7px;
  text-align: center;

}
.pg_tabcountAN{
background-color: var( --anlage);
  width: 20px;
  color: #fff;
  padding: 5px 0px;
  border-radius: 50%;
  font-size: 8px;
  vertical-align: 4px;
  position: absolute;
  top: -7px;
  right: -7px;
  text-align: center;

}
.pg_tabcountWV{
background-color: var( --wiedervorlage);
  width: 20px;
  color: #fff;
  padding: 5px 0px;
  border-radius: 50%;
  font-size: 8px;
  vertical-align: 4px;
  position: absolute;
  top: -7px;
  right: -7px;
  text-align: center;

}
.PGWVAKCOUNT{
background-color: var( --wiedervorlage);
  width: 20px;
  color: #fff;
  padding: 5px 0px;
  border-radius: 50%;
  font-size: 8px;
  vertical-align: 4px;
  position: absolute;
  top: 0px;
  right: 0px;
  text-align: center;
}
.listbtn{
  width: 18px !important;
  position: absolute !important;
  right: 0 !important;
  top: 16px !important;
  height: 18px !important;

}
.pg_checkboxlist{
border: 1px solid #999;
  padding: 6px;
  border-radius: 6px;
  max-height: 200px;
  overflow: auto;
}
.pg_checkboxlist > li {margin: 2px 0;}

.noMaxHeight{max-height: none !Important }
#ARROW {
  position: relative;
  margin: 0 !important;
}
#TRACE {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 11px;}
  
 .pg_checkboxBox{border: 1px solid #666; padding: 6px; border-radius: 6px;} 
/* Das sollte dann doch micht hier sein, */
#ANSPRECHPARTNERLISTE {border: 1px solid lightgray; width: 100%; overflow: auto; max-height: 600px}
.floatright{float: right;}

.mandatory{color: var(--red)}
.error{border: 1px solid var(--red)}
.hint {
  font-size: 12px;
  margin-top: 4px;
}
/* ======================================= */
/* ======================================= */
html, body {height: 100%;overflow: hidden}
#pg_marketingFrame {display: flex;height: calc(100vh - 124px)}
#pg_marketingFrame {display: flex; font-size: 15px}
.pg_mFElement {padding: 2rem}
#pg_mFLeft {width: 300px; background-color: var(--light-grey); /*height: calc(100vh - 4rem)*/display: flex;flex-direction: column;overflow: hidden}
#pg_mFLeft > .projectList {flex: 1;overflow-y: auto;min-height: 0; 	/*max-height: 50%;*/ overflow: auto;}

#pg_mFRight {width: calc(100% - 300px);box-sizing: border-box;display: flex;flex-direction: column;height: 100%;overflow: hidden;}
#pg_mFRight > .pg_contentWrap {display: flex;flex: 1;overflow: hidden;}    

.pg_mRightleft{width: 79%; margin-right: 1%;overflow-y: auto}
#pg_mFRight .pg_spacer.spacer_10, .pg_mRightleft .pg_spacer.spacer_10 {position: sticky;top: 56px;z-index: 5}
.pg_mRightleftRight{width: 20%;overflow-y: auto}

#INVERSTORMAINLIST {min-width: 150px}
#MAINVERFASSERLIST {width: 10%;min-width: 150px;}
#MAINWIEDERVORLAGENLISTE {width: 25%;min-width: 150px}
#MAINAKTIVITAETENLISTE, #VERFASSERAKTIVITAETENLISTE {min-width: 150px}

#pg_mFRight .controlRow.controlFixed {position: sticky;top: 0;z-index: 5}
#pg_mFRight .listRowHead {position: sticky;top: 65px;z-index: 5;   box-shadow: 0 2px 3px rgba(0,0,0,.05);}
#pg_mFRight .pg_mRightleft .listRowHead {top: 65px}

/*Listen für linke + rechte Seite der RECHTEN HAUPTSPALTE*/
#pg_mFRight .listRow {display: grid;gap: 1rem;padding: .5rem 1rem;margin: 0 0 .25rem 0;border-radius: 10px;background: #fff;border: 1px solid transparent;cursor: pointer;transition: all .15s ease}
#pg_mFRight .listRow:nth-child(even):not(.listRowHead) {background: #f9f9f9}
#pg_mFRight .listRow:not(.listRowHead):hover {background: #f5f5f5;border-color: #ddd;box-shadow: 0 1px 3px rgba(0,0,0,.05)}
#pg_mFRight .listRow.active {background: #e6f0f7;border-color: var(--blue);box-shadow: inset 0 0 0 1px var(--blue)}
#pg_mFRight .listRowHead {background-color: var(--light-grey);font-weight: bold;border-radius: 10px;padding: .75rem 1rem;cursor: default;display: grid;gap: 1rem;flex: 0 0 auto; }
#pg_mFRight .listRow li {list-style: none;padding: .15rem 0;position: relative}
#pg_mFRight .listRowHead li {display: flex;align-items: center;gap: .25rem}
.pg_prjHead {background-color: var(--white);font-weight: bold;border-radius: 10px;padding: .75rem 1rem;}
.listContainer {flex: 1;overflow-y: auto; min-height: 250px}
.listRowHead,.controlRow {flex-shrink: 0}

#pg_mFRight .listRowHead li.sortable {display: flex;align-items: center;gap: .25rem;position: relative}
#pg_mFRight .listRowHead li.sortable button {font-weight: inherit;font-size: inherit;padding: 0;display: flex;align-items: center;gap: .25rem;}
#pg_mFRight .listRowHead li.sortable button::after {content: "";display: inline-block;width: 16px;height: 16px;background-repeat: no-repeat;background-position: center;background-size: 16px 16px;background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M12 6l-6 6h12z' fill='%23666'/>\</svg>");transition: transform .2s ease, background-image .2s ease;}
#pg_mFRight .listRowHead li.sortable button.sort-desc::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M12 18l6-6H6z' fill='%23666'/>\</svg>")}

/*Größenangabe gilt nur für die linke Seite der RECHTEN HAUPTSPALTE*/
#pg_mFRight .pg_mRightleft .listRowHead, #pg_mFRight .pg_mRightleft .listRow {grid-template-columns: 80px minmax(100px, 200px) repeat(auto-fit, minmax(100px, 1fr))}


/*Listen mit feststehendem Header für DIALOGE*/
.pg_dialog .pg_listframe .listRowHead {grid-template-columns: 80px minmax(100px, 122px) repeat(auto-fit, minmax(100px, 1fr));}
.pg_dialog .pg_listframe .listRow {display: grid;gap: 1rem;padding: .5rem 1rem;margin: 0 0 .25rem 0;border-radius: 10px;background: #fff;border: 1px solid transparent;cursor: pointer;transition: all .15s ease}
.pg_dialog .pg_listframe .listRow:nth-child(even):not(.listRowHead) {background: #f9f9f9}
.pg_dialog .pg_listframe .listRow:not(.listRowHead):hover {background: #f5f5f5;border-color: #ddd;box-shadow: 0 1px 3px rgba(0,0,0,.05)}
.pg_dialog .pg_listframe .listRow.active {background: #e6f0f7;border-color: var(--blue);box-shadow: inset 0 0 0 1px var(--blue)}
.pg_dialog .pg_listframe .listRowHead {background-color: var(--light-grey);font-weight: bold;border-radius: 10px;padding: .75rem 1rem;cursor: default;display: grid;gap: 1rem;flex: 0 0 auto; margin-top: 5px;}
.pg_dialog .pg_listframe .listRow li {list-style: none;padding: .15rem 0;position: relative}
.pg_dialog .pg_listframe .listRowHead li {display: flex;align-items: center;gap: .25rem}
.pg_dialog .pg_listframe .listRowHead li.sortable {display: flex;align-items: center;gap: .25rem;position: relative}
.pg_dialog .pg_listframe .listRowHead li.sortable button {font-weight: inherit;font-size: inherit;padding: 0;display: flex;align-items: center;gap: .25rem;}
.pg_dialog .pg_listframe .listRowHead li.sortable button::after {content: "";display: inline-block;width: 16px;height: 16px;background-repeat: no-repeat;background-position: center;background-size: 16px 16px;background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M12 6l-6 6h12z' fill='%23666'/>\</svg>");transition: transform .2s ease, background-image .2s ease;}
.pg_dialog .pg_listframe .listRowHead li.sortable button.sort-desc::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M12 18l6-6H6z' fill='%23666'/>\</svg>")}
.pg_dialog .pg_listframe .pg_tableview .listitem.clickable button {display: grid !important;grid-template-columns: 80px minmax(100px, 122px) repeat(auto-fit, minmax(100px, 1fr));gap: 1rem;font-size: 14px}
.pg_dialog .pg_listframe .pg_tableview .listitem.clickable button > div {width: auto !important; margin: 0 !important}
/*
#PGD_MAILHISTORIE.pg_prjHead {background-color: var(--white);font-weight: bold;border-radius: 10px;padding: .75rem 1rem;}
#PGD_MAILHISTORIE.listContainer {flex: 1;overflow-y: auto; min-height: 250px}
#PGD_MAILHISTORIE.listRowHead,.controlRow {flex-shrink: 0}
*/


/*ButtonRow*/
.controlRow.controlFixed {display: flex; border: 1px solid #0f5b78; flex: 0 0 auto;padding: .5rem 1rem;background: #fff; /*box-shadow: inset 2px 2px 10px rgba(0,0,0,0.3);*/font-weight: 700;border-radius: 10px;padding: .75rem 1rem;cursor: default}

#searchInput, #searchToggle {-webkit-transition: all .45s cubic-bezier(.23,1,.32,1);-moz-transition: all .45s cubic-bezier(.23,1,.32,1);-ms-transition: all .45s cubic-bezier(.23,1,.32,1);-o-transition: all .45s cubic-bezier(.23,1,.32,1);transition: all .45s cubic-bezier(.23,1,.32,1);}
#searchBar {position: relative;height: 30px}
#searchBar.active {width: 80%} 
#searchInput {position: absolute;left: 36px; bottom: -5px; width: 0%; overflow: hidden}
#searchInput input {outline: 0; border: 0; border-bottom: 1px solid; width: 100%; height: 40px; font-size: 16px; font-family: var(--font-regular);padding-right: 30px}
#searchInput input.submit {display: none}
#searchBar.active #searchInput {width: 100%}
#searchInput {-webkit-transition: all .75s cubic-bezier(.23,1,.32,1);-moz-transition: all .75s cubic-bezier(.23,1,.32,1);-ms-transition: all .75s cubic-bezier(.23,1,.32,1);-o-transition: all .75s cubic-bezier(.23,1,.32,1);transition: all .75s cubic-bezier(.23,1,.32,1);}
#searchInput input:focus-visible {padding: 4px;outline-offset: -1px;}

.btn {flex-shrink: 0;width: 30px;height: 30px;border-radius: 50%;border: none;cursor: pointer;padding: 0;background: none;position: relative;transition: transform .2s ease;margin-right: 10px}
.btn::before {content: "";position: absolute;inset: 0;border-radius: 50%;background: #000}
.btn::after {content: "";position: absolute;inset: 0;background-repeat: no-repeat;background-position: center;background-size: 18px;transition: transform .3s ease}
.btn:hover {transform: scale(1.08)}
.btn:active {transform: scale(.95)} 
.btn.disabled {cursor: default;opacity: .4;transform: none}
.btn.disabled:hover, .btn.disabled:active {transform: none}
.btn.filter_active:before {background: var(--red)}

.pushbtn.disabled {cursor: default;opacity: .4;transform: none}
.pushbtn.disabled:hover, .btn.disabled:active {transform: none}
/*PLUS*/
.btnAdd::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M12 6v12M6 12h12' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/>\</svg>");}
.btnAdd:hover::after {transform: rotate(90deg)}

.btnEdit::after {
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M12 20h9M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\</svg>");
}

.btnReminder::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<circle cx='12' cy='12' r='8' stroke='%23ffffff' stroke-width='2.5' fill='none'/>\<path d='M12 8v4l3 2' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/>\</svg>")}
.btnReminder:hover::after {transform: rotate(90deg)}

.btnView{position: absolute; right: 0;}
.btnView::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<rect x='4' y='5' width='6' height='6' stroke='%23ffffff' stroke-width='2.5' fill='none'/>\<rect x='14' y='5' width='6' height='6' stroke='%23ffffff' stroke-width='2.5' fill='none'/>\<rect x='4' y='13' width='6' height='6' stroke='%23ffffff' stroke-width='2.5' fill='none'/>\<rect x='14' y='13' width='6' height='6' stroke='%23ffffff' stroke-width='2.5' fill='none'/>\</svg>");}
.btnView:hover::after {transform: scale(1.15)}
.btnViewSwitch:hover::after {filter: brightness(1.3);}

/*PFEIL NACH LINKS*/
.btnPrev::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M15 6l-6 6 6 6' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\</svg>")}

/*PFEIL NACH RECHTS*/
.btnNext::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M9 6l6 6-6 6' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\</svg>")}
.btnPrev:hover::after,.btnNext:hover::after {transform: scale(1.1)}

/*MINUS*/
.btnDelete::before {background: #333}
.btnDelete::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M6 12h12' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/>\</svg>");}
.btnDelete:hover::before {background: #c0392b}
.btnDelete.disabled:hover::before {background: #333}

/*CALENDAR*/
.btnCalendar::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M6 4v3M18 4v3M4 9h16M5 7h14a1 1 0 0 1 1 1v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a1 1 0 0 1 1-1z' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\</svg>")}
.btnCalendar:hover::after {transform: scale(1.1)}

/*MENÜ*/
.btnMenu::after {content: "";position: absolute;inset: 0;background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<circle cx='6' cy='12' r='1.8' fill='%23ffffff'/>\<circle cx='12' cy='12' r='1.8' fill='%23ffffff'/>\<circle cx='18' cy='12' r='1.8' fill='%23ffffff'/>\</svg>");background-repeat: no-repeat;background-position: center;background-size: 20px}
.btnMenu.listbtn::after {  background-size: 15px;}
.btnMenu:hover::after {transform: scale(1.15);}
.btnMenu:hover::after {transform: translateY(-1px);}

/*SEARCH*/
.btnSearch::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M10.5 15.5a5 5 0 1 1 3.54-1.46' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\<path d='M14.5 14.5L20 20' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/>\</svg>");}
.btnSearch:hover::after {transform: scale(1.1);}


/* SHARE */
.btnShare::after {
	background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='18' cy='5' r='2' fill='%23ffffff'/>\
<circle cx='6' cy='12' r='2' fill='%23ffffff'/>\
<circle cx='18' cy='19' r='2' fill='%23ffffff'/>\
<path d='M8 11L16 6' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/>\
<path d='M8 13L16 18' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/>\
</svg>");
}

.btnShareSelect::after {
	background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='2.2' fill='%23ffffff'/>\
<path d='M12 9V5.5' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/>\
<circle cx='12' cy='4' r='1.8' fill='%23ffffff'/>\
<path d='M14.4 10.2L17.3 8.2' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/>\
<circle cx='19' cy='7' r='1.8' fill='%23ffffff'/>\
<path d='M14 14.2L16.6 16.8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/>\
<circle cx='18.2' cy='18.2' r='1.8' fill='%23ffffff'/>\
<path d='M10 14.2L7.4 16.8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/>\
<circle cx='5.8' cy='18.2' r='1.8' fill='%23ffffff'/>\
<path d='M9.6 10.2L6.7 8.2' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'/>\
<circle cx='5' cy='7' r='1.8' fill='%23ffffff'/>\
</svg>");
}


.btnShareSelect:hover::after {
	transform: scale(1.1);
}
.btnShare:hover::after {
	transform: scale(1.1);
}
/*FILTER*/
.btnFilter::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M4 6h16l-6.5 7v5l-3-1.5v-3.5z' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\</svg>")}
.btnFilter:hover::after {transform: scale(1.1)}

/*ARCHIVE*/
.btnArchive::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M4 7h16v4H4z' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/>\<path d='M12 11v6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/>\<path d='M9 14l3 3 3-3' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\</svg>")}
.btnArchive:hover::after {transform: translateY(2px)}

/*SHARE*/
.btnShare::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<circle cx='18' cy='5' r='2.5' fill='%23ffffff'/>\<circle cx='6' cy='12' r='2.5' fill='%23ffffff'/>\<circle cx='18' cy='19' r='2.5' fill='%23ffffff'/>\<path d='M8.3 11l7-4M8.3 13l7 4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/>\</svg>");}
.btnShare:hover::after {transform: scale(1.1)}

/*PRINT*/
.btnPrint::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<rect x='6' y='11' width='12' height='7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\<rect x='8' y='6' width='8' height='5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\<path d='M6 18h12v2H6z' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\</svg>");background-repeat: no-repeat;background-position: center;background-size: 18px 18px}

/*UPLOAD*/
.btnUpload::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M12 4v12M12 4l-4 4M12 4l4 4' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\<path d='M6 16h12v4H6z' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\</svg>");}

/*DOWNLOAD*/
.btnDownload::after {background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\<path d='M12 20V8M12 20l-4-4M12 20l4-4' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/>\<path d='M6 4h12v4H6z' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/>\</svg>");}

.btnPrint:hover::before,
.btnUpload:hover::before,
.btnDownload:hover::before {background: #333}

.btnPrint:hover::after,
.btnUpload:hover::after,
.btnDownload:hover::after {filter: brightness(1.2);}

/* Liste */
.projectList {list-style: none;padding: 0;margin: 10px 0 0 0}
.projectList li {margin-bottom: .4rem}
#MAINMITARBEITERLIST li {margin-top: .4rem}
.togglePill {display: flex;align-items: center;gap: .75rem;padding: 1rem;border-radius: 14px;background: transparent;cursor: pointer;transition: background .18s ease, transform .08s ease;user-select: none;color: #333;font-weight: 500}
.togglePill:hover {background: rgba(0,0,0,.05)}
.togglePill input {display: none}
.checkCircle {width: 16px;height: 16px;border-radius: 50%;border: 2px solid #c8c8c8;background: white;position: relative;transition: all .2s ease;flex-shrink: 0}
.checkCircle::after {content: "";position: absolute;width: 6px;height: 6px;border-radius: 50%;background: #111;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(0);transition: transform .15s ease}
.togglePill:has(input:checked) {background: var(--blue);color: white;box-shadow: inset 0 1px 0 rgba(255,255,255,.15)}
.togglePill:has(input:checked):hover {background: var(--blue-hover)}
.togglePill input:checked + .checkCircle {border-color: rgba(255,255,255,.6);background: rgba(255,255,255,.15)}
.togglePill input:checked + .checkCircle::after {transform: translate(-50%, -50%) scale(1);background: white}
.togglePill:active {transform: scale(.98)}

/* Dialog Styling */
dialog {border: none;border-radius: 16px;padding: 0;width: 500px;max-width: 90%}
dialog::backdrop {background: rgba(0,0,0,.4);backdrop-filter: blur(3px)}
.backdrop {position: fixed;inset: 0;background: rgba(0,0,0,0.8);z-index: 99}
.sheetbackdrop {position: fixed;inset: 0;background: rgba(0,0,0,0.1);z-index: 9999; cursor: no-drop}
.dialogContent {padding: 2rem}
.dialogContent h2 {margin-top: 0}

.pg_dialog {position: fixed;padding-top: 45px !important;background-color: #fff;overflow-y: auto;-webkit-overflow-scrolling: touch;padding: 15px;z-index: 10;  top: 5%;width: 50%;min-width: 400px;left: 20%;box-shadow: 2px 2px 5px rgba(0,0,0,.8);display: none;border-radius: 5px;margin: 0; z-index: 100; max-height: 90vh}
.pg_dialog input, .pg_dialog select {display: block; width: 100%; 	padding: 5px;font-size: 1.02em;font-weight: bold}
.pg_dialog .titlebar {line-height: 0;font-weight: bold;left: 0;border-radius: 3px 3px 0 0;position: absolute;top: 0;padding: 15px;width: 100%;cursor: all-scroll;background-color: var(--blue);height: 30px;font-size: 14px;border-bottom: 1px solid var(--blue);color: #fff}
.pg_dialog .titlebar.cta {background-color: #d00 !important}
.pg_dialog .pg_placard {margin-top: 20px;width: 100%;display: flex;gap: 1rem; justify-content: flex-end;padding: 12px 0;border-top: 1px solid gray}
.pg_dialog .pg_toolbar { /*border-bottom: 1px solid gray; */ margin-bottom: 12px}
.pg_dialog .pg_toolbar .controlRow{margin: 0}
.pg_dialog .togglePill {padding: 0.5rem}
.pg_dialog .togglePill input {display: none}
.pg_dialog .pg_content.pg_flex {display: flex; justify-content: space-between; gap: 1rem}
.pg_dialog .dial_left {width: 60%}
.pg_dialog .dial_right {width: 40%}
.pg_dialog .projectList {margin-top: 8px}
.pg_listframe{position: relative; /*min-height: 80px*/}
.pg_listframe .sk-fading-circle{top: 0; margin: 0}
/*Sheet Style*/
.pg_sheet {display: none;background-color: #fff;z-index: 10000;top: 5%;width: 20%;min-width: 200px;left: 20%;box-shadow: 1px 1px 3px rgba(0,0,0,.2);position: absolute;padding: 15px;border: 1px solid #666;border-radius: 8px;transform: translateX(-8px) translateY(32px);}
.pg_sheet::before {content: "";position: absolute;width: 12px;height: 12px;background: #fff;border-left: 1px solid #666;border-top: 1px solid #666;top: -6px;left: 16px;box-shadow: -1px -1px 2px rgba(0,0,0,.1);transform: rotate(45deg);}


/*TabPanel*/
.pg_dialog .pg_tabpanel {display: flex;border-bottom: 1px solid gray;margin-bottom: 12px;height: 35px;padding-top: 6px}
.pg_dialog .pg_tabpanel .pg_tabBtn {border: 1px solid var(--blue);padding: 5px 12px;border-radius: 6px 6px 0 0;margin-bottom: -1px;margin-right: 8px;background-color: #f0f3f5; position: relative}
.pg_tabBtn:disabled {opacity: 0.5;cursor: not-allowed;background-color: #ccc;color: #666;}
.pg_tabBtn:disabled:hover {background-color: #ccc;}
.pg_tabBtn:active {background-color: #ddd;transform: scale(0.98);}
.pg_dialog .pg_tabpanel .pg_tabBtn.active {background-color: var(--blue);box-shadow: 2px 2px 5px #b2b2b2;color: white;}

/* Input, Select, Textarea*/
.pg_txtfieldgroup {display: flex;margin: 0;gap: 1em}
.pg_txtfield, .pg_txtarea {margin: 8px 0;}
.pg_txtfield label, .pg_txtarea label, .pg_selectfield label {font-size: 0.75em;display: block}
.pg_selectfield {width: 49%}
.pg_combofield{width: 26px; position: absolute; right: 0;top: 12px; height: 33px;}
.pg_multiselectfield {width: 100%}
.pg_txtarea textarea {height: 150px; width: 100%; display: block;resize: vertical;min-height: 50px;font-family: inherit;padding: 5px;font-size: inherit;}
.pg_subline {font-size: 0.75em;font-weight: inherit;margin-top: 12px;}

/* Push Buttons */
.pushbtn{border: 1px solid var(--blue);padding: 6px 16px;border-radius: 5px;font-weight: bold;color: var(--blue);background-color: #f0f3f5}
.pushbtn.cta{background-color: var(--blue);color: var(--white)}
.pushbtn:hover{background-color: var(--blue-hover);color: var(--white);}
.pushbtn.ctc {position: absolute;left: 15px;color: red;}
.pushbtn.ctc:hover{background: red,color: black}

/* Listenansicht */
.pg_tableview {max-height: 460px; overflow-y: auto;/*border-bottom: 1px dashed #666;*/border-bottom: 1px solid #0f5b78;}
.pg_tableview .listitem {padding: 8px; max-height: 160px; overflow-y: hidden; position: relative;}

.pg_tableview:nth-child(even) {background: #f0f3f5}
.pg_tableview .listitem.clickable button {padding: 8px; display: block;width: 100%;text-align: left;border-radius: 10px;border: 1px solid transparent}
.pg_tableview .listitem.clickable button span {display: block}
.pg_tableview .listitem.clickable.disabled {cursor: not-allowed;}
.pg_tableview .listitem.clickable.selected button {background-color: var(--blue); color: #fff}
.pg_tableview .listitem.clickable button:hover {background: #f5f5f5;border-color: #ddd;box-shadow: 0 1px 3px rgba(0, 0, 0, .05)}

.pg_tableview.nomaxItemHeight, .pg_tableview.nomaxItemHeight .listitem, .pg_tableview.nomaxItemHeight .pg_smalllistItem {height: auto; max-height: initial}

.pg_tableview .listitem  .SelectCheck {position: absolute; top: 2px; left: 2px; width: calc(100% - 6px); height: calc(100% - 2px); border: 2px solid var(--blue);border-radius: 4px}
.pg_tableview .listitem  .SelectCheck input {opacity: 0}
.pg_tableview .listitem  .SelectCheck:hover {background: rgb(21 119 157 / 26%); cursor: pointer}
.pg_tableview .listitem  .SelectCheck:has(input:checked) {background: rgb(21 119 157 / 56%); border: 3px solid red}

/*
.pg_tableview .listitem  .SelectCheck
{
position: absolute;
    bottom: 17px;
    left: 17px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--blue);
} 
*/