@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800');

.ui-overlay-b, .ui-page-theme-b, .ui-page-theme-b .ui-panel-wrapper {
  background-color: #3a1c4ecc !important;
  border-color: #4d2863b5 !important;
}

#splash {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('BG.png') no-repeat center center;
  background-size: cover;
  /* color: white; */
  /* font-size: 24px; */
}

/* Lyrics 페이지 CSS */
.custom-textarea-container {
  /* width: 300px; */
  height: 560px;
  /* overflow-y: auto !important; */
  /* overflow: auto; */
  /* text-align: center; */
  /* display: ruby-text; */
}
.custom-textarea {
  width: 100%;
  height: 90% !important;
  font-size: 16px;  /* 초기 글꼴 크기 설정 */
  font-family: 'Nanum Gothic', sans-serif; 
  resize: none;
  border: none;
  line-height: 1.6 !important; 

  /* width: 20em !important;
  height: 30em !important;  
  overflow-y: auto !important;
  font-family: 'Nanum Gothic', sans-serif; 
  font-size: 15px;
  padding: 0 15px !important; */
}
textarea.ui-input-text.ui-textinput-autogrow {
  overflow: auto !important;
}
.rounded-button {    
  border-radius: 50% !important;
  background-color: #2b9c7661 !important;
  color: white !important;
  cursor: pointer;
  width: 50px !important;
  height: 50px !important;
  border: none;
}
.plus-button {
  position: fixed; /* 버튼 위치 고정 */
  bottom: 130px; /* 아래쪽에서 130px 떨어진 위치 */
  right: 30px; /* 오른쪽에서 30px 떨어진 위치 */    
}
.minus-button {
  position: fixed; /* 버튼 위치 고정 */
  bottom: 60px; /* 아래쪽에서 60px 떨어진 위치 */
  right: 30px; /* 오른쪽에서 30px 떨어진 위치 */    
}
#곡제목 {
  color: #2b9c76;
  font-size: 20px;
  font-weight: bold;
}  

/* index 페이지 CSS*/
.ui-panel-inner {padding:0px;} /*make the buttons flush edge to edge*/
.ui-controlgroup {margin:0;} /*make the buttons flush to the top*/
.ui-carousel img {float:none; display: inline-block;}
.ui-bar {text-align: center; border-radius: 20px;}
.ui_page {font-size: 40px; text-align: center; padding-top: 10px; padding-bottom: 20px;}
.SelectMenu {text-align: left;}
.ui-icon-myicon_Hymn:after {background-image: url("images/m-hymn-1.png"); background-size: 18px 18px;}
.ui-num {font-size: 35px; font-weight: bold;}
/* 
#PageCancle {font-size: 26px; font-weight: bold; padding: 20px;}
#PageMove {font-size: 26px; font-weight: bold; padding: 20px;} 
*/

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.NEWnumber-container {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.NEWnumber {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.number:hover {
    background-color: #ccc;
}
.number-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3개의 열 생성 */
    grid-template-rows: repeat(4, 1fr); /* 4개의 행 생성 */
    height: 60vh; /* number-container의 높이 설정 */          
/*          border: 1px solid black;*/
    justify-content: center;
    align-items: center;
}
.number {
    display: flex;
    border: 1px solid #9f72b5;
    font-size: 60px;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.char {
    background-color: #076ad9;
}
.ui-navbar li .ui-btn {
    font-size: 14px !important;
}
audio {width: 150px; height: 30px;}
audio::-webkit-media-controls-panel {background-color: #56AEFF;}
audio::-webkit-media-controls-timeline {display: none;} 

/* score 페이지 CSS*/
#ui-carousel-barrel-14 {display: none !important;} 
.ui-carousel-controls {display: none !important;}
.ui-carousel-controls-bottom {display: none !important;}