.search-query,
.navbar-form .search-query {
  border-radius: $border-radius;
  line-height: $line-height-computed;
}

/***********************************/
/**            UTILS              **/
/***********************************/

@include thumb('.thumb-lg', 60px);
@include thumb('.thumb', 48px);
@include thumb('.thumb-sm', 34px);
@include thumb('.thumb-xs', 28px);

.thumb-xs,
.thumb-sm,
.thumb-lg,
.thumb {
  position: relative;
  display: inline-block;
  text-align: center;

  img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
  }

  .status {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border: 0.15em solid $white;
    border-radius: 50%;

    &.status-bottom {
      top: auto;
      left: auto;
      bottom: 0;
      right: 0;
    }
  }
}

.text-ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thin-scroll {
  &::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }
  &::-webkit-scrollbar:hover {
    background-color: #e9e9e9;
    border: none;
  }
  &::-webkit-scrollbar-thumb {
    border: none;
    background-color: rgba(0, 0, 0, 0.2);
    @include box-shadow(inset 1px 1px 0 rgba(0, 0, 0, 0.1));
  }
  &::-webkit-scrollbar-thumb:hover {
    background-color: $gray-light;
  }
}

// Style Classes
// ----------------------------

$width-variants: (
  50: 50px,
  100: 100px,
  150: 150px,
  200: 200px,
);

@include property-variants('.width', 'width', $width-variants);

$height-variants: (
  50: 50px,
  100: 100px,
  150: 150px,
  200: 200px,
  250: 250px,
);

@include property-variants('.height', 'height', $height-variants);
@include property-variants('.max-height', 'max-height', $height-variants);

.rotate-45 {
  @include rotate(45deg);
}

.rotate-135 {
  @include rotate(135deg);
}

.rotate-225 {
  @include rotate(225deg);
}

.rotate-315 {
  @include rotate(315deg);
}

/***********************************/
/**          SIDEBAR             **/
/**********************************/

.sidebar {
  position: absolute;
  @media (min-height: 940px) {
    position: fixed;
  }
  width: 160px;
  padding: 10px 0;
  top: 0;
  color: $sidebar-color;
  z-index: 1;
  margin: $sidebar-mt 0 0 25px;
  font-weight: 300;

  .settings {
    margin-top: 10px;
    text-align: center;

    .btn-auto {
      display: none;
    }
  }

  .panel {
    background: none;
  }

  &.collapse {
    display: block;
    visibility: visible;
  }
}

.side-nav {
  margin: 0;

  li {
    list-style: none;

    a:hover,
    a:focus {
      background: $sidebar-item-active-bg;
    }

    a {
      color: inherit;
      @include transition(background-color 0.2s);
      text-decoration: none;
      display: block;
      padding: 10px 20px;
      border-radius: $border-radius-large;

      .fa-angle-down {
        width: auto;
        float: right;
        margin-right: -8px;
        opacity: 1;
        @include transition-transform(0.3s ease-in-out);
      }

      &.collapsed .fa-angle-down {
        @include rotate(90deg);
      }

      &[data-toggle='collapse'] {
        &:before {
          display: inline-block;
          font-family: FontAwesome;
          content: '\f107';
          float: right;
          margin-right: -8px;
          position: relative;
          top: 1px;
          @include transition(transform 0.3s ease-in-out);
        }
        &.collapsed:before {
          transform: rotate(90deg);
        }
      }
    }
  }

  & li.active > a {
    font-weight: 700;
  }

  .panel-collapse {
    //second level menu
    li a {
      padding: 4px 20px;

      padding-left: 50px;

      &:hover,
      &:focus {
        background: $sidebar-item-active-bg;
      }

      i[class*='fa'] {
        float: none;
        font-size: inherit;
      }
    }

    .panel-collapse {
      //third level
      .panel-collapse > li a {
        //fourth level
        padding-left: 70px;
      }

      > li a {
        padding-left: 60px;
      }
    }
  }

  .panel {
    margin: 0;
    border: none;
    border-radius: 0;
  }
}

