.smart-dropdown-menu {
  display: inline-block;
  position: relative;
  top: 0;
  left: 10px;
  height: 100%; }
  .smart-dropdown-menu.show > .sdm-list {
    width: auto;
    opacity: 1;
    height: auto;
    visibility: visible; }
  .smart-dropdown-menu.animating > .sdm-list {
    width: auto; }
  .smart-dropdown-menu .sdm-list {
    box-sizing: border-box;
    list-style: none;
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 50px 0 0;
    padding: 0;
    display: block;
    z-index: 10;
    color: #cccccc;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden; }
    .smart-dropdown-menu .sdm-list:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      padding: 50px 10px 10px;
      position: absolute;
      top: -50px;
      left: -10px; }
    .smart-dropdown-menu .sdm-list li {
      white-space: nowrap;
      position: static;
      line-height: 32px;
      background-color: #444444; }
      .smart-dropdown-menu .sdm-list li a {
        display: block;
        position: relative;
        color: #cccccc;
        text-decoration: none;
        padding: 5px 10px 5px 10px;
        cursor: pointer; }
      .smart-dropdown-menu .sdm-list li:hover > a, .smart-dropdown-menu .sdm-list li:active > a {
        color: #ffffff; }
      .smart-dropdown-menu .sdm-list li:before, .smart-dropdown-menu .sdm-list li:after {
        content: "";
        display: none;
        position: absolute;
        width: 50%;
        left: 50%;
        z-index: 10; }
      .smart-dropdown-menu .sdm-list li:before {
        top: 0;
        transform-origin: bottom left; }
      .smart-dropdown-menu .sdm-list li:after {
        top: auto;
        transform-origin: top left; }
      .smart-dropdown-menu .sdm-list li.show:before, .smart-dropdown-menu .sdm-list li.show:after {
        display: block; }
  .smart-dropdown-menu li > .sdm-list {
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    min-height: 100%;
    margin: 0;
    top: 0px;
    left: 100%;
    background-color: #444444;
    z-index: 20; }
    .smart-dropdown-menu li > .sdm-list > li {
      position: relative; }
  .smart-dropdown-menu li.show > .sdm-list {
    display: block;
    visibility: visible;
    opacity: 1; }

.smart-dropdown-menu-button {
  box-sizing: border-box;
  display: block;
  width: 35px;
  height: 100%;
  position: relative;
  cursor: pointer;
  z-index: 20;
  padding: 0 5px; }
  .smart-dropdown-menu-button span {
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 4px;
    background-color: #f0f0f0;
    border-radius: 4px;
    position: relative;
    top: 50%;
    margin-top: -2px; }
    .smart-dropdown-menu-button span:before, .smart-dropdown-menu-button span:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #f0f0f0;
      border-radius: 4px; }
    .smart-dropdown-menu-button span:before {
      top: -8px; }
    .smart-dropdown-menu-button span:after {
      top: 8px; }

.smart-dropdown-menu.light-theme .sdm-list {
  color: #565656; }
  .smart-dropdown-menu.light-theme .sdm-list li {
    background-color: #fcfcfc; }
    .smart-dropdown-menu.light-theme .sdm-list li a {
      color: #565656; }
    .smart-dropdown-menu.light-theme .sdm-list li:hover > a, .smart-dropdown-menu.light-theme .sdm-list li:active > a {
      color: #333333; }

.smart-dropdown-menu.light-theme li > .sdm-list {
  background-color: #fcfcfc; }
  .smart-dropdown-menu.light-theme li > .sdm-list > li {
    position: relative; }

.smart-dropdown-menu.light-theme .smart-dropdown-menu-button span, .smart-dropdown-menu.light-theme .smart-dropdown-menu-button span:before, .smart-dropdown-menu.light-theme .smart-dropdown-menu-button span:after {
  background-color: #565656; }