@font-face {
    font-family: "PixelMix";
    src: url("/plugins/nodebb-theme-awge/fonts/pixelmix.ttf");
}

@font-face {
    font-family: "Nokia Fc22";
    src: url("/plugins/nodebb-theme-awge/fonts/nokiafc22.ttf") format('truetype');
}

body {
    background-color: #008080;
    font-family: "Nokia Fc22", "PixelMix", sans-serif;
    cursor: url("https://dwvo2npct47gg.cloudfront.net/images/awge-auto-small.png"), auto; //cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-pointer-small.png) 10 0, pointer;
}

.awge-navbar {
    background: #C0C0C0;
    min-height: 0;
    height: 35px;
    top: initial !important;
    bottom: 0;
    margin: 0;
    border-top: 2px solid #eeeeee;
    border-bottom: 0;
    display: block !important;
    @media (max-width: @screen-xs-max) {
        top: 0 !important;
        height: initial;
        bottom: initial;
        margin: initial;
        border-top: 0;
        border-bottom: 1px solid #eeeeee;
    }
    &-starticon {
        float: left;
        margin: 6px 0px 4px 8px;
    }
    &-title {
        padding-top: 5px !important;
        padding-bottom: 1px !important;
        padding-left: 8px;
        height: auto;
        @media (max-width: @screen-xs-max) {
            padding: 15px !important;
        }
    }
    &-container {
        display: flex;
        align-items: center;
    }
    &-program {
        border-top: 1px solid white;
        border-left: 1px solid white;
        border-bottom: 2px ridge #808080;
        border-right: 2px ridge #808080;
        margin: 2px 5px;
        @media (max-width: @screen-md-max) {
            margin: 2px 4px;
            >a {
                padding: 10px 12px !important;
            }
        }
        @media (max-width: @screen-xs-max) {
            border: none !important;
            padding: 8px 0px;
            cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-pointer-small.png) 10 0, pointer;
            margin: 0;
            &:hover,
            &:active,
            &:focus {
                background: #000080;
                &>a {
                    color: white;
                }
            }
            &>a {
                color: #666;
                padding: 10px 20px !important;
            }
        }
        &>a {
            padding-top: 3px !important;
            padding-bottom: 3px !important;
        }
        &:active {
            border-top: 2px groove #808080 !important;
            border-left: 2px groove #808080 !important;
            border-bottom: 1px solid white !important;
            border-right: 1px solid white !important;
        }
        &.active {
            border-top: 2px groove #808080 !important;
            border-left: 2px groove #808080 !important;
            border-bottom: 1px solid white !important;
            border-right: 1px solid white !important;
            @media (max-width: @screen-xs-max) {
                border: none !important;
                background: #000080;
                &>a {
                    color: white;
                }
            }
        }
    }
    &-reconnect {
        border: none !important;
        margin: 0px 5px !important;
        &>a {
            border-top: 1px solid white;
            border-left: 1px solid white;
            border-bottom: 2px ridge #808080;
            border-right: 2px ridge #808080;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
            margin: 2px 0px !important;
        }
    }
    &-clock {
        margin: 2px 5px;
        float: right;
        &>p {
            margin: 0px;
            padding: 3px 10px;
        }
    }
    &-dropdown {
        flex: 1;
        display: inline-table;
    }
    &-loggedin {
        margin: 0;
    }
    &-usericon {
        padding: 1px 15px !important;
        @media (max-width: @screen-md-max) {
            padding: 1px 12px !important;
        }
        img {
            width: 24px !important;
            height: 24px !important;
            line-height: 24px !important;
            font-size: 1.5rem !important;
        }
        &>.user-icon {
            width: 24px !important;
            height: 24px !important;
            line-height: 24px !important;
            font-size: 1.5rem !important;
        }
    }
    &-pagination {
        margin-right: 0 !important;
        margin-left: 0 !important;
        &>li {
            border-top: 1px solid white;
            border-left: 1px solid white;
            border-bottom: 2px ridge #808080;
            border-right: 2px ridge #808080;
            margin: 2px 5px;
            @media (max-width: @screen-md-max) {
                margin: 2px 4px;
            }
            >a {
                padding: 3px 2px;
            }
            &>.progress-container {
                bottom: 2px !important;
            }
        }
    }
    &-dock {
        overflow-y: auto;
        float: none;
        max-height: 33px;
        padding-right: 305px;
        &>li {
            white-space: nowrap;
            max-width: 130px;
            &>a {
                text-overflow: ellipsis;
                overflow: hidden;
                padding: 10px 7px;
                font-size: 12px;
                padding-top: 4px !important;
                padding-bottom: 2px !important;
            }
        }
    }
    &-mobile {
        background: #c1c1c0;
        border: 2px solid;
        border-bottom-color: #535353;
        border-right-color: #535353;
        border-left-color: #dbdbdb;
        border-top-color: #dbdbdb;
        background-color: #bfbfbf;
        &-section {
            color: #c1c1c0;
            margin: 0 !important;
            &>h3 {
                height: 0;
                font-size: 0;
                border-top: 2px #888888 solid;
                border-bottom: 2px #f6f6f6 solid;
            }
            &>ul {
                margin: 0 !important;
                &>li {
                    margin: 0;
                    border: none !important;
                    padding: 8px 0px;
                    cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-pointer-small.png) 10 0, pointer;
                    &:hover,
                    &:active,
                    &:focus {
                        background: #000080;
                        &>a {
                            color: white;
                        }
                        &>form {
                            &>button {
                                &>i {
                                    color: white;
                                }
                                &>span {
                                    color: white;
                                }
                            }
                        }
                    }
                    &>form {
                        &>button {
                            &>i {
                                color: #666;
                            }
                            &>span {
                                color: #666;
                            }
                        }
                    }
                    &>a {
                        color: #666;
                    }
                }
                &>.divider {
                    display: none;
                }
                &>.dropdown-header {
                    padding: 0;
                    height: 0;
                    font-size: 0;
                    border-top: 2px #888888 solid !important;
                    border-bottom: 2px #f6f6f6 solid !important;
                }
            }
            &>p {
                &:hover,
                &:active,
                &:focus {
                    background: #000080;
                    &>a {
                        color: white;
                    }
                }
                &>a {
                    color: #666;
                }
            }
        }
        &-profile {
            background: #808080;
        }
    }
}

