.noscroll { overflow: hidden !important; }

.stackable_drawer {
	height: calc(100vh);
	width: calc(100vw - 200px);
	background-color: #fff;
	box-shadow: -10px 0px 10px 1px rgba(0, 0, 0, 0.25);
	transition: all .6s;
	overflow: hidden;
	position: fixed;
	top:0;
	right: 0;
}

#stackable_drawer_overlay{
  position: fixed; /* Sit on top of the page content */
  display: hidden; /* Hidden by default */
  width: calc(100vw); /* Full width (cover the whole page) */
  height: calc(100vh); /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0); /* Black background with opacity */
  opacity: 0;
	transition: opacity 0.6s, visibility .6s;
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  /*cursor: pointer;  Add a pointer on hover */
}

#stackable_drawer_overlay.active{
	opacity: .25;
	display: visible;
}

.stackable_drawer .stackable_close {
  position: absolute;
  left: 9px;
  top: 9px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
}

.stackable_drawer .stackable_close:hover {
  opacity: 1;
}
.stackable_drawer .stackable_close:before, .stackable_close:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #333;
}
.stackable_drawer .stackable_close:before {
  transform: rotate(45deg);
}
.stackable_drawer .stackable_close:after {
  transform: rotate(-45deg);
}

.stackable_drawer header{
	vertical-align: middle;
	height: 52px;
}

.stackable_drawer main{
	padding: 15px;
}

.stackable_drawer header .content{
	padding: 10px 15px 15px 60px;
	font-size: 24px;
	font-weight: bold;
}

.stackable_drawer.closed {
	/*width: 0;*/
    right: calc(100vw * -1);    
	box-shadow: none;
}

