* {
    user-select: none;
}

.logo {
    cursor: pointer;
}

.logo img {
    width: 100%;
    max-width: 100px;
    height: auto;
}
.logo h1 {
    margin-top: 25px;
}

.timer {
    text-align: center;
}

.cardList {
    width: 10rem;
    padding: 28px 0px;
    text-align: center;
}
article {
    margin-bottom: 0px;
}

#box {
    padding: 0px;
    display: flex;
    overflow: scroll;
    max-height: 50vh;
    flex-direction: column-reverse;
}

.checkbox:checked {
    border: #ff9500;
    background-color: #ff9500;
}

#errorBox {
    padding: 0px;
    display: flex;
    overflow: scroll;
    max-height: 50vh;
    flex-direction: column-reverse;
    margin-top: 30px;
}

.welcomeBox {
    text-align: center;
    padding: 30px;
}

.choiceBox {
    height: 62.5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.choiceCard {
    width: 500px;
    height: 167px;
    border-radius: 1rem;
    font-size: 2rem;
    font-weight: 900;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    background-size: 101%;
    margin: 12px;
    background-color: #000000;
    cursor: pointer;
    overflow: hidden;
}

.buttonBox {
    display: flex;
    gap: 5px;
    width: 100% !important;
    justify-content: space-between;
}

.timeButton {
    background-color: #1c212c;
    border: 2px solid var(--pico-form-element-border-color);
    width: 33%;
}

.choiceCard img {
    opacity: 0.8;
    z-index: -1;
}

.choiceCard span {
    position: absolute;
    margin-top: 100px;
    margin-left: 18px;
    z-index: 1;
}

button {
    background-color: #ff9f19;
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    padding: 0px;
}

.closeButton {
    width: 19% !important;
    min-width: 100px;
    margin-top: 8%;
    height: 36px;
}

.find {
    background-color: #008959;
}

.unfind {
    background-color: rgba(250, 55, 55, 0.726);
}

.error {
    background-color: rgba(250, 94, 55, 0.726);
}

html {
    height: 100%;
}

body,
app {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1 0 auto;
    padding-top: 80px !important;
    padding-bottom: 0px !important;
}

footer {
    flex-shrink: 0;
    padding: 20px !important;
    text-align: center;
    color: #c7c7c7;
    font-size: 0.7em;
}

footer a {
    color: #ff9f19c2;
    text-decoration: none;
}
.settingBox {
    margin-top: 6%;
    width: 50%;
    margin: auto;
}

.settingLogo {
    vertical-align: middle;
    padding-top: 1.3rem;
    cursor: pointer;
}

.settingLogo:hover {
    opacity: 0.9;
}
.settingLogo img {
    width: 1.5rem;
}

.tdInput {
    width: 50%;
}
.tdText {
    width: 50%;
}

.settingCard {
    display: flex;
    width: 100%;
}

.settingText {
    width: 100%;
}

.switch {
    position: relative;
    width: 3.2rem;
    height: 1.8rem;
    background-color: #ccc;
    border-radius: 1rem;
    cursor: pointer;
}

.switch-handle {
    width: 1.4rem;
    height: 1.4rem;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    transition: transform 0.3s, background-color 0.3s;
}

.switch.true .switch-handle {
    transform: translateX(100%);
}

.switch.true {
    background-color: #ff9500;
}

.switch input {
    display: none;
}

.special {
    background-color: rgb(116, 21, 199);
}
.obselete {
    background-color: rgb(211, 127, 0);
}
.builtin {
    background-color: rgb(116, 21, 199);
}

.utility {
    background-color: rgb(211, 127, 0);
}

@keyframes blink {
    0%,
    100% {
        background-color: #008959;
    }
    50% {
        background-color: rgb(248, 139, 43);
    }
}

.blinking {
    animation: blink 1.5s 2;
}

@media only screen and (max-width: 1280px) {
    .settingBox {
        width: 100%;
    }
}

@media only screen and (max-width: 465px) {
    .tdText {
        width: 40%;
    }
    .tdInput {
        width: 60%;
    }
}

@media only screen and (min-width: 1540px) {
    .cardList {
        width: 11.5rem;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1022px) {
    .cardList {
        width: 9.71rem;
    }
}

@media only screen and (max-width: 580px) {
    .cardList {
        width: 100%;
    }
    .modalMain {
        font-size: small;
    }
}

@media only screen and (max-width: 480px) {
    #btnFileUpload {
        visibility: hidden;
        display: none;
    }
}

@media only screen and (min-height: 528px) {
    #box {
        max-height: 40vh;
    }
}

@media only screen and (min-height: 1000px) {
    #box {
        max-height: 65vh;
    }
}

@media only screen and (min-height: 900px) {
    #box {
        max-height: 55vh;
    }
}

@media only screen and (min-height: 1150px) {
    #box {
        max-height: 64vh;
    }
}