:root {
    --color-primary: #005041;
    --color-secondary: #848887;
    --color-tertiary: #dbd5cd;
}

@font-face {
    font-family: 'FiraSans';
    src: url('fonts/FiraSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'FiraSans';
    src: url('fonts/FiraSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}

html * {font-family: 'FiraSans', sans-serif;}

.blk {border-radius: 1em 1em 0px 1em;}
.blk .txt {background:#d8d8d8;}

#cookies-bar {color:#005141;background-color:#fff;padding:0.5em;}
#cookies-bar button {
    color: var(--color-primary);
    padding: 1em;
}

#bot {
    color: var(--color-secondary);
    padding: 1em 1em 1em 0 !important;
}
a {color: var(--color-secondary);}
input {border-radius: 0 !important;}
button {border-radius:0.25em;}
::placeholder {color: var(--color-secondary);}
.info {color:var(--color-primary);}

.svg {
    color: var(--color-secondary);
    display: inline !important;
    font-size: 1.5em;
    height: 1em;
    padding: 0.4em 0em 0.1em 0.1em;
    width: 1em;
}

#top #logo {
    height: 55px;
    margin-left: 1.25em;
    margin-top: 0.75em;
}

.main {
    background-color:var(--color-primary);
    min-height: calc(100vh - 185px);
    padding: 1em 0em;
    text-align: center;
}

#regal.main {
    display:flex;
    gap:1em;
}

#regal.main #shelf_logo {
    align-self:center;
    height:100%;
    width:100%;
    display:none;
}


#regal.main #shelf_logo >img {
    height:60%;
    width:60%;
}

#shelf_buttons {
    display:flex;
    justify-content:space-between;
}

#main_header {margin-top: 3vh;}
#logo_big {
    width:60%;
    height:60%;
    max-height: 150px;
}

#main_content {
    padding: 2em 0;
    max-width:900px;
    margin:2em auto 0 auto;
}

.abutton {
    background: white;
    border-radius: 0;
    color:var(--color-primary);
    padding: 0.7em;
    width: 12.5%;
    min-width: 9em;
}

.abutton.active {
    background:var(--color-primary);
    color: white;
}

#login-panel, #register-panel {
    background-color:#fff;
    padding:1em;
    display:inline-block;
    max-width: 75%;
    border-radius:0.25em;
}

#login-panel .input , #register-panel .input {
    margin: 2em auto 0 auto;
    position: relative;
}

#login-panel .input span, #register-panel .input span {
    position: absolute;
}

#login-panel input, #register-panel input {
    display: inline-block;
    padding: 1em 0;
    padding-left: 0.5em;
    width: 100%;
}

#login-panel button, #register-panel button, #kontakt button, #codefeld button, #profil .txt form button, #registrieren2 button, #aktivieren button, #erneuern button, #erneuern2 button, #herstellen button, input[type=submit] {
    background: #005141;
    color: white;
    margin-top: 2em;
    padding: 1em;
    cursor:pointer;
    font-weight:normal;
}

#login-panel button, #register-panel button {
    width: 40%;
    min-width: 10em;
    margin-bottom:1em;
}

#register-panel.register {margin-top:3em;}

.panel-title {
    text-align:left;
    font-size:2em;
    color:#005141;
    margin-bottom:1em;
}

.panel-text {
    text-align:left;
    font-size:0.95em;
    color:#005141;
}

#nube, #notifi {width: auto !important;}
#nube {margin-top:1em;}
.left {text-align: left; margin-top: 1.0em;}
.left > a {color: var(--color-primary);}

#nutzungsbedingungen .content, #notifications .content {
    background-color:#fff;
    padding: 4em;
}

#nutzungsbedingungen h2, #notifications h2 {
    color:var(--color-primary);
    font-weight: normal;
}

#nutzungsbedingungen .txt, #impressum .txt, #faq .txt, #notifications .txt, #notification .txt {
    margin-top: 2em;
}

#nutzungsbedingungen .txt ul {
    padding-left: 1em;
}

