@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import "gridsystem.css";
@import "style-dark-purple.css";
@import "animate.min.css";
*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}
a{cursor: pointer!important;}
a:hover{text-decoration: none;}
.ptr--ptr{
  /*
  margin-bottom: calc(-53px - env(safe-area-inset-top));
  margin-bottom: calc(-53px - constant(safe-area-inset-top)); */
  margin-top: calc(53px + env(safe-area-inset-top));
  margin-top: calc(53px + constant(safe-area-inset-top));
  background: url('../../assets/images/ptr.png');
  background-size: 100%;
}
.nW{white-space: nowrap;}
body{background-color: #edf3f8;}
.dark body{background-color: #141414;}
/* Default Classes */
  /* --> Colors */
.color-1{color: #009ad6!important;}
.color-2{color: #00719d!important;}
.color-3{color: #004059!important;}
.color-white{color: #ffffff!important;}
.bg-color-1{color: #ffffff!important;background-color: #009ad6!important;}
.bg-color-2{color: #ffffff!important;background-color: #00719d!important;}
.bg-color-3{color: #ffffff!important;background-color: #004059!important;}
  .bg-gradient{background-image: linear-gradient(0deg, #009ad6, #00719d);}
  .bg-default{background-color: #009ad6;}
  .bg-grey{background-color: rgba(196,213,225,1);}
  .bg-login{
    width: 100%;
    height: 100%;
    position: fixed;
    background-image: url('/assets/images/login-background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  .bg-cover{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,154,214,0.7);
    z-index: 1;
  }
  .bg-cover-content{
    position: relative;
    z-index: 2;
  }
  @media (max-width: 992px){
    .bg-login{
      background-position: 85%;
    }
  }
  /* --> Padding */
  .no-pad{padding: 0!important;}
  .pad-4{padding: 4px!important;}
  .pad-8{padding: 8px!important;}
  .pad-16{padding: 16px!important;}
  .pad-24{padding: 24px!important;}
  .pad-32{padding: 32px!important;}
  .pad-40{padding: 40px!important;}
  .pad-t-8{padding-top: 8px!important;}
  .pad-b-8{padding-bottom: 8px!important;}
  /* --> Margin */
  .m-b-40{margin-bottom: 40px;}
  /* --> Text */
  .t-center{text-align: center;}
  .t-left{text-align: left;}
  .t-right{text-align: right;}
  /* --> Borderradius */
  .br-4{border-radius: 4px!important;}
  .br-8{border-radius: 8px!important;}
  .br-16{border-radius: 16px!important;}
  .br-24{border-radius: 24px!important;}
  .br-32{border-radius: 32px!important;}
  /* Aspect Ratio */
  .ar-1-1{aspect-ratio: 1 / 1!important;}
  /* --> Buttons */
  .default-button{
    color: #FFFFFF;
    background-color: #009ad6;
    border-radius: 30px;
    padding: 7.5px 20px;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    text-transform: initial;
    vertical-align: inherit;
    min-width: 90px;
    transition: 0.3s;
    cursor: pointer;
    border: none;
    text-decoration: none;
    text-align: center;
  }
  .default-button.small{
    padding: 3.25px 10px;
    font-size: 12px;
    line-height: 1;
    min-width: 45px;
  }
  .default-button:hover{
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.1);
    opacity: 0.9;
    text-decoration: none;
    color: #FFFFFF;
  }
  .default-button.fluid{width: 100%;display: block;}
  .btn-color-1{background-color: #009ad6!important;color: #FFFFFF!important;}
  .btn-color-2{background-color: #00719d!important;color: #FFFFFF!important;}
  .btn-color-3{background-color: #004059!important;color: #FFFFFF!important;}
  .btn-inverted-color{color: #009ad6!important;background-color: #FFFFFF!important;}
  .dark .btn-inverted-color{color: #FFFFFF!important;background-color: #141414!important;}
/* --> Boxes */
  .box-shadow-default{box-shadow: 0px 15px 38px 0px rgba(0,0,0,0.1);}
  .box-default{
    padding-top: 28px;
    padding-right: 35px;
    padding-bottom: 24px;
    padding-left: 35px;
    border-radius: 30px;
    background-color: #ffffff;
    color: #4f4e4e;
  }
  h6.page-subtitle{
    line-height: 20px;
    vertical-align: middle;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2em;
  }
  /* --> Content / Grid */
  .content-600{width: 100%;max-width: 600px;margin: 0 auto;}
  .content-800{width: 100%;max-width: 800px;margin: 0 auto;}
  .content-1000{width: 100%;max-width: 1000px;margin: 0 auto;}
  .content-1200{width: 100%;max-width: 1200px;margin: 0 auto;}
  .content-1400{width: 100%;max-width: 1400px;margin: 0 auto;}
  .responsive-img{width: 100%;max-width: 100%;}
  /* Semantic Overrides */
  .ui.header{font-family: 'Poppins', sans-serif;}
  .ui.segment{border-radius: 10px;}
  .pushable>.pusher:after{background-color: rgba(0,0,0,0);}
  .ui.segment.no-border{border: 0!important;}
  .ui.segment.no-shadow{box-shadow: none!important;}
  .ui.segment.no-radius{border-radius: 0!important;}
  .no-border{border: 0!important;}
  .no-shadow{box-shadow: none!important;}
  .no-radius{border-radius: 0!important;}
  .ui.card.no-border{border: 0!important;}
  .ui.card.no-shadow{box-shadow: none!important;}
  .ui.card.no-radius{border-radius: 0!important;}
  /* Semantic Overrides --> Darkmode */
  .dark .ui.segment{background-color: #1B1C1D!important;color: rgba(255, 255, 255, 0.9);}
  .dark .ui.header{color: rgba(255, 255, 255, 0.9)!important;}
  .dark .ui.header .sub.header{color: rgba(255, 255, 255, 0.7)!important;}
  .dark .ui.basic.button{color: #F9FAFB !important;}
  .dark .ui.comments .comment .author{color: rgba(255,255,255,0.9);}
  .dark .ui.comments .comment .metadata{color: rgba(255,255,255,0.4);}
  .dark .ui.comments .comment .text {color: rgba(255, 255, 255, 0.87);}
  .dark .ui.selection.dropdown{color: #ffffff;background: #141414;}
  .dark .ui.cards > .card > .content > .header,.dark .ui.card > .content > .header{color: #ffffff;}
  .dark .ui.item.dropdown{color: #ffffff;}
  .dark .ui.menu .ui.dropdown .menu > .item{color: #ffffff!important;}
  .dark .ui.selection.active.dropdown .menu,
  .dark .ui.menu .dropdown.item .menu,
  .dark .ui.floating.dropdown .menu{color: #ffffff;background: #141414;}
  .dark .ui.dropdown.selected,.dark .ui.dropdown .menu .selected.item{color: #ffffff;}
  .dark .ui.dropdown .menu > .item{color: rgba(255, 255, 255, 0.87);background: #141414!important;}
  .dark .ui.selection.dropdown .menu > .item{border-top: 1px solid #000000;color: #ffffff;}
  .dark .ui.toggle.checkbox input:checked ~ .box, .dark .ui.toggle.checkbox input:checked ~ label,
  .dark .ui.toggle.checkbox .box, .dark .ui.toggle.checkbox label{color: rgba(255, 255, 255, 0.95) !important;}
  .dark .ui.form input{background-color: #141414!important;color: rgba(255,255,255,1)!important;}
  .dark .ui.mini.button{background: transparent;color: #ffffff;border: 1px solid #ffffff;}
  .dark #posts .loadMoreComments .ui.mini.button{border: none;}
  .dark .ui.modal{background: #141414!important;}
  .dark .ui.basic.buttons .button:hover,.dark .ui.basic.button:hover{background: transparent!important;color: #ffffff!important;}
  .dark .ui.menu .ui.dropdown .menu > .item:hover{color: #ffffff!important;}
  .dark .ui.link.menu .item:hover,.dark .ui.menu .dropdown.item:hover,.dark .ui.menu .link.item:hover,.dark .ui.menu a.item:hover{color: #ffffff!important;}
  .dark .ui.form textarea, .dark .ui.form textarea:focus{background-color: #141414;color: rgba(255,255,255,1);}
  .dark .ui.modal.visible.active{background: #1B1C1D;color: rgba(255,255,255,1);}
  .dark .ui.modal > .actions,.dark .ui.modal > .header{background: #141414;color: rgba(255,255,255,1);}
  .dark .ui.cards >  .card, .dark .ui.card{background: #1B1C1D;color: rgba(255, 255, 255, 0.9);box-shadow: none;}
  .dark .ui.dropdown.selected,.dark .ui.dropdown .menu .selected.item, .dark .ui.dropdown .menu,.dark .like-select-dropdown.ui.dropdown .menu>.item:hover, .dark .ui.pointing.dropdown > .menu:after{background: #141414!important;}
  .dark .ui.large.transparent.left.icon.fluid.input input{color: rgba(255, 255, 255, 1);}
  .dark .ui.cards > .card, .ui.card .extra.content, .dark .ui.tabular.menu .item{color: rgba(255, 255, 255, 1);}
  .dark .ui.cards > .card .meta,.dark .ui.card .meta{color: rgba(255,255,255,0.8);}
  .dark .ui.cards > .card > .content > .description, .dark .ui.card > .content > .description{color: rgba(255, 255, 255, 1);}
  .dark .ui.form .field > label, .dark .ui.checkbox label:hover, .dark .ui.checkbox + label:hover{color: rgba(255, 255, 255, 1);}
  .dark .ui.cards > .card > .extra a:not(.ui), .dark .ui.card > .extra a:not(.ui){color: rgba(255, 255, 255, 0.4);}
  .dark .list-group-item{background-color: #1B1C1D!important;}
  .dark .text-dark {color: #ffffff!important;}
  .dark .text-secondary {color: rgba(255, 255, 255, 0.87);}
  .dark .bg-white{background-color: #1B1C1D!important;color: #ffffff!important;}
  .dark .ui.secondary.pointing.menu .item{color: rgba(255,255,255,0.8);}
  .dark .ui.secondary.pointing.menu .item.active{color: rgba(255,255,255,1);}
  .dark .ui.attached.segment{border: 1px solid #000000;}
  .dark .ui.tabular.menu{border-bottom: 1px solid #000000;}
  .dark .ui.tabular.menu .active.item{border-color: #000000;}
  .dark .ui.basic.button:focus{background: #000000!important;}
  .dark .ui.horizontal.divider{color: rgba(255,255,255,0.8);}
  .dark .ui.dropdown .menu > .header{color: rgba(255,255,255,0.8);}
  .dark .ui.checkbox label{color: rgba(255,255,255,0.8);}
  .dark .ui.selection.visible.dropdown > .text:not(.default){color: rgba(255,255,255,0.6);}
  .dark .ui.button{background-color: #000000;color: rgba(255,255,255,1);}
  .dark a.ui.card:hover{background-color: #000000;}
  .dark .ui.left.labeled.button .ui.basic.right.pointing.label{background: #000000;color: #ffffff;}
  .dark .ui.compact.menu{background-color: #000000;}
/* Partials */
  /* --> Bottom CTA */
  .bottom-cta {
    text-align: center;
    position: fixed;
    right: 16px;
    bottom: 64px;
    color: rgba(255,255,255,1);
    background-color: #009ad6;
    width: 54px;
    height: 54px;
    border-radius: 90%;
    padding: 4px;
    box-shadow: 1px rgba(0,0,0,0.2);
    z-index: 99;
    transition: 0.3s;
    cursor: pointer;
  }
  .bottom-cta i {
    display: block;
    margin: 0 auto;
    font-size: 24px;
    padding-top: 6px;
  }
  .bottom-cta span {
    display: block;
    font-size: 10px;
  }
  .bottom-cta .ui.icon.bottom.right.pointing.dropdown{
    width: 100%!important;
    height: 100%!important;
  }
  .bottom-cta .ui.icon.bottom.right.pointing.dropdown .menu.transition.visible{
    background: transparent!important;
    border: none!important;
    box-shadow: none!important;
  }
  .bottom-cta .ui.icon.bottom.right.pointing.dropdown .menu.transition.visible .item {
    background-color: rgba(255, 255, 255, 1) !important;
    width: 54px !important;
    height: 54px !important;
    text-align: center !important;
    border-radius: 90% !important;
    margin-bottom: 8px !important;
  }
  .bottom-cta .ui.icon.bottom.right.pointing.dropdown .menu.transition.visible .item {
    background-color: rgba(255, 255, 255, 1) !important;
    width: 54px !important;
    height: 54px !important;
    text-align: center !important;
    border-radius: 90% !important;
    margin-bottom: 8px !important;
  }
  .bottom-cta .ui.icon.bottom.right.pointing.dropdown .menu.transition.visible .item.premium{
    color: rgba(255,255,255,1)!important;
    background-color: #009ad6!important;
  }
  .bottom-cta .ui.bottom.right.pointing.dropdown>.menu:after{
    display: none;
  }
  .bottom-cta .ui.dropdown .menu>.item>.image,
  .bottom-cta .ui.dropdown .menu>.item>img,
  .bottom-cta .ui.dropdown>.text>.image,
  .bottom-cta .ui.dropdown>.text>img{
    margin: 0!important;
    margin-left: -4px!important;
    margin-top: -4px!important;
  }
  /* --> Mainmenü */

  /* Mobile Menüs */
  #Mobile-Top-Menu,
  #Mobile-Bottom-Menu{
    display: none;
  }
  #Mobile-Top-Menu .navbar{
    background-color: rgba(255,255,255,1)!important;
  }
  .ghostmode img{
    max-width: 24px;
    cursor: pointer;
    filter: invert(0.8);
  }
  #BackendTopMenu{
    display: block;
  }
  #Mobile-Bottom-Menu .footer-tabs .nav-tabs .nav-item {
    padding: 5px 1vw;
}
  @media (max-width: 992px){
    #Mobile-Top-Menu,
    #Mobile-Bottom-Menu{
      display: block;
    }
    #BackendTopMenu{
      display: none;
    }
  }
  #Mobile-Top-Menu{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-radius: 0;
    margin: 0;
    background-color: rgba(255,255,255,1);
  }
  .dark #Mobile-Top-Menu .navbar{
    background-color: #1B1C1D!important;
  }
  #Mobile-Top-Menu button{
    color: rgba(0,0,0,0.6)!important;
  }
  #Mobile-Top-Menu #Mobile-Top-Logo{
    text-align: center;
  }
  #Mobile-Top-Menu #Mobile-Top-Logo img{
    padding: 8px 16px;
    max-height: 48px;
  }
#Mobile-Top-Menu .avatar img{
  border-radius: 90%;
  border: 1px solid rgba(255,255,255,1);
}
  #Mobile-Bottom-Menu{
    position: fixed;
    width: 100%;
    height: 58px;
    bottom: -4px;
    left: 0;
    right: 0;
    z-index: 1002;
    border-radius: 0;
    margin: 0;
  }
  #Mobile-Bottom-Menu .item{
    width: calc(20% - 4px);
    display: inline-block;
    text-align: center;
    border-left: none;
    border-right: none;
    margin: 0;
    font-size: 1.3em;
    color: rgba(0,0,0,0.3);
  }
  #Mobile-Bottom-Menu .item.active{
    color: rgba(0,0,0,0.8);
  }
  #Mobile-Bottom-Menu .item:before{
    display: none;
  }
  #Mobile-Bottom-Menu .floating.ui.label{
    top: 0.4em;
    left: 80%;
  }
  .dark #Mobile-Bottom-Menu .footer-tabs{
    background-color: rgba(0,0,0,0.8);
  }
  .dark #Mobile-Bottom-Menu .footer-tabs .nav-tabs .nav-item a{
    color: rgba(255,255,255,0.4)!important;
  }
  .dark #Mobile-Bottom-Menu .footer-tabs .nav-tabs .nav-item .nav-link.active{
    background-color: transparent!important;
    color: rgba(255,255,255,1)!important;
  }
    /* --> Sidemenu */
  aside#Sidemenu{
    margin-top: 16px;
    display: block;
    padding-right: 8px;
  }
  @media (max-width: 992px){
    aside#Sidemenu{
      display: none;
    }
  }
  aside#Sidemenu .ui.card{
    width: 100%;
  }
  /* Mobile Menüs */
  #Bottom-Menu{
    display: block;
  }
.ghostmode{
  color: #ffffff;
  cursor: pointer;
}
  @media (max-width: 992px){
    #Bottom-Menu{
      display: block;
    }
  }
  #Bottom-Menu{
    position: fixed;
    width: 100%;
    height: 58px;
    bottom: -4px;
    left: 0;
    right: 0;
    z-index: 3000;
    border-radius: 0;
    margin: 0;
  }
  #Bottom-Menu .item{
    width: calc(20% - 4px);
    display: inline-block;
    text-align: center;
    border-left: none;
    border-right: none;
    margin: 0;
    font-size: 1.3em;
    color: rgba(0,0,0,0.3);
  }
  #Bottom-Menu .item.active{
    color: rgba(0,0,0,0.8);
  }
  #Bottom-Menu .item:before{
    display: none;
  }
  #Bottom-Menu .floating.ui.label{
    top: 0.4em;
    left: 80%;
  }
  /* --> Sidemenu */
  aside#Sidemenu{
    display: block;
    padding-right: 8px;
  }
  @media (max-width: 992px){
    aside#Sidemenu{
      display: none;
    }
  }
  aside#Sidemenu .ui.card{
    width: 100%;
  }
/* --> Mainmenü */


.pagebanner-mobil{display: none;}
.pagebanner-desktop{display: block;}
@media (max-width: 768px){
  .pagebanner-mobil{display: block;}
  .pagebanner-desktop{display: none;}
}
/* Pages */


/* Page --> Magazin */
#page-magazin{
  margin-top: 80px;
  margin-bottom: 80px;
  padding-bottom: 80px;
}
.magazinArticleHeader{
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  -moz-box-shadow: inset 0 -80px 25px -10px rgba(0,0,0,0.5);
  -webkit-box-shadow: inset 0 -80px 25px -10px rgba(0,0,0,0.5);
  box-shadow: inset 0 -80px 25px -10px rgba(0,0,0,0.5);
}
.magazinArticleHeader .ratioBox169{
  padding-top: 56.25%;
}
.magazinArticleHeaderContent{
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 16px;
}
#BlogArticle{
  position: relative;
  z-index: 1;
}
#BlogArticle .ui.fluid.card a.image{
  aspect-ratio: 16/9;
  background: #000000;
}
#BlogArticle .ui.fluid.card a.image img{
  aspect-ratio: 16/9;
}
#BlogArticle .ui.fluid.card .content{
  position: absolute!important;
  bottom: 0!important;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 10%, rgba(255,255,255,0) 100%);
  color: rgba(255,255,255,1);
  width: 100%;
  border-top: none!important;
}
#BlogArticle .ui.fluid.card .content .inverted.header,
#BlogArticle .ui.fluid.card .content .meta a{
  color: rgba(255,255,255,1)!important;
}
#BlogArticle .ui.fluid.card .content .meta{
  overflow: hidden;
  max-height: 47px;
}


  /* Page --> Dashboard */
  #page-dashboard{
    background-color: rgba(38,88,133,0.05);
  }
  #page-dashboard section#searchsection{
    background-color: #009ad6;
    /*min-height: 200px;
    max-height: 340px;*/
    border-radius: 10px;
    margin-top: 4px;
  }
  .dark h6.page-subtitle{
    color: rgba(255,255,255,0.8);
  }
  .dark #page-dashboard section#searchsection{
    background-color: #000000;
  }
  @media (min-width: 992px){
    #page-dashboard section#searchsection{
      margin-top: 16px;
    }
  }
  #page-dashboard .unameDis{
    text-shadow: 0px 0px 10px black;
  }
  #page-dashboard .btn.btn-link.btn-sm.px-2.text-default {
    cursor: pointer;
  }
  #page-dashboard section#searchsection .ui.search input{
    width: 100%;
  }
  .dark #page-dashboard section#searchsection .ui.search input{
    background-color: #1B1C1D;
    color: rgba(255,255,255,0.8);
  }
  .dark #page-dashboard section#searchsection .ui.search i.icon{
    color: rgba(255,255,255,0.8);
  }
  #page-dashboard section#PostFunction{
    padding-top: 0!important;
  }
  #page-dashboard section#PostFunction .card{
    border-radius: 10px;
    width: 100%;
  }
  .dark #page-dashboard section#PostFunction .card{
    border: 1px solid #000000;
  }
  .dark #page-dashboard section#PostFunction .card .card-footer{
    background-color: #000000;
  }
  #page-dashboard section#PostFunction .card textarea{
    border-radius: 10px 10px 0 0;
  }
  #page-dashboard section .col-sp-6.row-sp-12.t-right{
    padding-bottom: 8px;
  }
  #page-dashboard section .user_info{
    position: relative;
    display: block;
    padding-top: 100%;
    background-size: cover;
    background-position: center center;
    border-radius: 10px;
  }
  #page-dashboard section .user_info .user_info-content{
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    width: calc(100% - 16px);
    color: rgba(255,255,255,1);
  }
  #page-dashboard section .user_info .user_info-content h6{
    font-size: 0.9em;
    margin-bottom: -4px;
  }
  #page-dashboard section .user_info .user_info-content span{
    color: rgba(255,255,255,0.8);
    font-size: 0.7em;
  }
  #page-dashboard section#Magazin #MagazinSlider article{
    background-size: cover;
    background-position: center center;
    border-radius: 10px;
    min-height: 295px;
  }

  .ui.fluid.no-shadow.no-border.card.post .ui.header{
    display: inline-block;
    margin-top: 0;
  }
  .ui.fluid.no-shadow.no-border.card.post .ui.header i{
    margin-right: 0;
  }
  .ui.fluid.no-shadow.no-border.card.post .ui.horizontal.divider.header{
    color: rgba(0,0,0,0.4);
  }
  .posts-likes{
    display: inline-block;
    color: rgba(0,0,0,0.5);
    font-weight: 500;
    margin-top: 4px;
  }
  .posts-likes span{
    margin-left: 8px;
  }
  .posts-likes img{
    max-width: 20px;
  }
  .postparagraph{
    color: rgba(0,0,0,0.6);
    font-weight: 500;
  }
  .dark .postparagraph{
    color: rgba(255,255,255,0.8);
  }
  .post-comment-button{
    padding: 11px 16px!important;
  }
  .likeDetails{
    transition: all 0.5s;
    max-height: 0;
    overflow: hidden;
    margin-bottom: 1em !important;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
    background-color: rgba(0,0,0,0.02)!important;
  }
  .likeDetails .ui.basic.button{
    margin-top: 4px!important;
    padding: 4px 4px 4px 10px;
   }
  .likeDetails .ui.basic.button img{
    width: 14px;
    vertical-align: text-top;
  }
  .likeDetailsActive{
    max-height: 100px !important;
  }
  .likeDetailsActive .posts-likes{
    padding-bottom: 3px;
  }
  .likeDetails span {
    padding-right: 10px;
  }
  .openLikeDetails{
    cursor: pointer;
  }
  .noPadBottom{
    padding-bottom: 0 !important;
  }
  .content.comment-cta{
    padding: 0 1em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-top: 1px solid rgba(0,0,0,0.1)!important;
    margin-bottom: 16px;
    padding-top: 6px;
  }
  .dark .ui.input input.commentAnswer {
    background-color: #141414!important;
    color: rgba(255,255,255,0.8)!important;
  }
  .dark .ui.mini.left.icon.fluid.input i.icon{
    color: rgba(255, 255, 255, 1)!important;
  }
  .remainingTime{
    display: inline;
  }
  #posts .fcat{
    bottom: -16px;
    position: relative;
  }
  #posts .commentSec {
    padding: 15px;
  }
  #posts .commentSec .ui.tiny.comments.activeComment{
    background-color: rgba(0,0,0,0.03);
  }
  .dark .likeComments .ui.basic.image.label{
    color: rgba(255,255,255,1);
    background-color: #000000;
  }
  .ui.card.post .extra.content input{
    border: none;
  }
  #posts .channelIcon {
    height: 30px;
  }
  #posts .PDist{
    float: right;
    font-size: smaller;
    bottom: 0px;
    line-height: 25px;
  }
  #posts .ui.post.card .content.main-content .emojione{
    height: 1em;
  }
  #posts .comment .text .emojione{
    height: 1em;
  }
  #posts .ui.comments .comment > .content {
    padding-bottom: 22px;
  }
  #posts .ui.tiny.comments {
    max-width: unset;
  }
  .dark #posts .like_type{color: rgba(255,255,255,0.8);}
