[theme="light"] {
    --background-color-back: #f0f0f6;
    --background-color-back-alternate: #dddde5;
    --background-color-front: #fafafa;
    --button-hover: #1075d5;
    --shadow-medium:  rgba(0,0,0,0.05);
    --shadow-hard:  rgba(0,0,0,0.2);
    --shadow-light:  rgba(0,0,0,0.02);
    --shadow-calendar-day: rgba(0,0,0,0.05);
    --button-text-border: #c3c3c3;
    --button-font-color: black;
    --gradient-blue: linear-gradient(45deg, #1075d5, transparent);
    --gradient-light-blue: linear-gradient(45deg, #c0e0ff, transparent);
    --text-area-border: #D2D2D2;
    --today-shadow: 0px 0px 16px 8px rgba(0,0,0,0.3);
    --button-toggled: #408ed3;
    --validation-ok: rgb(0,255,0,0.2);
    --text-area-textcolor: black;
    --calendar-current-monthday: black;
    --button-fit-hover:black;
    --hint-border: #1075d5;
    --caption-color: black;
    --webkit-scrollbar : #f0f0f6;
    --webkit-scrollbar-thumb: #c3c3c3;
    --diagonal-pattern: repeating-linear-gradient(45deg, #818181 10px, #7e7e7e 12px, transparent 12px, transparent 20px);
    --disable-filter:   invert(8%) sepia(0%) saturate(0%) hue-rotate(194deg) brightness(94%) contrast(89%);
}

[theme="dark"] {
    --background-color-back: #282a36;
    --background-color-back-alternate: #363b4b;
    --background-color-front: #44475a;
    --button-hover: #ff79c6;
    --shadow-medium:  rgba(0,0,0,0.05);
    --shadow-hard:  rgba(0,0,0,0.2);
    --shadow-light:  rgba(0,0,0,0.02);
    --shadow-calendar-day: rgba(255, 255, 255, 0.05);
    --button-text-border: #c3c3c3;
    --button-font-color: white;
    --gradient-blue: linear-gradient(45deg, #1075d5, transparent);
    --gradient-light-blue: linear-gradient(45deg, #c0e0ff, transparent);
    --text-area-border: #D2D2D2;
    --today-shadow: 0px 0px 16px 8px rgba(0,0,0,0.3);
    --button-toggled: #ffb2d9;
    --validation-ok: rgb(0,255,0,0.2);
    --text-area-textcolor: white;
    --calendar-current-monthday: black;
    --button-fit-hover:black;
    --hint-border: #ff79c6;
    --caption-color: #e7e7e7;
    --webkit-scrollbar : #282a36;
    --webkit-scrollbar-thumb: #3d4050;
    --diagonal-pattern: repeating-linear-gradient(45deg, #eee 10px, #eee 12px, transparent 12px, transparent 20px);
    --disable-filter: invert(40%) sepia(15%) saturate(0%) hue-rotate(270deg) brightness(107%) contrast(84%);
}

::-webkit-scrollbar{
    background: var(--webkit-scrollbar);
    width:15px;
    border-radius: 5px;
}

::-webkit-scrollbar-track {
    background: var(--webkit-scrollbar);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: var(--webkit-scrollbar-thumb);
    border-radius: 5px;
}

.scrollbar-invisible::-webkit-scrollbar {
    display: none;
}

.lane {
    min-width: 185px;
    border-radius: 5px 5px 5px 5px;
    border : 1px solid var(--button-text-border);
}

.scrollbar-invisible {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.alternate-color-background {
    background-color: var(--background-color-front);
}


.force-alternate-color-background {
    background-color: var(--background-color-front) !important;
}

.alternate-color-background-back {
    background-color: var(--background-color-back-alternate);
}


[theme="dark"] body {
    scrollbar-color: var(--webkit-scrollbar-thumb) var(--webkit-scrollbar);
}

.force-filter-no {
    filter: none !important;
}




.caption-color {
    color: var(--caption-color)
}

.small-caption-color {
    color: var(--text-area-textcolor)
}

.background-color-back {
    background-color: var(--background-color-back);
    transition: 0.3s;
}

.shadow-large {
    box-shadow: 0px 0px 64px 32px var(--shadow-medium)
}

.shadow-small {
    box-shadow: 0px 0px 16px 8px var(--shadow-medium)
}

.box-invisible-small {
    box-shadow: 0px 0px 16px 8px var(--shadow-medium);
    padding:10px;
    border-radius: 15px 15px 15px 15px;
}

.shadow-small-hard {
    box-shadow: 0px 0px 16px 8px var(--shadow-hard);
}

.shadow-medium-bottom-left {
    box-shadow: -32px 32px 32px 16px var(--shadow-light);
}

.shadow-medium-bottom {
    box-shadow: 0px 32px 32px 16px var(--shadow-medium)
}

.shadow-medium-top-right {
    box-shadow: 32px -32px 32px 16px var(--shadow-light);
}

.shadow-medium-top-left {
    box-shadow: -32px -32px 32px 16px var(--shadow-light);
}

.background-color-front {
    background-color: var(--background-color-front);
    transition: 0.3s;
}

.is-small-list-button:hover {
    background-color: var(--button-hover);
    color: var(--background-color-front);
    box-shadow: 0px 0px 16px 8px var(--shadow-hard);
    border-radius: 10px;
    padding: 5px;
    transition: 0.1s;
}

.is-small-text-button:hover {
    background-color: var(--button-hover);
    color: var(--background-color-front);
    box-shadow: 0px 0px 16px 8px var(--shadow-hard);
    border-radius: 10px;
    padding: 5px;
    transition: 0.1s;
}

.is-small-text-button {
    background-color: var(--background-color-back);
    border-radius: 10px;
    border: 1px solid;
    border-color: var(--button-text-border);
    padding: 5px;
    transition: 0.1s;
    cursor: pointer;
    height: fit-content;
    color : var(--button-font-color);
}

.hovering {
    background-color: var(--button-hover) !important;
    color: var(--background-color-front) !important;
}

.is-button{
    background-color: var(--background-color-back);
    border-radius: 29px;
    border: 0px;
    color: var(--button-font-color);
    font-size: 15px;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.is-button-no-shadow:hover{
    background-color: var(--button-hover) !important;
    color: var(--background-color-front) !important;
    transition: 0.3s;
}

.is-button-no-shadow{
    background-color: var(--background-color-back);
    border-radius: 29px;
    border: 0px;
    color: var(--button-font-color);
    font-size: 15px;
    padding: 10px;
    cursor: pointer;
    transition: 0.3s;
}

.is-button-no-shadow:hover .is-svg-button img {
    filter: invert(100%) sepia(100%) saturate(13%) hue-rotate(237deg) brightness(104%) contrast(104%);
    transition: 0.3s;
}

.is-button:hover{
    background-color: var(--button-hover);
    color: var(--background-color-front);
    box-shadow: 0px 0px 16px 8px var(--shadow-hard);
    transition: 0.3s;
}

.is-button:hover .is-svg-button img {
    filter: invert(100%) sepia(100%) saturate(13%) hue-rotate(237deg) brightness(104%) contrast(104%);
    transition: 0.3s;
}

.is-button-framed {
    border-color: var(--button-text-border);
    border-radius: 29px;
    border: 1px solid;
}

.is-button-framed:hover{
    border:0px;
    transition: 0.1s;
}

.glow {
    animation: fadeglow 1s;
}

@keyframes fadeglow {
    0% { background-color: var(--button-hover); }
}




.borders-box-default {
    border: 2px solid var(--button-hover);
    border-radius: 15px 50px;
    padding: 20px;
}

.background-waiting-large {
    background-repeat: no-repeat;
    background-image: url(/media/waiting-6.svg);
    background-position: center;
    background-size: 100px;
}

.background-waiting-large-textarea {
    background-repeat: no-repeat;
    background-image: url(/media/waiting-6.svg);
    background-position: center;
    background-size: 100px;
}

.background-waiting-large-textarea-force-size {
    background-repeat: no-repeat;
    background-image: url(/media/waiting-6.svg);
    background-position: center;
    background-size: 100px;
    height:100%;
    width:100%;
}

[theme="dark"] .background-waiting-large  {
    background-repeat: no-repeat;
    background-image: url(/media/waiting-6-dark.svg);
    background-position: center;
    background-size: 100px;
}

.background-waiting-small{
    background-repeat: no-repeat;
    background-image: url(/media/waiting-6.svg);
    background-position: center;
    background-size: 25px;
}

[theme="dark"] .background-waiting-small{
    background-repeat: no-repeat;
    background-image: url(/media/waiting-6-dark.svg);
    background-position: center;
    background-size: 25px;
}

.background-waiting-small-textarea{
    background-repeat: no-repeat;
    background-image: url(/media/waiting-6.svg);
    background-position: center;
    background-size: 25px;
}

.background-empty-large {
    background-repeat: no-repeat;
    background-image: url(/media/empty-20.svg);
    background-position: center;
    background-size: 100px;
}


[theme="dark"] .background-empty-large  {
    filter: invert(27%) sepia(32%) saturate(330%) hue-rotate(195deg) brightness(91%) contrast(91%);
}

[theme="dark"] .icon-size-small img  {
    filter: invert(94%) sepia(0%) saturate(0%) hue-rotate(168deg) brightness(96%) contrast(81%);
}

[theme="dark"] .icon-size-small-medium img  {
    filter: invert(94%) sepia(0%) saturate(0%) hue-rotate(168deg) brightness(96%) contrast(81%);
}



.work-panel-section-header{
    font-size: x-large;
    background: linear-gradient(45deg, #1075d5, transparent);
    padding: 20px;
    color: white;
    height:25px;
}

.work-panel-section-header-small{
    font-size: large;
    background: var(--gradient-blue);
    padding: 10px;
    padding-left: 20px;
    color: white;
    height:25px;
}

.work-panel-separator {
    margin: 30px;
    padding: 10px;
    border-radius: 15px 15px 15px 15px;
    background: var(--gradient-light-blue);
    font-size: larger;
    min-height:30px;
    overflow:hidden;
    color:black;
}

.textarea-slim {
    background-color: rgba(0, 0, 0, 0);
    border-bottom-color: var(--text-area-border);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    resize:none;
    box-shadow: none;
    outline: none;
}

.textarea-hidden {
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    resize:none;
    box-shadow: none;
    outline: none;
}

.force-background-white {
    background-color: rgb(255, 255, 255) !important;
}

.force-color-black {
    font-family: 'Ubuntu';
    font-weight: bolder;
    font-size:larger;
}

textarea {
    color: var(--text-area-textcolor) !important;
}

.idea-in-inbox {
    border-bottom: 1px solid;
    border-color: var(--button-text-border);
    margin: 10px;
}

.kanban-card {
    border: 1px solid;
    border-color: var(--button-text-border);
    margin: 10px;
    border-radius: 3px 3px 3px 3px;
}

.idea-in-inbox-text {
    border-right: 1px solid;
    border-color: var(--button-text-border);
    color: var(--text-area-textcolor);
    padding:10px;
}

.modal {
    display:initial;
    background-color: var(--background-color-back);
}

.modal-box {
    background: var(--background-color-front);
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}

.calendar-row-desktop{
    margin-bottom: 10px;
    border-bottom: 1px solid;
    border-color: var(--button-text-border);
    padding: 3px;
}

.calendar-row{

    height:14%;
}

.calendar-day-desktop {
    border: 1px solid;
    border-color: var(--button-text-border);
    border-radius: 5px 5px 5px 5px;
    width:25px;
    height: 25px;
}

.calendar-day {
    border: 1px solid;
    border-color: #c3c3c3;
    border-radius: 0px;
    width:14%;
    height: 100%;
    overflow:hidden;
    box-shadow: inset 0px 0px 16px 8px var(--shadow-calendar-day)
}

.small-label {
    width:90%;
    border: 2px solid var(--hint-border);
    border-radius:5px 5px 5px 5px;
    margin:2px;
    padding: 1px;
    min-height: 15px;
    font-size: x-small;
    font-family:'Ubuntu';
    font-weight: bolder;
}

.calendar-current-monthday  {
    color: var(--caption-color);
    font-weight: bold;
}

.calendar-offset-monthday  {
    font-style: italic;
}

.calendar-today {
    box-shadow: var(--today-shadow);
    border-color: var(--button-hover) !important;
}

.is-button-toggled {
    background-color: var(--button-toggled) !important;
    color: var(--background-color-front) !important;

}

.hint {
    padding:5px;
    border: 1px solid;
    border-color: var(--button-hover);
    border-radius: 5px 5px 5px 5px;
}

.background-validation-ok {
    background-color: var(--validation-ok);
}

.is-grey-label-fit {
    background-color: var(--background-color-back);
    border-radius: 10px;
    border: 1px solid;
    border-color: var(--background-color-front);
    padding: 2px;
    height: fit-content;
    color: var(--button-font-color);

}

.is-grey-button-fit {
    background-color: var(--background-color-back);
    border-radius: 10px;
    border: 1px solid;
    border-color: var(--background-color-front);
    padding: 2px;
    height: fit-content;
    color: var(--button-font-color);
    cursor: pointer;
    white-space:nowrap;
}

.is-grey-button-fit:hover {
    box-shadow: 0px 0px 16px 8px var(--shadow-hard);
    border-color: var(--button-fit-hover);
}

.filter-black-to-red {
    filter: invert(40%) sepia(87%) saturate(7480%) hue-rotate(353deg) brightness(90%) contrast(131%);
    transition: 0.3s
}

.workList-day {
    border: 2px solid;
    margin-bottom: 20px;
    border-radius: 5px 5px 5px 5px;
    padding: 20px;
    color: var(--text-area-textcolor)
}

.disable-color {
    filter: var(--disable-filter);
    background-image: var(--diagonal-pattern);
}

.grid-cell {
    border: 1px solid;
    border-color: var(--background-color-back);
    height: 35px;
    min-height: 35px;
    display:flex;
    padding-top: 1px;
    padding-bottom: 1px;
}

.grid-header {
    background-color: var(--background-color-back-alternate);
    color: var(--caption-color);
    min-width: 40px;
    display:flex;
}

.card {
    padding: 20px;
    border: 1px solid;
    margin: 20px;
    border-radius: 10px 10px 10px 10px;
    border-color: var(--button-hover);
}

.card-section {
    margin: 10px;
    padding: 2px;
    border-radius: 15px 15px 15px 15px;
    background: var(--gradient-light-blue);
    font-size: medium;
    min-height:20px;
    overflow:hidden;
    color:black;
}