/* GLOBAL CSS */
html,
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

@font-face {
    font-family: planer;
    src: url('../font/Planer.otf');
}

a,
a:hover,
a:focus {
    text-decoration: none;
}

.basefont {
    font: 15px planer;
}

.bg-main {
    background-color: #222222;
}

.inline-block {
    display: inline-block;
}

.m6 {
    margin: 6px;
}

.mb12 {
    margin-bottom: 12px;
}

.mb25 {
    margin-bottom: 25px;
}

.pd16 {
    padding: 16px;
}

.pb16 {
    padding-bottom: 16px;
}

.pt0 {
    padding-top: 0;
}

.pt7 {
    padding-top: 7px;
}

.pt12 {
    padding-top: 12px;
}

.plr12 {
    padding: 0px 20px;
}

.mt0 {
    margin-top: 0px;
}

.mt10 {
    margin-top: 10px;
}

.mt12 {
    margin-top: 12px;
}

.mt50 {
    margin-top: 50px;
}

.no-resize-x {
    resize: vertical;
}

.no-resize-y {
    resize: horizontal;
}

.pd10,
.tpd10 td {
    padding: 10px;
}

.fs10 {
    font-size: 10px;
}

.fs12 {
    font-size: 12px;
}

.fs15 {
    font-size: 15px;
}

.fs18 {
    font-size: 18px;
}

.fs24 {
    font-size: 24px;
}

.fs66,
.mid-icon {
    font-size: 66px;
}

.nowrap {
    white-space: nowrap;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

.bold {
    font-weight: bold;
}

.break {
    display: block;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.inline {
    display: inline;
}


.font-big {
    font-size: 16px;
}

.no-overflow {
    overflow: hidden;
}

.invisible {
    visibility: hidden;
}

.max-size {
    width: 100%;
    height: 100%;
}

.body-table td {
    vertical-align: top;
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.red {
    color: #FF0000;
}

a.hide-link {
    text-decoration: none;
    color: inherit;
}

.center-div {
    display: block;
    position: absolute;
}

.center-div.top {
    top: 50%;
}

.center-div.left {
    left: 50%;
}

a.unlink {
    color: white;
}

/* HEAD AREA */
#main-navigation {
    top: 0px;
    background-color: #222222;
    margin: 0px;
    width: 100%;
    padding: 0px 4%;
    vertical-align: middle;
    color: white;
    z-index: 99;
    user-select: none;
}

table.middle td {
    vertical-align: middle !important;
}

#main-navigation li.title {
    color: white;
    font-weight: bold;
    margin-left: 10px;
    font-size: 11px;
}

.navbar-right .dropdown-menu.user {
    width: 200px;
}

#nav-login .input-group-addon {
    width: 90px;
}

#logo {
    border: 1px solid white;
    border-radius: 10px;
    font: 26px planer;
    text-align: center;
    padding-top: 2px;
    margin: 8px 75px 0px 0px;
    width: 166px;
}

td#news-page .og-whitebox>img,
td#news-page .og-whitebox .html-preview img {
    width: 75px;
}

td#news-page .og-whitebox .html-preview .text-camel {
    text-transform: capitalize;
}

.lfloat {
    float: left;
}

.rfloat {
    float: right;
}

.flex {
    display: flex;
}

#logo:hover {
    background-color: white;
    color: #222222;
}

#main-navigation nav {
    background-color: #222222;
    border: 0px;
}

#main-navigation-inner ul.nav>li>a {
    color: white;
}

#main-navigation-inner ul.nav>li>a:active,
#main-navigation-inner ul.nav>li>a:hover,
#main-navigation-inner ul.nav>li>a:focus,
#main-navigation-inner ul.nav>li.open>a,
#main-navigation-inner ul.nav>li.open>a:active,
#main-navigation-inner ul.nav>li.open>a:hover,
#main-navigation-inner ul.nav>li.open>a:focus {
    background-color: gray;
}

#main-navigation .form-group {
    min-width: 290px;
    width: auto;
    margin: 0px 5px 6px 5px;
}

#main-navigation .button-area {
    margin: 0px 5px;
    text-align: center;
}

#main-navigation .button-area .btn {
    width: 49%;
}

#main-navigation li .glyphicon {
    float: right;
}

/* END HEAD 
 * CONTENT AREA */
