/*------------- #VARIABLES --------------*/
/*------------- #TABLE OF CONTENTS --------------*/
/*------------------------------------------------------------------


Project name: "Olympus",
Version: "1.0.0",
Description: "HTML-template"


1. Bootstrap core

	../Bootstrap/scss/

	1.1 Alert
	1.2 Badge
	1.3 Breadcrumb
	1.4 Button group
	1.5 Buttons
	1.6 Card
	1.7 Carousel
	1.8 Close
	1.9 Code
	1.10 Custom
	1.11 Custom forms
	1.12 Dropdown
	1.13 Forms
	1.14 Grid
	1.15 Images
	1.16 Input group
	1.17 Jumbotron
	1.18 List Group
	1.19 Media
	1.20 Mixins
	1.21 Modal
	1.22 Nav
	1.23 Navbar
	1.24 Normalize
	1.25 Pagination
	1.26 Popover
	1.27 Print
	1.28 Progress
	1.29 Reboot
	1.30 Responsive embed
	1.31 Tables
	1.32 Tooltip
	1.33 Transitions
	1.34 Type
	1.35 Utilities
	1.36 Variables


1. Theme Styles

	../sass/theme-styles/

	1.1 Bootstrap Customization
	1.2 Header
	1.3 Mobile App
	1.4 Variables (base colors, fonts ...)


2. Blocks

	../sass/blocks/

	2.1 UI-blocks
	2.2 Buttons
	2.3 Forms
	2.4 Fixed sidebars
	2.5 Skills
	2.6 Friends
	2.7 Sliders
	2.8 Pagination
	2.9 Landing page
	2.10 Registration Login Form
	2.11 Main Header
	2.12 Your Profile
	2.13 Notification
	2.14 Popup Chat
	2.15 Overlay Menu
	2.16 Popup Windows
	2.17 Widget search
	2.18 Widget personal info
	2.19 Widget socials
	2.20 Widget select
	2.21 Widget contacts
	2.22 Widget fav-ed page
	2.23 Widget twitter
	2.24 Widget latest photo
	2.25 Widget playlist
	2.26 Widget friend pages added
	2.27 Widget create fav page
	2.28 Widget birthday alert
	2.29 Widget action
	2.30 Widget activity feed
	2.31 Widget weather
	2.32 Widget last video
	2.33 Widget pool
	2.34 Widget badges
	2.35 Widget blog posts
	2.36 OL lists
	2.37 Friends Harmonic
	2.38 Posts
	2.39 Comment List
	2.40 Post Video
	2.41 Video Player
	2.42 Video news feed form
	2.43 Photo gallery
	2.44 Features Video
	2.45 Event item
	2.46 Available widget
	2.47 Today events
	2.48 Calendar events tabs
	2.49 Helper / Additional classes
	2.50 Statistics





-------------------------------------------------------------------*/
/*------------- #PLUGINS --------------*/
/*------------- #VARIABLES --------------*/
/*!
 * Bootstrap-select v1.11.0 (http://silviomoreto.github.io/bootstrap-select)
 *
 * Copyright 2013-2016 bootstrap-select
 * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
 */
select.bs-select-hidden,
select.selectpicker {
  display: none !important; }

.bootstrap-select {
  width: 220px \0;
  /*IE9 and below*/ }

.bootstrap-select.show .dropdown-menu {
  display: block; }

.bootstrap-select li.hidden {
  display: none !important; }

.bootstrap-select li.selected a {
  background: #ff5e3a;
  background: var(--primary-accent-color);
  color: white; }

.bootstrap-select li.selected a:hover {
  opacity: .9; }

.bootstrap-select > .dropdown-toggle {
  width: 100%;
  z-index: 1;
  background-color: transparent;
  border: 1px solid #e6ecf5;
  border-radius: 0.25rem;
  padding: 1.25rem 1.1rem;
  margin: 0 0 3px 0;
  float: none; }

