@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
:root {
    --departColor-a: hsla(0, 50%, 52%, 1);
    --departColor-b: hsla(60, 50%, 52%, 1);
    --departColor-c: hsla(192, 50%, 52%, 1);
    --departColor-d: hsla(156, 50%, 52%, 1);
    --departColor-e: hsla(240, 50%, 52%, 1);
    --departColor-f: hsla(36, 50%, 52%, 1);
    --departColor-g: hsla(180, 50%, 52%, 1);
    --departColor-h: hsla(48, 50%, 52%, 1);
    --departColor-i: hsla(132, 50%, 52%, 1);
    --departColor-j: hsla(216, 50%, 52%, 1);
    --departColor-k: hsla(264, 50%, 52%, 1);
    --departColor-l: hsla(288, 50%, 52%, 1);
    --departColor-m: hsla(24, 50%, 52%, 1);
    --departColor-n: hsla(72, 50%, 52%, 1);
    --departColor-o: hsla(168, 50%, 52%, 1);
    --departColor-p: hsla(252, 50%, 52%, 1);
    --departColor-q: hsla(84, 50%, 52%, 1);
    --departColor-r: hsla(276, 50%, 52%, 1);
    --departColor-s: hsla(96, 50%, 52%, 1);
    --departColor-t: hsla(12, 50%, 52%, 1);
    --departColor-u: hsla(108, 50%, 52%, 1);
    --departColor-v: hsla(228, 50%, 52%, 1);
    --departColor-w: hsla(120, 50%, 52%, 1);
    --departColor-x: hsla(144, 50%, 52%, 1);
    --departColor-y: hsla(204, 50%, 52%, 1);
    --departColor-z: hsla(300, 50%, 52%, 1);
    --toDayColor: hsla(212, 30%, 50%, 0.2);
    --fullDayColor: hsl(124, 87%, 37%);
    --halfDayColor: hsl(39, 100%, 50%);
    --sickDayColor: hsl(0, 60%, 40%);
    --schoolHolidayColor: hsla(130, 100%, 30%, 0.25);
    --schoolTimeColor: hsla(212, 46%, 22%, 0.8);
    --weekendColor: hsla(212, 16%, 17%, 0.7);
    --unpaidLeaveColor: hsl(212, 46%, 40%);
    --employeeColor: hsl(212, 15%, 14%);
    --adminColor: hsl(40, 100%, 40%);
    --itemBackgroundColor: hsl(212, 16%, 14%);
    --blackColor: hsl(212, 14%, 10%), #16191d;
    --whiteColor: hsl(212, 30%, 96%), #f2f5f8;
    --modalColor: hsla(212, 16%, 14%, 0.4);
    --overtimeColor: hsl(280, 85%, 50%);
    --schoolFreistellungColor: hsl(195, 53%, 69%);
    --specialLeaveColor: hsl(351, 100%, 76%);
    --homeOfficeColor: hsl(180, 80%, 32%);
    --entryColor: hsl(64, 70%, 50%);
    --errorColor: hsl(0, 50%, 52%);
    --signalColor: hsla(0, 50%, 52%, 1);
    --successColor: hsl(45, 100%, 65%);
    --lightColor: hsl(212, 20%, 98%);
    --textLightColor: hsl(212, 5%, 98%);
    --toolTextColor: color-mix(in srgb, var(--textLightColor) 50%, transparent);
    --textDarkColor: hsl(212, 5%, 10%);
    --placeHolder: hsl(212, 5%, 90%);
    --noticeColor: hsl(212, 21%, 60%);
    --darkColor: hsl(212, 21%, 27%);
    --backgroundColor: hsl(212, 26%, 30%);
    --accentColor: hsl(212, 90%, 50%);
    --darkAccentColor: hsl(140, 53%, 43%);
    --accentColorHover: hsl(212, 100%, 40%);
    --accentColor-b: hsl(212, 40%, 19%);
    --accentColor-new: hsl(101, 63%, 30%);
    --accentColor-b-Hover: hsl(212, 21%, 37%);
    --borderColor: hsla(212, 16%, 100%, 0.3);
    --borderColor-b: hsl(212, 16%, 40%);
    --htmlEditor: hsl(212, 46%, 20%);
    --smallOutline: 1px solid hsla(212, 16%, 100%, 0.5);
    /*=== TEAM ===*/
    --teamBoardHeight: 45vmin;
    --teamEditor: hsl(212, 40%, 19%);
    /*--boardRot: #b2072c;
    --boardOrange: #f56600;
    --boardGelb: #f0cc00;
    --boardGruen: #008f05;
    --boardTuerkis: #007e94;
    --boardBlau: #1f26ed;
    --boardViolett: #9917b0;
    --boardSchwarz: #1e2329;
    --boardWeiss: #ffffff;
    --boardGrau: #313c4c;*/
    --toolSize: 25px;
    --toolSizeMinus: -25px;
    --timeDisplayColor: hsla(92, 12%, 14%, 0.6);
    --toolBackground: hsl(212, 15%, 10%);
    --smallBorder: 0.5px solid hsla(212, 0%, 100%, 0.16);
    --smallBorderOff: 0.5px solid hsla(212, 0%, 100%, 0);
    --smallBorderHover: 0.5px solid hsla(212, 0%, 100%, 1);
    --shadow: none;
    /*--shadow: 0px 6px 8px -2px hsla(212, 16%, 5%, 0.2);*/
    --shadowBorder: 0.1vmin solid hsla(212, 30%, 5%, 0.2);
    --border: none;
    --shadowBevel: none;
    /*--shadowBevel: -0.5px -1px 1px hsla(212, 0%, 100%, 0.2), 0.5px 1px 1px hsla(212, 0%, 0%, 0.2);*/
    /*=== TEAM END ===*/
    --chatEditor: hsl(var(--chatFarbWinkel), 45%, 19%);
    --meBubbleColor: hsla(222, 36%, 39%, 0.4);
    --themBubbleColor: hsla(var(--chatFarbWinkel), 36%, 46%, 0.3);
    --clearButtonColor: hsla(var(--chatFarbWinkel), 36%, 30%, 1);
    --chatFarbWinkel: 165;
    --mixColor: hsla(212, 0%, 0%, 0);
    --fontFamily: Poppins, sans-serif;
    --fontSize: 1.1vmin;
    --textAlign: left;
    --buttonTextAlign: left;
    --calendarFontSize: 1.3vmin;
    --fontWeightLight: 200;
    --fontWeightMedium: 500;
    --fontWeightBold: 600;
    --borderRadius: 0.3vmin;
    --cornerSize: 2vmin;
    --spaces: 1vmin;
    --spacesMinus: -1vmin;
    --sides: 3vmin;
    --hauptFarbWinkel: 212;
    --colorMix: hsla(212, 30%, 80%, 1);
    --borderNew: 1px solid var(--accentColor);
    --borderLight: 1px solid hsla(0, 0%, 100%, 0.1);
    --borderEdit: 1px solid var(--darkAccentColor);
    --scrollBalkenBreite: 0.8vmin;
    --headerSpaceTop: 30vmin;
    --avatarSize: 21.8vmin;
    --allTransition: all .3s ease-in-out;
    --heightTransition: height .3s ease-in-out;
}

.node {}

body {
    font-family: var(--fontFamily);
    font-size: calc(var(--fontSize)*1);
    font-weight: var(--fontWeightLight);
    background-color: var(--backgroundColor);
    color: var(--textLightColor);
    margin: 0 auto 0 auto;
    overflow-y: auto;
    padding: 0;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*:focus {
    outline: none;
    background-color: color-mix(in srgb, var(--textDarkColor) 10%, transparent);
    border-radius: calc(var(--borderRadius)*2) !important;
}

::-webkit-scrollbar {
    width: var(--scrollBalkenBreite);
    height: var(--scrollBalkenBreite);
    z-index: 999999999;
}

::-webkit-scrollbar-track {
    background: hsla(212, 100%, 3%, 0.2);
    border-radius: var(--borderRadius);
    margin: 0.0vmin !important;
}

::-webkit-scrollbar-thumb {
    background: hsla(212, 100%, 90%, 0.3);
    border-radius: var(--borderRadius);
    z-index: 99999;
}

::-webkit-scrollbar-thumb:hover {
    background: hsla(212, 100%, 90%, 0.45);
}

::-webkit-scrollbar-thumb:active {
    background: hsla(212, 100%, 90%, 0.25);
}

::-webkit-resizer {
    background-color: #212d3b !important;
    background-image: url(img/rezsizer.svg)!important;
    background-size: contain;
    -webkit-background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

a {color: hsla(212, 50%, 42%, 1);}

.source-code-pro-<uniquifier> {
    font-family: "Source Code Pro", monospace;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

header {
    position: relative;
    width: 100%;
    height: var(--headerSpaceTop);
    margin: calc(var(--spaces) * 0) 0 calc(var(--spaces) * 1) 0;
    padding: calc(var(--spaces) * 1) calc(var(--spaces) * 4) calc(var(--spaces) * 1) calc(var(--spaces) * 4);
    background-color: var(--itemBackgroundColor);
}

.blanc {
    height: 100vh;
}

.design {
    min-height: 500px;
}

.kiada-button {
    background-color: var(--accentColor-b);
    background-image: url(img/kiada-turkis.svg);
    background-size: contain;
    -webkit-background-size: contain;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
}

button.disabled,
button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

#chatDeleteThread {
    display: none;
}

#toggleChatMode:hover+.chat-clear-inline {
    background-color: var(--lightColor) !important;
    color: var(--employeeColor);
}

#toggleChatMode+#chatDeleteThread.chat-clear-inline {
    position: static;
    inset: auto;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    background-color: var(--clearButtonColor);
    margin: calc(var(--spacesMinus)*3.0) 0 auto auto;
    font-size: calc(var(--fontSize)*2.6) !important;
    line-height: calc(var(--spaces) * 3.3);
    z-index: 3;
    width: calc(var(--spaces) * 4);
    height: calc(var(--spaces) * 3);
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0 !important;
}

.chat-area {
    margin-top: calc(var(--spacesMinus) * 12.1);
    margin-bottom: calc(var(--spaces) * 0.98);
    background-color: var(--chatEditor);
    padding: calc(var(--spaces) * 1);
    border-radius: var(--borderRadius);
    width: 100%;
    z-index: 2;
    background-image: url(img/chat-editor.svg);
    background-size: cover;
    -webkit-background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
}

#newsCenterFeedback {
    white-space: preserve nowrap;
    pointer-events: none;
    height: calc(var(--spaces) * 3);
    line-height: calc(var(--spaces) * 2.9);
    float: left;
    text-align: right;
    color: var(--successColor);
    font-weight: var(--fontWeightMedium);
    width: 100%;
    border: var(--border);
    border-radius: var(--borderRadius);
    margin: 0 calc(var(--spaces) * 1) 0 0;
    padding-right: var(--spaces);
}

.pinboard-msg .bubble .text,
.chat-msg .text {
    white-space: pre-line;
    font-size: calc(var(--fontSize) * 1.2);
    line-height: calc(var(--fontSize) * 1.6);
}

.chat-textarea {
    outline: none;
    width: 100%;
    padding: calc(var(--spaces) / 3) calc(var(--spaces) / 1) calc(var(--spaces) / 3) calc(var(--spaces) / 1);
    border-radius: var(--borderRadius);
    background-color: hsla(var(--chatFarbWinkel), 20%, 10%, 0.2);
    color: var(--textLightColor);
    font-family: var(--fontFamily);
    font-size: calc(var(--fontSize) * 1.1);
    font-weight: var(--fontWeightLight);
    cursor: text;
    appearance: none;
    margin: 0vmin 0vmin 0vmin 0vmin;
    border: none;
    overflow-y: auto;
}

.chat-list {
    height: 31.1vmin;
    overflow-y: auto;
    padding-right: calc(var(--spaces) * 1);
}

.chat-msg {
    display: flex;
    margin: calc(var(--spaces)*0.7) 0;
}

.chat-msg.me {
    justify-content: flex-end;
}

.chat-msg.them {
    justify-content: flex-start;
}

.chat-msg.them .bubble .meta,
.chat-msg.me .bubble .meta {
    display: flex;
    align-items: baseline;
    gap: calc(var(--spaces)*0.2);
    opacity: .9;
    min-width: 100%;
}

.chat-msg.me .bubble .meta {
    justify-content: flex-end;
    text-align: right;
}

.chat-msg.them .bubble .meta {
    justify-content: flex-start;
    text-align: left;
}

.chat-msg .bubble {
    max-width: 80%;
    min-width: 40%;
    color: var(--textLightColor);
    border: var(--border);
    box-shadow: var(--shadow);
}

.chat-msg.me .bubble {
    border-radius: calc(var(--borderRadius) * 13) calc(var(--borderRadius) * 1) calc(var(--borderRadius) * 6) calc(var(--borderRadius) * 1);
    background: var(--meBubbleColor);
    color: var(--textLightColor);
    padding: calc(var(--spaces)*0.8) calc(var(--spaces)*1.2) calc(var(--spaces)*0.9) calc(var(--spaces)*1.6);
}

.chat-msg.me .meta {
    text-align: right;
    opacity: .9;
    margin: calc(var(--spaces)*0.1) calc(var(--spaces)*0.6) calc(var(--spaces)*0.1) calc(var(--spaces)*0.1);
}

.chat-msg.them .bubble {
    border-radius: calc(var(--borderRadius) * 1) calc(var(--borderRadius) * 13) calc(var(--borderRadius) * 1) calc(var(--borderRadius) * 6);
    background: var(--themBubbleColor);
    color: var(--textLightColor);
    padding: calc(var(--spaces)*0.8) calc(var(--spaces)*1.6) calc(var(--spaces)*0.9) calc(var(--spaces)*1.2);
}

.chat-msg.them .meta {
    text-align: left;
    opacity: .9;
    margin: calc(var(--spaces)*0.1) calc(var(--spaces)*0.6) calc(var(--spaces)*0.1) calc(var(--spaces)*0.1);
}

.chat-input-row {
    display: grid !important;
    grid-template-columns: 1fr auto;
    margin-top: var(--spaces);
}

.chat-area {
    position: relative;
}

#chatDeleteThread.chat-clear {
    position: absolute;
    right: var(--spaces);
    bottom: calc(var(--spaces) * 4.2);
    z-index: 5;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 999px;
    background: var(--darkAccentColor);
    color: #fff;
    display: grid !important;
    place-items: center;
    cursor: pointer;
    opacity: .9;
    transition: transform .15s ease, opacity .15s ease;
}

#chatDeleteThread.chat-clear:hover {
    transform: scale(1.05);
    opacity: 1;
}

#chatDeleteThread.chat-clear:active {
    transform: scale(.97);
}

.message-adress-button.is-self button.tag-e-write.tag-e-write--list.magic-toggle {
    display: none;
}

body.chat-mode #employee-editor,
body.chat-mode #htmlArea {
    display: none !important;
}

body.chat-mode #chatArea {
    display: block !important;
}

.my-chat-btn.is-on {
    background-color: var(--chatEditor);
}

.message-adress-button.chat-active .chat-select {
    background-image: url(img/icon-chat-animate.svg) !important;
}

.message-adress-button.chat-active {
    background-color: var(--chatEditor);
}

.chat-select {
    width: calc(var(--spaces)*2);
    height: calc(var(--spaces)*2);
    border-radius: 50%;
    border: none;
    background: var(--employeeColor, var(--accentColor));
    margin-left: 6px;
    cursor: pointer;
    opacity: 1;
}

.chat-select:hover {
    opacity: 1;
}

@keyframes chatPulse {
    from {
        transform: scale(0.8);
        opacity: .4;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

#employeeContactList .chat-select.unread {
    animation: chatPulse 0.7s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

.message-adress-button.is-self {
    opacity: .55;
    filter: grayscale(0.15);
    cursor: not-allowed;
    pointer-events: none;
}

.message-adress-button.is-self .tag-select,
.message-adress-button.is-self .chat-select,
.message-adress-button.is-self .tag-e-write {
    display: none !important;
}

.message-adress-button.is-self.chat-active {
    box-shadow: none !important;
}

.kuschelmodus #employeeContactList .tag-e-write--list {
    display: none;
}

.kuschelmodus .employee-tag .tag-employee-mail {
    display: none;
}

body.chat-mode #sendMessages {
    background: var(--chatEditor);
}

.magic-area {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(.65, 0, .23, 1);
    margin: calc(var(--spaces) * 0.25) calc(var(--spacesMinus) * 0) calc(var(--spacesMinus) * 0) calc(var(--spacesMinus) * 0);
}

.news-center {
    outline: none;
    width: 100%;
    border-radius: var(--borderRadius);
    color: var(--textLightColor);
    font-family: var(--fontFamily);
    font-size: calc(var(--fontSize) * 1.1);
    font-weight: 200;
    padding: calc(var(--spaces)*1) calc(var(--spaces)*0) calc(var(--spaces)*1) calc(var(--spaces)*0);
}

.my-news-btn.is-closed:hover {
    background-image: url("img/icon-closed-hover.svg");
}

.my-news-btn.is-open:hover {
    background-image: url("img/icon-open-hover.svg");
}

.my-news-btn.is-open:active,
.my-news-btn.is-open {
    background-image: url("img/icon-open.svg");
}

.my-news-btn.is-closed:active,
.my-news-btn,
.my-news-btn.is-closed {
    background-image: url("img/icon-closed.svg");
}

.my-news-btn {
    min-width: 20.75vmin !important;
}

.fixed-box {
    position: fixed;
    right: 0;
    top: 45%;
    transform: translateY(-50%);
    width: calc(var(--spaces)*4.6);
    height: calc(var(--spaces)*3.2);
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.9s ease-in-out, visibility 0.9s ease-in-out;
    z-index: 100;
}

.fixed-box.is-visible {
    opacity: 1;
    visibility: visible;
}

#trigger-point {
    height: 1px;
    background-color: transparent;
}

#jumpToday {
    max-width: calc(var(--spaces)*3.4);
    position: fixed;
    right: calc(var(--spacesMinus)*0.4);
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transition: top .35s ease-out;
}

#jumpToday.is-attention {
    pointer-events: auto;
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

#jumpToday.is-hide {
    pointer-events: none;
    -webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-right {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes slide-out-right {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

#jumpToday.is-attention {
    -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(300px);
        transform: translateX(300px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

.day.today {
    z-index: 200;
    border-radius: calc(var(--borderRadius) * 1.2);
    outline: var(--outline);
    outline-offset: var(--outlineOffset);
}

.to-day-button {
    cursor: pointer;
    height: calc(var(--spaces) * 3);
    float: left;
    text-align: left;
    width: 100%;
    border: var(--border);
    border-radius: var(--borderRadius);
    margin: 0 calc(var(--spaces) * 1) 0 0;
}

#monthOverviewTable td.today {
    outline: var(--outline);
    outline-offset: var(--tableOutlineOffset);
    border-radius: var(--borderRadius);
    z-index: 200;
}

.active-tag {
    outline: var(--outlineTag);
    outline-offset: var(--outlineOffset);
    background-color: var(--employeeColor) !important;
}

.to-day-button:hover {
    background-image: url("img/icon-today-hover.svg");
}

.to-day-button:active,
.to-day-button {
    background-image: url("img/icon-today.svg");
}

.send-button.my-send-btn.is-busy:hover {
    background-image: url("img/icon-send-animate.svg")!important;
}

#sendReset:hover,
.new-save.is-dirty:hover {
    background-image: url("img/icon-send-animate-hover.svg")!important;
}

#sendReset:active,
.send-button.my-send-btn.is-busy:active,
.send-button.my-send-btn.is-busy {
    background-image: url("img/icon-send-animate.svg")!important;
}

.new-save:hover {
    background-image: url("img/icon-send-hover.svg")!important;
}

#sendReset,
.new-save:active,
.new-save {
    background-image: url("img/icon-send.svg")!important;
}

button#addEmployeeButton.new-save.is-dirty:active {
    color: var(--textLightColor) !important;
    background-color: var(--itemBackgroundColor) !important;
    background-image: url("img/icon-send-animate.svg")!important;
}

.new-save.is-dirty {
    background-image: url("img/icon-send-animate.svg")!important;
}

#sendMessages.send-button.my-send-btn.is-armed:hover {
    background-color: var(--textLightColor) !important;
    background-image: url("img/icon-chat-send-animate-hover.svg");
}

#sendMessages.send-button.my-send-btn.is-armed:active {
    background-color: var(--itemBackgroundColor) !important;
    background-image: url("img/icon-chat-send-animate.svg");
}

#sendMessages.send-button.my-send-btn:hover {
    background-color: var(--textLightColor);
    background-image: url("img/icon-chat-send-hover.svg");
}

#sendMessages.send-button.my-send-btn:active {
    background-color: var(--itemBackgroundColor);
    background-image: url("img/icon-chat-send.svg");
}

#sendMessages.send-button.my-send-btn {
    background-color: var(--adminColor);
    background-image: url("img/icon-chat-send.svg");
}

#sendMessages.send-button.my-send-btn.is-armed {
    background-color: var(--darkAccentColor) !important;
    background-image: url("img/icon-chat-send-animate.svg");
}

#btnCleanupNow:hover {
    background-image: url("img/icon-delete-hover.svg");
}

#btnCleanupNow:active,
#btnCleanupNow {
    background-image: url("img/icon-delete.svg");
}

#btnBackupNow:hover {
    background-image: url("img/icon-backup-hover.svg");
}

#btnBackupNow:active,
#btnBackupNow {
    background-image: url("img/icon-backup.svg");
}

.admin-save:hover {
    background-color: var(--textLightColor) !important;
    background-image: url("img/icon-save-hover.svg");
}

.admin-save:active {
    background-color: var(--itemBackgroundColor) !important;
    background-image: url("img/icon-save.svg");
}

.admin-save {
    background-color: var(--adminColor) !important;
    background-image: url("img/icon-save.svg");
}

.update:hover {
    background-image: url("img/icon-save-hover.svg");
}

.update:active,
.update {
    background-image: url("img/icon-save.svg");
}

#holidayRegion:hover {
    background-image: url("img/icon-to-option.svg");
}

#holidayRegion:active {
    background-image: url("img/icon-save.svg");
}

#holidayRegion {
    background-image: url("img/icon-place.svg");
}

#changePassword:hover {
    background-image: url("img/icon-password-hover.svg");
}

#changePassword:active {
    background-image: url("img/icon-password.svg");
}

#changePassword {
    background-image: url("img/icon-password.svg");
}

.tag-e-add.admin-only {
    background-position: calc(100% - 0.8vmin) calc(var(--spaces)*0.4) !important;
    background-image: url("img/icon-new-employee.svg");
}

#toLogin:hover,
.to-login:hover,
#employeeInvitation:hover,
.entry:hover {
    background-image: url("img/icon-entry-hover.svg");
}

#toLogin:active,
.to-login:active,
#employeeInvitation:active,
.entry:active {
    background-image: url("img/icon-entry.svg");
}

#toLogin,
.to-login,
#employeeInvitation,
.entry {
    background-image: url("img/icon-entry.svg");
}

.forgot:hover {
    background-image: url("img/icon-reset-hover.svg");
}

.forgot:active,
.forgot {
    background-image: url("img/icon-reset.svg");
}

.home:hover {
    background-image: url("img/icon-home-hover.svg");
}

.home:active,
.home {
    background-image: url("img/icon-home.svg");
}

.permit:hover,
#applyForLicense:hover {
    background-image: url("img/icon-permit-hover.svg");
}

.permit:active,
.permit,
#applyForLicense:active,
#applyForLicense {
    background-image: url("img/icon-permit.svg");
}

.isemployee:hover {
    background-image: url("img/icon-employee-hover.svg");
}

.isemployee:active,
.isemployee {
    background-image: url("img/icon-employee.svg");
}

.isemployee,
.admin-active,
.permit,
#applyForLicense,
.home,
#toLogin,
.to-login,
#toPortal,
#sendReset,
.forgot,
#employeeInvitation,
.entry,
.tag-e-add.admin-only,
#icon-new-employee,
#changePassword,
#holidayRegion,
.update,
.admin-save,
#btnBackupNow,
#btnCleanupNow,
#sendMessages.send-button.my-send-btn.is-armed,
#sendMessages.send-button.my-send-btn,
.new-save,
#addEmployeeButton,
.my-send-btn.is-busy,
.select-all-btn,
.my-template-btn,
.my-send-btn,
.my-news-btn {
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-size: calc(var(--spaces) * 2.4)!important;
    background-position: calc(100% - 0.8vmin) center;
}

