/*
 * Theme Name: Vikinger - BuddyPress Social Community
 * Theme URI: https://odindesignthemes.com/vikinger-theme/
 * Author: Odin Design Themes
 * Author URI: https://themeforest.net/user/odin_design
 * Description: The next generation WordPress+Buddypress social community! We carefully designed this theme for you to have all you need to build an incredible community with full profiles, reactions, groups, badges, quests, ranks, credits and much more to come!
 * Version: 2.0.0
 * License: https://themeforest.net/licenses/
 * License URI: https://themeforest.net/licenses/
 * Text Domain: vikinger
*/
/*------------------------------------------------------------------
[Table of contents]

1. Variables
2. Reset
3. Form
  3.1. Form - Media Queries
4. Icon
5. Content Grid
  5.1. Content Grid - Media Queries
6. Grid
  6.1. Grid - Media Queries
7. General
  7.1. General - Media Queries
8. Button
9. Social Links
10. Action Request List
  10.1. Action Request List - Media Queries
11. Burger Icon
12. Action List
13. User Stats
14. Badge List
15. Tag List
16. XM Tooltip
17. User Short Description
18. User Preview Widget
19. Slider Control
20. Slider Roster
21. Tag Sticker
22. Text Sticker
23. Simple Dropdown
24. Information Line List
25. Information Block List
26. View Actions
27. Play Button
28. Media Link Preview
29. Iframe Wrap
30. Video Wrap
31. Popup Picture
  31.1. Popup Picture - Media Queries
32. Meta Line
33. Reaction Options
  33.1. Reaction Options - Media Queries
34. Post Options
  34.1. Post Options - Media Queries
35. Post Settings
36. Page Loader
37. Reaction Count List
38. Quick Post
  38.1. Quick Post - Media Queries
39. Mention List
40. Picture Collage
41. Stats Decoration
42. Sidebar Box
43. Sidebar Menu
44. Sidebar Menu Header
45. Sidebar Menu Body
46. Upload Box
47. Switch Option List
  47.1. Switch Option List - Media Queries
48. Notification Box List
  48.1. Notification Box List - Media Queries
49. Create Entity Box
50. Notification Section
51. Quick Filters
  51.1. Quick Filters - Media Queries
52. Reaction Box
53. Uploadable Item List
54. Message Box
55. Alert Box
  55.1. Alert Box - Media Queries
56. Alert Line
57. Item List Options
58. Point Item List
59. Point Reward Box
  59.1. Point Reward Box - Media Queries
60. Point Item Box
61. Point Item Line List
62. Achievement Item Box
63. Checklist Items
64. Social Items
65. Account Hub Content
66. Mention Block
67. Author Preview
68. Widget Box
  68.1. Widget Box - Media Queries
69. Loader Bars
70. Loader Spinner
71. Error Section
  71.1. Error Section - Media Queries
72. Picture
73. Picture Item List
74. Progress Stat
  74.1. Progress Stat - Media Queries
75. User Avatar
76. User Avatar Circle
77. User Status List
78. Cart Preview Total
79. Dropdown Box
80. Dropdown Navigation
81. Navigation Widget
82. Chat Widget
  82.1. Chat Widget - Media Queries
83. Profile Header
  83.1. Profile Header - Media Queries
84. Post Preview
  84.1. Post Preview - Media Queries
85. Post Peek
86. Post Comment
  86.1. Post Comment - Media Queries
87. Post Open
  87.1. Post Open - Media Queries
88. Page Open
89. Video Box
90. Content Actions
  90.1. Content Actions - Media Queries
91. Reaction Item List
92. User Avatar List
93. User Preview
  93.1. User Preview - Media Queries
94. Photo Preview
95. Popup Box Body
  95.1. Popup Box Body - Media Queries
96. Achievement Preview List
97. Tab Container
98. XM Popup Container
99. Header
  99.1. Header - Media Queries
100. Sidemenu Trigger
101. Navigation
102. Menu Main
103. Menu
104. Section Navigation
105. Section Menu
106. Menu Wide
107. Sidebar
108. Section
109. Section Header
110. Section Filters Bar
  110.1. Section Filters Bar - Media Queries
111. Section Pager Bar
112. Section Results Text
  112.1. Section Results Text - Media Queries
113. Section Banner
  113.1. Section Banner - Media Queries
114. Footer
  114.1. Footer - Media Queries
115. Navigation Section
116. Forum
  116.1. Forum - bbPress
  116.2. Forum - Media Queries
-------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
/**
 * 1. Variables
 */
:root {
  /**
   * Font
   */
  --vikinger-font-scale: 1;
  --vikinger-font-size-base: calc(16 / var(--vikinger-font-scale));

  /**
   * Color
   */
  --vikinger-color-input-border-error: #f9515c;

  /**
   * Grid
   */
  --vikinger-grid-width: 1184;
  --vikinger-grid-9-width: 884;

  --vikinger-column-width: 84;
  --vikinger-column-gap: 16;

  --vikinger-columns-2-width: calc((var(--vikinger-column-width) * 2) + var(--vikinger-column-gap));
  --vikinger-columns-3-width: calc((var(--vikinger-column-width) * 3) + (var(--vikinger-column-gap) * 2));
  --vikinger-columns-4-width: calc((var(--vikinger-column-width) * 4) + (var(--vikinger-column-gap) * 3));
  --vikinger-columns-6-width: calc((var(--vikinger-column-width) * 6) + (var(--vikinger-column-gap) * 5));
  --vikinger-columns-8-width: calc((var(--vikinger-column-width) * 8) + (var(--vikinger-column-gap) * 7));
  --vikinger-columns-9-width: calc((var(--vikinger-column-width) * 9) + (var(--vikinger-column-gap) * 8));

  --vikinger-columns-2-width-px: calc(var(--vikinger-columns-2-width) * 1px);
  --vikinger-columns-3-width-px: calc(var(--vikinger-columns-3-width) * 1px);
  --vikinger-columns-4-width-px: calc(var(--vikinger-columns-4-width) * 1px);
  --vikinger-columns-6-width-px: calc(var(--vikinger-columns-6-width) * 1px);
  --vikinger-columns-8-width-px: calc(var(--vikinger-columns-8-width) * 1px);
  --vikinger-columns-9-width-px: calc(var(--vikinger-columns-9-width) * 1px);

  --vikinger-grid-columns-2-width: calc((var(--vikinger-columns-2-width) / var(--vikinger-grid-width)) * 100%);
  --vikinger-grid-columns-3-width: calc((var(--vikinger-columns-3-width) / var(--vikinger-grid-width)) * 100%);
  --vikinger-grid-columns-4-width: calc((var(--vikinger-columns-4-width) / var(--vikinger-grid-width)) * 100%);
  --vikinger-grid-columns-6-width: calc((var(--vikinger-columns-6-width) / var(--vikinger-grid-width)) * 100%);
  --vikinger-grid-columns-8-width: calc((var(--vikinger-columns-8-width) / var(--vikinger-grid-width)) * 100%);
  --vikinger-grid-columns-9-width: calc((var(--vikinger-columns-9-width) / var(--vikinger-grid-width)) * 100%);

  --vikinger-grid-columns-3-9-width: calc((var(--vikinger-columns-3-width) / var(--vikinger-grid-9-width)) * 100%);
  --vikinger-grid-columns-6-9-width: calc((var(--vikinger-columns-6-width) / var(--vikinger-grid-9-width)) * 100%);
}

/*------------------------------------------------------------------*/
/**
 * 2. Reset
 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  box-sizing: border-box;
}

*::before,
*::after {
  display: block;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
}

select {
  appearance: none;
}

/*------------------------------------------------------------------*/
/**
 * 3. Form
 */
label,
input,
textarea,
select,
button {
  font-family: var(--vikinger-font-family-primary);
}

label {
  display: block;
  margin: 0;
  color: var(--color-text);
  line-height: 1em;
}

label.label-disabled {
  opacity: .5;
}

