.tipsnap_icon{
  margin-bottom: 20px;
}
.drop-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 5px;
  border: 2px dashed #c5b690;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 20px;
  min-height: 180px; /* Adjust the height as needed */
}
.drop-container .choose_file{
  display: block;
  background-color: white;
  text-align: center;
  padding: 5px;
}
.tipsnap_modal-content_preview .drop-container {
  height:600px; /* Adjust the height as needed */

}


.tipsnap_modal-content_preview .drop-container img
{
  height: 100%;
}
.tipsnap_model_preview .modal-dialog .modal-title {
  text-align: center;
}

.tipsnap_container{
  display: block;
  position: relative;
  flex-direction: column;
  padding: 20px;
  border: 2px dashed #c5b690;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 20px;
  min-height: 100px; /* Adjust the height as needed */
}
.tipsnap_container .tipsnap_logo {
    width: 200px;
    float: left;
    text-align: center;
}
.tipsnap_container .tipsnap_button{
  width: 203px;
  float: left;
  position: relative;
  top: 6px;
}
.tipsnap_modal-content{
  margin-bottom: 20px;
}
.tipsnap_modal-content a{
  color: #b7a474;
  text-decoration: underline;
}
.tipsnap_modal-content a:hover{
  color: #b7a4748f;
  text-decoration: underline;
}
.tipsnap_txt_f
{
  color: #b7a4748f;
  font-size: 12px;
}
.error_user_face{
  color: red;
}
.hidden {
display: none;
}
  .imagePreview{
      width: 100%;
      height: 100%;
}
  .previewImage{
  }
  

  #submitButton {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
  }

  #submitButton:before {
  content: ""; /* Required for the pseudo-element */
  display: inline-block;
  width: 20px; /* Set the width of the icon as needed */
  height: 20px; /* Set the height of the icon as needed */
  background-image: url('https://tipsnap.prismatec.co.jp/img/ci.png'); /* Set the URL of your icon image */
  background-size: cover; /* Adjust as needed */
  margin-right: 5px;
  }
  .drop-txt{
      font-size: 15px;
  }

  #submitButton:hover {
      background-color: #45a049;
  }
  .type--A{
      --line_color : #555555 ;
      --back_color : #FFECF6  ;
      }
      .type--B{
      --line_color : #1b1919 ;
      --back_color : #ede2c8;
      }
      .type--C{
      --line_color : #00135C ;
      --back_color : #DEFFFA 
      }
