
.articleRow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    max-width: unset;
    background-image: url(/img/bgForElements/articleHeader.jpg);
    background-size: 150%;
    background-position: center;
    gap: 1em;
    border: 2px solid grey;
    border-radius: 0.5em;
    padding: 0.5em 1em;
    filter: drop-shadow(2px 2px 4px black);
}

.mobile .articleRow {
    font-size: 2em;
    margin: 0.5em auto;
    width: 94%;
}

.bigArticleTab	{
    filter: drop-shadow(2px 2px 3px #000000ba) !important;
    background: linear-gradient(0deg, #575046, blanchedalmond) !important;
    box-shadow: inset 0px 0px 2px 2px antiquewhite !important;
    font-weight: bold !important;
    border: 2px solid white !important;
    min-height: unset !important;
}

.mobile .m-font-25 {
    font-size: 2.5em;
}

.mobile .articleTitle {
    font-size: 1.25em !important;
}

.mobile #findArticleForm {
    font-size: 3em !important;
}

.newspaperStatusRow {
    display: grid;
    grid-template-columns: repeat(3,1fr) !important;
    align-items: center;
    gap: 1em;
    font-size: 1.25em;
    justify-items: center;
}

.mobile .newspaperStatusRow {
    font-size: 2.5em;
}

.createNewspaperRow {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    font-size: 1.25em;
}

.modActionRow {
    grid-template-columns: 0.5fr 0.5fr 0.5fr 1fr;
    display: grid;
    gap: 0.5em;
    align-items: center;
    justify-items: center;
}

.mobile .informationForNewPlayers {
    font-size: 2.25em;
}

.mobile .m-font-25 {
    font-size: 2.5em;
}

.mobile .m-font-2 {
    font-size: 2em;
}

.mobile .m-font-3 {
    font-size: 3em !important;
}

.mobile .m-font-1 {
    font-size: 1em !important;
}

.mobile input[type="text"] {
    width: 75%;
}

.mobile select[name="countryId"],
.mobile select[name="articleType"] {
    font-size: 1em !important;
}

.mobile .articleTitleInput {
    font-size: 1em;
    width: 75%;
    text-align: center;
}

.mobile .mobileCheckbox {
    zoom: 3;
}

.articleContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    font-size: 1.25em;
}

.articleContainer .nextPrevArticleCard {
    border: 2px solid grey;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    background: #8080802e;
    align-items: flex-start;
}

.mobile .articleContainer .nextPrevArticleCard {
    font-size: 1.5em;
}

.newspaperDark .informationForNewPlayers {
    background: #afd6fb;
    padding: 10px;
    text-align: center;
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 150%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    color: #002867;
}

.newspaperDark .insideShadowWrapper:hover {
    background-color: #00000040 !important;
    cursor: default !important;
}

.newspaperDark .grid-col-news {
    grid-template-columns: 4em 1fr;
}

.newspaperDark .on {
    opacity: 1 !important;
    display: block !important;
    margin: auto;
}

.mobile .newspaperDark .mobile-font-size-15 {
    font-size: 1.5em;
}

.mobile .newspaperDark .mobile-font-size-08 {
    font-size: 0.8em !important;
}

.newspaperDark .opacity-0 {
    opacity: 0;
}

.newspaperDark .w-25vw {
    width: 25vw;
}

.mobile .newspaperDark .darkTableLookLike {
    font-size: 1em;
}

.mobile .newspaperDark.darkform {
    font-size: 1.25em;
}

.bigArticleTab > #unsubButton,
.bigArticleTab > #voteButton,
.bigArticleTab > #subButton {
    background: unset !important;
    display: flex;
    flex-direction: row;
}

.articleContainer .bigArticleTab {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1em;
    padding: 0.5em 0.75em;
    margin: 0 !important;
    flex-direction: row;
    justify-content: center;
    filter: drop-shadow(2px 2px 4px black) !important;
}

.subsCount {
    background: white;
    border-radius: 0.5em;
    padding: 0.25em;
}

.subVoteButton {
    font-family: 'Open Sans', Arial, sans-serif !important;
    text-transform: uppercase;
    white-space: nowrap;
}

.articleContainer .newspaperStatus {
    border: 2px solid grey;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    background: #0000007d;
    filter: drop-shadow(2px 2px 4px black);
}

