:root {
    /*--mud-palette-primary: #43a83a !important;
    --mud-palette-primary-darken: #29804a !important;
    --bs-body-color: #fafafa !important;
    --bs-side-color: #102B4B !important;
    --bs-lightBlue-color: #A7DDE0 !important;
    --login-btn-primary: #4fa0ed !important;*/

    --login-img-color: #3674ae;
}

.k-card-header {
    background: var(--dash-card-line);
    color: var(--txt-bk-color) !important;
}

.themeprofile {
    padding: 2px 10px !important;
    vertical-align: middle;
    color: #637381;
    font-size: 13px;
    font-weight: 500;
    align-content: center;
    line-height: 30px;
}
    .themeprofile .k-switch-on .k-switch-track {
        border: #8f98b2 !important;
        background-color: #8f98b2 !important;
    }
#home-ph-dash {
    height: 100%;
}
.k-splitbar.k-splitbar-horizontal {
    color: var(--txt-color);
    background-color: var(--bs-body-color);
}
.k-splitbar.k-splitbar-horizontal:hover,
.k-splitbar.k-splitbar-horizontal:focus {
        background: var(--dash-card-line);
        color: var(--txt-bk-color);
    }
.k-arcgauge-label {
    z-index: 1;
}
#home-ph-dash .k-grid-layout.telerik-blazor.k-justify-items-stretch.k-align-items-stretch {
    grid-template-rows: 60px calc(100% - 60px);
    height: 100%;
}
.k-tilelayout, .k-splitter, .k-card {
    padding: 0 !important;
    background: var(--bs-body-color) !important;
    border: none !important;
}
.k-tilelayout {
    padding-right: 1em !important;
    width: calc(100% - 10px);
}
.k-card .k-card-body {
    border: 1px solid var(--dash-card-line);
    background: var(--dash-box-bg);
}
.k-tilelayout .k-switch {
    float: inline-end;
}
.home-card-title > * {
    flex: 1 1 auto !important;
}
.w-dash-title {
    color: var(--dash-navy-text);
    font-weight: bold;
    margin-top: -4px;
    margin-bottom: 15px;
    flex: 1 170px !important;
}
.w-news {
    background-color: var(--header-bg-color);
    border: 1px solid var(--dash-card-bg);
    color: var(--txt-bk-color);
    margin: 0px 0px 20px 0;
    border-radius: 10px;
    overflow: hidden;
    width: calc(100% - 270px);
    font-size: 23px;
    height: 47px;
}
/*.modern-ticker {
    max-width: 3000px !important;
}*/
.ticker-tape-container {
    overflow-x: hidden;
    display: flex;
}

.ticker-tape {
    animation-name: marquee;
    display: flex;
    gap: 1rem;
    margin-right: 1rem;
    flex: 0 0 auto;
    align-items: center;
    animation: marquee 40s linear 0s infinite;
    animation-play-state: running;
    animation-delay: 1s;
    animation-direction: normal;
}
    .ticker-tape:hover {
        animation-play-state: paused;
    }
@keyframes marquee {
    0% {
        transform: translateX(1%);
    }

    100% {
        transform: translateX(-100%);
    }
}
/*   .w-news strong {
        background: #FE4653;
        padding: 5px 18px 5px 20px;
        margin-right: 8px;
        color: #fff;
    }*/
.modern-ticker .mt-news a {
    font-size: 16px;
}
.w-dash-time {
    margin: 4px 0px 15px 0;
    align-self: center;
    white-space: nowrap;
}

    .k-tilelayout .k-tilelayout-item-body {
    background: var(--dash-box-bg);
}
.weather-grid-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(23%, auto));
    grid-template-rows: repeat(3, calc(33% - 10px));
    gap: 20px;
    height: 100%;
}
.col {
    color: var(--txt-color);
}

/*container-small STYLE =========*/
.weather-grid-container.container-small {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, calc(25% - 8px));
    gap: 10px;
}
.weather-grid-container.container-small .inner-card-style .inner-tit h3 {
    font-size: 18px;
    padding: 10px 15px;
}
.weather-grid-container.container-small .inner-card-style .inner-con span,
.weather-grid-container.container-small .inner-card-style .gauge-label {
    font-size: 1.3rem;
}
.weather-grid-container.container-small small {
    font-size: 1.2rem !important;
}
    .weather-grid-container.container-small #inner-txt.luna-txt,
    .weather-grid-container.container-small .inner-card-style .inner-con .txt-stroke {
        font-size: 1.7rem
    }

.weather-grid-container.container-small .inner-card-style .inner-con .k-pager-nav .luna-tide {
    width: 80px;
    height: 80px;
    margin-top: 10px;
}
.weather-grid-container.container-small .inner-card-style .inner-con .k-pager-nav .luna-img {
    max-width: 80px;
    margin-top: 10px;
}
/**/
.home-lsrEqpmnt .container-small .leisure-card .inner-tit h3 {
    font-size: 18px;
    padding: 10px 15px !important;
}

.home-lsrEqpmnt .container-small .leisure-card .inner-card-style {
    padding: 0 !important;
}

.home-lsrEqpmnt .container-small .leisure-card .inner-con .k-hbox {
    display: grid;
    row-gap: 1rem;
    justify-items: center;
}

.home-lsrEqpmnt .container-small .leisure-card .inner-con .k-hbox .k-rounded-full {
    max-width: 80px;
}
.home-lsrEqpmnt .container-small .leisure-card .inner-con .k-vbox .col {
    font-size: 1.2rem !important;
}
.home-lsrEqpmnt .container-small .leisure-card .inner-con .k-vbox label {
    font-size: 2.2rem !important;
}
/*container-small END =========*/
.inner-md-card{

}
.weather-grid-container.container-small .inner-card-style.inner-sm-card .inner-tit h3 {
    font-size: 16px;
    padding: 5px 15px 15px;
}
    .inner-md-card.inner-card-style .inner-tit h3 {
        font-size: 18px;
        padding: 10px 15px;
    }
    .inner-md-card.inner-card-style .inner-con span,
    .inner-md-card.inner-card-style .gauge-label {
        font-size: 1.3rem;
    }
    .inner-md-card.inner-card-style .inner-con .txt-stroke,
    .inner-sm-card.inner-card-style .inner-con .txt-stroke {
        font-size: 1.5rem;
    }
    .inner-md-card.inner-card-style small {
        font-size: 1.2rem !important;
    }

    .inner-sm-card.inner-card-style #inner-txt small em {
        font-size: 1.1rem;
    }
    /*.inner-md-card.inner-card-style #inner-txt.luna-txt,
    .inner-md-card.inner-card-style .inner-card-style .inner-con .txt-stroke {
        font-size: 1.7rem
    }*/
    .inner-md-card.inner-card-style .inner-con .k-pager-nav .luna-tide {
        width: 80px;
        height: 80px;
        margin-top: 10px;
    }
    .inner-md-card.inner-card-style .inner-con .k-pager-nav .luna-img {
        max-width: 80px;
        margin-top: 10px;
    }
.inner-md-card.inner-card-style .inner-con .k-pager-nav img,
.inner-md-card.inner-card-style .inner-con .k-pager-nav .luna-tide {
    max-width: 64px !important;
    max-height: 64px;
}
    .inner-sm-card.inner-card-style .inner-con .k-pager-nav .pr-4 {
        padding-right: 10px !important;
        flex: 0;
    }
    .inner-sm-card.inner-card-style .inner-con .k-pager-nav img {
        min-width: 24px;
    }
.wind-card.inner-md-card.inner-card-style .gauge-label,
.wind-card.inner-sm-card.inner-card-style .gauge-label span,
.temp-card.inner-md-card.inner-card-style .gauge-label span,
.temp-card.inner-sm-card.inner-card-style .gauge-label span {
    font-size: 1.2rem !important;
}
/*inner card-size*/
.inner-sm-card {
}

    .inner-sm-card.inner-card-style .inner-tit h3 {
        font-size: 16px;
        padding: 6px 15px;
    }
    .inner-sm-card.inner-card-style .inner-con .k-pager-nav img{
        max-width:45%;
    }
    .inner-sm-card.inner-card-style .inner-con .k-pager-nav .luna-tide,
    .inner-sm-card.inner-card-style .inner-con .k-pager-nav .luna-img {
        max-width: 40px !important;
        max-height: 40px;
    }

    .inner-sm-card.inner-card-style .inner-con span,
    .inner-sm-card.inner-card-style .gauge-label {
        font-size: 1.3rem;
    }

    .inner-sm-card.inner-card-style small {
        font-size: 1.1rem !important
    }
    .inner-sm-card.inner-card-style #inner-txt small em {
        font-size: 1rem;
    }
    .inner-sm-card.inner-card-style #inner-txt.luna-txt,
    .inner-sm-card.inner-card-style .inner-card-style .inner-con .txt-stroke {
        font-size: 1.3rem;
    }

    .inner-sm-card.inner-card-style .inner-con .k-pager-nav .luna-tide {
        width: 80px;
        height: 80px;
        margin-top: 10px;
    }

    .inner-sm-card.inner-card-style .inner-con .k-pager-nav .luna-img {
        max-width: 80px;
        margin-top: 10px;
    }

