.uuid-layout {
   font-family: system-ui, sans-serif;
   max-width: 100%;
}

.uuid-layout-row {
   display: flex;
   border: 2px solid #444;
   border-radius: 6px;
   overflow: hidden;
}

.uuid-layout-cell {
   border-right: 1px solid #666;
   padding: 12px 8px;
   text-align: center;
   font-size: 14px;
   line-height: 1.4;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

   .uuid-layout-cell:last-child {
      border-right: none;
   }

.uuid-layout-random {
   background: #e8f5e9;
}

.uuid-layout-version {
   background: #fff3cd;
   font-weight: bold;
}

.uuid-layout-variant {
   background: #dbeafe;
   font-weight: bold;
}

.uuid-layout-w32 {
   flex: 32;
}

.uuid-layout-w16 {
   flex: 16;
}

.uuid-layout-w4 {
   flex: 4;
}

.uuid-layout-w12 {
   flex: 12;
}

.uuid-layout-w2 {
   flex: 2;
}

.uuid-layout-w14 {
   flex: 14;
}

.uuid-layout-w48 {
   flex: 48;
}

.uuid-layout-legend {
   margin-top: 12px;
   font-size: 14px;
}

   .uuid-layout-legend div {
      margin: 4px 0;
   }




.uuid-string-layout {
   font-family: system-ui, sans-serif;
   max-width: 100%;
}

.uuid-string-layout-row {
   display: flex;
   align-items: stretch;
   gap: 2px;
   flex-wrap: nowrap;
}

.uuid-string-layout-cell {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 10px 8px;
   border: 1px solid #666;
   border-radius: 4px;
   text-align: center;
   font-family: Consolas, Monaco, monospace;
   font-size: 18px;
   font-weight: bold;
}

   .uuid-string-layout-cell small {
      margin-top: 4px;
      font-family: system-ui, sans-serif;
      font-size: 11px;
      font-weight: normal;
   }

.uuid-string-layout-random {
   background: #e8f5e9;
}

.uuid-string-layout-version {
   background: #fff3cd;
}

.uuid-string-layout-variant {
   background: #dbeafe;
}

.uuid-string-layout-separator {
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: Consolas, Monaco, monospace;
   font-size: 22px;
   font-weight: bold;
   padding: 0 2px;
}

.uuid-string-layout-w8 {
   flex: 8;
}

.uuid-string-layout-w4 {
   flex: 4;
}

.uuid-string-layout-w3 {
   flex: 3;
}

.uuid-string-layout-w12 {
   flex: 12;
}

.uuid-string-layout-legend {
   margin-top: 12px;
   font-size: 14px;
}

   .uuid-string-layout-legend div {
      margin: 4px 0;
   }


.uuid-string-layout-timestamp {
   background: #fde68a;
}


.uuid-layout-w62 {
   flex: 62;
}