/* =========================================================
   REMIX THEME
   Author  : BlackMask
   Version : 1.0
========================================================= */

/* =========================================================
   IMPORTS
========================================================= */

@import url('./font/Roboto.c');

/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
    cursor: url(https://commnuity.magic-hit-radio.de/pfeile/cur1054.cur), auto !important;
}

body {
    font-family: 'Roboto', sans-serif;
    background: #000000;
    color: #0EFFFF;
    margin: 0;
    padding: 0;
}

a {
    color: #0EFFFF;
    text-decoration: none;
}

button {
    background: transparent;
    color: #0EFFFF;
    font-size: 16px;
    font-weight: bold;
    text-shadow: 3px 3px 3px #000;
    border: none;
    cursor: pointer;
}

/* =========================================================
   INPUTS
========================================================= */

input,
textarea,
.post_input_container {
    background: radial-gradient(
        circle farthest-corner at center,
        #020617 30%,
        #020617 100%

    );
   color: yellow;
   font-weight: 600;
   border: 2px solid #0A84FF;
   font-family: '', sans-serif, 'FontAwesome';
}

/* =========================================================
   GENERAL COLORS
========================================================= */

.theme_color,
.setdef,
.user,
.chat_system,
.input_item,
.menui,
.subi {
    color: #0EFFFF;
}

.default_color {
    color: #274293;
}

.error {
    color: #d81818;
}

.success {
    color: #74b20e;
}

.warn {
    color: #f5a91e;
}

/* =========================================================
   BACKGROUNDS
========================================================= */

.bback {
    background: radial-gradient(
        circle farthest-corner at center,
        #0A84FF 0%,
        #00041C 100%
    );
}

.bbackb {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}

.bhover:hover {
    background: rgba(255,255,255,0.05);
}

.bbackhover {
    background: rgba(37, 2, 217, 0.32);
    transition: 0.3s;
}

.bbackhover:hover {
    background: #1605FF;
}

.bbackhoverb {
    background: #1605FF;
}

.bbackhoverb:hover {
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.05);
}

/* =========================================================
   LISTS
========================================================= */

.blisting {
    border-bottom: 1px solid #0A84FF;
}

.blisting:hover {
    background: radial-gradient(
        circle,
        rgba(56,191,255,0.45) 0%,
        rgba(0,0,0,1) 100%
    );
}

.blist {
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

/* =========================================================
   PANELS
========================================================= */

.back_ptop {
    background: radial-gradient(
        circle,
        rgba(56,191,255,0.45) 0%,
        rgba(0,0,0,1) 100%
    );

    color: #0EFFFF;

    font-weight: bold;

    text-shadow: 3px 3px 3px #000;
}

/* =========================================================
   MENUS
========================================================= */

.bpmenu:hover {
    background: radial-gradient(
        circle farthest-corner at center,
        #0A84FF 0%,
        #00041C 100%
    );
}

.bsub {
    background: #000;
}

.bsub:hover {
    background: #1605FF;
}

.bmenu,
.submenu {
    border-bottom: 1px solid #0A84FF;
}

.bmenu:hover,
.submenu:hover {
    background: #0A84FF;
}

/* =========================================================
   SHADOWS
========================================================= */

.bshadow,
.page_element,
.float_menu,
.btnshadow,
.pboxed {
    box-shadow: -1px 1px 20px 1px #0A84FF;
}

/* =========================================================
   SELECTED STATES
========================================================= */

.bselected,
.rselected,
.cselected,
.liked {
    background: rgba(255,255,255,0.08);
}

.pselected {
    color: #FFA500;
}

/* =========================================================
   PAGINATION
========================================================= */

.pag_btn {
    background: rgba(255,255,255,0.05);
}

.pagselected,
.pag_btn:hover {
    background: rgba(255,255,255,0.1);
}

/* =========================================================
   TAGS
========================================================= */

.gtag {
    background: #3b6cff;
    border: 1px solid rgba(255,255,255,0.05);
}

/* =========================================================
   BORDERS
========================================================= */

.tborder {
    border-top: 1px solid rgba(123,134,171,0.15);
}

.lborder,
.ppanel,
.modal_mback,
.topic_log {
border: 3px solid transparent;
text-align:center ;
max-width: 1000px;
margin: 2px auto;
background: rgba(0, 0, 0, 0.45);
box-shadow:
        0 0 8px #0a84ff,
        0 0 15px rgba(10,132,255,0.6);
border: 3px solid #0A84FF;
border-radius: 8px;
    );

    border-image-slice: 1;
}

.rborder {
    border-right: 1px solid rgba(123,134,171,0.15);
}

.fborder {
    border: 1px solid rgba(123,134,171,0.15);
}

