*{
            box-sizing: border-box;
        }
        html{
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
            margin: 0;
            background-color: #16161d;
            font-family: "Amazon Ember", sans-serif;
        }
        #video-preview {
            display: none;
            position: absolute;
            z-index: -1;
        }
        #camera-container{
            width: 100%;
            overflow: hidden;
            aspect-ratio: 1/1;
        }
        canvas#canvas-preview{
            transform: scaleX(-1);
        }
        /*#capturedImageContainer{
            width:500px;
            height:500px;
        }*/
        .controls-bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            z-index: 1;
            padding: 10px 10px;
            color: white;
            /*background-color: rgba(0, 0, 0, 0.3);*/
        }
        .fa {
            font-size: 25px;
            color: white;
            cursor: pointer;
            margin-right: 0;
            background-color: rgb(255 255 255 / 10%);
            padding: 25px;
            border-radius: 50%;
        }
        i.fas.fa-times {
            font-size: 25px;
            color: white;
            cursor: pointer;
            margin-right: 0;
            /* background-color: rgba(0, 0, 0, 0.3); */
            /* padding: 25px; */
            /* border-radius: 50%; */
        }
        i.fas.fa-rotate-left {
            font-size: 25px;
            color: white;
            cursor: pointer;
            margin-right: 0;
            /* background-color: rgba(0, 0, 0, 0.3); */
            /* padding: 25px; */
            /* border-radius: 50%; */
        }

        .double-round {
            position: relative;
            display: inline-block;
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: rgb(160 158 158 / 0%);
            color: #fff;
            text-align: center;
            line-height: 60px;
            cursor: pointer;
            border: 5px solid #fff;
        }

        .inner-circle {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid #fff;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }
        main, footer, header{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            gap: 10px;
            height: 50px;
            /*flex-grow: 1;*/
        }
        /*input#name,#user_phone,#user_nick_name,#user_email,#commitment,#user_id {*/
        /*    padding: 15px;*/
        /*    border-radius: 25px;*/
        /*    border: #fff;*/
        /*    width: 100%;*/
        /*}*/
        textarea#description {
            padding: 15px;
            border-radius: 25px;
            border: #fff;
            width: 100%;
        }
        img#flipCamera {
            cursor: pointer;
            margin-right: 0;
            background-color: rgb(255 255 255 / 10%);
            padding: 10px;
            border-radius: 50%;
        }
        #sendImage {
            /*cursor: pointer;*/
            /*margin-right: 0;*/
            /*background-color: rgb(255 255 255 / 10%);*/
            padding: 10px;
            /*border-radius: 50%;*/
        }
        label#uploadgallery {
            cursor: pointer;
            margin-right: 0;
            background-color: rgb(255 255 255 / 10%);
            padding: 20px;
            border-radius: 50%;
        }
        .preloder{
            height: 100vh;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #111;
        }
        .loder{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 5px solid #D1DFFF;
            border-top: 8px solid #3775FF;
            animation: spinner 1s linear infinite;
        }
        
        @keyframes spinner{
          0%{
            transform: rotate(0deg);
        
          }
          50%{
            border-top-width: 5px;
          }
          100%{
            transform: rotate(360deg);
          }
        }
        
        @media screen and (max-width: 668px){
          .loder{
            height: 60px;
            width: 60px;
            border-top: 6px solid #3775FF;
          }
        }
        .ok-btn {
            background-color: #f8d308;
            border: 1px solid #f8d308;
            border-radius: 8px;
            box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;
            display: inline-block;
            font-family: "Amazon Ember", sans-serif;
            font-size: 18px;
            line-height: 29px;
            padding: 5px 15px 5px 15px;
            position: relative;
            text-align: center;
            text-decoration: none;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            vertical-align: middle;
            width: 150px;
        }
        
        .ok-btn:hover {
            background-color: #f7fafa;
            color: black;
            border-color: #f8d308;
        }
        
        .ok-btn:focus {
            border-color: #008296;
            box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
            outline: 0;
        }
        .retake-btn {
            background-color: #c5291d;
            /*border: 1px solid #c5291d;*/
            border-radius: 8px;
            box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
            box-sizing: border-box;
            color: #ffffff;
            cursor: pointer;
            display: inline-block;
            font-family: "Amazon Ember", sans-serif;
            font-size: 18px;
            line-height: 29px;
            padding: 5px 15px 5px 15px;
            position: relative;
            text-align: center;
            text-decoration: none;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
            vertical-align: middle;
            width: 150px;
        }
        .retake-btn:hover {
            background-color: #f7fafa;
            color: black;
            border-color: #c5291d;
        }
        
        .retake-btn:focus {
            border-color: #008296;
            box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
            outline: 0;
        }
        .form-caont {
            display: flex;
            width: 95%;
            flex-direction: column;
            gap: 2em;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
            margin: 3em auto;
        }
        
        /*camera popup css starts here*/
        .overlay {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.8);
          transition: opacity 500ms;
          /*visibility: hidden;*/
          /*opacity: 0;*/
        }
        .overlay:target {
          visibility: visible;
          opacity: 1;
        }
        
        .popup {
            /*margin: 70px auto;*/
            padding: 20px;
            background: #fff;
            border-radius: 5px;
            width: 30%;
            position: relative;
            transition: all 5s ease-in-out;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -60%);
        }
        
        
        .popup .close {
            position: absolute;
            top: -35px;
            right: 0;
            transition: all 200ms;
            font-size: 30px;
            font-weight: bold;
            text-decoration: none;
            color: white;
        }
        .popup .close:hover {
            color: #06D85F;
        }
        .popup .content {
            text-align: center;
            margin-bottom:30px;
            font-size: 20px;
        }
        
        @media screen and (max-width: 700px){
          .box{
            width: 80%;
          }
          .popup{
            width: 80%;
          }
        }
        .hide{
            visibility: hidden;
            opacity: 0;
        }
        .square{
            position: absolute;
            /*border: 1px dashed white;*/
            /*width: 300px;*/
            /*height: 300px;*/
            /*padding: 20px;*/
            left: 50%;
            top: 43%;
            transform: translate(-50%, -57%);
            text-align: center;
            color: white;
            z-index: 999;
        }
        .select_gender {
            width: 100%;
            padding: 0 10px;
        }
        .custom-radio input 
{
  display: none;
}