#home-ph-dash .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item {
    width: fit-content !important;
    min-width: fit-content;
    transition: 0.2s ease;
    border: none;
    box-shadow: none;
    font-size: 1.2rem;
    font-weight: 400;
}
#home-ph-dash .k-tabstrip-items {
    background: var(--dash-card-line);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding-left: 6px;
}
#home-ph-dash .k-tabstrip-items .k-link {
    flex: unset;
    transition: 0.2s ease;
    align-items: end;
}
    #home-ph-dash .k-tabstrip-items .k-link::after {
        content: '|';
        padding-left: 20px;
        font-size: 1rem;
        color: var(--txt-color) !important;
        align-self: end;
        padding-bottom: 5px;
    }
#home-ph-dash .k-tabstrip-items li:last-child .k-link::after {
    content: none;
}

#home-ph-dash .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item:active,
#home-ph-dash .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active {
    border: none;
    background: transparent;
    color: var(--dash-navy-text) !important;
    font-size: 1.5rem;
    font-weight:bold;
}
#home-ph-dash .k-tabstrip-items-wrapper .k-item:hover, 
#home-ph-dash .k-tabstrip-items-wrapper .k-item.k-hover {
    color: var(--dash-tit-color) !important;
}
#home-ph-dash .k-tabstrip-content, .k-tabstrip > .k-content{
    border-color: var(--dash-card-line);
    background: var(--dash-card-bg);
}
.inner-card-style {
    height: 100%;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-auto-rows: auto 1fr;
    background: var(--dash-card-bg);
    border-radius: 10px;
    border: 1px solid var(--dash-card-line);
    overflow: hidden;
}
.inner-card-style .inner-tit h3 {
    color: var(--dash-tit-color);
    font-size: 26px;
    padding: 15px 20px;
}
span.data-time {
    display: block;
    color: var(--data-time-color);
    padding: 4px;
}
.inner-card-style .inner-con {
    font-size: 40px;
    color: var(--dash-navy-text);
    text-align: center;
    align-content: center;
    font-weight: 500;
    margin-top: -15px;
    position: relative;
    align-self: center;
}
.inner-card-style .inner-con .k-pager-nav img {
    width: 128px;
    max-width: 90%;
}
    .inner-card-style .inner-con .k-pager-nav .luna-tide {
        background: var(--dash-luna-icon-bg) !important;
        width: 128px;
        height: 128px;
        border-radius: 50%;
    }
.inner-card-style .inner-con .k-pager-nav .luna-img {
    position: absolute;
    left: 0;
    opacity: 0.8;
    mix-blend-mode: luminosity;
}
#dash-bg-icon {
    position: absolute;
    z-index: 0;
    /*top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 60%;
    width: 80%;*/
    top: 5%;
    transform: translate(-50%, -50%);
    height: 350%;
}
#inner-txt {
    position: relative;
    z-index: 1;
    margin: 0;
    line-height: 115%;
}
#inner-txt small{
    /*font-size:1.5rem;*/
    font-size:36px;
}
#inner-txt.luna-txt {
    text-align:left;
}
#inner-txt.luna-txt small {
    text-align: left;
    color: var(--txt-color);
    font-size:30px;
}
#inner-txt small em {
    font-size: 1.2rem;
    color: var(--txt-li7-gray);
}

/*대시보드 아이콘 컬러*/
.wind-card #dash-bg-icon path {
    fill: var(--dash-wind-icon) !important;
}
.rain-card #dash-bg-icon path {
    fill: var(--dash-rain-icon) !important;
}
.airPress-card #dash-bg-icon path {
    fill: var(--dash-press-icon) !important;
}
.humidt-card #dash-bg-icon path {
    fill: var(--dash-water-icon) !important;
}
.uv-card #dash-bg-icon path {
    fill: var(--dash-uv-icon) !important;
}
.waterTemp-card #dash-bg-icon .color-icon {
    fill: var(--dash-water-icon) !important;
}
.waterTemp-card #dash-bg-icon .white-icon {
    fill: var(--dash-card-bg) !important;
    stroke: var(--dash-water-icon) !important;
}
.tide-card.inner-card-style .inner-con .k-pager-nav .luna-tide {
    background: var(--dash-tide-icon) !important;
}
.wave-card #dash-bg-icon path {
    fill: var(--dash-card-bg) !important;
    stroke: var(--dash-wave-icon);
}
/*===================-*/


.inner-card-style .inner-con .txt-stroke {
    position: relative;
    z-index: 1;
    /*font-size: 39px;*/
    font-size: 52px
}

.inner-card-style .inner-con span {
    /*font-size: 1.7rem;*/
    font-size:38px;
    vertical-align: 7px;
}

.inner-card-style svg.inner-card-wave {
    position: absolute;
    width: 101%;
    left: 0;
    bottom: 0;
    height: 80%;
    background: linear-gradient(0deg, var(--dash-temp-icon) 39%, transparent 30%);
    z-index: 0;
    fill: var(--dash-temp-icon) !important;
}

.gauge-label {
    font-size: 40px;
}
.telerik-blazor.k-gauge.k-circulargauge svg,
.telerik-blazor.k-gauge.k-arcgauge svg{
    clip-path: inset(2px);
}
.telerik-blazor.k-gauge.k-circulargauge svg g:not(:only-child) path:first-child,
.telerik-blazor.k-gauge.k-arcgauge svg g:not(:only-child) path:first-child {
    stroke: var(--dash-gauge-bg) !important;
}
.telerik-blazor.k-gauge.k-arcgauge svg g:not(:only-child) path:first-child[stroke="none"] {
    stroke: none !important;
}

.wind-card .telerik-blazor.k-gauge.k-circulargauge svg g:not(:only-child) path:first-child {
    stroke: var(--dash-wind-icon) !important;
    stroke-opacity: .3;
}
.wind-card .telerik-blazor.k-gauge.k-circulargauge svg g:not(:only-child) path:nth-child(2) {
    stroke: var(--dash-wind-icon) !important;
}
.rain-card .telerik-blazor.k-gauge.k-arcgauge svg g:not(:only-child) path:first-child {
    stroke: var(--dash-rain-icon) !important;
    stroke-opacity: .3;
}

.rain-card .telerik-blazor.k-gauge.k-arcgauge svg g:not(:only-child) path:nth-child(2) {
    stroke: var(--dash-rain-icon) !important;
}
.airPress-card .telerik-blazor.k-gauge.k-arcgauge svg g:not(:only-child) path:first-child {
    stroke: var(--dash-press-icon) !important;
    stroke-opacity: .3;
}
.airPress-card .telerik-blazor.k-gauge.k-arcgauge svg g:not(:only-child) path:nth-child(2) {
    stroke: var(--dash-press-icon) !important;
}
.uv-card .telerik-blazor.k-gauge.k-arcgauge svg g path:first-child {
    stroke: var(--dash-uv-icon) !important;
    stroke-opacity: .3;
}
.uv-card .telerik-blazor.k-gauge.k-arcgauge svg g path:nth-child(2) {
    stroke: var(--dash-uv-icon) !important;
}
.uv-card .telerik-blazor.k-gauge.k-arcgauge svg > g g:last-child path {
    stroke: none !important;
}

.page-header h4 {
    color: var(--txt-color);
}

/*icons*/
span.wind-icon {
    background: url(../../img/wind-icon.svg) no-repeat;
    background-size: cover;
    background-position: center;
    height: 24px;
    width: 30px;
    margin-right: 2px;
}

span.water-icon {
    background: url(../../img/water-icon.svg) no-repeat;
    background-size: contain;
    background-position: left;
    height: 24px;
    width: 30px;
    margin: 8px 0px 8px 8px;
}

span.hpa-icon {
    background: url(../../img/hpa-icon.svg) no-repeat;
    background-size: contain;
    background-position: left;
    height: 24px;
    width: 30px;
    margin-right: 2px;
}

span.salt-icon {
    background: url(../../img/salt-icon.svg) no-repeat;
    background-size: contain;
    background-position: left;
    height: 27px;
    width: 27px;
    margin-right: 2px;
}

span.wTemp-icon {
    background: url(../../img/water-temp-icon.svg) no-repeat;
    background-size: contain;
    background-position: left;
    height: 31px;
    width: 28px;
}

span.lowTide-icon {
    background: url(../../img/lowTide-icon.svg) no-repeat;
    background-size: contain;
    background-position: left;
    height: 45px;
    width: 45px;
}

