﻿/*
                       _______              _     _      
                      |__   __|            | |   | |     
      _ __   _____      _| |_   _ _ __ ___ | |__ | |
     | '_ \ / _ \ \ /\ / / | | | | '_ ` _ \| '_ \| |
     | | | |  __/\ V  V /| | |_| | | | | | | |_) | |
     |_| |_|\___| \_/\_/ |_|\__,_|_| |_| |_|_.__/|_|


     Copyright © 2018-2020 8-P, LLC. All rights reserved.
*/

/* Basic Layout */

.post {
   width: 100%;
   /* background: #fff; */
   position: relative;
   display: block;
   overflow-wrap: break-word;
   color: #000;
}

.layout_info .post {
   background: #fff;
   border-radius: 4px;
   padding: 16px 16px 0 16px;
   margin: 0 0 8px 0;
}

.post_wrapper {
   z-index: unset;
   position: relative;
   background: #fff;
   border-radius: 4px;
   border: none;
   margin: 0;
   min-height: 60px;
}

.post a,
.post a:visited,
.post a:link {
   color: #000;
   cursor: pointer;
}

.post .post_article a,
.post .post_article a:visited,
.post .post_article a:link {
   text-decoration: underline;
}

.post .block_body p {
   padding: 0;
   line-height: 1.3;
}

.post .block_body p + p {
      margin-top: 12px;
}

.post h2 {
   padding: 0 0 8px 0;
}

.post .block_body p + h2,
.post .block_body p + h1 {
   padding: 16px 0 8px 0;
}

.post .post_body .post_article {
   padding: 0 16px 8px 16px;
   color: #000;
}

.post .post_body .post_headline {
   font-size: 18px;
   font-weight: 700;
   padding: 8px 16px;
}

.post .post_body .post_headline:empty {
   display: none;
}

.post .block + .block {
   border-top: 1px solid #eaeaea;
   margin: 8px 0 0 0;
}

.post .block_body p:last-of-type {
   padding-bottom: 0;
}

.post .post_header {
   display: none;
   border-bottom: 1px solid #c7c7c7;
}

.post.reblog .post_header {
   display: block;
}

.post .block_head {
   width: 100%;
   height: 48px;
   padding: 8px;
   white-space: nowrap;
   position: relative;
}

.post .post_header > * {
   display: inline-block;
   vertical-align: middle;
   max-width: calc(50% - 16px);
}

.post .post_header .reblog_label {
   padding: 0 6px;
   text-align: center;
   color: #000;
}

.post .blog_name {
   text-overflow: ellipsis;
}

.post .post_body {
   /* position: relative; */
   /* z-index: 1; */
}

.post_actions {
   display: flex;
   width: 100%;
   padding: 8px;
   justify-content: space-around;
   background: #fff;
   z-index: 2;
   position: relative;
   border-radius: 0 0 4px 4px;
}

.post_actions:empty {
   display: none;
}

.post .post_body a {
   text-decoration: underline;
}

.part_ask .post_body p {
   padding: 0 8px;
}

.post .block_head .blog_icon {
   display: inline-block;
   margin: 0 8px 0 0;
}

.post .block_handle {
   max-width: calc(100% - 90px);
}

.post .block_date {
   /* display: none; */
   right: 0;
   top: 2px;
   position: absolute;
   font-size: 14px;
   color: #7f7f7f;
}

.post .block_date > span {
   display: inline-block;
   padding: 15px;
}

.arrange.preview .post .block_date > span {
   padding: 0;
}


.post_part + .post_part {
   margin: 16px 0 0 0;
}

.arrange.preview .post_part + .post_part {
   margin: 0 0 0 0;
}

.post .post_image {
   position: relative;
   overflow: hidden;
   width: 100%;
   height: 100%;
}

.post .post_image img,
.post .post_video video,
.post .post_image video,
.post .post_video img {
   max-width: 100%;
   max-height: 100%;
   width: 100%;
   position: absolute;
}

.post .post_submit,
.post .post_source {
   width: 100%;
   text-align: left;
   background: #f5f5f5;
   vertical-align: top;
   display: none;
   height: 32px;
   margin: 16px 0 0 0;
}

.post.source .post_source {
   display: block;
   margin: 0;
}

.compose_body .post .post_submit {
   margin: 0 0 0 0;
}

.compose_body .post .post_source {
   display: none;
}

.post.submit .post_submit {
   display: block;
}