.body {
    width: 100%;
    font-size: 12px;
    padding: 12px;
    padding-bottom: 39px;
    /* FOOTER 27+12 */
}

.body-table {
    width: 100%;
}

.page>div.row {
    margin: 0px;
}

.bar-right {
    position: relative;
    background-color: #615f8b;
    border-radius: 10px 0px 0px 10px;
    float: right;
    width: 210px;
    margin-right: -27px;
}

div#cookiebar {
    border-bottom: 1px dotted;
}

.footer {
    height: 27px;
    width: 100%;
    background-color: #222222;
    text-align: center;
    color: white;
    padding-top: 7px;
    bottom: 0px;
    position: fixed;
}

.footer td.privacy,
.footer td.impress {
    width: 15%;
}

.content>div {
    float: left;
}

.message-layer {
    position: fixed;
    top: 10%;
    left: 50%;
    width: 500px;
    z-index: 1000;
    margin-left: -250px;
}

#news-page .panel {
    max-height: 250px;
}

#news-page .panel .panel-info-line {
    border: 1px solid #222222;
    border-bottom: 0px;
    border-top-right-radius: 5px;
    font: 12px arial;
    color: white;
    background-color: #222222;
    padding: 2px 10px 1px;
    vertical-align: middle;
}

#news-page .panel .panel-info-line p {
    display: block;
    float: right;
}

/* BANNER START */
#main-banner {
    position: relative;
    color: white;
    user-select: none;
}

#main-banner .holder {
    vertical-align: top;
    padding: 15px;
    background-color: #222222;
    border-radius: 0px 0px 25px 25px;
}

#main-banner img {
    max-height: 60px;
    vertical-align: top;
}

#main-banner .info {
    text-align: left;
    padding-left: 10px;
    min-width: 250px;
    width: 250px;
}

#main-banner .info .title {
    font-weight: bold;
    font-size: 16px;
}

/* BANNER END */

/* BANNER TITLES START */
#main-banner-title {
    padding: 10px 40px 10px 30px;
}

#main-banner-title h1 {
    margin: 0px;
    padding: 0px;
    font-size: 12px;
    font-weight: bold;
}

/* BANNER TITLES END */

/* SOCIAL START */
#main-banner .wing {
    background-color: #222222;
    vertical-align: top;
    display: inline-block;
    height: 30px;
}

#main-banner .wing a,
#main-banner .wing a:active,
#main-banner .wing a:visited,
#main-banner .wing a:focus {
    color: white;
}

#main-banner .wing a:not(:first-of-type) {
    margin-left: 8px;
}

#main-banner .wing img.wot {
    width: 11px
}

#main-banner #main-banner-left {
    margin-right: -4px;
    border-bottom-left-radius: 100px;
    padding: 5px 10px 5px 20px;
}

#main-banner #main-banner-right {
    border-bottom-right-radius: 100px;
    padding: 5px 20px 5px 10px;
    margin-left: -4px;
}

/* SOCIAL END */


ol.list-mt8 li {
    margin-top: 8px;
}

/* Account */
#account-registration {
    max-width: 800px;
    margin-bottom: 45px;
    min-width: 320px;
}

li.banned.red {
    padding: 3px 20px;
    margin-bottom: 15px;
}

/* End Account */


/* Image Selector */
.image-selector>img {
    cursor: pointer;
    width: 75px;
    display: inline-flex;
}

/* Read More */
.article {
    margin-bottom: 3rem;
    position: relative;
    *zoom: 1;
}

.article:before,
.article:after {
    content: "";
    display: table;
}

.log-entry input[type=checkbox] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
}

.readmore {
    position: absolute;
    bottom: -3rem;
    left: 0;
    width: 100%;
    text-align: center;
    padding: .65rem;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.1), inset -1px -1px rgba(0, 0, 0, 0.1);
}

.readmore:hover {
    background: rgba(0, 0, 0, .5);
    color: rgb(255, 255, 255);
}

input[type=checkbox]:checked~.section,
input[type=checkbox]:checked~.spoiler-hidden-content {
    display: block;
    visibility: visible;
    width: 100%;
}

.section.log-text,
.spoiler-hidden-content,
.readmore span:last-of-type,
input[type=checkbox]:checked~.readmore span:first-of-type {
    display: none;
    visibility: hidden;
}

