/* KANBOARD PLUGIN - PLUGIN MANAGER CSS FILE */

:root {
    --pp-blue: #007AC9;
    --pp-blue-alt: #00ADFF;
    --pp-red: #B71234;
    --pp-red-alt: #DA004C;
    --pp-red-alt-2: #AE003D;
    --pp-red-alt-3: #D50000;
    --pp-black: #000000;
    --pp-light-grey: #8F8F8F;
    --pp-grey: #4D4D4D;
    --pp-white: #FFFFFF;
    --pp-green: #2EA02E;
    --pp-green-dark: #055D20;
    --pp-orange: #FF6500;
    --pp-orangered: #FF4500;
    --blue-icon-dark: #034CA6;
    --link-color-pm: #3366CC;
    --table-header-dir-info-pm: #AFCFE6;
    --table-header-plugin-pm: #DEF2FD;
    --color-light:#999999;
    --button-blue-gradient: linear-gradient(to bottom, #7892C2 80%, #476E9E 100%);
    --blue-border-gradient-match: #476E9E;
    --table-blue-border-gradient-match: #476E9E;
    --table-head-padding: 4px 15px;
    --table-head-box-shadow: 0 0 5px 0 #000000;
    --table-head-text-shadow: 2px 2px #373737;
    --button-background-delete: #D05C84;
    --tooltip-box-shadow: 1px 1px 1px 0 #000000;
    --header-page-margin-pm: 5px 15px 10px 15px;
    --page-margin-pm: 0 15px 0 15px;
    --title-margin-pm: 0 15px 0 15px;
    --panel-background-pm: #EEEEEE;
    --border-radius-pm: 3px;
    --transition-pm: ease-in-out all .3s;
    --modal-page-header-pm: 5px 5px 10px 5px;
}

.pp-blue { color: var(--pp-blue); fill: var(--pp-blue); }
.pp-blue-alt { color: var(--pp-blue-alt); fill: var(--pp-blue-alt); }
.pp-red { color: var(--pp-red); fill: var(--pp-red); }
.pp-red-alt { color: var(--pp-red-alt); fill: var(--pp-red-alt); }
.pp-red-alt-2 { color: var(--pp-red-alt-2); fill: var(--pp-red-alt-2); }
.pp-black { color: var(--pp-black); fill: var(--pp-black); }
.pp-light-grey { color: var(--pp-light-grey); fill: var(--pp-light-grey); }
.pp-grey { color: var(--pp-grey); fill: var(--pp-grey); }
.pp-white { color: var(--pp-white); fill: var(--pp-white); }
.pp-green { color: var(--pp-green); fill: var(--pp-green); }
.pp-green-dark { color: var(--pp-green-dark); fill: var(--pp-green-dark); }
.pp-orange { color: var(--pp-orange); fill: var(--pp-orange); }

.btn-uninstall, #PluginSideBar ul li a {
    transition: var(--transition-pm);
}

.display-none, .d-none {
    display: none;
}

.font-weight-bold {
    font-weight: bold;
}

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

.relative {
    position: relative;
}

/* stylelint-disable selector-id-pattern, declaration-no-important */
#main .pm-page-header {
    margin: var(--header-page-margin-pm);
}

/* stylelint-enable selector-id-pattern, declaration-no-important */

.pm-page-header h2 {
    border-bottom: 2px outset var(--blue-border-gradient-match);
    margin-bottom: 15px;
    padding-bottom: 5px;
    font-size: 1.6em;
    padding-top: 5px;
    margin-top: 0;
}

.pm-page-header h2 .pm-plugin-directory-icon, .pm-page-header h2 .pm-manual-plugin-icon {
    margin-right: 5px;
}

.pm-page-header.plugin-manager-header h2 .pm-plugin-icon {
    margin-right: 5px;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: text-top;
}

.pm-page-header h2 .pm-problems-icon {
    top: 2px;
    position: relative;
    width: 23px;
    height: 23px;
    display: inline-block;
}

.pm-page-margin {
    margin: var(--page-margin-pm);
}

.pm-page-margin p {
    margin-block: 10px;
}

.pm-page-title {
    margin: var(--title-margin-pm);
}

.pm-page-title h3 {
    margin-bottom: 0;
    color: var(--pp-red);
}

.pm-page-title h3 span {
    width: 20px;
    height: 20px;
    vertical-align: top;
    margin-top: 1px;
    display: inline-block;
    margin-right: 5px;
}

.plugin-name span.pm-plugin-icon {
    vertical-align: sub;
    margin-right: 5px;
}

#PluginSideBar > ul li {
    border-left: 5px solid white;
    padding-left: 5px;
    padding-right: 5px;
    border-bottom: 0;
    line-height: 16px;
    margin-bottom: 10px;
    font-size: .9em;

}

#PluginSideBar ul li a {
    color: var(--pp-grey);
}

#PluginSideBar ul li a:hover {
    color: var(--pp-red);
}

#PluginSideBar + .sidebar-content {
    margin-bottom: 30px;
}

