.topbox{ height: 485px; width: 100%; padding-bottom: 20px; .mainbox{ height: 100%; position: relative; display: flex; .mainleft{ width:800px; height: 100%; float: left; .inputbox{ width: 343px; height: 58px; margin:2px 6px; float: left; text-align: end; } .organizationbox{ width:538px; height: 200px; background: white; position: absolute; top: 164px; left:166px; z-index: 100; border: 1px solid grey; overflow: auto; li{ list-style: none; } mat-tree-node{ cursor: pointer; } mat-tree-node:hover{ background: rgba(225, 225, 225, 0.8); } } .addbtn{ width: 695px; margin:20px 0; padding-bottom: 20px; } .uploadimg{ width: 400px; height: 200px; float: left; margin-top:12px; position: relative; margin-left: 80px; span{ float: left; } .uploadingimg{ width: 299px; height: 170px; cursor: pointer; position: absolute; top: 0px; left: 79px; border: 1px dashed gray; border-radius:3px; } } .image{ input{ width: 190px; margin-top: 160px; cursor: pointer; } } } .mainright{ float: left; flex: 1; height: 430px; margin-right: 100px; position: relative; .searchinput{ display: flex; position: absolute; left: 0; top: 0; } .gistopbox{ position: absolute; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); border-radius: 4px; left: 5%; top: 10px; width: 90%; height:46px; background: #FFFFFF; display: flex; justify-content: space-around; align-items: center; cursor: default;; .positionItem{ width: 30%; height: 35px; display: flex; align-items: center; .itemNum{ background: #F2F2F2; box-sizing: border-box; padding-left: 10px; width: 80%; height: 32px; line-height: 32px; margin-left: 5px; border-radius: 4px; } } .setPosition{ cursor: pointer; width: 15%; height: 32px; background: #2196F3; color: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; } .inputBox{ width: 63%; display: flex; align-items: center; .positionInput{ border: 0; border-radius: 6px; width: 90%; height: 34px; background: #F2F2F2; margin-left: 8px; box-sizing: border-box; padding-left: 10px; } } } .hidden{ opacity: 0; z-index: -1; } .show{ opacity: 1; z-index: 1; } } } } .bodyBox{ flex: 70%;overflow-y: auto; position: relative; .addBuilding{ position: absolute; z-index: 999; left: 0; top: 3px; } .buildInfoInput{ width: 393px; text-align: end; margin-left:240px; } .infobtnbox{ position: absolute; top: 30px; right: 75px; button{ width: 80px; height: 40px; margin: 0 12px; margin-top: 15px; } } } .btn{ width: 100%; text-align: center; button{ margin: 0 8px; } } .mat-spinner{ margin-top: 58px; margin-left: 203px; } table{ width: 99%; tr{ display: flex; td,th{ flex: 1; } th{ display: flex; align-items: center; justify-content: center; } input{ border: 0px ; } } } table,table tr th, table tr td { border: 0.1px solid gray; } table { text-align: center; border-collapse: collapse; padding:2px;} .deviceinfo{ padding-bottom: 60px; } .tankdetailinfo{ // border-bottom: 1px solid black;; padding-bottom: 35px; table{ th{ text-align: center; } } } .tankinfo{ display: block; width: 97.5%; text-align: center; border: 0px; } .submit1{ margin-left: -66px !important; } textarea { vertical-align: middle; border-radius: 5px; padding: 5px; width: 600px; height: 110px; resize: none; } .imgbox{ text-align: center; height: 750px; img{ max-width: 1500px; max-height: 740px; } } .previewImgBottom{ text-align: center; } .alert-danger { margin-top: -16px; text-align: left; padding-left: 77px; font-size: 12px; color: red; }