﻿
/*tbody tr:nth-child(2n) {*/ /*그리드 row alternative*/
    /*background-color: #F8FAFB;
}*/
.mainbax {
    box-shadow: 0 !important;
    -webkit-box-shadow: 0 !important;
    -moz-box-shadow: 0 !important;
}

.box-body {
    margin:5px;
}

.box-body-search { /*조회조건 영역 스타일*/
    background: #F4F6F9;
    border: solid 1.5px #DCDCDC;
}

.box-header-search #inner_box h1 {
    font-size: 1.3em;
    font-weight: bold;
    vertical-align: middle;
    background-image: url(../images/Header_search1.png);
    background-repeat: no-repeat;
    padding: 3px 5px 3px 18px;
    color: #0e2d2f;
    margin : 6px 0 10px -10px;
}

.content {
    /*min-height: 1080px;*/
}
#inner_box > div > h1 {
    /*    margin-left: -14px;*/
    margin-top: 8px;
}

/*좌측 메인메뉴 폰트/아이콘 스타일*/
.Menu {
    height: 75px;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    padding-bottom: 1.5rem;
    margin-left: 5px;
}
/*    .Menu span {
        font-weight: normal;
        font-size: 18px;
        color: white;
        justify-content: space-evenly;
        display: flex;
    }*/
    .Menu .treeview_title {
        font-weight: normal;
        font-size: 18px;
        color: white;
        justify-content: space-evenly;
        display: flex;
        margin:8px 5px 5px 25px; 
    }
    .Menu .treeview_title_collpased {
        font-weight: normal;
        font-size: 18px;        
    }
    .pull-right-container {
        margin-right: 20px;
    }
.treeview > a {
    display: flex !important;
    align-items: center;
}
/*네비게이션 디자인*/
.main-sidebar {
    /*    anchor-name: --main-sidebar-anchor;
    --target: --main-sidebar-anchor;*/
}
.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
    background: none;
}
.skin-blue .main-header .logo:hover {
    background: none;
}
.main-header {
    z-index: 812;
}
.nav-top {
    top: 0;
    /*    right: anchor(--target right);*/
}
.nav-top2 {
    top: 0; 
    position: absolute;
    width: 81px;
    height: 124px;
    /*    right: anchor(--target right);*/
}
.nav-btm {
    bottom: 0;
    position: absolute;
    width: 230px;
    height: 60px;
}
.nav-btm2 {
    bottom: 0;
    position: absolute;
    width: 81px;
    height: 55px;
}
.sidebar {
    margin-top: 3rem;
    padding: 1rem 0 0 0.2rem;
    background: rgb(3, 147, 155);
    border-top-right-radius: 40px;
    min-height: 3600px;
}

.sidebar-menu {
    margin-top: 6px;
}
/*네비게이션 로고*/
.logo-lg {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 5px;
}
.logo-main-title {
    margin: 0 1rem;
    font-weight: bold;
    font-size: 23px;
    color: #03939B;
    width: max-content;
    font-family: 'Pretendard Variable';
}
.logo-sub-title {
    margin: -2px 0 0 0;
    font-size: 10px;
    letter-spacing: 5.6px;
    color: #03939B;
    font-family: 'Pretendard Variable';
}
/*헤더 타이틀*/
.headerTitle {
    color: #03939B;
}
.headerlink {
    color: #797979;
    font-size: 16px;
    font-weight: normal;
    padding: 15px 10px 0 0;
}

/*헤더 햄버거 버튼*/
    .skin-blue .main-header .navbar .sidebar-toggle {
        border-radius: 5rem;
        width: 30px;
        height: 30px;
        margin: 11px 10px 0 16px;
        box-shadow: 0 0 6px #909090;
        background-size: 1.4rem;
        transition: all ease 1s;
    }
        .skin-blue .main-header .navbar .sidebar-toggle:hover {
            background: rgba(75, 210, 191, 0.3);
            background-image: url(../images/Icon_Menu.png);
            background-repeat: no-repeat;
            background-size: 1.4rem;
            margin: 11px 10px 0 16px;
            width: 30px;
            height: 30px;
            color: #03939B;
            transform: rotate( -45deg );
            background-position-x: center;
            background-position-y: center;
        }
    /*그리드 필터 백그라운드 스타일*/
    .grid-filter {
        background: #F4F6F9;
        border-radius: 4px;
        padding: 3px 13px;
        contain: content;
        justify-content: center;
    }