/* Styles for the submit button with icon */
.button_check{
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  .button_check button, .button_check button::selection{
    border: none;
    background: none;
  }
.button_check button[disabled] {
    opacity: 0.2;
    cursor: default;
}
.button_tipsnap{
  position : relative ;
  z-index : 0 ;
  width: 200px;
  height: 45px;
  text-decoration : none ;
  font-size : 14px ; 
  font-weight : bold ;
  color : var(--line_color) ;
  letter-spacing : 2px ;
  transition : all .3s ease ;
  cursor: pointer;
}
.generate_tipsnap{
  width:260px;
}


.tipsnap_txt{
  color: #b7a474;
}
.face_error{
  color: red;
  display: none;
  font-size: 11px;
}
.custom-file-upload {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 3px 12px;
  cursor: pointer;
  border-radius: 5px;
}
.button__text{
  display : flex ;
  justify-content : center ;
  align-items : center ;
  width : 100% ;
  height : 100% ;
}
.button_tipsnap::before,
.button_tipsnap::after,
.button__text::before,
.button__text::after{
  content : '' ;
  position : absolute ;
  height : 3px ;
  border-radius : 2px ;
  background : var(--line_color) ;
  transition : all .5s ease ;
}
.button_tipsnap::before{
  top : 0 ;
  left : 54px ;
  width : calc( 100% - 56px * 2 - 16px ) ;
}
.button_tipsnap::after{
  top : 0 ;
  right : 54px ;
  width : 8px ;
}
.button__text::before{
  bottom : 0 ;
  right : 54px ;
  width : calc( 100% - 56px * 2 - 16px ) ;
}
.button__text::after{
  bottom : 0 ;
  left : 54px ;
  width : 8px ;
}
.button__line{
  position : absolute ;
  top : 0 ;
  width : 56px ;
  height : 100% ;
  overflow : hidden ;
}
.button__line::before{
  content : '' ;
  position : absolute ;
  top : 0 ;
  width : 150% ;
  height : 100% ;
  box-sizing : border-box ;
  border-radius : 300px ;
  border : solid 3px var(--line_color) ;
}
.button__line:nth-child(1),
.button__line:nth-child(1)::before{
  left : 0 ;
}
.button__line:nth-child(2),
.button__line:nth-child(2)::before{
  right : 0 ;
}
.button_tipsnap:hover{
  letter-spacing : 6px ;
}
.button_tipsnap:hover::before,
.button_tipsnap:hover .button__text::before{
  width : 8px ;
}
.button_tipsnap:hover::after,
.button_tipsnap:hover .button__text::after{
  width : calc( 100% - 56px * 2 - 16px ) ;
}
.button__drow1,
.button__drow2{
  position : absolute ;
  z-index : -1 ;
  border-radius : 16px ;
  transform-origin : 9px 19px
}
.button__drow1{
  top : -16px ;
  left : 40px ;
  width : 32px ;
  height : 0;
  transform : rotate( 30deg ) ;
}
.button__drow2{
  top : 44px ;
  left : 77px ;
  width : 32px ;
  height : 0 ;
  transform : rotate(-127deg ) ;
}
.button__drow1::before,
.button__drow1::after,
.button__drow2::before,
.button__drow2::after{
  content : '' ;
  position : absolute ;
}
.button__drow1::before{
  bottom : 0 ;
  left : 0 ;
  width : 0 ;
  height : 32px ;
  border-radius : 16px ;
  transform-origin : 3px 18px;
  transform : rotate( -60deg ) ;
}
.button__drow1::after{
  top: -48px;
  left: 38px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: -3px 28px;
  transform: rotate( 69deg );
}
.button__drow2::before{
  bottom : 0 ;
  left : 0 ;
  width : 0 ;
  height : 32px ;
  border-radius : 16px ;
  transform-origin : 19px 18px;
  transform : rotate( -146deg ) ;
}
.button__drow2::after{
  bottom : 26px ;
  left : -40px ;
  width : 0 ;
  height : 32px ;
  border-radius : 16px ;
  transform-origin : 17px 24px;
  transform : rotate( -262deg ) ;
}
.button__drow1,
.button__drow1::before,
.button__drow1::after,
.button__drow2,
.button__drow2::before,
.button__drow2::after{
  background : var( --back_color ) ;
}
.button_tipsnap:hover .button__drow1{
  animation : drow1 ease-in .06s ;
  animation-fill-mode : forwards ;
}
.button_tipsnap:hover .button__drow1::before{
  animation : drow2 linear .08s .06s ;
  animation-fill-mode : forwards ;
}
.button_tipsnap:hover .button__drow1::after{
  animation : drow3 linear .03s .14s ;
  animation-fill-mode : forwards ;
}
.button_tipsnap:hover .button__drow2{
  animation : drow4 linear .06s .2s ;
  animation-fill-mode : forwards ;
}
.button_tipsnap:hover .button__drow2::before{
  animation : drow3 linear .03s .26s ;
  animation-fill-mode : forwards ;
}
.button_tipsnap:hover .button__drow2::after{
  animation : drow5 linear .06s .32s ;
  animation-fill-mode : forwards ;
}
@keyframes drow1{
  0%   { height : 0 ; }
  100% { height : 100px ; }
}
@keyframes drow2{
  0%   { width : 0 ; opacity : 0 ;}
  10%  { opacity : 0 ;}
  11%  { opacity : 1 ;}
  100% { width : 120px ; }
}
@keyframes drow3{
  0%   { width : 0 ; }
  100% { width : 80px ; }
}
@keyframes drow4{
  0%   { height : 0 ; }
  100% { height : 120px ; }
}
@keyframes drow5{
  0%   { width : 0 ; }
  100% { width : 124px ; }
}
.previewImages{
  display: flex;
  margin-top: 10px;
}
.equalto {
  padding: 36px;
  height: 200px;
  line-height: 136px;
}
.previewImages .facePreview {
  width: 155px;
  height: 240px;
  align-items: center;
  justify-content: center;
}
.previewImages .facePreview .imageBorder{
  height: 150px;
  width: 150px;
  background-color: #f9f9f9;
  border-radius: 5px;
  margin-top: 26px;
  overflow: hidden;
}
.previewImages .previewImage {
  height: 100%;
  border-radius: 10px;
  text-align: center;
  align-items: center;
  vertical-align: middle;
  padding: 5px;
}
.modelPreview{
  height: 200px;
  width: 155px;
  text-align: center;
  background-color: #f9f9f9;
  border: solid 1px #c1b08824;
}
.modelpreviewImage{
  height: 100%;
  border-radius: 5px;
  object-fit: contain;
}
.tips_caption i {
  font-size: 12px;
}
.tipsnap_model .modal-content .close {
  top: 35px;
}
#TIPSNAP_loading{
  display: none;
}