/*
#ff572260    Itemhovers

Geel  / Notities: #b69c4d
Zalm  / Persoon: #d47070
Blauw / Website #4d8ab6

*/

/* ===========================
Header Search
=========================== */
.header-search-wrapper {
    position: relative;
    float: left;
    margin-left: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#headerMoneybirdToggle {
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: 0.45;
}

#headerMoneybirdToggle.active {
    opacity: 1;
}

#headerSearchInput {
    min-height: 25px;
    padding: 5px 12px;
    border-radius: 4px;
    border: 1px solid #00000050;
    background: #00000050 url('../img/zoeken.svg') no-repeat right 10px center;
    background-size: 12px 12px;
    color: #eee;
    width: 220px;
    font-size: 14px;
}

#headerSearchInput.moneybird-mode {
    border: 1px solid #8BC34A50;
    background: #00000050 url('../img/zoeken.svg') no-repeat right 36px center;
    background-size: 12px 12px;
}

#headerSearchInput:focus {
    outline: none;
    border: 1px solid #8BC34A25;
    background: #8BC34A50 url(../img/zoeken.svg) no-repeat right 10px center;
}

#headerSearchResults {
    display: none;
    position: absolute;
    top: 36px;
    left: 0;
    width: 350px;
    background: #222;
    border: 1px solid #444;
    border-top: none;
    max-height: 500px;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.header-search-item {
    padding: 8px 12px;
    border-bottom: 1px solid #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-search-item:hover {
    background: #333;
}

.header-search-title {
    color: #eee;
    font-size: 16px;
    font-weight: 500;
}

.header-search-type-website .header-search-title {
    text-transform: lowercase;
}

.header-search-subtitle {
    color: #aaa;
    font-size: 14px;
}

.header-search-subtitle.mb-amount-paid {
    color: #4caf50;
}

.header-search-subtitle.mb-amount-late {
    color: #f44336;
}

.website-note-date {
    font-size: 11px;
    color: #00000070;
}

.website-note-date.is-done {
    opacity: 0.6;
}

.website-note-title {
flex: 1;
cursor: pointer;
}

.website-note-title.is-done {
text-decoration: line-through;
opacity: 0.6;
}

.website-note-icon.is-done {
filter: invert(65%) sepia(26%) saturate(1136%) hue-rotate(60deg) brightness(96%) contrast(87%);
opacity: 1;
}

.muted-small {
font-size: 12px;
color: #666;
text-align: center;
width: 100%;
font-style: italic;
display: block;
}

.muted-small.is-error {
color: #f44336;
}

.header-search-msg {
    padding: 10px;
    color: #888;
}

.header-search-error {
    padding: 10px;
    color: red;
}

.header-search-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.header-search-content {
    flex: 1;
}

.header-search-type-contact img {
    filter: invert(58%) sepia(25%) saturate(801%) hue-rotate(314deg) brightness(91%) contrast(88%);
}

.header-search-type-notitie img {
    filter: invert(65%) sepia(37%) saturate(510%) hue-rotate(8deg) brightness(92%) contrast(90%);
}

.header-search-type-website img {
    filter: invert(52%) sepia(20%) saturate(846%) hue-rotate(170deg) brightness(92%) contrast(88%);
}


/* ===========================
Popup Overlay + Wachtwoord Box
=========================== */

/* Popup overlay */
#pwOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: flex;
justify-content: center;
align-items: center;
z-index: 999999;
}

/* Popup venster */
#pwBox {
background: #1b1b1b;
padding: 25px;
border-radius: 10px;
text-align: center;
width: 300px;
border: 1px solid #2a2a2a;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

/* Titel */
#pwBox h3 {
margin: 0 0 12px 0;
font-size: 16px;
color: #fff;
}

/* Input */
#pwBox input {
width: 90%;
padding: 10px;
margin-bottom: 12px;
background: #111;
border: 1px solid #2a2a2a;
border-radius: 8px;
color: #e5e5e5;
}

/* Button */
#pwBox button {
width: 95%;
padding: 10px;
background: #2a2a2a;
border: 1px solid #3a3a3a;
border-radius: 8px;
color: #ddd;
cursor: pointer;
}

#pwBox button:hover {
background: #343434;
}


/* ===========================
Default Trae Style
=========================== */

body {

font-family: Arial;
margin: 0;
background: #1c1c1c;
color: #bfbfbf;
font-size: 15px;
padding-top: 65px;
padding-bottom: 50px;
}

header {

background: #2b2b2b;
border-bottom: 1px solid #444444;
position: fixed;
top: 0px;
width: 100%;
height: 55px;
z-index: 100;
padding-top: 5px;
}

header button {

padding: 6px 10px !important;	
}

