.net-result {
    padding: 20px;
    height: fit-content;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position:relative;
    background-color: var(--sys-background-color-video-override);
}

.net-result .adminAccess {
    position:absolute;
    right: 10px;
    top: 10px;
    z-index: 20;
    width: 20%;
}

.adminAccessHide .adminsTools {
    opacity: 0;
    display: none !important;
}

.net-result .adminAccess .adminsTools {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: calc(100% - 10px);
    background-color: var(--sys-background-color-chill-ligther);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--sys-background-color);
    opacity: 1;
    transition: var(--sys-element-transition);
}
.net-result .adminAccess .adminsTools .admin-tool {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    color:var(--sys-colormetrics-light);
    fill:var(--sys-colormetrics-light);
    padding: 10px 20px 10px 10px;
    transition: var(--sys-element-transition);
    font-family: "Roboto";
    width: calc(100% - 30px);
}
.net-result .adminAccess .adminsTools .admin-tool .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.net-result .adminAccess .adminsTools .admin-tool .icon svg {
    height: 20px;
    width: 20px;
}

.net-result .adminAccess .adminsTools .admin-tool .text {
    width: calc(100% - 10px - 20px);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.net-result .adminAccess .openTools {
    padding: 10px;
    border-radius: 50px;
    cursor: pointer;
    fill:var(--sys-colormetrics-light);
    width: fit-content;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--sys-element-transition);
    margin-left: auto;
}
.net-result .adminAccess .openTools:hover,.net-result .adminAccess .adminsTools .admin-tool:hover {
    background-color: var(--sys-background-color-lighter);
}
.net-result .net-result-header .net-result-img img {
    height: 30px;
}
.net-result .net-result-header .net-result-name {
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.net-result .net-result-header .net-result-img  {
    display: flex;
    align-items: center;
    justify-content: center;
}

.net-result .net-result-header {
    display: flex;
    flex-direction: column ;
    gap: 10px;
    color:var(--sys-text-color);
}
.net-result .net-result-bottom {
    width: calc(100%);
    font-family: "Montserrat";
    color:var(--sys-text-color-light);
    font-size: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    
}
.net-result .net-result-bottom * {
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.net-result .net-result-header .top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: "Poppins";
    justify-content: center;
}
.net-result .net-result-header .top .data-directory {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 2px 10px 2px 5px;
    width: fit-content;
    border-radius: 50px;
    font-size: 14px;
    color:var(--sys-text-color-light);
    fill:var(--sys-text-color-light);
    transition: var(--sys-element-transition);
}

.net-result .net-result-header .top .data-directory svg {
    width: 20px;
    height: 20px;
}

.net-result .net-result-header .top .data-directory:hover {
    background-color: var(--sys-background-color-chill-ligther);
}
.net-result .net-result-header .top .ImageAndName {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    font-size: 20px;
}
.net-result .net-result-header .net-result-description {
    font-size: 15px;
    font-family: "Roboto";
    padding: 5px 5px 5px 5px;
    line-height: 22px;
    color:var(--sys-text-color-light);
    width: calc(100% - 10px);
}
.pops {
    color:var(--sys-text-color);
}
.pops, .net-result .net-result-header .actions .action, .net-result .net-result-header .distinctions {
    width: calc(100% - 30px);
    padding: 10px 15px 10px 15px;
    font-family: "Roboto";
    transition: var(--sys-element-transition);
    background-color: var(--sys-background-color);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    fill:var(--sys-colormetrics-main);
    border-radius: 20px;
}
.pops .popp .pop-picture {
    display: flex;
    align-items: center;
    justify-content: center;
}
.pops .popp {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    padding: 5px 10px 5px 10px;
    font-size: 13px;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--sys-element-transition);
}
.pops .popp .pop-picture img {
    height: 20px;
}
.pops  {
    flex-wrap: wrap;
    cursor: unset;
    gap: 5px;
}
.net-result .net-result-header .distinctions  .distinction {
    padding: 5px 10px 5px 10px;
    font-size: 13px;
    border-radius: 50px;
}
.net-result .net-result-header .distinctions #isStaff, .net-result .net-result-header .distinctions #isFormerStaff {
    background-color: rgba(40, 75, 193,0.1);
}
.net-result .net-result-header .distinctions #isModder,.net-result .net-result-header .distinctions #isShipBuilder {
    background-color: rgba(255, 119, 119,0.1);
}
.net-result .net-result-header .distinctions #isContrib {
    background-color: rgba(157, 127, 252,0.1);
}
.net-result .net-result-header .distinctions #isUCP {
    background-color: rgba(0, 95, 160,0.1);
}
.net-result .net-result-header .distinctions #isSesame {
    background-color: rgba(184, 40, 40,0.1);
}
.net-result .net-result-header .actions .action .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.net-result .net-result-header .actions .action  {
    background-color: var(--sys-background-color);
}
.net-result .net-result-header .actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.net-result .net-result-header .activeElementParent {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 5px);
    padding-right: 5px 5px 5px 0px;
    overflow-y: hidden;
    transition: var(--sys-element-transition);
}
.net-result .net-result-header .activeElementParent .viewMore {
    width: calc(100% - 30px);
    padding: 10px 15px 10px 15px;
    font-family: "Roboto";
    transition: var(--sys-element-transition);
    background-color: var(--sys-background-color);
    cursor: pointer;
    gap: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    fill:var(--sys-colormetrics-main);
    border-radius: 20px;
}

.net-result .net-result-header .activeElementParent .viewMore .content {
    width: calc(100% - 20px - 24px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.net-result .net-result-header .activeElementParent .viewMore .icon {
    transition: var(--sys-element-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.net-result .net-result-header .activeElementParent .viewMore .rotateViewMore {
    transform: rotate(90deg);
}

.net-result .net-result-header .activeElementParent .activeElementsContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.activeElement {
    width: calc(100% - 30px);
    padding: 10px 15px 10px 15px;
    font-family: "Roboto";
    transition: var(--sys-element-transition);
    background-color: var(--sys-background-color);
    cursor: pointer;
    height: calc(58px - 20px);
    display: flex;
    flex-direction: row;
    gap: 10px; 
    align-items: center;
}
.pops .popp:hover,.activeElement:hover,.net-result .net-result-header .actions .action:hover,.viewMore:hover {
    background-color: var(--sys-background-color-chill-ligther) !important;
}

.activeElement:nth-last-child(1) {
    border-radius: 0px 0px 20px 20px;
}
.activeElement .subElementHeader {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}
.activeElement .subElementHeader .subElementDirectory  {
    font-size: 12px;
    color:var(--sys-text-color-light);
}

.activeElement .subElementHeader .contentName {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}
.activeElement .subElementHeader .contentName .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    fill:var(--sys-colormetrics-light);
}
.activeElement .subElementHeader .contentName .icon svg {
    width: 15px;
    height: 15px;
}
.activeElement .img img {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}