/*
                       _______              _     _
                      |__   __|            | |   | |
      _ __   _____      _| |_   _ _ __ ___ | |__ | |
     | '_ \ / _ \ \ /\ / / | | | | '_ ` _ \| '_ \| |
     | | | |  __/\ V  V /| | |_| | | | | | | |_) | |
     |_| |_|\___| \_/\_/ |_|\__,_|_| |_| |_|_.__/|_|


     Copyright © 2018-2020 8-P, LLC. All rights reserved.
*/

/*******************************************************************************************************************************
**                                                           Global                                                           **
*******************************************************************************************************************************/

:root {
   --height-margin:             20px;
   --height-message:            58px;
   --height-nav:                50px;
   --height-toolbar:            4rem;
   --width-nav:                300px;
   --width-left:               300px;
   --width-right:              300px;
   --height-floatmenu:          50px;
   --height-floatmenu-margin:   25px;
   --height-floatmenu-overlap:  15px;
   --width-floatmenu:           50px;
   --width-floatmenu-margin:    25px;
   --height-pulldown:          250px;

   --height-margin-bottom:       0px;
   --height-message-top:         0px;
   --height-message-bottom:      0px;
   --height-nav-primary:         0px;
   --height-nav-secondary:       3rem;
   --height-nav-toolbar:         0px;
   --width-nav-tertiary:         0px;
   --width-panel-left:           0px;
   --width-panel-right:          0px;
   --height-pulldown-sticky:     0px;
   --height-floatmenu-br:        0px;
   --height-floatmenu-bottom:    0px;
   --height-floatmenu-bottom-o:  0px;
   --width-floatmenu-br:         0px;
   --width-floatmenu-right:      0px;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

/*******************************************************************************************************************************
**                                                            Body                                                            **
*******************************************************************************************************************************/

/* iPhone X needs an extra 20 pixels on the bottom */
@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
body {
   --height-margin-bottom:       var(--height-margin);
}
}

body.message-top {
   --height-message-top:         var(--height-message);
}

body.message-bottom {
   --height-message-bottom:      var(--height-message);
}

body.nav-primary {
   --height-nav-primary:         var(--height-nav);
}

body.nav-secondary {
   --height-nav-secondary:       var(--height-nav);
}

body.nav-toolbar {
   --height-nav-toolbar:         var(--height-toolbar);
}

body.nav-tertiary:not(.mobile) {
   --width-nav-tertiary:         var(--width-nav);
}

body.panel-left {
   --width-panel-left:           var(--width-left);
}

body.panel-right {
   --width-panel-right:          var(--width-right);
}

body.floatmenu-br {
   --height-floatmenu-br:        var(--height-floatmenu);
   --height-floatmenu-bottom:   (var(--height-floatmenu) + var(--height-floatmenu-margin));
   --height-floatmenu-bottom-o: (var(--height-floatmenu) + var(--height-floatmenu-margin) - var(--height-floatmenu-overlap));
   --width-floatmenu-br:         var(--width-floatmenu);
   --width-floatmenu-right:     (var(--width-floatmenu)  + var(--width-floatmenu-margin));
}

body:not(.mobile) {
   --height-padding-top:        (var(--height-message-top)    + var(--height-nav-secondary));
   --height-padding-bottom:     (var(--height-message-bottom)                             + var(--height-margin-bottom));
}

@media only screen and (max-width: 750px) {

   body:not(.mobile) {
      --height-padding-top:     (var(--height-message-top)    + var(--height-nav-primary) + var(--height-nav-secondary));
   }

}

body.mobile {
   --height-padding-top:        (var(--height-message-top)                                + var(--height-nav-secondary));
   --height-padding-bottom:     (var(--height-message-bottom) + var(--height-nav-primary) + var(--height-margin-bottom));
}

/*---- no scroll ----*/

body > fixed {
   position: fixed;
   overflow: hidden;
   /*overflow: auto;*//* we will need this for noscroll testing */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 999; /* to get a body element to display above the frame, use a z-index >= 1000 */
   pointer-events: none;
}

body > fixed > div {
   pointer-events: all;
   overscroll-behavior: contain;
}

/*
.FW___back {
   position: fixed;
   display: block;
   height: 100%;
   width: 100%;
   left: 0;
   z-index: 1;
   overflow: auto;
}

body.noscroll .FW___back div {
   height: 100000px;
   background: #80008059;
}
*/

/*******************************************************************************************************************************
**                                                           Message                                                          **
*******************************************************************************************************************************/

body:not(.message-top) .FW___message--top,
body:not(.message-bottom) .FW___message--bottom {
   display: none;
}

.FW___message {
   position: absolute;
   overflow: hidden;
   left: 0;
   width: 100%;
}

.FW___message--top {
   top: 0px;
   height: calc(var(--height-message-top));
}

body:not(.mobile) .FW___message--bottom {
   top:    calc(100% - var(--height-message-bottom)                             - var(--height-margin-bottom));
   height: calc(       var(--height-message-bottom));
}

body.mobile .FW___message--bottom {
   top:    calc(100% - var(--height-message-bottom) - var(--height-nav-primary) - var(--height-margin-bottom));
   height: calc(       var(--height-message-bottom));
}

body.message-bottom:not(.mobile) .FW___message--bottom,
body.message-bottom.mobile:not(.nav-primary) .FW___message--bottom {
   height: calc(       var(--height-message-bottom)                             + var(--height-margin-bottom));
}