#PluginMenu li {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    text-align: center;
}

#PluginSideBar > ul li.active > a span {
    color: var(--pp-red);
}

#PluginSideBar > ul li > a span {
    margin-bottom: 5px;
}

#PluginSideBar > ul li.active {
    border-left-color: var(--pp-black);
}

#PluginMenu li .plugin-manager-item span, #PluginMenu li a svg {
    display: block;
    margin: auto;
    width: 26px;
    height: 26px;
    padding-bottom: 5px;
}

#PluginMenu li .plugin-directory-item span {
    display: block;
    margin: auto;
    width: 24px;
    height: 24px;
    padding-bottom: 5px;
}

#PluginMenu li .plugin-problems-item span {
    display: block;
    margin: auto;
    width: 26px;
    height: 26px;
    padding-bottom: 5px;
}

#PluginMenu li .plugin-info-item span {
    display: block;
    margin: auto;
    width: 26px;
    height: 26px;
    padding-bottom: 5px;
}

#PluginMenu li .plugin-problems-support span {
    display: block;
    margin: auto;
    width: 26px;
    height: 26px;
    padding-bottom: 5px;
}

#PluginMenu li .plugin-content-cleaner-item span {
    display: block;
    margin: auto;
    width: 36px;
    height: 36px;
    padding-bottom: 5px;
}

#PluginMenu li.content-cleaner-menu-link {
    padding-top: 0;
}

.plugin-count {
    font-style: italic;
    display: inline-block;
}

.plugin-list-clipboard {
    position: absolute;
    right: 0;
    top: -7px;
}

.copy-installed-list-format {
    background-color: var(--pp-green-dark);
    color: var(--pp-white);
    border: 1px solid var(--pp-green-dark);
    border-radius: var(--border-radius-pm);
    padding-right: 5px;
    padding-bottom: 0;
    transition: var(--transition-pm);
    width: 30px;
}

.copy-installed-list-format:hover {
    border-color: var(--pp-green-dark);
    color: var(--pp-green-dark);
}

.plugin-installed-filter {
    display: block;
    margin: 10px auto 25px auto;
    text-align: center;
}

.plugin-available-filter {
    display: inline-block;
    position: relative;
}

.plugin-installed-filter label, .plugin-available-filter label {
    display: inline;
}

.plugin-installed-filter label .pm-filter-icon, .plugin-available-filter label .pm-filter-icon {
    vertical-align: text-bottom;
    margin-right: 5px;
}

.plugin-installed-filter input{
    width: 375px;
}

.plugin-available-filter input {
    width: 235px;
}

.plugin-installed-filter input, .plugin-available-filter input {
    padding: 3px 3px 4px 3px;
    font-size: 1em;
    border: 2px solid var(--blue-border-gradient-match);
}

#AvailablePluginsFilterInput {
    margin-bottom: 10px;
}

#InstalledPluginsTable, #InstalledIncompatiblePluginsTable {
    margin-bottom: 0;
}

#InstalledPluginsTable tbody {
    border: 2px inset var(--blue-border-gradient-match);
}

#InstalledIncompatiblePluginsTable tbody {
    border: 2px inset rgba(183, 18, 52, .5);
}

#InstalledPluginsTable > tbody > tr > td, #InstalledIncompatiblePluginsTable > tbody > tr > td {
    border: 0 !important;
    padding: 4px 15px;
}

#InstalledPluginsTable > thead > tr > th {
    border: 2px inset var(--blue-border-gradient-match);
    background: var(--table-blue-border-gradient-match);
    text-shadow: var(--table-head-text-shadow);
    color: var(--pp-white);
}

#InstalledIncompatiblePluginsTable thead > tr > th {
    border: 2px inset rgba(183, 18, 52, .5);
    background: rgba(183, 18, 52, .5);
    color: var(--pp-red-alt-2);
}

#InstalledPluginsTable > thead > tr > th, #InstalledIncompatiblePluginsTable thead > tr > th {
    font-weight: 600;
    letter-spacing: .04125em;
    padding: var(--table-head-padding);
}

.installed-plugins th {
    /* top: 38px;  if header is also used as sticky */
    top: 0;
    position: sticky;
    position: -webkit-sticky;
    z-index: 100;
    border: 2px solid var(--blue-border-gradient-match) !important;
}

.plugin-name {
    font-weight: 600;
    font-size: .9em;
    vertical-align: middle;
}

.plugin-author {
    font-size: .9em;
    font-style: italic;
    vertical-align: middle;
}

.plugin-version {
    vertical-align: middle;
}

.plugin-compatible-version {
    vertical-align: middle;
}

.not-specified {
    vertical-align: middle;
    cursor: context-menu;
    font-style: italic;
    font-size: .9em;
    color: var(--pp-orange);
}

.plugin-schema {
    margin: auto 2px;
    flex: 1;
    height: 18px;
}

