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;
}

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

/* 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-20 {
    flex: 0 0 auto;
    width: 20%;
}
.k-col-80 {
    flex: 0 0 auto;
    width: 80%;
}

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

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

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

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

.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;}

.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;
}