.commentText .chat-message-text-deleted{
    opacity: 0.5;
    font-style: italic;
  }
.ui.segment.no-border.no-shadow.profile-preview{
  display: inline-block;
}
  #page-dashboard .trending{
    margin: 0 auto;
  }
  .scimd{
    width: 17px;
    margin: 0px;
    display: contents;
  }
  .scimd img {
    width: 17px;
    top: -2px;
    position: relative;
  }
  #posts .ichan {
    display: none;
  }
  .sct {
    display: contents;
    white-space: nowrap;
  }
  .pimg img{
    max-height: 70vh;
    object-fit: contain;
  }
  .comment-actions{
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-left: 70px;
  }
  #posts .commentActionPoints{
    position: absolute;
    right: -0px;
    top: 14px;
  }
  #page-dashboard #Storys{
    padding-bottom: 8px;
  }
  /*
  .StoriesLoading{
    opacity: 0;
  }
   */
  #page-dashboard #Storys h3{
    font-size: 2.0em;
    color: rgba(0,0,0,0.7);
    padding: 8px 16px;
    margin: 0;
  }

  @media (min-width: 992px){
    #page-dashboard #storyadd{
      display: none;
    }
  }
#post-video-upload,
  #post-image-upload{
    position: relative;
    display: inline;
    height: 38px;
  }