h1 {
font-size: 18px;
margin: 0 12px 0 0;
color: #fff;
}

#logo img {

width: auto;
height: 30px;
margin-right: 10px;	
margin-left: 4px;
}

#klok {

margin-top: 2px;
margin-right: 10px;	
font-size: 18px;	
}

#menuswitch {

margin-top: -9px;	
margin-right: 5px;
width: auto;
height: 42px;
filter: invert(1) brightness(2);
}

/* THEME SWITCH */
.switch { position: relative; display: inline-block; width: 50px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    transition: .4s; 
    border-radius: 34px; 
    border: 1px solid #F7F7F770;
 }

.slider:before { 
    position: absolute; 
    content: ""; 
    height: 18px; 
    width: 18px; 
    left: 2px; 
    bottom: 2px; 
    background-color: white; 
    transition: .4s;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    background-image: url('../img/zon.svg');
}
input:checked + .slider { background-color: #333333; }
input:focus + .slider { box-shadow: 0 0 1px #7F7F7F; }
input:checked + .slider:before { 
    transform: translateX(26px); 
    background-image: url('../img/maan.svg');
}

button {

background: transparent;
color: #ddd;
border: 0px;
padding: 5px 5px;
cursor: pointer;
}

button:hover {
background: #343434;
}

.btn_toevoegen {
background: transparent;
border: 1px solid #7F7F7F;
border-radius: 25px;
min-width: 150px;
text-align: center;
padding: 6px 34px;
color: #7F7F7F;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}

.btn_toevoegen:hover {
background: transparent;
}

.btn_toevoegen > img.controls {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
}

.wrap {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
padding: 16px;
}

#topbar {
display: flex;
gap: 20px;
align-items: start;
flex-wrap: wrap;
}

#wrap {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.page-loading #wrap {
  opacity: 0;
  transform: translateY(6px);
}
@media (prefers-reduced-motion: reduce) {
  #wrap {
    transition: none;
  }
  html.page-loading #wrap {
    transform: none;
  }
}

.column {
flex: 1;
min-width: 300px;
display: flex;
flex-direction: column;
gap: 20px;
}

.card {
background: #191919;
border: 1px solid #151515;
border-radius: 10px;
overflow: hidden;
}

#card-email,
#card-telefoon {
  min-height: var(--top-widgets-min-height, auto);
}

.card h2 {
font-size: 16px;
margin: 0;
padding: 10px 12px;
border-bottom: 1px solid #2a2a2a;
color: #6f6f6f;
background-color: #00000020;
}

.daily-checks-play {
	float: right;
	margin-top: 2px;
}

.card.dragging {
  opacity: 0.5;
  border: 1px dashed #666;
}

.list {
}

.bodem-lijst {

width: 100%;
height: 30px;
position: sticky;
bottom: 0px;
z-index: 100;
float: left;
background: linear-gradient(to top, #1c1c1c, transparent);
user-select: none;
}

.item {
display: flex;
gap: 10px;
padding: 10px 12px;
border-bottom: 1px solid #222;
}

.item:last-child {
border-bottom: none;
}

.naam-lc {
text-transform: lowercase;
}

.naam-lc::first-letter {
text-transform: uppercase;
}

.sub {
color: #9aa0a6;
font-size: 12px;
word-break: break-all;
}

.name {
color: #e5e5e5;
}

.mono {
font-family: ui-monospace, Consolas, monospace;
font-size: 12px;
color: #cbd5e1;
}

.facturen-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.facturen-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}

.facturen-header-actions {
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}

.facturen-header-link {
padding: 6px 10px;
border: 1px solid #2a2a2a;
border-radius: 8px;
font-size: 14px;
}

.facturen-header-btn {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #2a2a2a;
border-radius: 8px;
background: transparent;
}

.facturen-header-btn.loading img {
animation: spin 1s linear infinite;
}

.facturen-header-btn.loading {
opacity: 0.85;
}

.facturen-title-suffix {
font-weight: normal;
}

.facturen-days-toggle {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: inherit;
font: inherit;
opacity: 0.8;
}

.facturen-days-toggle.is-active {
opacity: 1;
text-decoration: underline;
}

.facturen-days-sep {
opacity: 0.6;
margin: 0 4px;
}

.facturen-row {
    width: 100%;
}

