/* KANBOARD PLUGIN - 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;
    --blue-icon-dark: #034CA6;
    --ab-blue: #20369F;
    --ab-button: rgba(32, 54, 159, .8);
    --ab-table-green: #84D040;
    --button-blue-gradient: linear-gradient(to bottom, #7892C2 80%, #476E9E 100%);
    --blue-border-gradient-match: #476E9E;
    --button-background-delete: #D05C84;
    --link-color-primary: #3366CC;
    --header-page-margin-address-book: 5px 15px 10px 15px;
    --page-margin-address-book: 0 15px 0 15px;
    --title-margin-address-book: 0 15px 0 15px;
    --border-radius-address-book: 3px;
    --panel-background-address-book: #EEEEEE;
    --transition-address-book: ease-in-out all .3s;
}

/*
.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-dark-green { color: var(--pp-green-dark); fill: var(--pp-green-dark); }
.pp-orange { color: var(--pp-orange); fill: var(--pp-orange); }
*/

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

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

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

.relative { position: relative; }

.ab-page-header {
    margin-top: 0;
    margin-bottom: 20px;
}

.ab-page-header h2 {
    margin-top: 0;
    font-weight: 600;
}

.ab-page-header h2 span.contact-settings-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: bottom;
}

.ab-config-page fieldset, fieldset.add-contact-profile {
    border: 2px solid var(--ab-blue);
    border-radius: var(--border-radius-address-book);
}

.ab-config-page fieldset legend, fieldset.add-contact-profile legend{
    background: var(--ab-blue);
    color: var(--pp-white);
    border-radius: var(--border-radius-address-book);
    padding: 3px 8px 4px 8px;
    font-size: 1.1em;
}

.add-contact-wrapper {
    width: fit-content;
    margin: auto;
}

p.new-item-intro, p.contact-profile-intro {
    margin-block: 10px;
}

fieldset.ab-new-item .input-section {
    margin-right: 20px;
}

fieldset.ab-new-item .input-section, fieldset.ab-new-item .form-actions {
    display: inline-block;
    vertical-align: middle;
}

.input-section span.form-required, .property-wrapper span.form-required {
    vertical-align: top;
    transform: scale(1.7);
    display: inline-block;
    color: var(--pp-red-alt-3);
}

.input-section .form-help {
    margin-bottom: 0;
}

input#form-item_help {
    width: 355px;
}

input[type="text"].property-input, input[type="number"].property-input, input[type="tel"].property-input, input[type="email"].property-input, input[type="url"].property-input, .property-fields input[type="text"], select.property-input-select {
    border: 1px solid var(--ab-blue);
    border-radius: var(--border-radius-address-book);
    margin-bottom: 4px;
    padding-left: 5px;
    padding-right: 5px;
    height: 25px;
    width: 300px;
    font-size: 1em;
}

textarea.property-input-address {
    border: 1px solid var(--ab-blue);
    border-radius: var(--border-radius-address-book);
    margin-bottom: 4px;
    padding-left: 5px;
    padding-right: 5px;
    height: 100px;
    width: 300px;
}

textarea.property-input-note{
    border: 1px solid var(--ab-blue);
    border-radius: var(--border-radius-address-book);
    margin-bottom: 4px;
    padding-left: 5px;
    padding-right: 5px;
    height: 75px;
    width: 300px;
}

input[type="text"].property-input::placeholder, input[type="number"].property-input::placeholder, input[type="tel"].property-input::placeholder, input[type="email"].property-input::placeholder, input[type="url"].property-input::placeholder, textarea.property-input-address::placeholder, textarea.property-input-note::placeholder, .property-fields input[type="text"]::placeholder {
    color: var(--pp-grey);
}

input[type="number"].property-input.property-input-decimal {
    width: 100px;
}

input[type="tel"].property-input.property-input-telephone, input[type="number"].property-input.property-input-number {
    width: 200px;
}

label.property-label {
    margin-top: 0;
    margin-bottom: 2px;
}

select.property-input-select {
    height: 28px;
    max-width: 100%;
    width: 170px;
    margin-top: 0;
    text-align: center;
}

select.property-input-select:focus, input[type="tel"].property-input:focus, input[type="url"].property-input:focus {
    color: #000;
    border: 1px solid var(--ab-blue);
    outline: 0;
    box-shadow: 0 0 8px rgba(82, 168, 236, .6);
}

