:root {
  --gutter: 8px;
}

.app {
  padding: var(--gutter) 0;
  display: grid;
  grid-gap: var(--gutter) 0;
  grid-template-columns: var(--gutter) 1fr var(--gutter);
  align-content: start;
}

.app > * {
  grid-column: 2 / -2;
}

.app > .full {
  grid-column: 1 / -1;
}

.hs {
  display: grid;
  grid-gap: calc(var(--gutter) / 2);
  grid-template-columns: 0px;
  grid-template-rows: minmax(100px, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: calc(32% - var(--gutter) * 2);

  overflow-x: scroll;
  scroll-snap-type: x proximity;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.25 * var(--gutter));
}

.hs:before,
.hs:after {
  content: '';
  width: 0px;
}


.app {
  width: 100%;
  height: auto;
  overflow-y: scroll;
}

ul.hs {
  list-style: none;
  padding: 0;
}

.hs > li,
.item {
  scroll-snap-align: center;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
margin-right:4px;
  border-radius: 8px;
}



.no-scrollbar {
  scrollbar-width: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}


.scrollbox {display:block; position: relative; overflow: hidden; width:100%;  padding: 0px; background-color: #fff; border-radius: 8px;}
.scrollbox .img-holder {display:block; position: relative; overflow: hidden; width:100%; height:100px;  z-index: 1}
.scrollbox .img-holder img {position: absolute; max-width: 110%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover}

.scrollbox .content-holder {display: block; position:absolute; width:100%; bottom:0; padding: 4px; padding: 10px; z-index: 3; color:#eee; background: rgba(0,0,0,0.28); font-size: 0.9em; line-height: 1.2em}
.scrollbox .content-holder h4 {color:#eee; font-size: 1.3em; line-height: 1.3em; font-weight:600}

.scrollbox .online-holder {position: absolute; top: 10px; left:10px;  width: 16px; height: 16px; border-radius: 50%; border:2px solid #fff; z-index: 4; background:rgba(0,203,4,1.00);}



.minibox {display:block; position: relative; overflow: hidden; padding: 0px; margin:5px; background-color: #fff; border: 1px solid; border-color:#eee !important; border-radius: 8px;}
.minibox .img-holder {display:block; position: relative; overflow: hidden; width:100%; height:90px;  z-index: 1}
.minibox .img-holder img {position: absolute; width: 100%; height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover}

.minibox .content-holder {display: block; position:absolute; width:100%; bottom:0; padding: 4px; padding: 10px; z-index: 3; color:#eee; background: rgba(0,0,0,0.28); font-size: 0.9em; line-height: 1.2em}
.minibox .content-holder h4 {color:#eee; font-size: 1.3em; line-height: 1.3em; font-weight:600}

.minibox .online-holder {position: absolute; top: 10px; left:10px;  width: 16px; height: 16px; border-radius: 50%; border:2px solid #fff; z-index: 4; background:rgba(0,203,4,1.00);}



.superbox1 {display:block; position: relative; overflow: hidden; padding: 0px; margin:10px 0; background-color: #fff; height: 100% !important; border: 1px solid; border-color:#eee !important; border-radius: 8px;}
.superbox1 .img-holder {display:block; position: relative; overflow: hidden; width:100%; height:140px;  z-index: 1; object-fit: cover}
.superbox1 .img-holder img {object-fit: cover}

.superbox1 .content-holder {display: block; position:absolute; width:100%; bottom:0; padding: 4px; padding: 10px; padding-left: 130px; z-index: 3; color:#eee; background: rgba(0,0,0,0.28); font-size: 0.9em; line-height: 1.2em}
.superbox1 .content-holder h4 {color:#eee; font-size: 1.3em; line-height: 1.3em; font-weight:600}



.superbox1 .avatar-holder {position: absolute; top: 50%; transform: translateY(-50%); left:20px; width: 100px; height: 100px; overflow: hidden; border-radius: 50%; border:3px solid #eee; z-index: 3}
.superbox1 .avatar-holder img { width: 100%; height: 100%; object-fit: cover}




.mini-avatar-holder {display: inline-block; width: 30px; height: 30px; overflow: hidden; border-radius: 50%; border:1px solid #eee; z-index: 3;}
.mini-avatar-holder img { width: 40px;  margin-left:-5%}

.mini-avatar {font-size:1.2em}
.mini-avatar img {display:inline-block; height:28px; max-width: 38px; border-radius: 14px}

.superbox1 .online-holder {position: absolute; top: 26px; left:26px;  width: 16px; height: 16px; border-radius: 50%; border:2px solid #fff; z-index: 4; background:rgba(0,203,4,1.00);}



.superbox2 {display:block; position: relative; padding: 0px; margin:10px 0; background-color: #fff; height: 100% !important; border: 1px solid; border-color:#eee !important; border-radius: 8px;}
.superbox2 .img-holder {display:block; position: relative; overflow: hidden; width:100%; height:120px; border: 1px solid; border-color:#eee !important; border-radius: 8px; z-index: 1}
.superbox2 .img-holder img {position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.superbox2 .img-holder .extra-holder {display: block; width: 100%; color: #fff; text-align: right; font-size: 12px; font-weight: 600; padding:10px; padding-bottom: 5px; padding-top: 20%;  position: absolute; bottom:0px; right:0px; overflow: hidden;  z-index: 3; background: linear-gradient(0deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);}

.superbox2 .content-holder {display: block; position:relative; width:100%; padding: 4px; padding: 10px; padding-left: 110px; z-index: 3; font-size: 0.9em; line-height: 1.2em}
.superbox2 .content-holder h4 {font-size: 1.3em; line-height: 1.3em; font-weight:600}
.superbox2 .content-holder {color:#494949 !important;}

.superbox2 .content-bottom-holder {display: block; position:relative; width:100%; padding: 4px; padding: 10px; font-size: 0.9em; line-height: 1.2em}

.superbox2 .avatar-holder {position: absolute; bottom:20px; left:20px; width: 80px; height: 80px; overflow: hidden; border-radius: 50%; border:2px solid #fff; box-shadow: #da0565 0px 0px 1px 2px; z-index: 3}
.superbox2 .avatar-holder img {max-width: 120%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.superbox2 .avatar-holder.green {box-shadow: rgba(0,203,4,1.00) 0px 0px 1px 3px;}

.superbox2 .online-holder {position: absolute; bottom: 26px; left:20px;  width: 16px; height: 16px; border-radius: 50%; border:2px solid #fff; z-index: 4; background:rgba(0,203,4,1.00);}







.recipient-header {display:block; width:100%; z-index: 4; overflow: hidden}
.recipient-header h4 {padding: 0; margin: 0; line-height: 1em}

.recipient-header .takaisin {display:block; padding-right: 6px; position: relative; float: left;}
.recipient-header a {font-size: 2em; color:#aaa} .recipient-header a:hover {}
.recipient-header .contents {display:block; float: left;}
.recipient-header .takaisin h4 {}

.messages-header h4 {padding-bottom: 0; margin-bottom: 0;}

.recipient-info {display:block;}
.recipient-info .infoblock {display:inline-block; font-size:12px; line-height: 12px; padding-right:6px;}

.recipient-info a.minibutton {display:inline-block; box-sizing: border-box; position:relative; font-size:11px; line-height: 11px; padding:4px 8px;
    border-radius: 2px; border:1px solid #cccccc; background-color: #eee; color:#393939; font-weight: 600}

.recipient-info a.minibutton:hover, .recipient-info a.minibutton:focus, .recipient-info a.minibutton:active, .recipient-info a.minibutton.active {
    background-color:#da0565; border-color:#da0565;  color: #fff !important;
} 


.hideform {display:none !important;}
.hidewhenselected {display:none; opacity: 0;}

.messenger-recipient {display:flex; position: relative; width:100%; padding:10px; vertical-align: middle;transition: 0.3s ease;}
.messenger-recipient:hover, .messenger-recipient:focus, .messenger-recipient.active {background-color:#eee}

.messenger-recipient .messenger-avatar {display:inline-block; position: relative; width: 45px; height: 45px; overflow: hidden;
    border-radius: 50%; border:1px solid #fff; box-shadow: #da0565 0px 0px 1px 1px; z-index: 3;}
.messenger-recipient .messenger-avatar.green {box-shadow: rgba(0,203,4,1.00) 0px 0px 1px 1px;}
.messenger-recipient .messenger-avatar img {height: 100%; min-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.messenger-recipient .messenger-content {display: inline-block; font-size: 12px; line-height: 14px; font-weight: 600; color:#595959 !important; padding: 0 8px;}
.messenger-recipient .messenger-content h5, .messenger-recipient .messenger-content h5 a {font-size: 15px; color:#494949 !important; margin: 0; padding: 0}
.messenger-recipient .messenger-content h5 span.light {font-size: 13px; font-weight: 400; color:#999999 !important;}
.messenger-recipient .messenger-content .date {position: absolute; right:10px; bottom:5px; color: #0F9CC4;}

.messenger-recipient .messenger-content span.like {color:#595959}
.messenger-recipient .messenger-content span.comment {color:#48A700}
.messenger-recipient .messenger-content span.follow {color:#ED007B}


.messenger-recipient .messenger-content a.katsopost {color:#ED007B}
.messenger-recipient .messenger-content a.katsopost:hover, .messenger-recipient .messenger-content a.katsopost:focus {color:#FF2A98}

.messenger-recipient .online-holder {position: absolute; top: 8px; left:10px;  width: 12px; height: 12px; border-radius: 50%; border:2px solid #fff; z-index: 4; background:rgba(0,203,4,1.00);}

a.receiver.active .messenger-recipient {background-color:#eee}
a.receiver.luettu .messenger-recipient .messenger-content span.date {color:#ccc !important}



#receiver {height:90vh; width:100%; overflow: hidden}
.messages {display:block; width:100%;  height:100%; padding-bottom:12%;padding-top:5%; overflow: scroll;}

.messenger {display:block; position: absolute; bottom:0; width:100%; height:auto; z-index: 10}
.messenger .imgpreview img {width:100%;}
.messenger .sendbuttons .btn-sendfeed, .messenger .sendbuttons .btn-clearfeed  {margin:0}

@media only screen and (max-width: 576px) {
    
.messenger {display:block; position: fixed; left:0;  width:100%; overflow: hidden}
.messages {display:block; width:100%;  height:550px; padding-top: 12%; overflow: scroll;}
.recipient-header {position: absolute; top:0; background: #000}
#receiver {height:70vh; width:100%; overflow: hidden}
}

.is-fixed {
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.bubbleWrapper {
padding: 10px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-self: flex-end;
  color: #fff;
}
.inlineContainer {
  display: inline-flex;
}
.inlineContainer.own {
  flex-direction: row-reverse;
}

.inlineIcon {
position: relative; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; border:1px solid #fff; margin-top: auto; margin-bottom: 4px;
}
.bubbleWrapper .image {display: block; position: relative; box-sizing: border-box; overflow:hidden; border-radius: 14px;}
.bubbleWrapper .image img { border-radius: 14px; object-fit: contain}



.bubbleWrapper .imagegalleryholder {display: block; position: relative; box-sizing: border-box; overflow:hidden; width:300px;}
.bubbleWrapper .imagegallery {display: block; position: relative; box-sizing: border-box; overflow:hidden; border-radius: 14px; float: left; margin-right: 5px;}
.bubbleWrapper .imagegallery img { border-radius: 14px; width:120px;}


.bubbleWrapper .video {display: block; border-radius: 14px; width: 320px;object-fit: contain}
.bubbleWrapper .video iframe {width:100%; object-fit: contain}

.bubbleWrapper .unlock {display: block; position: relative; box-sizing: border-box; overflow:hidden; border-radius: 14px; background: #eee; padding: 10px; margin-top: 10px;}

.inlineIcon img {max-width: 120%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.ownBubble {
  min-width: 60px;
  max-width: 80%;
  padding: 4px;
  margin: 4px 6px;
  background-color: #0F9CC4;
  border-radius: 16px 16px 0 16px;
  border: 1px solid #0F9CC4;

}
.otherBubble {
  min-width: 60px;
  max-width: 80%;
  padding: 4px;
  margin: 4px 6px;
  background-color: #eee;
  border-radius: 16px 16px 16px 0;
  border: 1px solid #eee;
    color:#595959;

}
.own {
  align-self: flex-end;
}
.other {
  align-self: flex-start;
}
span.own,
span.other{
  font-size: 14px;
  color: grey;
}

.ownBubble .text, .otherBubble .text {display:block; padding:4px 8px !important}

.feed-container .dropdown {position: absolute; top: 36px; right:5%; z-index: 200;}
.feed-container .dropdown i.icon-more-horizontal {font-size:20px;}
.feed-container .dropdown-toggle::after { content: none; } 

.feed-container .fa.fa-eye-slash {color:#fff !important}


.superbox-live {display:block; box-sizing: border-box; position: relative; padding: 1px; overflow: hidden; background-color: #fff; height: 100% !important;}
.superbox-live .img-holder {display:block; box-sizing: border-box; position: relative; overflow: hidden; width:100%; height:200px;  z-index: 1; }

.superbox-live img {position: absolute; width:100%; min-height: 100%; transition: transform .2s ease;}
.superbox-live:hover img {transform: scale(1.1);}


.superbox-live .content-holder {display: block; position:absolute; width:100%; bottom:0; padding: 20px 10px; padding-bottom: 10px;  z-index: 3; color:#eee;
    font-size: 0.9em; line-height: 1.2em;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);}



.superbox-live .content-holder h4 {color:#eee; font-size: 1.3em; line-height: 1.3em; font-weight:800}


.superbox-live .live-holder {display: block; width: 100%; padding:10px; padding-bottom: 30px; position: absolute; top: 0; left:0; z-index: 4; color:#fff; line-height: 16px;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 100%);}


.superbox-live .online-holder {width: 16px; height: 16px; border-radius: 50%; border:2px solid #fff; z-index: 4; background:rgba(0,203,4,1.00); float: left; margin-right: 4px}
.superbox-live .badge-holder {border-radius: 50%; border:2px solid #fff; z-index: 4; background:rgba(0,203,4,1.00); float: left; margin-right: 4px}


@media only screen and (max-width: 576px) {
    
    .superbox-live .img-holder {height:150px}
    
}
@media only screen and (max-width: 768px) {
    
    .superbox-live .img-holder {height:140px}
    input[type=radio] {
  transform: scale(1,1);
}
    
}
@media only screen and (max-width: 992px) {
    
    .superbox-live .img-holder {height:150px}
    
}

.edellinen {display:block; box-sizing: border-box; padding: 8px 15px; background: #191919;}
.edellinen a {color:#eee; font-weight: 600; line-height: 16px;} .edellinen i {color:#eee; margin-top: 4px}

.superbox {display:block; position: relative; box-sizing: border-box; width:100%; padding: 10px; background-color: #fff; border: 1px; border-color: #eee !important;}
.superbox .img-holder {display:block; position: relative; overflow: hidden; width:100%; height:240px;  border: 1px solid; border-color:#eee !important; border-radius: 8px; z-index: 1}
.superbox .img-holder.live {display:block; position: relative; overflow: hidden; width:100%; padding-top: 56.25%;}
.superbox .img-holder img {
      position: absolute;
      top: 0; left:0;
      width:100%;
      height: 100%;
      object-fit: cover; background: #fff;
}

.superbox .nauhoite-holder {display:block; position: relative; overflow: hidden; width:100%; padding-top: 56.25%; border: none;}
.superbox .nauhoite-holder .video-js {
      position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: none !important;
    width:100%

}

.superbox .top-content {display: block; position:absolute; width:100%; top:0; padding: 20px 10px; padding-bottom: 80px;  z-index: 3; color:#eee;
    font-size: 0.9em; line-height: 1.2em;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);}

.superbox .top-content h3 {color:#fff !important}

.vjs-matrix .vjs-big-play-button {
  border-color: #00ff00;
}
.videopreloader {display:block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.videopreloader i {color:rgba(255,255,255,0.82); font-size: 4em !important}
.videopreloader .spinner-grow {width: 5rem; height: 5rem; color: #ffffff}

.top-content {display: block; position:absolute; width:100%; top:0; left:0; padding: 20px 20px; padding-bottom: 70px;  z-index: 3; color:#eee;
    font-size: 1em; line-height: 1.2em;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);}

.top-content .online {display:inline-block; padding: 2px 10px; background:rgba(0,203,4,1.00); color: #fff; font-size: 14px; font-weight: 600; float: right; border-radius: 4px; }
.top-content .online.varattu {background:rgba(221,99,69,1.00);}
.top-content .online.offline {background:#595959;}

.bottom-content {display: block; position:absolute; width:100%; bottom:0; padding: 20px 10px; padding-bottom: 10px; padding-top: 50px;  z-index: 3; color:#eee;
    font-size: 1em; line-height: 1.2em;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);}

.flag {display:inline-block; position: relative; width: 20px; height: 20px; border-radius: 50%; overflow: hidden;}
.flag img {height:100% !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.superbox .content-holder {display: block; position:relative; width:100%; padding: 10px; line-height: 1.2em}
.superbox .content-holder h4 {font-size: 1.3em; line-height: 1.3em; font-weight:600;  margin-left:120px;}
.superbox .content-holder small, .superbox .content-holder p {margin-left:120px; font-size: 14px;}

.superbox .avatar-holder {position: absolute; top: 25px; left:20px; width: 100px; height: 100px; overflow: hidden; border-radius: 50%; border:3px solid #fff; box-shadow: #da0565 0px 0px 1px 3px; z-index: 3}
.superbox .avatar-holder img { width: 100%; height: auto;}
.superbox .online-holder {position: absolute; top: 25px; left:35px; width: 16px; height: 16px; border-radius: 50%; border:2px solid #fff; z-index: 4; background:rgba(0,203,4,1.00);}


.profiili .superbox {padding:0; border:0px;}
.profiili .superbox .img-holder {border:0px; border-radius: 0px !important;}
.profiili .superbox .avatar-holder {top:-40px}
.profiili .superbox .online-holder {top:-35px; left:30px;}


.asetukset .superbox .avatar-holder {top:30px}
.asetukset .superbox .online-holder {top:30px; left:32px;}


.profiili.live .superbox .avatar-holder {top:auto; bottom:30px}
.profiili.live .superbox .online-holder {top:auto; bottom: 35px; left:30px;}

.miniprofile {position: absolute; top: 25px; left:20px; overflow: hidden; z-index: 4}
.miniprofile h2 {color:#fff !important; font-size: 1.6em; line-height: 1em; font-weight: 800 !important; padding: 0; margin: 0;}
.miniprofile small {color:#eee; font-weight: 600}

.profiletop {opacity: 0; overflow: hidden; position: fixed; top:0; z-index: 20 }
.profiletop.showprofiletop {opacity:100;}


@media only screen and (max-width: 768px) {
    
    .superbox .avatar-holder {bottom:25px; top:auto; width:80px; height:80px;}
    .profiili.live .superbox .online-holder {left:25px}
}

.pulser {
  width: 30px;
  height: 30px;
  background: rebeccapurple;
  border-radius: 50%;
  position: relative;
}

.superbox .online-holder::after {
  animation: pulse 3000ms cubic-bezier(0.9, 0.7, 0.5, 0.9) infinite;
}

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(2);
    opacity: 0.4;
  }
}

.superbox .online-holder::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0,203,4,1.00);
  border-radius: 50%;
  z-index: -1;
}



.feed .p-dropdown {position: absolute; top: 30px; right:5%; z-index: 200;}
.feed .p-dropdown i.icon-more-vertical {font-size:22px;}

.asetukset .superbox {padding:0; border:0px;}
.asetukset .superbox .img-holder {border:0px; border-radius: 0px !important;}


.content-holder .buttons {display:block; box-sizing: border-box; text-align: right;}
.content-holder .buttons .scores {display:block; box-sizing: border-box; text-align: right; font-size: 0.8em; padding-right: 10px;}
.content-holder .buttons .scores .score-likes, .content-holder .buttons .scores .score-followers {display:inline; font-weight: 800}


h4 a.backbutton {color:#333; cursor: pointer}

h4 a.backbutton:hover, h4 a.backbutton:focus {color:#da0565 !important}


.top-content h3 a.backbutton {color:#999 !important; cursor: pointer}
.top-content h3 a.backbutton:hover, .top-content h3 a.backbutton:focus {color:#da0565 !important}

.bg-fafa {background:#FBFBFB;}


.profilecounters {display:block; margin-bottom: 8px;}
.profilecounter {display:inline-block; box-sizing: border-box; padding:2px 8px; margin-right: 4px; border: 1px solid #eee; text-align: center; background: #ffffff; font-size: 0.8em; font-weight:800;}
.profilecounter span {font-size: 14px; font-weight:400; color: #757575; margin-top:-4px !important}

.nicknamelink {color:#757575;}
.nicknamelink:hover {color:#292929; text-decoration: underline !important;}

h2.profile {font-weight:800 !important; margin-bottom: 10px !important}





img.verified {width:16px; }
h2.profile img.verified {width:32px;}
h2.profile {font-size: 2em}

.feed-container {display:block; box-sizing: border-box; width:100%; position: relative; margin: 10px 0; overflow: hidden;}

.feed-header, .feed-content {display:block; padding: 10px; position: relative; box-sizing: border-box; width:100%;}

.feedcarousel {display:block; position: relative; width:100%; height:auto;}

.feed-image {display:block; padding: 10px; position: relative; box-sizing: border-box; width:100%;  height: auto; overflow: hidden;  text-align: center;}


.feed-image img {width: 100%; margin: 0 auto; border-radius: 26px;}
.feed-image .locked img {width: 100%; margin: 0 auto; border-radius: 26px;}

@media only screen and (max-width: 768px) {
    
    .feed-image.karuselli {display:block; width:100%; height:auto;}
    
}
.feed-image.karuselli {display:block; width:100%; height:auto;}
.feed-image.karuselli img {width:100%; min-height: 400px;  object-fit: contain !important}



.feed-header .p-dropdown i.icon-more-horizontal {color:#191919 !important; font-size: 1.8em !important}

.feed-image .locked {display: block; box-sizing: border-box; width:100%; position: relative; overflow: hidden; border-radius: 26px;}


.blurred {
-webkit-filter: blur(18px);
  -moz-filter: blur(18px);
  -o-filter: blur(18px);
  -ms-filter: blur(18px);
  filter: blur(18px);}

.feed-image .locked .content {display: block; width:100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.feed-image .locked .alaosa {display: block; width:100%; position: absolute; bottom: 0px; padding:30px;}

.feed-image .locked .overlay {display: block; width:100%; height:100%; position: absolute; top:0; Left:0; border-radius: 26px; overflow: hidden}


.feed-image .locked .content i.locked {font-size:5em; color: #AFAFAF !important}


.feed-video {display:block; padding: 10px; position: relative; box-sizing: border-box; width:100%;  height: auto; overflow: hidden;  text-align: center;}

.feed-video .media-video-holder { min-height: 240px; max-height:600px; padding-top:0; text-align: center; background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);}
.feed-video .media-video-holder img {position: relative; width: auto; min-height: 240px; max-height:600px; margin: 0 auto;}

.feed-video .feed-video-holder {display: block; box-sizing: border-box; position: relative; height:auto; padding-top:0; text-align: center; border-radius: 26px; overflow: hidden;}
.feed-video .feed-video-holder img {width: 100%; height:auto;}
.feed-video .feed-video-holder .locked img {width: 100%; margin:10px; height:auto;}

.feed-video .feed-video-holder iframe {position: absolute; top:0px; left:0px;}

@media only screen and (max-width: 768px) {

    .feed-video .feed-video-holder iframe {width: 100% !important;}
    
    .feed-video {width: 100%;}
    .feed-video .feed-video-holder {display: block; width: 100%; }
    .feed-video .feed-video-holder video {width: 100% !important;}
}





.feed-header a {color:#393f4d;}
.feed-header a.alias {color:#292929; font-size: 1.2em; font-family: "Finlandica";}
.feed-header a.alias:hover {text-decoration:underline !important; color:#3E485F !important}

.feed-header a.nickname {color:#6B6B6B;}
.feed-header a:hover {text-decoration:underline !important; color:#3E485F !important}


.feed-avatar-holder {display: block; position: relative; width: 50px; height: 50px; overflow: hidden; border-radius: 50%; border:2px solid #fff; box-shadow: #da0565 0px 0px 1px 2px; float: left;}
.feed-avatar-holder img {width: 100%; min-height: 100%}

.feed-header .online-holder {position: absolute; top: 10px; left:10px; width: 14px; height: 14px; border-radius: 50%; border:2px solid #fff; z-index: 4; background:rgba(0,203,4,1.00);}

.feed-alias-holder {display: inline-block; padding:0 10px; box-sizing: border-box;  float: left;}
.feed-date-holder {display: inline-block; padding:0 10px; box-sizing: border-box;  float: right;}

p {font-weight:400 !important;}
.card {box-shadow:none !important}


a.somebutton {display:inline-block; margin-right:5px; padding: 2px; padding-right:6px; font-size: 12px; line-height: 14px; border:1px solid; border-color: #999; border-radius: 50px; color:#333}
a.somebutton img {line-height: 14px}

.feed-buttons {display: block; box-sizing: border-box; padding:10px;}

.like_container, .comment_container, .tip_container {display:inline-block; padding:4px 8px; border: 1px solid #696969 !important; border-radius: 50px}
.like_container .score, .comment_container .comment-score, .tip_container .tip-score {display:inline-block; float:left; font-weight:500; padding: 0 8px; color: #696969}

.tip_container .tip-score:hover, .tip_container .tip-score:focus {color: #da0565}

.feed-buttons  {color:#696969 !important;}
.feed-buttons a:hover, .feed-buttons a:focus, .feed-buttons a:active {color:#da0565 !important}

.feed-buttons a i.fa .like {font-size:1.1em;}

.feed-buttons i {font-size: 1.5em; display: inline-block; float: left; color:#696969}
.feed-buttons a i.like, .feed-buttons a i.tip, .feed-buttons a i.comment {color:#696969}
.feed-buttons a i:hover {cursor:pointer}

.feed-buttons a i.unlikedcolor {color:#696969 !important}
.feed-buttons a i.unlikedcolor:hover {color:#da0565 !important}
.feed-buttons a i.likedcolor {color:#da0565 !important}
.feed-buttons a i.likedcolor:hover {color:#696969 !important}

.feed-buttons a i.tip:hover, .feed-buttons a i.tip:active, .feed-buttons a i.tip:focus, feed-buttons a .tip:hover,  feed-buttons a .tip:focus {color:#da0565}
.feed-buttons a i.like:hover, .feed-buttons a i.like:active, .feed-buttons a i.like:focus {color:#da0565}
.feed-buttons a i.comment:hover, .feed-buttons a i.comment:active, .feed-buttons a i.comment:focus {color:#da0565}


.feed-comments {display:none;}
.feed-comments.show {display:block; transition: 0.2;}
.feed-comments.hide {display:none;}

.feed-comments .commentform {position:relative; border-top:1px solid #D5D5D5; border-bottom:1px solid #D5D5D5; padding: 0;}
.feed-comments .commentform {background-color:#fafafa;}
.feed-comments .commentform input {
    background-color:#FCFCFC;
    padding:14px !important;
    padding-top: 14px !important;
    padding-left:60px !important;
    padding-right:90px !important;
    outline: none; box-shadow:none !important; font-size:16px}
.feed-comments .commentform .btn-sendfeed {padding:0px; margin-left:10px !important}
.feed-comments .commentform .btn-sendfeed i {}

.commentform button {position:absolute; bottom:4px; right:8px; margin: 0; padding: 0}
.commentform button i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:18px;}

.commentform button[type=submit]:disabled
{
  margin-top:0px; margin-bottom: 0px;
  height:40px; width:40px;
  line-height: 40px !important;
  border: 1px solid #E5F1F4;
  background: #fff;
  padding: 0px 10px !important;
  border-radius: 50px !important;
  color: #CACACA;
font-weight: 600; font-size: 13px;
  cursor: not-allowed;
  transition: background .2s ease-in-out;

}

.lcep-trigger {
    display: inline-block;
    position: absolute;
    cursor: pointer;
    top : 12px !important;
    right: 58px !important;
}

#feedform .lcep-trigger {
    top : 8px !important;
    right: 8px !important;}

#settingsform .lcep-trigger {
    top : 8px !important;
    right: 8px !important;}

#messengerform .lcep-trigger {
    top : 8px !important;
    right: 8px !important;}

.lcep-trigger svg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid transparent;
    opacity: 0.8;
    fill: #696969 !important;
    transition: all .15s ease;
}
.lcep-trigger svg:hover {
    fill: #202020 !important;
}


.feed-comments-comments {padding:10px; }

.feed-comments-comments .commentlist {display: inline-block; box-sizing: border-box; width:100%; font-size:14px; margin-bottom: 10px}
.feed-comments-comments .commentlist span.alias a {color:#292929; font-weight: 600}
.feed-comments-comments .commentlist .comment-avatar {display:inline-block; width:10%; box-sizing: border-box; float: left; }
.feed-comments-comments .commentlist .comment-content {display: inline; max-width: 90%;  padding-left:8px; float: left; overflow: hidden}
.feed-comments-comments .commentlist .comment-content .date {dislay:block; font-size:12px; color:#7E7E7E}

.feed-comments-comments .commentlist.reply {display: inline-block; max-width:90%; font-size:14px; margin-bottom: 10px; margin-left: 10%;}

.feed-comments .feed-avatar-holder {position: absolute;  width:40px; height: 40px; bottom:4px; left:6px; box-shadow: none;}

.comment-content span.reply {font-weight: 700; cursor:pointer}
.comment-content span.reply:hover, .comment-content span.reply:active, .comment-content span.reply:focus {cursor:pointer; color:#FF0072}

.btn-profile {border: 1px solid #494949 !important; background: #fff !important; color: #494949 !important; font-weight: 600 !important;}
.btn-profile:hover, .btn-profile:focus, .btn-profile:active {border: 1px solid #FF0072 !important; background: #FF0072 !important; color: #fff !important;}
.btn-profile.active {border: 1px solid #FF0072 !important; background: #ffffff !important; color: #da0565 !important; font-weight: 600 !important;}

.btn-tilaa {border: 1px solid #da0565 !important; background: #da0565 !important; color: #fff !important; font-weight: 600 !important;}
.btn-tilaa:hover, .btn-tilaa:active, .btn-tilaa:focus, .btn-tilaa.active {border: 1px solid #FF0072 !important; background: #FF0072 !important; color: #fff !important;}

.tilaa .modal-header {position:relative; min-height:100px;}
.tilaa .benefits {display: block; font-size: 13px; font-weight: 600; color:#292929}
.tilaa .benefits i {font-size: 16px;}
.tilaa a, .tilaa h5 {color:#595959;}
.modal {
  background: rgba(0, 0, 0, 0.7); 
}
.modal-backdrop {
  display: none;
}

 /* Dropdown Button */
.dropbtn {

}


.profile-dropdown {
  position: relative;
  display: inline-block;
    width:100%;
}
.profile-dropdown .dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  width: 100%;
border:1px solid #eee; border-radius: 4px;
  z-index: 1;
}
.profile-dropdown .dropdown-content h5 {
  color: #292929;
  padding: 6px 12px; padding-top: 10px;
  text-decoration: none;
  display: block;
}
.profile-dropdown .dropdown-content a {
  color: #292929;
  padding: 6px 12px;
  text-decoration: none;
border-top:1px solid #eee;
  display: block;
}
.profile-dropdown .dropdown-content a:hover {background-color: #fafafa;}
.profile-dropdown .show {display:block;} 


img.lazyness {min-width: 100%}

.alaston li a {font-size: 1.1em !important; font-weight: 600 !important}
.alaston li a:hover {color:#eeeeee !important}
.alaston li a span.badge {border-radius:50px !important; padding:4px 6px !important; font-size: 0.7em !important}

.alaston .dropdown-menu li a {font-size: 1em !important; font-weight: 500 !important}
.alaston .dropdown-menu li a:hover {color:#eeeeee !important}
.alaston .dropdown-menu li a span.badge {border-radius:50px !important;}


.btn-startlive {border: 1px solid #da0565 !important; background: #da0565 !important; color: #fff !important; font-weight: 800 !important;}
.btn-startlive:hover, .btn-startllive:focus {border: 1px solid #da0565 !important; background:#FF0072 !important;}

.btn-startlive.active {border: 1px solid #da0565 !important; background: #ffffff !important; color: #da0565 !important; font-weight: 600 !important;}

.btn-startlive i.icon, .btn-startlive i.fa {font-size:1.2em}

.media-img-holder {display:block; position: relative; width:100%; height:200px; overflow: hidden;}
.media-img-holder img {width:100%; min-height: 100%; object-fit: cover;}
.media-img-holder .media-content {display: block; width: 100%; position: absolute; bottom:0; left:0; box-sizing: border-box; padding:10px 10px 0px 10px; background: rgb(41,61,76);
background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);}

.media-img-holder .media-mitat {display: block; width: 100%; position: absolute; top:0; left:0; box-sizing: border-box; padding:0 10px; background: rgb(41,61,76);
background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);}

.media-img-holder .media-mitat small {font-weight:600; color:#ccc;}
.media-img-holder .media-content a {font-weight:600;}

.media-img-holder .media-content a:hover {}




.media-video-holder {display:block; position: relative; overflow: hidden; width:100%; padding-top: 56.25%;}
.media-video-holder img {position: absolute;
      top: 0; left:0;
      width:100%;
      height: 100%;
      object-fit: cover;}

.media-video-holder video { min-height: 400px;
      object-fit: cover;}



.media-play-button {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.media-play-button i {font-size:5em; color:#ccc;}
.media-play-button i:hover {color:#fff; cursor: pointer}

.media-video-holder .media-content {display: block; width: 100%; position: absolute; bottom:0; left:0; box-sizing: border-box; padding:10px 10px 10px 10px; background: rgb(41,61,76);
background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);}

.media-video-holder .media-mitat {display: block; width: 100%; position: absolute; top:0; left:0; box-sizing: border-box; padding:0 10px; background: rgb(41,61,76);
background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);}

.media-video-holder .media-mitat small {font-weight:600; color:#ccc;}
.media-video-holder .media-content h5 {font-weight:700; color: #fff !important}

.media-video-holder .media-content a:hover {color: #FFB401 !important}




.bg-black {background-color:#000;}
.bg-darkgrey {background-color:#111;}

.font-16 {font-size:16px !important;}
.font-14 {font-size:14px !important;}
.font-12 {font-size:12px !important;}


.shadow1 {box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px -5px;}



a.quick_link {
    display:block;
    box-sizing: border-box;
    overflow: hidden;
    width:100%;
    padding: 6px;
    margin-bottom: 4px;
    background-color: #fff;
    border-bottom: 1px solid;
    border-color: #eee !important;
    border-radius: 0px;
    color:#002573;
    font-size: 14px;
    transition: 0.3s;
}

a.quick_link.current {font-weight: 700}


a.quick_link_2 {
    display:block;
    box-sizing: border-box;
    overflow: hidden;
    width:100%;
    padding: 6px;
    margin-bottom: 4px;
    border-bottom: 1px solid;
    
    border-radius: 0px;
    color:#eee;
    font-size: 14px;
    transition: 0.3s;
}

a.quick_link_2.current {font-weight: 700}



#mobilemenu {padding: 0px 20px;  background-color:rgba(19,25,36,1); border-top:1px solid; border-color:rgba(31,41,59,1.00)}
#mobilemenu .phone {} 
#mobilemenu .tablet {}

a.botlink {display:block; box-sizing: border-box; padding:10px 8px; position:relative;}
a.botlink:hover i, a.botlink.current i {color:#FF0072}

a.botlink.home {background-color:rgba(19,25,36,1); border-radius:50%; padding: 20px; margin-top:-12px;}
a.botlink.home i {font-size:36px; color:#eee;}
a.botlink i {font-size:30px; color:#eee;}
/* position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */
.botlink .bubble {display:block;  position: absolute; top:6px; left:0px; text-align: center; background: #FF0072; color: #ccc; border-radius: 25px; font-size: 11px; font-weight: 600; line-height: 12px;
    padding: 2px 6px; border:2px solid #000; overflow: hidden}



.sidebarmenu {display:block; width:100%; overflow: hidden;}

.sidebar-header {display:flex; align-items: center}

.sidebarmenu .sidebar-avatar-holder {display: inline-block;
    position: relative; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; border:1px solid #111; box-shadow: #da0565 0px 0px 1px 2px; z-index: 3; transition: 0.3s; margin:10px 10px;}
.sidebarmenu .sidebar-avatar-holder img {max-width: 120%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.sidebarmenu .sidebar-alias-holder {
    display: inline-block;
}


.homeheader {display:flex;align-items: center;}
.homeheader .left, .homeheader .right {width:50%;}
.homeheader .right {text-align: right}

.numerofont {font-family: "Open Sans";}

a.settings {
    display:block;
    position: relative;
    box-sizing: border-box;
    padding:12px; padding-left:16px;
    font-weight: 500;
    font-size: 1.1em;

    width:100% !important;
    color:#696969;
    transition: 0.3s;
    border-bottom:1px solid #eee;
}

a.settings i {font-size: 1.4em;}

a.settings:hover, a.settings:active, a.settings.active, a.settings.current  {background-color:#eee; color:#FF0072}
a.settings i {margin-right:10px;}



.settings-otsikko {
    display:block;
    position: relative;
    box-sizing: border-box;
    padding:14px 0 14px 16px;
    font-weight: 600;
    font-size: 1.2em;
    width:100% !important;
     color:#FF0072;
    background-color:#fff;
    transition: 0.3s;
    border-bottom:1px solid #eee;
}

a.settings-profiili {
    display:block;
    position: relative;
    box-sizing: border-box;
    padding:12px; padding-left:16px;
    font-weight: 500;
    font-size: 1.1em;

    width:100% !important;
    color:#696969;
    transition: 0.3s;
    border-bottom:1px solid #eee;
}

a.settings-profiili:hover, a.settings-profiili:active, a.settings-profiili.active, a.settings-profiili.current  {background-color:#fafafa; color:#FF0072}
a.settings-profiili i {margin-right:10px;}


a.settings-profiili.julkaisu {
    background-color:#FF0072;
    color:#eee;

}

a.settings-profiili.julkaisu:hover, a.settings-profiili.julkaisu:active, a.settings-profiili.julkaisu.active, a.settings-profiili.julkaisu.current  {background-color:rgba(87,159,0,1.00); color:#FFF}




.sidebar-avatar {display:block;
    position: relative;
    box-sizing: border-box;
    padding:8px; padding-left:16px;}


.bubble {display:block;  position: absolute; top:2px; left:4px; text-align: center; background: #FF0072; color: #fff; border-radius: 25px; font-size: 10px; font-weight: 600; line-height: 12px;
    padding: 2px 6px; border:2px solid #fff; overflow: hidden}




/*form select*/
select.form-control:not([size]):not([multiple]) {
  height: 44px;
}

select {
  width: 100%;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url(../images/dropdown-arrow.png) !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  border: 1px solid #e6e8eb;
  border-radius: 1px !important;
}

select[multiple] {
  background-image: none !important;
}


input {border-radius:0px !important; padding: 22px 20px !important; font-size: 14px}
textarea {border-radius:0px !important; padding: 22px 20px !important; font-size: 14px}
.hakemusform label {font-weight:600 !important;}
.hinnoittelu label {font-weight:600 !important;}

.hinnoittelu input {position: relative;  border-radius:0px !important; font-size: 1.15em !important; font-weight: 600; padding-left: 30px !important}
.hinnoittelu i {position: absolute; bottom:17px; left: 28px; color:#797979}

.hinnoittelu.messenger-st input {padding-left: 12px !important}



.teho {color:#da0565 !important}
.bg-teho {background-color:#da0565 !important}
.teho-light {color:#f0ddeb !important}

/*
a {color:#da0565}
a:hover, a:focus, a:active {color:#FF0072 !important}
*/
.shadow1 {box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 15px -5px;}

.peppubg {background-image: url("/pics/kansi-localfans7.webp"); background-size: cover; background-position: center left; min-height: 400px !important}
.peppubg2 {background-image: url("/pics/kansi-localfans.webp"); background-size: cover; background-position: center left; min-height: 400px !important}
.peppubg3 {background-image: url("/pics/Localfans3.jpg"); background-size: cover; background-position: center center; min-height: 400px !important}
.peppubg4 {background-image: url("/pics/Localfans4.jpg"); background-size: cover; background-position: center center; min-height: 400px !important}


.peppubg .overlay, .peppubg2 .overlay {display:block; position: absolute; top:0; left:0; width:100%; height:100%; background-color: rgba(0,0,0,0.20); z-index: 0}
.peppubg .overlay .content, .peppubg2 .overlay .content {display:block; width:100%; position: absolute;  top: 50%; left: 50%; transform: translate(-50%, -50%);}

.peppubg h1, .peppubg2 h1 {line-height:1.17em}
.peppubg p, .peppubg2 p {line-height:1.35em}


.logo-default.absolute {display:block; position: absolute; bottom:25px; left:40px;}


img.minisvg {height:30px !important; margin-left: -8px}
.chart {display:block; width:100%;}

.chat {color:#3E3E3E; }

.gradient-ct {
background: rgb(41,61,76);
background: radial-gradient(circle, rgba(41,61,76,1) 0%, rgba(19,25,36,1) 100%);
}

.gradient-ctl {
background: rgb(41,61,76);
background: linear-gradient(165deg, rgba(41,61,76,1) 0%, rgba(19,25,36,1) 100%);
}


.tabs .nav-tabs .nav-link {
  color: #091a44;
  padding: 14px 24px;
  transition: 0.3s ease;
  font-weight: 500;
  border: 0;
  /*border: $nav-tabs-border-width solid transparent;*/
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 2px solid #e6e8eb;
}
.tabs .nav-tabs .nav-link:hover, .tabs .nav-tabs .nav-link:active, .tabs .nav-tabs .nav-link:focus  {
  color:#da0565
}
.tabs .nav-tabs .nav-link.disabled {
  color: rgba(72, 72, 72, 0.5);
}
.tabs .nav-tabs .nav-link.active {
  color: #da0565;
  background-color: transparent;
  border-bottom: 2px solid #da0565;
}

.thin {font-weight: 400 !important;}


input[type=file] {
  width: auto;
  max-width: 100%;
  color: #444;
  padding: 4px !important;
  background: #fff;
  border-radius: 10px !important;
  border: 1px solid #ccc;
}
input[type=file]::file-selector-button {
  margin-right: 20px;
  border: none;
  background: #292929;
  padding: 10px 20px;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

input[type=file]::file-selector-button:hover {
  background: #595959;
}

input[type=submit]:disabled, input[type=reset]:disabled
{
  margin-top:20px; margin-bottom: 20px;
  height:40px;
  line-height: 40px !important;
  border: 1px solid #E5F1F4;
  background: #fff;
  padding: 0px 20px !important;
  border-radius: 50px !important;
  color: #CACACA;
font-weight: 600; font-size: 13px;
  cursor: not-allowed;
  transition: background .2s ease-in-out;

}


button[type=submit]:disabled, button[type=reset]:disabled
{
  margin-top:20px; margin-bottom: 20px;
  height:40px;
  line-height: 40px !important;
  border: 1px solid #E5F1F4;
  background: #fff;
  padding: 0px 20px !important;
  border-radius: 50px !important;
  color: #CACACA;
font-weight: 600; font-size: 13px;
  cursor: not-allowed;
  transition: background .2s ease-in-out;

}



input[type=reset]:disabled
{

}
.inputholder {display:block; position: relative; overflow: visible; padding: 4px 0;}
.profilesettings label {display: inline-block; padding:2px; font-weight:600 !important; color: #494949 !important; position: absolute; top: -10px; left:16px; background: #fff; z-index: 10}
.profilesettings input {border-radius:0px !important; border-color:#ccc; padding: 24px 16px !important; font-size: 1em !important}
.profilesettings input[type="text"] {

}

.badge-counters {
background: #fff; padding:4px 6px;  border: 1px solid #0F9CC4
}

.btn-upload {
  margin-top:20px; width:100%;
  height:30px;
  line-height: 30px !important;
  border: none;
  background: #da0565;
  padding: 0px 20px !important;
  border-radius: 10px !important;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.btn-upload:hover {
  background:#FC0272;
}


.btn-sendfeed {
  margin-top:20px; margin-bottom: 20px;
  height:40px;
  line-height: 40px !important;
  border: 1px solid #0F9CC4;
  background: #0F9CC4;
  padding: 0px 20px !important;
  border-radius: 50px !important;
  color: #fff;
font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.btn-sendfeed:hover {
  background:#0080A4;
    color:#fff;
}

.btn-clearfeed {
  margin-top:20px; margin-bottom: 20px;
  height:40px;
  line-height: 40px !important;
  border: 1px solid #0F9CC4;
  background: #fff;
  padding: 0px 20px !important;
  border-radius: 50px !important;
  color: #0F9CC4;
font-weight: 600; font-size: 13px;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

.btn-clearfeed:hover {
  background:#E5F1F4;
}



.feedform {
    border:0 !important;
    width:100%;
    padding:20px;
    transition: 0.4s; font-size:14px;

}

textarea {
              font-size:14px !important;
                outline: none;
              box-shadow:none !important;
              border:1px solid #ccc !important;
}

.feed-addfile {font-size:22px; color:#696969;}
.feed-addfile i:hover {color:#da0565; cursor:pointer}

.imgpreview {display:block; box-sizing: border-box; position: relative; width: 20%; max-height: 130px; margin:10px; overflow: hidden; line-height: 1px; border-radius: 12px;}
.imgpreview img {width:100%;}
.imgpreview .remove {display:block; padding:4px; position:absolute; top:4px; right:4px;}
.imgpreview .remove i {font-size:2em; color:#fff;}
.imgpreview .remove i:hover {font-size:2em; color:#da0565;}


.postpreviews {display:block; box-sizing: border-box; position: relative; width:100%; line-height: 0px; margin:5px 0;}
.videopreview {display:inline-block; box-sizing: border-box; position: relative; max-height: 130px; margin-left: 0px; margin-right:10px; overflow: hidden;}

.newimgpreview {display:inline-block; box-sizing: border-box; position: relative; max-height: 130px; margin:0; overflow: hidden;}
.newimgpreview img {display: inline-block; max-height: 100px; border-radius: 12px; margin-right: 10px;}
.newimgpreview .remove {display:block; padding:4px; position:absolute; top:4px; right:4px;}
.newimgpreview .remove i {font-size:2em; color:#fff;}
.newimgpreview .remove i:hover {font-size:2em; color:#da0565;}


.imgname {font-size:12px; text-align: left; font-weight: 600;}




.imgpreview-profiili-holder {display:block; width:100%; padding:10px 0 0 0; text-align: center;}
.imgpreview-profiili {display:inline-block; position: relative; width: 80px; height: 80px; overflow: hidden; border-radius: 50%; border:3px solid #fff; box-shadow: #da0565 0px 0px 1px 2px; cursor: pointer; transition: .2s ease-in-out;}
.imgpreview-profiili img {width:100%; min-height:100%;}


.imgpreview-tausta-holder {display:block; width:100%; padding:10px 0 0 0; text-align: center;}
.imgpreview-tausta {display:inline-block; position: relative; width: 100%; height: 80px; overflow: hidden; border-radius: 8px; border:3px solid #fff; box-shadow: #da0565 0px 0px 1px 2px;  cursor: pointer; transition: .2s ease-in-out;}
.imgpreview-tausta img {width:100%; min-height:100%;}

.imgpreview-id-holder {display:block; width:100%; padding:10px 0 0 0; text-align: center;}
.imgpreview-id {display:inline-block; position: relative; width: 100%; height: 240px; overflow: hidden; border-radius: 8px; border:3px solid #fff; box-shadow: #da0565 0px 0px 1px 1px;  cursor: pointer; transition: .2s ease-in-out;}
.imgpreview-id img {width:100%; min-height:100%;}


.uploadlabel {display:block; width:100%;}

.upload-kuvake {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; z-index: 10; color:#fff; font-size: 50px; opacity: 0.3; transition: opacity .2s ease-in-out;}
.imgpreview-profiili:hover .upload-kuvake {opacity:0.7;}
.imgpreview-tausta:hover .upload-kuvake {opacity:0.7;}

/* Tooltip container */
.muntooltip {
  position: relative;
  display: inline-block;
  /* If you want dots under the hoverable text */
}

/* Tooltip text */
.muntooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
    font-size: 12px;
    line-height: 14px;
 text-transform: none !important; font-weight: 400 !important;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 10;
  width: 80px;
  bottom: 120%;
  left: 50%;
  margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
    
opacity: 0;
  transition: opacity 0.25s;
}

.muntooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.muntooltip:hover .tooltiptext {
  visibility: visible;
opacity: 100;
}


/* The Modal (background) */
.lfmodal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

/* Modal Content */
.lfmodal .modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    border-radius: 4px;
    width: 300px; /* Could be more or less, depending on screen size */
    text-align: left;
}

/* The Close Button */
.lfmodal .close {
    position:absolute;
    top:10px; right:16px;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.lfmodal .close:hover,
.lfmodal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.lfmodal input[type="number"] {
    padding: 10px;
    width: 100px;
}


.creditcard {display:inline-block; background-color: #eee; margin-right:4px; margin-top:5px; border-radius: 2px; padding: 0; padding-bottom: 4px; }
.bg-finn {background:#252b4a !important;}
.text-finn {color:#002ea2}

#results {display:block; position: relative; width:100%; max-height: 80vh; overflow: scroll}
.loading-div, .loading-div-message {display: none; box-sizing: border-box; position: absolute; width: 100%; height: 100%; background-color: rgba(255,255,255,0.8); text-align: center; z-index: 4; text-align:center; padding:50%}

.loading-div-message {padding:10%;}

body.darkmode {background-color:#080a0d; color:#c0cde1}
body.darkmode h1, body.darkmode h2, body.darkmode h3, body.darkmode h4, body.darkmode h5, body.darkmode h6, body.darkmode .text-dark, body.darkmode p, body.darkmode .alias a {color:#ccc !important}
body.darkmode .border, body.darkmode .border-top, body.darkmode .border-bottom, body.darkmode .border-left, body.darkmode .border-right {border-color:#0e121b !important;}
body.darkmode .bg-white, body.darkmode  .feed-container {background-color:#0e121b !important}
body.darkmode .bg-fafa {background-color:#0e121b !important}
body.darkmode .bg-light {background-color:#080a0d !important}
body.darkmode  textarea, body.darkmode .commentform input, body.darkmode #feedform {background-color:#161C2B !important; color:#aaa}
body.darkmode .feed-comments .commentform {border-color:#161C2B}
body.darkmode .comment-avatar, body.darkmode .feed-avatar-holder {border-color:#0e121b !important}

body.darkmode .feed-alias-holder a {color:#eee}
body.darkmode .feed-alias-holder a:hover {color:#fff !important}

body.darkmode a.settings {color:#8793a5;border-bottom:1px solid #101b2d;}
body.darkmode a.settings:hover, body.darkmode a.settings:active, body.darkmode a.settings.active, body.darkmode a.settings.current  {background-color:#0e121b; color:#aaa}

body.darkmode .img-holder, body.darkmode .minibox, body.darkmode .superbox, body.darkmode .superbox1, body.darkmode .superbox2  {border-color:#0e121b !important}
body.darkmode .like_container, body.darkmode .comment_container {border-color:#8793a5}
body.darkmode .bubble {border-color:#0e121b}

body.darkmode .btn-sendfeed, body.darkmode .btn-clearfeed {border-color: #8793a5; background: #0a0f1f; color: #8793a5;}
body.darkmode .btn-sendfeed:hover, body.darkmode .btn-clearfeed:hover {background:#0e121b; color:#8793a5;}

body.darkmode .btn-profile {border-color: #8793a5; background: #0e121b !important; color: #aaa !important;}
body.darkmode .btn-profile:hover {background:#162742 !important; color:#fff; border-color:#8793a5 !important}
body.darkmode .btn-profile.active {color:#da0062 !important;}

body.darkmode input[type=submit]:disabled, body.darkmode input[type=reset]:disabled{border-color: #0e121b; background: #0e121b; color: #464646;}
body.darkmode button[type=submit]:disabled, body.darkmode button[type=reset]:disabled {border-color: #0e121b; background: #0e121b; color: #464646;}



body.darkmode .settings-otsikko {color:#ccc; background-color:#0b0e14; border-color:#0e121b;}
body.darkmode a.settings-profiili {color:#aaa; border-color:#0e121b;background-color:#080a0d;}
body.darkmode a.settings-profiili:hover, body.darkmode a.settings-profiili:active, body.darkmode a.settings-profiili.active, body.darkmode a.settings-profiili.current  {background-color:#0e121b; color:#aaa}
body.darkmode a.settings-profiili.julkaisu {background-color:#FF0072; color:#eee;}
body.darkmode a.settings-profiili.julkaisu:hover, body.darkmode a.settings-profiili.julkaisu:active, body.darkmode a.settings-profiili.julkaisu.active, body.darkmode a.settings-profiili.julkaisu.current  {background-color:#da0062; color:#FFF}



body.darkmode .tabs .nav-tabs .nav-link {color: #aaa; border-bottom: 2px solid #0e121b;}
body.darkmode .tabs .nav-tabs .nav-link:hover, body.darkmode .tabs .nav-tabs .nav-link:active, body.darkmode .tabs .nav-tabs .nav-link:focus  {color:#da0565}
body.darkmode .tabs .nav-tabs .nav-link.disabled {color: rgba(72, 72, 72, 0.5);}
body.darkmode .tabs .nav-tabs .nav-link.active {color: #da0565; background-color: transparent;border-bottom: 2px solid #da0565;}
body.darkmode .nav-tabs {border-color:#0e121b}

body.darkmode .page-menu, body.darkmode .page-menu nav {background-color:#080a0d !important}
body.darkmode .superbox-live, body.darkmode .superbox2 {background-color:#0e121b !important}
body.darkmode .superbox1 .avatar-holder {border-color:#0e121b;}

body.darkmode h4 a.backbutton {color:#aaa !important; cursor:pointer}
body.darkmode h4 a.backbutton:hover, body.darkmode h4 a.backbutton:focus {color:#da0565 !important}

body.darkmode .lcep-trigger svg {fill: #aaa !important;}
body.darkmode .lcep-trigger svg:hover {fill: #eee !important;
}
body.darkmode .profilesettings label {color: #aaa !important; background: #080a0d;}
body.darkmode .profilesettings input, body.darkmode .profilesettings textarea {border-color:#454545 !important; background-color:#080a0d !important; color: #aaa}
body.darkmode .hinnoittelu input[type="text"], body.darkmode .hakemusform input, body.darkmode .hakemusform textarea {border-color:#454545 !important; background-color:#080a0d !important; color: #aaa}
body.darkmode .modal-content {background-color: #0e121b;}

body.darkmode .flickity-button {background-color: transparent;}
body.darkmode .flickity-button:before {color: #ccc;}
body.darkmode .flickity-button:hover {background-color: #0e121b;}
body.darkmode .flickity-button:hover:before {color: #ffffff;}

body.darkmode .messenger {background-color:#161C2B}
body.darkmode .messenger-recipient:hover, body.darkmode .messenger-recipient:focus, body.darkmode .messenger-recipient.active {background-color:#0e121b}
body.darkmode a.receiver.active .messenger-recipient {background-color:#0e121b}
body.darkmode .messenger-recipient .messenger-content {color:#696969 !important;}
body.darkmode .messenger-recipient .messenger-content h5, body.darkmode .messenger-recipient .messenger-content h5 a {color:#aaa !important;}
body.darkmode .messenger-recipient .messenger-content h5 span.light {color:#898989 !important;}
body.darkmode .messenger-recipient .messenger-content .date {color: #0F9CC4 !important;}
body.darkmode .messenger-recipient .messenger-avatar { border:1px solid #000;}

body.darkmode .ownBubble {background-color: #0F9CC4; border: 1px solid #0F9CC4;}
body.darkmode .otherBubble {background-color: #161C2B; border: 1px solid #161C2B;color:#aaa;}

body.darkmode #lc-emoji-picker {background: #161C2B; border: 1px solid #494949; border-radius: 2px;}
body.darkmode .lcep-grid > li {background: #161C2B; border-radius: 0px;}
body.darkmode .lcep-grid > li:hover {background:#21293E;}
body.darkmode .lcep-search {border-top: 1px solid #494949;}
body.darkmode .lcep-search input {background: #090909;border: 1px solid #494949;}
body.darkmode #lc-emoji-picker .lcep-container-title {color: #aaa;}
body.darkmode #lc-emoji-picker * {color: #aaa;}
body.darkmode .lcep-categories li {transition: all .2s ease;}
body.darkmode .lcep-categories li.lcep-active {box-shadow: 0 -3px 0 #48a6f0 inset;}
body.darkmode .lcep-categories a {filter: grayscale(30%) contrast(150%);}
body.darkmode .lcep-categories a:before {background: none;}
body.darkmode .lcep-categories li:not(.lcep-active):hover a:before {background: rgba(255, 255, 255, .1);}

body.darkmode .card-body {background-color:#0e121b;}
body.darkmode .card {border-color:#454545}
body.darkmode .modal-body .benefits {color:#aaa}
body.darkmode .tilaa .modal-header {border-bottom: 1px solid #595959}


body.darkmode a.somebutton {border-color: #494949; color:#ccc}
body.darkmode a.somebutton:hover {color:#eee}





body.darkmode .lfmodal .modal-content {
    border-color:#4C4C4C;
}
/* ---- flickity-button ---- */
.feedcarousel .flickity-button {
  background: #fff;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: -23px 0 0;
  display: block;
  position: absolute;
  top: 50%;
  cursor: pointer;
  transition: all .2s ease 0s;
  color: #fff;
  text-align: center;
  z-index: 200;
  border: 0;
  box-sizing: initial;
  opacity: 100;
  border-radius: 50%;
  box-shadow: 0 0px 15px rgba(0, 0, 0, 0);
}
.flickity-button:before {
  color: #1f1f1f;
}
.flickity-button:hover {
  background-color: #eee;
}
.flickity-button:hover:before {
  color: #111;
}
.flickity-button.next:before, .flickity-button.previous:before {
  font-size: 25px;
  font-family: inspiro-icons !important;
}
.flickity-button.next {
  right: 10px;
}
.flickity-button.next:before {
  margin-left: 4px;
  content: "\e930";
}
.flickity-button.next.disabled {
  opacity: 0;
}
.flickity-button.previous {
  right: 54px;
}
.flickity-button.previous:before {
  content: "\e92f";
  margin-right: 2px;
}
.flickity-button.previous.disabled {
  opacity: 0;
}
.flickity-button svg {
  display: none !important;
}

.flickity-button.next,
.carousel:hover .flickity-button.next {
  left: auto;
  right: 10px;
  opacity: 1;
}
.inspiro-slider:hover .flickity-button.next.disabled,
.carousel:hover .flickity-button.next.disabled {
  opacity: 0;
}

.feedcarousel .flickity-button.previous,
.feedcarousel.carousel:hover .flickity-button.previous {
  right: auto;
  left: 10px;
  opacity: 1;
}
.flickity-button.previous.disabled,
.carousel:hover .flickity-button.previous.disabled {
  opacity: 0;
}

strong {font-weight:700;}

#contenttime
{
    display:none;
}
#contentprice
{
    display:none; color:rgba(134,134,134,1.00)
}