.sidebar-labels {
  list-style: none;
  padding: 10px 20px;
  > li {
    > a {
      color: rgba($sidebar-color, 0.8);
      text-decoration: none;
      font-weight: normal;

      &:hover {
        color: $sidebar-color;
      }

      .circle,
      .circle-o {
        position: relative;
        top: -2px;
        font-size: 9px;
        height: 12px;
        width: 12px;
        line-height: 12px;
      }

      .fa-circle {
        font-size: 11px;
        vertical-align: 1px;
        margin-left: 4px;
        margin-right: 8px;
      }

      .circle-o {
        top: 1px;
        left: 1px;
      }
    }

    + li {
      margin-top: $line-height-computed/2;
    }
  }

  @media (max-width: $screen-xs-max) {
    display: none;
  }
}

.sidebar-alerts {
  .alert {
    margin-bottom: 0;
    padding: $line-height-computed/2 12px $line-height-computed/2 20px;

    .close {
      font-size: 16px;
      text-shadow: none;
      opacity: 1;
      color: rgba($sidebar-color, 0.9);
    }
  }

  @media (max-width: $screen-xs-max) {
    display: none;
  }
}

.sidebar-nav-title {
  margin: 35px 0 5px 20px;
  font-weight: $font-weight-thin;

  .action-link {
    color: rgba($sidebar-color, 0.85);
    float: right;
    margin-right: 12px;
    margin-top: -1px;

    .fa,
    .glyphicon {
      font-size: 9px;
    }
  }

  @media (max-width: $screen-xs-max) {
    display: none;
  }
}

.sidebar-on-right {
  .sidebar {
    right: 0;
    margin: $sidebar-mt 25px 0 0;
  }

  .wrap {
    margin-left: 0;
    margin-right: $wrap-margin;
  }

  .logo {
    right: 67px;
    left: auto;
  }
}

.sidebar-hidden {
  .sidebar,
  .logo {
    display: none;
  }

  .wrap {
    margin-left: 0;
    margin-right: 0;
  }
}

/*main content*/
.wrap {
  margin-left: $wrap-margin;
}

/***********************************/
/**          WIDGET               **/
/**********************************/

.widget {
  border-radius: $border-radius;
  @include box-sizing(content-box);
  padding: $widget-padding;
  color: $widget-color;
  background: $widget-bg;
  margin-bottom: $widget-mb;
  position: relative;

  //widget sizes
  &.normal {
    height: 220px;
  }

  &.large {
    height: 315px;

    .body {
      height: 280px;
    }
  }

  &.xlarge {
    height: 415px;

    .body {
      height: 380px;
    }
  }

  &.tiny {
    height: 188px;
  }

  &.tiny-x2 {
    height: 426px;
  }

  &.transparent {
    background: transparent;
    @include box-shadow(none);
  }

  & > header {
    position: relative;
    background: none;
    color: $widget-header-color;

    h1,
    h2,
    h3,
    h4,
    h5 {
      margin: 0;
      line-height: 20px;
      font-weight: 600;
      color: inherit;

      small {
        text-transform: lowercase;
        color: $widget-header-smalls-color;
      }
    }

    h4 {
      font-size: $font-size-larger;
    }
  }

  .body {
    margin-top: 10px;
  }

  & > footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 15px 0 0;
  }

  .actions {
    position: absolute;
    right: 0;
    top: 0;
    a {
      text-decoration: none;
    }
  }

  .widget-table-overflow {
    margin: 0 (-$widget-padding-x) (-$widget-padding-y);
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;

    .table > thead > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > th,
    .table > tbody > tr > td,
    .table > tfoot > tr > th,
    .table > tfoot > tr > td {
      &:first-child {
        padding-left: $widget-padding-x;
      }

      &:last-child {
        padding-right: $widget-padding-x;
      }
    }
  }
}

.widget-controls {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  font-size: $font-size-small;
  word-spacing: 1px;

  &.left {
    left: 0;
    right: auto;
  }

  > a,
  > span {
    padding: 1px 4px;
    border-radius: 4px;
    color: $widget-controls-color;
    @include transition(color 0.15s ease-in-out);

    > .fa {
      vertical-align: middle;
    }

    > .glyphicon {
      vertical-align: -1px;
    }
  }

  > a:hover {
    color: $widget-controls-hover-color;
  }

  .fa-refresh {
    position: relative;
    top: -1px;
  }
}

/***********************************/
/**          HEADER               **/
/**********************************/

