@charset "UTF-8";

/*
|-------------------------------------------------------------------------------
| MODERN (v3.0.5)
|-------------------------------------------------------------------------------
|
| Copyright (c) 2019 VEX-7 <vex1197@gmail.com>
|
*/

/* ==== ( Init ) ============================================================ */

:root {
  --bg-body: #eceff1;

  --bg-primary: #7e57c2;
  --bg-primary-light: #b085f5;
  --bg-primary-dark: #4d2c91;

  --bg-secondary: #546e7a;
  --bg-secondary-light: #819ca9;
  --bg-secondary-dark: #29434e;

  --bg-info: #2196f3;
  --bg-info-light: #64b5f6;
  --bg-info-dark: #1976d2;

  --bg-success: #4caf50;
  --bg-success-light: #81c784;
  --bg-success-dark: #388e3c;

  --bg-warning: #ff9800;
  --bg-warning-light: #ffb74d;
  --bg-warning-dark: #f57c00;

  --bg-danger: #f44336;
  --bg-danger-light: #e57373;
  --bg-danger-dark: #d32f2f;

  --bg-light: white;
  --bg-dark: #212121;

  --border-radius: .5rem;
}

html {
  font-size: 1rem !important;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
  font-family: 'Roboto', sans-serif;
  overflow-y: scroll;
  background-color: var(--bg-body);
}

a {
  color: #37474f;
}

a:hover {
  text-decoration: none;
  color: #6a1b9a;
}

b,
strong {
  font-weight: 500;
}

img {
  display: inline-block;
  -ms-interpolation-mode: bicubic;
}

hr {
  display: block;
  height: 1px;
  padding: 0;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid #ccc;
}

kbd {
  padding: .2rem .4rem;
  font-size: .75rem;
  color: #fff;
  background-color: #222;
  border-radius: .125rem;
  text-shadow: none;
}

progress {
  height: 1rem;
  width: 10rem;
  vertical-align: middle;
  border: 0;
}

legend {
  font-size: 1rem;
  font-weight: 400;
}

/* ---- ( Selection ) ------------------------------------------------------- */

::-moz-selection {
  color: #f5f5f5;
  background-color: var(--bg-primary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .08);
}

::selection {
  color: #f5f5f5;
  background-color: var(--bg-primary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .08);
}

a::-moz-selection {
  color: #f5f5f5;
  background-color: var(--bg-primary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .08);
}

a::selection {
  color: #f5f5f5;
  background-color: var(--bg-primary);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .08);
}

/* ---- ( Scrollbar ) ------------------------------------------------------- */

::-webkit-scrollbar {
  height: 8px;
  width: 8px;
  background-color: transparent;
}

::-webkit-scrollbar:hover {
  background-color: rgba(0, 0, 0, .16);
}

::-webkit-scrollbar-thumb {
  min-height: 48px;
  min-width: 48px;
  background-color: rgba(0, 0, 0, .24);
}

::-webkit-scrollbar-button {
  width: 16px;
  height: 16px;
  background-color: rgba(0, 0, 0, .24);
}

/* ==== ( Helper Classes ) ================================================== */

/* ---- ( Color ) ----------------------------------------------------------- */

.t-muted {
  color: #757575 !important;
}

.t-muted-dark {
  color: #616161 !important;
}

/* ---- ( Other ) ----------------------------------------------------------- */

.clear {
  clear: both;
}

.hiddenrow,
.hidden {
  display: none;
}

