body {
    font-family: arial,sans-serif;
}

body, html{
    overflow-x: hidden;
}

.header {
    color: #fff;
    background: #9123c7;
    background: linear-gradient( 
        345deg
         , rgb(153 133 179 / 73%), rgb(57 104 212 / 35%) 70.71%), linear-gradient( 
        110deg
         , rgb(166 215 249 / 52%), rgb(84 55 146 / 73%) 70.71%), linear-gradient( 
        336deg
         , rgb(7 7 255 / 48%), rgb(150 150 208 / 62%) 70.71%);
}

.header a, .header a:visited {
    color: #fff !important;
    text-decoration: none;
}

#searchbar {
    width: calc(100% - 3em);
    flex: 1;
    text-align: left;
}

#searchbar, #searchbar:focus, #searchbar:active{
    border: 0;
    outline: none;
    box-shadow: none;
}

.inputosaurus-container{
    width: calc(100% - 3em);
    border: 0;
    outline: none;
    box-shadow: none;
}

.searchbar_container {
    /* flex border border-gray-200 rounded-full p-4 shadow text-xl */
    border: 1px solid #c1c1c1;
    border-radius: 0.8em;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    place-items: center;
}

.nurax-logo{
    max-width: 300px;
    width: 80vw;
    margin-bottom: 2em;
}

.flex {
    display: flex;
}

.items-center{
    align-items: center;
}

.block {
    flex: 1;
}

.justify-between{
    justify-content: space-between;
}

.p-3{
    padding: 0.75rem;
}

.justify-center{
    justify-content: center;
}

.pt-20{
    padding-top: 5rem;
}

.footer {
    /* fixed bottom-0 bg-red-600 border-t w-full flex justify-between text-white text-xs */
    bottom: 0px;
    /*position: fixed;*/
    display: flex;
    justify-content: space-between;
    width: 100vw;
    background: #f1f1f7;
    color: #717171;
    height: 4em;
    border-top: 10px solid #fff;
    /*box-shadow: 0px -7px 11px 2px #fff;*/
}

.svg_font {
    height: 1em;
    width: 1em;
    padding-right: 0.5em;
    vertical-align: bottom;
}

.search_button {
    /* mr-3 bg-gray-200 border border-gray-300 py-3 px-4 rounded hover:bg-gray-400 hover:border-gray-500 */
    border-radius: 0.2rem;
    padding: 0.5rem 0.8rem;

    background-color: #f1f1f1;
    border: 1px solid #f1f1f1;
    border-radius: 4px;
    color: #3c4043;
    font-family: arial,sans-serif;
    margin: 0 0 1.5rem 0;
    padding: 5px 20px;
    /*padding: 0 16px;*/
    line-height: 27px;
    height: 36px;
    min-width: 54px;
    text-align: center;
    cursor: pointer;
    user-select: none;

}

.search_button:hover {
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;
}

.text-center {
    text-align: center;
}

.search_box {
    /* w-5/6 max-w-screen-sm */
    width: 83.333333%;
    max-width: 640px;
    text-align: center;
}

.kw_base {
    padding: 0.1em 0.5em;
    border-radius: 0.3em;
    margin: 0em 0.2em;
}

.kw_group{
    background: #e6f0ff;
    color: #16325a;
}
.searchbar_container > ul > li.kw_include {
    background: #dffdd6;
    color: #205610;
}
.searchbar_container > ul > li.kw_include.inputosaurus-selected{
    background: #b3eaa2;
}
.searchbar_container > ul > li.kw_include a {
    color: #99d08a;
}

.searchbar_container > ul > li.kw_exclude{
    background: #ffe5de;
    color: #b30000;
}
.searchbar_container > ul > li.kw_exclude.inputosaurus-selected{
    background: #ffc3b2;
}

.searchbar_container > ul > li.kw_exclude a {
    color: #d28b77;
}

.inputosaurus-container li a {
    color: #9ec4e2;;
}
.inputosaurus-container li {
    border: none;
    color: #2a6b9e;
}

.nurax_logo{
    font-family: 'Spartan', sans-serif;
    font-size: 230%;
}

.nurax_logo_highlight{
    color:#9e0606;
}

.hint {
    font-size: 80%;
    line-height: 130%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    color: #848484;
    text-align: center;
    padding-left: 2em;
}

.hint i {
    font-style: normal;
}

a.link_demoquery {
    text-decoration: underline;
    padding: 0 2px;
    color: #a5a5a5;
    cursor: pointer;
}