.to-day-button {
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-size: calc(var(--spaces) * 2.4)!important;
    background-position: center !important;
}

.my-news-btn span,
.to-day-button span {
    float: left;
    color: var(--textLightColor);
}

.to-day-button:hover span,
.my-news-btn:hover span {
    color: var(--employeeColor);
}

.to-day-button:active span,
.my-news-btn:active span {
    color: var(--lightColor);
}

.my-news-btn.is-open:active,
.my-news-btn.is-open {
    background-color: var(--darkAccentColor);
}

.my-news-btn.has-unread.is-open:hover,
.my-news-btn.has-unread.is-closed:hover {
    position: relative;
    background-color: var(--lightColor) !important;
    color: var(--lightColor) !important;
    background-image: url("img/icon-unread-animate-hover.svg");
}

.my-news-btn.has-unread.is-open:active,
.my-news-btn.has-unread.is-open,
.my-news-btn.has-unread.is-closed:active,
.my-news-btn.has-unread.is-closed {
    position: relative;
    background-color: var(--employeeColor) !important;
    color: var(--lightColor) !important;
    background-image: url("img/icon-unread-animate.svg");
}

.my-news-btn.has-unread.is-open .toggle-label::after,
.my-news-btn.has-unread.is-closed .toggle-label::after {
    content: " – neu";
    opacity: .5;
}

.accent-button span,
.send-button span {
    float: left;
}

#employeeContactList .message-adress-button {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
}

#employeeContactList .message-adress-button {
    flex: 1 1 auto;
}

#employeeContactList .message-adress-button:nth-child(1) {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

#employeeContactList .message-adress-button:nth-child(2) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

#employeeContactList .message-adress-button:nth-child(3) {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
}

#employeeContactList .message-adress-button .tag-e-write {
    margin-right: var(--spaces);
    z-index: 1;
}

.message-adress-button>span {
    font-size: calc(var(--fontSize) * 1.1);
    width: 95%;
    min-width: 2vmin;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#employeeContactList {
    min-height: 40.20vmin;
    margin-top: calc(var(--spaces) * 0.4);
    overflow-y: scroll;
    overflow-x: hidden;
    padding: calc(var(--spaces) * 0) calc(var(--spaces) * 0.5) calc(var(--spaces) * 0.5) calc(var(--spaces) * 0.5);
}

.message-adress-button:hover {
    color: var(--darkColor);
    background-color: var(--lightColor);
}

.message-adress-button:hover>button.tag-select {
    color: var(--darkColor);
    background-color: var(--lightColor);
}

.message-adress-button:active,
.message-adress-button {
    cursor: default !important;
    cursor: pointer;
    height: calc(var(--spaces) * 3);
    text-align: left;
    line-height: calc(var(--fontSize) * 2.3);
    font-size: calc(var(--fontSize) * 1.2);
    font-weight: 200;
    width: 100%;
    padding: calc(var(--spaces) * 0.3) calc(var(--spaces) * 0.16)calc(var(--spaces) * 0.3)calc(var(--spaces) * 0.9);
    border-radius: 0 !important;
    margin: calc(var(--spaces) * 0.5) 0 calc(var(--spaces) * 0.5) 0;
    color: var(--textLightColor);
    background-color: var(--accentColor-b);
}

.message-adress-button.pulse-highlight {
    -webkit-animation: mc-pulse 2.6s ease 2;
    animation: mc-pulse 2.6s ease 2;
}

@keyframes mc-pulse {
    0% {
        box-shadow: 0 0 0 0 var(--employeeColor, rgba(255, 255, 255, 0.35));
        background-color: rgba(255, 255, 255, 0.04);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
        background-color: rgba(255, 255, 255, 0.06);
    }
    100% {
        box-shadow: none;
        background-color: transparent;
    }
}

.in-container {
    z-index: 1;
    opacity: 0;
    -webkit-animation: slide-in-bottom 0.6s cubic-bezier(0, 0, .01, 1) 800ms forwards;
    animation: slide-in-bottom 0.6s cubic-bezier(0, 0, .01, 1) 800ms forwards;
}

@-webkit-keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-in-bottom {
    0% {
        -webkit-transform: translateY(1000px);
        transform: translateY(1000px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

b {
    font-weight: var(--fontWeightMedium);
}

.panel-container {
    padding: calc(var(--spaces) * 0) calc(var(--spaces) * 4) calc(var(--spaces) * 1) calc(var(--spaces) * 4);
}

.site-container {
    padding: calc(var(--spaces) * 0) calc(var(--spaces) * 4) 0 calc(var(--spaces) * 4);
    margin: calc(var(--spaces) * 0) calc(var(--spaces) * 0) calc(var(--spaces) * 0) calc(var(--spaces) * 0);
}

.send-message {
    white-space: nowrap;
}

#registrationForm.fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.standart-input-new.edit {
    color: var(--textLightColor) !important;
}

.standart-input-new {
    -webkit-appearance: none;
    appearance: none;
}

.admin-only {
    display: block;
}

.kuschelmodus .admin-only {
    display: none !important;
}

.kuschelmodus #companyButton {
    visibility: hidden !important;
    opacity: 0;
    pointer-events: none;
}

.error-message {
    color: var(--signalColor);
    font-weight: var(--fontWeightLight);
    margin-top: var(--spaces);
    text-align: left;
}

.success-message {
    color: var(--successColor);
    font-weight: var(--fontWeightLight);
    margin-top: var(--spaces);
    text-align: left;
}

#feedback,
#resetFeedback,
#licenseFeedback {
    margin-top: var(--spaces);
    font-weight: var(--fontWeightLight);
}

#Report {
    display: block;
    color: var(--entryColor);
    margin-top: calc(var(--spaces) * 1);
}

#newEmployeeTrainingBox {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out;
}

#newEmployeeTrainingBox.show {
    opacity: 1;
    max-height: 100px;
}

.hide {
    visibility: hidden;
}

.show {
    visibility: visible;
}

#departmentTags,
#employeeTags,
.day select,
.day,
.accordion-content,
.new-accordion-content,
.edit-accordion-content,
.save-notification,
#saveNotification {
    -webkit-transition: var(--allTransition);
    -moz-transition: var(--allTransition);
    -ms-transition: var(--allTransition);
    -o-transition: var(--allTransition);
    transition: var(--allTransition);
}

.accordion {
    width: 100%;
    max-width: 100%;
    margin-bottom: var(--spaces);
}

.accordion-header {
    cursor: pointer;
    word-break: keep-all;
    font-size: var(--fontSize);
    background-color: var(--accentColor);
    color: var(--textLightColor);
    border-radius: var(--borderRadius) !important;
    border: none;
    white-space: nowrap;
    position: relative;
    padding: calc(var(--spaces) * 0.5) calc(var(--spaces) * 1) calc(var(--spaces) * 0.5) calc(var(--spaces) * 1) !important;
}

.accordion-content,
.new-accordion-content,
.edit-accordion-content {
    overflow: hidden;
    max-height: 0;
}

.active {
    display: block;
}

.hide {
    display: none;
}



.editor-htmlarea {
    width: 100%;
    /*height: 29.1vmin;*/
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fontSize);
    line-height: 1.5;
    color: var(--textLightColor);
    border-radius: 0 0 var(--borderRadius) var(--borderRadius);
    padding: var(--spaces);
    border: none !important;
    background-color: var(--htmlEditor);
    background-image: url("img/code.svg");
    background-size: cover;
    -webkit-background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
    overflow-y: auto;
}

input#newEmployeeEntryDate.standart-input-new.edit {
    color: #EEE;
}

.input-box-start {
    margin-top: calc(var(--spaces) * 0.5);
    width: 100%;
}

.input-box-top {
    margin-top: calc(var(--spaces) * 0.5);
    width: 100%;
}

.input-box-top {
    margin-top: var(--spaces);
    position: relative;
    z-index: 10;
    float: right;
}

.input-box-top,
.input-box-start,
.input-box-end,
.schulblock {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
}

.input-box-top,
.input-box-start,
.schulblock {
    align-content: flex-start;
    justify-content: flex-start;
    align-items: flex-start;
}

.input-box-end {
    align-content: flex-end;
    justify-content: flex-end;
    align-items: flex-end;
}

.inline-container {
    display: flex;
    width: calc(100%+var(--spaces));
    margin: 0 var(--spaces) 0 0;
}

.mini-flex {
    display: inherit;
    flex-direction: inherit !important;
    align-items: baseline;
}

.input-container-new,
.input-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.input-container {
    margin: 0 calc(var(--spaces) * 1) calc(var(--spaces) * 0) calc(var(--spaces) * 0);
    width: 100%;
    flex-grow: 1 !important;
}

.input-container-new {
    width: 33.7%;
    flex-grow: 1;
    min-width: 0;
}

p {
    font-weight: var(--fontWeightLight);
    color: var(--textLightColor);
    font-size: calc(var(--fontSize) * 1);
    margin-bottom: 0vmin;
}

#departmentInput {
    border: 1px solid var(--accentColor-b);
}

#employeeInput {
    border: 1px solid var(--accentColor);
}

option.delete-template {
    float: right !important;
    text-align: right !important;
}

option.add-placeholder {
    -webkit-appearance: none;
    appearance: none;
    float: right !important;
    text-align: right !important;
}


.fullselect,
.bigselect {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: calc(var(--spaces) * 2);
    background-position: calc(100% - calc(var(--spaces)*0.7)) center;
}

.fullselect,
.bigselect {}

#selectTemplate.bigselect {
    white-space: nowrap;
    border: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 92%;
    -webkit-appearance: none;
    appearance: none;
}

#selectTemplate.bigselect option {
    max-width: 0;
}

#newEmployeeDepartment {}

#newEmployeeDepartment.bigselect:hover,
#selectEmployeeVac.fullselect:hover {
    background-color: var(textLightColor)!important;
    background-image: url(img/icon-to-option.svg) !important;
}

#newEmployeeDepartment.bigselect {
    background-image: url(img/icon-department.svg) !important;
}

#selectEmployeeVac.fullselect {
    background-image: url(img/icon-calendar.svg) !important;
}

#newEmployeeDepartment.bigselect,
#selectEmployeeVac.fullselect {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    border: none !important;
    background-image: none;
    padding-right: calc(var(--spaces) * 1);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: calc(100% - calc(var(--spaces)/1.2)) center;
    ;
    background-size: calc(var(--spaces)*2.4);
    -webkit-background-size: calc(var(--spaces)*2.4);
}

#selectEmployeeVac.fullselect option {
    max-width: 0;
}

.input-with-button select.bigselect {
    padding-right: 4.8vmin;
}

::placeholder {
    color: var(--placeHolder);
    font-weight: var(--fontWeightLight);
    opacity: 0.5;
}

::-ms-input-placeholder {
    color: var(--textLightColor);
    font-weight: var(--fontWeightLight);
    opacity: 0.5;
}

.colored {
    background-color: var(--itemBackgroundColor);
}

input,
input:disabled,
.standart-input,
.standart-input-new,
.schulblock-start,
.schulblock-end,
.schulblock-desc,
.new {
    outline: none;
    width: 100%;
    height: calc(var(--spaces) * 3);
    padding: calc(var(--spaces) / 3) calc(var(--spaces) / 1) calc(var(--spaces) / 3) calc(var(--spaces) / 1);
    border-radius: var(--borderRadius);
    background-color: var(--itemBackgroundColor);
    color: var(--textLightColor);
    font-family: var(--fontFamily);
    font-size: calc(var(--fontSize) * 1.1);
    font-weight: 200;
    cursor: pointer;
    appearance: none;
    margin: 0vmin 0vmin 0vmin 0vmin;
}

.standart-input-size:hover {
    background-color: var(--lightColor) !important;
}

.standart-input-size {
    outline: none;
    width: 100%;
    height: calc(var(--toolSize) * 1);
    padding: calc(var(--spaces) / 3) calc(var(--spaces) / 1) calc(var(--spaces) / 3) calc(var(--spaces) / 1);
    border-radius: var(--borderRadius);
    background-color: var(--itemBackgroundColor);
    color: var(--textLightColor);
    font-family: var(--fontFamily);
    font-size: calc(var(--fontSize) * 1.1);
    font-weight: 200;
    cursor: pointer;
    appearance: none;
    margin: 0vmin 0vmin 0vmin 0vmin;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.number-stepper {
    position: relative;
    display: grid;
    appearance: none !important;
}

.number-stepper>input[type=number] {
    padding-right: calc(var(--spaces) * 3.2);
    appearance: none !important;
}

.number-stepper .stepper-btn {
    position: absolute;
    right: calc(var(--spaces) * 0.73);
    width: calc(var(--spaces) * 2.6);
    height: calc(var(--spaces) * 1.15);
    display: grid !important;
    place-items: center;
    cursor: pointer;
    border-radius: var(--borderRadius);
    font-size: calc(var(--fontSize) * 1.1);
    line-height: 1;
    user-select: none;
    background: transparent;
    color: var(--lightColor);
    transition: transform .08s ease, background-color .12s ease;
}

.number-stepper .stepper-btn:hover {
    background-color: transparent !important;
    color: transparent;
}

.number-stepper .stepper-plus:hover {
    color: transparent;
    background-image: url("img/icon-up-hover.svg");
}

.number-stepper .stepper-plus:active {
    background-image: url("img/icon-up-active.svg");
}

.number-stepper .stepper-plus {
    background-position: center 0%!important;
    color: transparent;
    top: 0.25vmin;
    background-image: url("img/icon-up.svg");
}

.number-stepper .stepper-minus:hover {
    color: transparent;
    background-image: url("img/icon-down-hover.svg");
}

.number-stepper .stepper-minus:active {
    background-image: url("img/icon-down-active.svg");
}

.number-stepper .stepper-minus {
    background-position: center 100%;
    color: transparent;
    bottom: 0.25vmin;
    background-image: url("img/icon-down.svg");
}

.number-stepper .stepper-minus,
.number-stepper .stepper-plus {
    appearance: none !important;
    background-repeat: no-repeat;
    background-attachment: scroll !important;
    background-size: calc(var(--spaces) * 2.4)!important;
}

#employee-editor p,
#employee-editor div {
    margin: 0 0 0.6em;
}

#employee-editor p:last-child,
#employee-editor div:last-child {
    margin-bottom: 0;
}

textarea {
    resize: none;
    overflow-y: scroll;
}

.standart-textarea {
    outline: none;
    width: 100%;
    padding: calc(var(--spaces) / 3) calc(var(--spaces) / 1) calc(var(--spaces) / 3) calc(var(--spaces) / 1);
    border-radius: var(--borderRadius);
    background-color: var(--itemBackgroundColor);
    color: var(--textLightColor);
    font-family: var(--fontFamily);
    font-size: calc(var(--fontSize) * 1.1);
    font-weight: 200;
    cursor: pointer;
    appearance: none;
    margin: 0vmin 0vmin 0vmin 0vmin;
    border: none;
}

.tag-container.input-with-button input.js.no-value {
    min-width: 21.79vmin;
}

input.js.no-value {
    -webkit-text-fill-color: var(--textLightColor);
    color: var(--textLightColor);
    font-size: var(--fontSize);
}

input:disabled::-webkit-outer-spin-button,
input:disabled::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:disabled,
.standart-input {
    color: var(--textLightColor);
    border: none;
}


/* Input Width */

.standart-input-size,
.standart-input-new,
.schulblock-start,
.schulblock-end,
.schulblock-desc {
    border: none;
}

.new {
    border: var(--borderNew) !important;
}

.edit {
    border: var(--borderEdit) !important;
}

#editEmployeeAzubiToggle,
.admin-save,
.register-save,
.new-save,
.toggleAccordion,
#addEmployeeButton,
#adminPanelClose,
.standart-button,
.kiada-button,
.logout-button,
.accent-button,
.to-day-button,
.send-button {
    cursor: pointer;
    height: calc(var(--spaces) * 3);
    float: left;
    text-align: var(--buttonTextAlign);
    width: 100%;
    /*border: var(--border);*/
    border-radius: var(--borderRadius);
    margin: 0 calc(var(--spaces) * 1) 0 0;
}

.toggleAccordion,
#addEmployeeButton,
#adminPanelClose,
.standart-button,
.logout-button {
    background-color: var(--accentColor);
}

.send-button {
    background-color: var(--adminColor) !important;
}

button.admin-active:hover {
    background-image: url(img/icon-permit-hover.svg);
}

button.admin-active {
    background-color: var(--adminColor) !important;
    background-image: url(img/icon-permit.svg);
}

.new-save {
    color: var(--textLightColor);
    background-color: var(--accentColor-b) !important;
}


/*XXX*/


/*.send-button,*/

.register-save,
.new-save,
.accent-button,
.to-day-button {
    color: var(--textLightColor);
    background-color: var(--accentColor-b);
    margin: 0 calc(var(--spaces) * 1) 0 0;
    padding-left: calc(var(--spaces) * 1);
}

.avatar-accordion {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease;
}

.avatar-accordion.open {
    max-height: 1200px;
}

.avatar {
    cursor: pointer;
    border-radius: var(--borderRadius);
    background-color: var(--accentColor-b-Hover);
    margin-bottom: calc(var(--spaces) * 0.5);
}

.avatar:hover {
    background-color: var(--lightColor);
}

.avatar:active {
    background-color: var(--employeeColor);
}

@keyframes jump {
    0%,
    100% {
        transform: translateY(0.2vmin);
    }
    50% {
        transform: translateY(0.5vmin);
    }
}

.tag-e-small .employee-avatar,
.tag-e .employee-avatar {
    transform: translateY(0.2vmin);
    pointer-events: none;
    height: auto;
    position: absolute;
    bottom: -1px !important;
    z-index: 4;
}

.tag-e-small .employee-avatar {
    width: 28%;
    right: 1.8vmin;
}

.tag-e .employee-avatar {
    width: 95%;
    right: 0.5vmin;
    margin: 0 auto 0 auto;
}

body.is-employee .tag-employee-mail,
.tag-e-small.draggable.admin-tag .tag-employee-mail,
.tag-e.draggable.admin-tag .tag-employee-mail {
    display: none !important;
}

#departmentTags,
#employeeTags {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}

.department-color {
    display: inline-block;
    background-color: grey;
    height: 100%;
    width: 3.8vmin;
    position: absolute;
    right: -2px;
    top: 0px;
    z-index: 1;
}

#employeeTags {
    opacity: 0;
    -webkit-animation: fade-in-box 0.4s cubic-bezier(0, .02, .03, 1) 200ms forwards;
    animation: fade-in-box 0.4s cubic-bezier(0, .02, .03, 1) 200ms forwards;
    margin-top: calc(var(--spaces) * 0);
}

@-webkit-keyframes fade-in-box {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-in-box {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.tag-e-add,
.tag-d,
.tag-e-small,
.tag-e {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: var(--avatarSize);
    background-color: var(--accentColor-b);
    border-radius: var(--borderRadius);
    border: var(--border);
    cursor: pointer;
}

.tag-e-add {
    background-color: var(--accentColor-b);
    outline: var(--outline);
    outline-offset: var(--outlineOffset);
}

.tag-e-add,
.tag-e-small,
.tag-e {
    overflow: hidden;
}

.tag-e.dragging,
.tag-e-small.dragging {
    transform: scale(1.09) !important;
    opacity: 0.6 !important;
    cursor: grabbing;
    -webkit-transition: scale .6s ease-in-out;
    -moz-transition: scale .6 ease-in-out;
    -ms-transition: scale .6s ease-in-out;
    -o-transition: scale .6s ease-in-out;
    transition: scale .6s ease-in-out;
}

@keyframes herzchenFall {
    0% {
        transform: translateY(0) scale(0.7);
        opacity: 1;
    }
    100% {
        transform: translateY(150px) scale(0.4);
        opacity: 0;
    }
}

@keyframes buttonPulse {
    0% {
        transform: scale(1);
        background-color: var(--accentColor-b);
    }
    50% {
        transform: scale(1.1);
        background-color: var(--accentColorHover);
    }
    100% {
        transform: scale(1);
        background-color: var(--accentColor-b);
    }
}

.button-pulse {
    animation: buttonPulse 0.4s ease-in-out;
}

.heart {
    position: absolute;
    color: pink;
    font-size: 16px;
    animation: herzchenFall 2s ease-out forwards;
    pointer-events: none;
    user-select: none;
}

.tag-e-add,
.tag-e-small,
.tag-e {
    flex-grow: 0;
    float: left;
    margin: calc(var(--spaces) * 0.5) calc(var(--spaces) * 1) calc(var(--spaces) * 0.5) 0;
}

.tag-e {
    opacity: 0;
    transform: translateX(220px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.tag-e {
    padding: calc(var(--spaces) * 0.6) calc(var(--spaces) * 0.9) calc(var(--spaces) * 0.9) calc(var(--spaces) * 0.9);
    height: var(--avatarSize);
}

.tag-e-add,
.tag-e-small {
    padding: calc(var(--spaces) * 0.6) calc(var(--spaces) * 0.9) calc(var(--spaces) * 0.7) calc(var(--spaces) * 0.9);
    height: auto;
    background-image: none;
    background-attachment: scroll;
    background-repeat: no-repeat !important;
}

.tag-e-small:hover,
.tag-e:hover {
    background-color: var(--accentColor-b-Hover);
    color: var(--textLightColor);
}

.tag-e-add:hover {
    background-color: var(--accentColor-b-Hover) !important;
    color: var(--textLightColor);
}

.tag-e-small:active,
.tag-e:active {
    background-color: var(--modalColor);
    color: var(--textLightColor);
    cursor: grabbing;
}

.tag-e-small p,
.tag-e p {
    color: var(--textLightColor);
    float: left;
    z-index: 5;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(var(--fontSize) * 1.2);
    line-height: calc(var(--fontSize) * 1.8);
}

.tag-e-add p {
    width: 100%;
    color: var(--textLightColor);
    float: left;
    z-index: 5;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: calc(var(--fontSize) * 1.3);
    line-height: calc(var(--fontSize) * 1.8);
}

.spacers {
    height: 100%;
}

.tag-e-small p {
    width: 70%;
}

.tag-e p {
    width: 85%;
}

.tag-employee-mail.small {
    float: left;
    position: absolute;
    z-index: 1;
    bottom: calc(var(--spaces) * 0.67);
    left: 2.7vmin;
}

.tag-e-small button,
.tag-e button {
    float: right;
    height: 2vmin;
    width: 2vmin;
    line-height: 1.1vmin;
    font-size: calc(var(--fontSize) * 1.2);
    vertical-align: top;
    border: none;
    border-radius: calc(var(--borderRadius) / 2);
    background-color: transparent;
    color: var(--textLightColor);
    cursor: pointer;
    clear: none;
}

.tag-employee-mail:active,
.tag-employee-mail {
    margin-right: 0px;
    z-index: 2;
}

.active-tag .tag-e-write,
.tag-e-write:hover {
    background-color: var(--lightColor);
    background-image: url("img/icon-edit-hover.svg");
}

.tag-e-write:active,
.tag-e-write {
    background-image: url("img/icon-edit.svg");
}

.tag-e-write {
    font-size: calc(var(--fontSize) * 1.1) !important;
    text-align: center;
    margin-top: calc(var(--spaces) / 2);
    float: left;
    margin-right: 10%;
    position: absolute;
    bottom: calc(var(--spaces) / 1.5);
    left: calc(var(--spaces) / 1.5);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: calc(var(--spaces) * 2.4);
    background-position: center;
}

.tag-e-small .tag-edit {
    display: none !important;
}

.tag-employee-mail {
    float: right;
}

.tag-e-small button:hover,
.tag-e button:hover {
    background-color: var(--employeeColor);
    color: var(--textLightColor);
    cursor: pointer;
}

.admin-tag {
    background-color: var(--adminColor, orange);
    color: var(--textLightColor);
}

#employeeTags .employee-tag {
    background-color: var(--accentColor-b);
}

#start-page {
    display: block;
    width: 100%;
    color: var(--textLightColor);
}

.entry-anniversary {
    font-size: 0.8em;
    color: gold;
    font-weight: bold;
    display: block;
}

.birthday-icon {
    font-size: 1.2em;
    color: pink;
    display: block;
}

.menu-container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-around;
    padding: calc(var(--spaces) * 0.5) 0 calc(var(--spaces) * 0.5) 0;
    gap: var(--spaces);
}

button,
.urlaubsplaner {
    word-break: keep-all;
    font-size: var(--fontSize) !important;
    font-weight: var(--fontWeightLight) !important;
    font-family: var(--fontFamily);
    background-color: var(--employeeColor);
    color: var(--textLightColor);
    border-radius: var(--borderRadius) !important;
    border: var(--border);
    white-space: nowrap;
    position: relative;
    padding: 0 calc(var(--spaces) * 1) 0 calc(var(--spaces) * 1);
}

.urlaubsplaner {
    float: left;
    text-align: var(--textAlign);
    flex-grow: 1;
    font-size: calc(var(--fontSize) * 1.6);
    background: transparent;
}

button:hover,
.accordion-header:hover {
    background-color: var(--lightColor) !important;
    color: var(--employeeColor) !important;
}

button:active,
.accordion-header:active {
    background-color: var(--itemBackgroundColor) !important;
    color: var(--lightColor) !important;
}

#employee-buttons {
    display: none !important;
    padding: calc(var(--spaces) * 0.5) calc(var(--spaces) * 1) calc(var(--spaces) * 0.5) 0 !important;
}