.post_source .post_source_value {
   display: inline-block;
   padding: 8px 0;
   font-size: 14px;
   font-weight: 500;
   width: calc(100% - 65px);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.post .post_submit .post_handle_submit {
   display: inline-block;
   white-space: nowrap;
   text-overflow: ellipsis;
   width: calc(100% - 102px);
}

.submit .post .post_submit {
   display: block;
}

.post .post_submit > span, .post .post_source > span {
   display: inline-block;
   position: relative;
   vertical-align: top;
   margin: 8px 5px 0 8px;
   color: #888;
   font-size: 14px;
}

.post .post_medias {
   display: none;
}

.post .post_footer .post_date {
   display: none;
   font-size: 14px;
}

.post .post_tags {
   padding: 8px 8px 0 8px;
}

.post .post_tags:empty {
   display: none;
}

.post .post_tags ul {
   width: 100%;
   position: relative;
}

.post .post_tags li {
   display: inline-block;
   margin: 2px 8px 2px 0;
   /* max-width: calc(100% - 16px); */
}

li.click_option img {
   margin: -4px;
}

span.term {
   font-weight: 700;
   color: #808080;
   background: rgb(255, 255, 255);
   /* border-radius: 4px; */
   /* color: white; */
}

li.click_tag {
   cursor: pointer;
   color: #8f8f8f;
   text-overflow: ellipsis;
   overflow: hidden;
   /* width: 100%; */
   white-space: nowrap;
   /* display: block; */
   text-decoration: none;
   transition: color .25s ease;
}

   li.click_tag:hover {
      color: rgb(0, 0, 0);
      text-decoration: underline;
   }

.post .post_tags li a {
   cursor: pointer;
   color: #8f8f8f;
   text-overflow: ellipsis;
   overflow: hidden;
   width: 100%;
   white-space: nowrap;
   display: block;
   text-decoration: none;
}

.post .post_tags li a:hover {
   color: rgb(0, 0, 0);
   text-decoration: underline;
}

.post .count_holder {
   font-weight: 700;
   font-size: 14px;
}

.post ul.post_interactions > li {
   display: inline-block;
   position: relative;
   width: 30px;
   text-align: center;
   height: 26px;
   color: #808080;
   transition: all .25s ease;
   vertical-align: top;
   cursor: pointer;
}

.post .post_footer .container {
   width: 100%;
   display: flex;
   justify-content: space-between;
   padding: 12px 8px 0 9px;
}

.flagged li.popup_flag .active {
   color: #ff0000;
}

.like li.click_like .active {
   color: #ff00b6;
}

.favorite li.click_favorite .active {
   color: #ff9400;
}

.popup_flag .flag_panel ul {
   display: none;
}

.flag .popup_flag .flag_panel .add_flag,
.unflag .popup_flag .flag_panel .remove_flag {
   display: block;
}

.post.flag .flag_panel.popup_menu,
.post.unflag .flag_panel.popup_menu {
   display: block;
}

.flag_panel.popup_menu {
   bottom: 34px;
   right: 0;
}

.post .post_interactions li i {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   text-align: center;
   display: unset;
   height: unset;
}

.post.like .post_interactions .click_like .inactive,
.post.flagged .post_interactions .popup_flag .inactive,
.post.favorite .post_interactions .click_favorite .inactive,
.post .post_interactions .active {
   display: none;
   color: #ffffff00;
}

.post.flagged .post_interactions .popup_flag .active {
   display: block;
   -webkit-animation: wobble-hor-bottom 0.8s both;
   animation: wobble-hor-bottom 0.8s both;
}

.post.like .post_interactions .click_like .active {
   display: block;
   -webkit-animation: jello-vertical 0.9s both;
   animation: jello-vertical 0.9s both;
}

.post.favorite .post_interactions .click_favorite .active {
   display: block;
   -webkit-animation: rotate-in-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
   animation: rotate-in-center 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.post .post_interactions li [data-tooltip] {
   margin: 24px 0 0 0;
}

.post .post_interactions li.click_rating [data-tooltip] {
   margin: 27px 0 0 0;
}

.page_dash_blog_queue .page_label,
.page_dash_blog_drafts .page_label {
   color: #36465d;
   font-size: 20px;
   width: unset;
   padding: 0 8px;
   margin: 0;
}

.page_dash_blog_drafts.page_dash .tabs,
.page_dash_blog_queue.page_dash .tabs {
   border-top: none;
   margin: 0 0 16px 0;
   padding: 0;
   display: flex;
   justify-content: center;
   width: unset;
   font-weight: 500;
}

.page_dash_blog_drafts.page_dash .container_holder .tabs a,
.page_dash_blog_queue.page_dash .container_holder .tabs a {
   color: #5e6b7d;
   font-weight: 500;
}

.page_dash_blog_drafts.page_dash .container_holder .tabs .active a,
.page_dash_blog_queue.page_dash .container_holder .tabs .active a {
   color: #36465d;
   font-weight: 700;
}

.page_dash_blog_drafts.page_dash .arrange_message.arrange_empty,
.page_dash_blog_queue.page_dash .arrange_message.arrange_empty {
   color: #4b5b71;
}

.page_dash_blog_queue ul.post_interactions li,
.page_dash_blog_drafts ul.post_interactions li {
   display: none;
}

.page_dash_blog_queue ul.post_interactions li.click_rating,
.page_dash_blog_drafts ul.post_interactions li.click_rating {
   display: block !important;
   top: 8px !important;
   position: absolute;
   right: 0px !important;
   left: unset !important;
   z-index: 3;
}

.page_dash_blog_queue .count_holder.click_select,
.page_dash_blog_drafts .count_holder.click_select {
   display: none;
}

.page_dash_blog_queue .arrange.detail.small .post .post_footer .container,
.page_dash_blog_drafts .arrange.detail.small .post .post_footer .container {
   /* overflow: visible; */
}

.page_dash_blog_queue ul.post_interactions,
.page_dash_blog_drafts ul.post_interactions {
   position: relative;
   display: block !important;
   width: 100%;
}

.page_dash_blog_queue .arrange.detail.small .post ul.post_interactions,
.page_dash_blog_drafts .arrange.detail.small .post ul.post_interactions {
   display: block !important;
   padding: 0;
}

.page_dash_blog_queue .post_actions .click_select,
.page_dash_blog_drafts .post_actions .click_select {
   display: block;
   width: 100%;
   text-align: center;
   font-weight: 500;
   cursor: pointer;
   padding: 8px;
}

.page_dash_blog_queue .arrange.preview .post_actions .click_select,
.page_dash_blog_drafts .arrange.preview .post_actions .click_select {
   position: absolute;
   bottom: 28px;
}

.page_dash_blog_queue .post_actions,
.page_dash_blog_drafts .post_actions {
   /* background: pink; */
   flex-wrap: wrap;
   padding: 0;
   border-top: 1px solid #cccccc;
}

.page_dash_blog_queue .arrange.preview .post_actions,
.page_dash_blog_drafts .arrange.preview .post_actions {
   border-top: none;
}

.page_dash_blog_queue.mobile .arrange.preview .post_actions,
.page_dash_blog_drafts.mobile .arrange.preview .post_actions {
   display: none;
}


.page_dash_blog_drafts .post_footer .container,
.page_dash_blog_queue .post_footer .container {
   height: 0px;
   margin: -1px 0 0 0;
   padding: 0;
}

.page_dash_blog_queue .compose_body .post_actions,
.page_dash_blog_drafts .compose_body .post_actions {
   display: none;
}

.page_dash_blog_queue .control_holder div.button,
.page_dash_blog_drafts .control_holder div.button {
   width: 48%;
   display: block;
   padding: 16px 1% 8px 1%;
   text-align: center;
   align-items: center;
   cursor: pointer;
   position: relative;
}

.page_dash_blog_queue .control_holder div.label,
.page_dash_blog_drafts .control_holder div.label {
   width: 100%;
   display: block;
   padding: 2px 0;
   text-align: center;
   align-items: center;
   cursor: pointer;
}

.page_dash_blog_queue .control_holder,
.page_dash_blog_drafts .control_holder {
   display: flex;
   /* flex-wrap: wrap; */
   justify-content: space-around;
   width: 100%;
}

.page_dash_blog_queue .post,
.page_dash_blog_drafts .post {
   padding: 0;
}

.arrange.preview .post_actions {
   background: none;
   color: #fff;
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   opacity: 0;
   transition: .25s ease;
   background: rgba(255, 255, 255, 0);
   left: 0;
   border-radius: 4px;
   min-height: 76px;
}

.arrange.preview .post:hover .post_actions {
   opacity: 1;
   background: rgba(0, 0, 0, 0.6);
}

.page_dash_blog_queue .arrange.preview .control_holder,
.page_dash_blog_drafts .arrange.preview .control_holder {
   flex-wrap: nowrap;
   justify-content: space-around;
   width: 100%;
   height: 20px;
   padding: 8px 0;
   bottom: 12px;
   position: absolute;
}

.page_dash_blog_queue .arrange.preview .control_holder div.label,
.page_dash_blog_drafts .arrange.preview .control_holder div.label {
   display: none;
}

.page_dash_blog_queue .arrange.preview .control_holder div.button,
.page_dash_blog_drafts .arrange.preview .control_holder div.button {
   width: unset;
   position: relative;
   align-items: flex-end;
   display: flex;
}

.page_dash_blog_queue .arrange.preview .post ul.post_interactions li.click_rating,
.page_dash_blog_drafts .arrange.preview .post ul.post_interactions li.click_rating {
   position: absolute;
   top: 0 !important;
}

.page_dash_blog_queue .arrange.preview .post .post_footer ul.post_interactions,
.page_dash_blog_drafts .arrange.preview .post .post_footer ul.post_interactions {
   bottom: unset;
   top: 8px;
}

.page_dash_blog_queue .post.owner .blog_button,
.page_dash_blog_drafts .post.owner .blog_button {
   display: none;
}

.page_dash_blog_queue .arrange.preview .post .post_footer,
.page_dash_blog_drafts .arrange.preview .post .post_footer {
   display: none;
}

@-webkit-keyframes wobble-hor-bottom {
   0%, 100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
      -webkit-transform-origin: 50% 200%;
      transform-origin: 50% 200%;
   }

   15% {
      -webkit-transform: translateX(0px) rotate(-6deg);
      transform: translateX(0px) rotate(-6deg);
   }

   30% {
      -webkit-transform: translateX(0px) rotate(6deg);
      transform: translateX(0px) rotate(6deg);
   }

   45% {
      -webkit-transform: translateX(0px) rotate(-3.6deg);
      transform: translateX(0px) rotate(-3.6deg);
   }

   60% {
      -webkit-transform: translateX(0px) rotate(2.4deg);
      transform: translateX(0px) rotate(2.4deg);
   }

   75% {
      -webkit-transform: translateX(0px) rotate(-1.2deg);
      transform: translateX(0px) rotate(-1.2deg);
   }
}

@keyframes wobble-hor-bottom {
   0%, 100% {
      -webkit-transform: translateX(0%);
      transform: translateX(0%);
      -webkit-transform-origin: 50% 200%;
      transform-origin: 50% 200%;
   }

   15% {
      -webkit-transform: translateX(0px) rotate(-6deg);
      transform: translateX(0px) rotate(-6deg);
   }

   30% {
      -webkit-transform: translateX(0px) rotate(6deg);
      transform: translateX(0px) rotate(6deg);
   }

   45% {
      -webkit-transform: translateX(0px) rotate(-3.6deg);
      transform: translateX(0px) rotate(-3.6deg);
   }

   60% {
      -webkit-transform: translateX(0px) rotate(2.4deg);
      transform: translateX(0px) rotate(2.4deg);
   }

   75% {
      -webkit-transform: translateX(0px) rotate(-1.2deg);
      transform: translateX(0px) rotate(-1.2deg);
   }
}

@-webkit-keyframes rotate-in-center {
   0% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
      opacity: 0;
   }

   100% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
   }
}