input[type=checkbox]:checked~.readmore span:last-of-type {
    display: block;
    visibility: visible;
}

.article label.readmore {
    margin-bottom: -5px;
}

table.section.log-title {
    width: 100%;
    font-weight: bold;
    display: table !important;
}

table.section.log-title .title {
    text-align: right;
}

.log-text {
    margin-top: 15px;
}

/* End Read More */

.wizard,
.tabcontrol {
    display: block;
    width: 100%;
    overflow: hidden;
}

.wizard a,
.tabcontrol a {
    outline: 0;
}

.wizard ul,
.tabcontrol ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.wizard ul>li,
.tabcontrol ul>li {
    display: block;
    padding: 0;
}

/* Accessibility */
.wizard>.steps .current-info,
.tabcontrol>.steps .current-info {
    position: absolute;
    left: -999em;
}

.wizard>.content>.title,
.tabcontrol>.content>.title {
    position: absolute;
    left: -999em;
}

.wizard>.steps {
    position: relative;
    display: block;
    width: 100%;
}

.wizard.vertical>.steps {
    display: inline;
    float: left;
    width: 30%;
}

.wizard>.steps .number {
    font-size: 1.429em;
}

.wizard>.steps>ul>li {
    width: 33.33%;
}

.wizard>.steps>ul>li,
.wizard>.actions>ul>li {
    float: left;
}

.wizard.vertical>.steps>ul>li {
    float: none;
    width: 100%;
}

