* { margin: 0; padding: 0; } .flowChart { background-color: rgb(245, 245, 245); padding: 12px; display: flex; } .flowChart-left { width: 50px; flex-shrink: 0; } .flowChart .dashed { width: 0px; height: 100%; margin-left: 50%; border-left-style: dashed; border-left-color: darkgray; border-left-width: 2px; } .flowChart-right { flex-grow: 1; } .flowChart .oneNode { display: flex; align-items: center; width: 100%; margin-bottom: 14px; } .flowChart .check { width: 40px; height: 40px; border-radius: 50px; line-height: 40px; color: white; font-size: 12px; text-align: center; position: relative; left: -49px; flex-shrink: 0; background-color: rgb(125, 122, 117); border: 4px solid rgb(173,168,163); } .flowChart .check-success { background-color: rgb(87, 194, 64); border: 4px solid rgba(198, 228, 177,0.9); } .flowChart .check-danger { background-color: rgb(228,108,35); border: 4px solid rgb(250, 166, 122); } .flowChart .check-prime { background-color: rgb(0, 136, 165); border: 4px solid rgb(88, 191, 243); } .flowChart .check-warning { background-color: rgb(248, 144,2); border: 4px solid rgba(255, 208, 122,1); } .flowChart .NodeDetail { background-color: white; margin-left: -60px; flex-grow: 1; border: 1px solid gainsboro; border-radius: 3px; padding: 14px; display: flex; flex-direction: column; box-shadow: 1px 1px 3px gainsboro; } .flowChart img { width: 30px; height: 30px; border-radius: 20px; } .NodeDetail .details { flex-grow: 1; padding-left: 8px; margin-left: 8px; border-left: 4px solid rgb(72, 108, 160); } .details p { color: rgb(154, 154, 154); font-size: 14px; font-weight: 100; } .NodeDetail-title { display: flex; margin-bottom: 10px; } .NodeDetail-content { flex-grow: 1; } .NodeDetail-content p { text-indent: 2em; text-align: justify; font-size: 14px; } .NodeDetail-footer { margin-top: 10px; } .NodeDetail-footer span { font-size: 12px; font-weight: 100; color: rgb(104, 104, 104); float: right; } .badge { padding: 2px 5px; font-size: 12px; background-color: rgb(72, 108, 160); border-radius: 10px; font-weight: 100; color: white; letter-spacing: 2px; box-shadow: 1px 1px 1px gainsboro; } .BadgeGray { background-color: rgb(104, 108, 104); } .tag { width: 0; height: 0; border: 14px solid; border-style: dashed; border-color: transparent white transparent transparent; position: absolute; left: -13px; top: -14px; } .tag-boder { width: 0; height: 0; border: 12px solid; border-style: dashed; border-color: transparent gainsboro transparent transparent; position: relative; left: -59px; } .NodeDetail-content p{ margin-top: 7px; }