$drawer-background: #FFFFFF;
$item-first: lighten($drawer-background, 10%);
$item-secondary: lighten($item-first, 10%);
$item-first-color: #F7F9FB;
$item-secondary-color: lighten($item-first-color, 5%);
$menu-hover: #E8E8E8;
$menu-color-hover: darken($menu-hover, 60%);
$menu-item-active: #FE9833;
$menu-item-active-color: #FFFFFF;
$drawer-width: 140px;

html {
  height: 100%;
  body {
    height: 100%;
    position: relative;
    &.h-100 {
      &.swal2-height-auto {
        height: 100% !important;
      }
    }
    aside, main {
      position: fixed;
      top: 0;
      height: 100%;
      overflow-x: hidden;
    }
    aside, main, nav.fixed-top, .card .fixed-top {
      transition-duration: .2s;
      animation-timing-function: ease-in-out;
    }
    #logo-container {
      background-color: #FFF
    }
    aside {
      
      .drawer-logo {
        height: 39px !important;
        margin: 8px 0px;
      }
      left: 0;
      width: $drawer-width;
      left: -$drawer-width;
      transition-property: left;
      background-color: $drawer-background;
      @include media-breakpoint-up(lg) {
        -webkit-box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.08);
        -moz-box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.08);
        box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.08);
      }
      z-index: 2;
      .scrollable::-webkit-scrollbar {
        width: 0px;
        background: transparent; /* make scrollbar transparent */
        display: none;
      }
      .scrollable {
        overflow-y: auto;
        overflow: -moz-scrollbars-none;
        -ms-overflow-style: none;
      }
      .list-group {
        .list-group-item {
          background-color: transparent;
          border-radius: 0px;
          padding: 9px 0px;
          cursor: pointer;
          &.main {
            cursor: default;
          }
          &.list-group-item-action {
            color: $item-first-color;
            background-color: $item-first;
            &.item-active {
              background-color: $menu-item-active;
              color: $menu-item-active-color;
            }
            &.nested {
              padding: 5px 0px;
              color: $item-secondary-color;
              background-color: $item-secondary;
              &.item-active {
                background-color: $menu-item-active;
                color: $menu-item-active-color;
              }
              &:hover, &:focus {
                background-color: $menu-hover;
                color: $menu-color-hover;
              }
            }
            &:not(.main) {
              &:hover, &:focus {
                background-color: $menu-hover;
                color: $menu-color-hover;
              }
            }
          }
        }
        .list-group-item {
          &::before {
            content: "";
            padding-left: 10px;
          }
          &.nested {
            &::before {
              content: "";
              padding-left: 30px;
            }
          }
        }
        .list-group-item {
          border: 0px;
          // border-top: 1px solid $gray-300;
        }
        .list-group-item:last-child {
          // border-bottom: 1px solid $gray-600;
        }
      }
      .list-unstyled {
        li {
          padding-top: 1rem;
          padding-bottom: 1rem;
          a {
            color: #999999;
            font-size: 80%;
            width: 100%;
            &:hover {
              text-decoration: none;
              color: #00208b;
            }
          }
          &.active {
            a {
              color: #0083c7;
              &::after {
                font-size: 120%;
                white-space: pre;
                content: "\a•";
              }
            }
          }
        }
      }
    }
    header {
      background-color: #00208b;
      .user-menu {
        right: 0;
        left: auto;
      }
      nav {
        &.navbar {
          background-color: #00208b;
          padding: 0rem;
          .drawer-toogle {
            margin-left: 1rem;
          }
          ul {
            &.nav {
              li {
                &.dropdown {
                  &.show{
                    background-color: #0083c7;
                  }
                }
                a {
                  &.first-level {
                    color: #E6E6E6;
                    padding:5px;
                    margin: 5px;
                  }
                }
                a:hover {
                  &.first-level {
                    color: #FFFFFF;
                  }
                }
                color: #E6E6E6;
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                text-align: center;
              }
              li:hover {
                color: #FFFFFF;
                background-color: #0083c7;
              }
            }
          }
        }
      }
    }
    .btn-group-toggle {
      .active {
        background-color: #11871F !important;
        color: #FFF !important;
        &:hover {
          background-color: #72B01D;
          color: #FFF !important;
        }
      }
    }
    main {
      overflow-y: auto;
      padding-top: 55px;
      background-color: $gray-200;
      background-color: #eff2f7;
      .main-container {
        padding: 1rem;
        position: relative;
        min-height: 100vh;
        .display-4 {
          // line-height: 0.4;
          small {
            font-size: 44%;
          }
        }
        #commands {
          .fixed {
            position: fixed;
            left: 0;
            right: 0;
            background-color: #FFFFFF;
            top: 56px;
            z-index: 9999;
            padding: 0.5rem 0.75rem;
            border-bottom: 1px solid #CCCCCC;
          }
        }
        #guue-commands {
          &.fixed {
            position: fixed;
            top: 80px;
            right: 0;
            z-index: 9999;
            padding: 0.5em 1em 0.5em 3.75em;
          }
        }
      }
      .card {
        &.fixed-top {
          top: 57px;
        }
      }
      #bottom {
        background-color: #FFFFFF;
        * {
          color: #333333;
        }
        -webkit-box-shadow: 0px -10px 15px -20px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px -10px 15px -20px rgba(0,0,0,0.75);
        box-shadow: 0px -10px 15px -20px rgba(0,0,0,0.75);
      }
      #main-tools {
        background-color: #00438B;
        position: fixed;
        z-index: 99999;
        right: 0;
        left: 0;
        max-height: 80vh;
        overflow-y: scroll;
        .list-group {
          margin-top: 5px;
          .list-group-item {
            /* *:not(.fa) {
              color: #FFFFFF !important;
            } */
            padding: 0.2rem 1rem;
            background-color: transparent !important;
            border: 1px solid rgba(255, 255, 255, 0.8);
            border-right: 0;
            border-left: 0;
            border-radius: 0;
            &:first-child {
              border-top: 0;
            }
            &:last-child {
              border-bottom: 0;
            }
            .bg-light,
            .bg-warning {
              color: #00438B !important;
              * {
                color: #00438B !important;
              }
            }
            * {
              &:hover {
                text-decoration: none;
                cursor: pointer;
              }
            }
            &.active,
            &:hover {
              background-color: #0083c7 !important;
            }
          }
        }
        .btn-circle {
            width: 30px;
            height: 30px;
            padding: 6px 0px;
            border-radius: 15px;
            text-align: center;
            font-size: 12px;
            line-height: 1.42857;
        }
        .btn-circle-sm {
          width: 20px;
          height: 20px;
          padding: 0px;
          border-radius: 15px;
          text-align: center;
          font-size: 12px;
          line-height: 1.05;
          cursor: pointer;
        }
      }
    }
    main, nav.fixed-top {
      right: 0;
      left: 0;
      transition-property: left, right;
      .drawer-toogle:hover {
        color: $gray-300;
      }
    }
    &.drawer-in {
      main, nav.fixed-top {
        left: $drawer-width;
        right: -$drawer-width;
      }
      main {
        .card {
          &.fixed-top {
            left: $drawer-width;
            right: -$drawer-width;
          }
        }
      }
      aside {
        left: 0px;
      }
    }
    @include media-breakpoint-up(lg) {
      main, nav.fixed-top {
        left: $drawer-width;
      }
      main {
        .main-container {
          #commands {
            .fixed {
            }
          }
        }
        #main-tools {
          left: $drawer-width;
        }
        .card {
          &.fixed-top {
            left: $drawer-width;
          }
        }
      }
      aside {
        left: 0;
      }
      &.drawer-out {
        main, nav.fixed-top {
          left: 0;
          right: 0;
        }
        main {
          #commands {
            .fixed {
              left: 0;
            }
          }
          #main-tools {
            left: 0;
          }
          .card {
            &.fixed-top {
              left: 0;
              right: 0;
            }
          }
        }
        aside {
          left: -$drawer-width;
        }
      }
    }
  }
}

