.esg-component-container {
    @mixin fontSize11 {
        font-size: 11px;
        font-weight: normal;
    };

    // width: 55%;
    display: inline-block;

    .esg-accordion-header {
        display: flex;
        align-items: center;

        .editIcon {
            padding: 3px;
            border-radius: 3px;

            &:hover {
                background: #ffffff;
            }
        }

        .header-item {
            @include fontSize11;
            text-transform: none;

            &:nth-child(1){
                width: 206px;
            }
            &:nth-child(2){
                width: 70px;
            }
        }
    }
    .esg-accordion-container {
        & > div:last-child {
            padding-left: 0;
        }
         & > div:first-child {
            button {
                background-color: transparent;
                border: none;

                &:hover {
                    background-color: #e4f0fe;
                }
    
                & > span:nth-child(2) {
                    width: 100%;
                    & > span {
                        width: 100%;
                    }
                }
            }
         }

        .esg-container {
            background: #f9f9f9;
            padding: 6px 22px;
            border-radius: 6px;
        }
        .esg-property {
            padding: 8px;
            display: flex;
            align-items: center;

            .item {
                @include fontSize11;
            }

            .item:nth-child(1) {
                width: 206px;
            }
            .item:nth-child(2){
                width: 70px;
            }
        }

        .esg-edit-container {
            background: #f9f9f9;
            padding: 6px 24px;
            border-radius: 6px;
            border: 1px solid #569bd6;

            .esg-edit-property {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 2px 6px;
                column-gap: 10px;

                .title {
                    @include fontSize11;
                    width: 195px;
                    white-space: nowrap;
                }
                .prevValue {
                    @include fontSize11;
                    width: 62px;
                }
                .esg-select-input {
                    width: 120px;
                }

                .esg-text-input {
                    // width: 33%;
                    textarea {
                        width: 10vw !important;
                        height: 22px;
                        min-height: 22px;
                        padding: 4px;   
                    }
                }
            }

            .esg-btn-section {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                column-gap: 10px;

                button {
                    padding: 6px 12px;
                    cursor: pointer;
                }
            }
        }

        .esgIcon {
            color: white;
            background: #9d5700;
            padding: 2px 5px;
            border-radius: 3px;
        }

        .hLine {
            border-top: 2px solid #504d4d;
            margin: 10px 0;
        }

        .w33 {
            width: 33%;
        }

        .fade_03 {
            opacity: 0.3;
        }

        .propColor {
            color: green;
        }
    }
}