.page-header {
  border: none;
  margin: 15px 2.5641% 0;
  padding: 0;
  position: relative;

  border-radius: $border-radius;

  .navbar {
    min-height: 40px;
    border: none;
  }

  .navbar .nav li.dropdown.open > .dropdown-toggle,
  .navbar .nav li.dropdown.active > .dropdown-toggle,
  .navbar .nav li.dropdown.open.active > .dropdown-toggle {
    background-color: transparent;
    color: $text-transparent;
    &:hover,
    &:focus {
      color: $white;
    }
  }

  .navbar .nav > li > a:focus,
  .navbar .nav > li > a:hover,
  .navbar .nav > .active > a,
  .navbar .nav > .active > a:hover,
  .navbar .nav > .active > a:focus {
    color: $white;
  }

  .nav > li {
    position: relative;
    background: none;
    float: left;

    & > a {
      color: $header-link-color;
      width: 40px;
      padding: 0;
      font-size: $font-size-base * 1.5;
      outline: 0;
      background: none;
      text-align: center;
      vertical-align: middle;
      line-height: 36px;
      text-shadow: none;

      &:hover {
        color: $white;
      }

      .glyphicon {
        vertical-align: middle;
      }
    }

    .count {
      position: absolute;
      bottom: 2px;
      right: 2px;
      font-size: $font-size-index;
      font-weight: normal;
      background: $header-notification-count;
      color: rgba(white, 0.9);
      line-height: 1em;
      padding: 2px 4px;
      border-radius: 10px;
    }

    &.divider {
      display: block;
      height: 38px;
      width: 1px;
      margin: 0 20px;
      background: linear-gradient(rgba($text-transparent, 0), $text-transparent, rgba($gray, 0));
    }
  }

  .search-query {
    color: $widget-color;
    border: none;
    background: $header-search-query-bg-image 5px 5px no-repeat transparentize($text-transparent, 0.1);
    padding-left: 26px;
    @include placeholder($header-search-query-placeholder-color);
    @include transition(width 0.2s);
    width: 200px;

    &:focus {
      width: 240px;
      @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
    }
  }

  .navbar-form {
    margin: 5px 15px 0 0;
    padding: 0;
    border: none;
    @include box-shadow(none);
  }

  .navbar-nav {
    margin: 0;
  }

  // Menu position and menu carets
  .navbar .nav > li > .dropdown-menu {
    &:after {
      content: '';
      display: inline-block;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid $popover-bg;
      position: absolute;
      top: -6px;
      left: 10px;
    }
  }

  // Right aligned menus need alt position
  .navbar .pull-right > li > .dropdown-menu,
  .navbar .nav > li > .dropdown-menu.pull-right {
    left: auto;
    right: 0;
    &:before {
      left: auto;
      right: 12px;
    }
    &:after {
      left: auto;
      right: 13px;
    }
    .dropdown-menu {
      left: auto;
      right: 100%;
      margin-left: 0;
      margin-right: -1px;
      border-radius: 6px 0 6px 6px;
    }
  }
}

.page-title {
  color: $page-title-color;
  font-weight: 300;
  line-height: 1;
  margin: 11px 0 $line-height-computed;

  small {
    color: rgba($page-title-color, 0.7);
  }
}

.notifications {
  margin: 6px 20px 6px -40px;
  @include transition(margin-top 0.2s ease);

  .alert {
    background: transparentize($text-transparent, 0.1);
    border: none;
    font-size: $font-size-small;
    line-height: $line-height-computed + 1;
    margin-bottom: 0;
    padding: 3px 9px;
    color: $widget-color;
    text-shadow: none;
    border-radius: 10px;

    a {
      color: $widget-color;
      font-weight: bold;
    }
  }
}

/***********************************/
/**          MESSAGES            **/
/**********************************/

.messages {
  background: $header-dropdown-bg;
  @include box-shadow($header-dropdown-shadow);
  border-radius: $border-radius !important;
  color: $header-dropdown-primary-color;
}

.navbar .nav > li > .messages {
  &:before {
    border-bottom: none;
  }
  &:after {
    border-bottom-color: $popover-bg;
  }

  > li > a {
    color: $header-dropdown-primary-color;
    padding: 8px 10px;
    @include clearfix();

    &:hover,
    &:focus {
      background-color: $header-dropdown-item-hover;
    }
  }

  .see-all {
    padding: 5px 10px;
  }
}