.grid-filter-seperator {
    background: #ACBCD6;
    height: 8px;
    margin: 0px 7px;
    background: #ACBCD6;
    height: 35px;
    margin: 0px 15px;
    width: 1px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: .5rem;
    align-items: center !important;
}
.grid-filiter-alignItem{
    margin-top: -8px;
}
.grid-filiter-alignItem div{
    margin: 0;
    /*padding: 0;*/
}
.dxbs-gridview {
    display: flex;
}

/*차트 컨트롤 필터 백그라운드 스타일*/
/*.rz-card.rz-variant-filled {
    box-shadow: none;
    background: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0;
    margin: -42px 0 0 0;*/
    /*    border: solid 1px #ddd;*/
/*}*/

.rz-chart {
    height: calc(100vh - 1240px) !important;
}

/*데이터그리드 row 편집/확인 버튼 스타일 */
.rz-button.rz-info.rz-shade-default { /*편집*/
    background-color: rgba(255, 255, 255, 0.85);
    border: solid 2px #8CDFDF;
    border-radius: 20px;
    color: #03939B !important;
    margin: 5px 0;
}
.rz-button.rz-success.rz-shade-default { /*확인*/
    background-color: #8CDFDF;
    border-radius: 20px;
    color: white !important;
    margin: 5px 0;
}
/*메인메뉴 - 로그인*/
.user-panel {
    bottom: 1rem;
    position: fixed;
    margin-bottom: 2rem;
    border-top: solid 1px #91c1c1;
    height: fit-content;
    max-width: 230px;
    padding-top: 3rem;
}
.Menu-icon {
    width: 2rem;
    height: 2rem;
}
/*메인메뉴 - 접수및 결과*/
.Menu-Recept {
    background-image: url('../images/Menu_Recept_bg.png') !important;
    background-repeat: no-repeat;
    justify-content: center;
}
    .Menu-Recept:hover {
        background-image: url('../images/Menu_Recept_bg_hover.png') !important;
        background-repeat: no-repeat;
        justify-content: center;
    }

.Menu-Recept-icon {
    background-image: url('../images/Icon_Menu_Recept.png') !important;
    background-repeat: no-repeat !important;
    margin: 8px -10px 0px 10px;
    width: 2rem!important;
    height: 2rem!important;
}

.Menu-Recept-collapse { /*좌측메뉴 축소시 메인메뉴 - 접수 및 결과*/
    background-image: url('../images/Menu_Recept_icon.png') !important;
    background-repeat: no-repeat;
    justify-content: center;
}
    .Menu-Recept-collapse:hover { /*좌측메뉴 축소시 메인메뉴 - 접수 및 결과 over */
        background-image: url('../images/Menu_Recept_icon_hover.png') !important;
        background-repeat: no-repeat;
        justify-content: center;
    }

/*메인메뉴 - 조회 및 출력*/
.Menu-Inquiry { 
    background-image: url('../images/Menu_Inquiry_bg.png') !important;
    background-repeat: no-repeat;
    justify-content: center;
}

    .Menu-Inquiry:hover {
        background-image: url('../images/Menu_Inquiry_bg_hover.png') !important;
        background-repeat: no-repeat;
        justify-content: center;
    }

.Menu-Inquiry-icon {
    background-image: url('../images/Icon_Menu_Inquiry.png') !important;
    background-repeat: no-repeat !important;
    margin: 8px -10px 0px 10px;
    width: 2rem !important;
    height: 2rem !important;
}


.Menu-Inquiry-collapse { /*좌측메뉴 축소시 메인메뉴 - 조회 및 출력*/
    background-image: url('../images/Menu_Inquiry_icon.png') !important;
    background-repeat: no-repeat;
    justify-content: center;
}
    .Menu-Inquiry-collapse:hover { /*좌측메뉴 축소시 메인메뉴 - 조회 및 출력*/
        background-image: url('../images/Menu_Inquiry_icon_hover.png') !important;
        background-repeat: no-repeat;
        justify-content: center;
    }

/*메인메뉴 - 코드관리*/
.Menu-Barcode {
    background-image: url('../images/Menu_Barcode_bg.png') !important;
    background-repeat: no-repeat;
    justify-content: center;
}

    .Menu-Barcode:hover {
        background-image: url('../images/Menu_Barcode_bg_hover.png') !important;
        background-repeat: no-repeat;
        justify-content: center;
    }