.wizard>.steps a,
.wizard>.steps a:hover,
.wizard>.steps a:active {
    display: block;
    width: auto;
    margin: 0 0.5em 0.5em;
    padding: 1em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard>.steps .disabled a,
.wizard>.steps .disabled a:hover,
.wizard>.steps .disabled a:active {
    background: #eee;
    color: #aaa;
    cursor: default;
}

.wizard>.steps .current a,
.wizard>.steps .current a:hover,
.wizard>.steps .current a:active {
    background: #2184be;
    color: #fff;
    cursor: default;
}

.wizard>.steps .done a,
.wizard>.steps .done a:hover,
.wizard>.steps .done a:active {
    background: #9dc8e2;
    color: #fff;
}

.wizard>.steps .error a,
.wizard>.steps .error a:hover,
.wizard>.steps .error a:active {
    background: #ff3111;
    color: #fff;
}

.wizard>.content {
    background: #eee;
    display: block;
    margin: 0.5em;
    min-height: 35em;
    overflow: hidden;
    position: relative;
    width: auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard.vertical>.content {
    display: inline;
    float: left;
    margin: 0 2.5% 0.5em 2.5%;
    width: 65%;
}

.wizard>.content>.body {
    float: left;
    position: relative;
    width: 95%;
    height: 95%;
    padding: 2.5%;
}

.wizard>.content>.body ul {
    list-style: disc !important;
}

.wizard>.content>.body ul>li {
    display: list-item;
}

.wizard>.content>.body>iframe {
    border: 0 none;
    width: 100%;
    height: 100%;
}

.wizard>.content>.body input {
    display: block;
    border: 1px solid #ccc;
}

.wizard>.content>.body input[type="checkbox"] {
    display: inline-block;
}

.wizard>.content>.body input.error {
    background: rgb(251, 227, 228);
    border: 1px solid #fbc2c4;
    color: #8a1f11;
}

.wizard>.content>.body label {
    display: inline-block;
    margin-bottom: 0.5em;
}

.wizard>.content>.body label.error {
    color: #8a1f11;
    display: inline-block;
    margin-left: 1.5em;
}

.wizard>.actions {
    position: relative;
    display: block;
    text-align: right;
    width: 100%;
}

.wizard.vertical>.actions {
    display: inline;
    float: right;
    margin: 0 2.5%;
    width: 95%;
}

.wizard>.actions>ul {
    display: inline-block;
    text-align: right;
}

.wizard>.actions>ul>li {
    margin: 0 0.5em;
}

.wizard.vertical>.actions>ul>li {
    margin: 0 0 0 1em;
}

.wizard>.actions a,
.wizard>.actions a:hover,
.wizard>.actions a:active {
    background: #2184be;
    color: #fff;
    display: block;
    padding: 0.5em 1em;
    text-decoration: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.wizard>.actions .disabled a,
.wizard>.actions .disabled a:hover,
.wizard>.actions .disabled a:active {
    background: #eee;
    color: #aaa;
}


.bar-right .box {
    text-align: center;
    font-size: 16px;
    padding-top: 12px;
    margin: 0px 10px 10px 10px;
}

.bar-right .box:not(:first-child) {
    border-top: 1px solid white;
}

.bar-bottom a,
.bar-bottom a:hover,
.bar-right a,
.bar-right a:hover {
    color: white;
    text-decoration: none;
}

.bar-right .box i {
    font-size: 20px;
}

.repository {
    border: 1.5px solid #e5e5e5;
    border-radius: 4px 4px 0 0;
    background-color: #f8f8f8;
}

.repository table {
    margin-bottom: 0px !important;
}

.repository th,
.repository td {
    padding: 5px 10px;
}

.repository th .description {
    margin-left: 5px;
}

.repository td {
    background-color: white;
}

.repository td .button {
    display: inline-block;
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
    height: 100%;
    background-color: green;
    width: 50px;
    color: white;
    cursor: pointer;
}

.repository td .button p {
    position: relative;
    margin-top: calc(50% - 7px);
}

.bs-example {
    margin-right: 0;
    margin-left: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    padding: 45px 15px 15px;
    margin: 0 -15px 15px;
}

.og-whitebox {
    background: #ffffff;
    overflow: auto;
    padding: 20px;
    margin-bottom: 25px;
    border: 1px solid #e7eaec;
    min-height: 100px;
}

.og-whitebox>img,
.og-whitebox>div.mini-logo,
.og-whitebox .html-preview img,
.og-whitebox .html-preview div.mini-logo {
    display: inline-block;
    float: left;
    vertical-align: top;
    padding: 5px;
    background-color: #615f8b;
    border-radius: 5px;
    margin-right: 15px;
    color: white;
}

.bar-bottom {
    position: fixed;
    background-color: #615f8b;
    padding: 10px 0px 0px 15px;
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    left: 0px;
    bottom: 27px;
}

.bar-bottom .box {
    position: relative;
    float: left;
    display: inline;
    width: 58px;
}

.bar-bottom .box .fa {
    vertical-align: middle;
    margin-top: -12px;
}

.mobile.bar-bottom,
.bar-bottom .box span {
    display: none;
}

@media screen and (max-width:1500px) {
    @media screen and (max-width:991px) {
        .no-tablet {
            display: none;
        }

        @media screen and (max-width:870px) {
            .repository td.users {
                display: none;
            }

            .mobile.bar-bottom {
                display: flex;
            }

            @media screen and (max-width:767px) {
                .no-mobile {
                    display: none;
                }

                .body-table {
                    margin-bottom: 80px;
                }

                .center-div {
                    left: 0px !important;
                    margin-left: 15px !important;
                    margin-right: 15px !important;
                }

                .navbar-collapse {
                    background-color: white;
                    border: 1px solid black !important;
                    border-top: 0px;
                    border-radius: 0px 0px 10px 10px;
                }

                .message-layer {
                    width: 90%;
                    left: 10px;
                    margin-left: 0px;
                }

                .navbar-default .navbar-collapse {
                    position: absolute;
                    z-index: 4;
                    width: 100%;
                }

                .navbar-default .navbar-collapse li a:hover {
                    background-color: #e7e7e7;
                }

                /* Forums */
                .forum-info {
                    margin: 15px 0 10px 0;
                    display: none;
                }
            }
        }
    }
}

@media screen and (min-width:768px) {
    .mobile {
        display: none;
    }

    .navbar-default .navbar-nav>li>a,
    .navbar-default .navbar-nav>li>a:focus {
        color: white;
    }

    .navbar-default .navbar-nav>li>a:hover,
    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar-default .navbar-nav>.active>a:focus {
        background-color: white;
        color: black;
    }

    #account-registration {
        width: 100%;
    }

    /* Forum markdown */
    .forum-modal .modal-dialog {
        width: 80%;
    }
}

/* BG Colors */
.bgc-base {
    background-color: #222222 !important;
}

.bgc-black {
    background-color: black !important;
}

.bgc-white {
    background-color: white !important;
}