* {
outline: none !important;
}
body {
background-color: white;
font-family: "Open Sans", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.01em;
overflow-x: hidden;
min-height: 100vh;
}
a:hover,
a:focus {
text-decoration: none !important;
}
#header_nav img,
#second_header img,
#header_nav svg,
#second_header svg {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
#header_nav .logo a {
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif;
font-size: 19px;
font-weight: 800;
color: #1e2022;
padding: 10px 8px;
display: inline-block;
letter-spacing: 1.5px;
text-transform: none;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
#header_nav #avatar_active > a,
#second_header ul li:last-child a {
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif;
font-size: 12px;
font-weight: 600;
color: #000000;
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-transform: none;
letter-spacing: normal;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
#second_header ul li a {
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif;
font-size: 12px;
font-weight: 600;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.6px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
#header_nav .pp_front_menu a,
#second_header .pp_front_menu a,
#second_header .msgz a {
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif;
font-size: 12px;
font-weight: 600;
color: #000000;
text-transform: uppercase;
letter-spacing: 0.6px;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
#header_nav .pp_front_menu a span,
#header_nav .navbar-search .input {
margin-left: 0;
}
#header_nav.navbar-fixed-top #navbar-collapse .pp_front_menu a,
.navbar-fixed-top #navbar-collapse .pp_front_menu a {
padding: 8px 12px !important;
height: auto !important;
min-height: 0 !important;
line-height: 1.3 !important;
display: inline-flex !important;
align-items: center !important;
}
#header_nav.navbar-fixed-top .navbar-left li.logo,
.navbar-fixed-top .navbar-left li.logo {
margin-right: 12px !important;
height: auto !important;
}
#header_nav.navbar-fixed-top #navbar-collapse form.navbar-search .input input,
.navbar-fixed-top #navbar-collapse form.navbar-search .input input {
padding: 4px 12px !important;
}
#header_nav.navbar-fixed-top .navbar-right > li > a,
#header_nav.navbar-fixed-top .navbar-right li div.notifications-list > .dropdown-toggle,
#header_nav.navbar-fixed-top .navbar-right li div.notifications-list > a.dropdown-toggle,
.navbar-fixed-top .navbar-right > li > a,
.navbar-fixed-top .navbar-right li div.notifications-list > .dropdown-toggle,
.navbar-fixed-top .navbar-right li div.notifications-list > a.dropdown-toggle {
padding: 10px 12px !important;
line-height: normal !important;
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #000000 !important;
display: inline-flex !important;
align-items: center !important;
gap: 4px;
background: transparent !important;
border-radius: 0 !important;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
#header_nav .nav-text,
#second_header .nav-text {
display: inline !important;
font-size: inherit !important;
line-height: inherit !important;
}
#header_nav #avatar_active > a .nav-text,
#header_nav .pxp-header-beautyk > a .nav-text,
#second_header ul li:last-child a {
text-transform: none !important;
letter-spacing: normal !important;
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif !important;
}
#header_nav.navbar-fixed-top .navbar-right > li.pxp-header-beautyk > a,
.navbar-fixed-top .navbar-right > li.pxp-header-beautyk > a,
#header_nav .pxp-header-beautyk > a {
background: #f65599 !important;
background: linear-gradient(135deg, #f65599 0%, #d41767 100%) !important;
color: #fff !important;
border-radius: 4px !important;
padding: 8px 12px !important;
}
#header_nav.navbar-fixed-top .navbar-right > li.pxp-header-beautyk > a:hover,
#header_nav.navbar-fixed-top .navbar-right > li.pxp-header-beautyk > a:focus,
.navbar-fixed-top .navbar-right > li.pxp-header-beautyk > a:hover,
.navbar-fixed-top .navbar-right > li.pxp-header-beautyk > a:focus,
#header_nav .pxp-header-beautyk > a:hover,
#header_nav .pxp-header-beautyk > a:focus {
background: #d41767 !important;
background: linear-gradient(135deg, #d41767 0%, #b31256 100%) !important;
color: #fff !important;
}
#header_nav .pxp-header-beautyk > a .nav-text {
color: #fff !important;
}
/* navbar-right: follow / messages / notifications / profile — same height */
#header_nav.navbar-fixed-top .navbar-left,
.navbar-fixed-top #header_nav .navbar-left {
position: relative;
z-index: 1;
max-width: min(60%, calc(100% - 420px));
overflow: hidden;
flex: 1 1 auto;
min-width: 0;
}
#header_nav.navbar-fixed-top .navbar-right,
.navbar-fixed-top #header_nav .navbar-right {
display: flex;
align-items: center;
height: 55px;
float: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-right: 0 !important;
justify-content: flex-end;
flex: 0 0 auto;
position: relative;
z-index: 30;
background: inherit;
}
#header_nav.navbar-fixed-top .navbar-right > li,
.navbar-fixed-top #header_nav .navbar-right > li {
display: flex;
align-items: center;
align-self: stretch;
height: 55px;
margin-right: 4px;
}
#header_nav.navbar-fixed-top .navbar-right > li:last-child,
.navbar-fixed-top #header_nav .navbar-right > li:last-child {
margin-right: 0 !important;
}
#header_nav.navbar-fixed-top #avatar_active > a,
.navbar-fixed-top #header_nav #avatar_active > a {
padding-right: 0 !important;
}
#header_nav.navbar-fixed-top .navbar-right li .notifications-list,
.navbar-fixed-top #header_nav .navbar-right li .notifications-list {
position: relative !important;
display: flex !important;
align-items: center !important;
align-self: stretch !important;
height: 55px !important;
min-height: 55px !important;
padding: 0 !important;
margin: 0 !important;
overflow: visible !important;
z-index: 31 !important;
}
#header_nav.navbar-fixed-top .navbar-right li .notifications-list > .dropdown-toggle,
.navbar-fixed-top #header_nav .navbar-right li .notifications-list > .dropdown-toggle {
position: relative !important;
z-index: 32 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
appearance: none !important;
-webkit-appearance: none !important;
cursor: pointer !important;
}
#header_nav.navbar-fixed-top .navbar-right > li > a,
#header_nav.navbar-fixed-top .navbar-right li .notifications-list > .dropdown-toggle,
#header_nav.navbar-fixed-top .navbar-right li .notifications-list > a.dropdown-toggle,
#header_nav.navbar-fixed-top #messages_nav > a,
#header_nav.navbar-fixed-top #avatar_active > a,
.navbar-fixed-top #header_nav .navbar-right > li > a,
.navbar-fixed-top #header_nav .navbar-right li .notifications-list > .dropdown-toggle,
.navbar-fixed-top #header_nav .navbar-right li .notifications-list > a.dropdown-toggle,
.navbar-fixed-top #header_nav #messages_nav > a,
.navbar-fixed-top #header_nav #avatar_active > a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
align-self: stretch !important;
height: 55px !important;
min-height: 55px !important;
max-height: 55px !important;
padding: 0 12px !important;
margin: 0 !important;
line-height: normal !important;
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #000000 !important;
box-sizing: border-box !important;
white-space: nowrap;
gap: 4px;
text-decoration: none !important;
background: transparent !important;
border-radius: 0 !important;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
#header_nav.navbar-fixed-top #avatar_active > a,
.navbar-fixed-top #header_nav #avatar_active > a {
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
text-transform: none !important;
letter-spacing: normal !important;
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif !important;
}
#header_nav.navbar-fixed-top .navbar-right li #get-follow-requests small,
#header_nav.navbar-fixed-top .navbar-right li #get-notifications small,
#header_nav.navbar-fixed-top .navbar-right li a._messages #new__messages,
.navbar-fixed-top #header_nav .navbar-right li #get-follow-requests small,
.navbar-fixed-top #header_nav .navbar-right li #get-notifications small,
.navbar-fixed-top #header_nav .navbar-right li a._messages #new__messages {
position: static !important;
top: auto !important;
right: auto !important;
margin: 0 0 0 4px !important;
flex-shrink: 0;
align-self: center;
}
#header_nav.navbar-fixed-top .navbar-right li #get-follow-requests:hover small,
#header_nav.navbar-fixed-top .navbar-right li #get-notifications:hover small,
#header_nav.navbar-fixed-top .navbar-right li a._messages:hover #new__messages,
.navbar-fixed-top #header_nav .navbar-right li #get-follow-requests:hover small,
.navbar-fixed-top #header_nav .navbar-right li #get-notifications:hover small,
.navbar-fixed-top #header_nav .navbar-right li a._messages:hover #new__messages {
top: auto !important;
}
/*.container {max-width: 1100px;}
.container-profile, .user-profile-page-content .private-profile, .user-profile-page-content .profile-blocked, .container-explore, .container-lives {max-width: 1100px; }*/
main.container-profile-main {
max-width: 100% !important;
width: 100% !important;
padding: 0;
}
.btn-follow {
border: 1px solid #1da1f2;
background-color: #2196f3;
color: white;
margin-top: 3px;
padding: 3px 25px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
border-radius: 2px;
font-size: 12px;
line-height: 18px;
font-weight: 600;
font-family: "Open Sans", "Pretendard", sans-serif;
transition: color 0.15s ease-in-out;
outline: 0 !important;
}
.btn-follow:hover,
.btn-follow:active,
.btn-follow:focus {
background-color: #2196f3;
}
.btn-info {
border: 1px solid #1da1f2;
background-color: #2196f3;
color: white;
margin-top: 3px;
padding: 3px 25px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
border-radius: 2px;
font-size: 12px;
line-height: 18px;
font-weight: 600;
font-family: "Open Sans", "Pretendard", sans-serif;
transition: color 0.15s ease-in-out;
outline: 0;
}
.btn-info:focus,
.btn-info:hover,
.btn-info:active {
background-color: #2196f3;
outline: 0;
}
/*Progress Bar*/
.loadding-pgbar {
position: fixed;
left: 0px;
top: 0px;
height: 3px;
width: 100%;
z-index: 1000;
background: -webkit-linear-gradient(160deg, #0f4a23 0%, #de005e 25%, #f66e48 50%, #c6232a 75%, #d43237 100%);
}
.loadding-pgbar .bar {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #fff;
z-index: 2;
}
/*Header Navbar*/
.navbar-fixed-top {
position: fixed;
left: 0px;
top: 0px;
height: 55px;
margin-bottom: 50px;
width: 100%;
z-index: 1000;
background: #fff;
border: none;
box-shadow: none;
box-shadow: 0 1px 4px 0px rgb(0 0 0 / 10%);
}
.navbar-fixed-top #navbar-collapse {
position: relative;
height: 55px;
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
}
#header_nav.navbar-fixed-top > .container,
#header_nav > .container {
padding-right: 15px;
padding-left: 15px;
}
#header_nav .navbar-left {
float: none !important;
flex: 0 0 auto;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu.last_menu {
margin-right: 15px;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu.active a,
.navbar-fixed-top #second_header .pp_front_menu.active a,
.navbar-fixed-top #navbar-collapse .pp_front_menu.exp_menu.active a,
.navbar-fixed-top #second_header .pp_front_menu.exp_menu.active a,
.navbar-fixed-top #navbar-collapse .pp_front_menu.reel_menu.active a,
.navbar-fixed-top #second_header .pp_front_menu.reel_menu.active a,
.navbar-fixed-top #navbar-collapse .pp_front_menu.last_menu.active a,
.navbar-fixed-top #second_header .pp_front_menu.last_menu.active a,
.navbar-fixed-top #navbar-collapse #go_pro_nav.active a,
#header_nav .pp_front_menu.active a,
#header_nav .pp_front_menu.active a span {
background: transparent;
color: #2250fc;
}
.navbar-fixed-top #navbar-collapse #go_pro_nav.active a svg polygon {
color: #2250fc !important;
fill: #2250fc;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu a {
padding: 10px 12px;
height: auto;
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif;
font-weight: 600;
border-radius: 0;
margin: 6px 0;
font-size: 12px;
letter-spacing: 0.6px;
color: #000000;
background: transparent;
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu a:hover,
.navbar-fixed-top #navbar-collapse .pp_front_menu a:focus {
background: transparent !important;
color: #2250fc !important;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu a svg.feather {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
}
.navbar-fixed-top #navbar-collapse form.navbar-search {
position: relative;
padding: 10px 0px;
min-width: 250px;
}
/* Header search trigger → centered modal */
#header_nav .navbar-search-trigger,
.navbar-fixed-top .navbar-search-trigger {
appearance: none;
-webkit-appearance: none;
border: 0;
background-color: rgb(0 0 0 / 6%);
border-radius: 10em;
color: #787878;
display: inline-flex;
align-items: center;
justify-content: flex-start;
min-width: 180px;
max-width: 250px;
height: 35px;
padding: 4px 16px;
margin: 10px 0;
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif;
font-size: 12px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: all 0.15s ease-in-out;
box-shadow: none;
}
#header_nav .navbar-search-trigger:hover,
.navbar-fixed-top .navbar-search-trigger:hover {
background-color: rgb(0 0 0 / 9%);
color: #4c404d;
}
#header_nav .pxp-header-mode-toggle,
.navbar-fixed-top .pxp-header-mode-toggle {
appearance: none;
-webkit-appearance: none;
position: relative;
flex-shrink: 0;
width: 41px;
height: 25px;
margin: 10px 0 10px 6px;
padding: 0 6px;
border: 0;
border-radius: 10em;
background-color: rgb(0 0 0 / 6%);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: space-between;
transition: background-color 0.2s ease;
box-shadow: none;
}
#header_nav .pxp-header-mode-toggle:hover,
.navbar-fixed-top .pxp-header-mode-toggle:hover {
background-color: rgb(0 0 0 / 9%);
}
#header_nav .pxp-header-mode-toggle:focus,
.navbar-fixed-top .pxp-header-mode-toggle:focus {
outline: none;
}
#header_nav .pxp-header-mode-toggle:focus-visible,
.navbar-fixed-top .pxp-header-mode-toggle:focus-visible {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2250fc;
}
#header_nav .pxp-header-mode-toggle .pxp-header-mode-icon,
.navbar-fixed-top .pxp-header-mode-toggle .pxp-header-mode-icon {
position: relative;
z-index: 2;
width: 11px;
height: 11px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #787878;
pointer-events: none;
}
#header_nav .pxp-header-mode-toggle .pxp-header-mode-icon svg,
.navbar-fixed-top .pxp-header-mode-toggle .pxp-header-mode-icon svg {
width: 11px;
height: 11px;
display: block;
}
#header_nav .pxp-header-mode-toggle .pxp-header-mode-thumb,
.navbar-fixed-top .pxp-header-mode-toggle .pxp-header-mode-thumb {
position: absolute;
z-index: 1;
top: 3px;
left: 3px;
width: 19px;
height: 19px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
transition: transform 0.22s ease;
pointer-events: none;
}
#header_nav .pxp-header-mode-toggle.is-night .pxp-header-mode-thumb,
.navbar-fixed-top .pxp-header-mode-toggle.is-night .pxp-header-mode-thumb {
transform: translateX(16px);
}
#header_nav .pxp-header-mode-toggle.is-night,
.navbar-fixed-top .pxp-header-mode-toggle.is-night {
background-color: #2250fc;
}
#header_nav .pxp-header-mode-toggle.is-night:hover,
.navbar-fixed-top .pxp-header-mode-toggle.is-night:hover {
background-color: #1a44e0;
}
#header_nav .pxp-header-mode-toggle:not(.is-night) .pxp-header-mode-icon.sun,
.navbar-fixed-top .pxp-header-mode-toggle:not(.is-night) .pxp-header-mode-icon.sun {
color: #4c404d;
}
#header_nav .pxp-header-mode-toggle.is-night .pxp-header-mode-icon,
.navbar-fixed-top .pxp-header-mode-toggle.is-night .pxp-header-mode-icon {
color: rgba(255, 255, 255, 0.55);
}
#header_nav .pxp-header-mode-toggle.is-night .pxp-header-mode-icon.moon,
.navbar-fixed-top .pxp-header-mode-toggle.is-night .pxp-header-mode-icon.moon {
color: #2250fc;
}
.pxp-search-modal {
position: fixed;
inset: 0;
z-index: 10050;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.pxp-search-modal.is-open {
pointer-events: auto;
opacity: 1;
visibility: visible;
}
.pxp-search-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(30, 32, 34, 0.55);
}
.pxp-search-modal-dialog {
position: relative;
z-index: 1;
width: 100%;
max-width: 560px;
background: #fff;
border-radius: 12px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
padding: 28px 24px 20px;
transform: translateY(12px) scale(0.98);
transition: transform 0.25s ease;
}
.pxp-search-modal.is-open .pxp-search-modal-dialog {
transform: translateY(0) scale(1);
}
.pxp-search-modal-close {
position: absolute;
top: 10px;
right: 12px;
width: 36px;
height: 36px;
border: 0;
border-radius: 0.42rem;
background: #2250fc;
color: #fff;
font-size: 22px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
}
.pxp-search-modal-form {
margin: 0;
min-width: 0 !important;
padding: 0 !important;
position: relative;
}
.pxp-search-modal-form .input {
position: relative;
}
.pxp-search-modal-form .input input#search-users,
.pxp-search-modal-form .form-control {
width: 100%;
height: auto !important;
min-height: 48px;
border-width: 0 0 2px 0 !important;
border-style: solid !important;
border-color: #c1c3ce !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif;
font-size: 28px !important;
font-weight: 700 !important;
letter-spacing: 0;
color: #1e2022 !important;
padding: 10px 36px 10px 0 !important;
}
.pxp-search-modal-form .input input#search-users:focus,
.pxp-search-modal-form .form-control:focus {
border-color: #2250fc !important;
outline: none !important;
box-shadow: none !important;
}
.pxp-search-modal-form .pp_head_search_loader {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.pxp-search-modal-form .search-result {
position: relative !important;
top: auto !important;
width: 100% !important;
max-height: min(50vh, 360px);
overflow-y: auto;
margin-top: 12px;
padding: 0;
background: transparent;
border-radius: 0;
box-shadow: none;
text-align: left;
}
.pxp-search-modal-form .search-result:empty {
display: none !important;
}
.pxp-search-modal-form .search-result .search-result--item {
width: 100%;
overflow: hidden;
margin: 0;
padding: 0 4px;
transition: all 0.1s ease;
}
.pxp-search-modal-form .search-result .search-result--item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.pxp-search-modal-form .search-result .search-result--item a {
text-decoration: none;
padding: 10px 0;
display: block;
border-bottom: 1px solid #e6ecf0;
overflow: hidden;
}
.pxp-search-modal-form .search-result .search-result--item:last-child a {
border-bottom: none;
}
.pxp-search-modal-form .search-result .search-result--item .avatar,
.pxp-search-modal-form .search-result .search-result--item .hashtag {
width: 40px;
height: 40px;
overflow: hidden;
float: left;
border-radius: 50%;
}
.pxp-search-modal-form .search-result .search-result--item .user-info,
.pxp-search-modal-form .search-result .search-result--item .tag-info {
margin-left: 52px;
color: #262626;
}
.pxp-search-modal-form .search-result .search-result--item .user-info h5,
.pxp-search-modal-form .search-result .search-result--item .tag-info h5 {
margin: 0 0 2px;
font-size: 14px;
font-weight: 600;
}
.pxp-search-modal-form .search-result .search-result--item .user-info span,
.pxp-search-modal-form .search-result .search-result--item .tag-info span {
font-size: 12px;
color: #888;
}
body.pxp-search-open {
overflow: hidden;
}
@media (max-width: 767px) {
.pxp-search-modal-dialog {
padding: 24px 16px 16px;
}
.pxp-search-modal-form .input input#search-users,
.pxp-search-modal-form .form-control {
font-size: 22px !important;
}
#header_nav .navbar-search-trigger,
.navbar-fixed-top .navbar-search-trigger {
min-width: 0;
max-width: 100px;
}
#header_nav .pxp-header-mode-toggle,
.navbar-fixed-top .pxp-header-mode-toggle {
width: 36px;
height: 24px;
margin: 0 0 0 3px;
padding: 0 5px;
}
#header_nav .pxp-header-mode-toggle .pxp-header-mode-thumb,
.navbar-fixed-top .pxp-header-mode-toggle .pxp-header-mode-thumb {
width: 18px;
height: 18px;
}
#header_nav .pxp-header-mode-toggle.is-night .pxp-header-mode-thumb,
.navbar-fixed-top .pxp-header-mode-toggle.is-night .pxp-header-mode-thumb {
transform: translateX(12px);
}
}
.navbar-fixed-top #navbar-collapse form.navbar-search .input input {
background-color: rgb(0 0 0 / 6%);
border-radius: 10em;
justify-content: center;
border: 0;
color: #14171a;
display: block;
font-size: 12px;
height: 35px;
padding: 4px 32px;
transition: all 0.15s ease-in-out;
width: 100%;
box-shadow: none;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .input input:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.navbar-fixed-top #navbar-collapse form.navbar-search .input svg.feather {
position: absolute;
left: 8px;
top: 19px;
pointer-events: none;
color: #7e7e7e;
width: 17px;
height: 17px;
margin: 0;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .input #pp_loader {
position: absolute;
right: 5px;
top: 6px;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result {
position: absolute;
top: 55px;
width: 100%;
padding: 6px 0px;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
background: #fff;
border-radius: 0px 0px 5px 5px;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result:empty {
display: none !important;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item {
width: 100%;
overflow: hidden;
margin: 0;
padding: 0 10px;
transition: all 0.1s ease;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item:last-child a {
border-bottom: none;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .avatar,
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .hashtag {
width: 32px;
height: 32px;
overflow: hidden;
float: left;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .avatar.hashtag,
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .hashtag.hashtag {
text-align: center;
background: linear-gradient(#f7f7f7, #e9e9e9);
border-radius: 50%;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .avatar.hashtag svg.feather,
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .hashtag.hashtag svg.feather {
margin: 6px 0px;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item a {
text-decoration: none;
padding: 10px 0;
line-height: 0;
border-bottom: 1px solid #e6ecf0;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .user-info,
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .tag-info {
margin-left: 40px;
color: #262626;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .user-info h5,
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .tag-info h5 {
margin: 0 0 3px 0;
padding: 0;
font-size: 14px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .user-info span,
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result .search-result--item .tag-info span {
font-size: 14px;
line-height: 16px;
padding: 0;
margin: 0;
font-weight: 400;
color: #999;
}
.navbar-fixed-top .navbar-left {
display: inline-block;
float: left;
margin: 0;
}
.navbar-fixed-top .navbar-left > li,
.navbar-fixed-top .navbar-right > li {
margin-right: 5px;
}
.navbar-fixed-top .navbar-left li.logo {
margin-right: 30px;
height: 55px;
display: flex;
align-items: center;
}
.navbar-fixed-top .navbar-left li.logo a {
padding: 10px 0;
}
.navbar-fixed-top .navbar-left li.logo img {
max-width: 115px;
width: auto;
}
.navbar-fixed-top .navbar-left li a {
color: #2b292d;
padding: 13px 15px;
font-weight: 600;
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 13px;
}
.navbar-fixed-top .navbar-right {
margin: 0;
float: none;
}
.navbar-fixed-top .navbar-right > li.active > a,
.navbar-fixed-top #second_header ul li.msgz.active a,
.navbar-fixed-top .navbar-right > li:last-child.active > a,
.navbar-fixed-top #second_header ul li:last-child.active a,
#header_nav #messages_nav.active > a,
#header_nav #avatar_active.active > a {
background: transparent !important;
box-shadow: none;
color: #2250fc !important;
}
.navbar-fixed-top .navbar-right > li > a,
.navbar-fixed-top .navbar-right li div.notifications-list {
color: #000000;
padding: 15.5px 10px;
cursor: pointer;
}
.navbar-fixed-top .navbar-right li div.notifications-list:hover {
background: transparent !important;
background-color: transparent !important;
color: #2250fc !important;
border-radius: 0;
}
.navbar-fixed-top .navbar-right li div.notifications-list:hover .nav-text {
color: #2250fc !important;
}
.navbar-fixed-top .navbar-right > li > a svg,
.navbar-fixed-top .navbar-right li div.notifications-list svg {
margin: 1.4px 0;
width: 21px;
height: 21px;
transition: all 0.13s ease;
}
.navbar-fixed-top .navbar-right li #get-notifications,
.navbar-fixed-top .navbar-right li a._messages {
position: relative;
}
.navbar-fixed-top .navbar-right li #get-follow-requests small,
.navbar-fixed-top .navbar-right li #get-notifications small,
.navbar-fixed-top .navbar-right li a._messages #new__messages {
position: relative;
top: auto;
right: auto;
margin-left: 4px;
background: #c60d00;
width: 14px;
height: 14px;
padding: 0px;
font-size: 9px;
font-family: "Open Sans", "Pretendard", sans-serif;
font-weight: 500;
line-height: 15px;
transition: all 0.13s linear;
}
.navbar-fixed-top .navbar-right li #get-follow-requests small:empty,
.navbar-fixed-top .navbar-right li #get-notifications small:empty,
.navbar-fixed-top .navbar-right li a._messages #new__messages:empty {
display: none;
}
.navbar-fixed-top .navbar-right li #get-follow-requests:hover small,
.navbar-fixed-top .navbar-right li #get-notifications:hover small,
.navbar-fixed-top .navbar-right li a._messages:hover #new__messages {
top: 4px;
}
.navbar-fixed-top .navbar-right li div.notifications-list.open {
box-shadow: inset 0 -2.5px #4a4a4a;
}
.navbar-fixed-top .navbar-right li div.notifications-list.open > span > svg {
color: #4a4a4a;
fill: #4a4a4a;
}
.navbar-fixed-top .navbar-right li div.notifications-list > .dropdown-menu {
display: none !important;
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: auto !important;
z-index: 1050 !important;
width: auto;
min-width: 400px;
max-width: 560px;
padding: 0;
margin: 0;
background: #fff;
border-radius: 10px;
box-shadow: 0 8px 10px 1px rgb(0 0 0 / 6%), 0 3px 14px 2px rgb(0 0 0 / 7%), 0 5px 5px -3px rgb(0 0 0 / 10%);
cursor: auto;
float: none !important;
}
.navbar-fixed-top .navbar-right li div.notifications-list.open > .dropdown-menu {
display: block !important;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu div.header {
width: 100%;
overflow: hidden;
color: #262626;
padding: 5px 15px 10px;
font-weight: 500;
font-size: 20px;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu div.header a svg {
color: #7c7c7c;
width: 18px;
height: 18px;
margin-top: 0;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu ul {
width: 100%;
padding: 0px;
margin: 0px;
min-width: 400px;
max-width: 560px;
max-height: 500px;
overflow-x: hidden;
overflow-y: auto;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li {
width: 100%;
overflow: hidden;
display: block;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li a {
display: block;
overflow: hidden;
width: 100%;
padding: 0px;
text-decoration: none;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li a:hover {
background-color: rgba(0, 0, 0, 0.02);
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item {
display: flex;
padding: 12px 15px;
display: -webkit-flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item .notifier__avatar {
width: 42px;
min-width: 42px;
height: 42px;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item .notif__body {
margin-left: 13px;
font-size: 15.5px;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item .notif__body .notif__text strong {
color: #262626;
font-weight: 600;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item .notif__body .notif__text span {
color: #262626;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item .notif__body time {
font-size: 12px;
color: #808080;
display: block;
width: 100%;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item .notif__body time svg.feather {
margin: -3px 0 0;
width: 13px;
height: 13px;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item.request-list-item .request-opts {
margin-left: auto;
min-width: 80px;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item.request-list-item .request-opts .btn,
.settings_page_requests .request-opts .btn {
padding: 0;
width: 35px;
height: 35px;
border-radius: 50%;
border: 0;
margin: 1px;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item.request-list-item .request-opts .btn.accept_req,
.settings_page_requests .request-opts .btn.accept_req {
color: #2196f3;
background-color: rgba(33, 150, 243, 0.2);
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li .notifications-list-item.request-list-item .request-opts .btn.decline_req,
.settings_page_requests .request-opts .btn.decline_req {
color: #f44336;
background-color: rgba(244, 67, 54, 0.2);
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li.no__notifications {
width: 100%;
overflow-y: hidden;
padding: 45px 0px;
text-align: center;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li.no__notifications div {
margin: 0 !important;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li.no__notifications div span {
width: 100%;
display: block;
color: #595959;
font-weight: 500;
font-size: 15px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.preloader {
min-width: 400px;
max-width: 560px;
max-height: 500px;
text-align: center;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.preloader #pp_loader {
display: block;
float: none;
padding: 120.3px 15px;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.preloader #pp_loader .speeding_wheel {
width: 38px;
height: 38px;
border-width: 3px;
}
.navbar-fixed-top #second_header {
position: relative;
height: 40px;
display: none;
}
.navbar-fixed-top #second_header ul {
padding: 0;
margin: 0;
list-style-type: none;
display: flex;
align-items: center;
}
.navbar-fixed-top #second_header ul li {
float: left;
flex: 1 100%;
display: flex;
align-items: center;
justify-content: center;
}
.navbar-fixed-top #second_header ul li:last-child a img {
margin-top: -5px;
}
.navbar-fixed-top #second_header ul li a {
width: 100%;
text-align: center;
flex: 1 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.navbar-fixed-top #second_header ul li a svg.feather {
display: none !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
}
.navbar-fixed-top #second_header ul li.msgz.active a svg {
color: #0066ee;
}
/* Mobile hamburger (desktop hidden) */
.navbar-right-wrap {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
margin-left: auto;
min-width: 0;
max-width: 100%;
gap: 4px;
position: relative;
z-index: 30;
}
.pxp-mobile-nav-item {
display: none !important;
}
.pxp-mobile-nav-toggle,
.pxp-mobile-right-nav-toggle {
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
gap: 5px;
flex-shrink: 0;
}
.pxp-mobile-nav-toggle-bar,
.pxp-mobile-right-nav-toggle-bar {
display: block;
width: 20px;
height: 2px;
background: #222;
border-radius: 1px;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.pxp-mobile-nav-toggle.is-open .pxp-mobile-nav-toggle-bar:nth-child(1),
.pxp-mobile-right-nav-toggle.is-open .pxp-mobile-right-nav-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.pxp-mobile-nav-toggle.is-open .pxp-mobile-nav-toggle-bar:nth-child(2),
.pxp-mobile-right-nav-toggle.is-open .pxp-mobile-right-nav-toggle-bar:nth-child(2) {
opacity: 0;
}
.pxp-mobile-nav-toggle.is-open .pxp-mobile-nav-toggle-bar:nth-child(3),
.pxp-mobile-right-nav-toggle.is-open .pxp-mobile-right-nav-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
body.pxp-mobile-nav-open,
body.pxp-mobile-right-nav-open {
overflow: hidden;
}
#header_nav.navbar-fixed-top,
.navbar-fixed-top#header_nav {
overflow: visible;
}
#header_nav.navbar-fixed-top #navbar-collapse,
.navbar-fixed-top#header_nav #navbar-collapse {
flex-wrap: nowrap;
overflow: visible;
max-width: 100%;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li.no__notifications div svg.confetti {
height: auto;
}
.user_account_menu {
min-width: 200px;
box-shadow: 0 8px 10px 1px rgb(0 0 0 / 6%), 0 3px 14px 2px rgb(0 0 0 / 7%), 0 5px 5px -3px rgb(0 0 0 / 10%);
}
.user_account_menu > li > a {
font-weight: 500;
padding: 14px 18px;
}
.user_account_menu > li > a > svg {
width: 22px;
height: 22px;
opacity: 0.8;
}
#header_nav .user_account_menu > li > a:hover,
#header_nav .user_account_menu > li > a:focus {
color: #fff;
background-color: #0067ee;
}
#header_nav .user_account_menu > li.pxp-deokdae-disabled > span,
.user_account_menu > li.pxp-deokdae-disabled > span {
display: block;
padding: 14px 18px;
font-weight: 500;
color: #9e9e9e !important;
background: transparent !important;
cursor: not-allowed;
pointer-events: none;
user-select: none;
}
/* Header logo — POLO-style text hover */
#header_nav .logo a:hover,
#header_nav .logo a:focus,
#header_nav.navbar-default .navbar-nav > li.logo > a:hover,
#header_nav.navbar-default .navbar-nav > li.logo > a:focus,
#header_nav .navbar-left li.logo a:hover,
#header_nav .navbar-left li.logo a:focus,
#header_nav.navbar-fixed-top .navbar-left li.logo a:hover,
#header_nav.navbar-fixed-top .navbar-left li.logo a:focus,
.navbar-fixed-top #header_nav .navbar-left li.logo a:hover,
.navbar-fixed-top #header_nav .navbar-left li.logo a:focus {
color: #2250fc;
background: none;
background-color: transparent;
border-radius: 0;
}
/* Header nav hover — POLO: weight 600, color #2250fc, no pill bg */
#header_nav .pp_front_menu a:hover,
#header_nav .pp_front_menu a:focus,
#header_nav.navbar-default .navbar-nav > li > a:hover,
#header_nav.navbar-default .navbar-nav > li > a:focus,
#header_nav.navbar-fixed-top .navbar-left li a:hover,
#header_nav.navbar-fixed-top .navbar-left li a:focus,
#header_nav.navbar-fixed-top .navbar-right > li > a:hover,
#header_nav.navbar-fixed-top .navbar-right > li > a:focus,
#header_nav.navbar-fixed-top .navbar-right li div.notifications-list:hover,
#header_nav.navbar-fixed-top .navbar-right li div.notifications-list:hover > .dropdown-toggle,
#header_nav.navbar-fixed-top .navbar-right li div.notifications-list:hover > a.dropdown-toggle,
#header_nav.navbar-fixed-top .navbar-right li div.notifications-list:focus,
#header_nav.navbar-fixed-top #get-notifications:hover,
#header_nav.navbar-fixed-top #get-notifications:focus,
#header_nav.navbar-fixed-top #get-follow-requests:hover,
#header_nav.navbar-fixed-top #get-follow-requests:focus,
#header_nav.navbar-fixed-top #messages_nav > a:hover,
#header_nav.navbar-fixed-top #avatar_active > a:hover,
.navbar-fixed-top #header_nav .navbar-left li a:hover,
.navbar-fixed-top #header_nav .navbar-left li a:focus,
.navbar-fixed-top #header_nav .navbar-right > li > a:hover,
.navbar-fixed-top #header_nav .navbar-right > li > a:focus,
.navbar-fixed-top #header_nav .navbar-right li div.notifications-list:hover,
.navbar-fixed-top #header_nav .navbar-right li div.notifications-list:hover > .dropdown-toggle,
.navbar-fixed-top #header_nav .navbar-right li div.notifications-list:hover > a.dropdown-toggle,
.navbar-fixed-top #header_nav #get-notifications:hover,
.navbar-fixed-top #header_nav #get-notifications:focus,
.navbar-fixed-top #header_nav #get-follow-requests:hover,
.navbar-fixed-top #header_nav #get-follow-requests:focus,
.navbar-fixed-top #header_nav #messages_nav > a:hover,
.navbar-fixed-top #header_nav #avatar_active > a:hover,
.navbar-fixed-top #navbar-collapse .pp_front_menu a:hover,
.navbar-fixed-top #navbar-collapse .pp_front_menu a:focus,
#second_header .pp_front_menu a:hover,
#second_header .pp_front_menu a:focus,
#second_header ul li a:hover,
#second_header ul li a:focus {
background: transparent !important;
background-color: transparent !important;
color: #2250fc !important;
border-radius: 0;
}
#header_nav.navbar-fixed-top .navbar-right li div.notifications-list:hover .nav-text,
.navbar-fixed-top #header_nav .navbar-right li div.notifications-list:hover .nav-text,
#header_nav .pp_front_menu a:hover span,
#header_nav .pp_front_menu a:focus span,
.navbar-fixed-top #navbar-collapse .pp_front_menu a:hover span,
.navbar-fixed-top #navbar-collapse .pp_front_menu a:focus span,
#header_nav.navbar-fixed-top .navbar-right > li > a:hover .nav-text,
#header_nav.navbar-fixed-top .navbar-right > li > a:focus .nav-text,
.navbar-fixed-top #header_nav .navbar-right > li > a:hover .nav-text,
.navbar-fixed-top #header_nav .navbar-right > li > a:focus .nav-text {
color: #2250fc !important;
}
.include {
width: 100%;
overflow: hidden;
display: block;
}
.nav-up {
top: -52px;
}
.fluid {
width: 100%;
display: block;
}
.img-res {
width: 100%;
min-height: 100%;
}
.clear {
clear: both;
}
.pointer,
.home-page-container .home-posts-container .timeline-posts .header div.dropdown span,
.home-page-container .home-posts-container .timeline-posts .header div.dropdown ul li,
.scroll__up {
cursor: pointer !important;
padding-top: 13px;
padding-bottom: 13px; /* padding-left: 5px; */ /* padding-right: 5px; */
}
/*HomePage*/
.home-page-container {
margin-top: 75px;
}
.home-page-container .home-sidebar-right {
width: 100%;
}
.home-page-container .home-sidebar-right div.featured-posts,
.home-page-container .home-sidebar-right div.stories {
width: 100%;
overflow: hidden;
margin-bottom: 20px;
border-radius: 8px;
background-color: white;
}
.home-page-container .home-sidebar-right div.featured-posts h5,
.home-page-container .home-sidebar-right div.stories h5 {
padding: 10px 13px;
margin: 0px;
overflow: hidden;
font-size: 15px;
line-height: 25px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list,
.home-page-container .home-sidebar-right div.stories div.list {
padding: 13px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list {
margin: 0 -6px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item {
width: 50%;
overflow: hidden;
float: left;
padding: 6px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item a {
overflow: hidden;
text-decoration: none;
border-radius: 8px;
padding: 5px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .thumb {
width: 100%;
height: 90px;
overflow: hidden;
display: inline-block;
background-size: cover;
background-position: center;
border-radius: 3px;
transition: all 0.25s ease-in-out;
}
.home-page-container .home-sidebar-right div.featured-posts:hover div.list .item .thumb {
opacity: 0.65;
}
.home-page-container .home-sidebar-right div.featured-posts:hover div.list .item:hover .thumb {
opacity: 1;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .caption {
padding: 2px 0 0;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .caption .uname {
width: 100%;
overflow: hidden;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .caption .uname h6 {
margin: 0;
font-size: 13px;
line-height: 20px;
color: #5b5b5b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .caption span time {
color: #999;
font-size: 10px;
font-family: "Open Sans", "Pretendard", sans-serif;
line-height: 12px;
margin: 3px 0 0;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.home-page-container .home-sidebar-right div.stories div.list {
max-height: 290px;
overflow-y: auto;
}
.home-page-container .home-sidebar-right div.stories h5 .btn {
text-transform: uppercase;
font-size: 12px;
font-family: "Open Sans", "Pretendard", sans-serif;
font-weight: 500;
padding: 2.5px 3px;
}
.home-page-container .home-sidebar-right div.stories h5 .btn svg.feather {
margin-top: -3px;
width: 14px;
height: 14px;
}
.home-page-container .home-sidebar-right div.stories div.list .item {
width: 100%;
overflow: hidden;
margin-bottom: 8px;
position: relative;
display: table;
}
.home-page-container .home-sidebar-right div.stories div.list .item:last-child {
margin: 0;
}
.home-page-container .home-sidebar-right div.stories div.list .item .wrapper {
position: relative;
overflow: hidden;
max-width: 57px; /* border-radius: 50%; */
}
.home-page-container .home-sidebar-right div.stories div.list .item .wrapper img {
border: 2px solid #bec2c9;
padding: 2px;
width: 56px;
height: 56px;
}
.home-page-container .home-sidebar-right div.stories div.list .item .caption {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
width: 100%;
}
.home-page-container .home-sidebar-right div.stories div.list .item .wrapper.active img {
border-color: #cc298a;
}
.home-page-container .home-sidebar-right div.stories div.list .item .wrapper.anim_border:after {
content: "";
position: absolute;
z-index: 1;
width: 56px;
height: 56px;
top: 0px;
left: 0px;
border-radius: 100%;
border: 2px dashed #cc298a;
-webkit-animation: spin-border 5s infinite linear;
animation: spin-border 5s infinite linear;
}
.home-page-container .home-sidebar-right div.stories div.list .item .wrapper.anim_border img {
border-color: #fff;
}
@-webkit-keyframes spin-border {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin-border {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.home-page-container .home-sidebar-right div.stories div.list .item .caption a {
font-size: 15px;
margin-bottom: -2px;
color: #6a6a6a;
font-weight: 500;
display: block;
text-decoration: none;
}
.home-page-container .home-sidebar-right div.stories div.list .item .caption time {
color: #90949c;
font-size: 12px;
font-weight: 400;
}
.home-page-container .home-sidebar-right div.stories div.list .item .recent-stroires {
position: absolute;
right: 0px;
top: 0px;
background-color: #cc298a;
width: 18px;
height: 18px;
padding: 3px 0px;
font-size: 11px;
}
.home-page-container .home-sidebar-right div.stories span.fluid {
color: #808080;
margin: 20px 0px;
}
.home-page-container .home-sidebar-right div.stories span.fluid svg.feather.feather-layers {
display: block;
margin: 1px auto 10px;
width: 60px;
height: 60px;
filter: grayscale(1);
opacity: 0.5;
}
.home-page-container .home-sidebar-right div.stories span.fluid .btn {
display: block;
margin: 35px auto 0;
min-width: 150px;
width: fit-content;
max-width: 80%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 2em;
background-color: #0665d0;
border: none;
box-shadow: 0 2px 3px rgba(4, 65, 134, 0.25);
letter-spacing: 0.3px;
padding: 8px 16px 10px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.12s ease-out, -webkit-transform 0.12s ease-out;
}
.home-page-container .home-sidebar-right div.stories span.fluid .btn:hover {
background-color: #117ef8;
box-shadow: 0 3px 7px rgba(4, 65, 134, 0.4);
-webkit-transform: translateY(-1px);
transform: translateY(-1px);
}
.home-page-container .home-sidebar-right div.stories.activities .reload_icon {
line-height: 1;
display: block;
cursor: pointer;
margin-top: 3px;
color: #959595;
}
.home-page-container .home-sidebar-right div.stories.activities div.list .item {
cursor: auto;
border-bottom: 1px solid #f1f1f1;
padding-bottom: 8px;
}
.home-page-container .home-sidebar-right div.stories.activities div.list .item:last-child {
margin: 0;
padding: 0;
border: 0;
}
.home-page-container .home-sidebar-right div.stories.activities div.list .item .wrapper_ img {
width: 38px;
height: 38px;
object-fit: cover;
}
.home-page-container .home-sidebar-right div.stories.activities div.list .item .caption_ > span {
font-size: 13px;
}
.home-page-container .home-sidebar-right div.stories.activities div.list .item .caption_ a {
font-size: 13px;
margin-bottom: 0;
display: inline-block;
color: #454545;
}
.home-page-container .home-sidebar-right .footer__container,
.home-page-container .home-sidebar-right .footer__container .footer {
padding-top: 4px;
}
.home-page-container .home-posts-container {
width: 100%;
margin-bottom: 30px;
}
.home-page-container .home-posts-container .timeline-posts {
width: 100%;
margin-bottom: 30px;
position: relative;
border-radius: 26px;
overflow: hidden;
}
.home-page-container .home-posts-container .timeline-posts .post-images {
width: 100%;
max-width: 520px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.home-page-container .home-posts-container .timeline-posts .post-images img.img-res {
width: 100%;
min-height: 0;
max-height: 560px;
object-fit: contain;
background: #f7f7f7;
display: block;
}
.home-page-container .home-posts-container .timeline-posts .post-images .pxp-feed-carousel {
position: relative;
}
.home-page-container .home-posts-container .timeline-posts .post-images .pxp-feed-carousel .carousel-inner .item a {
display: block;
}
.home-page-container .home-posts-container .timeline-posts .post-images .pxp-feed-carousel a.cr-controls {
position: absolute;
top: 50%;
display: flex;
z-index: 5;
text-align: center;
transition: all 0.15s ease-in-out;
transform: translateY(-50%);
opacity: 1;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: transparent;
text-shadow: none;
pointer-events: auto;
}
.home-page-container .home-posts-container .timeline-posts .post-images .pxp-feed-carousel a.cr-controls span {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.home-page-container .home-posts-container .timeline-posts .post-images .pxp-feed-carousel a.cr-controls span svg.feather {
width: 20px;
height: 20px;
stroke: #333;
}
.home-page-container .home-posts-container .timeline-posts .post-images .pxp-feed-carousel a.cr-controls.carousel-control-prev {
left: 10px;
}
.home-page-container .home-posts-container .timeline-posts .post-images .pxp-feed-carousel a.cr-controls.carousel-control-next {
right: 10px;
}
.home-page-container .home-posts-container .timeline-posts .post-images .pxp-feed-carousel:hover a.cr-controls {
opacity: 1;
}
.pxp-post-dots {
position: static !important;
width: 100%;
margin: 12px 0 2px;
left: auto;
right: auto;
bottom: auto;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
z-index: 6;
}
.pxp-post-dots li {
position: relative;
display: block;
width: 8px;
height: 8px;
margin: 0 !important;
text-indent: 0;
font-size: 0;
overflow: hidden;
cursor: pointer;
background-color: #d0d0d0;
border: 0 !important;
border-radius: 50%;
opacity: 1;
transition: background-color 0.15s ease;
}
.pxp-post-dots li.active {
width: 8px;
height: 8px;
background-color: #2250fc;
margin: 0 !important;
}
.pxp-post-dots.pxp-post-dots--overlay {
position: absolute !important;
left: 0;
right: 0;
bottom: 14px;
margin: 0;
width: 100%;
pointer-events: none;
z-index: 101;
}
.pxp-post-dots.pxp-post-dots--overlay li {
pointer-events: auto;
background-color: rgba(255, 255, 255, 0.55);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.35);
}
.pxp-post-dots.pxp-post-dots--overlay li.active {
background-color: #ffffff;
}
.home-page-container .home-posts-container .timeline-posts .post-images .lightgallery-item {
width: 100%;
overflow: hidden;
display: block;
padding: 0;
margin: 0;
}
.home-page-container .home-posts-container .timeline-posts .post-images .lightgallery-item.active {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 380px;
max-height: 560px;
height: auto;
display: flex;
position: relative;
text-decoration: none;
}
.home-page-container .home-posts-container .timeline-posts .post-images .lightgallery-item.active:before {
position: absolute;
content: "";
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.06);
width: 100%;
height: 100%;
}
.home-page-container .home-posts-container .timeline-posts .post-images .lightgallery-item.active div {
margin: 20px 20px 0px auto;
z-index: 1;
}
.home-page-container .home-posts-container .timeline-posts .post-images .lightgallery-item.active div svg.feather {
fill: #ffffff;
margin-top: 0px;
width: 30px;
height: 30px;
transform: rotateY(-180deg);
-webkit-filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.25));
filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.25));
}
.home-page-container .home-posts-container .timeline-posts .post-video,
.home-page-container .home-posts-container .timeline-posts .post-video .video-js {
width: 100%;
overflow: hidden;
position: relative;
}
.home-page-container .home-posts-container .timeline-posts .post-video .video-js video {
width: 100%;
height: 100%;
cursor: pointer;
}
.home-page-container .home-posts-container .timeline-posts .header {
background: #fff;
padding: 16px;
border-radius: 8px 8px 0 0;
}
.home-page-container .home-posts-container .timeline-posts .header img {
width: 36px;
height: 36px;
margin: -2px 3px 0 0;
}
.home-page-container .home-posts-container .timeline-posts .header a.publisher-name {
color: #4c404d;
font-weight: 700;
text-decoration: none;
vertical-align: middle;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.home-page-container .home-posts-container .timeline-posts .header time {
color: #898889;
font-weight: 400;
font-size: 12px;
display: inline-block;
font-family: "Open Sans", "Pretendard", sans-serif;
float: right;
padding: 8px 0px;
transition: all 0.25s ease;
transform: translateX(32px);
}
.home-page-container .home-posts-container .timeline-posts .header time a {
text-decoration: none;
color: #898889;
}
.home-page-container .home-posts-container .timeline-posts:hover .header div.dropdown {
visibility: visible;
opacity: 1;
transform: scale(1);
}
.home-page-container .home-posts-container .timeline-posts:hover .header time {
transform: translateX(-8px);
}
.home-page-container .home-posts-container .timeline-posts .timeline-posts_ads_name {
margin-left: 6px;
vertical-align: middle;
display: inline-block;
}
.home-page-container .home-posts-container .timeline-posts .timeline-posts_ads_name a.publisher-name {
margin: 0;
}
.home-page-container .home-posts-container .timeline-posts .timeline-posts_ads_name p {
margin: 0;
font-size: 11px;
}
.home-page-container .home-posts-container .timeline-posts .timeline-posts_ads_name p .sponsored {
color: #f83c00;
}
.home-page-container .home-posts-container .timeline-posts-ads .header time.ad_post_time,
.home-page-container .home-posts-container .timeline-posts-ads:hover .header time.ad_post_time {
transform: translateX(-2px);
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown,
.pp_blog_posts .header .dropdown {
padding: 6px 7px;
border-radius: 50%;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease;
transform: scale(0.7);
z-index: 9;
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown.open,
.pp_blog_posts .header .dropdown.open {
background-color: rgba(153, 153, 153, 0.4);
visibility: visible;
opacity: 1;
transform: scale(1);
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown.open + time {
transform: translateX(-8px);
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown span,
.pp_blog_posts .header .dropdown span {
vertical-align: middle;
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown span svg.feather,
.pp_blog_posts .header .dropdown span svg.feather {
color: #676767;
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown ul,
.pp_blog_posts .header .dropdown ul {
padding: 6px 0;
margin: 0;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown ul li,
.pp_blog_posts .header .dropdown ul li {
padding: 0;
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown ul li a,
.pp_blog_posts .header .dropdown ul li a {
color: #595959;
font-size: 13px;
line-height: 16px;
font-weight: 600;
text-decoration: none;
padding: 10px 15px;
margin: 0;
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown ul li a:hover,
.pp_blog_posts .header .dropdown ul li a:hover {
background: none;
color: #9c27b0;
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown ul li:hover,
.pp_blog_posts .header .dropdown ul li:hover {
background-color: #eeeeee;
}
.home-page-container .home-posts-container .timeline-posts .post-embed-frame {
background: #000;
}
.home-page-container .home-posts-container .timeline-posts .actions {
width: 100%;
background: #fff;
padding: 13px 15px 5px 15px;
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-pack: space-around !important;
justify-content: space-around !important;
-ms-flex-align: center !important;
align-items: center !important;
}
.home-page-container .home-posts-container .timeline-posts .actions span {
cursor: pointer;
font-size: 24px;
line-height: 18px;
display: inline-block;
}
.home-page-container .home-posts-container .timeline-posts .actions > span {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: rgb(33 150 243 / 8%);
width: 50px;
height: 50px;
border-radius: 12px;
margin: 0 10px;
transform: scale(0.9);
}
.home-page-container .home-posts-container .timeline-posts .actions span svg.feather {
color: #2196f3;
width: 25px;
height: 25px;
margin-top: -2px;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post {
vertical-align: top;
user-select: none;
background-color: rgb(255 0 85 / 8%);
}
.home-page-container .home-posts-container .timeline-posts .actions .like-icon {
width: 24px;
height: 24px;
position: relative;
background: url('data:image/svg+xml;utf8,')
no-repeat center;
background-size: 100%;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon {
-webkit-animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
background: url('data:image/svg+xml;utf8,')
no-repeat center;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon [class^="heart-animation-"] {
background: url('data:image/svg+xml;utf8,')
no-repeat center;
background-size: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 14px;
opacity: 0;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon [class^="heart-animation-"]::before,
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon [class^="heart-animation-"]::after {
content: "";
background: inherit;
background-size: 100%;
width: inherit;
height: inherit;
display: inherit;
position: relative;
top: inherit;
left: inherit;
opacity: 0;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-1 {
-webkit-animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-1::before,
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-1::after {
width: 12px;
height: 10px;
visibility: hidden;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-1::before {
opacity: 0.6;
-webkit-animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-1::after {
-webkit-animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: 0.75;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-2 {
-webkit-animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-2::before,
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-2::after {
width: 10px;
height: 8px;
visibility: hidden;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-2::before {
-webkit-animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: 0.25;
}
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-2::after {
-webkit-animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: 0.4;
}
@-webkit-keyframes heartPulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
@keyframes heartPulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
@-webkit-keyframes heartFloatMain-1 {
0% {
opacity: 0;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
opacity: 1;
-webkit-transform: translate(0, -25px) rotate(-20deg);
transform: translate(0, -25px) rotate(-20deg);
}
}
@keyframes heartFloatMain-1 {
0% {
opacity: 0;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
opacity: 1;
-webkit-transform: translate(0, -25px) rotate(-20deg);
transform: translate(0, -25px) rotate(-20deg);
}
}
@-webkit-keyframes heartFloatMain-2 {
0% {
opacity: 0;
-webkit-transform: translate(0) rotate(0) scale(0);
transform: translate(0) rotate(0) scale(0);
}
50% {
opacity: 0.9;
-webkit-transform: translate(-10px, -38px) rotate(25deg) scale(1);
transform: translate(-10px, -38px) rotate(25deg) scale(1);
}
}
@keyframes heartFloatMain-2 {
0% {
opacity: 0;
-webkit-transform: translate(0) rotate(0) scale(0);
transform: translate(0) rotate(0) scale(0);
}
50% {
opacity: 0.9;
-webkit-transform: translate(-10px, -38px) rotate(25deg) scale(1);
transform: translate(-10px, -38px) rotate(25deg) scale(1);
}
}
@-webkit-keyframes heartFloatSub-1 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(13px, -13px) rotate(30deg);
transform: translate(13px, -13px) rotate(30deg);
}
}
@keyframes heartFloatSub-1 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(13px, -13px) rotate(30deg);
transform: translate(13px, -13px) rotate(30deg);
}
}
@-webkit-keyframes heartFloatSub-2 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(18px, -10px) rotate(55deg);
transform: translate(18px, -10px) rotate(55deg);
}
}
@keyframes heartFloatSub-2 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(18px, -10px) rotate(55deg);
transform: translate(18px, -10px) rotate(55deg);
}
}
@-webkit-keyframes heartFloatSub-3 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(-10px, -10px) rotate(-40deg);
transform: translate(-10px, -10px) rotate(-40deg);
}
100% {
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
}
@keyframes heartFloatSub-3 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(-10px, -10px) rotate(-40deg);
transform: translate(-10px, -10px) rotate(-40deg);
}
100% {
-webkit-transform: translate(-50px, 0);
transform: translate(-50px, 0);
}
}
@-webkit-keyframes heartFloatSub-4 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(2px, -18px) rotate(-25deg);
transform: translate(2px, -18px) rotate(-25deg);
}
}
@keyframes heartFloatSub-4 {
0% {
visibility: hidden;
-webkit-transform: translate(0) rotate(0);
transform: translate(0) rotate(0);
}
50% {
visibility: visible;
-webkit-transform: translate(2px, -18px) rotate(-25deg);
transform: translate(2px, -18px) rotate(-25deg);
}
}
.home-page-container .home-posts-container .timeline-posts .actions span.share-post {
background-color: rgb(76 175 80 / 8%);
}
.home-page-container .home-posts-container .timeline-posts .actions span.share-post svg.feather {
color: #4caf50;
}
.home-page-container .home-posts-container .timeline-posts .actions span.save-post {
background-color: rgb(255 152 0 / 8%);
}
.home-page-container .home-posts-container .timeline-posts .actions span.save-post svg.feather {
color: #ff9800;
}
.home-page-container .home-posts-container .timeline-posts .actions span.save-post.active svg.feather {
fill: #ff9800;
}
.home-page-container .home-posts-container .timeline-posts .actions span:nth-child(2) svg.feather,
.home-page-container .home-posts-container .timeline-posts .actions span.save-post svg.feather {
width: 28px;
height: 28px;
}
.home-page-container .home-posts-container .timeline-posts .post-votes {
padding: 2px 15px;
background: #fff;
font-size: 13px;
font-weight: 500;
line-height: 15px;
display: flex;
font-family: "Open Sans", "Pretendard", sans-serif;
color: #4c404d;
}
.home-page-container .home-posts-container .timeline-posts .actions .pp-beautyk-vote {
position: relative;
color: #2196f3;
}
.home-page-container .home-posts-container .timeline-posts .actions .pp-beautyk-vote .pp-beautyk-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
}
.home-page-container .home-posts-container .timeline-posts .actions .pp-beautyk-vote svg.feather-info {
width: 25px;
height: 25px;
margin-top: -2px;
color: #2196f3;
}
.home-page-container .home-posts-container .timeline-posts .actions .pp-beautyk-vote.is-open {
background-color: rgb(33 150 243 / 18%);
}
.home-page-container .home-posts-container .timeline-posts .actions .pp-beautyk-vote.is-empty {
color: #9aa0a6;
cursor: default;
opacity: 0.7;
}
.home-page-container .home-posts-container .timeline-posts .actions .pp-beautyk-vote.is-empty svg.feather-info {
color: #9aa0a6;
}
.home-page-container .home-posts-container .timeline-posts .actions .pp-beautyk-vote.is-empty .pp-beautyk-icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 28px;
height: 2px;
background: currentColor;
transform: translate(-50%, -50%) rotate(-45deg);
border-radius: 1px;
pointer-events: none;
}
.home-page-container .home-posts-container .timeline-posts .post-votes div {
margin-right: 15px;
cursor: pointer;
}
.home-page-container .home-posts-container .timeline-posts .post-votes div strong {
font-weight: 600;
}
.home-page-container .home-posts-container .timeline-posts .post-votes div span[data-post-likes] {
font-weight: 600;
}
/* feed beautyk styles moved to portfolio-attributes */
/* Beauty-K purchase list — POLO portfolio-attributes (Client ~ Services) */
.pp-beautyk-linked.portfolio-attributes {
width: 100%;
margin: 12px 0 4px;
padding: 8px 0 0;
clear: both;
overflow: hidden;
color: #3c4043;
font-size: 12px;
text-transform: uppercase;
font-family: "Poppins", "Open Sans", "Noto Sans KR", sans-serif;
margin-bottom: 20px;
}
.pp-beautyk-linked.portfolio-attributes a:not(.btn) {
color: #3c4043;
text-decoration: none;
border-bottom: 0;
}
.pp-beautyk-linked.portfolio-attributes a:not(.btn):hover {
color: #3c4043;
opacity: 0.75;
}
.pp-beautyk-linked.portfolio-attributes .attribute {
float: left;
margin-bottom: 20px;
padding-right: 20px;
text-align: left;
width: auto;
color: #3c4043;
font-size: 12px;
line-height: inherit;
font-family: inherit;
text-transform: uppercase;
}
.pp-beautyk-linked.portfolio-attributes .attribute strong {
opacity: 0.6;
border-bottom: 1px solid rgba(31, 31, 31, 0.05);
display: block;
width: auto;
margin-bottom: 10px;
font-size: 11px;
font-weight: inherit;
color: inherit;
text-transform: uppercase;
}
.pp-beautyk-linked.portfolio-attributes.style1 .attribute {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
float: none;
margin-bottom: 0;
padding-right: 0;
width: 100%;
align-items: baseline;
}
.pp-beautyk-linked.portfolio-attributes.style1 .attribute strong {
border: 0;
margin-right: 8px;
margin-bottom: 0;
width: auto;
min-width: 68px;
flex-shrink: 0;
}
.pp-beautyk-linked.portfolio-attributes .attribute span,
.pp-beautyk-linked.portfolio-attributes .attribute a {
color: #3c4043;
font-size: 12px;
text-transform: uppercase;
}
.pp-beautyk-linked.portfolio-attributes .attribute .pp-beautyk-buyers {
font-style: normal;
opacity: 0.7;
margin-left: 4px;
white-space: nowrap;
}
.pp-beautyk-linked.portfolio-attributes .attribute.is-hidden-slide,
.pp-beautyk-linked.portfolio-attributes.hidden {
display: none !important;
}
.pp-beautyk-linked.portfolio-attributes .pp-beautyk-empty span {
opacity: 0.6;
color: #3c4043;
}
.pp-beautyk-linked.portfolio-attributes.is-empty .pp-beautyk-empty {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .pp_pst_caption .pp-beautyk-linked,
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .pp_light_caption .pp-beautyk-linked {
padding: 14px 0 4px;
margin-top: 10px;
border-top: 1px solid rgba(31, 31, 31, 0.06);
}
.home-page-container .home-posts-container .timeline-posts .pp-beautyk-linked {
padding: 4px 15px 10px;
background: #fff;
}
.home-page-container .home-posts-container .timeline-posts div.caption {
padding: 10px 15px;
background-color: white;
overflow-wrap: break-word;
color: #3c4043;
font-family: "Open Sans", "Noto Sans KR", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
}
.home-page-container .home-posts-container .timeline-posts div.caption .post-title,
.home-page-container .home-posts-container .timeline-posts div.caption h3.post-title {
margin: 0 0 8px;
padding: 0;
color: #3c4043;
font-family: "Poppins", "Open Sans", "Noto Sans KR", sans-serif;
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.home-page-container .home-posts-container .timeline-posts div.caption .post-body {
margin: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #4c404d;
}
.home-page-container .home-posts-container .timeline-posts div.caption[contenteditable="true"] {
color: #4c404d;
font-size: 13px;
line-height: 16px;
font-weight: 600;
outline: 0;
border: 2px solid #82b7da;
border-radius: 3px;
}
.home-page-container .home-posts-container .timeline-posts div.caption:empty {
padding: 5px 10px;
}
.home-page-container .home-posts-container .timeline-posts div.caption a.hashtag,
.home-page-container .home-posts-container .timeline-posts div.caption a.mention {
color: #00aeda;
}
.home-page-container .home-posts-container .timeline-posts .comments-area {
width: 100%; /*overflow: hidden;*/
background: #fff;
border-radius: 0 0 8px 8px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list {
padding: 0;
margin: 0px;
list-style: none;
font-family: "Open Sans", "Pretendard", sans-serif;
color: #4c404d;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list:empty {
padding: 0px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li {
width: 100%;
margin-bottom: 10px 0;
padding: 10px 40px 5px 15px;
word-wrap: break-word;
position: relative;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li .user-avatar {
display: inline-block;
float: left;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li .user-avatar img {
width: 30px;
height: 30px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li .pp_com_body {
margin-left: 38px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li .pp_com_body span {
background-color: #fff;
border: 1px solid #eee;
padding: 7px 10px;
border-radius: 18px;
display: inline-block;
line-height: 18px;
color: #4c404d;
font-family: "Open Sans", "Pretendard", sans-serif;
position: relative;
padding-right: 30px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li strong {
color: #4c404d;
font-weight: 700;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li strong a {
font-weight: 700;
text-decoration: none;
color: #4c404d;
margin: 0px 5px 0px 0px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li strong a:hover {
text-decoration: none;
color: #00aeda;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li .delcomment {
color: #898889;
cursor: pointer;
padding: 5px 5px;
position: absolute;
right: 10px;
top: 0;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .add-comment {
/*overflow: hidden;border-top: 1px solid #eee;*/
padding: 0px 15px 4px 15px;
padding-top: 10px;
position: relative;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .add-comment .user-avatar {
display: inline-block;
float: left;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .add-comment .form-group {
padding-bottom: 7px;
margin: 0 40px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .add-comment .form-group input {
border: none;
box-shadow: none;
padding-top: 3px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .add-comment .form-group input::placeholder {
font-size: 13px;
line-height: 16px;
color: #939393;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .add-comment .form-group .emojionearea.emojionearea-inline {
border: 1px solid #2250fc;
box-shadow: none;
background-color: #fff;
border-radius: 2em;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .add-comment .form-group .emojionearea .emojionearea-editor:empty:before {
color: #787878;
}
.btn-post-comment-send {
float: right;
width: 34px;
height: 34px;
border: 1px solid #2250fc;
border-radius: 2em !important;
padding: 0;
color: #ffffff !important;
background-color: #2250fc;
-webkit-transition: all 0.3s;
transition: all 0.3s;
cursor: pointer;
outline: none;
}
.btn-post-comment-send:hover,
.btn-post-comment-send:focus,
.btn-post-comment-send:active {
background-color: #1a40d4;
border-color: #1a40d4;
color: #ffffff !important;
}
.btn-post-comment-send svg {
width: 16px;
height: auto;
margin: 0 0 0 -2px;
fill: currentColor;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .add-comment .commenting-overlay {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #fff;
text-align: center;
opacity: 0.6;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .add-comment .commenting-overlay #pp_loader {
display: block;
float: none;
padding: 13.4px 15px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .add-comment .commenting-overlay #pp_loader .speeding_wheel {
width: 24px;
height: 24px;
border-width: 3px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li.load-comments {
padding: 0px 55px 9px;
margin: -5px 0px 0px 0px;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li.load-comments button {
padding: 1px;
color: #999;
font-size: 12px;
background: #fff;
border: 0;
outline: 0;
font-weight: 500;
font-family: "Open Sans", "Pretendard", sans-serif;
transition: all 0.2s ease;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li.load-comments button[disabled] {
cursor: wait;
}
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li.load-comments button:hover {
color: #262626;
}
.home-page-container .posts__loader {
width: 100%;
overflow: hidden;
text-align: center;
margin-bottom: 30px;
}
.home-page-container .posts__loader #pp_loader {
display: block;
float: none;
}
.home-page-container .posts__loader #pp_loader .speeding_wheel {
width: 24px;
height: 24px;
}
/*Settings Page*/
.settings-page-container {
width: 100%;
margin-top: 70px;
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #ececec;
}
.settings-page-container .sett_avatr_chng {
width: 100%;
border-bottom: 1px solid #ececec;
border-left: 1px solid #ececec;
border-top: 1px solid #ececec;
margin: 0 0 15px;
}
.settings-page-container .sidenav {
padding: 0px;
}
.settings-page-container .sidenav ul {
margin: 0;
background-color: #ffffff;
height: 100%;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
padding: 13px 0;
}
.settings-page-container .sidenav ul li {
border: none;
padding: 2px 15px;
border-radius: 0;
position: relative;
transition: all 0.05s ease-in-out;
background: transparent;
}
.settings-page-container .sidenav ul li a {
color: #545454;
text-decoration: none;
display: block;
padding: 10px 15px;
transition: all 0.1s ease-in-out;
font-weight: 500;
border-radius: 2em;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.settings-page-container .sidenav ul li a:hover {
color: #000;
}
.settings-page-container .sidenav ul li.sett-active a,
.settings-page-container .sidenav ul li.prof-active a,
.settings-page-container .sidenav ul li.pass-active a,
.settings-page-container .sidenav ul li.priv-active a,
.settings-page-container .sidenav ul li.noti-active a,
.settings-page-container .sidenav ul li.verf-active a,
.settings-page-container .sidenav ul li.sess-active a,
.settings-page-container .sidenav ul li.affiliates-active a,
.settings-page-container .sidenav ul li.withdraw-active a,
.settings-page-container .sidenav ul li.wallet-active a,
.settings-page-container .sidenav ul li.blok-active a,
.settings-page-container .sidenav ul li.delt-active a,
.settings-page-container .sidenav ul li.active a {
background: linear-gradient(135deg, #f65599 0%, #d41767 100%);
color: #fff;
}
/*.settings-page-container .sidenav ul li.sett-hover:hover a {color: #4CAF50;}
.settings-page-container .sidenav ul li.prof-hover:hover a {color: #c83e40;}
.settings-page-container .sidenav ul li.pass-hover:hover a {color: #176764;}
.settings-page-container .sidenav ul li.priv-hover:hover a {color: #ca4b8e;}
.settings-page-container .sidenav ul li.noti-hover:hover a {color: #795548;}
.settings-page-container .sidenav ul li.verf-hover:hover a {color: #2196f3;}
.settings-page-container .sidenav ul li.sess-hover:hover a {color: #f57d3c;}
.settings-page-container .sidenav ul li.blok-hover:hover a {color: #3f51b5;}
.settings-page-container .sidenav ul li.affiliates-hover:hover a {color: #555d3c;}
.settings-page-container .sidenav ul li.withdraw-hover:hover a {color: #415966;}
.settings-page-container .sidenav ul li.delt-hover:hover a {color: #f44336;}*/
.settings-page-container .sidenav ul li.active a,
.settings-page-container .sidenav ul li.active:hover a {
color: #fff;
}
.settings-page-container .sidenav ul li a svg {
margin: -2px 10px 0px 0px;
width: 19px;
height: 19px;
}
.settings-page-container .sidenav ul li.pxp-deokdae-disabled > span {
display: block;
padding: 10px 15px;
font-weight: 500;
border-radius: 2em;
color: #9e9e9e;
cursor: not-allowed;
pointer-events: none;
user-select: none;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.settings-page-container .sidenav ul li.pxp-deokdae-disabled > span svg {
margin: -2px 10px 0px 0px;
width: 19px;
height: 19px;
opacity: 0.5;
}
.settings-page-container .page-content {
padding: 0px;
background-color: white;
border-right: 1px solid #ececec;
}
.settings-page-container .page-content > div {
background-color: white;
padding: 20px;
}
.pp_sett_form {
padding-top: 20px;
}
.settings-page-container .page-content .sett-active .pp_mat_input input:focus ~ label,
.settings-page-container .page-content .sett-active .pp_mat_input input:valid ~ label,
.settings-page-container .page-content .sett-active .pp_mat_input textarea:focus ~ label,
.settings-page-container .page-content .sett-active .pp_mat_input textarea:valid ~ label,
.settings-page-container .page-content .sett-active .pp_mat_label {
color: #4caf50;
}
.settings-page-container .page-content .sett-active .pp_mat_input input:focus,
.settings-page-container .page-content .sett-active .pp_mat_input textarea:focus,
.settings-page-container .page-content .sett-active .pp_mat_select select:focus,
.pp_store_upload .pp_mat_input input:focus,
.pp_store_upload .pp_mat_select select:focus,
.pp_store_upload .pp_mat_input textarea:focus,
#contact_us_form .pp_mat_input input:focus,
#contact_us_form .pp_mat_input textarea:focus,
#contact_us_form .pp_mat_input select:focus {
border-color: #4caf50;
box-shadow: 0 0 0 1px #4caf50 !important;
}
.settings-page-container .page-content .sett-active .btn.pp_flat_btn {
background: #4caf50;
border-color: #4caf50;
}
.settings-page-container .page-content .sett-active.earn-apply-page .btn.pp_flat_btn {
background: linear-gradient(135deg, #f65599 0%, #d41767 100%);
border-color: #d41767;
color: #fff;
}
.settings-page-container .earn-birth-row {
display: flex;
gap: 10px;
}
.settings-page-container .earn-birth-row input {
flex: 1;
min-width: 0;
text-align: center;
}
.settings-page-container .page-content .prof-active .pp_mat_input input:focus ~ label,
.settings-page-container .page-content .prof-active .pp_mat_input input:valid ~ label,
.settings-page-container .page-content .prof-active .pp_mat_input textarea:focus ~ label,
.settings-page-container .page-content .prof-active .pp_mat_input textarea:valid ~ label,
.settings-page-container .page-content .prof-active .pp_mat_label {
color: #c83e40;
}
.settings-page-container .page-content .prof-active .pp_mat_input input:focus,
.settings-page-container .page-content .prof-active .pp_mat_input textarea:focus,
.settings-page-container .page-content .prof-active .pp_mat_select select:focus {
border-color: #c83e40;
box-shadow: 0 0 0 1px #c83e40 !important;
}
.settings-page-container .page-content .prof-active .btn.pp_flat_btn {
background: #c83e40;
border-color: #c83e40;
}
.settings-page-container .page-content .pass-active .pp_mat_input input:focus ~ label,
.settings-page-container .page-content .pass-active .pp_mat_input input:valid ~ label,
.settings-page-container .page-content .pass-active .pp_mat_input textarea:focus ~ label,
.settings-page-container .page-content .pass-active .pp_mat_input textarea:valid ~ label,
.settings-page-container .page-content .pass-active .pp_mat_label {
color: #176764;
}
.settings-page-container .page-content .pass-active .pp_mat_input input:focus,
.settings-page-container .page-content .pass-active .pp_mat_input textarea:focus,
.settings-page-container .page-content .pass-active .pp_mat_select select:focus {
border-color: #176764;
box-shadow: 0 0 0 1px #176764 !important;
}
.settings-page-container .page-content .pass-active .btn.pp_flat_btn {
background: #176764;
border-color: #176764;
}
.settings-page-container .page-content .priv-active .pp_mat_input input:focus ~ label,
.settings-page-container .page-content .priv-active .pp_mat_input input:valid ~ label,
.settings-page-container .page-content .priv-active .pp_mat_input textarea:focus ~ label,
.settings-page-container .page-content .priv-active .pp_mat_input textarea:valid ~ label,
.settings-page-container .page-content .priv-active .pp_mat_label {
color: #ca4b8e;
}
.settings-page-container .page-content .priv-active .pp_mat_input input:focus,
.settings-page-container .page-content .priv-active .pp_mat_input textarea:focus,
.settings-page-container .page-content .priv-active .pp_mat_select select:focus {
border-color: #ca4b8e;
box-shadow: 0 0 0 1px #ca4b8e !important;
}
.settings-page-container .page-content .priv-active .btn.pp_flat_btn {
background: #ca4b8e;
border-color: #ca4b8e;
}
.settings-page-container .page-content .noti-active .pp_mat_input input:focus ~ label,
.settings-page-container .page-content .noti-active .pp_mat_input input:valid ~ label,
.settings-page-container .page-content .noti-active .pp_mat_input textarea:focus ~ label,
.settings-page-container .page-content .noti-active .pp_mat_input textarea:valid ~ label,
.settings-page-container .page-content .noti-active .pp_mat_label {
color: #795548;
}
.settings-page-container .page-content .noti-active .pp_mat_input input:focus,
.settings-page-container .page-content .noti-active .pp_mat_input textarea:focus,
.settings-page-container .page-content .noti-active .pp_mat_select select:focus {
border-color: #795548;
box-shadow: 0 0 0 1px #795548 !important;
}
.settings-page-container .page-content .noti-active .btn.pp_flat_btn {
background: #795548;
border-color: #795548;
}
.settings-page-container .page-content .verf-active .pp_mat_input input:focus ~ label,
.settings-page-container .page-content .verf-active .pp_mat_input input:valid ~ label,
.settings-page-container .page-content .verf-active .pp_mat_input textarea:focus ~ label,
.settings-page-container .page-content .verf-active .pp_mat_input textarea:valid ~ label,
.settings-page-container .page-content .verf-active .pp_mat_label,
.settings-page-container .page-content .verf-active .verify_text_1 {
color: #2196f3;
}
.settings-page-container .page-content .verf-active .pp_mat_input input:focus,
.settings-page-container .page-content .verf-active .pp_mat_input textarea:focus,
.settings-page-container .page-content .verf-active .pp_mat_select select:focus {
border-color: #2196f3;
box-shadow: 0 0 0 1px #2196f3 !important;
}
.settings-page-container .page-content .verf-active .btn.pp_flat_btn {
background: #2196f3;
border-color: #2196f3;
}
.settings-page-container .page-content .delt-active .pp_mat_input input:focus ~ label,
.settings-page-container .page-content .delt-active .pp_mat_input input:valid ~ label,
.settings-page-container .page-content .delt-active .pp_mat_input textarea:focus ~ label,
.settings-page-container .page-content .delt-active .pp_mat_input textarea:valid ~ label,
.settings-page-container .page-content .delt-active .pp_mat_label {
color: #f44336;
}
.settings-page-container .page-content .delt-active .pp_mat_input input:focus,
.settings-page-container .page-content .delt-active .pp_mat_input textarea:focus,
.settings-page-container .page-content .delt-active .pp_mat_select select:focus {
border-color: #f44336;
box-shadow: 0 0 0 1px #f44336 !important;
}
.settings-page-container .pp_mat_input input,
.settings-page-container .pp_mat_input textarea,
.settings-page-container .pp_mat_select select,
.settings-page-container .earn-birth-row input,
.pp_store_upload .pp_mat_input input,
.pp_store_upload .pp_mat_select select,
.pp_store_upload .pp_mat_input textarea,
#contact_us_form .pp_mat_input input,
#contact_us_form .pp_mat_input textarea,
#contact_us_form .pp_mat_input select,
.report_fund_modal .pp_mat_input textarea {
width: 100%;
font-size: 16px;
padding: 12px 15px;
display: block;
background-color: transparent !important;
box-shadow: 0 0 rgb(0 0 0 / 0%), 0 0 rgb(0 0 0 / 0%), 0 1px 2px 0 rgb(0 0 0 / 5%) !important;
border-radius: 6px !important;
border: 1px solid #d1d5db;
height: auto;
}
.settings-page-container .pp_mat_input label,
#contact_us_form .pp_mat_input label,
.report_fund_modal .pp_mat_input label {
top: 13px;
font-size: 16px;
color: rgb(0 0 0 / 50%);
font-weight: normal !important;
left: 10px;
padding: 0 5px;
}
.settings-page-container .pp_mat_input input:focus ~ label,
.settings-page-container .pp_mat_input input:valid ~ label,
.settings-page-container .pp_mat_input textarea:focus ~ label,
.settings-page-container .pp_mat_input textarea:valid ~ label,
.settings-page-container .pp_mat_input.pp_mat_input_float_label label,
#contact_us_form .pp_mat_input input:focus ~ label,
#contact_us_form .pp_mat_input input:valid ~ label,
#contact_us_form .pp_mat_input textarea:focus ~ label,
#contact_us_form .pp_mat_input textarea:valid ~ label,
.report_fund_modal .pp_mat_input textarea:focus ~ label,
.report_fund_modal .pp_mat_input textarea:valid ~ label {
position: absolute;
cursor: text;
opacity: 1;
transition: 0.2s ease all;
pointer-events: none;
font-family: "Open Sans", "Pretendard", sans-serif;
font-weight: 500 !important;
top: -7px;
font-size: 13px;
user-select: none;
margin: 0;
background: #fff;
left: 10px;
padding: 0 5px;
}
#contact_us_form .pp_mat_input input:focus ~ label,
#contact_us_form .pp_mat_input input:valid ~ label,
#contact_us_form .pp_mat_input textarea:focus ~ label,
#contact_us_form .pp_mat_input textarea:valid ~ label {
color: #4caf50;
}
.report_fund_modal .pp_mat_input textarea:focus {
border-color: #7c4dff;
box-shadow: 0 0 0 1px #7c4dff !important;
}
.settings-page-container .pp_mat_input .bar:before,
.settings-page-container .pp_mat_input .bar:after,
.report_fund_modal .pp_mat_input .bar:before,
.report_fund_modal .pp_mat_input .bar:after {
display: none;
}
.settings-page-container .page-content .delt-active .btn.pp_flat_btn {
background: #f44336;
border-color: #f44336;
}
.settings-page-container .page-content .form-control {
border-radius: 2px;
}
.settings-page-container .page-content label {
font-weight: 500;
}
.settings-page-container .page-content textarea {
resize: vertical;
}
.settings-page-container .page-content .btn {
border-radius: 0px;
font-weight: 500;
}
.settings-page-container .page-content div.header {
width: 100%;
}
.settings-page-container .page-content div.header .avatar-wrapper {
display: inline-block;
float: left;
margin-right: 20px;
}
.settings-page-container .page-content div.header > h4 {
padding: 0;
margin: 0 0 30px;
font-size: 30px;
text-align: center;
}
.settings-page-container .page-content div.header > p {
padding: 0;
margin: -20px 0 30px;
color: #666;
text-align: center;
}
.settings-page-container .page-content div.header .edit-avatar {
margin-left: 80px;
}
.settings-page-container .page-content div.header .edit-avatar h5 {
margin: 0;
font-size: 20px;
line-height: 20px;
margin-bottom: 4px;
padding-top: 5px;
}
.settings-page-container .page-content div.header .edit-avatar .btn-info {
box-shadow: none;
margin: 4px 0px 0px;
padding: 4px 12px !important;
font-family: "Open Sans", "Pretendard", sans-serif;
font-weight: 500;
border-radius: 5px;
border: 0;
font-size: 13px !important;
color: #2196f3;
background-color: rgb(33 150 243 / 20%);
}
.settings-page-container .page-content div.header .edit-avatar .btn-info svg.feather {
margin: -2px 2px 0px 0px;
width: 17px;
height: 17px;
}
.settings-page-container .page-content div.header + hr {
display: none;
}
.settings-page-container .btn.pp_flat_btn {
display: block;
user-select: none;
padding: 10px 35px !important;
border-radius: 2em;
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 15px;
margin: 30px auto 15px;
background-color: #00b289;
border-color: #00b289;
transition: all 0.3s ease-in-out;
height: 40px;
}
.settings-page-container .btn.pp_flat_btn:hover {
box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}
.settings-page-container .pp_load_loader {
position: relative;
}
.settings-page-container .pp_load_loader.loadingg::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background: #fff;
z-index: 2;
margin-top: 4px;
animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
animation-delay: 0.15s;
}
.settings-page-container .pp_load_loader.loadingg .btn {
font-size: 0;
width: 40px;
border-radius: 20px;
}
.settings-page-container .pp_load_loader.loadingg .btn span {
opacity: 0;
}
.settings-page-container .pp_load_loader.loadingg .btn::before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background: #fff;
z-index: 2;
margin-top: 4px;
animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
margin-left: -10px;
}
.settings-page-container .pp_load_loader.loadingg .btn::after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
content: "";
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background: #fff;
z-index: 2;
margin-top: 4px;
animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
margin-left: 10px;
animation-delay: 0.3s;
}
@-webkit-keyframes ball {
from {
transform: translateY(0) scaleY(0.8);
}
to {
transform: translateY(-10px);
}
}
@keyframes ball {
from {
transform: translateY(0) scaleY(0.8);
}
to {
transform: translateY(-10px);
}
}
.settings-page-container .blocked-users-settings .blocked-users--ls {
width: 100%;
overflow: hidden;
padding: 0px 70px;
min-height: 150px;
}
.settings-page-container .blocked-users-settings .blocked-users--ls .blocked-users--ls-item {
border-bottom: 1px solid #e6ecf0;
padding: 10px 10px;
display: flex;
align-items: center;
margin: 0 0 0 70px;
}
.settings-page-container .blocked-users-settings .blocked-users--ls .blocked-users--ls-item:last-child {
border-bottom: none;
}
.settings-page-container .blocked-users-settings .blocked-users--ls .blocked-users--ls-item .avatar {
width: 50px;
height: 50px;
margin-left: -70px;
}
.settings-page-container .blocked-users-settings .blocked-users--ls .blocked-users--ls-item h4 {
margin: -2px 0 0 14px;
font-weight: normal;
}
.settings-page-container .blocked-users-settings .blocked-users--ls .blocked-users--ls-item h4 span {
display: block;
line-height: 16px;
font-size: 13px;
}
.settings-page-container .blocked-users-settings .blocked-users--ls .blocked-users--ls-item button {
margin: 0 0 0 auto;
}
.settings-page-container .page-content .delete_session {
border-radius: 16px;
width: 38px;
height: 38px;
text-align: center;
padding: 0;
line-height: 1;
color: #f44336;
background-color: rgb(244 67 54 / 15%);
}
/*Loading Modal*/
#modal-progress {
position: fixed;
z-index: 2000;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
}
#modal-progress svg {
background-color: white;
padding: 15px;
border-radius: 4px;
box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.17);
width: 65px;
height: 65px;
}
#modal-progress .post-editing-form form#import-post-gifs .content .item .preload span,
.post-editing-form form#import-post-gifs .content .item .preload #modal-progress span {
border: 3px solid #f3f3f3;
border-radius: 50%;
border-top: 3px solid #2b87ce;
width: 50px;
height: 50px;
animation: spin 0.45s linear infinite;
}
@-webkit-keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*Publisher Box*/
#create-newpost {
position: fixed;
z-index: 3000;
width: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow-y: auto;
display: flex;
align-items: center;
flex-direction: column;
}
#create-newpost:before,
#create-newpost:after {
box-flex: 1;
flex-grow: 1;
content: "";
display: block;
height: 24px;
}
#create-newpost .container {
margin-top: 150px;
}
#create-newpost:empty {
height: 0;
display: none !important;
pointer-events: none;
}
.timeline-posts .header .pxp-edit-post-btn,
.light__box .pxp-edit-post-btn {
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 6px;
vertical-align: middle;
color: #8e8e8e;
}
.timeline-posts .header .pxp-edit-post-btn:hover,
.light__box .pxp-edit-post-btn:hover {
color: #2250fc;
}
.timeline-posts .header .pxp-edit-post-btn svg,
.light__box .pxp-edit-post-btn svg {
width: 18px;
height: 18px;
}
.no-padding-both {
padding-right: 0px;
padding-left: 0px;
}
.no-padding-left {
padding-left: 0px;
}
.no-padding-right {
padding-right: 0px;
}
/*Publisher Box*/
.post-editing-form {
width: 100%;
max-width: 600px;
background: #fff;
border-radius: 10px;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
overflow: hidden;
margin: 10px auto;
overflow-y: auto;
position: relative;
padding-top: 56px;
}
.post-editing-form .images-renderer {
width: 100%;
overflow: hidden;
padding: 0px 15px;
}
.post-editing-form .images-renderer ul {
padding: 11px 0 5px;
list-style: none;
margin: 0;
text-align: center;
}
.post-editing-form .images-renderer ul li {
padding: 5px;
font-size: 13px;
width: 119.2px;
height: 230px;
margin: 0px 7px 19px;
display: inline-block;
position: relative;
border: 1px solid #ddd;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.05);
cursor: grab;
vertical-align: top;
}
.post-editing-form .images-renderer ul li.is-dragging {
opacity: 0.55;
cursor: grabbing;
}
.post-editing-form .images-renderer ul li.drag-over {
border-color: #ddd;
}
.post-editing-form .images-renderer ul li.drag-over-left::before,
.post-editing-form .images-renderer ul li.drag-over-right::after {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
width: 3px;
background: #2250fc;
border-radius: 2px;
z-index: 5;
pointer-events: none;
}
/* margin 좌우 7px → 칸 사이 간격 중앙 */
.post-editing-form .images-renderer ul li.drag-over-left::before {
left: -7px;
transform: translateX(-50%);
}
.post-editing-form .images-renderer ul li.drag-over-right::after {
right: -7px;
transform: translateX(50%);
}
.post-editing-form .images-renderer ul li .img-name,
.post-editing-form .images-renderer ul li .img-size,
.post-editing-form .images-renderer ul li .img-existing-badge {
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
}
.post-editing-form .images-renderer ul li img {
width: 107px !important;
height: 120px;
object-fit: cover;
display: block;
margin: 0 auto;
pointer-events: none;
-webkit-user-drag: none;
user-select: none;
}
.post-editing-form .images-renderer ul li .img-name {
display: block;
text-align: center;
word-break: break-word;
width: 100%;
max-height: 32px;
overflow: hidden;
font-weight: 500;
font-size: 11px;
margin-top: 4px;
line-height: 1.2;
}
.post-editing-form .images-renderer ul li .img-size {
display: block;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 11px;
color: #888;
}
.post-editing-form .images-renderer ul li .img-reorder {
display: flex;
justify-content: center;
gap: 4px;
margin-top: 6px;
}
.post-editing-form .images-renderer ul li .img-reorder button {
width: 28px;
height: 28px;
padding: 0;
border: 1px solid #ddd;
border-radius: 6px;
background: #fff;
color: #333;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.post-editing-form .images-renderer ul li .img-reorder button:hover:not(:disabled) {
border-color: #2250fc;
color: #2250fc;
}
.post-editing-form .images-renderer ul li .img-reorder button:disabled {
opacity: 0.35;
cursor: default;
}
.post-editing-form .images-renderer ul li .remove-img {
cursor: pointer;
position: absolute;
top: -10px;
right: -10px;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease;
}
.post-editing-form .images-renderer ul li .remove-img svg.feather {
margin-top: -1px;
width: 21px;
height: 21px;
fill: #2296f3;
}
.post-editing-form .images-renderer ul li:hover .remove-img {
visibility: visible;
opacity: 1;
}
.post-editing-form .images-renderer .select-images {
height: 200px;
background: rgb(0 0 0 / 2%);
border: 2px dashed #dedede;
margin-bottom: 15px;
transition: all 0.2s ease-in-out;
font-weight: 600;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.post-editing-form .images-renderer .select-images:hover,
.post-editing-form .images-renderer .select-images.active {
border-color: #5a7082;
cursor: pointer;
}
.post-editing-form .images-renderer .select-images svg.feather {
width: 40px;
height: 50px;
}
.post-editing-form .form-group {
padding: 0px 15px;
}
.post-editing-form .pxp-post-text-fields {
display: flex;
flex-direction: column;
gap: 8px;
}
.post-editing-form .pp_make_post_title {
font-size: 20px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
border-bottom: 1px solid #eee !important;
border-radius: 0 !important;
padding: 10px 0 !important;
margin-bottom: 4px;
}
.post-editing-form .form-group .emojionearea,
.emojionearea.form-control {
border: 0;
box-shadow: none;
}
.post-editing-form input.form-control,
.post-editing-form textarea.form-control {
box-shadow: none;
border: none;
color: #14171a;
display: block;
font-size: 14px;
overflow: hidden;
overflow-y: auto;
word-break: break-word;
}
.post-editing-form textarea.pp_make_post::-webkit-scrollbar,
.post-editing-form form#edit-post-caption textarea::-webkit-scrollbar,
.post-editing-form form#ffmpeg-upload-post-video textarea::-webkit-scrollbar,
.post-editing-form form#import-post-gifs .content::-webkit-scrollbar,
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result::-webkit-scrollbar,
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu ul::-webkit-scrollbar {
width: 5px;
height: 5px;
}
.post-editing-form textarea.pp_make_post::-webkit-scrollbar-thumb,
.post-editing-form form#edit-post-caption textarea::-webkit-scrollbar-thumb,
.post-editing-form form#ffmpeg-upload-post-video textarea::-webkit-scrollbar-thumb,
.post-editing-form form#import-post-gifs .content::-webkit-scrollbar-thumb,
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result::-webkit-scrollbar-thumb,
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu ul::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background: #b4b4b4;
-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.post-editing-form textarea.pp_make_post::-webkit-scrollbar-thumb:window-inactive,
.post-editing-form form#edit-post-caption textarea::-webkit-scrollbar-thumb:window-inactive,
.post-editing-form form#ffmpeg-upload-post-video textarea::-webkit-scrollbar-thumb:window-inactive,
.post-editing-form form#import-post-gifs .content::-webkit-scrollbar-thumb:window-inactive,
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result::-webkit-scrollbar-thumb:window-inactive,
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu ul::-webkit-scrollbar-thumb:window-inactive {
background: rgba(231, 231, 231, 0.1);
}
.post-editing-form textarea {
resize: none;
}
.post-editing-form .user-heading {
padding: 16px 4px 8px 16px;
}
.post-editing-form .user-heading img {
height: 40px;
margin-right: 8px;
width: 40px;
}
.post-editing-form .user-heading span {
font-weight: 600;
color: #444;
padding: 10px 0;
}
.post-editing-form .user-heading svg.feather.feather-arrow {
margin-top: -2px;
}
.post-editing-form .user-heading span.pp_area {
color: #4285f4;
}
.post-editing-form .user-heading span.pp_area svg.feather {
margin-top: -2px;
width: 17px;
height: 17px;
display: none;
}
.post-editing-form .user-heading span.pull-right {
padding: 8px 15px;
}
.post-editing-form .user-heading span.pull-right svg.feather {
margin-top: -3px;
width: 15px;
height: 15px;
}
.post-editing-form .publish {
border-bottom: 1px solid #e8e8e8;
overflow: hidden;
padding: 9px 15px;
margin: 0px;
height: 56px;
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
.post-editing-form .publish .btn {
margin: 0;
display: inline-block;
user-select: none;
box-sizing: border-box;
cursor: pointer;
padding: 7px 20px 8px;
font-family: "Open Sans", "Pretendard", sans-serif;
text-decoration: none;
box-shadow: none;
border-radius: 2em;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
}
.post-editing-form .publish .btn-info {
min-width: 150px;
}
.post-editing-form .publish .btn-warning {
color: #ffffff;
background-color: #f0ad4e;
outline: 0;
}
.post-editing-form .publish .btn-default {
color: rgba(0, 0, 0, 0.87);
transition: all 0.2s ease;
outline: 0;
}
.post-editing-form .publish .btn-default:active {
background: rgba(0, 0, 0, 0.12);
}
.post-editing-form .selecet-file-control {
overflow: hidden;
resize: none;
border: 0;
box-shadow: none;
height: 100%;
background: #edf0f4;
width: auto;
border-radius: 10px;
padding: 15px 25px;
}
.post-editing-form .selecet-file-control.active {
box-shadow: 0 0 0 2px #f44336;
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
}
.post-editing-form .selecet-file-control button {
margin: 0;
background: #edf0f4;
border: none;
box-shadow: none;
font-weight: 500;
font-size: 15px;
outline: none;
padding: 0;
color: #4c4e53;
float: left;
line-height: 21px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.post-editing-form .selecet-file-control span.video-file-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #7e7e7e;
max-width: 63%;
float: left;
margin-left: 10px;
font-size: inherit;
}
.post-editing-form .selecet-file-control span.video-file-name svg.feather {
margin: -1px 4px 0px 0px;
width: 18px;
height: 18px;
}
.post-editing-form .selecet-file-control #post_video_prnt {
padding-top: 30px;
}
.post-editing-form .selecet-file-control #post_video_prnt.embed-responsive-16by9::before {
padding-top: 56.25%;
}
.post-editing-form form#embed-post-video div.fetch-url {
width: 100%;
overflow: hidden;
}
.post-editing-form form#embed-post-video div.fetch-url .video-url {
background: #edf0f4;
transition: all 0.2s ease-in-out;
color: #4c4e53;
border-radius: 10px;
position: relative;
}
.post-editing-form form#embed-post-video div.fetch-url .video-url.active {
box-shadow: 0 0 0 2px #f44336;
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 0.9s;
animation-duration: 0.9s;
}
.post-editing-form form#embed-post-video div.fetch-url .video-url svg.feather {
position: absolute;
width: 24px;
height: 24px;
top: 17px;
left: 17px;
color: #8c8c8c;
pointer-events: none;
}
.post-editing-form form#embed-post-video div.fetch-url .video-url input {
width: 100%;
border: none;
outline: 0;
background: transparent;
padding: 15px 15px 15px 50px;
}
.post-editing-form form#embed-post-video div.fetch-url .video-url input::placeholder {
color: #676767;
}
.post-editing-form form#embed-post-video .iframe-renderer {
display: none;
}
.post-editing-form form#embed-post-video #embed-iframe {
position: relative;
padding: 0px 25px;
min-height: 100px;
}
.post-editing-form form#embed-post-video #embed-iframe_ {
position: relative;
padding: 0px 25px;
min-height: 100px;
}
.post-editing-form form#embed-post-video #embed-iframe iframe {
background: transparent;
position: relative;
z-index: 10;
}
.post-editing-form form#embed-post-video #embed-iframe:after {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='50px' height='50px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3crect x='0' y='0' width='100' height='100' fill='none' class='bk'%3e%3c/rect%3e%3ccircle cx='50' cy='50' r='40' stroke='%23676d76' fill='none' stroke-width='6' stroke-linecap='round'%3e%3canimate attributeName='stroke-dashoffset' dur='1.5s' repeatCount='indefinite' from='0' to='502'%3e%3c/animate%3e%3canimate attributeName='stroke-dasharray' dur='1.5s' repeatCount='indefinite' values='150.6 100.4;1 250;150.6 100.4'%3e%3c/animate%3e%3c/circle%3e%3c/svg%3e");
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
margin: auto;
z-index: 1;
}
.post-editing-form form#embed-post-video #embed-iframe_:after {
display: none;
}
.post-editing-form form#import-post-gifs {
width: 100%;
}
.post-editing-form form#import-post-gifs div.search-input {
position: relative;
background: #edf0f4;
margin: 0 15px 15px;
transition: all 0.2s ease-in-out;
color: #4c4e53;
border-radius: 2em;
}
.post-editing-form form#import-post-gifs div.search-input svg.feather {
position: absolute;
width: 24px;
height: 24px;
top: 17px;
left: 17px;
color: #8c8c8c;
pointer-events: none;
}
.post-editing-form form#import-post-gifs div.search-input input {
width: 100%;
border: none;
outline: 0;
background: transparent;
padding: 15px 15px 15px 50px;
}
.post-editing-form form#import-post-gifs .preview-video {
position: relative;
display: flex;
flex-direction: column;
transition: all 0.2s ease-in-out;
margin: 0px 15px 15px;
height: 330px;
box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.08);
}
.post-editing-form form#import-post-gifs .preview-video button {
position: absolute;
right: -10px;
top: -10px;
background: none;
border: none;
padding: 0px;
outline: 0;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease;
background-color: white;
border-radius: 50%;
}
.post-editing-form form#import-post-gifs .preview-video:hover button {
visibility: visible;
opacity: 1;
}
.post-editing-form form#import-post-gifs .preview-video button svg.feather {
margin-top: -1px;
width: 21px;
height: 21px;
fill: #2296f3;
}
.post-editing-form form#import-post-gifs .preview-video .fluid {
width: 100%;
height: inherit;
overflow: hidden;
background: #f9f9f9;
text-align: center;
}
.post-editing-form form#import-post-gifs .preview-video .fluid video {
width: auto;
height: 100%;
-o-object-fit: fill;
object-fit: fill;
cursor: pointer;
}
.post-editing-form form#import-post-gifs .content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-height: 330px;
overflow: hidden;
overflow-y: auto;
margin: 0px 15px 15px;
padding: 10px 10px;
transition: all 0.2s ease-in-out;
background: #f9f9f9;
box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.08);
}
.post-editing-form form#import-post-gifs .content .item {
-webkit-box-flex: 50%;
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
height: auto;
position: relative;
flex-grow: 1;
}
.post-editing-form form#import-post-gifs .content .item .preload {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #e9e9e9;
text-align: center;
display: flex;
}
.post-editing-form form#import-post-gifs .content .item .preload span {
border: 3px solid #cecece;
border-top: 3px solid #4993c1;
width: 35px;
height: 35px;
display: inline-block;
margin: auto;
}
.post-editing-form form#import-post-gifs .content .item video {
width: 100%;
height: 100%;
-o-object-fit: fill;
object-fit: fill;
cursor: pointer;
}
.post-editing-form form#add-story-from .story-file-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #7e7e7e;
max-width: 63%;
float: left;
margin-left: 10px;
}
.loader,
.post-editing-form form#import-post-gifs .content .item .preload span {
border-radius: 50%;
-webkit-animation: spin 0.5s linear infinite;
animation: spin 0.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes shake {
from,
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
10%,
30%,
50%,
70%,
90% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
20%,
40%,
60%,
80% {
-webkit-transform: translate3d(10px, 0, 0);
transform: translate3d(10px, 0, 0);
}
}
@keyframes cssload-spin {
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes cssload-spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/*Explorer Page*/
main.container-explore-main,
.container-lives-main {
max-width: 100% !important;
width: 100% !important;
padding: 0px;
}
main.container-go_pro {
max-width: 100% !important;
width: 100% !important;
padding: 0px;
}
main.container-blog-main {
max-width: 100% !important;
width: 100% !important;
padding: 0px;
}
.explore-page-container {
width: 100%;
overflow: hidden;
margin-top: 55px;
}
.explore-page-container .sub__header {
height: 170px;
position: relative;
background: linear-gradient(100deg, #3d3695, #953594 25%, #da2129);
}
.explore-page-container .sub__header div.container {
padding-top: 50px;
position: relative;
z-index: 12;
color: #fff;
}
.explore-page-container .sub__header div.container h4 {
margin: 0px;
font-family: "Open Sans", "Pretendard", sans-serif;
padding: 0;
font-size: 35px;
line-height: 55px;
font-weight: 600;
text-transform: capitalize;
}
.explore-page-container .sub__header div.container p {
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 18px;
line-height: 29px;
}
.explore-page-container .follow__suggestions-cr {
width: 100%;
overflow: hidden;
background: #fff;
border-top: 0;
padding: 5px 15px 20px;
position: relative;
border-radius: 8px;
box-shadow: 0 2px 6px 0 rgb(0 0 0 / 5%);
}
.explore-page-container .follow__suggestions-cr:hover .slick-prev,
.explore-page-container .follow__suggestions-cr:hover .slick-next {
visibility: visible;
opacity: 1;
}
.explore-page-container .follow__suggestions-cr:hover .slick-prev.slick-disabled,
.explore-page-container .follow__suggestions-cr:hover .slick-next.slick-disabled {
opacity: 0;
visibility: hidden;
}
.explore-page-container .follow__suggestions-cr .fluid h5 {
width: 100%;
overflow: hidden;
font-family: "Open Sans", "Pretendard", sans-serif;
color: #717171;
line-height: 18px;
font-size: 15px;
font-weight: 600;
}
.explore-page-container .follow__suggestions-cr .fluid h5 a {
color: #3897f0;
text-decoration: none;
transition: all 0.2s ease;
}
.explore-page-container .follow__suggestions-cr .fluid h5 a svg.feather {
margin: -2px 0px 0px -4px;
width: 17px;
height: 17px;
transition: transform 0.2s ease;
}
.explore-page-container .follow__suggestions-cr .fluid h5 a:hover {
color: #262626;
}
.explore-page-container .follow__suggestions-cr .fluid h5 a:hover svg.feather {
transform: translateX(2px);
}
.explore-page-container .slick-prev,
.explore-page-container .slick-next {
color: #efefef;
background: #676767;
visibility: hidden;
opacity: 0;
transition: all 0.2s linear;
}
.explore-page-container .slick-prev:hover,
.explore-page-container .slick-next:hover,
.explore-page-container .slick-prev:focus,
.explore-page-container .slick-next:focus {
color: #fff;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .slick-prev {
left: -10px;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .slick-next {
right: -10px;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .item {
text-align: center;
background: #f7f7f7;
border: 1px solid #000000;
border-radius: 10px;
padding: 20px 10px;
margin: 10px 10px 10px 5px;
display: inline-block;
outline: 0;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .item .avatar {
display: block;
margin: 0 auto 5px;
width: 100px;
height: 100px;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .item .avatar img {
width: 100%;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .item .uname {
padding: 5px 0;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .item .uname a {
display: block;
width: 100%;
color: #262626;
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 15px;
line-height: 18px;
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .item .uname span {
color: #999;
font-size: 14px;
line-height: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .item .button button {
border: 0 !important;
background: #f65599;
color: white;
margin-top: 3px;
padding: 7px 21px;
border-radius: 50rem;
font-size: 15px;
font-family: "Open Sans", "Pretendard", sans-serif;
outline: 0;
text-overflow: ellipsis;
overflow: hidden;
max-width: 80%;
white-space: nowrap;
background: linear-gradient(135deg, #f65599 0%, #d41767 100%);
transition: box-shadow 0.15s ease-in-out;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .item .button button:focus {
box-shadow: 0 0 0 0.2rem rgba(246, 85, 153, 0.25);
}
.explore-page-container .follow__suggestions-cr .owl-carousel .item .button button.btn-following {
background: #1dcc7d;
background: linear-gradient(45deg, #1dcc7d 0%, #19d9b4 100%);
color: #fff !important;
}
.explore-page-container .follow__suggestions-cr .owl-carousel .item .button button.btn-following:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 196, 118, 0.25) !important;
}
.explore-page-container .explore-posts-container {
width: 100%;
margin-top: 30px;
}
.explore-page-container .explore-posts-container .empty_state {
margin-top: 150px;
margin-bottom: 150px;
}
.explore-page-container .explore-posts-container .galcolumn:nth-child(1) div.wrapper {
padding-left: 0px;
}
.explore-page-container .explore-posts-container .galcolumn:nth-child(3) div.wrapper {
padding-right: 0px;
}
.explore-page-container .explore-posts-container div.wrapper {
padding: 0px 10px;
margin-bottom: 20px !important;
}
.explore-page-container .explore-posts-container .explore-postset {
background: #fff;
font-family: "Open Sans", "Pretendard", sans-serif;
transition: box-shadow 0.35s ease-out;
overflow: hidden;
box-shadow: 0 0px 5px rgba(0, 9, 128, 0.05), 0 4px 10px rgba(0, 9, 128, 0.035);
cursor: pointer;
border-radius: 10px;
}
.explore-page-container .explore-posts-container .explore-postset:hover {
box-shadow: 0 12px 22px rgba(97, 97, 97, 0.05), 0 20px 36px rgba(136, 136, 136, 0.075);
}
.explore-page-container .explore-posts-container .explore-postset .image {
overflow: hidden;
width: 100%;
height: 325px;
background-size: cover;
background-position: center;
position: relative;
}
.explore-page-container .explore-posts-container .explore-postset .image:hover .caption {
visibility: visible;
transition: all 0.2s ease;
opacity: 1;
}
.explore-page-container .explore-posts-container .explore-postset .image .category {
position: absolute;
right: 15px;
top: 15px;
z-index: 1;
}
.explore-page-container .explore-posts-container .explore-postset .image .category svg.feather {
fill: rgba(255, 255, 255, 0.65);
margin-top: 0px;
width: 30px;
height: 30px;
}
.explore-page-container .explore-posts-container .explore-postset .image .play-btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 9;
visibility: hidden;
}
.explore-page-container .explore-posts-container .explore-postset .image .play-btn svg.feather {
fill: rgba(255, 255, 255, 0.8);
margin-top: 0px;
width: 60px;
height: 60px;
}
.explore-page-container .explore-posts-container .explore-postset .image:hover .play-btn {
visibility: visible;
opacity: 1;
}
.explore-page-container .explore-posts-container .explore-postset .image b.promoted_postt,
.explore-page-container .explore-posts-container .explore-postset .image b.locked_postt {
position: absolute;
margin: 10px;
border-radius: 2em;
font-size: 12px;
padding: 0 10px;
line-height: 26px;
background-color: rgb(0 0 0 / 60%);
color: white;
}
.explore-page-container .explore-posts-container .explore-postset .image b.promoted_postt svg,
.explore-page-container .explore-posts-container .explore-postset .image b.locked_postt svg {
width: 16px;
height: 16px;
margin: -3px 0 0;
}
.explore-page-container .explore-posts-container .explore-postset .image b.promoted_postt {
background-color: #ff7346;
}
.explore-page-container .explore-posts-container .explore-postset .image .caption {
position: absolute;
left: 0px;
width: 100%;
bottom: 0;
top: 0;
color: #fff;
z-index: 1;
visibility: hidden;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: flex-end;
transition: all 0.2s ease;
opacity: 0;
}
.explore-page-container .explore-posts-container .explore-postset .image .caption > div {
width: 100%;
padding: 20px 15px 10px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
}
.explore-page-container .explore-posts-container .explore-postset .image .caption .user__ {
width: 100%;
overflow: hidden;
display: inline-block;
}
.explore-page-container .explore-posts-container .explore-postset .image .caption .user__ img {
width: 40px !important;
height: 40px !important;
float: left;
}
.explore-page-container .explore-posts-container .explore-postset .image .caption .user__ a {
color: #fff;
display: block;
margin-left: 50px;
margin-top: 0px;
font-weight: 600;
font-size: 13px;
}
.explore-page-container .explore-posts-container .explore-postset .image .caption span {
color: #fff;
font-size: 15px;
margin: 0px 7px 0px 10px;
}
.explore-page-container .explore-posts-container .explore-postset .image .caption span:last-child {
margin: 0;
}
.explore-page-container .explore-posts-container .explore-postset .image .caption span svg.feather {
margin-top: -2px;
width: 16px;
height: 16px;
}
.explore-page-container .explore-people-container {
width: 100%;
margin-top: 25px;
}
.explore-page-container .explore-people-container .subh {
width: 100%;
overflow: hidden;
}
.explore-page-container .explore-people-container .subh h5 {
padding: 0;
margin: 15px 0;
font-size: 15px;
line-height: 18px;
color: #717171;
font-weight: 600;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.explore-page-container .explore-people-container .people {
margin: 0;
}
.explore-page-container .explore-people-container .people .explore-people__item {
background: #fff;
padding: 10px;
overflow: hidden;
box-shadow: 0 0 0px 1px #e7e7e7;
position: relative;
}
.explore-page-container .explore-people-container .people .explore-people__item .avatar img {
width: 104px;
height: 104px;
box-sizing: border-box;
}
.explore-page-container .explore-people-container .people .explore-people__item .user__info {
text-align: center;
}
.explore-page-container .explore-people-container .people .explore-people__item .user__info h5 {
padding: 0;
margin: 0;
color: rgba(0, 0, 0, 0.9);
font-size: 16px;
line-height: 22px;
margin-top: 6px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.explore-page-container .explore-people-container .people .explore-people__item .user__info a {
color: inherit;
}
.explore-page-container .explore-people-container .people .explore-people__item .user__info .user__stat {
display: inline-block;
overflow: hidden;
padding-top: 8px;
}
.explore-page-container .explore-people-container .people .explore-people__item .user__info .user__stat span {
overflow: hidden;
float: left;
text-align: center;
color: #687a86;
line-height: 0;
}
.explore-page-container .explore-people-container .people .explore-people__item .user__info .user__stat span:first-child {
margin-right: 25px;
}
.explore-page-container .explore-people-container .people .explore-people__item .user__info .user__stat span b {
font-size: 14px;
line-height: 18px;
color: #262626;
font-weight: 500;
}
.explore-page-container .explore-people-container .people .explore-people__item .user__info .user__stat span small {
width: 100%;
display: inline-block;
font-size: 12px;
line-height: 12px;
}
.explore-page-container .explore-people-container .people .explore-people__item .user__info button.btn-info {
padding: 7px 21px;
margin-top: 20px;
box-shadow: none;
color: #fff;
border-radius: 50rem;
font-size: 15px;
font-family: "Open Sans", "Pretendard", sans-serif;
background: linear-gradient(135deg, #f65599 0%, #d41767 100%);
transition: box-shadow 0.15s ease-in-out;
border: 0;
font-weight: 400;
}
.explore-page-container .explore-people-container .people .explore-people__item .user__info button.btn-following {
background: #1dcc7d;
background: linear-gradient(45deg, #1dcc7d 0%, #19d9b4 100%);
color: #fff !important;
}
/*User Profile Page*/
.user-profile-page-content {
width: 100%;
overflow: hidden;
margin-top: 55px;
}
.user-profile-page-content .user-heading {
width: 100%;
position: relative;
}
.user-profile-page-content .user-heading:before,
.pro_user_new_profile .user-heading:before {
background-position: center;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 100px;
z-index: -1;
background-size: cover;
background-repeat: no-repeat;
}
.user-profile-page-content .user-heading:after,
.pro_user_new_profile .user-heading:after {
display: block;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(rgb(247 247 247 / 20%), #f7f7f7 80%, #f7f7f7 100%);
backdrop-filter: blur(50px);
}
.user-profile-page-content .user-heading div.user-info-prnt {
z-index: 9;
position: relative;
margin-top: 100px;
}
.user-profile-page-content .user-heading div.user-info {
display: flex;
align-items: center;
}
.user-profile-page-content .user-heading div.user-info .avatar {
width: 150px;
height: 150px;
position: relative;
}
.user-profile-page-content .user-heading div.user-info .avatar img {
width: 150px;
height: 150px;
}
.user-profile-page-content .user-heading div.user-info .info {
margin-left: 20px;
height: auto;
padding: 0px 0px 10px 10px;
}
.user-profile-page-content .user-heading div.user-info .uname {
width: 100%;
position: relative;
z-index: 9;
margin-bottom: 5px;
}
.user-profile-page-content .user-heading div.user-info .uname a {
text-decoration: none;
color: inherit;
}
.user-profile-page-content .user-heading div.user-info .uname a h4 {
margin: 0px;
padding: 0px;
font-size: 32px;
line-height: 40px;
display: inline-block;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.user-profile-page-content .user-heading div.user-info .uname div.modal-menu {
margin-left: 15px;
display: inline-block;
vertical-align: bottom;
cursor: pointer;
padding: 5px;
border-radius: 50%;
height: 36px;
width: 36px;
}
.user-profile-page-content .user-heading div.user-info .uname div.modal-menu svg.feather {
margin-top: 0px;
width: 26px;
height: 26px;
}
.user-profile-page-content .user-heading div.user-info .uname div.modal-menu.open {
background-color: rgba(0, 0, 0, 0.2);
}
.user-profile-page-content .user-heading div.user-info .uname div.modal-menu .dropdown-menu {
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 2px;
padding: 8px 0;
right: 0;
left: auto;
}
.user-profile-page-content .user-heading div.user-info .uname div.modal-menu .dropdown-menu li {
min-height: 42px;
height: 42px;
}
.user-profile-page-content .user-heading div.user-info .uname div.modal-menu .dropdown-menu li a {
padding: 11px 16px;
font-family: "Open Sans", "Pretendard", sans-serif;
height: 42px;
}
.user-profile-page-content .social-links {
width: 100%;
overflow: hidden;
float: left;
margin: 0;
}
.user-profile-page-content .social-links li {
margin: 15px 12px 15px 0px;
}
.user-profile-page-content .social-links li.btn-social a {
background-color: #f3f3f3;
width: 28px;
height: 28px;
text-align: center;
border-radius: 50%;
padding: 3px 0;
border: 1px solid #fff;
}
.user-profile-page-content .social-links li.btn-website a {
font-weight: 500;
color: #f3f3f3;
font-size: 13px;
line-height: 23px;
border: 1px solid #f3f3f3;
border-radius: 4px;
height: 28px;
padding: 0px 10px;
transition: all 0.1s ease-in-out;
background-color: #eeeeee;
color: #000;
}
.user-profile-page-content .social-links li.btn-website a svg.feather {
margin: -2px 4px 0px 0px;
width: 17px;
height: 17px;
fill: #000;
}
.user-profile-page-content .user-heading div.user-info .status {
font-size: 15px;
margin-bottom: 0px;
}
.user-profile-page-content .user-heading div.user-info .btn,
.error_unblock,
.pro_user_new_profile .user-info .btn {
margin: 15px 13px 0 0;
padding: 6px 25px;
font-weight: normal;
font-size: 14px;
font-family: "Open Sans", "Pretendard", sans-serif;
border: 0;
transition: all 0.3s;
height: 37px;
border-radius: 2em;
}
.user-profile-page-content .user-heading div.user-info .btn {
box-shadow: none;
border-radius: 10px;
font-weight: 500;
font-family: "Open Sans", "Pretendard", sans-serif;
padding: 9px 20px;
height: 40px;
}
.user-profile-page-content .user-heading div.user-info .btn svg.feather,
.error_unblock svg.feather,
.pro_user_new_profile .user-info .btn svg.feather {
margin: -3px 2px 0px 0px;
width: 17px;
height: 17px;
}
.user-profile-page-content .user-heading div.user-info .btn:hover,
.error_unblock:hover,
.pro_user_new_profile .user-info .btn:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}
.user-profile-page-content .user-heading div.user-info .btn-info,
.pro_user_new_profile .user-info .btn-info {
background-color: #00bcd4;
}
.user-profile-page-content .user-heading div.user-info .btn-follow,
.pro_user_new_profile .user-info .btn-follow {
background-color: #2cb99a;
color: #fff;
}
.user-profile-page-content .user-heading div.user-info .btn-message,
.pro_user_new_profile .user-info .btn-message {
background-color: rgb(0 0 0 / 15%);
color: #222;
}
.user-profile-page-content .user-heading div.user-info .btn-unblock,
.error_unblock,
.pro_user_new_profile .user-info .btn-unblock {
background-color: #ef8e00;
}
.user-profile-page-content .user-heading div.user-info .btn-following,
.pro_user_new_profile .user-info .btn-following {
background-color: #292929 !important;
color: #fff !important;
}
.user-profile-page-content .user-heading div.user-info .btn-requested,
.pro_user_new_profile .user-info .btn-requested {
background-color: #535353 !important;
color: #fff !important;
}
.user-profile-page-content .user-heading div.user-info .btn_links,
.pro_user_new_profile .user-info .btn_links {
color: #222;
text-decoration: none;
line-height: 24px;
}
.user-profile-page-content .user-heading div.user-info .btn_links.btn-info {
color: #fff;
}
.user-profile-page-content .navbar-bottom {
margin-top: 35px;
}
.user-profile-page-content .navbar-bottom ul.navbar-nav {
display: block;
width: 100%;
float: none;
margin: 0;
white-space: nowrap;
overflow-x: auto;
text-align: center;
}
.user-profile-page-content .navbar-bottom ul.navbar-nav li {
float: none;
display: inline-block;
}
.user-profile-page-content .navbar-bottom ul.navbar-nav li:last-child a.nav__item {
margin: 0;
}
.user-profile-page-content .navbar-bottom ul.navbar-nav li a.nav__item {
font-size: 16px;
font-weight: 500;
text-align: center;
color: #2d2d2d;
text-decoration: none;
padding: 18px 26px;
transition: all 0.1s ease;
cursor: pointer;
}
.user-profile-page-content .navbar-bottom ul.navbar-nav li.active a.nav__item,
.user-profile-page-content .navbar-bottom ul.navbar-nav li a.nav__item:hover {
box-shadow: inset 0 -3px 0 0 #4236dd;
color: #4236dd;
text-decoration: none;
}
.user-profile-page-content .user-posts,
.new_prof_user_posts {
width: 100%;
padding-top: 30px;
margin-top: 10px;
}
.user-profile-page-content .user-posts .galcolumn:nth-child(1) div.wrapper,
.new_prof_user_posts .galcolumn:nth-child(1) div.wrapper {
padding-left: 0px;
}
.user-profile-page-content .user-posts .galcolumn:nth-child(3) div.wrapper {
padding-right: 0px;
}
.new_prof_user_posts .galcolumn:nth-child(2) div.wrapper {
padding-right: 0px;
}
.user-profile-page-content .user-posts:empty,
.new_prof_user_posts:empty {
padding-top: 0px;
border-top: none;
}
.user-profile-page-content .user-posts div.wrapper,
.new_prof_user_posts div.wrapper {
padding: 0px 10px;
margin-bottom: 20px !important;
cursor: pointer;
}
.user-profile-page-content .user-posts .user-postset:not(.portfolio-item),
.new_prof_user_posts .user-postset:not(.portfolio-item) {
background: #fff;
font-family: "Open Sans", "Pretendard", sans-serif;
transition: box-shadow 0.35s ease-out;
overflow: hidden;
box-shadow: 0 0px 5px rgba(0, 9, 128, 0.05), 0 4px 10px rgba(0, 9, 128, 0.035);
cursor: pointer;
}
.user-profile-page-content .user-posts .user-postset:not(.portfolio-item):hover,
.new_prof_user_posts .user-postset:not(.portfolio-item):hover {
box-shadow: 0 12px 22px rgba(97, 97, 97, 0.05), 0 20px 36px rgba(136, 136, 136, 0.075);
}
.user-profile-page-content .user-posts .user-postset:not(.portfolio-item) .media,
.new_prof_user_posts .user-postset:not(.portfolio-item) .media {
overflow: hidden;
width: 100%;
height: 290px;
background-position: center;
background-size: cover;
position: relative;
}
.user-profile-page-content .user-posts .user-postset:not(.portfolio-item) .media:hover .caption,
.new_prof_user_posts .user-postset:not(.portfolio-item) .media:hover .caption {
visibility: visible;
transition: all 0.2s ease;
opacity: 1;
}
.user-profile-page-content .user-posts .user-postset:not(.portfolio-item) .media .caption,
.new_prof_user_posts .user-postset:not(.portfolio-item) .media .caption {
position: absolute;
left: 0px;
width: 100%;
bottom: 0;
top: 0;
color: #fff;
z-index: 1;
visibility: hidden;
background: rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
opacity: 0;
}
.user-profile-page-content .user-posts .user-postset:not(.portfolio-item) .media .caption span svg.feather,
.new_prof_user_posts .user-postset:not(.portfolio-item) .media .caption span svg.feather {
margin: -3px 3px 0px 0px;
color: rgba(255, 255, 255, 0.85);
fill: rgba(255, 255, 255, 0.85);
}
.user-profile-page-content .user-posts .user-postset:not(.portfolio-item) .media .category,
.new_prof_user_posts .user-postset:not(.portfolio-item) .media .category {
position: absolute;
right: 15px;
top: 15px;
z-index: 1;
}
.user-profile-page-content .user-posts .user-postset:not(.portfolio-item) .media .category svg.feather,
.new_prof_user_posts .user-postset:not(.portfolio-item) .media .category svg.feather {
fill: rgba(255, 255, 255, 0.65);
margin-top: 0px;
width: 30px;
height: 30px;
}
/*.user-profile-page-content .following--ls, .user-profile-page-content .followers--ls, .prof_new_look_posts .followers--ls, .prof_new_look_posts .following--ls {width: 100%;margin: 20px 0; }*/
.user-profile-page-content .following--ls .following--ls__item,
.user-profile-page-content .followers--ls .followers--ls__item,
.prof_new_look_posts .followers--ls .followers--ls__item,
.prof_new_look_posts .following--ls .following--ls__item {
background: #fff;
padding: 25px;
overflow: hidden;
box-shadow: 0 0 0px 1px #e7e7e7;
position: relative;
}
.user-profile-page-content .following--ls .following--ls__item .avatar img,
.user-profile-page-content .followers--ls .followers--ls__item .avatar img,
.prof_new_look_posts .followers--ls .followers--ls__item .avatar img,
.prof_new_look_posts .following--ls .following--ls__item .avatar img {
width: 104px;
height: 104px;
box-sizing: border-box;
}
.user-profile-page-content .following--ls .following--ls__item .user__info,
.user-profile-page-content .followers--ls .followers--ls__item .user__info,
.prof_new_look_posts .followers--ls .followers--ls__item .user__info,
.prof_new_look_posts .following--ls .following--ls__item .user__info {
text-align: center;
}
.user-profile-page-content .following--ls .following--ls__item .user__info a,
.user-profile-page-content .followers--ls .followers--ls__item .user__info a,
.prof_new_look_posts .followers--ls .followers--ls__item .user__info a,
.prof_new_look_posts .following--ls .following--ls__item .user__info a {
color: inherit;
}
.user-profile-page-content .following--ls .following--ls__item .user__info h5,
.user-profile-page-content .followers--ls .followers--ls__item .user__info h5,
.prof_new_look_posts .followers--ls .followers--ls__item .user__info h5,
.prof_new_look_posts .following--ls .following--ls__item .user__info h5 {
padding: 0;
margin: 0;
color: rgba(0, 0, 0, 0.9);
font-size: 16px;
line-height: 22px;
margin-top: 10px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.user-profile-page-content .following--ls .following--ls__item .user__info p,
.user-profile-page-content .followers--ls .followers--ls__item .user__info p,
.prof_new_look_posts .followers--ls .followers--ls__item .user__info p,
.prof_new_look_posts .following--ls .following--ls__item .user__info p {
font-size: 12px;
margin: 0;
}
.user-profile-page-content .following--ls .following--ls__item .user__info button.btn-info,
.user-profile-page-content .followers--ls .followers--ls__item .user__info button.btn-info,
.prof_new_look_posts .followers--ls .followers--ls__item .user__info button.btn-info,
.prof_new_look_posts .following--ls .following--ls__item .user__info button.btn-info {
padding: 7px 21px;
margin-top: 15px;
box-shadow: none;
color: #fff;
border-radius: 50rem;
font-size: 15px;
font-family: "Open Sans", "Pretendard", sans-serif;
background: linear-gradient(135deg, #f65599 0%, #d41767 100%);
transition: box-shadow 0.15s ease-in-out;
border: 0;
font-weight: 400;
}
.user-profile-page-content .following--ls .following--ls__item .user__info button.btn-following,
.user-profile-page-content .followers--ls .followers--ls__item .user__info button.btn-following,
.prof_new_look_posts .followers--ls .followers--ls__item .user__info button.btn-following,
.prof_new_look_posts .following--ls .following--ls__item .user__info button.btn-following {
background: #1dcc7d;
background: linear-gradient(45deg, #1dcc7d 0%, #19d9b4 100%);
color: #fff !important;
}
.user-profile-page-content .profile-blocked,
.user-profile-page-content .private-profile {
margin: 50px auto 70px;
text-align: center;
}
.user-profile-page-content .profile-blocked h4,
.user-profile-page-content .private-profile h4 {
font-size: 25px;
color: #262626;
}
.user-profile-page-content .profile-blocked p,
.user-profile-page-content .private-profile p {
line-height: 18px;
}
.prof_users_list {
display: flex;
align-items: center;
padding: 15px 5px !important;
margin: 20px 0 10px;
box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px, rgb(0 0 0 / 10%) 0px 2px 4px -2px !important;
border-radius: 10px;
}
.prof_users_list .avatar {
flex: 0 0 auto;
padding: 0 12px;
}
.prof_users_list .avatar img.img-circle {
width: 90px !important;
height: 90px !important;
border-radius: 10px;
}
.prof_users_list .user__info {
text-align: inherit !important;
display: inline-flex;
justify-content: space-between;
width: 100%;
padding: 0 12px;
max-width: calc(100% - 130px);
align-items: center;
}
.prof_users_list .user__info > div {
min-width: 0;
}
.prof_users_list .user__info > .btn {
margin: 0 !important;
}
.prof_users_list .user__info h5 {
margin: 0 !important;
font-size: 20px !important;
line-height: normal !important;
}
/*Post Lightbox*/
.light__box {
position: fixed;
left: 0px;
right: 0px;
bottom: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1000;
}
.light__box .lightbox-ol {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgb(0 0 0 / 50%);
}
.light__box .lightbox-outer {
width: 100%;
height: 100%;
display: flex;
position: relative;
padding: 0 40px;
min-height: 100%;
overflow: auto;
flex-direction: column;
}
.light__box .lightbox-outer::after,
.light__box .lightbox-outer::before {
content: "";
display: block;
-webkit-flex-basis: 40px;
-ms-flex-preferred-size: 40px;
flex-basis: 40px;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.light__box .lightbox-outer .lightbox-inner {
width: 100%;
min-width: 980px;
height: auto;
min-height: 0;
max-height: calc(100vh - 120px);
margin: auto;
background: #fff;
max-width: 80%;
border-radius: 10px;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
}
.light__box .lightbox-outer .lightbox-inner .copyPostlink {
position: absolute;
left: -999999999px;
}
.light__box .lightbox-outer .lightbox-inner .pp_mobi_light_control {
display: none;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.75));
height: 48px;
padding: 14px;
color: white;
background-color: rgba(0, 0, 0, 0.75);
}
.light__box .lightbox-outer .lightbox-inner .pp_mobi_light_control .light__box-slide-controls {
color: white;
margin-right: 30px;
text-decoration: none;
}
.light__box .lightbox-outer .lightbox-inner .post-data {
width: 100%;
min-height: 0;
max-height: min(700px, calc(100vh - 120px));
height: min(700px, calc(100vh - 120px));
display: flex;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer {
/*height: 100%;*/
max-height: min(700px, calc(100vh - 120px));
height: 100%;
overflow: hidden;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 10px 0px 0px 10px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .pp_mobi_light_embed {
width: 100%;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade {
width: 100%;
overflow: hidden;
position: relative;
height: 100%;
touch-action: pan-y;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade .carousel-inner {
height: 100%;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade .carousel-inner .item {
height: 100%;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade a.cr-controls {
position: absolute;
top: 50%;
display: flex;
z-index: 100;
text-align: center;
transition: all 0.2s ease-in-out;
transform: translateY(-50%);
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
pointer-events: auto;
opacity: 1;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade a.cr-controls span {
padding: 7px 0;
width: 40px;
height: 40px;
background: #676767;
border-radius: 50%;
position: relative;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade a.cr-controls span svg.feather {
color: #e5e5e5;
margin-top: 0px;
width: 24px;
height: 24px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade a.cr-controls.carousel-control-prev {
left: 12px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade a.cr-controls.carousel-control-next {
right: 12px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade:hover .carousel-control-prev {
left: 10px !important;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade:hover .carousel-control-next {
right: 10px !important;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .afterglow {
max-height: 700px !important;
width: 100%;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .afterglow.vjs-fullscreen {
max-height: 100% !important;
width: 100%;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer video {
max-height: 100% !important;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer img {
width: auto;
max-width: 100%;
min-width: 0;
min-height: 0;
height: auto;
max-height: 100%;
object-fit: contain;
margin: auto;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer > img {
width: auto;
max-width: 100%;
max-height: 100%;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer iframe {
width: 650px;
height: 335px !important;
border: none;
background-size: cover;
background-position: center;
min-width: 100% !important;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes {
background: #fff;
max-width: 420px;
min-width: 420px;
position: relative;
border-radius: 0px 10px 10px 0px;
overflow: hidden;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner {
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-flow: column;
overflow: hidden;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .heading {
overflow: hidden;
display: flex;
padding: 13px 15px 12px;
background: #fff;
align-items: center;
position: relative;
min-height: 65px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .heading .avatar {
width: 40px;
height: 40px;
overflow: hidden;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .heading .avatar img {
width: 100%;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .heading .uname {
margin-left: 10px;
overflow: hidden;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .heading .uname h6 {
padding: 0px;
margin: 0px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .heading .uname h6 a {
color: #262626;
font-size: 15px;
line-height: 18px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .heading .uname span {
display: block;
font-size: 12px;
line-height: 15px;
color: #515151;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .heading #lb-follow {
color: #4caf50;
background-color: rgb(76 175 80 / 20%);
padding: 10px;
border-radius: 50%;
margin-left: auto;
cursor: pointer;
transition: all 0.15s ease;
line-height: 1;
border: 1px solid #4caf50;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .heading #lb-follow svg.feather {
margin-top: 0;
width: 18px;
height: 18px;
fill: currentColor;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .heading #lb-follow.active {
background-color: #4caf50;
color: #fff;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .pp_light_caption {
padding: 16px 15px 12px;
background: #fff;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
position: relative;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .pp_light_caption .post-title,
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .pp_light_caption h2.post-title {
color: #3c4043;
margin: 0 0 10px;
padding: 0;
font-size: 32px;
line-height: 1.25;
font-weight: 600;
font-family: "Poppins", "Open Sans", "Noto Sans KR", sans-serif;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .pp_light_caption .post-body,
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .pp_light_caption p[data-caption] {
color: #4c404d;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.55;
font-weight: 400;
font-family: "Open Sans", "Noto Sans KR", sans-serif;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments {
width: 100%;
overflow-y: auto;
-webkit-flex: 1 auto;
-ms-flex: 1 auto;
flex: 1 auto;
flex-grow: 1;
background-color: #fff;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments::-webkit-scrollbar-track {
background-color: #fff;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments::-webkit-scrollbar {
width: 5px;
background-color: #ededed;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments::-webkit-scrollbar-thumb {
background-color: #cdcdcd;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments .pp_light_comm_count {
margin: 7px 0;
padding: 4px 40px 0 15px;
display: block;
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 13px;
font-weight: 500;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul {
width: 100%;
list-style: none;
padding: 0px;
margin: 0px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li {
width: 100%;
padding: 15px 40px 5px 15px;
word-wrap: break-word;
position: relative;
border-top: 1px solid rgb(0 0 0 / 8%);
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li .user-avatar {
display: inline-block;
float: left;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li .user-avatar img {
width: 30px;
height: 30px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li .pp_com_body {
margin-left: 38px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li .pp_com_body span {
background-color: #fff;
border: 1px solid #eee;
padding: 7px 10px;
border-radius: 18px;
display: inline-block;
line-height: 18px;
color: #555555;
position: relative;
padding-right: 30px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li .pp_com_body strong {
color: #262626;
font-weight: 600;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li strong a {
font-weight: 600;
text-decoration: none;
color: #262626;
margin: 0px 5px 0px 0px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li a.hashtag,
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li a.mention {
color: #003569;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li .delcomment {
color: #c7c7c7;
cursor: pointer;
right: 10px;
top: 5px;
position: absolute;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments ul li .delcomment:hover {
color: #222;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box {
width: 100%;
padding: 0px 15px;
background: #fff;
flex: 0 0 auto;
vertical-align: bottom;
box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.05);
position: relative;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes {
padding-top: 10px;
width: 100%; /*overflow: hidden;*/
display: flex;
align-items: center;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span {
overflow: hidden;
font-weight: 500;
color: #616770;
padding: 0;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span[data-post-likes],
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes b[data-post-likes],
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span:has([data-post-likes]) {
font-weight: 600;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-copy-post {
margin-left: 10;
margin-right: 13px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-copy-post svg.feather {
width: 23px;
height: 23px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span svg.feather {
color: #616770;
width: 25px;
height: 25px;
margin-top: 0px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post {
margin-right: 5px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active svg.feather {
color: #ed4856;
fill: #ed4856;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-save-post.active svg.feather {
color: #ff9800;
fill: #ff9800;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes #lb-embed-post {
margin-left: auto;
margin-right: 10px;
position: relative;
cursor: pointer;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes .pp-beautyk-vote {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 0;
cursor: pointer;
flex-shrink: 0;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes .pp-beautyk-vote .pp-beautyk-icon {
position: relative;
display: inline-flex;
width: 23px;
height: 23px;
align-items: center;
justify-content: center;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes .pp-beautyk-vote svg.feather-info {
width: 23px;
height: 23px;
color: #616770;
margin-top: 0;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes .pp-beautyk-vote.is-empty {
cursor: default;
opacity: 0.7;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes .pp-beautyk-vote.is-empty svg.feather-info {
color: #9aa0a6;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes .pp-beautyk-vote.is-empty .pp-beautyk-icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 26px;
height: 2px;
background: currentColor;
color: #9aa0a6;
transform: translate(-50%, -50%) rotate(-45deg);
border-radius: 1px;
pointer-events: none;
}
/* lightbox beautyk styles moved to portfolio-attributes */
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes #lb-embed-post svg.feather {
width: 23px;
height: 23px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes #lb-embed-post .dropdown-menu {
padding: 6px 0;
margin: 6px 0;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes #lb-embed-post .dropdown-menu li a {
color: #595959;
font-size: 13px;
line-height: 16px;
font-weight: 600;
text-decoration: none;
padding: 10px 15px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .text-input {
width: 100%;
padding: 0px;
position: relative;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .text-input .commenting-overlay {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
text-align: center;
opacity: 0.6;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .text-input .commenting-overlay #pp_loader {
display: block;
float: none;
padding: 13.4px 15px;
margin-top: 5px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .text-input input {
border: none;
box-shadow: none;
height: 50px;
color: #262626;
font-size: 13px;
line-height: 16px;
padding-left: 0px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .text-input .emojionearea.emojionearea-inline {
margin: 8px 0;
box-shadow: none;
background-color: #fff;
border: 1px solid #2250fc;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .text-input .emojionearea .emojionearea-editor,
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .text-input input {
background-color: #fff;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .text-input .login-2comment {
width: 100%;
height: 50px;
font-size: 14px;
color: #777;
padding: 14px 0;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .text-input .login-2comment a {
font-weight: 600;
}
.light__box .lightbox-outer .lightbox-inner .post-data .pp_light_close {
position: fixed;
top: 15px;
right: 15px;
cursor: pointer;
padding: 10px;
z-index: 30001;
background-color: white;
border-radius: 50%;
line-height: 1;
}
.light__box .lightbox-outer .lightbox-inner .post-data .light__box-slide-controls {
margin-top: auto;
position: fixed;
top: 0;
padding: 0px 10px;
height: 100%;
display: flex;
color: #fff;
z-index: 3000;
}
.light__box .lightbox-outer .lightbox-inner .post-data .light__box-slide-controls span {
margin: auto;
background-color: rgb(0 0 0 / 80%);
border-radius: 50%;
padding: 5px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .light__box-slide-controls span svg.feather {
margin-top: 0;
width: 30px;
height: 30px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .light__box-slide-controls.next {
right: 10px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .light__box-slide-controls.prev {
left: 10px;
}
.btn-following {
border: 1px solid #9da6af;
background-color: transparent;
color: #262626;
}
/*Home Follow Sugg*/
.follow-suggestions-cr {
width: 100%;
background: #fff;
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
border: 1px solid #000000;
-webkit-box-shadow: none;
box-shadow: none;
}
.follow-suggestions-cr div.fluid h5 {
margin: 15px 15px 0 15px;
overflow: hidden;
font-weight: 600;
color: #515151;
font-size: 15px;
line-height: 18px;
}
.follow-suggestions-cr div.fluid h5 a {
color: #3897f0;
text-decoration: none;
transition: all 0.2s ease;
}
.follow-suggestions-cr div.fluid h5 a svg.feather {
margin: -3px 0px 0px -4px;
width: 17px;
height: 17px;
transition: transform 0.2s ease;
}
.follow-suggestions-cr div.fluid h5 a:hover {
color: #262626;
}
.follow-suggestions-cr div.fluid h5 a:hover svg.feather {
transform: translateX(2px);
}
.follow-suggestions-cr .cr-wrapper {
width: 100%;
overflow-y: hidden;
position: relative;
}
.follow-suggestions-cr .cr-wrapper .owl-carousel {
padding: 15px;
}
.follow-suggestions-cr .cr-wrapper .owl-carousel .item {
text-align: center;
background: #fff;
border: 1px solid #000000;
box-shadow: none;
border-radius: 9px;
padding: 10px 10px;
margin: 10px 8px 10px 5px;
display: inline-block;
outline: 0;
}
.follow-suggestions-cr .cr-wrapper .owl-carousel .item .avatar {
display: block;
margin: 0 auto 5px;
width: 80px;
height: 80px;
}
.follow-suggestions-cr .cr-wrapper .owl-carousel .item .avatar img {
width: 100%;
}
.follow-suggestions-cr .cr-wrapper .owl-carousel .item .uname {
padding: 5px 0;
}
.follow-suggestions-cr .cr-wrapper .owl-carousel .item .uname a {
display: block;
width: 100%;
color: #262626;
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 15px;
line-height: 18px;
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.follow-suggestions-cr .cr-wrapper .owl-carousel .item .uname span {
color: #999;
font-size: 14px;
line-height: 18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
.follow-suggestions-cr .cr-wrapper .owl-carousel .item .button button {
border: 0 !important;
background: #f65599;
color: white;
margin-top: 3px;
padding: 7px 21px;
border-radius: 50rem;
font-size: 15px;
font-family: "Open Sans", "Pretendard", sans-serif;
outline: 0;
text-overflow: ellipsis;
overflow: hidden;
max-width: 80%;
white-space: nowrap;
background: linear-gradient(135deg, #f65599 0%, #d41767 100%);
transition: box-shadow 0.15s ease-in-out;
}
.follow-suggestions-cr .cr-wrapper .owl-carousel .item .button button:focus {
box-shadow: 0 0 0 0.2rem rgba(246, 85, 153, 0.25);
}
.follow-suggestions-cr .cr-wrapper .owl-carousel .item .button button.btn-following {
background: #1dcc7d;
background: linear-gradient(45deg, #1dcc7d 0%, #19d9b4 100%);
color: #fff !important;
}
.follow-suggestions-cr .cr-wrapper .owl-carousel .item .button button.btn-following:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 196, 118, 0.25) !important;
}
.follow-suggestions-cr .cr-wrapper .slick-prev,
.follow-suggestions-cr .cr-wrapper .slick-next {
color: #efefef;
background: #676767;
visibility: hidden;
opacity: 0;
transition: all 0.2s linear;
}
.follow-suggestions-cr .cr-wrapper .slick-next {
right: 10px;
}
.follow-suggestions-cr .cr-wrapper .slick-prev {
left: 10px;
}
.follow-suggestions-cr .cr-wrapper:hover .slick-prev,
.follow-suggestions-cr .cr-wrapper:hover .slick-next {
visibility: visible;
opacity: 1;
}
.follow-suggestions-cr .cr-wrapper:hover .slick-prev.slick-disabled,
.follow-suggestions-cr .cr-wrapper:hover .slick-next.slick-disabled {
opacity: 0;
visibility: hidden;
}
/*Message Page*/
.container-messages {
max-width: 1120px;
position: relative;
}
.body-messages {
overflow-x: hidden;
background-image: none !important;
background: #fff !important;
}
.messages-container {
width: 100%;
height: 90vh;
min-height: 500px;
margin-top: 70px;
}
.messages-container .header-composition {
width: 100%;
min-height: 56px;
max-height: 56px;
margin-bottom: 20px;
background: #fff;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
border-radius: 7px;
}
.messages-container .header-composition .privacy-settings {
width: 100%;
height: 100%;
overflow: hidden;
padding: 16.2px 17px;
}
.messages-container .header-composition .privacy-settings span {
font-weight: 500;
font-size: 22px;
line-height: 1.1;
margin-top: -3px;
display: inline-block;
}
.messages-container .header-composition .privacy-settings a {
float: right;
color: #66757f;
}
.messages-container .header-composition .interlocutor-info {
display: flex;
height: 100%;
}
.messages-container .header-composition .interlocutor-info .mobile_msg_close {
display: none;
cursor: pointer;
margin: 15px 10px;
width: 23px;
height: 23px;
stroke-width: 2.5px;
}
.messages-container .header-composition .interlocutor-info .left {
display: flex;
padding: 10px 0px;
max-height: 55px;
}
.messages-container .header-composition .interlocutor-info .left .avatar {
width: 35px;
height: 35px;
min-width: 35px;
}
.messages-container .header-composition .interlocutor-info .left .avatar img {
width: 100%;
}
.messages-container .header-composition .interlocutor-info .left .uname {
margin-left: 10px;
}
.messages-container .header-composition .interlocutor-info .left .uname a {
color: #262626;
font-weight: 600;
}
.messages-container .header-composition .interlocutor-info .left .uname span {
color: #999;
font-size: 11px;
line-height: 13px;
}
.messages-container .header-composition .interlocutor-info .right {
margin-left: auto;
padding-right: 10px;
max-height: 55px;
}
.messages-container .header-composition .interlocutor-info .right .dropdown {
padding: 12px 10px;
display: inline-block;
}
.messages-container .header-composition .interlocutor-info .right .dropdown span.dropdown-toggle {
width: 31px;
height: 31px;
color: #555;
display: inline-block;
cursor: pointer;
text-align: center;
padding: 6px;
border-radius: 50%;
transition: all 0.2s ease;
}
.messages-container .header-composition .interlocutor-info .right .dropdown.open span.dropdown-toggle {
background-color: rgba(153, 153, 153, 0.4);
}
.messages-container .header-composition .interlocutor-info .right .dropdown ul {
right: 10px;
left: auto;
top: 43px;
padding: 6px 0;
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.messages-container .header-composition .interlocutor-info .right .dropdown ul li a {
color: #595959;
font-size: 13px;
line-height: 16px;
font-weight: 600;
text-decoration: none;
padding: 10px 15px;
margin: 0;
}
.messages-container .pp_srch_msg .search-users {
height: 64px;
overflow: hidden;
}
.messages-container .pp_srch_msg .search-users .text-input {
width: 100%;
height: 100%;
position: relative;
padding: 15px;
}
.messages-container .pp_srch_msg .search-users .text-input input {
box-shadow: none;
border-radius: 2em;
padding-left: 40px;
background-color: rgb(0 0 0 / 8%);
border: 0;
}
.messages-container .pp_srch_msg .search-users .text-input input::-webkit-input-placeholder,
.messages-container .pp_srch_msg .search-users .text-input input:-moz-placeholder,
.messages-container .pp_srch_msg .search-users .text-input input:-ms-input-placeholder {
color: #999;
}
.messages-container .pp_srch_msg .search-users .text-input svg.feather {
position: absolute;
top: 22px;
left: 25px;
opacity: 0.7;
pointer-events: none;
margin: 0;
}
.messages-container .row.content {
height: calc(100% - 75px);
}
.messages-container .row.content .col-md-4,
.messages-container .row.content .col-md-8 {
height: 100%;
}
.msg_white_bg {
background: #fff;
box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
border-radius: 7px;
height: 100%;
}
.messages-container .row.content .chat-list {
height: calc(100% - 64px);
width: 100%;
}
.messages-container .row.content .chat-list ul {
margin: 0px;
padding: 0px;
list-style: none;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.messages-container .row.content .chat-list ul::-webkit-scrollbar-track {
background-color: transparent;
width: 4px;
}
.messages-container .row.content .chat-list ul::-webkit-scrollbar {
width: 4px;
background-color: transparent;
}
.messages-container .row.content .chat-list ul::-webkit-scrollbar-thumb {
width: 4px;
background-color: rgba(153, 153, 153, 0.5);
}
.messages-container .row.content .chat-list ul li {
width: 100%;
display: block;
padding: 0;
margin: 0;
transition: background-color 0.2s ease;
cursor: pointer;
}
.messages-container .row.content .chat-list ul li a {
text-decoration: none;
}
.messages-container .row.content .chat-list ul li div.chat-list-item {
width: 100%;
display: flex;
padding: 7.5px 15px;
}
.messages-container .row.content .chat-list ul li div.chat-list-item .avatar {
width: 45px;
min-width: 45px;
overflow: hidden;
}
.messages-container .row.content .chat-list ul li div.chat-list-item .avatar img {
width: 100%;
}
.messages-container .row.content .chat-list ul li div.chat-list-item .chat-desc {
margin-left: 13px;
flex-grow: 1;
}
.messages-container .row.content .chat-list ul li div.chat-list-item .chat-desc div.uname {
width: 100%;
white-space: nowrap;
}
.messages-container .row.content .chat-list ul li div.chat-list-item .chat-desc div.uname span.username {
color: #262626;
font-size: 14px;
font-weight: 600;
max-width: 60%;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
}
.messages-container .row.content .chat-list ul li div.chat-list-item .chat-desc div.uname time {
float: right;
font-size: 12px;
color: rgba(124, 124, 124, 0.8);
line-height: 21px;
}
.messages-container .row.content .chat-list ul li div.chat-list-item .chat-desc div.message {
width: 100%;
max-width: 100%;
display: flex;
}
.messages-container .row.content .chat-list ul li div.chat-list-item .chat-desc div.message span {
flex-grow: 1;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
font-size: 13px;
color: rgba(128, 128, 128, 0.9);
font-weight: 400;
font-family: "Open Sans", "Pretendard", sans-serif;
white-space: nowrap;
max-width: 85%;
}
.messages-container .row.content .chat-list ul li div.chat-list-item .chat-desc div.message small {
display: inline-block;
line-height: 18px;
font-size: 9px;
width: 18px;
height: 18px;
background: rgba(226, 113, 0, 0.9);
color: #fff;
border-radius: 5em;
font-weight: 600;
text-align: center;
margin-left: auto;
}
.messages-container .row.content .chat-list ul li div.chat-list-item .chat-desc div.message small:empty {
all: unset;
display: none;
}
.messages-container .row.content .chat-list ul li:hover {
background: rgba(0, 0, 0, 0.03);
}
.messages-container .row.content .chat-list ul li.active {
background: rgba(0, 0, 0, 0.06);
}
.messages-container .row.content .conversation {
height: 100%;
position: relative;
}
.messages-container .row.content .conversation .messages {
padding: 5px 0;
position: absolute;
left: 0;
bottom: 70px;
top: 0;
right: 0;
margin: 0;
overflow-y: auto;
}
.messages-container .row.content .conversation .messages:hover::-webkit-scrollbar-track {
visibility: visible;
}
.messages-container .row.content .conversation .messages:hover::-webkit-scrollbar {
visibility: visible;
}
.messages-container .row.content .conversation .messages::-webkit-scrollbar-track {
background-color: #eef1f2;
width: 5px;
visibility: hidden;
border-radius: 3px;
}
.messages-container .row.content .conversation .messages::-webkit-scrollbar {
width: 5px;
background-color: #eef1f2;
border-radius: 3px;
visibility: hidden;
}
.messages-container .row.content .conversation .messages::-webkit-scrollbar-thumb {
width: 5px;
background-color: rgba(153, 153, 153, 0.5);
border-radius: 3px;
}
.messages-container .row.content .conversation .messages .message-list-item {
display: block;
overflow: hidden;
padding: 4px 16px 4px;
}
.messages-container .row.content .conversation .messages .message-list-item.active {
cursor: pointer;
background: #e3f2fd;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner {
display: inline-flex;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner .user__avatar {
width: 35px;
height: 35px;
min-width: 35px;
overflow: hidden;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner .user__avatar img {
width: 100%;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner .message__data {
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner .message__data p.message__text {
padding: 6px 15px 8px;
background: rgb(0 0 0 / 10%);
border-radius: 8px;
margin-bottom: 0;
display: table;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner.right .message__data p.message__text {
background: linear-gradient(141deg, #65b368 0%, #5db361 51%, #4caf50 75%);
color: white;
margin-left: auto;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner.right .message__data p.message__text a.hashtag {
color: #ffffff;
text-decoration: underline;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner .message__data time {
font-size: 11px;
color: rgba(124, 124, 124, 0.8);
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner.left {
margin-right: 20%;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner.left .message__data {
margin-left: 7px;
position: relative;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner.right {
float: right;
margin-left: 20%;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner.right .message__data {
margin-right: 7px;
}
.messages-container .row.content .conversation .send-message {
width: 100%;
height: 70px;
position: absolute;
left: 0;
bottom: 0;
padding: 7px 20px 20px;
}
.messages-container .row.content .conversation .send-message form {
height: 100%;
}
.messages-container .row.content .conversation .send-message form div.text-input {
width: 100%;
height: 100%;
position: relative;
}
.messages-container .row.content .conversation .send-message form div.text-input textarea {
height: 100%;
border-radius: 10px;
border: none;
resize: none;
padding: 11px 50px 0;
font-size: 13px;
color: #262626;
box-shadow: 0 0px 15px 1px rgba(0, 0, 0, 0.1);
}
.messages-container .row.content .conversation .send-message form div.text-input textarea::-webkit-scrollbar-track {
background-color: transparent;
width: 5px;
}
.messages-container .row.content .conversation .send-message form div.text-input textarea::-webkit-scrollbar {
width: 5px;
background-color: transparent;
}
.messages-container .row.content .conversation .send-message form div.text-input textarea::-webkit-scrollbar-thumb {
width: 5px;
background-color: #cdcdcd;
border-radius: 5px;
}
.messages-container .row.content .conversation .send-message form div.controls {
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: auto;
}
.messages-container .row.content .conversation .send-message form div.controls button {
background: rgb(233 30 99 / 25%);
border: none;
padding: 2px 10px;
font-size: 20px;
color: #e91e63;
outline: 0;
border-radius: 10px;
margin: 3.3px 5px;
width: 36px;
height: 36px;
}
.messages-container .row.content .conversation .send-message form div.controls button:active {
color: rgba(103, 117, 128, 0.6);
}
.messages-container .row.content .conversation .send-message form div.controls button svg.feather {
fill: currentColor;
margin: -5px 0px 0px 0px;
}
.messages-container .row.content .conversation .send-message form div.controls.left {
right: auto;
left: 0;
}
.messages-container .row.content .conversation .send-message form div.controls.left button {
color: #607d8b;
background: rgb(96 125 139 / 20%);
}
.messages-container .row.content .conversation .send-message form .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1000;
overflow: hidden;
text-align: center;
background: rgba(255, 255, 255, 0.55);
cursor: not-allowed;
}
.messages-container .row.content .conversation .send-message form .overlay #pp_loader {
display: block;
float: none;
padding: 15px;
}
.messages-container .row.content .conversation .send-message form .overlay #pp_loader .speeding_wheel {
width: 24px;
height: 24px;
}
.messages-container .row.content .conversation .send-message .delete-selected {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 70px;
z-index: 100;
padding: 19px 20px;
background: #fff;
box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.06);
}
.messages-container .row.content .conversation .send-message .delete-selected button {
border: none;
background: none;
color: white;
padding: 6px 16px 7px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 3px;
font-size: 14px;
line-height: 18px;
outline: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.messages-container .row.content .conversation .send-message .delete-selected button:nth-child(1) {
background-color: #2196f3;
}
.messages-container .row.content .conversation .send-message .delete-selected button:nth-child(1) b {
margin-left: 10px;
}
.messages-container .row.content .conversation .send-message .delete-selected button:nth-child(2) {
background: #9da6af;
}
.messages-container .row.content .conversation .send-message .blocked {
width: 100%;
overflow: hidden;
text-align: center;
cursor: not-allowed;
height: 100%;
}
.messages-container .row.content .conversation .send-message .blocked svg.feather {
width: 25px;
height: 25px;
fill: #888;
margin: 15px 0px;
}
.messages-container .row.content .conversation .select-chat {
width: 100%;
height: 100%;
display: flex;
}
.messages-container .row.content .conversation .select-chat .empty_state {
margin: auto;
}
.messages-container .row.content .conversation .select-chat .empty_state button {
display: none;
margin: 60px auto 0;
}
/*Dropdown Menu*/
@keyframes drop-down-zoom {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes drop-up-zoom {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.open > .dropdown-menu.zoom {
animation-name: drop-down-zoom;
animation-duration: 0.15s;
transform-origin: right 2px;
border-radius: 5px;
border: 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.open > .dropdown-menu.zoom-up {
animation-name: drop-down-zoom;
animation-duration: 0.15s;
transform-origin: bottom 2px;
border-radius: 5px;
border: 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
/*Story View*/
.story-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 3000;
transition: display 1s ease;
display: flex;
flex-direction: column;
}
.story-container .header {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 65px;
overflow: hidden;
z-index: 99;
background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.65), transparent);
background-image: -o-linear-gradient(rgba(0, 0, 0, 0.65), transparent);
background-image: linear-gradient(rgba(0, 0, 0, 0.65), transparent);
}
.story-container .header .user-info {
float: left;
overflow: hidden;
height: 100%;
margin-left: 25px;
padding: 12px 0px;
}
.story-container .header .user-info .avatar {
width: 40px;
height: 40px;
float: left;
}
.story-container .header .user-info .avatar img {
width: 100%;
height: 100%;
}
.story-container .header .user-info h5 {
float: left;
margin: 3px 0 0 15px;
padding: 0;
font-size: 15px;
color: #fff;
text-transform: capitalize;
}
.story-container .header .user-info h5 time {
display: block;
overflow: hidden;
font-size: 11px;
font-weight: 500;
margin-top: 4px;
}
.story-container .header .user-info h5 time b {
font-weight: normal;
}
.story-container .header .user-info h5 time svg.feather {
margin-top: -1px;
width: 13px;
height: 13px;
}
.story-container .header .close-modal,
.story-container .header .delete-story {
cursor: pointer;
float: right;
margin-right: 25px;
margin-top: 20px;
margin-bottom: 20px;
}
.story-container .header .close-modal svg.feather,
.story-container .header .delete-story svg.feather {
color: #a9a9a9;
}
.story-container .header .close-modal svg.feather:hover,
.story-container .header .delete-story svg.feather:hover {
color: #fff;
}
.story-container .container {
width: 100%;
max-width: 90% !important;
margin: 0px auto;
padding: 0px;
z-index: 10;
position: relative;
}
.story-container .bg {
background-color: #262626;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.story-container .container .int-indicator {
list-style: none;
width: 500px;
margin: 0 auto 10px;
padding: 29px 70px;
overflow: hidden;
display: flex;
z-index: 200;
flex-direction: row;
}
.story-container .container .int-indicator li {
margin: 0px;
height: 7px;
background: rgba(140, 140, 140, 0.8);
border-radius: 7px;
overflow: hidden;
}
.story-container .container .int-indicator li span {
display: block !important;
width: 0px;
border-radius: 7px;
height: 7px;
background: #fff;
}
.story-container .container .carousel-inner {
height: calc(100vh - 80px);
display: flex;
}
.story-container .container .carousel-inner .item.img {
height: 100%;
margin: auto;
width: 100%;
}
.story-container .container .carousel-inner .item.img img {
min-width: 100%;
min-height: 100%;
object-fit: scale-down;
height: 100%;
user-select: none;
pointer-events: none;
}
.story-container .container .carousel-inner .item.video {
height: 100% !important;
width: 100% !important;
}
.story-container .container .carousel-inner .item.video video {
height: 100% !important;
width: 100% !important;
object-fit: scale-down;
}
.story-container .container .carousel-inner .item {
background-color: #333;
}
.story-container .container .carousel-inner .item div.caption {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
padding: 15px 15px;
margin: 0px;
overflow: hidden;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.8));
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
}
.story-container .container .carousel-inner .item:hover div.caption {
opacity: 1;
visibility: visible;
}
.story-container .container .carousel-inner .item div.caption p {
color: #fff;
font-style: normal;
font-size: 15px;
text-align: center;
margin: 0;
}
.story-container .views {
width: 100%;
padding: 5px 0;
cursor: none;
margin: 0px 0px 5px;
color: #fff;
font-size: 16px;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.story-container .views span {
line-height: 15px;
font-size: 15px;
font-weight: 600;
}
.story-container .container .cr-controls {
position: absolute;
display: block;
height: 100%;
top: 0px;
color: #fff;
display: flex;
}
.story-container .container .cr-controls span {
margin: auto;
padding: 0px;
width: 40px;
height: 40px;
border-radius: 10em;
background: rgba(247, 244, 242, 0.27);
text-align: center;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.story-container .container .cr-controls span svg.feather {
margin-top: 8px;
width: 23px;
height: 23px;
}
.story-container .container .cr-controls.carousel-control-prev {
left: -50px;
}
.story-container .container .cr-controls.carousel-control-next {
right: -50px;
}
.carousel-fade .carousel-inner .item {
transition-property: opacity;
-webkit-transition: opacity 0.2s ease;
transition: opacity 0.2s ease;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
display: block;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
transform: none;
}
.carousel-fade .carousel-control {
z-index: 2;
}
/*Lightbox*/
body.page__numb {
overflow: hidden;
}
.lg-backdrop {
background: rgba(26, 26, 26, 0.95) !important;
}
.lg-image {
max-width: 1000px !important;
max-height: 70vh !important;
}
/*Post View Page*/
.post-data-container {
width: 100%;
margin-top: 85px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.post-data-container .post-data-inner {
width: 100%;
overflow: hidden;
min-height: 700px;
position: relative;
max-height: 700px;
background: #fff;
border-radius: 2px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
display: flex;
}
.post-data-container .post-data-inner .post-media-renderer {
min-height: 700px;
max-height: 80vh;
overflow: hidden;
display: flex;
align-items: center;
background-color: #fff;
margin-right: 370px;
width: calc(100% - 370px);
}
.post-data-container .post-data-inner .post-media-renderer .carousel {
position: relative;
margin: 0 auto;
height: 100%;
width: 100%;
touch-action: pan-y;
}
.post-data-container .post-data-inner .post-media-renderer .carousel .carousel-inner {
height: 100%;
}
.post-data-container .post-data-inner .post-media-renderer .carousel .item {
max-height: 100%;
overflow: hidden;
height: 100%;
cursor: pointer;
}
.post-data-container .post-data-inner .post-media-renderer .carousel .item img {
max-height: 700px;
min-height: 100%;
object-fit: scale-down;
}
.post-data-container .post-data-inner .post-media-renderer .carousel a.cr-controls {
position: absolute;
top: 50%;
display: flex;
z-index: 100;
text-align: center;
transition: all 0.15s ease-in-out;
transform: translateY(-50%);
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
pointer-events: auto;
opacity: 1;
}
.post-data-container .post-data-inner .post-media-renderer .carousel a.cr-controls span {
padding: 7px 0;
width: 40px;
height: 40px;
background: #676767;
border-radius: 50%;
position: relative;
}
.post-data-container .post-data-inner .post-media-renderer .carousel a.cr-controls span svg.feather {
color: #e5e5e5;
margin-top: 0px;
width: 24px;
height: 24px;
}
.post-data-container .post-data-inner .post-media-renderer .carousel a.cr-controls.carousel-control-prev {
left: 12px;
}
.post-data-container .post-data-inner .post-media-renderer .carousel a.cr-controls.carousel-control-next {
right: 12px;
}
.post-data-container .post-data-inner .post-media-renderer .carousel:hover .carousel-control-prev {
left: 10px !important;
}
.post-data-container .post-data-inner .post-media-renderer .carousel:hover .carousel-control-next {
right: 10px !important;
}
.post-data-container .post-data-inner .post-media-renderer .gif,
.post-data-container .post-data-inner .post-media-renderer .video {
position: relative;
width: 100%;
overflow: hidden;
height: 100% !important;
display: flex;
align-items: center;
}
.post-data-container .post-data-inner .post-media-renderer .gif img {
min-height: 100%;
object-fit: scale-down;
}
.post-data-container .post-data-inner .post-media-renderer .video .afterglow {
max-height: 80vh !important;
width: 100% !important;
}
.post-data-container .post-data-inner .post-media-renderer .video .afterglow video {
max-height: 100% !important;
}
.post-data-container .post-data-inner .post-media-renderer .post-embed-frame {
background: #212121;
}
.post-data-container .post-data-inner .post-media-renderer .post-embed-frame iframe {
min-height: 340px !important;
}
.post-data-container .post-data-inner .sidebar {
overflow: hidden;
height: 100%;
background: #fff;
max-width: 370px;
min-width: 370px;
position: absolute;
right: 0;
top: 0;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner {
position: relative;
height: 100%;
width: 100%;
display: flex;
flex-flow: column;
overflow: hidden;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .header {
overflow: hidden;
padding: 13px 15px 12px;
margin: 0px;
min-height: 65px;
background: #fff;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .header .avatar {
width: 40px;
height: 40px;
overflow: hidden;
float: left;
display: inline-block;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .header .uname {
display: block;
margin-left: 50px;
padding-top: 4px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .header .uname a {
color: #262626;
font-weight: 500;
text-decoration: none;
display: inline-block;
font-size: 15px;
line-height: 18px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .header .uname a span {
font-weight: 300;
color: #515151;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .header .uname button {
display: inline-block;
background: transparent;
box-shadow: none;
color: #1da1f2;
padding: 3px 10px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .header .uname span {
font-size: 12px;
line-height: 15px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .pp_pst_caption {
padding: 16px 15px 12px;
background: #fff;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
position: relative;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .pp_pst_caption .post-title,
.post-data-container .post-data-inner .sidebar .sidebar__inner .pp_pst_caption h2.post-title {
color: #3c4043;
margin: 0 0 10px;
padding: 0;
font-size: 28px;
line-height: 1.25;
font-weight: 600;
font-family: "Poppins", "Open Sans", "Noto Sans KR", sans-serif;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .pp_pst_caption .post-body,
.post-data-container .post-data-inner .sidebar .sidebar__inner .pp_pst_caption p[data-caption] {
color: #4c404d;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 1.55;
font-weight: 400;
font-family: "Open Sans", "Noto Sans KR", sans-serif;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments {
width: 100%;
overflow-y: auto;
-webkit-flex: 1 auto;
-ms-flex: 1 auto;
flex: 1 auto;
flex-grow: 1;
background-color: #fff;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments::-webkit-scrollbar-track {
background-color: #fff;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments::-webkit-scrollbar {
width: 6px;
background-color: #cacac9;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments::-webkit-scrollbar-thumb {
background-color: #cacac9;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list {
width: 100%;
list-style: none;
padding: 0px;
margin: 0px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list .main_post_comm {
margin: 7px 0;
padding: 0px 40px 5px 15px;
display: block;
font-weight: 500;
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 13px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list li {
width: 100%;
margin-bottom: 10px;
padding: 7px 40px 5px 15px;
word-wrap: break-word;
position: relative;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list li .user-avatar {
display: inline-block;
float: left;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list li .user-avatar img {
width: 30px;
height: 30px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list li .pp_com_body {
margin-left: 38px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list li .pp_com_body span {
background-color: #fff;
border: 1px solid #eee;
padding: 7px 10px;
border-radius: 18px;
display: inline-block;
line-height: 18px;
color: #555555;
position: relative;
padding-right: 30px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list li strong {
font-weight: 600;
color: #262626;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list li strong a {
font-weight: 600;
text-decoration: none;
color: #262626;
margin: 0px 5px 0px 0px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list li .delcomment {
color: #c7c7c7;
cursor: pointer;
right: 10px;
top: 5px;
position: absolute;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .pp_pst_caption p.caption[contenteditable="true"] {
width: unset;
color: #4c404d;
margin: 0px;
padding: 10px 0 5px 5px;
font-size: 14px;
line-height: 1.55;
font-weight: 400;
font-family: "Open Sans", "Noto Sans KR", sans-serif;
outline: 0;
border: 2px solid #82b7da;
border-radius: 3px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .pp_pst_caption p:empty {
padding: 0;
margin: 0;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list li.caption a.hashtag,
.post-data-container .post-data-inner .sidebar .sidebar__inner .comments .post-comments-list li.caption a.mention {
color: #003569;
}
.post-data-container .post-data-inner .comment-box {
width: 100%;
padding: 0px 15px;
background: #fff;
flex: 0 0 auto;
vertical-align: bottom;
box-shadow: 0 -2px 3px rgba(0, 0, 0, 0.05);
position: relative;
}
.post-data-container .post-data-inner .comment-box .votes {
margin: 10px 0 0 0;
width: 100%;
display: flex;
align-items: center;
position: relative;
}
.post-data-container .post-data-inner .comment-box .votes span {
overflow: hidden;
font-weight: 500;
color: #262626;
font-size: 13px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.post-data-container .post-data-inner .comment-box .votes span[data-post-likes],
.post-data-container .post-data-inner .comment-box .votes span:has([data-post-likes]) {
font-weight: 600;
}
.post-data-container .post-data-inner .comment-box .votes .like-post {
z-index: 1;
cursor: pointer;
margin-right: 5px;
}
.post-data-container .post-data-inner .comment-box .votes .like-post svg.feather {
color: #616770;
width: 25px;
height: 25px;
margin-top: 0px;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active svg.feather {
color: #ed4856;
fill: #ed4856;
}
.post-data-container .post-data-inner .comment-box .votes .dropup {
z-index: 1;
cursor: pointer;
margin-left: auto;
padding: 6px 7px;
border-radius: 50%;
transition: all 0.2s ease;
}
.post-data-container .post-data-inner .comment-box .votes .pp-beautyk-vote {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 0;
cursor: pointer;
flex-shrink: 0;
}
.post-data-container .post-data-inner .comment-box .votes .pp-beautyk-vote .pp-beautyk-icon {
position: relative;
display: inline-flex;
width: 23px;
height: 23px;
align-items: center;
justify-content: center;
}
.post-data-container .post-data-inner .comment-box .votes .pp-beautyk-vote svg.feather-info {
width: 23px;
height: 23px;
color: #616770;
margin-top: 0;
}
.post-data-container .post-data-inner .comment-box .votes .pp-beautyk-vote.is-empty {
cursor: default;
opacity: 0.7;
}
.post-data-container .post-data-inner .comment-box .votes .pp-beautyk-vote.is-empty svg.feather-info {
color: #9aa0a6;
}
.post-data-container .post-data-inner .comment-box .votes .pp-beautyk-vote.is-empty .pp-beautyk-icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 26px;
height: 2px;
background: currentColor;
color: #9aa0a6;
transform: translate(-50%, -50%) rotate(-45deg);
border-radius: 1px;
pointer-events: none;
}
/* post-page beautyk styles moved to portfolio-attributes */
.post-data-container .post-data-inner .comment-box .votes .dropup.open {
background-color: rgba(153, 153, 153, 0.4);
}
.post-data-container .post-data-inner .comment-box .votes .dropup span.dropdown-toggle {
color: #676767;
vertical-align: middle;
}
.post-data-container .post-data-inner .comment-box .votes .dropup .dropdown-menu {
left: auto;
right: 0px;
padding: 6px 0;
margin: 0;
box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.14), 0 0px 14px 2px rgba(0, 0, 0, 0.12), 0 3px 5px -3px rgba(0, 0, 0, 0.2);
}
.post-data-container .post-data-inner .comment-box .votes .dropup .dropdown-menu li a {
color: #595959;
font-size: 13px;
line-height: 16px;
font-weight: 600;
text-decoration: none;
padding: 10px 15px;
margin: 0;
}
.post-data-container .post-data-inner .comment-box .votes .dropup .dropdown-menu li a:hover {
background-color: #eee;
color: #9c27b0;
}
.post-data-container .post-data-inner .comment-box .form .text-input {
padding: 8px 0px;
position: relative;
}
.post-data-container .post-data-inner .comment-box .form .text-input .user-avatar {
position: absolute;
width: 27px;
height: 27px;
margin-top: 3.5px !important;
}
.post-data-container .post-data-inner .comment-box .form .text-input .user-avatar img {
width: 100%;
}
.post-data-container .post-data-inner .comment-box .form .text-input .post_input_ {
padding-left: 29px;
}
.post-data-container .post-data-inner .comment-box .form .text-input .post_input_ .emojionearea.emojionearea-inline {
border: 1px solid #2250fc;
box-shadow: none;
background-color: #fff;
}
.post-data-container .post-data-inner .comment-box .form .text-input .post_input_ .emojionearea .emojionearea-editor,
.post-data-container .post-data-inner .comment-box .form .text-input input {
background-color: #fff;
}
.post-data-container .post-data-inner .comment-box .form .text-input input {
border: none;
box-shadow: none;
height: 50px;
color: #262626;
font-size: 13px;
padding-left: 36px;
}
.post-data-container .post-data-inner .comment-box .form .text-input .login2comment {
height: 50px;
color: #262626;
font-size: 13px;
padding: 14px 2px;
}
.post-data-container .post-data-inner .comment-box .form .text-input .login2comment a {
color: #2195f3;
font-weight: 600;
}
.post-data-container .post-data-inner .comment-box .form .text-input .commenting-overlay {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: hidden;
text-align: center;
}
.post-data-container .post-data-inner .comment-box .form .text-input .commenting-overlay:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
background: rgba(255, 255, 255, 0.5);
}
.post-data-container .post-data-inner .comment-box .form .text-input .commenting-overlay #pp_loader {
display: block;
float: none;
padding: 13.4px 15px;
margin-top: 5px;
}
/*Footer*/
footer {
border-top: solid 1px #f0f0f0; /*background-color: #fff;*/
margin-top: 20px;
padding: 20px 10px;
}
.footer__container {
width: 100%;
padding: 20px 0;
}
.footer__container .footer {
width: 100%;
font-size: 13px;
}
.footer__container .footer > ul.nav > li {
display: inline-block !important;
margin-left: 15px;
}
.footer__container .footer > ul.nav > li > a {
color: #262626;
padding: 0 !important;
display: inline-block !important;
background: none;
}
.footer__container .footer > ul.nav > li > a:hover {
text-decoration: underline;
}
.footer__container .footer li.dropup {
display: inline-block !important;
position: relative !important;
cursor: pointer;
}
.footer__container .footer li.dropup .dropdown-toggle a {
color: #333 !important;
}
.footer__container .footer li.dropup ul,
.footer__container .footer li.dropup .dropdown-menu {
top: auto !important;
bottom: 100% !important;
border-radius: 4px;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1), 0 15px 35px rgba(50, 50, 93, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
border: 0;
transform: rotate3d(1, 1, 0, 15deg);
transform-origin: 0 100%;
opacity: 0;
will-change: transform, opacity;
transition-property: transform, opacity;
transition-duration: 0.25s;
display: block;
visibility: hidden;
pointer-events: none;
min-width: 130px;
left: auto;
right: 0px;
margin-top: 0;
margin-bottom: 0;
}
.footer__container .footer li.dropup ul:before,
.footer__container .footer li.dropup .dropdown-menu:before {
content: "";
position: absolute;
bottom: -6px;
top: auto;
right: 30px;
width: 20px;
height: 20px;
transform: rotate(45deg);
border-radius: 20px 0 3px 0;
background: #fff;
z-index: -1;
}
.footer__container .footer li.dropup.open > ul,
.footer__container .footer li.dropup.open > .dropdown-menu {
transform: none;
opacity: 1;
pointer-events: auto;
visibility: visible;
margin-top: 0;
margin-bottom: 15px;
right: -24px;
}
/*Terms Page*/
.terms-page__container {
width: 100%;
margin-top: 80px;
}
.terms-page__container .terms-page__inner {
width: 100%;
}
.terms-page__container .terms-page__inner .pp_term_head {
margin: 0 0 15px 0;
}
.terms-page__container .terms-page__inner .pp_term_head ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.terms-page__container .terms-page__inner ul li {
margin: 0 0 13px;
display: block;
}
.terms-page__container .terms-page__inner ul li.active a {
color: #fff;
}
.terms-page__container .terms-page__inner ul li:first-child.active a {
background: #546671;
}
.terms-page__container .terms-page__inner ul li:nth-child(2).active a {
background: #eb3573;
}
.terms-page__container .terms-page__inner ul li:nth-child(3).active a {
background: #3fa044;
}
.terms-page__container .terms-page__inner ul li:last-child.active a {
background: #2196f3;
}
.terms-page__container .terms-page__inner ul li a {
display: block;
overflow: hidden;
background: #fff;
border-radius: 2em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
color: #2d2d2d;
font-size: 15px;
font-weight: 500;
line-height: 40px;
min-width: 110px;
position: relative;
text-align: center;
text-decoration: none;
padding: 0 20px;
}
.terms-page__container .terms-page__inner ul li a svg {
margin: -2px 7px 0 0;
width: 19px;
height: 19px;
}
.terms-page__container .terms-page__inner .content {
width: 100%;
overflow: hidden;
border-radius: 3px;
padding: 30px 50px;
min-height: 80vh;
background-color: white;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
/*Add Post FAB*/
.add-post-bf--controls {
position: fixed;
height: auto;
bottom: -60px;
right: 32px;
z-index: 2000;
}
.add-post-bf--controls:not(.active) .nds {
display: none;
}
.add-post-bf--controls .btns {
width: 40px;
margin: auto;
}
.add-post-bf--controls .btns .nds {
width: 40px;
height: 40px;
border-radius: 50%;
z-index: 300;
transform: scale(0);
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
background: #fff;
color: #676767;
margin-bottom: 12px;
}
.add-post-bf--controls .btns .nds span {
width: 100%;
text-align: center;
line-height: 40px;
display: inline-block;
}
.add-post-bf--controls #floating-button {
width: 56px;
height: 56px;
border-radius: 50%;
background: #2196f3;
cursor: pointer;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
position: relative;
}
.add-post-bf--controls #floating-button svg.feather {
width: 24px;
height: 24px;
}
.add-post-bf--controls .plus {
color: white;
display: block;
text-align: center;
line-height: 57px;
animation: plus-out 0.3s;
transition: all 0.3s;
}
.add-post-bf--controls.active .plus {
animation: plus-in 0.15s linear;
animation-fill-mode: forwards;
}
.add-post-bf--controls .edit {
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
margin: auto;
transform: rotateZ(-70deg);
transition: all 0.3s;
animation: edit-out 0.3s;
text-align: center;
color: #fff;
}
.add-post-bf--controls.active .edit {
animation: edit-in 0.2s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
.add-post-bf--controls.active .nds {
animation: bounce-nds 0.1s linear;
animation-fill-mode: forwards;
}
.add-post-bf--controls.active .nd3 {
animation-delay: 0.08s;
}
.add-post-bf--controls.active .nd4 {
animation-delay: 0.15s;
}
.add-post-bf--controls.active .nd5 {
animation-delay: 0.2s;
}
.add-post-bf--controls .nd1 {
bottom: 100px;
animation-delay: 0.2s;
animation: bounce-out-nds 0.3s linear;
animation-fill-mode: forwards;
}
.add-post-bf--controls .nd3 {
bottom: 160px;
animation-delay: 0.15s;
animation: bounce-out-nds 0.15s linear;
animation-fill-mode: forwards;
}
.add-post-bf--controls .nd4 {
bottom: 220px;
animation-delay: 0.1s;
animation: bounce-out-nds 0.1s linear;
animation-fill-mode: forwards;
}
.add-post-bf--controls .nd5 {
bottom: 280px;
animation-delay: 0.08s;
animation: bounce-out-nds 0.1s linear;
animation-fill-mode: forwards;
}
@keyframes edit-in {
from {
opacity: 0;
transform: rotateZ(-70deg);
}
to {
opacity: 1;
transform: rotateZ(0deg);
}
}
@keyframes edit-out {
from {
opacity: 1;
transform: rotateZ(0deg);
}
to {
opacity: 0;
transform: rotateZ(-70deg);
}
}
@keyframes plus-in {
from {
opacity: 1;
transform: rotateZ(0deg);
}
to {
opacity: 0;
transform: rotateZ(180deg);
}
}
@keyframes plus-out {
from {
opacity: 0;
transform: rotateZ(180deg);
}
to {
opacity: 1;
transform: rotateZ(0deg);
}
}
@keyframes bounce-nds {
from {
opacity: 0;
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes bounce-out-nds {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0);
}
}
body.active {
position: relative;
}
body.active:after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 2000;
background-color: rgba(0, 0, 0, 0.3);
}
/*Explore Tags Page*/
.explore-tags {
width: 100%;
overflow: hidden;
}
.explore-tags > h4.text-center {
padding: 40px 0px 30px;
margin: 0;
color: #fff;
font-size: 32px;
line-height: 40px;
font-family: "Open Sans", "Pretendard", sans-serif;
background: #475d6f;
background-size: contain;
}
.explore-tags > h4.text-center span {
font-size: 16px;
line-height: 24px;
color: #e7e7e7;
display: block;
padding-top: 5px;
text-transform: lowercase;
}
/*Menu Modal*/
.modal--menu,
.modal--dialog {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1000;
display: none;
}
.modal--menu.modal--dialog,
.modal--dialog.modal--dialog {
z-index: 3000;
}
.modal--menu h5.title,
.modal--dialog.modal--dialog h5.title {
margin: 0 !important;
padding: 20px 24px;
}
.modal--menu h5.title span,
.modal--dialog.modal--dialog h5.title span {
color: #999;
cursor: pointer;
}
.modal--menu h5.title span svg.feather,
.modal--dialog.modal--dialog h5.title span svg.feather {
margin: 0;
padding: 0;
background: none;
width: 24px;
height: 24px;
}
.modal--menu h5.title span:hover,
.modal--dialog.modal--dialog h5.title span:hover {
color: #333;
}
.modal--menu.modal--dialog .list-group,
.modal--dialog.modal--dialog .list-group {
max-height: 60vh;
overflow-y: auto;
}
.modal--menu.modal--dialog .list-group .list-group-item,
.modal--dialog.modal--dialog .list-group .list-group-item {
width: 100%;
overflow: hidden;
padding: 9px 10px !important;
border: 0;
border-top: 1px solid #e9e9e9;
display: flex;
align-items: center;
}
.modal--menu .list-group .list-group-item {
border: 0;
}
.modal--menu.modal--dialog .list-group .list-group-item:first-child,
.modal--dialog.modal--dialog .list-group .list-group-item:first-child {
border: 0;
}
.modal--menu.modal--dialog .list-group .list-group-item .avatar,
.modal--dialog.modal--dialog .list-group .list-group-item .avatar {
float: left;
width: 37px;
height: 37px;
}
.modal--menu.modal--dialog .list-group .list-group-item .user-info,
.modal--dialog.modal--dialog .list-group .list-group-item .user-info {
padding-left: 13px;
}
.modal--menu.modal--dialog .list-group .list-group-item .user-info a,
.modal--dialog.modal--dialog .list-group .list-group-item .user-info a {
padding: 0px;
width: 100%;
line-height: 13px;
line-height: 16px;
color: #262626;
font-weight: 600;
}
.modal--menu.modal--dialog .list-group .list-group-item .user-info time,
.modal--dialog.modal--dialog .list-group .list-group-item .user-info time {
color: #999;
font-size: 12px;
}
.modal--menu.modal--dialog .list-group .list-group-item .user-info time svg.feather,
.modal--dialog.modal--dialog .list-group .list-group-item .user-info time svg.feather {
margin-top: -2px;
width: 11px;
height: 11px;
}
.modal--menu.modal--dialog .list-group .list-group-item .btn-info,
.modal--dialog.modal--dialog .list-group .list-group-item .btn-info {
margin: 0px 0px 0px auto;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
font-family: "Open Sans", "Pretendard", sans-serif;
padding: 4px 16px;
line-height: normal;
}
.modal--menu.modal--dialog .list-group .list-group-item .btn-info i,
.modal--dialog.modal--dialog .list-group .list-group-item .btn-info i {
display: none;
}
.modal--menu.open,
.modal--dialog.open {
display: flex !important;
}
.modal--menu:after,
.modal--dialog:after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.modal--menu .modal-outer,
.modal--dialog .modal-outer {
width: auto;
margin: auto;
position: relative;
z-index: 1;
}
.modal--menu .modal-outer div.overlay,
.modal--dialog .modal-outer div.overlay {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: flex;
}
.modal--menu .modal-outer div.overlay:after,
.modal--dialog .modal-outer div.overlay:after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.7);
z-index: 1;
}
.modal--menu .modal-outer div.overlay #pp_loader,
.modal--dialog .modal-outer div.overlay #pp_loader {
display: block;
float: none;
margin: auto;
z-index: 5;
}
.modal--menu .modal-outer div.overlay #pp_loader .speeding_wheel,
.modal--dialog .modal-outer div.overlay #pp_loader .speeding_wheel {
width: 40px;
height: 40px;
border-width: 3px;
}
.modal--menu .modal-outer .modal-inner,
.modal--dialog .modal-outer .modal-inner {
min-width: 500px;
background: #fff;
border-radius: 4px;
-webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.modal--menu .modal-outer .modal-inner ul,
.modal--dialog .modal-outer .modal-inner ul {
margin: 0;
padding: 0px 30px 24px;
}
.modal--menu .modal-outer .modal-inner ul li,
.modal--dialog .modal-outer .modal-inner ul li {
border-radius: 0px;
padding: 0;
background: #fff;
}
.modal--menu .modal-outer .modal-inner ul li a,
.modal--dialog .modal-outer .modal-inner ul li a {
display: block;
padding: 12px 0;
color: #262626;
text-decoration: none;
}
.modal--dialog .modal-outer .modal-inner ul li a {
font-weight: 500;
}
/*Confirm Modal — hidden until .is-open (default flex overlay ate clicks on go_pro etc.)*/
.confirm--modal,
.dialog-modal {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: none;
pointer-events: none;
background-color: rgba(0, 0, 0, 0.3);
z-index: 3000;
}
.confirm--modal.is-open,
.dialog-modal.is-open {
display: flex !important;
pointer-events: auto !important;
}
.confirm--modal[style*="display: block"],
.confirm--modal[style*="display:block"],
.confirm--modal[style*="display: flex"],
.confirm--modal[style*="display:flex"],
.dialog-modal[style*="display: block"],
.dialog-modal[style*="display:block"],
.dialog-modal[style*="display: flex"],
.dialog-modal[style*="display:flex"] {
display: flex !important;
pointer-events: auto !important;
}
.confirm--modal .confirm--modal--inner,
.confirm--modal .modal--inner,
.dialog-modal .confirm--modal--inner,
.dialog-modal .modal--inner {
position: relative;
z-index: 4000;
margin: auto;
background: #fff;
border-radius: 4px;
-webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
overflow: hidden;
min-width: 240px;
width: 470px;
font-family: "Open Sans", "Pretendard", sans-serif;
max-width: 90%;
}
.confirm--modal .confirm--modal--inner .modal--header,
.confirm--modal .modal--inner .modal--header,
.dialog-modal .confirm--modal--inner .modal--header,
.dialog-modal .modal--inner .modal--header {
width: 100%;
overflow: hidden;
}
.confirm--modal .confirm--modal--inner .modal--header h5,
.confirm--modal .modal--inner .modal--header h5,
.dialog-modal .confirm--modal--inner .modal--header h5,
.dialog-modal .modal--inner .modal--header h5 {
padding: 15px;
font-size: 15px;
line-height: 16px;
font-weight: 600;
font-family: "Open Sans", "Pretendard", sans-serif;
margin: 0;
border-bottom: 1px solid #e6ecf0;
}
.confirm--modal .confirm--modal--inner form,
.confirm--modal .modal--inner form,
.dialog-modal .confirm--modal--inner form,
.dialog-modal .modal--inner form {
min-width: 480px;
overflow: hidden;
}
.confirm--modal .confirm--modal--inner form .form-control,
.confirm--modal .modal--inner form .form-control,
.dialog-modal .confirm--modal--inner form .form-control,
.dialog-modal .modal--inner form .form-control {
box-shadow: none;
border: none;
border-radius: 0px;
}
.confirm--modal .confirm--modal--inner form .form-group,
.confirm--modal .modal--inner form .form-group,
.dialog-modal .confirm--modal--inner form .form-group,
.dialog-modal .modal--inner form .form-group {
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.confirm--modal .confirm--modal--inner form textarea,
.confirm--modal .modal--inner form textarea,
.dialog-modal .confirm--modal--inner form textarea,
.dialog-modal .modal--inner form textarea {
padding-top: 10px;
}
.confirm--modal .confirm--modal--inner form .modal--body,
.confirm--modal .modal--inner form .modal--body,
.dialog-modal .confirm--modal--inner form .modal--body,
.dialog-modal .modal--inner form .modal--body {
padding: 0;
}
.confirm--modal .confirm--modal--inner .confirm--modal--body,
.confirm--modal .confirm--modal--inner .modal--body,
.confirm--modal .modal--inner .confirm--modal--body,
.confirm--modal .modal--inner .modal--body,
.dialog-modal .confirm--modal--inner .confirm--modal--body,
.dialog-modal .confirm--modal--inner .modal--body,
.dialog-modal .modal--inner .confirm--modal--body,
.dialog-modal .modal--inner .modal--body {
width: 100%;
overflow: hidden;
padding: 24px;
color: #333;
}
.confirm--modal .confirm--modal--inner .confirm--modal--body h5,
.confirm--modal .confirm--modal--inner .modal--body h5,
.confirm--modal .modal--inner .confirm--modal--body h5,
.confirm--modal .modal--inner .modal--body h5,
.dialog-modal .confirm--modal--inner .confirm--modal--body h5,
.dialog-modal .confirm--modal--inner .modal--body h5,
.dialog-modal .modal--inner .confirm--modal--body h5,
.dialog-modal .modal--inner .modal--body h5,
.modal--menu h5.title,
.modal--dialog.modal--dialog h5.title {
margin: 0 0 1rem 0;
line-height: 3.2rem;
font-size: 20px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.confirm--modal .confirm--modal--inner .confirm--modal--body h5 svg.feather,
.confirm--modal .confirm--modal--inner .modal--body h5 svg.feather,
.confirm--modal .modal--inner .confirm--modal--body h5 svg.feather,
.confirm--modal .modal--inner .modal--body h5 svg.feather,
.dialog-modal .confirm--modal--inner .confirm--modal--body h5 svg.feather,
.dialog-modal .confirm--modal--inner .modal--body h5 svg.feather,
.dialog-modal .modal--inner .confirm--modal--body h5 svg.feather,
.dialog-modal .modal--inner .modal--body h5 svg.feather,
.modal--menu h5.title svg.feather,
.modal--dialog.modal--dialog h5.title svg.feather {
background-color: rgba(0, 0, 0, 0.25);
padding: 7.5px;
margin: -3px 5px 0px 0px;
width: 35px;
height: 35px;
border-radius: 50%;
}
.confirm--modal .confirm--modal--inner .confirm--modal--body p,
.confirm--modal .confirm--modal--inner .modal--body p,
.confirm--modal .modal--inner .confirm--modal--body p,
.confirm--modal .modal--inner .modal--body p,
.dialog-modal .confirm--modal--inner .confirm--modal--body p,
.dialog-modal .confirm--modal--inner .modal--body p,
.dialog-modal .modal--inner .confirm--modal--body p,
.dialog-modal .modal--inner .modal--body p {
margin: 0;
padding: 0;
line-height: 25px;
font-size: 16px;
}
.confirm--modal .confirm--modal--inner .confirm--modal--footer,
.confirm--modal .confirm--modal--inner .modal--footer,
.confirm--modal .modal--inner .confirm--modal--footer,
.confirm--modal .modal--inner .modal--footer,
.dialog-modal .confirm--modal--inner .confirm--modal--footer,
.dialog-modal .confirm--modal--inner .modal--footer,
.dialog-modal .modal--inner .confirm--modal--footer,
.dialog-modal .modal--inner .modal--footer {
width: 100%;
overflow: hidden;
text-align: end;
padding: 0px 12px;
}
.confirm--modal .confirm--modal--inner .confirm--modal--footer button,
.confirm--modal .confirm--modal--inner .modal--footer button,
.confirm--modal .modal--inner .confirm--modal--footer button,
.confirm--modal .modal--inner .modal--footer button,
.dialog-modal .confirm--modal--inner .confirm--modal--footer button,
.dialog-modal .confirm--modal--inner .modal--footer button,
.dialog-modal .modal--inner .confirm--modal--footer button,
.dialog-modal .modal--inner .modal--footer button,
.report_fund_modal .modal-footer .btn {
padding: 0px 10px;
font-weight: 500;
outline: 0;
font-family: "Open Sans", "Pretendard", sans-serif;
min-width: 88px;
line-height: 36px;
margin: 6px 8px 15px;
border-radius: 4px;
text-align: center;
transition: all 0.15s ease-in-out;
}
/*Post Not Found*/
.page-not-found {
margin-top: 150px;
margin-bottom: 100px;
text-align: center;
}
.page-not-found h3 {
font-family: "Open Sans", "Pretendard", sans-serif;
color: #262626;
padding: 0;
margin: 0;
font-size: 31px;
line-height: 32px;
font-weight: 600;
}
.page-not-found p {
font-size: 16px;
line-height: 18px;
color: #262626;
padding: 0;
margin: 12px 0 35px;
}
.template {
display: none !important;
visibility: hidden !important;
}
/*Styles*/
svg {
vertical-align: middle;
}
svg.feather {
margin-top: -4px;
width: 19px;
height: 19px;
}
.btn-default svg.feather {
margin-top: -3px;
width: 16px;
height: 16px;
}
.btn-raised {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 2px;
border-color: transparent !important;
transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-raised.btn-default:hover {
background-color: rgba(0, 0, 0, 0.01);
}
.btn-raised:active {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}
a {
outline: 0 !important;
}
.btn-red {
background-color: #e0284f;
}
/*Toast*/
.toast {
position: fixed;
list-style: none;
padding: 0;
width: auto;
z-index: 999999;
margin: 60px 20px 20px !important;
}
.toast li {
display: block;
}
.toast span {
min-width: 288px;
max-width: 400px;
display: inline-block;
margin: 10px 0 0 0;
text-align: center;
background-color: #ffffff;
padding: 12px 24px;
border-radius: 8px;
min-height: 14px;
font-weight: 500;
box-shadow: 0 2px 15px 2px rgb(0 0 0 / 10%);
font-size: 15px;
}
.toast li.danger span {
color: #b94a48;
background-color: #f2dede;
border-color: #b94a48;
}
.toast li.info span {
color: #3a87ad;
background-color: #d9edf7;
border-color: #3a87ad;
}
.toast li.success span {
color: #fff;
background-color: #494949;
border-color: #494949;
}
/*Responsive Embed*/
.embed-responsive {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.embed-responsive::before {
display: block;
content: "";
}
.embed-responsive-16by9::before {
padding-top: 75%;
}
.embed-responsive-25::before {
padding-top: 56.25%;
}
.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
/*Animation*/
/*==FadeInUp==*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadeInUpBig {
-webkit-animation-name: fade_in_up_big;
animation-name: fade_in_up_big;
}
@-webkit-keyframes fade_in_up_big {
0% {
opacity: 0;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@keyframes fade_in_up_big {
0% {
opacity: 0;
-webkit-transform: translateY(50%);
transform: translateY(50%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
/*==BounceIn==*/
.bounceIn {
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
/*Slider*/
/*Pro User Slider*/
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: 0;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-list,
.slick-slider .slick-track {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:after,
.slick-track:before {
display: table;
content: "";
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
top: 50%;
display: block;
padding: 0;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: #5f5f5f;
border: none;
outline: none;
z-index: 9;
background: white;
box-shadow: 0 2px 6px 1px rgba(50, 50, 50, 0.16);
width: 50px;
height: 50px;
border-radius: 100%;
text-align: center;
transition: all 0.2s ease;
}
.slick-prev svg.feather,
.slick-next svg.feather {
margin: 0px;
width: 31px;
height: 31px;
}
.slick-prev svg.feather {
margin-left: -2px;
}
.slick-next svg.feather {
margin-left: 2px;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: #222;
outline: none;
box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, 0.3);
}
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
opacity: 0;
visibility: hidden;
}
.slick-prev {
left: 0px;
}
.slick-next {
right: 0px;
}
/*Empty State*/
.empty_state,
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li.no__notifications div {
margin-top: 80px;
margin-bottom: 80px;
color: #6d6d6d;
display: block;
text-align: center;
font-size: 18px;
}
.empty_state svg.confetti,
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li.no__notifications div svg.confetti {
width: 230px;
fill: #c6c6c6;
display: block;
margin: auto;
filter: grayscale(1);
opacity: 0.6;
}
.st0 {
fill: #fe60a1;
}
.st1 {
fill: #8089ff;
}
.st2 {
fill: #84ce65;
}
.st3 {
fill: #54ceff;
}
.st4 {
fill: #7b78ff;
}
.st5 {
fill: #282e38;
}
.st6 {
fill: #c9cdd2;
}
.st7 {
fill: #92d275;
}
.empty_state svg.feather,
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li.no__notifications div svg.feather {
display: block;
margin: -100px auto 75px;
width: 70px;
height: 70px;
color: #ffffff;
background-color: #607d8b;
border-radius: 50%;
fill: currentColor;
padding: 17px;
}
/*404 Page*/
.pp_404 {
text-align: center;
font-size: 104px;
font-weight: 800;
margin: 70px 15px;
}
.pp_404 > span {
display: inline-block;
position: relative;
}
.pp_404 > span.four {
width: 136px;
height: 43px;
border-radius: 999px;
background: linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%),
linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%), linear-gradient(to right, #d89ca4, #e27b7e);
}
.pp_404 > span.four:before,
.pp_404 > span.four:after {
content: "";
display: block;
position: absolute;
border-radius: 999px;
}
.pp_404 > span.four:before {
width: 43px;
height: 156px;
left: 60px;
bottom: -43px;
background: linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%), linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%),
linear-gradient(to top, #99749d, #b895ab, #cc9aa6, #d7969e, #e0787f);
}
.pp_404 > span.four:after {
width: 137px;
height: 43px;
transform: rotate(-49.5deg);
left: -18px;
bottom: 36px;
background: linear-gradient(to right, #99749d, #b895ab, #cc9aa6, #d7969e, #e0787f);
}
.pp_404 > span.zero {
vertical-align: text-top;
width: 156px;
height: 156px;
border-radius: 999px;
background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%, transparent 51%, transparent 100%), linear-gradient(to top right, #99749d, #99749d, #b895ab, #cc9aa6, #d7969e, #ed8687, #ed8687);
overflow: hidden;
animation: bgshadow 5s infinite;
}
.pp_404 > span.zero:before {
content: "";
display: block;
position: absolute;
transform: rotate(45deg);
width: 90px;
height: 90px;
background-color: transparent;
left: 0px;
bottom: 0px;
background: linear-gradient(95deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.07) 9%, transparent 50%, transparent 100%),
linear-gradient(85deg, transparent 0%, transparent 19%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.07) 91%, transparent 92%, transparent 100%);
}
.pp_404 > span.zero:after {
content: "";
display: block;
position: absolute;
border-radius: 999px;
width: 70px;
height: 70px;
left: 43px;
bottom: 43px;
background: #fdfaf5;
box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
}
.screen-reader-text {
position: absolute;
top: -9999em;
left: -9999em;
}
@keyframes bgshadow {
0% {
box-shadow: inset -160px 160px 0px 5px rgba(0, 0, 0, 0.4);
}
45% {
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
55% {
box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
100% {
box-shadow: inset 160px -160px 0px 5px rgba(0, 0, 0, 0.4);
}
}
/*Explore Page*/
.pp_exp_head_svg svg.feather {
width: 130px;
height: 130px;
color: rgba(255, 255, 255, 0.65);
}
.pp_hero {
/*overflow: hidden;*/
position: relative;
height: 170px;
min-height: 170px;
background: #24a4ea;
background: linear-gradient(100deg, #3d3695, #953594 25%, #da2129);
}
.pp_hero .w {
position: absolute;
top: 100%;
left: -25vw;
right: 0px;
background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='800' height='200' viewBox='0 0 800 200'%3e%3cpath d='M400 0C280 0 120 40 0 40v160h800v-160C680 40 520 0 400 0z' fill='%23FFF'/%3e%3c/svg%3e");
background-position: center;
}
.pp_hero .wave {
height: 200px;
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
.pp_hero .wave2 {
height: 240px;
-webkit-transform: translateY(-80px);
transform: translateY(-80px);
background-size: 960px 240px;
opacity: 0.5;
left: -80vw;
right: -5vw;
}
.pp_hero .wave3 {
height: 220px;
-webkit-transform: translateY(-120px);
transform: translateY(-120px);
background-size: 880px 220px;
opacity: 0.33;
left: 0vw;
right: -20vw;
}
.pp_hero .wave4 {
height: 280px;
-webkit-transform: translateY(-160px);
transform: translateY(-160px);
background-size: 1120px 280px;
opacity: 0.1;
left: 0vw;
right: -40vw;
}
.pp_hero.explore_page {
height: auto;
min-height: auto;
position: absolute;
width: 100%;
left: 0;
right: 0;
bottom: -1px;
background: transparent;
}
.pp_hero.explore_page svg {
height: auto;
color: #fff;
}
.pp_hero.xplore_people svg {
color: #f7f7f7;
}
/*Loader*/
#pp_loader {
display: none;
float: right;
padding: 10px 0px;
}
#pp_loader .speeding_wheel {
width: 18px;
height: 18px;
margin: 0 auto;
border: 2px solid rgba(0, 0, 0, 0.72);
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
animation: cssload-spin 1s infinite linear;
-webkit-animation: cssload-spin 1s infinite linear;
}
/*Sidebar Footer*/
.home-page-container .home-sidebar-right #home-sidebar-sticky {
display: flex;
flex-direction: column;
min-height: calc(100vh - 90px);
}
.home-page-container .home-sidebar-right .footer__container {
margin-top: auto;
padding-top: 20px;
padding-bottom: 10px;
}
body .pp_side_footer {
color: #929292;
width: 100%;
}
body .pp_side_footer ul.nav li {
padding-right: 10px;
margin-left: 0 !important;
}
body .pp_side_footer ul.dropdown-menu li {
padding-right: 0px;
}
body .footer__container .footer.pp_side_footer li.dropup .dropdown-toggle a,
body .footer__container .footer.pp_side_footer > ul.nav > li > a {
color: #929292 !important;
}
/*Publisher Box Items*/
.pp_pubbox_opt {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}
.pp_pubbox_opt .nds {
flex: 0 0 50%;
max-width: 50%;
padding-right: 10px;
padding-left: 10px;
}
.pp_pubbox_opt .nds .create-new-post {
display: inline-block;
width: 100%;
box-sizing: border-box;
padding: 12px 18px;
margin: 0 0 20px;
cursor: pointer;
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.5px;
line-height: 14px;
text-transform: uppercase;
text-decoration: none;
text-align: center;
border-radius: 0.42rem;
border: none;
background-color: #2250fc;
color: #ffffff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
outline: none;
}
.pp_pubbox_opt .nds .create-new-post:hover,
.pp_pubbox_opt .nds .create-new-post:focus {
background-color: #1a40d4;
border: none;
color: #fff;
box-shadow: none;
text-decoration: none;
}
.pp_pubbox_opt .nds .create-new-post svg.feather,
.pp_pubbox_opt .nds .create-new-post svg {
width: 18px;
height: 18px;
margin-top: -2px;
vertical-align: middle;
fill: currentColor !important;
color: inherit;
}
.pp_pubbox_opt .nds .create-new-post svg.feather path,
.pp_pubbox_opt .nds .create-new-post svg path,
.pp_pubbox_opt .nds .create-new-post svg polygon,
.pp_pubbox_opt .nds .create-new-post svg rect {
fill: currentColor !important;
}
/*Tooltip*/
[tooltip] {
/*position:relative*/
}
[tooltip]::after,
[tooltip]::before {
text-transform: none;
font-size: 0.9em;
line-height: 1;
user-select: none;
pointer-events: none;
position: absolute;
opacity: 0;
visibility: hidden;
-webkit-transform: scaleY(0.4) scaleX(0.4);
-moz-transform: scaleY(0.4) scaleX(0.4);
-ms-transform: scaleY(0.4) scaleX(0.4);
-o-transform: scaleY(0.4) scaleX(0.4);
transform: scaleY(0.4) scaleX(0.4);
-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
-moz-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.round-check,
.round-check input + label {
position: relative;
display: inline-block;
}
[tooltip]::before {
border: 5px solid transparent;
z-index: 100;
}
[tooltip]::after {
content: attr(tooltip);
text-align: center;
min-width: 3em;
max-width: 21em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 1ch 1.5ch;
border-radius: 0.3ch;
box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
background: #333;
color: #fff;
z-index: 99;
}
[tooltip]:hover::after,
[tooltip]:hover::before {
opacity: 1;
visibility: visible;
-webkit-transform: scaleY(1) scaleX(1) translateY(0);
-moz-transform: scaleY(1) scaleX(1) translateY(0);
-ms-transform: scaleY(1) scaleX(1) translateY(0);
-o-transform: scaleY(1) scaleX(1) translateY(0);
transform: scaleY(1) scaleX(1) translateY(0);
}
[tooltip=""]::after,
[tooltip=""]::before {
display: none !important;
}
[tooltip][flow^="left"]::before {
top: 50%;
border-right-width: 0;
border-left-color: #333;
left: calc(0em - 5px);
transform: translate(-0.5em, -50%);
}
[tooltip][flow^="left"]::after {
top: 50%;
right: calc(100% + 5px);
transform: translate(-0.5em, -50%);
}
/*Message Page*/
.pp_svg_squiggle,
.pp_svg_lines,
.pp_svg_spiral,
.pp_svg_triangle {
display: none !important;
}
.pp_svg_lines {
position: absolute;
height: 40px;
bottom: 60px;
left: -185px;
transform: translateY(30%) rotate(180deg);
}
.pp_svg_spiral,
.pp_svg_triangle {
-webkit-animation: bounce-rev-absolute 20s linear infinite;
animation: bounce-rev-absolute 20s linear infinite;
}
.pp_svg_squiggle,
.pp_svg_lines {
-webkit-animation: float-right-30 16s ease-in-out infinite;
animation: float-right-30 16s ease-in-out infinite;
}
@-webkit-keyframes bounce-rev-absolute {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounce-rev-absolute {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes float-right-30 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes float-right-30 {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
50% {
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
to {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
/*Material Input*/
.pp_mat_input {
position: relative;
margin-bottom: 3em;
}
.pp_mat_input input,
.pp_mat_input textarea,
.pp_mat_select select {
width: 100%;
font-size: 17px;
padding: 2px 2px 1px;
display: block;
border: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background-color: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
}
.pp_mat_input span.bar,
.pp_mat_select span.bar {
position: relative;
display: block;
}
.pp_mat_input .bar:before,
.pp_mat_input .bar:after,
.pp_mat_select span.bar:before,
.pp_mat_select span.bar:after {
content: "";
height: 2px;
width: 0;
bottom: 0px;
position: absolute;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
background: #00b289;
}
.pp_mat_input .bar:before,
.pp_mat_select span.bar:before {
left: 50%;
}
.pp_mat_input .bar:after,
.pp_mat_select span.bar:after {
right: 50%;
}
.pp_mat_input label {
font-family: "Open Sans", "Pretendard", sans-serif;
color: rgba(0, 0, 0, 0.38);
font-size: 16px;
font-weight: 500;
position: absolute;
pointer-events: none;
left: 0.3125em;
top: 0.6em;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
margin: 0;
}
.pp_mat_input input:focus ~ .bar:before,
.pp_mat_input input:focus ~ .bar:after,
.pp_mat_input textarea:focus ~ .bar:before,
.pp_mat_input textarea:focus ~ .bar:after,
.pp_mat_select select:focus ~ .bar:before,
.pp_mat_select select:focus ~ .bar:after {
width: 50%;
}
.pp_mat_input input:focus ~ label,
.pp_mat_input input:valid ~ label,
.pp_mat_input textarea:focus ~ label,
.pp_mat_input textarea:valid ~ label,
.pp_mat_input.pp_mat_input_float_label label {
top: -15px;
left: 0px;
font-size: 12px;
color: #00b289;
}
.pp_mat_label {
font-size: 12px;
color: #00b289;
}
.pp_mat_select {
position: relative;
margin-bottom: 1.7em;
}
.pp_mat_input_50 {
width: 49.3%;
display: inline-block;
}
/*Toggle Switch*/
.tgl {
display: none;
}
.tgl + .tgl-btn {
outline: 0;
display: block;
width: 36px;
position: relative;
cursor: pointer;
user-select: none;
}
.tgl + .tgl-btn:after,
.tgl + .tgl-btn:before {
position: relative;
display: block;
content: "";
width: 20px;
height: 20px;
top: -3px;
}
.tgl + .tgl-btn:after {
left: -3px;
}
.tgl + .tgl-btn:before {
display: none;
}
.tgl:checked + .tgl-btn:after {
left: 54%;
background: rgb(0, 188, 212);
}
.tgl-ios + .tgl-btn {
background: rgb(189, 189, 189);
transition: all 0.4s ease;
height: 14px;
border-radius: 30px;
margin: 3px 0px;
}
.tgl-ios + .tgl-btn:after {
border-radius: 2em;
background: rgb(245, 245, 245);
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
}
.tgl-ios:checked + .tgl-btn {
background: rgba(0, 188, 212, 0.5);
}
/*Loading Bar*/
@keyframes shift-rightwards {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background: #1da1f2;
}
40% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
background: #ed215e;
}
60% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
background: #84b946;
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
background: #dc4a38;
}
}
.bar_loading {
position: fixed;
display: none;
top: 0;
left: 0;
right: 0;
height: 2.5px;
z-index: 5000;
background: #1da1f2;
transform: translateX(100%);
animation: shift-rightwards 1.5s infinite;
}
.app-loading .bar_loading {
display: block;
}
/*Contact Us Form*/
#contact_us_form {
display: flex;
height: 100%;
overflow: hidden;
justify-content: center;
align-items: center;
position: relative;
padding: 60px 10px 30px;
margin: -30px -50px;
min-height: inherit;
}
#contact_us_form textarea {
margin-top: 40px;
}
#contact_us_form .pp_load_loader {
text-align: center;
width: 100%;
display: inline-block;
}
#contact_us_form .pp_load_loader .btn {
border: 0;
border-radius: 2em;
padding: 13px 35px;
font-size: 16px;
font-family: "Open Sans", "Pretendard", sans-serif;
font-weight: 500;
min-width: 150px;
box-shadow: none;
}
/*Embed Post*/
#embed_post {
resize: none;
margin-top: 24px;
height: 55px;
box-shadow: none;
border: 0;
border-bottom: 1.5px solid #dbdbdb;
border-radius: 0;
padding: 5px 4px;
}
/*Startup*/
.pp_startup {
background: #fff;
padding: 20px;
border-radius: 3px;
width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
border-radius: 10px;
margin: 80px 0 30px;
}
.pp_startup .settings-page-container {
margin: 0;
display: block;
border: 0;
}
.pp_startup .start_head {
display: flex;
align-items: center;
margin-bottom: 40px;
padding-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
}
.pp_startup .start_head h3 {
margin: 0;
font-size: 22px;
}
.pp_startup .start_head h3 svg {
margin-top: -7px;
background-color: #607d8b;
color: #fff;
border-radius: 50%;
padding: 5px;
width: 27px;
height: 27px;
}
.pp_startup .startup_button {
margin-top: 50px;
text-align: center;
}
.pp_startup .startup_button .btn {
box-shadow: none;
}
.pp_startup .startup_button p {
margin: 0;
cursor: pointer;
}
.pp_startup .startup_image {
width: 200px;
margin: auto;
}
.pp_startup .startup_image .img_container_1 {
height: 200px;
border: 2px dashed #a4d7ff;
border-radius: 50%;
background-color: aliceblue;
}
.pp_startup .startup_image .img_container_2 {
padding-top: 80px;
}
.pp_startup .startup_image img {
object-fit: cover;
border-radius: 50%;
width: 200px;
height: 200px;
}
.pp_startup .follow-suggestions-cr {
background: transparent;
box-shadow: none;
margin: 0;
}
.pp_startup .follow-suggestions-cr .cr-wrapper .owl-carousel {
padding: 0;
}
.footer_class {
width: 100%;
}
.stories .item {
cursor: pointer;
}
.ml_ {
margin-left: 12px;
}
.img_container {
width: 100%;
max-height: 200px;
overflow: hidden;
cursor: pointer;
height: 200px;
}
.img_container_1 {
background-color: #ececec;
height: 250px;
}
.img_container_2 {
text-align: center;
padding-top: 70px;
color: #fff;
}
.img_container_text {
color: #66757f;
text-align: center;
font-weight: 500;
}
.verify_text_1 {
color: #00b289;
font-size: 12;
font-weight: 500;
}
.verify_text_2 {
font-size: 12;
font-weight: 500;
}
.verify_h {
padding-top: 100px;
padding-bottom: 100px;
color: #66757f;
}
.is_should_hide {
position: absolute;
top: 0;
width: 100%;
height: 100%;
filter: blur(5px);
z-index: 5;
}
.is_should_hide img {
object-fit: unset !important;
width: 100% !important;
}
.is_should_hide1 {
position: absolute;
top: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.85);
height: 100%;
z-index: 5;
}
.is_should_hide2 {
position: absolute;
top: 50%;
width: 100%;
}
.is_should_hide3 {
color: #fff;
text-align: center;
font-size: 16px;
}
.is_should_hide4 {
text-align: center;
margin-top: 20px;
}
.is_should_hide5:active,
.is_should_hide5:link {
padding: 5px 20px 5px 20px;
border: 1px solid #fff;
color: #fff;
text-decoration: none;
}
.post_avatar_ {
margin-top: 5px !important;
}
.post_input_ {
padding-left: 36px;
}
.s-users--ls {
width: 100%;
overflow: hidden;
padding: 0px 70px;
min-height: 150px;
}
.s-users--ls-item {
border-bottom: 1px solid #e6ecf0;
padding: 10px 10px;
display: flex;
align-items: center;
margin: 0 0 0 70px;
}
.s-users--ls-item:last-child {
border-bottom: none;
}
.s-users--ls-item_avatar {
width: 50px;
height: 50px;
margin-left: -70px;
}
.s-users--ls-item_h4 {
margin: -2px 0 0 14px;
font-weight: normal;
}
.s-users--ls-item_span {
display: block;
line-height: 16px;
font-size: 13px;
padding: 3px 0 2px 0;
}
.s-users--ls-item button {
margin: 0 0 0 auto;
}
.image_from_url {
position: absolute;
height: 30px;
top: 15px;
left: 30px;
}
.image_from_url_1 {
background: #e5e5e5;
border-radius: 50%;
padding: 5px;
cursor: pointer;
}
.image_from_url_2 {
background: #e5e5e5;
border-radius: 50%;
padding: 5px;
margin-left: 5px;
cursor: pointer;
}
#img_url {
z-index: 100;
max-height: 300px;
}
.ml_1_ {
margin-left: 10px;
}
/*Filters*/
.show_filters_ {
height: 32px;
background-color: rgba(0, 0, 0, 0.27);
cursor: pointer;
width: 32px;
position: absolute;
bottom: 15px;
left: 15px;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.filters_1 {
width: 100%;
height: 600px;
display: none;
position: relative;
text-align: center;
display: none;
}
.filters_2 {
width: 100%;
height: 100%;
}
.filters_3 {
position: absolute;
right: 5px;
top: 5px;
cursor: pointer;
padding: 5px;
background-color: #f7f7f7;
border-radius: 50%;
}
.open_camera_ {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 15px 1px;
}
.open_camera_ a {
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
font-size: 14px;
font-weight: 500;
background-color: #f2f2f2;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
width: 100%;
}
.open_camera_ a svg {
width: 20px;
height: 20px;
margin: 0px 5px -1px 0;
}
.camera_1 {
width: 100%;
height: 600px;
display: none;
position: relative;
text-align: center;
}
.camera_2 {
width: 100%;
height: 100%;
}
.camera_3 {
position: absolute;
right: 7px;
top: 7px;
cursor: pointer;
padding: 5px;
background-color: #f7f7f7;
border-radius: 50%;
}
.camera_4 {
width: 55px;
height: 55px;
position: absolute;
bottom: 15px;
background-color: #2196f3;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
color: white;
display: flex;
align-items: center;
justify-content: center;
left: 50%;
transform: translateX(-50%);
}
.camera_5 {
position: absolute;
bottom: 0;
margin-bottom: 0;
z-index: 50;
display: none;
border-radius: 0;
max-height: 70%;
overflow-y: auto;
}
.camera_6 {
background-color: rgba(255, 0, 0, 0.9);
cursor: pointer;
width: 55px;
height: 55px;
position: absolute;
bottom: 15px;
right: 15px;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.camera_7 {
display: none;
width: 55px;
height: 55px;
position: absolute;
bottom: 15px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
color: white;
align-items: center;
justify-content: center;
left: 50%;
transform: translateX(-50%);
}
.old_messages_1 {
position: absolute;
bottom: -30px;
z-index: 333;
text-align: center;
width: 100%;
cursor: pointer;
}
.old_messages_2 {
background-color: #65b368;
padding: 10px 20px 10px 20px;
border-radius: 20px;
color: #fff;
}
.camera_timer {
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
width: 55px;
position: absolute;
bottom: 15px;
right: 15px;
color: white;
border-radius: 5px;
display: none;
align-items: center;
justify-content: center;
}
#active_session {
color: #4caf50;
}
.user-profile-page-content .user-posts .user-postset_fav:not(.portfolio-item),
.new_prof_user_posts .user-postset_fav:not(.portfolio-item) {
background: #fff;
font-family: "Open Sans", "Pretendard", sans-serif;
transition: box-shadow 0.35s ease-out;
overflow: hidden;
box-shadow: 0 0px 5px rgba(0, 9, 128, 0.05), 0 4px 10px rgba(0, 9, 128, 0.035);
cursor: pointer;
}
.user-profile-page-content .user-posts .user-postset_fav:not(.portfolio-item):hover,
.new_prof_user_posts .user-postset_fav:not(.portfolio-item):hover {
box-shadow: 0 12px 22px rgba(97, 97, 97, 0.05), 0 20px 36px rgba(136, 136, 136, 0.075);
}
.user-profile-page-content .user-posts .user-postset_fav:not(.portfolio-item) .media,
.new_prof_user_posts .user-postset_fav:not(.portfolio-item) .media {
overflow: hidden;
width: 100%;
height: 290px;
background-position: center;
background-size: cover;
position: relative;
}
.user-profile-page-content .user-posts .user-postset_fav:not(.portfolio-item) .media:hover .caption,
.new_prof_user_posts .user-postset_fav:not(.portfolio-item) .media:hover .caption {
visibility: visible;
transition: all 0.2s ease;
opacity: 1;
}
.user-profile-page-content .user-posts .user-postset_fav:not(.portfolio-item) .media .caption,
.new_prof_user_posts .user-postset_fav:not(.portfolio-item) .media .caption {
position: absolute;
left: 0px;
width: 100%;
bottom: 0;
top: 0;
color: #fff;
z-index: 1;
visibility: hidden;
background: rgba(0, 0, 0, 0.35);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
opacity: 0;
}
.user-profile-page-content .user-posts .user-postset_fav:not(.portfolio-item) .media .caption span svg.feather,
.new_prof_user_posts .user-postset_fav:not(.portfolio-item) .media .caption span svg.feather {
margin: -3px 3px 0px 0px;
color: rgba(255, 255, 255, 0.85);
fill: rgba(255, 255, 255, 0.85);
}
.user-profile-page-content .user-posts .user-postset_fav:not(.portfolio-item) .media .category,
.new_prof_user_posts .user-postset_fav:not(.portfolio-item) .media .category {
position: absolute;
right: 15px;
top: 15px;
z-index: 1;
}
.user-profile-page-content .user-posts .user-postset_fav:not(.portfolio-item) .media .category svg.feather,
.new_prof_user_posts .user-postset_fav:not(.portfolio-item) .media .category svg.feather {
fill: rgba(255, 255, 255, 0.65);
margin-top: 0px;
width: 30px;
height: 30px;
}
/*Emoji*/
body .emojionearea .emojionearea-button > div.emojionearea-button-open {
background-position: center;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3e%3cpath fill='%23555' d='M12,17.5C14.33,17.5 16.3,16.04 17.11,14H6.89C7.69,16.04 9.67,17.5 12,17.5M8.5,11A1.5,1.5 0 0,0 10,9.5A1.5,1.5 0 0,0 8.5,8A1.5,1.5 0 0,0 7,9.5A1.5,1.5 0 0,0 8.5,11M15.5,11A1.5,1.5 0 0,0 17,9.5A1.5,1.5 0 0,0 15.5,8A1.5,1.5 0 0,0 14,9.5A1.5,1.5 0 0,0 15.5,11M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3e%3c/svg%3e") !important;
}
body .emojionearea .emojionearea-button > div.emojionearea-button-close {
background-position: center;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24'%3e%3cpath fill='%23555' d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /%3e%3c/svg%3e") !important;
}
/*Comment Like Reply*/
.like_comment {
display: inline-block;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
background: #fff;
border-radius: 50%;
padding: 5px;
color: #8d949e;
position: absolute;
right: -4px;
bottom: -4px;
cursor: pointer;
}
.like_comment svg {
margin: -1px 0 0;
width: 17px;
height: 17px;
stroke-width: 2.5;
}
.like_comment svg.liked_color {
color: #f44336;
fill: #f44336;
}
.events_container {
margin-left: 38px;
margin-right: -40px;
}
.events_container .evnt_cont_btns {
font-weight: 600;
font-size: 12px;
color: #a8a8a8;
margin-top: -5px;
display: inline-block;
line-height: 1;
margin-bottom: -5px;
}
.middot {
margin: 0 6px;
font-size: 12px;
line-height: 1.1;
font-weight: 700;
}
.events_container .add-comment {
padding: 0 10px;
position: relative;
}
.events_container .add-comment .reply_commenting_overlay {
position: absolute;
left: 10px;
right: 10px;
top: 0;
bottom: 0;
overflow: hidden;
text-align: center;
background-color: rgba(255, 255, 255, 0.72);
z-index: 5;
border-radius: 2em;
}
.events_container .add-comment .reply_commenting_overlay #pp_loader {
display: block;
float: none;
padding: 8px;
}
.events_container .add-comment .emojionearea {
box-shadow: none;
border-radius: 2em;
border-color: #dadada;
}
/*Business Options*/
.cd-stretchy-nav {
position: fixed;
z-index: 2;
bottom: 40px;
left: 40px;
}
.cd-stretchy-nav .stretchy-nav-bg {
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
width: 60px;
height: 60px;
border-radius: 30px;
background: #11a357;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
transition: height 0.2s, box-shadow 0.2s;
}
.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {
height: 100%;
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}
.cd-nav-trigger {
position: absolute;
z-index: 3;
bottom: 0;
left: 0;
height: 60px;
width: 60px;
border-radius: 50%;
overflow: hidden;
white-space: nowrap;
color: transparent;
}
.cd-nav-trigger span,
.cd-nav-trigger span::after,
.cd-nav-trigger span::before {
position: absolute;
width: 16px;
height: 2px;
background-color: #fff;
}
.cd-nav-trigger span {
left: 50%;
top: 50%;
bottom: auto;
right: auto;
transform: translateX(-50%) translateY(-50%);
transition: background-color 0.2s;
}
.cd-nav-trigger span::after,
.cd-nav-trigger span::before {
content: "";
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: transform 0.2s;
}
.cd-nav-trigger span::before {
transform: translateY(-6px);
}
.cd-nav-trigger span::after {
transform: translateY(6px);
}
.nav-is-visible .cd-nav-trigger span {
background-color: transparent;
}
.nav-is-visible .cd-nav-trigger span::before {
transform: rotate(-45deg);
}
.nav-is-visible .cd-nav-trigger span::after {
transform: rotate(45deg);
}
.cd-stretchy-nav ul {
position: relative;
z-index: 2;
margin: 0;
padding: 0 0 60px;
visibility: hidden;
transition: visibility 0.3s;
text-align: left;
}
.cd-stretchy-nav ul a {
position: relative;
display: flex;
align-items: center;
height: 50px;
line-height: 50px;
padding: 0 17px;
color: #484848;
font-size: 15px;
transition: color 0.2s;
text-decoration: none;
font-weight: 500;
}
.cd-stretchy-nav ul a:hover {
color: #000;
}
.cd-stretchy-nav ul a svg {
color: white;
}
.cd-stretchy-nav ul span {
display: block;
opacity: 0;
transform: translateX(-5px);
}
.cd-stretchy-nav.nav-is-visible ul {
visibility: visible;
}
.cd-stretchy-nav.nav-is-visible ul span {
opacity: 1;
transform: translateX(30px);
animation: slideIn 0.15s backwards;
transition: transform 0.2s;
}
.cd-stretchy-nav.nav-is-visible ul li:first-of-type span {
animation-delay: 0.15s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) span {
animation-delay: 0.1s;
}
.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) span {
animation-delay: 0.05s;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-5px);
}
to {
opacity: 1;
transform: translateX(30px);
}
}
/*Affiliate*/
.affiliates-desc {
margin-top: 10px;
text-align: center;
}
.social-btn {
text-align: center;
width: 15%;
font-size: 19px;
height: 35px;
position: relative;
line-height: 24px;
}
.aff_link_input {
background-color: #ececec;
border: 0;
padding: 10px 15px;
line-height: 1;
border-radius: 2em;
width: 100%;
max-width: 90%;
outline: none;
margin-bottom: 10px;
}
.aff_share_container {
text-align: center;
margin-bottom: 10px;
}
.aff_share_container .social-btn-parent {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
line-height: 1;
border-radius: 50%;
width: 40px;
height: 40px;
margin: 0 2px;
}
.aff_share_container .social-btn-parent svg {
margin: 0;
color: #fff;
}
.aff_share_container .social-btn-parent.facebook {
background: #337ab7;
}
.aff_share_container .social-btn-parent.twitter {
background: #55acee;
}
.aff_share_container .social-btn-parent.whatsapp {
background: #04aa24;
}
.aff_share_container .social-btn-parent.pinterest {
background: #cb2027;
}
.aff_share_container .social-btn-parent.linkedin {
background: #007bb6;
}
.aff_hiw {
text-align: center;
margin: 20px 0;
}
.aff_hiw svg {
width: 75px;
height: 75px;
margin: 0 auto 30px;
background-color: #eeeeee;
border-radius: 50%;
padding: 15px;
}
.aff_hiw h2 {
position: relative;
margin: 3rem 0 2rem 0;
font-size: 25px;
}
.aff_hiw .bg_number {
position: absolute;
text-align: center;
font-weight: bolder;
top: -37px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
font-size: 90px;
z-index: 0;
opacity: 0.1;
color: #323232;
width: 90px;
height: 90px;
line-height: 90px;
pointer-events: none;
user-select: none;
}
.reff_users_list {
min-height: auto !important;
}
.aff_alert {
background-color: #4caf50;
color: white;
border-radius: 10px;
box-shadow: 0 0 15px rgba(76, 175, 80, 0.4);
margin-bottom: 30px;
padding-left: 45px;
position: relative;
}
.aff_alert svg {
position: absolute;
left: 14px;
top: 14px;
}
/*Go Pro*/
.explore-page-container .sub__header.go_pro_sub_header {
height: auto;
padding-bottom: 90px;
background: linear-gradient(145deg, #ffaec9 0%, #e11e26 100%);
}
.go_pro_wave {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.go_pro_wave path {
fill: #f7f7f7;
}
.go_pro_plan {
background: #fff;
padding: 40px 20px;
border-radius: 7px;
margin-bottom: 5px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.09);
margin-top: 20px;
position: relative;
}
.go_pro_plan b {
font-size: 40px;
}
.go_pro_plan p svg {
width: 20px;
height: 20px;
margin-top: -2px;
}
.go_pro_plan > svg {
background: #ffc8b6;
color: #ff5722;
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
border-radius: 10px;
padding: 6px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.button_go_pro {
margin-top: 30px;
}
.button_go_pro button {
border: 0;
color: white;
padding: 10px 30px;
border-radius: 50rem;
font-size: 16px;
outline: 0;
transition: box-shadow 0.15s ease-in-out;
font-weight: 500;
}
.go_pro_plan.free_plan .button_go_pro button {
background: #607d8b;
box-shadow: none;
}
.go_pro_plan.free_plan .button_go_pro button:hover {
box-shadow: 0 2px 15px rgba(96, 125, 139, 0.5);
}
.go_pro_plan.pro_plan .button_go_pro button {
background: linear-gradient(135deg, #ff9800 0%, #ff5722 100%);
box-shadow: 0 1px 10px rgba(255, 87, 34, 0.35);
}
.go_pro_plan.pro_plan .button_go_pro button:hover {
box-shadow: 0 2px 15px rgba(255, 87, 34, 0.5);
}
/*Payment Modal*/
.modal_scroll {
max-height: calc(100vh - 170px);
overflow-y: auto;
}
.payment_methods_modal .btn,
.payment_methods_wallet_modal .btn {
width: 50%;
color: #2c2c2c;
float: left;
border: 0;
border-radius: 0;
padding: 15px 20px;
transition: all 0.15s;
font-weight: 600;
box-shadow: none;
background-color: white;
}
.payment_methods_modal .btn:hover,
.payment_methods_wallet_modal .btn:hover {
background-color: rgba(0, 0, 0, 0.04);
}
.payment_methods_modal .btn svg,
.payment_methods_wallet_modal .btn svg,
.payment_methods_modal .btn img,
.payment_methods_wallet_modal .btn img {
display: block;
margin: 0 auto 15px;
width: 35px;
height: 35px;
}
/*Ads*/
.m-0 {
margin: 0;
}
.ma_tabs {
margin-bottom: 5px;
}
.ma_tabs ul {
display: -ms-flexbox;
display: flex;
position: relative;
white-space: nowrap;
overflow-x: auto;
border: 0;
}
.ma_tabs ul li {
margin: 0;
position: relative;
z-index: 1;
}
.ma_tabs ul li:first-child {
margin-left: auto;
}
.ma_tabs ul li:last-child {
margin-right: auto;
}
.ma_tabs ul li a {
border-bottom: 1.5px solid #ececec;
font-weight: 500;
font-size: 15px;
padding: 15px 30px;
line-height: 1;
color: #777777;
display: block;
text-decoration: none;
}
.ma_tabs ul li a:hover {
color: #000;
}
.ma_tabs ul li.active a {
border-bottom-color: #4caf50;
color: #4caf50;
background: transparent;
}
.ma_tabs ul li a svg {
width: 20px;
height: 20px;
margin-top: -3px;
}
.ma_tabs ul:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1.5px;
background-color: #ececec;
}
.sponsored:link,
.sponsored:visited {
color: #703544;
text-decoration: none;
}
.my_wallet {
background: linear-gradient(220deg, #0c5128 0%, #11a357 100%) !important;
color: white;
margin: -30px 0 0px;
}
.my_wallet_cont {
text-align: center;
}
.my_wallet_cont svg {
color: rgba(255, 255, 255, 0.8);
margin: 0 0 -15px;
}
.my_wallet_withdraw {
margin: -40px -20px 30px;
padding: 20px 0;
background: linear-gradient(220deg, #415966 0%, #91a3ac 100%) !important;
}
.my_wallet_setting {
margin: -40px -20px 30px;
padding: 20px 0;
}
.create_ads_inputs_selects .pp_mat_select {
margin-bottom: 3em;
}
.create_ads_inputs_selects .pp_mat_select .pp_mat_label {
position: absolute;
top: -7px;
font-size: 13px;
background: #fff;
left: 10px;
padding: 0 5px;
margin: 0;
z-index: 2;
}
.sidebar_ad_main_title a {
text-decoration: none;
color: #6a6a6a;
}
.sidebar_ad .side_ad_img {
display: block;
position: relative;
height: 0;
padding-bottom: 100%;
width: 100%;
}
.sidebar_ad .side_ad_img img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar_ad .caption {
padding: 10px 10px 0px;
}
.sidebar_ad .side_ad_title {
font-weight: 500;
font-size: 16px;
margin-bottom: 3px;
}
.sidebar_ad .side_ad_title a {
color: #1e1e1e;
text-decoration: none;
}
.sidebar_ad .caption p {
color: #545454;
}
.ads_select_country_input .bootstrap-select.form-control {
border-radius: 5px;
font-size: 16px;
box-shadow: none;
height: 49px;
}
.ads_select_country_input .bootstrap-select > .dropdown-toggle {
background-color: transparent !important;
box-shadow: 0 0 rgb(0 0 0 / 0%), 0 0 rgb(0 0 0 / 0%), 0 1px 2px 0 rgb(0 0 0 / 5%) !important;
border-radius: 6px !important;
border: 1px solid #d1d5db;
height: 49px;
padding: 12px 15px;
font-size: 16px;
font-weight: normal;
background: transparent;
color: #555555 !important;
}
.settings-page-container .page-content .sett-active .create_ads_inputs_selects .btn.pp_flat_btn {
min-width: 200px;
}
.create_ads_inputs_selects .fak_image {
height: 117px;
}
/*Funding*/
.fundings {
background: #fff;
border-radius: 7px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
margin-bottom: 30px;
overflow: hidden;
}
.fundings .wrapper {
position: relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.fundings .wrapper img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
object-fit: cover;
}
.fundings .caption {
padding: 15px;
}
.fundings .caption h3 {
margin-top: -5px;
font-size: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 27px;
}
.fundings .caption h3 a {
color: #222;
}
.fundings .caption p {
margin: 10px 0 0;
}
.pp_my_fund_btn_opts {
margin: 15px 0 0;
display: flex;
align-items: center;
}
.pp_my_fund_btn_opts .btn {
flex: 1 1 auto;
user-select: none;
box-sizing: border-box;
cursor: pointer;
padding: 8px 20px;
font-family: "Open Sans", "Pretendard", sans-serif;
text-decoration: none;
box-shadow: none;
border-radius: 2em;
font-size: 13px;
font-weight: 500;
}
.mt-0 {
margin-top: 0;
}
.fund_raise_parent,
.fundings_parent {
margin-top: 80px;
}
.fund_raise {
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
padding: 20px;
margin-bottom: 15px;
}
.fund_col-md {
padding-left: 0;
}
.fund_title {
margin-top: 0;
margin-bottom: 35px;
}
.fund-meta-desc {
font-size: 12px;
width: auto;
overflow: hidden;
color: rgba(0, 0, 0, 0.4);
}
.fundMeta--author-avatar {
vertical-align: middle;
padding-right: 10px;
display: table-cell;
}
.fundMeta--author-avatar img {
width: 48px;
height: 48px;
border-radius: 50%;
}
.fundMeta--author-text {
vertical-align: middle;
display: table-cell;
overflow: hidden;
}
.fundMeta--author-text .main {
font-size: 15px;
font-weight: 500;
color: #3f3f3f;
}
.fund-meta-desc time {
color: #a5a5a5;
font-size: 13px;
}
.fund_main_img {
width: 100%;
margin-bottom: 30px;
border-radius: 10px;
box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.08);
}
.fund_share {
margin-bottom: 30px;
}
.fund_share .social-btn-parent {
width: 33px;
height: 33px;
}
.fund_share .social-btn-parent svg {
width: 20px;
height: 20px;
}
#two_factor_code,
#fluttewave_email {
width: 100%;
font-size: 16px;
padding: 12px 15px;
display: block;
background-color: transparent !important;
box-shadow: 0 0 rgb(0 0 0 / 0%), 0 0 rgb(0 0 0 / 0%), 0 1px 2px 0 rgb(0 0 0 / 5%) !important;
border-radius: 6px !important;
border: 1px solid #d1d5db;
height: auto;
}
.modal-footer .btn.pp_flat_btn {
margin: 0;
margin-right: 0;
margin-left: auto;
}
.fund_progress,
.fundings .caption .progress,
.side_fund_item_progress {
background-color: #e0e1ea;
box-shadow: none;
height: 6px;
margin-bottom: 5px;
}
.fund_progress .progress-bar,
.fundings .caption .progress .progress-bar,
.side_fund_item_progress .progress-bar {
background-color: #387bfa;
font-size: 0;
}
.fund_dnt_hd span {
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 10px;
background-color: rgba(255, 102, 193, 0.2);
color: #ff66c1;
width: 50px;
height: 50px;
border-radius: 10px;
}
.fund_input {
margin-bottom: 20px;
padding-left: 13px;
}
.fund_input .form-control {
background-color: transparent;
border: 1.5px solid transparent;
padding: 8px 10px;
line-height: 60px;
width: 100%;
margin: auto;
max-width: 108px;
outline: none;
box-shadow: none;
height: 60px;
color: #4caf50;
font-size: 37px;
font-weight: 500;
text-align: center;
}
.fund_input input[type="number"]::-webkit-inner-spin-button,
.fund_input input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
width: 10px;
}
.fund_input .form-control:focus {
border-color: #4caf50;
background: #fff;
}
.fund_butns {
text-align: center;
}
.fund_butns .btn {
border: 0;
border-radius: 2em;
padding: 0 16px;
height: 40px;
line-height: 40px;
font-weight: 500;
font-size: 15px;
margin: 0 2px;
transition: all 0.15s;
}
.fund_butns .btn svg {
width: 22px;
height: 22px;
margin-top: -2.5px;
}
.fund_butns .btn.btn-default {
background: rgba(0, 112, 186, 0.2);
color: #0070ba;
}
.fund_butns .btn.btn-success {
color: #4caf50;
background-color: rgba(76, 175, 80, 0.2);
}
.fund_butns .btn:hover {
color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.fund_butns .btn.btn-default:hover {
background: #0070ba;
}
.fund_butns .btn.btn-success:hover {
background-color: #4caf50;
}
.fund div.list .item {
width: 100%;
overflow: hidden;
padding: 10px 0;
position: relative;
display: table;
border-bottom: 1px solid #f0f0f0;
}
.fund div.list .item:last-child {
border: 0;
padding-bottom: 0;
}
.fund div.list .item .wrapper img {
width: 47px;
height: 47px;
}
.fund div.list .item .caption {
display: table-cell;
vertical-align: middle;
padding-left: 10px;
width: 100%;
}
.fund div.list .item .caption p {
margin: 0 0 2px;
}
.fund div.list .item .caption a {
font-size: 17px;
color: #414141;
font-weight: 500;
display: inline-block;
text-decoration: none;
}
.fund div.list .item .caption time {
color: #90949c;
font-size: 12px;
font-weight: 400;
}
.home-page-container .home-sidebar-right div.funding div.list {
max-height: 400px;
}
.home-page-container .home-sidebar-right div.funding div.list .item {
display: block;
overflow: visible;
margin: 0 !important;
cursor: auto;
}
.home-page-container .home-sidebar-right div.funding div.list .item .wrapper {
max-width: calc(100% - 30px);
}
.home-page-container .home-sidebar-right div.funding div.list .item .caption a {
overflow: hidden;
max-height: 25px;
}
.home-page-container .home-sidebar-right div.funding div.list .item .caption {
background-color: white;
display: block;
margin-left: 30px;
margin-top: -20px;
position: relative;
padding: 10px;
border-radius: 7px;
width: auto;
box-shadow: 0 2px 3px rgb(0 0 0 / 10%);
}
.side_fund_item {
border-bottom: 1px solid #ddd;
padding: 15px 5px;
}
.side_fund_item:last-child {
border: 0;
padding-bottom: 0;
}
.side_fund_item .item {
margin-bottom: 15px !important;
}
.side_fund_item .wrapper img {
padding: 0 !important;
border: none !important;
border-radius: 7px;
overflow: hidden;
width: 100% !important;
height: 130px !important;
object-fit: cover;
}
.side_fund_item .caption p {
margin: 0;
font-size: 13px;
}
.side_fund_item_progress {
margin: 0 0 5px;
}
/*Sidebar Pro Users*/
.home-page-container .home-sidebar-right div.pro_members div.list .item {
width: 33.3333333%;
}
.home-page-container .home-sidebar-right div.pro_members div.list .item a {
background-color: #ffeda8;
text-align: center;
}
.home-page-container .home-sidebar-right div.pro_members div.list .item .thumb {
height: 110px;
border-radius: 8px;
}
.home-page-container .home-sidebar-right div.pro_members:hover div.list .item .thumb {
opacity: 1;
}
.home-page-container .home-sidebar-right div.pro_members div.list .item .caption .uname h6 {
color: #161616;
}
/*New Profile*/
.pro_user_new_profile {
width: 100%; /*overflow: hidden;*/
margin-top: 55px;
}
.pro_user_new_profile .user-heading {
height: 200px;
width: 100%;
position: relative;
overflow: hidden;
}
.pro_user_new_profile .user-heading:before {
bottom: 0;
}
.pro_user_new_profile .user-heading:after {
background: linear-gradient(19deg, rgb(146 77 254 / 30%) 0%, rgb(23 208 247 / 30%) 100%);
}
.pro_usr_prof_circle-1 {
width: 290px;
height: 290px;
background-image: radial-gradient(circle 800px at 75% -25%, #000000 0, rgba(255, 255, 255, 0) 100%);
left: -28px;
top: -28px;
opacity: 0.05;
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.pro_usr_prof_circle-2 {
opacity: 0.03;
position: absolute;
border-radius: 50%;
pointer-events: none;
width: 500px;
height: 500px;
background-image: radial-gradient(circle 800px at 10% -25%, #000000 0, rgba(255, 255, 255, 0) 100%);
right: -242px;
top: 17px;
}
.pro_usr_prof_circle-3 {
opacity: 0.04;
position: absolute;
border-radius: 50%;
pointer-events: none;
width: 200px;
height: 200px;
background-image: radial-gradient(circle 800px at 10% -25%, #000000 0, rgba(255, 255, 255, 0) 100%);
right: 128px;
top: -73px;
}
.pro_user_new_profile .user-heading svg {
width: 180px;
height: 180px;
position: absolute;
right: -40px;
bottom: -60px;
opacity: 0.5;
transform: rotate(-45deg);
}
.pro_user_new_profile .user-info .avatar {
width: 180px;
height: 180px;
margin: -120px auto 35px;
position: relative;
z-index: 1;
}
.pro_user_new_profile .user-info .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
box-shadow: 0 0px 0px 5px #f7f7f7;
border-radius: 50%;
}
.mv_img_shdw {
position: relative;
height: 30px;
overflow: hidden;
margin: -25px 20px 0px;
filter: blur(30px);
}
.mv_img_shdw:before {
content: "";
position: absolute;
margin: -110px;
background: inherit;
filter: blur(70px);
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: bottom;
}
.mv_img_shdw .mv_pr_blck {
display: block;
padding: 80px;
position: absolute;
width: 100%;
bottom: 0;
left: 0;
pointer-events: none;
}
.pro_user_new_profile .user-info .uname {
width: 100%;
position: relative;
z-index: 9;
margin: 12px 0;
text-align: center;
}
.pro_user_new_profile .user-info .uname a {
text-decoration: none;
color: inherit;
display: inline-block;
}
.pro_user_new_profile .user-info .uname a h4 {
margin: 0px;
font-size: 30px;
line-height: 40px;
font-weight: 400;
}
.pro_user_new_profile .user-info .uname div.modal-menu {
margin-left: 15px;
display: inline-block;
vertical-align: bottom;
cursor: pointer;
padding: 5px;
border-radius: 50%;
height: 36px;
width: 36px;
}
.pro_user_new_profile .user-info .uname div.modal-menu .dropdown-toggle svg {
margin: 0;
}
.pro_user_new_profile .user-info .uname div.modal-menu .dropdown-menu {
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
border-radius: 2px;
padding: 8px 0;
right: 0;
left: auto;
}
.pro_user_new_profile .user-info .uname div.modal-menu .dropdown-menu li {
min-height: 40px;
height: 40px;
line-height: 40px;
}
.pro_user_new_profile .user-info .uname div.modal-menu .dropdown-menu li a {
padding: 0px 16px;
font-family: "Open Sans", "Pretendard", sans-serif;
height: 40px;
display: block;
text-align: left;
line-height: 40px;
}
.pro_user_new_profile .user-info .status {
font-size: 15px;
text-align: center;
}
.pro_user_new_profile .user-info .social-links {
width: 100%;
text-align: center;
}
.pro_user_new_profile .user-info .social-links .btn-social {
padding: 0;
margin: 0 3px;
}
.pro_user_new_profile .user-info .social-links .btn-social a {
background-color: #ffffff;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.pro_user_new_profile .user-info .social-links .btn-social a:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.pro_user_new_profile .user-info .social-links .btn-social a svg {
margin: 0;
}
.new_prof_btns {
text-align: center;
padding-bottom: 7px;
}
.pro_user_new_profile .user-info .new_prof_btns .btn {
margin: 5px 1px;
padding: 6px 20px;
box-shadow: none;
border-radius: 10px;
font-weight: 500;
font-family: "Open Sans", "Pretendard", sans-serif;
padding: 9px 20px;
height: 40px;
}
.pro_user_new_profile .user-info .new_prof_btns .btn-message {
background-color: #ff7ab9;
color: #fff;
}
.pro_user_new_profile .user-info .new_prof_btns .btn.btn-follow,
.pro_user_new_profile .user-info .new_prof_btns .btn.btn-info {
color: #fff;
}
.pro_user_new_profile .ma_tabs {
margin: 0 0 0;
position: relative;
z-index: 1;
}
.pro_user_new_profile .ma_tabs ul:after {
height: 0;
}
.pro_user_new_profile .ma_tabs ul li:first-child,
.pro_user_new_profile .ma_tabs ul li:last-child {
margin: 0;
}
.pro_user_new_profile .ma_tabs li a {
color: rgba(0, 0, 0, 0.7);
padding: 12px 18px;
border: none;
border-radius: 2em;
cursor: pointer;
}
.pro_user_new_profile .ma_tabs li a:hover {
color: #000;
}
.pro_user_new_profile .ma_tabs li.active a {
background: #fff;
color: #41aefd;
}
.prof_new_look_posts .container {
width: 100%;
max-width: 100%;
padding: 0;
}
.usr_prof_fundng {
position: absolute;
background-color: #ff6a3c;
color: white !important;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
bottom: -15px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.new_prof_user_posts {
padding-top: 0;
}
/*Account Stats*/
.acc_stats_hdr {
overflow: hidden;
border-bottom: 1px solid #f0f0f0;
margin: 0 10px 20px;
padding: 20px 10px !important;
}
.acc_stats_hdr h3 {
margin-top: 0;
}
.acc_stats_hdr select {
width: auto;
}
.acc_stats_stat {
padding: 30px 5px;
border-radius: 15px;
margin-bottom: 25px;
}
.acc_stats_stat svg {
width: 30px;
height: 30px;
}
.acc_stats_stat h3 {
font-size: 19px;
}
.acc_stats_stat p {
margin: 0;
font-weight: bold;
font-size: 28px;
}
.acc_stats_stat.like {
color: #f44336;
background-color: rgba(244, 67, 54, 0.2);
}
.acc_stats_stat.comment {
color: #4caf50;
background-color: rgba(76, 175, 80, 0.2);
}
/*Upload Image*/
.fak_image {
position: relative;
width: 100%;
height: 100px;
cursor: pointer;
border-radius: 5px;
border: 2.5px dashed #e6e6e6;
overflow: hidden;
background: #f7f7f7;
}
.fak_image > div {
width: 100%;
height: 100%;
}
.fak_image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.fak_image .upload_fk_image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
}
.fak_image .upload_fk_image .upload_fk_image_content {
background-color: rgba(0, 0, 0, 0.38);
color: white;
padding: 10px 15px;
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
/*Promoted Post*/
.promoted_post {
font-size: 13px;
color: #ff9800;
font-weight: 500;
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
background-color: white;
padding: 3px 7px 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.07);
border-radius: 10px 10px 0 0;
}
.promoted_post svg {
width: 18px;
height: 18px;
margin: -2px -2px 0 0;
}
/*Bank Transfer*/
.dt_bank_trans_modal .bank_info {
width: 100%;
margin-top: 24px;
margin-bottom: 30px;
}
.dt_bank_trans_modal .bank_info .dt_settings_header {
width: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 7px;
height: auto;
background-color: #e11e26;
background: linear-gradient(145deg, #ffaec9 0%, #e11e26 100%);
padding: 16px;
overflow: hidden;
position: relative;
}
.dt_bank_trans_modal .dt_settings_circle-1 {
width: 290px;
height: 290px;
background-image: radial-gradient(circle 800px at 75% -25%, #000000 0, rgba(255, 255, 255, 0) 100%);
left: -28px;
top: -28px;
opacity: 0.05;
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.dt_bank_trans_modal .dt_settings_circle-2 {
opacity: 0.03;
position: absolute;
border-radius: 50%;
pointer-events: none;
width: 500px;
height: 500px;
background-image: radial-gradient(circle 800px at 10% -25%, #000000 0, rgba(255, 255, 255, 0) 100%);
right: -242px;
top: 17px;
}
.dt_bank_trans_modal .bank_info .bank_info_innr {
position: relative;
width: 100%;
color: #fff;
z-index: 1;
border: 6px solid rgba(255, 255, 255, 0.3);
padding: 20px;
border-radius: 5px;
}
.dt_bank_trans_modal .bank_info .bank_info_innr > svg {
position: absolute;
opacity: 0.3;
left: 16px;
top: 16px;
width: 45px;
z-index: -1;
}
.dt_bank_trans_modal .bank_info .bank_info_innr .row p {
margin: 0;
font-size: 18px;
word-break: break-word;
}
.dt_bank_trans_modal .bank_info .bank_info_innr .row .col {
margin-top: 18px;
}
.dt_bank_trans_modal .bank_info .bank_info_innr .bank_name {
font-size: 22px;
padding: 5px 0.75rem 0 55px;
}
.dt_bank_trans_modal .bank_info .bank_info_innr .help-block {
text-transform: uppercase;
font-size: 12px;
color: rgba(255, 255, 255, 0.73);
}
/*Requests*/
.settings_page_requests {
margin-top: 0;
}
.settings_page_requests .followers--ls {
margin: 0;
}
.settings_page_requests .followers--ls .followers--ls__item {
padding: 15px;
}
.settings_page_requests .request-opts {
margin-top: 15px;
}
.settings_page_requests .request-opts .btn {
border-radius: 50%;
width: 42px;
height: 42px;
}
/*Oops*/
.photo_oops_page {
min-height: auto !important;
padding: 80px 10px !important;
}
.photo_oops_page svg {
display: block;
margin: 0 auto 45px;
}
/*Store*/
.pp_store_head {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
padding: 30px 0;
margin: 0 0 30px;
border-bottom: 1px solid #eaeaea;
}
.pp_store_head > div {
display: flex;
align-items: center;
}
.pp_store_head > div ul li {
margin: 0;
}
.pp_store_head > div ul li a {
background-color: #c767d8;
color: white;
}
.pp_store_head_nav {
margin: 0;
}
.pp_store_head_nav li {
margin: 0 10px 0 0;
display: inline-block;
}
.pp_store_head_nav li a {
display: block;
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
color: #2d2d2d;
font-size: 14px;
font-weight: 500;
line-height: 40px;
text-decoration: none;
padding: 0 15px;
}
.pp_store_head_nav li a svg {
width: 18px;
height: 18px;
margin-top: -2px;
}
.pp_store_head select {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
padding: 0 15px;
color: #2d2d2d;
font-size: 14px;
font-weight: 500;
line-height: 40px;
border-radius: 5px;
border: 0;
height: 40px;
width: 230px;
}
#store_filter {
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
padding: 0 10px;
margin-bottom: 50px;
}
#store_filter .valign {
display: flex;
align-items: center;
}
#store_filter .valign > div {
margin: 20px 10px;
}
#store_filter .valign > div.pp_mat_input {
width: 100%;
}
#store_filter .pp_mat_input input,
#store_filter .pp_mat_select select {
border: 0;
background-color: #f0f0f0 !important;
height: 45px;
padding: 3px 10px;
width: 100%;
border-radius: 50rem !important;
}
#store_filter .pp_mat_input input:focus,
#store_filter .pp_mat_select select:focus {
background-color: white !important;
box-shadow: 0 0 0 2px #66afe9 !important;
}
#store_filter .dropdown {
position: absolute;
top: 10px;
right: 10px;
}
#store_filter .dropdown .dropdown-menu {
padding: 20px 20px 5px;
min-width: 300px;
}
#store_filter .dropdown .dropdown-menu .pp_mat_input {
margin-bottom: 1.7em;
}
#inputRange {
margin: 0;
}
#inputRange #search_min {
width: 49%;
outline: 0;
display: inline-block;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
#inputRange #search_max {
width: 49%;
outline: 0;
display: inline-block;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
#store_search_div button {
border: 0;
padding: 13px 30px;
border-radius: 50rem;
font-size: 17px;
outline: 0;
transition: all 0.15s ease-in-out;
font-weight: 500;
background: #607d8b;
min-width: 150px;
margin: 0 auto;
display: block;
flex: 0 0 auto;
}
.pp_store_item_lilinfo {
color: #fff;
text-align: right;
background-color: rgba(0, 0, 0, 0.6);
padding: 3px 10px;
border-radius: 5px;
}
.pp_store_item_lilinfo p {
margin: 0;
}
.pp_store_pic_details {
padding: 0 5px;
overflow-y: auto;
}
.pp_store_pic_details h3 {
margin: 0 0 15px;
font-size: 20px;
padding: 0 7px;
}
.pp_store_pic_details .table > tbody > tr > td {
border-top-color: #ececec;
padding: 12px 8px;
}
.pp_store_pic_details_name {
width: 135px;
font-weight: 500;
}
.pp_store_pic_details_name svg {
width: 17px;
height: 17px;
opacity: 0.7;
margin: -2px 3px 0 0;
}
.pp_store_pic_details_detail {
word-break: break-all;
}
.paypal_btn {
padding: 12px 25px;
font-weight: 500;
font-size: 14px;
border: 0;
transition: all 0.3s;
background-color: rgba(63, 81, 181, 0.25);
color: #3f51b5;
min-width: 120px;
margin: 15px auto;
display: block;
border-radius: 5px;
box-shadow: none;
width: calc(100% - 25px);
font-family: "Open Sans", "Pretendard", sans-serif;
line-height: 1;
}
.paypal_btn svg {
width: 20px;
height: 22px;
margin-top: -3px;
}
.pp_store_tra_hed {
position: relative;
padding-left: 45px;
margin-bottom: 20px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.pp_store_tra_hed svg {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
}
.pp_store_tra_hed h4 {
margin: 0 0 5px;
}
.pp_store_tra_hed p {
margin: 0;
}
.pp_store_tratale,
.pp_store_upload {
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
padding: 5px;
margin: 15px 0;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.pp_store_tratale .table {
margin: 0;
}
.pp_store_tratale .table > thead > tr > th {
border-bottom: 1px solid #ececec;
font-weight: 500;
}
.pp_store_transct_list td {
vertical-align: middle !important;
padding: 12px 8px !important;
border-top: 1px solid #eeeeee !important;
}
.pp_store_transct_list .store_img img {
width: 50px;
height: 50px;
border-radius: 5px;
object-fit: cover;
}
.pp_store_transct_list .store_buy a {
color: #464646;
text-decoration: none;
}
.pp_store_transct_list .store_buy a img {
width: 35px;
height: 35px;
border-radius: 50%;
margin-right: 4px;
}
.pp_store_upload {
padding: 30px;
}
.pp_store_upload .pp_mat_input,
.pp_store_upload .pp_mat_select {
margin: 0 0 30px;
}
.pp_store_upload .pp_mat_input textarea {
height: auto;
}
.pp_store_upload .fak_image {
padding-bottom: 100%;
height: 0;
border: 0;
border-radius: 10px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.pp_store_upload .fak_image > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.pp_store_upload .pp_load_loader {
position: relative;
text-align: center;
padding-top: 2px;
}
.pp_store_upload .btn.pp_flat_btn {
display: block;
user-select: none;
padding: 10px 35px;
border-radius: 2em;
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 15px;
margin: 30px auto 15px;
background-color: #00b289;
border-color: #00b289;
transition: all 0.3s ease-in-out;
height: 40px;
}
.pp_store_lic_chose {
display: flex;
}
.pp_store_lic_chose .btn {
border: 0;
font-size: 20px;
min-width: 45px;
margin-left: 10px;
border-radius: 5px;
}
.pp_store_license_select {
display: block;
margin: 10px 5px;
}
.pp_store_license_select [type="radio"]:not(:checked),
.pp_store_license_select [type="radio"]:checked {
position: absolute;
opacity: 0;
pointer-events: none;
}
.pp_store_license_select .lnce_name {
display: block;
padding: 13px 15px 15px;
background-color: #fdfdfd;
border-radius: 8px;
line-height: 1;
box-shadow: inset 0 0 0 1px #dedede;
}
.pp_store_license_select .lnce_name .duration {
display: block;
font-weight: 600;
font-size: 14px;
}
.pp_store_license_select .lnce_name a {
display: none;
float: right;
cursor: pointer;
background-color: #c767d8;
color: white;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
font-size: 14px;
font-weight: 500;
line-height: 33px;
text-decoration: none;
padding: 0 15px;
min-width: 112px;
text-align: center;
margin: 5px 0 0;
}
.pp_store_license_select .lnce_name .price {
font-weight: 600;
font-size: 27px;
padding-top: 10px;
display: none;
}
.pp_store_license_select [type="radio"]:checked + span {
background-color: rgba(0, 0, 0, 0.1);
}
.pp_store_license_select [type="radio"]:checked + span .price {
display: inline-block;
}
.pp_store_license_select [type="radio"]:checked + span a {
display: inline-block;
}
.pp_store_item .category {
bottom: 15px;
min-width: 170px;
}
.pp_store_item .pp_store_item_lilinfo {
height: 100%;
text-align: inherit;
backdrop-filter: blur(5px);
background-color: rgb(0 0 0 / 50%);
padding: 9px;
}
.pp_store_item .pp_store_item_lilinfo b {
font-weight: 300;
font-size: 44px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.explore-page-container .explore-posts-container .explore-postset .image .pp_store_item .caption {
visibility: visible;
opacity: 1;
background: transparent;
}
.explore-page-container .explore-posts-container .explore-postset .image .pp_store_item .caption .user__ {
background: transparent;
text-align: center;
}
.explore-page-container .explore-posts-container .explore-postset .image .pp_store_item .caption .user__ img {
float: none;
}
.explore-page-container .explore-posts-container .explore-postset .image .pp_store_item .caption .user__ a {
margin: 5px 0 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.explore-page-container .explore-posts-container .explore-postset .image .pp_store_item .caption span {
margin: 0 2px;
}
.store_total_sell {
display: -webkit-box;
display: -webkit-inline-flex;
display: -ms-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: rgb(76 175 80 / 0.15);
color: #4caf50;
border-radius: 10px;
padding: 5px 30px 10px;
line-height: normal;
}
.store_total_sell b {
font-weight: 400;
font-size: 75px;
margin: 0 12px 0 0;
}
.store_total_sell div {
font-weight: 500;
font-size: 19px;
}
/*Blog*/
.explore-page-container .sub__header.pp_blog_sub_header {
background: linear-gradient(145deg, #38983c 0%, #4caf50 100%);
height: 300px;
}
.pp_blogs_main_cont {
padding-top: 30px;
}
.pp_blog_posts,
.pp_blogs_sidebar {
background: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
padding: 15px 0px 0;
margin-bottom: 20px;
font-family: "Open Sans", "Pretendard", sans-serif;
overflow: hidden;
}
.pp_blog_posts .header {
padding: 10px 40px 25px;
position: relative;
}
.pp_blog_posts .header .dropdown {
visibility: visible;
opacity: 1;
transform: scale(1);
position: absolute;
top: 0;
right: 10px;
padding: 4px 5px;
cursor: pointer;
}
.pp_blog_posts .header .dropdown ul li a {
font-weight: 500;
}
.pp_blog_posts .header h2 {
text-align: center;
margin: 0 0 8px;
font-weight: 100;
}
.pp_blog_posts .header h2 a {
text-decoration: none;
color: black;
}
.pp_blog_posts .header > div:not(.dropdown) {
text-align: center;
}
.pp_blog_posts .post-images img {
object-fit: cover;
height: 355px;
}
.pp_blog_posts .caption {
padding: 25px 55px 35px;
font-size: 15px;
line-height: 32px;
}
.pp_blogs_sidebar {
padding: 15px;
}
.pp_blogs_sidebar .stories h5 {
margin: 0 0 15px;
font-size: 16px;
}
.pp_side_cat_list {
margin: -5px;
}
.pp_side_cat_list .item {
margin: 5px;
display: inline-block;
}
.pp_side_cat_list .item a {
text-decoration: none;
color: #386f3b;
background-color: rgba(139, 195, 74, 0.12);
display: block;
padding: 7px 10px;
border-radius: 5px;
font-weight: 500;
font-size: 13px;
}
.pp_blogs_read_main_cont {
padding-top: 70px;
}
.pp_blogs_read_main_cont .pp_blog_posts .post-images img {
height: 500px;
}
/*Share Modal*/
.pp_share_Post {
max-width: 500px;
}
.pp_share_Post_links {
margin: 0;
}
.pp_share_Post_links .social-btn {
width: auto;
font-size: inherit;
height: auto;
line-height: 1;
display: inline-block;
margin: 0 4px 0 0;
}
.pp_share_Post_links .social-btn svg {
width: 34px;
height: 34px;
}
/*Calling modal*/
.pp_call_modals {
overflow: auto;
}
.pp_call_modals.in {
display: flex !important;
}
.pp_call_modals .modal-dialog {
width: 100%;
max-width: 450px;
margin: auto;
}
.dt_call_ing,
.dt_call_rec_ing {
text-align: center;
border: 0;
}
.pp_call_modals .modal-header {
border: 0;
padding: 0;
}
.dt_call_ing > svg {
width: 90px;
height: 90px;
margin-bottom: 24px;
margin-top: 24px;
}
.dt_call_ing .modal-footer,
.dt_call_rec_ing .modal-footer {
padding: 10px 6px 25px;
text-align: center;
border: 0;
margin: 0;
}
.dt_call_rec_ing_detal {
padding-top: 24px;
}
.dt_call_rec_ing_detal img {
width: 100px;
height: 100px;
margin: 0 auto 20px;
display: block;
border-radius: 50%;
}
.dt_call_rec_ing_detal p {
margin-top: 0;
}
.dt_call_rec_ing .modal-footer .btn {
color: #fff;
margin: 0 9px;
width: 48px;
height: 48px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
}
.dt_call_rec_ing .modal-footer .btn:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.23);
}
/*Video call*/
.video-con {
background: #222;
height: calc(100vh - 50px);
margin: 50px 0 0;
}
#remote-media,
.video-con {
position: relative;
}
#remote-media h3 {
text-align: center;
color: #fff;
padding: 170px 0 30px;
font-size: 25px;
}
#remote-media video:nth-child(2) {
width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
height: calc(100vh - 51px);
}
.end_vdo_call,
.start_vdo_call {
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
height: 45px;
border-radius: 2em;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 30px;
text-transform: none;
line-height: 35px;
background-color: #d9534f;
}
.end_vdo_call:hover,
.start_vdo_call:hover {
background-color: #e66662;
}
.end_vdo_call svg,
.start_vdo_call svg {
margin-right: 9px;
}
#local-media video {
width: 200px;
height: 240px;
position: absolute;
top: 23px;
right: 20px;
background: #000;
border-radius: 5px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
/*Create Blog*/
.btn-create_blog {
background-color: white;
margin-top: 10px;
color: black;
}
.pp_create_blog .fak_image {
padding-bottom: 74%;
margin-bottom: 20px;
}
.pp_create_blog .pp_mat_input,
.pp_create_blog .pp_mat_select {
margin: 0 0 20px;
}
.pp_create_blog .pp_mat_input input,
.pp_create_blog .pp_mat_select select,
.pp_create_blog .pp_mat_input textarea {
padding: 10px;
}
/*Blog Comments*/
.pp_blog_comms {
margin: -10px 50px 0;
}
.pp_blog_comms .home-posts-container .timeline-posts {
box-shadow: none;
}
.pp_blog_comms .home-posts-container .timeline-posts > h4 {
margin-top: 0;
}
.pp_blog_comms .home-posts-container .timeline-posts .comments-area .add-comment {
padding: 10px 0px 4px;
}
.pp_blog_comms .emojionearea,
.pp_blog_comms .emojionearea.form-control {
background-color: #ececec;
border-radius: 2em;
}
.pp_blog_comms .emojionearea.emojionearea-inline > .emojionearea-editor {
padding: 8px 0;
}
.pp_blog_comms .home-posts-container .timeline-posts .comments-area .post-comments-list li {
padding: 10px 30px 5px 0px;
}
.pp_blog_comms .home-posts-container .timeline-posts .comments-area .post-comments-list li .pp_com_body span {
padding: 7px 10px;
}
.pp_blog_comms .home-posts-container .timeline-posts .comments-area .post-comments-list li .delcomment {
right: 0px;
top: 5px;
}
/*Progress Bar*/
.pp_post_progress {
margin: 0 15px 10px;
background-color: rgba(0, 0, 0, 0.09);
border-radius: 2em;
}
.pp_post_progress .progress-bar {
float: none;
line-height: 1;
box-shadow: none;
border-radius: 2em;
background-color: #4caf50;
color: #4caf50;
height: 7px;
font-size: 2px;
}
.pp_post_progress.img {
margin: 0 15px;
background-color: rgb(33 150 243 / 20%);
}
.pp_post_progress.img .progress-bar {
margin: 15px 0 0;
background-color: #03a9f4;
}
/*Shared Post*/
.home-page-container .home-posts-container .timeline-posts .pp_shared_post_author {
padding: 0 15px 5px;
}
.pp_shared_post_author_innr {
border: 1px solid #e0e0e0;
border-radius: 0 0 5px 5px;
padding: 8px;
border-top: 0;
}
.home-page-container .home-posts-container .timeline-posts .pp_shared_post_author img {
width: 25px;
height: 25px;
margin: 0px 3px 0 0;
}
/*Live*/
.wow_go_live_cont {
background: #000;
}
.wow_go_live_cont #remote-media h3 {
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.wow_go_live_cont > .containerr {
background: #000;
height: 100%;
color: white;
}
.wow_go_live_cont > .containerr > div {
height: 100%;
}
.wow_go_live_cont .empty_state {
margin: 0 !important;
display: flex;
flex-direction: column;
justify-content: center;
height: calc(100vh - 50px);
}
.wow_go_live_cont .empty_state svg {
display: block;
margin: 0 auto 15px;
width: 60px;
height: 60px;
color: #ffffff;
background-color: #4a4a4a;
border-radius: 50%;
padding: 14px;
}
.wow_liv_counter {
z-index: 2;
position: absolute;
left: 15px;
top: 15px;
background-color: #f44336;
border-radius: 4px;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
min-width: 60px;
line-height: 25px;
font-size: 12px;
font-weight: 500;
color: #ffffff;
text-align: center;
padding: 0 10px;
text-transform: uppercase;
}
#main_live_video {
height: 100%;
width: 100%;
}
.live_mic_cam_switch {
position: absolute;
right: 0;
top: 65px;
height: auto !important;
}
.mic_drop,
.cam_drop {
display: inline-block;
}
.mic_drop > .btn,
.cam_drop > .btn {
background-color: #232323;
border: 0;
padding: 7px;
line-height: 1;
color: white;
}
.mic_drop .dropdown-menu div,
.cam_drop .dropdown-menu div {
padding: 5px 12px;
color: #1a1a1a;
}
.wow_liv_comments_feed {
position: absolute;
z-index: 2;
bottom: 0;
width: 100%;
left: 0;
right: 0;
padding: 120px 15px 10px;
}
.wow_liv_comments_feed .main-comment .user-name a {
color: white;
margin-left: 10px;
}
.wow_liv_comments_feed .main-comment .user-comment {
color: #dcdcdc;
padding-left: 66px !important;
}
.live_comments .user_avatar {
border: 2px solid #bec2c9;
padding: 2px;
width: 56px;
height: 56px;
border-radius: 50%;
}
.main-comment.live_comments {
margin-bottom: 10px;
}
.end_video_text {
z-index: 9;
}
.wow_go_live_btn,
.wow_end_live_btn {
border: 0;
left: auto;
bottom: auto;
top: 15px;
right: 0;
transform: none;
height: 38px;
border-radius: 5px;
font-weight: 500;
text-transform: uppercase;
}
.wow_go_live_btn svg,
.wow_end_live_btn svg {
width: 18px;
height: 18px;
}
.wow_go_live_btn {
background-color: #4cae4c !important;
}
/*Charrk*/
.charrk_hdr {
border-radius: 0 0 36px 36px;
position: relative;
overflow: hidden;
padding: 70px;
background-color: #fff;
}
.charrk_hdr:before {
content: "";
position: absolute;
background: #1a6dff;
background: linear-gradient(135deg, #1a6dff 0%, #c822ff 100%);
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
}
.charrk_hdr_title {
position: relative;
font-size: 65px;
background: -webkit-linear-gradient(135deg, #1a6dff 0%, #c822ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 500;
line-height: 1;
margin: -5px 0 5px;
}
.charrk_hdr > svg {
position: absolute;
right: -23px;
margin: 0;
bottom: -20px;
height: auto;
width: 210px;
opacity: 0.2;
}
.circle_green {
position: absolute;
top: -30px;
left: -30px;
width: 200px;
height: 200px;
border-radius: 100px;
background: radial-gradient(circle, rgb(26 109 255 / 40%), #1a6dff);
opacity: 0.1;
}
.circle_blue {
position: absolute;
top: -60px;
left: 130px;
width: 200px;
height: 200px;
border-radius: 100px;
background: radial-gradient(circle, rgb(200 34 255 / 40%), #c822ff);
opacity: 0.1;
}
.charrk-page-container .explore-posts-container .explore-postset {
border-radius: 12px;
}
.charrk-page-container .explore-posts-container .explore-postset .image {
height: 340px;
}
.charrk-page-container .explore-postset .user {
position: relative;
padding: 13px;
}
.charrk-page-container .explore-postset .user img {
position: absolute;
top: -15px;
right: 10px;
width: 40px !important;
height: 40px !important;
border: 5px solid #fff;
border-radius: 50%;
}
.charrk-page-container .explore-postset .user svg {
width: 14px;
height: 14px;
margin-top: -3px;
fill: currentColor;
opacity: 0.8;
}
.charrk-page-container .explore-postset .user p {
margin: 6px 0 0;
font-weight: 600;
line-height: normal;
font-size: 15px;
opacity: 0.9;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.charrk_hdr.explore_page {
margin-bottom: 30px;
}
.charrk_hdr.explore_page:before {
background: #fb9ab2;
background: linear-gradient(135deg, #fb9ab2 0%, #ed5867 100%);
}
.charrk_hdr.explore_page .circle_green {
background: radial-gradient(circle, rgb(26 109 255 / 40%), #fb9ab2);
}
.charrk_hdr.explore_page .circle_blue {
background: radial-gradient(circle, rgb(200 34 255 / 40%), #fb9ab2);
}
.charrk_hdr.explore_page .charrk_hdr_title {
font-size: 50px;
background: -webkit-linear-gradient(135deg, #3d3695 0%, #fb9ab2 100%);
line-height: normal;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.charrk_hdr.explore_page p {
font-size: 22px;
font-weight: 500;
}
.charrk_hdr.store:not(.ads) {
border-radius: 0 0 10px 10px;
}
.charrk_hdr.store:before {
background: #f06475;
background: linear-gradient(135deg, #f064df 0%, #f06475 100%);
}
.charrk_hdr.store .charrk_hdr_title {
font-size: 50px;
background: -webkit-linear-gradient(135deg, #f064df 0%, #f06475 100%);
line-height: normal;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.charrk_hdr.store .btn {
z-index: 1;
position: relative;
border-radius: 5px;
box-shadow: 0 1px 2px rgb(0 0 0 / 7%);
font-size: 14px;
font-weight: 500;
line-height: 40px;
text-decoration: none;
padding: 0 16px;
background-color: #f06475;
color: white;
border: 0;
margin-top: 10px;
}
.charrk_hdr.ads {
margin-bottom: 30px;
}
.charrk_hdr.ads:before {
background: #0ec40b;
background: linear-gradient(135deg, #0ec40b 0%, #648ff0 100%);
}
.charrk_hdr.ads .charrk_hdr_title {
background: -webkit-linear-gradient(135deg, #009688 0%, #09a234 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.charrk_hdr.ads .btn {
background-color: #4caf50;
}
.charrk_hdr.pro:before {
background: #ff9800;
background: linear-gradient(135deg, #ff9800 0%, #ff4e00 100%);
}
.charrk_hdr.pro .circle_green {
background: radial-gradient(circle, rgb(244 67 54 / 40%), #f44336);
}
.charrk_hdr.pro .circle_blue {
background: radial-gradient(circle, rgb(255 87 34 / 40%), #ff5722);
}
.charrk_hdr.pro .charrk_hdr_title {
background: -webkit-linear-gradient(135deg, #ff9800 0%, #ff4e00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: normal;
margin: -15px 0 5px;
}
.charrk_hdr h4 {
position: relative;
font-size: 24px;
font-weight: normal;
color: #76089a;
}
.charrk_hdr.pro h4 {
}
/*Transition*/
#page_content {
transition: opacity 0.25s linear;
}
#page_content.opacity_start {
opacity: 0;
pointer-events: none;
}
/*VR Player*/
body .vjs-matrix.video-js.vjs-theme-sea .vjs-control-bar {
height: 45px;
background-color: hsla(0, 0%, 100%, 0.4);
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-button:hover {
color: #4176bc;
background: linear-gradient(0deg, #d0ddee, #fff);
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-button > .vjs-icon-placeholder:before {
line-height: 2.2;
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-time-control {
line-height: 45px;
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-picture-in-picture-control,
.vjs-theme-sea .vjs-volume-panel {
display: none;
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-progress-control .vjs-play-progress {
background-color: rgb(96 125 139 / 90%);
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-progress-control .vjs-play-progress:before {
display: none;
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-progress-control .vjs-slider {
background-color: rgb(96 125 139 / 10%);
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-progress-control .vjs-load-progress div {
background: hsla(0, 0%, 100%, 0.5);
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-progress-control .vjs-progress-holder {
margin: 0;
height: 100%;
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-progress-control .vjs-time-tooltip {
background-color: rgb(96 125 139 / 50%);
color: #fff;
}
body .vjs-matrix.video-js.vjs-theme-sea .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip {
background-color: hsla(0, 0%, 100%, 0.7);
color: #4176bc;
}
.vjs-matrix.video-js .vjs-progress-holder .vjs-load-progress,
.vjs-matrix.video-js .vjs-progress-holder .vjs-load-progress div,
.vjs-matrix.video-js .vjs-progress-holder .vjs-play-progress,
.vjs-matrix.video-js .vjs-progress-holder .vjs-tooltip-progress-bar {
height: 100%;
}
.vjs-matrix.video-js .vjs-mouse-display:after,
.vjs-matrix.video-js .vjs-play-progress:after {
display: none;
}
.vjs-matrix.video-js .vjs-control:before {
font-size: 28px;
line-height: 44px;
}
.vjs-matrix.video-js .vjs-seek-to-live-control {
display: none;
}
.vjs-matrix.video-js .vjs-time-control {
font-size: 16px;
}
.vjs-matrix.video-js .vjs-time-tooltip {
height: 35px;
}
.vjs-matrix.video-js .vjs-big-vr-play-button {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' version='1.1' width='512' height='512' x='0' y='0' viewBox='0 0 512 512' xml:space='preserve'%3e%3cg%3e%3cpath xmlns='http://www.w3.org/2000/svg' style='' d='M446.156,81.559l-24.359-48.234c-1.984-3.949-6.805-5.547-10.75-3.535 c-3.938,1.992-5.523,6.805-3.531,10.746l7.534,14.918C369.959,19.551,314.498,0.008,256,0.008 c-68.383,0-132.664,26.629-181.016,74.98S0,187.625,0,256.008s26.633,132.664,74.984,181.016c1.563,1.563,3.609,2.344,5.656,2.344 s4.094-0.781,5.656-2.344c3.125-3.125,3.125-8.188,0-11.313C40.969,380.383,16,320.117,16,256.008S40.969,131.629,86.297,86.301 S191.891,16.008,256,16.008c54.822,0,106.799,18.309,149.062,51.942l-16.265-4.282c-4.266-1.121-8.648,1.422-9.773,5.695 s1.422,8.648,5.695,9.773l52.258,13.762c0.68,0.18,1.359,0.266,2.039,0.266c2.375,0,4.68-1.063,6.219-2.969 C447.219,87.75,447.578,84.367,446.156,81.559z' fill='%23ffffff' data-original='%23c0bcc1' class=''/%3e%3cg xmlns='http://www.w3.org/2000/svg'%3e%3cpath style='' d='M221.672,509.648c-0.359,0-0.734-0.023-1.102-0.078c-5.43-0.75-10.914-1.688-16.289-2.797 c-4.328-0.891-7.109-5.125-6.219-9.453c0.891-4.32,5.063-7.094,9.453-6.219c5.023,1.039,10.109,1.914,15.242,2.625 c4.375,0.602,7.438,4.641,6.828,9.016C229.031,506.75,225.609,509.648,221.672,509.648z' fill='%23ffffff' data-original='%23dbd9dc' class=''/%3e%3cpath style='' d='M171.273,497.156c-0.906,0-1.828-0.156-2.734-0.484c-5.188-1.883-10.344-3.953-15.336-6.148 c-4.047-1.773-5.883-6.5-4.102-10.539c1.766-4.039,6.484-5.883,10.539-4.102c4.711,2.07,9.5,3.984,14.367,5.758 c4.148,1.508,6.297,6.094,4.781,10.25C177.609,495.141,174.539,497.156,171.273,497.156z' fill='%23ffffff' data-original='%23dbd9dc' class=''/%3e%3cpath style='' d='M124.625,474.391c-1.453,0-2.922-0.391-4.242-1.219c-4.664-2.93-9.242-6-13.695-9.211 c-3.586-2.578-4.398-7.578-1.82-11.164c2.57-3.586,7.578-4.398,11.164-1.82c4.188,3.008,8.469,5.891,12.852,8.633 c3.742,2.352,4.875,7.289,2.531,11.031C129.891,473.063,127.289,474.391,124.625,474.391z' fill='%23ffffff' data-original='%23dbd9dc' class=''/%3e%3cpath style='' d='M492.477,338.945c-0.797,0-1.609-0.117-2.414-0.375c-4.211-1.328-6.547-5.828-5.211-10.039 c1.547-4.898,2.945-9.867,4.188-14.891c1.055-4.289,5.414-6.93,9.68-5.852c4.289,1.055,6.914,5.391,5.852,9.68 c-1.32,5.367-2.813,10.664-4.469,15.891C499.023,336.766,495.875,338.945,492.477,338.945z' fill='%23ffffff' data-original='%23dbd9dc' class=''/%3e%3cpath style='' d='M502.859,288.109c-0.25,0-0.508-0.008-0.766-0.039c-4.398-0.414-7.625-4.32-7.203-8.719 c0.484-5.102,0.813-10.25,0.984-15.453c0.133-4.414,3.938-8.063,8.25-7.734c4.414,0.141,7.883,3.836,7.734,8.25 c-0.172,5.531-0.531,11.023-1.047,16.453C510.422,285.008,506.938,288.109,502.859,288.109z' fill='%23ffffff' data-original='%23dbd9dc' class=''/%3e%3cpath style='' d='M502.453,236.219c-4.031,0-7.492-3.031-7.945-7.125c-0.555-5.055-1.297-10.203-2.203-15.297 c-0.773-4.352,2.125-8.508,6.469-9.281c4.438-0.781,8.516,2.125,9.281,6.469c0.969,5.453,1.766,10.953,2.359,16.359 c0.484,4.391-2.688,8.344-7.078,8.828C503.039,236.203,502.742,236.219,502.453,236.219z' fill='%23ffffff' data-original='%23dbd9dc' class=''/%3e%3cpath style='' d='M491.328,185.531c-3.352,0-6.477-2.117-7.594-5.477c-1.625-4.898-3.422-9.734-5.359-14.492 c-1.672-4.094,0.297-8.762,4.383-10.43c4.078-1.68,8.758,0.289,10.43,4.383c2.078,5.086,4,10.297,5.734,15.492 c1.391,4.188-0.875,8.719-5.07,10.117C493.016,185.398,492.164,185.531,491.328,185.531z' fill='%23ffffff' data-original='%23dbd9dc' class=''/%3e%3cpath style='' d='M469.828,138.301c-2.742,0-5.406-1.406-6.898-3.938c-2.625-4.449-5.383-8.813-8.281-13.078 c-2.484-3.656-1.531-8.633,2.125-11.113c3.656-2.488,8.625-1.531,11.109,2.121c3.086,4.547,6.031,9.199,8.828,13.945 c2.242,3.805,0.977,8.711-2.828,10.953C472.609,137.945,471.211,138.301,469.828,138.301z' fill='%23ffffff' data-original='%23dbd9dc' class=''/%3e%3c/g%3e%3cpath xmlns='http://www.w3.org/2000/svg' style='' d='M446.156,81.559l-24.359-48.234c-1.984-3.949-6.805-5.547-10.75-3.535 c-3.938,1.992-5.523,6.805-3.531,10.746l7.534,14.918C369.959,19.551,314.498,0.008,256,0.008c-10.135,0-20.161,0.655-30.063,1.861 c-4.761,0.58-7.867,5.36-6.556,9.974c0.015,0.052,0.029,0.104,0.044,0.155c1.081,3.812,4.738,6.222,8.671,5.745 c9.192-1.115,18.495-1.735,27.904-1.735c54.822,0,106.799,18.309,149.062,51.942l-16.265-4.282 c-4.266-1.121-8.648,1.422-9.773,5.695s1.422,8.648,5.695,9.773l52.258,13.762c0.68,0.18,1.359,0.266,2.039,0.266 c2.375,0,4.68-1.063,6.219-2.969C447.219,87.75,447.578,84.367,446.156,81.559z' fill='%23ffffff' data-original='%239c969e' class=''/%3e%3cg xmlns='http://www.w3.org/2000/svg'%3e%3cpath style='' d='M436,511.992c-19.852,0-36-16.148-36-36v-40c0-19.852,16.148-36,36-36s36,16.148,36,36v40 C472,495.844,455.852,511.992,436,511.992z M436,415.992c-11.031,0-20,8.969-20,20v40c0,11.031,8.969,20,20,20s20-8.969,20-20v-40 C456,424.961,447.031,415.992,436,415.992z' fill='%23ffffff' data-original='%23afd755' class=''/%3e%3cpath style='' d='M356,439.992c-7.398,0-14.274,2.253-20,6.094v-10.094c0-11.031,8.969-20,20-20 c5.273,0,10.25,2.031,14.008,5.727c3.156,3.094,8.219,3.055,11.313-0.094c3.102-3.148,3.055-8.219-0.094-11.313 c-6.773-6.656-15.727-10.32-25.227-10.32c-19.852,0-36,16.148-36,36v40c0,19.852,16.148,36,36,36s36-16.148,36-36 S375.852,439.992,356,439.992z M356,495.992c-11.031,0-20-8.969-20-20s8.969-20,20-20s20,8.969,20,20S367.031,495.992,356,495.992z ' fill='%23ffffff' data-original='%23afd755' class=''/%3e%3cpath style='' d='M276,455.992c-4.422,0-8-3.578-8-8s3.578-8,8-8c6.617,0,12-5.383,12-12s-5.383-12-12-12 c-2.625,0-5.109,0.828-7.188,2.391c-3.539,2.672-8.547,1.945-11.203-1.578c-2.656-3.531-1.953-8.547,1.578-11.203 c4.875-3.672,10.688-5.609,16.813-5.609c15.438,0,28,12.563,28,28S291.438,455.992,276,455.992z' fill='%23ffffff' data-original='%23afd755' class=''/%3e%3c/g%3e%3cg xmlns='http://www.w3.org/2000/svg'%3e%3cpath style='' d='M276,511.992c-13.836,0-26.609-8.078-32.539-20.586c-1.898-3.992-0.195-8.766,3.797-10.656 c4.008-1.891,8.766-0.188,10.656,3.797c3.297,6.953,10.398,11.445,18.086,11.445c11.031,0,20-8.969,20-20s-8.969-20-20-20 c-4.422,0-8-3.578-8-8s3.578-8,8-8c19.852,0,36,16.148,36,36S295.852,511.992,276,511.992z' fill='%23ffffff' data-original='%2391c85f' class=''/%3e%3cpath style='' d='M436,511.992c-19.852,0-36-16.148-36-36v-28c0-4.422,3.578-8,8-8s8,3.578,8,8v28 c0,11.031,8.969,20,20,20s20-8.969,20-20v-28c0-4.422,3.578-8,8-8s8,3.578,8,8v28C472,495.844,455.852,511.992,436,511.992z' fill='%23ffffff' data-original='%2391c85f' class=''/%3e%3cpath style='' d='M356,439.992c-7.547,0-14.542,2.354-20.335,6.338c-0.785-3.595-3.833-6.338-7.665-6.338 c-4.422,0-8,3.578-8,8v28c0,19.852,16.148,36,36,36s36-16.148,36-36S375.852,439.992,356,439.992z M356,495.992 c-11.031,0-20-8.969-20-20s8.969-20,20-20s20,8.969,20,20S367.031,495.992,356,495.992z' fill='%23ffffff' data-original='%2391c85f' class=''/%3e%3c/g%3e%3cpath xmlns='http://www.w3.org/2000/svg' style='' d='M488,407.992c-13.234,0-24-10.766-24-24s10.766-24,24-24s24,10.766,24,24 S501.234,407.992,488,407.992z M488,375.992c-4.414,0-8,3.586-8,8s3.586,8,8,8s8-3.586,8-8S492.414,375.992,488,375.992z' fill='%23ffffff' data-original='%23bee86e' class=''/%3e%3cpath xmlns='http://www.w3.org/2000/svg' style='' d='M350.027,241.923l-142.406-77.137C196.96,159.012,184,166.731,184,178.855v154.274 c0,12.125,12.96,19.843,23.621,14.069l142.406-77.137C361.2,264.009,361.2,247.975,350.027,241.923z' fill='%23ffffff' data-original='%23afd755' class=''/%3e%3cpath xmlns='http://www.w3.org/2000/svg' style='' d='M350.027,241.923l-8.342-4.519l-58.634,31.76C256.399,283.602,224,264.304,224,233.993v-60.335 l-16.38-8.872c-10.661-5.774-23.62,1.944-23.62,14.069v154.274c0,12.124,12.96,19.843,23.621,14.069l142.406-77.137 C361.199,264.009,361.199,247.975,350.027,241.923z' fill='%23ffffff' data-original='%2391c85f' class=''/%3e%3c/g%3e%3c/svg%3e");
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 0;
width: 80px;
height: 80px;
background-position: center;
background-repeat: no-repeat;
background-size: 55px;
border-radius: 50%;
}
/*Paid Post*/
.set_post_price_alert > p {
font-weight: bold;
}
.set_post_price_alert > div {
display: flex;
}
.set_post_price_alert > div > .form-group {
flex: 1 1 auto;
overflow: hidden;
}
.set_post_price_alert > div span {
flex: 0 0 auto;
font-size: 30px;
}
.set_post_price_alert > div span b {
margin-top: -20px;
vertical-align: middle;
}
.set_post_price_alert > div span input {
width: 100px;
line-height: 1;
border: 0;
margin-top: -15px;
vertical-align: middle;
font-size: 40px;
background: transparent;
}
.set_post_price_alert > div p {
margin: 0;
flex: 1 1 auto;
}
.post_pos_rel {
position: relative;
}
.alert_blurred_div {
z-index: 3;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
background-color: rgb(0 0 0 / 40%);
}
.alert_blurred_div.blur {
backdrop-filter: blur(20px);
}
.alert_blurred_div > svg {
width: 80px;
height: 80px;
margin: 0 0 20px;
opacity: 0.6;
}
.alert_blurred_div p {
font-weight: bold;
font-size: 16px;
}
.alert_blurred_div .btn {
margin-top: 30px;
padding: 0 17px;
line-height: 40px;
}
.alert_blurred_div .btn svg {
width: 18px;
height: 18px;
margin: -3px 0 0;
}
.wallet_empty_state {
text-align: center;
margin: 30px 0 40px;
font-size: 16px;
}
.wallet_empty_state svg {
display: block;
margin: 0 auto 10px;
width: 80px;
height: auto;
}
.wallet_empty_state .btn {
display: block;
margin: 30px auto 0;
user-select: none;
box-sizing: border-box;
cursor: pointer;
padding: 7px 20px 8px;
font-family: "Open Sans", "Pretendard", sans-serif;
text-decoration: none;
box-shadow: none;
border-radius: 2em;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
min-width: 100px;
}
/*Advertisement*/
.advs_list {
box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 10%) 0px 1px 2px -1px;
background-color: white;
padding: 15px 15px 12px;
margin: 20px 2px 10px;
border-radius: 8px;
}
.advs_list h3 {
font-size: 13px;
text-transform: uppercase;
margin: 0 0 2px;
}
.advs_list p {
margin: 0;
font-size: 17px;
text-transform: capitalize;
}
.ads_act_icos {
text-decoration: none;
margin: 0px 2px;
border: 0;
padding: 0;
line-height: 37px;
text-align: center;
width: 40px;
height: 40px;
}
.ads_act_icos svg {
width: 19px;
height: 19px;
}
.create_ads_page {
margin: 0;
border: 0;
}
.create_ads_page .page-content {
box-shadow: rgb(0 0 0 / 10%) 0px 4px 6px -1px, rgb(0 0 0 / 10%) 0px 2px 4px -2px;
border: 0;
border-radius: 8px;
}
.create_ads_page .page-content > div {
padding: 20px 35px;
border-radius: 8px;
}
/*Explore People*/
.explore-page-container .explore-people-container .pp_explore_people {
margin-right: -15px;
margin-left: -15px;
}
.explore-page-container .explore-people-container .pp_explore_people .explore-people__item {
box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px, rgb(0 0 0 / 10%) 0px 1px 2px -1px;
border-radius: 8px;
margin: 0 0 30px;
padding: 30px 20px 20px;
}
.explore-page-container .explore-people-container .pp_explore_people .explore-people__item .user__info h5 {
font-size: 18px;
margin-top: 15px;
}
.explore-page-container .explore-people-container .pp_explore_people .explore-people__item .user__info .user__stat {
display: block;
padding: 5px 0 0;
}
.explore-page-container .explore-people-container .pp_explore_people .explore-people__item .user__info .user__stat span {
margin: 8px 0 3px !important;
display: block;
float: none;
text-align: initial;
}
.explore-page-container .explore-people-container .pp_explore_people .explore-people__item .user__info .user__stat span svg {
width: 19px;
height: auto;
margin-top: -3px;
}
.explore-page-container .explore-people-container .pp_explore_people .explore-people__item .user__info .user__stat span b {
line-height: normal;
}
.explore-page-container .explore-people-container .pp_explore_people .explore-people__item .user__info .user__stat span small {
width: auto;
line-height: normal;
font-size: 14px;
}
.explore-page-container .explore-people-container .pp_explore_people .explore-people__item .user__info button.btn {
width: 100%;
}
/*Fund Report*/
.btn_report_fund {
border-radius: 2em;
font-size: 12px;
padding: 0 10px;
line-height: 26px;
background: transparent;
border: 1px solid #ddd;
color: #808080;
margin: -20px 0 25px;
}
.btn_report_fund svg {
width: 16px;
height: 16px;
margin: -3px 0 0;
}
/*Modal*/
.modal--menu.pp_mat_modal .modal-outer .modal-inner,
.pp_mat_modals .modal-content {
border-radius: 10px;
box-shadow: rgb(0 0 0 / 10%) 0px 10px 15px -3px, rgb(0 0 0 / 10%) 0px 4px 6px -4px;
}
.modal--menu.pp_mat_modal h5.title,
.modal--menu.pp_mat_modal .modal-body,
.pp_mat_modals .modal-body {
padding: 15px;
}
.modal--menu.pp_mat_modal h5.title + .modal-body {
padding-top: 0;
}
.modal--menu.pp_mat_modal .modal-body textarea {
box-shadow: none;
border: none;
color: #14171a;
display: block;
word-break: break-word;
resize: none;
padding: 0;
background: transparent;
}
.pp_mat_modal .modall-footer,
.pp_mat_modals .modal-footer {
border-top: 1px solid #e8e8e8;
overflow: hidden;
padding: 9px 15px;
margin: 0px;
height: 56px;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
}
.pp_mat_modal .modall-footer .btn,
.pp_mat_modals .modal-footer .btn,
.load_more_fnds {
margin: 0;
display: inline-block;
user-select: none;
box-sizing: border-box;
cursor: pointer;
padding: 7px 20px 8px;
font-family: "Open Sans", "Pretendard", sans-serif;
text-decoration: none;
box-shadow: none;
border-radius: 2em;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
}
.pp_mat_modals .modal-header {
border: 0;
}
.pp_mat_modals .modal-header .modal-title {
line-height: 3.2rem;
font-size: 20px;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.pp_mat_modals .modal-footer:before,
.pp_mat_modals .modal-footer:after {
display: none;
}
.pp_mat_modals .modal-footer .btn {
text-transform: capitalize;
}
/*Responsive*/
@media (min-width: 992px) {
.post-data-container .post-data-inner .post-media-renderer .video .afterglow {
padding-top: calc(100% - 70px) !important;
}
.post-data-container .post-data-inner .post-media-renderer .video .afterglow video {
padding-top: 0 !important;
}
}
@media (max-width: 1200px) {
.navbar-fixed-top #navbar-collapse .pp_front_menu a {
padding: 2px 17px;
}
}
@media (max-width: 1190px) {
.navbar-fixed-top .navbar-right li a.mode_button {
left: auto;
position: relative;
}
}
@media (max-width: 1140px) {
.light__box .lightbox-outer .lightbox-inner {
min-width: auto;
}
.story-container .container {
max-width: 80% !important;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes {
max-width: 360px;
min-width: 360px;
}
}
@media (max-width: 1065px) {
.light__box .lightbox-outer .lightbox-inner {
max-width: 870px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes {
max-width: 335px;
min-width: 335px;
}
}
@media (max-width: 1024px) {
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes {
max-width: 320px;
min-width: 320px;
}
.light__box .lightbox-outer .lightbox-inner {
max-width: 850px;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu.last_menu {
margin-right: 5px;
}
}
@media (max-width: 992px) {
.explore-page-container .explore-posts-container .explore-postset .image {
height: 240px;
}
.explore-page-container .sub__header div.container h4,
.explore-page-container .sub__header div.container p {
text-align: center;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .thumb {
height: 200px;
}
.home-page-container .home-posts-container .timeline-posts .header div.dropdown {
visibility: visible;
opacity: 1;
transform: scale(1);
}
.home-page-container .home-posts-container .timeline-posts .header time {
transform: translateX(-8px);
}
.no-padding-left {
padding-left: 15px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item {
width: 33.3333333%;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu.last_menu {
margin-right: 5px;
}
.navbar-fixed-top .navbar-right li {
margin-right: 2px;
}
.navbar-fixed-top #navbar-collapse form.navbar-search {
min-width: 170px;
width: 170px;
}
.post-data-container .post-data-inner .post-media-renderer {
margin-right: 310px;
width: calc(100% - 310px);
}
.post-data-container .post-data-inner .sidebar {
max-width: 310px;
min-width: 310px;
}
.post-data-container .post-data-inner .post-media-renderer .post-embed-frame iframe {
min-height: 310px !important;
}
.light__box .lightbox-outer .lightbox-inner {
max-width: 90%;
min-height: 550px;
}
.light__box .lightbox-outer .lightbox-inner .post-data {
min-height: 550px;
max-height: 550px;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu a {
padding: 11px 13px;
}
.fund_col-md {
padding-left: 15px;
}
.pro_user_new_profile .ma_tabs {
margin-top: 50px;
}
.pro_user_new_profile .ma_tabs li a {
color: #777777;
}
.pro_user_new_profile .ma_tabs li a:hover {
color: #000;
}
.pro_user_new_profile .ma_tabs li.active a {
background: #41aefd;
color: #fff;
}
.navbar-fixed-top .navbar-right > li > a,
.navbar-fixed-top .navbar-right li div.notifications-list {
padding: 13px 10px;
}
.pp_blogs_read_main_cont .pp_blog_posts .post-images img {
height: 390px;
}
.explore-page-container .sub__header.pp_blog_sub_header {
height: 230px;
}
#store_search_div {
padding-bottom: 30px;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu a span {
font-size: 13px;
}
.advs_list h3 {
margin: 20px 0 2px;
}
}
@media (max-width: 950px) {
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes {
max-width: 310px;
min-width: 310px;
}
}
@media (max-width: 865px) {
.pp_svg_squiggle {
display: none !important;
}
.pp_svg_lines {
display: none !important;
}
.pp_svg_spiral {
display: none !important;
}
.pp_svg_triangle {
display: none !important;
}
.story-container .container .int-indicator {
padding: 44px 70px 14px;
}
body .pp_side_footer li.dropup ul.dropdown-menu {
left: 0;
right: auto;
}
body .pp_side_footer li.dropup ul.dropdown-menu:before {
right: auto;
left: 30px;
bottom: -6px;
top: auto;
}
.light__box .lightbox-outer {
padding: 0;
}
.light__box .lightbox-outer .lightbox-inner .pp_mobi_light_control {
display: block;
}
.light__box .lightbox-outer .lightbox-inner .post-data .light__box-slide-controls,
.light__box .lightbox-outer .lightbox-inner .post-data .pp_light_close,
.light__box .lightbox-outer::after,
.light__box .lightbox-outer::before {
display: none;
}
.light__box .lightbox-outer .lightbox-inner {
max-width: 100%;
min-height: 400px;
}
.light__box .lightbox-outer .lightbox-inner .post-data {
min-height: 400px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer {
border-radius: 0;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes {
border-radius: 0;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comments {
max-height: 70vh;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade a.cr-controls.carousel-control-next {
right: 10px;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .carousel.slide.carousel-fade a.cr-controls.carousel-control-prev {
left: 10px;
}
}
@media (max-width: 768px) {
.post-editing-form form#import-post-gifs .preview-video button {
visibility: visible;
opacity: 1;
}
.story-container .container {
padding-top: 85px;
}
.story-container .container .int-indicator {
padding: 17px 70px;
height: 40px;
position: absolute;
top: 55px;
width: 100%;
}
.story-container .container .carousel-inner {
height: calc(100vh - 100px);
}
.navbar-nav > li {
float: left;
}
.navbar-fixed-top #navbar-collapse form.navbar-search {
min-width: 140px;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu {
left: auto;
right: 0;
position: absolute;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu a span {
display: none;
}
.container-messages-main {
padding: 0;
}
.messages-container {
height: calc(100vh - 55px);
background-color: #fff;
margin-top: 55px;
}
.messages-container .header-composition .interlocutor-info .mobile_msg_close {
display: inline-block;
}
.messages-container .header-composition .interlocutor-info,
.messages-container .row.content .conversation {
display: none;
}
.messages-container.open .header-composition .interlocutor-info {
position: fixed;
height: 60px;
width: 100%;
left: 0;
top: 0;
margin: 70px 0 0;
background-color: white;
padding: 0 20px;
z-index: 999;
display: flex;
}
.messages-container.open .row.content .conversation {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 130px 0 0;
height: calc(100% - 130px);
display: block;
z-index: 9;
}
.messages-container .row.content .conversation .select-chat .empty_state button {
display: block;
}
.post-data-container .post-data-inner {
display: block;
max-height: 100%;
min-height: auto;
}
.post-data-container .post-data-inner .post-media-renderer {
margin: 0;
width: 100%;
min-height: auto;
}
.post-data-container .post-data-inner .sidebar {
display: block;
width: 100%;
min-width: 100%;
position: relative;
}
.post-data-container .post-data-inner .post-media-renderer .carousel a.cr-controls.carousel-control-prev {
left: 10px;
}
.post-data-container .post-data-inner .post-media-renderer .carousel a.cr-controls.carousel-control-next {
right: 10px;
}
.aff_hiw h2 {
margin: 3rem 0 100px 0;
}
.messages-container .header-composition,
.msg_white_bg {
box-shadow: none;
}
.messages-container .row.content {
height: auto;
}
.messages-container.open .row.content .conversation {
background-color: #fff;
}
}
@media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: absolute;
background-color: #fff;
}
.navbar-fixed-top #navbar-collapse .pp_front_menu a {
padding: 11px 5px;
}
}
@media (max-width: 720px) {
.explore-page-container .explore-posts-container .explore-postset .image {
height: 300px;
}
.light__box .lightbox-outer .lightbox-inner {
min-height: 100vh;
}
.light__box .lightbox-outer .lightbox-inner .post-data {
min-height: calc(100vh - 48px);
flex-direction: column;
max-height: 100%;
overflow-y: auto;
display: block;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes {
max-width: 100%;
min-width: 100%;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer {
min-height: calc(100vh - 290px);
max-height: calc(100vh - 290px);
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer img {
max-height: calc(100vh - 290px);
}
.navbar-fixed-top #navbar-collapse form.navbar-search {
min-width: 170px;
width: 170px;
}
}
@media (max-width: 991px) {
/* Compact header: logo + left burger | search + right burger — no overflow */
#header_nav.navbar-fixed-top > .container,
#header_nav > .container {
padding-left: 10px;
padding-right: 10px;
max-width: 100%;
width: 100%;
overflow: visible;
}
#header_nav.navbar-fixed-top #navbar-collapse,
.navbar-fixed-top#header_nav #navbar-collapse {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
width: 100%;
max-width: 100%;
overflow: visible;
height: 55px;
}
#header_nav.navbar-fixed-top .navbar-left,
.navbar-fixed-top #header_nav .navbar-left {
display: flex !important;
align-items: center;
float: none !important;
max-width: none;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
margin: 0;
padding: 0;
}
.navbar-fixed-top .navbar-left > li.pp_front_menu,
.navbar-fixed-top #navbar-collapse .pp_front_menu,
.navbar-fixed-top #navbar-collapse .hide_head_link {
display: none !important;
}
.pxp-mobile-nav-item {
display: flex !important;
align-items: center;
margin-left: 2px;
margin-right: 0;
flex-shrink: 0;
}
.pxp-mobile-nav-toggle,
.pxp-mobile-right-nav-toggle {
display: flex;
}
.navbar-fixed-top .navbar-left li.logo {
margin-right: 4px !important;
flex-shrink: 1;
min-width: 0;
overflow: hidden;
}
.navbar-fixed-top .navbar-left li.logo a {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 0;
padding-right: 4px;
}
.navbar-right-wrap {
flex: 0 0 auto;
margin-left: 8px;
gap: 2px;
max-width: calc(100% - 48px);
}
#header_nav .navbar-search-trigger,
.navbar-fixed-top .navbar-search-trigger {
min-width: 0;
max-width: 110px;
width: auto;
height: 34px;
padding: 4px 10px;
margin: 0;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#header_nav .pxp-header-mode-toggle,
.navbar-fixed-top .pxp-header-mode-toggle {
width: 36px;
height: 24px;
margin: 0 0 0 3px;
padding: 0 5px;
}
#header_nav .pxp-header-mode-toggle .pxp-header-mode-thumb,
.navbar-fixed-top .pxp-header-mode-toggle .pxp-header-mode-thumb {
width: 18px;
height: 18px;
}
#header_nav .pxp-header-mode-toggle.is-night .pxp-header-mode-thumb,
.navbar-fixed-top .pxp-header-mode-toggle.is-night .pxp-header-mode-thumb {
transform: translateX(12px);
}
#header_nav .navbar-search-trigger span,
.navbar-fixed-top .navbar-search-trigger span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#header_nav.navbar-fixed-top .navbar-right,
.navbar-fixed-top #header_nav .navbar-right,
#pxp-right_header {
display: none;
position: fixed;
top: 55px;
left: 0;
right: 0;
width: 100%;
max-width: 100vw;
height: auto;
max-height: calc(100vh - 55px);
overflow-x: hidden;
overflow-y: auto;
margin: 0 !important;
padding: 0;
float: none !important;
flex-direction: column;
align-items: stretch;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 1002;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
#header_nav.mobile-right-nav-open #pxp-right_header {
display: flex !important;
}
#header_nav.mobile-right-nav-open #pxp-right_header > li {
display: flex !important;
float: none;
width: 100%;
height: auto !important;
min-height: 48px;
max-height: none !important;
margin: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
align-self: stretch;
}
#header_nav.mobile-right-nav-open #pxp-right_header > li > a,
#header_nav.mobile-right-nav-open #pxp-right_header li .notifications-list,
#header_nav.mobile-right-nav-open #pxp-right_header li .notifications-list > .dropdown-toggle,
#header_nav.mobile-right-nav-open #messages_nav > a,
#header_nav.mobile-right-nav-open #avatar_active > a {
width: 100%;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
justify-content: flex-start !important;
padding: 0 18px !important;
text-align: left;
font-size: 15px !important;
font-weight: 500 !important;
text-transform: none;
letter-spacing: normal;
}
#header_nav.mobile-right-nav-open #pxp-right_header .dropdown-menu {
position: static !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
margin: 0 !important;
}
.navbar-fixed-top #second_header {
display: none;
position: fixed;
top: 55px;
left: 0;
right: 0;
width: 100%;
max-width: 100vw;
height: auto;
max-height: calc(100vh - 55px);
overflow-x: hidden;
overflow-y: auto;
background: #fff;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
z-index: 1002;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.navbar-fixed-top.mobile-nav-open #second_header {
display: block !important;
}
.navbar-fixed-top #second_header ul {
flex-direction: column;
align-items: stretch;
}
.navbar-fixed-top #second_header ul li {
float: none;
flex: none;
width: 100%;
justify-content: flex-start;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.navbar-fixed-top #second_header ul li a {
height: 48px;
justify-content: flex-start;
padding: 0 18px;
text-align: left;
font-size: 15px;
font-weight: 500;
color: #222;
text-transform: none;
letter-spacing: normal;
}
}
@media (max-width: 680px) {
body {
padding-top: 55px;
}
.navbar-fixed-top {
height: 55px;
transition: top 0.2s ease-in-out;
}
.navbar-fixed-top.nav_up {
top: -55px;
}
#header_nav .navbar-search-trigger,
.navbar-fixed-top .navbar-search-trigger {
max-width: 88px;
min-width: 0;
padding: 4px 8px;
font-size: 11px;
}
.navbar-fixed-top .navbar-left li.logo a {
max-width: 110px;
font-size: 16px;
}
.user-profile-page-content,
.explore-page-container {
margin-top: 55px;
}
.navbar-fixed-top #navbar-collapse form.navbar-search .search-result {
z-index: 1;
}
.settings-page-container .sidenav {
width: 100%;
padding: 0px;
margin-bottom: 30px;
}
.settings-page-container .page-content {
width: 100%;
padding: 0px 5px; /*margin-top: 30px;*/
}
.settings-page-container .sidenav ul li.active:before {
display: none;
}
.story-container .container {
max-width: 70% !important;
}
.pro_user_new_profile {
margin-top: 55px;
}
.video-con {
height: calc(100vh - 100px);
margin: 55px 0 0;
}
.messages-container.open .header-composition .interlocutor-info {
margin: 55px 0 0;
}
.messages-container.open .row.content .conversation {
margin: 115px 0 0;
height: calc(100% - 115px);
}
.messages-container {
height: calc(100vh - 55px);
margin-top: 0;
}
.navbar-fixed-top .navbar-left li.logo img {
max-width: 75px;
margin-left: -30px;
}
}
@media (max-width: 620px) {
.pp_404 {
font-size: 64px;
margin: 70px 5px;
}
.pp_404 > span.four {
width: 106px;
height: 25px;
}
.pp_404 > span.four:before {
width: 25px;
height: 115px;
left: 60px;
bottom: -35px;
}
.pp_404 > span.four:after {
width: 99px;
height: 25px;
transform: rotate(-42.8deg);
left: -11px;
bottom: 28px;
}
.pp_404 > span.zero {
width: 106px;
height: 106px;
}
.pp_404 > span.zero:before {
width: 50px;
height: 50px;
}
.pp_404 > span.zero:after {
width: 45px;
height: 45px;
left: 30px;
bottom: 30px;
}
.explore-page-container .explore-posts-container .explore-postset .image {
height: 270px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item {
width: 50%;
}
.post-editing-form form#import-post-gifs .content,
.post-editing-form form#import-post-gifs .preview-video {
max-height: 230px;
}
.post-editing-form form#embed-post-video #embed-iframe iframe {
height: auto !important;
}
.post-editing-form form#embed-post-video div.fetch-url .video-url,
.post-editing-form .selecet-file-control {
margin: 3px 10px;
}
.post-editing-form form#import-post-gifs div.search-input {
margin: 0 20px 15px;
}
[tooltip]::after,
[tooltip]::before {
opacity: 1;
visibility: visible;
}
.footer__container ul {
display: block;
text-align: center;
float: none !important;
}
.footer__container ul.nav.pull-right {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
padding-bottom: 15px;
}
body .pp_side_footer ul {
text-align: start;
}
.story-container .container {
max-width: 100% !important;
}
.story-container .container .cr-controls.carousel-control-prev {
left: 0;
width: 30%;
}
.story-container .container .cr-controls.carousel-control-next {
right: 0;
width: 30%;
}
.story-container .container .cr-controls span {
visibility: hidden;
}
.story-container .container .carousel-inner .item div.caption {
opacity: 1;
visibility: visible;
}
.pp_blog_posts .post-images img {
height: 310px;
}
}
@media (max-width: 580px) {
.explore-page-container .explore-posts-container .explore-postset .image {
height: 250px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .thumb {
height: 170px;
}
.modal--menu .modal-outer,
.modal--dialog .modal-outer {
width: 500px;
max-width: 90%;
}
.modal--menu .modal-outer .modal-inner,
.modal--dialog .modal-outer .modal-inner {
min-width: auto;
}
.light__box .lightbox-outer .lightbox-inner {
height: 100%;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer {
justify-content: center;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer img {
min-height: auto;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer iframe {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: auto !important;
position: absolute;
top: 0;
left: 0;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-media-renderer .pp_mobi_light_embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
width: 100%;
}
.pp_blogs_read_main_cont .pp_blog_posts .post-images img {
height: 270px;
}
.charrk_hdr {
padding: 30px;
}
}
@media (max-width: 570px) {
.pp_store_head select {
margin-top: 20px;
}
.user-profile-page-content .user-heading div.user-info {
text-align: center;
display: block;
padding: 0px 15px 55px;
}
.user-profile-page-content .user-heading div.user-info .avatar {
margin: auto;
}
.user-profile-page-content .user-heading div.user-info .info {
margin: 30px 0 0;
padding: 0px 20px 10px;
}
.user-profile-page-content .social-links li {
margin: 15px 6px;
float: none;
display: inline-block;
}
.user-profile-page-content .user-heading div.user-info .uname div.modal-menu .dropdown-menu {
left: auto;
}
.settings-page-container .blocked-users-settings .blocked-users--ls {
padding: 0px 10px;
}
.terms-page__container .terms-page__inner ul li a {
padding: 0 10px;
}
.settings-page-container .page-content div.header .avatar-wrapper {
margin-right: 10px;
}
.settings-page-container .page-content div.header .avatar-wrapper img {
width: 50px;
height: 50px;
}
.settings-page-container .page-content div.header .edit-avatar {
margin-left: 60px;
}
.camera_1,
.filters_1 {
height: 560px;
}
}
@media (max-width: 520px) {
.explore-page-container .explore-posts-container .explore-postset .image {
height: 230px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .thumb {
height: 150px;
}
.home-page-container .home-posts-container .timeline-posts .header time {
float: none;
padding: 0;
position: absolute;
top: 13px;
left: 66px;
font-weight: normal;
}
.home-page-container .home-posts-container .timeline-posts .header a.publisher-name {
display: inline-block;
padding: 12px 0 0;
}
.home-page-container .home-posts-container .timeline-posts .header a.publisher-name img {
margin: -14px 3px 0 0;
}
.home-page-container .home-posts-container .timeline-posts .header a.publisher-name + span {
padding-top: 8px;
display: inline-block;
vertical-align: middle;
}
}
@media (max-width: 500px) {
.pp_404 > span {
width: auto !important;
height: auto !important;
}
.pp_404 {
font-size: 64px;
margin: 70px 5px;
}
.pp_404 > span.four,
.pp_404 > span.zero:before,
.pp_404 > span.four:before,
.pp_404 > span.four:after {
background: transparent;
}
.pp_404 > span.zero {
background: transparent;
animation: none;
}
.pp_404 > span.zero:after {
background: transparent;
box-shadow: none;
}
.screen-reader-text {
position: static;
}
/* .user-profile-page-content .following--ls .following--ls__item, .user-profile-page-content .followers--ls .followers--ls__item{width:50%;} */
.user-profile-page-content .user-heading div.user-info .uname div.modal-menu .dropdown-menu {
right: 0;
}
}
@media (max-width: 496px) {
.explore-page-container .explore-posts-container .explore-postset .image {
height: 400px;
}
.story-container .container .int-indicator {
padding: 17px 40px;
}
.modal--dialog.modal--dialog h5.title {
font-size: 17px;
}
.modal--dialog.modal--dialog h5.title svg.feather-users {
display: none;
}
.modal--dialog .modal-outer .modal-inner ul {
padding: 0px 10px 24px;
}
.user-profile-page-content .social-links li.btn-website a {
background-color: #f3f3f3;
width: 28px;
text-align: center;
border-radius: 50%;
padding: 3px 0;
border-color: #fff;
line-height: normal;
}
.user-profile-page-content .social-links li.btn-website a svg.feather {
margin: -1px 0 0;
width: 19px;
height: 19px;
fill: #673ab7;
}
.user-profile-page-content .social-links li.btn-website a span {
display: none;
}
.user-profile-page-content .user-heading div.user-info .btn {
margin: 15px 6.5px 0;
}
.camera_1,
.filters_1 {
height: 500px;
}
.pp_blogs_read_main_cont .pp_blog_posts .post-images img {
height: 220px;
}
.pp_blog_posts .caption {
padding: 25px 25px 35px;
}
.pp_blog_posts .post-images img {
height: 230px;
}
.pp_blog_comms {
margin: -10px 25px 0;
}
}
@media (max-width: 455px) {
.explore-page-container .explore-posts-container .explore-postset .image {
height: 390px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .thumb {
height: 140px;
}
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu {
width: calc(100vw - 17px);
right: -17px;
}
.user-profile-page-content .user-heading div.user-info .avatar,
.user-profile-page-content .user-heading div.user-info .avatar img {
width: 130px;
height: 130px;
}
.user-profile-page-content .user-heading div.user-info .info {
margin: 20px 0 0;
}
.pp_mat_input_50 {
width: 100%;
display: block;
}
.settings-page-container {
margin-top: 80px;
}
}
@media (max-width: 425px) {
.explore-page-container .explore-posts-container .explore-postset .image {
height: 330px;
}
.explore-page-container .explore-people-container .people .explore-people__item .avatar img,
.user-profile-page-content .following--ls .following--ls__item .avatar img,
.user-profile-page-content .followers--ls .followers--ls__item .avatar img {
width: 94px;
height: 94px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .thumb {
height: 130px;
}
.settings-page-container .blocked-users-settings .blocked-users--ls {
padding: 0px;
}
.settings-page-container .blocked-users-settings .blocked-users--ls .blocked-users--ls-item button {
padding: 3px 8px;
}
.settings-page-container .blocked-users-settings .blocked-users--ls .blocked-users--ls-item {
margin: 0 0 0 60px;
}
.toast {
padding: 0;
width: 100%;
}
.toast span {
width: 100%;
border-radius: 0;
margin: 5px 0 0 0;
}
}
@media (max-width: 380px) {
.explore-page-container .explore-posts-container .explore-postset .image {
height: 300px;
}
.story-container .container .int-indicator {
padding: 17px 30px;
}
.navbar-fixed-top .navbar-left li.logo {
margin-right: 20px;
}
.navbar-fixed-top .navbar-left li:last-child {
max-width: calc(100% - 70px);
}
.camera_1,
.filters_1 {
height: 400px;
}
}
@media (max-width: 350px) {
.explore-page-container .explore-posts-container .explore-postset .image {
height: 280px;
}
.explore-page-container .explore-people-container .people .explore-people__item .user-profile-page-content .following--ls .following--ls__item,
.user-profile-page-content .followers--ls .followers--ls__item {
width: 100%;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .thumb {
height: 120px;
}
.empty_state svg.confetti,
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li.no__notifications div svg.confetti {
width: 200px;
}
.empty_state svg.feather,
.navbar-fixed-top .navbar-right li div.notifications-list div.dropdown-menu li.no__notifications div svg.feather {
margin: -85px auto 75px;
width: 50px;
height: 50px;
}
}
@media (max-width: 320px) {
.explore-page-container .explore-posts-container .explore-postset .image {
height: 250px;
}
.home-page-container .home-sidebar-right div.featured-posts div.list .item .thumb {
height: 100px;
}
.camera_1,
.filters_1 {
height: 300px;
}
}
@media (min-width: 375px) {
.pp_svg_spiral {
display: block;
position: absolute;
bottom: 50px;
right: 0;
height: 40px;
transform: rotate(90deg);
}
}
@media (min-width: 750px) {
.pp_svg_squiggle {
display: block;
position: absolute;
bottom: 30px;
right: 0;
transform: translate(50%);
height: 20px;
}
.pp_svg_lines {
height: 70px;
}
.pp_svg_spiral {
height: 58px;
top: 25%;
left: -100px;
transform: rotate(-45deg);
}
.pp_svg_triangle {
display: block;
position: absolute;
top: 10%;
right: -170px;
transform: rotate(-45deg) translateX(40%);
height: 50px;
}
}
@media (min-width: 1000px) {
.pp_svg_squiggle {
display: block;
position: absolute;
bottom: 40%;
right: -110px;
transform: translate(50%);
}
.settings-page-container .sidenav {
min-height: 65vh;
}
.pp_pubbox_opt {
margin-right: -5px;
margin-left: -5px;
}
.pp_pubbox_opt .nds {
flex: 0 0 33.3333333%;
max-width: 33.3333333%;
padding-right: 5px;
padding-left: 5px;
}
}
@media (min-width: 1200px) {
.pp_explore_people .col-lg-3 {
width: 20%;
}
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active .like-icon {
-webkit-animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
background: url('data:image/svg+xml;utf8,')
no-repeat center;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active .like-icon [class^="heart-animation-"] {
background: url('data:image/svg+xml;utf8,')
no-repeat center;
background-size: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 14px;
opacity: 0;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active [class^="heart-animation-"]::before,
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon [class^="heart-animation-"]::after {
content: "";
background: inherit;
background-size: 100%;
width: inherit;
height: inherit;
display: inherit;
position: relative;
top: inherit;
left: inherit;
opacity: 0;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active .heart-animation-1 {
-webkit-animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active .like-icon .heart-animation-1::before,
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-1::after {
width: 12px;
height: 10px;
visibility: hidden;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active .like-icon .heart-animation-1::before {
opacity: 0.6;
-webkit-animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active .like-icon .heart-animation-1::after {
-webkit-animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: 0.75;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active .heart-animation-2 {
-webkit-animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active .heart-animation-2::before,
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-2::after {
width: 10px;
height: 8px;
visibility: hidden;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active .heart-animation-2::before {
-webkit-animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: 0.25;
}
.post-data-container .post-data-inner .comment-box .votes .like-post.active .heart-animation-2::after {
-webkit-animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: 0.4;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active .like-icon {
-webkit-animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartPulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
background: url('data:image/svg+xml;utf8,')
no-repeat center;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active .like-icon [class^="heart-animation-"] {
background: url('data:image/svg+xml;utf8,')
no-repeat center;
background-size: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
width: 16px;
height: 14px;
opacity: 0;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active [class^="heart-animation-"]::before,
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon [class^="heart-animation-"]::after {
content: "";
background: inherit;
background-size: 100%;
width: inherit;
height: inherit;
display: inherit;
position: relative;
top: inherit;
left: inherit;
opacity: 0;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active .heart-animation-1 {
-webkit-animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active .like-icon .heart-animation-1::before,
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-1::after {
width: 12px;
height: 10px;
visibility: hidden;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active .like-icon .heart-animation-1::before {
opacity: 0.6;
-webkit-animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active .like-icon .heart-animation-1::after {
-webkit-animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: 0.75;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active .heart-animation-2 {
-webkit-animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active .heart-animation-2::before,
.home-page-container .home-posts-container .timeline-posts .actions span.like-post.active .like-icon .heart-animation-2::after {
width: 10px;
height: 8px;
visibility: hidden;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active .heart-animation-2::before {
-webkit-animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: 0.25;
}
.light__box .lightbox-outer .lightbox-inner .post-data .posts-votes .posts-votes-inner .comment-box .votes span#lb-like-post.active .heart-animation-2::after {
-webkit-animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
animation: heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
opacity: 0.4;
}
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type="file"] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
#img-upload {
width: 100%;
}
.dt_user_profile {
background-color: #f8f8f8;
margin: 0 auto 25px;
padding: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
border-radius: 7px;
overflow: hidden;
}
.dt_user_profile > span {
margin-bottom: 5px;
font-size: 18px;
display: flex;
align-items: center;
}
.dt_user_profile > span svg {
margin-right: 5px;
color: #6b6b6b;
}
svg.smaller {
fill: #a8a8a8;
width: 13px !important;
height: 13px !important;
vertical-align: sub;
}
.message__data img {
max-width: none;
border-radius: 15px;
max-height: 170px;
margin: 0;
}
.bank_payment--modal {
overflow: scroll;
}
@media (max-width: 340px) {
a.nav__item {
padding: 5px;
}
.confirm--modal .confirm--modal--inner .confirm--modal--footer,
.confirm--modal .confirm--modal--inner .modal--footer,
.confirm--modal .modal--inner .confirm--modal--footer,
.confirm--modal .modal--inner .modal--footer,
.dialog-modal .confirm--modal--inner .confirm--modal--footer,
.dialog-modal .confirm--modal--inner .modal--footer,
.dialog-modal .modal--inner .confirm--modal--footer,
.dialog-modal .modal--inner .modal--footer {
width: 100%;
overflow: hidden;
text-align: end;
padding: 0px 123px;
}
.post-data-container .post-data-inner .sidebar .sidebar__inner,
.post-data-container .post-data-inner .sidebar,
.post-data-container .post-data-inner {
overflow: inherit;
}
}
.mx550 {
max-height: 550px !important;
}
#sliderBox {
position: relative;
top: 0%;
}
#slider0to50 {
width: 150px; /*1x width*/
position: absolute;
left: 0%;
}
#slider51to100 {
width: 150px; /*1x width*/
position: absolute;
left: 50%;
}
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner.right .message__data p.message__text,
.home-page-container .home-posts-container .timeline-posts .comments-area .post-comments-list li .pp_com_body span,
.messages-container .row.content .conversation .messages .message-list-item .message-list-item__inner .message__data p.message__text {
word-break: break-word;
}
.bank_payment_donate_modal .confirm--modal--inner {
max-height: 100vh;
overflow: auto;
}
@media (max-width: 455px) {
#from_camera_button {
display: none;
}
}
.sun_input {
margin-bottom: 10px;
}
.play_video_button {
display: block;
z-index: 2;
position: absolute;
width: 80px;
height: 80px;
text-align: center;
vertical-align: middle;
cursor: pointer;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -40px;
border: none;
background: 0 0;
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
color: inherit;
}
.play_video_button:before {
content: "\e602";
font-family: afterglow-icon;
line-height: 80px;
font-size: 80px;
text-shadow: 0 0 5px #000;
text-shadow: 0 0 5px rgb(0 0 0 / 60%);
text-align: center;
font-weight: 700;
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
.pp_mat_input input.tagit-hidden-field {
display: none;
}
/* Compose/buttons stay on list (col-md-8) width; mosaic posts expand to full row */
.home-feed-compose {
width: 100%;
position: relative;
z-index: 20;
}
@media (min-width: 992px) {
.home-feed-col.feed-mosaic-mode .home-posts-container.feed-mosaic {
width: calc(150% + 15px);
max-width: none;
}
}
/* Home feed view toggle + mosaic (matches frontsample/minimal portfolio boxes) */
.feed-view-switch {
display: inline-flex;
align-items: stretch;
margin: 8px 0 18px;
border: 1px solid #e6e2e7;
background: #f8f7f8;
overflow: hidden;
position: relative;
z-index: 21;
pointer-events: auto;
}
.feed-view-switch .feed-view-btn {
appearance: none;
border: 0;
background: transparent;
color: #898889;
font-family: "Poppins", "Open Sans", "Pretendard", sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 8px 16px;
min-width: 96px;
flex: 1 1 0;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.feed-view-switch .feed-view-btn:hover {
color: #4c404d;
background: #fff;
}
.feed-view-switch .feed-view-btn.active {
color: #fff;
background: #f65599;
background: linear-gradient(135deg, #f65599 0%, #d41767 100%);
}
.home-posts-container.feed-mosaic {
width: 100%;
margin-top: 4px;
overflow: hidden;
}
.home-posts-container.feed-mosaic .mosaic-item {
margin-bottom: 21px;
}
.home-posts-container.feed-mosaic .mosaic-card.listLink {
position: relative;
overflow: hidden;
background: #f8f7f8;
font-family: "Open Sans", "Pretendard", sans-serif;
color: #4c404d;
border-radius: 26px;
}
.home-posts-container.feed-mosaic .mosaic-media.portfolioSlide {
position: relative;
cursor: pointer;
overflow: hidden;
padding-bottom: 116px;
background-color: #f8f7f8;
}
.home-posts-container.feed-mosaic .mosaic-thumb {
display: block;
width: 100%;
height: auto;
max-height: calc(100vh - 160px);
object-fit: contain;
object-position: center top;
outline: none;
border: none;
transform: scale(1);
transition: transform 0.35s ease;
}
.home-posts-container.feed-mosaic .mosaic-play {
position: absolute;
left: 50%;
top: 42%;
z-index: 5;
width: 42px;
height: 42px;
margin: -21px 0 0 -21px;
border-radius: 0;
background: #4c404d;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
transition: all 0.2s ease-out;
}
.home-posts-container.feed-mosaic .mosaic-play svg {
width: 18px;
height: 18px;
margin-left: 2px;
fill: currentColor;
}
.home-posts-container.feed-mosaic .mosaic-meta.portfolioContent {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 10;
padding: 0;
background: transparent;
}
.home-posts-container.feed-mosaic .mosaic-meta h3,
.home-posts-container.feed-mosaic .mosaic-meta h3.font-openBold {
position: relative;
margin: 0;
padding: 37px 31px 32px;
width: 100%;
background: #f8f7f8;
color: #4c404d;
text-align: left;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Open Sans", "Pretendard", sans-serif;
font-weight: 800;
font-size: 16px;
line-height: 27px;
transition: transform 0.2s, color 0.2s;
}
.home-posts-container.feed-mosaic .mosaic-meta h3 a {
color: #4c404d;
text-decoration: none;
font-family: inherit;
font-weight: 800;
}
.home-posts-container.feed-mosaic .mosaic-meta h3 a:hover {
color: #4c404d;
text-decoration: none;
}
.home-posts-container.feed-mosaic .mosaic-meta h3 span {
display: block;
margin-top: 0;
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 13px;
font-weight: 400;
color: #898889;
text-transform: none;
letter-spacing: 0;
line-height: 21px;
word-break: break-word;
}
.home-posts-container.feed-mosaic .mosaic-card:hover .mosaic-thumb {
transform: scale(1.08);
}
/* List timeline boxes — same minimal palette as portfolio */
.home-page-container .home-posts-container.feed-list .timeline-posts {
font-family: "Open Sans", "Pretendard", sans-serif;
color: #4c404d;
border-radius: 26px;
overflow: hidden;
}
.home-page-container .home-posts-container.feed-list .timeline-posts .header {
border-radius: 0;
}
.home-page-container .home-posts-container.feed-list .timeline-posts .actions,
.home-page-container .home-posts-container.feed-list .timeline-posts .post-votes,
.home-page-container .home-posts-container.feed-list .timeline-posts div.caption,
.home-page-container .home-posts-container.feed-list .timeline-posts .comments-area {
border-radius: 0;
}
.home-page-container .home-posts-container.feed-list .timeline-posts .actions > span {
background-color: transparent;
border-radius: 0;
width: auto;
height: auto;
margin: 0 12px;
transform: none;
}
.home-page-container .home-posts-container.feed-list .timeline-posts .actions span.like-post {
background-color: transparent;
}
.home-page-container .home-posts-container.feed-list .timeline-posts .actions span svg.feather {
color: #4c404d;
}
.home-page-container .home-posts-container.feed-list .timeline-posts .actions .pp-beautyk-vote svg.feather-info {
color: #2196f3;
}
.home-page-container .home-posts-container.feed-list .timeline-posts .actions .pp-beautyk-vote.is-empty svg.feather-info {
color: #9aa0a6;
}
.home-page-container .home-posts-container.feed-list .timeline-posts .post-votes,
.home-page-container .home-posts-container.feed-list .timeline-posts .post-votes div,
.home-page-container .home-posts-container.feed-list .timeline-posts .post-votes div strong {
color: #4c404d;
font-family: "Open Sans", "Pretendard", sans-serif;
}
.home-page-container .home-posts-container.feed-list .timeline-posts .comments-area .post-comments-list li .pp_com_body span {
background-color: #fff;
color: #4c404d;
}
.home-page-container .home-posts-container.feed-list .timeline-posts div.caption a.hashtag,
.home-page-container .home-posts-container.feed-list .timeline-posts div.caption a.mention {
color: #00aeda;
}
@media (max-width: 767px) {
.feed-view-switch {
width: 100%;
}
.feed-view-switch .feed-view-btn {
flex: 1;
text-align: center;
}
.home-posts-container.feed-mosaic .mosaic-meta h3,
.home-posts-container.feed-mosaic .mosaic-meta h3.font-openBold {
padding: 24px 18px 20px;
font-size: 14px;
line-height: 22px;
}
.home-posts-container.feed-mosaic .mosaic-media.portfolioSlide {
padding-bottom: 96px;
}
}
/* Profile posts — POLO portfolio-masonry-3-title style */
.polo-portfolio-section {
max-width: 1140px;
padding-left: 15px;
padding-right: 15px;
}
.polo-masonry-title,
.pro_user_new_profile .polo-masonry-title,
.prof_new_look_posts .polo-masonry-title,
.polo-masonry-title.new_prof_user_posts {
width: 100%;
padding-top: 20px;
margin-top: 0;
}
.polo-masonry-title .user-postset .media,
.polo-masonry-title .user-postset_fav .media {
display: none !important;
}
.polo-masonry-title .user-postset .media .caption,
.polo-masonry-title .user-postset_fav .media .caption {
display: none !important;
}
.user-profile-page-content .user-posts .polo-masonry-title .user-postset,
.new_prof_user_posts.polo-masonry-title .user-postset,
.new_prof_user_posts.polo-masonry-title .user-postset_fav,
.prof_new_look_posts .polo-masonry-title .portfolio-item.user-postset,
.prof_new_look_posts .polo-masonry-title .portfolio-item.user-postset_fav {
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
.polo-masonry-title .item.wrapper {
padding: 0 10px;
margin-bottom: 20px !important;
}
.polo-masonry-title .portfolio-item,
.polo-masonry-title .portfolio-item.user-postset,
.polo-masonry-title .portfolio-item.user-postset_fav {
width: 100%;
float: none;
height: auto;
padding: 0;
background: transparent;
box-shadow: none;
cursor: pointer;
font-family: "Open Sans", "Pretendard", sans-serif;
overflow: visible;
}
.polo-masonry-title .portfolio-item.user-postset:hover,
.polo-masonry-title .portfolio-item.user-postset_fav:hover {
box-shadow: none;
}
.polo-masonry-title .portfolio-item .portfolio-item-wrap {
position: relative;
overflow: hidden;
}
.polo-masonry-title .portfolio-item .portfolio-image {
position: relative;
overflow: hidden;
}
.polo-masonry-title .portfolio-item .portfolio-image a {
display: block;
outline: none;
}
.polo-masonry-title .portfolio-item .portfolio-image img {
display: block;
width: 100%;
height: auto;
transition: transform 0.5s ease-out;
}
.polo-masonry-title .portfolio-item.img-zoom:hover .portfolio-image img {
transform: scale(1.1);
}
.polo-masonry-title .portfolio-item .polo-video-badge {
position: absolute;
right: 12px;
top: 12px;
z-index: 2;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(60, 64, 67, 0.85);
color: #fff;
pointer-events: none;
}
.polo-masonry-title .portfolio-item .polo-video-badge svg {
width: 16px;
height: 16px;
margin-left: 2px;
}
.polo-masonry-title .portfolio-item.no-overlay .portfolio-description {
opacity: 1;
padding: 0;
margin-top: 14px;
position: relative;
transform: none;
visibility: visible;
width: 100%;
text-align: left;
transition: none;
}
.polo-masonry-title .portfolio-item.no-overlay:hover .portfolio-description {
transform: none;
}
.polo-masonry-title .portfolio-item .portfolio-description a {
color: #3c4043;
text-decoration: none;
display: block;
}
.polo-masonry-title .portfolio-item .portfolio-description a:hover {
text-decoration: none;
}
.polo-masonry-title .portfolio-item.no-overlay .portfolio-description h3 {
color: #3c4043;
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 1px;
line-height: 18px;
margin: 0 0 4px;
text-transform: uppercase;
}
.polo-masonry-title .portfolio-item.no-overlay .portfolio-description span {
color: #676767;
font-family: "Open Sans", "Pretendard", sans-serif;
font-size: 13px;
font-weight: 400;
letter-spacing: 0;
line-height: 15px;
text-transform: capitalize;
opacity: 1;
}
@media (max-width: 767px) {
.polo-masonry-title .portfolio-item.no-overlay .portfolio-description h3 {
font-size: 14px;
line-height: 16px;
}
}
.pxp-night-sky {
display: none;
pointer-events: none;
}
.pxp-avatar-crop-modal .confirm--modal--inner {
width: 560px;
max-width: calc(100% - 24px);
}
.pxp-avatar-crop-modal .confirm--modal--body {
padding-bottom: 12px;
}
.pxp-avatar-crop-modal .confirm--modal--body p {
color: #666;
font-size: 14px;
line-height: 1.45;
}
.pxp-avatar-crop-stage {
position: relative;
overflow: hidden;
width: 100%;
height: min(62vh, 420px);
background: #111;
touch-action: none;
user-select: none;
}
.pxp-avatar-crop-stage img {
position: absolute;
display: block;
max-width: none;
pointer-events: none;
}
.pxp-avatar-crop-circle {
position: absolute;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
cursor: grab;
box-sizing: border-box;
z-index: 2;
}
.pxp-avatar-crop-circle.is-dragging {
cursor: grabbing;
}
.pxp-avatar-crop-zoom {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 24px 4px;
}
.pxp-avatar-crop-zoom label {
margin: 0;
white-space: nowrap;
font-size: 13px;
color: #555;
font-weight: 500;
}
.pxp-avatar-crop-zoom input[type="range"] {
width: 100%;
margin: 0;
}
body.pxp-avatar-crop-open {
overflow: hidden;
}