fieldset.ab-new-item .form-actions {
    padding-top: 0;
}

#ContactProfileTable {
    margin-top: 15px;
    margin-bottom: 5px;
    border-collapse: unset;
}

#ContactProfileTable th, #ContactProfileTable td {
    border: 1px solid var(--ab-blue);
    padding-left: 5px;
    padding-right: 5px;
    border-left: 0;
    border-right: 0;
    vertical-align: middle;
}

#ContactProfileTable th {
    border-top: 2px solid var(--ab-blue);
    background-color: var(--ab-button);
    color: var(--pp-white);
}

#ContactProfileTable td {
    border-bottom: 0;
}

#ContactProfileTable tr:last-child td {
    border-bottom: 1px solid var(--ab-blue);
}

#ContactProfileTable th:last-child {
    padding-left: 10px;
}

#ContactProfileTable td ul.property-action-bar {
    list-style-type: none;
}

#ContactProfileTable td ul.property-action-bar li {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

#config-section .sidebar {
    min-width: fit-content;
    margin-right: 5px;
}

.property-action-bar .move-buttons {
    float: left;
}

.property-action-bar .action-buttons {
    float: right;
}

.property-action-item a {
    font-size: 1em;
}

.btn-ab-delete {
    /* Default red */
    background: #D14836;
    border-radius: var(--border-radius-address-book);
    transition: var(--transition-address-book);
    border: 1px solid #D14836;
    color: var(--pp-white);
}

.btn-ab-move i, .btn-ab-rename, .btn-ab-delete i, .btn-ab-property, .btn-add-contact {
    color: var(--pp-white);
}

.btn-ab-move, .btn-ab-rename, .btn-ab-property, .btn-add-contact {
    background: var(--ab-button);
    border-radius: var(--border-radius-address-book);
    transition: var(--transition-address-book);
    border: 1px solid var(--ab-button);
}

.btn-ab-move:focus, .btn-ab-move:hover, .btn-ab-rename:focus, .btn-ab-rename:hover, .btn-ab-property:focus, .btn-ab-property:hover, .btn-add-contact:hover, .btn-add-contact:focus {
    border: 1px solid var(--ab-button);
}

.btn-ab-delete:focus, .btn-ab-delete:hover {
    border: 1px solid #D14836;
    color: #D14836;
}

.btn-ab-delete:focus i, .btn-ab-delete:hover i {
    color: #D14836;
}

.btn-ab-move:focus i, .btn-ab-move:hover i, .btn-ab-rename:focus, .btn-ab-rename:hover, .btn-ab-property:focus, .btn-ab-property:hover, .btn-add-contact:hover, .btn-add-contact:focus {
    color: var(--ab-blue);
}

h2 span.address-book-icon {
    vertical-align: top;
    width: 24px;
    height: 24px;
    display: inline-block;
}

fieldset.ab-contact-profile legend span.contact-profile-icon {
    vertical-align: bottom;
    width: 24px;
    height: 24px;
    display: inline-block;
}

fieldset.ab-new-item legend span.property-icon {
    vertical-align: sub;
    width: 24px;
    height: 24px;
    display: inline-block;
}

li.property-action-item a span.rename-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: bottom;
    transition: var(--transition-address-book);
}

#ContactProfileTable thead tr th span.property-icon {
    vertical-align: sub;
}

.property-wrapper .property-icon {
    width: 30px;
    height: 30px;
    display: inline-block;
    margin-inline: 5px;
}

.property-wrapper .property-fields {
    display: inline-block;
}

.modal-form .form-actions, .confirm, .form-actions {
    text-align: right;
}

.rename-property-modal .ab-page-header h2 span.rename-icon {
    vertical-align: text-top;
    width: 24px;
    height: 24px;
    display: inline-block;
    margin-right: 5px;
}

.delete-property-modal .ab-page-header h2 span.property-icon {
    width: 23px;
    height: 23px;
    display: inline-block;
    vertical-align: top;
    margin-right: 5px;
}

.property-fields label {
    margin-bottom: 2px;
}

.rename-property-modal .ab-page-header h2, .delete-property-modal .ab-page-header h2 {
    border-bottom: 0;
}

.confirm p.confirm-delete {
    padding: 10px;
}

button.btn.cancel-btn {
    margin-left: 2px;
    transition: var(--transition-address-book);
}