.message {
  img {
    float: left;
    width: 40px;
  }

  .details {
    margin-left: 50px;
  }

  .text {
    font-size: $font-size-small;
    color: $header-dropdown-secondary-color;
  }
}

/***********************************/
/**          SUPPORT            **/
/**********************************/

.support {
  background: $header-dropdown-bg;
  @include box-shadow($header-dropdown-shadow);
  border-radius: $border-radius !important;
  color: $header-dropdown-primary-color;
}

.navbar .nav > li > .support {
  &:before {
    border-bottom: none;
  }
  &:after {
    border-bottom-color: $popover-bg;
  }

  > li > a {
    color: $header-dropdown-primary-color;
    padding: 5px 10px;

    &:hover,
    &:focus {
      background-color: $header-dropdown-item-hover;
    }
  }

  .see-all {
    padding: 5px 10px;
  }
}

.support-ticket {
  .picture {
    float: left;
    text-align: center;
  }

  .details {
    margin-left: 30px;
    font-size: $font-size-small;
  }
}

/***********************************/
/**          SETTINGS             **/
/**********************************/

.settings-popover {
  background: $header-dropdown-bg;
  @include box-shadow($header-dropdown-shadow);
  border-radius: $border-radius !important;
  color: $header-dropdown-primary-color;
  width: 122px;
  font-size: $font-size-small;
  text-align: center;

  //override js-set variables
  left: -40px !important;
  top: 30px !important;

  &.bottom .arrow {
    border-bottom-color: transparent;
    top: -13px;
    margin-left: 0;
    left: 44% !important;
    right: 4px;
    &:after {
      border-bottom-color: $popover-bg;
      border-width: 6px;
    }
  }

  .btn-group {
    margin-top: 0;
  }

  .btn-sm {
    padding: 0 7px;
  }
}

.setting {
  font-weight: normal;
}

.setting + .setting {
  margin-top: 5px;
}

/***********************************/
/**          ACCOUNT             **/
/**********************************/

.account {
  width: 180px;
  background: $header-dropdown-bg;
  @include box-shadow($header-dropdown-shadow);
  border-radius: $border-radius !important;
  color: $header-dropdown-primary-color;
}

.navbar .nav > li > .account {
  &:before {
    border-bottom: none;
  }
  &:after {
    border-bottom-color: $popover-bg;
  }
}

.account > li > a {
  color: $header-dropdown-primary-color;

  &:hover,
  &:focus {
    background-color: $header-dropdown-item-hover;
    color: $header-dropdown-primary-color;
  }
}

.account-picture {
  padding: 5px 10px;
  font-weight: normal;
  img {
    width: 50px;
    margin-right: 5px;
  }
}

.account > li > a {
  padding: 7px 10px;
}

/***********************************/
/**          FORMS                **/
/**********************************/

.section {
  font-size: $font-size-larger;
  color: $text-muted;
  vertical-align: middle;
  line-height: 30px;
  padding: 10px 0 0;

  small {
    font-size: $font-size-small;
    color: $text-muted;
    font-weight: bold;
  }
}

.form-control {
  &.input-transparent {
    border: none;
    color: $input-transparent-color;
    background-color: $widget-bg;
    @include placeholder($input-transparent-placeholder-color);

    &:focus {
      color: $input-transparent-color;
      @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2));
    }

    &[disabled],
    &[readonly],
    fieldset[disabled] & {
      background-color: lighten($widget-bg, 10%);
    }
  }
}

.select-block-level {
  width: 100%;
}

// FORM ACTIONS
// ------------

.form-actions {
  padding: ($line-height-computed - 1) 20px $line-height-computed;
  margin-top: $line-height-computed;
  background-color: $bg-addition;
  @include clearfix(); // Adding clearfix to allow for .pull-right button containers
}

.form-wizard {
  .progress {
    margin-bottom: 10px;
  }
}

.wizard-navigation {
  margin-bottom: 5px;

  a {
    color: $widget-color;
  }
}

.pager .disabled button {
  @extend .btn.disabled;
}

.tab-header {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: $font-size-larger;
  color: $widget-header-color;
}

/***********************************/
/**      SLIMSCROLL OVERRIDE      **/
/**********************************/

.loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  .spinner {
    position: absolute;
    top: 50%;
    width: 100%; //ie fix
    margin-top: -10px;
    font-size: 20px;
    text-align: center;
  }
}

/***********************/
/*        Loader       */
/***********************/

.loader-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 70px;
  bottom: 0;
  text-align: center;

  @media (min-width: 1049px) {
    margin-left: $wrap-margin;
    .sidebar-on-right & {
      margin-right: $wrap-margin;
      margin-left: 0;
    }
  }

  @media (min-width: 768px) and (max-width: 1048px) {
    margin-left: 62px;
    .sidebar-on-right & {
      margin-right: 62px;
      margin-left: 0;
    }
  }

  .sidebar-hidden & {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  opacity: 1;
  @include transition(opacity 0.2s ease-out);
  &.hiding {
    opacity: 0;
  }

  .fa {
    position: absolute;
    top: 50%;
    line-height: 30px;
    margin-top: -85px;
    font-size: 18px;
    vertical-align: middle;
  }
}

@media (min-width: $screen-sm-min) {
  .sidebar-hidden .sidebar {
    display: none;
  }
}

@media (max-width: $screen-xs-max) {
  .sidebar.nav-collapse,
  .sidebar.nav-collapse.collapse {
    overflow: hidden;
    height: 0;
  }

  .sidebar.nav-collapse.collapse.in {
    height: auto;
  }

  body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .page-title {
    margin-top: 6px;
  }

  .sidebar,
  .sidebar-on-right .sidebar {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    margin: 90px 5%;
    width: 90%;
    padding: 0;

    .side-nav {
      margin: 10px 0;
    }
  }

  .sidebar + .wrap,
  .sidebar-on-right .sidebar + .wrap {
    margin-left: 0;
    margin-right: 0;
  }

  .nv-controlsWrap {
    display: none;
  }

  .logo,
  .sidebar-on-right .logo,
  .sidebar-hidden .logo {
    display: block;
    left: 5%;
    right: auto;
    padding-right: 5px;
    top: 20px;
  }

  .widget-404-search,
  .widget-404 {
    width: 402px;
  }

  .widget-404 {
    padding: 0;
    .body {
      margin-top: 0;
    }
  }

  .navbar .nav > li > .dropdown-menu.messages,
  .navbar .nav > li > .dropdown-menu.support {
    margin-right: -68px;

    &:after {
      right: 85px;
    }
  }

  .notifications {
    position: absolute;
    right: 0;
    top: 46px;
    margin: 0;

    @include transition(top 0.3s ease);
  }

  .mailbox {
    .folder-title {
      float: none;
    }
    .form-search {
      margin-top: $line-height-computed / 2;
      label {
        display: block;
      }

      .input-search {
        width: 100%;
        height: 30px;
        @include box-sizing(border-box);
        &:hover {
          width: 100%;
        }
      }
    }
  }

  .mailbox-content {
    margin-top: 0;
  }

  .client-details {
    text-align: left;
  }

  .landing {
    .logo {
      width: auto;

      small {
        display: none;
      }
    }

    .features {
      + .features {
        margin-top: 0;
      }
    }

    .feature {
      margin-bottom: 20px;
    }
  }
}

@media (max-width: $screen-xs-min) {
  .sidebar,
  .sidebar-on-right .sidebar {
    margin: 90px 2.5641%;
    width: 94.8718%;
  }

  body {
    padding-left: 0;
    padding-right: 0;
  }

  .login-widget,
  .registration-widget {
    width: 260px;
  }

  .widget-404-search,
  .widget-404 {
    width: 260px;
  }

  .widget-404 {
    h1 {
      font-size: 80px;
      line-height: 80px;
    }

    h3 {
      font-size: $font-size-large;
      line-height: $line-height-computed + 2;
    }
  }

  .navbar .nav > li > .dropdown-menu.messages {
    margin-right: -112px;

    &:after {
      right: 129px;
    }
  }

  .page-header .navbar-form {
    margin: 10px 0 0;
    width: 100%;
    overflow: hidden;
    height: 0;
    @include transition(height 0.3s ease);
  }

  .page-header .search-query {
    @include input-block-level();
    &:focus {
      width: 100%;
    }
  }

  .visible-phone-landscape {
    display: block !important;
  }

  .hidden-phone-landscape {
    display: none !important;
  }
}

