@media (max-width: 575.98px) {
    .modal-fullscreen {
      padding: 0 !important; }
      .modal-fullscreen .modal-header {
        display: block; }
      .modal-fullscreen .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0; }
      .modal-fullscreen .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0; }
      .modal-fullscreen .modal-body {
        overflow-y: auto; } }
  
  @media (max-width: 767.98px) {
    .modal-fullscreen-sm {
      padding: 0 !important; }
      .modal-fullscreen-sm .modal-header {
        display: block; }
      .modal-fullscreen-sm .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0; }
      .modal-fullscreen-sm .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0; }
      .modal-fullscreen-sm .modal-body {
        overflow-y: auto; } }
  
  @media (max-width: 991.98px) {
    .modal-fullscreen-md {
      padding: 0 !important; }
      .modal-fullscreen-md .modal-header {
        display: block; }
      .modal-fullscreen-md .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0; }
      .modal-fullscreen-md .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0; }
      .modal-fullscreen-md .modal-body {
        overflow-y: auto; } }
  
  @media (max-width: 1199.98px) {
    .modal-fullscreen-lg {
      padding: 0 !important; }
      .modal-fullscreen-lg .modal-header {
        display: block; }
      .modal-fullscreen-lg .modal-dialog {
        width: 100%;
        max-width: none;
        height: 100%;
        margin: 0; }
      .modal-fullscreen-lg .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0; }
      .modal-fullscreen-lg .modal-body {
        overflow-y: auto; } }
  
  .modal-fullscreen-xl {
    padding: 0 !important; }
    .modal-fullscreen-xl .modal-header {
      display: block; }
    .modal-fullscreen-xl .modal-dialog {
      width: 100%;
      max-width: none;
      height: 100%;
      margin: 0; }
    .modal-fullscreen-xl .modal-content {
      height: 100%;
      border: 0;
      border-radius: 0; }
    .modal-fullscreen-xl .modal-body {
      overflow-y: auto; }
  
  .modal-fullscreen {
    padding: 0 !important; }
  
  .modal.show {
    overflow-x: hidden;
    overflow-y: auto; }
  
  /*******************************
   * MODAL AS LEFT/RIGHT SIDEBAR
   * Add ".modal-left-pane" or ".modal-right-pane" in modal parent div, after class="modal".
   *******************************/
  button.modal-back,
  button.close {
    color: #006FF5;
    padding: 0;
    background-color: transparent;
    border: 0;
    font-size: 1.3125rem;
    opacity: 1; }
  
  .modal.modal-left-pane .modal-dialog, .modal.modal-right-pane .modal-dialog {
    max-width: 380px;
    min-height: calc(100vh - 0px);
    min-height: -webkit-fill-available; }
  
  .modal.modal-left-pane.show .modal-dialog, .modal.modal-right-pane.show .modal-dialog {
    transform: translate(0, 0); }
  
  .modal.modal-left-pane .modal-content, .modal.modal-right-pane .modal-content {
    min-height: calc(100vh - 0px);
    min-height: -webkit-fill-available; }
  
  .modal.modal-left-pane .modal-dialog {
    transform: translate(-100%, 0);
    margin: 0px auto 0 0; }
  
  .modal.modal-right-pane .modal-dialog {
    transform: translate(100%, 0);
    margin: 0px 0 0 auto; }
  
  /* Hide HTML5 Up and Down arrows. */
  #cartModal input[type="number"].cart-qty::-webkit-outer-spin-button,
  #cartModal input[type="number"].cart-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0; }
  
  #cartModal input[type="number"].cart-qty {
    -moz-appearance: textfield;
    text-align: center;
    display: inline;
    width: 27px;
    padding: 0; }
  
  .modalCart-overlay {
    background-color: rgba(255, 255, 255, 0.4);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000; }
  
  .modalCart-overlay div.spinner-border,
  .modalCart-overlay i.fa-gift,
  .modalCart-overlay i.fa-spinner,
  .modalCart-overlay i.fa-circle-notch {
    position: absolute;
    left: 25%;
    font-size: 200px;
    top: 25%;
    color: #adb5bd; }
  
  .incdec:focus,
  .cart-qty:focus {
    box-shadow: none; }
  
  .bordermorpher {
    animation: bordermorph 1s infinite; }
  
  @keyframes bordermorph {
    from {
      border-color: #ebebeb; }
    to {
      border-color: #006FF5; } }
  
  .cartModalCollapeButton.collapsed:after {
    content: "\f107";
    font-family: "font awesome 5 free";
    font-weight: 900;
    display: inline-block;
    float: right;
    font-size: 16px; }
  
  .cartModalCollapeButton:after {
    content: "\f106";
    font-family: "font awesome 5 free";
    font-weight: 900;
    display: inline-block;
    float: right;
    font-size: 16px; }
    
  // Mixins
    @mixin modal-fullscreen() {
      
      padding: 0 !important; // override inline padding-right added from js 
       
       //fix for Safari?
       .modal-header {
       display:block;
       }
     
       .modal-dialog {
       width: 100%;
       max-width: none;
       height: 100%;
       margin: 0;
       }
     
       .modal-content {
       height: 100%;
       border: 0;
       border-radius: 0;
       }
     
       .modal-body {
       overflow-y: auto;
       }
     }
     
     @each $breakpoint in map-keys($grid-breakpoints) {
       @include media-breakpoint-down($breakpoint) {
       $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
     
       .modal-fullscreen#{$infix} {
         @include modal-fullscreen();
       }
       }
     }
     
     .modal-fullscreen {
       padding: 0 !important; // override inline padding-right added from js
     }
     
     //Fix for having multiple modals open.
     .modal.show {
       overflow-x: hidden;
       overflow-y: auto;
     }
    
    //Fix for Klayvio popup compatibility
     #cartModal {
        z-index: 2147483647;
    }
    
     /*******************************
     * MODAL AS LEFT/RIGHT SIDEBAR
     * Add ".modal-left-pane" or ".modal-right-pane" in modal parent div, after class="modal".
     *******************************/
     
     // Modal Panel: Right
     $header-nav-height: 0px;
     $modal-height: calc(100vh - #{$header-nav-height});
     
     button.modal-back,
     button.close {
       color: $blue;
       padding: 0;
       background-color: transparent;
       border: 0;
       font-size: 1.3125rem;
       opacity: 1;
     }
      .modal{
       &.modal-left-pane,
       &.modal-right-pane {
       .modal-dialog {
         max-width: 380px;
         min-height: $modal-height;
         min-height: -webkit-fill-available;
       }
     
       &.show .modal-dialog {
         transform: translate(0, 0);
       }
     
       .modal-content {
         min-height: $modal-height;
         min-height: -webkit-fill-available;
       }
       }
       &.modal-left-pane {
       .modal-dialog {
         transform: translate(-100%, 0);
         margin: $header-nav-height auto 0 0;
         position: fixed;
         left: 0;
       }
       }
     
       &.modal-right-pane {
       .modal-dialog {
         transform: translate(100%, 0);
         margin: $header-nav-height 0 0 auto;
         position: fixed;
         right: 0;
       }
       }
     }
    //Advanced Modal Cart
    /* Hide HTML5 Up and Down arrows. */
    #cartModal input[type="number"].cart-qty::-webkit-outer-spin-button,
    #cartModal input[type="number"].cart-qty::-webkit-inner-spin-button {
        -webkit-appearance: none;	
        margin: 0;
    }
    
    #cartModal input[type="number"].cart-qty {
      -moz-appearance: textfield;
      text-align: center;
      display: inline;
      width: 27px;
        padding: 0;
    }
    .modalCart-overlay{
      background-color: rgba(255, 255, 255, 0.4);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1000;
    }
    
    .modalCart-overlay div.spinner-border,
    .modalCart-overlay i.fa-gift,
    .modalCart-overlay i.fa-spinner,
    .modalCart-overlay i.fa-circle-notch {
      position: absolute;
      left: 25%;
      font-size: 200px;
      top: 25%;
      color: $gray-500;
    }
    
    .incdec:focus,
    .cart-qty:focus {
      box-shadow: none;	
    }
    
    .bordermorpher {
      animation: bordermorph 1s infinite;
    }
    
    @keyframes bordermorph {
      from {border-color: $gray-200;}
      to {border-color: $blue;}
    }
    
    .cartModalCollapeButton.collapsed:after {
        content: "\f107";
        font-family: "font awesome 5 free";
        font-weight: 900;
        display: inline-block;
        float: right;
        font-size: 16px;
    }