span.highTide-icon {
    background: url(../../img/highTide-icon.svg) no-repeat;
    background-size: contain;
    background-position: left;
    height: 45px;
    width: 45px;
}

/*obsrecentDashBoard2*/
/*inner card-size*/
.gauge-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px 0px;
    /*margin: 15px 0;*/
}

    .gauge-group .inner-card-style .inner-tit h3 {
        font-size: 20px
    }

    .gauge-group .inner-card-style .inner-con {
        max-height: 130px;
    }

.graph-date {
    background: var(--dash-gauge-point);
    padding: 2px 10px;
    border-radius: 20px;
    margin-bottom: 4px;
    color: #fff;
}
.current-weather-box {
    /*background: var(--state-bg-left);*/
    height: 100%;
}
.inner-card-style.top-current-weather {
    font-size: 30px;
    background: linear-gradient(-45deg, #4882EA, 50%, #91BFEE);
    padding: 2.3rem 2.5rem;
    /*height: 237px;*/
    display: flex !important;
    align-items: center;
}

    .inner-card-style.top-current-weather span.w-img {
        /*float: left;*/
        width: 160px;
        max-width: 40%;
    }

        .inner-card-style.top-current-weather span.w-img img {
            background: #fff;
            padding: 20px;
            border-radius: 50%;
            box-shadow: 2px 3px 6px #00000016;
            margin-right: 20px;
        }

    .inner-card-style.top-current-weather h1 {
       /* height: 100%;*/
        font-weight: 500;
        font-size: 60px;
        align-content: end;
        color: #fff;
        line-height: 110%;
    }

        .inner-card-style.top-current-weather h1 span {
            font-size: 34px;
            color: #fff;
            vertical-align: 15px;
        }
@media(max-width:1579px) and (min-width: 767px) {
    .inner-card-style.top-current-weather {
        padding: 2.3rem 1.5rem;
    }

        .inner-card-style.top-current-weather h1 {
            font-size: 50px;
        }

            .inner-card-style.top-current-weather h1 span {
                font-size: 24px;
            }
}
@media(max-width:1318px) and (min-width: 767px) {

}
    @media(max-width:1318px) and (min-width: 767px) {
/*
        .inner-card-style.top-current-weather {
            display: block !important;
        }*/

            .inner-card-style.top-current-weather h1 {
                align-content: normal;
                white-space: nowrap;
            }
    }

@media(max-width:863px) {
    #home-ph-dash > .k-grid-layout {
        grid-template-columns: 100% !important;
        grid-template-rows: auto !important;
    }
    #home-ph-dash > .k-grid-layout > div:nth-child(2) {
        grid-row: 2 !important;
        grid-column: 1 !important;
    }
    #home-ph-dash > .k-grid-layout > div:nth-child(3) {
        grid-row: 4 !important;
        grid-column: 1 !important;
    }
    #home-ph-dash > .k-grid-layout > div:nth-child(4) {
        grid-row: 3 !important;
        grid-column: 1 !important;
    }
    #home-ph-dash > .k-grid-layout > div:nth-child(5) {
        grid-row: 5 !important;
        grid-column: 1 !important;
    }
}
    .inner-card-style.bottom-current-weather {
        font-size: 18px;
        background: var(--state-bg-btm);
        color: var(--txt-color);
        text-align: center;
        /*white-space: nowrap;*/
    }

    .current-label {
        display: inline-flex;
        align-items: center;
        color: var( --txt-bk-color);
        font-size: 23px;
        vertical-align: middle
    }

    .bottom-current-weather .current-label:not(:last-child):after {
        content: '|';
        padding: 0 16px;
        display: inline-block;
        color: var(--dash-card-line);
        margin-top: -0.5rem;
        font-size: 2rem;
    }

    .bottom-current-weather .current-label label:not(:only-child) {
        margin-right: 4px;
    }

.weather-state-left {
    display: grid;
    gap: 20px 0px;
    margin: 0;
    height: 100%;
}

        .weather-state-left .inner-card-style {
            display: block;
        }

    .weather-state-left .bottom-current-weather {
        padding: 1rem !important;
        align-content: center;
    }

    #home-ph-dash .k-tabstrip-items-wrapper .k-item:active, #home-ph-dash .k-tabstrip-items-wrapper .k-item.k-active,
    #home-ph-dash .k-tabstrip-items-wrapper .k-item.k-selected {
        color: var(--txt-color) !important;
        background-color: transparent !important;
    }

    #home-ph-dash .k-tabstrip-content, #home-ph-dash .k-tabstrip > .k-content {
        color: var(--txt-color) !important;
        background-color: var(--dash-card-bg) !important;
    }

    #home-ph-dash .bottom-chart .k-chart {
        background: #7DC4EF10 !important;
    }

    path [stroke-linecap="butt"][stroke-width="15"]:before {
        background-image: url(../../img/hap-icon.svg);
        width: 15px;
        height: 15px;
        position: absolute;
        z-index: 99;
        background: red;
        /* position: absolute; */
    }
    .k-chart > svg {
        overflow:visible !important;
    }
    .k-chart svg > g > path:nth-child(1) {
        fill: transparent !important;
        fill-opacity: 1 !important;
    }

    .k-tabstrip-content .k-chart svg > g path[fill="rgb(255, 255, 255)"] {
        fill: transparent !important;
        fill-opacity: 1 !important;
    }

.k-tabstrip-content .k-chart svg > g text {
    fill: var(--txt-color) !important;
    font-size: 15px !important;
}
.current-weather-box .k-tabstrip-content .k-chart svg > g text:not(:only-child):first-child {
    fill: var(--data-time-color) !important;
}
    .k-tabstrip-content .k-chart svg > g path[stroke="rgb(255, 99, 88)"],
    .k-tabstrip-content .k-chart svg > g circle {
        stroke: var(--dash-gauge-point) !important;
    }

        .k-tabstrip-content .k-chart svg > g circle[fill="rgb(255, 99, 88)"] {
            stroke: white !important;
            fill: var(--dash-gauge-point) !important;
        }

    .k-tabstrip-content .k-chart svg > g > path[stroke="rgba(0, 0, 0, 0.08)"] {
        stroke: var(--dash-card-line) !important;
    }

    path[stroke="rgba(0, 0, 0, 0.04)"][stroke-width="1"] {
        stroke: var(--dash-tit-color) !important;
        stroke-opacity: 0.1 !important;
    }

    .col.k-taskboard-column-header-actions {
        padding: 0;
    }
    /*.k-tabstrip-content .k-chart svg > g path[fill-opacity="0.6"][fill="rgb(255, 99, 88)"] {
    fill: url('#gradient-chart');
}
*/

html, body {
    font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    height: 100%;
    width: 100%;
}

    body {
        /*background: #F4F5F9;*/
        /*background: var(--bs-body-color);*/
        background: var(--bs-body-color);
        color: var(--txt-color);
        color: var(--txt-color);
    }

    .text-center {
        text-align: center;
    }

    .text-left {
        text-align: left;
    }

    .text-right {
        text-align: right;
    }

    a:hover {
        text-decoration: none
    }

    #blazor-error-ui {
        z-index: 10000;
    }


    /*login*/
    .login-img {
        position: relative;
        background: var(--login-img-color);
        overflow: hidden;
    }