.plugin-homepage, .plugin-readme, .has-schema, .has-overrides {
    vertical-align: middle;
    margin: 2px;
    height: 18px;
    flex: 1 0;
}

.has-hooks {
    vertical-align: middle;
    margin: 2px;
}

.plugin-homepage a, .plugin-schema .tooltip {
    padding-bottom: 1px;
    padding-top: 2px;
    padding-right: 5px;
}

.plugin-action .plugin-schema .tooltip {
    border: 1px solid var(--pp-grey);
    padding-top: 5px;
    padding-bottom: 6px;
    padding-left: 3px;
    border-radius: var(--border-radius-pm);
    display: inline-flex;
}

.plugin-schema .tooltip span {
    vertical-align: bottom;
}

.plugin-homepage a span, .plugin-readme a span {
    padding: 3px 0;
    padding-bottom: 5px;
    pointer-events: none;
}

.plugin-action {
    width: 120px;
    display: flex;
    padding: 4px 0 4px 0 !important;
}

.plugin-uninstall {
    text-align: right;
    padding: 4px 5px 4px 5px !important;
}

.btn-action, .btn-action:visited, span.btn-uninstall a {
    text-align: center;
    display: inline-flex;
    border-radius: var(--border-radius-pm);
    text-decoration: none !important;
    transition: var(--transition-pm);
}

.btn-action {
    padding: 2px 4px 1px 5px;
    border: 1px solid var(--pp-grey);
    cursor: pointer;
    vertical-align: middle;
}

a.btn-action:hover {
    color: var(--pp-red-alt-2) !important;
}

.btn-uninstall {
    vertical-align: middle;
    background: var(--button-background-delete);
    padding: 5px 4px 6px 2px;
    margin: 3px 2px auto 2px;
    border-radius: var(--border-radius-pm);
    border: 1px solid var(--pp-grey);
    display: inline-block;
    width: 100px;
    font-size: .9em;
}

td .btn-uninstall a, td .btn-uninstall a i {
    color: var(--pp-white) !important;
    text-decoration: none !important;
}

td .btn-uninstall:hover a {
    color: var(--pp-red-alt-2) !important;
    text-decoration: none !important;
}

.btn-uninstall:hover {
    background: var(--pp-white) !important;
    text-decoration: none !important;
}

.btn-uninstall:hover a, .btn-uninstall:hover a i {
    color: var(--pp-red-alt-2) !important;
}

tr.plugin-description td {
    padding-top: 10px !important;
    padding-bottom: 15px !important;
    font-size: .95em;
}

.plugin-dir-last-updated {
    float: left;
    margin-top: 9px;
    padding: 2px 4px 1px 0;
    font-weight: normal;
    color: var(--pp-grey);
    font-style: italic;
    font-size: .9em;
}

#PluginTop {
    display: block;
    right: 0;
    position: relative;
    float: right;
    margin-top: 3px;
    color: var(--pp-grey);
    font-size: .9em;
}

#PluginBottom {
    display: block;
    right: 0;
    position: relative;
    float: right;
    margin-bottom: 4px;
    color: var(--pp-grey);
    margin-top: 3px;
    margin-left: 5px;
    font-size: .9em;
}

.tooltip-section {
    width: 500px;
}

.tooltip-title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: normal;
}

.tooltip-title span {
    margin-right: 3px;
}

.tooltip-hr {
    box-shadow: var(--tooltip-box-shadow);
}

.tooltip-content {
    font-size: .8em;
}

.directory-info-wrapper {
    margin: auto;
    display: block;
    width: fit-content;
}

.directory-info {
    text-align: center;
}

.available-count {
    font-size: 1.1em;
    font-weight: bold;
    cursor: context-menu;
}

#DirectoryInfo {
    border-collapse: separate;
    border-spacing: 5px;
}

#PluginDirectoryPage #DirectoryInfo > thead > tr > th {
    padding: var(--table-head-padding);
    background-color: var(--table-header-dir-info-pm);
    border-radius: var(--border-radius-pm);
    border: 2px inset var(--pp-grey);
    font-weight: 600;
    cursor: context-menu;
    text-align: center;
}

#DirectoryInfo > tbody > tr > td {
    padding: var(--table-head-padding);
    border-radius: var(--border-radius-pm);
    border: 2px inset var(--pp-grey);
    vertical-align: middle;
}

.plugin-dir-url {
    font-weight: normal;
    cursor: context-menu;
    color: var(--pp-grey);
}

.kb-app-version {
    cursor: context-menu;
    font-size: 1.1em;
}

#DirectoryInfo td.plugin-dir-view a {
    text-decoration: none !important;
    transition: var(--transition-pm);
}

#DirectoryInfo td.plugin-dir-view a .pm-source-directory-icon {
    vertical-align: bottom;
    margin-right: 3px;
}

th.available-plugins-author {
    position: relative;
    font-weight: normal;
    font-style: italic;
    font-size: .9em;
    border-bottom: 0;
}

.available-plugins-author svg.bi-code-square {
    vertical-align: bottom;
    margin-right: 5px;
    pointer-events: none;
}

