body
    margin: 0
    color: black

.logo
    font-size: 8vw
    font-family: "Open Sans"
    font-weight: bold
    text-transform: uppercase
    text-align: center
    text-shadow: 2px 2px 1px #007104
    color: #00b300
    letter-spacing: 5px
    user-select: none
    cursor: default
    .part1, .part2
        display: inline-block
    .part1
        color: #03A9F4
        text-shadow: 2px 2px 1px #0059a0
        margin-right: 5px
    &.small
        font-size: 30px
        text-align: inherit
        cursor: pointer
        display: inline-block

.mobview
    display: none !important

.navigator
    position: relative
    padding: 0 50px
    transition: background-color 0.1s linear
    background-color: rgb(0, 219, 247)
    z-index: 5
    height: 68px
    
    &.fix
        top: 0
        left: 0
        right: 0
        position: fixed
        background-color: rgba(0, 219, 247, 0.67)

    #navlogo
        float: left
        &.hidden
            display: none

    ul
        padding: 0
        margin: 0
        display: inline-block
        list-style-type: none

    li
        font-size: 30px
        display: inline-block
        height: 68px
        line-height: 2.2
        a
            text-decoration: none
            padding: 20px
            color: #007cde
            font-weight: bold
            text-transform: uppercase
            font-size: 25px
            transition: background-color 0.1s linear
            &:hover
                background-color: rgba(255, 255, 255, 0.25)
    
    .showButton
        margin: 0
        padding: 20px
        display: none
        float: right
        font-size: 150%
        position: relative
        cursor: pointer
        color: green
    
    .list
        display: flex
        flex-direction: row
        
        .floating
            margin-left: auto

    input[type=checkbox]
        display: none

        &:checked ~ .list
            max-height: 500px

.carousel
    margin-bottom: 4rem

    .carousel-item
        height: 40rem
        background-color: #777

        & > img
            position: absolute
            top: 0
            left: 0
            min-width: 100%
            height: 40rem

.marketing .col-lg-4
    margin-bottom: 1.5rem
    text-align: center
    
    .circular-header
        width: 140px
        height: 140px
        vertical-align: middle
        display: inline-block
        border-radius: 50% !important
        line-height: 9rem
        font-size: 5rem
        color: #fff

.news-article
    margin-bottom: 4rem
    
    .news-title
        margin-bottom: .25rem
        font-size: 2.5rem
    
    .news-meta
        margin-bottom: 1.25rem
        color: #999

.divboxes
    text-align: center
.divbox
    width: 300px
    display: inline-block
    margin: 20px
    vertical-align: text-top
    .head
        display: block
        font-size: 30px
        .fa
            color: white
            height: 32px
            width: 32px
            padding: 10px
            border-radius: 100px
            margin-right: 15px
        .fa-lock
            background-color: orange
        .fa-github
            background-color: green

.wrapper
    overflow: hidden
    min-height: 100vh
    width: 100%

.document
    overflow: hidden
    min-height: 100vh
    padding: 50px
    background-color: #fff

.tos
    display: inline-block
    width: 60%
    font-size: 120%

.g-recaptcha
    margin-top: 10px

code
    white-space: pre


.button
    display: inline-block
    margin-right: 5px

.boxcont
    .box
        padding: 20px
        margin: auto
        margin-top: 5%
        background-color: #fff
        box-shadow: 5px 5px 15px #868686
        border: 1px solid #ddd
        margin-bottom: 10%
        h1:first-child, h3:first-child
            margin-top: 0
        .left, .right
            display: inline-block
            width: 50%
        .left
            border-right: 1px solid #ddd
        .right
            float: right
            width: 46%
        &#login
            max-width: 700px
        &#settings
            max-width: 700px
            min-height: 380px
        &#totpcheck
            max-width: 400px
        &#donate 
            max-width: 400px
        &#error
            width: 200px

.check label
    display: inline-block
    margin-right: 5px

.pgn
    display: inline-block
    margin-left: 10px
    .button
        margin: 0 1px