@keyframes rotate-in-center {
   0% {
      -webkit-transform: rotate(-360deg);
      transform: rotate(-360deg);
      opacity: 0;
   }

   100% {
      -webkit-transform: rotate(0);
      transform: rotate(0);
      opacity: 1;
   }
}

@-webkit-keyframes jello-vertical {
   0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }

   30% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
   }

   40% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
   }

   50% {
      -webkit-transform: scale3d(0.85, 1.15, 1);
      transform: scale3d(0.85, 1.15, 1);
   }

   65% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
   }

   75% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
   }

   100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}

@keyframes jello-vertical {
   0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }

   30% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
   }

   40% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
   }

   50% {
      -webkit-transform: scale3d(0.85, 1.15, 1);
      transform: scale3d(0.85, 1.15, 1);
   }

   65% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
   }

   75% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
   }

   100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}

/* Expand */

.expand .post_body .block_body {
   overflow: hidden;
   position: relative;
}

.post_container.arrange .expand .post_body .block_body {
   max-height: 400px;
}

.post_container.arrange.detail.small .expand .post_body .block_body {
   max-height: 600px;
}

.post_container.arrange.detail.large .expand .post_body .block_body {
   max-height: 800px;
}

.expandall .expand .post_body {
   max-height: unset !important;
}

