// Bootstrap
$icon-font-path: "../fonts/";

@import "_tools";
@import "_udsvars";

// Own variables
$sidebar-icon-width: 24px;
$sidebar-icon-width-collapsed: 36px;

$sidebar-size: 225px;  // 225 px
$sidebar-size-collapsed: $sidebar-icon-width-collapsed + 2*$font-size-base; // 40px;
$sidebar-top: 50px;


$sidebar-switcher-size: 14px;
$sizebar-switcher-font-size: $sidebar-switcher-size - 2px;
$sidebar-switcher-pos: $sidebar-size - $sidebar-switcher-size;
$sidebar-switcher-pos-collapsed: $sidebar-size-collapsed - $sidebar-switcher-size;


$uds-panel-min-height: 500px;


// bower:scss
@import "bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
// endbower


@font-face {
  font-family: 'Droid Sans Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans Mono'), local('DroidSansMono'), url(#{$icon-font-path}/DroidSansMono.woff2) format('woff2');
}

// Fix for firefox for fieldsets
@-moz-document url-prefix() {
  fieldset {
    display: table-cell;
  }
}

body {
  font-family: 'Droid Sans Mono', sans-serif;
  background-color: $body-bg;
  margin-top: 50px;
}

#wrapper {
  padding-left: 0;
}

#page-wrapper {
  width: 100%;
  padding: 5px 15px;
}

/* collapsable && closeable pannels */

.chevron {
  &:before {
    content: "\f139";
  }

  &.collapsed:before {
    content: "\f13a";
  }
}

.widget-icon.fa-refresh {
  &:hover {
    animation: 2s linear 0s normal none infinite running fa-spin;
  }
}

.panel-icon {
  margin-left: 0.6em !important;
  cursor: pointer;
}

.table-icon {
  width: 1.2em;
  padding-bottom: 3px;
}

.info-img {
  width: 5em;
}

.navbar-img {
  width: 2em;
  margin-top: -8px;
}

.cursor-pointer {
  cursor: pointer !important;
}

#minimized {
  margin-top: 0.6em;
  margin-bottom: 0.3em;
}

/* modal dialogs & related*/

.modal-dialog {
  /* new custom width */
  width: 90%;
}

/*.modal-backdrop {
  background-color: gray;
}*/

.modal {
  overflow-y: auto;
}

.tab-pane {
  margin-top: 24px;
}

.tooltip {
  z-index: 2014;
}

/* Tables */

/* Logs */

.chart-big {
  display: block;
  height: 400px;
}

.chart-medium {
  display: block;
  height: 250px;
}

.chart-small {
  display: block;
  height: 100px;
}

/* End tables styling */
/* Charts */

.chart-content {
  width: 100%;
  height: 100%;
}

// Hides switcher on small devices, so menu displays correctly
.side-nav {
  padding-top: 0px;
  .switcher {
    visibility: hidden;
    width: 0px;
    height: 0px;
  }
  .icon {
    width: 24px;
    vertical-align: center;
    padding-bottom: 3px;
  }
}

