* {
    box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
}

html, div, img, ul, li, a, p, ol, body {
    margin: 0;
    padding: 0;
}
body {touch-action: none;
    font-family: "Karla", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;background-image: url('../images/desk-body-bg.jpg');
    background-repeat: no-repeat;background-size: 100% 100%;background-position: left top;
}
h3 {font-size: 19px;line-height: 26px;color: #212B27;font-weight: 700;margin: 0 0 10px;}

.content_area {display: block;width: 100%;height: 100%;}

.container {display: block;width: 100%;max-width: 1080px;margin: 0 auto;padding: 15px;text-align: center;
    position: relative;display: flex;height: 100%;align-items: center;
}
.site_logo {position: absolute;left: 15px;top: 15px;vertical-align: top;}
.site_logo img {display: inline-block;max-width: 120px;}
.site_logo.logo2 {left: auto;right: 15px;}

.welcome_box {display: flex;align-items: center;margin: 0 auto;width: 300px;min-height: 300px;background-color: #fff;
    box-shadow: 1.85px 1.85px 11.08px 4.62px #0000002E;border-radius: 15px;-moz-border-radius: 15px;
    -webkit-border-radius: 15px;padding: 15px 25px;position: relative;
}
.welcome_box .wcbox_inner {display: inline-block;width: 100%;}
.welcome_box h3 {margin: 0;}
.welcome_box p {font-size: 12px;line-height: 14px;color: #32403B;margin: 0;}
.welcome_box .wc_form {display: inline-block;width: 100%;margin: 15px 0 0;}
form .form_field {float: left;width: 100%;margin: 0 0 10px;}
form .form_control {float: left;width: 100%;border: solid 0.5px rgba(0,0,0,0.2);border-radius: 8px;-moz-border-radius: 8px;
    -webkit-border-radius: 8px;font-size: 12px;line-height: 16px;color: #000;font-weight: 400;
    padding: 6px 10px;outline: 0 !important;
}
.btn {display: inline-block;background-color: #FFF200;border-radius: 10px;-moz-border-radius: 10px;
    -webkit-border-radius: 10px;padding: 10px 40px;font-size: 15px;line-height: 20px;color: #000;
    font-weight: 700;border: 0;transition: 0.6s all;-moz-transition: 0.6s all;-webkit-transition: 0.6s all;
    cursor: pointer;text-decoration: none;
}
.btn:hover {opacity: 0.7;}

.welcome_box .loader {position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.5;
    align-items: center;display: none;
}
.welcome_box .loader.show {display: flex;}
.welcome_box .loader img {display: inline-block;max-width: 180px;margin: 0 auto;}

.camera_frame {float: left;width: 100%;text-align: center;}
#video {
    display: block; /* Ensure the video element is visible */
    background-color: #000; /* Add background color to see the video area */
}
#camera {
    display: inline-block;
}
#camera button {display: inline-block;margin: 5px 0;padding: 5px 15px;font-size: 15px;line-height: 22px;color: #000;
    cursor: pointer;
}

.choose_frame_box {display: inline-block;width: 100%;}
.choose_frame_box form .radio_field {display: inline-block;width: 50%;margin: 0 -2px;padding: 0 10px;}
.choose_frame_box form .radio_field input {display: inline-block;cursor: pointer;}
.choose_frame_box form .radio_field .thumb {display: inline-block;width: 100%;}
.choose_frame_box form .radio_field .thumb img {display: inline-block;max-width: 100px;}

.selfie_output {position: relative;overflow: hidden;display: none;text-align: center;width: 100%;
    margin: 0 auto;max-width: 320px;
}

.selfie_output .bg_image {display: inline-block;width: 100%;position: relative;z-index: 99;}
.selfie_output .selfie_thumb {display: none;width: 100%;max-width: 280px;height: auto;
    position: absolute;left: 20px;top: 32px;
}

.social_share {display: inline-block;margin: 6px 0 0;}
.social_share ul {display: inline-block;margin: 0;padding: 0;list-style: none;}
.social_share ul li {display: inline-block;margin: 0 4px;}
.social_share ul li a {display: inline-block;width: 36px;height: 36px;font-size: 18px;line-height: 36px;color: #000;
    font-weight: 700;border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%;
    background-color: #FFF200;text-align: center;transition: 0.6s all;-moz-transition: 0.6s all;
    -webkit-transition: 0.6s all;
}
.social_share ul li a:hover {opacity: 0.7;}

@media only screen and (max-width: 768px) {
    body {height: auto !important;}
    .container {display: block;padding: 10px 15px;}
    .site_logo {position: static;display: inline-block;text-align: center;margin: 0 5px 10px;}
    #camera {text-align: center;display: block;width: 100%;max-width: 320px;margin: 0 auto;}
    #camera video {display: inline-block;width: 100%;}
    
}
@media only screen and (max-width: 420px) {
    .selfie_output .selfie_thumb {max-width: 290px;}
}
@media only screen and (max-width: 340px) {
    .selfie_output .selfie_thumb {max-width: 270px;}
}