#post-video-upload input[type="file"],
  #post-image-upload input[type="file"]{
    position: absolute;
    z-index: 2;
    width: 38.52px;
    height: 36px;
    opacity: 0;
    cursor: pointer;
    right: 0;
  }
#post-video-upload input[type="file"]:hover,
  #post-image-upload input[type="file"]:hover{
    cursor: pointer;
    opacity: 0;
    filter: brightness(0);
  }
#post-video-upload button,
  #post-image-upload button{
    position: absolute;
    z-index: 0;
    cursor: pointer;
    right: 0;
  }
  .post-input{
    width: calc(100% - 40px);
    margin-left: 40px;
    margin-top: -6px;
  }
  .ui.image.label.likeemoji-1 img,
  .ui.image.label.likeemoji-2 img,
  .ui.image.label.likeemoji-3 img,
  .ui.image.label.likeemoji-4 img,
  .ui.image.label.likeemoji-5 img,
  .ui.image.label.likeemoji-6 img,
  .ui.image.label.likeemoji-7 img{
    height: 18px!important;
    margin-left: 4px;
  }
  .like-button-select img{
    width: 18px;
    padding: 0;
  }
  .like-select-dropdown .menu .item button{
    cursor: pointer;
    border: none;
    transition: 0.3s;
    background-color: transparent;
    padding: 4px;
  }
  .like-select-dropdown .menu .item button img{
    transition: 0.3s;
    opacity: 0.5;
  }
  .like-select-dropdown .menu .item button img.activeimg{
    transform: scale(1.1);
    opacity: 1;
  }
  .like-select-dropdown .menu .item button:hover img{
    transform: scale(1.1);
    opacity: 1;
  }
  .like-select-dropdown.ui.dropdown .menu>.item:hover{
    background-color: rgba(255,255,255,1)!important;
    cursor: default;
  }
  .ui.post.card .content.text-content{
    font-size: 1.5em!important;
  }
  .ui.post.card .content{
    border-top: 0px!important;
  }
  .ui.post.card .content.main-content,
  .ui.post.card .content.comments-content{
    /* border-top: 1px solid rgba(34,36,38,.1)!important; */
    /*word-break: break-all;*/
  }
  h6.ui.header.commentheader{
    color: rgba(0,0,0,0.2)!important;
    font-weight: normal;
    font-size: 0.9em;
  }


  section#StorySlider .story-item{
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 179%;
    background-position: center center;
  }
  section#StorySlider .story-video-item video{
    position: absolute;
    top: 0;
    width: 100%;
    max-height: 100%;
    border-radius: 20px!important;
  }
  section#StorySlider .story-user{
    text-align: center;
  }
  section#StorySlider .story-user .storypreview{
  text-align: center;
  }
  section#StorySlider .story-user .storypreview img{
    width: 100%;
    height: 100%;
    max-width: 100px;
    border-radius: 4px;
    margin: 0 auto;
  }
  section#StorySlider .story-user img.ui.avatar.image{
    width: 100%;
    height: 100%;
    max-width: 50px;
    max-height: 50px;
    text-align: center;
    margin: 0 auto;
    margin-top: -40px;
    border: 2px solid rgba(255,255,255,1);
  }
  section#StorySlider .story-user span{
    font-size: 0.8em;
    color: rgba(255,255,255,0.8);
    margin-top: -8px;
  }


  #page-dashboard section#StorySlider .ui.card{
    border-radius: 20px;
  }
  section#CurrentOnline a,
  section#NewUser a{
    overflow: hidden;
  }
  #page-dashboard section#CurrentOnline h4{
    font-size: 1.0em;
    color: rgba(0,0,0,0.6);
    padding: 8px 16px;
    margin: 0;
  }
  #page-dashboard section#CurrentOnline .small.centered.ui.circular.image{
      border: rgba(0,0,0,0.07) 1px solid;
      max-width: 50px;
      max-height: 50px;
  }

  #page-dashboard section#PostFunction .tiny.centered.ui.circular.image{
    border: rgba(0,0,0,0.07) 1px solid;
    max-width: 50px;
    max-height: 50px;
    margin-top: -8px;
  }
  .postList{
    margin-bottom: 40px;
  }
  .postList .ui.card{
    margin: 0 auto;
    width: 100%;
    margin-bottom: 24px;
    overflow-x: visible;
    box-shadow: none;
  }
  .postList .ui.post.card{
    overflow: visible!important;
  }
  .postList .ui.large.transparent.left.icon.fluid.input {
    opacity: 1!important;
  }


  /* Page --> Notifications */

