/*
Stylus variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon_home_width;
}

The large array-like variables contain all information about a single icon
$icon_home = x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet = width height image $spritesheet_sprites;
*/

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  sprite($icon_email)
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/

/*
Stylus variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon_home_width;
}

The large array-like variables contain all information about a single icon
$icon_home = x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet = width height image $spritesheet_sprites;
*/

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  sprite($icon_email)
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/

/*
Stylus variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon_home_width;
}

The large array-like variables contain all information about a single icon
$icon_home = x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet = width height image $spritesheet_sprites;
*/

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  sprite($icon_email)
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/

/*
Stylus variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon_home_width;
}

The large array-like variables contain all information about a single icon
$icon_home = x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet = width height image $spritesheet_sprites;
*/

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  sprite($icon_email)
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/

/*
Stylus variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon_home_width;
}

The large array-like variables contain all information about a single icon
$icon_home = x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet = width height image $spritesheet_sprites;
*/

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  sprite($icon_email)
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/

/*
Stylus variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon_home_width;
}

The large array-like variables contain all information about a single icon
$icon_home = x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet = width height image $spritesheet_sprites;
*/

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  sprite($icon_email)
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/

/*
Stylus variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon_home_width;
}

The large array-like variables contain all information about a single icon
$icon_home = x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet = width height image $spritesheet_sprites;
*/

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  sprite($icon_email)
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/

/*
Stylus variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon_home_width;
}

The large array-like variables contain all information about a single icon
$icon_home = x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet = width height image $spritesheet_sprites;
*/

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  sprite($icon_email)
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/

/*
Stylus variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: $icon_home_width;
}

The large array-like variables contain all information about a single icon
$icon_home = x y offset_x offset_y width height total_width total_height image_path;

At the bottom of this section, we provide information about the spritesheet itself
$spritesheet = width height image $spritesheet_sprites;
*/

/*
The provided mixins are intended to be used with the array-like variables

.icon-home {
  spriteWidth($icon_home)
}

.icon-email {
  sprite($icon_email)
}

Example usage in HTML:

`display: block` sprite:
<div class="icon-home"></div>

To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:

// CSS
.icon {
  display: inline-block;
}

// HTML
<i class="icon icon-home"></i>
*/

/*
The `sprites` mixin generates identical output to the CSS template
  but can be overridden inside of Stylus

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

sprites($spritesheet_sprites);
*/

.icon-sidebar-1 {
    background-image: url("../images/sprites/sidebar-nav.png");
    background-position: -28px 0px;
    width: 20px;
    height: 20px;
}

.icon-sidebar-2 {
    background-image: url("../images/sprites/sidebar-nav.png");
    background-position: -27px -56px;
    width: 19px;
    height: 19px;
}

.icon-sidebar-3 {
    background-image: url("../images/sprites/sidebar-nav.png");
    background-position: -28px -28px;
    width: 20px;
    height: 20px;
}

.icon-sidebar-4 {
    background-image: url("../images/sprites/sidebar-nav.png");
    background-position: -81px 0px;
    width: 17px;
    height: 22px;
}

.main-sidebar {
    display: none;
    position: fixed;
    top: 87px !important;
    bottom: 0 !important;
    z-index: 1003 !important;
    background-color: #fff;
    color: #fff;
    padding-bottom: 60px;
}

[data-simplersidebar="mask"] {
    z-index: 1001 !important;
}

.main-sidebar-right {
    right: 0;
    text-align: right;
}

.main-sidebar-left {
    left: -1000px;
    text-align: left;
}

[data-simplersidebar="sbwrapper"] {
    padding: 1em;
}

.dynamic-right .main-navbar-content {
    float: right;
}

.dynamic-left .main-navbar-content {
    float: left;
}

.main-sidebar-wrapper {
    position: relative;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}

.sidebar-close {
    position: absolute;
    right: -41px;
    top: 27px;
    line-height: 1;
}

.sidebar-open-body .section-header-sidebar-btn {
    position: relative;
    z-index: 3;
    padding-left: 4px;
}

.sidebar-open-body .section-header-sidebar-btn [class~="icon"] {
    background-image: url("../images/static/icons-svg/sidebar-close.svg");
    width: 39px;
    height: 29px;
}

.sidebar-list {
    margin-top: 35px;
    margin-bottom: 35px;
    margin-left: 30px;
}

.sidebar-list ul > li {
    font-size: 16px;
}

.sidebar-list ul > li:not(:last-child) {
    margin-bottom: 27px;
}

.sidebar-list ul > li > a {
    color: #1a2c2e;
}

.sidebar-list ul > li > a:hover,
.sidebar-list ul > li > a:focus {
    color: #ffc64e;
}

.sidebar-list ul > li.t-lk {
    margin-left: -30px;
    margin-right: -30px;
}

.sidebar-list ul > li.t-lk a {
    background-color: #F2F2F2;
    display: block;
    padding: 9px 30px;
}

.sidebar-nav {
    background-color: #097f8a;
}

.sidebar-nav ul > li {
    float: left;
    width: 25%;
}

.sidebar-nav ul > li > a {
    position: relative;
    display: block;
    line-height: 39px;
    text-align: center;
}

.sidebar-nav ul > li:hover > a,
.sidebar-nav ul > li.active > a {
    background-color: #044f56;
    box-shadow: inset 0 2px 1px 0 rgba(0, 0, 2, 0.2);
}

.sidebar-nav ul > li:hover > a [class~="icon-sidebar-1"],
.sidebar-nav ul > li.active > a [class~="icon-sidebar-1"] {
    background-position: 0px 0px;
}

.sidebar-nav ul > li:hover > a [class~="icon-sidebar-2"],
.sidebar-nav ul > li.active > a [class~="icon-sidebar-2"] {
    background-position: 0px -56px;
}

.sidebar-nav ul > li:hover > a [class~="icon-sidebar-3"],
.sidebar-nav ul > li.active > a [class~="icon-sidebar-3"] {
    background-position: 0px -28px;
}

.sidebar-nav ul > li:hover > a [class~="icon-sidebar-4"],
.sidebar-nav ul > li.active > a [class~="icon-sidebar-4"] {
    background-position: -56px 0px;
}

.sidebar-type {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px 30px;
}

.sidebar-type .section-header-type ul {
    display: flex;
    justify-content: space-between;
}

.sidebar-type .section-header-type ul > li:not(:last-child) {
    margin-right: 5px;
}

.sidebar-phone {
    display: none;
    position: absolute;
    left: -20px;
    right: -20px;
    top: -5px;
    z-index: 2;
    background-color: #ffffff;
    font-weight: 500;
    color: #097F8A;
    text-align: center;
    padding: 10px 0 10px;
}

.sidebar-phone > * {
    display: block;
}

.sidebar-phone .phone {
    font-size: 22px;
    line-height: 1.1;
}

.sidebar-phone .desc {
    font-size: 12px;
}

body.sidebar-open-body {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

@media all and (max-width: 991px) {
    .main-sidebar {
        display: block;
    }
}

@media all and (max-width: 767px) {
    .sidebar-open-body .sidebar-phone {
        display: block;
    }
}

@media all and (max-width: 480px) {
    .main-sidebar {
        top: 77px !important;
    }
}

@media all and (min-width: 768px) {
    .sidebar-phone {
        display: none !important;
    }
}