/* default.css */
/*
 * https://www.drweb.de/magazin/zeitgemaesse-rasterlayouts-mit-css-grids-48432/
 * http://jsfiddle.net/u6xZF/1/
 * http://jsfiddle.net/Nnjpq/1/

 @viewport{
    zoom: 1.0;
    width: device-width;
}
 */

* {
/* So 100% means 100% */
box-sizing:border-box;
scrollbar-width:none;
scrollbar-color:rgba(0,0,0,0) rgba(0,0,0,0);
}
*::-webkit-scrollbar {
width:0px;
scrollbar-width:none;
scrollbar-color:rgba(0,0,0,0) rgba(0,0,0,0);
}
*::-webkit-scrollbar-track {
background:rgba(0,0,0,0);
}
*::-webkit-scrollbar-thumb {
background-color:rgba(155, 155, 155, 0.5);
border-radius:20px;
border:transparent;
}

html {
scrollbar-width:none;
}
body {
/* width:calc(100% - 2px); */
width:100%;
min-width:265px;
font-family:'Arial', 'Helvetica', sans-serif, 'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', 'Android Emoji', EmojiSymbols;
/* font-family:'Arial', 'Helvetica', sans-serif; */
font-size:12px;
line-height:16px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
padding:0px;
overflow-y:scroll;
overflow-x:hidden;

background-color:var(--body-background-color);
background-image:var(--body-background-image-url);
background-attachment:var(--body-background-image-attachment);
background-repeat:var(--body-background-image-repeat);
background-size:var(--body-background-image-size);
background-position:var(--body-background-image-position);
}

.fsNormal {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:16px;
}

form, table, td {
padding:0px;
margin:0px;
border-spacing:0px;
}

th {
text-align:left;
font-weight:bold;
}

h1, h1 a, h2, h2 a {
padding:0px;
margin:0px;
line-height:20px;
font-size:18px;
}

h3, h3 a {
padding:0px;
margin:0px;
line-height:16px;
font-size:16px;
}

h4, h4 a {
padding:0px;
margin:0px;
font-weight:bold;
font-size:12px;
line-height:12px;
}

a {text-decoration:none;}
a:focus {outline:none;}

img {border:0px none;}

a > img {
display:block;
}

/* Forced transparency */
.border-transparent, .transparentBorder {
border:1px solid transparent;
}

.disableEvents {
pointer-events:none;
}
.dynamicGroups > a > img {
display:inline;
}

.uploadSelector {
padding:0px;
margin:0px;
height:0px;
}

button {
font-family:'Arial', 'Helvetica', 'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', 'Android Emoji', EmojiSymbols, sans-serif;
}
input, textarea, select, file {
height:18px;
font-family:'Arial', 'Helvetica', sans-serif, 'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', 'Android Emoji', EmojiSymbols;
font-size:12px;
line-height:12px;
outline:none;
padding:0px 0px 2px 5px;
vertical-align:middle;
caret-color:var(--input-caret-color);
}
/*
input[type="text"], input[type="password"], input[type="select"], input[type="checkbox"], input[type="file"],
input[type="date"], input[type="email"], input[type="tel"] {
height:18px;
padding:0px 0px 2px 7px;
vertical-align:middle;
}
*/
input[type="date"] {
padding-top:4px;
}
input[type="checkbox"] {
margin:0px;
}


select {
cursor:pointer;
}

input[type="submit"], input[type="button"], input[type="reset"] {
/* height:17.5px; */
height:19.5px;
font-weight:bold;
line-height:12px;
padding:0px 5px 0px 5px;
outline:none;
position:relative;
top:2px;
cursor:pointer;
}

input[type="text"], input[type="password"], input[type="file"], input[type="email"], input[type="tel"] {
padding-top:1px;
}

input[type="file"] {
cursor:pointer;
opacity:0;
}

textarea {
height:18px;
padding-top:2px;
}

ul {
margin:0px;
padding:0px 0px 0px 10px;
}

div.shadow, span.shadow, h1.shadow, h2.shadow, h3.shadow, h4.shadow, h5.shadow, h6.shadow, .textShadow {
/*
text-shadow:0px 0px 5px var(--image-player-control-shadow-color);
*/
text-shadow:0.5px 0.5px 2px var(--image-player-control-shadow-color),
-0.5px -0.5px 2px var(--image-player-control-shadow-color)
}
div.linebreaks, span.linebreaks {
white-space:pre;
}

.unselectable {
-moz-user-select:none;
-webkit-user-select:none;
-webkit-touch-callout:none;
-ms-user-select:none;
-khtml-user-select:none;
-o-user-select:none;
user-select:none;
}

.displayNone {
display:none;
}

/** OBJECT FIT */
.objectFitContain {
object-fit:contain !important;
}
.objectFitCover {
object-fit:cover !important;
}
.objectFitFill {
object-fit:fill !important;
}
.centered {
/* position:fixed; */
top:50%;
left:50%;
/* bring your own prefixes */
transform:translate(-50%, -50%);
}

textarea {
resize:none;
}

.ellipsis {
white-space:nowrap;
text-overflow:ellipsis;
}
.faded {
opacity:0.4;
}
.left {
float:left;
}
.right {
float:right;
}
.nowrap {
word-wrap:break-word;
overflow-wrap:break-word;
}

.svgPlaceholder {
position:relative;
}
svg.shadow, svg.shadowed {
filter:url(#svgFilterDefaultIcons);
}
svg.filterMediaPlayerImage {
filter:url(#svgFilterMediaPlayerImage);
}
svg.filterMediaPlayerVideo {
filter:url(#svgFilterMediaPlayerVideo);
}
svg.dynamicColorizeFilter filter#svgFilterDefaultIcons feFlood {
flood-color:var(--image-player-control-shadow-color);
}
svg.dynamicColorizeFilter filter#svgFilterMediaPlayerImage feFlood {
flood-color:var(--image-player-control-shadow-color);
}
svg.dynamicColorizeFilter filter#svgFilterMediaPlayerVideo feFlood {
flood-color:var(--video-player-control-shadow-color);
}

/*
svg.dynamicColorizeFilter defs filter feMorphology {
radius:3;
}
*/

.loaderWrapper {
/*
width:fit-content;
position:absolute;
*/
position:relative;
z-index:1;
margin-top:10px;
display:none;
}
.loader-ellipsis {
width:30px;
height:3px;
/*
margin-left:calc(50% + 30px);
margin-top:-18px;
*/
display:flex;
justify-content:center;
align-items:center;
margin:auto auto;
}
.loader-ellipsis div {
  width:2px;
  height:2px;
  background-color:var(--font-primary-color);
  border-radius:0%;
  margin:0 2px;
  animation:ellipsis-fader 1.4s infinite ease-in-out both;
}
.loader-ellipsis div:nth-child(1) { animation-delay: -0.32s; }
.loader-ellipsis div:nth-child(2) { animation-delay: -0.16s; }
.loader-ellipsis div:nth-child(3) { animation-delay: 0s; }
@keyframes ellipsis-fader {
  0%, 80%, 100% { transform: scale(0); opacity: 0.6; }
  40% { transform: scale(1.0); opacity: 1; }
}

/** GRIDS AND FLEXBOXES */
.flexbox {
display:inline-flex;
flex-direction:row;
flex-wrap:wrap;
align-content:space-between;
justify-content:flex-start;
margin:-5px;
padding-top:5px;
&:after {
content: "";
flex: auto;
  }
}
.flexboxImages {
grid-template-columns:repeat(auto-fit, 124px);
}
.flexboxVideos {
grid-template-columns:repeat(auto-fit, 162px);
}
.flexboxKnowledges {
grid-template-columns:repeat(auto-fit, 265px);
}
/** OVERFLOWS */
.autoOverflow, .autoClipping {
overflow:hidden;
}

/** ROUNDINGS */
.noRounding, .noRoundings {
border-radius:0px;
}
/* default.content.css */
/** GENERAL */
.error, .warning, .info, .notice {
margin-bottom:10px;
padding:10px;
}

.debugInfo {
display:none;
}

.contentOuter {
width:100%;
min-height:100vh;
margin:0px auto 0px auto;
overflow-x:hidden;
overflow-y:visible;
}

.contentInner {
overflow:visible;
}

div.contentToolbar {
min-height:28px;
vertical-align:middle;
margin-top:0px;
}
.contentToolbar h1, .contentToolbar h2 {
max-width:calc(100% - 0px);
min-height:22px;
display:inline;
float:left;
/* white-space:break-spaces; */
overflow:visible;
padding-bottom:10px;
}
.contentToolbar h1, .contentToolbar h2, .contentToolbar span {
/* margin-bottom:10px; */
}