/* Page --> Register */
  #page-register{
    margin-top: 80px;
    margin-bottom: 80px;
  }
  #channel-selection .ui.segment{
    position: relative;
    cursor: pointer;
  }
  #channel-selection .ui.segment.select .selectContent{
    opacity: 0.6;
  }
  #channel-selection .ui.segment .checked-icon{
    position: absolute;
    top: -8px;
    right: -8px;
    display: none;
  }
  #channel-selection .ui.segment .checked-icon img{
    width: 32px;
  }
  #channel-selection .ui.segment.select .checked-icon{
    display: block;
  }
  #SubmitSelection{
    position: fixed;
    bottom: 0;
    background-color: rgba(255,255,255,1);
    display: none;
    padding: 8px 24px;
    width: 100%;
  }
  #profileimage-selection img{
    margin: 0 auto;
    max-width: 175px;
  }
  #page-register .cropper-view-box{
    border-radius: 90%!important;
  }
  #page-register #avatar-modal{
    position: fixed;
    top: 16px;
    right: 16px;
    left: 16px;
    width: calc(100% - 32px);
    height: auto;
    box-shadow: none;
  }
#page-register #avatar-modal .avatar-wrapper{
    box-shadow: none;
    height: auto;
    min-height: 250px;
  }
#page-register #avatar-modal .cropper-bg{
  background-image: none;
}
#page-register #avatar-modal .cropper-modal{
  background-color: #ffffff;
}
  /* Page --> Usermanagement */
  #page-usermanagement{
    /* margin-top: 54px; */
  }
  #page-usermanagement .userlist{
    padding: 0;
  }
  #page-usermanagement .userlist .userlist-item{
    padding: 10px 16px;
    border-bottom: 1px solid #daeaf8;
  }
  #page-usermanagement .userlist .userlist-item-action{
    padding-top: 10px;
  }
  #page-usermanagement .userlist .userlist-item-action a{
    margin-left: 8px;
  }
  #page-usermanagement .userlist img{
    border-radius: 90%;
    width: 100%;
    max-width: 40px;
    max-height: 40px;
    min-width: 40px;
    min-height: 40px;
    background-color: #54e0c4;
    vertical-align: middle;
  }
  #page-usermanagement .userlist span{
    display: block;
  }
  #page-usermanagement .userlist .username{
    font-weight: 600;
  }
  #page-usermanagement .userlist .email{
    font-weight: 300;
    font-size: 0.9em;
  }
  /* Page --> Post*/
  #page-post #posts{
    max-width: 720px;
    margin: 0 auto;
  }


/* JUNX STORYS */
#WurstsalatStoryHeader{
  border-radius: 0;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  background-color: rgba(57,0,85,1);
}
#WurstsalatStoryHeader .grid-16{
  width: 100%;
}
#WurstsalatStoryHeader .ui.header{
  padding-top: 12px;
  transition: 0.3s;
}
#WurstsalatStoryHeader .ui.header:hover{
  color: #009ad6;
}
#WurstsalatStoryHeader .right.menu{
  float: right;
}
#WurstsalatStoryHeader #Desktop-Top-Logo img{
  max-height: 40px;
  padding: 4px 16px 0 16px;
}
#WurstsalatStoryMain{
  /* margin-top: 54px; */
}
#StoryPreview{
  position: fixed;
  z-index: 1;
  top: 40px;
  height: calc(100% - 40px);
  width: 100%;
  background-position: center center;
  background-size: cover;
}
#StoryFile{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
}
#StoryFileBackground{
  position: fixed;
  top: -8px;
  background: #4ab6c2;
  color: rgba(255,255,255,1);
  width: 100%;
  height: calc(100% + 8px);
  padding-top: 180px;
  text-align: center;
}
#StoryFileBackground h1.ui.header{
  color: rgba(255,255,255,1);
  font-size: 2.5em;
}
#StoryFileBackground .ui.button.massive{
  display: block;
  margin: 0 auto;
}
#StoryFileBackground video{
  top: 0;
  left: -100%;
  left: 0%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(10px);
}
@media (max-width: 992px){
  #StoryFileBackground video{
    left: -100%;
  }
}
#StoryFileBackground img{
  max-width: 480px;
}

