﻿#dTooltipWrapper, .popup-wrapper {
    position: absolute;
    overflow: visible;
    display: none;
    z-index: 40;
}
#dTooltipWrapper.bounce {
    -webkit-animation: bounce .25s ease-in-out;
    -moz-animation: bounce .25s ease-in-out;
    animation: bounce .25s ease-in-out;
}
#dTooltipContent, .popup-content {
    box-shadow: 0 1px 8px rgba(0,0,0,0.5);
    background-color: #F6F6F6;
    border-color: #BBB;
    border-radius: 6px;
    border-width: 1px;    
    padding: 20px;
}
#dTooltipContent.internal {
    max-width: 300px;
}
#dTooltipContent.external {
    max-width: 450px;
}

/* ====================== DISH Tooltip Close button ==========================================*/
#dTtCloseButton, .popup-close { 
    position: absolute;
    cursor: pointer;
    height:18px;
    right: 5px;
    width:18px;
    left: auto;
    top: 5px;
}
#dTtCloseButton:after, .popup-close:after {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);

    font: normal 30px/18px arial, sans-serif;
    position: absolute;
    display: block;
    color: brown;
    content: "+";
    left: -2px;
}

/* ====================== DISH Tooltip Arrows ==========================================*/
#dTtArrow, #dTtArrow > b {
    position: absolute;
    overflow: hidden;
}
#dTtArrow.left, #dTtArrow.right {
    height: 27.9px;
    width: 18px;

    /* Vertically Centered */
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    top: 50%;
}
#dTtArrow.bottom, #dTtArrow.top {
    height: 18px;
    width: 27.9px;

    /* Horizontally Centered 
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    left: 50%;*/
}
#dTtArrow.left {
    left: -18px;
}
#dTtArrow.right {
    right: -18px;
}
#dTtArrow.bottom {
    bottom: -18px;
}
#dTtArrow.top {
    top: -18px;
}
#dTtArrow > b {
    border-left: 1px solid rgb(187, 187, 187);
    border-top: 1px solid rgb(187, 187, 187);
    box-shadow: 0 1px 8px rgba(0,0,0,0.5);
    background-color: rgb(246, 246, 246);
    height: 18px;
    width: 18px;
}
#dTtArrow.left > b {
    -webkit-transform: translate(9px, 4.5px) rotate(-45deg);
    -moz-transform: translate(9px, 4.5px) rotate(-45deg);
    -ms-transform: translate(9px, 4.5px) rotate(-45deg);
    -o-transform: translate(9px, 4.5px) rotate(-45deg);
    transform: translate(9px, 4.5px) rotate(-45deg); 
}
#dTtArrow.right > b {
    -moz-transform: translate(-9px, 4.5px) rotate(135deg);
    -ms-transform: translate(-9px, 4.5px) rotate(135deg);
    -o-transform: translate(-9px, 4.5px) rotate(135deg);
    -webkit-transform: translate(-9px, 4.5px) rotate(135deg);
    transform: translate(-9px, 4.5px) rotate(135deg);
}
#dTtArrow.bottom > b {
    -moz-transform: translate(4.5px, -9px) rotate(-135deg);
    -ms-transform: translate(4.5px, -9px) rotate(-135deg);
    -o-transform: translate(4.5px, -9px) rotate(-135deg);
    -webkit-transform: translate(4.5px, -9px) rotate(-135deg);
    transform: translate(4.5px, -9px) rotate(-135deg);
}
#dTtArrow.top > b {
    -moz-transform: translate(4.5px, 9px) rotate(45deg);
    -ms-transform: translate(4.5px, 9px) rotate(45deg);
    -o-transform: translate(4.5px, 9px) rotate(45deg);
    -webkit-transform: translate(4.5px, 9px) rotate(45deg);
    transform: translate(4.5px, 9px) rotate(45deg);
}

/*================= Bounce Animation ====================================================*/
.bounce {
    -webkit-animation-name: bounce;
    -webkit-animation-duration: .5s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: bounce;
    -moz-animation-duration: .5s;
    -moz-animation-timing-function: ease-in-out;
    animation-name: bounce;
    animation-duration: .5s;
    animation-timing-function: ease-in-out
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: scale(0.001)
    }
    67% {
        -webkit-transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes bounce {
    0% {
        -moz-transform: scale(0.001)
    }
    67% {
        -moz-transform: scale(1.1)
    }
    100% {
        -moz-transform: scale(1)
    }
}

@keyframes bounce {
    0% {
        transform: scale(0.001)
    }
    67% {
        transform: scale(1.1)
    }
    100% {
        transform: scale(1)
    }
}