.available-plugins-author span.pm-license-icon {
    position: absolute;
    right: 3px;
}

.available-plugins-title {
    font-weight: 600;
}

.available-plugin-last-updated {
    width: 165px;
    text-align: center;
    font-style: italic;
}

table.available-plugins-table > thead > tr > th, table.available-plugins-table > tbody > tr > td, table.available-plugins-table > tbody > tr > th {
    padding: 3px 3px;
    vertical-align: middle;
    position: relative;
}

#PluginDirectoryPage table.available-plugins-table > tbody > tr > th {
    background: var(--table-header-plugin-pm);
    border: 1px solid var(--table-header-plugin-pm);
}

#PluginDirectoryPage table.available-plugins-table > tbody > tr > td {
    border: 1px solid var(--table-header-plugin-pm);
}

.available-plugin-version {
    width: 80px;
    text-align: center;
    font-family: monospace;
    font-size: 1.2em;
    cursor: context-menu;
}

.available-plugin-version::before, .currently-installed-v::before {
    content: "v";
    margin: -6px;
}

td.available-plugin-description .markdown p {
    margin-top: 5px;
    margin-bottom: 5px;
}

.available-plugin-structure .btn-action:hover, .plugin-action .btn-action:hover {
    border-color: var(--pp-red);
    box-shadow: 0 0 0 1px var(--pp-red);
}

.available-plugin-structure {
    width: 220px;
    text-align: center;
}

.available-plugin-structure .plugin-homepage {
    padding-top: 2px;
    padding-bottom: 7px;
}

.available-plugin-structure span {
    width: 24px;
    height: 24px;
}

.available-plugin-structure .pm-database-icon, .available-plugin-structure .pm-database-check-icon {
    padding-top: 1px !important;
    padding-bottom: 2px !important;
    margin-right: 2px;
}

.has-overrides {
    padding: 2px 4px 2px 5px;
    width: 24px;
    height: 24px;
}

.available-plugin-status {
    width: 200px;
}

.available-plugin-structure .pm-database-add-icon {
    padding: 0 4px 1px 5px;
    width: 24px;
    height: 26px;
}

.pm-database-icon, .pm-database-check-icon {
    padding-top: 3px !important;
    padding-bottom: 0 !important;
}

.tick {
    color: var(--pp-green);
    font-weight: bold;
    font-size: 1.3em;
    display: inline;
}

.cross {
    color: var(--pp-red-alt-2);
    font-weight: bold;
    font-size: 1.3em;
    display: inline;
}

td a.install-plugin, td a.update-plugin, td a.download-archive {
    text-decoration: none !important;
}

a.update-plugin, a.update-plugin:link, a.update-plugin:visited {
    color: var(--pp-white);
    font-weight: 600;
    padding: 3px 5px;
    border: 2px solid var(--pp-grey);
    border-radius: var(--border-radius-pm);
    background-color: var(--pp-orange);
    transition: var(--transition-pm);
}

.install-plugin, .install-plugin:link, .install-plugin:visited {
    color: var(--link-color-pm);
    font-weight: 600;
    padding: 5px 5px 2px 5px;
    display: inline-block;
    border: 2px solid var(--pp-orange);
    border-radius: var(--border-radius-pm);
    transition: var(--transition-pm);
}

.install-plugin:hover, .update-plugin:hover, .download-archive:hover {
    color: var(--pp-red-alt-2);
    fill: var(--pp-red-alt-2);
    border-color: var(--pp-red-alt-2) !important;
    text-decoration: none !important;
}

.install-plugin i.fa-cloud-download {
    margin-right: 5px;
}

button.install-plugin-btn {
    font-size: 1em;
    padding-bottom: 0;
}

.update-plugin i.fa-refresh {
    margin-right: 5px;
}

a.download-archive, a.download-archive:link, a.download-archive:visited {
    color: var(--link-color-pm);
    font-weight: 600;
    padding: 5px 5px 3px 5px;
    border: 2px solid var(--pp-orange);
    border-radius: var(--border-radius-pm);
    transition: var(--transition-pm);
    height: 20px;
    display: inline-block;
    vertical-align: top;
}

.download-archive span.pm-download-icon {
    vertical-align: sub;
    margin-right: 4px;
    margin-left: 1px;
}

th.plugin-structure, th.plugin-status, th.plugin-last-updated {
    border-bottom: 0 !important;
    font-weight: 600;
    color: var(--pp-grey);
    position: relative;
}

td.available-plugin-structure, td.available-plugin-status, td.available-plugin-last-updated {
    border-top: 0 !important;
}

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

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

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

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

table.available-plugins-table {
    border: 2px outset var(--blue-border-gradient-match);
    border-radius: 5px;
}

table.manual-plugins-table {
    border-color: var(--pp-red-alt-3);
    border-style: outset;
}

table.available-plugins-table:last-of-type {
    margin-bottom: 0;
}