.facturen-row-2col {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.facturen-row-2col > .card {
    flex: 0 0 calc(50% - 10px);
    min-width: 360px;
}

@media (max-width: 980px) {
    .facturen-row-2col {
        flex-direction: column;
    }
    .facturen-row-2col > .card {
        flex: 0 0 100%;
        min-width: 0;
    }
}

.facturen-list .item.is-clickable {
    cursor: pointer;
}

.facturen-list .item.is-clickable:hover {
    border-radius: 3px;
    background-color: #ff572240;
}

.facturen-amount {
    color: #f44336;
    font-weight: 700;
    min-width: 120px;
}

.facturen-main {
    flex: 1;
    min-width: 0;
}

.facturen-tag {
    margin-left: 8px;
}

.facturen-days {
    min-width: 95px;
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}

a {

color: #bfbfbf;
text-decoration: none;
}

a:hover {
text-decoration: none;
}

.header-add {
	position: relative;
	display: flex;
	align-items: center;
}

.header-add::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 10px;
}

.header-add-btn {
	background: transparent !important;
	border: 0;
	padding: 0px !important;
	line-height: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
}

.header-add-menu {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	background: #191919;
	border: 1px solid #2a2a2a;
	border-radius: 10px;
	padding: 6px;
	min-width: 190px;
	z-index: 10000;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.header-add:hover .header-add-menu,
.header-add.open .header-add-menu {
	display: block;
}

.header-add-item {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #e5e5e5;
	text-decoration: none;
	cursor: pointer;
	font-size: 14px;
	font-family: inherit;
	text-align: left;
}

.header-add-item:hover {
	background: #2a2a2a;
	text-decoration: none;
}

.svg-witmaken {

/* Door te inverteren vanaf de standaard svgkleur zwart*/
filter: invert(1) brightness(2) !important;	
}

/* Websites */

.websites-layout {
display: flex;
gap: 20px;
}

.websites-list-panel {
min-width: 300px;
max-width: 300px;
flex: 0 0 300px;
float: none;
position: sticky;
top: 20px;
height: calc(100vh - 100px);
overflow-y: auto;
overflow-x: hidden;
padding-right: 15px;
}

.websites-details-panel {
flex: 1;
min-width: 0;
float: none;
padding-left: 0;
}

.websiteItem--row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}

.website-filterbar {
display: flex;
align-items: stretch;
margin-bottom: 10px;
border-bottom: 1px solid #7f7f7f70;
}

.website-filterbar__item {
flex: 1;
background: transparent;
border: 0;
padding: 12px 0;
cursor: pointer;
text-align: center;
color: #9a9a9a;
}

.website-filterbar__item.is-active {
box-shadow: inset 0 -2px 0 #bfbfbf;
}

.website-filterbar__icon {
display: inline-block;
margin-top: 2px;
}

.website-filterbar__count {
display: block;
margin-top: 6px;
font-size: 34px;
line-height: 34px;
font-weight: bold;
color: #bfbfbf;
}

.website-filterbar__item.is-active .website-filterbar__icon {
opacity: 1;
}

.website-filterbar__item.is-active .website-filterbar__count {
opacity: 1;
}

.website-filterbar__count--prio {
color: #ff0000;
}

.website-filterbar__count--actief {
color: #b69c4d;
}

.website-filterbar__count--factureren {
color: #d47070;
}

.website-filterbar__divider {
width: 1px;
background: #7f7f7f70;
margin: 10px 0;
}

.website_topper {

width: 100%;
float: left;
margin-bottom: 15px;	
min-height: 25px;
line-height: 25px;
background: #00000020;
padding: 10px 15px;
border-radius: 3px;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 25px;
row-gap: 6px;
}

.website_topper_left,
.website_topper_right {
display: grid;
grid-template-rows: auto auto;
row-gap: 6px;
min-width: 0;
}

.website_topper_left_top {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
min-width: 0;
}

.website_topper_left_top h3 {
float: none;
min-width: 0;
}

.website-open-link {
margin-right: 5px;
}

.website-open-icon {
margin-bottom: -7px;
margin-left: -3px;
}

.website-topper-adres {
margin-left: -12px;
}

.website-adres-title {
font-weight: bold;
font-size: 1.17em;
}

.website-admin-link {
display: inline-flex;
align-items: center;
margin-left: 10px;
transform: translateY(4px);
}

.check-status {
margin-top: 5px;
margin-bottom: 15px;
padding: 8px;
background: #222;
border-radius: 4px;
display: inline-block;
}

.check-status__item {
text-decoration: none;
font-weight: bold;
font-size: 12px;
}

.check-status__item.is-unknown {
color: #9e9e9e;
}

.check-status__item.is-ok {
color: #4caf50;
}

.check-status__item.is-bad {
color: #f44336;
}

.check-status__edit {
cursor: pointer;
font-size: 12px;
}

.check-status__meta {
font-size: 10px;
color: #666;
margin-bottom: 10px;
}

.moneybird-icon {
width: 20px !important;
height: 20px !important;
margin-top: 2px;
margin-left: 5px;
}

.mainwp-status-anchor {
display: inline-flex;
align-items: center;
margin-left: 5px;
}