#kontakt .content, #impressum .content, #faq .content, #profil .content, #registrieren2 .content, #aktivieren .content, #erneuern .content, 
#erneuern2 .content, #herstellen .content, #cookies .content, #deaktivieren .content, #support .content, #mailneu .content,
#notification .content, #my_notifications .content, #notification_show .content, #notifications_admin .content, #notification_create .content {
    background-color:#fff;
    padding: 4em;
}

#kontakt, #impressum, #faq, #profil, #registrieren2, #aktivieren, #erneuern, #erneuern2, #herstellen, #cookies, #notification, #my_notifications, #notification_show, #notifications_admin, #notification_create, #deaktivieren, #support, #mailneu {
    color:var(--color-primary);
}

#kontakt h2, #impressum h2, #my_notifications h2, #notification_show h2, #notifications_admin h2, #notification_create h2, #support h2, #mailneu h2 {
    font-weight: normal;
}

#faq .content, #notifications .content {
    display:inline-block;
    vertical-align:top;
    max-width:28em;
    text-align: left;
}

#faq #midd {
    max-width: 60em !important;
}

#faq .txt h2 {
    font-size: large;
    padding: 1em;
}

#faq #text p {
    padding: 0 1em;
}

#regal .content {
    min-width:50%;
    max-width: 50em;
    margin-left:1em;
    padding: 2em;
    background-color: rgba(255, 255, 255, 0.8);
}

#regal .content a {
    color: black;
}

.content a {
    color:var(--color-primary);
}

#regal #add1 {
    color: #fff;
    background-color:var(--color-primary) !important;
    float: left !important;
    padding: 0.5em 0.5em 0.5em 0.5em;
    border-radius: 0;
    font-weight:normal;
}

#regal #add1 .svg {
    color: inherit;
    font-size: inherit;
}

#regal #code_lay #codefeld {width:auto;}
#regal #codefeld input {border:3px solid var(--color-primary);}
#regal #codefeld .codefeld_close {position:absolute;top:0.75em;right:0.75em;color:var(--color-primary);}


#pers {margin-right:1em; margin-top: 0.75em;}
#myimg {margin-top: 0 !important;}
#myimg .svg {padding: 0; color: var(--color-primary);}

#profil .d4sdialog label, #profil .d4sdialog p {color:var(--color-primary);}

#archive_toggle_container {
    display:inline-block;
    width: 10em;
    height: 36px;
    position: relative;
    overflow: hidden;
    user-select: none;
    cursor: pointer;
}

.archive_toggle {
    width: 50%;
    height: inherit;
    display: flex;
    position: absolute;
    background: white;
    transition:all 0.3s;
}

.archive_toggle p {
    margin: auto;
    line-height: 36px;
}

.archive_toggle:nth-child(1) {
    right: 0;
}

.archive_toggle.active {
    background: var(--color-primary);
    color: white;
}

.archive_toggle.active p {
    color: white;
}

#shelf {margin-top:1em;}

.bag_shelf .ebook-box.archive{display:none;}
.archive_shelf .ebook-box.bag {display:none;}

.bag_shelf .ebook-box .archive_book button:nth-child(2) {display:none;}
.archive_shelf .ebook-box .archive_book button:nth-child(1) {display:none;}

.archive_book span {float:none; font-weight:normal; color:grey; font-size:0.75em;}
.archive_book span:hover {color: var(--color-primary);}

.ebook-box {
    background-color:#fff;;
    overflow:auto;
    text-align:left;
}

.ebook-box:hover a {
    text-decoration: none;
}

.ebook-link {margin:0.5em;display:flex;gap:1em;}