td.manual-plugin-description {
    border-color: var(--pp-red-alt-3);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.available-plugins-table {
    border-collapse: unset;
}

.date-toggle:not(span) {
    cursor: pointer;
}

.age-warning, .age-danger {
    font-weight: 600;
}

.age-pass {
    color: var(--pp-green-dark);
    font-weight: 500;
}

.plugin-last-updated .tooltip, .plugin-structure .tooltip {
    position: absolute;
    right: 3px;
    top: 3px;
    cursor: pointer;
}

.info-tooltip-wrapper {
    max-width: 600px;
}

.info-tooltip-title {
    vertical-align: middle;
    font-weight: bold;
}

.info-tooltip-text {
    font-size: .8em;
}

.info-tooltip-list {
    list-style-type: none;
    padding: 0;
}

.info-tooltip-item {
    font-weight: bold;
    font-size: .8em;
    display: inline-block;
    width: 150px;
    vertical-align: middle;
}

.info-tooltip-title span {
    vertical-align: sub;
    pointer-events: none;
}

.info-tooltip-item .age-pass, .info-tooltip-item .age-warning, .info-tooltip-item .age-danger {
    width: 100px;
    font-weight: bold;
}

.info-tooltip-item .timeframe {
    margin-left: 10px;
    font-style: italic;
    font-weight: normal;
}

.info-type-section {
    display: block;
    margin: auto;
    text-align: center;
    position: relative;
    margin-top: 15px;
}

.info-type-wrapper {
    display: inline-block;
    position: relative;
    width: 400px;
    margin: 10px;
    box-shadow: 1px 1px 2px 2px var(--blue-border-gradient-match);
}

.info-type-icon {
    float: left;
    position: absolute;
    left: 3px;
    top: 12px;
}

.info-type-icon .pm-plugin-icon, .info-type-icon .pm-action-icon, .info-type-icon .pm-theme-icon, .info-type-icon .pm-connector-icon, .info-type-icon .pm-multi-icon, .info-type-icon .pm-other-icon {
    width: 50px;
    height: 50px;
    display: inline-block;
}

.info-type-title {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.5;
}

.info-type-text {
    padding: 5px 0;
    font-size: .9em;
    width: 340px;
    height: 40px;
    display: table-cell;
    vertical-align: middle;
}

.info-type-box {
    margin-left: 59px;
}

figure.notice {
    text-align: center;
    margin-top: 0;
    font-style: italic;
}

figure.notice a, figure.notice a:visited {
    color: var(--blue-icon-dark);
    font-weight: 600;
    text-decoration: none;
}

.v-sub {
    vertical-align: sub;
}

.v-top {
    vertical-align: top;
}

.plugin-available-filter-wrapper {
    margin: auto;
    display: block;
    width: fit-content;
}

.plugin-type-counts, .plugin-type-counts label {
    display: inline-block;
    position: relative;
    margin-top: 0;
}

.plugin-available-filter label {
    position: absolute;
    right: 0;
    top: .21875em;
    margin-top: 0;
}

.plugin-type-count-section {
    display: inline-block;
    position: relative;
    margin-left: 5px;
    border: 1px solid var(--blue-border-gradient-match);
    padding: 0 0 0 5px;
    border-radius: var(--border-radius-pm);
    margin-bottom: 20px;
}

.plugin-type-count-section.plugin-type-count-section-updates {
    display: inline-block;
    position: relative;
    margin-left: 5px;
    border: 1px solid var(--pp-orangered);
    padding: 0 0 0 5px;
    border-radius: var(--border-radius-pm);
    margin-bottom: 20px;
}

.plugin-type-count-icon {
    display: inline;
}

.plugin-type-count-icon span {
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-top: -3px;
    display: inline-block;
}

.plugin-type-count-total {
    display: inline-block;
    width: 25px;
    text-align: center;
    background-color: var(--blue-border-gradient-match);
    padding: 4px 0 4px 0;
    color: var(--pp-white);
}

.plugin-type-count-total-updates {
    display: inline-block;
    width: 25px;
    text-align: center;
    background-color: var(--pp-orange);
    padding: 4px 0 4px 0;
    color: var(--pp-white);
}

.plugin-type-count-text {
    display: inline-block;
    width: 75px;
    text-align: center;
    font-size: .9em;
}

.plugin-type-counts .tooltip {
    position: absolute;
    top: 6px;
    right: -23px;
}

#PluginStructure {
    margin-top: 20px;
}

.structure-info-wrapper {
    padding: 10px 5px 15px 5px;
    border: 1px solid var(--pp-light-grey);
    display: block;
    margin: auto auto 20px auto;
    text-align: center;
    position: relative;
    border-radius: 2px;
}

.structure-p {
    margin-bottom: 25px;
}

.structure-info-section {
    display: inline-flex;
    border: 2px solid var(--pp-grey);
    width: 515px;
    height: 60px;
    margin: 3px 10px;
    padding: 3px 5px;
    border-radius: 2px;
}