.stackable_drawer .loader{
  width: 100%;
  height: 100%;
  background: url('//digipan.digipan.lumentumllc.com/common/images/ajax-loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

.stackable_drawer main{
	height: calc(100vh - 50px);
	overflow: auto;
  width: 100%;
}

.stackable_drawer .content{
	padding: 25px 0;
}

.OptionalButtons{
	padding: 7px;
}


/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
  
/*// Common styles*/
.stackable_drawer .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.stackable_drawer .btn-default,
.stackable_drawer .btn-primary,
.stackable_drawer .btn-success,
.stackable_drawer .btn-info,
.stackable_drawer .btn-warning,
.stackable_drawer .btn-danger {
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
  .box-shadow(@shadow);

  /*// Reset the shadow*/
  &:active,
  &.active {
    .box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    .box-shadow(none);
  }

  .badge {
    text-shadow: none;
  }
}
.stackable_drawer .btn-warning {
    background-image: -webkit-linear-gradient(top,#f0ad4e 0,#eb9316 100%);
    background-image: -o-linear-gradient(top,#f0ad4e 0,#eb9316 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#eb9316));
    background-image: linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-repeat: repeat-x;
    border-color: #e38d13;
}

/*// Mixin for generating new styles*/
.stackable_drawer .btn-styles(@btn-color: #555) {
  #gradient > .vertical(@start-color: @btn-color; @end-color: darken(@btn-color, 12%));
  .reset-filter(); /*// Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620*/
  background-repeat: repeat-x;
  border-color: darken(@btn-color, 14%);

  &:hover,
  &:focus  {
    background-color: darken(@btn-color, 12%);
    background-position: 0 -15px;
  }

  &:active,
  &.active {
    background-color: darken(@btn-color, 12%);
    border-color: darken(@btn-color, 14%);
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: darken(@btn-color, 12%);
      background-image: none;
    }
  }
}

/*// Common styles*/
.stackable_drawer .btn {
  &:active,
  &.active {
    background-image: none;
  }
}

/*// Apply the mixin to the buttons*/
.stackable_drawer .btn-default { .btn-styles(@btn-default-bg); text-shadow: 0 1px 0 #fff;
border-color: #ccc;
background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
background-repeat: repeat-x;
background-color: #ccc; }
.stackable_drawer .btn-primary { .btn-styles(@btn-primary-bg); }
.stackable_drawer .btn-success { .btn-styles(@btn-success-bg); }
.stackable_drawer .btn-info    { .btn-styles(@btn-info-bg); }
.stackable_drawer .btn-warning { .btn-styles(@btn-warning-bg); }
.stackable_drawer .btn-danger  { .btn-styles(@btn-danger-bg); }


/*//
// Images
// --------------------------------------------------*/

.stackable_drawer .thumbnail,
.stackable_drawer .img-thumbnail {
  .box-shadow(0 1px 2px rgba(0,0,0,.075));
}


/*//
// Dropdowns
// --------------------------------------------------*/

.stackable_drawer .dropdown-menu > li > a:hover,
.stackable_drawer .dropdown-menu > li > a:focus {
  #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
  background-color: darken(@dropdown-link-hover-bg, 5%);
}
.stackable_drawer .dropdown-menu > .active > a,
.stackable_drawer .dropdown-menu > .active > a:hover,
.stackable_drawer .dropdown-menu > .active > a:focus {
  #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
  background-color: darken(@dropdown-link-active-bg, 5%);
}


/*//
// Navbar
// --------------------------------------------------

// Default navbar*/
.stackable_drawer .navbar-default {
  #gradient > .vertical(@start-color: lighten(@navbar-default-bg, 10%); @end-color: @navbar-default-bg);
  .reset-filter();
  border-radius: @navbar-border-radius;
  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
  .box-shadow(@shadow);

  .navbar-nav > .open > a,
  .navbar-nav > .active > a {
    #gradient > .vertical(@start-color: darken(@navbar-default-link-active-bg, 5%); @end-color: darken(@navbar-default-link-active-bg, 2%));
    .box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
  }
}
.stackable_drawer .navbar-brand,
.stackable_drawer .navbar-nav > li > a {
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

/*// Inverted navbar*/
.stackable_drawer .navbar-inverse {
  #gradient > .vertical(@start-color: lighten(@navbar-inverse-bg, 10%); @end-color: @navbar-inverse-bg);
  .reset-filter();
  border-radius: @navbar-border-radius;
  .navbar-nav > .open > a,
  .navbar-nav > .active > a {
    #gradient > .vertical(@start-color: @navbar-inverse-link-active-bg; @end-color: lighten(@navbar-inverse-link-active-bg, 2.5%));
    .box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
  }

  .stackable_drawer .navbar-brand,
  .stackable_drawer .navbar-nav > li > a {
    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  }
}

/*// Undo rounded corners in static and fixed navbars*/
.stackable_drawer .navbar-static-top,
.stackable_drawer .navbar-fixed-top,
.stackable_drawer .navbar-fixed-bottom {
  border-radius: 0;
}

/*// Fix active state of dropdown items in collapsed mode*/
@media (max-width: @grid-float-breakpoint-max) {
  .stackable_drawer .navbar .navbar-nav .open .dropdown-menu > .active > a {
    &,
    &:hover,
    &:focus {
      color: #fff;
      #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
    }
  }
}

.stackable_drawer .btn.focus, .stackable_drawer .btn:focus, .stackable_drawer .btn:hover {
    color: #333;
    text-decoration: none;
}
.stackable_drawer .btn-default:hover {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.stackable_drawer .btn-default:focus, .stackable_drawer .btn-default:hover {
    background-color: #e0e0e0;
    background-position: 0 -15px;
}
.stackable_drawer .btn-primary:hover,
.stackable_drawer .btn-info:hover,
.stackable_drawer .btn-secondary:hover,
.stackable_drawer .btn-primary:focus,
.stackable_drawer .btn-info:focus,
.stackable_drawer .btn-secondary:focus {
    color: #fff;
    /*background-color: #286090;*/
    border-color: #204d74;
}

/*//
// Alerts
// --------------------------------------------------

// Common styles*/
.stackable_drawer .alert {
  text-shadow: 0 1px 0 rgba(255,255,255,.2);
  @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
  .box-shadow(@shadow);
}

/*// Mixin for generating new styles*/
.stackable_drawer .alert-styles(@color) {
  #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 7.5%));
  border-color: darken(@color, 15%);
}

/*// Apply the mixin to the alerts*/
.stackable_drawer .alert-success    { .alert-styles(@alert-success-bg); }
.stackable_drawer .alert-info       { .alert-styles(@alert-info-bg); }
.stackable_drawer .alert-warning    { .alert-styles(@alert-warning-bg); }
.stackable_drawer .alert-danger     { .alert-styles(@alert-danger-bg); }


/*//
// Progress bars
// --------------------------------------------------

// Give the progress background some depth*/
.stackable_drawer .progress {
  #gradient > .vertical(@start-color: darken(@progress-bg, 4%); @end-color: @progress-bg)
}

/*// Mixin for generating new styles*/
.stackable_drawer .progress-bar-styles(@color) {
  #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 10%));
}

/*// Apply the mixin to the progress bars*/
.stackable_drawer .progress-bar            { .progress-bar-styles(@progress-bar-bg); }
.stackable_drawer .progress-bar-success    { .progress-bar-styles(@progress-bar-success-bg); }
.stackable_drawer .progress-bar-info       { .progress-bar-styles(@progress-bar-info-bg); }
.stackable_drawer .progress-bar-warning    { .progress-bar-styles(@progress-bar-warning-bg); }
.stackable_drawer .progress-bar-danger     { .progress-bar-styles(@progress-bar-danger-bg); }

/*// Reset the striped class because our mixins don't do multiple gradients and
// the above custom styles override the new `.progress-bar-striped` in v3.2.0.*/
.stackable_drawer .progress-bar-striped {
  #gradient > .striped();
}


/*//
// List groups
// --------------------------------------------------*/

.stackable_drawer .list-group {
  border-radius: @border-radius-base;
  .box-shadow(0 1px 2px rgba(0,0,0,.075));
}
.stackable_drawer .list-group-item.active,
.stackable_drawer .list-group-item.active:hover,
.stackable_drawer .list-group-item.active:focus {
  text-shadow: 0 -1px 0 darken(@list-group-active-bg, 10%);
  #gradient > .vertical(@start-color: @list-group-active-bg; @end-color: darken(@list-group-active-bg, 7.5%));
  border-color: darken(@list-group-active-border, 7.5%);

  .badge {
    text-shadow: none;
  }
}


/*//
// Panels
// --------------------------------------------------

// Common styles*/
.stackable_drawer .panel {
  .box-shadow(0 1px 2px rgba(0,0,0,.05));
}

/*// Mixin for generating new styles*/
.stackable_drawer .panel-heading-styles(@color) {
  #gradient > .vertical(@start-color: @color; @end-color: darken(@color, 5%));
}

/*// Apply the mixin to the panel headings only*/
.stackable_drawer .panel-default > .panel-heading   { .panel-heading-styles(@panel-default-heading-bg); }
.stackable_drawer .panel-primary > .panel-heading   { .panel-heading-styles(@panel-primary-heading-bg); }
.stackable_drawer .panel-success > .panel-heading   { .panel-heading-styles(@panel-success-heading-bg); }
.stackable_drawer .panel-info > .panel-heading      { .panel-heading-styles(@panel-info-heading-bg); }
.stackable_drawer .panel-warning > .panel-heading   { .panel-heading-styles(@panel-warning-heading-bg); }
.stackable_drawer .panel-danger > .panel-heading    { .panel-heading-styles(@panel-danger-heading-bg); }


/*//
// Wells
// --------------------------------------------------
*/
.stackable_drawer .well {
  #gradient > .vertical(@start-color: darken(@well-bg, 5%); @end-color: @well-bg);
  border-color: darken(@well-bg, 10%);
  @shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
  .box-shadow(@shadow);
}


/*//
// Navs
// --------------------------------------------------


// Base class
// --------------------------------------------------*/

.stackable_drawer .nav {
  margin-bottom: 0;
  padding-left: 0; 
  list-style: none;
  &:extend(.clearfix all);

  > li {
    position: relative;
    display: block;

    > a {
      position: relative;
      display: block;
      padding: @nav-link-padding;
      &:hover,
      &:focus {
        text-decoration: none;
        background-color: @nav-link-hover-bg;
      }
    }
 
    &.disabled > a {
      color: @nav-disabled-link-color;

      &:hover,
      &:focus {
        color: @nav-disabled-link-hover-color;
        text-decoration: none;
        background-color: transparent;
        cursor: @cursor-disabled;
      }
    }
  }
 
  .stackable_drawer .open > a {
    &,
    &:hover,
    &:focus {
      background-color: @nav-link-hover-bg;
      border-color: @link-color;
    }
  }
 
  .stackable_drawer .nav-divider {
    .nav-divider();
  }
 
  > li > a > img {
    max-width: none;
  }
}


/*// Tabs
// -------------------------

// Give the tabs something to sit on*/
.stackable_drawer .nav-tabs {
  border-bottom: 1px solid @nav-tabs-border-color;
  > li {
    float: left; 
    margin-bottom: -1px;
 
    > a {
      margin-right: 2px;
      line-height: @line-height-base;
      border: 1px solid transparent;
      border-radius: @border-radius-base @border-radius-base 0 0;
      &:hover {
        border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color;
      }
    }
 
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-tabs-active-link-hover-color;
        background-color: @nav-tabs-active-link-hover-bg;
        border: 1px solid @nav-tabs-active-link-hover-border-color;
        border-bottom-color: transparent;
        cursor: default;
      }
    }
  }

  &.nav-justified {
    .nav-justified();
    .nav-tabs-justified();
  }
}


/*// Pills
// -------------------------*/
.stackable_drawer .nav-pills {
  > li {
    float: left;

    > a {
      border-radius: @nav-pills-border-radius;
    }
    + li {
      margin-left: 2px;
    }
 
    &.active > a {
      &,
      &:hover,
      &:focus {
        color: @nav-pills-active-link-hover-color;
        background-color: @nav-pills-active-link-hover-bg;
      }
    }
  }
}


/*// Stacked pills*/
.stackable_drawer .nav-stacked {
  > li {
    float: none;
    + li {
      margin-top: 2px;
      margin-left: 0;
    }
  }
}


/*// Nav variations
// --------------------------------------------------

// Justified nav links
// -------------------------*/

.stackable_drawer .nav-justified {
  width: 100%;

  > li {
    float: none;
    > a {
      text-align: center;
      margin-bottom: 5px;
    }
  }

  > .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  @media (min-width: @screen-sm-min) {
    > li {
      display: table-cell;
      width: 1%;
      > a {
        margin-bottom: 0;
      }
    }
  }
}
 
.stackable_drawer .nav-tabs-justified {
  border-bottom: 0;

  > li > a {
    margin-right: 0;
    border-radius: @border-radius-base;
  }

  > .active > a,
  > .active > a:hover,
  > .active > a:focus {
    border: 1px solid @nav-tabs-justified-link-border-color;
  }

  @media (min-width: @screen-sm-min) {
    > li > a {
      border-bottom: 1px solid @nav-tabs-justified-link-border-color;
      border-radius: @border-radius-base @border-radius-base 0 0;
    }
    > .active > a,
    > .active > a:hover,
    > .active > a:focus {
      border-bottom-color: @nav-tabs-justified-active-link-border-color;
    }
  }
}

.stackable_drawer .tab-content {
  > .tab-pane {
    display: none;
  }
  > .active {
    display: block;
  }
}


/*// Dropdowns
// -------------------------

// Specific dropdowns*/
.stackable_drawer .nav-tabs .dropdown-menu {
  margin-top: -1px;
  .border-top-radius(0);
}

.stackable_drawer.redemption_drawer main {
  overflow-x: hidden;
}