/* KANBOARD PLUGIN - CSS FILE */

:root {
    --pp-border-red-alt-2: #AE003D;
    --pp-blue: #007AC9;
    --pp-blue-alt: #00ADFF;
    --pp-red: #B71234;
    --pp-red-alt: #DA004C;
    --pp-red-alt-2: #AE003D;
    --pp-black: #000000;
    --pp-grey: #4D4D4D;
    --pp-white: #FFFFFF;
    --pp-green: #2EA02E;
    --pp-orange: #FF6500;
    --red-icon-faded: #B71234A1;
    --button-blue-gradient: linear-gradient(to bottom, #7892C2 80%, #476E9E 100%);
    --button-blue-border-gradient-match: #476E9E;
    --link-hover-red: #AE003D;
    --link-hover-white: #EEEEEE;
    --background-hover: rgba(174, 0, 61, .5);
    --zf-green: #008F47;
    --zf-gold: #A2792C;
    --zf-gold-box: rgba(162, 121, 44, .6);
    --ll-green: #00843D;
    --ll-green-box: rgba(0, 132, 61, .6);
    --ll-black: #141414;
    --pp-blue-box: rgba(0, 122, 201, .6);
    --all-yellow-box: rgba(223, 255, 0, .6);
    --header-page-margin-kbcss: 5px 15px 10px 15px;
    --box-shadow-kbcss: 1px 1px 1px 0 #000000;
    --border-radius-kbcss: 3px;
    --transition-kanboard-css: ease-in-out all .3s;
}

.pp-blue {color: #007AC9;}
.pp-blue-alt {color: #00ADFF;}
.pp-red {color: #B71234;}
.pp-red-alt {color: #DA004C;}
.pp-red-alt-2 {color: #AE003D;}
.pp-black {color: #000000;}
.pp-grey {color: #4D4D4D;}
.pp-white {color: #FFFFFF;}
.pp-green {color: #2EA02E;}
.pp-background-white {background-color: #FFFFFF;}
.pp-background-blue {background-color: #007AC9;}
.pp-background-blend {background: linear-gradient(66deg,rgba(6, 123, 237, .61) 0%, rgba(226, 17, 17, .86) 70%, rgba(0, 0, 0, .8) 100%);}
.pp-border-blue {border-color: #007AC9;}
.pp-border-red-alt-2 {border-color: #AE003D!important;}
.pp-btn-blue {color: white; background-color: #007AC9; border-color: #007AC9; transition: ease .7s;}
.pp-btn-red {color: white; background-color: #B71234; border-color: #B71234; font-weight: 500; transition: ease .7s;}
.pp-btn-grey {color: white; background-color: #4D4D4D; border-color: #4D4D4D; font-weight: 500; transition: ease .7s;}

a, details, summary, i, img, table, tr, svg, figure, button {
    transition: var(--transition-kanboard-css);
}

summary i {
    width: 40px;
}

section.page .page-header > ul {
    margin: var(--header-page-margin-kbcss);
    margin-bottom: 0 !important;
}

#main > .page-header {
    margin-bottom: 10px;
}

/*** FILE TYPES ***/
/* .fa-file-image-o {} */
/* .fa-file-audio-o {} */
/* .fa-file-video-o {} */
/* .fa-file-code-o {} */
/* .fa-file-text-o {} */
/* .fa-picture-o {} */
/* .fa-file {} */
/* .fa-file-o {} */
.fa-file-pdf-o { color: #FA0F00; }
.fa-file-excel-o { color: #007237; }
.fa-file-word-o { color: #285397; }
.fa-file-powerpoint-o { color: #B93214; }
.fa-file-archive-o { color: #B37900; }
.fa-html5 { color: #E14D25; }
.fa-css3 { color: #1862B6; }

.fa-font {
    border: 1px solid #000000;
    border-radius: var(--border-radius-kbcss);
    padding-top: 1px;
    padding-bottom: 1px;
    width: 18px !important;
}

.fa-cog, .fa-caret-down {
    color: #4D4D4D;
}

td a.dropdown-menu i {
    color: #4D4D4D !important;
}

kbd {
    padding: .1em .3em;
    font-size: 100%;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #212529;
    border-radius: var(--border-radius-kbcss);
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.markdown p a, td a {
    text-decoration: underline !important;
    text-decoration-color: #B71234 !important;
    text-decoration-thickness: 2px !important;
}

.markdown p a:hover, td a:hover {
    text-decoration: underline !important;
    text-decoration-color: #000000 !important;
    text-decoration-thickness: 2px !important;
}

#tasklist li {
    border-radius: 10px;
    border: 1px solid #DEDEDE;
}

.task-middle {
	font-size: 14px;
	line-height: 25px;
}

.task-listname {
	margin-right: 4px;
}

.h2 {
    color: rgba(175, 47, 47, .31);
    font-size: 22px;
    font-weight: 100;
    text-align: center;
}

.h3 {
	border-bottom: 0;
}

a {
    color: black;
}

a i.web-notification-icon {
    color: var(--pp-white) !important;
    font-size: 1.2em;
}

/*
2 options for bell or ring animation, ring is more annoying, bell is more calm
bell - adapted from https://github.com/p0lym0rphik/Greenwing/issues/38#issue-803747257
ring - adapted from https://codepen.io/Mrshcom/pen/kNmBGm
*/
.web-notification-icon {
    /* animation: bell 1s 5s both infinite; */
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    text-shadow: 0 2px 2px #000000;
}

@keyframes bell {
    0% { transform: rotate(0); }
    10% { transform: rotate(30deg); }
    20% { transform: rotate(0); }
    80% { transform: rotate(0); }
    90% { transform: rotate(-30deg); }
    100% { transform: rotate(0); }
}

@-webkit-keyframes ring {
    0% { -webkit-transform: rotateZ(0); }
    1% { -webkit-transform: rotateZ(30deg); }
    3% { -webkit-transform: rotateZ(-28deg); }
    5% { -webkit-transform: rotateZ(34deg); }
    7% { -webkit-transform: rotateZ(-32deg); }
    9% { -webkit-transform: rotateZ(30deg); }
    11% { -webkit-transform: rotateZ(-28deg); }
    13% { -webkit-transform: rotateZ(26deg); }
    15% { -webkit-transform: rotateZ(-24deg); }
    17% { -webkit-transform: rotateZ(22deg); }
    19% { -webkit-transform: rotateZ(-20deg); }
    21% { -webkit-transform: rotateZ(18deg); }
    23% { -webkit-transform: rotateZ(-16deg); }
    25% { -webkit-transform: rotateZ(14deg); }
    27% { -webkit-transform: rotateZ(-12deg); }
    29% { -webkit-transform: rotateZ(10deg); }
    31% { -webkit-transform: rotateZ(-8deg); }
    33% { -webkit-transform: rotateZ(6deg); }
    35% { -webkit-transform: rotateZ(-4deg); }
    37% { -webkit-transform: rotateZ(2deg); }
    39% { -webkit-transform: rotateZ(-1deg); }
    41% { -webkit-transform: rotateZ(1deg); }
    43% { -webkit-transform: rotateZ(0); }
    100% { -webkit-transform: rotateZ(0); }
}

@-moz-keyframes ring {
    0% { -moz-transform: rotate(0); }
    1% { -moz-transform: rotate(30deg); }
    3% { -moz-transform: rotate(-28deg); }
    5% { -moz-transform: rotate(34deg); }
    7% { -moz-transform: rotate(-32deg); }
    9% { -moz-transform: rotate(30deg); }
    11% { -moz-transform: rotate(-28deg); }
    13% { -moz-transform: rotate(26deg); }
    15% { -moz-transform: rotate(-24deg); }
    17% { -moz-transform: rotate(22deg); }
    19% { -moz-transform: rotate(-20deg); }
    21% { -moz-transform: rotate(18deg); }
    23% { -moz-transform: rotate(-16deg); }
    25% { -moz-transform: rotate(14deg); }
    27% { -moz-transform: rotate(-12deg); }
    29% { -moz-transform: rotate(10deg); }
    31% { -moz-transform: rotate(-8deg); }
    33% { -moz-transform: rotate(6deg); }
    35% { -moz-transform: rotate(-4deg); }
    37% { -moz-transform: rotate(2deg); }
    39% { -moz-transform: rotate(-1deg); }
    41% { -moz-transform: rotate(1deg); }
    43% { -moz-transform: rotate(0); }
    100% { -moz-transform: rotate(0); }
}

@keyframes ring {
    0% { transform: rotate(0); }
    1% { transform: rotate(30deg); }
    3% { transform: rotate(-28deg); }
    5% { transform: rotate(34deg); }
    7% { transform: rotate(-32deg); }
    9% { transform: rotate(30deg); }
    11% { transform: rotate(-28deg); }
    13% { transform: rotate(26deg); }
    15% { transform: rotate(-24deg); }
    17% { transform: rotate(22deg); }
    19% { transform: rotate(-20deg); }
    21% { transform: rotate(18deg); }
    23% { transform: rotate(-16deg); }
    25% { transform: rotate(14deg); }
    27% { transform: rotate(-12deg); }
    29% { transform: rotate(10deg); }
    31% { transform: rotate(-8deg); }
    33% { transform: rotate(6deg); }
    35% { transform: rotate(-4deg); }
    37% { transform: rotate(2deg); }
    39% { transform: rotate(-1deg); }
    41% { transform: rotate(1deg); }
    43% { transform: rotate(0); }
    100% { transform: rotate(0); }
}

/* ############################################################
 * BOARD TWEAKING
 * ############################################################ */

#board {
   border-top: 0 solid #CCCCCC;
   border-right: 0 solid #CCCCCC;
}

.board-swimlane > td {
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
}

/* This will hide column names above board/swimlanes */
/* [class^="board-swimlane-columns-"]{display: none;} */

/* This will hide all column titles on swimlanes except for the first one */
/* tr[class*='board-swimlane-columns']:not(:first-child) {display: none;} */

.board-swimlane-columns-0 {
    display: table-row;
}

.board-swimlane-columns-0 > .board-column-header {
    border-bottom: 0 solid #C7C7C7;
}

#board-container table {
	border-collapse: separate;
    border-spacing: 15px 0;
    border-top: 0 solid #CCCCCC;
    border-left: 0 solid #CCCCCC;
    border-right: 0 solid #CCCCCC;
    border-bottom: 0 solid #CCCCCC;
}

#board-container td {
    /* z-index: -500; */
    position: relative;
    padding: 5px 0;
    border-top: 1px solid #E5E5E5;
    border-left: 1px solid #E5E5E5;
    border-right: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
}

#board-container tr {
    border-top: 0 solid #CCCCCC;
    border-left: 0 solid #CCCCCC;
    border-right: 0 solid #CCCCCC;
    border-bottom: 0 solid #CCCCCC;
}

.board-column-expanded .board-add-icon a {
	line-height: 50%;
}

/* ############################################################ 
 * USER INTERFACE
 * ############################################################ */

 header {
    background:-webkit-gradient(linear, left top, left bottom, color-stop(.5, #7892C2), color-stop(1, #476E9E));
    background:-moz-linear-gradient(top, #7892C2 5%, #476E9E 100%);
    background:-webkit-linear-gradient(top, #7892C2 5%, #476E9E 100%);
    background:-o-linear-gradient(top, #7892C2 5%, #476E9E 100%);
    background:-ms-linear-gradient(top, #7892C2 5%, #476E9E 100%);
    background:linear-gradient(to bottom, #7892C2 5%, #476E9E 100%);
    background-color:#7892C2;
    padding: 10px 10px 15px 10px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0 !important;
    border-bottom: none;
}

header h1 {
    /* padding-left: 10px; */
    padding-left: 0;
    font-size: 24px;
	color: white;
    font-weight: 600;
}

header h1 a {
    /* padding-left: 10px; */
    padding-left: 0;
	color: white;
}

/* ## FOR KANBOARD 1.2.5 ###################################### */
header .board-selector-container {
    max-width: 25%;
}

.js-select-dropdown-autocomplete-rendered {
    max-width: 100%;
}

/* ############################################################ */

.page-header {
    /* padding: 0 0 3px 15px; */
    /* background-color: #0E0E0E4D; */
    font-size: small;
    padding: 0 0 5px 2px;
    background-color: white;
    margin-top: 10px;
}

.sidebar-content > .page-header {
    padding: 5px 0 5px 15px;
    border-radius: 5px;
}

.project-header {
    font-size: 13px;
    margin-bottom: 10px;
    background-color: #FAFAFA;
    border-bottom: 1px solid #ECECEC;
    padding: 5px 15px;
}

.page {
    /* margin-left: 20px; */
    /* margin-right: 20px; */
	margin-left: 0 !important;
	margin-right: 0 !important;
    clear: both;
}

h1 {
    font-weight: normal;
}

body {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
    color: #000000 !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.ui-sortable {
    padding: 0 2px 0 2px;
}

.sidebar > ul a {
    color: var(--pp-grey);
    font-weight: normal;
}

.sidebar {
    padding-left: 5px;
    min-width: fit-content;
}

.sidebar > ul li {
    transition: var(--transition-kanboard-css);
    border-left: 5px solid white;
    padding-left: 8px;
    border-bottom: 0;
}

.sidebar-summary ul, .sidebar-actions ul li a {
    font-size: .9em;
}

/* unvisited link */
a:link {
    color: rgb(0, 0, 0);
}

/* visited link */
a:visited {
    color: rgb(0, 0, 0);
}

/* mouse over link */
a:focus, a:hover {
    color: rgb(128, 128, 128);
}

/* selected link */
a:active {
    color: rgb(128, 128, 128);
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
}

div.color-yellow {
    border-left-width: 15px;
    background-color: white;
}

div.color-blue {
    border-left-width: 15px;
    background-color: white;
}

div.color-green {
    border-left-width: 15px;
    background-color: white;
}

div.color-purple {
    border-left-width: 15px;
    background-color: white;
}

div.color-red {
    border-left-width: 15px;
    background-color: white;
}

div.color-orange {
    border-left-width: 15px;
    background-color: white;
}

div.color-grey {
    border-left-width: 15px;
    background-color: white;
}

div.color-brown{
    border-left-width: 15px;
    background-color: white;
}

div.color-deep_orange {
    border-left-width: 15px;
    background-color: white;
}

div.color-dark_grey {
    border-left-width: 15px;
    background-color: white;
}

div.color-pink {
    border-left-width: 15px;
    background-color: white;
}

div.color-teal {
    border-left-width: 15px;
    background-color: white;
}

div.color-cyan {
    border-left-width: 15px;
    background-color: white;
}

div.color-lime {
    border-left-width: 15px;
    background-color: white;
}

div.color-light_green {
    border-left-width: 15px;
    background-color: white;
}

div.color-amber {
    border-left-width: 15px;
    background-color: white;
}

div.task-board-recent {
    border-width: 1px !important;
    border-left-width: 4px !important;
    background-color: white !important;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(186, 186, 186, .5);
    border-right: none;
    border-top: 1px solid #ECECEC !important;
    border-bottom: none;
}

.filter-box input[type="text"] {
    max-width: 300px;
}

.accordion-section {
	margin-left: 20px;
	margin-right: 20px;
}

.task-board-collapsed {
    font-size: 14px;
}

.task-board {
    font-size: 15px;
}

@media (max-width: 600px) {
	.popover-form .form-column {
		float: none;
		margin-right: 3%;
		max-width: none;
		min-width: inherit;
	}

	input.form-input-large {
		width: 90%;
	}
}

/* GITLAB LOOKALIKE */
.board-column-header {
    /* border-top-left-radius: 2px; */
    /* border-top-right-radius: 2px; */
    /* background: #FAFAFA; */
    /* border: 1px solid #E5E5E5; */
    /* border-bottom: 1px solid #E5E5E5; */
    /* z-index: -42; */
    /* padding: 12px; */
    width: initial;
    position: relative;
    margin: 0;
    font-size: 16px;
    border: 2px solid #59595930 !important;
    padding: 6px;
    background: var(--button-default-border-color-focus);
    border-radius: 2px;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-right-radius: var(--border-radius-kbcss) !important;
    border-top-left-radius: var(--border-radius-kbcss) !important;
}

.task-board-age {
    display: none;
}

.task-board-avatars {
    display: none;
}

.task-board-title > a {
    font-family: Roboto, sans-serif;
}

/* HOLDER OF TASKS */
tr.board-swimlane > td {
    /* background: #FAFAFA; */
	/* background-color: #FAFAFA; */
	/* border-radius: 13px; */
    /* border-radius: 0 0 10px 10px; */
    border-radius: 0 0 2px 2px;
    background: #59595930;
    -webkit-flex: 1;
    flex: 1;
    height: 400px;
    margin-bottom: 0;
    padding: 5px;
    overflow-x: hidden;
    border: 1px solid #E5E5E5;
}

th.board-swimlane-header {
	/* line-height: 22px; */
    line-height: unset;
	background-color: white;
	border-bottom: 0 solid #CCCCCC;
	border-top: 0 solid #CCCCCC;
	border-left: 0 solid #CCCCCC;
	font-size: 14px;
}

/* THE SINGLE TASKS LAYOUT */
.board-task-list > div.task-board {
    font-size: 13px;
    border-left-width: 2.5px !important;
    background-color: white !important;
    border-radius: var(--border-radius-kbcss);
    padding: 6px 4px 6px 6px;
    margin-bottom: 8px;
    margin-left: 8px;
    margin-right: 8px;
    box-shadow:  0 1px 2px rgba(62, 54, 54, .55);
    border-right: none;
    border-top: 1px solid #ECECEC !important;
    border-bottom: none;
}

/* Duedata, subtasks, relations, etc. */
.task-board-expanded {
    overflow: hidden;
}

.task-board-icons {
    float: right;
    margin-top: 2px;
}

/* Hidden priority 'P0,P1,P2,P3'. Not relevant when it's P0. Should be combined with JS for dynamic */
.task-board-priority {
    display: none;
}

/* The task title - go for initial if it should stay on same line */
.task-board-title {
    font-size: 14px;
    display: inline;
    margin-bottom: 5px;
    font-weight: bold;
}

/* SIZE OF COLUMN WHEN HIDDEN (MINIMIZED) */
#board th.board-column-header-collapsed {
    /* width: 5px; */
    /* min-width: 5px; */
    width: 22px;
    min-width: 22px;
}

/* FOR LINKS IN TASK DESCRIPTIONS */
.markdown > ul > li > a {
    color: white;
    background-color: grey;
    padding: 2px 4px;
    border-radius: var(--border-radius-kbcss);
}

/* FOR INLINE CODE */
code {
    /* margin: 0; */
    /* padding: 2px .4em; */
    /* color: #000000; */
    /* font-size: 85%; */
    /* background-color: rgba(27, 31, 35, .22); */
    /* font-family: Tahoma, sans-serif; */
    margin: auto 3px;
    padding: 1px 3px 3px 3px;
    color: #BB092D;
    background-color: rgba(27, 31, 35, .32);
    font-size: .9rem;
    font-family: monospace;
    letter-spacing: .04rem;
    border-radius: var(--border-radius-kbcss);
}

/* FOR BLOCKQUOTE TEXT - Leave `width` as auto because of board hover tooltip */
blockquote {
    /* color:  #000000 !important; */
    color: #555555;
    font-size: 1.1em;
    width: auto;
    margin: 5px auto;
    font-style: italic;
    padding: 1.2em 30px 1.2em 75px !important;
    border-left: 8px solid rgb(168, 207, 255) !important;
    line-height: 1.6;
    position: relative;
    background: #EDEDED;
}

blockquote::before {
    font-family: Arial, sans-serif;
    content: "\201C";
    color: rgb(168, 207, 255);
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

blockquote::after {
    content: "";
}

blockquote span {
    display: block;
    color: #333333;
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
}

/* END BLOCKQUOTE TEXT */

/* INCREASE INFO CIRCLE SIZE IN TOOLTIP */
.tooltip .fa-info-circle {
	font-size: 1.3em !important;
	vertical-align: middle !important;
    color: #737272;
}

/* END INCREASE INFO CIRCLE SIZE IN TOOLTIP */

/* INCREASE PAGE HEADER TEXT SIZE */
.page-header ul li {
    font-size: 1.2em;
}

/* END INCREASE PAGE HEADER TEXT SIZE */

/* ALERT */
.alert {
	margin-bottom: 60px;
    font-weight: bold;
    border: 2px solid;
	font-style: italic;
    top: 50px;
    bottom: auto;
}

.alert-fade-out, .alert-error {
    animation: fadeout 10s linear forwards;
    box-shadow: 0 0 20px 6px #000000;
}

/* END ALERT */

/* REQUIRED FIELD ASTERISK - `padding-top` for browser password addon spacing compatibility */
.form-required {
    transform: scale(2);
    display: inline-block;
    vertical-align: bottom;
    padding-top: 5px;
}

/* END REQUIRED FIELD ASTERISK  */

/* TASK LIMIT */
.board-task-list-limit {
    background-color: #DF5353 !important;
}

/* END TASK LIMIT */

.action-menu {
    padding: 4px 0 4px 6px;
    background-color: var(--blue-border-gradient-match);
    border-radius: var(--border-radius-kbcss);
}

.action-menu:hover, .action-menu:focus, .views a:hover {
    color: #EEEEEE !important;
}

a .fa {
    color: unset !important;
}

.views li a:hover {
    text-decoration: none;
}

.views li a:hover i, .board-dropdown:hover, .action-comment .dropdown a i:hover {
    color: #EEEEEE;
}

.views li a i:hover {
    color:  #EEEEEE;
    text-decoration: none;
}

ul#BoardViews > li.active {
    background: var(--pp-red-alt-2);
}

ul#BoardViews > li.active a, ul#BoardViews > li.active a > i {
    color: #EEEEEE;
}

ul#BoardViews > li {
    color: #EEEEEE;
    background: var(--button-blue-gradient);
    text-transform: uppercase;
    border-color: var(--button-blue-border-gradient-match);
    padding-bottom: 2px !important;
    padding-top: 1px !important;
}

.project-header .dropdown-component {
    padding-right: 1em;
}

.views li:first-child {
    border-top-left-radius: var(--border-radius-kbcss) !important;
    border-bottom-left-radius: var(--border-radius-kbcss) !important;
}

.views li:last-child {
    border-top-right-radius: var(--border-radius-kbcss) !important;
    border-bottom-right-radius: var(--border-radius-kbcss) !important;
}

.views {
    font-size: 1rem !important;
}

.project-header .views-switcher-component {
    margin-top: 1px !important;
}

.board-dropdown {
    padding: 4px 0 4px 8px;
    border-radius: var(--border-radius-kbcss);
    background: var(--button-blue-gradient);
    border-color: var(--button-blue-border-gradient-match);
}

.board-column-title .dropdown a:hover, a:hover, .task-board-header .dropdown a:hover, .subtask-table-td .dropdown a:hover, .file-thumbnail-title .dropdown a:hover, table.table-striped tbody tr td .dropdown a:hover {
    color: var(--pp-red-alt-2) !important;
}

.btn-sm a:hover, .input-addon-item:hover, .input-addon-item .dropdown a:hover {
    color: var(--pp-white) !important;
}

a:hover {
    text-decoration: none !important;
}

.dropdown-submenu-open li:hover a, .dropdown-menu-link-text:hover, .dropdown-menu-link-icon:hover {
    color: var(--pp-white) !important;
}

#PredfinedDropdown:hover {
    color: var(--pp-red-alt-2) !important;
}

.markdown table th, .markdown table td {
    border: 1px solid #999999;
    border-radius: var(--border-radius-kbcss);
}

article.markdown > table > tbody > tr > td {
    border: 1px solid #999999;
}

.markdown table th:nth-of-type(2) {
    border-top-left-radius: var(--border-radius-kbcss) !important;
}

.markdown table {
    border-collapse: separate;
    border-spacing: 4px;
}

/* #############################   BROWSER SCROLLBARS ##################################################### */

/* Works on Firefox */
td {
    scrollbar-width: auto;
    scrollbar-color: var(--pp-blue) var(--pp-red-alt-2);
}

/* Works on Chrome, Edge, and Safari */
td::-webkit-scrollbar {
    width: 12px;
}

td::-webkit-scrollbar-track {
    background: var(--pp-red-alt-2);
}

td::-webkit-scrollbar-thumb {
    background-color: var(--pp-blue);
    border-radius: 20px;
    border: 3px solid var(--pp-red-alt-2);
}

/* ########################################################################################################## */

.sidebar-summary {
    padding: .4rem;
    border: 1px solid var(--pp-border-red-alt-2);
    border-radius: var(--border-radius-kbcss);
    margin-bottom: 1rem;
    position: relative;
}

.sidebar-summary .summary-task-icon {
    position: absolute;
    top: 1px;
    left: 3px;
    opacity: .6;
    font-size: 2.5em;
    color: var(--red-icon-faded);
}

.sidebar-actions {
    padding: .4rem;
    border: 1px solid var(--pp-blue);
    border-radius: var(--border-radius-kbcss);
    margin-bottom: 1rem;
}

.sidebar-icons > .sidebar-summary > ul li:hover, .sidebar-icons > .sidebar-summary > ul li.active, .sidebar-icons > .sidebar-actions > ul li:hover, .sidebar-icons > .sidebar-actions > ul li.active {
    padding-left: 0;
    border-left: none;
}

.sidebar > .sidebar-summary > ul li {
    list-style-type: none;
    line-height: 30px;
    padding-left: 13px;
}

.sidebar > .sidebar-actions > ul li {
    list-style-type: none;
    line-height: 38px;
    padding-left: 13px;
}

.sidebar > .sidebar-summary > ul li.active a, .sidebar > .sidebar-actions > ul li.active a {
    color: var(--color-primary);
    font-weight: bold;
    text-decoration: none;
}

.sidebar-icons > .sidebar-summary > ul li, .sidebar-icons > .sidebar-actions > ul li {
    padding-left: 0;
}

.sidebar > .sidebar-summary > ul a, .sidebar > .sidebar-actions > ul a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: normal;
}

.sidebar > .sidebar-summary > ul a:hover, .sidebar > .sidebar-summary > ul li.active a:hover, .sidebar > .sidebar-actions > ul a:hover, .sidebar > .sidebar-actions > ul li.active a:hover {
    color: var(--pp-red-alt-2);
}

.sidebar > .sidebar-summary > ul li a i, .sidebar > .sidebar-summary > ul li i {
    font-size: 1.1rem;
    vertical-align: middle;
}

.sidebar > .sidebar-actions > ul li a i, .sidebar > .sidebar-actions > ul li i {
    font-size: 1.1rem;
    vertical-align: middle;
}

.sidebar-summary .sidebar-title {
    text-align: center;
}

.sidebar h2 {
    font-weight: bold;
}

.sidebar > .sidebar-summary > ul li.active a::after {
    content: "\f054";
    float: right;
    margin-top: 5px;
    text-rendering: auto;
    font: normal normal normal 1.5em/1 FontAwesome;
}

.sidebar > .sidebar-actions > ul li a, .sidebar > .sidebar-actions > ul li {
    position: relative;
}

table > thead > tr > th, table > tbody > tr > td, table > tbody > tr > th {
    padding-left: 10px;
}

section > div > table, .accordion-content > table {
    border-collapse: unset;
}

table > tbody > tr > th:first-child, table > thead > tr > th:first-child {
    border-top-left-radius: var(--border-radius-kbcss);
}

table > tbody > tr > th:last-child, table > thead > tr > th:last-child {
    border-top-right-radius: var(--border-radius-kbcss);
}

table > tbody > tr:last-child > td:first-child, table > thead > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--border-radius-kbcss);
}

table > tbody > tr:last-child > td:last-child, table > thead > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--border-radius-kbcss);
}

table > tbody > tr > th, table > thead > tr > th, table > tbody > tr:not(:last-child) > td, table > tbody > tr:not(:last-child) > th {
    border-bottom: 0;
}

table > tbody > tr > th:not(:first-child), table > tbody > tr > td:not(:first-child), table > thead > tr > th:not(:first-child), table > thead > tr > td:not(:first-child) {
    border-left: 0;
}

.markdown table td {
    border-bottom: 1px solid #999999 !important;
    border-left: 1px solid #999999 !important;
}

.markdown > table > thead > tr > th {
    border-left: inset;
}

.input-addon-item {
    background:  var(--button-blue-gradient);
}

.input-addon-field, .input-addon-item {
    border: .16em inset var(--button-blue-border-gradient-match) !important;
    padding: 3px .5em 3px .5em !important;
    margin-top: -1px !important;
}

.input-addon-field:first-child {
    border-radius: var(--border-radius-kbcss) 0 0 var(--border-radius-kbcss) !important;
}

.input-addon-item:last-child {
    border-radius: 0 var(--border-radius-kbcss) var(--border-radius-kbcss) 0 !important;
}

.input-addon-field:not(:first-child), .input-addon-item:not(:first-child) {
    border-left: 0 !important;
}

.subtask-title a:hover {
    text-decoration: none !important;
}

.board-add-icon {
    padding: 0 !important;
    margin-left: -5px;
}

.filter-box {
    max-width: unset !important;
}

/* project title tooltip hover fix
#board-container {
    z-index: -1;
    position: relative;
} */

#task-view > div > details > summary, #task-summary > details > summary {
    border-block-width: medium;
    border-block-style: outset;
    text-indent: .5em;
    border-block-start-color: rgb(174, 0, 61);
    border-block-end-color: rgba(174, 0, 61, .5);
}

.table-list-row > div > .dropdown > a > strong {
    font-size: 1.3em;
}

#ProjectOverview span .overview-columns {
    padding: 3px 2px 5px 2px;
    font-size: 1em;
    font-weight: normal;
}

#ProjectOverview span .overview-columns i, #ProjectOverview span .overview-tasks strong i {
    font-size: 1rem;
    vertical-align: middle;
}

#ProjectOverview span .overview-columns span {
    vertical-align: middle;
    margin-left: 0;
    color: var(--pp-white);
    cursor: context-menu;
}

#ProjectOverview span .overview-tasks strong {
    vertical-align: middle;
    margin-left: 0;
    color: var(--pp-grey);
    cursor: context-menu;
}

#ProjectOverview span .overview-tasks {
    background-color: var(--pp-white);
    color: var(--pp-grey);
    padding-right: 4px;
    padding-left: 4px;
    border-top-right-radius: var(--border-radius-kbcss);
    border-bottom-right-radius: var(--border-radius-kbcss);
    display: inline-block;
    padding-top: .5rem;
    padding-bottom: .13rem !important;
    font-size: 1em;
    font-weight: normal;
}

.proj-details {
    display: inline-block;
    margin-right: 10px;
}

.proj-details-row {
    margin-top: .5em;
}

#ProjDetailsRow > .project-header > .dropdown-component {
    display: none;
}

#ProjDetailsRow > .project-header > .filter-box-component > .filter-box {
    visibility: hidden;
    width: 0;
}

#ProjDetailsRow > .project-header > .views-switcher-component > ul > li::after {
    display: none;
}

#ProjDetailsRow > .project-header {
    background-color: unset;
    border-bottom: 0;
    padding-left: 0;
    display: inline-flex;
    padding-bottom: 0;
    line-height: 1;
}

#dashboard > .sidebar-content > .overview-table-list > .table-list-row:hover {
    border: 1px solid var(--button-blue-border-gradient-match);
    border-radius: var(--border-radius-kbcss);
}

#dashboard > .sidebar-content > .overview-table-list > .table-list-row {
    border: 1px solid var(--pp-white);
    border-radius: var(--border-radius-kbcss);
}

.select-dropdown-input-container {
    border: .16em inset var(--button-blue-border-gradient-match) !important;
    border-radius: var(--border-radius-kbcss) !important;
}

/* HIDE SCROLL BARS IN BOARD MENU LIST :  USE 'overflow: auto !important;' IN '#select-dropdown-menu' */
#select-dropdown-menu {
    border: .16em inset var(--button-blue-border-gradient-match) !important;
    accent-color:  var(--pp-red-alt-2);
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: 0 !important;
    width: 281px !important;
    overflow: auto !important;
}

#TaskIDSearch {
    min-width: unset;
    margin-right: 8px;
}

/* .js-select-dropdown-autocomplete-rendered {width: 289px;} */


[title="100%"], [title="100%"]:hover {
    color: var(--pp-green);
    opacity: 1 !important;
}

[title="100%"] > span.tooltip, [title="100%"] > span.tooltip:hover i {
    color: var(--pp-green) !important;
    opacity: 1;
}

.task-board-icons-row > [title="0%"], .task-board-icons-row > [title="0%"]:hover {
    color: var(--pp-red-alt-2);
    opacity: 1;
}

.task-board-icons-row > [title="0%"] > span.tooltip, .task-board-icons-row > [title="0%"] > span.tooltip:hover > i {
    color: var(--pp-red-alt-2);
    opacity: 1;
}

textarea {
    background: #D8E2F9;
}

/* input { background: #D8E2F9; } */

/* https://github.com/kanboard/kanboard/issues/3910 */

/* FOR FIELD BORDERS  */
textarea, .alert, input {
    border-radius: var(--border-radius-kbcss);
    accent-color: var(--pp-red-alt-2);
}

select {
    border-radius: var(--border-radius-kbcss);
    border-width: 1px;
}

/* END FIELD BORDERS  */

.markdown > h1 {
    color: unset !important;
}

.task-priority-0 {
    display: none;
}

/* TASK PRIORITIES ################################################################ */
.task-priority-1 {
    color: #000000;
    font-weight: bold;
    background: #FF000054;
    opacity: 1 !important;
    padding: 2px 3px;
    border-radius: var(--border-radius-kbcss);
}

.task-priority-2 {
    color: #000000;
    font-weight: bold;
    background: #FF000054;
    opacity: 1 !important;
    padding: 2px 3px;
    border-radius: var(--border-radius-kbcss);
}

.task-priority-3 {
    color: #000000;
    font-weight: bold;
    background: #00800078;
    opacity: 1 !important;
    padding: 2px 3px;
    border-radius: var(--border-radius-kbcss);
}

.task-priority-4 {
    color: #000000;
    font-weight: bold;
    background: #00800078;
    opacity: 1 !important;
    padding: 2px 3px;
    border-radius: var(--border-radius-kbcss);
}

.task-priority-5 {
    color: #000000;
    font-weight: bold;
    background: #FFA5006E;
    opacity: 1 !important;
    padding: 2px 3px;
    border-radius: var(--border-radius-kbcss);
}

/* ############################################################################################  */

.task-board-reference i {
    opacity: .6;
}

.i-fw {
    width: 1.29em;
    text-align: center;
    margin-right: 2px;
}

.m-0 {
    margin: 0 !important;
}

.d-none {
    display: none;
}

#TaskTagSummary {
    background-color: rgba(255, 255, 255, .9);
    padding: .1em .4rem .3rem .4rem;
    border-radius: var(--border-radius-kbcss);
    margin-top: 1em;
}

.task-board-icons, .task-list-icons {
    font-size: 1em !important;
}

.js-subtask-toggle-status {
    display: inline-flex;
}

input[type="number"], input[type="date"], input[type="email"], input[type="password"], input[type="text"]:not(.input-addon-field) {
    color: var(--pp-black) !important;
}

input[type="number"]::placeholder, input[type="date"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="text"]:not(.input-addon-field)::placeholder {
    color: var(--pp-black) !important;
}

.input-addon-field, .input-addon-field::placeholder {
    color: var(--pp-black) !important;
}

header h1 .tooltip {
    opacity: 1 !important;
    display: inline-flex;
}

header h1 .tooltip .fa-info-circle {
    color: white;
}

.board-task-list > div {
    border-left-width: 3px !important;
}

.task-board-expanded .task-board-category-container {
    margin-top: 5px;
    display: block;
    text-align: left;
}

#BoardTagSummary > ul > i {
    font-size: 1.1rem;
    vertical-align: middle;
}

#TaskTagSummary > ul > i {
    font-size: 1.3rem;
    vertical-align: middle;
}