.mainwp-status-icon {
width: 20px !important;
height: 20px !important;
margin-top: 2px;
}

.website-topper-action-icon {
width: 20px !important;
height: 20px !important;
margin-top: 2px;
margin-left: 5px;
opacity: 0.4;
}

.website-topper-action-icon--danger {
filter: invert(21%) sepia(93%) saturate(7480%) hue-rotate(356deg) brightness(94%) contrast(117%);
}

.website_toegang--padded {
padding: 0 15px;
}

.website-details__pad {
padding: 0 15px;
}

.website-detail-placeholder {
margin-bottom: 15px;
}

.ftp-test-row {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

.ftp-test-btn {
padding: 4px 8px;
font-size: 12px;
}

.ftp-test-result {
font-size: 12px;
color: #bbb;
}

.ftp-test-display__icon {
vertical-align: -2px;
}

.ftp-test-display.is-ok {
color: #4caf50;
}

.ftp-test-display.is-bad {
color: #f44336;
}

.contact-person-search-wrapper,
.contact-website-search-wrapper {
display: none;
position: relative;
width: 100%;
margin-top: 10px;
}

.contact-person-search-input,
.contact-website-search-input {
width: 100%;
min-height: 25px;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid #00000075;
background: #00000050 url('../img/zoeken.svg') no-repeat right 10px center;
background-size: 12px 12px;
color: #eee;
font-size: 14px;
}

.contact-person-search-results,
.contact-website-search-results {
display: none;
position: absolute;
top: 38px;
left: 0;
right: 0;
background: #222;
border: 1px solid #444;
border-top: none;
max-height: 260px;
overflow-y: auto;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

.contact-person-search-company {
color: #666;
font-size: 11px;
}

.contact-website-search-item {
padding: 8px 12px;
}

.contact-website-search-item--clickable {
cursor: pointer;
}

.contact-website-search-subtitle {
color: #666;
font-size: 11px;
}

.website-contact-persons-list {
margin-top: 10px;
}

.contact-person-row__main {
flex: 1;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}

.contact-person-row__actions {
display: flex;
align-items: center;
gap: 10px;
}

.contact-person-row__action-icon {
cursor: pointer;
}

.website_topper_right_top {
display: flex;
justify-content: flex-end;
gap: 10px;
align-items: center;
}

.website_topper_right_bottom {
display: flex;
justify-content: flex-end;
}

.website_topper .aanmaak_datum {
display: flex;
align-items: center;
gap: 8px;
}

.aanmaak_datum {

font-size: 12px;
color: #7F7F7F;    
}

.aanmaak_datum img {

margin-left: 6px;    
}

.website_topper .statussen {
display: flex;
align-items: center;
gap: 8px;
}

.website_topper .statussen img {
width: 20px !important;
height: 20px !important;
}

.website_topper .statussen .icon {
display: inline-block;
}

.website_topper select {
align-self: center;
}

@media (max-width: 950px) {
	.website_topper {
		grid-template-columns: 1fr;
	}
	.website_topper_right_top,
	.website_topper_right_bottom {
		justify-content: flex-start;
	}
}

.website_topper select {

background-color: transparent; 
border: 0px;
margin-top: -3px;   
}

.website_topper h3 {

float: left;
margin: 0px;
margin-top: -1px;
padding: 0px;
margin-right: 15px;
text-transform: uppercase;
font-size: 13px;
}

.website_topper .aanmaak_datum {

}

.website_topper .dropdown {

margin-right: 10px;
}

/* Home */

/* mannensport widget */
.ms-stats-table { width:100%; border-collapse:collapse; margin-bottom:15px; font-size:13px; }
.ms-stats-table th { text-align:left; color:#7F7F7F70; padding:12px 12px 6px 12px; font-weight:normal; font-size:12px; letter-spacing:0.5px; text-transform:uppercase; }
.ms-stats-table th.ms-colhead { text-align:center; }
.ms-stats-table th.ms-rowhead { width: 42%; }
.ms-stats-table td { padding:8px 12px; border-bottom:1px solid #2a2a2a; color:#9a9a9a; }
.ms-stats-table td:not(:first-child) { text-align:center; }
.ms-stats-table td.ms-row-label { color:#7F7F7F70; font-size:12px; letter-spacing:0.5px; text-transform:capitalize; }

.ms-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; padding:0 12px 12px 12px; }
.ms-box { padding:10px 0; border-radius:4px; }
.ms-section-label { margin:0 0 8px 0; font-size:12px; color:#7F7F7F70; font-weight:normal; text-transform:capitalize; }
.ms-list { list-style:none; padding:0; margin:0; font-size:13px; }
.ms-list li { padding:6px 12px; border-bottom:1px solid #333; color:#9a9a9a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 25ch; }
.ms-list li:last-child { border-bottom:none; }
.ms-list small { color:#666; font-size:11px; margin-left:5px; }
#website_alerts_list {
padding: 0;
}

#website_alerts_list .item {
display: block;
padding: 5px 12px;
}

.monitoring-name a {

text-transform: lowercase;
}

.monitoring-name a::first-letter {

text-transform: uppercase !important;    
}

.home-controle-topinfo {
	
display:flex; 
justify-content:space-between; 
font-size:0.8em; 
align-items:center; 
padding: 10px 12px;	
}

.home-controle-resultaat {

float: left;
width: 100%;
clear: both;
font-size: 12px;
margin-left: 25px;	
}

.werk-grid {
display: flex;
justify-content: space-between;
text-align: center;
padding: 10px 0;
}

.werk-item {
flex: 1;
cursor: pointer;
padding: 10px;
border-right: 1px solid #444;
}

.werk-item:last-child {
border-right: none;
}

.werk-item .label {
font-size: 13px;
color: #aaa;
margin-bottom: 10px;
}

.werk-item .value {
font-size: 26px;
font-weight: bold;
}

.werk-item .value-active {
    color: #bcb042 !important;
}

.werk-item .value-prio {
    color: #ff0031 !important;
}

.werk-item .value-factureren {
    color: #e05f8b !important;
}

.card.email .name {

cursor: pointer;	
}

/* PAGE WEBSITES */

.item-contactpersonen,
.item-notities,
.item-websites {

display:flex; 
align-items:center; 
gap:10px; 
padding: 8px 10px;
border-radius: 3px;
color: #FFF;
margin-bottom: 5px;  
}

.item-contactpersonen img,
.item-notities img,
.item-websites img {

filter: invert(1) brightness(2);    
}

.item-contactpersonen {

background-color: #d47070;
}

.item-notities {
 
background-color: #b69c4d;
}

.item-websites {

background-color: #4d8ab6;
}

.website-star-list-icon {
width: 16px;
height: 16px;
opacity: 0.2;
cursor: pointer;
flex-shrink: 0;
}

.website-star-list-icon:hover {
opacity: 0.6;
}

.website-star-list-icon[data-value="1"] {
    filter: invert(84%) sepia(27%) saturate(1007%) hue-rotate(15deg) brightness(93%) contrast(89%);
    opacity: 1;
}

.bedrijf-inline {
font-size:11px;
white-space:nowrap;
}

/* Linker lijst kleurcoderingen */
.prio-1 { background:#ffb5b5 !important; }
.prio-2 { background:#ffe1a8 !important; }
.prio-3 { background:#fff7c2 !important; }

.abonnement-tag {
font-size:12px;
background:#ddd;
padding:2px 6px;
border-radius:4px;
margin-left:5px;
}

.websiteItem,
.contactItem {

text-transform: lowercase;
padding:10px; 
border-bottom: 1px solid #7f7f7f70; 
cursor:pointer;

transition: background-color 0.1s ease-out;
}

.websiteItem::first-letter,
.contactItem::first-letter {

    text-transform: uppercase !important;
}

.websiteItem.active,
.websiteItem.active:hover,
.contactItem.active,
.contactItem.active:hover {

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #ff572260;
}

.websiteItem--pinned {
margin-bottom: 8px;
}

.websiteItem:hover,
.contactItem:hover,
#emailList .item:hover,
.note-list .item:hover {

border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background-color: #ff572240;	
}

/* Inline edit visual */
.editable,
#telefoonsLine input {

padding:4px;
border:1px dashed transparent;
background-color: transparent !important;
}

#telefoonsLine input {

color: #333;
}

.editable:hover {
border:1px dashed #aaa;
cursor:text;
}

/* Dropdown styling */
.dropdown {
padding:3px;
}

#toggleButtons button {
margin-right:10px;
}

.statusIcon {

width: 22px;
cursor: pointer;
opacity: .3 !important;
transition: opacity 0.2s;
}

.statusIcon.active {

opacity: 1 !important;
}

.statusIcon:hover {
opacity: 1 !important;
}

/* Inactive state for Prio icon in buttons (prevent looking active/black) */
button:not(.active) img[src*="control-status-prio.svg"],
.btn-icon:not(.active) img[src*="control-status-prio.svg"] {
    opacity: 0.3;
    filter: none;
}

#detailsInner {

min-width: 600px;
margin-right: 20px;
}

.wp_gegevens, .ftp_gegevens, .hosting_gegevens {

margin-bottom: 20px;
}

.wp_gegevens {

color: #00bcd4;
}

.ftp_gegevens {

color: #CC0000;
}

.hosting_gegevens {

color: #8c219e;
}

.lab {
display: inline-block;
width: 90px;
color: #7F7F7F70;
font-size: 13px;
text-transform: uppercase;
margin-bottom: 15px;
font-weight: bold;
}

.section-divider {
position: relative;
margin: 35px 0 20px;
text-align: center;
}

.section-divider::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
transform: translateY(-50%);
background-color: #7F7F7F50;
}

.section-divider__inner {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 12px;
background-color: #1c1c1c;
color: #7F7F7F;
font-size: 13px;
text-transform: uppercase;
}

.section-divider__plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
background-color: transparent !important;
transition: transform 0.12s ease-out;
}

.section-divider__plus:hover {
background-color: transparent !important;
transform: scale(1.05);
}

.editable {
padding: 2px 5px;
}


.popupOverlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
display: none;
align-items:center;
justify-content:center;
z-index: 9999;
}
.popupBox {
padding:20px;
border-radius:8px;
width:300px;
text-align:center;
box-shadow:0 0 15px rgba(0,0,0,0.4);
}
.popupButtons button {
margin:10px;
padding:8px 16px;
cursor:pointer;
}

.btnYes {
background: #4caf50 !important;
color: #fff !important;
border: none;
}

.btnNo {
background: #f44336 !important;
color: #fff !important;
border: none;
}

/* PAGE CONTACTEN */

#telefoonsLine input {

color: #e5e5e5;	
}

