/*
* Styles for static pages
*/

.static-text-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 12000;
background: var(--settings-bg-color);
height: 60vh;
width: 800px;
display: flex;
flex-direction: column;
}

.static-text-arrow {
position: relative;
display: block;
text-align: center;
width: 100%;
height: 2.4em;
line-height: 2.4em;
flex: none;
cursor: pointer;
background-color: var(--settings-bg-header-color);
}

.static-text-button {
display: inline-block;
height: 2.4em;
width: 2.4em;
background-position: center;
background-repeat: no-repeat;
background-size: 2.4em 2.4em;
filter: var(--settings-bg-header-filter);

}

.static-text-up-button {
background-image: url("/svg/move-up.svg");
}

.static-text-down-button {
background-image: url("/svg/move-down.svg");
}

.static-text {
min-height: 0;
flex-grow: 1;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
height: 100%;
}

.static-text-button2 {
display: block;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
width: 2.4em;
height: 2.4em;
background-position: center;
background-repeat: no-repeat;
background-size: auto;
background-image: url("/svg/close.svg");
filter: var(--settings-bg-header-filter);
}

.static-text-button2:hover {
background-color: var(--settings-bg-header-hover-color);
}


@media screen and (max-width: 1024px) {
.static-text-window {
width: 600px;
}
}

@media screen and (max-width: 768px) {
.static-text-window {
width: 480px;
}
}

@media screen and (max-width: 560px) {
.static-text-window {
width: 90vw;
}
}

@media screen and (max-height: 768px) {
.static-text-window {
height: 64vh;
}
}

@media screen and (max-height: 640px) {
.static-text-window {
height: 68vh;
}
}

@media screen and (max-height: 480px) {
.static-text-window {
height: 70vh;
}
}




.static-html {
padding: 1.32em 0.92em 2.32em 0.92em;
}

.static-html h1 {
margin: 0.52em auto 1.2em auto;
text-align: center;
font-weight: bold;
font-size: 1.32em;
line-height: 1.4em;
}

.static-html h2 {
margin-top: 2.32em;
text-align: left;
font-weight: bold;
font-size: 1.12em;
text-indent: 1.6em;
line-height: 1.4em;
}

.static-html p {
clear: both;
line-height: 1.6em;
text-indent: 1.6em;
}

.static-html p.nti {
text-indent: 0;
}

.static-html ul {
line-height: 1.6em;
padding-left: 0;
list-style-position: inside;
}

.static-html li {
margin: 0.4em 0;
text-indent: 1em;
}

.static-html img.icon {
float: left;
margin: 0 1em 0 1em;
}

.static-html a {
text-decoration: none;
color: var(--link-color);
}

.static-html a:visited {
color: var(--link-color);
}

.static-html a:hover {
text-decoration: underline;
}


@media screen and (max-width: 420px) {
.static-html {
padding-left: 0.72em;
padding-right: 0.72em;
}
}

@media screen and (max-width: 360px) {
.static-html {
padding-left: 0.52em;
padding-right: 0.52em;
}
}