<vbox class="Form" style="margin-top:-1.2em;">
    <style>
    @creditsTab > .Wrapper {
        padding: 1em;
    }
    @aboutTabContent {
        position: relative;
    }
    @aboutTabContent vbox {
        position: absolute;
        top: 0px;
        left: 0px;
        margin-top: 1em;
    }
    @creditsTab ul {
        margin: 0em;
        margin-bottom: 2em;
        padding: 0px;
        padding-left: 1em;
    }
    @creditsTab ul li {
        margin-top: 0.2em;
        list-style: none;
    }
    @creditsTab h4 {
        margin: 0em;
        font-size: 1em;
        font-weight: bold;
    }
    .donate {
        margin-top: 1em;
    }
    .donate img {
        width: 8em;
        height: 3.167em;
        margin-left: 2em;
    }
    .aboutBanner {
        background-color: lighten(@selected_bg, 10%);
        margin-bottom: 1em;
        margin-left: -1.2em;
        margin-right: -1.2em;
        align-items: flex-start;

        color:#fff;
        padding: 1.9em;
    }
    .aboutBanner img {
        width: 3em;
        margin-right: 1em;
    }
    .aboutBanner h1 {
        margin: 0px;
        padding: 0px;
        font-size: 1.4em;
    }
    .Tab[selected='true'] {
        border: none;
        /*border-radius: 0.3em 0.3em 0em 0em;*/
        border-radius: 0.3em ;
        background-color: #3385ff;
        color: #fff;
    }
    </style>
    <vbox>
        <hbox class="aboutBanner">
            <img src="css/images/logo-shadow.png"/>
            <vbox flex="1">
                <h1>Evolus Pencil</h1>
                <hbox>
                    <div flex="1">Copyright (c) Evolus Co., Ltd. All rights reserved.</div>
                    <span>Version: <span anon-id="version" style="font-weight:bold;"></span></span>
                </hbox>
            </vbox>
        </hbox>
    </vbox>
    <vbox flex="1" anon-id="aboutTabSelector">
        <ui:TabPane anon-id="tabHeader">
            <vbox anon-id="creditsTab" flex="1" tab-title="Credits">
                <vbox class="Wrapper" flex="1">
                    <vbox flex="1">
                        <h4>Authors</h4>
                        <ul>
                            <li>Dương Thành An</li>
                            <li>Nguyễn Tiến Dũng</li>
                            <li>Nguyễn Nữ Hải Anh</li>
                            <li>Phạm Ngọc Vân Anh</li>
                        </ul>
                        <h4>Contributors</h4>
                        <hbox>
                            <ul flex="1">
                                <li>Ngô Chí Cường</li>
                                <li>Lê Hồ Bá Phước</li>
                                <li>Lê Quang Thanh</li>
                                <li>Trần Đình Chương</li>
                                <li>Nguyễn Phạm Hải Châu</li>
                                <li>Phạm Thế Vinh</li>
                            </ul>
                            <ul flex="1">
                                <li>Maxime Delorme</li>
                                <li>Frederic Vandaele</li>
                                <li>Brainiac Kalel</li>
                                <li>Trương Xuân Tính</li>
                                <li>Trương Anh Tuấn</li>
                                <li>Nguyễn Hồng Thái</li>
                            </ul>
                        </hbox>
                        <a href="https://github.com/evolus/pencil/graphs/contributors">View the full list of code contributors in GitHub</a>
                    </vbox>
                    <hbox class="donate" style="align-items: center;">
                        <div flex="1">Pencil is Free Software and licensed under the GPL, but if you find it useful, you can support its development :)</div>
                        <img style="cursor:pointer;" src="css/images/paypal.png" onclick="Util.openDonate();" tooltiptext="You can help me make Pencil even better. Consider making a small donation!"></img>
                    </hbox>
                </vbox>
            </vbox>
            <hbox anon-id="LicenseTab" flex="1" tab-title="License">
                <textarea name="name" cols="80" style="border:none; height:100%; padding:1em; resize: none;" anon-id="licenseText" readonly="true" flex="1">
                </textarea>
            </hbox>
        </ui:TabPane>
    </vbox>
</vbox>
