.p-board-content {
    position: relative;
    float: left;
    position: relative;
    width: 100%;
    z-index: 1;
    user-select: none;
}

.p-board {
    position: relative;
    float: left;
    overflow: auto;
    width: 100%;
    height: 100%;
    outline: none;
    /*scrollbar-color: var(--color-base) transparent;*/
    /*scrollbar-width: thin;*/
    scrollbar-width: none;
}

    .p-board:hover {
        cursor: default !important;
    }

    .p-board:active {
        cursor: grab !important;
    }

    .p-board::-webkit-scrollbar {
        /*width: 8px;*/
        display: none;
    }

    /*.p-client-cont-options-menu::-webkit-scrollbar {
    //display: none;
}*/

    .p-board::-webkit-scrollbar-thumb {
        background-color: var(--color-base);
        border-radius: 4px;
    }

    .p-board::-webkit-scrollbar-track {
        background-color: transparent;
    }

.p-bbi-grids {
    background-size: 120px;
    background-image: url(./board-img/grids.svg);
}

.green-dark-mode .p-bbi-grids {
    background-image: url(./board-img/grids-dm.svg);
    background: red !important;
}

.p-bbi-points {
    background-size: 60px;
    background-image: url(./board-img/points.svg);
}

.green-dark-mode .p-bbi-points {
    background-image: url(./board-img/points-dm.svg);
}

.p-bbi-quadrants {
    background-size: 100% !important;
    /*background-size: 1024px !important;*/
    background-image: url(./board-img/quadrants.svg);
}

.green-dark-mode .p-bbi-quadrants {
    background-image: url(./board-img/quadrants.svg);
}

.p-board-search-cont {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
}

    .p-board-search-cont i {
        float: right;
        color: var(--color-base);
        cursor: pointer;
        height: 30px;
        width: 30px;
        background: var(--color-white);
        border: 1px solid var(--color-dark);
        border-radius: 5px;
        margin-left: 5px;
        padding: 1px 2px;
        box-shadow: 2px 2px 2px var(--color-gray-b) !important;
        transition: all .2s !important;
    }

        .p-board-search-cont i:hover {
            background: var(--color-base);
            border: 1px solid var(--color-base);
            color: var(--color-white);
        }

    .p-board-search-cont input {
        float: right;
        background: var(--color-white) !important;
        border: 1px solid var(--color-dark) !important;
        border-radius: 5px !important;
        box-shadow: 2px 2px 2px var(--color-gray-b) !important;
        min-height: 0px !important;
        height: 30px !important;
        width: 200px;
        animation: changeWidth .2s;
    }

.green-dark-mode .p-board-search-cont input, .green-dark-mode .p-board-search-cont i {
    background: var(--color-dark-transparent) !important;
    box-shadow: 2px 2px 2px var(--color-dark-transparent) !important;
    color: var(--color-green) !important;
}

    .green-dark-mode .p-board-search-cont i:hover {
        background: var(--color-green) !important;
        color: var(--color-white) !important;
    }

@keyframes changeWidth {
    0% {
        width: 50px;
    }

    100% {
        width: 200px;
    }
}

#p-board-svg {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    /*background:#00000035;*/
}

.p-box {
    position: absolute;
}

    .p-box:hover .p-b-s-ex {
        display: inherit;
        transition: all .2s ease;
    }

.p-box-body {
    width: 100%;
    height: 100%;
    background: none;
    cursor: grab !important;
}

.p-b-s-ex {
    position: absolute;
    background: var(--color-white);
    border: 1px solid var(--color-dark);
    border-radius: 50%;
    display: none;
    z-index: 1;
}

.p-b-selected {
    display: inherit;
    background: var(--color-dark);
    z-index: 1;
}

.pbse-1 {
    top: -4px;
    left: -4px;
}

.pbse-2 {
    top: -4px;
    left: calc(50% - 4px);
}

.pbse-3 {
    top: -4px;
    right: -4px;
}

.pbse-4 {
    top: calc(50% - 4px);
    right: -4px;
}

.pbse-5 {
    bottom: -4px;
    right: -4px;
}

