/*
   Copyright (C) 2021-2023 Leonid Maslakov.

   This file is part of Lenpaste.

   Lenpaste is free software: you can redistribute it
   and/or modify it under the terms of the
   GNU Affero Public License as published by the
   Free Software Foundation, either version 3 of the License,
   or (at your option) any later version.

   Lenpaste is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
   or FITNESS FOR A PARTICULAR PURPOSE.
   See the GNU Affero Public License for more details.

   You should have received a copy of the GNU Affero Public License along with Lenpaste.
   If not, see <https://www.gnu.org/licenses/>.
*/

/* MAIN */
body {
	width: 70%;
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	font-style: normal;
	background-color: #333333;
	font-family: sans-serif;
	font-size: 16px;
	color: #FFFFFF;
}

@media all and (max-device-width: 720px), all and (orientation: portrait) {
	body {
		width: 100%;
	}
}

@media all and (max-device-width: 640px) {
	.header-right {
		display: block;
		width: 100%;
	}
}


/* HEADER */
header {
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
	color: #FFFFFF;
	background: #E88B2E;
}

header h2,
header h4 {
	display: inline;
	margin-right: 15px;
	padding: 0;
}

header div {
	width: 50%;
	display: inline-block;
}

.header-right {
	text-align: right;
}

header h2 a, header h2 a:hover,
header h4 a, header h4 a:hover {
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
}


/* ARTICLE */
article {
	width: 100%;
	box-sizing: border-box;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 20px;
	line-height: 1.5;
	background: #444444;
}


/* CONTAINERS */
.stretch-width {
	width: 100%;
	box-sizing: border-box;	
}

.button-block-right {
	display: flex;
	justify-content: flex-end;
}

.button-block-right button {
	margin-left: 20px;
}

.text-bar {
	display: flex;
	justify-content: start;
	font-family: monospace;
}

.text-bar div {
	width: 50%;
}

.text-bar h1,
.text-bar h2,
.text-bar h3,
.text-bar h4,
.text-bar h5,
.text-bar h6 {
	font-family: sans-serif;
}

.text-bar-right {
	align-self: flex-end;
	text-align: right;
}

.text-bar-right a {
	margin-left: 10px;
}


/* TEXT */
.text-red, .text-red:hover {
	color: #FF1F1F;
}

.text-grey, .text-grey:hover {
	color: #888888;
}


/* OTHER */
:focus-visible {
	outline: 2px solid #3DAEE9;
}

:active {
	outline: 0;
}

h1, h2, h3, h4, h5, h6,
p, pre,
select, label,
button, input,
textarea {
	margin-top: 10px;
	margin-bottom: 10px;
}

h4 {
	margin-top: 40px;
}

pre, textarea {
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	box-sizing: border-box;
	tab-size: 4;
	background-color: #666666;
	padding: 10px;
	border: 2px;
	font-family: monospace;
	font-size: inherit;
	color: inherit;
}

pre {
	overflow: auto;
}

textarea {
	min-height: 100px;
	resize: vertical;
}

label {
	font-family: sans-serif;
}

input::placeholder, textarea::placeholder {
	color: #B9B9B9;
}

input {
	background: #666666;
	font-size: inherit;
	font-family: inherit;
	color: inherit;
	padding: 10px;
	border: 2px;
	overflow-x: scroll;
}

select {
	appearance: none;
	background: #666666;
	color: #FFFFFF;
	font-size: 16px;
	padding: 4px 22px 4px 4px;
	border: 2px;
}

select:hover, input[type="checkbox"]:hover {
	background-color: #777777;
	cursor: pointer;
}

select, select:hover {
	background-image: url("data:image/svg+xml,<svg width='100' height='180' xmlns='http://www.w3.org/2000/svg'><polyline points='10,80 50,110 90,80' style='fill:none;stroke:white;stroke-width:18'/></svg>");
	background-repeat: no-repeat;
	background-position: right 4px center;
	background-size: 10px;
}

label {
	margin-right: 10px;
}

button, select, input, textarea {
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

button {
	 background: #888888;
	 font-size: 16px;
	 padding: 8px 8px 8px 8px;
	 border: 2px;
	 color: #FFFFFF;
}

button:hover {
	background: #999999;
	cursor: pointer;
}

.button-green {
	background: #66CC00;
	color: #FFFFFF;
}

.button-green:hover {
	background: #74D117;
}

.checkbox {
	padding-left: 25px;
}

.checkbox:hover,
.checkbox:hover input {
	cursor: pointer;
}

input[type="checkbox"] {
	position: absolute;
	margin-left: -25px;
	margin-top: 0.1em;
	overflow: hidden;
}

input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><polyline points='20,60 50,80 90,20' style='fill:none;stroke:white;stroke-width:18'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px;
}

ul {
	list-style: square;
}

code {
	background-color: #666666;
	padding: 2px 5px 2px 5px;
	color: inherit;
}

pre code {
	background-color: inherit;
}

details {
	margin-top: 10px;
	margin-bottom: 10px;
}

details summary {
	cursor: pointer;
}

details summary::-webkit-details-marker {
  display:none;
}

details summary {
    list-style-type: none;
	background-image: url("data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><polygon points='0,0 100,50 0,100' style='fill:white'/></svg>");
	background-repeat: no-repeat;
	background-position: left;
	background-size: 10px;
	padding-left: 14px;
}

details[open] summary {
	background-image: url("data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><polygon points='0,0 50,100 100,0' style='fill:white'/></svg>");
}

table {
	background: inherit;
	border-collapse: collapse;
}

th, td {
	text-align: left;
	padding: 10px;
	border: 1px;
	border-style: solid;
	font-size: inherit;
	font-family: inherit;
	color: inherit;
}

.table-hidden td {
	text-align: right;
	padding: 0;
	border: 0;
}

a, a:hover {
	color: #3DAEE9;
}

h1 a, h2 a, h3 a,
h4 a, h5 a, h6 a {
	text-decoration: none;
}