.login-wrapper .login-img img {
    /*
        width: unset;
        height: 105vh;
        transform: translateY(-47%);
        position: absolute;
        top: 67%;
        left: 0;*/
        filter: brightness(0.9);
        object-fit: cover;
        object-position: top right;
}
    .dashboard-btn-group > button {
        box-shadow: 0 0 6px #08182a87;
    }

    .login-bottom-logo {
        display: none;
    }

    .login-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
    }

    .login-wrapper .login-content .login-logo {
        max-width: 180px;
    }

    .login-wrapper .login-content {
        background: var(--bs-side-color);
    }

        .login-wrapper .login-content .login-userset > * > * {
            color: #fff !important;
        }

        .login-wrapper .login-content .form-login .btn-login {
            background: var(--login-btn-primary);
            border-color: #488fd3;
        }

        .login-wrapper .login-content .login-userset {
            display: flex;
            margin: 0 auto;
            flex-wrap: nowrap;
            flex-direction: column;
            flex-grow: 1;
            width: 100%;
            justify-content: center;
        }

    @media(max-height:740px) {
        .login-wrapper .login-content .login-userset {
            justify-content: start;
        }
    }

    .login-wrapper .login-content .form-login .btn-login:hover {
        box-shadow: none !important;
        background: #4f83ed;
    }

    @media (min-width: 991px) {
        /* nav.menu {
        top: 0 !important;
        height: 100vh !important;
    }
    nav.menu > * {
        margin-top: 60px !important;
    }
    .header {
        width: calc(100% - 300px);
        margin-left: 300px;
    }*/
        .header .header-left {
            width: fit-content;
            padding: 0 20px 0 65px;
        }

            .header .header-left > a {
                display: flex !important;
                align-items: center;
            }

                .header .header-left > a > h3 {
                    padding-left: 15px;
                    font-weight: 400;
                    color: var(--primary-color);
                    font-size: 22px;
                    text-transform: uppercase;
                }

        nav#ml-menu.menu-hidden + .header .header-left {
            padding: 0 20px !important;
        }

        nav#ml-menu.menu-hidden + .action--open {
            opacity: 0;
        }

        nav#ml-menu.menu-hidden + .content {
            width: 100% !important;
            margin: 0 !important;
        }
        /* .action--open{
        display:block !important;
        top:-45px;
    }
        .action--open .icon--menu:before, .action--open .icon--menu:after {
            border-color: #fff;
        }*/
    }

    @media (max-width: 991px) {
        .header .header-left > a > h3 {
            display: none;
        }
    }

    /*sidebar*/
    .header {
        z-index: 10001 !important;
        background: var(--header-bg-color) !important;
    }

        .header .header-left .logo .logo-img {
            width: 140px;
            background: url(../../img/logo.png) no-repeat;
            background-size: contain;
            background-position: left;
            min-height: 60px;
        }

    .container {
        max-width: unset !important;
        height: 100%;
    }

    nav.menu {
        /*background: #0f375d  !important;
    margin: 15px;
    top: 60px !important;
    width: 290px !important;
    height: calc(100vh - 90px) !important;
    border-radius: 10px;
    box-shadow: 1px 1px 9px #00000052;*/
        background: var(--bs-side-color) !important;
        top: 60px !important;
        width: 300px !important;
        height: calc(100vh - 60px) !important;
        transition: all 0.2s ease;
    }

    .menu__item .menu__link {
        color: #fff !important;
        font-weight: normal;
    }

    .header .header-left {
        bakground: transparent !important;
    }

    .menu__item.empty-menu {
        opacity: 0 !important;
        pointer-events: none;
        position: absolute;
        /*width : 0px;
    height : 0px;
    overflow : hidden;
    top : -99999%;
    left : -999999%;*/
        /*display : none !important;*/
    }

    /*.header .mobile-user-menu a.nav-link {
    color: var(--dash-navy-text) !important;
}
*/
.container > .content {
    position: relative !important;
    min-height: 300px !important;
    margin: 0 0 0 300px !important;
    left: 0px !important;
    padding: 60px 0px 0px !important;
    width: calc(100% - 300px) !important;
    height: calc(100% - 10px);
    -webkit-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

    .page-title h2, .page-title h5 {
        color: var(--dash-navy-text);
        font-weight: 600;
        padding: 5px 10px;
    }

    .sub_tit {
        margin-top: 10px;
        color: var(--dash-navy-text);
    }

    .menu__link:hover, .menu__link:focus, .menu__link.menu__link--current {
        color: white !important;
        background: #ffffff24;
        /*background: #ffffff2e;*/
    }

    .menu__item {
        width: calc(100% - 40px) !important;
    }

    nav .menu__breadcrumbs {
        padding: 1.8em 1.3em 1.5em 1.5em !important;
        font-size: 0.95em !important;
        /* background: #00000029;
    border-bottom: 1px solid #b9dbb6;*/
    }

    .menu__wrap {
        top: 3.9em !important;
    }

    nav .menu__breadcrumbs > a, .menu__link[data-submenu]:hover::after, .menu__link[data-submenu]:focus::after {
        color: var(--bs-lightBlue-color) !important;
        padding-bottom: 10px;
        margin-top: -4px;
    }

    .menu__link--current::before {
        color: var(--bs-lightBlue-color) !important;
    }

    .menu__breadcrumbs a:not(:last-child)::after {
        font-family: "Font Awesome 5 Free" !important;
        content: "\f054" !important;
        color: #d0eccd !important;
    }

    nav.menu__breadcrumbs > a:hover {
        filter: brightness(1.2);
    }

    #ml-menu a {
        cursor: pointer;
    }
    /*.menu__link--current::after {
    position: absolute;
    top: calc(50% - 5px);
    right: -2px;
    content: '';
    width: 10px;
    height: 10px;
    background: #fafbfe;
    transform: rotate(45deg);
}
.menu__link:hover::after {
    position: absolute;
    top: calc(50% - 5px);
    right: -2px;
    content: '';
    width: 10px;
    height: 10px;
    background: #fafbfe;
    transform: rotate(45deg);
    -webkit-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    transition: all 0.2s ease;
}*/
    a.menu__link:hover::before {
        content: '\00B7';
        font-size: 1.5em;
        line-height: 0;
        position: absolute;
        top: 50%;
        left: 0.5em;
        height: 4px;
        color: var(--bs-lightBlue-color) !important;
        cursor: pointer;
    }

    a.menu__link.menu__link--current::after {
        color: #ffffff !important;
    }

    .menu__link[data-submenu]::after {
        background: none !important;
        transform: none !important;
        width: unset !important;
        height: unset !important;
        top: unset !important;
        position: absolute;
        right: 0;
        padding: 0.25em 1.25em;
        color: #ffffffad !important;
        font-family: "Font Awesome 5 Free" !important;
        content: "\f054" !important;
        font-weight: bold;
    }

    a.menu__link[data-submenu]:hover::before {
        content: none;
    }
    /*button.action  .icon {
    font-family: "FontAwesome"!important;
}*/
    .icon--arrow-left:before {
        color: var(--bs-side-color);
        content: '\f060' !important;
    }

    /*.icon--menu:before {
    content: '\f0c9' !important;
    color: #337EFF;
}*/
    .action--open {
        z-index: 999999 !important;
    }

    .icon--menu:before {
        content: '' !important;
        height: 19px;
        width: 24px;
        position: absolute;
        z-index: 10000;
        border-top: 3px solid var(--header-menuBtn-color);
        border-bottom: 3px solid var(--header-menuBtn-color);
        top: 5px;
        left: 0;
    }

    .icon--menu:after {
        content: '' !important;
        width: 24px;
        position: absolute;
        z-index: 10000;
        border-top: 3px solid var(--header-menuBtn-color);
        top: 13.5px;
        left: 0;
    }

    .header .mobile-user-menu a {
        color: var(--header-menuBtn-color);
    }

    .header .user-menu.nav > li > a.dropdown-toggle.nav-link.show {
        background: transparent;
    }
    /*
.icon--cross:before {
    content: '\f00d' !important;
    color: #b9dbaa;
}*/
    .icon--cross:before, .icon--cross:after {
        content: '' !important;
        background: var(--bs-lightBlue-color);
        cursor: pointer;
        transform: rotate(45deg);
        height: 13px;
        width: 4px;
        position: absolute;
        top: 5px;
        right: 4px;
        border-radius: 3px;
    }

    .icon--cross:after {
        transform: rotate(-45deg);
    }

    button .action {
        z-index: 999999;
    }

        button.action.action--open {
            top: 0.75em;
            width: 24px;
            height: 24px;
            cursor: pointer;
        }

        button.action.action--close {
            top: 1em;
        }

    @media (max-width: 991px) {
        .container > .content {
            margin: 0 !important;
            width: 100% !important;
            padding: 60px 0 0 !important;
            -webkit-transition: all 0.2s ease;
            -ms-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        .header .header-left {
            justify-content: center;
        }

            .header .header-left .logo {
                width: fit-content;
            }
    }
    /*.sidebar {
    background-color: #44a939;
    background: linear-gradient(0deg, #0a515e, #44a939) !important;
}

    .sidebar .slimScrollDiv {
        background: linear-gradient(0deg, #0a515e, #44a939) !important;
    }

    .sidebar .sidebar-menu > ul > li > a img {
        filter: brightness(3);
    }

    .sidebar .sidebar-menu > ul > li > a:hover {
        background: #00000021 !important;
    }

    .sidebar .sidebar-menu > ul > li.active a {
        background: #ffffff3d !important;
    }

.sidebar-inner slimscroll{
    width:100% !important;
}
.brand-text h3 {
    color: #29804a !important;
}

.submenu:not(:has(li)){
    display : none !important;
}*/

    /*common #ff6358 변경*/

.k-menu-group .k-item > .k-link:active, .k-menu-group .k-item > .k-link.k-active, .k-menu-group .k-item > .k-link.k-selected,
.k-menu.k-context-menu .k-item > .k-link:active, .k-menu.k-context-menu .k-item > .k-link.k-active, .k-treeview-leaf.k-selected,
.k-menu.k-context-menu .k-item > .k-link.k-selected, .k-overflow-container .k-button.k-selected, .k-slider .k-slider-selection,
.k-calendar .k-calendar-td.k-selected .k-calendar-cell-inner, .k-calendar .k-calendar-td.k-selected .k-link, .k-drawer-item.k-selected,
.k-list-item.k-selected, .k-selected.k-list-optionlabel {
    background-color: var(--ict-leisure) !important;
}

    .k-list-item.k-selected:hover, .k-selected.k-list-optionlabel:hover, .k-list-item.k-selected.k-hover, .k-selected.k-hover.k-list-optionlabel {
        color: white !important;
        background-color: var(--ict-leisure) !important;
        filter: brightness(0.9)
    }

.k-grid-header .k-sort-icon, .k-grid-header .k-sort-order,
.k-time-header .k-time-now, .k-time-selector-header .k-time-now {
    color: var(--ict-leisure) !important;
}

.k-button-solid-base.k-selected, .k-progressbar .k-selected, k-progressbar-chunk .k-selected,
.k-radio:checked,
.k-radio.k-checked,
.k-ripple-container .k-radio::after,
.k-slider .k-draghandle,
.k-slider .k-draghandle:hover {
    border-color: var(--ict-leisure) !important;
    color: white;
    background-color: var(--ict-leisure) !important;
}

    .k-calendar {
        border-color: rgba(0, 0, 0, 0.08);
        color: var(--txt-color) !important;
        background-color: transparent !important;
    }
    /*common*/
    .k-grid-layout {
        grid-template-columns: 100%;
    }

    .grid-50-layout {
        grid-template-columns: 50%;
    }

    .k-tabstrip-items-wrapper .k-item {
        color: var(--txt-color) !important;
        cursor: pointer;
    }

        .k-tabstrip-items-wrapper .k-item:hover, .k-tabstrip-items-wrapper .k-item.k-hover {
            color: #0741a5 !important;
        }

        .k-tabstrip-items-wrapper .k-item.k-active {
            color: var(--bs-side-color) !important;
        }

    .k-grid .k-table-row.k-table-alt-row {
        background-color: #7090b60f !important;
    }

    .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row):hover, .k-grid .k-table-tbody > .k-table-row:not(.k-detail-row).k-hover {
        background-color: #a4bbd536 !important;
    }

    @media(max-width: 991px) {
        .grid-50-layout {
            grid-template-columns: 100%;
        }

            .grid-50-layout > div:nth-child(2) {
                grid-area: 3 / 1 !important
            }

            .grid-50-layout > div:nth-child(4) {
                grid-area: 4 / 1 !important;
            }
    }

    .float-left {
        float: left;
    }

    .float-right {
        float: right;
    }

    .page-header {
        /* border-bottom: 4px solid #0f375d;
    padding-bottom: 20px;*/
        height: 40px !important;
        margin-bottom: 0;
    }

        .page-header .btn-added {
            background: #43a83a;
        }

            .page-header .btn-added:hover {
                background: #349144;
            }

    .form-group .btn-filters:hover {
        background: #e88c35;
    }

    .btn-secondary {
        background: #6c7d72;
    }

        .btn-secondary:hover {
            color: #fff;
            background-color: #5c6a5f;
        }

        .btn-check:focus + .btn-secondary, .btn-secondary:focus, .btn-check:active + .btn-secondary, .btn-check:checked + .btn-secondary, .btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle {
            background: #3a4532;
        }


    .k-switch-on .k-switch-track {
        border: var(--ict-switchOn-color) !important;
        background-color: var(--ict-switchOn-color) !important;
    }

    .k-switch-off .k-switch-track {
        background-color: var(--form-bg-color) !important;
    }

    .k-switch-on:focus .k-switch-track, .k-switch-on.k-focus .k-switch-track {
        outline: 2px solid rgba(123, 183, 119, 0.25) !important;
    }

    .k-form-field .k-switch.k-switch-md {
        place-self: center;
    }

    .k-button {
        transition: all 0.2s;
    }

        .k-button:hover, .k-button:focus {
            filter: brightness(0.95);
        }

    .k-button-md {
        font-size: 16px !important;
    }