/* Edit Below to Customize Widths > 768px */
@media (min-width: 768px) {
  /* Wrappers */

  #wrapper {
    padding-left: $sidebar-size;
    -webkit-transition: padding 0.3s; /* For Safari 3.1 to 6.0 */
    transition: padding 0.3s;

    &.full {
      padding-left: $sidebar-size-collapsed;
    }
  }

  #page-wrapper {
    padding: 15px 25px;
  }

  /* Side Nav */
  .side-nav {
    position: fixed;
    top: $sidebar-top;
    height: 100%;
    overflow-y: auto;
    border-radius: 0;
    border-color: $navbar-default-border;
    border-style: solid;
    border-width: 0 1px 0 0;
    background-color: $navbar-default-bg;
    -webkit-transition: width 0.3s; /* For Safari 3.1 to 6.0 */
    transition: width 0.3s;

    margin-left: -$sidebar-size-collapsed;
    padding-top: $sidebar-switcher-size;
    left: $sidebar-size-collapsed;
    width: $sidebar-size-collapsed;

    .icon {
      width: $sidebar-icon-width-collapsed;
      -webkit-transition: all 0.3s; /* For Safari 3.1 to 6.0 */
      transition: all 0.3s;

    }

    .menu-lnk {
      display: none;
      overflow-x: hidden;
    }

    > ul {
        // border-top: 1px solid $navbar-default-border;
      > li {
        width: $sidebar-size;
        overflow-x: hidden;
        // border-bottom: 1px solid $navbar-default-border;

        &:hover, &.active, &:focus {
          color: $brand-primary;
          background-color: darken($navbar-default-bg, 15%);
        }

        &.dropdown > ul.dropdown-menu {
          width: $sidebar-size;
          position: relative;
          margin: 0;
          padding: 0;
          border: none;
          border-radius: 0;
          background-color: transparent;
          box-shadow: none;
          -webkit-box-shadow: none;


          > li > a {
            color: inherit;
            padding: $font-size-base;

            &:hover, &.active, &:focus {
              color: #fff;
              background-color: #080808;
            }
          }
        }
      }
    }


    &.full {
      margin-left: -$sidebar-size;
      left: $sidebar-size;
      width: $sidebar-size;

      .icon {
        width: $sidebar-icon-width;
      }

      .menu-lnk {
        display: inline;
        opacity: 1.0;
        width: 100%;
      }

      > ul > li {
        // border-bottom: none;
        //border-bottom: none;
      }

    }

    /*&:hover {
      width: $sidebar-size;
    }


    > li {
      &.dropdown > ul.dropdown-menu {
        position: relative;
        min-width: $sidebar-size;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        -webkit-box-shadow: none;

        > li > a {
          color: #999999;
          padding: 15px 15px 15px 15px;

          &:hover, &.active, &:focus {
            color: #fff;
            background-color: #080808;
          }
        }
      }

      > a {
        border-bottom: 1px solid darken($body-bg, 50%);
        color: $text-color;
        display: block;
        font-size: 10px;
        min-height: 60px;
        padding-top: 12px;
        text-align: center;
        width: $sidebar-size-collapsed;
        > img {
          min-width: 32px;
        }

      }
      //> a {
      //  width: $sidebar-size;
      //}
    }*/
  }

  /* Bootstrap Default Overrides - Customized Dropdowns for the Side Nav */

  /*.navbar-inverse .navbar-nav > li > a {
    &:hover, &:focus {
      background-color: #080808;
    }
  }*/

  .modal-dialog {
    /* new custom width */
    width: 60%;
  }
}

// closeable
.closeable {
  &:hover {
    cursor: pointer;
    color: red;
  }
}

// Tag add
.tagadder {
  &:hover {
    cursor: pointer;
  }
}

span.tag {
  float: left;
  margin-bottom: 4px;
  margin-right: 4px;
  padding-bottom: 4px;
}

/* submenus */
.dropdown-submenu {
        position: relative;
        >.dropdown-menu {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px 6px;
                border-radius: 0 6px 6px 6px;
        }
        &:hover {
                >.dropdown-menu {
                        display: block;
                }
                >a {
                        &:after {
                                border-left-color: #ffffff;
                        }
                }
        }
        >a {
                &:after {
                        display: block;
                        content: " ";
                        float: right;
                        width: 0;
                        height: 0;
                        border-color: transparent;
                        border-style: solid;
                        border-width: 5px 0 5px 5px;
                        border-left-color: #cccccc;
                        margin-top: 5px;
                        margin-right: -10px;
                }
        }
}
.dropdown-submenu.pull-left {
        float: none;
        >.dropdown-menu {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;
        }
}


/* theme */

@import "_theme";
@import "_widgets";
@import "_buttons";
@import "_data-tables";
@import "_tables";