.pbse-6 {
    bottom: -4px;
    right: calc(50% - 4px);
}

.pbse-7 {
    left: -4px;
    bottom: -4px;
}

.pbse-8 {
    left: -4px;
    top: calc(50% - 4px);
}

.p-line-mm {
    stroke: var(--color-dark);
    stroke-width: 1px;
    filter: drop-shadow(2px 2px 2px var(--color-gray-a));
}

.green-dark-mode .p-line-mm {
    stroke: var(--color-white);
    filter: drop-shadow(2px 2px 2px var(--color-dark));
}

.p-line-mm {
    stroke: var(--color-dark);
    stroke-width: 1px;
}

.p-line {
    stroke: var(--color-dark);
    stroke-width: 1px;
    filter: drop-shadow(2px 2px 2px var(--color-gray-a));
}

    .p-line:hover {
        stroke-width: 4px;
    }


.p-bz-mini-board .p-line {
    stroke-width: 1px;
    filter: drop-shadow(0 0 0 var(--color-dark));
}

    .p-bz-mini-board .p-line:hover, .p-bz-mini-board .p-line-mm {
        stroke-width: 1px;
        filter: drop-shadow(0 0 0 var(--color-dark));
    }

.info-vertex-borrar {
    position: absolute;
}

.p-vertex {
    position: relative;
    filter: drop-shadow(2px 2px 2px var(--color-gray-a));
}

    .p-vertex:hover {
        filter: drop-shadow(3px 3px 2px var(--color-dark));
    }

.green-dark-mode .p-vertex, .green-dark-mode .p-line {
    fill: var(--color-white) !important;
    stroke: var(--color-white);
    filter: drop-shadow(2px 2px 2px var(--color-dark-transparent));
}

.p-bz-mini-board .p-vertex:hover {
    stroke-width: 1px;
    cursor: default !important;
}

.p-board-zoom {
    position: absolute;
    bottom: 15px;
    right: 15px;
    padding: 5px;
    z-index: 100;
}

.p-bz-content {
    width: 200px;
    height: 150px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-a);
    box-shadow: 2px 2px 2px var(--color-gray-b);
    border-radius: 5px;
    overflow: hidden;
}

.green-dark-mode .p-bz-content {
    box-shadow: 2px 2px 2px var(--color-dark-transparent);
}

.p-bz-arrow-open-content {
    float: right;
    cursor: pointer;
    transition: all .2s ease;
    background: var(--color-dark);
    color: var(--color-white);
    box-shadow: 2px 2px 2px var(--color-gray-b);
    border-radius: 5px;
    width: 25px;
    height: 25px;
    text-align: center;
    transition: all .2s !important;
}

    .p-bz-arrow-open-content:hover {
        transform: scale(1.2);
        background: var(--color-green);
    }

.p-bz-arrow-open-content-open {
    float: right;
    cursor: pointer;
    border-left: 1px solid var(--color-gray-a);
    background: var(--color-gray-b);
    transition: all .2s ease;
    width: 25px;
    height: 25px;
    text-align: center;
}

    .p-bz-arrow-open-content-open:hover {
        transition: all .2s ease;
        background: var(--color-dark);
        color: var(--color-white);
    }

.green-dark-mode .p-bz-arrow-open-content {
    box-shadow: 2px 2px 2px var(--color-dark-transparent);
    color: var(--color-green);
}

    .green-dark-mode .p-bz-arrow-open-content:hover {
        box-shadow: 2px 2px 2px var(--color-dark-transparent);
        background: var(--color-green);
        color: var(--color-white);
    }

.p-bz-arrow-open {
    transform: rotate(45deg);
}

.p-bz-body {
    float: left;
    position: relative;
    width: 100%;
    height: calc(85% - 2px);
    border-bottom: 1px solid var(--color-gray-a);
    overflow: hidden;
}

.p-bz-footer {
    float: left;
    position: relative;
    height: 15%;
    width: 100%;
}