#closeSaveModal {
    margin-bottom: calc(var(--spaces) * 2);
}

#logoutButton,
#openMonatsuebersicht {
    animation: 1s ease-in 0.4s reverse both running fadeOut;
    -moz-animation: 1s ease-in 0.4s reverse both running fadeOut;
    -webkit-animation: 1s ease-in 0.4s reverse both running fadeOut;
}

#employeeInfoHeadline {
    opacity: 0;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.entry-icon {
    font-size: 1.1em;
    margin-left: 5px;
}

.entry-date::before {
    content: "";
    position: absolute;
    right: -0.02vmin;
    top: -0.02vmin;
    width: 0;
    height: 0;
    border-top: 2.4vmin solid var(--entryColor);
    border-left: 2.4vmin solid transparent;
    border-radius: 0 calc(var(--borderRadius) * 0.4) 0 0;
    font-size: calc(var(--fontSize) * 1.3);
    font-weight: var(--fontWeightLight);
}

#monthOverviewTable td.ov-full-day {
    background: var(--fullDayColor);
    opacity: .8;
}

#monthOverviewTable td.ov-half-day {
    background: var(--halfDayColor);
    opacity: .8;
}

#monthOverviewTable td.ov-sick-day {
    background: var(--sickDayColor);
    opacity: .8;
}

#monthOverviewTable td.ov-home-office {
    background: var(--homeOfficeColor);
    opacity: .8;
}

#monthOverviewTable td.ov-overtime {
    background: var(--overtimeColor);
    opacity: .8;
}

#monthOverviewTable td.ov-unpaid-leave {
    background: var(--unpaidLeaveColor);
    opacity: .8;
}

#monthOverviewTable td.ov-school-freistellung {
    background: var(--schoolFreistellungColor);
    opacity: .85;
}

#monthOverviewTable td.ov-school-time {
    background: var(--schoolTimeColor);
    opacity: 1;
    background-repeat: repeat;
    background-attachment: scroll;
    background-size: 47px;
}

#monthOverviewTable td.ov-special-leave {
    background: var(--specialLeaveColor);
    opacity: .8;
}

#monthOverviewTable td[title] {
    cursor: help;
}

#monthOverviewNavigation {
    margin-bottom: calc(var(--spacesMinus)*0.1);
    display: flex;
    justify-content: center;
}

.month-overview-container {
    width: 100%;
    overflow-x: auto;
    max-height: 80vh;
    margin: var(--spaces) auto var(--spaces) auto;
}

#monthOverviewTable {
    width: calc(100% - var(--spaces));
    border-spacing: 0px;
    text-align: var(--textAlign);
    font-size: calc(var(--fontSize) * 1);
    font-weight: var(--fontWeightLight);
    color: var(--textLightColor);
    background-color: var(--itemBackgroundColor);
}

#monthOverviewTable th,
#monthOverviewTable td {
    border: 0.5px solid var(--borderColor-b);
    padding: calc(var(--spaces) / 4) calc(var(--spaces) / 2) calc(var(--spaces) / 4) calc(var(--spaces) / 1.8);
}

#monthOverviewTable th:first-child {
    min-width: calc(var(--spaces) * 15);
    text-align: left;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

#monthOverviewTable th {
    text-align: center;
    min-width: 2.35vmin;
    background-color: var(--darkColor);
    font-size: calc(var(--fontSize) * 0.9);
    font-weight: var(--fontWeightLight);
    line-height: calc(var(--fontSize) * 1.2);
    color: var(--textLightColor);
    position: relative;
    top: 0;
}

#monthOverviewTable th.holiday,
#monthOverviewTable td.holiday {
    background: color-mix(in srgb, var(--accentColor) 35%, transparent);
}

.legend-item {
    display: flex;
    align-items: center;
    margin-bottom: calc(var(--spaces) / 3);
}

.legend-color {
    display: block;
    float: right;
    width: calc(var(--fontSize) * 1);
    height: calc(var(--fontSize) * 1);
    border-radius: var(--borderRadius);
    margin: calc(var(--spaces) * 0.4) calc(var(--spaces) * 1.94) 0 0;
    border: 0px solid var(--employeeColor);
}

.work-day,
.legend-color.work-day {
    background-color: var(--employeeColor) !important;
}

.weekend.half-day,
.half-day,
.legend-color.half-day {
    background-color: var(--halfDayColor) !important;
}

.weekend.full-day,
.full-day,
.legend-color.full-day {
    background-color: var(--fullDayColor) !important;
}

.weekend.sick-day,
.sick-day,
.legend-color.sick-day {
    background-color: var(--sickDayColor) !important;
}

.weekend.home-office,
.home-office,
.legend-color.home-office {
    background-color: var(--homeOfficeColor) !important;
}

.weekend.overtime,
.overtime,
.legend-color.overtime {
    background-color: var(--overtimeColor) !important;
}

.weekend.unpaid-leave,
.unpaid-leave,
.legend-color.unpaid-leave {
    background-color: var(--unpaidLeaveColor) !important;
}

.weekend.school-time,
.school-time,
.legend-color.school-time {
    background-color: var(--schoolTimeColor) !important;
}

.weekend.school-freistellung,
.school-freistellung,
.legend-color.school-freistellung {
    background-color: var(--schoolFreistellungColor) !important;
}

.weekend.special-leave,
.special-leave,
.legend-color.special-leave {
    background-color: var(--specialLeaveColor) !important;
}

.weekend,
.legend-color.weekend {
    background-color: var(--weekendColor) !important;
}

.day-ganzer-tag {
    background-color: var(--fullDayColor) !important;
}

.day-halber-tag {
    background-color: var(--halfDayColor) !important;
}

.day-krankheitstag {
    background-color: var(--sickDayColor) !important;
}

.day-schulzeit {
    background-color: var(--schoolTimeColor) !important;
}

.day-ueberstunden {
    background-color: var(--overtimeColor) !important;
}

.day-feiertag {
    background-color: var(--weekendColor) !important;
    color: var(--textLightColor);
}

.day-schulferien {
    background-color: var(--schoolHolidayColor) !important;
}

.day-unpaid-leave,
.day.unpaid-leave {
    background-color: var(--unpaidLeaveColor) !important;
}

.day-school-freistellung,
.day.school-freistellung {
    background-color: var(--schoolFreistellungColor) !important;
}

.day-special-leave,
.day.special-leave {
    background-color: var(--specialLeaveColor) !important;
}

.day-home-office,
.day.home-office {
    background-color: var(--homeOfficeColor) !important;
}

.modal {
    top: 0px;
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--darkColor);
}

.modal-content {
    color: var(--textLightColor);
    text-align: var(--textAlign);
    background-color: var(--modalColor);
    margin: 0 auto;
    padding: 0 var(--sides) var(--spaces) var(--sides);
    width: 100%;
    max-width: 100vw;
}

label {
    max-width: 25vmin;
    text-align: var(--textAlign);
}

.modal-content h2 {
    color: var(--textLightColor);
    font-weight: var(--fontWeightLight);
}

#adminPanelModal .modal-content form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.saveNotification-place {
    min-height: 2.8vmin;
    background-color: var(--modalColor);
}

.save-notification,
#saveNotification {
    position: relative;
    margin: 0 !important;
    display: none;
    color: var(--textLightColor);
    width: 100%;
    font-size: var(--fontSize);
    text-align: center;
    line-height: 2.8vmin !important;
    background-color: var(--accentColor-b);
    animation: 1.4s ease-in 1s reverse both running fadeOut;
    -moz-animation: 1.4s ease-in 1s reverse both running fadeOut;
    -webkit-animation: 1.4s ease-in 1s reverse both running fadeOut;
}

#employeePanelHeadline {
    display: none;
}

.employeeInformation {
    display: block;
}

h3.news-headline {
    margin: calc(var(--spacesMinus) * 0) 0 calc(var(--spacesMinus) * 1) 0 !important;
}

h3,
h2,
h1 {
    text-align: var(--textAlign);
    /*color: var(--textLightColor);*/
    font-weight: var(--fontWeightLight);
}

h3,
.output-admin-first-name,
.output-company-name {
    margin: var(--spaces) 0 var(--spaces) 0;
    font-weight: var(--fontWeightLight);
}

h1 {
    padding: calc(var(--spaces) * 1.9) 0 calc(var(--spaces) * 1) 0;
    font-size: calc(var(--fontSize) * 1.8);
    line-height: calc(var(--fontSize) * 2);
    width: 100%;
}

h2 {
    font-size: calc(var(--fontSize) * 1.6);
    line-height: calc(var(--fontSize) * 1.6);
}

h3 {
    padding: calc(var(--spaces) * 1.2) 0;
    font-size: calc(var(--fontSize) * 1.4);
    line-height: 0;
}

.output-admin-first-name,
.output-company-name {
    color: var(--textLightColor);
}

.calendar {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    max-width: 100%;
    margin: var(--spaces) var(--spaces) var(--spaces) calc(var(--spaces)*0.5);
}

#calendar-grid,
.calendar-controls,
#employee-buttons {
    display: none;
}

#calendar-grid .day.weekend:not(.full-day):not(.half-day):not(.sick-day):not(.home-office):not(.unpaid-leave):not(.school-freistellung):not(.special-leave):not(.school-time):not(.overtime):not(.overtime-full):not(.overtime-half) {
    background: color-mix(in srgb, var(--weekendColor) 35%, transparent);
}

#calendar-grid {
    display: grid !important;
    margin-right: var(--spaces);
}

.calendar-controls {
    display: flex !important;
    gap: 0.8vmin;
    align-items: center;
    gap: var(--spaces);
    margin: var(--spaces) var(--spaces) 0 var(--spaces) !important;
}

#month-name,
#monthOverviewName {
    position: relative;
    width: 100%;
    margin: calc(var(--spaces) * 0.62) calc(var(--spaces) * 0) 0 calc(var(--spaces) * 0);
    color: var(--textLightColor);
    font-size: calc(var(--fontSize) * 1.2);
    text-align: center;
    line-height: calc(var(--fontSize) * 1.6);
    min-width: 8vmin;
}

.employeesbox {
    width: 100%;
    margin: 0 auto calc(var(--spaces) * 1) 0;
}

.day {
    font-size: calc(var(--fontSize) * 1) !important;
    font-weight: 300 !important;
}

.day select {
    width: 100%;
    padding: 2px 4px 2px 4px;
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: var(--itemBackgroundColor);
    color: var(--borderColor-b);
    font-size: calc(var(--fontSize) * 0.8);
    cursor: pointer;
    appearance: none;
    margin-bottom: 0.2vmin;
    margin-top: calc(var(--spaces)*0.8);
}

.day select:hover {
    border-color: var(--accentColor);
    background-color: var(--textLightColor);
}

.day select:focus {
    outline: none;
    border-color: var(--accentColorHover);
    box-shadow: var(--shadow);
    -webkit-box-shadow: var(--shadow);
}

.holiday-label {
    display: block;
    font-size: calc(var(--fontSize) * 0.8);
    color: var(--textLightColor);
    font-weight: var(--fontWeightLight);
    padding: 2px 4px;
    border-radius: var(--borderRadius);
    text-align: center !important;
    width: 98%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#employee-buttons .employee-btn:first-child {
    display: none;
}

#employeeContactList .employee-item:first-child {
    display: none;
}

.employee-btn {
    width: calc(100% / 4.1);
    margin: calc(var(--spaces) / 2) calc(var(--spaces) / 2) calc(var(--spaces) / 2) 0;
    border: var(--border);
    border-radius: var(--borderRadius);
    background-color: var(--employeeColor);
    color: var(--textLightColor);
    cursor: pointer;
    float: none;
    font-size: calc(var(--fontSize) * 1.2);
    box-shadow: var(--shadow);
    -webkit-box-shadow: var(--shadow);
    position: relative;
    padding-left: var(--spaces);
}

.employee-btn::before {
    z-index: 1;
    content: "";
    position: absolute;
    display: block;
    right: 0;
    top: -0.02vmin;
    width: 0;
    height: 0;
    border-top: var(--cornerSize) solid var(--employeeColor);
    border-left: var(--cornerSize) solid transparent;
    border-radius: 0 var(--borderRadius) 0 0;
}

.employee-btn[data-status=full-day]::before {
    border-top: 2.4vmin solid var(--fullDayColor);
}

.employee-btn[data-status=half-day]::before {
    border-top: var(--cornerSize) solid var(--halfDayColor);
}

.employee-btn[data-status=sick-day]::before {
    border-top: var(--cornerSize) solid var(--sickDayColor);
}

.employee-btn[data-status=school-time]::before {
    border-top: var(--cornerSize) solid var(--schoolTimeColor) !important;
}

.employee-btn[data-status=day-schulblock]::before {
    border-top: var(--cornerSize) solid var(--schoolTimeColor);
}

.employee-btn[data-status=overtime]::before {
    border-top: var(--cornerSize) solid var(--overtimeColor);
}

.employee-btn[data-status=none]::before {
    border-top: var(--cornerSize) solid transparent;
}

.employee-btn[data-status=unpaid-leave]::before {
    border-top: var(--cornerSize) solid var(--unpaidLeaveColor);
}

.employee-btn[data-status=school-freistellung]::before {
    border-top: var(--cornerSize) solid var(--schoolFreistellungColor);
}

.employee-btn[data-status=special-leave]::before {
    border-top: var(--cornerSize) solid var(--specialLeaveColor);
}

.employee-btn[data-status=home-office]::before {
    border-top: var(--cornerSize) solid var(--homeOfficeColor);
}

.employee-btn.active {
    background-color: var(--darkAccentColor);
    color: var(--employeeColor);
    border: var(--border);
}

.employee-btn:hover {
    background-color: var(--accentColorHover);
    color: var(--textLightColor);
}

.day,
.header {
    font-size: var(--calendarFontSize);
    padding: calc(var(--spaces) / 4) calc(var(--spaces) / 1.4) calc(var(--spaces) / 8) calc(var(--spaces) / 1.4);
    text-align: center;
    border: var(--border);
    background-color: var(--itemBackgroundColor);
    color: var(--textLightColor);
    font-weight: var(--fontWeightBold);
    border-radius: var(--borderRadius);
    position: relative;
    min-width: 11.8vmin;
}

header {
    background-image: url(img/kiada-connect-turkis-final.svg);
    background-attachment: scroll;
    background-size: 80%;
    -webkit-background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

.day,
.none {
    min-height: 4.8vmin;
}

.day:hover {
    box-shadow: var(--shadow);
    -webkit-box-shadow: var(--shadow);
}

.day {
    position: relative;
    display: flex;
    flex-direction: column;
}

.day:hover {
    border-color: var(--accentColor);
    box-shadow: var(--shadow);
    -webkit-box-shadow: var(--shadow);
}

.day.holiday,
.weekend {
    background-color: var(--weekendColor);
    color: var(--textLightColor);
    opacity: 1;
    z-index: 4;
}

.day .holiday-label+select {
    display: none;
    background-color: #ffecec !important;
    border: 1px solid #f00;
}

.day.holiday.none select {
    display: none;
}

.school-holiday {
    z-index: 0;
    background-color: var(--schoolHolidayColor);
    color: var(--textLightColor);
    opacity: 0.8;
}

.header {
    font-weight: var(--fontWeightLight);
    background-color: var(--itemBackgroundColor);
}

#mitarbeiter {
    font-size: calc(var(--fontSize) * 1.5) !important;
    font-weight: var(--fontWeightBold);
    line-height: calc(var(--fontSize) * 2);
}

.summary {
    margin: 0 auto var(--spaces) var(--spaces);
    width: 100%;
}

.summary p {
    width: 100%;
    font-size: calc(var(--fontSize) * 0.9) !important;
    line-height: calc(var(--fontSize) * 1.4) !important;
    text-align: var(--textAlign);
    font-weight: var(--fontWeightLight);
    color: color-mix(in hsl, var(--employeeColor) 20%, var(--textLightColor));
}

.summary strong {
    margin-right: var(--spaces);
    font-weight: var(--fontWeightLight);
}

.summary b {
    margin-right: var(--spaces);
    font-weight: var(--fontWeightMedium);
    color: var(--textLightColor);
}

.copyright {
    z-index: 3000;
    position: fixed;
    bottom: var(--spaces);
    float: left;
    font-size: calc(var(--fontSize) * 0.8);
    line-height: calc(var(--fontSize) * 1.6);
    width: 100%;
    text-align: var(--textAlign);
    font-weight: var(--fontWeightLight);
    clear: both;
    color: var(--textLightColor);
    pointer-events: none;
}

.flexbox-panel {
    position: relative;
    display: flex;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

.flexbox-panel-modal {
    width: calc(100% - calc(var(--spaces) * 4));
    margin: calc(var(--spaces) * 0) calc(var(--spaces) * 1) 0 calc(var(--spaces) * 1);
    position: relative;
    display: flex;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
}

#employee-editor {
    line-height: 1.5;
    white-space: normal;
}

#employee-editor.upload {
    background-image: url(img/upload-area-animate.svg);
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-background-size: contain;
}

#employee-editor * {
    line-height: inherit;
}

#employee-editor div,
#employee-editor p {
    margin: 0;
}

#employee-editor b,
#employee-editor strong {
    font-weight: 700;
}

.my-send-btn.is-success {
    background-color: var(--successColor);
    color: #000;
}

.my-send-btn.is-error {
    background-color: var(--signalColor);
    color: #fff;
}

@keyframes kiada-spin {
    to {
        transform: rotate(360deg);
    }
}


/*XXX*/

#addEmployeeButton.is-dirty {
    background-color: var(--signalColor) !important;
}

#addEmployeeButton.is-dirty:hover {
    background-color: var(--lightColor) !important;
    color: var(--employeeColor) !important;
}

#employeeInvitation.granted {
    background-color: var(--adminColor) !important;
}

#mailSplitHandle:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 504.58'%3E%3Cpath fill='%23ffffff' d='M6.1,212.79h.8c1.44,0,2.6,1.16,2.6,2.6v73.8c0,1.44-1.16,2.6-2.6,2.6h-.8c-1.44,0-2.6-1.16-2.6-2.6v-73.8c0-1.44,1.16-2.6,2.6-2.6Z'/%3E%3C/svg%3E");
}

#mailSplitHandle:active,
#mailSplitHandle {
    opacity: 1;
    cursor: col-resize;
    height: 40.0vmin;
    z-index: 4;
    width: calc(var(--spaces) * 2);
    margin: calc(var(--spaces) * 0.5) calc(var(--spacesMinus) * 0) 0 calc(var(--spacesMinus) * 1);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 504.58'%3E%3Cpath fill='%231e2329' d='M6.1,212.79h.8c1.44,0,2.6,1.16,2.6,2.6v73.8c0,1.44-1.16,2.6-2.6,2.6h-.8c-1.44,0-2.6-1.16-2.6-2.6v-73.8c0-1.44,1.16-2.6,2.6-2.6Z'/%3E%3C/svg%3E");
}

#mailSplitHandle {
    opacity: 0;
    -webkit-animation: scale-up-center 2.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s forwards;
    animation: scale-up-center 2.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) 1s forwards;
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
        opacity: 0;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

.mailcenter-grid {
    --mail-left: 50%;
    --mail-handle: calc(var(--spaces) * 0.5);
    display: grid !important;
    grid-template-columns: var(--mail-left) var(--mail-handle) 1fr;
    column-gap: calc(var(--spaces) * 0);
    align-items: start;
    padding-right: var(--spaces);
}

.mailcenter-left,
.mailcenter-right {
    min-height: 40vmin;
    min-width: 0;
}

.mailcenter-left {
    padding-right: calc(var(--spaces)*0.5);
}

.mailcenter-left #employeeContactList {
    overflow: auto;
}

.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: .6vmin;
    margin: calc(var(--spaces) * 0.5) 0;
}


/* Special */

.attachment-pill {
    display: inline-flex;
    align-items: center;
    gap: .5ch;
    padding: .25em .6em;
    border-radius: var(--borderRadius);
    background: rgba(255, 255, 255, .06);
    border: 1px dashed rgba(255, 255, 255, .15);
    font-size: calc(var(--fontSize) * 0.95);
    line-height: 1.6;
}

.attachment-pill .name {
    max-width: 36ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-pill .size {
    opacity: .65;
    font-size: .95em;
}

.attachment-pill .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35em;
    height: 1.35em;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-weight: 700;
    background: rgba(255, 255, 255, .15);
    color: var(--textLightColor);
}

.attachment-pill .remove:hover {
    background: rgba(255, 255, 255, .3);
}

.field-hint.error {
    color: var(--signalColor, #c24747);
    font-size: 0.9rem;
    line-height: 1.25;
    margin-top: 0.25rem;
}

.is-invalid {
    border-color: var(--signalColor, #c24747) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 107, 107, .2);
}

.pinboard-input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-top: var(--spaces);
}

.pinboard-input-row .send-button {
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0 !important;
}

.pinboard-textarea {
    outline: none;
    width: 100%;
    padding: calc(var(--spaces) / 3) calc(var(--spaces) / 1) calc(var(--spaces) / 3) calc(var(--spaces) / 1);
    border-radius: var(--borderRadius);
    background-color: hsla(var(--chatFarbWinkel), 20%, 10%, 0.2);
    color: var(--textLightColor);
    font-family: var(--fontFamily);
    font-size: calc(var(--fontSize) * 1.1);
    font-weight: var(--fontWeightLight);
    border: none;
    overflow-y: auto;
}

.tag-e-add {
    display: grid;
    grid-template-rows: auto 1fr;
    place-items: start;
    max-width: calc(var(--avatarSize) * 0.99);
    background-color: var(--accentColor-b);
    border: var(--border);
    cursor: pointer;
}

.tag-e-add p {
    margin: 0;
}

.tag-e-add .spacers {
    height: 100%;
}

.pinboard {
    resize: vertical;
    border-radius: var(--borderRadius);
    width: calc(100% - var(--spaces));
    margin: calc(var(--spaces) * 1) calc(var(--spaces) * 0) calc(var(--spaces) * 1) calc(var(--spaces) * 0);
    padding: calc(var(--spaces) * 1) calc(var(--spaces) * 2) calc(var(--spaces) * 1) calc(var(--spaces) * 1);
    background-color: var(--chatEditor);
}

.pinboard-list {
    resize: vertical;
    height: 36.1vmin;
    overflow-y: auto;
    overflow-x: hidden;
    width: calc(100%+var(--spaces));
    padding: calc(var(--spaces) * 1) calc(var(--spaces) * 1) calc(var(--spaces) * 1) calc(var(--spaces) * 0);
}

.pinboard-msg {
    display: flex;
    align-items: flex-start;
    gap: calc(var(--spaces) * 1);
    margin: calc(var(--spacesMinus) * 0) calc(var(--spaces) * 0) calc(var(--spaces) * 0.5) calc(var(--spaces) * 0);
    border-bottom: var(--borderLight);
    padding-bottom: calc(var(--spaces) * 0.5);
}

.pinboard-avatar {
    width: calc(var(--spaces) * 3.9);
    height: calc(var(--spaces) * 3.9);
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: color-mix(in hsl, var(--clearButtonColor) 90%, var(--themBubbleColor));
    margin-top: calc(var(--spacesMinus) *0.1);
}

.pinboard-msg .bubble {
    max-width: 50%;
    color: var(--textLightColor);
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--borderRadius) calc(var(--borderRadius) * 15) 0 calc(var(--borderRadius) * 6);
    background: var(--themBubbleColor);
    padding: calc(var(--spaces)*0.8) calc(var(--spaces)*2.0) calc(var(--spaces)*1.2) calc(var(--spaces)*1);
    position: relative;
    flex-grow: 1;
}