.articleContainer .articleHeader {
    background-image: url('/img/bgForElements/articleHeader.jpg');
    background-size: cover;
    background-position: center;
    gap: 1em;
    border: 2px solid grey;
    border-radius: 0.5em;
    padding: 0.75em 0.5em;
    filter: drop-shadow(2px 2px 4px black);
    display: flex;
    align-items: stretch;
    width: -webkit-fill-available;
    justify-items: start;
}

.mobile .articleContainer .articleHeader {
    font-size: 1.5em;
}

.articleContainer #voteDiv {
    position: absolute;
    bottom: 7%;
    right: 1%;
    cursor: pointer;
}

.articleContainer .articleTitle {
    font-size: 1.25em;
    color: white;
    text-align: left;
}

.articleContainer .articleDateAut {
    background: #00000099;
    padding: 0.25em 0.75em;
    border-radius: 0.5em;
}

.articleContainer .testDivblue {
    padding: 1em !important;
    display: flex !important;
    align-items: center;
    gap: 0.5em;
    text-shadow: none;
}

.mobile .articleContainer .testDivblue {
    font-size: 2em;
    padding: 0.5em !important;
}

.articleContainer .newspaperAvatar {
    width: 46px;
    height: 46px;
}

.mobile .articleContainer .newspaperAvatar {
    zoom: 1.5;
}

.articleContainer .testDivred {
    border: 2px solid red;
    border-radius: 0.5em;
    padding: 1em;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: #ff000033;
    gap: 0.5em;
}

.mobile .articleContainer .testDivred {
    font-size: 2em;
}

.articleContainer .articleContent {
    padding: 1em;
    width: -webkit-fill-available;
    word-wrap: break-word;
    text-align:justify;
    word-break: break-word;
}

.mobile .articleContainer .articleContent {
    font-size: 1.25em;
}

.mobile .m-font-2 {
    font-size: 2em;
}

.mobile .articleContent .bbTable {
    font-size: 1.5em;
}

.mobile .articleContainer .bbTable tr:first-child td {
    font-size: 1.25em;
}

.mobile .scale2 {
    scale: 2;
}

.editArticleContainer {
    padding: 1em;
}

.mobile .editArticleContainer {
    font-size: 3em !important;
    padding: 0.5em;
}

.commentsContainer {
    padding: 1em;
    display: flex;
    flex-direction: column;
    border: 1px solid black;
}

.mobile .commentsContainer {
    padding: 0.5em;
    font-size: 3em;
}

.mobile .commentsContainer #mobilePublishBtn {
    padding: 0.5em 1em !important;
    border-radius: 0.25em;
}

/*Article Comments Placeholder */

.commentsContainer #comments>div:nth-child(odd) {
    background: #ffffff21;
    border-radius: 0.5em;
    padding: 0.5em 1em;
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: 70%;
    justify-content: center;
}

.mobile .commentsContainer #comments>div:nth-child(odd) {
    width: 96%;
}

.commentsContainer #comments>div:nth-child(even) {
    background: #ffffff08;
    border-radius: 0.5em;
    padding: 0.5em 1em;
    display: flex;
    flex-direction: row;
    gap: 1em;
    width: 70%;
    justify-content: center;
}

.mobile .commentsContainer #comments>div:nth-child(even) {
    width: 96%;
}

.commentsContainer #comments>div>div:nth-child(2) {
    width: 80%;
    word-break: break-word;
}

.commentsContainer #comments>div>div:nth-child(2)>div:first-child {
    width: unset;
}

.commentsContainer #comments>div>div:nth-child(2)>div:nth-child(2) {
    width: unset;
}

.newspaperAvatar {
    border: 2px solid darkgrey !important;
    border-radius: 0.5em;
}

.bigArticleTab > #subButton,
.bigArticleTab > #unsubButton {
    line-height: unset !important;
    height: unset !important;
}

.bigArticleTab > #subButton:before,
.bigArticleTab > #unsubButton:before {
    padding-right: 0 !important;
}

.newspaperContainer .articlesListGrid {
    display: grid;
    grid-template-columns: 0.25fr 1.5fr 0.5fr;
    justify-items: center;
}

.mobile .newspaperContainer {
    font-size: 2.5em;
}

.mobile .newspaperContainer .articleRow {
    font-size: 1em !important;
}

.mobile .mFont1 {
    font-size: 1em;
}

.mobile .mFont15 {
    font-size: 1.5em;
}

.mobile .scale2 {
    scale: 2;
}