#result_list {
    width: 90%;
    max-width: 850px;
    margin-bottom: 6em;
    margin-top: 1em;
}

#result_list .abgelaufen {
    margin: auto;
    display: block;
    width: 100%;
    background: #fbf1f1;
    padding: 0.5em 2em;
    border-radius: 10px;
    border: 1px solid #d4a4a4;
    color: #925656;
}

#result_list .abgelaufen a {
    text-decoration: underline;
    font-weight: 600;
}

.result_item {
    padding: 1em 1em;
    border-bottom: 1px solid #7d7d7d;
}

.result_item p {
    color: #4d5156;
    margin-top: 0.5em;
}

.result_item h3 {
    margin-bottom: 0;
    color: #1a0dab;
}

.result_item:nth-child(odd){
    background: #f9f9f9;
}

/* SERP Highlights */
.shl1 {
    background: #fff8a5e3;
    padding: 1px 2px;
    border-radius: 3px;
    border: 1px solid #ffee57;
}
.shl2 {
    background: #fffdea;
    padding: 0px 2px;
    border-radius: 3px;
    border: 1px solid #fff8c0;
}


/* new search results (dok+abs) */

.result_dok{
    margin: 2em auto;
    box-shadow: 0px 2px 12px #f3f3f3;
    border-radius: 5px;
    text-align: justify;
    border: 1px solid #f1f1f1;
    margin-bottom: -2em;
    margin-top: 3em;
    padding-bottom: 1em;
}
.result_dok:first-child{
    margin-top: 0;
}
.result_dok_header{
    background: #e2e2e2;
    padding: 0.5em 0.5em 0.3em 1em;
    font-weight: 600;
}
.result_dok_header > h3 > a {
    text-decoration: underline;
}
.r_autor{

}
.r_typ{

}
.r_datum{

}
.r_aktenzeichen{

}
.result_dok_snippets{
    margin-bottom: -1em;
}
.result_dok_snippet_item_multi{
    padding: 1em;
    box-shadow: 0px 1px 4px #e0e0e0;
    margin: 1em;
}

.result_dok_snippet_item_single{
    padding: 1em;
    margin: 1em;
}

/* Prevent justify gaps in text on smaller screens */
@media (max-width:960px) {
    .result_dok_snippet_item_multi {
        text-align: left;
    }
    .result_dok_snippet_item_single {
        text-align: left;
    }
}



/*Spinner*/
.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #7789d1;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

.svginline {
    height: 1.25rem;
    width: 1.25rem;
    display: inline;
    vertical-align: bottom;
    margin-right: 0.5rem;
}

.loginform_wrap {
    margin-top: 10vh;
}
.loginform_form{
    border: 1px solid #f3f3f3;
}
.loginform_head {
    display: block;
    text-align: center;
    padding-bottom: 1em;
    flex: none;
}
.loginform_wrap h2 {
    font-size: 1.3em;
    font-weight: 200;
    margin-bottom: 0.5em;
    color: #848484;
    text-align: center;
}

.button_signup {
    background: #6e34c6;
}
.button_signup:hover {
    background: #6f0cb5;
}

.passwortanlegen_text {
    font-size: 80%;
    margin-top: 2em;
    color: #385792;
    padding: 0 5%;
    text-align: center;
    font-weight: 400;
}
.passwortvergessen_text {
    font-size: 80%;
    margin-top: 4em;
    color: #272727;
    text-align: justify;
    font-weight: 200;
    margin-bottom: 1em;
}

#btn_passwortspeichern:disabled{
    background: #9a9a9a;
    cursor: not-allowed;
}

#password_error_messages {
    font-size: 80%;
    margin-bottom: 2em;
    margin-top: -1em;
    color: #e28383;
    display: none;
}

.rate_limit{
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 10vh;
    border: 1px solid #fbfbfb;
    padding: 1em;
    box-shadow: 0px 5px 5px #f5f4f4;
    border-radius: 5px;
}
.rate_limit h1{
    font-size: 150%;
    font-weight: 700;
    margin-bottom: 1em;
}

.rate_limit p{
    margin-bottom: 0.8em;
}
.rate_limit * a {
    text-decoration: underline;
    color:#16325a;
}

.login_error{
    margin-top: 1em;
    color: #ff4e4e;
    text-align: center;
    background: #ffe4e4;
    border-radius: 3px;
    font-size: 85%;
    padding: 0.2em;
}