div.counter {
min-width:15px;
height:15px;
font-size:12px;
font-weight:bold;
padding:0px 4px 0px 4px;
position:absolute;
line-height:16px;
overflow:hidden;
}
/* 2024-11-15
div.counterThread {
display:inline-block;
position:relative;
}
*/

/** TABLES */
table.inputGrid td {
padding:0px 5px 5px 0px;
}

td.key {
vertical-align:top;
padding-right:20px;
}

.videoDuration {
width:50px;
height:20px;
display:block;
position:relative;
top:0px;
left:calc(100% - 55px);
margin-top:-20px;
margin-left:0px;
text-align:right;
padding:3px 0px 0px 0px;
/* z-index:1; */
}

/** CONTENT */
.bg1.padding {
padding:10px 10px 0px 10px;
}
.bg1.nopadding {
padding:0px;
}
/** -- /static/network/ */
.onreefContentLogoStaticNetworkConditional {
display:none;
}
@media all and (min-width: 565px) {
.onreefContentLogoStaticNetworkConditional {
display:inline;
}
}

/** MEDIAS (VIDEOS) */
div.mediaItemIconContainer {
width:25px;
margin-top:-25px;
margin-left:5px;
}
div.mediaItemIconContainerMicro {
margin-top:-19px;
}
svg.mediaItemPlayIcon {
height:22px;
}

/** SCROLLBARS */
.scrollbarsContainer {
border:1px solid #FFF;
}
.scrollbarsScroller {
background:#FFF;
}

/** CONDITIONALS */
@media all and (max-width: 350px) {
.conditional-hide-max350 {
display:none !important;
}
}
@media all and (max-width: 380px) {
.conditional-hide-max380 {
display:none !important;
}
}
@media all and (max-width: 380px) {
.conditional-100-max380 {
width:100% !important;
}
}
@media all and (max-width: 400px) {
.conditional-hide-400max {
display:none;
}
.conditional-100-max400 {
width:100% !important;
}
}
.conditional-50-min700 {
width:50%;
}
@media all and (max-width: 700px) {
.conditional-50-min700 {
width:100%;
}
}

.conditional-max560-lpadding-10, .conditional-max560-lrpadding-10, .conditional-max560-rlpadding-10 {
padding-left:0px;
}
.conditional-max560-rpadding-10, .conditional-max560-lrpadding-10, .conditional-max560-rlpadding-10 {
padding-right:0px;
}
@media all and (max-width: 560px) {
.conditional-max560-lpadding-10, .conditional-max560-lrpadding-10, .conditional-max560-rlpadding-10 {
padding-left:10px;
}
.conditional-max560-rpadding-10, .conditional-max560-lrpadding-10, .conditional-max560-rlpadding-10 {
padding-right:10px;
}
}
.conditional-min560-lpadding-10, .conditional-min700-lpadding-10 {
padding-left:10px;
}
.conditional-min560-rpadding-10, .conditional-min700-rpadding-10 {
padding-right:10px;
}
@media all and (max-width: 560px) {
.conditional-min560-lpadding-10 {
padding-left:0px;
}
.conditional-min560-rpadding-10 {
padding-right:0px;
}
}
@media all and (max-width: 700px) {
.conditional-min700-lpadding-10 {
padding-left:0px;
}
.conditional-min700-rpadding-10 {
padding-right:0px;
}
}

/** SURVEYS */
/*
.surveyContainer tr.surveyVoteContainer {
margin-bottom:10px;
cursor:pointer;
}
.surveyContainer td.surveyVoteSubject {
width:10%;
max-width:50%;
height:20px;
padding-right:10px;
overflow:hidden;
}
.surveyContainer td.surveyBarWrapper {
height:20px; 
}
.surveyContainer div.surveyVoteSubject {
margin-top:0px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
text-align:left;
}
.surveyContainer div.surveyVoteIcon {
width:20px;
display:block;
margin-top:-3px;
float:left;
}
.surveyContainer img.surveyVoteIcon, .surveyContainer svg.surveyVoteIcon {
margin-top:4px;
margin-left:5px;
margin-right:5px;
}
.surveyContainer div.surveyVoteBar {
min-width:50px;
height:16px;
margin-top:-1px;
margin-left:1px;
float:left;
}
.surveyContainer .surveyVotePercentage {
display:none;
margin-top:0px;
margin-left:5px;
float:left;
}
.surveyContainer.unvotable tr.surveyVoteContainer {
cursor:auto;
}
.surveyContainer.unvotable table.surveyContainerBar {
width:100%;
}
.surveyContainer.unvotable td.surveyVoteSubject {
overflow:hidden;
}
.surveyContainer.unvotable td.surveyBarWrapper {
width:50%;
max-width:50%;
}
.surveyContainer.unvotable div.surveyVoteSubject {
text-align:right;
}
.surveyContainer.unvotable div.surveyVoteIcon {
display:none;
}
.surveyContainer.unvotable div.surveyVoteBar {
min-width:50px;
display:block;
}
.surveyContainer.unvotable .surveyVotePercentage {
display:block;
}
*/
.surveyBarChartReplies {
display:grid;
grid-template-columns:auto 28px 3fr;
row-gap:5px;
column-gap:5px;
}
.surveyContainer.unvotable .surveyBarChartReplies {
grid-template-columns:auto 2fr 40px;
}
.surveyBarChartReplyLabel {
min-height:24px;
display:flex;
align-items:center;
}
.surveyBarChartReplyVote {
display:flex;
align-items:center;
justify-content:center;
border-radius:var(--input-border-radius);
cursor:pointer;
}
.surveyContainer.unvotable .surveyBarChartReplyVote {
display:none;
cursor:auto;
}
.surveyBarChartReplyVote.unvotable {
cursor:auto;
}
.surveyBarChartReplyVote svg.surveyVoteIcon {
width:19px;
height:17px;
opacity:0.4;
}
.surveyBarChartReplyVote svg.surveyVoteIcon.voted {
opacity:1;
}
.surveyBarChartReplyBarContainer {
display:none;
}
.surveyContainer.unvotable .surveyBarChartReplyBarContainer {
display:block;
}
.surveyBarChartReplyBar {
min-width:1px;
height:100%;
border-radius:var(--input-border-radius);
}
.surveyBarChartReplyResult {
display:none;
align-items:center;
justify-content:end;
}
.surveyContainer.unvotable .surveyBarChartReplyResult {
display:flex;
}
.surveyContainer.unvotable .surveyBarChartReplySpacer {
display:none;
}

/** UPLOAD */
.uploadCopy {
display:none;
}
.uploadCount {
padding-bottom:1px;
}
.uploadFileName {
max-width:100px;
height:17px;
overflow:hidden;
float:left;
word-wrap:break-word;
word-break:break-all;
}
.uploadFilePercent {
 float:left;
}
.uploadFileProgress {
width:100px;
height:5px;
/* float:left;
margin-left:5px;
*/
margin-top:3px;
margin-left:2px;
outline:1px solid white;
overflow:hidden;
display:none;
}
.uploadFileProgressBar {
width:0px;
height:5px;
background-color:white;
}
.uploadFileAbort, .uploadFileDelete {
width:10px;
display:none;
float:left;
margin-left:5px;
}
.draggable {
border:1px solid transparent;
}

/** MESSENGER */
.globalLayerMessenger, .messengerChatContainer {
display:none;
z-index:5;
}
.globalLayerMessenger {
width:230px;
height:30px;
max-height:75%;
overflow:hidden;
margin-right:2px;
position:fixed;
right:0px;
bottom:0px;
/* background-color: {$USERINFO.SETTINGS.DISPLAY.body_background} !important; */
}
.globalLayerMessengerOpened {
height:400px;
}
.globalLayerMessenger .messengerHeadline {
width:calc(100% - 70px);
}
.globalLayerMessenger > .contactsListContainer {
width:230px;
max-height:calc(100% - 30px);
display:none;
overflow-x:hidden;
overflow-y:scroll;
}
.globalLayerMessenger > .contactsListContainer > .contactsList {
/* width:205px; */
/* margin:0px 5px 10px 5px; */
}
.globalLayerMessenger .contactsListContainer .countUnreadConversations {
position:absolute;
margin-top:-45px;
margin-left:25px;
}
.messengerChatContainer {
width:230px;
height:330px;
position:fixed;
right:0px;
bottom:0px;
}
.messengerChatContainer .chatHistoryContainer {
width:210px;
height:250px;
overflow-x:hidden;
overflow-y:scroll;
}
.messengerChatContainer .chatHistoryContainer .chatHistory {
width:210px;
overflow:visible;
word-wrap:break-word;
word-break:break-all;
}
.messageContainer .messageText {
/* word-wrap:break-word; */
word-break:break-all;
}
.messengerChatContainer .messengerChatInputText {
width:calc(100% - 50px);
}
/** MESSENGER MODAL */
.globalLayerMessengerModal {
width:100%;
height:calc(100% - 1px);
max-width:100%;
max-height:calc(100% - 1px);
position:relative;
margin:0px;
box-sizing:border-box;
}
.globalLayerMessengerModal > .contactsListContainer {
width:100%;
max-height:auto;
}
.globalLayerMessengerModal .contactsListContainer .contactsList {
width:100%;
}
.messengerChatContainerModal {
width:100%;
height:100%;
top:0px;
left:0px;
right:auto;
bottom:auto;
}
.messengerChatContainerModal .chatHistoryContainer {
width:calc(100% + 20px);
overflow-x:hidden;
overflow-y:scroll;
}
.messengerChatContainerModal .chatHistoryContainer .chatHistory {
width:calc(100% - 10px);
}