.meta {
    font-size: calc(var(--fontSize) * 0.8) !important;
    color: var(--textLightColor);
    max-width: 95%;
}

.meta-name {
    color: var(--textLightColor);
    font-weight: var(--fontWeightLight);
    text-align: left;
    opacity: 1;
    margin-right: calc(var(--spaces)*0.5);
}

.pin-del,
.pin-del-post,
.pin-del-reply {
    position: absolute;
    float: right;
    right: 0;
    top: 0;
    padding: 0;
    height: calc(var(--spaces) * 1.7);
    width: calc(var(--spaces) * 1.7);
    border: none;
    color: var(--lightColor);
    font-size: calc(var(--fontSize) * 1.7);
    line-height: calc(var(--fontSize) * 1.7) !important;
    opacity: 1;
    cursor: pointer;
    margin: calc(var(--spacesMinus)*0.0) calc(var(--spacesMinus)*1.2) calc(var(--spacesMinus)*0.1) calc(var(--spacesMinus)*0.1);
    border-radius: 50% !important;
    background-color: var(--clearButtonColor);
}

.pin-del:hover,
.pin-del-post:hover,
.pin-del-reply:hover {
    opacity: 1;
    transform: scale(1.1);
    color: var(--lightColor);
    background-color: var(--employeeColor);
}

.pin-replies {
    margin-left: calc(var(--spaces) * 0.7);
    display: grid;
    gap: calc(var(--spaces) * 1);
}

.pin-reply-editor .send-button:active,
.pin-reply-editor .send-button {
    background-color: var(--clearButtonColor);
    height: 100%;
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0 !important;
}

#pinboardPostBtn.send-button {
    height: 100%;
    width: 4vmin;
    background-color: var(--clearButtonColor);
    margin-right: calc(var(--spaces)*1);
}

.pin-reply .bubble {
    max-width: 100%;
    border: var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--borderRadius) var(--borderRadius) * 13) 0 calc(var(--borderRadius) * 5);
    background: var(--themBubbleColor);
    padding: calc(var(--spaces)*0.8) calc(var(--spaces)*2.0) calc(var(--spaces)*1.2) calc(var(--spaces)*1);
    position: relative;
}

.pin-reply-editor {
    margin-left: calc(var(--spaces) * 1);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: calc(var(--spaces)*0);
    margin-top: calc(var(--spaces)*0);
}

.pin-reply-textarea,
.pin-reply-input {
    outline: none;
    width: 100%;
    padding: calc(var(--spaces)/2) calc(var(--spaces)/1);
    border-radius: var(--borderRadius);
    background-color: hsla(var(--chatFarbWinkel), 20%, 10%, 0.2);
    color: var(--textLightColor);
    font-family: var(--fontFamily);
    font-size: calc(var(--fontSize)*1.0);
    border: none;
    overflow-y: auto;
}

.mention {
    padding: 0 .25em;
    border-radius: var(--borderRadius);
    background: color-mix(in srgb, var(--employeeColor) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--employeeColor) 40%, transparent);
}

.legend .legend-color.requested {
    background: var(--vac-request);
    border: 1px dashed var(--accentColor);
}

.day.requested {
    background-image: repeating-linear-gradient(135deg, var(--vac-request), var(--vac-request) 8px, transparent 8px, transparent 16px);
    outline: 1px dashed rgba(255, 255, 255, .35);
}

.month-overview-container td.requested {
    background: var(--vac-request);
    position: relative;
}

.month-overview-container td.requested::after {
    content: '';
    position: absolute;
    inset: 3px auto auto 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}

[data-date].requested {
    background: var(--vac-request) !important;
    outline: 1px dashed rgba(255, 255, 255, .25);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

body.kuschelmodus .employeesbox {
    display: none !important;
}

.day.pending {
    outline: 2px dashed var(--overtimeColor);
    outline-offset: -2px;
    position: relative;
}

.day.pending::after {
    content: beantragt;
    position: absolute;
    bottom: .25vmin;
    right: .35vmin;
    font-size: calc(var(--fontSize) * .85);
    opacity: .65;
}

.calendar .day.to-revoke {
    outline: 3px dashed var(--signalColor);
    outline-offset: -4px;
    opacity: .9;
    position: relative;
}

.calendar .day.to-revoke::after {
    content: "✕";
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: .9em;
    opacity: .85;
}

.calendar .day.bulk-selected {
    outline: 3px dashed var(--accentColor);
    outline-offset: -4px;
}

#bulkTypeSelect.bulk-attention {
    box-shadow: 0 0 0 0.18vmin var(--signalColor);
    border-color: var(--signalColor);
    animation: bulkTypePulse 1.1s ease-in-out infinite;
}

@keyframes bulkTypePulse {
    0% {
        box-shadow: 0 0 0 0 var(--signalColor);
    }
    50% {
        box-shadow: 0 0 0 0.8vmin var(--signalColor);
    }
    100% {
        box-shadow: 0 0 0 0 var(--signalColor);
    }
}

#monthOverviewTable th.weekend,
#monthOverviewTable td.weekend {
    background: color-mix(in srgb, var(--weekendColor) 50%, transparent);
}

.ot-popover {
    position: absolute;
    top: .4vmin;
    right: .4vmin;
    z-index: 10;
    background: var(--itemBackgroundColor);
    border: 1px solid var(--borderColor-b);
    border-radius: var(--borderRadius);
    padding: .4vmin;
    display: flex;
    gap: .4vmin;
    align-items: center;
    width: 12.8vmin !important;
}

.ot-popover input {
    width: 4.8vmin;
}

.ov-overtime-full {
    background-color: var(--overtimeColor);
}

.ov-overtime-half {
    background-image: repeating-linear-gradient(135deg, var(--overtimeColor) 0 6px, transparent 6px 12px);
}


/*calc(100% - calc(var(--spaces)/1.2)) center*/

.day .ot-icon:hover {
    background-color: transparent !important;
    background-image: url('img/icon-overtime-hover.svg');
}

.day .ot-icon:active {
    background-color: transparent !important;
    background-image: url('img/icon-overtime-down.svg');
}

.day .ot-icon {
    position: absolute;
    opacity: 1;
    cursor: pointer;
    z-index: 5;
    border: none;
    padding: 0;
    outline: none;
    background-image: url('img/icon-overtime.svg');
}

.day.has-ot .ot-icon:hover {
    background-image: url('img/icon-overtime-hover.svg');
}

.day.has-ot .ot-icon:active {
    background-image: url('img/icon-overtime-on-active.svg');
}

.day.has-ot .ot-icon {
    opacity: 1;
    background-image: url('img/icon-overtime-on.svg');
}

.event-icon {
    position: absolute;
    top: .2vmin;
    left: .2vmin;
    width: calc(var(--spaces) * 2);
    height: calc(var(--spaces) * 2);
    border: none;
    border-radius: 50%;
    background: var(--accentColor-b);
    opacity: .9;
    cursor: pointer;
}

.event-icon.is-birthday {
    box-shadow: 0 0 0 2px var(--successColor) inset;
}

.event-icon.is-anniversary {
    box-shadow: 0 0 0 2px var(--accentColor) inset;
}

.event-icon.sent {
    transform: scale(0.95);
    opacity: .7;
}

.day {
    position: relative;
}

.day .gruss-icon+.gruss-icon {
    left: calc(var(--spaces)*2.5);
}

.day .gruss-icon.birthday::before {
    content: '';
}

.day .gruss-icon.birthday:hover {
    background-image: url('img/icon-birthday-hover.svg');
}

.day .gruss-icon.birthday:active {
    background-image: url('img/icon-birthday-active.svg');
}

.day .gruss-icon.birthday {
    background-image: url('img/icon-birthday.svg');
}

.day .gruss-icon.anniversary:hover {
    background-image: url('img/icon-anniversary-hover.svg');
}

.day .gruss-icon.anniversary:active {
    background-image: url('img/icon-anniversary-active.svg');
}

.day .gruss-icon.anniversary {
    background-image: url('img/icon-anniversary.svg');
}

.day .gruss-icon.anniversary::before {
    content: '';
}

.day .gruss-icon.to-event:hover {
    background-image: url('img/icon-event-hover.svg');
}

.day .gruss-icon.to-event:active {
    background-image: url('img/icon-event-active.svg');
}

.day .gruss-icon.to-event {
    background-image: url('img/icon-event.svg');
}

.day .gruss-icon.sent {
    outline: 2px solid #39c07f;
    opacity: 1;
}

.gruss-popover .g-send.self-disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.gruss-popover {
    max-width: calc(var(--spaces)*28);
    padding: calc(var(--spaces)*1) calc(var(--spaces)*1) calc(var(--spaces)*1.6) calc(var(--spaces)*1);
    background-color: var(--signalColor);
}

.gruss-popover {
    position: absolute;
    right: 6px;
    top: 22px;
    border: 1px solid #355;
    border-radius: var(--borderRadius);
    box-shadow: var(--shadow);
}

.gruss-popover .g-line {
    margin: 2px 0;
}

.gruss-popover .g-line.small {
    font-size: 12px;
    opacity: .75;
}

.gruss-popover button {
    margin-top: 6px;
    margin-right: 6px;
}

.day .gruss-icon.sent {
    opacity: .85;
    outline: 2px solid #39c07f;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .35));
}

#vacRevokeBtn,
#isSupervisorToggleBtn {
    pointer-events: none !important;
    visibility: hidden !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.day .gruss-icon.to-event,
.day .gruss-icon.birthday,
.day .gruss-icon.anniversary,
.day.has-ot .ot-icon,
.day .ot-icon {
    cursor: pointer;
    top: .2vmin;
    right: 0.3vmin;
    width: calc(var(--spaces) * 2)!important;
    height: calc(var(--spaces) * 2)!important;
    background-color: transparent !important;
    background-size: calc(var(--spaces)*2.4)!important;
    -webkit-background-size: calc(var(--spaces)*2.4)!important;
    background-position: center;
    background-repeat: no-repeat;
}


/* =======================================
=========== KIADA TeamBuilder ============
========================================== */

.teamboard {
    border-radius: var(--borderRadius);
    width: calc(100% - var(--spaces));
    margin: calc(var(--spaces) * 0.5) calc(var(--spaces) * 0) calc(var(--spaces) * 0.5) calc(var(--spaces) * 0);
    min-height: auto;
    max-height: auto;
    background-color: var(--teamEditor);
    padding: calc(var(--spaces) * 0) calc(var(--spaces) * 0) calc(var(--spaces) * 0) calc(var(--spaces) * 0);
    overflow: hidden;
}


/*=== GENERAL ===*/

.boardtoolbox {
    /*-webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);*/
    background-color: color-mix(in srgb, var(--toolBackground) 100%, transparent);
}

.boardtoolbox {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: calc(100.01% - var(--scrollBalkenBreite));
    height: auto;
    max-height: calc(var(--toolSize) * 1.8);
    padding: calc(var(--toolSize) * 0.4) calc(var(--toolSize) * 0.3) calc(var(--toolSize) * 0) calc(var(--toolSize) * 0)!important;
    box-shadow: var(--shadow);
    z-index: 4;
    margin: 0 calc(var(--toolSizeMinus)*3) calc(var(--toolSizeMinus)*3.5) calc(var(--toolSize)*0);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.generaltoolbox h2,
.boardtoolbox h2 {
    width: 100%;
    font-weight: 200 !important;
    margin: calc(var(--toolSize)*0.22) calc(var(--toolSize)*1) 0 calc(var(--toolSize)*1)
}


/*=== TOOLS ===*/


/* SLIDER */

.slider-container {
    background: var(--toolBackground);
    float: left;
    width: auto;
    padding: calc(var(--toolSize)*0) calc(var(--toolSize)*0.22) calc(var(--toolSize)*0.09) calc(var(--toolSize)*0.3);
    border-radius: calc(var(--borderRadius)*2);
}

input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 80px;
    height: 14px;
    padding: 0;
    border-radius: calc(var(--borderRadius)*1);
    outline: none;
    cursor: pointer;
    background: hsla(212, 30%, 18%, 1);
    box-shadow: inset 0px 0px 2px hsla(212, 20%, 0%, 0.3)
}

input[type="range"]::-webkit-slider-thumb:active {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: var(--borderRadius);
    height: 16px;
    width: 8px;
    border-radius: 5px;
    background: var(--accentColor);
    border: 1px solid #222222;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-border-radius: var(--borderRadius);
    height: 16px;
    width: 8px;
    border-radius: 5px;
    background: #e7e7e7;
    border: 1px solid #aaaaaa;
}

input[type="range"]::-moz-range-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    -moz-border-radius: var(--borderRadius);
    height: 14px;
    width: 8px;
    border-radius: 5px;
    background: #e7e7e7;
    border: 1px solid #aaaaaa;
}

input[type=range]::-ms-track {
    width: 120px;
    height: 6px;
    background: transparent;
    border-color: transparent;
    border-width: 2px 0;
    color: transparent;
}

input[type=range]::-ms-thumb {
    height: 14px;
    width: 8px;
    border-radius: var(--borderRadius);
    background: #e7e7e7;
    border: 1px solid #aaaaaa;
}

input[type=range]::-ms-fill-lower {
    background: #919e4b;
    border-radius: var(--borderRadius);
}

input[type=range]::-ms-fill-upper {
    background: #c5c5c5;
    border-radius: var(--borderRadius);
}

input[type=range]::-ms-tooltip {
    display: none;
}

input[type="text"] {
    border: none;
}

.my-input-container {
    display: inline-block;
    position: relative;
    font: 12px var(--fontFamily);
}

.my-input {
    position: relative;
    border: none;
    outline: none;
    padding: 0px 0px 0px 4px;
    top: -2px;
    height: 20px;
    width: 38px;
    border-radius: 0 calc(var(--borderRadius)*1) calc(var(--borderRadius)*1) 0;
    background: var(--transparent);
    font: inherit;
    color: color-mix(in srgb, var(--textLightColor) 30%, transparent);
}

.my-suffix {
    position: absolute;
    top: -1px;
    color: color-mix(in srgb, var(--textLightColor) 30%, transparent);
    margin-left: 1px;
    font: inherit;
}


/* toolSize */

.tool-toggle.general-tools:hover,
.tool-toggle.add-tool:hover,
.tool-toggle.add-nodes:hover,
.tool-toggle.add-format:hover,
.tool-toggle.add-colors:hover,
.tool-toggle.add-icons:hover,
#boardFontSizeSelect:hover,
#formatSizeSelect:hover,
.generaltool:hover,
.boardtool:hover,
.tool:hover,
.toolspacer:hover {
    background-color: transparent !important;
}

.tool-toggle.general-tools,
.tool-toggle.add-tool,
.tool-toggle.add-nodes,
.tool-toggle.add-format,
.tool-toggle.add-colors,
.tool-toggle.add-icons,
.generaltool,
.boardtool,
.toolspacer {
    float: none;
    background-color: transparent !important;
    width: calc(var(--toolSize) * 1);
    height: calc(var(--toolSize) * 1);
    background-position: center center;
    background-size: calc(var(--toolSize) * 1.3);
    -webkit-background-size: calc(var(--toolSize) * 1.3);
    background-repeat: no-repeat;
    background-attachment: scroll;
}

#boardFontSizeSelect,
#formatSizeSelect,
.tool {
    background-color: transparent !important;
    width: calc(var(--spaces) * 2);
    height: calc(var(--spaces) * 2);
    background-position: center center;
    background-size: calc(var(--spaces) * 2.5);
    -webkit-background-size: calc(var(--spaces) * 2.5);
    background-repeat: no-repeat;
    background-attachment: scroll;
}


/* slider end */


/* add-tool */

.tool-toggle.add-tool:hover {
    background-color: transparent !important;
}

.tool-toggle.add-tool:active {
    background-color: transparent !important;
}

.tool-toggle.add-tool:hover {
    background-image: url(img/icon-adjustment-hover.svg);
}

.tool-toggle.add-tool:active {
    background-image: url(img/icon-adjustment-active.svg);
}

.tool-toggle.add-tool {
    background-image: url(img/icon-adjustment.svg);
}


.tool-toggle.add-tool.offen {
    background-color: transparent;
    background-image: url(img/icon-space.svg);
}

.slid {
    position: relative;
    width: 185px!important;
    margin-left: calc(var(--toolSizeMinus)*2.64);
}

.tool-grid {
    height: 96px;
    width: 185px;
    background: transparent !important;
}

.tool-grid p {
    font-size: 12px;
    line-height: 22px;
    color: var(--toolTextColor);
}

.toolbox {
    flex-direction: row !important;
    width: 100% !important;
    margin-top: calc(var(--spacesMinus) * 0) !important;
    z-index: 0;
    padding: calc(var(--spaces) *0.5) calc(var(--spaces) *1) calc(var(--spaces) *0.5) calc(var(--spaces)*1);
    border-radius: var(--borderRadius) var(--borderRadius) 0 0 !important;
    background-color: var(--itemBackgroundColor);
    box-shadow: var(--shadow);
    -webkit-box-shadow: var(--shadow);
}

.node-tool.tool-spacer {
    pointer-events: none;
    z-index: -2;
}

#boardFontSizeSelect,
#formatSizeSelect,
.generaltool,
.boardtool,
.tool {
    cursor: pointer;
    float: left;
    text-align: var(--buttonTextAlign);
    
    background-color: transparent;
}


.tool.messages {
    height: calc(var(--spaces)*2);
    width: 100%;
    background: transparent;
    pointer-events: none;
    text-align: left;
    color: hsla(212, 0%, 100%, 0.4);
    padding: 0 calc(var(--spaces) * 1) 0 0;
    border: none;
}

#toggleHtmlMode {
    color: transparent !important;
}

.tool.toggle-html:hover {
    max-width: calc(var(--spaces)*2);
    background-image: url("img/icon-tool-html-hover.svg");
}

.tool.toggle-html:active {
    max-width: calc(var(--spaces)*2);
    background-image: url("img/icon-tool-html-active.svg");
}

.tool.toggle-html {
    max-width: calc(var(--spaces)*2);
    background-image: url("img/icon-tool-html.svg");
}


/* node-contact-board big-icons */


/* one STANDART */

.weiss.one,
.gelb.one {
    background-image: url(img/big-icon-one-tw.svg) !important;
}

.rot.one,
.orange.one,
.gruen.one,
.tuerkis.one,
.blau.one,
.violett.one,
.grau.one,
.schwarz.one {
    background-image: url(img/big-icon-one-tb.svg) !important;
}

.transparent.one,
.board-bg-rot .transparent.one,
.board-bg-orange .transparent.one,
.board-bg-gruen .transparent.one,
.board-bg-tuerkis .transparent.one,
.board-bg-blau .transparent.one,
.board-bg-violett .transparent.one,
.board-bg-grau .transparent.one,
.board-bg-schwarz .transparent.one {
    background-image: url(img/big-icon-one-tb.svg) !important;
}

.board-bg-gelb .transparent.one,
.board-bg-weiss .transparent.one {
    background-image: url(img/big-icon-one-tw.svg) !important;
}


/* two */

.weiss.two,
.gelb.two {
    background-image: url(img/big-icon-head-two-tw.svg) !important;
}

.rot.two,
.orange.two,
.gruen.two,
.tuerkis.two,
.blau.two,
.violett.two,
.grau.two,
.schwarz.two {
    background-image: url(img/big-icon-head-two-tb.svg) !important;
}

.transparent.two,
.board-bg-rot .transparent.two,
.board-bg-orange .transparent.two,
.board-bg-gruen .transparent.two,
.board-bg-tuerkis .transparent.two,
.board-bg-blau .transparent.two,
.board-bg-violett .transparent.two,
.board-bg-grau .transparent.two,
.board-bg-schwarz .transparent.two {
    background-image: url(img/big-icon-head-two-tb.svg) !important;
}

.board-bg-gelb .transparent.two,
.board-bg-weiss .transparent.two {
    background-image: url(img/big-icon-head-two-tw.svg) !important;
}


/* three */

.weiss.three,
.gelb.three {
    background-image: url(img/big-icon-three-tw.svg) !important;
}

.rot.three,
.orange.three,
.gruen.three,
.tuerkis.three,
.blau.three,
.violett.three,
.grau.three,
.schwarz.three {
    background-image: url(img/big-icon-three-tb.svg) !important;
}

.transparent.three,
.board-bg-rot .transparent.three,
.board-bg-orange .transparent.three,
.board-bg-gruen .transparent.three,
.board-bg-tuerkis .transparent.three,
.board-bg-blau .transparent.three,
.board-bg-violett .transparent.three,
.board-bg-grau .transparent.three,
.board-bg-schwarz .transparent.three {
    background-image: url(img/big-icon-three-tb.svg) !important;
}

.board-bg-gelb .transparent.three,
.board-bg-weiss .transparent.three {
    background-image: url(img/big-icon-three-tw.svg) !important;
}


/* four */

.weiss.four,
.gelb.four {
    background-image: url(img/big-icon-four-tw.svg) !important;
}

.rot.four,
.orange.four,
.gruen.four,
.tuerkis.four,
.blau.four,
.violett.four,
.grau.four,
.schwarz.four {
    background-image: url(img/big-icon-four-tb.svg) !important;
}

.transparent.four,
.board-bg-rot .transparent.four,
.board-bg-orange .transparent.four,
.board-bg-gruen .transparent.four,
.board-bg-tuerkis .transparent.four,
.board-bg-blau .transparent.four,
.board-bg-violett .transparent.four,
.board-bg-grau .transparent.four,
.board-bg-schwarz .transparent.four {
    background-image: url(img/big-icon-four-tb.svg) !important;
}

.board-bg-gelb .transparent.four,
.board-bg-weiss .transparent.four {
    background-image: url(img/big-icon-four-tw.svg) !important;
}


/* five */

.weiss.five,
.gelb.five {
    background-image: url(img/big-icon-five-tw.svg) !important;
}

.rot.five,
.orange.five,
.gruen.five,
.tuerkis.five,
.blau.five,
.violett.five,
.grau.five,
.schwarz.five {
    background-image: url(img/big-icon-five-tb.svg) !important;
}

.transparent.five,
.board-bg-rot .transparent.five,
.board-bg-orange .transparent.five,
.board-bg-gruen .transparent.five,
.board-bg-tuerkis .transparent.five,
.board-bg-blau .transparent.five,
.board-bg-violett .transparent.five,
.board-bg-grau .transparent.five,
.board-bg-schwarz .transparent.five {
    background-image: url(img/big-icon-five-tb.svg) !important;
}

.board-bg-gelb .transparent.five,
.board-bg-weiss .transparent.five {
    background-image: url(img/big-icon-five-tw.svg) !important;
}


/* no-icon */

.weiss.no-icon,
.gelb.no-icon {
    background-image: none !important;
}

.rot.no-icon,
.orange.no-icon,
.gruen.no-icon,
.tuerkis.no-icon,
.blau.no-icon,
.violett.no-icon,
.grau.no-icon,
.schwarz.no-icon {
    background-image: none !important;
}

.transparent.no-icon,
.board-bg-rot .transparent.no-icon,
.board-bg-orange .transparent.no-icon,
.board-bg-gruen .transparent.no-icon,
.board-bg-tuerkis .transparent.no-icon,
.board-bg-blau .transparent.no-icon,
.board-bg-violett .transparent.no-icon,
.board-bg-grau .transparent.no-icon,
.board-bg-schwarz .transparent.no-icon {
    background-image: none !important;
}

.board-bg-gelb .transparent.no-icon,
.board-bg-weiss .transparent.no-icon {
    background-image: none !important;
}


/*===*/

