.mrs01-content { height: 100%; } .mrs01-content .kmi-layout-main-content { background-color: white; display: flex; /*overflow: hidden;*/ height: 100%; width: 100%; position: relative; display: inline-block; padding: 16px; border-radius: 16px; } .mrs01-content .kmi-top-space {} .mrs01-content .kmi-text-fields .label { text-align: right; /*flex:0 0 25%;*/ } .mrs01-content .kmi-top-space .layout-content {} .mrs01-content .kmi-top-space .layout-content .label { line-height: 42px; Font-Size: 14px; Color: rgb(0, 0, 0); Font-Style: normal; Text-Align: left; Letter-Spacing: 1px; } .mrs01-content .kmi-middle-space { height: 258px; width: 100%; /* display: flex; display:inline-block; */ } .mrs01-content .kmi-middle-space .header-row { padding: 16px 0 16px 0; } .mrs01-content .kmi-middle-space .middle-label { line-height: 48px; Font-Size: 18px; Color: rgb(0, 0, 0); Font-Style: normal; Text-Align: left; Letter-Spacing: 1px; font-weight: Bold; } .mrs01-content .kmi-display-box { min-width: 190px; height: calc(100% - 8px); /* background-color: #fafafa; */ display: flex; border-radius: 8px; /* Color: rgb(255,255,255); */ box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1); display: inline-block; background: rgb(255, 255, 255); margin-bottom: 8px; margin-right: 32px; } .mrs01-content .kmi-display-box .kmi-display-box-top { padding-top: 8px; height: calc(100% - 57px - 44px - 8px); text-align: center; } .mrs01-content .kmi-display-box .kmi-display-box-top img { height: 100%; border-radius: 50%; } .mrs01-content .kmi-display-box .kmi-display-box-middle { padding-top: 8px; padding-bottom: 8px; height: 41px; text-align: center; } .mrs01-content .kmi-display-box .kmi-display-box-middle .label { Font-Size: 14px; Color: rgb(0, 0, 0); Font-Style: normal; Text-Align: left; Letter-Spacing: 1px; } .mrs01-content .kmi-display-box .kmi-display-box-middle .label2 { Font-Size: 14px; Color: rgb(0, 0, 0); Font-Style: normal; Text-Align: right; Letter-Spacing: 1px; opacity: 0.5; } .mrs01-content .kmi-display-box .kmi-display-box-middle .label3 { Font-Size: 14px; Color: rgb(0, 0, 0); Font-Style: normal; text-align: center; Letter-Spacing: 1px; } .mrs01-content .kmi-display-box .kmi-display-box-bottom { height: 44px; text-align: left; display: flex; display: inline-block; margin-left: 13px; } .mrs01-content .kmi-display-box .kmi-display-box-bottom .label { Font-Size: 14px; Color: rgb(0, 0, 0); Font-Style: normal; text-align: left; Letter-Spacing: 1px; height: 22px; } .mrs01-content .ps-scrollbar-content { display: flex; flex-flow: row; height: 100% } .mrs01-content .bar-area { height: 178px; display: flex; } .mrs01-content .ShowOperatorLogEmp .posR{ line-height: 48px; Font-Size: 18px; Color: rgb(0, 0, 0); Font-Style: normal; Text-Align: left; Letter-Spacing: 1px; font-weight: Bold; display: flex; } .mrs01-content .ShowOperatorLogEmp .posR .open { float: left; line-height: 48px; transition: all linear 0.3s; } .mrs01-content .ShowOperatorLogEmp .posR .close.open{ transform: rotate(180deg); transition: all linear 0.3s; } .mrs01-content .ShowOperatorLogEmp { height: calc((100% - 168px) / 2); width: 100%; overflow: hidden; transition: all linear 0.3s; } .mrs01-content .ShowOperatorLogEmp.close { height: 48px; transition: all linear 0.3s; } .mrs01-content .ShowOperatorLogEmp .perfect-scrollbar { float: left; width: 100%; height: calc(100% - 48px) }