.k-button-solid-base {
    color: #fff !important;
    background-color: var(--ict-btn-solid) !important;
}

        .k-button-solid-base.k-input-button {
            border-color: rgba(0, 0, 0, 0.08) !important;
            color: var(--txt-color) !important;
            background-color: var(--ict-pagination-bg) !important;
        }

    .k-button-solid-light {
        border-color: #2EBAAC !important;
        background: transparent !important;
        color: #2EBAAC !important;
    }

        .k-button-solid-light:hover {
            /*color:white !important;*/
            /*background-color: #76bccd !important;*/
        }

    /*.k-button-solid-base.k-selected {
    border-color: #67B961 !important;
    background-color: #67B961 !important;
}
*/
    .k-button-solid-primary {
        background-color: var(--primary-color) !important;
        color: white;
        border-color: transparent !important;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02)) !important;
    }

        .k-button-solid-primary:hover, .k-button-solid-primary.k-hover {
            /* border-color: #7db878 !important;*/
            /*background-color: #2956a3 !important*/
        }

        /* .k-button-solid-primary:focus, .k-button-solid-primary.k-focus {
        box-shadow: 0 0 0px 2px #67B9614d !important;
    }*/

        .k-button-solid-primary:active, .k-button-solid-primary.k-active {
            /*background-color: var(--bs-side-color) !important;*/
        }

        .k-button-solid-primary.k-selected {
            /*border-color: #5b9855 !important;
        background-color: #5b9855 !important;*/
        }


    /* .k-button-solid-error {
        border-color: #F5533D !important;
        background-color: #f5533d !important;
    }
    .k-button-solid-error:hover, .k-button-solid-error.k-hover {
        border-color: #dd402b !important;
        background-color: #dd402b !important;
    }*/
    .k-button-solid-error {
        border-color: #EA603C !important;
        background-color: transparent !important;
        color: #EA603C !important;
    }
    /*.k-button-solid-error:hover, .k-button-solid-error.k-hover {*/

    /*background-color: #ed5b33 !important
    }

    .k-button-solid-error:focus, .k-button-solid-error.k-focus {
        box-shadow: 0 0 0px 2px rgba(243, 83, 61, 0.3) !important;
    }

    .k-button-solid-error:active, .k-button-solid-error.k-active {
        border-color: #e21f04 !important;
        background-color: #e21f04 !important;
    }

    .k-button-solid-error.k-selected {
        border-color: #e21f04 !important;
        background-color: #e21f04 !important;
    }*/


    .k-button-solid-info {
        border-color: #2290E1 !important;
        background-color: transparent !important;
        color: #2290E1 !important;
    }

    /*.k-button-solid-info:hover, .k-button-solid-info.k-hover {
        border-color: #2f9363 !important;
        background-color: #2f9363 !important;
    }
*/
    /*.k-button-solid-info:focus, .k-button-solid-info.k-focus {
        box-shadow: 0 0 0px 2px #43A8774d !important;
    }

    .k-button-solid-info:active, .k-button-solid-info.k-active {
        border-color: #248556 !important;
        background-color: #248556 !important;
    }

    .k-button-solid-info.k-selected {
        border-color: #248556 !important;
        background-color: #248556 !important;
    }*/

    .k-button-flat-primary {
        color: var(--dash-navy-text) !important;
    }

    .k-grid-layout {
        position: relative;
    }

    .k-form {
        position: relative
    }

    .k-form-buttons.k-actions-end {
        position: absolute;
        top: -60px;
        right: 10px;
    }

    .k-form-horizontal .k-form-field > .k-label, .k-form-horizontal .k-form-field > kendo-label, .k-form-horizontal .k-form-field > .k-form-label {
        width: 35% !important;
        max-width: 210px;
        font-size: 13px;
        text-wrap: nowrap;
        word-break: keep-all;
        text-align: start;
    }

    .k-form-field.k-colspan-4 > label.k-form-label {
        width: 9.333% !important;
    }

    .k-form-field.k-colspan-3 > label.k-form-label {
        width: 13.333% !important;
    }

    .k-form-field.k-colspan-2 > label.k-form-label {
        width: 21% !important;
    }

    .k-form-field.k-colspan-1 > label.k-form-label {
        width: 55.333% !important;
    }

    @media (max-width: 575px) {
        .page-header {
            margin-bottom: -5px !important;
        }

        .k-form-buttons.k-actions-end {
            /*margin-top: 48px !important;*/
            width: 100%;
            right: 0;
            bottom: -45px;
            place-items: self-end;
        }

        .input-form-400 > div > form {
            padding-top: 20px;
        }

        .k-form-buttons.k-actions-end > button {
            flex-grow: 1;
        }

            .k-form-buttons.k-actions-end > button:only-child {
                flex-grow: unset !important;
            }

        .k-grid-layout.k-justify-items-stretch .k-grid-layout.k-justify-items-stretch .page-header {
            margin-bottom: 4px !important;
        }

            .k-grid-layout.k-justify-items-stretch .k-grid-layout.k-justify-items-stretch .page-header h4.page-title {
                text-align: left !important;
                width: 100%;
            }
    }



    /*grid-color*/

    .k-grid {
        border: 1px solid var(--ict-input-outline)
    }
    /*
.k-grid .k-grid-header table.k-table {
    border-top: 1px solid #337EFF;
}
*/
    table thead, .table thead {
        /*background: #a2e49f36 !important;*/
        background: var(--ict-table-header) !important;
        font-size: 16px;
        color: var(--txt-bk-color) !important;
    }

    .k-grid td, .k-grid .k-table-td {
        border-color: transparent !important;
        border-bottom-color: rgba(0, 0, 0, 0.08) !important;
    }

    .k-grid-header, .k-grid-header-wrap, .k-grouping-header, .k-grid .k-table-th, .k-grid, .k-table-th.k-sorted {
        border-color: var(--ict-table-border) !important;
    }

        .k-grid .k-table-th {
            border-color: var(--ict-table-header) !important;
        }

    col.k-sorted {
        background-color: var(--state-bg-left) !important;
    }

    .k-grid-header, .k-grouping-header, .k-grid-add-row, .k-grid-footer {
        background-color: var(--ict-table-header) !important;
    }



    /*table color*/
    .k-form-search-field-wrap {
        background: var(--header-bg-color) !important;
        border: 1px solid var(--header-bg-color);
        border-top: 5px solid var(--primary-color);
    }

    .k-input-solid {
        /*border-color: var(--ict-input-outline);*/
        color: var(--txt-bk-color);
        background-color: var(--bs-body-color) !important;
    }

