:root {
    --max-content-width: 1000px;
    --normal-content-width: 800px;
    --sans-font: "Ubuntu", Helvetica, Verdana, sans-serif;
    --serif-font: "Merriweather", Georgia, Times, serif;
    --block-border-radius: 15px;
    --button-border-radius: 15px;
    --badge-color: rgba(255, 196, 85, .91);
    --bg-color: #fcfdff;
    --opposite-bg-color: #282c35;
    --text-color: #333;
    --brighter-text-color: #000;
    --opposite-text-color: #ddd;
    --block-bg-color: #fff;
    --opposite-block-bg-color: #282c35;
    --block-shadow: 10px 15px 40px rgba(83, 91, 110, .11);
    --block-border: none;
    --link-color: #333;
    --link-hover-color: #000;
    --visited-link-color: #333;
    --button-color: #fff;
    --button-bg-color: #333;
    --button-disabled-bg-color: #ddd;
    --button-border: solid 2px #333;
    --button-hover-color: #333;
    --button-hover-bg-color: #fff;
    --button-hover-border: solid 2px #333;
    --select-color: #333;
    --select-bg-color: #fff;
    --input-color: #000;
    --input-bg-color: #fff;
    --input-border-color: #ddd;
    --input-toolbar-bg: #fff;
    --input-toolbar-button-color: #000;
    --input-link: #7f8c8d;
    --input-selection-color: #d7d4f0
}

.clearfix20 {
    height: 20px
}

.clearfix, .clearfix20 {
    clear: both;
    display: block;
    width: 100%
}

.clearfix {
    height: 0
}

.asl-battle {
    -webkit-font-smoothing: antialiased;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.42;
    text-rendering: optimizeSpeed;
    transition: .5s ease-out
}

.asl-battle .text-body > :first-child {
    margin-top: 0;
    padding-top: 0
}

.asl-battle .text-body dl, .asl-battle .text-body h1, .asl-battle .text-body h2, .asl-battle .text-body h3, .asl-battle .text-body h4, .asl-battle .text-body h5, .asl-battle .text-body p, .asl-battle .text-body ul {
    box-sizing: border-box;
    font-style: normal;
    padding: 0;
    width: 100%
}

.asl-battle .upvote {
    background-color: var(--bg-color);
    border: var(--button-border);
    border-radius: var(--button-border-radius);
    color: var(--text-color);
    cursor: pointer;
    display: inline-block;
    font-size: 140%;
    font-weight: 600;
    padding: 30px 17px 7px;
    position: relative;
    text-decoration: none
}

.asl-battle .upvote-disabled {
    cursor: none;
    padding-bottom: 18px;
    padding-top: 18px;
    pointer-events: none
}

.asl-battle .upvote span {
    font-size: 16px;
    left: 50%;
    position: absolute;
    top: 10%;
    transform: translateX(-50%)
}

.asl-battle .upvote-type-inline.upvote-disabled {
    padding-left: 14px;
    padding-right: 14px
}

.asl-battle .upvote-type-inline {
    border: none;
    font-size: 100%;
    font-weight: 600;
    padding: 3px 9px 4px 20px;
    position: relative;
    top: -2px
}

.asl-battle .upvote-type-inline span {
    left: 35%;
    top: 5%
}

.asl-battle .reply-date {
    font-size: 85%;
    line-height: 24px;
    opacity: .6;
    padding-left: 10px;
    text-decoration: none
}

.asl-battle .comment-title {
    font-size: 160%;
    font-weight: 500;
    padding: 5px 0 3px
}

.asl-battle .comment-header {
    align-content: stretch;
    align-items: stretch;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-bottom: 5px
}

.asl-battle .comment-body {
    box-sizing: border-box;
    max-width: 100%;
    padding-top: 10px;
    text-overflow: ellipsis
}

.asl-battle small {
    font-size: 80%
}

.asl-battle .content {
    margin: 0 auto;
    max-width: var(--normal-content-width);
    padding-left: 20px;
    padding-right: 20px
}

