/* -- Input form and button --*/
input[type="text"],
input[type="datetime-local"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
    background: white;
    border-radius: 5px;
    border: 1px solid #cbcbcb;
    padding: 5px 10px;
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #29e;
    font-size: 16px;
}

input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    cursor: pointer;
}

.dark input[type="text"],
.dark input[type="datetime-local"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="tel"],
.dark textarea,
.dark select {
    background: #111;
}

.button,
input[type="button"] {
    padding: 5px 5px;
    font-family: "Sarabun", sans-serif;
    font-weight: 500;
    color: #010101;
    font-size: 16px;
    border-radius: 5px;
    border-color: #cbcbcb;
    border-width: 0px;
    border-style: solid;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.dark input[type="button"] {
    background: #111;
    color: #eeef;
}

.button:hover:not(:disabled),
input[type="button"]:hover:not(input[type="button"]:disabled) {
    background-color: #29fe;
    color: #eeef;
}

.button {
    cursor: pointer;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.button.toggled,
.button:active,
input:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.button.toggled {
    background-color: #ffe141;
    color: #ffff;
}

.button.disabled,
input[type="button"]:disabled {
    background-color: rgba(239, 239, 239, 0.3) !important;
    color: #cbcbcb;
    cursor: not-allowed;
    box-shadow: none;
}

.dark .button.disabled,
.dark input[type="button"]:disabled {
    background-color: rgba(100, 100, 100, 0.8) !important;
    color: #cbcbcb;
}

.control-button {
    padding: 10px 20px !important;
    margin: 5px 0px;
}

.circle.button {
    padding: 5px;
    font-size: 2rem;
    font-weight: 500;
    color: #ffff;
    background-color: #6c55ff;
    border-radius: 999px;
}

select:disabled,
input[type="text"]:read-only,
textarea:read-only {
    background: #eee;
    color: #111;
    cursor: not-allowed;
}

.dark select:disabled,
.dark input[type="text"]:read-only,
.dark textarea:read-only {
    background: #111;
    color: #ddd;
}