.awge-breadcrumb {
    margin: 0 !important;
    font-size: inherit;
    line-height: initial;
    &>li {
        color: #808080;
        white-space: initial !important;
        &:before {
            color: #808080;
        }
    }
}

.awge-windows {
    border: 2px solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px !important;
    left: 0;
    top: 50vh;
    transform: translateY(-50%);
    margin: 0 !important;
    position: relative;
    @media (max-width: @screen-xs-max) {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin: 10px 0px !important;
    }
    &-hidden {
        opacity: 0;
        pointer-events: none;
        @media (max-width: @screen-xs-max) {
            opacity: 1 !important;
            pointer-events: all !important;
        }
    }
    &-top-left {
        top: 10px;
        left: 10px;
        transform: none;
    }
    &-bottom-right {
        bottom: 10px;
        right: 10px;
        transform: none;
    }
    &-title {
        background-color: #808080;
        padding: 2px 4px 3px 4px;
        position: relative;
        cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-nsew-small.png), url(https://dwvo2npct47gg.cloudfront.net/images/awge-auto-small.png), -webkit-grab, auto;
        button {
            border: 2px solid;
            border-bottom-color: #444;
            border-right-color: #444;
            border-left-color: #a6a6a6;
            border-top-color: #a6a6a6;
            background-color: #bfbfbf;
            position: absolute;
            font-size: 9px;
            line-height: 0;
            padding: 1px;
            height: 15px;
            width: 15px;
            top: 2px;
        }
        button.minimize {
            right: 34px;
        }
        button.expand {
            right: 18px;
        }
        button.times {
            right: 2px;
        }
        &-text {
            margin: 0;
            color: #bcbcbc;
            font-size: 13px;
            font-weight: bold;
            line-height: initial;
            padding-right: 50px;
        }
    }
    &-toolbar {
        list-style: none;
        padding: 2px 0;
        margin: 0;
        &-option {
            display: inline-block;
            padding: 0 3px !important;
            min-height: 0px !important;
            cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-pointer-small.png) 10 0, pointer;
            border: none !important;
            @media (max-width: @screen-xs-max) {
                padding: 5px 8px !important;
                font-size: 16px;
            }
        }
        p {
            margin: 0;
        }
        a {
            color: black;
            margin: 0;
        }
        &>.active {
            color: #808080;
        }
        &-input {
            border: 2px solid;
            border-bottom-color: #c7c7c7;
            border-right-color: #c7c7c7;
            border-left-color: #808080;
            border-top-color: #808080;
            background-color: #fff;
            margin: 2px 0px !important;
            padding: 1px;
            font-size: 13px;
            line-height: 13px;
            height: auto;
        }
        &-searchindicator {
            padding: 0px 6px;
            background: transparent;
            border: none;
        }
        &-combobox {
            background: none;
            border: none;
            color: black;
            outline: none !important;
            cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-pointer-small.png) 10 0, pointer;
        }
    }
    &-container {
        border: 2px solid;
        border-bottom-color: #c7c7c7;
        border-right-color: #c7c7c7;
        border-left-color: #808080;
        border-top-color: #808080;
        background-color: #fff;
        padding: 15px !important;
        margin: 0 !important;
        max-height: 80vh;
        overflow-y: auto;
        overflow-x: hidden;
        @media (max-width: @screen-xs-max) {
            max-height: initial;
        }

        button,
        .btn,
        a[type="button"] {
            border-top: 1px solid white !important;
            border-left: 1px solid white !important;
            border-bottom: 2px ridge #808080 !important;
            border-right: 2px ridge #808080 !important;
            cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-pointer-small.png) 10 0, pointer;
            color: #666 !important;
            background: #c1c1c0 !important;
            outline: none !important;
            &:active,
            &:focus {
                border-top: 2px groove #808080 !important;
                border-left: 2px groove #808080 !important;
                border-bottom: 1px solid white !important;
                border-right: 1px solid white !important;
            }
        }

        input,
        textarea {
            border: 2px solid;
            border-bottom-color: #c7c7c7;
            border-right-color: #c7c7c7;
            border-left-color: #808080;
            border-top-color: #808080;
            background-color: #fff;
        }
    }
    &-statusbar {
        display: flex;
        overflow: hidden;
        .left,
        .right {
            border: 1px solid;
            border-color: #888 #dadada #dadada #888;
            display: inline-block;
            padding: 0px 5px;
            font-size: 13px;
            display: flex;
            align-items: center;
            color: #808080;
            &>p {
                margin: 0;
            }
        }
        .left {
            flex: 1;
        }
        .right {
            flex: 3;
            @media (max-width: @screen-xs-max) {
                flex: 2;
            }
        }
    }
}

