/*--------------
   BbCodes.css
--------------*/

@font-face {
    font-family: 'bbcodes';
    src: url('../fonts/bbcodes.ttf?3r54m7') format('truetype'), url('../fonts/bbcodes.woff?3r54m7') format('woff');
    font-weight: normal;
    font-style: normal;
}

.bb-pane {
    align-items: center;
    border: 1px solid rgba(134, 136, 138, 0.28);
    border-radius: 3px 3px 0 0;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -1px;
    padding: 0.25rem;
    justify-content: flex-start;
}

.bb-btn, .bb-sep {
    font-family: 'bbcodes';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bb-btn, .bb-sep {
    align-items: center;
    background-color: rgba(134, 136, 138, 0.28);
    display: inline-flex;
    font-size: 100%;
    justify-content: center;
    opacity: 0.5;
    border-radius: 2px;
    cursor: pointer;
    padding: 0.5rem;
    margin: 0.25rem 0.15rem;
    transition: opacity 0.25s
}

    .bb-btn:hover {
        background-color: rgba(134, 136, 138, 0.28);
        opacity: 1
    }

.bb-sep {
    background-color: transparent;
    font-size: 100%;
    opacity: 0.25;
    cursor: inherit;
    margin: 0.25em -0.25em;
    padding: 0.5rem 0.33rem;
}

    .bb-sep:before {
        content: "/";
        transform: rotate(-20deg);
    }


#b_b:before {
    content: "\ea62"
}

#b_i:before {
    content: "\ea64"
}

#b_u:before {
    content: "\ea63"
}

#b_s:before {
    content: "\ea65"
}

#b_img:before {
    content: "\e927"
}

#b_up:before {
    content: "\e930"
}

#b_emo:before {
    content: "\e9df"
}

#b_url:before {
    content: "\e9cb"
}

#b_leech:before {
    content: "\e98e"
}

#b_mail:before {
    content: "\e945"
}

#b_video:before {
    content: "\e92a"
}

#b_audio:before {
    content: "\e928"
}

#b_hide:before {
    content: "\e9d1"
}

#b_quote:before {
    content: "\e978"
}

#b_code:before {
    content: "\ea80"
}

#b_left:before {
    content: "\ea77"
}

#b_center:before {
    content: "\ea78"
}

#b_right:before {
    content: "\ea79"
}

#b_color:before {
    content: "\e90b"
}

#b_spoiler:before {
    content: "\e984"
}

#b_fla:before {
    content: "\ea5d"
}

#b_yt:before {
    content: "\e912"
}

#b_tf:before {
    content: "\ea73"
}

#b_list:before {
    content: "\e9ba"
}

#b_ol:before {
    content: "\e9b9"
}

#b_tnl:before {
    content: "\ea5c"
}

#b_br:before {
    content: "\ea68"
}

#b_pl:before {
    content: "\ea7d"
}

#b_size:before {
    content: "\ea61"
}

#b_font:before {
    content: "\ea5c"
}

#b_header:before {
    content: "\ea5f"
}

#b_sub:before {
    content: "\ea6a"
}

#b_sup:before {
    content: "\ea69"
}

#b_justify:before {
    content: "\ea7a"
}

.bb-pane-dropdown {
    background-color: #ffffff;
    border: 1px solid rgba(134,136,138,.28);
    border-radius: 0.25em;
    box-shadow: 0 2px 3px 0 rgba(34,36,38,0.15);
    cursor: auto;
    display: none;
    font-size: 1em;
	list-style-type: none;
    margin: 0;
    outline: medium none;
    padding: 0 !important;
    position: absolute;
    text-align: left;
    text-shadow: none;
    top: 100%;
    transition: opacity 0.1s ease 0s;
    will-change: transform,opacity;
    z-index: 1000
}

.story-content .bb-pane ul li {
    list-style-type: none
}

.bb-pane-dropdown > li > a {
    border-top: 1px solid #dddddd;
    color: rgba(0,0,0,0.75);
    display: block;
    line-height: 1.25;
    overflow-wrap: normal;
    padding: 0.5rem 1rem;
    white-space: normal
}

    .bb-pane-dropdown > li > a:hover {
        background-color: rgba(0,0,0,0.05);
        color: rgba(0,0,0,0.95)
    }

.color-palette > div {
    display: flex;
    justify-content: center;
    margin: auto
}

.color-palette .color-btn {
    border: medium none;
    cursor: pointer;
    height: 1.25rem;
    margin: 0.1rem;
    padding: 0;
    width: 1.25rem
}

.emoji {
    border: none;
    vertical-align: middle;
    width: 22px;
    height: 22px
}

.bb-editor textarea {
    margin-bottom: 0;
    margin-top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    width: 100%;
    border: 1px solid rgba(134, 136, 138, 0.28);
    padding: 1em;
    min-height: 10em
}