/*
 * Bracket Plus v1.0.0 (https://themepixels.me/bracketplus)
 * Copyright 2017-2018 ThemePixels
 * Licensed under ThemeForest License
 */

 .br-header {
   height: $br-header-height;
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   z-index: 1030;
   background-color: $br-header-bg;
   box-shadow: 0 1px 4px 0px rgba(#000, 0.16);
   display: flex;
   align-items: center;
   justify-content: space-between;
   @include transition($transition-base);

   &::before {
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     left: -4px;
     width: 3px;
     background-color: #fff;
     z-index: 1040;
   }

   @include media-breakpoint-up(lg) {
     left: $br-sideleft-width;
   }
 }

 .br-header-left {
   display: flex;

   .form-control {
     border: 0;
     border-radius: 0;
     padding: 0 20px;

     &:focus { box-shadow: none; }
   }

   .input-group {
     border-right: 1px solid $input-border-color;
     align-items: center;
   }

   .input-group-btn {
     .btn {
       background-color: #fff;
       border-radius: 0;
       border: 0;
       color: $gray-600;
       padding-left: 20px;
       padding-right: 20px;
       height: 100%;
       line-height: 1;

       &:focus,
       &:active {
         color: $gray-800;
         box-shadow: none !important;
         background-color: #fff;
       }
     }
   }
 }

 .br-header-right {
   display: flex;
   align-items: center;

   a {
     color: $gray-600;
     &:hover,
     &:focus { color: $gray-800; }
   }

   @media (max-width: 479px) {
     .dropdown {
       &:first-child {
         .dropdown-menu { transform: translateX(145px) !important; }
       }

       &:nth-child(2) {
         .dropdown-menu { transform: translateX(113px) !important; }
       }

       &:last-child {
         .dropdown-menu { transform: translateX(49px) !important; }
       }
     }
   }

   .dropdown {
     .dropdown-menu {
       position: relative;
       border-top: 0;
       margin-top: 1px;
       box-shadow: 0 1px 4px 0px rgba(#000, 0.16);
       @include border-top-radius(0);

       left: auto !important;
       right: -1px !important;
       top: 55px !important;
       transform: none !important;
       will-change: unset !important;

       &::before {
         content: '';
         position: absolute;
         top: -4px;
         left: -2px;
         right: 0;
         height: 4px;
         background-color: $br-header-bg;
         z-index: 1040;
       }
     }

     // profile dropdown
     &:last-child {
       .dropdown-menu {
         padding: 10px 20px 25px;
         width: 250px;
       }
     }
   }

   .dropdown-footer {
     padding-top: 10px;
     padding-bottom: 10px;
     text-align: center;
     border-top: 1px solid $input-border-color;

     a {
       font-size: 12px;
       i { margin-right: 5px; }
     }
   }
 }

 .nav-link-profile {
   position: relative;
   color: $gray-600;
   @include transition($transition-base);

   img {
     opacity: .85;
     @include transition($transition-base);
   }

   .square-10 {
     right: 15px;
     bottom: 10px;
     position: absolute;
     @include border-radius(100%);
     border: 2px solid #fff;
   }

   &:hover,
   &:focus {
     color: $gray-700;
     img { opacity: 1; }
   }
 }

 .logged-name {
   display: inline-block;
   font-size: 13px;
   margin-right: 5px;
 }

 .logged-fullname {
   margin-top: 15px;
   margin-bottom: 5px;
   color: $gray-800;

   + p {
     font-size: 12px;
     color: $gray-600;
   }
 }

 .profile-earning-label {
   display: block;
   margin-bottom: 5px;
   font-size: 11px;
   letter-spacing: 0.5px;
   text-transform: uppercase;
   color: theme-color('info');
   font-weight: 500;
 }

 .profile-earning-amount {
   margin-bottom: 0;
   color: $gray-800;
   font-family: $font-family-lato;
   font-weight: 700;
 }

 .profile-earning-text {
   font-size: 11px;
   color: $gray-500;
 }

 .dropdown-menu-header {
   padding: 0;
   width: 300px;
 }

 .dropdown-menu-label {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 10px 20px;
   border-bottom: 1px solid $gray-200;

   label {
     font-size: 12px;
     color: theme-color('info');
     text-transform: uppercase;
     font-weight: 600;
     letter-spacing: 1px;
     margin-bottom: 0;
   }

   a { font-size: 11px; }
 }

 .user-profile-nav {
   margin: 0;
   font-size: 13px;

   a {
     display: block;
     padding: 7px 10px;
     @include border-radius(2px);
     @include transition($transition-base);

     &:hover,
     &:focus {
       background-color: $gray-300;
     }
   }

   .icon {
     display: inline-block;
     width: 20px;
     line-height: 0;
     text-align: center;
     font-size: 20px;
     position: relative;
     color: theme-color('info');
     top: 2px;
     margin-right: 5px;
   }

   .ion-ios-folder,
   .ion-power {
     font-size: 18px;
   }
 }

 .media-list-link {
   display: block;
   @include transition($transition-base);

   &.read { background-color: $gray-100; }

   &:hover,
   &:focus { background-color: $gray-200; }

   .media {
     padding: 15px 20px;

     img {
       width: 40px;
       @include border-radius(100%);
     }
   }

   .media-body {
     margin-left: 15px;

     p {
       font-size: 12px;
       margin-bottom: 0;
     }

     > div {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 5px;

       p {
         margin-bottom: 0;
         font-weight: 500;
         color: $gray-800;
         font-size: 14px;
       }

       span {
         font-size: 11px;
         color: $gray-500;
       }
     }
   }

   .noti-text {
     color: $gray-700;
     strong {
       color: $gray-800;
       font-weight: 500;
     }

     + span { font-size: 12px; }
   }

   + .media-list-link { margin-top: 1px; }
 }

 .navicon-left {
   width: $br-header-height;
   height: $br-header-height;
   border-right: 1px solid $input-border-color;
   display: flex;
   align-items: center;
   justify-content: center;

   a {
     color: $gray-600;
     font-size: 20px;
     @include transition($transition-base);

     &:hover,
     &:focus { color: $gray-800; }
   }
 }

 .navicon-right {
   display: flex;
   width: $br-header-height;
   height: $br-header-height;
   border-left: 1px solid $input-border-color;
   align-items: center;
   justify-content: center;

   a {
     color: $gray-600;
     font-size: 24px;

     &:hover,
     &:focus { color: $gray-800; }
   }
 }

.br-sideleft {
  position: fixed;
  top: $br-header-height;
  left: -$br-sideleft-width;
  bottom: 0;
  z-index: 100;
  width: $br-sideleft-width;
  background-color: $br-primary;
  padding-left: 10px;
  padding-right: 10px;
  @include transition($transition-base);

  @include media-breakpoint-up(lg) {
    left: 0;
  }
}

.br-logo {
  position: fixed;
  top: 0;
  left: -$br-sideleft-width;
  width: $br-sideleft-width;
  height: $br-header-height;
  background-color: #fff;
  font-size: 24px;
  font-weight: 700;
  padding: 0 15px;
  display: flex;
  align-items: center;
  z-index: 1030;
  @include transition($transition-base);

  @include media-breakpoint-up(lg) {
    left: 0;
    border-right: 1px solid $input-border-color;
  }

  > a {
    color: $gray-900;
    letter-spacing: -0.5px;

    i {
      font-style: normal;
      font-weight: 500;
      color: $cyan;
    }

    span {
      font-weight: 300;
      color: $teal;
      display: inline-block;
      @include transition($transition-base);

      &:first-child { padding-right: 2px; }
      &:last-child { padding-left: 2px; }
    }

    &:hover,
    &:focus {
      text-decoration: none;

      span {
        &:first-child { transform: translateX(-5px); }
        &:last-child { transform: translateX(5px); }
      }
    }
  }
}

.sidebar-label {
   display: block;
   text-transform: uppercase;
   font-size: 10px;
   font-family: $font-family-roboto;
   color: #fff;
   letter-spacing: 1px;
   white-space: nowrap;
}

.br-sideleft-menu {
  padding: 0;
  margin: 0;
  @include transition($transition-base);
}

.br-menu-item {
  display: block;
  position: relative;
}

.br-menu-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 11px;
  height: 40px;
  letter-spacing: 0.2px;
  color: $gray-500;
  font-size: 14px;
  position: relative;
  @include border-radius(2px);
  @include transition($transition-base);

  &.with-sub {
    &::after {
      content: '\f123';
      font-family: 'Ionicons';
      font-weight: 400;
      position: absolute;
      font-size: 9px;
      top: calc(50% - 6px);
      right: 10px;
      color: $gray-600;
      @include transition($transition-base);
    }
  }

  &:hover,
  &:focus {
    color: #fff;
    background-color: darken($br-primary, 3%);
  }

  &:focus,
  &:active { outline: none; }

  &.active {
    @include gradient-x($teal, $cyan);
    color: #fff;
    &::after { color: #fff; }
    + .br-menu-sub { display: block; }
  }

  &.show-sub {
    background-color: darken($br-primary, 5%);
    color: #fff;
  }
}

.menu-item-icon {
  line-height: 0;
  width: 18px;
  @include transition($transition-base);
}

.menu-item-label {
  display: block;
  white-space: nowrap;
  margin-left: 8px;
  margin-right: auto;
}

.menu-item-label,
.menu-item-arrow {
  @include transition($transition-base);
}

.br-menu-sub {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 21px;
  background-color: darken($br-primary, 2%);
  display: none;
  @include border-bottom-radius(3px);

  .sub-item {
    display: block;
    position: relative;
  }

  .sub-link {
    display: block;
    font-size: 13px;
    color: $gray-500;
    padding: 7px 0 7px 17px;
    white-space: nowrap;
    position: relative;
    @include transition($transition-base);

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: -3px;
      margin-top: -.5px;
      width: 5px;
      height: 1px;
      background-color: #fff;
      opacity: .5;
      @include transition($transition-base);
    }

    &:hover,
    &:focus {
      color: theme-color('info');

      &::before {
        width: 20px;
        left: -11px;
        opacity: 1;
        background-color: theme-color('info');
      }
    }

    &.active {
      color: $cyan;

      &::before {
        width: 20px;
        left: -11px;
        opacity: 1;
        background-color: theme-color('info');
      }
    }
  }
}

.info-list {
  .info-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;

    + .info-list-item { margin-top: 20px; }
  }

  .info-list-label {
    font-size: 10px;
    font-family: $font-family-roboto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(#fff,.3);
    margin-bottom: 2px;
    white-space: nowrap;
  }

  .info-list-amount {
    font-family: $font-family-lato;
    color: #fff;
    font-weight: 400;
    margin-bottom: 0;
  }
}

// collapsed menu
.collapsed-menu {
  @include media-breakpoint-up(lg) {
    .br-logo { left: -$br-sideleft-width; }
    .br-header { left: 0; }
    .br-sideleft { width: $br-header-height; }
    .br-mainpanel { margin-left: $br-header-height; }
    .br-menu-link {
      &.with-sub::after { opacity: 0; }
      &.active + .br-menu-sub { display: none; }
    }
    .br-sideleft .sidebar-label { visibility: hidden; }
    .info-list { display: none; }

    .br-contentpanel {
      margin-left: $br-header-height + $br-subleft-width;
    }
  }
}

.expand-menu {
  @include media-breakpoint-up(lg) {
    .br-sideleft .sidebar-label { visibility: visible; }
    .br-sideleft { width: $br-sideleft-width; }
    .br-menu-link.with-sub::after { opacity: 1; }
    .info-list { display: block; }
  }
}

// rightpanel, hidden by default
.br-sideright {
  position: fixed;
  top: 0;
  right: -$br-sideright-width;
  bottom: 0;
  z-index: 2000;
  width: $br-sideright-width;
  background-color: $br-primary;
  @include transition($transition-base);

  .tab-pane {
    // hiding scrollbar
    .ps__scrollbar-y-rail { visibility: hidden; }
  }
}

// show leftpanel
.show-left {
  @include media-breakpoint-down(md) {
    .br-header,
    .br-mainpanel { transform: translateX($br-sideleft-width); }

    .br-logo,
    .br-sideleft {
      left: 0;
      z-index: 2000;
    }

    .menu-item-label {
      display: block !important;
      opacity: 1 !important;
    }

    .br-contentpanel {
      transform: translateX($br-sideleft-width);
    }
  }
}

// show rightpanel
.show-right {
  .br-logo,
  .br-sideleft,
  .br-header,
  .br-mainpanel,
  .br-subleft,
  .br-contentpanel { transform: translateX(-$br-sideright-width); }
  .br-sideright { right: 0; }
}

.show-left,
.show-right {
  overflow: hidden;

  &::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background-color: rgba($br-primary,.25);
  }
}