.awge-account {
    &-cover {
        display: flex;
        padding: 0 !important;
        overflow-y: hidden;
        position: initial !important;
    }
    &-avatar {
        left: 0 !important;
        top: 50% !important;
        transform: translate(50%, -50%);
        margin: 0px !important;
        @media (max-width: @screen-xs-max) {
            left: 50% !important;
            transform: translate(-50%, -50%);
        }
    }
}

.awge-slideout {
    position: absolute;
    height: ~"calc(100vh - 35px)";
    top: 0;
    width: 100%;
    @media (max-width: @screen-md-max) {
        min-height: initial !important;
        padding: 0 !important;
    }
    @media (max-width: @screen-xs-max) {
        position: initial;
        height: initial;
        top: initial;
        width: auto;
        padding-top: 160px !important;
        padding-bottom: 40px !important;
    }
}

.awge-alert {
    border: 2px solid !important;
    border-bottom-color: #535353 !important;
    border-right-color: #535353 !important;
    border-left-color: #dbdbdb !important;
    border-top-color: #dbdbdb !important;
    background-color: #bfbfbf !important;
    border-left: 2px solid !important;
    box-shadow: none !important;
    &:before {
        display: none;
    }
    &-message {
        padding: 10px;
        display: flex;
        align-items: center;
        @media (max-width: @screen-xs-max) {
            padding: 5px;
            font-size: 11px;
        }
    }
    &-confirm {
        padding: 15px 20px;
        display: flex;
        justify-content: center;
        @media (max-width: @screen-xs-max) {
            padding: 5px;
        }
    }
    &-button {
        border-top: 1px solid white;
        border-left: 1px solid white;
        border-bottom: 2px ridge #808080;
        border-right: 2px ridge #808080;
        margin: 2px 5px;
        display: initial;
        padding: 5px 5px;
        cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-pointer-small.png) 10 0, pointer;
        &:active,
        &:focus {
            border-top: 2px groove #808080 !important;
            border-left: 2px groove #808080 !important;
            border-bottom: 1px solid white !important;
            border-right: 1px solid white !important;
        }
        &>a {
            color: black !important;
            padding: 2px 16px;
            position: inherit !important;
            top: inherit !important;
            right: initial !important;
            font-size: initial;
            opacity: 0.9 !important;
            text-shadow: none;
        }
    }
}