/* PAGE EMAIL */

.item.gelezen .name {
opacity: 0.5;	
}

.item.gelezen:hover .name {
opacity: 1.0;	
}

#emailList .item {
display:flex;
gap:8px;
padding:8px;
border-bottom:1px solid #444;
align-items:center;
}

#emailList .name {
font-weight:600;
cursor:pointer;
}

#emailList .sub {
color:#999;
font-size:.9em;
}

.actions {
display:flex;
align-items:center;
}

.actions button {
margin-left:6px;
}

.refresh-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
padding-right: 26px;
}

.refresh-btn .spinner {
width:12px;
height:12px;
position:absolute;
right:8px;
opacity:0;
transition: opacity .2s;
filter: invert(1) brightness(2);
}

.refresh-btn.loading .spinner {
opacity:1;
animation: spin 1s linear infinite;
}

@keyframes spin {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}


.cl-item a { opacity: 0.6; color: #2196F3 !important; }
.cl-item a:hover { opacity: 1.0; }

/* POP-MODAL E-MAIL */

.modal {
    background: #222;
    color: #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,.5);
}

#emailModal { 

display:none; 
position:fixed; 
inset:0; 
z-index: 0; 
}

#emailModal.show { 

display:block; 
}

#emailModal .modal-header {

margin-bottom: 15px;	
margin-left: -25px;
margin-top: -25px;
background-color: #00000030;
padding: 10px 20px;
margin-right: -25px;
}