.expandall .expand .block_body {
   max-height: unset !important;
   overflow: unset;
   position: unset;
}

.click_expand {
   cursor: pointer;
}

.post .post_expand {
   display: none;
   text-align: center;
   background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.70), rgb(255, 255, 255));
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 80px;
   border-bottom: 1px solid #ccc;
   font-weight: 700;
   z-index: 2;
   padding: 60px 0 0 0;
}

.expand .post_body .post_expand.expand_detail {
   display: block;
}

.post_body .post_expand .click_expand {
   width: 100%;
   position: absolute;
   padding: 10px;
   bottom: 0;
}

.post.expand .block + .block {
   display: none;
}

.post_body {
   position: relative;
}

.expandall .expand .post_body .post_expand {
   display: none;
}

.arrange.square .expand_detail,
.arrange.preview .expand_detail,
span.expand_preview {
   display: none;
}

.arrange.preview span.expand_preview {
   display: block;
}

.arrange.preview .post_expand {
   position: absolute;
   bottom: 0;
}

.arrange.preview .post .expand_preview .post_medias {
   display: inline-block;
   position: unset;
   padding: unset;
}


.arrange.preview span.expand_preview {
   color: #36465d;
   border-bottom: none;
   font-weight: 500;
}


.arrange.preview .post .post_expand {
   background: #ffffff;
   height: 24px;
   margin: 0px;
   border-radius: 0;
   width: calc(100% - 0px);
   border-bottom: none;
   bottom: -24px;
   padding: 2px 0 0 0;
}


.mobile .arrange.preview .post_body .post_expand.click_expand {
   height: 44px;
   padding: 16px 0 0 0;
   bottom: -44px;
}

.arrange.preview .expand .post_wrapper {
   padding: 0 0 24px 0;
}

.mobile .arrange.preview .expand .post_wrapper {
   padding: 0 0 44px 0;
}

.arrange.preview .post_body .post_expand.click_expand {
   padding: 5px 0 0 0;
   font-size: 14px;
   font-weight: 400;
   /* border-bottom: none; */
}

.post_part.part_ask .question_group {
   position: relative;
   padding: 8px;
   background: #f5f5f5;
   border-radius: 4px;
}

.post_part.part_ask .question_group {
   border: 1px solid #d6d6d6;
   margin: 8px 16px 16px 16px;
}

.post .part_ask .post_body p {
   padding: 0 16px;
}

.post .blog_handle .blog_icon {
   margin: 0 8px 0 0;
   display: inline-block;
}

/* -- Quote -- */

.post .part_quote .post_quote {
   position: relative;
   padding: 20px 50px;
}

.post .part_quote .post_quote {
   background: #e8e8e8;
   border-radius: 10px;
   padding: 30px;
   margin: 0 auto 20px auto;
   width: fit-content;   
   width: -moz-fit-content;
   box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
   font-size: 24px;
   font-style: italic;
   min-height: 40px;
   text-align: center;
   background: #e8e8e8;
   border-radius: 10px;
   padding: 30px;
   margin: 0 auto 20px auto;
   box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
}

.post .part_quote .post_quote div:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   width: 0;
   height: 0;
   border: 20px solid transparent;
   border-top-color: #e8e8e8;
   border-bottom: 0;
   margin-left: -20px;
   margin-bottom: -20px;
}

.arrange.square .post_part.part_quote {
   padding: 6px;
}

.arrange.square .post .part_quote .post_quote {
   font-size: 12px;
   padding: 4px 8px;
}

.arrange.square .post .part_quote .post_quote:before,
.arrange.square .post .part_quote .post_quote:after {
   font-size: 10px;
}

.arrange.square .post .part_quote .post_quote:before {
   left: -10px;
   top: -10px;
}

.arrange.square .post .part_quote .post_quote:after {
   right: -10px;
   bottom: -10px;
}

.arrange.square .post .post_author {
   font-size: 12px;
   padding: 0;
}

.arrange.square .post .part_quote .post_quote div:after {
   border: 10px solid transparent;
   border-top-color: #e8e8e8;
   margin-left: -10px;
   margin-bottom: -21px;
}


.post .post_part.part_quote {
   position: relative;
   padding: 0 20px 0 20px;
}

.arrange.preview .post .post_part.part_quote {
   position: relative;
   padding: 8px 8px 0 8px;
}

.compose_body .post .post_part.part_quote {
   position: relative;
   padding: 0;
}

.post .part_quote .post_quote:before,
.post .part_quote .post_quote:after {
   font-family: "Font Awesome 5 Pro";
   font-size: 18px;
   position: absolute;
   padding: 9px;
   font-weight: 900;
}

.post .part_quote .post_quote:before {
   content: "\f10d";
   left: 0;
   top: 0;
}

.post .part_quote .post_quote:after,
.post .part_quote .input_body:after {
   content: "\f10e";
   right: 0;
   bottom: 0;
}

.compose_body .post .part_quote .post_quote:after,
.compose_body .post .part_quote .input_body:after {
   display: none;
}

.post .post_quote div {
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   -ms-hyphens: auto;
   -moz-hyphens: auto;
}

.post .post_author {
   padding: 8px 16px;
   width: 100%;
   text-align: center;
   font-style: italic;
}

.post .post_author:before {
   content: "-- ";
   padding: 8px 0;
}

/* -- Gif Over -- */

.post .delay_load {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   z-index: 1;
}

.post .delay_load.play_gif {
   background: url("/media/newtumbl/img/gif_over_small.png");
   background-position: center center;
   background-repeat: no-repeat;
}