.show-left::before {
  @include media-breakpoint-up(lg) {
    display: none;
  }
}

.show-left.show-right::before { display: block; }

//sidebar tabs
.sidebar-tabs {
  height: $br-header-height;
  background-color: darken($br-primary, 3%);
  border-bottom: 0;

  .nav-item {
    margin-bottom: 0;
    width: $br-header-height + 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .nav-link {
    color: $gray-600;
    border: 0;
    padding: 13px 24px;
    @include border-radius(0);
    width: 100%;

    &.active {
      background-color: $br-primary;
      color: $teal;
    }
  }
}

.contact-list-link {
  font-size: 13px;
  color: rgba(#fff,.6);
  display: block;
  @include border-radius(2px);
  @include transition($transition-base);

  img {
    width: 40px;
    @include border-radius(100%);
  }

  &.new { background-color: darken($br-primary, 1.5%); }

  .d-flex {
     align-items: center;
     justify-content: flex-start;
     padding: 10px 15px;
  }

  .contact-person {
    margin-left: 10px;
    margin-right: auto;

    p { margin-bottom: 0; }
    span {
      font-size: 12px;
      opacity: .5;
      display: inline-block;
    }
  }

  &:hover,
  &:focus {
    color: #fff;
    background-color: darken($br-primary, 3%);
  }

  + .contact-list-link { margin-top: 1px; }
}

.contact-status-indicator {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 2px solid $br-primary;
  @include border-radius(50px);
}

.media-file-list {
  padding: 0 25px 20px;
  margin-top: 20px;

  .media-body {
    color: rgba(#fff, .8);
    margin-left: 10px;
    margin-right: auto;
  }
}

.br-time {
  color: #fff;
  font-family: $font-family-lato;
  margin-bottom: 5px;
}

.br-date {
  color: rgba(#fff, .3);
  font-weight: 300;
}

.sidebar-datepicker {
  padding-left: 25px;
  padding-right: 25px;
  position: relative;

  .ui-datepicker-inline {
    position: relative;
    font-size: 13px;
    padding: 10px;
    border: 1px solid rgba(#fff, .1);
    background-color: transparent;
    border-radius: 0;

    .ui-datepicker-title {
      color: #fff;
      font-size: 11px;
      font-weight: 400;
    }
  }

  .ui-datepicker-header {
     text-align: center;
     padding-bottom: 10px;
     color: #fff;

     .ui-datepicker-next,
     .ui-datepicker-prev {
       &:hover,
       &:focus {
         &::before { color: #fff; }
       }
     }
   }

  .ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;

    thead th {
      text-transform: uppercase;
      color: theme-color('info');
      font-weight: normal;
      font-size: 10px;
      text-align: center;
      padding-bottom: 5px;
      padding-left: 0;
      padding-right: 0;
    }

    td {
      border: 0;
      background-color: transparent;
      a { background-color: transparent; }
    }

    .ui-state-default {
      display: block;
      text-align: center;
      padding: 2px;
      color: rgba(#fff, .6);
      font-size: 12px;
      border: 1px solid transparent;

      &:hover,
      &:focus {
        background-color: darken($br-primary, 2%);
        color: #fff;
      }
    }

    .ui-datepicker-today .ui-state-default {
      background-color: transparent;
      color: $teal;
      border-color: $teal;
    }
  }
}

.sidebar-event-list {
  .list-group-item {
    background-color: transparent;
    border-color: rgba(#fff, 0.1);
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    &:first-child { @include border-top-radius(0); }
    &:last-child { @include border-bottom-radius(0); }

    h6 {
      color: #fff;
      font-size: 13px;
      margin-bottom: 5px;
      font-weight: 400;
    }

    p {
      margin-bottom: 0;
      color: rgba(#FFF,.2);
      font-size: 12px;
    }
  }
}

.sidebar-settings-item {
  padding: 20px 25px;
  color: #fff;

  .form-control {
    @include transition($transition-base);
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: darken($br-primary, 5%);
    border-color: transparent;
    color: $gray-500;
  }
}

// mainpanel
.br-mainpanel {
  margin-left: 0;
  margin-top: $br-header-height;
  @include transition($transition-base);

  @include media-breakpoint-up(lg) {
    margin-left: $br-sideleft-width;
  }
}

.br-pageheader {
  display: flex;
  align-items: center;
  background-color: $gray-300;
  padding: 15px;

  @include media-breakpoint-up(sm) {
    padding: 15px 20px;
  }

  .breadcrumb { background-color: transparent; }
  .breadcrumb-item {
    &:not(.active) {
      color: $gray-600;
      &:hover,
      &:focus { color: $gray-700; }
    }

    &.active { color: $gray-700; }
  }
}

.br-pagetitle {
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;

  .icon {
    font-size: 70px;
    line-height: 0;
    color: $gray-800;
  }

  > div { margin-top: 10px; }

  h4 {
    margin-bottom: 5px;
    color: $gray-800;
  }

  p { margin-bottom: 0; }

  @include media-breakpoint-up(sm) {
    display: flex;
    align-items: center;
    padding-top: 25px;
    padding-left: 30px;
    padding-right: 30px;

    > div {
      padding-left: 20px;
      margin-top: 0;
    }
  }
}

.br-pagebody {
  margin-top: 30px;
  padding: 0 15px;

  @include media-breakpoint-up(sm) {
    padding: 0 30px;
  }
}

.br-section-label {
  color: $gray-800;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  margin-top: 80px;
  margin-bottom: 10px;
}

.br-section-text {
  margin-bottom: 25px;
  @include media-breakpoint-up(lg) {
    margin-bottom: 50px;
  }
}

.br-section-label-sm {
  font-size: 11px;
  font-family: $font-family-roboto;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 40px;
  margin-bottom: 10px;
  color: $gray-600;
}

.br-section-wrapper {
  background-color: #fff;
  padding: 30px 20px;
  box-shadow: 0px 1px 3px 0px rgba(#000, 0.21);
  @include border-radius();

  @include media-breakpoint-up(sm) {
    padding: 30px;
  }

  @include media-breakpoint-up(lg) { padding: 60px; }

  .br-section-label:first-child { margin-top: 0; }
}

.br-footer {
  font-size: 12px;
  padding: 20px 15px;

  a {
    color: $gray-600;
    &:hover,
    &:focus { color: $gray-800; }
  }

  .footer-right { margin-top: 20px; }

  @media (min-width: 480px) {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .footer-right { margin-top: 0; }
  }

  @include media-breakpoint-up(sm) {
    padding: 30px;
  }
}

// Content Panel
.br-contentpanel {
  margin-top: $br-header-height;
  @include transition($transition-base);

  @include media-breakpoint-up(lg) {
    margin-left: $br-sideleft-width;
  }
}

.tooltip-static-demo {
  .tooltip {
    z-index: 1;
    opacity: 1;
    position: relative;
    display: inline-block;
    margin: 0 10px;
  }

  .bs-tooltip-top,
  .bs-tooltip-bottom {
    .arrow {
      left: 50%;
      margin-left: -2px;
    }
  }

  .bs-tooltip-left,
  .bs-tooltip-right {
    margin-top: 5px;

    .arrow {
      top: 50%;
      margin-top: -3px;
    }
  }
}

.popover-static-demo {
  .popover {
    z-index: 1;
    opacity: 1;
    position: relative;
    display: inline-block;
    margin: 0 10px;
  }

  .bs-popover-top,
  .bs-popover-bottom {
    .arrow {
      left: 50%;
      margin-left: -5px;
    }
  }

  .bs-popover-left,
  .bs-popover-right {
    margin-top: 5px;

    .arrow {
      top: 50%;
      margin-top: -5px;
    }
  }
}
