@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

@mixin transition($transition) {
  webkit-transition: #{$transition};
  -moz-transition: #{$transition};
  -ms-transition: #{$transition};
  -o-transition: #{$transition};
  transition: #{$transition};
}

@mixin border-radius($radius, $important: '') {
  -webkit-border-radius: $radius#{$important};
  -moz-border-radius: $radius#{$important};
  -ms-border-radius: $radius#{$important};
  -o-border-radius: $radius#{$important};
  border-radius: $radius#{$important};
}

// Placeholder text
@mixin placeholder($color: $input-color-placeholder) {
  // Firefox
  &::-moz-placeholder {
    color: $color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: $color; } // Safari and Chrome
}

$general-border-radius:				4px !default;
$sidebar-menu-head-font-size: 14px;
$sidebar-menu-link-font-size: 14px;
$sidebar-menu-link-icon-font-size: 16px;
$screen-md:                  992px !default;
$screen-md-min:              $screen-md !default;
$bg-color:                                                      		#364150 !default;
$brand-main-color:                                               		lighten(#1497d4, 1%) !default;
$page-content-solid-bg-color:                                           darken(#f1f4f7, 1%);
$sidebar-menu-devider-border-color:                             		darken(#3f4b5a, 1%) !default;

$sidebar-menu-link-font-color:                                  		#ffffff !default;
$sidebar-menu-link-font-color-on-hover:                         		$sidebar-menu-link-font-color !default;
$sidebar-menu-link-font-color-on-active:                        		#ffffff !default;

$sidebar-menu-link-icon-font-color:                             		#a6bddd !default;
$sidebar-menu-link-icon-font-color-on-hover:                        $sidebar-menu-link-icon-font-color !default;
$sidebar-menu-link-icon-font-color-on-active:                   		$sidebar-menu-link-font-color-on-active !default;

$sidebar-menu-arrow-color-on-active:                            		$sidebar-menu-link-font-color-on-active !default;
$sidebar-menu-arrow-color:                                      		$sidebar-menu-link-icon-font-color !default;
$sidebar-menu-link-bg-color-on-hover:                           		#2C3542 !default;
$sidebar-menu-arrow-color-on-hover:                                     $sidebar-menu-link-icon-font-color-on-hover !default;
$sidebar-menu-link-bg-color-on-active:                          		$brand-main-color;
$sidebar-collapsed-submenu-width-on-hover:								210px !default; // sub menu width displayed on hover in collapsed sidebar mode. default:210px
$sidebar-collapsed-width:   											45px  !default; // minimized/collapsed sidebar width. default:35px
$zindex-sidebar-fixed:     												10000 !default;
$zindex-sidebar-submenu:   												2000 !default;

// Sidebar search
$sidebar-search-bg-color:                                               darken($bg-color, 5%) !default;
$sidebar-search-bottom-border-color:                            		lighten($sidebar-menu-devider-border-color, 100%) !default;
$sidebar-search-full-border-color:                              		lighten($sidebar-menu-devider-border-color, 100%) !default;
$sidebar-search-input-font-color:                               		lighten($sidebar-menu-devider-border-color, 100%) !default;
$sidebar-search-input-placeholder-font-color:                   		lighten($sidebar-menu-devider-border-color, 100%) !default;

.page-sidebar,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover {

	/* Default sidebar menu */
	.page-sidebar-menu {
		/* 1st level links */
		:not(li) > li {
			display: block;
			margin: 0;
			padding: 0;
			border: 0px;

			&.sidebar-toggler-wrapper,
			&.sidebar-search-wrapper {
				border: 0 !important;
				@include clearfix();
			}

			&.start {
				> a {
					border-top-color: transparent !important;
				}
			}

			&.last {
				> a {
					border-bottom-color: transparent !important;
				}
			}

			> a {
				display: block;
				position: relative;
				margin: 0;
				border: 0px;
				padding: 10px 15px;
				text-decoration: none;
				font-size: $sidebar-menu-link-font-size;
				font-weight: 300;

				> i {
					font-size: $sidebar-menu-link-icon-font-size;
					margin-right: 5px;
					text-shadow:none;
          color: $sidebar-menu-link-icon-font-color;
				}

				> i.glyphicon {
					margin-left: 1px;
					margin-right: 4px;
				}

				> [class^="icon-"] {
					margin-left: 1px;
					margin-right: 4px;
				}

				.page-sidebar-fixed & {
					transition: all 0.2s ease;
				}

				.page-sidebar-reversed.page-sidebar-fixed & {
					transition: none;
				}

        border-top: 1px solid $sidebar-menu-devider-border-color;
        color: $sidebar-menu-link-font-color;

        > i[class^="icon-"],
        > i[class*="icon-"] {
            color: lighten($sidebar-menu-link-icon-font-color, 5%);
        }

				> .arrow {
					&:before {
						top: 8px;
					}
				}

        > .arrow {
            &:before,
            &.open:before {
                color: $sidebar-menu-arrow-color;
            }
        }
			}

			&.heading {
				padding: 15px 15px 15px 15px;
				> h3 {
					margin: 0;
					padding: 0;
					font-size: $sidebar-menu-head-font-size;
					font-weight: 300;
          color: darken($sidebar-menu-link-font-color, 23%);
				}
			}

			&.heading + li > a {
				border-top: 0;
			}

			&.open {
				> a {
					font-size: $sidebar-menu-link-font-size;
				}
			}

			&.active {
				> a {
					border: none;
					text-shadow:none;
					font-size: $sidebar-menu-link-font-size;

					> .selected {
						display: block;
						background-image: none; /* will be set in a theme css file*/
						float: right;
						position: absolute;
						right:0px;
						top:8px;

						background: none;
						width: 0;
						height: 0;
						border-top: 12px solid transparent;
						border-bottom: 12px solid transparent;
						border-right: 12px solid #ffffff;

						.page-sidebar-reversed & {
							right: auto;
							left:0;
							border-right: 0;
							border-left:8px solid #ffffff;
						}

						.page-container-bg-solid & {
							border-color: transparent $page-content-solid-bg-color transparent transparent;
						}

						.page-container-bg-solid.page-sidebar-reversed & {
							border-color: transparent transparent transparent $page-content-solid-bg-color;
						}
					}
				}
			}

      &:hover,
      &.open {
          > a {
              background: $sidebar-menu-link-bg-color-on-hover;
              color: $sidebar-menu-link-font-color-on-hover;

              > i {
                  color: $sidebar-menu-link-icon-font-color-on-hover;
              }

              > .arrow {
                  &:before,
                  &.open:before {
                      color: $sidebar-menu-arrow-color-on-hover;
                  }
              }
          }
      }

      &.active,
      &.active.open {
          > a {
              background: $sidebar-menu-link-bg-color-on-active;
              border-top-color: transparent;
              color: $sidebar-menu-link-font-color-on-active;

              &:hover {
                  background: $sidebar-menu-link-bg-color-on-active;
              }

              > i {
                  color: $sidebar-menu-link-icon-font-color-on-active;
              }

              > .arrow {
                  &:before,
                  &.open:before {
                      color: $sidebar-menu-arrow-color-on-active;
                  }
              }
          }
      }

      &.active + li {
          > a {
              border-top-color: transparent;
          }
      }

      &.active.open + li {
          > a {
              border-top-color: $sidebar-menu-devider-border-color;
          }
      }

      &:last-child {
          > a {
              border-bottom: 1px solid transparent !important;
          }
      }
		}
  }

  .sidebar-search {
    .input-group {
        border-bottom: 1px solid $sidebar-search-bottom-border-color;

        .form-control {
            background-color: $bg-color;
            color: $sidebar-search-input-font-color;
            @include placeholder($sidebar-search-input-placeholder-font-color);
        }

        .input-group-btn {
            .btn {
                > i {
                    color: $sidebar-search-input-font-color;
                }
            }
        }
    }

    &.sidebar-search-bordered {
        .input-group {
            border: 1px solid $sidebar-search-full-border-color;
        }
    }

    .page-sidebar-closed &.open {
        .input-group {
            background-color: $bg-color;
        }

        .remove {
            > i {
                color: $sidebar-search-input-font-color;
            }
        }
    }

    &.sidebar-search-solid {

        .page-sidebar-closed & {
            .input-group {
                background: none;
            }
        }

        .input-group {
            border: 1px solid $sidebar-search-bg-color;
            background: $sidebar-search-bg-color;

            .form-control {
                background: $sidebar-search-bg-color;
            }
        }

        // &.open .input-group {
        //     border: 1px solid $bg-color;
        //     background: $bg-color;

        //     .form-control {
        //         background: $bg-color;
        //     }
        // }
    }
  }
}

@media (min-width: $screen-md-min) { /* 992px */

	/* Sidebar Closed */
	.page-sidebar-closed {
		.page-sidebar {
			.page-sidebar-menu.page-sidebar-menu-closed {
				:not(li) > li {

					/* hide opened sub menu */
					&.open > .sub-menu,
					> .sub-menu {
						display: none !important;
					}

					&:hover {
						width: ($sidebar-collapsed-submenu-width-on-hover + $sidebar-collapsed-width + 1) !important;
						position: relative !important;
						z-index: $zindex-sidebar-fixed;
						display: block !important;

						> a {
							@include border-radius(0 $general-border-radius 0 0);

							> i {
								margin-right: 10px;
							}

							> .title {
								display: inline !important;
								padding-left: 15px;
							}

							> .badge {
								display: block !important;
							}

							> .selected {
								display: none;
							}
						}

						&.heading {
							width: $sidebar-collapsed-width !important;
							box-shadow: none;
						}

						> .sub-menu {
							width: $sidebar-collapsed-submenu-width-on-hover;
							position: absolute;
							z-index: $zindex-sidebar-submenu;
							left: ($sidebar-collapsed-width + 1px);
							margin-top: 0;
							top: 100%;
							display: block !important;

							@include border-radius(0 0 $general-border-radius $general-border-radius);

							> li {
								> a {
									padding-left: 15px !important;
								}

								> .sub-menu {
									> li {
										> a {
											padding-left: 30px !important;
										}

										> .sub-menu {
											> li {
												> a {
													padding-left: 45px !important;
												}
											}
										}
									}
								}
							}
						}
					}

					&.heading {
						> h3 {
							display: none;
						}
					}

					&.sidebar-toggler-wrapper {
						.sidebar-toggler {
							margin-right: 8px;
						}

						&:hover {
							width: $sidebar-collapsed-width !important;
						}
					}

					&.sidebar-search-wrapper {
						&:hover {
							width: $sidebar-collapsed-width !important;
						}
					}

					> a {
						padding-left: 11px;

						.selected {
							right: -3px !important;
						}

						> .badge,
						> .title,
						> .arrow {
							display: none !important;
						}
					}
				}
			}

			.page-sidebar-menu.page-sidebar-menu-light.page-sidebar-menu-closed {
				:not(li) > li {
					> a {
						padding-right: 11px;
						padding-left: 7px;
					}
				}
			}
		}

		&.page-sidebar-reversed {
			.page-sidebar {
				.page-sidebar-menu.page-sidebar-menu-closed {
					/* sidebar */
					:not(li) > li {
						> .sub-menu {
							left:auto;
							right: ($sidebar-collapsed-width + 1px);
						}

						&:hover {
							margin-left: -($sidebar-collapsed-submenu-width-on-hover + 1px);

							> a {
								@include border-radius($general-border-radius 0 0 0);

								> .title {
									padding-left: 0;
									padding-right: 15px;
								}

								> i {
									margin-right: 0;
									margin-left: 2px;
								}
							}
						}

						&.sidebar-search-wrapper,
						&.sidebar-toggler-wrapper {
							&:hover {
								margin-left: 0;
							}
						}
					}
				}

				.page-sidebar-menu.page-sidebar-menu-light.page-sidebar-menu-closed {
					:not(li) > li {
						> a {
							padding-right: 7px;
							padding-left: 11px;
						}
					}
				}
			}
		}
	}

}

.sidebar-search {
  margin-top: 25px !important;
}

.menu-filter-box {
  border: none !important;
  background-color: transparent !important;
  a, a:visited, a:focus {
    color: #FFFFFF !important;
  }
  span, input {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #eef1f5 !important;
    border: none !important;
    font-size: 12px !important;
    border-top: solid 1px rgba(255, 255, 255, 0.3) !important;
    border-bottom: solid 1px rgba(255, 255, 255, 0.3) !important;
  }
  input, input:focus {
    box-shadow: none !important;
  }
  span {
    border-right: solid 1px rgba(255, 255, 255, 0.3) !important;
  }
  input {
    border-left: solid 1px rgba(255, 255, 255, 0.3) !important;
  }
}

.page-sidebar-menu-closed .menu-filter-box {
  span {
    visibility: hidden;
  }
}