.arrange.square .post .delay_load.play_vid,
.arrange.preview .post .delay_load.play_vid {
   background: url("/media/newtumbl/img/vid_over_small.png");
   background-position: center center;
   background-repeat: no-repeat;
   transition: opacity .2s ease;
}

.arrange.square .post:hover .play_vid .video_length,
.arrange.preview .post:hover .play_vid .video_length {
   opacity: 0;
}

.post .delay_load > div {
   position: absolute;
   height: 25px;
   text-align: center;
   z-index: 2;
   font-size: 16px;
   font-weight: 500;
   color: #ffffff;
   text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
   background: rgba(0, 0, 0, 0.4);
   border-radius: 2px;
   top: calc(50% + 32px);
   left: 50%;
   width: unset;
   padding: 5px 8px;
   transform: translateX(-50%);
}

.post .play_vid > div {
   position: absolute;
   text-align: center;
   z-index: 2;
   font-size: 16px;
   font-weight: 500;
   color: #ffffff;
   text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
   background: rgba(0, 0, 0, 0.4);
   border-radius: 2px;
}

.post .video_length span {
   color: #ffffff;
   text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
   background: rgba(0, 0, 0, 0.4);
   border-radius: 2px;
   padding: 2px 8px;
}

.arrange.preview .post .delay_load > div,
.arrange.square .post .delay_load > div {
   display: none;
}

/* -- Blog Button -- */

.post .blog_button {
   padding: 18px 16px 0 16px;
   cursor: pointer;
   display: none;
   position: absolute;
   right: 0;
   top: 0;
}

.post.owner .blog_button {
   display: block;
}

.post.owner .block_date {
   margin: 15px 32px 0 0;
}

.post.owner.reblog .block_date {
   margin: 15px 16px 0 0;
}

.post .blog_tools.popup_menu {
   right: 12px;
   left: unset;
   top: 12px;
}

/* -- Archive -- */

/* Links */

.post_part.part_link {
   font-size: 24px;
   font-weight: 700;
   padding: 16px;
   min-height: 40px;
   position: relative;
}

.page_ratings .post_headline span.icon_rating {
   transform: scale(1.5);
   margin: -3px 8px 0 6px;
}

.compose_body .post_part.part_link {
   padding: 0;
   margin: 0;
}

.post_part.part_link a {
   text-decoration: underline;
}

.post .post_part.part_link a:after {
   font-family: "Font Awesome 5 Pro";
   text-decoration: none;
   content: "\f08e";
   padding: 4px 8px;
   font-size: 16px;
}

.post .part_link .post_label {
   border-radius: 4px;
   margin: 0 auto;
   width: fit-content;   
   width: -moz-fit-content;
   padding: 12px;
   background: #03A9F4;
   color: #fff;
   text-align: center;
   line-height: 1.1;
   box-shadow: 0 4px 4px rgba(0, 0, 0, 0.10);
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
   -ms-hyphens: auto;
   -moz-hyphens: auto;
}

.post .part_link .post_label a,
.post .part_link .post_label a:visited {
   color: #fff !important;
}

.arrange.square .post .post_part {
   /* padding: 4px; */
}

.arrange.square .post .part_link .post_label {
   padding: 2px;
   font-size: 14px;
}

.arrange.square .post .post_part.part_link a:after {
   font-size: 12px;
}


/* Post Notes */

.post .post_notes_filter {
   width: 100%;
   border-bottom: 1px solid #dadada;
   border-top: 1px solid #dadada;
}

.post .post_notes_filter div {
   display: block;
   text-align: center;
   padding: 6px;
   cursor: pointer;
   color: #a0a0a0;
   transition: .25s ease;
   position: relative;
   margin-top: 0;
   width: 25%;
   float: left;
}

.post .post_notes_filter div:hover {
   color: #808080;
   background: #ebebeb;
}

.post .post_notes_filter div.active {
   color: #808080;
   background: #e4e4e4;
}

.post .post_notes_filter div [data-tooltip] {
   margin-top: 36px;
}

.post .post_notes {
   display: none;
   width: 100%;
   background: #f2f2f2;
   padding: 0 0 10px 0;
   border-radius: 0 0 4px 4px;
}

.post .post_notes.show {
   display: block;
}

.post .post_notes .post_note {
   width: 100%;
   position: relative;
   overflow: hidden;
   padding: 4px;
   display: inline-block;
   position: relative;
   margin: unset;
   padding: 0;
   font-size: 14px;
}

.post .post_notes .post_note:nth-child(even) {
   /* background: #eaeaea; */
   border-top: 1px solid #e4e4e4;
   border-bottom: 1px solid #e4e4e4;
}

.post .post_note .user_name,
.post .post_note .blog_id {
   font-weight: 700;
}

.post_notes .post_note .blog_icon {
   position: absolute;
   width: 24px;
   height: 24px;
   margin: 8px;
   left: 0;
}

.post_notes .post_note .note {
   padding: 12px 0 8px 0;
   position: relative;
   width: calc(100% - 40px);
   height: 100%;
   margin: 0 0 0 40px;
   color: #000;
}

.post_notes .post_note .added {
   /* font-weight: 700; */
   padding: 10px 20px 0 10px;
}

span.reference {
   color: #36465d;
   font-weight: 700;
}

.page_messages .post {
   border: 1px solid #d6d6d6;
}

.post span.click_readmore {
   font-size: 12px;
   font-weight: 700;
   cursor: pointer;
   color: #529dcc;
}


/* -- Views -- */

.preview_panel .post .count_holder,
.mobile.page_dash_home .post .count_holder,
.arrange.detail.small .post .count_holder {
   width: 40%;
   height: 32px;
   padding: 0;
   text-align: center;
   cursor: pointer;
   /* background: pink; */
   left: 50%;
   position: relative;
   margin: 0 0 0 -20%;
}

.count_holder a {
      text-decoration: none;
}

