#esd_liveness_main_container{
    width: 280px;
    height:  475px;
    position: relative;
    padding: 10px;
    display: inline-block;
  }
  .esd_liveness_hide[state='hide']{
      display: none;
  }
  #esd_liveness_camera_container{
    height: 0px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
    width: 250px;
    height: 0px;
    left:25px;
    top:45px;
    border-radius: 250px;
    overflow: hidden;
  }
  
  #esd_liveness_camera_container>video{
      position: absolute;
      width: auto;
  }
  .esd_liveness_inner_container{
    position: absolute;
  }
  
  .esd_liveness_inner_container:nth-last-child(1){
    left:calc(50% - 125px);
  }
  
  #esd_liveness_video_show{
      transform:scaleX(-1);
  }
  
  #esd_liveness_video_show[state="nscalex"]{
      transform:scaleX(1);
  }
  
  #esd_liveness_canvasOutPut_container{
      position: absolute;
      top: 0px;
      left: 0px;
      width: 280px;
      height: 475px;
      padding: 10px;
  }
  #title_canvas{
      position: absolute;
      left: 0px;
      top: 20px;
      z-index: 10001;
  }
  
  .scan_prompt_canvas{
      position: absolute;
      left: 0px;
      top: 20px;
      z-index: 10000 !important;
  }
  
  #title_canvas[state="hide"]{
      display: none;
  }
  
  #title_canvas[state="show"]{
      display: block;
  }
  
  #es_scan_error_prompt_canvas{
      position: absolute;
      left: 0px;
      z-index: 10001;
  }
  
  #es_scan_error_prompt_canvas[state="hide"]{
      display: none;
  }
  
  #es_scan_error_prompt_canvas[state="show"]{
      display: block;
  }
  
  .esd_liveness_prompt_title{
      position: absolute;
      top: 0px;
      width: 100%;
      height:100%;
      left: 0px;
      transition:all 1s;
      font-weight: bolder;
  }
  
  .esd_liveness_process_bar{
      flex-direction: row;
      align-items: stretch;
      flex-wrap: nowrap;
      justify-content:center;
  
      font-weight: bolder;
     
      position: absolute;
  }
  
  .esd_liveness_process_bar[state="show"]{
      display: flex;
  }
  
  .esd_liveness_process_bar[state="hide"]{
      display: none;
  }
  
  
  .esd_liveness_process_bar>.esd_liveness_process_bar_arrow{
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell{
      width: 100%;
      margin: 0px 1px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
  }
  
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell>.esd_liveness_process_bar_cell_circle{
      color: white;
      font-weight: normal;
      height: 15px;
      width: 15px;
      border-radius: 15px;
      display: flex;
      background-color: #a0a0a0;
      align-items: center;
      justify-content: center;
      margin-right: 5px;
      font-size: 8px;
  }
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell[complete]>.esd_liveness_process_bar_cell_circle{
      background-color: #4285f4;
  }
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell>.esd_liveness_process_bar_cell_circle:nth-child(1){
      display: inherit;
  }
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell>.esd_liveness_process_bar_cell_circle:nth-child(2){
      display: none;
  }
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell[complete]>span:nth-child(1){
      display: none;
  }
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell[complete]>span:nth-child(2){
      display:inherit;
  }
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell[execute]>span:nth-child(1){
      background-color: red;
  }
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell[execute]>span:last-child{
      color:red;
  }
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell:nth-child(1){
      margin-left: 0px;
  }
  .esd_liveness_process_bar>.esd_liveness_process_bar_cell:nth-last-child(1){
      margin-right:0px;
  }
  
  #face_image_mask{
      z-index: 10000;
      position: absolute;
      top: 0px;
      left: 0px;
  }
  
  #face_image_mask[state="hide"]{
      opacity: 0;
      transition: opacity 1s;
  }
  
  #face_image_mask[state="show"]{
      opacity: 0.9;
      transition: opacity 1s;
  }
  
  #face_image_mask[state="rotate_ani"]{
      opacity: 1;
      -webkit-animation: spin 1s linear 1s 5 alternate;
      animation: spin 1s linear infinite;
  }
  
  @-webkit-keyframes spin {
      from {
          -webkit-transform: rotate(0deg);
      }
      to {
          -webkit-transform: rotate(360deg);
      }
  }
  
  @keyframes spin {
      from {
          transform: rotate(0deg);
      }
      to {
          transform: rotate(360deg);
      }
  }
  
  #es_scan_operate_container{
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  
  .es_scan_operate_content{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
  }
  
  .es_scan_operate_content[state="hidden"]{
      display: none;
  }
  
  .es_scan_operate_text{
      color: #FFFFFF;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  
  .es_scan_operate_button_container{
      width: 100%;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .es_scan_operate_button_container[state="hidden"]{
      display: none;
  }
  
  .es_scan_take_photo_button_container{
      /* align-items: flex-start; */
  }
  
  .es_scan_take_photo_button_container .es_scan_operate_button_item{
      width: 30%;
      height: 80%;
  }
  .es_scan_confirm_button_container .es_scan_operate_button_item{
      width: 40%;
      height: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .es_scan_take_photo_button{
      background: none;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
  }
  
  .es_scan_confirm_image_button , .es_scan_cancel_image_button{
      width: 80%;
      height: 100%;
      border: 1px solid #FFFFFF;
      background: none;
      color: #FFFFFF;
      border-radius: 15px;
  }
  
  .es_scan_confirm_image_button{
      background: #FFFFFF;
      color: #000000;
  }
  
  .es_scan_success_image_container{
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      z-index: -1;
  }
  .es_scan_success_image_container[state="show"]{
      display: flex;
      z-index: 10001;
      
  }
  #es_scan_success_image{
      z-index: 10001;
  }
  .esd_liveness_action_process_container{
    display: flex;
  }
  .esd_liveness_action_process_container[state="hide"]{
    display: none !important;
  }
  .esd_liveness_pause_container{
    display: flex;
  }
  .esd_liveness_pause_container[state="hide"]{
    display: none !important;
  }
  .esd_liveness_complete_container{
    display: flex;
  }
  .esd_liveness_complete_container[state="hide"]{
    display: none !important;
  }
  #esd_liveness_animation_container{
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #esd_liveness_animation_canvas{
    z-index: 1;
  }
  #esd_liveness_animation_canvas[state="hide"]{
    display: none;
  }
  #esd_liveness_rotating_bg_container[state="hide"]{
    display: none;
  }