hubl/src/styles/layout/resources/resources.scss

#resources,
#circle-resources {
    width: 100%;
    font-family: "Facit";
    font-weight: 400;
    color: #7A7F85;
    solid-resource {
        sib-display div {
            max-width: 1110px;
            sib-display {
                margin: 0 0 20px 40px;
            }
        }
        .sib-resource {
            font-family: "Facit";
            .page-title {
                font-family: "RefrigeratorDelxW01Bold";
                font-size: 3.2rem;
                line-height: 3.8rem;
                color: #063B5C;
            }
            .red-button {
                background-color: #C4262E;
            }
            .black-button {
                background-color: #3A3A3A;
                margin-left: 10%;
            }
            .lnk-newresource {
                margin-top: 30px;
                margin-right: 70px;
                z-index: 1;
                position: relative;
            }
            #listresources .lnk-newkeyword {
                top: 133px;
                left: 220px;
                .button.thin-button.mdi {
                    padding: 5px 20px;
                }
            }
            .resources {
                margin-top: -35px;
                sib-form {
                    &::before {
                        content: "Research a resource";
                        font-family: "RefrigeratorDelxW01Bold";
                        color: #063B5C;
                        font-size: 2.4rem;
                        line-height: 3.8rem;
                        top: -10px;
                    }
                    select {
                        width: 150px;
                    }
                }
            }
            #listresources {
                .lnk-newkeyword .button {
                    font-size: 1.2rem;
                    width: max-content;
                    height: max-content;
                    padding: 10px 30px;
                    color: #063B5C;
                }
                sib-display sib-display {
                    [name="name"] {
                        font-family: "RefrigeratorDelxW01Bold";
                        color: #063B5C;
                    }
                    [name="link"] a {
                        padding-left: 35px;
                        position: relative;
                        &::before {
                            position: absolute;
                            left: 0;
                        }
                    }
                }
            }
            #resourcedetail {
                [name="name"] {
                    font-family: "RefrigeratorDelxW01Bold";
                    font-size: 3.2rem;
                    line-height: 3.8rem;
                    color: #063B5C;
                }
                [name="infotext"] {
                    justify-content: flex-start;
                }
                .event-type {
                    width: max-content;
                    padding: 5px 20px;
                    font-size: 1.1rem;
                    line-height: 1.3rem;
                    height: 13px;
                    margin: 0 20px 10px;
                    background-color: #C4262E;
                    color: white;
                    font-weight: 700;
                    text-transform: uppercase;
                    border-radius: 15px;
                }
            }
            .resource-tag {
                font-family: Facilt;
                font-weight: 600;
            }
        }
    }
    @media (max-width: 991px) {
        .sib-resource {
            margin-top: 65px;
        }
    }
}

#resources {
    background-color: #f0f3f6;
}

#circle-resources .resources sib-form sib-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);
    }
}