section.contents main > .set-main {
height: 100%;
width: 100%;
display: flex;
position: relative;
overflow: hidden;
overflow-y: auto;
}
.set-main > #demo_controls,
.set-main_content,
.set-main_content > #set_target {
display: none;
}
.settings {
height: 100%;
width: 100%;
display: grid;
}
.settings-item {
grid-row: auto;
grid-column: auto;
display: flex;
justify-content: center;
align-items: center;
}
.settings-item-sys {
width: 200px;
max-width: 80%;
height: 50%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid #999999;
}
section.contents main > .set-main > .set-main_content {
flex: 1;
display: flex;
justify-content: center;
position: relative;
}
section.contents main > .set-main > .set-main_content #handheld {
position: relative;
width: 100%;
height: 100%;
width: 100%;
height: auto;
top: 0; */
}
#set_target > .set_target--content {
width: 100%;
height: 100%;
padding: 1rem;
position: relative;
display: flex;
flex-direction: column;
background: #ffffff;
}
#set_target > .set_target--content.hide {
display: none;
}
#set_target > .set_target--content title {
display: block;
height: 1.5rem;
line-height: 1.5rem;
font-size: 1.5rem;
font-weight: 500;
}
#set_target > .set_target--content article {
flex: 1;
}
#set_target > .set_target--content article button {
z-index: 10;
cursor: pointer;
position: absolute;
right: 1rem;
bottom: 1rem;
width: 3rem;
height: 3rem;
border-radius: 12px;
border: 1px solid #999999;
background: #d1e4ff;
}
#set_target > .set_target--content article .counter--content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
#set_target > .set_target--content article .counter--content #countBtn {
font-size: 2rem;
font-weight: bold;
margin: 0;
}
#set_target > .set_target--content article .textField--content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
overflow: hidden;
}
.my-text-area {
width: 100%;
height: auto;
min-height: 2.5rem;
font-size: 1rem;
padding: 0.4rem 0;
resize: none;
overflow: hidden;
border: 1px solid #ccc;
}
.my-text-area::-webkit-scrollbar {
width: 5px;
}
.my-text-area::-webkit-scrollbar-track {
background-color: #f1f1f1;
opacity: 0.2;
}
.my-text-area::-webkit-scrollbar-thumb {
background-color: #cccccc;
border-radius: 5px;
}
.my-text-area::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
#set_target > .set_target--content article .custom--content {
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
#set_target > .set_target--content article .custom--content .top--show {
flex: 1;
}
#set_target > .set_target--content article .custom--content .top--show--p {
text-align: center;
width: 100%;
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
#set_target
> .set_target--content
article
.custom--content
.top--show
#customerInput {
font-size: 1.5rem;
}
#set_target > .set_target--content article .custom--content .bottom--input {
height: 2rem;
display: flex;
position: absolute;
bottom: 0;
width: 100%;
}
#set_target
> .set_target--content
article
.custom--content
.bottom--input
input {
height: 2rem;
flex: 1;
width: 100%;
border: 1px solid #cccccc;
}
#set_target > .set_target--content article .custom--content .bottom--input img {
width: 2rem;
cursor: pointer;
border-radius: 2px;
}
@media screen and (max-width: 63rem) {
section.contents main > .set-main {
flex-direction: column;
}
section.contents main > .set-main > .set-main_content {
margin-top: 1rem;
}
}
@media screen and (max-width: 600px) {
#set_target > .set_target--content {
padding: 0.5rem;
}
#set_target > .set_target--content article button {
width: 1.5rem;
height: 1.5rem;
border-radius: 5px;
}
#set_target
> .set_target--content
article
.custom--content
.bottom--input
img {
width: 1.5rem;
height: 1.5rem;
}
}
@media screen and (max-width: 375px) {
#set_target > .set_target--content title {
font-size: 1.2rem;
}
}