/** TRANSPARENCY */
.transparentBorder {
border:1px solid transparent;
}
.transparentBackground {
background:transparent;
}
.dashboardApp {
border:1px solid transparent;
}

.inputInvisible {
border-color:transparent;
background-color:transparent;
color:var(--font-primary-color);
}
.inputBg1, .inputColorPrimary {
background-color:var(--bg1-background-color);
color:var(--font-primary-color);
}

/** MESSAGES */
.userMessagesThreadsMessages .profileLink {
display:block;
}
@media all and (max-width: 650px) {
.userMessagesThreadsMessages .profileLink {
display:none;
}
}

/** CAROUSEL */
.carouselContainer {
overflow:hidden;
}
.carouselOuter {
width:fit-content;
margin:auto auto;
}
.carousel {
width:fit-content;
height:fit-content;
display:flex;
overflow-x:visible;
margin:auto auto;
}
/*
.carousel {
overflow:hidden;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
align-content:stretch;
user-select:none;
}
*/
/*
.carouselClone {
height:90px;
overflow:hidden;
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:center;
align-items:stretch;
align-content:stretch;
user-select:none;
}
.carouselCloneWrapper {
height:95.5px;
}
.carouselPreloader {
display:none;
overflow:hidden;
}
*/
.carouselItem {
/* height:80px; */
margin:5px;
min-width:86px;
max-width:126px;
cursor:pointer;
flex:1;
float:left;
}
.carouselItem > div {
height:calc(100% - 0px);
overflow:hidden;
}
.carouselItem a {
display:block;
}
.carouselProfile .carouselItem, .carousel_profile .carouselItem, .carousel_profiles .carouselItem {
min-width:66px;
max-width:106px;
}
.carouselImages .carouselItem, .carousel_images .carouselItem {
min-width:84;
max-width:114px;
}
.carouselVideos .carouselItem, .carousel_videos .carouselItem {
min-width:122px;
max-width:152px;
}
.carouselKnowledge .carouselItem, .carousel_knowledge .carouselItem, .carousel_knowledge_questions .carouselItem {
min-width:240px;
max-width:280px;
overflow:hidden;
}
.carousel_images img {
aspect-ratio:4/3;
}
.carousel_videos img {
aspect-ratio:16/9;
}

@media all and (max-width : 420px) {
.autoHideOnMobile {
display:none;
}
}

/** PROFILE */
.autoEmbedMediaPlayerProfile .mediaPlayerContainer {
max-width:calc(100vw - 30px);
aspect-ratio:4/3;
/* margin-left:10px; */
}
.profileViewMediaImage {
width:100%;
min-width:280px;
/* max-width:calc(100vw - 20px); */
}
.profileDataProfileLabel {
min-height:60px;
}
.profileDataProfileLabel svg.noshadow, .profileDataProfileLabel h2.noshadow {
display:inline;
}
.profileDataProfileLabel svg.shadow, .profileDataProfileLabel h2.textShadow {
display:none;
}
.profileLayoutContainerMedia {
width:calc(100% - 20px);
margin-left:10px;
margin-top:-8vw;
}
@media all and (min-width: 800px) {
.profileLayoutContainerMedia {
width:calc(60vw - 35px);
/* padding-right:10px; */
float:left;
}
.profileLayoutContainerData {
max-width:calc(40vw - 35px);
margin-top:-65px;
float:left;
margin-left:20px;
}
.profileDataProfileLabel svg.noshadow, .profileDataProfileLabel h2.noshadow {
display:none;
}
.profileDataProfileLabel svg.shadow, .profileDataProfileLabel h2.textShadow {
display:inline;
}
}

/** PROFILE EDIT */
.userProfileEditProfileImage, .userProfileEditProfileImage > div {
border:1px solid transparent;
border-radius:var(--media-border-radius);
}
.userProfileEdit_uploadContainer .sortableDraggableItemActive {
border-style:dashed;
border-color:var(--font-primary-color);
}
.userProfileEditProfileImage .mediaPlayerContainer {
height:100%;
background:transparent;
}
.userProfileContainer_profileImages .userProfileEditProfileImage {
width:66px;
height:80px;
margin-right:10px;
float:left;
}
.userProfileContainer_profileImages .userProfileEditProfileImage:not(:first-child) img.switchMedia {
width:calc(100% - 4px) !important;
margin:0px 0px 0px -3.5px;
}

.userProfileContainer_profileImages .userProfileEditProfileImage:first-child {
width:142px;
height:160px;
margin-top:-80px;
}
.userProfileEdit_uploadContainer .uploadResponseContainer:first-child > div,
.userProfileEdit_uploadContainer .uploadCopy:first-child > div {
/** Der Upload Container sitzt ein paar Pixel zu hoch, wir versuchen ihn in eine Flucht zu bekommen */
margin-top:3px;
}
.userProfileContainer_profileImages .userProfileEditProfileImage:first-child .tempUploadSpacer,
.userProfileEdit_uploadContainer .tempUploadContainer:first-child .tempUploadSpacer {
height:4px;
}
.userProfileContainer_profileImages .userProfileEditProfileImage:first-child .switchMedia {
width:142px;
height:160px;
z-index:2;
}
.userProfileContainer_profileImages .userProfileEditProfileImage:first-child .mediaSelectorContainer {
margin-top:-110% !important;
z-index:2;
}
/* default.header.css */
svg.headerLogo {
width:161px;
height:40px;
position:relative;
/* margin-bottom:-27px; */
/* aspect-ratio:4 / 1; */
}
.headerLoggedOutSlogan {
width:180px;
/*
float:none;
clear:both;
*/
white-space:nowrap;
word-break:keep-all;
/* margin-top:0px; */
margin-top:60px;
margin-left:10px;
margin-bottom:15px;
}
.headerLoggedOutRight {
float:right;
margin:5px 10px 0px 10px;
}
.headerLoginLinks {
text-align:right;
}
.headerLoggedOutRight .globalFormLogin {
text-align:right;
}
.globalFormLogin div.containerInputLoginUsername {
float:none;
clear:both;
}
.globalFormLogin input.inputLoginUsername {
width:180px;
margin-top:1px;
/* margin-bottom:10px; */
}
.globalFormLogin input.inputLoginPassword {
width:84px;
margin-top:1px;
margin-right:3px;
/* margin-bottom:10px; */
}
.globalFormLogin .inputLoginSubmit {
width:90px;
margin-top:-2px;
}
@media all and (min-width: 350px) {
.headerLoggedOutRight {
float:right;
}
.headerLoginLinks {
text-align:right;
}
}
@media all and (min-width: 555px) {
.headerLoggedOutSlogan {
float:none;
clear:both;
margin-top:0px;
}
.globalFormLogin div.containerInputLoginUsername {
float:left;
clear:none;
}
.globalFormLogin div.containerInputLoginPassword {
float:left;
clear:none;
margin-top:0px;
margin-left:5px;
}
.globalFormLogin input.inputLoginUsername {
width:150px;
}
.globalFormLogin input.inputLoginPassword {
width:80px;
}
}
@media all and (min-width: 740px) {
.headerLoggedOutSlogan {
float:left;
clear:none;
margin-top:35px;
}
}
/*
.contentHeaderSpace {
height:10px;
display:none;
}
*/
.headerLeft {
margin:0px 0px -10px 0px;
float:left;
}
div.headerLogo {
float:left;
margin:10px 0px 0px 8px;
}
.headerRight {
float:right;
margin:10px 10px 0px 0px;
}
.headerCenter {
width:100%;
margin-top:0px;
float:left;
}
.headerCenterLeft {
height:30px;
float:left;
}
.headerCenterRight {
height:30px;
margin-right:-15px;
float:right;
}
.headerCenterSearch {
width:calc(100% - 15px);
height:23px;
margin-top:5px;
margin-left:8px;
float:left;
}
@media all and (max-width: 599px) {
.headerCenterRight {
margin-right:5px;
}
}
@media all and (min-width: 370px) and (max-width: 599px) {
.headerCenterSearch {
width:calc(100% - 240px);
}
.headerCenterRight {
margin-right:5px;
}
}
@media all and (min-width: 600px) {
/*
.contentHeaderSpace {
display:block;
}
*/
.headerCenter {
width:calc(100% - 240px);
margin-top:28px;
}
.headerCenterSearch {
width:calc(100% - 225px);
}
}

