@prefix: graphjs;

@{prefix}-profile-settings.@{prefix}-root {
    display: block;
    text-align: center;
    .@{prefix}-content {
        h2 {
            // ThemeOption: color: @primary-color;
            margin: 2em 0 1em;
        }
        .@{prefix}-avatar {
            overflow: hidden;
            display: inline-block;
            position: relative;
            width: 10em;
            height: 10em;
            margin: 0 auto;
            margin-bottom: 1.5em;
            .heavy-font;
            text-transform: uppercase;
            .border-radius(@border-radius-full);
            &:hover {
                &::before {
                    padding-top: 3.6em;
                    // ThemeOption: background-color: fade(@primary-color, 90%);
                }
            }
            &::before {
                content: attr(data-changeavatartextlineone) "\00000a" attr(data-changeavatartextlinetwo);
                display: inline-block;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                padding-top: 6.4em;
                color: white;
                line-height: 1.4em;
                vertical-align: middle;
                // ThemeOption: background-color: fade(@primary-color, 60%);
                white-space: pre;
                .transition(all .35s ease);
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
        form {
            max-width: 24em;
            margin: 0 auto;
            input, input[type] {
                &.@{prefix}-success {
                    border-width: 1px;
                    border-style: solid;
                    border-color: @success-color;
                    &::after {
                        content: attr(data-savesuccesstext);
                        display: block;
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 2.5em;
                        height: 2.5em;
                        color: white;
                        .heavy-font;
                        font-size: 1.5em;
                        line-height: 2.5em;
                        background-color: @success-color;
                    }
                }
            }
        }
    }
}

.dp-modal {
    z-index: 1000000;
    .dp {
        max-width: 360px;
    }
    footer.dp-cal-footer {
        display: none;
    }
}