.asl-battle .block-battle {
    background-color: var(--block-bg-color);
    border-radius: var(--block-border-radius);
    box-shadow: var(--block-shadow);
    box-sizing: border-box;
    margin-bottom: 30px;
    padding: 30px;
    transition: .2s ease all;
}

.asl-battle .battle-title {
    color: #fff;
    display: grid;
    font-size: 250%;
    grid-template-columns:minmax(auto, 1fr) 50px minmax(auto, 1fr);
    margin: 50px auto 20px;
    max-width: var(--max-content-width);
    min-height: 140px;
    overflow: hidden;
    padding: 0
}

.asl-battle .battle-title-vs {
    background: #4c98d5;
    background: linear-gradient(108deg, #4c98d5, #4c98d5 49%, #53aa68 50%, #53aa68);
    position: relative
}

.asl-battle .battle-title-vs-text {
    font-size: 70%;
    left: 50%;
    opacity: .7;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%)
}

.asl-battle .battle-title-vs {
    grid-column-end: 3;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: stretch
}

.asl-battle .battle-title-side-a {
    background-color: #4c98d5
}

.asl-battle .battle-title-side-b {
    background-color: #53aa68
}

.asl-battle .battle-title-side-a, .asl-battle .battle-title-side-b {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    font-weight: 500;
    padding: 30px 25px
}

.asl-battle .battle-title-side-a div, .asl-battle .battle-title-side-b div {
    text-align: center;
    width: 100%
}

.asl-battle .battle-title-side-a {
    grid-column-end: 2;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: stretch
}

.asl-battle .battle-title-side-b {
    grid-column-end: 4;
    grid-column-start: 3;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: stretch
}

.asl-battle .battle-title-main .post-actions-line {
    text-align: center
}

.asl-battle .post-actions-line {
    display: flex;
    justify-content: center;
    opacity: .6
}

.asl-battle .post-actions-line-item {
    align-items: center;
    display: flex;
    padding-right: 15px
}

.asl-battle .post-actions-line-item svg {
    margin-right: 5px;
    height: 15px;
    width: 15px;
}

.asl-battle .comment-type-battle .comment-body {
    grid-column-end: 3;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-row-start: 2;
    justify-self: stretch
}

.asl-battle .post {
    margin: 70px auto 0;
    max-width: var(--post-width)
}

.asl-battle .post-upvote {
    grid-column-end: 3;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: end;
    padding-left: 10px
}

.asl-battle .post-layout-block {
    align-items: flex-start;
    display: grid;
    grid-template-columns:minmax(auto, 1fr) min-content;
    grid-template-rows:auto auto auto;
    justify-content: stretch;
    max-width: 100%;
    width: 100%
}

.asl-battle .post-layout-block .post-footer {
    display: flex;
    grid-column-end: 3;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-row-start: 3;
    justify-content: space-between;
    justify-self: stretch;
    padding-top: 20px;
    text-align: left
}

.asl-battle .post-layout-block .text-body {
    grid-column-end: 3;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-row-start: 2;
    justify-self: start;
    padding-top: 30px
}

.asl-battle .post-layout-block .text-body-layout-notitle {
    grid-column-end: 2;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-row-start: 1;
    justify-self: start
}

.asl-battle .post-type-battle {
    margin-top: 30px;
    max-width: 100%;
    width: 100%
}

.asl-battle .post-type-battle-userinfo .reply-date {
    padding-left: 0
}

.asl-battle .post-type-battle .text-body {
    padding-top: 0
}

.asl-battle .text-body p {
    box-sizing: border-box;
    margin-bottom: 1.5em;
    margin-top: 1.5em
}

.asl-battle .text-body-type-comment {
    font-size: 115%;
    letter-spacing: .01rem
}

.asl-battle .text-body-type-comment p {
    margin-bottom: 1.1em;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis
}

.asl-battle .text-body-type-post {
    font-size: 19px;
    letter-spacing: .01rem;
    line-height: 1.67;
    padding-top: 30px
}

.asl-battle .user {
    align-items: center;
    display: flex;
    text-decoration: none
}

.asl-battle .user .user-tiny {
    overflow: hidden;
    text-overflow: ellipsis
}