.awge-composer {
    right: initial !important;
    background: #bfbfbf !important;
    bottom: initial !important;
    visibility: visible !important;
    transform: none !important;
    @media (max-width: @screen-xs-max) {
        width: 100%;
        position: relative !important;
        z-index: 1 !important;
    }
    @media (min-width: @screen-sm-min) {
        height: auto !important;
    }
    &-container {
        min-width: 75vw;
        min-height: 60vh;
        @media (max-width: @screen-xs-max) {
            min-height: initial;
            min-width: initial;
        }
        &>.tag-row {
            padding-top: 15px;

            &>div>input {
                width: 100%;
                font-size: 1.2em;
            }
        }
    }
    &-textcontainer {
        height: 42vh;
        @media (max-width: @screen-xs-max) {
            height: 100vh;
        }
    }
    &-onlymobile {
        @media (min-width: @screen-sm-min) {
            display: none;
        }
    }
}

.awge-desktop {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    @media (max-width: @screen-xs-max) {
        padding-top: 55px;
        display: flex;
    }
    &-drag {
        border: 1px dotted red;
        position: absolute;
    }
    &-shortcut {
        text-align: center;
        cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-pointer-small.png) 10 0, pointer;
        display: inline-block;
        margin: 15px;
        width: 110px;
        img {
            display: block;
            margin: 5px auto;
            border-style: none;
            width: 48px;
            height: 48px;
        }
        p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 12px;
            margin: 0;
        }
    }
    /*
    &-computer{
        top: 10px;
        left: 10px;
    }
    &-recycle{
        top: 105px;
        left: 10px;
    }
    &-documents{
        top: 200px;
        left: 10px;
    }
    */
}

