:root {
    --blue: #0063AF;
    --white: Snow;
    /* --white: Red; */
    --black: Black;
    --text-font: 'Noto Sans', 'noto', Helvetica, Arial, sans-serif;
    --tibet-font: 'tibetan';
    --width: 60rem;
    --left-width: 15rem;
    --top-height: 4.5rem;
}
:root {
    --all-background-color: var(--white);
    --border-background-color: var(--blue);
    --border-foreground-color: var(--white);
    --header-background-color: var(--border-background-color);
    --header-foreground-color: var(--border-foreground-color);
    --main-background-color: var(--white);
    --main-foreground-color: var(--blue);
    --logo-background-color: var(--main-background-color);
    --logo-foreground-color: var(--main-foreground-color);
    --seal-background-color: var(--border-foreground-color);
    --seal-foreground-color: var(--border-background-color);
    --nav-background-color: none;
    --nav-foreground-color: none;
    --link-color: var(--blue);
}
#seal {
    display: block;
    /* height: 100% */
    /* Das macht es in Safari zu hoch */
}
div.left.logo {
    background-color: var(--white);
}
div.img {
    background-color: var(--white);
}
svg .fill-foreground {
    fill: var(--blue);
}
svg .stroke-small {
    fill: none;
    stroke: var(--blue);
    stroke-width: 1.5;
}
svg .stroke-big {
    fill: none;
    stroke: var(--blue);
    stroke-width: 3.5;
}
svg {
    width: 100%;
    height: auto;
}
span.beleg-all {display: block; margin-bottom: .25em;}
@font-face {
    font-family: "TibetanMachineUnicode";
    src: url("/fonts/TibetanMachineUnicodeWTS.otf");
}
html {
    height: 100%;
    width: 100%;
    margin: 0rem;
    padding: 0rem;
}
body {
    overflow-x: hidden;
    overflow-y: scroll;
    font-family: "Noto Sans", "Calibri", sans-serif;
    background-color: var(--white);
}
div.page-container {
    width: 100%;
    justify-content: center;
}
div.page {
    /* height: 100%; */
    /* Macht Probleme in Safari. */
    width: var(--width);
    flex-shrink: 1;
}
.left {
    width: var(--left-width);
    flex-shrink: 0;
}
div.header-row {
    position: fixed;
    height: var(--top-height);
    width: var(--width);
    flex-shrink: 1;
    z-index: 3;
}
div.left.logo {
    position: relative;
    z-index: 4;
}
#badw-link {
    /* height: 100%; */
    /* Das macht es in Safari zu hoch */
}
div.title-row {
    box-shadow: 0rem .3rem .3rem grey;
}
div.main.left {
    position: fixed;
    padding-top: var(--top-height);
    height: 100%;
    z-index: 2;
    box-shadow: .3rem .3rem .3rem grey;
}
.main.content {
    margin-left: var(--left-width);
    margin-top: var(--top-height);
    padding-top: 2.5rem;
    /* padding-left: 18rem; */
    /* padding-right: 5rem; */
    /* padding-bottom: 12rem; */
}
div.header.right {
    background-color: var(--blue);
    color: var(--white);
    padding-left: 1.5rem;
}
div.title, div.login {
    justify-content: center;
}
div.login {
    max-width: 12rem;
}
h1 {
    font-size: 1.5em;
}
h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1.2em;
}
h3 {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 1em;
}
li {
    padding-left: 1.2em;
    text-indent: -1.2em;
}
table tr {
    vertical-align: top;
}
td.textallg {
    max-width: 30rem;
}
a.title, a.login {
    color: inherit;
}
a {
    text-decoration: none;
    color: var(--blue);
}
span.link, span.lemlink {
    color: var(--blue);
}
div.main.left {
    background-color: var(--blue);
    color: var(--white);
}
div.main.nav {
    background-color: none;
    color: none;
    /* padding: .75rem; */
    padding: 0rem;
}
div.navigation {
    width: 100%;
    padding: 1.5rem;
    padding-top: 2.5rem;
}
div.main.content {
    background-color: var(--white);
    overflow-x: hidden;
}
div.text {
    padding-bottom: 12rem;
    padding-left: 2rem;
    padding-right: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* align-items: center; */
}
div.text p, div.text form {
    max-width: 40rem;
    width: 90%;
}
s {
    text-decoration: none;
}
sc {
    font-variant: small-caps;
}

.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-column {
    display: flex;
    flex-direction: column;
}
header {
    flex-shrink: 0;
}
.main-row {
    flex-grow: 1;
}
.main.nav {
    flex-grow: 0;
}
.right {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 1;
}
.title-row {
    flex-grow: 1;
}
.login-box {
    padding: .75rem;
    flex-grow: 1;
    justify-content: flex-end;
}
.login {
    text-align: center;
}
.lemma-row {
    width: 100%;
}
.lemma-head {
    flex-grow: 1;
}
.selector-row {
    padding: 1em;
}

form .flex-row {
    flex-grow: 1;
    text-align: left;
}
form .form-left {
    width: 7.5em;
    flex-grow: .1;
    flex-shrink: 0;
    margin: .2em;
}
form .form-right {
    width: 12em;
    flex-grow: .1;
    margin: .2em;
}
form input.form-input {
    width: 100%;
}
form input.form-submit {
    margin-top: .25em;
    margin-bottom: .25em;
}
input[type="submit"] {
    background-color: var(--white);
    border-color: var(--white);
}
label {
    font-weight: bold;
}
input[type="text"], input[type="password"] {
    padding: .2em;
    border-color: LightGrey;
}
input[type="text"]:focus, input[type="password"]:focus {
			      box-shadow: .1em .1em .1em Grey inset;
			  }