.pagenum
    display: inline-block
    padding: 10px
    &.total
        color: #a9a9a9
        font-style: italic

.app-button
    display: inline-block
    img
        width: 200px
    &.apple
        img
            width: 175px
            padding: 0 12px

.login-btn
    display: block
    text-decoration: none
    border-radius: 5px
    margin-top: 5px
    padding: 5px 5px
    width: 215px
    height: 50px
    cursor: pointer
    margin-left: 5px

    &.twitter-login
        background-color: #fff
        border: 1px solid #ddd
        line-height: 2.2rem
        
        i
            color: #03A9F4
            font-size: 22px
        span
            color: #000
            display: inline-block
            vertical-align: top
            margin-left: 12px

    &.discord-login
        background-color: #99aab5
        line-height: 2.4rem
        
        span
            color: white
            vertical-align: top
            margin-left: 3px
            display: inline-block
        img
            width: 45px
            display: inline-block

    &.google-login
        background-color: #4285f4
        border: 1px solid #ddd
        line-height: 2.2rem

        i
            color: #fff
            font-size: 22px
        span
            color: #fff
            display: inline-block
            vertical-align: top
            margin-left: 12px

    &.disconnect
        margin-top: 5px
        padding: 10px
        background-color: #ff6c6c
        color: #fff
        width: 215px
        border-radius: 5px

span.divider
    color: #ddd
    margin: 0 5px
    cursor: default

.nobulletin
    list-style-type: none
    padding-left: 2em
    i.fa
        margin-right: 10px

.haveaccess
    color: #0c9a0c
    span
        font-weight: bold
.noaccess
    color: red
    span
        font-weight: bold

.unaffiliated
    font-size: 120%
    text-align: center
    color: #FF5722
    font-weight: bold

.message
    display: block
    margin: 1px
    padding: 5px
    background-color: #a6ffb5
    border: 1px solid green
    &.error
        background-color: #ff8484
        border: 1px solid maroon

.application
    height: 140px
    #deleteclient
        float: right
        color: red
        font-size: 120%
        cursor: pointer
    .picture
        width: 120px
        height: 120px
        position: relative
        display: inline-block
        float: left
        .noicon
            width: 100%
            height: 100%
            text-align: center
            background-color: #40aaff
            color: #fff
            i
                font-size: 500%
                margin-top: 20px
    .info
        margin-left: 130px
        .name
            font-size: 120%
            font-weight: bold
            text-overflow: ellipsis
            overflow: hidden
        .description
            font-size: 80%
            font-style: italic
            word-wrap: break-word
        .url
            display: block
            text-overflow: ellipsis
            overflow: hidden
            max-width: 200px

input.authorize
    background-color: #00b0ff
    font-size: 200%
    color: #fff
    border: 1px solid #2196F3

input.deny
    font-size: 160%
    background-color: #f10
    border: 1px solid #e00000
    color: #fff

input.invalid
    border: 1px solid #f00
    outline: red

#repeatcheck
    color: red
    padding: 10px

.article
    .title
        font-size: 200%
        font-weight: bold
    .author
        font-size: 80%
        color: #565656
    .timestamp
        display: inline-block
    .content
        margin-top: 20px
        margin-bottom: 20px

span.load
    font-size: 120%
    span
        vertical-align: super
        margin-left: 10px

.newsfeed
    .prvarticle
        margin-bottom: 10px
        .title
            font-size: 200%
            display: block
            font-weight: bold
        .timestamp
            font-size: 80%
            color: #565656
        .prvcontent
            margin: 10px 0

.content
    hr
        border-color: #ffffff
        margin: 20px 0

.option
    display: block

.specify
    display: inline-block
    width: 22px
    text-align: center
    margin-left: 5px
    background-color: #2196F3
    color: #fff
    border-radius: 100px
    cursor: help
    font-size: 19px

