:root {
    --fontsize-body: 1.1em;
    --fontsize-header: 1.1em;
    --fontsize-subscript: 0.7em;
}

/*
@font-face {
    font-family: "ROBOTO_REGULAR";
    src: url('fonts/Roboto-Regular.ttf');
}
*/

body.lightTheme {
    background-color:	#ffffff;
    color:				black;
}

body.darkThemeOLED {
    background-color:   #000;
    color:              #eee;
}

body.darkThemeOLED a:link {
	color:              #0289ff;
}

body.darkThemeOLED a:visited {
    color:              #cd4fff;
}

body.darkTheme {
    background-color:   #212121;
    color:              #ffffff;
}

body.lightTheme a:link,
body.lightTheme a:active,
body.lightTheme a:hover {
    color: #333 !important;
}
body.lightTheme a:visited {
    color: #000 !important;
}
body.darkTheme a:link,
body.darkTheme a:active,
body.darkTheme a:hover {
    color: #dadada !important;
}
body#darkTheme a:visited {
    color: #aeaeae !important;
}


/* For debugging */
/*
* {
    border: 1px solid #F00;
}
*/

body, blockquote, img, iframe, video, div, table, tbody, tr, td, pre, code, blockquote, p, em, b, span {
    width:      auto !important;
    height:     auto !important;
    max-width:  100% !important;
}

span {
    display:    block;
}

body {
    font-size:    var(--fontsize-body);
    font-weight:  normal;
    margin:       0px;
    word-wrap:    break-word !important;
    /* font-family:  'ROBOTO_REGULAR'; */

    margin-left:  1rem;
    margin-right: 1rem;
}

img {
    /* make images fill the whole screen */
    max-width:   calc(100% + 2rem) !important;
    margin-left: -1rem !important;
}

div#content > p {
    margin-top: 0px;
}


pre {
    background-color: #f7f7f7;
    padding: 5px;
    border-radius: 3px;
}

body.darkTheme pre {
    background-color: #313131;
}

body.darkThemeOLED pre {
    background-color: #000;
}

pre span {
    /* fix for https://github.com/nextcloud/news-android/issues/798 */
    display: initial;
}

pre, code, blockquote, p, em, b {
    white-space:	-moz-pre-wrap	!important;
    white-space:	-pre-wrap		!important;
    white-space:	-o-pre-wrap		!important;
    white-space:	pre-wrap		!important;
    word-wrap: 		break-word		!important;
}

blockquote {
    white-space:pre-line !important;
    padding-left: 10px;
    border-left: 3px solid #ccc;
}

a {
    margin-left:    auto !important;
    margin-right:   auto !important;
}

#content table {
    width: 100% !important;

    /* https://www.w3schools.com/cssref/pr_tab_table-layout.asp */
    table-layout: fixed !important;
}

#header {
    font-size:      var(--fontsize-header);
    margin-bottom:  10px;
    font-weight:    bold;
    line-height:    1.6;
}

#header a:link,
#header a:active,
#header a:hover,
#header a:visited {
    color:           #000000 !important;
    text-decoration: none !important;
}

#header.darkTheme a:link,
#header.darkTheme a:active,
#header.darkTheme a:hover,
#header.darkTheme a:visited {
    color: #ffffff !important;
}

#header.darkThemeOLED a:link,
#header.darkThemeOLED a:active,
#header.darkThemeOLED a:hover,
#header.darkThemeOLED a:visited {
    color: #ffffff !important;
}

ul {
    list-style: none;
    padding: 0;
}

ul li:before {
    vertical-align: 18%;
    margin-right:10px;
    border-style: solid;
	border-width: 0.10em 0.10em 0 0;
	content: '';
	display: inline-block;
	height: 0.3em;
	left: 0.15em;
	position: relative;
	top: 0.15em;
	transform: rotate(45deg);
	width: 0.3em;
    /*
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    vertical-align: -10%;
    font-family: "Material Icons";
    content: "\e5cc";
    */
}

#subscription {
    display: flex;
}

#subscription span {
    line-height: 16px;
    display: inline-flex;
    align-items: center;
}

#subscription, #datetime {
    margin-bottom:3px;
    font-size: var(--fontsize-subscript);
}


#header_small_text {
    display: flex;
    justify-content: space-between;
    overflow: auto;
    flex-direction: row;
}

#header_small_text {
    color: #9E9E9E;
}

#top_section {
    margin-top:    1rem;
}

#content {
    margin-top:     0.6rem;
    margin-bottom:  100px;
    line-height:    1.5em !important;
}

#imgFavicon {
    margin-right: 4px;
    vertical-align:middle;
    margin-bottom:2px;
    margin-left: 0px !important;
    width:16px !important;
    height:16px !important;
}
.rtl #imgFavicon {
    margin-right: 0 !important;
    margin-left: 4px !important;
}