.structure-info-3-section {
    display: inline-flex;
    border: 2px solid var(--pp-grey);
    width: 490px;
    margin: 3px 10px;
    padding: 3px 5px;
    border-radius: 2px;
    flex: min-content;
    height: auto;
}

.structure-info-heading {
    display: block;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.structure-info-icon {
    padding: 3px 4px;
    display: inline-flex;
    margin: auto 5px auto 0;
}

.structure-info-icon .pm-readme-icon, .structure-info-icon .pm-homepage-icon, .structure-info-unknown .pm-database-icon, .structure-info-icon .pm-database-add-icon, .structure-info-icon .pm-database-check-icon, .structure-info-unknown .pm-overrides-icon, .structure-info-icon .pm-overrides-add-icon, .structure-info-icon .pm-overrides-check-icon, .structure-info-unknown .pm-hooks-icon, .structure-info-icon .pm-hooks-add-icon, .structure-info-icon .pm-hooks-check-icon {
    width: 35px;
    height: 35px;
}

.structure-info-unknown .pm-database-icon, .structure-info-icon .pm-database-check-icon {
    padding-top: 3px;
    padding-bottom: 0;
}

.structure-info-unknown .pm-overrides-icon, .structure-info-unknown .pm-hooks-icon {
    margin-bottom: 3px;
}

.structure-info-text {
    display: inline-flex;
    margin: auto;
    text-align: center;
    font-size: .9em;
    flex-wrap: wrap;
}

.structure-info-unknown {
    display: inline-flex;
    padding: 3px;
    margin: auto 0 auto 0;
    height: 40px;
    align-items: end;
}

.available-plugin-description code, code.code {
    background-color: rgba(27, 31, 35, .22) !important;
    font-size: .9rem !important;
    font-family: monospace !important;
    letter-spacing: .08rem;
    color: #484848 !important;
    margin: auto 3px !important;
    padding: 1px 3px 2px 3px !important;
    border-radius: 2px;
    display: inline;
}

code.code {
    color: var(--color-primary) !important;
}

.plugin-problems-section {
    margin-top: 25px;
    margin-bottom: 25px;
}

.plugin-problems-section h3 .pm-overrides-icon, .plugin-problems-section h3 .pm-app-settings-icon, .plugin-problems-section h3 .pm-database-icon, .plugin-problems-section h3 .pm-fix-icon, .plugin-problems-section h3 .pm-further-reading-icon {
    vertical-align: sub;
    margin-right: 5px;
}

.plugin-problems-section h3 span {
    font-weight: 600;
}

.plugin-problems-section .panel {
    border-radius: var(--border-radius-pm);
    padding: 10px 35px 8px 10px;
    border: 1px solid var(--blue-border-gradient-match);
    background-color: var(--panel-background-pm);
}

.plugin-problems-section .panel a, .plugin-problems-section p a {
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-pm);
}

.plugin-problems-section .panel a span.pm-kanboard-support-icon {
    vertical-align: sub;
    margin-left: -3px;
    margin-right: 3px;
    width: 18px;
    height: 18px;
}

.plugin-problems-section p a span.pm-kanboard-support-icon {
    vertical-align: sub;
    margin-left: 4px;
    margin-right: 3px;
    width: 18px;
    height: 18px;
}

.plugin-problems-section .panel ul li {
    list-style-type: none;
    margin-left: 10px;
    margin-bottom: 5px;
}

.plugin-problems-section .panel ul li span {
    vertical-align: sub;
    margin-right: 5px;
}

.plugin-problems-section p, .pm-page-margin p {
    line-height: 1.4;
    color: var(--color-primary);
}

.mt-5 {
    margin-top: 10px;
}

.plugin-problems-section .further-reading {
    font-size: 1.2em;
    display: block;
    margin: auto;
    text-align: center;
}

.further-reading li a {
    text-decoration: none;
    transition: var(--transition-pm);
}

.plugin-problems-section .further-reading li {
    list-style-type: none;
    display: inline-block;
    margin: 15px 15px 10px 15px;
    font-size: .9em;
}

.plugin-problems-section .further-reading li span {
    vertical-align: sub;
    margin-right: 5px;
    width: 20px;
    height: 20px;
}

td span.install-date {
    text-align: center;
    text-transform: uppercase;
    font-size: .75em;
    padding: 2px 3px 0 3px;
    border: 1px solid var(--pp-green-dark);
    border-radius: var(--border-radius-pm);
    background-color: var(--pp-green-dark);
    color: var(--pp-white);
    cursor: context-menu;
    opacity: .7;
    position: relative;
    float: right;
    right: -7px;
    bottom: -7px;
}

.currently-installed-v {
    font-family: monospace;
    font-style: italic;
    position: absolute;
    left: 10px;
    top: -29px;
    cursor: context-menu;
}

.plugin-manager-view {
    float: right;
    margin-top: 5px;
}

.structure-icon-wrapper {
    display: flex;
}

#TypesOfPlugins, #PluginStructure {
    font-weight: 600;
}

