/* Modals */
 .modal-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    opacity: 0;
    pointer-events:none;
    visibility: hidden;
    z-index: 1000;
    @include transition( opacity 0.3s ease-in-out);
}
.modal-overlay.active {
    visibility: visible;
    pointer-events: all;
    opacity: 0.4;
}
.nofade.active ~ .modal-overlay {
    background-color: transparent;
}
 .cjs-scrolling-window .modal-overlay {
position: fixed;
 }

/* popover */
 .popover {
    position: absolute;
    width: 280px;
    height: auto;
    background-color: white;
    border-radius: 7px;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    @include transition( opacity 0.1s ease-in-out);
}
.popover.active {
    position: absolute;
    opacity: 1;
    pointer-events: all;
}
.popover button {
    display: block;
    width: 280px;
    border: none;
    border-bottom: 1px solid #c8c7cc;
    margin:0;
    padding: 10px;
    height: auto;
}
.popover button:last-child {
    border: none;
}
.poparrow {
    width: 26px;
    height: 12px;
    position: absolute;
    left: 0px;
    top: 0;
    z-index: 100;
    overflow: hidden;
}
.up .poparrow {
    bottom: -12px;
    top:auto;
}
.down .poparrow {
    top:-12px;
    bottom: auto;
}
.left .poparrow {
    right: -12px;
    left:auto;
    width: 12px;
    height: 26px;
}
.right .poparrow {
    left:-12px;
    right: auto;
    width: 12px;
    height: 26px;
}
.poparrow:after {
    content:' ';
    background: #fff;
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
   @include transform( rotate(45deg));
}
.popover.up .poparrow:after {
    top:-19px;
}
.popover.down .poparrow:after {
    top:5px;
}
.popover.left .poparrow:after {
    left:-19px;
}
.popover.right .poparrow:after {
    left:5px;
}
/* popup */
 .popup {
    position: absolute;
    background-color: #efeff4;
    width: 630px;
    height: 630px;
    left: 50%;
    top: 50%;
    margin-left: -315px;
    margin-top: -315px;
    z-index: 1100;
    @include transition( transform 0.3s ease-in-out, visibility 0.3s ease-in-out);
   @include transform( translate(0, 150%));   
}

 .cjs-scrolling-window .popup {
position: fixed;
visibility: hidden;
 }

.popup.active {
    display: block;
    position: absolute;    
   @include transform( translate(0, 0));
}

 .cjs-scrolling-window .popup.active {
visibility: visible;
 }


.noflexbox .popup {
    visibility: hidden;    
}

.noflexbox .popup.active {
    visibility: visible;
}

.cjs-transitions-native .popup {
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    margin-left: 0;
    margin-top: 0;
    width:auto;
    height: auto;
    z-index: 1100;
    @include transition( none);
   @include transform( none);
    display: none;
}
.cjs-transitions-native .popup.active {
    display: block;
   @include transform( none);
}


.cjs-transitions-native.cjs-shared-popup-active .chondric-page {
    display: none !important;
}

@if $supportMobile {

@media (max-width: 630px), (max-height: 630px)  {
    .popup {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        margin-left: 0;
        margin-top: 0;
       @include transform( translate(0, 101%));
    }
}
}

/* sidepanel */
 .sidepanel {
    position: absolute;
    display: none;
    top:0;
    bottom: 0;
    width: 260px;
    z-index: 1201;
    left: 0px;
    right: auto;
}

 .cjs-scrolling-window .sidepanel {
position: fixed;
 }



.sidepanel.right {
    right: 0px;
    left: auto;
}
.sidepanel.left {
    left: 0px;
    right: auto;
}


 .cjs-transitions-native .sidepanel {
position: absolute;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: auto !important;@include transform( none !important);
@include transition( none !important);
    display: none !important;
 }
 .cjs-transitions-native .sidepanel.active {
    display: block !important;
 }

/*

.sidepanel.active {
    display: block;
   @include transform( translate(0, 0));
}
*/
 .sidepanel .navbar {
    background: #000;
    border-bottom: 1px solid #333;
    color: white;
}
.sidepanel .navbar h1 {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-size: 17px;
    line-height: 44px;
    font-weight: 500;
    z-index: -1;
    text-overflow: ellipsis;
}
.sidepanel .body {
    background-color: #222;
    color: white;
}
.sidepanel .body h2 {
    color: white;
}
.sidepanel .body button {
}
.sidepanel .body button.menuitem {
    color: rgb(111, 111, 116);
    display: block;
    width: 260px;
    border: none;
    text-align: left;
    border-radius: 0;
    margin: 0;
    padding: 5px 15px;
    height: auto;
    border-bottom: 1px solid #aaa;
    border-top: 1px solid #aaa;
}
.sidepanel .body button.menuitem+button.menuitem {
    border-top: none;
}
.sidepanel .body button.menuitem.selected {
    color: #007aff;
    background-color: transparent;
}
.sidepanel .body button.menutile {
    width: 100%;
    margin: 5px 0;
    box-sizing: border-box;
    border: none;
    float: left;
    height: 50px;
    font-size: 8pt;
    color: rgb(111, 111, 116);
}
.sidepanel .body button.half {
    width: 50%;
}
.sidepanel .body button.third {
    width: 33.3%;
}
.sidepanel .body button.quarter {
    width: 25%;
}
.sidepanel .body button.menutile.selected {
    background-color: transparent;
    color: #007aff;
}
/*
.chondric-page.haspushpanel .body,
.chondric-page.haspushpanel .navbar,
.chondric-page.haspushpanel .tabbar
{
    @include transition( transform 0.3s ease-in-out);
}

.chondric-page.pushedleft .body,
.chondric-page.pushedleft .navbar,
.chondric-page.pushedleft .tabbar
{
   @include transform( translate(-261px, 0));
}

.chondric-page.pushedright .body,
.chondric-page.pushedright .navbar,
.chondric-page.pushedright .tabbar
{
   @include transform( translate(261px, 0));
}

.chondric-page.haspushpanel .sidepanel .body,
.chondric-page.haspushpanel .sidepanel .navbar,
.chondric-page.haspushpanel .sidepanel .tabbar
{
   @include transform( translate(0, 0));
}
*/