/** NAVIGATION TOP */
.counterNavigationTop {
width:13px;
height:15px;
font-weight:bold;
padding:0px 3px 0px 3px;
position:absolute;
margin-top:-26px;
margin-left:15px;
}
.counterNavigationTopContacts {
margin-left:12px;
}
.counterNavigationTopNews, .counterNavigationTopKnowledge {
margin-left:10px;
}
.counterNavigationTopImages {
margin-left:14px;
}
.counterNavigationTopProfile {
margin-top:-49px;
margin-left:26px;
}
/* columns_default.css */
/** DEFAULT */
.leftColumn {
min-width:265px;
margin-left:5px;
margin-right:5px;
}
.rightColumn {
min-width:265px;
margin-left:5px;
margin-right:5px;
}

.columns {
overflow-x:hidden;
}

.columnsList {
overflow-x:visible;
margin-left:-4px;
margin-right:-4px;
}

.columnsList > div {
float:left;
}

/** COLUMN-2-265 */
.column-2-265 {
width:100%;
float:none;
}
.column-2-265 > div {
padding:0px;
}

/** COLUMNX-104 */
.columnX-104 {
width:100%;
}

.columnX-104 > a {
width:100%;
display:block;
margin-bottom:10px;
line-height:0px;
}

.columnX-104 > a > img {
width:100%;
}

/* columns_conditional.css */
/** 1/3:2/3 Columns nebeneinander mit mindestens 265px */
.column-33, .column-50, .column-77 {
width:100%;
float:none;
}
.column-33 > div, .column-50 > div, .column-77 > div {
margin-left:0px;
margin-right:0px;
}

/* Komischerweise funktioniert die exakte Breiten-Berechnung nicht und wir muessen mehr Raum in die
 * Breite beruecksichtigen als rechnerisch notwendig waere
 */
@media all and (min-width: 540px) {
.column-50 {
width:calc(50% - 5px);
min-width:265px;
max-width:calc(50% - 5px);
margin:0px;
}
.column-50:nth-child(odd) {
float:left;
margin-right:5px;
}
.column-50:nth-child(even) {
float:right;
margin-left:5px;
}
}
@media all and (min-width: 630px) {
.column-33 {
min-width:235px;
max-width:33%;
float:left;
}
.column-33 > div {
margin-right:5px;
}
.column-77 {
min-width:235px;
max-width:67%;
float:right;
}
.column-77 > div {
margin-left:5px;
}
}

/** 2 265 Columns nebeneinander */

@media all and (min-width: 540px), (min-device-width: 540px) {
.column-2-265 {
width:50%;
width:calc(50% - 5px);
}
.column-2-265:nth-child(odd) {
float:left;
}
.column-2-265:nth-child(odd) > div {
padding-right:5px;
}
.column-2-265:nth-child(even) {
float:right;
}
.column-2-265:nth-child(even) > div {
padding-left:5px;
}
}

@media all and (min-width: 218px) and (max-width: 332px), (max-device-width: 332px) {
.columnX-104 {
width:50%;
float:left;
}
.columnX-104 > a {
width:95%;
}
.columnX-104:nth-child(2n) > a {
margin-left:auto;
margin-right:0px;
}
}

@media all and (min-width: 332px) and (max-width: 446px), (max-device-width: 446px) {
.columnX-104 {
width:33.3333%;
float:left;
}
.columnX-104 > a {
width:95%;
}
.columnX-104:nth-child(3n+2) > a {
margin-left:2.5%;
margin-right:2.5%;
}
.columnX-104:nth-child(3n+3) > a {
margin-left:auto;
margin-right:0px;
}
}

@media all and (min-width: 446px) and (max-width: 560px), (max-device-width: 560px) {
.columnX-104 {
width:25%;
float:left;
}
.columnX-104 > a {
width:95%;
}
.columnX-104:nth-child(4n+3) > a {
margin-left:auto;
margin-right:0px;
}
.columnX-104:nth-child(4n+4) > a {
margin-left:auto;
margin-right:0px;
}
}

@media all and (min-width: 560px) and (max-width: 674px), (max-device-width: 674px) {
.columnX-104 {
width:20%;
float:left;
}
.columnX-104 > a {
width:95%;
}
.columnX-104:nth-child(5n+3) > a {
margin-left:2.5%;
margin-right:2.5%;
}
.columnX-104:nth-child(5n+4) > a {
margin-left:auto;
margin-right:0px;
}
.columnX-104:nth-child(5n+5) > a {
margin-left:auto;
margin-right:0px;
}
}

@media all and (min-width: 674px) {
.columnX-104 {
width:16.6666%;
float:left;
}
.columnX-104 > a {
width:94%;
}
.columnX-104:nth-child(6n+4) > a, .columnX-104:nth-child(6n+5) > a, .columnX-104:nth-child(6n+6) > a {
margin-left:auto;
margin-right:0px;
}
}
/* columns_flexbox.css */
/*
 * http://www.mediaevent.de/css/display-flex.html
 * https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/
 * http://caniuse.com/#feat=flexbox
 */
.flexboxContainer, .flexboxContainerProfiles, .flexboxContainerAudios, .flexboxContainerImages,
.flexboxContainerVideos, .flexboxContainerKnowledges, .flexboxContainerThemes {
display:flex;
flex-direction:row;
flex-wrap:wrap;
/* justify-content:space-between; */
justify-content:center;
align-items:stretch;
align-content:stretch;

padding-top:5px;
margin:-5px -5px -5px -5px;
}

/*
.flexboxContainer:after, .flexboxContainerImages:after, .flexboxContainerVideos:after, .flexboxContainerAudios:after {
content:"";
display:inline-block;
padding-left:100%;
}
*/
.flexboxItem, .flexboxContainer > div, .flexboxContainerProfiles > div, .flexboxContainerAudios > div,
.flexboxContainerImages > div, .flexboxContainerVideos > div, .flexboxContainerKnowledges > div,
.flexboxContainerThemes > div {
flex:1;
}
/*
.flexboxContainer > div > div > a > img {
height:80px;
max-height:80px;
}
*/
.flexboxItem, .flexboxContainer > div {
min-width:205px;
}
.flexboxContainerThemes > div {
min-width:290px;
max-width:600px;
/* max-height:300px; */
margin-left:5px;
margin-right:5px;
margin-bottom:10px;
overflow:visible;
}
.flexboxContainerProfiles > div {
min-width:96px;
max-width:136px;
}
.flexboxContainerProfilesMedium > div {
min-width:142px;
max-width:192px;
}
.flexboxContainerImages > div {
min-width:124px;
/* max-width:247px; */
max-width:164px;
}
.flexboxContainerImagesMedium > div {
min-width:178px;
max-width:268px;
}
.flexboxContainerVideos > div {
min-width:162px;
max-width:242px;
}
.flexboxContainerVideosMedium > div {
min-width:298px;
max-width:348px;
}
.flexboxContainerKnowledges > div {
min-width:245px;
/* max-width:247px; */
max-width:304px;
}

/* dropdowns_default.css */
.dropdownLayer {
overflow:visible;
}

.headerLeft > .dropdownLayer {
float:left;
}

.headerRight > .dropdownLayer {
float:right;
}
/*
.dropdownLayerProfile, .dropdownLayerProfile > div:nth-child(1) {
width:33px !important;
height:40px !important;
right:10px;
}
*/

/** Header */
.dropdownHeader {
border:1px solid #FFFFFF;
border-bottom:0px none !important;
}

/** Title */
.dropdownTitle {
min-height:22px;
display:block;
}

/** Container 1 */
.dropdownLayer > div:nth-child(1) {
border:1px solid transparent;
border-bottom:0px none !important;
position:relative;
cursor:pointer;
display:block;
z-index:auto;
padding:5px;
margin-right:-0.5px;
font-weight:bold;
}

/** Overlay */
.dropdownLayer > div:nth-child(1) > .dropdownOverlay {
width:0px;
height:0px;
display:none;
position:absolute;
margin-left:-5.5px;
margin-top:-4px;
z-index:auto;
border:1px solid transparent !important;
background-color:transparent;
}
.dropdownLayer > div:nth-child(1) > .dropdownOverlay .dropdownOverlayShield {
width:0px;
height:0px;
display:none;
position:absolute;
margin-left:-5.5px;
margin-top:-4px;
z-index:auto;
border:1px solid transparent !important;
background-color:transparent;
}
/*
.dropdownLayer > div:nth-child(1) > .dropdownOverlay {
width:calc(100% + 1px);
height:15px;
display:none;
position:absolute;
margin-left:-5.5px;
margin-top:-4px;
z-index:auto;
border:1px solid transparent;
border-top:0px none !important;
border-bottom:0px none !important;
border-left:0px none !important;
}
.dropdownLayer > div:nth-child(1) > .dropdownOverlay .dropdownOverlayShield {
width:calc(100% - 5px);
height:10px;
margin-top:-1.5px;
margin-left:0px;
border:1px solid transparent;
border-top:0px none !important;
border-right:0px none !important;
border-bottom:0px none !important;
}
*/