.preview_panel .post .count_holder .note_count_holder,
.mobile .post .count_holder .note_count_holder,
.arrange.detail.small .post .count_holder .note_count_holder {
   width: 100%;
   height: 100%;
   /* background: #4caf50; */
   display: block;
   padding: 9px;
   white-space: nowrap;
}

.preview_panel .post .post_interactions li.popup_share,
.preview_panel .post .post_interactions li.click_rating,
.mobile.page_dash_home .post .post_interactions li.popup_share,
.mobile.page_dash_home .post .post_interactions li.click_rating,
.arrange.detail.small .post .post_interactions li.popup_share,
.arrange.detail.small .post .post_interactions li.click_rating {
   position: absolute;
   top: 46px;
}

.preview_panel .post .post_interactions li.popup_share,
.mobile.page_dash_home .post .post_interactions li.popup_share,
.arrange.detail.small .post .post_interactions li.popup_share {
   left: 46px;
}

.preview_panel .post .post_interactions li.click_rating,
.mobile.page_dash_home .post .post_interactions li.click_rating,
.arrange.detail.small .post .post_interactions li.click_rating {
   right: 46px;
}

.preview_panel .post .post_footer .container,
.mobile.page_dash_home .post .post_footer .container,
.arrange.detail.small .post .post_footer .container {
   flex-direction: column-reverse;
   padding: 0 8px;
   position: relative;
}

.post .icon_rating {
    background: rgb(255, 255, 255);
    padding: 1px 8px 5px 6px;
    height: 18px;
    border-radius: 2px;
    text-align: center;
    width: unset;
    letter-spacing: -2px;
    color: rgb(128, 128, 128);
    border: 1px solid rgb(128, 128, 128);
    font-size: 15px;
    cursor: pointer;
    line-height: .95;
    outline: none;
    margin: -2px 4px;
    display: inline-block;
}

.preview_panel .post ul.post_interactions,
.mobile.page_dash_home .post ul.post_interactions,
.arrange.detail.small .post ul.post_interactions {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 16px 0 0 0;
}

.preview_panel .post ul.post_interactions > li,
.mobile.page_dash_home .post ul.post_interactions > li,
.arrange.detail.small .post ul.post_interactions > li {
   height: 24px;
   width: 14.25%;
}

.page_dash .center_wide {
   padding: unset;
}

.arrange .post {
   position: absolute;
   /* transition: transform .25s ease, box-shadow .25s ease; */
}

.post:before {
   content: "";
   position: absolute;
   top: 5%;
   left: 5%;
   background: rgba(75, 91, 113, 0);
   width: 90%;
   height: 90%;
   z-index: -1;
   border-radius: 8px;
   border: 1px solid #fff0;
   box-shadow: none;
   pointer-events: none;
   transition: .2s ease;
}

