You are here

Home » API reference » OA Responsive Regions 7.2

oa_responsive_regions.css in OA Responsive Regions 7.2 

body {
  overflow-x: hidden;
}

/* Hide widgets marked as moving to mobile menus on mobile breakpoint */
@media (max-width: 767px) {
  .navbar .oa-navbar div[class*="-mobile-menu"] {
    display: none;
  }
}
.btn.oa-responsive-mobile.oa-responsive-regions-toggle-top {
  display: none;
}

.panel-panel-inner .oa-responsive-desktop.oa-responsive-region-top {
  display: none;
}

.panel-display .oa-responsive-desktop.oa-responsive-region-top {
  opacity: 0;
  color: white;
  background: #2f2f2f;
  position: absolute;
  top: -100%;
  height: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  top: -500px;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.panel-display .oa-responsive-desktop.oa-responsive-region-top .panel-pane {
  margin: 0;
}
body.oa-responsive-region-top-on .panel-display .oa-responsive-desktop.oa-responsive-region-top, .panel-display .oa-responsive-desktop.oa-responsive-region-top.oa-responsive-expand {
  opacity: 1;
  top: 0;
  z-index: 500;
}
.panel-display .oa-responsive-desktop.oa-responsive-region-top.oa-responsive-fixed {
  position: fixed;
}

@media (max-width: 767px) {
  .btn.oa-responsive-mobile.oa-responsive-regions-toggle-top {
    display: inline-block;
  }

  .panel-panel-inner .oa-responsive-mobile.oa-responsive-region-top {
    display: none;
  }

  .panel-display .oa-responsive-mobile.oa-responsive-region-top {
    color: white;
    opacity: 0;
    background: #2f2f2f;
    position: absolute;
    top: -100%;
    height: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    top: -1000px;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -webkit-transition: 300ms;
    transition: 300ms;
  }
  .panel-display .oa-responsive-mobile.oa-responsive-region-top .panel-pane {
    margin: 0;
  }
  body.oa-responsive-region-top-on .panel-display .oa-responsive-mobile.oa-responsive-region-top, .panel-display .oa-responsive-mobile.oa-responsive-region-top.oa-responsive-expand {
    opacity: 1;
    top: 0;
    z-index: 500;
  }
  .panel-display .oa-responsive-mobile.oa-responsive-region-top.oa-responsive-fixed {
    position: fixed;
  }
}
.btn.oa-responsive-regions-toggle-top span.oa-icon-hidden {
  display: inline;
}

body.oa-responsive-region-top-on .btn.oa-responsive-regions-toggle-top span.oa-icon-hidden {
  display: none;
}

.btn.oa-responsive-regions-toggle-top span.oa-icon-visible {
  display: none;
}

body.oa-responsive-region-top-on .btn.oa-responsive-regions-toggle-top span.oa-icon-visible {
  display: inline;
}

.btn.oa-responsive-mobile.oa-responsive-regions-toggle-right {
  display: none;
}

.panel-panel-inner .oa-responsive-desktop.oa-responsive-region-right {
  display: none;
}

.panel-display .oa-responsive-desktop.oa-responsive-region-right {
  opacity: 0;
  color: white;
  background: #2f2f2f;
  position: absolute;
  right: -100%;
  height: 100%;
  padding: 5px 0;
  width: 300px;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.panel-display .oa-responsive-desktop.oa-responsive-region-right .panel-pane {
  margin: 0;
}
body.oa-responsive-region-right-on .panel-display .oa-responsive-desktop.oa-responsive-region-right, .panel-display .oa-responsive-desktop.oa-responsive-region-right.oa-responsive-expand {
  opacity: 1;
  right: 0;
  z-index: 500;
}
.panel-display .oa-responsive-desktop.oa-responsive-region-right.oa-responsive-fixed {
  position: fixed;
}

@media (max-width: 767px) {
  .btn.oa-responsive-mobile.oa-responsive-regions-toggle-right {
    display: inline-block;
  }

  .panel-panel-inner .oa-responsive-mobile.oa-responsive-region-right {
    display: none;
  }

  .panel-display .oa-responsive-mobile.oa-responsive-region-right,
  .panel-display .oa-responsive-desktop.oa-responsive-region-right {
    width: 100%;
  }

  .panel-display .oa-responsive-mobile.oa-responsive-region-right {
    color: white;
    opacity: 0;
    background: #2f2f2f;
    position: absolute;
    right: -100%;
    height: 100%;
    padding: 5px 15px;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -webkit-transition: 300ms;
    transition: 300ms;
  }
  .panel-display .oa-responsive-mobile.oa-responsive-region-right .panel-pane {
    margin: 0;
  }
  body.oa-responsive-region-right-on .panel-display .oa-responsive-mobile.oa-responsive-region-right, .panel-display .oa-responsive-mobile.oa-responsive-region-right.oa-responsive-expand {
    opacity: 1;
    right: 0;
    z-index: 500;
  }
  .panel-display .oa-responsive-mobile.oa-responsive-region-right.oa-responsive-fixed {
    position: fixed;
  }
}
.btn.oa-responsive-regions-toggle-right span.oa-icon-hidden {
  display: inline;
}

body.oa-responsive-region-right-on .btn.oa-responsive-regions-toggle-right span.oa-icon-hidden {
  display: none;
}

.btn.oa-responsive-regions-toggle-right span.oa-icon-visible {
  display: none;
}

body.oa-responsive-region-right-on .btn.oa-responsive-regions-toggle-right span.oa-icon-visible {
  display: inline;
}

.btn.oa-responsive-mobile.oa-responsive-regions-toggle-left {
  display: none;
}

.panel-panel-inner .oa-responsive-desktop.oa-responsive-region-left {
  display: none;
}

.panel-display .oa-responsive-desktop.oa-responsive-region-left {
  opacity: 0;
  color: white;
  background: #2f2f2f;
  position: absolute;
  left: -100%;
  height: 100%;
  padding: 5px 0;
  width: 300px;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.panel-display .oa-responsive-desktop.oa-responsive-region-left .panel-pane {
  margin: 0;
}
body.oa-responsive-region-left-on .panel-display .oa-responsive-desktop.oa-responsive-region-left, .panel-display .oa-responsive-desktop.oa-responsive-region-left.oa-responsive-expand {
  opacity: 1;
  left: 0;
  z-index: 500;
}
.panel-display .oa-responsive-desktop.oa-responsive-region-left.oa-responsive-fixed {
  position: fixed;
}

@media (max-width: 767px) {
  .btn.oa-responsive-mobile.oa-responsive-regions-toggle-left {
    display: inline-block;
  }

  .panel-panel-inner .oa-responsive-mobile.oa-responsive-region-left {
    display: none;
  }

  .panel-display .oa-responsive-mobile.oa-responsive-region-left,
  .panel-display .oa-responsive-desktop.oa-responsive-region-left {
    width: 100%;
  }

  .panel-display .oa-responsive-mobile.oa-responsive-region-left {
    color: white;
    opacity: 0;
    background: #2f2f2f;
    position: absolute;
    left: -100%;
    height: 100%;
    padding: 5px 15px;
    top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -webkit-transition: 300ms;
    transition: 300ms;
  }
  .panel-display .oa-responsive-mobile.oa-responsive-region-left .panel-pane {
    margin: 0;
  }
  body.oa-responsive-region-left-on .panel-display .oa-responsive-mobile.oa-responsive-region-left, .panel-display .oa-responsive-mobile.oa-responsive-region-left.oa-responsive-expand {
    opacity: 1;
    left: 0;
    z-index: 500;
  }
  .panel-display .oa-responsive-mobile.oa-responsive-region-left.oa-responsive-fixed {
    position: fixed;
  }
}
.btn.oa-responsive-regions-toggle-left span.oa-icon-hidden {
  display: inline;
}

body.oa-responsive-region-left-on .btn.oa-responsive-regions-toggle-left span.oa-icon-hidden {
  display: none;
}

.btn.oa-responsive-regions-toggle-left span.oa-icon-visible {
  display: none;
}

body.oa-responsive-region-left-on .btn.oa-responsive-regions-toggle-left span.oa-icon-visible {
  display: inline;
}

.btn.oa-responsive-mobile.oa-responsive-regions-toggle-bottom {
  display: none;
}

.panel-panel-inner .oa-responsive-desktop.oa-responsive-region-bottom {
  display: none;
}

.panel-display .oa-responsive-desktop.oa-responsive-region-bottom {
  opacity: 0;
  color: white;
  background: #2f2f2f;
  position: absolute;
  bottom: -100%;
  height: 100%;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  bottom: -500px;
  -moz-transition: 300ms;
  -o-transition: 300ms;
  -webkit-transition: 300ms;
  transition: 300ms;
}
.panel-display .oa-responsive-desktop.oa-responsive-region-bottom .panel-pane {
  margin: 0;
}
body.oa-responsive-region-bottom-on .panel-display .oa-responsive-desktop.oa-responsive-region-bottom, .panel-display .oa-responsive-desktop.oa-responsive-region-bottom.oa-responsive-expand {
  opacity: 1;
  bottom: 0;
  z-index: 500;
}
.panel-display .oa-responsive-desktop.oa-responsive-region-bottom.oa-responsive-fixed {
  position: fixed;
}

@media (max-width: 767px) {
  .btn.oa-responsive-mobile.oa-responsive-regions-toggle-bottom {
    display: inline-block;
  }

  .panel-panel-inner .oa-responsive-mobile.oa-responsive-region-bottom {
    display: none;
  }

  .panel-display .oa-responsive-mobile.oa-responsive-region-bottom {
    color: white;
    opacity: 0;
    background: #2f2f2f;
    position: absolute;
    bottom: -100%;
    height: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    left: 0;
    right: 0;
    bottom: -1000px;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    -webkit-transition: 300ms;
    transition: 300ms;
  }
  .panel-display .oa-responsive-mobile.oa-responsive-region-bottom .panel-pane {
    margin: 0;
  }
  body.oa-responsive-region-bottom-on .panel-display .oa-responsive-mobile.oa-responsive-region-bottom, .panel-display .oa-responsive-mobile.oa-responsive-region-bottom.oa-responsive-expand {
    opacity: 1;
    bottom: 0;
    z-index: 500;
  }
  .panel-display .oa-responsive-mobile.oa-responsive-region-bottom.oa-responsive-fixed {
    position: fixed;
  }
}
.btn.oa-responsive-regions-toggle-bottom span.oa-icon-hidden {
  display: inline;
}

body.oa-responsive-region-bottom-on .btn.oa-responsive-regions-toggle-bottom span.oa-icon-hidden {
  display: none;
}

.btn.oa-responsive-regions-toggle-bottom span.oa-icon-visible {
  display: none;
}

body.oa-responsive-region-bottom-on .btn.oa-responsive-regions-toggle-bottom span.oa-icon-visible {
  display: inline;
}

.pane-oa-responsive-regions-toggle {
  display: inline-block;
}

@media (max-width: 991px) and (min-width: 481px) {
  body.oa-responsive-region-top-on .panel-display .oa-responsive-desktop.oa-responsive-region-top {
    top: -70px;
  }
}
@media (max-width: 991px) {
  .row.oa-responsive-region-row-bottom {
    margin-top: 30px;
  }
}
.oa-responsive-fluid {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

.row.oa-responsive-region-row-left.oa-responsive-region-row-right {
  overflow-x: hidden;
}

.row.oa-responsive-region-row-bottom .panel-pane {
  margin-bottom: 0;
}

.oa-hidden {
  visibility: hidden;
}

.container {
  max-width: 100%;
}

.row {
  position: relative;
}

.row > .panel-panel {
  min-height: 0px;
}

.oa-responsive-regions-mobile {
  display: none;
}
.oa-responsive-regions-mobile .oa-mobile-icon.user {
  padding: 0;
}

/* Allow mobile popups to fill entire width */
.pane-oa-responsive-regions-mobile.panel-pane {
  position: static;
}
.pane-oa-responsive-regions-mobile > .pane-content {
  position: static;
}
.pane-oa-responsive-regions-mobile > .pane-content > .oa-responsive-regions-mobile .oa-navbar-inner {
  position: absolute;
  width: 100%;
  left: 0;
  top: 44px;
  z-index: 1001;
}
.pane-oa-responsive-regions-mobile > .pane-content > .oa-responsive-regions-mobile > .collapsing {
  position: static;
  overflow: inherit;
}

ul.dropdown-menu.oa-mobile-expanded {
  display: block;
  width: 100%;
}

@media (max-width: 767px) {
  .oa-responsive-regions-mobile.sm {
    display: inline-block;
  }
}
@media (max-width: 992px) {
  .oa-responsive-regions-mobile.md {
    display: inline-block;
  }
}
@media (min-width: 992px) {
  .oa-responsive-regions-mobile.lg {
    display: inline-block;
  }
}

File

css/oa_responsive_regions.css
View source 
  1. body {

  2.   overflow-x: hidden;

  3. }

  4. 

  5. /* Hide widgets marked as moving to mobile menus on mobile breakpoint */

  6. @media (max-width: 767px) {

  7.   .navbar .oa-navbar div[class*="-mobile-menu"] {

  8.     display: none;

  9.   }

  10. }

  11. .btn.oa-responsive-mobile.oa-responsive-regions-toggle-top {

  12.   display: none;

  13. }

  14. 

  15. .panel-panel-inner .oa-responsive-desktop.oa-responsive-region-top {

  16.   display: none;

  17. }

  18. 

  19. .panel-display .oa-responsive-desktop.oa-responsive-region-top {

  20.   opacity: 0;

  21.   color: white;

  22.   background: #2f2f2f;

  23.   position: absolute;

  24.   top: -100%;

  25.   height: 100%;

  26.   width: 100%;

  27.   height: auto;

  28.   margin: 0;

  29.   padding: 0;

  30.   left: 0;

  31.   right: 0;

  32.   top: -500px;

  33.   -moz-transition: 300ms;

  34.   -o-transition: 300ms;

  35.   -webkit-transition: 300ms;

  36.   transition: 300ms;

  37. }

  38. .panel-display .oa-responsive-desktop.oa-responsive-region-top .panel-pane {

  39.   margin: 0;

  40. }

  41. body.oa-responsive-region-top-on .panel-display .oa-responsive-desktop.oa-responsive-region-top, .panel-display .oa-responsive-desktop.oa-responsive-region-top.oa-responsive-expand {

  42.   opacity: 1;

  43.   top: 0;

  44.   z-index: 500;

  45. }

  46. .panel-display .oa-responsive-desktop.oa-responsive-region-top.oa-responsive-fixed {

  47.   position: fixed;

  48. }

  49. 

  50. @media (max-width: 767px) {

  51.   .btn.oa-responsive-mobile.oa-responsive-regions-toggle-top {

  52.     display: inline-block;

  53.   }

  54. 

  55.   .panel-panel-inner .oa-responsive-mobile.oa-responsive-region-top {

  56.     display: none;

  57.   }

  58. 

  59.   .panel-display .oa-responsive-mobile.oa-responsive-region-top {

  60.     color: white;

  61.     opacity: 0;

  62.     background: #2f2f2f;

  63.     position: absolute;

  64.     top: -100%;

  65.     height: 100%;

  66.     height: auto;

  67.     margin: 0;

  68.     padding: 0;

  69.     left: 0;

  70.     right: 0;

  71.     top: -1000px;

  72.     -moz-transition: 300ms;

  73.     -o-transition: 300ms;

  74.     -webkit-transition: 300ms;

  75.     transition: 300ms;

  76.   }

  77.   .panel-display .oa-responsive-mobile.oa-responsive-region-top .panel-pane {

  78.     margin: 0;

  79.   }

  80.   body.oa-responsive-region-top-on .panel-display .oa-responsive-mobile.oa-responsive-region-top, .panel-display .oa-responsive-mobile.oa-responsive-region-top.oa-responsive-expand {

  81.     opacity: 1;

  82.     top: 0;

  83.     z-index: 500;

  84.   }

  85.   .panel-display .oa-responsive-mobile.oa-responsive-region-top.oa-responsive-fixed {

  86.     position: fixed;

  87.   }

  88. }

  89. .btn.oa-responsive-regions-toggle-top span.oa-icon-hidden {

  90.   display: inline;

  91. }

  92. 

  93. body.oa-responsive-region-top-on .btn.oa-responsive-regions-toggle-top span.oa-icon-hidden {

  94.   display: none;

  95. }

  96. 

  97. .btn.oa-responsive-regions-toggle-top span.oa-icon-visible {

  98.   display: none;

  99. }

  100. 

  101. body.oa-responsive-region-top-on .btn.oa-responsive-regions-toggle-top span.oa-icon-visible {

  102.   display: inline;

  103. }

  104. 

  105. .btn.oa-responsive-mobile.oa-responsive-regions-toggle-right {

  106.   display: none;

  107. }

  108. 

  109. .panel-panel-inner .oa-responsive-desktop.oa-responsive-region-right {

  110.   display: none;

  111. }

  112. 

  113. .panel-display .oa-responsive-desktop.oa-responsive-region-right {

  114.   opacity: 0;

  115.   color: white;

  116.   background: #2f2f2f;

  117.   position: absolute;

  118.   right: -100%;

  119.   height: 100%;

  120.   padding: 5px 0;

  121.   width: 300px;

  122.   top: 0;

  123.   overflow-x: hidden;

  124.   overflow-y: auto;

  125.   -moz-transition: 300ms;

  126.   -o-transition: 300ms;

  127.   -webkit-transition: 300ms;

  128.   transition: 300ms;

  129. }

  130. .panel-display .oa-responsive-desktop.oa-responsive-region-right .panel-pane {

  131.   margin: 0;

  132. }

  133. body.oa-responsive-region-right-on .panel-display .oa-responsive-desktop.oa-responsive-region-right, .panel-display .oa-responsive-desktop.oa-responsive-region-right.oa-responsive-expand {

  134.   opacity: 1;

  135.   right: 0;

  136.   z-index: 500;

  137. }

  138. .panel-display .oa-responsive-desktop.oa-responsive-region-right.oa-responsive-fixed {

  139.   position: fixed;

  140. }

  141. 

  142. @media (max-width: 767px) {

  143.   .btn.oa-responsive-mobile.oa-responsive-regions-toggle-right {

  144.     display: inline-block;

  145.   }

  146. 

  147.   .panel-panel-inner .oa-responsive-mobile.oa-responsive-region-right {

  148.     display: none;

  149.   }

  150. 

  151.   .panel-display .oa-responsive-mobile.oa-responsive-region-right,

  152.   .panel-display .oa-responsive-desktop.oa-responsive-region-right {

  153.     width: 100%;

  154.   }

  155. 

  156.   .panel-display .oa-responsive-mobile.oa-responsive-region-right {

  157.     color: white;

  158.     opacity: 0;

  159.     background: #2f2f2f;

  160.     position: absolute;

  161.     right: -100%;

  162.     height: 100%;

  163.     padding: 5px 15px;

  164.     top: 0;

  165.     overflow-x: hidden;

  166.     overflow-y: auto;

  167.     -moz-transition: 300ms;

  168.     -o-transition: 300ms;

  169.     -webkit-transition: 300ms;

  170.     transition: 300ms;

  171.   }

  172.   .panel-display .oa-responsive-mobile.oa-responsive-region-right .panel-pane {

  173.     margin: 0;

  174.   }

  175.   body.oa-responsive-region-right-on .panel-display .oa-responsive-mobile.oa-responsive-region-right, .panel-display .oa-responsive-mobile.oa-responsive-region-right.oa-responsive-expand {

  176.     opacity: 1;

  177.     right: 0;

  178.     z-index: 500;

  179.   }

  180.   .panel-display .oa-responsive-mobile.oa-responsive-region-right.oa-responsive-fixed {

  181.     position: fixed;

  182.   }

  183. }

  184. .btn.oa-responsive-regions-toggle-right span.oa-icon-hidden {

  185.   display: inline;

  186. }

  187. 

  188. body.oa-responsive-region-right-on .btn.oa-responsive-regions-toggle-right span.oa-icon-hidden {

  189.   display: none;

  190. }

  191. 

  192. .btn.oa-responsive-regions-toggle-right span.oa-icon-visible {

  193.   display: none;

  194. }

  195. 

  196. body.oa-responsive-region-right-on .btn.oa-responsive-regions-toggle-right span.oa-icon-visible {

  197.   display: inline;

  198. }

  199. 

  200. .btn.oa-responsive-mobile.oa-responsive-regions-toggle-left {

  201.   display: none;

  202. }

  203. 

  204. .panel-panel-inner .oa-responsive-desktop.oa-responsive-region-left {

  205.   display: none;

  206. }

  207. 

  208. .panel-display .oa-responsive-desktop.oa-responsive-region-left {

  209.   opacity: 0;

  210.   color: white;

  211.   background: #2f2f2f;

  212.   position: absolute;

  213.   left: -100%;

  214.   height: 100%;

  215.   padding: 5px 0;

  216.   width: 300px;

  217.   top: 0;

  218.   overflow-x: hidden;

  219.   overflow-y: auto;

  220.   -moz-transition: 300ms;

  221.   -o-transition: 300ms;

  222.   -webkit-transition: 300ms;

  223.   transition: 300ms;

  224. }

  225. .panel-display .oa-responsive-desktop.oa-responsive-region-left .panel-pane {

  226.   margin: 0;

  227. }

  228. body.oa-responsive-region-left-on .panel-display .oa-responsive-desktop.oa-responsive-region-left, .panel-display .oa-responsive-desktop.oa-responsive-region-left.oa-responsive-expand {

  229.   opacity: 1;

  230.   left: 0;

  231.   z-index: 500;

  232. }

  233. .panel-display .oa-responsive-desktop.oa-responsive-region-left.oa-responsive-fixed {

  234.   position: fixed;

  235. }

  236. 

  237. @media (max-width: 767px) {

  238.   .btn.oa-responsive-mobile.oa-responsive-regions-toggle-left {

  239.     display: inline-block;

  240.   }

  241. 

  242.   .panel-panel-inner .oa-responsive-mobile.oa-responsive-region-left {

  243.     display: none;

  244.   }

  245. 

  246.   .panel-display .oa-responsive-mobile.oa-responsive-region-left,

  247.   .panel-display .oa-responsive-desktop.oa-responsive-region-left {

  248.     width: 100%;

  249.   }

  250. 

  251.   .panel-display .oa-responsive-mobile.oa-responsive-region-left {

  252.     color: white;

  253.     opacity: 0;

  254.     background: #2f2f2f;

  255.     position: absolute;

  256.     left: -100%;

  257.     height: 100%;

  258.     padding: 5px 15px;

  259.     top: 0;

  260.     overflow-x: hidden;

  261.     overflow-y: auto;

  262.     -moz-transition: 300ms;

  263.     -o-transition: 300ms;

  264.     -webkit-transition: 300ms;

  265.     transition: 300ms;

  266.   }

  267.   .panel-display .oa-responsive-mobile.oa-responsive-region-left .panel-pane {

  268.     margin: 0;

  269.   }

  270.   body.oa-responsive-region-left-on .panel-display .oa-responsive-mobile.oa-responsive-region-left, .panel-display .oa-responsive-mobile.oa-responsive-region-left.oa-responsive-expand {

  271.     opacity: 1;

  272.     left: 0;

  273.     z-index: 500;

  274.   }

  275.   .panel-display .oa-responsive-mobile.oa-responsive-region-left.oa-responsive-fixed {

  276.     position: fixed;

  277.   }

  278. }

  279. .btn.oa-responsive-regions-toggle-left span.oa-icon-hidden {

  280.   display: inline;

  281. }

  282. 

  283. body.oa-responsive-region-left-on .btn.oa-responsive-regions-toggle-left span.oa-icon-hidden {

  284.   display: none;

  285. }

  286. 

  287. .btn.oa-responsive-regions-toggle-left span.oa-icon-visible {

  288.   display: none;

  289. }

  290. 

  291. body.oa-responsive-region-left-on .btn.oa-responsive-regions-toggle-left span.oa-icon-visible {

  292.   display: inline;

  293. }

  294. 

  295. .btn.oa-responsive-mobile.oa-responsive-regions-toggle-bottom {

  296.   display: none;

  297. }

  298. 

  299. .panel-panel-inner .oa-responsive-desktop.oa-responsive-region-bottom {

  300.   display: none;

  301. }

  302. 

  303. .panel-display .oa-responsive-desktop.oa-responsive-region-bottom {

  304.   opacity: 0;

  305.   color: white;

  306.   background: #2f2f2f;

  307.   position: absolute;

  308.   bottom: -100%;

  309.   height: 100%;

  310.   width: 100%;

  311.   height: auto;

  312.   margin: 0;

  313.   padding: 0;

  314.   left: 0;

  315.   right: 0;

  316.   bottom: -500px;

  317.   -moz-transition: 300ms;

  318.   -o-transition: 300ms;

  319.   -webkit-transition: 300ms;

  320.   transition: 300ms;

  321. }

  322. .panel-display .oa-responsive-desktop.oa-responsive-region-bottom .panel-pane {

  323.   margin: 0;

  324. }

  325. body.oa-responsive-region-bottom-on .panel-display .oa-responsive-desktop.oa-responsive-region-bottom, .panel-display .oa-responsive-desktop.oa-responsive-region-bottom.oa-responsive-expand {

  326.   opacity: 1;

  327.   bottom: 0;

  328.   z-index: 500;

  329. }

  330. .panel-display .oa-responsive-desktop.oa-responsive-region-bottom.oa-responsive-fixed {

  331.   position: fixed;

  332. }

  333. 

  334. @media (max-width: 767px) {

  335.   .btn.oa-responsive-mobile.oa-responsive-regions-toggle-bottom {

  336.     display: inline-block;

  337.   }

  338. 

  339.   .panel-panel-inner .oa-responsive-mobile.oa-responsive-region-bottom {

  340.     display: none;

  341.   }

  342. 

  343.   .panel-display .oa-responsive-mobile.oa-responsive-region-bottom {

  344.     color: white;

  345.     opacity: 0;

  346.     background: #2f2f2f;

  347.     position: absolute;

  348.     bottom: -100%;

  349.     height: 100%;

  350.     height: auto;

  351.     margin: 0;

  352.     padding: 0;

  353.     left: 0;

  354.     right: 0;

  355.     bottom: -1000px;

  356.     -moz-transition: 300ms;

  357.     -o-transition: 300ms;

  358.     -webkit-transition: 300ms;

  359.     transition: 300ms;

  360.   }

  361.   .panel-display .oa-responsive-mobile.oa-responsive-region-bottom .panel-pane {

  362.     margin: 0;

  363.   }

  364.   body.oa-responsive-region-bottom-on .panel-display .oa-responsive-mobile.oa-responsive-region-bottom, .panel-display .oa-responsive-mobile.oa-responsive-region-bottom.oa-responsive-expand {

  365.     opacity: 1;

  366.     bottom: 0;

  367.     z-index: 500;

  368.   }

  369.   .panel-display .oa-responsive-mobile.oa-responsive-region-bottom.oa-responsive-fixed {

  370.     position: fixed;

  371.   }

  372. }

  373. .btn.oa-responsive-regions-toggle-bottom span.oa-icon-hidden {

  374.   display: inline;

  375. }

  376. 

  377. body.oa-responsive-region-bottom-on .btn.oa-responsive-regions-toggle-bottom span.oa-icon-hidden {

  378.   display: none;

  379. }

  380. 

  381. .btn.oa-responsive-regions-toggle-bottom span.oa-icon-visible {

  382.   display: none;

  383. }

  384. 

  385. body.oa-responsive-region-bottom-on .btn.oa-responsive-regions-toggle-bottom span.oa-icon-visible {

  386.   display: inline;

  387. }

  388. 

  389. .pane-oa-responsive-regions-toggle {

  390.   display: inline-block;

  391. }

  392. 

  393. @media (max-width: 991px) and (min-width: 481px) {

  394.   body.oa-responsive-region-top-on .panel-display .oa-responsive-desktop.oa-responsive-region-top {

  395.     top: -70px;

  396.   }

  397. }

  398. @media (max-width: 991px) {

  399.   .row.oa-responsive-region-row-bottom {

  400.     margin-top: 30px;

  401.   }

  402. }

  403. .oa-responsive-fluid {

  404.   max-width: 1170px;

  405.   margin-left: auto;

  406.   margin-right: auto;

  407. }

  408. 

  409. .row.oa-responsive-region-row-left.oa-responsive-region-row-right {

  410.   overflow-x: hidden;

  411. }

  412. 

  413. .row.oa-responsive-region-row-bottom .panel-pane {

  414.   margin-bottom: 0;

  415. }

  416. 

  417. .oa-hidden {

  418.   visibility: hidden;

  419. }

  420. 

  421. .container {

  422.   max-width: 100%;

  423. }

  424. 

  425. .row {

  426.   position: relative;

  427. }

  428. 

  429. .row > .panel-panel {

  430.   min-height: 0px;

  431. }

  432. 

  433. .oa-responsive-regions-mobile {

  434.   display: none;

  435. }

  436. .oa-responsive-regions-mobile .oa-mobile-icon.user {

  437.   padding: 0;

  438. }

  439. 

  440. /* Allow mobile popups to fill entire width */

  441. .pane-oa-responsive-regions-mobile.panel-pane {

  442.   position: static;

  443. }

  444. .pane-oa-responsive-regions-mobile > .pane-content {

  445.   position: static;

  446. }

  447. .pane-oa-responsive-regions-mobile > .pane-content > .oa-responsive-regions-mobile .oa-navbar-inner {

  448.   position: absolute;

  449.   width: 100%;

  450.   left: 0;

  451.   top: 44px;

  452.   z-index: 1001;

  453. }

  454. .pane-oa-responsive-regions-mobile > .pane-content > .oa-responsive-regions-mobile > .collapsing {

  455.   position: static;

  456.   overflow: inherit;

  457. }

  458. 

  459. ul.dropdown-menu.oa-mobile-expanded {

  460.   display: block;

  461.   width: 100%;

  462. }

  463. 

  464. @media (max-width: 767px) {

  465.   .oa-responsive-regions-mobile.sm {

  466.     display: inline-block;

  467.   }

  468. }

  469. @media (max-width: 992px) {

  470.   .oa-responsive-regions-mobile.md {

  471.     display: inline-block;

  472.   }

  473. }

  474. @media (min-width: 992px) {

  475.   .oa-responsive-regions-mobile.lg {

  476.     display: inline-block;

  477.   }

  478. }