label .label-required {
  color: var(--color-secondary);
  font-weight: 700;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select,
button {
  width: 100%;
  border-radius: 12px;
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
  background-color: var(--color-box-background);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  transition: border-color .2s ease-in-out;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
  border-color: var(--color-secondary);
}

input[type="text"].input-error,
input[type="password"].input-error,
input[type="email"].input-error,
input[type="tel"].input-error,
input[type="search"].input-error,
input[type="number"].input-error,
textarea.input-error,
select.input-error {
  border-color: var(--vikinger-color-input-border-error);
}

input[type="text"].input-disabled,
input[type="password"].input-disabled,
input[type="email"].input-disabled,
input[type="tel"].input-disabled,
input[type="search"].input-disabled,
input[type="number"].input-disabled,
textarea.input-disabled,
select.input-disabled {
  opacity: .5;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"] {
  height: 54px;
  padding: 0 18px;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="search"]::placeholder,
input[type="number"]::placeholder {
  color: var(--color-text-alt-2);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

textarea {
  padding: 14px 18px;
  resize: none;
  word-break: break-all;
}

textarea::placeholder {
  color: var(--color-text-alt-2);
  font-weight: 600;
}

/*--------------
    FORM
--------------*/
.form {
  width: 100%;
}

.form.disabled {
  opacity: .5;
}

.form + .button {
  margin-top: 40px;
}

.form.padded {
  padding: 0 28px;
}

.form.form-error input[type="text"],
.form.form-error input[type="password"] {
  border: 1px solid var(--vikinger-color-input-border-error);
}

.form.form-error .form-input.dark input[type="text"],
.form.form-error .form-input.dark input[type="password"] {
  border: 1px solid var(--vikinger-color-input-border-error);
}

/*------------------
    FORM ROW
------------------*/
.form-row {
  width: 100%;
}

.form-row + .form-row {
  margin-top: 28px;
}

.form-row.space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-row.space-between .form-item {
  width: auto;
}

.form-row.split {
  display: flex;
  flex-wrap: nowrap;
}

.form-row.split .form-item {
  margin-right: 16px;
}

.form-row.split .form-item:last-child {
  margin-right: 0;
}

.form-row.split .form-item > * {
  margin-bottom: 28px;
}

.form-row.split .form-item > *:last-child {
  margin-bottom: 0;
}

/*------------------
    FORM ITEM
------------------*/
.form-item {
  width: 100%;
  position: relative;
}

.form-item.auto-width {
  width: auto;
}

.form-item.centered {
  display: flex;
  align-items: center;
}

.form-item.aligned-right {
  display: flex;
  justify-content: flex-end;
}

.form-item.split {
  display: flex;
}

.form-item.split.medium > * {
  margin-right: 16px;
}

.form-item.split.medium > *:last-child {
  margin-right: 0;
}

.form-item.split > * {
  width: 100%;
  margin-right: 12px;
}

.form-item.split > *:last-child {
  margin-right: 0;
}

/*-------------------
    FORM INPUT
-------------------*/
.form-input {
  position: relative;
}

.form-input.with-button input {
  padding-right: 82px;
}

.form-input.dark input[type="text"],
.form-input.dark input[type="password"],
.form-input.dark textarea {
  border: none;
  background-color: var(--color-header-input-background);
  color: var(--color-header-text);
}

.form-input.dark input[type="text"]::placeholder,
.form-input.dark input[type="password"]::placeholder,
.form-input.dark textarea::placeholder {
  color: var(--color-header-input-placeholder);
  opacity: 1;
}

.form-input.social-input .social-link {
  position: absolute;
  top: 4px;
  left: 4px;
  pointer-events: none;
}

.form-input.social-input input {
  padding-left: 64px;
}

.form-input.social-input label {
  left: 64px;
}

.form-input.social-input.active label {
  left: 58px;
}

.form-input.currency-decorated::before {
  content: '$';
  color: var(--color-primary-dark);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  position: absolute;
  top: 12px;
  left: 22px;
  pointer-events: none;
}

.form-input.currency-decorated input {
  padding-left: 32px;
}

.form-input.required input,
.form-input.required textarea {
  border-color: var(--color-tertiary);
}

.form-input.small label,
.form-input.small input,
.form-input.small textarea {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.form-input.small label {
  top: 16px;
}

.form-input.small input {
  height: 48px;
}

.form-input.small textarea {
  height: 100px;
}

.form-input.small button {
  width: 64px;
  position: absolute;
  top: 0;
  right: 0;
}

.form-input.full {
  height: 100%;
}

.form-input.full textarea {
  height: 100%;
}

.form-input.mid-textarea textarea {
  height: 124px;
}

.form-input.medium-textarea textarea {
  height: 160px;
}

.form-input.active label,
.form-input.active legend {
  background-color: var(--color-box-background);
  padding: 0 6px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  top: -6px;
  left: 12px;
}

.form-input label,
.form-input legend {
  color: var(--color-text-alt-2);
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 600;
  line-height: 1em;
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  transition: all .3s ease-in-out;
  pointer-events: none;
}

/*-------------------
    FORM TITLE
-------------------*/
.form-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

/*----------------------
    FORM TEXTAREA
----------------------*/
.form-textarea {
  position: relative;
}

.form-textarea.small label {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  top: 16px;
  left: 20px;
}

.form-textarea.small textarea {
  padding: 14px 18px;
}

.form-textarea.small.active label {
  top: -6px;
  left: 12px;
}

.form-textarea label {
  color: var(--color-text-alt-2);
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 600;
  position: absolute;
  top: 26px;
  left: 28px;
  z-index: 2;
  transition: all .3s ease-in-out;
  pointer-events: none;
}

.form-textarea textarea {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  padding: 26px 28px 0;
  overflow: hidden;
}

.form-textarea.active label {
  background-color: var(--color-box-background);
  padding: 0 6px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  top: -6px;
  left: 20px;
}

.form-textarea-shadow {
  width: 100%;
  height: 100%;
  padding: 26px 28px 0;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 18px;
  word-break: break-all;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  visibility: hidden;
}

.form-textarea-shadow.small {
  padding: 14px 18px;
}

.form-textarea-footer {
  display: flex;
  justify-content: flex-end;
}

.form-textarea-footer .button {
  padding: 0 30px;
}

.form-textarea-limit {
  display: flex;
  justify-content: flex-end;
  height: 40px;
}

.form-textarea-limit.small {
  height: 20px;
}

.form-textarea-limit.small .form-textarea-limit-text {
  margin-top: 4px;
  padding: 0 18px;
}

.form-textarea-limit .form-textarea-limit-text {
  margin-top: 10px;
  padding: 0 28px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  opacity: .6;
}

/*----------------------
    FORM SELECT
----------------------*/
.form-select-wrap {
  display: flex;
}

.form-select-wrap .form-select {
  margin-right: 12px;
}

.form-select-wrap .form-select:last-child {
  margin-right: 0;
}

.form-select {
  width: 100%;
  height: 48px;
  position: relative;
}

.form-select.v2 {
  width: auto;
  height: auto;
}

.form-select.v2 select {
  width: auto;
  height: auto;
  padding-right: 20px;
  border: none;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
}

.form-select.v2 .form-select-icon {
  top: 10px;
  right: 0;
}

.form-select select {
  width: 100%;
  height: 100%;
  padding: 0 40px 0 20px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  cursor: pointer;
}

.form-select .form-select-icon {
  fill: var(--color-icon-highlighted);
  transform: rotate(90deg);
  position: absolute;
  top: 20px;
  right: 20px;
  pointer-events: none;
}

.form-select label {
  padding: 0 6px;
  background-color: var(--color-box-background);
  color: var(--color-text-alt-2);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 600;
  position: absolute;
  top: -8px;
  left: 12px;
  pointer-events: none;
}

/*------------------------
    CHECKBOX WRAP
------------------------*/
.checkbox-wrap {
  position: relative;
}

.checkbox-wrap .checkbox-info {
  margin-top: 12px;
}

.checkbox-wrap .checkbox-info .checkbox-info-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.4285714286em;
}

.checkbox-wrap input[type="checkbox"],
.checkbox-wrap input[type="radio"] {
  display: none;
}

.checkbox-wrap input[type="checkbox"]:checked + .checkbox-box,
.checkbox-wrap input[type="radio"]:checked + .checkbox-box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-wrap input[type="checkbox"]:checked + .checkbox-box.round,
.checkbox-wrap input[type="radio"]:checked + .checkbox-box.round {
  border: 6px solid var(--color-primary);
  background-color: var(--color-box-background);
}

.checkbox-wrap input[type="checkbox"]:checked + .checkbox-box .icon-cross,
.checkbox-wrap input[type="radio"]:checked + .checkbox-box .icon-cross {
  fill: var(--color-box-background);
}

.checkbox-wrap label {
  padding-left: 34px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 22px;
  cursor: pointer;
}

.checkbox-wrap .checkbox-box {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

.checkbox-wrap.small input[type="checkbox"],
.checkbox-wrap.small input[type="radio"] {
  display: none;
}

.checkbox-wrap.small input[type="checkbox"]:checked + .checkbox-box.round,
.checkbox-wrap.small input[type="radio"]:checked + .checkbox-box.round {
  border: 5px solid var(--color-primary);
}

.checkbox-wrap.small label {
  padding-left: 24px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 16px;
}

.checkbox-wrap.small .checkbox-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.checkbox-wrap.small .checkbox-box.round {
  border-radius: 50%;
}

.checkbox-wrap.small .checkbox-box .icon-cross {
  width: 8px;
  height: 8px;
}

.checkbox-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-box-background);
  transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}

.checkbox-box.round {
  border-radius: 50%;
}

.checkbox-box.small {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.checkbox-box.small .icon-cross {
  width: 8px;
  height: 8px;
}

.checkbox-box.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-box.active .icon-cross {
  fill: var(--color-box-background);
}

.checkbox-box .icon-cross {
  fill: transparent;
  transition: fill .2s ease-in-out;
}

/*----------------------------
    INTERACTIVE INPUT
----------------------------*/
.interactive-input {
  width: 100%;
  height: 52px;
  position: relative;
}

.interactive-input.dark input {
  border: none;
  background-color: var(--color-header-input-background);
  color: var(--color-header-text);
}

.interactive-input.dark input::placeholder {
  color: var(--color-header-input-placeholder);
  opacity: 1;
}

.interactive-input.dark .interactive-input-icon-wrap .interactive-input-icon {
  fill: var(--color-header-icon);
}

.interactive-input.dark .interactive-input-action:hover .interactive-input-action-icon {
  fill: var(--color-header-icon-hover);
}

.interactive-input.dark .interactive-input-action .interactive-input-action-icon {
  fill: var(--color-header-icon);
}

.interactive-input.small {
  height: 48px;
}

.interactive-input.interactive-input-actionable .interactive-input-action {
  display: none;
}

.interactive-input.interactive-input-actionable.active .interactive-input-action {
  display: -ms-flexbox;
  display: flex;
}

.interactive-input.interactive-input-actionable.active .interactive-input-icon {
  display: none;
}

.interactive-input .form {
  height: 100%;
}

.interactive-input input {
  height: 100%;
  padding-right: 60px;
}

.interactive-input .loader-spinner-wrap {
  position: absolute;
  top: 17px;
  right: 20px;
}

.interactive-input .interactive-input-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}

.interactive-input .interactive-input-icon-wrap.actionable {
  pointer-events: all;
}

.interactive-input .interactive-input-icon-wrap.actionable .interactive-input-icon {
  cursor: pointer;
}

.interactive-input .interactive-input-icon-wrap.actionable .interactive-input-icon:hover {
  fill: var(--color-text);
  opacity: 1;
}

.interactive-input .interactive-input-icon-wrap .interactive-input-icon {
  fill: var(--color-icon);
  opacity: .6;
  transition: fill .2s ease-in-out, opacity .2s ease-in-out;
}

.interactive-input .interactive-input-action {
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.interactive-input .interactive-input-action:hover .interactive-input-action-icon {
  fill: var(--color-text);
  opacity: 1;
}

.interactive-input .interactive-input-action .interactive-input-action-icon {
  fill: var(--color-icon);
  opacity: .6;
  pointer-events: none;
  transition: fill .2s ease-in, opacity .2s ease-in;
}

/*----------------------
    FORM SWITCH
----------------------*/
.form-switch {
  display: flex;
  align-items: center;
  width: 52px;
  height: 28px;
  border: 1px solid var(--color-border);
  border-radius: 200px;
  background-color: var(--color-divider);
  cursor: pointer;
  position: relative;
  transition: background-color .3s ease-in-out;
}

.form-switch.active {
  background-color: var(--color-primary);
}

.form-switch.active .form-switch-button {
  left: 26px;
}

.form-switch .form-switch-button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left .3s ease-in-out;
}

.form-switch .form-switch-button::before, .form-switch .form-switch-button::after {
  content: '';
  width: 2px;
  height: 8px;
  background-color: var(--color-icon);
  opacity: .2;
  position: absolute;
  top: 7px;
}

.form-switch .form-switch-button::before {
  left: 8px;
}

.form-switch .form-switch-button::after {
  right: 8px;
}

.form-input-checkbox {
  display: flex;
  align-items: center;
}

.form-input-checkbox .checkbox-box,
.form-input-checkbox .form-input-checkbox-text {
  cursor: pointer;
}

.form-input-checkbox .checkbox-box + .form-input-checkbox-text {
  margin-left: 12px;
}

.form-input-checkbox .form-input-checkbox-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.error-field-message,
.required-field-message {
  color: var(--color-text);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.error-field-message + .button,
.required-field-message + .button {
  margin-top: 16px;
}

.error-field-message.medium,
.required-field-message.medium {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.error-field-message,
.required-field-message {
  color: var(--color-tertiary);
}

/*-------------------------
    FORM INPUT LIST
-------------------------*/
.form-input-list .form-input-list-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.form-input-list .form-input-list-items {
  display: flex;
  flex-wrap: wrap;
}

.form-input-list .form-input-list-items .form-input-checkbox,
.form-input-list .form-input-list-items .checkbox-wrap {
  margin: 16px 16px 0 0;
}

/*------------------------------------------------------------------*/
/**
 * 3.1. Form - Media Queries
 */
@media screen and (max-width: 960px) {
  .form-row.split {
    display: block;
  }
  .form-row.split .form-item {
    margin-bottom: 28px;
  }
  .form-row.split .form-item:last-child {
    margin-bottom: 0;
  }
  .form-row.split .form-item textarea {
    height: 124px;
  }
  .form-item.split.join-on-mobile {
    display: block;
  }
  .form-item.split.join-on-mobile.medium > * {
    margin-right: 0;
  }
  .form-item.split.join-on-mobile > * {
    margin-right: 0;
  }
  .form-item.split.join-on-mobile > *:last-child {
    margin-top: 28px;
  }
}

@media screen and (max-width: 768px) {
  .form-textarea-footer {
    justify-content: space-between;
  }
}

@media screen and (max-width: 480px) {
  .form-input-list .form-input-list-items {
    flex-direction: column;
  }
  .form-input-list .form-input-list-items .form-input-checkbox,
  .form-input-list .form-input-list-items .checkbox-wrap {
    margin-top: 16px;
  }
  .form-input-list .form-input-list-items .form-input-checkbox:last-child,
  .form-input-list .form-input-list-items .checkbox-wrap:last-child {
    margin-bottom: 12px;
  }
}

/*------------------------------------------------------------------*/
/**
 * 4. Icon
 */
.icon-facebook,
.icon-twitter,
.icon-twitch,
.icon-youtube,
.icon-instagram,
.icon-patreon,
.icon-discord,
.icon-behance,
.icon-deviantart,
.icon-artstation,
.icon-dribbble,
.icon-spotify,
.icon-snapchat,
.icon-skype,
.icon-reddit,
.icon-pinterest,
.icon-messenger,
.icon-linkedin,
.icon-github,
.icon-whatsapp,
.icon-vk,
.icon-tumblr,
.icon-tiktok,
.icon-unsplash,
.icon-flickr,
.icon-cross {
  fill: #fff;
  width: 12px;
  height: 12px;
}

.icon-logo-vikinger {
  fill: #fff;
  width: 42px;
  height: 60px;
}

.icon-logo-vikinger.small {
  width: 28px;
  height: 40px;
}

.icon-dots {
  fill: #fff;
  width: 10px;
  height: 2px;
}

.icon-public,
.icon-private {
  fill: var(--color-icon-highlighted);
  width: 20px;
  height: 20px;
}

.icon-comment,
.icon-thumbs-up,
.icon-friend,
.icon-info,
.icon-success,
.icon-error,
.icon-group,
.icon-marketplace,
.icon-add-friend,
.icon-remove-friend,
.icon-delete,
.icon-send-message,
.icon-settings,
.icon-cross-thin,
.icon-newsfeed,
.icon-overview,
.icon-members,
.icon-memberships,
.icon-badges,
.icon-quests,
.icon-streams,
.icon-events,
.icon-events-monthly,
.icon-events-weekly,
.icon-events-daily,
.icon-pin,
.icon-ticket,
.icon-forums,
.icon-profile,
.icon-timeline,
.icon-photos,
.icon-videos,
.icon-headphones,
.icon-blog-posts,
.icon-forum,
.icon-store,
.icon-share,
.icon-pinned,
.icon-favorite,
.icon-status,
.icon-big-grid-view,
.icon-small-grid-view,
.icon-list-grid-view,
.icon-poll,
.icon-camera,
.icon-emoji,
.icon-gif,
.icon-tags,
.icon-trophy,
.icon-return,
.icon-clock,
.icon-earnings,
.icon-wallet,
.icon-item,
.icon-revenue,
.icon-credits,
.icon-ranks,
.icon-admin-crown,
.icon-mod-shield,
.icon-ban,
.icon-remove-user {
  fill: var(--color-icon);
  width: 20px;
  height: 20px;
}

.icon-grid,
.icon-magnifying-glass,
.icon-messages,
.icon-shopping-bag,
.icon-notification,
.icon-join-group,
.icon-leave-group,
.icon-plus,
.icon-login,
.icon-gallery,
.icon-link,
.icon-light-theme,
.icon-dark-theme {
  fill: #fff;
  width: 20px;
  height: 20px;
}

.icon-back-arrow {
  width: 14px;
  height: 10px;
}

.icon-small-arrow {
  fill: var(--color-icon);
  width: 6px;
  height: 8px;
}

.icon-big-arrow {
  fill: #3e3f5e;
  width: 8px;
  height: 12px;
}

.icon-more-dots {
  fill: #fff;
  width: 22px;
  height: 6px;
}

.icon-more-dots.small {
  width: 16px;
  height: 5px;
}

.icon-starred {
  fill: #ffe00d;
  width: 11px;
  height: 10px;
}

.icon-star {
  fill: #eaeaf5;
  width: 9px;
  height: 8px;
}

.icon-star.medium {
  width: 13px;
  height: 12px;
}

.icon-play {
  fill: #fff;
  width: 12px;
  height: 14px;
}

.icon-play.medium {
  width: 16px;
  height: 18px;
}

.icon-speaker {
  fill: #fff;
  width: 26px;
  height: 22px;
}

.icon-plus-small,
.icon-minus-small {
  fill: #3e3f5e;
  width: 8px;
  height: 8px;
}

.icon-quote {
  fill: #3e3f5e;
  width: 32px;
  height: 22px;
}

.icon-check {
  width: 12px;
  height: 9px;
}

.icon-check-small {
  width: 6px;
  height: 6px;
}

.demo-icon {
  fill: var(--color-icon-highlighted);
}

.icon-no-results {
  fill: var(--color-icon);
  width: 172px;
  height: 156px;
}

/*------------------------------------------------------------------*/
/**
 * 5. Content Grid
 */
.content-grid {
  max-width: 1184px;
  padding: 32px 0 100px;
  margin: 0 auto;
}

.content-grid.full {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.content-grid.medium {
  max-width: 784px;
  padding: 0 0 100px;
}

.content-grid .section-navigation {
  margin-top: 16px;
}

.content-grid .section-navigation + #activity-photo-list,
.content-grid .section-navigation + #activity-video-list {
  margin-top: 60px;
}

.content-grid .section-navigation + #activity-photo-list .section-header,
.content-grid .section-navigation + #activity-video-list .section-header {
  margin-bottom: 32px;
}

.content-grid .section-navigation + .bbpress-wrapper {
  margin-top: 60px;
}

.content-grid .section-navigation + .filterable-list,
.content-grid .section-navigation + .grid {
  margin-top: 16px;
}

.content-grid .grid {
  margin-top: 32px;
}

.content-grid .grid:first-child {
  margin-top: 0;
}

.content-grid .grid.medium-space {
  margin-top: 64px;
}

.content-grid .grid.medium-space:first-child {
  margin-top: 0;
}

.content-grid .grid.small-space {
  margin-top: 16px;
}

.content-grid .grid.grid-stretched {
  align-items: stretch;
}

.content-grid .grid .grid {
  margin-top: 0;
}

.content-grid .section-slider {
  margin-top: 32px;
}

.content-grid .section-header {
  margin-top: 60px;
}

.content-grid .section-header:first-child {
  margin-top: 0;
}

.content-grid .section-header + .filterable-list {
  margin-top: 32px;
}

.content-grid .section-banner + .filterable-list {
  margin-top: 64px;
}

.content-grid .forum-content .quick-post {
  margin-top: 60px;
}

.content-grid .forum-sidebar {
  padding-top: 40px;
}

.content-grid .account-hub-content .section-header {
  margin-bottom: 28px;
}

.content-grid .account-hub-content .section-header:first-child {
  margin-top: 0;
}

.content-grid .notification-box-list + .page-loader-indicator {
  margin-top: 60px;
}

/**
 * 5.1. Content Grid - Media Queries
 */
@media screen and (max-width: 1365px) {
  .content-grid {
    width: 95%;
    max-width: 1184px;
    padding-left: 0;
  }

  .content-grid.medium {
    max-width: 100%;
  }

  .content-grid .account-hub-sidebar {
    display: none;
  }

  .content-grid .account-hub-content .section-header:first-child {
    margin-top: 0;
  }
}

@media screen and (max-width: 960px)  {
  .content-grid {
    padding: 32px 0 100px;
  }

  .content-grid.full:not(.content-grid_open-post) {
    width: 100%;
    padding: 60px 0 0;
  }

  .content-grid .section-banner + .filterable-list {
    margin-top: 32px;
  }

  .content-grid.full.content-grid_open-post .post-open-cover {
    height: 320px;
  }

  .content-grid.full.content-grid_open-post .post-open-body {
    padding-top: 60px;
  }
}

@media screen and (max-width: 680px)  {
  .content-grid.medium {
    padding: 0 0 100px;
  }
}

/*------------------------------------------------------------------*/
/**
 * 6. Grid
 */
.grid {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 16px;
  align-items: start;
}

.grid.centered {
  justify-content: center;
}

.grid.stretched {
  align-items: stretch;
}

.grid.top-space {
  margin-top: 64px;
}

.grid.grid-3-6-3 {
  grid-template-areas: 'sidebar1 content sidebar2';
  grid-template-columns: var(--vikinger-grid-columns-3-width) var(--vikinger-grid-columns-6-width) var(--vikinger-grid-columns-3-width);
}

.grid.grid-3-6-3 > .grid-column:nth-child(1) {
  grid-area: sidebar1;
}

.grid.grid-3-6-3 > .grid-column:nth-child(2) {
  grid-area: content;
}

.grid.grid-3-6-3 > .grid-column:nth-child(3) {
  grid-area: sidebar2;
}

.grid.grid-3-9 {
  grid-template-areas: 'sidebar content';
  grid-template-columns: var(--vikinger-grid-columns-3-width) var(--vikinger-grid-columns-9-width);
}

.grid.grid-3-9 > .grid-column:nth-child(1) {
  grid-area: sidebar;
}

.grid.grid-3-9 > .grid-column:nth-child(2) {
  grid-area: content;
}

.grid.grid-9-3 {
  grid-template-areas: 'content sidebar';
  grid-template-columns: var(--vikinger-grid-columns-9-width) var(--vikinger-grid-columns-3-width);
}

.grid.grid-9-3 > .grid-column:nth-child(1) {
  grid-area: content;
}

.grid.grid-9-3 > .grid-column:nth-child(2) {
  grid-area: sidebar;
}

.grid.grid_flexible.grid-3-3-3-3 {
  grid-template-columns: repeat(4, 1fr);
}

.grid.grid-half {
  grid-template-columns: 1fr 1fr;
}

.grid.grid-6-6 {
  grid-template-columns: repeat(auto-fit, var(--vikinger-columns-6-width-px));
}

.grid.grid-4-4,
.grid.grid-4-4-4 {
  grid-template-columns: repeat(auto-fit, var(--vikinger-columns-4-width-px));
}

.grid.grid-3-3-3,
.grid.grid-3-3-3-3 {
  grid-template-columns: repeat(auto-fit, var(--vikinger-columns-3-width-px));
}

.grid.grid-2-2-2-2-2-2 {
  grid-template-columns: repeat(auto-fit, var(--vikinger-columns-2-width-px));
}

.grid .grid-column {
  display: grid;
  grid-template-columns: 100%;
  grid-gap: 16px;
  min-width: 0;
}

.grid .grid-column .page-loader-indicator {
  margin: 48px auto 0;
}

/**
 * 6.1. Grid - Media Queries
 */
@media screen and (max-width: 1365px) {
  .grid.grid-3-6-3 {
    grid-template-columns: var(--vikinger-grid-columns-4-width) var(--vikinger-grid-columns-8-width);
    grid-template-areas: 'sidebar1 content'
                         'sidebar2 content';
  }

  .grid.grid-3-6-3.mobile-prefer-content {
    grid-template-areas: 'sidebar1 content';
  }

  .grid.grid-3-6-3.mobile-prefer-content > .grid-column:nth-child(3) {
    display: none;
  }

  .grid.grid-3-9,
  .grid.grid-9-3 {
    grid-template-columns: 100%;
    grid-template-areas: 'content'
                         'sidebar';
  }

  .grid.grid-3-9 .forum-sidebar,
  .grid.grid-9-3 .forum-sidebar {
    display: none;
  }

  .grid.grid-half.change-on-desktop {
    grid-template-columns: 100%;
  }

  .grid.centered-on-mobile {
    justify-content: center;
  }

  .chat-widget,
  .navigation-widget-desktop {
    display: none;
  }

  .chat-widget-wrap .chat-widget {
    display: block;
  }
}

@media screen and (max-width: 1200px) {
  .grid.grid_flexible.grid-3-3-3-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 1070px) {
  .grid.grid-3-6-3 {
    grid-template-columns: 100%;
    grid-template-areas: 'sidebar1'
                         'sidebar2'
                         'content';
  }

  .grid.grid-3-6-3.mobile-prefer-content {
    grid-template-areas: 'content'
                         'sidebar1'
                         'sidebar2';
  }

  .grid.grid-3-6-3.mobile-prefer-content .grid-column:nth-child(1),
  .grid.grid-3-6-3.mobile-prefer-content .grid-column:nth-child(3) {
    display: none;
  }

  .grid.grid-3-9 {
    grid-template-columns: 100%;
    grid-template-areas: 'content'
                         'sidebar';
  }
}

@media screen and (max-width: 960px) {
  .grid.grid-half,
  .grid.grid-6-6 {
    grid-template-columns: 100%;
  }
}

@media screen and (max-width: 768px) {
  .grid.grid_flexible.grid-3-3-3-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .grid.grid_flexible.grid-3-3-3-3 {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 460px) {
  .grid.grid-4-4-4,
  .grid.grid-4-4,
  .grid.grid-3-3-3-3 {
    grid-template-columns: 100%;
  }
}

/*------------------------------------------------------------------*/
/**
 * 7. General
 */
*::selection {
  background-color: var(--color-primary);
  color: #fff;
}

html {
  height: 100%;
}

body {
  background-color: var(--color-body);
  font-family: var(--vikinger-font-family-primary);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
a,
p {
  color: var(--color-text);
  line-height: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

p a {
  color: var(--color-primary-dark);
  font-weight: 600;
}

p a:focus, li a:focus {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

.paragraph {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.7142857143em;
  font-weight: 500;
  word-break: break-word;
}

.no-results-text {
  color: var(--color-text-alt-2);
  font-size: calc((11 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.logo .logo-image {
  display: block;
}

.load-more-text {
  border-top: 1px solid var(--color-divider);
  height: 53px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 53px;
  text-align: center;
  cursor: pointer;
}

.load-more-text .loader-spinner-wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animate-slide-down {
  opacity: 0;
  transform: translate(0, -20px);
  animation: slideDown .4s ease-in-out forwards;
  transition: transform .4s ease-in-out, opacity .4s ease-in-out;
}

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translate(0, -20px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/**
 * 7.1. General - Media Queries
 */
@media screen and (max-width: 960px) {
  body.vikinger-logged-out {
    padding-bottom: 0;
  }
}

@media screen and (max-width: 480px) {
  .hide-text-mobile {
    display: none;
  }
}

/*------------------------------------------------------------------*/
/**
 * 8. Button
 */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  border-radius: 10px;
  background-color: #3e3f5e;
  color: #fff;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out;
  box-shadow: 3px 5px 10px 0 rgba(62, 63, 94, 0.2);
}

.button.button-loader .button-loading-text,
.button.button-loader .loader-spinner {
  display: none;
}

.button.button-loader.button-loader-loading .button-text {
  display: none;
}

.button.button-loader.button-loader-loading .button-loading-text,
.button.button-loader.button-loader-loading .loader-spinner {
  display: block;
}

.button.button-loader + .error-field-message {
  margin-top: 12px;
}

.button .loader-spinner {
  margin-left: 12px;
  background: linear-gradient(to right, #fff 10%, rgba(35, 210, 226, 0) 42%);
}

.button .loader-spinner:before {
  background-color: #fff;
}

.button .loader-spinner:after {
  transition: background-color .2s ease-in-out;
}

.button[disabled] {
  opacity: .3;
  pointer-events: none;
  box-shadow: none;
}

.button.no-shadow {
  box-shadow: none;
}

.button.full {
  width: 100%;
}

.button.medium {
  height: 54px;
  line-height: 54px;
}

.button.small {
  height: 40px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 40px;
}

.button:hover {
  color: #fff;
  background-color: #2e2e47;
}

.button.void {
  background-color: transparent;
  color: var(--color-text-alt-2);
  box-shadow: none;
}

.button.void .loader-spinner {
  background: linear-gradient(to right, #23d2e2 10%, rgba(35, 210, 226, 0) 42%);
}

.button.void .loader-spinner:before {
  background-color: #23d2e2;
}

.button.void .button-icon {
  fill: var(--color-icon);
}

.button.void:hover {
  color: #fff;
  background-color: #2e2e47;
}

.button.void:hover .button-icon {
  fill: #fff;
}

.button.void.void-primary:hover {
  background-color: var(--color-primary);
}

.button.void.void-secondary:hover {
  background-color: var(--color-secondary);
}

.button.void.void-secondary:hover .loader-spinner:after {
  background-color: var(--color-secondary);
}

.button.void.void-tertiary:hover {
  background-color: var(--color-tertiary);
}

.button.void.void-tertiary:hover .loader-spinner:after {
  background-color: var(--color-tertiary);
}

.button.white-solid {
  background-color: #fff;
  color: #3e3f5e;
}

.button.white {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-alt-2);
  box-shadow: none;
}

.button.white .loader-spinner {
  background: linear-gradient(to right, var(--color-primary-background) 10%, rgba(35, 210, 226, 0) 42%);
}

.button.white .loader-spinner:before {
  background-color: var(--color-primary);
}

.button.white .button-icon {
  fill: var(--color-icon);
}

.button.white:hover {
  color: #fff;
  background-color: #2e2e47;
  border-color: #2e2e47;
}

.button.white.white-tertiary:hover {
  background-color: var(--color-tertiary);
  border-color: var(--color-tertiary);
  box-shadow: var(--color-tertiary-shadow);
}

.button.white.white-tertiary:hover .loader-spinner:after {
  background-color: var(--color-tertiary);
}

.button.primary {
  background-color: var(--color-primary);
  box-shadow: var(--color-primary-shadow);
}

.button.primary:hover {
  background-color: var(--color-primary-hover);
}

.button.primary:hover .loader-spinner:after {
  background-color: var(--color-primary-hover);
}

.button.primary .loader-spinner:after {
  background-color: var(--color-primary);
}

.button.secondary {
  background-color: var(--color-secondary);
  box-shadow: var(--color-secondary-shadow);
}

.button.secondary:hover {
  background-color: var(--color-secondary-hover);
}

.button.secondary:hover .loader-spinner:after {
  background-color: var(--color-secondary-hover);
}

.button.secondary .loader-spinner:after {
  background-color: var(--color-secondary);
}

.button.tertiary {
  background-color: var(--color-tertiary);
  box-shadow: var(--color-tertiary-shadow);
}

.button.tertiary:hover {
  background-color: var(--color-tertiary-hover);
}

.button.tertiary:hover .loader-spinner:after {
  background-color: var(--color-tertiary-hover);
}

.button.tertiary .loader-spinner:after {
  background-color: var(--color-tertiary);
}

.button.twitch {
  background-color: #7b5dfa;
  box-shadow: 4px 7px 12px 0 rgba(123, 93, 250, 0.2);
}

.button.twitch:hover {
  background-color: #6a4fdf;
}

.button.twitter {
  background-color: #1abcff;
  box-shadow: 3px 5px 10px 0px rgba(26, 188, 255, 0.2);
}

.button.twitter:hover {
  background-color: #0aabed;
}

.button.add-field-button {
  width: 128px;
  margin-top: 40px;
}

.button.padded {
  padding: 0 24px;
}

.button .button-icon {
  fill: #fff;
  transition: fill .2s ease-in-out;
}

.button .button-icon.spaced {
  margin-right: 6px;
}

.button.with-only-icon .loader-spinner {
  margin-left: 0;
}

.button.button-loading .button-icon {
  display: none;
}

.button.button-loading .button-loader {
  display: block;
}

.button .button-loader {
  display: none;
}

.button-post-comment {
  width: 80px;
}

.button-show-more {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  border-radius: 10px;
  background-color: var(--color-box-background-alt);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 3px 5px 10px 0 rgba(62, 63, 94, 0.2);
}

/*------------------------------------------------------------------*/
/**
 * 9. Social Links
 */
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc((12 / 16) * 1em);
}

.social-links.align-left {
  justify-content: flex-start;
}

.social-links.small {
  gap: calc((8 / 16) * 1em);
}

.social-links.vertical {
  flex-direction: column;
}

.social-links.vertical .social-link {
  margin: 0 0 16px 0;
}

.social-links.vertical .social-link:last-child {
  margin: 0;
}

.social-links.multiline {
  margin-top: -12px;
}

.social-links.multiline .social-link {
  margin: 12px 12px 0 0;
}

.social-links.multiline .social-link:last-child {
  margin-right: 0;
}

/*-------------------
    SOCIAL LINK
-------------------*/
.social-link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: #3e3f5e;
  transition: transform .2s ease-in-out;
}

.social-link.small {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.social-link.small .social-link-icon {
  width: 10px;
  height: 10px;
}

.social-link.no-hover:hover {
  transform: translate(0, 0);
}

.social-link:hover {
  transform: translate(0, -4px);
}

.social-link.facebook {
  background-color: #3763d2;
}

.social-link.twitter {
  background-color: #1abcff;
}

.social-link.twitch {
  background-color: #7b5dfa;
}

.social-link.youtube {
  background-color: #fd434f;
}

.social-link.instagram {
  background-color: #f8468d;
}

.social-link.patreon {
  background-color: #ff7a51;
}

.social-link.discord {
  background-color: #7289da;
}

.social-link.behance {
  background-color: #3486f5;
}

.social-link.deviantart {
  background-color: #32e1d3;
}

.social-link.artstation {
  background-color: #00e194;
}

.social-link.dribbble {
  background-color: #f761ab;
}

.social-link.spotify {
  background-color: #1dd05d;
}

.social-link.snapchat {
  background-color: #ffe400;
}

.social-link.skype {
  background-color: #01a9ea;
}

.social-link.reddit {
  background-color: #f74300;
}

.social-link.pinterest {
  background-color: #cd2e3f;
}

.social-link.messenger {
  background-color: #0084ff;
}

.social-link.linkedin {
  background-color: #0077b5;
}

.social-link.github {
  background-color: #303742;
}

.social-link.whatsapp {
  background-color: #2fbe38;
}

.social-link.vk {
  background-color: #5181b8;
}

.social-link.tumblr {
  background-color: #4c6d93;
}

.social-link.tiktok {
  background-color: #000000;
}

.social-link.unsplash {
  background-color: #000000;
}

.social-link.flickr {
  background-color: #f761ab;
}

.social-link.void {
  background-color: #fff;
  box-shadow: var(--color-overbox-shadow);
}

.social-link.void.facebook .icon-facebook {
  fill: #3763d2;
}

.social-link.void.twitter .icon-twitter {
  fill: #1abcff;
}

/*------------------------------------------------------------------*/
/**
 * 10. Action Request List
 */
.action-request-list {
  display: flex;
  gap: calc((12 / 16) * 1em);
}

.action-request-list .tag-sticker {
  width: 40px;
  height: 40px;
}

/*---------------------
    ACTION REQUEST
---------------------*/
.action-request {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  color: #adafca;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s ease-in-out, background-color .2s ease-in-out, color .2s ease-in-out;
}

.action-request.with-text {
  width: auto;
  padding: 0 32px 0 22px;
}

.action-request.with-text .action-request-icon {
  margin-right: 12px;
}

.action-request:hover {
  color: #fff;
}

.action-request:hover .action-request-icon {
  fill: #fff;
  opacity: 1;
}

.action-request.accept:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.action-request.accept:hover .loader-spinner:after {
  background-color: var(--color-secondary);
}

.action-request.decline:hover {
  background-color: var(--color-tertiary);
  border-color: var(--color-tertiary);
}

.action-request.decline:hover .loader-spinner:after {
  background-color: var(--color-tertiary);
}

.action-request .action-request-icon {
  fill: var(--color-icon);
  opacity: .6;
  transition: fill .2s ease-in-out, opacity .2s ease-in-out;
  pointer-events: none;
}

.action-request .loader-spinner:after {
  transition: background-color .2s ease-in-out;
}

/**
 * 10.1. Action Request List - Media Queries
 */
@media screen and (max-width: 479px) {
  .action-request.with-text {
    width: 40px;
    padding: 0;
  }

  .action-request.with-text .action-request-icon {
    margin-right: 0;
  }

  .action-request.with-text .action-request-text {
    display: none;
  }
}

/*------------------------------------------------------------------*/
/**
 * 11. Burger Icon
 */
.burger-icon {
  width: 20px;
  height: 14px;
  position: relative;
}

.burger-icon.open .burger-icon-bar:nth-child(1) {
  width: 100%;
}

.burger-icon.open .burger-icon-bar:nth-child(2) {
  width: 14px;
}

.burger-icon.open .burger-icon-bar:nth-child(3) {
  width: 10px;
}

.burger-icon.inverted .burger-icon-bar {
  left: 0;
}

.burger-icon.inverted .burger-icon-bar:nth-child(1) {
  width: 100%;
}

.burger-icon.inverted .burger-icon-bar:nth-child(2) {
  width: 14px;
}

.burger-icon.inverted .burger-icon-bar:nth-child(3) {
  width: 10px;
}

.burger-icon .burger-icon-bar {
  height: 2px;
  background-color: #fff;
  position: absolute;
  right: 0;
  transition: width .4s ease-in-out;
}

.burger-icon .burger-icon-bar:nth-child(1) {
  top: 0;
  width: 10px;
}

.burger-icon .burger-icon-bar:nth-child(2) {
  top: 6px;
  width: 14px;
}

.burger-icon .burger-icon-bar:nth-child(3) {
  top: 12px;
  width: 100%;
}

/*------------------------------------------------------------------*/
/**
 * 12. Action List
 */
.action-list {
  display: flex;
  padding: 0 18px;
  position: relative;
}

.action-list::before,
.action-list::after {
  content: '';
  width: 1px;
  height: 32px;
  background-color: var(--color-border);
  position: absolute;
}

.action-list::before {
  right: 0;
}

.action-list::after {
  left: 0;
}

.action-list.dark::before,
.action-list.dark::after {
  background-color: var(--color-header-divider);
}

.action-list.dark .action-list-item:hover .action-list-item-icon,
.action-list.dark .action-list-item.active .action-list-item-icon,
.action-list.dark .action-list-item.unread .action-list-item-icon,
.action-list.dark .action-list-item-icon-wrap:hover .action-list-item-icon,
.action-list.dark .action-list-item-icon-wrap.active .action-list-item-icon,
.action-list.dark .action-list-item-icon-wrap.unread .action-list-item-icon {
  fill: var(--color-header-icon-hover);
}

.action-list.dark .action-list-item .action-list-item-icon,
.action-list.dark .action-list-item-icon-wrap .action-list-item-icon {
  fill: var(--color-header-icon);
}

.action-list .action-list-item:hover .action-list-item-icon,
.action-list .action-list-item.active .action-list-item-icon,
.action-list .action-list-item.unread .action-list-item-icon,
.action-list .action-list-item-icon-wrap:hover .action-list-item-icon,
.action-list .action-list-item-icon-wrap.active .action-list-item-icon,
.action-list .action-list-item-icon-wrap.unread .action-list-item-icon {
  fill: #3e3f5e;
}

.action-list .action-list-item.unread,
.action-list .action-list-item-icon-wrap.unread {
  position: relative;
}

.action-list .action-list-item.unread::after,
.action-list .action-list-item-icon-wrap.unread::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--color-primary-light);
  position: absolute;
}

.action-list .action-list-item.unread::after {
  top: 26px;
  right: 10px;
}

.action-list .action-list-item-icon-wrap.unread::after {
  top: -4px;
  right: -4px;
}

.action-list .action-list-item {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  cursor: pointer;
}

.action-list .action-list-item .action-list-item-icon {
  fill: var(--color-icon);
  transition: fill .3s ease-in-out;
}

.action-list .action-list-item.action-list-item-hidden {
  display: none;
}

/*---------------------
    ACTION ITEM
---------------------*/
.action-item {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.action-item .action-item-icon {
  fill: #adafca;
}

.action-item .action-item-text {
  margin-left: 28px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.action-item.hoverable .action-item-icon {
  fill: var(--color-header-icon);
  transition: fill .3s ease-in-out;
}

.action-item.hoverable:hover .action-item-icon {
  fill: var(--color-header-icon-hover);
}

.action-item.dark .action-item-icon {
  fill: var(--color-header-profile-settings-icon);
}

/*------------------------------------------------------------------*/
/**
 * 13. User Stats
 */
.user-stats {
  display: flex;
  justify-content: center;
}

.user-stats .user-stat {
  width: 100%;
  position: relative;
}

.user-stats .user-stat.big::after {
  top: 8px;
}

.user-stats .user-stat::after {
  content: '';
  width: 1px;
  height: 20px;
  background-color: var(--color-divider);
  position: absolute;
  top: 6px;
  right: 0;
}

.user-stats .user-stat:last-child::after {
  display: none;
}

/*------------------
    USER STAT
------------------*/
.user-stat.big .user-stat-title {
  font-size: calc((22 / var(--vikinger-font-size-base)) * 1rem);
}

.user-stat.big .user-stat-text {
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
}

.user-stat .user-stat-title,
.user-stat .user-stat-text {
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.user-stat .user-stat-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.user-stat .user-stat-title .user-stat-title-icon.positive {
  fill: var(--color-primary);
}

.user-stat .user-stat-title .user-stat-title-icon.negative {
  fill: #f9515c;
}

.user-stat .user-stat-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-stat .user-stat-icon + .user-stat-text {
  margin-top: 12px;
}

.user-stat .user-stat-image {
  display: block;
  width: 24px;
  height: 16px;
}

.user-stat .user-stat-image + .user-stat-text {
  margin-top: 15px;
}

.user-stat .user-stat-text {
  margin-top: 10px;
  color: var(--color-text-alt-2);
  font-size: calc((11 / var(--vikinger-font-size-base)) * 1rem);
}

/*------------------------------------------------------------------*/
/**
 * 14. Badge List
 */
.badge-list {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, 32px);
  grid-gap: 14px;
}

.badge-list.align-left {
  justify-content: flex-start;
}

.badge-list.medium {
  grid-gap: 18px 14px;
}

.badge-list.small {
  grid-gap: 8px;
}

/*------------------
    BADGE ITEM
------------------*/
.badge-item {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 32px;
  position: relative;
}

.badge-item.badge-item-more {
  height: 35px;
}

.badge-item.badge-item-more img {
  position: absolute;
  top: 0;
  left: 0;
}

.badge-item img {
  width: 100%;
  height: auto;
}

.badge-item .badge-item-text {
  color: #fff;
  font-size: calc((11 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  position: relative;
  top: 1px;
  z-index: 2;
}

/*------------------------------------------------------------------*/
/**
 * 15. Tag List
 */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc((12 / 16) * 1em);
}

/*-----------------
    TAG ITEM
-----------------*/
.tag-item {
  display: block;
  height: 24px;
  padding: 0 12px;
  border-radius: 200px;
  background-color: #3e3f5e;
  color: #fff;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 24px;
}

.tag-item.secondary {
  background-color: var(--color-secondary);
  transition: background-color .2s ease-in-out;
}

.tag-item.secondary:hover {
  color: #fff;
  background-color: var(--color-primary);
}

.tag-item.secondary:focus {
  border: none;
  background-color: var(--color-primary);
}

/*------------------------------------------------------------------*/
/**
 * 16. XM Tooltip
 */
.xm-tooltip-text {
  padding: 0 12px;
  border-radius: 200px;
  background-color: #3e3f5e;
  color: #fff;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 24px;
}

/*------------------------------------------------------------------*/
/**
 * 17. User Short Description
 */
.user-short-description {
  padding-top: 84px;
  position: relative;
}

.user-short-description.big {
  padding-top: 52px;
}

.user-short-description.big .user-short-description-avatar {
  top: -116px;
  margin-left: -74px;
}

.user-short-description.big .user-short-description-title {
  font-size: calc((24 / var(--vikinger-font-size-base)) * 1rem);
}

.user-short-description.big .user-short-description-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.user-short-description.small {
  padding-top: 62px;
}

.user-short-description.small .user-short-description-avatar {
  margin-left: -50px;
}

.user-short-description.landscape {
  padding: 0 0 0 32px;
}

.user-short-description.landscape .user-short-description-avatar {
  top: 0;
  margin-left: 0;
}

.user-short-description.landscape .user-short-description-title,
.user-short-description.landscape .user-short-description-text {
  text-align: left;
}

.user-short-description.landscape.tiny .user-short-description-avatar {
  left: -25px;
  top: 50%;
  margin-top: -26px;
}

.user-short-description .user-short-description-avatar {
  position: absolute;
  top: -54px;
  left: 50%;
  margin-left: -60px;
}

.user-short-description .user-short-description-title,
.user-short-description .user-short-description-text {
  font-weight: 700;
  text-align: center;
}

.user-short-description .user-short-description-title {
  font-size: calc((18 / var(--vikinger-font-size-base)) * 1rem);
}

.user-short-description .user-short-description-title a {
  color: var(--color-text);
  font-weight: 700;
}

.user-short-description .user-short-description-title.small {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.user-short-description .vikinger-pmpro-level-tag,
.user-short-description .vikinger-user-tag {
  margin-top: 4px;
}

.user-short-description .vikinger-pmpro-level-tag.vikinger-pmpro-level-tag_small,
.user-short-description .vikinger-user-tag.vikinger-user-tag_small {
  margin-top: 2px;
}

.user-short-description .user-short-description-text {
  margin-top: 6px;
  color: var(--color-text);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.user-short-description .user-short-description-text a {
  color: var(--color-text);
  font-weight: 500;
}

.user-short-description .user-short-description-text a:hover {
  color: var(--color-primary-dark);
}

/*------------------------------------------------------------------*/
/**
 * 18. User Preview Widget
 */
.user-preview-widget {
  border-radius: 12px;
  padding-bottom: 28px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: relative;
}

.user-preview-widget .user-preview-widget-cover {
  height: 132px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.user-preview-widget .user-short-description.small {
  padding-top: 44px;
}

.user-preview-widget .user-short-description.small .user-short-description-avatar {
  top: -72px;
}

.user-preview-widget > .tag-sticker {
  position: absolute;
  top: 104px;
  right: 32px;
}

.user-preview-widget .user-preview-widget-footer > * {
  position: absolute;
  bottom: 32px;
}

.user-preview-widget .user-preview-widget-footer > *:first-child {
  left: 32px;
}

.user-preview-widget .user-preview-widget-footer > *:last-child {
  right: 32px;
}

.user-preview-widget .user-preview-widget-footer .button {
  width: 64px;
}

.user-preview-widget .user-preview-widget-footer .user-stats .user-stat {
  padding: 0;
}

.user-preview-widget .user-preview-widget-footer .user-stats .user-stat .user-stat-title,
.user-preview-widget .user-preview-widget-footer .user-stats .user-stat .user-stat-text {
  text-align: right;
}

/*------------------------------------------------------------------*/
/**
 * 19. Slider Control
 */
.slider-control {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.slider-control.medium {
  width: 32px;
  height: 32px;
}

.slider-control.solid {
  background-color: var(--color-box-over-box-light-background);
  box-shadow: var(--color-overbox-shadow);
  border-radius: 10px;
  transition: background-color .2s ease-in-out;
}

.slider-control.solid .slider-control-icon {
  fill: var(--color-icon-highlighted);
  opacity: 1;
}

.slider-control.solid:hover {
  background-color: var(--color-primary);
}

.slider-control.solid:hover .slider-control-icon {
  fill: #fff;
}

.slider-control.negative .slider-control-icon {
  fill: #fff;
}

.slider-control.negative.disabled, .slider-control.negative[aria-disabled=true] {
  opacity: .4;
}

.slider-control.negative.disabled:hover .slider-control-icon, .slider-control.negative[aria-disabled=true]:hover .slider-control-icon {
  fill: #fff;
  opacity: .4;
}

.slider-control.negative:hover .slider-control-icon {
  fill: #fff;
  opacity: 1;
}

.slider-control.disabled, .slider-control[aria-disabled=true] {
  opacity: .5;
}

.slider-control.disabled:hover .slider-control-icon, .slider-control[aria-disabled=true]:hover .slider-control-icon {
  fill: var(--color-icon);
  opacity: .5;
}

.slider-control .slider-control-icon {
  fill: var(--color-icon);
  pointer-events: none;
  opacity: .6;
  transition: fill .2s ease-in-out, opacity .2s ease-in-out;
}

.slider-control.left .slider-control-icon {
  transform: rotate(180deg);
}

.slider-control:hover .slider-control-icon {
  fill: var(--color-icon-highlighted);
  opacity: 1;
}

/*------------------------------------------------------------------*/
/**
 * 20. Slider Roster
 */
.slider-roster {
  display: flex;
  gap: calc((8 / 16) * 1em);
}

/*------------------------
    SLIDER ROSTER ITEM
------------------------*/
.slider-roster-item {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-icon-highlighted);
  opacity: .2;
  cursor: pointer;
}

.slider-roster-item.active {
  opacity: 1;
}

/*------------------------------------------------------------------*/
/**
 * 21. Tag Sticker
 */
.tag-sticker {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--color-box-over-box-light-background);
  box-shadow: var(--color-overbox-shadow);
  color: #fff;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-align: center;
}

.tag-sticker.small {
  height: 36px;
}

.tag-sticker.tertiary {
  background-color: var(--color-tertiary);
}

.tag-sticker .tag-sticker-icon {
  fill: var(--color-icon-highlighted);
}

.tag-sticker .tag-sticker-icon.spaced {
  position: relative;
  left: -12px;
}

.tag-sticker .tag-sticker-icon.white {
  fill: #fff;
}

.tag-sticker .tag-sticker-icon.primary {
  fill: var(--color-primary);
}

.tag-sticker .tag-sticker-icon.secondary {
  fill: var(--color-secondary);
}

.tag-sticker .tag-sticker-icon.tertiary {
  fill: var(--color-tertiary);
}

/*------------------------------------------------------------------*/
/**
 * 22. Text Sticker
 */
.text-sticker {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 200px;
  background-color: var(--color-box-over-box-light-background);
  box-shadow: var(--color-overbox-shadow);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 32px;
}

.text-sticker.round {
  border-radius: 12px;
}

.text-sticker .highlighted {
  color: var(--color-primary-dark);
}

.text-sticker .text-sticker-icon {
  margin-right: 6px;
  fill: var(--color-primary-dark);
}

.text-sticker .text-sticker-icon.tertiary {
  fill: var(--color-tertiary);
}

.text-sticker .text-sticker-image {
  margin-left: 4px;
  width: auto;
  height: 14px;
}

.text-sticker.small-text {
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
}

.text-sticker.small {
  height: 24px;
  padding: 0 12px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 24px;
}

.text-sticker.medium {
  height: 44px;
  padding: 0 16px;
  line-height: 44px;
}

.text-sticker.negative {
  color: #fff;
  background: #15151f;
}

.text-sticker.void {
  box-shadow: none;
  background-color: transparent;
}

/*------------------------------------------------------------------*/
/**
 * 23. Simple Dropdown
 */
.simple-dropdown {
  width: 140px;
  padding: 10px 0;
  border-radius: 12px;
  background-color: var(--color-box-over-box-light-background);
  box-shadow: var(--color-overbox-dark-shadow);
}

.simple-dropdown.padded {
  padding: 12px 16px 16px;
}

.simple-dropdown .simple-dropdown-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  color: var(--color-text);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease-in-out, padding-left .2s ease-in-out;
}

.simple-dropdown .simple-dropdown-link:hover {
  padding-left: 20px;
  color: var(--color-primary-dark);
}

.simple-dropdown .simple-dropdown-link .loader-spinner-wrap .loader-spinner::after {
  background-color: var(--color-box-over-box-light-background);
}

.simple-dropdown .simple-dropdown-text {
  display: flex;
  align-items: center;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.simple-dropdown .simple-dropdown-text + .simple-dropdown-text {
  margin-top: 4px;
}

.simple-dropdown .simple-dropdown-text .reaction {
  margin-right: 4px;
}

.simple-dropdown .simple-dropdown-text .bold {
  font-weight: 700;
}

/*------------------------------------------------------------------*/
/**
 * 24. Information Line List
 */
.information-line-list {
  display: flex;
  flex-direction: column;
  gap: calc((14 / 16) * 1em);
}

/*-------------------------
    INFORMATION LINE
-------------------------*/
.information-line {
  display: flex;
}

.information-line .information-line-title,
.information-line .information-line-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.4285714286em;
  word-break: break-word;
}

.information-line .information-line-title {
  flex-shrink: 0;
  width: 80px;
  color: var(--color-text-alt);
}

.information-line .information-line-text a {
  word-break: break-word;
}

.information-line .information-line-text .bold {
  font-weight: 700;
}

/*------------------------------------------------------------------*/
/**
 * 25. Information Block List
 */
.information-block-list {
  display: flex;
  flex-direction: column;
  gap: calc((26 / 16) * 1em);
}

/*-------------------------
    INFORMATION BLOCK
-------------------------*/
.information-block .information-block-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.information-block .information-block-text {
  margin-top: 10px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.7142857143em;
  font-weight: 500;
}

/*------------------------------------------------------------------*/
/**
 * 26. View Actions
 */
.view-actions {
  display: flex;
  gap: calc((26 / 16) * 1em);
}

/*-------------------
    VIEW ACTION
-------------------*/
.view-action {
  cursor: pointer;
}

.view-action.active .view-action-icon, .view-action:hover .view-action-icon {
  fill: var(--color-icon-highlighted);
  opacity: 1;
}

.view-action .view-action-icon {
  fill: var(--color-icon);
  opacity: .4;
  transition: opacity .2s ease-in-out, fill .2s ease-in-out;
}

/*------------------------------------------------------------------*/
/**
 * 27. Play Button
 */
.play-button {
  width: 46px;
  height: 46px;
  padding: 12px 0 0 15px;
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  background-color: rgba(21, 21, 31, 0.96);
}

.play-button .play-button-icon {
  display: block;
}

.play-button.medium {
  width: 60px;
  height: 60px;
  border-width: 6px;
  padding: 15px 0 0 18px;
}

.play-button.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.post-format-tag,
.gallery-popup-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--color-primary);
  box-shadow: 3px 5px 20px 0px rgba(94, 92, 154, 0.3);
}

.post-format-tag .post-format-tag-icon {
  fill: #fff;
}

.gallery-popup-button {
  cursor: pointer;
  transition: background-color .2s ease-in-out;
}

.gallery-popup-button:hover {
  background-color: var(--color-primary-hover);
}

/*------------------------------------------------------------------*/
/**
 * 28. Media Link Preview
 */
.media-link-preview {
  position: relative;
}

.media-link-preview.disabled {
  opacity: .5;
}

.media-link-preview .media-link-preview-close-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-bottom-left-radius: 6px;
  background-color: var(--color-tertiary);
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  cursor: pointer;
}

.media-link-preview .media-link-preview-close-button .media-link-preview-close-button-icon {
  width: 8px;
  height: 8px;
  pointer-events: none;
}

/*------------------------------------------------------------------*/
/**
 * 29. Iframe Wrap
 */
.iframe-wrap {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}

.iframe-wrap iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*------------------------------------------------------------------*/
/**
 * 30. Video Wrap
 */
.video-wrap {
  width: 100%;
  padding-top: 56.25%;
  position: relative;
}

.video-wrap video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/*------------------------------------------------------------------*/
/**
 * 31. Popup Picture
 */
.popup-picture {
  height: 100%;
  display: flex;
}

.popup-picture .widget-box {
  width: 384px;
  flex-shrink: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.popup-picture .widget-box .widget-box-status .widget-box-status-header .user-status {
  padding-right: 0;
}

.popup-picture .widget-box .meta-line.settings {
  margin-left: 22px;
}

.popup-picture .widget-box .meta-line.settings .post-settings {
  width: 22px;
}

.popup-picture .popup-picture-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: #15151f;
}

.popup-picture .popup-picture-image-wrap .popup-picture-image {
  max-width: 100%;
  max-height: 90%;
}

.popup-picture .popup-picture-image-wrap .video-wrap video {
  max-height: 90%;
  top: 5%;
}

/**
 * 31.1. Popup Picture - Media Queries
 */
@media screen and (max-width: 1365px) {
  .popup-picture {
    flex-direction: column;
  }

  .popup-picture .widget-box {
    display: block;
    width: 100%;
    border-top-left-radius: 0;
    border-bottom-right-radius: 12px;
  }

  .popup-picture .popup-picture-image-wrap {
    order: -1;
  }
}

/*------------------------------------------------------------------*/
/**
 * 32. Meta Line
 */
.meta-line {
  display: flex;
  align-items: center;
}

.meta-line + .meta-line {
  margin-left: 22px;
}

.meta-line .meta-line-list + .meta-line-text {
  margin-left: 10px;
}

.meta-line.settings {
  margin-left: 14px;
}

.meta-line.settings .post-settings {
  width: 22px;
  height: 22px;
}

.meta-line.settings + .meta-line {
  margin-left: 14px;
}

.meta-line .meta-line-text {
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.meta-line .meta-line-text.meta-line-text-trigger {
  cursor: pointer;
}

.meta-line .meta-line-text a {
  color: var(--color-text);
  font-weight: 700;
}

.meta-line .meta-line-link {
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease-in-out;
}

.meta-line .meta-line-link.light {
  color: var(--color-text-alt-2);
}

.meta-line .meta-line-link:hover {
  color: var(--color-primary-dark);
}

.meta-line .meta-line-timestamp {
  color: var(--color-text-alt);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.meta-line .meta-line-timestamp a {
  color: var(--color-text);
  font-weight: 700;
}

.meta-line .meta-line-timestamp a:hover {
  color: var(--color-primary-dark);
}

.meta-line .meta-line-timestamp.meta-line-timestamp_edited {
  margin-top: -8px;
}

.meta-line .meta-line-timestamp .user-avatar {
  display: inline-block;
  position: relative;
  top: 6px;
  left: auto;
  margin: 0 4px;
}

/*------------------------------------------------------------------*/
/**
 * 33. Reaction Options
 */
.reaction-options {
  display: flex;
  align-items: center;
  gap: calc((8 / 16) * 1em);
  height: 64px;
  padding: 0 16px;
  border-radius: 200px;
  background-color: var(--color-box-over-box-light-background);
  box-shadow: var(--color-overbox-dark-shadow);
}

.reaction-options.small {
  height: 40px;
}

.reaction-options.small .reaction-option {
  width: 20px;
  height: 20px;
}

.reaction-options .reaction-option {
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: transform .2s ease-in-out;
}

.reaction-options .reaction-option:hover {
  transform: translate(0, -4px);
}

.reaction-options .reaction-option .reaction-option-image {
  width: 100%;
  height: 100%;
}

/**
 * 33.1. Reaction Options - Media Queries
 */
@media screen and (max-width: 479px) {
  .reaction-options {
    height: 40px;
  }

  .reaction-options .reaction-option {
    width: 20px;
    height: 20px;
  }
}

/*------------------------------------------------------------------*/
/**
 * 34. Post Options
 */
.post-options {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: calc((8 / 16) * 1em);
  height: 65px;
  padding: 0 28px;
  border-top: 1px solid var(--color-divider);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: var(--color-box-background-alt);
}

.post-options > .post-option,
.post-options > .post-option-wrap {
  width: 100%;
  max-width: 160px;
}

.post-options .post-option-wrap .post-option {
  width: 100%;
}

/*--------------------
    POST OPTION
--------------------*/
.post-option {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  transition: box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}

.post-option.no-text {
  width: 80px;
}

.post-option.no-text .post-option-icon {
  margin-right: 0;
}

.post-option.reaction-active, .post-option.active, .post-option:hover {
  background-color: var(--color-box-over-box-light-background);
  box-shadow: var(--color-overbox-shadow);
}

.post-option.reaction-active .post-option-icon, .post-option.active .post-option-icon, .post-option:hover .post-option-icon {
  fill: var(--color-primary);
  opacity: 1;
}

.post-option.reaction-active .post-option-text, .post-option.active .post-option-text, .post-option:hover .post-option-text {
  color: var(--color-text);
}

.post-option .post-option-icon,
.post-option .post-option-image {
  margin-right: 16px;
}

.post-option .post-option-icon {
  fill: var(--color-icon);
  opacity: .6;
  transition: fill .2s ease-in-out, opacity .2s ease-in-out;
}

.post-option .post-option-icon.icon-thumbs-up {
  position: relative;
  top: -2px;
}

.post-option .post-option-image {
  width: 20px;
  height: 20px;
}

.post-option .post-option-text {
  color: var(--color-text-alt-2);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  transition: color .2s ease-in-out;
}

/**
 * 34.1. Post Options - Media Queries
 */
@media screen and (max-width: 479px) {
  .post-option {
    width: 80px;
  }

  .post-option .post-option-image,
  .post-option .post-option-icon {
    margin-right: 0;
  }

  .post-option .post-option-text {
    display: none;
  }
}

/*------------------------------------------------------------------*/
/**
 * 35. Post Settings
 */
.post-settings {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 30px;
  cursor: pointer;
}

.post-settings .post-settings-icon {
  fill: var(--color-icon);
  opacity: 1;
  transition: fill .2s ease-in-out;
}

.post-settings.active .post-settings-icon, .post-settings:hover .post-settings-icon {
  fill: var(--color-icon-highlighted);
}

/*------------------------------------------------------------------*/
/**
 * 36. Page Loader
 */
.page-loader {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--color-loading-screen-background);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  transition: opacity .4s ease-in-out, visibility .4s ease-in-out;
}

.page-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.page-loader .page-loader-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-loader .page-loader-info .page-loader-info-title,
.page-loader .page-loader-info .page-loader-info-text {
  color: #fff;
  text-transform: uppercase;
  text-align: center;
}

.page-loader .page-loader-info .page-loader-info-title {
  margin-top: 24px;
  font-family: var(--vikinger-font-family-secondary);
  font-size: calc((28 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 900;
}

.page-loader .page-loader-info .page-loader-info-text {
  margin-top: 10px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.page-loader .page-loader-indicator {
  margin-top: 60px;
}

.page-loader-indicator {
  margin-top: 60px;
}

/*------------------------------------------------------------------*/
/**
 * 37. Reaction Count List
 */
.reaction-count-list {
  display: flex;
  flex-direction: column;
}

.reaction-count-list.landscape {
  flex-direction: row;
}

.reaction-count-list.landscape .reaction-count {
  margin: 0 32px 0 0;
}

.reaction-count-list.landscape .reaction-count:last-child {
  margin: 0;
}

.reaction-count-list .reaction-count {
  margin-bottom: 22px;
}

.reaction-count-list .reaction-count:last-child {
  margin-bottom: 0;
}

/*---------------------
    REACTION COUNT
---------------------*/
.reaction-count {
  display: flex;
  align-items: center;
}

.reaction-count.negative .reaction-count-icon {
  fill: var(--color-primary-light);
}

.reaction-count.negative .reaction-count-text {
  color: #fff;
}

.reaction-count .reaction-count-icon {
  fill: var(--color-primary);
}

.reaction-count .reaction-count-text {
  margin-left: 16px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  position: relative;
  top: 1px;
}

/*------------------------------------------------------------------*/
/**
 * 38. Quick Post
 */
.quick-post {
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.quick-post.disabled {
  pointer-events: none;
}

.quick-post.disabled .video-wrap {
  opacity: .5;
}

.quick-post.medium .quick-post-header {
  display: flex;
  align-items: center;
  min-height: 82px;
  padding-left: 28px;
}

.quick-post.medium .quick-post-body .form-textarea textarea {
  min-height: 200px;
}

.quick-post.medium .quick-post-footer {
  min-height: 92px;
}

.quick-post.medium .quick-post-footer .quick-post-footer-actions .button {
  width: 120px;
}

.quick-post.medium .quick-post-footer .quick-post-footer-actions .button:last-child {
  width: 140px;
}

.quick-post .quick-post-header {
  border-bottom: 1px solid var(--color-divider);
}

.quick-post .quick-post-header .quick-post-header-filters-wrap {
  min-height: 80px;
  padding: 0 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quick-post .quick-post-header .quick-post-header-filters-wrap .quick-post-header-filters .form-row.split .form-item {
  min-width: 120px;
}

.quick-post .quick-post-header .quick-post-header-title {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.quick-post .quick-post-body {
  position: relative;
}

.quick-post .quick-post-body.with-share-data {
  background-color: var(--color-box-background-alt);
  padding-bottom: 28px;
}

.quick-post .quick-post-body.with-share-data > .widget-box {
  margin: 0 28px;
}

.quick-post .quick-post-body.with-share-data .widget-box-status {
  padding-bottom: 32px;
  margin-bottom: 0;
}

.quick-post .quick-post-body .form-textarea {
  background-color: var(--color-box-background-alt);
}

.quick-post .quick-post-body .form-textarea textarea {
  background-color: var(--color-box-background-alt);
  border-radius: 0;
  border: none;
}

.quick-post .quick-post-body .form-textarea textarea::placeholder {
  font-weight: 500;
}

.quick-post .quick-post-body .form-textarea-limit {
  display: flex;
  justify-content: flex-end;
  background-color: var(--color-box-background-alt);
}

.quick-post .quick-post-body .form-textarea-limit .loader-spinner-wrap .loader-spinner::after {
  background-color: var(--color-box-background-alt);
}

.quick-post .quick-post-body .form-textarea-limit .form-textarea-limit-text {
  color: var(--color-text-alt-2);
}

.quick-post .quick-post-body .uploadable-item-list {
  padding: 18px 28px;
  border-top: 1px solid var(--color-divider);
}

.quick-post .quick-post-footer-wrap {
  padding: 0 28px;
  border-top: 1px solid var(--color-divider);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.quick-post .quick-post-footer-errors {
  padding-top: 12px;
}

.quick-post .quick-post-footer-errors .quick-post-footer-error {
  margin-bottom: 12px;
}

.quick-post .quick-post-footer-errors .quick-post-footer-error:last-child {
  margin-bottom: 0;
}

.quick-post .quick-post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 76px;
}

.quick-post .quick-post-footer .quick-post-footer-actions {
  display: flex;
  align-items: center;
}

.quick-post .quick-post-footer .quick-post-footer-actions .quick-post-footer-action {
  margin-right: 22px;
}

.quick-post .quick-post-footer .quick-post-footer-actions .quick-post-footer-action:last-child {
  margin-right: 0;
}

.quick-post .quick-post-footer .quick-post-footer-actions .button {
  width: 80px;
  margin-right: 6px;
}

.quick-post .quick-post-footer .quick-post-footer-actions .button:last-child {
  margin-right: 0;
}

.quick-post .quick-post-footer .quick-post-footer-action {
  cursor: pointer;
}

.quick-post .quick-post-footer .quick-post-footer-action:hover .quick-post-footer-action-icon {
  fill: var(--color-icon-highlighted);
}

.quick-post .quick-post-footer .quick-post-footer-action .quick-post-footer-action-icon {
  transition: fill .2s ease-in-out;
}

/**
 * 38.1. Quick Post - Media Queries
 */
@media screen and (max-width: 960px) {
  .quick-post .quick-post-header .quick-post-header-filters-wrap .form-row.split {
    display: flex;
  }

  .quick-post .quick-post-header .quick-post-header-filters-wrap .form-row.split .form-item {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 680px) {
  .quick-post .quick-post-header .quick-post-header-filters-wrap {
    flex-direction: column;
    padding: 28px;
  }

  .quick-post .quick-post-header .quick-post-header-filters-wrap .quick-post-header-filters {
    margin-top: 28px;
  }
}

@media screen and (max-width: 479px) {
  .quick-post.medium .quick-post-footer .quick-post-footer-actions .button,
  .quick-post.medium .quick-post-footer .quick-post-footer-actions .button:last-child {
    width: 80px;
  }
}

/*------------------------------------------------------------------*/
/**
 * 39. Mention List
 */
.mention-list {
  width: 180px;
  padding: 8px 0;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: absolute;
  z-index: 10000;
  overflow-y: auto;
}

.mention-list .mention-list-error-text {
  padding: 0 16px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 28px;
}

.mention-list .mention-list-item {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 16px;
  cursor: pointer;
}

.mention-list .mention-list-item.active {
  background-color: var(--color-box-hover-background);
}

.mention-list .mention-list-item .user-avatar,
.mention-list .mention-list-item .user-avatar-circle {
  margin-right: 6px;
  position: relative;
  top: auto;
  left: auto;
}

.mention-list .mention-list-item .mention-list-item-text {
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.mention-list .mention-list-item .mention-list-item-text .highlighted {
  color: var(--color-primary);
}

/*------------------------------------------------------------------*/
/**
 * 40. Picture Collage
 */
.picture-collage,
.picture-collage .picture-collage-row {
  display: flex;
  gap: calc((6 / 16) * 1em);
}

.picture-collage {
  flex-direction: column;
}

.picture-collage .picture-collage-row.medium .picture-collage-item {
  width: 50%;
  height: 240px;
}

.picture-collage .picture-collage-row .picture-collage-item {
  width: 33.3333333333%;
  height: 160px;
  position: relative;
  cursor: pointer;
}

.picture-collage .picture-collage-row .picture-collage-item .photo-preview-wrap,
.picture-collage .picture-collage-row .picture-collage-item .photo-preview-wrap .photo-preview {
  width: 100%;
  height: 100%;
}

.picture-collage .picture-collage-row .picture-collage-item .picture-collage-item-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-color: rgba(35, 210, 226, 0.9);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.picture-collage .picture-collage-row .picture-collage-item .picture-collage-item-overlay .picture-collage-item-overlay-text {
  color: #fff;
  font-size: calc((24 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

/*------------------------------------------------------------------*/
/**
 * 41. Stats Decoration
 */
.stats-decoration {
  height: 96px;
  padding: 28px 0 0 88px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: relative;
}

.stats-decoration.secondary .stats-decoration-icon-wrap {
  background-color: var(--color-secondary);
}

.stats-decoration.primary .stats-decoration-icon-wrap {
  background-color: var(--color-primary);
}

.stats-decoration.v2 {
  height: 118px;
  padding: 24px 0 0 28px;
}

.stats-decoration.v2 .stats-decoration-title {
  font-size: calc((28 / var(--vikinger-font-size-base)) * 1rem);
}

.stats-decoration.v2 .stats-decoration-subtitle {
  margin-top: 8px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.stats-decoration.v2 .stats-decoration-text {
  margin-top: 6px;
}

.stats-decoration.v2.big {
  height: 213px;
  padding: 46px 0 0;
  text-align: center;
}

.stats-decoration.v2.big .stats-decoration-title {
  font-size: calc((48 / var(--vikinger-font-size-base)) * 1rem);
}

.stats-decoration .stats-decoration-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  position: absolute;
  top: 26px;
  left: 28px;
  z-index: 1;
}

.stats-decoration .stats-decoration-icon-wrap .stats-decoration-icon {
  fill: #fff;
}

.stats-decoration .stats-decoration-title {
  font-size: calc((22 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.stats-decoration .stats-decoration-text {
  margin-top: 8px;
  color: var(--color-text-alt-2);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

/*------------------------------------------------------------------*/
/**
 * 42. Sidebar Box
 */
.sidebar-box {
  padding: 32px 28px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.sidebar-box.no-padding {
  padding: 0;
}

.sidebar-box.margin-top {
  margin-top: 56px;
}

.sidebar-box .sidebar-box-title {
  margin-top: 36px;
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.sidebar-box .sidebar-box-title.medium-space {
  margin-top: 60px;
}

.sidebar-box .sidebar-box-title:first-child {
  margin-top: 0;
}

.sidebar-box .sidebar-menu + .button {
  margin-top: 28px;
}

.sidebar-box .sidebar-menu + .sidebar-box-footer {
  border-top: 1px solid var(--color-divider);
}

.sidebar-box .sidebar-box-footer {
  padding: 28px;
}

.sidebar-box .sidebar-box-footer .button:first-child {
  margin-top: 0;
}

.sidebar-box .sidebar-box-items {
  margin-top: 36px;
}

.sidebar-box .sidebar-box-items:first-child {
  margin-top: 0;
}

.sidebar-box .sidebar-box-items.small-space {
  margin-top: 32px;
}

.sidebar-box .sidebar-box-items .form-input.small {
  width: 80px;
}

.sidebar-box .sidebar-box-items .user-status + .badge-list {
  margin-top: 20px;
}

.sidebar-box .sidebar-box-items .badge-list + .button {
  margin-top: 32px;
}

.sidebar-box .sidebar-box-items .form .checkbox-wrap + .checkbox-wrap {
  margin-top: 22px;
}

.sidebar-box .sidebar-box-items .form + .button {
  margin-top: 30px;
}

.sidebar-box .sidebar-box-items .button + .user-stats {
  margin-top: 60px;
}

.sidebar-box .button {
  width: 100%;
  margin-top: 22px;
}

.sidebar-box .button.small-space {
  margin-top: 16px;
}

/*------------------------------------------------------------------*/
/**
 * 43. Sidebar Menu
 */
.sidebar-menu .sidebar-menu-item:first-child .sidebar-menu-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.sidebar-menu .sidebar-menu-item:last-child {
  border-bottom: none;
}

.sidebar-menu .sidebar-menu-item:last-child:not(.selected) .sidebar-menu-header {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.sidebar-menu .sidebar-menu-item:last-child .sidebar-menu-body {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.sidebar-menu.round-borders .sidebar-menu-item:last-child .sidebar-menu-header,
.sidebar-menu.round-borders .sidebar-menu-item:last-child .sidebar-menu-body {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/*--------------------------
    SIDEBAR MENU ITEM
--------------------------*/
.sidebar-menu-item {
  border-bottom: 1px solid var(--color-divider);
}

.sidebar-menu-item.sidebar-menu-item-disable-header .sidebar-menu-body {
  border-top: none;
  border-radius: 12px;
  background-color: var(--color-box-background);
}

.sidebar-menu-item.selected .sidebar-menu-header .sidebar-menu-header-control-icon .sidebar-menu-header-control-icon-open {
  display: block;
}

.sidebar-menu-item.selected .sidebar-menu-header .sidebar-menu-header-control-icon .sidebar-menu-header-control-icon-closed {
  display: none;
}

/*------------------------------------------------------------------*/
/**
 * 44. Sidebar Menu Header
 */
.sidebar-menu-header {
  height: 112px;
  padding: 28px 26px 0 60px;
  background-color: var(--color-box-background);
  cursor: pointer;
  position: relative;
}

.sidebar-menu-header .sidebar-menu-header-icon {
  fill: var(--color-primary);
  position: absolute;
  top: 28px;
  left: 28px;
}

.sidebar-menu-header .sidebar-menu-header-control-icon .sidebar-menu-header-control-icon-open,
.sidebar-menu-header .sidebar-menu-header-control-icon .sidebar-menu-header-control-icon-closed {
  fill: var(--color-icon-highlighted);
  position: absolute;
  top: 32px;
  right: 28px;
}

.sidebar-menu-header .sidebar-menu-header-control-icon .sidebar-menu-header-control-icon-open {
  display: none;
}

.sidebar-menu-header .sidebar-menu-header-title {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.sidebar-menu-header .sidebar-menu-header-text {
  margin-top: 4px;
  color: var(--color-text-alt);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.3333333333em;
}

/*------------------------------------------------------------------*/
/**
 * 45. Sidebar Menu Body
 */
.sidebar-menu-body {
  padding: 12px 0 12px 60px;
  border-top: 1px solid var(--color-divider);
  background-color: var(--color-box-background-alt);
}

.sidebar-menu-body.secondary .sidebar-menu-link:hover, .sidebar-menu-body.secondary .sidebar-menu-link.active {
  color: var(--color-secondary);
}

.sidebar-menu-body .sidebar-menu-link {
  display: block;
  height: 34px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 34px;
  cursor: pointer;
  transition: color .25s ease-in-out, -webkit-transform .2s ease-in-out;
  transition: transform .2s ease-in-out, color .25s ease-in-out;
  transition: transform .2s ease-in-out, color .25s ease-in-out, -webkit-transform .2s ease-in-out;
}

.sidebar-menu-body .sidebar-menu-link:hover, .sidebar-menu-body .sidebar-menu-link.active {
  color: var(--color-primary-dark);
}

.sidebar-menu-body .sidebar-menu-link:hover {
  transform: translate(4px, 0);
}

/*------------------------------------------------------------------*/
/**
 * 46. Upload Box
 */
.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 140px;
  padding: 32px 28px 28px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  cursor: pointer;
  transition: transform .2s ease-in-out, box-shadow .25s ease-in-out;
}

.upload-box:hover {
  box-shadow: var(--color-overbox-dark-shadow);
  transform: translate(0, -4px);
}

.upload-box:hover .upload-box-icon {
  fill: var(--color-primary);
}

.upload-box.upload-box-shadowed {
  box-shadow: var(--color-overbox-dark-shadow);
}

.upload-box.active {
  box-shadow: var(--color-overbox-dark-shadow);
}

.upload-box.active .upload-box-icon {
  fill: var(--color-primary);
}

.upload-box .upload-box-file-input {
  display: none;
}

.upload-box .upload-box-icon {
  fill: var(--color-icon);
  transition: fill .25s ease-in-out;
}

.upload-box .upload-box-title {
  margin-top: 26px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  max-width: 228px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.upload-box .upload-box-text {
  margin-top: 4px;
  color: var(--color-text-alt);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

/*------------------------------------------------------------------*/
/**
 * 47. Switch Option List
 */
.switch-option-list {
  display: flex;
  flex-direction: column;
  gap: calc((26 / 16) * 1em);
}

/*----------------------
    SWITCH OPTION
----------------------*/
.switch-option {
  position: relative;
}

.switch-option .switch-option-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.switch-option .switch-option-text {
  margin-top: 4px;
  color: #8f91ac;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.4285714286em;
}

.switch-option .form-switch {
  position: absolute;
  top: 0;
  right: 0;
}

.switch-option .button {
  width: 260px;
  margin-top: 32px;
}

.switch-option .switch-option-meta {
  color: #8f91ac;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  position: absolute;
  bottom: 12px;
  right: 0;
}

.switch-option .switch-option-meta .bold {
  color: #3e3f5e;
  font-weight: 700;
}

/**
 * 47.1. Switch Option List - Media Queries
 */
@media screen and (max-width: 960px) {
  .switch-option .form-switch {
    margin-top: 12px;
    position: relative;
    top: auto;
    right: auto;
  }

  .switch-option .button {
    margin-top: 22px;
  }

  .switch-option .switch-option-meta {
    margin-top: 16px;
    position: static;
  }
}

@media screen and (max-width: 479px) {
  .switch-option .button {
    width: 100%;
  }
}

/*------------------------------------------------------------------*/
/**
 * 48. Notification Box List
 */
.notification-box-list {
  display: flex;
  flex-direction: column;
  gap: calc((12 / 16) * 1em);
}

/*-----------------------
    NOTIFICATION BOX
-----------------------*/
.notification-box {
  display: flex;
  align-items: center;
  min-height: 88px;
  padding: 22px 28px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: relative;
}

.notification-box.unread {
  background-color: var(--color-box-background-alt);
}

.notification-box.unread .user-status .user-status-icon {
  fill: var(--color-icon);
  opacity: 1;
}

.notification-box:hover .notification-box-close-button {
  display: flex;
}

.notification-box:hover .mark-unread-button,
.notification-box:hover .mark-read-button {
  display: block;
}

.notification-box .user-status {
  width: 100%;
}

.notification-box .notification-box-close-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 6px;
  right: 6px;
  cursor: pointer;
}

.notification-box .notification-box-close-button .notification-box-close-button-icon {
  fill: var(--color-icon-highlighted);
  width: 8px;
  height: 8px;
}

.notification-box .notification-box-close-button,
.notification-box .mark-unread-button,
.notification-box .mark-read-button {
  display: none;
}

.notification-box .mark-unread-button,
.notification-box .mark-read-button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: absolute;
  top: 12px;
  right: 30px;
  cursor: pointer;
}

.notification-box .mark-unread-button {
  border: 2px solid var(--color-primary);
}

.notification-box .mark-read-button {
  background-color: var(--color-primary);
}

/**
 * 48.1. Notification Box List - Media Queries
 */
@media screen and (max-width: 1365px) {
  .notification-box .notification-box-close-button {
    display: flex;
  }

  .notification-box .mark-unread-button,
  .notification-box .mark-read-button {
    display: block;
  }
}

/*------------------------------------------------------------------*/
/**
 * 49. Create Entity Box
 */
.create-entity-box {
  height: 284px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: relative;
}

.create-entity-box.v2 {
  height: 360px;
}

.create-entity-box.v2 .create-entity-box-cover {
  height: 180px;
}

.create-entity-box.v2 .create-entity-box-avatar {
  top: 36px;
}

.create-entity-box.v2 .create-entity-box-info {
  padding-top: 28px;
}

.create-entity-box.v2 .create-entity-box-title {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  text-align: left;
}

.create-entity-box.v2 .create-entity-box-category {
  margin-top: 8px;
}

.create-entity-box .create-entity-box-cover {
  height: 70px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom: 1px dashed var(--color-divider);
  background-color: var(--color-box-background-alt);
}

.create-entity-box .create-entity-box-avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 110px;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -50px;
}

.create-entity-box .create-entity-box-avatar .user-avatar-border {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.create-entity-box .create-entity-box-avatar.primary .create-entity-box-avatar-icon {
  fill: var(--color-primary);
}

.create-entity-box .create-entity-box-avatar .create-entity-box-avatar-icon {
  fill: var(--color-secondary);
  position: relative;
  z-index: 2;
}

.create-entity-box .create-entity-box-info {
  padding: 60px 28px 0;
}

.create-entity-box .create-entity-box-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-align: center;
}

.create-entity-box .create-entity-box-category {
  padding-left: 16px;
  color: var(--color-text-alt-2);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  position: relative;
}

.create-entity-box .create-entity-box-category::before {
  content: '';
  width: 8px;
  height: 8px;
  border: 2px solid var(--color-icon);
  border-radius: 50%;
  position: absolute;
  top: 1px;
  left: 0;
}

.create-entity-box .create-entity-box-text {
  margin-top: 6px;
  color: var(--color-text-alt);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  text-align: center;
}

.create-entity-box .button {
  margin-top: 36px;
}

/*------------------------------------------------------------------*/
/**
 * 50. Notification Section
 */
.notification-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}

.notification-section .notification-section-icon {
  opacity: .4;
  margin-left: 26px;
}

.notification-section .notification-section-title {
  margin-top: 54px;
  color: var(--color-text);
  font-size: calc((20 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-align: center;
}

.notification-section .notification-section-text {
  margin-top: 12px;
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  text-align: center;
}

/*------------------------------------------------------------------*/
/**
 * 51. Quick Filters
 */
.quick-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 28px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.quick-filters .quick-filters-tabs {
  display: flex;
  gap: calc((12 / 16) * 1em);
  margin-right: 26px;
}

.quick-filters .quick-filters-tabs .quick-filters-tab {
  height: 80px;
  flex-shrink: 0;
  border-bottom: 4px solid transparent;
  color: var(--color-text-alt-2);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 80px;
  cursor: pointer;
  transition: border-bottom-color .2s ease-in-out, color .2s ease-in-out;
}

.quick-filters .quick-filters-tabs .quick-filters-tab.active {
  border-bottom-color: var(--color-primary);
  color: var(--color-text);
}

.quick-filters .quick-filters-form-mobile {
  display: none;
}

.quick-filters .quick-filters-form {
  width: 160px;
  flex-shrink: 0;
}

/**
 * 51.1. Quick Filters - Media Queries
 */
@media screen and (max-width: 680px) {
  .quick-filters {
    padding: 0 16px;
  }

  .quick-filters .quick-filters-tabs {
    display: none;
  }

  .quick-filters .quick-filters-form {
    width: 100%;
    flex-shrink: 1;
    margin-right: 12px;
  }
  
  .quick-filters .quick-filters-form:last-child {
    margin-right: 0;
  }

  .quick-filters .quick-filters-form-mobile {
    display: block;
  }
}

/*------------------------------------------------------------------*/
/**
 * 52. Reaction Box
 */
.reaction-box {
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.reaction-box .reaction-box-options {
  display: flex;
  gap: calc((12 / 16) * 1em);
  height: 52px;
  padding: 0 28px;
  border-bottom: 1px solid var(--color-divider);
}

.reaction-box .reaction-box-options .reaction-box-option {
  display: flex;
  align-items: center;
  border-bottom: 4px solid transparent;
  cursor: pointer;
}

.reaction-box .reaction-box-options .reaction-box-option.active {
  border-bottom-color: var(--color-primary);
}

.reaction-box .reaction-box-options .reaction-box-option .reaction-box-option-image {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

.reaction-box .reaction-box-options .reaction-box-option .reaction-box-option-text {
  color: var(--color-text);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.reaction-box .reaction-box-content .reaction-box-item {
  height: 406px;
  padding: 32px 28px;
  overflow-y: auto;
}

/*------------------------------------------------------------------*/
/**
 * 53. Uploadable Item List
 */
.uploadable-item-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, 96px);
  grid-gap: 12px;
}

.uploadable-item-list.disabled {
  opacity: .5;
}

.uploadable-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 96px;
  border-radius: 12px;
  position: relative;
}

.uploadable-item .uploadable-item-remove-button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.uploadable-item-remove-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background-color: var(--color-tertiary);
  cursor: pointer;
}

.uploadable-item-remove-button .uploadable-item-remove-button-icon {
  width: 8px;
  height: 8px;
  pointer-events: none;
}

.uploadable-item-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 96px;
  border-radius: 12px;
  border: 2px dashed var(--color-border);
}

.uploadable-item-selector .uploadable-item-selector-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background-color: var(--color-primary);
  cursor: pointer;
}

.uploadable-item-selector .uploadable-item-selector-button .uploadable-item-selector-button-icon {
  fill: #fff;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.uploadable-item-selector-input {
  display: none;
}

/*------------------------------------------------------------------*/
/**
 * 54. Message Box
 */
.message-box {
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  padding: 80px 0 50px;
  position: relative;
}

.message-box.no-padding-bottom {
  padding-bottom: 0;
}

.message-box .message-box-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  position: absolute;
  top: -16px;
  left: 50%;
  margin-left: -30px;
}

.message-box .message-box-icon-wrap.primary {
  background-color: var(--color-primary);
}

.message-box .message-box-icon-wrap.secondary {
  background-color: var(--color-secondary);
}

.message-box .message-box-icon-wrap.tertiary {
  background-color: var(--color-tertiary);
}

.message-box .message-box-icon-wrap .message-box-icon {
  fill: #fff;
}

.message-box .message-box-title {
  font-size: calc((18 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-align: center;
}

.message-box .message-box-text {
  width: 70%;
  margin: 20px auto 0;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.4285714286em;
  text-align: center;
}

.message-box .message-box-actions {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  padding-bottom: 32px;
}

.message-box .message-box-actions .message-box-action {
  width: 140px;
  margin-right: 16px;
  cursor: pointer;
}

.message-box .message-box-actions .message-box-action:last-child {
  margin-right: 0;
}

/*------------------------------------------------------------------*/
/**
 * 55. Alert Box
 */
.alert-box {
  min-height: 100px;
  border-radius: 12px;
  padding: 32px 32px 26px 108px;
  background-color: #4f8dff;
  position: relative;
}

.alert-box.alert-box-success {
  background-color: #00c7d9;
}

.alert-box.alert-box-info {
  background-color: #615dfa;
}

.alert-box.alert-box-error {
  background-color: #fd4350;
}

.alert-box .alert-box-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  position: absolute;
  top: 20px;
  left: 20px;
  box-shadow: 3px 5px 20px 0 rgba(0, 0, 0, 0.16);
}

.alert-box .alert-box-icon-wrap .alert-box-icon {
  fill: #fff;
}

.alert-box .alert-box-title,
.alert-box .alert-box-text {
  color: #fff;
}

.alert-box .alert-box-title {
  font-size: calc((18 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.alert-box .alert-box-text {
  margin-top: 6px;
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.5em;
}

/**
 * 55.1. Alert Box - Media Queries
 */
@media screen and (max-width: 479px) {
  .alert-box {
    padding: 16px 28px 26px 28px;
  }

  .alert-box .alert-box-icon-wrap {
    margin: 0 auto 32px;
    position: static;
  }

  .alert-box .alert-box-title,
  .alert-box .alert-box-text {
    text-align: center;
  }
}

/*------------------------------------------------------------------*/
/**
 * 56. Alert Line
 */
.alert-line {
  min-height: 60px;
  border-radius: 12px;
  padding: 20px 28px 20px 64px;
  background-color: #4f8dff;
  position: relative;
}

.alert-line.alert-line-success {
  background-color: #00c7d9;
}

.alert-line.alert-line-info {
  background-color: #615dfa;
}

.alert-line.alert-line-error {
  background-color: #fd4350;
}

.alert-line .alert-line-icon {
  fill: #fff;
  position: absolute;
  top: 20px;
  left: 20px;
}

.alert-line .alert-line-text {
  color: #fff;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.5em;
}

.alert-line .alert-line-text .bold {
  font-weight: 700;
}

/*------------------------------------------------------------------*/
/**
 * 57. Item List Options
 */
.item-list-options {
  display: flex;
}

.item-list-options > * {
  margin-right: 32px;
}

.item-list-options > *:last-child {
  margin-right: 0;
}

.item-list-options .item-list-option-wrap {
  display: flex;
}

.item-list-options .item-list-option-wrap .loader-spinner-wrap {
  margin-left: 12px;
}

.item-list-options .item-list-option-wrap .loader-spinner-wrap .loader-spinner::after {
  background-color: var(--color-body);
}

.item-list-options .item-list-option {
  color: var(--color-text-alt-2);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease-in-out;
}

.item-list-options .item-list-option:hover {
  color: var(--color-text);
}

/*------------------------------------------------------------------*/
/**
 * 58. Point Item List
 */
.point-item-list {
  display: flex;
  gap: calc((14 / 16) * 1em);
}

.point-item-list.negative .point-item .point-item-text {
  color: var(--color-text);
}

.point-item {
  display: flex;
  align-items: center;
}

.point-item .point-item-image {
  margin-right: 12px;
  width: 14px;
  height: auto;
}

.point-item .point-item-text {
  color: #fff;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

/*------------------------------------------------------------------*/
/**
 * 59. Point Reward Box
 */
.point-reward-box {
  display: flex;
  padding: 32px 0 32px 90px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: relative;
}

.point-reward-box .point-reward-box-icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-box-over-box-light-background);
  box-shadow: var(--color-overbox-shadow);
  position: absolute;
  top: 22px;
  left: 28px;
}

.point-reward-box .point-reward-box-icon-wrap .point-reward-box-icon {
  fill: var(--color-icon-highlighted);
}

.point-reward-box .text-sticker {
  position: absolute;
  top: 10px;
  right: -6px;
}

.point-reward-box .point-reward-box-info.point-reward-box-info-description {
  width: 320px;
  padding-right: 32px;
}

.point-reward-box .point-reward-box-info .point-reward-box-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 1.2857142857em;
}

.point-reward-box .point-reward-box-info .point-reward-box-text {
  margin-top: 6px;
  color: var(--color-text-alt);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

/**
 * 59.1. Point Reward Box - Media Queries
 */
@media screen and (max-width: 1365px) {
  .point-reward-box {
    margin-top: 25px;
    padding: 54px 32px 32px;
    flex-direction: column;
  }

  .point-reward-box .point-reward-box-icon-wrap {
    top: -14px;
    left: 50%;
    margin-left: -23px;
  }

  .point-reward-box .point-reward-box-info.point-reward-box-info-description {
    width: auto;
    padding-right: 0;
    margin-bottom: 18px;
  }
}

/*------------------------------------------------------------------*/
/**
 * 60. Point Item Box
 */
.point-item-box {
  padding: 32px 26px 50px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.point-item-box .point-item-box-image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: var(--color-box-over-box-light-background);
  box-shadow: var(--color-overbox-shadow);
}

.point-item-box .point-item-box-image {
  width: 40px;
  height: auto;
}

.point-item-box .point-item-box-title,
.point-item-box .point-item-box-subtitle {
  font-weight: 700;
  text-align: center;
}

.point-item-box .point-item-box-title {
  margin-top: 40px;
  font-size: calc((36 / var(--vikinger-font-size-base)) * 1rem);
}

.point-item-box .point-item-box-subtitle {
  margin-top: 8px;
  font-size: calc((18 / var(--vikinger-font-size-base)) * 1rem);
}

.point-item-box .point-item-box-text {
  width: 170px;
  margin: 20px auto 0;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.4285714286em;
  text-align: center;
}

/*------------------------------------------------------------------*/
/**
 * 61. Point Item Line List
 */
.point-item-line-list {
  display: flex;
  flex-direction: column;
  gap: calc((26 / 16) * 1em);
}

.point-item-line {
  display: flex;
  align-items: center;
}

.point-item-line .point-item-line-image {
  width: 28px;
  height: auto;
  margin-right: 12px;
}

.point-item-line .point-item-line-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.point-item-line .point-item-line-text {
  margin-top: 4px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

/*------------------------------------------------------------------*/
/**
 * 62. Achievement Item Box
 */
.achievement-item-box {
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: relative;
}

.achievement-item-box .text-sticker {
  position: absolute;
  top: 10px;
  right: -6px;
}

.achievement-item-box .achievement-item-box-info {
  padding-top: 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.achievement-item-box .achievement-item-box-info .achievement-item-box-info-top {
  padding: 0 40px;
}

.achievement-item-box .achievement-item-box-info .achievement-item-box-info-top.big-padding-bottom {
  padding-bottom: 48px;
}

.achievement-item-box .achievement-item-box-image-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 86px;
  height: 86px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: var(--color-box-over-box-light-background);
  box-shadow: var(--color-overbox-shadow);
}

.achievement-item-box .achievement-item-box-image-wrap .achievement-item-box-image {
  width: 46px;
  height: auto;
}

.achievement-item-box .achievement-item-box-image-wrap + .achievement-item-box-title {
  margin-top: 40px;
}

.achievement-item-box .achievement-item-box-image {
  display: block;
  width: 82px;
  height: auto;
  margin: 0 auto;
}

.achievement-item-box .achievement-item-box-title {
  margin-top: 36px;
  font-size: calc((18 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-align: center;
}

.achievement-item-box .achievement-item-box-text {
  width: 180px;
  margin: 16px auto 0;
}

.achievement-item-box .achievement-item-box-text p {
  color: var(--color-text);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.4285714286em;
  text-align: center;
}

.achievement-item-box .achievement-item-box-subtitle {
  display: flex;
  justify-content: space-between;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

.achievement-item-box .achievement-item-box-requirements {
  margin-top: 32px;
}

.achievement-item-box .achievement-item-box-requirements .checklist-items {
  margin-top: 12px;
}

.achievement-item-box .achievement-item-box-unlock-form {
  margin: 36px 40px 0;
}

.achievement-item-box .achievement-item-box-unlock-form .button {
  display: flex;
  justify-content: center;
  align-items: center;
}

.achievement-item-box .achievement-item-box-unlock-form .button .achievement-item-box-unlocked-button-image {
  width: 14px;
  height: auto;
  margin-left: 6px;
}

.achievement-item-box .achievement-item-box-unlocked-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 36px 40px 0;
  background-color: var(--color-box-over-box-light-background);
  box-shadow: var(--color-overbox-shadow);
  border-radius: 200px;
  color: var(--color-text);
  cursor: auto;
}

.achievement-item-box .achievement-item-box-unlocked-button .achievement-item-box-unlocked-button-user {
  margin-left: 4px;
}

.achievement-item-box .achievement-item-box-unlocked-button .achievement-item-box-unlocked-button-image {
  width: 14px;
  height: auto;
  margin-left: 6px;
}

.achievement-item-box .progress-stat {
  max-width: 204px;
  margin: 54px auto 28px;
}

.achievement-item-box .achievement-item-box-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 0;
  min-height: 90px;
  border-top: 1px solid var(--color-divider);
  background-color: var(--color-box-background-alt);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.achievement-item-box .achievement-item-box-footer .achievement-item-box-footer-title {
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.achievement-item-box .achievement-item-box-footer .achievement-item-box-footer-title + .achievement-item-box-footer-title {
  margin-top: 18px;
}

.achievement-item-box .achievement-item-box-footer .user-avatar-list {
  margin-top: 10px;
  padding: 0 28px;
  flex-wrap: wrap;
  justify-content: center;
}

/*------------------------------------------------------------------*/
/**
 * 63. Checklist Items
 */
.checklist-items {
  max-height: 82px;
  padding-right: 12px;
  overflow: hidden auto;
}

.checklist-items .checklist-item + .checklist-item {
  margin-top: 8px;
}

.checklist-item {
  display: flex;
}

.checklist-item .checklist-item-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin: 3px 8px 0 0;
  border-radius: 4px;
  background-color: var(--color-divider);
}

.checklist-item .checklist-item-box .checklist-item-box-icon {
  fill: #fff;
  display: none;
}

.checklist-item .checklist-item-box.active {
  background: linear-gradient(45deg, #615dfa, #23d2e2);
}

.checklist-item .checklist-item-box.active .checklist-item-box-icon {
  display: block;
}

.checklist-item .checklist-item-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.4285714286em;
  font-weight: 500;
}

/*------------------------------------------------------------------*/
/**
 * 64. Social Items
 */
.social-items {
  display: flex;
  gap: calc((24 / 16) * 1em);
}

.social-item {
  transition: transform .2s ease-in-out;
}

.social-item:hover {
  transform: translate(0, -2px);
}

.social-item.facebook:hover .social-item-icon {
  fill: #3763d2;
}

.social-item.twitter:hover .social-item-icon {
  fill: #1abcff;
}

.social-item.instagram:hover .social-item-icon {
  fill: #f8468d;
}

.social-item.youtube:hover .social-item-icon {
  fill: #fd434f;
}

.social-item.twitch:hover .social-item-icon {
  fill: #7b5dfa;
}

.social-item.linkedin:hover .social-item-icon {
  fill: #0077b5;
}

.social-item.pinterest:hover .social-item-icon {
  fill: #cd2e3f;
}

.social-item.tiktok:hover .social-item-icon {
  fill: #000000;
}

.social-item.github:hover .social-item-icon {
  fill: #303742;
}

.social-item.messenger:hover .social-item-icon {
  fill: #0084ff;
}

.social-item.reddit:hover .social-item-icon {
  fill: #f74300;
}

.social-item.whatsapp:hover .social-item-icon {
  fill: #2fbe38;
}

.social-item.dribbble:hover .social-item-icon {
  fill: #f761ab;
}

.social-item.discord:hover .social-item-icon {
  fill: #7289da;
}

.social-item.spotify:hover .social-item-icon {
  fill: #1dd05d;
}

.social-item .social-item-icon {
  fill: var(--color-icon-highlighted);
  width: 12px;
  height: 12px;
  transition: fill .2s ease-in-out;
}

/*------------------------------------------------------------------*/
/**
 * 65. Account Hub Content
 */
.account-hub-content .account-hub-content-options {
  display: flex;
  justify-content: flex-end;
  margin-top: 48px;
}

.account-hub-content .account-hub-content-options .button {
  padding: 0 32px;
}

/*------------------------------------------------------------------*/
/**
 * 66. Mention Block
 */
.mention-block {
  display: flex;
  align-items: center;
}

.mention-block .mention-block-avatar {
  margin-right: 8px;
}

.mention-block .mention-block-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.mention-block .mention-block-action {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  background-color: #3e3f5e;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .2s ease-in-out;
}

.mention-block .mention-block-action .mention-block-action-icon {
  width: 8px;
  height: 8px;
  pointer-events: none;
}

.mention-block .mention-block-action:hover {
  background-color: #fd4350;
}

/*------------------------------------------------------------------*/
/**
 * 67. Author Preview
 */
.author-preview {
  display: flex;
  flex-direction: column;
}

.author-preview.author-preview-landscape {
  flex-direction: row;
  align-items: center;
}

.author-preview.author-preview-landscape .author-preview-info {
  margin: 0 0 0 8px;
}

.author-preview .author-preview-avatar {
  flex-shrink: 0;
}

.author-preview .author-preview-info {
  margin-top: 8px;
}

.author-preview .author-preview-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  word-break: break-word;
}

.author-preview .author-preview-text {
  margin-top: 4px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  word-break: break-word;
}

/*------------------------------------------------------------------*/
/**
 * 68. Widget Box
 */
.widget-box {
  padding: 32px 28px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: relative;
}

.widget-box.widget-box-deleted {
  filter: grayscale(0.8);
  opacity: .7 !important;
  pointer-events: none;
}

.widget-box.no-padding {
  padding: 0;
}

.widget-box.no-padding .widget-box-title {
  padding: 0 28px;
}

.widget-box.no-padding .widget-box-title:first-child {
  padding-top: 32px;
}

.widget-box.no-settings .widget-box-status .widget-box-status-content .user-status {
  padding-right: 0;
}

.widget-box.right-padded {
  padding-right: 48px;
}

.widget-box.bottom-padded {
  padding-bottom: 32px;
}

.widget-box.widget-box-bottom-sidebar {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}

.widget-box .widget-box-settings {
  position: absolute;
  top: 22px;
  right: 19px;
  z-index: 9999;
}

.widget-box .tag-stickers {
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: -8px;
  right: 28px;
}

.widget-box .tag-stickers .tag-sticker {
  margin-right: 8px;
}

.widget-box .tag-stickers .tag-sticker:last-child {
  margin-right: 0;
}

.widget-box .widget-box-controls {
  position: absolute;
  top: 28px;
  right: 22px;
  z-index: 9999;
}

.widget-box .widget-box-controls .slider-controls {
  display: flex;
}

.widget-box .widget-box-controls .slider-controls .slider-control:first-child {
  margin-right: 2px;
}

.widget-box .widget-box-actions {
  display: flex;
  justify-content: space-between;
}

.widget-box .widget-box-actions .widget-box-action {
  display: flex;
}

.widget-box .widget-box-actions .widget-box-action .form-select.v2 {
  top: -6px;
}

.widget-box .widget-box-footer-actions {
  padding: 40px 28px 32px;
}

.widget-box .widget-box-footer-actions .button {
  width: 270px;
}

.widget-box .widget-box-title {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.widget-box .widget-box-title .highlighted {
  color: var(--color-primary-dark);
}

.widget-box .widget-box-title + .widget-box-text {
  margin-top: 8px;
}

.widget-box .widget-box-title + .no-results-text {
  margin: 16px 0 32px;
}

.widget-box .widget-box-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.7142857143em;
  font-weight: 500;
}

.widget-box .widget-box-text.light {
  color: var(--color-text-alt);
}

.widget-box .widget-box-text .bold {
  font-weight: 700;
}

.widget-box .widget-box-text + .widget-box-text {
  margin-top: 16px;
}

.widget-box .widget-box-text + .button {
  margin-top: 32px;
}

.widget-box .widget-box-content {
  margin-top: 36px;
}

.widget-box .widget-box-content + .widget-box-title {
  margin-top: 36px;
}

.widget-box .widget-box-content:first-child {
  margin-top: 0;
}

.widget-box .widget-box-content.small-margin-top {
  margin-top: 28px;
}

.widget-box .widget-box-content.no-margin-top {
  margin-top: 0;
}

.widget-box .widget-box-content.padded-for-scroll {
  height: 358px;
  padding-bottom: 28px;
}

.widget-box .widget-box-content.padded-for-scroll.small {
  height: 320px;
}

.widget-box .widget-box-content.padded-for-scroll.medium {
  height: 676px;
}

.widget-box .widget-box-content.padded-for-scroll .scroll-content {
  padding: 0 28px;
}

.widget-box .widget-box-content .paragraph + .information-line-list {
  margin-top: 24px;
}

.widget-box .widget-box-content .loader-spinner-wrap {
  display: flex;
  justify-content: center;
}

.widget-box .widget-box-content .form-input-checkbox {
  margin-top: 16px;
}

.widget-box .widget-box-content .widget-box-form {
  margin-top: 32px;
}

.widget-box .widget-box-content .widget-box-form .form-input,
.widget-box .widget-box-content .widget-box-form .form-select {
  margin-top: 28px;
}

.widget-box .widget-box-content .alert-line + .button {
  margin-top: 16px;
}

.widget-box .widget-box-content .filters + .user-status-list,
.widget-box .widget-box-content .filters + .filters-items {
  margin-top: 24px;
}

.widget-box .widget-box-content .filters + .loader-spinner-wrap,
.widget-box .widget-box-content .filters + .no-results-text {
  margin-top: 32px;
}

.widget-box .widget-box-content .progress-arc-wrap {
  margin: 0 auto;
}

.widget-box .widget-box-content .user-stats {
  margin-top: 36px;
}

.widget-box .widget-box-content .user-stats.reference .user-stat {
  width: 100%;
}

.widget-box .widget-box-content .user-stats.reference .user-stat::after {
  height: 40px;
  top: 20px;
}

.widget-box .widget-box-content .user-stats + .user-stats {
  margin-top: 32px;
}

.widget-box .widget-box-hollow {
  margin-top: 36px;
  padding: 36px 28px;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  background-color: var(--color-box-background-alt);
}

.widget-box .widget-box-hollow.height-limit {
  max-height: 322px;
  overflow: hidden auto;
}

.widget-box .button-show-more {
  margin: -28px 28px 28px;
}

.widget-box .quick-post {
  margin-top: 20px;
  border-radius: 0;
  border-top: 1px solid var(--color-divider);
}

.widget-box .widget-box-status {
  padding-top: 24px;
  margin-bottom: 28px;
  position: relative;
}

.widget-box .widget-box-status.widget-box-status-limited {
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  overflow: hidden;
}

.widget-box .widget-box-status .widget-box-status-header {
  padding: 0 28px;
}

.widget-box .widget-box-status .widget-box-status-header .user-status {
  padding-right: 50px;
}

.widget-box .widget-box-status .widget-box-status-header .user-status .user-status-title .user-avatar,
.widget-box .widget-box-status .widget-box-status-header .user-status .user-status-title .user-avatar-circle {
  display: inline;
  margin-right: 22px;
  margin-left: 4px;
}

.widget-box .widget-box-status .widget-box-status-header .user-status .user-status-title .user-avatar-circle {
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 4px;
  top: 4px;
}

.widget-box .widget-box-status .widget-box-status-content {
  margin-top: 20px;
}

.widget-box .widget-box-status .widget-box-status-content .widget-box-status-text {
  padding: 0 28px;
}

.widget-box .widget-box-status .widget-box-status-content .widget-box,
.widget-box .widget-box-status .widget-box-status-content .picture-collage,
.widget-box .widget-box-status .widget-box-status-content .user-preview-widget,
.widget-box .widget-box-status .widget-box-status-content .alert-line {
  margin-left: 28px;
  margin-right: 28px;
}

.widget-box .widget-box-status .widget-box-status-content .alert-line {
  margin-top: 16px;
}

.widget-box .widget-box-status .widget-box-status-html-content {
  padding: 0 28px;
  font-family: var(--vikinger-font-family-primary);
  color: var(--color-text);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.7142857143em;
  word-break: break-word;
  white-space: pre-wrap;
}

.widget-box .widget-box-status .widget-box-status-html-content > * {
  margin-top: 12px;
}

.widget-box .widget-box-status .widget-box-status-html-content > *:first-child {
  margin-top: 0;
}

.widget-box .widget-box-status .widget-box-status-html-content img {
  width: 100%;
  height: auto;
}

.widget-box .widget-box-status .widget-box-status-html-content a {
  color: var(--color-primary);
  font-weight: 600;
}

.widget-box .widget-box-status .widget-box-status-html-content ul,
.widget-box .widget-box-status .widget-box-status-html-content ol {
  padding-left: 20px;
}

.widget-box .widget-box-status .widget-box-status-html-content ul ul,
.widget-box .widget-box-status .widget-box-status-html-content ul ol,
.widget-box .widget-box-status .widget-box-status-html-content ol ul,
.widget-box .widget-box-status .widget-box-status-html-content ol ol {
  padding-left: 0;
  margin: 18px;
}

.widget-box .widget-box-status .widget-box-status-html-content ul li,
.widget-box .widget-box-status .widget-box-status-html-content ol li {
  margin-bottom: 16px;
  display: list-item;
  color: var(--color-text);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.widget-box .widget-box-status .widget-box-status-html-content ul li:last-child,
.widget-box .widget-box-status .widget-box-status-html-content ol li:last-child {
  margin-bottom: 0;
}

.widget-box .widget-box-status .widget-box-status-html-content ul {
  list-style: disc;
}

.widget-box .widget-box-status .widget-box-status-html-content ul ul,
.widget-box .widget-box-status .widget-box-status-html-content ol ul {
  list-style: circle;
}

.widget-box .widget-box-status .widget-box-status-html-content ul ol,
.widget-box .widget-box-status .widget-box-status-html-content ol ol {
  list-style: lower-alpha;
}

.widget-box .widget-box-status .widget-box-status-html-content ol {
  list-style: decimal;
}

.widget-box .widget-box-status .widget-box-status-html-content blockquote {
  border-radius: 12px;
  box-shadow: var(--color-overbox-shadow);
  padding: 24px 28px 24px 46px;
  position: relative;
}

.widget-box .widget-box-status .widget-box-status-html-content blockquote::before {
  content: '"';
  color: var(--color-primary);
  font-style: italic;
  font-size: calc((60 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  position: absolute;
  top: 40px;
  left: 8px;
}

.widget-box .widget-box-status .widget-box-status-html-content blockquote p {
  font-style: italic;
}

.widget-box .widget-box-status .widget-box-status-html-content code {
  display: block;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background-color: var(--color-box-background-alt);
}

.widget-box .widget-box-status .widget-box-status-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.7142857143em;
  font-weight: 500;
  word-break: break-word;
  white-space: pre-wrap;
}

.widget-box .widget-box-status .widget-box-status-text a {
  font-weight: 500;
}

.widget-box .widget-box-status .widget-box-status-text + .widget-box-status-text {
  margin-top: 26px;
}

.widget-box .widget-box-status .widget-box-status-text + .tag-list {
  margin-top: 8px;
}

.widget-box .widget-box-status .video-wrap {
  margin-top: 20px;
}

.widget-box .widget-box-status .widget-box .photo-preview,
.widget-box .widget-box-status .widget-box .widget-box-picture {
  cursor: auto;
}

.widget-box .widget-box-status .widget-box-picture {
  width: 100%;
  height: auto;
  margin-top: 20px;
  cursor: pointer;
}

.widget-box .widget-box-status .widget-box-picture.widget-box-picture-no-pointer {
  cursor: auto;
}

.widget-box .widget-box-status .widget-box-picture img {
  width: 100%;
  height: 100%;
}

.widget-box .widget-box-status .post-preview {
  margin-top: 28px;
}

.widget-box .widget-box-status .iframe-wrap,
.widget-box .widget-box-status .picture-collage,
.widget-box .widget-box-status .widget-box {
  margin-top: 24px;
}

.widget-box .widget-box-status .widget-box .widget-box-status {
  padding-bottom: 32px;
}

.widget-box .widget-box-status .widget-box .widget-box-status .widget-box-status-content .user-status {
  padding-right: 0;
}

.widget-box .widget-box-status .tag-list {
  margin-top: 28px;
}

.widget-box .widget-box-status .tag-list:first-child {
  margin-top: 18px;
}

.widget-box .widget-box-status .user-preview-widget {
  margin-top: 28px;
}

.widget-box .post-footer > .content-actions {
  margin: 0 28px 0;
  border-top: 1px solid var(--color-divider);
}

.widget-box .widget-box-button {
  width: 100%;
  margin-top: 32px;
}

/**
 * 68.1. Widget Box - Media Queries
 */
@media screen and (max-width: 680px) {
  .widget-box .widget-box-status > .text-sticker .text-sticker-icon {
    margin-right: 0;
  }

  .widget-box .widget-box-status > .text-sticker .text-sticker-content {
    display: none;
  }
}

/*------------------------------------------------------------------*/
/**
 * 69. Loader Bars
 */
.loader-bars {
  display: flex;
  justify-content: center;
  height: 40px;
}

.loader-bars .loader-bar {
  width: 4px;
  height: 100%;
  margin-right: 4px;
  border-radius: 200px;
  transform: scaleY(0.2);
  animation: loader-bars .5s infinite alternate ease-in;
}

@keyframes loader-bars {
  0% {
    transform: scaleY(0.2);
  }
  100% {
    transform: scaleY(1);
  }
}

.loader-bars .loader-bar:last-child {
  margin-right: 0;
}

.loader-bars .loader-bar:nth-child(1) {
  background-color: var(--color-loading-bar-1);
}

.loader-bars .loader-bar:nth-child(2) {
  background-color: var(--color-loading-bar-2);
  animation-delay: .1s;
}

.loader-bars .loader-bar:nth-child(3) {
  background-color: var(--color-loading-bar-3);
  animation-delay: .2s;
}

.loader-bars .loader-bar:nth-child(4) {
  background-color: var(--color-loading-bar-4);
  animation-delay: .3s;
}

.loader-bars .loader-bar:nth-child(5) {
  background-color: var(--color-loading-bar-5);
  animation-delay: .4s;
}

.loader-bars .loader-bar:nth-child(6) {
  background-color: var(--color-loading-bar-6);
  animation-delay: .5s;
}

.loader-bars .loader-bar:nth-child(7) {
  background-color: var(--color-loading-bar-7);
  animation-delay: .6s;
}

.loader-bars .loader-bar:nth-child(8) {
  background-color: var(--color-loading-bar-8);
  animation-delay: .7s;
}

/*------------------------------------------------------------------*/
/**
 * 70. Loader Spinner
 */
.loader-spinner-wrap {
  display: block;
}

.loader-spinner-wrap.small .loader-spinner {
  width: 15px;
  height: 15px;
}

.loader-spinner {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(to right, var(--color-primary) 10%, rgba(35, 210, 226, 0) 42%);
  animation: loader-spinner 1.4s infinite linear;
  position: relative;
}

@keyframes loader-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loader-spinner::before, .loader-spinner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

.loader-spinner:before {
  width: 50%;
  height: 50%;
  background-color: var(--color-primary);
  border-radius: 100% 0 0 0;
}

.loader-spinner:after {
  width: 75%;
  height: 75%;
  border-radius: 50%;
  background-color: var(--color-box-background);
  margin: auto;
  bottom: 0;
  right: 0;
}

/*------------------------------------------------------------------*/
/**
 * 71. Error Section
 */
.error-section {
  margin-top: 32px;
  padding-bottom: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.error-section .error-section-title {
  margin-top: 36px;
  color: var(--color-secondary);
  font-size: calc((144 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.error-section .error-section-subtitle {
  margin-top: 12px;
  font-size: calc((36 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.error-section .error-section-description {
  width: 90%;
  max-width: 570px;
  margin-top: 32px;
  font-size: calc((18 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.7777777778em;
  font-weight: 500;
  text-align: center;
}

.error-section .error-section-button {
  margin-top: 50px;
  padding: 0 52px;
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
}

/**
 * 71.1. Error Section - Media Queries
 */
@media screen and (max-width: 480px) {
  .error-section {
    margin-top: 16px;
    padding-bottom: 0;
  }

  .error-section .error-section-image {
    width: 100%;
    height: auto;
  }

  .error-section .error-section-title {
    font-size: calc((104 / var(--vikinger-font-size-base)) * 1rem);
  }

  .error-section .error-section-subtitle {
    width: 90%;
    text-align: center;
  }
}

/*------------------------------------------------------------------*/
/**
 * 72. Picture
 */
.picture {
  width: 52px;
  height: 52px;
}

.picture.round {
  border-radius: 12px;
}

.picture.round.small, .picture.round.tiny {
  border-radius: 10px;
}

.picture.circle {
  border-radius: 50%;
}

.picture.medium {
  width: 60px;
  height: 60px;
}

.picture.small {
  width: 40px;
  height: 40px;
}

.picture.tiny {
  width: 32px;
  height: 32px;
}

/*------------------------------------------------------------------*/
/**
 * 73. Picture Item List
 */
.picture-item-list {
  display: grid;
}

.picture-item-list.small {
  grid-template-columns: repeat(auto-fit, 52px);
  grid-gap: 6px;
}

/*-------------------
    PICTURE ITEM
-------------------*/
.picture-item {
  cursor: pointer;
  position: relative;
}

.picture-item .picture-item-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(36, 210, 226, 0.9);
}

.picture-item .picture-item-overlay.round {
  border-radius: 12px;
}

.picture-item .picture-item-overlay.circle {
  border-radius: 50%;
}

.picture-item .picture-item-overlay .picture-item-overlay-text {
  color: #fff;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

/*------------------------------------------------------------------*/
/**
 * 74. Progress Stat
 */
.progress-stat.small {
  width: 178px;
}

.progress-stat .bar-progress-wrap {
  position: relative;
}

.progress-stat .bar-progress-wrap:first-child {
  margin-bottom: 6px;
}

.progress-stat .bar-progress-wrap.big {
  margin-bottom: 20px;
}

.progress-stat .bar-progress-wrap.medium:first-child {
  margin-bottom: 14px;
}

.progress-stat .bar-progress-wrap.small:last-child {
  margin-top: 24px;
}

.progress-stat .bar-progress-wrap:last-child {
  margin-top: 28px;
}

.progress-stat .bar-progress-wrap .bar-progress-info {
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

.progress-stat .bar-progress-wrap .bar-progress-info.progress-with-text {
  font-size: calc((20 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.progress-stat .bar-progress-wrap .bar-progress-info.progress-with-text .bar-progress-unit {
  margin-right: 2px;
}

.progress-stat .bar-progress-wrap .bar-progress-info.progress-with-text .light {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  text-transform: none;
}

.progress-stat .bar-progress-wrap .bar-progress-info.negative {
  color: var(--color-text);
}

.progress-stat .bar-progress-wrap .bar-progress-info.start {
  justify-content: flex-start;
}

.progress-stat .bar-progress-wrap .bar-progress-info.start .bar-progress-text {
  margin-right: 4px;
}

.progress-stat .bar-progress-wrap .bar-progress-info.center {
  justify-content: center;
}

.progress-stat .bar-progress-wrap .bar-progress-info.regular {
  text-transform: none;
}

.progress-stat .bar-progress-wrap .bar-progress-info.medium {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.progress-stat .bar-progress-wrap .bar-progress-info .light {
  margin-right: 4px;
  color: var(--color-text-alt-2);
}

.progress-stat .bar-progress-wrap .bar-progress-text.no-space .bar-progress-unit {
  margin-left: 0;
}

.progress-stat .bar-progress-wrap .bar-progress-unit {
  margin-left: 3px;
  text-transform: uppercase;
}

.progress-stat .progress-stat-info {
  color: var(--color-text-alt-2);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
  position: absolute;
  top: 8px;
  right: 0;
}

/**
 * 74.1. Progress Stat - Media Queries
 */
@media screen and (max-width: 680px) {
  .progress-stat .progress-stat-info {
    display: none;
  }
}

/*------------------------------------------------------------------*/
/**
 * 75. User Avatar
 */
.user-avatar {
  display: block;
  width: 100px;
  height: 110px;
  position: relative;
}

.user-avatar.big {
  width: 148px;
  height: 164px;
}

.user-avatar.big .user-avatar-content {
  top: 27px;
  left: 24px;
}

.user-avatar.big .user-avatar-progress,
.user-avatar.big .user-avatar-progress-border {
  top: 14px;
  left: 12px;
}

.user-avatar.big .user-avatar-badge {
  width: 40px;
  height: 44px;
  top: 102px;
  right: 8px;
}

.user-avatar.big .user-avatar-badge .user-avatar-badge-content {
  top: 5px;
  left: 4px;
}

.user-avatar.big .user-avatar-badge .user-avatar-badge-text {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
}

.user-avatar.medium {
  width: 120px;
  height: 132px;
}

.user-avatar.medium .user-avatar-content {
  top: 21px;
  left: 19px;
}

.user-avatar.medium .user-avatar-progress,
.user-avatar.medium .user-avatar-progress-border {
  top: 11px;
  left: 10px;
}

.user-avatar.medium .user-avatar-badge {
  width: 32px;
  height: 36px;
  top: 82px;
  right: 7px;
}

.user-avatar.medium .user-avatar-badge .user-avatar-badge-content {
  top: 4px;
  left: 3px;
}

.user-avatar.medium .user-avatar-badge .user-avatar-badge-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.user-avatar.user-avatar-forum {
  width: 76px;
  height: 84px;
}

.user-avatar.user-avatar-forum .user-avatar-content {
  top: 12px;
  left: 10px;
}

.user-avatar.user-avatar-forum .user-avatar-progress,
.user-avatar.user-avatar-forum .user-avatar-progress-border {
  top: 6px;
  left: 5px;
}

.user-avatar.user-avatar-forum .user-avatar-badge {
  width: 22px;
  height: 24px;
  top: 27px;
  right: 2px;
}

.user-avatar.user-avatar-forum .user-avatar-badge .user-avatar-badge-content {
  top: 3px;
  left: 3px;
}

.user-avatar.user-avatar-forum .user-avatar-badge .user-avatar-badge-text {
  font-size: calc((10 / var(--vikinger-font-size-base)) * 1rem);
}

.user-avatar.small {
  width: 50px;
  height: 56px;
}

.user-avatar.small .user-avatar-content {
  top: 12px;
  left: 10px;
}

.user-avatar.small .user-avatar-progress,
.user-avatar.small .user-avatar-progress-border {
  top: 6px;
  left: 5px;
}

.user-avatar.small .user-avatar-badge {
  width: 22px;
  height: 24px;
  top: 27px;
  right: 2px;
}

.user-avatar.small .user-avatar-badge .user-avatar-badge-content {
  top: 3px;
  left: 3px;
}

.user-avatar.small .user-avatar-badge .user-avatar-badge-text {
  font-size: calc((10 / var(--vikinger-font-size-base)) * 1rem);
}

.user-avatar.smaller .user-avatar-overlay {
  width: 30px;
  height: 32px;
}

.user-avatar.smaller .user-avatar-overlay-content .user-avatar-overlay-content-text {
  font-size: calc((11 / var(--vikinger-font-size-base)) * 1rem);
}

.user-avatar.no-stats {
  width: 100px;
  height: 110px;
}

.user-avatar.no-stats .user-avatar-content {
  top: 10px;
  left: 9px;
}

.user-avatar.no-stats.big {
  width: 148px;
  height: 164px;
}

.user-avatar.no-stats.big .user-avatar-content {
  top: 14px;
  left: 12px;
}

.user-avatar.no-stats.medium {
  width: 120px;
  height: 130px;
}

.user-avatar.no-stats.medium .user-avatar-content {
  top: 10px;
  left: 10px;
}

.user-avatar.no-stats.small {
  width: 50px;
  height: 56px;
}

.user-avatar.no-stats.small .user-avatar-content {
  top: 6px;
  left: 5px;
}

.user-avatar.no-stats.smaller {
  width: 34px;
  height: 36px;
}

.user-avatar.no-stats.smaller .user-avatar-content {
  top: 2px;
  left: 2px;
}

.user-avatar.no-stats.micro {
  width: 22px;
  height: 24px;
}

.user-avatar.no-stats.micro .user-avatar-content {
  top: 2px;
  left: 2px;
}

.user-avatar.no-border {
  width: 82px;
  height: 90px;
}

.user-avatar.no-border .user-avatar-content {
  top: 0;
  left: 0;
}

.user-avatar.no-border.big .user-avatar-content, 
.user-avatar.no-border.medium .user-avatar-content, 
.user-avatar.no-border.small .user-avatar-content, 
.user-avatar.no-border.tiny .user-avatar-content, 
.user-avatar.no-border.micro .user-avatar-content {
  top: 0;
  left: 0;
}

.user-avatar.no-border.big {
  width: 124px;
  height: 136px;
}

.user-avatar.no-border.medium {
  width: 100px;
  height: 110px;
}

.user-avatar.no-border.user-avatar-forum {
  width: 58px;
  height: 64px;
}

.user-avatar.no-border.small {
  width: 40px;
  height: 44px;
}

.user-avatar.no-border.tiny {
  width: 24px;
  height: 26px;
}

.user-avatar.no-border.micro {
  width: 18px;
  height: 20px;
}

.user-avatar.no-outline {
  width: 84px;
  height: 92px;
}

.user-avatar.no-outline .user-avatar-progress,
.user-avatar.no-outline .user-avatar-progress-border {
  top: 0;
  left: 0;
}

.user-avatar.no-outline .user-avatar-content {
  top: 9px;
  left: 8px;
}

.user-avatar.no-outline .user-avatar-badge {
  top: 60px;
  right: -3px;
}

.user-avatar.no-outline.small {
  width: 40px;
  height: 44px;
}

.user-avatar.no-outline.small .user-avatar-content {
  top: 6px;
  left: 5px;
}

.user-avatar.no-outline.small .user-avatar-badge {
  top: 21px;
  right: -3px;
}

.user-avatar .user-avatar-border {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.user-avatar .user-avatar-border .hexagon-content {
  background-color: #fff;
}

.user-avatar .user-avatar-content {
  position: absolute;
  top: 18px;
  left: 16px;
  z-index: 3;
}

.user-avatar .user-avatar-progress,
.user-avatar .user-avatar-progress-border {
  position: absolute;
  top: 9px;
  left: 8px;
  z-index: 2;
}

.user-avatar .user-avatar-progress {
  z-index: 3;
}

.user-avatar .user-avatar-progress-border {
  z-index: 2;
}

.user-avatar .user-avatar-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 32px;
  position: absolute;
  top: 68px;
  right: 5px;
  z-index: 4;
}

.user-avatar .user-avatar-badge .user-avatar-badge-border {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
}

.user-avatar .user-avatar-badge .user-avatar-badge-border .hexagon-content {
  background-color: #fff;
}

.user-avatar .user-avatar-badge .user-avatar-badge-content {
  position: absolute;
  top: 4px;
  left: 3px;
  z-index: 5;
}

.user-avatar .user-avatar-badge .user-avatar-badge-text {
  color: #fff;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  pointer-events: none;
  position: relative;
  z-index: 6;
}

.user-avatar .user-avatar-overlay {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 11;
}

.user-avatar .user-avatar-overlay-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 12;
}

.user-avatar .user-avatar-overlay-content .user-avatar-overlay-content-text {
  color: #fff;
  font-weight: 700;
  pointer-events: none;
  position: relative;
  top: 1px;
}

/*------------------------------------------------------------------*/
/**
 * 76. User Avatar Circle
 */
.user-avatar-circle {
  display: block;
  width: 106px;
  height: 106px;
  border-radius: 50%;
  background-color: var(--color-box-background);
  position: relative;
}

.user-avatar-circle.user-avatar-circle-flat {
  border-radius: 0;
}

.user-avatar-circle.user-avatar-circle-flat.big .user-avatar-circle-badge {
  top: 110px;
  right: 8px;
}

.user-avatar-circle.user-avatar-circle-flat.medium .user-avatar-circle-badge {
  top: 87px;
}

.user-avatar-circle.user-avatar-circle-flat.small .user-avatar-circle-badge {
  right: 4px;
}

.user-avatar-circle.user-avatar-circle-flat.no-border.big .user-avatar-circle-badge {
  top: 98px;
  right: -4px;
}

.user-avatar-circle.user-avatar-circle-flat.no-border.medium .user-avatar-circle-badge {
  top: 77px;
}

.user-avatar-circle.user-avatar-circle-flat.no-border.small .user-avatar-circle-badge {
  right: -2px;
}

.user-avatar-circle.user-avatar-circle-flat.no-border .user-avatar-circle-badge {
  top: 63px;
}

.user-avatar-circle.user-avatar-circle-flat .user-avatar-circle-image,
.user-avatar-circle.user-avatar-circle-flat .user-avatar-circle-overlay {
  border-radius: 0;
}

.user-avatar-circle.user-avatar-circle-flat .user-avatar-circle-badge {
  border-radius: 0;
  top: 71px;
}

.user-avatar-circle.user-avatar-circle-flat .user-avatar-circle-badge .user-avatar-circle-badge-content {
  border-radius: 0;
}

.user-avatar-circle.big {
  width: 158px;
  height: 158px;
}

.user-avatar-circle.big .user-avatar-circle-image {
  width: 110px;
  height: 110px;
  top: 24px;
  left: 24px;
}

.user-avatar-circle.big .user-avatar-circle-progress {
  top: 12px;
  left: 12px;
}

.user-avatar-circle.big .user-avatar-circle-badge {
  width: 40px;
  height: 40px;
  top: 104px;
  right: 13px;
}

.user-avatar-circle.big .user-avatar-circle-badge .user-avatar-circle-badge-content {
  width: 32px;
  height: 32px;
}

.user-avatar-circle.big .user-avatar-circle-badge .user-avatar-circle-badge-content .user-avatar-circle-badge-content-text {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
}

.user-avatar-circle.medium {
  width: 128px;
  height: 128px;
}

.user-avatar-circle.medium .user-avatar-circle-image {
  width: 90px;
  height: 90px;
  top: 19px;
  left: 19px;
}

.user-avatar-circle.medium .user-avatar-circle-progress {
  top: 10px;
  left: 10px;
}

.user-avatar-circle.medium .user-avatar-circle-badge {
  width: 34px;
  height: 34px;
  top: 81px;
  right: 7px;
}

.user-avatar-circle.medium .user-avatar-circle-badge .user-avatar-circle-badge-content {
  width: 28px;
  height: 28px;
}

.user-avatar-circle.medium .user-avatar-circle-badge .user-avatar-circle-badge-content .user-avatar-circle-badge-content-text {
  margin-top: 0;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.user-avatar-circle.user-avatar-circle-forum {
  width: 64px;
  height: 64px;
}

.user-avatar-circle.user-avatar-circle-forum .user-avatar-circle-image {
  width: 64px;
  height: 64px;
  top: 0;
  left: 0;
}

.user-avatar-circle.small {
  width: 52px;
  height: 52px;
}

.user-avatar-circle.small .user-avatar-circle-image {
  width: 30px;
  height: 30px;
  top: 11px;
  left: 11px;
}

.user-avatar-circle.small .user-avatar-circle-progress {
  top: 6px;
  left: 6px;
}

.user-avatar-circle.small .user-avatar-circle-badge {
  width: 22px;
  height: 22px;
  top: 26px;
  right: 3px;
}

.user-avatar-circle.small .user-avatar-circle-badge .user-avatar-circle-badge-content {
  width: 18px;
  height: 18px;
}

.user-avatar-circle.small .user-avatar-circle-badge .user-avatar-circle-badge-content .user-avatar-circle-badge-content-text {
  margin-top: -1px;
  font-size: calc((10 / var(--vikinger-font-size-base)) * 1rem);
}

.user-avatar-circle.smaller {
  width: 34px;
  height: 34px;
}

.user-avatar-circle.smaller .user-avatar-circle-image {
  width: 30px;
  height: 30px;
  top: 2px;
  left: 2px;
}

.user-avatar-circle.smaller .user-avatar-circle-overlay {
  width: 30px;
  height: 30px;
  top: 2px;
  left: 2px;
}

.user-avatar-circle.smaller .user-avatar-circle-overlay .user-avatar-circle-overlay-text {
  color: #fff;
  font-size: calc((11 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  pointer-events: none;
}

.user-avatar-circle.tiny {
  width: 30px;
  height: 30px;
}

.user-avatar-circle.tiny .user-avatar-circle-image {
  width: 26px;
  height: 26px;
  top: 2px;
  left: 2px;
}

.user-avatar-circle.micro {
  width: 24px;
  height: 24px;
}

.user-avatar-circle.micro .user-avatar-circle-image {
  width: 20px;
  height: 20px;
  top: 2px;
  left: 2px;
}

.user-avatar-circle.no-border {
  width: 90px;
  height: 90px;
  background-color: transparent;
}

.user-avatar-circle.no-border.big {
  width: 134px;
  height: 134px;
}

.user-avatar-circle.no-border.big .user-avatar-circle-image {
  top: 12px;
  left: 12px;
}

.user-avatar-circle.no-border.big .user-avatar-circle-badge {
  top: 92px;
  right: 1px;
}

.user-avatar-circle.no-border.medium {
  width: 108px;
  height: 108px;
}

.user-avatar-circle.no-border.medium .user-avatar-circle-image {
  top: 9px;
  left: 9px;
}

.user-avatar-circle.no-border.medium .user-avatar-circle-badge {
  top: 71px;
  right: -3px;
}

.user-avatar-circle.no-border.user-avatar-circle-forum {
  width: 64px;
  height: 64px;
}

.user-avatar-circle.no-border.user-avatar-circle-forum .user-avatar-circle-image {
  top: 0;
  left: 0;
}

.user-avatar-circle.no-border.small {
  width: 40px;
  height: 40px;
}

.user-avatar-circle.no-border.small .user-avatar-circle-image {
  top: 5px;
  left: 5px;
}

.user-avatar-circle.no-border.small .user-avatar-circle-badge {
  top: 20px;
  right: -3px;
}

.user-avatar-circle.no-border.smaller {
  width: 30px;
  height: 30px;
}

.user-avatar-circle.no-border.smaller .user-avatar-circle-image {
  top: 0;
  left: 0;
}

.user-avatar-circle.no-border.smaller .user-avatar-circle-overlay {
  width: 30px;
  height: 30px;
  top: 0;
  left: 0;
}

.user-avatar-circle.no-border.tiny {
  width: 26px;
  height: 26px;
}

.user-avatar-circle.no-border.tiny .user-avatar-circle-image {
  top: 0;
  left: 0;
}

.user-avatar-circle.no-border.micro {
  width: 20px;
  height: 20px;
}

.user-avatar-circle.no-border.micro .user-avatar-circle-image {
  top: 0;
  left: 0;
}

.user-avatar-circle.no-border .user-avatar-circle-image {
  top: 8px;
  left: 8px;
}

.user-avatar-circle.no-border .user-avatar-circle-progress {
  top: 0;
  left: 0;
}

.user-avatar-circle.no-border .user-avatar-circle-badge {
  top: 59px;
  right: -3px;
}

.user-avatar-circle.no-stats {
  width: 106px;
  height: 106px;
}

.user-avatar-circle.no-stats.big {
  width: 160px;
  height: 160px;
}

.user-avatar-circle.no-stats.big .user-avatar-circle-image {
  width: 136px;
  height: 136px;
  top: 12px;
  left: 12px;
}

.user-avatar-circle.no-stats.medium {
  width: 130px;
  height: 130px;
}

.user-avatar-circle.no-stats.medium .user-avatar-circle-image {
  width: 110px;
  height: 110px;
  top: 10px;
  left: 10px;
}

.user-avatar-circle.no-stats.small {
  width: 56px;
  height: 56px;
}

.user-avatar-circle.no-stats.small .user-avatar-circle-image {
  width: 44px;
  height: 44px;
  top: 6px;
  left: 6px;
}

.user-avatar-circle.no-stats .user-avatar-circle-progress,
.user-avatar-circle.no-stats .user-avatar-circle-badge {
  display: none;
}

.user-avatar-circle.no-stats .user-avatar-circle-image {
  width: 90px;
  height: 90px;
  top: 8px;
  left: 8px;
}

.user-avatar-circle.no-border.no-stats {
  width: 90px;
  height: 90px;
}

.user-avatar-circle.no-border.no-stats.big {
  width: 136px;
  height: 136px;
}

.user-avatar-circle.no-border.no-stats.medium {
  width: 110px;
  height: 110px;
}

.user-avatar-circle.no-border.no-stats.small {
  width: 44px;
  height: 44px;
}

.user-avatar-circle.no-border.no-stats .user-avatar-circle-image {
  top: 0;
  left: 0;
}

.user-avatar-circle .user-avatar-circle-image,
.user-avatar-circle .user-avatar-circle-progress,
.user-avatar-circle .user-avatar-circle-badge {
  position: absolute;
}

.user-avatar-circle .user-avatar-circle-image {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  top: 16px;
  left: 16px;
}

.user-avatar-circle .user-avatar-circle-progress {
  top: 8px;
  left: 8px;
}

.user-avatar-circle .user-avatar-circle-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--color-box-background);
  top: 67px;
  right: 5px;
}

.user-avatar-circle .user-avatar-circle-badge .user-avatar-circle-badge-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-avatar-rank-hexagon);
}

.user-avatar-circle .user-avatar-circle-badge .user-avatar-circle-badge-content .user-avatar-circle-badge-content-text {
  margin-top: 1px;
  color: #fff;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.user-avatar-circle .user-avatar-circle-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-avatar-overlay-background);
  position: absolute;
}

/*------------------------------------------------------------------*/
/**
 * 77. User Status List
 */
.user-status-list .user-status {
  margin-bottom: 22px;
}

.user-status-list .user-status:last-child {
  margin-bottom: 0;
}

.user-status-list.user-status-list-3-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, 276px);
  grid-gap: 22px 0;
}

.user-status-list.user-status-list-3-cols .user-status {
  margin-bottom: 0;
}

/*------------------
    USER STATUS
------------------*/
.user-status {
  min-height: 44px;
  padding: 2px 0 0 52px;
  position: relative;
}

.user-status.no-padding-top {
  padding-top: 0;
}

.user-status.no-padding-left {
  padding-left: 0;
}

.user-status.notification {
  padding-right: 60px;
}

.user-status.user-status-with-icon {
  padding-right: 28px;
}

.user-status.request .user-status-title, .user-status.request-small .user-status-title {
  margin-top: 2px;
  line-height: 1.1428571429em;
}

.user-status.request .user-status-text, .user-status.request-small .user-status-text {
  margin-top: 8px;
}

.user-status.request-small {
  padding-right: 48px;
}

.user-status.request {
  padding-right: 100px;
}

.user-status.user-status-selectable {
  padding-left: 86px;
}

.user-status.user-status-selectable .user-avatar,
.user-status.user-status-selectable .user-avatar-circle {
  left: 34px;
}

.user-status.user-status-selectable .checkbox-box {
  position: absolute;
  top: 10px;
  left: 0;
  right: auto;
}

.user-status .checkbox-box {
  position: absolute;
  top: -16px;
  right: -22px;
  cursor: pointer;
}

.user-status .user-status-reaction-image {
  width: 20px;
  height: auto;
}

.user-status .post-format-tag,
.user-status .user-status-avatar {
  position: absolute;
  top: 0;
  left: 0;
}

.user-status .post-format-tag,
.user-status .user-status-avatar.picture {
  top: 2px;
}

.user-status .post-format-tag {
  width: 40px;
  height: 40px;
  box-shadow: none;
}

.user-status .user-status-avatar.picture {
  background-color: var(--color-primary);
}

.user-status .user-status-favorite-icon {
  margin-right: 6px;
  position: relative;
  top: -1px;
}

.user-status .user-status-title {
  color: var(--color-text);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.4285714286em;
  word-break: break-word;
}

.user-status .user-status-title.medium {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
}

.user-status .user-status-title.medium + .user-status-text {
  margin-top: 2px;
}

.user-status .user-status-title.medium + .user-status-text.user-status-text_edited {
  margin-top: -8px;
}

.user-status .user-status-title a,
.user-status .user-status-title .bold {
  color: var(--color-text);
  font-weight: 700;
}

.user-status .user-status-title .highlighted {
  color: var(--color-primary-dark);
  font-weight: 600;
}

.user-status .user-status-title .vikinger-user-tag,
.user-status .user-status-title .vikinger-pmpro-level-tag {
  margin: 0 2px 2px 6px;
  display: inline-block;
  justify-content: flex-start;
  position: relative;
  top: -2px;
}

.user-status .user-status-title .vikinger-user-tag + .vikinger-user-tag,
.user-status .user-status-title .vikinger-user-tag + .vikinger-pmpro-level-tag,
.user-status .user-status-title .vikinger-pmpro-level-tag + .vikinger-user-tag,
.user-status .user-status-title .vikinger-pmpro-level-tag + .vikinger-pmpro-level-tag {
  margin-left: 2px;
}

.user-status .user-status-timestamp {
  margin-top: 10px;
  color: var(--color-text-alt);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.user-status .user-status-timestamp.small-space {
  margin-top: 4px;
}

.user-status .user-status-timestamp.floaty {
  margin-top: 0;
  position: absolute;
  top: 7px;
  right: 0;
}

.user-status .user-status-text {
  margin-top: 4px;
  color: var(--color-text);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  word-break: break-word;
}

.user-status .user-status-text.small {
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
}

.user-status .user-status-text.small-space {
  margin-top: 4px;
}

.user-status .user-status-text.user-status-text_edited {
  margin-top: -8px;
}

.user-status .user-status-text a {
  color: var(--color-text);
  font-weight: 700;
}

.user-status .user-status-text a:hover {
  color: var(--color-primary-dark);
  text-decoration: none;
}

.user-status .user-status-text .user-avatar,
.user-status .user-status-text .user-avatar-circle {
  display: inline-block;
  position: relative;
  top: 6px;
  margin: 0 4px;
}

.user-status .user-status-icon {
  fill: var(--color-icon);
  opacity: .4;
  position: absolute;
  top: 10px;
  right: 0;
}

.user-status .user-status-icon.user-status-privacy-icon {
  top: 8px;
}

.user-status .action-request-list {
  position: absolute;
  top: 2px;
  right: 0;
}

.vikinger-user-tag-list {
  display: flex;
  justify-content: center;
}

.vikinger-user-tag-list > .vikinger-user-tag {
  margin-right: 4px;
}

.vikinger-user-tag-list > .vikinger-user-tag:last-child {
  margin-right: 0;
}

.vikinger-user-tag {
  display: flex;
  justify-content: center;
}

.vikinger-user-tag.vikinger-user-tag_small .vikinger-user-tag-text {
  padding-top: 5px;
  font-size: calc((11 / var(--vikinger-font-size-base)) * 1rem);
}

.vikinger-user-tag .vikinger-user-tag-text {
  padding: 4px 8px;
  border-radius: 200px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

/*------------------------------------------------------------------*/
/**
 * 78. Cart Preview Total
 */
.cart-preview-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 55px;
  padding: 0 28px 0 100px;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}

.cart-preview-total .cart-preview-total-title,
.cart-preview-total .cart-preview-total-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.cart-preview-total .cart-preview-total-text .highlighted {
  color: var(--color-primary-dark);
}

/*------------------------------------------------------------------*/
/**
 * 79. Dropdown Box
 */
.dropdown-box {
  width: 384px;
  padding-bottom: 60px;
  border-radius: 10px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-overbox-big-shadow);
  position: relative;
}

.dropdown-box > .loader-spinner-wrap {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

.dropdown-box.header-settings-dropdown, .dropdown-box.header-search-dropdown {
  opacity: 0;
  visibility: hidden;
}

.dropdown-box.padding-bottom-small {
  padding-bottom: 14px;
}

.dropdown-box.no-padding-bottom {
  padding-bottom: 0;
}

.dropdown-box .dropdown-box-header {
  display: flex;
  justify-content: space-between;
  padding: 28px 28px 20px;
}

.dropdown-box .dropdown-box-header .dropdown-box-header-title {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.dropdown-box .dropdown-box-header .dropdown-box-header-title .highlighted {
  color: var(--color-primary-dark);
}

.dropdown-box .dropdown-box-header .dropdown-box-header-actions {
  display: flex;
  align-items: flex-end;
}

.dropdown-box .dropdown-box-header .dropdown-box-header-actions .dropdown-box-header-action {
  margin-right: 16px;
  color: var(--color-text-alt);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  opacity: .6;
  cursor: pointer;
}

.dropdown-box .dropdown-box-header .dropdown-box-header-actions .dropdown-box-header-action.dropdown-box-header-action-tab {
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: opacity .2s ease-in-out, color .2s ease-in-out;
}

.dropdown-box .dropdown-box-header .dropdown-box-header-actions .dropdown-box-header-action.dropdown-box-header-action-tab.active {
  color: var(--color-text);
  opacity: 1;
  border-bottom: 2px solid var(--color-primary);
}

.dropdown-box .dropdown-box-header .dropdown-box-header-actions .dropdown-box-header-action.dropdown-box-header-action-tab:hover {
  color: var(--color-text);
  opacity: 1;
}

.dropdown-box .dropdown-box-header .dropdown-box-header-actions .dropdown-box-header-action:hover {
  color: var(--color-primary-dark);
}

.dropdown-box .dropdown-box-header .dropdown-box-header-actions .dropdown-box-header-action:last-child {
  margin-right: 0;
}

.dropdown-box .dropdown-box-category {
  padding-top: 20px;
}

.dropdown-box .dropdown-box-category:first-child {
  padding-top: 28px;
}

.dropdown-box .dropdown-box-category + .no-results-text,
.dropdown-box .dropdown-box-category + .loader-spinner-wrap {
  margin: 16px 0;
}

.dropdown-box .dropdown-box-button {
  position: absolute;
  bottom: 0;
  left: 0;
}

.dropdown-box .dropdown-box-actions:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*---------------------------
    DROPDOWN BOX CATEGORY
---------------------------*/
.dropdown-box-category {
  padding: 0 28px 4px;
}

.dropdown-box-category .dropdown-box-category-title {
  color: var(--color-text-alt-2);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

/*------------------------
    DROPDOWN BOX LIST
------------------------*/
.dropdown-box-list {
  height: 420px;
}

.dropdown-box-list.no-scroll {
  height: auto;
}

.dropdown-box-list.scroll-small {
  height: 286px;
}

.dropdown-box-list.medium .dropdown-box-list-item {
  padding: 20px 28px;
}

.dropdown-box-list.small .dropdown-box-list-item {
  padding: 10px 28px;
}

.dropdown-box-list.no-hover .dropdown-box-list-item:hover {
  background-color: transparent;
}

.dropdown-box-list .no-results-text {
  padding-top: 20px;
}

.dropdown-box-list .dropdown-box-list-item {
  display: block;
  padding: 16px 28px;
}

.dropdown-box-list .dropdown-box-list-item.unread {
  background-color: var(--color-box-highlight-background);
}

.dropdown-box-list .dropdown-box-list-item.unread .user-status-icon {
  fill: var(--color-icon);
  opacity: 1;
}

.dropdown-box-list .dropdown-box-list-item:focus, .dropdown-box-list .dropdown-box-list-item:hover {
  background-color: var(--color-box-hover-background);
}

/*---------------------------
    DROPDOWN BOX ACTIONS
---------------------------*/
.dropdown-box-actions {
  display: flex;
  justify-content: center;
  padding: 32px 0;
  background-color: var(--color-box-background-alt);
}

.dropdown-box-actions .dropdown-box-action {
  margin-right: 16px;
}

.dropdown-box-actions .dropdown-box-action .button {
  width: 156px;
}

.dropdown-box-actions .dropdown-box-action:last-child {
  margin-right: 0;
}

/*---------------------------
    DROPDOWN BOX BUTTON
---------------------------*/
.dropdown-box-button {
  width: 100%;
  height: 60px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background-color: #3e3f5e;
  color: #fff;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-align: center;
  line-height: 60px;
  transition: background-color .2s ease-in-out;
}

.dropdown-box-button:hover {
  color: #fff;
}

.dropdown-box-button.primary {
  background-color: var(--color-primary);
}

.dropdown-box-button.primary:hover {
  background-color: var(--color-primary-hover);
}

.dropdown-box-button.secondary {
  background-color: var(--color-secondary);
}

.dropdown-box-button.secondary:hover {
  background-color: var(--color-secondary-hover);
}

/*------------------------------------------------------------------*/
/**
 * 80. Dropdown Navigation
 */
.dropdown-navigation {
  min-width: 360px;
  padding: 20px 28px;
  border-radius: 10px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-overbox-big-shadow);
}

.dropdown-navigation.header-settings-dropdown {
  opacity: 0;
  visibility: hidden;
}

.dropdown-navigation .dropdown-navigation-header {
  display: flex;
  justify-content: space-between;
}

.dropdown-navigation .dropdown-navigation-header .dropdown-navigation-button {
  width: auto;
  padding: 0 32px;
  margin-top: 2px;
}

.dropdown-navigation .dropdown-navigation-header .vikinger-user-tag + .vikinger-user-tag,
.dropdown-navigation .dropdown-navigation-header .vikinger-user-tag + .vikinger-pmpro-level-tag,
.dropdown-navigation .dropdown-navigation-header .vikinger-pmpro-level-tag + .vikinger-user-tag,
.dropdown-navigation .dropdown-navigation-header .vikinger-pmpro-level-tag + .vikinger-pmpro-level-tag {
  margin-left: 0;
}

.dropdown-navigation .dropdown-navigation-sections {
  display: -ms-flexbox;
  display: flex;
  margin-top: 30px;
}

.dropdown-navigation .dropdown-navigation-sections .dropdown-navigation-section {
  width: 200px;
}

.dropdown-navigation .dropdown-navigation-sections .dropdown-navigation-section .dropdown-navigation-category:first-child {
  margin-top: 0;
}

.dropdown-navigation .dropdown-navigation-category {
  margin: 20px 0 10px;
  color: var(--color-text-alt-2);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

.dropdown-navigation .dropdown-navigation-link {
  display: block;
  padding: 8px 0;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  transition: padding .2s ease-in-out, color .2s ease-in-out;
}

.dropdown-navigation .dropdown-navigation-link .highlighted {
  float: right;
  color: var(--color-primary-dark);
}

.dropdown-navigation .dropdown-navigation-link:hover {
  padding-left: 4px;
}

/*------------------------------------------------------------------*/
/**
 * 81. Navigation Widget
 */
.navigation-widget {
  width: 300px;
  padding-bottom: 80px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: relative;
}

.navigation-widget .navigation-widget-close-button {
  display: flex;
  justify-content: center;
  align-items: center;
  fill: var(--color-icon-highlighted);
  width: 70px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.navigation-widget .navigation-widget-close-button + .navigation-widget-section {
  margin-top: 40px;
}

.navigation-widget .navigation-widget-actions {
  margin: 80px 28px 60px;
}

.navigation-widget .navigation-widget-actions .button + .button {
  margin-top: 12px;
}

.navigation-widget .navigation-widget-cover {
  width: 100%;
  height: 76px;
}

.navigation-widget .navigation-widget-info-wrap {
  padding: 32px 50px 0 30px;
  margin-bottom: 40px;
}

.navigation-widget .navigation-widget-info-wrap .navigation-widget-info {
  min-height: 44px;
  padding: 8px 0 0 50px;
  position: relative;
}

.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .user-avatar,
.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .user-avatar-circle {
  position: absolute;
  top: 0;
  left: 0;
}

.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .navigation-widget-info-title {
  color: var(--color-text);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .navigation-widget-info-title a {
  color: var(--color-text);
  font-weight: 700;
}

.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .navigation-widget-info-title .vikinger-user-tag,
.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .navigation-widget-info-title .vikinger-pmpro-level-tag {
  margin: 0 2px 4px 6px;
  display: inline-block;
  justify-content: flex-start;
  position: relative;
  top: -2px;
}

.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .navigation-widget-info-title .vikinger-user-tag + .vikinger-user-tag,
.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .navigation-widget-info-title .vikinger-user-tag + .vikinger-pmpro-level-tag,
.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .navigation-widget-info-title .vikinger-pmpro-level-tag + .vikinger-user-tag,
.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .navigation-widget-info-title .vikinger-pmpro-level-tag + .vikinger-pmpro-level-tag {
  margin-left: 2px;
}

.navigation-widget .navigation-widget-info-wrap .navigation-widget-info .navigation-widget-info-text {
  margin-top: 4px;
  color: var(--color-text-alt);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.navigation-widget .navigation-widget-info-wrap .point-item-list {
  margin-top: 16px;
}

.navigation-widget .navigation-widget-info-wrap .navigation-widget-info-button {
  margin-top: 20px;
  width: 140px;
}

.navigation-widget .action-item-wrap {
  padding-left: 28px;
  margin-bottom: 32px;
}

.navigation-widget .action-item-wrap .action-item {
  justify-content: flex-start;
}

.navigation-widget .action-item-wrap .action-item.hoverable .action-item-icon {
  fill: var(--color-icon);
}

.navigation-widget .action-item-wrap .action-item.hoverable:hover .action-item-icon {
  fill: var(--color-icon-highlighted);
}

.navigation-widget .navigation-widget-section + .navigation-widget-section {
  margin-top: 40px;
}

.navigation-widget .navigation-widget-section.space-top {
  margin-top: 40px;
}

.navigation-widget .navigation-widget-section:last-child {
  margin-bottom: 60px;
}

.navigation-widget .navigation-widget-section-title {
  padding-left: 30px;
  color: var(--color-text-alt-2);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

.navigation-widget .navigation-widget-section-title + .navigation-widget-section-menu,
.navigation-widget .navigation-widget-section-title + .menu {
  margin-top: 26px;
}

.navigation-widget .navigation-widget-section-title + .navigation-widget-section-link {
  margin-top: 14px;
}

.navigation-widget .navigation-widget-section-menu .navigation-widget-section-menu-item .navigation-widget-section-menu {
  padding-left: 12px;
}

.navigation-widget .navigation-widget-section-menu .navigation-widget-section-menu-item .navigation-widget-section-menu-item-link {
  display: block;
  padding: 12px 30px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  transition: padding .2s ease-in-out, color .2s ease-in-out;
}

.navigation-widget .navigation-widget-section-menu .navigation-widget-section-menu-item .navigation-widget-section-menu-item-link .highlighted {
  float: right;
  color: var(--color-primary-dark);
}

.navigation-widget .navigation-widget-section-menu .navigation-widget-section-menu-item .navigation-widget-section-menu-item-link:hover {
  padding-left: 34px;
}

.navigation-widget .badge-list {
  margin-top: 36px;
}

.navigation-widget .no-results-text {
  margin-top: 36px;
  line-height: 35px;
}

.navigation-widget .user-stats {
  margin-top: 44px;
}

.navigation-widget .menu {
  margin: 60px 0;
}

.navigation-widget .menu:first-child {
  margin-top: 32px;
}

.navigation-widget.navigation-widget-closed {
  width: 80px;
  padding-top: 20px;
}

.navigation-widget.navigation-widget-closed .user-avatar,
.navigation-widget.navigation-widget-closed .user-avatar-circle {
  margin: 0 auto;
}

.navigation-widget.navigation-widget-closed .menu {
  margin-top: 26px;
}

.navigation-widget.navigation-widget-closed .menu:first-child {
  margin-top: 12px;
}

/*------------------------------------------------------------------*/
/**
 * 82. Chat Widget
 */
.chat-widget-wrap {
  display: flex;
  border-radius: 12px;
  box-shadow: var(--color-box-shadow);
}

.chat-widget-wrap .chat-widget {
  box-shadow: none;
}

.chat-widget-wrap .chat-widget .chat-widget-messages {
  height: 522px;
}

.chat-widget-wrap .chat-widget .chat-widget-conversation {
  height: 500px;
}

.chat-widget-wrap .chat-widget .chat-widget-conversation.with-recipient {
  height: 467px;
}

.chat-widget-wrap .chat-widget:first-child {
  width: 43.4389140271%;
  border-right: 1px solid var(--color-divider);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.chat-widget-wrap .chat-widget:first-child .chat-widget-form {
  border-bottom-left-radius: 12px;
}

.chat-widget-wrap .chat-widget:last-child {
  width: 56.5610859729%;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.chat-widget-wrap .chat-widget:last-child .chat-widget-form {
  border-bottom-right-radius: 12px;
}

/*-------------------
    CHAT WIDGET
-------------------*/
.chat-widget {
  width: 300px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  transition: transform .4s ease-in-out;
}

.chat-widget .chat-widget-filters {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-divider);
}

.chat-widget .chat-widget-filters .chat-widget-filter {
  width: 100%;
  height: 66px;
  border-right: 1px solid var(--color-divider);
  background-color: var(--color-box-background-alt);
  color: var(--color-text-alt);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 66px;
  text-align: center;
  cursor: pointer;
}

.chat-widget .chat-widget-filters .chat-widget-filter:first-child {
  border-top-left-radius: 12px;
}

.chat-widget .chat-widget-filters .chat-widget-filter:last-child {
  border-right: none;
}

.chat-widget .chat-widget-filters .chat-widget-filter.active {
  background-color: var(--color-box-background);
  color: var(--color-text);
}

.chat-widget.static .chat-widget-messages .chat-widget-message {
  padding: 20px 28px 20px 24px;
  border-left: 4px solid transparent;
}

.chat-widget.static .chat-widget-messages .chat-widget-message.active, .chat-widget.static .chat-widget-messages .chat-widget-message:hover {
  background-color: var(--color-box-hover-background);
  border-left-color: var(--color-primary);
}

.chat-widget.chat-widget-overlay {
  padding-bottom: 92px;
}

.chat-widget.closed .chat-widget-messages .chat-widget-message {
  padding: 11px 20px;
}

.chat-widget.closed .chat-widget-messages .chat-widget-message:first-child {
  padding-top: 20px;
}

.chat-widget.closed .chat-widget-messages .chat-widget-message:hover {
  background-color: var(--color-box-background);
}

.chat-widget.closed .chat-widget-messages .chat-widget-message .user-status .user-status-title,
.chat-widget.closed .chat-widget-messages .chat-widget-message .user-status .user-status-text,
.chat-widget.closed .chat-widget-messages .chat-widget-message .user-status .user-status-timestamp {
  opacity: 0;
  visibility: hidden;
}

.chat-widget.closed .chat-widget-form {
  opacity: 0;
  visibility: hidden;
}

.chat-widget .chat-widget-messages .chat-widget-message .user-status .user-status-title,
.chat-widget .chat-widget-messages .chat-widget-message .user-status .user-status-text,
.chat-widget .chat-widget-messages .chat-widget-message .user-status .user-status-timestamp {
  transition: opacity .4s ease-in-out, visibility .4s ease-in-out;
}

/*-------------------------
    CHAT WIDGET HEADER
-------------------------*/
.chat-widget-header {
  padding: 20px 28px;
  border-bottom: 1px solid var(--color-divider);
  position: relative;
}

.chat-widget-header.no-padding {
  padding: 0;
}

.chat-widget-header .chat-widget-settings {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
}

.chat-widget-header .chat-widget-header-title {
  height: 60px;
  padding: 0 28px;
  border-bottom: 1px solid var(--color-divider);
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 60px;
}

.chat-widget-header .chat-widget-header-form {
  background-color: var(--color-box-background-alt);
}

.chat-widget-header .chat-widget-header-form .chat-widget-header-recipient {
  height: 58px;
  padding: 0 28px;
  display: flex;
  align-items: center;
}

.chat-widget-header .chat-widget-header-form .form-textarea.small textarea {
  padding: 18px 28px;
}

.chat-widget-header .chat-widget-header-form .form-textarea textarea {
  border: none;
  background-color: transparent;
}

.chat-widget-header .chat-widget-close-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 50px;
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.chat-widget-header .chat-widget-close-button .chat-widget-close-button-icon {
  fill: #3e3f5e;
}

/*---------------------------
    CHAT WIDGET MESSAGES
---------------------------*/
.chat-widget-messages {
  height: 700px;
  overflow-y: auto;
}

.chat-widget-messages > .loader-spinner-wrap {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

.chat-widget-messages .no-results-text {
  margin-top: 60px;
}

.chat-widget-messages .chat-widget-message {
  display: block;
  padding: 14px 28px;
  cursor: pointer;
  transition: padding .4s ease-in-out;
}

.chat-widget-messages .chat-widget-message.active, .chat-widget-messages .chat-widget-message:hover {
  background-color: var(--color-box-hover-background);
}

.chat-widget-messages .chat-widget-message.unread {
  background-color: var(--color-box-highlight-background);
}

/*-------------------------------
    CHAT WIDGET CONVERSATION
-------------------------------*/
.chat-widget-conversation {
  height: 615px;
  background-color: var(--color-box-background-alt);
  overflow-y: auto;
}

.chat-widget-conversation .chat-widget-speaker {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  position: relative;
}

.chat-widget-conversation .chat-widget-speaker + .chat-widget-speaker {
  margin-top: 16px;
}

.chat-widget-conversation .chat-widget-speaker.left {
  padding: 0 26px 0 36px;
}

.chat-widget-conversation .chat-widget-speaker.left .chat-widget-speaker-avatar {
  left: 0;
}

.chat-widget-conversation .chat-widget-speaker.left .chat-widget-speaker-message {
  border-top-left-radius: 0;
}

.chat-widget-conversation .chat-widget-speaker.right {
  padding-left: 64px;
  align-items: flex-end;
}

.chat-widget-conversation .chat-widget-speaker.right .chat-widget-speaker-message {
  border-top-right-radius: 0;
  background-color: var(--color-secondary);
  color: #fff;
}

.chat-widget-conversation .chat-widget-speaker .chat-widget-speaker-avatar {
  position: absolute;
  top: 0;
}

.chat-widget-conversation .chat-widget-speaker .chat-widget-speaker-message {
  display: inline-block;
  padding: 12px;
  border-radius: 10px;
  background-color: var(--color-primary);
  color: #fff;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 600;
  line-height: 1.1428571429em;
  word-break: break-word;
}

.chat-widget-conversation .chat-widget-speaker .chat-widget-speaker-message + .chat-widget-speaker-message {
  margin-top: 8px;
}

.chat-widget-conversation .chat-widget-speaker .chat-widget-speaker-timestamp {
  margin-top: 12px;
  color: #adafca;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

/*-----------------------
    CHAT WIDGET FORM
-----------------------*/
.chat-widget-form {
  padding: 22px 28px;
  background-color: var(--color-box-background-alt);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 0 40px 0 rgba(94, 92, 154, 0.1);
  transition: opacity .4s ease-in-out, visibility .4s ease-in-out, bottom .4s ease-in-out;
}

.chat-widget-form.disabled {
  opacity: .5;
}

/**
 * 82.1. Chat Widget - Media Queries
 */
@media screen and (max-width: 960px) {
  .chat-widget-wrap {
    display: block;
    box-shadow: none;
  }

  .chat-widget-wrap .chat-widget {
    border-radius: 12px;
  }

  .chat-widget-wrap .chat-widget:first-child, .chat-widget-wrap .chat-widget:last-child {
    width: 100%;
    box-shadow: var(--color-box-shadow);
  }

  .chat-widget-wrap .chat-widget:first-child {
    border-right: none;
    margin-bottom: 26px;
  }

  .chat-widget-wrap .chat-widget:first-child .chat-widget-form {
    border-bottom-right-radius: 12px;
  }

  .chat-widget-wrap .chat-widget:last-child .chat-widget-form {
    border-bottom-left-radius: 12px;
  }
  
  .chat-widget-wrap .chat-widget .chat-widget-conversation + .chat-widget-form .button {
    width: 100%;
  }
}

/*------------------------------------------------------------------*/
/**
 * 83. Profile Header
 */
.profile-header {
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.profile-header + .alert-box {
  margin-top: 32px;
}

.profile-header + .section-navigation {
  margin-bottom: 16px;
}

.profile-header.v2 .profile-header-info {
  height: 112px;
}

.profile-header.v2 .profile-header-info .user-short-description {
  min-height: 164px;
  padding: 84px 0 0 164px;
  position: absolute;
  left: 32px;
  bottom: 0;
}

.profile-header.v2 .profile-header-info .user-short-description .user-short-description-avatar {
  top: 0;
  left: 0;
  margin-left: 0;
}

.profile-header.v2 .profile-header-info .user-short-description .user-short-description-avatar.user-short-description-avatar-mobile {
  top: -54px;
  margin-left: -60px;
}

.profile-header.v2 .profile-header-info .user-short-description .user-short-description-title,
.profile-header.v2 .profile-header-info .user-short-description .user-short-description-text {
  text-align: left;
}

.profile-header.v2 .profile-header-info .user-stats {
  left: auto;
  top: 38px;
  right: 164px;
}

.profile-header.v2 .profile-header-info > .tag-sticker {
  position: absolute;
  top: -12px;
  right: 28px;
  display: none;
}

.profile-header.v2 .profile-header-info .profile-header-info-actions {
  top: 32px;
}

.profile-header.v2 .profile-header-info .profile-header-info-actions .profile-header-info-action.button {
  width: 58px;
}

.profile-header.v2 .vikinger-user-tag-list {
  justify-content: flex-start;
}

.profile-header .profile-header-cover {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  height: 300px;
}

.profile-header .profile-header-info {
  padding-bottom: 32px;
  position: relative;
}

.profile-header .profile-header-info .user-short-description .user-short-description-avatar-mobile {
  display: none;
  top: -54px;
  margin-left: -60px;
}

.profile-header .profile-header-info .social-links {
  position: absolute;
  top: 54px;
  right: 32px;
}

.profile-header .profile-header-info .social-links.mobile {
  display: none;
}

.profile-header .profile-header-info .profile-header-social-links-wrap {
  width: 364px;
  height: 44px;
  margin: 0 auto;
  position: absolute;
  top: 54px;
  right: 32px;
}

.profile-header .profile-header-info .profile-header-social-links-wrap.mobile {
  width: 160px;
  height: 36px;
  display: none;
}

.profile-header .profile-header-info .profile-header-social-links-wrap.mobile .slider-controls {
  width: 214px;
  top: 10px;
}

.profile-header .profile-header-info .profile-header-social-links-wrap .profile-header-social-links {
  padding-top: 4px;
  position: relative;
  z-index: 2;
}

.profile-header .profile-header-info .profile-header-social-links-wrap .slider-controls {
  width: 416px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 14px;
  left: -28px;
}

.profile-header .profile-header-info .user-stats {
  position: absolute;
  top: 54px;
  left: 40px;
}

.profile-header .profile-header-info .user-stats .user-stat {
  padding: 0 30px;
}

.profile-header .profile-header-info .profile-header-info-actions {
  display: flex;
  justify-content: center;
  position: absolute;
  top: -40px;
  right: 32px;
}

.profile-header .profile-header-info .profile-header-info-actions > .loader-spinner-wrap {
  margin-top: 12px;
}

.profile-header .profile-header-info .profile-header-info-actions .profile-header-info-action {
  margin-right: 16px;
}

.profile-header .profile-header-info .profile-header-info-actions .profile-header-info-action.button {
  width: 180px;
}

.profile-header .profile-header-info .profile-header-info-actions .profile-header-info-action:last-child {
  margin-right: 0;
}

/**
 * 83.1. Profile Header - Media Queries
 */
@media screen and (max-width: 1365px) {
  .profile-header .profile-header-cover {
    height: 200px;
  }

  .profile-header.v2 .profile-header-info {
    height: auto;
    padding-bottom: 32px;
  }

  .profile-header.v2 .profile-header-info .user-short-description {
    min-height: auto;
    padding: 52px 0 0;
    position: static;
  }

  .profile-header.v2 .profile-header-info .user-short-description .user-short-description-avatar {
    top: -116px;
    left: 50%;
    margin-left: -74px;
  }

  .profile-header.v2 .profile-header-info .user-short-description .user-short-description-title,
  .profile-header.v2 .profile-header-info .user-short-description .user-short-description-text {
    text-align: center;
  }

  .profile-header.v2 .vikinger-user-tag-list {
    justify-content: center;
  }
  
  .profile-header .profile-header-info {
    padding-bottom: 0;
  }

  .profile-header .profile-header-info .user-stats,
  .profile-header .profile-header-info .profile-header-info-actions {
    position: static;
  }

  .profile-header .profile-header-info .social-links,
  .profile-header .profile-header-info .profile-header-social-links-wrap {
    margin-top: 32px;
    position: relative;
    top: auto;
    right: auto;
  }

  .profile-header .profile-header-info .user-stats,
  .profile-header .profile-header-info .profile-header-info-actions {
    margin-top: 40px;
  }

  .profile-header .profile-header-info .profile-header-info-actions .profile-header-info-action.button {
    margin-bottom: 40px;
  }

  .profile-header .profile-header-info .profile-header-info-actions .profile-header-info-action.button:last-child {
    margin-bottom: 0;
  }
}

@media screen and (max-width: 480px) {
  .profile-header .profile-header-cover {
    height: 76px;
  }

  .profile-header .profile-header-info .user-short-description,
  .profile-header.v2 .profile-header-info .user-short-description {
    padding-top: 84px;
  }

  .profile-header.v2 .profile-header-info .user-stats .user-stat:first-child,
  .profile-header .profile-header-info .user-short-description .user-short-description-avatar,
  .profile-header .profile-header-info .social-links,
  .profile-header .profile-header-info .user-stats .user-stat:nth-last-child(2)::after,
  .profile-header .profile-header-info .user-stats .user-stat:last-child {
    display: none;
  }

  .profile-header.v2 .profile-header-info .user-stats .user-stat:nth-last-child(2)::after,
  .profile-header.v2 .profile-header-info .user-stats .user-stat:last-child,
  .profile-header .profile-header-info .user-short-description .user-short-description-avatar-mobile,
  .profile-header .profile-header-info .profile-header-social-links-wrap.mobile {
    display: block;
  }

  .profile-header.v2 .profile-header-info .tag-sticker,
  .profile-header .profile-header-info .social-links.mobile {
    display: flex;
  }

  .profile-header .profile-header-info .user-short-description .user-short-description-title {
    font-size: calc((18 / var(--vikinger-font-size-base)) * 1rem);
  }

  .profile-header .profile-header-info .user-short-description .user-short-description-text {
    font-size: calc((11 / var(--vikinger-font-size-base)) * 1rem);
  }

  .profile-header .profile-header-info .profile-header-social-links-wrap {
    position: relative;
    top: auto;
    right: auto;
    display: none;
  }

  .profile-header .profile-header-info .user-stats .user-stat .user-stat-title {
    font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  }

  .profile-header .profile-header-info .user-stats .user-stat .user-stat-text {
    font-size: calc((11 / var(--vikinger-font-size-base)) * 1rem);
  }

  .profile-header .profile-header-info .profile-header-info-actions .profile-header-info-action.button:not(.with-only-icon) {
    width: auto;
    padding: 0 28px;
  }
}

/*------------------------------------------------------------------*/
/**
 * 84. Post Preview
 */
.post-preview {
  min-height: 516px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.post-preview.post-preview-type-iframe .post-preview-image {
  cursor: pointer;
  position: relative;
}

.post-preview.post-preview-type-iframe .post-preview-image::before {
  content: '';
  width: 100%;
  height: 100%;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: rgba(21, 21, 31, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}

.post-preview.post-preview-type-iframe .post-preview-image .post-preview-image-action {
  transition: transform .2s ease-in-out;
}

.post-preview.post-preview-type-iframe .post-preview-image:hover::before {
  opacity: 1;
  visibility: visible;
}

.post-preview.post-preview-type-iframe .post-preview-image:hover .post-preview-image-action {
  transform: scale(1.05);
}

.post-preview.post-preview-type-gallery {
  position: relative;
}

.post-preview .gallery-popup-button {
  position: absolute;
  top: -8px;
  right: 16px;
  z-index: 3;
}

.post-preview .post-preview-gallery {
  height: 210px;
  position: relative;
}

.post-preview .post-preview-gallery .post-preview-gallery-slider-item {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  height: 210px;
}

.post-preview .post-preview-gallery-controls {
  width: 72px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  right: 44px;
  bottom: 28px;
  z-index: 3;
}

.post-preview.post-preview-no-cover {
  padding-top: 16px;
}

.post-preview.post-preview-no-cover .post-preview-info {
  margin: 0 auto;
}

.post-preview.post-preview-no-cover .post-preview-info.fixed-height {
  height: 466px;
}

.post-preview.post-preview-no-cover .post-format-tag {
  flex-shrink: 0;
  margin-bottom: 28px;
  box-shadow: 3px 5px 20px 0px rgba(94, 92, 154, 0.1);
}

.post-preview.sticky {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-height: auto;
  height: 390px;
  position: relative;
  margin: 32px 0;
}

.post-preview.sticky:first-child {
  margin-top: 0;
}

.post-preview.sticky .tag-sticker {
  position: absolute;
  top: -12px;
  right: 12px;
  z-index: 3;
}

.post-preview.sticky.post-preview-no-cover {
  padding: 28px 28px 0;
}

.post-preview.sticky.post-preview-no-cover .post-preview-info {
  width: 100%;
  margin: 0 auto;
}

.post-preview.sticky.post-preview-no-cover .content-actions {
  padding-right: 0;
}

.post-preview.sticky .post-preview-image-mobile-link,
.post-preview.sticky .post-preview-image-mobile {
  display: none;
}

.post-preview.sticky .post-preview-image-mobile {
  width: 100%;
  height: auto;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.post-preview.sticky .post-preview-image-mobile-solid {
  width: 100%;
  height: 320px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: var(--color-primary);
}

.post-preview.sticky .post-preview-image {
  width: 49.3243243243%;
  height: 100%;
  border-top-right-radius: 0;
  border-bottom-left-radius: 12px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.post-preview.sticky .post-preview-info {
  margin: 28px 28px 0 0;
  width: 616px;
  height: 300px;
  position: relative;
  z-index: 2;
}

.post-preview.sticky .post-preview-info.fixed-height {
  height: 300px;
}

.post-preview.sticky .post-preview-info .post-preview-title {
  font-size: calc((24 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.3333333333em;
}

.post-preview.sticky .post-preview-info .post-preview-title.medium {
  font-size: calc((28 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.1428571429em;
}

.post-preview.sticky .content-actions {
  width: 50.6756756757%;
}

.post-preview.small {
  min-height: auto;
  height: 230px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.post-preview.small.post-preview-no-cover {
  padding: 16px 16px 0;
}

.post-preview.small.post-preview-no-cover .post-preview-info {
  width: 100%;
  margin: 0 auto;
}

.post-preview.small.post-preview-no-cover .post-format-tag {
  position: absolute;
  top: -16px;
  right: 16px;
  z-index: 3;
}

.post-preview.small.post-preview-no-cover .content-actions {
  padding-right: 0;
}

.post-preview.small .gallery-popup-button {
  left: 16px;
  right: auto;
}

.post-preview.small .post-preview-gallery {
  width: 260px;
  height: 230px;
  position: absolute;
  top: 0;
  left: 0;
}

.post-preview.small .post-preview-gallery .post-preview-gallery-slider-item {
  width: 260px;
  height: 230px;
  border-top-right-radius: 0;
  border-bottom-left-radius: 12px;
}

.post-preview.small .post-preview-gallery-controls {
  top: 8px;
  right: 36px;
  bottom: auto;
}

.post-preview.small .post-preview-image {
  width: 260px;
  height: 100%;
  border-top-right-radius: 0;
  border-bottom-left-radius: 12px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.post-preview.small .post-preview-image .post-preview-image-action {
  top: 85px;
  left: 85px;
  margin-left: 0;
}

.post-preview.small .post-preview-info {
  margin: 16px 16px 0 0;
  width: 352px;
  height: 156px;
  position: relative;
  z-index: 2;
}

.post-preview.small .content-actions {
  width: 55.4794520548%;
}

.post-preview.medium {
  min-height: auto;
  box-shadow: none;
}

.post-preview.medium.post-preview-no-cover {
  padding-top: 28px;
}

.post-preview.medium.post-preview-no-cover .post-preview-info {
  margin-top: 0;
}

.post-preview.medium.post-preview-no-cover .post-preview-info.fixed-height {
  height: 484px;
}

.post-preview.medium.post-preview-normal {
  min-height: 596px;
  box-shadow: var(--color-box-shadow);
}

.post-preview.medium.post-preview-normal .post-preview-image {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.post-preview.medium.post-preview-normal .post-preview-image .post-preview-image-action {
  top: 60px;
}

.post-preview.medium.post-preview-normal .tag-list {
  margin-top: 28px;
  padding: 0 28px;
}

.post-preview.medium.post-preview-normal .content-actions {
  margin: 26px 28px 0;
  padding: 0;
  border-top: 1px solid var(--color-divider);
}

.post-preview.medium .post-preview-gallery {
  height: 320px;
}

.post-preview.medium .post-preview-gallery .post-preview-gallery-slider-item {
  height: 320px;
}

.post-preview.medium .post-preview-gallery-controls {
  right: 52px;
  bottom: 120px;
}

.post-preview.medium .post-preview-image {
  height: 320px;
  border-radius: 0;
}

.post-preview.medium .post-preview-info {
  width: 90.4109589041%;
  margin-top: -140px;
}

.post-preview.medium .post-preview-info .post-preview-title {
  font-size: calc((24 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.3333333333em;
}

.post-preview.medium .post-preview-info .post-preview-title.medium {
  font-size: calc((28 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.1428571429em;
}

.post-preview.medium .post-preview-info .post-preview-text {
  margin-top: 24px;
}

.post-preview .post-preview-image {
  height: 210px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  position: relative;
  z-index: 1;
  background-color: var(--color-primary);
}

.post-preview .post-preview-image .post-preview-image-action {
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -30px;
}

.post-preview .post-preview-info {
  width: 91.6666666667%;
  padding: 28px;
  margin: -48px auto 0;
  border-radius: 12px;
  background-color: var(--color-box-over-box-background);
  box-shadow: var(--color-overbox-big-shadow);
  position: relative;
  z-index: 2;
  word-break: break-word;
}

.post-preview .post-preview-info.fixed-height {
  height: 320px;
  padding: 28px 28px 22px;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post-preview .post-preview-info.fixed-height .post-preview-text {
  margin-top: 0;
}

.post-preview .post-preview-info .post-preview-timestamp {
  color: var(--color-text-alt-2);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

.post-preview .post-preview-info .post-preview-title {
  margin-top: 10px;
  font-size: calc((20 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 1.2em;
  word-wrap: break-word;
}

.post-preview .post-preview-info .post-preview-title a {
  color: var(--color-text);
  font-weight: 700;
}

.post-preview .post-preview-info .post-preview-text {
  margin-top: 16px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.7142857143em;
  font-weight: 500;
}

.post-preview .post-preview-info .post-preview-link {
  margin-top: 20px;
  display: inline-block;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
  transition: color .2s ease-in-out;
}

.post-preview .content-actions {
  margin-top: 10px;
  padding: 0 28px;
}

.post-preview .swiper-container {
  z-index: auto;
}

/**
 * 84.1. Post Preview - Media Queries
 */
@media screen and (max-width: 960px) {
  .post-preview.sticky {
    display: block;
    height: auto;
  }

  .post-preview.sticky.post-preview-no-cover {
    padding: 28px 0 0;
  }

  .post-preview.sticky.post-preview-no-cover .post-preview-info {
    width: 95%;
  }

  .post-preview.sticky.post-preview-no-cover .content-actions {
    padding-right: 28px;
  }

  .post-preview.sticky .post-preview-image {
    display: none;
  }

  .post-preview.sticky .post-preview-image-mobile-link,
  .post-preview.sticky .post-preview-image-mobile {
    display: block;
  }

  .post-preview.sticky .post-preview-info {
    margin: -64px auto 0;
    width: 95%;
    height: auto;
  }

  .post-preview.sticky .post-preview-info.fixed-height {
    height: auto;
  }

  .post-preview.sticky .content-actions {
    width: 100%;
  }

  .post-preview.small {
    height: auto;
    display: block;
  }

  .post-preview.small.post-preview-no-cover .post-format-tag {
    position: static;
  }

  .post-preview.small .post-preview-image {
    width: 100%;
    height: 210px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0px;
    position: relative;
  }

  .post-preview.small .post-preview-image .post-preview-image-action {
    top: 51px;
    left: 50%;
    margin-left: -30px;
  }

  .post-preview.small .post-preview-gallery {
    width: 100%;
    height: 210px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0px;
    position: relative;
  }

  .post-preview.small .post-preview-gallery-controls {
    top: 154px;
  }

  .post-preview.small .post-preview-info {
    margin: -48px auto 0;
    width: 100%;
    height: auto;
  }

  .post-preview.small .content-actions {
    width: 100%;
  }
}

@media screen and (max-width: 680px) {
  .post-preview,
  .post-preview.medium.post-preview-normal {
    min-height: auto;
  }

  .post-preview.post-preview-no-cover .post-preview-info.fixed-height,
  .post-preview.medium.post-preview-no-cover .post-preview-info.fixed-height {
    height: auto;
  }

  .post-preview .post-preview-info.fixed-height {
    display: block;
    height: auto;
    padding: 28px;
  }

  .post-preview .post-preview-info.fixed-height .post-preview-text {
    margin-top: 16px;
  }
}

/*------------------------------------------------------------------*/
/**
 * 85. Post Peek
 */
.post-peek {
  min-height: 40px;
  padding-left: 52px;
  position: relative;
}

.post-peek .post-format-tag {
  width: 40px;
  height: 40px;
  position: absolute;
  top: -2px;
  left: 0;
  box-shadow: none;
}

.post-peek .post-peek-image {
  position: absolute;
  top: -1px;
  left: 0;
}

.post-peek .post-peek-image .picture {
  background-color: var(--color-primary);
}

.post-peek .post-peek-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 1.1428571429em;
}

.post-peek .post-peek-title a {
  color: var(--color-text);
  font-weight: 700;
}

.post-peek .post-peek-text {
  margin-top: 8px;
  color: var(--color-text-alt);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

/*------------------------------------------------------------------*/
/**
 * 86. Post Comment
 */
.post-comment {
  padding: 26px 28px 28px 80px;
  background-color: var(--color-box-background);
  position: relative;
}

.post-comment.reply-2,
.post-comment.reply-3,
.post-comment.reply-4,
.post-comment.reply-5,
.post-comment.reply-6,
.post-comment.reply-7,
.post-comment.reply-8,
.post-comment.reply-9,
.post-comment.reply-10 {
  background-color: var(--color-box-background-alt);
}

.post-comment.reply-2 .post-comment-form,
.post-comment.reply-3 .post-comment-form,
.post-comment.reply-4 .post-comment-form,
.post-comment.reply-5 .post-comment-form,
.post-comment.reply-6 .post-comment-form,
.post-comment.reply-7 .post-comment-form,
.post-comment.reply-8 .post-comment-form,
.post-comment.reply-9 .post-comment-form,
.post-comment.reply-10 .post-comment-form {
  background-color: var(--color-box-background-alt);
}

.post-comment.reply-2 .post-comment-form textarea,
.post-comment.reply-3 .post-comment-form textarea,
.post-comment.reply-4 .post-comment-form textarea,
.post-comment.reply-5 .post-comment-form textarea,
.post-comment.reply-6 .post-comment-form textarea,
.post-comment.reply-7 .post-comment-form textarea,
.post-comment.reply-8 .post-comment-form textarea,
.post-comment.reply-9 .post-comment-form textarea,
.post-comment.reply-10 .post-comment-form textarea {
  background-color: var(--color-box-background-alt);
}

.post-comment.reply-2 {
  padding-left: 108px;
}

.post-comment.reply-2 > .user-avatar,
.post-comment.reply-2 > .user-avatar-circle {
  left: 56px;
}

.post-comment.reply-3 {
  padding-left: 136px;
}

.post-comment.reply-3 > .user-avatar,
.post-comment.reply-3 > .user-avatar-circle {
  left: 84px;
}

.post-comment.reply-4 {
  padding-left: 164px;
}

.post-comment.reply-4 > .user-avatar,
.post-comment.reply-4 > .user-avatar-circle {
  left: 112px;
}

.post-comment.reply-5 {
  padding-left: 192px;
}

.post-comment.reply-5 > .user-avatar,
.post-comment.reply-5 > .user-avatar-circle {
  left: 140px;
}

.post-comment.reply-6 {
  padding-left: 220px;
}

.post-comment.reply-6 > .user-avatar,
.post-comment.reply-6 > .user-avatar-circle {
  left: 168px;
}

.post-comment.reply-7 {
  padding-left: 248px;
}

.post-comment.reply-7 > .user-avatar,
.post-comment.reply-7 > .user-avatar-circle {
  left: 196px;
}

.post-comment.reply-8 {
  padding-left: 276px;
}

.post-comment.reply-8 > .user-avatar,
.post-comment.reply-8 > .user-avatar-circle {
  left: 224px;
}

.post-comment.reply-9 {
  padding-left: 304px;
}

.post-comment.reply-9 > .user-avatar,
.post-comment.reply-9 > .user-avatar-circle {
  left: 252px;
}

.post-comment.reply-10 {
  padding-left: 332px;
}

.post-comment.reply-10 > .user-avatar,
.post-comment.reply-10 > .user-avatar-circle {
  left: 280px;
}

.post-comment .user-avatar,
.post-comment .user-avatar-circle {
  position: absolute;
  top: 28px;
  left: 28px;
}

.post-comment .post-comment-text-wrap {
  display: flex;
  align-items: center;
}

.post-comment .post-comment-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.7142857143em;
  font-weight: 500;
  color: var(--color-text);
  white-space: pre-line;
  word-break: break-word;
}

.post-comment .post-comment-text .vikinger-user-tag,
.post-comment .post-comment-text .vikinger-pmpro-level-tag {
  margin: 0 2px 0 6px;
  display: inline-block;
  justify-content: flex-start;
  position: relative;
  top: -2px;
}

.post-comment .post-comment-text .vikinger-user-tag .vikinger-user-tag-text,
.post-comment .post-comment-text .vikinger-user-tag .vikinger-pmpro-level-tag-text,
.post-comment .post-comment-text .vikinger-pmpro-level-tag .vikinger-user-tag-text,
.post-comment .post-comment-text .vikinger-pmpro-level-tag .vikinger-pmpro-level-tag-text {
  line-height: 1em;
}

.post-comment .post-comment-text .vikinger-user-tag + .vikinger-user-tag,
.post-comment .post-comment-text .vikinger-user-tag + .vikinger-pmpro-level-tag,
.post-comment .post-comment-text .vikinger-pmpro-level-tag + .vikinger-user-tag,
.post-comment .post-comment-text .vikinger-pmpro-level-tag + .vikinger-pmpro-level-tag {
  margin-left: 2px;
}

.post-comment .post-comment-text .bold {
  font-weight: 700;
}

.post-comment .post-comment-text .highlighted {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.post-comment .post-comment-text .post-comment-text-author {
  margin-right: 6px;
  color: var(--color-text);
  font-weight: 700;
}

.post-comment .post-comment-text .post-comment-text-content a {
  color: var(--color-primary-dark);
}

.post-comment .post-comment-text .post-comment-form {
  padding: 0;
  margin-top: 8px;
  background-color: transparent;
}

.post-comment .post-comment-text .post-comment-form .form-textarea-limit {
  margin-top: 0;
}

.post-comment .post-comment-notification {
  margin-top: 12px;
  color: var(--color-primary-dark);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.post-comment .content-actions {
  height: 20px;
  margin-top: 14px;
}

.post-comment .post-comment-form {
  padding: 26px 0 0 30px;
}

.post-comment .post-comment-form .user-avatar,
.post-comment .post-comment-form .user-avatar-circle {
  left: -24px;
}

.post-comment .post-comment-form .mention-list .mention-list-item .user-avatar,
.post-comment .post-comment-form .mention-list .mention-list-item .user-avatar-circle {
  left: auto;
}

/*---------------------------
    POST COMMENT HEADING
---------------------------*/
.post-comment-heading {
  height: 53px;
  background-color: var(--color-box-background);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 53px;
  text-align: center;
  cursor: pointer;
}

.post-comment-heading .highlighted {
  color: var(--color-primary-dark);
}

.post-comment-heading.reply-2,
.post-comment-heading.reply-3,
.post-comment-heading.reply-4,
.post-comment-heading.reply-5,
.post-comment-heading.reply-6 {
  height: 45px;
  background-color: var(--color-box-background-alt);
  line-height: 45px;
  text-align: left;
}

.post-comment-heading.reply-2 {
  padding-left: 80px;
}

.post-comment-heading.reply-3 {
  padding-left: 108px;
}

.post-comment-heading.reply-4 {
  padding-left: 136px;
}

.post-comment-heading.reply-5 {
  padding-left: 164px;
}

.post-comment-heading.reply-6 {
  padding-left: 192px;
}

/*------------------------
    POST COMMENT FORM
------------------------*/
.post-comment-form {
  padding: 26px 28px 26px 80px;
  position: relative;
  background-color: var(--color-box-background);
}

.post-comment-form.bordered-top {
  border-top: 1px solid var(--color-divider);
}

.post-comment-form.guest-form {
  padding-left: 28px;
  padding-top: 60px;
}

.post-comment-form.with-title {
  padding-top: 80px;
}

.post-comment-form.with-title .user-avatar,
.post-comment-form.with-title .user-avatar-circle {
  top: 82px;
}

.post-comment-form.with-title .mention-list .mention-list-item .user-avatar,
.post-comment-form.with-title .mention-list .mention-list-item .user-avatar-circle {
  top: auto;
}

.post-comment-form .post-comment-form-title {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  position: absolute;
  top: 32px;
  left: 28px;
}

.post-comment-form .post-comment-form-text {
  margin-bottom: 32px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.post-comment-form .post-comment-form-error,
.post-comment-form .post-comment-form-notification {
  margin-top: 8px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.post-comment-form .post-comment-form-error {
  color: #f9515c;
}

.post-comment-form .post-comment-form-notification {
  color: var(--color-primary);
}

.post-comment-form .loader-spinner-wrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

.post-comment-form .user-avatar,
.post-comment-form .user-avatar-circle {
  position: absolute;
  top: 28px;
  left: 28px;
}

.post-comment-form .post-comment-form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.post-comment-form .post-comment-form-actions .button {
  width: 140px;
}

.post-comment-form .post-comment-form-actions .button:first-child {
  width: 120px;
  margin-right: 6px;
}

/*------------------------
    POST COMMENT LIST
------------------------*/
.post-comments {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.post-comments .post-comment,
.post-comments .post-comment-heading {
  border-top: 1px solid var(--color-divider);
}

.post-comments > .post-comment-form {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  border-top: 1px solid var(--color-divider);
}

.post-comments > .loader-spinner-wrap {
  padding: 32px 0;
  border-top: 1px solid var(--color-divider);
  display: flex;
  justify-content: center;
}

.post-comment-list-wrap .post-comment-list.post-comment-list-deleted {
  filter: grayscale(0.8);
  opacity: .7;
  pointer-events: none;
}

.post-comment-list-wrap .post-comment-list:last-child > .post-comment:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.post-comment-list-wrap .post-comment-heading:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/**
 * 86.1. Post Comment - Media Queries
 */
@media screen and (max-width: 460px) {
  .post-comment .content-actions {
    height: auto;
  }
}

/*------------------------------------------------------------------*/
/**
 * 87. Post Open
 */
.post-open {
  margin-bottom: 80px;
}

.post-open.v3 {
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.post-open.v3.full .post-open-body .post-open-content .post-open-content-body {
  width: 100%;
}

.post-open.v3 .post-gallery {
  width: 100%;
  height: 480px;
  position: relative;
}

.post-open.v3 .post-gallery .gallery-popup-button {
  position: absolute;
  top: -8px;
  right: 16px;
  z-index: 2;
}

.post-open.v3 .post-gallery .post-gallery-slider-item {
  height: 480px;
}

.post-open.v3 .post-gallery .post-gallery-controls .slider-control {
  position: absolute;
  top: 224px;
  z-index: 1;
}

.post-open.v3 .post-gallery .post-gallery-controls .slider-control.left {
  left: -8px;
}

.post-open.v3 .post-gallery .post-gallery-controls .slider-control.right {
  right: -8px;
}

.post-open.v3 .post-open-heading {
  padding: 60px 0;
  text-align: center;
}

.post-open.v3 .post-open-heading .post-open-title {
  width: 62.2171945701%;
  margin: 22px auto 0;
}

.post-open.v3 .post-open-heading .post-open-heading-meta {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.post-open.v3 .post-open-heading .post-open-heading-meta .post-open-heading-meta-title {
  margin-right: 16px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

.post-open.v3 .post-open-heading .post-open-heading-meta .author-preview-text {
  text-align: left;
}

.post-open.v3 .post-open-heading + .post-open-body {
  padding-top: 0;
}

.post-open.v3 .post-open-cover {
  height: 480px;
}

.post-open.v3 .post-open-body {
  width: 100%;
  max-width: 100%;
  padding-top: 80px;
  margin: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.post-open.v3 .post-open-body .post-open-content {
  margin-top: 0;
  padding: 0 84px;
}

.post-open.v3 .post-open-body .post-open-content .post-open-content-sidebar {
  width: 13.9664804469%;
}

.post-open.v3 .post-open-body .post-open-content .post-open-content-body {
  width: 86.0335195531%;
}

.post-open.v2.full .post-open-body {
  width: 90%;
  max-width: 100%;
  margin: -100px auto 0;
}

.post-open.v2.full .post-open-body .post-open-content .post-open-content-sidebar {
  width: 14.3835616438%;
  max-width: 84px;
}

.post-open.v2.full .post-open-body .post-open-content .post-open-content-body {
  width: 85.6164383562%;
}

.post-open.v2.no-cover {
  padding-top: 0;
}

.post-open.v2.no-cover .post-open-body {
  margin-top: 0;
}

.post-open.v2.no-cover .post-open-body .post-open-heading {
  margin-bottom: 70px;
}

.post-open.v2.no-cover .post-open-sidebar {
  padding-top: 0;
}

.post-open.v2 .grid {
  margin-top: 0;
  justify-items: end;
}

.post-open.v2 .post-open-cover {
  min-height: 662px;
  height: auto;
  border-radius: 12px;
}

.post-open.v2 .post-open-cover-overlay {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: 80px 100px 160px;
  border-radius: 12px;
  background-color: rgba(32, 33, 49, 0.6);
}

.post-open.v2 .post-open-cover-overlay .post-open-heading {
  width: 100%;
}

.post-open.v2 .post-open-cover-overlay .post-open-heading .post-open-timestamp {
  color: #fff;
}

.post-open.v2 .post-open-cover-overlay .post-open-heading .post-open-timestamp .highlighted {
  color: #fff;
}

.post-open.v2 .post-open-cover-overlay .post-open-heading .post-open-timestamp a {
  font-weight: 700;
}

.post-open.v2 .post-open-cover-overlay .post-open-heading .post-open-title {
  width: 75%;
  color: #fff;
  font-size: calc((54 / var(--vikinger-font-size-base)) * 1rem);
}

.post-open.v2 .post-open-body {
  width: 88.6877828054%;
  max-width: 784px;
  padding-top: 80px;
  margin: -100px 0 0;
}

.post-open.v2 .post-open-body .post-open-content {
  margin-top: 0;
}

.post-open.v2 .post-open-sidebar {
  width: 100%;
  padding-top: 32px;
}

.post-open.no-cover {
  padding-top: 32px;
}

.post-open.no-cover .post-open-body {
  margin-top: 0;
}

.post-open .post-open-cover {
  width: 100%;
  height: 560px;
}

.post-open .post-open-heading .post-open-timestamp {
  color: var(--color-text-alt-2);
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

.post-open .post-open-heading .post-open-timestamp .highlighted {
  margin-right: 12px;
}

.post-open .post-open-heading .post-open-title {
  margin-top: 22px;
  font-size: calc((46 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  word-wrap: break-word;
}

.post-open .post-open-body {
  width: 65%;
  max-width: 784px;
  margin: -220px auto 0;
  padding-top: 90px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.post-open .post-open-body .post-open-heading {
  padding: 0 100px;
}

.post-open .post-open-body .post-open-heading .post-open-timestamp {
  color: var(--color-text-alt-2);
}

.post-open .post-open-body .post-open-heading .post-open-timestamp .highlighted {
  color: var(--color-text);
}

.post-open .post-open-body .post-open-content {
  display: flex;
  margin-top: 70px;
  padding: 0 100px;
}

.post-open .post-open-body .post-open-content .post-open-content-sidebar {
  width: 84px;
  flex-shrink: 0;
}

.post-open .post-open-body .post-open-content .post-open-content-sidebar .author-preview {
  padding-right: 16px;
}

.post-open .post-open-body .post-open-content .post-open-content-sidebar .post-open-sidebar-title {
  width: 40px;
  margin-top: 24px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.post-open .post-open-body .post-open-content .post-open-content-sidebar .social-links {
  margin-top: 26px;
}

.post-open .post-open-body .post-open-content .post-open-content-body {
  width: 500px;
  padding-bottom: 80px;
}

.post-open .post-open-body .post-open-content .post-open-content-body .post-open-excerpt {
  font-size: calc((22 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.5454545455em;
}

.post-open .post-open-body .post-open-content .post-open-content-body .post-open-paragraph {
  margin-top: 36px;
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 2em;
}

.post-open .post-open-body .post-open-content .post-open-content-body .post-open-paragraph:first-child {
  margin-top: 0;
}

.post-open .post-open-body .post-open-content .post-open-content-body .post-open-image {
  width: 100%;
  height: 320px;
  margin-top: 50px;
}

.post-open .post-open-body .post-open-content .post-open-content-body .post-open-image-caption {
  margin-top: 20px;
  color: #8f91ac;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.7142857143em;
  font-weight: 500;
  text-align: center;
}

.post-open .post-open-body .post-open-content .post-open-content-body .tag-list {
  margin-top: 60px;
}

.post-open .post-open-body .post-open-content .post-open-content-body .tag-list:first-child {
  margin-top: 160px;
}

.post-open .post-open-body .page-loader-indicator {
  margin: 0;
  padding-bottom: 40px;
}

.post-open .post-open-body .post-options {
  padding: 0 100px;
}

.post-open .post-footer > .content-actions {
  margin: 0 28px;
  border-top: 1px solid var(--color-divider);
}

.post-open-content-body {
  word-wrap: break-word;
}

/**
 * 87.1. Post Open - Media Queries
 */
@media screen and (max-width: 1365px) {
  .post-open .post-open-body {
    width: 95%;
    max-width: 100%;
  }

  .post-open .post-open-body .post-open-content .post-open-content-sidebar {
    width: 15%;
  }

  .post-open .post-open-body .post-open-content .post-open-content-body {
    width: 85%;
  }

  .post-open.v3 .post-open-heading .post-open-title {
    width: 90%;
  }

  .post-open.v2 .grid {
    justify-items: center;
  }

  .post-open.v2 .post-open-cover-overlay {
    padding: 80px 40px 160px;
  }

  .post-open.v2 .post-open-heading .post-open-title {
    width: 100%;
  }

  .post-open.v2 .post-open-body {
    width: 95%;
    max-width: 100%;
  }
}

@media screen and (max-width: 960px) {
  .post-open.v2 .post-open-cover {
    min-height: auto;
  }

  .post-open.v2 .post-open-cover-overlay {
    padding-top: 60px;
  }

  .post-open.v2 .post-open-body {
    padding-top: 40px;
  }

  .post-open.v2 .post-open-body .post-open-content .post-open-content-sidebar {
    margin-bottom: 40px;
  }

  .post-open.v3 .post-open-body .post-open-content {
    padding: 0 40px;
  }

  .post-open.v3 .post-open-body .post-open-content .post-open-content-body,
  .post-open.v3 .post-open-body .post-open-content .post-open-content-sidebar {
    width: 100%;
  }

  .post-open .post-open-body .post-open-heading {
    padding: 0 40px;
  }

  .post-open .post-open-body .post-open-content {
    padding: 0 40px;
    margin-top: 40px;
    flex-direction: column;
  }

  .post-open .post-open-body .post-open-content .post-open-content-sidebar,
  .post-open .post-open-body .post-open-content .post-open-content-body {
    width: 100%;
  }

  .post-open .post-open-body .post-open-content .post-open-content-sidebar {
    margin-bottom: 60px;
    display: flex;
    align-items: center;
  }

  .post-open .post-open-body .post-open-content .post-open-content-sidebar .post-open-sidebar-title {
    width: auto;
    margin: 0 0 0 16px;
    line-height: 40px;
    text-align: left;
  }

  .post-open .post-open-body .post-open-content .post-open-content-sidebar .social-links {
    margin: 0 0 0 26px;
  }

  .post-open .post-open-body .post-open-content .post-open-content-sidebar .social-links.vertical {
    flex-direction: row;
  }

  .post-open .post-open-body .post-open-content .post-open-content-sidebar .social-links.vertical .social-link {
    margin: 0 16px 0 0;
  }

  .post-open .post-open-body .post-open-content .post-open-content-body .tag-list:first-child {
    margin-top: 60px;
  }

  .post-open .post-open-body .post-options {
    padding: 0 28px;
  }
}

@media screen and (max-width: 460px) {
  .post-open .post-open-cover {
    height: 320px;
  }

  .post-open .post-open-body {
    margin-top: -100px;
    padding-top: 60px;
  }

  .post-open .post-open-body .post-open-heading,
  .post-open .post-open-body .post-open-content {
    padding: 0 28px;
  }

  .post-open .post-open-body .post-open-heading .post-open-title {
    font-size: calc((36 / var(--vikinger-font-size-base)) * 1rem);
  }
}

/*------------------------------------------------------------------*/
/**
 * 88. Page Open
 */
.page-open {
  padding-top: 46px;
}

.page-open .page-open-title {
  font-size: calc((46 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-align: center;
}

.page-open .page-open-cover {
  margin-top: 64px;
  width: 100%;
  height: 480px;
}

.page-open .page-open-content {
  margin-top: 64px;
  padding-bottom: 90px;
}

.page-open .page-open-comments {
  clear: both;
}

/*------------------------------------------------------------------*/
/**
 * 89. Video Box
 */
.video-box {
  border-radius: 12px;
  box-shadow: var(--color-box-shadow);
}

.video-box .checkbox-box {
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 6px;
  z-index: 3;
  transition: none;
}

.video-box .checkbox-box .icon-cross {
  transition: none;
}

.video-box.video-box-cover-only .video-box-cover::after {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.video-box.video-box-cover-only .video-box-cover .video-box-cover-image {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.video-box.small .video-box-cover:hover .play-button {
  transform: translate(0, -20px);
}

.video-box.small .video-box-cover:hover .video-box-info .video-box-title,
.video-box.small .video-box-cover:hover .video-box-info .video-box-text {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
}

.video-box.small .video-box-cover::after {
  border-radius: 12px;
}

.video-box.small .video-box-cover .video-box-cover-image {
  height: 128px;
  border-radius: 12px;
}

.video-box.small .video-box-cover .play-button {
  top: 40px;
  transition: transform .3s ease-in-out;
}

.video-box.small .video-box-cover .video-box-info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 0 16px 14px;
  background-color: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
}

.video-box.small .video-box-cover .video-box-info .video-box-title,
.video-box.small .video-box-cover .video-box-info .video-box-text {
  color: #fff;
  transform: translate(20px, 0);
  opacity: 0;
  visibility: hidden;
  transition: visibility .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out, visibility .3s ease-in-out, opacity .3s ease-in-out;
  transition: transform .3s ease-in-out, visibility .3s ease-in-out, opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
}

.video-box.small .video-box-cover .video-box-info .video-box-title {
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
}

.video-box.small .video-box-cover .video-box-info .video-box-text {
  margin-top: 4px;
  transition-delay: .15s;
}

.video-box .video-box-cover {
  cursor: pointer;
  position: relative;
}

.video-box .video-box-cover:hover::after {
  opacity: 1;
  visibility: visible;
}

.video-box .video-box-cover::after {
  content: '';
  width: 100%;
  height: 100%;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: rgba(21, 21, 31, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
}

.video-box .video-box-cover .video-wrap {
  border-radius: 12px;
}

.video-box .video-box-cover .video-wrap video {
  border-radius: 12px;
}

.video-box .video-box-cover .video-box-cover-image {
  height: 160px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.video-box .video-box-cover .play-button {
  position: absolute;
  top: 56px;
  left: 50%;
  margin-left: -23px;
  z-index: 2;
}

.video-box .video-box-info {
  padding: 22px 28px;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: var(--color-box-background);
}

.video-box .video-box-info .video-box-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.video-box .video-box-info .video-box-text {
  margin-top: 6px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

/*------------------------------------------------------------------*/
/**
 * 90. Content Actions
 */
.content-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 52px;
}

.content-actions .content-action {
  display: flex;
  flex-wrap: wrap;
}

/**
 * 90.1. Content Actions - Media Queries
 */
@media screen and (max-width: 479px) {
  .content-actions .user-avatar-list {
    display: none;
  }
  .content-actions .user-avatar-list + .meta-line-text {
    display: none;
  }
}

/*------------------------------------------------------------------*/
/**
 * 91. Reaction Item List
 */
.reaction-item-list {
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.reaction-item-list.small .reaction-item {
  width: 20px;
  height: 20px;
}

.reaction-item-list.small .reaction-item .reaction-image {
  width: 16px;
  height: 16px;
}

.reaction-item-list .reaction-item-wrap {
  margin-left: -6px;
}

.reaction-item-list .reaction-item-wrap:last-child {
  margin-left: 0;
}

.reaction-item-list .reaction-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--color-box-background);
  margin-left: -6px;
}

.reaction-item-list .reaction-item .simple-dropdown .simple-dropdown-text:first-child {
  margin-bottom: 10px;
}

.reaction-item-list .reaction-item > .reaction-image {
  cursor: pointer;
}

.reaction-item-list .reaction-item:last-child {
  margin-left: 0;
}

/*----------------------
    REACTION IMAGE
----------------------*/
.reaction-image {
  width: 20px;
  height: 20px;
}

/*------------------------------------------------------------------*/
/**
 * 92. User Avatar List
 */
.user-avatar-list {
  display: flex;
  justify-content: flex-end;
  flex-direction: row-reverse;
}

.user-avatar-list.reverse {
  flex-direction: row;
  justify-content: flex-start;
}

.user-avatar-list.reverse.medium .user-avatar:last-child,
.user-avatar-list.reverse.medium .user-avatar-circle:last-child {
  margin-left: -10px;
}

.user-avatar-list.reverse.medium .user-avatar:first-child,
.user-avatar-list.reverse.medium .user-avatar-circle:first-child {
  margin-left: 0;
}

.user-avatar-list.centered {
  justify-content: center;
}

.user-avatar-list.medium .user-avatar,
.user-avatar-list.medium .user-avatar-circle {
  margin-left: -10px;
}

.user-avatar-list.medium .user-avatar:last-child,
.user-avatar-list.medium .user-avatar-circle:last-child {
  margin-left: 0;
}

.user-avatar-list .user-avatar,
.user-avatar-list .user-avatar-circle {
  margin-left: -8px;
}

.user-avatar-list .user-avatar .user-avatar-border,
.user-avatar-list .user-avatar-circle .user-avatar-border {
  z-index: 3;
}

.user-avatar-list .user-avatar:last-child,
.user-avatar-list .user-avatar-circle:last-child {
  margin-left: 0;
}

/*------------------------------------------------------------------*/
/**
 * 93. User Preview
 */
.user-preview {
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.user-preview:not(.landscape) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.user-preview.fixed-height {
  height: 140px;
}

.user-preview.fixed-height-medium {
  height: 284px;
}

.user-preview.small .user-preview-cover {
  height: 70px;
}

.user-preview.small .user-preview-info .tag-sticker {
  right: 16px;
}

.user-preview.small .user-preview-info .user-short-description .user-short-description-title {
  font-size: calc((18 / var(--vikinger-font-size-base)) * 1rem);
}

.user-preview.small .user-preview-info .user-short-description .user-short-description-title.small {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.user-preview.small .user-preview-info .user-stats,
.user-preview.small .user-preview-info .social-links {
  margin-top: 36px;
}

.user-preview.small .user-preview-info .no-results-text.no-results-social {
  margin-top: 32px;
}

.user-preview.small .user-preview-info .user-preview-social-links-wrap {
  width: 160px;
  margin: 32px auto 0;
}

.user-preview.small .user-preview-info .user-preview-social-links-wrap .slider-controls {
  width: 208px;
}

.user-preview.landscape {
  display: flex;
  align-items: center;
  min-height: 100px;
  padding-left: 84px;
  position: relative;
}

.user-preview.landscape .user-stats .user-stat {
  padding: 0 24px;
}

.user-preview.landscape .user-preview-cover {
  width: 84px;
  height: 100%;
  border-top-right-radius: 0;
  border-bottom-left-radius: 12px;
  position: absolute;
  top: 0;
  left: 0;
}

.user-preview.landscape .user-preview-info {
  width: 100%;
  padding: 0 28px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-preview.landscape .user-preview-info .no-results-text {
  width: 184px;
  margin-top: 0;
  line-height: auto;
}

.user-preview.landscape .user-preview-info .no-results-text.no-results-social {
  width: 160px;
  margin-top: 0;
}

.user-preview.landscape .user-preview-info .user-short-description {
  width: 200px;
}

.user-preview.landscape .user-preview-info .user-short-description .vikinger-user-tag,
.user-preview.landscape .user-preview-info .user-short-description .vikinger-pmpro-level-tag {
  justify-content: flex-start;
}

.user-preview.landscape .user-preview-info .user-short-description + .user-stats {
  margin-top: 0;
}

.user-preview.landscape .user-preview-info .user-avatar-list {
  width: 250px;
}

.user-preview.landscape .user-preview-info .user-avatar-list + .user-preview-actions {
  margin-top: 0;
}

.user-preview.landscape .user-preview-info .user-avatar-list,
.user-preview.landscape .user-preview-info .badge-list,
.user-preview.landscape .user-preview-info .user-preview-actions,
.user-preview.landscape .user-preview-info .social-links {
  margin-top: 0;
}

.user-preview.landscape .user-preview-info .social-links {
  width: 168px;
}

.user-preview.landscape .user-preview-info .badge-list {
  display: flex;
  width: 184px;
}

.user-preview.landscape .user-preview-info .badge-list .badge-item {
  margin-right: 8px;
}

.user-preview.landscape .user-preview-info .badge-list .badge-item:last-child {
  margin-right: 0;
}

.user-preview.landscape .user-preview-info .vikinger-user-tag-list {
  justify-content: flex-start;
}

.user-preview.landscape .user-preview-info .user-preview-social-links-wrap {
  width: 160px;
  margin: 0 0 0 8px;
}

.user-preview.landscape .user-preview-info .user-preview-social-links-wrap .slider-controls {
  width: 208px;
}

.user-preview.landscape .user-preview-info .user-preview-actions {
  min-width: 140px;
  min-height: auto;
}

.user-preview.landscape .user-preview-info .user-preview-actions .button,
.user-preview.landscape .user-preview-info .user-preview-actions .tag-sticker {
  margin-right: 12px;
}

.user-preview.landscape .user-preview-info .user-preview-actions .button:last-child,
.user-preview.landscape .user-preview-info .user-preview-actions .tag-sticker:last-child {
  margin-right: 0;
}

.user-preview.landscape .user-preview-info .user-preview-actions .tag-sticker {
  position: static;
}

.user-preview.landscape .user-preview-info .user-preview-actions .button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}

.user-preview .user-preview-cover {
  height: 96px;
  border-top-right-radius: 12px;
  border-top-left-radius: 12px;
  position: relative;
}

.user-preview .user-preview-cover .uploadable-item-remove-button {
  position: absolute;
  top: 0;
  right: 0;
}

.user-preview .vikinger-user-tag-list {
  display: flex;
  flex-wrap: wrap;
}

.user-preview .vikinger-user-tag-list > * {
  margin-right: 4px;
}

.user-preview .vikinger-user-tag-list > *:last-child {
  margin-right: 0;
}

.user-preview .user-preview-info {
  padding: 0 28px 32px;
  position: relative;
}

.user-preview .user-preview-info .uploadable-item-remove-button {
  position: absolute;
  top: -48px;
  right: 88px;
  z-index: 2;
}

.user-preview .user-preview-info > .tag-sticker {
  position: absolute;
  top: -12px;
  right: 28px;
}

.user-preview .user-preview-info .no-results-text {
  margin-top: 28px;
  line-height: 35px;
}

.user-preview .user-preview-info .no-results-text.no-results-social {
  margin-top: 20px;
  line-height: 36px;
}

.user-preview .user-preview-info .user-short-description.tiny .user-short-description-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.user-preview .user-preview-info .user-short-description.tiny .user-short-description-text {
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
}

.user-preview .user-preview-info .user-short-description .user-short-description-title {
  font-size: calc((20 / var(--vikinger-font-size-base)) * 1rem);
}

.user-preview .user-preview-info .user-short-description .user-short-description-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.user-preview .user-preview-info .user-short-description + .user-stats {
  margin-top: 30px;
}

.user-preview .user-preview-info .user-short-description + .button {
  margin-top: 34px;
}

.user-preview .user-preview-info .badge-list {
  margin-top: 28px;
}

.user-preview .user-preview-info .user-preview-stats-slides {
  height: 60px;
  margin-top: 30px;
}

.user-preview .user-preview-info .user-preview-stats-roster {
  position: absolute;
  top: 22px;
  right: 28px;
}

.user-preview .user-preview-info .user-preview-text {
  width: 270px;
  margin: -5px auto 0;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.4285714286em;
  text-align: center;
}

.user-preview .user-preview-info .social-links {
  margin-top: 24px;
  height: 32px;
}

.user-preview .user-preview-info .user-preview-social-links-wrap {
  width: 200px;
  height: 36px;
  margin: 20px auto 0;
  position: relative;
}

.user-preview .user-preview-info .user-preview-social-links-wrap .user-preview-social-links {
  padding-top: 4px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.user-preview .user-preview-info .user-preview-social-links-wrap .slider-controls {
  width: 248px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 10px;
  left: -28px;
}

.user-preview .user-preview-info .user-avatar-list {
  margin-top: 34px;
  height: 36px;
}

.user-preview .user-preview-info .user-avatar-list + .user-preview-actions {
  margin-top: 36px;
}

.user-preview .user-preview-info .user-preview-actions {
  display: flex;
  min-height: 48px;
  margin-top: 40px;
}

.user-preview .user-preview-info .user-preview-actions.user-preview-actions-tagged .tag-sticker {
  flex-shrink: 0;
}

.user-preview .user-preview-info .user-preview-actions.user-preview-actions-tagged .tag-sticker.button-tag {
  flex-shrink: 1;
}

.user-preview .user-preview-info .user-preview-actions .button-tag,
.user-preview .user-preview-info .user-preview-actions .button {
  width: 100%;
  height: 48px;
  margin-right: 16px;
}

.user-preview .user-preview-info .user-preview-actions .button-tag:last-child,
.user-preview .user-preview-info .user-preview-actions .button:last-child {
  margin-right: 0;
}

.user-preview .user-preview-info .user-preview-actions .button-tag .button-icon,
.user-preview .user-preview-info .user-preview-actions .button .button-icon {
  fill: #fff;
}

.user-preview .user-preview-info .user-preview-actions .button-tag.white .button-icon,
.user-preview .user-preview-info .user-preview-actions .button.white .button-icon {
  fill: var(--color-icon);
}

.user-preview .user-preview-info .user-preview-actions .button-tag.white:hover .button-icon,
.user-preview .user-preview-info .user-preview-actions .button.white:hover .button-icon {
  fill: #fff;
}

.user-preview .user-preview-info .user-preview-actions .button-tag.full,
.user-preview .user-preview-info .user-preview-actions .button.full {
  width: 100%;
}

.user-preview .user-preview-info .user-preview-actions .button-tag.full .button-icon,
.user-preview .user-preview-info .user-preview-actions .button.full .button-icon {
  position: relative;
  left: -12px;
}

.user-preview .user-preview-author {
  padding-left: 26px;
  position: relative;
}

.user-preview .user-preview-author .user-preview-author-image {
  position: absolute;
  top: 1px;
  left: 0;
}

.user-preview .user-preview-author .user-preview-author-title {
  font-size: calc((10 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.user-preview .user-preview-author .user-preview-author-text {
  margin-top: 1px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.user-preview .user-preview-author .user-preview-author-text a {
  color: var(--color-text);
  font-weight: 700;
}

.user-preview .user-preview-footer {
  display: flex;
  align-items: center;
  height: 65px;
  border-top: 1px solid var(--color-divider);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: var(--color-box-background-alt);
}

.user-preview .user-preview-footer.padded {
  height: auto;
  padding: 16px 28px;
}

.user-preview .user-preview-footer .user-preview-footer-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  border-right: 1px solid var(--color-divider);
}

.user-preview .user-preview-footer .user-preview-footer-action:last-child {
  border-right: none;
}

.user-preview .user-preview-footer .user-preview-footer-action.full {
  width: 100%;
  padding: 0 28px;
}

.user-preview .user-preview-footer .user-preview-footer-action.full .tag-sticker,
.user-preview .user-preview-footer .user-preview-footer-action.full .button {
  width: 100%;
}

.user-preview .user-preview-footer .user-preview-footer-action .button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 44px;
}

/**
 * 93.1. User Preview - Media Queries
 */
@media screen and (max-width: 1365px) {
  .user-preview.landscape .user-preview-info .badge-list,
  .user-preview.landscape .user-preview-info .no-results-text {
    display: none;
  }

  .user-preview.landscape .user-preview-info .no-results-text.no-results-social {
    display: block;
  }
}

@media screen and (max-width: 1260px) {
  .user-preview.landscape .user-preview-info .social-links,
  .user-preview.landscape .user-preview-info .user-preview-social-links-wrap,
  .user-preview.landscape .user-preview-info .user-avatar-list,
  .user-preview.landscape .user-preview-info .no-results-text.no-results-social {
    display: none;
  }
}

@media screen and (max-width: 960px) {
  .user-preview.landscape .user-preview-info .user-stats {
    display: none;
  }
}

@media screen and (max-width: 460px) {
  .user-preview.landscape {
    padding-left: 60px;
  }

  .user-preview.landscape .user-preview-cover {
    width: 60px;
  }

  .user-preview.landscape .user-preview-info {
    height: 100px;
    padding: 0 68px 0 0;
  }

  .user-preview.landscape .user-preview-info .user-short-description {
    width: auto;
  }

  .user-preview.landscape .user-preview-info .user-preview-actions {
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 8px;
    right: 12px;
  }

  .user-preview.landscape .user-preview-info .user-preview-actions .button,
  .user-preview.landscape .user-preview-info .user-preview-actions .tag-sticker {
    width: 44px;
    height: 40px;
    margin: 0 0 4px 0;
  }

  .user-preview.landscape .user-preview-info .user-preview-actions .button:last-child,
  .user-preview.landscape .user-preview-info .user-preview-actions .tag-sticker:last-child {
    margin-bottom: 0;
  }

  .user-preview .user-preview-info .user-preview-stats-slides {
    height: 70px;
  }

  .user-preview .user-preview-info .user-preview-text {
    width: 95%;
  }

  .user-preview-widget .user-preview-widget-footer {
    display: flex;
    justify-content: center;
    height: 60px;
    padding-top: 20px;
  }

  .user-preview-widget .user-preview-widget-footer .user-preview-widget-footer-action {
    position: static;
  }

  .user-preview-widget .user-preview-widget-footer .user-preview-widget-footer-action:first-child {
    display: none;
  }
}

/*------------------------------------------------------------------*/
/**
 * 94. Photo Preview
 */
.photo-preview {
  display: block;
  border-radius: 12px;
  box-shadow: var(--color-box-shadow);
  cursor: pointer;
  position: relative;
}

.photo-preview.small {
  height: 184px;
}

.photo-preview:hover .photo-preview-info {
  opacity: 1;
  visibility: visible;
}

.photo-preview:hover .photo-preview-info .reaction-count-list .reaction-count {
  transform: scale(1);
}

.photo-preview .photo-preview-image {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.photo-preview .checkbox-box {
  position: absolute;
  top: 8px;
  right: 6px;
  z-index: 3;
  transition: none;
}

.photo-preview .checkbox-box .icon-cross {
  transition: none;
}

.photo-preview .photo-preview-info {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-color: rgba(21, 21, 31, 0.96);
  position: relative;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}

.photo-preview .photo-preview-info .reaction-count-list .reaction-count {
  transform: scale(0);
  transition: transform .2s ease-in-out;
}

.photo-preview .photo-preview-info .reaction-count-list .reaction-count:first-child {
  transition-delay: .1s;
}

.photo-preview .photo-preview-info .reaction-count-list .reaction-count:last-child {
  transition-delay: .2s;
}

/*------------------------------------------------------------------*/
/**
 * 95. Popup Box Body
 */
.popup-box-body {
  display: flex;
  border-radius: 12px;
  background-color: var(--color-box-background);
}

.popup-box-body > .page-loader-indicator {
  display: flex;
  align-items: center;
  margin: 0 auto;
}

.popup-box-body .popup-box-sidebar {
  width: 36.2244897959%;
  border-right: 1px solid var(--color-divider);
}

.popup-box-body .popup-box-sidebar .sidebar-menu-item.limited {
  max-height: 260px;
  overflow: hidden auto;
}

.popup-box-body .popup-box-sidebar .popup-box-sidebar-footer {
  padding: 28px;
}

.popup-box-body .popup-box-sidebar .popup-box-sidebar-footer .button {
  margin-bottom: 16px;
}

.popup-box-body .popup-box-sidebar .popup-box-sidebar-footer .button:last-child {
  margin-bottom: 0;
}

.popup-box-body .popup-box-sidebar .popup-box-sidebar-footer .required-field-message {
  margin-bottom: 16px;
  text-align: center;
}

.popup-box-body .popup-box-sidebar .user-preview {
  box-shadow: none;
  border-top-right-radius: 0;
}

.popup-box-body .popup-box-sidebar .user-preview .user-preview-cover {
  border-top-right-radius: 0;
}

.popup-box-body .popup-box-content {
  width: 63.7755102041%;
  border-bottom-right-radius: 12px;
}

.popup-box-body .popup-box-content.limited {
  max-height: 620px;
  overflow: hidden auto;
}

.popup-box-body .popup-box-content .widget-box {
  box-shadow: none;
}

/**
 * 95.1. Popup Box Body - Media Queries
 */
@media screen and (max-width: 680px) {
  .popup-box-body {
    display: block;
  }

  .popup-box-body .popup-box-sidebar,
  .popup-box-body .popup-box-content {
    width: 100%;
  }

  .popup-box-body .popup-box-sidebar {
    border-right: none;
  }
}

/*------------------------------------------------------------------*/
/**
 * 96. Achievement Preview List
 */
.achievement-preview-list {
  display: flex;
  flex-direction: column;
  gap: calc((28 / 16) * 1em);
}

/*--------------------------
    ACHIEVEMENT PREVIEW
--------------------------*/
.achievement-preview .achievement-preview-info {
  padding: 2px 8px 0 44px;
  position: relative;
}

.achievement-preview .achievement-preview-info .achievement-preview-image {
  width: 32px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.achievement-preview .achievement-preview-info .achievement-preview-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.achievement-preview .achievement-preview-info .achievement-preview-text {
  margin-top: 4px;
  color: var(--color-text);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
  line-height: 1.3333333333em;
}

.achievement-preview .progress-stat {
  margin-top: 16px;
}

/*------------------------------------------------------------------*/
/**
 * 97. Tab Container
 */
.tab-container .tab-item {
  display: none;
}

.tab-container .tab-item:first-child {
  display: block;
}

/*------------------------------------------------------------------*/
/**
 * 98. XM Popup Container
 */
.xm-popup_container {
  width: 90%;
  max-width: 900px;
  position: relative;
}

.xm-popup_container.xm-popup_container-gallery {
  width: auto;
}

.xm-popup_container.activity-media-popup {
  max-width: 100%;
  height: 100%;
  max-height: 80%;
}

.xm-popup_container.group-manage-popup {
  max-width: 984px;
}

.xm-popup_container.share-box-popup, .xm-popup_container.upload-box-popup {
  max-width: 584px;
}

.xm-popup_container.reaction-box-popup,
.xm-popup_container.form-popup {
  max-width: 484px;
}

.xm-popup_container.message-box-popup {
  max-width: 416px;
}

.xm-popup_overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--color-overlay);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  overflow: hidden auto;
}

.xm-popup_overlay.xm-popup_overlay-premade {
  display: block;
}

.xm-popup_overlay.xm-popup_overlay-premade .xm-popup_container {
  margin: auto;
}

.xm-popup_gallery-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.xm-popup_gallery-image {
  max-width: 100%;
  height: auto;
  user-select: none;
}

.xm-popup_button-next,
.xm-popup_button-previous {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  cursor: pointer;
}

.xm-popup_button-next {
  right: 0;
}

.xm-popup_button-previous {
  left: 0;
}

.xm-popup_button-next-icon,
.xm-popup_button-previous-icon {
  fill: #fff;
  width: 8px;
  height: 12px;
}

.xm-popup_button-previous-icon {
  transform: rotate(180deg);
}

.xm-popup_iframe-container {
  padding-top: 56.25%;
  background-color: black;
  position: relative;
}

.xm-popup_iframe-container iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.xm-popup_close-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--color-secondary-dark);
  cursor: pointer;
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 2;
  transition: background-color .2s ease-in-out;
}

.xm-popup_close-button:hover {
  background-color: var(--color-primary);
}

.xm-popup_close-button-icon {
  fill: #fff;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

/**
 * 98.1. XM Popup Container - Media Queries
 */
@media screen and (max-width: 980px) {
  .xm-popup_container.xm-popup_container-gallery {
    max-width: 80%;
  }
}

@media screen and (max-width: 680px) {
  .xm-popup_container {
    width: 85%;
  }
}

/*------------------------------------------------------------------*/
/**
 * 99. Header
 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 80px;
  background-color: var(--color-header-background);
  position: sticky;
  top: 0;
  z-index: 3;
  transition: transform .15s ease-out;
}

.header.header--hidden {
  transform: translateY(-100%);
}

.header .logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 80px;
  height: 100%;
}

.header .logo.logo-encased {
  background-color: var(--color-header-logo-background);
}

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

.header .header-actions.header-actions-full {
  height: 100%;
}

.header .header-actions.search-bar {
  width: 30%;
  margin-right: 26px;
}

.header .header-actions.search-bar #vk-search-form,
.header .header-actions.search-bar .header-search-dropdown {
  width: 100%;
  height: 100%;
}

.header .header-actions.search-bar .search-form-wrap {
  width: 100%;
  height: 100%;
}

.header .header-actions.search-bar .search-form-wrap .dropdown-box {
  width: 100%;
  padding-bottom: 0;
}

.header .header-actions.search-bar .search-form-wrap .dropdown-box .loader-spinner-wrap {
  display: flex;
  justify-content: center;
}

.header .header-actions .navigation {
  margin-right: 16px;
}

.header .header-actions .progress-stat {
  width: 110px;
  margin-right: 36px;
}

.header .header-actions .login-button,
.header .header-actions .register-button {
  padding: 0 26px;
  margin-right: 12px;
}

.header .header-actions .login-button:last-child,
.header .header-actions .register-button:last-child {
  margin-right: 28px;
}

.header .header-actions .login-form {
  margin: 0 14px 0 12px;
}

.header .header-actions .login-form .button {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.header .header-actions .point-item-list {
  margin-right: 26px;
}

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

.header .header-brand .header-brand-text {
  color: var(--color-header-text);
  font-family: var(--vikinger-font-family-secondary);
  font-size: calc((20 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 900;
  text-transform: uppercase;
}

.header .header-brand .header-brand-text:first-child {
  margin-left: 20px;
}

.header .sidemenu-trigger,
.header .mobilemenu-trigger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  cursor: pointer;
}

.header .sidemenu-trigger.active .icon-grid, .header .sidemenu-trigger:hover .icon-grid {
  fill: var(--color-header-icon-hover);
}

.header .sidemenu-trigger .icon-grid {
  pointer-events: none;
  transition: fill .3s ease-in-out;
}

.header .mobilemenu-trigger {
  display: none;
}

.header .mobilemenu-trigger .burger-icon .burger-icon-bar {
  background-color: var(--color-header-mobilemenu-trigger-icon);
}

.header .input-search {
  width: 100%;
}

.header .action-list {
  height: 80px;
}

.header .action-list.action-list-small {
  height: 60px;
}

.header .action-list.action-list-small::before, .header .action-list.action-list-small::after {
  display: none;
}

.header .action-list.action-list-small .action-list-item.unread::after {
  top: 16px;
}

.header .action-list.action-list-mobile {
  padding: 0;
  display: none;
}

.header .action-list::before, .header .action-list::after {
  top: 24px;
}

.header .action-item-wrap {
  margin-left: 18px;
}

.header .action-item-wrap:last-child {
  margin-right: 18px;
}

.header .action-item-wrap + .action-item-wrap {
  margin: 0 18px 0 0;
}

.header .action-item {
  height: 80px;
  padding: 0 14px;
}

.header .progress-stat .bar-progress-wrap .bar-progress-info {
  color: var(--color-header-text);
}

.header .point-item .point-item-text {
  color: var(--color-header-text);
}

/**
 * 99.1. Header - Media Queries
 */
@media screen and (max-width: 1500px) {
  .header .header-brand .header-brand-text {
    display: none;
  }
}

@media screen and (max-width: 1365px) {
  .header .header-actions .mobilemenu-trigger,
  .header.logged-out .header-actions .mobilemenu-trigger {
    display: flex;
  }

  .header .header-actions .sidemenu-trigger,
  .header .header-actions .navigation,
  .header .header-actions .point-item-list,
  .header .header-actions:last-child .action-item-wrap,
  .header .header-actions #header-notifications .action-list::before {
    display: none;
  }

  .header .header-actions.search-bar {
    width: 50%;
  }

  .header .header-actions .progress-stat {
    margin-right: 26px;
  }
}

@media screen and (max-width: 960px) {
  .header {
    height: 60px;
  }

  .header .logo {
    width: 60px;
  }

  .header.logged-out .header-actions:nth-last-child(2) {
    display: block;
  }

  .header .header-actions:last-child,
  .header.logged-out .header-actions .navigation,
  .header.logged-out .header-actions:last-child,
  .header .header-actions.search-bar .interactive-input .interactive-input-action,
  .header .header-actions.search-bar .interactive-input .interactive-input-icon-wrap,
  .header .header-actions .progress-stat {
    display: none;
  }

  .header .action-list.action-list-mobile {
    display: flex;
  }

  .header .header-actions .header-brand .logo {
    display: flex;
    justify-content: center;
    width: 60px;
    margin-left: 0;
  }

  .header .header-actions .mobilemenu-trigger {
    width: 60px;
    height: 60px;
  }

  .header .header-actions.search-bar {
    width: 100%;
    margin-right: 0;
    position: absolute;
    top: 60px;
    height: 60px;
    opacity: 0;
    visibility: hidden;
    transform: translate(0, -20px);
    transition: transform .2s ease-in-out, opacity .2s ease-in-out, visibility .2s ease-in-out;
  }

  .header .header-actions.search-bar.search-bar-active {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
  }

  .header .header-actions.search-bar .interactive-input {
    height: 100%;
  }

  .header .header-actions.search-bar .interactive-input input {
    border-radius: 0;
  }
}

/*------------------------------------------------------------------*/
/**
 * 100. Sidemenu Trigger
 */
.sidemenu-trigger .icon-grid {
  fill: var(--color-header-icon);
}

.sidemenu-trigger.active .icon-grid {
  fill: var(--color-icon-highlighted);
}

/*------------------------------------------------------------------*/
/**
 * 101. Navigation
 */
.navigation {
  height: 80px;
}

/*------------------------------------------------------------------*/
/**
 * 102. Menu Main
 */
.menu-main {
  display: flex;
}

.menu-main .menu-main-item {
  flex-shrink: 0;
  position: relative;
}

.menu-main .menu-main-item .menu-main-item-link {
  padding: 0 24px;
  display: block;
  color: var(--color-header-text);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 80px;
  cursor: pointer;
  transition: color .2s ease-in-out;
  word-break: break-word;
}

.menu-main .menu-main-item .menu-main-item-link .icon-dots {
  transition: fill .2s ease-in-out;
}

.menu-main .menu-main-item .menu-main-item-link .menu-sub-item-icon {
  fill: var(--color-header-text);
  position: absolute;
  top: 11px;
  right: 10px;
  pointer-events: none;
  transition: fill .2s ease-in-out;
}

.menu-main .menu-main-item .menu-main-item-link .menu-main-item-link-icon {
  fill: var(--color-header-text);
  width: 6px;
  height: 6px;
  margin-left: 8px;
  transform: rotate(90deg);
  transition: fill .2s ease-in-out;
}

.menu-main .menu-main-item:hover > .menu-main-item-link {
  color: var(--color-primary-light);
}

.menu-main .menu-main-item:hover > .menu-main-item-link .menu-sub-item-icon,
.menu-main .menu-main-item:hover > .menu-main-item-link .menu-main-item-link-icon,
.menu-main .menu-main-item:hover > .menu-main-item-link .icon-dots {
  fill: var(--color-primary-light);
}

.menu-main .menu-main-item:hover > .menu-main,
.menu-main .menu-main-item:hover > .menu-wide {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
  animation: .6s linear forwards menuSlideDownPointerEvents;
}

@keyframes menuSlideDownPointerEvents {
  0% {
    pointer-events: none;
  }

  100% {
    pointer-events: auto;
  }
}

.menu-main .menu-main-item:hover > .menu-main .menu-main-item:hover > .menu-main,
.menu-main .menu-main-item:hover > .menu-wide .menu-main-item:hover > .menu-main {
  transform: translate(0, 0);
}

.menu-main .menu-main-item .menu-wide,
.menu-main .menu-main-item .menu-main {
  position: absolute;
  z-index: 99997;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s ease-in-out, opacity .3s ease-in-out, visibility .3s ease-in-out;
  transform: translate(0, -40px);
}

.menu-main .menu-main-item .menu-wide .menu-main,
.menu-main .menu-main-item .menu-main .menu-main {
  top: -8px;
  left: 100%;
  transform: translate(-40px, 0);
}

.menu-main .menu-main-item .menu-wide {
  top: 72px;
}

.menu-main .menu-main-item .menu-main {
  display: block;
  min-width: 120px;
  padding: 8px 0;
  border-radius: 10px;
  background-color: var(--color-header-background);
  top: 64px;
}

.menu-main .menu-main-item .menu-main .menu-main-item {
  display: block;
}

.menu-main .menu-main-item .menu-main .menu-main-item .menu-main-item-link {
  padding: 8px 18px;
  line-height: 1em;
  white-space: nowrap;
}

/*------------------------------------------------------------------*/
/**
 * 103. Menu
 */
.menu.small .menu-item.active .menu-item-link:hover {
  padding-left: 0;
}

.menu.small .menu-item .menu-item-link {
  padding-left: 0;
}

.menu.small .menu-item .menu-item-link:focus, .menu.small .menu-item .menu-item-link:hover {
  padding-left: 0;
}

.menu .menu-item {
  padding: 0 16px;
  margin-bottom: 10px;
}

.menu .menu-item:last-child {
  margin-bottom: 0;
}

.menu .menu-item.active > .menu-item-link {
  color: #fff;
  background-color: var(--color-primary);
  box-shadow: var(--color-primary-shadow);
}

.menu .menu-item.active > .menu-item-link:hover {
  background-color: var(--color-primary);
  color: #fff;
  padding-left: 62px;
  box-shadow: var(--color-primary-shadow);
}

.menu .menu-item.active > .menu-item-link:hover .menu-item-link-icon {
  fill: #fff;
}

.menu .menu-item.active > .menu-item-link .menu-item-link-icon {
  fill: #fff;
}

.menu .menu-item .menu {
  margin: 12px 0;
}

.menu .menu-item .menu-item-link {
  display: flex;
  align-items: center;
  height: 48px;
  padding-left: 62px;
  border-radius: 12px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 1.2857142857em;
  position: relative;
  transition: all .2s ease-in-out;
}

.menu .menu-item .menu-item-link:focus, .menu .menu-item .menu-item-link:hover {
  background-color: var(--color-box-over-box-light-background);
  color: var(--color-text);
  padding-left: 70px;
  box-shadow: var(--color-overbox-shadow);
}

.menu .menu-item .menu-item-link:focus .menu-item-link-icon, .menu .menu-item .menu-item-link:hover .menu-item-link-icon {
  fill: var(--color-primary);
}

.menu .menu-item .menu-item-link .menu-item-link-icon {
  fill: var(--color-icon);
  position: absolute;
  top: 14px;
  left: 14px;
  pointer-events: none;
  transition: all .2s ease-in-out;
}

/*------------------------------------------------------------------*/
/**
 * 104. Section Navigation
 */
.section-navigation {
  height: 80px;
  padding: 0 43px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
  position: relative;
}

.section-navigation .slider-controls .slider-control {
  width: 43px;
  height: 80px;
  position: absolute;
  top: 0;
}

.section-navigation .slider-controls .slider-control.left {
  left: 0;
}

.section-navigation .slider-controls .slider-control.right {
  right: 0;
}

/*------------------------------------------------------------------*/
/**
 * 105. Section Menu
 */
.section-menu {
  height: 80px;
}

.section-menu.secondary .section-menu-item.active, .section-menu.secondary .section-menu-item:hover {
  border-bottom: 4px solid var(--color-secondary);
}

.section-menu.secondary .section-menu-item.active .section-menu-item-icon {
  fill: var(--color-icon-highlighted);
}

.section-menu.medium .section-menu-item {
  width: 160px;
}

.section-menu .section-menu-item {
  float: left;
  width: 122px;
  height: 80px;
  position: relative;
}

.section-menu .section-menu-item.active {
  border-bottom: 4px solid var(--color-primary);
}

.section-menu .section-menu-item.active .section-menu-item-icon {
  fill: var(--color-icon-highlighted);
  opacity: 1;
}

.section-menu .section-menu-item:hover {
  border-bottom: 4px solid var(--color-primary);
}

.section-menu .section-menu-item:hover .section-menu-item-icon {
  transform: translate(0, -20px);
  opacity: 0;
  visibility: hidden;
}

.section-menu .section-menu-item:hover .section-menu-item-text {
  transform: translate(0, 0);
  opacity: 1;
  visibility: visible;
}

.section-menu .section-menu-item.no-icon .section-menu-item-text {
  transform: translate(0, 0);
  opacity: .6;
  visibility: visible;
}

.section-menu .section-menu-item.no-icon:hover .section-menu-item-text, .section-menu .section-menu-item.no-icon.active .section-menu-item-text {
  opacity: 1;
}

.section-menu .section-menu-item::after {
  content: '';
  width: 1px;
  height: 20px;
  background-color: var(--color-divider);
  position: absolute;
  top: 30px;
  right: 0;
}

.section-menu .section-menu-item:first-child::before {
  content: '';
  width: 1px;
  height: 20px;
  background-color: var(--color-divider);
  position: absolute;
  top: 30px;
  left: 0;
}

.section-menu .section-menu-item .section-menu-item-icon {
  fill: var(--color-icon);
  opacity: .6;
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -10px;
  transition: opacity .25s ease-in-out, visibility .25s ease-in-out, transform .25s ease-in-out;
}

.section-menu .section-menu-item .section-menu-item-text {
  width: 100%;
  color: var(--color-text);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-align: center;
  position: absolute;
  top: 34px;
  transform: translate(0, 20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-in-out, visibility .25s ease-in-out, transform .25s ease-in-out;
}

/*------------------------------------------------------------------*/
/**
 * 106. Menu Wide
 */
.menu-wide {
  display: flex;
  padding: 50px 16px 50px 60px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.menu-wide .navigation-section {
  width: 184px;
  margin-right: 16px;
}

.menu-wide .navigation-section:last-child {
  margin-right: 0;
}

/*------------------------------------------------------------------*/
/**
 * 107. Sidebar
 */
.sidebar {
  height: 100%;
  padding-top: 80px;
  position: fixed;
  top: 0;
  z-index: 2;
}

.sidebar.right {
  right: 0;
}

.sidebar.left {
  left: 0;
}

.sidebar.navigation-widget {
  padding-top: 0;
  margin-top: 80px;
  overflow-y: auto;
  transition: transform .35s ease-in-out, margin-top .15s ease-out;
}

.sidebar.navigation-widget.navigation-widget--offset {
  margin-top: 0;
}

.sidebar.navigation-widget.navigation-widget-mobile {
  margin-top: 0;
  z-index: 100000;
}

.sidebar.navigation-widget.navigation-widget-closed {
  padding-top: 20px;
  overflow-y: visible;
}

.sidebar.navigation-widget.navigation-widget-delayed {
  transition: transform .35s ease-in-out .25s, margin-top .15s ease-out;
}

.sidebar.navigation-widget.navigation-widget-hidden {
  transform: translate(-100%, 0);
}

/*------------------------------------------------------------------*/
/**
 * 108. Section
 */
.section .section-filters-bar {
  margin-top: 30px;
}

/*------------------------------------------------------------------*/
/**
 * 109. Section Header
 */
.section-header {
  display: flex;
  justify-content: space-between;
}

.section-header .item-list-options {
  align-items: flex-end;
}

/*--------------------------
    SECTION HEADER INFO
--------------------------*/
.section-header-info .section-pretitle {
  color: var(--color-text-alt);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 600;
  text-transform: uppercase;
}

.section-header-info .section-title {
  margin-top: 8px;
  font-size: calc((26 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.section-header-info .section-title .highlighted {
  color: var(--color-primary-dark);
}

.section-header-info .section-title .highlighted.secondary {
  color: var(--color-secondary);
}

/*-----------------------------
    SECTION HEADER ACTIONS
-----------------------------*/
.section-header-actions {
  display: flex;
  align-items: flex-end;
  padding-bottom: 4px;
}

.section-header-actions .section-header-action {
  color: var(--color-text-alt-2);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease-in-out;
}

.section-header-actions .section-header-action:hover {
  color: var(--color-text);
}

.section-header-actions .section-header-action + .section-header-action {
  margin-left: 32px;
}

.section-header-actions .slider-controls {
  display: flex;
  justify-content: space-between;
  width: 60px;
}

.section-header-actions .section-header-subsection {
  color: var(--color-text);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.section-header-actions .section-header-subsection:last-child {
  color: var(--color-text-alt-2);
}

.section-header-actions .section-header-subsection + .section-header-subsection {
  margin-left: 26px;
  position: relative;
}

.section-header-actions .section-header-subsection + .section-header-subsection::before {
  content: '';
  width: 2px;
  height: 10px;
  background-color: var(--color-primary);
  position: absolute;
  top: 2px;
  left: -13px;
}

/*------------------------------------------------------------------*/
/**
 * 110. Section Filters Bar
 */
.section-filters-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 96px;
  padding: 0 28px;
  border-radius: 12px;
  box-shadow: var(--color-box-shadow);
  background-color: var(--color-box-background);
}

.section-filters-bar .form + .button {
  margin-top: 0;
}

.section-filters-bar.centered {
  justify-content: center;
}

.section-filters-bar.v1 .form .form-select {
  display: none;
}

.section-filters-bar.v2 .form-row .form-item.small {
  max-width: 80px;
  flex-shrink: 0;
}

.section-filters-bar.v2 .form-row .form-item:last-child {
  margin-right: 36px;
}

.section-filters-bar.v3 .form {
  display: none;
}

.section-filters-bar.v5 .section-filters-bar-actions:first-child .form {
  display: none;
}

.section-filters-bar .section-filters-bar-actions {
  display: flex;
  align-items: center;
}

.section-filters-bar .section-filters-bar-actions.full {
  width: 100%;
}

.section-filters-bar .section-filters-bar-actions .form + .button {
  flex-shrink: 0;
  margin-left: 16px;
}

.section-filters-bar .section-filters-bar-title {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.section-filters-bar .section-filters-bar-title a {
  color: var(--color-text);
  font-weight: 700;
}

.section-filters-bar .section-filters-bar-title .separator {
  display: inline-block;
  width: 2px;
  height: 10px;
  margin: 0 12px;
  background-color: var(--color-primary);
}

/**
 * 110.1. Section Filters Bar - Media Queries
 */
@media screen and (max-width: 1500px) {
  .section-filters-bar.v4 .form-item.split .form-select.small {
    width: 200px;
  }
}

@media screen and (max-width: 1365px) {
  .section-filters-bar.v1, .section-filters-bar.v3, .section-filters-bar.v4, .section-filters-bar.v5, .section-filters-bar.v7 {
    flex-direction: column;
    height: auto;
    padding: 32px 28px;
  }

  .section-filters-bar.v1 .section-filters-bar-actions,
  .section-filters-bar.v4 .section-filters-bar-actions,
  .section-filters-bar.v7 .section-filters-bar-actions {
    margin-bottom: 40px;
  }

  .section-filters-bar.v1 .section-filters-bar-actions:last-child,
  .section-filters-bar.v4 .section-filters-bar-actions:last-child,
  .section-filters-bar.v7 .section-filters-bar-actions:last-child {
    margin-bottom: 0;
  }

  .section-filters-bar.v1 .section-filters-bar-actions .form {
    display: flex;
  }

  .section-filters-bar.v1 .section-filters-bar-actions .form .form-select {
    display: block;
    width: 254px;
    margin-left: 16px;
  }

  .section-filters-bar.v3 .form {
    display: block;
  }

  .section-filters-bar.v4 .section-filters-bar-actions {
    margin-bottom: 40px;
  }

  .section-filters-bar.v5 .section-filters-bar-actions {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .section-filters-bar.v5 .section-filters-bar-actions:first-child .form {
    display: block;
  }

  .section-filters-bar.v5 .section-filters-bar-actions:first-child .form .form-select {
    margin-bottom: 24px;
  }

  .section-filters-bar.v5 .section-filters-bar-actions .form-item.split {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .section-filters-bar.v5 .section-filters-bar-actions .form-item.split .form-select {
    width: 100%;
    margin: 0 0 24px 0;
  }
}

@media screen and (max-width: 960px) {
  .section-filters-bar.v1 .section-filters-bar-actions {
    width: 100%;
    justify-content: center;
  }

  .section-filters-bar.v1 .section-filters-bar-actions .form {
    display: block;
  }

  .section-filters-bar.v1 .section-filters-bar-actions .form .form-input.with-button {
    width: 100%;
  }

  .section-filters-bar.v1 .section-filters-bar-actions .form .form-select {
    width: 100%;
    margin: 24px 0 0 0;
  }

  .section-filters-bar.v2 {
    flex-direction: column;
    height: auto;
    padding: 32px 28px;
  }

  .section-filters-bar.v2 .form-row .form-item:last-child {
    max-width: 100%;
    margin-right: 0
    ;
  }
  .section-filters-bar.v2 .section-filters-bar-actions {
    margin-bottom: 32px;
  }

  .section-filters-bar.v2 .section-filters-bar-actions:last-child {
    margin-bottom: 0;
  }

  .section-filters-bar.v4 .section-filters-bar-actions {
    width: 100%;
    margin-bottom: 0;
  }

  .section-filters-bar.v4 .section-filters-bar-actions .form-item.split {
    flex-direction: column;
    align-items: center;
  }

  .section-filters-bar.v4 .section-filters-bar-actions .form-item.split .form-select,
  .section-filters-bar.v4 .section-filters-bar-actions .form-item.split .form-input {
    width: 100%;
    margin: 0 0 24px 0;
  }

  .section-filters-bar.v4 .section-filters-bar-actions:first-child .form-item.split {
    position: relative;
  }

  .section-filters-bar.v4 .section-filters-bar-actions:first-child .form-item.split .form-input {
    width: 100%;
  }

  .section-filters-bar.v4 .section-filters-bar-actions:first-child .form-item.split .form-input input {
    padding-right: 82px;
  }

  .section-filters-bar.v4 .section-filters-bar-actions:first-child .form-item.split .button {
    position: absolute;
    top: 0;
    right: 0;
  }

  .section-filters-bar.v6 {
    flex-direction: column;
    height: auto;
    padding: 32px 28px;
  }

  .section-filters-bar.v6.v6-2 .section-filters-bar-actions:first-child .form-item.split {
    flex-direction: column;
    position: relative;
  }

  .section-filters-bar.v6.v6-2 .section-filters-bar-actions:first-child .form-item.split .form-input {
    width: 100%;
  }

  .section-filters-bar.v6.v6-2 .section-filters-bar-actions:first-child .form-item.split .form-input input {
    padding-right: 0;
  }

  .section-filters-bar.v6.v6-2 .section-filters-bar-actions:first-child .form-item.split .button {
    width: 180px;
    margin: 0 auto 16px;
    position: static;
  }

  .section-filters-bar.v6 .section-filters-bar-actions {
    width: 100%;
    justify-content: center;
  }
  
  .section-filters-bar.v6 .section-filters-bar-actions:first-child .form-item.split {
    position: relative;
  }

  .section-filters-bar.v6 .section-filters-bar-actions:first-child .form-item.split .form-input {
    width: 100%;
    margin-bottom: 24px;
  }

  .section-filters-bar.v6 .section-filters-bar-actions:first-child .form-item.split .form-input input {
    padding-right: 82px;
  }

  .section-filters-bar.v6 .section-filters-bar-actions:first-child .form-item.split .button {
    position: absolute;
    top: 0;
    right: 0;
  }

  .section-filters-bar.v7 .section-filters-bar-actions {
    width: 100%;
    flex-direction: column;
    justify-content: center;
  }

  .section-filters-bar.v7 .section-filters-bar-actions .form + .button {
    margin-top: 24px;
  }

  .section-filters-bar.v7 .section-filters-bar-actions .form-item.split {
    position: relative;
  }

  .section-filters-bar.v7 .section-filters-bar-actions .form-item.split .form-input {
    width: 100%;
  }

  .section-filters-bar.v7 .section-filters-bar-actions .form-item.split .form-input input {
    padding-right: 82px;
  }
  
  .section-filters-bar.v7 .section-filters-bar-actions .form-item.split .button {
    position: absolute;
    top: 0;
    right: 0;
  }
}

@media screen and (max-width: 480px) {
  .section-filters-bar.v2 .form-item.split.medium .button {
    width: 100%;
  }

  .section-filters-bar .section-filters-bar-actions:last-child .form-item.split.medium .button {
    width: 100%;
  }
}

/*------------------------------------------------------------------*/
/**
 * 111. Section Pager Bar
 */
.section-pager-bar-wrap {
  margin-top: 32px;
}

.section-pager-bar-wrap.align-right {
  text-align: right;
}

.section-pager-bar-wrap.align-center {
  text-align: center;
}

.section-pager-bar-wrap .section-pager-bar {
  display: inline-block;
  margin: 0;
}

/*-------------------------
    SECTION PAGER BAR
-------------------------*/
.section-pager-bar {
  height: 60px;
  border-radius: 12px;
  background-color: var(--color-box-background);
  box-shadow: var(--color-box-shadow);
}

.section-pager-bar .section-pager {
  height: 100%;
}

.section-pager-bar .slider-control {
  width: 60px;
  height: 60px;
  background-color: var(--color-box-background);
}

.section-pager-bar .slider-control.left {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.section-pager-bar .slider-control.right {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/*---------------------
    SECTION PAGER
---------------------*/
.section-pager {
  display: flex;
  align-items: center;
}

.section-pager.secondary .section-pager-item.active .section-pager-item-text, .section-pager.secondary .section-pager-item:hover .section-pager-item-text {
  color: var(--color-secondary);
}

.section-pager .section-pager-item {
  padding: 0 8px;
  cursor: pointer;
  position: relative;
}

.section-pager .section-pager-item.section-pager-item-no-link {
  cursor: auto;
}

.section-pager .section-pager-item.section-pager-item-no-link:hover .section-pager-item-text {
  background-color: var(--color-box-background);
  color: var(--color-text);
  box-shadow: none;
}

.section-pager .section-pager-item::before {
  content: '';
  width: 1px;
  height: 20px;
  background-color: var(--color-divider);
  position: absolute;
  top: 12px;
  left: 0;
}

.section-pager .section-pager-item:last-child::after {
  content: '';
  width: 1px;
  height: 20px;
  background-color: var(--color-divider);
  position: absolute;
  top: 12px;
  right: 0;
}

.section-pager .section-pager-item.active .section-pager-item-text, .section-pager .section-pager-item:hover .section-pager-item-text {
  background-color: var(--color-box-over-box-background);
  color: var(--color-primary-dark);
  box-shadow: var(--color-overbox-shadow);
}

.section-pager .section-pager-item .section-pager-item-text {
  background-color: var(--color-box-background);
  padding: 16px;
  border-radius: 12px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  transition: color .2s ease-in-out, box-shadow .2s ease-in-out, background-color .2s ease-in-out;
}

/*------------------------------------------------------------------*/
/**
 * 112. Section Results Text
 */
.section-results-text {
  margin-top: 12px;
  color: var(--color-text-alt);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

/**
 * 112.1. Section Results Text - Media Queries
 */
@media screen and (max-width: 1365px) {
  .section-results-text {
    margin-top: 24px;
    text-align: center;
  }
}

/*------------------------------------------------------------------*/
/**
 * 113. Section Banner
 */
.section-banner {
  min-height: 160px;
  padding: 52px 60px 0 200px;
  border-radius: 12px;
  position: relative;
}

.section-banner .section-banner-icon {
  position: absolute;
  bottom: 0;
  left: 0;
}

.section-banner .section-banner-title,
.section-banner .section-banner-text {
  color: #fff;
}

.section-banner .section-banner-title {
  font-size: calc((36 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.section-banner .section-banner-text {
  margin-top: 10px;
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.section-banner + .post-preview.sticky {
  margin-top: 64px;
}

.section-banner + .forum-heading {
  margin-top: 64px;
}

/**
 * 113.1. Section Banner - Media Queries
 */
@media screen and (max-width: 960px) {
  .section-banner {
    display: flex;
    align-items: center;
    height: 86px;
    min-height: auto;
    padding: 0 28px 0 108px;
  }

  .section-banner .section-banner-icon {
    width: 92px;
    height: 86px;
  }

  .section-banner .section-banner-title {
    font-size: calc((24 / var(--vikinger-font-size-base)) * 1rem);
  }

  .section-banner .section-banner-text {
    display: none;
  }
}

/*------------------------------------------------------------------*/
/**
 * 114. Footer
 */
.footer-wrap {
  background-color: var(--color-box-background);
}

.footer {
  background-color: var(--color-box-background);
}

.footer.content-grid {
  padding-top: 0;
  padding-bottom: 0;
}

.footer-top {
  padding: 82px 0 94px;
  display: flex;
  justify-content: space-between;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 90px;
  border-top: 1px solid var(--color-divider);
}

.footer-bottom .footer-bottom-text {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.footer-bottom .footer-bottom-text a {
  font-weight: 700;
}

.footer-info .footer-info-text {
  width: 284px;
  margin-top: 26px;
  color: var(--color-text-alt);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  line-height: 1.7142857143em;
  font-weight: 500;
}

.footer-info .social-items {
  flex-wrap: wrap;
  margin-top: 32px;
}

.footer-info .social-items .social-item {
  margin-top: 12px;
}

.footer-info-brand {
  display: flex;
  align-items: center;
}

.footer-info-brand .footer-info-brand-image {
  width: 40px;
  height: auto;
}

.footer-info-brand .footer-info-brand-image + .footer-info-brand-info {
  margin-left: 12px;
}

.footer-info-brand .footer-info-brand-info {
  margin-top: -3px;
}

.footer-info-brand .footer-info-brand-title {
  font-family: var(--vikinger-font-family-secondary);
  font-size: calc((22 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 900;
  text-transform: uppercase;
}

.footer-info-brand .footer-info-brand-subtitle {
  margin-top: 2px;
  color: var(--color-text-alt);
  font-size: calc((10 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  text-transform: uppercase;
}

.footer-navigation {
  display: flex;
}

.footer-navigation .navigation-section {
  width: 184px;
  margin-right: 16px;
}

.footer-navigation .navigation-section:last-child {
  margin-right: 0;
}

/**
 * 114.1. Footer - Media Queries
 */
@media screen and (max-width: 1365px) {
  .footer-top {
    padding: 64px 0;
    flex-direction: column;
    align-items: center;
  }
  
  .footer-info .footer-info-text {
    text-align: center;
  }

  .footer-info .social-items {
    justify-content: center;
  }

  .footer-info-brand {
    justify-content: center;
  }

  .footer-navigation {
    padding: 0 32px;
    flex-wrap: wrap;
    display: var(--footer-navigation-display-mobile);
  }

  .footer-navigation .navigation-section {
    margin-top: 64px;
  }
}

@media screen and (max-width: 960px) {
  .footer-navigation .navigation-section {
    width: auto;
    margin-right: 64px;
  }

  .footer-bottom {
    padding: 32px 0;
    flex-direction: column;
  }

  .footer-bottom .footer-bottom-text:last-child {
    margin-top: 32px;
  }
}

/*------------------------------------------------------------------*/
/**
 * 115. Navigation Section
 */
.navigation-section .navigation-section-title {
  font-size: calc((16 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.navigation-section .navigation-section-links {
  margin-top: 46px;
}

.navigation-section .navigation-section-links:first-child {
  margin-top: 60px;
}

.navigation-section .navigation-section-links .navigation-section-link {
  margin-bottom: 16px;
}

.navigation-section .navigation-section-links .navigation-section-link:last-child {
  margin-bottom: 0;
}

.navigation-section .navigation-section-link {
  display: block;
  color: var(--color-text-alt);
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.navigation-section .navigation-section-link:hover {
  color: var(--color-primary);
  font-weight: 600;
}

/*------------------------------------------------------------------*/
/**
 * 116. Forum
 */
.forum-heading .forum-pretitle {
  color: var(--color-text-alt);
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 600;
  text-transform: uppercase;
}

.forum-heading .forum-title {
  margin-top: 6px;
  font-size: calc((26 / var(--vikinger-font-size-base)) * 1rem);
}

.forum-topic-meta .forum-topic-meta-title {
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
}

.forum-topic-meta .forum-topic-meta-author-wrap {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.forum-topic-meta .forum-topic-meta-author {
  display: flex;
  align-items: center;
}

.forum-topic-meta .forum-topic-meta-author .forum-topic-meta-author-title {
  margin-right: 8px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
}

.forum-topic-meta .forum-topic-meta-timestamp {
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 500;
}

.forum-topic-meta-author {
  display: flex;
  align-items: center;
}

.forum-topic-meta-author .forum-topic-meta-author-avatar {
  margin-right: 4px;
}

.forum-topic-meta-author .forum-topic-meta-author-title {
  color: var(--color-primary-dark);
  font-weight: 700;
}

.vikinger-forum-reply-author {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vikinger-forum-reply-author .vikinger-forum-reply-author-title {
  margin-top: 8px;
  font-size: calc((14 / var(--vikinger-font-size-base)) * 1rem);
}

.vikinger-forum-reply-author .vikinger-forum-reply-author-title a {
  color: var(--color-text);
  font-weight: 700;
}

.vikinger-forum-reply-author .vikinger-forum-reply-author-text {
  margin-top: 4px;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
}

.vikinger-forum-reply-author .vikinger-forum-reply-author-text a {
  color: var(--color-text-alt);
  font-weight: 500;
}

.vikinger-forum-reply-author .vikinger-forum-reply-author-text a:hover {
  color: var(--color-primary);
}

.vikinger-forum-reply-author .vikinger-forum-reply-author-role {
  height: 20px;
  margin-top: 12px;
  padding: 0 8px;
  border-radius: 200px;
  background-color: var(--color-secondary-dark);
  color: #fff;
  font-size: calc((12 / var(--vikinger-font-size-base)) * 1rem);
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
}

/**
 * 116.1. Forum - bbPress
 */
.forum-heading + .bbpress-wrapper {
  margin-top: 8px;
}

/**
 * 116.2. Forum - Media Queries
 */
@media screen and (max-width: 480px) {
  .vikinger-forum-reply-author {
    align-items: flex-start;
  }
}