.one,
.two,
.three,
.four,
.five {
    background-size: 60% !important;
    background-position: 115% 15% !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

.node-contact-board .tool-content.to-grid .boardtool {
    width: calc(var(--toolSize) * 1) !important;
    height: calc(var(--toolSize) * 0.9) !important;
    background-size: calc(var(--toolSize)*1.2);
    -webkit-background-size: calc(var(--toolSize)*1.2);
}


/* node-contact-board big-icons end */


/* node-contact-board tools */

.boardtool.icon-one.is-selected,
.boardtool.icon-one:hover {
    background-image: url(img/icon-one-hover.svg);
}

.boardtool.icon-one:active {
    background-image: url(img/icon-one-active.svg);
}

.boardtool.icon-one {
    background-image: url(img/icon-one.svg);
}

.boardtool.icon-two.is-selected,
.boardtool.icon-two:hover {
    background-image: url(img/icon-head-two-hover.svg);
}

.boardtool.icon-two:active {
    background-image: url(img/icon-head-two-active.svg);
}

.boardtool.icon-two {
    background-image: url(img/icon-head-two.svg);
}

.boardtool.icon-three.is-selected,
.boardtool.icon-three:hover {
    background-image: url(img/icon-three-hover.svg);
}

.boardtool.icon-three:active {
    background-image: url(img/icon-three-active.svg);
}

.boardtool.icon-three {
    background-image: url(img/icon-three.svg);
}

.boardtool.icon-four.is-selected,
.boardtool.icon-four:hover {
    background-image: url(img/icon-four-hover.svg);
}

.boardtool.icon-four:active {
    background-image: url(img/icon-four-active.svg);
}

.boardtool.icon-four {
    background-image: url(img/icon-four.svg);
}

.boardtool.icon-five.is-selected,
.boardtool.icon-five:hover {
    background-image: url(img/icon-five-hover.svg);
}

.boardtool.icon-five:active {
    background-image: url(img/icon-five-active.svg);
}

.boardtool.icon-five {
    background-image: url(img/icon-five.svg);
}

.boardtool.no-icon.is-selected,
.boardtool.no-icon:hover {
    background-image: url(img/icon-nothing-hover.svg);
}

.boardtool.no-icon:active {
    background-image: url(img/icon-nothing-active.svg);
}

.boardtool.no-icon {
    background-image: url(img/icon-nothing.svg);
}

.color-grid .boardtool.icon-one,
.color-grid .boardtool.icon-two,
.color-grid .boardtool.icon-three,
.color-grid .boardtool.icon-four,
.color-grid .boardtool.icon-five,
.color-grid .boardtool.no-icon {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--toolBackground) !important;
}

.color-grid .boardtool.icon-one {
    border-radius: var(--borderRadius) 0 0 0 !important;
}

.color-grid .boardtool.icon-two {
    border-radius: 0 !important;
}

.color-grid .boardtool.icon-three {
    border-radius: 0 var(--borderRadius) 0 0 !important;
}

.color-grid .boardtool.icon-four {
    border-radius: 0 0 0 var(--borderRadius) !important;
}

.color-grid .boardtool.icon-five {
    border-radius: 0 !important;
}

.color-grid .boardtool.no-icon {
    border-radius: 0 0 var(--borderRadius) 0 !important;
}


/* node-contact-board tools end */

.boardtool.text-bold:hover,
.tool.text-bold:hover {
    background-image: url("img/icon-bold-hover.svg");
}

.boardtool.text-bold:active,
.tool.text-bold:active {
    background-image: url("img/icon-bold-active.svg");
}

.boardtool.text-bold,
.tool.text-bold {
    background-image: url("img/icon-bold.svg");
}

.boardtool.text-italic:hover,
.tool.text-italic:hover {
    background-image: url("img/icon-italic-hover.svg");
}

.boardtool.text-italic:active,
.tool.text-italic:active {
    background-image: url("img/icon-italic-active.svg");
}

.boardtool.text-italic,
.tool.text-italic {
    background-image: url("img/icon-italic.svg");
}

.boardtool.text-left:hover,
.tool.text-left:hover {
    background-image: url("img/icon-left-hover.svg");
}

.boardtool.text-left:active,
.tool.text-left:active {
    background-image: url("img/icon-left-active.svg");
}

.boardtool.text-left,
.tool.text-left {
    background-image: url("img/icon-left.svg");
}

.boardtool.text-center:hover,
.tool.text-center:hover {
    background-image: url("img/icon-center-hover.svg");
}

.boardtool.text-center:active,
.tool.text-center:active {
    background-image: url("img/icon-center-active.svg");
}

.boardtool.text-center,
.tool.text-center {
    background-image: url("img/icon-center.svg");
}

.boardtool.numbers-list:hover {
    background-image: url("img/icon-numbers-hover.svg");
}

.boardtool.numbers-list:active {
    background-image: url("img/icon-numbers-active.svg");
}

.boardtool.numbers-list {
    background-image: url("img/icon-numbers.svg");
}

.boardtool.bullet-list:hover {
    background-image: url("img/icon-bullet-hover.svg");
}

.boardtool.bullet-list:active {
    background-image: url("img/icon-bullet-active.svg");
}

.boardtool.bullet-list {
    background-image: url("img/icon-bullet.svg");
}

.boardtool.text-right:hover,
.tool.text-right:hover {
    background-image: url("img/icon-right-hover.svg");
}

.boardtool.text-right:active,
.tool.text-right:active {
    background-image: url("img/icon-right-active.svg");
}

.boardtool.text-right,
.tool.text-right {
    background-image: url("img/icon-right.svg");
}

.boardtool.node-reset:hover {
    background-image: url("img/icon-clear-format-hover.svg");
}

.boardtool.node-reset:active {
    background-image: url("img/icon-clear-format-active.svg");
}

.boardtool.node-reset {
    background-image: url("img/icon-clear-format.svg");
}

.tool.text-reset:hover {
    background-image: url("img/icon-clear-format-hover.svg");
}

.tool.text-reset:active {
    background-image: url("img/icon-clear-format-active.svg");
}

.tool.text-reset {
    background-image: url("img/icon-clear-format.svg");
}

#boardFontSizeSelect:hover,
#formatSizeSelect:hover {
    background-image: url("img/icon-to-option.svg");
}

#boardFontSizeSelect:active,
#formatSizeSelect:active {
    background-image: url("img/icon-size-active.svg");
}

#boardFontSizeSelect,
#formatSizeSelect {
    margin-right: 0 !important;
    width: calc(var(--toolSize) * 1) !important;
    background-color: var(--toolBackground);
}

#boardFontSizeSelect,
#formatSizeSelect {
    background-image: url("img/icon-size.svg");
}


/*=== converted employeeTag ===*/

.node-e-board:hover {
    outline: var(--outlineTag);
    outline-offset: var(--outlineOffset);
}

.node-n-board:active,
.node-e-board:active {
    opacity: 0.4;
    outline: var(--outlineTag);
    outline-offset: var(--outlineOffset);
}

.node-e-board.enlarge {
    border-radius: calc(var(--nodeBorderRadius)*1);
    background-color: var(--itemBackgroundColor);
    width: var(--nodeWidthScaleFactor);
    /*height: calc(var(--nodeHeightScaleFactor)*3);*/
    position: relative;
}

.node-e-board {
    padding-top: 2px;
    border-radius: calc(var(--nodeBorderRadius)*1);
    background-color: var(--itemBackgroundColor);
    width: var(--nodeWidthScaleFactor);
    height: calc(var(--nodeHeightScaleFactor)*1);
    position: relative;
}

.node-e-board p {
    font-size: var(--node-E-FontSize);
    line-height: calc(var(--node-E-FontSize) * 1.25);
    max-width: calc(100% - (var(--node-E-FontSize) * 1.9));
    margin: calc(var(--node-E-FontSize)*0.21) calc(var(--node-E-FontSize)*0.3) 0px calc(var(--node-E-FontSize)*0.4);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* select endevent und board-templates */


/* board-templates */

.model.work-day-week {
    width: 80%;
}

.weiss .model.endevent:hover,
.gelb .model.endevent:hover,
.weiss .model.work-day-week:hover,
.gelb .model.work-day-week:hover,
.enlarge.weiss .model.board-templates:hover,
.enlarge.gelb .model.board-templates:hover {
    background-image: url(img/icon-select-template-dark-hover.svg);
    color: var(--textDarkColor);
}

.weiss .model.endevent,
.gelb .model.endevent,
.weiss .model.work-day-week,
.gelb .model.work-day-week,
.enlarge.weiss .model.board-templates,
.enlarge.gelb .model.board-templates {
    background-image: url(img/icon-select-template-dark.svg);
    color: color-mix(in srgb, var(--textDarkColor) 50%, transparent);
}

.model.board-templates:hover {
    color: color-mix(in srgb, var(--textLightColor) 100%, transparent);
}

.model.endevent:hover,
.model.work-day-week:hover,
.enlarge .model.board-templates:hover {
    background-image: url(img/icon-select-template-hover.svg);
    color: color-mix(in srgb, var(--textLightColor) 100%, transparent);
}

.enlarge .model.board-templates {
    max-width: calc(100% - var(--toolSize)*1.2)!important;
    pointer-events: all;
    cursor: pointer;
    padding: calc(var(--node-E-FontSize) * 0.0) calc(var(--node-E-FontSize) * 0.1) 0 calc(var(--node-E-FontSize) * 2.1);
    background-image: url(img/icon-select-template.svg);
}

.model.endevent,
.model.work-day-week,
.model.board-templates {
    background-image: url(img/icon-select-template.svg);
    background-size: calc(var(--toolSize)*1.25) calc(var(--toolSize)*1.2);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 0.5% center;
}

.model.endevent,
.model.work-day-week,
.enlarge .model.board-templates {
    background-image: url(img/icon-select-template.svg);
    background-size: calc(var(--toolSize)*1.25) calc(var(--toolSize)*1.2);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 0.5% center;
}

.weiss .model.board-templates:hover,
.gelb .model.board-templates:hover {
    background-image: url(img/icon-select-template-dark-hover.svg);
    color: color-mix(in srgb, var(--textDarkColor) 100%, transparent);
}

.weiss .model.board-templates,
.gelb .model.board-templates {
    background-image: url(img/icon-select-template-dark.svg);
    color: color-mix(in srgb, var(--textDarkColor) 50%, transparent);
}

.board-bg-gelb .transparent .model:hover,
.board-bg-weiss .transparent .model:hover {
    background-image: url(img/icon-select-template-dark-hover.svg);
    color: color-mix(in srgb, var(--textDarkColor) 100%, transparent);
}

.weiss .model,
.gelb .model,
.board-bg-gelb .transparent .model,
.board-bg-weiss .transparent .model {
    background-image: url(img/icon-select-template-dark.svg);
    color: color-mix(in srgb, var(--textDarkColor) 50%, transparent);
}

.board-bg-schwarz .transparent .model,
.board-bg-grau .transparent .model,
.board-bg-violett .transparent .model,
.board-bg-blau .transparent .model,
.board-bg-tuerkis .transparent .model,
.board-bg-gruen .transparent .model,
.board-bg-orange .transparent .model,
.board-bg-rot .transparent .model,
select.model {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
    outline: none;
    font-family: var(--fontFamily);
    font-weight: var(--fontWeightLight);
    padding: calc(var(--node-E-FontSize) * 0.0) calc(var(--node-E-FontSize) * 0.1) 0 calc(var(--toolSize) * 1.3);
    font-size: calc(var(--node-E-FontSize) * 1);
    margin: 0px 0px 0px 0px;
    color: color-mix(in srgb, var(--textLightColor) 40%, transparent);
    background-image: url(img/icon-select-template.svg);
    background-size: calc(var(--toolSize)*1.25) calc(var(--toolSize)*1.2);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 0.5% center;
}


/* COUNTDOWN NODE */


/* btn-flex */

.btn-flex {
    pointer-events: none;
    display: none;
}

.enlarge .btn-flex {
    pointer-events: all;
    position: relative;
    min-width: 99.4%;
    max-width: 99.4%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    margin-bottom: 4px
}

.contact-input.template-name {
    max-width: 85%;
    cursor: text;
}


/* btn-flex end */


/* countdownset */

.datebox {
    background-color: transparent;
    justify-content: space-between;
    display: flex;
    align-items: flex-start;
    /* flex-flow: nowrap; */
    flex-wrap: nowrap;
}

.contact-input.countdown-date,
.contact-input.countdown-time {
    font-size: calc(var(--node-E-FontSize) * 0.91)!important;
    height: calc(var(--node-E-FontSize) * 2);
    overflow: visible;
    font-weight: var(--fontWeightMedium);
    font-family: var(--fontFamily);
    color: var(--textLightColor);
    left: calc(var(--toolSizeMinus) * 0.2);
    top: calc(var(--node-E-FontSize) * 0.20);
}

.contact-input.countdown-date {
    padding: calc(var(--node-E-FontSize) * 0.1) 0px calc(var(--node-E-FontSize) * 0.1) calc(var(--node-E-FontSize) * 2);
}

.contact-input.countdown-time {
    padding: calc(var(--node-E-FontSize) * 0.1) 0px calc(var(--node-E-FontSize) * 0.1) calc(var(--node-E-FontSize) * 1.7);
}

.contact-input.countdown-date,
.contact-input.countdown-time {
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: 6% center;
    background-size: 24px;
}


/* countdown date */

.board-bg-gelb .transparent .contact-input.countdown-date,
.board-bg-weiss .transparent .contact-input.countdown-date,
.weiss .contact-input.countdown-date,
.gelb .contact-input.countdown-date {
    background-image: url(img/icon-calendar-hover.svg);
}

.contact-input.countdown-date {
    background-image: url(img/icon-calendar.svg);
}


/* countdown time */

.board-bg-gelb .transparent .contact-input.countdown-time,
.board-bg-weiss .transparent .contact-input.countdown-time,
.gelb .contact-input.countdown-time,
.weiss .contact-input.countdown-time {
    background-image: url(img/icon-timeset-active.svg);
}

.contact-input.countdown-time {
    background-image: url(img/icon-timeset-hover.svg);
}

.board-bg-gelb .transparent .countdown-title,
.board-bg-weiss .transparent .countdown-title,
.gelb .countdown-title,
.weiss .countdown-title {
    color: var(--textDarkColor);
}

.board-bg-weiss .enlarge.transparent .node-tool.countdownset.is-enlarged:hover,
.board-bg-gelb .enlarge.transparent .node-tool.countdownset.is-enlarged:hover,
.enlarge.weiss .node-tool.countdownset.is-enlarged:hover,
.enlarge.gelb .node-tool.countdownset.is-enlarged:hover {
    background-color: transparent !important;
    background-image: url("img/icon-space-dark-hover.svg");
}

.board-bg-weiss .enlarge.transparent .node-tool.countdownset.is-enlarged,
.board-bg-gelb .enlarge.transparent .node-tool.countdownset.is-enlarged,
.enlarge.weiss .node-tool.countdownset.is-enlarged,
.enlarge.gelb .node-tool.countdownset.is-enlarged {
    background-color: transparent !important;
    background-image: url("img/icon-space-dark.svg");
}

.enlarge .node-tool.countdownset.is-enlarged:hover {
    background-color: transparent !important;
    background-image: url("img/icon-space-hover.svg");
}

.enlarge .node-tool.countdownset.is-enlarged {
    background-color: transparent !important;
    background-image: url("img/icon-space.svg");
}


/**/

.board-bg-weiss .transparent .node-tool.countdownset:hover,
.board-bg-gelb .transparent .node-tool.countdownset:hover,
.weiss .node-tool.countdownset:hover,
.gelb .node-tool.countdownset:hover {
    background-color: transparent !important;
    background-image: url("img/icon-countdown-dark-hover.svg");
}

.board-bg-weiss .transparent .node-tool.countdownset,
.board-bg-gelb .transparent .node-tool.countdownset,
.weiss .node-tool.countdownset,
.gelb .node-tool.countdownset {
    background-color: transparent !important;
    background-image: url("img/icon-countdown-dark.svg");
}


/**/

.node-tool.countdownset:hover {
    background-color: transparent !important;
    float: right;
    background-image: url("img/icon-countdown-hover.svg");
}

.node-tool.countdownset:active {
    background-color: transparent !important;
    float: right;
    background-image: url("img/icon-countdown-active.svg");
}

.node-tool.countdownset {
    background-color: transparent !important;
    float: right;
    background-image: url("img/icon-countdown.svg");
}


/* countdownstart */

.board-bg-weiss .transparent .node-tool.countdownstart:hover,
.board-bg-gelb .transparent .node-tool.countdownstart:hover,
.weiss .node-tool.countdownstart:hover,
.gelb .node-tool.countdownstart:hover {
    background-color: transparent !important;
    background-image: url("img/icon-start-dark-active.svg");
}

.board-bg-weiss .transparent .node-tool.countdownstart:active,
.board-bg-gelb .transparent .node-tool.countdownstart:active,
.weiss .node-tool.countdownstart:active,
.gelb .node-tool.countdownstart:active {
    background-color: transparent !important;
    background-image: url("img/icon-start-dark.svg");
}

.board-bg-weiss .transparent .node-tool.countdownstart,
.board-bg-gelb .transparent .node-tool.countdownstart,
.weiss .node-tool.countdownstart,
.gelb .node-tool.countdownstart {
    background-color: transparent !important;
    background-image: url("img/icon-start-dark.svg");
}

.node-tool.countdownstart:hover {
    background-color: transparent !important;
    background-image: url("img/icon-start-hover.svg");
}

.node-tool.countdownstart:active {
    background-color: transparent !important;
    background-image: url("img/icon-start-active.svg");
}

.node-tool.countdownstart {
    background-color: transparent !important;
    float: right;
    background-image: url("img/icon-start.svg");
}

.node-s-board.countdown.draggable {
    height: calc(var(--node-E-FontSize) * 5.5);
    overflow: visible;
    margin: 0;
    padding: calc(var(--node-E-FontSize) * 0.05) 0 calc(var(--node-E-FontSize) * 0.5) 0;
}

.node-s-board.countdown.draggable.enlarge {
    height: auto;
    overflow: visible;
}

.node-s-board.countdown > .overbox {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: clip;
    border-radius: inherit;
}

.node-s-board.countdown.draggable.enlarge > .overbox {
    height: auto;
    overflow: visible;
}


/* countdown-settings */

.countdown-settings {
    position: relative;
    background-color: hsla(212, 50%, 30%, 0.2);
    min-height: calc(var(--node-E-FontSize) * 6.2);
    max-height: calc(var(--node-E-FontSize) * 6.2);
    padding: calc(var(--node-E-FontSize) * 0.3) calc(var(--node-E-FontSize) * 0.1) calc(var(--node-E-FontSize) * 0.3) calc(var(--node-E-FontSize) * 0.1)!important;
    margin: calc(var(--node-E-FontSize) * 0.3) 0 calc(var(--node-E-FontSize) * 0.2) calc(var(--node-E-FontSize) * 0);
}


/* countdownpause */

.board-bg-weiss .transparent .node-tool.countdownpause:hover,
.board-bg-gelb .transparent .node-tool.countdownpause:hover,
.weiss .node-tool.countdownpause:hover,
.gelb .node-tool.countdownpause:hover {
    background-color: transparent !important;
    background-image: url("img/icon-pause-dark-active.svg");
}

.board-bg-weiss .transparent .node-tool.countdownpause:active,
.board-bg-gelb .transparent .node-tool.countdownpause:active,
.weiss .node-tool.countdownpause:active,
.gelb .node-tool.countdownpause:active {
    background-color: transparent !important;
    background-image: url("img/icon-pause-dark.svg");
}

.board-bg-weiss .transparent .node-tool.countdownpause,
.board-bg-gelb .transparent .node-tool.countdownpause,
.weiss .node-tool.countdownpause,
.gelb .node-tool.countdownpause {
    background-color: transparent !important;
    background-image: url("img/icon-pause-dark.svg");
}

.node-tool.countdownpause:hover {
    background-color: transparent !important;
    background-image: url("img/icon-stop-hover.svg");
}

.node-tool.countdownpause:active {
    background-color: transparent !important;
    background-image: url("img/icon-stop-active.svg");
}

.node-tool.countdownpause {
    background-color: transparent !important;
    float: right;
    background-image: url("img/icon-stop.svg");
}


/* countdownreset */

.board-bg-weiss .transparent .node-tool.countdownreset:hover,
.board-bg-gelb .transparent .node-tool.countdownreset:hover,
.weiss .node-tool.countdownreset:hover,
.gelb .node-tool.countdownreset:hover {
    background-color: transparent !important;
    background-image: url("img/icon-reset-dark-active.svg");
}

.board-bg-weiss .transparent .node-tool.countdownreset:active,
.board-bg-gelb .transparent .node-tool.countdownreset:active,
.weiss .node-tool.countdownreset:active,
.gelb .node-tool.countdownreset:active {
    background-color: transparent !important;
    background-image: url("img/icon-reset-dark.svg");
}

.board-bg-weiss .transparent .node-tool.countdownreset,
.board-bg-gelb .transparent .node-tool.countdownreset,
.weiss .node-tool.countdownreset,
.gelb .node-tool.countdownreset {
    background-color: transparent !important;
    background-image: url("img/icon-reset-dark.svg");
}

.node-tool.countdownreset:hover {
    background-color: transparent !important;
    background-image: url("img/icon-reset-hover.svg");
}

.node-tool.countdownreset:active {
    background-color: transparent !important;
    background-image: url("img/icon-reset-active.svg");
}

.node-tool.countdownreset {
    background-color: transparent !important;
    background-image: url("img/icon-reset.svg");
}


/* COUNTDOWN NODE END */


/*nodetools*/

.enlarge .templatebox p {
    top: 0;
    position: relative;
    width: 80%;
}

.templatebox p {
    position: relative;
    min-width: calc(100% - 25px);
}

.templatebox,
.nodeinfobox {
    margin-top: 1px;
    position: relative;
    float: left;
    overflow: hidden;
    height: 100%;
    width: calc(var(--nodeWidthScaleFactor)/1.2);
}


/* resize */

/* Mail-Template-Node Resize */



.node-s-board.templates-node {
    min-width: calc(var(--nodeWidthScaleFactor)*1);
}

.node-s-board.templates-node .template-resize-zone {
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    background: transparent;
    cursor: col-resize;
    z-index: 30;
}

.node-s-board.templates-node:not(.enlarge) .template-resize-zone {
    display: none;
}

.node-s-board.templates-node.is-manual-size .templatebox,
.node-s-board.templates-node.is-manual-size .btn-flex {
    width: calc(100% - 4px);
    max-width: none;
}

.node-s-board.templates-node.is-manual-size .temp-subject {
    width: calc(100% - (var(--toolSize))*1.3);
    max-width: none;
}

.node-s-board.templates-node.is-manual-size .newtemplate {
    width: calc(100% - (var(--toolSize))*0.2);
    max-width: none;
}

.node-s-board.templates-node.is-resizing {
    user-select: none;
}

/* resize */

/* wichtig */

.node-tool.timeset.is-ticking.is-enlarged {
    background-image: url("img/icon-timeset-on.svg")!important;
}

.node-s-board.enlarge .templatebox,
.node-s-board.enlarge .nodeinfobox {
    width: calc(var(--nodeWidthScaleFactor)*0.98);
}

.node-s-board.enlarge .templatebox .enlarge-space,
.node-s-board.enlarge .nodeinfobox .enlarge-space {
    height: calc(var(--node-E-FontSize) * 1.5)
}


/*.position.summary-decimal-compact,*/

.gelb .templatebox p,
.weiss .templatebox p,
.gelb .nodeinfobox p,
.weiss .nodeinfobox p {
    color: var(--textDarkColor);
}


/* NEW NODE-S-BOARD */

.node-s-board.is-selected {
    outline: 1px dashed color-mix(in srgb, var(--accentColor) 72%, white 16%);
    outline-offset: var(--outlineOffset);
    z-index: 45;
}

.node-s-board.is-active {
    outline: var(--outlineTag);
    outline-offset: var(--outlineOffset);
    z-index: 50;
}

.node-s-board.weiss.is-active,
.node-s-board.gelb.is-active,
.board-bg-weiss .node-s-board.transparent.is-active,
.board-bg-gelb .node-s-board.transparent.is-active {
    outline: var(--darkOutline);
}


/* FARBVARIANTEN */


/* Farbvarianten für Summary Nodes */

.node-s-board.rot {
    background: var(--boardRot);
}

.node-s-board.orange {
    background: var(--boardOrange);
}

.node-s-board.gelb {
    background: var(--boardGelb);
}

.node-s-board.gruen {
    background: var(--boardGruen);
}

.node-s-board.tuerkis {
    background: var(--boardTuerkis);
}

.node-s-board.blau {
    background: var(--boardBlau);
}

.node-s-board.violett {
    background: var(--boardViolett);
}

.node-s-board.grau {
    background: var(--boardGrau);
}

.node-s-board.weiss {
    background: var(--boardWeiss);
    color: var(--textDarkColor);
}

.node-s-board.schwarz {
    background: var(--boardSchwarz);
}

.node-s-board.trans,
.node-s-board.transparent {
    background: transparent;
    outline: 1px dashed hsla(212, 20%, 100%, 0.25);
}


/* helle Nodes = dunkle Schrift */

.node-s-board.gelb,
.node-s-board.weiss,
.node-s-board.gelb .position,
.node-s-board.weiss .position,
.node-s-board.gelb .tleg,
.node-s-board.weiss .tleg,
.node-s-board.gelb .dezimal,
.node-s-board.weiss .dezimal,
.node-s-board.gelb .employeename,
.node-s-board.weiss .employeename {
    color: var(--textDarkColor);
}


/* transparent auf hellem Board = dunkle Schrift + dunkle Kontur */

.board-bg-gelb .node-s-board.transparent,
.board-bg-gelb .node-s-board.trans,
.board-bg-weiss .node-s-board.transparent,
.board-bg-weiss .node-s-board.trans {
    background: transparent;
    outline: 1px dashed hsla(212, 0%, 0%, 0.32);
}

.board-bg-gelb .node-s-board.transparent,
.board-bg-gelb .node-s-board.transparent p,
.board-bg-gelb .node-s-board.trans,
.board-bg-gelb .node-s-board.trans p,
.board-bg-weiss .node-s-board.transparent,
.board-bg-weiss .node-s-board.transparent p,
.board-bg-weiss .node-s-board.trans,
.board-bg-weiss .node-s-board.trans p {
    color: var(--textDarkColor) !important;
}


/* Delete / Summing Icons auf hellen Nodes */

.node-s-board.gelb .node-delete,
.node-s-board.weiss .node-delete,
.board-bg-gelb .node-s-board.transparent .node-delete,
.board-bg-weiss .node-s-board.transparent .node-delete {
    background-color: transparent !important;
    background-image: url(img/icon-delete-dark.svg);
}

.node-s-board.gelb .node-delete:hover,
.node-s-board.weiss .node-delete:hover,
.board-bg-gelb .node-s-board.transparent .node-delete:hover,
.board-bg-weiss .node-s-board.transparent .node-delete:hover {
    background-color: transparent !important;
    background-image: url(img/icon-delete-on-dark.svg) !important;
}


/* NEW NODE-S-BOARD END */

.node-delete:hover {
    background-color: transparent !important;
    background-image: url(img/icon-delete-on.svg);
}

.node-delete:active {
    background-color: transparent !important;
    background-image: url(img/icon-delete-hover.svg);
}


/* timeset */

.board-bg-gelb .transparent .node-tool.timeset:hover,
.board-bg-weiss .transparent .node-tool.timeset:hover,
.weiss .node-tool.timeset:hover,
.gelb .node-tool.timeset:hover {
    background-image: url("img/icon-timeset-active.svg");
}

.board-bg-gelb .transparent .node-tool.timeset:active,
.board-bg-weiss .transparent .node-tool.timeset:active,
.weiss .node-tool.timeset:active,
.gelb .node-tool.timeset:active {
    background-image: url("img/icon-timeset-active.svg");
}

.board-bg-gelb .transparent .node-tool.timeset,
.board-bg-weiss .transparent .node-tool.timeset,
.weiss .node-tool.timeset,
.gelb .node-tool.timeset {
    background-color: transparent !important;
    background-image: url("img/icon-timeset-dark.svg");
}

.node-tool.timeset.is-enlarged,
.node-tool.timeset:hover {
    background-color: transparent !important;
    background-image: url("img/icon-timeset-hover.svg");
}

.node-tool.timeset:active {
    background-image: url("img/icon-timeset-active.svg");
}

.node-tool.timeset {
    float: right;
    background-image: url("img/icon-timeset.svg");
}

.node-tool.timeset.is-ticking {
    float: right;
    background-image: url("img/icon-timeset-on.svg");
}

.node-tool.timestart:hover {
    background-color: transparent !important;
    background-image: url("img/icon-start-hover.svg");
}


/* timestart */

.node-tool.timestart:active {
    background-color: transparent !important;
    background-image: url("img/icon-start-active.svg");
}

.node-tool.timestart {
    background-color: transparent !important;
    float: right;
    background-image: url("img/icon-start.svg");
}


/* timeadjust */

.board-bg-gelb .transparent .node-tool.timeadjust:hover,
.board-bg-weiss .transparent .node-tool.timeadjust:hover,
.weiss .node-tool.timeadjust:hover,
.gelb .node-tool.timeadjust:hover {
    background-image: url("img/icon-timeadjust-dark-hover.svg");
}

.board-bg-gelb .transparent .node-tool.timeadjust:active,
.board-bg-weiss .transparent .node-tool.timeadjust:active,
.weiss .node-tool.timeadjust:active,
.gelb .node-tool.timeadjust:active {
    background-image: url("img/icon-timeadjust-active.svg");
}

.board-bg-gelb .transparent .node-tool.timeadjust,
.board-bg-weiss .transparent .node-tool.timeadjust,
.weiss .node-tool.timeadjust,
.gelb .node-tool.timeadjust {
    right: calc(var(--toolSizeMinus)/0.98);
    top: var(--toolSize);
    float: right;
    background-color: transparent !important;
    background-image: url("img/icon-timeadjust-dark.svg");
}

.node-tool.timeadjust:hover {
    background-image: url("img/icon-timeadjust-hover.svg");
}

.node-tool.timeadjust:active {
    background-image: url("img/icon-timeadjust-active.svg");
}

.node-tool.timeadjust {
    right: calc(var(--toolSizeMinus)/0.98);
    top: var(--toolSize);
    float: right;
    background-color: transparent !important;
    background-image: url("img/icon-timeadjust.svg");
}


/* is-paused */

.node-tool.timestart.is-paused:hover {
    background-image: url("img/icon-start-hover.svg");
}

.node-tool.timestart.is-paused:active {
    background-image: url("img/icon-start-active.svg");
}

.node-tool.timestart.is-paused {
    background-image: url("img/icon-pause.svg");
}


/* timestop */

.node-tool.timestop:hover {
    background-color: transparent !important;
    background-image: url("img/icon-stop-hover.svg");
}

.node-tool.timestop:active {
    background-color: transparent !important;
    background-image: url("img/icon-stop-active.svg");
}

.node-tool.timestop {
    background-color: transparent !important;
    float: right;
    background-image: url("img/icon-stop.svg");
}


/* timereset */

.node-tool.timereset:hover {
    background-color: transparent !important;
    background-image: url("img/icon-reset-hover.svg");
}

.node-tool.timereset:active {
    background-color: transparent !important;
    background-image: url("img/icon-reset-active.svg");
}

.node-tool.timereset {
    background-color: transparent !important;
    background-image: url("img/icon-reset.svg");
}


/*nodetools end*/

.node-s-board:hover,
.node-e-board:hover {
    outline: var(--outlineTag);
    outline-offset: var(--outlineOffset);
}

.node-s-board:active,
.node-n-board:active,
.node-e-board:active {
    opacity: 0.4;
    outline: var(--outlineTag);
    outline-offset: var(--outlineOffset);
}

.node-e-board,
.node-s-board {
    padding: 0px 0px 0px 4px;
}


/* Board Templates */

.templatebox {
    z-index: -1;
}


/* Neues Template Eingabefeld */


/* placeholder :empty */

.board-bg-gelb .transparent .temp-subject[contenteditable="true"]:before,
.board-bg-weiss .transparent .temp-subject[contenteditable="true"]:before,
.gelb .temp-subject[contenteditable="true"]:before,
.weiss .temp-subject[contenteditable="true"]:before,
.board-bg-gelb .transparent .newtemplate[contenteditable="true"]:before,
.board-bg-weiss .transparent .newtemplate[contenteditable="true"]:before,
.gelb .newtemplate[contenteditable="true"]:before,
.weiss .newtemplate[contenteditable="true"]:before {
    content: attr(placeholder);
    color: color-mix(in srgb, var(--textDarkColor) 40%, transparent);
}

.temp-subject[contenteditable="true"]:before,
.newtemplate[contenteditable="true"]:before {
    content: attr(placeholder);
    color: color-mix(in srgb, var(--textLightColor) 40%, transparent);
}

.board-bg-weiss .transparent .temp-subject,
.board-bg-gelb .transparent .temp-subject,
.weiss .temp-subject,
.gelb .temp-subject {
    color: var(--textDarkColor);
}

.temp-subject {
    width: calc(100% - (var(--toolSize))*1.3);
    border: none;
    padding: calc(var(--node-E-FontSize)*0.2);
    font-size: calc(var(--node-E-FontSize)*0.9);
    margin: calc(var(--node-E-FontSize)*0.2);
    line-height: calc(var(--node-E-FontSize)*1.4);
    border-radius: calc(var(--borderRadius)/2);
    color: var(--textLightColor);
    background-color: hsla(80, 30%, 30%, 0.2);
    cursor: text;
}

.board-bg-weiss .transparent .newtemplate,
.board-bg-gelb .transparent .newtemplate,
.weiss .newtemplate,
.gelb .newtemplate {
    color: var(--textDarkColor);
}

.newtemplate {
    width: calc(100% - (var(--toolSize))*0.4);
    border: none;
    padding: calc(var(--node-E-FontSize)*0.2);
    font-size: calc(var(--node-E-FontSize)*0.9);
    margin: calc(var(--node-E-FontSize)*0.2);
    line-height: calc(var(--node-E-FontSize)*1.4);
    border-radius: calc(var(--borderRadius)/2);
    color: var(--textLightColor);
    background-color: hsla(212, 30%, 30%, 0.2);
    cursor: text;
}

.enlarge .templatebox,
.enlarge .nodeinfobox {
    padding-bottom: calc(var(--node-E-FontSize) * 0.6);
}

.node-e-board.enlarge {
    border-radius: calc(var(--nodeBorderRadius)*1);
    background-color: var(--itemBackgroundColor);
    width: var(--nodeWidthScaleFactor);
    height: calc(var(--nodeHeightScaleFactor)*2.9);
    position: relative;
}

.node-s-board.enlarge {
    border-radius: calc(var(--nodeBorderRadius)*1);
    background-color: var(--itemBackgroundColor);
    height: auto;
    position: relative;
}

.node-s-board,
.node-e-board {
    border-radius: calc(var(--nodeBorderRadius)*1);
    background-color: var(--itemBackgroundColor);
    width: var(--nodeWidthScaleFactor);
    height: calc(var(--nodeHeightScaleFactor)*1);
    position: relative;
}

.node-department-color {
    border-radius: 0 calc(var(--nodeBorderRadius)*0.9) calc(var(--nodeBorderRadius)*0.9) 0;
    display: inline-block;
    background-color: grey;
    height: 100%;
    width: calc(var(--node-E-FontSize) * 1.55);
    min-width: 29px;
    position: relative;
    right: 0px;
    float: right;
    top: 0px;
    z-index: 0;
    overflow: visible;
}

.node-e-board .node-avatar {
    pointer-events: none;
    height: auto;
    position: absolute;
    bottom: 0;
    z-index: 1;
    width: calc(var(--node-E-FontSize)*3.6);
    right: calc(var(--node-E-FontSize) * 0.7);
}

.node-s-board p,
.node-e-board p {
    font-size: var(--node-E-FontSize);
    line-height: calc(var(--node-E-FontSize) * 1.25);
    max-width: calc(100% - (var(--node-E-FontSize) * 1));
    margin: calc(var(--node-E-FontSize)*0.21) calc(var(--node-E-FontSize)*0.3) 0px calc(var(--node-E-FontSize)*0.5);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.node-s-board .sumtoolbox .node-delete:hover,
.node-s-board .sumtoolbox .node-delete {
    background-color: transparent !important;
}

.timegrid {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    font-family: MyNumbers, sans-serif;
    color: hsla(92, 12%, 62%, 1);
    text-align: center;
    margin: calc(var(--node-E-FontSize) * 0.7) calc(var(--node-E-FontSize) * 0.45) calc(var(--node-E-FontSize) * 0.4) calc(var(--node-E-FontSize) * 0.45);
}

.spalte {
    flex-grow: 0;
}

.timedisplay {}

.weiss .tleg,
.gelb .tleg,
.board-bg-weiss .tleg,
.board-bg-gelb .tleg {
    color: var(--textLightColor);
}

.weiss .tleg,
.gelb .tleg,
.board-bg-weiss .transparent .tleg,
.board-bg-gelb .transparent .tleg .board-bg-weiss .tleg,
.board-bg-gelb .tleg {
    color: var(--textDarkColor);
}

.tleg {
    width: 90%;
    font-family: var(--fontFamily);
    font-size: calc(var(--node-E-FontSize) * 0.65)!important;
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--node-E-FontSize) * 0.2);
    color: var(--textLightColor);
}