.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,
.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,
.bootstrap-select > .dropdown-toggle.bs-placeholder:active {
  color: #464a4c; }

.bootstrap-select > select {
  position: absolute !important;
  bottom: 0;
  left: 50%;
  display: block !important;
  width: 0.5px !important;
  height: 100% !important;
  padding: 0 !important;
  opacity: 0 !important;
  border: none; }

.bootstrap-select > select.mobile-device {
  top: 0;
  left: 0;
  display: block !important;
  width: 100% !important;
  z-index: 2; }

.has-error .bootstrap-select .dropdown-toggle,
.error .bootstrap-select .dropdown-toggle {
  border-color: #b94a48; }

.bootstrap-select.fit-width {
  width: auto !important; }

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: 220px; }

.bootstrap-select .dropdown-toggle:focus {
  outline: none; }

.bootstrap-select.form-control {
  margin-bottom: 0;
  padding: 0;
  border: none; }

.bootstrap-select.form-control:not([class*="col-"]) {
  width: 100%; }

.bootstrap-select.form-control.input-group-btn {
  z-index: auto; }

.bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child) > .btn {
  border-radius: 0; }

.bootstrap-select.btn-group:not(.input-group-btn),
.bootstrap-select.btn-group[class*="col-"] {
  float: none;
  display: inline-block;
  margin-left: 0; }

.bootstrap-select.btn-group.dropdown-menu-right,
.bootstrap-select.btn-group[class*="col-"].dropdown-menu-right,
.row .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right {
  float: right; }

.form-inline .bootstrap-select.btn-group,
.form-horizontal .bootstrap-select.btn-group,
.form-group .bootstrap-select.btn-group {
  margin-bottom: 0;
  margin-left: 1px; }

.form-group-lg .bootstrap-select.btn-group.form-control,
.form-group-sm .bootstrap-select.btn-group.form-control {
  padding: 0; }

.form-inline .bootstrap-select.btn-group .form-control {
  width: 100%; }

.bootstrap-select.btn-group.disabled,
.bootstrap-select.btn-group > .disabled {
  cursor: not-allowed; }

.bootstrap-select.btn-group.disabled:focus,
.bootstrap-select.btn-group > .disabled:focus {
  outline: none !important; }

.bootstrap-select.btn-group.bs-container {
  position: absolute;
  height: 0 !important;
  padding: 0 !important; }

.bootstrap-select.btn-group.bs-container .dropdown-menu {
  z-index: 1060; }

.bootstrap-select.btn-group .dropdown-toggle .filter-option {
  display: inline-block;
  overflow: hidden;
  width: 100%;
  text-align: left;
  color: #515365;
  font-weight: normal;
  white-space: nowrap;
  padding: 0 15px 0 0;
  text-overflow: ellipsis; }

.bootstrap-select.btn-group .dropdown-toggle .caret {
  position: absolute;
  top: 50%;
  right: 12px;
  margin-top: -2px;
  vertical-align: middle; }

.bootstrap-select.btn-group[class*="col-"] .dropdown-toggle {
  width: 100%; }

.bootstrap-select.btn-group .dropdown-menu {
  margin-left: 0;
  min-width: 100%;
  padding: 0;
  box-sizing: border-box; }

.bootstrap-select.btn-group .dropdown-menu.inner {
  position: static;
  float: none;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none; }

.bootstrap-select.btn-group .dropdown-menu li {
  position: relative; }