/*******************************************************************************************************************************
**                                                             Nav                                                            **
*******************************************************************************************************************************/

body:not(.nav-primary) .FW___nav--primary,
body:not(.nav-secondary) .FW___nav--secondary,
body:not(.nav-toolbar) .FW___nav--toolbar {
   display: none;
}

.FW___nav {
   position: absolute;
}

.FW___nav--primary,
.FW___nav--secondary {
   left: 0;
   width: 100%;
   max-width: 100vw;
}

body:not(.mobile) .FW___nav--primary {
   top:    calc(       var(--height-message-top));
   height: calc(       var(--height-nav-primary));
}

body.mobile .FW___nav--primary {
   top:    calc(100% - var(--height-nav-primary) - var(--height-margin-bottom));
   height: calc(       var(--height-nav-primary) + var(--height-margin-bottom));
}

.FW___nav--secondary {
   top:    calc(       var(--height-message-top));
   height: calc(       var(--height-nav-secondary));
}

body.nav-primary.nav-secondary:not(.mobile) .FW___nav--primary {
   width: 100%;
}

@media only screen and (max-width: 750px) {

   body.nav-primary.nav-secondary:not(.mobile) .FW___nav--primary {
      width: 100%;
   }

   body:not(.mobile) .FW___nav--secondary {
      top: calc(var(--height-message-top) + var(--height-nav-primary));
   }

}

.FW___nav--toolbar {
   top:    calc(       var(--height-padding-top));
   height: calc(       var(--height-toolbar));
   left:   calc(       var(--width-nav-tertiary) + var(--width-panel-left)                           );
   width:  calc(100% - var(--width-nav-tertiary) - var(--width-panel-left) - var(--width-panel-right));
}

.FW___nav--tertiary {
   top:    calc(        var(--height-padding-top));
   height: calc( 100% - var(--height-padding-top) - var(--height-padding-bottom));
   width:  calc(        var(--width-nav-tertiary));
   max-width: 100vw;
}

/* Min Width added Due to adding 20% variable Width
body.nav-tertiary .FW___nav--tertiary{
  min-width: 280px;
} */

body:not(.mobile) .FW___nav--tertiary {
   left: 0;
}

body.mobile .FW___nav--tertiary {
   width: 100vw;
   left: -100vw;
   transition: left .5s ease;
}

body.mobile.nav-tertiary .FW___nav--tertiary {
   left: 0;
}

/*******************************************************************************************************************************
**                                                            Panel                                                           **
*******************************************************************************************************************************/

.FW___panel {
   position: absolute;
   top:    calc(       var(--height-padding-top));
   height: calc(100% - var(--height-padding-top) - var(--height-padding-bottom));
   transition: left .25s ease;
}

.FW___panel--left {
   width: calc(       var(--width-left));
}

.FW___panel--left {
   left:  calc(       var(--width-nav-tertiary) - var(--width-left));
}

body.panel-left .FW___panel--left,
body.panel-left-float .FW___panel--left {
   left:  calc(       var(--width-nav-tertiary));
}

.FW___panel--right {
   left:  calc(100%);
   width: calc(       var(--width-right));
}

body.panel-right .FW___panel--right,
body.panel-right-float .FW___panel--right {
   left:  calc(100% - var(--width-right));
}

/*******************************************************************************************************************************
**                                                          FloatMenu                                                         **
*******************************************************************************************************************************/

/* .FW___floatmenu {
   position: absolute;
   height: calc(var(--height-floatmenu-br));
   width:  calc(var(--width-floatmenu-br));
   left:   calc(100% - var(--width-panel-right) - var(--width-floatmenu-right));
} */

body:not(.mobile) .FW___floatmenu {
   top:    calc(100% - var(--height-margin-bottom)                             - var(--height-message-bottom) - var(--height-floatmenu-bottom));
}

body.mobile .FW___floatmenu {
   top:    calc(100% - var(--height-margin-bottom) - var(--height-nav-primary) - var(--height-message-bottom) - var(--height-floatmenu-bottom));
}

/*******************************************************************************************************************************
**                                                            Sled                                                            **
*******************************************************************************************************************************/

.FW___sled {
   padding-left:   calc(var(--width-nav-tertiary)    + var(--width-panel-left));
   padding-right:  calc(                               var(--width-panel-right));
   padding-top:    calc(var(--height-padding-top)    + var(--height-nav-toolbar));
   padding-bottom: calc(var(--height-padding-bottom) + var(--height-floatmenu-bottom-o));
}

.FW___sled.pulldown-sticky {
   --height-pulldown-sticky:     var(--height-pulldown);
}

/*******************************************************************************************************************************
**                                                          PullDown                                                          **
*******************************************************************************************************************************/

.FW___pulldown {
   display: none;
}

.FW___sled.pulldown-sticky .FW___pulldown {
   display: inline;
}

.FW___pulldown_tray {
   background-color: lime;
/* position: -webkit-sticky; */
/* position: sticky;         */
   overflow: hidden;
   height: calc(var(--height-pulldown-sticky));
   left:   0;
   width:  100%;
}

/*
body:not(.mobile) .FW___pulldown_tray {
   top:    calc(       var(--height-message-top)    + var(--height-nav-primary)   + var(--height-nav-toolbar));
}

body.mobile .FW___pulldown_tray {
   top:    calc(       var(--height-message-top)    + var(--height-nav-secondary) + var(--height-nav-toolbar));
}
*/

/******************************************************************************************************************************/