.working-month,
.days,
.working-days,
.hours,
.minutes,
.seconds {
    margin-right: calc(var(--node-E-FontSize) / 2.5);
    font-size: calc(var(--node-E-FontSize) * 1.75);
    border-radius: calc(var(--node-E-FontSize) / 4);
    padding: calc(var(--node-E-FontSize) / 2.6) calc(var(--node-E-FontSize) / 3) calc(var(--node-E-FontSize) * 0.1) calc(var(--node-E-FontSize) / 4);
    background-color: var(--timeDisplayColor);
    box-shadow: inset 0px 1px 6px hsla(212, 10%, 0%, 0.6);
    -webkit-box-shadow: inset 0px 1px 6px hsla(212, 10%, 0%, 0.6);
    border-bottom: 0.5px solid hsla(212, 10%, 100%, 0.15);
    border-left: 0.5px solid hsla(212, 10%, 100%, 0.1);
    border-right: 0.5px solid hsla(212, 10%, 100%, 0.1);
}

.nodeinfobox .dezimal {
    padding-top: calc(var(--node-E-FontSize) * 0.3);
    padding-bottom: calc(var(--node-E-FontSize) * 0);
}

.node-s-board .summary-decimal-compact {
    font-size: calc(var(--node-E-FontSize) * 0.88);
    line-height: calc(var(--node-E-FontSize) * 1.25);
    margin-top: calc(var(--node-E-FontSize) * 0.18);
    margin-bottom: calc(var(--node-E-FontSize) * 0.25);
    opacity: 0.95;
}

.node-s-board .summary-decimal-compact span {
    font-weight: 700;
}

.node-s-board.enlarge .summary-decimal-compact {
    display: none;
}

.dezimal span {
    font-weight: 700;
}

.working-month,
.days,
.working-days {
    color: hsla(212, 40%, 75%, 1);
}

.hours,
.minutes,
.seconds {
    color: hsla(212, 40%, 75%, 1);
}

.sumtoolbox {
    right: 0px;
    position: absolute;
}

.nodetoolbox {
    position: relative;
}

.sumtoolbox,
.nodetoolbox {
    top: calc(var(--node-E-FontSize) * 0.04);
    float: right;
    z-index: 3;
    /*float: right;*/
    overflow: hidden;
    width: calc(var(--toolSize) * 1);
    right: calc(var(--node-E-FontSize) * 0.15);
}

.sumtoolbox {
    height: auto;
}

.nodetoolbox {
    height: calc(100% - 4px);
}

.node-s-board.node-delete:hover,
.node-delete:hover {
    background-color: transparent !important;
    background-image: url(img/icon-delete-on.svg);
}

.node-delete:active {
    background-color: transparent !important;
    background-image: url(img/icon-delete-hover.svg);
}