.k-grid-content {
    background: var(--header-bg-color) !important;
    color: var(--txt-color);
    overflow-y: auto !important;
}

    .k-label {
        color: var(--txt-color) !important;
    }


    .k-pager {
        border-color: var(--ict-input-outline) !important;
        color: var(--txt-color) !important;
        background-color: var(--ict-pagination-bg) !important;
    }

    form.k-form.telerik-blazor.k-form-horizontal.k-form-md {
        background: var(--header-bg-color) !important;
    }

    /*search-field*/
    .k-form-search-field-wrap {
        display: flex;
        justify-self: start;
        flex-wrap: nowrap;
        place-content: end;
        width: 100%;
        background: white;
        border: 1px solid var(--ict-table-border);
        padding: 10px;
        margin-bottom: -10px;
        margin-top: 5px;
        border-top: 5px solid var(--primary-color);
    }

        .k-form-search-field-wrap > div {
            margin-right: 15px;
            align-self: end;
        }

            .k-form-search-field-wrap > div :last-child {
                margin-right: 0;
            }

                .k-form-search-field-wrap > div :last-child button[type="submit"] {
                    margin-top: 20.0000000004px;
                }

    form.k-form.telerik-blazor.k-form-horizontal.k-form-md {
        background: #ECF2FB;
        border: 1px solid var(--ict-table-border);
        margin-top: -10px;
        padding-bottom: 15px;
        border-top: 5px solid var(--primary-color);
        background: var(--form-bg-color);
    }

    @media(max-width: 1170px) {
        .k-form-search-field-wrap {
            flex-wrap: unset !important;
            max-width: calc(100%) !important;
        }

        .k-stack-layout.telerik-blazor.k-hstack.k-justify-content-stretch {
            width: unset !important;
            max-width: 700px !important;
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 2% !important;
        }

        .k-justify-content-stretch .k-daterangepicker .k-dateinput {
            min-width: fit-content;
            width: unset !important;
        }
        .w-dash-title {
            flex: 1 130px !important;
        }
        /*.k-justify-content-stretch > * {
            flex-basis: 24% !important;
            flex-shrink: 1 !important;
            flex-grow: 1 !important;
        }*/

        .k-form-search-field-wrap > div:last-child > div.k-stack-layout.telerik-blazor.k-hstack.k-justify-content-stretch {
            flex-wrap: nowrap !important;
            gap: 10px !important;
        }
    }
    @media(max-width: 768px) {
        /*.k-justify-content-stretch > * {
            flex-basis: 49% !important;
        }*/
        .inner-card-style .inner-tit h3 {
            font-size: 18px;
            padding: 10px 15px;
        }

        .page-title h2 {
            font-size: 20px;
            font-weight: 600;
        }
    }

    @media(max-width: 550px) {
        /*.k-justify-content-stretch > * {
        flex-basis: 100% !important;
    }*/
        .k-form-search-field-wrap {
            /*flex-wrap: wrap !important;*/
            max-width: 100% !important;
        }

        .k-daterange-picker, .k-daterangepicker > span.k-floating-label-container {
            flex: 1 1 49%;
        }
    }

    /*input field*/
    .k-input-md, .k-picker-md {
        font-size: 16px !important;
    }

    .k-floating-label-container.k-empty > .k-label {
        top: 29px;
    }

    .k-input-solid {
        /*border-color: var(--ict-input-outline) !important;*/
        color: unset !important;
        color: var(--txt-color) !important;
    }

        .k-input-solid.k-invalid, .k-input-solid.ng-invalid.ng-touched, .k-input-solid.ng-invalid.ng-dirty {
            border-color: #f31700 !important;
        }

    .input-form-400 {
        /*max-width: 450px;
    height: fit-content;*/
        margin-top: 20px;
    }

    .k-form > *:not(.k-hidden):first-child, .k-form > *.k-hidden + :not(.k-hidden) {
        padding-top: 14px;
    }

    .input-form-400 .k-input-md {
        max-width: 300px !important;
    }

    .k-form-md .k-form-field {
        margin-top: 0 !important;
        margin-bottom: 20px;
    }

    .k-form-horizontal .k-form-field > .k-label, .k-form-horizontal .k-form-field > kendo-label, .k-form-horizontal .k-form-field > .k-form-label {
        width: 20%;
        padding-top: 0;
    }

    .k-form-field > .k-label {
        flex-direction: initial !important;
    }

    .k-form-horizontal .k-form-field-wrap {
        max-width: calc(80% - 10px);
    }

    #purContEdit .k-form-horizontal .k-form-field > .k-form-label {
        display: inline-block;
        line-height: 22px;
        font-size: 16px;
        margin-bottom: 5px;
        text-align: start;
        color: var(--bs-side-color);
    }

    #purContEdit .k-form-horizontal .k-form-field:nth-child(4n-3) > .k-form-label {
        text-align: start;
    }

    .k-grid .k-grid-md td, .k-grid .k-grid-md .k-table-td, .k-grid-md td, .k-grid-md .k-table-td {
        padding-block: 10px !important;
        padding-inline: 14px !important;
    }

    .k-input-md .k-input-inner, .k-picker-md .k-input-inner {
        padding-block: 10px !important;
        padding-inline: 14px !important;
    }

    .k-form-search-field-wrap .k-input-md .k-input-inner, .k-picker-md .k-input-inner {
        padding-block: 4px !important;
    }

    .k-d-grid {
        padding: 0 15px;
    }

    .k-form-horizontal .k-form-field {
        /* display: flex; */
        display: block !important;
        padding-left: 2.5% !important;
    }

    #purContEdit .k-form-horizontal .k-form-field-wrap {
        /*max-width: calc(65% - 20px);*/
        max-width: 97.5%;
    }

    .k-grid-content .k-table-row:last-child > td, .k-grid-content .k-table-row:last-child > .k-table-td, .k-grid-content-locked .k-table-row:last-child > td, .k-grid-content-locked .k-table-row:last-child > .k-table-td {
        border-bottom-width: 1px !important;
    }

    .k-grid-md .k-command-cell {
        text-align: center !important;
    }

    .k-input-spinner {
        display: none !important;
    }

    .k-tabstrip-item.k-active {
        color: #43a83a !important;
    }

    .k-tabstrip-item {
        width: 100%;
        display: inline-flex;
        color: black !important;
        width: 160px;
        min-width: 160px;
        min-height: 48px;
        padding: 6px 12px;
        font-weight: 500;
        line-height: 1.75;
        white-space: normal;
        letter-spacing: .02857em;
        text-transform: uppercase;
        text-align: center;
        align-items: center;
        transition: background-color 150ms cubic-bezier(.4,0,.2,1) 0ms;
    }

    .k-tabstrip-items .k-link {
        justify-content: center !important;
    }
    /*popup header*/
    .k-window {
        background-color: var(--header-bg-color) !important;
        color: var(--txt-bk-color);
    }

    .k-window-titlebar {
        color: var(--txt-bk-color) !important;
        background-color: var(--ict-table-header) !important;
    }

    .k-window-content {
        color: var(--txt-color) !important;
        background-color: var(--header-bg-color) !important;
    }

    .k-messagebox-error {
        border-color: #ff1a001f !important;
        background-color: #ff1a001f !important;
    }

        .k-messagebox-error .validation-message {
            color: var(--txt-red-error) !important;
        }


    /*switch*/
    /* .k-switch-md {
        width: 50px !important;
        height: 20px !important;
    }

        .k-switch-md .k-switch-track {
            width: 50px !important;
            height: 25px !important;
        }

        .k-switch-md .k-switch-thumb {
            width: 25px !important;
            height: 25px !important;
        }

        .k-switch-md.k-switch-off .k-switch-thumb-wrap {
            left: 12.5px !important;
        }

        .k-switch-md.k-switch-on .k-switch-thumb-wrap {
            left: calc(100% - 5.5px) !important;
        }*/
    /*cloud추가 버튼*/
    .reference-grid .mud-file-upload .mud-input-control-input-container {
        text-align-last: end;
        padding-bottom: 8px;
    }

        .reference-grid .mud-file-upload .mud-input-control-input-container .mud-button-filled-primary.mud-button-filled-size-medium {
            padding: 0;
            padding-block: 5px;
            padding-inline: 9px;
            box-shadow: none;
        }

            .reference-grid .mud-file-upload .mud-input-control-input-container .mud-button-filled-primary.mud-button-filled-size-medium .mud-button-label {
                gap: 4px;
                height: 20px;
                font-size: 14px;
            }

                .reference-grid .mud-file-upload .mud-input-control-input-container .mud-button-filled-primary.mud-button-filled-size-medium .mud-button-label .mud-icon-root.mud-svg-icon {
                    width: 16px;
                    height: 16px;
                }

        .reference-grid .mud-file-upload .mud-input-control-input-container .mud-button-label .mud-button-icon-start {
            margin: 0;
        }

    .k-grid-toolbar {
        justify-content: flex-end !important;
        position: absolute !important;
        top: -46px !important;
        background: transparent !important;
        right: 0px !important;
    }


    .k-form-legend {
        display: none !important;
    }

    .k-form .k-form-fieldset {
        margin: 0 !important;
    }

    /* Grid 정렬 */
    .k-grid th.center-me {
        text-align: center !important;
    }

    th.center-me .k-cell-inner > .k-link {
        justify-content: center !important;
    }

    .k-grid th.align-right {
        text-align: right !important;
    }

    th.align-right .k-cell-inner > .k-link {
        justify-content: right !important;
    }

    .k-grid-header th.align-right.right-padding {
        padding-right: 12px !important;
    }

        .k-grid-header th.align-right.right-padding > .k-cell-inner {
            margin-right: 0 !important;
        }



    /*home card*/
    .dash-widget .dash-widgetimg span {
        width: 68px;
        height: 68px;
    }

    #home-card-stock li.k-tabstrip-item {
        width: calc(100% / 3);
        min-width: fit-content;
    }

    #home-card-latest li.k-tabstrip-item {
        width: calc(100% / 4);
        min-width: fit-content;
    }

    /*반응형*/
    @media (max-width: 575px) {
        .sidebar {
            width: unset !important;
            min-width: 240px;
        }

        .slide-nav .sidebar {
            width: 100%;
        }
    }

    /* DropDown Custom */
    .k-picker-solid {
        /*border-color: var(--ict-input-outline);*/
        color: var(--txt-bk-color) !important;
        background-color: var(--header-bg-color) !important;
    }

    .k-popup {
        border-color: var(--ict-input-outline) !important;
        color: var(--txt-color) !important;
        background-color: var(--header-bg-color) !important;
        box-shadow: var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12));
    }

    .k-list {
        border-color: var(--ict-input-outline);
        color: var(--txt-bk-color) !important;
        background-color: var(--bs-body-color) !important;
    }

    .k-list-item:hover, .k-list-optionlabel:hover, .k-list-item.k-hover, .k-hover.k-list-optionlabel {
        color: var(--txt-bk-color) !important;
        background-color: #a4bbd536 !important;
    }
    /* Check Box color */
    .k-radio:checked, .k-radio.k-checked {
        border-color: var(--bs-side-color) !important;
        color: white !important;
        background-color: var(--bs-side-color) !important;
    }

    /*비율 차트*/

    .ratio-bar.dash-widget .dash-widgetcontent {
        flex: 1;
    }

    .ratio-bar-wrap {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        border-radius: 4px;
        overflow: hidden;
    }

    span.ratio-item {
        height: 25px;
        line-height: 25px;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
        word-break: keep-all;
        color: white;
        text-shadow: 0 0 5px #0000003d;
    }

        span.ratio-item.ratio-1 {
            background: #38bea7;
            z-index: 3;
            /*width: 60%;*/
        }

        span.ratio-item.ratio-2 {
            background: #f0b214;
            z-index: 2;
            /*width: 23%;*/
        }

        span.ratio-item.ratio-3 {
            flex-grow: 1;
            z-index: 1;
            background: #a1b9aa;
        }

        span.ratio-item small {
            font-weight: normal;
            font-size: 16px;
            margin-left: 4px;
        }

    .ratio-bar-legend {
        margin-bottom: 8px;
        line-height: 20px;
    }

        .ratio-bar-legend .ratio-legend {
            margin-right: 15px;
        }

            .ratio-bar-legend .ratio-legend::before {
                content: '';
                width: 10px;
                height: 10px;
                background: #38bea7;
                display: inline-block;
                margin-right: 4px;
                vertical-align: middle;
            }

        .ratio-bar-legend .ratio-legend-1::before {
            background: #38bea7;
        }

        .ratio-bar-legend .ratio-legend-2::before {
            background: #f0b214;
        }

        .ratio-bar-legend .ratio-legend-3::before {
            background: #a1b9aa;
        }

    .grid1200 > div > .k-grid-layout > div {
        padding: 0.2rem 1rem 1rem;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #E8EBED;
        box-shadow: 0 0 6px #E8EBED;
    }

    @media(max-width:1558px) {
        .home-top-items > div {
            width: calc(100% / 3);
        }
    }

    @media(max-width:1380px) {

        .home-lsrEqpmnt .leisure-card .inner-con .k-hbox {
            display: grid;
            row-gap: 1rem;
            justify-items: center;
        }

        .home-lsrEqpmnt .leisure-card .inner-con .k-hbox .k-rounded-full {
            max-width: 80px;
        }

        .home-lsrEqpmnt  .leisure-card .inner-con .k-vbox .col {
            font-size: 1.2rem !important;
        }

        .home-lsrEqpmnt .leisure-card .inner-con .k-vbox label {
            font-size: 2.2rem !important;
        }
    }

    @media(max-width: 768px) {
        .home-lsrEqpmnt .container-small .leisure-card .inner-con .k-hbox {
            row-gap: none;
        }
        .home-lsrEqpmnt .leisure-card .inner-con .k-hbox .k-rounded-full {
            display: none;
        }
        .home-top-items > div {
            width: calc(100% / 2);
        }

        table[role="presentation"] {
            min-width: 500px;
        }
    }

    @media (max-width: 480px) {
        .home-top-items > div {
            width: 100%;
        }

        .grid1200.grid-xs > div > .k-grid-layout > div {
            padding-top: 4rem;
        }

            .grid1200.grid-xs > div > .k-grid-layout > div .k-hstack.k-justify-content-stretch {
                margin-top: -3rem !important;
                left: 0;
                width: 100% !important;
            }
    }

    @media(max-width:1200px) {
        .grid1200 > div > .k-grid-layout > div {
            margin-bottom: 15px;
        }

            .grid1200 > div > .k-grid-layout > div:last-child {
                margin-bottom: 0;
            }

        .grid1200 .telerik-blazor.k-grid.k-grid-md {
            margin-bottom: 15px;
        }

        .grid1200 .k-stack-layout.telerik-blazor.k-hstack.k-justify-content-stretch {
            max-width: unset !important;
        }

        .grid1200 .k-grid-layout.k-justify-items-stretch {
            display: contents;
            width: 100%;
        }

        .row.col-lg-12 {
            width: 100%;
        }

        #receiveInventorychart .grid1200 > div > .k-grid-layout > div:nth-child(2) {
            display: none
        }
    }



    /*main page*/
    .inner-header-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 19px;
        color: var(--dash-navy-text);
    }

        .inner-header-wrap .k-form-field-wrap {
            display: flex;
            gap: 6px;
        }

            .inner-header-wrap .k-form-field-wrap .k-datepicker {
                max-width: 100px
            }

    @media (max-width: 991px) {
        .inner-header-wrap {
            font-size: 1rem;
            /*display: block;*/
        }

            .inner-header-wrap .k-form-field-wrap .k-datepicker {
                display: none;
            }

        .k-tilelayout {
            grid-template-columns: 100% !important;
            grid-auto-rows: minmax(0px, auto) !important;
        }

        .inner-header-wrap > span {
            margin-bottom: 6px;
        }
    }


    .k-table, .k-data-table {
        color: unset !important;
    }


    /*mqttmng*/
    .k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-active, .k-tabstrip-items-wrapper .k-item.k-selected,
    .k-tabstrip-content, .k-tabstrip > .k-content {
        color: var(--txt-color) !important;
        background-color: var(--header-bg-color) !important;
    }

    .mqttmng-container .k-content .k-picker-solid {
        border-color: var(--ict-input-outline);
        color: var(--txt-bk-color);
        background-color: var(--bs-body-color) !important;
    }

    .mqttmng-container .k-grid-container {
        background: var(--header-bg-color) !important;
        color: var(--txt-color);
    }


    .validation-errors {
        padding-block: 4px;
        padding-inline: 8px;
        font-size: 13px;
        margin-bottom: 12px;
    }


    /*leisure2DashBoard*/