table.table-condensed {
  &.dataTable {
    thead {
      .sorting,
      .sorting_asc,
      .sorting_desc,
      .sorting_asc_disabled,
      .sorting_desc_disabled {
        &:before,
        &:after {
          bottom: 0.5em !important;
        }
      }
    }
  }
  thead {
    tr {
      td {
        padding: 0.5rem !important;
        vertical-align: middle !important;
        &.fit-content {
          width:1px;
          white-space:nowrap;
          padding: 0.5rem 30px 0.5rem 0.5rem !important;
        }
      }
    }
  }
  tbody {
    tr {
      td {
        vertical-align: middle !important;
        padding: 0.2rem !important;
        &.fit-content {
          width:1px;
          white-space:nowrap;
          padding: 0.5rem 0.6rem !important;
        }
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  #guue-commands {
    &.fixed {
      padding: 1em !important;
      position: static !important;
      right: 0 !important;
      top: 0 !important;
      padding: auto;
    }
  }
}

@include media-breakpoint-down(xs) {
  .btn-block-m {
    display: block;
    width: 100%;
    margin-bottom: 0.5rem;
  }
}

@include media-breakpoint-up(lg) {
  #modal-helper {
    .modal-dialog {
      width: 990px;
      max-width: 990px !important;
      .modal-content {
        width: 990px;
        max-width: 990px !important;
      }
    }
  }
}

@include media-breakpoint-up(xl) {
  #modal-helper {
    .modal-dialog {
      width: 1140px;
      max-width: 1140px !important;
      .modal-content {
        width: 1140px;
        max-width: 1140px !important;
      }
    }
  }
}

#guue-sections {
  max-height: 70vh;
  overflow-y: auto;
  padding: 0;
  margin-left: 1em;
  margin-right: 1em;
  max-width: calc(100% - 2em);
}