.center-box {
    width: 100%;
    max-width: 488px;
    border: 1px solid #f9f9f9;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 10vh;
    padding: 1.5em 3em 3em 1.5em;
    border-radius: 0.3em;
    box-shadow: 0px 5px 6px 0px #ececec;
}

.center-box > h1 {
    font-size: 180%;
    font-weight: 600;
    margin-bottom: 1em;
    text-align: center;
    color: #7276c1;
    letter-spacing: 1px;
    border-bottom: 1px solid #d1d2ec;
}
.center-box p {
    color: #333;
    margin: 0.6em 0;
}
.center-box a {
    font-weight: 400;
    color: rgb(59, 130, 246)
}

.small {
    font-size: 80%;
}

.code {
    font-family: 'Courier New', Courier, monospace;
    background: #f1f1f7;
    padding: 0 3px;
    color: #a21f00;
    border: 1px solid #d8d8d8;
}

.highlight {
    padding: 3px;
    border-radius: 5px;
}

.btn_blue {
    background: rgb(59, 130, 246);
    color: #fff;
    width: 100%;
    height: 2em;
    border-radius: 3px;
    box-shadow: 0px 3px 8px 0px #e2e2e2;
    margin-top: 0.5em;
}

.upload_form{
    background: #f3f3f3;
    margin-top: 1em;
    padding: 1em 1em;
    border-radius: 5px;
}

a.konto_logout_button, a.konto_logout_button:visited, a.konto_logout_button:active{
    margin-top: 1em;
    background: #6e6e6e;
    border-radius: 2px;
    box-shadow: 0px 4px 5px #f1f1f1;
    padding: 2px 13px;
    color: #fff;
    top: 2em;
    display: block;
    text-align: center;
}
a.konto_logout_button:hover {
    background:#fd3c3c;
}


span.konto_gueltig_aktiv {
    color: #269d00;
}
span.konto_gueltig_ausgelaufen {
    color: #cb0909;
}

p.konto_abgelaufen {
    text-align: center;
    margin-top: 1em;
    color: #cb0809;
    margin-bottom: 1em;
    background: #ffeeee;
    font-size: 80%;
    padding: 0.2em;
}

button.konto_reaktivieren {
    margin: 0em 0 2em 0;
}


p.konto_zurueck {
    text-align: center;
    margin-top: 3em;
}

.main_body {
    height:fit-content;
    min-height: calc(100vh - 4em);
}

.changelog h2 {
    font-size: 1.5em;
    font-weight: 300;
    margin-top: 1em;
    color: #736cb7;
}
.changelog ul {
    list-style: circle;
    list-style-type: disc;
    margin-left: 1em;
}
.changelog li {
    color: #636363;
    font-weight: 100;
    margin:0.6em auto;
    line-height: 110%;
}
.changelog_code {
    background-color: #edeeff;
    font-family: "Courier New", "Courier", monospace;
    padding: 1px 5px;
    border: 1px solid #b5b9f5;
    border-radius: 4px;
    margin: 0px 3px;
    color: #5357a0;
}


/* DOKUMENT */
@import url('https://fonts.googleapis.com/css2?family=BenchNine:wght@300&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Roboto:wght@100&display=swap');

div.dokument {
    background-color: #fff;
    font-family: 'Libre Baskerville', serif;
    font-size: calc(10px + 1.6vw);
    text-align: center;
}
div.dokument.darkmode {
    background-color: #001729;
    color: #d3d8db;
}

div.dokument > div {
    padding: 1em calc((100vw - 50em)/2);
    border-bottom: 1px dotted #5d5d5d;
    line-height: 1.5em;
    
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
div.dokument > * > p {
    margin: 0.8em auto;
}

div.dokument > div.doc_ {
    text-align: center;
}
div.dokument > div.doc_tenor {
    font-weight:bold;
    text-align: justify;
}
div.dokument > div.doc_tatbestand {
    text-align: justify;
}
div.dokument > div.doc_gruende {
    text-align: justify;
}
div.dokument > div.doc_ls {
    font-weight: 600;
    border: 1px solid #dedede;
    padding: 1em 2em;
    margin-top: -1px;
}
div.dokument > div.doc_unterschriften {
    text-align: center;
    word-spacing: 2em;
    font-style: italic;
}
div.dokument > div.doc_vorinstanzen {
    display: none;
}

#dokument_toolbar {
    min-height: 4em;
    background: #f1f1f7;
    border-bottom: 1px solid #d2d2d2;
    position: relative;
    width: 100%;
    padding: 1em 1em;
    text-align: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: space-around;
}
#dokument_toolbar.fixed {
    position: fixed;
    top: 0;
}