#emailModal .modal-backdrop { 

position:absolute; 
inset:0; 
background:rgba(0,0,0,.4); 

backdrop-filter: blur(5px);   
-webkit-backdrop-filter: blur(5px);
}

.modal-content {

margin-top: 15px;
}

#emailModal .modal { 

 
width:800px; 
max-width:90%; 
position: fixed;
left: 50%;
transform: translate(-50%, 100px);
background:#222; 
border-radius:8px; 
padding:25px; 
box-shadow:0 10px 25px rgba(0,0,0,.2); 
overflow: hidden;
}

#emailModalBody {

color: #F7F7F7;
}

#emailModalMeta {
    font-size: 13px;
    color: #7F7F7F;
    margin-top: 4px;
}

/* VISUELE SYNC AFTELLER */

#email-timer {
	
float: right;
background-color: #F000;
display: inline-block;
width: 50px;
height: 20px;

opacity: 0.3;
}

#email-timer:hover {
opacity: 1.0;	
}

.sync-block {
	
background-color: transparent;
width: 7px;
height: 20px;
padding: 0px;
margin-right: 2px;
float: right;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;

border: 1px solid #7f7f7f;
}

/* Copy & Edit functionality */
.editable-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Wanneer in edit modus, geen geel */
.value-display[contenteditable="true"]:hover,
.value-display.editing:hover {
    background-color: #333 !important;
    color: #fff !important;
    cursor: text;
}