.info {
    position: relative;
    <!-- display: inline-block; -->
				font-size: inherit;
    text-indent: 0px;
}
.infotext {
    visibility: hidden;
    overflow: visible;
    background-color: white;
    color: black;
    text-align: left;
    font-size: small;
    border: 1px solid DimGrey;
    padding: 6px;
    padding-bottom: 6px;

    position: absolute;
    z-index: 1;
}
.info:hover > .infotext {
    visibility: visible;
}
.textsiglum.info.bibliographie, .abk.info {
    display: inline;
}
.textsiglum.info > .infotext {
    min-width: 220px;
    max-width: 320px;
}
.bibl.info > .infotext {
    width: 220px;
    max-height: 120px;
    overflow: auto;
}
span.beleg.stelle, span.beleg.metr {
    white-space: nowrap;
}
.textsiglum.info > .infotext {
    white-space: normal;
}
.abk.info > .infotext {
    white-space: nowrap;
}
div.lemma-head{
    display: block;
    margin-bottom: .6em;
    line-height: 2em;
}
span.lemma {
    font-size: 150%;
}
span.lem {
    font-style: italic;
    padding-right: 6pt;
}
span.tibetan {
    font-family: "TibetanMachineUnicode";
    font-size: 200%;
    position: relative;
    top: -.25em;
}
span.lemtib {
    font-family: "TibetanMachineUnicode";
    font-size: 200%;
    position: relative;
    top: -.25em;
    padding-right: .25em;
}
span.zusatz {
    margin-bottom: .6em;
    padding-right: 6pt;
}
div.bedeutung {
    margin-top: .6em;
    margin-bottom: .6em;
}
span.bedeutungsnummer {
    font-weight: bold;
}
div.belege {
    margin-left: 1.2em;
}
div.lex {
    margin-top: .5em;
    margin-left: 1.2em;
}
span.beleg.tibetisch {
    /* font-style: italic; */
}
tib, skt {
    font-style: italic;
}
span.link a {
    font-style: italic;
}
input.icon {
    height: 30px;
    width: 30px;
    padding: 0px;
}
#belege_par_button {
    background-image: url("/images/icon_pars.jpg");
    background-position: center center;
    background-repeat: no-repeat;
}
#belege_unpar_button {
    background-image: url("/images/icon_block.jpg");
    background-position: center center;
    background-repeat: no-repeat;
}
ul {
    margin: 0rem;
    padding: 0rem;
}
div.nav ul {
    list-style-type: none;
    font-weight: bold;
}
div.nav li * {
    margin: 0px;
    padding: 0px;
}
div.nav a.nav {
    display: block;
    color: inherit;
    margin: 0px;
    padding: 0px;
}
.bold {
    font-weight: bold;
}
.italic {
    font-style: italic;
}
summary.menu-header {
    display: none;
}
@media (max-width: 55rem) {
    :root {
	--width: 100%;
	--left-width: 10rem;
    }
}
@media (max-width: 45rem) {
    :root {
	--left-width: 8rem;
    }
    div.navigation {
	padding-left: .5rem;
	padding-right: .5rem;
    }
}
@media (max-width: 30rem) {
    /* #top-box { */
    /* 	flex-direction: column; */
    /* 	position: relative; */
    /* 	height: auto; */
    /* 	box-shadow: none; */
    /* } */
    /* #top-nav { */
    /* 	padding-top: .5rem; */
    /* 	padding-bottom: .5rem; */
    /* } */
    div.header-row {
	flex-direction: column !important;
	position: relative;
	height: auto;
	box-shadow: none;
    }
    div.title-row {
	flex-direction: column !important;
	box-shadow: none;
    	padding-top: 1rem;
    	/* padding-bottom: 1rem; */
    }
    
    /* #left-top-box { */
    /* 	width: 100%; */
    /* } */
    div.header.left.logo {
	width: 100%;
    }
    
    #left-nav {
    	margin-left: 2rem;
    	margin-right: 2rem;
    	margin-top: .5rem;
    	margin-bottom: .5rem;
    }
    /* #main { */
    /* 	flex-direction: column; */
    /* } */
    div.main-row {
	position: relative;
    	flex-direction: column !important;
    }
    div.main.content {
	margin-left: 1.5rem;
	margin-top: 0rem;
    }
    
    /* #left-nav-container, #content-container { */
    /* 	margin: inherit; */
    /* 	padding: inherit; */
    /* } */
    /* #left-nav-container { */
    /* 	position: relative; */
    /* 	width: 100%; */
    /* 	height: auto; */
    /* 	box-shadow: 0rem .3rem .3rem rgba(0, 0, 0, .5); */
    /* } */
    div.main.left {
	position: relative;
	width: 100%;
	height: unset;
	padding-top: 0rem;
    	box-shadow: 0rem .3rem .3rem rgba(0, 0, 0, .5);
    }
    div.navigation {
	padding: .5rem;
	padding-left: 1.5rem;
    }
    summary.menu-header {
	display: list-item;
    }
    div.text {
	padding-left: 0rem;
    }
    form div.flex-row {
	flex-wrap: wrap;
    }
}