.radio-btn 
{
  margin: 10px;
    width: 100px;
    height: 90px;
    /*border: 3px solid #ffdae9;*/
    display: inline-block;
    border-radius: 10px;
    position: relative;
    text-align: center;
    /*box-shadow: 0 0 20px #c3c3c367;*/
    cursor: pointer;
    font-size: 30px;
}.chain-border {
    border: 3px solid #ffdae9;
}

.radio-btn > i {
  color: #ffffff;
  background-color: #FFDAE9;
  font-size: 20px;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) scale(2);
  border-radius: 50px;
  padding: 3px;
  transition: 0.5s;
  pointer-events: none;
  opacity: 0;
}

.radio-btn .hobbies-icon 
{
  width: 150px;
  /*height: 150px;*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
justify-content: center;
}
.radio-btn .hobbies-icon img
{
  display:block;
  width:50px;
  margin-bottom:20px;
  
}
.radio-btn .hobbies-icon i 
{
  color: #FFDAE9;
  line-height: 80px;
  font-size: 60px;
}

.radio-btn .hobbies-icon h3 
{
  /*color: #555;*/
  font-size: 18px;
  font-weight: 300;
  /*text-transform: uppercase;*/
  letter-spacing:1px;
}

.custom-radio input:checked + .radio-btn 
{
  border: 2px solid #FFDAE9;
}

.custom-radio input:checked + .radio-btn > i 
{
  opacity: 1;
  transform: translateX(-50%) scale(1);
}.chain{
    justify-items: start !important;
}
.chain{
    height: 55px !important;
    font-size: 18px;
}

/* Hide content for non-mobile devices */
#mobile-content {
  display: none;
}

/* Show content for mobile devices */
@media (max-width: 520px) {
  #mobile-content {
      display: block;
  }

  #desktop-popup {
      display: none;
  }
}

/* Show popup for non-mobile devices */
@media (min-width: 521px) {
  #desktop-popup {
      display: block;
  }
  
  #mobile-content {
      display: none;
  }
}