/** Container 2 */
.dropdownActive, .dropdownActive div, .dropdownActive a, .dropdownActive span, .dropdownActive * {
z-index:7;
}

.dropdownLayer > div:nth-child(2) {
display:none;
margin-top:-0.5px;
margin-bottom:0.5px;
z-index:auto;
}

.dropdownRight > div:nth-child(2) {
position:relative;
right:0px;
margin-right:-0.5px;
z-index:auto;
}
/* .dropdownContainer */
.dropdownLayer > div:nth-child(2) > div {
position:absolute;
z-index:auto;
margin-top:-0.5px;
}

.dropdownRight > div:nth-child(2) > div {
min-width:170px;
right:0px;
}

.dropdownLeft > div:nth-child(2) > div {
border-radius:0px var(--dropdown-border-radius) var(--dropdown-border-radius) var(--dropdown-border-radius) !important;
}
/** Container 2 -> a */
.dropdownLayer > div:nth-child(2) > div > a, .dynamicGroups > a, a.dropdown, .containerHover > a, .dropdownContainer > a {
display:block;
padding:10px 10px 10px 10px;
white-space:nowrap;
font-weight:bold;
}

.dropdownHeaderNavigation {
margin:0px 2px 0px 2px;
}

.dropdownHeaderNavigation .dropdownLayer > div:nth-child(2) > div > a, .dropdownHeaderNavigation .dynamicGroups > a, .dropdownHeaderNavigation a.dropdown, .dropdownHeaderNavigation .containerHover > a, .dropdownHeaderNavigation .dropdownContainer > a {
text-align:center;
}

/** Addressbook Container */
.dynamicAddressbookRecipients {
width:160px;
}

/** Dropsides */
.dropsideLayer {
display:none;
float:right;
position:absolute;
margin-top:-37px;
}
.dropsideLayer > .dropdownOverlay {
width:3px;
height:36px;
z-index:8;
position:absolute;
margin-top:3px;
margin-right:-3px;
}
.dropsideLayer > .dropdownContainer {
position:absolute;
}
.optionsShareSettings {
border:0px none !important;
}

/** dropdownActive Das Dropdown ist geoeffnet, dementsprechend gestalten wir es */
/* 1. Container Border setzen bei dropdownActive */
.dropdownActive > div:nth-child(1) {
/* border:1px solid #FFF; */
border-bottom:0px none !important;
z-index:7;
}

.dropdownActive > div:nth-child(2) {
display:block;
}

.dropdownActive .dropdownHide {
display:none;
}
/* 2. Container Border setzen bei dropdownActive */
.dropdownActive > div:nth-child(2) > div {
display:block;
/* border:1px solid #FFF; */
z-index:6;
}
.dropdownActive .dropdownOverlay {
display:block;
z-index:7;
}
.dropdownContainer {
margin-top:1px;
padding-top:7px;
padding-bottom:7px;
border:1px solid transparent;
overflow-x:hidden;
}
/* popups_default.css */
/**
.popupActive {
z-index:7;
}

.popupLayer {
min-width:300px;
min-height:30px;
}

.popupLayer > div {
height:100%;
}
*/

.popupActive {
z-index:7;
}

.popup {
min-width:300px;
max-width:700px;
width:calc(100vw - 50%);
min-height:30px;
max-height:calc(100vh - 118px);
position:fixed;
top:calc(100vh - 85vh);
/*
left:25%;
*/
left:50%;
transform:translateX(-50%);
overflow-x:hidden;
overflow-y:hidden; /* auto */
}

.popupScroll, .popupScrollable {
overflow-y:scroll;
}

@media all and (max-width: 799px) {
.popup {
min-width:calc(100vw - 20%);
max-width:calc(100vw - 10%);
width:calc(100vw - 20%);
}
}

.popupMove {
width:calc(100% - 20px);
height:25px;
position:absolute;
top:2px;
cursor:move;
margin-top:0px;
}

.popupResize {
width:20px;
height:20px;
position:sticky;
right:0px;
bottom:0px;
margin-top:-20px;
float:right;
cursor:se-resize;
}

.popupWrapper {
padding:10px;
margin-right:2px;
}

.popupWrapper .bg1 {
max-width:calc(100% - 0px);
}

.popupLayer > div:not(.popupMove) {
height:100%;
}

.popupModalLayer {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
opacity:0;
z-index:6;
}
/* sortable_default.css */
.sortableItem {
/* border:1px solid transparent; */
border-width:1px;
border-style:dashed;
border-color:transparent;
}
.sortablePlaceholder {
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
border:1px dashed var(--font-primary-color);
float:left;
}
.sortablePlaceholderImageContainer {
width:104px;
height:80px;
margin-bottom:10px;
border:1px dashed var(--font-primary-color);
float:left;
}

/*
.flexContainer {
display:-inline-flex;
display:inline-flex;

-webkit-flex-wrap:wrap;
flex-wrap:wrap;

-webkit-justify-content:flex-start;
justify-content:flex-start;
}

.flexItem {
width:134px;
-webkit-flex-grow:1;
flex-grow:1;
}
*/

.sortableItemDrag > div, .sortableContainerDrop, .sortableItemDragTemporary > div {
border-width:1px;
border-style:dashed;
border-color:var(--font-primary-color);
border-radius:var(--media-border-radius);
cursor:move;
}

/**
UPLOAD PROFILE IMAGES
Hierarchie fuehrt zu Ueberschreibung, da /sortable/default.css spaeter geladen wird.
Daher wurde diese Sektion in default.content.css ausgelagert um !important zu vermeiden.
.userProfileEdit_uploadContainer .sortableDraggableItemActive {
}
*/

/* override.css */
/* INPUTS AUTOFILL */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--input-background-color) inset !important;
}

/* HIGHLIGHTER */
.highlight{background-color:yellow}

/* COLORPICKER */
.jPicker .Title,
.jPicker .Button,
.jPicker .Move,
.jPicker .AHex,
.jPicker .Current {
display:none !important;
}
.jPicker .Preview {
padding:0px !important;
}
div.jPicker {
width:380px !important;
max-width:380px !important;
height:260px !important;
padding:0px 0px 0px 0px !important;
overflow:hidden !important;
position:relative !important;
margin-top:0px !important;
margin-left:0px !important;
background-color:transparent;
border:0px none;
}
table.jPicker {
width:380px !important;
max-width:380px !important;

height:260px !important;
padding:0px !important;
background-color:transparent !important;
border:0px none !important;
}
.jPicker .Map {
margin:0px !important;
padding:0px !important;
}
.jPicker .Bar {
margin:0px 5px 0px 10px !important;
}
.jPicker .Preview {
height:40px !important;
}
.jPicker .Preview div {
height:30px !important;
overflow:hidden !important;
}
table.jPicker td.Radio {
width:40px !important;
white-space:nowrap;
word-break:keep-all;
word-wrap:normal;
}
table.jPicker td.Text {
width:40px !important;
white-space:nowrap;
word-break:keep-all;
word-wrap:normal;
}
table.jPicker td.Text input {
margin:0px !important;
}
table.jPicker td.Text input.Hey {
width:60px;
}
.jPicker input {
/* color:#000 !important; */
font-size:11px;
}
.colorPickerItemIcon {
border:1px solid transparent;
}

/* FLOT Chart */
.legendLabel {padding-left: 5px;}
.flot-base, .flot-overlay {
max-width:100% !important;
max-height:auto !important;
height:auto !important;
}
.pieLabelBackground {
position:sticky !important;
}

/* DRAGGABLE */
.ui-state-disabled {opacity : 1 !important;}

/* RESIZABLE */
.ui-resizable-handle {
opacity:0 !important;
}

/* OSM */
.olControlZoomIn, .olControlZoomOut, #OpenLayers_Control_MaximizeDiv_innerImage {
display:none;
}
.olControlPanZoomBar {
display:none;
}

