.api_offcanvas{display:none;visibility:hidden;position:fixed;top:0;bottom:0;z-index:9000;cursor:pointer;}
.api_offcanvas:before{
  content:"";position:absolute;top:0;bottom:0;left:0;right:0;background:rgba(0, 0, 0, 0.1);opacity:0;
  -webkit-transition:opacity 0.1s linear;-moz-transition:opacity 0.1s linear;-ms-transition:opacity 0.1s linear;-o-transition:opacity 0.1s linear;transition:opacity 0.1s linear;
}
.api_offcanvas_panel{
  cursor:default;position:absolute;top:0;bottom:0;width:85%;max-width:350px;padding:0 1rem 1rem 1rem;background:#fff;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  -webkit-box-shadow:0 2px 16px 0 rgba(0, 0, 0, .25);-moz-box-shadow:0 2px 16px 0 rgba(0, 0, 0, .25);box-shadow:0 2px 16px 0 rgba(0, 0, 0, .25);
  -webkit-transition:all 0.1s ease;-moz-transition:all 0.1s ease;-ms-transition:all 0.1s ease;-o-transition:all 0.1s ease;transition:all 0.1s ease;
}
.api_offcanvas_left{left:0;}
.api_offcanvas_left .api_offcanvas_panel{left:-350px;}
.api_offcanvas_left.is_open .api_offcanvas_panel{left:0;}

.api_offcanvas_right{right:0;}
.api_offcanvas_right .api_offcanvas_panel{right:-350px;}
.api_offcanvas_right.is_open .api_offcanvas_panel{right:0;}

.api_offcanvas.is_open{width:100%;touch-action:none;display:block;visibility:visible;opacity:1; }
.api_offcanvas.is_open:before{opacity:1;}
.api_offcanvas .api_close{display:flex;align-items:center;justify-content:center;width:max-content;max-width:100%;cursor:pointer;outline:none;z-index:9999;padding:4px;height:30px;}
.api_offcanvas .api_close [stroke*="#"]{stroke:currentcolor;}
.api_offcanvas .api_close:focus,
.api_offcanvas .api_close:active{background:rgba(0, 0, 0, 0.1);-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;}
.api_offcanvas_header{padding:1rem 0;position:relative;}
.api_offcanvas_header .api_close:first-child{position:relative;left:-10px;}
.api_offcanvas_header .api_close:last-child{position:relative;right:-10px;}
.api_offcanvas_divider{margin:0 -1rem 0; background:#f2f3f8;padding:.3rem 1rem;}
.api_offcanvas_toggle{float:left;padding:6px 7px;background:rgba(0, 0, 0, 0.65);cursor:pointer;line-height:0;position:relative; -webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
.api_offcanvas_toggle:hover,
.api_offcanvas_toggle:focus{background:rgba(0, 0, 0, 0.5);}
.api_offcanvas_toggle svg{ fill:#fff;}
@media (min-width:576px){
  .api_offcanvas_panel{width:350px;}
}
/*.api_offcanvas_bar{padding:6px 15px;overflow:hidden;color:#fff;background:#3092c0 linear-gradient(to bottom, #3298c8, #2e8cb8);-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}*/
/*
.api_offcanvas .api_close{
  display:flex;align-items:center;justify-content:center;position:absolute;top:50%;width:max-content;max-width:100%;cursor:pointer;outline:none;z-index:9999;padding:4px;height:30px;
  -webkit-transform:translate(0, -50%);-moz-transform:translate(0, -50%);-ms-transform:translate(0, -50%);-o-transform:translate(0, -50%);transform:translate(0, -50%);
}
*/