.k-listview {
    background: transparent !important;
    border-radius: 9px;
    border: 1px solid var(--dash-card-line) !important;
    overflow: auto;
}

    .k-listview-content {
        background: var(--dash-card-bg) !important;
    }

    .k-listgroup {
        /*padding: 15px !important;*/
        background: var(--dash-card-bg) !important;
        border: none !important;
    }

    .k-listview-header {
        background: var(--dash-card-line);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        padding-left: 6px;
    }

        .k-listview-header h5 {
            border: none;
            color: var(--dash-navy-text) !important;
            font-size: 1.5rem;
            font-weight: bold;
            padding-block: 6px;
            padding-inline: 12px;
        }

    .k-listgroup-item {
        padding-block: 15px !important;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

        .k-listgroup-item:last-child {
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        }
.k-listview-item:last-child .k-listgroup-item {
    border: none;
}
.k-listgroup-item .leisure-img-list {
    background: var(--leisure-icon-bg);
    border-radius: 50%;
    max-width: 90px;
    max-height: 90px;
}

        .k-listgroup-item .list-inner {
            padding: 0;
            font-size: 1.285em;
            font-weight: bold;
            line-height: normal;
        }

        .k-listgroup-item .list-subtitle {
            color: var(--dash-tit-color)
        }

        .k-listgroup-item .list-cont {
            height: 60px;
            align-content: center;
            color: var(--txt-bk-color)
        }

            .k-listgroup-item .list-cont span.img {
                position: relative;
                top: 4px;
            }


    #leisure-dashboard {
        padding: 1em 0;
    }

        #leisure-dashboard .leisure-card .k-vbox .col {
            font-size: 1.7rem;
        }

        #leisure-dashboard .inner-card-style {
            border: none;
        }

        #leisure-dashboard .k-grid .k-grid-header .k-table-th {
            font-size: 20px;
        }

        #leisure-dashboard .k-table-td {
            font-size: 24px;
            text-align: center;
            word-break: keep-all;
        }

        #leisure-dashboard .inner-card-style .inner-tit h3 {
            padding-left: 20px !important;
            font-weight: 500;
        }

        #leisure-dashboard .k-grid .k-table-td:not(:only-child) small,
        #leisure-dashboard .k-grid .k-table-td:not(:only-child):last-child {
            font-size: 20px;
        }

        #leisure-dashboard .k-master-row.k-table-row .k-table-td .k-card-media {
            max-width: 60px;
            max-height: 60px;
            background: #ffffff17;
            border-radius: 50%;
            padding: 0.3rem;
        }

        #leisure-dashboard .k-grid .k-table-td:not(:only-child):first-child {
            text-overflow: clip;
        }

    /*.k-listgroup-item .signal-speed-img {
        width: 30px;
    }

    .k-listgroup-item .leisure-bettery-img {
        max-width: 90px;
    }*/
    span.leisure-bettery-img.leisure-bettery-full {
        background: url(../img/Eqpmnt/full-btr.png) no-repeat;
        background-size: contain;
        background-position: left;
        min-width: 90px;
        height: 60px;
    }

    span.leisure-bettery-img.leisure-bettery-high {
        background: url(../img/Eqpmnt/high-btr.png) no-repeat;
        background-size: contain;
        background-position: left;
        min-width: 90px;
        height: 60px;
    }

    span.leisure-bettery-img.leisure-bettery-half {
        background: url(../img/Eqpmnt/half-btr.png) no-repeat;
        background-size: contain;
        background-position: left;
        min-width: 90px;
        height: 60px;
    }

    span.leisure-bettery-img.leisure-bettery-low {
        background: url(../img/Eqpmnt/low-btr.png) no-repeat;
        background-size: contain;
        background-position: left;
        min-width: 90px;
        height: 60px;
    }

    span.leisure-bettery-img.leisure-bettery-non {
        background: url(../img/Eqpmnt/non-btr.png) no-repeat;
        background-size: contain;
        background-position: left;
        min-width: 90px;
        height: 60px;
    }

    span.signal-speed-img {
        width: 18px;
        height: 18px;
        border-radius:50%;
        /*background: var(--bs-red);*/
    }
        span.signal-speed-img.signal-100 {
            background: var(--ict-error);
        }
        span.signal-speed-img.signal-75 {
            background: var(--ict-danger);
        }
        span.signal-speed-img.signal-50 {
            background: var(--ict-warning);
        }
        span.signal-speed-img.signal-25 {
            background: var(--ict-normal);
        }
        span.signal-speed-img.signal-0 {
            background: var(--ict-well);
        }
    span.signal-img.signal-100 {
        background: url(../img/Eqpmnt/signal-100.png) no-repeat;
        background-size: contain;
        background-position: left;
        width: 30px;
        height: 25px;
    }

    span.signal-img.signal-75 {
        background: url(../img/Eqpmnt/signal-75.png) no-repeat;
        background-size: contain;
        background-position: left;
        width: 30px;
        height: 25px;
    }

    span.signal-img.signal-50 {
        background: url(../img/Eqpmnt/signal-50.png) no-repeat;
        background-size: contain;
        background-position: left;
        width: 30px;
        height: 25px;
    }

    span.signal-img.signal-25 {
        background: url(../img/Eqpmnt/signal-25.png) no-repeat;
        background-size: contain;
        background-position: left;
        width: 30px;
        height: 25px;
    }

    span.signal-img.signal-0 {
        background: url(../img/Eqpmnt/signal-0.png) no-repeat;
        background-size: contain;
        background-position: left;
        width: 30px;
        height: 25px;
    }









    /*HOME dashboard leisure*/