a.address-book-btn, a.project-address-book-btn {
    position: absolute;
    top: 0;
    right: 0;
    border: 1px outset var(--ab-blue);
    border-radius: var(--border-radius-address-book);
    background: var(--ab-button);
    color: var(--pp-white);
    transition: var(--transition-address-book);
    padding: 5px;
}

a.address-book-btn:hover, a.address-book-btn:focus, a.project-address-book-btn:hover, a.project-address-book-btn:focus, a.view-contact-btn:hover, a.view-contact-btn:focus, a.delink-btn:hover, a.delink-btn:focus, a.link-btn:hover, a.link-btn:focus {
    border: 1px outset var(--ab-blue);
    border-radius: var(--border-radius-address-book);
    background: var(--pp-white);
    color: var(--ab-blue);
}

a.address-book-btn span.address-book-icon, a.project-address-book-btn span.address-book-icon {
    vertical-align: sub;
}

a.view-contact-btn {
    padding: 0 5px 0 3px;
    height: 26px;
}

a.view-contact-btn.no-info {
    background: var(--pp-light-grey);
    border: 1px outset var(--pp-grey);
    border-radius: var(--border-radius-address-book);
    color: var(--pp-white);
    transition: var(--transition-address-book);
}

a.view-contact-btn.no-info:hover {
    background: var(--pp-white);
}

a.view-contact-btn span.contact-profile-icon {
    width: 24px;
    vertical-align: bottom;
}

a.view-contact-btn, a.delink-btn, a.link-btn {
    border: 1px outset var(--ab-blue);
    border-radius: var(--border-radius-address-book);
    background: var(--ab-button);
    color: var(--pp-white);
    transition: var(--transition-address-book);
}

a.delink-btn i {
    padding-top: 2px;
}

a.link-btn i {
    padding-bottom: 2px;
}

a.delink-btn i, a.link-btn i {
    color: var(--pp-white);
}

a.delink-btn:hover i, a.delink-btn:focus i, a.link-btn:hover i, a.link-btn:focus i {
    color: var(--ab-blue);
}

.btn-count {
    font-size: .7em;
    vertical-align: super;
    background: var(--pp-white);
    color: var(--pp-black);
    padding: 1px 4px 0 4px;
    border-radius: var(--border-radius-address-book);
    border: 1px inset var(--ab-button);
}

a.project-address-book-btn:hover .btn-count {
    background: var(--ab-button);
    color: var(--pp-white);
}

.ab-info {
    margin-block: 20px;
}

form.add-contact-form .form-help {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    width: 400px;
    margin-left: 5px;
}

form.add-contact-form .form-actions {
    padding-top: 0;
    margin-top: 5px;
}

fieldset.add-contact-profile.relative span.form-help {
    position: absolute;
    right: 10px;
    top: -5px;
    margin-bottom: 0;
}

.no-contacts {
    font-weight: 600;
    margin-block: 15px;
}

button.btn-add-contact span.add-contact-icon {
    width: 24px;
    height: 24px;
    vertical-align: text-bottom;
    display: inline-block;
    margin-right: 5px;
}

legend span.add-contact-icon {
    vertical-align: text-bottom;
    width: 24px;
    height: 24px;
    margin-right: 4px;
    display: inline-block;
}

section.linked-contacts-section h3 span.linked-contact-icon {
    width: 26px;
    height: 24px;
    vertical-align: bottom;
    display: inline-block;
    margin-right: 4px;
}

section.available-contacts-section h3 span.available-contact-icon {
    width: 26px;
    height: 24px;
    vertical-align: bottom;
    display: inline-block;
    margin-right: 4px;
}

.ab-section-divider {
    margin-block: 30px;
    border: 1px solid var(--pp-grey);
}

section.linked-contacts-section h3, section.available-contacts-section h3 {
    color: var(--ab-blue);
    font-weight: 600;
}

table.linked-contacts-table, table.available-contacts-table {
    width: 98%;
    margin: auto;
}

td.contacts-table-value {
    vertical-align: middle;
}

.contact-count-badge {
    font-size: .6em;
    vertical-align: super;
    background: var(--ab-button);
    color: var(--pp-white);
    padding: 1px 4px 0 3px;
    border-radius: var(--border-radius-address-book);
    border: 1px inset var(--ab-button);
    margin-left: 4px;
}