.markdown img {
    max-width: 200px;
    float: right;
    text-align: right;
    margin-top: 0 auto auto auto;
    border: 3px dashed #007AC9;
    border-radius: var(--border-radius-kbcss);
    vertical-align: bottom;
}

.summary-title span {
    margin-left: 5px;
}

article.markdown > ul > li > a {
    padding: 0 4px 2px 4px;
    border-radius: var(--border-radius-kbcss);
    line-height: 1.7em;
}

article.markdown {
    line-height: 1.5em;
}

.task-general-summary {
    margin: .5em 1em;
}

.task-general-summary-title {
    font-weight: bold;
    text-transform: uppercase;
    color: var(--pp-red-alt-2);
}

.task-general-summary ul {
    list-style-type: none;
}

.task-general-summary ul li {
    display: inline-block;
    margin-right: .5em;
    border: 2px solid var(--button-blue-border-gradient-match);
    padding: 2px 4px 3px 4px;
    margin-bottom: 5px;
    border-radius: var(--border-radius-kbcss);
}

.task-general-summary ul li span {
    margin-left: 5px;
}

del {
    text-decoration: line-through;
    text-decoration-color: #B71234;
    text-decoration-thickness: 1px;
    text-decoration-style: double;
}

td code {
    word-wrap: anywhere;
    max-width: 597px;
    display: inline-block;
}

