[v-cloak] {
    display: none;
}

#app {
    --p-tree-padding: 20px;
    --p-tree-gap: 5px;
    --p-tree-indent: 50px;
    --p-tree-node-padding: 8px 16px;
    --p-tree-node-gap: 15px;
    --p-avatar-background: transparent;
    --p-avatar-color: var(--p-primary-color);
    --p-avatar-width: 40px;
    --p-avatar-height: 40px;
    --p-avatar-icon-size: 20px;
    --p-tree-node-toggle-button-size: 30px;
    --p-inputgroup-addon-min-width: 40px;
    --p-button-icon-only-width: 40px;
    --p-button-padding-x: 12px;
    --p-button-padding-y: 10px;
    --p-icon-size: 16px;
    --p-inputtext-padding-x: 12px;
    --p-inputtext-padding-y: 8px;
    --p-inputgroup-addon-border-color: var(--p-primary-600);
}

@media only screen and (width <= 992px) {
    #app {
        --p-tree-indent: 30px;
    }
}

#app a,
#app a:link,
#app a:visited {
    text-decoration: none;
}

#app .p-tree-root {
    overflow: visible;
}

#app .p-tree-root-children {
    margin-bottom: 10px;
}

#app .p-tree-node:not(.p-tree-node-leaf) .p-tree-node-content {
    cursor: pointer;
}

#app .p-tree-node.p-tree-node-leaf .p-tree-node-content {
    cursor: default;
}

#app .p-tree-node:not(.p-tree-node-leaf) > .p-tree-node-content:hover {
    box-shadow: -5px 5px 10px 5px rgba(0, 0, 0, 0.1);
}

#app .p-tree-node-toggle-icon {
    width: 20px;
    height: 20px;
}

#app .p-tree-node-label {
    flex: 1 1 auto;
}

#app .node__label,
#app .node__head {
    margin: 0;
}

#app .node__icon {
    border: 2px solid var(--p-primary-color);
    flex-shrink: 0;
}

#app .node__content {
    margin: 0;
}

#app .node__label {
    font-size: 20px;
}

#app .node__head,
#app .node__head-link {
    font-size: 16px;
}

#app .node__head-link {
    color: var(--p-primary-color);
    border-bottom: 1px dashed var(--p-primary-color);
}

#app .node__head-link:hover {
    color: var(--p-primary-color);
    border-bottom: 1px solid var(--p-primary-color);
}

#app img {
    object-fit: cover;
}

#app .p-inputtext {
    font-size: 16px;
}

#app .p-inputgroup {
    margin: 16px 0 12px;
}