#StoryPreviewVideo{
  position: fixed;
  z-index: 2;
  top: 40px;
  height: calc(100% - 40px);
  width: 100%;
  display: none;
  background: black;
}
#StoryPreviewVideoBackground{
  position: fixed;
  z-index: 3;
  top: 0;
  height: calc(100% + 40px);
  width: auto;
  background: black;
}
#StoryPreviewVideo #StoryVideoTopMenu{
  position: absolute;
  height: 48px;
  width: 100%;
  z-index: 50;
  color: rgba(255,255,255,1);
  font-size: 18px;
  padding: 16px;
}
#StoryPreviewVideo #StoryVideoTopMenu a{
  color: rgba(255,255,255,1);
}
#StoryForm{
  position: fixed;
  z-index: 9;
  width: 100%;
  height: 100%;
  top: 90px;
}
#StoryPostButton{
  position: absolute;
  bottom: 15%;
  display: none;
  right: 16px;
}
#WurstsalatStorys{
  position: fixed;
  background-color: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
  top: 44px;
}
#WurstsalatStorys section{
  margin: 0 auto;
  width: 100%;
  max-width: 500px;
  background: rgba(0,0,0,0.8);
}
.story-pad{
  padding-bottom: 177.777%;
  position: relative;
  background: #009ad6;
}
#StoryView .video-post{
  height: calc(100vh - 44px);
  overflow-y: hidden;
  margin-bottom: -5px;
  vertical-align: middle;
}
#StoryView .video-post video{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
#StoryView .image-post .background-content{
  background-size: contain;
  background-position: center center;
  /* background-size: cover; */
  padding-top: 179%;
  background-repeat: no-repeat;
}
#StoryView .slick-track {
  /* transform: translate3d(-501px, -3px, 0px)!important; */
}
#StoryView .story-header{
  position: absolute;
  top: 0;
  background-color: rgba(0,0,0,0.2);
  width: 100%;
  height: 48px;
  color: rgba(255,255,255,1);
  padding: 8px 16px;
  z-index: 9;
}
#StoryView .story-header span{
  display: inline-block;
  font-weight: bold;
  line-height: 16px;
}
#StoryView .story-header .time{
  display: block;
  font-weight: normal;
  font-size: 0.9em;
}
#StoryView .story-header img{
  border: 2px solid rgba(255,255,255,1);
  vertical-align: top;
}
#StoryView .story-header a{
  color: rgba(255,255,255,1);
}
#StoryView .story-footer{
  position: fixed;
  width: 100%;
  height: 48px;
  color: rgba(255,255,255,1);
  padding: 8px 16px;
  z-index: 9;
  top: 87vh;
}
#StoryView .story-footer #reaktionsbutton{
  margin-top: 4px;
  color: rgba(255,255,255,0.5);
  font-weight: lighter;
  font-size: 2em;
  text-align: right;
}
#StoryView .story-footer #reaktionsbutton.ui.icon.bottom.right.pointing.dropdown.button{
  margin: 0;
  color: rgba(255,255,255,0.5);
  font-weight: lighter;
  font-size: 2em;
  background: transparent;
  padding: 0;
}
#StoryView .story-footer #reaktionsbutton.ui.icon.bottom.right.pointing.dropdown.button .item{
  padding: 4px!important;
}
#StoryView .story-footer #reaktionsbutton.ui.icon.bottom.right.pointing.dropdown.button .item button{
  border: none;
  cursor: pointer;
  background: transparent;
}
#StoryView .story-footer img{
  transform: scale(1);
  transition: .3s;
}
#StoryView .story-footer img:hover{
  transform: scale(1.2);
}
#StoryView .ui.bottom.right.pointing.dropdown>.menu:after {
  left: auto;
  right: 0.3em;
  bottom: -16px;
  background: rgba(255,255,255,0.5);
}
#StoryView .ui.bottom.right.pointing.dropdown>.menu {
  background: rgba(255,255,255,0.5);
  border-bottom: rgba(255,255,255,1) 10px solid;
}
#StoryView .ui.bottom.pointing.dropdown>.menu {
  margin: 0 0 0.5em;
}
.stl--ptr{
  box-shadow: unset!important;
}






/* Einstellungen */
#Settings{
  padding-bottom: 80px;
}
.settings-menu-item{
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: block;
  padding: 8px 0;
  cursor: pointer;
}
.settings-menu-item:hover{
  text-decoration: none;
}
.settings-menu-item .ui.circular.icon.button,
.settings-menu-item:hover .ui.circular.icon.button{
  background-color: rgba(0,0,0,0.03);
  color: #009ad6;
}
.dark .settings-menu-item .ui.circular.icon.button,
.dark .settings-menu-item:hover .ui.circular.icon.button{
  background-color: rgba(0,0,0,0.03);
  color: rgba(255,255,255,0.6);
}
.settings-menu-item span.menu-title{
  font-weight: 500;
}
.settings-menu-item:hover span.menu-title,
.settings-menu-item:hover span.rightspan{
  color: #009ad6;
  text-decoration: none;
}
.dark .settings-menu-item:hover span.menu-title,
.dark .settings-menu-item:hover span.rightspan{
  color: #ffffff;
}
.settings-menu-item span.rightspan{
  float: right;
  padding: 7px 0;
  font-size: 1.4em;
}
.SettingsPanel{
  margin: 0!important;
  display: none;
}

  /* Better Storys */

#storycanvas{
  position: relative;
  top: 0;
  overflow: hidden;
  width: 100%;
  padding-top: 177.777%;
  height: 100%;
  background: rgba(255,255,255,1);
}
#storycanvas #PostButton{
  position: fixed;
  z-index: 9;
  bottom: 16px;
  right: 16px;
}
#storycanvasMenu{
  position: absolute;
  z-index: 9;
  width: 100%;
  height: 48px;
  background: rgba(0,0,0,0.3);
  top: 0;
  left: 0;
}
#storycanvasMenu button{
  padding: 4px;
  font-size: 24px;
  color: rgba(255,255,255,1);
  font-weight: bold;
  background: transparent;
  border: none;
}
#storycanvasContent{
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

#drag {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 40%;
  height: 40%;
  background: #666;

}
#dragtext{
  position: absolute;
  top: 140px;
  left: 40px;
  width: 100%;
  max-width: 200px;
  height: 40px;
  display: none;
  color: rgba(255,255,255,1);
  background: transparent;
  border: none;
  outline: none;
  font-size: 2em;
}
.storyModal{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.3);
  display: none;
}
.storyModal .storyModalMenu{
  position: absolute;
  top: 0;
  z-index: 11;
  width: 100%;
  height: 48px;
  background: rgba(0,0,0,0.3);
}
.storyModal .storyModalMenu .leftmenu,
.storyModal .storyModalMenu .rightmenu{
  display: inline-block;
  color: rgba(255,255,255,1);
  font-size: 1.2em;
}
.storyModal .storyModalMenu ul li{
  list-style: none;
  display: inline;
}
.storyModal .storyModalMenu .leftmenu{
  float: left;
  text-align: left;
}
.storyModal .storyModalMenu .rightmenu{
  float: right;
  text-align: right;
}
.storyModal .storyModalMenu .closebutton{
  background: transparent;
  border: none;
  text-align: center;
  color: rgba(255,255,255,1);
  min-width: 32px;
  height: 32px;
  margin: 4px;
}
.storyModal .storyModalMenu .closebutton i{
  padding: 4px;
  font-size: 24px;
  color: rgba(255,255,255,1);
}
#textCreateModalContent{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
#imageCreateModalContent{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding-top: 48px;
}
#imageCreateModalContent .ui.top.attached.tabular.menu .item{
  color: rgba(255,255,255,0.8);
}
#imageCreateModalContent .ui.top.attached.tabular.menu .item.active{
  background: rgba(0,0,0,0.3);
  border-radius: 0!important;
  border: none;
  color: rgba(255,255,255,1);
}
#imageCreateModalContent .ui.bottom.attached.tab.segment.active{
  background: rgba(0,0,0,0);
  border: none;
  color: rgba(255,255,255,1);
  overflow-y: scroll;
  height: 100%;
  padding-bottom: 40px;
}
#imageCreateModalContent .ui.bottom.attached.tab.segment.active button{
  background: transparent;
  border: none;
}
#textCreateModalContent #textCreateModalCloseInput{
  margin: 40vh auto;
  display: block;
  width: 100%;
  color: rgba(255,255,255,1);
  background: transparent;
  border: none;
  outline: none;
  font-size: 2em;
  text-align: center;
  height: 100%;
}
/* Neue Storys */
#storycanvasbackground{
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#pagestorycreate{
  z-index: 16;
}
#pagestorycreate #vid_container {
  position: fixed;
  top: 0;
  left: 0;
}

#pagestorycreate #video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#pagestorycreate #gui_controls {
  position: fixed;
  background-color: #111; /*rgba(255, 0, 0, 0.5);*/
  z-index: 2;
  bottom: 0;
}

#pagestorycreate #video_overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 10;
  background-color: #111;
}

/*  Button style from:
    https://googlesamples.github.io/web-fundamentals/fundamentals/media/mobile-web-video-playback.html */

#pagestorycreate button {
  outline: none;
  position: absolute;
  color: white;
  display: block;
  opacity: 1;
  background: transparent;
  border: solid 2px #fff;
  padding: 0;
  text-shadow: 0px 0px 4px black;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: auto;
  z-index: 2;
}

#pagestorycreate #takePhotoButton {
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  width: 80px;
  height: 80px;
  background-image: url('../images/ic_photo_camera_white_48px.svg');
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
}

#pagestorycreate #takePhotoButton:active {
  background-color: #fff;
}

#pagestorycreate #toggleFullScreenButton {
  display: none;
  width: 64px;
  height: 64px;
  background-image: url('../images/ic_fullscreen_white_48px.svg');
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
}

#pagestorycreate #toggleFullScreenButton[aria-pressed='true'] {
  background-image: url('../images/ic_fullscreen_exit_white_48px.svg');
}

#pagestorycreate #switchCameraButton {
  display: none;
  width: 64px;
  height: 64px;
  background-image: url('../images/ic_camera_rear_white_36px.svg');
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
}

#pagestorycreate #switchCameraButton[aria-pressed='true'] {
  background-image: url('../images/ic_camera_front_white_36px.svg');
}