.Menu-Barcode-icon {
    background-image: url('../images/Icon_Menu_Barcode.png') !important;
    background-repeat: no-repeat !important;
    margin: 8px -20px 0px 10px;
    width: 2rem !important;
    height: 2rem !important;
}

.Menu-Barcode-collapse { /*좌측메뉴 축소시 메인메뉴 - 코드관리*/
    background-image: url('../images/Menu_Barcode_icon.png') !important;
    background-repeat: no-repeat;
    justify-content: center;
}
    .Menu-Barcode-collapse:hover { /*좌측메뉴 축소시 메인메뉴 - 코드관리*/
        background-image: url('../images/Menu_Barcode_icon_hover.png') !important;
        background-repeat: no-repeat;
        justify-content: center;
    }

/*메인메뉴 - 외부정도관리*/
.Menu-Degree {
    background-image: url('../images/Menu_Setting_bg.png') !important;
    background-repeat: no-repeat;
    justify-content: center;
}

    .Menu-Degree:hover {
        background-image: url('../images/Menu_Setting_bg_hover.png') !important;
        background-repeat: no-repeat;
        justify-content: center;
    }

.Menu-Degree-icon {
    background-image: url('../images/Icon_Menu_Degree.png') !important;
    background-repeat: no-repeat !important;
    margin: 5px 0px 0px 15px;
    width: 2rem !important;
    height: 2rem !important;
}

.Menu-Degree-collapse { /*좌측메뉴 축소시 메인메뉴 - 코드관리*/
    background-image: url('../images/Menu_Degree_icon.png') !important;
    background-repeat: no-repeat;
    justify-content: center;
}
    .Menu-Degree-collapse:hover { /*좌측메뉴 축소시 메인메뉴 - 코드관리*/
        background-image: url('../images/Menu_Degree_icon_hover.png') !important;
        background-repeat: no-repeat;
        justify-content: center;
    }

/*메인메뉴 - 언어설정*/
.Menu-Language {
    background-image: url('../images/Menu_language_bg.png') !important;
    background-repeat: no-repeat;
    justify-content: center;
}

    .Menu-Language:hover {
        background-image: url('../images/Menu_language_bg_hover.png') !important;
        background-repeat: no-repeat;
        justify-content: center;
    }

.Menu-Language-icon {
    background-image: url('../images/Icon_Menu_Language.png') !important;
    background-repeat: no-repeat !important;
    margin: 8px -10px 0px -10px;
    width: 2rem !important;
    height: 2rem !important;
}

.Menu-Language-collapse { /*좌측메뉴 축소시 메인메뉴 - 코드관리*/
    background-image: url('../images/Menu_language_icon.png') !important;
    background-repeat: no-repeat;
    justify-content: center;
}

    .Menu-Language-collapse:hover { /*좌측메뉴 축소시 메인메뉴 - 코드관리*/
        background-image: url('../images/Menu_language_icon_hover.png') !important;
        background-repeat: no-repeat;
        justify-content: center;
    }

.sidebar-menu > li:hover > a { /*좌측메뉴 확장시 메인메뉴 기본 백그라운드*/
    background: #03939B;
}

.sidebar-menu > li > a {
    padding: 0px 30px 8px 10px;
    background: #03939B;
}

.skin-blue .sidebar-menu > li > .treeview-menu > li { /*좌측메뉴 확장시 서브메뉴 스타일*/
    height: 40px;
    display: flex;
    align-items: center;
    margin-left: 10px;
    background: #03939B;
}
    .skin-blue .sidebar-menu > li > .treeview-menu > li:focus { /*좌측메뉴 확장시 서브메뉴 스타일*/
        background: red;
    }

    .skin-blue .sidebar-menu > li > .treeview-menu > li:hover { /*좌측메뉴 확장시 서브메뉴 스타일*/
        border-start-start-radius: 20px;
        border-end-start-radius: 20px;
    }
    .skin-blue .sidebar-menu > li > .treeview-menu li a.active{
        background: #0b7177;
        border-start-start-radius: 20px;
        border-end-start-radius: 20px;
    }

    .skin-blue .sidebar-menu > li > .treeview-menu li a {
        width: 100%; padding:10px; margin:0;
        height: 40px;
    }