.ebook-link div.ebook-info {flex-grow:2;}
.ebook-link div.ebook-title {font-size: 1.5em;color:var(--color-primary);font-weight:bold;}
.ebook-link div.ebook-expiry {font-size: 0.8em; margin-top: 2em;}
.ebook-link div.ebook-buttons {align-self:center;}
.ebook-link div.ebook-buttons button {background-color:var(--color-primary);color:#fff;border-radius:0;margin:0.25em 0;font-weight:normal;padding:0.5em 2em;}

.learning-resource-svg {
    color:white;
    float:right;
    cursor:pointer;
    font-size: 1em;
    padding: 0;
}

.ebook-link img {height:6em;}

.learning-resource-box {background:var(--color-primary); padding:0.5em; text-align:left; margin-top:1em;}
.learning-resource-box h1 {color:white; font-size:0.8em;}
.learning-resource-box div.learning-resource-content {display:none}
.learning-resource-box div.learning-resource-content {background:white}
.learning-resource-box div.learning-resource-title {cursor:pointer;}
.learning-resource-content {padding:1em}
.learning-resource-content h1 {color:var(--color-primary); font-size:1em; display:inline-block}
.learning-resource-content span {float:none; display:block}
.learning-resource-content div {max-width:100%; display:inline-block; background-color:inherit!important}
.learning-resource-content > hr {
    border: 0;
    height: 1px;
    background-color:#fff;
}
.learning-resource-content:last-child > hr {display:none;}

.minus {transform: rotate(180deg);transition: all 0.5s;transform-origin: 50% 60%;}
.plus {transform: rotate(0deg);transition: all 0.5s;}

.support-box {padding:1em 0; text-align:left}
.support-box div {margin-left:auto; margin-right:auto; margin-bottom:1em}
.support-box table {background:white; border-collapse: collapse;}
.support-box th, .support-box td {padding:0.5em; cursor:pointer}
.support-box tr:nth-of-type(odd) {background:#d9d9d9} 
.support-box input {width:100%; display:block; margin-bottom:1em; border-bottom: 1px solid var(--color-secondary);}
.support-box button {color:#fff;background-color:var(--color-primary);}

#support-home {background-color:#fff;}
#support-home > div {width:100%;}
#support > #midd {max-width:60em;width:90%;}

@media screen and (max-width:1000px) {
    #support-home table th:nth-child(4), #support-home table td:nth-child(4), #support-home table th:nth-child(5), #support-home table td:nth-child(5) {
        display:none;
    }
}

@media screen and (max-width:780px) {
    #support-home table th:nth-child(6), #support-home table td:nth-child(6) {
        display:none;
    }

    #notifications_admin table th:nth-child(2), #notifications_admin table th:nth-child(3), #notifications_admin table td:nth-child(2), #notifications_admin table td:nth-child(3) {
        display:none;
    }
}

@media screen and (max-width:660px) {
    #support-home table th:nth-child(1), #support-home table td:nth-child(1), #support-home table th:nth-child(2), #support-home table td:nth-child(2) {
        display:none;
    }

    #notifications_admin .content {padding:0.75em;}
}

@media screen and (max-width:500px) {
    #support-home table {table-layout:fixed;width:100%;word-break:break-all;}
}


@media screen and (min-width: 35em) {
    .learning-resource-content div {max-width:65%; display:inline-block; background-color:inherit!important}
    .learning-resource-content span {float:right;}
}

@media screen and (min-width: 800px) {
    #regal.main #shelf_logo { display:block;}
}

@media screen and (max-width: 799.99px) {
    #regal .content {
        margin:1em;
        width:100%;
    }
}

@media screen and (min-width: 600px) {
    #login-panel, #register-panel {width: 40%;}

    #main_content {
        display:flex;
        justify-content:space-evenly;
    }
}

@media screen and (max-width: 599.99px) {
    #login-panel, #register-panel {width: 100%;margin:1em;}
    .content {margin:1em;}
    .ebook-link {flex-wrap: wrap;}
    .ebook-buttons {flex-basis: 100%;}
    #shelf_buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
    }
}

#cke_form_content {margin:auto;width:100%!important;}
#notification_form {display:block; margin:auto;text-align:center;}

#notification_form .form-button {margin-top:1em;}
.form-item-wrapper {padding-top: 1em;}
#preview-button {color:#fff;background-color:var(--color-primary);font-weight:normal;border-radius:0}