/***********************************/
/* custom widgets classes (email widget, charts, etc). This file can be removed. */
/***********************************/

/***********************************/
/**          EVENTS               **/
/**********************************/

.external-event {
  margin: 15px 0;
  padding: 5px 10px;
  color: #fff;
  cursor: pointer;
  border-radius: $border-radius;
}

.per-page-selector label {
  vertical-align: middle;
  line-height: 26px;
}

/***********************************/
/**          CHARTS               **/
/**********************************/

.large .pie-chart {
  height: 212px;
}

.xlarge .pie-chart {
  height: 298px;
}

.pie-chart {
  position: relative;

  .total {
    text-align: center;
    position: absolute;
    left: 0;
    top: 50%;
  }

  .visits {
    font-weight: $font-weight-base;
    color: $widget-header-color;
    font-size: $font-size-large;
  }
}

.pie-chart-footer {
  .controls {
    margin-top: 16px;
    width: 100%;
  }

  .control {
    @include box-sizing(content-box);
    background: $bg-addition;
    text-align: center;
    font-weight: normal;
    padding: 3px 2%;
    color: $widget-header-color;
    width: 20.625%;
    cursor: pointer;
    @include user-select(none);

    margin-left: 0.5%;

    float: left;

    &:first-child {
      border-bottom-left-radius: $border-radius;
      margin-left: 0;
    }

    &:last-child {
      border-bottom-right-radius: $border-radius;
    }

    &.disabled {
      border-top: 3px solid transparent !important;
    }

    .key {
      font-size: $font-size-small;
      font-weight: normal;
      margin: 0;
    }

    .value {
      font-size: $font-size-large;
      font-weight: bold;
      margin-bottom: 5px;
    }
  }
}

.visits-chart {
  height: 200px;
}

.visits-info {
  margin: $widget-padding-y (-$widget-padding-x) (-$widget-padding-y);
  padding-top: 18px;
  padding-bottom: 3px;
  border: none;
  text-align: center;

  .key {
    color: $widget-header-color;
  }

  .value {
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: $font-size-large;
  }
}

/***********************************/
/**          LOGIN                **/
/**********************************/

.login-widget,
.registration-widget {
  width: 350px;
  padding-bottom: 0;

  header {
    margin: 15px 0 25px 0;
  }

  .form-control {
    font-size: $font-size-base;
  }

  .input-group-addon {
    padding: 8px 7px;
    i {
      &,
      &:before,
      &:after {
        width: 20px;
        margin: 0;
      }
    }
  }

  .form-actions {
    margin: 0 (-$widget-padding-x);
    padding: 20px 15px 0 15px;

    .small-circle {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.2);

      i {
        position: relative;
        left: 1px;
      }
    }
    .forgot {
      display: block;
      text-align: center;
      color: $widget-header-color;
      padding: 15px 0;
    }
  }

  footer {
    margin: 0 (-$widget-padding-x);
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
    overflow: hidden;
    position: static;
  }

  .facebook-login {
    @include box-sizing(content-box);
    height: 30px;
    background: $blue;
    text-align: center;
    padding-top: 10px;

    a {
      color: $white;
      display: block;
      text-shadow: none;
      text-decoration: none;
    }
  }
}

.widget-padding-md {
  padding: 20px;
}

/* Font */
.jstree-default-context {
  font-family: 'Nanum Gothic';
  font-size: 12px;
  color: #f8f8f8;
}

.widgetheader {
  border-radius: 3px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  padding: 5px 5px 1px 5px;
  color: #f8f8f8;
  margin-bottom: 5px;
  position: relative;
}

#topicon {
  width: 36px;
  height: 35px;
  position: fixed;
  right: 1%;
  bottom: 15px;
  z-index: 200;
  transition: 0.3s;
  cursor: pointer;
  opacity: 0;
  border-radius: 50%;
  overflow: hidden;
  padding-left: -1px;
  animation: doongdoong 1.3s linear infinite;
}

@keyframes doongdoong {
  0% {
    bottom: 15px;
  }
  50% {
    bottom: 10px;
  }
  100% {
    bottom: 15px;
  }
}

.darkBack {
  background: rgba(51, 51, 51, 0.4);
  border: 1px solid rgba(51, 51, 51, 0.425);
}

