Файл: sngine-v2.8/Updates/Update 2.5.8 to 2.5.9/Update_2.5.9/content/themes/default/css/style.css
Строк: 5802
/**
* Index:
*
* 01. BASIC
* 02. MAIN
* 03. HEADER
* 04.
COMMON
* 05. PUBLISHER
* 06. POST
* 07. COMMENT
* 08. BLOG
* 09.
FORUM
* 10. AUTO-COMPLETE
* 11. LIGHTBOX
* 12. STORIES
* 13. CHAT
* 14. EMOJI
* 15. PAGE = [BASIC]
* 16. PAGE = [INDEX]
* 17. PAGE =
[DIRECTORY]
* 18. PAGE = [MESSAGES]
* 19. PAGE = [PROFILE]
* 20. PAGE
= [ADMIN]
* 21. PAGE = [MARKET]
* 22. PAGE = [MOVIES]
* 23. NOTY
NOTIFICATION
* 24. TRANSLATOR
* 25. BIG ICON
* 26. LOADER
* 27.
POST LOADER
* 28. ON/OFF TOGGLE
* 29. CUSTOM RADIO/CHECKBOX TEMPLATES
* 30. SOCIAL BUTTONS
* 31. EXTRAS
* 32. OFFCANVAS
*/
/* BASIC
*/
/* ------------------------------- */
:root {
--body-font-family:
Roboto,-apple-system,system-ui,BlinkMacSystemFont,"Segoe
UI","Helvetica Neue",Arial,sans-serif;
--body-bg-color:
#edf2f6;
--body-bg-color-dark: #131313;
--body-color:
#888da8;
--body-color-dark: #dfdfdf;
--link-color: #3367d6;
--header-bg-color: #3367d6;
--header-bg-color-dark:
#212121;
}
body {
font-family:
var(--body-font-family);
padding-top: 50px; /* 50px for header
*/
font-size: 13px;
color: var(--body-color);
background-color:
var(--body-bg-color);
}
body.night-mode {
color:
var(--body-color-dark);
background-color:
var(--body-bg-color-dark);
}
body.n_activated, body.n_live
{
padding-top: 100px; /* 50px for header + 50px for top bar */
}
ul
{
margin: 0;
padding: 0;
list-style: none;
}
video, audio
{
width: 100%!important;
height: 100%!important;
}
a {
color:
var(--link-color);
}
a:hover {
text-decoration: none;
}
/* --
*/
/* 02. MAIN */
/* ------------------------------- */
/* ==
Scrollbar == */
.custom-scrollbar ::-webkit-scrollbar {
visibility:
hidden;
height: 8px;
width: 8px;
}
.custom-scrollbar
::-webkit-scrollbar-thumb {
visibility: hidden;
border-radius:
4px;
background: #808080;
}
.custom-scrollbar:hover
::-webkit-scrollbar,
.custom-scrollbar:hover ::-webkit-scrollbar-thumb
{
visibility: visible;
}
/* == */
/* == Tooltip ==
*/
.tooltip-inner {
font-family: var(--body-font-family);
font-size: 13px;
white-space: nowrap;
max-width: none;
border-radius: 2px;
}
/* == */
/* == Badge == */
.badge.badge-lg
{
font-size: 100%;
}
/* == */
/* == Img-thumbnail ==
*/
body.night-mode .img-thumbnail {
background: #212121;
border-color:
#424242;
}
/* == */
/* == List-group == */
body.night-mode
.list-group-item {
background: #212121;
border-color: #424242;
}
/*
== */
/* == Nav-pills == */
/* -- Custom Nav
*/
.nav-pills.nav-search .nav-item,
.nav-pills.nav-started .nav-item {
margin-right: 10px;
margin-bottom: 10px;
}
.nav-pills.nav-search
.nav-item:last-child,
.nav-pills.nav-started .nav-item:last-child {
margin-right: 0;
}
.nav-pills.nav-search .nav-link:not(.active) {
background: #fff;
}
.nav-pills.nav-started .nav-link {
padding-top:
15px;
padding-bottom: 15px;
}
.nav-pills.nav-started
.nav-link:not(.active) {
background: #f3f3f3;
}
body.night-mode
.nav-pills.nav-search .nav-link:not(.active),
body.night-mode
.nav-pills.nav-started .nav-link:not(.active) {
background: #414141;
color: #fff;
}
body.night-mode .nav-pills.nav-search
.nav-link:not(.active):hover,
body.night-mode .nav-pills.nav-started
.nav-link:not(.active):hover {
background: #555;
}
/* == */
/* ==
Nav-tabs == */
body.night-mode .nav-tabs {
border-bottom-color:
#363636;
}
body.night-mode .nav-tabs .nav-item.show .nav-link,
body.night-mode .nav-tabs .nav-link.active {
color: #fff;
border-color: #363636 #363636 #212121;
background-color:
#212121;
}
body.night-mode .nav-tabs .nav-link:not(.active):hover
{
border-color: #363636;
}
/* == */
/* == Dropdown ==
*/
.dropdown-menu {
min-width: 200px;
box-shadow: 0 50px 100px
rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0,
0, 0, .1);
}
body.night-mode .dropdown-menu {
color:
#e5e5e5;
background: var(--header-bg-color-dark);
box-shadow: 0 6px
12px rgba(0,0,0,.175);
}
.dropdown-menu .dropdown-item {
font-size:
14px;
padding: 8px 16px;
}
.night-mode .dropdown-item {
color:
#e5e5e5;
}
body.night-mode .dropdown-item:focus,
body.night-mode
.dropdown-item:hover {
color: #e5e5e5;
background-color:
#333;
}
body.night-mode .dropdown-divider {
border-top-color:
#424242;
}
/* == */
/* == Modal == */
.modal {
z-index:
999999;
}
body.night-mode .modal-content {
background-color: #212121;
}
body.night-mode .modal-header,
body.night-mode .modal-footer
{
border-color: #424242;
}
/* == */
/* == Alert == */
.alert {
padding: 16px 24px;
}
.alert-link:hover {
text-decoration:
underline;
}
.alert-dismissible {
padding-right:
72px;
}
.alert-primary {
color: #fff;
border-color: #7889e8;
background-color: #7889e8;
}
.alert-primary hr {
border-top-color: #6276e4;
}
.alert-secondary {
color: #212529;
border-color: #f6f7f8;
background-color:
#f6f7f8;
}
.alert-secondary hr {
border-top-color:
#e8eaed;
}
.alert-success {
color: #fff;
border-color:
#4fd69c;
background-color: #4fd69c;
}
.alert-success hr {
border-top-color: #3ad190;
}
.alert-info {
color: #fff;
border-color: #37d5f2;
background-color: #37d5f2;
}
.alert-info hr
{
border-top-color: #1fd0f0;
}
.alert-warning {
color:
#fff;
border-color: #fc7c5f;
background-color:
#fc7c5f;
}
.alert-warning hr {
border-top-color:
#fc6846;
}
.alert-danger {
color: #fff;
border-color:
#f75676;
background-color: #f75676;
}
.alert-danger hr {
border-top-color: #f63e62;
}
.alert-light {
color: #fff;
border-color: #bac1c8;
background-color: #bac1c8;
}
.alert-light hr
{
border-top-color: #acb4bd;
}
.alert-dark {
color: #fff;
border-color: #45484b;
background-color: #45484b;
}
.alert-dark hr
{
border-top-color: #393b3e;
}
/* -- Custom Alerts */
.alert-post
{
background: #f8f9fa;
color: var(--link-color);
font-weight: 600;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.night-mode
.alert-post {
background: #212121;
}
.alert-chat {
background:
#8d8d8d;
width: 75%;
padding: 5px 10px!important;
margin: 0
auto!important;
color: #fff;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
body.night-mode .alert-chat {
background: #000;
}
.alert .title {
padding-bottom:
8px;
margin-bottom: 10px;
font-weight: 600;
border-bottom-width:
1px;
border-bottom-style: solid;
}
.alert .icon {
display:
table-cell;
vertical-align: middle;
padding-right:
10px;
}
.alert .text {
display: table-cell;
vertical-align: top;
text-align: left;
}
/* == */
/* == Buttons == */
.btn {
font-size: 12px;
font-weight: 600;
padding: 12px 34px;
white-space: nowrap;
border-radius: 2px;
}
.btn.focus, .btn:focus
{
outline: 0;
box-shadow: none;
}
.btn.disabled, .btn:disabled
{
box-shadow: none;
}
.btn-lg, .btn-group-lg>.btn
{
font-size: 14px;
padding: 16px 96px;
}
.btn-md,
.btn-group-md>.btn {
font-size: 12px;
padding: 16px
56px;
}
.btn-sm, .btn-group-sm>.btn {
font-size: 11px;
padding:
8px 26px;
}
.btn-icon {
padding: 12px;
}
.btn-lg.btn-icon
{
padding: 19px 22px;
}
.btn-md.btn-icon {
padding: 17px
20px;
}
.btn-sm.btn-icon {
padding: 5px
8px;
}
.btn-primary,
.btn-primary.disabled,.btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle
{
color: #fff;
border-color: #5e72e4;
background-color:
#5e72e4;
}
.btn-primary {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-primary:hover {
color: #fff;
border-color: #4d61cf;
background-color:
#4d61cf;
}
.btn-primary.focus,.btn-primary:focus {
box-shadow: 0 4px
6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(94,114,228,.5)
}
.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-secondary,
.btn-secondary.disabled,.btn-secondary:disabled,
.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle
{
color: #212529;
border-color: #f7fafc;
background-color:
#f7fafc;
}
.btn-secondary {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-secondary:hover {
color: #212529;
border-color: #f1f4f6;
background-color:
#f1f4f6;
}
.btn-secondary.focus,.btn-secondary:focus {
box-shadow: 0
4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(247,250,252,.5);
}
.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-success,
.btn-success.disabled,.btn-success:disabled,
.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle
{
color: #fff;
border-color: #2dce89;
background-color:
#2dce89;
}
.btn-success {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-success:hover {
color: #fff;
border-color: #2bc080;
background-color:
#2bc080;
}
.btn-success.focus,.btn-success:focus {
box-shadow: 0 4px
6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(45,206,137,.5);
}
.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-info,
.btn-info.disabled,.btn-info:disabled,
.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle
{
color: #fff;
border-color: #11cdef;
background-color:
#11cdef;
}
.btn-info {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-info:hover {
color: #fff;
border-color: #10bede;
background-color:
#10bede;
}
.btn-info.focus,.btn-info:focus {
box-shadow: 0 4px 6px
rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(17,205,239,.5);
}
.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-warning,
.btn-warning.disabled,.btn-warning:disabled,
.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle
{
color: #fff;
border-color: #fb6340;
background-color:
#fb6340;
}
.btn-warning {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-warning:hover {
color: #fff;
border-color: #f0603f;
background-color:
#f0603f;
}
.btn-warning.focus,.btn-warning:focus {
box-shadow: 0 4px
6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(251,99,64,.5);
}
.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-danger,
.btn-danger.disabled,.btn-danger:disabled,
.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle
{
color: #fff;
border-color: #f5365c;
background-color:
#f5365c;
}
.btn-danger {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-danger:hover {
color: #fff;
border-color: #eb3357;
background-color:
#eb3357;
}
.btn-danger.focus,.btn-danger:focus {
box-shadow: 0 4px
6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(245,54,92,.5);
}
.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-light,
.btn-light.disabled,.btn-light:disabled,
.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle
{
color: #fff;
border-color: #adb5bd;
background-color:
#adb5bd;
}
.btn-light {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-light:hover {
color: #fff;
border-color: #a5adb4;
background-color:
#a5adb4
}
.btn-light.focus,.btn-light:focus {
box-shadow: 0 4px 6px
rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(173,181,189,.5);
}
.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus
{
box-shadow:
none;
}
.btn-dark,
.btn-dark.disabled,.btn-dark:disabled,
.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle
{
color: #fff;
border-color: #212529;
background-color:
#212529;
}
.btn-dark {
box-shadow: 0 4px 6px rgba(50,50,93,.11),0
1px 3px rgba(0,0,0,.08);
}
.btn-dark:hover {
color: #fff;
border-color: #212529;
background-color:
#212529
}
.btn-dark.focus,.btn-dark:focus {
box-shadow: 0 4px 6px
rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08),0 0 0 0
rgba(33,37,41,.5);
}
.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus
{
box-shadow: none;
}
.btn-link {
font-weight: 400;
color: #5e72e4;
background-color: transparent
}
.btn-link:hover {
text-decoration: none;
color: #233dd2;
border-color:
transparent;
background-color:
transparent
}
.btn-link.focus,.btn-link:focus {
text-decoration:
none;
border-color: transparent;
box-shadow:
none
}
.btn-link.disabled,.btn-link:disabled {
pointer-events:
none;
color: #8898aa
}
.btn-outline-primary {
color:
#5e72e4;
border-color: #5e72e4;
background-color: transparent;
background-image: none
}
.btn-outline-primary:hover {
color:
#fff;
border-color: #5e72e4;
background-color:
#5e72e4
}
.btn-outline-primary.focus,.btn-outline-primary:focus {
box-shadow: 0 0 0 0
rgba(94,114,228,.5);
}
.btn-outline-primary.disabled,.btn-outline-primary:disabled
{
color: #5e72e4;
background-color:
transparent
}
.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle
{
color: #fff;
border-color: #5e72e4;
background-color:
#5e72e4
}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(94,114,228,.5)
}
.btn-outline-secondary
{
color: #f7fafc;
border-color: #f7fafc;
background-color:
transparent;
background-image: none
}
.btn-outline-secondary:hover
{
color: #212529;
border-color: #f7fafc;
background-color:
#f7fafc
}
.btn-outline-secondary.focus,.btn-outline-secondary:focus {
box-shadow: 0 0 0 0
rgba(247,250,252,.5)
}
.btn-outline-secondary.disabled,.btn-outline-secondary:disabled
{
color: #f7fafc;
background-color:
transparent
}
.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle
{
color: #212529;
border-color: #f7fafc;
background-color:
#f7fafc
}
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(247,250,252,.5)
}
.btn-outline-success
{
color: #2dce89;
border-color: #2dce89;
background-color:
transparent;
background-image: none
}
.btn-outline-success:hover {
color: #fff;
border-color: #2dce89;
background-color:
#2dce89
}
.btn-outline-success.focus,.btn-outline-success:focus {
box-shadow: 0 0 0 0
rgba(45,206,137,.5)
}
.btn-outline-success.disabled,.btn-outline-success:disabled
{
color: #2dce89;
background-color:
transparent
}
.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle
{
color: #fff;
border-color: #2dce89;
background-color:
#2dce89
}
.btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(45,206,137,.5)
}
.btn-outline-info {
color: #11cdef;
border-color: #11cdef;
background-color:
transparent;
background-image: none
}
.btn-outline-info:hover {
color: #fff;
border-color: #11cdef;
background-color:
#11cdef
}
.btn-outline-info.focus,.btn-outline-info:focus {
box-shadow: 0 0 0 0
rgba(17,205,239,.5)
}
.btn-outline-info.disabled,.btn-outline-info:disabled
{
color: #11cdef;
background-color:
transparent
}
.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle
{
color: #fff;
border-color: #11cdef;
background-color:
#11cdef
}
.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(17,205,239,.5)
}
.btn-outline-warning
{
color: #fb6340;
border-color: #fb6340;
background-color:
transparent;
background-image: none
}
.btn-outline-warning:hover {
color: #fff;
border-color: #fb6340;
background-color:
#fb6340
}
.btn-outline-warning.focus,.btn-outline-warning:focus {
box-shadow: 0 0 0 0
rgba(251,99,64,.5)
}
.btn-outline-warning.disabled,.btn-outline-warning:disabled
{
color: #fb6340;
background-color:
transparent
}
.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle
{
color: #fff;
border-color: #fb6340;
background-color:
#fb6340
}
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(251,99,64,.5)
}
.btn-outline-danger {
color: #f5365c;
border-color: #f5365c;
background-color:
transparent;
background-image: none
}
.btn-outline-danger:hover {
color: #fff;
border-color: #f5365c;
background-color:
#f5365c
}
.btn-outline-danger.focus,.btn-outline-danger:focus {
box-shadow: 0 0 0 0
rgba(245,54,92,.5)
}
.btn-outline-danger.disabled,.btn-outline-danger:disabled
{
color: #f5365c;
background-color:
transparent
}
.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle
{
color: #fff;
border-color: #f5365c;
background-color:
#f5365c
}
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(245,54,92,.5)
}
.btn-outline-light {
color: #adb5bd;
border-color: #adb5bd;
background-color:
transparent;
background-image: none
}
.btn-outline-light:hover {
color: #fff;
border-color: #adb5bd;
background-color:
#adb5bd
}
.btn-outline-light.focus,.btn-outline-light:focus {
box-shadow: 0 0 0 0
rgba(173,181,189,.5)
}
.btn-outline-light.disabled,.btn-outline-light:disabled
{
color: #adb5bd;
background-color:
transparent
}
.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle
{
color: #fff;
border-color: #adb5bd;
background-color:
#adb5bd
}
.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(173,181,189,.5)
}
.btn-outline-dark {
color: #212529;
border-color: #212529;
background-color:
transparent;
background-image: none
}
.btn-outline-dark:hover {
color: #fff;
border-color: #212529;
background-color:
#212529
}
.btn-outline-dark.focus,.btn-outline-dark:focus {
box-shadow: 0 0 0 0
rgba(33,37,41,.5)
}
.btn-outline-dark.disabled,.btn-outline-dark:disabled
{
color: #212529;
background-color:
transparent
}
.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle
{
color: #fff;
border-color: #212529;
background-color:
#212529
}
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus
{
box-shadow: 0 0 0 0 rgba(33,37,41,.5)
}
/* -- Custom Buttons
*/
.btn-rounded {
border: 0!important;
border-radius:
50%;
}
.btn-delete:hover {
color: #fff;
border-color: #eb3357;
background-color: #eb3357;
}
.btn-delete:hover .fa:before {
content:
"\f1f8";
}
.btn-payment {
background:
#f7f7f7;
}
.btn-payment:hover {
background: #f1f1f1;
}
/* ==
*/
/* == Inputs == */
.form-control, .input-group-text
{
border-color: #ddd;
border-radius: 2px;
}
body.night-mode
.form-control,
body.night-mode .input-group-text {
background-color:
#232323;
border-color: #363636;
color: #dfdfdf;
}
.form-control:focus
{
box-shadow: none;
}
.form-control-label {
font-weight: 600;
color: #525f7f;
}
body.night-mode .form-control-label {
color:
#a3afce;
}
.input-group .btn {
padding-top: 9px;
padding-bottom: 9px;
}
.custom-control-label {
padding-top:
2px;
}
/* -- Custom Inputs */
.form-table-row {
display: flex;
margin-bottom: 30px;
}
.form-table-row > div {
flex:
1;
}
.form-table-row > div:last-child {
flex-basis: auto;
flex-grow: 0;
margin-left: 10px;
}
.form-table-row > div.avatar
{
flex-basis: auto;
flex-grow: 0;
margin-right:
10px;
}
.input-money {
position: relative;
}
.input-money span
{
font-size: 20px;
position: absolute;
top: 15px;
left:
0;
width: 45px;
text-align: center;
}
.input-money input
{
font-size: 40px;
line-height: 40px;
font-family:
opensanslight;
margin: 0;
padding: 10px;
padding-left:
45px;
height: 60px;
outline: 0;
}
/* == */
/* == Card ==
*/
.card {
border: 1px solid #e6ecf5;
margin-bottom:
20px;
}
body.night-mode .card {
background: #212121;
border-color:
#212121;
}
.card-header {
background-color: #f6f9fc;
border-color:
#e6ecf5;
}
body.night-mode .card-header {
background:
#212121;
border-color: #363636;
}
/* -- Custom Cards
*/
.card-header.with-icon {
padding-top: 20px;
padding-bottom:
20px;
}
.card-header.with-nav {
padding-bottom: 0;
border-bottom: 0;
}
@media (min-width: 768px) {
.card-header.with-icon
{
font-size: 14px;
font-weight: 500;
}
}
.card-header.block-title
{
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
padding: 10px 35px;
background:
transparent;
}
.card-body.with-nav,
.card-body.with-list {
padding:
10px;
}
.card-body .divider {
border-top: 1px solid #e6ecf5;
margin:
25px 0;
}
body.night-mode .card-body .divider {
border-color:
#131313;
}
@media (min-width: 768px) {
.card-body.page-content
{
padding: 50px;
}
}
body.night-mode
.card-pricing,
body.night-mode .card-pricing .list-group-item
{
background: #292929;
}
/* == */
/* == Bg-gradient ==
*/
.bg-gradient-primary {
color: #fff!important;
background:
linear-gradient(87deg,#5e72e4 0,#825ee4
100%)!important;
}
.bg-gradient-secondary {
background:
linear-gradient(87deg,#f7fafc 0,#f7f8fc
100%)!important;
}
.bg-gradient-success {
color: #fff!important;
background: linear-gradient(87deg,#2dce89 0,#2dcecc
100%)!important;
}
.bg-gradient-info {
color: #fff!important;
background: linear-gradient(87deg,#11cdef 0,#1171ef
100%)!important;
}
.bg-gradient-warning {
color: #fff!important;
background: linear-gradient(87deg,#fb6340 0,#fbb140
100%)!important;
}
.bg-gradient-danger {
color: #fff!important;
background: linear-gradient(87deg,#f5365c 0,#f56036
100%)!important;
}
.bg-gradient-light {
background:
linear-gradient(87deg,#adb5bd 0,#adaebd
100%)!important;
}
.bg-gradient-dark {
color: #eee;
background: linear-gradient(87deg,#212529 0,#212229
100%)!important;
}
.bg-gradient-default {
color: #eee;
background: linear-gradient(87deg,#172b4d 0,#1a174d
100%)!important;
}
.bg-gradient-white {
background:
linear-gradient(87deg,#fff 0,#fff
100%)!important;
}
.bg-gradient-neutral {
background:
linear-gradient(87deg,#fff 0,#fff
100%)!important;
}
.bg-gradient-darker {
color: #eee;
background: linear-gradient(87deg,#000 0,#000
100%)!important;
}
.bg-gradient-blue {
color: #fff!important;
background: linear-gradient(87deg,#5e72e4 0,#825ee4
100%)!important;
}
.bg-gradient-indigo {
color: #fff!important;
background: linear-gradient(87deg,#5603ad 0,#9d03ad
100%)!important;
}
.bg-gradient-purple {
color: #fff!important;
background: linear-gradient(87deg,#8965e0 0,#bc65e0
100%)!important;
}
.bg-gradient-pink {
color: #fff!important;
background: linear-gradient(87deg,#f3a4b5 0,#f3b4a4
100%)!important;
}
.bg-gradient-red {
color: #fff!important;
background: linear-gradient(87deg,#f5365c 0,#f56036
100%)!important;
}
.bg-gradient-orange {
color: #fff!important;
background: linear-gradient(87deg,#fb6340 0,#fbb140
100%)!important;
}
.bg-gradient-yellow {
color: #666;
background: linear-gradient(87deg,#ffd600 0,#beff00
100%)!important;
}
.bg-gradient-green {
color: #fff!important;
background: linear-gradient(87deg,#2dce89 0,#2dcecc
100%)!important;
}
.bg-gradient-teal {
color: #fff!important;
background: linear-gradient(87deg,#11cdef 0,#1171ef
100%)!important;
}
.bg-gradient-cyan {
color: #fff!important;
background: linear-gradient(87deg,#2bffc6 0,#2be0ff
100%)!important;
}
.bg-gradient-white {
background:
linear-gradient(87deg,#fff 0,#fff 100%)!important;
}
.bg-gradient-gray
{
color: #fff!important;
background:
linear-gradient(87deg,#8898aa 0,#888aaa
100%)!important;
}
.bg-gradient-gray-dark {
color:
#fff!important;
background: linear-gradient(87deg,#32325d 0,#44325d
100%)!important;
}
.bg-gradient-light {
background:
linear-gradient(87deg,#ced4da 0,#cecfda
100%)!important;
}
.bg-gradient-lighter {
background:
linear-gradient(87deg,#e9ecef 0,#e9eaef 100%)!important;
}
/* ==
*/
/* == Callout == */
.bs-callout {
background: #fff;
padding: 20px;
margin: 20px 0;
border-left: 5px solid #eee;
border-radius: 3px;
}
body.night-mode .bs-callout {
background:
#212121;
}
.bs-callout h4 {
margin-top: 0;
margin-bottom:
5px;
}
.bs-callout p:last-child {
margin-bottom: 0;
}
.bs-callout
code {
border-radius: 3px;
}
.bs-callout+.bs-callout {
margin-top: -5px;
}
.bs-callout-default {
border-left-color:
#777;
}
.bs-callout-default h4 {
color:
#777;
}
.bs-callout-primary {
border-left-color:
#428bca;
}
.bs-callout-primary h4 {
color:
#428bca;
}
.bs-callout-success {
border-left-color:
#5cb85c;
}
.bs-callout-success h4 {
color:
#5cb85c;
}
.bs-callout-danger {
border-left-color:
#d9534f;
}
.bs-callout-danger h4 {
color:
#d9534f;
}
.bs-callout-warning {
border-left-color:
#f0ad4e;
}
.bs-callout-warning h4 {
color:
#f0ad4e;
}
.bs-callout-info {
border-left-color:
#5bc0de;
}
.bs-callout-info h4 {
color: #5bc0de;
}
/* ==
*/
/* == Bootstrap-select ==
*/
.bootstrap-select:not(.input-group-btn) {
height:
100%;
}
.bootstrap-select .dropdown-toggle .filter-option {
display:
inline-block!important;
position: static!important;
padding:
0!important;
}
.bootstrap-select .btn-outline-light {
color:
#495057;
border-color: #ddd;
}
.bootstrap-select .option .icon {
display: table-cell;
vertical-align: middle;
padding-right:
10px
}
.bootstrap-select .option .text {
display: table-cell;
vertical-align: top;
text-align: left
}
/* == */
/* == MCE
Editor == */
div.mce-fullscreen {
z-index: 99999;
}
/* == */
/*
== jQuery-UI [autocomplete] == */
.ui-autocomplete {
position:
absolute;
top: 0;
left: 0;
cursor: default;
z-index:
9999;
}
.ui-widget-content {
background: #fff;
color: #444;
z-index: 99999;
padding: 10px;
border-radius: 0 0 3px 3px;
box-shadow: 0 3px 4px rgba(0,0,0,.15);
}
body.night-mode
.ui-widget-content {
background: var(--header-bg-color-dark);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.ui-menu-item {
position:
relative;
margin: 0;
padding: 5px 0;
border-radius: 3px;
cursor: pointer;
}
.ui-menu-item:hover {
background:
#efefef;
}
body.night-mode .ui-menu-item:hover {
background:
#424242;
}
.ui-menu-item a {
color: #444;
}
body.night-mode
.ui-menu-item a {
color: #e5e5e5;
}
.ui-menu-item img {
width:
30px;
margin: 5px;
border-radius: 50%;
}
.ui-menu-item span {
font-size: 13px;
}
/* -- */
/* HEADER */
/*
------------------------------- */
/* main-wrapper */
.main-wrapper {
width: 100%;
min-width: 260px; /* to show scroll for small size
browsers ;) */
}
/* -- */
/* top-bar */
.top-bar {
position:
fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
font-size:
12px;
line-height: 50px;
background: #fff2cc;
color: #333;
z-index:
1001;
}
@media (min-width: 768px) {
.top-bar {
font-size:
13px;
}
.top-bar .col-sm-5 {
text-align:
right;
}
}
.top-bar.danger {
background: #ce3426;
color:
#fff;
}
.top-bar.danger a {
color: #fff200;
}
.top-bar.danger a:hover
{
text-decoration: underline;
}
/* -- */
/* main-header
*/
.main-header {
position: fixed;
top: 0;
left: 0;
right:
0;
height: 50px;
background: var(--header-bg-color);
z-index:
1001;
}
body.night-mode:not(.visitor) .main-header {
background:
var(--header-bg-color-dark);
box-shadow: 0 1px 4px rgba(0, 0, 0,
0.2);
}
/* ** fix bootstrap modal padding-right for hiding scroll
*/
body.modal-open .main-header,
body.modal-open .top-bar
{
padding-right: 17px !important;
}
@media (min-width: 768px) {
body.modal-open:not(.n_chat) .main-header,
body.modal-open:not(.n_chat)
.top-bar {
padding-right: 227px !important;
}
}
/* -- */
@media
(min-width: 1200px) {
.main-wrapper,
.top-bar,
.main-header
{
padding-right: 210px;
}
body.n_chat
.main-wrapper,
body.n_chat .top-bar,
body.n_chat .main-header{
padding-right: 0;
}
}
body.n_activated .main-header,
body.n_live .main-header {
top: 50px; /* for top bar */
}
/* --
*/
/* logo-wrapper */
.main-header .logo-wrapper {
padding-left:
15px;
height: 50px;
overflow: hidden;
word-break:
break-all;
}
.main-header .logo {
display: block;
font-size:
11px;
font-weight: 600;
line-height: 50px;
color: #fff;
opacity:
1;
text-transform: uppercase;
}
.main-header .logo:hover {
opacity:
0.8;
text-decoration: none;
}
.main-header .logo img {
max-height:
50px;
}
/* -- */
/* search-wrapper */
.main-header .search-wrapper
{
position: relative;
}
.main-header .search-wrapper .form-control
{
height: 34px;
margin-top: 8px;
margin-bottom: 8px;
box-shadow:
none;
background: #2850a7;
border: 0 none;
border-radius:
2px;
color: #fff;
}
body.night-mode:not(.visitor) .main-header
.search-wrapper .form-control {
background:
var(--body-bg-color-dark);
}
.main-header .search-wrapper
.form-control::-webkit-input-placeholder {
color:
#96aad4;
}
.main-header .search-wrapper .form-control:-moz-placeholder
{
color: #96aad4;
opacity: 1;
}
.main-header .search-wrapper
.form-control:-ms-input-placeholder {
color: #96aad4;
}
/* -- */
/*
navbar-wrapper */
@media (min-width: 768px) {
.navbar-wrapper
{
float: right;
}
}
.navbar-wrapper > ul > li {
float:
left;
display: block;
width: 14.28571428571429%;
}
@media (min-width:
768px) {
.navbar-wrapper > ul > li {
width: auto!important;
margin-right: 2px;
}
.navbar-wrapper > ul > li:last-child
{
margin-right: 0;
}
}
body.visitor .navbar-wrapper > ul > li
{
width: auto;
}
.navbar-wrapper > ul > li > a {
position: relative;
display: block;
text-align: center;
color:
#fff;
height: 50px;
padding: 18px 8px;
line-height:
100%;
}
.navbar-wrapper > ul > li > a:hover
{
background-color: rgba(255, 255, 255, 0.1);
}
body.night-mode
.navbar-wrapper > ul > li > a:hover {
background-color: rgba(0,
0, 0, 0.1);
}
.navbar-wrapper > ul > li.dropdown.show > a
{
background-color: rgba(255, 255, 255, 0.1);
}
body.night-mode
.navbar-wrapper > ul > li.dropdown.show > a {
background-color:
#494c62;
}
@media (min-width: 992px) {
.navbar-wrapper > ul > li
> a {
padding: 18px 10px;
}
}
.navbar-wrapper .counter
{
position: absolute;
top: 5px;
right: 0;
padding: 2px
4px;
color: #fff;
font-size: 10px;
font-weight: 600;
border-radius:
3px;
}
.navbar-wrapper .counter.red {
background:
#ff5e3a;
}
.navbar-wrapper .counter.blue {
background:
#38a9ff;
}
.navbar-wrapper .counter.purple {
background:
#7c5ac2;
}
/* -- user-menu */
.navbar-wrapper .user-menu > img
{
display: inline-block;
margin-top: -5px;
height: 20px;
width:
20px;
border-radius: 50%;
}
@media (min-width: 768px)
{
.navbar-wrapper .user-menu > img {
height: 25px;
width:
25px;
}
}
@media (min-width: 1400px) {
.navbar-wrapper .user-menu
> span {
display: inline-block!important;
max-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* --
dropdown-menu */
.navbar-wrapper .dropdown-menu:not(.dropdown-widget)
{
margin-top: 0;
border-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar-wrapper > ul > li.dropdown
{
position: static;
}
@media (min-width: 768px) {
.navbar-wrapper > ul > li.dropdown {
position: relative;
}
}
/* -- dropdown-widget */
.dropdown-widget {
width:
100%;
padding-bottom: 0;
padding-top: 0;
border:
0;
}
.dropdown-widget-header {
padding: 10px;
font-size:
11px;
border-bottom: 1px solid #e4e4e4;
}
body.night-mode
.dropdown-widget-header {
border-color:
#424242;
}
.dropdown-widget-header .title {
text-transform:
uppercase;
color: #9a9fbf;
font-size: 9px;
font-weight:
700;
}
.dropdown-widget-header a:hover {
text-decoration:
underline;
}
.dropdown-widget-body {
padding: 0;
font-size:
12px
}
.dropdown-widget-body .title {
border-top: 1px solid
#e4e4e4;
border-bottom: 1px solid #e4e4e4;
color: #9a9fbf;
padding:
8px;
display: block;
font-size: 11px;
font-weight:
600;
line-height: 16px;
}
body.night-mode .dropdown-widget-body .title
{
border-color: #424242;
}
.dropdown-widget-footer {
background:
#f6f9fc;
display: block;
padding: 10px 0;
border-top: 1px solid
#e5e5e5;
border-bottom: 0 none;
text-align: center;
font-size:
11px;
border-radius: 0 0 4px 4px;
}
body.night-mode
.dropdown-widget-footer {
background: #1b1b1b;
border-color:
#424242;
}
.dropdown-widget-footer:hover {
text-decoration:
underline;
}
@media (min-width: 768px) {
.dropdown-widget
{
min-width: 380px!important;
}
.dropdown-widget.with-arrow:before
{
position: absolute;
display: inline-block;
content:
'';
top: -7px;
right: 10px;
border-right: 7px solid
transparent;
border-left: 7px solid transparent;
border-bottom:
7px solid #fff;
}
body.night-mode .dropdown-widget.with-arrow:before
{
border-bottom-color:
var(--header-bg-color-dark);
}
.dropdown-widget.dropdown-search
{
border-radius: 2px 2px 0 0;
}
}
/* -- */
/* COMMON */
/*
------------------------------- */
/* section-title */
.section-title
{
background: #f5f5f5;
padding: 10px;
font-size: 13px;
font-weight: 600;
text-align: center;
border-radius:
2px;
}
body.night-mode .section-title {
color: #5e72e4;
background-color: #111111;
}
/* -- */
/* heading */
.heading-small
{
font-size: 12px;
padding: 4px 0;
letter-spacing: .04em;
text-transform: uppercase
}
/* -- */
/* hr-heading */
.hr-heading
{
display: block;
overflow: hidden;
text-align:
center;
white-space: nowrap;
}
.hr-heading-text {
position:
relative;
display: inline-block;
color:
#999;
}
.hr-heading-text:before,
.hr-heading-text:after {
position:
absolute;
top: 50%;
width: 9999px;
height: 1px;
background:
#ddd;
content: '';
}
body.night-mode .hr-heading-text:before,
body.night-mode .hr-heading-text:after {
background:
#323232;
}
.hr-heading-text:before {
right: 100%;
margin-right:
15px;
}
.hr-heading-text:after {
left: 100%;
margin-left:
15px;
}
/* -- */
/* user-box */
.user-box {
display: block;
margin: 5px;
text-align: center;
text-decoration:
none;
}
.pro-box-wrapper .user-box {
width: 71px;
float: left;
opacity: .55;
}
.pro-box-wrapper.full-opacity .user-box {
opacity:
1;
}
.pro-box-wrapper .user-box.slick-center {
opacity: 1;
transform: scale(1.1);
font-weight: 600;
}
.user-box img {
width: 100%;
height: 100%;
margin: 0 auto;
border-radius:
50%;
}
.pro-box-wrapper .user-box img {
width: 60px;
height:
60px;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.user-box .name {
margin-top: 5px;
font-size: 11px;
word-break: break-word;
white-space: nowrap;
overflow: hidden;
text-overflow:
ellipsis;
}
/* -- */
/* ui-box */
.ui-box {
position:
relative;
background: #f6f9fc;
padding: 50px 15px 15px;
margin-top: 50px;
margin-bottom: 20px;
text-align: center;
border-radius: 4px;
}
body.night-mode .ui-box {
background:
#292929;
}
.ui-box .img {
position: absolute;
top: -50px;
left: 50%;
transform: translate(-50%);
background: #fff;
padding: 4px;
margin: 0 auto;
border-radius:
50%;
}
body.night-mode .ui-box .img {
background:
#212121;
}
.ui-box img {
height: 92px;
width: 92px;
border-radius: 50%;
}
.ui-box .btn {
box-shadow: none;
}
/* --
*/
/* stat-panel */
.stat-panel {
border-radius: 4px;
margin-bottom: 20px;
overflow: hidden;
}
.stat-panel.border {
border: 1px solid #e6ecf5;
}
body.night-mode .stat-panel.border {
border-color: #363636!important;
}
.stat-cell {
position:
relative;
padding: 20px;
}
.stat-cell .icon {
position:
absolute;
top: 20px;
right: 20px;
background: #fff;
font-size: 20px;
width: 48px;
height: 48px;
padding: 14px;
border-radius: 50%;
}
.stat-cell .bg-icon {
position: absolute;
bottom: 0;
right: 0;
font-size: 100px;
opacity:
0.25;
}
.stat-cell a {
font-size: 12px;
color:
#fff;
}
.stat-cell a:hover {
text-decoration: underline;
}
/* --
*/
/* main-side-nav */
.main-side-nav {
z-index:
2;
}
.main-side-nav img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.main-side-nav a, .main-side-nav .static {
display: block;
font-weight: 500;
padding: 8px 16px;
color:
#919191;
}
.main-side-nav a[data-toggle=collapse]:after {
font-family: 'Font Awesome 5 Free';
font-weight: 700;
font-style:
normal;
font-variant: normal;
display: inline-block;
float:
right;
content: '\f105';
transition: all .15s ease;
color:
#ced4da;
text-rendering: auto;
-webkit-font-smoothing:
antialiased;
}
.main-side-nav
a[data-toggle=collapse][aria-expanded=true]:after {
transform:
rotate(90deg);
color: #5e72e4;
}
.main-side-nav a:hover {
color: #5e72e4;
}
.main-side-nav a.no-border {
border-bottom:
0;
}
.main-side-nav > li.active > a {
background-color:
#f6f9fc;
color: #5e72e4;
border-radius: 5px;
}
body.night-mode
.main-side-nav > li.active > a {
background-color:
#111111;
}
.main-side-nav ul > li.active > a {
color:
#5e72e4;
}
.main-side-nav ul a {
margin-left: 32px;
padding:
10px 20px;
font-size: 11px;
color: #888da8;
border-left: 1px
solid #eee;
}
/* side-nav */
.side-nav a, .side-nav .static
{
display: block;
font-weight: 500;
padding: 15px 25px;
color: #919191;
}
.side-nav a:hover {
color: #5e72e4;
}
.side-nav
a[data-toggle=collapse]:after {
font-family: 'Font Awesome 5 Free';
font-weight: 700;
font-style: normal;
font-variant: normal;
display: inline-block;
float: right;
content: '\f105';
transition: all .15s ease;
color: #ced4da;
text-rendering:
auto;
-webkit-font-smoothing: antialiased;
}
.side-nav
a[data-toggle=collapse][aria-expanded=true]:after {
transform:
rotate(90deg);
color: #5e72e4;
}
.side-nav > li.active > a
{
background-color: #f6f9fc;
color: #5e72e4;
border-radius:
5px;
}
body.night-mode .side-nav > li.active > a
{
background-color: #111111;
}
.side-nav ul > li.active > a
{
color: #5e72e4;
}
.side-nav ul a {
margin-left: 32px;
padding:
10px 20px;
font-size: 11px;
color: #888da8;
border-left: 1px
solid #eee;
}
body.night-mode .side-nav ul a {
border-left-color:
#363636;
}
/* -- */
/* content-tabs */
.content-tabs {
background: #fff;
margin-bottom: 20px;
padding: 0
5px;
}
body.night-mode .content-tabs {
background: #212121;
}
@media
(min-width: 768px) {
.content-tabs {
padding: 0
10px;
}
}
.content-tabs > ul > li {
float:
left;
}
.content-tabs > ul > li > a {
display: block;
padding: 12px 14px;
font-size: 12px;
line-height: 20px;
color: #666;
transition: all .2s ease;
}
body.night-mode
.content-tabs > ul > li > a {
color: #eee;
}
@media
(min-width: 768px) {
.content-tabs > ul > li > a {
padding:
14px 24px;
font-size: 13px;
}
}
.content-tabs > ul > li.active
> a {
color: var(--link-color);
font-weight: 600;
border-bottom: 2px solid var(--link-color);
}
/* -- */
/* see-more
*/
.see-more {
text-align: center;
margin: 10px 0 0;
padding:
10px;
}
.see-more:hover {
text-decoration: underline;
cursor:
pointer;
}
.see-more.loading:hover {
text-decoration: none;
cursor:
default;
}
.see-more.done:hover {
text-decoration: underline;
cursor:
text;
}
/* --*/
/* feeds-item */
.feeds-item {
border-bottom: 1px
solid #e6ecf5;
}
body.night-mode .feeds-item {
border-color:
#323232;
}
.feeds-item:last-child {
border-bottom: 0
none;
}
.feeds-item.unread {
background: #e9eaed;
}
body.night-mode
.feeds-item.unread {
background: #2b2b2b;
}
/* -- */
/*
data-container */
.data-container {
position: relative; /* relative for
.data-avatar to be absolute */
display: block;
width: 100%;
padding:
8px;
min-height: 56px; /* 40px avatar + 16px padding
*/
}
.data-container.small {
min-height: 46px; /* 30px avatar + 16px
padding */
}
a.data-container:hover,
.data-container.clickable:hover
{
background: #f6f7f8;
text-decoration: none;
cursor:
pointer;
}
body.night-mode a.data-container:hover,
body.night-mode
.data-container.clickable:hover {
background:
#424242;
}
.data-avatar {
position: absolute;
top: 8px;
left:
8px;
width: 30px;
height: 30px;
text-align: center;
border-radius:
50%;
}
@media (min-width: 768px) {
.data-avatar {
width:
40px;
height: 40px;
border-radius: 50%;
}
.data-container.small .data-avatar {
width: 30px; /* override the
previous */
height: 30px;
}
}
.data-avatar .left-avatar,
.data-avatar .right-avatar {
background-size:
cover;
background-position: center center;
float: left;
overflow:
hidden;
width: 14px;
height: 30px;
margin-right:
1px;
border-radius: 20px 0 0 20px;
}
.data-avatar .right-avatar
{
width: 15px;
margin-right: 0;
border-radius: 0 20px 20px
0;
}
@media (min-width: 768px) {
.data-avatar .left-avatar,
.data-avatar .right-avatar {
width: 19px;
height: 40px;
border-radius: 20px 0 0 20px;
}
.data-avatar .right-avatar
{
width: 20px;
border-radius: 0 20px 20px 0;
}
.data-container.small .data-avatar .left-avatar,
.data-container.small .data-avatar .right-avatar {
width: 14px;
height: 30px;
}
.data-container.small .data-avatar
.right-avatar {
width: 15px;
}
}
.data-content
{
padding-left: 38px;
color: #818181;
font-size: 11px;
}
@media
(min-width: 768px) {
.data-content {
padding-left: 48px;
word-wrap: break-word;
}
.data-container.small .data-content
{
padding-left: 38px; /* override the previous */
}
}
.data-content .data-img {
background-color: #fff;
border: 1px
solid #ddd;
padding: 1px;
width: 48px;
height: 48px;
object-fit:
cover;
}
.data-content .btn {
padding: 2px 6px;
font-size:
10px;
}
@media (min-width: 576px) {
.data-content .btn {
padding:
4px 12px;
font-size: 12px;
}
}
.data-content .name
{
font-weight: bold;
}
.data-content .time {
font-size:
10px;
color: #bbb;
}
.data-content .text {
word-break:
break-all;
}
/* -- */
/* x-form */
.x-form {
position: relative;
/* for x-form-tools */
}
.x-form-tools {
position: absolute;
color:
#afafaf;
}
.x-form-tools > li {
float: left;
margin-left:
4px;
padding: 4px 2px;
border-radius: 50%;
}
.x-form-tools >
li:first-child {
margin-left: 0;
}
.x-form-tools > li:hover
{
background: #f3f3f3;
cursor: pointer;
}
body.night-mode
.x-form-tools > li:hover {
background:
#333;
}
.x-form-tools-post,
.x-form-tools-attach,
.x-form-tools-emoji
{
position: relative; /* for input & menus */
overflow:
hidden;
display: inline-block;
cursor: pointer;
}
.x-form-tools-post,
.x-form-tools-attach {
/*margin-right:
3px;*/
}
.x-form-tools-*:last-child {
/*margin-right: 0;*/
}
@media
(min-width: 992px) {
.x-form-tools-post {
display:
none;
}
}
.x-form-tools-attach 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;
}
/* -- */
/* attachments
*/
.attachments li {
float: left;
width: 64px;
height:
64px;
margin-right: 5px;
margin-bottom: 5px;
-webkit-transition:
padding .5s;
transition: padding .5s;
}
@media (min-width: 768px) {
.attachments li {
width: 96px;
height: 96px;
}
}
.attachments li.item {
position: relative; /* for :before &
button */
border: 1px solid #eee;
cursor: pointer;
}
body.night-mode
.attachments li.item {
border-color: #424242;
}
.attachments li.item
img {
width: 64px;
height: 64px;
}
@media (min-width: 768px) {
.attachments li.item img {
width: 94px;
height: 94px;
}
}
.attachments li.item .name {
background: #fafafa;
height:
100%;
width: 100%;
padding: 10px;
color: #999;
font-size: 10px;
word-break: break-all;
}
.attachments
li.item.deletable:before {
position: absolute;
top: 0;
left:
0;
right: 0;
background: rgba(0, 0, 0, 0.6);
width: 64px;
height:
64px;
content: "";
display: none;
}
@media (min-width:
768px) {
.attachments li.item.deletable:before {
width:
94px;
height: 94px;
}
}
.attachments
li.item.deletable:hover:before {
display: block;
}
.attachments li.item
button {
position: absolute;
top: 0;
right: 5px;
color:
#fff;
text-shadow: 0 1px 0 #000;
filter: alpha(opacity=40);
opacity:
0.4;
display: none;
}
.attachments li.item.deletable:hover button
{
display: block;
}
.attachments li.item.deletable button:hover
{
filter: alpha(opacity=80);
opacity: 0.8;
}
.attachments li.loading
{
padding-top: 22px; /* 64px-20px(loader) / 2 */
background:
#f3f3f3;
border: 1px solid #eee;
display: none;
}
@media (min-width:
768px) {
.attachments li.loading {
padding-top: 45px; /*
96px-5px(loader) / 2 */
}
}
body.night-mode .attachments li.loading
{
background: #212121;
border-color: #424242;
}
.attachments
li.add {
position: relative;
overflow: hidden;
padding: 20px
0 0 25px;
color: #ddd;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
border: 2px dashed #cecece;
}
@media
(min-width: 768px) {
.attachments li.add {
padding: 30px 0 0
35px;
font-size: 24px;
}
}
/* -- */
/* x-uploader
*/
.x-uploader {
overflow: hidden;
}
.x-uploader input[type=file]
{
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
opacity: 0;
outline: none;
background: white;
cursor:
pointer;
display: block;
}
.x-uploader .fa {
cursor:
pointer;
}
/* -- */
/* x-image */
.x-image {
position:
relative;
background-size: cover;
background-repeat:
no-repeat;
background-position: center;
background-color:
#eee;
width: 96px;
height: 96px;
overflow: hidden;
display:
block;
border-radius: 2px;
}
body.night-mode .x-image
{
background-color: #333;
}
.x-image.full {
width:
100%;
}
.x-image.sm {
width: 48px;
height: 48px;
}
.x-image:before
{
position: absolute;
top: 0;
left: 0;
right: 0;
width:
100%;
height: 100%;
background: #000;
content: '';
opacity:
0;
}
.x-image:hover.x-image:before {
opacity: 0.2;
}
.x-image-success
{
display: none;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
padding-top: 30%;
text-align: center;
color: #fff;
font-size: 12px;
-webkit-transition: all .5s;
transition: all
.5s;
}
.x-image-loader {
display: none;
position: absolute;
top: 0;
left: 0;
opacity: 0.5;
background: #000;
width:
100%;
height: 100%;
padding-top: 50%;
-webkit-transition:
all .5s;
transition: all .5s;
}
.x-image.full .x-image-loader
{
padding-top: 20%;
}
.x-image .x-uploader {
position:
absolute;
bottom: 5px;
right: 5px;
}
.x-image button {
position:
absolute;
top: 0;
right: 5px;
}
/* -- */
/* x-progress
(uploading progress) */
.x-progress {
height: 5px;
margin: 0
1.5rem;
border-radius: 25px;
}
/* -- */
/* tbl-image
*/
.tbl-image {
width: 24px;
height: 24px;
float: left;
margin-right: 5px;
border-radius: 50%;
}
/* -- */
/* badges
*/
.verified-badge {
color: #55acee;
}
.pro-badge {
color:
#e13c4c;
}
.privacy-badge {
color: #fff;
font-size:
16px;
}
.verified-badge:hover,
.pro-badge:hover,
.privacy-badge:hover
{
cursor: pointer;
}
/* -- */
/* ads */
.ads-title {
font-size:
14px;
padding: 5px 0;
margin: 0;
word-break:
break-all;
}
.ads-descrition {
font-size: 12px;
word-break:
break-word;
}
.adblock-warning-message {
display: none;
padding:
20px;
background: #D30000;
text-align: center;
color: #fff;
border-radius: 2px;
}
.adblock-detector {
position: fixed;
top:
46px;
left: 0;
right: 0;
display: none;
margin-bottom:
30px;
padding: 20px 10px;
background: #D30000;
text-align:
center;
font-weight: bold;
color: #fff;
}
/* -- */
/*
user-popover */
@media (min-width: 768px) {
.user-popover
{
position: relative;
}
.user-popover-wrapper {
width:
400px;
height: 174px;
z-index:
99999;
}
.user-popover-wrapper:before {
content:
"";
position: absolute;
border-left: 10px solid
transparent;
border-right: 10px solid transparent;
border-bottom:
10px solid #e6ecf5;
top: 0;
}
body.night-mode
.user-popover-wrapper:before {
border-bottom-color:
#000000;
}
.user-popover-wrapper.tr:before {
left:
10px;
}
.user-popover-wrapper.tl:before {
right:
10px;
}
.user-popover-wrapper:after {
content: '';
position:
absolute;
border-left: 8px solid transparent;
border-right: 8px solid
transparent;
border-bottom: 9px solid #fff;
top: 1px;
z-index:
99999;
}
body.night-mode .user-popover-wrapper:after
{
border-bottom-color: #212121;
}
.user-popover-wrapper.tr:after
{
left: 12px;
}
.user-popover-wrapper.tl:after {
right:
12px;
}
.user-popover-content {
width: 400px;
position:
absolute;
top: 9px;
left: 0;
font-size: 14px;
text-align:
left;
border: 1px solid #e6ecf5;
border-radius:
3px;
background-color: #fff;
box-shadow: 0 6px 12px
rgba(0,0,0,.175);
z-index: 999999;
}
body.night-mode
.user-popover-content {
background: #212121;
border-color:
#000000;
}
.user-card {
position:
relative;
}
.user-card-cover {
width: 100%;
height:
120px;
background-color: #424242;
background-size:
cover;
background-position: center center;
border-bottom: 1px solid
#e6ecf5;
}
body.night-mode .user-card-cover {
border-color:
#000000;
}
.user-card-avatar {
position: absolute;
left:
15px;
bottom: -15px;
padding: 3px;
border-radius:
50%;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0,
.3);
}
body.night-mode .user-card-avatar {
background:
#212121;
}
.user-card-avatar img {
width: 60px;
height:
60px;
border-radius: 50%;
}
.user-card-info {
position:
absolute;
left: 96px;
bottom: 10px;
color:
#fff;
}
.user-card-info a {
color: #fff;
text-shadow: 0 0 3px
rgba(0, 0, 0, 0.9);
}
.user-card-info a:hover {
text-decoration:
underline;
}
.user-card-info a.name {
font-size:
1.3em;
font-weight: 600;
}
.user-card-info .info {
font-size:
12px;
line-height: 15px;
text-shadow: 0 0 3px rgba(0, 0, 0,
0.9);
}
.user-card-meta {
padding-left: 96px;
padding-top:
10px;
font-size: 12px;
}
.user-card-meta .fa {
color:
#b2b2b2;
}
.user-popover-content .footer {
text-align:
right;
padding: 6px 7px;
margin-bottom: 0;
margin-top:
0;
background: #f6f9fc;
border-top: 1px solid
#e5e5e5;
border-radius: 0 0 3px 3px;
}
body.night-mode
.user-popover-content .footer {
background: #1b1b1b;
border-color:
#424242;
}
.user-popover-content .footer .btn {
padding: 6px
12px;
}
/* -- */
}
/* -- */
/* PUBLISHER */
/*
------------------------------- */
.publisher-overlay {
background:
#000;
position: fixed;
top: 0;
left: 0;
right: 0;
opacity: 0;
transition: opacity .5s;
z-index:
1002;
}
body.publisher-focus .publisher-overlay {
bottom: 0;
opacity: .6;
transition: opacity .5s;
}
.publisher {
margin-bottom: 20px;
background: #fff;
border: 1px solid
#e6ecf5;
border-radius: 3px;
box-shadow: 0 1px 1px
rgba(0,0,0,.05);
}
body.night-mode .publisher {
background:
#212121;
border-color: #212121;
}
body.publisher-focus .publisher {
z-index: 1003;
}
.publisher.mini {
margin-bottom: 0;
border-radius: 0;
border: 0;
}
.publisher-loader {
display:
none;
position: absolute;
top: 5px;
right: 10px;
z-index: 1;
}
.publisher-close {
position: absolute;
top:
5px;
right: 10px;
z-index: 1;
}
.publisher-message {
position: relative;
padding: 15px 15px 20px
65px;
}
.publisher-avatar {
position: absolute;
left: 15px;
top: 15px;
width: 40px;
height: 40px;
padding: 2px;
border: 1px solid #efefef;
border-radius: 50%;
}
body.night-mode
.publisher-avatar {
border-color: #424242;
}
.publisher textarea
{
background: transparent;
direction: ltr;
resize: none;
outline: none;
width: 100%;
margin-top: 5px;
padding: 0;
font-size: 14px;
line-height: 20px;
height: 20px;
border:
0 none;
}
body.night-mode .publisher textarea {
color:
#eee;
}
.publisher-emojis {
display: none;
position:
absolute;
bottom: 5px;
right: 10px;
}
.publisher-emojis .far
{
cursor: pointer;
color: #999;
}
.publisher-scraper {
display: none;
position: relative;
padding:
10px;
}
.publisher-scraper-remover {
position: absolute;
top:
15px;
right: 20px;
background: #dedede;
border: 1px solid
#eaeaea;
padding: 0 4px;
border-radius: 50%;
z-index:
1;
}
.publisher-scraper-remover:hover {
background:
#fff;
}
.publisher-scraper-remover button.close {
opacity:
0.5
}
.publisher-attachments {
padding: 10px 10px 5px;
}
/*
publisher-meta */
.publisher-meta {
position: relative; /* for fa
icon */
border-top: 1px dashed #eee;
color: #cdcdcd;
margin:
0 15px;
padding: 5px 10px 5px 38px;
display:
none;
}
body.night-mode .publisher-meta {
border-color:
#424242;
}
.publisher-meta.top {
border-top: 0;
border-bottom:
1px dashed #eee;
}
.publisher-meta .fa {
position: absolute;
top: 10px;
left: 10px;
border-right: 1px solid #ccc;
padding-right: 20px;
}
.publisher-meta input,
.publisher-meta select
{
background: transparent;
width: 100%;
color: #4e5665;
font-size: 13px;
line-height: 20px;
outline: 0 none;
border:
0 none;
}
body.night-mode .publisher-meta input,
body.night-mode
.publisher-meta select {
color: #eee;
}
.publisher-meta select {
color: #cdcdcd;
}
.publisher-meta select:focus {
color:
#4e5665;
}
.publisher-meta input::-webkit-input-placeholder {
color:
#cdcdcd;
}
.publisher-meta input:-moz-placeholder {
color:
#cdcdcd;
opacity: 1;
}
.publisher-meta input:-ms-input-placeholder
{
color: #cdcdcd;
}
/* -- */
/* gif-search
*/
.dropdown-menu.gif-search {
display: none;
left: 0;
padding: 5px;
margin-top: 0;
border: 1px solid #efefef;
border-radius: 2px;
box-shadow: none;
}
body.night-mode
.dropdown-menu.gif-search {
border-color: #424242;
}
.gif-search
.item {
width: 33%;
float: left;
margin-right: 1px;
margin-bottom: 1px;
}
.gif-search .item > img {
width: 100%;
height: fit-content;
cursor: pointer;
}
/* -- */
/* feelings
*/
.publisher-meta.feelings {
padding: 0;
}
#feelings-menu-toggle
{
padding: 5px;
cursor: pointer;
}
#feelings-menu-toggle.active
{
display: table-cell;
white-space: nowrap;
padding: 5px;
background: #e2e8f6;
border-right: 1px dotted #dddfe2;
color:
#6f6f6f;
cursor: pointer;
}
body.night-mode
#feelings-menu-toggle.active {
background: transparent;
border-color: #424242;
}
#feelings-data {
display: table-cell;
width: 100%;
padding: 5px;
}
.feeling-item {
padding: 5px;
cursor: pointer;
color: #666;
}
body.night-mode .feeling-item {
color: #cacaca;
}
.feeling-item:hover {
background:
var(--header-bg-color);
color: #fff!important;
}
.feeling-item .icon
{
display: table-cell;
vertical-align: top;
padding-right:
5px;
}
.feeling-item .data {
display: table-cell;
vertical-align: middle;
width: 100%;
font-size: 1.2em;
font-weight: 600;
}
/* -- */
.publisher-slider {
display:
none;
}
.publisher-tools-tabs {
margin: 0 15px;
padding-top:
15px;
border-top: 1px solid #e6ecf5;
border-bottom: 1px solid
#e6ecf5;
}
body.night-mode .publisher-tools-tabs {
border-color:
#424242;
}
.publisher-tools-tab {
display: block;
background:
#f7f7f7;
padding: 7px 14px;
color: #7f838a;
font-size:
13px;
font-weight: 700;
border-radius: 25px;
margin-bottom:
15px;
}
body.night-mode .publisher-tools-tab {
background:
#424242;
color: #d5d5d5;
}
.publisher-tools-tab:hover {
background: #f3f3f3;
color: #7f838a;
cursor:
pointer;
}
body.night-mode .publisher-tools-tab:hover {
background:
#525252;
color:
#d5d5d5;
}
.publisher-tools-tab.active,
body.night-mode
.publisher-tools-tab.active {
color:
#5e72e4;
}
.publisher-tools-tab.activated {
background:
#d2e0ff;
}
body.night-mode .publisher-tools-tab.activated {
background:
#111111;
}
.publisher-tools-tab[data-tab='video'].activated:after,
.publisher-tools-tab[data-tab='audio'].activated:after,
.publisher-tools-tab[data-tab='file'].activated:after {
content:
"";
background: transparent;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor:
initial;
}
.publisher-tools-tab.disabled {
position:
relative;
}
.publisher-tools-tab.disabled:hover {
background:
#f7f7f7;
color: #7f838a;
cursor: initial;
}
body.night-mode
.publisher-tools-tab.disabled:hover {
background: #424242;
color:
#d5d5d5;
}
.publisher-tools-tab.disabled:after {
content:
"";
background: #fff;
position: absolute;
top:
0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.6;
border-radius: 25px;
}
body.night-mode
.publisher-tools-tab.disabled:after {
background:
#000;
}
.publisher-tools-tab.attach {
position: relative; /* for
input file */
overflow: hidden;
}
.publisher-tools-tab.attach form
{
display: initial;
}
.publisher-footer {
text-align:
right;
padding: 15px;
}
/* posts-filter */
.posts-filter {
margin-bottom: 20px;
padding-bottom: 5px;
border-bottom: 1px
solid #e6ecf5;
line-height: 34px;
font-weight:
600;
}
body.night-mode .posts-filter {
border-bottom-color:
#212121;
}
.posts-filter .btn-group .btn,
.posts-filter .btn-group
.open .btn.dropdown-toggle,
.posts-filter .btn-group .btn-default.active,
.posts-filter .btn-group .btn-default:active,
.posts-filter .btn-group
.open .btn-default.dropdown-toggle {
background:
transparent!important;
box-shadow: none!important;
border: 0
none!important;
padding-left: 0!important;
padding-right:
0!important;
color: #999!important;
}
.posts-filter .dropdown-menu
{
min-width: 100%;
}
.posts-filter .dropdown-menu .dropdown-item {
padding: 2px 16px;
}
/* -- */
/* POST */
/*
------------------------------- */
.post {
position:
relative;
margin-bottom: 20px;
background: #fff;
border: 1px solid
#e6ecf5;
border-radius: 3px;
box-shadow: 0 1px 1px
rgba(0,0,0,.05);
}
body.night-mode .post {
background: #212121;
border-color: #000000;
}
.post.flagged {
padding: 15px;
background:
#f6f7f8;
}
.post .pin-icon {
position: absolute;
right: 18px;
top: -10px;
width: auto;
font-size: 25px;
color:
#f9b340;
}
.post.boosted,
body.night-mode .post.boosted {
border:
2px solid #ffa412;
}
.post .boosted-icon {
position: absolute;
left: -15px;
top: -15px;
width: auto;
padding: 3px 6px;
font-size: 16px;
background: #ffa412;
color: #ffffff;
border-radius: 50%;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform:
rotate(-20deg); /* Standard syntax */
}
.post.highlighted {
border: 1px
solid #4083a9;
box-shadow: inset 0 0 0 1px #4083a9;
}
.post
a:not(.dropdown-item):hover {
text-decoration:
underline;
}
.post-body {
padding: 20px 20px 10px;
}
.post-header
{
margin-bottom: 10px;
}
.post-avatar {
display:
table-cell;
vertical-align: top;
padding-right:
10px;
}
.post-avatar-picture {
background-size:
cover;
background-repeat: no-repeat;
background-position:
center;
background-color: #eee;
width: 100%;
height:
100%;
padding-top: 100%;
overflow: hidden;
min-width:
40px;
min-height: 40px;
display: block;
border-radius:
50%;
}
.post-avatar-picture.small {
min-width: 25px;
min-height:
25px;
}
.post-avatar-picture.rounded {
border-radius:
50%;
}
.post-meta {
display: table-cell;
vertical-align:
top;
width: 100%;
word-break: break-word;
word-wrap:
break-word;
}
.post-meta .dropdown .dropdown-toggle {
color:
#d3d3d3;
padding: 5px;
border-radius: 50%;
}
.post-meta .dropdown
.dropdown-toggle:hover {
background: #e9eaee;
color: #b3b3b3;
cursor: pointer;
}
body.night-mode .post-meta .dropdown
.dropdown-toggle:hover {
background: #333;
}
.post-meta
.dropdown-toggle:after {
display: none!important;
}
.post-author
{
font-size: 14px;
line-height: 20px;
font-weight:
bold;
}
.post-time {
color: #999;
font-size: 11px;
line-height:
16px;
}
.post-time a {
color: #999;
}
.post-time .fa:hover
{
cursor: pointer;
}
.post-time .btn-group {
}
.post-time
.btn-group,
.post-time .btn-group .btn {
background:
transparent!important;
box-shadow: none!important;
border: 0
none!important;
padding: 2px 4px!important;
color:
#999!important;
}
.post-time .btn-group .btn:hover {
background:
#f3f3f3!important;
}
.post-text, .post-text-translated {
text-align:
initial;
word-break: initial;
word-wrap: break-word;
overflow:
hidden;
margin-bottom: 5px;
-webkit-transition: height
.2s;
transition: height .2s;
}
.post-text-translation
{
border-left: 2px solid #e9eaee;
padding-left: 10px;
margin-top: 10px;
}
.post-text .twa {
height:
1.6em!important;
width: 1.6em!important;
margin: 0 0.0665em 0
0.15em!important;
vertical-align: -0.15em!important;
background-size:
1.6em 1.6em!important;
}
.post-stats {
margin-top: 15px;
font-size: 11px;
color: #999;
}
.post-actions {
margin-top:
10px;
padding-top: 5px;
border-top: 1px solid
#f4f4f4;
}
body.night-mode .post-actions {
border-color:
#424242;
}
.post-actions .action-btn {
float: left;
width:
33.3%;
padding: 10px;
color: #7f838a;
font-size: 13px;
font-weight: 700;
line-height: 14px;
text-align: center;
border-radius: 2px;
transition: all .1s ease-in-out;
}
.post-actions
.action-btn:hover {
background: #f7f7f7;
cursor:
pointer;
}
body.night-mode .post-actions .action-btn:hover {
background: #333;
}
.post-footer {
background: #f9f9f9;
border-top:
1px solid #eee;
border-radius: 0 0 3px 3px;
padding: 0
15px;
}
.night-mode .post-footer {
background:
#212121;
border-top-color: #363636;
}
.post-social-share {
padding-bottom: 15px;
margin-bottom: 20px;
text-align: center;
border-bottom: 1px solid #f4f4f4;
}
body.night-mode .post-social-share
{
border-color: #424242;
}
.post-comments {
padding-top:
10px;
}
/* post images */
.pg_wrapper a {
display:
block;
position: relative;
width: 100%;
height:
100%;
background-size: cover;
background-position: center
center;
background-color: #f5f5f5;
}
body.night-mode .pg_wrapper a {
background-color: #414141;
}
.pg_wrapper .more {
position:
absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background:
rgba(0, 0, 0, 0.3);
color: #fff;
font-size: 2em;
font-weight:
600;
line-height: 100%;
text-align: center;
padding-top:
40%;
}
.pg_1x {
text-align: center;
}
.pg_1x img {
max-width:
100%;
}
.pg_2x {
width: 50%;
float: left;
padding-right:
1px;
}
.pg_2x > a {
padding-bottom: 100%;
}
.pg_2o3, .pg_1o3
{
float: left;
margin-right: 1px;
}
.pg_1o3 {
margin-right:
-1px;
}
.pg_2o3 .pg_2o3_in {
margin-bottom: 1px;
}
.pg_2o3
.pg_2o3_in:last-child {
margin-bottom: 0;
}
.pg_1o3 .pg_1o3_in
{
margin-bottom: 1px;
}
.pg_1o3 .pg_1o3_in:last-child
{
margin-bottom: 0;
}
/* -- */
/* post media */
.post-media
{
border: 1px solid #eee;
box-shadow: 0 1px 1px
rgba(0,0,0,.05);
}
body.night-mode .post-media {
background:
#121212;
border-color: #424242;
}
.post-media.list {
background:
#fff;
box-shadow: none;
margin-bottom: 15px;
border:
0;
}
body.night-mode .post-media.list {
background:
#212121;
}
.post-media img.img-fluid {
width: 100%;
max-height:
350px;
}
.post-media-image-wrapper {
position:
relative;
}
.post-media-image-meta {
position: absolute;
bottom:
15px;
left: 15px;
}
.post-media-image {
overflow:
hidden;
}
.post-media-image div {
background-size:
cover;
background-repeat: no-repeat;
background-position: center
center;
background-color: #eee;
width: 100%;
height:
100%;
padding-top: 100%;
overflow: hidden;
min-width:
100px;
min-height: 100px;
}
.embed-ifram-wrapper * {
width:
100%!important;
}
.post-media-meta {
padding: 15px;
width:
100%;
-webkit-transition: all .2s;
transition: all
.2s;
}
.post-media-meta .title{
display: block;
font-size:
16px;
font-weight: 600;
line-height: 22px;
}
.post-media-meta
.title:hover{
text-decoration: none;
}
.post-media-meta .text
{
max-height: 90px;
overflow: hidden;
}
.post-media-meta .source
{
color: #999;
font-size: 11px;
text-transform:
uppercase;
}
.post-media-meta .info {
color: #999;
font-size:
11px;
}
/* -- */
/* post-downloader */
.post-downloader {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding-top: 10px;
padding-bottom: 10px;
margin-top:
10px;
}
body.night-mode .post-downloader {
border-color:
#323232;
}
.post-downloader .icon {
display: table-cell;
vertical-align: middle;
background-color: #f9f9f9;
padding: 10px
20px;
border-radius: 2px;
}
.post-downloader .info {
display:
table-cell;
vertical-align: top;
padding-left: 10px;
width:
100%;
}
/* -- */
/* post product */
.post-product-wrapper
{
padding: 10px 5px;
border: 1px solid #e5e5e5;
font-size:
14px;
border-radius: 2px;
}
body.night-mode .post-product-wrapper
{
border-color: #424242;
}
.post-product-details {
display:
inline-block;
width: 32%;
border-right: 1px solid #e5e5e5;
text-align: center;
vertical-align: middle;
}
body.night-mode
.post-product-details {
border-color:
#424242;
}
.post-product-details:last-child {
border-right:
0;
}
.post-product-details .title {
font-weight: 600;
margin-bottom:
3px;
}
.post-product-details .description {
color: #555;
}
/* --
*/
/* post-dropdown-menu */
.post-dropdown-menu {
width:
240px;
}
.post-dropdown-menu .fa {
margin-right: 10px;
color:
#8b8b8b;
}
.post-dropdown-menu .action {
font-size:
14px;
line-height: 18px;
font-weight: 600;
}
.post-dropdown-menu
.action.no-icon {
padding-left: 22px;
font-weight:
normal;
}
.post-dropdown-menu .action.no-desc {
font-weight:
normal;
}
.post-dropdown-menu .action-desc {
padding-left:
30px;
color: #999;
font-size: 11px;
line-height: 16px;
}
/* --
*/
/* post-map*/
.post-map img {
border: 1px solid #ededed;
border-radius: 3px;
padding: 2px;
margin-top:
5px;
}
body.night-mode .post-map img {
border-color: #424242;
}
/*
-- */
/* polls */
.poll-option {
display: table-cell;
vertical-align: top;
position: relative;
width: 100%;
padding: 6px 8px;
height: 35px;
background-color: #fff;
border: 1px solid #dddfe2;
border-radius: 4px;
}
body.night-mode
.poll-option {
background-color: #323232;
border-color:
#424242;
}
.poll-option:hover {
border: 1px solid #ced0d4;
cursor:
pointer;
}
.poll-option .percentage-bg {
position: absolute;
top:
0;
left: 0;
height: 100%;
background-color:
#ecf0f7;
}
body.night-mode .poll-option .percentage-bg {
background-color: #121212;
}
.poll-voters {
display:
table-cell;
vertical-align: top;
padding-left: 5px;
}
.poll-voters
.more {
width: 35px;
height: 35px;
background-color: #ecf0f7;
padding: 8px 0;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
text-align: center;
cursor: pointer;
}
body.night-mode .poll-voters .more {
background-color: #323232;
border-color: #424242;
}
/* -- */
/*
youtube-player */
.youtube-player {
position: relative;
padding-top: 56%;
height: 0;
overflow: hidden;
max-width:
100%;
background: #000;
}
.youtube-player iframe {
position:
absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
}
.youtube-player img {
position:
absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
margin: auto;
max-width: 100%;
width:
100%;
height: auto;
cursor: pointer;
-webkit-transition: .4s
all;
-moz-transition: .4s all;
transition: .4s
all;
}
.youtube-player img:hover {
-webkit-filter:
brightness(75%);
}
.youtube-player .play {
width: 72px;
height:
72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background:
url('../images/youtube.png') no-repeat;
cursor: pointer;
}
/* --
*/
/* video player */
.js_mediaelementplayer,
.js_mediaelementplayer
.mejs__overlay-play {
width: 100%!important;
}
/* -- */
/*
COMMENT */
/* ------------------------------- */
.comment
{
font-size: 12px;
line-height: 16px;
padding-bottom:
10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s
ease;
-o-transition: all 0.5s ease;
transition: all 0.5s
ease;
}
.comment.reply {
padding-left: 10px;
padding-bottom: 0;
margin-bottom: 10px;
border-left: 2px solid #eee;
}
body.night-mode
.comment.reply {
border-color: #424242;
}
.comment-avatar
{
display: table-cell;
vertical-align: top;
padding-right:
10px;
}
.comment-avatar-picture {
background-size:
cover;
background-repeat: no-repeat;
background-position:
center;
background-color: #eee;
width: 100%;
height:
100%;
padding-top: 100%;
overflow: hidden;
min-width:
36px;
min-height: 36px;
display: block;
border-radius:
50%;
}
.comment-data, .comment-edit {
display:
table-cell;
vertical-align: top;
width: 100%;
}
.comment-data
.img-fluid {
max-width: 30%;
max-height: 100px;
margin: 5px
0;
}
.comment-text {
text-align: initial;
word-break:
break-word;
word-wrap: break-word;
overflow: hidden;
margin-bottom:
5px;
}
.comment-actions > li {
float: left;
margin-right:
8px;
}
.comment-replies {
padding-top: 10px;
}
.comment-replies
> ul {
width: 100%;
}
/* comment-form */
.comment-form textarea
{
background: #fff;
direction: ltr;
display: block;
border:
0;
resize: none;
outline: none;
width: 100%;
padding: 8px
16px;
padding-right: 94px;
margin: 0;
font-size: 13px;
line-height:
18px;
height: 36px;
border: 1px solid #ededed;
border-radius:
18px
}
body.night-mode .comment-form textarea {
color: #eee;
background: #121212;
border-color: #424242;
}
@media (min-width:
992px) {
.comment-form textarea {
padding-right:
70px;
}
}
.comment-form .x-form-tools {
bottom: 4px;
right:
14px;
}
/* -- */
.comment-attachments {
background: #fff;
padding: 10px 14px 4px 14px;
margin-top: 4px;
border: 1px solid
#eee;
border-radius: 18px;
}
body.night-mode .comment-attachments
{
background: transparent;
border-color: #424242;
}
.comment
.comment-btn {
display: none;
}
.comment:hover .comment-btn
{
display: block;
}
.comment-btn button.close {
font-size:
1.4em;
}
.comment .dropdown-toggle {
color: #d3d3d3;
}
.comment
.dropdown-toggle:hover {
color: #b3b3b3;
cursor: pointer;
}
/*
BLOG */
/* ------------------------------- */
/* blog-container
*/
.blog-container {
background: #ffffff;
border-radius: 4px;
overflow: hidden;
margin-bottom: 20px;
display: block;
color: inherit;
text-decoration: none;
position:
relative;
}
.night-mode .blog-container {
background:
#212121;
}
@media (min-width: 768px) {
.blog-container {
height: 400px;
}
.blog-container.primary {
background:
var(--header-bg-color);
}
}
.blog-image {
min-height:
150px;
}
@media (min-width: 576px) {
.blog-image {
overflow: hidden;
height: 150px;
}
}
.blog-image img
{
height: 100%;
width: 100%;
object-fit: cover;
}
@media
(min-width: 768px) {
.blog-container.primary .blog-image {
display: inline-block;
width: 50%;
height: 100%;
max-height: 100%;
}
.blog-container.primary .blog-image img {
width: auto;
max-width: inherit;
}
}
.blog-content
{
padding: 10px;
}
@media (min-width: 768px) {
.blog-container.primary .blog-content {
display: inline-block;
vertical-align: top;
width: 49%;
color: #ffffff;
}
}
.blog-content h3 {
margin: 0;
font-weight: 900;
font-size: 20px;
text-transform: uppercase;
}
@media (min-width:
576px) {
.blog-container .blog-content h3 {
overflow:
hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 24px;
max-height: 72px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
}
@media (min-width: 768px) {
.blog-container.primary
.blog-content h3 {
font-size: 26px;
line-height: 30px;
max-height: 180px;
-webkit-line-clamp: 6;
}
}
.blog-content .text {
margin: 12px 0;
font-size: 13px;
}
@media
(min-width: 576px) {
.blog-container .blog-content .text {
overflow: hidden;
text-overflow: ellipsis;
display:
-webkit-box;
line-height: 18px;
max-height: 108px;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
}
}
@media (min-width: 768px) {
.blog-container.primary
.blog-content .text {
margin: 13px 0;
font-size: 16px;
font-weight: 300;
line-height: 20px;
max-height:
140px;
-webkit-line-clamp: 7;
}
}
@media (min-width: 768px)
{
.blog-container.primary .text-link {
color: #eee;
}
}
.blog-content .post-avatar {
padding-right: 5px;
padding-top:
3px;
}
.blog-more {
width: 0%;
height: 100%;
color: #aaa;
background-color: var(--header-bg-color);
position: absolute;
top: 0;
opacity: 0.0;
text-align: center;
-webkit-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s
ease-out 0s;
transition: all 0.4s ease-out 0s;
}
.blog-more span
{
position: absolute;
top: calc(50% - 22px);
left: calc(50% -
45px);
border: 1px solid #fff;
display: inline-block;
padding: 10px 30px;
border-radius: 3px;
color: #fff;
font-size: 16px;
}
.blog-container:hover .blog-more {
width: 100%;
opacity: 0.95;
}
/* -- */
/* article */
.article-wrapper
{
background: #fff;
padding: 25px;
border-radius: 3px 3px 0
0;
}
.night-mode .article-wrapper {
background:
#212121;
}
.article-wrapper h3 {
margin-top: 0;
margin-bottom:
20px;
}
.article-meta-counter {
display: inline-block;
padding:
4px 12px;
margin-bottom: 5px;
font-size: 14px;
line-height:
24px;
color: #999;
background: #f5f5f5;
border-radius:
2px;
}
.article-meta-counter:hover {
color: #999;
background:
#e1e1e1;
cursor: pointer;
}
.article-text {
font-size:
1.2em;
line-height: 1.6em;
word-wrap: break-word;
}
.article-text img
{
width: 100%!important;
height: auto!important;
}
.article-text
iframe {
width: 100%!important;
}
.article-tags {
margin-top:
20px
}
.article-tags ul > li {
display: inline-block;
margin-right: 4px;
margin-top: 4px;
}
.article-tags ul > li >
a {
border-radius: 2px;
background: #f5f5f5;
padding: 0
12px;
line-height: 24px;
color: #999;
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
display: inline-block;
}
.article-tags ul
> li > a:hover {
background: var(--header-bg-color);
color:
#fff;
}
/* -- */
/* articles-widget */
.articles-widget-header
{
margin-bottom: 20px;
border-bottom: 1px solid
#e1e1e1;
}
.night-mode .articles-widget-header {
border-color:
#212121;
}
.articles-widget-title {
display: inline-block;
margin:
0;
margin-bottom: -1px;
text-transform: uppercase;
white-space: nowrap;
font-weight: 300;
font-size: 18px;
line-height: 40px;
color: #999;
border-bottom: 1px solid
#aaa;
}
/* -- */
/* .article-categories */
.article-categories
{
margin-bottom: 15px;
}
.article-categories li {
float:
left;
margin-right: 5px;
margin-bottom: 5px;
}
.article-category {
border-radius: 12px;
background: #777;
padding: 0 12px;
line-height: 24px;
color: #fff;
font-weight: 600;
font-size:
13px;
text-transform: uppercase;
text-align: center;
white-space: nowrap;
display:
inline-block;
}
.article-category.small {
font-size:
9px;
}
.article-category:hover {
background:
var(--header-bg-color);
color: #fff;
}
/* -- */
/* FORUM
*/
/* ------------------------------- */
/* forum-breadcrumb
*/
.forum-breadcrumb {
padding: 16px 20px;
margin-top:
20px;
margin-bottom: 0;
word-wrap: break-word;
word-break:
break-all;
}
/* -- */
/* forum-title */
.forum-title {
margin-top:
20px;
margin-bottom: 20px;
word-wrap: break-word;
}
.forum-title h1
{
font-size: 18px;
margin-top: 0;
margin-bottom:
5px;
}
.forum-title p {
margin-bottom: 0;
}
/* -- */
/*
forum-category */
.forum-category {
padding: 15px 20px;
margin-top:
20px;
background-color: var(--header-bg-color);
color:
#fff;
font-weight: 600;
font-size: 13px;
border-radius: 2px 2px 0
0;
}
.forum-category a {
color: #fff
}
.forum-category a:hover
{
text-decoration: underline;
}
/* -- */
/* forum-head
*/
.forum-head {
margin-right: 0;
margin-left: 0;
}
.forum-head >
.column {
padding: 20px;
background-color: #16232d;
color:
#fff;
font-weight: 300;
font-size: 12px;
text-align:
center;
border-right: 1px solid #192534;
border-left: 1px solid
#161e27;
}
body.night-mode .forum-head > .column {
background:
#000;
border-right-color: #151515;
border-left-color:
#121212;
}
.forum-head.threads > .column {
background-color:
#576c7c;
border-right: 1px solid #374855;
border-left: 1px solid
#6d8292;
}
body.night-mode .forum-head.threads > .column {
background: #121212;
}
.forum-head > .column:first-child
{
text-align: left;
border-left: none;
}
.forum-head >
.column:last-child {
border-right: none;
}
/* -- */
/* forum-row
*/
.forum-row {
display: flex;
display: -webkit-box;
display:
-webkit-flex;
display: -ms-flexbox;
flex-wrap: wrap;
margin-right:
0;
margin-left: 0;
}
.forum-row > .column {
display:
flex;
display: -webkit-box;
display: -webkit-flex;
display:
-ms-flexbox;
flex-direction: column;
padding: 20px;
background-color:
#ffffff;
border-bottom: 1px solid #e6e6e6;
color: #808080;
font-size:
12px;
word-wrap: break-word;
}
body.night-mode .forum-row > .column
{
background: #212121;
border-color: #323232;
}
.forum-row >
.column.icon {
color: #999999;
text-align: center;
}
.forum-row
.sub-forums li {
float: left;
margin-right: 10px;
}
/* -- */
/*
forum-meta */
.forum-meta-head {
padding: 15px 20px 15px
20px;
background-color: #16232d;
color: #fff;
font-size:
12px;
font-weight: 300;
}
body.night-mode .forum-meta-head {
background: #000;
}
.forum-meta-conent {
padding: 15px 20px 15px
20px;
background-color: #fff;
color: #808080;
font-size:
12px;
}
body.night-mode .forum-meta-conent {
background-color:
#212121;
}
/* -- */
/* forum-thread */
.forum-thread {
padding:
20px 10px;
margin-top: 10px;
background: #fff;
border: 1px
solid #ddd;
border-radius: 3px;
box-shadow: 0 1px 1px
rgba(0,0,0,.05);
}
body.night-mode .forum-thread {
background:
#212121;
border-color: #323232;
}
.forum-thread .row
{
margin-left: 0;
margin-right: 0;
}
.forum-thread .avatar {
width:
80px;
height: 80px;
border-radius: 50%;
}
.forum-thread .time
{
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: 1px solid
#f4f4f4;
}
body.night-mode .forum-thread .time {
border-color:
#323232;
}
.forum-thread .text {
word-wrap:
break-word;
}
.forum-thread .text img,
.forum-thread .text iframe {
max-width: 100%;
}
.forum-thread ul {
margin: initial;
padding-inline-start: 40px;
list-style: initial;
}
/* -- */
/*
forum-result */
.forum-result {
margin-top: 20px;
}
.forum-result
.head {
padding: 10px 20px;
background-color: #576c7c;
color:
#fff;
font-weight: 300;
font-size: 12px;
}
body.night-mode
.forum-result .head {
background-color: #000;
}
.forum-result .head
a {
color: #fff
}
.forum-result .head a:hover {
text-decoration:
underline;
}
.forum-result .content {
padding: 10px 20px;
background-color: #f5f5f5;
color: #808080;
font-size:
12px;
}
body.night-mode .forum-result .content {
background-color:
#212121;
}
.forum-result .title {
font-size: 14px;
}
.forum-result
.snippet {
background: #fff;
border: solid 1px #e6e6e6;
padding: 8px 10px;
word-wrap: break-word;
}
body.night-mode
.forum-result .snippet {
background: #121212;
border-color:
#323232;
}
/* -- */
/* AUTO-COMPLETE */
/*
------------------------------- */
.dropdown-menu.auto-complete
{
display: none;
left: 0;
margin-top: 0;
border-radius:
0;
box-shadow: none;
}
.typeahead {
position: relative; /* for
dropdown-menu */
float: left;
}
.typeahead input {
background:
transparent;
width: 100%;
color: #4e5665;
font-size:
13px;
line-height: 20px;
outline: 0 none;
border: 0
none;
}
body.night-mode .typeahead input {
color: #fff;
}
.tags li
{
float: left;
padding: 2px 4px;
margin: 0 3px 3px 0;
background:
#EEF2F5;
color: #245774;
font-size: 11px;
line-height:
16px;
border-radius: 3px;
}
.tags button {
filter:
alpha(opacity=50);
opacity: 0.5;
font-size: 16px;
margin-left:
4px;
}
.tags button:hover {
filter: alpha(opacity=80);
opacity:
0.8;
}
/* Google Geo-Autocomplete */
.pac-container {
z-index:
999999;
}
/* -- */
/* LIGHTBOX */
/*
------------------------------- */
.lightbox-open {
overflow: hidden;
/* hide the page scroll */
padding-right: 17px
!important;
}
.lightbox-open .main-header {
padding-right: 17px
!important;
}
.lightbox {
position: fixed;
top: 0;
right:
0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background:
rgba(0, 0, 0, 0.9);
z-index: 99999;
overflow-y:
scroll;
}
.lightbox-container {
display: table;
width:
100%;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.6);
padding-right:
0;
padding-left: 0;
}
.lightbox-preview {
position:
relative;
display: block;
width: 100%;
vertical-align:
middle;
background: #000;
text-align:
center;
}
.lightbox-preview.nodata {
width: 100%;
}
.lightbox-next,
.lightbox-prev {
position: absolute;
top: 50%;
right:
2%;
opacity: 0.5;
}
.lightbox-prev {
left: 2%;
right:
auto;
}
.lightbox-next:hover,
.lightbox-prev:hover {
opacity:
1;
cursor: pointer;
}
.lightbox-next .fa,
.lightbox-prev .fa
{
color: #fff;
text-shadow: 0 2px 2px
rgba(0,0,0,.5);
}
.lightbox-preview img {
margin: 0
auto;
max-width: 100%;
max-height: -moz-calc(100vh - 92px); /* 92px =
46*2 (header) */
max-height: -webkit-calc(100vh - 92px);
max-height:
-o-calc(100vh - 92px);
max-height: calc(100vh -
92px);
}
.lightbox-data {
display: block;
width:
100%;
vertical-align: top;
background: #fff;
}
body.night-mode
.lightbox-data {
background: #212121;
}
.lightbox-data
.lightbox-close {
padding: 4px 8px;
border-radius:
4px;
}
.lightbox-data .lightbox-close:hover {
background: #e9eaee;
color: #666;
cursor: pointer;
}
.lightbox-post {
padding: 0
8px;
height: -moz-calc(100vh - 113px); /* 113px = 46*2 (header) + 21px
(close btn) */
height: -webkit-calc(100vh - 113px);
height:
-o-calc(100vh - 113px);
height: calc(100vh - 113px);
}
@media
(min-width: 768px) {
.lightbox {
overflow-y:
none;
}
.lightbox-container {
margin-top: 46px;
width:
inherit;
}
.lightbox-preview {
display: table-cell;
width:
70%;
max-width: 800px;
}
.lightbox-data {
display:
table-cell;
width: 30%;
}
}
/* -- */
/* STORIES */
/*
------------------------------- */
.stories-wrapper {
overflow:
auto;
padding-bottom: 0;
margin-bottom:
5px;
}
.stories.carousel {
overflow:
unset!important;
}
.add-story {
position: relative;
display:
inline-block;
width: 12vw;
max-width: 60px;
height: 12vw;
max-height: 60px;
margin-bottom: 22px;
cursor:
pointer;
}
.add-story .img {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position:
center;
border-radius: 50%;
}
.add-story .add {
position:
absolute;
right: 0;
bottom: 0;
padding: 1px 3px 0px 3px;
border-radius: 50%;
background: #fff;
font-size: 14px;
color: #2795e9;
}
body.night-mode .add-story .add {
background:
#212121;
}
.stories.sngine .story > a
{
text-decoration:none;
}
.stories.sngine .story > a > .img
{
border-radius:50%;
padding:2px;
background: #d6249f;
background:
radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949
45%,#d6249f 60%,#285AEB 90%);
}
.stories.sngine .story > a > .img
> * {
border-radius: 50%;
border:3px solid
#fff;
}
.stories.sngine .story.seen{
opacity:.5;
}
.stories.sngine
.story.seen > a > .img {
background:#999;
}
/* -- */
/*
CHAT */
/* ------------------------------- */
/* chat-sidebar
*/
.chat-sidebar {
background: #f6f6f6;
display: none;
position:
fixed;
right: 0;
top: 50px;
bottom: 0;
width: 210px;
box-shadow:
0 0 4px rgba(0,0,0,.1);
}
body.night-mode .chat-sidebar {
background: #212121;
box-shadow: -6px 0 20px rgba(0, 0, 0,
0.04);
}
@media (min-width: 1200px) {
.chat-sidebar {
display:
block;
}
}
/* chat-sidebar-header */
.chat-sidebar-header
{
position: absolute;
top: 0;
width: 100%;
padding:
10px;
line-height: 20px;
}
.chat-sidebar-header .fa {
color:
#c2c2c2;
}
.chat-sidebar-header .fa:hover {
color: #999;
cursor:
pointer;
}
/* -- */
/* chat-sidebar-content */
.chat-sidebar-content
{
position: absolute;
top: 40px;
bottom: 34px;
width:
100%;
border-top: 1px solid #ededed;
}
body.night-mode
.chat-sidebar-content {
border-color:
#363636;
}
.chat-sidebar-content .online,
.chat-sidebar-content .offline
{
font-size: 9px;
margin-right: 3px;
}
.chat-sidebar .online
{
color: #65a830;
}
.chat-sidebar.disabled .chat-sidebar-content
{
opacity: 0.3;
}
.chat-sidebar.disabled .chat-sidebar-content
.online,
.chat-sidebar.disabled .chat-sidebar-content .offline
{
display: none;
}
/* -- */
/* chat-sidebar-footer
*/
.chat-sidebar-footer {
position: absolute;
bottom: 0;
width:
100%;
padding: 5px 10px;
}
.chat-sidebar-footer .form-control
{
border: 0;
box-shadow: none;
background:
#ebebeb;
}
body.night-mode .chat-sidebar-footer .form-control {
background: #010101;
}
/* -- */
/* chat-widget */
.chat-widget
{
display: none;
position: fixed;
bottom: 0;
right: 10px;
width:
260px;
z-index: 1000;
box-shadow: 0 0 4px rgba(0,0,0,.1);
}
@media
(min-width: 992px) {
.chat-widget {
display: block;
}
}
/* --
*/
/* chat-head-title */
.chat-widget-head {
background:
var(--header-bg-color);
position: relative; /* for close button
*/
color: #fff;
width: 100%;
font-size: 12px;
padding:
10px 8px;
border-radius: 2px 2px 0 0;
cursor:
pointer;
}
.chat-widget-head .fa-circle {
color:
#65a830;
font-size: 9px;
}
.chat-widget-head a {
color:
#fff;
}
.chat-widget-head a:hover {
text-decoration:
underline;
}
.chat-head-label {
display: none;
position:
absolute;
top: -15px;
right: 5px;
}
.chat-widget.chat-box.new
.chat-head-label {
display: block;
}
/* -- */
/* chat-widget-content
*/
.chat-widget-content {
position: relative; /* for chat-to
*/
display: none;
background: var(--body-bg-color);
padding:
0;
}
body.night-mode .chat-widget-content {
background:
#212121;
border-left: 1px solid #000000;
border-right: 1px solid
#000000;
}
/* -- */
/* chat-to */
.chat-to {
position:
absolute;
top: 0;
left: 0;
right: 0;
background:
#fff;
border-bottom: 1px solid #e6ecf5;
color: #cdcdcd;
padding: 5px
10px 5px 38px;
}
body.night-mode .chat-to {
background:
#212121;
border-color: #121212;
}
.chat-to .to {
position:
absolute;
top: 5px;
left: 10px;
}
.panel-messages .chat-to
{
padding-top: 10px;
padding-bottom: 10px;
}
.panel-messages .chat-to
.to {
top: 10px;
}
/* -- */
/* chat-conversations
*/
.chat-conversations {
padding: 0 7px;
}
/* -- */
/*
chat-attachments */
.chat-attachments {
background: #fff;
padding:
10px;
border-top: 1px solid #dfe8f5;
}
body.night-mode
.chat-attachments {
background: #212121;
border-color:
#121212;
}
/* -- */
/* chat-form */
.chat-form {
background:
#fff;
}
body.night-mode .chat-form {
background:
#212121;
}
.chat-form-message {
background: transparent;
padding:
7px;
overflow-y: auto;
overflow-x: hidden;
max-height: 69px; /*
14px*4 (lines) + 14px (padding) + 1px (top-border) */
border-top: 1px
solid #dfe8f5;
}
body.night-mode .chat-form-message {
border-color:
#121212;
}
.chat-form-message textarea,
.chat-form-message
input[type="text"] {
background: transparent;
direction:
ltr;
display: block;
border: 0 none;
resize: none;
outline:
none;
box-shadow: none;
width: 100%;
padding: 0;
margin:
0;
font-size: 13px;
line-height: 18px;
height: 18px;
overflow:
hidden;
}
body.night-mode .chat-form-message textarea,
body.night-mode
.chat-form-message input[type="text"] {
color:
#fff;
}
.chat-form .x-form-tools {
position: static;
padding: 0 7px
7px 7px;
}
.chat-form ul.x-form-tools > li.x-form-tools-colors
{
color: #597ba5;
}
.chat-form .emoji-menu {
bottom: 40px;
right: 100%;
left: 2px;
}
.chat-form .emoji-menu:before {
right:
auto;
left: 38px;
}
.chat-form .emoji-menu:after{
right:
auto;
left: 39px;
}
/* -- */
/* chat-colors-menu
*/
.chat-colors-menu {
display: none;
position: absolute;
bottom:
40px;
left: 28px;
width: 189px;
margin: 0;
padding:
6px;
font-size: 13px;
line-height: 100%;
background-color:
#fff;
border: 1px solid #d4d5d6;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
z-index:
99999;
}
.chat-colors-menu:before {
position: absolute;
top:
100%;
left: 42px;
content: "";
border-color: #d4d5d6
transparent transparent transparent;
border-style: solid;
border-width:
8px;
}
.chat-colors-menu:after {
position: absolute;
top:
100%;
left: 43px;
content: "";
border-color: #fff
transparent transparent transparent;
border-style: solid;
border-width:
7px;
}
.chat-colors-menu .item {
float: left;
padding: 4px;
margin-right: 1px;
margin-bottom: 1px;
}
.chat-colors-menu
.item:hover {
cursor: pointer;
background: #f3f3f3;
border-radius:
4px;
}
/* -- */
/* conversation */
.conversation {
padding-top:
10px;
margin-bottom: 20px;
}
.conversation-user {
width:
30px;
height: 30px;
float: left;
border-radius: 50%;
overflow:
hidden;
margin-right: 10px;
}
.conversation-user img {
width:
30px;
height: 30px;
}
.conversation-body {
position: relative; /*
for arrow */
float: left;
max-width: -moz-calc(100% - 40px); /* 40px =
(30px+10px) (avatar + margin) */
max-width: -webkit-calc(100% -
40px);
max-width: -o-calc(100% - 40px);
max-width: calc(100% -
40px);
}
.conversation.right .conversation-user,
.conversation.right
.conversation-body {
float: right;
}
.conversation-body .text
{
background: #fff;
padding: 6px 8px;
font-size:
13px;
border-radius: 12px;
border-bottom-left-radius: 0;
word-break:
initial;
word-wrap: break-word;
}
body.night-mode .conversation-body
.text {
background: #121212;
}
.conversation.right .conversation-body
.text {
background: #3367d6;
color: #fff;
border-radius:
12px;
border-bottom-right-radius: 0;
}
.conversation.right
.conversation-body .text a {
color: #fff;
}
.conversation-body .text a
{
text-decoration: underline;
}
.conversation-body .text a:hover
{
text-decoration: none;
}
.conversation-body .text .twa {
font-size: 2em;
}
/* -- */
/* attachments */
.conversation-body
.attachments li {
float: left;
width: 64px;
height:
64px;
margin-right: 5px;
margin-bottom: 5px;
}
.conversation-body
.attachments li.item {
border: 1px solid #eee;
cursor:
pointer;
}
.conversation-body .attachments li.item img {
width:
64px;
height: 64px;
}
.conversation-body .attachments li.loading
{
padding-top: 22px; /* 64px-20px(loader) / 2 */
background:
#f3f3f3;
border: 1px solid #eee;
}
/* -- */
.conversation-body .time
{
position: absolute;
top: 100%;
left: 0px;
width:
204px;
margin-top: 2px;
color: #605f5f;
font-size:
10px;
}
body.night-mode .conversation-body .time {
color:
#999;
}
.conversation.right .conversation-body .time {
right:
0;
left: auto;
text-align: right;
}
.conversation-body .time:before
{
content: "\f017";
font-family: 'Font Awesome\ 5
Free';
font-style: normal;
font-weight: normal;
text-decoration:
inherit;
margin-top: 4px;
padding-right: 2px;
font-size:
0.875em;
}
/* -- */
/* EMOJI */
/*
------------------------------- */
.emoji-menu {
display:
none;
position: absolute;
bottom: 30px;
right: 0;
min-width:
224px;
margin: 0;
padding: 6px 2px 0 6px;
font-size:
13px;
line-height: 100%;
background-color: #fff;
border: 1px solid
#d4d5d6;
border-radius: 2px;
box-shadow: 0 1px 1px
rgba(0,0,0,.05);
z-index: 99999;
}
body.night-mode .emoji-menu {
background-color: #212121;
border-color:
#424242;
}
.emoji-menu:before {
position: absolute;
top:
100%;
right: 3px;
content: "";
border-color: #d4d5d6
transparent transparent transparent;
border-style: solid;
border-width:
8px;
}
body.night-mode .emoji-menu:before {
border-color: #424242
transparent transparent transparent;
}
.emoji-menu:after {
position:
absolute;
top: 100%;
right: 4px;
content:
"";
border-color: #f6f7f9 transparent transparent
transparent;
border-style: solid;
border-width:
7px;
}
body.night-mode .emoji-menu:after {
border-color: #212121
transparent transparent transparent;
}
.publisher .emoji-menu {
bottom:
auto;
top: 25px;
right: -4px;
}
.publisher .emoji-menu:before
{
top: auto;
bottom: 100%;
border-color: transparent transparent
#d4d5d6 transparent;
}
body.night-mode .publisher .emoji-menu:before {
border-color: transparent transparent #424242 transparent;
}
.publisher
.emoji-menu:after {
top: auto;
bottom: 100%;
border-color:
transparent transparent #fff transparent;
}
body.night-mode .publisher
.emoji-menu:after {
border-color: transparent transparent #212121
transparent;
}
.lightbox .emoji-menu {
bottom: auto;
top:
27px;
right: -7px;
}
.lightbox .emoji-menu:before {
top:
auto;
bottom: 100%;
border-color: transparent transparent #d4d5d6
transparent;
}
body.night-mode .lightbox .emoji-menu:before {
border-color: transparent transparent #424242 transparent;
}
.lightbox
.emoji-menu:after {
top: auto;
bottom: 100%;
border-color:
transparent transparent #fff transparent;
}
body.night-mode .lightbox
.emoji-menu:after {
border-color: transparent transparent #212121
transparent;
}
.emoji-menu .item {
float: left;
padding: 2px;
margin-right: 1px;
margin-bottom: 1px;
}
.emoji-menu .item:hover
{
cursor: pointer;
background: #f3f3f3;
border-radius:
4px;
}
body.night-mode .emoji-menu .item:hover {
background:
#111111;
}
.emoji-menu .item > img {
width: 66px;
height:
66px;
}
.emoji-menu .nav-tabs {
border-top: 1px #dddfe2
solid;
border-bottom: 0;
margin: 0 -2px 0px -6px;
padding: 0
10px;
}
body.night-mode .emoji-menu .nav-tabs {
border-color:
#424242;
}
.emoji-menu .nav-tabs > li > .nav-link {
color:
#555;
padding: 10px;
margin: 0;
border: 0;
border-radius:
0;
border-top: 2px solid transparent;
}
.emoji-menu .nav-tabs > li
> .nav-link:hover {
background: transparent;
color:
var(--link-color);
border-color: transparent;
border-bottom:
0;
}
.emoji-menu .nav-tabs > li > .nav-link.active,
.emoji-menu
.nav-tabs > li > .nav-link.active:hover,
.emoji-menu .nav-tabs >
li > .nav-link.active:focus {
border: 0;
color:
var(--link-color);
background: transparent;
border-top: 2px solid
var(--link-color);
}
/* -- */
/* PAGE = [BASIC] */
/*
------------------------------- */
/* page-title */
.page-title
{
background-image: url(../images/patterns/bright_squares.png);
background-repeat: repeat;
color: var(--link-color);
text-align:
center;
font-size: 34px;
font-weight: 300;
line-height:
70px;
padding: 70px 0;
}
.night-mode .page-title
{
background-image: url(../images/patterns/crissXcross.png);
}
/* --
*/
/* page-header */
.page-header {
background: #457fca; /*
fallback for old browsers */
background: -webkit-linear-gradient(to
bottom, #5691c8, #457fca); /* Chrome 10-25, Safari 5.1-6 */
background:
linear-gradient(to bottom, #5691c8, #457fca); /* W3C, IE 10+/ Edge, Firefox
16+, Chrome 26+, Opera 12+, Safari 7+ */
position: relative;
text-align: center;
padding: 70px 15px;
overflow: hidden;
color: #fff;
z-index: -999;
}
@media (min-width: 768px)
{
.page-header {
padding: 90px
15px;
}
}
.page-header.movies-header {
background-image:
url(../images/movies.jpg);
background-repeat: repeat;
background-size: contain;
z-index:
auto;
}
.page-header.market-header {
background-image:
url('../images/market.jpg');
background-repeat: repeat;
z-index:
auto;
}
.page-header.bg-1 {
background: #667db6; /* fallback for old
browsers */
background: -webkit-linear-gradient(to right, #667db6,
#0082c8, #0082c8, #667db6); /* Chrome 10-25, Safari 5.1-6 */
background:
linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6); /* W3C, IE
10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+
*/
}
.page-header.bg-2 {
background: #3a7bd5; /* fallback for old
browsers */
background: -webkit-linear-gradient(to right, #3a6073,
#3a7bd5); /* Chrome 10-25, Safari 5.1-6 */
background:
linear-gradient(to right, #3a6073, #3a7bd5); /* W3C, IE 10+/ Edge, Firefox
16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.page-header.bg-3
{
background: #005C97; /* fallback for old browsers */
background:
-webkit-linear-gradient(to right, #363795, #005C97); /* Chrome 10-25,
Safari 5.1-6 */
background: linear-gradient(to right, #363795, #005C97);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+
*/
}
.page-header .floating-img {
position: absolute;
bottom:
10px;
left: 10%;
width: 300px;
opacity: 0.5;
z-index:
-997;
}
.page-header .circle-1 {
position: absolute;
top:
60px;
left: -180px;
width: 290px;
height: 290px;
background-image: radial-gradient(circle 800px at 75% -25%,#000000
0,rgba(255, 255, 255, 0) 100%);
border-radius: 50%;
opacity:
.05;
}
.page-header .circle-2 {
position: absolute;
top:
17px;
right: -242px;
width: 500px;
height: 500px;
background-image: radial-gradient(circle 800px at 10% -25%,#000000
0,rgba(255, 255, 255, 0) 100%);
border-radius: 50%;
opacity:
.03;
}
.page-header .circle-3 {
position: absolute;
top:
-73px;
right: 78px;
width: 200px;
height: 200px;
background-image: radial-gradient(circle 800px at 10% -25%,#000000
0,rgba(255, 255, 255, 0) 100%);
border-radius: 50%;
opacity:
.04;
}
.page-header .ellipse-1 {
position: absolute;
top:
-50px;
left: 0;
width: 200px;
height: 100px;
background-color: rgba(2,136,209,0.3);
border-radius: 50%;
z-index: -998;
}
.page-header .crystal {
width: 0;
height: 0;
position: absolute;
z-index: -998;
}
.page-header .crystal.c01 {
border-bottom: 100px solid rgba(0,96,100,0.1);
border-right: 100vw solid
transparent;
bottom: 0;
right: 0;
}
.page-header .crystal.c02 {
border-bottom: 160px solid rgba(2,136,209,0.3);
border-left: 100vw solid
transparent;
bottom: 0;
left: 0;
}
.page-header .crystal.c03 {
border-top: 200px solid rgba(0,96,155,0.2);
border-right: 40vw solid
transparent;
border-left: 60vw solid transparent;
top: 0;
right:
0;
}
.page-header .crystal.c04 {
border-top: 400px solid
rgba(24,255,255,0.3);
border-right: 80vw solid transparent;
border-left: 20vw solid transparent;
top: 0;
left:
0;
}
.page-header .crystal.c05 {
border-bottom: 250px solid
transparent;
border-top: 100px solid transparent;
border-right: 100vw
solid rgba(128,216,255,0.3);
bottom: 10px;
right: 0;
}
.page-header
.crystal.c06 {
border-bottom: 400px solid rgba(79,195,247,0.4);
border-right: 10vw solid transparent;
border-left: 30vw solid
transparent;
bottom: 0;
right: 20vw;
}
.page-header .crystal.c07
{
border-top: 367px solid rgba(0,131,143,0.2);
border-left: 60vw
solid transparent;
top: 0;
right: 0;
}
.page-header .crystal.c08
{
border-top: 50px solid rgba(167,255,235,0.4);
border-right: 60vw
solid transparent;
top: 0;
left: 0;
}
.page-header .crystal.c09 {
border-top: 400px solid rgba(0,176,255,0.3);
border-right: 30vw solid
transparent;
top: 0;
left: 0;
}
.page-header .crystal.c10 {
border-bottom: 400px solid rgba(128,222,234,0.2);
border-right: 20vw
solid transparent;
border-left: 20vw solid transparent;
bottom: 0;
right: 60vw;
}
.page-header .inner {
z-index: 999;
}
.page-header
h2 {
font-family: -apple-system, system-ui, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif;
font-weight: normal;
}
/* -- */
/* footer */
.footer
{
border-top: 1px solid #e6ecf5;
padding-top: 10px;
padding-bottom:
10px;
margin-top: 25px;
margin-bottom: 25px;
}
.night-mode .footer
{
border-top: 1px solid #212121;
}
@media (min-width: 768px)
{
.footer .links {
text-align: right;
}
}
/* -- */
/* PAGE
= [INDEX] */
/* ------------------------------- */
/* index-body
*/
body.index-body {
background-image:
url('../images/home/dots.png');
background-size: contain;
background-color: #f9f9f9;
}
body.night-mode.index-body {
background-image: url('../images/home/dots-night.png');
background-color: var(--body-bg-color-dark);
}
/* -- */
/*
card-register */
.card-register {
background: #fff;
border: 0;
box-shadow: 0 1px 20px 0 rgba(0,0,0,.1);
overflow:
hidden;
}
.card-register .card-header {
border: 0;
padding: 0 0
15px;
background: transparent;
}
.card-register .card-header img {
position: absolute;
left: 0;
top: -135px;
margin-left:
-50px;
margin-top: -150px;
border-radius: 20%;
width:
350px;
}
.card-register .card-header .card-title {
position:
relative;
font-size: 4em;
font-weight: 900;
color: #eee;
text-transform: lowercase;
margin-left: -5px;
}
body.night-mode
.card-register .card-header .card-title {
color:
#222a42;
}
.card-register .form-control {
border-radius: 18px;
background: #f7f7f7;
}
.card-register
.input-group>.input-group-prepend>.input-group-text {
background: #f7f7f7;
border-radius: 18px 0 0 18px;
}
body.night-mode
.card-register .form-control {
background: #232323;
border-color:
#363636;
}
body.night-mode .card-register
.input-group>.input-group-prepend>.input-group-text {
background: #232323;
border-color: #363636;
color:
#dfdfdf;
}
/* -- */
/* index-intro */
.index-intro {
text-align:
center;
margin-bottom: 20px;
}
.index-intro h1 {
font-size:
34px;
font-weight: 100;
color: #4d4d4d;
}
@media (min-width: 768px)
{
.index-intro h1 {
font-size: 48px;
}
}
body.night-mode
.index-intro h1 {
color: #fff;
}
.index-intro p {
font-weight:
100;
font-size: 18px;
line-height: 24px;
color:
#6a6a6a;
}
body.night-mode .index-intro p {
color: #ccc;
}
/* --
*/
/* daytime_message */
.daytime_message {
padding: 10px 15px;
margin-bottom: 20px;
display: none;
}
.daytime_message img {
width:
28px;
height: 28px;
margin-right: 5px;
}
.daytime_message button
{
margin-top: 4px;
font-size: 18px;
}
/* -- */
/* PAGE =
[DIRECTORY] */
/* ------------------------------- */
.directory-card
{
display: block;
width: 100%;
height: 100%;
background:
#f6f7f9;
padding: 25px;
font-size: 14px;
line-height:
20px;
text-align: center;
color: #898f9c;
border-radius:
4px;
}
body.night-mode .directory-card {
background:
#292929;
}
.directory-card:hover {
background: #eee;
color:
#898f9c;
}
body.night-mode .directory-card:hover {
background:
#333333;
}
.directory-card .title {
margin-top: 15px;
color:
#4b4f56;
}
body.night-mode .directory-card .title {
color:
#9a9fbf;
}
.directory-card p {
margin-bottom: 0;
}
/* -- */
/*
PAGE = [MESSAGES] */
/* ------------------------------- */
/*
panel-messages */
.panel-messages .card-header .fa-circle {
color:
#65a830;
font-size: 9px;
}
.panel-messages .card-body {
padding:
0;
}
.panel-messages.fresh .card-body {
position:
relative;
}
.panel-messages .conversation-user {
width:
50px;
height: 50px;
}
.panel-messages .conversation-user img {
width:
50px;
height: 50px;
}
.panel-messages .conversation-body
{
max-width: -moz-calc(100% - 120px); /* 120px = (50px+10px)*2 (avatars +
margins) */
max-width: -webkit-calc(100% - 120px);
max-width:
-o-calc(100% - 120px);
max-width: calc(100% - 120px);
}
.panel-messages
.conversation-body .text {
background: #e9eaee;
}
/* -- */
/*
PAGE = [PROFILE] */
/* ------------------------------- */
/*
profile-header */
.profile-header {
position: relative;
margin-bottom:
20px;
border: 1px solid #e6ecf5;
border-top: 0;
}
body.night-mode
.profile-header {
border-color: #424242;
}
@media (min-width: 992px)
{
.profile-header {
margin-bottom: 40px;
}
}
/* -- */
/*
profile-cover-wrapper */
.profile-cover-wrapper {
background:
#424242;
position: relative;
height: 180px;
overflow:
hidden;
border-radius: 0 0 2px 2px;
}
@media (min-width: 576px)
{
.profile-cover-wrapper {
height: 240px;
}
}
@media (min-width:
768px) {
.profile-cover-wrapper {
height: 300px;
}
}
@media
(min-width: 992px) {
.profile-cover-wrapper {
height:
360px;
}
}
/* -- */
/* profile-cover-wrapper -> img
*/
.profile-cover-wrapper img.js_position-cover-cropped {
width:
100%;
height: 100%;
object-fit: cover;
cursor:
pointer;
}
.profile-cover-wrapper img.js_position-cover-full {
width: 100%;
height: auto;
cursor: move;
}
/* -- */
/*
profile-cover-wrapper -> buttons */
.profile-cover-buttons
{
position: absolute;
top: 10px;
left: 10px;
color:
#fff;
font-size: 12px;
opacity: 0.4;
transition: all .5s;
}
@media
(min-width: 768px) {
.profile-cover-buttons {
top: 15px;
left:
15px;
font-size: 16px;
}
}
.profile-cover-buttons > div
{
float: left;
margin-right: 5px;
padding: 4px
8px;
border-radius: 50%;
text-align: center;
background: rgba(0, 0,
0, 0.10);
transition: all .5s;
}
.profile-cover-buttons > div:hover
{
cursor: pointer;
background: rgba(0, 0, 0,
0.25);
}
.profile-cover-wrapper:hover .profile-cover-buttons {
opacity: 1;
}
.profile-cover-buttons form.x-uploader {
position:
relative;
}
.profile-cover-buttons >
div.profile-cover-position-buttons {
display: none;
padding: 4px
6px;
}
/* -- */
/* profile-cover-wrapper -> loaders
*/
.profile-cover-change-loader {
display: none;
position:
absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity:
0.5;
background: #000;
width: 100%;
height: 100%;
padding-top:
20%;
transition: all .5s;
}
@media (min-width: 768px)
{
.profile-cover-change-loader {
padding-top:
15%;
}
}
.profile-cover-position-loader {
display: none;
position: absolute;
top: 15px;
left: 50%;
padding: 8px
10px;
background: rgba(0,0,0,0.45);
color: #fff;
font-size:
11px;
border-radius: 2px;
transform: translate(-50%);
}
@media
(min-width: 768px) {
.profile-cover-position-loader {
padding: 8px
24px;
font-size: 13px;
font-weight: 600;
}
}
/* -- */
/*
profile-avatar-wrapper */
.profile-avatar-wrapper {
position:
absolute;
top: 112px;
left: 50%;
transform:
translate(-50%);
padding: 2px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0,
.3);
}
@media (min-width: 576px) {
.profile-avatar-wrapper {
top: 140px;
}
}
@media (min-width: 768px) {
.profile-avatar-wrapper {
top: 170px;
}
}
body.night-mode
.profile-avatar-wrapper {
background:
#121212;
}
.profile-avatar-wrapper.static {
top: 0;
}
@media
(min-width: 992px) {
.profile-avatar-wrapper {
padding: 4px;
}
.profile-avatar-wrapper:not(.static) {
top: auto;
bottom:
-25px;
left: 55px;
transform: none;
}
}
/*
profile-avatar-wrapper -> img */
.profile-avatar-wrapper img {
width:
90px;
height: 90px;
border-radius: 50%;
transition: all
.5s;
}
.profile-avatar-wrapper img.js_lightbox:hover {
cursor:
pointer;
}
@media (min-width: 576px) {
.profile-avatar-wrapper img
{
width: 120px;
height: 120px;
}
}
@media (min-width: 768px)
{
.profile-avatar-wrapper img {
width: 150px;
height:
150px;
}
}
@media (min-width: 992px) {
.profile-avatar-wrapper img
{
width: 160px;
height: 160px;
}
}
/* -- */
/*
profile-avatar-wrapper -> buttons
*/
.profile-avatar-change,
.profile-avatar-crop,
.profile-avatar-delete
{
display: block;
position: absolute;
bottom: 5px;
right:
5px;
opacity: 0.4;
color: #fff;
font-size: 12px;
padding: 4px 8px;
border-radius: 50%;
text-align: center;
background: rgba(0, 0, 0, 0.10);
transition: all
.5s;
}
.profile-avatar-change:hover,
.profile-avatar-crop:hover,
.profile-avatar-delete:hover
{
cursor: pointer;
background: rgba(0, 0, 0,
0.25);
}
.profile-avatar-crop {
bottom: 35px;
right:
-15px;
}
.profile-avatar-delete {
bottom: 75px;
right:
5px;
}
.profile-avatar-change form.x-uploader {
position:
relative;
}
@media (min-width: 576px) {
.profile-avatar-delete
{
bottom: 75px;
right: -15px;
}
}
@media (min-width: 768px)
{
.profile-avatar-change,
.profile-avatar-crop,
.profile-avatar-delete
{
bottom: 10px;
right: 10px;
font-size:
16px;
}
.profile-avatar-crop {
bottom: 45px;
right:
-10px;
}
.profile-avatar-delete {
bottom: 85px;
right:
-15px;
}
}
.profile-avatar-wrapper:hover
.profile-avatar-change,
.profile-avatar-wrapper:hover
.profile-avatar-delete,
.profile-avatar-wrapper:hover .profile-avatar-crop
{
opacity: 1;
}
/* -- */
/* profile-avatar-wrapper -> loaders
*/
.profile-avatar-change-loader {
display: none;
position:
absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity:
0.5;
background: #000;
width: 100%;
height: 100%;
border-radius:
50%;
padding-top: 50%;
transition: all .5s;
}
/* -- */
/*
profile-name-wrapper */
.profile-name-wrapper {
background: #fff;
padding-top: 30px;
padding-bottom: 10px;
text-align: center;
font-size: 1.2em;
font-weight: 600;
}
body.night-mode
.profile-name-wrapper {
background: #212121;
}
@media (min-width:
992px) {
.profile-name-wrapper {
position: absolute;
bottom: 50px;
left: 285px;
right: auto;
background: transparent!important;
padding-top: 0;
padding-bottom: 0;
text-align: left;
font-size: 1.9em;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
}
.no-avatar
.profile-name-wrapper {
left: 85px;
bottom: 70px;
}
}
.profile-name-wrapper a {
color: #333;
}
body.night-mode
.profile-name-wrapper a {
color: #fff;
}
.profile-name-wrapper
a.badge {
color: #fff;
}
@media (min-width: 992px) {
.profile-name-wrapper a {
color: #fff;
}
.profile-name-wrapper a.badge {
font-size: 14px;
}
}
/* --
*/
/* profle-date-wrapper */
.profle-date-wrapper {
position:
absolute;
width: 45px;
left: 10px;
top: 120px;
padding:
6px;
border-radius: 6px;
border: 2px solid white;
background: rgba(0, 0, 0, 0.1);
text-align: center;
font-size:
12px;
color: #fff;
-webkit-transition: all .5s;
transition: all .5s;
}
@media (min-width: 576px) {
.profle-date-wrapper {
top: 180px;
}
}
@media (min-width:
768px) {
.profle-date-wrapper {
top: 240px;
}
}
@media
(min-width: 992px) {
.profle-date-wrapper {
width: 55px;
left: 15px;
top: auto;
bottom: 50px;
font-size: 14px;
}
}
/* -- */
/* profle-meta-wrapper
*/
.profle-meta-wrapper {
position: absolute;
left: 65px;
top: 140px;
color: #e9e9e9;
font-size: 12px;
text-shadow: 0
0 3px rgba(0, 0, 0, 0.9);
}
@media (min-width: 576px) {
.profle-meta-wrapper {
top: 200px;
}
}
@media (min-width:
768px) {
.profle-meta-wrapper {
top: 260px;
}
}
@media
(min-width: 992px) {
.profle-meta-wrapper {
left: 85px;
top: auto;
bottom: 50px;
font-size: 14px;
}
}
/* -- */
/* profile-buttons-wrapper */
.profile-buttons-wrapper
{
background: #fff;
padding-bottom: 20px;
text-align:
center;
}
body.night-mode .profile-buttons-wrapper {
background:
#212121;
}
@media (min-width: 992px) {
.profile-buttons-wrapper {
background: transparent!important;
position: absolute;
bottom: 50px;
right: 15px;
padding-bottom: 0;
text-align: left;
}
}
@media (max-width: 992px) {
.profile-buttons-wrapper .btn {
box-shadow: none;
}
}
/* --
*/
/* profile-tabs-wrapper */
.profile-tabs-wrapper {
padding: 0
5px;
background: #fff;
box-shadow: 0 1px 13px rgba(0, 0, 0,
0.08);
border-top: 1px solid #e6ecf5;
border-radius: 0 0 2px
2px;
}
body.night-mode .profile-tabs-wrapper {
background:
#212121;
border-color: #323232;
}
@media (min-width: 992px)
{
.profile-tabs-wrapper {
position: absolute;
bottom:
-25px;
left: 285px;
right: 15px;
padding: 0;
box-shadow:
none;
border-radius: 2px;
}
.no-avatar .profile-tabs-wrapper
{
left: 15px;
}
}
.profile-tabs-wrapper > ul {
overflow:
hidden;
overflow-x: auto;
white-space:
nowrap;
}
.profile-tabs-wrapper > ul > li {
display:
inline-block;
}
.profile-tabs-wrapper > ul > li > a {
display:
block;
padding: 18px 34px;
line-height: 20px;
font-weight:
600;
color: #666;
transition: all .2s
ease;
}
.profile-tabs-wrapper.narrow > ul > li > a {
padding:
18px 28px;
}
body.night-mode .profile-tabs-wrapper > ul > li > a
{
color: #eee;
}
.profile-tabs-wrapper > ul > li >
a:hover,
body.night-mode .profile-tabs-wrapper > ul > li >
a:hover {
color: var(--link-color);
}
.profile-tabs-wrapper > ul
> li > a.active,
body.night-mode .profile-tabs-wrapper > ul >
li > a.active {
color: var(--link-color);
border-bottom: 2px solid
var(--link-color);
}
/* -- */
/* panel-mutual-friends */
@media
(max-width: 559px) {
.panel-mutual-friends {
display:
none;
}
}
.panel-mutual-friends li {
float: left;
width:
40px;
height: 40px;
margin-right: -8px;
}
/* -- */
/* panel
[about] */
.about-bio {
word-wrap: break-word;
text-align:
center;
border-bottom: 1px solid #eee;
margin-bottom: 10px;
padding-bottom: 10px;
}
body.night-mode .about-bio {
border-color:
#424242;
}
.about-bio a {
display: inline-block;
margin-top:
10px;
}
.about-list {
list-style: none;
padding: 0;
margin:
0;
}
.about-list li {
position: relative;
padding-bottom:
5px;
margin-bottom: 8px;
font-size: 12px;
line-height:
18px;
font-weight: 500;
}
.about-list li.package {
background:
#597ba5;
color: #fff;
padding: 10px 15px;
margin-left:
-20px;
margin-right: -20px;
margin-bottom: 15px;
text-align:
center;
}
.about-list li:last-child {
border-bottom: 0
none;
padding-bottom: 0;
margin-bottom: 0;
}
.about-list-item
{
padding-left: 30px;
word-break: break-word;
}
.about-list-item
a:hover {
text-decoration: underline;
}
.about-list-item .fa
{
position: absolute;
top: 4px;
left: 0;
color:
#a5a9b3;
}
.about-list-item .details {
padding-top: 2px;
color:
#b2b2b2;
font-size: 11px;
line-height: 16px;
font-weight:
normal;
}
/* -- */
/* panel [photos] */
.panel-photos
div[class^="col-"], .panel-photos div[class*=" col-"]
{
padding: 1px;
padding-bottom: 0;
}
.pg_photo {
position:
relative;
display: block;
background-size: cover;
background-repeat:
no-repeat;
background-position: center;
background-color:
#eee;
width: 100%;
height: 100%;
padding-top: 100%;
min-width:
40px;
min-height: 40px;
border-radius: 1px;
margin-bottom:
2px;
}
.pg_photo.large {
min-width: 100px;
min-height:
100px;
}
.pg_photo-btn {
position: absolute;
right: 5px;
top:
5px;
}
/* -- */
/* album-card */
.album-card {
border: 1px solid
#ededed;
border-radius: 1px;
margin-bottom: 10px;
}
body.night-mode
.album-card {
border-color: #121212;
}
.album-cover {
display:
block;
background-size: cover;
background-repeat:
no-repeat;
background-position: center;
background-color:
#eee;
width: 100%;
height: 100%;
padding-top: 100%;
overflow:
hidden;
min-width: 40px;
min-height: 40px;
}
.album-details
{
padding: 10px;
font-size: 11px;
}
.album-details .fa {
cursor:
pointer;
}
.album-details .tooltip {
width: auto;
min-width:
110px;
font-size: 11px;
}
/* -- */
/* album */
.album-title {
text-align: center;
font-size: 1.5em;
font-weight: 600;
margin-top: 20px;
}
.album-meta {
text-align: center;
margin-bottom:
40px;
}
/* -- */
/* PAGE = [ADMIN] */
/*
------------------------------- */
/* admin-chart */
.admin-chart
{
min-width: 100%;
height: 400px;
margin: 0 auto;
border: 1px
solid #e6ecf5;
}
body.night-mode .admin-chart {
border-color:
#424242;
}
/* -- */
/* change-log-list */
.change-log-list
{
margin-left: 30px;
}
.change-log-list > li {
margin-left:
30px;
list-style-type: disc;
}
/* -- */
/* PAGE = [MARKET]
*/
/* ------------------------------- */
.product {
position:
relative;
}
.product:hover{
box-shadow: 0 2px 10px rgba(0, 0, 0,
0.2);
}
.product.boosted {
border: 2px solid #f9b340;
}
.product
.boosted-icon {
position: absolute;
left: -15px;
top: -15px;
width: auto;
padding: 3px 6px;
font-size: 16px;
background: #f9b340;
color: #ffffff;
border-radius: 50%;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform:
rotate(-20deg); /* Safari */
transform: rotate(-20deg); /* Standard
syntax */
z-index: 2;
}
.product-image {
position: relative;
width: 100%;
height: 250px;
overflow:
hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-price {
position: absolute;
left:
10px;
bottom: 10px;
background: rgba(0, 0, 0, 0.65);
color:
#fff;
font-size: 16px;
font-weight: bold;
line-height: 1;
padding: 6px 10px;
border-radius: 6px;
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
width:
100%;
height: 100%;
padding-top: 100px;
background: rgba(0,
0, 0, 0.5);
color: #fff;
text-align: center;
opacity: 0;
transition: all 300ms;
}
.product:hover .product-overlay {
opacity:
1;
}
.product-info {
padding: 10px;
}
.product-meta {
overflow: hidden;
word-break: break-all;
text-overflow:
ellipsis;
white-space: nowrap;
margin-bottom:
10px;
}
.product-meta .title {
font-size: 14px;
font-weight:
500;
}
/* -- */
/* PAGE = [MOVIES] */
/*
------------------------------- */
.movie-card {
margin-bottom:
20px;
}
.movie-card-top {
position: relative;
display:
block;
border: 5px solid #fff;
border-radius: 4px;
margin-bottom: 10px;
}
body.night-mode .movie-card-top {
border-color: #212121;
}
.movie-picture {
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
background-color: #fff;
width: 100%;
height: 100%;
min-height: 330px;
}
.movie-info {
position: absolute;
top:
0;
left: 0;
right: 0;
width: 100%;
height: 100%;
padding-top:
70px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
text-align:
center;
opacity: 0;
transition: all 300ms;
transition-delay:
100ms;
}
.movie-info .meta {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.movie-card-top:hover .movie-info {
opacity:
1;
}
.movie-card-bottom {
margin: 0 auto;
padding: 0 5px;
text-align: left;
}
.movie-title {
display: block;
font-size: 14px;
font-weight: 700;
transition: color .15s ease-in-out;
overflow: hidden;
white-space: nowrap;
text-overflow:
ellipsis;
}
.movie-year {
font-size: 14px;
}
/* -- */
/* NOTY
NOTIFICATION */
/* -------------------------------
*/
.noty_theme__mint.noty_type__info,
.noty_theme__mint.noty_type__information {
background-color: rgba(51,
103, 214, 0.8)!important;
border-bottom: 1px solid
#3367d6!important
}
.noty_bar {
margin-bottom:
5px!important;
}
.noty_body {
color: #fff!important;
padding:
5px!important;
}
.noty_body .data-content,
.noty_close_button {
color:
#fff!important;
}
/* -- */
/* TRANSLATOR */
/*
------------------------------- */
.translator-language {
display:
block;
font-size: 15px;
line-height: 100%;
padding:
15px;
margin-bottom: 5px;
border: 1px solid #eee;
border-radius:
1px;
}
.translator-language:hover {
background: #f3f3f3;
cursor:
pointer;
}
/* -- */
/* BIG ICON */
/*
------------------------------- */
.big-icon {
width: 80px;
height:
80px;
border: 4px solid rgba(128, 128, 128, 0.15);
border-radius:
50%;
margin: 20px auto;
position: relative;
}
.big-icon.success
{
border-color: rgba(76, 174, 76, 0.15);
}
.big-icon.error
{
border-color: rgba(217, 83, 79, 0.15);
}
.big-icon.warning
{
border-color: rgba(255, 153, 0, 0.21);
}
.big-icon .fa
{
padding-top: 17px;
padding-left: 3px;
}
.big-icon.success .fa
{
color: #4cae4c;
}
.big-icon.error .fa {
color:
#d9534f;
}
.big-icon.warning .fa {
color: #d9954f;
}
/* --
*/
/* LOADER */
/* ------------------------------- */
.x-loader
{
text-align: center;
}
.loader {
width: 100%;
display:
-webkit-box;
display: -webkit-flex;
display: -moz-box;
display:
-ms-flexbox;
display: flex;
-webkit-box-align:
center;
-webkit-align-items: center;
-moz-box-align:
center;
-ms-flex-align: center;
align-items:
center;
-webkit-box-pack: center;
-webkit-justify-content:
center;
-moz-box-pack: center;
-ms-flex-pack:
center;
justify-content: center;
padding: 5px 0;
}
.loader:after
{
display: block;
position: relative;
width: 20px;
height:
20px;
-webkit-animation: rotate 0.6s linear infinite;
-moz-animation:
rotate 0.6s linear infinite;
-ms-animation: rotate 0.6s linear
infinite;
-o-animation: rotate 0.6s linear infinite;
animation: rotate
0.6s linear infinite;
-webkit-border-radius: 100%;
-moz-border-radius:
100%;
border-radius: 100%;
border-top: 1px solid
#545a6a;
border-bottom: 1px solid #d4d4db;
border-left: 1px solid
#545a6a;
border-right: 1px solid #d4d4db;
content: '';
opacity:
.5;
}
.loader.loader_large:after {
width: 40px;
height:
40px;
}
.loader.loader_medium:after {
width: 25px;
height:
25px;
}
.loader.loader_small:after {
width: 10px;
height:
10px;
}
.loader.loader_green:after {
opacity: 1;
border-top: 1px
solid #42a26e;
border-bottom: 1px solid #fff;
border-left: 1px solid
#42a26e;
border-right: 1px solid #fff;
}
@keyframes rotate {
0%
{
transform: rotateZ(-360deg);
-webkit-transform:
rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
-o-transform:
rotateZ(-360deg);
}
100% {
transform:
rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform:
rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
}
@-webkit-keyframes
rotate {
0% {
transform: rotateZ(-360deg);
-webkit-transform:
rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
-o-transform:
rotateZ(-360deg);
}
100% {
transform:
rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform:
rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
}
@-moz-keyframes
rotate {
0% {
transform: rotateZ(-360deg);
-webkit-transform:
rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
-o-transform:
rotateZ(-360deg);
}
100% {
transform:
rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform:
rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
}
@-o-keyframes rotate
{
0% {
transform: rotateZ(-360deg);
-webkit-transform:
rotateZ(-360deg);
-moz-transform: rotateZ(-360deg);
-o-transform:
rotateZ(-360deg);
}
100% {
transform:
rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
-moz-transform:
rotateZ(0deg);
-o-transform: rotateZ(0deg);
}
}
/* -- */
/*
POST LOADER */
/* ------------------------------- */
@keyframes anim {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
@-o-keyframes anim {
0% {
background-position: -468px 0;
}
100% {
background-position:
468px 0;
}
}
@-ms-keyframes anim {
0% {
background-position:
-468px 0;
}
100% {
background-position: 468px 0;
}
}
@-moz-keyframes anim {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
@-webkit-keyframes
anim {
0% {
background-position: -468px 0;
}
100% {
background-position: 468px 0;
}
}
.panel-effect {
position:
relative;
background: #f6f7f8 no-repeat 800px 104px;
background-image:
url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2ZjdmOCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZWRlZWYxIi8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNmNmY3ZjgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmNmY3ZjgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=');
background-size: 100%;
background-image: -webkit-gradient(linear, 0%
50%, 100% 50%, color-stop(0%, #f6f7f8), color-stop(20%, #edeef1),
color-stop(40%, #f6f7f8), color-stop(100%, #f6f7f8));
background-image:
-moz-linear-gradient(left, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8
100%);
background-image: -webkit-linear-gradient(left, #f6f7f8 0%,
#edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
background-image:
linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8
100%);
height: 104px;
-moz-animation: anim 1s forwards infinite
linear;
-webkit-animation: anim 1s forwards infinite linear;
animation: anim 1s forwards infinite linear;
}
.fake-effect {
position: absolute;
background: #fff;
right: 0;
left: 0;
height: 6px;
}
.fe-0 {
height: 40px;
left: 40px;
width:
8px;
}
.fe-1 {
height: 8px;
left: 48px;
top: 0;
right:
0;
}
.fe-2 {
left: 136px;
top: 8px;
}
.fe-3 {
height:
12px;
left: 48px;
top: 14px;
}
.fe-4 {
left: 100px;
top:
26px;
}
.fe-5 {
height: 10px;
left: 48px;
top:
32px;
}
.fe-6 {
height: 20px;
top: 40px;
}
.fe-7 {
left:
410px;
top: 60px;
}
.fe-8 {
height: 13px;
top:
66px;
}
.fe-9 {
left: 440px;
top: 79px;
}
.fe-10 {
height:
13px;
top: 85px;
}
.fe-11 {
left: 178px;
top: 98px;
}
/* --
*/
/* ON/OFF TOGGLE */
/* -------------------------------
*/
.switch {
position: relative;
display: inline-block;
width:
60px;
height: 34px;
margin: 0;
}
.switch.sm {
width:
30px;
height: 17px;
}
.switch input {
display:none;
}
.switch
.slider {
position: absolute;
cursor: pointer;
top: 0;
left:
0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition:
.4s;
transition: .4s;
}
body.night-mode .switch .slider
{
background-color: #666;
}
.switch .slider:before {
position:
absolute;
content: "";
height: 26px;
width: 26px;
left:
4px;
bottom: 4px;
background-color: white;
-webkit-transition:
.4s;
transition: .4s;
}
.switch.sm .slider:before {
height:
13px;
width: 13px;
left: 2px;
bottom: 2px;
}
.switch input:checked
+ .slider {
background-color: var(--link-color);
}
.switch input:focus
+ .slider {
box-shadow: 0 0 1px #2196F3;
}
.switch input:checked +
.slider:before {
-webkit-transform: translateX(26px);
-ms-transform:
translateX(26px);
transform: translateX(26px);
}
.switch.sm
input:checked + .slider:before {
-webkit-transform:
translateX(13px);
-ms-transform: translateX(13px);
transform:
translateX(13px);
}
.switch .slider.round {
border-radius:
34px;
}
.switch .slider.round:before {
border-radius: 50%;
}
/* --
*/
/* CUSTOM RADIO/CHECKBOX TEMPLATES */
/*
------------------------------- */
.button-label {
display:
inline-block;
padding: 1em 2em;
margin: 0.5em;
cursor:
pointer;
color: #6c6c6c;
border-radius: 6px;
transition:
0.3s;
box-shadow: 0 0 0 1px #e6e6e6;
min-width:
115px;
}
body.night-mode .button-label {
box-shadow: 0 0 0 1px
#424242;
}
.button-label .icon {
display: flex;
align-items:
center;
justify-content: center;
background: #f3f3f3;
height: 60px;
width: 60px;
border-radius: 50%;
transition:
all 0.2s;
opacity: .75;
filter: grayscale(1);
}
.button-label
.icon img {
width: 32px;
height: 32px;
}
.button-label .title
{
font-weight: 500;
font-size: 14px;
margin-top: 15px;
text-transform: capitalize;
}
.button-label:hover {
box-shadow: 0px
0px 0px 2px rgba(51, 103, 214, 0.65);
}
.input-label:checked +
.button-label {
box-shadow: 0px 0px 0px 2px rgba(51, 103, 214,
0.65);
}
.input-label:checked + .button-label .icon {
filter:
grayscale(0);
opacity: 1;
}
/* -- */
/* SOCIAL BUTTONS */
/*
------------------------------- */
.btn-social,.btn-social-icon {
white-space: nowrap;
overflow: hidden;
text-overflow:
ellipsis
}
.btn-adn.active,.btn-adn:active,.btn-bitbucket.active,.btn-bitbucket:active,.btn-dropbox.active,.btn-dropbox:active,.btn-facebook.active,.btn-facebook:active,.btn-flickr.active,.btn-flickr:active,.btn-foursquare.active,.btn-foursquare:active,.btn-github.active,.btn-github:active,.btn-google.active,.btn-google:active,.btn-instagram.active,.btn-instagram:active,.btn-microsoft.active,.btn-microsoft:active,.btn-openid.active,.btn-openid:active,.btn-pinterest.active,.btn-pinterest:active,.btn-reddit.active,.btn-reddit:active,.btn-soundcloud.active,.btn-soundcloud:active,.btn-tumblr.active,.btn-tumblr:active,.btn-twitter.active,.btn-twitter:active,.btn-vimeo.active,.btn-vimeo:active,.btn-vk.active,.btn-vk:active,.btn-yahoo.active,.btn-yahoo:active,.open>.dropdown-toggle.btn-adn,.open>.dropdown-toggle.btn-bitbucket,.open>.dropdown-toggle.btn-dropbox,.open>.dropdown-toggle.btn-facebook,.open>.dropdown-toggle.btn-flickr,.open>.dropdown-toggle.btn-foursquare,.open>.dropdown-toggle.btn-github,.open>.dropdown-toggle.btn-google,.open>.dropdown-toggle.btn-instagram,.open>.dropdown-toggle.btn-microsoft,.open>.dropdown-toggle.btn-openid,.open>.dropdown-toggle.btn-pinterest,.open>.dropdown-toggle.btn-reddit,.open>.dropdown-toggle.btn-soundcloud,.open>.dropdown-toggle.btn-tumblr,.open>.dropdown-toggle.btn-twitter,.open>.dropdown-toggle.btn-vimeo,.open>.dropdown-toggle.btn-vk,.open>.dropdown-toggle.btn-yahoo
{
background-image: none
}
.btn-social {
position:
relative;
padding-left: 44px;
text-align:
left
}
.btn-social>:first-child {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 32px;
line-height:
34px;
font-size: 1.6em;
text-align: center;
border-right:
1px solid rgba(0,0,0,.2)
}
.btn-social.btn-lg {
padding-left:
61px
}
.btn-social.btn-lg>:first-child {
line-height: 45px;
width: 45px;
font-size: 1.8em
}
.btn-social.btn-sm {
padding-left: 38px
}
.btn-social.btn-sm>:first-child {
line-height: 28px;
width: 28px;
font-size:
1.4em
}
.btn-social.btn-xs {
padding-left:
30px
}
.btn-social.btn-xs>:first-child {
line-height: 20px;
width: 20px;
font-size: 1.2em
}
.btn-social-icon {
position:
relative;
text-align: left;
height: 34px;
width: 34px;
padding: 0
}
.btn-social-icon>:first-child {
position:
absolute;
left: 0;
top: 0;
bottom: 0;
line-height:
34px;
font-size: 1.6em
}
.btn-social-icon.btn-lg>:first-child
{
line-height: 45px;
width: 45px;
font-size:
1.8em
}
.btn-social-icon.btn-sm>:first-child {
line-height:
28px;
width: 28px;
font-size:
1.4em
}
.btn-social-icon.btn-xs>:first-child {
line-height:
20px;
width: 20px;
font-size:
1.2em
}
.btn-social-icon>:first-child {
border: none;
text-align: center;
width:
100%!important
}
.btn-social-icon.btn-lg {
height: 45px;
width: 45px;
padding-left: 0;
padding-right:
0
}
.btn-social-icon.btn-sm {
height: 30px;
width: 30px;
padding-left: 0;
padding-right: 0
}
.btn-social-icon.btn-xs {
height: 22px;
width: 22px;
padding-left: 0;
padding-right:
0
}
.btn-adn {
color: #fff;
background-color: #d87a68;
border-color:
rgba(0,0,0,.2)
}
.btn-adn.active,.btn-adn:active,.btn-adn:focus,.btn-adn:hover,.open>.dropdown-toggle.btn-adn
{
color: #fff;
background-color: #ce563f;
border-color:
rgba(0,0,0,.2)
}
.btn-adn.disabled,.btn-adn.disabled.active,.btn-adn.disabled:active,.btn-adn.disabled:focus,.btn-adn.disabled:hover,.btn-adn[disabled],.btn-adn[disabled].active,.btn-adn[disabled]:active,.btn-adn[disabled]:focus,.btn-adn[disabled]:hover,fieldset[disabled]
.btn-adn,fieldset[disabled] .btn-adn.active,fieldset[disabled]
.btn-adn:active,fieldset[disabled] .btn-adn:focus,fieldset[disabled]
.btn-adn:hover {
background-color: #d87a68;
border-color:
rgba(0,0,0,.2)
}
.btn-adn .badge {
color: #d87a68;
background-color: #fff
}
.btn-bitbucket {
color: #fff;
background-color: #205081;
border-color:
rgba(0,0,0,.2)
}
.btn-bitbucket.active,.btn-bitbucket:active,.btn-bitbucket:focus,.btn-bitbucket:hover,.open>.dropdown-toggle.btn-bitbucket
{
color: #fff;
background-color: #163758;
border-color:
rgba(0,0,0,.2)
}
.btn-bitbucket.disabled,.btn-bitbucket.disabled.active,.btn-bitbucket.disabled:active,.btn-bitbucket.disabled:focus,.btn-bitbucket.disabled:hover,.btn-bitbucket[disabled],.btn-bitbucket[disabled].active,.btn-bitbucket[disabled]:active,.btn-bitbucket[disabled]:focus,.btn-bitbucket[disabled]:hover,fieldset[disabled]
.btn-bitbucket,fieldset[disabled] .btn-bitbucket.active,fieldset[disabled]
.btn-bitbucket:active,fieldset[disabled]
.btn-bitbucket:focus,fieldset[disabled] .btn-bitbucket:hover {
background-color: #205081;
border-color:
rgba(0,0,0,.2)
}
.btn-bitbucket .badge {
color: #205081;
background-color: #fff
}
.btn-dropbox {
color: #fff;
background-color: #1087dd;
border-color:
rgba(0,0,0,.2)
}
.btn-dropbox.active,.btn-dropbox:active,.btn-dropbox:focus,.btn-dropbox:hover,.open>.dropdown-toggle.btn-dropbox
{
color: #fff;
background-color: #0d6aad;
border-color:
rgba(0,0,0,.2)
}
.btn-dropbox.disabled,.btn-dropbox.disabled.active,.btn-dropbox.disabled:active,.btn-dropbox.disabled:focus,.btn-dropbox.disabled:hover,.btn-dropbox[disabled],.btn-dropbox[disabled].active,.btn-dropbox[disabled]:active,.btn-dropbox[disabled]:focus,.btn-dropbox[disabled]:hover,fieldset[disabled]
.btn-dropbox,fieldset[disabled] .btn-dropbox.active,fieldset[disabled]
.btn-dropbox:active,fieldset[disabled]
.btn-dropbox:focus,fieldset[disabled] .btn-dropbox:hover {
background-color: #1087dd;
border-color:
rgba(0,0,0,.2)
}
.btn-dropbox .badge {
color: #1087dd;
background-color: #fff
}
.btn-facebook {
color: #fff;
background-color: #3b5998;
border-color:
rgba(0,0,0,.2)
}
.btn-facebook.active,.btn-facebook:active,.btn-facebook:focus,.btn-facebook:hover,.open>.dropdown-toggle.btn-facebook
{
color: #fff;
background-color: #2d4373;
border-color:
rgba(0,0,0,.2)
}
.btn-facebook.disabled,.btn-facebook.disabled.active,.btn-facebook.disabled:active,.btn-facebook.disabled:focus,.btn-facebook.disabled:hover,.btn-facebook[disabled],.btn-facebook[disabled].active,.btn-facebook[disabled]:active,.btn-facebook[disabled]:focus,.btn-facebook[disabled]:hover,fieldset[disabled]
.btn-facebook,fieldset[disabled] .btn-facebook.active,fieldset[disabled]
.btn-facebook:active,fieldset[disabled]
.btn-facebook:focus,fieldset[disabled] .btn-facebook:hover {
background-color: #3b5998;
border-color:
rgba(0,0,0,.2)
}
.btn-facebook .badge {
color: #3b5998;
background-color: #fff
}
.btn-flickr {
color: #fff;
background-color: #ff0084;
border-color:
rgba(0,0,0,.2)
}
.btn-flickr.active,.btn-flickr:active,.btn-flickr:focus,.btn-flickr:hover,.open>.dropdown-toggle.btn-flickr
{
color: #fff;
background-color: #cc006a;
border-color:
rgba(0,0,0,.2)
}
.btn-flickr.disabled,.btn-flickr.disabled.active,.btn-flickr.disabled:active,.btn-flickr.disabled:focus,.btn-flickr.disabled:hover,.btn-flickr[disabled],.btn-flickr[disabled].active,.btn-flickr[disabled]:active,.btn-flickr[disabled]:focus,.btn-flickr[disabled]:hover,fieldset[disabled]
.btn-flickr,fieldset[disabled] .btn-flickr.active,fieldset[disabled]
.btn-flickr:active,fieldset[disabled] .btn-flickr:focus,fieldset[disabled]
.btn-flickr:hover {
background-color: #ff0084;
border-color:
rgba(0,0,0,.2)
}
.btn-flickr .badge {
color: #ff0084;
background-color: #fff
}
.btn-foursquare {
color: #fff;
background-color: #f94877;
border-color:
rgba(0,0,0,.2)
}
.btn-foursquare.active,.btn-foursquare:active,.btn-foursquare:focus,.btn-foursquare:hover,.open>.dropdown-toggle.btn-foursquare
{
color: #fff;
background-color: #f71752;
border-color:
rgba(0,0,0,.2)
}
.btn-foursquare.disabled,.btn-foursquare.disabled.active,.btn-foursquare.disabled:active,.btn-foursquare.disabled:focus,.btn-foursquare.disabled:hover,.btn-foursquare[disabled],.btn-foursquare[disabled].active,.btn-foursquare[disabled]:active,.btn-foursquare[disabled]:focus,.btn-foursquare[disabled]:hover,fieldset[disabled]
.btn-foursquare,fieldset[disabled]
.btn-foursquare.active,fieldset[disabled]
.btn-foursquare:active,fieldset[disabled]
.btn-foursquare:focus,fieldset[disabled] .btn-foursquare:hover {
background-color: #f94877;
border-color:
rgba(0,0,0,.2)
}
.btn-foursquare .badge {
color: #f94877;
background-color: #fff
}
.btn-github {
color: #fff;
background-color: #444;
border-color:
rgba(0,0,0,.2)
}
.btn-github.active,.btn-github:active,.btn-github:focus,.btn-github:hover,.open>.dropdown-toggle.btn-github
{
color: #fff;
background-color: #2b2b2b;
border-color:
rgba(0,0,0,.2)
}
.btn-github.disabled,.btn-github.disabled.active,.btn-github.disabled:active,.btn-github.disabled:focus,.btn-github.disabled:hover,.btn-github[disabled],.btn-github[disabled].active,.btn-github[disabled]:active,.btn-github[disabled]:focus,.btn-github[disabled]:hover,fieldset[disabled]
.btn-github,fieldset[disabled] .btn-github.active,fieldset[disabled]
.btn-github:active,fieldset[disabled] .btn-github:focus,fieldset[disabled]
.btn-github:hover {
background-color: #444;
border-color:
rgba(0,0,0,.2)
}
.btn-github .badge {
color: #444;
background-color: #fff
}
.btn-google {
color: #fff;
background-color: #dd4b39;
border-color:
rgba(0,0,0,.2)
}
.btn-google.active,.btn-google:active,.btn-google:focus,.btn-google:hover,.open>.dropdown-toggle.btn-google
{
color: #fff;
background-color: #c23321;
border-color:
rgba(0,0,0,.2)
}
.btn-google.disabled,.btn-google.disabled.active,.btn-google.disabled:active,.btn-google.disabled:focus,.btn-google.disabled:hover,.btn-google[disabled],.btn-google[disabled].active,.btn-google[disabled]:active,.btn-google[disabled]:focus,.btn-google[disabled]:hover,fieldset[disabled]
.btn-google,fieldset[disabled] .btn-google.active,fieldset[disabled]
.btn-google:active,fieldset[disabled] .btn-google:focus,fieldset[disabled]
.btn-google:hover {
background-color: #dd4b39;
border-color:
rgba(0,0,0,.2)
}
.btn-google .badge {
color: #dd4b39;
background-color: #fff
}
.btn-instagram {
color: #fff;
background-color: #3f729b;
border-color:
rgba(0,0,0,.2)
}
.btn-instagram.active,.btn-instagram:active,.btn-instagram:focus,.btn-instagram:hover,.open>.dropdown-toggle.btn-instagram
{
color: #fff;
background-color: #305777;
border-color:
rgba(0,0,0,.2)
}
.btn-instagram.disabled,.btn-instagram.disabled.active,.btn-instagram.disabled:active,.btn-instagram.disabled:focus,.btn-instagram.disabled:hover,.btn-instagram[disabled],.btn-instagram[disabled].active,.btn-instagram[disabled]:active,.btn-instagram[disabled]:focus,.btn-instagram[disabled]:hover,fieldset[disabled]
.btn-instagram,fieldset[disabled] .btn-instagram.active,fieldset[disabled]
.btn-instagram:active,fieldset[disabled]
.btn-instagram:focus,fieldset[disabled] .btn-instagram:hover {
background-color: #3f729b;
border-color:
rgba(0,0,0,.2)
}
.btn-instagram .badge {
color: #3f729b;
background-color: #fff
}
.btn-linkedin {
color: #fff;
background-color: #007bb6;
border-color:
rgba(0,0,0,.2)
}
.btn-linkedin.active,.btn-linkedin:active,.btn-linkedin:focus,.btn-linkedin:hover,.open>.dropdown-toggle.btn-linkedin
{
color: #fff;
background-color: #005983;
border-color:
rgba(0,0,0,.2)
}
.btn-linkedin.active,.btn-linkedin:active,.open>.dropdown-toggle.btn-linkedin
{
background-image:
none
}
.btn-linkedin.disabled,.btn-linkedin.disabled.active,.btn-linkedin.disabled:active,.btn-linkedin.disabled:focus,.btn-linkedin.disabled:hover,.btn-linkedin[disabled],.btn-linkedin[disabled].active,.btn-linkedin[disabled]:active,.btn-linkedin[disabled]:focus,.btn-linkedin[disabled]:hover,fieldset[disabled]
.btn-linkedin,fieldset[disabled] .btn-linkedin.active,fieldset[disabled]
.btn-linkedin:active,fieldset[disabled]
.btn-linkedin:focus,fieldset[disabled] .btn-linkedin:hover {
background-color: #007bb6;
border-color:
rgba(0,0,0,.2)
}
.btn-linkedin .badge {
color: #007bb6;
background-color: #fff
}
.btn-microsoft {
color: #fff;
background-color: #2672ec;
border-color:
rgba(0,0,0,.2)
}
.btn-microsoft.active,.btn-microsoft:active,.btn-microsoft:focus,.btn-microsoft:hover,.open>.dropdown-toggle.btn-microsoft
{
color: #fff;
background-color: #125acd;
border-color:
rgba(0,0,0,.2)
}
.btn-microsoft.disabled,.btn-microsoft.disabled.active,.btn-microsoft.disabled:active,.btn-microsoft.disabled:focus,.btn-microsoft.disabled:hover,.btn-microsoft[disabled],.btn-microsoft[disabled].active,.btn-microsoft[disabled]:active,.btn-microsoft[disabled]:focus,.btn-microsoft[disabled]:hover,fieldset[disabled]
.btn-microsoft,fieldset[disabled] .btn-microsoft.active,fieldset[disabled]
.btn-microsoft:active,fieldset[disabled]
.btn-microsoft:focus,fieldset[disabled] .btn-microsoft:hover {
background-color: #2672ec;
border-color:
rgba(0,0,0,.2)
}
.btn-microsoft .badge {
color: #2672ec;
background-color: #fff
}
.btn-openid {
color: #fff;
background-color: #f7931e;
border-color:
rgba(0,0,0,.2)
}
.btn-openid.active,.btn-openid:active,.btn-openid:focus,.btn-openid:hover,.open>.dropdown-toggle.btn-openid
{
color: #fff;
background-color: #da7908;
border-color:
rgba(0,0,0,.2)
}
.btn-openid.disabled,.btn-openid.disabled.active,.btn-openid.disabled:active,.btn-openid.disabled:focus,.btn-openid.disabled:hover,.btn-openid[disabled],.btn-openid[disabled].active,.btn-openid[disabled]:active,.btn-openid[disabled]:focus,.btn-openid[disabled]:hover,fieldset[disabled]
.btn-openid,fieldset[disabled] .btn-openid.active,fieldset[disabled]
.btn-openid:active,fieldset[disabled] .btn-openid:focus,fieldset[disabled]
.btn-openid:hover {
background-color: #f7931e;
border-color:
rgba(0,0,0,.2)
}
.btn-openid .badge {
color: #f7931e;
background-color: #fff
}
.btn-pinterest {
color: #fff;
background-color: #cb2027;
border-color:
rgba(0,0,0,.2)
}
.btn-pinterest.active,.btn-pinterest:active,.btn-pinterest:focus,.btn-pinterest:hover,.open>.dropdown-toggle.btn-pinterest
{
color: #fff;
background-color: #9f191f;
border-color:
rgba(0,0,0,.2)
}
.btn-pinterest.disabled,.btn-pinterest.disabled.active,.btn-pinterest.disabled:active,.btn-pinterest.disabled:focus,.btn-pinterest.disabled:hover,.btn-pinterest[disabled],.btn-pinterest[disabled].active,.btn-pinterest[disabled]:active,.btn-pinterest[disabled]:focus,.btn-pinterest[disabled]:hover,fieldset[disabled]
.btn-pinterest,fieldset[disabled] .btn-pinterest.active,fieldset[disabled]
.btn-pinterest:active,fieldset[disabled]
.btn-pinterest:focus,fieldset[disabled] .btn-pinterest:hover {
background-color: #cb2027;
border-color:
rgba(0,0,0,.2)
}
.btn-pinterest .badge {
color: #cb2027;
background-color: #fff
}
.btn-reddit {
color: #000;
background-color: #eff7ff;
border-color:
rgba(0,0,0,.2)
}
.btn-reddit.active,.btn-reddit:active,.btn-reddit:focus,.btn-reddit:hover,.open>.dropdown-toggle.btn-reddit
{
color: #000;
background-color: #bcddff;
border-color:
rgba(0,0,0,.2)
}
.btn-reddit.disabled,.btn-reddit.disabled.active,.btn-reddit.disabled:active,.btn-reddit.disabled:focus,.btn-reddit.disabled:hover,.btn-reddit[disabled],.btn-reddit[disabled].active,.btn-reddit[disabled]:active,.btn-reddit[disabled]:focus,.btn-reddit[disabled]:hover,fieldset[disabled]
.btn-reddit,fieldset[disabled] .btn-reddit.active,fieldset[disabled]
.btn-reddit:active,fieldset[disabled] .btn-reddit:focus,fieldset[disabled]
.btn-reddit:hover {
background-color: #eff7ff;
border-color:
rgba(0,0,0,.2)
}
.btn-reddit .badge {
color: #eff7ff;
background-color: #000
}
.btn-soundcloud {
color: #fff;
background-color: #f50;
border-color:
rgba(0,0,0,.2)
}
.btn-soundcloud.active,.btn-soundcloud:active,.btn-soundcloud:focus,.btn-soundcloud:hover,.open>.dropdown-toggle.btn-soundcloud
{
color: #fff;
background-color: #c40;
border-color:
rgba(0,0,0,.2)
}
.btn-soundcloud.disabled,.btn-soundcloud.disabled.active,.btn-soundcloud.disabled:active,.btn-soundcloud.disabled:focus,.btn-soundcloud.disabled:hover,.btn-soundcloud[disabled],.btn-soundcloud[disabled].active,.btn-soundcloud[disabled]:active,.btn-soundcloud[disabled]:focus,.btn-soundcloud[disabled]:hover,fieldset[disabled]
.btn-soundcloud,fieldset[disabled]
.btn-soundcloud.active,fieldset[disabled]
.btn-soundcloud:active,fieldset[disabled]
.btn-soundcloud:focus,fieldset[disabled] .btn-soundcloud:hover {
background-color: #f50;
border-color:
rgba(0,0,0,.2)
}
.btn-soundcloud .badge {
color: #f50;
background-color: #fff
}
.btn-tumblr {
color: #fff;
background-color: #2c4762;
border-color:
rgba(0,0,0,.2)
}
.btn-tumblr.active,.btn-tumblr:active,.btn-tumblr:focus,.btn-tumblr:hover,.open>.dropdown-toggle.btn-tumblr
{
color: #fff;
background-color: #1c2d3f;
border-color:
rgba(0,0,0,.2)
}
.btn-tumblr.disabled,.btn-tumblr.disabled.active,.btn-tumblr.disabled:active,.btn-tumblr.disabled:focus,.btn-tumblr.disabled:hover,.btn-tumblr[disabled],.btn-tumblr[disabled].active,.btn-tumblr[disabled]:active,.btn-tumblr[disabled]:focus,.btn-tumblr[disabled]:hover,fieldset[disabled]
.btn-tumblr,fieldset[disabled] .btn-tumblr.active,fieldset[disabled]
.btn-tumblr:active,fieldset[disabled] .btn-tumblr:focus,fieldset[disabled]
.btn-tumblr:hover {
background-color: #2c4762;
border-color:
rgba(0,0,0,.2)
}
.btn-tumblr .badge {
color: #2c4762;
background-color: #fff
}
.btn-twitter {
color: #fff;
background-color: #55acee;
border-color:
rgba(0,0,0,.2)
}
.btn-twitter.active,.btn-twitter:active,.btn-twitter:focus,.btn-twitter:hover,.open>.dropdown-toggle.btn-twitter
{
color: #fff;
background-color: #2795e9;
border-color:
rgba(0,0,0,.2)
}
.btn-twitter.disabled,.btn-twitter.disabled.active,.btn-twitter.disabled:active,.btn-twitter.disabled:focus,.btn-twitter.disabled:hover,.btn-twitter[disabled],.btn-twitter[disabled].active,.btn-twitter[disabled]:active,.btn-twitter[disabled]:focus,.btn-twitter[disabled]:hover,fieldset[disabled]
.btn-twitter,fieldset[disabled] .btn-twitter.active,fieldset[disabled]
.btn-twitter:active,fieldset[disabled]
.btn-twitter:focus,fieldset[disabled] .btn-twitter:hover {
background-color: #55acee;
border-color:
rgba(0,0,0,.2)
}
.btn-twitter .badge {
color: #55acee;
background-color: #fff
}
.btn-vimeo {
color: #fff;
background-color: #1ab7ea;
border-color:
rgba(0,0,0,.2)
}
.btn-vimeo.active,.btn-vimeo:active,.btn-vimeo:focus,.btn-vimeo:hover,.open>.dropdown-toggle.btn-vimeo
{
color: #fff;
background-color: #1295bf;
border-color:
rgba(0,0,0,.2)
}
.btn-vimeo.disabled,.btn-vimeo.disabled.active,.btn-vimeo.disabled:active,.btn-vimeo.disabled:focus,.btn-vimeo.disabled:hover,.btn-vimeo[disabled],.btn-vimeo[disabled].active,.btn-vimeo[disabled]:active,.btn-vimeo[disabled]:focus,.btn-vimeo[disabled]:hover,fieldset[disabled]
.btn-vimeo,fieldset[disabled] .btn-vimeo.active,fieldset[disabled]
.btn-vimeo:active,fieldset[disabled] .btn-vimeo:focus,fieldset[disabled]
.btn-vimeo:hover {
background-color: #1ab7ea;
border-color:
rgba(0,0,0,.2)
}
.btn-vimeo .badge {
color: #1ab7ea;
background-color: #fff
}
.btn-vk {
color: #fff;
background-color: #587ea3;
border-color:
rgba(0,0,0,.2)
}
.btn-vk.active,.btn-vk:active,.btn-vk:focus,.btn-vk:hover,.open>.dropdown-toggle.btn-vk
{
color: #fff;
background-color: #466482;
border-color:
rgba(0,0,0,.2)
}
.btn-vk.disabled,.btn-vk.disabled.active,.btn-vk.disabled:active,.btn-vk.disabled:focus,.btn-vk.disabled:hover,.btn-vk[disabled],.btn-vk[disabled].active,.btn-vk[disabled]:active,.btn-vk[disabled]:focus,.btn-vk[disabled]:hover,fieldset[disabled]
.btn-vk,fieldset[disabled] .btn-vk.active,fieldset[disabled]
.btn-vk:active,fieldset[disabled] .btn-vk:focus,fieldset[disabled]
.btn-vk:hover {
background-color: #587ea3;
border-color:
rgba(0,0,0,.2)
}
.btn-vk .badge {
color: #587ea3;
background-color: #fff
}
.btn-whatsapp {
color: #fff;
background-color: #04aa24;
border-color:
rgba(0,0,0,.2)
}
.btn-whatsapp.active,.btn-whatsapp:active,.btn-whatsapp:focus,.btn-whatsapp:hover,.open>.dropdown-toggle.btn-whatsapp
{
color: #fff;
background-color: #3c983b;
border-color:
rgba(0,0,0,.2)
}
.btn-whatsapp.disabled,.btn-whatsapp.disabled.active,.btn-whatsapp.disabled:active,.btn-whatsapp.disabled:focus,.btn-whatsapp.disabled:hover,.btn-whatsapp[disabled],.btn-whatsapp[disabled].active,.btn-whatsapp[disabled]:active,.btn-whatsapp[disabled]:focus,.btn-whatsapp[disabled]:hover,fieldset[disabled]
.btn-whatsapp,fieldset[disabled] .btn-whatsapp.active,fieldset[disabled]
.btn-whatsapp:active,fieldset[disabled]
.btn-whatsapp:focus,fieldset[disabled] .btn-whatsapp:hover {
background-color: #04aa24;
border-color:
rgba(0,0,0,.2)
}
.btn-whatsapp .badge {
color: #04aa24;
background-color: #fff
}
.btn-yahoo {
color: #fff;
background-color: #720e9e;
border-color:
rgba(0,0,0,.2)
}
.btn-yahoo.active,.btn-yahoo:active,.btn-yahoo:focus,.btn-yahoo:hover,.open>.dropdown-toggle.btn-yahoo
{
color: #fff;
background-color: #500a6f;
border-color:
rgba(0,0,0,.2)
}
.btn-yahoo.disabled,.btn-yahoo.disabled.active,.btn-yahoo.disabled:active,.btn-yahoo.disabled:focus,.btn-yahoo.disabled:hover,.btn-yahoo[disabled],.btn-yahoo[disabled].active,.btn-yahoo[disabled]:active,.btn-yahoo[disabled]:focus,.btn-yahoo[disabled]:hover,fieldset[disabled]
.btn-yahoo,fieldset[disabled] .btn-yahoo.active,fieldset[disabled]
.btn-yahoo:active,fieldset[disabled] .btn-yahoo:focus,fieldset[disabled]
.btn-yahoo:hover {
background-color: #720e9e;
border-color:
rgba(0,0,0,.2)
}
.btn-yahoo .badge {
color: #720e9e;
background-color: #fff
}
/* -- */
/* EXTRAS */
/*
------------------------------- */
/* == margins == */
.ml0
{
margin-left: 0!important;
}
.mr0 {
margin-right:
0!important;
}
.mlr0 {
margin-left: 0!important;
margin-right:
0!important;
}
.mt0 {
margin-top: 0!important;
}
.mb0
{
margin-bottom: 0!important;
}
.mtb0 {
margin-top:
0!important;
margin-bottom: 0!important;
}
.ml5 {
margin-left:
5px!important;
}
.mr5 {
margin-right: 5px!important;
}
.mlr5
{
margin-left: 5px!important;
margin-right: 5px!important;
}
.mt5
{
margin-top: 5px!important;
}
.mb5 {
margin-bottom:
5px!important;
}
.mtb5 {
margin-top: 5px!important;
margin-bottom:
5px!important;
}
.ml10 {
margin-left: 10px!important;
}
.mr10
{
margin-right: 10px!important;
}
.mlr10 {
margin-left:
10px!important;
margin-right: 10px!important;
}
.mt10 {
margin-top:
10px!important;
}
.mb10 {
margin-bottom: 10px!important;
}
.mtb10
{
margin-top: 10px!important;
margin-bottom: 10px!important;
}
.ml20
{
margin-left: 20px!important;
}
.mr20 {
margin-right:
20px!important;
}
.mlr20 {
margin-left: 20px!important;
margin-right:
20px!important;
}
.mt20 {
margin-top: 20px!important;
}
.mb20
{
margin-bottom: 20px!important;
}
.mtb20 {
margin-top:
20px!important;
margin-bottom: 20px!important;
}
.ml25 {
margin-left:
25px!important;
}
.mr25 {
margin-right: 25px!important;
}
.mlr25
{
margin-left: 25px!important;
margin-right: 25px!important;
}
.mt25
{
margin-top: 25px!important;
}
.mb25 {
margin-bottom:
25px!important;
}
.mtb25 {
margin-top: 25px!important;
margin-bottom:
25px!important;
}
.ml30 {
margin-left: 30px!important;
}
.mr30
{
margin-right: 30px!important;
}
.mlr30 {
margin-left:
30px!important;
margin-right: 30px!important;
}
.mt30 {
margin-top:
30px!important;
}
.mb30 {
margin-bottom: 30px!important;
}
.mtb30
{
margin-top: 30px!important;
margin-bottom: 30px!important;
}
/* --
*/
/* == paddings == */
.pl0 {
padding-left: 0px!important;
}
.pr0
{
padding-right: 0px!important;
}
.plr0 {
padding-left:
0px!important;
padding-right: 0px!important;
}
.pt0 {
padding-top:
0px!important;
}
.pb0 {
padding-bottom: 0px!important;
}
.ptb0
{
padding-top: 0px!important;
padding-bottom: 0px!important;
}
.pl5
{
padding-left: 5px!important;
}
.pr5 {
padding-right:
5px!important;
}
.plr5 {
padding-left: 5px!important;
padding-right:
5px!important;
}
.pt5 {
padding-top: 5px!important;
}
.pb5
{
padding-bottom: 5px!important;
}
.ptb5 {
padding-top:
5px!important;
padding-bottom: 5px!important;
}
.pl10 {
padding-left:
10px!important;
}
.pr10 {
padding-right: 10px!important;
}
.plr10
{
padding-left: 10px!important;
padding-right:
10px!important;
}
.pt10 {
padding-top: 10px!important;
}
.pb10
{
padding-bottom: 10px!important;
}
.ptb10 {
padding-top:
10px!important;
padding-bottom: 10px!important;
}
.pl20
{
padding-left: 20px!important;
}
.pr20 {
padding-right:
20px!important;
}
.plr20 {
padding-left:
20px!important;
padding-right: 20px!important;
}
.pt20 {
padding-top:
20px!important;
}
.pb20 {
padding-bottom: 20px!important;
}
.ptb20
{
padding-top: 20px!important;
padding-bottom:
20px!important;
}
.pl25 {
padding-left: 25px!important;
}
.pr25
{
padding-right: 25px!important;
}
.plr25 {
padding-left:
25px!important;
padding-right: 25px!important;
}
.pt25 {
padding-top:
25px!important;
}
.pb25 {
padding-bottom: 25px!important;
}
.ptb25
{
padding-top: 25px!important;
padding-bottom:
25px!important;
}
.pl30 {
padding-left: 30px!important;
}
.pr30
{
padding-right: 30px!important;
}
.plr30 {
padding-left:
30px!important;
padding-right: 30px!important;
}
.pt30 {
padding-top:
30px!important;
}
.pb30 {
padding-bottom: 30px!important;
}
.ptb30
{
padding-top: 30px!important;
padding-bottom: 30px!important;
}
/*
-- */
/* == text == */
.text-link {
color:
var(--link-color);
}
.text-link:hover {
cursor:
pointer;
text-decoration: underline;
}
.text-underline:hover
{
cursor: pointer;
text-decoration:
underline;
}
.text-clickable:hover {
cursor:
pointer;
}
.text-clickable:hover span {
text-decoration:
underline;
}
.text-active {
color:
#1e8bd2!important;
}
.text-readable {
font-size: 1.3em;
line-height:
1.8em;
}
.text-lg {
font-size: 1.3em;
}
.text-xlg {
font-size:
2.3em;
font-weight: 700;
}
.red {
color: red;
}
.green {
color:
green;
}
.yellow {
color: #ebba16;
}
/* -- */
/* == cursor ==
*/
.pointer {
cursor: pointer;
}
/* == x == */
.x-notifier
{
background: #ffffcd!important;
}
body.night-mode .x-notifier
{
background: #000000!important;
}
.x-hidden {
display: none;
}
/*
-- */
/* OFFCANVAS */
/* -------------------------------
*/
@media (max-width: 767px) {
.offcanvas {
position: relative;
overflow: hidden;
}
.offcanvas.active {
overflow:
visible;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s
ease-out;
}
.offcanvas .offcanvas-sidebar {
position:
absolute!important;
top: 0;
left: -80%;
width: 80%;
height:
100%;
z-index: 100;
-webkit-transition: all 0.25s
ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s
ease-out;
}
.offcanvas.active .offcanvas-sidebar {
left:
0;
}
.offcanvas .offcanvas-mainbar {
left: 0;
-webkit-transition:
all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition:
all 0.25s ease-out;
}
.offcanvas.active .offcanvas-mainbar {
left:
80%;
}
}