.daggerheart.dh-style.setting.homebrew-settings .resources.tab {
    .resource-types-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
        overflow: auto;
        max-height: 570px;

        fieldset legend {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .resource-type-container {
            width: 100%;

            .resources-container {
                display: flex;
                flex-direction: column;
                gap: 4px;

                .resource-container {
                    .resource-icons-container {
                        display: flex;
                        justify-content: space-between;
                        gap: 8px;
                        width: 100%;

                        .resource-icon-container {
                            display: flex;
                            flex-direction: column;
                            gap: 4px;
                            flex: 1;

                            .resource-icon-title-container {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 4px;

                                &::before,
                                &::after {
                                    color: @dark-blue;
                                    content: '';
                                    flex: 1;
                                    height: 2px;
                                }

                                &::before {
                                    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, @golden 100%);
                                }

                                &::after {
                                    background: linear-gradient(90deg, @golden 0%, rgba(0, 0, 0, 0) 100%);
                                }

                                .resource-icon-title {
                                    font-size: var(--font-size-16);
                                    white-space: nowrap;
                                    display: flex;
                                    align-items: center;
                                    gap: 4px;
                                    color: light-dark(@dark-blue, @golden);

                                    i {
                                        font-size: 14px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .two-columns {
        width: 100%;
    }

    .form-group.vertical {
        > * {
            flex: 0 0 100%;
        }
    }
}