<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.advanced_breeder {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    max-width: 600px;
}

.add_row {
    /* width: 550px; */
    height: 50px;
    display: flex;
    justify-content: center;
}
.add_row img {
    /* border: 1px solid black; */
    border-radius: 50%;
    cursor: pointer;
    height: 100%;
    width: auto;
}
.container {
    display: flex;
    /* width: 550px; */
    height: 350px;
    /* background-color: black; */
    position: relative;
    flex-direction: column;
    /* border: 1px solid black; */

    background-size: 10% 100%;
    background-image: linear-gradient(to right, grey 1px, transparent 1px);
        /* linear-gradient(to bottom, grey 1px, transparent 1px); */
    border: 1px solid gray;
}
.container .outer_row {
    position: relative;
    width: 100%;
    height: calc(33%);
    padding-bottom: 4px;
    cursor: pointer;
}

.outer_row .drag,.buttons {
    opacity: 0;
}
.outer_row:hover .drag,.buttons {
    opacity: 1;
}



.container .outer_row .inner_row {
    padding: 3px;
    position: relative;
    height: 100%;
    width: 25%;
    background-color: #80808036;
    display: flex;
    justify-content: center;
}

.inner_row .buttons {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: -36px;
}
.buttons .button {
    padding: 2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-bottom: 5px;
}
/* .inner_row .button .plus {
    top: 
} */

.container .outer_row:first-of-type .inner_row {
    width: 10%;
}
.container img {
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    -ms-user-drag: none;
    user-drag: none;
    cursor: pointer;
}

.drag {
    background-color: #5d5d5d;
    position: absolute;
    z-index: 2;
}

.drag.ew {
    cursor:ew-resize;
    height: 100%;
    width: 4px;
    transform: translateX(-50%) translateY(-4px);
}
.drag.ns {
    cursor:ns-resize;
    width: 100%;
    height: 4px;
    transform: translateY(-50%);
    left: 0px;
}
.drag-left {
    left:0px;
}
.drag-right {
    right:0px;
}
.drag.drag-up {
    top: 0px;
}
.drag.drag-down {
    bottom: 0px;
}

.button {
    background: #f3f3f3;
}

.button:hover {
    background: #e9e7e7;
    -webkit-transition: fill 100ms linear,background 100ms linear;
    transition: fill 100ms linear,background 100ms linear;
}</pre></body></html>