.leisure-left-round {
    background: var(--leisure-icon-bg);
    box-shadow: 2px 3px 6px #00000020;
    border-radius: 50%;
    text-align: center;
    max-width: 130px;
    max-height: 130px;
}

    .leisure-card .k-vbox .col {
        font-size: 1.3rem;
    }

    .leisure-card .k-vbox label {
        font-size: 3.7rem;
    }

    /*HOME dashboard leisure*/
@media (max-width: 863px) {
    #leisure-dashboard > .k-grid-layout {
        grid-template-columns: 100% !important;
        grid-template-rows: auto !important;
    }
        #leisure-dashboard > .k-grid-layout > div {
            grid-row: auto !important;
            grid-column: 1 !important;
        }
}
.visitTopGroup .w-75 {
    background: var(--dash-card-line) !important;
}
    .visitTopGroup > .w-25 .k-input-inner {
    padding-block: 18px !important;
    padding-inline: 16px !important;
    font-size: 20px;
}
.visitTopGroup > .inner-card-style {
    padding-block: 14px !important;
    padding-inline: 22px !important;
    transition: none !important;
}
    .visitTopGroup > .inner-card-style span {
        color: var(--dash-navy-text) !important;
        font-size: 1.5rem !important;
        font-weight: 500;
    }
    .visitTopGroup > .inner-card-style small {
        font-size: large;
        margin-left: 4px;
        font-weight: 500;
    }

.visitTopGroup span.visitCout-icon {
    background-image: url(../../img/visitcount_d.svg);
    background-size: contain;
    background-position: center;
    height: 40px;
    width: 40px;
    margin-right: 2px;
}

.visitTopGroup span :has(span.visitCout-icon) {
    display: inline-flex;
    gap: 1rem;
    align-items: center;
}
.visitChart {
    flex: 1 0 auto;
}

.visitChart .k-tabstrip {
    height:100%;
}
/*.visitChart .k-tabstrip-content, #home-ph-dash .k-tabstrip > .k-content {
    align-content: center;
}*/
 .visitChart .k-tabstrip-content .k-chart svg > g text {
    font-size: 20px !important;
}
    .visitChart .k-tabstrip-content .k-chart svg > g text[style="font: 16px sans-serif; white-space: pre;"] {
        font-size: 16px !important;
    }

    span.distress-icon {
        background-image: url(../../img/distress_icon.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 40px;
        width: 40px;
    }