#dokument_toolbar > * > button {
    background: #d0d0da;
    border-radius: 3px;
    padding: 0 1em;
    box-shadow: 0px 2px 6px #e2e2e2;
    margin: 0 0.5em;
    border: 1px solid #afafaf;
    color: #2f2f2f;
    height: 2em;
    vertical-align: middle;
    font-size: 1em;
}

#tb_search{
    height: 2em;
    vertical-align: middle;
    min-width: 10em;
    width: 25vw;
    padding: 0 0.5em;
    border: 1px solid #d2d2d2;
    border-radius: 3px;
    box-shadow: 0 1px 8px 1px #dedede;
}

.tb_group{
    flex: 1;
    min-width: fit-content;
    margin: 0.5em auto;
}

#tb_back{
    vertical-align: middle;
    color: #2f2f2f;
    text-align: center;
    line-height: 100%;
}

.back_wrapper{
    display: flex;
    flex-direction: row;
    align-content: space-around;
    justify-content: center;
    align-items: center;
}

.back_col{
    display: flex;
    flex-direction: row;
    align-content: space-around;
    justify-content: center;
    align-items: center;
    line-height: 80%;
    margin: auto 0.3em;
}

table.doc_meta {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
    margin-top: 2em;
    border: 1px solid #000;
    padding: 1em 2em;
    background: #2b2b2b;
    color: #fff;
    border-collapse: separate;
    border-spacing: 1.5em 0;
    border-bottom: 6px solid #fff;
}

table.doc_meta.darkmode {
    background: #0c283c;
    color: #d3d8db;
    border-bottom: 6px solid #5d7282;
}

table.doc_meta > * > tr {
    height: 2em;
    vertical-align: top;
}


@media screen and (max-width: 480px) {

    .tb_group, #tb_search{
        width: 100vw;
    }

    table.doc_meta {
        padding: 1em 0.5em;
        font-size:80%;
    }
    table.doc_meta > * > tr td:last-child {
        vertical-align: middle;
    }
}

table.doc_meta > tbody {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: fit-content;
}

table.doc_meta > * > tr td:first-child{
    text-align: right;
    font-weight: bold;
    vertical-align: top;
    width: 30%;
    overflow-wrap: anywhere;
    hyphens: manual;
    padding-bottom: 1em;
}

/* Dokument Toolbar Search Highlights */
.dokument * > [id^="ss_topn_"] {
    padding: 0.2em 0.3em;
    border-radius: 0.2em;
}

.darkmode * > [id^="ss_topn_"] {
    color: #000;
}

#tbsearch_fw:disabled, #tbsearch_bk:disabled {
    cursor: not-allowed;
    color: #adadad;
}

#dok_matches {
    margin: 0.6em auto -10px auto;
    display: flex;
    place-content: center;
    flex-direction: row;
    justify-content: center;
    vertical-align: middle;
    align-items: center;
    border-radius: 5px;
    padding: 0.1em 1em;
    min-width: 10em;
    max-width: 90vw;
    width: -webkit-fit-content;
    height: 2.5em;
}
#dok_matches > input[type="radio"] {
    margin: 0 0.5em;
    width: 1em;
    font-size: 1em;
}
#dok_matches > input[type="radio"]:first-child {
    margin-right:1em;
}
#dok_matches > input[type="radio"]:last-child {
    margin-left:1em;
}

/* NORMSUCHE */
.normsuche {
    position: relative;
}
#normsuche_input {
    width: 90vw;
    max-width:600px;
    font-size:20pt;
    margin-left:auto;margin-right:auto;display:block;
    border: 1px solid #dedede;
    border-radius: 6px;
    box-shadow: 0px 2px 7px #efefef;
    padding: 0.1em 0.5em;
    margin-bottom: 0.5em;
    position: relative;
}

.normsuche_results {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 3em;
}


.normsuche_item {
    border-radius: 1em;
    border: 1px dotted #f5f5f5;
    padding: 0.2em 1em;
    margin: 1.7em auto;
    box-shadow: 0px 2px 8px #f5f5f5;
}

.normsuche_item:nth-child(odd) {
    background: #f7f7f7;
}
.normsuche_item:nth-child(even) {

}