@media screen and (orientation: portrait) {
  /* portrait-specific styles */

  /* video_container (video) doesn't respect height...
       so we will fill it in completely in portrait mode
    */
  #pagestorycreate #vid_container {
    width: 100%;
    height: 80%;
  }

  #pagestorycreate #gui_controls {
    width: 100%;
    height: 20%;
    left: 0;
  }

  #pagestorycreate #switchCameraButton {
    left: calc(20% - 32px);
    top: calc(50% - 32px);
  }

  #pagestorycreate #toggleFullScreenButton {
    left: calc(80% - 32px);
    top: calc(50% - 32px);
  }
}

@media screen and (orientation: landscape) {
  #pagestorycreate #vid_container {
    width: 80%;
    height: 100%;
  }

  #pagestorycreate #vid_container.left {
    left: 20%;
  }

  /* we default to right */
  #pagestorycreate #gui_controls {
    width: 20%;
    height: 100%;
    right: 0;
  }

  /* for the lefties */
  #pagestorycreate #gui_controls.left {
    left: 0;
  }

  #pagestorycreate #switchCameraButton {
    left: calc(50% - 32px);
    top: calc(18% - 32px);
  }

  #pagestorycreate #toggleFullScreenButton {
    left: calc(50% - 32px);
    top: calc(82% - 32px);
  }
}
/* Company Page */
#CompanyPage{
  margin-bottom: 80px;
}
#CompanyPage #CompanyTopNav{
  background-color: rgba(255,255,255,0.9);
  border-top: 4px solid #e1e7eb;
}
#CompanyPage #CompanyBanner{
  width: 100%;
  padding-top: 25%;
  max-height: 300px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
#CompanyPage #CompanyImage img{
  border-radius: 90%;
  max-width: 250px;
  margin: 0 auto;
  text-align: center;
  border: 8px solid #e1e7eb;
  margin-top: -100px;
  display: block;
}
#CompanyPage #CompanyLinks{
  padding-left: 24px;
}
#CompanyPage #CompanyLinks ul li{
  list-style: none;
  display: inline-block;
  margin-right: 32px;
}
#CompanyPage #CompanyLinks ul li a{
  color: #aa55c0;
}
#CompanyPage #CompanyStoryHighlights{
  background-color: rgba(255,255,255,1);
  border-radius: 16px;
  padding: 16px!important;
}
#CompanyPage #CompanyDescription{
  background-color: rgba(255,255,255,1);
  border-radius: 16px;
  padding: 16px!important;
  margin-top: 16px;
}
#CompanyPage #CompanyDescription p{
  font-size: 0.9em;
  color: rgba(0,0,0,0.6);
}
#CompanyPage #SticksAndStones{
  background-color: rgba(255,255,255,1);
  border-radius: 16px;
  padding: 16px!important;
  margin-top: 16px;
}
#CompanyPage #SticksAndStones p{
  font-size: 0.9em;
  color: rgba(0,0,0,0.6);
}
#CompanyPage #Proudr{
  background-color: rgba(255,255,255,1);
  border-radius: 16px;
  padding: 16px!important;
  margin-top: 16px;
}
#CompanyPage #Proudr p {
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.6);
}
@media (max-width: 991px){
  #CompanyTopNav h2.ui.header{
    text-align: center;
  }
  #CompanyTopNav .t-right{
    text-align: center!important;
    margin-top: -16px;
    margin-bottom: 16px;
  }
  #CompanyPage #CompanyDescription{
    margin-left: 8px;
  }
}

#loadit{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1500;
  display: block;
}
#loadit img
{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: auto;
}
#loadit p
{
    margin: 0;
    position: absolute;
    bottom: 20%;
    left: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    font-size: 1em;
    color: #ddd;
}
#colorPicker
{
    width:          100%;
    height:         100%;
    position: absolute;
    clear: both;
    display: none;
    z-index: 100;
    top: 0;
    left: 0;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#colorPicker .track {
    background:     #009ad6 url(/assets/images/tinypicker.png) no-repeat 50% 50%;
    height:         200px;
    width:          200px;
    position:       absolute;
    cursor:         crosshair;
    float:          left;
    left:           calc(50% - 100px);
    top:            calc(50% - 100px);
    display:        none;
    border:         1px solid #444;
    z-index:        2001;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    border-radius: 150px;

}

#colorPicker .color {
    display:        block;
    position:       relative;
    z-index:        2002;
    cursor: pointer;
    top: -15px;
    left: -15px;
}

#colorPicker .colorInner {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    background: #009ad6;
    border-radius: 100px;
    padding: 15px;
    color: #ddd;
    font-size: 200%;
    z-index:2002;
    position: absolute;
    right: 0px;
    top: 30px;
}

#colorPicker .dropdown {
    list-style: none;
    display: none;
    width: 27px;
    position: absolute;
    top: 28px;
    border: 1px solid #444;
    left: 0;
    z-index: 3000;
}

#colorPicker .dropdown li{
    height: 25px;
    cursor: pointer;
    z-index:  2500;
}
.story-create
{
    margin-top: 56px;
}
.img-helper
{
    width: 100%;
    background-image: url("/assets/images/cam-bg.png");
}
.video-helper
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#delete, #shadow, #close-emoji, #close-color
{
     display: none;
}
.nomore
{
    color:#aaa !important;
    background: #555 !important;
}
.transparent
{
    opacity: 0;
}
.emoji
{
    width: 21%;
    height: auto;
    margin: 2%;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.selector-filter
{
    width: 31%;
    height: auto;
    margin: 1%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    border: 1px solid #ededed;
}

.dragable{
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    color: #ddd;
    box-shadow: none !important;
    z-index: 1298;
}

#emoji-con, #filter-con, #wait-con, #close
{
    display: none;
}
#wait-con
{
    background: url("/assets/images/progress.gif") no-repeat center center;
    background-size: contain;
}
.ui.post.card
{
  overflow: hidden !important;
  box-shadow: none;
}
.inner-con
{
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid #ededed;
}
#img-target, .nosidebar
{
    overflow-y: hidden !important;
}
i.bg-default
{
    font-size: 3em;
    margin-top: 8px;
}
.spacer
{
    width: 100%;
    height: 100px;
}


.hash::before
{
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f292";
}

.at::before
{
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f1fa";
}

.dragable.text
{
    left:5%;
    top: 40%;
    max-height: 80%;
    width: 95%;
    vertical-align: middle;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

textarea.para
{
    background: rgba(0,0,0,0);
    color: rgba(0,0,0,0);
    font-size: 1px;
    /*width: 0%;*/
    resize: none;
    border: none;
    outline: none;
    overflow: hidden;
    cursor: none;
    caret-color: transparent;
    display: inline;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    font-family: 'Roboto', sans-serif;
}

.nav-item
{
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.story-wrapper {
    position: relative;
    padding: 0;
    margin: 0;
    margin-top: 0;
    overflow: hidden;

    height: 100%;
    width: 100%;

    text-align: center;

    font-family: sans-serif;
}

#storycreate {
    height: 100%;
    width: 100%;

    -webkit-perspective: 300px;
}

#storycreate section {
    overflow: hidden;
    display: position;
    position: absolute;
    top: 50%;
    left: 50%;


    background-color: white;
    background-size: 100%;


    -webkit-transition: all 300ms ease-in;
     -moz-transition: all 300ms ease-in;
        -ms-transition: all 300ms ease-in;
         -o-transition: all 300ms ease-in;
            transition: all 300ms ease-in;
}

.para{
    font-family: 'Permanent Marker', cursive;
    background: transparent;
    color: #ddd;
    text-align: center;
    overflow-wrap: break-word;
}

.para span{
  opacity: 0.8;
  font-family: 'Roboto', sans-serif;
  text-decoration: underline;
}

.story-content{
    width: 100%;
    height: 100%;
    border-radius: 3px;
    border: 1px solid #aaa;
    position: absolute;
    top: 0;
    left: 0;
}
.content-sc{
    backdrop-filter: blur(10px);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1300;
}

#StoryModalIframe, #StoryCreateModalIframe
{
  border: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  position: absolute;
}

#StoryModal, #StoryCreateModal
{
  background: none transparent !important;
  box-shadow: none !important;
  webkit-box-shadow: none !important;
  height: 100%;
  margin: 0 !important;
}

.storymodal, .storycreatemodal {
  z-index: 999999 !important;
  padding: 0 !important;
}

#StoryModal, #StoryCreateModal {
  margin: 0 !important;
  width: 100% !important;
}


@media only screen and (max-width: 991px) {
  #ChatModal .close {
    top: -0.4465rem!important;
    right: -0.6rem!important;
  }
}

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

.story-wrapper {
    position: relative;
    padding: 0;
    margin: 0;
    margin-top: 0;
    overflow: hidden;

    height: 100%;
    width: 100%;

    text-align: center;

    font-family: sans-serif;
}

#coverflow {
    position: absolute;
    left: 50%;
    top: 50%;
    overflow: hidden;

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

