#resources,
#circle-resources {
    width: 100%;
    font-family: "Facit";
    font-weight: 400;
    color: var(--content-font-color);
    solid-resource {
        .listresources solid-display div {
            max-width: 1110px;
            solid-display {
                margin: 0 0 20px 40px;
            }
        }
        .solid-resource {
            font-family: "Facit";
            .page-title {
                font-family: "RefrigeratorDelxW01Bold";
                font-size: 3.2rem;
                line-height: 3.8rem;
                color: var(--color-primary);
            }
            .red-button {
                background-color: var(--color-add-button-background);
            }
            .black-button {
                background-color: var(--highlight-font-color);
                margin-left: 10%;
            }
            .lnk-newresource {
                margin-top: 30px;
                margin-right: 70px;
                z-index: 1;
                position: relative;
            }
            .listresources .lnk-newkeyword {
                top: 155px;
                left: 220px;
                .button.thin-button.mdi {
                    padding: 5px 20px;
                }
            }
            .listresources {
                .headline h1 {
                    float: left;
                    margin-top: 5px;
                    color: var(--color-primary);
                    text-transform: none;
                    font-family: "RefrigeratorDelxW01Bold";
                    font-size: 2.4rem;
                }
                solid-form {
                    select {
                        width: 150px;
                    }
                }
            }
            .listresources {
                .lnk-newkeyword .button {
                    font-size: 1.2rem;
                    width: max-content;
                    height: max-content;
                    padding: 10px 30px;
                    color: var(--color-primary);
                }
                solid-display solid-display {
                    .resource-title {
                        font-family: "RefrigeratorDelxW01Bold";
                        color: var(--color-primary);
                    }
                    [name="link"] a, [name="document"] a  {
                        width: 75%;
                        margin-bottom: 10px;
                        padding-left: 35px;
                        position: relative;
                        &::before {
                            position: absolute;
                            left: 0;
                        }
                    }
                    solid-multiple > solid-display > div > solid-display {
                        margin: 0;
                    }
                }
            }
            .resourcedetail {
                background-color: transparent;
                .resource-title {
                    font-family: "RefrigeratorDelxW01Bold";
                    font-size: 3.2rem;
                    line-height: 3.8rem;
                    color: var(--color-primary);
                }
                [name="infotext"] {
                    justify-content: flex-start;
                }
                .sib-conversation {
                    background-color: white;
                    textarea {
                        background-color: transparent;
                    }
                }
            }
            .newresource label div, 
            .newresource solid-form-file div label {
                line-height: 2.2rem;
                text-transform: uppercase;
                color: var(--form-title);
                font-size: 13px;
                font-weight: 600;
                font-family: Open sans;
            }
            .newresource select, 
            .newresource textarea, 
            .newresource input, 
            .newresource solid-multiple-select .ss-main .ss-multi-selected {
                background-color: var(--form-inputs-background);
            }
            .newresource input[type="submit"] {
                background-color: var(--form-submit-button);
            }
            .newresource input[type="file"] {
                background-color: transparent;
            }
            .resource-tag {
                font-family: Facilt;
                font-weight: 600;
            }
        }
    }
    @media (max-width: 991px) {
        .solid-resource {
            margin-top: 65px;
        }
    }
}

#resources {
    background-color: #f0f3f6;
}

#circle-resources .resources solid-form solid-form-dropdown select {
    background-color: #f0f3f6;
}

.with-sidebar nav>solid-router>ul [name="circle-resources"] {
    li::before {
        content: '';
        height: 40px;
        width: 40px;
        mask: url('/images/file.svg') center no-repeat;
        mask-size: contain;
        -webkit-mask: url('/images/file.svg') center no-repeat;
        -webkit-mask-size: contain;
        background-color: var(--color-right-menu-text);
    }
    &[active] li::before {
        background-color: var(--color-right-menu-active-text);
    }
}