.acc-subtasks-title i {
    margin-right: .2em;
}

.acc-file-title i {
    margin-right: .2em;
}

.acc-ext-link-title i {
    margin-right: 0;
}

.acc-int-link-title i {
    margin-right: -2px;
    margin-left: .2em;
}

.acc-comments-title i {
    margin-right: -1px;
}

.acc-templates-title i {
    margin-left: -7px;
    margin-right: .2em;
}

.acc-customfields-title i {
    margin-left: -4px;
    margin-right: 3px;
}

.section-box {
    display: inline-block;
    width: 200px;
    margin: auto .5em;
    padding: .5em;
    cursor: context-menu;
    border-radius: var(--border-radius-kbcss);
    box-shadow: 1px 2px 2px #888888;
}

#task-summary {
    margin-bottom: 10px !important;
    margin-left: 20px;
    margin-right: 20px;
}

#task-summary > .accordion-section {
    margin-left: 0;
    margin-right: 0;
}

.acc-templates-title, .acc-comments-title, .acc-file-title, .acc-ext-link-title, .acc-int-link-title, .acc-subtasks-title, .acc-desc-title, .acc-customfields-title {
    color: var(--pp-grey);
}

summary::marker {
    color: var(--button-primary-border-color-focus);
}

.acc-comments-title:hover, .acc-file-title:hover, .acc-ext-link-title:hover, .acc-int-link-title:hover, .acc-subtasks-title:hover, .acc-desc-title:hover, .acc-customfields-title:hover, .sidebar > ul a:hover {
    color: var(--pp-red-alt-2);
}

