:root {
    --submit-color: #1d73b9; /*  005092  */
    --primary-color: #1d73b9; /*  005092  */
    --primary-color2: #1d73b9; /*  005092  */
    --font-color: #2f3235;
    --bg-selected: #edf7ff;
    --menu-text-color: rgba(58, 58, 58, 0.8);
    --bg-subTotal: rgb(210, 210, 210);
    --bg-grandTotal: rgb(180, 180, 180);
    --bg-itemResultExe-title1: rgb(255, 209, 125);
    --bg-itemResultExe-title2: rgb(221, 221, 221);
    --bg-itemResultExe-title3: rgb(211, 211, 211);
}
@media (prefers-color-scheme: dark) {
    body:has([name="display-mode"][value="system"]:checked) {
        --title-color: #d0d6dc;
        --font-color: #d1d7dc;
        --menu-text-color: rgba(235, 235, 235, 0.8);
        --border-color: #525559;
        --bg-color-input: #363840;
        --bg-color-input-disable: #31343b;
        --bg-color: #2f3235;
        --bg-color2: #3b4248;
        --bg-color-check: #797d82;
        --bg-color-a: rgba(119, 123, 128, 0.5);
        --bg-selected: #094372;
        background-color: var(--bg-color);
        --bg-subTotal: rgb(114, 114, 114);
        --bg-grandTotal: rgb(84, 84, 84);
        --bg-itemResultExe-title1: rgb(82, 54, 0);
        --bg-itemResultExe-title2: rgb(145, 145, 145);
        --bg-itemResultExe-title3: rgb(125, 125, 125);
    }
}

body:has([name="display-mode"][value="dark"]:checked) {
    --title-color: #d0d6dc;
    --font-color: #d1d7dc;
    --menu-text-color: rgba(235, 235, 235, 0.8);
    --border-color: #525559;
    --bg-color-input: #363840;
    --bg-color-input-disable: #31343b;
    --bg-color: #2f3235;
    --bg-color2: #3b4248;
    --bg-color-check: #797d82;
    --bg-color-a: rgba(119, 123, 128, 0.5);
    --bg-selected: #094372;
    background-color: var(--bg-color);
    --bg-subTotal: rgb(114, 114, 114);
    --bg-grandTotal: rgb(84, 84, 84);
    --bg-itemResultExe-title1: rgb(82, 54, 0);

    --bg-itemResultExe-title2: rgb(145, 145, 145);
    --bg-itemResultExe-title3: rgb(125, 125, 125);
}

[list-item].on,
[list-item].on > [fixed-area] {
    background-color: var(--bg-selected) !important;
}
[list-input] {
    background-color: var(--bg-color-input);
}
[list-item] div[data-name].select-list-item-first,
[list] [list-area] div[data-name].select-list-item {
    background-color: var(--bg-color-a) !important;
}


input[name="display-mode"]:not(:checked) {
    background-color: var(--border-color);
}
input[name="display-mode"] {
    position: relative;
    border-radius: 0 !important;
    background-image: none !important;
    padding: 0.25rem;
}
input[name="display-mode"]::before {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--awesome);
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    color: #fff;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-weight: 900;
}
input[name="display-mode"][value="system"]::before {
    content: '\f042';
}
input[name="display-mode"][value="dark"]::before {
    content: '\f186';
}
input[name="display-mode"][value="light"]::before {
    content: '\f185';
}
input[name="display-mode"]:first-child {
    border-bottom-left-radius: .25rem !important;
    border-top-left-radius: .25rem !important;
}
input[name="display-mode"]:last-child {
    border-bottom-right-radius: .25rem !important;
    border-top-right-radius: 0.25rem !important;
}

div.nav-group,
.navbar .nav-item {
    padding: 0.5rem !important;
}
div + .navbar-nav {
    border-radius: 0 0 .25rem .25rem;
    padding-bottom: 0;
}
select.search-option option[value=""] {
    display: block;
}