.manual-plugin-count {
    vertical-align: super;
    font-size: .6em;
    margin-left: 3px;
    padding: 0 2px 0 0;
    border: 1px solid var(--pp-red-alt-3);
    border-radius: var(--border-radius-pm);
    background-color: var(--pp-red-alt-3);
    color: var(--pp-white);
    height: 16px;
    line-height: 16px;
    display: inline-block;
}

.manual-plugin-note {
    font-size: .9em;
    color: var(--pp-grey);
    border-color: var(--pp-red-alt-3);
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
}

td.manual-plugin-note.developer-plugin {
    background-color: rgba(213, 0, 0, .3);
    color: #8B0000;
}

.manual-plugins-table th.available-plugins-author {
    position: relative;
    font-weight: normal;
    font-style: italic;
    font-size: .9em;
    background: var(--pp-white);
    border-color: var(--pp-red-alt-3);
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
}

.manual-plugins-table td.available-plugins-title {
    border-color: var(--pp-red-alt-3);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

.manual-plugins-table td.available-plugin-version {
    border-color: var(--pp-red-alt-3);
    border-left: 0;
    border-bottom: 0;
}

.manual-plugins-table .available-plugin-last-updated, .manual-plugins-table .available-plugin-structure {
    border-color: var(--pp-red-alt-3);
    border-left: 0;
    border-bottom: 0;
}

.manual-plugins-table .plugin-last-updated, .manual-plugins-table .plugin-structure {
    border-color: var(--pp-red-alt-3);
    border-left: 0;
    border-bottom: 0;
    border-top: 0;
}

.manual-plugins-table .available-plugin-status, .manual-plugins-table .plugin-status {
    border: 0;
}

.manual-plugins-table .plugin-last-updated, .manual-plugins-table .plugin-structure, .manual-plugins-table .plugin-status {
    padding-bottom: 0;
}

.manual-plugins-table .available-plugin-structure, .manual-plugins-table .available-plugin-status {
    padding-top: 0;
}

td.manual-plugin-description .markdown p {
    margin-bottom: 5px;
    margin-top: 5px;
}

.manual-plugin-note svg.warning {
    color: #FF6500;
    pointer-events: none;
    vertical-align: sub;
}

#AvailablePluginsTable th.available-plugins-author {
    background: var(--pp-white);
    border-color: var(--blue-border-gradient-match);
    border-left: 0;
    border-top: 0;
    border-bottom: 0;
}

#AvailablePluginsTable td.available-plugins-title {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-color: var(--blue-border-gradient-match);
}

#AvailablePluginsTable td.available-plugin-version {
    border-left: 0;
    border-bottom: 0;
    border-color: var(--blue-border-gradient-match);
}

#AvailablePluginsTable .available-plugin-last-updated, #AvailablePluginsTable .available-plugin-structure {
    border-color: var(--blue-border-gradient-match);
    border-left: 0;
    border-bottom: 0;
}

#AvailablePluginsTable .plugin-last-updated, #AvailablePluginsTable .plugin-structure {
    border-color: var(--blue-border-gradient-match);
    border-left: 0;
    border-bottom: 0;
    border-top: 0;
}

#AvailablePluginsTable td.available-plugin-description {
    border-color: var(--blue-border-gradient-match);
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
}

#AvailablePluginsTable .available-plugin-status, #AvailablePluginsTable .plugin-status {
    border: 0;
}

#AvailablePluginsTable .plugin-status, #AvailablePluginsTable .plugin-structure, #AvailablePluginsTable .plugin-last-updated {
    padding-bottom: 0;
}

#AvailablePluginsTable .available-plugin-status, #AvailablePluginsTable .available-plugin-structure {
    padding-top: 0;
}

.install-section {
    display: inline-block;
}

.install-section label {
    font-weight: 600;
}

input.plugin-file[type="file"] {
    min-width: 300px;
    margin-right: 10px;
}

input.plugin-file[type="file"]::file-selector-button {
  border: 1px solid var(--pp-grey);
  padding: .2em .4em;
  border-radius: .2em;
  background-color: var(--pp-light-grey);
  transition: var(--transition-pm);
}

input.plugin-file[type="file"]::-ms-browse:hover {
  background-color: rgba(213, 0, 0, .6);
  border: 1px solid var(--pp-grey);
}

input.plugin-file[type="file"]::-webkit-file-upload-button:hover {
  background-color: rgba(213, 0, 0, .6);
  border: 1px solid var(--pp-grey);
}

input.plugin-file[type="file"]::file-selector-button:hover {
  background-color: rgba(213, 0, 0, .6);
  border: 1px solid var(--pp-grey);
}

input.plugin-url[type="url"] {
    color: var(--pp-black);
    border: 1px solid var(--pp-red-alt-3);
    width: 600px;
    max-width: 95%;
    font-size: 1em;
    height: 25px;
    padding-bottom: 0;
    padding-left: 4px;
    font-family: sans-serif;
    -webkit-appearance: none;
    -moz-appearance: none;
}