.floating-icon {
    float: right;
    font-size: 4em !important;
    margin-top: 1em;
    color: #333333;
    margin-right: .5em;
}

.list-none {
    list-style: none;
}

.subtasks-table a, td .dropdown a, table.task-links-table tbody tr td:nth-child(2) a, .task-board-category a, .task-board-icons-row a {
    text-decoration: none !important;
}

.cursor-text {
    cursor: text !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.board-column-header-task-count {
    color: var(--pp-white) !important;
    font-weight: bold !important;
    font-size: 90%;
    background-color: var(--pp-red-alt-2);
    border-radius: var(--border-radius-kbcss);
    padding: 0 3px 1px 3px;
    border: 1px solid #000000;
    margin: 0 3px 2px 2px;
    cursor: context-menu;
    display: inline-block;
}

.board-swimlane-column-header-task-count {
    color: var(--pp-white) !important;
    font-weight: bold !important;
    font-size: 90%;
    background-color: var(--pp-red-alt-2);
    border-radius: var(--border-radius-kbcss);
    padding: 0 3px 1px 3px;
    border: 1px solid #000000;
    margin: 0 3px 2px 0;
    cursor: context-menu;
}

.swimlane-name {
    text-transform: uppercase;
    font-size: 1.2rem;
    vertical-align: bottom;
}

.task-board-icons span {
    opacity: 1 !important;
}

.open {
    background-color: var(--pp-green) !important;
}

.summary-active {
    background-color: var(--pp-green);
    color: var(--pp-white);
}

.summary-active span, .summary-active span i {
    color: var(--pp-white);
}

.board-recurrence-pending {
    color: var(--pp-white);
    opacity: 1;
    border: 1px solid var(--pp-orange);
    padding: 2px;
    border-radius: var(--border-radius-kbcss);
    background-color: var(--pp-orange);
}

.task-board-icons a {
    opacity: unset !important;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

span.notification a:hover {
    color: white !important;
}

.table-list-header .table-list-header-count {
    font-size: 1.5rem;
}

.sidebar-content .table-list-header {
    border: 0;
    border-bottom: 2px solid var(--button-blue-border-gradient-match);
    margin-bottom: 8px;
    background: var(--pp-white);
}

.table-list-row {
    /* padding-bottom: 10px; */
    padding-bottom: 7px;
    border-right: 0;
    padding-top: 10px;
    position: relative;
}

.sidebar-content .table-list-row.table-border-left {
    border: 0;
}

#task-summary > .task-summary-container.color-red, #board > tbody > tr > td > div > .task-board.color-red {
    border-color: rgb(249, 5, 5);
}

#task-summary > .task-summary-container.color-green, #board > tbody > tr > td > div > .task-board.color-green {
    border-color: rgb(5, 170, 47);
}