.p-bz-mini-board {
    max-width: 100%;
    max-height: 100%;
}

    .p-bz-mini-board .p-board {
        max-width: 100%;
        max-height: 100%;
        padding: 0px;
        margin: 0px;
        border: none;
        height: 125px !important;
        width: 200px !important;
        overflow: hidden;
        background: var(--color-white-transparent);
        border-radius: 0;
    }

.green-dark-mode .p-bz-mini-board .p-board {
    background: var(--background-menu);
}

.p-box-mini {
    position: absolute;
    background: var(--color-white);
    border: .1em solid var(--color-dark);
    border-radius: .2em;
}

.p-bz-bar {
    float: left;
    width: calc(100% - 25px);
    text-align: center;
    overflow: hidden;
}

    .p-bz-bar i {
        cursor: pointer;
        transition: all .2s ease;
        background: var(--color-gray-b);
        padding: 0 2px;
        border-right: 1px solid var(--color-gray-a);
    }

        .p-bz-bar i:hover {
            transition: all .2s ease;
            color: var(--color-white);
            background: var(--color-dark);
        }

.p-bz-percent-base {
    float: left;
    margin-right: 10px;
    padding: 2px 5px;
    height: 25px;
    font-size: 14px;
    border-radius: 5px;
    background: var(--color-gray-c);
    color: var(--color-dark);
    border: 1px solid var(--color-gray-a);
}

.p-bz-area-show {
    position: absolute;
    z-index: 1;
    border: 1px solid var(--color-dark-transparent);
    border-radius: 5px;
    margin: 1px;
    cursor: grab !important;
}

.green-dark-mode .p-bz-area-show {
    border: 1px solid var(--color-gray-c);
}

.p-board-context-menu {
    position: absolute;
    background: var(--color-white);
    color: var(--color-dark);
    border-radius: 5px;
    min-width: 200px;
    border: 1px solid var(--color-gray-b);
    box-shadow: 2px 2px 2px var(--color-gray-a);
    z-index: 2;
    padding: 5px;
    overflow: hidden;
}

.green-dark-mode .p-board-context-menu {
    box-shadow: 2px 2px 2px var(--color-dark-transparent);
    border: 1px solid var(--color-gray-a);
    background: var(--color-box);
    color: var(--color-gray-b);
}

.p-board-menu-option {
    font-size: 14px;
    padding: 5px;
    cursor: pointer;
    transition: all .2s ease;
    border-radius: 5px;
    margin: 2px 0;
}

    .p-board-menu-option:hover {
        transition: all .2s ease;
        background: var(--color-gray-b);
    }

.green-dark-mode .p-board-menu-option:hover {
    background: var(--color-dark);
}

.p-board-menu-option i {
    float: left;
    font-size: 12px;
    background: var(--color-green);
    color: var(--color-white);
    border-radius: 5px;
    padding: 2px;
    margin-right: 5px;
}

.pbm-disable-option {
    color: var(--color-gray-b) !important;
    cursor: default;
}

    .pbm-disable-option i {
        background: var(--color-gray-b) !important;
        color: var(--color-white) !important;
    }

.green-dark-mode .pbm-disable-option i {
    background: var(--color-dark) !important;
    color: var(--color-white) !important;
}

.pbm-disable-option:hover, .green-dark-mode .pbm-disable-option:hover {
    background: none;
}

.pbm-separator {
    height: .1px;
    width: 100%;
    border-radius: 50%;
    margin: 5px 0;
    background: var(--color-white);
    box-shadow: 0px 1px 1px var(--color-gray-b);
}

.green-dark-mode .pbm-separator {
    background: var(--color-gray-a);
    box-shadow: 0px 1px 1px var(--color-dark-transparent);
}

.p-item-board-opacity {
    display: none;
}


.p-cont-filter-report label {
    font-size: 1em !important;
}

.astrol-grid {
    font-size: 1em !important;
}

.filter-grid-cell input {
    height: 2em !important;
}

.filter-grid-cell .icon-clear-filter {
    font-size: 15px !important;
    height: 28px !important;
    width: 28px !important;
}

.p-cont-table-report .cont-options-astrol-grid button {
    font-size: 1em !important;
    padding: .3em .5em !important;
    border-radius: .3em !important;
}