/* ON/OFF SWITCH */
/* https://proto.io/freebies/onoff/ */
.onoffswitch {
width:63px;
position:relative;
}
.onoffswitch-checkbox {
position:absolute;
opacity:0;
pointer-events:none;
}
.onoffswitch-label {
display:block;
overflow:hidden;
cursor:pointer;
border:0px none; /* 2px solid #999999; */
border-radius:12px;
}
.onoffswitch-inner {
width:200%;
display:block;
margin-left:-100%;
margin-top:-1px;
transition:margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
width:50%;
height:16px;
display:block;
float:left;
padding:2px 0px 0px 0px;
line-height:13px;
font-size:11px;
color:white;
font-family:Trebuchet, Arial, sans-serif;
font-weight:bold;
box-sizing:border-box;
}
.onoffswitch-inner:before {
content:" Online";
padding-left:6px;
/* padding-right: 18px; */
background-color:#00FF55;
color:#FFFFFF;
}
.onoffswitch-inner:after {
content:"Offline";
padding-right:3px;
margin-top:0px;
background-color:#FF0000;
color:#FFFFFF;
text-align:right;
}
.onoffswitch-switch {
width:11px;
height:11px;
display:block;
margin:2px 5px 4px 2px;
background:#FFFFFF;
position:absolute;
top:0;
bottom:0;
right:40px;
border:0px none; /* 2px solid #999999; */
border-radius:15px;
transition:all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left:0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right:0px; 
}
/* ON/OFF SWITCH CUSTOMIZED */
.onoffswitch-switch {
right:42px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
margin-right:3px;
}
/*
.formMediaUpdate .onoffswitch-inner::before {
padding-top:1px;
padding-right:auto;
padding-left:6px;
}
.knowledgeItem .onoffswitch-inner::before {
padding-left:6px;
}
*/

/* user.images.upload, user.videos.upload */
.dynamicViewModeList .uploadContainerLabelText {
max-width:142px;
}
.dynamicViewModeGallery .uploadContainerLabelText {
max-width:142px;
}
.dynamicViewModeList .onoffswitch {
top:-50px;
right:0px;
margin-bottom:0px;
}
.dynamicViewModeGallery .onoffswitch {
top:6px;
right:auto;
margin-bottom:-10px;
}

/*
.dynamicViewMode .selectableListItem {
height:30px;
right:10px;
margin-top:-37px;
clear:both;
margin-right:0px;
padding-top:5px;
text-align:right;
cursor:pointer;
}
*/
.selectableListItem {
/* Zerschiesst den Online/Offline Switch */
/* text-align:right; */
clear:both;
}
.dynamicViewModeList .selectableListItem {
position:absolute;
padding-left:0px;
}
.dynamicViewModeGallery .selectableListItem {
position:relative;
clear:both;
margin-right:-10px;
padding-left:10px;
}
/*
.dynamicViewModeList .selectableListItem svg {
margin-top:-10px;
}
.dynamicViewModeGallery .selectableListItem svg {
margin-top:0px;
}
*/

/** EMOJI PICKER */
.emojiPickerExpand {
background:var(--input-background-color);
}
.autoEmojiPicker .emojiPicker, .autoEmojiPicker .emojiContainer, .autoEmojiPicker .emojiContainerGroup {
border-radius:var(--dropdown-container-bottom-border-radius);
}
.autoEmojiPickerUp .emojiPicker, .autoEmojiPickerUp .emojiContainer, .autoEmojiPickerUp .emojiContainerGroup {
border-radius:var(--dropdown-header-border-radius);
}

/** SYNTAX HIGHLIGHTING */
code, pre {
margin:0px !important;
padding:0px !important;
background:transparent !important;
font-family:'Arial', 'Helvetica', sans-serif, 'Twemoji Mozilla', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', 'Noto Color Emoji', 'Android Emoji', EmojiSymbols !important;
white-space:break-spaces;
word-wrap:break-word;
/*
font-size:12px !important;
color:var(--font-primary-color) !important;
*/
}
/*
code *, pre * {
color:var(--font-primary-color) !important;
font-family:Arial, Helvetica, sans-serif !important;
font-size:12px !important;
line-height:16px !important;
}
*/

/* video.player.css */
video, object, object embed {
width:auto;
height:100%;
max-width:100%;
max-height:100%;
outline:none;
position:relative;
object-fit:contain;
object-position:50% 50%;
display:inline-flex;
align-self:center;
background-size:cover;
overflow:hidden;
margin:0px;
}
video.mediaPreviewVideo {
width:142px;
height:80px;
}

/* Wir haben (noch) nicht gefunden wo das Video her kommt oder eingebettet wird.
Es sollte vermutlich mal die Preview werden die inzwischen im thumbnailPreview
Container eingebettet wird */
/*
.mediaPlayerContainerVideo .mediaPreviewVideo {
display:none;
}
*/
.fullscreenActiveClone {
width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;
/* cursor:pointer; */
z-index:12;
}
/* Um 16:9 Format zu gewaehrleisten */
/*
.autoVideoContainer {
position:relative;
padding-bottom:56.25%;
padding-top:25px;
height:0;
}
.autoVideoContainer iframe {
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important;
}

.autoVideoContainer {
overflow:hidden;
}
*/
.switchControl {
position:absolute;
margin-top:calc(20% + 0px);
top:auto;
z-index:5;
/* transform:translateY(-50%); */
}
.switchControlLeft {
left:20px;
}
/*
.autoEmbedMediaPlayerProfile .switchControlLeft {
left:30px;
}
*/
.switchControlRight {
/* right:20px; */
left:auto;
}

.mediaPlayerContainer img.switchMedia {
/* Wheelzoom
height:100%;
width:100%;
*/
max-width:100%;
max-height:100%;
outline:none;
position:relative;
object-fit:contain;
object-position:50% 50%;
display:inline-flex;
align-self:center;
background-size:cover;
overflow:hidden;
margin:0px;
}

.autoEmbedMediaPlayerProfile .mediaPlayerContainerImage img {
/*
width:auto;
height:100%;
*/
width:100%;
object-fit:cover;
object-position:50% 25%;
background-size:cover;
background-position:50% 25%;
aspect-ratio:1 / 1;
}

.fullscreenActive img.switchMedia {
/*
width:100%;
height:100%;
*/
max-width:100% !important;
max-height:100% !important;
}

.mediaPlayerTitle, .mediaPlayerDescription {
width:calc(100% - 22px);
height:26px;
position:relative;
padding:0px;
overflow:hidden;
z-index:5;
}

.mediaPlayerContainer .mediaPlayerTitle, .mediaPlayerContainer .mediaPlayerDescription {
margin-bottom:-26px;
padding:5px 0px 0px 0px;
position:absolute;
}

.fullscreenActive .mediaPlayerTitle, .fullscreenActive .mediaPlayerDescription {
z-index:12;
}

.mediaPlayerContainer .mediaPlayerTitle {
display:none;
opacity:0;
}

.mediaPlayerDescription {
word-break:break-all;
word-wrap:break-word;
text-align:center;
}

.mediaPlayerEditLabel {
/* font-size:18px; */
font-weight:bold;
}

.mediaPlayerContainer {
width:100%;
max-height:60vh;
background-color:#000000;
overflow:hidden;
text-align:center;
object-fit:contain;
object-position:50% 50%;
}
@media all and (max-height: 600px) and (orientation: landscape), (max-device-height: 600px) and (orientation: landscape) {
.mediaPlayerContainer {
min-height:70vh;
aspect-ratio:16 / 9;
}
}
@media all and (max-height: 560px), (max-device-height: 560px) {
.albumMediaReshareWrapper.padding {
padding:0px;
border-top:0px none;
border-left:0px none;
border-right:0px none;
}
}
@media all and (max-width: 560px), (max-device-width: 560px) {
.albumMediaReshareWrapper.padding {
padding:0px;
border-top:0px none;
border-left:0px none;
border-right:0px none;
}
}

.mediaPlayerMediaWrapper {
height:100%;
display:flex;
justify-content:center;
align-content:center;
align-items:center;
flex-direction:row; /* 2026-05-24 <column -> row> */
}
.mediaPlayerMediaLeft, .mediaPlayerMediaWrapperLeft {
justify-content:left;
}
.messageAttachments .mediaPlayerMediaWrapper {
/* justify-content:left; */
flex-direction:row;
}
.mediaPlayerContainerFullscreen .mediaPlayerMediaWrapper {
max-height:100vh !important;
justify-content:center !important;
}
.mediaPlayerControlWrapper {
width:calc(100% + 1px);
position:relative;
}
.mediaPlayerContainerVideoEdit .mediaPlayerControlWrapper {
margin-top:1px;
}
.mediaPlayerControl {
width:100%;
height:34px;
opacity:1;
position:relative;
margin-top:-34px;
/* margin-right:1px; */
margin-left:0px;
margin-bottom:0px;
/* top:0px; */
bottom:0px;
z-index:5;
overflow:hidden;
/* Sonst sind die Arrwos nicht zu sehen */
/*
overflow-x:hidden;
overflow-y:visible;
*/
}