.value-display[contenteditable="true"],
.value-display.editing {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px dashed #aaa;
    cursor: text;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.edit-trigger {
    display: inline-block;
    visibility: hidden;
    cursor: pointer;
    width: 17px !important;
    height: 17px !important;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.editable-container:hover .edit-trigger {
    visibility: visible;
}

.edit-trigger:hover {
    opacity: 1.0;
}

.edit-plus {
    display: none;
    cursor: pointer;
    position: relative;
    z-index: 3;
    pointer-events: auto;
    width: 14px !important;
    height: 14px !important;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.editable-container.is-empty .edit-plus {
    display: inline-block;
}

.editable-container.is-empty:hover .edit-trigger {
    visibility: hidden;
}

.edit-plus:hover {
    opacity: 1.0;
}

.editable-visit {
    cursor: pointer;
    width: 16px !important;
    height: 16px !important;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.editable-visit:hover {
    opacity: 1.0;
}

.sync-block.active {

background-color: #579b46;	
border-color: #579b4620;
}

/* Modal Button Styling */
.modal-actions button.btn-send,
.modal-actions button[type="submit"] {
    border: 2px solid #4caf50 !important; /* Groen */
}

.modal-actions button.btn-cancel,
.modal-actions button[id*="Cancel"] {
    border: 2px solid #f44336 !important; /* Rood */
}

#notitieModal input::placeholder,
#notitieModal textarea::placeholder,
#notitieModal select {
  color: #7F7F7F !important;
  opacity: 1;
}

#notitieModal .datepicker {
  position: absolute;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px;
  width: 250px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: none;
  z-index: 2000;
}

#notitieModal .datepicker table {
  width: 100%;
  border-collapse: collapse;
}

#notitieModal .datepicker th {
  text-align: center;
  font-weight: bold;
  padding-bottom: 4px;
}

#notitieModal .datepicker td {
  text-align: center;
  padding: 4px;
  cursor: pointer;
  border-radius: 4px;
}

#notitieModal .datepicker td:hover {
  background: #eee;
}

#notitieModal .datepicker .header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-weight: bold;
}

#notitieModal .datepicker .nav {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}

#notitieModal .datepicker .nav:hover {
  background: #eee;
}

#notitieModal .modal input,
#notitieModal .modal select,
#notitieModal .modal textarea {
  background-color: #222;
  color: #F7F7F7;
}

#btnNieuweNotitie { padding:8px 12px; cursor:pointer; }
#notitieModal { display:none; position:fixed; inset:0; z-index:1000; }
#notitieModal.show { display:block; }
#notitieModal .modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.4); }
#notitieModal .modal {
  display: block;
  position:relative; width:600px; max-width:90%; margin:60px auto; background:#333; border-radius:8px; padding:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.2);
}
#notitieModal .modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#notitieModal .modal-header h3 { margin:0; }
#notitieModal .modal-header #modalClose { font-size:20px; line-height:20px; padding:4px 8px; cursor:pointer; background:transparent; border:none; }
#notitieModal #notitieForm label { display:block; margin-top:10px; font-weight:600; }
#notitieModal #notitieForm input[type="text"], #notitieModal #notitieForm select, #notitieModal #notitieForm input[type="datetime-local"], #notitieModal #notitieForm textarea {
  width:100%; box-sizing:border-box; padding:8px; margin-top:4px;
}
#notitieModal .modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:16px; }
#notitieModal .modal-actions button { padding:8px 12px; cursor:pointer; }

#notitieModal .icon-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
#notitieModal .notitie-icon {
  width: 32px;
  height: 32px;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}
#notitieModal .notitie-icon:hover {
  opacity: 1.0;
  transform: scale(1.1);
}
#notitieModal .notitie-icon.selected {
  opacity: 1.0;
  padding-bottom: 2px;
}
#notitieModal .btn-icon.btn-plan-notitie {
  margin-left: auto;
  padding: 0;
}
#notitieModal .btn-plan-notitie img {
  width: 32px;
  height: 32px;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}
#notitieModal .btn-plan-notitie:hover img {
  opacity: 1.0;
  transform: scale(1.1);
}
#notitieModal .btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#notitieModal .btn-icon img {
  transition: all 0.2s ease;
}
#notitieModal .btn-icon.active img {
  opacity: 1;
  filter: none;
  transform: scale(1.1);
}

#pwaInstallBtn {
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.06);
}
#pwaInstallBtn:hover {
  background: rgba(255,255,255,0.12);
}

#emailModal #modalBtnRead.active img { content: url('/img/controls-check.svg'); opacity: 0.5; }

#emailModal #modalBtnReply img { opacity: 0.5; }
#emailModal #modalBtnReply:hover img { opacity: 1; }

#emailModal #modalBtnFlag.active img {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
  opacity: 1;
}
#emailModal #modalBtnFlag:not(.active) img { opacity: 0.5; }

#emailModal #modalBtnDelete img { opacity: 0.5; }
#emailModal #modalBtnDelete:hover img { opacity: 1; }

#emailModal #modalBtnEdit img { opacity: 0.5; }
#emailModal #modalBtnEdit:hover img { opacity: 1; }

