/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.elementor-section,
.elementor-element.e-con {
    position: relative;
}

.magic-button-disabled-yes .bdt-magic-copy-item {
    display: none !important;
}

.elementor-section .bdt-magic-copy-item,
.elementor-element.e-con .bdt-magic-copy-item {
    position: absolute;
    top: 40%;
    right: 35px;
    transform: rotate(-90deg) translateY(-20px);
    transition: transform 850ms cubic-bezier(0.26, 0.75, 0.25, 1), opacity 450ms cubic-bezier(0.26, 0.75, 0.25, 1);
    transform-origin: right;
    display: flex;
    flex-direction: row;
    opacity: 0;
    visibility: hidden;
}

.elementor-section:hover .bdt-magic-copy-item,
.elementor-element.e-con:hover .bdt-magic-copy-item {
    opacity: 1;
    visibility: visible;
    transform: rotate(-90deg) translateY(0px);
    z-index: 500;
}

a.bdt-magic-copy-btn {
    background-color: #38443f;
    width: 100%;
    height: 36px;
    line-height: 36px !important;
    text-align: center;
    padding: 0 20px;
    display: inline-block;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    overflow: hidden;
    z-index: 999;
    transition: all .3s cubic-bezier(0.26, 0.75, 0.25, 1);
    font-weight: 700;
    animation: text-pulse 1s infinite;
}

a.bdt-magic-copy-btn:hover {
    background-color: #2a332f;
    color: #fff !important;
    text-decoration: none !important;
}

.bdt-magic-copy-item .bdt-magic-copy-info {
    transform: rotate(90deg) translateY(35px);
    transition: all .3s cubic-bezier(0.26, 0.75, 0.25, 1);
    opacity: 0;
    visibility: hidden;
}

.bdt-magic-copy-item .bdt-magic-copy-info .bdt-magic-copy-icon {
    background-color: #33bb80;
    width: 36px;
    height: 36px;
    line-height: 36px !important;
    text-align: center;
    fill: #fff;
    border-radius: 3px 3px 0 0;
    display: inline-block;
    transition: all .3s ease;
}

.bdt-magic-copy-item .bdt-magic-copy-info .bdt-magic-copy-icon:after {
    content: ' \003F';
    width: 22px;
    height: 22px;
    line-height: 20px;
    display: inline-block;
    font-size: 12px;
    border: 1px solid #fff;
    border-radius: 50%;
    color: #fff;
}

.bdt-magic-copy-item .bdt-magic-copy-icon:hover {
    background-color: #259766;
}


.bdt-magic-copy-item:hover .bdt-magic-copy-info {
    transform: rotate(90deg) translateY(0);
    opacity: 1;
    visibility: visible;

}

.bdt-magic-copy-item:hover .bdt-magic-copy-btn {
    border-radius: 3px 0 0 3px;
}

.bdt-copy-selected {
    outline: 1px solid rgba(51, 197, 255, 0.7);
    z-index: 1;
}

@keyframes text-pulse {
    0% {
        color: rgba(255, 255, 255, 1);
    }

    50% {
        color: rgba(255, 255, 255, 0.7);
    }

    100% {
        color: rgba(255, 255, 255, 1);
    }
}


/* -------------------------------------------------------------------
  Microtip
-------------------------------------------------*/

[aria-label][role~="tooltip"] {
    position: relative;
}

[aria-label][role~="tooltip"]::before,
[aria-label][role~="tooltip"]::after {
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
    opacity: 0;
    pointer-events: none;
    transition: all var(--microtip-transition-duration, .18s) var(--microtip-transition-easing, ease-in-out) var(--microtip-transition-delay, 0s);
    position: absolute;
    box-sizing: border-box;
    z-index: 10;
    transform-origin: top;
}

[aria-label][role~="tooltip"]::before {
    background-size: 100% auto !important;
    content: "";
}

[aria-label][role~="tooltip"]::after {
    background: rgba(17, 17, 17, .9);
    border-radius: 4px;
    color: #ffffff;
    content: attr(aria-label);
    font-size: var(--microtip-font-size, 13px);
    font-weight: var(--microtip-font-weight, normal);
    padding: 10px 15px;
    white-space: nowrap;
    box-sizing: content-box;
}

[aria-label][role~="tooltip"]:hover::before,
[aria-label][role~="tooltip"]:hover::after,
[aria-label][role~="tooltip"]:focus::before,
[aria-label][role~="tooltip"]:focus::after {
    opacity: 1;
    pointer-events: auto;
}



[role~="tooltip"][data-microtip-position="left"]::before,
[role~="tooltip"][data-microtip-position="left"]::after {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translate3d(10px, -50%, 0);
}

[role~="tooltip"][data-microtip-position="left"]::before {
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
    height: 22px;
    width: 8px;
    margin-right: 4px;
    margin-bottom: 0;
}

[role~="tooltip"][data-microtip-position="left"]::after {
    margin-right: 11px;
}

[role~="tooltip"][data-microtip-position="left"]:hover::before,
[role~="tooltip"][data-microtip-position="left"]:hover::after {
    transform: translate3d(0, -50%, 0);
}


@media screen and (max-width:768px) {
    a.bdt-magic-copy-btn {
        display: none !important;
    }
}