fieldset.manual-install {
    border: 1px solid var(--pp-red-alt-3);
    border-radius: var(--border-radius-pm);
}

.file-url-form .form-actions {
    padding-top: 10px;
}

.copy-url-link-format:hover {
    border-color: var(--pp-green-dark);
}

.copy-url-link-format {
    padding: 3px 5px 5px 5px;
    margin: auto 5px;
    border: 2px solid var(--pp-light-grey);
    border-radius: var(--border-radius-pm);
    transition: var(--transition-pm);
    height: 20px;
}

.copy-url-link-format span.pm-clipboard-icon {
    vertical-align: bottom;
    width: 24px;
    height: 24px;
}

#PluginSideBar {
    min-width: fit-content;
}

.alert-fade-out, .alert-error {
    animation: fadeout 10s linear forwards;
}

.js-updates-copy-paste, .js-updates-copy-paste:focus, .js-updates-copy-paste:visited, .js-updates-copy-paste:link {
    font-weight: 600;
    color: var(--blue-icon-dark);
    text-decoration: none;
}

td button.btn-update {
    vertical-align: middle;
    background: var(--pp-orange);
    padding: 5px 4px 6px 2px;
    margin: 3px 2px auto 2px;
    border-radius: var(--border-radius-pm);
    border: 1px solid var(--pp-grey);
    display: inline-block;
    width: 100px;
    font-size: .9em;
    transition: var(--transition-pm);
}

button.btn-update:hover a {
    color: var(--pp-orange) !important;
    text-decoration: none !important;
}

button.btn-update:hover a i {
    color: var(--pp-orange);
}

td button.btn-update a {
    text-decoration: none !important;
    color: var(--pp-white);
}

td button.btn-update a i {
    color: var(--pp-white);
}

button.btn-update:hover {
    background-color: var(--pp-white);
}

td span.refresh-notice {
    text-align: center;
    font-size: .85em;
    padding: 7px 13px 6px 13px;
    border: 1px solid var(--pp-orange);
    border-radius: var(--border-radius-pm);
    background-color: var(--pp-orange);
    color: var(--pp-white);
    cursor: context-menu;
    position: absolute;
    right: 5px;
    bottom: 5px;
    opacity: 0;
    z-index: 1;
    transition: var(--transition-pm);
}

#PluginSideBar span.count-menu-item {
    top: 3px;
    position: absolute;
    font-size: .75em;
    padding: 0 2px;
    border-radius: var(--border-radius-pm);
    font-weight: bold;
    right: 0;
    opacity: .5;
}

#PluginSideBar ul li.active span.count-menu-item {
    opacity: 1;
}

span.count-menu-item.badge-installed {
    border: 1px solid var(--blue-icon-dark);
    color: white;
    background-color: var(--blue-icon-dark);
}

span.count-menu-item.badge-available {
    border: 1px solid var(--pp-green);
    color: white;
    background-color: var(--pp-green);
}

span.count-menu-item.badge-manual {
    border: 1px solid var(--pp-red-alt-3);
    color: white;
    background-color: var(--pp-red-alt-3);
}

.available-plugin-description .markdown p a, .available-plugin-description .markdown p a:visited {
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition-pm);
}

button.btn-update:hover + #RefreshNotice {
    opacity: 1;
}

tbody.plugin-body {
    position: relative;
}

#UninstallModal .modal-contents {
    padding: 0 15px 0 0;
}

#UninstallModal .modal-page-header {

}

#UninstallModal .modal-page-header h2 {
    margin-top: 5px;
    margin-bottom: 15px;
}

.plugin-manager-modal .modal-actions {
    text-align: right;
    margin-top: 20px;
    clear: both;
}

.plugin-manager-modal .modal-actions .form-actions {
    padding-top: 5px;
    color: var(--pp-white);
    cursor: default;
}

.plugin-manager-modal .modal-actions .form-actions button {
    background: #D14836;
    border-radius: var(--border-radius-pm);
    transition: var(--transition-pm);
    border: 1px solid #D14836;
    color: var(--pp-white) !important;
    vertical-align: middle;
}

.plugin-manager-modal .modal-actions .form-actions a {
    vertical-align: middle;
    transition: var(--transition-pm);
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 1.2em;
    font-weight: normal;
    cursor: pointer;
    display: inline-block;
    border-radius: var(--border-radius-pm);
    padding: 4px 10px 3px 10px;
    margin: 0 0 0 -15px;
    border: 1px solid #AEAEAE;
    background: #F5F5F5;
    color: #333333;
    text-decoration: none;
}

.plugin-manager-modal .modal-actions .form-actions a:hover {
    border: 1px solid #D14836;
    color: #D14836 !important;
}

.plugin-manager-modal .modal-actions .form-actions button:focus, .plugin-manager-modal .modal-actions .form-actions button:hover {
    border: 1px solid #D14836;
    color: #D14836 !important;
    background: var(--pp-white);
}