#settings-actions
    position: fixed
    width: 40%
    margin-top: -85px
    left: 50%
    margin-left: -20%
    #buttons
        width: 185px
        margin: 28px auto
        text-align: center
        background: $white
        padding: 2px
        border-radius: 3px
        button
            color: $white
            border-radius: 3px
            width: 40px
            margin: 0 10px 0 10px
            svg
                width: 25px
                height: 20px
                fill: $white
        button[data-render='false']
            background: $secondary
            svg
                fill: $primary

        button[data-render='true']
            background: $highlight
            svg
                fill: $white

#settings-index
    width: 94%
    max-width: 900px
    margin: 0 auto
    overflow: hidden
    #settings-index-wrapper
        padding: 0

        button
            margin-top: 5px
            width: 100%
            height: 33px

        #member-settings, #feature-settings, #option-settings, #token-settings, #backup-settings
            background: $white
            padding: 0px
            border-radius: 5px 0 5px 0
            width: 100%
            margin: 20px auto
            
            label
                font-family: $baseType
                color: $primary
                font-weight: bold
            span 
                color: $secondary
    
            input
                width: 95%
                margin: 0 5px 10px 0
                height: 30px
                padding: 10px
            input#backup-upload
                visibility: hidden
                display: none
            .backup-meta
                background: $primary
                color: $white
                padding: 8px
                border-radius: 3px
                margin: 5px 0 0 0
                text-align: center
                
            #member-images
                padding: 10px 15px 0 15px
                
                #member-avatar-drop
                    display: inline-block
                    margin: 0 0 10px 0
    
                    img
                        width: 100%
                        border-radius: 5px
                        overflow: hidden
                        cursor: pointer
                        display: block
                        margin-bottom: 2px
    
                    input
                        visibility: hidden
                        display: none
                    #privacy-toggle
                        width: 50%
                    #render-toggle
                        width: 50%
            
                #site-background
                    margin: 0 0 10px 0
                
                    img
                        width: 92.1%
                        height: 292px
                        border-radius: 3px
                        overflow: hidden
                        cursor: pointer
                
                    input
                        visibility: hidden
                        display: none
            #member-meta
                padding: 10px 15px 0 15px
                position: relative
                top: -30px

            
            #features
                padding: 10px 15px 0 15px
            

        textarea
            background: $primary
            width: 70%
            height: 89.5px
            color: $tertiary
            padding: 10px
            display: inline-block
            margin-bottom: 10px
        span#key
            color: $white
            background: $primary
            font-size: 0.9em
            border-radius: 3px
            padding: 5px
            display: block
            width: 95%
            overflow: hidden
        
        #feature-settings
            #feature-api, #dynamic-api
                background: $white
                border-radius: 3px
                padding: 5px
                
    
                button
                    color: $white
                    border-radius: 3px
                    width: 200px
                    margin: 0
                    height: 200px
                    font-size: 1em
                    svg
                        width: 100px
                        height: 90px
                        fill: $white
                        position: relative 
                        display: block  
                        margin: 12px auto
                    span 
                        color: $white
                        margin: 6px 0 0 5px
                        position: relative
                        vertical-align: middle
                        display: inline-block
                        font-weight: bold
                        
                button[data-enabled='false']
                    background: $secondary
                    svg
                        fill: $primary
                    span
                        color: $primary
                button[data-enabled='true']
                   background: $highlight
                   svg
                       fill: $white
        #token-settings
            #keys-tokens
                padding: 10px 15px 0 15px
                #member-api-key, #form-token
                    background: $primary
                    border-radius: 3px
                    padding: 5px
                    color: $white

        #option-settings
            #theme-settings
                a
                    width: 95%
                    margin: 0 5px 5px 0
                    height: 15px
                    padding: 10px
                    display: inline-block

                a[data-enabled='false']
                    background: $white
                    color: $primary
                    border-radius: 3px
                    font-weight: bold
                    border-top: 1px $highlight solid
                    border-bottom: 1px $highlight solid

                a[data-enabled='true']
                    background: $highlight
                    color: $primary
                    border-radius: 3px
                    font-weight: bold
                    border-top: 1px $primary solid
                    border-bottom: 1px $primary solid
                    svg
                        fill: $primary
                        display: inline-block
                        float: right

            #mail-settings
                min-height: 240px

                a.mail-option
                    float: right
                    font-family: $monoType
                    font-size: 0.9em
                    border-radius: 3px
                    text-decoration: none
                    margin: 0 0 0 5px
                    // padding: 1px

                a.mail-option[data-enabled='true']
                    color: $highlight

                a.mail-option[data-enabled='false']
                    color: $primary

                input
                    // width 94%
                    margin: 0 5px 5px 0
                    vertical-align: top

                div[data-enabled='false']
                    display: none
                    visibility: hidden
                #settings-api
                    background: $primary
                    border-radius: 3px
                    padding: 10px
                    span 
                        color: $white !important
                        margin: -13px 0 0 5px
                        position: relative
                        vertical-align: middle
                        display: inline-block
                        font-weight: bold
        
                    button
                        color: $white
                        border-radius: 3px
                        width: 40px
                        margin: 0
                        svg
                            width: 25px
                            height: 20px
                            fill: $white
                    button[data-enabled='false']
                        background: $secondary
                        svg
                            fill: $primary
                    button[data-enabled='true']
                       background: $highlight
                       svg
                           fill: $white
                    
// responsive                    
@media only screen and (max-width: 480px)
    #settings-actions
        margin-left: -42%
        #buttons
            width: 150px
            background: none
            button
                margin: 0 5px 0 5px