.fullscreenActive .mediaPlayerControl {
z-index:12;
}

.mediaPlayerControlImage {
margin-top:-33px;
margin-right:0px;
}
.mediaPlayerControlVideo {
background:var(--video-player-control-background-color);
}
.mediaPlayerControlFullscreen {
position:absolute;
margin-left:-30px;
}

.mediaPlayerContainerTransparent {
background:transparent !important;
}

.mediaPlayerConverting video.mediaPlayerVideo {
opacity:0;
aspect-ratio:16/9;
}

/* Ausnahmen fuer Knowledge */
/*
.mediaPlayerKnowledge {
max-height:60vh;
}
*/
.mediaPlayerKnowledge .mediaPlayerMediaWrapper,
.mediaPreviewMediaKnowledge .mediaPlayerMediaWrapper {
height:calc(100% - 0px);
max-height:60vh;
}
.mediaPlayerKnowledge.mediaPlayerContainerImage .mediaPlayerMediaWrapper,
.mediaPreviewMediaKnowledge.mediaPlayerContainerImage .mediaPlayerMediaWrapper {
justify-content:start;
}
.mediaPreviewMediaKnowledge .mediaPlayerContainer img {
/* 2026-01-26 max-width:none; */
max-height:stretch;
object-position:50% 50%;
object-fit:fill;
}
.mediaPreviewMediaKnowledge .mediaPlayerContainer video {
max-height:60vh;
}

/*
.mediaPreviewMediaKnowledge .mediaPlayerContainer,
.mediaPreviewMediaKnowledge .mediaPlayerControlImage {
background-color:transparent;
}
*/
/* Ausnahmen fuer Stream */
.shareNewsMediaWrapperVideo .mediaPlayerVideo {
max-height:60vh;
}
.mediaPlayerStream video.mediaPlayerVideo {
max-height:60vh;
}
.mediaPlayerStreamImage .mediaPlayerMediaWrapper {
justify-content:left;
}
.mediaPlayerStreamVideoConverting .mediaPlayerMediaWrapper {
height:500px;
max-height:60vh;
aspect-ratio:16/9;
}
/* Ausnahmen fuer Kommentare */
.mediaPlayerComment img.switchMedia, .mediaPlayerComment video.mediaPlayerVideo {
max-height:60vh;
}
.mediaPlayerComment .mediaPlayerMediaWrapper {
justify-content:left;
}
/* Ausnahmen fuer Messages */
.mediaPlayerContainerMessages {
background-color:transparent !important;
}
.messageAttachments img.switchMedia, .messageAttachments video.mediaPlayerVideo {
max-height:60vh;
}

.mediaPlayerEditControl {
/* width:100%; */
position:relative;
/* top:0px; */
z-index:5;
margin-right:1px;
overflow:hidden;
margin-bottom:-30px;
}
.mediaPlayerEditControl {
background:var(--video-player-control-background-color);
}
/*
.mediaPlayer_editBackward, .mediaPlayer_editForward {
margin-top:6px;
cursor:pointer;
}
*/
.mediaPlayerControl .play {
width:35px;
height:32px;
cursor:pointer;
/* background:url(../graphic/default/player/control.png) no-repeat -10px 0px; */
float:left;
margin:-1px 0px 5px -1px;
overflow:hidden;
}

.mediaPlayerControl .play img, .mediaPlayerControl .play svg {
margin-top:2px;
margin-left:5px;
}
.mediaPlayerControl .play svg {
margin-top:3px;
}

.mediaPlayerControl .skip-backward {
width:20px;
height:17px;
cursor:pointer;
float:left;
margin:6px -3px 5px 0px;
overflow:hidden;
}
.mediaPlayerControl .skip-forward {
width:20px;
height:17px;
cursor:pointer;
float:left;
margin:6px 0px 5px 3px;
overflow:hidden;
}

.mediaPlayerControl .progress {
width:calc(100% - 340px);
min-width:90px;
height:32px;
/* width:390px; */
cursor:pointer;
margin-top:0px;
margin-left:7px;
margin-bottom:5px;
padding-right:2px;
background:transparent;
/* border:1px solid #afafaf; */
float:left;
overflow:hidden;
}

.mediaPlayerControl .progressBar {
height:19px;
margin-top:5px;
/* border:1px solid #afafaf; */
border:1px solid var(--icon-icons-color);
padding-right:2px;
}

.mediaPlayerControl .bufferBar {
height:17px;
width:0px;
/*
border:1px solid #afafaf;
background:#afafaf;
*/
border:1px solid var(--icon-icons-color);
background:var(--icon-icons-color);
margin-top:0px;
margin-right:5px;
position:absolute;
opacity:0.4;
margin-right:1px;
}

.mediaPlayerControl .timeBar {
height:15px;
width:0px;
margin-top:1px;
margin-left:1px;
margin-right:2px;
/* background:#5b5b5b; */
background:var(--icon-icons-color);
position:absolute;
}

.mediaPlayerControl .autoplay {
width:18px;
height:17px;
cursor:pointer;
float:right;
margin:5px 12px 5px -5px;
overflow:hidden;
display:none;
}

.mediaPlayerControl .current {
margin-left:5px;
margin-top:2px;
margin-bottom:5px;
text-align:left;
float:left;
}

.mediaPlayerControl .duration {
margin-right:10px;
margin-top:2px;
float:right;
text-align:right;
}

.mediaPlayerControl .current,
.mediaPlayerControl .duration {
width:50px;
height:20px;
/* font-size:18px; */
font-weight:bold;
margin-top:6px;
margin-bottom:5px;
}

.mediaPlayerControl .speedControl {
/* font-size:18px; */
font-weight:bold;
float:right;
margin-top:6px;
margin-right:16px;
margin-bottom:5px;
}

.mediaPlayerControl .volume {
width:38px;
height:31px;
cursor:pointer;
margin-top:0px;
margin-right:-5px;
margin-bottom:5px;
float:right;
overflow:hidden;
display:none;
}

.mediaPlayerControl .volume svg.volumeControl {
margin-top:5px;
}

.mediaPlayerControl .fullscreen {
width:35px;
height:31px;
cursor:pointer;
margin:-2px -4px 5px 8px;
float:right;
overflow:hidden;
}

.mediaPlayerControl .fullscreen img, .mediaPlayerControl .fullscreen svg {
margin-top:4px;
}

.mediaPlayerControl .fullscreen img, .mediaPlayerControl .fullscreen svg {
margin-top:7px;
margin-left:-10px;
}

.thumbnailPreview {
width:142px;
height:80px;
margin-top:-150px;
position:absolute;
display:none;
background:#000000;
overflow:hidden;
}

.thumbnailPreviewMedia {
width:142px;
height:80px;
overflow:hidden;
}

.thumbnailPreviewTime {
width:142px;
height:20px;
padding-top:2px;
color:#FFFFFF;
}

.uploadContainerLabelText {
/* Container hat eine Style Definiton $display, daher muessen wir opacity nehmen */
opacity:0;
}
/**
Falls der Player (in Album Ansicht) immer nur Mindest-Groesse haben soll, dann wuerde
man diese Definitionen benoetigen. Der Player waere dann immer nur so gross wie das Medium,
wuerde aber natuerlich staendig in der Hoehe springen (zwischen hoeher und weniger
hoeheren Medien)
.mediaPlayerContainer {
height:auto;
max-height:calc(100% - 0px);
}
.switchPushMedia, .switchMedia, video, .mediaPlayerMediaWrapper {
height:auto;
max-height:calc(100% - 0px);
}
.mediaPreviewMedia, .mediaPlayerMediaWrapper {
height:auto;
max-height:calc(100vh - 220px);
}
.mediaPlayerControlWrapper {
margin-top:-51px;
}
.mediaPlayerControl {
margin-bottom:-20px;
}
*/

@media all and (min-width: 500px) {
.mediaPlayerControl .autoplay {
display:block;
}
.mediaPlayerControl .volume {
display:block;
}
}
/* dynamic.build.css */
/* /sapi/css/?dynamicBuild=1 dynamic build */

.bg1 {
border:1px solid var(--bg1-border-color);
}

.uploadFileProgress {outline:1px solid var(--bg1-border-color);}

.bg1-dashed {border:1px dashed var(--bg1-border-color);}
.bg1-bt {border-top:1px solid var(--bg1-border-color);}
.bg1-br {border-right:1px solid var(--bg1-border-color);}
.bg1-bl {border-left:1px solid var(--bg1-border-color);}
.bg1-bb {border-bottom:1px solid var(--bg1-border-color);}

.bg1 {
background:var(--bg1-background-color);
}

.uploadFileProgressBar {background:var(--bg1-background-color);}
.bg1-bg {background:var(--bg1-background-color);}

