/*@import "https://fonts.googleapis.com/icon?family=Material+Icons";*/

:root {
    /*--kob-typography-default-family: "system-ui", "-apple-system", "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Cantarell", "Helvetica Neue", "Arial", "sans-serif";*/
    /*--kob-ring-font-family: "Helvetica Neue", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Cantarell", "Arial", "sans-serif";*/
    /*--kob-ring-font-family: "system-ui", "-apple-system", "Segoe UI", "Roboto", "Noto Sans", "Ubuntu", "Cantarell", "Helvetica Neue", "Arial", "sans-serif";*/
    /*--kob-ring-font-size: 14px;*/
    --kob-palette-table-hover: rgb(235, 236, 240);
    --kob-palette-table-row-selected-background-color: rgb(212, 237, 255);
    --kob-ring-line-color: rgb(223, 229, 235);
    --kob-ring-focus-background-color: rgb(212, 237, 255);
    --kob-ring-hover-background-color: rgb(235, 246, 255);
    --kob-ring-selected-background-color: rgb(212, 237, 255);
}

.kob-ui-input-date,
.kob-ui-input-number,
.kob-ui-input-text,
.kob-ui-input-textarea {
    /*background: transparent;*/
    border-style: none;
    border-bottom: 1px solid var(--kob-ring-line-color);
}

.kob-ui-input-date:focus,
.kob-ui-input-number:focus,
.kob-ui-input-text:focus,
.kob-ui-input-textarea:focus {
    border-style: none;
    border-bottom: 1px solid rgb(0, 112, 204);
    outline-offset: 0;
}

/* Hide Safari contacts auto-fill when [autocomplete="off"] */
.kob-ui-input-date:focus::-webkit-textfield-decoration-container,
/* does not work on Edge */ 
/*.kob-ui-input-number:focus::-webkit-textfield-decoration-container,*/
/*.kob-ui-input-text:focus::-webkit-textfield-decoration-container,*/
.kob-ui-input-textarea:focus::-webkit-textfield-decoration-container {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

.kob-ui-input-date:focus-visible,
.kob-ui-input-number:focus-visible,
.kob-ui-input-text:focus-visible,
.kob-ui-input-textarea:focus-visible {
    /*outline-color: transparent;*/
    /*outline-width: 0;*/
    outline-style: none;
}

.kob-ui-input-date:hover,
.kob-ui-input-number:hover,
.kob-ui-input-text:hover,
.kob-ui-input-textarea:hover {
    /*!*    border-style: none;*!*/
    /*!*    border-bottom: 1px solid red;*!*/
    /*!*    outline-offset: 0;*!*/
    background-color: var(--kob-ring-hover-background-color);
    /*    */
}

.kob-ui-input-helper-text {
    color: rgb(196, 196, 196);
    font-size: 0.75rem;
    margin-block: unset;
}