.camera-window {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;

    background-color: #f6f9fc;
}

.disable-scroll {
    margin: 0;
    height: 100%; 
    overflow: hidden;
}

.camera-window.show {
	display: block;
}

.camera-window video {
    width: 100%;
    height: 100vh;
}

.camera-ui {
    display: block;
    position: absolute;
    left: 48%;
    bottom: 50px;
    width: 100%;
    height: 50px;
}

/* iphone 3 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) {
    .camera-ui {
        left: 41%;
    }
}
        
/* iphone 4 */
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) {
    .camera-ui {
        left: 41%;
    }
}

/* iphone 5 */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
    .camera-ui {
        left: 41%;
    }
}

/* iphone 6, 6s, 7, 8 */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
    .camera-ui {
        left: 41%;
    }
}
    
/* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
    .camera-ui {
        left: 41%;
    }
}

/* iphone X , XS, 11 Pro, 12 Mini */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .camera-ui {
        left: 41%;
    }
}

/* iphone 12, 12 Pro */
@media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) {
    .camera-ui {
        left: 46%;
    }
}

/* iphone XR, 11 */
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) {
    .camera-ui {
        left: 46%;
    }
}
    
/* iphone XS Max, 11 Pro Max */
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) {
    .camera-ui {
        left: 46%;
    }
}

/* iphone 12 Pro Max */
@media only screen and (min-device-width : 428px) and (max-device-height : 926px) and (-webkit-device-pixel-ratio : 3) {
    .camera-ui {
        left: 46%;
    }
}

.camera-ui button {
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: none;
    text-shadow: none;
    transition: box-shadow .1s linear;
    white-space: nowrap;

    background: #fff;

    box-shadow: 0 2px 1px rgb(28 31 63 / 6%);
    font-size: .875rem;
    height: 2.3125rem;
    line-height: .875rem;
    padding: .625rem 1.125rem;

    height: 2.1875rem;
    line-height: .7rem;
    min-height: auto;

    text-decoration: none;
    text-shadow: none;
    transition: box-shadow .1s linear;
    white-space: nowrap;

    cursor: pointer;
    -webkit-appearance: none;
    font-family: inherit;
    outline-style: none;

    -webkit-tap-highlight-color: transparent!important;

    margin: 0 8px 0 0;

    color: #3e7da6;
    font-weight: 700;
    display: inline-block;

    width: 78px;
    height: 78px;

    border: 3px solid black;
    border-radius: 28px;
    padding: 0;
}

.alert {
    position: relative;
}

.alert::after {
    border-radius: 50%;
    content: "";
    position: absolute;
    top: 50%;

    background-position: center;
    background-repeat: no-repeat;
    height: 1.625rem;
    left: 1.1875rem;
    margin-top: -.8125rem;
    width: 1.625rem;
}

.alert.success::after {
    background-color: #22a753;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xLjcwNyA0LjU0M0ExIDEgMCAwMC4yOTMgNS45NTdMNCA5Ljc1bDcuNzA3LTcuNzkzQTEgMSAwIDAwMTAuMjkzLjU0M0w0IDYuNzUgMS43MDcgNC41NDN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}

.alert.error::after {
    background-color: #e54c3b;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTS43MzcgMGEuMjI2LjIyNiAwIDAwLS4yMjUuMjM3TC45NSA5LjAwMWExLjA1MSAxLjA1MSAwIDAwMi4xIDBMMy40ODguMjM3QS4yMjYuMjI2IDAgMDAzLjI2MyAwSC43Mzd6TTMuNSAxMi41YTEuNSAxLjUgMCAxMS0zIDAgMS41IDEuNSAwIDAxMyAweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
}

.alert.camera::after {
    border-radius: 0;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjYW1lcmEiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWNhbWVyYSBmYS13LTE2IGZhLTJ4Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01MTIgMTQ0djI4OGMwIDI2LjUtMjEuNSA0OC00OCA0OEg0OGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhWMTQ0YzAtMjYuNSAyMS41LTQ4IDQ4LTQ4aDg4bDEyLjMtMzIuOWM3LTE4LjcgMjQuOS0zMS4xIDQ0LjktMzEuMWgxMjUuNWMyMCAwIDM3LjkgMTIuNCA0NC45IDMxLjFMMzc2IDk2aDg4YzI2LjUgMCA0OCAyMS41IDQ4IDQ4ek0zNzYgMjg4YzAtNjYuMi01My44LTEyMC0xMjAtMTIwcy0xMjAgNTMuOC0xMjAgMTIwIDUzLjggMTIwIDEyMCAxMjAgMTIwLTUzLjggMTIwLTEyMHptLTMyIDBjMCA0OC41LTM5LjUgODgtODggODhzLTg4LTM5LjUtODgtODggMzkuNS04OCA4OC04OCA4OCAzOS41IDg4IDg4eiIgY2xhc3M9IiI+PC9wYXRoPjwvc3ZnPg==)
}