.node-s-board:hover .node-delete,
.node-e-board:hover .node-delete {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

.position {
    width: calc(var(--nodeWidthScaleFactor)/1.5);
    color: color-mix(in srgb, var(--textLightColor) 40%, transparent);
}

.enlarge .position {
    width: calc(var(--nodeWidthScaleFactor)/1.3);
}

.node-contact-board .node-tool.node-delete {
    right: -24px;
    z-index: 1;
}

.tool-container.node.node-delete {
    right: calc(var(--toolSizeMinus)*1);
}

.node-delete {
    float: right;
    pointer-events: none;
    background-attachment: scroll;
    background-image: url(img/icon-delete.svg);
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(.5, 0, .2, 1);
}

.node-tool {
    width: calc(var(--toolSize) * 1);
    height: calc(var(--toolSize) * 1);
    position: relative;
    background-color: var(--transparent) !important;
    background-size: calc(var(--toolSize)*1.3);
    -webkit-background-size: calc(var(--toolSize)*1.3);
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    pointer-events: all;
    opacity: 1;
}


/* summing */

.board-bg-gelb .transparent .node-tool.summing:hover,
.board-bg-weiss .transparent .node-tool.summing:hover,
.gelb .node-tool.summing:hover,
.weiss .node-tool.summing:hover {
    background-color: transparent !important;
    background-image: url("img/icon-summing-active.svg");
}

.board-bg-gelb .transparent .node-tool.summing,
.board-bg-weiss .transparent .node-tool.summing,
.gelb .node-tool.summing,
.weiss .node-tool.summing {
    background-color: transparent !important;
    background-image: url("img/icon-summing-dark.svg");
}

.gelb .node-tool.summing.is-enlarged:hover,
.weiss .node-tool.summing.is-enlarged:hover {
    background-color: transparent !important;
    background-image: url("img/icon-space-dark-hover.svg");
}

.gelb .node-tool.summing.is-enlarged,
.weiss .node-tool.summing.is-enlarged {
    background-color: transparent !important;
    background-image: url("img/icon-space-dark.svg");
}

.node-tool.summing.is-enlarged:hover {
    background-color: transparent !important;
    background-image: url("img/icon-space-hover.svg");
}

.node-tool.summing.is-enlarged {
    background-color: transparent !important;
    background-image: url("img/icon-space.svg");
}

.node-tool.summing:hover {
    background-color: transparent !important;
    background-image: url("img/icon-summing-hover.svg");
}

.node-tool.summing.is-ticking {
    background-color: transparent !important;
    background-image: url("img/icon-timeset-on.svg");
}

.node-tool.summing:active {
    background-image: url("img/icon-summing-active.svg");
}

.node-tool.summing {
    background-image: url("img/icon-summing.svg");
}


/* summing end */


/* node-templates */

.board-bg-gelb .transparent .node-tool.summing.temp:hover,
.board-bg-weiss .transparent .node-tool.summing.temp:hover,
.gelb .node-tool.summing.temp:hover,
.weiss .node-tool.summing.temp:hover {
    background-color: transparent !important;
    background-image: url("img/icon-select-template-dark-hover.svg");
}

.board-bg-gelb .transparent .node-tool.summing.temp,
.board-bg-weiss .transparent .node-tool.summing.temp,
.gelb .node-tool.summing.temp,
.weiss .node-tool.summing.temp {
    background-color: transparent !important;
    background-image: url("img/icon-select-template-dark.svg");
}

.gelb .node-tool.summing.temp.is-enlarged:hover,
.weiss .node-tool.summing.temp.is-enlarged:hover {
    background-color: transparent !important;
    background-image: url("img/icon-space-dark-hover.svg");
}

.gelb .node-tool.summing.temp.is-enlarged,
.weiss .node-tool.summing.temp.is-enlarged {
    background-color: transparent !important;
    background-image: url("img/icon-space-dark.svg");
}

.node-tool.summing.temp.is-enlarged:hover {
    background-color: transparent !important;
    background-image: url("img/icon-space-hover.svg");
}

.node-tool.summing.temp.is-enlarged {
    background-color: transparent !important;
    background-image: url("img/icon-space.svg");
}

.node-tool.summing.temp:hover {
    background-color: transparent !important;
    background-image: url("img/icon-pen-hover.svg");
}

.node-tool.summing.temp:active {
    background-image: url("img/icon-pen-active.svg");
}

.node-tool.summing.temp {
    background-image: url("img/icon-pen.svg");
}


/* node-templates end */


/* add-placeholder */


.node-s-board.templates-node.enlarge {
    padding-bottom: 6px;
}

.place {
    color: transparent !important;
}

.board-bg-gelb .transparent.enlarge .node-tool.add-placeholder:hover,
.board-bg-weiss .transparent.enlarge .node-tool.add-placeholder:hover,
.gelb.enlarge .node-tool.add-placeholder:hover,
.weiss.enlarge .node-tool.add-placeholder:hover {
    background-color: transparent !important;
    background-image: url("img/icon-add-placeholder-active.svg");
}

.board-bg-gelb .transparent.enlarge .node-tool.add-placeholder,
.board-bg-weiss .transparent.enlarge .node-tool.add-placeholder,
.gelb.enlarge .node-tool.add-placeholder,
.weiss.enlarge .node-tool.add-placeholder {
    background-color: transparent !important;
    background-image: url("img/icon-add-placeholder-dark.svg");
}

.enlarge .node-tool.add-placeholder:hover {
    background-color: transparent !important;
    background-image: url("img/icon-add-placeholder-hover.svg");
}

.enlarge .node-tool.add-placeholder:active {
    background-image: url("img/icon-add-placeholder-active.svg");
}

.enlarge .node-tool.add-placeholder {
    margin-top: calc(var(--toolSizeMinus)*0.3);
    pointer-events: all;
    background-image: url("img/icon-add-placeholder.svg");
}

.node-tool.add-placeholder {
    border: none;
    -webkit-appearance: none;
appearance: none;
    pointer-events: none;
    background-image: none;
}


/* add-placeholder end */



/* delete-templates */

.board-bg-gelb .transparent.enlarge .node-tool.delete-template:hover,
.board-bg-weiss .transparent.enlarge .node-tool.delete-template:hover,
.gelb.enlarge .node-tool.delete-template:hover,
.weiss.enlarge .node-tool.delete-template:hover {
    background-color: transparent !important;
    background-image: url("img/icon-delete-template-dark-hover.svg");
}

.board-bg-gelb .transparent.enlarge .node-tool.delete-template,
.board-bg-weiss .transparent.enlarge .node-tool.delete-template,
.gelb.enlarge .node-tool.delete-template,
.weiss.enlarge .node-tool.delete-template {
    background-color: transparent !important;
    background-image: url("img/icon-delete-template-dark.svg");
}

.enlarge .node-tool.delete-template:hover {
    background-color: transparent !important;
    background-image: url("img/icon-delete-template-hover.svg");
}

.enlarge .node-tool.delete-template:active {
    background-image: url("img/icon-delete-template-active.svg");
}

.enlarge .node-tool.delete-template {
    margin-top: calc(var(--toolSizeMinus)*0.3);
    pointer-events: all;
    background-image: url("img/icon-delete-template.svg");
}

.node-tool.delete-template {
    pointer-events: none;
    background-image: none;
}


/* delete-templates end */

.node-tool.timeset.is-enlarged,
.node-tool.timeset:hover {
    background-color: transparent !important;
    background-image: url("img/icon-timeset-hover.svg");
}

.node-tool.timeset:active {
    background-image: url("img/icon-timeset-active.svg");
}

.node-tool.timeset {
    background-image: url("img/icon-timeset.svg");
}

.node-tool.timestart:hover {
    background-color: transparent !important;
    background-image: url("img/icon-start-hover.svg");
}

.node-tool.timestart:active {
    background-color: transparent !important;
    background-image: url("img/icon-start-active.svg");
}

.node-tool.timestart {
    background-color: transparent !important;
    float: right;
    background-image: url("img/icon-start.svg");
}

.node-tool.timestop:hover {
    background-color: transparent !important;
    background-image: url("img/icon-stop-hover.svg");
}

.node-tool.timestop:active {
    background-color: transparent !important;
    background-image: url("img/icon-stop-active.svg");
}

.node-tool.timestop {
    background-color: transparent !important;
    float: right;
    background-image: url("img/icon-stop.svg");
}

.node-tool.timereset:hover {
    background-color: transparent !important;
    background-image: url("img/icon-reset-hover.svg");
}

.node-tool.timereset:active {
    background-color: transparent !important;
    background-image: url("img/icon-reset-active.svg");
}

.node-tool.timereset {
    background-color: transparent !important;
    background-image: url("img/icon-reset.svg");
}


/*nodetools end*/

.boardtool.text-link:hover,
.tool.text-link:hover {
    background-image: url("img/icon-link-hover.svg");
}

.boardtool.text-link:active,
.tool.text-link:active {
    background-image: url("img/icon-link-active.svg");
}

.boardtool.text-link,
.tool.text-link {
    background-image: url("img/icon-link.svg");
}


.tool.my-signatur-image:hover {
    background-image: url("img/icon-add-logo-hover.svg");
}


.tool.my-signatur-image:active {
    background-image: url("img/icon-add-logo-active.svg");
}


.tool.my-signatur-image {
    background-image: url("img/icon-add-logo.svg");
}


.boardtool.my-upload-btn:hover,
.tool.my-upload-btn:hover {
    background-image: url("img/icon-attatchment-hover.svg");
}

.boardtool.my-upload-btn:active,
.tool.my-upload-btn:active {
    background-image: url("img/icon-attatchment-active.svg");
}

.boardtool.my-upload-btn,
.tool.my-upload-btn {
    background-image: url("img/icon-attatchment.svg");
}

.boardtool.board-save.to-saved:hover {
    background-image: url(img/icon-save-animate-hover.svg);
}

.boardtool.board-save.to-saved:active {
    background-image: url(img/icon-save-animate-active.svg);
}


.boardtool.board-save.pro-save:hover {
background-image: url(img/icon-big-save-on-hover.svg);
}

.boardtool.board-save,
.boardtool.board-save.pro-save {
-webkit-transition: width .8s cubic-bezier(.8, .01, .2, 1);
    -moz-transition: width .8s cubic-bezier(.8, .01, .2, 1);
    -ms-transition: width .8s cubic-bezier(.8, .01, .2, 1);
    -o-transition: width .8s cubic-bezier(.8, .01, .2, 1);
    transition: width .8s cubic-bezier(.8, .01, .2, 1);
}

.boardtool.board-save.pro-save {
    width: calc(var(--toolSize) * 8) !important;
    height: calc(var(--toolSize) * 1) !important;
    background-size: calc(var(--toolSize)*3.1) calc(var(--toolSize)*1.3)!important;
    -webkit-background-size: calc(var(--toolSize)*3.1) calc(var(--toolSize)*1.3)!important;
    background-image: url(img/icon-big-save-on.svg);
}

.boardtool.board-save.to-saved {
    background-image: url(img/icon-save-animate.svg);
}


/**/

.boardtool.board-save:hover {
    background-image: url(img/icon-save-on.svg);
}

.boardtool.board-save:active {
    background-image: url(img/icon-save-hover.svg);
}

.boardtool.board-save {
    right: 1.2px;
    background-image: url(img/icon-save.svg);
}


/**/

.board-bg-weiss .transparent .boardtool.board-save:hover,
.board-bg-gelb .transparent .boardtool.board-save:hover,
.weiss .boardtool.board-save:hover,
.gelb .boardtool.board-save:hover {
    background-image: url(img/icon-save-active.svg);
}

.board-bg-weiss .transparent .boardtool.board-save:active,
.board-bg-gelb .transparent .boardtool.board-save:active,
.weiss .boardtool.board-save:active,
.gelb .boardtool.board-save:active {
    background-image: url(img/icon-save-dark.svg);
}

.board-bg-weiss .transparent .boardtool.board-save,
.board-bg-gelb .transparent .boardtool.board-save,
.weiss .boardtool.board-save,
.gelb .boardtool.board-save {
    background-image: url(img/icon-save-dark.svg);
}


/* add-countdownevent */

.board-bg-weiss .transparent .node-tool.add-countdownevent:hover,
.board-bg-gelb .transparent .node-tool.add-countdownevent:hover,
.weiss .node-tool.add-countdownevent:hover,
.gelb .node-tool.add-countdownevent:hover {
    background-color: transparent !important;
    background-image: url("img/icon-add-event-dark-hover.svg");
}

.board-bg-weiss .transparent .node-tool.add-countdownevent:active,
.board-bg-gelb .transparent .node-tool.add-countdownevent:active,
.weiss .node-tool.add-countdownevent:active,
.gelb .node-tool.add-countdownevent:active {
    background-color: transparent !important;
    background-image: url("img/icon-add-event-dark.svg");
}

.board-bg-weiss .transparent .node-tool.add-countdownevent,
.board-bg-gelb .transparent .node-tool.add-countdownevent,
.weiss .node-tool.add-countdownevent,
.gelb .node-tool.add-countdownevent {
    background-color: transparent !important;
    background-image: url("img/icon-add-event-dark.svg");
}

.node-tool.add-countdownevent:hover {
    background-color: transparent !important;
    background-image: url("img/icon-add-event-hover.svg");
}

.node-tool.add-countdownevent:active {
    background-color: transparent !important;
    background-image: url("img/icon-add-event-dark-hover.svg");
}

.node-tool.add-countdownevent {
    background-color: transparent !important;
    background-image: url("img/icon-add-event.svg");
}

.boardtool.add-mail-temp-node:hover {
    background-image: url(img/icon-add-mail-template-hover.svg);
}

.boardtool.add-mail-temp-node:active {
    background-image: url(img/icon-add-mail-template-active.svg);
}

.boardtool.add-mail-temp-node {
    background-image: url(img/icon-add-mail-template.svg);
}

.boardtool.add-countdown-node:hover {
    background-image: url(img/icon-add-countdown-hover.svg);
}

.boardtool.add-countdown-node:active {
    background-image: url(img/icon-add-countdown-active.svg);
}

.boardtool.add-countdown-node {
    background-image: url(img/icon-add-countdown.svg);
}

.boardtool.add-external-employee:hover {
    background-image: url(img/icon-external-employee-hover.svg);
}

.boardtool.add-external-employee:active {
    background-image: url(img/icon-external-employee-active.svg);
}

.boardtool.add-external-employee {
    background-image: url(img/icon-external-employee.svg);
}

.boardtool.add-time-summary:hover {
    background-image: url(img/icon-time-summary-hover.svg);
}

.boardtool.add-time-summary:active {
    background-image: url(img/icon-time-summary-active.svg);
}

.boardtool.add-time-summary {
    background-image: url(img/icon-time-summary.svg);
}

.boardtool.add-time-employee:hover {
    background-image: url(img/icon-employee-time-hover.svg);
}

.boardtool.add-time-employee:active {
    background-image: url(img/icon-employee-time-active.svg);
}

.boardtool.add-time-employee {
    background-image: url(img/icon-employee-time.svg);
}

.boardtool.add-team-employee:hover {
    background-image: url(img/icon-team-employee-hover.svg);
}

.boardtool.add-team-employee:active {
    background-image: url(img/icon-team-employee-active.svg);
}

.boardtool.add-team-employee {
    background-image: url(img/icon-team-employee.svg);
}

.boardtool.add-small-node:hover {
    background-image: url(img/icon-add-small-node-hover.svg);
}

.boardtool.add-small-node:active {
    background-image: url(img/icon-add-small-node-active.svg);
}

.boardtool.add-small-node {
    background-image: url(img/icon-add-small-node.svg);
}

.boardtool.add-note:hover {
    background-image: url(img/icon-add-note-hover.svg);
}

.boardtool.add-note:active {
    background-image: url(img/icon-add-note-active.svg);
}

.boardtool.add-note {
    background-image: url(img/icon-add-note.svg);
}

.boardtool.h1:hover {
    background-image: url(img/icon-h1-hover.svg);
}

.boardtool.h1:active {
    background-image: url(img/icon-h1-active.svg);
}

.boardtool.h1 {
    background-image: url(img/icon-h1.svg);
}

.boardtool.h2:hover {
    background-image: url(img/icon-h2-hover.svg);
}

.boardtool.h2:active {
    background-image: url(img/icon-h2-active.svg);
}

.boardtool.h2 {
    background-image: url(img/icon-h2.svg);
}

.boardtool.h3:hover {
    background-image: url(img/icon-h3-hover.svg);
}

.boardtool.h3:active {
    background-image: url(img/icon-h3-active.svg);
}

.boardtool.h3 {
    background-image: url(img/icon-h3.svg);
}

.boardtool.h4:hover {
    background-image: url(img/icon-h4-hover.svg);
}

.boardtool.h4:active {
    background-image: url(img/icon-h4-active.svg);
}

.boardtool.h4 {
    background-image: url(img/icon-h4.svg);
}

.boardtool.h5:hover {
    background-image: url(img/icon-h5-hover.svg);
}

.boardtool.h5:active {
    background-image: url(img/icon-h5-active.svg);
}

.boardtool.h5 {
    background-image: url(img/icon-h5.svg);
}

.boardtool.h6:hover {
    background-image: url(img/icon-h6-hover.svg);
}

.boardtool.h6:active {
    background-image: url(img/icon-h6-active.svg);
}

.boardtool.h6 {
    background-image: url(img/icon-h6.svg);
}

.boardtool.code-inline:hover {
    background-image: url(img/icon-code-inline-hover.svg);
}

.boardtool.code-inline:active {
    background-image: url(img/icon-code-inline-active.svg);
}

.boardtool.code-inline {
    background-image: url(img/icon-code-inline.svg);
}

.boardtool.paragraph:hover {
    background-image: url(img/icon-p-hover.svg);
}

.boardtool.paragraph:active {
    background-image: url(img/icon-p-active.svg);
}

.boardtool.paragraph {
    background-image: url(img/icon-p.svg);
}

.boardtool.normaltext:hover {
    background-image: url(img/icon-text-hover.svg);
}

.boardtool.normaltext:active {
    background-image: url(img/icon-text-active.svg);
}

.boardtool.normaltext {
    background-image: url(img/icon-text.svg);
}

.boardtool.board-redo:hover {
    background-image: url(img/icon-redo-hover.svg);
}

.boardtool.board-redo:active {
    background-image: url(img/icon-redo-active.svg);
}

.boardtool.board-redo {
    background-image: url(img/icon-redo.svg);
}

.boardtool.board-undo:hover {
    background-image: url(img/icon-undo-hover.svg);
}

.boardtool.board-undo:active {
    background-image: url(img/icon-undo-active.svg);
}

.boardtool.board-undo {
    background-image: url(img/icon-undo.svg);
}

.boardtool.board-import:hover {
    background-image: url(img/icon-import-hover.svg);
}

.boardtool.board-import:active {
    background-image: url(img/icon-import-active.svg);
}

.boardtool.board-import {
    background-image: url(img/icon-import.svg);
}

.boardtool.board-export:hover {
    background-image: url(img/icon-export-hover.svg);
}

.boardtool.board-export:active {
    background-image: url(img/icon-export-active.svg);
}

.boardtool.board-export {
    background-image: url(img/icon-export.svg);
}

.boardtool.active,
.tool.active {
    border: 1px solid var(--accentColor);
    /*border-radius: var(--borderRadius);*/
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}


/* General Tools */

.generaltool.board-fit-window:hover {
    background-image: url(img/icon-board-fit-window-hover.svg);
}

.generaltool.board-fit-window:active {
    background-image: url(img/icon-board-fit-window-active.svg);
}

.generaltool.board-fit-window {
    background-image: url(img/icon-board-fit-window.svg);
}

.generaltool.board-pen:hover {
    background-image: url(img/icon-pen-hover.svg);
}

.generaltool.board-pen:active {
    background-image: url(img/icon-pen-active.svg);
}

.generaltool.board-pen {
    background-image: url(img/icon-pen.svg);
}

.generaltool.board-snapping.magnetized:hover {
    background-image: url("img/icon-snapping-on-hover.svg");
}

.generaltool.board-snapping.magnetized {
    background-image: url("img/icon-snapping-on.svg");
}

.generaltool.board-snapping:hover {
    background-image: url("img/icon-snapping-hover.svg");
}

.generaltool.board-snapping:active {
    background-image: url("img/icon-snapping-active.svg");
}

.generaltool.board-snapping {
    background-image: url("img/icon-snapping.svg");
}

.generaltool.raster:hover {
    background-image: url("img/icon-background-hover.svg");
}

.generaltool.raster:active {
    background-image: url("img/icon-background-active.svg");
}

.generaltool.raster {
    background-image: url("img/icon-background.svg");
}

.generaltool.my-reset-btn:hover,
.tool.my-reset-btn:hover {
    background-image: url("img/icon-trash-on.svg");
}

.generaltool.my-reset-btn:active,
.tool.my-reset-btn:active {
    background-image: url("img/icon-trash-hover.svg");
}

.generaltool.my-reset-btn,
.tool.my-reset-btn {
    background-image: url("img/icon-trash.svg");
}

.generaltool.board-html:hover {
    background-image: url(img/icon-board-html-hover.svg);
}

.generaltool.board-html:active {
    background-image: url(img/icon-board-html-active.svg);
}

.generaltool.board-html {
    background-image: url(img/icon-tool-html.svg);
}

.generaltool.board-fit:hover {
    background-image: url(img/icon-zoom-fit-hover.svg);
}

.generaltool.board-fit:active {
    background-image: url(img/icon-zoom-fit-active.svg);
}

.generaltool.board-fit {
    background-image: url(img/icon-zoom-fit.svg);
}

.generaltool.board-zoom-in:hover {
    background-image: url(img/icon-zoom-in-hover.svg);
}

.generaltool.board-zoom-in:active {
    background-image: url(img/icon-zoom-in-active.svg);
}

.generaltool.board-zoom-in {
    background-image: url(img/icon-zoom-in.svg);
}

.generaltool.board-zoom-out:hover {
    background-image: url(img/icon-zoom-out-hover.svg);
}

.generaltool.board-zoom-out:active {
    background-image: url(img/icon-zoom-out-active.svg);
}

.generaltool.board-zoom-out {
    background-image: url(img/icon-zoom-out.svg);
}

.tool-container {
    width: calc(var(--toolSize) * 1) !important;
    margin: 0 0 0 0;
    border-radius: var(--borderRadius);
}


/*.node-contact-board .tool-toggle.add-icons {
    margin-left: -1.2px;
}*/

.tool-toggle.add-icons:hover {
    background-color: transparent !important;
    background-image: url(img/icon-icon-hover.svg);
}

.tool-toggle.add-icons:active {
    background-color: transparent !important;
    background-image: url(img/icon-icon-active.svg);
}

.tool-toggle.add-icons {
    background-image: url(img/icon-icon.svg);
}


/* wenn die Hintergrundfarbe weiss ist und das Node transparent */

.transparent .tool-toggle.add-icons:hover {
    background-color: transparent !important;
    background-image: url(img/icon-icon-hover-dark.svg);
}

.transparent .tool-toggle.add-icons:active {
    background-color: transparent !important;
    background-image: url(img/icon-icon-dark.svg);
}

.transparent .tool-toggle.add-icons {
    background-image: url(img/icon-icon-dark.svg);
}

.tool-toggle.add-colors:hover {
    background-color: transparent !important;
    background-image: url(img/icon-pipette-hover.svg);
}

.tool-toggle.add-colors:active {
    background-color: transparent !important;
    background-image: url(img/icon-pipette-active.svg);
}

.tool-toggle.add-colors {
    background-image: url(img/icon-pipette.svg);
}


/* general-tools */

.tool-toggle.general-tools:hover {
    background-color: transparent !important;
}

.tool-toggle.general-tools:active {
    background-color: transparent !important;
}

.tool-toggle.general-tools:hover {
    background-image: url(img/icon-generaltool-hover.svg);
}

.tool-toggle.general-tools:active {
    background-image: url(img/icon-generaltool-active.svg);
}

.tool-toggle.general-tools {
    background-image: url(img/icon-generaltool.svg);
}

.tool-toggle.general-tools.offen {
    background-color: transparent;
    background-image: url(img/icon-space.svg);
}


/* add-nodes */

.tool-toggle.add-nodes:hover {
    background-color: transparent !important;
}

.tool-toggle.add-nodes:active {
    background-color: transparent !important;
}

.tool-toggle.add-nodes:hover {
    background-image: url(img/icon-add-hover.svg);
}

.tool-toggle.add-nodes:active {
    background-image: url(img/icon-add-active.svg);
}

.tool-toggle.add-nodes {
    background-image: url(img/icon-add.svg);
}

.tool-toggle.add-nodes.offen {
    background-color: transparent;
    background-image: url(img/icon-space.svg);
}


/* add-format */

.tool-toggle.add-format:hover {
    background-color: transparent !important;
}

.tool-toggle.add-format:active {
    background-color: transparent !important;
}

.tool-toggle.add-format:hover {
    background-image: url(img/icon-add-format-hover.svg);
}

.tool-toggle.add-format:active {
    background-image: url(img/icon-add-format-active.svg);
}

.tool-toggle.add-format {
    background-image: url(img/icon-add-format.svg);
}

.tool-toggle.add-format.offen {
    background-color: transparent;
    background-image: url(img/icon-space.svg);
}


/* add-shapes */

.tool-toggle.add-shapes:hover {
    background-color: transparent !important;
}

.tool-toggle.add-shapes:active {
    background-color: transparent !important;
}

.tool-toggle.add-shapes:hover {
    background-image: url(img/icon-add-hover.svg);
}

.tool-toggle.add-shapes:active {
    background-image: url(img/icon-add-active.svg);
}

.tool-toggle.add-shapes {
    background-image: url(img/icon-add.svg);
}

.tool-toggle.add-icons.offen,
.tool-toggle.add-colors.offen {
    background-color: transparent !important;
    background-image: url(img/icon-space.svg) !important;
}

.board-bg-gelb .transparent .tool-toggle.add-icons.offen:hover,
.board-bg-weiss .transparent .tool-toggle.add-icons.offen:hover,
.gelb .tool-toggle.add-icons.offen:hover,
.weiss .tool-toggle.add-icons.offen:hover {
    background-color: transparent !important;
    background-image: url(img/icon-space-dark-hover.svg)!important;
}

.tool-toggle.add-icons.offen:hover {
    background-color: transparent !important;
    background-image: url(img/icon-space-hover.svg);
}

.board-bg-gelb .transparent .tool-toggle.add-icons.offen,
.board-bg-weiss .transparent .tool-toggle.add-icons.offen,
.gelb .tool-toggle.add-icons.offen,
.weiss .tool-toggle.add-icons.offen {
    background-color: transparent !important;
    background-image: url(img/icon-space-dark.svg)!important;
}

.tool-toggle.add-shapes.offen {
    background-color: transparent;
    background-image: url(img/icon-space.svg);
}

.tool-toggle:hover {
    cursor: pointer;
    background-color: var(--lightColor);
}


/*.tool-toggle.offen {
    background-color: var(--lightColor);
}*/

.tool-container.node {
    float: right;
    margin-top: var(--toolSize);
}

.to-table {
    position: relative;
    /* max-width: calc(var(--toolSize) * 3.06)!important; */
    margin-left: calc(var(--toolSizeMinus)*1);
    background-color: var(--toolBackground);
    padding-bottom: 1px !important;
    height: auto;
}

.color-grid {
    background-color: var(--toolBackground);
}

.tool-content.to-center {
    position: absolute;
    width: calc(var(--toolSize) * 1);
    background-color: var(--toolBackground);
}

.tool-content {
    border-radius: calc(var(--borderRadius)*1.4) !important;
    width: calc(var(--toolSize) * 3.07);
}

.tool-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: var(--borderRadius);
    -webkit-box-shadow: var(--shadow);
    box-shadow: var(--shadow);
}

.tool-content p {}


/*.color-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-content:center;
}*/


/*=== Colors ===*/

.boardtool.rot:hover {
    background-image: url(img/icon-rot-hover.svg);
}

.boardtool.rot,
.boardtool.rot:active {
    background-image: url(img/icon-rot.svg);
}

.boardtool.orange:hover {
    background-image: url(img/icon-orange-hover.svg);
}

.boardtool.orange,
.boardtool.orange:active {
    background-image: url(img/icon-orange.svg);
}

.boardtool.gelb:hover {
    background-image: url(img/icon-gelb-hover.svg);
}

.boardtool.gelb,
.boardtool.gelb:active {
    background-image: url(img/icon-gelb.svg);
}

.boardtool.gruen:hover {
    background-image: url(img/icon-gruen-hover.svg);
}

.boardtool.gruen,
.boardtool.gruen:active {
    background-image: url(img/icon-gruen.svg);
}

.boardtool.tuerkis:hover {
    background-image: url(img/icon-tuerkis-hover.svg);
}

.boardtool.tuerkis,
.boardtool.tuerkis:active {
    background-image: url(img/icon-tuerkis.svg);
}

.boardtool.blau:hover {
    background-image: url(img/icon-blau-hover.svg);
}

.boardtool.blau,
.boardtool.blau:active {
    background-image: url(img/icon-blau.svg);
}

.boardtool.violett:hover {
    background-image: url(img/icon-violett-hover.svg);
}

.boardtool.violett,
.boardtool.violett:active {
    background-image: url(img/icon-violett.svg);
}

.boardtool.weiss:hover {
    background-image: url(img/icon-weiss-hover.svg);
}

.boardtool.weiss,
.boardtool.weiss:active {
    background-image: url(img/icon-weiss.svg);
}

.boardtool.grau:hover {
    background-image: url(img/icon-grau-hover.svg);
}

.boardtool.grau,
.boardtool.grau:active {
    background-image: url(img/icon-grau.svg);
}

.boardtool.schwarz:hover {
    background-image: url(img/icon-schwarz-hover.svg);
}

.boardtool.schwarz,
.boardtool.schwarz:active {
    background-image: url(img/icon-schwarz.svg);
}

.boardtool.rot,
.boardtool.orange,
.boardtool.gelb,
.boardtool.gruen,
.boardtool.tuerkis,
.boardtool.blau,
.boardtool.violett,
.boardtool.schwarz,
.boardtool.weiss,
.boardtool.grau,
.boardtool.transparent,
.boardtool.hex,
.generaltool.wire-solid,
.generaltool.wire-dashed,
.generaltool.wire-animated {
    background-color: var(--transparent) !important;
    background-size: calc(var(--toolSize)*1.3);
    -webkit-background-size: calc(var(--toolSize)*1.3);
    background-attachment: scroll;
    background-position: center;
    background-repeat: no-repeat;
}

.generaltool.wire-solid,
.generaltool.wire-dashed,
.generaltool.wire-animated {
    border-radius: 0 0 var(--borderRadius) var(--borderRadius) !important;
    border-top: 1px solid hsla(212, 20%, 100%, 0.2);
}

.boardtool.transparent:hover {
    background-color: var(--transparent) !important;
    background-image: url(img/icon-transparent-hover.svg) !important;
}

.boardtool.transparent:active {
    background-image: url(img/icon-transparent-active.svg) !important;
}

.boardtool.transparent {
    background-image: url(img/icon-transparent.svg) !important;
}

.boardtool.hex:hover {
    background-color: var(--transparent) !important;
    background-image: url(img/icon-hex-hover.svg)!important;
}

.boardtool.hex:active {
    background-image: url(img/icon-hex-active.svg) !important;
}

.boardtool.hex {
    background-image: url(img/icon-hex.svg) !important;
}

.generaltool.wire-solid:hover {
    background-color: var(--transparent) !important;
    background-image: url(img/icon-wire-solid-hover.svg)!important;
}

.generaltool.wire-solid:active {
    background-image: url(img/icon-wire-solid-active.svg) !important;
}

.generaltool.wire-solid {
    background-image: url(img/icon-wire-solid.svg) !important;
}

.generaltool.wire-dashed:hover {
    background-color: var(--transparent) !important;
    background-image: url(img/icon-wire-dashed-hover.svg)!important;
}

.generaltool.wire-dashed:active {
    background-image: url(img/icon-wire-dashed-active.svg) !important;
}

.generaltool.wire-dashed {
    background-image: url(img/icon-wire-dashed.svg) !important;
}

.generaltool.wire-animated:hover {
    background-color: var(--transparent) !important;
    background-image: url(img/icon-wire-animated-hover.svg)!important;
}

.generaltool.wire-animated:active {
    background-image: url(img/icon-wire-animated-active.svg) !important;
}

.generaltool.wire-animated {
    background-image: url(img/icon-wire-animated.svg) !important;
}


/*=== TOOL END ===*/