.spacer {
  flex-grow: 1;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

/* ---- ( Margin ) ---------------------------------------------------------- */

.m-top {
  margin-top: 1rem !important;
}

.m-bottom {
  margin-bottom: 1rem !important;
}

/* ---- ( Margin Controller ) ----------------------------------------------- */

.first\:margin-0 > *:first-child {
  margin-top: 0 !important;
}

.last\:margin-0 > *:last-child {
  margin-bottom: 0 !important;
}

/* ---- ( Container ) ------------------------------------------------------- */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1440px) {
  .container {
    max-width: 96rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

@media (max-width: 1023px) {
  .container {
    padding-right: 1rem;
    padding-left: 1rem;
  }
}

/* ---- ( Avatar ) ---------------------------------------------------------- */

.avatar {
  background-color: #eceff1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
}

.avatar--medium {
  height: 2.5rem;
  width: 2.5rem;
}

/* ---- ( Color Cycle ) ----------------------------------------------------- */

.color-cycle {
  -webkit-animation: color-cycle infinite 4s ease-in-out;
          animation: color-cycle infinite 4s ease-in-out;
}

@-webkit-keyframes color-cycle {
  0%    { color: #ffffff; }
  12.5% { color: #12b886; }
  25%   { color: #40c057; }
  37.5% { color: #ffd43b; }
  50%   { color: #fd7e14; }
  62.5% { color: #fa5252; }
  75%   { color: #f783ac; }
  87.5% { color: #228be6; }
  100%  { color: #ffffff; }
}

@keyframes color-cycle {
  0%    { color: #ffffff; }
  12.5% { color: #12b886; }
  25%   { color: #40c057; }
  37.5% { color: #ffd43b; }
  50%   { color: #fd7e14; }
  62.5% { color: #fa5252; }
  75%   { color: #f783ac; }
  87.5% { color: #228be6; }
  100%  { color: #ffffff; }
}

/* ---- ( My Image ) -------------------------------------------------------- */

.my-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ---- ( Border Animation ) ------------------------------------------------ */

.border-animation {
  position: relative;
}

.border-animation::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -1px;
  left: 0;
  background-color: currentColor;
  visibility: hidden;
  transform: scaleX(0);
  transition: all .3s ease-in-out 0s;
}

.border-animation:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

/* ---- ( Username Format ) ------------------------------------------------- */

a.username-format:hover,
.username-format a:hover {
  text-decoration: none !important;
}

.username-format em {
  font-style: normal !important;
}

/* ---- ( SR Only ) --------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only--focusable:active,
.sr-only--focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ---- ( Page Control ) ---------------------------------------------------- */

.page-control {
  display: flex;
  flex-flow: row wrap;
  margin-right: -.5rem;
  margin-left: -.5rem;
}

/* __item */
.page-control__item {
  display: flex;
  padding-right: .5rem;
  padding-left: .5rem;
}

.page-control__item > * + * {
  margin-left: 1rem;
}

.page-control--top > .page-control__item {
  align-items: flex-end;
}

.page-control--bottom > .page-control__item {
  align-items: flex-start;
}

.page-control--top > .page-control__item > * {
  margin-bottom: 1rem;
}

.page-control--bottom > .page-control__item > * {
  margin-top: 1rem;
}

/* ---- ( Order ) ----------------------------------------------------------- */

.order--asc .order__icon:not(.order__icon--asc) {
  display: none;
}

.order--desc .order__icon:not(.order__icon--desc) {
  display: none;
}

/* ==== ( Components ) ====================================================== */

/* ---- ( Portlet ) --------------------------------------------------------- */

:root {
  --portlet-bg-primary: var(--bg-primary);
  --portlet-bg-secondary: var(--bg-secondary);
  --portlet-bg-success: var(--bg-success-light);
  --portlet-bg-info: var(--bg-info-light);
  --portlet-bg-warning: var(--bg-warning-light);
  --portlet-bg-danger: var(--bg-danger-light);

  --portlet-border-color: rgba(0, 0, 0, .16);
  --portlet-border-radius: var(--border-radius);

  --portlet-list-border-color: rgba(0, 0, 0, .08);
}

.portlet {
  background-color: #fff;
}

.portlet--rounded {
  border-radius: var(--portlet-border-radius);
}

.portlet--height-fluid {
  height: 100%;
}

/* __header */
.portlet__header {
  display: flex;
  align-items: stretch;
  padding-left: 1rem;
  padding-right: 1rem;
  min-height: 3rem;
}

.portlet--primary .portlet__header {
  color: #fff;
  background: rgb(62,15,108);
background: linear-gradient(111deg, rgba(62,15,108,1) 0%, rgba(52,18,140,1) 20%, rgba(17,44,154,1) 82%, rgba(35,13,138,1) 100%);(--portlet-bg-primary);
}

.portlet--secondary .portlet__header {
  color: #fff;
  background: rgb(62,15,108);
background: linear-gradient(111deg, rgba(62,15,108,1) 0%, rgba(52,18,140,1) 20%, rgba(17,44,154,1) 82%, rgba(35,13,138,1) 100%);
}

.portlet--success .portlet__header {
  color: #fff;
  background: rgb(62,15,108);
background: linear-gradient(111deg, rgba(62,15,108,1) 0%, rgba(52,18,140,1) 20%, rgba(17,44,154,1) 82%, rgba(35,13,138,1) 100%);(--portlet-bg-success);
}

.portlet--info .portlet__header {
  color: #fff;
  background: rgb(62,15,108);
background: linear-gradient(111deg, rgba(62,15,108,1) 0%, rgba(52,18,140,1) 20%, rgba(17,44,154,1) 82%, rgba(35,13,138,1) 100%);(--portlet-bg-info);
}

.portlet--warning .portlet__header {
  color: #fff;
  background: rgb(62,15,108);
background: linear-gradient(111deg, rgba(62,15,108,1) 0%, rgba(52,18,140,1) 20%, rgba(17,44,154,1) 82%, rgba(35,13,138,1) 100%);(--portlet-bg-warning);
}

.portlet--danger .portlet__header {
  color: #212121;
  background-color: var(--portlet-bg-danger);
}

.portlet--rounded .portlet__header {
  border-top-left-radius: var(--portlet-border-radius);
  border-top-right-radius: var(--portlet-border-radius);
}

/* __main */
.portlet__main:not(.portlet__main--simple) {
  padding: 1rem;
}

/* __footer */
.portlet__footer {
  padding: .75rem 1rem;
  background-color: #000000;
}

.portlet--rounded .portlet__footer {
  border-bottom-left-radius: var(--portlet-border-radius);
  border-bottom-right-radius: var(--portlet-border-radius);
}

/* __title */
.portlet__title {
  display: flex;
  align-items: center;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.portlet__title-heading {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: normal;
}

.portlet__title-icon {
  margin-right: .5rem;
  opacity: .96;
}

.portlet__title-link {
  position: relative;
  color: #fff !important;
}

.portlet__title-link::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -1px;
  left: 0;
  background-color: currentColor;
  visibility: hidden;
  transform: scaleX(0);
  transition: all .4s ease-in-out 0s;
}

.portlet__title-link:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

.portlet__subtitle {
  display: flex;
  align-items: center;
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.portlet__subtitle-heading {
  margin-left: 1rem;
  padding-left: 1rem;
  margin-bottom: 0;
  font-size: .875rem;
  font-weight: normal;
  color: rgba(255, 255, 255, .80);
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.portlet--secondary .portlet__subtitle-heading {
  color: rgba(255, 255, 255, .87);
}

.portlet--success .portlet__subtitle-heading {
  color: rgba(0, 0, 0, .7);
  border-left-color: rgba(0, 0, 0, .16);
}

.portlet--info .portlet__subtitle-heading {
  color: rgba(0, 0, 0, .7);
  border-left-color: rgba(0, 0, 0, .16);
}

.portlet--warning .portlet__subtitle-heading {
  color: rgba(0, 0, 0, .7);
  border-left-color: rgba(0, 0, 0, .16);
}

.portlet--danger .portlet__subtitle-heading {
  color: rgba(0, 0, 0, .7);
  border-left-color: rgba(0, 0, 0, .16);
}

/* __toolbar */
.portlet__toolbar {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 1rem;
}

/* __list */
.portlet__list {
  margin: -1rem;
}

.portlet__list-item {
  padding: 1rem;
}

.portlet__list:not(.portlet__list--no-border) .portlet__list-item:not(:last-child) {
  border-bottom: 1px solid var(--portlet-list-border-color);
}

/* __nav */
.portlet__nav {
  display: flex;
}

.portlet__nav-item {
  display: flex;
  align-items: center;
  height: 2rem;
  min-width: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: rgba(255, 255, 255, .80) !important;
  background-color: rgba(0, 0, 0, .24);
  border-radius: 50vh;
  transition: background-color .2s ease-in-out;
}

.portlet--success .portlet__nav-item {
  color: rgba(255, 255, 255, 1) !important;
}

.portlet--info .portlet__nav-item {
  color: rgba(255, 255, 255, .91) !important;
}

.portlet__nav-item:hover,
.portlet__nav-item:focus {
  background-color: rgba(0, 0, 0, .32);
}

.portlet__nav-item + .portlet__nav-item {
  margin-left: .5rem;
}

/* ---- ( Form Control ) ---------------------------------------------------- */

.form-control {
  /* Variables */
  --form-control-label-width: 24rem;
  --form-control-divider-color: var(--bg-body);
}

.form-control__section {
  display: flex;
}

.form-control__section:not(:last-child) {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--form-control-divider-color);
}

.form-control__portion {
  display: flex;
  flex-direction: column;
}

.form-control__portion--label {
  align-items: flex-end;
  width: var(--form-control-label-width);
  margin-right: 1rem;
  padding-right: 1rem;
  text-align: right;
  border-right: 1px dotted #cfd8dc;
}

.form-control__portion--form {
  width: calc(100% - var(--form-control-label-width));
}

.form-control__portion--centered {
  justify-content: center;
}

.form-control__label {
  margin-bottom: 0;
  font-size: 1.125rem;
  font-weight: 300;
  color: #424242;
}

.form-control__label-description {
  margin-bottom: 0;
  font-size: .875rem;
  color: #757575;
}

.form-control__label + .form-control__label-description {
  margin-top: .5rem;
}

@media (max-width: 991.98px) {
  .form-control__section {
    display: block;
  }

  .form-control__portion--label {
    align-items: inherit;
    width: inherit;
    margin-right: 0;
    margin-bottom: 1rem;
    padding: .5rem 1rem;
    text-align: inherit;
    border: 0;
    background-color: #eceff1;
    border-radius: .5rem;
  }

  .form-control__portion--form {
    width: inherit;
  }
}

/* Register */
.section--register .form-control input.error {
  border-color: #bf360c;
}

.section--register .form-control input.valid {
  border-color: green;
}

.section--register .form-control label.error {
  margin-top: .5rem;
  margin-bottom: 0 !important;
  font-size: .875rem;
  color: #bf360c;
}

/* ---- ( Ratio Control ) --------------------------------------------------- */

.ratio-control {
  display: inline-flex;

  /* Variables */
  --ratio-control-border-radius: 50vh;
  --ratio-control-bg-color: #fff;
  --ratio-control-border-color: #cfd8dc;
  --ratio-control-active-color: var(--bg-primary);
}

.ratio-control__input {
  position: absolute;
  visibility: hidden;
}

.ratio-control__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 0;
  font-size: .875rem;
  text-transform: lowercase;
  background-color: var(--ratio-control-bg-color);
  border: 1px solid var(--ratio-control-border-color);
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
}

.ratio-control__option:not(:first-child) .ratio-control__label {
  margin-left: -1px;
}

.ratio-control__input:checked + .ratio-control__label {
  z-index: 2;
  color: #fff;
  border-color: var(--ratio-control-active-color);
  background-color: var(--ratio-control-active-color);
}

.ratio-control__option:first-child .ratio-control__label {
  border-top-left-radius: var(--ratio-control-border-radius);
  border-bottom-left-radius: var(--ratio-control-border-radius);
}

.ratio-control__option:last-child .ratio-control__label {
  border-top-right-radius: var(--ratio-control-border-radius);
  border-bottom-right-radius: var(--ratio-control-border-radius);
}

/* ---- ( Ratio Control ) --------------------------------------------------- */

.post-icon-control {
  display: flex;
  flex-flow: row wrap;
  margin: -.125rem;

  /* Variables */
  --post-icon-control-border-radius: 50vh;
  --post-icon-control-bg-color: #fff;
  --post-icon-control-border-color: #cfd8dc;
  --post-icon-control-active-color: #cfd8dc;
}

.post-icon-control__option {
  display: flex;
  margin: .125rem;
}

.post-icon-control__input {
  position: absolute;
  visibility: hidden;
}

.post-icon-control__label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  margin-bottom: 0;
  font-size: .875rem;
  cursor: pointer;
  color: #757575;
  background-color: var(--post-icon-control-bg-color);
  border: 1px solid var(--post-icon-control-border-color);
  border-radius: var(--post-icon-control-border-radius);
  transition: all .4s cubic-bezier(.075, .82, .165, 1);
}

.post-icon-control__input:checked + .post-icon-control__label {
  color: #424242;
  border-color: var(--post-icon-control-active-color);
  background-color: var(--post-icon-control-active-color);
}

/* ---- ( User Portlet ) ---------------------------------------------------- */

.user-portlet {
  border: .1rem solid var(--bg-body);
  border-radius: var(--border-radius);
}

.user-portlet__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
}

.user-portlet__avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 50vh;
}

.user-portlet__last-visit {
  display: block;
  width: 100%;
  padding: .75rem 1rem;
  font-size: .875rem;
  text-align: center;
  background-color: var(--bg-info-light);
  border-radius: 50vh;
}

.user-portlet__info {
  width: 100%;
  font-size: .75rem;
}

.user-portlet__info-section {
  display: flex;
}

.user-portlet__info-section:not(:last-child) {
  margin-bottom: .25rem;
}

.user-portlet__info-column {
  width: 50%;
}

.user-portlet__info-column:first-child {
  padding-right: .25rem;
  text-align: right;
}

.user-portlet__info-column:last-child {
  padding-left: .25rem;
}

/* ---- ( Alert ) ----------------------------------------------------------- */

:root {
  --bg-alert-primary: #d1c4e9;
  --bg-alert-primary-icon: var(--bg-primary);

  --bg-alert-secondary: #cfd8dc;
  --bg-alert-secondary-icon: var(--bg-secondary);

  --bg-alert-success: #c8e6c9;
  --bg-alert-success-icon: var(--bg-success);

  --bg-alert-info: #bbdefb;
  --bg-alert-info-icon: var(--bg-info);

  --bg-alert-warning: #ffe0b2;
  --bg-alert-warning-icon: var(--bg-warning);

  --bg-alert-danger: #ffcdd2;
  --bg-alert-danger-icon: var(--bg-danger);

  --bg-alert-pm: #b2dfdb;
  --bg-alert-pm-icon: #009688;
}

.alert {
  display: flex;
  align-items: center;
  min-height: 3rem;
  background-color: #fff;
  border-radius: .5rem;
}

.alert--primary {
  background-color: var(--bg-alert-primary);
}

.alert--secondary {
  background-color: var(--bg-alert-secondary);
}

.alert--success {
  background-color: var(--bg-alert-success);
}

.alert--info {
  background-color: var(--bg-alert-info);
}

.alert--warning {
  background-color: var(--bg-alert-warning);
}

.alert--danger {
  background-color: var(--bg-alert-danger);
}

.alert--pm {
  background-color: var(--bg-alert-pm);
}

/* __column */
.alert__col:first-child:not(.alert__col--icon):not(.alert__col--dismiss) {
  border-radius: .5rem 0 0 .5rem;
}

.alert__col:last-child:not(.alert__col--icon):not(.alert__col--dismiss) {
  border-radius: 0 .5rem .5rem 0;
}

.alert__col--main {
  padding: .75rem 1rem;
  font-size: .875rem;
}

.alert--w\/icon .alert__col--main,
.alert--w\/dismiss .alert__col--main {
  width: calc(100% - 3.5rem);
}

.alert--w\/all .alert__col--main {
  width: calc(100% - 7rem);
}

.alert__col--icon,
.alert__col--dismiss {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 2rem;
  border-radius: 50vh;
}

.alert__col--dismiss {
  color: #bf360c !important;
  background-color: rgba(255, 255, 255, .8);
  transition: all .2s ease-in-out;
}

.alert__col--dismiss:hover {
  background-color: #fff;
}

.alert__col--icon:first-child,
.alert__col--dismiss:first-child {
  margin-left: .5rem;
}

.alert__col--icon:last-child,
.alert__col--dismiss:last-child {
  margin-right: .5rem;
}

.alert--primary .alert__col--icon {
  color: #fff;
  background-color: var(--bg-alert-primary-icon);
}

.alert--secondary .alert__col--icon {
  color: #fff;
  background-color: var(--bg-alert-secondary-icon);
}

.alert--success .alert__col--icon {
  color: #212121;
  background-color: var(--bg-alert-success-icon);
}

.alert--info .alert__col--icon {
  color: #212121;
  background-color: var(--bg-alert-info-icon);
}

.alert--warning .alert__col--icon {
  color: #212121;
  background-color: var(--bg-alert-warning-icon);
}

.alert--danger .alert__col--icon {
  color: #212121;
  background-color: var(--bg-alert-danger-icon);
}

.alert--pm .alert__col--icon {
  color: #212121;
  background-color: var(--bg-alert-pm-icon);
}

.alert--users-browsing .alert__col--icon,
.alert--moderated-by .alert__col--icon {
  color: #212121;
  background-color: #cfd8dc;
}

/* ---- ( Badge ) ----------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: .4em .8em;
  font-size: 80%;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .5em;
}

.badge--primary {
  color: #fff !important;
  background-color: #9c27b0;
}

.badge--secondary {
  color: #fff !important;
  background-color: #37474f;
}

.badge--success {
  color: #212121 !important;
  background-color: #4caf50;
}

.badge--info {
  color: #212121 !important;
  background-color: #2196f3;
}

.badge--warning {
  color: #212121 !important;
  background-color: #ff9800;
}

.badge--danger {
  color: #212121 !important;
  background-color: #ff5722;
}

.badge--pill {
  border-radius: 50vh;
}

/* reputation */
.badge--reputation_neutral {
  color: #212121 !important;
  background-color: #cfd8dc;
}

.badge--reputation_positive {
  color: #212121 !important;
  background-color: #c8e6c9;
}

.badge--reputation_negative {
  color: #212121 !important;
  background-color: #ffcdd2;
}

/* ---- ( Button ) ---------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border: 1px solid transparent;
  font-size: .875rem;
  color: #fff;
  background-color: #546e7a;
  border-radius: .25rem;
  transition: all .25s ease-in-out;
}

.button:hover {
  text-decoration: none;
}

.button:hover,
.button:focus {
  color: #fff;
  background-color: #455a64;
}

input.button,
button.button {
  cursor: pointer;
}

input.button:focus,
button.button:focus {
  outline: none;
}

.button--primary {
  background-color: #00897b;
}

.button--primary:hover,
.button--primary:focus {
  background-color: #00796b;
}

.button--secondary {
  background-color: #37474f;
}

.button--secondary:hover,
.button--secondary:focus {
  background-color: #263238;
}

.button--success {
  background-color: #4caf50;
}

.button--success:hover,
.button--success:focus {
  background-color: #43a047;
}

.button--info {
  background-color: #2196f3;
}

.button--info:hover,
.button--info:focus {
  background-color: #1e88e5;
}

.button--warning {
  background-color: #ff9800;
}

.button--warning:hover,
.button--warning:focus {
  background-color: #fb8c00;
}

.button--danger {
  background-color: #f44336;
}

.button--danger:hover,
.button--danger:focus {
  background-color: #e53935;
}

.button--small {
  height: 2rem;
  padding-left: .75rem;
  padding-right: .75rem;
}

.button--large {
  height: 2.5rem;
}

.button--rounded {
  border-radius: 1.125rem;
}

.button--small.button--rounded {
  border-radius: 1rem;
}

.button--large.button--rounded {
  border-radius: 1.25rem;
}

/* ---- ( Popup ) ----------------------------------------------------------- */

.popup {
  display: none;
  z-index: 9999;
  min-width: 12rem;
  margin-top: 0.5rem;
  line-height: inherit;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.popup__content {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.popup__item {
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: left;
  text-shadow: none;
  color: #393d3f;
}

.popup__item:hover,
.popup__item:focus {
  color: #393d3f;
  background-color: #f8f9fa;
}

.popup__text,
.popup__icon {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.popup__text {
  font-size: 0.875rem;
}

.popup__icon {
  color: rgba(0, 0, 0, 0.54);
}

.popup__sep {
  display: block;
  height: 1px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-indent: -9999px;
  border-top: 1px solid #e0e0e0;
}

/* ---- ( DD ) -------------------------------------------------------------- */

.dd {
  display: none;
  z-index: 9999;
  min-width: 12rem;
  margin-top: .5rem;
  line-height: inherit;
  background-color: #fff;
  border-radius: .5rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
}

.dd__main {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.dd__item {
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding-left: .5rem;
  padding-right: .5rem;
  text-align: left;
  text-shadow: none;
  color: #393d3f;
}

.dd__item:hover,
.dd__item:focus {
  color: #393d3f;
  background-color: #f8f9fa;
}

.dd__text,
.dd__icon {
  margin-left: .5rem;
  margin-right: .5rem;
}

.dd__text {
  font-size: .875rem;
}

.dd__icon {
  color: rgba(0, 0, 0, .54);
}

.dd__sep {
  display: block;
  height: 1px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-indent: -9999px;
  border-top: 1px solid #e0e0e0;
}

/* ---- ( List ) ------------------------------------------------------------ */

:root {
  --list-padding: 1rem;
  --list-border-color: rgba(0, 0, 0, .08);
}

.list {
  overflow: hidden;
}

/* __item */
.list__item {
  padding: var(--list-padding);
}

.list__item--w\/column {
  display: flex;
  padding: calc(var(--list-padding) / 2);
}

.list__item--w\/section {
  padding: 0;
}

.list__item:not(:last-child) {
  border-bottom: 1px solid var(--list-border-color);
}

/* __section */
.list__section {
  padding: var(--list-padding);
}

.list__section--w\/column {
  display: flex;
  padding: calc(var(--list-padding) / 2);
}

/* __column */
.list__column {
  padding: calc(var(--list-padding) / 2);
}

/* ---- ( List: Thread List ) ----------------------------------------------- */

.list--thread-list .list__item:not(.list__item--sep):not(.list__item--selected) {
  display: flex;
  padding: .5rem;
}

.list--thread-list .list__item--sep {
  padding: .75rem 1rem;
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0.08929em;
  text-transform: uppercase;
  color: #616161;
  background-color: rgba(0, 0, 0, 0.01);
}

.list--thread-list .list__item--selected {
  padding: .75rem 1rem;
}

.list--thread-list .list__item--selected#selectAllrow {
  background-color: rgba(255, 235, 59, .05);
}

.list--thread-list .list__item--selected#allSelectedrow {
  background-color: rgba(244, 67, 54, 0.05);
}

.list--thread-list .list__item.trow_selected {
  background-color: rgba(255, 235, 59, .05);
}

/* --thread __item */
.list--thread .list__item {
  padding: 0;
  border-bottom: 0;
}

/* --thread-list __col */
.list--thread-list .list__col {
  display: flex;
  padding: .5rem;
}

.list--thread-list .list__col--avatar {
  align-items: center;
  justify-content: center;
  width: 3.5rem;
}

.list--thread-list .list__col--main {
  flex-direction: column;
  justify-content: center;
  width: calc(100% - 33.5rem);
}

@media (max-width: 1279.98px) {
  .list--thread-list .list__col--main {
    width: calc(100% - 25.5rem);
  }
}

@media (max-width: 991.98px) {
  .list--thread-list .list__col--main {
    width: calc(100% - 17.5rem);
  }
}

@media (max-width: 767.98px) {
  .list--thread-list .list__col--main {
    width: calc(100% - 3.5rem);
  }
}

.list--thread-list .list__col--replies,
.list--thread-list .list__col--views {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8rem;
}

@media (max-width: 1279.98px) {
  .list--thread-list .list__col--views {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .list--thread-list .list__col--replies {
    display: none;
  }
}

.list--thread-list .list__col--latest {
  flex-direction: column;
  justify-content: center;
  width: 14rem;
}

@media (max-width: 767.98px) {
  .list--thread-list .list__col--latest {
    display: none;
  }
}

/* ---- ( List: Messenger ) ------------------------------------------------- */

.list--messenger .list__column {
  display: flex;
  align-items: center;
}

.list--messenger .list__column--title {
  width: calc(100% - 26rem);
}

.list--messenger .list__column--author,
.list--messenger .list__column--time {
  width: 12rem;
}

.list--messenger .list__column--checkbox {
  justify-content: center;
  width: 2rem;
}

@media (max-width: 1279.98px) {
  .list--messenger .list__column--title {
    width: calc(100% - 2rem);
  }

  .list--messenger .list__column--author,
  .list--messenger .list__column--time {
    display: none;
  }
}

/* ---- ( List: Private Empty ) --------------------------------------------- */

.list--private-emty .list__column {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% / 3);
}

/* ---- ( List: Profile User Info ) ----------------------------------------- */

.list--profile-user-info {
  font-size: .875rem;
}

.list--profile-user-info .list__column {
  display: flex;
  align-items: center;
}

.list--profile-user-info .list__column--key,
.list--profile-user-info .list__column--value {
  width: 50%;
}

.list--profile-user-info .list__column--key {
  justify-content: flex-end;
  padding-right: .25rem;
  color: rgba(0, 0, 0, .60);
}

.list--profile-user-info .list__column--value {
  padding-left: .25rem;
}

/* ---- ( Drawer ) ---------------------------------------------------------- */

.drawer {
  position: fixed;
  z-index: 100;
  top: 0;
  display: none;
  flex-direction: column;
  width: 16rem;
  height: 100%;
  background-color: #eceff1;
  border-style: solid;
  border-color: #fff;
  transition-duration: .2s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.drawer.drawer--left,
.drawer.drawer--right {
  display: flex;
}

.drawer--left {
  left: -16rem;
  border-width: 0 2px 0 0;
  transition-property: left;
}

.drawer--left.drawer--open {
  left: 0;
}

.drawer--right {
  right: -16rem;
  border-width: 0 0 0 2px;
  transition-property: right;
}

.drawer--right.drawer--open {
  right: 0;
}

.drawer__main {
  padding: 1rem;
  overflow-y: auto;
}

.drawer__section {
  padding: 1rem;
  background-color: #fff;
  border-radius: .5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
}

.drawer__section:not(:last-child) {
  margin-bottom: 1rem;
}

.drawer__form-control {
  display: flex;
  flex-direction: column;
}

.drawer__form-item:not(:last-child) {
  margin-bottom: 1rem;
}

.drawer__close {
  position: absolute;
  top: calc(50% - 1.5rem);
  display: flex;
  align-items: center;
  height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  color: #424242 !important;
  background-color: #eceff1;
  border: 2px solid #fff;
}

.drawer--left .drawer__close {
  left: calc(16rem - 2px);
  border-left: 0;
  border-top-right-radius: .5rem;
  border-bottom-right-radius: .5rem;
}

.drawer--right .drawer__close {
  right: calc(16rem - 2px);
  border-right: 0;
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem;
}

/* ---- ( AD Holder ) ------------------------------------------------------- */

.ad-holder {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background-color: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* ---- ( Banner ) ---------------------------------------------------------- */

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 300;
  background-color: #eceff1;
  background-size: 1rem 1rem;
  border-radius: var(--border-radius);
}

.banner--300x250 {
  width: 300px;
  height: 250px;
}

.banner--728x90 {
  width: 728px;
  height: 90px;
}

.banner--970x90 {
  width: 970px;
  height: 90px;
}

/* ---- ( Nav ) ------------------------------------------------------------- */

:root {
  --nav-height: 2.25rem;
  --nav-height-small: 2rem;
  --nav-height-large: 2.5rem;

  --nav-spacer: 1rem;
}

.nav {
  display: flex;
  background-color: #fff;
  border-radius: calc(var(--nav-height) / 2);
}

.nav--inline {
  display: inline-flex;
}

.nav--small {
  border-radius: calc(var(--nav-height-small) / 2);
}

.nav--large {
  border-radius: calc(var(--nav-height-large) / 2);
}

.nav--vertical {
  flex-direction: column;
  border-radius: .5rem;
}

.nav__item {
  display: flex;
  align-items: center;
  height: var(--nav-height);
  padding-left: calc(var(--nav-spacer) - (var(--nav-spacer) / 4));
  padding-right: calc(var(--nav-spacer) - (var(--nav-spacer) / 4));
}

.nav--small .nav__item {
  height: var(--nav-height-small);
}

.nav--large .nav__item {
  height: var(--nav-height-large);
}

.nav:not(.nav--vertical) .nav__item:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, .08);
}

.nav--vertical .nav__item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.nav__icon,
.nav__text {
  margin-left: calc(var(--nav-spacer) / 4);
  margin-right: calc(var(--nav-spacer) / 4);
}

.nav__text {
  font-size: .875rem;
  white-space: nowrap;
}

@media (max-width: 1279.98px) {
  .nav__text--hide\@1279 {
    display: none !important;
  }
}

.nav__icon {
  color: rgba(0, 0, 0, .64);
}

/* ---- ( Glob Nav ) -------------------------------------------------------- */

.glob-nav {
  display: flex;
  height: calc(2rem + 2px);
  border-radius: calc(1rem + 1px);
}

/* __link */
.glob-nav__link {
  display: flex;
  align-items: center;
  padding-left: .75rem;
  padding-right: .75rem;
  white-space: nowrap;
  color: #7b1fa2 !important;
  background-color: #fff;
  border: 1px solid #ce93d8;
  transition: background-color .2s ease-in-out;
}

.glob-nav__link:hover,
.glob-nav__link:focus {
  background-color: rgba(243, 229, 245, .5);
}

.glob-nav__link:first-child {
  border-top-left-radius: calc(1rem + 1px);
  border-bottom-left-radius: calc(1rem + 1px);
}

.glob-nav__link:last-child {
  border-top-right-radius: calc(1rem + 1px);
  border-bottom-right-radius: calc(1rem + 1px);
}

.glob-nav__link:not(:first-child) {
  margin-left: -1px;
}

/* __text */
.glob-nav__text {
  padding-left: .25rem;
  padding-right: .25rem;
  font-size: .875rem;
}

/* __icon */
.glob-nav__icon {
  padding-left: .25rem;
  padding-right: .25rem;
  color: #9c27b0;
}

/* ---- ( Strip ) ----------------------------------------------------------- */

.strip {
  background: var(--bg-primary);
  background: linear-gradient(90deg, #2196f3 0%, #03a9f4 10%, #00bcd4 20%, #009688 30%, #4caf50 40%, #8bc34a 50%, #cddc39 60%, #ffeb3b 70%, #ffc107 80%, #ff9800 90%, #ff5722 100%);
  position: absolute;
  left: 0;
  z-index: 10;
  height: .25rem;
  width: 100%;
}

.strip--top {
  top: 0;
}

.strip--bottom {
  bottom: 0;
}

/* ---- ( Error ) ----------------------------------------------------------- */

.err {
  margin-bottom: 1rem;
  background-color: var(--err-bg);
  border-radius: var(--err-border-radius);

  --err-bg: #ffcdd2;
  --err-bg-title: #ef9a9a;
  --err-color-title: #212121;
  --err-border-radius: var(--border-radius);
}

.err__title {
  padding: .75rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  color: var(--err-color-title);
  background-color: var(--err-bg-title);
  border-top-left-radius: var(--err-border-radius);
  border-top-right-radius: var(--err-border-radius);
}

.err__list {
  padding: 1rem;
  font-size: .875rem;
}

.err__list-item:not(:last-child) {
  margin-bottom: 1rem;
}

/* ---- ( Icon ) ------------------------------------------------------------ */

.icon {
  display: inline-block;
  height: 1em;
  overflow: visible;
  font-size: inherit;
  vertical-align: -.125em;
}

.icon:focus {
  outline: 0;
}

.icon--aligned {
  width: 1.25em;
  text-align: center;
}

svg:not(:root).icon {
  overflow: visible;
}

/* ==== ( Form ) ============================================================ */

/* ---- ( Costom Input ) ---------------------------------------------------- */

.custom-input {
  display: inline-block;
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: middle;
  color: #424242;
  background-color: #fff;
  border: 1px solid #cfd8dc;
  border-radius: .25rem;
}

.custom-input:focus {
  border-color: #ba68c8;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(186, 104, 200, .5);
}

.custom-input--rounded {
  border-radius: 1.125rem;
}

.custom-input--small {
  height: 2rem;
}

.custom-input--small.custom-input--rounded {
  border-radius: 1rem;
}

.custom-input--large {
  height: 2.5rem;
}

.custom-input--large.custom-input--rounded {
  border-radius: 1.25rem;
}

/* ---- ( Costom Text ) ----------------------------------------------------- */

.custom-text {
  display: inline-block;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  vertical-align: middle;
  color: #424242;
  background-color: #fff;
  border: 1px solid #cfd8dc;
  border-radius: .25rem;
}

.custom-text:focus {
  border-color: #ba68c8;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(186, 104, 200, .5);
}

.custom-text--rounded {
  border-radius: 1.125rem;
}

.custom-text--small {
  height: 2rem;
}

.custom-text--small.custom-text--rounded {
  border-radius: 1rem;
}

.custom-text--large {
  height: 2.5rem;
}

.custom-text--large.custom-text--rounded {
  border-radius: 1.25rem;
}

/* ---- ( Costom Select ) --------------------------------------------------- */

.custom-select {
  display: inline-block;
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 2.5rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  color: #424242;
  vertical-align: middle;
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 1rem center/8px 10px;
  background-color: #fff;
  border: 1px solid #cfd8dc;
  border-radius: .25rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.custom-select[multiple="multiple"] {
  height: auto;
  min-height: 2.25rem;
  padding-right: 1rem;
  background: none;
}

.custom-select:focus {
  border-color: #ba68c8;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(186, 104, 200, .5);
}

.custom-select--rounded {
  border-radius: 1.125rem;
}

.custom-select--small {
  height: 2rem;
}

.custom-select--small.custom-select--rounded {
  border-radius: 1rem;
}

.custom-select--large {
  height: 2.5rem;
}

.custom-select--large.custom-select--rounded {
  border-radius: 1.25rem;
}

/* ---- ( Pagination ) ------------------------------------------------------ */

.pagination {
  display: inline-flex;
  padding: .25rem;
  background-color: #fff;
  border-radius: .25rem;
}

/* __item */
.pagination__item:not(:last-child) {
  margin-right: .25rem;
}

.pagination__item--page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.625rem;
  min-width: 1.625rem;
  padding-left: .5rem;
  padding-right: .5rem;
  font-size: .875em;
  color: #424242;
  background-color: #eceff1;
  border-radius: .25rem;
  transition: background-color .2s ease-in-out;
}

.pagination__item--page:hover,
.pagination__item--page:focus {
  color: #424242;
  background-color: #cfd8dc;
}

.pagination__item--page.is-active {
  color: #fff;
  background-color: #9c27b0;
}

.pagination__icon {
  font-size: 1rem;
}

.pagination__jump-popup {
  display: none;
  z-index: 9999;
  padding: .5rem;
  margin-top: .5rem;
  font-size: .875em;
  line-height: inherit;
  background-color: #fff;
  border-radius: .25rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
}

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

.pagination__jump-label {
  margin-bottom: 0;
  margin-right: .25rem;
}

.pagination__jump-input {
  margin-right: .5rem;
}

/* ==== ( Main ) ============================================================ */

/* ---- ( Scroll Progress ) ------------------------------------------------- */

.scroll-progress {
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: .25rem;
  background: linear-gradient(to right, var(--bg-primary-light) var(--scroll-progress-value), transparent 0);
  background-repeat: no-repeat;
}

/* ---- ( BB Closed ) ------------------------------------------------------- */

.bb-closed {
  padding: .75rem 1rem;
  font-size: .875rem;
  text-align: center;
  color: #212121;
  background-color: var(--bg-warning-light);
}

/* ---- ( Header ) ---------------------------------------------------------- */

.header {
  height: 4.5rem;
  background: rgb(62,15,108);
background: linear-gradient(111deg, rgba(62,15,108,1) 0%, rgba(52,18,140,1) 20%, rgba(17,44,154,1) 82%, rgba(35,13,138,1) 100%);
}
/* ---- ( Header Brand ) ---------------------------------------------------- */

.header-brand {
  height: 4.5rem;
  display: flex;
  align-items: center;
  margin-right: 2rem;
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 400;
}

/* __link */
.header-brand__link {
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, .92) !important;
}

/* __logo */
.header-brand__logo {
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-brand[data-model="text"] .header-brand__logo,
.header-brand[data-model="icon"] .header-brand__logo {
  display: none;
}

/* __icon */
.header-brand[data-model="text"] .header-brand__icon,
.header-brand[data-model="logo"] .header-brand__icon {
  display: none;
}

/* __text */
.header-brand[data-model="icon"] .header-brand__text,
.header-brand[data-model="logo"] .header-brand__text {
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(255, 255, 255, .32);
}

@media (max-width: 767.98px) {
  .header-brand__text {
    max-width: 12rem;
  }

  .header-brand[data-model="icon"] .header-brand__text,
  .header-brand[data-model="logo"] .header-brand__text {
    display: none;
  }
}

@media (min-width: 768px) {
  .header-brand__text {
    max-width: 16rem;
  }
}

.header-brand[data-model="icon"] .header-brand__text--short {
  display: none;
}

/* ---- ( Header Search ) --------------------------------------------------- */

.header-search {
  display: flex;
  height: 3.5rem;
  background-color: rgba(0, 0, 0, .24);
  border-radius: 50vh;
}

/* __label */
.header-search__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: .5rem 0 .5rem .5rem;
  cursor: pointer;
  font-size: 1rem;
  color: rgba(255, 255, 255, .80);
  background-color: background: rgb(62,15,108);
background: linear-gradient(111deg, rgba(62,15,108,1) 0%, rgba(52,18,140,1) 20%, rgba(17,44,154,1) 82%, rgba(35,13,138,1) 100%);
  border-radius: 50vh;
}

/* __input */
.header-search__input {
  width: 14rem;
  padding: 0 1rem;
  color: rgba(255, 255, 255, .73);
  background-color: transparent;
  border: none;
}

.header-search__input:focus {
  outline: 0;
}

.header-search__input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, .73);
}

.header-search__input:-ms-input-placeholder {
  color: rgba(255, 255, 255, .73);
}

.header-search__input::-ms-input-placeholder {
  color: rgba(255, 255, 255, .73);
}

.header-search__input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, .73);
}

.header-search__input:-ms-input-placeholder {
  color: rgba(255, 255, 255, .73);
}

.header-search__input::placeholder {
  color: rgba(255, 255, 255, .73);
}

/* __button */
.header-search__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: .5rem .5rem .5rem 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  font-size: 1rem;
  color: rgba(255, 255, 255, .80);
  background-color: var(--bg-primary);
  border: none;
  border-radius: 50vh;
}

.header-search__button:focus {
  outline: 0;
}

/* __icon */
.header-search__icon {
  transition: transform .4s ease-in-out;
}

.header-search__button:hover .header-search__icon {
  transform: rotate(360deg);
}

/* ---- ( User Panel ) ------------------------------------------------------ */

.user-panel {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.user-panel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  color: rgba(255, 255, 255, .87);
  background-color: rgba(0, 0, 0, .24);
  border-radius: 50vh;
}

.user-panel__item:not(:first-child) {
  margin-left: .5rem;
}

.user-panel--guest .user-panel__item {
  padding-left: .75rem;
  padding-right: .75rem;
}

.user-panel__item--pms {
  position: relative;
}

.user-panel__item--user {
  border: 0;
}

@media (min-width: 768px) {
  .user-panel__item--user {
    height: 3.5rem;
    padding-left: .5rem;
    padding-right: 1.25rem;
    border-radius: 50vh;
  }
}

a.user-panel__item {
  transition: background-color .2s ease-in-out;
}

a.user-panel__item:hover,
a.user-panel__item:focus {
  color: rgba(255, 255, 255, .87);
  background-color: rgba(0, 0, 0, .32);
}

/* __icon */
.user-panel--guest .user-panel__icon {
  padding-left: .25rem;
  padding-right: .25rem;
}

/* __text */
.user-panel--guest .user-panel__text {
  padding-left: .25rem;
  padding-right: .25rem;
}

/* __avatar */
.user-panel__avatar {
  width: 2.5rem;
  height: 2.5rem;
  background-color: transparent;
  background-position: center;
  background-size: cover;
  border-radius: 50vh;
}

/* __alert */
.user-panel__alert {
  position: absolute;
  top: .375rem;
  right: .375rem;
  height: .25rem;
  width: .25rem;
  background-color: #4caf50;
  border-radius: 100%;
  -webkit-animation: user-panel-alert 1.5s infinite;
          animation: user-panel-alert 1.5s infinite;
}

@-webkit-keyframes user-panel-alert {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, .4);
  }
  75% {
    box-shadow: 0 0 0 .375rem rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

@keyframes user-panel-alert {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, .4);
  }
  75% {
    box-shadow: 0 0 0 .375rem rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

/* ---- ( Top Panel ) ------------------------------------------------------- */

.top-panel {
  display: flex;
  align-items: center;
  height: 4rem;
  background-color: #fff;
}

/* ---- ( Header Nav ) ------------------------------------------------------ */

.header-nav {
  display: flex;
  height: 2.5rem;
}

/* __link */
.header-nav__link {
  display: flex;
  align-items: center;
  padding-left: .75rem;
  padding-right: .75rem;
  color: #424242 !important;
  border: .1rem solid transparent;
  border-radius: 50vh;
  transition: border-color .2s ease-in-out;
}

.header-nav__link:hover,
.header-nav__link:focus {
  border-color: var(--bg-body);
}

.section--index .header-nav__link--home,
.section--portal .header-nav__link--portal,
.section--search .header-nav__link--search,
.section--member-list .header-nav__link--member-list {
  color: #212121 !important;
  border-color: var(--bg-primary-light);
}

.header-nav__icon {
  padding-left: .25rem;
  padding-right: .25rem;
  color: #dc0013;(--bg-primary);
}

.header-nav__text {
  padding-left: .25rem;
  padding-right: .25rem;
  font-size: 1rem;
  font-weight: 300;
  white-space: nowrap;
  letter-spacing: .25px;
}

/* ---- ( Breadcrumb ) ------------------------------------------------------ */

.breadcrumb {
  display: flex;
  align-items: center;
  margin-left: -.5rem;
  margin-right: -.5rem;
  margin-bottom: 1rem;
}

/* Hide breadcrumb on index */
.section--index .breadcrumb {
  display: none;
}

.breadcrumb__item {
  margin-left: .5rem;
  margin-right: .5rem;
  font-size: .875rem;
  white-space: nowrap;
}

.breadcrumb__item:not(.breadcrumb__item--active) {
  max-width: 12rem;
  text-overflow: ellipsis;
  overflow: hidden;
}

.breadcrumb__item--seperator {
  color: #757575;
}

.breadcrumb__item--active {
  color: #546e7a;
}

a.breadcrumb__item--dropdown {
  margin-left: 0;
  font-size: 1rem;
  color: #546e7a;
}

a.breadcrumb__item--dropdown:hover,
a.breadcrumb__item--dropdown:focus {
  color: #546e7a;
}

.breadcrumb__dd {
  color: #546e7a !important;
}

.breadcrumb__pagination {
  display: none;
  z-index: 9999;
  margin-top: .5rem;
  line-height: inherit;
  background-color: #fff;
  border-radius: .25rem;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12);
}

@media (max-width: 1199.98px) {
  .breadcrumb {
    display: none;
  }
}

/* ---- ( Forum List ) ------------------------------------------------------ */

/* __item */
.forum-list__item:not(:last-child) {
  border-bottom: 1px solid #eceff1;
}

.forum-list__item[data-forum-model="status"] .forum-symbol,
.forum-list__item[data-forum-model="symbol"] .forum-status {
  display: none;
}

/* __section */
.forum-list__section {
  display: flex;
}

/* __section--main */
.forum-list__section--main {
  padding: .5rem;
}

/* __section--moderators */
.forum-list__section--moderators {
  padding: .25rem .5rem;
  font-size: .875rem;
  border-top: 1px solid #eceff1;
}

/* __section--latest */
.forum-list__section--latest {
  padding: .25rem .5rem;
  font-size: .875rem;
  border-top: 1px solid #eceff1;
}

/* __col */
.forum-list__col {
  padding: .5rem;
}

/* __section--main __col */
.forum-list__section--main .forum-list__col--status {
  display: flex;
  align-items: center;
  width: 3.5rem;
}

.forum-list__section--main .forum-list__col--main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: calc(100% - 19.5rem);
}

@media (max-width: 767.98px) {
  .forum-list__section--main .forum-list__col--main {
    width: calc(100% - 5.5rem);
  }
}

.forum-list__section--main .forum-list__col--stats {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14rem;
}

@media (max-width: 767.98px) {
  .forum-list__section--main .forum-list__col--stats {
    display: none;
  }
}

.forum-list__section--main .forum-list__col--action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
}

/* __section--moderators __col */
.forum-list__section--moderators .forum-list__col--status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 3.5rem;
}

.forum-list__section--moderators .forum-list__col--main {
  width: calc(100% - 3.5rem);
}

/* __section--latest __col */
.forum-list__section--latest .forum-list__col--status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 3.5rem;
}

.forum-list__section--latest .forum-list__col--main {
  width: calc(100% - 3.5rem);
}

/* ---- ( Forum Status ) ---------------------------------------------------- */

.forum-status {
  height: 2.5rem;
  width: 2.5rem;
  font-size: 2.5rem;
  border-radius: 50%;
  border: 4px solid;
}

.forum-status--on {
  background-color: #e8f5e9;
  border-color: #4caf50;
  -webkit-animation: forum-status-alert 1.5s infinite;
          animation: forum-status-alert 1.5s infinite;
}

.forum-status--off {
  background-color: #fafafa;
  border-color: #9e9e9e;
}

.forum-status--offclock {
  background-color: #ffebee;
  border-color: #f44336;
}

.forum-status--offlink {
  background-color: #e3f2fd;
  border-color: #2196f3;
}

@-webkit-keyframes forum-status-alert {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, .4);
  }
  75% {
    box-shadow: 0 0 0 .5rem rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

@keyframes forum-status-alert {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, .4);
  }
  75% {
    box-shadow: 0 0 0 .5rem rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

/* ---- ( Forum Symbol ) ---------------------------------------------------- */

.forum-symbol {
  position: relative;
  height: 2.5rem;
  width: 2.5rem;
  background-size: cover;
  background-color: #eceff1;
  border-radius: 50%;
}

/* ---- ( Forum Mini Status  ) ---------------------------------------------- */

.forum-mini-status {
  position: absolute;
  right: -2px;
  bottom: -2px;
  height: 1rem;
  width: 1rem;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: help;
}

.forum-mini-status--on {
  background-color: #4caf50;
  -webkit-animation: forum-mini-status-alert 1.5s infinite;
          animation: forum-mini-status-alert 1.5s infinite;
}

.forum-mini-status--off {
  background-color: #9e9e9e;
}

.forum-mini-status--offclose {
  background-color: #f44336;
}

.forum-mini-status--offlink {
  background-color: #2196f3;
}

@-webkit-keyframes forum-mini-status-alert {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, .4);
  }
  75% {
    box-shadow: 0 0 0 .25rem rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

@keyframes forum-mini-status-alert {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, .4);
  }
  75% {
    box-shadow: 0 0 0 .25rem rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

/* ---- ( Sub Forums ) ------------------------------------------------------ */

.sub-forums {
  margin-top: .25rem;
}

/* __link */
.sub-forums__link {
  display: inline-flex;
  align-items: center;
  color: #424242 !important;
}

/* __text */
.sub-forums__text {
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: .2px;
}

/* __icon */
.sub-forums__icon {
  margin-left: .25rem;
  color: #757575;
}

/* ---- ( Sub Forums DD ) --------------------------------------------------- */

.sub-forums-dd {
  display: none;
  z-index: 9999;
  margin-top: .5rem;
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 8px 3px rgba(60, 64, 67, .15);
  color: #424242;
  background-color: #fff;
  border-radius: .5rem;
  overflow: hidden;
}

/* __header */
.sub-forums-dd__header {
  padding: .5rem 1rem;
  color: #eceff1;
  background-color: #37474f;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

/* __title */
.sub-forums-dd__title {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 500;
}

.sub-forums-dd__title-icon {
  margin-left: auto;
}

/* __main */
.sub-forums-dd__main {
  padding-top: .5rem;
  padding-bottom: .5rem;
  max-height: 16rem;
  overflow-x: auto;
}

/* __link */
.sub-forums-dd__link {
  display: flex;
  align-items: center;
  min-width: 12rem;
  height: 2rem;
  padding-left: .75rem;
  padding-right: .75rem;
  color: #424242 !important;
}

.sub-forums-dd__link:hover,
.sub-forums-dd__link:focus {
  background-color: #f5f5f5;
}

/* __status */
.sub-forums-dd__status {
  display: flex;
  height: .5rem;
  width: .5rem;
  margin-left: .25rem;
  margin-right: .25rem;
  border-radius: 50%;
}

.sub-forums-dd__status--minion {
  background-color: #4caf50;
}

.sub-forums-dd__status--minioff {
  background-color: #9e9e9e;
}

.sub-forums-dd__status--minioffclose {
  background-color: #f44336;
}

.sub-forums-dd__status--miniofflink {
  background-color: #2196f3;
}

/* __text */
.sub-forums-dd__text {
  margin-left: .25rem;
  margin-right: .25rem;
  font-size: .875rem;
}

/* ---- ( Forum Stats ) ----------------------------------------------------- */

.forum-stats {
  display: flex;
  align-items: center;
  width: 100%;
}

/* __col */
.forum-stats__col {
  width: 50%;
}

.forum-stats__col:nth-child(1) {
  padding-right: 1rem;
  border-right: 1px solid #eceff1;
  text-align: right;
}

.forum-stats__col:nth-child(2) {
  padding-left: 1rem;
}

/* __label */
.forum-stats__label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .2px;
  color: #757575;
}

/* ---- ( Whos Online ) ----------------------------------------------------- */

.whos-online {
  font-size: .875rem;
}

.whos-online__label {
  color: #757575;
}

/* ---- ( Legal Warning ) --------------------------------------------------- */

.legal-warning {
  padding-left: .5rem;
  font-size: .875rem;
  border-left: .25rem solid #ffc107;
}

.legal-warning__link {
  color: #424242 !important;
  border-bottom: 1px dashed #cfd8dc;
}

/* ---- ( Saying ) ---------------------------------------------------------- */

.saying {
  margin-bottom: 0;
  /* FIX */
  padding: 0;
  font-size: 1rem;
  background-color: transparent;
  border-radius: 0;
}

/* __text */
.saying__text {
  margin-bottom: .5rem;
  font-size: 1.125em;
}

/* __footer */
.saying__footer {
  color: #000000;
}

.saying__footer--center {
  text-align: center;
}

/* __cite */
.saying__cite {
  /* FIX */
  display: initial;
  padding-bottom: 0;
  font-size: .875em;
  font-weight: initial;
}

.saying__cite::before {
  content: "\2014 \00A0";
}

/* ---- ( Thread Hero ) ----------------------------------------------------- */

.thread-hero {
  display: flex;
  margin-bottom: 1rem;
  background-color: #fff;
  border-radius: var(--border-radius);
}

.thread-hero__col:first-child {
  margin: .25rem 0 .25rem .25rem;
}

.thread-hero__col:last-child {
  margin: .25rem .25rem .25rem 0;
}

.thread-hero__col--next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  color: #212121 !important;
  background-color: #eceff1;
  border-radius: var(--border-radius);
  transition: background-color .2s ease-in-out;
}

.thread-hero__col--next:hover {
  background-color: #cfd8dc;
}

.thread-hero__col--main {
  width: calc(100% - 6.5rem);
  padding: .75rem 1rem;
}

/* ---- ( Thread Notes ) ---------------------------------------------------- */

.thread-notes {
  position: relative;
  padding: 1rem;
  margin: 1.5rem .5rem;
  font-size: .875rem;
  background: linear-gradient(to right, rgb(225, 190, 231), rgb(255, 204, 188));
  border-radius: .25rem;
}

.thread-notes::before {
  content: '';
  position: absolute;
  top: -.5rem;
  left: -.5rem;
  right: -.5rem;
  bottom: -.5rem;
  border: 1px solid #ba68c8;
  border-radius: .375rem;
  pointer-events: none;
}

.thread-notes::after {
  content: "Not";
  position: absolute;
  z-index: 1;
  top: -1rem;
  left: 1rem;
  height: 1rem;
  padding-left: .5rem;
  padding-right: .5rem;
  line-height: 1rem;
  font-size: .75em;
  text-transform: uppercase;
  color: #7b1fa2;
  background-color: #eceff1;
}

/* ---- ( Thread Status Badge ) --------------------------------------------- */

.thread-status-badge {
  font-size: 1.25rem;
  margin-right: .5rem;
}

.thread-status-badge[data-tippy] {
  cursor: help;
}

.thread-status-badge:not([data-control="1"]) {
  display: none;
}

.thread-status-badge--sticky {
  color: #009688;
}

.thread-status-badge--closed {
  color: #ff5722;
}

.thread-hero-info {
  display: flex;
  justify-content: center;
  margin-top: .5rem;
  font-size: .875rem;
}

.thread-hero-info__item {
  display: flex;
  align-items: center;
}

.thread-hero-info__item:not(:first-child) {
  padding-left: 1rem;
}

.thread-hero-info__item:not(:last-child) {
  padding-right: 1rem;
  border-right: 1px solid #eceff1;
}

/* ---- ( Post ) ------------------------------------------------------------ */

.post__section--head {
  display: flex;
  align-items: center;
  height: 2.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: #cfd8dc;
}

.post.deleted_post .post__section--head {
  background-color: #ffcdd2 !important;
}

.post__section--author {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eceff1;
}

.post__section--main {
  padding: 1rem;
}

/* ---- ( Post Author Avatar ) ---------------------------------------------- */

.post-author-avatar {
  position: relative;
  display: flex;
  margin-right: 1rem;
}

/* __img */
.post-author-avatar__img {
  border-radius: .5rem;
}

@media (max-width: 767.98px) {
  .post-author-avatar__img {
    height: 4rem;
    width: auto;
  }
}

/* ---- ( Post Author DD ) -------------------------------------------------- */

.post-author-dd {
  margin-left: .5rem;
  margin-bottom: -.3rem;
  color: #757575 !important;
}

/* ---- ( Post Author Status ) ---------------------------------------------- */

.post-author-status {
  position: absolute;
  top: -.25rem;
  left: -.25rem;
  height: 1.5rem;
  width: 1.5rem;
  background-color: #cfd8dc;
  border: .25rem solid #fff;
  border-radius: 50%;
}

/* --online */
.post-author-status--online {
  background-color: #4caf50;
}

/* --offline */
.post-author-status--offline {
  background-color: #607d8b;
}

/* --away */
.post-author-status--away {
  background-color: #ff9800;
}

/* ---- ( Post Edit ) ------------------------------------------------------- */

/* __edited */
.post-edit__edited {
  display: block;
  margin-top: 1rem;
  font-size: .875rem;
  font-style: italic;
  color: rgba(0, 0, 0, .60);
}

.post-edit__edited::before {
  content: '(';
}

.post-edit__edited::after {
  content: ')';
}

/* ---- ( Post Author Status ) ---------------------------------------------- */

.post-author-info {
  margin-left: auto;
  padding-left: 1rem;
}

/* __col */
.post-author-info__col {
  display: flex;
  flex-flow: row wrap;
  width: 12rem;
}

/* __item */
.post-author-info__item {
  width: 50%;
  font-size: .75rem;
  min-width: 6rem;
}

.post-author-info__item--label {
  padding-right: .25rem;
  font-size: .75rem;
  text-align: right;
}

.post-author-info__item--value {
  padding-left: .25rem;
  font-size: .75rem;
}

/* ---- ( Post Body ) ------------------------------------------------------- */

.post-body {
  word-break: break-word;
}

/* ---- ( Post Signature ) -------------------------------------------------- */

.post-signature {
  padding-top: 1rem;
  margin-top: 1rem;
  font-size: .875rem;
  border-top: 1px solid #eceff1;
}

/* ---- ( Post Attachment ) ------------------------------------------------- */

.post-attachment {
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #eceff1;
}

/* __item */
.post-attachment__item {
  display: block;
  font-size: .875rem;
  background-color: #eceff1;
  border-left: .1rem solid #607d8b;
  border-radius: .25rem;
}

.post-attachment .post-attachment__item:not(:last-child) {
  margin-bottom: 1rem;
}

.post-attachment__item--file,
.post-attachment__item--unapproved {
  padding: .75rem 1rem;
}

.post-attachment__item--unapproved {
  border-left-color: #ff7500;
}

.post-attachment__item--image,
.post-attachment__item--thumbnail {
  padding: .5rem;
}

/* __link */
.post-attachment__link--thumbnail {
  display: inline-block;
}

.post-attachment .post-attachment__link--thumbnail {
  margin: .5rem;
}

/* __img */
.post-attachment__img {
  border-radius: .25rem;
}

.post-attachment__img--full {
  display: inline-block;
}

.post-attachment .post-attachment__img--full {
  margin: .5rem;
}

.post-attachment__item--image .post-attachment__img--full {
  max-width: calc(100% - 1rem);
}

/* ---- ( Post Button ) ----------------------------------------------------- */

.post-button {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
}

.post-button__link {
  position: relative;
  display: flex;
  align-items: center;
  color: #424242 !important;
}

.post-button__link::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -1px;
  left: 0;
  background-color: currentColor;
  visibility: hidden;
  transform: scaleX(0);
  transition: all .3s ease-in-out 0s;
}

.post-button__link:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

.post-button__link:not(:first-child) {
  margin-left: 1rem;
}

.post-button__text {
  font-size: .875rem;
}

.post:not(.deleted_post) .postbit_qrestore,
.post.deleted_post .postbit_mirage {
  display: none;
}

.post-private-read {
  display: block;
  margin-left: -1rem;
  margin-right: -1rem;
  margin-top: 1rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  background-color: #eceff1;
  border-left: 2px solid #607d8b;
}

.reply-perm {
  position: relative;
  padding: 1rem;
  margin-top: 1rem;
  background-color: #fff;
  border-radius: .25rem;
  overflow: hidden;
}

.reply-perm::before {
  position: absolute;
  content: '';
  height: .2rem;
  left: 0;
  right: 0;
  top: 0;
  background: #ba68c8;
  background: radial-gradient(circle, #ba68c8 0%, #64b5f6 100%);
}

.quick-reply-control {
  margin-top: 1rem;
  padding: .5rem 1rem;
  font-size: .875rem;
  border: 1px solid #cfd8dc;
  border-radius: .25rem;
}

.quick-reply-option {
  display: block;
  padding: .5rem 1rem;
  margin-bottom: 0;
  font-size: .875rem;
  background-color: #eceff1;
  border-radius: .25rem;
  flex: 1 1 25%;
}

/* ---- ( Footer ) ---------------------------------------------------------- */

/* __section--tools */
.footer__section--tools {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #fff;
}

/* __section--main */
.footer__section--main {
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: #eceff1;
  background: rgb(62,15,108);
background: linear-gradient(111deg, rgba(62,15,108,1) 0%, rgba(52,18,140,1) 20%, rgba(17,44,154,1) 82%, rgba(35,13,138,1) 100%);(--bg-secondary-dark--);
} 

/* __section--copy */
.footer__section--copy {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: .875rem;
  color: #eceff1;
  background-color: #37474f;
}

/* ---- ( Selector ) -------------------------------------------------------- */

/* __group */
.selector__group {
  display: flex;
  height: 2.25rem;
}

/* __item */
.selector__item {
  border: 1px solid #cfd8dc;
}

.selector__item:not(:first-child) {
  margin-left: -1px;
}

.selector__item:first-child {
  border-top-left-radius: 1.125rem;
  border-bottom-left-radius: 1.125rem;
}

.selector__item:last-child {
  border-top-right-radius: 1.125rem;
  border-bottom-right-radius: 1.125rem;
}

/* __item--label */
.selector__item--label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  margin-bottom: 0;
  cursor: pointer;
  font-size: 1rem;
  color: #424242;
}

/* __item--select */
.selector__item--select {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(100% - 6rem);
  padding-left: 1rem;
  padding-right: 2.5rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  vertical-align: middle;
  font-size: .875rem;
  color: #424242;
  background: #fff url('../images/select.svg') no-repeat right 1rem center;
  background-size: 8px 10px;
  border-radius: 0;
}

.selector__item--select:focus {
  z-index: 1;
  border-color: #ba68c8;
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(186, 104, 200, .5);
}

/* __item--button */
.selector__item--button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  cursor: pointer;
  vertical-align: middle;
  font-size: 1rem;
  color: #424242;
  background-color: #fff;
}

.selector__item--button:focus {
  z-index: 1;
  border-color: rgba(142, 68, 173, .5); /* HATALI */
  border-color: #8e44ad; /* DOĞRU */
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(142, 68, 173, .5);
}

/* ---- ( Support Text ) ---------------------------------------------------- */

.support-text {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* __icon */
.support-text__icon {
  font-size: 2rem !important;
}

.support-text__icon:not(:first-child) {
  margin-left: 1rem;
}

.support-text__icon--html {
  color: #e34f26;
}

.support-text__icon--css {
  color: #0170ba;
}

/* ---- ( Footer Main Title ) ----------------------------------------------- */

.footer-main-title {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 300;
}

/* ---- ( Footer Nav ) ------------------------------------------------------ */

/* __link */
.footer-nav__link {
  display: flex;
  align-items: center;
  font-size: .875rem;
  color: rgba(255, 255, 255, .80) !important;
}

.footer-nav__link:not(:last-child) {
  margin-bottom: .25rem;
}

/* __icon */
.footer-nav__icon {
  margin-right: .5rem;
  transition: all .4s ease-in-out;
}

.footer-nav__link:hover .footer-nav__icon {
  transform: rotate(360deg);
}

/* ---- ( Footer Copy ) ----------------------------------------------------- */

.footer-copy--tedem {
  text-align: right;
}

@media (max-width: 575.98px) {
  .footer-copy {
    text-align: center;
  }
}

.footer-copy__link {
  color: #eceff1 !important;
}

/* ---- ( FIX Task ) -------------------------------------------------------- */

.fix-task {
  position: absolute;
  bottom: -1px;
}

/* ---- ( Running Task ) ---------------------------------------------------- */

.running-task {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  height: 3rem;
  width: 3rem;
  color: #eceff1;
  background-color: #bf360c;
  border: 4px solid #fff;
  border-radius: 100%;
}

/* ---- ( Scroll Top ) ------------------------------------------------------ */

.scroll-top {
  visibility: hidden;
  position: fixed;
  right: -3rem;
  bottom: 2rem;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  color: #fff;
  background-color: #0727b;(--bg-primary);
  border-radius: 50vh;
  border: .1rem solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
  transition: all .2s ease-in-out;
}

.scroll-top:hover {
  transform: translateY(-.5rem);
}

.scroll-top--show {
  visibility: visible;
  right: 2rem;
}

.scroll-top__icon {
  color: #fff;
  transition: transform .2s ease-in-out;
}

.scroll-top:hover .scroll-top__icon {
  transform: rotate(360deg);
}

/* ---- ( Help Item Holder ) ------------------------------------------------ */

:root {
  --help-item-holder-primary-color: rgba(0, 0, 0, .08);
  --help-item-holder-seconday-color: rgba(0, 0, 0, .16);
}

.help-item-holder {
  position: relative;
  overflow: hidden;
  z-index: 0;
  padding: 1.5rem;
  height: 100%;
  border-radius: .5rem;
  border: .1rem solid var(--help-item-holder-primary-color);
  transition: border-color .2s ease-in-out;
}

.help-item-holder:hover {
  border-color: var(--help-item-holder-seconday-color);
}

.help-item-holder__icon {
  position: absolute;
  z-index: -1;
  top: -4rem;
  right: -4rem;
  font-size: 8rem !important;
  color: var(--help-item-holder-primary-color);
  transition: all .2s ease-in-out;
}

.help-item-holder:hover .help-item-holder__icon {
  top: -3rem;
  right: -3rem;
  color: var(--help-item-holder-seconday-color);
  transform: rotate(405deg);
}

/* ---- ( Table ) ----------------------------------------------------------- */

table {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border-collapse: separate;
}

table:not([class]) > tbody > tr > td:first-child {
  padding-left: 0;
}

table:not([class]) > tbody > tr > td:last-child {
  padding-left: 1rem !important;
  padding-right: 0;
}

.tborder {
  overflow: hidden;
  background-color: #fff;
  border-radius: .5rem;
}

.tfixed {
  table-layout: fixed;
  word-wrap: break-word;
}

.thead {
  padding: .75rem 1rem;
  font-size: 1rem;
  color: #fff;
  background-color: #37474f;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

.thead a,
.thead a:hover {
  color: #fff;
}

.tcat {
  font-size: .875rem;
  color: #393d3f;
  background-color: rgba(0, 0, 0, .02);
  border-bottom: 1px solid #cfd8dc;
}

.tcat a,
.tcat a:hover {
  color: #393d3f;
}

.tcat:not(:last-child) {
  border-right: 1px solid #cfd8dc;
}

.trow1,
.trow2,
.trow_shaded,
.trow_deleted {
  background-color: #fff;
  border-bottom: 1px solid #cfd8dc;
}

.trow1:not(:last-child),
.trow2:not(:last-child),
.trow_shaded:not(:last-child),
.trow_deleted:not(:last-child) {
  border-right: 1px solid #cfd8dc;
}

fieldset.trow1,
fieldset.trow2 {
  border: 0;
  background-color: transparent;
}

.tfoot {
  background-color: #fff;
  border-bottom-left-radius: .5rem;
  border-bottom-right-radius: .5rem;
}

.tfoot a,
.tfoot a:hover {
  color: #393d3f;
}

.no_bottom_border {
  border-bottom: 0;
}

.editor {
  background: #f1f1f1;
  border: 1px solid #cfd8dc;
}

.trow_reputation_positive {
  background: #ccffcc;
}

.trow_reputation_negative {
  background: #ffcccc;
}

.reputation_positive {
  color: green;
}

.reputation_neutral {
  color: #444;
}

.reputation_negative {
  color: red;
}

.repbox {
  font-size:16px;
  font-weight: bold;
  padding:5px 7px 5px 7px;
}

._neutral {
  background-color:#FAFAFA;
  color: #999999;
  border:1px solid #CCCCCC;
}

._minus {
  background-color: #FDD2D1;
  color: #CB0200;
  border:1px solid #980201;
}

._plus {
  background-color:#E8FCDC;
  color: #008800;
  border:1px solid #008800;
}

.expcolimage {
  float: right;
}

.tcat_menu > .expcolimage {
  margin-top: 0;
}

.smilie {
  vertical-align: middle;
}

.smilie_pointer {
  cursor: pointer;
}

.separator {
  margin: 5px;
  padding: 0;
  height: 0px;
  font-size: 1px;
  list-style-type: none;
}

.highlight {
  background: #FFFFCC;
  padding-top: 3px;
  padding-bottom: 3px;
}

.pm-alert {
  padding: .5rem 1rem;
  margin-bottom: 1.5rem;
  font-size: .875em;
  text-align: center;
  word-wrap: break-word;
  color: #fff;
  background-color: #009688;
  border-radius: .25rem;
}

.pm-alert a {
  color: #fff;
  border-bottom: 1px dotted;
}

.pm-alert a:hover {
  border-bottom-style: solid;
}

.red-alert {
  padding: .5rem 1rem;
  margin-bottom: 1.5rem;
  font-size: .875em;
  text-align: center;
  word-wrap: break-word;
  color: #fff;
  background-color: #f44336;
  border-radius: .25rem;
}

.red-alert a {
  color: #fff;
  border-bottom: 1px dotted;
}

.red-alert a:hover {

  border-bottom-style: solid;
}

.high_warning {
  color: #CC0000;
}

.moderate_warning {
  color: #F3611B;
}

.low_warning {
  color: #AE5700;
}

.imminent_banned {
  color: #880000;
}

.high_banned {
  color: #FF0000;
}

.moderate_banned {
  color: #FF6600;
}

.low_banned {
  color: #008000;
}

.online {
  color: #15A018;
}

.offline {
  color: #C7C7C7;
}

.quick_jump {
  background: url('../../../images/jump.png') no-repeat 0;
  width: 13px;
  height: 13px;
  padding-left: 13px;
  margin-top: -3px;
  border: none;
}

.pollbar {
  background: url('../../../images/pollbar.png') top left repeat-x;
  border: 1px solid #3f3f3f;
  height: 10px;
}

.pollbar .percent {
  display: none;
}

.posticons_label {
  white-space: nowrap;
}

/* ---- ( Panel Post ) ------------------------------------------------------ */

.panel-post-last-poster {
  position: absolute;
  right: -.125rem;
  bottom: -.125rem;
  height: 1.5rem;
  width: 1.5rem;
  background-color: #eceff1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  border: .125rem solid white;
}

/* ---- ( Panel ) ----------------------------------------------------------- */

:root {
  --panel-bg-color: #263238;
  --panel-border-radius: var(--border-radius);
}

.panel {
  position: fixed;
  z-index: 100;
  top: 0;
  left: -16rem;
  display: flex;
  flex-direction: column;
  width: 16rem;
  height: 100%;
  background-color: var(--panel-bg-color);
  transition-duration: .2s;
  transition-property: left, box-shadow;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.panel--open {
  left: 0;
  box-shadow: 2px 0 2px 0 rgba(0, 0, 0, .16);
}

.panel__main {
  overflow-y: auto;
}

.panel__title {
  padding: .75rem 1rem;
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .5);
}

.panel__nav-item {
  display: flex;
  align-items: center;
  padding: .75rem .75rem;
  color: rgba(255, 255, 255, .80) !important;
  transition: background-color .4s ease-in-out;
}

.panel__nav-item:hover,
.panel__nav-item:focus {
  background-color: rgba(0, 0, 0, .24);
}

.panel__nav-text,
.panel__nav-icon {
  margin-left: .25rem;
  margin-right: .25rem;
}

.panel__nav-text {
  font-size: .875rem;
}

.panel__nav-icon {
  transition: transform .4s ease-in-out;
}

.panel__nav-item:hover .panel__nav-icon,
.panel__nav-item:focus .panel__nav-icon {
  transform: rotate(360deg);
}

.panel__section--messenger .panel__nav-icon {
  color: var(--bg-info-light);
}

.panel__section--profile .panel__nav-icon {
  color: var(--bg-success-light);
}

.panel__section--misc .panel__nav-icon {
  color: var(--bg-warning-light);
}

.panel__toggle {
  position: absolute;
  top: calc(50% - 1.5rem);
  left: 16rem;
  display: flex;
  align-items: center;
  height: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
  box-shadow: 2px 0 2px 0 rgba(0, 0, 0, .16);
  color: rgba(255, 255, 255, .92) !important;
  background-color: var(--panel-bg-color);
  border-top-right-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
}

/* ==== ( MyCode ) ========================================================== */

:root {
  --my-code-radius: var(--border-radius);
}

/* ---- ( Post Code Block ) ------------------------------------------------- */

.post-code-block {
  margin-bottom: 1.5rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  background-color: #eceff1;
  border-left: .1rem solid #607d8b;
  border-radius: var(--my-code-radius);
}

.post-code-block__title {
  display: none;
}

.post-code-block code {
  font-family: 'Fira Code', Courier, monospace;
  -webkit-font-feature-settings: "calt" 1;
          font-feature-settings: "calt" 1;
}

/* ---- ( List ) ------------------------------------------------------------ */

.mycode_list {
  margin: 1rem 0;
}

/* ---- ( <iframe> ) -------------------------------------------------------- */

.my-code-iframe {
  display: inline-block;
}

/* ---- ( Quote ) ----------------------------------------------------------- */

.mycode_quote {
  padding: 1rem;
  margin-bottom: 0;
  background-color: #f5f5f5;
  border-radius: var(--my-code-radius);
  border-left: .1rem solid #9e9e9e;
}

.mycode_quote > .mycode_quote {
  border-radius: 0;
}

.mycode_quote cite {
  display: flex;
  font-weight: 500;
	font-style: normal;
	display: block;
	padding-bottom: .75rem;
}

.mycode_quote cite > span {
	float: right;
	font-weight: normal;
	font-size: .75rem;
	color: #757575;
}

.mycode_quote cite span.highlight {
	float: none;
	font-weight: 500;
}

/* ---- ( Bold ) ------------------------------------------------------------ */

.mycode_b {
  font-weight: 500 !important;
}

/* ==== ( Thread List ) ===================================================== */

/* ---- ( Thread List Status Holder ) --------------------------------------- */

.thread-list-status-holder {
  display: flex;
  position: absolute;
  right: -.25rem;
  bottom: -.25rem;
  padding: .25rem;
  background-color: #fff;
  border-radius: 50%;
}

/* ---- ( Thread List Status ) ---------------------------------------------- */

.thread-list-status {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url('../images/folders.png');
  background-repeat: no-repeat;
}

.thread-list-status[data-tippy] {
  cursor: help;
}

.thread-list-status.dot_folder {
  background-position: 0 0;
}

.thread-list-status.dot_hotfolder {
  background-position: 0 -20px;
}

.thread-list-status.dot_hotclosefolder {
  background-position: 0 -40px;
}

.thread-list-status.dot_closefolder {
  background-position: 0 -60px;
}

.thread-list-status.dot_newfolder {
  background-position: 0 -80px;
}

.thread-list-status.dot_newhotfolder {
  background-position: 0 -100px;
}

.thread-list-status.dot_newhotclosefolder {
  background-position: 0 -120px;
}

.thread-list-status.dot_newclosefolder {
  background-position: 0 -140px;
}

.thread-list-status.folder {
  background-position: 0 -160px;
}

.thread-list-status.hotfolder {
  background-position: 0 -180px;
}

.thread-list-status.hotclosefolder {
  background-position: 0 -200px;
}

.thread-list-status.closefolder {
  background-position: 0 -220px;
}

.thread-list-status.movefolder {
  background-position: 0 -240px;
}

.thread-list-status.newfolder {
  background-position: 0 -260px;
}

.thread-list-status.newhotfolder {
  background-position: 0 -280px;
}

.thread-list-status.newhotclosefolder {
  background-position: 0 -300px;
}

.thread-list-status.newclosefolder {
  background-position: 0 -320px;
}

/* ---- ( Thread List Prefix ) ---------------------------------------------- */

.thread-list-prefix {
  margin-right: .5rem;
}

.thread-list-prefix[title]:not(:link) {
  cursor: help;
}

.thread-list-prefix--ann {
  color: #9c27b0;
}

.thread-list-prefix--sticky,
.thread-list-prefix--closed,
.thread-list-prefix--moved,
.thread-list-prefix--poll {
  display: none;
}

.thread-list-prefix--sticky[data-control="1"] {
  display: inline-block;
  color: #009688;
}

.thread-list-prefix--moved[data-control="moved"] {
  display: inline-block;
  color: #2196f3;
}

.thread-list-prefix--closed[data-control="1"],
.thread-list-prefix--closed[data-control^="moved"] {
  display: inline-block;
  color: #ff5722;
}

.thread-list-prefix--poll[data-control="1"] {
  display: inline-block;
  color: #ff9800;
}

.thread-list-prefix--unread {
  color: #4caf50 !important;
}

.thread-list-prefix--unread .thread-list-prefix__icon {
  border-radius: 100%;
  -webkit-animation: threadListUnreadPrefix 1.5s infinite;
          animation: threadListUnreadPrefix 1.5s infinite;
}

@-webkit-keyframes threadListUnreadPrefix {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, .4);
  }
  75% {
    box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

@keyframes threadListUnreadPrefix {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, .4);
  }
  75% {
    box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

/* ==== ( Fix ) ============================================================= */

.sceditor-button {
  box-sizing: content-box;
}

.select-2-p-fix p:not([class]) {
  margin-bottom: 0 !important;
}

/* ==== ( 3rd Party ) ======================================================= */

/* ---- ( jGrowl ) ---------------------------------------------------------- */

.jGrowl {
  z-index: 9999;
  color: #fff;
  font-size: 12px;
  font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
  position: fixed;
}

.jGrowl.top-left {
  left: 0px;
  top: 0px;
}

.jGrowl.top-right {
  right: 0px;
  top: 0px;
}

.jGrowl.bottom-left {
  left: 0px;
  bottom: 0px;
}

.jGrowl.bottom-right {
  right: 0px;
  bottom: 0px;
}

.jGrowl.center {
  top: 0px;
  width: 50%;
  left: 25%;
}

.jGrowl.center .jGrowl-notification,
.jGrowl.center .jGrowl-closer {
  margin-left: auto;
  margin-right: auto;
}

.jGrowl-notification {
  background-color: transparent;
  opacity: .9;
  zoom: 1;
  width: 250px;
  padding: 10px;
  margin: 10px;
  text-align: left;
  display: none;
  border-radius: 5px;
  word-break: break-all;
}

.jGrowl .jGrowl-notification {
  min-height: 40px;
}

.jGrowl-notification .ui-state-highlight,
.jGrowl-notification .ui-widget-content .ui-state-highlight,
.jGrowl-notification .ui-widget-header .ui-state-highlight {
  border: 1px solid #000;
  background: #000;
  color: #fff;
}

.jGrowl-notification .jGrowl-header {
  font-weight: bold;
  font-size: .85em;
}

.jGrowl-notification .jGrowl-close {
  background-color: transparent;
  color: inherit;
  border: none;
  z-index: 99;
  float: right;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
}

.jGrowl-closer {
  background-color: #000000;
  opacity: .9;
  zoom: 1;
  width: 250px;
  padding: 10px;
  margin: 10px;
  text-align: left;
  display: none;
  border-radius: 5px;
  word-break: break-all;
  padding-top: 4px;
  padding-bottom: 4px;
  cursor: pointer;
  font-size: .875em;
  font-weight: bold;
  text-align: center;
}

.jGrowl-closer .ui-state-highlight,
.jGrowl-closer .ui-widget-content .ui-state-highlight,
.jGrowl-closer .ui-widget-header .ui-state-highlight {
  border: 1px solid #000;
  background: #000;
  color: #fff;
}

.jGrowl .jGrowl-notification.jgrowl_success {
  background: lightgreen;
  border: 1px solid lightgreen;
  color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_error {
  background: red;
  border: 1px solid red;
  color: #333;
}

.jGrowl .jGrowl-notification.jgrowl_process,
.jGrowl .jGrowl-closer {
  background: yellow;
  border: 1px solid yellow;
  color: #333;
}

@media print {
  .jGrowl {
    display: none;
  }
}

/* ---- ( Modal ) ----------------------------------------------------------- */

.blocker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, .75);
}

.blocker::before {
  content: '';
  display: inline-block;
  height: 100%;
  margin-right: -.05em;
  vertical-align: middle;
}

.blocker.behind {
  background-color: transparent;
}

.modal {
  width: 400px;
  text-align: left;
  background: #fff;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  z-index: 2;
  border-radius: 8px;
  box-sizing: border-box;
  box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
  position: absolute;
  top: -12.5px;
  right: -12.5px;
  display: block;
  width: 30px;
  height: 30px;
  text-indent: -9999px;
  background: url('../../../images/close.png') no-repeat 0 0;
}

.modal-spinner {
  display: none;
  width: 64px;
  height: 64px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -32px;
  margin-right: -32px;
  background: url('../../../images/spinner_big.gif') no-repeat center center;
  border-radius: 8px;
}

/* ---- ( Impromptu ) ------------------------------------------------------- */

.jqifade {
  position: absolute;
  background-color: #777777;
}

iframe.jqifade {
  display:block;
  z-index: -1;
}

.jqi {
  width: 400px;
  max-width:90%;
  position: absolute;
  background-color: #ffffff;
  font-size: 11px;
  text-align: left;
  border: solid 1px #eeeeee;
  border-radius: 6px;
  padding: 7px;
}

.jqi .jqiclose {
  position: absolute;
  top: 4px;
  right: -2px;
  width: 18px;
  cursor: default;
  color: #bbbbbb;
  font-weight: bold;
}

.jqi .jqistate {
  background-color: #fff;
}

.jqi .jqititle {
  padding: 5px 10px;
  font-size: 16px;
  line-height: 20px;
  border-bottom: solid 1px #eeeeee;
}

.jqi .jqimessage {
  padding: 10px;
  line-height: 20px;
  color: #444444;
  overflow: auto;
}

.jqi .jqibuttonshide {
  display: none;
}

.jqi .jqibuttons {
  text-align: right;
  margin: 0 -7px -7px -7px;
  border-top: solid 1px #e4e4e4;
  background-color: #f4f4f4;
  border-radius: 0 0 6px 6px;
}

.jqi .jqibuttons button {
  margin: 0;
  padding: 15px 20px;
  background-color: transparent;
  font-weight: normal;
  border: none;
  border-left: solid 1px #e4e4e4;
  color: #777;
  font-weight: bold;
  font-size: 12px;
}

.jqi .jqibuttons button.jqidefaultbutton {
  color: #489afe;
}

.jqi .jqibuttons button:hover,
.jqi .jqibuttons button:focus {
  color: #287ade;
  outline: none;
}

.jqi .jqibuttons button[disabled] {
  color: #aaa;
}

.jqiwarning .jqi .jqibuttons{
  background-color: #b95656;
}

.jqi .jqiparentstate::after {
  background-color: #777;
  opacity: .6;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 6px;
}

.jqi .jqisubstate {
  position: absolute;
  top:0;
  left: 20%;
  width: 60%;
  padding: 7px;
  border: solid 1px #eeeeee;
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.jqi .jqisubstate .jqibuttons button {
  padding: 10px 18px;
}

.jqi .jqiarrow {
  position: absolute;
  height: 0;
  width:0;
  line-height: 0;
  font-size: 0;
  border: solid 10px transparent;
}

.jqi .jqiarrowtl {
  left: 10px;
  top: -20px;
  border-bottom-color: #ffffff;
}

.jqi .jqiarrowtc {
  left: 50%;
  top: -20px;
  border-bottom-color: #ffffff;
  margin-left: -10px;
}

.jqi .jqiarrowtr {
  right: 10px;
  top: -20px;
  border-bottom-color: #ffffff;
}

.jqi .jqiarrowbl {
  left: 10px;
  bottom: -20px;
  border-top-color: #ffffff;
}

.jqi .jqiarrowbc {
  left: 50%;
  bottom: -20px;
  border-top-color: #ffffff;
  margin-left: -10px;
}

.jqi .jqiarrowbr {
  right: 10px;
  bottom: -20px;
  border-top-color: #ffffff;
}

.jqi .jqiarrowlt {
  left: -20px;
  top: 10px;
  border-right-color: #ffffff;
}

.jqi .jqiarrowlm {
  left: -20px;
  top: 50%;
  border-right-color: #ffffff;
  margin-top: -10px;
}

.jqi .jqiarrowlb {
  left: -20px;
  bottom: 10px;
  border-right-color: #ffffff;
}

.jqi .jqiarrowrt {
  right: -20px;
  top: 10px;
  border-left-color: #ffffff;
}

.jqi .jqiarrowrm {
  right: -20px;
  top: 50%;
  border-left-color: #ffffff;
  margin-top: -10px;
}

.jqi .jqiarrowrb {
  right: -20px;
  bottom: 10px;
  border-left-color: #ffffff;
}

.scaleimages img {
  max-width: 100%;
}

/* ---- ( Media ) ----------------------------------------------------------- */

/* up */
@media (min-width: 576px) {
  .small\:media-up {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .medium\:media-up {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .large\:media-up {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  .x-large\:media-up {
    display: none !important;
  }
}

/* down */
@media (max-width: 575.98px) {
  .x-small\:media-down {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .small\:media-down {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .medium\:media-down {
    display: none !important;
  }
}

@media (max-width: 1199.98px) {
  .large\:media-down {
    display: none !important;
  }
}