:root {

    --wp--colour--base--white: #ffffff;
    --wp--colour--base--white--rgb:	255,255,255;
    --wp--colour--base--gray--10: #eef0f2;	
    --wp--colour--base--gray--10--rgb: 238,240,242;
    --wp--colour--base--gray--20: #d2d7db;	
    --wp--colour--base--gray--20--rgb: 210,215,219;
    --wp--colour--base--gray--30: #b5bec5;	
    --wp--colour--base--gray--30--rgb: 181,190,197;
    --wp--colour--base--gray--40: #9FA9B1;	
    --wp--colour--base--gray--40--rgb: 159,169,177;
    --wp--colour--base--gray--50: #88949D;	
    --wp--colour--base--gray--50--rgb: 136,148,157;
    --wp--colour--base--gray--60: #727E89;	
    --wp--colour--base--gray--60--rgb: 114,126,137;
    --wp--colour--base--gray--70: #5b6975;	
    --wp--colour--base--gray--70--rgb: 91,105,117;
    --wp--colour--base--gray--80: #3d474f;	
    --wp--colour--base--gray--80--rgb: 61,71,79;
    --wp--colour--base--gray--90: #202429;	
    --wp--colour--base--gray--90--rgb: 32,36,41;
    --wp--colour--base--black: #111315;	
    --wp--colour--base--black--rgb: 17,19,21;

    /* Active */
    --wp--colour--ui--green: #73b249;
    /* Qualified, qualified active */
    --wp--colour--ui--orange: #ffb300;
    /* Pending */
    --wp--colour--ui--blue: #3954a5;
    /* Expired, invalid */
    --wp--colour--ui--red: #f53717;
    /* Disabled, inactive, retired, unpublished */
    --wp--colour--ui--gray: var(--wp--colour--base--gray--50);
    /* Focus, select outline, also admin UI colour */
    --wp--colour--ui--select: var(--wp-admin-theme-color);
    /* UI Yellow */
    --wp--colour--ui--yellow: var(--wp--colour--base--white);
    /* UI Black */
    --wp--colour--ui--black: var(--wp--colour--base--black);

    /* WP Blues */
    --wp-admin-theme-color: #0693e3;
    --wp-admin-theme-color--rgb: 6,147,227;
    --wp-admin-theme-color-darker-10: #0573b1;
    --wp-admin-theme-color-darker-10--rgb: 5,115,177;
    --wp-admin-theme-color-darker-20: #035380;
    --wp-admin-theme-color-darker-20--rgb: 3,83,128;
}

.client-toggle-wrapper {
    background-color: var(--wp--colour--base--white);
    border: none;
    border-radius: 4px;
    box-shadow: 0 0 0 1pt var(--wp--colour--base--black);
    display: flex;
    flex-flow: column;
    font-size: .8rem;
    height: 2.5rem;
    margin: .5rem;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.client-toggle-wrapper.toggled {
    height: auto;
    transition: height 5s ease;
}

.client-toggle-wrapper > .client-icon-button {
    align-self: start;
    aspect-ratio: 1/1;
    background-color: transparent;
    border: none;
    border: none;
    display: flex;
    margin: 0;
    padding: .75rem;
    height: 2.5rem;
}

.client-toggle-wrapper > .client-icon-button svg {
    height: 1rem;  
    width: auto;
}

.client-toggle-wrapper > .client-icon-button svg g#afterword_fterword {
    display: none;
    opacity: 0;
}

.client-toggle-wrapper.toggled > .client-icon-button svg g#afterword_fterword {
    display: inline;
    opacity: 1;
    transition: opacity .25s ease;
}

.client-toggle-wrapper > .client-table {
    display: none;
    height: auto;
    min-width: 8rem;
    position: relative;
    top: -1px;
    width: min-content;
}

.client-toggle-wrapper > .client-table.opened {
    display: flex;
    flex-direction: column;
}

.client-toggle-wrapper > .client-table > .client-cell {
  border-top: 1px solid var(--wp--colour--base--black);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  padding: .75rem;
  overflow-wrap: word-wrap;
}

.client-toggle-wrapper > .client-table > .client-cell.cols-2 {
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    padding: .75rem;
  }

#client-dev-site-bar .client-table > .client-cell:nth-of-type(1) {
    background-color: var(--wp--colour--base--gray--20);
}

#client-dev-site-bar .client-table > .client-cell:nth-of-type(2) {
    background-color: var(--wp--colour--base--gray--10);
}

#client-dev-site-bar .client-table > .client-cell:nth-of-type(3) {
    border-top: none;
}

.client-toggle-wrapper > .client-table > .client-cell a {
    border-bottom: 1px dotted var(--wp--colour--base--black);
    display: inline;
    width: max-content;
    text-decoration: none;
}

.client-toggle-wrapper > .client-table > .client-cell a:hover {
    border-bottom: 1px solid var(--wp--colour--base--black);
}

.meta-heading_1 {
    font-weight: 600;
    padding-bottom: .2em;
}

.meta-heading_2 {
    text-transform: uppercase;
    letter-spacing: .075em;
    padding-bottom: .2em;
}

.client-table > .client-cell .meta-heading_2 {
    font-size: .8em;
}