.asl-battle .user a {
    text-decoration: none
}

.asl-battle .user-small {
    display: grid;
    grid-template-columns:55px auto;
    grid-template-rows:auto auto;
    justify-content: left
}

.asl-battle .user-small .user-name {
    font-weight: 500;
    max-width: 100%;
    overflow: hidden
}

.asl-battle .user-small .user-footer {
    font-size: 90%;
    grid-column-end: 3;
    grid-column-start: 2;
    grid-row-end: 3;
    grid-row-start: 2;
    justify-self: start;
    opacity: .7
}

.asl-battle .user-small .user-info {
    display: inline-block;
    font-size: 110%;
    grid-column-end: 3;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: start;
    max-width: 100%;
    overflow: hidden
}

.asl-battle .user-small .user-avatar {
    display: inline-block;
    grid-column-end: 2;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-row-start: 1;
    justify-self: start;
}

.asl-battle .user-small .user-avatar .sb-avatar {
    height: 42px;
    width: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border-radius: 50%;
    background: #a02f2f;
    color: #fff;
}

.asl-battle .user-small .avatar {
    height: 42px;
    width: 42px;

}

.asl-battle .avatar {
    background-position: 50% 50%;
    background-size: cover;
    box-sizing: border-box;
    min-height: 20px;
    min-width: 20px
}

.asl-battle .post-comments {
    padding-top: 80px
}

.asl-battle .battle-side-a-color {
    color: #4c98d5;
    text-decoration-color: #4c98d5
}

.asl-battle .battle-side-b-color {
    color: #53aa68;
    text-decoration-color: #53aa68
}

.asl-battle .battle-stats-arguments {
    font-size: 180%;
    padding-bottom: 20px;
    padding-top: 10px
}

.asl-battle .battle-stats-arguments strong {
    font-weight: 700
}

.asl-battle .battle-stats-graph {
    border-radius: 15px;
    display: flex;
    height: 10px;
    overflow: hidden
}

.asl-battle .battle-stats .battle-side-a-background {
    background: #4c98d5
}

.asl-battle .battle-stats .battle-side-b-background {
    background: #53aa68
}

.asl-battle .post-comments-list {
    padding-bottom: 40px;
    padding-top: 25px
}

.asl-battle .battle-comment-prefix-side-b {
    color: #53aa68;
    text-align: right
}

.asl-battle .battle-comment-prefix-side-a {
    color: #4c98d5
}

.asl-battle .battle-comment-prefix {
    font-weight: 500;
    opacity: .5;
    position: relative;
    top: .7em
}

.asl-battle .comment-type-battle-side-b {
    background: rgba(83, 170, 104, .3)
}

.asl-battle .comment {
    border-radius: var(--block-border-radius);
    margin-top: 20px;
    padding: 20px;
    position: relative;
    scroll-margin-top: 20px
}

.asl-battle .comment-type-battle {
    display: grid;
    grid-template-columns:min-content minmax(auto, 1fr);
    grid-template-rows:min-content auto 35px;
    justify-content: stretch
}

.asl-battle .comment-type-battle-userinfo {
    grid-gap: 0 6px;
    align-items: center;
    display: flex;
    gap: 0 6px
}

.asl-battle .comment-type-battle .comment-header {
    flex-direction: column
}

.asl-battle .comment-type-battle .comment-header .user-avatar {
    margin-right: 5px
}

.asl-battle .comment-type-battle .comment-header .user-avatar .sb-avatar,
.reply-avatar .sb-avatar{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    color: #fff;
    font-size: 10px;
}

.asl-battle .comment-type-battle .comment-header .user-avatar .sb-avatar {
    background: #3642e1;
}

.reply-avatar .sb-avatar {
    background: #2e7f37;
    width: 26px;
    height: 26px;
    font-size: 12px;
}

.asl-battle .comment-type-battle .comment-header {
    grid-column-end: 3;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: start
}

.asl-battle .comment-type-battle .comment-rating {
    grid-column-end: 2;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: end;
    padding-right: 10px
}