.task-footer-left {
    display: inline; width: 40%;
}

.task-footer-right {
    display: inline-block;
    width: 60%;
}

.priority-table-new {
    font-size: 80% !important;
    position: fixed;
    bottom: -15px;
}

.priority-table-new-header {
    text-transform: uppercase;
    text-align: center;
    display: block;
    border-color: #8F8C8C !important;
}

.priority-table-new-list-row-rd {
    border-color: #8F8C8C !important;
    background-color: #FF000054 !important;
}

.priority-table-new-list-title {
    display: inline;
    width: 50px;
}

.priority-table-new-list-title strong {
    text-align: center !important;
    font-weight: bold !important;
    color: #000000 !important;
}

.priority-table-new-list-details {
    font-size: .9em;
    text-align: center;
    color: #000000 !important;
    display: inline-block;
}

.priority-table-new-list-details ul li {
    display: inline list-item!important;
}

.priority-table-new-list-row-gn {
    border-color: #8F8C8C !important;
    background-color: #00800078 !important;
}

.priority-table-new-list-row-yw {
    border-color: #8F8C8C !important;
    background-color: #FFA5006E !important;
}

#task-summary h2 {
    color: #B71234 !important;
}

.summary-title {
    text-transform: uppercase;
    font-size: .9em;
}

