@charset "UTF-8";

/* TOK 외부 사용자용 포털(보안) CSS입니다. */
html,
html[data-theme=purple],
html[data-theme=default] {
    --primary: 237, 107, 0 !important;
}

.ui_select_field[data-ui-scale=large] {
    --control-size: 44px;
    --control-font-size: 16px;
}

.ui_select_field[data-ui-scale=large] {
    --control-size: 44px;
    --control-font-size: 16px;
}

.ui_button[data-ui-scale=x_large] {
    --control-size: 56px;
    --control-font-size: 18px;
}

.ui_date_field .ui_text_field:where([type="date"], [type="time"]) {
    padding-right: 36px;
    color: var(--text-primary)
}

.ui_date_field .ui_text_field:where([type="date"], [type="time"])::-webkit-calendar-picker-indicator {
    opacity: 0;
    position: absolute;
    right: 6px;
    top: 0;
    bottom: 0;
    width: 32px;
    height: auto;
    cursor: pointer;
}

.ui_date_field .ui_text_field:where([type="date"], [type="time"])::-webkit-inner-spin-button,
.ui_date_field .ui_text_field:where([type="date"], [type="time"])::-webkit-clear-button {
    display: none;
}

.ui_date_field .ui_text_field:where([type="date"], [type="time"])::-moz-focus-inner {
    border: 0;
}

.ui_date_field:has(.ui_text_field:where([type="date"], [type="time"])) {
    width: 130px;
}

.ui_date_field:has(.ui_text_field:where([type="date"], [type="time"])):after {
    font-family: "CovisionIconFont" !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    position: absolute;
    top: 50%;
    right: 6px;
    font-size: 18px;
    color: var(--icon-primary);
    transform: translateY(-50%);
    pointer-events: none;
}

.ui_date_field:has(.ui_text_field:is([type="date"])):after {
    content: "\e926";
}

.ui_date_field:has(.ui_text_field:is([type="time"])):after {
    content: "\e941";
}

.tok_request_wrap {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.tok_request_wrap .tok_request_button {
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 8px;
}

.tok_request_wrap .tok_request_button>.ui_button {
    border-radius: 0;
    flex: 1 1 auto;
    width: 100%;
}

.tok_request_wrap .tok_request_container {
    flex: 1 1 0;
    overflow: hidden auto;
}

.tok_request_wrap .tok_request_container .tok_request_dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--main-y-space);
    padding: var(--main-y-space) var(--main-right-space) var(--main-y-space) var(--main-left-space);
}

.tok_request_head {
    position: sticky;
    top: 0;
    left: 0;
    height: 52px;
    background: rgb(var(--primary));
    display: flex;
    align-items: center;
    --icon-primary: #fff;
    padding: 0 12px;
    gap: 8px;
}

.tok_request_head .tok_request_head_content {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tok_request_head .tok_request_head_content .tok_request_head_label {
    font-weight: 400;
    color: #fff;
    font-size: 18px;
}

.tok_request_head .tok_request_head_aside {
    flex: 0 0 auto;
    margin-left: auto;
}


.tok_request_dashboard .tok_request_logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:12px 0;
    gap:12px;
}

.tok_request_dashboard .tok_request_logo .logo_img {
    width: 100%;
    height: 38px;
    background: url("/HtmlSite/smarts4j_n/customizing/tok/images/request/logo.svg") center no-repeat;
    background-size: contain;
}

.tok_request_dashboard .tok_request_logo .logo_img span {
    position: absolute !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    border: none !important;
    background: none !important;
}

.tok_request_dashboard .tok_request_logo .logo_text {
    font-size: 20px;
    font-weight: 800;
}

.tok_request_dashboard .ui_alert.alert_basic {
    width: 100%;
    margin: 0;
}

.tok_request_dashboard .tok_request_board {
    padding: 12px;
    border: 1px solid var(--border-secondary);
}

.tok_request_content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--main-y-space) var(--main-right-space) var(--main-y-space) var(--main-left-space);
}

.tok_request_content>* {
    max-width: 100%;
    flex: 0 0 auto;
    margin: 0;
}

.tok_request_write .tok_request_write_item {
    --min-height: 44px;
    --title-y-padding: calc(calc(var(--min-height) - 20px) / 2);
    --content-y-padding: calc(calc(var(--min-height) - var(--control-size)) / 2);
    display: flex;
    gap: 4px 12px;
    padding-right: var(--main-right-space);
    padding-left: var(--main-left-space);
    border-bottom: 1px solid var(--border-primary)
}

.tok_request_write .tok_request_write_title {
    color: var(--text-endpoint);
    flex: 0 0 auto;
    min-width: 112px;
    height: 100%;
    min-height: calc(var(--min-height) + 1px);
    display: flex;
    align-items: center;
    padding: var(--title-y-padding) 0;
    gap: 8px;
}

.tok_request_write .tok_request_write_content {
    flex: 1 1 0;
    padding: var(--content-y-padding) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: calc(var(--min-height) + 1px);
}

.tok_request_write .tok_request_write_aside {
    flex: 0 0 auto;
    min-height: calc(var(--min-height) + 1px);
    padding: var(--content-y-padding) 0;
}

.tok_request_write .tok_request_write_content:has(.full) {
    padding: 0;
}

.tok_request_write .tok_request_write_item[data-ui-direction="column"] {
    flex-direction: column;
    align-items: flex-start;
    min-height: unset;
    min-height: 44px;
    --paddings: calc(var(--min-height) - 20px);
}

.tok_request_write .tok_request_write_item[data-ui-direction="column"] .tok_request_write_title {
    min-width: auto;
    padding-bottom: 0;

}

.tok_request_write .tok_request_write_item[data-ui-direction="column"] .tok_request_write_content {
    padding-top: 0;
    padding-bottom: var(--title-y-padding);
    width: 100%;
    flex: 0 0 auto;

}

.tok_request_write_item:not([data-ui-direction="column"]) .tok_request_write_content:has(.full) {
    padding: 0;
}

.tok_request_write_item:not([data-ui-direction="column"]) .tok_request_write_content .full {
    border-width: 0;
    height: 100%;
    --control-size: 44px;
    padding-left: 0;
    padding-right: 0;
}

.tok_request_user {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    background: var(--paper-secondary);
    width: 100%;
}

.tok_request_user .tok_request_user_item {
    display: flex;
    gap: 8px;
}

.tok_request_user .tok_request_user_item>* {
    flex: 0 0 auto;
}

.tok_request_user .tok_request_user_item .tok_request_user_name {
    width: 80px;
}

.tok_request_user .tok_request_user_item .tok_request_user_number {
    flex: 1 1 auto;
}