.ajax-data {
  color: #a4c6ff;
}

/*****************/
/** jNotify CSS **/
/*****************/
#jNotify {
  position: absolute !important;
  -webkit-transition: background-color 0.4s !important;
  -o-transition: background-color 0.4s !important;
  transition: background-color 0.4s !important;
  border-radius: 5px !important;
  border-color: transparent !important;
  background-color: rgba(52, 52, 52, 0.425) !important;
  margin-bottom: 1em !important;
  color: #f8f8f8 !important;
  font-weight: 500 !important;

  background: #d8e6fc url('../info.png') no-repeat 15px center;
  padding: 10px;
  padding-left: 50px;
  margin: 15px;
  z-index: 99999;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

#jNotify a {
  color: #35517c !important;
  text-decoration: none;
}

/******************/
/** jSuccess CSS **/
/******************/
#jSuccess {
  position: absolute !important;
  -webkit-transition: background-color 0.4s !important;
  -o-transition: background-color 0.4s !important;
  transition: background-color 0.4s !important;
  border-radius: 5px !important;
  border-color: transparent !important;
  background-color: rgba(52, 52, 52, 0.925) !important;
  color: #f8f8f8 !important;
  font-size: 15px;
  font-weight: 500 !important;

  background: #e6efc2 url('../success.png') no-repeat 15px center;
  padding: 10px 10px 10px 50px;
  margin: 15px;
  margin-bottom: 1em !important;
  z-index: 99999;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

#jSuccess a {
  color: #264409 !important;
  text-decoration: none;
}

/****************/
/** jError CSS **/
/****************/
#jError {
  position: absolute !important;
  -webkit-transition: background-color 0.4s !important;
  -o-transition: background-color 0.4s !important;
  transition: background-color 0.4s !important;
  border-radius: 5px !important;
  border-color: transparent !important;
  background-color: rgba(52, 52, 52, 0.925) !important;

  color: #f8f8f8 !important;
  font-size: 15px;
  font-weight: 500 !important;

  background: #fbe3e4 url('../error.png') no-repeat 15px center;
  padding: 10px 10px 10px 50px;
  margin: 15px;
  margin-bottom: 1em !important;
  z-index: 99999;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
}

#jError a {
  color: #8a1f11 !important;
  text-decoration: none;
}

/** OVERLAY **/
#jOverlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99998;
}

.mailbox-content .form-email-compose .control-group {
  margin-bottom: 10px;
}

.fileupload-buttonbar .btn,
.fileupload-buttonbar .toggle {
  margin-bottom: 5px;
  background: rgba(51, 51, 51, 0.4);
  border-color: transparent;
  color: #fff;
  text-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  -o-transition: background-color 0.2s;
  transition: background-color 0.2s;
}

.fileinput-button {
  position: relative;
  overflow: hidden;
  float: left;
  margin-right: 4px;
  color: #fff;
  text-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #c5c5c5;
  border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
  padding: 2px 10px;
  font-size: 11.05px;
  line-height: 1.9;
  border-radius: 0;
  display: inline-block;
  margin-bottom: 0;
  font-weight: 300;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 4px 12px;
  font-size: 13px;
  line-height: 20px;
  border-radius: 1px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  transform: translate(-300px, 0) scale(4);
  font-size: 23px;
  direction: ltr;
  cursor: pointer;
}

.fileupload-loading {
  position: absolute;
  left: 50%;
  width: 128px;
  height: 128px;
  display: none;
}

.dropzone {
  border: 1px dashed #eee;
  margin-top: 10px;
  font-size: 13px;
  color: #eee;
  line-height: 100px;
  vertical-align: middle;
}

.control-label {
  float: left;
  width: 160px;
  padding-top: 5px;
  text-align: right;
}

.sidebar {
  position: absolute;
  width: 180px !important;
  padding: 10px 0;
  top: 0;
  color: #ffffff;
  z-index: 1;
  margin: 80px 0 0 25px;
  font-weight: 300;
}

.large.tooltip-inner {
  max-width: 350px;
  width: 350px;
}