.badge {
    margin-left: 0 !important;
}

#BadgeOpen {
    background-color: var(--pp-green);
    color: #EEEEEE;
    font-weight: bold;
    border: 2px solid var(--pp-green);
    border-radius: var(--border-radius-kbcss);
    padding-left: 3px;
    box-shadow: var(--box-shadow-kbcss);
}

#BadgeClosed {
    background-color: var(--pp-grey);
    color: #EEEEEE;
    font-weight: bold;
    border: 2px solid var(--pp-grey);
    border-radius: var(--border-radius-kbcss);
    padding-left: 3px;
    box-shadow: var(--box-shadow-kbcss);
}

#ToggleOffTask {
    background-color: var(--pp-grey);
    color: #EEEEEE;
    font-weight: bold;
    border: 2px solid var(--pp-grey);
    border-radius: var(--border-radius-kbcss);
    padding-left: 1px;
    box-shadow: var(--box-shadow-kbcss);
}

#ToggleOffTask .fa {
    padding-right: 0;
}

#ToggleOffTask > a.js-modal-confirm:hover {
    color: white !important;
}

#RecurringPending, #RecurringProcessed {
    text-transform: uppercase;
    font-size: .9em;
    font-weight: bold;
    color: var(--color-primary);
    border: 1px solid var(--pp-orange);
    display: initial;
    padding: 2px;
    border-radius: var(--border-radius-kbcss);
    background-color: var(--pp-white);
    margin: 0 7px 0 0;
    line-height: 40px;
}