#notification_form textarea {
    border:none;
    box-sizing:border-box;
}
#notification_creation_date {
     margin:1em;
     color:grey;
}
#show_notification_preview_content {
    position:absolute;
    right:2px;
    top:50px;
    text-align:left;
    margin-left:auto;
    margin-right:auto;
    max-width:35em;
    padding:0 1em 1em 1em;
    background-color:white;
    font-size: 17px;
    z-index:1;
}
.notification-wrapper {
     position: relative;
}
.notification_icon {
    padding-right: 10px;
}
.notification_counter {
    position: absolute;
    right: 3px;
    bottom: 8px;
    font-size:10px;
    background-color: yellow;
    border-style: solid;
    border-width: 2px;
    border-color: #dae628;
}
.notification_counter {
    position: absolute;
    right: -2px;
    bottom: 10px;
    font-size: 10px;
    background-color:var(--color-primary);
    border-style: solid;
    border-width: 2px;
    border-color:var(--color-primary);
    padding: 2px 5px;
    border-radius: 10px;
    color: #fff;
    font-weight: 700;
    display: inline-block;
    line-height:1em;
}

.notification_head {
    font-size:15px;
}
.notifications-link-showall {
    float: right;
}
#notifications_list {
    max-width: 70em;
    display:block;
    margin-left: auto;
    margin-right: auto;
}
#my_notifications a {text-decoration:none;}
.w3-ul{list-style-type:none;padding:0.5em;text-align:left;}
.w3-ul li{padding:8px 8px;border-bottom:1px solid #ddd}
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#eaecec}.w3-centered tr th,.w3-centered tr td{text-align:center}
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
.w3-bar{width:98.5%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
.w3-bar .w3-bar-item {padding:8px 8px;float:left;width:auto;border:none;outline:none;display:block}
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
.w3-bar .w3-button{white-space:normal}
.w3-large{font-size:18px!important}
#notification_create label {float:none;}

.unread_li {border-left: 3px solid #2D2E32;}
#loadMore, #showLess { width:18.5em;}
#showLess { margin-top:1em;}

#yuievtautoid-0 {margin:auto; width: 100%;}
#notifications_list table {margin:auto; width:100%;}
.form-button input {margin-top:1em;}
#notifications_admin a {color:var(--color-secondary);}
#notifications_admin > #midd {max-width:60em;width:90%;}

#confirm_send {
    color:#fff;
    background-color:var(--color-primary);
}

.content-box {margin-left:auto; margin-right:auto; padding:1em;max-width:50%;}

#bot #lang_list {
    display:block;
    position:absolute;
    margin:0;
    background-color:#f7f8f8;
}

#bot #lang_list > .lang_change_option {
    display:block;
    cursor:pointer;
    margin:0;
    padding:0.3em;
    border:1px solid #d8d8d8;
    text-align:left;
}

#bot #lang_list > .lang_change_option > img {
    width:25px;
}

#err > h1 {color:#fff;}

input[type=text], input[type=email], input[type=password] {
    border-bottom:1px solid var(--color-secondary);
}

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: 'FiraSans', sans-serif;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: 'FiraSans', sans-serif;
}
.ui-widget button {
    color:#fff;
    background-color:var(--color-primary);
}
.ui-widget-content {
    border: 1px solid #808080 ;
    background: #ffffff !important;
    color: var(--color-primary) !important;
}
.ui-widget-header {
    border: 0px !important;
    background: #ffffff !important;
    color: var(--color-primary) !important;
    font-weight: bold !important;
    padding: .8em 1em !important;
}

.ui-dialog .ui-dialog-buttonpane {
    text-align: left;
    border-top: 2px solid var(--color-primary);
    background-image: none;
    margin-top: .5em !important;
    padding: 0 !important;
}

.ui-widget-header a {
    color: #ffffff !important;
}

.ui-dialog {
    padding: 0em !important;
}

button.ui-button {border:none;background:#fff;}
button.ui-button:hover {border:none;background:#fff;}