*{
    padding: 0;
    margin: 0;   
}

html{
    width: 100%;
    height: 100%;
}

body{
    padding: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    min-width: 1700px;
    min-height: 640px;
}

.left-section{
    width: 320px;
    height: 100%;
}

.right-section{
    width: calc(50% - 20px);
    height: 100%;
}
.info-box,
.left-section > div:nth-child(2){
    padding: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 31px);
}

.ml-5{
    margin-left: 5px;
}
.ml-10{
    margin-left: 10px;
}
.mid-section{
    width: calc(50% - 300px);
    height: 100%;
}
.body-box{
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    flex-direction: row;
}

.left-img {
    width: 100%;
    height: calc(50% - 1px);
    display: flex;
}
.left-img > div:nth-child(1) {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-lr;
}

.preparence-box{
    display: flex;
    padding: 2px;
    width: calc(100% - 4px);
    height: 310px;
}
.preparence-box > div:nth-child(2) ,
.preparence-box > div:nth-child(1) {
    width: 50%;
    height: 100%;
}

.preparence-box > div:nth-child(2) > div:nth-child(1) {
    width: 100%;
    height: 60%;
}
.preparence-box > div:nth-child(2) > div:nth-child(2){
    width: 100%;
    height: 40%;
}
.right-img{
    display: flex;
}
.right-img > div:nth-child(1) {
    width: calc(100% / 3 * 2);
}
.right-img > div:nth-child(2) {
    width: calc(100% / 3);
}
.title{
    width: calc(100% - 1px);
    height: 29px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sub-title{
    width: calc(50%  - 1px);
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fr{
    display: flex;
}
.right-title{
    width: calc(100% - 1px);
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.right-img-box {
    width: calc(100% - 1px);
    height: 130px;
}

.w-49{
    width: calc(50% - 1px);
    height: 100%;
}
.w-50{
    width: 50%;
    height: 100%;
}
.h-45{
    height: 45px;
    width: 100%;
}
.h-46 {
    width: 100%;
    height: 46px;
}
.h-46 > div,
.h-45 > div{
    display: flex;
    align-items: center;
}
.h-46 > div:nth-child(1),
.h-45 > div:nth-child(1) {
    width: 120px;
    justify-content: center;
}
.h-46 > div:nth-child(2),
.h-45 > div:nth-child(2) {
    width: calc(100% - 142px);
    padding-left: 20px;
}

.prpr-box{
    width: calc(100%  - 4px);
    height: calc(100% - 388px);
    padding: 2px;
}
td[aria-label="Column 접근로 및 이동류"][rowspan="2"] > .dx-datagrid-text-content{
    line-height: 3;
}

.btn-box{
    width: calc(100% - 20px);
    height: 40px;
    margin-left: 0;
    margin-right: 20px;
    display: flex;
    justify-content: right;
    align-items: center;
}

.dx-texteditor-input[role="combobox"] {
    text-align: center;
}
.row-2{
    display: flex;
    width: 100%;
    height: 60px;
}
.row-1{
    display: flex;
    width: 100%;
    height: calc((100% - 67px) / 7);
}
.row-1 > div:nth-child(1),
.row-2 > div:nth-child(1) {
    width: 140px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row-1-rght,
.row-2-rght {
    width: calc((100% - 140px) / 4 );
    height: 100%;
    align-items: center;
    justify-content: center;
}
.row-1-rght{
    display: flex;
}
.row-2-rght > div:nth-child(1) {
    width: 100%;
    height: calc(50% - 1px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.three {
    width: 100%;
    height: 50%;
}

.three > div:nth-child(1),
.three > div:nth-child(2) {
    width: calc(100% / 3 - 1px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.three > div:nth-child(3) {
    width: calc(100% / 3);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.half{
    display: flex;
    width: 100%;
    height: 100%;
}
.half > div:nth-child(2),
.half > div:nth-child(1) {
    width: calc(50% - 1px);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.half > div:nth-child(2) {
    width: calc(50%);
}

input[role="spinbutton"]{
    text-align: center;
}