.overlay-section{
    display: position;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateZ(140px);
    z-index: 100;
    display: none;
}

#coverflow section {
    display: none;
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;

    background: white url('/assets/images/cam-bg.gif');
    background-size: 100%;
}

#coverflow .slowly
{
  -webkit-transition: all 300ms ease-in;
     -moz-transition: all 300ms ease-in;
        -ms-transition: all 300ms ease-in;
         -o-transition: all 300ms ease-in;
            transition: all 300ms ease-in;
}


@media screen and (max-height: 899px){
  .story-content{
      border: none !important;
  }

  @media (max-aspect-ratio: 9/16) {
    #coverflow section
    {
        width: 100%;
        height: calc(100vw * 16 / 9);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    #coverflow
    {
        width: 100%;
        height: calc(100vw * 16 / 9);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
  }

  @media (min-aspect-ratio: 9/16) {
    #coverflow section
    {
        width: calc(100vh * 9 / 16);
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    #coverflow
    {
        width: calc(100vh * 9 / 16);
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
  }
}

@media screen and (min-height: 900px) and (max-height: 1200px){
    #coverflow section
    {
        width: 400px;
        height: 711px;

        transform: translate(-50%, -50%);
    }
    #coverflow
    {
        width: 540px;
        height: 711px;

        transform: translate(-50%, -50%);
    }

    .coverflowvideo
    {
        width: 400px !important;
    }

    #controls
    {
        width: 540px;
        height: 711px;
        z-index: 41;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        position: absolute;
        display: block !important;
    }
}

@media screen and (min-height: 1200px){
    #coverflow section
    {
        width: 500px;
        height: 888px;

        transform: translate(-50%, -50%);
    }

    #coverflow
    {
        width: 640px;
        height: 888px;

        transform: translate(-50%, -50%);
    }

    .coverflowvideo
    {
        width: 500px !important;
    }

    #controls
    {
        width: 640px;
        height: 888px;
        z-index: 41;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        position: absolute;
        display: block !important;
    }
}

#controls
{
    display: none;
}

.story-pic{
    width: 100%;
    height: 100%;
}

.story-vid{
    width: calc(100% - 2px);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    object-fit: fill;
}

.story-content
{
  display: none;
}

#go_forward
{
  position: absolute;
  height: 100%;
  width: 70px;
  right: 0;
}
#go_back
{
  position: absolute;
  height: 100%;
  width: 70px;
  float: left;
}

.directions
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
  color: #ddd;
}

#back_arrow, #next_arrow{
  display: none;
  top:50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 5em;
  color: #390055;
  opacity: 0.5;
  -webkit-transition: all 200ms ease-in;
     -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
         -o-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
}

#back_arrow:hover , #next_arrow:hover{
  opacity: 1;
}

.go_forward, .go_back
{
  width: 20%;
}

@media screen and (min-width: 767px){

    #back_arrow, #next_arrow{
      display: block;
    }
    .go_forward, .go_back
    {
      display: none;
    }
}


.reactionicon
{
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 6% 0% 10px 4%;
  color: #ddd;
  z-index: 1299;
  font-size: 2.5em !important;
}

.storyanswer {
  background: transparent;
  color: #ddd;
  resize: none;
  border: 1px solid #ddd;
  outline: none;
  width: 80%;
  font-size: 1.5em;
  position: absolute;
  bottom: 0;
  left: 3%;
  margin: 10px 3%;
  text-align: left;
  border-radius: 20px;
  padding: 0 16px;
  backdrop-filter: blur(5px);
  background: rgba(0,0,0,0.15);
  z-index: 1299;
}

.storyanswer:focus {
  color: #ddd;
  /*backdrop-filter: blur(5px);*/
  background: rgba(0,0,0,0.4);
  outline: none;
}

.storyanswer::placeholder {
  color: #ccc;
}

.storysend{
  bottom: 0;
  right: 0;
  position: absolute;
  margin: 0px 4% 15px 0px;
  color: #ddd;
  z-index: 1299;
}

.storyprofilepic
{
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 10%;
  margin: 6% 0% 0% 5%;
  border: 1px solid #ddd;
  z-index: 1299;
}

.storyspeaker
{
  position: absolute;
  top: 0;
  right: 10%;
  width: 10%;
  margin: 6% 5% 0% 0%;
  color: rgba(221, 221, 221, 0.8);
  font-size: 2em;
  z-index: 1299;
}

.storyspecial
{
  position: absolute;
  top: 0;
  right: 0;
  width: 10%;
  margin: 6% 5% 0% 0%;
  color: rgba(221, 221, 221, 0.8);
  font-size: 2em;
  z-index: 1299;
}

.storyhighlight
{
  position: absolute;
  top: 0;
  right: 20%;
  width: 10%;
  margin: 6% 5% 0% 0%;
  color: rgba(221, 221, 221, 0.8);
  font-size: 2em;
  z-index: 1350;
}

.storyhighlightrow
{
  margin: 2em 0 !important;
}

.storyspeaker:hover
{
  color: rgba(221, 221, 221, 1);
}

.storyusername
{
  position: absolute;
  top: 0;
  left: 20%;
  margin: calc(3% + 5px) 0% 0% 0%;
  color: #ddd;
  font-size: 1.5em;
  z-index: 1299;
}

.storydate
{
  position: absolute;
  top: 0;
  left: 20%;
  margin: 12% 0% 0% 0%;
  color: #ddd;
  font-size: 1em;
  z-index: 1299;
}

.storyprogressbar
{
  position: absolute;
  top: 0;
  right: 0;
  height: 4px;
  width: 94%;
  margin: 3%;
  display: flex;
  z-index: 1299;
}

.storyprogressbar li
{
  display: inline;
  list-style-type: none;
  height: 100%;
  margin: 0 2px;
  border-radius: 2px;
  background-color: rgba(0,0,0,0.2);
}

.storyprogressbar li.active
{
  background-color: rgba(255,255,255,0.8) !important;
}

#curpartdiv
{
  height: 100%;
  background-color: rgba(255,255,255,0.8) !important;
  border-radius: 5px;
  left: 0;
  width: 0%;
}

.storylink
{
  z-index: 1299;
}

.storyreaction
{
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
}

.storyreaction.container
{
  display: none;
  backdrop-filter: blur(10px);
  background-color: rgba(0,0,0,0.6);
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  z-index: 1450;
}

.storylaugh
{
  top: 30%;
  left: 20%;
}

.storyflame
{
  top: 30%;
  right: 20%;
}

.storyparty
{
  bottom: 30%;
  left: 20%;
}

.storyheart
{
  bottom: 30%;
  right: 20%;
}

.storyreport
{
  top: 5%;
  left: 40%;
}

.storyreport:hover
{
  width: 20% !important;
}

.storyicon
{
  position: absolute;
  width: 20%;
  height: auto;
  -webkit-transition: all 200ms ease-in;
     -moz-transition: all 200ms ease-in;
        -ms-transition: all 200ms ease-in;
         -o-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
}

.reactionsend
{
  width: 30% !important;
}

.greyedreaction
{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.greyedreaction:hover
{
  width: 20% !important;
}

.storyicon:hover
{
  width: 30%;
}
.storycreate section
{
  margin: 0 !important;
  display: block !important;
}
.story-tabs .nav-tabs .nav-item.centerlarge .nav-link
{
  height: 56px;
  width: 56px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  line-height: 56px;
  padding: 0;
  color: #fff;
  margin: 0 5px;
  margin-top: -18px;
  border-radius: 50%;
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.15);
  -ms-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.15);
}
.story-tabs .nav-tabs .nav-item .nav-link.active
{
  color: #009ad6 !important;
  background-color: #ffffff !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  -moz-backdrop-filter: blur(15px);
  -ms-backdrop-filter: blur(15px);
}
.story-tabs .nav-tabs .nav-item .nav-link {
    font-size: 12px;
    border: 0;
    margin: 0;
    color: #ddd;
    border-radius: 4px;
}
.story-tabs .nav-tabs .nav-item {
    width: 20%;
}

#Story-Side-Menu .story-tabs{
  background: none !important;
  position: fixed;
  top: 10vh;
  left: 0;
  right: 0;
  width: 32px;
  z-index: 1030;
  color: #ffffff;
  margin-bottom: 10px;
}
#Bottom-Menu .story-tabs{
    background: none !important;
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    z-index: 1030;
    color: #ffffff;
    margin-bottom: 10px;
}
#Bottom-Menu .story-tabs ul{
  margin: 0;
}
.story-tabs .nav-tabs
{
  border-bottom: none !important;
}

.filterblur
{
  display: none;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(1.5rem);
  z-index: 999999;
}

.storymenuicon {font-size: 1.5em !important;}

.storymenuicon.greyed
{
    color: rgba(68, 68, 68, 0.65);
}

section.storyad
{
  background: none !important;
}

div.storyad
{
  width: 100% !important;
  height: 100% !important;
}

i.countryflag{
    background: url('/assets/images/flags.png') no-repeat;
    display: inline-block;
    width: 16px;
    height: 11px;
}


