/*
 * Copyright (C) 2013 salesforce.com, inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.THIS {
    display: none;
    position: absolute;
    border: 1px solid #B6B6B6;
    border-radius: 5px;
    background-color: #FFFFFF;
    overflow: visible;
    top: 0;
    /* @noflip@ */left: 0;
    -webkit-transform: translate3d(0,0,0);
}

.THIS.open,
.THIS.transitioning {
    display: block;
}


.THIS .container {
    position: relative;
    z-index: 2;
}

.THIS > .pointer {
    z-index: 1;
    width: calc(1.25rem + .0625rem);
    height: calc(1.25rem + .0625rem);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: 1px solid #d8dde6;
    /* @noflip@ */border-left: 1px solid #d8dde6;
    background: #fff;
    position: absolute;
    top: 0;
    /* @noflip@ */left: 0;
}

.THIS.east > .pointer {
    border:0;
    border-left: 1px solid #d8dde6;
    border-bottom: 1px solid #d8dde6;
}

.THIS.west > .pointer {
    border:0;
    border-right: 1px solid #d8dde6;
    border-top: 1px solid #d8dde6;
}

.THIS.north > .pointer {
    border:0;
    border-bottom: 1px solid #d8dde6;
    border-right: 1px solid #d8dde6;
}

.THIS div[role=document] {
    overflow: hidden;
    height: 100%;
}

.THIS .content {
    padding: 1px 14px;
}

.THIS .uiButton.closeBtn {
    position: absolute;
    right: 0px;
    font-family: Arial;
    font-size: 25px;
    overflow: visible; /* for outline */
    background: transparent;
    border: none;
    box-shadow: none;
    top: 0px;
    z-index: 1;
}

.THIS .panel-header {
    position: relative;
}

.THIS .panel-content {
    overflow: auto;
    /* this rule enable native scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    height: 100%;
}

/* That's a fix for iOS and native scrolling */
.THIS .IOS.container .panel-content > * {
    transform : translate3d(0, 0, 0);
}

/* That's a fix for safari/edge flicker which disable the opacity animation*/
.THIS.movefrombottom {
    visibility: visible;
    animation: movefrombottomnoopacity .1s ease-out backwards;
}
    /* Enable opacity animation if it's Chrome*/
    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
        .THIS.movefrombottom {
            animation: movefrombottom .2s ease both;
        }
    }
    /* Enable opacity animation if it's Firefox*/
    @media all and (min--moz-device-pixel-ratio:0) and (min-width: 0px) { 
        .THIS.movefrombottom {
            animation: movefrombottom .2s ease both;
        } 
    }

.THIS.movetobottom {
    visibility: visible;
    animation: movefrombottom .2s ease-in both reverse;
}
@keyframes movefrombottomnoopacity {
    from {
        -webkit-transform:translate3d(0px, 16px , 0px);
        transform:translate3d(0px, 16px , 0px);
    }
    to { 
        -webkit-transform:translate3d(0px, 0px , 0px);
        transform:translate3d(0px, 0px , 0px);
    }
}
@keyframes movefrombottom {
    from {
        -webkit-transform:translate3d(0px, 16px , 0px);
        transform:translate3d(0px, 16px , 0px);
        opacity: 0;
    }
    to { 
        -webkit-transform:translate3d(0px, 0px , 0px);
        transform:translate3d(0px, 0px , 0px);
        opacity: 1;
    }
}

.THIS.movefromtop {
    visibility: visible;
    animation: movefromtop .2s ease both;
}
.THIS.movetotop{
    visibility: visible;
    animation: movefromtop .2s ease both reverse;
}
@keyframes movefromtop {
    from {
        -webkit-transform:translate3d(0px, -16px , 0px);
        transform:translate3d(0px, -16px , 0px);
    }
    to { 
        -webkit-transform:translate3d(0px, 0px , 0px);
        transform:translate3d(0px, 0px , 0px);
    }
}

.THIS.movefromleft {
    visibility: visible;
    animation: movefromleft .2s ease both;
}
.THIS.movetoleft{
    visibility: visible;
    animation: movefromleft .2s ease both reverse;
}
@keyframes movefromleft {
    from {
        -webkit-transform:translate3d(-16px, 0px , 0px);
        transform:translate3d(-16px, 0px , 0px);
    }
    to { 
        -webkit-transform:translate3d(0px, 0px , 0px);
        transform:translate3d(0px, 0px , 0px);
    }
}

.THIS.movefromright {
    visibility: visible;
    animation: movefromright .2s ease both;
}
.THIS.movetoright {
    visibility: visible;
    animation: movefromright .2s ease both reverse;
}
@keyframes movefromright {
    from {
        -webkit-transform:translate3d(16px, 0px , 0px);
        transform:translate3d(16px, 0px , 0px);
    }
    to { 
        -webkit-transform:translate3d(0px, 0px , 0px);
        transform:translate3d(0px, 0px , 0px);
    }
}

.THIS.movefromcenter {
    visibility: visible;
    animation: movefromcenter .2s linear;
}
.THIS.movetocenter {
    visibility: visible;
    animation: movefromcenter .2s linear reverse;
}
@keyframes movefromcenter{
    from {
         -webkit-transform:scale3d(.97,.97,1);
         transform:scale3d(.97,.97,1);
    }
}

.THIS.movefrompop {
    visibility: visible;
    animation: movefrompop .2s linear;
}
.THIS.movetopop {
    visibility: visible;
    animation: movefrompop .2s ease both reverse;
}
@keyframes movefrompop {

    0% {
        -webkit-transform:scale3d(.97,.97,1);
        transform:scale3d(.97,.97,1);
    }

    60% {
        -webkit-transform:scale3d(1.02,1.02,1);
        transform:scale3d(1.02,1.02,1);
    }

    100% { 
       -webkit-transform:scale3d(1,1,1);
       transform:scale3d(1,1,1);
    }

}