body {
    --k-font-family: "Open Sans", 'NanumGothic', 'Nanum Gothic', sans-serif, Arial; font-style: normal;
    --bs-body-font-family: var(--k-font-family);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 300;
}

.k-sidebar{
    --k-sidebar-bg-rgb: 231, 108, 0;
    --k-bg-opacity: 0.15;
    background-color: rgba(var(--k-sidebar-bg-rgb), var(--k-bg-opacity)) !important;
}

.k-main-menu-panel{
    --k-menu-panel-bg-rgb: 231, 108, 0;
    --k-bg-opacity: 0.04;
    background-color: rgba(var(--k-menu-panel-bg-rgb), var(--k-bg-opacity)) !important;
}

.k-bg-body-tertiary {
    --k-tertiary-bg-rgb: 231, 108, 0;
    --k-bg-opacity: 1;
    background-color: rgba(var(--k-tertiary-bg-rgb), var(--k-bg-opacity)) !important;
}

/* KORE-Map */
.k-kore-map-font {
    --k-kore-map-rgb: 142, 66, 0;
    --k-text-opacity: 1;
    color: rgba(var(--k-kore-map-rgb), var(--k-text-opacity)) !important;
}

/* based on KIOM Transcriptome Analysis */
.k-sub-title-font {
    --k-sub-title-rgb: 116, 116, 116;
    --k-text-opacity: 1;
    color: rgba(var(--k-sub-title-rgb), var(--k-text-opacity)) !important;
}

/* ex. p.adj, Value Range Row Order */
.k-option-font {
    --k-option-rgb: 103, 48, 0;
    --k-text-opacity: 1;
    color: rgba(var(--k-option-rgb), var(--k-text-opacity)) !important;
}

/* ex. KORE-Map Drug Gene Disease  */
.k-menu-font {
    --k-menu-rgb: 255, 255, 255;
    --k-text-opacity: 1;
    color: rgba(var(--k-menu-rgb), var(--k-text-opacity)) !important;
}

/* ex. Pathway Enrichment Analysis, Transcriptome Factor Enrichment Analysis, Disease Prediction  */
.k-sub-menu-font {
    --k-sub-menu-rgb: 117, 117, 117;
    --k-text-opacity: 1;
    color: rgba(var(--k-sub-menu-rgb), var(--k-text-opacity)) !important;
}

.k-bg-secondary {
    --k-bs-secondary-rgb: 108, 117, 125;
    --k-bs-bg-opacity: 0.15;
    background-color: rgba(var(--k-bs-secondary-rgb), var(--k-bs-bg-opacity)) !important;
}

/* Button Menu Tooltip Style
[REF] https://deeplify.dev/front-end/markup/tooltip */
.k-tooltip {
    position: relative;
    display: block;
}
.k-tooltip .k-tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: #d9d9d9;
    opacity: 0.5;
    color: #000;
    text-align: center;
    border-radius: 3px;
    padding: 5px;
    position: absolute;
    z-index: 1;
}
.k-tooltip:hover .k-tooltiptext {
    visibility: visible;
    font-size: small;
    font-weight: lighter;
    font-family: 'Open Sans', 'NanumGothic', 'Nanum Gothic', 'sans-serif', 'Arial'; font-style: normal;
}

.k-tooltip .k-tooltip-bottom {
    width: max-content;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}
.k-tooltip .k-tooltip-bottom::after {
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
}

.k-tooltip .k-tooltip-left {
    width: max-content;
    top: -5px;
    right: 105%;
}
.k-tooltip .k-tooltip-left::after {
    top: 50%;
    left: 100%;
    margin-top: -5px;
    /* 사각형의 테두리에서 왼쪽만 노출 */
    border-color: transparent transparent transparent black;
}

.k-tooltip .k-tooltip-right {
    width: max-content;
    top: 5px;
    left: 105%;
}
.k-tooltip .k-tooltip-right::after {
    top: 50%;
    right: 100%;
    margin-top: 5px;
    border-color: transparent black transparent transparent;
}

.k-input-group-text {
    --bs-body-color: 255, 108, 0;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: #a84800;
    text-align: center;
    white-space: nowrap;
    width: 160px;
}

/* selected CASE Checkbox height */
.k-case-card {
    max-height: 350px;
}

.k-cvc-select {
    /*background: aliceblue;
    opacity: 0.5;*/
    width: 800px;
    min-width: max-content;
}

.tooltip {
    position: absolute;
    z-index: 10;
    background-color: #d9d9d9;
    color: #000;
    padding: 2px 7px;
    visibility: hidden;
    opacity: 0.75;
    border-radius: 3px;
}
.tooltip::after {
    content: "";
    position: absolute;
    top: 14%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #000 transparent transparent;
}

