/******************************************************************************************************************************/
/* LinkBiz Grid Page Template
/******************************************************************************************************************************/


/************************************
* 공통 
*************************************/

/*요소 숨김*/
.display-none {
    display: none;
}
/*요소 보임*/
.display-initial {
    display: initial;
}
/*커서 포인트 모양*/
.point-cursor {
    cursor: pointer;
}
/*flex 양쪽 정렬*/
.disp-flex-between {
    display: flex;
    justify-content: space-between;
}
/*flex 가운데 정렬*/
.disp-flex-center {
    display: flex;
    justify-content: center;
}
/*flex 왼쪽 정렬*/
.disp-flex-left {
    display: flex;
    justify-content: flex-start;
}
/*flex 오른쪽 정렬*/
.disp-flex-right {
    display: flex;
    justify-content: flex-end;
}



/************************************
* 캘린더 dateBox 
*************************************/

/*캘린더 크기 조정*/
.dx-calendar {
    height: 200px;
    min-height: 200px;
    margin: 2px !important;
}
.dx-timeview {
    height: 200px;
    width: 230px;
    margin: 0 !important;
}
.dx-timeview-clock {
    min-height: 150px;
    min-width: 150px;
    background-size: 150px;
}
/*.dx-calendar {
    width: 250px;
    min-width: 200px;
    height: 200px;
    min-height: 200px;
    margin: 0 !important;
}
.dx-popup-bottom.dx-toolbar {
    padding: 0;
}*/



/************************************
* 그리드 dateBox 
*************************************/

/* Grid 위 Label영역 이미지 표시 */
.grid-top-img {
    height: 20px;
    width: 20px;
    margin-right: 3px;
}
/*그리드 전체 데이터 개수 표시*/
.grid-total-num {
    letter-spacing: 1px;
    font-weight: normal;
    color: #018de7;
}
/*그리드 체크박스 칼럼 크기 조정*/
.dx-command-select {
    width: 35px !important;
    min-width: 35px !important;
}



/************************************
* 선택박스 SelectBox
*************************************/

/*devSelectBox Custom icon*/
.custom-icon {
    height: 10px;
    width: 10px;
}

/************************************
* 버튼 Button
*************************************/

/*devButton 텍스트 및 icon 설정*/
.dx-button-has-text .dx-button-content {
    padding: 3px 15px 3px;
    font-size: 12px;
}
.dx-button .dx-icon {
    font-size: 14px;
    margin-right: 0px;
    padding: 0px;
}
.dx-button-has-icon .dx-button-content {
    padding: 0px;
}
.pdt03 {
    padding-top: 3px;
}
.pdt05 {
    padding-top: 5px;
}

/*버튼에 아이콘 이미지 넣을 때 크기 조정*/
.cst_btn_icon .dx-icon {
    margin-right: 2px;
    width: 14px;
    height: 14px;
}

/******************************************************************************************************************************/
/*  // Grid Page Template
/******************************************************************************************************************************/


/************************************
* 파일 업로드
*************************************/
#dropzone_external {
    background-color: rgba(183, 183, 183, 0.1);
    border-width: 2px;
    border-style: dashed;
    padding: 10px;
}

#dropzone_external > * {
    pointer-events: none;
}

#dropzone_external.dropzone-active {
    border-style: solid;
}

#dropzone_image {
    max-width: 100%;
    max-height: 100%;
}

#dropzone_text > span {
    font-weight: 100;
    opacity: 0.5;
}

#upload_progress {
    display: flex;
    margin-top: 10px;
}

.flex-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.file-item-info {
    margin-bottom: 10px;
}
/************************************
* // 파일 업로드
*************************************/

/************************************
* 탭패널 TabPanel
*************************************/
/*탭패널*/
.dx-tabpanel-tabs .dx-tabs {
    height: 25px;
}

.dx-tab {
    padding: 0px;
}

.dx-tab-selected:before {
    bottom: 0;
}

.dx-tab-selected:after {
    bottom: 0;
}

.dx-tabpanel .dx-tabs-wrapper {
    height: 25px;
}

.dx-tabpanel .dx-tab {
    height: 24px;
}

/************************************
* 체크박스
*************************************/
.dx-checkbox.dx-state-readonly .dx-checkbox-icon {
    border-color: #DEDEDE;
}

.dx-checkbox-icon {
    border: 1px solid #DEDEDE;
}

/************************************
* 라디오버튼
*************************************/

.dx-radiobutton-icon:before {
    width: 17px;
    height: 17px;
}

.dx-radiobutton-icon-checked .dx-radiobutton-icon-dot {
    display: block;
    margin-top: -14.6px;
    margin-left: 4.9px;
    width: 10px;
    height: 10px;
    background: #337ab7;
    content: "";
    border-radius: 5px;
}

.dx-radio-value-container {
    padding-right: 3px !important;
}