.normsuche_item h2 {
    margin-top: -0.5em;
    color: #9c9c9c;
}
.normsuche_item h1 {
    font-size: 14pt;
    margin-bottom: 0.2em;
    text-align: center;
    font-weight: 600;
}

#normsuche_suggest:after {
    line-height: 1.3em;
    pointer-events: none;
    display: block;
    content: "z.B. \"bgb überhängende kirschen nachbar\"";
    position: absolute;
    top: 1px;
    background-color: #fff;
    font-style: italic;
    color: #999;
    animation: animText 10s linear infinite;
    text-align: left;
    width: calc(90vw - 2px);
    max-width: calc(600px - 2px);
    margin: auto;
    left: 0;
    right: 0;
    padding: 0.1em 0.5em;
    font-size: 20pt;
    overflow: hidden;
    height: 1.4em;
}

input:focus + #normsuche_suggest {
  display: none;
}

@keyframes animText {
  0% {
    content: "z.B. \"bgb überhängende kirschen nachbar\"";
  }
  50% {
    content: "z.B. \"zpo rückwirkung klageeinreichung\"";
  }
  100% {
    content: "z.B. \"aufrechnung delikt\"";
  }
}


#nurax_logo{
    font-family: 'Spartan', sans-serif;
    font-size: 230%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.quotation{
    color: #cacaca;
    /*font-family: 'Roboto', sans-serif;*/
    font-weight: 100;
    /*font-size: 70%;*/
}

#kw_suggestions {
    font-size: 75%;
    display: flex;
    flex-direction: row;
    visibility: hidden;
    width: calc(100% - 3em);
    overflow-x: scroll;
    cursor: ew-resize;
}

/* hide scrollbar */
#kw_suggestions::-webkit-scrollbar {
    display: none;
}

.kw_title {
    font-weight: 500;
    color: #5c5c5c;
}

.kw_kw {
    color: #2971af;
    margin: 0 3pt;
    background: #e5eff7;
    padding: 1px 6px;
    border-radius: 3px;
    height: 100%;
    white-space: nowrap;
    cursor: pointer;
    cursor: copy;
}

/* keywords highlighted in search result snippets */
em.hlkw {
    background: #fffdc4;
    font-style: normal;
    padding: 0px 3px;
}


/* x von y Resultaten */
div#below_results {
    margin-top: 3em;
    text-align: center;
    color: #303030;
    font-weight: 400;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    line-height: 135%;
}
div#below_results a {
    text-decoration: underline;
}
/* Fade last result */
.fade {
    -webkit-mask-image: linear-gradient( 
        180deg, #000 50%, transparent);
    padding-bottom: 0px;
    margin-bottom: 0px;
}



/* paywall modal */
#paywall-wrapper h4 {
    font-weight: bold;
    text-align: center;
    font-size: 150%;
    margin: 0.7em auto 0.5em;
}
#paywall-wrapper {
    background: #fff;
    z-index: 8;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 8em;
    filter: none !important;
    border-radius: 5px;
    padding: 0em 2em;
    width: 60%;
    max-width: 570px;
    box-shadow: 0px 0px 15px #bcbcbc;
}
#paywall-wrapper a.btn {
    background: #956afd;
    padding: 4px 9px;
    margin: 1.5em auto;
    display: block;
    text-align: center;
    color: #fff;
}
.blur {
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    opacity: 0.7;    
}
.blur-head {
    text-decoration:underline;
    font-weight:bold;
    filter: blur(8px);
    user-select: none;
    pointer-events: none;
    opacity: 0.7;       
}

/* AGB */
.center-box h2 {
    font-weight: 800;
    margin-top: 1.5em;
}

/* Error message */
.failure {
    margin: auto;
    display: block;
    width: 70%;
    max-width: 500px;
    background: #fbf1f1;
    padding: 0.5em 2em;
    border-radius: 10px;
    border: 1px solid #d4a4a4;
    color: #925656;
}
.failure h2 {
    font-weight: 700;
    font-size: 115%;
    margin-bottom: 0.5em;
    text-align: center;    
}
.failure p {
    margin-bottom: 1em;   
}
.hint {
    margin: auto;
    display: block;
    width: 70%;
    max-width: 500px;
    background: #fff6db;
    padding: 0.5em 2em;
    border-radius: 10px;
    border: 1px solid #e9dfc1;
    color: #90741f;
}



/* */