.epm-container { display: flex; border-radius: 16px; background-color: rgb(255, 255, 255); padding: 16px; height: calc(100%); } .button { background-color: rgb(214, 56, 56); border-radius: 8px; height: 42px; width: 42px; background-position: center; background-repeat: no-repeat; background-size: 24px 24px; position: relative; margin-right: 16px; } .button img { height: 24px !important; margin-left: calc(50% - 12px); margin-top: calc(50% - 12px); } .left_bar { width: 580px; margin-right: 32px; } .left_bar > .program { padding-bottom: 16px; } .title { color: rgb(0, 0, 0); font-size: 18px; font-family: "Noto Sans TC", sans-serif; text-align: left; font-style: normal; letter-spacing: 1px; font-weight: 700; line-height: 48px; } .right-title { margin-left: 16px; } .program > .progress { display: flex; padding-bottom: 8px; flex-wrap: wrap; flex-direction: row; } .program > .progress > span { width: 50%; height: 24px; } .program > .progress > span:nth-child(even) { display:; } .program > .progress > span:nth-child(even) { text-align: right; } .right_bar { width: 80%; display: flex; flex-direction: column; } .right_bar > .top { height: 354px; margin-bottom: 16px; } .right_bar > .bottom { padding-top: 16px; height: 226px; } .table > .header { background-color: rgb(104, 134, 189); display: flex; height: 40px; border-top-left-radius: 8px; border-top-right-radius: 8px; font-size: 14px; color: rgb(255, 255, 255); line-height: 40px; padding: 0px 16px 0px 16px; } .table > .header > span { width: 33%; } .table > .content { padding: 16px 16px 0px 16px; } .table > .content .item { display: flex; padding-bottom: 16px; line-height: 20px; height: 20px; overflow-x: hidden; } .table > .content .item > span { width: 33%; }