/*
 * jQuery Custom Modal
 * Created By: Omer Hussain
 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

.jcm-modal {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300;
    letter-spacing: 0 !important;
    line-height: 30px;
    position: fixed;
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 650px;
    min-height: 400px;
    z-index: 1001;
    opacity: 0;
    transition: all 300ms ease-in-out;
}

.jcm-modal.show {
    opacity: 1 !important;
    top: 50%;
}

.jcm-modal-header {
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    text-transform: capitalize;
    background-color: #5c6bc0;
    text-align: center;
    padding: 10px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
        0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.jcm-modal-footer {
    height: 50px;
    background-color: #8080802e;
    display: flex;
    box-sizing: border-box;
    padding: 10px 20px;
}

.jcm-modal-footer a {
    color: #0dcaf0;
    text-decoration: none;
}

.jcm-footer-btn {
    background-color: #5c6bc0;
    border: 0;
    color: #fff;
    padding: 0.5rem 1.6rem;
    font-size: 0.64rem;
    cursor: pointer;
    border-radius: 0.125rem;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
        0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -webkit-transition: color 0.15s ease-in-out,
        background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
        -webkit-box-shadow 0.15s ease-in-out;
    -o-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
        -webkit-box-shadow 0.15s ease-in-out;
    line-height: 16px;
}

.jcm-modal-subheading {
    font-size: 20px;
    text-align: center;
    padding: 20px;
}

.jcm-modal-subheading strong {
    font-weight: 700;
}

.jcm-faker-container {
    padding: 30px 0 16px;
    width: 500px;
    margin: 0 auto 20px;
    border-top: #ccc 2px solid;
    border-bottom: #ccc 2px solid;
}

.jcm-fake-it {
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
}

.jcm-fake-it-status {
    display: flex;
    align-items: center;
}

.jcm-problems {
    font-size: 12px;
    font-weight: 400;
}

.jcm-circle {
    display: inline-block;
    width: 110px;
    background-color: #dc3545;
    color: #fff;
    text-align: left;
    padding: 5px 10px;
    border-radius: 5px;
    margin-left: 10px;
    transition: all 0.3s cubic-bezier(0.67, 0.17, 0.4, 0.83);
}

.jcm-circle svg {
    transform: rotate(180deg);
    transition: all 0.5s;
    width: 30px;
    height: 40px;
}

.jcm-circle_done {
    width: 40px;
    height: 40px;
    background: mediumseagreen;
    border-radius: 50%;
    transform: rotate(-180deg);
    display: inline-block;
    padding: 0;
    text-align: center;
}

.jcm-circle_cancel {
    width: 40px;
    height: 40px;
    background: #dc3545;
    border-radius: 50%;
    transform: rotate(-180deg);
    display: inline-block;
    padding: 0;
    text-align: center;
}

.jcm-anim-btn-wrapper {
    display: flex;
    justify-content: center;
    padding-bottom: 25px;
}

.jcm-anim-btn,
.jcm-anim-btn *,
.jcm-anim-btn:after,
.jcm-anim-btn:before {
    border: 0 solid;
    box-sizing: border-box;
}

.jcm-anim-btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: button;
    background-color: #000;
    background-image: none;
    color: #fff;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
        Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size: 100%;
    font-weight: 900;
    line-height: 1.5;
    margin: 0;
    -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
    padding: 0;
    text-transform: uppercase;
}

.jcm-anim-btn:disabled {
    cursor: default;
}

.jcm-anim-btn:-moz-focusring {
    outline: auto;
}

.jcm-anim-btn svg {
    vertical-align: middle;
}

.jcm-anim-btn [hidden] {
    display: none;
}

.jcm-anim-btn {
    --thickness: 0.3rem;
    --roundness: 1.2rem;
    --color: #fff;
    --opacity: 0.6;
    --webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    background: none;
    background: #5c6bc0;
    border: none;
    border-radius: var(--roundness);
    color: var(--color);
    cursor: pointer;
    display: block;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.8rem 3rem;
    position: relative;
}

.jcm-anim-btn {
    filter: brightness(1.2);
}

.jcm-anim-btn:active {
    --opacity: 0;
}

.jcm-anim-btn svg {
    border-radius: var(--roundness);
    display: block;
    filter: url(#glow);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.jcm-anim-btn rect {
    fill: none;
    stroke: var(--color);
    stroke-width: var(--thickness);
    rx: var(--roundness);
    stroke-linejoin: round;
    stroke-dasharray: 185%;
    stroke-dashoffset: 80;
    -webkit-animation: snake 2s linear infinite;
    animation: snake 2s linear infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s;
    width: 100%;
}

.jcm-anim-btn rect {
    -webkit-animation-play-state: running;
    animation-play-state: running;
    opacity: var(--opacity);
}

@-webkit-keyframes snake {
    to {
        stroke-dashoffset: 370%;
    }
}

@keyframes snake {
    to {
        stroke-dashoffset: 370%;
    }
}

.jcm-sep {
    border-bottom: #ccc 1px solid;
    height: 1px;
    width: 500px;
    margin: 0 auto;
}

.jcm-ad-banner {
    padding: 20px;
    text-align: center;
}

.jcm-key-features {
    width: 515px;
    margin: 0 auto;
}

.jcm-kf-row {
    display: flex;
    flex-wrap: wrap;
}

.jcm-kf-col {
    width: 50%;
    flex: 0 0 auto;
    display: flex;
    box-sizing: border-box;
    padding: 10px 7px;
}

.jcm-kf-col:nth-child(1),
.jcm-kf-col:nth-child(3) {
    justify-content: end;
}

.jcm-kf-icon {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #ee1048;
    line-height: 30px;
    margin: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jcm-key-with-extra-brdr {
    position: relative;
}

.jcm-key-with-extra-brdr:after {
    position: absolute;
    content: '';
    width: 100px;
    height: 0;
    border-bottom: #ccc 1px solid;
    bottom: 0;
    right: -50px;
}

.jcm-install-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.jcm-num-bullet-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 53px;
}

.jcm-num-bullet-col-1 {
    width: 16.6666667%;
}

.jcm-num-bullet-col-2 {
    width: 83.33333333%;
    box-sizing: border-box;
    padding-left: 10px;
}

.jcm-num-bullet-col-2 img {
    max-width: 100%;
    height: auto;
}

.jcm-num-bullet {
    width: 70px;
    height: 70px;
    border: #83b5dc 3px solid;
    border-radius: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    font-weight: 400;
    margin: 0 auto;
}

.jcm-num-bullet.jcm-path {
    position: relative;
}

.jcm-num-bullet.jcm-path::after {
    content: '';
    display: block;
    width: 2px;
    height: 58px;
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    background-color: #ccc;
}

.jcm-input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.jcm-input-group input[type='text'] {
    flex: 1;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: #ccc 1px solid;
    padding: 0 10px;
    height: 35px;
}

.jcm-input-group button {
    border: 0;
    cursor: pointer;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jcm-input-group button svg {
    fill: #fff;
}

#jcm-url:focus {
    outline: 0 !important;
}

.jcm-browser-info {
    display: flex;
    justify-content: center;
    align-items: center;
}

.browser-icon {
    width: 50px;
    height: 50px;
    background-image: url(assets/main-desktop-browser-logos.png);
    background-repeat: no-repeat;
    background-size: auto 50px;
    margin: 0 3px 0 10px;
}

.Chrome {
    background-position: 0 0;
}

.Edge {
    background-position: -50px 0;
}

.Firefox {
    background-position: -100px 0;
}

.Opera {
    background-position: -150px 0;
}

.Safari {
    background-position: -200px 0;
}

.jcm-overlay-video {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.jcm-overlay-video video {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.jcm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    z-index: 1000;
}

.jcm-arrows {
    position: absolute;
    right: 10px;
    top: 280px;
    transform: rotate(180deg);
    z-index: 9999;
}

.jcm-chevron {
    position: absolute;
    width: 200px;
    height: 46px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move 3s ease-out infinite;
}

.jcm-chevron:first-child {
    animation: move 3s ease-out 1s infinite;
}

.jcm-chevron:nth-child(2) {
    animation: move 3s ease-out 2s infinite;
}

.jcm-chevron:before,
.jcm-chevron:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #2ac72a;
}

.jcm-chevron:before {
    left: 0;
    transform: skew(0deg, 40deg);
}

.jcm-chevron:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, -40deg);
}

.jcm-chevron-up {
    position: absolute;
    width: 80px;
    height: 28px;
    opacity: 0;
    transform: scale3d(0.5, 0.5, 0.5);
    animation: move-up 3s ease-out infinite;
}

.jcm-chevron-up:first-child {
    animation: move-up 3s ease-out 1s infinite;
}

.jcm-chevron-up:nth-child(2) {
    animation: move-up 3s ease-out 2s infinite;
}

.jcm-chevron-up:before,
.jcm-chevron-up:after {
    content: ' ';
    position: absolute;
    top: 0;
    height: 100%;
    width: 51%;
    background: #2ac72a;
}

.jcm-chevron-up:before {
    left: 0;
    transform: skew(0deg, -30deg);
}

.jcm-chevron-up:after {
    right: 0;
    width: 50%;
    transform: skew(0deg, 30deg);
}

@keyframes move-up {
    25% {
        opacity: 1;
    }

    33% {
        opacity: 1;
        transform: translateY(-90px);
    }

    67% {
        opacity: 1;
        transform: translateY(-120px);
    }

    100% {
        opacity: 0;
        transform: translateY(-150px) scale3d(0.5, 0.5, 0.5);
    }
}

@keyframes move {
    25% {
        opacity: 1;
    }

    33% {
        opacity: 1;
        transform: translateY(90px);
    }

    67% {
        opacity: 1;
        transform: translateY(150px);
    }

    100% {
        opacity: 0;
        transform: translateY(210px) scale3d(0.5, 0.5, 0.5);
    }
}