.tab-pane .title,
.tab-pane .title.primary,
#layout-popup .content .title {
    background-color: transparent;
    color: var(--title-color);
    font-weight: 600;
    border-left: 5px solid var(--border-color);
    margin: 0.25rem 0;
    padding: 0.25rem !important;
    font-size: 1.25rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.tab-pane .title.primary {
    border-color: var(--primary-color2);
}
.tab-pane .title .fas:not([class*="btn-"])::before,
.tab-pane .title .btn:not([class*="btn-"]),
#layout-popup .content .title .fas:not([class*="btn-"])::before {
    color: var(--title-color) !important;
}
.tab-pane .title.primary .fas:not([class*="btn-"])::before {
    color: var(--primary-color2) !important;
}
.title+[search-area], .title+[form-area] {
    box-shadow: none;
    border-bottom: 1px solid var(--border-color);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-text {
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--font-color);
    white-space: nowrap;
    background-color: transparent;
    border: transparent;
    text-align: right !important;
    border-radius: 0.25rem;
}

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    color: var(--font-color);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
[data-won-type]:focus {
    border-color: transparent !important;
}
.input-group-prepend + .form-check.multi, .form-control + .form-check.multi {
    border: none;
}
:not([direction=column]) > [layout-type]+[layout-type] {
    margin-left: 0;
    border-left: 1px solid var(--border-color) !important;
}
.form-check.multi, .multi .form-radio {
    padding-left: 0.25rem;
}
.listEmpty {
    width: 50%;
}

[list-item] [data-name="itemKind"],
[list-item] [data-name="itemDiv"]
{
    min-width: 120px ;
}
[list-item] [data-name="geneName"] {
    min-width: 180px ;
}

[data-name="geneName"]{
    min-width: 200px;
    max-width: 200px;
}
[data-name="reportKind"]:not([data-won-type="select"]),[data-name="itemKind"]:not([data-won-type="select"]),[data-name="itemDiv"]:not([data-won-type="select"]){
    min-width: 100px;
    max-width: 100px;
}
[data-name="createTS"],[data-name="updateTS"]
{
    min-width: 100px;
    max-width: 100px;
}

[search-area] .date-fromto:has(input[data-won-type="date-fromto"]),
[search-area] input[data-won-type="date-fromto"]
{
    min-width: 180px !important;
    max-width: 180px !important;
}

[list-item] [data-name="patName"]
{
    text-align: left !important;
    min-width: 80px;
    max-width: 80px;
}
[list-item] [data-name="pId"],
[list-item] [data-name="reqDate"]
{
    text-align: center !important;
    min-width: 80px;
    max-width: 80px;
}
[list-item] [data-name="reqNo"]
{
    text-align: center !important;
    min-width: 100px;
    max-width: 100px;
}
[list-item] [data-name="sex"],
[list-item] [data-name="age"]
{
    text-align: center !important;
    min-width: 50px;
    max-width: 50px;
}
[list-item] [data-name="itemKind"] {
    text-align: left !important;
    min-width: 80px;
    max-width: 80px;
}

[list-item] [data-name="itemDiv"]
{
    text-align: left !important;
    min-width: 100px;
    max-width: 100px;
}

[list-item] [data-name="clientCode"],
[list-item] [data-name="orgCode"]
{
    text-align: left !important;
    min-width: 140px;
    max-width: 140px;
}
/* SEARCH_TYPE에 따른 dtpPicker display */
[search-area]:has([data-name="SEARCH_TYPE"][value="m"]:checked) .dtpMonth
{
    display: none;
}
[search-area]:has([data-name="SEARCH_TYPE"][value="d"]:checked) .dtpYear
{
    display: none;
}

body.navbar-hold  .navbar.fixed-left ul.navbar-nav li,
.navbar.fixed-left:hover ul.navbar-nav li
{
    padding-left:20px !important;
}

.formCtrl-w180{
    width: 180px !important;
}


body [list-area] [list-item="subTotal"] 
{
    background-color: var(--bg-subTotal) !important;
}
body [list-area] [list-item="grandTotal"] 
{
    background-color: var(--bg-grandTotal)  !important;
}

[search-area] [data-name="clientCode"],
[search-area] [data-name="orgCode"]
{
    width: 150px !important;
}

#login-form {
    text-align: center;
}

[data-layout-list] [data-name="itemCode"] {
    text-align: left !important;
    min-width: 120px;
    max-width: 120px;
}