.tag-employee-mail {
    margin: calc(var(--spaces) * 0.4) 0 0 calc(var(--spaces) * 0.4);
}

.message-adress-button:hover .chat-select {
    background-color: var(--textLightColor)!important;
    background-image: url("img/icon-chat-animate-hover.svg");
}

.message-adress-button:hover .tag-e-write--list {
    background-color: var(--textLightColor)!important;
    background-image: url("img/icon-edit-hover.svg");
}

.message-adress-button:hover .tag-select {
    background-color: var(--textLightColor)!important;
    background-image: url("img/icon-mail-hover.svg");
}

.message-adress-button:active .chat-select,
.message-adress-button .chat-select:active,
.message-adress-button .chat-select {
    background-color: transparent !important;
    background-image: url("img/icon-chat-animate.svg");
}

.message-adress-button:active .tag-e-write--list,
.tag-e-write .tag-e-write--list:active,
.message-adress-button .tag-e-write--list {
    background-color: transparent !important;
    background-image: url("img/icon-edit.svg");
}

.message-adress-button:active .tag-select,
.message-adress-button .tag-select:active,
.message-adress-button .tag-select {
    background-color: transparent !important;
    background-image: url("img/icon-mail.svg");
}

.message-adress-button.chat-active .chat-select:hover {
    background-color: var(--employeeColor) !important;
    background-image: url("img/icon-chat-animate-select.svg")!important;
}

.message-adress-button.chat-active .chat-select {
    background-color: var(--textLightColor) !important;
    background-image: url("img/icon-chat-animate-hover-select.svg")!important;
}

.message-adress-button .chat-select:hover {
    background-color: var(--employeeColor) !important;
    background-image: url("img/icon-chat-animate.svg");
}

.message-adress-button .chat-select {
    margin: calc(var(--spaces) * 0.2) calc(var(--spaces) * 0.4) calc(var(--spaces) * 0.5) 0;
}

.message-adress-button .tag-select.selected:active {
    background-color: var(--employeeColor);
    background-image: url("img/icon-mail-hover.svg")!important;
}

.message-adress-button:active .tag-select.selected {
    background-color: var(--employeeColor);
    background-image: url("img/icon-mail.svg");
}

.message-adress-button .tag-select.selected {
    background-color: var(--textLightColor)!important;
    background-image: url("img/icon-mail-hover.svg");
}

.message-adress-button .tag-select:hover {
    background-color: var(--employeeColor) !important;
    background-image: url("img/icon-mail.svg");
}

.message-adress-button .tag-select {
    margin: calc(var(--spaces) * 0.2) calc(var(--spaces) * 0.3) calc(var(--spaces) * 0.5) 0;
}

.message-adress-button .tag-e-write--list:hover {
    background-color: var(--employeeColor) !important;
    background-image: url("img/icon-edit.svg");
}

.message-adress-button .tag-e-write--list {
    background-color: var(--employeeColor) !important;
    margin: calc(var(--spaces) * 0.86) 0 calc(var(--spaces) * 0.5) 0;
}

.message-adress-button .chat-select,
.message-adress-button .tag-select,
.message-adress-button .tag-e-write--list {
    position: relative;
    cursor: pointer;
    border-radius: calc(var(--borderRadius) / 2);
    width: calc(var(--spaces) * 2)!important;
    height: calc(var(--spaces) * 2)!important;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
    background-size: calc(var(--spaces)*2.4);
    -webkit-background-size: calc(var(--spaces)*2.4);
    /*box-shadow: var(--shadowBevel);
    -webkit-box-shadow: var(--shadowBevel);*/
}

.message-adress-button .chat-select[data-count]::after {
    content: attr(data-count);
    position: absolute;
    top: calc(var(--spacesMinus)*0.6);
    right: calc(var(--spacesMinus)*0.6);
    min-width: calc(var(--spaces)*1.2);
    height: calc(var(--spaces)*1.2);
    padding: 0 4px;
    border-radius: calc(var(--borderRadius)*2);
    font-size: calc(var(--fontSize)*0.8);
    line-height: calc(var(--fontSize)*1.1);
    background: var(--accentColor);
    color: var(--textLightColor);
    text-align: center;
    box-shadow: var(--shadow);
}


/*=== DepartmentTags End ===*/

#employeeTags .tag-delete:hover {
    background-image: url("img/icon-delete-hover.svg")!important;
}

#employeeTags .tag-delete:active,
#employeeTags .tag-delete {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-image: url("img/icon-delete.svg")!important;
}

.tag-e-edit:hover {
    background-image: url("img/icon-avatar-hover.svg");
}

.tag-e-edit:active,
.tag-e-edit {
    background-image: url("img/icon-avatar.svg");
}

.tag-e-edit {
    text-align: center;
    margin-top: calc(var(--spaces) / 2.1) !important;
    float: right !important;
    margin-left: 80%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: calc(var(--spaces)*2.4);
    background-position: center;
}

.tag-blend:hover {
    background-image: url("img/icon-unsorted-hover.svg") !important;
}

.send-button:hover.select-all-btn,
.tag-employee-mail:hover {
    background-image: url("img/icon-mail-hover.svg");
}

button.tag-select:hover,
.tag-employee-mail.is-selected,
.tag-depart-mail.is-selected {
    background-color: var(--lightColor) !important;
    background-image: url("img/icon-mail-hover.svg");
}

.accent-button.select-all-btn:hover {
    background-image: url("img/icon-mail-hover.svg")!important;
}

.accent-button.select-all-btn:active {
    background-image: url("img/icon-mail.svg")!important;
}

.accent-button.select-all-btn.all {
    background-color: var(--darkAccentColor);
    background-image: url("img/icon-mail-hover.svg");
}


/*=*/

button.tag-select,
.tag-employee-mail:active,
.tag-employee-mail,
.accent-button.select-all-btn.all,
.accent-button:active.select-all-btn,
.select-all-btn {
    background-size: calc(var(--spaces)*2.4) !important;
    background-position: center;
    background-image: url("img/icon-mail.svg");
}

button.tag-select.selected {
    background-color: var(--employeeColor) !important;
    background-image: url("img/icon-mail-hover.svg");
}

button.tag-select:active {
    cursor: pointer;
    width: 2.6vmin;
    height: 2.4vmin;
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--employeeColor) !important;
    background-image: url("img/icon-mail.svg");
}


/*=== Toggle Buttons ===*/

select#bulkTypeSelect.standart-input-new.employee-allowed {
    overflow: visible !important;
    min-height: calc(var(--spaces)*3.04);
}

#bulkTypeSelect:hover {
    background-image: url(img/icon-to-option.svg);
}

#bulkTypeSelect:active {
    background-image: url(img/icon-to-option.svg);
}

#bulkTypeSelect {
    background-image: url(img/icon-options.svg);
}

#bulkTypeSelect {
    padding: calc(var(--spaces)/1.6) var(--spaces) var(--spaces) calc(var(--spaces)*1) !important;
    font-size: var(--fontSize) !important;
}

#bulkSetBtn.is-selected:hover {
    background-image: url(img/icon-apply-animate-hover.svg);
}

#bulkSetBtn.is-selected:active,
#bulkSetBtn.is-selected {
    pointer-events: all;
    opacity: 1;
    background-image: url(img/icon-apply-animate.svg);
}

#bulkSetBtn {
    pointer-events: none;
    opacity: 0.5;
    background-image: url(img/icon-apply.svg);
}

#bulkSetBtn,
#bulkSetBtn.is-selected,
#bulkTypeSelect,
#bulkDeleteBtn,
#multiSelectToggle,
#save-server,
.logout,
.accent-button.my-chat-btn,
#selectAll,
#toggleMyTagSize,
.next-month,
.prev-month,
.accent-button.my-news-btn {
    text-align: left !important;
    padding: calc(var(--spaces)/1.3) var(--spaces) var(--spaces) calc(var(--spaces)*1);
    background-attachment: scroll;
    background-size: calc(var(--spaces)*2.4);
    background-position: calc(100% - calc(var(--spaces)/1.2)) center;
    background-repeat: no-repeat no-repeat;
}

#bulkDeleteBtn:hover {
    background-image: url(img/icon-delete-hover.svg);
}

#bulkDeleteBtn:active,
#bulkDeleteBtn {
    background-image: url(img/icon-delete.svg);
}

#multiSelectToggle.is-on:hover {
    background-image: url(img/icon-multiple-on-hover.svg);
}

#multiSelectToggle.is-on:active,
#multiSelectToggle.is-on {
    background-image: url(img/icon-multiple-on.svg);
}

#multiSelectToggle:hover {
    background-image: url(img/icon-multiple-on-hover.svg);
}

#multiSelectToggle:active,
#multiSelectToggle {
    background-image: url(img/icon-multiple.svg);
}

#save-server:hover {
    background-color: var(--lightColor) !important;
    background-image: url(img/icon-save-hover.svg) !important;
}

#save-server:active {
    background-color: var(--itemBackgroundColor) !important;
    color: var(--textLightColor) !important;
}

#save-server:active,
#save-server {
    background-image: url(img/icon-save.svg) !important;
}

#save-server {
    font-weight: var(--fontWeightLight);
    background-color: var(--signalColor) !important;
}

#toPortal:hover,
.logout:hover {
    background-image: url(img/icon-logout-hover.svg);
}

#toPortal:active,
#toPortal,
.logout:active,
.logout {
    background-image: url(img/icon-logout.svg);
}

.send-button:hover,
#pinboardPostBtn:hover,
#sendMessages:hover {
    background-image: url(img/icon-send-hover.svg);
}

#vacApplyBtn:hover {
    background-image: url(img/icon-apply-hover.svg) !important;
}

#vacApplyBtn:active,
#vacApplyBtn {
    background-image: url(img/icon-apply.svg) !important;
}

.send-button:active,
.send-button,
#pinboardPostBtn:active,
#pinboardPostBtn,
#sendMessages:active,
#sendMessages {
    min-width: 3vmin;
    background-image: url(img/icon-send.svg);
    background-size: calc(var(--spaces)*2.4);
    background-position: calc(100% - calc(var(--spaces)/1.2)) center !important;
    background-repeat: no-repeat no-repeat !important;
}

.accent-button.my-chat-btn:hover {
    background-image: url(img/icon-chat-animate-hover.svg);
}

.accent-button.my-chat-btn:active,
.accent-button.my-chat-btn {
    background-image: url(img/icon-chat-animate.svg);
}


/*input-with-button*/


/*.input-container.input-with-button {
min-width: 21.86vw !important;
-webkit-min-width: 21.86vw !important;    
    
}*/

.input-with-button {
    position: relative;
}

.input-with-button input {
    padding-right: 3.8vmin;
}

.input-inline-btn:hover {
    background-image: url(img/icon-to-return-hover.svg);
}

#pinboardPostBtn:hover {
    background-image: url(img/icon-send-hover.svg);
}

.input-inline-btn:active,
.input-inline-btn {
    background-image: url(img/icon-to-return.svg);
}

.chat-clear-inline:hover,
.input-inline-btn.templates:hover {
    background-image: url(img/icon-delete-hover.svg);
}

.accent-button.my-chat-btn.is-on:hover + .chat-clear-inline {
    background-image: url(img/icon-delete-hover.svg);
}

.accent-button.my-chat-btn {}

#deleteTemplateBtn:hover {
    background-image: url(img/icon-delete-hover.svg);
}

#deleteTemplateBtn:active,
#deleteTemplateBtn {
    background-image: url(img/icon-delete.svg);
}

.chat-clear-inline:active,
.chat-clear-inline,
.input-inline-btn.templates:active,
.input-inline-btn.templates {
    background-image: url(img/icon-delete.svg);
}

.chat-clear-inline,
.input-inline-btn {
    border-radius: 0 var(--borderRadius) var(--borderRadius) 0 !important;
    position: absolute;
    width: 4vmin;
    height: calc(var(--spaces) * 3);
    right: 0;
    bottom: 0px;
    background-color: var(--accentColor-b);
    background-attachment: scroll;
    background-size: calc(var(--spaces)*2.4);
    background-position: calc(100% - calc(var(--spaces)/1.2)) center;
    background-repeat: no-repeat;
    border: none;
    color: var(--lightColor);
    cursor: pointer;
    padding: 0;
}

.prev-month {
    float: right !important;
}

.prev-month,
.next-month {
    max-width: calc(var(--spaces)*4) !important;
    margin-right: 0 !important;
}

.prev-month:hover {
    background-image: url(img/icon-prev-hover.svg);
}

.prev-month:active,
.prev-month {
    background-image: url(img/icon-prev.svg);
}

.next-month:hover {
    background-image: url(img/icon-next-hover.svg);
}

.next-month:active,
.next-month {
    background-image: url(img/icon-next.svg);
}

#toggleMyTagSize.tags-small:hover,
.accent-button.tags-small:hover {
    background-image: url(img/icon-small-tag-hover.svg);
}

#toggleMyTagSize.tags-small:active,
#toggleMyTagSize.tags-small,
.accent-button.tags-small:active,
.accent-button.tags-small {
    background-image: url(img/icon-small-tag.svg);
}

#toggleMyTagSize.tags-large:hover,
.accent-button.tags-large:hover {
    background-image: url(img/icon-big-tag-hover.svg);
}

#toggleMyTagSize.tags-large:active,
#toggleMyTagSize.tags-large,
.accent-button.tags-large:active,
.accent-button.tags-large {
    background-image: url(img/icon-big-tag.svg);
}


/*=== DepartmentTags ===*/

#departmentTags {
    display: inline-flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
}

#departmentTags .tag-d:hover {
    background-color: var(--lightColor);
    color: var(--employeeColor);
}

#departmentTags .tag-d {
    background-color: var(--employeeColor);
}

#departmentTags {
    margin-top: var(--spacesMinus);
}


/* department-mail */

.tag-d:hover .tag-depart-mail.is-selected {
    background-color: var(--itemBackgroundColor) !important;
    background-image: url(img/icon-mail.svg)!important;
}

.tag-d .tag-depart-mail.is-selected:hover {
    background-color: var(--textLightColor) !important;
    background-image: url(img/icon-mail-hover.svg)!important;
}

.tag-d .tag-depart-mail.is-selected {
    background-color: var(--textLightColor) !important;
    background-image: url(img/icon-mail-hover.svg);
}

.tag-d:hover .tag-depart-mail {
    background-color: transparent;
    background-image: url(img/icon-mail-hover.svg);
}

.tag-d .tag-depart-mail:hover {
    background-color: var(--itemBackgroundColor) !important;
    background-image: url("img/icon-mail.svg")!important;
}

.tag-d:active .tag-depart-mail,
.tag-d .tag-depart-mail:active,
.tag-d .tag-depart-mail {
    background-image: url(img/icon-mail.svg);
}


/* department-unsorted */

.tag-d:hover .tag-blend.unsorted {
    background-color: transparent;
    background-image: url(img/icon-unsorted-hover.svg);
}

.tag-d .tag-blend.unsorted:hover {
    background-color: var(--itemBackgroundColor) !important;
    background-image: url("img/icon-unsorted.svg")!important;
}

.tag-d:active .tag-blend.unsorted,
.tag-d .tag-blend.unsorted:active,
.tag-d .tag-blend.unsorted {
    background-image: url(img/icon-unsorted.svg);
}


/* department-sorted */

.tag-d:hover .tag-blend.sorted {
    background-color: transparent;
    background-image: url(img/icon-sorted-hover.svg);
}

.tag-d .tag-blend.sorted:hover {
    background-color: var(--itemBackgroundColor) !important;
    background-image: url("img/icon-sorted.svg")!important;
}

.tag-d:active .tag-blend.sorted,
.tag-d .tag-blend.sorted:active,
.tag-d .tag-blend.sorted {
    background-image: url(img/icon-sorted.svg);
}


/* department-delete */

.tag-d:hover .tag-delete {
    background-color: transparent;
    background-image: url(img/icon-delete-hover.svg);
}

.tag-d .tag-delete:hover {
    background-color: var(--itemBackgroundColor) !important;
    background-image: url("img/icon-delete.svg")!important;
}

.tag-d:active .tag-delete,
.tag-d .tag-delete:active,
.tag-d .tag-delete {
    background-image: url(img/icon-delete.svg);
}

.tag-d .tag-delete {
    right: calc(var(--spaces)*0.15) !important;
}

.tag-blend,
.tag-depart-mail,
.tag-delete {
    margin-left: calc(var(--spaces) * 0.34);
    -webkit-background-size: calc(var(--spaces)*2.4);
    background-size: calc(var(--spaces)*2.4);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: scroll;
}

.tag-d button {
    float: right;
    height: 2vmin;
    width: 2vmin;
    line-height: 1.1vmin;
    font-size: calc(var(--fontSize) * 1.2);
    vertical-align: top;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: calc(var(--borderRadius) / 2);
    color: var(--textLightColor);
    cursor: pointer;
    clear: none;
}

.tag-d {
    flex-grow: 0;
    float: right;
    margin: calc(var(--spaces) * 0.5) calc(var(--spaces) * 1) calc(var(--spaces) * 0.5) 0;
}

.tag-d:hover p,
.tag-d-all:hover {
    background-color: var(--textLightColor) !important;
    color: var(--itemBackgroundColor) !important;
}

.tag-d:active {
    background: var(--itemBackgroundColor) !important;
    color: var(--textLightColor) !important;
}

.tag-d:active p {
    background: transparent !important;
    color: var(--textLightColor) !important;
}

.tag-d-all:active {
    background-color: var(--itemBackgroundColor) !important;
    color: var(--textLightColor) !important;
}

.tag-d-all:active,
.tag-d-all {
    background-image: url(img/icon-sorted.svg);
    -webkit-background-size: calc(var(--spaces)*2.4)!important;
    background-size: calc(var(--spaces)*2.4)!important;
    background-position: calc(100% - calc(var(--spaces)*0.7)) center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

.tag-d-all:hover {
    background-image: url(img/icon-sorted-hover.svg);
}

.tag-d-all:active {
    background-image: url(img/icon-sorted.svg) !important;
}

.tag-d-all,
.tag-d {
    text-align: left;
    line-height: calc(var(--fontSize) * 2);
    z-index: 99;
    flex-grow: 0;
    width: var(--avatarSize);
    height: calc(var(--spaces) * 3);
    background-color: grey;
    float: left;
    border-radius: var(--borderRadius);
    border: var(--border);
    padding: calc(var(--spaces) * 0.5) calc(var(--spaces) * 0.90) 0 calc(var(--spaces) * 1);
    margin: calc(var(--spaces) * 0.5) calc(var(--spaces) * 1) calc(var(--spaces) * 0.5) calc(var(--spaces) * 0);
}

.tag-d {
    width: var(--avatarSize);
    background-color: var(--employeeColor);
    border-radius: var(--borderRadius);
    cursor: pointer;
}

.tag-d p {
    color: var(--textLightColor);
    float: left;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 55%;
    font-size: calc(var(--fontSize) * 1.1);
    line-height: calc(var(--fontSize) * 1.8);
}


/* Visuelle Hinweise Countdown 
============================== */


/* Time Display wenn Event läuft */

.node-s-board.countdown.draggable.is-running .node-tool.countdownset {
    background-image: url(img/icon-timeset-on.svg);
}

.node-s-board.countdown.is-running .countdown-grid .seconds,
.node-s-board.countdown.is-running .countdown-grid .minutes,
.node-s-board.countdown.is-running .countdown-grid .hours,
.node-s-board.countdown.is-running .countdown-grid .days {
    opacity: 1;
    color: var(--isRunning);
}

.node-s-board.countdown.is-running .countdown-settings.is-current-event {
    border-bottom: none;
    background-image: linear-gradient(90deg, var(--isRunning) 80%, transparent 50%);
    background-repeat: repeat-x;
    background-size: 32px 4px;
    background-position: 0 100%;
    animation: border-crawl 3s infinite steps(50);
}

@keyframes border-crawl {
    from {
        background-position: 0 100%;
    }
    to {
        background-position: 32px 100%;
    }
}


/* Time Display wenn Event in weniger als 3 Tagen abläuft */

.node-s-board.countdown.draggable.is-soon .node-tool.countdownset {
    background-image: url(img/icon-timeset-on.svg);
}

.node-s-board.countdown.is-soon .countdown-grid .seconds,
.node-s-board.countdown.is-soon .countdown-grid .minutes,
.node-s-board.countdown.is-soon .countdown-grid .hours,
.node-s-board.countdown.is-soon .countdown-grid .days {
    opacity: 1;
    color: var(--isSoon);
}

.node-s-board.countdown.is-soon .countdown-settings.is-current-event {
    border-bottom: none;
    background-image: linear-gradient(90deg, var(--isSoon) 80%, transparent 50%);
    background-repeat: repeat-x;
    background-size: 32px 4px;
    background-position: 0 100%;
    animation: border-crawl 3s infinite steps(50);
}


/* Time Display wenn Event in weniger als 24 Stunden abläuft */

.node-s-board.countdown.draggable.is-warning .node-tool.countdownset {
    background-image: url(img/icon-timeset-on.svg);
}

.node-s-board.countdown.is-warning .countdown-grid .days {
    opacity: 1;
    color: color-mix(in srgb, var(--isWarning) 10%, transparent);
}

.node-s-board.countdown.is-warning .countdown-grid .seconds,
.node-s-board.countdown.is-warning .countdown-grid .minutes,
.node-s-board.countdown.is-warning .countdown-grid .hours {
    opacity: 1;
    color: var(--isWarning);
}

.node-s-board.countdown.is-warning .countdown-settings.is-current-event {
    border-bottom: none;
    background-image: linear-gradient(90deg, var(--isWarning) 80%, transparent 50%);
    background-repeat: repeat-x;
    background-size: 32px 4px;
    background-position: 0 100%;
    animation: border-crawl 3s infinite steps(50);
}


/* Time Display wenn Event in unter einer Stunden abläuft */

.node-s-board.countdown.draggable.is-critical .node-tool.countdownset {
    background-image: url(img/icon-timeset-on.svg);
}

.node-s-board.countdown.is-critical .countdown-grid .hours,
.node-s-board.countdown.is-critical .countdown-grid .days {
    opacity: 1;
    color: color-mix(in srgb, var(--isCritical) 20%, transparent);
}

.node-s-board.countdown.is-critical .countdown-grid .seconds,
.node-s-board.countdown.is-critical .countdown-grid .minutes {
    opacity: 1;
    color: var(--isCritical);
}

.node-s-board.countdown.is-critical .countdown-settings.is-current-event {
    border-bottom: none;
    background-image: linear-gradient(90deg, var(--isCritical) 80%, transparent 50%);
    background-repeat: repeat-x;
    background-size: 32px 4px;
    background-position: 0 100%;
    animation: border-crawl 3s infinite steps(50);
}


/* Time Display wenn Event abgelaufen */

.node-s-board.countdown.is-done .countdown-grid .seconds,
.node-s-board.countdown.is-done .countdown-grid .minutes,
.node-s-board.countdown.is-done .countdown-grid .hours,
.node-s-board.countdown.is-done .countdown-grid .days {
    opacity: 1;
    color: var(--isDone);
    -webkit-animation: displayblink 1.3s steps(26) infinite both;
    animation: displayblink 1.3s steps(26) infinite both;
}

@-webkit-keyframes displayblink {
    15% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    85% {
        opacity: 1;
    }
}

@keyframes displayblink {
    15% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
    85% {
        opacity: 1;
    }
}

.countdown-settings.is-event-done {
    border-bottom: 4px solid var(--isDone);
    -webkit-animation: borderblink 1.3s steps(26) infinite both;
    animation: borderblink 1.3s steps(26) infinite both;
}

.node-s-board.countdown.is-done .countdown-settings {
    border-bottom: 4px solid var(--isDone);
    -webkit-animation: borderblink 1.3s steps(26) infinite both;
    animation: borderblink 1.3s steps(26) infinite both;
}

@-webkit-keyframes borderblink {
    15% {
        border-bottom: 4px solid var(--isDone);
    }
    50% {
        border-bottom: 4px solid var(--isDoneTrans);
    }
    85% {
        border-bottom: 4px solid var(--isDoneRot);
    }
}

@keyframes borderblink {
    15% {
        border-bottom: 4px solid var(--isDone);
    }
    50% {
        border-bottom: 4px solid var(--isDoneTrans);
    }
    85% {
        border-bottom: 4px solid var(--isDone);
    }
}