.float_top,
.float_ctop {
    border-bottom: 1px solid #0A84FF;
}

/* =========================================================
   HEADERS / FOOTERS
========================================================= */

.bhead,
.bfoot {
    background: radial-gradient(circle farthest-corner at center, #000000 80%, #000000 100%); );
border: 3px solid #0A84FF;
border-radius: 5px 5px 2px 5px / 5px 5px 5px 5px;
    color: #0EFFFF;
}

.modal_top,
.pro_top {
    background: #030f31;
    color: #0EFFFF;
}

.foot {
    color: #0EFFFF;
}

/* =========================================================
   MAIN BACKGROUNDS
========================================================= */

#intro_chat,
.backglob {
    background: #010922
    url('https://commnuity.magic-hit-radio.de/hintergrund-chat-mhr.png');

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.backgloblogin {
    background: #010922;
}

.back_chat,
.back_panel {
    background-color: rgba(0,0,0,0.67);
}

.back_priv {
    background: #010922
    url('https://treffpunkt.magic-hit-radio.de/chat_bild.jpg');

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.back_pmenu,
.back_input {
height: 60px;
 background: radial-gradient(circle farthest-corner at center, #000000 80%, #000000 100%); );
 border: 3px solid #0A84FF;
 border-radius: 0px;

       );

    border-image-slice: 1;
}

/* =========================================================
   MODALS
========================================================= */

.back_modal {
    background: #020617 !important;
    color: #7fdcff !important;

    border: 2px solid #0a84ff !important;
    border-radius: 14px !important;

    font-family: 'Orbitron', Arial, sans-serif;

    text-shadow: 0 0 6px #0a84ff;

    box-shadow:
        0 0 5px #0a84ff,
        0 0 15px #0a84ff;
}

.modal_back {
    background-color: rgba(0,0,0,0.6);
}

.modal_selected {
    background: rgba(41,0,255,0.75);
}

.modal_mborder {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.modal_in {
    border: 1px solid rgba(255,255,255,0.01);
}

/* =========================================================
   CONTENT BOXES
========================================================= */

.page_element,
.back_quote,
.back_menu,
.back_box {
    background: #000000;
    border: 2px solid #0a84ff;
    border-radius: 12px;

    box-shadow: 0 0 8px #0a84ff;

    font-size: 18px;
    font-weight: bold;

    text-shadow: 3px 3px 3px #000;
}

/* =========================================================
   CHAT
========================================================= */

.reply_item {
    background: #0a1b4d;
}

.main_post_item {
    color: #7b87a8;
}

.chat_log:not(:last-child) {
    border-bottom: 1px dashed rgba(255,255,255,0.05);
}

.log2 {
    background: rgba(255,255,255,0.01);
}

/* =========================================================
   PRIVATE CHAT
========================================================= */

.target_private,
.hunt_quote,
.hunter_private,
.targ_quote {
    background: rgba(0,0,0,0.67);

    color: #8EE5EE;

    border-radius: 10px;

    box-shadow: 2px 2px 9px #0A84FF;

    font-size: 18px;
    font-weight: bold;

    font-family: Georgia, serif;

    text-shadow: 3px 3px 3px #000;
}

/* =========================================================
   QUOTES
========================================================= */

.cquote {
    background: rgba(255,255,255,0.08) !important;
}

.cqname {
    color: #fff;
}

.cqmess {
    color: #bbb;
}

/* =========================================================
   TABS
========================================================= */

.tab_menu {
    background: #030f31;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.tab_selected {
    background: rgba(255,255,255,0.05);
}

/* =========================================================
   STATUS
========================================================= */

.offline {
    opacity: 0.5;
}

/* =========================================================
   BUTTONS
========================================================= */

.theme_btn,
.back_theme {
    background: radial-gradient(
        circle farthest-corner at center,
        #0A84FF 30%,
        #00041C 100%
    );

    border: 2px solid #0A84FF;

    color: #0EFFFF;
}

.default_btn,
.back_default,
.ok_btn {
    border: 2px solid #00c8ff;
    border-radius: 25px;

    background: rgba(0,0,0,0.67);

    box-shadow:
        0 0 6px #00c8ff,
        0 0 12px #00c8ff;
}

.defaultd_btn {
    background: #444;
    color: #fff;
}

.warn_btn {
    background: #f5a91e;
    color: #fff;
}

.delete_btn {
    background: #ac3737;
    color: #fff;
}

.send_btn {
    color: #0EFFFF;
}

/* =========================================================
   PROGRESS
========================================================= */

.bprogress {
    background: #74b20e;
    color: #fff;
}

/* =========================================================
   TEXT
========================================================= */

.sub_date,
.sub_chat,
.sub_priv {
    display: none !important;
}

.sub_text,
.list_mood {
    color: #0EFFFF;
    font-family:'Roboto',sans-serif;
    text-shadow: 0 0 8px #0a84ff, 0 0 15px rgba(10, 132, 255, 0.6);
    font-weight: bold;
    font-weight: 800;
}

/* =========================================================
   PROFILE
========================================================= */

.plikes {
    background-color: rgba(100,100,100,0.2);
    color: #fff;
}

/* =========================================================
   SPECIAL ITEMS
========================================================= */

.my_notice {
    color: #0EFFFF;

    font-size: 18px;
    font-weight: bold;

    font-family: Sansita, sans-serif;

    text-shadow: 3px 3px 3px #000;

    background: radial-gradient(
        circle,
        rgba(56,191,255,0.45) 0%,
        rgba(0,0,0,1) 100%
    );
}

.system_text {
    background: rgba(255,255,255,0.05);
    color: #888;
}

/* =========================================================
   PAGE BACKGROUND
========================================================= */

.back_page {
    background: #111;
    color: #fff;
}

/* =========================================================
   VIDEO
========================================================= */

.post_video {
    background: #000;
}

/* =========================================================
   SLIDER
========================================================= */

.boom_slider .ui-widget-content {
    background: #fff;
}

.boom_slider .ui-state-default {
    background: #3b6cff !important;
}

.boom_slider .ui-state-active {
    background: #2a5cf1 !important;
}

.boom_slider .ui-slider-range {
    background: #3b6cff;
}

/* =========================================================
   SELECTBOX
========================================================= */

.selectboxit-list,
.selectboxit-btn {
    border: 1px solid rgba(123,134,171,0.15);
    background: #000;
    color: #fff;
}

.selectboxit-list .selectboxit-focus .selectboxit-option-anchor {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.selectboxit-default-arrow {
    border-top: 4px solid #bbb;
}

.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active {
    background: #000;

    box-shadow: inset 0 0 30px rgba(0,0,0,0.44);

    color: #0EFFFF;

    font-size: 18px;
}

.selectboxit-options {
    background: #0a1b4d;
    color: #fff;
}

.selectboxit-list .selectboxit-option-anchor {
    color: #bbb;
}

/* =========================================================
   NAVIGATION
========================================================= */

nav {
    background: radial-gradient(
        circle farthest-corner at center,
        #0A84FF 0%,
        #00041C 100%
    );

    display: inline-block;

    color: #8EE5EE;

    font-family: Georgia, serif;
    font-size: 18px;
    font-weight: bold;

    text-shadow: 3px 3px 3px #000;
}

nav li {
    margin: 0.1em;
    width: 12em;
    list-style: none;
}

nav a {
    display: block;

    padding: 5px;

    color: #0EFFFF;

    font-weight: bold;

    text-shadow: 3px 3px 3px #000;

    background: radial-gradient(
        circle farthest-corner at center,
        #0A84FF 30%,
        #00041C 100%
    );

    border: 3px solid transparent;

    border-image: radial-gradient(
        circle farthest-corner at center,
        #0A84FF 80%,
        #00041C 100%
    );

    border-image-slice: 1;

    background-color: rgba(0,0,0,0.67);
}

nav a:hover,
nav a:focus,
.nav a:hover {
    background: radial-gradient(
        circle farthest-corner at center,
        #0A84FF 0%,
        #00041C 100%
    );
}

/* =========================================================
   CHAT CLOCK
========================================================= */

.chatclock,
.chatnews {
    display: inline-block;

    margin: 0.1em;

    color: #0EFFFF;

    font-size: 18px;
    font-weight: bold;

    text-shadow: 3px 3px 3px #000;

    background: radial-gradient(
        circle farthest-corner at center,
        #0A84FF 30%,
        #00041C 100%
    );

    border: 3px solid transparent;

    border-image: radial-gradient(
        circle farthest-corner at center,
        #0A84FF 80%,
        #00041C 100%
    );

    border-image-slice: 1;
}

/* =========================================================
   IMAGE EFFECTS
========================================================= */

.img_modifiziert {
    transition: transform 1s;
}

.img_modifiziert:hover {
    transform: scale(1.5);
}

/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: radial-gradient(
        circle farthest-corner at center,
        #0A84FF 0%,
        #00041C 100%
    );

    border: 1px double #0A84FF;
    border-radius: 2px;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes rotate-center {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.acav,
.avatar_private,
.avav,
.chat_avatar {
    animation: rotate-center 0.6s ease-in-out both;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media screen and (max-width: 1200px) {

    .back_panel,
    .back_pmenu {
        background: rgba(0,8,30,0.9);
    }

    nav li {
        width: 100%;
    }
}