.bootstrap-select.btn-group .dropdown-menu li.active small {
  color: #fff; }

.bootstrap-select.btn-group .dropdown-menu li.disabled a {
  cursor: not-allowed; }

.bootstrap-select.btn-group .dropdown-menu li a {
  padding: 10px 1.5rem;
  color: #888da8;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.bootstrap-select.btn-group .dropdown-menu li.selected a {
  color: #fff; }

.bootstrap-select.btn-group .dropdown-menu li a.opt {
  position: relative;
  padding-left: 2.25em; }

.bootstrap-select.btn-group .dropdown-menu li a span.check-mark {
  display: none; }

.bootstrap-select.btn-group .dropdown-menu li a span.text {
  display: inline-block; }

.bootstrap-select.btn-group .dropdown-menu li small {
  padding-left: 0.5em; }

.bootstrap-select.btn-group .dropdown-menu .notify {
  position: absolute;
  bottom: 5px;
  width: 96%;
  margin: 0 2%;
  min-height: 26px;
  padding: 3px 5px;
  background: #f5f5f5;
  border: 1px solid #e3e3e3;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
  pointer-events: none;
  opacity: 0.9;
  box-sizing: border-box; }

.bootstrap-select.btn-group .no-results {
  padding: 3px;
  background: #f5f5f5;
  margin: 0 5px;
  white-space: nowrap; }

.bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option {
  position: static; }

.bootstrap-select.btn-group.fit-width .dropdown-toggle .caret {
  position: static;
  top: auto;
  margin-top: -1px; }

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
  position: absolute;
  display: inline-block;
  right: 15px;
  top: 12px; }

.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
  margin-right: 34px; }

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle {
  z-index: 1061; }

.bootstrap-select.show-menu-arrow .dropdown-toggle:before {
  content: '';
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid rgba(204, 204, 204, 0.2);
  position: absolute;
  bottom: -4px;
  left: 9px;
  display: none; }

.bootstrap-select.show-menu-arrow .dropdown-toggle:after {
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  position: absolute;
  bottom: -4px;
  left: 10px;
  display: none; }

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {
  bottom: auto;
  top: -3px;
  border-top: 7px solid rgba(204, 204, 204, 0.2);
  border-bottom: 0; }

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {
  bottom: auto;
  top: -3px;
  border-top: 6px solid white;
  border-bottom: 0; }

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {
  right: 12px;
  left: auto; }

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {
  right: 13px;
  left: auto; }

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before,
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after {
  display: block; }

.bs-searchbox,
.bs-actionsbox,
.bs-donebutton {
  padding: 4px 8px; }

.bs-actionsbox {
  width: 100%;
  box-sizing: border-box; }

.bs-actionsbox .btn-group button {
  width: 50%; }

.bs-donebutton {
  float: left;
  width: 100%;
  box-sizing: border-box; }

.bs-donebutton .btn-group button {
  width: 100%; }

.bs-searchbox + .bs-actionsbox {
  padding: 0 8px 4px; }

.bs-searchbox .form-control {
  margin-bottom: 0;
  width: 100%;
  float: none; }