.skin-blue .sidebar-menu > li > .treeview-menu > li:hover > a { /*좌측메뉴 확장시 서브메뉴 스타일*/
    font-weight: bold;
}

.skin-blue .treeview-menu > li > a { /*좌측메뉴 확장시 서브메뉴 텍스트,아이콘 스타일*/
    color: white;
}

.skin-blue .treeview-menu > li > a:checked {
    color: white;
    font-weight:bold;
    background: #03939B;
}

@media (min-width: 768px) {
    .sidebar-mini .sidedbar-collapse .sidebar-menu {
        width:100px;
    }
    .Menu {
    }

}

/*.skin-blue .sidebar-menu > li:hover > a, .skin-blue .sidebar-menu > li.active > a {
    color: #fff;
    border-left-color: #3c8dbc
}*/

.box-body {
    padding: 5px 10px 10px 10px;
}

.dxbl-tabs-item .dxbl-active {  /*탭 컨트롤*/
    background: var(--rz-primary);
    color : white !important;
}

.dxbl-tabs-item .dxbl-active > span { /*탭 컨트롤*/
    background: var(--rz-primary);
    color: white !important;
}

.expanderStyle {
    width: 30px;
    height: calc(100vh);
    align-items: stretch;
    background: #7ABCBF;
    display: inline-flex;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-top: 10px;
    flex-direction: column;
}

.expanderStyle div p {
    color: white;
    writing-mode:vertical-lr;
    font-size:20px;

}

.expander-icon {
    height: 100px;
    width: 2px;
    background: #b0e4e7;
    margin:1px;
    float:left;
    margin-top:20px;
}

/*화면별 Grid Height*/
    /*결과 및 그래프 page - 출력선택사항 DataGrid */
.nonScroll.dxbs-gridview .dxgvPSL {
    height: calc(100vh - 1300px) !important;
}

.dxgPSL {
    height: calc(100vh - 1300px) !important;
}

.dxgvETL {
    min-width: 1500px;
    height: calc(100vh - 100px) !important;
}
/*장비-물질/검사/레벨 Device_STL page - DataGrid */
.Device_STL1.dxbs-gridview .dxgvCSD {
    height: calc(100vh - 410px) !important;
    min-height: 520px;
}
.Device_STL2.dxbs-gridview .dxgvCSD {
    height: calc(100vh - 315px) !important;
    min-height: 520px;
}
.Result_Search_Grid {
/*    height: calc(100vh - 315px) !important;*/
    min-height: 440px;
}
.bookmark {
    right: 0;
    background: #ffffff;
    width: 10px;
    height: calc(90vh);
    position: fixed;
    box-shadow: -5px 0 10px #D9D9D9;
    cursor: pointer;
}
    .bookmark > img {
        margin-right: 10px;
        top: 42%;
        right: 0;
        position: fixed;
        cursor: pointer;
    }


    /*소개페이지 디자인*/
.homeBg {
    margin-top:-100px;
    width: 100%;
    z-index: auto;
    position: static;
    top: 0;
}
.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini { /*햄버거 닫혓을때 로고 위치 수정 */
    margin-left: -40px;
}
.element {
    height: 330px;
    display: flex;
    flex-direction: column;
}
.elementHidden {
    display: block;
    height: 330px;
    display: flex;
    flex-direction: column;
}

.container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
/*    justify-content: space-between;*/
}

.flexBox {
    flex: 1;
    box-sizing: border-box;
}

.grid3Columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4rem;
    height: 350px;
    padding: 0 15px;
}

.backgroundImg {
    display: flex;
    background-image: url(../images/startpageBg.png);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 100vh;
    flex: 1;
}

.flexBtnGroup {
    gap: 0.5rem;
    float: right;
}
@media (max-width: 768px) {
    .elementHidden {
        display: none; /* 모바일에서는 요소 숨기기 */
    }
    .flexBox {
        flex: none; 
        width: auto;
    }
    .grid3Columns {
        grid-template-columns: auto;
    }
    .backgroundImg {
        height: 30vh;
        background-size: 40vh;
        background: none;
    }
    .flexBtnGroup {
        float: left;
    }
}
@media (max-width: 1660px) {
    .flexBtnGroup {
        float: left;
    }
}