#RecurringPending span i, #RecurringProcessed span i, .public-task-link strong i {
    color: var(--color-primary);
}

.avatar-25 img, .avatar-25 div {
    border-radius: 20px;
    margin-bottom: -7px;
    margin-right: 4px;
    box-shadow: var(--box-shadow-kbcss);
}

.summary-title strong {
    /* min-width: 120px; */
    /* width: unset; */
    width: 130px;
    display: inline-block;
}

.markdown .endofmonth {
    border: 3px solid darkred;
    padding: .5em .5em 1em .5em;
    width: max-content;
}

.markdown .endofmonth h3 {
    font-weight: bold;
}

.markdown .endofmonthbalance {
    font-size: 1.2em;
    color:darkred;
    font-weight: bold;
}

.table-list-wrapper {
    padding: 2px 3px 2px 3px;
    border: 1px solid #000000;
    border-radius: var(--border-radius-kbcss);
    text-transform: uppercase;
}

.table-list-row .table-list-details strong {
    font-weight: bold !important;
}

.wrapper-pending, .wrapper-pending-payments, .wrapper-waiting-for-payments, .wrapper-pending-requests, .wrapper-backlog, .wrapper-waiting-for-payment {
    background-color: #FD4343;
}

.wrapper-work-in-progress, .wrapper-agreed, .wrapper-authorised, .wrapper-distributed {
    background-color: #16AC00;
}

.wrapper-done, .wrapper-paid, .wrapper-ready-to-ship {
    background-color: #149CEE;
}

.wrapper-ready, .wrapper-review {
    background-color: gray;
}

.wrapper-rejected {
    background-color: #4D4D4D;
}

.wrapper-rejected strong {
    color: white;
}

.wrapper-on-hold, .wrapper-held---rejected {
    background-color: gray;
}

.wrapper-paperwork, .wrapper-request---idea, .wrapper-design-request, .wrapper-request, .wrapper-feature-request {
    background-color: orange;
}

.wrapper-packaging, .wrapper-recurring {
    background-color: gray;
}

.wrapper-workflow, .wrapper-pp-store {
    background-color: #AEADAD;
}

.wrapper-waiting-for-funds {
    background-color: #FA26A0;
}

.table-list-wrapper small {
    color: white;
}

.table-list-row .table-list-title {
    font-weight: bold !important;
    font-size: 1.3em;
}

.table-list-row .table-list-details {
    color: var(--pp-black) !important;
    font-weight: normal !important;
    margin-top: 5px;
}

.task-list-icons a, .task-list-icons span, .task-list-icons i {
    color: var(--pp-black) !important;
}

.task-list-subtasks {
    margin-top: 5px;
}

.subtask-cell {
    border-top: 1px solid var(--button-blue-border-gradient-match) !important;
    border-left: 0 !important;
}

span.task-icon-age-total, span.task-icon-age-column {
    border: 1px solid var(--button-blue-border-gradient-match) !important;
    color: var(--color-primary);
}

span.task-icon-age-column {
    border-left: 0 !important;
    padding: 1px 3px 1px 5px !important;
}

.wiki-table-row:hover {
    background: var(--background-hover) !important;
}

.table-list-row:hover i.fa-info-circle {
  color: var(--pp-white);
}

table.metadata-table > tbody > tr > td {
    border: 2px solid var(--button-blue-border-gradient-match);
    border-bottom: 2px solid !important;
    border-right: 2px solid !important;
    border-left: 2px solid !important;
}

#dashboard .dash-task-list {
    padding-left: .5rem;
    border-top: 1px solid var(--button-blue-border-gradient-match);
    border-right: 1px solid var(--button-blue-border-gradient-match);
    border-bottom: 1px solid var(--button-blue-border-gradient-match);
    border-radius: var(--border-radius-kbcss);
    padding-right: .5rem;
    margin-bottom: 1em;
    position: relative;
}

.dash-task-list .table-list-details span {
    margin-left: 10px;
}

.task-list-avatars .task-avatar-assignee {
    font-weight: normal !important;
    color: initial !important;
}

.tagslist {
    display: block;
}

.table-list-category {
    border: 1px solid var(--pp-black) !important;
}

.task-list-avatars {
    float: right;
    margin-left: 2rem;
    margin-right: .5rem;
    right: 10px;
    position: absolute;
    top: 10px;
}

.comments .text-editor textarea, .comments .text-editor .text-editor-preview-area {
    min-height: 175px !important;
}

#TaskReference {
    font-weight: bold;
    border: 2px dashed #000000;
    padding: 0 3px;
    background-color: rgb(255, 251, 0);
    color: #151515;
    box-shadow: var(--box-shadow-kbcss);
}

.date-block i:nth-child(2) {
    margin-left: 5px;
}

.date-block {
    padding-bottom: 3px;
    position: relative;
}

.file-size {
    position: absolute;
    right: 0;
}

.file-thumbnail-description {
    position: relative;
}

.file-thumbnail-description span.tooltip {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #4D4D4D;
    font-size: 1.3em;
    margin-bottom: -3px;
}

#task-summary .accordion-section .accordion-content {
    margin-top: 0;
}

tbody tr.disabled {
    display: none;
}

.metadata-table {
    margin-bottom: 0;
}

.total-score-swimlanes {
    position: absolute;
    right: 0;
    margin: auto 1px;
    top: 0;
    cursor: context-menu;
    color: var(--color-medium);
}

.column-score {
    position: absolute;
    right: 0;
    margin: auto 1px;
    bottom: 0;
    cursor: context-menu;
    color: var(--color-medium);
}

.board-column-tooltip {
    margin-left: -2px;
    margin-right: 0;
}

.board-column-tooltip span i {
    color: #4F4F4F !important;
}

.public-header {
    padding: .5rem;
    border-bottom: 2px solid #701919;
    font-size: 1.2rem;
    color: #4D4D4D;
}

.public-board {
    margin-top: unset !important;
}

.w3-wrapper {
    width: 33%;
    display: inline-block;
}

.public-header > .w3-wrapper:nth-child(1) {
    text-align: left;
}

.public-header > .w3-wrapper:nth-child(2) {
    text-align: center;
}

.public-header > .w3-wrapper:nth-child(3) {
    text-align: right;
}

.public-header-site-title {
    margin: .5rem;
}

.public-info > .w3-wrapper:nth-child(1) {
    text-align: left;
}

.public-info > .w3-wrapper:nth-child(2) {
    text-align: center;
    position: absolute;
    margin-top: .5rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: bold;
    color: #665858;
}

.public-info > .w3-wrapper:nth-child(3) {
    text-align: right;
}

.public-sticky {
    position: sticky;
    top: 0;
    background-color: #FFFFFF;
    z-index: 1;
    margin-bottom: 5px;
    box-shadow: 0 0 9px 1px #711A1A;
    padding-bottom: 5px;
}

.public-info {
    position: relative;
    margin: auto .5rem;
}

.public-board-title {
    font-size: 1.5em;
    color: #665858;
    font-weight: bold;
}

.public-board-desc {
    font-size: .9rem;
}

.public-warning {
    font-weight: bold;
    font-size: .8rem;
    color: #4D4D4D;
}

.public-refresh {
    font-size: .8rem;
    color: #4D4D4D;
}

