.line { position: relative; top: 0; left: 0; bottom: 0; height: 1px; transition: all 0.3s ease-in-out; &::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; height: 1px; background-image: linear-gradient(90deg, transparent 50%, currentColor 50%); background-size: 100% 100%; background-repeat: no-repeat; z-index: 1; } &::after { content: ''; position: absolute; top: 0; left: 0; bottom: 0; height: 1px; background-image: linear-gradient(currentColor 50%, transparent 50%); background-size: 100% 100%; background-repeat: no-repeat; z-index: 2; } } .left-line { width: 2%; top: 1px; background-color: #E5E6EB; } .middle-line { width: 3%; background-color: #1A6FB8; left: 1%; } .right-line { top: -1px; width: 95.97%; background-color: #E5E6EB; left: 4%; } .table { //width="100%" borderColor='#E5E6EB' width: 100%; border-color: #E5E6EB; &-title { color: #86909C; } } .title{ display: flex; &-text{ color: #86909C; } } .dataSync { &-page { background-color: #fff; margin: 8px 8px 0px 16px; padding: 12px 16px 16px 16px; height: calc(100vh - 211px); overflow-y: scroll; } &-addBtn { cursor: pointer; padding: 8px; } &-btnApply { padding: 5px 12px; display: flex; justify-content: center; cursor: pointer; } &-excel { background-color: #fff; position: absolute; left: 16px; right: 16px; bottom: 0; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.25); z-index: 1; } }