.font24{
    font-size:1.5em
}
.font22{
    font-size:1.375em
}
.font20{
    font-size:1.25em
}
.font18{
    font-size:1.125em
}
.font16{
    font-size:1em
}
.font14{
    font-size:.875em
}
.font12{
    font-size:.75em
}
.font10{
    font-size:.625em
}
.c-black{
    color:#000
}
.c-red{
    color:#b00
}
.c-white{
    color:#fff
}
.c-primary-color{
    color:#166DCC
}
.c-secondary-color{
    color:#2E496E
}
.bg-black{
    background-color:#000
}
.bg-red{
    background-color:#b00
}
.bg-white{
    background-color:#fff
}
.bg-primary-color{
    background-color:#166DCC
}
.bg-secondary-color{
    background-color:#2E496E
}
.gray5{
    color:#f2f2f2
}
.gray10{
    color:#e5e5e5
}
.gray15{
    color:#d9d9d9
}
.gray20{
    color:#ccc
}
.gray25{
    color:#bfbfbf
}
.gray30{
    color:#b2b2b2
}
.gray35{
    color:#a6a6a6
}
.gray40{
    color:#999
}
.gray45{
    color:#8c8c8c
}
.gray50{
    color:gray
}
.gray55{
    color:#737373
}
.gray60{
    color:#666
}
.gray65{
    color:#595959
}
.gray70{
    color:#4d4d4d
}
.gray75{
    color:#404040
}
.gray80{
    color:#333
}
.gray85{
    color:#262626
}
.gray90{
    color:#1a1a1a
}
.bg-gray5{
    background-color:#f2f2f2
}
.bg-gray10{
    background-color:#e5e5e5
}
.bg-gray15{
    background-color:#d9d9d9
}
.bg-gray20{
    background-color:#ccc
}
.bg-gray25{
    background-color:#bfbfbf
}
.bg-gray30{
    background-color:#b2b2b2
}
.bg-gray35{
    background-color:#a6a6a6
}
.bg-gray40{
    background-color:#999
}
.bg-gray45{
    background-color:#8c8c8c
}
.bg-gray50{
    background-color:gray
}
.bg-gray55{
    background-color:#737373
}
.bg-gray60{
    background-color:#666
}
.bg-gray65{
    background-color:#595959
}
.bg-gray70{
    background-color:#4d4d4d
}
.bg-gray75{
    background-color:#404040
}
.bg-gray80{
    background-color:#333
}
.bg-gray85{
    background-color:#262626
}
.bg-gray90{
    background-color:#1a1a1a
}

.token.punctuation{
    color:#999
}
.namespace{
    opacity:.7
}
.token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{
    color:#905
}
.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{
    color:#690
}
.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{
    color:#a67f59;
    background:rgba(255,255,255,0.5)
}
.token.atrule,.token.attr-value,.token.keyword{
    color:#07a
}
.token.function{
    color:#DD4A68
}
.token.regex,.token.important,.token.variable{
    color:#e90
}
.token.important,.token.bold{
    font-weight:bold
}
.token.italic{
    font-style:italic
}
.token.entity{
    cursor:help
}
*{
    box-sizing:border-box
}


.language{
    width:110px;
    height:30px;
    font-size:14px;
    line-height:1;
    margin:1em 0
    display: flex;
    align-items: right;
    margin-right: 0.5rem;

}
.language__container--left,.language__container--right{
    position:relative;
    float:left;
    width:55px;
    height:30px;
    padding:5px
}
.language__label{
    position:absolute;
    top:0;
    left:0;
    width:55px;
    height:30px;
    border:1px solid #ccc;
    padding:7px 8px 5px 0;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:7px 7px;
    background-size:14px;
    text-align:right;
    text-transform:uppercase
}
.language__container--left .language__label{
    border-radius:4px 0 0 4px
}
.language__container--right .language__label{
    border-left:0;
    border-radius:0 4px 4px 0
}
.language__control:hover+.language__label,.language__control:focus+.language__label{
    background-color:#eee
}
.language__control:checked+.language__label{
    background-color:#ddd
}
.language__control:focus+.language__label,.language__control:checked:focus+.language__label{
    z-index:2;
    outline:2px solid #85bffd;
    box-shadow:0 0 8px #85bffd
}
.language__container--en .language__label{
    background-image:url("https://ojsbr.com.br/assets/images/bandeiras/ingles.png")
}
.language__container--es .language__label{
    background-image:url("https://ojsbr.com.br/assets/images/bandeiras/espanha.png")
}