/* = = = = = = = = = = = = = = = = = = = = = =
  Author: Aisha Bigelow
  Email: abigelow@quasars.com
  File: media.css
  · File is called in v2.css and is needed
   for responsive design on smaller screens
  · Please do not add changes here unless
   absolutely necessary
= = = = = = = = = = = = = = = = = = = = = = */
/* ===== MEDIA QUERIES ===== */
/* foundation for ANY screen, size specifics below */
  @media screen {
   .display-1 {font-size: 3.5rem;}
   .display-2 {font-size: 3rem;}
   .display-3 {font-size: 2.5rem;}
   .display-4 {font-size: 2rem;}
   .display-5 {font-size: 1.25rem;}

   #header {
    padding-top: 1rem;
    /*padding-bottom: 1rem;*/
   }
   #header.public {
    padding-top: 1rem;
    padding-bottom: 1rem;
   }
   #header .brand h1 {
    font-size: 1.3em;
   }
   #sidebar {
    width: 0!important;
    overflow: hidden;
   }
   #sidebar.active {
    width: 180px!important;
    margin-left: 0;
    overflow: visible;
   }
   #sidenav .list-group.list-group-flush .list-group-item {
    text-align: left;
   }
   #sidenav .list-group.list-group-flush .list-group-item .nav-link {
    padding: .25rem .5rem .25rem 2.35rem;
   }
   #sidebar.active #sidenav .list-group.list-group-flush .list-group-item .nav-link {
    padding: .25rem .2rem .25rem .75rem;
    font-size: 93%;
   }
   #sidenav > ul.reseller > li > a {
    font-weight: 600;
   }
   #sidenav .reseller .list-group.list-group-flush {
    font-size: .88rem;
   }
   #sidenav .reseller .list-group.list-group-flush .list-group-item .nav-link {
    padding: .25rem .2rem .25rem 2rem;
   }
   #sidenav .reseller .list-group.list-group-flush .list-group-item .nav-link [class*=fa] {
    color: rgba(63, 195, 119, 0.45);
   }
   #sidenav .reseller .list-group.list-group-flush .list-group-item .nav-link.active [class*=fa] {
    color: #0006;
   }
   #sidenav .reseller .list-group.list-group-flush .list-group-item .nav-link.disabled [class*=fa] {
    color: #999;
   }

   #content {
    width: 100%;
    /*padding-bottom: 5rem;*/
   }
   #payselect-container > ul.orfixed > li:nth-of-type(2) {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding-top: 1rem;
    padding-bottom: .75rem;
    text-align: center;
   }
   .disp-warning {
    display: none;
    padding: .5rem;
    background-color: #9D100D;
    color: #fff;
    font-weight: 400;
    font-size: .9em;
    font-family: 'Poppins';
   }
   .disp-warning strong {
    font-weight: 500;
   }
   @media only screen and (max-width: 768px) {
    .wallet-img {
    }
    .wallet-img img {
     max-height: 60px;
    }
    #header {
     /*padding-bottom: .5rem;*/
    }
    #header.public {
     padding-top: .5rem;
     font-size: .85em;
     text-align: center;
    }
    #header .logo:not(.brand) {
     display: block;
    }
    #header .logo:not(.brand) img {
     padding: .25rem;
     max-height: 60px;
    }
    #header .brand {
     margin-left: auto;
     margin-right: auto;
    }
    #header .brand h1 {
     text-align: center;
     line-height: 1;
    }
   }
   @media only screen and (orientation: landscape) and (max-width: 768px) {
    #header {
     /*padding-bottom: 1rem;*/
    }
    #header.public {
     padding-top: .5rem;
     /*padding-bottom: .5rem;*/
    }
    #header .brand h1 {
     font-size: 1.5rem;
    }
   }
   @media and (min-width: 569px) and (max-width: 768px) {
    #payselect-container > ul.orfixed > li:nth-of-type(2) {
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
     width: auto;
     padding-top: 0;
     padding-bottom: 0;
    }
   }
   @media (max-width: 768px) {
    .display-1, h1, .h1 {font-size: 2.5rem;}
    .display-2, h2, .h2 {font-size: 2rem;}
    .display-3, h3, .h3 {font-size: 1.5rem;}
    .display-4, h4, .h4 {font-size: 1.25rem;}
    h5, .h5 {font-size: 1.1rem;}
    h6, .h6 {}
    @media only screen and (orientation: portrait) and (max-width: 576px) {
     .disp-warning {
      display: block;
     }
     .disp-warning + .container > .row > [class*=col] {
      margin-top: 0!important;
     }
     body.OB #header {
      margin-bottom: 0rem!important; /* hide spacing between disp-warning and header */
     }
    }
    html.triggered, body.triggered {
     overflow: hidden;
    }
    #sidebar {
     top: 0;
     position: absolute;
     margin-left: -15px;
     z-index: 4;
     background-color: #fff;
     max-height: 100vh;
     min-height: 100vh;
    }
    #sidebar.active .nav-item {
     text-align: center;
    }
    #sidebar.active .nav-link [class*=fa]:first-of-type {
     font-size: 120%;
     display: block;
     margin: 0 auto;
    }
    #sidenav {
     margin-bottom: 0!important;
     overflow-y: auto;
     max-height: 84vh;
    }
    @media only screen and (orientation: landscape) {
     #sidenav {
      max-height: 73.5vh;
     }
    }
    #sidenav > ul > li > a {
     padding: .5rem;
    }
    body > .overlay.active {
     position: fixed; /* Sit on top of the page content */
     width: 100%; /* Full width (cover the whole page) */
     height: 100%; /* Full height (cover the whole page) */
     top: 0; 
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0,0,0,0.5); /* Black background with opacity */
     z-index: 2; /* Specify a stack order in case you're using a different order for other elements */}
    }
   }
   /* ===== minimum viewpoint: 800px - targets any device larger than mobile  ===== */
    @media only screen and (min-width: 769px) {
     .wallet-img img {
      max-height: 120px;
     }
    }
    @media (min-width: 1090px) {
     #header {
      padding-top: 1.5rem;
      /*padding-bottom: 2rem;*/
     }
     #header .logo:not(.brand) img {
      padding: .7rem;
      margin-top: -.5rem;
      margin-bottom: .25rem;
     }
     #sidebar {
      width: 275px!important;
      overflow: visible;
      position: relative;
      margin-left: 15px;
      padding-top: 1rem
     }
     .merchant #sidebar {
      width: 250px!important;
     }
     #sidebar.active {
      width: 160px!important;
      position: relative;
     }
     #sidebar + #content:not(.noside) {
      width: calc(100% - 275px)!important;
      padding-left: 1rem;
     }
     #sidebar + .merchant #content:not(.noside) {
      width: calc(100% - 250px)!important;
     }

     #sidebar.d-none + #content {
      width: 100%!important;
     }

     #sidebar.active + #content {
      width: calc(100% - 160px)!important;
     }
     #sidebar.active .nav-item {
      text-align: center;
     }
     #sidebar.active .nav-link [class*=fa]:first-of-type {
      font-size: 120%;
      display: block;
      margin: 0 auto;
     }
     #sidebar.active .nav-link span {
      font-size: 90%;
     }
     #sidebar.d-none + #content {
      width: 100%!important;
     }
     #sidebar.d-none + #content .container {
      padding-left: 3rem;
      padding-right: 3rem;
     }

     #sidenav > ul > li > a {
      padding: .5rem;
     }
     #sidenav {
      margin-top: -.5rem; /* new look, poppins font */
      z-index: 1;
     }
    }
   /* ===== END minimum viewpoint ===== */
   /* =====  ==== */
    @media only screen and (min-width: 850px) {
     #header .brand h1 {
      font-size: 1.75em;
     }
     #payselect-container > ul.orfixed > li:nth-of-type(2) {
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
      padding-top: 0;
      padding-bottom: 0;
     }
    }
   /* ===== establishing container width for devices smaller than 1199px ==== */
    @media only screen and (max-width: 1199px) {
     .container {
      max-width: 100%;
     }
    }
   /* ===== or ELSE this ===== */
    @media only screen and (min-width: 1200px) {
     .container {
      max-width: 1350px;
     }
     #header .brand h1 {
      font-size: 2.3em;
     }
     body.OB .container {
      max-width: 1140px;
     }
    }
   /* ===== end container width setting ===== */
  }
  @media (min-width: 768px) {
   .modal-xl {
    width: 90%;
    max-width:1200px;
   }
  }