#emailModal .modal-controls button {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#emailModal .modal-controls button:hover {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

/* Modal Success Animation */
@keyframes fadeOutRight {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.modal-success {
    background-color: #4caf50 !important;
    transition: background-color 0.3s ease;
}

.modal-fade-out {
    animation: fadeOutRight 0.5s forwards;
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    min-width: 250px;
    padding: 15px 20px;
    border-radius: 4px;
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.toast.show {
    opacity: 1;
    transform: translateY(0);
}
.toast.success { background-color: #4caf50; }
.toast.error { background-color: #f44336; }
.toast.info { background-color: #2196f3; }

.workflow-page {
    padding: 20px;
}

.workflow-card {
    padding: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.workflow-title {
    margin-bottom: 10px;
}

.workflow-subtitle {
    color: #aaa;
    margin-bottom: 15px;
}

.workflow-progress {
    margin-bottom: 18px;
}

.workflow-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    color: #ddd;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    pointer-events: none;
}

.workflow-progress-track {
    position: relative;
    background: #00000050;
    border-radius: 6px;
    overflow: hidden;
    height: 18px;
}

.workflow-progress-track::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 2px 3px 4px rgba(0, 0, 0, 0.6);
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    border-bottom: 1px solid #FFFFFF30;
}

.workflow-progress-bar {
    height: 100%;
    width: 0%;
    background: #4caf50;
    z-index: 1;
}

.workflow-section {
    margin-top: 18px;
    padding-top: 0;
    border-top: none;
}

.workflow-section-title {
position: relative;
    margin: 22px 0 12px;
    text-align: center;
    color: #7F7F7F50;
    text-transform: uppercase;
    font-size: 14px;
}

.workflow-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background-color: #7F7F7F50;
}

.workflow-section-title__inner {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 12px;
    background-color: #1c1c1c;
}

.workflow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}

.workflow-item--disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.workflow-checkbox {
    width: 19px;
    height: 19px;
    margin-top: 0;
    flex: 0 0 20px;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #3a3a3a;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    cursor: pointer;
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.15);
}

.workflow-item-label {
    color: #ddd;
    flex: 1;
}

.workflow-checkbox:checked {
    background: #65af4c;
    border-color: #65af4c;
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 16.2l-3.5-3.5-1.4 1.4L9 19 20.3 7.7l-1.4-1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
}

.workflow-checkbox:disabled {
    cursor: not-allowed;
}

.workflow-item input[type="checkbox"]:checked + .workflow-item-label {
    color: #65af4c !important;
}

.workflow-sucuri-btn {
    margin-left: auto;
    padding: 3px 10px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    color: #ddd;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
}

.workflow-sucuri-btn:hover {
    background: #343434;
}

.workflow-item--factureren .workflow-item-label {
    color: #e05f8b;
}

.workflow-factureren-btn {
    margin-left: auto;
    padding: 3px 10px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    color: #ddd;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
}

.workflow-factureren-btn:hover {
    background: #343434;
}

.workflow-factureren-btn--factureren {
    border-color: #e05f8b;
    color: #e05f8b;
}

.workflow-factureren-btn--gefactureerd {
    border-color: #65af4c;
    color: #65af4c;
}

.workflow-factureren-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.workflow-email-actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

#emailTemplateSelect {

margin-bottom: 10px;    
}

.workflow-email-btn {
    padding: 3px 10px;
    background: #2a2a2a;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    color: #ddd;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.workflow-email-btn:hover {
    background: #343434;
}

.workflow-hint {
    padding: 12px;
    border: 1px solid #444;
    background: #222;
    border-radius: 6px;
    color: #bbb;
    margin-bottom: 12px;
}

.workflow-error {
    color: #f44336;
}

.workflow-subtitle:empty {
    display: none;
}


.website-workflow-title {
    font-weight: bold;
    color: #ddd;
    margin-bottom: 6px;
}

.website-workflow-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.website-workflow-actions .wf-btn {
    padding: 8px 12px;
    background: #00000050 !important;
    border: 1px solid #00000080;
    color: #F7F7F7 !important;
}

.website-workflow-actions .wf-btn--factureren {
    border-color: #e05f8b;
    color: #e05f8b;
}

.website-workflow-actions .wf-btn--gefactureerd {
    border-color: #4caf50;
    color: #4caf50;
}

.website-workflow-actions .wf-btn--disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.website-workflow-actions .wf-btn--workflow-complete {
    border-color: #4caf50 !important;
    color: #4caf50 !important;
}

.website-workflow-actions .wf-btn--workflow-pending {
    color: #ddd !important;
}

.planner-day.voorbij {
    opacity: 0.5;
}