.bg1, div.error {
border-radius:var(--bg1-border-radius);
}

.canvasColorIcons path {
fill:var(--icon-icons-color);
}

.canvasColorLogo path {
fill:var(--icon-logo-color);
}

.color2 {
color:var(--font-secondary-color);
}

.color2-bg {background:var(--font-secondary-color);}
.color2-border {border: 1px solid var(--font-secondary-color);}
.color2-outline {outline: 1px solid var(--font-secondary-color);}
.color2-bt {border-top: 1px solid var(--font-secondary-color);}
.color2-br {border-right: 1px solid var(--font-secondary-color);}
.color2-bb {border-bottom: 1px solid var(--font-secondary-color);}
.color2-bl {border-left: 1px solid var(--font-secondary-color);}
.color2-border-dashed {border: 1px dashed var(--font-secondary-color);}
.color2-outline-dashed {outline: 1px dashed var(--font-secondary-color);}
svg.color2 path {fill: var(--font-secondary-color);}

.dropdownHeader, .dropdownContainer, .popupActive .popupWrapper {
border-radius:var(--dropdown-border-radius);
}

.dropdownHeader {
border-radius:var(--dropdown-header-border-radius);
}

.dropdownContainer {
border-radius:var(--dropdown-container-border-radius);
}

.dropdownContainerRight {
border-radius:var(--dropdown-container-right-border-radius);
}

.dropdownHeader, .dropdownContainer, .popupWrapper {
border:1px solid var(--dropdown-border-color) !important;
}

.dropdownHeader-dashed {border:1px dashed var(--dropdown-border-color) !important;}
.dropdownHeader-bt {border-top:1px solid var(--dropdown-border-color) !important;}
.dropdownHeader-br {border-right:1px solid var(--dropdown-border-color) !important;}
.dropdownHeader-bl {border-left:1px solid var(--dropdown-border-color) !important;}
.dropdownHeader-bb {border-bottom:1px solid var(--dropdown-border-color) !important;}

.dropdownContainer-dashed {border:1px dashed var(--dropdown-border-color) !important;}
.dropdownContainer-bt {border-top:1px solid var(--dropdown-border-color) !important;}
.dropdownContainer-br {border-right:1px solid var(--dropdown-border-color) !important;}
.dropdownContainer-bl {border-left:1px solid var(--dropdown-border-color) !important;}
.dropdownContainer-bb {border-bottom:1px solid var(--dropdown-border-color) !important;}

.popupWrapper-dashed {border:1px dashed var(--dropdown-border-color) !important;}
.popupWrapper-bt {border-top:1px solid var(--dropdown-border-color) !important;}
.popupWrapper-br {border-right:1px solid var(--dropdown-border-color) !important;}
.popupWrapper-bl {border-left:1px solid var(--dropdown-border-color) !important;}
.popupWrapper-bb {border-bottom:1px solid var(--dropdown-border-color) !important;}

.dropdownHeader, .dropdownOverlay, .dropdownContainer, .popupWrapper {
background:var(--dropdown-background-color);
}

.dropdownHeader-bg {background:var(--dropdown-background-color);}

.dropdownOverlay-bg {background:var(--dropdown-background-color);}

.dropdownContainer-bg {background:var(--dropdown-background-color);}

.popupWrapper-bg {background:var(--dropdown-background-color);}

.error {
border:1px solid var(--system-notification-error-border-color);
}

.error-dashed {border:1px dashed var(--system-notification-error-border-color);}
.error-bt {border-top:1px solid var(--system-notification-error-border-color);}
.error-br {border-right:1px solid var(--system-notification-error-border-color);}
.error-bl {border-left:1px solid var(--system-notification-error-border-color);}
.error-bb {border-bottom:1px solid var(--system-notification-error-border-color);}

.error {
color:var(--system-notification-error-color);
}

.error-color {
color:var(--system-notification-error-color);
}

.hoverContainer {
background:var(--dropdown-hover-background-color);
}

.hoverContainer-bg {background:var(--dropdown-hover-background-color);}

.mediaPlayerContainerFullscreen {
background:var(--media-player-fullscreen-background-color);
}

.mediaPlayerContainerFullscreen-bg {background:var(--media-player-fullscreen-background-color);}

.mediaPlayerContainerImage {
background:var(--image-player-background-color);
}

.mediaPlayerContainerImage-bg {background:var(--image-player-background-color);}

.mediaPlayerContainerVideo {
background:var(--video-player-background-color);
}

.mediaPlayerContainerVideo-bg {background:var(--video-player-background-color);}

.mediaPlayerControlImage {
background:var(--image-player-control-background-color);
}

.mediaPlayerControlImage-bg {background:var(--image-player-control-background-color);}

.mediaPlayerControlVideo {
background:var(--video-player-control-background-color);
}

.mediaPlayerControlVideo-bg {background:var(--video-player-control-background-color);}

.online {
color:var(--font-online-color);
}

.online-bg {background:var(--font-online-color);}

a, a.noHover:hover, .dropdownLayer > div:nth-child(2) > div > a:hover, .dropdownContainer > a:hover, .dynamicGroups > a:hover, a.dropdown:hover, .containerHover > a:hover {
color:var(--font-link-color);
}

a:hover {
color:var(--font-link-hover-color);
}

a.active, .color-a-hover, span.dropdownTitle:hover {color:var(--font-link-hover-color);}
/*
body {
background:var(--body-background-color);
}
*/
.body-bg {background:var(--body-background-color);}
/*
body {
background-attachment:var(--body-background-image-attachment);
}

body {
background-position:var(--body-background-image-position);
}

body {
background-repeat:var(--body-background-image-repeat);
}

body {
background-size:var(--body-background-image-size);
}
*/
body, .color1, .label {
color:var(--font-primary-color);
}

.color-border {border: 1px solid var(--font-primary-color);}
.color-outline {outline: 1px solid var(--font-primary-color);}
.color-border-dashed {border: 1px dashed var(--font-primary-color);}
.color-outline-dashed {outline: 1px dashed var(--font-primary-color);}
.color-bg {background:var(--font-primary-color);}

.color1-bg {background:var(--font-primary-color);}
.color1-border {border: 1px solid var(--font-primary-color);}
.color1-outline {outline: 1px solid var(--font-primary-color);}
.color1-bt {border-top: 1px solid var(--font-primary-color);}
.color1-br {border-right: 1px solid var(--font-primary-color);}
.color1-bb {border-bottom: 1px solid var(--font-primary-color);}
.color1-bl {border-left: 1px solid var(--font-primary-color);}
.color1-border-dashed {border: 1px dashed var(--font-primary-color);}

.color1-outline-dashed {outline: 1px dashed var(--font-primary-color);}

body, .contentOuter {
max-width:var(--body-max-width);
}

div.counter {
background:var(--system-notification-background-color);
}


.canvasColorIconsActive path {
fill:var(--system-notification-background-color) !important;
}


.highlightContainer {
border:1px solid var(--system-notification-background-color) !important;
font-weight:bold;
}


div.counter {
color:var(--system-notification-color);
}

h1,h2,h3,h1 a,h2 a,h3 a {
color:var(--font-headline-color);
}

.colorPickerItemIcon {
border-color:var(--input-border-color);
}

img {
border-radius:var(--image-border-radius);
}

img, .mediaPlayerContainer {
border-radius:var(--media-border-radius);
}

input[type=submit], input[type=button], input[type=reset] {
background:var(--button-background-color);
}

a.active {color:var(--button-background-color);}

.buttonBackground {background:var(--button-background-color);}

input[type=submit], input[type=button], input[type=reset] {
border:1px solid var(--button-border-color);
}

input[type=submit], input[type=button], input[type=reset] {
color:var(--button-color);
}

input[type=submit], input[type=button], input[type=reset] {
border-radius:var(--button-border-radius);
}

input[type=text], input[type=password], input[type=checkbox], input[type=file], select, textarea, input[type="date"], input[type="email"], input[type="tel"] {
border-radius:var(--input-border-radius);
}

input[type=text], input[type=password], input[type=checkbox], input[type=file], select, textarea, input[type="date"], input[type="email"], input[type="tel"] {
background:var(--input-background-color);
}

.inputBackground, input-bg {
background-color: var(--input-background-color);
}

input[type=text], input[type=password], input[type=checkbox], input[type=file], select, textarea, input[type="date"], input[type="email"], input[type="tel"] {
border:1px solid var(--input-border-color);
}

.inputBorder {
border: 1px solid var(--input-border-color);
}

input[type=text], input[type=password], input[type=checkbox], input[type=file], select, textarea, input[type="date"], input[type="email"], input[type="tel"] {
color:var(--input-color);
}

.inputColor {
color: var(--input-color);
}

system {
background_image_id:0;
}

/* body {background-image:none;} */