/* input-form */
.input-form-default {
    background-color: var(--color-white);
    box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
    padding: 1em 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.input-form-default span, label {
    font-size: 12px;
    color: var(--secondary-text);
}

.info-label {
    font-size: 12px;
    color: var(--secondary-text);
}

/* input text */
.input-text-short {
    display: inline-block;
    padding: 4px;
    border: none;
    width: 120px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 1em;
    font-size: 0.8em;
}

/* select */
.input-select-short {
    padding: 4px;
    border: none;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 1em;
    font-size: 0.8em;
}

option:disabled {
    background-color: var(--disabled-color);
}

.input-checkbox {
    display: inline-block;
    margin: 4px;
    padding: 4px;
    border: none;
    /*width: 120px;*/
    border-bottom: 1px solid var(--divider-color);
    font-size: 0.8em;
    vertical-align: bottom;
}

/* button */
.button-line-secondary-text {
    padding: 4px;
    font-size: 12px;
    font-weight: bold;
    border: 2px solid var(--secondary-text);
    border-radius: 5px;
    background-color: var(--color-white);
    color: var(--secondary-text);
    cursor: pointer;
}

.round-box-inline {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: none;
    width: auto;
    /*min-width: 70px;*/
    margin-left: 8px;
    background-color: #ececec;
    color: var(--color-white);
    border-radius: 20px;
    padding: 4px 4px 4px 6px;
}

.round-box-inline .material-symbols-outlined{
    cursor: pointer;
    vertical-align: middle;
    font-size: 20px !important;
    margin-left: 4px;
}

/* ----------------- */
.mb-auto {
    margin-bottom: auto;
}

.bg-gray-200 {
    background-color: rgb(229 229 229);
}

.text-gray-500 {
    color: var(--text-gray-500);
}

.text-gray-900 {
    color: var(--text-gray-900);
}

.text-center {
    text-align: center;
}

.divide-gray-200>:not([hidden])~:not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-y>:not([hidden])~:not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(229 229 229 / var(--tw-divide-opacity));
}