/* 기본 Tailwind CSS 스타일 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 커스텀 스타일 */
@import '/static/styles/base.css';
@import '/static/styles/components.css';
@import '/static/styles/utilities.css';

/* 폰트 추가 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
  font-family: 'Roboto', sans-serif;
}

/* 기본 스타일 추가 */
body {
  background-color: var(--background);
  color: var(--foreground);
}

#chooseImage {
  visibility: hidden;
}

#image-zone{
  outline: 2px dashed #92b0b3 ;
  outline-offset:-10px; 
}

#chooseLabel{
  z-index: 10000;
}

.sample-image img{
  width: 100px;
  height: 100px;
}

.imagediv{
  position: relative;
  width : 100%;
  text-align: center;
  justify-content: center;
  display: flex;
  margin: auto;
}
/*
.result-div{
  position: absolute;
  top : 0px;
  left: 0px;
  background-color: transparent;
}
*/
#my-spinner { width: 100%; height: 100%; top: 0; left: 0; display: none; opacity: .6; background: silver; position: absolute; z-index: 49; }
#my-spinner div { width: 100%; height: 100%; display: table; }
#my-spinner span { display: table-cell; text-align: center; vertical-align: middle; }
#my-spinner img { background: white; padding: 1em; border-radius: .7em; margin: auto;}