.show > .btn-secondary.dropdown-toggle {
  background-color: transparent;
  border-color: #e6ecf5; }

.dropdown-toggle::after {
  border-top-color: #888da8;
  right: 20px;
  position: relative; }

.form-group.label-floating .bootstrap-select.btn-group .dropdown-toggle .filter-option {
  top: 5px;
  position: relative; }

.form-group.label-floating.is-select label.control-label {
  top: 8px;
  font-size: 11px;
  line-height: 1.42857; }

.bootstrap-select.style-2 > .dropdown-toggle {
  border: none;
  border-radius: 0;
  padding: 10px 15px 10px 40px;
  line-height: 1;
  margin-bottom: 7px; }

.bootstrap-select.style-2 > .dropdown-toggle:after {
  display: none; }

.bootstrap-select.style-2 .dropdown-menu {
  margin-top: 0;
  border: 1px solid #e6ecf5;
  box-shadow: 0 0 34px 0 rgba(63, 66, 87, 0.1);
  overflow: visible !important; }

.bootstrap-select.style-2 .bs-searchbox {
  padding: 0; }

.glyphicon-ok::before {
  content: "\f00c";
  font-family: FontAwesome;
  color: #515365; }

.bootstrap-select.style-2 li.selected a {
  background-color: transparent;
  color: #515365; }

.bootstrap-select.style-2 .form-control {
  border: none;
  border-bottom: 1px solid #e6ecf5;
  border-radius: 0; }

.bootstrap-select.without-border.form-control {
  width: 170px;
  float: right;
  margin-top: 2px; }

.bootstrap-select.without-border .dropdown-toggle::after {
  border-top: 0.4em solid #888da8;
  border-right: 0.4em solid transparent;
  border-left: 0.4em solid transparent; }

.bootstrap-select.without-border > .dropdown-toggle {
  border: none;
  padding: 0;
  margin-bottom: 0;
  font-size: 9px; }

.bootstrap-select.without-border.btn-group .dropdown-toggle .filter-option {
  font-weight: 700;
  text-align: right;
  padding-right: 30px; }

.bootstrap-select.without-border .form-group {
  margin-bottom: 0; }

.daterangepicker {
  position: absolute;
  color: inherit;
  background-color: #fff;
  border-radius: 4px;
  width: 278px;
  padding: 4px;
  margin-top: 1px;
  top: 100px;
  left: 20px;
  /* Calendars */ }

.daterangepicker:before, .daterangepicker:after {
  position: absolute;
  display: inline-block;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: ''; }

.daterangepicker:before {
  top: -7px;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #ccc; }

.daterangepicker:after {
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent; }

.daterangepicker.opensleft:before {
  right: 9px; }

.daterangepicker.opensleft:after {
  right: 10px; }

.daterangepicker.openscenter:before {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto; }

.daterangepicker.openscenter:after {
  left: 0;
  right: 0;
  width: 0;
  margin-left: auto;
  margin-right: auto; }

.daterangepicker.opensright:before {
  left: 9px; }

.daterangepicker.opensright:after {
  left: 10px; }

.daterangepicker.dropup {
  margin-top: -5px; }

.daterangepicker.dropup:before {
  top: initial;
  bottom: -7px;
  border-bottom: initial;
  border-top: 7px solid #ccc; }

.daterangepicker.dropup:after {
  top: initial;
  bottom: -6px;
  border-bottom: initial;
  border-top: 6px solid #fff; }

.daterangepicker.dropdown-menu {
  max-width: none;
  z-index: 3001; }

.daterangepicker.single .ranges, .daterangepicker.single .calendar {
  float: none; }

.daterangepicker.show-calendar .calendar {
  display: block; }

.daterangepicker .calendar {
  display: none;
  max-width: 270px;
  margin: 4px; }

.daterangepicker .calendar.single .calendar-table {
  border: none; }

.daterangepicker .calendar th, .daterangepicker .calendar td {
  white-space: nowrap;
  text-align: center; }

.daterangepicker .calendar-table {
  border: 1px solid #fff;
  padding: 4px;
  border-radius: 4px;
  background-color: #fff; }

.daterangepicker table {
  width: 100%;
  margin: 0; }

.daterangepicker td, .daterangepicker th {
  text-align: center;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer; }

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background-color: #eee;
  border-color: transparent;
  color: inherit; }

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc; }

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  background-color: #fff;
  border-color: transparent;
  color: #999; }

.daterangepicker td.in-range {
  background-color: #ebf4f8;
  border-color: transparent;
  color: #000;
  border-radius: 0; }

.daterangepicker td.start-date {
  border-radius: 4px 0 0 4px; }

.daterangepicker td.end-date {
  border-radius: 0 4px 4px 0; }

.daterangepicker td.start-date.end-date {
  border-radius: 4px; }

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: transparent;
  color: #fff; }

.daterangepicker th.month {
  width: auto; }

.daterangepicker td.disabled, .daterangepicker option.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: line-through; }

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
  display: inline-block; }

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%; }

.daterangepicker select.yearselect {
  width: 40%; }

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin-bottom: 0; }

.daterangepicker .input-mini {
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #555;
  height: 30px;
  line-height: 30px;
  display: block;
  vertical-align: middle;
  margin: 0 0 5px 0;
  padding: 0 6px 0 28px;
  width: 100%; }

.daterangepicker .input-mini.active {
  border: 1px solid #08c;
  border-radius: 4px; }

.daterangepicker .daterangepicker_input {
  position: relative; }

.daterangepicker .daterangepicker_input i {
  position: absolute;
  left: 8px;
  top: 8px; }

.daterangepicker.rtl .input-mini {
  padding-right: 28px;
  padding-left: 6px; }

.daterangepicker.rtl .daterangepicker_input i {
  left: auto;
  right: 8px; }

.daterangepicker .calendar-time {
  text-align: center;
  margin: 5px auto;
  line-height: 30px;
  position: relative;
  padding-left: 28px; }

.daterangepicker .calendar-time select.disabled {
  color: #ccc;
  cursor: not-allowed; }

.ranges {
  font-size: 11px;
  float: none;
  margin: 4px;
  text-align: left; }

.ranges ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%; }

