@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
@import url('https://use.fontawesome.com/releases/v5.5.0/css/all.css');

.comments_container{font-family: 'Open Sans';padding:0; max-width: 75rem;}

/* Anker */
:target:not(#first-comment) {display: block;position: relative;height:60px;margin-top: -60px;visibility: hidden;} /* wenn wir #achor1234 referenzieren, baue offset ein*/

/* Drehender Ladespinner */
.loader {position: fixed;top: 50%;left: 45%;border: 16px solid #eee;border-radius: 50%;border-top: 16px solid #336699;width: 120px;height: 120px;-webkit-animation: spin 2s linear infinite; /* Safari */animation: spin 2s linear infinite;z-index: 10;}
@-webkit-keyframes spin {0% { -webkit-transform: rotate(0deg); }100% { -webkit-transform: rotate(360deg); }} /* Safari */
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

/* Abo Slider */
.switch { position: relative; width: 37px; height: 20px}.switch input { display: none}.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s}.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: #fff; -webkit-transition: .4s; transition: .4s}input:checked+.slider { background-color: #5cb85c}input:focus+.slider { box-shadow: 0 0 1px #5cb85c}input:checked+.slider:before { -webkit-transform: translateX(17px); -ms-transform: translateX(17px); transform: translateX(17px)}.slider.round { border-radius: 34px}.slider.round:before { border-radius: 50%}#labelText{margin-right: .3em;font-size: .9em;font-weight: bold;font-family: 'Open Sans';}

/* Pagination */
.pagination{font-family: 'Open Sans';padding: .5em 1em;background: white;border-radius: .5em;border: 1px solid lightgray;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;}.pagination ul{margin: 0;padding: 0;list-style-type: none;}.pagination a{display: inline-block;color: #222;}.p9 a{width: 30px;height: 30px;line-height: 25px;margin-right: 5px;padding: 0;text-align: center;text-decoration: none;}.p9 a.is-active{width: 30px;height: 30px;line-height: 25px;margin: 0px 5px;border: 2px solid #2c3e50;border-radius: 100%;}.p9 a:hover{border-radius: 100%;background-color: #2c3e50;color: white;font-weight: bold;}i.fas.fa-angle-right {font-size: 15px;color: gray;margin: 0px 10px;}i.fas.fa-angle-right:hover {color: black;cursor: pointer;}i.fas.fa-angle-left {color: gray;margin: 0px 10px;}i.fas.fa-angle-left:hover {color: black;cursor: pointer;}i.fas.fa-angle-double-right {color: gray;margin: 0px 10px;}i.fas.fa-angle-double-right:hover {color: black;cursor: pointer;}i.fas.fa-angle-double-left {color: gray;margin: 0px 10px;}i.fas.fa-angle-double-left:hover {color: black;cursor: pointer;}li.pagiList {margin: 2px 2px 0px 2px;}a.arrow:hover{background-color: transparent;}    

/* Breadcrump */
.breadcrump-scroller {position: relative;z-index: 2;height: 2.75rem;overflow-y: hidden;margin-bottom: 1em;}
.breadcrump-scroller .nav {display: -ms-flexbox;display: flex;-ms-flex-wrap: nowrap;flex-wrap: nowrap;padding-bottom: 1rem;margin-top: -1px;overflow-x: auto;text-align: center;white-space: nowrap;-webkit-overflow-scrolling: touch;}
.breadcrumb {padding-left: 0;background: transparent;line-height: 1.2em;font-size: 1.2em;font-family: 'Open Sans';}
.breadcrump_link:visited{color: #336699 !important;}

/* Abonnieren Slider */
.unsereform1{display: inline; float: right}

/* Modal */
.modal-body{border-radius: 1em;border: 1px solid lightgray}
.modal-content{font-family: 'Open Sans' !important;border-radius: 1em;}

/* Neues Thema eröffnen */
.neues_thema{font-size: 1.2em;text-align: center;margin-bottom: 1em;display: inline-block;font-family: 'Open Sans';min-width: 220px;padding: .75em;color: #369;border: 1px solid #369;background: white;border-radius: 2em;font-weight: 500;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;}
.neues_thema:hover{background: #296394 !important;border: 1px solid #296394;color: white;text-decoration: none;}

/* Kommentarstruktur */
.kommentar_wrapper {position: relative;padding: .5em 1em 1em 1em;margin-bottom: .5em;background: #fff;border: 1px solid lightgray;border-radius: .3em;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);}
.kommentar{font-size: 1.1em;padding: .5em .1em;line-height: 1.43em !important;}
.kommentar:focus{outline-color: #369;} /* Wenn aus Kommentar ein content editable wird */
.datum_kommentar{color: #65676b;white-space: nowrap;}
.fragesteller{color:#65676b;}
.options{float:right !important;}
.glyphicon-option-horizontal{color:#606770 !important;font-size: 1.2em;padding:.5em;border:1px solid #fff;}
.antworten.glyphicon-option-horizontal{border:1px solid #f0f2f5;}
.glyphicon-option-horizontal:hover{cursor: pointer; background: #d2d7dd;border: 1px solid #d2d7dd;color: #464b52 !important;border-radius: 2em;}
.border-bottom-1{border-bottom: 1px solid lightgray !important;}
.border-top-1{border-top: 1px solid lightgray !important;}
.margin-top-1{margin-top:1em !important;}
.margin-bottom-1{margin-bottom:1em !important;}
.anz_beitraege{font-size: 1.2em;font-family: 'Open Sans';margin-top: 1em;}
#first-comment{border-bottom:0 !important;margin:0 !important;font-family: 'Open Sans';}
#first-comment > .ueberschrift-thread {font-size: 2em;}
a.modal-link{text-decoration: none;color: #65676b;}

img.emoji{height:22px !important}
svg.antworten{filter: invert(41%) sepia(7%) saturate(269%) hue-rotate(182deg) brightness(94%) contrast(85%);}
a.author-link{text-decoration: none; color: #336699;}
a.author-link.body:hover{color: #336699;font-weight: bold;}
hr.forum_trenner{border-color: lightgray !important;}

.dropdown-menu.community {left: -15.5em !important; width:260px !important;position: absolute;z-index: 1000;margin-top: .3em;font-size: 1em;background: #fafafa;border: 1px solid lightgray;border-radius: .5em;width:auto;}
.dropdown.options.open > .dropdown-menu.community > .flexrow_wrapper {display: flex;flex-wrap: wrap;justify-content: space-between;color: #65676b;padding: 1em;}
.blockreason {margin-bottom: .2em;}
.badge.admin{margin-right:.3em;}
.innerblock {padding: 5px;display: inline-block;}
.innerblock:hover {background-color: lightgray;cursor: pointer;border-radius: .5em;}
.innerblock.chosen {color: #d03835;font-weight: bold;}
.blockedComment{margin-top: 1em;}
.firstLine{color: #a94442;background: #f2dede;border:1px solid #ebccd1;padding: 1em;display: inline-block;}
.show_hide_comment{display:inline-block;background: #fff;border: 1px solid lightgray;color: #6e7074;border-radius: .3em;padding: .3em .75em;font-size: 1.1em;}
.show_hide_comment:hover{cursor: pointer;background: #369;color: white;border: 1px solid #369;}

/* Bewertungen von Nutzern im Dropdown */
.fa-thumbs-up.smaller_thumb, .fa-thumbs-down.smaller_thumb {font-size: 15px; color:grey}
.fa-thumbs-up.anzahl_likes{padding: .2em .2em .2em .3em;border: 2px solid #369;background: #fafafa;color: #369;border-radius: 2em;font-size: 1.2em;}
.summe_likes{color:#464b52; font-size:1.3em;font-weight: bold;margin-left: .1em;}
.farbig {color: #369;font-weight: bold;} /* like einfärben */
.ausgrauen {opacity: .6;}
.normal-font-size{font-size: 20px;}
.likes_warpper{cursor: pointer;margin-bottom: .5em;}
.pop-up0{display: none;position: absolute;max-width: 240px;margin-top: .3em;z-index: 999;background: #fafafa;border-radius: .5em;border: 1px solid lightgray;box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);}
.pop-up1{display: none;position: absolute;max-width: 240px;margin-top: .3em;z-index: 999;background: #fafafa;border-radius: .5em;border: 1px solid lightgray;box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);}
.hover-likes:hover + .pop-up0{display: block;}
.hover-likes:hover + .pop-up1{display: block;}
.like_row{padding: .5em 1em;border-bottom: 1px solid lightgray;color: #65676b}
.name_like_row{margin-top: .2em;}

.flexrow_wrapper:hover {cursor: pointer;background: #ececec;}
.flexrow_wrapper:first-child:hover {border-top-right-radius: .5em;border-top-left-radius: .5em;}
.flexrow_wrapper:last-child:hover {border-bottom-right-radius: .5em;border-bottom-left-radius: .5em;}
.flexrow_wrapper > .icon {flex-grow: 1;text-align: left;}
.flexrow_wrapper > .action {flex-grow: 4;text-align: right;font-weight: 600;}

.flexrow_interaktion{display: flex;flex-wrap: wrap;justify-content: space-between;text-align: center;border-top: 1px solid lightgray;border-bottom: 1px solid lightgray;}
.flexrow_interaktion > .interaktion {flex-grow: 1;padding: .5em 0em;color: #65676b;}
.flexrow_interaktion > .interaktion:hover{cursor: pointer; background: #ececec; color: #464b52;}
.interaktion_text{font-size: 1.1em;padding-left: .2em;}

/* "Schnelle" Antwort */
.antworten_flexrow_wrapper {padding:1em 1em 0em 0em;display: flex;justify-content: space-between;}
.antworten_flexrow_wrapper_child:first-child {flex-grow: 1;}
.antworten_flexrow_wrapper_child:not(:first-child) {flex-grow: 8;background: #f0f2f5;padding: .5em 1em 1em 1em;border-radius: .3em;width:100%;border: 1px solid #e8eaec;}

.responsive-img > img:hover {-webkit-filter: blur(1px); /* Safari 6.0 - 9.0 */filter: blur(1px);cursor: pointer;}
.kommentar-foto{height: 250px;object-fit: cover;vertical-align: bottom;border-radius: .5em;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;cursor: pointer;}
a.antworten-anzeigen{color: grey;text-decoration: none;margin-top: 1em;display: block;font-size: 1.1em;margin-bottom: .5em;}
a.antworten-anzeigen:hover{color: #369 !important;}
text.anz-antworten{margin-left: .3em;border-bottom: 1px solid lightgray;padding-bottom: .2em;}
text.anz-antworten:hover{border-bottom: 1px solid #369;}
.kommentar_button_senden{display:none;position: relative;float: right;margin-top: .5em;background: #fff ;border: 1px solid lightgray; color: #6e7074;border-radius: .3em;padding: .3em .75em;font-size: 1.1em;}
.kommentar_button_senden:hover{background: #369;color: white;border: 1px solid #369;cursor: pointer;}
.kommentar_button_senden:hover > svg {filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(334deg) brightness(103%) contrast(105%);}
.kommentar_button_senden.bereit{display:inline-block;} 
.checkbox{display: none;}
.checkbox.bereit{display:inline-block;margin-top: 1.2em;margin-bottom: -15px;} 
.ant_abonnieren{color: #6e7074;font-size: 13px;}
.dynamic{font-weight: 300;display: inline-block;cursor: pointer;position: relative;outline: 0;margin-top: -.5em;margin-bottom: .2em;}
.thread_closed{display: none;}
.nur_antwort{float: right;margin-right: 8em;}

/* Neuer Kommentar Badge */
.neu.label.label-warning {position: relative;float: right;padding: .5em 1em;border: 1px solid #bd7e24;border-radius: 1em;font-size: 1em;border-bottom-right-radius: 0;border-top-left-radius: 0;border-top-right-radius: .2em;box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);}
.ebene0, .ebene1{margin-right: -1em;margin-top: -.5em;margin-left: 1em;}
.neu_border {border-left: 3px solid #f0ad4e !important;}
.label{white-space: pre-wrap !important;} /* auch bei labeln ein linebreak ermöglichen (insb. für Mobil wichtig) */

/* Neuer Editor */
.ql-container {font-family: 'Open Sans' ,sans-serif !important;color: #000;font-size:1.1em !important;}
.ql-toolbar.ql-snow {background:#f0f2f5 !important;border-top-right-radius: .3em;border-top-left-radius: .3em;padding: 0 !important;}
span.ql-formats{padding: .5em 1em;border-right: 1px solid lightgray;margin-right: 0 !important;}
.ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {margin: 0em .1em;width: 30px !important;}
.ql-container.ql-snow {min-height:200px !important;background:#fff !important;border-bottom-right-radius: .3em;border-bottom-left-radius: .3em;}
.small.ql-container.ql-snow{height:auto !important;min-height:auto !important;}
.ql-snow .ql-editor img {height: 250px;object-fit: cover;vertical-align: bottom;border-radius: .5em;box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;}
.ql-mention-list-container{max-height: 250px;overflow: hidden scroll;}
.form-group{font-family: 'Open Sans';}
.zitat-ueberschrift{color: rgb(51, 51, 51);}
.zitat-text{color: rgb(51, 51, 51);}
.zitat{border: solid #ccc;padding: .5em .75em;background: #fafafa;border-radius: .5em;border-width: 0px 0px 0px 4px;}
.zitat>strong:first-child{display:block;}
.ql-blockquote.clicked{filter: invert(91%) sepia(6%) saturate(0%) hue-rotate(237deg) brightness(92%) contrast(86%);cursor: not-allowed;pointer-events: none;}
.ql-image.clicked{filter: invert(91%) sepia(6%) saturate(0%) hue-rotate(237deg) brightness(92%) contrast(86%);cursor: not-allowed;pointer-events: none;}
#editor1{cursor: text;}
#editorPosting{cursor: text;}

/* Standard Button */
.community_button {background: white;padding: .5em 1em;border: 1px solid lightgray;border-radius: .3em;color: #6e7074;box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);}
.community_button:hover{color: #fff;background: #369;} 

/* Linie, Antwort Historie anzuzeigen */
.vertical_line{width: 2px;margin-top: 50px;margin-left: 16px;position: absolute;background: lightgray;}
.vertical_line_dotted{display: inline-block;border-right: 4px dotted #ccc;height: 2em;margin: 0em 1em;}

/* Modal Dialog zum Profilbild Upload */
.modal-body.profilbild{border-radius: .5em;}
.profilbild_speichern{margin-left: 1em;border-radius: 1em;padding: .3em 1em;background: #369;border: 1px solid #fff;color: #fff;font-size: 1.1em;}
.profilbild_schliessen{border: 1px solid lightgray;padding: .3em 1em;border-radius: 1em;background: transparent;color: #c3bdbd;}
.profilbild_schliessen:hover{background: #369; border:1px solid #fff; color:#fff;}
.profilbild_speichern:focus, .profilbild_schliessen:focus {outline: none;}
.mein_profilbild{display: block;margin: 0px auto;border-radius: 5em;width: 145px;height: 145px;object-fit: cover;}
.text-center.profilbild-submit{margin-top: 3em;}

/* Alles bis größe Telefone */
@media only screen and (max-device-width: 425px) { 
   #labelText{display: none;}
   .dynamic{background:#369;color:#fff;}
}

/* Bis zu dieser größe können like, dislike und Antworten nicht eine Zeile gepackt werden */
@media only screen and (max-device-width: 560px) { 
   .comments_container>a{word-break: break-all !important;} /* damit Links nicht die Sicht sprengen */
   .mobile_hide{display: none !important;}
   .mobile_show{display: block !important;}
   .flexrow_interaktion > .antworten_option_community {flex: 1 0 100%;border-top: 1px solid lightgray;}
   .antworten_text{position: relative;}
   svg.antworten{margin-bottom: -.3em;}
   .ql-toolbar.ql-snow .ql-formats:first-child{display: none;} /* fett, kursiv, unterstrichen raus */
}

@media only screen and (min-device-width: 561px) {  /* Mobile Styles auf größeren Geräten umkehren */
   .mobile_hide{display: block !important;}
   .mobile_show{display: none !important;}
}

/* Alles bis Tablet-Größe */
@media only screen and (max-device-width: 767px) {
   .container{padding-bottom:0;} /* Der alte container */
   .breadcrump-scroller {padding: 0em .5em;}
   .mobil_kein_margin{margin:0!important;}
   #first-comment{padding: 1em .5em;}
   #first-comment > .ueberschrift-thread {font-size:1.5em;}
   .kommentar{padding:0; margin: .5em 0em;}
   .kommentar_wrapper{border-top: 1px solid lightgray;border-bottom: 1px solid lightgray;border-radius: 0em;border-left: 0;border-right: 0;box-shadow: none;}
   .antworten_flexrow_wrapper{padding: 1em 0em 0em 0em;}
   .kommentar_button_senden{position: inherit;float: right;margin-top: .5em;margin-right: 0;}
   .ebene0{border-top-right-radius: 0 !important;}
   .loader{left:35%}
   #form1>.form-group>.ql-toolbar.ql-snow{border-radius: 0;border-left: 0;border-right: 0;}
   #form1>.form-group>.ql-toolbar.ql-snow + .ql-container.ql-snow{border-radius: 0;border-left: 0;border-right: 0;}
   .checkbox{padding-left:.5em;}
   .kommentar_button_senden.bereit{margin-top: .5em !important;} /* margin-right: .5em !important; */
   .neues_thema{margin: 1em 0 0 .5em;}
}