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

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

#cookies-bar {color:white;background-color:rgb(204, 51, 51);padding:0.5em;}
#cookies-bar button {
    color: white;
    padding: 1em;
}

#bot {
    color: #a5a5a5;
    padding: 1em 1em 1em 0 !important;
}
a {color: #a5a5a5;}
input, button {border-radius: 0 !important;}

.svg {
    color: #a5a5a5;
    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-attachment: fixed;
    background-image: linear-gradient(to bottom,rgba(255,255,255,0.85) 0%,rgba(255,255,255,0.85) 100%), url(/resources/d4s-v-oea/img/educanext_start.jpg);
    background-size: cover;
    min-height: calc(100vh - 185px);
    padding: 1em 0em;
    text-align: center;
}

/*#regal.main {
    background-image: url(/resources/d4s-v-oea/img/educanext_start2.jpg);
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(/resources/d4s-v-oea/img/educanext_start2.jpg);
}*/

#main_header {margin-top: 3vh;}
#logo_big {max-height: 100px;}

#slogan {
    font-size: 1.5em;
    margin-top: 1em;
}

#slogan > div {
    margin: 0 auto;
    max-width: 25em;
}

#main_content {
    background-color: #33333380;
    margin-top: 2em;
    padding: 2em 0;
}

.abutton {
    background: white;
    border-radius: 0;
    color: #cc3333;
    padding: 0.7em;
    width: 12.5%;
    min-width: 9em;
}

.abutton.active {
    background: #cc3333 ;
    color: white;
}

#login-panel, #register-panel {
    margin: 0 auto;
    max-width: 75%;
}

#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: 3em;
    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 {
    background: #cc3333;
    color: white;
    margin-top: 2em;
    padding: 1em;
}

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

#register-panel {
    display: none;
}

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

#nutzungsbedingungen .content, #notifications .content, #privacy .content, #impressum .content, #faq .content, #kontakt .content, #kontakt-danke .content{
    background-color:rgba(255,255,255,0.7);
    padding: 4em;
}

#nutzungsbedingungen h2, #notifications h2, #privacy h2, #impressum h2, #faq h2, #kontakt h2 {
    color: #cc3333;
    font-weight: normal;
}

#nutzungsbedingungen a, #notifications a, #privacy a, #impressum a, #faq a, #kontakt a {
    color: #cc3333;
}

#nutzungsbedingungen .txt, #impressum .txt, #faq .txt, #notifications .txt, #privacy .txt {
    margin-top: 2em;
	text-align: left;
}

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

#profil .content, #registrieren2 .content, #aktivieren .content, #erneuern .content, #erneuern2 .content, #herstellen .content, #cookies .content {
    background-color: #33333380;
    padding: 4em;
}

#profil, #registrieren2, #aktivieren, #erneuern, #erneuern2, #herstellen, #cookies {
    color: white;
}

#kontakt input {
	background-color: #dddddd;
	border: 0px;
	padding: 0.5em;
}

#kontakt textarea {
	background-color: #dddddd;
	border: 0px;
	padding: 0.5em;
	box-sizing: border-box;
	resize: vertical;
}

#regal .content {
    max-width: 50em;
    margin: auto;
    padding: 2em 0;
}

#regal .content a {
    color: black;
}

.content a {
    color: white;
}

#regal #add1 {
    color: white;
    background-color: #cc3333 !important;
    float: left !important;
    padding: 0.5em 0.5em 0.5em 0.5em;
    border-radius: 0;
}

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

#regal #codefeld input {border:3px solid #cc3333;}

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

#profil .d4sdialog {background-color:#d8d8d8;}
#profil .d4sdialog label, #profil .d4sdialog p {color:#333333;}

#archive_toggle_container {
    display:inline-block;
    width: 5em;
    height: 36px;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    user-select: none;
    cursor: pointer;
    border: solid #cc3333 1px;
    margin-bottom: 1em;
}

.archive_toggle {
    width: 100%;
    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: #cc3333;
    color: white;
}

.archive_toggle.active p {
    color: white;
}

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

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

.archive_book {margin-left: 1em;}
.archive_book span {float:none; font-weight:normal; color:grey; font-size:0.75em;}
.archive_book span:hover {color: #cc3333;}

.ebook-box {
    background-color:rgba(255,255,255,0.7);
    overflow:auto;
    text-align:left;
    border: 1px solid lightgrey;
	padding: 0.5em;
}

.ebook-box:hover {
    border: 1px solid #cc3333;
    /*background-color:rgba(255,255,255,0.0);*/
    -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}

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

.ebook-link-box > div:nth-of-type(1) {font-size: 1.5em;}
.ebook-link-box > div:nth-of-type(2) {font-size: 1em; margin-top: 0.5em;}
.ebook-link-box > div:nth-of-type(3) {font-size: 0.8em; margin-top: 2em;}

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

.ebook-link-box img {float:left; height:6em; margin-right:1em}

.learning-resource-box {background:#cc3333; 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:#cc3333; 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-image: linear-gradient(to right, rgba(0, 79, 146, 0), rgba(0, 79, 146, 0.75), rgba(0, 79, 146, 0));
}
.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 {width:45em;margin-left:auto; margin-right:auto; margin-bottom:1em}
.support-box table {background:white; border-collapse: collapse; margin:1em}
.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}

@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: 991px) {
    #login-panel, #register-panel {width: 25%;}
}

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

#notification_form .form-button {margin-top:1em;}
.form-item-wrapper {padding-top: 1em;}
#preview-button { width:18.5em;}

#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;
}
.notification-wrapper {
     position: relative;
}
.notification_icon {
    padding-right: 5px;
}
.notification_counter {
    position: absolute;
    right: 3px;
    bottom: 8px;
    font-size:10px;
    background-color: yellow;
    border-style: solid;
    border-width: 2px;
    border-color: #dae628;
}
.notification_head {
    font-size:15px;
}
.notifications-link-showall {
    float: right;
}
#notifications_list {
    max-width: 70em;
    display:block;
    margin-left: auto;
    margin-right: auto;
}
.w3-ul{list-style-type:none;padding:0.5em;}.w3-ul li{padding:8px 8px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
.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}

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

#yuievtautoid-0 {margin:auto; width: 100%;}
.main-header {padding-top:1em}
.main-header:after {
    content: "";
    display: block;
    content: "";
    height: 1em;
}
.form-button input {margin-top:1em;}
#admin_notification a {color:#a5a5a5;}

.content-box {display: block;text-align:left; max-width:5em; padding:1em}

#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;
}

#system_maintenance_message {
    background-color: #cc3333;
    color: white;
}