.asl-battle .comment-type-battle-side-b {
    float: right;
    grid-template-columns:minmax(auto, 1fr) min-content;
    max-width: 90%;
    min-width: 50%
}

.asl-battle .comment-type-battle-side-b .comment-rating {
    grid-column-end: 3;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: end;
    padding-left: 10px;
    padding-right: 0
}

.asl-battle .comment-type-battle-side-b .comment-title {
    color: #53aa68
}

.asl-battle .comment-type-battle-side-b .comment-header {
    grid-column-end: 2;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: end;
    text-align: right
}

.asl-battle .comment-type-battle-side-a {
    background: rgba(76, 152, 213, .3)
}

.asl-battle .comment-type-battle-side-a .comment-header {
    grid-column-end: 3;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: start
}

.asl-battle .comment-type-battle-side-a .comment-title {
    color: #4c98d5
}

.asl-battle .formItem {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding: 0 20px
}

.asl-battle .formItem label {
    font-size: 18px;
    margin-bottom: 5px
}

.asl-battle .formItem input, .asl-battle .formItem select, .asl-battle .formItem textarea {
    background-color: transparent;
    border-radius: 5px;
    border-width: 1px;
    box-shadow: none;
    color: #333;
    display: block;
    font-size: 16px;
    height: 100%;
    outline: none;
    padding: 3px 10px
}

.asl-battle .btn {
    background: #333;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    margin: 5px 20px 20px;
    padding: 5px 10px;
    transition: all .2s
}

.asl-battle .btn:hover {
    background: #000
}

.asl-battle .window-success {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 30px auto
}

.asl-battle .window-success h3 {
    margin: 10px 0
}

.asl-battle .window-success p {
    font-size: 16px;
    margin: 0;
    padding: 0
}

.asl-battle .comment-footer-button {
    align-items: center;
    bottom: 20px;
    cursor: pointer;
    display: flex;
    font-size: 90%;
    gap: 5px;
    max-width: 300px;
    padding: 4px 10px 5px;
    position: absolute;
    right: 20px;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.asl-battle .comment-footer-button:hover {
    background-color: var(--opposite-bg-color);
    color: var(--opposite-text-color)
}

.asl-battle .replies {
    padding-bottom: 10px;
    padding-left: 0;
    padding-top: 10px
}

.asl-battle .replies-indent-normal {
    padding-left: 70px
}

.asl-battle .replies .reply {
    display: grid;
    grid-template-columns:35px minmax(auto, 1fr) 50px;
    grid-template-rows:auto auto min-content auto;
    justify-content: start;
    margin: 10px 0 15px;
    padding: 10px 0 10px 10px;
    scroll-margin-top: 20px
}

.asl-battle .replies .reply-header {
    align-content: stretch;
    align-items: stretch;
    align-self: start;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 110%;
    grid-column-end: 3;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: start;
    padding-bottom: 10px
}

.asl-battle .replies .reply-avatar {
    height: 26px;
    margin-right: 5px;
    position: relative;
    top: -2px;
    width: 26px
}

.asl-battle .replies .reply-date {
    font-size: 85%;
    line-height: 24px;
    opacity: .6;
    padding-left: 10px;
    text-decoration: none
}

.asl-battle .replies .reply-rating {
    align-self: start;
    grid-column-end: 4;
    grid-column-start: 3;
    grid-row-end: 4;
    grid-row-start: 1;
    justify-self: end
}

.asl-battle .replies .reply-body {
    font-size: 90%;
    padding-bottom: 5px;
    padding-left: 5px;
    text-overflow: ellipsis;
    word-break: break-word
}

.asl-battle .replies .reply-body, .asl-battle .replies .reply-collapse-stub {
    align-self: start;
    grid-column-end: 4;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-row-start: 2;
    justify-self: stretch
}

.asl-battle .replies .reply .comment-header-author-name {
    font-weight: 500;
    text-decoration: none
}

.asl-battle .text-body {
    color: var(--text-color);
    max-width: 100%;
    position: relative;
    text-overflow: ellipsis;
    word-break: break-word
}

.asl-battle .text-body-type-comment {
    line-height: 1.67
}