.k-fs-7 {
    font-size: 0.9rem !important;
}

.k-fs-8 {
    font-size: 0.8rem !important;
}

.k-col-5 {
    flex: 0 0 auto;
    width: 5%;
}
.k-col-6 {
    flex: 0 0 auto;
    width: 6%;
}
.k-col-7 {
     flex: 0 0 auto;
     width: 7%;
 }
.k-col-8 {
    flex: 0 0 auto;
    width: 8%;
}
.k-col-10 {
    flex: 0 0 auto;
    width: 10%;
}
.k-col-12 {
    flex: 0 0 auto;
    width: 12%;
}
.k-col-15 {
    flex: 0 0 auto;
    width: 15%;
}
.k-col-20 {
    flex: 0 0 auto;
    width: 20%;
}
.k-col-25 {
    flex: 0 0 auto;
    width: 25%;
}
.k-col-80 {
    flex: 0 0 auto;
    width: 80%;
}
/* Adjust the size of layout columns (custom size) => apply to EA.BarPlot.Option */
/*.k-col-10 {
    flex: 0 0 auto;
    width: 80%;
}*/

.k-w-10 {
    width: 10% !important;
}

.k-w-15 {
    width: 15% !important;
}

.k-w-20 {
    width: 20% !important;
}

.k-w-85 {
    width: 85% !important;
}

.k-w-90 {
    width: 90% !important;
}

.k-h-70 {
    height: 70% !important;
}

.k-h-65 {
    height: 65% !important;
}

.k-card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-bottom: 0;
    #color: var(--bs-card-cap-color);
    #background-color: var(--bs-card-cap-bg);
    #border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.k-card-body {
    flex: 1 1 auto;
    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
    color: var(--bs-card-color);
    background-color: var(--bs-card-cap-bg);
}

.k-hover-bg-custom:hover {
    background-color: #0d6efd !important; /* Bootstrap Primary Blue */
    opacity: 70%;
    color: white; /* Optional: change text color for contrast */
}

.k-hover-bg-custom.active {
    background-color: #0d6efd !important; /* Bootstrap Primary Blue */
    opacity: 30%;
    color: white; /* Optional: change text color for contrast */
}