.ranges li {
  font-size: 13px;
  background-color: #f5f5f5;
  border: 1px solid #f5f5f5;
  border-radius: 4px;
  color: #08c;
  padding: 3px 12px;
  margin-bottom: 8px;
  cursor: pointer; }

.ranges li:hover {
  background-color: #08c;
  border: 1px solid #08c;
  color: #fff; }

.ranges li.active {
  background-color: #08c;
  border: 1px solid #08c;
  color: #fff; }

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto; }
  .daterangepicker .ranges ul {
    width: 160px; }
  .daterangepicker.single .ranges ul {
    width: 100%; }
  .daterangepicker.single .calendar.left {
    clear: none; }
  .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar {
    float: left; }
  .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar {
    float: right; }
  .daterangepicker.ltr {
    direction: ltr;
    text-align: left; }
  .daterangepicker.ltr .calendar.left {
    clear: left;
    margin-right: 0; }
  .daterangepicker.ltr .calendar.left .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .daterangepicker.ltr .calendar.right {
    margin-left: 0; }
  .daterangepicker.ltr .calendar.right .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  .daterangepicker.ltr .left .daterangepicker_input {
    padding-right: 12px; }
  .daterangepicker.ltr .calendar.left .calendar-table {
    padding-right: 12px; }
  .daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar {
    float: left; }
  .daterangepicker.rtl {
    direction: rtl;
    text-align: right; }
  .daterangepicker.rtl .calendar.left {
    clear: right;
    margin-left: 0; }
  .daterangepicker.rtl .calendar.left .calendar-table {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0; }
  .daterangepicker.rtl .calendar.right {
    margin-right: 0; }
  .daterangepicker.rtl .calendar.right .calendar-table {
    border-right: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; }
  .daterangepicker.rtl .left .daterangepicker_input {
    padding-left: 12px; }
  .daterangepicker.rtl .calendar.left .calendar-table {
    padding-left: 12px; }
  .daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar {
    text-align: right;
    float: right; } }

@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto; }
  .daterangepicker.ltr .ranges {
    float: left; }
  .daterangepicker.rtl .ranges {
    float: right; }
  .daterangepicker .calendar.left {
    clear: none !important; } }

/*Crumina styles for daterange*/
.daterangepicker .calendar .prev,
.daterangepicker .calendar .next {
  display: none; }

.daterangepicker_input .form-group {
  margin: 0; }

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  border: none;
  font-size: 13px;
  color: #515365; }

.daterangepicker th.month {
  padding: 15px 5px; }

.daterangepicker select.monthselect {
  margin-right: 10%;
  width: 50%; }