.awge-usercard {
    border: 2px solid;
    border-bottom-color: #535353;
    border-right-color: #535353;
    border-left-color: #dbdbdb;
    border-top-color: #dbdbdb;
    background-color: #bfbfbf;
    font-size: 13px;
    padding: 2px !important;
    margin: 0 !important;
    height: auto;

    @media (max-width: @screen-xs-max) {
        width: auto;
    }

    &-title {
        padding: 2px 4px 3px;
        position: relative;
        background-color: #808080;

        &>h1 {
            margin: 0 !important;
            color: #bcbcbc !important;
            font-size: 13px !important;
            font-weight: bold !important;
            line-height: initial !important;
        }
    }
    &-container {
        display: flex;

        @media (max-width: @screen-xs-max) {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        &>div {
            color: black !important;

            &>a {
                color: black !important;
            }
        }
    }
    &-info {
        @media (max-width: @screen-xs-max) {
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
        }

        &>button {
            @media (max-width: @screen-xs-max) {
                position: relative !important;
                right: 0 !important;
                top: 0 !important;
                margin-left: 10px;
            }
        }
    }
    &-statusbar {
        background: #c0c0bf;
    }
}

.awge-chat {
    display: initial !important;
    transform: none !important;
    -webkit-transform: none !important;
    outline: none !important;
    width: auto;
    height: auto;

    @media (max-width: @screen-xs-max) {
        position: relative !important;
        display: block !important;
        height: initial;
    }

    &-container {
        padding: 0px !important;
    }

    &-body {
        padding: 0px !important;

        @media (max-width: @screen-xs-max) {
            height: 70vh !important;
        }
    }

    &-composer {
        &-remaining {
            margin-bottom: 5px;
            margin-right: 25px;
        }
    }
}

.awge-chats {
    width: 45vw;

    @media (max-width: @screen-md-max) {
        width: 60vw;
    }

    @media (max-width: @screen-xs-max) {
        width: 100%;
    }

    &-container {
        display: inherit !important;
    }
}

.header #user_dropdown {
    padding: 0px;
}

.navbar-right {
    @media (min-width: @screen-xs-max) {
        margin-right: 0 !important;
    }
}

.topic h1 {
    line-height: normal;
    margin-bottom: 0;
}

.topic [component="post/header"] .fa {
    margin-top: 0 !important;
}

.awge-profile-container {
    padding: 0;
}

html {
    @media (min-width: @screen-xs-max) {
        overflow-y: hidden;
    }
}

.awge-groups-cover {
    top: 0!important;
    position: initial!important;
}

.container {
    @media (max-width: @screen-xs-max) {
        padding: 0 !important;
    }
}

.awge-spooky {
    opacity: 0;
}

.awge-category-sort {
    background: none;
    border: none;
    color: black;
    padding: 0;
}

.tooltip.bottom {
    margin-top: -3px !important;
    padding: 5px 0;
    top: -26px !important;
}

.tooltip.bottom .tooltip-arrow {
    bottom: 0;
    top: initial !important;
    border-width: 5px 5px 0 !important;
    border-top-color: #000;
    border-bottom-color: transparent !important;
}

a:-webkit-any-link,
button,
select,
input,
.radio label,
.groups.list [component="groups/summary"] .list-cover {
    cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-pointer-small.png) 10 0, pointer;
}

input[type="text"],
textarea {
    cursor: url(https://dwvo2npct47gg.cloudfront.net/images/awge-text-small.png) 10 16, auto;
}

.btn-morph>span {
    margin: 0.5em 0.4em !important;
}

html.composing,
html.composing body {
    @media (max-width: @screen-xs-max) {
        overflow: initial !important;
    }
}

.awge-subcategory {
    margin-bottom: 15px !important;
}

.topic .posts .highlight {
    background: rgba(34, 122, 255, 0.28);
}

.topic .posts {
    transition: background .25s linear;
}

.users-container {
    text-align: center;
}

.category-selector.open {
    position: absolute !important;
    top: 60px !important;
    padding-top: 15px !important;
    height: auto !important;
    width: ~"calc(100vw - 15px)" !important;
    margin: 0 5px !important;
    margin-top: 35px !important;
    margin-bottom: 30px !important;
    box-shadow: none !important;
}

.taskbar {
    display: none !important;
}