.public-task {
    max-width: unset !important;
    margin: 1em !important;
}

.public-task .comment-actions {
    display: none;
}

.public-task-link {
    text-transform: uppercase;
    font-size: .9em;
    font-weight: bold;
    color: var(--color-primary);
    background: var(--button-blue-border-gradient);
    border: 1px solid var(--button-blue-border-gradient-match);
    display: initial;
    border-radius: var(--border-radius-kbcss);
    padding-top: 2px !important;
    padding-bottom: .122em !important;
    line-height: 40px !important;
}

.public-task-link strong a {
    margin-left: 3px;
    font-weight: initial;
}

.public-task-link strong i.fa-external-link {
    margin-left: 3px;
    font-size: 90%;
}

.public-board .metamagik-footer-title, .public-board .metamagik-footer-value {
    display: none;
}

.task-board-header .fa-sticky-note {
    margin-right: .3rem;
}

.task-summary .fa-sticky-note {
    color: red;
}

.task-tags {
    position: relative;
}

.task-board-title::before {
    content:  "\f249";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    bottom: 0;
    font-size: 4rem !important;
    color: var(--red-icon-faded);
    opacity: .3;
}

.task-summary-container, .sidebar-content > .page-header {
    border-radius: var(--border-radius-kbcss) !important;
}

.task-summary-container {
    margin: auto 17px;
    margin-right: 0;
    margin-left: 0;
}

.page-header h2 {
    /* border-bottom: none; */
    border-bottom: 2px outset var(--button-blue-border-gradient-match);
}

.file-thumbnails > .file-thumbnail img {
    border-top-left-radius: var(--border-radius-kbcss);
    border-top-right-radius: var(--border-radius-kbcss);
}

.file-thumbnails > .file-thumbnail {
    border-radius: var(--border-radius-kbcss);
    border: 1px solid var(--button-blue-border-gradient-match);
}

#form-task_id::before {
    content: "\f054";
    text-rendering: auto;
    font: normal normal normal 1em/1 FontAwesome;
}

.project-overview-column {
    border: 2px dashed var(--button-blue-border-gradient-match) !important;
    border-radius: var(--border-radius-kbcss);
}

.project-overview-column small {
    color: var(--color-dark) !important;
}

.ws-btn-blue {
    background: var(--button-blue-gradient) !important;
    border: 1px solid var(--button-blue-border-gradient-match) !important;
}

.ws-btn-blue a:hover {
    color: var(--pp-white);
}

.button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1em;
    font-weight: normal;
    cursor: pointer;
    display: inline-block;
    border-radius: var(--border-radius-kbcss);
    padding: 2px 8px 4px 5px;
    margin: auto 5px;
    border: 1px solid var(--button-default-border-color);
    background: var(--button-default-background-color);
    color: var(--button-default-color);
}

.btn-sm {
    padding: 0 4px 0 3px;
    line-height: 20px;
    background: var(--button-blue-gradient);
    border: 1px solid var(--button-blue-border-gradient-match);
}

.center, .text-center {
    text-align: center;
}

#main > .project-header {
    box-shadow: 0 2px 10px 0 #000000;
}

.board-swimlane-header {
    border: 0;
}

.board-swimlane-header i {
    font-size: 1.5em;
    vertical-align: sub;
    color: var(--pp-red-alt-2);
}

[title*="Metadata"] {
    display: none;
}

[title*="Reference"] {
    opacity: 1 !important;
}

.markdown h1 {
    color: #000000;
    text-shadow: -1px -1px 1px #007AC9, 1px 1px 1px blue;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.8em;
}

.task-board-recent {
    box-shadow: 0 0 3px 2px #000000 !important;
    margin-top: .2rem;
    margin-bottom: 1.2rem !important;
    border: none;
}

.metadata-table thead {
    display: none;
}

.assigned-other-label {
    display: none;
}

span.cell-float-right {
    float: right;
}

#ProjectOverview > span {
    /* padding: 3px 0 4px 2px; */
    padding: 3px 0 0 0;
    display: inline-block;
    margin-block: 3px 0;
    padding-block: 0;
    font-size: 90%;
}

.board-column-expanded {
    font-size: 90%;
}

::selection {
    /* background: rgba(113,113,113,.5); */
    background: rgba(183, 18, 52, .63);
    color:#FFFFFF;
}

#config-section .form-help:only-of-type {
    display: inline-block;
    margin-left: 5px;
}

#form-application_language + label {
  display: inline-block;
  margin-left: 50px;
}

.dropdown-submenu-open li.active {
    border-left: 1px solid var(--pp-red-alt-2);
    border-left-width: 5px;
    padding-left: 4px;
}

/* #### MODAL CLOSE BUTTON */
#modal-close-button {
    transform: scale(1.5);
    display: inline-block;
    position: absolute;
    right: 6px;
    top: 6px;
    background: var(--pp-red-alt-2);
    padding: 3px 3px 5px 6px;
    border-bottom-left-radius: 3px;
    box-shadow: -1px -1px 0 3px var(--pp-white);
    z-index: 1001;
}

#modal-close-button i {
    color: var(--pp-white);
    transition: var(--transition-kanboard-css);
}

#modal-close-button:hover i {
    color: var(--pp-grey);
    text-shadow: 0 0 1px var(--pp-white);
}

/* #### END OF MODAL CLOSE BUTTON */

@media screen and (max-width: 500px) {
    .public-header {
        font-size: 1em;
    }

    .public-board-site-title {
        text-align: left;
        line-height: 0;
    }

    .public-board-site-title span {
        line-height: initial;
        font-size: .8em;
        text-align: center;
        display: inline-block;
        width: 100px;
        vertical-align: middle;
    }

    .public-board-title {
        font-size: 1em;
        color: #665858;
        font-weight: bold;
    }

    .public-header > .w3-wrapper:nth-child(3) {
        width: auto;
        font-size: .8em;
        margin: 10px auto -4px auto;
        display: block;
        text-align: center;
    }

    .public-board-desc {
        font-size: .8rem;
    }

    .public-header > .w3-wrapper:nth-child(1) {
        width: 50%;
    }

    .public-header > .w3-wrapper:nth-child(2) {
        display: inline-block;
        width: auto;
    }

    .public-info > .w3-wrapper:nth-child(1) {
        display: block;
        width: auto;
        text-align: center;
    }

    .public-info > .w3-wrapper:nth-child(2) {
        display: block;
        width: auto;
        text-align: center;
        position: unset;
        margin-bottom: -20px;
    }

    .public-refresh, .public-warning {
        font-size: .7rem;
    }

    .task-summary-container {
        margin: auto .5rem;
    }

    .row > .column {
        width: 100%;
    }

    .comment-actions {
        display: none;
    }

    .comment-date, .comment-created {
        font-size: .7rem;
        margin-right: 0 !important;
    }

    .comment-content {
        margin-top: 1.5rem;
        margin-left: .5rem !important;
    }

    .avatar img {
        width: 33px;
    }

    .avatar-48 .avatar-letter {
        line-height: 33px !important;
        width: 33px !important;
        font-size: 18px !important;
    }

    .comment-title {
        margin-left: 30px !important;
    }

    .public-task-link {
        position: absolute;
        top: 0;
        right: 0;
        padding: .5rem 1rem;
    }

    .public-back-to-board-link {
        position: absolute;
        top: 0;
        left: 0;
        padding: .5rem 1rem;
    }

    .public-task #task-summary {
        margin-top: 3em;
    }
}