.bg_color_1{background-color: #FEF6E1;}
.font_color_1{color: #EEB857;}
.bg_color_2{background-color: #ECF5FD;}
.font_color_2{color: #5397EE;}
.bg_color_3{background-color: #F1ECF9;}
.font_color_3{color: #967EDB;}
.bg_color_4{background-color: #FDF0E3;}
.font_color_4{color: #F27C33;}
.bg_color_5{background-color: #FDEAED;}
.font_color_5{color: #EC7192;}
.bg_color_6{background-color: #EAF6F0;}
.font_color_6{color: #3FB455;}
.bg_color_7{background-color: #E8F7F8;}
.font_color_7{color: #31AFBF;}
.bg_color_8{background-color: #E9EFF9;}
.font_color_8{color: #3E79C2;}

.color_1 {fill: #FF6347;}
.color_2 {fill: #B8860B;}
.color_3 {fill: #808000;}
.color_4 {fill: #00FF00;}
.color_5 {fill: #00FF7F;}
.color_6 {fill: #20B2AA;}
.color_7 {fill: #DAA520;}
.color_8 {fill: #40E0D0;}
.color_9 {fill: #66CDAA;}
.color_10 {fill: #8A2BE2;}
.color_11 {fill: #1E90FF;}
.color_12 {fill: #20B2AA;}
.color_13 {fill: #228B22;}
.color_14 {fill: #FFD700;}
.color_15 {fill: #F08080;}
.color_16 {fill: #9ACD32;}
.color_17 {fill: #00FA9A;}
.color_18 {fill: #00FFFF;}
.color_19 {fill: #4169E1;}
.color_20 {fill: #800080;}
.color_21 {fill: #87CEFA;}
.color_22 {fill: #00FF7F;}
.color_23 {fill: #B8860B;}
.color_24 {fill: #00FF7F;}
.color_25 {fill: #9370DB;}
.color_26 {fill: #FF00FF;}
.color_27 {fill: #D2691E;}
.color_28 {fill: #B0C4DE;}
.color_29 {fill: #228B22;}
.color_30 {fill: #FF69B4;}
.color_31 {fill: #708090;}
.color_32 {fill: #48D1CC;}
.color_33 {fill: #CD853F;}
.color_34 {fill: #800000;}
.color_35 {fill: #2F4F4F;}
.color_36 {fill: #6495ED;}
.color_37 {fill: #C71585;}
.color_38 {fill: #0000CD;}
.color_39 {fill: #40E0D0;}
.color_40 {fill: #8FBC8F;}
.color_42 {fill: #FA8072;}
.color_43 {fill: #7CFC00;}
.color_44 {fill: #DEB887;}
.color_45 {fill: #D2691E;}
.color_46 {fill: #4682B4;}
.color_47 {fill: #F4A460;}
.color_48 {fill: #FF7F50;}
.color_49 {fill: #708090;}
.color_50 {fill: #BC8F8F;}

.psdap_font_0{ color: #685418; }
.psdap_bg_0{ background-color: #fff8e1; }
.psdap_font_1{ color: #7A2170; }
.psdap_bg_1{ background-color: #F3E8FF; }
.psdap_font_2{ color: #28644E; }
.psdap_bg_2{ background-color: #E1F5EE; }
.psdap_font_3{ color: #455F23; }
.psdap_bg_3{ background-color: #EAF3DE }
.psdap_font_4{ color: #8B058B }
.psdap_bg_4{ background-color: #FBEAF0 }

.annotation_font_0{ color: #6F4C15; }
.annotation_bg_0{ background-color: #FAEEDA; }
.annotation_font_1{ color: #73331C; }
.annotation_bg_1{ background-color: #FAECE7; }
.annotation_font_2{ color: #6F4D15; }
.annotation_bg_2{ background-color: #FAEEDA; }
.annotation_font_3{ color: #72331C; }
.annotation_bg_3{ background-color: #FAECE7; }

.application_font{ color: #040404; }
.application_bg_0{ background-color: #FAEEDA; }
.application_bg_1{ background-color: #FAECE7; }
.application_bg_2{ background-color: #FAEEDA; }
.application_bg_3{ background-color: #FAECE7; }

.loading_process {
    position:absolute;
    top: 30%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 9999;
    background: #f0f0f0;
    filter: alpha(opacity=50);
    opacity: 0.7;
    margin: auto;
    padding: 0;
    text-align: center;
}

/* Simulate $form-check-label-cursor: pointer; */
.k-cursor-pointer {
    cursor: pointer;
}

.ui-autocomplete-loading {
    background: white url("/assets/images/ui-anim_basic_16x16.gif") right center no-repeat;
}

/*
Category Custom UI
[REF] https://jqueryui.com/autocomplete/#categories
*/
.ui-draggable, .ui-droppable {
    background-position: top;
}

.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
}

.k-list-group-item {
    position: relative;
    display: block;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
    color: var(--bs-list-group-color);
    text-decoration: none;
    background-color: var(--bs-list-group-bg);
    border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}
.k-list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.k-list-group-item:last-child {
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
}
.k-list-group-item.disabled, .list-group-item:disabled {
    color: var(--bs-list-group-disabled-color);
    pointer-events: none;
    background-color: var(--bs-list-group-disabled-bg);
}
.k-list-group-item.active {
    z-index: 2;
    color: var(--bs-list-group-active-color);
    background-color: var(--bs-list-group-active-bg);
    border-color: var(--bs-list-group-active-border-color);
}
.k-list-group-item + .list-group-item {
    border-top-width: 0;
}
.k-list-group-item + .list-group-item.active {
    margin-top: calc(-1 * var(--bs-list-group-border-width));
    border-top-width: var(--bs-list-group-border-width);
}

.k-hover-image {
    transition: all 0.5s ease; /* 부드러운 효과 적용 */
}

.k-hover-image:hover {
    transform: scale(1.3); /* 마우스 오버 시 5% 확대 */
    opacity: 0.9; /* 마우스 오버 시 투명도 조절 */
}

.k-hover-text {
    transition: all 0.5s ease; /* 부드러운 효과 적용 */
}

.k-hover-text:hover {
    transform: scale(1.2); /* 마우스 오버 시 5% 확대 */
    opacity: 0.8; /* 마우스 오버 시 투명도 조절 */
}

/* 부트스트랩 모달 배경의 기본 색상 및 투명도 초기화 */
/*.modal-backdrop {
    background-color: transparent !important; /* 배경색 투명 * /
    opacity: 0 !important; /* 투명도 0으로 설정 * /
}*/

.k-quick-start {
    position: fixed;
    top: 160px;
    right: 10px;
    width: 210px;
    display: none;
}
.k-quick-start-button {
    position: fixed;
    top: 90px;
    right: 10px;
    width: 70px;
    height: 70px;
}