.dialog-drop
    display: block
    position: fixed
    display: none
    top: 0
    left: 0
    bottom: 0
    right: 0
    background-color: rgba(56, 56, 56, 0.8)
    z-index: 10
    .dialog
        min-width: 400px
        width: fit-content
        max-width: 50vw
        min-height: 180px
        height: fit-content
        background-color: #fff
        margin: auto
        margin-top: 5%
        transition: all 0.1s linear
        overflow: hidden
        .pad
            padding: 5px
        .head
            height: 40px
            background-color: #e6e6e6
            box-shadow: 0px 3px #ddd
            overflow: hidden
            position: relative
            #title
                max-width: 80%
                text-overflow: ellipsis
                overflow: hidden
                white-space: nowrap
                margin: 12px
                display: block
            #close
                position: absolute
                top: 6px
                right: 5px
                color: #ff2525
                cursor: pointer
                padding: 5px

.cropbox
    padding: 10px
    .preview
        max-width: 160px
        max-height: 160px
    .buttons .button
        margin-right: 5px

.avatarCont
    height: 180px
    .avatar
        float: left
    .options
        margin-left: 170px
        a
            display: block

.avatar
    width: 160px
    height: 160px
    position: relative
    border: 1px solid #ddd
    img
        position: absolute
        width: 100%
        height: 100%
        margin: auto
    .noavatar
        font-size: 120px
        text-align: center
        line-height: 160px
        color: #fff
        background-color: #d0d0d0

select
    width: 80px
    background-color: #f5f5f5
    border: 1px solid #c1c1c1
    padding: 8px
    vertical-align: top
    margin-left: 5px
    border-radius: 5px

.aligned-form
    .cell
        margin-top: 10px
        label
            width: 120px
            float: left
            margin: 0
            padding: 8px 0
        input[type="checkbox"]
            margin-top: 10px
        span
            padding: 10px
            display: inline-block
            vertical-align: top

noscript
    position: fixed
    display: block
    width: 100%
    background-color: rgba(255, 95, 95, 0.6)
    color: #fff
    text-shadow: 1px 1px 3px #000
    text-align: center
    z-index: 100

.last-modified
    font-style: italic
    color: #7d7d7d
    display: block

@media all and (max-width: 800px)
    .navigator
        padding: 0 10px
    .showButton
        display: inline-block !important
        
    .menu
        .list
            display: block
            position: absolute
            top: 68px
            left: 0
            right: 0
            background-color: rgba(0, 188, 212, 0.72)
            transition: max-height 0.1s linear
            max-height: 0
            overflow: hidden
            
            ul, li, li a
                display: block
            
            li a
                padding: 6px 20px
                color: #ffffff
                text-transform: none
            
            .floating
                border-top: 2px solid #00a1b5

    #navlogo
        display: inline-block !important
    .banner
        display: none
    .logo
        font-size: 10vw
    .document
        padding: 5px
    .tos
        width: auto
        font-size: 4vw
    .divbox
        font-size: 80%
        .head
            font-size: 120%
            .fa
                width: 15px
                height: 15px
    section#home
        h1
            font-size: 150%
            margin-top: 0
        p
            font-size: 100%
    .box
        .left, .right
            float: initial !important
            display: block !important
            border: 0 !important
            width: auto !important
            margin: auto
    .dialog
        width: 100vw !important
        min-width: 100vw !important

.btn-social
    width: 28px
    height: 28px
    display: block
    line-height: 28px
    color: #fff
    font-size: 120%
    border-radius: 100px
    padding: 0 2px
    margin: 5px
    &#github
        background-color: #000
    &#twitter
        background-color: #03a9f4
    &#discord
        background-color: #2C2F33
        padding: 3px
        span
            background: url("/static/image/discord.svg")
            background-size: contain
            width: 22px
            height: 22px
            display: block
    &#rocket-chat
        background-color: #eee
        padding: 3px
        span
            background: url("/static/image/rocket-chat.svg")
            background-size: contain
            width: 22px
            height: 22px
            display: block

@media all and (max-width: 500px)
    section
        padding: 10px
    .logo.small
        font-size: 5vw
    .divbox
        margin: 10px 0px