.daterangepicker .calendar th,
.daterangepicker td.off {
  font-size: 9px;
  color: #888da8; }

.daterangepicker .calendar td {
  color: #4b4e65;
  font-size: 11px;
  border-radius: 50%;
  display: table-cell;
  height: auto;
  width: auto; }

.daterangepicker td.active, .daterangepicker td.active:hover,
.daterangepicker td.start-date.end-date {
  background-color: #08ddc1;
  border-color: transparent;
  color: #fff;
  border-radius: 50%; }

.daterangepicker {
  width: 270px;
  border-color: #e6ecf5;
  box-shadow: 0 0 34px 0 rgba(63, 66, 87, 0.1); }

.daterangepicker.single.ltr .calendar {
  float: none;
  padding: 8px; }

.daterangepicker .calendar th,
.daterangepicker .calendar td {
  line-height: 30px;
  padding: 0 5px; }

/* perfect-scrollbar v0.7.0 */
.ps {
  -ms-touch-action: auto;
  touch-action: auto;
  overflow: hidden !important;
  -ms-overflow-style: none; }

@supports (-ms-overflow-style: none) {
  .ps {
    overflow: auto !important; } }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .ps {
    overflow: auto !important; } }

.ps.ps--active-x > .ps__scrollbar-x-rail,
.ps.ps--active-y > .ps__scrollbar-y-rail {
  display: block;
  background-color: transparent; }

.ps.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail {
  background-color: #eee;
  opacity: 0.9; }

.ps.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x {
  background-color: #999;
  height: 11px; }

.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail {
  background-color: #eee;
  opacity: 0.9; }

.ps.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y {
  background-color: #999;
  width: 11px; }

.ps > .ps__scrollbar-x-rail {
  display: none;
  position: absolute;
  /* please don't change 'position' */
  opacity: 0;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  transition: background-color .2s linear, opacity .2s linear;
  bottom: 0px;
  /* there must be 'bottom' for ps__scrollbar-x-rail */
  height: 15px; }

.ps > .ps__scrollbar-x-rail > .ps__scrollbar-x {
  position: absolute;
  /* please don't change 'position' */
  background-color: #aaa;
  border-radius: 6px;
  -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
  transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
  bottom: 2px;
  /* there must be 'bottom' for ps__scrollbar-x */
  height: 6px; }

.ps > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x, .ps > .ps__scrollbar-x-rail:active > .ps__scrollbar-x {
  height: 11px; }

.ps > .ps__scrollbar-y-rail {
  display: none;
  position: absolute;
  /* please don't change 'position' */
  opacity: 0;
  -webkit-transition: background-color .2s linear, opacity .2s linear;
  transition: background-color .2s linear, opacity .2s linear;
  right: 0;
  /* there must be 'right' for ps__scrollbar-y-rail */
  width: 7px; }

.ps > .ps__scrollbar-y-rail > .ps__scrollbar-y {
  position: absolute;
  /* please don't change 'position' */
  background-color: #aaa;
  border-radius: 6px;
  -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, -webkit-border-radius .2s ease-in-out;
  -webkit-transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
  transition: background-color .2s linear, height .2s linear, width .2s ease-in-out, border-radius .2s ease-in-out;
  right: 2px;
  /* there must be 'right' for ps__scrollbar-y */
  width: 6px; }

.ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail {
  background-color: #eee;
  opacity: 0.9; }

.ps:hover.ps--in-scrolling.ps--x > .ps__scrollbar-x-rail > .ps__scrollbar-x {
  background-color: #999;
  height: 11px; }

.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail {
  background-color: #eee;
  opacity: 0.9; }

.ps:hover.ps--in-scrolling.ps--y > .ps__scrollbar-y-rail > .ps__scrollbar-y {
  background-color: #999;
  width: 11px; }

.ps:hover > .ps__scrollbar-x-rail,
.ps:hover > .ps__scrollbar-y-rail {
  opacity: 0.6; }

.ps:hover > .ps__scrollbar-x-rail:hover {
  background-color: #eee;
  opacity: 0.9; }

.ps:hover > .ps__scrollbar-x-rail:hover > .ps__scrollbar-x {
  background-color: #999; }

.ps:hover > .ps__scrollbar-y-rail:hover {
  background-color: #eee;
  opacity: 0.9; }

.ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
  background-color: #999; }