.icon {
    width: 42px;
    height: 42px;
    display: inline-block;
}

.icon.camera {
    background-color: #e54c3b;
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjYW1lcmEiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWNhbWVyYSBmYS13LTE2IGZhLTJ4Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01MTIgMTQ0djI4OGMwIDI2LjUtMjEuNSA0OC00OCA0OEg0OGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhWMTQ0YzAtMjYuNSAyMS41LTQ4IDQ4LTQ4aDg4bDEyLjMtMzIuOWM3LTE4LjcgMjQuOS0zMS4xIDQ0LjktMzEuMWgxMjUuNWMyMCAwIDM3LjkgMTIuNCA0NC45IDMxLjFMMzc2IDk2aDg4YzI2LjUgMCA0OCAyMS41IDQ4IDQ4ek0zNzYgMjg4YzAtNjYuMi01My44LTEyMC0xMjAtMTIwcy0xMjAgNTMuOC0xMjAgMTIwIDUzLjggMTIwIDEyMCAxMjAgMTIwLTUzLjggMTIwLTEyMHptLTMyIDBjMCA0OC41LTM5LjUgODgtODggODhzLTg4LTM5LjUtODgtODggMzkuNS04OCA4OC04OCA4OCAzOS41IDg4IDg4eiIgY2xhc3M9IiI+PC9wYXRoPjwvc3ZnPg==)
}

.icon.circle {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjYW1lcmEiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLWNhbWVyYSBmYS13LTE2IGZhLTJ4Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik01MTIgMTQ0djI4OGMwIDI2LjUtMjEuNSA0OC00OCA0OEg0OGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhWMTQ0YzAtMjYuNSAyMS41LTQ4IDQ4LTQ4aDg4bDEyLjMtMzIuOWM3LTE4LjcgMjQuOS0zMS4xIDQ0LjktMzEuMWgxMjUuNWMyMCAwIDM3LjkgMTIuNCA0NC45IDMxLjFMMzc2IDk2aDg4YzI2LjUgMCA0OCAyMS41IDQ4IDQ4ek0zNzYgMjg4YzAtNjYuMi01My44LTEyMC0xMjAtMTIwcy0xMjAgNTMuOC0xMjAgMTIwIDUzLjggMTIwIDEyMCAxMjAgMTIwLTUzLjggMTIwLTEyMHptLTMyIDBjMCA0OC41LTM5LjUgODgtODggODhzLTg4LTM5LjUtODgtODggMzkuNS04OCA4OC04OCA4OCAzOS41IDg4IDg4eiIgY2xhc3M9IiI+PC9wYXRoPjwvc3ZnPg==)
}

.open-camera {
    font-weight: 500;
    line-height: 1.125rem;
    text-decoration: none;
    text-shadow: none;
    transition: box-shadow .1s linear;
    white-space: nowrap;

    background: #fff;
    border: 1px solid #d5d7e9;
    border-radius: 3px;
    box-shadow: 0 2px 1px rgb(28 31 63 / 6%);
    font-size: .875rem;
    height: 2.3125rem;
    line-height: .875rem;
    padding: .625rem 1.125rem;

    height: 2.1875rem;
    line-height: .7rem;
    min-height: auto;

    text-decoration: none;
    text-shadow: none;
    transition: box-shadow .1s linear;
    white-space: nowrap;

    cursor: pointer;
    -webkit-appearance: none;
    font-family: inherit;
    outline-style: none;

    -webkit-tap-highlight-color: transparent!important;

    margin: 0 8px 0 0;

    color: #242748;
    font-weight: 700;
    display: inline-block;

    padding-right: 54px;
}

.camera-loading {
    display: none;
}

.camera-loading.show {
    height: 100vh;
    display: flex;
    justify-content: center;
}

.camera-pinner {
    width: 60px;
}

.camera-view {
    display: none;
}

.camera-view.show {
    display: block;
}