div.highlightlist
{
  font-size: 2em;
  margin: 10px;
}

.flagicon:after
{
    background-size: 16px 12px;
    display: inline-block;
    width: 16px;
    height: 12px;
    content: "";
    margin-left: 10px;
}
.flagicon.DE:after
{
    background-image: url('/assets/images/flags/de.png');
}
.flagicon.FR:after
{
    background-image: url('/assets/images/flags/fr.png');
}
.flagicon.GB:after
{
    background-image: url('/assets/images/flags/gb.png');
}
.flagicon.GR:after
{
    background-image: url('/assets/images/flags/gr.png');
}
.flagicon.NL:after
{
    background-image: url('/assets/images/flags/nl.png');
}
.flagicon.CH:after
{
    background-image: url('/assets/images/flags/ch.png');
}
.flagicon.LU:after
{
    background-image: url('/assets/images/flags/lu.png');
}
.flagicon.BE:after
{
    background-image: url('/assets/images/flags/be.png');
}
.flagicon.AT:after
{
    background-image: url('/assets/images/flags/at.png');
}
.flagicon.PL:after
{
    background-image: url('/assets/images/flags/pl.png');
}
.flagicon.SE:after
{
    background-image: url('/assets/images/flags/se.png');
}
.flagicon.LI:after
{
    background-image: url('/assets/images/flags/li.png');
}
.flagicon.CZ:after
{
    background-image: url('/assets/images/flags/cz.png');
}
.hasStory
{
  box-shadow: 0px 0px 5px 8px rgba(74, 184, 196, 0.9);
}
.storycategory
{
  border: 3px solid #e1e7eb!important;
}
.storyslick
{
  opacity: 1;
  width: 450px;
  margin-top: 40px;
  transform: translate3d(0px, 0px, 0px);
}
.story-user:focus
{
  outline: none!important;
}
#NewsSlider .NewsSlides {display: none}
#NewsSlider .slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
#NewsSlider .prev, #NewsSlider .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: rgba(0,0,0,0.5);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
#NewsSlider .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
#NewsSlider .prev:hover, #NewsSlider .next:hover {
  color: rgba(255,255,255,1);
  background-color: rgba(0,0,0,0.8);
}
#NewsSlider .dot {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
#NewsSlider .active:not(.header), #NewsSlider .dot:hover {
  background-color: #717171;
}
#NewsSlider .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
#NewsSlider .fade:not(.show){
  opacity: 1;
}
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@media only screen and (max-width: 300px) {
  #NewsSlider .prev, #NewsSlider .next, #NewsSlider .text {font-size: 11px}
}
.onlineuser {
  position: relative;
}
.onlineuser::after {
    content: '';
    width: 15px;
    height: 15px;
    margin-top: -11px;
    right: 16px;
    bottom: 8px;
    -moz-border-radius: 7.5px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    background-color: #21BA45 !important;
    border-color: #21BA45 !important;
    position: absolute;
  }
.onlineuserpost{
    box-shadow: 0px 0px 1px 3px #21BA45;
}


.rainbowloader .loader-inner {
  bottom: 0;
  height: 60px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.rainbowloader .loader-line-wrap {
  animation: spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite;
  box-sizing: border-box;
  height: 50px;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform-origin: 50% 100%;
  width: 100px;
}
.rainbowloader .loader-line {
  border: 4px solid transparent;
  border-radius: 100%;
  box-sizing: border-box;
  height: 100px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.rainbowloader .loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.rainbowloader .loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.rainbowloader .loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.rainbowloader .loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.rainbowloader .loader-line-wrap:nth-child(5) { animation-delay: -250ms; }

.rainbowloader .loader-line-wrap:nth-child(1) .loader-line {
  border-color: hsl(0, 80%, 60%);
  height: 90px;
  width: 90px;
  top: 7px;
}
.rainbowloader .loader-line-wrap:nth-child(2) .loader-line {
  border-color: hsl(60, 80%, 60%);
  height: 76px;
  width: 76px;
  top: 14px;
}
.rainbowloader .loader-line-wrap:nth-child(3) .loader-line {
  border-color: hsl(120, 80%, 60%);
  height: 62px;
  width: 62px;
  top: 21px;
}
.rainbowloader .loader-line-wrap:nth-child(4) .loader-line {
  border-color: hsl(180, 80%, 60%);
  height: 48px;
  width: 48px;
  top: 28px;
}
.rainbowloader .loader-line-wrap:nth-child(5) .loader-line {
  border-color: hsl(240, 80%, 60%);
  height: 34px;
  width: 34px;
  top: 35px;
}
#hashtagLoader{
  margin-top: 16px;
  position: relative;
}
#Postloader{
  position: relative;
  margin-top: 32px;
}
.scrollToTop i{
  font-size: 1.7em;
  padding-top: 6px;
}
#DashboardInfo{
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  padding: 16px;
}

#DashboardInfo .ui.segment{
  padding: 32px;
  color: rgba(0,0,0,0.6);
  max-width: 500px;
  margin: 0 auto;
}
#ChatModalIframe{
  margin-bottom: -5px;
}
#videoCallModal{
  padding: 0px;
}
#videoRequestImg{
  top: 55%;
  right: 50%;
  position: absolute;
  transform: translate(50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  z-index: 10;
}
#profile_img_div_2{
  top: 55%;
  right: 50%;
  position: absolute;
  transform: translate(50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  z-index: 5;
  backdrop-filter: blur(20px);
  background-image: url('/assets/images/videocall/rainbow-call.png');
  background-size: cover;
}
@keyframes spin {
  0%, 15% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.display-Dektop{display: block!important;}
.display-Mobile{display: none!important;}
.display-Dektop-inline{display: inline-block!important;}
.display-Mobile-inline{display: none!important;}
.display-Dektop-inline-important{display: inline-block !important;}
.display-Mobile-inline-important{display: none !important;}
.ui.button.basic.icon.smileyMenue{display: inline-block !important;}
/* Media Querys */
@media (max-width: 992px) {
  .ui.button.basic.icon.smileyMenue{display: none!important;}
  .display-Dektop {
    display: none!important;
  }
  .display-Mobile {
    display: block!important;
  }
  .display-Dektop-inline {
    display: none!important;
  }
  .display-Mobile-inline {
    display: inline-block!important;
  }
  .display-Dektop-inline-important {
    display: none !important;
  }
  .display-Mobile-inline-important {
    display: inline-block !important;;
  }
}
#hoverModal {
  display: none;
  position: absolute;
  z-index: 100;
}
.postVideo {
  position: relative;
  padding-bottom: 56.25% !important; /* 16:9 */
  height: 0;
}
.postVideo iframe{
  position: absolute;
  width: 100%;
  height: 100%;
}
.typingPost{
  display: none;
  margin-left: 10px;
}
.typingPostUser{
  width: 25px;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid grey;
}
#output_image{
  width: 100%;
}
.circular.ui.icon.button.scrollToTop{
  display: none !important;
  position: fixed;
  height: 50px;
  width: 50px;
  bottom: 95px;
  right: 20px;
  z-index: 1001!important;
}
.ui.bottom.attached.tab.segment.active.smiley-panel-body{
  margin-bottom: 0 !important;
}
.wallHashtag.fabolous{
  background: red;
  background: -webkit-linear-gradient(left, orange , yellow, green, cyan, blue, violet);
  background: -o-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
  background: -moz-linear-gradient(right, orange, yellow, green, cyan, blue, violet);
  background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wallHashtag.tommy{
  background: deeppink;
  background: -webkit-linear-gradient(left, deeppink, blueviolet, violet, deeppink, blueviolet, violet);
  background: -o-linear-gradient(right, deeppink, blueviolet, violet, deeppink, blueviolet, violet);
  background: -moz-linear-gradient(right, deeppink, blueviolet, violet, deeppink, blueviolet, violet);
  background: linear-gradient(to right, deeppink, blueviolet, violet, deeppink, blueviolet, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wallHashtag .feature{
  background: gold;
  background: -webkit-linear-gradient(left, darkviolet, goldenrod);
  background: -o-linear-gradient(right, darkviolet, goldenrod);
  background: -moz-linear-gradient(right, darkviolet, goldenrod);
  background: linear-gradient(to right, darkviolet, goldenrod);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#FullSizeLoader{
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1001;
  background-color: #edf3f8;
}
.dark #FullSizeLoader{
  background-color: #141414;
}
#interestsChannels .ui.basic.label.active,
#interestsCountrys .ui.basic.label.active{
  background-color: #9bc3cf;
  border: #9bc3cf;
  color: rgba(255,255,255,0.9);
  font-weight: 500;
}
#interestsChannels .ui.basic.label,
#interestsCountrys .ui.basic.label {
   border-radius: 24px;
 }
#interestsChannels .ui.basic.label img.ui.mini.image,
#interestsCountrys .ui.basic.label img.ui.mini.image{
  display: inline;
  max-width: 18px;
  vertical-align: text-top;
  max-height: 18px;
}
.socketOnline{
  display: none;
}
.notiSeen{
  opacity: 0.6;
}