#LinkedContactsTable th.contacts-table-header {
    background: var(--ab-table-green);
    color: var(--pp-green-dark);
    border: 1px solid var(--pp-green);
}

#AvailableContactsTable th.contacts-table-header, #ProjectContactsTable th.contacts-table-header, #TaskContactsTable th.contacts-table-header {
    background: var(--ab-button);
    color: var(--pp-white);
    border-top: 1px solid var(--ab-blue);
    border-bottom: 1px solid var(--ab-blue);
}

#LinkedContactsTable th.contacts-table-header.cell-zero, #LinkedContactsTable td.contacts-table-value.cell-zero, #AvailableContactsTable th.contacts-table-header.cell-zero, #AvailableContactsTable td.contacts-table-value.cell-zero {
    border: 0;
    background: none;
}

#LinkedContactsTable td.contacts-table-value {
    border: 1px solid var(--pp-green);
}

#AvailableContactsTable td.contacts-table-value, #ProjectContactsTable td.contacts-table-value, #TaskContactsTable td.contacts-table-value  {
    border: 1px solid var(--ab-blue);
}

#ProjectContactsTable th.contacts-table-header:nth-of-type(1) {
    border-left: 1px solid var(--ab-blue);
}

#ProjectContactsTable th.contacts-table-header:nth-of-type(5) {
    border-right: 1px solid var(--ab-blue);
}

#AvailableContactsTable th.contacts-table-header:nth-of-type(2) {
    border-left: 1px solid var(--ab-blue);
}

#AvailableContactsTable th.contacts-table-header:nth-of-type(4) {
    border-right: 1px solid var(--ab-blue);
}

#TaskContactsTable th.contacts-table-header:first-child {
    border-left: 1px solid var(--ab-blue);
}

#TaskContactsTable th.contacts-table-header:last-child {
    border-right: 1px solid var(--ab-blue);
}

#ContactDetailsTable tbody tr td:first-child {
    background: var(--ab-button);
    color: var(--pp-white);
    border: 1px solid var(--ab-blue);
}

#ContactDetailsTable tbody tr td:last-child {
    /* color: var(--pp-white); */
    background: rgba(32, 54, 159, .2);
    border: 1px solid var(--ab-blue);
}
ul.contacts-action-btns {
    list-style-type: none;
    text-align: center;
    display: flex;
}

ul.contacts-action-btns li {
    /* justify-content: space-between; */
    /* margin-inline: 12px; */
    display: inline-flex;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
}

span.btn-disabled-wrapper {
    cursor: not-allowed;
}

a.btn-disabled {
    pointer-events: none;
    opacity: .6;
}

ul.contacts-action-btns li a.btn-ab-rename span.rename-icon {
    vertical-align: bottom;
}

ul.contacts-action-btns li a.btn-ab-rename {
    padding-left: 5px;
    padding-right: 8px;
}

ul.contacts-action-btns li a.btn-ab-delete {
    padding: 1px 5px 1px 5px;
}

ul.contacts-action-btns li a.btn-ab-delete span.delete-contact-icon {
    width: 24px;
    height: 24px;
    vertical-align: text-bottom;
    margin-right: 3px;
}

ul.contacts-action-btns li a.btn-ab-delete span.delete-text {
    /* height: 18px; */
    display: inline-table;
    vertical-align: top;
    margin-top: 3px;
    pointer-events: none;
}

table#ContactDetailsTable tfoot.table-footer .table-row td {
    color: var(--pp-grey);
    font-size: .9em;
    background: #CACACA;
    border: 1px solid var(--ab-blue);
}

.contact-details-modal .ab-page-header h2 span.contact-details-icon {
    vertical-align: bottom;
}
.delete-contact-modal .ab-page-header h2 span.delete-contact-icon {
    vertical-align: bottom;
    margin-right: 3px;
}

.edit-contact-modal .ab-page-header h2 span.rename-icon {
    width: 26px;
    vertical-align: bottom;
    margin-right: 4px;
}

details.task-contacts-section summary.accordion-title {
    cursor: pointer;
}

details.task-contacts-section summary.accordion-title span {
    background: var(--pp-white);
    padding-right: 5px;
}

details.task-contacts-section[open] summary.accordion-title::marker, details.task-contacts-section[open] summary.accordion-title {
    color: var(--ab-button);
    font-weight: 600;
}