/* 그라디언트 보더 */
.gradient_left_border {
  border-left: 1px dashed transparent;
  border-image: linear-gradient(0turn, rgb(0 0 0 / 0%), #979797, rgb(0 0 0 / 0%));
  border-image-slice: 1;
}

.gradient_right_border {
  border-right: 1px dashed transparent;
  border-image: linear-gradient(0turn, rgb(0 0 0 / 0%), #979797, rgb(0 0 0 / 0%));
  border-image-slice: 1;
}

.gradient_bottom_border {
  border-bottom: 1px dashed transparent;
  border-image: linear-gradient(0.25turn, rgb(0 0 0 / 0%), #979797, rgb(0 0 0 / 0%));
  border-image-slice: 1;
}

.gradient_middle_border {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(0.25turn, rgb(0 0 0 / 0%), #666666, rgb(0 0 0 / 0%));
  border-image-slice: 1;
}

.search-input {
  width: 100%;
  background: rgba(51, 51, 51, 0.4) !important;
  border: 1px solid rgba(51, 51, 51, 0.425) !important;
}

.ghostCircle.show {
  display: block;
}

table thead tr th {
  text-align: center;
}

table thead tr th,
table tbody tr td {
  max-width: 450px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
}

table tbody tr td {
  border-bottom: 1px solid rgba(68, 68, 68, 0.7);
  box-sizing: border-box;
}

table.dataTable tbody tr td:nth-child(odd) {
  background-color: rgba(51, 51, 51, 0.425);
}

table tbody tr > td.edit-group {
  padding: 0;
  opacity: 0;
}

table.dataTable.display.DTFC_Cloned tbody tr.odd {
  background-color: transparent;
}

table {
  width: 100% !important;
  overflow: hidden;
  border-top: 1px dashed rgba(51, 51, 51, 0.3);
}

.dataTables_scrollBody::-webkit-scrollbar {
  height: 10px;
}

.dataTables_scrollBody:hover::-webkit-scrollbar-track {
  background-color: #414141;
}

.dataTables_scrollBody:hover::-webkit-scrollbar-thumb {
  background-color: #784a3d;
}

.dataTables_scrollBody::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.dataTables_scrollBody::-webkit-scrollbar-thumb {
  border-radius: 5px;
}

.notifications .alert a {
  color: #f8f8f8;
  font-weight: 700;
  margin-left: 5px;
}

.icon-container {
  margin-left: 5px;
  position: relative;
  display: inline-block;
}

.icon-container:hover .tooltip-text {
  visibility: visible;
}

.alert-created {
  width: max-content;
  background-size:
    15px 2px,
    15px 2px,
    2px 15px,
    2px 15px;
  padding: 1px;
  animation: border-dance 7s infinite linear;
  border-radius: 10px;
}

@keyframes border-dance {
  0% {
    background-position:
      0 0,
      100% 100%,
      0 100%,
      100% 0;
  }
  100% {
    background-position:
      100% 0,
      0 100%,
      0 0,
      100% 100%;
  }
}

.form-control[readonly] {
  background-color: rgba(51, 51, 51, 0.4);
}

.no-data {
  color: #808080;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background: rgba(51, 51, 51, 0.4);
  border: 1px solid rgba(51, 51, 51, 0.425);
  opacity: 1;
}

.text-overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * 상단 검색
*/
.navbar-form .search-query,
.page-header .search-query {
  color: #f8f8f8;
  border: none;
  background: url(../img/search-white.png) 5px 5px no-repeat rgba(51, 51, 51, 0.4);
  padding-left: 26px;
  -webkit-transition: width 0.2s;
  -o-transition: width 0.2s;
  transition: width 0.2s;
  width: 200px;
}
.navbar-form .search-query:focus,
.page-header .search-query:focus {
  width: 240px;
}

#nav-search-button {
  display: inline-block;
  color: rgba(51, 51, 51, 0.5);
  width: 40px;
  padding: 0;
  font-size: 19.5px;
  outline: 0;
  background: none;
  text-align: center;
  vertical-align: middle;
  line-height: 36px;
  text-shadow: none;
}

#nav-search-button.highlight,
#nav-search-button.highlight a {
  background: rgba(51, 51, 51, 0.5);
  color: #b8b8b8;
  border-radius: 3px;
  font-size: 17px;
  width: 30px;
  line-height: 30px;
}

.tg-dialog,
.tg-dialog .tg-arrow {
  fill: #f8f8f8;
  background: rgba(51, 51, 51, 0.4) !important;
}