.post.active:before {
   top: -6px;
   left: -6px;
   background: rgb(99, 117, 142);
   width: calc(100% + 10px);
   height: calc(100% + 10px);
   /* border: 1px solid #36465d; */
   box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.post.active:after {
   background: rgba(0, 0, 0, 0.0);
   ;
   content: "";
   position: absolute;
   top: 5%;
   left: 5%;
   width: 90%;
   height: 90%;
   z-index: 2;
   border-radius: 8px;
   pointer-events: none;
   transition: .2s ease;
}

.post.active:after {
   background: rgba(0, 0, 0, 0.15);
   top: -5px;
   left: -5px;
   width: calc(100% + 10px);
   height: calc(100% + 10px);
}

.post.active {
   /* transform: scale(1.1); */
   z-index: 2;
}

.post.active .post_wrapper {
   z-index: 1;
}

.post.broughtby .post_footer.clearfix,
.post.broughtby .block_date {
    display: none;
}

.nt_post.broughtby {
	overflow: hidden;
}

.post.broughtby .block_head {
    pointer-events: none;
}

.post.broughtby .block_head .popup_tools.blog_button {
    display: none;
}

.post.broughtby .blog_icon:empty {
   background: url("../img/advatar.jpg") no-repeat center top;
   background-size: contain;
}

.nt_post.broughtby .blog_name {
    right: 0;
    top: 2px;
    position: absolute;
    font-size: 14px;
    color: #7f7f7f;
    margin: 4px 0 0 0;
    display: block;
    width: unset;
    font-weight: 100;
}

.nt_post.broughtby .block_handle {
    width: 100%;
    max-width: unset;
}

.arrange.center .post {
   position: relative;
   margin: 0 0 8px 0;
}

.arrange.center {
   position: relative;
   margin: 0 auto;
   width: calc(100% - 16px);
   max-width: 540px;
   min-width: 320px;
}

.arrange.large .post {
   width: 100%;
}

.docked_filter .center_wide {
   padding: unset;
   width: calc(100% - 250px);
   margin: 0 0 0 250px;
}

.arrange.square .post .block_body .post_header.block.block_head.top,
.arrange.square .post .block_body .block_head.top,
.arrange.square .post .block_body .post_submit,
.arrange.square .post .block_body .post_footer.clearfix,
.arrange.square .post .block_body .post_notes,
.arrange.square .post .block_body .post_part,
.arrange.preview .post .post_part,
.arrange.preview .post .post_submit,
.arrange.preview .post .post_source {
   display: none;
}

.arrange.square .expanded .post_notes,
.arrange.square .expanded .post_part,
.arrange.preview .expanded .part_photo,
.arrange.preview .expanded .part_video,
.arrange.square .post .post_part:first-of-type,
.arrange.preview .post .post_part:first-of-type {
   display: block;
}

.post_part.part_video {
   background: #000;
   position: relative;
}

.arrange.square .post_wrapper {
   overflow: hidden;
   border-radius: 0;
   height: 100%;
}

.arrange.square .post .blog_handle .blog_icon {
   /* margin: -11px; */
   float: unset;
   margin: 0;
}

.arrange.square .post_sub {
   display: block;
   float: unset;
   width: 100%;
   font-size: 12px;
   margin: 0;
}

.arrange.square .post.reblog .blog_handle {
   float: unset;
   margin: -5px 0 0 -5px;
}

.arrange.square .blog_handle .blog_name {
   float: unset;
   width: calc(100% + 16px);
   padding: 0;
}


.arrange.square .post .post_body .post_headline {
   padding: 0px 4px 0 4px;
   font-size: 14px;
   margin: 0 0 4px 0;
   width: 100%;
}

.arrange.square .post .post_body .post_article {
   padding: 0 4px;
   font-size: 12px;
}

.arrange.square .post_part.part_text {
   padding: 4px;
}

.arrange.square .post .post_body h3,
.arrange.square .post .post_body h2,
.arrange.square .post .post_body h1 {
   font-size: 14px;
   padding: 0 0 4px 0;
}

.arrange.square .post {
   height: 150px;
   width: 150px;
   margin: 0 0 8px 0;
   overflow: hidden;
   border-radius: 0;
}

.arrange.square .post .post_part {
   min-height: 100%;
}

.arrange.square .post .post_part .post_image {
   display: flex;
   height: 100%;
   padding-bottom: 100% !important;
}

.arrange.square .post .post_part .post_image > img {
   min-width: 100%;
   min-height: 100%;
   object-fit: cover;
}

.arrange.square .post_video > video::-webkit-media-controls {
   display: none !important;
}

.arrange.square .post .post_part.part_video {
   padding: 0;
   height: 100%;
}

.arrange.square .post .post_body,
.arrange.square .block_body,
.arrange.square .block {
   position: relative;
   height: 100%;
}

.arrange.square .post_part.part_ask .question_group {
   margin: 4px;
   padding: 5px;
}

.arrange.square .post_part.part_ask .blog_handle {
   display: none;
}

.arrange.square .post .part_ask .post_body p {
   padding: 4px 8px;
   font-size: 12px;
}

.arrange.square .post_video {
   background: #000;
   height: 100%;
   padding-bottom: unset !important;
   display: flex;
   align-items: center;
}

.arrange.preview .post {
   min-height: 60px;
   width: 150px;
}

.arrange.preview .post_wrapper {
   overflow: hidden;
}

.arrange.preview .post .post_date {
   display: block;
   width: 100%;
}

.arrange.square .post .post_header,
.arrange.square .post .full_back .post_article,
.arrange.square post .post_headline,
.arrange.square .post .post_footer .post_interactions,
.arrange.square .post .post_header,
.arrange.square .post .block_head,
.arrange.preview .post .post_header,
.arrange.preview .post .full_back .post_article,
.arrange.preview post .post_headline,
.arrange.preview .post .post_footer .post_interactions,
.arrange.preview .post .post_header,
.arrange.preview .post .block_head {
   display: none;
}

.arrange.preview .post .part_text .post_headline,
.arrange.preview .post .part_text .post_article {
   display: block;
}

.arrange.preview .post .post_footer .post_tags li,
.arrange.preview .post .post_footer a,
.arrange.preview .post .post_footer,
.arrange.preview .post .post_footer a:visited,
.arrange.preview .post .post_catcher a:link {
   transition: opacity .25s ease;
   color: #ffffff;
   opacity: 0;
}

.arrange.preview .post .part_link .post_label {
   line-height: 0.9;
}

.arrange.preview .post .post_part.part_link a,
.arrange.preview .post .post_part.part_link a:visited {
   font-size: 12px;
}

.arrange.preview .post:hover .post_tags li,
.arrange.preview .post:hover .post_footer,
.arrange.preview .post:hover a,
.arrange.preview .post:hover a:visited,
.arrange.preview .post:hover a:link {
   opacity: 1;
}

.arrange.preview .post span.term {
   color: #fff;
   background: none;
}

.arrange.preview .post .post_footer {
   width: 100%;
   height: 100%;
   position: absolute;
   border-radius: 4px;
   left: 0;
   top: 0;
   margin: 0 0 0 0;
   padding: 8px;
   background: rgba(0, 0, 0, 0.6);
}

.arrange.preview .post:hover .post_footer {
   min-height: 88px;
}

.arrange.preview .post .post_tags {
   position: absolute;
   bottom: 11px;
   max-height: 30px;
}

.arrange.preview .post .post_tags li {
   margin: 0 6px 0 0;
   font-size: 12px;
}

.arrange.preview .post .post_tags ul {
   margin: 0;
   padding: 0;
}

.arrange.preview .post .post_medias {
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   padding: 8px;
   text-align: right;
}

.arrange.preview .post .block_body > div {
   max-height: 200px;
   min-height: 16px;
}

.arrange.preview .post .block_body .post_part.part_photo,
.arrange.preview .post .block_body .post_part.part_video {
   max-height: unset;
}

.arrange.preview .post .part_text .post_headline {
   font-size: 14px;
   margin: 0;
   padding: 8px 8px 8px 8px;
   line-height: 1.1;
}

.arrange.preview .post .part_text .post_article {
   font-size: 12px;
}

.arrange.preview .post .part_text .post_headline p {
   font-size: 14px;
}

.arrange.preview .post .part_text:before,
.arrange.preview .post .post_part.part_ask:after,
.arrange.preview .post .post_part.part_quote:after {
   content: " ";
   background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
   width: 100%;
   height: 10px;
   position: absolute;
   left: 0;
   bottom: 0;
   border-radius: 0 0 4px 4px;
}

.arrange.preview .post .part_text .post_headline:empty,
.arrange.preview .post .part_text .post_article:empty {
   height: 4px;
   margin: 0;
   padding: 0;
}

.arrange.preview .post .post_body .block.follow {
   margin: 0 0 -2px 0;
}

.arrange.preview .post .blog_handle .blog_icon {
   display: none;
}

.arrange.preview .post .blog_handle {
   padding: 0;
   max-width: unset;
}

.arrange.preview .post .count_holder {
   font-weight: 400;
}

.arrange.preview .post .block + .block {
   display: none;
}

.arrange.preview .post .post_footer .container {
   padding: 2px 0;
}

.arrange.square .post .play_gif,
.arrange.preview .post .play_gif,
.activity .post .play_gif {
   background: url("/media/newtumbl/img/gif_over_small.png");
   background-position: center center;
   background-repeat: no-repeat;
}

.arrange.preview .post .play_gif > div,
.activity .post .play_gif > div,
.arrange.square .post .play_gif > div {
   display: none;
}

.arrange.preview .post_part.part_ask {
   font-size: 12px;
}

.arrange.preview .post_part.part_ask p {
   padding: 0 8px 8px 8px;
   position: relative;
}

.arrange.preview .post_author {
   font-size: 12px;
}

.arrange.preview .post_part.part_ask .question_group {
   padding: 0 8px;
   max-height: 400px;
   overflow: hidden;
   margin: 8px;
}

.arrange.preview .post_sub {
   margin: 0 0 10px 0;
}

.arrange.preview .part_quote .post_quote {
   width: 100%;
   margin: 0 auto 8px auto;
   padding: 12px;
   font-size: 12px;
}

.arrange.preview .part_quote .post_quote div:after {
   position: absolute;
   border: 10px solid transparent;
   border-top-color: #ececec;
   border-bottom: 0;
   margin-left: -10px;
   margin-bottom: -10px;
}

.arrange.preview .part_quote .post_quote:before,
.arrange.preview .part_quote .post_quote:after {
   font-size: 8px;
   padding: 6px;
}

.arrange.preview .expand .post_body .post_expand.expand_detail {
   display: none;
}

.post .post_catcher {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 3;
   cursor: pointer;
   display: none;
}


/*******************************************************************************************************************************
**                                                         Preview Over                                                       **
*******************************************************************************************************************************/

.arrange.preview .post_wrapper {
   overflow: visible;
}

.full_back .post.private .post_wrapper {
    border: 2px solid rgb(255, 255, 255);
    border-radius: 6px;
    margin: -2px;
    /* box-shadow: 0 0 16px rgb(104, 116, 133), 0 0 6px rgba(0, 0, 0, .5); */
}

.post.private .click_reblog {
    opacity: .5;
    pointer-events: none;
}

.arrange.preview .post_body .block {
   border-radius: 4px;
   overflow: hidden;
}

.arrange.preview .expand .post_body .block {
   border-radius: 4px 4px 0 0;
}

.arrange.preview .expand .post_body .post_expand.expand_preview {
   border-radius: 0 0 4px 4px;
   display: block;
}

.arrange.preview .post .block_head.top .blog_handle .blog_icon {
   display: inline-block;
}

.arrange.preview .block .block_head {
   position: absolute;
   z-index: 30;
   display: inline-block;
   opacity: 0;
   transition: opacity .25s ease;
   padding: 8px 8px 0 8px;
   height: 0;
}

.arrange.preview .post:hover .block .block_head {
   opacity: 1;
}

.mobile .arrange.preview .post .block .block_head,
.mobile .arrange.preview .post .post_footer {
   display: none;
}

.arrange.preview .block_date {
   color: #fff;
   margin: 8px 15px 15px 15px;
}

.arrange.preview .post .post_footer ul.post_interactions {
   bottom: 0;
   left: 0;
   z-index: 10;
   position: absolute;
   width: 100%;
   display: flex;
   justify-content: space-around;
   pointer-events: all;
   height: 30px;
   padding: 7px 0 0 0;
}

.arrange.preview .post ul.post_interactions > li {
   color: #fff;
   width: 20%;
}

.arrange.preview .post .post_footer ul.post_interactions .click_rating,
.arrange.preview .post .post_footer ul.post_interactions .popup_flag,
.arrange.preview .post .post_footer ul.post_interactions .popup_share,
.arrange.preview .post .post_tags,
.arrange.preview .post .post_footer .post_date,
.arrange.preview .post .post_footer .post_medias,
.arrange.preview .block_head.top .block_handle .blog_handle > .blog_name {
   display: none;
}

.arrange.preview .post:hover {
   z-index: 90;
}

.arrange.preview .post:hover .block_body .blog_handle {
   pointer-events: none;
}

.arrange.preview .post .post_footer .post_interactions {
   display: flex;
}

.arrange.preview .post .count_holder {
   font-weight: 400;
   position: absolute;
   top: 26px;
   right: 0;
   padding: 8px 16px;
}

.arrange.preview .post .post_footer .container {
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}

.arrange.preview .post.expand .post_footer .container {
   height: calc(100% - 20px);
}

.arrange .post .post_catcher {
   display: none;
   width: 100%;
   height: 100%;
}

.mobile .arrange.preview .post .post_catcher,
.mobile .arrange.square .post .post_catcher {
   display: block;
}

.mobile .arrange.preview .post.expand .post_catcher {
   height: calc(100% - 44px);
}

.arrange.preview .post .container,
.arrange.preview .post .post_footer,
.arrange.preview .post .post_actions {
   pointer-events: none !important;
}

.arrange.preview .post .container *,
.arrange.preview .post .post_footer *,
.arrange.preview .post .post_actions * {
   pointer-events: all;
}

/* -- Media -- */

@media (max-width: 750px) {

   .arrange.center {
      /* max-width: unset; */
      /* margin: 0; */
      /* width: 100%; */
   }

   .mobile .blog_marquee.show .dialog_catcher {
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      background: rgba(54, 70, 93, .5);
      z-index: 1;
   }
}

/* Ad Placement */

.post.broughtby .block_body {
    left: 50%;
    transform: translateX(-50%);
    position: relative;
}

.post.broughtby .post_wrapper {
    /* background: rgba(255, 255, 255, 0.2); */
}